Spacing & radii
Markup canonic · components/foundation-spacing.json
sursa = JSON · generat de scripts/build-catalog.py
Spacing
Spacing scale — denumire = valoare px
Aceeași logică ca la tipografie: numele tokenului include valoarea în pixeli. sp16 = 16px. Fără tabel de tradus în cap.
--sp-44px
--sp-88px
--sp-1212px
--sp-1616px
--sp-2424px
--sp-2828px
--sp-4040px
--sp-5656px
--sp-9292px
Border radius — scară 6 / 10 / 14 / 20 / 24
Scară progresivă pentru ierarhie clară: xs badges/dots, sm chips/btn mici, md btn standard/elemente compacte, lg inputs/CTA principal, xl carduri uzuale.
--r-xs · 6
--r-sm · 10
--r-md · 14
--r-lg · 20
--r-xl · 24
Radii — folosire canonică
| Token | Px | Folosire |
|---|---|---|
--r-xs | 6 | Chips foarte mici, dots, t-badge, kbd hint, inline code, nav footer |
--r-sm | 10 | Inputs mici, flow steps, sidebar nav items, ds-nav links |
--r-md | 14 | Cards sub-elemente: KPI, demo containers, alerts |
--r-lg | 20 | Inputs default, modal input, hero card |
--r-xl | 24 | Canonical card radius — .card, KPI hero, modal mare, CTA submit |
--r-pill | 9999 | Butoane, badges, tabs, nav items, avatars |
Shadows — 3 tokens, atât
| Token | Folosire |
|---|---|
--sh-sm | Micro shadow pe lifted surfaces (KPI). Subtil. |
--sh-md | Hover lift pe CTA-uri pe surface dark (ex. butonul „Plătește acum" pe card TVA-due). |
--sh-pink | Pe primary CTA hover (gradient pink). Accent moment unic per ecran. |
Card accent dark — folosire restricționată
Surface dark (--c-dark-grad) e accent, nu default. Atrage tot focusul pe ecran — folosește-l doar pentru:
- Informație super time-sensitive — scadențe critice (TVA care expiră azi/mâine), deadline-uri irecuperabile, plăți care blochează operațiunea.
- Informație super importantă — alerte top-priority, sume mari în pericol, decizii care nu pot fi amânate.
Componente care respectă regula: .kpi.dark (pentru scadențe critice), .da-act.tva-due (TVA card). Niciodată mai mult de 1 surface dark pe ecran în Dublin. (Butonul negru .btn.danger e distructiv — nu-l număra ca surface dark decorativ.)
DON'T — spacing / radii / shadows
- Niciodată colțuri drepte pe controale interactive (buttons, inputs, badges, tabs).
- Fără shadow pe carduri default. Doar
--sh-smpe KPI lifted,--sh-mdpe CTA dark hover,--sh-pinkpe primary CTA hover. - Fără glassmorphism / backdrop-blur. Excepție unică: scrimul canonic
var(--c-backdrop)+backdrop-filter: blur(var(--scrim-blur))(ink @ 25% + 6px) din spatele oricărui overlay de tip modal —.modal-backdrop,.doc-sheet-backdrop,.flow-sheet-scrim. Niciun alt blur ad-hoc. - Niciodată hex hardcoded pentru radii — toate vin din
var(--r-*). Off-scale (8px, 4px, 999px) e violare. - Niciun radius nou în afara scalei 6/10/14/20/24/pill — dacă ai nevoie de altceva, înseamnă că componentul nu se încadrează în system.