Avrunding

Designsystemet definerer seks nivåer av avrunding (border-radius) som brukes konsistent på tvers av alle komponenter.

Tokens

Token	CSS-variabel	Verdi	Beskrivelse
radius.none	--radius-none	0px	Ingen avrunding
radius.sm	--radius-sm	2px	Liten avrunding
radius.md	--radius-md	4px	Medium avrunding
radius.lg	--radius-lg	8px	Stor avrunding
radius.xl	--radius-xl	12px	Ekstra stor avrunding
radius.full	--radius-full	9999px	Helt rund (sirkel/pille)

Når bruker jeg hva?

sm – små elementer som badges inni tekst og avkrysningsbokser
md – standard for skjemafelt, knapper og menyer
lg – kort, dialoger og større flater
xl – store, frittstående flater som hero-seksjoner
full – piller, avatarer og runde ikonknapper

Bruk med Tailwind

Tailwinds rounded-*-klasser bruker de samme variablene, så de følger tokenene automatisk:

<div className="rounded-md">…</div>   {/* var(--radius-md) */}
<div className="rounded-lg">…</div>   {/* var(--radius-lg) */}
<div className="rounded-full">…</div> {/* helt rund */}

Bruk i CSS

.card {
  border-radius: var(--radius-lg);
}
 
.badge {
  border-radius: var(--radius-full);
}
 
.button {
  border-radius: var(--radius-md);
}

Bruk i TypeScript

import { tokens } from "@kilden/design-tokens";
 
const radius = tokens.radius.lg;
// → "var(--radius-lg)"