Jøkul Spacing

Jøkul · Designtokens

Pakke: @fremtind/jokul

Spacing bør dokumenteres som en egen token-gruppe fordi den brukes av både komponenter, layout og mønstre. Da slipper man å gjemme grunnleggende rytmevalg inne i enkeltkomponenter.

Denne pilotsiden viser både hvordan tokenene omtales som referanse, og hvordan de kan kombineres med konkrete kodeeksempler.

Eksemplene viser først bruk med CSS-variabler og deretter samme gruppe brukt via SCSS-importer.

Eksempler

Kode
CSS · css
```
.stack > * + * {
    margin-block-start: var(--jkl-spacing-24);
}

.card {
    padding: var(--jkl-spacing-16);
}
```
Notater
- Bruk samme steg flere steder i samme mønster for å skape rytme.
- La spacing-tokenene definere avstand, ikke tilfeldige px-verdier per komponent.

Kode

SCSS · scss

@use "@fremtind/jokul/styles/core/jkl";

.field-group {
    gap: jkl.$spacing-16;
    padding-block: jkl.$spacing-24;
}

Hvordan gruppen bør brukes

Spacing-tokenene bør velges som et begrenset sett steg som går igjen på tvers av skjemaer, kort og sideoppsett.

Velg mindre steg for tett relaterte elementer og større steg når en ny gruppe eller et nytt tema starter.

Bruk samme spacing rundt like typer innhold.
Unngå å blande tilfeldige custom-verdier med tokenene uten en tydelig grunn.
Dokumenter når et mønster forventer tett, normal eller romslig rytme.

Vanlige spacing-tokens

Token	Verdi	Typisk bruk
--jkl-spacing-8	0.5rem	Tett luft mellom små, nært beslektede elementer.
--jkl-spacing-16	1rem	Standard innvendig padding eller avstand mellom felt og etikett.
--jkl-spacing-24	1.5rem	Fast vertikal rytme mellom grupper i et skjema eller en kortflate.
--jkl-spacing-40	2.5rem	Større skille mellom tydelige seksjoner på en side.

Relatert

Button : Se hvordan samme spacing-gruppe støtter handlinger og skjemaoppsett rundt knapper.
Installer Jøkul : Core-stilene fra monopakka må være på plass før CSS-variablene er tilgjengelige i prosjektet.