Hintergrund 1.2.0

Setze Hintergrundfarben mit semantischen Theme-Tokens. VelinStyle bietet ausserdem color-mix()-Varianten fuer automatische Aufhellungen und Abdunklungen. English: Background

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

Setze Flaechen mit Hintergrund-Utilities, die an Farb-Tokens gebunden sind.
Nutze Verlaeufe aus gradient.css, wenn eine einfarbige Flaeche nicht ausreicht.

Wann nicht

Erfinde keine einmaligen Hex-Hintergruende in Komponenten — ueberschreibe --velin-color-*.
Vollstaendige Hover-/Dark-Hintergrundvarianten warten auf die Utility Engine.

Theme-Farben

Wende jede Theme-Farbe als Hintergrund an:

.velin-bg-primary

.velin-bg-secondary

.velin-bg-success

.velin-bg-danger

.velin-bg-warning

.velin-bg-info

.velin-bg-light

.velin-bg-dark

<div class="velin-bg-primary velin-text-white velin-p-3">Primary</div>
<div class="velin-bg-secondary velin-text-white velin-p-3">Secondary</div>
<div class="velin-bg-success velin-text-white velin-p-3">Success</div>
<div class="velin-bg-danger velin-text-white velin-p-3">Danger</div>
<div class="velin-bg-warning velin-p-3">Warning</div>
<div class="velin-bg-info velin-p-3">Info</div>
<div class="velin-bg-light velin-p-3">Light</div>
<div class="velin-bg-dark velin-text-white velin-p-3">Dark</div>

Color-Mix-Varianten

Nutze color-mix()-Modifier, um jede Hintergrundfarbe aufzuhellen oder abzudunkeln. Das Muster lautet .velin-bg-{color}-{tint|shade}-{amount}, wobei amount in 10er-Schritten von 10 bis 90 reicht.

<!-- 30% lighter primary -->
<div class="velin-bg-primary-tint-30 velin-p-3">Tint 30</div>

<!-- 50% darker primary -->
<div class="velin-bg-primary-shade-50 velin-text-white velin-p-3">Shade 50</div>

Tint 30

Shade 50

Hintergrund-Deckkraft

Kombiniere mit .velin-bg-opacity-{value}, um Transparenz zu steuern:

<div class="velin-bg-primary velin-bg-opacity-75">75% opacity</div>
<div class="velin-bg-primary velin-bg-opacity-50">50% opacity</div>
<div class="velin-bg-primary velin-bg-opacity-25">25% opacity</div>

75% opacity

50% opacity

25% opacity

Verlaufshintergruende

Ergaenze .velin-bg-gradient neben einer Hintergrundfarbe, um ein dezentes lineares Verlaufs-Overlay anzuwenden.

<div class="velin-bg-primary velin-bg-gradient velin-text-white velin-p-4">
  Gradient background
</div>

Verlaufshintergrund