1. Docs
2. Erste Schritte
3. Schatten

Schatten 1.2.0

Box-Shadow-Utilities verweisen auf --velin-shadow-*. Dunkle Oberflächen nutzen stärkere Schatten über die Systemeinstellung oder data-velin-theme="dark" (ADR 0011). English: Shadows

Wann verwenden

• Raise cards, menus, and floating surfaces with .velin-shadow-sm → .velin-shadow-lg.
• Setze geerbte Erhebung mit .velin-shadow-none zurück.
• Use ring utilities (.velin-ring-* in position.css) for decorative focus-like outlines — not a substitute for :focus-visible focus rings.

Wann nicht

• Erfinde keine Hex-Schatten; überschreibe stattdessen --velin-shadow-*-Tokens.
• Erwarte keine responsiven .velin-md-shadow-*-Varianten, bis die Utility Engine sie ausliefert.

Schatten-Tokens

Box-Shadow

<div class="velin-shadow-none">Kein Schatten</div>
<div class="velin-shadow-sm">Klein</div>
<div class="velin-shadow">Standard (md)</div>
<div class="velin-shadow-lg">Groß</div>
<div class="velin-shadow-inner">Innen</div>

Dark Mode

src/tokens/shadow.css verstärkt Schatten unter @media (prefers-color-scheme: dark) wenn Light nicht erzwungen ist, sowie unter [data-velin-theme="dark"] — derselbe Vertrag wie bei Farb-Tokens.

Ring-Utilities

Ringe nutzen box-shadow-Umrisse, die mit semantischen Farb-Tokens eingefürbt sind:

<div class="velin-ring-1">1px Primary-Ring</div>
<div class="velin-ring-2 velin-ring-success">2px Success</div>
<div class="velin-ring-4 velin-ring-danger">4px Danger</div>