For CSS-in-JS (with tree-shaking):
- import all colors in light and dark modes
- import all colors in a specific mode
- import a specific scale in light and dark modes
- import a specific scale in a specific mode
- import a specific token in light and dark modes
- import a specific token in a specific mode
- make sure the integration with Stitches is as smooth as possible
import all colors in light and dark modes
import { colors } from '@radix-ui/colors'
{
light: {
blue100: '',
red100: '',
gray100: '',
},
dark: {
blue100: '',
red100: '',
gray100: '',
}
}
// With Stitches
createCss({
theme: {
colors: colors.light
}
})
theme({
colors: colors.dark
})
import all colors in a specific mode
import { lightColors } from '@radix-ui/colors/light'
{
blue100: '',
red100: '',
gray100: '',
}
// With Stitches
createCss({
theme: {
colors: lightColors
}
})
import a specific scale in light and dark modes
import { blueScale } from '@radix-ui/colors/blue'
{
light: {
blue100: '',
blue200: '',
blue300: '',
},
dark: {
blue100: '',
blue200: '',
blue300: '',
}
}
// With Stitches
createCss({
theme: {
colors: blueScale.light
}
})
theme({
colors: blueScale.dark
})
import a specific scale in a specific mode
import { blueScale } from '@radix-ui/colors/light/blue'
{
blue100: '',
blue200: '',
blue300: '',
}
// With Stitches
createCss({
theme: {
colors: blueScale
}
})
import a specific token in light and dark modes
import { blue200 } from '@radix-ui/colors/blue'
{
light: {
blue200: ''
},
dark: {
blue200: ''
}
}
// With Stitches
createCss({
theme: {
colors: blue200.light
}
})
import a specific token in a specific mode
import { blue200 } from '@radix-ui/colors/light/blue'
{
blue200: '',
}
// With Stitches
createCss({
theme: {
colors: blue200
}
})