From 0c124ba7b65a5b8ac5d0cc6e2abfc6a07c1e7629 Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Tue, 20 Aug 2024 19:04:44 +0200 Subject: [PATCH] THEME_{PRIMARY,HINT,SCHEME,CONTRAST} --- .github/workflows/build.yml | 20 +++++++++++ .github/workflows/preview.yml | 4 +++ .github/workflows/release.yml | 4 +++ docs/getting-started/introduction.mdx | 52 ++++++++++++++++++--------- tailwind.config.ts | 18 ++++++---- 5 files changed, 76 insertions(+), 22 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 1591f2d5..2dd8be67 100644 --- 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 index bb523d78..5562e03d 100644 --- 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 index c30ae4c7..9d6c3447 100644 --- 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/introduction.mdx b/docs/getting-started/introduction.mdx index c5682df7..664546dd 100644 --- 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
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
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") diff --git a/tailwind.config.ts b/tailwind.config.ts index 0773f754..5697b564 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,5 +1,5 @@ import type { Config } from 'tailwindcss' -import { withMaterialColors } from 'tailwind-material-colors' +import { withMaterialColors, Options } from 'tailwind-material-colors' const config: Config = { darkMode: 'class', @@ -10,24 +10,30 @@ const config: Config = { // // https://tailwind-material-colors-docs.vercel.app/ // + +const primary = process.env.THEME_PRIMARY || '#323e48' +const hint = process.env.THEME_HINT || '#d29922' +const scheme = (process.env.THEME_SCHEME || 'tonalSpot') as Options['scheme'] +const contrast = Number(process.env.THEME_CONTRAST) || 0 + const config2 = withMaterialColors( config, { // Your base colors as HEX values. 'primary' is required. - primary: '#323e48', - // secondary and/or tertiary are optional, if not set they will be derived from the primary color. + primary, + // Secondary and/or tertiary are optional, if not set they will be derived from the primary color. // secondary: '#ffff00', // tertiary: '#0000ff', // Add any named colors you need: - hint: '#d29922', + hint, // green: '#00ff00', // blue: '#0000ff', }, { extend: false, - scheme: 'tonalSpot', // one of 'content', 'expressive', 'fidelity', 'monochrome', 'neutral', 'tonalSpot' or 'vibrant' - contrast: 0, // contrast is optional and ranges from -1 (less contrast) to 1 (more contrast). + scheme, // one of 'content', 'expressive', 'fidelity', 'monochrome', 'neutral', 'tonalSpot' or 'vibrant' + contrast, // contrast is optional and ranges from -1 (less contrast) to 1 (more contrast). }, )