Skip to content

Commit

Permalink
feat: m3 dynamic colors roles (#289)
Browse files Browse the repository at this point in the history 
* tailwind-material-colors

* note icon

* THEME_{PRIMARY,HINT,SCHEME,CONTRAST}
  • Loading branch information
@abernier
abernier authored Aug 20, 2024
1 parent c5b1564 commit 92ad896
Show file tree
Hide file tree
Showing 26 changed files with 575 additions and 505 deletions.
20 changes: 20 additions & 0 deletions .github/workflows/build.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,18 @@ on:
type: string
discord:
type: string
theme_primary:
type: string
default: '#323e48'
theme_hint:
type: string
default: '#d29922'
theme_scheme:
type: string
default: 'tonalSpot'
theme_contrast:
type: string
default: '0'

jobs:
build-job:
Expand Down Expand Up @@ -58,6 +70,10 @@ jobs:
-e LOGO \
-e GITHUB \
-e DISCORD \
-e THEME_PRIMARY \
-e THEME_HINT \
-e THEME_SCHEME \
-e THEME_CONTRAST \
ghcr.io/pmndrs/docs:main npm run build
env:
BASE_PATH: ${{ steps.set-base-path.outputs.BASE_PATH }}
Expand All @@ -72,6 +88,10 @@ jobs:
LOGO: '${{ inputs.logo }}'
GITHUB: '${{ inputs.github }}'
DISCORD: '${{ inputs.discord }}'
THEME_PRIMARY: '${{ inputs.theme_primary }}'
THEME_HINT: '${{ inputs.theme_hint }}'
THEME_SCHEME: '${{ inputs.theme_scheme }}'
THEME_CONTRAST: '${{ inputs.theme_contrast }}'
- uses: actions/upload-pages-artifact@v3
with:
Expand Down
4 changes: 4 additions & 0 deletions .github/workflows/preview.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ jobs:
--build-env LOGO=gutenberg.jpg \
--build-env GITHUB="https://github.com/${{ github.repository }}" \
--build-env DISCORD="${{ secrets.DISCORD }}" \
--build-env THEME_PRIMARY="#323e48" \
--build-env THEME_HINT="#d29922" \
--build-env THEME_SCHEME="tonalSpot" \
--build-env THEME_CONTRAST="0" \
> deployment-url.txt
echo "deployment_url=$(cat deployment-url.txt)" >> $GITHUB_OUTPUT
Expand Down
4 changes: 4 additions & 0 deletions .github/workflows/release.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ jobs:
--build-env LOGO=gutenberg.jpg \
--build-env GITHUB="https://github.com/${{ github.repository }}" \
--build-env DISCORD="${{ secrets.DISCORD }}" \
--build-env THEME_PRIMARY="#323e48" \
--build-env THEME_HINT="#d29922" \
--build-env THEME_SCHEME="tonalSpot" \
--build-env THEME_CONTRAST="0" \
> deployment-url.txt
echo "deployment_url=$(cat deployment-url.txt)" >> $GITHUB_OUTPUT
Expand Down
4 changes: 4 additions & 0 deletions docs/getting-started/github-actions.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ uses: pmndrs/docs/.github/workflows/build.yml@main
logo: '/logo.png'
github: 'https://github.com/pmndrs/react-three-fiber'
discord: 'https://discord.com/channels/740090768164651008/740093168770613279'
theme_primary: '#323e48'
theme_hint: '#d29922'
theme_scheme: 'tonalSpot'
theme_contrast: '0'
```
See [`pmndrs/react-three-fiber/.github/workflows/docs.yml`](https://github.com/pmndrs/react-three-fiber/blob/master/.github/workflows/docs.yml) for an example implementation.
52 changes: 36 additions & 16 deletions docs/getting-started/introduction.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,26 @@ $ npm ci

## Configuration

| var | description | example |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| `MDX`\* | Path to `*.mdx` folder<br/>NB: can be relative or absolute | `docs` or `~/code/myproject/documentation` |
| `NEXT_PUBLIC_LIBNAME`\* | Library name | `React Three Fiber` |
| `NEXT_PUBLIC_LIBNAME_SHORT` | Library short name | `r3f` |
| `BASE_PATH` | Base path for the final URL | `/react-three-fiber` |
| `DIST_DIR` | Path to the output folder ([within project](https://nextjs.org/docs/app/api-reference/next-config-js/distDir#:~:text=should%20not%20leave%20your%20project%20directory)) | `out` or `docs/out/react-three-fiber` |
| `OUTPUT` | Set to `export` for static output | `export` |
| `HOME_REDIRECT` | Where the home should redirect | `/getting-started/introduction` |
| `MDX_BASEURL` | Base URL for inlining relative images | `http://localhost:60141`or `https://github.com/pmndrs/react-three-fiber/raw/master/docs` |
| `EDIT_BASEURL` | Base URL for displaying "Edit this page" URLs | `https://github.com/pmndrs/react-three-fiber/edit/master/docs` |
| `NEXT_PUBLIC_URL` | Final URL of the published website | `https://pmndrs.github.io/react-three-fiber` |
| `ICON` | Emoji or image to use as (fav)icon (path local to `MDX`) | `🇨🇭` or `/icon.png` or `/favicon.ico` |
| `LOGO` | Logo src/path (either FQURL or local to `MDX` path) | `/logo.png` or `https://worldvectorlogo.com/r3f.png` |
| `GITHUB` | Github URL | `https://github.com/pmndrs/react-three-fiber` |
| `DISCORD` | Discord URL | `https://discord.com/channels/740090768164651008/740093168770613279` |
| var | description | example |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| `MDX`\* | Path to `*.mdx` folder<br/>NB: can be relative or absolute | `docs` or `~/code/myproject/documentation` |
| `NEXT_PUBLIC_LIBNAME`\* | Library name | `React Three Fiber` |
| `NEXT_PUBLIC_LIBNAME_SHORT` | Library short name | `r3f` |
| `BASE_PATH` | Base path for the final URL | `/react-three-fiber` |
| `DIST_DIR` | Path to the output folder ([within project](https://nextjs.org/docs/app/api-reference/next-config-js/distDir#:~:text=should%20not%20leave%20your%20project%20directory)) | `out` or `docs/out/react-three-fiber` |
| `OUTPUT` | Set to `export` for static output | `export` |
| `HOME_REDIRECT` | Where the home should redirect | `/getting-started/introduction` |
| `MDX_BASEURL` | Base URL for inlining relative images | `http://localhost:60141`or `https://github.com/pmndrs/react-three-fiber/raw/master/docs` |
| `EDIT_BASEURL` | Base URL for displaying "Edit this page" URLs | `https://github.com/pmndrs/react-three-fiber/edit/master/docs` |
| `NEXT_PUBLIC_URL` | Final URL of the published website | `https://pmndrs.github.io/react-three-fiber` |
| `ICON` | Emoji or image to use as (fav)icon (path local to `MDX`) | `🇨🇭` or `/icon.png` or `/favicon.ico` |
| `LOGO` | Logo src/path (either FQURL or local to `MDX` path) | `/logo.png` or `https://worldvectorlogo.com/r3f.png` |
| `GITHUB` | Github URL | `https://github.com/pmndrs/react-three-fiber` |
| `DISCORD` | Discord URL | `https://discord.com/channels/740090768164651008/740093168770613279` |
| `THEME_PRIMARY` | Primary accent color (see: https://tailwind-material-colors-docs.vercel.app) | `#323e48` |
| `THEME_HINT` | Hint/Note color (see: https://tailwind-material-colors-docs.vercel.app) | `#d29922` |
| `THEME_SCHEME` | Theme scheme (see: https://tailwind-material-colors-docs.vercel.app) | `content` or `expressive` or `fidelity` or `monochrome` or `neutral` or `tonalSpot` or `vibrant` |
| `THEME_CONTRAST` | Theme contrast -- value between -1 and 1 | `0` or `-1` or `1` or `-.6` |

\* Required

Expand Down Expand Up @@ -79,6 +83,10 @@ $ (
export LOGO=gutenberg.jpg
export GITHUB=https://github.com/pmndrs/docs
export DISCORD=https://discord.com/channels/740090768164651008/1264328004172255393
export THEME_PRIMARY="#323e48"
export THEME_HINT="#d29922"
export THEME_SCHEME="tonalSpot"
export THEME_CONTRAST=0

kill $(lsof -ti:"$_PORT")
npx serve $MDX -p $_PORT --no-port-switching --no-clipboard &
Expand Down Expand Up @@ -117,6 +125,10 @@ $ (
export LOGO=gutenberg.jpg
export GITHUB=https://github.com/pmndrs/docs
export DISCORD=https://discord.com/channels/740090768164651008/1264328004172255393
export THEME_PRIMARY="#323e48"
export THEME_HINT="#d29922"
export THEME_SCHEME="tonalSpot"
export THEME_CONTRAST=0

npm run build

Expand Down Expand Up @@ -156,6 +168,10 @@ $ (
export LOGO=/logo.png
export GITHUB=https://github.com/pmndrs/react-three-fiber
export DISCORD=https://discord.com/channels/740090768164651008/740093168770613279
export THEME_PRIMARY="#323e48"
export THEME_HINT="#d29922"
export THEME_SCHEME="tonalSpot"
export THEME_CONTRAST=0

rm -rf "$MDX/out"

Expand All @@ -174,6 +190,10 @@ $ (
-e LOGO \
-e GITHUB \
-e DISCORD \
-e THEME_PRIMARY \
-e THEME_HINT \
-e THEME_SCHEME \
-e THEME_CONTRAST \
pmndrs-docs npm run build

kill $(lsof -ti:"$_PORT")
Expand Down
Loading

0 comments on commit 92ad896

Please sign in to comment.