Basic Theming
createCoralPreset
createCoralPreset is our main function for loading and modifying the theme. It allows you to load our preset into your application.
As outlined in the Design section, you need to pass the createCoralPreset function in your config, and then you can pass the below fields to customize the theme.
import { defineConfig } from '@pandacss/dev';
import { createCoralPreset } from '@krakentech/coral-design';
export default defineConfig({
presets: [
createCoralPreset({
name: 'my-coral-preset',
customGlobalCss: {},
options: {}
}),
],
...
});name
The name of the preset. This is only used to identify the preset in the Coral Design system, as it’s a required field in defining presets from Panda. It also helps in labelling presets in case you have multiple presets in your project.
customGlobalCss
createCoralPreset ships with a default global CSS object that contains some styling. If you want to override some or all of the default styles, you can pass a custom global CSS object to this field. This is useful for setting global styles that apply to your entire application.
The default global CSS object is as follows:
{
'*': {
boxSizing: 'border-box',
},
'#root, #__next': {
isolation: 'isolate',
},
'html, body': {
padding: 0,
margin: 0,
},
html: {
fontSize: '62.5%',
},
body: {
fontWeight: 300,
fontStyle: 'normal',
fontFamily: '{typography.fontFamily}',
lineHeight: '1.5',
fontSize: '1.6rem',
backgroundColor: '{colors.background.base.900}',
color: '{colors.contents.base.900}',
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale',
},
button: {
fontFamily: '{typography.fontFamily}',
},
a: {
color: '{colors.background.tertiary.500}',
},
fieldset: {
border: 'none',
},
'img, picture, video, canvas, svg': {
maxWidth: '100%',
},
'[data-floating-ui-portal] > span': {
zIndex: 1301,
}
}If you want to override this, you would pass a custom global CSS object like this:
// panda.config.ts
export default defineConfig({
presets: [
createCoralPreset({
customGlobalCss: {
body: {
backgroundColor: 'white',
color: 'black',
},
}
})
]
})Note: The custom global CSS object will be merged with the default global CSS object, so you only need to specify the styles you want to override. If you want to remove a style, you can set it to
undefinedornull.
options
The options object allows you to customize the theme.
tokens
This is where you can define the tokens for the theme. Tokens are the design system’s building blocks, such as colors, spacing, typography, etc. All theme configuration is done through tokens, which are then used to generate the final CSS.
animation
// panda.config.ts
export default defineConfig({
presets: [
createCoralPreset({
options: {
tokens: {
animation: {
easing: [0, 1, 2],
durationMs: 1000
}
}
}
})
]
});| Name | Type | Default |
|---|---|---|
easing | number[]The easing function used for the animation in the cubiz bezier format (array of numbers). | |
durationMs | numberThe duration of the animation in milliseconds. |
components
// panda.config.ts
export default defineConfig({
presets: [
createCoralPreset({
options: {
tokens: {
components: {
button: {
primary: {
contained: {
idleColor: 'red'
}
}
}
}
}
}
})
]
});borderRadius
// panda.config.ts
export default defineConfig({
presets: [
createCoralPreset({
options: {
tokens: {
borderRadius: { base: { value: 4 } }
}
}
})
]
});borderWidth
// panda.config.ts
export default defineConfig({
presets: [
createCoralPreset({
options: {
tokens: {
borderWidth: 4
}
}
})
]
});containerWidth
// panda.config.ts
export default defineConfig({
presets: [
createCoralPreset({
options: {
tokens: {
containerWidth: {
sm: 400
}
}
}
})
]
});| Name | Type | Default |
|---|---|---|
sm | number | |
md | number | |
lg | number | |
xl | number |
remSize
// panda.config.ts
export default defineConfig({
presets: [
createCoralPreset({
options: {
tokens: {
remSize: 10
}
}
})
]
});spacing
// panda.config.ts
export default defineConfig({
presets: [
createCoralPreset({
options: {
tokens: {
spacing: {
xxs: 4
}
}
}
})
]
});| Name | Type | Default |
|---|---|---|
none | number | |
xxs | number | |
xs | number | |
xsSm | number | |
sm | number | |
smMd | number | |
md | number | |
mdLg | number | |
lg | number | |
lgXl | number | |
xl | number | |
xxl | number | |
xxxl | number |
typography
// panda.config.ts
export default defineConfig({
presets: [
createCoralPreset({
options: {
tokens: {
typography: {
fontFamily: 'Arial, sans-serif',
body1: {
base: {
fontWeight: 300
}
}
}
}
}
})
]
});semanticTokens
colors
// panda.config.ts
export default defineConfig({
presets: [
createCoralPreset({
options: {
semanticTokens: {
colors: {
background: {
base: {
500: { base: 'red', light: 'blue' },
},
},
}
}
}
})
]
});breakpoints
// panda.config.ts
export default defineConfig({
presets: [
createCoralPreset({
options: {
breakpoints: {
sm: '640px',
}
}
})
]
});| Name | Type | Default |
|---|---|---|
xs | string | |
sm | string | |
md | string | |
lg | string | |
xl | string |