Kantlinjer

Designsystemet har tokens for kantlinjebredder og forhåndsdefinerte kantlinjestiler som kombinerer bredde, stil og farge.

Kantlinjebredder

Token	CSS-variabel	Verdi	Beskrivelse
border-width.default	--border-width-default	1px	Standard kantlinje
border-width.highlight	--border-width-highlight	2px	Fremhevet kantlinje
border-width.focus	--border-width-focus	4px	Fokusring

Kantlinjestiler

Designsystemet definerer fem sammensatte kantlinjestiler som kombinerer bredde, stil og farge:

Visuelt	Token	Beskrivelse
	border-style.default	Standard solid kantlinje (1px)
	border-style.strong	Sterk solid kantlinje (2px)
	border-style.dashed	Stiplet kantlinje (1px)
	border-style.subtle	Subtil solid kantlinje (1px)
	border-style.focus	Fokuskantlinje (2px)

Bruk i CSS

.card {
  border-width: var(--border-width-default);
  border-style: solid;
  border-color: var(--color-neutral-border-default);
}
 
.focused-element {
  border-width: var(--border-width-focus);
  border-style: solid;
  border-color: var(--color-dominant-border-default);
}

Bruk i TypeScript

import { tokens } from "@kilden/design-tokens";
 
const borderWidth = tokens["border-width"].default;
// → "var(--border-width-default)"