CSS-Variablen 1.2.0

Design tokens ship as CSS custom properties under @layer tokens. Override them after loading VelinStyle — no Sass rebuild required. English version.

Reifegrad: In VelinStyle 1.2.0 als stabil dokumentiert. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

Wann verwenden

Rebrand by overriding --velin-color-*, --velin-space-*, type, radius, shadow, and motion tokens.
Scope overrides to a section selector when only part of the page should change.

Wann nicht

Do not invent aliases like --velin-primary or --velin-spacer-* in new code — use --velin-color-primary and --velin-space-*.
Do not expect the Utility Engine to emit every token as a class yet.

Farbe

:root {
  --velin-color-primary: oklch(38% 0.18 250);
  --velin-color-on-primary: oklch(100% 0 0);
  --velin-color-surface: oklch(98% 0.005 250);
  --velin-color-text: oklch(8% 0.01 250);
  --velin-color-text-muted: oklch(28% 0.01 250);
  --velin-color-border: oklch(35% 0.01 250);
  --velin-color-success: oklch(55% 0.16 145);
  --velin-color-danger: oklch(55% 0.2 25);
  --velin-color-focus: oklch(35% 0.22 250);
}

Source: src/tokens/color.css · generated color docs.

Abst?nde

--velin-space-0 … --velin-space-32  /* see src/tokens/spacing.css */

Typografie

--velin-font-display / --velin-font-text / --velin-font-code
--velin-font-sans / --velin-font-serif / --velin-font-mono
--velin-text-xs … --velin-text-5xl
--velin-weight-* · --velin-leading-* · --velin-tracking-*

Sources: fonts.css, typography.css.

Radius, Schatten, Z-Index, Motion

--velin-radius-none … --velin-radius-pill
--velin-shadow-none … --velin-shadow-2xl, --velin-shadow-inner
--velin-z-hide … --velin-z-max (e.g. --velin-z-modal, --velin-z-toast)
--velin-duration-*, --velin-ease-*, --velin-transition-*

Variablen verwenden

.panel {
  background: var(--velin-color-surface);
  color: var(--velin-color-text);
  border: 1px solid var(--velin-color-border);
  border-radius: var(--velin-radius-md);
  box-shadow: var(--velin-shadow-md);
  padding: var(--velin-space-4);
  transition: box-shadow var(--velin-duration-normal) var(--velin-ease-default);
}