Color 1.2.2

Semantic OKLCH color tokens with AAA-oriented defaults. Opt down with data-velin-contrast="aa" on <html> when you need the lighter AA palette. Deutsche Version.

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Bind UI to roles: primary, surfaces, text, border, success/warning/danger/info, focus.
Pair fills with --velin-color-on-* text tokens for contrast.

When not

Do not invent --velin-primary without the color- segment in new docs or apps.
Do not claim product AAA certification solely because the framework ships AAA-oriented defaults.

Contrast — npm run test:contrast · Generated tokens · Accessibility

Why OKLCH?

L — lightness
C — chroma
H — hue angle

Semantic colors

:root {
  --velin-color-primary: oklch(38% 0.18 250);
  --velin-color-primary-hover: oklch(32% 0.18 250);
  --velin-color-primary-subtle: oklch(92% 0.04 250);
  --velin-color-on-primary: oklch(100% 0 0);
  --velin-color-secondary: oklch(55% 0.12 320);
  --velin-color-surface: oklch(98% 0.005 250);
  --velin-color-text: oklch(8% 0.01 250);
  --velin-color-success: oklch(55% 0.16 145);
  --velin-color-warning: oklch(75% 0.15 85);
  --velin-color-danger: oklch(55% 0.2 25);
  --velin-color-info: oklch(60% 0.12 240);
}

Custom colors

Override semantic tokens (or load a theme from Color Modes):

:root {
  --velin-color-primary: oklch(40% 0.14 250);
  --velin-color-on-primary: oklch(100% 0 0);
}