Colour

Accessible color system with 12-step scales, automatic dark mode, and P3 gamut support. All credit for the color system goes to Radix Colors. Kookie UI uses Radix Colors with minimal to no modifications.

The colors, scales, and design decisions are entirely from the Radix Colors project. For complete color palette, usage guidelines, and design rationale, visit the Radix Colors documentation.

Installation

npm install @kushagradhawan/kookie-ui

Usage

Colors are controlled through the Theme component's accentColor and grayColor props. All components automatically inherit these theme colors, but individual components can override with their own color prop.

import { Theme } from '@kushagradhawan/kookie-ui';
 
<Theme accentColor="blue" grayColor="slate"><YourApp /></Theme>

The grayColor prop also accepts 'auto', which automatically matches a neutral gray to the chosen accent color for a cohesive look.

<Theme accentColor="crimson" grayColor="auto"><YourApp /></Theme>

Accent Colors

Set accentColor to choose from 25+ colors for primary interactive elements like buttons, links, and focus indicators.

Available accent colors: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.

<Theme accentColor="blue"><YourApp /></Theme>

<Theme accentColor="crimson"><YourApp /></Theme>

<Theme accentColor="green"><YourApp /></Theme>

Gray Colors

Set grayColor to select from 6 tinted gray options for text and backgrounds. Each gray has a subtle tint that pairs well with different accent colors.

Available gray colors: auto, gray, mauve, slate, sage, olive, sand.

• auto - Automatically matches a neutral gray to your accent color
• gray - Pure neutral gray
• mauve - Slightly purple-tinted gray
• slate - Slightly blue-tinted gray (default)
• sage - Slightly green-tinted gray
• olive - Slightly yellow-tinted gray
• sand - Slightly warm-tinted gray

<Theme grayColor="slate"><YourApp /></Theme>

<Theme grayColor="mauve"><YourApp /></Theme>

<Theme grayColor="auto" accentColor="crimson"><YourApp /></Theme>

Component Overrides

Individual components can override theme colors using their color prop. This is useful for creating visual hierarchy or emphasizing specific actions.

<Theme accentColor="blue">
  <Button color="crimson">Override</Button>
</Theme>

<Theme accentColor="green">
  <Button color="blue">Different Color</Button>
</Theme>

Color Scales

Each color uses a 12-step scale from lightest to darkest, designed by Radix Colors. Steps 1-3 are for subtle backgrounds, steps 4-6 for borders and dividers, steps 7-9 for interactive states, and steps 10-12 for high-contrast text and important elements.

Access color steps using CSS custom properties:

/* Accent color steps */
var(--accent-1)  /* Lightest background */
var(--accent-6)  /* Mid-tone border */
var(--accent-9)  /* Primary interactive color */
var(--accent-12) /* Darkest, high contrast */
 
/* Gray color steps */
var(--gray-1)    /* Lightest background */
var(--gray-6)    /* Mid-tone border */
var(--gray-9)    /* Standard text */
var(--gray-12)   /* High contrast text */

Dark Mode

All colors automatically adapt to dark mode when using the Theme component's appearance prop. Colors are carefully tuned to maintain proper contrast ratios in both light and dark themes.

<Theme appearance="dark" accentColor="blue"><YourApp /></Theme>

<Theme appearance="inherit" accentColor="crimson"><YourApp /></Theme>

P3 Gamut Support

Radix Colors support the P3 color gamut for displays that can show a wider range of colors. Colors automatically use P3 values when available, falling back to sRGB for compatibility.

Accessibility

All color combinations meet WCAG AA contrast requirements, as designed by Radix Colors.

Text reads the strong ink by default. For gray, that is step 12. For other colours, it is a mix of steps 11 and 12, so an error still reads red. Gray fills use step 12 with light text on top. Other colours fill with step 9. You don't set any of this. It follows from the colour.

To rank text, use emphasis on Text, Heading, Blockquote, Code and DataList.Label. It takes loud, medium or quiet.

<Text color="crimson">Payment failed</Text>
<Text emphasis="medium">Last updated 2 hours ago</Text>

Credits

The entire color system is from Radix Colors by WorkOS. Kookie UI makes no significant changes to the color values, scales, or design decisions. All credit and design work belongs to the Radix Colors project.