Om kategorien
Formål
Felles, stram radius-skala for hjørneavrunding: liten for kontroller, middels for kort og overlays, og pilleform for kapsler. --radius-large beholdes som eget navn, men deler nå verdi med --radius-medium for å redusere antallet reelt ulike trinn uten å bryte forbrukere.
Egner seg for
- Konsistent hjørneavrunding på knapper, inputs, kort, fieldset, dialoger og merkelapper.
- Valg mellom små, middels/store og pilleformede radier i samme designspråk.
Egner seg ikke for
- Ikke for avstandsskalaer, kantlinjetykkelse eller andre mål som ikke beskriver hjørneformen.
- Ikke for ad hoc-radier som bare kompenserer for en lokal layoutbug.
Tokens
| Token | Verdi | Beskrivelse |
|---|---|---|
--radius-small | 0.5em | Liten avrunding for knapper, inputs, miniatyrer og rammer tett rundt innhold. Dette er det kompakte standardtrinnet for kontroller som skal føles rolige, men ikke skarpe. |
--radius-medium | 0.75em | Romsligere avrunding for kort, fieldset og andre flater som trenger et tydelig, men fortsatt nøkternt hjørnespråk. |
--radius-large | 0.75em | Kompatibilitetstrinn for dialoger og andre større flater. Deler nå samme verdi som medium for å holde systemet på tre meningsfulle nivåer (small, medium/large, pill) uten å tvinge alle forbrukere over på nye tokennavn. |
--radius-pill | 9999px | Pilleformet avrunding for merkelapper og andre små elementer som skal få et tydelig kapseluttrykk. Bruker en høy fast pikselverdi slik at radiusen alltid overgår halve høyden uansett skriftstørrelse - mer robust enn en em-basert verdi som kan glippe på store elementer. |