Version Packages (#3563)

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/dependabot.yml

@@ -0,0 +1,20 @@
+version: 2
+registries:
+  npm-github:
+    type: npm-registry
+    url: https://npm.pkg.github.com
+    token: ${{ secrets.READER_TOKEN }}
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+    registries:
+      - npm-github
+
+  - package-ecosystem: github-actions
+    directory: "/"
+    schedule:
+      interval: weekly
+    registries:
+      - npm-github

.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,15 +52,15 @@ 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'"
-        uses: peter-evans/find-comment@v2
+        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
+        uses: peter-evans/find-comment@v3
         id: fc
         with:
           issue-number: ${{ github.event.pull_request.number }}
@@ -78,30 +68,17 @@ 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'
-        uses: peter-evans/create-or-update-comment@v3
+        if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
+        uses: peter-evans/create-or-update-comment@v4
         with:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
           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:
@@ -35,3 +35,4 @@ jobs:
           environment: dev
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          cache_invalidation: true

.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/docs/PilotMigration.mdx

@@ -0,0 +1,111 @@
+import { Markdown, Meta } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/3.Migration" />
+
+# Migration
+
+## Missing features
+
+Some components are not yet implemented in the new system. These are:
+
+- ConfirmationPanel
+- Panel
+- Dropdown
+
+## Tokens
+
+[See tokens docs here](https://main--66b4b3beb91603ed0ab5c45e.chromatic.com/?path=/docs/docs-become-a-pilot-team-4-tokens--docs).
+
+## CSS
+
+- Most of our CSS is re-written. This could potentially affect most custom overrides targeting `.navds`-classes.
+- You will not be able to use the old CSS and the new CSS at the same time.
+
+As we strongly recommend avoiding custom
+overrides where possible, we would like to encourage opening an
+issue if you find that you have to override our CSS to achieve
+something! It's these cases we want to know about so that we can fix
+them for everyone.
+
+### Removed component-tokens
+
+All component-spesific tokens are no longer supported. That means all tokens like these from `Button` are removed:
+
+```css
+--ac-button-primary-bg
+--ac-button-primary-text
+--ac-button-primary-hover-bg
+--ac-button-primary-active-bg
+```
+
+All component-based tokens are prefixed with `--ac`, so a global search in your codebase should find all of them.
+
+## React
+
+We have made some updates to `@navikt/ds-react` that you should be aware of before testing.
+
+### Accordion
+
+#### Props
+
+- `variant` is deprecated and will be removed in the future. We have not implemented it in the new system.
+- `headingSize` is deprecated and will be removed in the future. Accordion-size medium now equals `small` heading, and size small equals `xsmall` heading.
+
+#### Structural changes
+
+`<Accordion.Content/>` now has an extra nested `div` to allow for better animations. Custom CSS might break.
+
+### Datepicker
+
+Weeknumber-button uses our own button-component, and no longer a
+custom button.
+
+### GuidePanel
+
+Component got a complete overhaul. Custom overrides might break.
+
+### Popover, HelpText, Tooltip
+
+`arrow`-prop is removed. All of our floating dialog-elements now come without arrow.
+If you have custom `offset`-values, you might have to update them to accommodate this.
+
+### Pagination
+
+Button now uses our own button-component and `variant="tertiary-neutral".
+
+### Primitives
+
+Given that these are closely tied to our tokens, you will most
+likely have to update parts of them to test the new system.
+
+All primitives using our current `spacing`-tokens now has
+the new <code>space</code>-tokens. You can use the old tokens while
+testing, but the full release will remove them from the prop-list
+
+<Markdown>
+{`
+\`\`\`diff
+- <HStack gap="4">
++ <HStack gap="space-16">
+\`\`\`
+
+`}
+
+</Markdown>
+
+#### Page
+
+`background`-prop is removed. Now just uses `bg-default`-token.
+
+#### Box
+
+Since `<Box />` is directly tied to our tokens, we
+now offer `<Box.New />` as a temporary altenative. This
+component is based on our new tokens and can use the backgrounds,
+borders, border-radius and shadows from the new system. When the full release comes, we will update `<Box />` to use the new system, and provide tooling to handle this migration.
+
+**All instances of `<Box />` will break when using the new system if:**
+
+- `background`-prop is used
+- `shadow`-prop is used
+- `borderColor`-prop is used

.storybook/docs/PilotSetup.mdx

@@ -0,0 +1,119 @@
+import { Markdown, Meta } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/2.Setup" />
+
+# Setup
+
+## Clean project
+
+For new projects, setup is just as easy as before, but now requires `Theme`-component to be wrapped around your app.
+The component acts as a local feature-flag for the new implementation, with the added benefit of being able to switch between light and dark mode for you.
+
+Steps:
+
+- 1. Import new CSS `@navikt/ds-css/darkside`
+- 2. Import `Theme`-component from `@navikt/ds-react`
+- 3. Wrap your app in the `Theme`-component. You do not have to set the theme, but it defaults to `light`.
+
+```tsx
+import "@navikt/ds-css/darkside";
+import { Theme } from "@navikt/ds-react";
+
+export const App = () => (
+  <Theme theme="light">
+    <YourApp />
+  </Theme>
+);
+```
+
+### Only Tokens/CSS
+
+If you are not using any of our React-components, you can still switch between themes by setting `class="light"` or `class="dark"` on your root-element.
+
+## Theme switching
+
+The `Theme`-component has a `theme`-prop that can be set to either `light` or `dark`. This only sets a `class` on the element of `light` or `dark`, and the rest is handled by the CSS.
+
+You have the option of using `hasBackground` (defaults to true) to make `Theme` include a built on default background.
+
+Since theme-switching often is framework-spesific, we have not included a theme-toggle component or advanced logic for cookies/localstorage.
+You will have to implement this yourself using a custom setup, or use a library like [next-themes](https://github.com/pacocoursey/next-themes).
+
+We will continue to work on the whole `Theme` ecosystem, and might include more features in the future to handle this built in.
+
+### Theme-switch component
+
+This is context-based for what fits your application, but there are some general patterns you can follow.
+
+- **Light or Dark-mode**: Here you can use a simple Switch-component, or a Tertiary-button to toggle between them.
+
+- **Light, Dark or System-mode**: Here you can use a ToggleGroup or Select-component.
+
+```tsx
+isLightMode ? (
+  <Button
+    variant="tertiary-neutral"
+    icon={<SunIcon title="Switch to dark theme" />}
+  />
+) : (
+  <Button
+    variant="tertiary-neutral"
+    icon={<MoonIcon title="Switch to light theme" />}
+  />
+);
+```
+
+## I just want to test the new tokens
+
+Since you can use the new tokens alongside the old tokens, you can start by importing the new tokens as you would the old system.
+
+```css
+@import "@navikt/ds-tokens/darkside-css";
+```
+
+For SCSS, Less and JS they are also available under the paths
+
+```
+@navikt/ds-tokens/darkside-scss
+@navikt/ds-tokens/darkside-less
+@navikt/ds-tokens/darkside-js
+```
+
+**Note: To support theming, scss, less and js tokens are all now based on `css-variables`. This means you will have to import the css-version from `darkside-css` alongside them for everything to work.**
+
+## I want to test the new React-changes
+
+For the new system to work with our components, you will have to use the new `Theme`-component, and import the new CSS from `ds-css/darkside`
+
+```tsx
+import "@navikt/ds-css/darkside;";
+import { Theme } from "@navikt/ds-react";
+
+export const App = () => (
+  <Theme theme="light">
+    <YourApp />
+  </Theme>
+);
+```
+
+You will not be able to use the old CSS and the new CSS at the same time.
+You will have to check on all your custom overrides when making this switch.
+
+## I have to make some custom changes in darkmode
+
+Since our implementation is based on CSS, you can easily make custom adjustments where necessary.
+
+```css
+.my-component {
+  background-color: var(--ax-bg-raised);
+  color: var(--ax-text-neutral);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+}
+
+// Makes hover-state more visible only for darkmode
+.dark .my-component {
+  &:hover {
+    border-color: var(--ax-border-accent-default);
+  }
+}
+```

.storybook/docs/PilotsChangelog.mdx

@@ -0,0 +1,7 @@
+import { Meta, Title } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/5.Changelog" />
+
+# Darkside changelog
+
+Nothing to see here yet.

.storybook/docs/PilotsIntro.mdx

@@ -0,0 +1,84 @@
+import { Meta, Title } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/1.Intro" />
+
+# Becoming a pilot team
+
+We are looking for teams wanting to test our new theming implementation and darkmode before we go live with them later in 2025.
+
+## What is a pilot team?
+
+- A pilot team is a team that tests new implementations before they are released.
+- The team will test the new implementation in a real-world scenario and provide us with feedback.
+- The feedback will be used to improve the implementation before it replaces the old system.
+
+As a pilot team, we want close communication to get
+feedback on the changes. We want to know all the unclear and bad parts
+of our implementations, so that we can fix them all up before the big release.
+
+## Who are we mainly looking for?
+
+We are focusing on applications meant for our internal systems and services for now. This line is often a little blurry,
+but in short, all the public facing applications including those using "Dekoratøren" will not be considered internal.
+Support for "Dekoratøren" is quite far down the road at the moment.
+
+For teams wanting to test the new implementation, there are some key points to consider:
+
+- You _probably_ want to be in the earlier stages of developing a new product or service (to more easily test something in isolation).
+- You can test _any_ smaller subset of the new system as it's not an "all or nothing" ordeal. This could be: design tokens, darkmode, updated CSS or a combination of these.
+- You have the capacity to test and provide feedback on the new implementation (You'll be saving Nav countless hours for every hour spent!).
+
+Everyone is welcome to test the new implementation, but for some larger applications, it might be a bit early to adopt the new system. Keep in mind that there might be breaking changes as we go,
+and we won't have all tooling ready for adoption yet so you might have to do some manual work.
+
+## How to give feedback
+
+We welcome all forms of feedback:
+
+- **Issues**: [Open an issue on Github](https://github.com/navikt/aksel/issues)
+- **Disussions**: [Start a discussion](https://github.com/navikt/aksel/discussions/categories/darkside).
+- **Slack**: [Reach out to us on Slack #Aksel-designsystemet](https://nav-it.slack.com/archives/C7NE7A8UF)
+
+## What's new?
+
+- **Design tokens**: A complete re-write of our design tokens to allow for dark mode.
+- **Dark mode**: A new dark mode implementation.
+- **Updated CSS**: Now uses new tokens, built-in CSS-layers support and most components are re-written.
+- **Updated components**: Components use the new tokens and CSS.
+- **New Theme-component**: A new `<Theme/>`-component to handle the theming-switch locally.
+- **Updated documentation**: Updated documentation for the new implementation.
+
+## Documentation
+
+As we go, we will add more documentation to help you get started with the new implementation.
+
+- [Design i light og dark-mode](https://aksel.nav.no/god-praksis/artikler/design-i-dark-mode-og-light-mode)
+
+## How testing could affect your application
+
+All the changes are **opt in**, meaning you can choose to use nothing, some parts of the new implementation, or go all inn.
+You will still be able to recieve updates to the old implementation while we are in the testing phase.
+
+### Tokens
+
+We have made a complete re-write of our design tokens to allow for dark mode.
+This includes new backgrounds, text-colors, border-colors and updated spacing-tokens.
+
+- All tokens have a new prefix `--ax` to avoid conflicts with old tokens.
+- You will be able to use the new tokens at the same time as the old tokens.
+- All background, text-colors and border-colors have new names and "concepts" to learn. Migration will not be a quick one to one with old system.
+- New spacing tokens are now named `space` and based on `px` values.
+
+### CSS
+
+We have updated our CSS to be based on the new tokens for theming.
+
+- Most of our CSS is re-written.
+- All custom overrides targeting `.navds`-classes might have to be updated locally.
+- You will not be able to use the old CSS and the new CSS at the same time.
+- Component-based tokens are no longer avaliable.
+
+### React components
+
+We have made some prop-changes to some components to facilitate the new theming and updated CSS. You can read more about them under `migration` in the sidebar.
+We have hidden the changes behind a "feature-flag", so you will have to use the new `<Theme/>`-component when testing the new CSS.

.storybook/docs/PilotsTokens.mdx

@@ -0,0 +1,193 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/4.Tokens" />
+
+# Tokens
+
+## Spacing scale
+
+We have updated our spacing-scale to now be named `space` and for the values to reflect 1-1 the px-value.
+To migrate old `--a-spacing-X`-tokens, you can just take the value and 4x it to get the new `--ax-space-X`-token.
+
+```diff
+// Old
+--a-spacing-4: 1rem;
+
+// New
+--ax-space-16: 1rem;
+```
+
+```css
+--ax-space-0: 0rem;
+--ax-space-1: 0.0625rem;
+--ax-space-2: 0.125rem;
+--ax-space-4: 0.25rem;
+--ax-space-6: 0.375rem;
+--ax-space-8: 0.5rem;
+--ax-space-12: 0.75rem;
+--ax-space-16: 1rem;
+--ax-space-20: 1.25rem;
+--ax-space-24: 1.5rem;
+--ax-space-28: 1.75rem;
+--ax-space-32: 2rem;
+--ax-space-36: 2.25rem;
+--ax-space-40: 2.5rem;
+--ax-space-44: 2.75rem;
+--ax-space-48: 3rem;
+--ax-space-56: 3.5rem;
+--ax-space-64: 4rem;
+--ax-space-72: 4.5rem;
+--ax-space-80: 5rem;
+--ax-space-96: 6rem;
+--ax-space-128: 8rem;
+```
+
+## Global tokens
+
+Our global colors are Neutral, Accent, Success, Info, Warning, Danger, Brand-magenta, Brand-beige, Brand-blue, Meta-purple and Meta-lime.
+
+Beside `neutral` that has a `000`-token,
+all other color-tokens are named after the following pattern:
+
+```css
+--ax-[role]-000 // Neutral only
+--ax-[role]-100
+--ax-[role]-100A
+--ax-[role]-200
+--ax-[role]-200A
+--ax-[role]-300
+--ax-[role]-300A
+--ax-[role]-400
+--ax-[role]-400A
+--ax-[role]-500
+--ax-[role]-600
+--ax-[role]-700
+--ax-[role]-800
+--ax-[role]-900
+--ax-[role]-1000
+```
+
+## Semantic tokens
+
+We have two sets of semantic tokens, one for unique cases and one for all the roles.
+
+```css
+// Unique tokens
+--ax-bg-default   // Main page background.
+--ax-bg-input     // Background for input-fields.
+--ax-bg-overlay   // Background for overlays like Modal.
+--ax-bg-sunken    // Background for sunken sections to highlight ex. Cards.
+--ax-bg-raised    // Background for raised elements, like cards or dialogs.
+--ax-text-logo    // Nav-logo color.
+--ax-border-focus // Outline-color for focus-states.
+```
+
+For the remaning tokens, they are equal between all the global roles. This means that if you know the token for one role, you know it for all the roles.
+
+```css
+// Backgrounds
+
+// Soft is used for subtle backgrounds without state.
+--ax-bg-[role]-soft
+--ax-bg-[role]-softA
+
+// Moderate is used for subtle elements, with the option for states.
+// Should be used with a border in most cases to separate from the background.
+// Think Secondary-buttons, Alerts
+--ax-bg-[role]-moderate
+--ax-bg-[role]-moderateA
+--ax-bg-[role]-moderate-hover
+--ax-bg-[role]-moderate-hoverA
+--ax-bg-[role]-moderate-pressed
+--ax-bg-[role]-moderate-pressedA
+
+// Strong is used for elements that should stand out, with the option for states.
+// Think Primary-buttons, Checkbox, Chips
+// Text on strong should use contrast version of the color.
+--ax-bg-[role]-strong
+--ax-bg-[role]-strong-hover
+--ax-bg-[role]-strong-pressed
+
+// Text
+--ax-text-[role]
+--ax-text-[role]-subtle
+--ax-text-[role]-icon
+--ax-text-[role]-contrast
+
+// Borders
+--ax-border-[role]
+--ax-border-[role]-subtle
+--ax-border-[role]-subtleA
+--ax-border-[role]-strong
+```
+
+### Example use
+
+```css
+.alert--success {
+  background-color: var(--ax-bg-success-moderate);
+  border: var(--ax-border-success);
+}
+
+.alert--info {
+  background-color: var(--ax-bg-info-moderate);
+  border: var(--ax-border-info);
+}
+```
+
+## Shadows
+
+We now have only one shadow-token:
+
+```css
+--ax-shadow-dialog
+```
+
+## Z-index
+
+We have removed the `--a-z-index`-tokens.
+
+## Font-tokens, breakpoints etc
+
+The remaining tokens are kept the same as the old system, but now with updated prefix.
+
+```css
+--ax-font-weight-regular
+--ax-font-weight-bold
+--ax-font-size-small
+--ax-font-size-medium
+--ax-font-size-large
+--ax-font-size-xlarge
+--ax-font-size-heading-xsmall
+--ax-font-size-heading-small
+--ax-font-size-heading-medium
+--ax-font-size-heading-large
+--ax-font-size-heading-xlarge
+--ax-font-size-heading-2xlarge
+--ax-font-line-height-medium
+--ax-font-line-height-large
+--ax-font-line-height-xlarge
+--ax-font-line-height-heading-xsmall
+--ax-font-line-height-heading-small
+--ax-font-line-height-heading-medium
+--ax-font-line-height-heading-large
+--ax-font-line-height-heading-xlarge
+--ax-font-line-height-heading-2xlarge
+--ax-font-family
+--ax-breakpoint-2xl-down
+--ax-breakpoint-2xl
+--ax-breakpoint-xl-down
+--ax-breakpoint-xl
+--ax-breakpoint-lg-down
+--ax-breakpoint-lg
+--ax-breakpoint-md-down
+--ax-breakpoint-md
+--ax-breakpoint-sm-down
+--ax-breakpoint-sm
+--ax-breakpoint-xs
+--ax-border-radius-full
+--ax-border-radius-xlarge
+--ax-border-radius-large
+--ax-border-radius-medium
+--ax-border-radius-small
+```

.storybook/docs/getting-started.mdx

@@ -4,14 +4,14 @@ import AkselThumbnail from "./assets/aksel-thumbnail.png";
 import Components from "./assets/components.png";
 import Setup from "./assets/setup.png";
 
-<Meta title="Getting started" />
+<Meta title="Docs/Getting started" />
 
 <div className="sb-container">
   <div className='sb-section-title'>
 
     # 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/layout.css

@@ -19,3 +19,15 @@
 .rowgap-wrap {
   flex-wrap: wrap;
 }
+
+.sbdocs-content:not(.sb-unstyled) :is(p, li) {
+  font-size: 1.125rem;
+}
+
+.sbdocs-content:not(.sb-unstyled) li > p {
+  margin-bottom: 0;
+}
+
+.sbdocs-content:not(.sb-unstyled) li > ul {
+  margin-top: 0.25rem;
+}

.storybook/main.ts

@@ -46,12 +46,12 @@ export default {
   staticDirs: ["./public"],
   stories: () => [
     "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
-    "./*.mdx",
+    "./docs/*.mdx",
+    "./docs/*.stories.tsx",
     "../aksel.nav.no/website/pages/templates/**/*.tsx",
   ],
   addons: [
     "@storybook/addon-a11y",
-    "@whitespace/storybook-addon-html",
     "@storybook/addon-interactions",
     "@storybook/addon-themes",
     {

.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;
@@ -60,7 +58,8 @@ export default {
       storySort: {
         method: "alphabetical",
         order: [
-          "Getting started",
+          "Docs",
+          ["Getting started"],
           "ds-react",
           ["Primitives"],
           ["Default", "Controls"],
@@ -80,9 +79,9 @@ export default {
           {
             value: "default",
             icon: "hourglass",
-            title: "Default (old)",
+            title: "Legacy theme",
           },
-          { value: "darkside", icon: "beaker", title: "Darkside (new)" },
+          { value: "darkside", icon: "beaker", title: "Darkside theme" },
         ],
         showName: true,
         dynamicTitle: true,

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @navikt/aksel-icons
 
+## 7.12.2
+
+## 7.12.1
+
+## 7.12.0
+
+## 7.11.0
+
+### Minor Changes
+
+- Icons: Added new icons 'SortUp' and 'SortDown' 🎉. ([#3528](https://github.com/navikt/aksel/pull/3528))
+
+## 7.10.0
+
+## 7.9.2
+
+## 7.9.1
+
+## 7.9.0
+
+## 7.8.1
+
+## 7.8.0
+
+## 7.7.0
+
+## 7.6.0
+
+### Minor Changes
+
+- Icons: Added new icons 'TruckPercent' and 'ShieldCheckmark' 🎉. ([#3416](https://github.com/navikt/aksel/pull/3416))
+
+## 7.5.3
+
 ## 7.5.2
 
 ## 7.5.1

@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,13 +22,13 @@
     "@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",
     "postcss-url": "^10.1.3",
     "typescript": "5.5.4",
-    "vite": "^5.4.6",
+    "vite": "^5.4.12",
     "vite-plugin-singlefile": "^1.0.0",
     "vite-plugin-svgr": "^4.2.0"
   }

@navikt/aksel-icons/icons/ArrowRedo.yml

@@ -13,5 +13,5 @@ keywords:
   - forward
   - videresend
 variant: Stroke
-updated_at: 23.02.2024
+updated_at: 05.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/BoneBroken.yml

@@ -15,5 +15,5 @@ keywords:
   - risiko
   - forsiktighet
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 27.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Code.yml

@@ -15,5 +15,5 @@ keywords:
   - markup-språk
   - kildekode
 variant: Stroke
-updated_at: 01.03.2024
+updated_at: 18.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Equals.yml

@@ -6,5 +6,5 @@ keywords:
   - sann
   - resultat
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 24.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Expand.yml

@@ -9,5 +9,5 @@ keywords:
   - open
   - åpne
 variant: Stroke
-updated_at: 24.01.2024
+updated_at: 16.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Hanger.yml

@@ -10,5 +10,5 @@ keywords:
   - wardrobe
   - kleshenger
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 12.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Kroner.yml

@@ -7,5 +7,5 @@ keywords:
   - penger
   - norske kroner
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 03.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Leave.yml

@@ -15,5 +15,5 @@ keywords:
   - avslutt
   - avslutt
 variant: Stroke
-updated_at: 25.04.2024
+updated_at: 06.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Paragraph.yml

@@ -20,5 +20,5 @@ keywords:
   - ansvar
   - paragraf
 variant: Stroke
-updated_at: 04.01.2024
+updated_at: 18.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/SealXMark.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0091 3.05126C12.9222 1.88827 11.0778 1.88827 9.99089 3.05126L9.20244 3.89486C8.95602 4.15852 8.60767 4.30281 8.24698 4.29063L7.09295 4.25162C5.502 4.19786 4.19787 5.50199 4.25164 7.09294L4.29064 8.24697C4.30283 8.60766 4.15853 8.95601 3.89487 9.20243L3.05127 9.99087C1.88828 11.0778 1.88828 12.9221 3.05127 14.0091L3.89487 14.7975C4.15853 15.044 4.30283 15.3923 4.29064 15.753L4.25164 16.907C4.19787 18.498 5.502 19.8021 7.09295 19.7483L8.24698 19.7093C8.60767 19.6972 8.95602 19.8414 9.20244 20.1051L9.99089 20.9487C11.0778 22.1117 12.9222 22.1117 14.0091 20.9487L14.7976 20.1051C15.044 19.8414 15.3923 19.6972 15.753 19.7093L16.907 19.7483C18.498 19.8021 19.8021 18.498 19.7484 16.907L19.7094 15.753C19.6972 15.3923 19.8415 15.044 20.1051 14.7975L20.9487 14.0091C22.1117 12.9221 22.1117 11.0778 20.9487 9.99087L20.1051 9.20243C19.8415 8.95601 19.6972 8.60766 19.7094 8.24697L19.7484 7.09294C19.8021 5.50199 18.498 4.19786 16.907 4.25162L15.753 4.29063C15.3923 4.30281 15.044 4.15852 14.7976 3.89486L14.0091 3.05126ZM11.0868 4.07549C11.5808 3.54686 12.4192 3.54686 12.9132 4.07549L13.7017 4.91909C14.2438 5.49914 15.0102 5.81659 15.8037 5.78977L16.9577 5.75077C17.6809 5.72633 18.2737 6.31912 18.2492 7.04228L18.2102 8.19631C18.1834 8.98981 18.5008 9.75618 19.0809 10.2983L19.9245 11.0868C20.4531 11.5808 20.4531 12.4192 19.9245 12.9132L19.0809 13.7017C18.5008 14.2438 18.1834 15.0102 18.2102 15.8037L18.2492 16.9577C18.2737 17.6809 17.6809 18.2736 16.9577 18.2492L15.8037 18.2102C15.0102 18.1834 14.2438 18.5008 13.7017 19.0809L12.9132 19.9245C12.4192 20.4531 11.5808 20.4531 11.0868 19.9245L10.2983 19.0809C9.75619 18.5008 8.98982 18.1834 8.19632 18.2102L7.04229 18.2492C6.31913 18.2736 5.72634 17.6809 5.75078 16.9577L5.78978 15.8037C5.8166 15.0102 5.49916 14.2438 4.91911 13.7017L4.0755 12.9132C3.54687 12.4192 3.54687 11.5808 4.0755 11.0868L4.91911 10.2983C5.49916 9.75618 5.8166 8.98981 5.78978 8.19631L5.75078 7.04228C5.72634 6.31912 6.31913 5.72633 7.04229 5.75077L8.19632 5.78977C8.98982 5.81659 9.75619 5.49915 10.2983 4.91909L11.0868 4.07549ZM8.7195 8.71973C9.01239 8.42684 9.48727 8.42684 9.78016 8.71973L11.9998 10.9394L14.2195 8.71973C14.5124 8.42684 14.9873 8.42684 15.2802 8.71973C15.5731 9.01262 15.5731 9.4875 15.2802 9.78039L13.0605 12.0001L15.2802 14.2197C15.5731 14.5126 15.5731 14.9875 15.2802 15.2804C14.9873 15.5733 14.5124 15.5733 14.2195 15.2804L11.9998 13.0607L9.78016 15.2804C9.48727 15.5733 9.01239 15.5733 8.7195 15.2804C8.42661 14.9875 8.42661 14.5126 8.7195 14.2197L10.9392 12.0001L8.7195 9.78039C8.42661 9.4875 8.42661 9.01262 8.7195 8.71973Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0091 3.05126C12.9222 1.88827 11.0778 1.88827 9.99089 3.05126L9.20244 3.89486C8.95602 4.15852 8.60767 4.30281 8.24699 4.29063L7.09295 4.25162C5.502 4.19786 4.19787 5.50199 4.25164 7.09294L4.29064 8.24697C4.30283 8.60766 4.15854 8.95601 3.89488 9.20243L3.05128 9.99087C1.88828 11.0778 1.88828 12.9221 3.05128 14.0091L3.89488 14.7975C4.15854 15.044 4.30283 15.3923 4.29064 15.753L4.25164 16.907C4.19787 18.498 5.502 19.8021 7.09296 19.7483L8.24699 19.7093C8.60767 19.6972 8.95602 19.8414 9.20244 20.1051L9.99089 20.9487C11.0778 22.1117 12.9222 22.1117 14.0091 20.9487L14.7976 20.1051C15.044 19.8414 15.3923 19.6972 15.753 19.7093L16.9071 19.7483C18.498 19.8021 19.8021 18.498 19.7484 16.907L19.7094 15.753C19.6972 15.3923 19.8415 15.044 20.1051 14.7975L20.9487 14.0091C22.1117 12.9221 22.1117 11.0778 20.9487 9.99087L20.1051 9.20243C19.8415 8.95601 19.6972 8.60766 19.7094 8.24697L19.7484 7.09294C19.8021 5.50199 18.498 4.19786 16.9071 4.25162L15.753 4.29063C15.3923 4.30281 15.044 4.15852 14.7976 3.89486L14.0091 3.05126ZM11.0868 4.07549C11.5808 3.54686 12.4192 3.54686 12.9132 4.07549L13.7017 4.91909C14.2438 5.49914 15.0102 5.81659 15.8037 5.78977L16.9577 5.75077C17.6809 5.72633 18.2737 6.31912 18.2492 7.04228L18.2102 8.19631C18.1834 8.98981 18.5008 9.75618 19.0809 10.2983L19.9245 11.0868C20.4531 11.5808 20.4531 12.4192 19.9245 12.9132L19.0809 13.7017C18.5008 14.2438 18.1834 15.0102 18.2102 15.8037L18.2492 16.9577C18.2737 17.6809 17.6809 18.2736 16.9577 18.2492L15.8037 18.2102C15.0102 18.1834 14.2438 18.5008 13.7017 19.0809L12.9132 19.9245C12.4192 20.4531 11.5808 20.4531 11.0868 19.9245L10.2983 19.0809C9.7562 18.5008 8.98983 18.1834 8.19632 18.2102L7.04229 18.2492C6.31913 18.2736 5.72634 17.6809 5.75078 16.9577L5.78978 15.8037C5.8166 15.0102 5.49916 14.2438 4.91911 13.7017L4.07551 12.9132C3.54687 12.4192 3.54687 11.5808 4.07551 11.0868L4.91911 10.2983C5.49916 9.75618 5.8166 8.98981 5.78978 8.19631L5.75078 7.04228C5.72634 6.31912 6.31913 5.72633 7.04229 5.75077L8.19632 5.78977C8.98982 5.81659 9.75619 5.49915 10.2983 4.91909L11.0868 4.07549ZM8.7195 8.71973C9.0124 8.42684 9.48727 8.42684 9.78016 8.71973L11.9998 10.9394L14.2195 8.71973C14.5124 8.42684 14.9873 8.42684 15.2802 8.71973C15.5731 9.01262 15.5731 9.4875 15.2802 9.78039L13.0605 12.0001L15.2802 14.2197C15.5731 14.5126 15.5731 14.9875 15.2802 15.2804C14.9873 15.5733 14.5124 15.5733 14.2195 15.2804L11.9998 13.0607L9.78016 15.2804C9.48727 15.5733 9.0124 15.5733 8.7195 15.2804C8.42661 14.9875 8.42661 14.5126 8.7195 14.2197L10.9392 12.0001L8.7195 9.78039C8.42661 9.4875 8.42661 9.01262 8.7195 8.71973Z" fill="#23262A"/>
 </svg>

@navikt/aksel-icons/icons/ShieldCheckmark.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.75 4.01992C19.75 3.53224 19.3003 3.16875 18.8235 3.27093L18.4572 3.34943C14.2007 4.26153 9.79929 4.26153 5.54282 3.34943L5.17649 3.27093C4.69967 3.16875 4.25 3.53223 4.25 4.01992V13.0001C4.25 17.2803 7.71979 20.7501 12 20.7501C16.2802 20.7501 19.75 17.2803 19.75 13.0001V4.01992ZM5.75 4.92339C9.87693 5.73687 14.1231 5.73687 18.25 4.92339V13.0001C18.25 16.4519 15.4518 19.2501 12 19.2501C8.54822 19.2501 5.75 16.4519 5.75 13.0001V4.92339ZM15.7803 10.2803C16.0732 9.98744 16.0732 9.51256 15.7803 9.21967C15.4874 8.92678 15.0126 8.92678 14.7197 9.21967L11 12.9393L9.28033 11.2197C8.98744 10.9268 8.51256 10.9268 8.21967 11.2197C7.92678 11.5126 7.92678 11.9874 8.21967 12.2803L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L15.7803 10.2803Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/ShieldCheckmark.yml

@@ -0,0 +1,14 @@
+name: ShieldCheckmark
+category: Law and security
+sub_category: Security
+keywords:
+  - sikkerhet
+  - security
+  - beskyttelse
+  - sikkert
+  - kryptert
+  - encrypted
+  - secured
+variant: Stroke
+updated_at: 29.11.2024
+created_at: 18.11.2024

@navikt/aksel-icons/icons/ShieldCheckmarkFill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.75 4.01971C19.75 3.53202 19.3003 3.16854 18.8235 3.27071L18.4572 3.34921C14.2007 4.26131 9.79929 4.26131 5.54282 3.34921L5.17649 3.27071C4.69967 3.16854 4.25 3.53202 4.25 4.01971V12.9999C4.25 17.2801 7.71979 20.7499 12 20.7499C16.2802 20.7499 19.75 17.2801 19.75 12.9999V4.01971ZM15.7803 10.2803C16.0732 9.98744 16.0732 9.51256 15.7803 9.21967C15.4874 8.92678 15.0126 8.92678 14.7197 9.21967L11 12.9393L9.28033 11.2197C8.98744 10.9268 8.51256 10.9268 8.21967 11.2197C7.92678 11.5126 7.92678 11.9874 8.21967 12.2803L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L15.7803 10.2803Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/ShieldCheckmarkFill.yml

@@ -0,0 +1,14 @@
+name: ShieldCheckmarkFill
+category: Law and security
+sub_category: Security
+keywords:
+  - sikkerhet
+  - security
+  - beskyttelse
+  - sikkert
+  - kryptert
+  - encrypted
+  - secured
+variant: Fill
+updated_at: 29.11.2024
+created_at: 18.11.2024

@navikt/aksel-icons/icons/ShieldLock.yml

@@ -9,6 +9,7 @@ keywords:
   - låst
   - kryptert
   - encrypted
+  - locked
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 29.11.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ShieldLockFill.yml

@@ -9,6 +9,7 @@ keywords:
   - låst
   - kryptert
   - encrypted
+  - locked
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 29.11.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Snow.yml

@@ -6,5 +6,5 @@ keywords:
   - crystal
   - snø
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 23.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/SortDown.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0303 18.5303C17.8897 18.671 17.6989 18.75 17.5 18.75C17.3011 18.75 17.1103 18.671 16.9697 18.5303L13.4697 15.0303C13.1768 14.7374 13.1768 14.2626 13.4697 13.9697C13.7626 13.6768 14.2374 13.6768 14.5303 13.9697L16.75 16.1893V6C16.75 5.58579 17.0858 5.25 17.5 5.25C17.9142 5.25 18.25 5.58579 18.25 6V16.1893L20.4697 13.9697C20.7626 13.6768 21.2374 13.6768 21.5303 13.9697C21.8232 14.2626 21.8232 14.7374 21.5303 15.0303L18.0303 18.5303ZM2.75 6.25C2.33579 6.25 2 6.58579 2 7C2 7.41421 2.33579 7.75 2.75 7.75L12.25 7.75C12.6642 7.75 13 7.41421 13 7C13 6.58579 12.6642 6.25 12.25 6.25L2.75 6.25ZM2.75 11.25C2.33579 11.25 2 11.5858 2 12C2 12.4142 2.33579 12.75 2.75 12.75L10.25 12.75C10.6642 12.75 11 12.4142 11 12C11 11.5858 10.6642 11.25 10.25 11.25H2.75ZM2 17C2 16.5858 2.33579 16.25 2.75 16.25H8.25C8.66421 16.25 9 16.5858 9 17C9 17.4142 8.66421 17.75 8.25 17.75H2.75C2.33579 17.75 2 17.4142 2 17Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/SortDown.yml

@@ -0,0 +1,11 @@
+name: SortDown
+category: Interface
+sub_category: Filtering and sorting
+keywords:
+  - sort
+  - sortering
+  - synkende
+  - descending
+variant: Stroke
+updated_at: 27.01.2025
+created_at: 27.01.2025

@navikt/aksel-icons/icons/SortUp.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0303 5.46967C17.8897 5.32902 17.6989 5.25 17.5 5.25C17.3011 5.25 17.1103 5.32902 16.9697 5.46967L13.4697 8.96967C13.1768 9.26256 13.1768 9.73744 13.4697 10.0303C13.7626 10.3232 14.2374 10.3232 14.5303 10.0303L16.75 7.81066V18C16.75 18.4142 17.0858 18.75 17.5 18.75C17.9142 18.75 18.25 18.4142 18.25 18V7.81066L20.4697 10.0303C20.7626 10.3232 21.2374 10.3232 21.5303 10.0303C21.8232 9.73744 21.8232 9.26256 21.5303 8.96967L18.0303 5.46967ZM2.75 17.75C2.33579 17.75 2 17.4142 2 17C2 16.5858 2.33579 16.25 2.75 16.25L12.25 16.25C12.6642 16.25 13 16.5858 13 17C13 17.4142 12.6642 17.75 12.25 17.75L2.75 17.75ZM2.75 12.75C2.33579 12.75 2 12.4142 2 12C2 11.5858 2.33579 11.25 2.75 11.25L10.25 11.25C10.6642 11.25 11 11.5858 11 12C11 12.4142 10.6642 12.75 10.25 12.75H2.75ZM2 7C2 7.41421 2.33579 7.75 2.75 7.75H8.25C8.66421 7.75 9 7.41421 9 7C9 6.58579 8.66421 6.25 8.25 6.25H2.75C2.33579 6.25 2 6.58579 2 7Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/SortUp.yml

@@ -0,0 +1,11 @@
+name: SortUp
+category: Interface
+sub_category: Filtering and sorting
+keywords:
+  - sort
+  - sortering
+  - stigende
+  - ascending
+variant: Stroke
+updated_at: 27.01.2025
+created_at: 27.01.2025

@navikt/aksel-icons/icons/StarsEu.yml

@@ -6,5 +6,5 @@ keywords:
   - europa
   - europe
 variant: Stroke
-updated_at: 08.07.2024
+updated_at: 23.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/TrendDown.yml

@@ -12,5 +12,5 @@ keywords:
   - diagram
   - analyse
 variant: Stroke
-updated_at: 05.07.2024
+updated_at: 18.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/TrendFlat.yml

@@ -12,5 +12,5 @@ keywords:
   - diagram
   - analyse
 variant: Stroke
-updated_at: 05.07.2024
+updated_at: 26.09.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/TruckPercent.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 5.5C2.25 4.80964 2.80964 4.25 3.5 4.25H14.5C15.1904 4.25 15.75 4.80964 15.75 5.5V7.25H18.6615C19.1726 7.25 19.6322 7.56119 19.8221 8.03576L21.75 12.8556V16.5C21.75 17.1904 21.1904 17.75 20.5 17.75H19.75C19.75 19.1307 18.6307 20.25 17.25 20.25C15.8693 20.25 14.75 19.1307 14.75 17.75H9.75C9.75 19.1307 8.63071 20.25 7.25 20.25C5.86929 20.25 4.75 19.1307 4.75 17.75H3.5C2.80964 17.75 2.25 17.1904 2.25 16.5V5.5ZM9.25018 16.25C8.79408 15.6428 8.06791 15.25 7.25 15.25C6.43209 15.25 5.70592 15.6428 5.24982 16.25H3.75V5.75H14.25V16.25H9.25018ZM15.75 15.7498C16.1678 15.436 16.6872 15.25 17.25 15.25C18.0679 15.25 18.7941 15.6428 19.2502 16.25H20.25V13.1444L18.4922 8.75H15.75V15.7498ZM16.25 17.75C16.25 17.1977 16.6977 16.75 17.25 16.75C17.8023 16.75 18.25 17.1977 18.25 17.75C18.25 18.3023 17.8023 18.75 17.25 18.75C16.6977 18.75 16.25 18.3023 16.25 17.75ZM7.25 16.75C6.69772 16.75 6.25 17.1977 6.25 17.75C6.25 18.3023 6.69772 18.75 7.25 18.75C7.80228 18.75 8.25 18.3023 8.25 17.75C8.25 17.1977 7.80228 16.75 7.25 16.75ZM5.96968 12.9697C5.67678 13.2626 5.67678 13.7374 5.96968 14.0303C6.26257 14.3232 6.73744 14.3232 7.03034 14.0303L12.0303 9.03033C12.3232 8.73744 12.3232 8.26256 12.0303 7.96967C11.7374 7.67678 11.2626 7.67678 10.9697 7.96967L5.96968 12.9697ZM7 7.875C6.37868 7.875 5.875 8.37868 5.875 9C5.875 9.62132 6.37868 10.125 7 10.125C7.62132 10.125 8.125 9.62132 8.125 9C8.125 8.37868 7.62132 7.875 7 7.875ZM9.875 13C9.875 12.3787 10.3787 11.875 11 11.875C11.6213 11.875 12.125 12.3787 12.125 13C12.125 13.6213 11.6213 14.125 11 14.125C10.3787 14.125 9.875 13.6213 9.875 13Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/TruckPercent.yml

@@ -0,0 +1,16 @@
+name: TruckPercent
+category: Transportation
+sub_category: Vehicles
+keywords:
+  - pant
+  - lån
+  - gjeld
+  - lastebil
+  - prosent
+  - mortgage
+  - loan
+  - debt
+  - percentage
+variant: Stroke
+updated_at: 27.11.2024
+created_at: 27.11.2024

@navikt/aksel-icons/icons/TruckPercentFill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 5.5C2.25 4.80964 2.74746 4.25 3.36111 4.25H13.1389C13.7525 4.25 14.25 4.80964 14.25 5.5V15.8767C14.25 15.9222 14.2374 15.9667 14.2147 16.0061C13.9582 16.4516 13.7969 16.9589 13.7588 17.5002C13.7491 17.6379 13.6381 17.75 13.5 17.75H11C10.8619 17.75 10.7509 17.6377 10.7412 17.5C10.613 15.6837 9.09893 14.25 7.25 14.25C5.40107 14.25 3.887 15.6837 3.75879 17.5C3.74907 17.6377 3.63807 17.75 3.5 17.75H3.36111C2.74746 17.75 2.25 17.1904 2.25 16.5V5.5ZM21.0372 17.629C21.4587 17.4281 21.75 16.998 21.75 16.5V12.9037C21.75 12.8719 21.7439 12.8404 21.7321 12.8109L19.8221 8.03576C19.6322 7.56119 19.1726 7.25 18.6615 7.25H16C15.8619 7.25 15.75 7.36193 15.75 7.5V8.75V14.1913C15.75 14.3749 15.9424 14.4972 16.1161 14.4377C16.4717 14.316 16.8532 14.25 17.25 14.25C19.0723 14.25 20.5693 15.6426 20.7348 17.4216C20.7494 17.5783 20.8952 17.6967 21.0372 17.629ZM17.25 15.25C15.8693 15.25 14.75 16.3693 14.75 17.75C14.75 19.1307 15.8693 20.25 17.25 20.25C18.6307 20.25 19.75 19.1307 19.75 17.75C19.75 16.3693 18.6307 15.25 17.25 15.25ZM4.75 17.75C4.75 16.3693 5.86929 15.25 7.25 15.25C8.63071 15.25 9.75 16.3693 9.75 17.75C9.75 19.1307 8.63071 20.25 7.25 20.25C5.86929 20.25 4.75 19.1307 4.75 17.75ZM5.21968 11.9697C4.92678 12.2626 4.92678 12.7374 5.21968 13.0303C5.51257 13.3232 5.98744 13.3232 6.28034 13.0303L11.2803 8.03033C11.5732 7.73744 11.5732 7.26256 11.2803 6.96967C10.9874 6.67678 10.5126 6.67678 10.2197 6.96967L5.21968 11.9697ZM6.25 6.875C5.62868 6.875 5.125 7.37868 5.125 8C5.125 8.62132 5.62868 9.125 6.25 9.125C6.87132 9.125 7.375 8.62132 7.375 8C7.375 7.37868 6.87132 6.875 6.25 6.875ZM9.125 12C9.125 11.3787 9.62868 10.875 10.25 10.875C10.8713 10.875 11.375 11.3787 11.375 12C11.375 12.6213 10.8713 13.125 10.25 13.125C9.62868 13.125 9.125 12.6213 9.125 12Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/TruckPercentFill.yml

@@ -0,0 +1,16 @@
+name: TruckPercentFill
+category: Transportation
+sub_category: Vehicles
+keywords:
+  - pant
+  - lån
+  - gjeld
+  - lastebil
+  - prosent
+  - mortgage
+  - loan
+  - debt
+  - percentage
+variant: Fill
+updated_at: 27.11.2024
+created_at: 27.11.2024

@navikt/aksel-icons/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "7.5.2",
-  "author": "Aksel | NAV",
+  "version": "7.12.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,35 @@
 # @navikt/aksel-stylelint
 
+## 7.12.2
+
+## 7.12.1
+
+## 7.12.0
+
+## 7.11.0
+
+## 7.10.0
+
+## 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
+
+## 7.5.3
+
 ## 7.5.2
 
 ## 7.5.1

@navikt/aksel-stylelint/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.5.2",
-  "author": "Aksel | NAV",
+  "version": "7.12.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.5.2",
-    "@navikt/ds-tokens": "^7.5.2",
+    "@navikt/ds-css": "^7.12.2",
+    "@navikt/ds-tokens": "^7.12.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,96 @@
 # @navikt/aksel
 
+## 7.12.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.12.2
+
+## 7.12.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.12.1
+
+## 7.12.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.12.0
+
+## 7.11.0
+
+### Patch Changes
+
+- Updated dependencies [[`c73db43`](https://github.com/navikt/aksel/commit/c73db43c9638b922388ef6684c016663a0a29873), [`c73db43`](https://github.com/navikt/aksel/commit/c73db43c9638b922388ef6684c016663a0a29873)]:
+  - @navikt/ds-css@7.11.0
+
+## 7.10.0
+
+### Patch Changes
+
+- Updated dependencies [[`d29509d`](https://github.com/navikt/aksel/commit/d29509dc0ad0ef6bff38ad9a2a820d3bd1770aaa), [`fad913c`](https://github.com/navikt/aksel/commit/fad913ce6b27580a2f7b54984955324d1af08196), [`715a34a`](https://github.com/navikt/aksel/commit/715a34ac7d4aa46b5b7b5990e5e1cd528cfd7f6b)]:
+  - @navikt/ds-css@7.10.0
+
+## 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
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.7.0
+
+## 7.6.0
+
+### Patch Changes
+
+- Updated dependencies [[`dce149f`](https://github.com/navikt/aksel/commit/dce149fca40147440148371db846fb452ab7b5f2), [`34538a1`](https://github.com/navikt/aksel/commit/34538a1cbe30e0c951477cb4a379d648c93733fd), [`641276b`](https://github.com/navikt/aksel/commit/641276bb44919302d19bbc76d30452a5c15536af), [`9f088a9`](https://github.com/navikt/aksel/commit/9f088a93733a038bd0c4f4cd70f7fd3894ee9997), [`6d74cb7`](https://github.com/navikt/aksel/commit/6d74cb72ad522a73a926bbfbd2eaf526388c4826), [`fa2904d`](https://github.com/navikt/aksel/commit/fa2904d54b282da06fc04cfc99be5dd0b3e8d352)]:
+  - @navikt/ds-css@7.6.0
+
+## 7.5.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.3
+
 ## 7.5.2
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.5.2",
+  "version": "7.12.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.5.2",
+    "@navikt/ds-css": "^7.12.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,98 @@
 # @navikt/ds-css
 
+## 7.12.2
+
+## 7.12.1
+
+## 7.12.0
+
+## 7.11.0
+
+### Patch Changes
+
+- ExpansionCard: Removed dynamic padding on button-element. ([#3532](https://github.com/navikt/aksel/pull/3532))
+
+- Modal: Defaults to `margin: auto` for tailwind 4 support. ([#3532](https://github.com/navikt/aksel/pull/3532))
+
+## 7.10.0
+
+### Minor Changes
+
+- Table: New prop `contentGutter` added to `ExpandableRow`-component. This allows user more control for content layout inside expandable element. ([#3507](https://github.com/navikt/aksel/pull/3507))
+
+### Patch Changes
+
+- Button: Using `<Loader />` within `icon`-prop now supported. ([#3515](https://github.com/navikt/aksel/pull/3515))
+
+- Combobox: Always render `maxSelected` message when `isMultiSelect` is set. ([#3506](https://github.com/navikt/aksel/pull/3506))
+
+## 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
+
+### Minor Changes
+
+- ReadMore: Added size 'large'. ([#3372](https://github.com/navikt/aksel/pull/3372))
+
+### Patch Changes
+
+- Select: Now shows focus-outline when ':focus' is set trough pointer or label in all browsers. Chrome and Firefox handles `:focus-visible` differently for 'select', previously causing outline-border not to show in Firefox. ([#3415](https://github.com/navikt/aksel/pull/3415))
+
+- Modal: Don't add scroll shadow when polyfilled ([#3408](https://github.com/navikt/aksel/pull/3408))
+
+- Modal: Now shows up while screensharing with Vergic ([#3407](https://github.com/navikt/aksel/pull/3407))
+
+- FileUpload: Remove browser styling from FileUpload.Item when used in list. ([#3413](https://github.com/navikt/aksel/pull/3413))
+
+- Combobox: Single-select now shows cursor closer to selected item. ([#3384](https://github.com/navikt/aksel/pull/3384))
+
+## 7.5.3
+
 ## 7.5.2
 
 ### Patch Changes

@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,51 @@
+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"];
+const deprecatedFiles = ["linkpanel"];
+
+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) => {
+      if (deprecatedFiles.find((oldFile) => file.includes(oldFile))) {
+        return;
+      }
+      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
+     */
+    expect(
+      darksideFiles.length - newFiles.length * 2 + deprecatedFiles.length * 2,
+    ).toBe(oldFiles.length);
+  });
+});

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

@@ -4,15 +4,15 @@
   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;
   position: relative;
   border-radius: var(--ax-border-radius-large);
   background: transparent;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 
   > * {
     font-weight: var(--ax-font-weight-regular);
@@ -25,8 +25,7 @@
   }
 
   &:hover {
-    background-color: var(--ax-bg-accent-hoverA);
-    color: var(--ax-text-accent-strong);
+    background-color: var(--ax-bg-accent-moderate-hoverA);
 
     &::before,
     &::after {
@@ -46,8 +45,8 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
     z-index: 1;
 
     &::before,
@@ -58,7 +57,7 @@
 }
 
 .navds-accordion--small .navds-accordion__header {
-  padding-block: var(--a-spacing-2);
+  padding-block: var(--ax-space-8);
 }
 
 .navds-accordion__header::before,
@@ -71,11 +70,7 @@
   right: 0;
   width: 100%;
   height: 1px;
-  background-color: var(--ax-border-subtleA);
-}
-
-.navds-accordion__item:last-child > .navds-accordion__content {
-  border-bottom: 1px solid transparent;
+  background-color: var(--ax-border-neutral-subtleA);
 }
 
 .navds-accordion__header::after {
@@ -101,7 +96,7 @@
   height: 22px;
   align-self: center;
   background-color: var(--ax-bg-accent-moderateA);
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-accordion__header-chevron {
@@ -116,67 +111,64 @@
 }
 
 /* ---------------------------- Accordion content --------------------------- */
-.navds-accordion__content {
-  --__acx-accordion-content-line-width: 2px;
-
-  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
-  display: none;
-  overflow: hidden;
-  padding-block: 0;
-  max-height: 0;
-  border-color: transparent;
-  transition: all 250ms cubic-bezier(0.2, 0, 0, 1) allow-discrete;
-  animation: navds-accordion-content-animation 250ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.navds-accordion__item--no-animation {
-  animation: none;
-}
-
-@keyframes navds-accordion-content-animation {
-  0% {
-    opacity: 0.01;
-  }
-
-  20% {
-    opacity: 0.01;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
-  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
-}
 
 .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);
-
-  /* Aligns content with heading-section */
-  padding-inline: calc(var(--ax-spacing-5) + 2px) var(--ax-spacing-5);
+  padding-block: var(--ax-space-8);
+  padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
 
   @media (forced-colors: active) {
     border-left: 1px solid canvastext;
   }
 }
 
-.navds-accordion__item[data-expanded="true"] > .navds-accordion__content {
-  display: block;
-  opacity: 1;
-  overflow: visible;
-  max-height: fit-content;
-  padding-block: var(--ax-spacing-2);
-  padding-block-end: var(--ax-spacing-6);
-  border-color: var(--ax-border-subtleA);
+.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
+  box-shadow: -2px 0 0 0 var(--ax-border-neutral-subtleA);
 }
 
-@starting-style {
-  .navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content {
-    padding-block: 0;
-    max-height: 0;
+.navds-accordion__item {
+  & > .navds-accordion__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    overflow: hidden;
+    margin-inline: var(--ax-space-24) var(--ax-space-12);
+    margin-block: 0;
+    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+    transition-duration: 250ms;
+    transition-property: visibility, opacity, grid-template-rows, margin, min-height;
     border-color: transparent;
+    opacity: 0;
+
+    & .navds-accordion__content-inner {
+      min-height: 0;
+      padding-block: 0;
+    }
+  }
+
+  &[data-expanded="true"] {
+    & > .navds-accordion__content {
+      grid-template-rows: 1fr;
+      visibility: visible;
+      margin-block: var(--ax-space-8);
+      margin-block-end: var(--ax-space-24);
+      border-color: var(--ax-border-neutral-subtleA);
+      opacity: 1;
+
+      & .navds-accordion__content-inner {
+        min-height: fit-content;
+      }
+    }
+
+    &:last-child {
+      border-bottom: 1px solid var(--ax-border-neutral-subtleA);
+    }
+  }
+}
+
+/* ---------------- Accordion No Animation (defaultOpen) ---------------- */
+
+.navds-accordion__item--no-animation {
+  & > .navds-accordion__content {
+    transition: none;
   }
 }

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

@@ -1,14 +1,9 @@
 /* --------------------------- ActionMenu content --------------------------- */
 .navds-action-menu__content {
   overflow: hidden;
-  border-radius: var(--ax-border-radius-large);
-  border: 1px solid var(--ax-border-subtleA);
-
-  /* TODO: Use token here when added */
-  box-shadow:
-    0 0 1px 0 rgb(7 9 13/ 0.02),
-    0 2px 5px 0 rgb(7 9 13/ 0.1),
-    0 10px 16px 0 rgb(7 9 13/ 0.12);
+  border-radius: var(--ax-border-radius-xlarge);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  box-shadow: var(--ax-shadow-dialog);
   transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
 
   &[data-state="open"] {
@@ -39,12 +34,12 @@
 }
 
 .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);
+  border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   min-width: 128px;
   max-width: min(95vw, 640px);
@@ -62,17 +57,17 @@
 .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);
+  border-radius: var(--ax-border-radius-large);
   position: relative;
   padding-left: var(--__axc-action-menu-item-pl);
   padding-right: var(--__axc-action-menu-item-pr);
   font-size: var(--ax-font-size-medium);
   scroll-margin-block: var(--__axc-action-menu-content-p);
   line-height: 1.5;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   text-decoration: none;
 
   & svg {
@@ -82,7 +77,7 @@
   &:focus {
     outline: none;
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   &[aria-disabled="true"] {
@@ -92,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-neutral-moderate-pressedA);
   }
 
   &:focus {
@@ -108,11 +103,11 @@
 }
 
 .navds-action-menu__item--danger {
-  color: var(--ax-text-danger);
+  color: var(--ax-text-danger-subtle);
 
   &:focus {
     background-color: var(--ax-bg-danger-moderate-hoverA);
-    color: var(--ax-text-danger-strong);
+    color: var(--ax-text-danger-subtle);
   }
 }
 
@@ -120,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 {
@@ -144,9 +139,9 @@
 /* --------------------------- ActionMenu shortcut -------------------------- */
 .navds-action-menu__shortcut {
   background-color: var(--ax-bg-neutral-moderateA);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   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;
@@ -163,7 +158,7 @@
   min-height: calc(var(--__axc-action-menu-item-height) - 6px);
   padding-right: var(--__axc-action-menu-item-pr);
   padding-left: var(--__axc-action-menu-item-pl);
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
   border-radius: var(--ax-border-radius-medium);
   user-select: none;
   cursor: default;
@@ -172,8 +167,8 @@
 
 .navds-action-menu__divider {
   height: 1px;
-  margin-block: var(--ax-spacing-2);
-  background-color: var(--ax-border-subtleA);
+  margin-block: var(--ax-space-8);
+  background-color: var(--ax-border-neutral-subtleA);
 }
 
 /* -------------------------- ActionMenu indicator -------------------------- */

@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);
+  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-2) 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,5 +1,15 @@
+/* ------------------------- 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;
+  /* CSS-layers reverses "!important" ordering, so we can't set this to important if we want to override it later. */
+  display: none;
 }
 
 /* https://web.dev/prefers-reduced-motion/ */

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

@@ -2,7 +2,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic_ext.woff2) format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
@@ -12,7 +12,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic.woff2) format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
@@ -22,7 +22,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -33,7 +33,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -44,7 +44,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic_ext.woff2) format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
@@ -54,7 +54,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic.woff2) format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
@@ -64,7 +64,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -75,7 +75,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -88,7 +88,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -99,7 +99,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -110,7 +110,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -121,7 +121,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,

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

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

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

@@ -1,6 +1,11 @@
 .navds-button {
-  padding: var(--ax-spacing-3) var(--ax-spacing-5);
-  border-radius: var(--ax-border-radius-medium);
+  --__axc-button-icon-size: 1.5rem;
+  --__axc-button-icon-margin: -4px;
+  --__axc-button-border-color: transparent;
+  --__axc-button-border-width: 2px;
+
+  padding: var(--ax-space-12) var(--ax-space-20);
+  border-radius: var(--ax-border-radius-large);
   display: inline-flex;
   cursor: pointer;
   text-decoration: none;
@@ -8,262 +13,234 @@
   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 {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+}
+
+.navds-button--small,
+.navds-button--xsmall {
+  --__axc-button-icon-margin: -2px;
 }
 
 .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;
+  gap: var(--ax-space-6);
 }
 
 .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);
+
+  --__axc-button-icon-size: 1.25rem;
 }
 
 .navds-button--icon-only {
-  padding: var(--ax-spacing-3);
-}
+  padding: var(--ax-space-12);
 
-.navds-button--small.navds-button--icon-only {
-  padding: var(--ax-spacing-1);
-}
+  &.navds-button--small {
+    padding: var(--ax-space-4);
+  }
 
-.navds-button--xsmall.navds-button--icon-only {
-  padding: var(--ax-spacing-05);
-}
-
-.navds-button:focus-visible {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
+  &.navds-button--xsmall {
+    padding: var(--ax-space-2);
+  }
 }
 
 @supports not selector(:focus-visible) {
   .navds-button:focus {
-    outline: 2px solid var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
   }
 }
 
 .navds-button__icon {
-  font-size: 1.5rem;
+  font-size: var(--__axc-button-icon-size);
   display: flex;
 
-  --__axc-button-icon-margin: -4px;
-}
+  &:first-child {
+    margin-left: var(--__axc-button-icon-margin);
+  }
 
-.navds-button__icon:first-child {
-  margin-left: var(--__axc-button-icon-margin);
-}
+  &:last-child {
+    margin-right: var(--__axc-button-icon-margin);
+  }
 
-.navds-button__icon:last-child {
-  margin-right: var(--__axc-button-icon-margin);
-}
-
-:where(.navds-button--xsmall, .navds-button--small) .navds-button__icon {
-  --__axc-button-icon-margin: -2px;
-
-  font-size: 1.25rem;
-}
-
-.navds-button__icon:only-child {
-  margin: 0;
+  .navds-button--icon-only & {
+    margin: 0;
+  }
 }
 
 /*************************
  * .navds-button--primary *
  *************************/
-
 .navds-button--primary {
   background-color: var(--ax-bg-accent-strong);
   color: var(--ax-text-accent-contrast);
-}
 
-@media (forced-colors: active) {
-  .navds-button.navds-button--primary {
-    background-color: highlight;
-    color: highlighttext;
+  &:hover {
+    background-color: var(--ax-bg-accent-strong-hover);
   }
 
-  .navds-button.navds-button--primary span {
-    forced-color-adjust: none;
+  &:active {
+    background-color: var(--ax-bg-accent-strong-pressed);
   }
-}
 
-.navds-button--primary:hover {
-  background-color: var(--ax-bg-accent-strong-hover);
-}
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-accent-strong);
+  }
 
-.navds-button--primary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-}
+  @media (forced-colors: active) {
+    &:not(:disabled) {
+      background-color: highlight;
+      color: highlighttext;
+    }
 
-.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
-.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
-  background-color: var(--ax-bg-accent-strong);
+    & span {
+      forced-color-adjust: none;
+    }
+  }
 }
 
 /*************************
  * .navds-button--primary-neutral *
  *************************/
-
 .navds-button--primary-neutral {
   background-color: var(--ax-bg-neutral-strong);
   color: var(--ax-text-neutral-contrast);
-}
 
-.navds-button--primary-neutral:hover {
-  background-color: var(--ax-bg-neutral-strong-hover);
-}
+  &:hover {
+    background-color: var(--ax-bg-neutral-strong-hover);
+  }
 
-.navds-button--primary-neutral:active {
-  background-color: var(--ax-bg-neutral-strong-pressed);
-}
+  &:active {
+    background-color: var(--ax-bg-neutral-strong-pressed);
+  }
 
-.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
-.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
-  background-color: var(--ax-bg-neutral-strong);
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-neutral-strong);
+  }
 }
 
 /**************************
 * .navds-button--secondary *
  **************************/
-
 .navds-button--secondary {
+  --__axc-button-border-color: var(--ax-border-accent);
+
   background-color: transparent;
-  color: var(--ax-text-accent);
-  box-shadow: inset 0 0 0 2px var(--ax-border-accent);
-}
+  color: var(--ax-text-accent-subtle);
 
-.navds-button--secondary:hover {
-  background-color: var(--ax-bg-accent-moderate-hoverA);
-  color: var(--ax-text-accent-strong);
-  box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
-}
+  &:hover {
+    --__axc-button-border-color: var(--ax-border-accent-strong);
 
-.navds-button--secondary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-  color: var(--ax-text-accent-contrast);
-  box-shadow: none;
-}
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+  }
 
-.navds-button--secondary:where(:disabled, .navds-button--disabled),
-.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
-  background-color: transparent;
-  color: var(--ax-text-accent);
+  &:active {
+    background-color: var(--ax-bg-accent-moderate-pressedA);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    --__axc-button-border-color: var(--ax-border-accent);
+
+    background-color: transparent;
+    color: var(--ax-text-accent-subtle);
+  }
 }
 
 /**************************
 * .navds-button--secondary-neutral *
  **************************/
-
 .navds-button--secondary-neutral {
+  --__axc-button-border-color: var(--ax-border-neutral);
+
   background-color: transparent;
   color: var(--ax-text-neutral);
-  box-shadow: inset 0 0 0 2px var(--ax-border-neutral);
-}
 
-.navds-button--secondary-neutral:hover {
-  background-color: var(--ax-bg-neutral-moderate-hoverA);
-  color: var(--ax-text-neutral-strong);
-}
+  &:hover {
+    --__axc-button-border-color: var(--ax-border-neutral-strong);
 
-.navds-button--secondary-neutral:active {
-  color: var(--ax-text-neutral-contrast);
-  background-color: var(--ax-bg-neutral-strong-pressed);
-  box-shadow: none;
-}
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
 
-.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
-.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ax-text-default);
-  background-color: transparent;
-  box-shadow: inset 0 0 0 2px var(--ax-border-strong);
+  &:active {
+    background-color: var(--ax-bg-neutral-moderate-pressedA);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    --__axc-button-border-color: var(--ax-border-neutral);
+
+    color: var(--ax-text-neutral);
+    background-color: transparent;
+  }
 }
 
 /****************************
  * .navds-button--tertiary *
  ****************************/
-
 .navds-button--tertiary {
   background-color: transparent;
-  color: var(--ax-text-accent);
-}
+  color: var(--ax-text-accent-subtle);
 
-.navds-button--tertiary:hover {
-  background-color: var(--ax-bg-accent-hoverA);
-  color: var(--ax-text-accent-strong);
-}
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+  }
 
-.navds-button--tertiary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-  color: var(--ax-text-accent-contrast);
-}
+  &:active {
+    background-color: var(--ax-bg-accent-moderate-pressedA);
+  }
 
-.navds-button--tertiary:active:hover {
-  background-color: var(--ax-bg-accent-strong-pressed);
-}
-
-.navds-button--tertiary:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ax-text-accent);
-  background: none;
-  box-shadow: none;
+  &:is(:disabled, .navds-button--disabled) {
+    color: var(--ax-text-accent-subtle);
+    background-color: transparent;
+  }
 }
 
 /****************************
  * .navds-button--tertiary-neutral *
  ****************************/
-
 .navds-button--tertiary-neutral {
+  background-color: transparent;
   color: var(--ax-text-neutral);
-}
 
-.navds-button--tertiary-neutral:hover {
-  background-color: var(--ax-bg-neutral-hoverA);
-  color: var(--ax-text-neutral-strong);
-}
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
 
-.navds-button--tertiary-neutral:active {
-  background-color: var(--ax-bg-neutral-strong-pressed);
-  color: var(--ax-text-neutral-contrast);
-}
+  &:active {
+    background-color: var(--ax-bg-neutral-moderate-pressedA);
+  }
 
-.navds-button--tertiary-neutral:active:hover {
-  background-color: var(--ax-bg-neutral-strong-pressed);
-}
-
-.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ax-text-default);
-  background: none;
-  box-shadow: none;
+  &:is(:disabled, .navds-button--disabled) {
+    color: var(--ax-text-neutral);
+    background-color: transparent;
+  }
 }
 
 /*************************
  * .navds-button--danger *
  *************************/
-
 .navds-button--danger {
   background-color: var(--ax-bg-danger-strong);
   color: var(--ax-text-danger-contrast);
-}
 
-.navds-button--danger:hover {
-  background-color: var(--ax-bg-danger-strong-hover);
-}
+  &:hover {
+    background-color: var(--ax-bg-danger-strong-hover);
+  }
 
-.navds-button--danger:active {
-  background-color: var(--ax-bg-danger-strong-pressed);
-}
+  &:active {
+    background-color: var(--ax-bg-danger-strong-pressed);
+  }
 
-.navds-button--danger:active:where(:disabled, .navds-button--disabled),
-.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
-  background-color: var(--ax-bg-danger-strong);
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-danger-strong);
+  }
 }
 
 /**************************
@@ -275,10 +252,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;
 }
@@ -288,6 +269,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;
@@ -300,14 +285,14 @@
     background-color: ButtonFace;
   }
 
-  .navds-button:hover {
+  .navds-button:not(:disabled):hover {
     background-color: highlighttext;
     border-color: highlight;
     color: highlight;
     box-shadow: none;
   }
 
-  .navds-button:hover span {
+  .navds-button:not(:disabled):hover span {
     forced-color-adjust: none;
   }
 

@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;
 }
 
@@ -23,8 +23,8 @@
   align-items: center;
   background-color: var(--ax-bg-raised);
   border-radius: var(--ax-border-radius-full);
-  border: 1px solid var(--ax-border-subtleA);
-  color: var(--ax-text-default);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-neutral);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -50,45 +50,45 @@
   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);
+  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);
+  border: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-chat--small .navds-chat__bubble {
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-space-12) var(--ax-space-16);
 }
 
 /* -------------------------- Chat bubble variants -------------------------- */
 .navds-chat--info {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-info-raised);
+    background-color: var(--ax-bg-info-moderate);
   }
 }
 
 .navds-chat--neutral {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-neutral-raised);
+    background-color: var(--ax-bg-neutral-moderateA);
   }
 }
 
 /* ------------------------------ Chat top text ----------------------------- */
 .navds-chat__top-text {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   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,23 +20,29 @@
   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;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+}
+
+.navds-chips--readonly {
+  .navds-chips__chip {
+    background-color: var(--ax-bg-neutral-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 {
@@ -45,7 +51,7 @@
   }
 
   .navds-chips__toggle--with-checkmark {
-    padding-left: var(--ax-spacing-1);
+    padding-left: var(--ax-space-4);
   }
 
   .navds-chips__removable-icon {
@@ -58,7 +64,7 @@
   }
 
   .navds-chips--icon-right {
-    padding-right: var(--ax-spacing-05);
+    padding-right: var(--ax-space-2);
   }
 }
 
@@ -66,7 +72,7 @@
 .navds-chips__toggle--action {
   box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
   background-color: var(--ax-bg-accent-moderate);
-  color: var(--ax-text-default);
+  color: var(--ax-text-accent);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hover);
@@ -86,7 +92,7 @@
 .navds-chips__toggle--neutral {
   box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
   background-color: var(--ax-bg-neutral-moderate);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:hover {
     background-color: var(--ax-bg-neutral-moderate-hover);
@@ -104,7 +110,7 @@
 }
 
 .navds-chips--medium .navds-chips__toggle--with-checkmark {
-  padding-left: var(--ax-spacing-1-alt);
+  padding-left: var(--ax-space-6);
 }
 
 /* -------------------------- start old CSS --------------------------  */
@@ -142,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,124 +1,4 @@
-.navds-copybutton {
-  --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-5) var(--ax-spacing-3) var(--ax-spacing-4);
-
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  border-radius: var(--ax-border-radius-medium);
-  padding: var(--__axc-copybutton-padding);
-  display: grid;
-  place-content: center;
-  background-color: transparent;
-  transition: color 0.2s cubic-bezier(0.05, 0.7, 0.1, 1);
-
-  &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-3);
-  }
-
-  &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-5);
-  }
-
-  &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.3;
-  }
-
-  &:disabled:hover {
-    background-color: transparent;
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-copybutton {
-    background-color: ButtonFace;
-    border: solid 1px ButtonText;
-    color: ButtonText;
-
-    &:disabled {
-      opacity: 1;
-      border-color: GrayText;
-    }
-  }
-}
-
-/* -------------------------- CopyButton small size ------------------------- */
-.navds-copybutton--small {
-  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);
-
-  &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-2) var(--ax-spacing-1) var(--ax-spacing-3);
-  }
-
-  &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-1);
-  }
-
-  & .navds-copybutton__icon {
-    font-size: 1.25rem;
-  }
-
-  & > .navds-copybutton__content {
-    gap: var(--ax-spacing-1-alt);
-  }
-}
-
-/* ------------------------- CopyButton xsmall size ------------------------- */
-.navds-copybutton--xsmall {
-  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);
-
-  &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-1) var(--ax-spacing-05) var(--ax-spacing-2);
-  }
-
-  &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-05);
-  }
-
-  & .navds-copybutton__icon {
-    font-size: 1.25rem;
-  }
-
-  & > .navds-copybutton__content {
-    gap: var(--ax-spacing-1);
-  }
-}
-
-/* ----------------------------- CopyButton Icon ---------------------------- */
-.navds-copybutton__icon {
-  font-size: 1.5rem;
-  display: flex;
-
-  &:first-of-type {
-    margin-left: -0.25rem;
-  }
-
-  &:last-of-type {
-    margin-right: -0.25rem;
-  }
-
-  &:only-child {
-    margin: 0;
-  }
-}
-
-.navds-copybutton--active .navds-copybutton__icon {
+.navds-copybutton[data-active="true"] .navds-copybutton__icon {
   animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.05, 0.7, 0.1, 1);
 }
 
@@ -139,45 +19,3 @@
     transform: translateY(0);
   }
 }
-
-/* ---------------------------- CopyButton Action --------------------------- */
-.navds-copybutton--action {
-  color: var(--ax-text-accent);
-
-  &.navds-copybutton--active {
-    color: var(--ax-text-success);
-
-    &:hover {
-      color: var(--ax-text-success-strong);
-    }
-  }
-
-  &:hover {
-    color: var(--ax-text-accent-strong);
-  }
-
-  &:disabled {
-    color: var(--ax-text-accent);
-  }
-}
-
-/* --------------------------- CopyButton Neutral --------------------------- */
-.navds-copybutton--neutral {
-  color: var(--ax-text-subtle);
-
-  &:hover,
-  &.navds-copybutton--active {
-    color: var(--ax-text-default);
-  }
-
-  &:disabled {
-    color: var(--ax-text-subtle);
-  }
-}
-
-.navds-copybutton__content {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ax-spacing-2);
-}

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

@@ -1,108 +1,138 @@
 .navds-date {
-  padding: var(--a-spacing-4) var(--a-spacing-3);
+  padding: var(--ax-space-16) var(--ax-space-12);
+
+  .rdp-day_range_middle {
+    &.rdp-day_disabled {
+      color: var(--ax-text-neutral);
+      background: var(--ax-bg-neutral-moderateA);
+    }
+
+    &.rdp-day_selected {
+      background-color: var(--ax-bg-accent-moderate-pressedA);
+      box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
+      color: var(--ax-text-neutral);
+    }
+  }
+
+  .rdp-month,
+  &.rdp-month {
+    display: grid;
+    gap: var(--ax-space-20);
+  }
+
+  .navds-date__caption-label {
+    text-transform: capitalize;
+  }
+
+  .rdp-head_cell {
+    text-transform: capitalize;
+    font-size: var(--ax-font-size-small);
+  }
+
+  .rdp-button {
+    all: unset;
+    display: block;
+    width: 2.5rem;
+    height: 2.5rem;
+    text-align: center;
+    border-radius: var(--ax-border-radius-large);
+  }
+
+  .rdp-day_range_start {
+    border-radius: 100% var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge) 100%;
+  }
+
+  .rdp-day_range_end:not(.rdp-day_range_start) {
+    border-radius: var(--ax-border-radius-large) 100% 100% var(--ax-border-radius-large);
+  }
+
+  .rdp-day_range_start.rdp-day_range_end {
+    border-radius: var(--ax-border-radius-large);
+  }
+
+  .navds-date__field {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+  }
+
+  .rdp-day_selected,
+  .navds-monthpicker__month--selected {
+    color: var(--ax-text-accent-contrast);
+    background: var(--ax-bg-accent-strong-pressed);
+    cursor: pointer;
+  }
+
+  .rdp-day_disabled {
+    cursor: not-allowed;
+    text-decoration: line-through;
+    background-color: var(--ax-bg-neutral-moderateA);
+    color: var(--ax-text-neutral-subtle);
+  }
+
+  .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
+  .navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+    background: var(--ax-bg-accent-moderate-hoverA);
+    cursor: pointer;
+  }
+
+  .rdp-day_today {
+    position: relative;
+
+    &::before {
+      width: 6px;
+      height: 6px;
+      display: block;
+      background-color: var(--ax-text-accent-subtle);
+      border-radius: var(--ax-border-radius-full);
+      content: "";
+      position: absolute;
+      bottom: 5px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.rdp-day_selected:not(.rdp-day_range_middle),
+    &:active {
+      &::before {
+        background-color: var(--ax-text-accent-contrast);
+      }
+    }
+  }
+
+  .rdp-day_outside {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .navds-date__modal & {
+    padding: 0;
+  }
+
+  .navds-date__modal-body > & {
+    padding: 0;
+  }
 }
 
-.navds-date .rdp-day_range_middle.rdp-day_disabled {
-  color: var(--ac-date-middle-text, var(--a-text-on-action));
-  background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
-}
-
-.navds-date .rdp-month,
-.navds-date.rdp-month {
-  display: grid;
-  gap: var(--a-spacing-5);
-}
-
-.navds-date__caption-label {
-  text-transform: capitalize;
-}
-
-.navds-date .rdp-head_cell {
-  text-transform: capitalize;
-  font-size: var(--a-font-size-small);
-}
-
-.navds-date .rdp-weeknumber {
-  font-size: var(--a-font-size-small);
+.navds-date__caption {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--a-border-radius-medium);
-  margin: var(--a-spacing-2);
-  color: var(--a-text-subtle);
+  gap: var(--ax-space-4);
+  padding-inline: var(--ax-space-4);
 }
 
-.navds-date .rdp-weeknumber.rdp-button {
+.navds-date__caption-button {
   width: 2rem;
   height: 2rem;
-  box-shadow: 0 0 0 1px var(--a-border-default);
-  color: var(--a-text-subtle);
-  font-size: var(--a-font-size-small);
-}
-
-.navds-date .rdp-weeknumber.rdp-button:active {
-  background-color: var(--a-surface-action-active);
-  color: var(--a-text-on-action);
-  box-shadow: none;
+  color: var(--ax-text-neutral);
 }
 
 .navds-date__caption__month .navds-select__container select {
   text-transform: capitalize;
 }
 
-.navds-date .rdp-button {
-  all: unset;
-  display: block;
-  width: 2.5rem;
-  height: 2.5rem;
-  text-align: center;
-  border-radius: var(--a-border-radius-medium);
-}
-
-.navds-date .rdp-day_range_start {
-  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
-    var(--a-border-radius-xlarge);
-}
-
-.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
-  border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
-    var(--a-border-radius-medium);
-}
-
-.navds-date .rdp-day_range_start.rdp-day_range_end {
-  border-radius: var(--a-border-radius-xlarge);
-}
-
-.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
-.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
-  .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
-.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
-  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
-  }
-}
-
 /* Monthpicker */
 .navds-date__month-button {
   all: unset;
@@ -110,24 +140,10 @@
   width: 3rem;
   height: 3rem;
   text-transform: capitalize;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   cursor: pointer;
 }
 
-.navds-date__month-button:focus-visible,
-.navds-monthpicker__caption-button:focus-visible {
-  box-shadow: var(--a-shadow-focus);
-  z-index: 1;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__month-button:focus,
-  .navds-monthpicker__caption-button:focus {
-    box-shadow: var(--a-shadow-focus);
-    z-index: 1;
-  }
-}
-
 .navds-date__year-label {
   display: flex;
   align-items: center;
@@ -137,13 +153,69 @@
 .navds-date__standalone-wrapper {
   height: fit-content;
   width: fit-content;
+
+  .rdp-cell > button.rdp-day,
+  button.navds-date__month-button {
+    &:focus-visible {
+      outline: 3px solid var(--ax-border-focus);
+      outline-offset: 3px;
+    }
+
+    &:active:not(:disabled) {
+      color: var(--ax-text-accent-contrast);
+      background-color: var(--ax-bg-accent-strong-pressed);
+    }
+  }
 }
 
-.navds-date .navds-date__field {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
+.navds-date__field-input {
+  &.navds-text-field__input {
+    padding-right: var(--ax-space-48);
+  }
+
+  .navds-form-field--small & {
+    padding-right: var(--ax-space-32);
+  }
+}
+
+.navds-date__field-button {
+  position: absolute;
+  right: 0.0625rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ax-text-neutral);
+  display: inline-flex;
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: calc(var(--ax-border-radius-large) - 1px);
+  padding: var(--ax-space-12);
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  height: calc(100% - 0.125rem);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+
+  .navds-form-field--small & {
+    padding: var(--ax-space-4);
+  }
+
+  .navds-form-field--disabled & {
+    opacity: 1;
+    cursor: not-allowed;
+  }
+
+  /* Readonly */
+  .navds-date__field--readonly & {
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline-color: var(--ax-border-focus);
+  }
 }
 
 .navds-date__field-wrapper {
@@ -153,146 +225,19 @@
   width: fit-content;
 }
 
-.navds-date .rdp-day_selected,
-.navds-monthpicker__month--selected {
-  color: var(--ac-date-selected-text, var(--a-text-on-action));
-  background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_disabled {
-  cursor: not-allowed;
-  text-decoration: line-through;
-  background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-date-disabled-text, var(--a-text-subtle));
-}
-
-.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
-.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
-  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
-  cursor: pointer;
-}
-
-.navds-date .rdp-day_today {
-  box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
-  text-decoration: underline;
-}
-
-.navds-date__caption {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--a-spacing-1);
-  padding-inline: var(--a-spacing-1);
-}
-
-.navds-date__caption-button,
-.navds-date__caption-button:disabled,
-.navds-date__caption-button:disabled:hover {
-  color: var(--ac-date-caption-text, var(--a-text-default));
-}
-
-.navds-date__field-input {
-  padding-right: var(--a-spacing-12);
-}
-
-.navds-form-field--small .navds-date__field-input {
-  padding-right: var(--a-spacing-8);
-}
-
-/* Error-handling */
-.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
-  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
-  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
-}
-
-.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
-      var(--a-shadow-focus);
-  }
-}
-
-.navds-date__field-button {
-  position: absolute;
-  right: 0.0625rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--ac-date-input-button-text, var(--a-text-default));
-  display: inline-flex;
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  background: none;
-  border-radius: calc(var(--a-border-radius-medium) - 1px);
-  padding: var(--a-spacing-3);
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  height: calc(100% - 0.125rem);
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-.navds-form-field--small .navds-date__field-button {
-  padding: var(--a-spacing-1);
-}
-
-.navds-date__field-button:hover:where(:not([disabled])) {
-  color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
-  background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
-}
-
-.navds-form-field--disabled .navds-date__field-button {
-  opacity: 1;
-  cursor: not-allowed;
-}
-
-.navds-date__field-button:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-  border-radius: var(--a-border-radius-medium);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__field-button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-date__caption__year {
-  width: 5rem;
-}
-
-.navds-date .rdp-day_outside {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-/* Readonly */
-.navds-date__field--readonly .navds-date__field-button {
-  cursor: default;
-  color: var(--a-gray-500);
-}
-
-.navds-date__caption-button {
-  width: 2rem;
-  height: 2rem;
-}
-
 .navds-date__week-row {
   display: flex;
   align-items: center;
-  gap: var(--a-spacing-05);
+  gap: var(--ax-space-2);
+}
+
+.navds-date__weeknumber {
+  --__axc-button-border-width: 1px;
+}
+
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-date__week-wrapper {
@@ -303,37 +248,25 @@
   margin: 0;
 }
 
-.navds-date__modal.navds-date {
-  padding: 0;
-}
-
 .navds-date__modal-body {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  padding: var(--a-spacing-4);
-  gap: var(--a-spacing-2);
-}
-
-.navds-date__modal-body > .navds-date {
-  padding: 0;
-}
-
-.navds-date__popover:where(.navds-popover) {
-  border: none;
+  padding: var(--ax-space-16);
+  gap: var(--ax-space-8);
 }
 
 @media (min-width: 480px) {
   .navds-date {
-    padding: var(--a-spacing-5) var(--a-spacing-4);
+    padding: var(--ax-space-20) var(--ax-space-16);
   }
 
   .navds-date__modal-body {
-    padding: var(--a-spacing-6);
+    padding: var(--ax-space-24);
   }
 
   .navds-date__caption {
-    gap: var(--a-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,26 +1,26 @@
 .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-6);
+  --__axc-expansioncard-padding-block: var(--ax-space-20);
+  --__axc-expansioncard-padding-inline: var(--ax-space-20);
 
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   height: fit-content;
-  border: 1px solid var(--ax-border-default);
+  border: 1px solid var(--ax-border-neutral);
 
   &:has(.navds-expansioncard__header:hover) {
-    box-shadow: 0 0 0 1px var(--ax-border-strong);
-    border-color: var(--ax-border-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-neutral-strong);
+    border-color: var(--ax-border-neutral-strong);
   }
 }
 
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
-  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
-  --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
+  --__axc-expansioncard-padding-inline: var(--ax-space-16);
+  --__axc-expansioncard-padding-block: var(--ax-space-16);
 
   & > .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) {
@@ -31,17 +31,13 @@
     min-height: 2rem;
     min-width: 2rem;
   }
-
-  & .navds-expansioncard__content {
-    --__axc-expansioncard-padding-block: var(--ax-spacing-4);
-  }
 }
 
 /* -------------------------- ExpansionCard Header -------------------------- */
 .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;
@@ -49,7 +45,7 @@
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--ax-bg-neutral-raised-hover);
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &[data-open="true"] {
@@ -59,7 +55,7 @@
     /* Divider between header and content */
     &::after {
       content: "";
-      background-color: var(--ax-border-subtle);
+      background-color: var(--ax-border-neutral-subtleA);
       bottom: 0;
       left: var(--__axc-expansioncard-padding-inline);
       height: 1px;
@@ -80,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 ---------------------- */
@@ -102,15 +98,7 @@
   align-self: flex-start;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-  }
-
-  @supports not selector(:focus-visible) {
-    &:focus {
-      outline: 2px solid var(--ax-border-focus);
-      outline-offset: 2px;
-    }
+    outline: 3px solid var(--ax-border-focus);
   }
 
   /* Makes the whole header clickable */
@@ -144,8 +132,6 @@
 
 /* -------------------------- ExpansionCard Content ------------------------- */
 .navds-expansioncard__content {
-  --__axc-expansioncard-padding-block: var(--ax-spacing-5);
-
   border-end-end-radius: var(--__axc-expansioncard-border-radius);
   border-end-start-radius: var(--__axc-expansioncard-border-radius);
   padding-inline: var(--__axc-expansioncard-padding-inline);
@@ -161,7 +147,7 @@
   &[data-open="true"] {
     grid-template-rows: 1fr;
     visibility: visible;
-    padding-block: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
+    padding-block: var(--__axc-expansioncard-padding-block);
 
     & .navds-expansioncard__content-inner {
       opacity: 1;

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

@@ -1,121 +1,164 @@
 .navds-combobox__wrapper {
-  --__ac-combobox-icon-size: 1.5rem;
-  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-2);
-  --__ac-combobox-list-item-padding-block: var(--a-spacing-3);
-  --__ac-combobox-list-item-padding-inline: var(--a-spacing-3);
-  --__ac-combobox-border-width: 1px;
-  --__ac-combobox-input-height: 2rem;
+  --__axc-combobox-icon-size: 1.5rem;
+  --__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;
 
   display: flex;
   flex-direction: column;
   width: 100%;
   position: relative;
+  border-radius: var(--ax-border-radius-large);
+}
+
+.navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
+  & .navds-combobox__wrapper:hover {
+    border-color: var(--ax-border-accent-strong);
+  }
 }
 
 .navds-form-field--small .navds-combobox__wrapper {
-  --__ac-combobox-icon-size: 1.25rem;
-  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-1);
-  --__ac-combobox-list-item-padding-block: var(--a-spacing-1-alt);
-  --__ac-combobox-list-item-padding-inline: var(--a-spacing-2);
-  --__ac-combobox-input-height: 1.5rem;
+  --__axc-combobox-icon-size: 1.25rem;
+  --__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--disabled .navds-combobox__wrapper *:hover {
-  cursor: not-allowed;
-}
+  & .navds-combobox__wrapper {
+    &:hover {
+      border-color: var(--ax-border-neutral);
+    }
 
-.navds-combobox--disabled .navds-text-field__input {
-  border: 1px solid var(--a-border-default);
-}
+    & *:hover {
+      cursor: not-allowed;
+    }
+  }
 
-.navds-combobox--disabled .navds-combobox__selected-options {
-  pointer-events: none;
+  & .navds-combobox__selected-options {
+    pointer-events: none;
+  }
+
+  & .navds-combobox--readonly {
+    pointer-events: none;
+  }
 }
 
 .navds-combobox--readonly {
   pointer-events: none;
+
+  & .navds-combobox__selected-options {
+    & .navds-chips__chip {
+      background-color: var(--ax-bg-neutral-moderateA);
+    }
+  }
+
+  & .navds-combobox__button-toggle-list {
+    color: var(--ax-bg-neutral-moderate);
+  }
+
+  & .navds-combobox__wrapper {
+    border-color: var(--ax-border-neutral-subtle);
+    overflow: clip;
+  }
+
+  & .navds-text-field__input,
+  & .navds-combobox__input {
+    background-color: var(--ax-bg-neutral-moderate);
+  }
 }
 
-.navds-combobox--readonly .navds-combobox__button-toggle-list {
-  color: var(--a-gray-500);
-}
-
-.navds-combobox--readonly .navds-text-field__input,
-.navds-combobox--readonly .navds-combobox__input {
-  background-color: var(--a-surface-subtle);
-  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);
-  height: var(--__ac-combobox-icon-size);
+  width: var(--__axc-combobox-icon-size);
+  height: var(--__axc-combobox-icon-size);
 }
 
-.navds-combobox__wrapper-inner.navds-text-field__input {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding-block: calc(var(--__ac-combobox-wrapper-inner-padding) - var(--__ac-combobox-border-width));
-  padding-inline: var(--__ac-combobox-wrapper-inner-padding);
+.navds-combobox__wrapper-inner {
+  border: 1px solid var(--ax-border-neutral);
+  border-radius: var(--ax-border-radius-large);
+
+  &:has(.navds-combobox__input:focus-visible) {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+    outline: none;
+    border-color: var(--ax-border-neutral);
+  }
+
+  &.navds-text-field__input {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding-block: calc(var(--__axc-combobox-wrapper-inner-padding) - var(--__axc-combobox-border-width));
+    padding-inline: var(--__axc-combobox-wrapper-inner-padding);
+  }
+
+  & > :first-child {
+    flex: 2;
+  }
+
+  & > :last-child {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  &:hover {
+    cursor: text;
+  }
+
+  .navds-combobox--disabled &:hover {
+    border-color: var(--ax-border-neutral);
+  }
 }
 
-.navds-combobox__wrapper-inner > :first-child {
-  flex: 2;
-}
+.navds-combobox--error {
+  & .navds-combobox__wrapper-inner {
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 
-.navds-combobox__wrapper-inner > :last-child {
-  display: flex;
-  flex-flow: row nowrap;
-}
-
-.navds-combobox__wrapper-inner:hover {
-  cursor: text;
-}
-
-.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
-  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
-  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
-}
-
-.navds-combobox--error
-  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
-    var(--a-shadow-focus);
+    &:has(.navds-combobox__input:focus-visible) {
+      border-color: var(--ax-border-danger-strong);
+    }
+  }
 }
 
 .navds-combobox__selected-options {
-  gap: var(--__ac-combobox-wrapper-inner-padding);
+  gap: 0;
   align-items: center;
-}
 
-.navds-combobox__selected-options > li {
-  margin: auto 0;
-  border-radius: var(--a-border-radius-full);
-}
+  & > li {
+    margin: auto 0;
+    border-radius: var(--ax-border-radius-full);
+  }
 
-.navds-combobox__selected-options > li:last-of-type {
-  display: flex;
-  flex: 1;
+  & > li:last-of-type {
+    display: flex;
+    flex: 1;
+  }
+
+  &[data-type="multiple"] {
+    gap: var(--__axc-combobox-wrapper-inner-padding);
+  }
 }
 
 .navds-combobox__selected-options--no-bg {
   font-family: inherit;
-  font-size: var(--a-font-size-large);
-  font-weight: var(--a-font-weight-regular);
+  font-size: var(--ax-font-size-large);
+  font-weight: var(--ax-font-weight-regular);
   letter-spacing: 0;
-  line-height: var(--a-font-line-height-large);
+  line-height: var(--ax-font-line-height-large);
   margin: 0;
   padding-left: 0.25rem;
 }
@@ -129,85 +172,50 @@
   border: none;
   padding: 0;
   margin: 0;
-  margin-left: var(--a-spacing-1);
   min-width: 10ch;
   width: 100%;
-  height: var(--__ac-combobox-input-height);
+  height: var(--__axc-combobox-input-height);
+  background: var(--ax-bg-input);
+
+  &:focus-visible {
+    outline: 0;
+    border: none;
+  }
+
+  .navds-combobox__selected-options > li:only-child > & {
+    margin-left: var(--ax-space-4);
+  }
 }
 
 .navds-combobox__input--hide-caret {
   caret-color: transparent;
 }
 
-.navds-combobox__input:focus-visible {
-  outline: none;
-  border: none;
-  box-shadow: none;
-}
-
-.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-  box-shadow: var(--a-shadow-focus);
-  outline: 3px solid transparent;
-  outline-offset: 2px;
-}
-
-.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
-  box-shadow: none;
-  outline: none;
-}
-
 @supports not selector(:focus-visible) {
-  .navds-combobox__input:focus {
-    outline: none;
-    border: none;
-    box-shadow: none;
+  .navds-combobox__input {
+    &:focus {
+      outline: none;
+      border: none;
+    }
   }
 
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
-    box-shadow: var(--a-shadow-focus);
-    outline: 3px solid transparent;
-    outline-offset: 2px;
-  }
+  .navds-combobox__wrapper-inner {
+    &:has(.navds-combobox__input:focus) {
+      outline: none;
+    }
 
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
-    box-shadow: none;
-    outline: none;
+    &:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+      outline: none;
+    }
   }
 }
 
-@supports not selector(:has) {
-  .navds-combobox--focused .navds-combobox__wrapper-inner {
-    box-shadow: var(--a-shadow-focus);
-    outline: 3px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
-    box-shadow: none;
-    outline: none;
-  }
-}
-
-.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;
 }
 
 .navds-combobox__button-toggle-list {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--a-text-default);
+  color: var(--ax-text-neutral);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -216,68 +224,44 @@
   border: none;
   font-size: 1rem;
   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));
-}
+  &:hover {
+    color: var(--ax-text-accent-subtle);
 
-.navds-combobox__button-clear:hover,
-.navds-combobox__button-toggle-list:hover {
-  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
-}
-
-.navds-combobox__button-toggle-list:focus-visible {
-  box-shadow:
-    0 0 0 1px var(--a-surface-default) inset,
-    var(--a-shadow-focus);
-  box-shadow: var(--a-shadow-focus);
-  outline: none;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-combobox__button-toggle-list:focus {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default) inset,
-      var(--a-shadow-focus);
-    box-shadow: var(--a-shadow-focus);
-    outline: none;
+    &:active {
+      color: var(--ax-text-accent);
+    }
   }
 }
 
 /* dropdown & non selectable dropdown items */
 
 .navds-combobox__list {
-  max-height: 290px;
-  overflow-y: auto;
+  max-height: 316px;
+  overflow: clip;
   position: absolute;
   left: 0;
   right: 0;
-  z-index: var(--a-z-index-popover);
-  top: calc(100% + var(--a-spacing-2));
-  border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
+  z-index: 10;
+  top: calc(100% + var(--ax-space-8));
+  border: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   flex-direction: column;
-  box-shadow: var(--a-shadow-small);
-  border-radius: var(--a-border-radius-medium);
-  background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
-  color: var(--ac-combobox-list-text, var(--a-text-default));
+  border-radius: var(--ax-border-radius-large);
+  background-color: var(--ax-bg-raised);
+  color: var(--ax-text-neutral);
   overscroll-behavior: contain;
+  box-shadow: var(--ax-shadow-dialog);
+
+  & .navds-combobox__list-options {
+    overflow-y: auto;
+  }
 }
 
 .navds-combobox__list--closed {
   display: none;
 }
 
-.navds-combobox__list_non-selectables {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-}
-
 .navds-combobox__list-item,
 .navds-combobox__list-item--loading,
 .navds-combobox__list-item--no-options,
@@ -285,28 +269,32 @@
 .navds-combobox__list-item--max-selected {
   align-items: center;
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
-  padding-block: var(--__ac-combobox-list-item-padding-block);
-  padding-inline: var(--__ac-combobox-list-item-padding-inline);
-  width: 100%;
-  background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
+  padding-block: var(--__axc-combobox-list-item-padding-block);
+  padding-inline: var(--__axc-combobox-list-item-padding-inline);
+  border-radius: var(--ax-border-radius-large);
+  border: 0;
+  margin-inline: var(--ax-space-8);
+  margin-block: var(--ax-space-2);
+  scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
+}
+
+.navds-combobox__list-item--no-options {
+  margin: 0;
 }
 
 .navds-combobox__list-item--loading {
   justify-content: center;
-  background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
+  margin: 0;
 }
 
 .navds-combobox__list-item--max-selected {
-  background: var(--ac-combobox-list-item-max-selected-bg, var(--a-surface-info-subtle));
-  border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
-  border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
-  border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
-}
-
-.navds-combobox__list_non-selectables:hover {
-  cursor: default;
+  background-color: var(--ax-bg-neutral-moderateA);
+  margin: 0;
+  border-radius: 0;
+  border-bottom: 1px solid var(--ax-border-neutral-subtle);
+  padding-block: var(--ax-space-8);
+  line-height: var(--ax-font-line-height-large);
 }
 
 /* ul-list and selectable li-items */
@@ -314,70 +302,82 @@
 .navds-combobox__list-options {
   list-style: none;
   margin: 0;
-  padding: 0;
-  width: 100%;
   display: inherit;
   flex-direction: inherit;
   gap: inherit;
   background-color: inherit;
-  align-items: flex-start;
+  align-items: stretch;
+  padding: 0;
+  padding-block: var(--ax-space-4);
 }
 
-.navds-combobox__list-item--focus,
-.navds-combobox__list--with-hover
-  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
-  background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
+.navds-combobox__list-item--focus {
   cursor: pointer;
-  border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
-  padding-inline-start: calc(var(--__ac-combobox-list-item-padding-inline) - 4px);
+  outline: 2px solid var(--ax-border-focus);
 }
 
-.navds-combobox__list-item[data-no-focus="true"] {
-  cursor: not-allowed;
-  opacity: 0.4;
+.navds-combobox__list-item {
+  user-select: none;
+
+  &[data-no-focus="true"] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  & mark {
+    background-color: transparent;
+    font-weight: var(--ax-font-weight-bold);
+    color: var(--ax-text-neutral);
+  }
+
+  & svg {
+    color: var(--ax-text-neutral);
+  }
 }
 
 .navds-combobox__list-item--selected {
-  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
-}
+  background-color: var(--ax-bg-accent-moderate-pressedA);
 
-.navds-combobox__list-item--selected p {
-  font-weight: var(--a-font-weight-bold);
-}
-
-.navds-combobox__list-item--selected.navds-combobox__list-item--focus,
-.navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
-  background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
-  border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
+  & p {
+    font-weight: var(--ax-font-weight-bold);
+  }
 }
 
 .navds-combobox__list-item--new-option {
-  border-bottom: 1px solid var(--a-border-divider);
-  background: var(--a-surface-neutral-subtle);
+  border-bottom: 1px solid var(--ax-border-accent-subtleA);
+  border-radius: 0;
+  background: var(--ax-bg-accent-moderateA);
   cursor: pointer;
   justify-content: flex-start;
   gap: 0.25rem;
-}
+  margin: 0;
+  margin-block-start: calc(var(--ax-space-4) * -1);
 
-.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
-  border-bottom: 1px solid var(--a-border-divider);
-  background: var(--a-surface-neutral-subtle-hover);
+  & svg {
+    color: var(--ax-text-neutral);
+  }
+
+  &:only-child {
+    margin-block: calc(var(--ax-space-4) * -1);
+    border: none;
+  }
 }
 
 .navds-combobox__list-item--new-option--focus {
-  box-shadow:
-    var(--a-shadow-focus) inset,
-    var(--a-border-action) 0 0 0 5px inset;
-  border-radius: calc(var(--a-border-radius-medium) - 1px);
-}
+  border-radius: calc(var(--ax-border-radius-large) - 1px) calc(var(--ax-border-radius-large) - 1px) 0 0;
 
-.navds-combobox__list-item mark {
-  background-color: transparent;
-  font-weight: bold;
+  /* TODO: new option should get a wrapper div later to
+* style it properly with a nice rounded border radius
+* */
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: -2px;
+
+  &:only-child {
+    border-radius: calc(var(--ax-border-radius-large) - 1px);
+  }
 }
 
 /* Mobile */
-
 @media (max-width: 479px) {
   .navds-combobox__button-toggle-list {
     right: 0.5rem;
@@ -390,15 +390,11 @@
   }
 
   .navds-combobox__selected-options {
-    gap: var(--a-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;
   }
@@ -416,12 +412,16 @@
   }
 
   .navds-combobox__list-item--selected {
-    background-color: selecteditem;
+    background-color: highlight;
     color: selecteditemtext;
-  }
 
-  .navds-combobox__list-item--selected > * {
-    forced-color-adjust: none;
+    & * {
+      color: black;
+    }
+
+    & > * {
+      forced-color-adjust: none;
+    }
   }
 
   .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
@@ -436,6 +436,30 @@
 
   .navds-combobox__list-item--new-option--focus {
     outline: 2px solid highlight;
-    outline-offset: -3px;
+    outline-offset: 0;
+  }
+
+  .navds-combobox--disabled {
+    opacity: 1;
+
+    & * {
+      border-color: graytext;
+      color: graytext;
+      opacity: 1;
+    }
+  }
+
+  .navds-combobox__list-item--new-option {
+    svg {
+      color: canvastext;
+    }
+
+    &:hover {
+      color: highlight;
+
+      svg {
+        color: highlight;
+      }
+    }
   }
 }

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

@@ -1,38 +1,38 @@
 .navds-error-summary {
   background-color: var(--ax-bg-default);
-  padding: 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;
+  outline-offset: 3px;
 
   &:focus-visible,
   &:has(.navds-error-summary__heading:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
   }
 }
 
 @supports not selector(:focus-visible) {
   .navds-error-summary:focus {
-    outline: 2px solid var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
   }
 }
 
 .navds-error-summary--small {
-  padding: var(--ax-spacing-3);
+  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,11 +6,11 @@
 }
 
 .navds-fieldset > :not(:first-child, :empty) {
-  margin-top: var(--ax-spacing-2);
+  margin-top: var(--ax-space-8);
 }
 
 .navds-fieldset__description {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
@@ -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,17 +1,7 @@
-/* Makes it easier for user to use FileItem in semantic lists */
-.navds-file-upload {
-  & :is(ul, li) {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-}
-
 /* --------------------------- FileUpload Dropzone -------------------------- */
 .navds-dropzone__area {
   --__axc-dropzone-background: var(--ax-bg-input);
-  --__axc-dropzone-padding: var(--ax-spacing-6);
-  --__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);
@@ -22,13 +12,13 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--ax-spacing-4);
+  gap: var(--ax-space-16);
   text-align: center;
-  padding: var(--__axc-dropzone-padding);
-  border: 1px dashed var(--ax-border-default);
+  padding: var(--ax-space-16) var(--ax-space-20);
+  border: 1px dashed var(--ax-border-neutral);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--__axc-dropzone-background);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
   cursor: pointer;
 
@@ -36,19 +26,23 @@
     border-color: var(--ax-border-accent-strong);
 
     & > .navds-dropzone__area-button {
-      color: var(--ax-text-accent-strong);
       background-color: var(--ax-bg-accent-moderate-hover);
       box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
     }
   }
 
-  &:active .navds-dropzone__area-button {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
-    box-shadow: none;
+  &:active:not([data-disabled="true"]) {
+    & > .navds-dropzone__area-button {
+      background-color: var(--ax-bg-accent-strong-pressed);
+      color: var(--ax-text-accent-contrast);
+      box-shadow: none;
+    }
   }
 
   &[data-disabled="true"] {
+    --__axc-dropzone-background: var(--ax-bg-neutral-soft);
+
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 }
@@ -59,7 +53,7 @@
   }
 
   & > .navds-dropzone__area::after {
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     background-color: var(--ax-bg-accent-moderateA);
     content: "";
     inset: 0;
@@ -99,12 +93,12 @@
 
 .navds-dropzone--error > .navds-dropzone__area {
   border-color: transparent;
-  outline: 2px solid var(--ax-border-danger);
+  outline: 2px solid var(--ax-border-danger-strong);
   outline-offset: -1px;
 }
 
 .navds-dropzone__area-release {
-  top: var(--__axc-dropzone-padding);
+  top: var(--ax-space-16);
   display: grid;
   position: absolute;
   z-index: 1;
@@ -140,42 +134,51 @@
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent-subtle);
   top: 50%;
   transform: translateY(-50%);
 }
 
 .navds-dropzone__area-disabled {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 /* ----------------------------- FileUpload Item ---------------------------- */
+.navds-file-upload :is(ul, li),
+ul:has(> li.navds-file-item),
+li.navds-file-item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 .navds-file-item__inner {
   background-color: var(--ax-bg-raised);
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   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);
+  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;
 }
 
 .navds-file-item--error > .navds-file-item__inner {
-  outline: 2px solid var(--ax-border-danger);
+  outline: 2px solid var(--ax-border-danger-strong);
 }
 
 .navds-file-item__icon {
   background-color: var(--ax-bg-neutral-moderateA);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-full);
   min-height: 2.5rem;
   min-width: 2.5rem;
+  margin-top: var(--ax-space-2);
   display: grid;
   place-content: center;
   transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
@@ -199,7 +202,6 @@
 }
 
 .navds-file-item__error {
-  color: var(--ax-text-danger);
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
@@ -207,20 +209,8 @@
   overflow: hidden;
   grid-template-rows: 0fr;
 
-  & .navds-file-item__error {
+  .navds-file-item--error & {
     grid-template-rows: 1fr;
-    padding-top: var(--ax-spacing-1);
-  }
-}
-
-.navds-file-item__error-content {
-  min-height: 0;
-  display: flex;
-  gap: var(--ax-spacing-1);
-
-  & > svg {
-    flex-shrink: 0;
-    height: 1rem;
-    margin-top: 0.1rem;
+    padding-top: var(--ax-space-4);
   }
 }

@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 {
@@ -21,37 +21,35 @@
 
 .navds-form-progress__collapsible {
   display: grid;
-  grid-template-rows: 0fr;
+  visibility: hidden;
   overflow: hidden;
-  transition: grid-template-rows 250ms cubic-bezier(0.2, 0, 0, 1);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  background: var(--ax-bg-raised);
+  padding-inline: var(--ax-space-20);
+  padding-block: 0;
+  opacity: 0.001;
+  transition-duration: 1s;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  transition-property: margin-top, opacity, visibility, padding-block-start, grid-template-rows;
+  grid-template-rows: 0fr;
+
+  /* border-block leaves 2px of space when closes, so offset 2px with margin */
+  margin-top: -2px;
 
   &[hidden] {
-    display: grid !important;
+    display: grid;
   }
 
   &[data-state="open"] {
+    margin-top: var(--ax-space-4);
     grid-template-rows: 1fr;
+    visibility: visible;
+    padding-block: var(--ax-space-16);
+    opacity: 1;
   }
 }
 
 .navds-form-progress__collapsible-content {
   min-height: 0;
-  opacity: 0.01;
-  visibility: hidden;
-  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
-  transition-duration: 250ms;
-  transition-property: opacity, visibility;
-}
-
-.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
-  visibility: visible;
-  opacity: 1;
-}
-
-.navds-form-progress__stepper {
-  border: 1px solid var(--ax-border-subtle);
-  border-radius: var(--ax-border-radius-large);
-  padding: var(--ax-spacing-4);
-  margin-top: var(--ax-spacing-1);
-  background: var(--ax-bg-raised);
 }

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

@@ -7,48 +7,48 @@
 
 .navds-form-summary__header {
   background: var(--ax-bg-neutral-moderateA);
-  padding: var(--ax-spacing-4) var(--ax-spacing-6);
+  padding: var(--ax-space-20) var(--ax-space-20) var(--ax-space-16) var(--ax-space-20);
   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-16) var(--ax-space-16) 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;
 }
 
 .navds-form-summary > .navds-form-summary__answers {
-  border-top: 1px solid var(--ax-border-subtleA);
+  border-top: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-form-summary__answers {
-  padding: var(--ax-spacing-5) var(--ax-spacing-6) var(--ax-spacing-6);
+  padding: var(--ax-space-16) var(--ax-space-20) var(--ax-space-20) var(--ax-space-20);
   margin: 0;
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__answers {
-    padding: var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-16) var(--ax-space-16);
   }
 }
 
 .navds-form-summary__answer:not(:last-child) {
-  margin-bottom: var(--ax-spacing-4);
-  padding-bottom: var(--ax-spacing-4);
-  border-bottom: 1px solid var(--ax-border-subtleA);
+  margin-bottom: var(--ax-space-16);
+  padding-bottom: var(--ax-space-16);
+  border-bottom: 1px solid var(--ax-border-neutral-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,24 +57,25 @@
 
 @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);
+  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);
 
   & .navds-form-summary__answer {
     border-color: var(--ax-border-info-subtleA);

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

@@ -1,29 +1,16 @@
 .navds-form-field {
   display: grid;
   justify-items: start;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-form-field__description {
   margin-top: -0.375rem;
-  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: "•";
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-form-field--disabled {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
   cursor: not-allowed;
 }
 
@@ -32,7 +19,7 @@
 }
 
 .navds-form-field__subdescription {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-form-field--readonly > :where(.navds-form-field__label) {
@@ -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/index.css

@@ -1,16 +1,14 @@
-@layer aksel.forms.base, aksel.forms.component;
-
-@import "./fieldset.darkside.css" layer(aksel.forms.base);
-@import "./file-upload.darkside.css" layer(aksel.forms.component);
-@import "./form.darkside.css" layer(aksel.forms.component);
-@import "./error-summary.darkside.css" layer(aksel.forms.component);
-@import "./confirmation-panel.darkside.css" layer(aksel.forms.component);
-@import "./radio-checkbox.darkside.css" layer(aksel.forms.component);
-@import "./select.darkside.css" layer(aksel.forms.component);
-@import "./switch.darkside.css" layer(aksel.forms.component);
-@import "./text-field.darkside.css" layer(aksel.forms.component);
-@import "./textarea.darkside.css" layer(aksel.forms.component);
-@import "./search.darkside.css" layer(aksel.forms.component);
-@import "./combobox.darkside.css" layer(aksel.forms.component);
-@import "./form-summary.darkside.css" layer(aksel.forms.component);
-@import "./form-progress.darkside.css" layer(aksel.forms.component);
+@import "./fieldset.darkside.css";
+@import "./file-upload.darkside.css";
+@import "./form.darkside.css";
+@import "./error-summary.darkside.css";
+@import "./confirmation-panel.darkside.css";
+@import "./radio-checkbox.darkside.css";
+@import "./select.darkside.css";
+@import "./switch.darkside.css";
+@import "./text-field.darkside.css";
+@import "./textarea.darkside.css";
+@import "./search.darkside.css";
+@import "./combobox.darkside.css";
+@import "./form-summary.darkside.css";
+@import "./form-progress.darkside.css";

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

@@ -18,13 +18,13 @@
 
 .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-border: var(--ax-border-subtle);
+  --__axc-radio-checkbox-readonly-border: var(--ax-border-neutral-subtle);
 }
 
 .navds-checkbox__label::before,
@@ -35,7 +35,7 @@
   flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem;
-  border: 2px solid var(--ax-border-default);
+  border: 2px solid var(--ax-border-neutral);
 }
 
 .navds-radio__label::before {
@@ -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,
@@ -68,26 +68,42 @@
   height: 1.25rem;
 }
 
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
-}
-
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+.navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio__input:focus + .navds-radio__label::after {
   content: "";
   position: absolute;
-  top: 50%;
-  transform: translate(var(--ax-spacing-1-alt), -50%);
-  background-color: var(--ax-bg-default);
-  width: 0.75rem;
-  height: 0.25rem;
-  border-radius: 1px;
-  flex-shrink: 0;
+  width: 100%;
+  height: calc(100% - var(--ax-space-24));
+  border-radius: var(--ax-border-radius-medium);
+  outline: 3px solid var(--ax-border-focus);
+  outline-offset: 3px;
+  pointer-events: none;
 }
 
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  transform: translate(0.25rem, -50%);
+.navds-checkbox--small > .navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio--small > .navds-radio__input:focus + .navds-radio__label::after {
+  height: calc(100% - var(--ax-space-12));
+}
+
+.navds-checkbox__icon-indeterminate {
+  display: none;
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  display: block;
+  width: 0.75rem;
+  height: 0.25rem;
+  background-color: var(--ax-bg-default);
+  border-radius: 1px;
+  position: absolute;
+  transform: translate(var(--ax-space-6), -50%);
+  top: 50%;
+  pointer-events: none;
+}
+
+.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  transform: translate(var(--ax-space-4), -50%);
+  height: 0.1875rem;
 }
 
 .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
@@ -108,7 +124,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 */
@@ -140,8 +156,8 @@
 }
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ax-text-accent-strong);
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label {
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
@@ -152,13 +168,12 @@
 
 .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before {
-  border-color: var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
 }
 
 .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label::before {
   background-color: var(--ax-bg-danger-moderate-hoverA);
-  border-color: var(--ax-border-danger-strong);
 }
 
 .navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label::before {
@@ -172,7 +187,7 @@
 
 .navds-checkbox--disabled,
 .navds-radio--disabled {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 }
 
 .navds-checkbox--disabled > .navds-checkbox__input,
@@ -194,7 +209,7 @@
 
 .navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
 .navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label::before,
@@ -211,19 +226,19 @@
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
   background-color: var(--ax-bg-neutral-strong);
   border-width: 0;
   box-shadow:
-    inset 0 0 0 2px var(--ax-border-subtle),
+    inset 0 0 0 2px var(--ax-border-neutral-subtle),
     inset 0 0 0 8px var(--ax-bg-neutral-moderate);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  background-color: var(--ax-text-subtle);
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  background-color: var(--ax-text-neutral-subtle);
 }
 
 @media (forced-colors: active) {
@@ -247,7 +262,7 @@
     color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
@@ -265,7 +280,10 @@
     background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox--readonly
+    > .navds-checkbox__input:indeterminate
+    + .navds-checkbox__label
+    > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 

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

@@ -1,19 +1,3 @@
-[data-theme="dark"] {
-  --__ac-search-button-border: var(--a-border-on-inverted);
-  --__ac-search-button-border-hover: var(--a-blue-200);
-  --__ac-search-clear-icon: var(--a-white);
-  --__ac-search-clear-icon-hover: var(--a-blue-200);
-  --__ac-search-error-border: var(--a-red-300);
-}
-
-[data-theme="light"] {
-  --__ac-search-button-border: initial;
-  --__ac-search-button-border-hover: initial;
-  --__ac-search-clear-icon: initial;
-  --__ac-search-clear-icon-hover: initial;
-  --__ac-search-error-border: initial;
-}
-
 .navds-search {
   display: flex;
   flex-direction: column;
@@ -25,204 +9,142 @@
   width: 100%;
 }
 
-.navds-search--with-size :where(.navds-search__wrapper-inner) {
-  width: inherit;
+.navds-search--with-size {
+  & .navds-search__wrapper-inner {
+    width: inherit;
+  }
+
+  & .navds-search__wrapper {
+    width: fit-content;
+  }
 }
 
 .navds-search__wrapper {
   display: inline-flex;
   align-items: center;
+  border-radius: var(--ax-border-radius-large);
+
+  /* We have to outline the whole container to include the Search-buttons */
+  &:has(.navds-search__input:focus-visible) {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
 }
 
+/* ------------------------------ Search input ------------------------------ */
 .navds-search__input {
-  padding-right: var(--a-spacing-10);
-}
+  padding-right: var(--ax-space-40);
 
-.navds-form-field--small .navds-search__input {
-  padding-right: var(--a-spacing-8);
+  &:focus-visible {
+    outline: none;
+  }
+
+  &.navds-search__input--primary,
+  &.navds-search__input--secondary {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+  }
 }
 
 .navds-search__input--simple {
-  padding-left: var(--a-spacing-11);
+  padding-left: var(--ax-space-40);
 }
 
-.navds-form-field--small .navds-search__input--simple {
-  padding-left: var(--a-spacing-7);
-}
+/* ------------------------------ Search sizing ----------------------------- */
+.navds-form-field--small {
+  & .navds-search__input {
+    padding-right: var(--ax-space-28);
+  }
 
-.navds-search__input:not(.navds-search__input--simple) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  & .navds-search__input--simple {
+    padding-left: var(--ax-space-28);
+  }
+
+  & .navds-search__search-icon {
+    left: var(--ax-space-4);
+    font-size: 1.25rem;
+  }
+
+  & .navds-search__button-clear {
+    right: var(--ax-space-4);
+  }
 }
 
+/* ------------------------------- Search icon ------------------------------ */
 .navds-search__search-icon {
   position: absolute;
-  left: var(--a-spacing-3);
+  left: var(--ax-space-8);
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
   font-size: 1.5rem;
-}
 
-.navds-form-field--small .navds-search__search-icon {
-  left: var(--a-spacing-2);
-  font-size: 1rem;
-}
-
-.navds-search__button-clear {
-  position: absolute;
-  right: 0.75rem;
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
-  height: 32px;
-  width: 32px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  padding: 0;
-}
-
-.navds-form-field--small .navds-search__button-clear {
-  right: 0.5rem;
-  height: 24px;
-  width: 24px;
-}
-
-.navds-search__button-clear:hover {
-  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action-hover)));
-}
-
-.navds-search__button-clear:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-search__button-clear:focus {
-    outline: 2px solid transparent;
-    box-shadow: var(--a-shadow-focus);
+  .navds-search--disabled & {
+    opacity: var(--ax-opacity-disabled);
   }
 }
 
+/* --------------------------- Search Clear-button -------------------------- */
+.navds-search__button-clear {
+  position: absolute;
+  right: var(--ax-space-8);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* ------------------------------ Search Button ----------------------------- */
 .navds-search__button-search {
   flex-shrink: 0;
-  min-width: 4rem;
-  min-height: 2rem;
   border-radius: 0;
-  border-top-right-radius: var(--a-border-radius-medium);
-  border-bottom-right-radius: var(--a-border-radius-medium);
-}
-
-.navds-form-field--small .navds-search__button-search svg {
-  font-size: 1rem;
-}
-
-.navds-form-field--small .navds-search__button-search {
-  min-width: 2.5rem;
+  border-top-right-radius: var(--ax-border-radius-large);
+  border-bottom-right-radius: var(--ax-border-radius-large);
 }
 
 .navds-search__button-search.navds-button--secondary {
-  box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
-}
+  --__axc-button-border-width: 1px;
+  --__axc-button-border-color: var(--ax-border-neutral);
 
-.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
-  box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
-  z-index: 1;
-}
-
-.navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
-  z-index: auto;
-}
-
-.navds-search__button-search.navds-button--secondary:focus-visible {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    var(--a-shadow-focus);
-}
-
-.navds-search__button-search.navds-button--secondary:focus-visible:hover {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    var(--a-shadow-focus);
-}
-
-.navds-search__button-search.navds-button--secondary:focus-visible:active {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-search__button-search.navds-button--secondary:focus {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-      var(--a-shadow-focus);
+  &:not(:hover, :active) {
+    background-color: var(--ax-bg-input);
   }
 
-  .navds-search__button-search.navds-button--secondary:focus:hover {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
-      var(--a-shadow-focus);
-  }
-
-  .navds-search__button-search.navds-button--secondary:focus:active {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
-      var(--a-shadow-focus);
+  &:hover:not(:disabled) {
+    --__axc-button-border-color: var(--ax-border-accent-strong);
   }
 }
 
-/* Error-handling */
-.navds-search--error .navds-search__input:not(:hover, :disabled) {
-  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+/* Special-case where we hover/focus input, and want the secondary-button to match input-border */
+.navds-search:not(.navds-search--error, .navds-search--disabled)
+  .navds-search__wrapper:has(.navds-search__input:is(:hover, :focus-visible))
+  .navds-search__button-search.navds-button--secondary:not(:hover, :active) {
+  --__axc-button-border-color: var(--ax-border-accent-strong);
 }
 
-.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
+/* --------------------------- Search Error-state --------------------------- */
+.navds-search--error .navds-search__input:not(:disabled) {
+  border-color: var(--ax-border-danger-strong);
   box-shadow:
-    inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
-    var(--a-shadow-focus);
+    inset -2px 0 0 0 var(--ax-border-danger-strong),
+    inset 0 0 0 1px var(--ax-border-danger-strong);
+
+  &.navds-search__input--simple {
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
+  }
 }
 
-/* Focus layering */
+/* -------------------------- Search Focus layering ------------------------- */
 .navds-search__input:focus-visible,
-.navds-search__button-clear,
 .navds-search__button-search:focus-visible {
   z-index: 1;
 }
 
-@supports not selector(:focus-visible) {
-  .navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
-      var(--a-shadow-focus);
-  }
+/* -------------------------- Search disabled state ------------------------- */
 
-  .navds-search__input:focus,
-  .navds-search__button-search:focus {
-    z-index: 1;
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-modal {
-    outline: 2px solid transparent;
-  }
-
-  .navds-search__button-clear:hover {
-    color: highlight;
+/* We can't re-use disabled-state for form-fields since opacity multiplies on search-button */
+.navds-search--disabled {
+  .navds-search__input {
+    opacity: var(--ax-opacity-disabled);
+    cursor: not-allowed;
   }
 }

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

@@ -1,48 +1,34 @@
 .navds-select__input {
   appearance: none;
-  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-select-border, var(--a-border-default));
-  color: var(--ac-select-text, var(--a-text-default));
+  background-color: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-neutral);
+  color: var(--ax-text-neutral);
   width: 100%;
   box-sizing: border-box;
   min-height: 3rem;
   display: inline-block;
   position: relative;
-  padding: 0.5rem;
-  padding-right: 2rem;
-}
+  padding: var(--ax-space-8);
+  padding-right: var(--ax-space-40);
 
-@media (forced-colors: active) {
-  .navds-select__input.navds-select__input.navds-select__input {
-    background-color: ButtonFace;
-    border-color: ButtonText;
-    color: ButtonText;
-    forced-color-adjust: none;
-    box-shadow: none;
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+    cursor: pointer;
   }
 
-  .navds-select__input.navds-select__input.navds-select__input:focus-visible {
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+  &:focus {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-color: var(--ax-border-accent-strong);
   }
-}
 
-.navds-select__input:hover {
-  border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
-  cursor: pointer;
-}
-
-.navds-select__input:focus-visible {
-  outline: none;
-  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-select__input:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+  @media (forced-colors: active) {
+    & {
+      background-color: ButtonFace;
+      border-color: ButtonText;
+      color: ButtonText;
+    }
   }
 }
 
@@ -50,66 +36,86 @@
   position: relative;
   display: flex;
   width: 100%;
-  color: var(--a-text-default);
+  color: var(--ax-text-neutral);
 }
 
+/* ------------------------------- Select Icon ------------------------------ */
 .navds-select__chevron {
   position: absolute;
   font-size: 1.5rem;
-  right: var(--a-spacing-2);
+  right: var(--ax-space-8);
   pointer-events: none;
   align-self: center;
-  color: var(--ac-select-text, var(--a-text-default));
-}
+  color: var(--ax-text-neutral);
 
-@media (forced-colors: active) {
-  .navds-select__chevron {
-    color: ButtonText;
+  @media (forced-colors: active) {
+    & {
+      color: ButtonText;
+    }
   }
 }
 
-.navds-form-field--small .navds-select__input {
-  min-height: 2rem;
-  padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2);
+/* ------------------------------ Select Sizing ----------------------------- */
+.navds-form-field--small {
+  & .navds-select__input {
+    min-height: 2rem;
+    padding-block: 0;
+  }
 }
 
-.navds-form-field--small .navds-select__chevron {
-  right: var(--a-spacing-1-alt);
+/* --------------------------- Select Error-state --------------------------- */
+.navds-select--error {
+  > * select {
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
+  }
+
+  > * select:hover,
+  > * select:focus {
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
+  }
 }
 
-/**
-  Error handling
-*/
-.navds-select--error > * select:not(:hover, :focus, :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));
-}
-
-/**
-  Disabled
-*/
+/* ----------------------------- Select disabled ---------------------------- */
 .navds-select__input:disabled {
-  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  background-color: var(--ax-bg-input);
+  border: 1px solid var(--ax-border-neutral);
   box-shadow: none;
   cursor: not-allowed;
 
   /* Chrome-fix */
   opacity: 1;
-  color: var(--a-text-default);
+  color: var(--ax-text-neutral);
+
+  & > option {
+    color: var(--ax-text-neutral);
+  }
+
+  @media (forced-colors: active) {
+    & + .navds-select__chevron {
+      color: GrayText;
+    }
+  }
 }
 
-/* Chrome-fix */
-.navds-select__input:disabled > option {
-  color: var(--a-text-default);
-}
+/* ----------------------------- Select Readonly ---------------------------- */
+.navds-select--readonly {
+  & .navds-select__input {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
 
-.navds-select--readonly .navds-select__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-  cursor: default;
-}
+    @media (forced-colors: active) {
+      &:is(:hover, :focus) {
+        background-color: ButtonFace;
+        border-color: ButtonText;
+        color: ButtonText;
+      }
+    }
+  }
 
-.navds-select--readonly .navds-select__chevron {
-  color: var(--a-gray-500);
+  & .navds-select__chevron {
+    color: var(--ax-text-neutral-subtle);
+  }
 }

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

@@ -4,16 +4,11 @@
   width: fit-content;
 }
 
-.navds-switch--right {
-  width: auto;
-}
-
 .navds-switch--small {
-  position: relative;
   min-height: 2rem;
 }
 
-/* Input */
+/* ------------------------------ Switch Input ------------------------------ */
 .navds-switch__input {
   cursor: pointer;
   position: absolute;
@@ -22,158 +17,174 @@
   height: 3rem;
   opacity: 0;
   top: 0;
+
+  .navds-switch--small > & {
+    height: 2rem;
+    top: 0;
+  }
 }
 
-.navds-switch--small > .navds-switch__input {
-  height: 2rem;
-  top: 0;
-}
-
-/* Label */
+/* -------------------------- Switch content/label -------------------------- */
 .navds-switch__label-wrapper {
   cursor: pointer;
-  color: var(--a-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-switch__content {
+  --__axc-switch-block-padding: 0.75rem;
+
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.75rem 0 0.75rem 3.25rem;
-}
+  gap: var(--ax-space-2);
+  padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
 
-.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: 0.75rem 3.25rem 0.75rem 0;
-}
+  .navds-switch--right & {
+    padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
+  }
 
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
-}
+  .navds-switch--small & {
+    --__axc-switch-block-padding: 0.375rem;
+  }
 
-.navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
-}
+  &.navds-switch--with-description {
+    padding-bottom: 0;
+  }
 
-.navds-switch--with-description,
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
-  padding-bottom: 0;
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: calc(100% - var(--__axc-switch-block-padding) * 2);
+    border-radius: var(--ax-border-radius-medium);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    pointer-events: none;
+  }
+
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &.navds-switch--with-description::after {
+    height: calc(100% - var(--__axc-switch-block-padding) * 1);
+  }
 }
 
 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--ac-switch-action, var(--a-surface-action-selected));
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
   color: inherit;
 }
 
-/* Track */
+/* ------------------------------ Switch Track ------------------------------ */
 .navds-switch__track {
   width: 2.75rem;
   height: 1.5rem;
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  background-color: var(--ax-bg-input);
   position: absolute;
-  top: var(--a-spacing-3);
+  top: var(--ax-space-12);
   left: 0;
-  border-radius: var(--a-border-radius-full);
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
+  border-radius: var(--ax-border-radius-full);
+  border: 2px solid var(--ax-border-neutral);
+  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 {
-  top: var(--a-spacing-1);
-}
+  .navds-switch--small > & {
+    top: var(--ax-space-4);
+  }
 
-.navds-switch--right > .navds-switch__input,
-.navds-switch--right > .navds-switch__track {
-  right: 0;
-  left: auto;
-}
+  .navds-switch__input:checked ~ & {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    border-color: var(--ax-bg-accent-strong-pressed);
+  }
 
-.navds-switch__input:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
-}
+  .navds-switch__input:hover:checked ~ & {
+    background-color: var(--ax-bg-accent-strong-hover);
+    border-color: var(--ax-bg-accent-strong-hover);
+  }
 
-.navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
-}
+  .navds-switch__input:disabled ~ & {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-neutral);
+  }
 
-.navds-switch__input:hover:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
-}
+  .navds-switch__input:checked:disabled ~ & {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    border-color: var(--ax-bg-accent-strong-pressed);
+  }
 
-.navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
-}
-
-.navds-switch__input:checked:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
-}
-
-.navds-switch__input:focus-visible ~ .navds-switch__track {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-switch__input:focus ~ .navds-switch__track {
-    outline: 2px solid transparent;
-    box-shadow:
-      0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
+  .navds-switch--standalone > .navds-switch__input:focus ~ & {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
-/* Thumb */
+/* ------------------------------ Switch Thumb ------------------------------ */
 .navds-switch__thumb {
-  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
-  color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
-  border-radius: var(--a-border-radius-full);
-  width: 1.25rem;
-  height: 1.25rem;
+  background-color: var(--ax-bg-neutral-strong);
+  border-radius: var(--ax-border-radius-full);
+  width: 1.125rem;
+  height: 1.125rem;
   position: absolute;
   transform: translateX(0);
-  left: var(--a-spacing-05);
-  top: var(--a-spacing-05);
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
+  left: 0.0625rem;
+  top: 0.0625rem;
+
+  .navds-switch__input:checked ~ .navds-switch__track > & {
+    background-color: var(--ax-bg-raised);
+    transform: translateX(1.25rem);
+    color: var(--ax-text-accent-subtle);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0;
+    top: 0;
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track > & > .navds-switch__checkmark {
+    visibility: visible;
+    opacity: 1;
+  }
 }
 
-.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));
+.navds-switch__checkmark {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0.125rem);
+  .navds-switch__input:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0.0625rem);
   }
 
-  .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(1.125rem);
+  .navds-switch__input:checked:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(1.19rem);
   }
 }
 
-.navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(0);
+.navds-switch--right {
+  width: auto;
+
+  & .navds-switch__input,
+  & .navds-switch__track {
+    right: 0;
+    left: auto;
+  }
 }
 
-.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1.25rem);
-}
-
-/* Disabled */
+/* -------------------------- Switch Disabled-state ------------------------- */
 .navds-switch__input:disabled {
   appearance: none;
 }
 
 .navds-switch--disabled:not(.navds-switch--loading) {
-  opacity: 0.3;
+  opacity: var(--ax-opacity-disabled);
 }
 
 .navds-switch__input:disabled,
@@ -181,47 +192,51 @@
   cursor: not-allowed;
 }
 
-/* Readonly */
-.navds-switch--readonly > .navds-switch__track,
-.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
-.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);
-}
-
-.navds-switch--readonly > .navds-switch__label-wrapper,
-.navds-switch--readonly > .navds-switch__input {
-  cursor: default;
-}
-
-.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-.navds-switch--readonly .navds-switch__label-wrapper:hover {
-  color: var(--a-text-default);
-}
-
-.navds-switch--readonly .navds-switch__label {
-  display: inline-flex;
-}
-
-.navds-switch--readonly .navds-switch__thumb {
-  background-color: var(--a-surface-subtle);
-  box-shadow: 0 0 0 2px var(--a-border-default);
-}
-
-.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  color: var(--a-icon-subtle);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0);
+/* -------------------------- Switch Readonly state ------------------------- */
+.navds-switch--readonly {
+  & > .navds-switch__track,
+  & > .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);
   }
 
-  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(1.25rem);
+  & > .navds-switch__label-wrapper,
+  & > .navds-switch__input {
+    cursor: default;
+  }
+
+  & > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+  & .navds-switch__label-wrapper:hover {
+    color: var(--ax-text-neutral);
+  }
+
+  & .navds-switch__label {
+    display: inline-flex;
+  }
+
+  & .navds-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+  }
+
+  & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    & > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(0);
+    }
+
+    & > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(1.25rem);
+    }
   }
 }
 
+/* ------------------------ Switch Forced colors mode ----------------------- */
 @media (forced-colors: active) {
   .navds-switch__input:hover ~ .navds-switch__label-wrapper,
   .navds-switch__label-wrapper:hover {
@@ -230,7 +245,7 @@
 
   .navds-switch__thumb,
   .navds-switch--readonly .navds-switch__thumb {
-    background-color: fieldtext;
+    background-color: fieldtext !important;
   }
 
   .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
@@ -238,16 +253,9 @@
     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__input:focus-visible ~ .navds-switch__track {
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > .navds-switch__content::after,
+  .navds-switch--standalone > .navds-switch__input:focus ~ .navds-switch__track {
+    outline: 3px solid highlight;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) {
@@ -255,11 +263,11 @@
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
-    background-color: graytext;
+    background-color: graytext !important;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
-    border-color: graytext;
+    border-color: graytext !important;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,

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

@@ -1,12 +1,12 @@
 .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);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-neutral);
   min-height: 3rem;
   width: 100%;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:hover {
     border-color: var(--ax-border-accent-strong);
@@ -14,18 +14,18 @@
 
   &:focus-visible {
     border-color: var(--ax-border-accent-strong);
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   &:disabled {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
     cursor: not-allowed;
   }
 
   &::placeholder {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   &[size] {
@@ -34,13 +34,13 @@
 }
 
 .navds-form-field--small .navds-text-field__input {
-  padding: 0 var(--ax-spacing-2);
+  padding: 0 var(--ax-space-8);
   min-height: 2rem;
 }
 
-.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
-  border-color: var(--ax-border-danger);
-  box-shadow: 0 0 0 1px var(--ax-border-danger);
+.navds-text-field--error .navds-text-field__input:not(:disabled) {
+  border-color: var(--ax-border-danger-strong);
+  box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 }
 
 .navds-text-field--readonly .navds-text-field__input {