Radius
Each layer that wraps other elements is one step larger: inner 8 px (options, rows, menu items, small inset buttons) · control 12 px (buttons, fields, selects) · panel 16 px (floating panels, tables, boxes) · card 20 px (page cards, demo stages). Class: rounded-<name>.Jede Ebene, die andere Elemente umschließt, ist eine Stufe größer: innen 8 px (Optionen, Zeilen, Menüeinträge, kleine Icon-Buttons im Rahmen) · Steuerelement 12 px (Buttons, Felder, Selects) · Panel 16 px (schwebende Panels, Tabellen, Boxen) · Karte 20 px (Seitenkarten, Demo-Bühnen). Klasse: rounded-<Name>.
| VariableVariable | ClassKlasse | ValueWert | |
|---|---|---|---|
| --radius-xs | xs | 2px | |
| --radius-sm | sm | 4px | |
| --radius-checkbox | checkbox | 6px | |
| --radius-inner | inner | 8px | |
| --radius-control | control | 12px | |
| --radius-panel | panel | 16px | |
| --radius-card | card | 20px | |
| --radius-full | full | 9999px |