Tokens

Semantische Farben, Radien, Schatten, Control-Höhen und Bewegung – jeweils aus den Token-Daten von @lukasfend/ui.

Farben

Alle semantischen Tokens mit aufgelöstem Wert und Kontrast gegen bg. Hell und Dunkel stehen nebeneinander; die Kontrastwerte sind WCAG-2-Verhältnisse.

Hell

bg–
–
surface–
–
surface-raised–
–
surface-sunken–
–
border–
–
border-strong–
–
border-hover–
–
fg–
–
fg-muted–
–
fg-subtle–
–
accent–
–
accent-from–
–
accent-to–
–
accent-fg–
–
accent-text–
–
accent-soft–
–
ring–
–
success–
–
success-fg–
–
warning–
–
warning-fg–
–
danger–
–
danger-fg–
–
danger-soft–
–
info–
–
info-fg–
–
inverse–
–
inverse-fg–
–
inverse-muted–
–
inverse-border–
–
tint-orange–
–
tint-orange-fg–
–
tint-blue–
–
tint-blue-fg–
–
tint-green–
–
tint-green-fg–
–
tint-violet–
–
tint-violet-fg–
–
chart-1–
–
chart-2–
–
chart-3–
–
chart-4–
–
chart-5–
–
chart-6–
–
overlay–
–
thumb–
–
track–
–

Schatten

shadow-sm–
shadow-md–
shadow-lg–
shadow-accent–

Dunkel

bg–
–
surface–
–
surface-raised–
–
surface-sunken–
–
border–
–
border-strong–
–
border-hover–
–
fg–
–
fg-muted–
–
fg-subtle–
–
accent–
–
accent-from–
–
accent-to–
–
accent-fg–
–
accent-text–
–
accent-soft–
–
ring–
–
success–
–
success-fg–
–
warning–
–
warning-fg–
–
danger–
–
danger-fg–
–
danger-soft–
–
info–
–
info-fg–
–
inverse–
–
inverse-fg–
–
inverse-muted–
–
inverse-border–
–
tint-orange–
–
tint-orange-fg–
–
tint-blue–
–
tint-blue-fg–
–
tint-green–
–
tint-green-fg–
–
tint-violet–
–
tint-violet-fg–
–
chart-1–
–
chart-2–
–
chart-3–
–
chart-4–
–
chart-5–
–
chart-6–
–
overlay–
–
thumb–
–
track–
–

Schatten

shadow-sm–
shadow-md–
shadow-lg–
shadow-accent–

Radien

rounded-control12px
rounded-card18px
rounded-container22px
rounded-pill9999px

Control-Höhen

Höhen je Dichte. Die rechte Gruppe folgt dem globalen Umschalter, die linke zeigt immer den komfortablen Satz.

Komfortabel

sm32px
md40px
lg48px

Kompakt

sm28px
md34px
lg40px

Bewegung

Dauern, Easings und Federn kommen aus den Primitives. Bei reduzierter Bewegung bleiben nur kurze Farb- und Deckkraftwechsel.

Drücken

Beim Drücken skaliert die Fläche auf --fui-press-scale (0.97, bei reduzierter Bewegung 1).

Feder

Der Griff gleitet mit --fui-ease-press und leichtem Überschwingen.