Skip to content

Commit

Permalink
THEME_{PRIMARY,HINT,SCHEME,CONTRAST}
Browse files Browse the repository at this point in the history
  • Loading branch information
@abernier
abernier committed Aug 20, 2024
1 parent 104c437 commit 0c124ba
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 22 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
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
18 changes: 12 additions & 6 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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).
},
)

Expand Down

0 comments on commit 0c124ba

Please sign in to comment.