Skip to content

Commit

Permalink
docs: documenet how to use a custom color palette
Browse files Browse the repository at this point in the history
  • Loading branch information
cschroeter committed Nov 18, 2024
1 parent f86c3d1 commit 24d1912
Showing 1 changed file with 70 additions and 0 deletions.
70 changes: 70 additions & 0 deletions website/src/content/pages/theme/customize.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,76 @@ export default defineConfig({
})
```

## Custom Color Palette

You can define a custom accent color palette and integrate it into your project. Here's an example of how you can
create a custom `coral` color palette:

```ts
export const coral = {
name: 'coral',
tokens: defineTokens.colors({
light: {
'1': { value: '#fff8f7' },
// ...
'12': { value: '#762d25' },
},
dark: {
'1': { value: '#1c1412' },
// ...
'12': { value: '#faa19b' },
},
}),

semanticTokens: defineSemanticTokens.colors({
'1': { value: { _light: '{colors.coral.light.1}', _dark: '{colors.coral.dark.1}' } },
// ...
'12': { value: { _light: '{colors.coral.light.12}', _dark: '{colors.coral.dark.12}' } },

default: {
value: {
_light: '{colors.coral.light.9}',
_dark: '{colors.coral.dark.9}',
},
},
emphasized: {
value: {
_light: '{colors.coral.light.10}',
_dark: '{colors.coral.dark.10}',
},
},
fg: {
value: {
_light: 'white',
_dark: 'white',
},
},
text: {
value: {
_light: '{colors.coral.light.11}',
_dark: '{colors.coral.dark.11}',
},
},
}),
}
```

> Since **Park UI** uses [Radix Colors](https://www.radix-ui.com/colors) under the hood, you can use their [tool](https://www.radix-ui.com/colors/custom) to generate your custom color palette.
And then you can use it in your `panda.config.ts` like this:

```ts
import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'
import { createPreset } from '@park-ui/panda-preset/colors/sand'
import coral from './coral'

export default defineConfig({
presets: [createPreset({ grayColor: sand, accentColor: coral, radius: 'sm' })],
// etc.
})
```

## Semantic Tokens

Another cool way to customize Park UI is by adjusting
Expand Down

0 comments on commit 24d1912

Please sign in to comment.