CSS Token Map

Core tokens

The root token block defines the base theme. Dark theme overrides redefine the same tokens under :root[data-theme="dark"].

Use tokens instead of fixed colors whenever the value should adapt to dark mode or primary color customization.

--bg
--surface
--surface-muted
--border
--text
--muted
--primary
--primary-strong
--shadow
--sidebar-width
--topbar-height

Usage rules

Use this checklist when adding styles.

• Use --surface for card backgrounds.
• Use --surface-muted for input and muted panel backgrounds.
• Use --border for neutral borders.
• Use --primary and --primary-strong for active states.
• Use color-mix with --primary for subtle selected, hover, and focus backgrounds.