Version Packages (#3529)

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,31 +18,21 @@ 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
@@ -70,7 +60,7 @@ jobs:
 
       - name: Find Comment
         if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
-        uses: peter-evans/find-comment@v2
+        uses: peter-evans/find-comment@v3
         id: fc
         with:
           issue-number: ${{ github.event.pull_request.number }}
@@ -79,7 +69,7 @@ jobs:
 
       - name: Create or update comment
         if: github.event_name != 'push' && !contains(github.event.head_commit.message, '[ci skip]')
-        uses: peter-evans/create-or-update-comment@v3
+        uses: peter-evans/create-or-update-comment@v4
         with:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}

.github/workflows/ci.yml

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

.github/workflows/e2e-optimized.yml

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

.github/workflows/e2e.yml

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

.github/workflows/figma-config.yml

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

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

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

.github/workflows/release.yml

@@ -30,9 +30,7 @@ jobs:
         with:
           node-version: lts/*
           cache: yarn
-      - name: set-env for yarn install to @navikt scope
-        shell: bash
-        run: echo "NPM_AUTH_TOKEN=${{ secrets.READER_TOKEN }}" >> $GITHUB_ENV
+          cache-dependency-path: "**/yarn.lock"
 
       - uses: denoland/setup-deno@v1
         with:
@@ -40,6 +38,8 @@ jobs:
 
       - name: Install dependencies
         run: yarn
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
 
       - name: Create release Pull Request or publish to NPM
         id: changesets

.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

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/aksel-icons
 
+## 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

@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": "^6.0.9",
     "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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "7.9.0",
+  "version": "7.11.0",
   "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {
@@ -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,13 @@
 # @navikt/aksel-stylelint
 
+## 7.11.0
+
+## 7.10.0
+
+## 7.9.2
+
+## 7.9.1
+
 ## 7.9.0
 
 ## 7.8.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.9.0",
+  "version": "7.11.0",
   "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,14 +35,14 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^7.9.0",
-    "@navikt/ds-tokens": "^7.9.0",
+    "@navikt/ds-css": "^7.11.0",
+    "@navikt/ds-tokens": "^7.11.0",
     "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/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @navikt/aksel
 
+## 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

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.9.0",
+  "version": "7.11.0",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "7.9.0",
+    "@navikt/ds-css": "^7.11.0",
     "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,37 @@
 # @navikt/ds-css
 
+## 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

@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

@@ -497,7 +497,7 @@
 }
 
 /* Loader overrides */
-.navds-button .navds-loader {
+.navds-button > .navds-loader {
   position: absolute;
 }
 

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

@@ -6,6 +6,7 @@ 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", () => {
@@ -27,6 +28,9 @@ describe("Check that old and new (darkside) bundle matches", () => {
 
     // Compare file names
     oldFiles.forEach((file) => {
+      if (deprecatedFiles.find((oldFile) => file.includes(oldFile))) {
+        return;
+      }
       expect(darksideFiles).toContain(file);
     });
 
@@ -39,8 +43,9 @@ describe("Check that old and new (darkside) bundle matches", () => {
 
     /**
      * Check that darkside has the same amount of files as old bundle
-     * (minus the new files * 2 since .min.css is also included)
      */
-    expect(darksideFiles.length - newFiles.length * 2).toBe(oldFiles.length);
+    expect(
+      darksideFiles.length - newFiles.length * 2 + deprecatedFiles.length * 2,
+    ).toBe(oldFiles.length);
   });
 });

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

@@ -4,8 +4,8 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: var(--ax-spacing-3);
-  padding: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
+  padding: var(--ax-space-12);
   text-align: left;
   cursor: pointer;
   border: none;
@@ -26,7 +26,6 @@
 
   &:hover {
     background-color: var(--ax-bg-accent-hoverA);
-    color: var(--ax-text-accent-strong);
 
     &::before,
     &::after {
@@ -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,
@@ -74,10 +73,6 @@
   background-color: var(--ax-border-subtleA);
 }
 
-.navds-accordion__item:last-child > .navds-accordion__content {
-  border-bottom: 1px solid transparent;
-}
-
 .navds-accordion__header::after {
   top: initial;
   bottom: 0;
@@ -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);
 }
 
 .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-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-subtleA);
+      opacity: 1;
+
+      & .navds-accordion__content-inner {
+        min-height: fit-content;
+      }
+    }
+
+    &:last-child {
+      border-bottom: 1px solid var(--ax-border-subtleA);
+    }
+  }
+}
+
+/* ---------------- Accordion No Animation (defaultOpen) ---------------- */
+
+.navds-accordion__item--no-animation {
+  & > .navds-accordion__content {
+    transition: none;
   }
 }

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

@@ -1,7 +1,7 @@
 /* --------------------------- ActionMenu content --------------------------- */
 .navds-action-menu__content {
   overflow: hidden;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid var(--ax-border-subtleA);
   box-shadow: var(--ax-shadow-dialog);
   transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
@@ -34,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);
@@ -57,10 +57,10 @@
 .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);
@@ -87,14 +87,14 @@
 }
 
 .navds-action-menu__item--has-icon {
-  --__axc-action-menu-item-pl: var(--ax-spacing-6);
+  --__axc-action-menu-item-pl: var(--ax-space-24);
 }
 
 .navds-action-menu__sub-trigger {
-  --__axc-action-menu-item-pr: var(--ax-spacing-05);
+  --__axc-action-menu-item-pr: var(--ax-space-2);
 
   &[data-state="open"] {
-    background-color: var(--ax-bg-neutral-moderate-pressed);
+    background-color: var(--ax-bg-moderate-pressed);
   }
 
   &:focus {
@@ -107,7 +107,7 @@
 
   &:focus {
     background-color: var(--ax-bg-danger-moderate-hoverA);
-    color: var(--ax-text-danger-strong);
+    color: var(--ax-text-danger);
   }
 }
 
@@ -115,12 +115,12 @@
 .navds-action-menu__marker {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
 }
 
 .navds-action-menu__marker--right {
   margin-left: auto;
-  padding-left: var(--ax-spacing-4);
+  padding-left: var(--ax-space-16);
 }
 
 .navds-action-menu__marker--left {
@@ -138,10 +138,10 @@
 
 /* --------------------------- ActionMenu shortcut -------------------------- */
 .navds-action-menu__shortcut {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   color: var(--ax-text-default);
   border-radius: var(--ax-border-radius-small);
-  padding: 0 var(--ax-spacing-1);
+  padding: 0 var(--ax-space-4);
   min-width: 1.125rem;
   height: 1.125rem;
   line-height: 1;
@@ -167,7 +167,7 @@
 
 .navds-action-menu__divider {
   height: 1px;
-  margin-block: var(--ax-spacing-2);
+  margin-block: var(--ax-space-8);
   background-color: var(--ax-border-subtleA);
 }
 

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

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

@navikt/core/css/darkside/baseline/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/button.darkside.css

@@ -4,8 +4,8 @@
   --__axc-button-border-color: transparent;
   --__axc-button-border-width: 2px;
 
-  padding: var(--ax-spacing-3) var(--ax-spacing-5);
-  border-radius: var(--ax-border-radius-medium);
+  padding: var(--ax-space-12) var(--ax-space-20);
+  border-radius: var(--ax-border-radius-large);
   display: inline-flex;
   cursor: pointer;
   text-decoration: none;
@@ -13,47 +13,49 @@
   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: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
 .navds-button--small,
 .navds-button--xsmall {
   --__axc-button-icon-margin: -2px;
-  --__axc-button-icon-size: 1.25rem;
 }
 
 .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 {
-    padding: var(--ax-spacing-1);
+    padding: var(--ax-space-4);
   }
 
   &.navds-button--xsmall {
-    padding: var(--ax-spacing-05);
+    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);
   }
 }
 
@@ -109,19 +111,19 @@
  * .navds-button--primary-neutral *
  *************************/
 .navds-button--primary-neutral {
-  background-color: var(--ax-bg-neutral-strong);
-  color: var(--ax-text-neutral-contrast);
+  background-color: var(--ax-bg-strong);
+  color: var(--ax-text-contrast);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-strong-hover);
+    background-color: var(--ax-bg-strong-hover);
   }
 
   &:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
+    background-color: var(--ax-bg-strong-pressed);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
   }
 }
 
@@ -138,7 +140,6 @@
     --__axc-button-border-color: var(--ax-border-accent-strong);
 
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-accent-strong);
   }
 
   &:active {
@@ -168,18 +169,18 @@
   &:hover {
     --__axc-button-border-color: var(--ax-border-strong);
 
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:active {
     --__axc-button-border-color: transparent;
 
-    color: var(--ax-text-neutral-contrast);
-    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-strong-pressed);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-neutral);
+    --__axc-button-border-color: var(--ax-border-default);
 
     color: var(--ax-text-default);
     background-color: transparent;
@@ -195,7 +196,6 @@
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-accent-strong);
   }
 
   &:active {
@@ -217,12 +217,12 @@
   color: var(--ax-text-default);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 
   &:is(:disabled, .navds-button--disabled) {
@@ -264,7 +264,7 @@
 }
 
 /* Loader overrides */
-.navds-button .navds-loader {
+.navds-button > .navds-loader {
   position: absolute;
 }
 

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

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

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

@@ -1,6 +1,6 @@
 .navds-chips {
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -20,29 +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);
+    background-color: var(--ax-bg-moderateA);
   }
 }
 
 .navds-chips--small {
   .navds-chips__chip {
     min-height: 1.5rem;
-    padding: 0 var(--ax-spacing-2);
+    padding: 0 var(--ax-space-8);
   }
 
   .navds-chips__toggle-icon {
@@ -51,7 +51,7 @@
   }
 
   .navds-chips__toggle--with-checkmark {
-    padding-left: var(--ax-spacing-1);
+    padding-left: var(--ax-space-4);
   }
 
   .navds-chips__removable-icon {
@@ -64,7 +64,7 @@
   }
 
   .navds-chips--icon-right {
-    padding-right: var(--ax-spacing-05);
+    padding-right: var(--ax-space-2);
   }
 }
 
@@ -72,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-strong);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hover);
@@ -90,27 +90,27 @@
 }
 
 .navds-chips__toggle--neutral {
-  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
-  background-color: var(--ax-bg-neutral-moderate);
+  box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
+  background-color: var(--ax-bg-moderate);
   color: var(--ax-text-default);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hover);
+    background-color: var(--ax-bg-moderate-hover);
   }
 
   &[data-pressed="true"] {
     box-shadow: none;
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
 
     &:hover {
-      background-color: var(--ax-bg-neutral-strong-hover);
+      background-color: var(--ax-bg-strong-hover);
     }
   }
 }
 
 .navds-chips--medium .navds-chips__toggle--with-checkmark {
-  padding-left: var(--ax-spacing-1-alt);
+  padding-left: var(--ax-space-6);
 }
 
 /* -------------------------- start old CSS --------------------------  */
@@ -130,11 +130,11 @@
 }
 
 .navds-chips__removable--neutral {
-  background: var(--ax-bg-neutral-strong-pressed);
-  color: var(--ax-text-neutral-contrast);
+  background: var(--ax-bg-strong-pressed);
+  color: var(--ax-text-contrast);
 
   &:hover {
-    background: var(--ax-bg-neutral-strong-hover);
+    background: var(--ax-bg-strong-hover);
   }
 }
 
@@ -148,11 +148,11 @@
 }
 
 .navds-chips--icon-left {
-  padding-left: var(--ax-spacing-1-alt);
+  padding-left: var(--ax-space-6);
 }
 
 .navds-chips--icon-right {
-  padding-right: var(--ax-spacing-1-alt);
+  padding-right: var(--ax-space-6);
 }
 
 @media (forced-colors: active) {

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

@@ -1,11 +1,11 @@
 .navds-copybutton {
-  --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-5) var(--ax-spacing-3) var(--ax-spacing-4);
+  --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-20) var(--ax-space-12) var(--ax-space-16);
 
   cursor: pointer;
   margin: 0;
   text-decoration: none;
   border: none;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   padding: var(--__axc-copybutton-padding);
   display: grid;
   place-content: center;
@@ -13,20 +13,20 @@
   transition: color 0.2s cubic-bezier(0.05, 0.7, 0.1, 1);
 
   &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-3);
+    --__axc-copybutton-padding: var(--ax-space-12);
   }
 
   &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-5);
+    --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-12) var(--ax-space-20);
   }
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   &:disabled {
@@ -57,22 +57,18 @@
   min-height: 2rem;
   min-width: 2rem;
 
-  --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-3) var(--ax-spacing-1) var(--ax-spacing-2);
+  --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-12) var(--ax-space-4) var(--ax-space-8);
 
   &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-2) var(--ax-spacing-1) var(--ax-spacing-3);
+    --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-8) var(--ax-space-4) var(--ax-space-12);
   }
 
   &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-1);
-  }
-
-  & .navds-copybutton__icon {
-    font-size: 1.25rem;
+    --__axc-copybutton-padding: var(--ax-space-4);
   }
 
   & > .navds-copybutton__content {
-    gap: var(--ax-spacing-1-alt);
+    gap: var(--ax-space-4);
   }
 }
 
@@ -81,14 +77,14 @@
   min-height: 1.5rem;
   min-width: 1.5rem;
 
-  --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-2) var(--ax-spacing-05) var(--ax-spacing-1);
+  --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-8) var(--ax-space-2) var(--ax-space-4);
 
   &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-1) var(--ax-spacing-05) var(--ax-spacing-2);
+    --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-4) var(--ax-space-2) var(--ax-space-8);
   }
 
   &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-spacing-05);
+    --__axc-copybutton-padding: var(--ax-space-2);
   }
 
   & .navds-copybutton__icon {
@@ -96,7 +92,7 @@
   }
 
   & > .navds-copybutton__content {
-    gap: var(--ax-spacing-1);
+    gap: var(--ax-space-2);
   }
 }
 
@@ -104,18 +100,6 @@
 .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 {
@@ -146,14 +130,6 @@
 
   &.navds-copybutton--active {
     color: var(--ax-text-success);
-
-    &:hover {
-      color: var(--ax-text-success-strong);
-    }
-  }
-
-  &:hover {
-    color: var(--ax-text-accent-strong);
   }
 
   &:disabled {
@@ -165,11 +141,6 @@
 .navds-copybutton--neutral {
   color: var(--ax-text-subtle);
 
-  &:hover,
-  &.navds-copybutton--active {
-    color: var(--ax-text-default);
-  }
-
   &:disabled {
     color: var(--ax-text-subtle);
   }
@@ -179,5 +150,5 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-6);
 }

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

@@ -1,10 +1,10 @@
 .navds-date {
-  padding: var(--ax-spacing-4) var(--ax-spacing-3);
+  padding: var(--ax-space-16) var(--ax-space-12);
 
   .rdp-day_range_middle {
     &.rdp-day_disabled {
       color: var(--ax-text-default);
-      background: var(--ax-bg-neutral-moderateA);
+      background: var(--ax-bg-moderateA);
     }
 
     &.rdp-day_selected {
@@ -17,7 +17,7 @@
   .rdp-month,
   &.rdp-month {
     display: grid;
-    gap: var(--ax-spacing-5);
+    gap: var(--ax-space-20);
   }
 
   .navds-date__caption-label {
@@ -35,21 +35,19 @@
     width: 2.5rem;
     height: 2.5rem;
     text-align: center;
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-border-radius-large);
   }
 
   .rdp-day_range_start {
-    border-radius: var(--ax-border-radius-xlarge) var(--ax-border-radius-medium) var(--ax-border-radius-medium)
-      var(--ax-border-radius-xlarge);
+    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-medium) var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge)
-      var(--ax-border-radius-medium);
+    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-xlarge);
+    border-radius: var(--ax-border-radius-large);
   }
 
   .navds-date__field {
@@ -69,7 +67,7 @@
   .rdp-day_disabled {
     cursor: not-allowed;
     text-decoration: line-through;
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
     color: var(--ax-text-subtle);
   }
 
@@ -121,8 +119,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--ax-spacing-1);
-  padding-inline: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
+  padding-inline: var(--ax-space-4);
 }
 
 .navds-date__caption-button {
@@ -142,7 +140,7 @@
   width: 3rem;
   height: 3rem;
   text-transform: capitalize;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   cursor: pointer;
 }
 
@@ -159,8 +157,8 @@
   .rdp-cell > button.rdp-day,
   button.navds-date__month-button {
     &:focus-visible {
-      outline: 2px solid var(--ax-border-focus);
-      outline-offset: 1px;
+      outline: 3px solid var(--ax-border-focus);
+      outline-offset: 3px;
     }
 
     &:active:not(:disabled) {
@@ -172,11 +170,11 @@
 
 .navds-date__field-input {
   &.navds-text-field__input {
-    padding-right: var(--ax-spacing-12);
+    padding-right: var(--ax-space-48);
   }
 
   .navds-form-field--small & {
-    padding-right: var(--ax-spacing-8);
+    padding-right: var(--ax-space-32);
   }
 }
 
@@ -192,8 +190,8 @@
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: calc(var(--ax-border-radius-medium) - 1px);
-  padding: var(--ax-spacing-3);
+  border-radius: calc(var(--ax-border-radius-large) - 1px);
+  padding: var(--ax-space-12);
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
@@ -202,7 +200,7 @@
   border-end-start-radius: 0;
 
   .navds-form-field--small & {
-    padding: var(--ax-spacing-1);
+    padding: var(--ax-space-4);
   }
 
   .navds-form-field--disabled & {
@@ -230,7 +228,7 @@
 .navds-date__week-row {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-05);
+  gap: var(--ax-space-2);
 }
 
 .navds-date__weeknumber {
@@ -242,7 +240,7 @@
   color: var(--ax-text-subtle);
 
   .navds-date__weeknumber:active & {
-    color: var(--ax-text-neutral-contrast);
+    color: var(--ax-text-contrast);
   }
 }
 
@@ -258,21 +256,21 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  padding: var(--ax-spacing-4);
-  gap: var(--ax-spacing-2);
+  padding: var(--ax-space-16);
+  gap: var(--ax-space-8);
 }
 
 @media (min-width: 480px) {
   .navds-date {
-    padding: var(--ax-spacing-5) var(--ax-spacing-4);
+    padding: var(--ax-space-20) var(--ax-space-16);
   }
 
   .navds-date__modal-body {
-    padding: var(--ax-spacing-6);
+    padding: var(--ax-space-24);
   }
 
   .navds-date__caption {
-    gap: var(--ax-spacing-2);
+    gap: var(--ax-space-8);
   }
 
   .navds-date .rdp-button,

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

@@ -1,7 +1,7 @@
 .navds-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
-  --__axc-expansioncard-padding-block: var(--ax-spacing-4);
-  --__axc-expansioncard-padding-inline: var(--ax-spacing-5);
+  --__axc-expansioncard-padding-block: var(--ax-space-20);
+  --__axc-expansioncard-padding-inline: var(--ax-space-20);
 
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
@@ -16,11 +16,11 @@
 
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
-  --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
-  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
+  --__axc-expansioncard-padding-inline: var(--ax-space-16);
+  --__axc-expansioncard-padding-block: var(--ax-space-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) {
@@ -37,7 +37,7 @@
 .navds-expansioncard__header {
   width: 100%;
   display: flex;
-  gap: var(--ax-spacing-4);
+  gap: var(--ax-space-16);
   padding: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
   border-radius: var(--__axc-expansioncard-border-radius);
   background-color: transparent;
@@ -45,7 +45,7 @@
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--ax-bg-neutral-raised-hover);
+    background-color: var(--ax-bg-hoverA);
   }
 
   &[data-open="true"] {
@@ -55,7 +55,7 @@
     /* Divider between header and content */
     &::after {
       content: "";
-      background-color: var(--ax-border-subtle);
+      background-color: var(--ax-border-subtleA);
       bottom: 0;
       left: var(--__axc-expansioncard-padding-inline);
       height: 1px;
@@ -76,11 +76,11 @@
 }
 
 .navds-expansioncard__title--medium {
-  margin-top: var(--ax-spacing-2);
+  margin-top: var(--ax-space-8);
 }
 
 .navds-expansioncard__title--large {
-  margin-top: var(--ax-spacing-1);
+  margin-top: var(--ax-space-4);
 }
 
 /* ----------------------- ExpansionCard Header Button ---------------------- */
@@ -98,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 */
@@ -122,7 +114,7 @@
 }
 
 .navds-expansioncard__header:hover > .navds-expansioncard__header-button {
-  background-color: var(--ax-bg-neutral-moderate-hoverA);
+  background-color: var(--ax-bg-moderate-hoverA);
 }
 
 .navds-expansioncard__header-chevron {

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

@@ -1,8 +1,8 @@
 .navds-combobox__wrapper {
   --__axc-combobox-icon-size: 1.5rem;
-  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-2);
-  --__axc-combobox-list-item-padding-block: var(--ax-spacing-3);
-  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-3);
+  --__axc-combobox-wrapper-inner-padding: var(--ax-space-8);
+  --__axc-combobox-list-item-padding-block: var(--ax-space-12);
+  --__axc-combobox-list-item-padding-inline: var(--ax-space-12);
   --__axc-combobox-border-width: 1px;
   --__axc-combobox-input-height: 2rem;
 
@@ -10,20 +10,20 @@
   flex-direction: column;
   width: 100%;
   position: relative;
-  border-radius: var(--ax-border-radius-medium);
+  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-focus);
+    border-color: var(--ax-border-accent-strong);
   }
 }
 
 .navds-form-field--small .navds-combobox__wrapper {
   --__axc-combobox-icon-size: 1.25rem;
-  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-1);
-  --__axc-combobox-list-item-padding-block: var(--ax-spacing-1-alt);
-  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-2);
+  --__axc-combobox-wrapper-inner-padding: var(--ax-space-4);
+  --__axc-combobox-list-item-padding-block: var(--ax-space-6);
+  --__axc-combobox-list-item-padding-inline: var(--ax-space-8);
   --__axc-combobox-input-height: 1.5rem;
 }
 
@@ -31,6 +31,10 @@
   opacity: var(--ax-opacity-disabled);
 
   & .navds-combobox__wrapper {
+    &:hover {
+      border-color: var(--ax-border-default);
+    }
+
     & *:hover {
       cursor: not-allowed;
     }
@@ -50,12 +54,12 @@
 
   & .navds-combobox__selected-options {
     & .navds-chips__chip {
-      background-color: var(--ax-bg-neutral-moderateA);
+      background-color: var(--ax-bg-moderateA);
     }
   }
 
   & .navds-combobox__button-toggle-list {
-    color: var(--ax-bg-neutral-moderate);
+    color: var(--ax-bg-moderate);
   }
 
   & .navds-combobox__wrapper {
@@ -65,7 +69,7 @@
 
   & .navds-text-field__input,
   & .navds-combobox__input {
-    background-color: var(--ax-bg-neutral-moderate);
+    background-color: var(--ax-bg-moderate);
   }
 }
 
@@ -77,12 +81,12 @@
 
 .navds-combobox__wrapper-inner {
   border: 1px solid var(--ax-border-default);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
 
   &:has(.navds-combobox__input:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-    border-color: var(--ax-border-focus);
+    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 {
@@ -113,15 +117,19 @@
   &:hover {
     cursor: text;
   }
+
+  .navds-combobox--disabled &:hover {
+    border-color: var(--ax-border-default);
+  }
 }
 
 .navds-combobox--error {
   & .navds-combobox__wrapper-inner {
-    border-color: var(--ax-border-danger);
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 
     &:has(.navds-combobox__input:focus-visible) {
-      border-color: var(--ax-border-danger);
+      border-color: var(--ax-border-danger-strong);
     }
   }
 }
@@ -175,7 +183,7 @@
   }
 
   .navds-combobox__selected-options > li:only-child > & {
-    margin-left: var(--ax-spacing-1);
+    margin-left: var(--ax-space-4);
   }
 }
 
@@ -207,7 +215,6 @@
 }
 
 .navds-combobox__button-toggle-list {
-  border-radius: var(--ax-border-radius-medium);
   color: var(--ax-text-default);
   display: flex;
   justify-content: center;
@@ -230,13 +237,13 @@
 /* dropdown & non selectable dropdown items */
 
 .navds-combobox__list {
-  max-height: 290px;
+  max-height: 316px;
   overflow: clip;
   position: absolute;
   left: 0;
   right: 0;
   z-index: 10;
-  top: calc(100% + var(--ax-spacing-2));
+  top: calc(100% + var(--ax-space-8));
   border: 1px solid var(--ax-border-subtleA);
   display: flex;
   flex-direction: column;
@@ -265,10 +272,10 @@
   justify-content: space-between;
   padding-block: var(--__axc-combobox-list-item-padding-block);
   padding-inline: var(--__axc-combobox-list-item-padding-inline);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   border: 0;
-  margin-inline: var(--ax-spacing-2);
-  margin-block: var(--ax-spacing-1);
+  margin-inline: var(--ax-space-8);
+  margin-block: var(--ax-space-2);
   scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
@@ -282,11 +289,11 @@
 }
 
 .navds-combobox__list-item--max-selected {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   margin: 0;
   border-radius: 0;
-  border-bottom: 1px solid var(--ax-border-neutral-subtle);
-  padding-block: var(--ax-spacing-2);
+  border-bottom: 1px solid var(--ax-border-subtle);
+  padding-block: var(--ax-space-8);
   line-height: var(--ax-font-line-height-large);
 }
 
@@ -301,13 +308,12 @@
   background-color: inherit;
   align-items: stretch;
   padding: 0;
-  padding-block: var(--ax-spacing-1);
+  padding-block: var(--ax-space-4);
 }
 
 .navds-combobox__list-item--focus {
   cursor: pointer;
   outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
 }
 
 .navds-combobox__list-item {
@@ -321,10 +327,11 @@
   & mark {
     background-color: transparent;
     font-weight: var(--ax-font-weight-bold);
+    color: var(--ax-text-default);
   }
 
   & svg {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-default);
   }
 }
 
@@ -344,14 +351,14 @@
   justify-content: flex-start;
   gap: 0.25rem;
   margin: 0;
-  margin-block: calc(var(--ax-spacing-1) * -1);
-  padding-block: var(--ax-spacing-4);
+  margin-block-start: calc(var(--ax-space-4) * -1);
 
   & svg {
     color: var(--ax-text-default);
   }
 
   &:only-child {
+    margin-block: calc(var(--ax-space-4) * -1);
     border: none;
   }
 }
@@ -383,7 +390,7 @@
   }
 
   .navds-combobox__selected-options {
-    gap: var(--ax-spacing-1);
+    gap: var(--ax-space-4);
   }
 }
 

@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-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-border-radius-xlarge);
-  outline-offset: 2px;
+  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) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
 
   & .navds-error-summary__heading {
-    scroll-margin-top: var(--ax-spacing-4);
+    scroll-margin-top: var(--ax-space-16);
   }
 
   & > .navds-error-summary__list {
-    margin: var(--ax-spacing-2) 0;
-    gap: var(--ax-spacing-2);
-    padding-left: var(--ax-spacing-5);
+    margin: var(--ax-space-8) 0;
+    gap: var(--ax-space-8);
+    padding-left: var(--ax-space-20);
   }
 }
 
 .navds-error-summary__heading {
-  scroll-margin-top: var(--ax-spacing-6);
+  scroll-margin-top: var(--ax-space-24);
 
   &:focus {
     outline: none;
@@ -40,10 +40,10 @@
 }
 
 .navds-error-summary__list {
-  margin: var(--ax-spacing-3) 0;
+  margin: var(--ax-space-12) 0;
   display: flex;
   flex-direction: column;
-  gap: var(--ax-spacing-3);
-  padding-left: var(--ax-spacing-6);
+  gap: var(--ax-space-12);
+  padding-left: var(--ax-space-24);
   list-style: inherit;
 }

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

@@ -6,7 +6,7 @@
 }
 
 .navds-fieldset > :not(:first-child, :empty) {
-  margin-top: var(--ax-spacing-2);
+  margin-top: var(--ax-space-8);
 }
 
 .navds-fieldset__description {

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

@@ -1,7 +1,7 @@
 /* --------------------------- FileUpload Dropzone -------------------------- */
 .navds-dropzone__area {
   --__axc-dropzone-background: var(--ax-bg-input);
-  --__axc-dropzone-icon-padding: var(--ax-spacing-2);
+  --__axc-dropzone-icon-padding: var(--ax-space-8);
   --__axc-dropzone-animation-length-long: 400ms;
   --__axc-dropzone-animation-length-short: 250ms;
   --__axc-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
@@ -12,9 +12,9 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--ax-spacing-4);
+  gap: var(--ax-space-16);
   text-align: center;
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   border: 1px dashed var(--ax-border-default);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--__axc-dropzone-background);
@@ -26,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-soft);
+
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 }
@@ -89,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(--ax-spacing-4);
+  top: var(--ax-space-16);
   display: grid;
   position: absolute;
   z-index: 1;
@@ -108,7 +112,7 @@
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   border-radius: var(--ax-border-radius-full);
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   transition:
     background-color 300ms var(--__axc-dropzone-animation-ease-out),
     font-size 300ms var(--__axc-dropzone-animation-ease-out);
@@ -130,7 +134,7 @@
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
   top: 50%;
   transform: translateY(-50%);
 }
@@ -140,7 +144,7 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 /* ----------------------------- FileUpload Item ---------------------------- */
@@ -158,23 +162,23 @@ li.navds-file-item {
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
   border-radius: var(--ax-border-radius-xlarge);
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
   display: flex;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
   align-items: flex-start;
 }
 
 .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);
+  background-color: var(--ax-bg-moderateA);
   color: var(--ax-text-default);
   border-radius: var(--ax-border-radius-full);
   min-height: 2.5rem;
   min-width: 2.5rem;
-  margin-top: var(--ax-spacing-05);
+  margin-top: var(--ax-space-2);
   display: grid;
   place-content: center;
   transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
@@ -198,7 +202,6 @@ li.navds-file-item {
 }
 
 .navds-file-item__error {
-  color: var(--ax-text-danger);
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
@@ -206,20 +209,8 @@ li.navds-file-item {
   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 {
@@ -50,8 +50,8 @@
 
 .navds-form-progress__stepper {
   border: 1px solid var(--ax-border-subtle);
-  border-radius: var(--ax-border-radius-large);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
-  margin-top: var(--ax-spacing-1);
+  border-radius: var(--ax-border-radius-xlarge);
+  padding: var(--ax-space-16) var(--ax-space-20);
+  margin-top: var(--ax-space-4);
   background: var(--ax-bg-raised);
 }

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

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

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

@@ -1,7 +1,7 @@
 .navds-form-field {
   display: grid;
   justify-items: start;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-form-field__description {
@@ -27,8 +27,8 @@
 }
 
 .navds-form-field__readonly-icon {
-  margin-top: var(--ax-spacing-05);
-  margin-right: var(--ax-spacing-1);
+  margin-top: var(--ax-space-2);
+  margin-right: var(--ax-space-4);
   flex-shrink: 0;
   align-self: flex-start;
 }

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

@@ -18,12 +18,12 @@
 
 .navds-checkbox__label,
 .navds-radio__label {
-  padding: var(--ax-spacing-3) 0;
+  padding: var(--ax-space-12) 0;
   cursor: pointer;
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 
-  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-moderate);
   --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
 }
 
@@ -59,7 +59,7 @@
 
 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: var(--ax-spacing-1-alt) 0;
+  padding: var(--ax-space-6) 0;
 }
 
 .navds-checkbox--small > .navds-checkbox__label::before,
@@ -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 */
@@ -141,7 +157,7 @@
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .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 {
@@ -215,14 +230,14 @@
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  background-color: var(--ax-bg-neutral-strong);
+  background-color: var(--ax-bg-strong);
   border-width: 0;
   box-shadow:
     inset 0 0 0 2px var(--ax-border-subtle),
-    inset 0 0 0 8px var(--ax-bg-neutral-moderate);
+    inset 0 0 0 8px var(--ax-bg-moderate);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
   background-color: var(--ax-text-subtle);
 }
 
@@ -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

@@ -22,18 +22,18 @@
 .navds-search__wrapper {
   display: inline-flex;
   align-items: center;
-  border-radius: var(--ax-border-radius-medium);
+  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: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
 /* ------------------------------ Search input ------------------------------ */
 .navds-search__input {
-  padding-right: var(--ax-spacing-10);
+  padding-right: var(--ax-space-40);
 
   &:focus-visible {
     outline: none;
@@ -48,33 +48,33 @@
 }
 
 .navds-search__input--simple {
-  padding-left: var(--ax-spacing-10);
+  padding-left: var(--ax-space-40);
 }
 
 /* ------------------------------ Search sizing ----------------------------- */
 .navds-form-field--small {
   & .navds-search__input {
-    padding-right: var(--ax-spacing-7);
+    padding-right: var(--ax-space-28);
   }
 
   & .navds-search__input--simple {
-    padding-left: var(--ax-spacing-7);
+    padding-left: var(--ax-space-28);
   }
 
   & .navds-search__search-icon {
-    left: var(--ax-spacing-1);
+    left: var(--ax-space-4);
     font-size: 1.25rem;
   }
 
   & .navds-search__button-clear {
-    right: var(--ax-spacing-1);
+    right: var(--ax-space-4);
   }
 }
 
 /* ------------------------------- Search icon ------------------------------ */
 .navds-search__search-icon {
   position: absolute;
-  left: var(--ax-spacing-2);
+  left: var(--ax-space-8);
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
@@ -88,7 +88,7 @@
 /* --------------------------- Search Clear-button -------------------------- */
 .navds-search__button-clear {
   position: absolute;
-  right: var(--ax-spacing-2);
+  right: var(--ax-space-8);
   top: 50%;
   transform: translateY(-50%);
 }
@@ -97,8 +97,8 @@
 .navds-search__button-search {
   flex-shrink: 0;
   border-radius: 0;
-  border-top-right-radius: var(--ax-border-radius-medium);
-  border-bottom-right-radius: var(--ax-border-radius-medium);
+  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 {
@@ -127,13 +127,13 @@
 
 /* --------------------------- Search Error-state --------------------------- */
 .navds-search--error .navds-search__input:not(:disabled) {
-  border-color: var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
   box-shadow:
-    inset -2px 0 0 0 var(--ax-border-danger),
-    inset 0 0 0 1px var(--ax-border-danger);
+    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);
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 }
 

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

@@ -1,7 +1,7 @@
 .navds-select__input {
   appearance: none;
   background-color: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-default);
   color: var(--ax-text-default);
   width: 100%;
@@ -9,8 +9,8 @@
   min-height: 3rem;
   display: inline-block;
   position: relative;
-  padding: var(--ax-spacing-2);
-  padding-right: var(--ax-spacing-10);
+  padding: var(--ax-space-8);
+  padding-right: var(--ax-space-40);
 
   &:hover {
     border-color: var(--ax-border-accent-strong);
@@ -18,8 +18,8 @@
   }
 
   &:focus {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
     border-color: var(--ax-border-accent-strong);
   }
 
@@ -43,7 +43,7 @@
 .navds-select__chevron {
   position: absolute;
   font-size: 1.5rem;
-  right: var(--ax-spacing-2);
+  right: var(--ax-space-8);
   pointer-events: none;
   align-self: center;
   color: var(--ax-text-default);
@@ -66,8 +66,8 @@
 /* --------------------------- Select Error-state --------------------------- */
 .navds-select--error {
   > * select {
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
-    border-color: var(--ax-border-danger);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
   }
 
   > * select:hover,
@@ -102,8 +102,8 @@
 /* ----------------------------- Select Readonly ---------------------------- */
 .navds-select--readonly {
   & .navds-select__input {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
 
     @media (forced-colors: active) {

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

@@ -31,31 +31,46 @@
 }
 
 .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 & {
-    padding: 0.75rem 3.25rem 0.75rem 0;
+    padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
   }
 
   .navds-switch--small & {
-    padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0 calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem;
+    --__axc-switch-block-padding: 0.375rem;
   }
 
-  .navds-switch--right.navds-switch--small & {
-    padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0;
+  &.navds-switch--with-description {
+    padding-bottom: 0;
   }
-}
 
-.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(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -68,7 +83,7 @@
   height: 1.5rem;
   background-color: var(--ax-bg-input);
   position: absolute;
-  top: var(--ax-spacing-3);
+  top: var(--ax-space-12);
   left: 0;
   border-radius: var(--ax-border-radius-full);
   border: 2px solid var(--ax-border-default);
@@ -77,7 +92,7 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
   .navds-switch--small > & {
-    top: var(--ax-spacing-1);
+    top: var(--ax-space-4);
   }
 
   .navds-switch__input:checked ~ & {
@@ -100,15 +115,15 @@
     border-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  .navds-switch__input:focus-visible ~ & {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+  .navds-switch--standalone > .navds-switch__input:focus ~ & {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
 /* ------------------------------ Switch Thumb ------------------------------ */
 .navds-switch__thumb {
-  background-color: var(--ax-bg-neutral-strong);
+  background-color: var(--ax-bg-strong);
   border-radius: var(--ax-border-radius-full);
   width: 1.125rem;
   height: 1.125rem;
@@ -124,7 +139,7 @@
   .navds-switch__input:checked ~ .navds-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     width: 1.25rem;
     height: 1.25rem;
     left: 0;
@@ -183,8 +198,8 @@
   & > .navds-switch__input:hover ~ .navds-switch__track,
   & > .navds-switch__input:checked ~ .navds-switch__track,
   & > .navds-switch__input:checked:hover ~ .navds-switch__track {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
   }
 
   & > .navds-switch__label-wrapper,
@@ -202,12 +217,12 @@
   }
 
   & .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
   }
 
   & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -238,9 +253,9 @@
     color: field;
   }
 
-  .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) {
@@ -248,7 +263,7 @@
   }
 
   .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 {

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

@@ -1,8 +1,8 @@
 .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-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-default);
   min-height: 3rem;
   width: 100%;
@@ -14,8 +14,8 @@
 
   &: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 {
@@ -25,7 +25,7 @@
   }
 
   &::placeholder {
-    color: var(--ax-text-neutral);
+    color: var(--ax-text-subtle);
   }
 
   &[size] {
@@ -34,18 +34,18 @@
 }
 
 .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(:disabled) {
-  border-color: var(--ax-border-danger);
-  box-shadow: 0 0 0 1px var(--ax-border-danger);
+  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 {
-  background-color: var(--ax-bg-neutral-moderate);
-  border-color: var(--ax-border-neutral-subtleA);
+  background-color: var(--ax-bg-moderate);
+  border-color: var(--ax-border-subtleA);
   cursor: default;
 }
 

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

@@ -2,9 +2,9 @@
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   height: var(--__axc-textarea-height);
   appearance: none;
-  padding: var(--ax-spacing-2);
+  padding: var(--ax-space-8);
   background-color: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-default);
   resize: none;
   width: 100%;
@@ -20,8 +20,8 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
     border-color: var(--ax-border-accent-strong);
   }
 
@@ -32,12 +32,12 @@
   }
 
   .navds-form-field--small & {
-    padding: var(--ax-spacing-1-alt);
+    padding: var(--ax-space-6);
   }
 
   .navds-textarea--readonly & {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 }
@@ -90,8 +90,8 @@
 }
 
 .navds-textarea--error .navds-textarea__input:not(:disabled) {
-  box-shadow: 0 0 0 1px var(--ax-border-danger);
-  border-color: var(--ax-border-danger);
+  box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+  border-color: var(--ax-border-danger-strong);
 }
 
 @media (forced-colors: active) {

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

@@ -51,23 +51,23 @@
   position: relative;
 
   .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
-    margin-top: var(--ax-spacing-5);
+    margin-top: var(--ax-space-20);
   }
 
   .navds-guide-panel[data-poster="false"] > & {
-    margin-left: var(--ax-spacing-5);
+    margin-left: var(--ax-space-20);
   }
 
   @media (min-width: 480px) {
     .navds-guide-panel[data-responsive="true"] > & {
       margin-top: 0;
-      margin-left: var(--ax-spacing-5);
+      margin-left: var(--ax-space-20);
     }
   }
 }
 
 .navds-guide-panel__content-inner {
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   position: relative;
@@ -79,7 +79,7 @@
 
   @media (min-width: 480px) {
     & {
-      padding: var(--ax-spacing-4) var(--ax-spacing-5);
+      padding: var(--ax-space-16) var(--ax-space-20);
     }
 
     .navds-guide-panel[data-responsive="true"] & {
@@ -94,20 +94,20 @@
 
   .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
     left: 50%;
-    top: calc(var(--ax-spacing-4) * -1 - 2px);
+    top: calc(var(--ax-space-16) * -1 - 2px);
     transform: translateX(-48%);
   }
 
   .navds-guide-panel[data-poster="false"] & {
     top: calc(var(--__axc-guide-panel-guide-size) / 2);
-    left: calc(var(--ax-spacing-5) * -1 - 2px);
+    left: calc(var(--ax-space-20) * -1 - 2px);
     transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
   }
 
   @media (min-width: 480px) {
     .navds-guide-panel[data-responsive="true"] & {
       top: calc(var(--__axc-guide-panel-guide-size) / 2);
-      left: calc(var(--ax-spacing-5) * -1 - 2px);
+      left: calc(var(--ax-space-20) * -1 - 2px);
       transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
     }
   }

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

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

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

@@ -45,7 +45,6 @@
 @import "./tooltip.darkside.css" layer(aksel.components);
 @import "./toggle-group.darkside.css" layer(aksel.components);
 @import "./panel.darkside.css" layer(aksel.components);
-@import "./link-panel.darkside.css" layer(aksel.components);
 @import "./read-more.darkside.css" layer(aksel.components);
 @import "./progress-bar.darkside.css" layer(aksel.components);
 @import "./skeleton.darkside.css" layer(aksel.components);

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

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

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

@@ -1,47 +0,0 @@
-.navds-link-panel {
-  text-decoration: none;
-  color: var(--ac-link-panel-text, var(--a-text-default));
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--a-spacing-4);
-}
-
-.navds-link-panel:hover .navds-link-panel__title {
-  text-decoration: underline;
-  color: var(--ac-link-panel-hover-text, var(--a-text-action-hover));
-}
-
-.navds-link-panel:hover {
-  box-shadow: var(--a-shadow-small);
-  border-color: var(--ac-link-panel-hover-border, var(--a-border-action-hover));
-}
-
-.navds-link-panel:focus-visible {
-  outline: 3px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-link-panel:focus {
-    outline: 3px solid transparent;
-    outline-offset: 2px;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-link-panel__chevron {
-  flex-shrink: 0;
-  font-size: 1.5rem;
-  transition: transform 200ms;
-}
-
-.navds-link-panel:hover > .navds-link-panel__chevron,
-.navds-link-panel:focus-within > .navds-link-panel__chevron {
-  transform: translateX(4px);
-}
-
-.navds-link-panel__description {
-  margin-top: var(--a-spacing-1);
-}

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

@@ -2,7 +2,7 @@
   color: var(--ax-text-accent);
   display: inline-flex;
   align-items: center;
-  gap: var(--ax-spacing-05);
+  gap: var(--ax-space-2);
   text-decoration: underline;
   text-underline-offset: 0.1em;
   text-decoration-thickness: 0.05em;
@@ -13,8 +13,9 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-radius: 1px;
   }
 
   &.navds-link--inline-text {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -18,7 +18,7 @@
     [line-2 step-end] auto;
   grid-template-columns: var(--__axc-stepper-circle-size) auto;
   justify-items: flex-start;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-stepper__line {
@@ -30,14 +30,14 @@
   grid-column: 1;
 
   .navds-stepper__item--non-interactive & {
-    background-color: var(--ax-border-neutral-strong);
+    background-color: var(--ax-border-strong);
   }
 }
 
 /* Line before non-interactive step */
 .navds-stepper__item:has(+ .navds-stepper__item > .navds-stepper__step[data-interactive="false"]) {
   .navds-stepper__line--2 {
-    background-color: var(--ax-border-neutral-strong);
+    background-color: var(--ax-border-strong);
   }
 }
 
@@ -60,16 +60,17 @@
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: [circle] var(--__axc-stepper-circle-size) [content] auto;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   justify-content: flex-start;
   cursor: pointer;
   padding: var(--__axc-stepper-border-width);
   margin: calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1)
     var(--__axc-stepper-circle-size);
+  width: 100%;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 4px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
 
     /* Isolate item to make outline show above line--2 */
     isolation: isolate;
@@ -159,23 +160,23 @@
 }
 
 .navds-stepper__step[data-interactive="false"] {
-  color: var(--ax-text-neutral);
+  color: var(--ax-text-default);
   cursor: default;
 
   & .navds-stepper__circle {
-    color: var(--ax-text-neutral);
-    border-color: var(--ax-border-neutral-strong);
+    color: var(--ax-text-default);
+    border-color: var(--ax-border-strong);
   }
 
   &[data-active="true"] {
     & .navds-stepper__content {
-      color: var(--ax-text-neutral-strong);
+      color: var(--ax-text-subtle);
     }
 
     & .navds-stepper__circle {
-      color: var(--ax-text-neutral-contrast);
-      background-color: var(--ax-bg-neutral-strong-pressed);
-      border-color: var(--ax-bg-neutral-strong-pressed);
+      color: var(--ax-text-contrast);
+      background-color: var(--ax-bg-strong-pressed);
+      border-color: var(--ax-bg-strong-pressed);
     }
   }
 }

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

@@ -12,7 +12,7 @@
   display: table-row-group;
 
   & .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
-    background-color: var(--ax-bg-neutral-hoverA);
+    background-color: var(--ax-bg-hoverA);
     transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
   }
 
@@ -26,12 +26,12 @@
 }
 
 .navds-table__row--selected {
-  background-color: var(--ax-bg-accent);
+  background-color: var(--ax-bg-accent-soft);
 }
 
 .navds-table--zebra-stripes {
   & .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
-    background-color: var(--ax-bg-neutral);
+    background-color: var(--ax-bg-soft);
   }
 
   & .navds-table__body :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
@@ -40,13 +40,13 @@
 }
 
 .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
-  background-color: var(--ax-bg-neutral);
+  background-color: var(--ax-bg-soft);
 }
 
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
-  padding: var(--ax-spacing-3) var(--ax-spacing-2);
+  padding: var(--ax-space-12) var(--ax-space-8);
   border-bottom: 1px solid var(--ax-border-default);
   text-align: left;
 }
@@ -77,12 +77,12 @@
 
 .navds-table--large .navds-table__header-cell,
 .navds-table--large .navds-table__data-cell {
-  padding: var(--ax-spacing-4) var(--ax-spacing-2);
+  padding: var(--ax-space-16) var(--ax-space-8);
 }
 
 .navds-table--small .navds-table__header-cell,
 .navds-table--small .navds-table__data-cell {
-  padding: var(--ax-spacing-1) var(--ax-spacing-2);
+  padding: var(--ax-space-4) var(--ax-space-8);
 }
 
 .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
@@ -108,26 +108,26 @@
   border: none;
   cursor: pointer;
   margin: 0;
-  padding: var(--ax-spacing-4) var(--ax-spacing-3);
+  padding: var(--ax-space-16) var(--ax-space-12);
   width: 100%;
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   align-items: center;
   line-height: inherit;
   font-weight: inherit;
 }
 
 .navds-table--small .navds-table__sort-button {
-  padding: var(--ax-spacing-2) var(--ax-spacing-3);
+  padding: var(--ax-space-8) var(--ax-space-12);
 }
 
 .navds-table__sort-button:hover {
-  background-color: var(--ax-bg-neutral-hoverA);
+  background-color: var(--ax-bg-hoverA);
 }
 
 .navds-table__sort-button:focus-visible {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: -4px;
+  outline: 3px solid var(--ax-border-focus);
+  outline-offset: -5px;
 }
 
 .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
@@ -149,7 +149,7 @@
   flex-shrink: 0;
 }
 
-.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
+.navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell, .navds-table__header-cell) {
   transition: border-bottom-color 150ms cubic-bezier(0.95, 0.05, 0.8, 0.04);
 }
 
@@ -157,14 +157,10 @@
   cursor: pointer;
 }
 
-.navds-table__expandable-row--open .navds-table__data-cell {
+.navds-table__expandable-row--open :where(.navds-table__data-cell, .navds-table__header-cell) {
   border-bottom-color: transparent;
 }
 
-.navds-table__expandable-row--open .navds-table__header-cell {
-  border-color: var(--ax-border-default);
-}
-
 .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
   border-color: transparent;
 }
@@ -175,11 +171,11 @@
 }
 
 .navds-table--large .navds-table__toggle-expand-cell {
-  padding: 0 var(--ax-spacing-2);
+  padding: 0 var(--ax-space-8);
 }
 
 .navds-table--small .navds-table__toggle-expand-cell {
-  padding: var(--ax-spacing-1) var(--ax-spacing-2);
+  padding: var(--ax-space-4) var(--ax-space-8);
 }
 
 .navds-table__toggle-expand-button {
@@ -207,7 +203,7 @@
 .navds-table__toggle-expand-button:hover,
 .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
 .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
-  background-color: var(--ax-bg-neutral-hoverA);
+  background-color: var(--ax-bg-hoverA);
 }
 
 .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
@@ -215,7 +211,7 @@
 }
 
 .navds-table__toggle-expand-button:focus-visible {
-  outline: 2px solid var(--ax-border-focus);
+  outline: 3px solid var(--ax-border-focus);
 }
 
 .navds-table__expanded-row-cell {
@@ -233,9 +229,27 @@
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--ax-spacing-4) calc(var(--ax-spacing-2) + 3rem);
+  --__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);
+
+  padding-block: var(--ax-space-16);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--ax-spacing-2) calc(var(--ax-spacing-2) + 3rem);
+  padding-block: var(--ax-space-8);
+}
+
+.navds-table__expanded-row-content--gutter-both {
+  padding-inline: var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-left {
+  padding-inline: var(--__ac-table-expanded-row-pi) var(--ax-space-8);
+}
+
+.navds-table__expanded-row-content--gutter-right {
+  padding-inline: var(--ax-space-8) var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-none {
+  padding-inline: var(--ax-space-8);
 }

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

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

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

@@ -11,12 +11,12 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--ax-spacing-05) var(--ax-spacing-2);
+  padding: var(--ax-space-2) var(--ax-space-8);
   min-height: 2rem;
   line-height: 1;
 
   &:has(.navds-tag__icon--left) {
-    gap: var(--ax-spacing-05);
+    gap: var(--ax-space-2);
   }
 }
 
@@ -54,41 +54,41 @@
 }
 
 .navds-tag--neutral {
-  --__axc-tag-border: var(--ax-border-neutral);
-  --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
-  --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
-  --__axc-tag-text: var(--ax-text-neutral-strong);
-  --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
+  --__axc-tag-border: var(--ax-border-default);
+  --__axc-tag-bg: var(--ax-bg-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-strong);
+  --__axc-tag-text: var(--ax-text-default);
+  --__axc-tag-text-strong: var(--ax-text-contrast);
 }
 
-.navds-tag--meta-purple,
+.navds-tag--meta-1,
 .navds-tag--alt1 {
-  --__axc-tag-border: var(--ax-border-meta-purple);
-  --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
-  --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
-  --__axc-tag-text: var(--ax-text-meta-purple-strong);
-  --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
+  --__axc-tag-border: var(--ax-border-meta-1);
+  --__axc-tag-bg: var(--ax-bg-meta-1-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-1-strong);
+  --__axc-tag-text: var(--ax-text-meta-1-strong);
+  --__axc-tag-text-strong: var(--ax-text-meta-1-contrast);
 }
 
-.navds-tag--meta-lime,
+.navds-tag--meta-2,
 .navds-tag--alt2 {
-  --__axc-tag-border: var(--ax-border-meta-lime);
-  --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
-  --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
-  --__axc-tag-text: var(--ax-text-meta-lime-strong);
-  --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
+  --__axc-tag-border: var(--ax-border-meta-2);
+  --__axc-tag-bg: var(--ax-bg-meta-2-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-2-strong);
+  --__axc-tag-text: var(--ax-text-meta-2-strong);
+  --__axc-tag-text-strong: var(--ax-text-meta-2-contrast);
 }
 
 .navds-tag--small {
   min-height: 1.5rem;
-  padding: 0 var(--ax-spacing-1-alt);
+  padding: 0 var(--ax-space-6);
 
   --__axc-tag-icon-size: 1.25rem;
 }
 
 .navds-tag--xsmall {
   min-height: 1.25rem;
-  padding: 0 var(--ax-spacing-1);
+  padding: 0 var(--ax-space-4);
 
   --__axc-tag-icon-size: 1rem;
   --__axc-tag-icon-margin: -1px;

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

@@ -12,18 +12,18 @@
   height: 1rem;
   box-sizing: content-box;
   grid-column: 2;
-  margin-bottom: var(--ax-spacing-1);
+  margin-bottom: var(--ax-space-4);
 }
 
 .navds-timeline__row-label {
   white-space: nowrap;
   width: auto;
-  margin-right: var(--ax-spacing-4);
+  margin-right: var(--ax-space-16);
   grid-column: 1;
   min-height: 1.5rem;
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-timeline__row-label:where(:nth-last-child(2)) {
@@ -38,8 +38,8 @@
 
 .navds-timeline__row {
   display: flex;
-  background: var(--ax-bg-neutral);
-  margin: var(--ax-spacing-4) 0;
+  background: var(--ax-bg-soft);
+  margin: var(--ax-space-16) 0;
   grid-column: 2;
 }
 
@@ -64,11 +64,11 @@
 
 .navds-timeline__period:focus-visible {
   z-index: 4;
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
+  outline: 3px solid var(--ax-border-focus);
+  outline-offset: 3px;
 
   && {
-    box-shadow: 0 0 0 2px var(--ax-bg-default);
+    box-shadow: 0 0 0 3px var(--ax-bg-default);
   }
 }
 
@@ -85,7 +85,7 @@
 }
 
 .navds-timeline__period--inner {
-  margin: 0 var(--ax-spacing-2);
+  margin: 0 var(--ax-space-8);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: clip;
@@ -167,18 +167,18 @@
 }
 
 .navds-timeline__period--neutral {
-  background: var(--ax-bg-neutral-moderate);
-  border: solid 1px var(--ax-border-neutral);
-  color: var(--ax-text-neutral-icon);
+  background: var(--ax-bg-moderate);
+  border: solid 1px var(--ax-border-default);
+  color: var(--ax-text-icon);
 
   &.navds-timeline__period--clickable:hover {
-    background: var(--ax-bg-neutral-moderate-hover);
+    background: var(--ax-bg-moderate-hover);
   }
 
   &.navds-timeline__period--clickable.navds-timeline__period--selected {
-    background: var(--ax-bg-neutral-strong-pressed);
+    background: var(--ax-bg-strong-pressed);
     border: none;
-    color: var(--ax-text-neutral-contrast);
+    color: var(--ax-text-contrast);
   }
 }
 
@@ -216,7 +216,7 @@
   box-shadow: inset 0 0 0 4px var(--ax-bg-danger-strong);
   z-index: 2;
   border-radius: var(--ax-border-radius-full);
-  padding: var(--ax-spacing-2);
+  padding: var(--ax-space-8);
   position: relative;
 
   &::before {
@@ -237,9 +237,9 @@
   &:focus-visible {
     box-shadow:
       inset 0 0 0 4px var(--ax-border-danger-strong),
-      0 0 0 2px var(--ax-bg-default);
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+      0 0 0 3px var(--ax-bg-default);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
@@ -253,7 +253,7 @@
 }
 
 .navds-timeline__zoom {
-  margin-top: var(--ax-spacing-6);
+  margin-top: var(--ax-space-24);
   float: right;
   display: flex;
   list-style-type: none;
@@ -282,13 +282,13 @@
 }
 
 .navds-timeline__zoom-button:not([aria-pressed="true"]):hover {
-  background: var(--ax-bg-neutral-moderate-hoverA);
+  background: var(--ax-bg-moderate-hoverA);
 }
 
 .navds-timeline__zoom-button[aria-pressed="true"] {
-  background: var(--ax-bg-neutral-strong-pressed);
-  border-color: var(--ax-bg-neutral-strong-pressed);
-  color: var(--ax-text-neutral-contrast);
+  background: var(--ax-bg-strong-pressed);
+  border-color: var(--ax-bg-strong-pressed);
+  color: var(--ax-text-contrast);
 }
 
 .navds-timeline__zoom li:focus-within {
@@ -298,7 +298,7 @@
 .navds-timeline__zoom-button:focus-visible {
   box-shadow:
     0 0 0 1px var(--ax-bg-default),
-    0 0 0 3px var(--ax-border-focus);
+    0 0 0 4px var(--ax-border-focus);
   border-width: 1px;
 }
 
@@ -318,13 +318,13 @@
   border: 1px solid;
   border-color: var(--ax-border-subtleA);
   border-radius: var(--ax-border-radius-large);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 @media (forced-colors: active) {
   .navds-timeline__period:focus {
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+    outline: 3px solid highlight;
+    outline-offset: 3px;
   }
 
   .navds-timeline__period--success,
@@ -350,7 +350,7 @@
   .navds-timeline__pin-button:focus,
   .navds-timeline__pin-button:focus-visible {
     outline: 4px solid highlight;
-    outline-offset: 2px;
+    outline-offset: 3px;
     box-shadow: none;
   }
 }

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

@@ -1,7 +1,7 @@
 .navds-toggle-group__wrapper {
   display: grid;
   justify-items: start;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-toggle-group__wrapper--fill {
@@ -10,7 +10,7 @@
 
 /* Main Togglegroup */
 .navds-toggle-group {
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--ax-border-default);
   display: inline-grid;
@@ -24,13 +24,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  padding: var(--ax-space-4) var(--ax-space-12);
   min-height: 3rem;
   border: none;
   cursor: pointer;
   background-color: transparent;
   color: var(--ax-text-default);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   min-width: fit-content;
   position: relative;
 
@@ -40,8 +40,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;
   }
 
@@ -64,7 +64,7 @@
 .navds-toggle-group__button-inner {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 
   > * {
     flex-shrink: 0;
@@ -78,19 +78,19 @@
 /* Modifier neutral variant */
 :where(.navds-toggle-group--neutral) .navds-toggle-group__button {
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &[data-selected="true"] {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 }
 
 /* Modifier small size */
 .navds-toggle-group--small {
   & .navds-toggle-group__button {
-    padding: var(--ax-spacing-05) var(--ax-spacing-3);
+    padding: var(--ax-space-2) var(--ax-space-12);
     min-height: 2rem;
   }
 

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

@@ -3,7 +3,7 @@
   background-color: var(--ax-bg-raised);
   color: var(--ax-text-default);
   border-radius: var(--ax-border-radius-medium);
-  padding: 0 var(--ax-spacing-1-alt);
+  padding: 0 var(--ax-space-6);
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -81,22 +81,22 @@
 }
 
 .navds-tooltip__keys {
-  padding-bottom: var(--ax-spacing-1);
+  padding-bottom: var(--ax-space-4);
   display: flex;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
 }
 
 .navds-tooltip__key {
   font-family: var(--ax-font-family);
   color: var(--ax-text-default);
-  padding: 0 var(--ax-spacing-1);
+  padding: 0 var(--ax-space-4);
   min-width: 1.125rem;
   height: 1.125rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--ax-border-radius-small);
-  background: var(--ax-bg-neutral-moderateA);
+  background: var(--ax-bg-moderateA);
 
   @media (forced-colors: active) {
     & {

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

@@ -8,20 +8,22 @@
   font-size: var(--ax-font-size-heading-2xlarge);
   letter-spacing: -0.01em;
   line-height: var(--ax-font-line-height-heading-2xlarge);
+  font-weight: 650;
 }
 
 .navds-heading--xlarge.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-5);
+  margin-bottom: var(--ax-space-20);
 }
 
 .navds-heading--large {
   font-size: var(--ax-font-size-heading-xlarge);
   letter-spacing: -0.008em;
   line-height: var(--ax-font-line-height-heading-xlarge);
+  font-weight: 650;
 }
 
 .navds-heading--large.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-4);
+  margin-bottom: var(--ax-space-16);
 }
 
 /* Mobile scale */
@@ -33,7 +35,7 @@
   }
 
   .navds-heading--xlarge.navds-typo--spacing {
-    margin-bottom: var(--ax-spacing-4);
+    margin-bottom: var(--ax-space-16);
   }
 
   .navds-heading--large {
@@ -43,7 +45,7 @@
   }
 
   .navds-heading--large.navds-typo--spacing {
-    margin-bottom: var(--ax-spacing-3);
+    margin-bottom: var(--ax-space-12);
   }
 }
 
@@ -51,10 +53,11 @@
   font-size: var(--ax-font-size-heading-medium);
   letter-spacing: -0.002em;
   line-height: var(--ax-font-line-height-heading-medium);
+  font-weight: 650;
 }
 
 .navds-heading--medium.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-3);
+  margin-bottom: var(--ax-space-12);
 }
 
 .navds-heading--small {
@@ -64,7 +67,7 @@
 }
 
 .navds-heading--small.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-3);
+  margin-bottom: var(--ax-space-12);
 }
 
 .navds-heading--xsmall {
@@ -74,7 +77,7 @@
 }
 
 .navds-heading--xsmall.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-3);
+  margin-bottom: var(--ax-space-12);
 }
 
 /* Ingress */
@@ -87,7 +90,7 @@
 }
 
 .navds-ingress.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-10);
+  margin-bottom: var(--ax-space-40);
 }
 
 /* Body */
@@ -100,7 +103,7 @@
 }
 
 .navds-body-long.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-7);
+  margin-bottom: var(--ax-space-28);
 }
 
 .navds-body-long--large {
@@ -110,7 +113,7 @@
 }
 
 .navds-body-long--large.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-10);
+  margin-bottom: var(--ax-space-40);
 }
 
 .navds-body-long--small {
@@ -120,7 +123,7 @@
 }
 
 .navds-body-long--small.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-6);
+  margin-bottom: var(--ax-space-24);
 }
 
 .navds-body-short {
@@ -132,7 +135,7 @@
 }
 
 .navds-body-short.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-3);
+  margin-bottom: var(--ax-space-12);
 }
 
 .navds-body-short--large {
@@ -142,7 +145,7 @@
 }
 
 .navds-body-short--large.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-4);
+  margin-bottom: var(--ax-space-16);
 }
 
 .navds-body-short--small {
@@ -152,7 +155,7 @@
 }
 
 .navds-body-short--small.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-2);
+  margin-bottom: var(--ax-space-8);
 }
 
 /* Label */
@@ -165,7 +168,7 @@
 }
 
 .navds-label.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-3);
+  margin-bottom: var(--ax-space-12);
 }
 
 .navds-label--small {
@@ -175,7 +178,7 @@
 }
 
 .navds-label--small.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-2);
+  margin-bottom: var(--ax-space-8);
 }
 
 /* Small text */
@@ -187,7 +190,7 @@
 }
 
 .navds-detail.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-2);
+  margin-bottom: var(--ax-space-8);
 }
 
 .navds-detail.navds-typo--uppercase {
@@ -199,7 +202,7 @@
 }
 
 .navds-detail--small.navds-typo--spacing {
-  margin-bottom: var(--ax-spacing-2);
+  margin-bottom: var(--ax-space-8);
 }
 
 .navds-error-message {
@@ -207,7 +210,7 @@
 
   &.navds-error-message--show-icon {
     display: flex;
-    gap: var(--ax-spacing-1);
+    gap: var(--ax-space-4);
 
     & svg {
       margin-top: 0.15em;

@navikt/core/css/expansioncard.css

@@ -121,6 +121,7 @@
   min-width: 3rem;
   font-size: 1.5rem;
   align-self: flex-start;
+  padding: 0;
 }
 
 .navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {

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

@@ -87,6 +87,11 @@
     0 0 0 4px var(--a-border-focus);
 }
 
+/* Temp-fix to remove new darkside indeterminate node */
+.navds-checkbox__icon-indeterminate {
+  display: none;
+}
+
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
   content: "";
   position: absolute;

@navikt/core/css/link.css

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

@navikt/core/css/modal.css

@@ -14,6 +14,7 @@
   max-height: 100%;
   max-width: 100%;
   color: var(--a-text-default);
+  margin: auto;
 
   /* In case Modal is opened with `show()`, in eg. Vergic screensharing */
   inset: 0;

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "7.9.0",
+  "version": "7.11.0",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -28,12 +28,12 @@
     "test": "yarn build && vitest run"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^7.9.0",
+    "@navikt/ds-tokens": "^7.11.0",
     "@types/clean-css": "4.2.11",
     "autoprefixer": "^10.4.20",
     "browserslist": "^4.24.2",
     "clean-css": "5.3.3",
-    "cssnano": "6.0.0",
+    "cssnano": "7.0.6",
     "fast-glob": "3.2.11",
     "lightningcss": "^1.28.0",
     "lodash": "^4.17.21",
@@ -43,8 +43,8 @@
     "postcss-cli": "^9.0.0",
     "postcss-combine-duplicated-selectors": "10.0.3",
     "postcss-import": "^14.1.0",
-    "tsx": "^4.7.1",
-    "vitest": "^1.2.2"
+    "tsx": "^4.19.1",
+    "vitest": "^2.1.8"
   },
   "browserslist": [
     ">0.2%",

@navikt/core/css/table.css

@@ -156,7 +156,7 @@
   flex-shrink: 0;
 }
 
-.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
+.navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell, .navds-table__header-cell) {
   transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
 }
 
@@ -164,14 +164,10 @@
   cursor: pointer;
 }
 
-.navds-table__expandable-row--open .navds-table__data-cell {
+.navds-table__expandable-row--open :where(.navds-table__data-cell, .navds-table__header-cell) {
   border-bottom-color: transparent;
 }
 
-.navds-table__expandable-row--open .navds-table__header-cell {
-  border-color: var(--ac-table-row-border, var(--a-border-default));
-}
-
 .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
   border-color: transparent;
 }
@@ -253,11 +249,29 @@
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
+  --__ac-table-expanded-row-pi: calc(var(--a-spacing-2) + 3rem);
+
+  padding-block: var(--a-spacing-4);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
+  padding-block: var(--a-spacing-2);
+}
+
+.navds-table__expanded-row-content--gutter-both {
+  padding-inline: var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-left {
+  padding-inline: var(--__ac-table-expanded-row-pi) var(--a-spacing-2);
+}
+
+.navds-table__expanded-row-content--gutter-right {
+  padding-inline: var(--a-spacing-2) var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-none {
+  padding-inline: var(--a-spacing-2);
 }
 
 @media (forced-colors: active) {