Color Pipeline

Each preset declares six color categories, each as a { light, dark } hex pair. The two brand colors — primary and secondary — pass through a generation pipeline to produce 11-level shade scales. The remaining four (text, border, warning, danger) are used as single values plus a handful of derived color-mix tokens.

Summary

For brand colors, the pipeline converts a hex color to HSL, then interpolates lightness and adjusts saturation to produce 11 shades (50 through 950). Each shade is converted back to hex and written as a CSS custom property.

The base color sits at the 600 level. The pipeline runs twice per brand color — once for light and once for dark — producing a full light-mode scale on :root and a full dark-mode override under :root[data-theme="dark"].

How It Works

Step 1: Hex to HSL

The input hex color (e.g., #ea580c) is parsed into RGB channels, then converted to HSL (hue, saturation, lightness) using standard color math.

#ea580c → RGB(234, 88, 12) → HSL(20.5°, 90.2%, 48.2%)

Step 2: Generate Shade Scale

Each shade level has a predefined lightness position and saturation factor:

Lightness calculation:

• Positive position: targetLightness = baseLightness + (position × (100 − baseLightness))
• Negative position: targetLightness = baseLightness × (1 + position)

Saturation calculation:

• adjustedSaturation = baseSaturation × saturationFactor

Step 3: HSL to Hex

Each computed HSL value is converted back to RGB, then to a hex string. The result is a set of 11 hex colors that form a perceptually smooth gradient from near-white to near-black.

Output

For the Foundry primary color #ea580c:

The same shade-scale pipeline runs for secondary, which is emitted under the --nova-color-accent-* namespace for backward compatibility with existing preset CSS.

Non-Brand Color Tokens

The remaining four color categories (text, border, warning, danger) write a single base token per category plus a small set of derived tokens computed at the CSS layer via color-mix:

In total, a single resolved preset emits 22 brand shade tokens (11 primary + 11 secondary/accent) plus 13 non-brand color tokens under :root, for 35 color custom properties.

Using Color Tokens

Reference the generated tokens in your CSS:

.my-element {
  color: var(--nova-color-text);
  background-color: var(--nova-color-primary-50);
  border-color: var(--nova-color-accent-200);
}

Lighter primary/secondary shades (50–400) work well for backgrounds and borders. The base shade (600) is the brand color.

Darker primary/secondary shades (700–950) work well for emphasis and on-color foregrounds. Use --nova-color-text (rather than a dark primary shade) for body copy so the color tracks the active color mode automatically.