Version Packages (#3563)

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

.changeset/README.md

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

.eslintrc.js

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

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

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

.github/actions/setup/action.yml

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

.github/dependabot.yml

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

.github/workflows/aksel-dev.yml

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

.github/workflows/aksel-prod.yml

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

.github/workflows/aksel-redeploy.yml

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

.github/workflows/backup-sanity.yml

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

.github/workflows/chromatic.yml

@@ -18,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:
@@ -35,3 +35,4 @@ jobs:
           environment: dev
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          cache_invalidation: true

.github/workflows/release.yml

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

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

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

.husky/pre-commit

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

.storybook/docs/PilotMigration.mdx

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

.storybook/docs/PilotSetup.mdx

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

.storybook/docs/PilotsChangelog.mdx

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

.storybook/docs/PilotsIntro.mdx

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

.storybook/docs/PilotsTokens.mdx

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

.storybook/docs/getting-started.mdx

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

.storybook/layout.css

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

.storybook/main.ts

@@ -46,7 +46,8 @@ export default {
   staticDirs: ["./public"],
   stories: () => [
     "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
-    "./*.mdx",
+    "./docs/*.mdx",
+    "./docs/*.stories.tsx",
     "../aksel.nav.no/website/pages/templates/**/*.tsx",
   ],
   addons: [

.storybook/preview.tsx

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

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/aksel-icons
 
+## 7.12.2
+
+## 7.12.1
+
+## 7.12.0
+
+## 7.11.0
+
+### Minor Changes
+
+- Icons: Added new icons 'SortUp' and 'SortDown' 🎉. ([#3528](https://github.com/navikt/aksel/pull/3528))
+
+## 7.10.0
+
+## 7.9.2
+
+## 7.9.1
+
 ## 7.9.0
 
 ## 7.8.1

@navikt/aksel-icons/README.md

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

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

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

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

@@ -22,13 +22,13 @@
     "@svgr/core": "^8.1.0",
     "@types/node": "^18.15.11",
     "@types/postcss-url": "^10.0.4",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "postcss": "^8.4.31",
     "postcss-url": "^10.1.3",
     "typescript": "5.5.4",
-    "vite": "^5.4.6",
+    "vite": "^5.4.12",
     "vite-plugin-singlefile": "^1.0.0",
     "vite-plugin-svgr": "^4.2.0"
   }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@navikt/aksel-icons/icons/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.12.2",
   "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,19 @@
 # @navikt/aksel-stylelint
 
+## 7.12.2
+
+## 7.12.1
+
+## 7.12.0
+
+## 7.11.0
+
+## 7.10.0
+
+## 7.9.2
+
+## 7.9.1
+
 ## 7.9.0
 
 ## 7.8.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.9.0",
+  "version": "7.12.2",
   "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.12.2",
+    "@navikt/ds-tokens": "^7.12.2",
     "concurrently": "9.0.1",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",
-    "stylelint": "^14.8.5",
+    "stylelint": "^16.10.0",
     "stylelint-test-rule-node": "^0.2.1",
-    "tsx": "^4.7.1",
+    "tsx": "^4.19.1",
     "typescript": "5.5.4"
   }
 }

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @navikt/aksel
 
+## 7.12.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.12.2
+
+## 7.12.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.12.1
+
+## 7.12.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.12.0
+
+## 7.11.0
+
+### Patch Changes
+
+- Updated dependencies [[`c73db43`](https://github.com/navikt/aksel/commit/c73db43c9638b922388ef6684c016663a0a29873), [`c73db43`](https://github.com/navikt/aksel/commit/c73db43c9638b922388ef6684c016663a0a29873)]:
+  - @navikt/ds-css@7.11.0
+
+## 7.10.0
+
+### Patch Changes
+
+- Updated dependencies [[`d29509d`](https://github.com/navikt/aksel/commit/d29509dc0ad0ef6bff38ad9a2a820d3bd1770aaa), [`fad913c`](https://github.com/navikt/aksel/commit/fad913ce6b27580a2f7b54984955324d1af08196), [`715a34a`](https://github.com/navikt/aksel/commit/715a34ac7d4aa46b5b7b5990e5e1cd528cfd7f6b)]:
+  - @navikt/ds-css@7.10.0
+
+## 7.9.2
+
+### Patch Changes
+
+- Updated dependencies [[`54495a4`](https://github.com/navikt/aksel/commit/54495a446065c73a06865885e65b3b07dedaa5ea)]:
+  - @navikt/ds-css@7.9.2
+
+## 7.9.1
+
+### Patch Changes
+
+- Updated dependencies [[`25305eb`](https://github.com/navikt/aksel/commit/25305ebba04a37e6315bc37bfabb39f04f83f146)]:
+  - @navikt/ds-css@7.9.1
+
 ## 7.9.0
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.9.0",
+  "version": "7.12.2",
   "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.12.2",
     "axios": "1.7.4",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",
@@ -40,13 +40,13 @@
     "is-git-clean": "1.1.0",
     "jscodeshift": "^0.15.1",
     "jscodeshift-add-imports": "1.0.11",
-    "lodash": "4.17.21",
+    "lodash": "^4.17.21",
     "react-scanner": "^1.1.0"
   },
   "devDependencies": {
     "rimraf": "6.0.1",
     "typescript": "5.5.4",
-    "vitest": "^1.2.2"
+    "vitest": "^2.1.8"
   },
   "sideEffects": false,
   "engines": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @navikt/ds-css
 
+## 7.12.2
+
+## 7.12.1
+
+## 7.12.0
+
+## 7.11.0
+
+### Patch Changes
+
+- ExpansionCard: Removed dynamic padding on button-element. ([#3532](https://github.com/navikt/aksel/pull/3532))
+
+- Modal: Defaults to `margin: auto` for tailwind 4 support. ([#3532](https://github.com/navikt/aksel/pull/3532))
+
+## 7.10.0
+
+### Minor Changes
+
+- Table: New prop `contentGutter` added to `ExpandableRow`-component. This allows user more control for content layout inside expandable element. ([#3507](https://github.com/navikt/aksel/pull/3507))
+
+### Patch Changes
+
+- Button: Using `<Loader />` within `icon`-prop now supported. ([#3515](https://github.com/navikt/aksel/pull/3515))
+
+- Combobox: Always render `maxSelected` message when `isMultiSelect` is set. ([#3506](https://github.com/navikt/aksel/pull/3506))
+
+## 7.9.2
+
+### Patch Changes
+
+- Table: Removed border-bottom for HeaderCell used in ExpandableRow. ([#3503](https://github.com/navikt/aksel/pull/3503))
+
+## 7.9.1
+
+### Patch Changes
+
+- Link: :bug: Use inside Alert got wrong text-color while focused or active. ([#3489](https://github.com/navikt/aksel/pull/3489))
+
 ## 7.9.0
 
 ### Minor Changes

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

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

@@ -1,8 +1,8 @@
 /* --------------------------- ActionMenu content --------------------------- */
 .navds-action-menu__content {
   overflow: hidden;
-  border-radius: var(--ax-border-radius-large);
-  border: 1px solid var(--ax-border-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   box-shadow: var(--ax-shadow-dialog);
   transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
 
@@ -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,17 +57,17 @@
 .navds-action-menu__item {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   min-height: var(--__axc-action-menu-item-height);
   cursor: default;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   position: relative;
   padding-left: var(--__axc-action-menu-item-pl);
   padding-right: var(--__axc-action-menu-item-pr);
   font-size: var(--ax-font-size-medium);
   scroll-margin-block: var(--__axc-action-menu-content-p);
   line-height: 1.5;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   text-decoration: none;
 
   & svg {
@@ -77,7 +77,7 @@
   &:focus {
     outline: none;
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   &[aria-disabled="true"] {
@@ -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-neutral-moderate-pressedA);
   }
 
   &:focus {
@@ -103,11 +103,11 @@
 }
 
 .navds-action-menu__item--danger {
-  color: var(--ax-text-danger);
+  color: var(--ax-text-danger-subtle);
 
   &:focus {
     background-color: var(--ax-bg-danger-moderate-hoverA);
-    color: var(--ax-text-danger-strong);
+    color: var(--ax-text-danger-subtle);
   }
 }
 
@@ -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 {
@@ -139,9 +139,9 @@
 /* --------------------------- ActionMenu shortcut -------------------------- */
 .navds-action-menu__shortcut {
   background-color: var(--ax-bg-neutral-moderateA);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-small);
-  padding: 0 var(--ax-spacing-1);
+  padding: 0 var(--ax-space-4);
   min-width: 1.125rem;
   height: 1.125rem;
   line-height: 1;
@@ -158,7 +158,7 @@
   min-height: calc(var(--__axc-action-menu-item-height) - 6px);
   padding-right: var(--__axc-action-menu-item-pr);
   padding-left: var(--__axc-action-menu-item-pl);
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
   border-radius: var(--ax-border-radius-medium);
   user-select: none;
   cursor: default;
@@ -167,8 +167,8 @@
 
 .navds-action-menu__divider {
   height: 1px;
-  margin-block: var(--ax-spacing-2);
-  background-color: var(--ax-border-subtleA);
+  margin-block: var(--ax-space-8);
+  background-color: var(--ax-border-neutral-subtleA);
 }
 
 /* -------------------------- ActionMenu indicator -------------------------- */

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

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

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

@@ -8,7 +8,8 @@ body,
 
 /* ---------------------------- Inline utilities ---------------------------- */
 [hidden] {
-  display: none !important;
+  /* CSS-layers reverses "!important" ordering, so we can't set this to important if we want to override it later. */
+  display: none;
 }
 
 /* https://web.dev/prefers-reduced-motion/ */

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

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

@navikt/core/css/darkside/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);
   }
 }
 
@@ -132,27 +134,23 @@
   --__axc-button-border-color: var(--ax-border-accent);
 
   background-color: transparent;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 
   &:hover {
     --__axc-button-border-color: var(--ax-border-accent-strong);
 
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-accent-strong);
   }
 
   &:active {
-    --__axc-button-border-color: transparent;
-
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
     --__axc-button-border-color: var(--ax-border-accent);
 
     background-color: transparent;
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
   }
 }
 
@@ -160,28 +158,25 @@
 * .navds-button--secondary-neutral *
  **************************/
 .navds-button--secondary-neutral {
-  --__axc-button-border-color: var(--ax-border-default);
+  --__axc-button-border-color: var(--ax-border-neutral);
 
   background-color: transparent;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:hover {
-    --__axc-button-border-color: var(--ax-border-strong);
+    --__axc-button-border-color: var(--ax-border-neutral-strong);
 
     background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:active {
-    --__axc-button-border-color: transparent;
-
-    color: var(--ax-text-neutral-contrast);
-    background-color: var(--ax-bg-neutral-strong-pressed);
+    background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
     --__axc-button-border-color: var(--ax-border-neutral);
 
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     background-color: transparent;
   }
 }
@@ -191,20 +186,18 @@
  ****************************/
 .navds-button--tertiary {
   background-color: transparent;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-accent-strong);
   }
 
   &:active {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
     background-color: transparent;
   }
 }
@@ -214,19 +207,18 @@
  ****************************/
 .navds-button--tertiary-neutral {
   background-color: transparent;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:hover {
     background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     background-color: transparent;
   }
 }
@@ -264,7 +256,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;
 }
 
@@ -23,8 +23,8 @@
   align-items: center;
   background-color: var(--ax-bg-raised);
   border-radius: var(--ax-border-radius-full);
-  border: 1px solid var(--ax-border-subtleA);
-  color: var(--ax-text-default);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-neutral);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -50,45 +50,45 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
 }
 
 .navds-chat__bubble {
-  padding: var(--ax-spacing-4) 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);
+  border: 1px solid var(--ax-border-neutral-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-neutral-moderateA);
   }
 }
 
 /* ------------------------------ Chat top text ----------------------------- */
 .navds-chat__top-text {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   align-items: baseline;
   font-weight: normal;
   margin: 0;

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

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

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

@@ -1,23 +1,23 @@
 .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);
+      color: var(--ax-text-neutral);
       background: var(--ax-bg-neutral-moderateA);
     }
 
     &.rdp-day_selected {
-      background-color: var(--ax-bg-accent-moderateA);
+      background-color: var(--ax-bg-accent-moderate-pressedA);
       box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
-      color: var(--ax-text-default);
+      color: var(--ax-text-neutral);
     }
   }
 
   .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 {
@@ -70,7 +68,7 @@
     cursor: not-allowed;
     text-decoration: line-through;
     background-color: var(--ax-bg-neutral-moderateA);
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
@@ -86,7 +84,7 @@
       width: 6px;
       height: 6px;
       display: block;
-      background-color: var(--ax-text-accent);
+      background-color: var(--ax-text-accent-subtle);
       border-radius: var(--ax-border-radius-full);
       content: "";
       position: absolute;
@@ -121,14 +119,14 @@
   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 {
   width: 2rem;
   height: 2rem;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -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);
   }
 }
 
@@ -185,15 +183,15 @@
   right: 0.0625rem;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   display: inline-flex;
   cursor: pointer;
   margin: 0;
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: calc(var(--ax-border-radius-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 {
@@ -239,11 +237,7 @@
 
 .navds-date__weeknumber-number {
   font-size: 0.875rem;
-  color: var(--ax-text-subtle);
-
-  .navds-date__weeknumber:active & {
-    color: var(--ax-text-neutral-contrast);
-  }
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-date__week-wrapper {
@@ -258,21 +252,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,26 +1,26 @@
 .navds-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
-  --__axc-expansioncard-padding-block: var(--ax-spacing-4);
-  --__axc-expansioncard-padding-inline: var(--ax-spacing-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);
   height: fit-content;
-  border: 1px solid var(--ax-border-default);
+  border: 1px solid var(--ax-border-neutral);
 
   &:has(.navds-expansioncard__header:hover) {
-    box-shadow: 0 0 0 1px var(--ax-border-strong);
-    border-color: var(--ax-border-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-neutral-strong);
+    border-color: var(--ax-border-neutral-strong);
   }
 }
 
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
-  --__axc-expansioncard-padding-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-neutral-moderate-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-neutral-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 */

@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-neutral);
+    }
+
     & *:hover {
       cursor: not-allowed;
     }
@@ -59,7 +63,7 @@
   }
 
   & .navds-combobox__wrapper {
-    border-color: var(--ax-border-subtle);
+    border-color: var(--ax-border-neutral-subtle);
     overflow: clip;
   }
 
@@ -76,18 +80,18 @@
 }
 
 .navds-combobox__wrapper-inner {
-  border: 1px solid var(--ax-border-default);
-  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-neutral);
+  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 {
     outline: none;
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
   }
 
   &.navds-text-field__input {
@@ -113,15 +117,19 @@
   &:hover {
     cursor: text;
   }
+
+  .navds-combobox--disabled &:hover {
+    border-color: var(--ax-border-neutral);
+  }
 }
 
 .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,8 +215,7 @@
 }
 
 .navds-combobox__button-toggle-list {
-  border-radius: var(--ax-border-radius-medium);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -219,10 +226,10 @@
   padding: 0;
 
   &:hover {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
 
     &:active {
-      color: var(--ax-text-accent-strong);
+      color: var(--ax-text-accent);
     }
   }
 }
@@ -230,19 +237,19 @@
 /* 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));
-  border: 1px solid var(--ax-border-subtleA);
+  top: calc(100% + var(--ax-space-8));
+  border: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   flex-direction: column;
   border-radius: var(--ax-border-radius-large);
   background-color: var(--ax-bg-raised);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   overscroll-behavior: contain;
   box-shadow: var(--ax-shadow-dialog);
 
@@ -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 */
 }
 
@@ -286,7 +293,7 @@
   margin: 0;
   border-radius: 0;
   border-bottom: 1px solid var(--ax-border-neutral-subtle);
-  padding-block: var(--ax-spacing-2);
+  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-neutral);
   }
 
   & svg {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-neutral);
   }
 }
 
@@ -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);
+    color: var(--ax-text-neutral);
   }
 
   &: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,11 +6,11 @@
 }
 
 .navds-fieldset > :not(:first-child, :empty) {
-  margin-top: var(--ax-spacing-2);
+  margin-top: var(--ax-space-8);
 }
 
 .navds-fieldset__description {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {

@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,13 +12,13 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--ax-spacing-4);
+  gap: var(--ax-space-16);
   text-align: center;
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
-  border: 1px dashed var(--ax-border-default);
+  padding: var(--ax-space-16) var(--ax-space-20);
+  border: 1px dashed var(--ax-border-neutral);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--__axc-dropzone-background);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
   cursor: pointer;
 
@@ -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-neutral-soft);
+
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 }
@@ -49,7 +53,7 @@
   }
 
   & > .navds-dropzone__area::after {
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     background-color: var(--ax-bg-accent-moderateA);
     content: "";
     inset: 0;
@@ -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;
@@ -130,17 +134,17 @@
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent-subtle);
   top: 50%;
   transform: translateY(-50%);
 }
 
 .navds-dropzone__area-disabled {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 /* ----------------------------- FileUpload Item ---------------------------- */
@@ -154,27 +158,27 @@ li.navds-file-item {
 
 .navds-file-item__inner {
   background-color: var(--ax-bg-raised);
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
   border-radius: var(--ax-border-radius-xlarge);
-  padding: var(--ax-spacing-3) 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);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-full);
   min-height: 2.5rem;
   min-width: 2.5rem;
-  margin-top: var(--ax-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 {
@@ -21,37 +21,35 @@
 
 .navds-form-progress__collapsible {
   display: grid;
-  grid-template-rows: 0fr;
+  visibility: hidden;
   overflow: hidden;
-  transition: grid-template-rows 250ms cubic-bezier(0.2, 0, 0, 1);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  background: var(--ax-bg-raised);
+  padding-inline: var(--ax-space-20);
+  padding-block: 0;
+  opacity: 0.001;
+  transition-duration: 1s;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  transition-property: margin-top, opacity, visibility, padding-block-start, grid-template-rows;
+  grid-template-rows: 0fr;
+
+  /* border-block leaves 2px of space when closes, so offset 2px with margin */
+  margin-top: -2px;
 
   &[hidden] {
-    display: grid !important;
+    display: grid;
   }
 
   &[data-state="open"] {
+    margin-top: var(--ax-space-4);
     grid-template-rows: 1fr;
+    visibility: visible;
+    padding-block: var(--ax-space-16);
+    opacity: 1;
   }
 }
 
 .navds-form-progress__collapsible-content {
   min-height: 0;
-  opacity: 0.01;
-  visibility: hidden;
-  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
-  transition-duration: 250ms;
-  transition-property: opacity, visibility;
-}
-
-.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
-  visibility: visible;
-  opacity: 1;
-}
-
-.navds-form-progress__stepper {
-  border: 1px solid var(--ax-border-subtle);
-  border-radius: var(--ax-border-radius-large);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
-  margin-top: var(--ax-spacing-1);
-  background: var(--ax-bg-raised);
 }

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

@@ -7,48 +7,48 @@
 
 .navds-form-summary__header {
   background: var(--ax-bg-neutral-moderateA);
-  padding: var(--ax-spacing-4) var(--ax-spacing-6);
+  padding: var(--ax-space-20) var(--ax-space-20) var(--ax-space-16) var(--ax-space-20);
   display: flex;
   justify-content: space-between;
-  gap: 0 var(--ax-spacing-3);
+  gap: 0 var(--ax-space-12);
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__header {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-16) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
     flex-direction: column;
   }
 }
 
 .navds-form-summary__edit {
   flex-shrink: 0;
-  margin-top: var(--ax-spacing-1);
+  margin-top: var(--ax-space-4);
   align-self: flex-start;
 }
 
 .navds-form-summary > .navds-form-summary__answers {
-  border-top: 1px solid var(--ax-border-subtleA);
+  border-top: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-form-summary__answers {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20) var(--ax-space-20) var(--ax-space-20);
   margin: 0;
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__answers {
-    padding: var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-16) var(--ax-space-16);
   }
 }
 
 .navds-form-summary__answer:not(:last-child) {
-  margin-bottom: var(--ax-spacing-4);
-  padding-bottom: var(--ax-spacing-4);
-  border-bottom: 1px solid var(--ax-border-subtleA);
+  margin-bottom: var(--ax-space-16);
+  padding-bottom: var(--ax-space-16);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer) {
-  padding-bottom: var(--ax-spacing-6);
+  padding-bottom: var(--ax-space-24);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
@@ -57,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,12 +1,12 @@
 .navds-form-field {
   display: grid;
   justify-items: start;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 }
 
 .navds-form-field__description {
   margin-top: -0.375rem;
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-form-field--disabled {
@@ -19,7 +19,7 @@
 }
 
 .navds-form-field__subdescription {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-form-field--readonly > :where(.navds-form-field__label) {
@@ -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,13 +18,13 @@
 
 .navds-checkbox__label,
 .navds-radio__label {
-  padding: var(--ax-spacing-3) 0;
+  padding: var(--ax-space-12) 0;
   cursor: pointer;
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
 
   --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
-  --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
+  --__axc-radio-checkbox-readonly-border: var(--ax-border-neutral-subtle);
 }
 
 .navds-checkbox__label::before,
@@ -35,7 +35,7 @@
   flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem;
-  border: 2px solid var(--ax-border-default);
+  border: 2px solid var(--ax-border-neutral);
 }
 
 .navds-radio__label::before {
@@ -59,7 +59,7 @@
 
 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: var(--ax-spacing-1-alt) 0;
+  padding: var(--ax-space-6) 0;
 }
 
 .navds-checkbox--small > .navds-checkbox__label::before,
@@ -68,26 +68,42 @@
   height: 1.25rem;
 }
 
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
-}
-
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+.navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio__input:focus + .navds-radio__label::after {
   content: "";
   position: absolute;
-  top: 50%;
-  transform: translate(var(--ax-spacing-1-alt), -50%);
-  background-color: var(--ax-bg-default);
-  width: 0.75rem;
-  height: 0.25rem;
-  border-radius: 1px;
-  flex-shrink: 0;
+  width: 100%;
+  height: calc(100% - var(--ax-space-24));
+  border-radius: var(--ax-border-radius-medium);
+  outline: 3px solid var(--ax-border-focus);
+  outline-offset: 3px;
+  pointer-events: none;
 }
 
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  transform: translate(0.25rem, -50%);
+.navds-checkbox--small > .navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio--small > .navds-radio__input:focus + .navds-radio__label::after {
+  height: calc(100% - var(--ax-space-12));
+}
+
+.navds-checkbox__icon-indeterminate {
+  display: none;
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  display: block;
+  width: 0.75rem;
+  height: 0.25rem;
+  background-color: var(--ax-bg-default);
+  border-radius: 1px;
+  position: absolute;
+  transform: translate(var(--ax-space-6), -50%);
+  top: 50%;
+  pointer-events: none;
+}
+
+.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  transform: translate(var(--ax-space-4), -50%);
+  height: 0.1875rem;
 }
 
 .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
@@ -108,7 +124,7 @@
   color: var(--ax-bg-default);
   position: absolute;
   height: 1.5rem;
-  transform: translate(var(--ax-spacing-1-alt));
+  transform: translate(var(--ax-space-6));
   pointer-events: none;
 
   /* Fixed edcase where when using in shadow-dom, svg will not center */
@@ -140,8 +156,8 @@
 }
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ax-text-accent-strong);
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label {
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
@@ -152,13 +168,12 @@
 
 .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before {
-  border-color: var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
 }
 
 .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label::before {
   background-color: var(--ax-bg-danger-moderate-hoverA);
-  border-color: var(--ax-border-danger-strong);
 }
 
 .navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label::before {
@@ -194,7 +209,7 @@
 
 .navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
 .navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label::before,
@@ -211,19 +226,19 @@
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
   background-color: var(--ax-bg-neutral-strong);
   border-width: 0;
   box-shadow:
-    inset 0 0 0 2px var(--ax-border-subtle),
+    inset 0 0 0 2px var(--ax-border-neutral-subtle),
     inset 0 0 0 8px var(--ax-bg-neutral-moderate);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  background-color: var(--ax-text-subtle);
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  background-color: var(--ax-text-neutral-subtle);
 }
 
 @media (forced-colors: active) {
@@ -247,7 +262,7 @@
     color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
@@ -265,7 +280,10 @@
     background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox--readonly
+    > .navds-checkbox__input:indeterminate
+    + .navds-checkbox__label
+    > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 

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

@@ -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,13 +97,13 @@
 .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 {
   --__axc-button-border-width: 1px;
-  --__axc-button-border-color: var(--ax-border-default);
+  --__axc-button-border-color: var(--ax-border-neutral);
 
   &:not(:hover, :active) {
     background-color: var(--ax-bg-input);
@@ -112,10 +112,6 @@
   &:hover:not(:disabled) {
     --__axc-button-border-color: var(--ax-border-accent-strong);
   }
-
-  &:active:not(:disabled) {
-    --__axc-button-border-color: transparent;
-  }
 }
 
 /* Special-case where we hover/focus input, and want the secondary-button to match input-border */
@@ -127,13 +123,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,16 +1,16 @@
 .navds-select__input {
   appearance: none;
   background-color: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-medium);
-  border: 1px solid var(--ax-border-default);
-  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-neutral);
+  color: var(--ax-text-neutral);
   width: 100%;
   box-sizing: border-box;
   min-height: 3rem;
   display: inline-block;
   position: relative;
-  padding: 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);
   }
 
@@ -36,17 +36,17 @@
   position: relative;
   display: flex;
   width: 100%;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 /* ------------------------------- Select Icon ------------------------------ */
 .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);
+  color: var(--ax-text-neutral);
 
   @media (forced-colors: active) {
     & {
@@ -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,
@@ -80,16 +80,16 @@
 /* ----------------------------- Select disabled ---------------------------- */
 .navds-select__input:disabled {
   background-color: var(--ax-bg-input);
-  border: 1px solid var(--ax-border-default);
+  border: 1px solid var(--ax-border-neutral);
   box-shadow: none;
   cursor: not-allowed;
 
   /* Chrome-fix */
   opacity: 1;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   & > option {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   @media (forced-colors: active) {
@@ -116,6 +116,6 @@
   }
 
   & .navds-select__chevron {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 }

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

@@ -27,35 +27,50 @@
 /* -------------------------- Switch content/label -------------------------- */
 .navds-switch__label-wrapper {
   cursor: pointer;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-switch__content {
+  --__axc-switch-block-padding: 0.75rem;
+
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.75rem 0 0.75rem 3.25rem;
+  gap: var(--ax-space-2);
+  padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
 
   .navds-switch--right & {
-    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-subtle);
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -68,16 +83,16 @@
   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);
+  border: 2px solid var(--ax-border-neutral);
   transition-property: background-color, border-color;
   transition-duration: 100ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
   .navds-switch--small > & {
-    top: var(--ax-spacing-1);
+    top: var(--ax-space-4);
   }
 
   .navds-switch__input:checked ~ & {
@@ -92,7 +107,7 @@
 
   .navds-switch__input:disabled ~ & {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
   }
 
   .navds-switch__input:checked:disabled ~ & {
@@ -100,9 +115,9 @@
     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;
   }
 }
 
@@ -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-subtle);
     width: 1.25rem;
     height: 1.25rem;
     left: 0;
@@ -194,7 +209,7 @@
 
   & > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
   & .navds-switch__label-wrapper:hover {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   & .navds-switch__label {
@@ -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,12 +1,12 @@
 .navds-text-field__input {
   appearance: none;
-  padding: var(--ax-spacing-2);
+  padding: var(--ax-space-8);
   background: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-medium);
-  border: 1px solid var(--ax-border-default);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-neutral);
   min-height: 3rem;
   width: 100%;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:hover {
     border-color: var(--ax-border-accent-strong);
@@ -14,18 +14,18 @@
 
   &:focus-visible {
     border-color: var(--ax-border-accent-strong);
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   &:disabled {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
     cursor: not-allowed;
   }
 
   &::placeholder {
-    color: var(--ax-text-neutral);
+    color: var(--ax-text-neutral-subtle);
   }
 
   &[size] {
@@ -34,13 +34,13 @@
 }
 
 .navds-form-field--small .navds-text-field__input {
-  padding: 0 var(--ax-spacing-2);
+  padding: 0 var(--ax-space-8);
   min-height: 2rem;
 }
 
 .navds-text-field--error .navds-text-field__input:not(: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 {

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

@@ -2,17 +2,17 @@
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   height: var(--__axc-textarea-height);
   appearance: none;
-  padding: var(--ax-spacing-2);
+  padding: var(--ax-space-8);
   background-color: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-medium);
-  border: 1px solid var(--ax-border-default);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-neutral);
   resize: none;
   width: 100%;
   display: block;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &::placeholder {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   &:hover {
@@ -20,19 +20,19 @@
   }
 
   &: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);
   }
 
   &:disabled {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
     cursor: not-allowed;
   }
 
   .navds-form-field--small & {
-    padding: var(--ax-spacing-1-alt);
+    padding: var(--ax-space-6);
   }
 
   .navds-textarea--readonly & {
@@ -44,11 +44,11 @@
 
 .navds-textarea__counter {
   margin-top: -0.25rem;
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-textarea__counter--error {
-  color: var(--ax-text-danger);
+  color: var(--ax-text-danger-subtle);
 }
 
 .navds-textarea__sr-counter {
@@ -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

@@ -1,5 +1,5 @@
 .navds-guide-panel {
-  --__axc-guide-panel-guide-size: 3.75rem;
+  --__axc-guide-panel-guide-size: 5rem;
 
   position: relative;
   display: flex;
@@ -16,8 +16,12 @@
     align-items: flex-start;
   }
 
+  &[data-poster="false"][data-responsive="false"] {
+    --__axc-guide-panel-guide-size: 3.75rem;
+  }
+
   @media (min-width: 480px) {
-    & {
+    &[data-poster="false"][data-responsive="false"] {
       --__axc-guide-panel-guide-size: 5rem;
     }
 
@@ -51,23 +55,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 +83,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 +98,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

@@ -7,9 +7,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--ax-bg-accent-strong);
+  color: var(--ax-bg-info-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);
 }
@@ -33,11 +33,11 @@
 
 .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
-  color: var(--ax-bg-accent-strong-hover);
+  color: var(--ax-bg-info-strong-hover);
 }
 
 .navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
-  color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-bg-info-strong-pressed);
 }
 
 @media (forced-colors: active) {

@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

@@ -3,7 +3,7 @@
   align-self: stretch;
   background: var(--ax-bg-raised);
   min-height: 3rem;
-  border-bottom: 1px solid var(--ax-border-subtleA);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 @media (forced-colors: active) {
@@ -23,20 +23,20 @@
   line-height: normal;
   text-align: left;
   padding-block: 0;
-  padding-inline: var(--ax-spacing-6) var(--ax-spacing-5);
-  border-right: 1px solid var(--ax-border-subtleA);
+  padding-inline: var(--ax-space-24) var(--ax-space-20);
+  border-right: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   align-items: center;
   text-decoration: none;
   margin: 0;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:is(button) {
     cursor: pointer;
   }
 
   &:hover {
-    background: var(--ax-bg-neutral-moderate-hover);
+    background: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:is(:hover, :active):not(button, a) {
@@ -45,8 +45,8 @@
 }
 
 .navds-internalheader__user {
-  padding: 0 var(--ax-spacing-5);
-  border-left: 1px solid var(--ax-border-subtleA);
+  padding: 0 var(--ax-space-20);
+  border-left: 1px solid var(--ax-border-neutral-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);
-  border-left: 1px solid var(--ax-border-subtleA);
-  color: var(--ax-text-default);
+  gap: var(--ax-space-8);
+  border-left: 1px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-neutral);
 
   &:hover {
-    background: var(--ax-bg-neutral-moderate-hover);
+    background: var(--ax-bg-neutral-moderate-hoverA);
   }
 }
 
@@ -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-neutral-moderate-pressedA);
   }
 }
 
 .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

@@ -1,8 +1,8 @@
 .navds-link {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   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 {
@@ -46,18 +47,18 @@
 .navds-alert:not(.navds-alert--inline),
 .navds-confirmation-panel {
   & .navds-link {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 }
 
 .navds-link--action {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-link--neutral {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-link--subtle {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }

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

@@ -1,17 +1,12 @@
 .navds-list ul,
 .navds-list ol {
   padding: 0;
-  margin-block: var(--ax-spacing-4);
-}
-
-.navds-list--small ul,
-.navds-list--small ol {
-  margin-block: var(--ax-spacing-3);
+  margin: 0;
 }
 
 .navds-list {
   & .navds-list :where(ul, ol) {
-    margin-block: var(--ax-spacing-2) 0;
+    margin-block: var(--ax-space-8) 0;
   }
 
   & ol {
@@ -31,7 +26,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 +56,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

@@ -61,7 +61,7 @@
   animation: loader-dasharray 1.5s ease-in-out infinite;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
-  stroke: var(--ax-border-strong);
+  stroke: var(--ax-border-neutral-strong);
   stroke-linecap: round;
   stroke-width: var(--__axc-loader-stroke-width);
 }
@@ -73,7 +73,7 @@
 
 .navds-loader--neutral {
   & .navds-loader__foreground {
-    stroke: var(--ax-border-strong);
+    stroke: var(--ax-border-neutral-strong);
   }
 }
 
@@ -89,11 +89,11 @@
 
 .navds-loader--inverted {
   & .navds-loader__foreground {
-    stroke: var(--ax-border-subtle);
+    stroke: var(--ax-border-neutral-subtle);
   }
 
   & .navds-loader__background {
-    stroke: var(--ax-border-strong);
+    stroke: var(--ax-border-neutral-strong);
   }
 }
 

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

@@ -6,14 +6,15 @@
   --__axc-modal-bg: var(--ax-bg-raised);
 
   background-color: var(--__axc-modal-bg);
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
   box-shadow: var(--ax-shadow-dialog);
   padding: 0;
   position: fixed;
   max-height: 100%;
   max-width: 100%;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
+  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,29 +117,29 @@
 }
 
 .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);
   }
 }
 
 .navds-modal__label {
   font-weight: var(--ax-font-weight-bold);
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .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;

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

@@ -2,15 +2,21 @@
   z-index: 1000;
   background: var(--ax-bg-raised);
   box-shadow: var(--ax-shadow-dialog);
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   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);
+}
+
+@media (min-width: 480px) {
+  .navds-popover__content {
+    padding: 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 {
@@ -48,13 +48,13 @@
 }
 
 .navds-pageblock--gutters {
-  --__axc-page-padding-inline: var(--a-spacing-4);
+  --__axc-page-padding-inline: var(--ax-space-16);
 
   padding-inline: var(--__axc-page-padding-inline);
 }
 
 @media (min-width: 1024px) {
   .navds-pageblock--gutters {
-    --__axc-page-padding-inline: var(--a-spacing-12);
+    --__axc-page-padding-inline: var(--ax-space-48);
   }
 }

@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);
-  color: var(--ax-text-accent);
+  gap: var(--ax-space-4);
+  color: var(--ax-text-accent-subtle);
   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,8 +34,7 @@
     border-radius: var(--ax-border-radius-medium);
 
     &:hover {
-      background-color: var(--ax-bg-neutral-hoverA);
-      color: var(--ax-text-accent-strong);
+      background-color: var(--ax-bg-neutral-moderate-hoverA);
     }
   }
 }
@@ -47,29 +46,29 @@
 
     &:hover {
       background-color: var(--ax-bg-accent-moderate-hoverA);
-      color: var(--ax-text-accent-strong);
+      color: var(--ax-text-accent);
     }
   }
 
   &.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);
+  margin-top: var(--ax-space-8);
   border-left: 2px solid var(--ax-border-neutral-subtleA);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   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 +83,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/stepper.darkside.css

@@ -3,7 +3,7 @@
   --__axc-stepper-border-width: 2px;
   --__axc-stepper-line-length: 1rem;
 
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   font-weight: var(--ax-font-weight-bold);
   line-height: 1;
   list-style: none;
@@ -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 {
@@ -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;
@@ -107,7 +108,7 @@
 }
 
 .navds-stepper__step[data-interactive="true"] {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   border-radius: var(--ax-border-radius-medium);
   text-decoration: none;
 
@@ -124,20 +125,13 @@
     }
   }
 
-  &:hover {
-    & .navds-stepper__circle {
-      color: var(--ax-text-accent-strong);
-    }
-  }
-
   & .navds-stepper__circle {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
     border-color: var(--ax-border-accent-strong);
   }
 
   &[data-active="true"] {
     & .navds-stepper__content {
-      color: var(--ax-text-accent-strong);
       text-decoration: none;
     }
 
@@ -159,19 +153,14 @@
 }
 
 .navds-stepper__step[data-interactive="false"] {
-  color: var(--ax-text-neutral);
+  color: var(--ax-text-neutral-subtle);
   cursor: default;
 
   & .navds-stepper__circle {
-    color: var(--ax-text-neutral);
     border-color: var(--ax-border-neutral-strong);
   }
 
   &[data-active="true"] {
-    & .navds-stepper__content {
-      color: var(--ax-text-neutral-strong);
-    }
-
     & .navds-stepper__circle {
       color: var(--ax-text-neutral-contrast);
       background-color: var(--ax-bg-neutral-strong-pressed);

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

@@ -12,12 +12,12 @@
   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-neutral-moderate-hoverA);
     transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
   }
 
   & .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
-    background-color: var(--ax-bg-accent-hoverA);
+    background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 }
 
@@ -26,28 +26,36 @@
 }
 
 .navds-table__row--selected {
-  background-color: var(--ax-bg-accent);
+  background-color: var(--ax-bg-accent-softA);
+
+  & + .navds-table__expanded-row {
+    background-color: var(--ax-bg-accent-softA);
+  }
 }
 
 .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-neutral-softA);
   }
 
   & .navds-table__body :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
     background-color: transparent;
   }
-}
 
-.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
-  background-color: var(--ax-bg-neutral);
+  & .navds-table__body .navds-table__expanded-row:nth-child(4n) {
+    background-color: var(--ax-bg-neutral-softA);
+  }
+
+  & .navds-table__row--selected + .navds-table__expanded-row:nth-child(4n) {
+    background-color: var(--ax-bg-accent-softA);
+  }
 }
 
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
-  padding: var(--ax-spacing-3) var(--ax-spacing-2);
-  border-bottom: 1px solid var(--ax-border-default);
+  padding: var(--ax-space-12) var(--ax-space-8);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
   text-align: left;
 }
 
@@ -66,25 +74,21 @@
   text-align: center;
 }
 
-:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
-:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
-  border-color: var(--ax-border-strong);
-}
-
 :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
   border-bottom-color: transparent;
 }
 
 .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);
 }
 
+/* TODO: Look to handle "inline"-checkbox better than custom CSS-overrides in the future. */
 .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
   top: -0.75rem;
 }
@@ -97,6 +101,11 @@
   padding: 0;
 }
 
+.navds-table .navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-table .navds-radio__input:focus + .navds-radio__label::after {
+  height: 100%;
+}
+
 .navds-table__header-cell[aria-sort] {
   padding: 0;
 }
@@ -104,36 +113,36 @@
 .navds-table__sort-button {
   appearance: none;
   background: none;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   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-4);
   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-neutral-moderate-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,
 .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
-  background-color: var(--ax-bg-accent-moderate);
-  color: var(--ax-text-accent-strong);
+  background-color: var(--ax-bg-accent-moderate-pressedA);
+  color: var(--ax-text-accent);
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {
@@ -145,11 +154,11 @@
 }
 
 .navds-table__sort-button svg {
-  font-size: 1rem;
+  font-size: 1.5rem;
   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 +166,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 +180,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 +212,15 @@
 .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-neutral-moderate-hoverA);
+}
+
+& .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 {
+  .navds-table__row--selected & {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+  }
 }
 
 .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
@@ -215,7 +228,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 {
@@ -229,13 +242,31 @@
 /* -------------------------- Table ExpandableRow -------------------------- */
 .navds-table__expanded-row-collapse:not([style*="height: 0px;"]),
 .navds-table__expanded-row-collapse[style*="transition:"] {
-  border-bottom: 1px solid var(--ax-border-default);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .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-neutral-subtleA);
   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,17 +43,17 @@
 
 .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;
   background: none;
   border: none;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   cursor: pointer;
 
   --__axc-tabs-line-width: 0;
-  --__axc-tabs-line-color: var(--ax-border-neutral-subtle);
+  --__axc-tabs-line-color: var(--ax-border-neutral-subtleA);
 
   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);
   }
 }