Farben 1.2.0

Wende semantische Textfarben, Body-Farben und Deckkraft-Utilities an, ohne eigene Hex-Werte in Komponenten zu verteilen. English: Colors

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

Color text and backgrounds with semantic utility classes mapped to --velin-color-*.
Nutze on-*-/muted-Varianten fuer sekundaeren Text.

Wann nicht

Erfinde keine Palette-Step-Utilities, die nicht in den generierten Docs gelistet sind.

Theme-Farben

.velin-text-primary

.velin-text-secondary

.velin-text-success

.velin-text-danger

.velin-text-warning

.velin-text-info

.velin-text-muted

.velin-text-white

<p class="velin-text-primary">Primary text</p>
<p class="velin-text-secondary">Secondary text</p>
<p class="velin-text-success">Success text</p>
<p class="velin-text-danger">Danger text</p>
<p class="velin-text-warning">Warning text</p>
<p class="velin-text-info">Info text</p>
<p class="velin-text-muted">Muted text</p>
<p class="velin-text-white">White text</p>

Body & Hervorhebung

Contextual text colors for body copy and emphasis:

<p class="velin-text-body">Default body color</p>
<p class="velin-text-body-emphasis">Higher contrast emphasis</p>
<p class="velin-text-body-secondary">Subdued body text</p>
<p class="velin-text-body-tertiary">Tertiary body text</p>

Default body color

Higher contrast emphasis

Subdued body text

Tertiary body text

Text-Deckkraft

Pair with .velin-text-opacity-{value} to reduce text opacity:

<p class="velin-text-primary velin-text-opacity-75">75%</p>
<p class="velin-text-primary velin-text-opacity-50">50%</p>
<p class="velin-text-primary velin-text-opacity-25">25%</p>

75%

50%

25%