1. Docs
2. CSS Utilities
3. Utilities
4. Shadows

Shadows 1.2.2

Box-shadow utilities map to --velin-shadow-*. Dark surfaces use stronger shadows via system preference or data-velin-theme="dark" (ADR 0011). Deutsch: Schatten

When to use

• Raise cards, menus, and floating surfaces with .velin-shadow-sm → .velin-shadow-lg.
• Reset inherited elevation with .velin-shadow-none.
• Use ring utilities (.velin-ring-* in position.css) for decorative focus-like outlines — not a substitute for :focus-visible focus rings.

When not

• Do not invent hex shadows; override --velin-shadow-* tokens instead.
• Do not expect responsive .velin-md-shadow-* variants until the Utility Engine ships them.

Shadow tokens

Box shadow

<div class="velin-shadow-none">No shadow</div>
<div class="velin-shadow-sm">Small</div>
<div class="velin-shadow">Default (md)</div>
<div class="velin-shadow-lg">Large</div>
<div class="velin-shadow-inner">Inset</div>

Dark mode

src/tokens/shadow.css deepens shadows under @media (prefers-color-scheme: dark) when not forced light, and under [data-velin-theme="dark"] — same contract as color tokens.

Ring utilities

Rings use box-shadow outlines colored with semantic color tokens:

<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>