Dokumentasjon

Versjon 8

15. januar 2026

Fremhevet

🎉 Ny major-versjon - Darkside er nå standard

Aksel v8.0.0 markerer overgangen til "The Darkside", vårt nye theming-system. Oppdateringen kommer med innebygd støtte for lys og mørk modus, lettere theming/farging av komponenter og en liste med andre forbedringer.

Vi har laget en egen migreringsguide for ta deg gjennom oppdateringen.

Dokumentasjon for forrige versjon finnes på aksel-v7.nav.no.

Hva er nytt?

Dark mode: Alle komponenter har fått støtte for dark mode.
Designtokens: En komplett omskriving av våre designtokens for å støtte theming og dark mode.
Oppdatert CSS: Bruker nye tokens og fått CSS-layers bygget inn. Bundle-size er redusert med ~40 kB.
Oppdatert Tailwind CSS-konfigurasjon: Bruker nye tokens, støtter theming og kommer med innebygd ax-prefiks for enklere separasjon mellom Aksel og din egen konfigurasjon.
Ny Theme-komponent for å håndtere temabytte.
Oppdatert dokumentasjon og ny token-oversikt.

Figma

I Figma er den nye versjonen satt opp som 2 filer. "Aksel Tokens" inneholder alle styling-variabler og "Aksel Components" inneholder alle komponentene. For nye filer skal disse bibliotekene bli lagt til automagisk. For eldre filer må du inn og bytte manuelt. Du skal fjerne det gamle biblioteket (Aksel UI kit) og legge til de nye.

Figma variables

Med oppdateringen bruker "Aksel Tokens" Figmas nye variabler. Det er sentralt distribuerte styling-variabler. Tidligere kunne vi kun distribuere farger sentralt gjennom stiler. Nå kan vi distribuere verdier for padding, gap og radius + målrettede farger for fill, border og text.

@navikt/ds-tokens

Alle fargetokens er endret til å støtte nytt theming- og fargesystem. Tokens er nå prefikset med --ax.

Bedre scopet imports uten /dist/

@navikt/ds-tokens/css - CSS custom properties
@navikt/ds-tokens/js - JavaScript/TypeScript tokens
@navikt/ds-tokens/scss - SCSS-variabler
@navikt/ds-tokens/less - LESS-variabler

Fjernet /darkside imports.

Kjør npx @navikt/aksel@latest codemod v8-tokens for interaktiv token-migrering.

@navikt/ds-css

All CSS er oppdatert og skrevet om for å støtte ny theming og farging av komponenter. Dette har redusert CSS-bundle med ~20%.

CSS-layers er også innebygd (med fallback) for å håndtere CSS-cascade bedre. Dette gjør at CSS-en fra Aksel alltid vil ha spesifisitet 0.

Alle klassenavn fra Aksel starter nå med .aksel, ikke .navds
Vi bruker nå outline til fokusmarkering for bedre støtte i høykontrast-modus.
CSS-strukturen til de fleste komponentene er oppdatert. Hvis du overskriver klassenavn fra Aksel kan dette være en god mulighet til å rydde opp litt eller melde feil/mangler til oss.
Kun index.css og index.min.css er nå tilgjengelig via CDN.
/darkside-import er fjernet.

@navikt/ds-react

De fleste komponenter bruker nå data-color for å endre farge, som erstatning for egne variant-verdier.
Theme-komponenten er ikke lenger nødvendig for å støtte theming. Trenger bare bytte mellom light- og dark-klasser.

Komponenter med avviklede props

Dette er endringer som vil kunne skape “breaking changes” i koden din og må gås gjennom.

Accordion: headingSize
List: title, description og headingTag
Modal: navds-modal__document-body css-klasse fjernet
Popover: arrow
Page: background
Box: Gamle background, borderColor og shadow-verdier

Komponenter med props som blir avviklet i fremtiden

Dette er endringer som ikke vil brekke noe nå, men vil bli oppdatert i fremtidige versjoner.

Accordion: variant
Chips: variant
Chat: variant
CopyButton: variant
Tag: Legacy-varianter
Link: variant
BoxNew-komponent

Button

Varianter er nå primary, secondary og tertiary

Neutral-variant er data-color="neutral"
Danger-variant er data-color="danger"

Tag

Varianter er nå outline, moderate og strong.

data-color brukes for å endre farge i Tag.

Link

variant="subtle" tilsvarer nå neutral.

Checkbox og Radio

Strukturen for label og description er oppdatert.

@navikt/ds-tailwind

Alle tailwind-klasser fra Aksel sin config har nå ax-prefix. Dette gjør det lettere å identifisere hva som er standard “tailwindcss” og hva som er “Aksel”.

md:bg-surface-info
ax-md:bg-ax-bg-info-moderate

Siden configen er en refleksjon av token-pakken, vil de fleste tokens også være oppdatert. @navikt/ds-tailwind/darkside-tw3-import er dessuten fjernet.

Vi bruker også tokens direkte i tailwind-config, slik at theming fungerer ut av boksen med tailwind.

@navikt/aksel-stylelint

Lagt til regel "aksel/no-legacy-classes"
Fjernet regel "aksel/design-token-no-component-reference" siden vi ikke har noen komponenttokens lenger.
Justert eksisterende regler i henhold til nye tokens/prefikser.

@navikt/aksel (CLI)

Migreringen til versjon 8 kan oppleves som stor da alle tokens må oppdateres, men vi har laget flere “codemods” som hjelper deg gjennom denne prosessen.

BASH

npx @navikt/aksel@latest codemod <codemod>

v8: Interaktiv migrering av hele versjon 8.
v8-tokens: Interaktiv migrering til nye tokens.
v8-box: Migrerer background, borderColor og shadow til nye tokens der mulig. Endrer også navn og import for alle instanser av Box.New og BoxNew til Box.
v8-box-new: Oppdaterer navn og import for alle instanser av Box.New og BoxNew til Box.
v8-prop-deprecate: Fjerner avviklede props fra Accordion, Popover og Page.
v8-list: Prøver å migrere List ved å wrappe med Box og "flytte" props title og description til hhv. Heading og BodyShort.
v8-primitive-spacing: Oppdaterer alle 'Primitives' til nye spacing-tokens.
v8-token-spacing: Oppdaterer all bruk av spacing-tokens i CSS, SCSS og LESS.
v8-token-spacing-js: Oppdaterer all bruk av spacing-tokens i JS.
v8-tag-variant: Oppdaterer variant + data-color.
v8-toggle-group-variant: Oppdaterer variant + data-color.
v8-accordion-variant: Oppdaterer variant + data-color.
v8-chips-variant: Oppdaterer variant + data-color.
v8-button-variant: Oppdaterer variant + data-color.
v8-link-variant: Oppdaterer variant + data-color.