fix(monthpicker): isValidDate was inverted when setting validation

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

.changeset/monthpicker-isinvalid-fix.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+MonthPicker: `onValidate` from `useMonthpicker` now reports `isInvalid: true` for text that can't be parsed as a month, and `false` for a valid but disabled month.

.changeset/open-pages-scroll.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+ActionMenu: Menu is no longer modal, Page scroll and interaction outside the menu are no longer blocked while open.

.changeset/quick-menus-fade.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+ActionMenu: Faster and smoother open transition.

.changeset/quiet-tokens-boundary.md

@@ -0,0 +1,5 @@
+---
+"@navikt/aksel": patch
+---
+
+Codemod: `v8-tokens` no longer removes whitespace before replaced tokens or rewrites longer names that contain a token name.

.github/workflows/backup-cms.yml

@@ -17,6 +17,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup Node.js
         uses: actions/setup-node@v7

.github/workflows/build-e2e.yml

@@ -14,15 +14,15 @@ concurrency:
   cancel-in-progress: true
 
 permissions:
-  actions: read
   contents: read
-  packages: write
-  id-token: write
 
 jobs:
   prebuild-app-for-playwright:
     name: Build app for Playwright
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write # Push E2E image to GHCR
     env:
       IMAGE_NAME: ${{ github.repository }}-e2e
       REGISTRY: ghcr.io
@@ -31,6 +31,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup and build Next.js application
         uses: ./.github/actions/build-website
@@ -61,6 +62,9 @@ jobs:
     needs: [prebuild-app-for-playwright]
     name: Playwright shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: read # Pull E2E image from GHCR
     container:
       image: mcr.microsoft.com/playwright:v1.61.1-noble
     services:
@@ -81,6 +85,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup Node.js
         uses: actions/setup-node@v7

.github/workflows/build-validation.yml

@@ -24,6 +24,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup project
         uses: ./.github/actions/setup
@@ -41,6 +42,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup project
         uses: ./.github/actions/setup
@@ -58,6 +60,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup project
         uses: ./.github/actions/setup
@@ -78,6 +81,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup project
         uses: ./.github/actions/setup

.github/workflows/build-visual-regression.yml

@@ -22,14 +22,14 @@ jobs:
     name: Run Chromatic
     runs-on: ubuntu-latest
     permissions:
-      issues: write
+      contents: read
       pull-requests: write
-      contents: write
     steps:
       - name: Checkout code
         uses: actions/checkout@v7
         with:
           fetch-depth: 0
+          persist-credentials: false
 
       - name: Setup project
         uses: ./.github/actions/setup

.github/workflows/bundle-check-main.yml

@@ -33,6 +33,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
           ref: main
 
       - name: Setup project
@@ -61,6 +62,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup project
         uses: ./.github/actions/setup
@@ -87,6 +89,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup project
         uses: ./.github/actions/setup

.github/workflows/bundle-check-npm.yml

@@ -33,6 +33,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup project
         uses: ./.github/actions/setup

.github/workflows/cdn-figma-config.yml

@@ -12,6 +12,7 @@ jobs:
   upload:
     name: Build and upload token config
     runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
 
     permissions:
       contents: "read"
@@ -22,6 +23,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup Node.js
         uses: actions/setup-node@v7

.github/workflows/cdn-fonts.yml

@@ -12,6 +12,7 @@ jobs:
   upload:
     name: Upload fonts to CDN
     runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
 
     permissions:
       contents: read
@@ -20,6 +21,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: "actions/checkout@v7"
+        with:
+          persist-credentials: false
 
       - name: Upload fonts to CDN
         id: upload

.github/workflows/deploy-dev-gcp.yml

@@ -15,15 +15,14 @@ jobs:
     name: Build and deploy to dev-gcp
     runs-on: ubuntu-latest
     permissions:
-      packages: "write"
       contents: "read"
       id-token: "write"
-      deployments: "write"
     steps:
       - name: Checkout code
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup and build Next.js application
         uses: ./.github/actions/build-website

.github/workflows/deploy-mcp-server.yml

@@ -26,6 +26,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup project
         uses: ./.github/actions/setup

.github/workflows/deploy-prod-gcp.yml

@@ -23,6 +23,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v7
+        with:
+          persist-credentials: false
 
       - name: Setup project
         uses: ./.github/actions/setup
@@ -42,15 +44,14 @@ jobs:
     name: Build and deploy to prod-gcp
     runs-on: ubuntu-latest
     permissions:
-      packages: "write"
       contents: "read"
       id-token: "write"
-      deployments: "write"
     steps:
       - name: Checkout code
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup and build Next.js application
         uses: ./.github/actions/build-website

.github/workflows/deploy-v7-prod-gcp.yml

@@ -16,7 +16,6 @@ jobs:
     runs-on: ubuntu-latest
     if: github.ref == 'refs/heads/v7-aksel.nav.no'
     permissions:
-      packages: "write"
       contents: "read"
       id-token: "write"
     steps:
@@ -24,6 +23,7 @@ jobs:
         uses: actions/checkout@v7
         with:
           fetch-depth: 1
+          persist-credentials: false
 
       - name: Setup Node.js
         uses: actions/setup-node@v7

.github/workflows/release.yml

@@ -14,7 +14,8 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 jobs:
   build:
     name: Release packages
-    if: ${{ !contains(github.event.head_commit.message, '[ci skip]') }}
+    # Only publish from main, also when dispatched manually
+    if: github.ref == 'refs/heads/main'
     runs-on: ubuntu-latest
     permissions:
       id-token: "write"
@@ -41,31 +42,38 @@ jobs:
 
       - name: Create release Pull Request or publish to NPM
         id: changesets
-        uses: changesets/action@v2
+        uses: changesets/action@v1
         with:
-          version-script: yarn create-version
-          publish-script: yarn release
-          create-github-releases: false
+          version: yarn create-version
+          publish: yarn release
+          createGithubReleases: false
         env:
           # Use OIDC for npm authentication instead of NPM_TOKEN
           # https://github.com/changesets/changesets/issues/1152#issuecomment-3190884868
           NPM_TOKEN: ""
           # Needed for push to main
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create .npmrc for GPR
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            @navikt:registry=https://npm.pkg.github.com
+            //npm.pkg.github.com/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.GIT_REPO }}
 
       - name: Publish to GPR
         if: steps.changesets.outputs.published == 'true'
         id: changesets-gpr
-        uses: changesets/action@v2
+        uses: changesets/action@v1
         with:
-          publish-script: yarn changeset publish
-          create-github-releases: false
+          publish: yarn changeset publish
+          createGithubReleases: false
         env:
           NPM_TOKEN: ""
-          # changeset v3 publishes with `yarn npm publish`, which reads the @navikt scope (GPR) from .yarnrc.yml
-          NPM_AUTH_TOKEN: ${{ secrets.GIT_REPO }}
           # Needed for push to main
-          github-token: ${{ secrets.GIT_REPO }}
+          GITHUB_TOKEN: ${{ secrets.GIT_REPO }}
 
       - name: Generate icon.zip
         if: steps.changesets.outputs.published == 'true'

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-icons
 
+## 8.17.2
+
+### Patch Changes
+
+- Package: Fixed regression where package was published without dist-files ([`9673de4`](https://github.com/navikt/aksel/commit/9673de4c264479dd8ca04897003532595acad255))
+
 ## 8.17.1
 
 ## 8.17.0

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint
 
+## 8.17.2
+
 ## 8.17.1
 
 ## 8.17.0

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "8.17.1",
+  "version": "8.17.2",
   "type": "module",
   "engines": {
     "node": ">=18.12.0"
@@ -43,10 +43,10 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^8.17.1",
-    "@navikt/ds-tokens": "^8.17.1",
+    "@navikt/ds-css": "^8.17.2",
+    "@navikt/ds-tokens": "^8.17.2",
     "concurrently": "10.0.4",
-    "postcss-selector-parser": "^7.1.5",
+    "postcss-selector-parser": "^7.1.6",
     "postcss-value-parser": "^4.2.0",
     "stylelint": "^17.14.1",
     "stylelint-test-rule-node": "^1.2.0",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel
 
+## 8.17.2
+
 ## 8.17.1
 
 ## 8.17.0

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "8.17.1",
+  "version": "8.17.2",
   "description": "Aksel command line interface. Codemods and other utilities for Aksel users.",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",

@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/tests/token-boundaries.test.ts

@@ -0,0 +1,29 @@
+/* @ts-expect-error No avaliable types for testUtils */
+import { applyTransform } from "jscodeshift/dist/testUtils";
+import { describe, expect, test } from "vitest";
+import * as transform from "../update-js-tokens";
+
+const run = (source: string) =>
+  applyTransform({ ...transform, parser: "tsx" }, {}, { source });
+
+describe("update-js-tokens keeps boundaries intact", () => {
+  test("does not replace inside longer identifiers", () => {
+    expect(
+      run(
+        `import { NavdsGlobalColorGray100 } from "@navikt/ds-tokens/dist/tokens";\n\nconst a = [NavdsGlobalColorGray100, MyNavdsGlobalColorGray100, NavdsGlobalColorGray1000];`,
+      ),
+    ).toBe(
+      `import { AGray100 } from "@navikt/ds-tokens/dist/tokens";\n\nconst a = [AGray100, MyNavdsGlobalColorGray100, NavdsGlobalColorGray1000];`,
+    );
+  });
+
+  test("does not replace similar names when aliased", () => {
+    expect(
+      run(
+        `import { NavdsGlobalColorGray100 as gray } from "@navikt/ds-tokens/dist/tokens";\n\nconst a = [gray, grayish, mygray];`,
+      ),
+    ).toBe(
+      `import { AGray100 } from "@navikt/ds-tokens/dist/tokens";\n\nconst a = [AGray100, grayish, mygray];`,
+    );
+  });
+});

@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts

@@ -1,5 +1,6 @@
 import type { API, JSCodeshift } from "jscodeshift";
 import { tokens } from "../../../tokens-map.js";
+import { createIdentifierRegex } from "../../../utils/identifier-regex";
 import {
   getImportSpecifier,
   getImportSpecifierName,
@@ -60,8 +61,7 @@ export default function transformer(file: JSCodeshift, api: API) {
 
       let code = root.toSource(getLineTerminator(file.source));
 
-      const rgx = new RegExp(`(${localName})`, "gm");
-      code = code.replace(rgx, out);
+      code = code.replace(createIdentifierRegex(String(localName)), out);
       root = j(code);
     }
   });

@navikt/aksel/src/codemod/utils/identifier-regex.ts

@@ -0,0 +1,11 @@
+/**
+ * Matches a JS identifier as a whole word.
+ * Lookarounds are zero-width, so replacing the match never removes surrounding whitespace,
+ * and longer identifiers containing the name (`MyToken`, `Token2`, `$Token`) are left untouched.
+ */
+function createIdentifierRegex(identifier: string) {
+  const escaped = identifier.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`(?<![\\w$])${escaped}(?![\\w$])`, "gm");
+}
+
+export { createIdentifierRegex };

@navikt/aksel/src/codemod/v8-tokens/config/tests/token-regex.test.ts

@@ -218,8 +218,25 @@ describe("getTokenRegex JS", () => {
 
     expect("ATextRed200").not.toMatch(regex);
     expect("AATextRed200").not.toMatch(regex);
+    expect("AATextRed").not.toMatch(regex);
+    expect("$ATextRed").not.toMatch(regex);
+  });
 
-    /* Since we cant do a positive lookbehind, these cases will be matched */
-    expect("AATextRed").toMatch(regex);
+  test("should not include surrounding whitespace in the match", () => {
+    const regex = getTokenRegex("--a-text-red", "js");
+
+    expect(" ATextRed ".match(regex)).toEqual(["ATextRed"]);
+  });
+});
+
+describe("getTokenRegex does not consume leading whitespace", () => {
+  test.each([
+    ["css", " var(--a-text-red)", "--a-text-red"],
+    ["scss", "margin: 0 $a-text-red", "$a-text-red"],
+    ["less", "margin: 0 @a-text-red", "@a-text-red"],
+  ] as const)("%s", (format, input, expected) => {
+    expect(input.match(getTokenRegex("--a-text-red", format))).toEqual([
+      expected,
+    ]);
   });
 });

@navikt/aksel/src/codemod/v8-tokens/config/token-regex.ts

@@ -39,26 +39,29 @@ function getFrameworkRegexes({
   return regexes;
 }
 
+/**
+ * Transforms replace the full match. We use lookarounds so that the regex does not consume surrounding characters.
+ */
 function getTokenRegex(
   variable: string,
   format: "css" | "scss" | "less" | "js",
 ) {
   switch (format) {
     case "css":
-      return new RegExp(`(\\s|^)?(${variable})(?=\\s|$|[^\\w-])`, "gm");
+      return new RegExp(`(?<![\\w-])(${variable})(?![\\w-])`, "gm");
     case "scss":
       return new RegExp(
-        `(\\s|^)?(\\${translateToken(variable, "scss")})(?=\\s|$|[^\\w-])`,
+        `(?<![\\w-])(\\${translateToken(variable, "scss")})(?![\\w-])`,
         "gm",
       );
     case "less":
       return new RegExp(
-        `(\\s|^)?(${translateToken(variable, "less")})(?=\\s|$|[^\\w-])`,
+        `(?<![\\w-])(${translateToken(variable, "less")})(?![\\w-])`,
         "gm",
       );
     case "js":
       return new RegExp(
-        `(\\s|^)?(${translateToken(variable, "js")})(?=\\s|$|[^\\w-])`,
+        `(?<![\\w$])(${translateToken(variable, "js")})(?![\\w$])`,
         "gm",
       );
   }

@navikt/aksel/src/codemod/v8-tokens/transforms/tests/token-boundaries.test.ts

@@ -0,0 +1,85 @@
+/* @ts-expect-error No avaliable types for testUtils */
+import { applyTransform } from "jscodeshift/dist/testUtils";
+import { describe, expect, test } from "vitest";
+import * as jsTransform from "../v8-tokens-js";
+import lessTransform from "../v8-tokens-less";
+import scssTransform from "../v8-tokens-scss";
+
+/*
+ * Fixture tests are compared after Prettier, which hides whitespace bugs.
+ * These tests compare the exact output.
+ */
+const runJs = (source: string) =>
+  applyTransform({ ...jsTransform, parser: "tsx" }, {}, { source });
+
+const runStyle = (
+  transformer: typeof scssTransform | typeof lessTransform,
+  source: string,
+) => transformer({ path: "test", source });
+
+describe("v8-tokens-js keeps boundaries intact", () => {
+  const importLine = `import { ASurfaceDefault } from "@navikt/ds-tokens/dist/tokens";\n`;
+  const expectedImport = `import { BgDefault } from "@navikt/ds-tokens/js";\n`;
+
+  test.each([
+    ["return ASurfaceDefault;", "return BgDefault;"],
+    ["const a = ASurfaceDefault;", "const a = BgDefault;"],
+    ["const a = [ASurfaceDefault];", "const a = [BgDefault];"],
+    ["const a = {...ASurfaceDefault};", "const a = {...BgDefault};"],
+    // biome-ignore lint/suspicious/noTemplateCurlyInString: Testing token inside template literal
+    ["const a = `${ASurfaceDefault}`;", "const a = `${BgDefault}`;"],
+  ])("%s", (input, output) => {
+    expect(runJs(`${importLine}\n${input}`)).toBe(
+      `${expectedImport}\n${output}`,
+    );
+  });
+
+  test("does not replace inside longer identifiers", () => {
+    expect(
+      runJs(
+        `${importLine}\nconst a = [MyASurfaceDefault, ASurfaceDefault2, $ASurfaceDefault];`,
+      ),
+    ).toBe(
+      `${expectedImport}\nconst a = [MyASurfaceDefault, ASurfaceDefault2, $ASurfaceDefault];`,
+    );
+  });
+
+  test("replaces aliased imports without touching similar names", () => {
+    expect(
+      runJs(
+        `import { ASurfaceDefault as surf } from "@navikt/ds-tokens/dist/tokens";\n\nconst a = [surf, surface, mysurf];`,
+      ),
+    ).toBe(`${expectedImport}\nconst a = [BgDefault, surface, mysurf];`);
+  });
+});
+
+describe("v8-tokens-scss keeps whitespace", () => {
+  test.each([
+    ["margin: 0 $a-spacing-4;", "margin: 0 $ax-space-16;"],
+    ["color: $a-text-default;", "color: $ax-text-neutral;"],
+    ["color:$a-text-default;", "color:$ax-text-neutral;"],
+    ["$a-text-default", "$ax-text-neutral"],
+    ["\n\t$a-text-default", "\n\t$ax-text-neutral"],
+    ["color: common.$a-text-default;", "color: common.$ax-text-neutral;"],
+    [
+      "padding: $a-spacing-4 $a-spacing-4;",
+      "padding: $ax-space-16 $ax-space-16;",
+    ],
+  ])("%s", (input, output) => {
+    expect(runStyle(scssTransform, input)).toBe(output);
+  });
+});
+
+describe("v8-tokens-less keeps whitespace", () => {
+  test.each([
+    ["margin: 0 @a-spacing-4;", "margin: 0 @ax-space-16;"],
+    ["color: @a-text-default;", "color: @ax-text-neutral;"],
+    ["color:@a-text-default;", "color:@ax-text-neutral;"],
+    [
+      "padding: @a-spacing-4 @a-spacing-4;",
+      "padding: @ax-space-16 @ax-space-16;",
+    ],
+  ])("%s", (input, output) => {
+    expect(runStyle(lessTransform, input)).toBe(output);
+  });
+});

@navikt/aksel/src/codemod/v8-tokens/transforms/v8-tokens-js.ts

@@ -1,4 +1,5 @@
 import type { API, FileInfo } from "jscodeshift";
+import { createIdentifierRegex } from "../../utils/identifier-regex";
 import { getImportSpecifier } from "../../utils/imports";
 import { getLineTerminator } from "../../utils/lineterminator";
 import moveAndRenameImport from "../../utils/packageImports";
@@ -63,8 +64,9 @@ export default function transformer(file: FileInfo, api: API) {
 
         let code = root.toSource(getLineTerminator(src));
 
-        const rgx = new RegExp(`(\\s|^)?(${localName})(?=\\s|$|[^\\w-])`, "gm");
-        code = code.replace(rgx, jsToken);
+        if (localName) {
+          code = code.replace(createIdentifierRegex(localName), jsToken);
+        }
         src = code;
 
         root = j(code);

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css
 
+## 8.17.2
+
 ## 8.17.1
 
 ## 8.17.0

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.17.1",
+  "version": "8.17.2",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -32,7 +32,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.17.1",
+    "@navikt/ds-tokens": "^8.17.2",
     "browserslist": "^4.28.7",
     "esbuild": "^0.28.2",
     "fast-glob": "3.3.3",

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

@@ -21,13 +21,13 @@
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   transform-origin: var(--__axc-action-menu-content-transform-origin);
   transition:
-    transform 150ms ease allow-discrete,
-    opacity 150ms ease allow-discrete;
+    transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) allow-discrete,
+    opacity 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) allow-discrete;
 
   &[data-state="open"] {
     @starting-style {
-      opacity: 0.8;
-      transform: scale3d(0.94, 0.94, 0.94);
+      opacity: 0.1;
+      transform: scale3d(0.95, 0.95, 0.95);
     }
   }
 }

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-react
 
+## 8.17.2
+
+### Patch Changes
+
+- Updated dependencies [[`9673de4`](https://github.com/navikt/aksel/commit/9673de4c264479dd8ca04897003532595acad255)]:
+  - @navikt/aksel-icons@8.17.2
+  - @navikt/ds-tokens@8.17.2
+
 ## 8.17.1
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.17.1",
+  "version": "8.17.2",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -748,8 +748,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.20",
     "@floating-ui/react-dom": "^2.1.9",
-    "@navikt/aksel-icons": "^8.17.1",
-    "@navikt/ds-tokens": "^8.17.1",
+    "@navikt/aksel-icons": "^8.17.2",
+    "@navikt/ds-tokens": "^8.17.2",
     "date-fns": "^4.0.0",
     "react-day-picker": "10.0.1"
   },
@@ -757,7 +757,7 @@
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.3",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.7",
     "@types/jscodeshift": "17.3.0",
     "@types/node": "^24.10.9",
     "@types/react": "19.2.14",

@navikt/core/react/scripts/metadata/metadata.test.ts

@@ -1,10 +1,10 @@
 import { describe, expect, test } from "vitest";
-import { type ParsedMeta, parseMetaFiles } from "./parse-meta";
+import { type ParsedMeta, readMetaFiles } from "./parse-meta";
 import { validateMetas } from "./validate-meta";
 
 describe("component metadata files", () => {
   test("all meta files satisfy the metadata spec", () => {
-    const metas = parseMetaFiles();
+    const metas = readMetaFiles();
     expect(validateMetas(metas)).toEqual([]);
   });
 });

@navikt/core/react/scripts/metadata/parse-meta.ts

@@ -1,4 +1,5 @@
 import fg from "fast-glob";
+import { readFileSync } from "node:fs";
 import path from "node:path";
 import ts from "typescript";
 import { META_GLOB, packageRoot, tsconfigPath } from "./paths";
@@ -34,6 +35,21 @@ interface ParsedMeta {
   utils: ResolvedEntry[];
 }
 
+/**
+ * Syntax-only contents of one `*.meta.ts` file. `components`/`utils` hold the
+ * map labels, e.g. `"Accordion.Item"`, without resolving their declarations.
+ */
+interface MetaSummary extends Omit<ParsedMeta, "components" | "utils"> {
+  components: string[];
+  utils: string[];
+}
+
+/** Syntactic parts of a meta file, shared by the summary and full parsers. */
+interface MetaSource extends Omit<ParsedMeta, "components" | "utils"> {
+  componentsMap: ts.ObjectLiteralExpression;
+  utilsMap: ts.ObjectLiteralExpression | undefined;
+}
+
 /**
  * Extracts exported "metadata" object through AST
  */
@@ -146,14 +162,122 @@ function createTsProgram(metaFiles: string[]): ts.Program {
   });
 }
 
+/**
+ * Returns the display label of a `components`/`utils` map entry, or
+ * `undefined` for entries that are neither `Name` nor `"Label": Name`.
+ */
+function getEntryLabel(entry: ts.ObjectLiteralElementLike) {
+  if (ts.isShorthandPropertyAssignment(entry)) {
+    return entry.name.text;
+  }
+  if (ts.isPropertyAssignment(entry) && ts.isIdentifier(entry.initializer)) {
+    return ts.isStringLiteral(entry.name)
+      ? entry.name.text
+      : entry.name.getText();
+  }
+  return undefined;
+}
+
+/**
+ * Reads a `components`/`utils` map from the metadata object. Throws when the
+ * property exists but is not an object literal.
+ */
+function readEntryMap(
+  metadataNode: ts.ObjectLiteralExpression,
+  key: "components" | "utils",
+  relMeta: string,
+) {
+  const prop = getObjectProperty(metadataNode, key);
+  if (!prop) {
+    return undefined;
+  }
+  if (
+    !ts.isPropertyAssignment(prop) ||
+    !ts.isObjectLiteralExpression(prop.initializer)
+  ) {
+    throw new Error(`[${relMeta}] metadata.${key} must be an object literal.`);
+  }
+  return prop.initializer;
+}
+
+/**
+ * Reads the syntactic parts of a meta file. Needs no type information, so it
+ * works on a standalone `ts.SourceFile`.
+ */
+function readMetaSource(
+  sourceFile: ts.SourceFile,
+  metaFile: string,
+): MetaSource {
+  const relMeta = path.relative(packageRoot, metaFile);
+
+  const metadataNode = findMetadataObject(sourceFile);
+  if (!metadataNode) {
+    throw new Error(`[${relMeta}] Could not find a "metadata" object.`);
+  }
+
+  const name = readStringLiteralProperty(metadataNode, "name");
+  if (!name) {
+    throw new Error(`[${relMeta}] metadata.name must be a string literal.`);
+  }
+
+  const componentsMap = readEntryMap(metadataNode, "components", relMeta);
+  if (!componentsMap) {
+    throw new Error(
+      `[${relMeta}] metadata.components must be an object literal.`,
+    );
+  }
+
+  return {
+    name,
+    dir: path.relative(packageRoot, path.dirname(metaFile)),
+    metaFile: relMeta,
+    keywords: readStringArrayProperty(metadataNode, "keywords"),
+    related: readStringArrayProperty(metadataNode, "related"),
+    componentsMap,
+    utilsMap: readEntryMap(metadataNode, "utils", relMeta),
+  };
+}
+
+function findMetaFiles() {
+  return fg.sync(META_GLOB, { cwd: packageRoot, absolute: true }).sort();
+}
+
+/**
+ * Reads every `*.meta.ts` file under the package without building a
+ * TypeScript program. Much faster than {@link parseMetaFiles}, but entries are
+ * not resolved to declarations. Use for spec validation only.
+ */
+function readMetaFiles(): MetaSummary[] {
+  const getLabels = (map: ts.ObjectLiteralExpression) =>
+    map.properties
+      .map(getEntryLabel)
+      .filter((label): label is string => Boolean(label));
+
+  return findMetaFiles().map((metaFile) => {
+    const sourceFile = ts.createSourceFile(
+      metaFile,
+      readFileSync(metaFile, "utf8"),
+      ts.ScriptTarget.Latest,
+      true,
+    );
+    const { componentsMap, utilsMap, ...meta } = readMetaSource(
+      sourceFile,
+      metaFile,
+    );
+    return {
+      ...meta,
+      components: getLabels(componentsMap),
+      utils: utilsMap ? getLabels(utilsMap) : [],
+    };
+  });
+}
+
 /**
  * Reads every `*.meta.ts` file under the package and resolves its
  * `components`/`utils` identifiers to their declarations.
  */
 function parseMetaFiles(): ParsedMeta[] {
-  const metaFiles = fg
-    .sync(META_GLOB, { cwd: packageRoot, absolute: true })
-    .sort();
+  const metaFiles = findMetaFiles();
 
   if (metaFiles.length === 0) {
     return [];
@@ -177,30 +301,19 @@ function parseMetaFiles(): ParsedMeta[] {
     const entries: ResolvedEntry[] = [];
 
     for (const entry of mapExpression.properties) {
-      let label: string | undefined;
-      let symbol: ts.Symbol | undefined;
-
-      if (ts.isShorthandPropertyAssignment(entry)) {
-        label = entry.name.text;
-        symbol = resolveAliasedSymbol(
-          typeChecker.getShorthandAssignmentValueSymbol(entry),
-        );
-      } else if (
-        ts.isPropertyAssignment(entry) &&
-        ts.isIdentifier(entry.initializer)
-      ) {
-        label = ts.isStringLiteral(entry.name)
-          ? entry.name.text
-          : entry.name.getText();
-        symbol = resolveAliasedSymbol(
-          typeChecker.getSymbolAtLocation(entry.initializer),
-        );
-      }
-
+      const label = getEntryLabel(entry);
       if (!label) {
         continue;
       }
 
+      let symbol: ts.Symbol | undefined;
+      if (ts.isShorthandPropertyAssignment(entry)) {
+        symbol = typeChecker.getShorthandAssignmentValueSymbol(entry);
+      } else if (ts.isPropertyAssignment(entry)) {
+        symbol = typeChecker.getSymbolAtLocation(entry.initializer);
+      }
+      symbol = resolveAliasedSymbol(symbol);
+
       const declaration = symbol?.valueDeclaration ?? symbol?.declarations?.[0];
       if (!symbol || !declaration) {
         throw new Error(
@@ -222,74 +335,24 @@ function parseMetaFiles(): ParsedMeta[] {
     return entries;
   }
 
-  /**
-   * Reads a `components`/`utils` map from the metadata object and resolves its
-   * entries. Throws when a required map is missing or either map is not an
-   * object literal.
-   */
-  function resolveEntryMap(
-    metadataNode: ts.ObjectLiteralExpression,
-    key: "components" | "utils",
-    metaFile: string,
-    relMeta: string,
-    required: boolean,
-  ): ResolvedEntry[] {
-    const prop = getObjectProperty(metadataNode, key);
-    if (!prop) {
-      if (required) {
-        throw new Error(
-          `[${relMeta}] metadata.${key} must be an object literal.`,
-        );
-      }
-      return [];
-    }
-    if (
-      !ts.isPropertyAssignment(prop) ||
-      !ts.isObjectLiteralExpression(prop.initializer)
-    ) {
-      throw new Error(
-        `[${relMeta}] metadata.${key} must be an object literal.`,
-      );
-    }
-    return resolveEntries(prop.initializer, metaFile);
-  }
-
-  function parseMetaFile(metaFile: string): ParsedMeta {
-    const relMeta = path.relative(packageRoot, metaFile);
+  return metaFiles.map((metaFile) => {
     const sourceFile = tsProgram.getSourceFile(metaFile);
     if (!sourceFile) {
-      throw new Error(`Could not load meta file: ${relMeta}`);
+      throw new Error(
+        `Could not load meta file: ${path.relative(packageRoot, metaFile)}`,
+      );
     }
-
-    const metadataNode = findMetadataObject(sourceFile);
-    if (!metadataNode) {
-      throw new Error(`[${relMeta}] Could not find a "metadata" object.`);
-    }
-
-    const name = readStringLiteralProperty(metadataNode, "name");
-    if (!name) {
-      throw new Error(`[${relMeta}] metadata.name must be a string literal.`);
-    }
-
+    const { componentsMap, utilsMap, ...meta } = readMetaSource(
+      sourceFile,
+      metaFile,
+    );
     return {
-      name,
-      dir: path.relative(packageRoot, path.dirname(metaFile)),
-      metaFile: relMeta,
-      keywords: readStringArrayProperty(metadataNode, "keywords"),
-      related: readStringArrayProperty(metadataNode, "related"),
-      components: resolveEntryMap(
-        metadataNode,
-        "components",
-        metaFile,
-        relMeta,
-        true,
-      ),
-      utils: resolveEntryMap(metadataNode, "utils", metaFile, relMeta, false),
+      ...meta,
+      components: resolveEntries(componentsMap, metaFile),
+      utils: utilsMap ? resolveEntries(utilsMap, metaFile) : [],
     };
-  }
-
-  return metaFiles.map(parseMetaFile);
+  });
 }
 
-export { parseMetaFiles };
-export type { ResolvedEntry, ParsedMeta };
+export { parseMetaFiles, readMetaFiles };
+export type { ResolvedEntry, ParsedMeta, MetaSummary };

@navikt/core/react/scripts/metadata/validate-meta.ts

@@ -1,4 +1,4 @@
-import type { ParsedMeta } from "./parse-meta";
+import type { MetaSummary, ParsedMeta } from "./parse-meta";
 
 /** Characters allowed in a Sanity document `_id`. */
 const SANITY_ID_PATTERN = /^[A-Za-z0-9_.-]+$/;
@@ -9,7 +9,7 @@ const SANITY_ID_PATTERN = /^[A-Za-z0-9_.-]+$/;
  * valid). Kept pure so it can be exercised both by the extractor (which throws
  * on any error) and by the test-suite.
  */
-function validateMetas(metas: ParsedMeta[]): string[] {
+function validateMetas(metas: (ParsedMeta | MetaSummary)[]): string[] {
   const errors: string[] = [];
   const nameToMeta = new Map<string, string>();
 

@navikt/core/react/src/action-menu/root/ActionMenuRoot.tsx

@@ -102,7 +102,7 @@ const ActionMenuRoot = ({
       rootElement={rootElement}
       size={size}
     >
-      <Menu open={open} onOpenChange={setOpen} modal>
+      <Menu open={open} onOpenChange={setOpen} modal={false}>
         {children}
       </Menu>
     </ActionMenuProvider>

@navikt/core/react/src/monthpicker/root/useMonthPicker.tsx

@@ -273,13 +273,15 @@ export const useMonthpicker = (
     const isBefore = getIsBefore({ fromDate, date: month });
     const isAfter = getIsAfter({ toDate, date: month });
 
+    const isMonthValidDate = isValidDate(month);
+
     if (
-      !isValidDate(month) ||
+      !isMonthValidDate ||
       (disabled && dateMatchModifiers(month, disabled))
     ) {
       updateMonth(undefined);
       updateValidation({
-        isInvalid: isValidDate(month),
+        isInvalid: !isMonthValidDate,
         isDisabled: disabled && dateMatchModifiers(month, disabled),
         isValidMonth: false,
         isEmpty: !e.target.value,

@navikt/core/react/tsconfig.build.json

@@ -18,6 +18,7 @@
     "./src/**/*.test.tsx",
     "./src/**/*.test-d.ts",
     "./src/**/*.stories.tsx",
-    "./src/**/renderStoriesForChromatic.tsx"
+    "./src/**/renderStoriesForChromatic.tsx",
+    "./src/**/*.meta.ts"
   ]
 }

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 8.17.2
+
 ## 8.17.1
 
 ## 8.17.0

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "8.17.1",
+  "version": "8.17.2",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -28,7 +28,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/tailwind/",
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.17.1",
+    "@navikt/ds-tokens": "^8.17.2",
     "@types/node": "^24.10.9",
     "tailwindcss": "^3.3.3",
     "tsx": "^4.23.1",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 8.17.2
+
 ## 8.17.1
 
 ## 8.17.0

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "8.17.1",
+  "version": "8.17.2",
   "description": "Design-tokens for Nav designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -39,7 +39,7 @@
     "esbuild": "^0.28.2",
     "lightningcss": "^1.33.0",
     "lodash": "4.18.1",
-    "style-dictionary": "^4.1.1",
+    "style-dictionary": "^5.5.5",
     "tsx": "^4.23.1",
     "typescript": "6.0.3",
     "vitest": "4.1.11"

@navikt/core/tokens/src/figma/create-tokens.ts

@@ -45,15 +45,16 @@ export const getTokensForCollection = async (
   return dictionary.allTokens
     .filter((token) => !token.figmaIgnore)
     .map((token) => {
-      const reference = getReferences(token.original, dictionary.tokens);
+      const references = getReferences(token.original, dictionary.tokens);
       /*
        * Currently only supports 1 level of references.
+       * The array always includes the token itself as the last element.
        */
-      return reference.length > 0
+      return references.length > 1
         ? prepareToken(
             {
               ...(token as TransformedTokenWithScopes),
-              alias: createTokenName(reference[0]),
+              alias: createTokenName(references[0]),
             },
             dictionary,
           )

@navikt/core/tokens/src/tokens.util.ts

@@ -41,7 +41,7 @@ export type StyleDictionaryToken<T extends TokenTypes> = {
    * Token value
    * @example "#000000"
    * @example "1px"
-   * @example "{a.neutral.100.value}"
+   * @example "{a.neutral.100}"
    */
   value: string;
   /**

@navikt/core/tokens/src/tokens/colors/semantic-roles/accent.tokens.ts

@@ -3,77 +3,77 @@ import type { StyleDictionaryTokenConfig } from "../../../tokens.util";
 export const accentSemanticTokenConfig = {
   bg: {
     "accent-soft": {
-      value: "{ax.accent.100.value}",
+      value: "{ax.accent.100}",
       type: "color",
       group: "background.accent",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
     },
     "accent-softA": {
-      value: "{ax.accent.100A.value}",
+      value: "{ax.accent.100A}",
       type: "color",
       group: "background.accent",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
     },
     "accent-moderate": {
-      value: "{ax.accent.200.value}",
+      value: "{ax.accent.200}",
       type: "color",
       group: "background.accent",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.",
     },
     "accent-moderateA": {
-      value: "{ax.accent.200A.value}",
+      value: "{ax.accent.200A}",
       type: "color",
       group: "background.accent",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "accent-moderate-hover": {
-      value: "{ax.accent.300.value}",
+      value: "{ax.accent.300}",
       type: "color",
       group: "background.accent",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "accent-moderate-hoverA": {
-      value: "{ax.accent.300A.value}",
+      value: "{ax.accent.300A}",
       type: "color",
       group: "background.accent",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button accent secondary hover). Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "accent-moderate-pressed": {
-      value: "{ax.accent.400.value}",
+      value: "{ax.accent.400}",
       type: "color",
       group: "background.accent",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "accent-moderate-pressedA": {
-      value: "{ax.accent.400A.value}",
+      value: "{ax.accent.400A}",
       type: "color",
       group: "background.accent",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer (f.eks. button accent secondary active). Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "accent-strong": {
-      value: "{ax.accent.600.value}",
+      value: "{ax.accent.600}",
       type: "color",
       group: "background.accent",
       comment:
         "En sterk bakgrunnsfarge som brukes på meningsbærende elementer (f.eks. button accent primary).",
     },
     "accent-strong-hover": {
-      value: "{ax.accent.700.value}",
+      value: "{ax.accent.700}",
       type: "color",
       group: "background.accent",
       comment:
         "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button accent primary hover).",
     },
     "accent-strong-pressed": {
-      value: "{ax.accent.800.value}",
+      value: "{ax.accent.800}",
       type: "color",
       group: "background.accent",
       comment:
@@ -82,28 +82,28 @@ export const accentSemanticTokenConfig = {
   },
   text: {
     accent: {
-      value: "{ax.accent.1000.value}",
+      value: "{ax.accent.1000}",
       type: "color",
       group: "text.accent",
       comment:
         "Sterk farge for tekst og ikoner for rollen accent. Godkjent på alle bakgrunner unntatt strong.",
     },
     "accent-subtle": {
-      value: "{ax.accent.800.value}",
+      value: "{ax.accent.800}",
       type: "color",
       group: "text.accent",
       comment:
         "Standard farge for tekst og ikoner med rollen accent. Godkjent på alle bakgrunner unntatt strong.",
     },
     "accent-decoration": {
-      value: "{ax.accent.600.value}",
+      value: "{ax.accent.600}",
       type: "color",
       group: "text.accent",
       comment:
         "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). **Ikke godkjent på tekst altså**.",
     },
     "accent-contrast": {
-      value: "{ax.neutral.000.value}",
+      value: "{ax.neutral.000}",
       type: "color",
       group: "text.accent",
       comment:
@@ -112,27 +112,27 @@ export const accentSemanticTokenConfig = {
   },
   border: {
     accent: {
-      value: "{ax.accent.600.value}",
+      value: "{ax.accent.600}",
       type: "color",
       group: "border.accent",
       comment: "Standard farge for border.",
     },
     "accent-subtle": {
-      value: "{ax.accent.400.value}",
+      value: "{ax.accent.400}",
       type: "color",
       group: "border.accent",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
     },
     "accent-subtleA": {
-      value: "{ax.accent.400A.value}",
+      value: "{ax.accent.400A}",
       type: "color",
       group: "border.accent",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
     },
     "accent-strong": {
-      value: "{ax.accent.700.value}",
+      value: "{ax.accent.700}",
       type: "color",
       group: "border.accent",
       comment:

@navikt/core/tokens/src/tokens/colors/semantic-roles/brand-beige.tokens.ts

@@ -3,77 +3,77 @@ import type { StyleDictionaryTokenConfig } from "../../../tokens.util";
 export const brandBeigeSemanticTokenConfig = {
   bg: {
     "brand-beige-soft": {
-      value: "{ax.brand-beige.100.value}",
+      value: "{ax.brand-beige.100}",
       type: "color",
       group: "background.brand-beige",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
     },
     "brand-beige-softA": {
-      value: "{ax.brand-beige.100A.value}",
+      value: "{ax.brand-beige.100A}",
       type: "color",
       group: "background.brand-beige",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
     },
     "brand-beige-moderate": {
-      value: "{ax.brand-beige.200.value}",
+      value: "{ax.brand-beige.200}",
       type: "color",
       group: "background.brand-beige",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.",
     },
     "brand-beige-moderateA": {
-      value: "{ax.brand-beige.200A.value}",
+      value: "{ax.brand-beige.200A}",
       type: "color",
       group: "background.brand-beige",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "brand-beige-moderate-hover": {
-      value: "{ax.brand-beige.300.value}",
+      value: "{ax.brand-beige.300}",
       type: "color",
       group: "background.brand-beige",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "brand-beige-moderate-hoverA": {
-      value: "{ax.brand-beige.300A.value}",
+      value: "{ax.brand-beige.300A}",
       type: "color",
       group: "background.brand-beige",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "brand-beige-moderate-pressed": {
-      value: "{ax.brand-beige.400.value}",
+      value: "{ax.brand-beige.400}",
       type: "color",
       group: "background.brand-beige",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "brand-beige-moderate-pressedA": {
-      value: "{ax.brand-beige.400A.value}",
+      value: "{ax.brand-beige.400A}",
       type: "color",
       group: "background.brand-beige",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "brand-beige-strong": {
-      value: "{ax.brand-beige.600.value}",
+      value: "{ax.brand-beige.600}",
       type: "color",
       group: "background.brand-beige",
       comment:
         "En sterk bakgrunnsfarge som brukes på meningsbærende elementer.",
     },
     "brand-beige-strong-hover": {
-      value: "{ax.brand-beige.700.value}",
+      value: "{ax.brand-beige.700}",
       type: "color",
       group: "background.brand-beige",
       comment:
         "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.",
     },
     "brand-beige-strong-pressed": {
-      value: "{ax.brand-beige.800.value}",
+      value: "{ax.brand-beige.800}",
       type: "color",
       group: "background.brand-beige",
       comment:
@@ -82,28 +82,28 @@ export const brandBeigeSemanticTokenConfig = {
   },
   text: {
     "brand-beige": {
-      value: "{ax.brand-beige.1000.value}",
+      value: "{ax.brand-beige.1000}",
       type: "color",
       group: "text.brand-beige",
       comment:
         "Sterk farge for tekst og ikoner for rollen brand beige. Godkjent på alle bakgrunner unntatt strong.",
     },
     "brand-beige-subtle": {
-      value: "{ax.brand-beige.800.value}",
+      value: "{ax.brand-beige.800}",
       type: "color",
       group: "text.brand-beige",
       comment:
         "Standard farge for tekst og ikoner med rollen brand beige. Godkjent på alle bakgrunner unntatt strong.",
     },
     "brand-beige-decoration": {
-      value: "{ax.brand-beige.600.value}",
+      value: "{ax.brand-beige.600}",
       type: "color",
       group: "text.brand-beige",
       comment:
         "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). **Ikke godkjent på tekst altså**.",
     },
     "brand-beige-contrast": {
-      value: "{ax.neutral.000.value}",
+      value: "{ax.neutral.000}",
       type: "color",
       group: "text.brand-beige",
       comment:
@@ -112,27 +112,27 @@ export const brandBeigeSemanticTokenConfig = {
   },
   border: {
     "brand-beige": {
-      value: "{ax.brand-beige.600.value}",
+      value: "{ax.brand-beige.600}",
       type: "color",
       group: "border.brand-beige",
       comment: "Standard farge for border.",
     },
     "brand-beige-subtle": {
-      value: "{ax.brand-beige.400.value}",
+      value: "{ax.brand-beige.400}",
       type: "color",
       group: "border.brand-beige",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
     },
     "brand-beige-subtleA": {
-      value: "{ax.brand-beige.400A.value}",
+      value: "{ax.brand-beige.400A}",
       type: "color",
       group: "border.brand-beige",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
     },
     "brand-beige-strong": {
-      value: "{ax.brand-beige.700.value}",
+      value: "{ax.brand-beige.700}",
       type: "color",
       group: "border.brand-beige",
       comment:

@navikt/core/tokens/src/tokens/colors/semantic-roles/brand-blue.tokens.ts

@@ -3,77 +3,77 @@ import type { StyleDictionaryTokenConfig } from "../../../tokens.util";
 export const brandBlueSemanticTokenConfig = {
   bg: {
     "brand-blue-soft": {
-      value: "{ax.brand-blue.100.value}",
+      value: "{ax.brand-blue.100}",
       type: "color",
       group: "background.brand-blue",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
     },
     "brand-blue-softA": {
-      value: "{ax.brand-blue.100A.value}",
+      value: "{ax.brand-blue.100A}",
       type: "color",
       group: "background.brand-blue",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
     },
     "brand-blue-moderate": {
-      value: "{ax.brand-blue.200.value}",
+      value: "{ax.brand-blue.200}",
       type: "color",
       group: "background.brand-blue",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.",
     },
     "brand-blue-moderateA": {
-      value: "{ax.brand-blue.200A.value}",
+      value: "{ax.brand-blue.200A}",
       type: "color",
       group: "background.brand-blue",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "brand-blue-moderate-hover": {
-      value: "{ax.brand-blue.300.value}",
+      value: "{ax.brand-blue.300}",
       type: "color",
       group: "background.brand-blue",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "brand-blue-moderate-hoverA": {
-      value: "{ax.brand-blue.300A.value}",
+      value: "{ax.brand-blue.300A}",
       type: "color",
       group: "background.brand-blue",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "brand-blue-moderate-pressed": {
-      value: "{ax.brand-blue.400.value}",
+      value: "{ax.brand-blue.400}",
       type: "color",
       group: "background.brand-blue",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "brand-blue-moderate-pressedA": {
-      value: "{ax.brand-blue.400A.value}",
+      value: "{ax.brand-blue.400A}",
       type: "color",
       group: "background.brand-blue",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "brand-blue-strong": {
-      value: "{ax.brand-blue.600.value}",
+      value: "{ax.brand-blue.600}",
       type: "color",
       group: "background.brand-blue",
       comment:
         "En sterk bakgrunnsfarge som brukes på meningsbærende elementer.",
     },
     "brand-blue-strong-hover": {
-      value: "{ax.brand-blue.700.value}",
+      value: "{ax.brand-blue.700}",
       type: "color",
       group: "background.brand-blue",
       comment:
         "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.",
     },
     "brand-blue-strong-pressed": {
-      value: "{ax.brand-blue.800.value}",
+      value: "{ax.brand-blue.800}",
       type: "color",
       group: "background.brand-blue",
       comment:
@@ -82,28 +82,28 @@ export const brandBlueSemanticTokenConfig = {
   },
   text: {
     "brand-blue": {
-      value: "{ax.brand-blue.1000.value}",
+      value: "{ax.brand-blue.1000}",
       type: "color",
       group: "text.brand-blue",
       comment:
         "Sterk farge for tekst og ikoner for rollen brand blue. Godkjent på alle bakgrunner unntatt strong.",
     },
     "brand-blue-subtle": {
-      value: "{ax.brand-blue.800.value}",
+      value: "{ax.brand-blue.800}",
       type: "color",
       group: "text.brand-blue",
       comment:
         "Standard farge for tekst og ikoner med rollen brand blue. Godkjent på alle bakgrunner unntatt strong.",
     },
     "brand-blue-decoration": {
-      value: "{ax.brand-blue.600.value}",
+      value: "{ax.brand-blue.600}",
       type: "color",
       group: "text.brand-blue",
       comment:
         "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). **Ikke godkjent på tekst altså**.",
     },
     "brand-blue-contrast": {
-      value: "{ax.neutral.000.value}",
+      value: "{ax.neutral.000}",
       type: "color",
       group: "text.brand-blue",
       comment:
@@ -112,27 +112,27 @@ export const brandBlueSemanticTokenConfig = {
   },
   border: {
     "brand-blue": {
-      value: "{ax.brand-blue.600.value}",
+      value: "{ax.brand-blue.600}",
       type: "color",
       group: "border.brand-blue",
       comment: "Standard farge for border.",
     },
     "brand-blue-subtle": {
-      value: "{ax.brand-blue.400.value}",
+      value: "{ax.brand-blue.400}",
       type: "color",
       group: "border.brand-blue",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
     },
     "brand-blue-subtleA": {
-      value: "{ax.brand-blue.400A.value}",
+      value: "{ax.brand-blue.400A}",
       type: "color",
       group: "border.brand-blue",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
     },
     "brand-blue-strong": {
-      value: "{ax.brand-blue.700.value}",
+      value: "{ax.brand-blue.700}",
       type: "color",
       group: "border.brand-blue",
       comment:

@navikt/core/tokens/src/tokens/colors/semantic-roles/brand-magenta.tokens.ts

@@ -3,77 +3,77 @@ import type { StyleDictionaryTokenConfig } from "../../../tokens.util";
 export const brandMagentaSemanticTokenConfig = {
   bg: {
     "brand-magenta-soft": {
-      value: "{ax.brand-magenta.100.value}",
+      value: "{ax.brand-magenta.100}",
       type: "color",
       group: "background.brand-magenta",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
     },
     "brand-magenta-softA": {
-      value: "{ax.brand-magenta.100A.value}",
+      value: "{ax.brand-magenta.100A}",
       type: "color",
       group: "background.brand-magenta",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
     },
     "brand-magenta-moderate": {
-      value: "{ax.brand-magenta.200.value}",
+      value: "{ax.brand-magenta.200}",
       type: "color",
       group: "background.brand-magenta",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.",
     },
     "brand-magenta-moderateA": {
-      value: "{ax.brand-magenta.200A.value}",
+      value: "{ax.brand-magenta.200A}",
       type: "color",
       group: "background.brand-magenta",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "brand-magenta-moderate-hover": {
-      value: "{ax.brand-magenta.300.value}",
+      value: "{ax.brand-magenta.300}",
       type: "color",
       group: "background.brand-magenta",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "brand-magenta-moderate-hoverA": {
-      value: "{ax.brand-magenta.300A.value}",
+      value: "{ax.brand-magenta.300A}",
       type: "color",
       group: "background.brand-magenta",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "brand-magenta-moderate-pressed": {
-      value: "{ax.brand-magenta.400.value}",
+      value: "{ax.brand-magenta.400}",
       type: "color",
       group: "background.brand-magenta",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "brand-magenta-moderate-pressedA": {
-      value: "{ax.brand-magenta.400A.value}",
+      value: "{ax.brand-magenta.400A}",
       type: "color",
       group: "background.brand-magenta",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "brand-magenta-strong": {
-      value: "{ax.brand-magenta.600.value}",
+      value: "{ax.brand-magenta.600}",
       type: "color",
       group: "background.brand-magenta",
       comment:
         "En sterk bakgrunnsfarge som brukes på meningsbærende elementer.",
     },
     "brand-magenta-strong-hover": {
-      value: "{ax.brand-magenta.700.value}",
+      value: "{ax.brand-magenta.700}",
       type: "color",
       group: "background.brand-magenta",
       comment:
         "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.",
     },
     "brand-magenta-strong-pressed": {
-      value: "{ax.brand-magenta.800.value}",
+      value: "{ax.brand-magenta.800}",
       type: "color",
       group: "background.brand-magenta",
       comment:
@@ -82,28 +82,28 @@ export const brandMagentaSemanticTokenConfig = {
   },
   text: {
     "brand-magenta": {
-      value: "{ax.brand-magenta.1000.value}",
+      value: "{ax.brand-magenta.1000}",
       type: "color",
       group: "text.brand-magenta",
       comment:
         "Sterk farge for tekst og ikoner for rollen brand magenta. Godkjent på alle bakgrunner unntatt strong.",
     },
     "brand-magenta-subtle": {
-      value: "{ax.brand-magenta.800.value}",
+      value: "{ax.brand-magenta.800}",
       type: "color",
       group: "text.brand-magenta",
       comment:
         "Standard farge for tekst og ikoner med rollen brand magenta. Godkjent på alle bakgrunner unntatt strong.",
     },
     "brand-magenta-decoration": {
-      value: "{ax.brand-magenta.600.value}",
+      value: "{ax.brand-magenta.600}",
       type: "color",
       group: "text.brand-magenta",
       comment:
         "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). **Ikke godkjent på tekst altså**.",
     },
     "brand-magenta-contrast": {
-      value: "{ax.neutral.000.value}",
+      value: "{ax.neutral.000}",
       type: "color",
       group: "text.brand-magenta",
       comment:
@@ -112,27 +112,27 @@ export const brandMagentaSemanticTokenConfig = {
   },
   border: {
     "brand-magenta": {
-      value: "{ax.brand-magenta.600.value}",
+      value: "{ax.brand-magenta.600}",
       type: "color",
       group: "border.brand-magenta",
       comment: "Standard farge for border.",
     },
     "brand-magenta-subtle": {
-      value: "{ax.brand-magenta.400.value}",
+      value: "{ax.brand-magenta.400}",
       type: "color",
       group: "border.brand-magenta",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
     },
     "brand-magenta-subtleA": {
-      value: "{ax.brand-magenta.400A.value}",
+      value: "{ax.brand-magenta.400A}",
       type: "color",
       group: "border.brand-magenta",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
     },
     "brand-magenta-strong": {
-      value: "{ax.brand-magenta.700.value}",
+      value: "{ax.brand-magenta.700}",
       type: "color",
       group: "border.brand-magenta",
       comment:

@navikt/core/tokens/src/tokens/colors/semantic-roles/danger.tokens.ts

@@ -3,77 +3,77 @@ import type { StyleDictionaryTokenConfig } from "../../../tokens.util";
 export const dangerSemanticTokenConfig = {
   bg: {
     "danger-soft": {
-      value: "{ax.danger.100.value}",
+      value: "{ax.danger.100}",
       type: "color",
       group: "background.danger",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
     },
     "danger-softA": {
-      value: "{ax.danger.100A.value}",
+      value: "{ax.danger.100A}",
       type: "color",
       group: "background.danger",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
     },
     "danger-moderate": {
-      value: "{ax.danger.200.value}",
+      value: "{ax.danger.200}",
       type: "color",
       group: "background.danger",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border (f.eks. alert error).",
     },
     "danger-moderateA": {
-      value: "{ax.danger.200A.value}",
+      value: "{ax.danger.200A}",
       type: "color",
       group: "background.danger",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "danger-moderate-hover": {
-      value: "{ax.danger.300.value}",
+      value: "{ax.danger.300}",
       type: "color",
       group: "background.danger",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "danger-moderate-hoverA": {
-      value: "{ax.danger.300A.value}",
+      value: "{ax.danger.300A}",
       type: "color",
       group: "background.danger",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "danger-moderate-pressed": {
-      value: "{ax.danger.400.value}",
+      value: "{ax.danger.400}",
       type: "color",
       group: "background.danger",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "danger-moderate-pressedA": {
-      value: "{ax.danger.400A.value}",
+      value: "{ax.danger.400A}",
       type: "color",
       group: "background.danger",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "danger-strong": {
-      value: "{ax.danger.600.value}",
+      value: "{ax.danger.600}",
       type: "color",
       group: "background.danger",
       comment:
         "En sterk bakgrunnsfarge som brukes på meningsbærende elementer (f.eks. button danger primary).",
     },
     "danger-strong-hover": {
-      value: "{ax.danger.700.value}",
+      value: "{ax.danger.700}",
       type: "color",
       group: "background.danger",
       comment:
         "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button danger primary hover).",
     },
     "danger-strong-pressed": {
-      value: "{ax.danger.800.value}",
+      value: "{ax.danger.800}",
       type: "color",
       group: "background.danger",
       comment:
@@ -82,28 +82,28 @@ export const dangerSemanticTokenConfig = {
   },
   text: {
     danger: {
-      value: "{ax.danger.1000.value}",
+      value: "{ax.danger.1000}",
       type: "color",
       group: "text.danger",
       comment:
         "Sterk farge for tekst og ikoner for rollen danger. Godkjent på alle bakgrunner unntatt strong.",
     },
     "danger-subtle": {
-      value: "{ax.danger.800.value}",
+      value: "{ax.danger.800}",
       type: "color",
       group: "text.danger",
       comment:
         "Standard farge for tekst og ikoner med rollen danger. Godkjent på alle bakgrunner unntatt strong.",
     },
     "danger-decoration": {
-      value: "{ax.danger.600.value}",
+      value: "{ax.danger.600}",
       type: "color",
       group: "text.danger",
       comment:
         "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). **Ikke godkjent på tekst altså**.",
     },
     "danger-contrast": {
-      value: "{ax.neutral.000.value}",
+      value: "{ax.neutral.000}",
       type: "color",
       group: "text.danger",
       comment:
@@ -112,27 +112,27 @@ export const dangerSemanticTokenConfig = {
   },
   border: {
     danger: {
-      value: "{ax.danger.600.value}",
+      value: "{ax.danger.600}",
       type: "color",
       group: "border.danger",
       comment: "Standard farge for border.",
     },
     "danger-subtle": {
-      value: "{ax.danger.400.value}",
+      value: "{ax.danger.400}",
       type: "color",
       group: "border.danger",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
     },
     "danger-subtleA": {
-      value: "{ax.danger.400A.value}",
+      value: "{ax.danger.400A}",
       type: "color",
       group: "border.danger",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
     },
     "danger-strong": {
-      value: "{ax.danger.700.value}",
+      value: "{ax.danger.700}",
       type: "color",
       group: "border.danger",
       comment:

@navikt/core/tokens/src/tokens/colors/semantic-roles/info.tokens.ts

@@ -3,77 +3,77 @@ import type { StyleDictionaryTokenConfig } from "../../../tokens.util";
 export const infoSemanticTokenConfig = {
   bg: {
     "info-soft": {
-      value: "{ax.info.100.value}",
+      value: "{ax.info.100}",
       type: "color",
       group: "background.info",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
     },
     "info-softA": {
-      value: "{ax.info.100A.value}",
+      value: "{ax.info.100A}",
       type: "color",
       group: "background.info",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
     },
     "info-moderate": {
-      value: "{ax.info.200.value}",
+      value: "{ax.info.200}",
       type: "color",
       group: "background.info",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border (f.eks. alert info).",
     },
     "info-moderateA": {
-      value: "{ax.info.200A.value}",
+      value: "{ax.info.200A}",
       type: "color",
       group: "background.info",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "info-moderate-hover": {
-      value: "{ax.info.300.value}",
+      value: "{ax.info.300}",
       type: "color",
       group: "background.info",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "info-moderate-hoverA": {
-      value: "{ax.info.300A.value}",
+      value: "{ax.info.300A}",
       type: "color",
       group: "background.info",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "info-moderate-pressed": {
-      value: "{ax.info.400.value}",
+      value: "{ax.info.400}",
       type: "color",
       group: "background.info",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "info-moderate-pressedA": {
-      value: "{ax.info.400A.value}",
+      value: "{ax.info.400A}",
       type: "color",
       group: "background.info",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "info-strong": {
-      value: "{ax.info.600.value}",
+      value: "{ax.info.600}",
       type: "color",
       group: "background.info",
       comment:
         "En sterk bakgrunnsfarge som brukes på meningsbærende elementer.",
     },
     "info-strong-hover": {
-      value: "{ax.info.700.value}",
+      value: "{ax.info.700}",
       type: "color",
       group: "background.info",
       comment:
         "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.",
     },
     "info-strong-pressed": {
-      value: "{ax.info.800.value}",
+      value: "{ax.info.800}",
       type: "color",
       group: "background.info",
       comment:
@@ -82,28 +82,28 @@ export const infoSemanticTokenConfig = {
   },
   text: {
     info: {
-      value: "{ax.info.1000.value}",
+      value: "{ax.info.1000}",
       type: "color",
       group: "text.info",
       comment:
         "Sterk farge for tekst og ikoner for rollen info. Godkjent på alle bakgrunner unntatt strong.",
     },
     "info-subtle": {
-      value: "{ax.info.800.value}",
+      value: "{ax.info.800}",
       type: "color",
       group: "text.info",
       comment:
         "Standard farge for tekst og ikoner med rollen info. Godkjent på alle bakgrunner unntatt strong.",
     },
     "info-decoration": {
-      value: "{ax.info.600.value}",
+      value: "{ax.info.600}",
       type: "color",
       group: "text.info",
       comment:
         "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). **Ikke godkjent på tekst altså**.",
     },
     "info-contrast": {
-      value: "{ax.neutral.000.value}",
+      value: "{ax.neutral.000}",
       type: "color",
       group: "text.info",
       comment:
@@ -112,27 +112,27 @@ export const infoSemanticTokenConfig = {
   },
   border: {
     info: {
-      value: "{ax.info.600.value}",
+      value: "{ax.info.600}",
       type: "color",
       group: "border.info",
       comment: "Standard farge for border.",
     },
     "info-subtle": {
-      value: "{ax.info.400.value}",
+      value: "{ax.info.400}",
       type: "color",
       group: "border.info",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
     },
     "info-subtleA": {
-      value: "{ax.info.400A.value}",
+      value: "{ax.info.400A}",
       type: "color",
       group: "border.info",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
     },
     "info-strong": {
-      value: "{ax.info.700.value}",
+      value: "{ax.info.700}",
       type: "color",
       group: "border.info",
       comment:

@navikt/core/tokens/src/tokens/colors/semantic-roles/meta-lime.tokens.ts

@@ -3,77 +3,77 @@ import type { StyleDictionaryTokenConfig } from "../../../tokens.util";
 export const metaLimeSemanticTokenConfig = {
   bg: {
     "meta-lime-soft": {
-      value: "{ax.meta-lime.100.value}",
+      value: "{ax.meta-lime.100}",
       type: "color",
       group: "background.meta-lime",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
     },
     "meta-lime-softA": {
-      value: "{ax.meta-lime.100A.value}",
+      value: "{ax.meta-lime.100A}",
       type: "color",
       group: "background.meta-lime",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
     },
     "meta-lime-moderate": {
-      value: "{ax.meta-lime.200.value}",
+      value: "{ax.meta-lime.200}",
       type: "color",
       group: "background.meta-lime",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.",
     },
     "meta-lime-moderateA": {
-      value: "{ax.meta-lime.200A.value}",
+      value: "{ax.meta-lime.200A}",
       type: "color",
       group: "background.meta-lime",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "meta-lime-moderate-hover": {
-      value: "{ax.meta-lime.300.value}",
+      value: "{ax.meta-lime.300}",
       type: "color",
       group: "background.meta-lime",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "meta-lime-moderate-hoverA": {
-      value: "{ax.meta-lime.300A.value}",
+      value: "{ax.meta-lime.300A}",
       type: "color",
       group: "background.meta-lime",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "meta-lime-moderate-pressed": {
-      value: "{ax.meta-lime.400.value}",
+      value: "{ax.meta-lime.400}",
       type: "color",
       group: "background.meta-lime",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "meta-lime-moderate-pressedA": {
-      value: "{ax.meta-lime.400A.value}",
+      value: "{ax.meta-lime.400A}",
       type: "color",
       group: "background.meta-lime",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "meta-lime-strong": {
-      value: "{ax.meta-lime.600.value}",
+      value: "{ax.meta-lime.600}",
       type: "color",
       group: "background.meta-lime",
       comment:
         "En sterk bakgrunnsfarge som brukes på meningsbærende elementer.",
     },
     "meta-lime-strong-hover": {
-      value: "{ax.meta-lime.700.value}",
+      value: "{ax.meta-lime.700}",
       type: "color",
       group: "background.meta-lime",
       comment:
         "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.",
     },
     "meta-lime-strong-pressed": {
-      value: "{ax.meta-lime.800.value}",
+      value: "{ax.meta-lime.800}",
       type: "color",
       group: "background.meta-lime",
       comment:
@@ -82,28 +82,28 @@ export const metaLimeSemanticTokenConfig = {
   },
   text: {
     "meta-lime": {
-      value: "{ax.meta-lime.1000.value}",
+      value: "{ax.meta-lime.1000}",
       type: "color",
       group: "text.meta-lime",
       comment:
         "Sterk farge for tekst og ikoner for rollen meta lime. Godkjent på alle bakgrunner unntatt strong.",
     },
     "meta-lime-subtle": {
-      value: "{ax.meta-lime.800.value}",
+      value: "{ax.meta-lime.800}",
       type: "color",
       group: "text.meta-lime",
       comment:
         "Standard farge for tekst og ikoner med rollen meta lime. Godkjent på alle bakgrunner unntatt strong.",
     },
     "meta-lime-decoration": {
-      value: "{ax.meta-lime.600.value}",
+      value: "{ax.meta-lime.600}",
       type: "color",
       group: "text.meta-lime",
       comment:
         "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). **Ikke godkjent på tekst altså**.",
     },
     "meta-lime-contrast": {
-      value: "{ax.neutral.000.value}",
+      value: "{ax.neutral.000}",
       type: "color",
       group: "text.meta-lime",
       comment:
@@ -112,27 +112,27 @@ export const metaLimeSemanticTokenConfig = {
   },
   border: {
     "meta-lime": {
-      value: "{ax.meta-lime.600.value}",
+      value: "{ax.meta-lime.600}",
       type: "color",
       group: "border.meta-lime",
       comment: "Standard farge for border.",
     },
     "meta-lime-subtle": {
-      value: "{ax.meta-lime.400.value}",
+      value: "{ax.meta-lime.400}",
       type: "color",
       group: "border.meta-lime",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
     },
     "meta-lime-subtleA": {
-      value: "{ax.meta-lime.400A.value}",
+      value: "{ax.meta-lime.400A}",
       type: "color",
       group: "border.meta-lime",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
     },
     "meta-lime-strong": {
-      value: "{ax.meta-lime.700.value}",
+      value: "{ax.meta-lime.700}",
       type: "color",
       group: "border.meta-lime",
       comment:

@navikt/core/tokens/src/tokens/colors/semantic-roles/meta-purple.tokens.ts

@@ -3,77 +3,77 @@ import type { StyleDictionaryTokenConfig } from "../../../tokens.util";
 export const metaPurpleSemanticTokenConfig = {
   bg: {
     "meta-purple-soft": {
-      value: "{ax.meta-purple.100.value}",
+      value: "{ax.meta-purple.100}",
       type: "color",
       group: "background.meta-purple",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
     },
     "meta-purple-softA": {
-      value: "{ax.meta-purple.100A.value}",
+      value: "{ax.meta-purple.100A}",
       type: "color",
       group: "background.meta-purple",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
     },
     "meta-purple-moderate": {
-      value: "{ax.meta-purple.200.value}",
+      value: "{ax.meta-purple.200}",
       type: "color",
       group: "background.meta-purple",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.",
     },
     "meta-purple-moderateA": {
-      value: "{ax.meta-purple.200A.value}",
+      value: "{ax.meta-purple.200A}",
       type: "color",
       group: "background.meta-purple",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "meta-purple-moderate-hover": {
-      value: "{ax.meta-purple.300.value}",
+      value: "{ax.meta-purple.300}",
       type: "color",
       group: "background.meta-purple",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "meta-purple-moderate-hoverA": {
-      value: "{ax.meta-purple.300A.value}",
+      value: "{ax.meta-purple.300A}",
       type: "color",
       group: "background.meta-purple",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "meta-purple-moderate-pressed": {
-      value: "{ax.meta-purple.400.value}",
+      value: "{ax.meta-purple.400}",
       type: "color",
       group: "background.meta-purple",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "meta-purple-moderate-pressedA": {
-      value: "{ax.meta-purple.400A.value}",
+      value: "{ax.meta-purple.400A}",
       type: "color",
       group: "background.meta-purple",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "meta-purple-strong": {
-      value: "{ax.meta-purple.600.value}",
+      value: "{ax.meta-purple.600}",
       type: "color",
       group: "background.meta-purple",
       comment:
         "En sterk bakgrunnsfarge som brukes på meningsbærende elementer.",
     },
     "meta-purple-strong-hover": {
-      value: "{ax.meta-purple.700.value}",
+      value: "{ax.meta-purple.700}",
       type: "color",
       group: "background.meta-purple",
       comment:
         "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.",
     },
     "meta-purple-strong-pressed": {
-      value: "{ax.meta-purple.800.value}",
+      value: "{ax.meta-purple.800}",
       type: "color",
       group: "background.meta-purple",
       comment:
@@ -82,28 +82,28 @@ export const metaPurpleSemanticTokenConfig = {
   },
   text: {
     "meta-purple": {
-      value: "{ax.meta-purple.1000.value}",
+      value: "{ax.meta-purple.1000}",
       type: "color",
       group: "text.meta-purple",
       comment:
         "Sterk farge for tekst og ikoner for rollen meta purple. Godkjent på alle bakgrunner unntatt strong.",
     },
     "meta-purple-subtle": {
-      value: "{ax.meta-purple.800.value}",
+      value: "{ax.meta-purple.800}",
       type: "color",
       group: "text.meta-purple",
       comment:
         "Standard farge for tekst og ikoner med rollen meta purple. Godkjent på alle bakgrunner unntatt strong.",
     },
     "meta-purple-decoration": {
-      value: "{ax.meta-purple.600.value}",
+      value: "{ax.meta-purple.600}",
       type: "color",
       group: "text.meta-purple",
       comment:
         "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). **Ikke godkjent på tekst altså**.",
     },
     "meta-purple-contrast": {
-      value: "{ax.neutral.000.value}",
+      value: "{ax.neutral.000}",
       type: "color",
       group: "text.meta-purple",
       comment:
@@ -112,27 +112,27 @@ export const metaPurpleSemanticTokenConfig = {
   },
   border: {
     "meta-purple": {
-      value: "{ax.meta-purple.600.value}",
+      value: "{ax.meta-purple.600}",
       type: "color",
       group: "border.meta-purple",
       comment: "Standard farge for border.",
     },
     "meta-purple-subtle": {
-      value: "{ax.meta-purple.400.value}",
+      value: "{ax.meta-purple.400}",
       type: "color",
       group: "border.meta-purple",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
     },
     "meta-purple-subtleA": {
-      value: "{ax.meta-purple.400A.value}",
+      value: "{ax.meta-purple.400A}",
       type: "color",
       group: "border.meta-purple",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
     },
     "meta-purple-strong": {
-      value: "{ax.meta-purple.700.value}",
+      value: "{ax.meta-purple.700}",
       type: "color",
       group: "border.meta-purple",
       comment:

@navikt/core/tokens/src/tokens/colors/semantic-roles/neutral.tokens.ts

@@ -3,77 +3,77 @@ import type { StyleDictionaryTokenConfig } from "../../../tokens.util";
 export const neutralSemanticTokenConfig = {
   bg: {
     "neutral-soft": {
-      value: "{ax.neutral.100.value}",
+      value: "{ax.neutral.100}",
       type: "color",
       group: "background.neutral",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
     },
     "neutral-softA": {
-      value: "{ax.neutral.100A.value}",
+      value: "{ax.neutral.100A}",
       type: "color",
       group: "background.neutral",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
     },
     "neutral-moderate": {
-      value: "{ax.neutral.200.value}",
+      value: "{ax.neutral.200}",
       type: "color",
       group: "background.neutral",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.",
     },
     "neutral-moderateA": {
-      value: "{ax.neutral.200A.value}",
+      value: "{ax.neutral.200A}",
       type: "color",
       group: "background.neutral",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "neutral-moderate-hover": {
-      value: "{ax.neutral.300.value}",
+      value: "{ax.neutral.300}",
       type: "color",
       group: "background.neutral",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "neutral-moderate-hoverA": {
-      value: "{ax.neutral.300A.value}",
+      value: "{ax.neutral.300A}",
       type: "color",
       group: "background.neutral",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button neutral secondary hover). Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "neutral-moderate-pressed": {
-      value: "{ax.neutral.400.value}",
+      value: "{ax.neutral.400}",
       type: "color",
       group: "background.neutral",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "neutral-moderate-pressedA": {
-      value: "{ax.neutral.400A.value}",
+      value: "{ax.neutral.400A}",
       type: "color",
       group: "background.neutral",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer (f.eks. button neutral secondary active). Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "neutral-strong": {
-      value: "{ax.neutral.700.value}",
+      value: "{ax.neutral.700}",
       type: "color",
       group: "background.neutral",
       comment:
         "En sterk bakgrunnsfarge som brukes på meningsbærende elementer (f.eks. button neutral primary).",
     },
     "neutral-strong-hover": {
-      value: "{ax.neutral.800.value}",
+      value: "{ax.neutral.800}",
       type: "color",
       group: "background.neutral",
       comment:
         "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button neutral primary hover).",
     },
     "neutral-strong-pressed": {
-      value: "{ax.neutral.900.value}",
+      value: "{ax.neutral.900}",
       type: "color",
       group: "background.neutral",
       comment:
@@ -82,28 +82,28 @@ export const neutralSemanticTokenConfig = {
   },
   text: {
     neutral: {
-      value: "{ax.neutral.1000.value}",
+      value: "{ax.neutral.1000}",
       type: "color",
       group: "text.neutral",
       comment:
         "Standard farge for tekst og ikoner med rollen neutral. Godkjent på alle bakgrunner unntatt strong.",
     },
     "neutral-subtle": {
-      value: "{ax.neutral.900.value}",
+      value: "{ax.neutral.900}",
       type: "color",
       group: "text.neutral",
       comment:
         "En nedtonet farge for tekst og ikoner med rollen neutral. Godkjent på alle bakgrunner unntatt strong.",
     },
     "neutral-decoration": {
-      value: "{ax.neutral.600.value}",
+      value: "{ax.neutral.600}",
       type: "color",
       group: "text.neutral",
       comment:
         "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). **Ikke godkjent på tekst altså**.",
     },
     "neutral-contrast": {
-      value: "{ax.neutral.000.value}",
+      value: "{ax.neutral.000}",
       type: "color",
       group: "text.neutral",
       comment:
@@ -112,27 +112,27 @@ export const neutralSemanticTokenConfig = {
   },
   border: {
     neutral: {
-      value: "{ax.neutral.600.value}",
+      value: "{ax.neutral.600}",
       type: "color",
       group: "border.neutral",
       comment: "Standard farge for border.",
     },
     "neutral-subtle": {
-      value: "{ax.neutral.400.value}",
+      value: "{ax.neutral.400}",
       type: "color",
       group: "border.neutral",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
     },
     "neutral-subtleA": {
-      value: "{ax.neutral.400A.value}",
+      value: "{ax.neutral.400A}",
       type: "color",
       group: "border.neutral",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
     },
     "neutral-strong": {
-      value: "{ax.neutral.700.value}",
+      value: "{ax.neutral.700}",
       type: "color",
       group: "border.neutral",
       comment:

@navikt/core/tokens/src/tokens/colors/semantic-roles/success.tokens.ts

@@ -3,77 +3,77 @@ import type { StyleDictionaryTokenConfig } from "../../../tokens.util";
 export const successSemanticTokenConfig = {
   bg: {
     "success-soft": {
-      value: "{ax.success.100.value}",
+      value: "{ax.success.100}",
       type: "color",
       group: "background.success",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
     },
     "success-softA": {
-      value: "{ax.success.100A.value}",
+      value: "{ax.success.100A}",
       type: "color",
       group: "background.success",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
     },
     "success-moderate": {
-      value: "{ax.success.200.value}",
+      value: "{ax.success.200}",
       type: "color",
       group: "background.success",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border (f.eks. alert success).",
     },
     "success-moderateA": {
-      value: "{ax.success.200A.value}",
+      value: "{ax.success.200A}",
       type: "color",
       group: "background.success",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "success-moderate-hover": {
-      value: "{ax.success.300.value}",
+      value: "{ax.success.300}",
       type: "color",
       group: "background.success",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "success-moderate-hoverA": {
-      value: "{ax.success.300A.value}",
+      value: "{ax.success.300A}",
       type: "color",
       group: "background.success",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "success-moderate-pressed": {
-      value: "{ax.success.400.value}",
+      value: "{ax.success.400}",
       type: "color",
       group: "background.success",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "success-moderate-pressedA": {
-      value: "{ax.success.400A.value}",
+      value: "{ax.success.400A}",
       type: "color",
       group: "background.success",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "success-strong": {
-      value: "{ax.success.600.value}",
+      value: "{ax.success.600}",
       type: "color",
       group: "background.success",
       comment:
         "En sterk bakgrunnsfarge som brukes på meningsbærende elementer.",
     },
     "success-strong-hover": {
-      value: "{ax.success.700.value}",
+      value: "{ax.success.700}",
       type: "color",
       group: "background.success",
       comment:
         "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.",
     },
     "success-strong-pressed": {
-      value: "{ax.success.800.value}",
+      value: "{ax.success.800}",
       type: "color",
       group: "background.success",
       comment:
@@ -82,28 +82,28 @@ export const successSemanticTokenConfig = {
   },
   text: {
     success: {
-      value: "{ax.success.1000.value}",
+      value: "{ax.success.1000}",
       type: "color",
       group: "text.success",
       comment:
         "Sterk farge for tekst og ikoner for rollen success. Godkjent på alle bakgrunner unntatt strong.",
     },
     "success-subtle": {
-      value: "{ax.success.800.value}",
+      value: "{ax.success.800}",
       type: "color",
       group: "text.success",
       comment:
         "Standard farge for tekst og ikoner med rollen success. Godkjent på alle bakgrunner unntatt strong.",
     },
     "success-decoration": {
-      value: "{ax.success.600.value}",
+      value: "{ax.success.600}",
       type: "color",
       group: "text.success",
       comment:
         "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). **Ikke godkjent på tekst altså**.",
     },
     "success-contrast": {
-      value: "{ax.neutral.000.value}",
+      value: "{ax.neutral.000}",
       type: "color",
       group: "text.success",
       comment:
@@ -112,27 +112,27 @@ export const successSemanticTokenConfig = {
   },
   border: {
     success: {
-      value: "{ax.success.600.value}",
+      value: "{ax.success.600}",
       type: "color",
       group: "border.success",
       comment: "Standard farge for border.",
     },
     "success-subtle": {
-      value: "{ax.success.400.value}",
+      value: "{ax.success.400}",
       type: "color",
       group: "border.success",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
     },
     "success-subtleA": {
-      value: "{ax.success.400A.value}",
+      value: "{ax.success.400A}",
       type: "color",
       group: "border.success",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
     },
     "success-strong": {
-      value: "{ax.success.700.value}",
+      value: "{ax.success.700}",
       type: "color",
       group: "border.success",
       comment:

@navikt/core/tokens/src/tokens/colors/semantic-roles/warning.tokens.ts

@@ -3,77 +3,77 @@ import type { StyleDictionaryTokenConfig } from "../../../tokens.util";
 export const warningSemanticTokenConfig = {
   bg: {
     "warning-soft": {
-      value: "{ax.warning.100.value}",
+      value: "{ax.warning.100}",
       type: "color",
       group: "background.warning",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
     },
     "warning-softA": {
-      value: "{ax.warning.100A.value}",
+      value: "{ax.warning.100A}",
       type: "color",
       group: "background.warning",
       comment:
         "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
     },
     "warning-moderate": {
-      value: "{ax.warning.200.value}",
+      value: "{ax.warning.200}",
       type: "color",
       group: "background.warning",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border (f.eks. alert warning).",
     },
     "warning-moderateA": {
-      value: "{ax.warning.200A.value}",
+      value: "{ax.warning.200A}",
       type: "color",
       group: "background.warning",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "warning-moderate-hover": {
-      value: "{ax.warning.300.value}",
+      value: "{ax.warning.300}",
       type: "color",
       group: "background.warning",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "warning-moderate-hoverA": {
-      value: "{ax.warning.300A.value}",
+      value: "{ax.warning.300A}",
       type: "color",
       group: "background.warning",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "warning-moderate-pressed": {
-      value: "{ax.warning.400.value}",
+      value: "{ax.warning.400}",
       type: "color",
       group: "background.warning",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
     },
     "warning-moderate-pressedA": {
-      value: "{ax.warning.400A.value}",
+      value: "{ax.warning.400A}",
       type: "color",
       group: "background.warning",
       comment:
         "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
     },
     "warning-strong": {
-      value: "{ax.warning.600.value}",
+      value: "{ax.warning.600}",
       type: "color",
       group: "background.warning",
       comment:
         "En sterk bakgrunnsfarge som brukes på meningsbærende elementer.",
     },
     "warning-strong-hover": {
-      value: "{ax.warning.700.value}",
+      value: "{ax.warning.700}",
       type: "color",
       group: "background.warning",
       comment:
         "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.",
     },
     "warning-strong-pressed": {
-      value: "{ax.warning.800.value}",
+      value: "{ax.warning.800}",
       type: "color",
       group: "background.warning",
       comment:
@@ -82,28 +82,28 @@ export const warningSemanticTokenConfig = {
   },
   text: {
     warning: {
-      value: "{ax.warning.1000.value}",
+      value: "{ax.warning.1000}",
       type: "color",
       group: "text.warning",
       comment:
         "Sterk farge for tekst og ikoner for rollen warning. Godkjent på alle bakgrunner unntatt strong.",
     },
     "warning-subtle": {
-      value: "{ax.warning.800.value}",
+      value: "{ax.warning.800}",
       type: "color",
       group: "text.warning",
       comment:
         "Standard farge for tekst og ikoner med rollen warning. Godkjent på alle bakgrunner unntatt strong.",
     },
     "warning-decoration": {
-      value: "{ax.warning.600.value}",
+      value: "{ax.warning.600}",
       type: "color",
       group: "text.warning",
       comment:
         "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). **Ikke godkjent på tekst altså**.",
     },
     "warning-contrast": {
-      value: "{ax.neutral.000.value}",
+      value: "{ax.neutral.000}",
       type: "color",
       group: "text.warning",
       comment:
@@ -112,27 +112,27 @@ export const warningSemanticTokenConfig = {
   },
   border: {
     warning: {
-      value: "{ax.warning.600.value}",
+      value: "{ax.warning.600}",
       type: "color",
       group: "border.warning",
       comment: "Standard farge for border.",
     },
     "warning-subtle": {
-      value: "{ax.warning.400.value}",
+      value: "{ax.warning.400}",
       type: "color",
       group: "border.warning",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
     },
     "warning-subtleA": {
-      value: "{ax.warning.400A.value}",
+      value: "{ax.warning.400A}",
       type: "color",
       group: "border.warning",
       comment:
         "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
     },
     "warning-strong": {
-      value: "{ax.warning.700.value}",
+      value: "{ax.warning.700}",
       type: "color",
       group: "border.warning",
       comment:

@navikt/core/tokens/src/tokens/colors/semantic-root.tokens.ts

@@ -14,7 +14,7 @@ export function semanticRootTokens(theme: AkselColorTheme) {
   return {
     text: {
       logo: {
-        value: theme === "light" ? "#C30000" : "{ax.neutral.1000.value}",
+        value: theme === "light" ? "#C30000" : "{ax.neutral.1000}",
         type: "color",
         group: "text",
         comment: "Navs logo-farge",
@@ -43,17 +43,14 @@ export function semanticRootTokens(theme: AkselColorTheme) {
           "Bakgrunnsfargen som brukes på input-elementer (tekstfelt, sjekkbokser, o.l.) ",
       },
       raised: {
-        value:
-          theme === "light"
-            ? "{ax.neutral.000.value}"
-            : "{ax.neutral.200.value}",
+        value: theme === "light" ? "{ax.neutral.000}" : "{ax.neutral.200}",
         type: "color",
         group: "background",
         comment:
           "Bakgrunnsfarge på bokser som svever eller som skal fremheves i darkmode. F.eks. Card.",
       },
       sunken: {
-        value: theme === "light" ? "{ax.neutral.200.value}" : "#07090D",
+        value: theme === "light" ? "{ax.neutral.200}" : "#07090D",
         type: "color",
         group: "background",
         comment:
@@ -69,7 +66,7 @@ export function semanticRootTokens(theme: AkselColorTheme) {
     },
     border: {
       focus: {
-        value: "{ax.neutral.1000.value}",
+        value: "{ax.neutral.1000}",
         type: "color",
         group: "border",
         /**

@navikt/core/tokens/src/tokens/colors/semantic-themed-base.tokens.ts

@@ -17,88 +17,91 @@ import type { AkselColorRole } from "../../../types";
  *   --ax-bg-moderate: var(--ax-bg-success-moderate);
  * }
  * ```
+ *
+ *
+ * Source for all our color generation: https://www.figma.com/design/NGULm4ljBe9o5xKbl5pJqD/Nye-farger?node-id=785-1106&p=f&t=sJq3Y4e1qfUNKkcI-0
  */
 export function semanticThemedBaseTokens(role: AkselColorRole) {
   return {
     bg: {
       soft: {
-        value: `{ax.bg.${role}-soft.value}`,
+        value: `{ax.bg.${role}-soft}`,
         type: "themed-role",
       },
       softA: {
-        value: `{ax.bg.${role}-softA.value}`,
+        value: `{ax.bg.${role}-softA}`,
         type: "themed-role",
       },
       moderate: {
-        value: `{ax.bg.${role}-moderate.value}`,
+        value: `{ax.bg.${role}-moderate}`,
         type: "themed-role",
       },
       moderateA: {
-        value: `{ax.bg.${role}-moderateA.value}`,
+        value: `{ax.bg.${role}-moderateA}`,
         type: "themed-role",
       },
       "moderate-hover": {
-        value: `{ax.bg.${role}-moderate-hover.value}`,
+        value: `{ax.bg.${role}-moderate-hover}`,
         type: "themed-role",
       },
       "moderate-hoverA": {
-        value: `{ax.bg.${role}-moderate-hoverA.value}`,
+        value: `{ax.bg.${role}-moderate-hoverA}`,
         type: "themed-role",
       },
       "moderate-pressed": {
-        value: `{ax.bg.${role}-moderate-pressed.value}`,
+        value: `{ax.bg.${role}-moderate-pressed}`,
         type: "themed-role",
       },
       "moderate-pressedA": {
-        value: `{ax.bg.${role}-moderate-pressedA.value}`,
+        value: `{ax.bg.${role}-moderate-pressedA}`,
         type: "themed-role",
       },
       strong: {
-        value: `{ax.bg.${role}-strong.value}`,
+        value: `{ax.bg.${role}-strong}`,
         type: "themed-role",
       },
       "strong-hover": {
-        value: `{ax.bg.${role}-strong-hover.value}`,
+        value: `{ax.bg.${role}-strong-hover}`,
         type: "themed-role",
       },
       "strong-pressed": {
-        value: `{ax.bg.${role}-strong-pressed.value}`,
+        value: `{ax.bg.${role}-strong-pressed}`,
         type: "themed-role",
       },
     },
     text: {
       default: {
-        value: `{ax.text.${role}.value}`,
+        value: `{ax.text.${role}}`,
         type: "themed-role",
       },
       subtle: {
-        value: `{ax.text.${role}-subtle.value}`,
+        value: `{ax.text.${role}-subtle}`,
         type: "themed-role",
       },
       decoration: {
-        value: `{ax.text.${role}-decoration.value}`,
+        value: `{ax.text.${role}-decoration}`,
         type: "themed-role",
       },
       contrast: {
-        value: `{ax.text.${role}-contrast.value}`,
+        value: `{ax.text.${role}-contrast}`,
         type: "themed-role",
       },
     },
     border: {
       default: {
-        value: `{ax.border.${role}.value}`,
+        value: `{ax.border.${role}}`,
         type: "themed-role",
       },
       subtle: {
-        value: `{ax.border.${role}-subtle.value}`,
+        value: `{ax.border.${role}-subtle}`,
         type: "themed-role",
       },
       subtleA: {
-        value: `{ax.border.${role}-subtleA.value}`,
+        value: `{ax.border.${role}-subtleA}`,
         type: "themed-role",
       },
       strong: {
-        value: `{ax.border.${role}-strong.value}`,
+        value: `{ax.border.${role}-strong}`,
         type: "themed-role",
       },
     },

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 8.17.2
+
+### @navikt/aksel-icons
+
+- Package: Fixed regression where package was published without dist-files ([`9673de4`](https://github.com/navikt/aksel/commit/9673de4c264479dd8ca04897003532595acad255))
+
 ## 8.17.1
 
 ### @navikt/ds-react
@@ -3062,7 +3068,7 @@
 
 - - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
 
-* * Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
+* - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
 
 ### @navikt/ds-react
 

aksel.nav.no/nais-prod.yaml

@@ -13,10 +13,6 @@ spec:
   ingresses:
     - "https://aksel.nav.no"
     - "https://design.nav.no"
-  observability:
-    autoInstrumentation:
-      enabled: true
-      runtime: nodejs
   replicas:
     disableAutoScaling: true
     min: 1

aksel.nav.no/package.json

@@ -11,11 +11,11 @@
     "sanity:update": "yarn workspace website update:sanity"
   },
   "dependencies": {
-    "@navikt/aksel": "^8.17.1",
-    "@navikt/aksel-icons": "^8.17.1",
-    "@navikt/ds-css": "^8.17.1",
-    "@navikt/ds-react": "^8.17.1",
-    "@navikt/ds-tailwind": "^8.17.1",
-    "@navikt/ds-tokens": "^8.17.1"
+    "@navikt/aksel": "^8.17.2",
+    "@navikt/aksel-icons": "^8.17.2",
+    "@navikt/ds-css": "^8.17.2",
+    "@navikt/ds-react": "^8.17.2",
+    "@navikt/ds-tailwind": "^8.17.2",
+    "@navikt/ds-tokens": "^8.17.2"
   }
 }

aksel.nav.no/website/app/_ui/global-search/server/GlobalSearch.actions.ts

@@ -7,7 +7,6 @@ let preloaded = false;
 
 async function preloadSearchIndex() {
   if (preloaded) {
-    console.info("preloaded");
     return;
   }
   preloaded = true;

aksel.nav.no/website/package.json

@@ -64,7 +64,7 @@
     "swr": "^2.4.2",
     "tinycolor2": "^1.6.0",
     "typescript-cookie": "^1.0.6",
-    "zod": "^4.4.3"
+    "zod": "^4.6.5"
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",

aksel.nav.no/website/pages/eksempler/expansioncard/icon.tsx

@@ -7,6 +7,7 @@ import {
   HStack,
   Label,
   Link,
+  Show,
   VStack,
 } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
@@ -16,9 +17,9 @@ const Example = () => {
     <ExpansionCard aria-label="Demo med ikon">
       <ExpansionCard.Header>
         <HStack wrap={false} gap="space-16" align="center">
-          <div>
+          <Show above="sm">
             <PlantIcon aria-hidden fontSize="3rem" />
-          </div>
+          </Show>
           <div>
             <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
             <ExpansionCard.Description>

aksel.nav.no/website/proxy.ts

@@ -52,7 +52,6 @@ function refreshRedirects() {
     })
     .finally(() => {
       redirectCacheRefresh = null;
-      console.info("[proxy] Finished refreshing redirects");
     });
 
   return redirectCacheRefresh;

apps/figma-icon-plugin/package.json

@@ -11,9 +11,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/aksel-icons": "^8.17.1",
-    "@navikt/ds-css": "^8.17.1",
-    "@navikt/ds-react": "^8.17.1",
+    "@navikt/aksel-icons": "^8.17.2",
+    "@navikt/ds-css": "^8.17.2",
+    "@navikt/ds-react": "^8.17.2",
     "fuse.js": "7.4.2",
     "react": "19.2.8",
     "react-dom": "19.2.8"

apps/mcp-server/package.json

@@ -19,9 +19,9 @@
   "devDependencies": {
     "@modelcontextprotocol/inspector": "^2.2.0",
     "@modelcontextprotocol/sdk": "^1.30.0",
-    "@navikt/aksel": "^8.17.1",
-    "@navikt/aksel-icons": "^8.17.1",
-    "@navikt/ds-tokens": "^8.17.1",
+    "@navikt/aksel": "^8.17.2",
+    "@navikt/aksel-icons": "^8.17.2",
+    "@navikt/ds-tokens": "^8.17.2",
     "@sanity/client": "7.27.0",
     "@types/express": "^5.0.3",
     "@types/node": "^24.10.9",
@@ -29,9 +29,9 @@
     "fuse.js": "7.4.2",
     "node-cache": "^5.1.2",
     "prom-client": "^15.1.3",
-    "tsdown": "^0.22.3",
+    "tsdown": "^0.23.0",
     "typescript": "6.0.3",
     "vitest": "4.1.11",
-    "zod": "^4.4.3"
+    "zod": "^4.6.5"
   }
 }

apps/playroom/package.json

@@ -20,9 +20,9 @@
     "typescript": "6.0.3"
   },
   "dependencies": {
-    "@navikt/aksel-icons": "^8.17.1",
-    "@navikt/ds-css": "^8.17.1",
-    "@navikt/ds-react": "^8.17.1",
+    "@navikt/aksel-icons": "^8.17.2",
+    "@navikt/ds-css": "^8.17.2",
+    "@navikt/ds-react": "^8.17.2",
     "react": "19.2.8"
   }
 }

package.json

@@ -24,7 +24,7 @@
     "changelog": "yarn update:repo-changelog",
     "changeset": "changeset",
     "create-version": "changeset version && yarn changelog && yarn",
-    "release": "yarn boot && yarn docgen:meta && node tooling/scripts/publish-npm.mts && yarn script:git-release",
+    "release": "yarn boot && yarn docgen:meta && changeset publish && yarn script:git-release",
     "postinstall": "husky"
   },
   "workspaces": [
@@ -78,7 +78,7 @@
     "@actions/core": "^3.0.1",
     "@babel/eslint-parser": "^7.29.7",
     "@biomejs/biome": "2.5.9",
-    "@changesets/cli": "3.0.1",
+    "@changesets/cli": "2.31.1",
     "@eslint/js": "^10.0.1",
     "@github-ui/storybook-addon-performance-panel": "^1.3.0",
     "@storybook/addon-a11y": "^10.6.0",