Color

Color is OKLCH everywhere. The system is dark-first: :root holds the dark palette; [data-theme="light"] overrides what changes.

A single CSS variable, --accent-h (default 200), drives every accent shade. Override at runtime to reskin the whole UI in one declaration.

Semantic palette#

Components consume semantic tokens (bg, panel, accent, border, …), never primitives. Use the theme toggle in the toolbar to flip dark / light.

Surfaces#

var(--color-bg)

panel

var(--color-panel)

panel-2

var(--color-panel-2)

border

var(--color-border)

border-strong

var(--color-border-strong)

Text#

text

var(--color-text)

text-muted

var(--color-text-muted)

text-dim

var(--color-text-dim)

Accent (driven by `--accent-h`)#

accent

var(--color-accent)

accent-text

var(--color-accent-text)

accent-dim

var(--color-accent-dim)

accent-glow

var(--color-accent-glow)

Companion palette#

Theme-invariant — same OKLCH values look right in both themes.

var(--color-ok)

warn

var(--color-warn)

err

var(--color-err)

purple

var(--color-purple)

pink

var(--color-pink)

Reskinning via `--accent-h`#

css

/* The whole accent family shifts harmonically. */
:root {
  --accent-h: 280;
} /* purple */
:root {
  --accent-h: 150;
} /* green  */
:root {
  --accent-h: 25;
} /* coral  */

Usage#

tsx

// Tailwind utility consuming the token:
<div className="bg-panel text-text border border-border" />
 
// Raw CSS:
.my-class {
  background: var(--color-panel);
  color: var(--color-text);
}
 
// TS (rare, only for inline styles):
import { colorSemanticDark } from '@ship-it-ui/tokens';