Version Packages (#3392)

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

.github/workflows/chromatic.yml

@@ -55,8 +55,8 @@ jobs:
           exitZeroOnChanges: false
           buildScriptName: "build:storybook-chromatic"
           onlyChanged: true
-          untraced: "**/package.json|yarn.lock|**/*.md|**/core/css/**/*.darkside.css"
-          externals: "\\@navikt/core/css/**/*.css|\\!@navikt/core/css/darkside/**/*.css"
+          untraced: "**/package.json|yarn.lock|**/*.md"
+          externals: "**/core/css/*.css|**/core/css/baseline/*.css|**/core/css/form/*.css|**/core/css/primitives/*.css"
           traceChanged: true
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}

.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,85 +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 { UNSAFE_AkselTheme } from "../@navikt/core/react/src/provider";
-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, 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
-  );
-};
-
-export const decorators = [
-  (StoryFn, context) => (
-    <ModeDecorator mode={context.globals.mode} theme={context.globals.theme}>
-      <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;

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-icons
 
+## 7.5.3
+
+## 7.5.2
+
 ## 7.5.1
 
 ## 7.5.0

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint
 
+## 7.5.3
+
+## 7.5.2
+
 ## 7.5.1
 
 ## 7.5.0

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.5.1",
+  "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.5.1",
-    "@navikt/ds-tokens": "^7.5.1",
+    "@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,19 @@
 # @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

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.5.1",
+  "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.5.1",
+    "@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,13 @@
 # @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

@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/chips.darkside.css

@@ -33,6 +33,12 @@
   }
 }
 
+.navds-chips--readonly {
+  .navds-chips__chip {
+    background-color: var(--ax-bg-neutral-moderateA);
+  }
+}
+
 .navds-chips--small {
   .navds-chips__chip {
     min-height: 1.5rem;

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

@@ -21,7 +21,7 @@
   }
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hover);
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:focus-visible {

@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.5.1",
+  "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.5.1",
+    "@navikt/ds-tokens": "^7.5.3",
     "autoprefixer": "^10.4.20",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @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

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.5.1",
+  "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.5.1",
-    "@navikt/ds-tokens": "^7.5.1",
+    "@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"
@@ -629,7 +629,7 @@
   },
   "peerDependencies": {
     "@types/react": ">=17.0.30",
-    "react": ">=17.0.0"
+    "react": ">=17.0.0 || >19.0.0-rc"
   },
   "peerDependenciesMeta": {
     "@types/react": {

@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/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/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/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/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/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/pagination/Pagination.tsx

@@ -112,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.
  *

@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" }}>

@navikt/core/react/src/timeline/AxisLabels.tsx

@@ -1,4 +1,5 @@
 import {
+  Locale,
   addDays,
   addMonths,
   addYears,
@@ -13,9 +14,9 @@ import {
   startOfYear,
   subDays,
 } from "date-fns";
-import { nb as nbLocale } from "date-fns/locale";
 import React from "react";
 import { Detail } from "../typography/Detail";
+import { TFunction, useDateLocale, useI18n } from "../util/i18n/i18n.context";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { isVisible } from "./utils";
 import { horizontalPositionAndWidth } from "./utils/calc";
@@ -26,7 +27,8 @@ export const dayLabels = (
   end: Date,
   totalDays: number,
   direction: "left" | "right",
-  template: string = "dd.MM",
+  template: string,
+  locale: Locale,
 ): AxisLabel[] => {
   const increment = Math.ceil(totalDays / 10);
   const lastDay = startOfDay(end);
@@ -44,7 +46,7 @@ export const dayLabels = (
       return {
         direction,
         horizontalPosition,
-        label: format(day, template, { locale: nbLocale }),
+        label: format(day, template, { locale }),
         date: day,
         width,
       };
@@ -56,7 +58,8 @@ export const monthLabels = (
   start: Date,
   end: Date,
   direction: "left" | "right",
-  template: string = "MMM yy",
+  template: string,
+  locale: Locale,
 ): AxisLabel[] => {
   const startMonth = startOfMonth(start);
   const endMonth = endOfMonth(end);
@@ -72,7 +75,7 @@ export const monthLabels = (
     return {
       direction,
       horizontalPosition,
-      label: format(month, template, { locale: nbLocale }),
+      label: format(month, template, { locale }),
       date: month,
       width,
     };
@@ -83,7 +86,8 @@ export const yearLabels = (
   start: Date,
   end: Date,
   direction: "left" | "right",
-  template: string = "yyyy",
+  template: string,
+  locale: Locale,
 ): AxisLabel[] => {
   const firstYear = startOfYear(start);
   const lastYear = endOfYear(end);
@@ -99,29 +103,33 @@ export const yearLabels = (
     return {
       direction,
       horizontalPosition,
-      label: format(year, template, { locale: nbLocale }),
+      label: format(year, template, { locale }),
       date: year,
       width,
     };
   });
 };
 
-const axisLabels = (
+const getLabels = (
   start: Date,
   end: Date,
   direction: "left" | "right",
-  templates?: AxisLabelTemplates,
+  locale: Locale,
+  translate: TFunction<"Timeline">,
 ): AxisLabel[] => {
   const totalDays = differenceInDays(end, start);
   if (totalDays < 40) {
-    return dayLabels(start, end, totalDays, direction, templates?.day);
+    const dayTemplate = translate("dayFormat");
+    return dayLabels(start, end, totalDays, direction, dayTemplate, locale);
   }
 
   if (totalDays < 370) {
-    return monthLabels(start, end, direction, templates?.month);
+    const monthTemplate = translate("monthFormat");
+    return monthLabels(start, end, direction, monthTemplate, locale);
   }
 
-  return yearLabels(start, end, direction, templates?.year);
+  const yearTemplate = translate("yearFormat");
+  return yearLabels(start, end, direction, yearTemplate, locale);
 };
 
 export const AxisLabels = ({
@@ -130,13 +138,19 @@ export const AxisLabels = ({
   templates?: AxisLabelTemplates;
 }) => {
   const { endDate, startDate, direction } = useTimelineContext();
-  const labels = axisLabels(startDate, endDate, direction, templates).filter(
-    isVisible,
-  );
+
+  const translate = useI18n("Timeline", {
+    dayFormat: templates?.day,
+    monthFormat: templates?.month,
+    yearFormat: templates?.year,
+  });
+  const locale = useDateLocale();
+
+  const labels = getLabels(startDate, endDate, direction, locale, translate);
 
   return (
     <div className="navds-timeline__axislabels" aria-hidden="true">
-      {labels.map((etikett) => (
+      {labels.filter(isVisible).map((etikett) => (
         <Detail
           className="navds-timeline__axislabels-label"
           as="div"

@navikt/core/react/src/timeline/Pin.tsx

@@ -16,6 +16,7 @@ import {
 import { format } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { useI18n } from "../util/i18n/i18n.context";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 import { TimelineComponentTypes } from "./utils/types.internal";
@@ -44,6 +45,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     const { startDate, endDate, direction } = useTimelineContext();
     const [open, setOpen] = useState(false);
     const arrowRef = useRef<HTMLDivElement | null>(null);
+    const translate = useI18n("Timeline");
 
     const {
       context,
@@ -100,7 +102,9 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
             {...rest}
             ref={mergedRef}
             className="navds-timeline__pin-button"
-            aria-label={`pin:${format(date, "dd.MM.yyyy")}`}
+            aria-label={translate("Pin.pin", {
+              date: format(date, translate("dateFormat")),
+            })}
             type="button"
             aria-expanded={children ? open : undefined}
             {...getReferenceProps({

@navikt/core/react/src/timeline/TimelineRow.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import { format } from "date-fns";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../typography/BodyShort";
+import { useI18n } from "../util/i18n/i18n.context";
 import { PeriodContext } from "./hooks/usePeriodContext";
 import { useRowContext } from "./hooks/useRowContext";
 import { useTimelineContext } from "./hooks/useTimelineContext";
@@ -39,6 +40,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
   ({ label, className, headingTag = "h3", icon, ...rest }, ref) => {
     const { periods, id, active } = useRowContext();
     const { setActiveRow } = useTimelineContext();
+    const translate = useI18n("Timeline");
 
     const latest = periods.reduce((a, b) => {
       return a.end > b.end ? a : b;
@@ -77,11 +79,11 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
             ref={ref}
             aria-label={
               periods.length === 0
-                ? "Ingen perioder"
-                : `${format(earliest.start, "dd.MM.yyyy")} til ${format(
-                    latest.end,
-                    "dd.MM.yyyy",
-                  )}`
+                ? translate("Row.noPeriods")
+                : translate("Row.period", {
+                    start: format(earliest.start, translate("dateFormat")),
+                    end: format(latest.end, translate("dateFormat")),
+                  })
             }
             className={cl("navds-timeline__row-periods", className)}
             onKeyDown={(e) => {

@navikt/core/react/src/timeline/period/ClickablePeriod.tsx

@@ -16,11 +16,12 @@ import {
 import cl from "clsx";
 import React, { useRef, useState } from "react";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
-import { PeriodProps } from "./types";
+import type { PeriodProps } from "./types";
 
 interface TimelineClickablePeriodProps extends PeriodProps {
   onSelectPeriod?: (
@@ -52,6 +53,7 @@ const ClickablePeriod = React.memo(
     const { firstFocus } = usePeriodContext();
     const { initiate, addFocusable } = useTimelineContext();
     const arrowRef = useRef<HTMLDivElement | null>(null);
+    const translate = useI18n("Timeline");
 
     const {
       context,
@@ -107,7 +109,7 @@ const ClickablePeriod = React.memo(
             firstFocus && addFocusable(r, index);
             mergedRef(r);
           }}
-          aria-label={ariaLabel(start, end, status, statusLabel)}
+          aria-label={ariaLabel(start, end, status, statusLabel, translate)}
           className={cl(
             "navds-timeline__period--clickable",
             getConditionalClasses(cropped, direction, status),

@navikt/core/react/src/timeline/period/NonClickablePeriod.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React from "react";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
-import { PeriodProps } from "./types";
+import type { PeriodProps } from "./types";
 
 interface TimelineNonClickablePeriodProps extends PeriodProps {
   periodRef?: React.ForwardedRef<HTMLDivElement>;
@@ -20,6 +21,8 @@ const NonClickablePeriod = ({
   restProps,
   periodRef,
 }: TimelineNonClickablePeriodProps) => {
+  const translate = useI18n("Timeline");
+
   return (
     <div
       ref={periodRef}
@@ -36,7 +39,7 @@ const NonClickablePeriod = ({
       <span className="navds-timeline__period--inner">
         {icon}
         <span className="sr-only">
-          {ariaLabel(start, end, status, statusLabel)}
+          {ariaLabel(start, end, status, statusLabel, translate)}
         </span>
       </span>
     </div>

@navikt/core/react/src/timeline/period/index.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
-import { TimelineComponentTypes } from "../utils/types.internal";
+import type { TimelineComponentTypes } from "../utils/types.internal";
 import ClickablePeriod from "./ClickablePeriod";
 import NonClickablePeriod from "./NonClickablePeriod";
 

@navikt/core/react/src/timeline/period/types.ts

@@ -1,7 +1,9 @@
+import type { TimelinePeriodProps } from ".";
+
 export interface PeriodProps {
   start: Date;
   end: Date;
-  status: string;
+  status: Exclude<TimelinePeriodProps["status"], undefined>;
   cropped: string;
   direction: string;
   width: number;

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

@@ -1,13 +1,16 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import * as React from "react";
 import { useState } from "react";
 import { CheckmarkCircleFillIcon } from "@navikt/aksel-icons";
+import { VStack } from "../layout/stack";
+import UNSAFE_AkselLanguageProvider from "../provider/i18n/LanguageProvider";
+import en from "../util/i18n/locales/en";
 import Timeline from "./Timeline";
 
 export default {
   title: "ds-react/Timeline",
   component: Timeline,
-  argTypes: {},
+  parameters: { chromatic: { disable: true } },
 } satisfies Meta<typeof Timeline>;
 
 const DummyLabel = () => {
@@ -102,10 +105,10 @@ const row2 = [
   },
 ];
 
-export const Default = () => {
+export const Default: StoryFn = (props) => {
   return (
     <div style={{ width: "80vw" }}>
-      <Timeline>
+      <Timeline {...props}>
         <Timeline.Row
           label="Row 1"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
@@ -142,8 +145,22 @@ export const Default = () => {
     </div>
   );
 };
+Default.argTypes = {
+  direction: {
+    options: ["left", "right"],
+    control: { type: "select" },
+  },
+};
 
-export const WithPins = () => {
+export const English: StoryFn = () => {
+  return (
+    <UNSAFE_AkselLanguageProvider translations={[en]}>
+      <Default />
+    </UNSAFE_AkselLanguageProvider>
+  );
+};
+
+export const WithPins: StoryFn = () => {
   return (
     <div style={{ width: "80vw" }}>
       <Timeline>
@@ -183,7 +200,7 @@ export const WithPins = () => {
           })}
         </Timeline.Row>
       </Timeline>
-      <div style={{ height: "8rem" }} />
+      <div style={{ height: "6rem" }} />
       <Timeline>
         <Timeline.Pin date={new Date("Apr 15 2022")}>Pin 1</Timeline.Pin>
         <Timeline.Pin date={new Date("Jun 12 2022")}>Pin 2</Timeline.Pin>
@@ -257,7 +274,7 @@ export const WithPins = () => {
   );
 };
 
-export const WithZoom = () => {
+export const WithZoom: StoryFn = () => {
   return (
     <div style={{ width: "80vw" }}>
       <Timeline>
@@ -303,7 +320,7 @@ export const WithZoom = () => {
   );
 };
 
-export const ActivePeriod = () => {
+export const ActivePeriod: StoryFn = () => {
   const [activePeriod, setActivePeriod] = useState(row1[0]);
 
   return (
@@ -371,36 +388,47 @@ export const ActivePeriod = () => {
   );
 };
 
-export const WithDayLabels = () => {
+export const WithDayLabels: StoryFn = () => {
+  const component = (
+    <Timeline>
+      <Timeline.Row
+        label="Row 1"
+        icon={<CheckmarkCircleFillIcon aria-hidden />}
+      >
+        <Timeline.Period
+          start={new Date("Feb 4 2022")}
+          end={new Date("Feb 13 2022")}
+          status="success"
+        />
+      </Timeline.Row>
+      <Timeline.Row
+        label="Row 2"
+        icon={<CheckmarkCircleFillIcon aria-hidden />}
+      >
+        <Timeline.Period
+          start={new Date("Feb 17 2022")}
+          end={new Date("Feb 22 2022")}
+          status="warning"
+        />
+      </Timeline.Row>
+    </Timeline>
+  );
+
   return (
-    <div style={{ width: "80vw" }}>
-      <Timeline>
-        <Timeline.Row
-          label="Row 1"
-          icon={<CheckmarkCircleFillIcon aria-hidden />}
-        >
-          <Timeline.Period
-            start={new Date("Feb 4 2022")}
-            end={new Date("Feb 13 2022")}
-            status="success"
-          />
-        </Timeline.Row>
-        <Timeline.Row
-          label="Row 2"
-          icon={<CheckmarkCircleFillIcon aria-hidden />}
-        >
-          <Timeline.Period
-            start={new Date("Feb 17 2022")}
-            end={new Date("Feb 22 2022")}
-            status="warning"
-          />
-        </Timeline.Row>
-      </Timeline>
-    </div>
+    <VStack gap="8" width="80vw">
+      {component}
+
+      <div>
+        EN:
+        <UNSAFE_AkselLanguageProvider translations={[en]}>
+          {component}
+        </UNSAFE_AkselLanguageProvider>
+      </div>
+    </VStack>
   );
 };
 
-export const WithYearLabels = () => {
+export const WithYearLabels: StoryFn = () => {
   return (
     <div style={{ width: "80vw" }}>
       <Timeline>
@@ -429,7 +457,7 @@ export const WithYearLabels = () => {
   );
 };
 
-export const ContentDemo = () => {
+export const ContentDemo: StoryFn = () => {
   const [activePeriod, setActivePeriod] = useState<any>(undefined);
 
   return (
@@ -513,3 +541,22 @@ export const ContentDemo = () => {
     </div>
   );
 };
+
+export const Chromatic = () => (
+  <>
+    <Default />
+    <h2>English</h2>
+    <English />
+    <h2>WithPins</h2>
+    <WithPins />
+    <h2>WithZoom</h2>
+    <WithZoom />
+    <h2 style={{ clear: "right" }}>ActivePeriod</h2>
+    <ActivePeriod />
+    <h2>WithDayLabels</h2>
+    <WithDayLabels />
+    <h2>WithYearLabels</h2>
+    <WithYearLabels />
+  </>
+);
+Chromatic.parameters = { chromatic: { disable: false } };

@navikt/core/react/src/timeline/utils/period.ts

@@ -1,5 +1,7 @@
 import cl from "clsx";
 import { format } from "date-fns";
+import type { TFunction } from "../../util/i18n/i18n.context";
+import type { PeriodProps } from "../period/types";
 
 export const getConditionalClasses = (
   cropped: string,
@@ -17,32 +19,19 @@ export const getConditionalClasses = (
   });
 };
 
-const translateStatus = (status: string): string => {
-  switch (status) {
-    case "success":
-      return "Suksess";
-    case "warning":
-      return "Advarsel";
-    case "danger":
-      return "Fare";
-    case "info":
-      return "Info";
-    case "neutral":
-      return "Nøytral";
-    default:
-      return status;
-  }
-};
-
 export const ariaLabel = (
   startDate: Date,
   endDate: Date,
-  status: string,
-  statusLabel?: string,
+  status: PeriodProps["status"],
+  statusLabel: string | undefined,
+  translate: TFunction<"Timeline">,
 ): string => {
-  const start = format(startDate, "dd.MM.yyyy");
-  const end = format(endDate, "dd.MM.yyyy");
-  return `${
-    statusLabel ? statusLabel : translateStatus(status)
-  } fra ${start} til ${end}`;
+  const dateFormat = translate("dateFormat");
+  const start = format(startDate, dateFormat);
+  const end = format(endDate, dateFormat);
+  return translate("Period.period", {
+    status: statusLabel || translate(`Period.${status}`),
+    start,
+    end,
+  });
 };

@navikt/core/react/src/timeline/zoom/ZoomButton.tsx

@@ -8,6 +8,7 @@ import {
 } from "date-fns";
 import React, { forwardRef } from "react";
 import { Detail } from "../../typography/Detail";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 
 export interface TimelineZoomButtonProps {
@@ -33,6 +34,8 @@ export type ZoomButtonType = React.ForwardRefExoticComponent<
 export const ZoomButton: ZoomButtonType = forwardRef(
   ({ label, interval, count, ...rest }, ref) => {
     const { setStart, endDate, startDate, direction } = useTimelineContext();
+    const translate = useI18n("Timeline");
+    const dateFormat = translate("dateFormat");
 
     let startOfRange: Date;
 
@@ -59,11 +62,11 @@ export const ZoomButton: ZoomButtonType = forwardRef(
           type="button"
           aria-label={
             !currentZoom
-              ? `Zoom tidslinjen ${format(
-                  startOfRange,
-                  "dd.MM.yyyy",
-                )} til ${format(endDate, "dd.MM.yyyy")}`
-              : "Tilbakestill til initiell tidsperspektiv"
+              ? translate("Zoom.zoom", {
+                  start: format(startOfRange, dateFormat),
+                  end: format(endDate, dateFormat),
+                })
+              : translate("Zoom.reset")
           }
           ref={ref}
           {...rest}

@navikt/core/react/src/util/i18n/get.ts

@@ -7,7 +7,7 @@ const OBJECT_NOTATION_MATCHER = /(\w+)/g;
 
 export function get(
   keypath: string | string[],
-  ...objs: (PartialTranslations | undefined)[]
+  objs: (PartialTranslations | undefined)[],
 ) {
   const keys = Array.isArray(keypath) ? keypath : getKeypath(keypath);
 
@@ -32,7 +32,7 @@ export function get(
   }
 
   throw new Error(
-    "Error translating key. The keypath does not resolve to a string.",
+    `Error translating key. Keypath '${keypath}' does not resolve to a string.`,
   );
 }
 

@navikt/core/react/src/util/i18n/i18n.context.ts

@@ -1,7 +1,13 @@
+import { Locale } from "date-fns";
 import { useContext } from "react";
 import { LanguageProviderContext } from "../../provider/i18n/LanguageProvider";
 import { get } from "./get";
-import { Component, ComponentTranslation, Translations } from "./i18n.types";
+import {
+  Component,
+  ComponentTranslation,
+  PartialTranslations,
+  Translations,
+} from "./i18n.types";
 
 /**
  * https://regex101.com/r/LYKWi3/1
@@ -15,27 +21,29 @@ type NestedKeyOf<ObjectType extends object> = {
     : `${Key}`;
 }[keyof ObjectType & (string | number)];
 
+export type TFunction<T extends Component> = (
+  keypath: NestedKeyOf<Translations[T]>,
+  replacements?: Record<string, string | number>,
+) => string;
+
 export function useI18n<T extends Component>(
   componentName: T,
   ...local: (ComponentTranslation<T> | undefined)[]
 ) {
   const languageProviderContext = useContext(LanguageProviderContext);
   const i18n = languageProviderContext.translations;
+  const i18nObjects: (PartialTranslations | undefined)[] = [
+    ...local,
+    ...(Array.isArray(i18n)
+      ? i18n.map((t) => t[componentName])
+      : [i18n[componentName]]),
+  ];
 
   /**
    * https://github.com/Shopify/polaris/blob/2115f9ba2f5bcbf2ad15745233501bff2db81ecf/polaris-react/src/utilities/i18n/I18n.ts#L24
    */
-  const translate = (
-    keypath: NestedKeyOf<Translations[T]>,
-    replacements?: Record<string, string | number>,
-  ) => {
-    const text = get(
-      keypath,
-      ...local,
-      ...(Array.isArray(i18n)
-        ? i18n.map((t) => t[componentName])
-        : [i18n[componentName]]),
-    );
+  const translate: TFunction<T> = (keypath, replacements) => {
+    const text = get(keypath, i18nObjects);
 
     if (replacements) {
       return text.replace(REPLACE_REGEX, (match) => {
@@ -43,7 +51,6 @@ export function useI18n<T extends Component>(
 
         if (replacements[replacement] === undefined) {
           const replacementData = JSON.stringify(replacements);
-
           throw new Error(
             `Error translating key '${keypath}'. No replacement syntax ({}) found for key '${replacement}'. The following replacements were passed: '${replacementData}'`,
           );
@@ -58,3 +65,18 @@ export function useI18n<T extends Component>(
 
   return translate;
 }
+
+export function useDateLocale() {
+  const languageProviderContext = useContext(LanguageProviderContext);
+  const i18n = languageProviderContext.translations;
+  const i18nObjects = Array.isArray(i18n)
+    ? i18n.map((t) => t.global)
+    : [i18n.global];
+
+  for (const obj of i18nObjects) {
+    if (obj?.dateLocale) {
+      return obj.dateLocale as Locale;
+    }
+  }
+  throw new Error("dateLocale not found.");
+}

@navikt/core/react/src/util/i18n/locales.test.tsx

@@ -6,7 +6,10 @@ import nb from "./locales/nb";
 import nn from "./locales/nn";
 
 function checkValues(obj: Translations | Record<string, string>) {
-  Object.values(obj).forEach((value) => {
+  Object.entries(obj).forEach(([key, value]) => {
+    if (key === "dateLocale") {
+      return;
+    }
     if (typeof value === "object") {
       checkValues(value);
     } else {

@navikt/core/react/src/util/i18n/locales/en.ts

@@ -1,7 +1,9 @@
+import { enGB } from "date-fns/locale";
 import type { Translations } from "../i18n.types";
 
 export default {
   global: {
+    dateLocale: enGB,
     showMore: "Show more",
     showLess: "Show less",
     readOnly: "Read-only",
@@ -70,4 +72,29 @@ export default {
     charsTooMany: "{chars} characters too many",
     charsLeft: "{chars} characters left",
   },
+  Timeline: {
+    dateFormat: "yyyy-MM-dd",
+    dayFormat: "d MMM",
+    monthFormat: "MMM yyyy",
+    yearFormat: "yyyy",
+    Row: {
+      noPeriods: "No periods",
+      period: "{start} to {end}",
+    },
+    Period: {
+      success: "Success",
+      warning: "Warning",
+      danger: "Danger",
+      info: "Info",
+      neutral: "Neutral",
+      period: "{status} from {start} to {end}",
+    },
+    Pin: {
+      pin: "Pin: {date}",
+    },
+    Zoom: {
+      zoom: "Zoom timeline {start} to {end}",
+      reset: "Reset zoom",
+    },
+  },
 } satisfies Translations;

@navikt/core/react/src/util/i18n/locales/nb.ts

@@ -1,13 +1,12 @@
+import { Locale, nb } from "date-fns/locale";
+
 interface TranslationMap {
-  [component: string]:
-    | Record<string, string>
-    | {
-        [subComponent: string]: Record<string, string>;
-      };
+  [component: string]: Record<string, string | Record<string, string> | Locale>;
 }
 
 export default {
   global: {
+    dateLocale: nb,
     showMore: "Vis mer",
     showLess: "Vis mindre",
     readOnly: "Skrivebeskyttet",
@@ -78,4 +77,29 @@ export default {
     charsTooMany: "{chars} tegn for mye",
     charsLeft: "{chars} tegn igjen",
   },
+  Timeline: {
+    dateFormat: "dd.MM.yyyy",
+    dayFormat: "dd.MM",
+    monthFormat: "MMM yy",
+    yearFormat: "yyyy",
+    Row: {
+      noPeriods: "Ingen perioder",
+      period: "{start} til {end}",
+    },
+    Period: {
+      success: "Suksess",
+      warning: "Advarsel",
+      danger: "Fare",
+      info: "Info",
+      neutral: "Nøytral", // TODO: Consider making these global
+      period: "{status} fra {start} til {end}",
+    },
+    Pin: {
+      pin: "Pin: {date}",
+    },
+    Zoom: {
+      zoom: "Zoom tidslinjen {start} til {end}",
+      reset: "Tilbakestill tidsperspektiv",
+    },
+  },
 } satisfies TranslationMap;

@navikt/core/react/src/util/i18n/locales/nn.ts

@@ -1,7 +1,9 @@
+import { nn } from "date-fns/locale";
 import type { Translations } from "../i18n.types";
 
 export default {
   global: {
+    dateLocale: nn,
     showMore: "Vis meir",
     showLess: "Vis mindre",
     readOnly: "Skrivebeskytta",
@@ -70,4 +72,29 @@ export default {
     charsTooMany: "{chars} teikn for mykje",
     charsLeft: "{chars} teikn igjen",
   },
+  Timeline: {
+    dateFormat: "dd.MM.yyyy",
+    dayFormat: "dd.MM",
+    monthFormat: "MMM yy",
+    yearFormat: "yyyy",
+    Row: {
+      noPeriods: "Ingen periodar",
+      period: "{start} til {end}",
+    },
+    Period: {
+      success: "Suksess",
+      warning: "Åtvaring",
+      danger: "Fare",
+      info: "Info",
+      neutral: "Nøytral",
+      period: "{status} frå {start} til {end}",
+    },
+    Pin: {
+      pin: "Pin: {date}",
+    },
+    Zoom: {
+      zoom: "Zoom tidslina {start} til {end}",
+      reset: "Tilbakestill tidsperspektiv",
+    },
+  },
 } satisfies Translations;

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind
 
+## 7.5.3
+
+## 7.5.2
+
 ## 7.5.1
 
 ## 7.5.0

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "7.5.1",
+  "version": "7.5.3",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -25,7 +25,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^7.5.1",
+    "@navikt/ds-tokens": "^7.5.3",
     "color": "4.2.3",
     "lodash": "^4.17.21",
     "tailwindcss": "^3.3.3",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tokens
 
+## 7.5.3
+
+## 7.5.2
+
 ## 7.5.1
 
 ## 7.5.0

@navikt/core/tokens/darkside/tokens/global-dark.ts

@@ -16,7 +16,7 @@ export const globalColorDarkModeConfigWithoutAlpha: GlobalConfigT = {
     "700": { value: "#8a92a0", type: "global-color", group: "neutral" },
     "800": { value: "#949ba8", type: "global-color", group: "neutral" },
     "900": { value: "#a5acb6", type: "global-color", group: "neutral" },
-    "1000": { value: "#c4c9d0", type: "global-color", group: "neutral" },
+    "1000": { value: "#dfe1e5", type: "global-color", group: "neutral" },
   },
   accent: {
     "100": { value: "#101d2d", type: "global-color", group: "accent" },

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "7.5.1",
+  "version": "7.5.3",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

CHANGELOG.md

@@ -12,10 +12,18 @@
 
 ### @navikt/ds-react
 
+- Allow RC versions of React 19 through peerDependencies ([#3391](https://github.com/navikt/aksel/pull/3391))
+
+* Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))
+
 - React: Allow all react versions above 17.0.0 trough peerDependencies. ([#3334](https://github.com/navikt/aksel/pull/3334))
 
 * 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))
 
+### @navikt/ds-css
+
+- Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))
+
 ## 7.4
 
 ### @navikt/ds-react

CODEOWNERS

@@ -1 +1 @@
-* @navikt/designsystem @navikt/aksel
+README.md @navikt/designsystem @navikt/aksel

aksel.nav.no/package.json

@@ -15,10 +15,10 @@
     "playroom"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^7.5.1",
-    "@navikt/ds-css": "^7.5.1",
-    "@navikt/ds-react": "^7.5.1",
-    "@navikt/ds-tailwind": "^7.5.1",
-    "@navikt/ds-tokens": "^7.5.1"
+    "@navikt/aksel-icons": "^7.5.3",
+    "@navikt/ds-css": "^7.5.3",
+    "@navikt/ds-react": "^7.5.3",
+    "@navikt/ds-tailwind": "^7.5.3",
+    "@navikt/ds-tokens": "^7.5.3"
   }
 }

aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx

@@ -11,7 +11,7 @@ import { BodyLong, Button, Chips, HStack } from "@navikt/ds-react";
 import SnippetLazy from "@/cms/code-snippet/SnippetLazy";
 import ErrorBoundary from "@/error-boundary";
 import { CodeExamplesT } from "@/types";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { CodeSandbox } from "./parts/CodeSandbox";
 import { Sandbox } from "./parts/Sandbox";
 
@@ -30,6 +30,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
 
   const router = useRouter();
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const resizerRef = useRef<HTMLDivElement>(null);
 
   const handleExampleLoad = () => {
     const iframePadding = node.compact
@@ -133,7 +134,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
         >
           {fil?.description && (
             <BodyLong className="mb-2">
-              <TextWithMarkdownLink>{fil.description}</TextWithMarkdownLink>
+              <TextWithMarkdown>{fil.description}</TextWithMarkdown>
             </BodyLong>
           )}
 
@@ -148,20 +149,28 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                   },
                 )}
               >
-                <iframe
-                  ref={iframeRef}
-                  src={`/${demoVariant}/${node.dir.title}/${fil.navn}`}
-                  height={frameState}
-                  onLoad={handleExampleLoad}
-                  aria-label={`${node.dir?.title} ${fil.title} eksempel`}
-                  title="Demo"
+                <div
+                  ref={resizerRef} // Resize directly on iframe doesn't work in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=680823)
                   className={cl(
-                    "block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
-                    {
-                      invisible: unloaded,
-                    },
+                    "max-w-4xl resize-x overflow-hidden shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
+                    { invisible: unloaded },
                   )}
-                />
+                >
+                  <iframe
+                    ref={iframeRef}
+                    src={`/${demoVariant}/${node.dir.title}/${fil.navn}`}
+                    height={frameState}
+                    onLoad={handleExampleLoad}
+                    aria-label={`${node.dir?.title} ${fil.title} eksempel`}
+                    title="Demo"
+                    className="block max-h-[calc(100vh-200px)] w-full bg-white"
+                    style={{
+                      // Prevent the iframe from covering up the resize handle in Safari
+                      clipPath:
+                        "polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%)",
+                    }}
+                  />
+                </div>
                 {unloaded && (
                   <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
                     <div className="grid w-3/5 gap-2">
@@ -182,8 +191,8 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                           <MobileSmallIcon title="Sett eksempel til mobilbredde" />
                         }
                         onClick={() => {
-                          if (iframeRef.current) {
-                            iframeRef.current.style.width = "360px";
+                          if (resizerRef.current) {
+                            resizerRef.current.style.width = "360px";
                           }
                         }}
                       />
@@ -195,8 +204,8 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                           <LaptopIcon title="Sett eksempel til desktopbredde" />
                         }
                         onClick={() => {
-                          if (iframeRef.current) {
-                            iframeRef.current.style.width = "";
+                          if (resizerRef.current) {
+                            resizerRef.current.style.width = "";
                           }
                         }}
                       />

aksel.nav.no/website/components/sanity-modules/intro-seksjon/IntroSeksjon.tsx

@@ -2,7 +2,7 @@ import ErrorBoundary from "@/error-boundary";
 import { SanityBlockContent } from "@/sanity-block";
 import { AkselGrunnleggendeDocT, AkselKomponentDocT } from "@/types";
 import { List, ListItem } from "@/web/List";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 
 type IntroProps = {
   node: AkselKomponentDocT["intro"] | AkselGrunnleggendeDocT["intro"];
@@ -25,7 +25,7 @@ const Intro = ({ node, internal }: IntroProps) => {
           {internal && <ListItem icon>Bruk på interne flater</ListItem>}
           {node.brukes_til.map((x) => (
             <ListItem icon key={x}>
-              <TextWithMarkdownLink>{x}</TextWithMarkdownLink>
+              <TextWithMarkdown>{x}</TextWithMarkdown>
             </ListItem>
           ))}
         </List>
@@ -33,7 +33,7 @@ const Intro = ({ node, internal }: IntroProps) => {
           <List title="Uegnet til:">
             {node.brukes_ikke_til.map((x) => (
               <ListItem icon key={x}>
-                <TextWithMarkdownLink>{x}</TextWithMarkdownLink>
+                <TextWithMarkdown>{x}</TextWithMarkdown>
               </ListItem>
             ))}
           </List>

aksel.nav.no/website/components/website-modules/TextWithMarkdown.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import AkselLink from "@/web/AkselLink";
+import InlineCode from "./InlineCode";
+
+/**
+ * Takes a string and replaces markdown links with Link components
+ * and backticks with InlineCode components.
+ */
+const TextWithMarkdown = ({ children: input }: { children: string }) => {
+  const regex = /\[([^\]]+)\]\(([^\s)]+)\)|`([^`]+)`/g; // The part before the pipe finds links, the part after finds backticks.
+  let lastIndex = 0;
+  const elements: React.ReactNode[] = [];
+
+  input.replace(regex, (match, text, url, code, index) => {
+    if (index > lastIndex) {
+      elements.push(input.slice(lastIndex, index));
+    }
+
+    if (code) {
+      elements.push(<InlineCode key={index}>{code}</InlineCode>);
+    } else {
+      elements.push(
+        <AkselLink href={url} key={index}>
+          {text}
+        </AkselLink>,
+      );
+    }
+
+    lastIndex = index + match.length;
+    return match;
+  });
+
+  if (lastIndex < input.length) {
+    elements.push(input.slice(lastIndex));
+  }
+
+  return <>{elements}</>;
+};
+
+export { TextWithMarkdown };

aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import AkselLink from "@/web/AkselLink";
-
-/**
- * Splits a string into text and links,
- * and returns an array of React elements.
- */
-const TextWithMarkdownLink = ({ children: input }: { children: string }) => {
-  const regex = /\[([^\]]+)\]\(([^\s)]+)\)/g;
-  let lastIndex = 0;
-  const elements: React.ReactNode[] = [];
-
-  input.replace(regex, (match, text, url, index) => {
-    if (index > lastIndex) {
-      elements.push(input.slice(lastIndex, index));
-    }
-    elements.push(
-      <AkselLink href={url} key={index}>
-        {text}
-      </AkselLink>,
-    );
-
-    lastIndex = index + match.length;
-    return match;
-  });
-
-  if (lastIndex < input.length) {
-    elements.push(input.slice(lastIndex));
-  }
-
-  return <>{elements}</>;
-};
-
-export { TextWithMarkdownLink };

aksel.nav.no/website/components/website-modules/examples/__parts/Dekorator.tsx

@@ -14,7 +14,7 @@ function Env() {
   return (
     <div
       id="decorator-env"
-      data-src={`${MILJO_URL}/env?context=privatperson&simple=true&availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]`}
+      data-src={`${MILJO_URL}/env?context=privatperson&simple=true`}
     />
   );
 }

aksel.nav.no/website/components/website-modules/examples/__parts/PageDemoContent.tsx

@@ -0,0 +1,23 @@
+function Content({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="decorator-content">
+      <style>
+        {`.decorator-content {
+          padding-block: 5rem;
+          padding-inline: 0.25rem;
+          display: grid;
+          place-content: center;
+          background: repeating-linear-gradient(
+            45deg,
+            #eee,
+            #eee 10px,
+            #fff 10px,
+            #fff 20px
+          );`}
+      </style>
+      {children}
+    </div>
+  );
+}
+
+export { Content };

aksel.nav.no/website/components/website-modules/examples/examples.module.css

@@ -36,3 +36,7 @@
 .containerStaticFull {
   padding-block: 1.5rem;
 }
+
+.containerFullscreen {
+  padding: 0;
+}

aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx

@@ -12,11 +12,12 @@ import styles from "./examples.module.css";
 
 type withDsT = {
   /**
-   * Full: No horizontal centering (i.e. full width).
+   * Full: No horizontal centering (i.e. full width with padding).
    * Static: No vertical centering and static (but responsive) width. Used for dynamic-height examples like ExpansionCard.
    * Static-full: No centering in any direction.
+   * Fullscreen: No centering and no padding.
    */
-  variant?: "full" | "static" | "static-full";
+  variant?: "full" | "static" | "static-full" | "fullscreen";
   background?: "inverted" | "subtle";
   showBreakpoints?: boolean;
 };
@@ -84,6 +85,7 @@ export const withDsExample = (
           [styles.containerStatic]: variant === "static",
           [styles.containerFull]: variant === "full",
           [styles.containerStaticFull]: variant === "static-full",
+          [styles.containerFullscreen]: variant === "fullscreen",
         })}
         style={{ background: getBg(background) }}
       >

aksel.nav.no/website/pages/eksempler/popover/demo.tsx

@@ -37,5 +37,5 @@ export const Demo = {
 
 export const args = {
   index: 0,
-  desc: "Popover kan kobles til de fleste typer elementer med bruk av ref.",
+  desc: "Popover kan kobles til de fleste typer elementer med bruk av `ref`.",
 };

aksel.nav.no/website/pages/eksempler/popover/no-offset.tsx

@@ -40,4 +40,5 @@ export const Demo = {
 
 export const args = {
   index: 2,
+  desc: "Offset er avstanden mellom elementet og popoveren, og kan overstyres.",
 };

aksel.nav.no/website/pages/eksempler/popover/no-padding.tsx

@@ -7,7 +7,7 @@ const Example = () => {
   const [openState, setOpenState] = useState(false);
 
   return (
-    <div className="mb-10">
+    <>
       <Button
         ref={buttonRef}
         onClick={() => setOpenState(!openState)}
@@ -20,15 +20,10 @@ const Example = () => {
         open={openState}
         onClose={() => setOpenState(false)}
         anchorEl={buttonRef.current}
-        flip={false}
-        placement="right"
       >
-        <Popover.Content>
-          Denne popoveren holder seg til høyre selv om det er bedre plass under,
-          fordi <code>flip</code> er satt til <code>false</code>.
-        </Popover.Content>
+        Innhold uten padding.
       </Popover>
-    </div>
+    </>
   );
 };
 
@@ -41,5 +36,6 @@ export const Demo = {
 };
 
 export const args = {
-  index: 4,
+  index: 5,
+  desc: "`Popover.Content` legger bare på litt padding, så den kan utelates.",
 };

aksel.nav.no/website/pages/eksempler/popover/placement.tsx

@@ -66,5 +66,5 @@ export const Demo = {
 
 export const args = {
   index: 3,
-  desc: "Her kan du teste ulike 'placement'-verdier. Legg merke til at Popover overstyrer valget hvis hvis det ikke er plass i den retningen.",
+  desc: "Her kan du teste ulike 'placement'-verdier. Popover styrer selv plassering hvis det ikke er plass i valgt retning.",
 };

aksel.nav.no/website/pages/eksempler/primitive-page/background.tsx

@@ -1,27 +1,27 @@
-import { Box, Page } from "@navikt/ds-react";
+import { Heading, Page } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";
+import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent";
 
 const Example = () => {
+  useDekorator();
+
   return (
-    <Page
-      background="bg-subtle"
-      footer={
-        <Box as="footer" background="surface-neutral-moderate" padding="8">
-          <Page.Block gutters>Footer</Page.Block>
-        </Box>
-      }
-    >
-      <Box as="header" background="surface-neutral-moderate" padding="8">
-        <Page.Block gutters>Header</Page.Block>
-      </Box>
-      <Box
-        as="main"
-        background="surface-alt-3-moderate"
-        padding="8"
-        paddingBlock="16"
-      >
-        <Page.Block gutters>Content</Page.Block>
-      </Box>
+    <Page background="bg-subtle" footer={<Footer />}>
+      <Header />
+      <Page.Block as="main" width="xl" gutters>
+        <Content>
+          <Heading level="1" size="large">
+            Page.Block
+          </Heading>
+        </Content>
+      </Page.Block>
+      <Env />
     </Page>
   );
 };
@@ -29,7 +29,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -40,5 +40,5 @@ export const Demo = {
 export const args = {
   index: 5,
   title: "Bakgrunn",
-  desc: "Background-prop lar deg velge mellom `default` og `subtle` bakgrunn.",
+  desc: "Propen `background` lar deg velge mellom `default` og `subtle` bakgrunn.",
 };

aksel.nav.no/website/pages/eksempler/primitive-page/below-fold.tsx

@@ -1,27 +1,27 @@
-import { Box, Page } from "@navikt/ds-react";
+import { Heading, Page } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";
+import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent";
 
 const Example = () => {
+  useDekorator();
+
   return (
-    <Page
-      footerPosition="belowFold"
-      footer={
-        <Box as="footer" background="surface-neutral-moderate" padding="8">
-          <Page.Block gutters>Footer</Page.Block>
-        </Box>
-      }
-    >
-      <Box as="header" background="surface-neutral-moderate" padding="8">
-        <Page.Block gutters>Header</Page.Block>
-      </Box>
-      <Box
-        as="main"
-        background="surface-alt-3-moderate"
-        padding="8"
-        paddingBlock="16"
-      >
-        <Page.Block gutters>Content</Page.Block>
-      </Box>
+    <Page footerPosition="belowFold" footer={<Footer />}>
+      <Header />
+      <Page.Block as="main" width="xl" gutters>
+        <Content>
+          <Heading level="1" size="large">
+            Page.Block
+          </Heading>
+        </Content>
+      </Page.Block>
+      <Env />
     </Page>
   );
 };
@@ -29,7 +29,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -40,5 +40,5 @@ export const Demo = {
 export const args = {
   index: 1,
   title: "Footer belowFold",
-  desc: "Sikrer at footer aldri vil vises før man begynner å scrolle. Dette hjelper med å redusere layout-shifts ved navigering mellom sider.",
+  desc: "`footerPosition=belowFold` sikrer at footer aldri vil vises før man begynner å scrolle. Dette hjelper med å redusere layout-shifts ved navigering mellom sider.",
 };

aksel.nav.no/website/pages/eksempler/primitive-page/content-block-padding.tsx

@@ -1,27 +1,27 @@
-import { Box, Page } from "@navikt/ds-react";
+import { Heading, Page } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";
+import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent";
 
 const Example = () => {
+  useDekorator();
+
   return (
-    <Page
-      contentBlockPadding="end"
-      footer={
-        <Box as="footer" background="surface-neutral-moderate" padding="8">
-          <Page.Block gutters>Footer</Page.Block>
-        </Box>
-      }
-    >
-      <Box as="header" background="surface-neutral-moderate" padding="8">
-        <Page.Block gutters>Header</Page.Block>
-      </Box>
-      <Box
-        as="main"
-        background="surface-alt-3-moderate"
-        padding="8"
-        paddingBlock="16"
-      >
-        <Page.Block gutters>Content</Page.Block>
-      </Box>
+    <Page contentBlockPadding="end" footer={<Footer />}>
+      <Header />
+      <Page.Block as="main" width="xl" gutters>
+        <Content>
+          <Heading level="1" size="large">
+            Page.Block
+          </Heading>
+        </Content>
+      </Page.Block>
+      <Env />
     </Page>
   );
 };
@@ -29,7 +29,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -40,5 +40,5 @@ export const Demo = {
 export const args = {
   index: 3,
   title: "Content Padding",
-  desc: "contentBlockPadding på Page sikrer at det alltid vil være minimumspadding mellom innhold og footer. Dette vil være en god fallback, men layouts vil ofte trenge ekstra padding top/bottom",
+  desc: "Propen `contentBlockPadding` på Page sikrer at det alltid vil være en minimumspadding mellom innhold og footer. Dette vil være en god fallback, men mange layouts vil trenge ekstra padding top/bottom.",
 };

aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx

@@ -1,32 +1,28 @@
-import { Box, Page } from "@navikt/ds-react";
+import { Heading, Page } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";
+import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent";
 
 const Example = () => {
+  useDekorator();
+
   return (
-    <Page
-      footer={
-        <Box background="surface-neutral-moderate" padding="8" as="footer">
-          <Page.Block gutters width="lg">
-            Footer
-          </Page.Block>
-        </Box>
-      }
-    >
-      <Box background="surface-neutral-moderate" padding="8" as="header">
-        <Page.Block gutters width="lg">
-          Header
-        </Page.Block>
-      </Box>
-      <Box
-        background="surface-alt-3-moderate"
-        padding="8"
-        paddingBlock="16"
-        as="main"
-      >
-        <Page.Block gutters width="lg">
-          Content
-        </Page.Block>
-      </Box>
+    <Page footer={<Footer />}>
+      <Header />
+
+      <Page.Block as="main" width="xl" gutters>
+        <Content>
+          <Heading level="1" size="large">
+            Page.Block
+          </Heading>
+        </Content>
+      </Page.Block>
+      <Env />
     </Page>
   );
 };
@@ -34,7 +30,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -45,5 +41,5 @@ export const Demo = {
 export const args = {
   index: 0,
   title: "Standard",
-  desc: "Page gjør det enklere å bygge opp layout med riktig maksbredde og gutters.",
+  desc: "`Page.Block` kan også brukes i header og footer for å sikre at innholdet er sentrert og har samme maksbredde som resten av innholdet.",
 };

aksel.nav.no/website/pages/eksempler/primitive-page/gutters.tsx

@@ -1,32 +1,36 @@
-import { Box, Page } from "@navikt/ds-react";
+import { HStack, Heading, Page } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";
+import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent";
 
 const Example = () => {
+  useDekorator();
+
   return (
-    <Page
-      footer={
-        <Page.Block gutters as="footer">
-          <Box background="surface-neutral-moderate" padding="8">
-            Footer
-          </Box>
+    <Page footer={<Footer />}>
+      <Header />
+      <HStack gap="4">
+        <Page.Block as="main" width="xl" gutters>
+          <Content>
+            <Heading level="1" size="large">
+              Page.Block med gutter
+            </Heading>
+          </Content>
         </Page.Block>
-      }
-    >
-      <Page.Block gutters as="header">
-        <Box background="surface-neutral-moderate" padding="8">
-          Header
-        </Box>
-      </Page.Block>
-      <Page.Block gutters as="main">
-        <Box background="surface-alt-3-moderate" paddingBlock="16" padding="8">
-          Med gutter
-        </Box>
-      </Page.Block>
-      <Page.Block as="main">
-        <Box background="surface-alt-3-subtle" paddingBlock="16" padding="8">
-          Uten gutter
-        </Box>
-      </Page.Block>
+        <Page.Block as="main" width="xl">
+          <Content>
+            <Heading level="1" size="large">
+              Page.Block uten gutter
+            </Heading>
+          </Content>
+        </Page.Block>
+      </HStack>
+      <Env />
     </Page>
   );
 };
@@ -34,7 +38,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -45,5 +49,5 @@ export const Demo = {
 export const args = {
   index: 2,
   title: "Gutters",
-  desc: "Gutters-prop på Page.Block setter responsive gutters (padding-inline)",
+  desc: "Propen `gutters` på Page.Block setter responsive gutters (padding-inline).",
 };

aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx

@@ -1,33 +1,29 @@
-import { Box, Page } from "@navikt/ds-react";
+import { BodyLong, Page } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
+import {
+  Env,
+  Footer,
+  Header,
+  useDekorator,
+} from "../../../components/website-modules/examples/__parts/Dekorator";
+import { Content } from "../../../components/website-modules/examples/__parts/PageDemoContent";
 
 const Example = () => {
+  useDekorator();
+
   return (
-    <Page
-      background="bg-subtle"
-      footer={
-        <Box as="footer" background="surface-neutral-moderate" padding="8">
-          <Page.Block gutters width="2xl">
-            Footer
-          </Page.Block>
-        </Box>
-      }
-    >
-      <Box as="header" background="surface-neutral-moderate" padding="8">
-        <Page.Block gutters width="2xl">
-          Header
-        </Page.Block>
-      </Box>
-      <Box
-        as="main"
-        background="surface-alt-3-moderate"
-        padding="8"
-        paddingBlock="16"
-      >
-        <Page.Block gutters width="2xl">
-          Content
-        </Page.Block>
-      </Box>
+    <Page footer={<Footer />}>
+      <Header />
+      <Page.Block as="main" width="text" gutters>
+        <Content>
+          <BodyLong>
+            Vi anbefaler å bruke <code>width=&quot;text&quot;</code> på
+            tekstblokker. Dette setter maksbredden til 576px + padding og skal
+            gi en behagelig linjelengde.
+          </BodyLong>
+        </Content>
+      </Page.Block>
+      <Env />
     </Page>
   );
 };
@@ -35,7 +31,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -46,5 +42,5 @@ export const Demo = {
 export const args = {
   index: 6,
   title: "Maksbredde",
-  desc: "Width-prop på Page.Block sentrerer innhold og legger på maksbredde.",
+  desc: "Propen `width` på Page.Block sentrerer innhold og legger på maksbredde.",
 };

aksel.nav.no/website/pages/grunnleggende/index.tsx

@@ -15,7 +15,7 @@ import {
   SidebarT,
 } from "@/types";
 import { generateSidebar } from "@/utils";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { grunnleggendeKategorier } from "../../sanity/config";
@@ -98,9 +98,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
               <div>
                 {page?.[`ingress_${kat.value}`] && (
                   <BodyLong size="large" className="mb-4 only:mb-7">
-                    <TextWithMarkdownLink>
+                    <TextWithMarkdown>
                       {page[`ingress_${kat.value}`]}
-                    </TextWithMarkdownLink>
+                    </TextWithMarkdown>
                   </BodyLong>
                 )}
                 {page?.[`intro_${kat.value}`] && (

aksel.nav.no/website/pages/komponenter/index.tsx

@@ -25,7 +25,7 @@ import {
 } from "@/types";
 import { generateSidebar } from "@/utils";
 import { IntroCards } from "@/web/IntroCards";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { komponentKategorier } from "../../sanity/config";
@@ -134,9 +134,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
               <div>
                 {page?.[`ingress_${kat.value}`] && (
                   <BodyLong size="large" className="mb-4 only:mb-7">
-                    <TextWithMarkdownLink>
+                    <TextWithMarkdown>
                       {page[`ingress_${kat.value}`]}
-                    </TextWithMarkdownLink>
+                    </TextWithMarkdown>
                   </BodyLong>
                 )}
                 {page?.[`intro_${kat.value}`] && (

aksel.nav.no/website/pages/monster-maler/index.tsx

@@ -15,7 +15,7 @@ import {
   SidebarT,
 } from "@/types";
 import { generateSidebar } from "@/utils";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { templatesKategorier } from "../../sanity/config";
@@ -98,9 +98,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
               <div>
                 {page?.[`ingress_${kat.value}`] && (
                   <BodyLong size="large" className="mb-4 only:mb-7">
-                    <TextWithMarkdownLink>
+                    <TextWithMarkdown>
                       {page[`ingress_${kat.value}`]}
-                    </TextWithMarkdownLink>
+                    </TextWithMarkdown>
                   </BodyLong>
                 )}
                 {page?.[`intro_${kat.value}`] && (