Colors

Colors in Kaleidoscope are designed to be functional — if you're styling a border, use tokens.color.border rather than reaching for the raw underlying palette color. This means we can apply theming without any extra effort if all colors are using these functional tokens. They also help to maintain the consistent application of colors — because we have a token for borders all of our borders will use the same color.

To use colors, import tokens from @qwilr/kaleidoscope/tokens and pick your color from the object.

import { tokens } from "@qwilr/kaleidoscope/tokens";

export const example = style({
  background: tokens.color.surface,
});

Naming and usage

There are a few naming conventions within the set of functional color tokens:

Theming

Kaleidoscope's functional colors come with light/dark theming out of the box. By default, everything in the application is light themed. To apply a dark theme, use the darkTheme className from tokens.

import { darkTheme } from "@qwilr/kaleidoscope/tokens";

// Both the card and its children will now be dark themed
const Example = () => (
  <Card className={darkTheme}>
    <Stack padding="m">
      <Text size="l">Some text</Text>
      <Button>Do the thing</Button>
    </Stack>
  </Card>
);

Palette

This is the fundamental base of all colors in Kaleidoscope. Before reaching for a palette color always check if there is a functional color to pick first, as choosing from the palette means any theming must be handled manually because the colors are fixed and do not adapt to the theme.

To use a palette color, import palette from @qwilr/kaleidoscope/tokens and pick your color from the object.

import { palette } from "@qwilr/kaleidoscope/tokens";

export const example = style({
  background: palette.purple400,
});

You can also access the raw RGB values for palette colors, which is useful if you need to change the opacity of a color. RGB colors are specified in the CSS Color Module Level 4 syntax, so the opacity is separated with a slash instead of a comma.

import { rgb } from "@qwilr/kaleidoscope/tokens";

export const example = style({
  background: `rgb(${rgb.purple400} / 0.5)`,
});

Figma

To get the right color from Figma, hop into dev mode and select a layer.

Any color tokens in your selection will show up under colors, and styles for the selected layer will appear in the CSS custom properties syntax. So in this example, the color token in Figma is names textPrimary, and the style shows var(--textPrimary). In Vanilla Extract you can grab the same color from tokens as tokens.color.textPrimary.

Accessibility

The functional color tokens are designed to have AA contrast between surfaces and text/icons. If you use any colors directly from the palette you will need to manually check the contrast for text and icons.