Version Packages (#3392)

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

.github/workflows/aksel-dev.yml

@@ -34,9 +34,6 @@ jobs:
       - name: Install dependencies
         run: yarn
 
-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
       - name: Build application
         env:
           SANITY_READ: ${{ secrets.SANITY_READ }}

.github/workflows/aksel-prod.yml

@@ -32,9 +32,6 @@ jobs:
           yarn boot
           yarn docgen
 
-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
       - name: Update sanity sync
         env:
           SANITY_WRITE: ${{ secrets.SANITY_WRITE }}
@@ -71,9 +68,6 @@ jobs:
       - name: Tests
         run: yarn workspace website test
 
-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
       - name: Build application
         env:
           SANITY_READ: ${{ secrets.SANITY_READ }}

.github/workflows/backup-sanity.yml

@@ -23,9 +23,6 @@ jobs:
       - name: Install dependencies
         run: cd aksel.nav.no/website && yarn
 
-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
       - name: Export dataset
         env:
           SANITY_READ: ${{ secrets.SANITY_READ }}

.github/workflows/chromatic.yml

@@ -56,20 +56,11 @@ jobs:
           buildScriptName: "build:storybook-chromatic"
           onlyChanged: true
           untraced: "**/package.json|yarn.lock|**/*.md"
-          externals: \@navikt/core/css/**/*.css
+          externals: "**/core/css/*.css|**/core/css/baseline/*.css|**/core/css/form/*.css|**/core/css/primitives/*.css"
           traceChanged: true
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}
 
-      - name: replace storybook url
-        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
-        uses: frabert/replace-string-action@v2
-        id: storybook_url
-        with:
-          pattern: "(iframe.html)"
-          string: ${{ steps.chromatic_tests.outputs.storybookUrl }}
-          replace-with: ""
-
       - name: Get commit sha
         if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
         id: vars
@@ -93,7 +84,7 @@ jobs:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
           body: |
-            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})
+            ## [Storybook demo](${{steps.chromatic_tests.outputs.storybookUrl}})
 
             [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
           edit-mode: replace
@@ -105,9 +96,12 @@ jobs:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
           body: |
-            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})
+            ## [Storybook demo](${{steps.chromatic_tests.outputs.storybookUrl}}) / [Chromatic](${{steps.chromatic_tests.outputs.url}})
 
-            ### [Endringer til review](${{steps.chromatic_tests.outputs.url}}): ${{steps.chromatic_tests.outputs.changeCount}}
+            ### 📝 Endringer til review: ${{steps.chromatic_tests.outputs.changeCount}}
+
+            ${{ steps.chromatic_tests.outputs.errorCount > 0 && format('### ❌ Stories med feil: {0}', steps.chromatic_tests.outputs.errorCount) || '' }}
+            ${{ steps.chromatic_tests.outputs.interactionTestFailuresCount > 0 && format('### ❌ Feilede interaksjonstester: {0}', steps.chromatic_tests.outputs.interactionTestFailuresCount) || '' }}
 
             [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
           edit-mode: replace

.github/workflows/e2e.yml

@@ -31,9 +31,6 @@ jobs:
         run: |
           yarn boot
 
-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
       - name: Build application
         env:
           SANITY_READ: ${{ secrets.SANITY_READ }}

.husky/post-checkout

@@ -0,0 +1,9 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+CHANGED=`git diff $1 $2 --stat -- yarn.lock | wc -l`
+if [ $CHANGED -gt 0 ];
+then
+    echo
+    echo "*** 🟡 yarn.lock has changed 🟡 ***"
+fi

.husky/post-merge

@@ -0,0 +1,9 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+CHANGED=`git diff HEAD@{1} --stat -- yarn.lock | wc -l`
+if [ $CHANGED -gt 0 ];
+then
+    echo
+    echo "*** 🟡 yarn.lock has changed 🟡 ***"
+fi

.storybook/main.ts

@@ -71,7 +71,11 @@ export default {
         },
       },
     },
-    "storybook-addon-pseudo-states",
+    /**
+     * https://github.com/chromaui/storybook-addon-pseudo-states/issues/101
+     * Currently disabled to avoid interference with darkmode update
+     */
+    /* "storybook-addon-pseudo-states", */
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.jsx

@@ -1,78 +0,0 @@
-import { withThemeByClassName } from "@storybook/addon-themes";
-import React, { useLayoutEffect } from "react";
-import darksideCss from "@navikt/ds-css/darkside/index.css?inline";
-import defaultCss from "@navikt/ds-css/index.css?inline";
-import "./layout.css";
-
-export const parameters = {
-  options: {
-    storySort: {
-      method: "alphabetical",
-      order: [
-        "Getting started",
-        "ds-react",
-        ["Primitives"],
-        ["Default", "Controls"],
-        "Aksel-icons",
-      ],
-    },
-  },
-  layout: "centered",
-  backgrounds: { disable: true },
-};
-
-export const globalTypes = {
-  mode: {
-    name: "Darkside",
-    toolbar: {
-      items: [
-        {
-          value: "default",
-          icon: "hourglass",
-          title: "Default (old)",
-        },
-        { value: "darkside", icon: "beaker", title: "Darkside (new)" },
-      ],
-      showName: true,
-      dynamicTitle: true,
-    },
-  },
-};
-
-export const initialGlobals = {
-  mode: "default",
-};
-
-const ModeDecorator = ({ children, mode }) => {
-  useLayoutEffect(() => {
-    const style = document.createElement("style");
-    style.innerHTML = mode === "darkside" ? darksideCss : defaultCss;
-    document.head.appendChild(style);
-
-    if (mode === "darkside") {
-      document.body.style.setProperty("background", "var(--ax-bg-default)");
-    }
-
-    return () => {
-      document.head.removeChild(style);
-      document.body.style.removeProperty("background");
-    };
-  }, [mode]);
-
-  return children;
-};
-
-export const decorators = [
-  (StoryFn, context) => (
-    <ModeDecorator mode={context.globals.mode}>
-      <StoryFn />
-    </ModeDecorator>
-  ),
-  withThemeByClassName({
-    themes: {
-      light: "light",
-      dark: "dark",
-    },
-    defaultTheme: "light",
-  }),
-];

.storybook/preview.tsx

@@ -0,0 +1,128 @@
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { Preview } from "@storybook/react";
+import React, { useLayoutEffect } from "react";
+// @ts-expect-error - Temporary
+import darksideCss from "@navikt/ds-css/darkside/index.css?inline";
+// @ts-expect-error - Temporary
+import defaultCss from "@navikt/ds-css/index.css?inline";
+import { UNSAFE_AkselTheme } from "../@navikt/core/react/src/provider";
+import UNSAFE_AkselLanguageProvider from "../@navikt/core/react/src/provider/i18n/LanguageProvider";
+import en from "../@navikt/core/react/src/util/i18n/locales/en";
+import nb from "../@navikt/core/react/src/util/i18n/locales/nb";
+import nn from "../@navikt/core/react/src/util/i18n/locales/nn";
+import "./layout.css";
+
+const ModeDecorator = ({ children, mode, theme }) => {
+  useLayoutEffect(() => {
+    const style = document.createElement("style");
+    style.innerHTML = mode === "darkside" ? darksideCss : defaultCss;
+    document.head.appendChild(style);
+
+    if (mode === "darkside") {
+      document.body.style.setProperty("background", "var(--ax-bg-default)");
+    }
+
+    return () => {
+      document.head.removeChild(style);
+      document.body.style.removeProperty("background");
+    };
+  }, [mode]);
+
+  return mode === "darkside" ? (
+    <UNSAFE_AkselTheme theme={theme || undefined} hasBackground={false}>
+      {children}
+    </UNSAFE_AkselTheme>
+  ) : (
+    children
+  );
+};
+
+const translations = {
+  nb,
+  nn,
+  en,
+};
+
+const LanguageDecorator = ({ children, language }) => {
+  if (language) {
+    return (
+      <UNSAFE_AkselLanguageProvider translations={translations[language]}>
+        {children}
+      </UNSAFE_AkselLanguageProvider>
+    );
+  }
+  return children;
+};
+
+export default {
+  parameters: {
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: [
+          "Getting started",
+          "ds-react",
+          ["Primitives"],
+          ["Default", "Controls"],
+          "Aksel-icons",
+        ],
+      },
+    },
+    layout: "centered",
+    backgrounds: { disable: true },
+  },
+
+  globalTypes: {
+    mode: {
+      name: "Darkside",
+      toolbar: {
+        items: [
+          {
+            value: "default",
+            icon: "hourglass",
+            title: "Default (old)",
+          },
+          { value: "darkside", icon: "beaker", title: "Darkside (new)" },
+        ],
+        showName: true,
+        dynamicTitle: true,
+      },
+    },
+    language: {
+      toolbar: {
+        icon: "globe",
+        items: [
+          { value: undefined, title: "Unset" },
+          { value: "nb", right: "🇳🇴", title: "Norsk bokmål" },
+          { value: "nn", right: "🇳🇴", title: "Norsk nynorsk" },
+          { value: "en", right: "🇬🇧", title: "English" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  initialGlobals: {
+    mode: "default",
+  },
+
+  decorators: [
+    (StoryFn, context) => (
+      <ModeDecorator mode={context.globals.mode} theme={context.globals.theme}>
+        <StoryFn />
+      </ModeDecorator>
+    ),
+    (StoryFn, context) => (
+      <LanguageDecorator language={context.globals.language}>
+        <StoryFn />
+      </LanguageDecorator>
+    ),
+    withThemeByClassName({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],
+} satisfies Preview;

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
-  "cssVariables.lookupFiles": ["@navikt/core/css/dist/index.css"],
+  "cssVariables.lookupFiles": [
+    "@navikt/core/tokens/dist/tokens.css",
+    "@navikt/core/tokens/dist/darkside/tokens.css"
+  ],
   "eslint.problems.shortenToSingleLine": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "files.watcherExclude": {

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel-icons
 
+## 7.5.3
+
+## 7.5.2
+
+## 7.5.1
+
+## 7.5.0
+
+### Minor Changes
+
+- Icons: 🎉 Added FileJpeg, FilePng and MedicalThermometer. ([#3332](https://github.com/navikt/aksel/pull/3332))
+
+## 7.4.3
+
 ## 7.4.2
 
 ## 7.4.1

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

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.20973 16.193H9.90274C10.1267 16.193 10.3041 16.1323 10.4347 16.011C10.5701 15.885 10.6377 15.7193 10.6377 15.514C10.6377 15.3087 10.5701 15.1453 10.4347 15.024C10.3041 14.898 10.1267 14.835 9.90274 14.835H9.20973V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H14C14.1989 3.25 14.3897 3.32902 14.5303 3.46967L18.5303 7.46967C18.671 7.61032 18.75 7.80109 18.75 8V12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13C2.25 12.5858 2.58579 12.25 3 12.25H5.25V4.5ZM6.75 12.25H17.25V8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V4.75H6.75V12.25ZM14.75 5.81066L16.1893 7.25H14.75V5.81066ZM5.18047 19.077C4.6438 19.077 4.2168 18.9323 3.89947 18.643C3.5868 18.349 3.43047 17.9547 3.43047 17.46H4.48047C4.48047 17.6747 4.54347 17.8473 4.66947 17.978C4.79547 18.104 4.9658 18.167 5.18047 18.167C5.39514 18.167 5.56547 18.1063 5.69147 17.985C5.81747 17.859 5.88047 17.6887 5.88047 17.474V14.87H4.72547V13.89H6.93047V17.474C6.93047 17.9687 6.77414 18.3607 6.46147 18.65C6.1488 18.9347 5.7218 19.077 5.18047 19.077ZM8.15973 19V13.89H9.90274C10.2621 13.89 10.5747 13.9577 10.8407 14.093C11.1114 14.2283 11.3191 14.4173 11.4637 14.66C11.6131 14.9027 11.6877 15.1873 11.6877 15.514C11.6877 15.836 11.6131 16.1207 11.4637 16.368C11.3144 16.6107 11.1067 16.7997 10.8407 16.935C10.5747 17.0703 10.2621 17.138 9.90274 17.138H9.20973V19H8.15973ZM12.665 19V13.89H15.815V14.786H13.694V15.934H15.57V16.83H13.694V18.104H15.815V19H12.665ZM18.6403 19.07C18.2996 19.07 18.0009 19.007 17.7443 18.881C17.4876 18.7503 17.2869 18.5707 17.1423 18.342C17.0023 18.1087 16.9323 17.838 16.9323 17.53V15.36C16.9323 15.0473 17.0023 14.7767 17.1423 14.548C17.2869 14.3193 17.4876 14.142 17.7443 14.016C18.0009 13.8853 18.2996 13.82 18.6403 13.82C18.9856 13.82 19.2843 13.8853 19.5363 14.016C19.7929 14.142 19.9913 14.3193 20.1313 14.548C20.2759 14.7767 20.3483 15.0473 20.3483 15.36H19.2983C19.2983 15.1547 19.2399 14.9983 19.1233 14.891C19.0113 14.7837 18.8503 14.73 18.6403 14.73C18.4303 14.73 18.2669 14.7837 18.1503 14.891C18.0383 14.9983 17.9823 15.1547 17.9823 15.36V17.53C17.9823 17.7307 18.0383 17.887 18.1503 17.999C18.2669 18.1063 18.4303 18.16 18.6403 18.16C18.8503 18.16 19.0113 18.1063 19.1233 17.999C19.2399 17.887 19.2983 17.7307 19.2983 17.53V17.089H18.5423V16.2H20.3483V17.53C20.3483 17.838 20.2759 18.1087 20.1313 18.342C19.9913 18.5707 19.7929 18.7503 19.5363 18.881C19.2843 19.007 18.9856 19.07 18.6403 19.07Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,13 @@
+name: FileJpeg
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - jpg
+  - jpeg
+variant: Stroke
+updated_at: 06.11.2024
+created_at: 06.11.2024

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

@@ -0,0 +1,5 @@
+<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="M13 3.25C13.1381 3.25 13.25 3.36193 13.25 3.5V7.5C13.25 8.19036 13.8096 8.75 14.5 8.75H18.5C18.6381 8.75 18.75 8.86193 18.75 9V10.5C18.75 10.6381 18.6381 10.75 18.5 10.75H5.5C5.36193 10.75 5.25 10.6381 5.25 10.5V4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H13ZM15.1768 4.11612C15.0193 3.95863 14.75 4.07017 14.75 4.29289V7C14.75 7.13807 14.8619 7.25 15 7.25H17.7071C17.9298 7.25 18.0414 6.98072 17.8839 6.82322L15.1768 4.11612Z" fill="#23262A"/>
+<path d="M9.90274 16.193H9.20973V14.835H9.90274C10.1267 14.835 10.3041 14.898 10.4347 15.024C10.5701 15.1453 10.6377 15.3087 10.6377 15.514C10.6377 15.7193 10.5701 15.885 10.4347 16.011C10.3041 16.1323 10.1267 16.193 9.90274 16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 12.25C2.58579 12.25 2.25 12.5858 2.25 13V20C2.25 20.4142 2.58579 20.75 3 20.75H21C21.4142 20.75 21.75 20.4142 21.75 20V13C21.75 12.5858 21.4142 12.25 21 12.25H3ZM3.89947 18.643C4.2168 18.9323 4.6438 19.077 5.18047 19.077C5.7218 19.077 6.1488 18.9347 6.46147 18.65C6.77414 18.3607 6.93047 17.9687 6.93047 17.474V13.89H4.72547V14.87H5.88047V17.474C5.88047 17.6887 5.81747 17.859 5.69147 17.985C5.56547 18.1063 5.39514 18.167 5.18047 18.167C4.9658 18.167 4.79547 18.104 4.66947 17.978C4.54347 17.8473 4.48047 17.6747 4.48047 17.46H3.43047C3.43047 17.9547 3.5868 18.349 3.89947 18.643ZM8.15973 13.89V19H9.20973V17.138H9.90274C10.2621 17.138 10.5747 17.0703 10.8407 16.935C11.1067 16.7997 11.3144 16.6107 11.4637 16.368C11.6131 16.1207 11.6877 15.836 11.6877 15.514C11.6877 15.1873 11.6131 14.9027 11.4637 14.66C11.3191 14.4173 11.1114 14.2283 10.8407 14.093C10.5747 13.9577 10.2621 13.89 9.90274 13.89H8.15973ZM12.665 13.89V19H15.815V18.104H13.694V16.83H15.57V15.934H13.694V14.786H15.815V13.89H12.665ZM17.7443 18.881C18.0009 19.007 18.2996 19.07 18.6403 19.07C18.9856 19.07 19.2843 19.007 19.5363 18.881C19.7929 18.7503 19.9913 18.5707 20.1313 18.342C20.2759 18.1087 20.3483 17.838 20.3483 17.53V16.2H18.5423V17.089H19.2983V17.53C19.2983 17.7307 19.2399 17.887 19.1233 17.999C19.0113 18.1063 18.8503 18.16 18.6403 18.16C18.4303 18.16 18.2669 18.1063 18.1503 17.999C18.0383 17.887 17.9823 17.7307 17.9823 17.53V15.36C17.9823 15.1547 18.0383 14.9983 18.1503 14.891C18.2669 14.7837 18.4303 14.73 18.6403 14.73C18.8503 14.73 19.0113 14.7837 19.1233 14.891C19.2399 14.9983 19.2983 15.1547 19.2983 15.36H20.3483C20.3483 15.0473 20.2759 14.7767 20.1313 14.548C19.9913 14.3193 19.7929 14.142 19.5363 14.016C19.2843 13.8853 18.9856 13.82 18.6403 13.82C18.2996 13.82 18.0009 13.8853 17.7443 14.016C17.4876 14.142 17.2869 14.3193 17.1423 14.548C17.0023 14.7767 16.9323 15.0473 16.9323 15.36V17.53C16.9323 17.838 17.0023 18.1087 17.1423 18.342C17.2869 18.5707 17.4876 18.7503 17.7443 18.881Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,13 @@
+name: FileJpegFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - jpg
+  - jpeg
+variant: Fill
+updated_at: 06.11.2024
+created_at: 06.11.2024

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

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.0061 16.193H7.6991C7.9231 16.193 8.10043 16.1323 8.2311 16.011C8.36644 15.885 8.4341 15.7193 8.4341 15.514C8.4341 15.3087 8.36644 15.1453 8.2311 15.024C8.10043 14.898 7.9231 14.835 7.6991 14.835H7.0061V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H14C14.1989 3.25 14.3897 3.32902 14.5303 3.46967L18.5303 7.46967C18.671 7.61032 18.75 7.80109 18.75 8V12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13C2.25 12.5858 2.58579 12.25 3 12.25H5.25V4.5ZM6.75 12.25H17.25V8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V4.75H6.75V12.25ZM14.75 5.81066L16.1893 7.25H14.75V5.81066ZM5.9561 19V13.89H7.6991C8.05843 13.89 8.3711 13.9577 8.6371 14.093C8.90777 14.2283 9.11544 14.4173 9.2601 14.66C9.40944 14.9027 9.4841 15.1873 9.4841 15.514C9.4841 15.836 9.40944 16.1207 9.2601 16.368C9.11077 16.6107 8.9031 16.7997 8.6371 16.935C8.3711 17.0703 8.05843 17.138 7.6991 17.138H7.0061V19H5.9561ZM10.3214 19V13.89H11.5464L12.8694 17.845C12.8554 17.6723 12.839 17.474 12.8204 17.25C12.8017 17.0213 12.7854 16.795 12.7714 16.571C12.762 16.3423 12.7574 16.1487 12.7574 15.99V13.89H13.6814V19H12.4564L11.1474 15.045C11.1614 15.1943 11.1754 15.3717 11.1894 15.577C11.2034 15.7823 11.215 15.99 11.2244 16.2C11.2384 16.41 11.2454 16.5967 11.2454 16.76V19H10.3214ZM16.4366 19.07C16.096 19.07 15.7973 19.007 15.5406 18.881C15.284 18.7503 15.0833 18.5707 14.9386 18.342C14.7986 18.1087 14.7286 17.838 14.7286 17.53V15.36C14.7286 15.0473 14.7986 14.7767 14.9386 14.548C15.0833 14.3193 15.284 14.142 15.5406 14.016C15.7973 13.8853 16.096 13.82 16.4366 13.82C16.782 13.82 17.0806 13.8853 17.3326 14.016C17.5893 14.142 17.7876 14.3193 17.9276 14.548C18.0723 14.7767 18.1446 15.0473 18.1446 15.36H17.0946C17.0946 15.1547 17.0363 14.9983 16.9196 14.891C16.8076 14.7837 16.6466 14.73 16.4366 14.73C16.2266 14.73 16.0633 14.7837 15.9466 14.891C15.8346 14.9983 15.7786 15.1547 15.7786 15.36V17.53C15.7786 17.7307 15.8346 17.887 15.9466 17.999C16.0633 18.1063 16.2266 18.16 16.4366 18.16C16.6466 18.16 16.8076 18.1063 16.9196 17.999C17.0363 17.887 17.0946 17.7307 17.0946 17.53V17.089H16.3386V16.2H18.1446V17.53C18.1446 17.838 18.0723 18.1087 17.9276 18.342C17.7876 18.5707 17.5893 18.7503 17.3326 18.881C17.0806 19.007 16.782 19.07 16.4366 19.07Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,12 @@
+name: FilePng
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - png
+variant: Stroke
+updated_at: 06.11.2024
+created_at: 06.11.2024

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

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.25 3.5C13.25 3.36193 13.1381 3.25 13 3.25H6.5C5.80964 3.25 5.25 3.80964 5.25 4.5V10.5C5.25 10.6381 5.36193 10.75 5.5 10.75H18.5C18.6381 10.75 18.75 10.6381 18.75 10.5V9C18.75 8.86193 18.6381 8.75 18.5 8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V3.5Z" fill="#23262A"/>
+<path d="M14.75 4.29289C14.75 4.07017 15.0193 3.95863 15.1768 4.11612L17.8839 6.82322C18.0414 6.98072 17.9298 7.25 17.7071 7.25H15C14.8619 7.25 14.75 7.13807 14.75 7V4.29289Z" fill="#23262A"/>
+<path d="M7.0061 16.193H7.6991C7.9231 16.193 8.10043 16.1323 8.2311 16.011C8.36644 15.885 8.4341 15.7193 8.4341 15.514C8.4341 15.3087 8.36644 15.1453 8.2311 15.024C8.10043 14.898 7.9231 14.835 7.6991 14.835H7.0061V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 13C2.25 12.5858 2.58579 12.25 3 12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13ZM5.9561 19V13.89H7.6991C8.05843 13.89 8.3711 13.9577 8.6371 14.093C8.90777 14.2283 9.11544 14.4173 9.2601 14.66C9.40944 14.9027 9.4841 15.1873 9.4841 15.514C9.4841 15.836 9.40944 16.1207 9.2601 16.368C9.11077 16.6107 8.9031 16.7997 8.6371 16.935C8.3711 17.0703 8.05843 17.138 7.6991 17.138H7.0061V19H5.9561ZM10.3214 19V13.89H11.5464L12.8694 17.845C12.8554 17.6723 12.839 17.474 12.8204 17.25C12.8017 17.0213 12.7854 16.795 12.7714 16.571C12.762 16.3423 12.7574 16.1487 12.7574 15.99V13.89H13.6814V19H12.4564L11.1474 15.045C11.1614 15.1943 11.1754 15.3717 11.1894 15.577C11.2034 15.7823 11.215 15.99 11.2244 16.2C11.2384 16.41 11.2454 16.5967 11.2454 16.76V19H10.3214ZM16.4366 19.07C16.096 19.07 15.7973 19.007 15.5406 18.881C15.284 18.7503 15.0833 18.5707 14.9386 18.342C14.7986 18.1087 14.7286 17.838 14.7286 17.53V15.36C14.7286 15.0473 14.7986 14.7767 14.9386 14.548C15.0833 14.3193 15.284 14.142 15.5406 14.016C15.7973 13.8853 16.096 13.82 16.4366 13.82C16.782 13.82 17.0806 13.8853 17.3326 14.016C17.5893 14.142 17.7876 14.3193 17.9276 14.548C18.0723 14.7767 18.1446 15.0473 18.1446 15.36H17.0946C17.0946 15.1547 17.0363 14.9983 16.9196 14.891C16.8076 14.7837 16.6466 14.73 16.4366 14.73C16.2266 14.73 16.0633 14.7837 15.9466 14.891C15.8346 14.9983 15.7786 15.1547 15.7786 15.36V17.53C15.7786 17.7307 15.8346 17.887 15.9466 17.999C16.0633 18.1063 16.2266 18.16 16.4366 18.16C16.6466 18.16 16.8076 18.1063 16.9196 17.999C17.0363 17.887 17.0946 17.7307 17.0946 17.53V17.089H16.3386V16.2H18.1446V17.53C18.1446 17.838 18.0723 18.1087 17.9276 18.342C17.7876 18.5707 17.5893 18.7503 17.3326 18.881C17.0806 19.007 16.782 19.07 16.4366 19.07Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,12 @@
+name: FilePngFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - png
+variant: Fill
+updated_at: 06.11.2024
+created_at: 06.11.2024

@navikt/aksel-icons/icons/MedicalThermometer.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="M15.7626 3.17678C16.446 2.49336 17.554 2.49336 18.2374 3.17678L20.8232 5.76257C21.5066 6.44598 21.5066 7.55402 20.8232 8.23744L13.409 15.6517C12.7057 16.3549 11.7519 16.75 10.7574 16.75H8.31066L7.03033 18.0303C6.73744 18.3232 6.26256 18.3232 5.96967 18.0303C5.67678 17.7374 5.67678 17.2626 5.96967 16.9697L7.25 15.6893V13.2426C7.25 12.2481 7.64509 11.2943 8.34835 10.591L15.7626 3.17678ZM17.1768 4.23744C17.0791 4.13981 16.9209 4.13981 16.8232 4.23744L9.40901 11.6517C8.98705 12.0736 8.75 12.6459 8.75 13.2426V15.25H10.7574C11.3541 15.25 11.9264 15.0129 12.3483 14.591L19.7626 7.17678C19.8602 7.07915 19.8602 6.92086 19.7626 6.82323L17.1768 4.23744ZM17.0303 6.96967C17.3232 7.26256 17.3232 7.73744 17.0303 8.03033L14.0303 11.0303C13.7374 11.3232 13.2626 11.3232 12.9697 11.0303C12.6768 10.7374 12.6768 10.2626 12.9697 9.96967L15.9697 6.96967C16.2626 6.67678 16.7374 6.67678 17.0303 6.96967ZM5.03033 18.9697C5.32322 19.2626 5.32322 19.7374 5.03033 20.0303L4.03033 21.0303C3.73744 21.3232 3.26256 21.3232 2.96967 21.0303C2.67678 20.7374 2.67678 20.2626 2.96967 19.9697L3.96967 18.9697C4.26256 18.6768 4.73744 18.6768 5.03033 18.9697Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,15 @@
+name: MedicalThermometer
+category: Wellness
+sub_category: Equipment
+keywords:
+  - termometer
+  - lege
+  - umiddelbar hjelp
+  - helse
+  - health
+  - help
+  - doctor
+  - patient
+variant: Stroke
+updated_at: 14.10.2024
+created_at: 07.03.2023

@navikt/aksel-icons/icons/MedicalThermometerFill.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.2374 3.17687C17.554 2.49345 16.446 2.49345 15.7626 3.17687L8.34835 10.5911C7.64509 11.2943 7.25 12.2482 7.25 13.2427V15.6893L5.96967 16.9697C5.67678 17.2626 5.67678 17.7374 5.96967 18.0303C6.26256 18.3232 6.73744 18.3232 7.03033 18.0303L8.31057 16.7501H10.7574C11.7519 16.7501 12.7057 16.355 13.409 15.6517L20.8232 8.23753C21.5066 7.55411 21.5066 6.44608 20.8232 5.76266L18.2374 3.17687ZM17.0303 8.03033C17.3232 7.73744 17.3232 7.26256 17.0303 6.96967C16.7374 6.67678 16.2626 6.67678 15.9697 6.96967L12.9697 9.96967C12.6768 10.2626 12.6768 10.7374 12.9697 11.0303C13.2626 11.3232 13.7374 11.3232 14.0303 11.0303L17.0303 8.03033ZM5.03033 20.0303C5.32322 19.7374 5.32322 19.2626 5.03033 18.9697C4.73744 18.6768 4.26256 18.6768 3.96967 18.9697L2.96967 19.9697C2.67678 20.2626 2.67678 20.7374 2.96967 21.0303C3.26256 21.3232 3.73744 21.3232 4.03033 21.0303L5.03033 20.0303Z" fill="#23262A"/>
+</svg>

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

@@ -0,0 +1,15 @@
+name: MedicalThermometerFill
+category: Wellness
+sub_category: Equipment
+keywords:
+  - termometer
+  - lege
+  - umiddelbar hjelp
+  - helse
+  - health
+  - help
+  - doctor
+  - patient
+variant: Fill
+updated_at: 14.10.2024
+created_at: 07.03.2023

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "7.4.2",
+  "version": "7.5.3",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/aksel-stylelint
 
+## 7.5.3
+
+## 7.5.2
+
+## 7.5.1
+
+## 7.5.0
+
+## 7.4.3
+
 ## 7.4.2
 
 ## 7.4.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.4.2",
+  "version": "7.5.3",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^7.4.2",
-    "@navikt/ds-tokens": "^7.4.2",
+    "@navikt/ds-css": "^7.5.3",
+    "@navikt/ds-tokens": "^7.5.3",
     "concurrently": "9.0.1",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @navikt/aksel
 
+## 7.5.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.3
+
+## 7.5.2
+
+### Patch Changes
+
+- Updated dependencies [[`9c93342`](https://github.com/navikt/aksel/commit/9c9334289246103856c149f5ddcf93dc42087342)]:
+  - @navikt/ds-css@7.5.2
+
+## 7.5.1
+
+### Patch Changes
+
+- Chore: Manually bump version to sync npm and github-releases ([`aa7c2d9`](https://github.com/navikt/aksel/commit/aa7c2d9598434d6304432daa20e0a1eeedd03b1b))
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.1
+
+## 7.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.0
+
+## 7.4.3
+
+### Patch Changes
+
+- Updated dependencies [[`6d9f900`](https://github.com/navikt/aksel/commit/6d9f9001fed4ccfa4245ab97399b24012ceb9edf)]:
+  - @navikt/ds-css@7.4.3
+
 ## 7.4.2
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.4.2",
+  "version": "7.5.3",
   "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.4.2",
+    "@navikt/ds-css": "7.5.3",
     "axios": "1.7.4",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-css
 
+## 7.5.3
+
+## 7.5.2
+
+### Patch Changes
+
+- Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))
+
+## 7.5.1
+
+## 7.5.0
+
+## 7.4.3
+
+### Patch Changes
+
+- Table.ColumnHeader: Inherit text alignment in button ([#3319](https://github.com/navikt/aksel/pull/3319))
+
 ## 7.4.2
 
 ## 7.4.1

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

@@ -1,198 +1,182 @@
-.navds-accordion {
-  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
-}
-
-/*************************
- * Header *
- *************************/
+/* ---------------------------- Accordion header ---------------------------- */
 .navds-accordion__header {
-  --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
-
   width: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: var(--a-spacing-2);
-  padding: var(--a-spacing-3);
-  margin: 0;
+  gap: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3);
   text-align: left;
-  background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
   cursor: pointer;
   border: none;
   position: relative;
-  box-shadow: var(--__ac-accordion-header-shadow);
-  z-index: 1;
-}
+  border-radius: var(--ax-border-radius-large);
+  background: transparent;
+  color: var(--ax-text-accent);
 
-.navds-accordion__header:hover {
-  background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
-  text-decoration: underline;
-  color: var(--ac-accordion-header-text-hover, inherit);
-}
-
-.navds-accordion--small .navds-accordion__header {
-  padding: var(--a-spacing-2) var(--a-spacing-3);
-}
-
-.navds-accordion--medium .navds-accordion__header {
-  padding: var(--a-spacing-3);
-}
-
-.navds-accordion--large .navds-accordion__header {
-  padding: var(--a-spacing-4) var(--a-spacing-3);
-}
-
-.navds-accordion__item:last-child > :where(.navds-accordion__header) {
-  box-shadow:
-    var(--__ac-accordion-header-shadow),
-    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
-
-.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
-  box-shadow:
-    inset 2px 0 0 0 var(--a-transparent),
-    inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
-
-.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
-  box-shadow:
-    inset 2px 0 0 0 var(--a-transparent),
-    inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--a-transparent),
-    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
-
-.navds-accordion__item--open > :where(.navds-accordion__header) {
-  box-shadow: var(--__ac-accordion-header-shadow);
-}
-
-.navds-accordion__header:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 3px;
-  box-shadow: var(--a-shadow-focus);
-  border-radius: var(--a-border-radius-large);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-accordion__header:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-    border-radius: var(--a-border-radius-large);
-  }
-}
-
-.navds-accordion__header-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/*************************
- * Icon *
- *************************/
-.navds-accordion__icon-wrapper {
-  display: grid;
-  place-content: center;
-  border-radius: var(--a-border-radius-medium);
-  height: var(--a-spacing-6);
-  width: var(--a-spacing-6);
-  align-self: center;
-}
-
-.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
-  background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
-}
-
-.navds-accordion__header-chevron {
-  border-radius: var(--a-border-radius-medium);
-  font-size: 1.5rem;
-  height: 1.75rem;
-  flex-shrink: 0;
-  transition: transform 150ms ease-in-out;
-  align-self: center;
-}
-
-:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
-  transform: translateY(1px);
-}
-
-.navds-accordion__item--open
-  > :where(.navds-accordion__header)
-  > :where(.navds-accordion__icon-wrapper)
-  > :where(.navds-accordion__header-chevron) {
-  transform: translateY(0) rotate(-180deg);
-}
-
-.navds-accordion__item--open
-  > :where(.navds-accordion__header):hover
-  > :where(.navds-accordion__icon-wrapper)
-  > :where(.navds-accordion__header-chevron) {
-  transform: translateY(-1px) rotate(-180deg);
-}
-
-/*************************
- * Variant/Default *
- *************************/
-.navds-accordion__item--open {
-  background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
-}
-
-/*************************
- * Variant/Neutral *
- *************************/
-.navds-accordion__item--open.navds-accordion__item--neutral {
-  background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
-}
-
-/*************************
- * Content *
- *************************/
-
-.navds-accordion__content {
-  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5);
-  animation: fadeAccordionContent 250ms ease;
-}
-
-.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
-  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
-}
-
-.navds-accordion__content--closed {
-  display: none;
-}
-
-.navds-accordion__item--no-animation :where(.navds-accordion__content) {
-  animation: none;
-}
-
-@keyframes fadeAccordionContent {
-  0% {
-    opacity: 0.25;
-    transform: translateY(-8px);
+  > * {
+    font-weight: var(--ax-font-weight-regular);
   }
 
-  40% {
-    opacity: 0.7;
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-accordion__header {
+  @media (forced-colors: active) {
     border: 1px solid buttonborder;
     background-color: canvas;
     color: canvastext;
   }
 
-  .navds-accordion__header:hover {
-    background-color: canvas;
-    border: 1px solid highlight;
-    color: highlight;
+  &:hover {
+    background-color: var(--ax-bg-accent-hoverA);
+    color: var(--ax-text-accent-strong);
+
+    &::before,
+    &::after {
+      display: none;
+    }
+
+    > .navds-accordion__icon-wrapper {
+      background-color: var(--ax-bg-accent-strong-hover);
+      color: var(--ax-text-accent-contrast);
+    }
+
+    @media (forced-colors: active) {
+      background-color: canvas;
+      border: 1px solid highlight;
+      color: highlight;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    z-index: 1;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.navds-accordion--small .navds-accordion__header {
+  padding-block: var(--a-spacing-2);
+}
+
+.navds-accordion__header::before,
+.navds-accordion__header::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  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;
+}
+
+.navds-accordion__header::after {
+  top: initial;
+  bottom: 0;
+}
+
+.navds-accordion__item[data-expanded="true"] > .navds-accordion__header::after,
+.navds-accordion__item:not(:last-child) > .navds-accordion__header::after {
+  display: none;
+}
+
+.navds-accordion__item[data-expanded="false"]:has(.navds-accordion__header:where(:hover, :focus-visible))
+  + .navds-accordion__item
+  > .navds-accordion__header::before {
+  display: none;
+}
+
+/* ------------------------- Accordion chevron icon ------------------------- */
+.navds-accordion__icon-wrapper {
+  border-radius: var(--ax-border-radius-large);
+  width: 22px;
+  height: 22px;
+  align-self: center;
+  background-color: var(--ax-bg-accent-moderateA);
+  color: var(--ax-text-accent-strong);
+}
+
+.navds-accordion__header-chevron {
+  height: inherit;
+  width: inherit;
+  flex-shrink: 0;
+  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.navds-accordion__item[data-expanded="true"] > .navds-accordion__header .navds-accordion__header-chevron {
+  transform: rotateX(-180deg);
+}
+
+/* ---------------------------- 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);
+
+  @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);
+}
+
+@starting-style {
+  .navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content {
+    padding-block: 0;
+    max-height: 0;
+    border-color: transparent;
   }
 }

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

@@ -1,152 +1,137 @@
+/* --------------------------- ActionMenu content --------------------------- */
 .navds-action-menu__content {
   overflow: hidden;
-  box-shadow: var(--a-shadow-medium);
-  border-radius: var(--a-border-radius-large);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-subtleA);
+
+  /* TODO: Use token here when added */
+  box-shadow:
+    0 0 1px 0 rgb(7 9 13/ 0.02),
+    0 2px 5px 0 rgb(7 9 13/ 0.1),
+    0 10px 16px 0 rgb(7 9 13/ 0.12);
+  transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
+
+  &[data-state="open"] {
+    &[data-side="bottom"] {
+      @starting-style {
+        transform: translateY(-4px);
+      }
+    }
+
+    &[data-side="top"] {
+      @starting-style {
+        transform: translateY(4px);
+      }
+    }
+
+    &[data-side="right"] {
+      @starting-style {
+        transform: translateX(-4px);
+      }
+    }
+
+    &[data-side="left"] {
+      @starting-style {
+        transform: translateX(4px);
+      }
+    }
+  }
 }
 
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
 .navds-action-menu__content > .navds-action-menu__content-inner {
-  --__ac-action-menu-content-p: var(--a-spacing-2);
-  --__ac-action-menu-item-pr: var(--a-spacing-3);
-  --__ac-action-menu-item-pl: var(--a-spacing-2);
-  --__ac-action-menu-item-height: 2rem;
+  --__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-item-height: 2rem;
 
-  border-radius: var(--a-border-radius-large);
-  background-color: var(--a-surface-default);
+  border-radius: var(--ax-border-radius-large);
+  background-color: var(--ax-bg-raised);
   min-width: 128px;
   max-width: min(95vw, 640px);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   transform-origin: var(--__ac-action-menu-content-transform-origin);
   animation-duration: 160ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  padding: var(--__ac-action-menu-content-p);
+  padding: var(--__axc-action-menu-content-p);
   overflow: auto;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   max-height: var(--__ac-action-menu-content-available-height);
 }
 
-.navds-action-menu__content:where([data-state="open"]):where([data-side="bottom"]) {
-  animation-name: aksel-action-from-bottom, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="top"]) {
-  animation-name: aksel-action-from-top, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="left"]) {
-  animation-name: aksel-action-from-left, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="right"]) {
-  animation-name: aksel-action-from-right, aksel-action-fade-in;
-}
-
-@keyframes aksel-action-from-bottom {
-  from {
-    transform: translateY(-4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-top {
-  from {
-    transform: translateY(4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-left {
-  from {
-    transform: translateX(4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-right {
-  from {
-    transform: translateX(-4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-fade-in {
-  from {
-    opacity: 0.01;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
+/* ----------------------------- ActionMenu Item ---------------------------- */
 .navds-action-menu__item {
   display: flex;
   align-items: center;
-  gap: var(--a-spacing-2);
-  min-height: var(--__ac-action-menu-item-height);
+  gap: var(--ax-spacing-2);
+  min-height: var(--__axc-action-menu-item-height);
   cursor: default;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-medium);
   position: relative;
-  padding-left: var(--__ac-action-menu-item-pl);
-  padding-right: var(--__ac-action-menu-item-pr);
-  font-size: var(--a-font-size-medium);
-  scroll-margin-block: var(--__ac-action-menu-content-p);
+  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(--a-text-default);
+  color: var(--ax-text-default);
   text-decoration: none;
-}
 
-.navds-action-menu__item svg {
-  flex-shrink: 0;
+  & svg {
+    flex-shrink: 0;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-default);
+  }
+
+  &[aria-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }
 
 .navds-action-menu__item--has-icon {
-  --__ac-action-menu-item-pl: var(--a-spacing-6);
+  --__axc-action-menu-item-pl: var(--ax-spacing-6);
 }
 
 .navds-action-menu__sub-trigger {
-  --__ac-action-menu-item-pr: var(--a-spacing-05);
-}
+  --__axc-action-menu-item-pr: var(--ax-spacing-05);
 
-.navds-action-menu__item:focus {
-  outline: none;
-  background-color: var(--a-surface-action-subtle-hover);
-  color: var(--a-text-default);
+  &[data-state="open"] {
+    background-color: var(--ax-bg-neutral-moderate-pressed);
+  }
+
+  &:focus {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+  }
 }
 
 .navds-action-menu__item--danger {
-  color: var(--a-text-danger);
-}
+  color: var(--ax-text-danger);
 
-.navds-action-menu__item--danger:focus {
-  background-color: var(--a-surface-danger-subtle);
+  &:focus {
+    background-color: var(--ax-bg-danger-moderate-hoverA);
+    color: var(--ax-text-danger-strong);
+  }
 }
 
+/* ---------------------------- ActionMenu marker --------------------------- */
 .navds-action-menu__marker {
   display: flex;
   align-items: center;
-  gap: var(--a-spacing-1);
+  gap: var(--ax-spacing-1);
 }
 
 .navds-action-menu__marker--right {
   margin-left: auto;
-  padding-left: var(--a-spacing-4);
+  padding-left: var(--ax-spacing-4);
 }
 
 .navds-action-menu__marker--left {
   position: absolute;
   left: 0;
-  width: var(--__ac-action-menu-item-pl);
+  width: var(--__axc-action-menu-item-pl);
   display: inline-flex;
   justify-content: center;
 }
@@ -156,47 +141,42 @@
   flex-shrink: 0;
 }
 
+/* --------------------------- ActionMenu shortcut -------------------------- */
 .navds-action-menu__shortcut {
-  background-color: var(--a-surface-neutral-subtle);
-  color: var(--a-text-default);
-  border-radius: var(--a-border-radius-small);
-  padding: 0 var(--a-spacing-1);
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-small);
+  padding: 0 var(--ax-spacing-1);
   min-width: 1.125rem;
   height: 1.125rem;
   line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--a-font-size-small);
+  font-size: var(--ax-font-size-small);
 }
 
+/* ---------------------------- ActionMenu Grouping ---------------------------- */
 .navds-action-menu__label {
   display: flex;
   align-items: center;
-  min-height: calc(var(--__ac-action-menu-item-height) - 6px);
-  padding-right: var(--__ac-action-menu-item-pr);
-  padding-left: var(--__ac-action-menu-item-pl);
-  color: var(--a-text-subtle);
-  border-radius: var(--a-border-radius-medium);
+  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);
+  border-radius: var(--ax-border-radius-medium);
   user-select: none;
   cursor: default;
-  font-size: var(--a-font-size-small);
+  font-size: var(--ax-font-size-small);
 }
 
 .navds-action-menu__divider {
   height: 1px;
-  margin-block: var(--a-spacing-2);
-  background-color: var(--a-border-divider);
+  margin-block: var(--ax-spacing-2);
+  background-color: var(--ax-border-subtleA);
 }
 
-.navds-action-menu__indicator {
-  display: grid;
-  place-content: center;
-}
-
-.navds-action-menu__indicator-icon {
-  font-size: 14px;
-}
+/* -------------------------- ActionMenu indicator -------------------------- */
 
 .navds-action-menu__indicator-icon--unchecked,
 .navds-action-menu__indicator-icon--checked,
@@ -204,24 +184,23 @@
   display: none;
 }
 
-.navds-action-menu__indicator[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
-  display: block;
+.navds-action-menu__indicator {
+  display: grid;
+  place-content: center;
+
+  &[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
+    display: block;
+  }
+
+  &[data-state="checked"] .navds-action-menu__indicator-icon--checked {
+    display: block;
+  }
+
+  &[data-state="indeterminate"] .navds-action-menu__indicator-icon--indeterminate {
+    display: block;
+  }
 }
 
-.navds-action-menu__indicator:where([data-state="checked"]) .navds-action-menu__indicator-icon--checked {
-  display: block;
-}
-
-.navds-action-menu__indicator:where([data-state="indeterminate"]) .navds-action-menu__indicator-icon--indeterminate {
-  display: block;
-}
-
-.navds-action-menu__item:where([aria-disabled="true"]) {
-  color: var(--a-text-subtle);
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.navds-action-menu__sub-trigger:where([data-state="open"]) {
-  background-color: var(--a-surface-neutral-subtle);
+.navds-action-menu__indicator-icon {
+  font-size: 14px;
 }

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

@@ -1,101 +1,89 @@
 .navds-alert {
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid;
-  padding: var(--a-spacing-4);
+  padding: var(--ax-spacing-4);
   display: flex;
-  gap: var(--a-spacing-3);
+  gap: var(--ax-spacing-3);
   align-items: center;
-}
 
-.navds-alert--small.navds-alert--close-button {
-  align-items: flex-start;
+  @media (forced-colors: active) {
+    border: 1px solid canvastext;
+    background-color: canvas;
+    color: canvastext;
+  }
 }
 
 .navds-alert__wrapper--maxwidth {
   max-width: 43.5rem;
 }
 
-.navds-alert--close-button > .navds-alert__wrapper {
-  margin-block-start: var(--a-spacing-05);
-}
-
-.navds-alert--small.navds-alert--close-button > .navds-alert__wrapper {
-  margin-block-start: var(--a-spacing-1);
+.navds-alert__icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  align-self: flex-start;
+  height: var(--ax-font-line-height-xlarge);
 }
 
 .navds-alert--small {
-  padding: var(--a-spacing-2) var(--a-spacing-4);
-  gap: var(--a-spacing-2);
+  padding: var(--ax-spacing-2) var(--ax-spacing-4);
+  gap: var(--ax-spacing-2);
+
+  > .navds-alert__icon {
+    margin-block-start: 0;
+    height: var(--ax-font-line-height-large);
+  }
 }
 
+/* ----------------------------- Alert variants ----------------------------- */
+.navds-alert--info {
+  border-color: var(--ax-border-info);
+  background-color: var(--ax-bg-info-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-info-icon);
+  }
+}
+
+.navds-alert--success {
+  border-color: var(--ax-border-success);
+  background-color: var(--ax-bg-success-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-success-icon);
+  }
+}
+
+.navds-alert--warning {
+  border-color: var(--ax-border-warning);
+  background-color: var(--ax-bg-warning-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-warning-icon);
+  }
+}
+
+.navds-alert--error {
+  border-color: var(--ax-border-danger);
+  background-color: var(--ax-bg-danger-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-danger-icon);
+  }
+}
+
+/* ----------------------------- Alert fullwidth ---------------------------- */
 .navds-alert--full-width {
   border-radius: 0;
 }
 
-.navds-alert > .navds-alert__icon {
-  flex-shrink: 0;
-  font-size: 1.5rem;
-  align-self: flex-start;
-  height: var(--a-font-line-height-xlarge);
-  background: radial-gradient(circle, var(--a-surface-default) 47%, 0, transparent);
-}
-
-.navds-alert--small > .navds-alert__icon {
-  margin-block-start: 0;
-  height: var(--a-font-line-height-large);
-}
-
-.navds-alert--close-button > .navds-alert__icon {
-  margin-block-start: var(--a-spacing-05);
-}
-
-.navds-alert--small.navds-alert--close-button > .navds-alert__icon {
-  margin-block-start: var(--a-spacing-1);
-}
-
-.navds-alert--error {
-  border-color: var(--ac-alert-error-border, var(--a-border-danger));
-  background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
-}
-
-.navds-alert--error > .navds-alert__icon {
-  color: var(--ac-alert-icon-error-color, var(--a-icon-danger));
-}
-
-.navds-alert--warning {
-  border-color: var(--ac-alert-warning-border, var(--a-border-warning));
-  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
-}
-
-.navds-alert--warning > .navds-alert__icon {
-  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 30%, 0, transparent);
-  color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
-}
-
-.navds-alert--info {
-  border-color: var(--ac-alert-info-border, var(--a-border-info));
-  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
-}
-
-.navds-alert--info > .navds-alert__icon {
-  color: var(--ac-alert-icon-info-color, var(--a-icon-info));
-}
-
-.navds-alert--success {
-  border-color: var(--ac-alert-success-border, var(--a-border-success));
-  background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
-}
-
-.navds-alert--success > .navds-alert__icon {
-  color: var(--ac-alert-icon-success-color, var(--a-icon-success));
-}
-
+/* ------------------------------ Alert inline ------------------------------ */
 .navds-alert--inline {
   background-color: transparent;
   border: none;
   padding: 0;
 }
 
+/* ------------------------- Alert with close button ------------------------ */
 .navds-alert__button-wrapper {
   align-self: flex-start;
   flex: 1;
@@ -104,10 +92,24 @@
   justify-content: flex-end;
 }
 
-@media (forced-colors: active) {
-  .navds-alert {
-    border: 1px solid canvastext;
-    background-color: canvas;
-    color: canvastext;
+.navds-alert--close-button {
+  > .navds-alert__wrapper {
+    margin-block-start: var(--ax-spacing-05);
+  }
+
+  > .navds-alert__icon {
+    margin-block-start: var(--ax-spacing-05);
+  }
+
+  &.navds-alert--small {
+    align-items: flex-start;
+
+    > .navds-alert__wrapper {
+      margin-block-start: var(--ax-spacing-1);
+    }
+
+    > .navds-alert__icon {
+      margin-block-start: var(--ax-spacing-1);
+    }
   }
 }

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

@@ -1,12 +1,15 @@
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
-
-/* To support nested theming, we want to declare color on each scoped elements */
-:root,
-:host,
-.light {
+.navds-theme {
   color: var(--ax-text-default);
-}
 
-.dark {
-  color: var(--ax-text-default);
+  &[data-background="true"] {
+    background-color: var(--ax-bg-default);
+  }
+
+  &.light {
+    color-scheme: light;
+  }
+
+  &.dark {
+    color-scheme: dark;
+  }
 }

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

@@ -35,13 +35,13 @@
 }
 
 .navds-button:focus-visible {
-  outline: 4px solid var(--ax-border-focus);
+  outline: 2px solid var(--ax-border-focus);
   outline-offset: 2px;
 }
 
 @supports not selector(:focus-visible) {
   .navds-button:focus {
-    outline: 4px solid var(--ax-border-focus);
+    outline: 2px solid var(--ax-border-focus);
   }
 }
 
@@ -137,7 +137,7 @@
 
 .navds-button--secondary:hover {
   background-color: var(--ax-bg-accent-moderate-hoverA);
-  color: var(--ax-bg-accent-strong-hover);
+  color: var(--ax-text-accent-strong);
   box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
 }
 
@@ -159,12 +159,13 @@
 
 .navds-button--secondary-neutral {
   background-color: transparent;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   box-shadow: inset 0 0 0 2px var(--ax-border-neutral);
 }
 
 .navds-button--secondary-neutral:hover {
   background-color: var(--ax-bg-neutral-moderate-hoverA);
+  color: var(--ax-text-neutral-strong);
 }
 
 .navds-button--secondary-neutral:active {
@@ -191,7 +192,7 @@
 
 .navds-button--tertiary:hover {
   background-color: var(--ax-bg-accent-hoverA);
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-strong);
 }
 
 .navds-button--tertiary:active {
@@ -217,11 +218,12 @@
  ****************************/
 
 .navds-button--tertiary-neutral {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-button--tertiary-neutral:hover {
   background-color: var(--ax-bg-neutral-hoverA);
+  color: var(--ax-text-neutral-strong);
 }
 
 .navds-button--tertiary-neutral:active {

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

@@ -1,33 +1,30 @@
 .navds-chat {
   display: flex;
   align-items: flex-end;
-  gap: var(--a-spacing-3);
+  gap: var(--ax-spacing-3);
   max-width: 40.75rem;
 }
 
 .navds-chat--right {
   flex-direction: row-reverse;
+
+  & .navds-chat__bubble-wrapper {
+    align-items: flex-end;
+  }
+
+  & .navds-chat__bubble {
+    border-radius: var(--ax-border-radius-xlarge);
+    border-bottom-right-radius: var(--ax-border-radius-small);
+  }
 }
 
-.navds-chat__bubble-wrapper {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--a-spacing-3);
-}
-
-.navds-chat--right .navds-chat__bubble-wrapper {
-  align-items: flex-end;
-}
-
+/* ------------------------------- Chat avatar ------------------------------ */
 .navds-chat__avatar {
   align-items: center;
-  box-shadow: var(--a-shadow-xsmall);
-  background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
-  border-radius: var(--a-border-radius-full);
-  color: var(--ac-chat-avatar-color, var(--a-text-default));
+  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);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -37,50 +34,61 @@
   line-height: 2.5rem; /* Makes text properly vertically centered in Chrome */
   font-size: 1.06rem;
   letter-spacing: 0.024rem;
+
+  & svg {
+    align-self: center;
+    width: 100%;
+    max-width: 1.5rem;
+    max-height: 1.5rem;
+  }
 }
 
-.navds-chat__avatar svg {
-  align-self: center;
-  width: 100%;
-  max-width: 1.5rem;
-  max-height: 1.5rem;
+/* ------------------------------- Chat bubble ------------------------------ */
+.navds-chat__bubble-wrapper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ax-spacing-3);
 }
 
 .navds-chat__bubble {
-  padding: var(--a-spacing-4);
-  box-shadow: var(--a-shadow-xsmall);
+  padding: var(--ax-spacing-4);
   width: fit-content;
-  background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
-  border-radius: var(--a-border-radius-xlarge);
-  border-bottom-left-radius: 2px;
+  background-color: var(--ax-bg-raised);
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-2);
-}
-
-.navds-chat--right .navds-chat__bubble {
-  border-radius: var(--a-border-radius-xlarge);
-  border-bottom-right-radius: 2px;
+  gap: var(--ax-spacing-2);
+  border-radius: var(--ax-border-radius-xlarge);
+  border-bottom-left-radius: var(--ax-border-radius-small);
+  border: 1px solid var(--ax-border-subtleA);
 }
 
 .navds-chat--small .navds-chat__bubble {
-  padding: var(--a-spacing-3);
+  padding: var(--ax-spacing-3);
 }
 
-.navds-chat--info .navds-chat__bubble,
-.navds-chat--info .navds-chat__avatar {
-  background-color: var(--a-surface-info-subtle);
+/* -------------------------- Chat bubble variants -------------------------- */
+.navds-chat--info {
+  & .navds-chat__bubble,
+  & .navds-chat__avatar {
+    background-color: var(--ax-bg-info-raised);
+  }
 }
 
-.navds-chat--subtle .navds-chat__bubble,
-.navds-chat--subtle .navds-chat__avatar {
-  background-color: var(--a-surface-default);
+.navds-chat--neutral {
+  & .navds-chat__bubble,
+  & .navds-chat__avatar {
+    background-color: var(--ax-bg-neutral-raised);
+  }
 }
 
+/* ------------------------------ Chat top text ----------------------------- */
 .navds-chat__top-text {
-  color: var(--ac-chat-top-text, var(--a-text-default));
+  color: var(--ax-text-default);
   display: flex;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
   align-items: baseline;
   font-weight: normal;
   margin: 0;
@@ -105,16 +113,3 @@
 .navds-chat--right .navds-chat__top-text--left {
   align-self: flex-start;
 }
-
-@media (forced-colors: active) {
-  .navds-chat__bubble,
-  .navds-chat__avatar {
-    border: 1px solid canvastext;
-    background-color: canvas;
-    color: canvastext;
-  }
-
-  .navds-chat__avatar svg {
-    forced-color-adjust: none;
-  }
-}

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

@@ -1,13 +1,13 @@
 .navds-chips {
   display: flex;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
   margin: 0;
   padding: 0;
   list-style: none;
   flex-wrap: wrap;
 }
 
-.navds-chips :where(li) {
+.navds-chips li {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -20,113 +20,122 @@
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: var(--a-spacing-05);
+  gap: var(--ax-spacing-05);
   margin: 0;
-  padding: 0 var(--a-spacing-3);
+  padding: 0 var(--ax-spacing-3);
   text-decoration: none;
-  border-radius: var(--a-border-radius-full);
+  border-radius: var(--ax-border-radius-full);
   min-height: 2rem;
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
 }
 
-.navds-chips--small .navds-chips__chip {
-  min-height: 1.5rem;
-  padding: 0 var(--a-spacing-2);
+.navds-chips--readonly {
+  .navds-chips__chip {
+    background-color: var(--ax-bg-neutral-moderateA);
+  }
 }
 
-.navds-chips__toggle {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
-  background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
-  color: var(--ac-chip-toggle-text, var(--a-text-default));
-}
-
-.navds-chips__toggle:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
-  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
-}
-
-.navds-chips__toggle[aria-pressed="true"] {
-  box-shadow: none;
-  background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
-  color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
-}
-
-.navds-chips__toggle[aria-pressed="true"]:hover {
-  background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
-}
-
-/* Toggle variant neutral */
-.navds-chips__toggle--neutral {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
-  background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
-}
-
-.navds-chips__toggle--neutral:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
-  background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-}
-
-.navds-chips__toggle--neutral[aria-pressed="true"] {
-  box-shadow: none;
-  background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
-  color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
-}
-
-.navds-chips__toggle--neutral[aria-pressed="true"]:hover {
-  background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
-}
-
-.navds-chips__toggle:focus-visible {
-  box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
-}
-
-.navds-chips__toggle[aria-pressed="true"]:focus-visible,
-.navds-chips__toggle:active:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-chips__toggle:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+.navds-chips--small {
+  .navds-chips__chip {
+    min-height: 1.5rem;
+    padding: 0 var(--ax-spacing-2);
   }
 
-  .navds-chips__toggle[aria-pressed="true"]:focus,
-  .navds-chips__toggle:active:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  .navds-chips__toggle-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .navds-chips__toggle--with-checkmark {
+    padding-left: var(--ax-spacing-1);
+  }
+
+  .navds-chips__removable-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .navds-chips__removable-icon > svg {
+    width: 1rem;
+  }
+
+  .navds-chips--icon-right {
+    padding-right: var(--ax-spacing-05);
+  }
+}
+
+/* ------------------------------ Chips Toggle ------------------------------ */
+.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);
+
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hover);
+  }
+
+  &[data-pressed="true"] {
+    box-shadow: none;
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+
+    &:hover {
+      background-color: var(--ax-bg-accent-strong-hover);
+    }
+  }
+}
+
+.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);
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hover);
+  }
+
+  &[data-pressed="true"] {
+    box-shadow: none;
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
+
+    &:hover {
+      background-color: var(--ax-bg-neutral-strong-hover);
+    }
   }
 }
 
 .navds-chips--medium .navds-chips__toggle--with-checkmark {
-  padding-left: var(--a-spacing-1-alt);
+  padding-left: var(--ax-spacing-1-alt);
 }
 
-.navds-chips--small .navds-chips__toggle--with-checkmark {
-  padding-left: var(--a-spacing-1);
-}
-
-.navds-chips--small .navds-chips__toggle-icon {
-  width: 1rem;
-  height: 1rem;
-}
+/* -------------------------- start old CSS --------------------------  */
 
+/* ----------------------------- Chips removable ---------------------------- */
 .navds-chips__removable {
   gap: 0;
 }
 
 .navds-chips__removable--action {
-  background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
-  color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
+  background: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-text-accent-contrast);
+
+  &:hover {
+    background: var(--ax-bg-accent-strong-hover);
+  }
 }
 
 .navds-chips__removable--neutral {
-  background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
-  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
+  background: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
+
+  &:hover {
+    background: var(--ax-bg-neutral-strong-hover);
+  }
 }
 
 .navds-chips__removable-icon {
@@ -135,100 +144,39 @@
   font-size: 1.25rem;
   display: grid;
   place-items: center;
-  border-radius: var(--a-border-radius-full);
-}
-
-.navds-chips--small .navds-chips__removable-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.navds-chips--small .navds-chips__removable-icon > svg {
-  width: 1rem;
-}
-
-.navds-chips__removable--action:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    0 0 0 2px var(--a-border-focus);
-}
-
-.navds-chips__removable--neutral:focus-visible {
-  box-shadow: 0 0 0 2px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-chips__removable--action:focus {
-    outline: none;
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      0 0 0 2px var(--a-border-focus);
-  }
-
-  .navds-chips__removable--neutral:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--a-border-focus);
-  }
-}
-
-.navds-chips__removable--action:hover {
-  background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
-}
-
-.navds-chips__removable--neutral:hover {
-  background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
+  border-radius: var(--ax-border-radius-full);
 }
 
 .navds-chips--icon-left {
-  padding-left: var(--a-spacing-1-alt);
+  padding-left: var(--ax-spacing-1-alt);
 }
 
 .navds-chips--icon-right {
-  padding-right: var(--a-spacing-1-alt);
-}
-
-.navds-chips--small .navds-chips--icon-right {
-  padding-right: var(--a-spacing-05);
+  padding-right: var(--ax-spacing-1-alt);
 }
 
 @media (forced-colors: active) {
   .navds-chips__chip {
     border: 1px solid transparent;
+
+    &:hover {
+      background-color: highlighttext;
+      color: highlight;
+    }
   }
 
-  .navds-chips__chip:hover {
-    background-color: highlighttext;
-    color: highlight;
-  }
-
-  .navds-chips__chip:focus-visible {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .navds-chips__chip:where([aria-pressed="true"], :active, :hover) > span {
+  .navds-chips__chip:where([data-pressed="true"], :active, :hover) > span {
     forced-color-adjust: none;
   }
 
-  .navds-chips__toggle:active {
-    background-color: highlight;
-    color: highlighttext;
-  }
-
-  .navds-chips__toggle[aria-pressed="true"] {
+  .navds-chips__toggle[data-pressed="true"] {
     background-color: selecteditem;
     color: selecteditemtext;
     border: 1px solid selecteditem;
-  }
 
-  .navds-chips__toggle[aria-pressed="true"]:hover {
-    background-color: selecteditemtext;
-    color: selecteditem;
-  }
-
-  .navds-chips__toggle[aria-pressed="true"]:active {
-    background-color: highlight;
-    color: highlighttext;
+    &:hover {
+      background-color: selecteditemtext;
+      color: selecteditem;
+    }
   }
 }

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

@@ -1,31 +1,42 @@
-[data-theme="dark"] {
-  --__ac-copybutton-action-text: var(--a-blue-300);
-  --__ac-copybutton-bg-hover: rgb(214 231 255 /0.13);
-  --__ac-copybutton-icon-success: rgb(51 170 95 /1);
-  --__ac-copybutton-neutral-text: rgb(231 240 254 /0.69);
-  --__ac-copybutton-text: rgb(251 252 254 /0.96);
-}
-
-[data-theme="light"] {
-  --__ac-copybutton-action-text: initial;
-  --__ac-copybutton-bg-hover: initial;
-  --__ac-copybutton-icon-success: initial;
-  --__ac-copybutton-neutral-text: initial;
-  --__ac-copybutton-text: initial;
-}
-
 .navds-copybutton {
-  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);
+  --__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;
-  background: none;
-  border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
-  padding: var(--__ac-copybutton-padding);
+  border-radius: var(--ax-border-radius-medium);
+  padding: var(--__axc-copybutton-padding);
   display: grid;
   place-content: center;
+  background-color: transparent;
+  transition: color 0.2s cubic-bezier(0.05, 0.7, 0.1, 1);
+
+  &.navds-copybutton--icon-only {
+    --__axc-copybutton-padding: var(--ax-spacing-3);
+  }
+
+  &.navds-copybutton--icon-right {
+    --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-5);
+  }
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  &:disabled:hover {
+    background-color: transparent;
+  }
 }
 
 @media (forced-colors: active) {
@@ -33,76 +44,82 @@
     background-color: ButtonFace;
     border: solid 1px ButtonText;
     color: ButtonText;
-  }
 
-  .navds-copybutton.navds-copybutton:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+    &:disabled {
+      opacity: 1;
+      border-color: GrayText;
+    }
   }
 }
 
-.navds-copybutton--icon-right {
-  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
-}
-
+/* -------------------------- CopyButton small size ------------------------- */
 .navds-copybutton--small {
-  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);
-
   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);
+  }
 }
 
-.navds-copybutton--small.navds-copybutton--icon-right {
-  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3);
-}
-
+/* ------------------------- CopyButton xsmall size ------------------------- */
 .navds-copybutton--xsmall {
-  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);
-
   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);
+  }
 }
 
-.navds-copybutton--xsmall.navds-copybutton--icon-right {
-  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2);
-}
-
-.navds-copybutton--icon-only {
-  --__ac-copybutton-padding: var(--a-spacing-3);
-}
-
-.navds-copybutton--small.navds-copybutton--icon-only {
-  --__ac-copybutton-padding: var(--a-spacing-1);
-}
-
-.navds-copybutton--xsmall.navds-copybutton--icon-only {
-  --__ac-copybutton-padding: var(--a-spacing-05);
-}
-
+/* ----------------------------- CopyButton Icon ---------------------------- */
 .navds-copybutton__icon {
   font-size: 1.5rem;
   display: flex;
-}
 
-:where(.navds-copybutton--xsmall, .navds-copybutton--small) .navds-copybutton__icon {
-  font-size: 1.25rem;
-}
+  &:first-of-type {
+    margin-left: -0.25rem;
+  }
 
-.navds-copybutton__icon:first-of-type {
-  margin-left: -0.25rem;
-}
+  &:last-of-type {
+    margin-right: -0.25rem;
+  }
 
-.navds-copybutton__icon:last-of-type {
-  margin-right: -0.25rem;
-}
-
-.navds-copybutton__icon:only-child {
-  margin: 0;
+  &:only-child {
+    margin: 0;
+  }
 }
 
 .navds-copybutton--active .navds-copybutton__icon {
-  animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.05, 0.7, 0.1, 1);
 }
 
 @keyframes akselCopyButtonIconAnimation {
@@ -123,104 +140,44 @@
   }
 }
 
-:where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
-  margin: -0.125rem;
-}
+/* ---------------------------- CopyButton Action --------------------------- */
+.navds-copybutton--action {
+  color: var(--ax-text-accent);
 
-.navds-copybutton:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-}
+  &.navds-copybutton--active {
+    color: var(--ax-text-success);
 
-@supports not selector(:focus-visible) {
-  .navds-copybutton:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+    &:hover {
+      color: var(--ax-text-success-strong);
+    }
+  }
+
+  &:hover {
+    color: var(--ax-text-accent-strong);
+  }
+
+  &:disabled {
+    color: var(--ax-text-accent);
   }
 }
 
-/* Variant/action */
-.navds-copybutton--action {
-  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
-  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
-}
-
-.navds-copybutton--action:hover {
-  color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action-hover)));
-  background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
-}
-
-.navds-copybutton--action:where(:disabled),
-.navds-copybutton--action:hover:where(:disabled) {
-  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
-  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
-  box-shadow: none;
-}
-
-.navds-copybutton--active.navds-copybutton--action {
-  color: var(--ac-copybutton-action-active-text, var(--__ac-copybutton-icon-success, var(--a-icon-success)));
-}
-
-/* Variant/neutral */
+/* --------------------------- CopyButton Neutral --------------------------- */
 .navds-copybutton--neutral {
-  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-neutral-text, var(--a-text-subtle)));
-  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
-}
+  color: var(--ax-text-subtle);
 
-.navds-copybutton--neutral:hover {
-  color: var(--ac-copybutton-neutral-hover-text, var(--__ac-copybutton-text, var(--a-text-default)));
-  background-color: var(--ac-copybutton-neutral-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
-}
+  &:hover,
+  &.navds-copybutton--active {
+    color: var(--ax-text-default);
+  }
 
-.navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
-.navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
-  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-text, var(--a-text-default)));
-  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
-  box-shadow: none;
-}
-
-.navds-copybutton--active.navds-copybutton--neutral {
-  color: var(--ac-copybutton-neutral-active-text, var(--__ac-copybutton-text, var(--a-text-default)));
+  &:disabled {
+    color: var(--ax-text-subtle);
+  }
 }
 
 .navds-copybutton__content {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--a-spacing-2);
-}
-
-.navds-copybutton--small > .navds-copybutton__content {
-  gap: var(--a-spacing-1-alt);
-}
-
-.navds-copybutton--xsmall > .navds-copybutton__content {
-  gap: var(--a-spacing-1);
-}
-
-.navds-copybutton--active > .navds-copybutton__content {
-  animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
-}
-
-@keyframes akselCopyButtonAnimation {
-  0% {
-    opacity: 0.4;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-/* Disabled */
-.navds-copybutton:where(:disabled) {
-  cursor: not-allowed;
-  opacity: 0.3;
-}
-
-@media (forced-colors: active) {
-  .navds-copybutton:where(:disabled) {
-    opacity: 1;
-    border-color: GrayText;
-  }
+  gap: var(--ax-spacing-2);
 }

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

@@ -1,114 +1,93 @@
 .navds-expansioncard {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
-  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
-  --__ac-expansioncard-border-width: 1px;
-  --__ac-expansioncard-padding-block: var(--a-spacing-4);
-  --__ac-expansioncard-padding-inline: var(--a-spacing-6);
+  --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
+  --__axc-expansioncard-padding-block: var(--ax-spacing-4);
+  --__axc-expansioncard-padding-inline: var(--ax-spacing-6);
 
-  border-radius: var(--__ac-expansioncard-border-radius);
-  background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--ax-bg-raised);
   height: fit-content;
+  border: 1px solid var(--ax-border-default);
+
+  &:has(.navds-expansioncard__header:hover) {
+    box-shadow: 0 0 0 1px var(--ax-border-strong);
+    border-color: var(--ax-border-strong);
+  }
 }
 
-.navds-expansioncard--open {
-  --__ac-expansioncard-border-color: var(
-    --ac-expansioncard-border-open-color,
-    var(--ac-expansioncard-border-color, var(--a-border-default))
-  );
+/* ------------------------ ExpansionCard Small-size ------------------------ */
+.navds-expansioncard--small {
+  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
+  --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
+
+  & > .navds-expansioncard__header .navds-expansioncard__title--small {
+    margin-top: var(--ax-spacing-05);
+  }
+
+  & :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+    margin-top: 0;
+  }
+
+  & > .navds-expansioncard__header > .navds-expansioncard__header-button {
+    min-height: 2rem;
+    min-width: 2rem;
+  }
+
+  & .navds-expansioncard__content {
+    --__axc-expansioncard-padding-block: var(--ax-spacing-4);
+  }
 }
 
-.navds-expansioncard:hover {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
-}
-
-:where(.navds-expansioncard.navds-expansioncard--open):hover {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
-}
-
-/*************************
- * Header *
- *************************/
+/* -------------------------- ExpansionCard Header -------------------------- */
 .navds-expansioncard__header {
   width: 100%;
   display: flex;
-  gap: var(--a-spacing-4);
-  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
-  border-radius: var(--__ac-expansioncard-border-radius);
-  background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
+  gap: var(--ax-spacing-4);
+  padding: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
+  border-radius: var(--__axc-expansioncard-border-radius);
+  background-color: transparent;
   position: relative;
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
   justify-content: space-between;
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-raised-hover);
+  }
+
+  &[data-open="true"] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    /* Divider between header and content */
+    &::after {
+      content: "";
+      background-color: var(--ax-border-subtle);
+      bottom: 0;
+      left: var(--__axc-expansioncard-padding-inline);
+      height: 1px;
+      width: calc(100% - 2 * var(--__axc-expansioncard-padding-inline));
+      position: absolute;
+      opacity: 1;
+    }
+
+    &:hover::after {
+      opacity: 0;
+    }
+  }
 }
 
-.navds-expansioncard--small {
-  --__ac-expansioncard-padding-block: var(--a-spacing-3);
-  --__ac-expansioncard-padding-inline: var(--a-spacing-4);
-}
-
-.navds-expansioncard__header:hover {
-  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
-  box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
-  border-bottom: none;
-  background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
-  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
-  box-shadow:
-    1px 0 0 0 var(--__ac-expansioncard-border-color),
-    -1px 0 0 0 var(--__ac-expansioncard-border-color),
-    0 -1px 0 0 var(--__ac-expansioncard-border-color);
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
-  content: "";
-  background-color: var(--a-border-divider);
-  bottom: 0;
-  left: var(--__ac-expansioncard-padding-inline);
-  height: 1px;
-  width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
-  position: absolute;
-  opacity: 1;
-  transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
-  opacity: 0;
-}
-
-/*************************
- * Header/Typography *
- *************************/
-
+/* --------------------- ExpansionCard Header typography -------------------- */
 .navds-expansioncard__title--small {
   margin-top: 0.625rem;
 }
 
 .navds-expansioncard__title--medium {
-  margin-top: var(--a-spacing-2);
+  margin-top: var(--ax-spacing-2);
 }
 
 .navds-expansioncard__title--large {
-  margin-top: var(--a-spacing-1);
+  margin-top: var(--ax-spacing-1);
 }
 
-.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
-  margin-top: var(--a-spacing-05);
-}
-
-.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
-  margin-top: 0;
-}
-
-/*************************
- * Header/Button *
- *************************/
+/* ----------------------- ExpansionCard Header Button ---------------------- */
 .navds-expansioncard__header-button {
   display: grid;
   place-content: center;
@@ -116,120 +95,89 @@
   margin: 0;
   background: transparent;
   border: none;
-  border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
+  border-radius: var(--ax-border-radius-large);
   min-height: 3rem;
   min-width: 3rem;
   font-size: 1.5rem;
   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;
+    }
+  }
+
+  /* Makes the whole header clickable */
+  &::after {
+    inset: 0;
+    z-index: 1;
+    position: absolute;
+    content: "";
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+  }
 }
 
-.navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
-  min-height: 2rem;
-  min-width: 2rem;
-}
-
-:where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
-  background-color: var(--a-surface-hover);
+.navds-expansioncard__header:hover > .navds-expansioncard__header-button {
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
 .navds-expansioncard__header-chevron {
-  transition: transform 150ms ease-in-out;
+  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(0) rotate(180deg);
+.navds-expansioncard__header[data-open="true"] .navds-expansioncard__header-chevron {
+  transform: rotateX(-180deg);
 }
 
-.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(1px);
+/* Even if animation always takes 250ms, the perceived effect of current timing function makes the 'closing'-animation take longer */
+.navds-expansioncard__header[data-open="false"] .navds-expansioncard__header-chevron {
+  transition-duration: 400ms;
 }
 
-.navds-expansioncard__header-button:focus-visible {
-  outline: 3px solid transparent;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-expansioncard__header-button:focus {
-    outline: 3px solid transparent;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-expansioncard--open
-  > :where(.navds-expansioncard__header)
-  > :where(.navds-expansioncard__header-button):hover
-  :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(-1px) rotate(180deg);
-}
-
-.navds-expansioncard__header-button::after {
-  inset: 0;
-  z-index: 1;
-  position: absolute;
-  content: "";
-  height: 100%;
-  width: 100%;
-  cursor: pointer;
-}
-
-/*************************
- * Content *
- *************************/
+/* -------------------------- ExpansionCard Content ------------------------- */
 .navds-expansioncard__content {
-  --__ac-expansioncard-padding-block: var(--a-spacing-5);
+  --__axc-expansioncard-padding-block: var(--ax-spacing-5);
 
-  border-end-end-radius: var(--__ac-expansioncard-border-radius);
-  border-end-start-radius: var(--__ac-expansioncard-border-radius);
-  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
-    var(--__ac-expansioncard-padding-inline);
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
-  border-top: none;
-}
+  border-end-end-radius: var(--__axc-expansioncard-border-radius);
+  border-end-start-radius: var(--__axc-expansioncard-border-radius);
+  padding-inline: var(--__axc-expansioncard-padding-inline);
+  padding-block: 0;
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition-duration: 250ms;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  transition-property: visibility, padding-block, grid-template-rows;
+  overflow: hidden;
 
-.navds-expansioncard--small .navds-expansioncard__content {
-  --__ac-expansioncard-padding-block: var(--a-spacing-4);
-}
+  &[data-open="true"] {
+    grid-template-rows: 1fr;
+    visibility: visible;
+    padding-block: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
 
-.navds-expansioncard__content--closed {
-  display: none;
-}
-
-:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
-  box-shadow:
-    1px 0 0 0 var(--__ac-expansioncard-border-color),
-    -1px 0 0 0 var(--__ac-expansioncard-border-color),
-    0 1px 0 0 var(--__ac-expansioncard-border-color);
+    & .navds-expansioncard__content-inner {
+      opacity: 1;
+    }
+  }
 }
 
 .navds-expansioncard__content-inner {
-  animation: fadeExpansionCard 250ms ease;
+  min-height: 0;
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
-  animation: none;
-}
-
-@keyframes fadeExpansionCard {
-  0% {
-    opacity: 0.25;
-    transform: translateY(-8px);
-  }
-
-  40% {
-    opacity: 0.7;
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-expansioncard:hover {
-    --__ac-expansioncard-border-color: highlight;
-
-    outline: 1px solid highlight;
+/* ---------------- ExpansionCard No Animation (defaultOpen) ---------------- */
+.navds-expansioncard--no-animation {
+  & :is(.navds-expansioncard__content, .navds-expansioncard__content-inner) {
+    transition: none;
   }
 }

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

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

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

@@ -1,55 +1,49 @@
 .navds-error-summary {
-  background-color: var(--ac-error-summary-bg, var(--a-surface-default));
-  padding: var(--a-spacing-5);
-  border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
-  border-radius: var(--a-border-radius-large);
-}
+  background-color: var(--ax-bg-default);
+  padding: var(--ax-spacing-5);
+  border: 4px solid var(--ax-border-danger);
+  border-radius: var(--ax-border-radius-xlarge);
+  outline-offset: 2px;
 
-.navds-error-summary--small {
-  padding: var(--a-spacing-3);
-}
-
-.navds-error-summary__heading {
-  scroll-margin-top: var(--a-spacing-6);
-}
-
-.navds-error-summary--small .navds-error-summary__heading {
-  scroll-margin-top: var(--a-spacing-4);
-}
-
-.navds-error-summary__heading:focus {
-  outline: none;
-}
-
-.navds-error-summary:focus-visible,
-.navds-error-summary:has(.navds-error-summary__heading:focus-visible) {
-  box-shadow:
-    0 0 0 1px var(--a-border-on-inverted),
-    0 0 0 4px var(--a-border-focus);
+  &:focus-visible,
+  &:has(.navds-error-summary__heading:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+  }
 }
 
 @supports not selector(:focus-visible) {
   .navds-error-summary:focus {
-    box-shadow: var(--a-shadow-focus);
+    outline: 2px solid var(--ax-border-focus);
+  }
+}
+
+.navds-error-summary--small {
+  padding: var(--ax-spacing-3);
+
+  & .navds-error-summary__heading {
+    scroll-margin-top: var(--ax-spacing-4);
+  }
+
+  & > .navds-error-summary__list {
+    margin: var(--ax-spacing-2) 0;
+    gap: var(--ax-spacing-2);
+    padding-left: var(--ax-spacing-5);
+  }
+}
+
+.navds-error-summary__heading {
+  scroll-margin-top: var(--ax-spacing-6);
+
+  &:focus {
     outline: none;
   }
 }
 
 .navds-error-summary__list {
-  margin: var(--a-spacing-3) 0;
+  margin: var(--ax-spacing-3) 0;
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-3);
-  padding-left: var(--a-spacing-6);
+  gap: var(--ax-spacing-3);
+  padding-left: var(--ax-spacing-6);
   list-style: inherit;
 }
-
-.navds-error-summary__list > * {
-  color: var(--ac-error-summary-list-dot, var(--a-text-action));
-}
-
-.navds-error-summary--small > .navds-error-summary__list {
-  margin: var(--a-spacing-2) 0;
-  gap: var(--a-spacing-2);
-  padding-left: var(--a-spacing-5);
-}

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

@@ -1,11 +1,3 @@
-[data-theme="dark"] {
-  --__ac-form-description: var(--a-text-on-inverted);
-}
-
-[data-theme="light"] {
-  --__ac-form-description: initial;
-}
-
 .navds-fieldset {
   margin: 0;
   padding: 0;
@@ -14,11 +6,11 @@
 }
 
 .navds-fieldset > :not(:first-child, :empty) {
-  margin-top: var(--a-spacing-2);
+  margin-top: var(--ax-spacing-2);
 }
 
 .navds-fieldset__description {
-  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
+  color: var(--ax-text-subtle);
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {

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

@@ -1,78 +1,84 @@
-/**
-* Makes it easier for user to use FileItem in semantic lists
-*/
-.navds-file-upload :is(ul, li) {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+/* Makes it easier for user to use FileItem in semantic lists */
+.navds-file-upload {
+  & :is(ul, li) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 }
 
-/**
- * FileUpload.Dropzone
- */
-
+/* --------------------------- FileUpload Dropzone -------------------------- */
 .navds-dropzone__area {
-  --__ac-dropzone-background: var(--a-surface-subtle);
-  --__ac-dropzone-text-color: var(--a-text-default);
-  --__ac-dropzone-padding: var(--a-spacing-6);
-  --__ac-dropzone-icon-padding: var(--a-spacing-2);
-  --__ac-dropzone-animation-length-long: 0.6s;
-  --__ac-dropzone-animation-length-short: 250ms;
-  --__ac-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
-  --__ac-dropzone-animation-over-under: cubic-bezier(0.3, 1.4, 0.3, 1);
+  --__axc-dropzone-background: var(--ax-bg-input);
+  --__axc-dropzone-padding: var(--ax-spacing-6);
+  --__axc-dropzone-icon-padding: var(--ax-spacing-2);
+  --__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);
+  --__axc-dropzone-animation-over-under: cubic-bezier(0.3, 1, 0.3, 1);
 
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--a-spacing-4);
+  gap: var(--ax-spacing-4);
   text-align: center;
-  padding: var(--__ac-dropzone-padding);
-  outline: 1px dashed var(--a-border-subtle);
-  outline-offset: -1px;
-  border-radius: var(--a-border-radius-large);
-  background-color: var(--__ac-dropzone-background);
-  color: var(--__ac-dropzone-text-color);
-  transition: background-color var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+  padding: var(--__axc-dropzone-padding);
+  border: 1px dashed var(--ax-border-default);
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--__axc-dropzone-background);
+  color: var(--ax-text-default);
+  transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
   cursor: pointer;
+
+  &:hover:not([data-disabled="true"]) {
+    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;
+  }
+
+  &[data-disabled="true"] {
+    cursor: default;
+  }
 }
 
-.navds-dropzone__area:hover {
-  box-shadow: inset 0 2px 4px 1px rgb(11 11 11/ 0.05);
-  outline-color: var(--a-border-default);
-}
+.navds-dropzone--dragging {
+  & > .navds-dropzone__area {
+    --__axc-dropzone-background: var(--ax-bg-input);
+  }
 
-.navds-dropzone--disabled > .navds-dropzone__area:hover {
-  outline-color: var(--a-border-subtle);
-  box-shadow: initial;
-  cursor: default;
-}
-
-.navds-dropzone--dragging > .navds-dropzone__area {
-  --__ac-dropzone-background: var(--a-surface-action-subtle-hover);
-}
-
-.navds-dropzone--dragging > .navds-dropzone__area::after {
-  outline: 1px dashed var(--a-border-subtle);
-  outline-offset: -1px;
-  color: var(--a-text-action-selected);
-  background-color: var(--a-surface-hover);
-  content: "";
-  inset: 0;
-  position: absolute;
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  box-shadow: inset 0 2px 7px 3px rgb(11 11 11/ 0.1);
-  border-radius: var(--a-border-radius-large);
-  animation: akselDropzoneDragoverAnimation var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+  & > .navds-dropzone__area::after {
+    color: var(--ax-text-accent-strong);
+    background-color: var(--ax-bg-accent-moderateA);
+    content: "";
+    inset: 0;
+    margin: -1px;
+    border: 1px dashed var(--ax-border-accent-strong);
+    position: absolute;
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    border-radius: var(--ax-border-radius-xlarge);
+    animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short)
+      var(--__axc-dropzone-animation-ease-out);
+  }
 }
 
 @keyframes akselDropzoneDragoverAnimation {
   0% {
     -webkit-backdrop-filter: blur(0);
     backdrop-filter: blur(0);
-    background-color: var(--a-surface-transparent);
+    background-color: transparent;
   }
 
   70% {
@@ -81,54 +87,41 @@
   }
 
   100% {
-    background-color: var(--a-surface-hover);
+    background-color: var(--ax-bg-accent-moderateA);
   }
 }
 
 .navds-dropzone__area-icon {
   display: grid;
-  padding: var(--__ac-dropzone-icon-padding);
+  padding: var(--__axc-dropzone-icon-padding);
   visibility: hidden;
 }
 
-.navds-dropzone--error:where(:not(.navds-dropzone--dragging)) > .navds-dropzone__area {
-  outline-color: var(--a-surface-danger);
-  outline-width: 2px;
-}
-
-.navds-dropzone__area:hover > .navds-dropzone__area-button {
-  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
-  background-color: var(
-    --ac-button-secondary-hover-bg,
-    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
-  );
-}
-
-.navds-dropzone__area:active .navds-dropzone__area-button {
-  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
-  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
-  box-shadow: none;
+.navds-dropzone--error > .navds-dropzone__area {
+  border-color: transparent;
+  outline: 2px solid var(--ax-border-danger);
+  outline-offset: -1px;
 }
 
 .navds-dropzone__area-release {
-  top: var(--__ac-dropzone-padding);
+  top: var(--__axc-dropzone-padding);
   display: grid;
   position: absolute;
   z-index: 1;
   pointer-events: none;
   transition:
-    top var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under),
-    transform var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+    top var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under),
+    transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
 }
 
 .navds-dropzone__area-release__icon {
   display: grid;
-  padding: var(--__ac-dropzone-icon-padding);
-  border-radius: var(--a-border-radius-full);
-  background-color: var(--a-surface-neutral-subtle);
+  padding: var(--__axc-dropzone-icon-padding);
+  border-radius: var(--ax-border-radius-full);
+  background-color: var(--ax-bg-neutral-moderateA);
   transition:
-    background-color 300ms var(--__ac-dropzone-animation-ease-out),
-    font-size 300ms var(--__ac-dropzone-animation-ease-out);
+    background-color 300ms var(--__axc-dropzone-animation-ease-out),
+    font-size 300ms var(--__axc-dropzone-animation-ease-out);
   font-size: 1.5rem;
 }
 
@@ -142,52 +135,55 @@
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
-  transition: visibility var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+  transition: visibility var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
   visibility: visible;
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--a-text-action-selected);
+  color: var(--ax-text-accent-strong);
   top: 50%;
   transform: translateY(-50%);
 }
 
 .navds-dropzone__area-disabled {
-  color: var(--a-text-subtle);
+  color: var(--ax-text-subtle);
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
 }
 
-/**
- * FileUpload.Item
- */
-
+/* ----------------------------- FileUpload Item ---------------------------- */
 .navds-file-item__inner {
-  outline: 1px solid var(--a-border-subtle);
+  background-color: var(--ax-bg-raised);
+  border: 1px solid var(--ax-border-subtleA);
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-3);
+  border-radius: var(--ax-border-radius-xlarge);
+  padding: var(--ax-spacing-3);
   display: flex;
-  gap: var(--a-spacing-3);
+  gap: var(--ax-spacing-3);
   align-items: flex-start;
 }
 
 .navds-file-item--error > .navds-file-item__inner {
-  outline: 2px solid var(--a-surface-danger);
+  outline: 2px solid var(--ax-border-danger);
 }
 
 .navds-file-item__icon {
-  background-color: var(--a-surface-neutral-subtle);
-  color: var(--a-icon-default);
-  border-radius: var(--a-border-radius-full);
-  min-height: 3rem;
-  min-width: 3rem;
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-full);
+  min-height: 2.5rem;
+  min-width: 2.5rem;
   display: grid;
   place-content: center;
   transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+
+  & > svg {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
 }
 
 .navds-file-item__icon--loading {
@@ -203,28 +199,28 @@
 }
 
 .navds-file-item__error {
-  color: var(--a-text-danger);
+  color: var(--ax-text-danger);
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0, 0.3, 0.15, 1);
   overflow: hidden;
   grid-template-rows: 0fr;
-}
 
-.navds-file-item--error .navds-file-item__error {
-  grid-template-rows: 1fr;
-  padding-top: var(--a-spacing-1);
-}
-
-.navds-file-item__error-content > svg {
-  flex-shrink: 0;
-  height: 1rem;
-  margin-top: 0.1rem;
+  & .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(--a-spacing-1);
+  gap: var(--ax-spacing-1);
+
+  & > svg {
+    flex-shrink: 0;
+    height: 1rem;
+    margin-top: 0.1rem;
+  }
 }

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

@@ -1,5 +1,17 @@
 .navds-form-progress__bar {
-  margin-bottom: var(--a-spacing-2);
+  margin-bottom: var(--ax-spacing-2);
+}
+
+.navds-form-progress__button {
+  &:focus-visible {
+    z-index: 1;
+  }
+
+  &[data-state="open"] {
+    & svg {
+      transform: rotate(-180deg);
+    }
+  }
 }
 
 .navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
@@ -7,46 +19,39 @@
   display: none;
 }
 
-.navds-form-progress__button:hover svg {
-  transform: translateY(1px);
-}
-
-.navds-form-progress__button[data-state="open"] svg {
-  transform: rotate(-180deg);
-}
-
-.navds-form-progress__button[data-state="open"]:hover svg {
-  transform: translateY(-1px) rotate(-180deg);
-}
-
 .navds-form-progress__collapsible {
   display: grid;
   grid-template-rows: 0fr;
   overflow: hidden;
-  transition: grid-template-rows 0.3s cubic-bezier(0.3, 0, 0.15, 1);
-}
+  transition: grid-template-rows 250ms cubic-bezier(0.2, 0, 0, 1);
 
-.navds-form-progress__collapsible[hidden] {
-  display: grid;
-}
+  &[hidden] {
+    display: grid !important;
+  }
 
-.navds-form-progress__collapsible[data-state="open"] {
-  grid-template-rows: 1fr;
+  &[data-state="open"] {
+    grid-template-rows: 1fr;
+  }
 }
 
 .navds-form-progress__collapsible-content {
   min-height: 0;
-  transition: visibility 0.3s;
+  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: 2px solid var(--a-border-subtle);
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-2) var(--a-spacing-4);
-  margin-top: var(--a-spacing-1);
+  border: 1px solid var(--ax-border-subtle);
+  border-radius: var(--ax-border-radius-large);
+  padding: var(--ax-spacing-4);
+  margin-top: var(--ax-spacing-1);
+  background: var(--ax-bg-raised);
 }

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

@@ -1,54 +1,54 @@
 .navds-form-summary {
   overflow: hidden;
-  border: 1px solid var(--a-border-subtle);
-  border-radius: var(--a-border-radius-large);
-  background: var(--a-surface-default);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  background: var(--ax-bg-raised);
 }
 
 .navds-form-summary__header {
-  background-color: var(--a-surface-subtle);
-  padding: var(--a-spacing-4) var(--a-spacing-6);
+  background: var(--ax-bg-neutral-moderateA);
+  padding: var(--ax-spacing-4) var(--ax-spacing-6);
   display: flex;
   justify-content: space-between;
-  gap: 0 var(--a-spacing-2);
+  gap: 0 var(--ax-spacing-3);
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__header {
-    padding: var(--a-spacing-3) var(--a-spacing-4);
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
     flex-direction: column;
   }
 }
 
 .navds-form-summary__edit {
   flex-shrink: 0;
-  margin-top: var(--a-spacing-1);
+  margin-top: var(--ax-spacing-1);
   align-self: flex-start;
 }
 
 .navds-form-summary > .navds-form-summary__answers {
-  border-top: 1px solid var(--a-border-subtle);
+  border-top: 1px solid var(--ax-border-subtleA);
 }
 
 .navds-form-summary__answers {
-  padding: var(--a-spacing-5) var(--a-spacing-6) var(--a-spacing-6);
+  padding: var(--ax-spacing-5) var(--ax-spacing-6) var(--ax-spacing-6);
   margin: 0;
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__answers {
-    padding: var(--a-spacing-4);
+    padding: var(--ax-spacing-4);
   }
 }
 
 .navds-form-summary__answer:not(:last-child) {
-  margin-bottom: var(--a-spacing-4);
-  padding-bottom: var(--a-spacing-4);
-  border-bottom: 1px solid var(--a-border-divider);
+  margin-bottom: var(--ax-spacing-4);
+  padding-bottom: var(--ax-spacing-4);
+  border-bottom: 1px solid var(--ax-border-subtleA);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer) {
-  padding-bottom: var(--a-spacing-6);
+  padding-bottom: var(--ax-spacing-6);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
@@ -57,22 +57,26 @@
 
 @media (max-width: 479px) {
   .navds-form-summary__answer:not(:last-child) {
-    margin-bottom: var(--a-spacing-3);
-    padding-bottom: var(--a-spacing-3);
+    margin-bottom: var(--ax-spacing-3);
+    padding-bottom: var(--ax-spacing-3);
   }
 
   .navds-form-summary__answer:has(.navds-form-summary__answer) {
-    padding-bottom: var(--a-spacing-5);
+    padding-bottom: var(--ax-spacing-5);
   }
 }
 
 .navds-form-summary__value:first-of-type {
-  margin-top: var(--a-spacing-1);
+  margin-top: var(--ax-spacing-1);
 }
 
-.navds-form-summary__value :where(.navds-form-summary__answers) {
-  margin-top: var(--a-spacing-2);
-  padding: var(--a-spacing-4);
-  background: var(--a-surface-selected);
-  border-radius: var(--a-border-radius-large);
+.navds-form-summary__value .navds-form-summary__answers {
+  margin-top: var(--ax-spacing-2);
+  padding: var(--ax-spacing-4);
+  background: var(--ax-bg-info-moderateA);
+  border-radius: var(--ax-border-radius-large);
+
+  & .navds-form-summary__answer {
+    border-color: var(--ax-border-info-subtleA);
+  }
 }

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

@@ -1,27 +1,19 @@
-[data-theme="dark"] {
-  --__ac-form-description: var(--a-text-on-inverted);
-}
-
-[data-theme="light"] {
-  --__ac-form-description: initial;
-}
-
 .navds-form-field {
   display: grid;
   justify-items: start;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
 }
 
 .navds-form-field__description {
   margin-top: -0.375rem;
-  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
+  color: var(--ax-text-subtle);
 }
 
 .navds-form-field .navds-error-message,
 .navds-fieldset .navds-error-message,
 .navds-file-item .navds-error-message {
   display: flex;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
 }
 
 .navds-form-field .navds-error-message::before,
@@ -40,7 +32,7 @@
 }
 
 .navds-form-field__subdescription {
-  color: var(--ac-form-subdescription, var(--a-text-subtle));
+  color: var(--ax-text-subtle);
 }
 
 .navds-form-field--readonly > :where(.navds-form-field__label) {
@@ -48,8 +40,8 @@
 }
 
 .navds-form-field__readonly-icon {
-  margin-top: var(--a-spacing-05);
-  margin-right: var(--a-spacing-2);
+  margin-top: var(--ax-spacing-05);
+  margin-right: var(--ax-spacing-2);
   flex-shrink: 0;
   align-self: flex-start;
 }

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

@@ -18,30 +18,28 @@
 
 .navds-checkbox__label,
 .navds-radio__label {
-  padding: var(--a-spacing-3) 0;
+  padding: var(--ax-spacing-3) 0;
   cursor: pointer;
   display: flex;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
 
-  --__ac-radio-checkbox-readonly-bg: var(--a-surface-subtle);
-  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle);
+  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+  --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
 }
 
 .navds-checkbox__label::before,
 .navds-radio__label::before {
   content: "";
-  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-small);
+  border-radius: var(--ax-border-radius-medium);
+  background-color: var(--ax-bg-input);
   flex-shrink: 0;
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
-  width: calc(1.5rem - 0.25rem);
-  height: calc(1.5rem - 0.25rem);
-  margin-block: 2px;
-  margin-inline: 2px;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--ax-border-default);
 }
 
 .navds-radio__label::before {
-  border-radius: var(--a-border-radius-full);
+  border-radius: var(--ax-border-radius-full);
 }
 
 .navds-checkbox__content,
@@ -61,38 +59,27 @@
 
 .navds-checkbox--small > .navds-checkbox__label,
 .navds-radio--small > .navds-radio__label {
-  padding: var(--a-spacing-1-alt) 0;
+  padding: var(--ax-spacing-1-alt) 0;
 }
 
 .navds-checkbox--small > .navds-checkbox__label::before,
 .navds-radio--small > .navds-radio__label::before {
-  width: calc(1.25rem - 0.25rem);
-  height: calc(1.25rem - 0.25rem);
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .navds-checkbox__input:focus + .navds-checkbox__label::before,
 .navds-radio__input:focus + .navds-radio__label::before {
-  outline: 2px solid transparent;
+  outline: 2px solid var(--ax-border-focus);
   outline-offset: 2px;
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
-    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-    0 0 0 4px var(--a-border-focus);
-}
-
-.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
-.navds-radio__input:hover:focus + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
-    0 0 0 4px var(--a-border-focus);
 }
 
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
   content: "";
   position: absolute;
   top: 50%;
-  transform: translate(var(--a-spacing-1-alt), -50%);
-  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  transform: translate(var(--ax-spacing-1-alt), -50%);
+  background-color: var(--ax-bg-default);
   width: 0.75rem;
   height: 0.25rem;
   border-radius: 1px;
@@ -104,13 +91,13 @@
 }
 
 .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+  background-color: var(--ax-bg-accent-strong-pressed);
+  border-color: var(--ax-bg-accent-strong-pressed);
 }
 
-.navds-checkbox__input:where(:checked, :indeterminate):hover + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected-hover));
+.navds-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .navds-checkbox__label::before {
+  border-color: var(--ax-bg-accent-strong-hover);
+  background-color: var(--ax-bg-accent-strong-hover);
 }
 
 .navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
@@ -118,10 +105,10 @@
 }
 
 .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  color: var(--ax-bg-default);
   position: absolute;
   height: 1.5rem;
-  transform: translate(var(--a-spacing-1-alt));
+  transform: translate(var(--ax-spacing-1-alt));
   pointer-events: none;
 
   /* Fixed edcase where when using in shadow-dom, svg will not center */
@@ -143,73 +130,44 @@
   background-position: 0.25rem center;
 }
 
-.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
-.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-  box-shadow:
-    0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
-    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-    0 0 0 4px var(--a-border-focus);
-}
-
 .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
-    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
+  background-color: var(--ax-bg-input);
+  border: 8px solid var(--ax-bg-accent-strong-pressed);
 }
 
-.navds-radio__input:checked:focus + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
-    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
-    0 0 0 4px var(--a-border-focus);
+.navds-radio--small > .navds-radio__input:checked + .navds-radio__label::before {
+  border-width: 6px;
 }
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
-}
-
-.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate, :focus) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
+  color: var(--ax-text-accent-strong);
 }
 
 .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
-  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
+  border-color: var(--ax-border-accent-strong);
+  background-color: var(--ax-bg-accent-moderate-hoverA);
 }
 
-.navds-checkbox--error > .navds-checkbox__input:not(:hover, :disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:hover, :disabled, :checked) + .navds-radio__label::before {
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+.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);
 }
 
-.navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover, :disabled, :checked, :indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:not(:hover, :disabled, :checked) + .navds-radio__label::before {
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
-    0 0 0 4px var(--a-border-focus);
+.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:hover:not(:disabled, :checked, :indeterminate, :focus)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:hover:not(:disabled, :checked, :focus) + .navds-radio__label::before {
-  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+.navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label::before {
+  background-color: var(--ax-bg-danger-strong-pressed);
+  border-color: var(--ax-bg-danger-strong-pressed);
 }
 
-.navds-checkbox--error
-  > .navds-checkbox__input:focus:hover:not(:disabled, :checked, :indeterminate)
-  + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled, :checked) + .navds-radio__label::before {
-  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow:
-    0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
-    0 0 0 4px var(--a-border-focus);
+.navds-radio--error > .navds-radio__input:checked + .navds-radio__label::before {
+  border-color: var(--ax-bg-danger-strong-pressed);
 }
 
 .navds-checkbox--disabled,
@@ -236,85 +194,65 @@
 
 .navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
 .navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
-  color: var(--a-text-default);
+  color: var(--ax-text-default);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-checkbox--readonly > .navds-checkbox__input:hover:not(:checked, :indeterminate, :focus) + .navds-checkbox__label::before,
+.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label::before,
+.navds-checkbox--readonly > .navds-checkbox__input:hover .navds-checkbox__label::before,
 .navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before,
 .navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label::before {
-  background-color: var(--__ac-radio-checkbox-readonly-bg);
-  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  background-color: var(--__axc-radio-checkbox-readonly-bg);
+  border-color: var(--__axc-radio-checkbox-readonly-border);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:focus + .navds-radio__label::before {
-  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
-}
-
-.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-color: var(--__ac-radio-checkbox-readonly-bg);
-  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+.navds-checkbox--readonly > .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+  border-color: var(--__axc-radio-checkbox-readonly-border);
+  background-color: var(--__axc-radio-checkbox-readonly-bg);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  color: var(--a-icon-subtle);
+  color: var(--ax-text-subtle);
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  background-color: var(--a-icon-subtle);
+  background-color: var(--ax-bg-neutral-strong);
+  border-width: 0;
   box-shadow:
-    0 0 0 2px var(--__ac-radio-checkbox-readonly-border),
-    inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
-}
-
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
-  background-color: var(--__ac-radio-checkbox-readonly-bg);
+    inset 0 0 0 2px var(--ax-border-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(--a-icon-subtle);
+  background-color: var(--ax-text-subtle);
 }
 
 @media (forced-colors: active) {
-  .navds-checkbox__input:focus + .navds-checkbox__label::before,
-  .navds-radio__input:focus + .navds-radio__label::before {
-    outline-color: highlight;
-  }
-
   .navds-checkbox,
   .navds-radio {
-    --__ac-radio-checkbox-high-contrast-bg: field;
-    --__ac-radio-checkbox-high-contrast-text: fieldtext;
-    --__ac-radio-checkbox-high-contrast-highlight: highlight;
+    --__axc-radio-checkbox-high-contrast-bg: field;
+    --__axc-radio-checkbox-high-contrast-text: fieldtext;
+    --__axc-radio-checkbox-high-contrast-highlight: highlight;
+
+    /* TODO: Consider adding this to global scope */
+    --ax-border-focus: Highlight;
   }
 
   .navds-checkbox__label::before,
   .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+    border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
+    background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
   .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-    color: var(--__ac-radio-checkbox-high-contrast-text);
+    color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
   .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+    background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
   .navds-radio__input:checked + .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
-    outline-offset: -4px;
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
-  }
-
-  .navds-radio__input:checked:focus + .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg);
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+    border: 6px solid var(--__axc-radio-checkbox-high-contrast-text);
   }
 
   :not(.navds-checkbox--readonly) > .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
@@ -322,32 +260,25 @@
     color: highlight;
   }
 
-  .navds-checkbox__input:focus + .navds-checkbox__label::before {
-    outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight);
-  }
-
   .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    background-color: var(--__ac-radio-checkbox-high-contrast-bg);
+    border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
+    background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
   .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+    background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
   .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-    border: 1px solid var(--__ac-radio-checkbox-high-contrast-text);
-    outline: 3px solid var(--__ac-radio-checkbox-high-contrast-bg);
-    outline-offset: -4px;
-    background-color: var(--__ac-radio-checkbox-high-contrast-text);
+    border-width: 6px;
   }
 
   .navds-checkbox--disabled,
   .navds-radio--disabled {
     opacity: 1;
 
-    --__ac-radio-checkbox-high-contrast-bg: field;
-    --__ac-radio-checkbox-high-contrast-text: graytext;
+    --__axc-radio-checkbox-high-contrast-bg: field;
+    --__axc-radio-checkbox-high-contrast-text: graytext;
   }
 
   :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {

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

@@ -1,107 +1,64 @@
-[data-theme="dark"] {
-  --__ac-textfield-text: var(--a-text-on-inverted);
-  --__ac-textfield-bg: var(--a-surface-inverted);
-  --__ac-textfield-border: var(--a-border-on-inverted);
-  --__ac-textfield-hover-border: var(--a-blue-200);
-  --__ac-textfield-placeholder: var(--a-gray-500);
-  --__ac-textfield-error-border: var(--a-red-300);
-}
-
-[data-theme="light"] {
-  --__ac-textfield-text: initial;
-  --__ac-textfield-bg: initial;
-  --__ac-textfield-border: initial;
-  --__ac-textfield-hover-border: initial;
-  --__ac-textfield-placeholder: initial;
-  --__ac-textfield-error-border: initial;
-}
-
 .navds-text-field__input {
   appearance: none;
-  padding: var(--a-spacing-2);
-  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
+  padding: var(--ax-spacing-2);
+  background: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
   min-height: 3rem;
   width: 100%;
-  color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
-}
+  color: var(--ax-text-default);
 
-.navds-text-field__input[size] {
-  width: auto;
-}
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+  }
 
-.navds-text-field__input::placeholder {
-  color: var(--ac-textfield-placeholder, var(--__ac-textfield-placeholder, var(--a-text-subtle)));
+  &:focus-visible {
+    border-color: var(--ax-border-accent-strong);
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: var(--ax-text-subtle);
+  }
+
+  &[size] {
+    width: auto;
+  }
 }
 
 .navds-form-field--small .navds-text-field__input {
-  padding: 0 var(--a-spacing-2);
+  padding: 0 var(--ax-spacing-2);
   min-height: 2rem;
 }
 
-.navds-text-field__input:hover {
-  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action-hover)));
-}
-
-.navds-text-field__input:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-  border-color: var(--ac-textfield-active-border, var(--a-border-action-selected));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-text-field__input:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-/**
-  Error handling
-*/
 .navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
-  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
-  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
-}
-
-.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
-  box-shadow:
-    0 0 0 1px var(--a-border-danger),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
-    box-shadow:
-      0 0 0 1px var(--a-border-danger),
-      var(--a-shadow-focus);
-  }
-}
-
-/* Disabled handling */
-.navds-text-field__input:disabled {
-  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
-  border-color: var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
-  box-shadow: none;
-  cursor: not-allowed;
+  border-color: var(--ax-border-danger);
+  box-shadow: 0 0 0 1px var(--ax-border-danger);
 }
 
 .navds-text-field--readonly .navds-text-field__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
+  background-color: var(--ax-bg-neutral-moderate);
+  border-color: var(--ax-border-neutral-subtleA);
   cursor: default;
 }
 
 /**
   * Removes default search icon
   */
-.navds-text-field__input[type="search"]::-webkit-search-decoration,
-.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
-.navds-text-field__input[type="search"]::-webkit-search-results-button,
-.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
-  -webkit-appearance: none;
+.navds-text-field__input[type="search"] {
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
 }
 
 @media (forced-colors: active) {

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

@@ -3,44 +3,30 @@
   border: 0;
   cursor: pointer;
   background-color: transparent;
-  border-radius: var(--a-border-radius-full);
+  border-radius: var(--ax-border-radius-full);
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--ac-help-text-button-color, var(--a-surface-action));
+  color: var(--ax-bg-accent-strong);
   font-size: 1.25rem;
-  padding: calc(var(--a-spacing-1) / 2);
-}
-
-.navds-help-text__button:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow:
-    0 0 0 1px var(--a-border-focus),
-    inset 0 0 0 1px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-help-text__button:focus {
-    outline: 2px solid transparent;
-    box-shadow:
-      0 0 0 1px var(--a-border-focus),
-      inset 0 0 0 1px var(--a-border-focus);
-  }
+  padding: calc(var(--ax-spacing-1) / 2);
 }
 
 .navds-help-text__icon {
-  border-radius: var(--a-border-radius-full);
-}
-
-.navds-help-text__popover > .navds-popover__arrow {
-  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
+  border-radius: var(--ax-border-radius-full);
 }
 
 .navds-help-text__popover.navds-popover {
-  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
-  max-width: min(65ch, calc(100vw - 1.5rem));
-
-  --ac-popover-border: var(--a-border-info);
+  background-color: var(--ax-bg-info-moderate);
+  max-width: min(65ch, calc(100vw - var(--ax-spacing-6)));
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-info);
+  box-shadow:
+    0 0 1px 0 rgba(7 9 13/ 0.15),
+    0 1px 3px 0 rgba(7 9 13/ 0.1),
+    0 5px 12px 0 rgba(7 9 13/ 0.13),
+    0 0.5px 0 0 rgba(255 255 255/ 0) inset,
+    0 0 1px 0 rgba(255 255 255/ 0) inset;
 }
 
 .navds-help-text__icon--filled {
@@ -53,21 +39,11 @@
 
 .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
-  color: var(--ac-help-text-button-hover-color, var(--a-surface-action-hover));
+  color: var(--ax-bg-accent-strong-hover);
 }
 
 .navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
-  color: var(--ac-help-text-button-active-color, var(--a-surface-action-active));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-help-text__button:where(:focus) > .navds-help-text__icon {
-    display: none;
-  }
-
-  .navds-help-text__button:where(:focus) > .navds-help-text__icon--filled {
-    display: inherit;
-  }
+  color: var(--ax-bg-accent-strong-pressed);
 }
 
 @media (forced-colors: active) {

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

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@layer aksel.reset, aksel.typography, aksel.theme, aksel.forms, aksel.components, aksel.layout, aksel.utilities;
+@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.forms, aksel.layout, aksel.utilities;
 
 /* CSS foundations */
 @import "./baseline/reset.darkside.css" layer(aksel.reset);

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

@@ -1,79 +1,63 @@
 .navds-link {
-  color: var(--ac-link-text, var(--a-text-action));
-  text-decoration: underline;
+  color: var(--ax-text-accent);
   display: inline-flex;
   align-items: center;
-  gap: var(--a-spacing-1);
-}
-
-.navds-link.navds-link--inline-text {
-  display: inline;
-}
-
-.navds-link.navds-link--inline-text > svg {
-  /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
-  margin: 0.1em 0.1em -0.1em;
-  transform: translateY(0.05em);
-  display: inline;
-  vertical-align: baseline;
-}
-
-.navds-link:hover {
-  text-decoration: none;
-}
-
-.navds-link.navds-link--remove-underline {
-  text-decoration: none;
-}
-
-.navds-link.navds-link--remove-underline:hover {
+  gap: var(--ax-spacing-1);
   text-decoration: underline;
-}
+  text-underline-offset: 0.1em;
+  text-decoration-thickness: 0.05em;
 
-.navds-alert .navds-link,
-.navds-confirmation-panel .navds-link {
-  color: var(--a-text-default);
-}
+  &:hover,
+  &:active {
+    text-decoration-thickness: 0.111em;
+  }
 
-.navds-link:focus-visible {
-  outline: 2px solid transparent;
-  color: var(--ac-link-focus-text, var(--a-text-on-action));
-  text-decoration: none;
-  background-color: var(--ac-link-focus-bg, var(--a-border-focus));
-  box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
-}
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-link:focus {
-    outline: 2px solid transparent;
-    color: var(--ac-link-focus-text, var(--a-text-on-action));
+  &.navds-link--inline-text {
+    display: inline;
+
+    & > svg {
+      /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
+      margin: 0.1em 0.1em -0.1em;
+      transform: translateY(0.05em);
+      display: inline;
+      vertical-align: baseline;
+    }
+  }
+
+  &.navds-link--remove-underline {
     text-decoration: none;
-    background-color: var(--ac-link-focus-bg, var(--a-border-focus));
-    box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  & svg {
+    color: inherit;
+    flex-shrink: 0;
   }
 }
 
-.navds-link:active {
-  outline: 2px solid transparent;
-  color: var(--ac-link-active-text, var(--a-text-on-action));
-  text-decoration: none;
-  background-color: var(--ac-link-active-bg, var(--a-border-focus));
-  box-shadow: 0 0 0 2px var(--ac-link-active-border, var(--a-border-focus));
-}
-
-.navds-link svg {
-  color: inherit;
-  flex-shrink: 0;
+.navds-alert,
+.navds-confirmation-panel {
+  & .navds-link {
+    color: var(--ax-text-default);
+  }
 }
 
 .navds-link--action {
-  color: var(--ac-link-action-text, var(--a-text-action));
+  color: var(--ax-text-accent);
 }
 
 .navds-link--neutral {
-  color: var(--ac-link-neutral-text, var(--a-text-default));
+  color: var(--ax-text-default);
 }
 
 .navds-link--subtle {
-  color: var(--ac-link-subtle-text, var(--a-text-subtle));
+  color: var(--ax-text-subtle);
 }

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

@@ -1,25 +1,45 @@
 .navds-list ul,
 .navds-list ol {
   padding: 0;
-  margin-block: var(--a-spacing-4);
+  margin-block: var(--ax-spacing-4);
 }
 
 .navds-list--small ul,
 .navds-list--small ol {
-  margin-block: var(--a-spacing-3);
+  margin-block: var(--ax-spacing-3);
 }
 
-.navds-list .navds-list :where(ul, ol) {
-  margin-block: var(--a-spacing-2) 0;
-}
+.navds-list {
+  & .navds-list :where(ul, ol) {
+    margin-block: var(--ax-spacing-2) 0;
+  }
 
-.navds-list ol {
-  list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
-  padding-left: 1.7rem;
-}
+  & ol {
+    list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
+    padding-left: 1.7rem;
 
-.navds-list ol > .navds-list__item {
-  padding-left: 0.3rem;
+    & > .navds-list__item {
+      padding-left: 0.3rem;
+    }
+
+    & li::marker {
+      font-weight: var(--ax-font-weight-bold);
+    }
+  }
+
+  & ul {
+    & > .navds-list__item {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: var(--ax-spacing-2);
+    }
+
+    & > li > .navds-list__item-marker {
+      display: flex;
+      align-items: center;
+      height: var(--ax-font-line-height-xlarge);
+    }
+  }
 }
 
 /* SAFARI HACK START */
@@ -41,45 +61,26 @@ _:future,
 /* stylelint-enable selector-type-no-unknown */
 
 .navds-list__item {
-  margin-block-end: var(--a-spacing-2);
-}
+  margin-block-end: var(--ax-spacing-2);
 
-.navds-list__item:last-child {
-  margin-block-end: 0;
-}
-
-.navds-list ul > .navds-list__item {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: var(--a-spacing-2);
-}
-
-.navds-list ol li::marker {
-  font-weight: var(--a-font-weight-bold);
-  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+  &:last-child {
+    margin-block-end: 0;
+  }
 }
 
 .navds-list__item-marker {
   width: 1.5rem;
 }
 
-.navds-list ul > li > .navds-list__item-marker {
-  display: flex;
-  align-items: center;
-  height: var(--a-font-line-height-xlarge);
-}
-
 .navds-list--small ul > li > .navds-list__item-marker {
-  height: var(--a-font-line-height-large);
+  height: var(--ax-font-line-height-large);
 }
 
 .navds-list__item-marker--bullet {
   padding-left: 0.8rem;
-  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
 }
 
 .navds-list__item-marker--icon {
   font-size: 1.5rem;
   justify-content: center;
-  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
 }

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

@@ -5,88 +5,102 @@
   animation: loader-rotate 1.8s linear infinite;
   stroke-width: 6;
 
-  --ac-loader-background-stroke-width: 5.9;
+  --__axc-loader-stroke-width: 5.9;
+
+  &.navds-loader--3xlarge {
+    width: 5.5rem;
+    stroke-width: 5;
+
+    --__axc-loader-stroke-width: 4.8;
+  }
+
+  &.navds-loader--2xlarge {
+    width: 4rem;
+    stroke-width: 6;
+
+    --__axc-loader-stroke-width: 5.8;
+  }
+
+  &.navds-loader--xlarge {
+    width: 2.5rem;
+    stroke-width: 6;
+
+    --__axc-loader-stroke-width: 5.8;
+  }
+
+  &.navds-loader--large {
+    width: 2rem;
+    stroke-width: 7;
+
+    --__axc-loader-stroke-width: 6.8;
+  }
+
+  &.navds-loader--medium {
+    width: 1.5rem;
+    stroke-width: 7;
+
+    --__axc-loader-stroke-width: 6.8;
+  }
+
+  &.navds-loader--small {
+    width: 1.25rem;
+    stroke-width: 8;
+
+    --__axc-loader-stroke-width: 7.8;
+  }
+
+  &.navds-loader--xsmall {
+    width: 1rem;
+    stroke-width: 8;
+
+    --__axc-loader-stroke-width: 7.8;
+  }
 }
 
 .navds-loader__foreground {
-  animation: loader-dasharray 1.8s ease-in-out infinite;
+  animation: loader-dasharray 1.5s ease-in-out infinite;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
-  stroke: var(--ac-loader-stroke, var(--a-border-default));
+  stroke: var(--ax-border-strong);
+  stroke-linecap: round;
+  stroke-width: var(--__axc-loader-stroke-width);
 }
 
 .navds-loader__background {
-  stroke: var(--ac-loader-stroke-bg, var(--a-surface-active));
-  stroke-width: var(--ac-loader-background-stroke-width);
+  stroke: var(--ax-border-neutral-subtleA);
+  stroke-width: var(--__axc-loader-stroke-width);
 }
 
-.navds-loader--neutral .navds-loader__foreground {
-  stroke: var(--ac-loader-neutral-stroke, var(--a-border-default));
+.navds-loader--neutral {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-strong);
+  }
 }
 
-.navds-loader--interaction .navds-loader__foreground {
-  stroke: var(--ac-loader-interaction-stroke, var(--a-border-action));
+.navds-loader--interaction {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-accent-strong);
+  }
+
+  & .navds-loader__background {
+    stroke: var(--ax-border-accent-subtleA);
+  }
 }
 
-.navds-loader--inverted .navds-loader__foreground {
-  stroke: var(--ac-loader-inverted-stroke, var(--a-border-on-inverted));
+.navds-loader--inverted {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-subtle);
+  }
+
+  & .navds-loader__background {
+    stroke: var(--ax-border-strong);
+  }
 }
 
-.navds-loader--inverted .navds-loader__background {
-  stroke: var(--ac-loader-inverted-stroke-bg, var(--a-border-on-inverted-subtle));
-}
-
-.navds-loader--transparent .navds-loader__background {
-  stroke: var(--a-surface-transparent);
-}
-
-.navds-loader--3xlarge {
-  width: 5.5rem;
-  stroke-width: 5;
-
-  --ac-loader-background-stroke-width: 4.8;
-}
-
-.navds-loader--2xlarge {
-  width: 4rem;
-  stroke-width: 6;
-
-  --ac-loader-background-stroke-width: 5.8;
-}
-
-.navds-loader--xlarge {
-  width: 2.5rem;
-  stroke-width: 6;
-
-  --ac-loader-background-stroke-width: 5.8;
-}
-
-.navds-loader--large {
-  width: 2rem;
-  stroke-width: 7;
-
-  --ac-loader-background-stroke-width: 6.8;
-}
-
-.navds-loader--medium {
-  width: 1.5rem;
-  stroke-width: 7;
-
-  --ac-loader-background-stroke-width: 6.8;
-}
-
-.navds-loader--small {
-  width: 1.25rem;
-  stroke-width: 8;
-
-  --ac-loader-background-stroke-width: 7.8;
-}
-
-.navds-loader--xsmall {
-  width: 1rem;
-  stroke-width: 8;
-
-  --ac-loader-background-stroke-width: 7.8;
+.navds-loader--transparent {
+  & .navds-loader__background {
+    stroke: transparent;
+  }
 }
 
 @keyframes loader-rotate {

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

@@ -3,23 +3,26 @@
 }
 
 .navds-modal {
-  --__ac-modal-bg: var(--ac-modal-bg, var(--a-surface-default));
+  --__axc-modal-bg: var(--ax-bg-raised);
 
-  background-color: var(--__ac-modal-bg);
-  border: none;
-  border-radius: var(--a-border-radius-large);
-  box-shadow: var(--a-shadow-xlarge);
+  background-color: var(--__axc-modal-bg);
+  border: 1px solid var(--ax-border-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  box-shadow:
+    0 0 1px 0 rgb(0 0 0/ 0.08),
+    0 2px 5px 0 rgb(0 0 0/ 0.15),
+    0 10px 24px 0 rgb(0 0 0/ 0.18);
   padding: 0;
   position: fixed;
   max-height: 100%;
   max-width: 100%;
-  color: var(--a-text-default);
-}
+  color: var(--ax-text-default);
 
-.navds-modal[open] {
-  display: flex;
-  flex-direction: column;
-  animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  &[open] {
+    display: flex;
+    flex-direction: column;
+    animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  }
 }
 
 .navds-modal--polyfilled {
@@ -32,14 +35,14 @@
   width: fit-content;
   height: fit-content;
   margin: auto;
-}
 
-.navds-modal--polyfilled .navds-modal--polyfilled {
-  overflow: auto;
-}
+  &:not([open]) {
+    display: none; /* from polyfill */
+  }
 
-.navds-modal--polyfilled:not([open]) {
-  display: none; /* from polyfill */
+  & .navds-modal--polyfilled {
+    overflow: auto;
+  }
 }
 
 ._dialog_overlay {
@@ -52,12 +55,24 @@
   left: 0;
 }
 
-.navds-modal--small {
-  width: var(--ac-modal-width-small, 450px);
+.navds-modal--medium {
+  width: 700px;
 }
 
-.navds-modal--medium {
-  width: var(--ac-modal-width-medium, 700px);
+.navds-modal--small {
+  width: 450px;
+
+  & .navds-modal__header {
+    padding: var(--ax-spacing-4) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-4);
+  }
+
+  & .navds-modal__body {
+    padding: var(--ax-spacing-2) var(--ax-spacing-4) var(--ax-spacing-4);
+  }
+
+  & .navds-modal__footer {
+    padding: var(--ax-spacing-4);
+  }
 }
 
 @media (min-width: 480px) {
@@ -83,16 +98,16 @@
 
 .navds-modal::backdrop {
   /*
-   * Cannot use --a-surface-backdrop because ::backdrop does not inherit from anything but itself.
-   * But consumers can do `::backdrop { --ac-modal-backdrop: white; }`
-   * We can add ::backdrop to tokens.css when we remove the polyfill.
+   * Cannot use --ax-bg-overlay because ::backdrop does not inherit from anything but itself.
+   * TODO: Consider adding `::backdrop` to global token definitions.
+   * TODO: Check that overlay-color is correct after the new colors is set in stone.
    */
-  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+  background: #0214317d;
   animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
-  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+  background: #0214317d;
 
   /* From polyfill: */
   position: fixed;
@@ -104,37 +119,35 @@
 }
 
 .navds-modal__button {
-  margin-left: var(--a-spacing-4);
+  margin-left: var(--ax-spacing-4);
   float: right;
 }
 
 .navds-modal__header {
-  padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
+  padding: var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-4) var(--ax-spacing-6);
 }
 
-.navds-modal--small .navds-modal__header {
-  padding: var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
-}
-
-.navds-modal__header-icon svg {
-  display: inline;
-  vertical-align: -0.25rem;
-  margin-right: var(--a-spacing-1);
+.navds-modal__header-icon {
+  & svg {
+    display: inline;
+    vertical-align: -0.25rem;
+    margin-right: var(--ax-spacing-1);
+  }
 }
 
 .navds-modal__label {
-  font-weight: 600;
-  color: var(--a-text-subtle);
+  font-weight: var(--ax-font-weight-bold);
+  color: var(--ax-text-subtle);
 }
 
 .navds-modal__body {
-  padding: var(--a-spacing-6);
+  padding: var(--ax-spacing-6);
   overflow: auto;
   overscroll-behavior: contain;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
   background:
-    linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
-    linear-gradient(transparent, var(--__ac-modal-bg) 60%) bottom,
+    linear-gradient(var(--__axc-modal-bg) 30%, transparent) top,
+    linear-gradient(transparent, var(--__axc-modal-bg) 60%) bottom,
     radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
     radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
   background-size:
@@ -146,23 +159,15 @@
   background-repeat: no-repeat;
 }
 
-.navds-modal--small .navds-modal__body {
-  padding: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4);
-}
-
 .navds-modal__header + .navds-modal__body {
-  padding-top: var(--a-spacing-0);
+  padding-top: var(--ax-spacing-0);
 }
 
 .navds-modal__footer {
   display: flex;
   flex-flow: row-reverse wrap;
-  gap: var(--a-spacing-4);
-  padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
-}
-
-.navds-modal--small .navds-modal__footer {
-  padding: var(--a-spacing-4);
+  gap: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-6);
 }
 
 .navds-modal__footer :nth-of-type(2) {
@@ -180,7 +185,7 @@
 @keyframes akselModalFadeIn {
   0% {
     opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
-    transform: translate3d(0, calc(5% + 4px), 0);
+    transform: translate3d(0, calc(2% + 4px), 0);
   }
 
   50% {

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

@@ -7,65 +7,33 @@
   padding: 0;
   list-style: none;
   display: flex;
-  gap: var(--a-spacing-3);
+  gap: var(--ax-spacing-3);
+
+  & li {
+    list-style: none;
+    display: flex;
+  }
 }
 
 .navds-pagination__ellipsis {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--a-spacing-12);
+  width: 3rem;
   cursor: default;
 }
 
 .navds-pagination--small .navds-pagination__ellipsis {
-  width: var(--a-spacing-8);
+  width: 2rem;
 }
 
 .navds-pagination--xsmall .navds-pagination__ellipsis {
-  width: var(--a-spacing-6);
+  width: 1.5rem;
 }
 
-.navds-pagination__item {
-  color: var(--ac-pagination-text, var(--a-text-default));
-}
-
-.navds-pagination--medium .navds-pagination__item {
-  border-radius: var(--a-border-radius-medium);
-}
-
-.navds-pagination__item[aria-current="true"] {
-  background-color: var(--ac-pagination-selected-bg, var(--a-surface-action-selected));
-  color: var(--ac-pagination-selected-text, var(--a-text-on-action));
-}
-
-.navds-pagination__item[aria-current="true"]:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-pagination__item[aria-current="true"]:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
-  }
-}
-
-.navds-pagination__prev-next {
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-1);
-}
-
-.navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-inline: var(--a-spacing-1-alt);
-}
-
-.navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-left: var(--a-spacing-05);
-  padding-right: var(--a-spacing-05);
+.navds-pagination__item[data-selected="true"] {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
 }
 
 .navds-pagination--invisible {

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

@@ -1,84 +1,21 @@
 .navds-popover {
-  z-index: var(--a-z-index-popover);
-  background-color: var(--ac-popover-bg, var(--a-surface-default));
-  box-shadow: var(--a-shadow-medium);
-  border: 1px solid;
-  border-color: var(--ac-popover-border, var(--a-border-default));
-  border-radius: var(--a-border-radius-large);
-  max-width: calc(100vw - var(--a-spacing-6));
+  z-index: 1000;
+  background: var(--ax-bg-raised);
+  box-shadow:
+    0 0 1px 0 rgba(7 9 13/ 0.02),
+    0 2px 5px 0 rgba(7 9 13/ 0.1),
+    0 5px 12px 0 rgba(7 9 13/ 0.12);
+  border: 1px solid var(--ax-border-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));
 }
 
 .navds-popover__content {
-  padding: var(--a-spacing-4);
+  padding: var(--ax-spacing-4);
 }
 
 .navds-popover--hidden {
   display: none;
 }
-
-.navds-popover:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-popover:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-popover__arrow {
-  position: absolute;
-  z-index: -1;
-  transform: rotate(45deg);
-  background-color: var(--ac-popover-bg, var(--a-surface-default));
-  border: 1px solid;
-  border-color: var(--ac-popover-border, var(--a-border-default));
-  width: 1rem;
-  height: 1rem;
-}
-
-.navds-popover[data-placement^="top"] > .navds-popover__arrow {
-  border-left-color: transparent;
-  border-top-color: transparent;
-}
-
-/* prettier-ignore */
-.navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
-  border-bottom-color: transparent;
-  border-right-color: transparent;
-}
-
-.navds-popover[data-placement^="left"] > .navds-popover__arrow {
-  border-left-color: transparent;
-  border-bottom-color: transparent;
-}
-
-.navds-popover[data-placement^="right"] > .navds-popover__arrow {
-  border-right-color: transparent;
-  border-top-color: transparent;
-}
-
-@media (forced-colors: active) {
-  .navds-popover[data-placement^="top"] > .navds-popover__arrow {
-    border-left-color: canvas;
-    border-top-color: canvas;
-  }
-
-  /* prettier-ignore */
-  .navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
-    border-bottom-color: canvas;
-    border-right-color: canvas;
-  }
-
-  .navds-popover[data-placement^="left"] > .navds-popover__arrow {
-    border-left-color: canvas;
-    border-bottom-color: canvas;
-  }
-
-  .navds-popover[data-placement^="right"] > .navds-popover__arrow {
-    border-right-color: canvas;
-    border-top-color: canvas;
-  }
-}

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

@@ -1,33 +1,32 @@
 .navds-progress-bar {
-  background: var(--a-surface-neutral-subtle);
+  background: var(--ax-bg-neutral-moderateA);
   position: relative;
-  border-radius: var(--a-border-radius-full);
+  border-radius: var(--ax-border-radius-full);
   overflow: hidden;
-  box-shadow:
-    inset 0 1px 3px 0 rgba(0 0 0 / 0.15),
-    inset 0 0 1px 0 rgba(0 0 0 / 0.2);
+  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
 }
 
 .navds-progress-bar--small {
-  height: 12px;
-  min-width: 12px;
+  height: 0.75rem;
+  min-width: 0.75rem;
 }
 
 .navds-progress-bar--medium {
-  height: 16px;
-  min-width: 16px;
+  height: 1rem;
+  min-width: 1rem;
 }
 
 .navds-progress-bar--large {
-  height: 24px;
-  min-width: 24px;
+  height: 1.5rem;
+  min-width: 1.5rem;
 }
 
 .navds-progress-bar__foreground {
+  /* TODO:  rename --__ac- in ProgressBar.tsx after darkside update */
   --__ac-progress-bar-translate: initial;
 
   transform: translateX(var(--__ac-progress-bar-translate));
-  background: var(--ac-progress-bar-fg, var(--a-surface-alt-3));
+  background: var(--ax-bg-info-strong);
   transform-origin: left;
   position: absolute;
   top: 0;
@@ -104,5 +103,6 @@
 
   .navds-progress-bar {
     outline: 1px solid transparent;
+    outline-offset: -1px;
   }
 }

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

@@ -293,6 +293,10 @@
   background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
 }
 
+.navds-combobox__list:has(.navds-combobox__list_non-selectables) .navds-combobox__list-item {
+  scroll-margin-top: 48px;
+}
+
 .navds-combobox__list-item--loading {
   justify-content: center;
   background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));

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

@@ -27,7 +27,8 @@
 }
 
 .navds-form-progress__collapsible[hidden] {
-  display: grid;
+  /* CSS-resets sets 'hidden' to display non with imporant */
+  display: grid !important;
 }
 
 .navds-form-progress__collapsible[data-state="open"] {

@navikt/core/css/loader.css

@@ -13,6 +13,7 @@
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
   stroke: var(--ac-loader-stroke, var(--a-border-default));
+  stroke-width: var(--ac-loader-background-stroke-width);
 }
 
 .navds-loader__background {

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "7.4.2",
+  "version": "7.5.3",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^7.4.2",
+    "@navikt/ds-tokens": "^7.5.3",
     "autoprefixer": "^10.4.20",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",

@navikt/core/css/table.css

@@ -114,6 +114,7 @@
   align-items: center;
   line-height: inherit;
   font-weight: inherit;
+  text-align: inherit;
 }
 
 .navds-table--small .navds-table__sort-button {

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @navikt/ds-react
 
+## 7.5.3
+
+### Patch Changes
+
+- Allow RC versions of React 19 through peerDependencies ([#3391](https://github.com/navikt/aksel/pull/3391))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.5.3
+  - @navikt/aksel-icons@7.5.3
+
+## 7.5.2
+
+### Patch Changes
+
+- Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.5.2
+  - @navikt/aksel-icons@7.5.2
+
+## 7.5.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.5.1
+  - @navikt/aksel-icons@7.5.1
+
+## 7.5.0
+
+### Minor Changes
+
+- React: Allow all react versions above 17.0.0 trough peerDependencies. ([#3334](https://github.com/navikt/aksel/pull/3334))
+
+### Patch Changes
+
+- Datepicker: Use of 'open'-prop set to 'true' on first render could lead to the dialog not opening. ([#3333](https://github.com/navikt/aksel/pull/3333))
+
+- Updated dependencies [[`47a4dd6`](https://github.com/navikt/aksel/commit/47a4dd6c4c37a9ced9df1f21529e8a6244b342b1)]:
+  - @navikt/aksel-icons@7.5.0
+  - @navikt/ds-tokens@7.5.0
+
+## 7.4.3
+
+### Patch Changes
+
+- Pagination: More precise type for renderItem ([#3275](https://github.com/navikt/aksel/pull/3275))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.4.3
+  - @navikt/aksel-icons@7.4.3
+
 ## 7.4.2
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.4.2",
+  "version": "7.5.3",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -604,8 +604,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.4.2",
-    "@navikt/ds-tokens": "^7.4.2",
+    "@navikt/aksel-icons": "^7.5.3",
+    "@navikt/ds-tokens": "^7.5.3",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.1"
@@ -628,8 +628,8 @@
     "vitest": "^1.2.2"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.30 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0"
+    "@types/react": ">=17.0.30",
+    "react": ">=17.0.0 || >19.0.0-rc"
   },
   "peerDependenciesMeta": {
     "@types/react": {

@navikt/core/react/src/accordion/Accordion.tsx

@@ -31,6 +31,7 @@ interface AccordionComponent
 
 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
+   * @deprecated Prop will be removed in future versions. "default" will be the only variant.
    * @default "default"
    */
   variant?: "default" | "neutral";

@navikt/core/react/src/accordion/AccordionContent.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { BodyLong } from "../typography";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -15,6 +16,8 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
   ({ children, className, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     if (context === null) {
       console.error(
         "<Accordion.Content> has to be used within an <Accordion.Item>",
@@ -38,7 +41,11 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
           !context.open || undefined
         } /* Added to fix bug with Radio component, where label text inside a span sometimes is ignored by screen readers after hiding/displaying the RadioGroup inside an Accordion */
       >
-        {children}
+        {themeContext ? (
+          <div className="navds-accordion__content-inner">{children}</div>
+        ) : (
+          children
+        )}
       </BodyLong>
     );
   },

@navikt/core/react/src/accordion/AccordionHeader.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { AccordionContext } from "./AccordionContext";
@@ -19,6 +20,8 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
     const itemContext = useContext(AccordionItemContext);
     const accordionContext = useContext(AccordionContext);
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     if (itemContext === null) {
       console.error(
         "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>",
@@ -26,6 +29,13 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
       return null;
     }
 
+    let headingSize = accordionContext?.headingSize ?? "small";
+
+    if (themeContext) {
+      /* Fallback to "medium" Accordion-size if any other sizes are used */
+      headingSize = accordionContext?.size === "small" ? "xsmall" : "small";
+    }
+
     return (
       <button
         ref={ref}
@@ -42,7 +52,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
           />
         </span>
         <Heading
-          size={accordionContext?.headingSize ?? "small"}
+          size={headingSize}
           as="span"
           className="navds-accordion__header-content"
         >

@navikt/core/react/src/accordion/AccordionItem.tsx

@@ -65,6 +65,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
           "navds-accordion__item--neutral": context?.variant === "neutral",
           "navds-accordion__item--no-animation": !shouldAnimate.current,
         })}
+        data-expanded={_open}
         ref={ref}
         {...omit(rest, ["onClick"])}
       >

@navikt/core/react/src/chat/chat.stories.tsx

@@ -88,8 +88,8 @@ export const Variants: Story = {
         <React.Fragment key={variant}>
           <h3>{variant}</h3>
           <Chat
-            avatar="NAV"
-            name="NAV"
+            avatar="Ls"
+            name="Ls"
             timestamp="01.01.21 14:00"
             variant={variant}
           >

@navikt/core/react/src/chips/Toggle.tsx

@@ -48,6 +48,7 @@ export const ToggleChips: OverridableComponent<
           { "navds-chips__toggle--with-checkmark": checkmark },
         )}
         aria-pressed={selected}
+        data-pressed={selected}
       >
         {checkmark && (
           <svg
@@ -73,7 +74,7 @@ export const ToggleChips: OverridableComponent<
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
-                fill="var(--ac-chip-toggle-circle-border, var(--a-border-default))"
+                fill="var(--ax-text-neutral-icon, var(--ac-chip-toggle-circle-border, var(--a-border-default)))"
               />
             )}
           </svg>

@navikt/core/react/src/date/datepicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import { isWeekend } from "date-fns";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
@@ -88,8 +88,9 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
 
-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMergeRefs(wrapperRef, ref);
+    /* We use state here to insure that anchor is defined if open is true on initial render */
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+    const mergedRef = useMergeRefs(setWrapperRef, ref);
 
     const [selectedDates, setSelectedDates] = React.useState<
       Date | Date[] | DateRange | undefined
@@ -167,7 +168,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           {children}
           <DateWrapper
             open={_open ?? open}
-            anchor={wrapperRef.current}
+            anchor={wrapperRef}
             onClose={() => onClose?.() ?? setOpen(false)}
             locale={locale}
             variant={mode}

@navikt/core/react/src/date/monthpicker/MonthPicker.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
@@ -81,8 +81,9 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
 
-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMergeRefs(wrapperRef, ref);
+    /* We use state here to insure that anchor is defined if open is true on initial render */
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+    const mergedRef = useMergeRefs(setWrapperRef, ref);
 
     const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
       defaultSelected,
@@ -118,7 +119,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
           {children}
           <DateWrapper
             open={_open ?? open}
-            anchor={wrapperRef.current}
+            anchor={wrapperRef}
             onClose={() => onClose?.() ?? setOpen(false)}
             locale={locale}
             variant="month"

@navikt/core/react/src/date/parts/DateInput.tsx

@@ -94,7 +94,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-sr-only": hideLabel,
         })}
       >
-        <ReadOnlyIcon readOnly={readOnly} />
+        {readOnly && <ReadOnlyIcon />}
         {label}
       </Label>
       {!!description && (

@navikt/core/react/src/expansion-card/ExpansionCardContent.tsx

@@ -31,6 +31,7 @@ const ExpansionCardContent = forwardRef<
       })}
       aria-hidden={!panelContext.open}
       size={panelContext.size}
+      data-open={panelContext.open}
     >
       <div className="navds-expansioncard__content-inner">{children}</div>
     </BodyLong>

@navikt/core/react/src/expansion-card/ExpansionCardHeader.tsx

@@ -28,6 +28,7 @@ const ExpansionCardHeader = forwardRef<
       ref={ref}
       {...rest}
       className={cl("navds-expansioncard__header", className)}
+      data-open={panelContext.open}
     >
       <div className="navds-expansioncard__header-content">{children}</div>
 

@navikt/core/react/src/form/ReadOnlyIcon.tsx

@@ -1,20 +1,17 @@
 import React from "react";
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+import { useI18n } from "../util/i18n/i18n.context";
 
-export const ReadOnlyIcon = ({
-  readOnly,
-  nativeReadOnly = true,
-}: {
-  readOnly?: boolean;
-  nativeReadOnly?: boolean;
-}) => {
-  if (readOnly) {
-    return (
-      <PadlockLockedFillIcon
-        {...(nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" })}
-        className="navds-form-field__readonly-icon"
-      />
-    );
-  }
-  return null;
-};
+export const ReadOnlyIcon = () => (
+  <PadlockLockedFillIcon
+    aria-hidden
+    className="navds-form-field__readonly-icon"
+  />
+);
+
+export const ReadOnlyIconWithTitle = () => (
+  <PadlockLockedFillIcon
+    title={useI18n("global")("readOnly")}
+    className="navds-form-field__readonly-icon"
+  />
+);

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
 
@@ -90,9 +90,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               className="navds-checkbox__label-text"
               aria-hidden
             >
-              {!nested && (
-                <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
-              )}
+              {!nested && readOnly && <ReadOnlyIconWithTitle />}
               {props.children}
             </BodyShort>
             {props.description && (

@navikt/core/react/src/form/checkbox/checkbox.stories.tsx

@@ -230,6 +230,46 @@ export const Readonly = () => (
   </div>
 );
 
+export const Disabled = () => (
+  <div className="colgap">
+    <CheckboxGroup
+      legend="Hvilken frukt liker du?"
+      defaultValue={["banan"]}
+      disabled
+    >
+      <Checkbox value="banan">Banan</Checkbox>
+      <Checkbox value="eple">Eple</Checkbox>
+      <Checkbox value="druer" indeterminate>
+        Druer
+      </Checkbox>
+    </CheckboxGroup>
+    <CheckboxGroup
+      legend="Hvilken frukt liker du?"
+      error="Feilmelding"
+      defaultValue={["Eple"]}
+      disabled
+    >
+      <Checkbox value="eple" description="Epler kommer i 4 varianter">
+        Eple
+      </Checkbox>
+      <Checkbox value="banan">Banan</Checkbox>
+    </CheckboxGroup>
+    <hr />
+    <Checkbox value="tekst1" disabled>
+      Eple single
+    </Checkbox>
+    <Checkbox value="tekst1" checked disabled>
+      Banan single
+    </Checkbox>
+    <Checkbox value="tekst1" error disabled>
+      Pineapple single
+    </Checkbox>
+    <Checkbox value="tekst1" error checked disabled>
+      Peach single
+    </Checkbox>
+  </div>
+);
+
 export const Chromatic: Story = {
   render: () => (
     <div>
@@ -273,6 +313,10 @@ export const Chromatic: Story = {
         <h2>Readonly</h2>
         <Readonly />
       </div>
+      <div>
+        <h2>Disabled</h2>
+        <Disabled />
+      </div>
     </div>
   ),
   parameters: {

@navikt/core/react/src/form/combobox/Combobox.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
@@ -46,7 +46,7 @@ export const Combobox = forwardRef<
           "navds-sr-only": hideLabel,
         })}
       >
-        <ReadOnlyIcon nativeReadOnly={false} readOnly={readOnly} />
+        {readOnly && <ReadOnlyIconWithTitle />}
         {label}
       </Label>
       {!!description && (

@navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts

@@ -45,7 +45,7 @@ const useVirtualFocus = (
 
   const setActiveAndScrollToElement = (element?: HTMLElement) => {
     setActiveElement(element);
-    element?.scrollIntoView?.({ block: "center" });
+    element?.scrollIntoView?.({ block: "nearest" });
   };
 
   const moveFocusUp = () => {

@navikt/core/react/src/form/error-summary/ErrorSummary.tsx

@@ -61,7 +61,7 @@ interface ErrorSummaryComponent
  *     Felt må fylles ut med alder
  *   </ErrorSummary.Item>
  *   <ErrorSummary.Item href="#2">
- *     Tekstfeltet må ha en godkjent e-mail
+ *     Tekstfeltet må ha en godkjent e-post
  *   </ErrorSummary.Item>
  * </ErrorSummary>
  * ```

@navikt/core/react/src/form/error-summary/error-summary.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story = {
     <ErrorSummary headingTag={headingTag || undefined} {...rest}>
       <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
       <ErrorSummary.Item href="#2">
-        Tekstfeltet må ha en godkjent e-mail
+        Tekstfeltet må ha en godkjent e-post
       </ErrorSummary.Item>
     </ErrorSummary>
   ),
@@ -50,7 +50,7 @@ export const Small: Story = {
     <ErrorSummary heading="Feiloppsummering komponent" size="small">
       <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
       <ErrorSummary.Item href="#2">
-        Tekstfeltet må ha en godkjent e-mail
+        Tekstfeltet må ha en godkjent e-post
       </ErrorSummary.Item>
     </ErrorSummary>
   ),
@@ -72,7 +72,7 @@ export const A11yDemo: Story = {
         <ErrorSummary heading="Feiloppsummering tittel" ref={ref}>
           <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
           <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
+            Tekstfeltet må ha en godkjent e-post
           </ErrorSummary.Item>
         </ErrorSummary>
       </div>
@@ -89,7 +89,7 @@ export const FocusDemo: Story = {
         <ErrorSummary heading="Feiloppsummering tittel" ref={ref}>
           <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
           <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
+            Tekstfeltet må ha en godkjent e-post
           </ErrorSummary.Item>
         </ErrorSummary>
       </div>
@@ -117,7 +117,7 @@ export const Chromatic: Story = {
         <ErrorSummary heading="Feiloppsummering komponent">
           <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
           <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
+            Tekstfeltet må ha en godkjent e-post
           </ErrorSummary.Item>
         </ErrorSummary>
       </div>
@@ -126,7 +126,7 @@ export const Chromatic: Story = {
         <ErrorSummary heading="Feiloppsummering komponent" size="small">
           <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
           <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
+            Tekstfeltet må ha en godkjent e-post
           </ErrorSummary.Item>
         </ErrorSummary>
       </div>
@@ -144,7 +144,7 @@ export const ProvidedTranslations: Story = {
         <ErrorSummary size="small">
           <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
           <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
+            Tekstfeltet må ha en godkjent e-post
           </ErrorSummary.Item>
         </ErrorSummary>
       </UNSAFE_AkselLanguageProvider>

@navikt/core/react/src/form/fieldset/Fieldset.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIcon, ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps } from "../useFormField";
 import { FieldsetContext } from "./context";
 import { useFieldset } from "./useFieldset";
@@ -89,7 +89,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
               "navds-sr-only": !!hideLegend,
             })}
           >
-            <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={nativeReadOnly} />
+            {readOnly &&
+              (nativeReadOnly ? <ReadOnlyIcon /> : <ReadOnlyIconWithTitle />)}
             {legend}
           </Label>
           {!!description && (

@navikt/core/react/src/form/file-upload/parts/dropzone/Dropzone.tsx

@@ -107,6 +107,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
             onClick,
             () => inputRef.current?.click(),
           )}
+          data-disabled={inputProps.disabled}
         >
           {!inputProps.disabled && (
             <>

@navikt/core/react/src/form/radio/radio.stories.tsx

@@ -72,26 +72,43 @@ export const GroupError = () => {
   const [isValueSelected, setValueSelected] = useState(false);
   return (
     <>
-      <button>Stop her</button>
-      <RadioGroup
-        legend="Velg din aldersgruppe"
-        description="Informasjonen blir brukt for å gi deg bedre søketreff."
-        error={!isValueSelected ? "Du må velge en aldersgruppe" : undefined}
-      >
-        <Radio onChange={() => setValueSelected(true)} value="0-20">
-          0-20 år
-        </Radio>
-        <Radio
-          onChange={() => setValueSelected(true)}
-          value="21-45"
-          description="Gjelder fra året man blir 21"
+      <div>
+        <h2>Static error</h2>
+        <RadioGroup
+          legend="Velg din aldersgruppe"
+          description="Informasjonen blir brukt for å gi deg bedre søketreff."
+          error="Du må velge en aldersgruppe"
+          defaultValue="21-45"
         >
-          21-45 år
-        </Radio>
-        <Radio onChange={() => setValueSelected(true)} value="46-100">
-          46-100 år
-        </Radio>
-      </RadioGroup>
+          <Radio value="0-20">0-20 år</Radio>
+          <Radio value="21-45" description="Gjelder fra året man blir 21">
+            21-45 år
+          </Radio>
+          <Radio value="46-100">46-100 år</Radio>
+        </RadioGroup>
+      </div>
+      <div>
+        <h2>Dynamic error</h2>
+        <RadioGroup
+          legend="Velg din aldersgruppe"
+          description="Informasjonen blir brukt for å gi deg bedre søketreff."
+          error={!isValueSelected ? "Du må velge en aldersgruppe" : undefined}
+        >
+          <Radio onChange={() => setValueSelected(true)} value="0-20">
+            0-20 år
+          </Radio>
+          <Radio
+            onChange={() => setValueSelected(true)}
+            value="21-45"
+            description="Gjelder fra året man blir 21"
+          >
+            21-45 år
+          </Radio>
+          <Radio onChange={() => setValueSelected(true)} value="46-100">
+            46-100 år
+          </Radio>
+        </RadioGroup>
+      </div>
     </>
   );
 };
@@ -187,6 +204,29 @@ export const Readonly = () => (
   </div>
 );
 
+export const Disabled = () => (
+  <div className="colgap">
+    <RadioGroup
+      legend="Hvilken frukt liker du?"
+      defaultValue={["banan"]}
+      disabled
+    >
+      <Radio value="banan">Banan</Radio>
+      <Radio value="eple">Eple</Radio>
+      <Radio value="druer">Druer</Radio>
+    </RadioGroup>
+    <RadioGroup
+      legend="Hvilken frukt liker du?"
+      error="feilmelding"
+      defaultValue="eple"
+      disabled
+    >
+      <Radio value="eple">Eple</Radio>
+      <Radio value="banan">Banan</Radio>
+    </RadioGroup>
+  </div>
+);
+
 export const Chromatic: Story = {
   render: () => (
     <div>
@@ -222,6 +262,10 @@ export const Chromatic: Story = {
         <h2>Readonly</h2>
         <Readonly />
       </div>
+      <div>
+        <h2>Disabled</h2>
+        <Disabled />
+      </div>
     </div>
   ),
   parameters: {

@navikt/core/react/src/form/select/Select.tsx

@@ -3,7 +3,7 @@ import React, { SelectHTMLAttributes, forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface SelectProps
@@ -112,7 +112,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+          {readOnly && <ReadOnlyIconWithTitle />}
           {label}
         </Label>
         {!!description && (

@navikt/core/react/src/form/switch/Switch.tsx

@@ -8,7 +8,7 @@ import React, {
 import { Loader } from "../../loader";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
 const SelectedIcon = () => (
@@ -21,7 +21,6 @@ const SelectedIcon = () => (
     focusable={false}
     role="img"
     aria-hidden
-    aria-label="Deaktiver valg"
   >
     <path
       fillRule="evenodd"
@@ -117,19 +116,19 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           defaultChecked={defaultChecked}
           ref={ref}
           type="checkbox"
-          onChange={(e) => {
+          onChange={(event) => {
             if (readOnly) {
               return;
             }
-            setChecked(e.target.checked);
-            props.onChange?.(e);
+            setChecked(event.target.checked);
+            props.onChange?.(event);
           }}
-          onClick={(e) => {
+          onClick={(event) => {
             if (readOnly) {
-              e.preventDefault();
+              event.preventDefault();
               return;
             }
-            props?.onClick?.(e);
+            props.onClick?.(event);
           }}
           className={cl(className, "navds-switch__input")}
         />
@@ -150,11 +149,11 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           <div
             className={cl("navds-switch__content", {
               "navds-sr-only": hideLabel,
-              "navds-switch--with-description": !!description && !hideLabel,
+              "navds-switch--with-description": description && !hideLabel,
             })}
           >
             <BodyShort as="div" size={size} className="navds-switch__label">
-              <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+              {readOnly && <ReadOnlyIconWithTitle />}
               {children}
             </BodyShort>
             {description && (

@navikt/core/react/src/form/textarea/Textarea.tsx

@@ -9,9 +9,6 @@ import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./../useFormField";
 import Counter from "./TextareaCounter";
 
-/**
- * TODO: Mulighet for lokalisering av sr-only/counter text
- */
 export interface TextareaProps
   extends FormFieldProps,
     React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -144,7 +141,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} />
+          {readOnly && <ReadOnlyIcon />}
           {label}
         </Label>
         {!!description && (

@navikt/core/react/src/form/textfield/TextField.tsx

@@ -91,7 +91,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} />
+          {readOnly && <ReadOnlyIcon />}
           {label}
         </Label>
 

@navikt/core/react/src/help-text/HelpText.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
 import { Popover, PopoverProps } from "../popover";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { HelpTextIcon } from "./HelpTextIcon";
@@ -52,6 +53,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
 
     const [open, setOpen] = useState(false);
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     return (
       <div className={cl("navds-help-text", wrapperClassName)}>
         <button
@@ -72,7 +75,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           anchorEl={buttonRef.current}
           placement={placement}
           strategy={strategy}
-          offset={12}
+          offset={themeContext ? 8 : 12}
+          arrow={!themeContext}
         >
           <Popover.Content className="navds-body-short">
             {children}

@navikt/core/react/src/help-text/HelpTextIcon.tsx

@@ -38,7 +38,11 @@ export const HelpTextIcon = ({
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.75 9C9.75 7.75736 10.7574 6.75 12 6.75H12.1716C13.3195 6.75 14.25 7.68054 14.25 8.82843C14.25 9.37966 14.031 9.90832 13.6412 10.2981L12.6412 11.2981C11.7504 12.1889 11.25 13.3971 11.25 14.6569C11.25 15.0711 11.5858 15.4069 12 15.4069C12.4142 15.4069 12.75 15.0711 12.75 14.6569C12.75 13.7949 13.0924 12.9682 13.7019 12.3588L14.7019 11.3588C15.373 10.6877 15.75 9.77748 15.75 8.82843C15.75 6.85212 14.1479 5.25 12.1716 5.25H12C9.92893 5.25 8.25 6.92893 8.25 9V9.5C8.25 9.91421 8.58579 10.25 9 10.25C9.41421 10.25 9.75 9.91421 9.75 9.5V9ZM12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5Z"
-        fill={filled ? "var(--a-surface-default)" : "currentColor"}
+        fill={
+          filled
+            ? "var(--ax-text-accent-contrast, var(--a-surface-default))"
+            : "currentColor"
+        }
       />
     </svg>
   );

@navikt/core/react/src/layout/bleed/Bleed.stories.tsx

@@ -20,11 +20,7 @@ export const Default = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginInline="10 0">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -33,11 +29,7 @@ export const Default = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginInline="0 10">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -46,11 +38,7 @@ export const Default = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginBlock="10 0">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
               </Box>
             </Bleed>
@@ -59,11 +47,7 @@ export const Default = {
         <Box background="surface-alt-1-subtle" padding="5">
           <Box background="surface-alt-2-subtle" padding="5">
             <Bleed marginBlock="0 10">
-              <Box
-                padding="3"
-                className="p"
-                background="surface-success-subtle"
-              >
+              <Box padding="3" background="surface-success-subtle">
                 <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
               </Box>
             </Bleed>

@navikt/core/react/src/link/stories/link.stories.tsx

@@ -219,7 +219,8 @@ export const Chromatic = () => (
 );
 Chromatic.parameters = { chromatic: { disable: false } };
 
-export const ChromaticHover = () => (
+/* See .storybook/main.ts comment for explanation */
+/* export const ChromaticHover = () => (
   <>
     <h2>With icon</h2>
     <LinkWithIcon />
@@ -245,9 +246,10 @@ export const ChromaticHover = () => (
 ChromaticHover.parameters = {
   chromatic: { disable: false },
   pseudo: { hover: true },
-};
+}; */
 
-export const ChromaticFocusVisible = () => (
+/* See .storybook/main.ts comment for explanation */
+/* export const ChromaticFocusVisible = () => (
   <>
     <h2>With icon</h2>
     <LinkWithIcon />
@@ -273,9 +275,10 @@ export const ChromaticFocusVisible = () => (
 ChromaticFocusVisible.parameters = {
   chromatic: { disable: false },
   pseudo: { focusVisible: true },
-};
+}; */
 
-export const ChromaticActive = () => (
+/* See .storybook/main.ts comment for explanation */
+/* export const ChromaticActive = () => (
   <>
     <h2>With icon</h2>
     <LinkWithIcon />
@@ -301,4 +304,4 @@ export const ChromaticActive = () => (
 ChromaticActive.parameters = {
   chromatic: { disable: false },
   pseudo: { active: true },
-};
+}; */

@navikt/core/react/src/list/list.stories.tsx

@@ -331,7 +331,12 @@ export const Icons: Story = {
               style={{ transform: "rotate(45deg)" }}
               aria-hidden
             >
-              <rect width="24" height="24" rx="6" fill="var(--a-icon-alt-3)" />
+              <rect
+                width="24"
+                height="24"
+                rx="6"
+                fill="var(--ax-text-info, var(--a-icon-alt-3))"
+              />
             </svg>
           }
         >
@@ -354,39 +359,6 @@ export const Icons: Story = {
   },
 };
 
-export const Tokens: Story = {
-  render: () => {
-    return (
-      <List style={{ "--ac-list-marker-color": "red" }}>
-        <List.Item>Consectetur Adipiscing Elit</List.Item>
-        <List.Item>
-          Impedit nemo eos sit adipisci non dolores.
-          <List
-            style={{
-              "--ac-list-marker-icon-color": "blue",
-              "--ac-list-marker-ul-color": "pink",
-            }}
-          >
-            <List.Item>Error assumenda officia</List.Item>
-            <List.Item icon={<HeadHeartIcon aria-hidden />}>
-              Suscipit odit voluptatum
-            </List.Item>
-          </List>
-        </List.Item>
-        <List.Item style={{ "--ac-list-marker-ol-color": "green" }}>
-          Iusto fugiat atque accusantium iure sunt.
-          <List as="ol">
-            <List.Item>Error assumenda officia</List.Item>
-          </List>
-          <List>
-            <List.Item>Suscipit odit voluptatum</List.Item>
-          </List>
-        </List.Item>
-      </List>
-    );
-  },
-};
-
 export const Spacing: Story = {
   render: () => {
     return (
@@ -508,10 +480,6 @@ export const Chromatic: Story = {
         <h2>Icons</h2>
         {Icons.render?.(...args)}
       </div>
-      <div>
-        <h2>Tokens</h2>
-        {Tokens.render?.(...args)}
-      </div>
       <div>
         <h2>Spacing</h2>
         {Spacing.render?.(...args)}

@navikt/core/react/src/overlays/action-menu/ActionMenu.stories.tsx

@@ -48,6 +48,12 @@ export const OnlyItems: Story = {
           <ActionMenu.Item onSelect={() => console.log("Item 3 clicked")}>
             Item 3
           </ActionMenu.Item>
+          <ActionMenu.Item
+            onSelect={() => console.log("Item 4 clicked")}
+            variant="danger"
+          >
+            Item 4
+          </ActionMenu.Item>
         </ActionMenu.Content>
       </ActionMenu>
     );
@@ -381,6 +387,9 @@ export const Disabled: Story = {
           <ActionMenu.Item disabled shortcut="T+W">
             Item 1
           </ActionMenu.Item>
+          <ActionMenu.Item disabled variant="danger">
+            Delete
+          </ActionMenu.Item>
           <ActionMenu.Sub>
             <ActionMenu.SubTrigger disabled>Submenu 1</ActionMenu.SubTrigger>
             <ActionMenu.SubContent>

@navikt/core/react/src/overlays/action-menu/ActionMenu.tsx

@@ -621,7 +621,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="24"
                   height="24"
                   rx="4"
-                  fill="var(--a-border-default)"
+                  fill="var(--ax-border-default, var(--a-border-default))"
                 />
                 <rect
                   x="1"
@@ -629,7 +629,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="22"
                   height="22"
                   rx="3"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                   strokeWidth="2"
                 />
               </g>
@@ -638,7 +638,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="24"
                   height="24"
                   rx="4"
-                  fill="var(--a-surface-action-selected)"
+                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                 />
                 <rect
                   x="6"
@@ -646,7 +646,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="12"
                   height="4"
                   rx="1"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
               </g>
               <g className="navds-action-menu__indicator-icon--checked">
@@ -654,11 +654,11 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="24"
                   height="24"
                   rx="4"
-                  fill="var(--a-surface-action-selected)"
+                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                 />
                 <path
                   d="M10.0352 13.4148L16.4752 7.40467C17.0792 6.83965 18.029 6.86933 18.5955 7.47478C19.162 8.08027 19.1296 9.03007 18.5245 9.59621L11.0211 16.5993C10.741 16.859 10.3756 17 10.0002 17C9.60651 17 9.22717 16.8462 8.93914 16.5611L6.43914 14.0611C5.85362 13.4756 5.85362 12.5254 6.43914 11.9399C7.02467 11.3544 7.97483 11.3544 8.56036 11.9399L10.0352 13.4148Z"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
               </g>
             </svg>
@@ -756,7 +756,7 @@ export const ActionMenuRadioItem = forwardRef<
                   width="24"
                   height="24"
                   rx="12"
-                  fill="var(--a-border-default)"
+                  fill="var(--ax-border-default, var(--a-border-default))"
                 />
                 <rect
                   x="1"
@@ -765,7 +765,7 @@ export const ActionMenuRadioItem = forwardRef<
                   height="22"
                   rx="11"
                   strokeWidth="2"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
               </g>
               <g className="navds-action-menu__indicator-icon--checked">
@@ -775,7 +775,7 @@ export const ActionMenuRadioItem = forwardRef<
                   width="22"
                   height="22"
                   rx="11"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
                 <rect
                   x="1"
@@ -783,12 +783,12 @@ export const ActionMenuRadioItem = forwardRef<
                   width="22"
                   height="22"
                   rx="11"
-                  stroke="var(--a-surface-action-selected)"
+                  stroke="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                   strokeWidth="2"
                 />
                 <path
                   d="M20 12C20 16.4178 16.4178 20 12 20C7.58222 20 4 16.4178 4 12C4 7.58222 7.58222 4 12 4C16.4178 4 20 7.58222 20 12Z"
-                  fill="var(--a-surface-action-selected)"
+                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                 />
               </g>
             </svg>

@navikt/core/react/src/pagination/Pagination.tsx

@@ -9,6 +9,17 @@ import PaginationItem, {
   PaginationItemType,
 } from "./PaginationItem";
 
+interface RenderItemProps
+  extends Pick<
+    PaginationItemProps,
+    "className" | "disabled" | "selected" | "icon" | "iconPosition"
+  > {
+  children: React.ReactNode;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  page: number;
+  size: Exclude<PaginationProps["size"], undefined>;
+}
+
 export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Current page.
@@ -46,9 +57,9 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   prevNextTexts?: boolean;
   /**
    * Override pagination item rendering.
-   * @default (item: PaginationItemProps) => <PaginationItem {...item} />
+   * @default PaginationItem
    */
-  renderItem?: (item: PaginationItemProps) => ReturnType<React.FC>;
+  renderItem?: (item: RenderItemProps) => ReturnType<React.FC>;
   /**
    * Pagination heading. We recommend adding heading instead of `aria-label` to help assistive technologies with an extra navigation-stop.
    */
@@ -101,6 +112,12 @@ export const getSteps = ({
   ];
 };
 
+/**
+ * TODO: These classes can be removed in darkside update
+ * - navds-pagination--prev-next--with-text
+ * - navds-pagination__prev-next
+ */
+
 /**
  * A component that displays pagination controls.
  *
@@ -111,7 +128,7 @@ export const getSteps = ({
  * ```jsx
  * <Pagination
  *   page={pageState}
- *   onPageChange={(x) => setPageState(x)}
+ *   onPageChange={setPageState}
  *   count={9}
  *   boundaryCount={1}
  *   siblingCount={1}
@@ -131,9 +148,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       prevNextTexts = false,
       srHeading,
       "aria-labelledby": ariaLabelledBy,
-      renderItem: Item = (item: PaginationItemProps) => (
-        <PaginationItem {...item} />
-      ),
+      renderItem: Item = PaginationItem,
       ...rest
     },
     ref,
@@ -218,6 +233,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               ) : (
                 <li key={step}>
                   <Item
+                    /* Remember to update RenderItemProps if you make changes to props sent into Item */
                     onClick={() => onPageChange?.(n)}
                     selected={page === n}
                     page={n}

@navikt/core/react/src/pagination/PaginationItem.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { OverridableComponent } from "../util/types";
 
 export interface PaginationItemProps extends ButtonProps {
@@ -39,11 +40,14 @@ export const Item: PaginationItemType = forwardRef(
     },
     ref,
   ) => {
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     return (
       <Button
         as={Component}
-        variant="tertiary"
+        variant={themeContext ? "tertiary-neutral" : "tertiary"}
         aria-current={selected}
+        data-selected={selected}
         ref={ref}
         className={cl("navds-pagination__item", className, {
           "navds-pagination__item--selected": selected,

@navikt/core/react/src/popover/Popover.tsx

@@ -11,6 +11,7 @@ import React, { HTMLAttributes, forwardRef, useContext, useRef } from "react";
 import { DateContext } from "../date/context";
 import { useModalContext } from "../modal/Modal.context";
 import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { useClientLayoutEffect } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -124,6 +125,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
     const chosenFlip = isInDatepicker ? false : _flip;
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     const {
       update,
       refs,
@@ -135,7 +138,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       placement,
       open,
       middleware: [
-        flOffset(offset ?? (arrow ? 16 : 4)),
+        flOffset(offset ?? (themeContext ? 8 : arrow ? 16 : 4)),
         chosenFlip &&
           flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         shift({ padding: 12 }),
@@ -187,7 +190,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
           aria-hidden={!open || !anchorEl}
         >
           {children}
-          {arrow && (
+          {/* Hide arrow in new design, prop will be removed in breaking change update */}
+          {arrow && !themeContext && (
             <div
               ref={(node) => {
                 arrowRef.current = node;

@navikt/core/react/src/popover/popover.stories.tsx

@@ -92,6 +92,7 @@ export const Placement = () => {
   );
 };
 
+/* TODO: All stories with Arrow can be removed after darkside update */
 export const Arrow = () => {
   return (
     <div className="colgap" style={{ gap: "12rem" }}>