Hopp til innhold
Aksel

Grunnleggende

Endringslogg

År
Kategori
Januar 2026

  • Dokumentasjon. 15. januar 2026

    Fremhevet

    Versjon 8

    🎉 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”.

    Tw
    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.

  • Kode. 14. januar 2026

    Versjon 7.39.1

    @navikt/ds-react

    • Dialog: Removed 'aria-expanded' from Dialog.Trigger. (#4478)

    @navikt/ds-css

    • Modal, Dialog: Handle scroll for extreme zoom-levels better. (#4488)

  • Kode. 8. januar 2026

    Versjon 7.38.0

    @navikt/ds-react

    • Dialog: Now interacts better with Modal and Datepicker. (#4455)
    • ActionMenu: Trigger handles click while inside web-component better. (#4428)
    • Internal: Updated mergedRef-utility. (#4434)

    @navikt/ds-css

    • Dialog: Fixed z-index issue with backdrop. (#4455)
    • Dialog: Now has border in light-mode. (#4452)

    @navikt/aksel

    • CLI: Now has interactive codemod-selection for all major-versions. (#4427)
    • CLI: Updated codemod 'v8-primitive-spacing' to migrate HGrid-component. (d631eef)

  • Dokumentasjon. 5. januar 2026

    Dialog er lansert!

    Fra versjon 7.37.0 er den nye Dialog-komponenten tilgjengelig 🎉

    Dokumentasjon

    Hva er Dialog?

    Dialog er et midlertidig vindu som åpnes på siden. Dialogen fanger brukerens oppmerksomhet og fokus, samtidig som konteksten til nettsiden beholdes. Den er nyttig når brukeren må ta stilling til informasjon eller fokusere på en spesifikk oppgave.

    I praksis er dette en oppdatert og forbedret versjon av dagens Modal.

    Dialog versus Modal

    Dialog er ment som en ny og forbedret versjon av dagens Modal, og skal erstatte Modal 100% på sikt.

    • Fleksibel plassering: center, left, right, bottom og fullscreen.
    • Innebygd navngiving av Dialog ved bruk av Dialog.Title
    • Bedre fokushåndtering ved åpning/lukking.
    • Innebygd state-håndtering med Dialog.Trigger og Dialog.CloseTrigger.
    • Entry- og exit-animasjon.

    Dialog garanterer også open/close state, noe dagens Modal ikke gjør da nettlesere håndterer html-elementet <dialog /> ulikt.

    Bedre API

    Dialog kommer med et enklere API å forholde seg til, da komponenten er basert mer på komposisjon. Du trenger ikke selv håndtere open/close-state eller en ref.

    Modal
    <div>
      <Button onClick={() => ref.current?.showModal()}>Åpne modal</Button>
      <Modal ref={ref} header={{ heading: "Overskrift" }}>
        <Modal.Body>
          <BodyLong>>Body</BodyLong>
        </Modal.Body>
        <Modal.Footer>
          <Button type="button" onClick={() => ref.current?.close()}>
            Primær
          </Button>
          <Button
            type="button"
            variant="secondary"
            onClick={() => ref.current?.close()}
          >
            Sekundær
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
    Dialog
    <Dialog>
      <Dialog.Trigger>
        <Button>Åpne dialog</Button>
      </Dialog.Trigger>
      <Dialog.Popup>
        <Dialog.Header>
          <Dialog.Title>Overskrift</Dialog.Title>
          <Dialog.Description>En kort beskrivelse av dialogen.</Dialog.Description>
        </Dialog.Header>
        <Dialog.Body>
          <BodyLong>Body</BodyLong>
        </Dialog.Body>
        <Dialog.Footer>
          <Dialog.CloseTrigger>
            <Button>Primær</Button>
          </Dialog.CloseTrigger>
          <Dialog.CloseTrigger>
            <Button variant="secondary">Sekundær</Button>
          </Dialog.CloseTrigger>
        </Dialog.Footer>
      </Dialog.Popup>
    </Dialog>