Utility-API 1.2.0

Die ausgelieferten Utilities folgen einer konsistenten Namensgrammatik, mappen auf Design Tokens und liegen in @layer utilities. Ein vollstaendiger Utility-Engine-Generator bleibt geplant. English: Utility API

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Studio und die vollstaendige Utility Engine bleiben geplant — ausgelieferte Utilities werden manuell unter @layer utilities, kein vollstaendiger Variantengenerator.

Wann verwenden

Baue Layouts mit den dokumentierten velin-* classes (display, spacing, flex, grid, …).
Ueberschreibe Look-and-feel ueber CSS-Variablen from src/tokens/, not one-off hex in components.
Nutze generiertes Utility-Markdown fuer vollstaendige Klassenlisten.

Wann nicht

Erfinde keine Tailwind-artigen hover: / dark: prefixes — not in the shipping API.
Gehe nicht davon aus, dass jedes Token eine Utility hat oder jede Breakpoint-x-Property-Kombination existiert - die Abdeckung bleibt kuratiert, bis die Utility Engine landet.

Namenskonvention

Kanonische Grammatik (ADR 0004):

.velin-{property}-{value}
.velin-{bp}-{property}-{value}

Breakpoint-Segmente stehen vor der Property: .velin-md-flex, not .velin-flex-md.

<div class="velin-flex">…</div>
<div class="velin-md-flex">…</div>
<div class="velin-p-4 velin-lg-p-8">…</div>

Breakpoints

Tokens in src/layout/breakpoints.css. Responsive Utilities werden derzeit bis xl; 2xl ist nur Grammatik + Token (ADR 0016).

Infix	Min-width	CSS variable
none (base)	0	—
`sm`	`36rem` (576px)	`--velin-bp-sm`
`md`	`48rem` (768px)	`--velin-bp-md`
`lg`	`62rem` (992px)	`--velin-bp-lg`
`xl`	`80rem` (1280px)	`--velin-bp-xl`
`2xl`	`96rem` (1536px)	`--velin-bp-2xl`

Anpassung

Ueberschreibe echte Tokens - Beispiele aus src/tokens/:

:root {
  --velin-color-primary: oklch(38% 0.18 250);
  --velin-space-4: 1rem;
  --velin-radius-md: 0.5rem;
}

.my-section {
  --velin-color-primary: oklch(45% 0.16 20);
}

Framework-Utility-Module

Erlaeuternde Seiten decken gaengige Muster ab; automatisch generierte Listen werden aus dem Quellcode synchronisiert mit velinstyle docs generate --scope utilities.

Module	Generierte Referenz	Zugehoerige Docs
`display.css` + `responsive.css`	responsive.md	Display
`spacing.css`	spacing.md	Spacing
`state.css`	state.md	Interaktionen
`gradient.css`	gradient.md	Hintergrund
`scroll-animation.css`	scroll-animation.md	Scroll-driven
`view-transition.css`	view-transition.md	View transitions

Vollstaendiger Index: utilities/README.md · Generierter Hub.

CSS-Layer

@layer tokens — design tokens
@layer velin.base / base — reboot and typography
@layer velin.components — components
@layer utilities / velin.utilities — utilities (win without !important)

Important-Flag

Utilities verwenden standardmaessig kein !important . Bevorzuge Layer fuer Overrides. Ein vollstaendiges Important-/Varianten-Budget gehoert zur geplanten Utility Engine (ADR 0008).