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)

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

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