Color Tokens

@duskmoon-dev/core provides 65+ color tokens based on Material Design 3’s dynamic color system. Each token is designed for specific UI purposes and maintains WCAG AA contrast compliance.

Color Token Categories

Primary Colors

The main brand color used for key UI elements like buttons, links, and active states.

/* Primary color tokens */
--color-primary              /* Main brand color */
--color-primary-focus        /* Hover/focus state */
--color-primary-content      /* Text on primary */
--color-primary-container    /* Light background variant */
--color-on-primary-container /* Text on container */

Secondary Colors

Complementary accent color for secondary actions and elements.

/* Secondary color tokens */
--color-secondary              /* Accent brand color */
--color-secondary-focus        /* Hover/focus state */
--color-secondary-content      /* Text on secondary */
--color-secondary-container    /* Light background variant */
--color-on-secondary-container /* Text on container */

Tertiary Colors

Third brand color unique to @duskmoon-dev/core for additional visual variety.

/* Tertiary color tokens */
--color-tertiary              /* Third brand color */
--color-tertiary-focus        /* Hover/focus state */
--color-tertiary-content      /* Text on tertiary */
--color-tertiary-container    /* Light background variant */
--color-on-tertiary-container /* Text on container */

Surface Colors

Background and surface colors with Material Design 3’s five-level elevation system.

Surface Container Elevation Levels

/* Surface color tokens */
--color-surface                   /* Base surface */
--color-surface-dim               /* Dimmed surface */
--color-surface-bright            /* Bright surface */
--color-surface-container-lowest  /* Elevation level 0 */
--color-surface-container-low     /* Elevation level 1 */
--color-surface-container         /* Elevation level 2 (default) */
--color-surface-container-high    /* Elevation level 3 */
--color-surface-container-highest /* Elevation level 4 */
--color-on-surface                /* Primary text color */
--color-on-surface-variant        /* Secondary text color */
--color-surface-variant           /* Alternative surface */

Base Colors (Neutral Scale)

DaisyUI-compatible neutral color scale for general UI elements.

/* Base (neutral) color scale */
--color-base-100     /* Lightest neutral */
--color-base-200
--color-base-300
--color-base-400
--color-base-500
--color-base-600
--color-base-700
--color-base-800
--color-base-900     /* Darkest neutral */
--color-base-content /* Text on base colors */

Semantic Colors

Dedicated colors for specific UI states and feedback.

Info (Blue)

Success (Green)

Warning (Yellow)

Error (Red)

/* Semantic color tokens for each state */
--color-info               --color-info-content
--color-info-container     --color-on-info-container

--color-success            --color-success-content
--color-success-container  --color-on-success-container

--color-warning            --color-warning-content
--color-warning-container  --color-on-warning-container

--color-error              --color-error-content
--color-error-container    --color-on-error-container

Outline Colors

Border and divider colors.

/* Outline tokens */
--color-outline         /* Primary borders */
--color-outline-variant /* Subtle borders */

Using Color Tokens

Tailwind Utility Classes

<!-- Backgrounds -->
<div class="bg-primary">Primary background</div>
<div class="bg-surface-container">Elevated surface</div>

<!-- Text -->
<p class="text-primary">Primary colored text</p>
<p class="text-on-surface">Standard body text</p>
<p class="text-on-surface-variant">Secondary text</p>

<!-- Borders -->
<div class="border border-outline">Standard border</div>
<div class="border border-outline-variant">Subtle border</div>

CSS Custom Properties

.custom-element {
  background-color: hsl(var(--color-primary));
  color: hsl(var(--color-primary-content));
  border: 1px solid hsl(var(--color-outline));
}

/* With opacity */
.overlay {
  background-color: color-mix(in srgb, hsl(var(--color-surface)) 80%, transparent);
}

Opacity Variants

Apply opacity to any color:

<div class="bg-primary/50">50% opacity primary</div>
<div class="bg-primary/75">75% opacity primary</div>
<div class="text-primary/80">80% opacity text</div>

Color Token Count

Category	Token Count
Primary	5
Secondary	5
Tertiary	5
Surface	11
Base	10
Info	4
Success	4
Warning	4
Error	4
Outline	2
Total	54+

Additional tokens are generated for focus states, content variants, and theme-specific overrides, bringing the total to 65+ tokens.

Theme Comparison

Switch between themes to see how colors adapt:

Related Resources

• Theming Overview - Understanding the theme system
• Theme Customization - Adjust sunshine and moonlight
• WCAG Contrast Guidelines