Radix Colors API Proposal 1

radix-colors-1.md

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
  }
})