Theme Packs (`themes/theme-packs.css`)

This file provides compact, production-ready brand theme definitions that can be easily included in projects. It contains the same three brand themes as `exampl

Switch coordinated theme packs

Theme packs replace brand inputs while preserving every semantic component role.

<link rel="stylesheet" href="/themes/theme-packs.css" />

<html data-theme="ocean">...</html>
<html data-theme="sunrise">...</html>
<html data-theme="forest">...</html>

More examples

Each example introduces a different part of the shipped API.

One pack should cover ordinary and feedback UI

A viable pack coordinates neutral surfaces and semantic states, not only the primary accent.

NeutralInfoError

<div data-theme="forest">
  <button class="btn-primary">Primary</button>
  <badge variant="subtle">Neutral</badge>
  <badge status="info">Info</badge>
  <badge status="error">Error</badge>
</div>

This file provides compact, production-ready brand theme definitions that can be easily included in projects. It contains the same three brand themes as example-brand.css but in a minified format.

Overview

The file defines the same brand themes (Ocean, Sunrise, Forest) as the example file, but optimized for production use with:

Compact CSS without comments
Same color variables and logic
Dark mode support
Minimal file size

Available Themes

Ocean Theme

Data Attribute: data-theme="ocean"

:root[data-theme="ocean"] {
  --accent-h: 200; --accent-c: 0.16; --accent-l: 60%;
  --secondary-hue-shift: 40; --tertiary-hue-shift: -80;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"])[data-theme="ocean"] { --accent-c: 0.20; --accent-l: 70%; }
}

Sunrise Theme

Data Attribute: data-theme="sunrise"

:root[data-theme="sunrise"] {
  --accent-h: 30; --accent-c: 0.18; --accent-l: 62%;
  --secondary-hue-shift: 60; --tertiary-hue-shift: -90;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"])[data-theme="sunrise"] { --accent-c: 0.22; --accent-l: 72%; }
}

Forest Theme

Data Attribute: data-theme="forest"

:root[data-theme="forest"] {
  --accent-h: 145; --accent-c: 0.16; --accent-l: 58%;
  --secondary-hue-shift: 50; --tertiary-hue-shift: -100;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"])[data-theme="forest"] { --accent-c: 0.18; --accent-l: 68%; }
}

Usage

Apply themes the same way as the example file:

<html data-theme="ocean">
  <!-- Application with Ocean theme -->
</html>

Differences from example-brand.css

Compact Format: Single-line declarations for smaller file size
No Comments: Production-optimized without explanatory comments
Same Functionality: Identical color values and behavior

When to Use

Production: Use theme-packs.css for live applications
Development: Use example-brand.css for learning and customization
Both: Include both files and choose based on environment

Browser Support

Same as example-brand.css:

Data attributes in all browsers
CSS custom properties in modern browsers
prefers-color-scheme with graceful fallback

Integration Notes

Import after core/palette.css
Can be combined with component themes in core/theme.css
Use for quick theme switching in applications

themes/example-brand.css: Commented version with detailed explanations
core/palette.css: Color generation system
core/theme.css: Component-specific theming