Theme Tokens

Complete reference for all CSS custom properties (design tokens) available in @duskmoon-dev/core themes.

Overview

Each theme defines 65+ color tokens plus shape and depth tokens. All color tokens are generated from @duskmoon-dev/design YAML files in OKLCH format.

/* Tokens are CSS custom properties on [data-theme] selectors */
[data-theme="sunshine"] {
  --color-primary: oklch(72% 0.17 75);
  /* ... */
}

Brand Colors (12 tokens)

Token	CSS Variable	Description
Primary	--color-primary	Main brand color
Primary Content	--color-primary-content	Text on primary
Primary Container	--color-primary-container	Lighter primary for backgrounds
On Primary Container	--color-on-primary-container	Text on primary container
Secondary	--color-secondary	Secondary brand color
Secondary Content	--color-secondary-content	Text on secondary
Secondary Container	--color-secondary-container	Lighter secondary for backgrounds
On Secondary Container	--color-on-secondary-container	Text on secondary container
Tertiary	--color-tertiary	Tertiary accent color
Tertiary Content	--color-tertiary-content	Text on tertiary
Tertiary Container	--color-tertiary-container	Lighter tertiary for backgrounds
On Tertiary Container	--color-on-tertiary-container	Text on tertiary container

Usage

<div class="bg-primary text-primary-content">Primary surface</div>
<div class="bg-primary-container text-on-primary-container">Container</div>

Surface Colors (10 tokens)

Token	CSS Variable	Description
Surface	--color-surface	Default background
Surface Dim	--color-surface-dim	Dimmed background
Surface Bright	--color-surface-bright	Brighter background
Surface Container Lowest	--color-surface-container-lowest	Lowest elevation
Surface Container Low	--color-surface-container-low	Low elevation
Surface Container	--color-surface-container	Default elevation
Surface Container High	--color-surface-container-high	High elevation
Surface Container Highest	--color-surface-container-highest	Highest elevation
On Surface	--color-on-surface	Text on surface
On Surface Variant	--color-on-surface-variant	Secondary text on surface

MD3 Elevation Mapping

Lowest → Low → Default → High → Highest
  (0)    (1)    (2)      (3)     (4)

Semantic Colors (16 tokens)

Token	CSS Variable	Description
Info	--color-info	Informational state
Info Content	--color-info-content	Text on info
Info Container	--color-info-container	Info background
On Info Container	--color-on-info-container	Text on info container
Success	--color-success	Success state
Success Content	--color-success-content	Text on success
Success Container	--color-success-container	Success background
On Success Container	--color-on-success-container	Text on success container
Warning	--color-warning	Warning state
Warning Content	--color-warning-content	Text on warning
Warning Container	--color-warning-container	Warning background
On Warning Container	--color-on-warning-container	Text on warning container
Error	--color-error	Error state
Error Content	--color-error-content	Text on error
Error Container	--color-error-container	Error background
On Error Container	--color-on-error-container	Text on error container

Neutral Colors (10 tokens)

Token	CSS Variable	Description
Base 100	--color-base-100	Lightest neutral
Base 200	--color-base-200	Light neutral
Base 300-900	--color-base-{N}	Neutral scale
Base Content	--color-base-content	Default text color

Outline Colors (2 tokens)

Token	CSS Variable	Description
Outline	--color-outline	Default border color
Outline Variant	--color-outline-variant	Subtle border color

Accent Colors (2 tokens)

Token	CSS Variable	Description
Accent	--color-accent	Accent highlight
Accent Content	--color-accent-content	Text on accent

Neutral Colors (3 tokens)

Token	CSS Variable	Description
Neutral	--color-neutral	Neutral base
Neutral Content	--color-neutral-content	Text on neutral
Neutral Variant	--color-neutral-variant	Muted neutral

Inverse Colors (3 tokens)

Token	CSS Variable	Description
Inverse Surface	--color-inverse-surface	Reversed surface
Inverse On Surface	--color-inverse-on-surface	Text on inverse surface
Inverse Primary	--color-inverse-primary	Primary for inverse contexts

Shadow & Scrim (2 tokens)

Token	CSS Variable	Description
Shadow	--color-shadow	Shadow color
Scrim	--color-scrim	Overlay backdrop

Elevation Shadows (6 tokens)

Theme-aware shadow tokens that use --color-shadow with color-mix() for proper opacity. These adapt automatically when switching themes.

Token	CSS Variable	Description
XS	--shadow-xs	Subtle elevation (1px)
SM	--shadow-sm	Low elevation (cards)
MD	--shadow-md	Medium elevation (dropdowns)
LG	--shadow-lg	High elevation (modals)
XL	--shadow-xl	Higher elevation
2XL	--shadow-2xl	Maximum elevation

<div class="shadow-sm">Low elevation card</div>
<div class="shadow-lg">Modal dialog</div>

MD3 Elevation Levels (6 tokens)

Semantic shadow tokens that map Material Design 3 elevation levels to shadow effects. These provide a hierarchy-based API on top of the size-based shadow tokens.

Level	CSS Variable	Maps To	Description
0	--shadow-elevation-0	none	Flat surface
1	--shadow-elevation-1	--shadow-xs	Slight lift
2	--shadow-elevation-2	--shadow-sm	Card surface
3	--shadow-elevation-3	--shadow-md	Dropdown/menu
4	--shadow-elevation-4	--shadow-lg	Dialog/modal
5	--shadow-elevation-5	--shadow-xl	Top-level overlay

<!-- Utility classes -->
<div class="elevation-2">Card surface</div>
<div class="elevation-4">Modal dialog</div>

<!-- Tailwind shadow utilities -->
<div class="shadow-elevation-3">Dropdown menu</div>

Spacing Tokens

Generated from @duskmoon-dev/design YAML. Available as CSS custom properties on :root.

Token	CSS Variable	Value	Description
Spacing 0–24	--spacing-{N}	0px–96px	Layout spacing scale

Radius Tokens

Token	CSS Variable	Value	Description
None	--radius-none	0px	No rounding
XS	--radius-xs	4px	Subtle rounding
SM	--radius-sm	8px	Small rounding
MD	--radius-md	12px	Medium rounding
LG	--radius-lg	16px	Large rounding
XL	--radius-xl	20px	Extra large rounding
2XL	--radius-2xl	28px	Maximum rounding
Full	--radius-full	9999px	Pill shape

Elevation Tokens

Token	CSS Variable	Value	Description
Level 0	--elevation-level0	0px	No elevation
Level 1	--elevation-level1	1px	Subtle lift
Level 2	--elevation-level2	3px	Card elevation
Level 3	--elevation-level3	6px	Raised elevation
Level 4	--elevation-level4	8px	Dialog elevation
Level 5	--elevation-level5	12px	Maximum elevation

Focus / Hover States

Components use color-mix() to compute focus and hover states at runtime rather than dedicated focus tokens:

/* Hover state — darken by mixing with black */
.btn-primary:hover {
  background-color: color-mix(in oklch, var(--color-primary), black 10%);
}

/* Focus ring — semi-transparent currentColor */
.btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
}

Transparency

.custom-transparent {
  background-color: color-mix(in oklch, var(--color-primary) 50%, transparent);
}

Available Themes

Theme	Mode	Primary Hue	Character
sunshine	Light	Warm orange	Energetic, warm
moonlight	Dark	Soft blue	Serene, elegant
ocean	Dark	Deep blue	Calm, immersive
forest	Light	Rich green	Natural, grounded
sunset	Light	Warm coral	Vibrant, expressive

Custom Themes

Override any token with a [data-theme] selector:

[data-theme="my-theme"] {
  color-scheme: light;
  --color-primary: oklch(62% 0.22 265);
  --color-primary-content: oklch(100% 0 0);
  /* ... define all tokens */
}

See Customization for full details.