Version Packages (#3505)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/README.md

@@ -1,31 +1,35 @@
 # Changesets
 
-For versjonering bruker vi løsningen [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
+Vi bruker [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
 
-## Howto
+## Lage ny versjon
 
-- For å lage en ny versjons-entry: `yarn changeset`
-- Velg pakkene som skal versjoneres med `arrowkeys` + `Space`
+1. `yarn changeset`
+2. Svar på spørsmålene som kommer opp:
 
 `🦋 Which packages would you like to include?`
 
-Trykk `Space` for å velge pakkene som skal versjoneres, for så trykke `Enter` for å gå videre.
+Trykk `Space` for å velge pakkene som skal versjoneres, trykk så `Enter` for å gå videre.
 
 `🦋 Which packages should have a major bump?`
 
-Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
+Trykk `Enter` for å gå videre _eller_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`.
 
 `🦋 Which packages should have a minor bump?`
 
-Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
+Trykk `Enter` for å gå videre _eller_ velg pakkene som skal minor-bumpes med `arrowkeys` + `Space`.
 
-Hvis du ikke velger major eller minor, så blir pakkene få en patch-bump
+Hvis du ikke velger major eller minor, så vil pakkene få en patch-bump.
 
-- Commit og push.
+`Please enter a summary for this change`
+
+Skriv inn en kort beskrivelse av endringen på formatet `<Komponent>: <gitmoji?> <Beskrivelse>`, f.eks. "Button: ✨ Add feature xyz".
+
+3. Commit og push.
 
 ## Fixed versjonering
 
-Alle base-pakkene våre har `fixed versjonering`. Dette tilsier at en bump på en av disse vil bumpe alle til samme versjon
+Alle base-pakkene våre har `fixed versjonering`. Dette betyr at en bump på en av disse vil bumpe alle til samme versjon
 
 ```sh
   "@navikt/ds-react",

.eslintrc.js

@@ -143,7 +143,11 @@ module.exports = {
       },
     },
     {
-      files: ["**/examples/__parts*/*.tsx"],
+      files: [
+        "**/examples/__parts*/*.tsx",
+        "**/pages/templates/**/*.tsx",
+        "**/pages/eksempler/**/*.tsx",
+      ],
       plugins: ["aksel-local"],
       rules: {
         "aksel-local/import-check": ["error"], // Only allow imports from @navikt and react

.github/actions/build-website/action.yml

@@ -0,0 +1,56 @@
+name: "Build website"
+description: "Builds Nextjs-website and published CDN-asssets to GCP if needed"
+inputs:
+  use_cdn_assets:
+    description: "Use CDN assets, and upload build to GCP"
+    required: true
+  npm_auth_token:
+    description: "NPM Auth Token"
+    required: true
+  nais_id_provider:
+    description: "NAIS_WORKLOAD_IDENTITY_PROVIDER token"
+    required: true
+  nais_project_id:
+    description: "NAIS_MANAGEMENT_PROJECT_ID token"
+    required: true
+  sanity_read_token:
+    description: "Sanity read-only token allowing published and un-published documents"
+    required: true
+  sanity_read_no_drafts_token:
+    description: "Sanity read-only token allowing only published documents"
+    required: true
+
+runs:
+  using: "composite"
+  steps:
+    - name: Setup project
+      uses: ./.github/actions/setup
+      with:
+        npm_auth_token: ${{ inputs.npm_auth_token }}
+
+    - name: Run website tests
+      run: yarn workspace website test
+      shell: bash
+
+    - name: Make Next.js app use CDN assets
+      if: ${{ inputs.use_cdn_assets == 'true' }}
+      run: |
+        echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
+      shell: bash
+
+    - name: Build Next.js website
+      run: yarn build:next
+      env:
+        SANITY_READ: ${{ inputs.sanity_read_token }}
+        SANITY_READ_NO_DRAFTS: ${{ inputs.sanity_read_no_drafts_token }}
+      shell: bash
+
+    - name: Upload static files to Nav CDN
+      if: ${{ inputs.use_cdn_assets == 'true' }}
+      uses: nais/deploy/actions/cdn-upload/v2@master
+      with:
+        team: designsystem
+        source: ./aksel.nav.no/website/.next/static
+        destination: "/website/_next"
+        project_id: ${{ inputs.nais_project_id }}
+        identity_provider: ${{ inputs.nais_id_provider }}

.github/actions/setup/action.yml

@@ -0,0 +1,26 @@
+name: "Setup Project"
+description: "Checks out repo, sets up Node, installs dependencies and runs boot command."
+inputs:
+  npm_auth_token:
+    description: "NPM Auth Token"
+    required: true
+
+runs:
+  using: "composite"
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+        cache: yarn
+        cache-dependency-path: "**/yarn.lock"
+
+    - name: Install dependencies
+      run: yarn
+      shell: bash
+      env:
+        NPM_AUTH_TOKEN: ${{ inputs.npm_auth_token }}
+
+    - name: Boot (build packages)
+      run: yarn boot
+      shell: bash

.github/workflows/aksel-dev.yml

@@ -14,42 +14,20 @@ jobs:
       contents: "read"
       id-token: "write"
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
         with:
-          node-version: lts/*
-          cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          fetch-depth: 1
 
-      - name: add tokens to .env
-        run: |
-          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
-
-      - name: Hide page from search engines
-        run: |
-          echo "User-agent: *\nDisallow: /" > aksel.nav.no/website/public/robots.txt
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Build application
-        env:
-          SANITY_READ: ${{ secrets.SANITY_READ }}
-          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
-        run: |
-          yarn boot
-          yarn workspace aksel.nav.no build:next
-
-      - name: Upload static files to NAV CDN
-        uses: nais/deploy/actions/cdn-upload/v2@master
+      - name: Setup and build Next.js application
+        uses: ./.github/actions/build-website
         with:
-          team: designsystem
-          source: ./aksel.nav.no/website/.next/static
-          destination: "/website/_next"
-          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
-          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          use_cdn_assets: true
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
+          nais_id_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          nais_project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          sanity_read_token: ${{ secrets.SANITY_READ }}
+          sanity_read_no_drafts_token: ${{ secrets.SANITY_READ_NO_DRAFTS }}
 
       - name: Get complete tag
         run: echo "TAG=DEV-$( date +%s )" >> $GITHUB_ENV

.github/workflows/aksel-prod.yml

@@ -16,21 +16,13 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup
         with:
-          node-version: lts/*
-          cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
 
-      - name: Install dependencies
-        run: yarn
-
-      - name: Run docgen
-        run: |
-          yarn boot
-          yarn docgen
+      - name: Run ts-docgen
+        run: yarn docgen
 
       - name: Update sanity sync
         env:
@@ -45,43 +37,20 @@ jobs:
       contents: "read"
       id-token: "write"
     steps:
-      - uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
         with:
-          node-version: lts/*
-          cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          fetch-depth: 1
 
-      - name: add tokens to .env
-        run: |
-          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Build packages
-        run: yarn boot
-
-      - name: Tests
-        run: yarn workspace website test
-
-      - name: Build application
-        env:
-          SANITY_READ: ${{ secrets.SANITY_READ }}
-          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
-        run: yarn workspace aksel.nav.no build:next
-
-      - name: Upload static files to NAV CDN
-        uses: nais/deploy/actions/cdn-upload/v2@master
+      - name: Setup and build Next.js application
+        uses: ./.github/actions/build-website
         with:
-          team: designsystem
-          source: ./aksel.nav.no/website/.next/static
-          destination: "/website/_next"
-          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
-          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          use_cdn_assets: true
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
+          nais_id_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          nais_project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          sanity_read_token: ${{ secrets.SANITY_READ }}
+          sanity_read_no_drafts_token: ${{ secrets.SANITY_READ_NO_DRAFTS }}
 
       - name: Get complete tag
         run: echo "TAG=PROD-$( date +%s )" >> $GITHUB_ENV

.github/workflows/aksel-redeploy.yml

@@ -1,42 +0,0 @@
-name: Redeploy image for aksel.nav.no
-on:
-  workflow_dispatch:
-    inputs:
-      tag:
-        description: "Docker image tag"
-        required: true
-        default: ""
-      dry:
-        description: "Dry-run"
-        required: true
-        default: "false"
-
-env:
-  IMAGE: ghcr.io/navikt/aksel
-
-jobs:
-  redeploy:
-    name: Redeploy image
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-          cache: yarn
-      - uses: actions/checkout@v4
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Create docker image tag
-        run: echo "DOCKER_TAG=${{ env.IMAGE }}:${{ github.event.inputs.tag }}" >> $GITHUB_ENV
-      - name: Deploy to prod-gcp
-        uses: nais/deploy/actions/deploy@master
-        env:
-          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
-          RESOURCE: aksel.nav.no/nais-prod.yaml
-          CLUSTER: prod-gcp
-          IMAGE: ${{ env.DOCKER_TAG }}
-          DRY_RUN: ${{ github.event.inputs.dry }}

.github/workflows/backup-sanity.yml

@@ -16,17 +16,18 @@ jobs:
         with:
           node-version: lts/*
           cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          cache-dependency-path: "**/yarn.lock"
 
       - name: Install dependencies
         run: cd aksel.nav.no/website && yarn
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
 
       - name: Export dataset
+        run: cd aksel.nav.no/website && yarn backup
         env:
           SANITY_READ: ${{ secrets.SANITY_READ }}
-        run: cd aksel.nav.no/website && yarn backup
+
       - name: Upload GCP bucket
         uses: "google-github-actions/auth@v2"
         with:

.github/workflows/chromatic.yml

@@ -18,41 +18,31 @@ concurrency:
 
 jobs:
   chromatic:
-    if: ${{ !contains(github.event.pull_request.labels.*.name, 'ignore-chromatic') }}
     runs-on: ubuntu-latest
     permissions:
       issues: write
       pull-requests: write
       contents: write
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup
         with:
-          node-version: lts/*
-          cache: yarn
-
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Build packages
-        run: yarn boot
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
 
       - name: Chromatic
         uses: chromaui/action@latest
         id: chromatic_tests
-        continue-on-error: true
+        continue-on-error: false
         with:
           autoAcceptChanges: "main"
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          exitZeroOnChanges: false
+          exitZeroOnChanges: true
           buildScriptName: "build:storybook-chromatic"
           onlyChanged: true
           untraced: "**/package.json|yarn.lock|**/*.md"
@@ -62,14 +52,14 @@ jobs:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}
 
       - name: Get commit sha
-        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
+        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
         id: vars
         shell: bash
         run: |
           echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
 
       - name: Find Comment
-        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
+        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
         uses: peter-evans/find-comment@v2
         id: fc
         with:
@@ -78,19 +68,7 @@ jobs:
           body-includes: Storybook demo
 
       - name: Create or update comment
-        if: steps.chromatic_tests.outcome == 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
-        uses: peter-evans/create-or-update-comment@v3
-        with:
-          comment-id: ${{ steps.fc.outputs.comment-id }}
-          issue-number: ${{ github.event.pull_request.number }}
-          body: |
-            ## [Storybook demo](${{steps.chromatic_tests.outputs.storybookUrl}})
-
-            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
-          edit-mode: replace
-
-      - name: Create or update failed comment
-        if: steps.chromatic_tests.outcome != 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
+        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
         uses: peter-evans/create-or-update-comment@v3
         with:
           comment-id: ${{ steps.fc.outputs.comment-id }}
@@ -98,10 +76,9 @@ jobs:
           body: |
             ## [Storybook demo](${{steps.chromatic_tests.outputs.storybookUrl}}) / [Chromatic](${{steps.chromatic_tests.outputs.url}})
 
-            ### 📝 Endringer til review: ${{steps.chromatic_tests.outputs.changeCount}}
+            ${{ steps.chromatic_tests.outputs.changeCount > 0 && format('### 📝 Changes to review: {0}', steps.chromatic_tests.outputs.changeCount) || '' }}
+            ${{ steps.chromatic_tests.outputs.errorCount > 0 && format('### ❌ Stories with errors: {0}', steps.chromatic_tests.outputs.errorCount) || '' }}
+            ${{ steps.chromatic_tests.outputs.interactionTestFailuresCount > 0 && format('### ❌ Failed interaction tests: {0}', steps.chromatic_tests.outputs.interactionTestFailuresCount) || '' }}
 
-            ${{ steps.chromatic_tests.outputs.errorCount > 0 && format('### ❌ Stories med feil: {0}', steps.chromatic_tests.outputs.errorCount) || '' }}
-            ${{ steps.chromatic_tests.outputs.interactionTestFailuresCount > 0 && format('### ❌ Feilede interaksjonstester: {0}', steps.chromatic_tests.outputs.interactionTestFailuresCount) || '' }}
-
-            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
+            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} components | ${{steps.chromatic_tests.outputs.specCount}} stories
           edit-mode: replace

.github/workflows/ci.yml

@@ -9,36 +9,53 @@ on:
   workflow_dispatch:
 
 jobs:
-  build:
-    name: "Validate build"
-    if: "!contains(github.event.head_commit.message, '[ci skip]')"
+  lint:
+    name: "Linter: eslint, stylelint"
     runs-on: ubuntu-latest
-    permissions:
-      pull-requests: "write"
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
         with:
-          fetch-depth: 0
+          fetch-depth: 1
 
-      - uses: actions/setup-node@v4
+      - name: Setup project
+        uses: ./.github/actions/setup
         with:
-          node-version: lts/*
-          cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Boot (build packages)
-        run: yarn boot
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
 
       - name: Lint
         run: yarn lint
 
+  validate-examples:
+    name: "Validate Aksel.nav.no component examples"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Setup project
+        uses: ./.github/actions/setup
+        with:
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
+
       - name: Validate example code
         run: yarn validate:eksempler
 
+  test:
+    name: "Unit tests"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Setup project
+        uses: ./.github/actions/setup
+        with:
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
+
       - name: Test
         run: yarn test

.github/workflows/e2e-optimized.yml

@@ -0,0 +1,39 @@
+name: E2E / Playwright Tests
+on:
+  push:
+    branches: [main, next]
+    paths:
+      - "aksel.nav.no/**"
+  pull_request:
+    branches: [main, next]
+    paths:
+      - "aksel.nav.no/**"
+
+jobs:
+  playwright:
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.48.1-jammy
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Setup and build Next.js application
+        uses: ./.github/actions/build-website
+        with:
+          use_cdn_assets: false
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
+          nais_id_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          nais_project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          sanity_read_token: ${{ secrets.SANITY_READ }}
+          sanity_read_no_drafts_token: ${{ secrets.SANITY_READ_NO_DRAFTS }}
+
+      - name: Run Playwright tests
+        env:
+          SANITY_READ: ${{ secrets.SANITY_READ }}
+          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
+
+        run: yarn workspace website e2e:ci-full

.github/workflows/e2e.yml

@@ -1,50 +0,0 @@
-name: E2E / Playwright Tests
-on:
-  push:
-    branches: [main, next]
-    paths:
-      - "aksel.nav.no/**"
-  pull_request:
-    branches: [main, next]
-    paths:
-      - "aksel.nav.no/**"
-
-jobs:
-  playwright:
-    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v1.48.1-jammy
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-          cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Build packages
-        run: |
-          yarn boot
-
-      - name: Build application
-        env:
-          SANITY_READ: ${{ secrets.SANITY_READ }}
-          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
-        run: yarn workspace aksel.nav.no build:next
-
-      - name: Run Playwright tests
-        env:
-          SANITY_READ: ${{ secrets.SANITY_READ }}
-          SANITY_READ_NO_DRAFTS: ${{ secrets.SANITY_READ_NO_DRAFTS }}
-        run: yarn workspace website e2e:ci-full
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: playwright-report
-          path: aksel.nav.no/website/playwright-report/
-          retention-days: 10

.github/workflows/figma-config.yml

@@ -25,12 +25,12 @@ jobs:
         with:
           node-version: lts/*
           cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          cache-dependency-path: "**/yarn.lock"
 
       - name: Install dependencies
         run: yarn
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
 
       - name: Build tokens
         run: yarn workspace @navikt/ds-tokens build

.github/workflows/referansesider-spa-deploy.yml

@@ -15,16 +15,16 @@ jobs:
       id-token: "write"
 
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
         with:
-          node-version: lts/*
-          cache: yarn
+          fetch-depth: 1
+
+      - name: Setup project
+        uses: ./.github/actions/setup
+        with:
+          npm_auth_token: ${{ secrets.READER_TOKEN }}
 
-      - run: yarn install
-        env:
-          NPM_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
-      - run: yarn boot
       - run: cd ./examples/referansesider && yarn && yarn build
       - uses: nais/deploy/actions/spa-deploy/v2@master
         with:

.github/workflows/release.yml

@@ -30,9 +30,7 @@ jobs:
         with:
           node-version: lts/*
           cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          cache-dependency-path: "**/yarn.lock"
 
       - uses: denoland/setup-deno@v1
         with:
@@ -40,6 +38,8 @@ jobs:
 
       - name: Install dependencies
         run: yarn
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
 
       - name: Create release Pull Request or publish to NPM
         id: changesets
@@ -78,7 +78,7 @@ jobs:
         if: steps.changesets.outputs.published == 'true'
         run: yarn zip:icons
 
-      - name: Upload updated icon.zip to NAV CDN
+      - name: Upload updated icon.zip to Nav CDN
         if: steps.changesets.outputs.published == 'true'
         uses: nais/deploy/actions/cdn-upload/v2@master
         with:
@@ -94,7 +94,7 @@ jobs:
           echo "version=$VERSION" >> $GITHUB_ENV
           echo "Version of @navikt/ds-css: ${{ env.version }}"
 
-      - name: Upload CSS to NAV CDN
+      - name: Upload CSS to Nav CDN
         if: steps.changesets.outputs.published == 'true'
         uses: nais/deploy/actions/cdn-upload/v2@master
         with:

.github/workflows/update-article-views.yml

@@ -18,6 +18,7 @@ jobs:
           dockerfile: scripts/article-views/Dockerfile.update-article-views
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+
       - name: start naisjob prod-gcp
         uses: nais/deploy/actions/deploy@master
         env:

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname $0)/_/husky.sh"
 
-yarn lint-staged
+yarn lint-staged && yarn tsx ./scripts/in-sync-versions.ts

.storybook/getting-started.mdx

@@ -11,7 +11,7 @@ import Setup from "./assets/setup.png";
 
     # Getting started
 
-    Aksel is the toolbox for product development <a href="https://aksel.nav.no"target="_blank">@NAV</a> (Norwegian Labour and Welfare Administration)
+    Aksel is the toolbox for product development <a href="https://aksel.nav.no"target="_blank">@Nav</a> (Norwegian Labour and Welfare Administration)
 
     This includes a designsystem, best practices for product-development, principles for user-experience and a blog. <a href="https://aksel.nav.no/god-praksis/artikler/om-aksel" target="_blank">
     Read more about Aksel.</a>
@@ -30,7 +30,7 @@ import Setup from "./assets/setup.png";
         target="_blank"
         className="sb-link"
       >Website</a></h3>
-      <p className="sb-section-item-paragraph">Includes everything you need to get started building and developing digital products for NAV today.</p>
+      <p className="sb-section-item-paragraph">Includes everything you need to get started building and developing digital products for Nav today.</p>
 
     </div>
     <div className="sb-section-item">

.storybook/preview.tsx

@@ -2,11 +2,11 @@ import { withThemeByClassName } from "@storybook/addon-themes";
 import { Preview } from "@storybook/react";
 import React, { useLayoutEffect } from "react";
 // @ts-expect-error - Temporary
-import darksideCss from "@navikt/ds-css/darkside/index.css?inline";
+import darksideCss from "../@navikt/core/css/darkside/index.css?inline";
 // @ts-expect-error - Temporary
-import defaultCss from "@navikt/ds-css/index.css?inline";
-import { UNSAFE_AkselTheme } from "../@navikt/core/react/src/provider";
-import UNSAFE_AkselLanguageProvider from "../@navikt/core/react/src/provider/i18n/LanguageProvider";
+import defaultCss from "../@navikt/core/css/index.css?inline";
+import { Provider } from "../@navikt/core/react/src/provider";
+import { Theme } from "../@navikt/core/react/src/theme";
 import en from "../@navikt/core/react/src/util/i18n/locales/en";
 import nb from "../@navikt/core/react/src/util/i18n/locales/nb";
 import nn from "../@navikt/core/react/src/util/i18n/locales/nn";
@@ -29,9 +29,9 @@ const ModeDecorator = ({ children, mode, theme }) => {
   }, [mode]);
 
   return mode === "darkside" ? (
-    <UNSAFE_AkselTheme theme={theme || undefined} hasBackground={false}>
+    <Theme theme={theme || undefined} hasBackground={false}>
       {children}
-    </UNSAFE_AkselTheme>
+    </Theme>
   ) : (
     children
   );
@@ -46,9 +46,7 @@ const translations = {
 const LanguageDecorator = ({ children, language }) => {
   if (language) {
     return (
-      <UNSAFE_AkselLanguageProvider translations={translations[language]}>
-        {children}
-      </UNSAFE_AkselLanguageProvider>
+      <Provider translations={translations[language]}>{children}</Provider>
     );
   }
   return children;

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/aksel-icons
 
+## 7.9.2
+
+## 7.9.1
+
+## 7.9.0
+
+## 7.8.1
+
+## 7.8.0
+
 ## 7.7.0
 
 ## 7.6.0

@navikt/aksel-icons/README.md

@@ -1,6 +1,6 @@
 # Aksel icons
 
-800+ open source icons made by Aksel, NAVs designsystem-team
+800+ open source icons made by Aksel, Nav's design system team.
 
 - Designed for 24x24px
 - Available in React and SVG
@@ -30,7 +30,7 @@ Tip: Use the `title` prop for accessible icons.
 
 ### Sizing
 
-Each icons `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. We recommend using at least 1.5rem/24px for best possible visual representation.
+Each icon's `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. We recommend using at least 1.5rem/24px for the best possible visual representation.
 
 ```jsx
 <StarIcon fontSize="1.5rem" />

@navikt/aksel-icons/figma-plugin/README.md

@@ -2,9 +2,9 @@
 
 # Aksel Icons plugin
 
-Pluginen gir deg mulighet til å se gjennom og hente ut alle ikonene i fra ikonpakken `@navikt/aksel-icons`. Du slipper da å hente nye oppdateringer fra Figma Community.
+Pluginen gir deg mulighet til å se gjennom og hente ut alle ikonene fra ikonpakken `@navikt/aksel-icons`. Du slipper da å hente nye oppdateringer fra Figma Community.
 
-Referer til [ikon-dokumentasjonen](https://aksel.nav.no/ikoner) for å se alle ikonene.
+Gå til [ikon-dokumentasjonen](https://aksel.nav.no/ikoner) for å se alle ikonene.
 Har du ønsker om nye ikoner, eller ønsker å bidra med å lage nye, lag et issue på [GitHub-repoet for designsystemet](https://github.com/navikt/aksel).
 
 ## Quickstart

@navikt/aksel-icons/figma-plugin/package.json

@@ -22,7 +22,7 @@
     "@svgr/core": "^8.1.0",
     "@types/node": "^18.15.11",
     "@types/postcss-url": "^10.0.4",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "postcss": "^8.4.31",

@navikt/aksel-icons/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "7.7.0",
-  "author": "Aksel | NAV",
+  "version": "7.9.2",
+  "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
     "type": "git",
@@ -10,7 +10,7 @@
   },
   "keywords": [
     "Icons",
-    "NAV",
+    "Nav",
     "Aksel",
     "designsystem",
     "react",
@@ -84,9 +84,9 @@
     "react": "^18.0.0",
     "rehype-parse": "8.0.4",
     "tsc-alias": "1.8.8",
-    "tsx": "^4.7.1",
+    "tsx": "^4.19.1",
     "typescript": "5.5.4",
     "unified": "10.1.2",
-    "vitest": "^1.2.2"
+    "vitest": "^2.1.8"
   }
 }

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel-stylelint
 
+## 7.9.2
+
+## 7.9.1
+
+## 7.9.0
+
+## 7.8.1
+
+## 7.8.0
+
+### Minor Changes
+
+- Combobox: Removed clear button, removed tokens staring with `--ac-combobox-clear`, deprecated props `clearButton`/`clearButtonLabel`. ([#3433](https://github.com/navikt/aksel/pull/3433))
+
 ## 7.7.0
 
 ## 7.6.0

@navikt/aksel-stylelint/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.7.0",
-  "author": "Aksel | NAV",
+  "version": "7.9.2",
+  "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
     "type": "git",
@@ -35,14 +35,14 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^7.7.0",
-    "@navikt/ds-tokens": "^7.7.0",
+    "@navikt/ds-css": "^7.9.2",
+    "@navikt/ds-tokens": "^7.9.2",
     "concurrently": "9.0.1",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",
-    "stylelint": "^14.8.5",
+    "stylelint": "^16.10.0",
     "stylelint-test-rule-node": "^0.2.1",
-    "tsx": "^4.7.1",
+    "tsx": "^4.19.1",
     "typescript": "5.5.4"
   }
 }

@navikt/aksel-stylelint/src/deprecations.ts

@@ -72,4 +72,8 @@ export const deprecations: DeprecatedList = [
     classes: ["navds-list--nested", "navds-list__item-content"],
     message: "Removed in v7.1.1",
   },
+  {
+    classes: ["navds-combobox__button-clear"],
+    message: "Removed in v7.8.0",
+  },
 ];

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @navikt/aksel
 
+## 7.9.2
+
+### Patch Changes
+
+- Updated dependencies [[`54495a4`](https://github.com/navikt/aksel/commit/54495a446065c73a06865885e65b3b07dedaa5ea)]:
+  - @navikt/ds-css@7.9.2
+
+## 7.9.1
+
+### Patch Changes
+
+- Updated dependencies [[`25305eb`](https://github.com/navikt/aksel/commit/25305ebba04a37e6315bc37bfabb39f04f83f146)]:
+  - @navikt/ds-css@7.9.1
+
+## 7.9.0
+
+### Patch Changes
+
+- Updated dependencies [[`db828bd`](https://github.com/navikt/aksel/commit/db828bddd393ba1d03d8e68fe80c9211da43e54a), [`0017789`](https://github.com/navikt/aksel/commit/00177898f55573a682a43819b08304c1f60a732a), [`c90abe7`](https://github.com/navikt/aksel/commit/c90abe7c23e2520e5131d138f3193a4de0e28b9d), [`0017789`](https://github.com/navikt/aksel/commit/00177898f55573a682a43819b08304c1f60a732a)]:
+  - @navikt/ds-css@7.9.0
+
+## 7.8.1
+
+### Patch Changes
+
+- Updated dependencies [[`06193ae`](https://github.com/navikt/aksel/commit/06193ae3001cee4b1f411a75d51ab54391483dd7), [`a82126b`](https://github.com/navikt/aksel/commit/a82126b893490b9786d31cb74ba31695b90f8c60)]:
+  - @navikt/ds-css@7.8.1
+
+## 7.8.0
+
+### Patch Changes
+
+- Updated dependencies [[`f720562`](https://github.com/navikt/aksel/commit/f720562908ccb0c7c62cabd386920d0c1fdcdaf9), [`5dedfa1`](https://github.com/navikt/aksel/commit/5dedfa104a187d23e3028ffa2b4a85e44e206b31)]:
+  - @navikt/ds-css@7.8.0
+
 ## 7.7.0
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.7.0",
+  "version": "7.9.2",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
-  "author": "Aksel | NAV designsystem team",
+  "author": "Aksel | Nav designsystem team",
   "license": "MIT",
   "keywords": [
     "Commandline",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "7.7.0",
+    "@navikt/ds-css": "^7.9.2",
     "axios": "1.7.4",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",
@@ -40,13 +40,13 @@
     "is-git-clean": "1.1.0",
     "jscodeshift": "^0.15.1",
     "jscodeshift-add-imports": "1.0.11",
-    "lodash": "4.17.21",
+    "lodash": "^4.17.21",
     "react-scanner": "^1.1.0"
   },
   "devDependencies": {
     "rimraf": "6.0.1",
     "typescript": "5.5.4",
-    "vitest": "^1.2.2"
+    "vitest": "^2.1.8"
   },
   "sideEffects": false,
   "engines": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @navikt/ds-css
 
+## 7.9.2
+
+### Patch Changes
+
+- Table: Removed border-bottom for HeaderCell used in ExpandableRow. ([#3503](https://github.com/navikt/aksel/pull/3503))
+
+## 7.9.1
+
+### Patch Changes
+
+- Link: :bug: Use inside Alert got wrong text-color while focused or active. ([#3489](https://github.com/navikt/aksel/pull/3489))
+
+## 7.9.0
+
+### Minor Changes
+
+- ErrorSummary: :sparkles: new prop to prefix error with a warning icon. ([#3445](https://github.com/navikt/aksel/pull/3445))
+  All form components: replace dot with warning icon in error message.
+
+### Patch Changes
+
+- Switch: Update switch to better reflect unchecked state. ([#3468](https://github.com/navikt/aksel/pull/3468))
+
+- Select: :bug: Focus-border no longer cancels out error-border. ([#3465](https://github.com/navikt/aksel/pull/3465))
+
+- Textarea: :bug: Focus-border no longer cancels out error-border. ([#3465](https://github.com/navikt/aksel/pull/3465))
+
+## 7.8.1
+
+### Patch Changes
+
+- Alert: Link-components used within Alert variant='inline' now preserves default coloring ([#3461](https://github.com/navikt/aksel/pull/3461))
+
+- Table: :fire: Removed cursor 'pointer' when 'ExpandableRow' is disabled. ([#3462](https://github.com/navikt/aksel/pull/3462))
+
+## 7.8.0
+
+### Minor Changes
+
+- Combobox: Removed clear button, removed tokens staring with `--ac-combobox-clear`, deprecated props `clearButton`/`clearButtonLabel`. ([#3433](https://github.com/navikt/aksel/pull/3433))
+
+### Patch Changes
+
+- CSS: Resolved regression where the complete stylesheet was included in scoped 'components.css' file. ([#3427](https://github.com/navikt/aksel/pull/3427))
+
 ## 7.7.0
 
 ## 7.6.0

@navikt/core/css/README.md

@@ -1,11 +1,11 @@
 # Aksel styling
 
-CSS for NAVs designsystem.
+CSS for Nav's design system.
 
-- Css tokens (Colors, border, shadows etc)
-- Component-styling for `@navikt/ds-react` packages
+- Css tokens (Colors, border, shadows etc.)
+- Component styling for `@navikt/ds-react` packages
 - Normalize.css v8
-- Font-loading
+- Font loading
 
 ## Installation
 
@@ -16,7 +16,7 @@ CSS for NAVs designsystem.
 
 ## Usage
 
-Import styles once to make it accessible for your entire project. Typically you will add the following line to your root .tsx file.
+Import styles once to make it accessible for your entire project. Typically you will add the following line to your root .tsx file:
 
 ```javascript
 import "@navikt/ds-css";
@@ -26,7 +26,7 @@ function App() {
 }
 ```
 
-But you can import it in a .css-file
+But you can import it in a .css-file as well:
 
 ```css
 @import "@navikt/ds-css";

@navikt/core/css/button.css

@@ -109,7 +109,7 @@
   margin-right: var(--ac-button-icon-margin);
 }
 
-.navds-button__icon:only-child {
+.navds-button--icon-only .navds-button__icon {
   margin: 0;
 }
 
@@ -497,6 +497,10 @@
 }
 
 /* Loader overrides */
+.navds-button .navds-loader {
+  position: absolute;
+}
+
 .navds-button .navds-loader .navds-loader__foreground {
   stroke: var(--ac-button-loader-stroke, currentColor);
 }
@@ -506,6 +510,10 @@
   stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
 }
 
+.navds-button--loading > :not(.navds-loader) {
+  visibility: hidden;
+}
+
 @media (forced-colors: active) {
   .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
     opacity: 1;

@navikt/core/css/config/bundle.darkside.ts

@@ -0,0 +1,270 @@
+import browserslist from "browserslist";
+import CleanCss from "clean-css";
+import fastglob from "fast-glob";
+import fs from "fs";
+import { Features, browserslistToTargets, bundleAsync } from "lightningcss";
+import path from "path";
+import {
+  StyleMappings,
+  componentsCss,
+  formCss,
+  primitivesCss,
+} from "../config/_mappings";
+import packageJSON from "../package.json";
+
+bundleDarkside();
+
+async function bundleDarkside() {
+  const buildDir = path.join(__dirname, "..", "dist/darkside");
+  const darksideDir = path.join(__dirname, "..", "darkside");
+
+  /* Make sure every dir is created to make node happy */
+  [buildDir, `${buildDir}/global`, `${buildDir}/component`].forEach((dir) => {
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+  });
+
+  /**
+   * Bundles the ./index.css file with LightningCSS.
+   * @param rootParser: Custom parsers that allows for editing the index.css file before bundling it. This allows removing unwanted CSS from being bundled.
+   * @returns Parsed CSS file output. Must be valid CSS.
+   */
+  async function bundleCSS(rootParser?: (rootFile: string) => string) {
+    const { code } = await bundleAsync({
+      filename: `${darksideDir}/index.css`,
+      minify: false,
+      include:
+        Features.Nesting | Features.MediaRangeSyntax | Features.HexAlphaColors,
+
+      drafts: {
+        customMedia: false,
+      },
+      targets: browserslistToTargets(
+        browserslist(">= 0.5% in NO, safari >= 15.4, iOS >= 15.4, not dead"),
+      ),
+      resolver: {
+        read(filePath) {
+          const file = fs.readFileSync(filePath, "utf8");
+          if (filePath === `${darksideDir}/index.css` && rootParser) {
+            return rootParser(file);
+          }
+
+          return file;
+        },
+      },
+    });
+
+    let codeString = code.toString();
+
+    /**
+     * LightningCSS adds these tokens to the bundle that we want removed:
+     * --lightningcss-light: initial;
+     * --lightningcss-dark: ;
+     */
+    codeString = codeString
+      .split("\n")
+      .filter((line) => !line.includes("--lightningcss-"))
+      .join("\n");
+
+    return codeString;
+  }
+
+  /**
+   * Writes the CSS file to the build directory. Includes a minified version with the .min.css suffix.
+   * @param file: CSS file content
+   * @param filePath: Path to the file in the build directory
+   */
+  function writeFile({ file, filePath }: { file: string; filePath: string }) {
+    fs.writeFileSync(`${buildDir}/${filePath}`, file);
+
+    /**
+     * We use CleanCss package here since we only want it to optimize filesize, not transform any CSS like LightningCSS minifier does.
+     * This is because we want to keep the CSS as close to the original as possible.
+     * Since CleanCSS is not part of the PostCSS ecosystem, we use it in replacement for cssnano.
+     */
+    const minifiedCss = new CleanCss({}).minify(file);
+
+    if (minifiedCss.errors.length > 0) {
+      throw new Error(
+        `Errors found when minifying for ${filePath} CSS. Stopped bundling\n${minifiedCss.errors}`,
+      );
+    }
+
+    fs.writeFileSync(
+      `${buildDir}/${filePath.replace(".css", ".min.css")}`,
+      minifiedCss.styles,
+    );
+  }
+
+  /* ----------------------------- index.css build ---------------------------- */
+  await bundleCSS().then((file) => {
+    writeFile({
+      file,
+      filePath: "index.css",
+    });
+  });
+
+  /* --------------------------- component.css build -------------------------- */
+  function rootComponentsParser(rootString: string) {
+    let parsed = rootString
+      .split("\n")
+      .filter((line) => {
+        /* We assume that all components is added under the layer components or layout */
+        return (
+          line.endsWith("layer(aksel.components);") ||
+          line.endsWith("layer(aksel.layout);")
+        );
+      })
+      .join("\n");
+
+    /* If one imports this file standalone, we would like to make sure the layering order is included.  */
+    const layerDefinition = rootString
+      .split("\n")
+      .find((line) => line.startsWith("@layer"));
+
+    if (!layerDefinition) {
+      throw new Error(
+        "No layer definition found in index.css. Stopped bundling",
+      );
+    }
+
+    parsed = layerDefinition + "\n" + parsed;
+
+    return parsed;
+  }
+
+  await bundleCSS(rootComponentsParser).then((file) => {
+    writeFile({
+      file,
+      filePath: componentsCss,
+    });
+  });
+
+  /* ------------------------------ /global build ----------------------------- */
+  for (const style of StyleMappings.baseline) {
+    // eslint-disable-next-line no-inner-declarations
+    function parser(input: string) {
+      return input
+        .split("\n")
+        .filter((line) => line.startsWith("@import"))
+        .filter((line) =>
+          line.replace(".darkside.css", ".css").includes(style.main),
+        )
+        .join("\n");
+    }
+
+    await bundleCSS(parser).then((file) => {
+      writeFile({
+        file,
+        filePath: `global/${style.main}`,
+      });
+    });
+  }
+
+  /* ------------------------------ form build ----------------------------- */
+  function rootFormParser(input: string) {
+    return input
+      .split("\n")
+      .filter((line) => line.startsWith("@import"))
+      .filter((line) => line.includes("form/index.css"))
+      .join("\n");
+  }
+
+  await bundleCSS(rootFormParser).then((file) => {
+    writeFile({
+      file,
+      filePath: `component/${formCss}`,
+    });
+  });
+
+  /* ------------------------------ Primitives build ----------------------------- */
+  function rootPrimitivesParser(input: string) {
+    return input
+      .split("\n")
+      .filter((line) => line.startsWith("@import"))
+      .filter((line) => line.includes("primitives/index.css"))
+      .join("\n");
+  }
+
+  await bundleCSS(rootPrimitivesParser).then((file) => {
+    writeFile({
+      file,
+      filePath: `component/${primitivesCss}`,
+    });
+  });
+
+  /* ---------------------------- /component build ---------------------------- */
+
+  function componentFiles(): string[] {
+    const indexFile = fs.readFileSync(`${darksideDir}/index.css`, "utf8");
+
+    /* Since forms and primitives is under the same layers, but diffferent files we filter them out to avoid duplicates */
+    const formLine = rootFormParser(indexFile);
+    const primitivesLine = rootPrimitivesParser(indexFile);
+
+    return indexFile
+      .split("\n")
+      .filter((line) => line.startsWith("@import"))
+      .filter((line) => !formLine.includes(line))
+      .filter((line) => !primitivesLine.includes(line))
+      .filter((line) => line.endsWith("layer(aksel.components);"));
+  }
+
+  for (const componentLine of componentFiles()) {
+    // eslint-disable-next-line no-inner-declarations
+    function parser(input: string) {
+      return input
+        .split("\n")
+        .filter((line) => line === componentLine)
+        .join("\n");
+    }
+
+    await bundleCSS(parser).then((file) => {
+      const componentName = componentLine
+        /* Matches everything between " */
+        .match(/".*"/gm)?.[0]
+        /* Replaces every " with nothing */
+        .replace(/"/gm, "")
+        /* Removes start of import-string */
+        .replace("./", "")
+        .replace(".darkside.css", ".css");
+
+      if (!componentName) {
+        throw new Error(
+          `Could not find component name for line: ${componentLine}`,
+        );
+      }
+
+      const sanitizedName = componentName
+        /*
+         * https://regex101.com/r/MAj58n/1
+         * Removes every - and space
+         */
+        .replace(/[\s-]/g, "")
+        .replace(".css", "")
+        .toLowerCase();
+
+      writeFile({
+        file,
+        filePath: `component/${sanitizedName}.css`,
+      });
+    });
+  }
+
+  const version = packageJSON.version;
+
+  const files = fastglob.sync("**/*.css", {
+    cwd: buildDir,
+    ignore: ["**/version/**"],
+  });
+
+  for (const file of files) {
+    const css = fs.readFileSync(`${buildDir}/${file}`, "utf-8");
+
+    const filename = `${buildDir}/version/${version}/${file}`;
+    fs.mkdirSync(path.dirname(filename), { recursive: true });
+
+    fs.writeFileSync(filename, css);
+  }
+}

@navikt/core/css/config/bundle.js

@@ -66,7 +66,13 @@ async function bundleComponents() {
   const css = fs.readFileSync(indexSrc);
 
   /* Remove @charset, baseline */
-  const cssString = css.toString().split("\n").slice(2).join("\n");
+  const cssString = css
+    .toString()
+    .split("\n")
+    .filter((line) => {
+      return line.startsWith("@import") && !line.includes("baseline");
+    })
+    .join("\n");
 
   const result = await postcss([cssImports, combineSelectors]).process(
     cssString,
@@ -102,6 +108,7 @@ function buildFragmentFiles() {
   const files = fastglob
     .sync("*.css", { cwd: ".", ignore: "**/*.min.css" })
     .map((fileN) => path.basename(fileN))
+    .filter((fileName) => !fileName.includes("index.css"))
     .map((x) => ({
       input: path.resolve(__dirname, `../${x}`),
       output: path.resolve(
@@ -154,7 +161,7 @@ async function bundleMinified() {
 function copyToVersionFolder() {
   const files = fastglob.sync("**/*.css", {
     cwd: `./${rootDir}`,
-    ignore: "**/version/**",
+    ignore: ["**/version/**", "**/darkside/**"],
   });
 
   for (let file of files) {

@navikt/core/css/config/tests/bundle.test.ts

@@ -0,0 +1,46 @@
+import fastglob from "fast-glob";
+import path from "path";
+import { describe, expect, test } from "vitest";
+
+/**
+ * Darkside config might have some new files added. We can skip these when checking for equality.
+ */
+const newFiles = ["theme"];
+
+describe("Check that old and new (darkside) bundle matches", () => {
+  test("Darkside includes the same files as old bundle", () => {
+    const oldBundleDir = path.join(__dirname, "../../dist");
+    const darksideDir = path.join(__dirname, "../../dist/darkside");
+
+    const oldFiles = fastglob.sync("**/*.css", {
+      cwd: oldBundleDir,
+      ignore: ["**/version/**", "**/darkside/**"],
+    });
+
+    const darksideFiles = fastglob.sync("**/*.css", {
+      cwd: darksideDir,
+      ignore: ["**/version/**"],
+    });
+
+    expect(oldFiles.length).toBeGreaterThan(0);
+    expect(darksideFiles.length).toBeGreaterThan(0);
+
+    // Compare file names
+    oldFiles.forEach((file) => {
+      expect(darksideFiles).toContain(file);
+    });
+
+    darksideFiles.forEach((file) => {
+      if (newFiles.find((newFile) => file.includes(newFile))) {
+        return;
+      }
+      expect(oldFiles).toContain(file);
+    });
+
+    /**
+     * Check that darkside has the same amount of files as old bundle
+     * (minus the new files * 2 since .min.css is also included)
+     */
+    expect(darksideFiles.length - newFiles.length * 2).toBe(oldFiles.length);
+  });
+});

@navikt/core/css/darkside/accordion.darkside.css

@@ -4,8 +4,8 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: var(--ax-spacing-3);
-  padding: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
+  padding: var(--ax-space-12);
   text-align: left;
   cursor: pointer;
   border: none;
@@ -26,7 +26,6 @@
 
   &:hover {
     background-color: var(--ax-bg-accent-hoverA);
-    color: var(--ax-text-accent-strong);
 
     &::before,
     &::after {
@@ -119,7 +118,7 @@
 .navds-accordion__content {
   --__acx-accordion-content-line-width: 2px;
 
-  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
+  padding-inline: var(--ax-space-24) var(--ax-space-12);
   display: none;
   overflow: hidden;
   padding-block: 0;
@@ -148,15 +147,15 @@
 }
 
 .navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
-  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
+  padding-inline: var(--ax-space-24) var(--ax-space-12);
 }
 
 .navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
   box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
-  padding-block: var(--ax-spacing-2);
+  padding-block: var(--ax-space-8);
 
   /* Aligns content with heading-section */
-  padding-inline: calc(var(--ax-spacing-5) + 2px) var(--ax-spacing-5);
+  padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
 
   @media (forced-colors: active) {
     border-left: 1px solid canvastext;
@@ -168,8 +167,8 @@
   opacity: 1;
   overflow: visible;
   max-height: fit-content;
-  padding-block: var(--ax-spacing-2);
-  padding-block-end: var(--ax-spacing-6);
+  padding-block: var(--ax-space-8);
+  padding-block-end: var(--ax-space-24);
   border-color: var(--ax-border-subtleA);
 }
 

@navikt/core/css/darkside/action-menu.darkside.css

@@ -34,9 +34,9 @@
 }
 
 .navds-action-menu__content > .navds-action-menu__content-inner {
-  --__axc-action-menu-content-p: var(--ax-spacing-2);
-  --__axc-action-menu-item-pr: var(--ax-spacing-2);
-  --__axc-action-menu-item-pl: var(--ax-spacing-2);
+  --__axc-action-menu-content-p: var(--ax-space-8);
+  --__axc-action-menu-item-pr: var(--ax-space-8);
+  --__axc-action-menu-item-pl: var(--ax-space-8);
   --__axc-action-menu-item-height: 2rem;
 
   border-radius: var(--ax-border-radius-large);
@@ -57,7 +57,7 @@
 .navds-action-menu__item {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   min-height: var(--__axc-action-menu-item-height);
   cursor: default;
   border-radius: var(--ax-border-radius-medium);
@@ -87,14 +87,14 @@
 }
 
 .navds-action-menu__item--has-icon {
-  --__axc-action-menu-item-pl: var(--ax-spacing-6);
+  --__axc-action-menu-item-pl: var(--ax-space-24);
 }
 
 .navds-action-menu__sub-trigger {
-  --__axc-action-menu-item-pr: var(--ax-spacing-05);
+  --__axc-action-menu-item-pr: var(--ax-space-2);
 
   &[data-state="open"] {
-    background-color: var(--ax-bg-neutral-moderate-pressed);
+    background-color: var(--ax-bg-moderate-pressed);
   }
 
   &:focus {
@@ -115,12 +115,12 @@
 .navds-action-menu__marker {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
 }
 
 .navds-action-menu__marker--right {
   margin-left: auto;
-  padding-left: var(--ax-spacing-4);
+  padding-left: var(--ax-space-16);
 }
 
 .navds-action-menu__marker--left {
@@ -138,10 +138,10 @@
 
 /* --------------------------- ActionMenu shortcut -------------------------- */
 .navds-action-menu__shortcut {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   color: var(--ax-text-default);
   border-radius: var(--ax-border-radius-small);
-  padding: 0 var(--ax-spacing-1);
+  padding: 0 var(--ax-space-4);
   min-width: 1.125rem;
   height: 1.125rem;
   line-height: 1;
@@ -167,7 +167,7 @@
 
 .navds-action-menu__divider {
   height: 1px;
-  margin-block: var(--ax-spacing-2);
+  margin-block: var(--ax-space-8);
   background-color: var(--ax-border-subtleA);
 }
 

@navikt/core/css/darkside/alert.darkside.css

@@ -1,9 +1,9 @@
 .navds-alert {
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid;
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   display: flex;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
   align-items: center;
 
   @media (forced-colors: active) {
@@ -25,8 +25,8 @@
 }
 
 .navds-alert--small {
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
-  gap: var(--ax-spacing-2);
+  padding: var(--ax-space-12) var(--ax-space-16);
+  gap: var(--ax-space-8);
 
   > .navds-alert__icon {
     margin-block-start: 0;
@@ -94,22 +94,22 @@
 
 .navds-alert--close-button {
   > .navds-alert__wrapper {
-    margin-block-start: var(--ax-spacing-05);
+    margin-block-start: var(--ax-space-2);
   }
 
   > .navds-alert__icon {
-    margin-block-start: var(--ax-spacing-05);
+    margin-block-start: var(--ax-space-2);
   }
 
   &.navds-alert--small {
     align-items: flex-start;
 
     > .navds-alert__wrapper {
-      margin-block-start: var(--ax-spacing-1);
+      margin-block-start: var(--ax-space-4);
     }
 
     > .navds-alert__icon {
-      margin-block-start: var(--ax-spacing-1);
+      margin-block-start: var(--ax-space-4);
     }
   }
 }

@navikt/core/css/darkside/baseline/baseline.darkside.css

@@ -1,3 +1,12 @@
+/* ------------------------- Global typo-definitions ------------------------ */
+body,
+:host {
+  font-family: var(--ax-font-family, "Source Sans 3", "Source Sans Pro", Arial, sans-serif);
+  line-height: 1.333;
+  font-size: 1.125rem;
+}
+
+/* ---------------------------- Inline utilities ---------------------------- */
 [hidden] {
   display: none !important;
 }

@navikt/core/css/darkside/baseline/tokens.darkside.css

@@ -0,0 +1 @@
+@import "../../../tokens/dist/darkside/tokens.css";

@navikt/core/css/darkside/button.darkside.css

@@ -4,7 +4,7 @@
   --__axc-button-border-color: transparent;
   --__axc-button-border-width: 2px;
 
-  padding: var(--ax-spacing-3) var(--ax-spacing-5);
+  padding: var(--ax-space-12) var(--ax-space-20);
   border-radius: var(--ax-border-radius-medium);
   display: inline-flex;
   cursor: pointer;
@@ -13,7 +13,7 @@
   background: none;
   align-items: center;
   justify-content: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);
 
   &:focus-visible {
@@ -29,25 +29,25 @@
 }
 
 .navds-button--small {
-  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  padding: var(--ax-space-4) var(--ax-space-12);
   min-height: 2rem;
   min-width: 2rem;
 }
 
 .navds-button--xsmall {
-  padding: var(--ax-spacing-05) var(--ax-spacing-2);
-  gap: var(--ax-spacing-1);
+  padding: var(--ax-space-2) var(--ax-space-8);
+  gap: var(--ax-space-4);
 }
 
 .navds-button--icon-only {
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-space-12);
 
   &.navds-button--small {
-    padding: var(--ax-spacing-1);
+    padding: var(--ax-space-4);
   }
 
   &.navds-button--xsmall {
-    padding: var(--ax-spacing-05);
+    padding: var(--ax-space-2);
   }
 }
 
@@ -69,7 +69,7 @@
     margin-right: var(--__axc-button-icon-margin);
   }
 
-  &:only-child {
+  .navds-button--icon-only & {
     margin: 0;
   }
 }
@@ -109,19 +109,19 @@
  * .navds-button--primary-neutral *
  *************************/
 .navds-button--primary-neutral {
-  background-color: var(--ax-bg-neutral-strong);
-  color: var(--ax-text-neutral-contrast);
+  background-color: var(--ax-bg-strong);
+  color: var(--ax-text-contrast);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-strong-hover);
+    background-color: var(--ax-bg-strong-hover);
   }
 
   &:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
+    background-color: var(--ax-bg-strong-pressed);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
   }
 }
 
@@ -138,7 +138,6 @@
     --__axc-button-border-color: var(--ax-border-accent-strong);
 
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-accent-strong);
   }
 
   &:active {
@@ -168,18 +167,18 @@
   &:hover {
     --__axc-button-border-color: var(--ax-border-strong);
 
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:active {
     --__axc-button-border-color: transparent;
 
-    color: var(--ax-text-neutral-contrast);
-    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-strong-pressed);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-neutral);
+    --__axc-button-border-color: var(--ax-border-default);
 
     color: var(--ax-text-default);
     background-color: transparent;
@@ -195,7 +194,6 @@
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-accent-strong);
   }
 
   &:active {
@@ -217,12 +215,12 @@
   color: var(--ax-text-default);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 
   &:is(:disabled, .navds-button--disabled) {
@@ -260,10 +258,14 @@
 }
 
 .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 }
 
 /* Loader overrides */
+.navds-button .navds-loader {
+  position: absolute;
+}
+
 .navds-button .navds-loader .navds-loader__foreground {
   stroke: currentColor;
 }
@@ -273,6 +275,10 @@
   stroke: rgb(255 255 255 / 0.3);
 }
 
+.navds-button--loading > :not(.navds-loader) {
+  visibility: hidden;
+}
+
 @media (forced-colors: active) {
   .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
     opacity: 1;

@navikt/core/css/darkside/chat.darkside.css

@@ -1,7 +1,7 @@
 .navds-chat {
   display: flex;
   align-items: flex-end;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
   max-width: 40.75rem;
 }
 
@@ -50,23 +50,23 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
 }
 
 .navds-chat__bubble {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   width: fit-content;
   background-color: var(--ax-bg-raised);
   display: flex;
   flex-direction: column;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   border-radius: var(--ax-border-radius-xlarge);
   border-bottom-left-radius: var(--ax-border-radius-small);
   border: 1px solid var(--ax-border-subtleA);
 }
 
 .navds-chat--small .navds-chat__bubble {
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
 }
 
 /* -------------------------- Chat bubble variants -------------------------- */
@@ -80,7 +80,7 @@
 .navds-chat--neutral {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-neutral-raised);
+    background-color: var(--ax-bg-raised);
   }
 }
 
@@ -88,7 +88,7 @@
 .navds-chat__top-text {
   color: var(--ax-text-default);
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   align-items: baseline;
   font-weight: normal;
   margin: 0;

@navikt/core/css/darkside/chips.darkside.css

@@ -1,6 +1,6 @@
 .navds-chips {
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -20,9 +20,9 @@
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: var(--ax-spacing-05);
+  gap: var(--ax-space-2);
   margin: 0;
-  padding: 0 var(--ax-spacing-3);
+  padding: 0 var(--ax-space-12);
   text-decoration: none;
   border-radius: var(--ax-border-radius-full);
   min-height: 2rem;
@@ -35,14 +35,14 @@
 
 .navds-chips--readonly {
   .navds-chips__chip {
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
   }
 }
 
 .navds-chips--small {
   .navds-chips__chip {
     min-height: 1.5rem;
-    padding: 0 var(--ax-spacing-2);
+    padding: 0 var(--ax-space-8);
   }
 
   .navds-chips__toggle-icon {
@@ -51,7 +51,7 @@
   }
 
   .navds-chips__toggle--with-checkmark {
-    padding-left: var(--ax-spacing-1);
+    padding-left: var(--ax-space-4);
   }
 
   .navds-chips__removable-icon {
@@ -64,7 +64,7 @@
   }
 
   .navds-chips--icon-right {
-    padding-right: var(--ax-spacing-05);
+    padding-right: var(--ax-space-2);
   }
 }
 
@@ -90,27 +90,27 @@
 }
 
 .navds-chips__toggle--neutral {
-  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
-  background-color: var(--ax-bg-neutral-moderate);
+  box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
+  background-color: var(--ax-bg-moderate);
   color: var(--ax-text-default);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hover);
+    background-color: var(--ax-bg-moderate-hover);
   }
 
   &[data-pressed="true"] {
     box-shadow: none;
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
 
     &:hover {
-      background-color: var(--ax-bg-neutral-strong-hover);
+      background-color: var(--ax-bg-strong-hover);
     }
   }
 }
 
 .navds-chips--medium .navds-chips__toggle--with-checkmark {
-  padding-left: var(--ax-spacing-1-alt);
+  padding-left: var(--ax-space-6);
 }
 
 /* -------------------------- start old CSS --------------------------  */
@@ -130,11 +130,11 @@
 }
 
 .navds-chips__removable--neutral {
-  background: var(--ax-bg-neutral-strong-pressed);
-  color: var(--ax-text-neutral-contrast);
+  background: var(--ax-bg-strong-pressed);
+  color: var(--ax-text-contrast);
 
   &:hover {
-    background: var(--ax-bg-neutral-strong-hover);
+    background: var(--ax-bg-strong-hover);
   }
 }
 
@@ -148,11 +148,11 @@
 }
 
 .navds-chips--icon-left {
-  padding-left: var(--ax-spacing-1-alt);
+  padding-left: var(--ax-space-6);
 }
 
 .navds-chips--icon-right {
-  padding-right: var(--ax-spacing-1-alt);
+  padding-right: var(--ax-space-6);
 }
 
 @media (forced-colors: active) {

@navikt/core/css/darkside/copybutton.darkside.css

@@ -1,5 +1,5 @@
 .navds-copybutton {
-  --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-5) var(--ax-spacing-3) var(--ax-spacing-4);
+  --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-20) var(--ax-space-12) var(--ax-space-16);
 
   cursor: pointer;
   margin: 0;
@@ -13,15 +13,15 @@
   transition: color 0.2s cubic-bezier(0.05, 0.7, 0.1, 1);
 
   &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-3);
+    --__axc-copybutton-padding: var(--ax-space-12);
   }
 
   &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-5);
+    --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-12) var(--ax-space-20);
   }
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:focus-visible {
@@ -31,7 +31,7 @@
 
   &:disabled {
     cursor: not-allowed;
-    opacity: 0.3;
+    opacity: var(--ax-opacity-disabled);
   }
 
   &:disabled:hover {
@@ -57,14 +57,14 @@
   min-height: 2rem;
   min-width: 2rem;
 
-  --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-3) var(--ax-spacing-1) var(--ax-spacing-2);
+  --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-12) var(--ax-space-4) var(--ax-space-8);
 
   &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-2) var(--ax-spacing-1) var(--ax-spacing-3);
+    --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-8) var(--ax-space-4) var(--ax-space-12);
   }
 
   &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-1);
+    --__axc-copybutton-padding: var(--ax-space-4);
   }
 
   & .navds-copybutton__icon {
@@ -72,7 +72,7 @@
   }
 
   & > .navds-copybutton__content {
-    gap: var(--ax-spacing-1-alt);
+    gap: var(--ax-space-6);
   }
 }
 
@@ -81,14 +81,14 @@
   min-height: 1.5rem;
   min-width: 1.5rem;
 
-  --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-2) var(--ax-spacing-05) var(--ax-spacing-1);
+  --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-8) var(--ax-space-2) var(--ax-space-4);
 
   &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-1) var(--ax-spacing-05) var(--ax-spacing-2);
+    --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-4) var(--ax-space-2) var(--ax-space-8);
   }
 
   &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-05);
+    --__axc-copybutton-padding: var(--ax-space-2);
   }
 
   & .navds-copybutton__icon {
@@ -96,7 +96,7 @@
   }
 
   & > .navds-copybutton__content {
-    gap: var(--ax-spacing-1);
+    gap: var(--ax-space-4);
   }
 }
 
@@ -179,5 +179,5 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }

@navikt/core/css/darkside/date.darkside.css

@@ -1,10 +1,10 @@
 .navds-date {
-  padding: var(--ax-spacing-4) var(--ax-spacing-3);
+  padding: var(--ax-space-16) var(--ax-space-12);
 
   .rdp-day_range_middle {
     &.rdp-day_disabled {
       color: var(--ax-text-default);
-      background: var(--ax-bg-neutral-moderateA);
+      background: var(--ax-bg-moderateA);
     }
 
     &.rdp-day_selected {
@@ -17,7 +17,7 @@
   .rdp-month,
   &.rdp-month {
     display: grid;
-    gap: var(--ax-spacing-5);
+    gap: var(--ax-space-20);
   }
 
   .navds-date__caption-label {
@@ -69,7 +69,7 @@
   .rdp-day_disabled {
     cursor: not-allowed;
     text-decoration: line-through;
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
     color: var(--ax-text-subtle);
   }
 
@@ -121,8 +121,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--ax-spacing-1);
-  padding-inline: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
+  padding-inline: var(--ax-space-4);
 }
 
 .navds-date__caption-button {
@@ -172,11 +172,11 @@
 
 .navds-date__field-input {
   &.navds-text-field__input {
-    padding-right: var(--ax-spacing-12);
+    padding-right: var(--ax-space-48);
   }
 
   .navds-form-field--small & {
-    padding-right: var(--ax-spacing-8);
+    padding-right: var(--ax-space-32);
   }
 }
 
@@ -193,7 +193,7 @@
   border: none;
   background: none;
   border-radius: calc(var(--ax-border-radius-medium) - 1px);
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-space-12);
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
@@ -202,7 +202,7 @@
   border-end-start-radius: 0;
 
   .navds-form-field--small & {
-    padding: var(--ax-spacing-1);
+    padding: var(--ax-space-4);
   }
 
   .navds-form-field--disabled & {
@@ -230,7 +230,7 @@
 .navds-date__week-row {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-05);
+  gap: var(--ax-space-2);
 }
 
 .navds-date__weeknumber {
@@ -242,7 +242,7 @@
   color: var(--ax-text-subtle);
 
   .navds-date__weeknumber:active & {
-    color: var(--ax-text-neutral-contrast);
+    color: var(--ax-text-contrast);
   }
 }
 
@@ -258,21 +258,21 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  padding: var(--ax-spacing-4);
-  gap: var(--ax-spacing-2);
+  padding: var(--ax-space-16);
+  gap: var(--ax-space-8);
 }
 
 @media (min-width: 480px) {
   .navds-date {
-    padding: var(--ax-spacing-5) var(--ax-spacing-4);
+    padding: var(--ax-space-20) var(--ax-space-16);
   }
 
   .navds-date__modal-body {
-    padding: var(--ax-spacing-6);
+    padding: var(--ax-space-24);
   }
 
   .navds-date__caption {
-    gap: var(--ax-spacing-2);
+    gap: var(--ax-space-8);
   }
 
   .navds-date .rdp-button,

@navikt/core/css/darkside/dropdown.darkside.css

@@ -74,7 +74,7 @@
 
 .navds-dropdown__item:disabled {
   color: var(--ac-dropdown-item-text, var(--a-text-action));
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
   background: transparent;
   cursor: not-allowed;
 }

@navikt/core/css/darkside/expansioncard.darkside.css

@@ -1,7 +1,7 @@
 .navds-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
-  --__axc-expansioncard-padding-block: var(--ax-spacing-4);
-  --__axc-expansioncard-padding-inline: var(--ax-spacing-5);
+  --__axc-expansioncard-padding-block: var(--ax-space-16);
+  --__axc-expansioncard-padding-inline: var(--ax-space-20);
 
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
@@ -16,11 +16,11 @@
 
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
-  --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
-  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
+  --__axc-expansioncard-padding-inline: var(--ax-space-16);
+  --__axc-expansioncard-padding-block: var(--ax-space-12);
 
   & > .navds-expansioncard__header .navds-expansioncard__title--small {
-    margin-top: var(--ax-spacing-05);
+    margin-top: var(--ax-space-2);
   }
 
   & :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
@@ -37,7 +37,7 @@
 .navds-expansioncard__header {
   width: 100%;
   display: flex;
-  gap: var(--ax-spacing-4);
+  gap: var(--ax-space-16);
   padding: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
   border-radius: var(--__axc-expansioncard-border-radius);
   background-color: transparent;
@@ -45,7 +45,7 @@
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--ax-bg-neutral-raised-hover);
+    background-color: var(--ax-bg-hover);
   }
 
   &[data-open="true"] {
@@ -76,11 +76,11 @@
 }
 
 .navds-expansioncard__title--medium {
-  margin-top: var(--ax-spacing-2);
+  margin-top: var(--ax-space-8);
 }
 
 .navds-expansioncard__title--large {
-  margin-top: var(--ax-spacing-1);
+  margin-top: var(--ax-space-4);
 }
 
 /* ----------------------- ExpansionCard Header Button ---------------------- */
@@ -122,7 +122,7 @@
 }
 
 .navds-expansioncard__header:hover > .navds-expansioncard__header-button {
-  background-color: var(--ax-bg-neutral-moderate-hoverA);
+  background-color: var(--ax-bg-moderate-hoverA);
 }
 
 .navds-expansioncard__header-chevron {

@navikt/core/css/darkside/form/combobox.darkside.css

@@ -1,8 +1,8 @@
 .navds-combobox__wrapper {
   --__axc-combobox-icon-size: 1.5rem;
-  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-2);
-  --__axc-combobox-list-item-padding-block: var(--ax-spacing-3);
-  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-3);
+  --__axc-combobox-wrapper-inner-padding: var(--ax-space-8);
+  --__axc-combobox-list-item-padding-block: var(--ax-space-12);
+  --__axc-combobox-list-item-padding-inline: var(--ax-space-12);
   --__axc-combobox-border-width: 1px;
   --__axc-combobox-input-height: 2rem;
 
@@ -21,14 +21,14 @@
 
 .navds-form-field--small .navds-combobox__wrapper {
   --__axc-combobox-icon-size: 1.25rem;
-  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-1);
-  --__axc-combobox-list-item-padding-block: var(--ax-spacing-1-alt);
-  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-2);
+  --__axc-combobox-wrapper-inner-padding: var(--ax-space-4);
+  --__axc-combobox-list-item-padding-block: var(--ax-space-6);
+  --__axc-combobox-list-item-padding-inline: var(--ax-space-8);
   --__axc-combobox-input-height: 1.5rem;
 }
 
 .navds-combobox--disabled {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 
   & .navds-combobox__wrapper {
     & *:hover {
@@ -50,12 +50,12 @@
 
   & .navds-combobox__selected-options {
     & .navds-chips__chip {
-      background-color: var(--ax-bg-neutral-moderateA);
+      background-color: var(--ax-bg-moderateA);
     }
   }
 
   & .navds-combobox__button-toggle-list {
-    color: var(--ax-bg-neutral-moderate);
+    color: var(--ax-bg-moderate);
   }
 
   & .navds-combobox__wrapper {
@@ -65,11 +65,10 @@
 
   & .navds-text-field__input,
   & .navds-combobox__input {
-    background-color: var(--ax-bg-neutral-moderate);
+    background-color: var(--ax-bg-moderate);
   }
 }
 
-.navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
   width: var(--__axc-combobox-icon-size);
@@ -176,7 +175,7 @@
   }
 
   .navds-combobox__selected-options > li:only-child > & {
-    margin-left: var(--ax-spacing-1);
+    margin-left: var(--ax-space-4);
   }
 }
 
@@ -203,19 +202,6 @@
   }
 }
 
-.navds-combobox__button-clear {
-  border-radius: var(--ax-border-radius-medium);
-  color: var(--ax-text-subtle);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  padding: 0;
-}
-
 .navds-combobox__input::-webkit-search-cancel-button {
   display: none;
 }
@@ -231,10 +217,7 @@
   border: none;
   font-size: 1rem;
   padding: 0;
-}
 
-.navds-combobox__button-clear,
-.navds-combobox__button-toggle-list {
   &:hover {
     color: var(--ax-text-accent);
 
@@ -253,7 +236,7 @@
   left: 0;
   right: 0;
   z-index: 10;
-  top: calc(100% + var(--ax-spacing-2));
+  top: calc(100% + var(--ax-space-8));
   border: 1px solid var(--ax-border-subtleA);
   display: flex;
   flex-direction: column;
@@ -284,8 +267,8 @@
   padding-inline: var(--__axc-combobox-list-item-padding-inline);
   border-radius: var(--ax-border-radius-medium);
   border: 0;
-  margin-inline: var(--ax-spacing-2);
-  margin-block: var(--ax-spacing-1);
+  margin-inline: var(--ax-space-8);
+  margin-block: var(--ax-space-4);
   scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
@@ -299,11 +282,11 @@
 }
 
 .navds-combobox__list-item--max-selected {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   margin: 0;
   border-radius: 0;
-  border-bottom: 1px solid var(--ax-border-neutral-subtle);
-  padding-block: var(--ax-spacing-2);
+  border-bottom: 1px solid var(--ax-border-subtle);
+  padding-block: var(--ax-space-8);
   line-height: var(--ax-font-line-height-large);
 }
 
@@ -318,7 +301,7 @@
   background-color: inherit;
   align-items: stretch;
   padding: 0;
-  padding-block: var(--ax-spacing-1);
+  padding-block: var(--ax-space-4);
 }
 
 .navds-combobox__list-item--focus {
@@ -361,8 +344,8 @@
   justify-content: flex-start;
   gap: 0.25rem;
   margin: 0;
-  margin-block: calc(var(--ax-spacing-1) * -1);
-  padding-block: var(--ax-spacing-4);
+  margin-block: calc(var(--ax-space-4) * -1);
+  padding-block: var(--ax-space-16);
 
   & svg {
     color: var(--ax-text-default);
@@ -400,15 +383,11 @@
   }
 
   .navds-combobox__selected-options {
-    gap: var(--ax-spacing-1);
+    gap: var(--ax-space-4);
   }
 }
 
 @media (forced-colors: active) {
-  .navds-combobox__button-clear:hover {
-    color: highlight;
-  }
-
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
     outline-color: highlight;
   }

@navikt/core/css/darkside/form/error-summary.darkside.css

@@ -1,6 +1,6 @@
 .navds-error-summary {
   background-color: var(--ax-bg-default);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-border-radius-xlarge);
   outline-offset: 2px;
@@ -18,21 +18,21 @@
 }
 
 .navds-error-summary--small {
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
 
   & .navds-error-summary__heading {
-    scroll-margin-top: var(--ax-spacing-4);
+    scroll-margin-top: var(--ax-space-16);
   }
 
   & > .navds-error-summary__list {
-    margin: var(--ax-spacing-2) 0;
-    gap: var(--ax-spacing-2);
-    padding-left: var(--ax-spacing-5);
+    margin: var(--ax-space-8) 0;
+    gap: var(--ax-space-8);
+    padding-left: var(--ax-space-20);
   }
 }
 
 .navds-error-summary__heading {
-  scroll-margin-top: var(--ax-spacing-6);
+  scroll-margin-top: var(--ax-space-24);
 
   &:focus {
     outline: none;
@@ -40,10 +40,10 @@
 }
 
 .navds-error-summary__list {
-  margin: var(--ax-spacing-3) 0;
+  margin: var(--ax-space-12) 0;
   display: flex;
   flex-direction: column;
-  gap: var(--ax-spacing-3);
-  padding-left: var(--ax-spacing-6);
+  gap: var(--ax-space-12);
+  padding-left: var(--ax-space-24);
   list-style: inherit;
 }

@navikt/core/css/darkside/form/fieldset.darkside.css

@@ -6,7 +6,7 @@
 }
 
 .navds-fieldset > :not(:first-child, :empty) {
-  margin-top: var(--ax-spacing-2);
+  margin-top: var(--ax-space-8);
 }
 
 .navds-fieldset__description {
@@ -32,7 +32,7 @@
 
 .navds-fieldset:disabled > .navds-fieldset__legend,
 .navds-fieldset:disabled > .navds-fieldset__description {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 }
 
 @media (forced-colors: active) {

@navikt/core/css/darkside/form/file-upload.darkside.css

@@ -1,7 +1,7 @@
 /* --------------------------- FileUpload Dropzone -------------------------- */
 .navds-dropzone__area {
   --__axc-dropzone-background: var(--ax-bg-input);
-  --__axc-dropzone-icon-padding: var(--ax-spacing-2);
+  --__axc-dropzone-icon-padding: var(--ax-space-8);
   --__axc-dropzone-animation-length-long: 400ms;
   --__axc-dropzone-animation-length-short: 250ms;
   --__axc-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
@@ -12,9 +12,9 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--ax-spacing-4);
+  gap: var(--ax-space-16);
   text-align: center;
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   border: 1px dashed var(--ax-border-default);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--__axc-dropzone-background);
@@ -94,7 +94,7 @@
 }
 
 .navds-dropzone__area-release {
-  top: var(--ax-spacing-4);
+  top: var(--ax-space-16);
   display: grid;
   position: absolute;
   z-index: 1;
@@ -108,7 +108,7 @@
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   border-radius: var(--ax-border-radius-full);
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   transition:
     background-color 300ms var(--__axc-dropzone-animation-ease-out),
     font-size 300ms var(--__axc-dropzone-animation-ease-out);
@@ -140,7 +140,7 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 /* ----------------------------- FileUpload Item ---------------------------- */
@@ -158,9 +158,9 @@ li.navds-file-item {
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
   border-radius: var(--ax-border-radius-xlarge);
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
   display: flex;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
   align-items: flex-start;
 }
 
@@ -169,12 +169,12 @@ li.navds-file-item {
 }
 
 .navds-file-item__icon {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   color: var(--ax-text-default);
   border-radius: var(--ax-border-radius-full);
   min-height: 2.5rem;
   min-width: 2.5rem;
-  margin-top: var(--ax-spacing-05);
+  margin-top: var(--ax-space-2);
   display: grid;
   place-content: center;
   transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
@@ -208,14 +208,14 @@ li.navds-file-item {
 
   & .navds-file-item__error {
     grid-template-rows: 1fr;
-    padding-top: var(--ax-spacing-1);
+    padding-top: var(--ax-space-4);
   }
 }
 
 .navds-file-item__error-content {
   min-height: 0;
   display: flex;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
 
   & > svg {
     flex-shrink: 0;

@navikt/core/css/darkside/form/form-progress.darkside.css

@@ -1,5 +1,5 @@
 .navds-form-progress__bar {
-  margin-bottom: var(--ax-spacing-2);
+  margin-bottom: var(--ax-space-8);
 }
 
 .navds-form-progress__button {
@@ -51,7 +51,7 @@
 .navds-form-progress__stepper {
   border: 1px solid var(--ax-border-subtle);
   border-radius: var(--ax-border-radius-large);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
-  margin-top: var(--ax-spacing-1);
+  padding: var(--ax-space-16) var(--ax-space-20);
+  margin-top: var(--ax-space-4);
   background: var(--ax-bg-raised);
 }

@navikt/core/css/darkside/form/form-summary.darkside.css

@@ -1,28 +1,28 @@
 .navds-form-summary {
   overflow: hidden;
-  border: 1px solid var(--ax-border-neutral-subtleA);
+  border: 1px solid var(--ax-border-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
   background: var(--ax-bg-raised);
 }
 
 .navds-form-summary__header {
-  background: var(--ax-bg-neutral-moderateA);
-  padding: var(--ax-spacing-4) var(--ax-spacing-6);
+  background: var(--ax-bg-moderateA);
+  padding: var(--ax-space-16) var(--ax-space-24);
   display: flex;
   justify-content: space-between;
-  gap: 0 var(--ax-spacing-3);
+  gap: 0 var(--ax-space-12);
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__header {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
     flex-direction: column;
   }
 }
 
 .navds-form-summary__edit {
   flex-shrink: 0;
-  margin-top: var(--ax-spacing-1);
+  margin-top: var(--ax-space-4);
   align-self: flex-start;
 }
 
@@ -31,24 +31,24 @@
 }
 
 .navds-form-summary__answers {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   margin: 0;
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__answers {
-    padding: var(--ax-spacing-4);
+    padding: var(--ax-space-16);
   }
 }
 
 .navds-form-summary__answer:not(:last-child) {
-  margin-bottom: var(--ax-spacing-4);
-  padding-bottom: var(--ax-spacing-4);
+  margin-bottom: var(--ax-space-16);
+  padding-bottom: var(--ax-space-16);
   border-bottom: 1px solid var(--ax-border-subtleA);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer) {
-  padding-bottom: var(--ax-spacing-6);
+  padding-bottom: var(--ax-space-24);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
@@ -57,22 +57,22 @@
 
 @media (max-width: 479px) {
   .navds-form-summary__answer:not(:last-child) {
-    margin-bottom: var(--ax-spacing-3);
-    padding-bottom: var(--ax-spacing-3);
+    margin-bottom: var(--ax-space-12);
+    padding-bottom: var(--ax-space-12);
   }
 
   .navds-form-summary__answer:has(.navds-form-summary__answer) {
-    padding-bottom: var(--ax-spacing-5);
+    padding-bottom: var(--ax-space-20);
   }
 }
 
 .navds-form-summary__value:first-of-type {
-  margin-top: var(--ax-spacing-1);
+  margin-top: var(--ax-space-4);
 }
 
 .navds-form-summary__value .navds-form-summary__answers {
-  margin-top: var(--ax-spacing-2);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  margin-top: var(--ax-space-8);
+  padding: var(--ax-space-16) var(--ax-space-20);
   background: var(--ax-bg-info-moderateA);
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-info-subtleA);

@navikt/core/css/darkside/form/form.darkside.css

@@ -1,7 +1,7 @@
 .navds-form-field {
   display: grid;
   justify-items: start;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-form-field__description {
@@ -9,21 +9,8 @@
   color: var(--ax-text-subtle);
 }
 
-.navds-form-field .navds-error-message,
-.navds-fieldset .navds-error-message,
-.navds-file-item .navds-error-message {
-  display: flex;
-  gap: var(--ax-spacing-2);
-}
-
-.navds-form-field .navds-error-message::before,
-.navds-fieldset .navds-error-message::before,
-.navds-file-item .navds-error-message::before {
-  content: "•";
-}
-
 .navds-form-field--disabled {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
   cursor: not-allowed;
 }
 
@@ -40,8 +27,8 @@
 }
 
 .navds-form-field__readonly-icon {
-  margin-top: var(--ax-spacing-05);
-  margin-right: var(--ax-spacing-2);
+  margin-top: var(--ax-space-2);
+  margin-right: var(--ax-space-4);
   flex-shrink: 0;
   align-self: flex-start;
 }

@navikt/core/css/darkside/form/radio-checkbox.darkside.css

@@ -18,12 +18,12 @@
 
 .navds-checkbox__label,
 .navds-radio__label {
-  padding: var(--ax-spacing-3) 0;
+  padding: var(--ax-space-12) 0;
   cursor: pointer;
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 
-  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-moderate);
   --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
 }
 
@@ -59,7 +59,7 @@
 
 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: var(--ax-spacing-1-alt) 0;
+  padding: var(--ax-space-6) 0;
 }
 
 .navds-checkbox--small > .navds-checkbox__label::before,
@@ -78,7 +78,7 @@
   content: "";
   position: absolute;
   top: 50%;
-  transform: translate(var(--ax-spacing-1-alt), -50%);
+  transform: translate(var(--ax-space-6), -50%);
   background-color: var(--ax-bg-default);
   width: 0.75rem;
   height: 0.25rem;
@@ -108,7 +108,7 @@
   color: var(--ax-bg-default);
   position: absolute;
   height: 1.5rem;
-  transform: translate(var(--ax-spacing-1-alt));
+  transform: translate(var(--ax-space-6));
   pointer-events: none;
 
   /* Fixed edcase where when using in shadow-dom, svg will not center */
@@ -172,7 +172,7 @@
 
 .navds-checkbox--disabled,
 .navds-radio--disabled {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 }
 
 .navds-checkbox--disabled > .navds-checkbox__input,
@@ -215,11 +215,11 @@
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  background-color: var(--ax-bg-neutral-strong);
+  background-color: var(--ax-bg-strong);
   border-width: 0;
   box-shadow:
     inset 0 0 0 2px var(--ax-border-subtle),
-    inset 0 0 0 8px var(--ax-bg-neutral-moderate);
+    inset 0 0 0 8px var(--ax-bg-moderate);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {

@navikt/core/css/darkside/form/search.darkside.css

@@ -33,7 +33,7 @@
 
 /* ------------------------------ Search input ------------------------------ */
 .navds-search__input {
-  padding-right: var(--ax-spacing-10);
+  padding-right: var(--ax-space-40);
 
   &:focus-visible {
     outline: none;
@@ -48,47 +48,47 @@
 }
 
 .navds-search__input--simple {
-  padding-left: var(--ax-spacing-10);
+  padding-left: var(--ax-space-40);
 }
 
 /* ------------------------------ Search sizing ----------------------------- */
 .navds-form-field--small {
   & .navds-search__input {
-    padding-right: var(--ax-spacing-7);
+    padding-right: var(--ax-space-28);
   }
 
   & .navds-search__input--simple {
-    padding-left: var(--ax-spacing-7);
+    padding-left: var(--ax-space-28);
   }
 
   & .navds-search__search-icon {
-    left: var(--ax-spacing-1);
+    left: var(--ax-space-4);
     font-size: 1.25rem;
   }
 
   & .navds-search__button-clear {
-    right: var(--ax-spacing-1);
+    right: var(--ax-space-4);
   }
 }
 
 /* ------------------------------- Search icon ------------------------------ */
 .navds-search__search-icon {
   position: absolute;
-  left: var(--ax-spacing-2);
+  left: var(--ax-space-8);
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
   font-size: 1.5rem;
 
   .navds-search--disabled & {
-    opacity: 0.3;
+    opacity: var(--ax-opacity-disabled);
   }
 }
 
 /* --------------------------- Search Clear-button -------------------------- */
 .navds-search__button-clear {
   position: absolute;
-  right: var(--ax-spacing-2);
+  right: var(--ax-space-8);
   top: 50%;
   transform: translateY(-50%);
 }
@@ -105,6 +105,10 @@
   --__axc-button-border-width: 1px;
   --__axc-button-border-color: var(--ax-border-default);
 
+  &:not(:hover, :active) {
+    background-color: var(--ax-bg-input);
+  }
+
   &:hover:not(:disabled) {
     --__axc-button-border-color: var(--ax-border-accent-strong);
   }
@@ -144,7 +148,7 @@
 /* We can't re-use disabled-state for form-fields since opacity multiplies on search-button */
 .navds-search--disabled {
   .navds-search__input {
-    opacity: 0.3;
+    opacity: var(--ax-opacity-disabled);
     cursor: not-allowed;
   }
 }

@navikt/core/css/darkside/form/select.darkside.css

@@ -9,8 +9,8 @@
   min-height: 3rem;
   display: inline-block;
   position: relative;
-  padding: var(--ax-spacing-2);
-  padding-right: var(--ax-spacing-10);
+  padding: var(--ax-space-8);
+  padding-right: var(--ax-space-40);
 
   &:hover {
     border-color: var(--ax-border-accent-strong);
@@ -43,7 +43,7 @@
 .navds-select__chevron {
   position: absolute;
   font-size: 1.5rem;
-  right: var(--ax-spacing-2);
+  right: var(--ax-space-8);
   pointer-events: none;
   align-self: center;
   color: var(--ax-text-default);
@@ -102,8 +102,8 @@
 /* ----------------------------- Select Readonly ---------------------------- */
 .navds-select--readonly {
   & .navds-select__input {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
 
     @media (forced-colors: active) {

@navikt/core/css/darkside/form/switch.darkside.css

@@ -41,11 +41,11 @@
   }
 
   .navds-switch--small & {
-    padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0 calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem;
+    padding: calc(var(--ax-space-8) - var(--ax-space-2)) 0 calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem;
   }
 
   .navds-switch--right.navds-switch--small & {
-    padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0;
+    padding: calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem calc(var(--ax-space-8) - var(--ax-space-2)) 0;
   }
 }
 
@@ -68,7 +68,7 @@
   height: 1.5rem;
   background-color: var(--ax-bg-input);
   position: absolute;
-  top: var(--ax-spacing-3);
+  top: var(--ax-space-12);
   left: 0;
   border-radius: var(--ax-border-radius-full);
   border: 2px solid var(--ax-border-default);
@@ -77,7 +77,7 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
   .navds-switch--small > & {
-    top: var(--ax-spacing-1);
+    top: var(--ax-space-4);
   }
 
   .navds-switch__input:checked ~ & {
@@ -108,7 +108,7 @@
 
 /* ------------------------------ Switch Thumb ------------------------------ */
 .navds-switch__thumb {
-  background-color: var(--ax-bg-neutral-strong);
+  background-color: var(--ax-bg-strong);
   border-radius: var(--ax-border-radius-full);
   width: 1.125rem;
   height: 1.125rem;
@@ -169,7 +169,7 @@
 }
 
 .navds-switch--disabled:not(.navds-switch--loading) {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 }
 
 .navds-switch__input:disabled,
@@ -183,8 +183,8 @@
   & > .navds-switch__input:hover ~ .navds-switch__track,
   & > .navds-switch__input:checked ~ .navds-switch__track,
   & > .navds-switch__input:checked:hover ~ .navds-switch__track {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
   }
 
   & > .navds-switch__label-wrapper,
@@ -202,12 +202,12 @@
   }
 
   & .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
   }
 
   & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
   }
 
   @media (hover: hover) and (pointer: fine) {

@navikt/core/css/darkside/form/text-field.darkside.css

@@ -1,6 +1,6 @@
 .navds-text-field__input {
   appearance: none;
-  padding: var(--ax-spacing-2);
+  padding: var(--ax-space-8);
   background: var(--ax-bg-input);
   border-radius: var(--ax-border-radius-medium);
   border: 1px solid var(--ax-border-default);
@@ -25,7 +25,7 @@
   }
 
   &::placeholder {
-    color: var(--ax-text-neutral);
+    color: var(--ax-text-subtle);
   }
 
   &[size] {
@@ -34,7 +34,7 @@
 }
 
 .navds-form-field--small .navds-text-field__input {
-  padding: 0 var(--ax-spacing-2);
+  padding: 0 var(--ax-space-8);
   min-height: 2rem;
 }
 
@@ -44,8 +44,8 @@
 }
 
 .navds-text-field--readonly .navds-text-field__input {
-  background-color: var(--ax-bg-neutral-moderate);
-  border-color: var(--ax-border-neutral-subtleA);
+  background-color: var(--ax-bg-moderate);
+  border-color: var(--ax-border-subtleA);
   cursor: default;
 }
 

@navikt/core/css/darkside/form/textarea.darkside.css

@@ -2,7 +2,7 @@
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   height: var(--__axc-textarea-height);
   appearance: none;
-  padding: var(--ax-spacing-2);
+  padding: var(--ax-space-8);
   background-color: var(--ax-bg-input);
   border-radius: var(--ax-border-radius-medium);
   border: 1px solid var(--ax-border-default);
@@ -32,12 +32,12 @@
   }
 
   .navds-form-field--small & {
-    padding: var(--ax-spacing-1-alt);
+    padding: var(--ax-space-6);
   }
 
   .navds-textarea--readonly & {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 }

@navikt/core/css/darkside/guide-panel.darkside.css

@@ -1,20 +1,41 @@
 .navds-guide-panel {
-  --__ac-guide-panel-guide-size: 4rem;
+  --__axc-guide-panel-guide-size: 3.75rem;
 
   position: relative;
-  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
+  display: flex;
+  width: fit-content;
+
+  &[data-poster="true"],
+  &[data-responsive="true"] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &[data-poster="false"] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  @media (min-width: 480px) {
+    & {
+      --__axc-guide-panel-guide-size: 5rem;
+    }
+
+    &[data-responsive="true"] {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+  }
 }
 
 .navds-guide {
-  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
-  border-radius: var(--a-border-radius-full);
+  box-sizing: border-box;
+  border: 2px solid var(--ax-border-info);
+  border-radius: var(--ax-border-radius-full);
   overflow: hidden;
-  position: absolute;
-  width: var(--__ac-guide-panel-guide-size);
-  height: var(--__ac-guide-panel-guide-size);
-  left: 50%;
-  transform: translate(-50%, -50%);
+  width: var(--__axc-guide-panel-guide-size);
+  height: var(--__axc-guide-panel-guide-size);
+  flex-shrink: 0;
 }
 
 .navds-guide svg,
@@ -24,73 +45,70 @@
 }
 
 .navds-guide-panel__content {
-  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-4);
-  padding-top: var(--a-spacing-12);
-}
+  background-color: var(--ax-bg-raised);
+  border: 2px solid var(--ax-border-info);
+  border-radius: var(--ax-border-radius-xlarge);
+  position: relative;
 
-@media (min-width: 480px) {
-  .navds-guide-panel {
-    --__ac-guide-panel-guide-size: 6.25rem;
+  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
+    margin-top: var(--ax-space-20);
   }
 
-  .navds-guide-panel__content {
-    padding: var(--a-spacing-8);
-    padding-top: 4.25rem;
+  .navds-guide-panel[data-poster="false"] > & {
+    margin-left: var(--ax-space-20);
+  }
+
+  @media (min-width: 480px) {
+    .navds-guide-panel[data-responsive="true"] > & {
+      margin-top: 0;
+      margin-left: var(--ax-space-20);
+    }
   }
 }
 
-/* not-poster */
+.navds-guide-panel__content-inner {
+  padding: var(--ax-space-12) var(--ax-space-16);
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--ax-bg-raised);
+  position: relative;
+  height: 100%;
 
-.navds-guide-panel--not-poster {
-  padding-top: 0;
-  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
-}
-
-.navds-guide-panel--not-poster .navds-guide {
-  left: 0;
-  top: var(--a-spacing-5);
-  transform: none;
-}
-
-.navds-guide-panel--not-poster .navds-guide-panel__content {
-  padding: var(--a-spacing-4);
-  padding-left: var(--a-spacing-10);
-  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
-}
-
-@media (min-width: 480px) {
-  .navds-guide-panel--not-poster {
-    --__ac-guide-panel-guide-size: 5rem;
+  .navds-guide-panel[data-poster="false"] & {
+    min-height: var(--__axc-guide-panel-guide-size);
   }
 
-  .navds-guide-panel--not-poster .navds-guide-panel__content {
-    padding: var(--a-spacing-6);
-    padding-left: var(--a-spacing-14);
+  @media (min-width: 480px) {
+    & {
+      padding: var(--ax-space-16) var(--ax-space-20);
+    }
+
+    .navds-guide-panel[data-responsive="true"] & {
+      min-height: var(--__axc-guide-panel-guide-size);
+    }
   }
 }
 
-/* responsive-poster (on desktop) */
+.navds-guide-panel__tail {
+  position: absolute;
+  z-index: 0;
 
-@media (min-width: 480px) {
-  .navds-guide-panel--responsive-poster {
-    --__ac-guide-panel-guide-size: 5rem;
-
-    padding-top: 0;
-    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
+    left: 50%;
+    top: calc(var(--ax-space-16) * -1 - 2px);
+    transform: translateX(-48%);
   }
 
-  .navds-guide-panel--responsive-poster .navds-guide {
-    left: 0;
-    top: var(--a-spacing-5);
-    transform: none;
+  .navds-guide-panel[data-poster="false"] & {
+    top: calc(var(--__axc-guide-panel-guide-size) / 2);
+    left: calc(var(--ax-space-20) * -1 - 2px);
+    transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
   }
 
-  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
-    padding: var(--a-spacing-6);
-    padding-left: var(--a-spacing-14);
-    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  @media (min-width: 480px) {
+    .navds-guide-panel[data-responsive="true"] & {
+      top: calc(var(--__axc-guide-panel-guide-size) / 2);
+      left: calc(var(--ax-space-20) * -1 - 2px);
+      transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
+    }
   }
 }

@navikt/core/css/darkside/help-text.darkside.css

@@ -9,7 +9,7 @@
   align-items: center;
   color: var(--ax-bg-accent-strong);
   font-size: 1.25rem;
-  padding: calc(var(--ax-spacing-1) / 2);
+  padding: calc(var(--ax-space-4) / 2);
 }
 
 .navds-help-text__icon {
@@ -18,7 +18,7 @@
 
 .navds-help-text__popover.navds-popover {
   background-color: var(--ax-bg-info-moderate);
-  max-width: min(65ch, calc(100vw - var(--ax-spacing-6)));
+  max-width: min(65ch, calc(100vw - var(--ax-space-24)));
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-info);
 }

@navikt/core/css/darkside/index copy.css

@@ -1,37 +0,0 @@
-@charset "UTF-8";
-
-@import "baseline/index.css";
-@import "typography.css";
-@import "accordion.css";
-@import "alert.css";
-@import "button.css";
-@import "chat.css";
-@import "chips.css";
-@import "copybutton.css";
-@import "dropdown.css";
-@import "action-menu.css";
-@import "expansioncard.css";
-@import "guide-panel.css";
-@import "form/index.css";
-@import "help-text.css";
-@import "internalheader.css";
-@import "link.css";
-@import "loader.css";
-@import "modal.css";
-@import "pagination.css";
-@import "popover.css";
-@import "date.css";
-@import "tag.css";
-@import "timeline.css";
-@import "tooltip.css";
-@import "toggle-group.css";
-@import "panel.css";
-@import "link-panel.css";
-@import "read-more.css";
-@import "progress-bar.css";
-@import "skeleton.css";
-@import "stepper.css";
-@import "table.css";
-@import "tabs.css";
-@import "list.css";
-@import "primitives/index.css";

@navikt/core/css/darkside/index.css

@@ -1,23 +1,23 @@
 @charset "UTF-8";
 
 /* CSS is ordered by specificity, so that browsers without layers fall backs to good defaults */
-@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.layout, aksel.utilities;
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components, aksel.layout;
 
 /* ----------------------------- CSS foundations ---------------------------- */
-@import "./baseline/reset.darkside.css" layer(aksel.reset);
-@import "./baseline/print.darkside.css" layer(aksel.reset);
 @import "./baseline/fonts.darkside.css" layer(aksel.typography);
-@import "./typography.darkside.css" layer(aksel.typography);
-
-/* --------------------------------- Theming -------------------------------- */
-@import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme);
-@import "./baseline/theme.darkside.css" layer(aksel.theme);
+@import "./baseline/reset.darkside.css" layer(aksel.reset);
+@import "./baseline/tokens.darkside.css" layer(aksel.theming);
+@import "./baseline/baseline.darkside.css" layer(aksel.baseline);
+@import "./baseline/print.darkside.css" layer(aksel.print);
 
 /* ------------------------------- Components ------------------------------- */
+@import "./typography.darkside.css" layer(aksel.components);
 @import "./button.darkside.css" layer(aksel.components);
 @import "./chips.darkside.css" layer(aksel.components);
 
 /**
+  * Most components depend on typo-styles, so we import them first.
+  *
   * `./form/index.css` edits the following components:
   * - Button
   * - Chips
@@ -53,9 +53,7 @@
 @import "./table.darkside.css" layer(aksel.components);
 @import "./tabs.darkside.css" layer(aksel.components);
 @import "./list.darkside.css" layer(aksel.components);
+@import "./theme.darkside.css" layer(aksel.components);
 
 /* --------------------------------- Layout --------------------------------- */
 @import "./primitives/index.css" layer(aksel.layout);
-
-/* --------------------------------- Utility -------------------------------- */
-@import "./baseline/utilities.darkside.css" layer(aksel.utilities);

@navikt/core/css/darkside/internalheader.darkside.css

@@ -23,7 +23,7 @@
   line-height: normal;
   text-align: left;
   padding-block: 0;
-  padding-inline: var(--ax-spacing-6) var(--ax-spacing-5);
+  padding-inline: var(--ax-space-24) var(--ax-space-20);
   border-right: 1px solid var(--ax-border-subtleA);
   display: flex;
   align-items: center;
@@ -36,7 +36,7 @@
   }
 
   &:hover {
-    background: var(--ax-bg-neutral-moderate-hover);
+    background: var(--ax-bg-moderate-hover);
   }
 
   &:is(:hover, :active):not(button, a) {
@@ -45,7 +45,7 @@
 }
 
 .navds-internalheader__user {
-  padding: 0 var(--ax-spacing-5);
+  padding: 0 var(--ax-space-20);
   border-left: 1px solid var(--ax-border-subtleA);
   display: flex;
   align-items: center;
@@ -54,7 +54,7 @@
 .navds-internalheader__button {
   border: none;
   margin: 0;
-  padding: 0 var(--ax-spacing-3);
+  padding: 0 var(--ax-space-12);
   overflow: visible;
   background: transparent;
   font: inherit;
@@ -64,12 +64,12 @@
   display: flex;
   align-items: center;
   justify-self: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   border-left: 1px solid var(--ax-border-subtleA);
   color: var(--ax-text-default);
 
   &:hover {
-    background: var(--ax-bg-neutral-moderate-hover);
+    background: var(--ax-bg-moderate-hover);
   }
 }
 
@@ -91,11 +91,11 @@
   }
 
   &:active {
-    background: var(--ax-bg-neutral-moderate-pressed);
+    background: var(--ax-bg-moderate-pressed);
   }
 }
 
 .navds-internalheader__user-button {
-  padding-left: var(--ax-spacing-5);
-  gap: var(--ax-spacing-4);
+  padding-left: var(--ax-space-20);
+  gap: var(--ax-space-16);
 }

@navikt/core/css/darkside/link.darkside.css

@@ -2,7 +2,7 @@
   color: var(--ax-text-accent);
   display: inline-flex;
   align-items: center;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-2);
   text-decoration: underline;
   text-underline-offset: 0.1em;
   text-decoration-thickness: 0.05em;
@@ -43,7 +43,7 @@
   }
 }
 
-.navds-alert,
+.navds-alert:not(.navds-alert--inline),
 .navds-confirmation-panel {
   & .navds-link {
     color: var(--ax-text-default);

@navikt/core/css/darkside/list.darkside.css

@@ -1,17 +1,17 @@
 .navds-list ul,
 .navds-list ol {
   padding: 0;
-  margin-block: var(--ax-spacing-4);
+  margin-block: var(--ax-space-16);
 }
 
 .navds-list--small ul,
 .navds-list--small ol {
-  margin-block: var(--ax-spacing-3);
+  margin-block: var(--ax-space-12);
 }
 
 .navds-list {
   & .navds-list :where(ul, ol) {
-    margin-block: var(--ax-spacing-2) 0;
+    margin-block: var(--ax-space-8) 0;
   }
 
   & ol {
@@ -31,7 +31,7 @@
     & > .navds-list__item {
       display: grid;
       grid-template-columns: auto 1fr;
-      gap: var(--ax-spacing-2);
+      gap: var(--ax-space-8);
     }
 
     & > li > .navds-list__item-marker {
@@ -61,7 +61,7 @@ _:future,
 /* stylelint-enable selector-type-no-unknown */
 
 .navds-list__item {
-  margin-block-end: var(--ax-spacing-2);
+  margin-block-end: var(--ax-space-8);
 
   &:last-child {
     margin-block-end: 0;

@navikt/core/css/darkside/loader.darkside.css

@@ -67,7 +67,7 @@
 }
 
 .navds-loader__background {
-  stroke: var(--ax-border-neutral-subtleA);
+  stroke: var(--ax-border-subtleA);
   stroke-width: var(--__axc-loader-stroke-width);
 }
 

@navikt/core/css/darkside/modal.darkside.css

@@ -60,15 +60,15 @@
   width: 450px;
 
   & .navds-modal__header {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   & .navds-modal__body {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   & .navds-modal__footer {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 }
 
@@ -116,19 +116,19 @@
 }
 
 .navds-modal__button {
-  margin-left: var(--ax-spacing-4);
+  margin-left: var(--ax-space-16);
   float: right;
 }
 
 .navds-modal__header {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 .navds-modal__header-icon {
   & svg {
     display: inline;
     vertical-align: -0.25rem;
-    margin-right: var(--ax-spacing-1);
+    margin-right: var(--ax-space-4);
   }
 }
 
@@ -138,7 +138,7 @@
 }
 
 .navds-modal__body {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   overflow: auto;
   overscroll-behavior: contain;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
@@ -157,14 +157,14 @@
 }
 
 .navds-modal__header + .navds-modal__body {
-  padding-top: var(--ax-spacing-0);
+  padding-top: var(--ax-space-0);
 }
 
 .navds-modal__footer {
   display: flex;
   flex-flow: row-reverse wrap;
-  gap: var(--ax-spacing-4);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  gap: var(--ax-space-16);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 .navds-modal__footer :nth-of-type(2) {

@navikt/core/css/darkside/pagination.darkside.css

@@ -7,7 +7,7 @@
   padding: 0;
   list-style: none;
   display: flex;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
 
   & li {
     list-style: none;
@@ -32,8 +32,8 @@
 }
 
 .navds-pagination__item[data-selected="true"] {
-  background-color: var(--ax-bg-neutral-strong-pressed);
-  color: var(--ax-text-neutral-contrast);
+  background-color: var(--ax-bg-strong-pressed);
+  color: var(--ax-text-contrast);
 }
 
 .navds-pagination--invisible {

@navikt/core/css/darkside/popover.darkside.css

@@ -6,11 +6,11 @@
   border-radius: var(--ax-border-radius-xlarge);
 
   /* Creates a small gutter between screen-edges on smaller devices */
-  max-width: calc(100vw - var(--ax-spacing-6));
+  max-width: calc(100vw - var(--ax-space-24));
 }
 
 .navds-popover__content {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 .navds-popover--hidden {

@navikt/core/css/darkside/primitives/page.darkside.css

@@ -24,7 +24,7 @@
 }
 
 .navds-page__content--padding {
-  padding-block-end: var(--ax-spacing-16);
+  padding-block-end: var(--ax-space-64);
 }
 
 .navds-pageblock--text {

@navikt/core/css/darkside/progress-bar.darkside.css

@@ -1,9 +1,9 @@
 .navds-progress-bar {
-  background: var(--ax-bg-neutral-moderateA);
+  background: var(--ax-bg-moderateA);
   position: relative;
   border-radius: var(--ax-border-radius-full);
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
+  box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
 }
 
 .navds-progress-bar--small {

@navikt/core/css/darkside/read-more.darkside.css

@@ -1,8 +1,8 @@
 .navds-read-more {
   --__axc-read-more-icon-size: 1.5rem;
   --__axc-read-more-pi-start: 0px;
-  --__axc-read-more-pi-end: var(--ax-spacing-1);
-  --__axc-read-more-pb: var(--ax-spacing-1);
+  --__axc-read-more-pi-end: var(--ax-space-4);
+  --__axc-read-more-pb: var(--ax-space-4);
 }
 
 /* ----------------------------- ReadMore Button ---------------------------- */
@@ -13,7 +13,7 @@
   background: none;
   display: flex;
   align-items: flex-start;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
   color: var(--ax-text-accent);
   padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
   padding-block: var(--__axc-read-more-pb);
@@ -34,7 +34,7 @@
     border-radius: var(--ax-border-radius-medium);
 
     &:hover {
-      background-color: var(--ax-bg-neutral-hoverA);
+      background-color: var(--ax-bg-hoverA);
       color: var(--ax-text-accent-strong);
     }
   }
@@ -52,24 +52,24 @@
   }
 
   &.navds-read-more--large {
-    --__axc-read-more-pi-start: var(--ax-spacing-3);
-    --__axc-read-more-pi-end: var(--ax-spacing-6);
+    --__axc-read-more-pi-start: var(--ax-space-12);
+    --__axc-read-more-pi-end: var(--ax-space-24);
   }
 
   &.navds-read-more--small,
   &.navds-read-more--medium {
-    --__axc-read-more-pi-start: var(--ax-spacing-2);
-    --__axc-read-more-pi-end: var(--ax-spacing-4);
+    --__axc-read-more-pi-start: var(--ax-space-8);
+    --__axc-read-more-pi-end: var(--ax-space-16);
   }
 }
 
 /* ---------------------------- ReadMore Content ---------------------------- */
 .navds-read-more__content {
-  margin-top: var(--ax-spacing-2);
-  border-left: 2px solid var(--ax-border-neutral-subtleA);
+  margin-top: var(--ax-space-8);
+  border-left: 2px solid var(--ax-border-subtleA);
   color: var(--ax-text-default);
   margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
-  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-spacing-1));
+  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
 
   &[data-state="closed"] {
     display: none;
@@ -84,12 +84,12 @@
 
 /* ----------------------------- ReadMore Sizes ----------------------------- */
 .navds-read-more--large {
-  --__axc-read-more-pb: var(--ax-spacing-3);
+  --__axc-read-more-pb: var(--ax-space-12);
 }
 
 .navds-read-more--small {
   --__axc-read-more-icon-size: 1.25rem;
-  --__axc-read-more-pb: var(--ax-spacing-05);
+  --__axc-read-more-pb: var(--ax-space-2);
 }
 
 /* ------------------------- ReadMore high-contrast ------------------------- */

@navikt/core/css/darkside/skeleton.darkside.css

@@ -1,5 +1,5 @@
 .navds-skeleton {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   height: 1.3em;
   animation: akselSkeletonAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   pointer-events: none;

@navikt/core/css/darkside/stepper.darkside.css

@@ -18,7 +18,7 @@
     [line-2 step-end] auto;
   grid-template-columns: var(--__axc-stepper-circle-size) auto;
   justify-items: flex-start;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-stepper__line {
@@ -30,14 +30,14 @@
   grid-column: 1;
 
   .navds-stepper__item--non-interactive & {
-    background-color: var(--ax-border-neutral-strong);
+    background-color: var(--ax-border-strong);
   }
 }
 
 /* Line before non-interactive step */
 .navds-stepper__item:has(+ .navds-stepper__item > .navds-stepper__step[data-interactive="false"]) {
   .navds-stepper__line--2 {
-    background-color: var(--ax-border-neutral-strong);
+    background-color: var(--ax-border-strong);
   }
 }
 
@@ -60,7 +60,7 @@
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: [circle] var(--__axc-stepper-circle-size) [content] auto;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   justify-content: flex-start;
   cursor: pointer;
   padding: var(--__axc-stepper-border-width);
@@ -159,23 +159,23 @@
 }
 
 .navds-stepper__step[data-interactive="false"] {
-  color: var(--ax-text-neutral);
+  color: var(--ax-text-default);
   cursor: default;
 
   & .navds-stepper__circle {
-    color: var(--ax-text-neutral);
-    border-color: var(--ax-border-neutral-strong);
+    color: var(--ax-text-default);
+    border-color: var(--ax-border-strong);
   }
 
   &[data-active="true"] {
     & .navds-stepper__content {
-      color: var(--ax-text-neutral-strong);
+      color: var(--ax-text-subtle);
     }
 
     & .navds-stepper__circle {
-      color: var(--ax-text-neutral-contrast);
-      background-color: var(--ax-bg-neutral-strong-pressed);
-      border-color: var(--ax-bg-neutral-strong-pressed);
+      color: var(--ax-text-contrast);
+      background-color: var(--ax-bg-strong-pressed);
+      border-color: var(--ax-bg-strong-pressed);
     }
   }
 }

@navikt/core/css/darkside/table.darkside.css

@@ -10,43 +10,44 @@
 
 .navds-table__body {
   display: table-row-group;
+
+  & .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
+    background-color: var(--ax-bg-hoverA);
+    transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  & .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
+    background-color: var(--ax-bg-accent-hoverA);
+  }
 }
 
 .navds-table__row {
   display: table-row;
 }
 
-.navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
-  background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
-}
-
 .navds-table__row--selected {
-  background-color: var(--ac-table-row-selected, var(--a-surface-action-subtle));
+  background-color: var(--ax-bg-accent-soft);
 }
 
-.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
-  background-color: var(--ac-table-row-selected-hover, var(--a-surface-action-subtle-hover));
-}
+.navds-table--zebra-stripes {
+  & .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
+    background-color: var(--ax-bg-soft);
+  }
 
-.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
-  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
-}
-
-.navds-table--zebra-stripes
-  .navds-table__body
-  :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
-  background-color: transparent;
+  & .navds-table__body :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
+    background-color: transparent;
+  }
 }
 
 .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
-  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
+  background-color: var(--ax-bg-soft);
 }
 
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
-  padding: var(--a-spacing-3) var(--a-spacing-2);
-  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+  padding: var(--ax-space-12) var(--ax-space-8);
+  border-bottom: 1px solid var(--ax-border-default);
   text-align: left;
 }
 
@@ -67,7 +68,7 @@
 
 :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
 :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
-  border-color: var(--ac-table-cell-hover-border, var(--a-border-strong));
+  border-color: var(--ax-border-strong);
 }
 
 :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
@@ -76,12 +77,12 @@
 
 .navds-table--large .navds-table__header-cell,
 .navds-table--large .navds-table__data-cell {
-  padding: var(--a-spacing-4) var(--a-spacing-2);
+  padding: var(--ax-space-16) var(--ax-space-8);
 }
 
 .navds-table--small .navds-table__header-cell,
 .navds-table--small .navds-table__data-cell {
-  padding: var(--a-spacing-1) var(--a-spacing-2);
+  padding: var(--ax-space-4) var(--ax-space-8);
 }
 
 .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
@@ -103,43 +104,36 @@
 .navds-table__sort-button {
   appearance: none;
   background: none;
-  color: var(--ac-table-sort-button-text, var(--a-text-action));
+  color: var(--ax-text-accent);
   border: none;
   cursor: pointer;
   margin: 0;
-  padding: var(--a-spacing-4) var(--a-spacing-3);
+  padding: var(--ax-space-16) var(--ax-space-12);
   width: 100%;
   display: flex;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-space-8);
   align-items: center;
   line-height: inherit;
   font-weight: inherit;
 }
 
 .navds-table--small .navds-table__sort-button {
-  padding: var(--a-spacing-2) var(--a-spacing-3);
+  padding: var(--ax-space-8) var(--ax-space-12);
 }
 
 .navds-table__sort-button:hover {
-  background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
+  background-color: var(--ax-bg-hoverA);
 }
 
 .navds-table__sort-button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-table__sort-button:focus {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
-  }
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: -4px;
 }
 
 .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
 .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
-  background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
-  color: var(--ac-table-sort-button-sorted-text, var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle)));
+  background-color: var(--ax-bg-accent-moderate);
+  color: var(--ax-text-accent-strong);
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {
@@ -155,22 +149,18 @@
   flex-shrink: 0;
 }
 
-.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
-  transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
+.navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell, .navds-table__header-cell) {
+  transition: border-bottom-color 150ms cubic-bezier(0.95, 0.05, 0.8, 0.04);
 }
 
 .navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
   cursor: pointer;
 }
 
-.navds-table__expandable-row--open .navds-table__data-cell {
+.navds-table__expandable-row--open :where(.navds-table__data-cell, .navds-table__header-cell) {
   border-bottom-color: transparent;
 }
 
-.navds-table__expandable-row--open .navds-table__header-cell {
-  border-color: var(--ac-table-row-border, var(--a-border-default));
-}
-
 .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
   border-color: transparent;
 }
@@ -181,11 +171,11 @@
 }
 
 .navds-table--large .navds-table__toggle-expand-cell {
-  padding: 0 var(--a-spacing-2);
+  padding: 0 var(--ax-space-8);
 }
 
 .navds-table--small .navds-table__toggle-expand-cell {
-  padding: var(--a-spacing-1) var(--a-spacing-2);
+  padding: var(--ax-space-4) var(--ax-space-8);
 }
 
 .navds-table__toggle-expand-button {
@@ -194,93 +184,54 @@
   cursor: pointer;
   background: transparent;
   border: none;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-medium);
   height: 2rem;
   width: 2rem;
   font-size: 1.5rem;
   margin: 0 auto;
+  transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 .navds-table__expandable-icon {
-  transition: transform 150ms ease-in-out;
+  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-table__toggle-expand-cell:hover {
+.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover {
   cursor: pointer;
 }
 
 .navds-table__toggle-expand-button:hover,
 .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
 .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
-  background-color: var(--a-surface-hover);
+  background-color: var(--ax-bg-hoverA);
 }
 
 .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
-  transform: translateY(0) rotate(180deg);
-}
-
-.navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
-  transform: translateY(1px);
-}
-
-.navds-table__toggle-expand-cell--open > .navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
-  transform: translateY(-1px) rotate(180deg);
+  transform: rotateX(180deg);
 }
 
 .navds-table__toggle-expand-button:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-table__toggle-expand-button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
+  outline: 2px solid var(--ax-border-focus);
 }
 
 .navds-table__expanded-row-cell {
   padding: 0;
+
+  &:empty {
+    display: none;
+  }
 }
 
-.navds-table__expanded-row-cell:empty {
-  display: none;
-}
-
-.navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
-  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+/* -------------------------- Table ExpandableRow -------------------------- */
+.navds-table__expanded-row-collapse:not([style*="height: 0px;"]),
+.navds-table__expanded-row-collapse[style*="transition:"] {
+  border-bottom: 1px solid var(--ax-border-default);
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
+  padding: var(--ax-space-16) calc(var(--ax-space-8) + 3rem);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
-}
-
-@media (forced-colors: active) {
-  .navds-date.navds-date button.rdp-day_selected {
-    forced-color-adjust: none;
-    background-color: highlight;
-    color: highlighttext;
-    box-shadow: none;
-  }
-
-  .navds-date.navds-date button {
-    color: buttontext;
-    forced-color-adjust: none;
-    outline: none;
-    box-shadow: none;
-  }
-
-  .navds-date button:focus-visible {
-    color: buttontext;
-    forced-color-adjust: none;
-    outline: 2px solid highlight;
-  }
-
-  .navds-date.navds-date button.rdp-day_disabled {
-    color: GrayText;
-  }
+  padding: var(--ax-space-8) calc(var(--ax-space-8) + 3rem);
 }

@navikt/core/css/darkside/tabs.darkside.css

@@ -1,5 +1,5 @@
 .navds-tabs__tablist-wrapper {
-  box-shadow: inset 0 -1px var(--ax-border-neutral-subtle);
+  box-shadow: inset 0 -1px var(--ax-border-subtle);
   width: 100%;
   display: flex;
 }
@@ -19,7 +19,7 @@
 }
 
 .navds-tabs__scroll-button {
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
   width: 2.75rem;
   display: flex;
   justify-content: center;
@@ -32,7 +32,7 @@
   }
 
   .navds-tabs--small & {
-    padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
+    padding: var(--ax-space-6) var(--ax-space-16);
     width: 2rem;
   }
 }
@@ -43,7 +43,7 @@
 
 .navds-tabs__tab {
   min-height: 3rem;
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -53,7 +53,7 @@
   cursor: pointer;
 
   --__axc-tabs-line-width: 0;
-  --__axc-tabs-line-color: var(--ax-border-neutral-subtle);
+  --__axc-tabs-line-color: var(--ax-border-subtle);
 
   box-shadow: inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);
   transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
@@ -76,7 +76,7 @@
 .navds-tabs__tab-inner {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
 
   & > * {
     display: inline-flex;
@@ -94,12 +94,12 @@
 
 .navds-tabs__tab--small {
   min-height: 2rem;
-  padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
+  padding: var(--ax-space-6) var(--ax-space-16);
 }
 
 .navds-tabs__tab-icon--top,
 .navds-tabs__tab--small.navds-tabs__tab-icon--top {
-  padding: var(--ax-spacing-1) var(--ax-spacing-4);
+  padding: var(--ax-space-4) var(--ax-space-16);
 }
 
 .navds-tabs__tab,
@@ -133,15 +133,15 @@
 @media (forced-colors: active) {
   .navds-tabs__tab[data-state="active"] {
     border-bottom: 3px solid canvastext;
-    padding-block-end: calc(var(--ax-spacing-3) - 3px);
+    padding-block-end: calc(var(--ax-space-12) - 3px);
   }
 
   .navds-tabs__tab--small[data-state="active"] {
-    padding-block-end: calc(var(--ax-spacing-1-alt) - 3px);
+    padding-block-end: calc(var(--ax-space-6) - 3px);
   }
 
   .navds-tabs__tab-icon--top[data-state="active"],
   .navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state="active"] {
-    padding-block-end: calc(var(--ax-spacing-1) - 3px);
+    padding-block-end: calc(var(--ax-space-4) - 3px);
   }
 }

@navikt/core/css/darkside/tag.darkside.css

@@ -1,194 +1,132 @@
 .navds-tag {
-  --__ac-tag-icon-size: 1.5rem;
-  --__ac-tag-icon-margin: -2px;
+  --__axc-tag-icon-size: 1.5rem;
+  --__axc-tag-icon-margin: -2px;
+  --__axc-tag-border: ;
+  --__axc-tag-bg: ;
+  --__axc-tag-bg-strong: ;
+  --__axc-tag-text: ;
+  --__axc-tag-text-strong: ;
 
-  border: 1px solid;
-  border-radius: var(--a-border-radius-small);
+  border-radius: var(--ax-border-radius-medium);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--a-spacing-05) var(--a-spacing-2);
+  padding: var(--ax-space-2) var(--ax-space-8);
   min-height: 2rem;
   line-height: 1;
+
+  &:has(.navds-tag__icon--left) {
+    gap: var(--ax-space-2);
+  }
+}
+
+.navds-tag--info,
+.navds-tag--alt3 {
+  --__axc-tag-border: var(--ax-border-info);
+  --__axc-tag-bg: var(--ax-bg-info-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-info-strong);
+  --__axc-tag-text: var(--ax-text-info-strong);
+  --__axc-tag-text-strong: var(--ax-text-info-contrast);
+}
+
+.navds-tag--success {
+  --__axc-tag-border: var(--ax-border-success);
+  --__axc-tag-bg: var(--ax-bg-success-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-success-strong);
+  --__axc-tag-text: var(--ax-text-success-strong);
+  --__axc-tag-text-strong: var(--ax-text-success-contrast);
+}
+
+.navds-tag--warning {
+  --__axc-tag-border: var(--ax-border-warning);
+  --__axc-tag-bg: var(--ax-bg-warning-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-warning-strong);
+  --__axc-tag-text: var(--ax-text-warning-strong);
+  --__axc-tag-text-strong: var(--ax-text-warning-contrast);
+}
+
+.navds-tag--error {
+  --__axc-tag-border: var(--ax-border-danger);
+  --__axc-tag-bg: var(--ax-bg-danger-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-danger-strong);
+  --__axc-tag-text: var(--ax-text-danger-strong);
+  --__axc-tag-text-strong: var(--ax-text-danger-contrast);
+}
+
+.navds-tag--neutral {
+  --__axc-tag-border: var(--ax-border-default);
+  --__axc-tag-bg: var(--ax-bg-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-strong);
+  --__axc-tag-text: var(--ax-text-default);
+  --__axc-tag-text-strong: var(--ax-text-contrast);
+}
+
+.navds-tag--meta-1,
+.navds-tag--alt1 {
+  --__axc-tag-border: var(--ax-border-meta-1);
+  --__axc-tag-bg: var(--ax-bg-meta-1-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-1-strong);
+  --__axc-tag-text: var(--ax-text-meta-1-strong);
+  --__axc-tag-text-strong: var(--ax-text-meta-1-contrast);
+}
+
+.navds-tag--meta-2,
+.navds-tag--alt2 {
+  --__axc-tag-border: var(--ax-border-meta-2);
+  --__axc-tag-bg: var(--ax-bg-meta-2-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-2-strong);
+  --__axc-tag-text: var(--ax-text-meta-2-strong);
+  --__axc-tag-text-strong: var(--ax-text-meta-2-contrast);
 }
 
 .navds-tag--small {
   min-height: 1.5rem;
-  padding: 0 var(--a-spacing-1-alt);
+  padding: 0 var(--ax-space-6);
 
-  --__ac-tag-icon-size: 1.25rem;
+  --__axc-tag-icon-size: 1.25rem;
 }
 
 .navds-tag--xsmall {
   min-height: 1.25rem;
-  padding: 0 var(--a-spacing-1);
+  padding: 0 var(--ax-space-4);
 
-  --__ac-tag-icon-size: 1rem;
-  --__ac-tag-icon-margin: -1px;
-}
-
-.navds-tag:has(.navds-tag__icon--left) {
-  gap: var(--a-spacing-05);
+  --__axc-tag-icon-size: 1rem;
+  --__axc-tag-icon-margin: -1px;
 }
 
 .navds-tag__icon--left {
-  font-size: var(--__ac-tag-icon-size);
-  margin-inline-start: var(--__ac-tag-icon-margin);
+  font-size: var(--__axc-tag-icon-size);
+  margin-inline-start: var(--__axc-tag-icon-margin);
   display: flex;
 }
 
-.navds-tag--error {
-  border-color: var(--ac-tag-error-border, var(--a-border-danger));
-  background-color: var(--ac-tag-error-bg, var(--a-surface-danger-subtle));
-  color: var(--ac-tag-error-text, var(--a-text-default));
+.navds-tag--outline {
+  box-shadow: inset 0 0 0 1px var(--__axc-tag-border);
+  background: var(--__axc-tag-bg);
+  color: var(--__axc-tag-text);
 }
 
-.navds-tag--error-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-error-filled-bg, var(--a-surface-danger));
-  color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
+.navds-tag--moderate {
+  background: var(--__axc-tag-bg);
+  color: var(--__axc-tag-text);
 }
 
-.navds-tag--error-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-error-moderate-bg, var(--a-surface-danger-moderate));
-  color: var(--ac-tag-error-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--success {
-  border-color: var(--ac-tag-success-border, var(--a-border-success));
-  background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
-  color: var(--ac-tag-success-text, var(--a-text-default));
-}
-
-.navds-tag--success-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-success-filled-bg, var(--a-surface-success));
-  color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
-}
-
-.navds-tag--success-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-success-moderate-bg, var(--a-surface-success-moderate));
-  color: var(--ac-tag-success-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--warning {
-  border-color: var(--ac-tag-warning-border, var(--a-border-warning));
-  background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
-  color: var(--ac-tag-warning-text, var(--a-text-default));
-}
-
-.navds-tag--warning-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-warning-filled-bg, var(--a-surface-warning));
-  color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
-}
-
-.navds-tag--warning-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-warning-moderate-bg, var(--a-surface-warning-moderate));
-  color: var(--ac-tag-warning-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--info {
-  border-color: var(--ac-tag-info-border, var(--a-border-info));
-  background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
-  color: var(--ac-tag-info-text, var(--a-text-default));
-}
-
-.navds-tag--info-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-info-filled-bg, var(--a-surface-info));
-  color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
-}
-
-.navds-tag--info-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-info-moderate-bg, var(--a-surface-info-moderate));
-  color: var(--ac-tag-info-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--neutral {
-  border-color: var(--ac-tag-neutral-border, var(--a-border-default));
-  background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-tag-neutral-text, var(--a-text-default));
-}
-
-.navds-tag--neutral-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-neutral-filled-bg, var(--a-surface-neutral));
-  color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
-}
-
-.navds-tag--neutral-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-neutral-moderate-bg, var(--a-surface-neutral-moderate));
-  color: var(--ac-tag-neutral-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--alt1 {
-  border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
-  background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
-  color: var(--ac-tag-alt-1-text, var(--a-text-default));
-}
-
-.navds-tag--alt1-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
-  color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
-}
-
-.navds-tag--alt1-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
-  color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--alt2 {
-  border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
-  background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
-  color: var(--ac-tag-alt-2-text, var(--a-text-default));
-}
-
-.navds-tag--alt2-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
-  color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
-}
-
-.navds-tag--alt2-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
-  color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--alt3 {
-  border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
-  background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
-  color: var(--ac-tag-alt-3-text, var(--a-text-default));
-}
-
-.navds-tag--alt3-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
-  color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
-}
-
-.navds-tag--alt3-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate));
-  color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default));
+.navds-tag--strong {
+  background: var(--__axc-tag-bg-strong);
+  color: var(--__axc-tag-text-strong);
 }
 
 @media (forced-colors: active) {
   .navds-tag {
     forced-color-adjust: none;
-  }
-
-  .navds-tag--neutral,
-  .navds-tag--neutral-moderate {
-    border-color: canvastext;
     color: canvastext;
   }
+
+  .navds-tag--moderate {
+    box-shadow: inset 0 0 0 1px var(--__axc-tag-bg-strong);
+  }
+
+  .navds-tag--strong {
+    color: canvas;
+  }
 }

@navikt/core/css/darkside/timeline.darkside.css

@@ -12,18 +12,18 @@
   height: 1rem;
   box-sizing: content-box;
   grid-column: 2;
-  margin-bottom: var(--a-spacing-1);
+  margin-bottom: var(--ax-space-4);
 }
 
 .navds-timeline__row-label {
   white-space: nowrap;
   width: auto;
-  margin-right: var(--a-spacing-4);
+  margin-right: var(--ax-space-16);
   grid-column: 1;
   min-height: 1.5rem;
   display: flex;
   align-items: center;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-timeline__row-label:where(:nth-last-child(2)) {
@@ -32,19 +32,19 @@
 
 .navds-timeline__axislabels-label {
   position: absolute;
-  color: var(--ac-timeline-axislabel-text, var(--a-text-subtle));
+  color: var(--ax-text-subtle);
   white-space: nowrap;
 }
 
 .navds-timeline__row {
   display: flex;
-  background: var(--ac-timeline-row-bg, var(--a-surface-subtle));
-  margin: var(--a-spacing-4) 0;
+  background: var(--ax-bg-soft);
+  margin: var(--ax-space-16) 0;
   grid-column: 2;
 }
 
 .navds-timeline__row--active {
-  background: var(--ac-timeline-row-active-bg, var(--a-surface-selected));
+  background: var(--ax-bg-accent-moderateA);
 }
 
 .navds-timeline__row:last-of-type {
@@ -62,13 +62,19 @@
   list-style-type: none;
 }
 
-.navds-timeline__row-periods:focus {
-  outline: none;
+.navds-timeline__period:focus-visible {
+  z-index: 4;
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: 2px;
+
+  && {
+    box-shadow: 0 0 0 2px var(--ax-bg-default);
+  }
 }
 
 .navds-timeline__period {
   height: 100%;
-  border-radius: var(--a-border-radius-full);
+  border-radius: var(--ax-border-radius-full);
   position: absolute;
   padding: 0;
   display: flex;
@@ -79,7 +85,7 @@
 }
 
 .navds-timeline__period--inner {
-  margin: 0 var(--a-spacing-1);
+  margin: 0 var(--ax-space-8);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: clip;
@@ -97,49 +103,83 @@
 }
 
 .navds-timeline__period--success {
-  background: var(--ac-timeline-period-success-bg, var(--a-surface-success-subtle));
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-success-border, var(--a-border-success));
-}
+  background: var(--ax-bg-success-moderate);
+  border: solid 1px var(--ax-border-success);
+  color: var(--ax-text-success-icon);
 
-.navds-timeline__period--success.navds-timeline__period--clickable:hover {
-  background: var(--a-surface-success-subtle-hover);
-  background: var(--ac-timeline-period-success-bg-hover, var(--a-surface-success-subtle-hover));
+  &.navds-timeline__period--clickable:hover {
+    background: var(--ax-bg-success-moderate-hover);
+  }
+
+  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+    background: var(--ax-bg-success-strong-pressed);
+    border: none;
+    color: var(--ax-text-success-contrast);
+  }
 }
 
 .navds-timeline__period--warning {
-  background: var(--ac-timeline-period-warning-bg, var(--a-surface-warning-subtle));
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-warning-border, var(--a-border-warning));
-}
+  background: var(--ax-bg-warning-moderate);
+  border: solid 1px var(--ax-border-warning);
+  color: var(--ax-text-warning-icon);
 
-.navds-timeline__period--warning.navds-timeline__period--clickable:hover {
-  background: var(--ac-timeline-period-warning-bg-hover, var(--a-surface-warning-subtle-hover));
+  &.navds-timeline__period--clickable:hover {
+    background: var(--ax-bg-warning-moderate-hover);
+  }
+
+  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+    background: var(--ax-bg-warning-strong-pressed);
+    border: none;
+    color: var(--ax-text-warning-contrast);
+  }
 }
 
 .navds-timeline__period--danger {
-  background: var(--ac-timeline-period-danger-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-danger-border, var(--a-border-danger));
-}
+  background: var(--ax-bg-danger-moderate);
+  border: solid 1px var(--ax-border-danger);
+  color: var(--ax-text-danger-icon);
 
-.navds-timeline__period--danger.navds-timeline__period--clickable:hover {
-  background: var(--ac-timeline-period-danger-bg-hover, var(--a-surface-danger-subtle-hover));
+  &.navds-timeline__period--clickable:hover {
+    background: var(--ax-bg-danger-moderate-hover);
+  }
+
+  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+    background: var(--ax-bg-danger-strong-pressed);
+    border: none;
+    color: var(--ax-text-danger-contrast);
+  }
 }
 
 .navds-timeline__period--info {
-  background: var(--ac-timeline-period-info-bg, var(--a-surface-info-subtle));
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-info-border, var(--a-border-info));
-}
+  background: var(--ax-bg-info-moderate);
+  border: solid 1px var(--ax-border-info);
+  color: var(--ax-text-info-icon);
 
-.navds-timeline__period--info.navds-timeline__period--clickable:hover {
-  background: var(--ac-timeline-period-info-bg-hover, var(--a-surface-info-subtle-hover));
+  &.navds-timeline__period--clickable:hover {
+    background: var(--ax-bg-info-moderate-hover);
+  }
+
+  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+    background: var(--ax-bg-info-strong-pressed);
+    border: none;
+    color: var(--ax-text-info-contrast);
+  }
 }
 
 .navds-timeline__period--neutral {
-  background: var(--ac-timeline-period-neutral-bg, var(--a-bg-subtle));
-  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-neutral-border, var(--a-border-default));
-}
+  background: var(--ax-bg-moderate);
+  border: solid 1px var(--ax-border-default);
+  color: var(--ax-text-icon);
 
-.navds-timeline__period--neutral.navds-timeline__period--clickable:hover {
-  background: var(--ac-timeline-period-neutral-bg-hover, var(--a-gray-200));
+  &.navds-timeline__period--clickable:hover {
+    background: var(--ax-bg-moderate-hover);
+  }
+
+  &.navds-timeline__period--clickable.navds-timeline__period--selected {
+    background: var(--ax-bg-strong-pressed);
+    border: none;
+    color: var(--ax-text-contrast);
+  }
 }
 
 .navds-timeline__period--connected-both {
@@ -156,11 +196,6 @@
   border-top-left-radius: 0;
 }
 
-.navds-timeline__period--selected {
-  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected));
-  z-index: 3;
-}
-
 .navds-timeline__pin-wrapper {
   position: absolute;
   grid-column: 2;
@@ -177,68 +212,34 @@
 .navds-timeline__pin-button {
   border: none;
   cursor: pointer;
-  background: var(--a-surface-default);
-  box-shadow:
-    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 5px var(--a-surface-default);
+  background: var(--ax-bg-default);
+  box-shadow: inset 0 0 0 4px var(--ax-bg-danger-strong);
   z-index: 2;
-  border-radius: var(--a-border-radius-full);
-  padding: var(--a-spacing-1);
+  border-radius: var(--ax-border-radius-full);
+  padding: var(--ax-space-8);
   position: relative;
-}
 
-.navds-timeline__pin-button::before {
-  content: "";
-  inset: 0;
-  position: absolute;
-  width: 25px;
-  height: 25px;
-  border-radius: var(--a-border-radius-full);
-  left: calc(-12.5px + 3.5px);
-  top: calc(-12.5px + 3.5px);
-}
-
-.navds-timeline__pin-button:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-    0 0 0 4px var(--a-surface-default),
-    0 0 0 6px var(--a-border-focus);
-  outline: none;
-}
-
-.navds-timeline__pin-button:hover {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 5px var(--a-surface-default);
-}
-
-.navds-timeline__pin-button:hover:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-    0 0 0 4px var(--a-surface-default),
-    0 0 0 6px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-timeline__pin-button:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
-      0 0 0 4px var(--a-surface-default),
-      0 0 0 6px var(--a-border-focus);
-    outline: none;
+  &::before {
+    content: "";
+    inset: 0;
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    border-radius: var(--ax-border-radius-full);
+    left: calc(-12.5px + 3.5px);
+    top: calc(-12.5px + 3.5px);
   }
 
-  .navds-timeline__pin-button:hover:focus {
+  &:hover {
+    box-shadow: inset 0 0 0 4px var(--ax-bg-danger-strong-hover);
+  }
+
+  &:focus-visible {
     box-shadow:
-      inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
-      0 0 0 4px var(--a-surface-default),
-      0 0 0 6px var(--a-border-focus);
+      inset 0 0 0 4px var(--ax-border-danger-strong),
+      0 0 0 2px var(--ax-bg-default);
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
   }
 }
 
@@ -248,11 +249,11 @@
   height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
   width: 1px;
   margin: 0 auto;
-  background: var(--a-surface-inverted);
+  background: var(--ax-border-strong);
 }
 
 .navds-timeline__zoom {
-  margin-top: var(--a-spacing-6);
+  margin-top: var(--ax-space-24);
   float: right;
   display: flex;
   list-style-type: none;
@@ -262,54 +263,42 @@
   all: unset;
   cursor: pointer;
   padding: 6px 9px 6px 8px;
-  border: 1px solid var(--ac-timeline-zoom-border, var(--a-border-default));
+  border: 1px solid var(--ax-border-default);
   border-width: 1px 0 1px 1px;
-  background: var(--ac-timeline-zoom-bg, var(--a-surface-default));
+  background: var(--ax-bg-default);
 }
 
 .navds-timeline__zoom li:first-child .navds-timeline__zoom-button {
-  border-radius: var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-medium) 0 0 var(--ax-border-radius-medium);
 }
 
 .navds-timeline__zoom li:last-child .navds-timeline__zoom-button {
   border-width: 1px;
-  border-radius: 0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;
+  border-radius: 0 var(--ax-border-radius-medium) var(--ax-border-radius-medium) 0;
 }
 
 .navds-timeline__zoom li:only-child .navds-timeline__zoom-button {
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-medium);
 }
 
 .navds-timeline__zoom-button:not([aria-pressed="true"]):hover {
-  background: var(--ac-timeline-zoom-bg-hover, var(--a-surface-action-subtle-hover));
+  background: var(--ax-bg-moderate-hoverA);
 }
 
 .navds-timeline__zoom-button[aria-pressed="true"] {
-  background: var(--ac-timeline-zoom-selected-bg, var(--a-surface-inverted));
-  color: var(--ac-timeline-zoom-selected-text, var(--a-text-on-inverted));
-}
-
-.navds-timeline__period:focus-visible {
-  outline: none;
-  z-index: 4;
-  box-shadow: 0 0 0 2px var(--a-border-focus);
-}
-
-.navds-timeline__period--selected:focus-visible {
-  box-shadow:
-    inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
-    0 0 0 2px var(--a-border-focus);
-  z-index: 3;
+  background: var(--ax-bg-strong-pressed);
+  border-color: var(--ax-bg-strong-pressed);
+  color: var(--ax-text-contrast);
 }
 
 .navds-timeline__zoom li:focus-within {
-  z-index: var(--a-z-index-focus);
+  z-index: 5;
 }
 
 .navds-timeline__zoom-button:focus-visible {
   box-shadow:
-    0 0 0 1px var(--a-surface-default),
-    0 0 0 3px var(--a-border-focus);
+    0 0 0 1px var(--ax-bg-default),
+    0 0 0 3px var(--ax-border-focus);
   border-width: 1px;
 }
 
@@ -318,80 +307,18 @@
   padding-right: 6px;
 }
 
-@supports not selector(:focus-visible) {
-  .navds-timeline__period:focus {
-    outline: none;
-    z-index: 4;
-    box-shadow: 0 0 0 2px var(--a-border-focus);
-  }
-
-  .navds-timeline__period--selected:focus {
-    box-shadow:
-      inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
-      0 0 0 2px var(--a-border-focus);
-    z-index: 3;
-  }
-
-  .navds-timeline__zoom-button:focus {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default),
-      0 0 0 3px var(--a-border-focus);
-    border-width: 1px;
-  }
-
-  .navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus {
-    margin-right: 2px;
-    padding-right: 6px;
-  }
-}
-
 /**
 * Timeline Popover
 */
 
 .navds-timeline__popover {
-  z-index: var(--a-z-index-popover);
-  background-color: var(--ac-popover-bg, var(--a-surface-default));
-  box-shadow: var(--a-shadow-medium);
+  z-index: 5;
+  background-color: var(--ax-bg-raised);
+  box-shadow: var(--ax-shadow-dialog);
   border: 1px solid;
-  border-color: var(--ac-popover-border, var(--a-border-default));
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-3);
-}
-
-.navds-timeline__popover:focus {
-  outline: none;
-}
-
-.navds-timeline__popover-arrow {
-  position: absolute;
-  z-index: -1;
-  transform: rotate(45deg);
-  background-color: var(--ac-popover-bg, var(--a-surface-default));
-  border: 1px solid;
-  border-color: var(--ac-popover-border, var(--a-border-default));
-  width: 1rem;
-  height: 1rem;
-}
-
-.navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
-  border-left-color: transparent;
-  border-top-color: transparent;
-}
-
-.navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
-  border-bottom-color: transparent;
-  border-right-color: transparent;
-}
-
-.navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
-  border-left-color: transparent;
-  border-bottom-color: transparent;
-}
-
-.navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
-  border-right-color: transparent;
-  border-top-color: transparent;
+  border-color: var(--ax-border-subtleA);
+  border-radius: var(--ax-border-radius-large);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 @media (forced-colors: active) {
@@ -426,24 +353,4 @@
     outline-offset: 2px;
     box-shadow: none;
   }
-
-  .navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
-    border-left-color: canvas;
-    border-top-color: canvas;
-  }
-
-  .navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
-    border-bottom-color: canvas;
-    border-right-color: canvas;
-  }
-
-  .navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
-    border-left-color: canvas;
-    border-bottom-color: canvas;
-  }
-
-  .navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
-    border-right-color: canvas;
-    border-top-color: canvas;
-  }
 }

@navikt/core/css/darkside/toggle-group.darkside.css

@@ -1,7 +1,7 @@
 .navds-toggle-group__wrapper {
   display: grid;
   justify-items: start;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-toggle-group__wrapper--fill {
@@ -13,11 +13,10 @@
   border-radius: var(--ax-border-radius-medium);
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--ax-border-default);
-  padding: var(--ax-spacing-1);
-  gap: var(--ax-spacing-1);
   display: inline-grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
+  gap: 1px;
 }
 
 /* Button */
@@ -25,14 +24,15 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--ax-spacing-1) var(--ax-spacing-3);
-  min-height: 2.5rem;
+  padding: var(--ax-space-4) var(--ax-space-12);
+  min-height: 3rem;
   border: none;
   cursor: pointer;
   background-color: transparent;
   color: var(--ax-text-default);
-  border-radius: var(--ax-border-radius-small);
+  border-radius: var(--ax-border-radius-medium);
   min-width: fit-content;
+  position: relative;
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hoverA);
@@ -42,18 +42,29 @@
   &:focus-visible {
     outline: 2px solid var(--ax-border-focus);
     outline-offset: 2px;
+    z-index: 1;
   }
 
-  &[aria-checked="true"] {
+  &[data-selected="true"] {
     background-color: var(--ax-bg-accent-strong-pressed);
     color: var(--ax-text-accent-contrast);
   }
+
+  &:not([data-selected="true"], :first-child, &[data-selected="true"] + &)::before {
+    content: "";
+    display: block;
+    width: 1px;
+    height: 50%;
+    background-color: var(--ax-border-subtleA);
+    left: -1px;
+    position: absolute;
+  }
 }
 
 .navds-toggle-group__button-inner {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 
   > * {
     flex-shrink: 0;
@@ -67,20 +78,20 @@
 /* Modifier neutral variant */
 :where(.navds-toggle-group--neutral) .navds-toggle-group__button {
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
-  &[aria-checked="true"] {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+  &[data-selected="true"] {
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 }
 
 /* Modifier small size */
 .navds-toggle-group--small {
   & .navds-toggle-group__button {
-    padding: var(--ax-spacing-05) var(--ax-spacing-3);
-    min-height: 1.5rem;
+    padding: var(--ax-space-2) var(--ax-space-12);
+    min-height: 2rem;
   }
 
   & .navds-toggle-group__button-inner > svg {
@@ -94,14 +105,13 @@
     border: 2px solid transparent;
   }
 
-  .navds-toggle-group__button[aria-checked="true"]:hover,
   .navds-toggle-group__button:hover {
     background-color: highlighttext;
     color: highlight;
     outline: 1px solid highlight;
   }
 
-  .navds-toggle-group__button[aria-checked="true"] {
+  .navds-toggle-group__button[data-selected="true"] {
     background-color: selecteditem;
     color: selecteditemtext;
     forced-color-adjust: none;

@navikt/core/css/darkside/tooltip.darkside.css

@@ -1,81 +1,106 @@
-@keyframes tooltipFadeIn {
-  0% {
-    opacity: 0;
+.navds-tooltip {
+  z-index: 3000;
+  background-color: var(--ax-bg-raised);
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-medium);
+  padding: 0 var(--ax-space-6);
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-duration: 150ms;
+  text-align: center;
+  border: 1px solid var(--ax-border-subtleA);
+  box-shadow: var(--ax-shadow-dialog);
+}
+
+.navds-tooltip:where([data-state="open"]):where([data-side="bottom"]) {
+  animation-name: aksel-tooltip-from-bottom, aksel-tooltip-fade-in;
+}
+
+.navds-tooltip:where([data-state="open"]):where([data-side="top"]) {
+  animation-name: aksel-tooltip-from-top, aksel-tooltip-fade-in;
+}
+
+.navds-tooltip:where([data-state="open"]):where([data-side="left"]) {
+  animation-name: aksel-tooltip-from-left, aksel-tooltip-fade-in;
+}
+
+.navds-tooltip:where([data-state="open"]):where([data-side="right"]) {
+  animation-name: aksel-tooltip-from-right, aksel-tooltip-fade-in;
+}
+
+@keyframes aksel-tooltip-from-bottom {
+  from {
+    transform: translateY(-4px);
   }
 
-  100% {
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-tooltip-from-top {
+  from {
+    transform: translateY(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-tooltip-from-left {
+  from {
+    transform: translateX(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-tooltip-from-right {
+  from {
+    transform: translateX(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-tooltip-fade-in {
+  from {
+    opacity: 0.01;
+  }
+
+  to {
     opacity: 1;
   }
 }
 
-.navds-tooltip {
-  z-index: var(--a-z-index-tooltip);
-  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
-  color: var(--ac-tooltip-text, var(--a-text-on-inverted));
-  border-radius: var(--a-border-radius-small);
-  padding: 0 var(--a-spacing-2);
-  align-items: center;
-  filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
-  display: flex;
-  flex-direction: column;
-  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  animation-duration: 0.2s;
-  animation-name: tooltipFadeIn;
-  text-align: center;
-}
-
-.navds-tooltip__arrow {
-  height: 0.4375rem;
-  width: 0.4375rem;
-  transform: rotate(45deg);
-  z-index: -1;
-  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
-  position: absolute;
-}
-
 .navds-tooltip__keys {
-  padding-bottom: var(--a-spacing-1);
+  padding-bottom: var(--ax-space-4);
   display: flex;
-  gap: var(--a-spacing-1);
+  gap: var(--ax-space-4);
 }
 
 .navds-tooltip__key {
-  font-family: var(--a-font-family);
-  background-color: var(--ac-tooltip-key-bg, var(--a-surface-neutral));
-  color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
-  border-radius: var(--a-border-radius-small);
-  padding: 0 var(--a-spacing-1);
+  font-family: var(--ax-font-family);
+  color: var(--ax-text-default);
+  padding: 0 var(--ax-space-4);
   min-width: 1.125rem;
   height: 1.125rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-}
+  border-radius: var(--ax-border-radius-small);
+  background: var(--ax-bg-moderateA);
 
-@media (forced-colors: active) {
-  .navds-tooltip {
-    --__a-tooltip-high-contrast-border: 1px solid transparent;
-
-    border: var(--__a-tooltip-high-contrast-border);
-  }
-
-  .navds-tooltip[data-side="top"] .navds-tooltip__arrow {
-    border-bottom: var(--__a-tooltip-high-contrast-border);
-    border-right: var(--__a-tooltip-high-contrast-border);
-  }
-
-  .navds-tooltip[data-side="right"] .navds-tooltip__arrow {
-    border-bottom: var(--__a-tooltip-high-contrast-border);
-    border-left: var(--__a-tooltip-high-contrast-border);
-  }
-
-  .navds-tooltip[data-side="bottom"] .navds-tooltip__arrow {
-    border-left: var(--__a-tooltip-high-contrast-border);
-    border-top: var(--__a-tooltip-high-contrast-border);
-  }
-
-  .navds-tooltip[data-side="left"] .navds-tooltip__arrow {
-    border-top: var(--__a-tooltip-high-contrast-border);
-    border-right: var(--__a-tooltip-high-contrast-border);
+  @media (forced-colors: active) {
+    & {
+      outline: 1px solid;
+    }
   }
 }

@navikt/core/css/darkside/typography.darkside.css

@@ -1,15 +1,3 @@
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
-
-/* ------------------------- Global typo-definitions ------------------------ */
-body,
-:host {
-  font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
-  line-height: 1.333;
-  font-size: 1.125rem;
-}
-
-/* ----------------------------- Typo-components ---------------------------- */
-
 /* Heading */
 .navds-heading {
   font-weight: var(--ax-font-weight-bold);
@@ -23,7 +11,7 @@ body,
 }
 
 .navds-heading--xlarge.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-5);
+  margin-bottom: var(--ax-space-20);
 }
 
 .navds-heading--large {
@@ -33,7 +21,7 @@ body,
 }
 
 .navds-heading--large.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-4);
+  margin-bottom: var(--ax-space-16);
 }
 
 /* Mobile scale */
@@ -45,7 +33,7 @@ body,
   }
 
   .navds-heading--xlarge.navds-typo--spacing {
-    margin-bottom: var(--ax-spacing-4);
+    margin-bottom: var(--ax-space-16);
   }
 
   .navds-heading--large {
@@ -55,7 +43,7 @@ body,
   }
 
   .navds-heading--large.navds-typo--spacing {
-    margin-bottom: var(--ax-spacing-3);
+    margin-bottom: var(--ax-space-12);
   }
 }
 
@@ -66,7 +54,7 @@ body,
 }
 
 .navds-heading--medium.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-3);
+  margin-bottom: var(--ax-space-12);
 }
 
 .navds-heading--small {
@@ -76,7 +64,7 @@ body,
 }
 
 .navds-heading--small.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-3);
+  margin-bottom: var(--ax-space-12);
 }
 
 .navds-heading--xsmall {
@@ -86,7 +74,7 @@ body,
 }
 
 .navds-heading--xsmall.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-3);
+  margin-bottom: var(--ax-space-12);
 }
 
 /* Ingress */
@@ -99,7 +87,7 @@ body,
 }
 
 .navds-ingress.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-10);
+  margin-bottom: var(--ax-space-40);
 }
 
 /* Body */
@@ -112,7 +100,7 @@ body,
 }
 
 .navds-body-long.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-7);
+  margin-bottom: var(--ax-space-28);
 }
 
 .navds-body-long--large {
@@ -122,7 +110,7 @@ body,
 }
 
 .navds-body-long--large.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-10);
+  margin-bottom: var(--ax-space-40);
 }
 
 .navds-body-long--small {
@@ -132,7 +120,7 @@ body,
 }
 
 .navds-body-long--small.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-6);
+  margin-bottom: var(--ax-space-24);
 }
 
 .navds-body-short {
@@ -144,7 +132,7 @@ body,
 }
 
 .navds-body-short.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-3);
+  margin-bottom: var(--ax-space-12);
 }
 
 .navds-body-short--large {
@@ -154,7 +142,7 @@ body,
 }
 
 .navds-body-short--large.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-4);
+  margin-bottom: var(--ax-space-16);
 }
 
 .navds-body-short--small {
@@ -164,7 +152,7 @@ body,
 }
 
 .navds-body-short--small.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-2);
+  margin-bottom: var(--ax-space-8);
 }
 
 /* Label */
@@ -177,7 +165,7 @@ body,
 }
 
 .navds-label.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-3);
+  margin-bottom: var(--ax-space-12);
 }
 
 .navds-label--small {
@@ -187,7 +175,7 @@ body,
 }
 
 .navds-label--small.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-2);
+  margin-bottom: var(--ax-space-8);
 }
 
 /* Small text */
@@ -199,7 +187,7 @@ body,
 }
 
 .navds-detail.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-2);
+  margin-bottom: var(--ax-space-8);
 }
 
 .navds-detail.navds-typo--uppercase {
@@ -211,11 +199,23 @@ body,
 }
 
 .navds-detail--small.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-2);
+  margin-bottom: var(--ax-space-8);
 }
 
 .navds-error-message {
   color: var(--ax-text-danger);
+
+  &.navds-error-message--show-icon {
+    display: flex;
+    gap: var(--ax-space-4);
+
+    & svg {
+      margin-top: 0.15em;
+      flex: 0 0 auto;
+      width: 1em;
+      height: 1em;
+    }
+  }
 }
 
 /* -------------------------------- Utilities ------------------------------- */

@navikt/core/css/form/combobox.css

@@ -50,7 +50,6 @@
   border-color: var(--a-border-subtle);
 }
 
-.navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
   width: var(--__ac-combobox-icon-size);
@@ -195,19 +194,6 @@
   }
 }
 
-.navds-combobox__button-clear {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  padding: 0;
-}
-
 .navds-combobox__input::-webkit-search-cancel-button {
   display: none;
 }
@@ -225,14 +211,12 @@
   padding: 0;
 }
 
-.navds-combobox__button-clear:active:hover,
 .navds-combobox__button-toggle-list:active:hover {
-  color: var(--ac-combobox-clear-icon-active, var(--a-text-action));
+  color: var(--a-text-action);
 }
 
-.navds-combobox__button-clear:hover,
 .navds-combobox__button-toggle-list:hover {
-  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
+  color: var(--a-text-action-selected);
 }
 
 .navds-combobox__button-toggle-list:focus-visible {
@@ -406,10 +390,6 @@
 }
 
 @media (forced-colors: active) {
-  .navds-combobox__button-clear:hover {
-    color: highlight;
-  }
-
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
     outline-color: highlight;
   }

@navikt/core/css/form/form.css

@@ -17,19 +17,6 @@
   color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
 }
 
-.navds-form-field .navds-error-message,
-.navds-fieldset .navds-error-message,
-.navds-file-item .navds-error-message {
-  display: flex;
-  gap: var(--a-spacing-2);
-}
-
-.navds-form-field .navds-error-message::before,
-.navds-fieldset .navds-error-message::before,
-.navds-file-item .navds-error-message::before {
-  content: "•";
-}
-
 .navds-form-field--disabled {
   opacity: 0.3;
   cursor: not-allowed;

@navikt/core/css/form/select.css

@@ -73,11 +73,15 @@
 /**
   Error handling
 */
-.navds-select--error > * select:not(:hover, :focus, :disabled) {
+.navds-select--error > * .navds-select__input:not(:hover, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
   border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }
 
+.navds-select--error .navds-select__input:focus {
+  box-shadow: var(--a-shadow-focus);
+}
+
 /**
   Disabled
 */

@navikt/core/css/form/switch.css

@@ -72,12 +72,15 @@
 .navds-switch__track {
   width: 2.75rem;
   height: 1.5rem;
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  background-color: var(--ac-switch-bg, var(--a-surface-default));
+  border: 2px solid var(--a-border-default);
   position: absolute;
   top: var(--a-spacing-3);
   left: 0;
   border-radius: var(--a-border-radius-full);
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: background-color, border-color;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .navds-switch--small > .navds-switch__track {
@@ -92,18 +95,20 @@
 
 .navds-switch__input:checked ~ .navds-switch__track {
   background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
+  border-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
 }
 
 .navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
+  background-color: var(--ac-switch-hover-bg, var(--a-surface-subtle));
 }
 
-.navds-switch__input:hover:checked ~ .navds-switch__track {
+.navds-switch__input:hover:checked:not(:disabled) ~ .navds-switch__track {
   background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
+  border-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
 }
 
 .navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  background-color: var(--ac-switch-bg, var(--a-surface-default));
 }
 
 .navds-switch__input:checked:disabled ~ .navds-switch__track {
@@ -129,15 +134,15 @@
 
 /* Thumb */
 .navds-switch__thumb {
-  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
+  background-color: var(--ac-switch-thumb-bg, var(--a-surface-neutral));
   color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
   border-radius: var(--a-border-radius-full);
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
   position: absolute;
   transform: translateX(0);
-  left: var(--a-spacing-05);
-  top: var(--a-spacing-05);
+  left: 0.0625rem;
+  top: 0.0625rem;
   transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
@@ -147,6 +152,11 @@
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(1.25rem);
   color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
+  background-color: var(--a-surface-default);
+  width: 1.25rem;
+  height: 1.25rem;
+  left: 0;
+  top: 0;
 }
 
 .navds-switch__input:checked ~ .navds-switch__track .navds-switch__checkmark {
@@ -195,6 +205,7 @@
 .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
 .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
   background-color: var(--a-surface-neutral-moderate);
+  border-color: var(--a-border-subtle);
 }
 
 .navds-switch--readonly > .navds-switch__label-wrapper,
@@ -212,12 +223,12 @@
 }
 
 .navds-switch--readonly .navds-switch__thumb {
-  background-color: var(--a-surface-subtle);
-  box-shadow: 0 0 0 2px var(--a-border-default);
+  background-color: var(--a-surface-neutral);
 }
 
 .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  color: var(--a-icon-subtle);
+  color: var(--a-icon-on-neutral);
+  background-color: var(--a-surface-neutral);
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -237,7 +248,9 @@
   }
 
   .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__thumb {
+  .navds-switch--readonly .navds-switch__thumb,
+  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
     background-color: fieldtext;
   }
 
@@ -246,11 +259,8 @@
     color: field;
   }
 
-  .navds-switch__track {
-    width: calc(2.75rem + 4px);
-    height: calc(1.5rem + 4px);
-    top: var(--a-spacing-3);
-    border: 2px solid fieldtext;
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    background-color: graytext;
   }
 
   .navds-switch__input:focus-visible ~ .navds-switch__track {
@@ -264,6 +274,7 @@
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
     background-color: graytext;
+    border-color: graytext;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {

@navikt/core/css/form/textarea.css

@@ -111,16 +111,13 @@
 /**
   Error handling
 */
-.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
   border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }
 
-@supports not selector(:focus-visible) {
-  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
-    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-  }
+.navds-textarea--error .navds-textarea__input:focus-visible {
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-textarea__input:disabled {

@navikt/core/css/link.css

@@ -30,7 +30,7 @@
   text-decoration: underline;
 }
 
-.navds-alert .navds-link,
+.navds-alert:not(.navds-alert--inline) .navds-link:not(:active, :focus-visible),
 .navds-confirmation-panel .navds-link {
   color: var(--a-text-default);
 }

@navikt/core/css/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@navikt/ds-css",
-  "version": "7.7.0",
-  "description": "CSS for NAV Designsystem",
-  "author": "Aksel | NAV designsystem team",
+  "version": "7.9.2",
+  "description": "CSS for Nav Designsystem",
+  "author": "Aksel | Nav designsystem team",
   "keywords": [
     "css"
   ],
@@ -20,29 +20,43 @@
     "type": "git",
     "url": "git+https://github.com/navikt/aksel.git"
   },
-  "main": "./dist/index.css",
   "scripts": {
-    "build": "node config/bundle.js",
+    "build": "node config/bundle.js && yarn build:darkside",
     "watch": "nodemon --ignore dist -e css --watch . --exec \"yarn build\"",
-    "css:get-version": "node config/get-version.js"
+    "css:get-version": "node config/get-version.js",
+    "build:darkside": "tsx ./config/bundle.darkside.ts",
+    "test": "yarn build && vitest run"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^7.7.0",
+    "@navikt/ds-tokens": "^7.9.2",
+    "@types/clean-css": "4.2.11",
     "autoprefixer": "^10.4.20",
+    "browserslist": "^4.24.2",
+    "clean-css": "5.3.3",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
+    "lightningcss": "^1.28.0",
     "lodash": "^4.17.21",
     "nodemon": "^3.0.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.31",
     "postcss-cli": "^9.0.0",
     "postcss-combine-duplicated-selectors": "10.0.3",
-    "postcss-import": "^14.1.0"
+    "postcss-import": "^14.1.0",
+    "tsx": "^4.19.1",
+    "vitest": "^2.1.8"
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "main": "./dist/index.css",
+  "exports": {
+    ".": "./dist/index.css",
+    "./dist/*": "./dist/*",
+    "./darkside": "./dist/darkside/index.min.css",
+    "./tokens.json": "./tokens.json"
+  }
 }

@navikt/core/css/table.css

@@ -156,7 +156,7 @@
   flex-shrink: 0;
 }
 
-.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
+.navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell, .navds-table__header-cell) {
   transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
 }
 
@@ -164,14 +164,10 @@
   cursor: pointer;
 }
 
-.navds-table__expandable-row--open .navds-table__data-cell {
+.navds-table__expandable-row--open :where(.navds-table__data-cell, .navds-table__header-cell) {
   border-bottom-color: transparent;
 }
 
-.navds-table__expandable-row--open .navds-table__header-cell {
-  border-color: var(--ac-table-row-border, var(--a-border-default));
-}
-
 .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
   border-color: transparent;
 }
@@ -206,7 +202,7 @@
   transition: transform 150ms ease-in-out;
 }
 
-.navds-table__toggle-expand-cell:hover {
+.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover {
   cursor: pointer;
 }
 

@navikt/core/css/tag.css

@@ -127,37 +127,43 @@
   color: var(--ac-tag-neutral-moderate-text, var(--a-text-default));
 }
 
-.navds-tag--alt1 {
+.navds-tag--alt1,
+.navds-tag--outline.navds-tag--meta-1 {
   border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
   background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
   color: var(--ac-tag-alt-1-text, var(--a-text-default));
 }
 
-.navds-tag--alt1-filled {
+.navds-tag--alt1-filled,
+.navds-tag--strong.navds-tag--meta-1 {
   border-color: transparent;
   background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
   color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
 }
 
-.navds-tag--alt1-moderate {
+.navds-tag--alt1-moderate,
+.navds-tag--moderate.navds-tag--meta-1 {
   border-color: transparent;
   background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
   color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
 }
 
-.navds-tag--alt2 {
+.navds-tag--alt2,
+.navds-tag--outline.navds-tag--meta-2 {
   border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
   background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
   color: var(--ac-tag-alt-2-text, var(--a-text-default));
 }
 
-.navds-tag--alt2-filled {
+.navds-tag--alt2-filled,
+.navds-tag--strong.navds-tag--meta-2 {
   border-color: transparent;
   background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
   color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
 }
 
-.navds-tag--alt2-moderate {
+.navds-tag--alt2-moderate,
+.navds-tag--moderate.navds-tag--meta-2 {
   border-color: transparent;
   background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
   color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));

@navikt/core/css/tokens.json

@@ -387,9 +387,6 @@
     "--ac-search-error-border": "--a-border-danger"
   },
   "combobox": {
-    "--ac-combobox-clear-icon": "--a-text-subtle",
-    "--ac-combobox-clear-icon-hover": "--a-text-action-selected",
-    "--ac-combobox-clear-icon-active": "--a-text-action",
     "--ac-combobox-list-bg": "--a-surface-default",
     "--ac-combobox-list-text": "--a-text-default",
     "--ac-combobox-list-border-color": "--a-border-divider",
@@ -414,11 +411,11 @@
   },
   "switch": {
     "--ac-switch-action": "--a-surface-action-selected",
-    "--ac-switch-bg": "--a-surface-neutral",
+    "--ac-switch-bg": "--a-surface-default",
     "--ac-switch-checked-bg": "--a-surface-action-selected",
-    "--ac-switch-hover-bg": "--a-surface-neutral-hover",
+    "--ac-switch-hover-bg": "--a-surface-subtle",
     "--ac-switch-checked-hover-bg": "--a-surface-action-selected-hover",
-    "--ac-switch-thumb-bg": "--a-surface-default",
+    "--ac-switch-thumb-bg": "--a-surface-neutral",
     "--ac-switch-thumb-icon": "--a-icon-subtle",
     "--ac-switch-thumb-icon-checked": "--a-icon-action-selected"
   },

@navikt/core/css/typography.css

@@ -216,6 +216,18 @@
   color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger)));
 }
 
+.navds-error-message.navds-error-message--show-icon {
+  display: flex;
+  gap: var(--a-spacing-1);
+}
+
+.navds-error-message.navds-error-message--show-icon svg {
+  margin-top: 0.15em;
+  flex: 0 0 auto;
+  width: 1em;
+  height: 1em;
+}
+
 .navds-typo--truncate {
   overflow: hidden;
   white-space: nowrap;

@navikt/core/react/.gitignore

@@ -0,0 +1 @@
+scripts/*.backup

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,80 @@
 # @navikt/ds-react
 
+## 7.9.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.9.2
+  - @navikt/aksel-icons@7.9.2
+
+## 7.9.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.9.1
+  - @navikt/aksel-icons@7.9.1
+
+## 7.9.0
+
+### Minor Changes
+
+- ErrorSummary: :sparkles: new prop to prefix error with a warning icon. ([#3445](https://github.com/navikt/aksel/pull/3445))
+  All form components: replace dot with warning icon in error message.
+
+### Patch Changes
+
+- Button: Fix edge-case where setting "loading={true}" in a Modal caused the button to get 0 width and not show spinner ([#3252](https://github.com/navikt/aksel/pull/3252))
+
+- Switch: Update switch to better reflect unchecked state. ([#3468](https://github.com/navikt/aksel/pull/3468))
+
+- Textarea: resize immediately upon receiving resize event (eg. inside modal opening). ([#3463](https://github.com/navikt/aksel/pull/3463))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.9.0
+  - @navikt/aksel-icons@7.9.0
+
+## 7.8.1
+
+### Patch Changes
+
+- Combobox: Only open dropdown-list onClick, not onFocus. ([#3440](https://github.com/navikt/aksel/pull/3440))
+
+- Combobox: Fix issue where you could select more options than defined in maxSelected ([#3434](https://github.com/navikt/aksel/pull/3434))
+
+- Timeline: In cases where earliest found date were after current date, timeline-start ended up defaulting to current date. ([#3458](https://github.com/navikt/aksel/pull/3458))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.8.1
+  - @navikt/aksel-icons@7.8.1
+
+## 7.8.0
+
+### Minor Changes
+
+- Chips.Removable: Removed prop `removeLabel` ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+- i18n: :sparkles: Implemented i18n support for all components. Components come with support for nb, nn and en locales ([Docs](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517)) ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+- Combobox: Removed clear button, removed tokens staring with `--ac-combobox-clear`, deprecated props `clearButton`/`clearButtonLabel`. ([#3433](https://github.com/navikt/aksel/pull/3433))
+
+- Combobox: Changed prop `maxSelected` to number ([#3433](https://github.com/navikt/aksel/pull/3433))
+
+- DatePicker/MonthPicker: Added new `translations` prop and deprecated `locale` prop ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+### Patch Changes
+
+- Timeline: Deprecated prop `axisLabelTemplates`. Use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) if you still need to change the date formats. ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+- Search: Deprecated prop `clearButtonLabel`. Use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) if you still need to change the label. ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+- Textarea: Deprecated prop `i18n`. Use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) if you still need to change these texts. ([#3429](https://github.com/navikt/aksel/pull/3429))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.8.0
+  - @navikt/aksel-icons@7.8.0
+
 ## 7.7.0
 
 ### Minor Changes

@navikt/core/react/README.md

@@ -1,9 +1,9 @@
 # Aksel React-components
 
-React-components for NAVs designsystem.
+React-components for Nav's design system.
 
 - Uses styling defined in `@navikt/ds-css`
-- All components implemented with React.forwardRef!
+- All components are implemented with React.forwardRef!
 - Most components extend native html-elements.
 
 ## Installation

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.7.0",
+  "version": "7.9.2",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -8,7 +8,7 @@
     "react",
     "typescript",
     "javascript",
-    "NAV"
+    "Nav"
   ],
   "repository": {
     "type": "git",
@@ -40,6 +40,16 @@
         "default": "./cjs/index.js"
       }
     },
+    "./locales": {
+      "import": {
+        "types": "./esm/util/i18n/locales/index.d.ts",
+        "default": "./esm/util/i18n/locales/index.js"
+      },
+      "require": {
+        "types": "./cjs/util/i18n/locales/index.d.ts",
+        "default": "./cjs/util/i18n/locales/index.js"
+      }
+    },
     "./Accordion": {
       "import": {
         "types": "./esm/accordion/index.d.ts",
@@ -593,10 +603,11 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "docgen": "yarn tsx ../../../scripts/docgen.ts",
+    "docgen": "tsx ../../../scripts/docgen.ts",
+    "i18n-jsdoc": "tsx ./scripts/addJsdocToLocales.ts",
     "write-packagejson": "echo '{\"type\": \"module\"}' > esm/package.json",
     "clean": "rimraf cjs esm",
-    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" ",
+    "build": "yarn i18n-jsdoc && concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && yarn i18n-jsdoc --cleanup",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "TZ=UTC vitest run -c tests/vitest.config.ts",
     "test:watch": "vitest watch"
@@ -604,20 +615,23 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.7.0",
-    "@navikt/ds-tokens": "^7.7.0",
+    "@navikt/aksel-icons": "^7.9.2",
+    "@navikt/ds-tokens": "^7.9.2",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.1"
   },
   "devDependencies": {
-    "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "^5.16.0",
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.2.0",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jscodeshift": "^0.11.11",
+    "aksel": "workspace:^",
     "concurrently": "9.0.1",
     "fast-glob": "3.2.11",
-    "jsdom": "24.0.0",
+    "jscodeshift": "^0.15.1",
+    "jsdom": "25.0.1",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
     "rimraf": "6.0.1",
@@ -625,7 +639,7 @@
     "tsc-alias": "1.8.8",
     "tsx": "^4.19.1",
     "typescript": "5.5.4",
-    "vitest": "^1.2.2"
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.30",
@@ -635,5 +649,6 @@
     "@types/react": {
       "optional": true
     }
-  }
+  },
+  "_comment": "The 'aksel' dependency tells yarn to install the root deps when installing deps for this package. Helps make it possible to contribute without access to GPR."
 }

@navikt/core/react/scripts/addJsdocToLocales.ts

@@ -0,0 +1,59 @@
+import fs from "fs";
+import jscodeshift from "jscodeshift";
+
+const j = jscodeshift.withParser("ts");
+const file = "src/util/i18n/locales/nb.ts";
+const backup = "scripts/nb.backup";
+
+function addJsdoc() {
+  if (fs.existsSync(backup)) {
+    // If last build failed, we need to restore the file so that we don't create duplicate JSDoc
+    console.info(
+      `WARNING: Restoring backup of ${file} - Uncommitted changes will be lost!`,
+    );
+    fs.copyFileSync(backup, file);
+  }
+
+  fs.copyFileSync(file, backup); // Create a copy of the original file that we can restore afterwards
+
+  const code = fs.readFileSync(file, "utf-8");
+  const parsedCode = j(code);
+  const defaultExport = parsedCode.find(j.ExportDefaultDeclaration);
+  const keys = defaultExport.find(j.ObjectProperty);
+  keys
+    .filter((key) => key.value.value.type === "StringLiteral")
+    .forEach((key) => {
+      // @ts-expect-error It works, doesn't it?
+      const value = key.value.value.value;
+      const foundCommentBlock = key.value.comments?.find(
+        (comment) => comment.type === "CommentBlock",
+      );
+      if (foundCommentBlock) {
+        foundCommentBlock.value = `${foundCommentBlock.value}\n* @default "${value}" `;
+      } else {
+        key.value.comments = [
+          ...(key.value.comments || []),
+          {
+            type: "CommentBlock",
+            value: `* @default "${value}" `,
+            leading: true,
+            trailing: false,
+          },
+        ];
+      }
+    });
+
+  const modifiedCode = parsedCode.toSource();
+  fs.writeFileSync(file, modifiedCode);
+}
+
+function cleanup() {
+  fs.copyFileSync(backup, file);
+  fs.unlinkSync(backup);
+}
+
+if (process.argv.includes("--cleanup")) {
+  cleanup();
+} else {
+  addJsdoc();
+}