Radix Colors API Proposal 2

radix-colors-2.md

For CSS-in-JS (with tree-shaking):

• import all colors in light and dark modes
• import scales in light and dark modes
• import tokens in light and dark modes
• make sure the integration with Stitches is as smooth as possible

import all colors in light and dark modes

import { colors, darkColors } from '@radix-ui/colors'

// colors
{
  blue100: '',
  red100: '',
  gray100: '',
}
// darkColors
{
  blue100: '',
  red100: '',
  gray100: '',
}

// With Stitches
createCss({
  theme: {
    colors: colors
  }
})

theme({
  colors: darkColors
})

import scales in light and dark modes

import { blueScale, darkBlueScale } from '@radix-ui/colors'

// blueScale
{
  blue100: '',
  blue200: '',
  blue300: '',
}
// darkBlueScale
{
  blue100: '',
  blue200: '',
  blue300: '',
}
 

// With Stitches
createCss({
  theme: {
    colors: blueScale
  }
})

theme({
  colors: darkBlueScale
})

import tokens in light and dark modes

import { blue200, darkBlue200 } from '@radix-ui/colors'

// blue200
{
  blue200: ''
}
// darkBlue200
{
  blue200: ''
}

// With Stitches
createCss({
  theme: {
    colors: blue200
  }
})

theme({
  colors: darkBlue200
})