Toggle
Buton-icon care ține o stare. Bazat pe mărimea sm a butonului-icon; starea activă e brand. Propunere — de validat pe un ecran real.
Markup canonic · components/toggle.json
sursa = JSON · generat de scripts/build-catalog.py
Stări
| Stare | Fundal | Icon | Contrast |
|---|---|---|---|
| repaus | transparent | --c-fog | 3.84:1 pe bej-1 — icon, prag 3:1 |
| hover | --c-bej-1 | --c-ink | 16.23:1 |
| activ (solo) | --c-accent-tint | --c-accent-deep | 4.58:1 |
| activ (în grup) | --c-white | --c-accent-deep | 6.28:1 |
| dezactivat | transparent | --c-mist | — |
Activul folosește --c-accent-deep, nu --c-accent: pink pe tint dă 3.13:1 și pică. Aceeași decizie ca la tooltip, din același motiv.
Metrici
.toggle 30×30 · --r-md · icon 16px (mărimea .btn.sm) .toggle-group șină --c-bej-1 · padding 2px · gap 2px · --r-lg activ în grup pastilă albă pe șină — același pattern ca .tabs
Solo sau grup
Solo = o stare independentă, on/off (aldin, favorit, notificări). Grup = alegere exclusivă dintr-un set mic (aliniere, densitate, interval). Dacă opțiunile se exclud și sunt peste ~4, e
.select, nu un toggle group.