Avstander
Tokens for spacing gir en forutsigbar og harmonisk rytme i layouten. De erstatter manuelle pikselverdier og sikrer konsistent avstand mellom elementer.
Prinsipper
- Øker eller minsker i et fast forhold
- Skaper god rytme på tvers av løsninger
- Gjør det enklere for designere og utviklere å ta gode valg
Statiske tokens
Statiske tokens brukes når du alltid vil ha en fast bredde mellom innhold.
Navn på token | Pixelverdi | Rem-verdi |
|---|---|---|
--jkl-spacing-0 | 0 | 0 |
--jkl-spacing-4 | 4px | 0.25rem |
--jkl-spacing-8 | 8px | 0.5rem |
--jkl-spacing-12 | 12px | 0.75rem |
--jkl-spacing-16 | 16px | 1rem |
--jkl-spacing-20 | 20px | 1.25rem |
--jkl-spacing-24 | 24px | 1.5rem |
--jkl-spacing-28 | 28px | 1.75rem |
--jkl-spacing-32 | 32px | 2rem |
--jkl-spacing-40 | 40px | 2.5rem |
--jkl-spacing-48 | 48px | 2.75rem |
--jkl-spacing-56 | 56px | 3rem |
--jkl-spacing-64 | 64px | 4rem |
--jkl-spacing-72 | 72px | 4.5rem |
--jkl-spacing-80 | 80px | 5rem |
--jkl-spacing-104 | 104px | 6.5rem |
--jkl-spacing-168 | 168px | 10,5rem |
Dynamiske tokens
Dynamiske tokens endrer seg avhengig av modus.
Disse vil kalkuleres til å bli basert på rem for brukerne. For enkelhets skyld viser vi allikevel verdiene i pixler.
Navn | Small | Medium | Large |
|---|---|---|---|
--jkl-spacing-none | 0 | 0 | 0 |
--jkl-spacing-xxs | 2.5px | 4px | 5.5px |
--jkl-spacing-xs | 5px | 8px | 11px |
--jkl-spacing-s | 10px | 16px | 22px |
--jkl-spacing-m | 15px | 24px | 33px |
--jkl-spacing-l | 25px | 40px | 55px |
--jkl-spacing-xl | 40px | 64px | 88px |
--jkl-spacing-2xl | 65px | 104px | 143px |