@reopt-ai/opt-palette

OKLCH-based palette generation for the reopt design system. The package turns a seed color and harmony rule into light/dark design tokens with WCAG-aware contrast repair.

Skill support

There is no dedicated opt-palette-install skill. When adopting opt-shell, use the opt-shell-install skill; it treats opt-palette as a required peer and verifies the theme foundation. Install opt-palette manually for standalone palette generation.

Install

bun add @reopt-ai/opt-palette

The runtime has no DOM dependency and can run in Node, SSR, and browser contexts.

Example

import { generatePalette } from "@reopt-ai/opt-palette";

const palette = generatePalette({
  seed: "#2563eb",
  harmony: "analogous",
});

console.log(palette.tokens["--opt-primary"]);

Modules

• color-spaces: OKLCH, RGB, and HSL conversion helpers
• harmony: supported color harmony rules
• palette-generator: token generation from a seed color
• dark-mode: dark-mode L-axis inversion
• accessibility: WCAG contrast repair
• token-access: type-safe --opt-* token references (cssToken, isOptTokenName, readOptToken, ALL_TOKEN_NAMES)

Development

bun run --filter @reopt-ai/opt-palette typecheck
bun run --filter @reopt-ai/opt-palette test
bun run --filter @reopt-ai/opt-palette build

Control state colors

Generated palettes include --opt-danger-solid-fg, audited against the solid --opt-danger fill at 4.5:1, separately from the existing subtle status pair. --opt-control-disabled-bg and --opt-control-disabled-fg are theme-aware CSS aliases for muted background and secondary text. Disabled controls are not included in the active text contrast audit. Custom overrides of a solid fill must also provide a suitable solid foreground.