Avstander
Erstatter manuelle pikselverdier og sikrer konsistent avstand mellom elementer.
Oppdatert
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-unit-0 | 0 | 0 | 0 |
--jkl-unit-02 | 1px | 2px | 3px |
--jkl-unit-05 | 2.5px | 4px | 5.5px |
--jkl-unit-10 | 5px | 8px | 11px |
--jkl-unit-15 | 7.5px | 12px | 16.5px |
--jkl-unit-20 | 10px | 16px | 22px |
--jkl-unit-25 | 12.5px | 20px | 27.5px |
--jkl-unit-30 | 15px | 24px | 33px |
--jkl-unit-35 | 17.5px | 28px | 38.5px |
--jkl-unit-40 | 20px | 32px | 44px |
--jkl-unit-50 | 25px | 40px | 55px |
--jkl-unit-60 | 30px | 48px | 66px |
--jkl-unit-70 | 35px | 54px | 77px |
--jkl-unit-80 | 40px | 64px | 88px |
--jkl-unit-90 | 45px | 72px | 99px |
--jkl-unit-100 | 50px | 80px | 110px |
--jkl-unit-130 | 65px | 104px | 143px |
--jkl-unit-210 | 105px | 168px | 231px |