feat: m3 dynamic colors roles (#289)

* tailwind-material-colors * note icon * THEME_{PRIMARY,HINT,SCHEME,CONTRAST}
pmndrs · Aug 20, 2024 · 92ad896 · 92ad896
1 parent c5b1564
commit 92ad896
Show file tree

Hide file tree

Showing 26 changed files with 575 additions and 505 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -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:
@@ -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 }}
@@ -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:

diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -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

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -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

diff --git a/docs/getting-started/github-actions.mdx b/docs/getting-started/github-actions.mdx
@@ -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.
diff --git a/docs/getting-started/introduction.mdx b/docs/getting-started/introduction.mdx
@@ -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
 
@@ -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 &
@@ -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
 
@@ -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"
 
@@ -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")