🐛 Fikset keyboard-event error i monthpicker

and fix some typos

.changeset/README.md

@@ -1,6 +1,6 @@
 # Changesets
 
-For versjonering bruker vi løsningen [Changesets](https://github.com/changesets/changesets) for å [versjonering](https://semver.org/) og publisering av pakker.
+For versjonering bruker vi løsningen [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
 
 ## Howto
 

.changeset/config.json

@@ -21,7 +21,7 @@
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",
-  "ignore": ["nextjs-demo", "shadow-dom", "aksel.nav.no"],
+  "ignore": ["shadow-dom", "aksel.nav.no", "@navikt/ds-navno"],
 
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always"

.github/workflows/backup-sanity.yml

@@ -24,10 +24,10 @@ jobs:
             ${{ runner.os }}-build-
 
       - name: Install dependencies
-        run: yarn
+        run: cd aksel.nav.no/sanity && yarn
 
       - name: Export dataset
-        run: SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn workspace aksel.nav.no sanity:backup
+        run: cd aksel.nav.no/sanity && SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
       - name: Upload GCP bucket
         uses: "google-github-actions/auth@v0"
         with:
@@ -36,4 +36,4 @@ jobs:
         with:
           path: ./aksel.nav.no/sanity
           destination: "aksel-website-prod/backups"
-          glob: "**/backup-*.tar.gz"
+          glob: "backup-*.tar.gz"

.github/workflows/push-to-cdn.yaml

@@ -20,9 +20,8 @@ jobs:
       - uses: "actions/checkout@v3"
 
       - id: upload
-        uses: nais/frontend-plattform-cdn-upload-action@main
+        uses: navikt/frontend/actions/cdn-upload/v1@main
         with:
-          cdn-environment: cdn.nav.no
           cdn-team-name: aksel
           source: ./fonts
           destination: "" # uploads folder to team root

.gitignore

@@ -116,6 +116,7 @@ react-docgen.json
 react-docgen-docs.json
 cjs
 esm
+@navikt/community/navno/css
 .vercel
 _docs.json
 
@@ -139,7 +140,6 @@ _docs.json
 !*/sanity/lib/
 !*/sanity/static/
 out
-test-urls.json
 videos
 sanity/scripts/renameField.js
 tmp.json
@@ -148,3 +148,4 @@ tmp.json
 /playwright/.cache/
 playwright-report/
 /test-results/
+backup-*.tar.gz

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname $0)/_/husky.sh"
 
-yarn pretty-quick --staged
+yarn pretty-quick --staged && yarn lint-staged

.husky/pre-push

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname $0)/_/husky.sh"
-
-yarn lint

.storybook/main.js

@@ -18,6 +18,7 @@ module.exports = {
   stories: () => [...getStories(), "./*.stories.mdx"],
   addons: [
     "@storybook/addon-a11y",
+    "@whitespace/storybook-addon-html",
     {
       name: "@storybook/addon-storysource",
       options: {

.storybook/webpack.config.js

@@ -6,6 +6,7 @@ module.exports = (baseConfig) => {
     use: ["style-loader", "css-loader"],
     include: [
       path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
+      path.resolve(__dirname, "../node_modules/@navikt/internal/css/index.css"),
     ],
   });
   baseConfig.config.resolve.alias = {

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @navikt/ds-codemod
 
+## 2.0.7
+
+## 2.0.6
+
+## 2.0.5
+
+## 2.0.4
+
+## 2.0.3
+
+## 2.0.2
+
+## 2.0.1
+
+## 2.0.0
+
+### Major Changes
+
+- [`6b96e4833`](https://github.com/navikt/Designsystemet/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+
+## 1.5.10
+
+## 1.5.9
+
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
+## 1.5.5
+
 ## 1.5.4
 
 ## 1.5.3

@navikt/codemod/README.md

@@ -1,44 +1,101 @@
-# NAV designsystem Codemods
+# Aksel Codemods
 
-Collection of Codemods for easier migration between breaking changes.
-
-Highly inspired by both MUI and NEXT
-
-- [NEXT](https://nextjs.org/docs/advanced-features/codemods)
-- [MUI](https://github.com/mui/material-ui/tree/master/packages/mui-codemod)
+Collection of Codemods for easier migration between breaking changes in NAVs designsystem-packages.
 
 ## Usage
 
-Codemod transformations runs code-transformations programmatically in your project. This helps when migrating lots of breaking changes without spending hours doing it manually.
+Codemod runs code-transformations programmatically in your project. This helps when migrating breaking changes without spending hours doing it manually.
 
-NOTE: This codemod only supports fairly "default" usage of components. Components used with dynamic imports, styled-components, non-default imports (example `import * as DS from "@navikt/ds-react"` or `from "@navikt/ds-react/cjs"`) will not work as expected.
+NOTE: This codemod only supports fairly "default" usage of components. Components used with dynamic imports, styled-components, non-default imports (ex `import * as DS from "@navikt/ds-react"` or `from "@navikt/ds-react/cjs"`) can lead to bugs when using codemod.
 
 ```javascript
-npx @navikt/ds-codemod <transform> <path>
+npx @navikt/ds-codemod <migration> <path>
 ```
 
-transform - name of transform, see available transforms below.
+migraton - name of migraton, see available migraton below.
+
 path - files or directory to transform
+
+```sh
 --dry Do a dry-run, no code will be edited
 --print Prints the changed output for comparison
+--force Runs even if there are uncommited changes (use with caution)
+```
 
-## Beta (0.19.x) -> v1.0.0
+## V1 -> V2
 
-`npx @navikt/ds-codemod v1.0.0/preset src`
+V2.0.0 updated the token-prefix of all tokens + names of all semantic-colors. The migrations below helps when migrating from the formats css, scss, less and js.
+
+### css-tokens (--navds format)
+
+`npx @navikt/ds-codemod v2/css src`
+
+When having redefined a token, you will need to manually find and replace these instances after the codemod-run. A global search for `--v2-migration__` will show all found instances where you had redefined a token.
+
+```diff
+.example{
+- color: var(--navds-global-color-gray-900);
++ color: var(--a-gray-900);
+
+- --navds-semantic-color-text: red;
++ --v2-migration__navds-semantic-color-text: red;
+}
+```
+
+### sass/scss-tokens ($navds format)
+
+`npx @navikt/ds-codemod v2/sass src`
+
+```diff
+.example{
+- color: $navds-global-color-gray-900;
++ color: $a-gray-900;
+}
+```
+
+### less-tokens (@navds format)
+
+`npx @navikt/ds-codemod v2/less src`
+
+```diff
+.example{
+- color: @navds-global-color-gray-900;
++ color: @a-gray-900;
+}
+```
+
+### js-tokens
+
+`npx @navikt/ds-codemod v2/js src`
+
+```diff
+
+- import { NavdsGlobalColorGray900 } from "@navikt/ds-tokens";
++ import { AGray900 } from "@navikt/ds-tokens";
+
+const styled = styled.p`
+- color: ${NavdsGlobalColorGray900};
++ color: ${AGray900};
+`
+```
+
+## Beta (0.19.x) -> v1
+
+`npx @navikt/ds-codemod v1/preset src`
 
 ### preset
 
-Combines all avaliable codemods for migrating from beta -> v1.0.0. This transform should only be ran once.
+Combines all avaliable codemods for migrating from beta -> v1. This transform should only be ran once.
 
 Includes these transforms
 
-- v1.0.0/tabs
-- v1.0.0/chat
-- v1.0.0/pagination
+- v1/tabs
+- v1/chat
+- v1/pagination
 
 ### tabs
 
-`npx @navikt/ds-codemod v1.0.0/tabs src`
+`npx @navikt/ds-codemod v1/tabs src`
 
 ```diff
 <Tabs
@@ -62,7 +119,7 @@ Includes these transforms
 
 ### chat
 
-`npx @navikt/ds-codemodmod v1.0.0/chat src`
+`npx @navikt/ds-codemodmod v1/chat src`
 
 ```diff
 -<SpeechBubble
@@ -86,7 +143,7 @@ Includes these transforms
 
 ### pagination
 
-`npx @navikt/ds-codemod v1.0.0/pagination src`
+`npx @navikt/ds-codemod v1/pagination src`
 
 This codemod should only be ran once, since the size-scale will keep decreasing for each subsequent iteration.
 
@@ -104,3 +161,10 @@ This codemod should only be ran once, since the size-scale will keep decreasing
 ## License
 
 [MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
+
+#
+
+Inspired by both MUI and NEXT
+
+- [NEXT](https://nextjs.org/docs/advanced-features/codemods)
+- [MUI](https://github.com/mui/material-ui/tree/master/packages/mui-codemod)

@navikt/codemod/bin/cli.ts

@@ -1,203 +1,36 @@
-/**
- * Copyright 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/cli.js
-// @next/codemod optional-name-of-transform optional/path/to/src [...options]
+import meow, { AnyFlags } from "meow";
 
-import globby from "globby";
-import inquirer from "inquirer";
-import meow from "meow";
-import path from "path";
-import execa from "execa";
-import chalk from "chalk";
-import isGitClean from "is-git-clean";
+import { migrate } from "./migrate";
+import { cliConfig } from "./config";
 
-export const jscodeshiftExecutable = require.resolve(".bin/jscodeshift");
-export const transformerDirectory = path.join(__dirname, "../", "transforms");
+const help = `
+Usage
+  $ npx @navikt/ds-codemod ${cliConfig.args
+    .map((arg) => `<${arg.name}>`)
+    .join(" ")}
+  ${cliConfig.args.map((arg) => `${arg.name}\t${arg.description}`).join("\n  ")}
+Options
+  ${Object.entries(cliConfig.flags)
+    .map(([name, val]: [string, any]) => `--${name}\t${val.description}`)
+    .join("\n  ")}
+`;
 
-export function checkGitStatus(force) {
-  let clean = false;
-  let errorMessage = "Unable to determine if git directory is clean";
-  try {
-    clean = isGitClean.sync(process.cwd());
-    errorMessage = "Git directory is not clean";
-  } catch (err) {
-    if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
-      clean = true;
-    }
-  }
+const { input, flags } = meow({
+  description: cliConfig.description,
+  flags: Object.fromEntries(
+    Object.entries(cliConfig.flags).map(
+      ([name, flag]: [string, any]): [string, AnyFlags] => [
+        name,
+        {
+          alias: flag.alias,
+          type: flag.type,
+        },
+      ]
+    )
+  ),
+  help,
+});
 
-  if (!clean) {
-    if (force) {
-      console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
-    } else {
-      console.log("Thank you for using @navikt/ds-codemod");
-      console.log(
-        chalk.yellow(
-          "\nBut before we continue, please stash or commit your git changes."
-        )
-      );
-      console.log(
-        "\nYou may use the --force flag to override this safety check."
-      );
-      process.exit(1);
-    }
-  }
-}
-
-export function runTransform({ files, flags, transformer }) {
-  const transformerPath = path.join(transformerDirectory, `${transformer}.js`);
-
-  let args = [];
-
-  const { dry, print, runInBand } = flags;
-
-  if (dry) {
-    args.push("--dry");
-  }
-  if (print) {
-    args.push("--print");
-  }
-  if (runInBand) {
-    args.push("--run-in-band");
-  }
-
-  args.push("--verbose=2");
-
-  args.push("--ignore-pattern=**/node_modules/**");
-
-  args.push("--extensions=tsx,ts,jsx,js");
-  args.push("--parser=tsx");
-
-  args = args.concat(["--transform", transformerPath]);
-
-  if (flags.jscodeshift) {
-    args = args.concat(flags.jscodeshift);
-  }
-
-  args = args.concat(files);
-
-  console.log(`Executing command: jscodeshift ${args.join(" ")}`);
-
-  const result = execa.sync(jscodeshiftExecutable, args, {
-    stdio: "inherit",
-    stripFinalNewline: false,
-  });
-
-  if (result.failed) {
-    throw new Error(`jscodeshift exited with code ${result.exitCode}`);
-  }
-}
-
-const TRANSFORMER_INQUIRER_CHOICES = [
-  {
-    name: "v1.0.0/preset: Runs all codemods for beta to v1 migration",
-    value: "v1.0.0/preset",
-  },
-  {
-    name: "v1.0.0/pagination: Fixes breaking API-changes from <Pagination /> component",
-    value: "v1.0.0/pagination",
-  },
-  {
-    name: "v1.0.0/tabs: Fixes breaking API-changes from <Tabs /> component",
-    value: "v1.0.0/tabs",
-  },
-  {
-    name: "v1.0.0/chat: Fixes breaking API-changes from <SpeechBubble /> (now <Chat/>) component",
-    value: "v1.0.0/chat",
-  },
-];
-
-function expandFilePathsIfNeeded(filesBeforeExpansion) {
-  const shouldExpandFiles = filesBeforeExpansion.some((file) =>
-    file.includes("*")
-  );
-  return shouldExpandFiles
-    ? globby.sync(filesBeforeExpansion)
-    : filesBeforeExpansion;
-}
-
-export function run() {
-  const cli = meow({
-    description: "Codemods for updating @navikt/ds-* packages",
-    help: `
-    Usage
-      $ npx @navikt/codemod <transform> <path> <...options>
-        transform    One of the choices from <link-here>
-        path         Files or directory to transform. Can be a glob like pages/**.js
-    Options
-      --force            Bypass Git safety checks and forcibly run codemods
-      --dry              Dry run (no changes are made to files)
-      --print            Print transformed files to your terminal
-      --jscodeshift  (Advanced) Pass options directly to jscodeshift
-    `,
-    flags: {
-      boolean: ["force", "dry", "print", "help"],
-      string: ["_"],
-      alias: {
-        h: "help",
-      },
-    },
-  } as meow.Options<meow.AnyFlags>);
-
-  if (!cli.flags.dry) {
-    checkGitStatus(cli.flags.force);
-  }
-
-  if (
-    cli.input[0] &&
-    !TRANSFORMER_INQUIRER_CHOICES.find((x) => x.value === cli.input[0])
-  ) {
-    console.error("Invalid transform choice, pick one of:");
-    console.error(
-      TRANSFORMER_INQUIRER_CHOICES.map((x) => "- " + x.value).join("\n")
-    );
-    process.exit(1);
-  }
-
-  inquirer
-    .prompt([
-      {
-        type: "input",
-        name: "files",
-        message: "On which files or directory should the codemods be applied?",
-        when: !cli.input[1],
-        default: ".",
-        // validate: () =>
-        filter: (files) => files.trim(),
-      },
-      {
-        type: "list",
-        name: "transformer",
-        message: "Which transform would you like to apply?",
-        when: !cli.input[0],
-        pageSize: TRANSFORMER_INQUIRER_CHOICES.length,
-        choices: TRANSFORMER_INQUIRER_CHOICES,
-      },
-    ])
-    .then((answers) => {
-      const { files, transformer } = answers;
-
-      const filesBeforeExpansion = cli.input[1] || files;
-      const filesExpanded = expandFilePathsIfNeeded([filesBeforeExpansion]);
-
-      const selectedTransformer = cli.input[0] || transformer;
-
-      if (!filesExpanded.length) {
-        console.log(
-          `No files found matching ${filesBeforeExpansion.join(" ")}`
-        );
-        return null;
-      }
-
-      return runTransform({
-        files: filesExpanded,
-        flags: cli.flags,
-        transformer: selectedTransformer,
-      });
-    });
+export async function run() {
+  await migrate(input[0], input[1], flags);
 }

@navikt/codemod/bin/config.ts

@@ -0,0 +1,37 @@
+const createCLIConfig = (config: any) => config;
+
+export const cliConfig = createCLIConfig({
+  description: "Migrations for NAV designsystem solutions",
+  args: [
+    {
+      name: "migration",
+      description:
+        "One of the choices from https://github.com/navikt/Designsystemet/blob/master/%40navikt/codemod/README.md",
+    },
+    {
+      name: "path",
+      description:
+        "Files or directory to transform. Can be a glob like src/**.css",
+    },
+  ],
+  flags: {
+    dry: {
+      alias: "d",
+      description: "Dry run, no changes will be made to files",
+      type: "boolean",
+    },
+    print: {
+      alias: "p",
+      description: "Print transformed files",
+      type: "boolean",
+    },
+    force: {
+      alias: "f",
+      description: "Forcibly run migrations without checking git-changes",
+      type: "boolean",
+    },
+  },
+});
+
+export const DS_MIGRATION_COMMENT =
+  "ds-codemod: Unable to migrate the following expression. Please upgrade manually.";

@navikt/codemod/bin/ds-codemod.ts

@@ -1,13 +1,5 @@
 #!/usr/bin/env node
 
-/**
- * Copyright 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/react-codemod.js
-// next-codemod optional-name-of-transform optional/path/to/src [...options]
+const { run } = require("./cli");
 
-require("./cli").run();
+run();

@navikt/codemod/bin/migrate.ts

@@ -0,0 +1,140 @@
+import fs from "fs";
+import path from "path";
+
+import * as jscodeshift from "jscodeshift/src/Runner";
+import chalk from "chalk";
+import isGitClean from "is-git-clean";
+import globby from "globby";
+
+export interface MigrateOptions {
+  dry?: boolean;
+  print?: boolean;
+  force?: boolean;
+}
+
+const migrationsMap = [
+  {
+    name: "v1/preset: Runs all codemods for beta to v1 migration",
+    value: "v1/preset",
+    path: "v1.0.0/preset",
+  },
+  {
+    name: "v1/pagination: Fixes breaking API-changes from <Pagination /> component",
+    value: "v1/pagination",
+    path: "v1.0.0/pagination",
+  },
+  {
+    name: "v1/tabs: Fixes breaking API-changes from <Tabs /> component",
+    value: "v1/tabs",
+    path: "v1.0.0/tabs",
+  },
+  {
+    name: "v1/chat: Fixes breaking API-changes from <SpeechBubble /> (now <Chat/>) component",
+    value: "v1/chat",
+    path: "v1.0.0/chat",
+  },
+  {
+    name: "v2/css: Fixes css-variables",
+    value: "v2/css",
+    path: "v2.0.0/update-css-tokens/update-css-tokens",
+  },
+  {
+    name: "v2/js: Fixes js-variables",
+    value: "v2/js",
+    path: "v2.0.0/update-js-tokens/update-js-tokens",
+  },
+  {
+    name: "v2/sass: Fixes sass-variables",
+    value: "v2/sass",
+    path: "v2.0.0/update-sass-tokens/update-sass-tokens",
+  },
+  {
+    name: "v2/less: Fixes less-variables",
+    value: "v2/less",
+    path: "v2.0.0/update-less-tokens/update-less-tokens",
+  },
+];
+
+export async function migrate(
+  migration: string,
+  files: string,
+  options: MigrateOptions = {}
+) {
+  const foundMigration = migrationsMap.find((x) => x.value === migration);
+  const migrationFile = path.join(
+    __dirname,
+    `../transforms/${foundMigration.path}.js`
+  );
+
+  try {
+    if (!fs.existsSync(migrationFile)) {
+      throw new Error(`No migration found for ${migration}`);
+    }
+
+    if (!files) throw new Error(`No path provided for migration`);
+
+    if (!options.dry) {
+      checkGitStatus(options.force);
+    }
+
+    const filepaths = globby.sync(files, { cwd: process.cwd() });
+
+    if (filepaths.length === 0) {
+      throw new Error(`No files found for ${files}`);
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(chalk.green("Running migration:"), migration);
+
+    await jscodeshift.run(migrationFile, filepaths, {
+      babel: true,
+      ignorePattern: [
+        "**/node_modules/**",
+        "**/.next/**",
+        "**/build/**",
+        "**/dist/**",
+      ],
+      extensions: "tsx,ts,jsx,js",
+      parser: "tsx",
+      verbose: 2,
+      runInBand: true,
+      silent: false,
+      stdin: false,
+      ...options,
+    });
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+export function checkGitStatus(force?: boolean) {
+  let clean = false;
+  let errorMessage = "Unable to determine if git directory is clean";
+  try {
+    clean = isGitClean.sync(process.cwd());
+    errorMessage = "Git directory is not clean";
+  } catch (err: any) {
+    if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
+      clean = true;
+    }
+  }
+
+  if (!clean) {
+    /* eslint-disable no-console */
+    if (force) {
+      console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
+    } else {
+      console.log("Thank you for using @navikt/ds-codemod!");
+      console.log(
+        chalk.yellow(
+          "\nBut before we continue, please stash or commit your git changes."
+        )
+      );
+      console.log(
+        "\nYou may use the --force flag to override this safety check."
+      );
+      process.exit(1);
+    }
+  }
+}

@navikt/codemod/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "1.5.4",
-  "description": "NAV designsystem codemods",
-  "author": "NAV Designsystem team",
+  "version": "2.0.7",
+  "description": "Aksel codemods for NAVs designsystem",
+  "author": "Aksel | NAV designsystem team",
   "license": "MIT",
   "keywords": [
     "react",
@@ -11,13 +11,16 @@
   ],
   "files": [
     "transforms/**/*.js",
+    "utils/**/*.js",
     "bin/*.js",
     "lib/**/*.js",
-    "lib/cra-to-next/gitignore"
+    "lib/cra-to-next/gitignore",
+    "tokens-map.mjs"
   ],
   "scripts": {
     "build": "yarn clean && tsc -p tsconfig.json",
     "dev": "yarn clean && tsc --watch -p tsconfig.json",
+    "start": "./bin/cli.js",
     "test": "yarn build && jest",
     "test:watch": "jest --watch",
     "clean": "node clean.mjs"

@navikt/codemod/tokens-map.mjs

@@ -0,0 +1,368 @@
+/* prettier-ignore */
+const tokens = [
+  ["--navds-semantic-color-text-inverted", "--a-text-on-inverted"],
+  ["--navds-semantic-color-text-muted", "--a-text-subtle"],
+  ["--navds-semantic-color-text", "--a-text-default"],
+  ["--navds-semantic-color-feedback-danger-text", "--a-text-danger"],
+  ["--navds-semantic-color-link-visited", "--a-text-visited"],
+  ["--navds-semantic-color-link", "--a-text-action"],
+  ["--navds-spacing-32", "--a-spacing-32"],
+  ["--navds-spacing-24", "--a-spacing-24"],
+  ["--navds-spacing-20", "--a-spacing-20"],
+  ["--navds-spacing-18", "--a-spacing-18"],
+  ["--navds-spacing-16", "--a-spacing-16"],
+  ["--navds-spacing-14", "--a-spacing-14"],
+  ["--navds-spacing-12", "--a-spacing-12"],
+  ["--navds-spacing-11", "--a-spacing-11"],
+  ["--navds-spacing-10", "--a-spacing-10"],
+  ["--navds-spacing-9", "--a-spacing-9"],
+  ["--navds-spacing-8", "--a-spacing-8"],
+  ["--navds-spacing-7", "--a-spacing-7"],
+  ["--navds-spacing-6", "--a-spacing-6"],
+  ["--navds-spacing-5", "--a-spacing-5"],
+  ["--navds-spacing-4", "--a-spacing-4"],
+  ["--navds-spacing-3", "--a-spacing-3"],
+  ["--navds-spacing-2", "--a-spacing-2"],
+  ["--navds-spacing-1", "--a-spacing-1"],
+  ["--navds-global-color-purple-900", "--a-purple-900"],
+  ["--navds-global-color-purple-800", "--a-purple-800"],
+  ["--navds-global-color-purple-700", "--a-purple-700"],
+  ["--navds-global-color-purple-600", "--a-purple-600"],
+  ["--navds-global-color-purple-500", "--a-purple-500"],
+  ["--navds-global-color-purple-400", "--a-purple-400"],
+  ["--navds-global-color-purple-300", "--a-purple-300"],
+  ["--navds-global-color-purple-200", "--a-purple-200"],
+  ["--navds-global-color-purple-100", "--a-purple-100"],
+  ["--navds-global-color-purple-50", "--a-purple-50"],
+  ["--navds-global-color-orange-900", "--a-orange-900"],
+  ["--navds-global-color-orange-800", "--a-orange-800"],
+  ["--navds-global-color-orange-700", "--a-orange-700"],
+  ["--navds-global-color-orange-600", "--a-orange-600"],
+  ["--navds-global-color-orange-500", "--a-orange-500"],
+  ["--navds-global-color-orange-400", "--a-orange-400"],
+  ["--navds-global-color-orange-300", "--a-orange-300"],
+  ["--navds-global-color-orange-200", "--a-orange-200"],
+  ["--navds-global-color-orange-100", "--a-orange-100"],
+  ["--navds-global-color-orange-50", "--a-orange-50"],
+  ["--navds-global-color-limegreen-900", "--a-limegreen-900"],
+  ["--navds-global-color-limegreen-800", "--a-limegreen-800"],
+  ["--navds-global-color-limegreen-700", "--a-limegreen-700"],
+  ["--navds-global-color-limegreen-600", "--a-limegreen-600"],
+  ["--navds-global-color-limegreen-500", "--a-limegreen-500"],
+  ["--navds-global-color-limegreen-400", "--a-limegreen-400"],
+  ["--navds-global-color-limegreen-300", "--a-limegreen-300"],
+  ["--navds-global-color-limegreen-200", "--a-limegreen-200"],
+  ["--navds-global-color-limegreen-100", "--a-limegreen-100"],
+  ["--navds-global-color-limegreen-50", "--a-limegreen-50"],
+  ["--navds-global-color-lightblue-900", "--a-lightblue-900"],
+  ["--navds-global-color-lightblue-800", "--a-lightblue-800"],
+  ["--navds-global-color-lightblue-700", "--a-lightblue-700"],
+  ["--navds-global-color-lightblue-600", "--a-lightblue-600"],
+  ["--navds-global-color-lightblue-500", "--a-lightblue-500"],
+  ["--navds-global-color-lightblue-400", "--a-lightblue-400"],
+  ["--navds-global-color-lightblue-300", "--a-lightblue-300"],
+  ["--navds-global-color-lightblue-200", "--a-lightblue-200"],
+  ["--navds-global-color-lightblue-100", "--a-lightblue-100"],
+  ["--navds-global-color-lightblue-50", "--a-lightblue-50"],
+  ["--navds-global-color-green-900", "--a-green-900"],
+  ["--navds-global-color-green-800", "--a-green-800"],
+  ["--navds-global-color-green-700", "--a-green-700"],
+  ["--navds-global-color-green-600", "--a-green-600"],
+  ["--navds-global-color-green-500", "--a-green-500"],
+  ["--navds-global-color-green-400", "--a-green-400"],
+  ["--navds-global-color-green-300", "--a-green-300"],
+  ["--navds-global-color-green-200", "--a-green-200"],
+  ["--navds-global-color-green-100", "--a-green-100"],
+  ["--navds-global-color-green-50", "--a-green-50"],
+  ["--navds-global-color-deepblue-900", "--a-deepblue-900"],
+  ["--navds-global-color-deepblue-800", "--a-deepblue-800"],
+  ["--navds-global-color-deepblue-700", "--a-deepblue-700"],
+  ["--navds-global-color-deepblue-600", "--a-deepblue-600"],
+  ["--navds-global-color-deepblue-500", "--a-deepblue-500"],
+  ["--navds-global-color-deepblue-400", "--a-deepblue-400"],
+  ["--navds-global-color-deepblue-300", "--a-deepblue-300"],
+  ["--navds-global-color-deepblue-200", "--a-deepblue-200"],
+  ["--navds-global-color-deepblue-100", "--a-deepblue-100"],
+  ["--navds-global-color-deepblue-50", "--a-deepblue-50"],
+  ["--navds-global-color-red-900", "--a-red-900"],
+  ["--navds-global-color-red-800", "--a-red-800"],
+  ["--navds-global-color-red-700", "--a-red-700"],
+  ["--navds-global-color-red-600", "--a-red-600"],
+  ["--navds-global-color-red-500", "--a-red-500"],
+  ["--navds-global-color-red-400", "--a-red-400"],
+  ["--navds-global-color-red-300", "--a-red-300"],
+  ["--navds-global-color-red-200", "--a-red-200"],
+  ["--navds-global-color-red-100", "--a-red-100"],
+  ["--navds-global-color-red-50", "--a-red-50"],
+  ["--navds-global-color-blue-900", "--a-blue-900"],
+  ["--navds-global-color-blue-800", "--a-blue-800"],
+  ["--navds-global-color-blue-700", "--a-blue-700"],
+  ["--navds-global-color-blue-600", "--a-blue-600"],
+  ["--navds-global-color-blue-500", "--a-blue-500"],
+  ["--navds-global-color-blue-400", "--a-blue-400"],
+  ["--navds-global-color-blue-300", "--a-blue-300"],
+  ["--navds-global-color-blue-200", "--a-blue-200"],
+  ["--navds-global-color-blue-100", "--a-blue-100"],
+  ["--navds-global-color-blue-50", "--a-blue-50"],
+  ["--navds-global-color-gray-900", "--a-gray-900"],
+  ["--navds-global-color-gray-800", "--a-gray-800"],
+  ["--navds-global-color-gray-700", "--a-gray-700"],
+  ["--navds-global-color-gray-600", "--a-gray-600"],
+  ["--navds-global-color-gray-500", "--a-gray-500"],
+  ["--navds-global-color-gray-400", "--a-gray-400"],
+  ["--navds-global-color-gray-300", "--a-gray-300"],
+  ["--navds-global-color-gray-200", "--a-gray-200"],
+  ["--navds-global-color-gray-100", "--a-gray-100"],
+  ["--navds-global-color-gray-50", "--a-gray-50"],
+  ["--navds-global-color-nav-red", "--a-nav-red"],
+  ["--navds-global-color-white", "--a-white"],
+  ["--navds-global-color-transparent", "--a-transparent"],
+  ["--navds-border-radius-full", "--a-border-radius-full"],
+  ["--navds-border-radius-xlarge", "--a-border-radius-xlarge"],
+  ["--navds-border-radius-large", "--a-border-radius-large"],
+  ["--navds-border-radius-medium", "--a-border-radius-medium"],
+  ["--navds-border-radius-small", "--a-border-radius-small"],
+  ["--navds-z-index-tooltip", "--a-z-index-tooltip"],
+  ["--navds-z-index-focus", "--a-z-index-focus"],
+  ["--navds-z-index-popover", "--a-z-index-popover"],
+  ["--navds-z-index-modal", "--a-z-index-modal"],
+  ["--navds-font-weight-regular", "--a-font-weight-regular"],
+  ["--navds-font-weight-bold", "--a-font-weight-bold"],
+  ["--navds-font-size-small", "--a-font-size-small"],
+  ["--navds-font-size-medium", "--a-font-size-medium"],
+  ["--navds-font-size-large", "--a-font-size-large"],
+  ["--navds-font-size-xlarge", "--a-font-size-xlarge"],
+  ["--navds-font-size-heading-xsmall", "--a-font-size-heading-xsmall"],
+  ["--navds-font-size-heading-small", "--a-font-size-heading-small"],
+  ["--navds-font-size-heading-medium", "--a-font-size-heading-medium"],
+  ["--navds-font-size-heading-large", "--a-font-size-heading-large"],
+  ["--navds-font-size-heading-xlarge", "--a-font-size-heading-xlarge"],
+  ["--navds-font-size-heading-2xlarge", "--a-font-size-heading-2xlarge"],
+  ["--navds-font-line-height-medium", "--a-font-line-height-medium"],
+  ["--navds-font-line-height-large", "--a-font-line-height-large"],
+  ["--navds-font-line-height-xlarge", "--a-font-line-height-xlarge"],
+  ["--navds-font-line-height-heading-xsmall","--a-font-line-height-heading-xsmall"],
+  ["--navds-font-line-height-heading-small","--a-font-line-height-heading-small"],
+  ["--navds-font-line-height-heading-medium","--a-font-line-height-heading-medium"],
+  ["--navds-font-line-height-heading-large","--a-font-line-height-heading-large"],
+  ["--navds-font-line-height-heading-xlarge","--a-font-line-height-heading-xlarge"],
+  ["--navds-font-line-height-heading-2xlarge","--a-font-line-height-heading-2xlarge"],
+  ["--navds-font-family", "--a-font-family"],
+
+  ["--navds-semantic-color-feedback-info-icon", "--a-icon-info"],
+  ["--navds-semantic-color-feedback-warning-icon", "--a-icon-warning"],
+  ["--navds-semantic-color-feedback-danger-icon", "--a-icon-danger"],
+  ["--navds-semantic-color-feedback-success-icon", "--a-icon-success"],
+
+  ["--navds-semantic-color-feedback-info-background", "--a-surface-info-subtle"],
+  ["--navds-semantic-color-feedback-warning-background", "--a-surface-warning-subtle"],
+  ["--navds-semantic-color-interaction-danger-selected", "--a-surface-danger-active"],
+  ["--navds-semantic-color-interaction-danger-hover", "--a-surface-danger-hover"],
+  ["--navds-semantic-color-interaction-danger", "--a-surface-danger"],
+  ["--navds-semantic-color-feedback-danger-background", "--a-surface-danger-subtle"],
+  ["--navds-semantic-color-feedback-success-background", "--a-surface-success-subtle"],
+  ["--navds-semantic-color-interaction-primary-hover-subtle","--a-surface-action-subtle-hover"],
+  ["--navds-semantic-color-interaction-primary-selected","--a-surface-action-selected"],
+  ["--navds-semantic-color-interaction-primary-hover","--a-surface-action-hover"],
+  ["--navds-semantic-color-interaction-primary", "--a-surface-action"],
+  ["--navds-semantic-color-canvas-background-inverted", "--a-surface-inverted"],
+  ["--navds-semantic-color-component-background-inverted", "--a-surface-inverted"],
+  ["--navds-semantic-color-component-background-alternate", "--a-surface-subtle"],
+  ["--navds-semantic-color-component-background-light", "--a-surface-default"],
+  ["--navds-semantic-color-canvas-background-light", "--a-bg-default"],
+  ["--navds-semantic-color-canvas-background", "--a-bg-subtle"],
+  ["--navds-semantic-color-border-inverted", "--a-border-on-inverted"],
+  ["--navds-semantic-color-border-muted", "--a-border-default"],
+  ["--navds-semantic-color-border", "--a-border-strong"],
+  ["--navds-semantic-color-focus-inverted", "--a-border-focus-on-inverted"],
+  ["--navds-semantic-color-focus", "--a-border-focus"],
+  ["--navds-semantic-color-feedback-info-border", "--a-border-info"],
+  ["--navds-semantic-color-feedback-warning-border", "--a-border-warning"],
+  ["--navds-semantic-color-feedback-danger-border", "--a-border-danger"],
+  ["--navds-semantic-color-feedback-success-border", "--a-border-success"],
+  ["--navds-semantic-color-divider", "--a-border-divider"],
+  ["--navds-shadow-focus-inverted", "--a-shadow-focus-inverted"],
+  ["--navds-shadow-focus", "--a-shadow-focus"],
+  ["--navds-shadow-xsmall", "--a-shadow-xsmall"],
+  ["--navds-shadow-small", "--a-shadow-small"],
+  ["--navds-shadow-medium", "--a-shadow-medium"],
+  ["--navds-shadow-large", "--a-shadow-large"],
+  ["--navds-shadow-xlarge", "--a-shadow-xlarge"],
+
+  /* Components */
+["--navds-modal-color-overlay", "--a-surface-backdrop"],
+["--navds-accordion-color-border", "--a-border-strong"],
+["--navds-accordion-color-text-hover", "--a-surface-action"],
+["--navds-accordion-color-border-hover", "--a-surface-action"],
+["--navds-accordion-color-background-open", "--a-surface-action-subtle"],
+["--navds-alert-color-error-border", "--a-border-danger"],
+["--navds-alert-color-error-background", "--a-surface-danger-subtle"],
+["--navds-alert-color-warning-border", "--a-border-warning"],
+["--navds-alert-color-warning-background", "--a-surface-warning-subtle"],
+["--navds-alert-color-info-border", "--a-border-info"],
+["--navds-alert-color-info-background", "--a-surface-info-subtle"],
+["--navds-alert-color-success-border", "--a-border-success"],
+["--navds-alert-color-success-background", "--a-surface-success-subtle"],
+["--navds-alert-color-border", "--a-border-default"],
+["--navds-chat-color-avatar-background", "--a-bg-subtle"],
+["--navds-chat-color-background", "--a-bg-subtle"],
+["--navds-chat-color-avatar", "--a-text-default"],
+["--navds-guide-panel-color-illustration-background", "--a-surface-action-subtle"],
+["--navds-guide-panel-color-background", "--a-surface-default"],
+["--navds-guide-panel-color-border", "--a-border-action"],
+["--navds-error-summary-color-background", "--a-surface-default"],
+["--navds-error-summary-color-border", "--a-border-danger"],
+["--navds-confirmation-panel-color-background-checked", "--a-surface-success-subtle"],
+["--navds-confirmation-panel-color-background-error", "--a-surface-danger-subtle"],
+["--navds-confirmation-panel-color-border-checked", "--a-border-success"],
+["--navds-confirmation-panel-color-border-error", "--a-border-danger"],
+["--navds-confirmation-panel-color-background", "--a-surface-warning-subtle"],
+["--navds-confirmation-panel-color-border", "--a-border-warning"],
+["--navds-radio-checkbox-color-background-hover", "--a-surface-action-subtle"],
+["--navds-radio-checkbox-color-background-checked", "--a-surface-action"],
+["--navds-radio-checkbox-color-shadow-hover", "--a-surface-action"],
+["--navds-radio-checkbox-color-shadow-checked", "--a-surface-action"],
+["--navds-radio-checkbox-color-shadow-error", "--a-surface-danger"],
+["--navds-radio-checkbox-color-label-hover", "--a-surface-action"],
+["--navds-radio-checkbox-color-background", "--a-surface-default"],
+["--navds-radio-checkbox-color-text", "--a-text-default"],
+["--navds-radio-checkbox-color-shadow", "--a-border-strong"],
+["--navds-select-color-border-hover", "--a-surface-action"],
+["--navds-select-color-border-error", "--a-surface-danger"],
+["--navds-select-color-shadow-error", "--a-surface-danger"],
+["--navds-select-color-border-disabled","--a-gray-400"],
+["--navds-select-color-background-disabled", "--a-surface-subtle"],
+["--navds-switch-color-label-hover", "--a-surface-action"],
+["--navds-select-color-background", "--a-surface-default"],
+["--navds-select-color-border", "--a-border-strong"],
+["--navds-switch-color-label", "--a-text-default"],
+["--navds-switch-color-track-background-hover-checked", "--a-icon-success"],
+["--navds-switch-color-track-shadow-inner-focus", "--a-surface-default"],
+["--navds-switch-color-track-background-checked", "--a-border-success"],
+["--navds-switch-color-track-background-hover", "--a-surface-neutral-hover"],
+["--navds-switch-color-track-background", "--a-surface-neutral"],
+["--navds-switch-color-thumb-icon-checked", "--a-border-success"],
+["--navds-switch-color-thumb-loader-checked", "--a-border-success"],
+["--navds-switch-color-thumb-icon", "--a-icon-subtle"],
+["--navds-switch-color-thumb", "--a-surface-default"],
+["--navds-textarea-color-counter-text-error", "--a-surface-danger"],
+["--navds-textarea-color-border-hover", "--a-surface-action"],
+["--navds-textarea-color-border-error", "--a-surface-danger"],
+["--navds-textarea-color-shadow-error", "--a-surface-danger"],
+["--navds-textarea-color-counter-text", "--a-text-subtle"],
+["--navds-textarea-color-text-disabled", "--a-text-default"],
+["--navds-textarea-color-border-disabled", "--a-gray-400"],
+["--navds-textarea-color-background-disabled", "--a-surface-subtle"],
+["--navds-textarea-color-background", "--a-surface-default"],
+["--navds-textarea-color-border", "--a-border-strong"],
+["--navds-help-text-color-popover-background", "--a-surface-info-subtle"],
+["--navds-help-text-color-background-hover", "--a-surface-action"],
+["--navds-help-text-color-background-focus", "--a-surface-action"],
+["--navds-help-text-color-shadow-hover", "--a-surface-action"],
+["--navds-help-text-color-hover", "--a-surface-default"],
+["--navds-help-text-color-focus", "--a-surface-default"],
+["--navds-help-text-color", "--a-surface-action"],
+["--navds-link-color-text-focus", "--a-text-on-action"],
+["--navds-link-color-text-active", "--a-text-on-action"],
+["--navds-link-color-text", "--a-text-action"],
+["--navds-link-color-icon", "--a-icon-action"],
+["--navds-link-color-icon-focus", "--a-icon-on-action"],
+["--navds-link-color-background-focus", "--a-border-focus"],
+["--navds-link-color-background-active", "--a-border-focus"],
+["--navds-link-color-on-info-background", "--a-text-default"],
+["--navds-link-color-on-error-background", "--a-text-default"],
+["--navds-loader-color-neutral-foreground", "--a-border-default"],
+["--navds-loader-color-interaction-foreground", "--a-surface-action"],
+["--navds-loader-color-inverted-foreground", "--a-surface-default"],
+["--navds-loader-color-transparent-background", "--a-surface-transparent"],
+["--navds-loader-color-foreground", "--a-border-default"],
+["--navds-loader-color-background", "--a-surface-active"],
+["--navds-modal-color-background", "--a-surface-default"],
+["--navds-pagination-color-text-selected", "--a-text-on-action"],
+["--navds-pagination-color-background-selected", "--a-surface-action-selected"],
+["--navds-popover-color-background", "--a-surface-default"],
+["--navds-popover-color-border", "--a-border-default"],
+["--navds-tag-color-info-background", "--a-surface-info-subtle"],
+["--navds-tag-color-info-border", "--a-border-info"],
+["--navds-tag-color-warning-background", "--a-surface-warning-subtle"],
+["--navds-tag-color-warning-border", "--a-border-warning"],
+["--navds-tag-color-success-background", "--a-surface-success-subtle"],
+["--navds-tag-color-success-border", "--a-border-success"],
+["--navds-tag-color-error-background", "--a-surface-danger-subtle"],
+["--navds-tag-color-error-border", "--a-border-danger"],
+["--navds-tag-color-border", "--a-border-default"],
+["--navds-tag-color-background", "--a-surface-subtle"],
+["--navds-toggle-group-color-background-hover", "--a-surface-action-subtle"],
+["--navds-toggle-group-color-text-hover", "--a-surface-action"],
+["--navds-toggle-group-color-background-pressed", "--a-surface-action-selected"],
+["--navds-toggle-group-color-text-pressed", "--a-text-on-action"],
+["--navds-toggle-group-color-background", "--a-surface-default"],
+["--navds-toggle-group-color-text", "--a-text-default"],
+["--navds-toggle-group-color-border", "--a-border-divider"],
+["--navds-panel-color-background", "--a-surface-default"],
+["--navds-panel-color-border", "--a-border-default"],
+["--navds-link-panel-color-border-hover", "--a-surface-action"],
+["--navds-link-panel-color-title-hover", "--a-text-action"],
+["--navds-link-panel-color-text", "--a-text-default"],
+["--navds-table-row-color-background-selected-hover", "--a-surface-action-subtle-hover"],
+["--navds-table-row-color-background-hover", "--a-bg-subtle"],
+["--navds-table-row-color-background-selected", "--a-surface-action-subtle"],
+["--navds-table-row-color-background-zebra", "--a-surface-subtle"],
+["--navds-table-cell-color-border-hover", "--a-border-strong"],
+["--navds-table-cell-color-border", "--a-border-default"],
+
+["--navds-button-color-primary-background-hover", "--a-surface-action-hover"],
+["--navds-button-color-primary-background-active", "--a-surface-action-active"],
+["--navds-button-color-primary-border-focus", "--a-surface-default"],
+["--navds-button-color-primary-text", "--a-text-on-action"],
+["--navds-button-color-primary-background", "--a-surface-action"],
+["--navds-button-color-secondary-border-focus-active-hover", "--a-surface-default"],
+["--navds-button-color-secondary-text-hover", "--a-text-action"],
+["--navds-button-color-secondary-text-active", "--a-text-on-action"],
+["--navds-button-color-secondary-background-hover", "--a-surface-action-subtle-hover"],
+["--navds-button-color-secondary-background-active", "--a-surface-action-active"],
+["--navds-button-color-secondary-border", "--a-border-action"],
+["--navds-button-color-secondary-text", "--a-text-action"],
+["--navds-button-color-secondary-background", "--a-surface-default"],
+["--navds-button-color-tertiary-background-hover", "--a-surface-action-subtle-hover"],
+["--navds-button-color-tertiary-border-focus", "--a-border-action"],
+["--navds-button-color-tertiary-border-active", "--a-surface-default"],
+["--navds-button-color-tertiary-background-active", "--a-surface-action-active"],
+["--navds-button-color-tertiary-text-active", "--a-text-on-action"],
+["--navds-button-color-tertiary-text", "--a-text-action"],
+["--navds-button-color-danger-background-hover", "--a-surface-danger-hover"],
+["--navds-button-color-danger-background-active", "--a-surface-danger-active"],
+["--navds-button-color-danger-border-focus", "--a-surface-default"],
+["--navds-button-color-danger-background", "--a-surface-danger"],
+["--navds-button-color-danger-text", "--a-text-on-danger"],
+["--navds-error-message-color-text", "--a-text-danger"],
+["--navds-search-color-border-hover", "--a-border-action"],
+["--navds-search-color-clear-hover", "--a-text-action"],
+["--navds-search-color-border-error", "--a-border-danger"],
+["--navds-search-color-text", "--a-text-default"],
+["--navds-search-color-border", "--a-border-default"],
+["--navds-text-field-color-border-hover", "--a-border-action"],
+["--navds-text-field-color-border-error", "--a-border-danger"],
+["--navds-text-field-color-shadow-error", "--a-border-danger"],
+["--navds-text-field-color-border-disabled", "--a-gray-400"],
+["--navds-text-field-color-background-disabled", "--a-surface-subtle"],
+["--navds-text-field-color-placeholder-text", "--a-text-subtle"],
+["--navds-text-field-color-text-disabled", "--a-text-default"],
+["--navds-text-field-color-text", "--a-text-default"],
+["--navds-text-field-color-background", "--a-surface-default"],
+["--navds-text-field-color-border", "--a-border-default"],
+
+["--navds-dropdown-menu-color", "--a-text-default"],
+["--navdsi-dropdown-item-color-text", "--a-text-action"],
+["--navdsi-dropdown-item-color-background-hover", "--a-surface-action-subtle-hover"],
+["--navdsi-dropdown-item-color-background-active", "--a-surface-action-active"],
+["--navds-dropdown-item-color-focus", "--a-border-focus"],
+["--navdsi-header-color-text", "--a-text-on-inverted"],
+["--navdsi-header-color-background", "--a-surface-inverted"],
+["--navdsi-header-color-border", "--a-gray-600"],
+["--navdsi-header-color-hover", "--a-surface-inverted-hover"],
+["--navdsi-header-color-active", "--a-surface-inverted-active"],
+["--navds-button-icon-adjustment", "--ac-button-icon-margin"]
+]
+
+module.exports = { tokens };

@navikt/codemod/transforms/v2.0.0/update-css-tokens/tests/complete.output.css

@@ -2,6 +2,6 @@
   color: var(--a-blue-100);
   color: var(--a-red-100);
 
-  --a-red-100: var(--a-green-100);
-  --a-blue-100: red;
+  --v2-migration__navds-global-color-red-100: var(--a-green-100);
+  --v2-migration__navds-global-color-blue-100: red;
 }

@navikt/codemod/transforms/v2.0.0/update-css-tokens/tests/complete.output.js

@@ -1,6 +1,6 @@
 const StyledDiv = styled`
---a-red-100: var(--a-green-100);
---a-blue-100: red;
+--v2-migration__navds-global-color-red-100: var(--a-green-100);
+--v2-migration__navds-global-color-blue-100: red;
 
 .test{
   color: var(--a-blue-100);

@navikt/codemod/transforms/v2.0.0/update-css-tokens/update-css-tokens.ts

@@ -1,30 +1,18 @@
-// TODO: Hent utenfra
-export const tokens = [
-  ["--navds-global-color-red-100", "--a-red-100"],
-  ["--navds-global-color-green-100", "--a-green-100"],
-  ["--navds-global-color-blue-100", "--a-blue-100"],
-  ["--navds-global-color-blue-200", "--a-blue-200"],
-  ["--navds-global-color-blue-400", "--a-blue-400"],
-  ["--navds-global-color-green-100", "--a-green-100"],
-  ["--navds-global-color-green-500", "--a-green-500"],
-  ["--navds-semantic-color-link", "--a-text-action"],
-  ["--navds-global-color-gray-100", "--a-gray-100"],
-  ["--navds-global-color-gray-400", "--a-gray-400"],
-  ["--navds-global-color-gray-600", "--a-gray-600"],
-  [
-    "--navds-semantic-color-interaction-primary-hover-subtle",
-    "--a-surface-action-subtle",
-  ],
-  ["--navds-semantic-color-canvas-background-inverted", "--a-surface-inverted"],
-];
+import { tokens } from "../../../tokens-map.mjs";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-export default function transformer(file, api, options) {
+export default function transformer(file, api) {
   let src = file.source;
 
+  tokens.forEach((tok) => {
+    // eslint-disable-next-line no-useless-concat
+    const rgx = new RegExp("(" + `${tok[0]}:` + ")", "gm");
+    src = src.replace(rgx, `--v2-migration${tok[0].replace("--", "__")}:`);
+  });
+
   tokens.forEach((tok) => {
     const rgx = new RegExp("(" + tok[0] + ")", "gm");
     src = src.replace(rgx, tok[1]);

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

@@ -5,7 +5,7 @@ import {
   renameImportSpecifier,
 } from "../../../utils/imports";
 import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../update-css-tokens/update-css-tokens";
+import { tokens } from "../../../tokens-map.mjs";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

@navikt/codemod/transforms/v2.0.0/update-less-tokens/update-less-tokens.ts

@@ -1,11 +1,11 @@
 import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../update-css-tokens/update-css-tokens";
+import { tokens } from "../../../tokens-map.mjs";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-export default function transformer(file) {
+export default function transformer(file, api) {
   let src = file.source;
 
   tokens.forEach((tok) => {

@navikt/codemod/transforms/v2.0.0/update-sass-tokens/update-sass-tokens.ts

@@ -1,11 +1,11 @@
 import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../update-css-tokens/update-css-tokens";
+import { tokens } from "../../../tokens-map.mjs";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-export default function transformer(file) {
+export default function transformer(file, api) {
   let src = file.source;
 
   tokens.forEach((tok) => {

@navikt/codemod/transforms/v2.0.0/update-tailwind-tokens/tests/complete.input.css

@@ -1,3 +0,0 @@
-.test {
-  @apply bg-canvas-background-inverted text-interaction-primary-hover-subtle/20;
-}

@navikt/codemod/transforms/v2.0.0/update-tailwind-tokens/tests/complete.input.js

@@ -1,10 +0,0 @@
-export const demo = () => (
-  <div
-    className={cl(
-      "bg-white text-text shadow-small ring-gray-900/10 hover:shadow-medium active:text-link",
-      className
-    )}
-  >
-    <div className="bg-canvas-background-inverted text-interaction-primary-hover-subtle"></div>
-  </div>
-);

@navikt/codemod/transforms/v2.0.0/update-tailwind-tokens/tests/complete.output.css

@@ -1,3 +0,0 @@
-.test {
-  @apply bg-surface-inverted text-surface-action-subtle/20;
-}

@navikt/codemod/transforms/v2.0.0/update-tailwind-tokens/tests/complete.output.js

@@ -1,10 +0,0 @@
-export const demo = () => (
-  <div
-    className={cl(
-      "bg-white text-text shadow-small ring-gray-900/10 hover:shadow-medium active:text-text-action",
-      className
-    )}
-  >
-    <div className="bg-surface-inverted text-surface-action-subtle"></div>
-  </div>
-);

@navikt/codemod/transforms/v2.0.0/update-tailwind-tokens/tests/update-tailwind-tokens.test.ts

@@ -1,18 +0,0 @@
-import { check } from "../../../../utils/check";
-
-const migration = "update-tailwind-tokens";
-const fixtures = ["complete"];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: "js",
-  });
-
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: "css",
-  });
-}

@navikt/codemod/transforms/v2.0.0/update-tailwind-tokens/update-tailwind-tokens.ts

@@ -1,34 +0,0 @@
-import { tokens } from "../update-css-tokens/update-css-tokens";
-
-/* Cherry-picks object keys we want */
-const semanticTokens = () =>
-  tokens
-    .filter((val) => val[0].startsWith("--navds-semantic-color"))
-    .map((val) => {
-      return [
-        val[0].replace("--navds-semantic-color-", ""),
-        val[1].replace("--a-", ""),
-      ];
-    });
-
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api, options) {
-  let src = file.source;
-  const colors = semanticTokens();
-  const duplicateText: string[][] = [];
-
-  colors.forEach(
-    (x) =>
-      x[0].startsWith("text-") && duplicateText.push(["text-" + x[0], x[1]])
-  );
-
-  [...duplicateText, ...colors].forEach((tok) => {
-    const rgx = new RegExp("(" + tok[0] + ")", "gm");
-    src = src.replace(rgx, tok[1]);
-  });
-
-  return src;
-}

@navikt/community/navno/.svgrrc.js

@@ -0,0 +1,16 @@
+const template = require("./template");
+
+module.exports = {
+  typescript: true,
+  ref: true,
+  icon: false,
+  titleProp: false,
+  svgProps: {
+    focusable: false,
+    role: "img",
+  },
+  /* replaceAttrValues: {
+    "#262626": "currentColor",
+  }, */
+  template,
+};

@navikt/community/navno/README.md

@@ -0,0 +1,38 @@
+# NAV React-components for nav.no
+
+## Installation
+
+Install `@navikt/ds-navno` with yarn
+
+```bash
+  yarn add @navikt/ds-navno
+```
+
+Install `@navikt/ds-navno` with npm
+
+```bash
+  npm install @navikt/ds-navno
+```
+
+## Usage
+
+Remember to also import @navikt/ds-navno/css to apply styling!
+
+```javascript
+import "@navikt/ds-navno/css";
+import { PageHeader } from "@navikt/ds-navno";
+
+function App() {
+  return <PageHeader />;
+}
+```
+
+## Learn more
+
+- [Designsystem documentation](https://aksel.nav.no/designsystem)
+- [Component-docs](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
+- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
+
+## License
+
+[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)

@navikt/community/navno/babel.config.js

@@ -0,0 +1,20 @@
+/**
+ * @type {import('@babel/core').TransformOptions}
+ */
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: "auto",
+        useBuiltIns: "entry",
+        corejs: 3,
+        debug: false,
+        bugfixes: true,
+      },
+    ],
+    ["@babel/preset-typescript", {}],
+    ["@babel/preset-react", { development: false, useBuiltIns: true }],
+  ],
+  babelrcRoots: ["."],
+};

@navikt/community/navno/index-template.js

@@ -0,0 +1,12 @@
+const path = require("path");
+
+function defaultIndexTemplate(filePaths) {
+  const exportEntries = filePaths.map((filePath) => {
+    const basename = path.basename(filePath, path.extname(filePath));
+    const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename;
+    return `export { default as Pictogram${exportName} } from './${basename}'`;
+  });
+  return exportEntries.join("\n");
+}
+
+module.exports = defaultIndexTemplate;

@navikt/community/navno/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@navikt/ds-navno",
+  "version": "0.0.1",
+  "private": true,
+  "description": "nav.no + ds components",
+  "author": "Aksel | NAV designsystem team",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "typescript",
+    "javascript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/Designsystemet.git"
+  },
+  "sideEffects": false,
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "typings": "./esm/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "/css",
+    "/cjs",
+    "/esm",
+    "/src",
+    "_docs.json",
+    "!**/*.tsbuildinfo"
+  ],
+  "scripts": {
+    "docgen": "yarn ts-node ../../../scripts/docgen.ts",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
+    "clean": "rimraf cjs esm css",
+    "build": "yarn build-pict && concurrently \"tsc -b\" \"rollup -c\" && yarn css && yarn create-package-json-pointers-to-esm",
+    "css": "copyfiles -f esm/index.css css/ && rimraf esm/*.css cjs/*.css",
+    "test-ignore": "TZ=UTC jest",
+    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
+  },
+  "dependencies": {
+    "@navikt/ds-icons": "^2.0.7",
+    "@navikt/ds-react": "^2.0.7",
+    "clsx": "^1.1.1"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "7.19.4",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.18.6",
+    "@rollup/plugin-babel": "6.0.2",
+    "@rollup/plugin-commonjs": "23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@svgr/cli": "6.2.1",
+    "concurrently": "7.2.1",
+    "copyfiles": "2.4.1",
+    "postcss-combine-duplicated-selectors": "10.0.3",
+    "postcss-import": "14.1.0",
+    "rimraf": "^3.0.2",
+    "rollup": "3.2.3",
+    "rollup-plugin-node-externals": "5.0.1",
+    "rollup-plugin-postcss": "4.0.2",
+    "ts-node": "10.9.0",
+    "typescript": "^4.8.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.30 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  }
+}

@navikt/community/navno/pictograms/utbetalingsdatoer-small.svg

@@ -0,0 +1,71 @@
+<svg
+  width="64"
+  height="64"
+  viewBox="0 0 64 64"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M31.3332 41.791C31.3332 35.3802 37.5554 24.1613 40.6665 24.1613C43.7777 24.1613 49.9999 35.3802 49.9999 41.791C49.9999 48.2017 45.8212 53.0098 40.6665 53.0098C35.5119 53.0098 31.3332 48.8721 31.3332 41.791Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M39.825 25.4844C40.2522 25.9492 40.9751 25.9796 41.4398 25.5525C41.9046 25.1254 41.935 24.4024 41.5079 23.9377L39.825 25.4844ZM30.4271 17.5238L23.3331 17.5238L23.3331 19.8095L30.4271 19.8095L30.4271 17.5238ZM6.19028 34.6666L6.19028 64L8.476 64L8.476 34.6666L6.19028 34.6666ZM37.439 22.8885L39.825 25.4844L41.5079 23.9377L39.1219 21.3417L37.439 22.8885ZM23.3331 17.5238C13.8654 17.5238 6.19028 25.1989 6.19028 34.6666L8.476 34.6666C8.47599 26.4612 15.1278 19.8095 23.3331 19.8095L23.3331 17.5238ZM30.4271 19.8095C33.0923 19.8095 35.6355 20.9262 37.439 22.8885L39.1219 21.3417C36.8855 18.9085 33.7319 17.5238 30.4271 17.5238L30.4271 19.8095Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M13.8571 42.744C13.8571 44.042 13.1875 45.9912 12.2658 47.6744C11.8135 48.5002 11.3322 49.2031 10.8996 49.6838C10.6824 49.9251 10.4999 50.0852 10.3619 50.178C10.331 50.1987 10.3057 50.2139 10.2857 50.2249C10.2658 50.2139 10.2404 50.1987 10.2095 50.178C10.0715 50.0852 9.88904 49.9251 9.67187 49.6838C9.23923 49.2031 8.75791 48.5002 8.30567 47.6744C7.38392 45.9912 6.71429 44.042 6.71429 42.744C6.71429 40.0533 8.45327 38.3334 10.2857 38.3334C11.273 38.3334 12.1413 38.718 12.7725 39.4244C13.4078 40.1352 13.8571 41.2363 13.8571 42.744Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M18.6667 47.6085C17.3979 47.6085 15.4832 48.2838 13.8244 49.2188C13.0115 49.6769 12.3196 50.1645 11.8462 50.603C11.6088 50.823 11.4505 51.0084 11.3582 51.1497C11.3312 51.1911 11.3135 51.2231 11.302 51.2462C11.3135 51.2693 11.3312 51.3012 11.3582 51.3426C11.4505 51.4839 11.6088 51.6694 11.8462 51.8894C12.3196 52.3278 13.0115 52.8155 13.8244 53.2736C15.4832 54.2085 17.3979 54.8839 18.6667 54.8839C21.2846 54.8839 23 53.1402 23 51.2462C23 50.2306 22.6149 49.3431 21.9188 48.7029C21.2203 48.0605 20.1423 47.6085 18.6667 47.6085Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M11.9764 50.0867V50.0867C8.85957 51.4986 6.85728 54.6037 6.85728 58.0254L6.85728 60.5216"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M3.87373e-05 64.0002V64.0002C3.08423 58.7853 10.6301 58.7853 13.7143 64.0002V64.0002"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M52.6224 26.9825V26.9825C57.4166 26.9258 61.3335 30.7966 61.3335 35.5912L61.3335 64.667"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M54.0742 15.5883C52.2506 15.5883 49.5767 16.527 47.2991 17.7872C46.1764 18.4083 45.2094 19.0755 44.5387 19.6854C44.2024 19.9911 43.9655 20.2602 43.8195 20.4797C43.6933 20.6694 43.6714 20.7672 43.6676 20.7852C43.6714 20.8032 43.6933 20.9011 43.8195 21.0908C43.9655 21.3103 44.2024 21.5793 44.5387 21.8851C45.2094 22.495 46.1764 23.1621 47.2991 23.7833C49.5767 25.0435 52.2506 25.9821 54.0742 25.9821C57.811 25.9821 60.3335 23.5243 60.3335 20.7852C60.3335 19.3455 59.7756 18.0698 58.7519 17.1456C57.7245 16.2179 56.1626 15.5883 54.0742 15.5883Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M31.2594 25.9823C33.0831 25.9823 35.757 25.0436 38.0346 23.7834C39.1573 23.1622 40.1243 22.4951 40.795 21.8852C41.1312 21.5795 41.3682 21.3104 41.5141 21.0909C41.6403 20.9012 41.6622 20.8034 41.666 20.7854C41.6622 20.7674 41.6403 20.6695 41.5141 20.4798C41.3682 20.2603 41.1312 19.9913 40.795 19.6855C40.1243 19.0756 39.1573 18.4085 38.0346 17.7873C35.757 16.5271 33.0831 15.5884 31.2594 15.5884C27.5226 15.5884 25.0002 18.0463 25.0002 20.7854C25.0002 22.2251 25.558 23.5007 26.5817 24.425C27.6092 25.3526 29.1711 25.9823 31.2594 25.9823Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M43.8491 8.75968C42.9384 10.3306 42.4176 13.1046 42.3746 15.699C42.3535 16.9776 42.45 18.145 42.645 19.0283C42.7427 19.4711 42.8582 19.8101 42.9762 20.046C43.0806 20.2547 43.1564 20.322 43.1689 20.3329C43.1847 20.3382 43.281 20.37 43.5147 20.3557C43.7789 20.3395 44.1314 20.2696 44.5653 20.1325C45.4309 19.859 46.4942 19.3586 47.5955 18.701C49.83 17.3667 51.9818 15.5306 52.8924 13.9597C54.7572 10.743 53.887 7.33688 51.4989 5.96367C50.2443 5.24233 48.8543 5.08606 47.5388 5.50687C46.2191 5.92903 44.8921 6.9604 43.8491 8.75968Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M52.892 28.4375C51.9813 26.8665 49.8296 25.0304 47.5951 23.6961C46.4938 23.0385 45.4304 22.5381 44.5648 22.2646C44.1309 22.1275 43.7784 22.0576 43.5143 22.0415C43.2806 22.0272 43.1842 22.0589 43.1685 22.0642C43.156 22.0751 43.0802 22.1424 42.9758 22.3511C42.8578 22.587 42.7423 22.926 42.6446 23.3688C42.4496 24.2521 42.353 25.4195 42.3742 26.6981C42.4172 29.2925 42.938 32.0665 43.8486 33.6374C45.7134 36.8541 49.1102 37.8066 51.4984 36.4334C52.7529 35.7121 53.5838 34.5913 53.8757 33.2463C54.1684 31.8969 53.9351 30.2367 52.892 28.4375Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M32.4416 28.4375C33.3523 26.8665 35.504 25.0304 37.7385 23.6961C38.8398 23.0385 39.9032 22.5381 40.7688 22.2646C41.2027 22.1275 41.5552 22.0576 41.8194 22.0415C42.053 22.0272 42.1494 22.0589 42.1651 22.0642C42.1776 22.0751 42.2534 22.1424 42.3578 22.3511C42.4758 22.587 42.5913 22.926 42.689 23.3688C42.884 24.2521 42.9806 25.4195 42.9594 26.6981C42.9164 29.2925 42.3957 32.0665 41.485 33.6374C39.6203 36.8541 36.2234 37.8066 33.8352 36.4334C32.5807 35.7121 31.7498 34.5913 31.458 33.2463C31.1652 31.8969 31.3985 30.2367 32.4416 28.4375Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+  <path
+    d="M32.4416 13.9599C33.3523 15.5308 35.504 17.3669 37.7385 18.7012C38.8398 19.3588 39.9032 19.8592 40.7688 20.1327C41.2027 20.2698 41.5552 20.3397 41.8194 20.3558C42.053 20.3702 42.1494 20.3384 42.1651 20.3331C42.1776 20.3222 42.2534 20.2549 42.3578 20.0462C42.4758 19.8103 42.5913 19.4713 42.689 19.0285C42.884 18.1452 42.9806 16.9778 42.9594 15.6992C42.9164 13.1048 42.3957 10.3308 41.485 8.75988C39.6203 5.54323 36.2234 4.59067 33.8352 5.96387C32.5807 6.68522 31.7498 7.80597 31.458 9.15102C31.1652 10.5004 31.3985 12.1606 32.4416 13.9599Z"
+    stroke="#262626"
+    stroke-width="2"
+  />
+</svg>

@navikt/community/navno/pictograms/utbetalingsdatoer.svg

@@ -0,0 +1,71 @@
+<svg
+  width="96"
+  height="96"
+  viewBox="0 0 96 96"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M47 62.6869C47 53.0707 56.3333 36.2424 61 36.2424C65.6667 36.2424 75 53.0707 75 62.6869C75 72.303 68.732 79.5151 61 79.5151C53.268 79.5151 47 73.3086 47 62.6869Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M60.2638 37.7434C60.6375 38.15 61.2701 38.1767 61.6768 37.8029C62.0834 37.4292 62.11 36.7966 61.7363 36.39L60.2638 37.7434ZM45.641 27L35.0001 27L35.0001 29L45.641 29L45.641 27ZM10.0001 52L10.0001 96L12.0001 96L12.0001 52L10.0001 52ZM56.6848 33.8494L60.2638 37.7434L61.7363 36.39L58.1573 32.496L56.6848 33.8494ZM35.0001 27C21.1929 27 10.0001 38.1929 10.0001 52L12.0001 52C12.0001 39.2974 22.2975 29 35.0001 29L35.0001 27ZM45.641 29C49.8386 29 53.8442 30.7589 56.6848 33.8494L58.1573 32.496C54.938 28.9934 50.3983 27 45.641 27L45.641 29Z"
+    fill="#FFECCC"
+  />
+  <path
+    d="M20.7856 64.116C20.7856 66.063 19.7812 68.9867 18.3986 71.5115C17.7202 72.7503 16.9982 73.8046 16.3493 74.5257C16.0235 74.8876 15.7498 75.1278 15.5428 75.2669C15.4964 75.2981 15.4584 75.3208 15.4285 75.3372C15.3986 75.3208 15.3606 75.2981 15.3142 75.2669C15.1072 75.1278 14.8335 74.8876 14.5077 74.5257C13.8588 73.8046 13.1368 72.7503 12.4585 71.5115C11.0758 68.9867 10.0714 66.063 10.0714 64.116C10.0714 60.0798 12.6798 57.5 15.4285 57.5C16.9095 57.5 18.2119 58.0769 19.1587 59.1365C20.1116 60.2028 20.7856 61.8545 20.7856 64.116Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M28 71.4127C26.0969 71.4127 23.2248 72.4257 20.7365 73.8281C19.5173 74.5153 18.4794 75.2467 17.7694 75.9045C17.4131 76.2344 17.1757 76.5126 17.0373 76.7246C16.9968 76.7866 16.9702 76.8346 16.953 76.8692C16.9702 76.9039 16.9968 76.9519 17.0373 77.0139C17.1757 77.2259 17.4131 77.5041 17.7694 77.834C18.4794 78.4917 19.5173 79.2232 20.7365 79.9104C23.2248 81.3128 26.0969 82.3258 28 82.3258C31.9269 82.3258 34.5 79.7102 34.5 76.8692C34.5 75.346 33.9224 74.0146 32.8781 73.0543C31.8304 72.0907 30.2134 71.4127 28 71.4127Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M17.9645 75.1302V75.1302C13.2893 77.248 10.2858 81.9057 10.2858 87.0383L10.2858 90.7825"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M2.61579e-05 96V96C4.62632 88.1777 15.9451 88.1777 20.5714 96V96"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M78.9333 40.4731V40.4731C86.1247 40.3881 92 46.1943 92 53.3862L92 97"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M81.1111 23.3827C78.3756 23.3827 74.3647 24.7907 70.9484 26.681C69.2643 27.6128 67.8138 28.6135 66.8077 29.5283C66.3034 29.987 65.948 30.3905 65.729 30.7197C65.5397 31.0044 65.5068 31.1511 65.5012 31.1781C65.5068 31.2051 65.5397 31.3519 65.729 31.6365C65.948 31.9657 66.3034 32.3692 66.8077 32.8279C67.8138 33.7428 69.2643 34.7434 70.9484 35.6752C74.3647 37.5655 78.3756 38.9735 81.1111 38.9735C86.7163 38.9735 90.4999 35.2867 90.4999 31.1781C90.4999 29.0185 89.6632 27.105 88.1276 25.7186C86.5865 24.3272 84.2436 23.3827 81.1111 23.3827Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M46.8889 38.9736C49.6243 38.9736 53.6352 37.5656 57.0516 35.6754C58.7356 34.7436 60.1861 33.7429 61.1922 32.828C61.6966 32.3694 62.052 31.9658 62.2709 31.6366C62.4602 31.352 62.4931 31.2052 62.4988 31.1782C62.4931 31.1513 62.4602 31.0045 62.2709 30.7199C62.052 30.3907 61.6966 29.9871 61.1922 29.5285C60.1861 28.6136 58.7356 27.6129 57.0516 26.6811C53.6352 24.7909 49.6243 23.3829 46.8889 23.3829C41.2837 23.3829 37.5 27.0697 37.5 31.1782C37.5 33.3379 38.3368 35.2513 39.8723 36.6377C41.4135 38.0292 43.7563 38.9736 46.8889 38.9736Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M65.7733 13.1394C64.4073 15.4957 63.6262 19.6567 63.5617 23.5483C63.5299 25.4663 63.6748 27.2173 63.9672 28.5423C64.1138 29.2065 64.2871 29.715 64.4641 30.0689C64.6207 30.382 64.7343 30.4828 64.7531 30.4992C64.7767 30.5072 64.9212 30.5548 65.2717 30.5333C65.668 30.509 66.1968 30.4042 66.8476 30.1986C68.146 29.7883 69.7411 29.0377 71.393 28.0513C74.7447 26.0499 77.9724 23.2957 79.3384 20.9393C82.1355 16.1143 80.8303 11.0052 77.248 8.94534C75.3662 7.86333 73.2812 7.62893 71.308 8.26014C69.3284 8.89337 67.3379 10.4404 65.7733 13.1394Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M79.3378 42.6561C77.9718 40.2997 74.7441 37.5455 71.3924 35.544C69.7405 34.5577 68.1454 33.8071 66.847 33.3968C66.1962 33.1912 65.6674 33.0863 65.2712 33.0621C64.9206 33.0406 64.7761 33.0882 64.7525 33.0962C64.7337 33.1126 64.6201 33.2134 64.4635 33.5265C64.2865 33.8804 64.1132 34.3889 63.9666 35.0531C63.6742 36.378 63.5293 38.1291 63.5611 40.047C63.6256 43.9387 64.4067 48.0996 65.7727 50.456C68.5698 55.281 73.6651 56.7098 77.2474 54.65C79.1292 53.568 80.3755 51.8869 80.8133 49.8693C81.2524 47.8453 80.9024 45.355 79.3378 42.6561Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M48.6621 42.6561C50.0281 40.2997 53.2558 37.5455 56.6076 35.544C58.2594 34.5577 59.8545 33.8071 61.1529 33.3968C61.8038 33.1912 62.3325 33.0863 62.7288 33.0621C63.0793 33.0406 63.2238 33.0882 63.2475 33.0962C63.2662 33.1126 63.3798 33.2134 63.5364 33.5265C63.7135 33.8804 63.8867 34.3889 64.0333 35.0531C64.3258 36.378 64.4706 38.1291 64.4388 40.047C64.3744 43.9387 63.5932 48.0996 62.2272 50.456C59.4301 55.281 54.3348 56.7098 50.7525 54.65C48.8708 53.568 47.6244 51.8869 47.1867 49.8693C46.7475 47.8453 47.0976 45.355 48.6621 42.6561Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+  <path
+    d="M48.6621 20.9399C50.0281 23.2962 53.2558 26.0505 56.6076 28.0519C58.2594 29.0383 59.8545 29.7888 61.1529 30.1991C61.8038 30.4048 62.3325 30.5096 62.7288 30.5338C63.0793 30.5553 63.2238 30.5077 63.2475 30.4998C63.2662 30.4834 63.3798 30.3825 63.5364 30.0694C63.7135 29.7155 63.8867 29.2071 64.0333 28.5429C64.3258 27.2179 64.4706 25.4668 64.4388 23.5489C64.3744 19.6573 63.5932 15.4963 62.2272 13.1399C59.4301 8.31492 54.3348 6.88607 50.7525 8.94589C48.8708 10.0279 47.6244 11.709 47.1867 13.7266C46.7475 15.7506 47.0976 18.2409 48.6621 20.9399Z"
+    stroke="#262626"
+    stroke-width="3"
+  />
+</svg>

@navikt/community/navno/rollup.config.mjs

@@ -0,0 +1,65 @@
+import { babel } from "@rollup/plugin-babel";
+import commonjs from "@rollup/plugin-commonjs";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import glob from "glob";
+import * as path from "path";
+import postcssDuplicate from "postcss-combine-duplicated-selectors";
+import postcssImport from "postcss-import";
+import { externals } from "rollup-plugin-node-externals";
+import postcss from "rollup-plugin-postcss";
+
+import { readFileSync } from "fs";
+
+const pkg = JSON.parse(
+  readFileSync(new URL("./package.json", import.meta.url).pathname)
+);
+const extensions = [".js", ".jsx", ".ts", ".tsx"];
+const targets = [
+  "last 3 chrome versions",
+  "last 3 firefox versions",
+  "last 3 opera versions",
+  "last 3 edge versions",
+  "last 3 safari versions",
+  "last 3 chromeandroid versions",
+  "last 1 firefoxandroid versions",
+  "ios >= 13.4",
+  "node 12.20",
+];
+
+export default {
+  input: glob.sync("src/**/index.ts"),
+
+  plugins: [
+    externals({ deps: true, devDeps: true, packagePath: "./package.json" }),
+    nodeResolve({ extensions }),
+    postcss({
+      extract: "index.css",
+      plugins: [postcssImport(), postcssDuplicate()],
+    }),
+    commonjs(),
+    babel({
+      rootMode: "upward",
+      extensions,
+      exclude: "node_modules/**",
+      babelHelpers: "bundled",
+      envName: "production",
+      targets,
+    }),
+  ],
+  output: [
+    {
+      format: "cjs",
+      dir: path.dirname(pkg.main),
+      preserveModules: true,
+      entryFileNames: "[name].js",
+      exports: "named",
+    },
+    {
+      format: "esm",
+      dir: path.dirname(pkg.module),
+      preserveModules: true,
+      sourcemap: true,
+      entryFileNames: "[name].js",
+    },
+  ],
+};

@navikt/community/navno/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./page-header";
+export * from "./pictograms";

@navikt/community/navno/src/page-header/PageHeader.tsx

@@ -0,0 +1,17 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import "./page-header.css";
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
+  ({ children, className, ...rest }, ref) => (
+    <div {...rest} ref={ref} className={cl(className, "navno-page-header")}>
+      {children}
+    </div>
+  )
+);
+
+export default PageHeader;

@navikt/community/navno/src/page-header/index.ts

@@ -0,0 +1 @@
+export { default as PageHeader } from "./PageHeader";

@navikt/community/navno/src/page-header/page-header.css

@@ -0,0 +1,3 @@
+.navno-page-header {
+  color: red;
+}

@navikt/community/navno/src/page-header/page-header.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { PageHeader } from ".";
+
+export default {
+  title: "ds-navno/PageHeader",
+  component: PageHeader,
+  argTypes: {
+    variant: {
+      defaultValue: "var1",
+      control: {
+        type: "radio",
+        options: ["var1", "var1"],
+      },
+    },
+  },
+};
+
+export const Default = (props) => <PageHeader>{props.children}</PageHeader>;
+
+Default.args = {
+  children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+};

@navikt/community/navno/src/pictograms/Utbetalingsdatoer.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { SVGProps, Ref, forwardRef } from "react";
+const SvgUtbetalingsdatoer = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => {
+    return (
+      <svg
+        width={96}
+        height={96}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        role="img"
+        ref={ref}
+        {...props}
+      >
+        <path
+          d="M47 62.687c0-9.616 9.333-26.445 14-26.445s14 16.829 14 26.445-6.268 16.828-14 16.828-14-6.206-14-16.828Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M60.264 37.743a1 1 0 0 0 1.472-1.353l-1.472 1.353ZM45.64 27h-10.64v2h10.64v-2Zm-35.64 25v44h2V52h-2Zm46.684-18.15 3.579 3.893 1.472-1.353-3.579-3.894-1.472 1.353ZM35 27c-13.807 0-25 11.193-25 25h2c0-12.703 10.297-23 23-23v-2Zm10.641 2a15 15 0 0 1 11.044 4.85l1.472-1.354A17 17 0 0 0 45.641 27v2Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M20.786 64.116c0 1.947-1.005 4.87-2.387 7.395-.679 1.24-1.4 2.294-2.05 3.015-.326.362-.6.602-.806.74a1.493 1.493 0 0 1-.114.071 1.493 1.493 0 0 1-.115-.07c-.207-.14-.48-.38-.806-.741-.65-.721-1.371-1.776-2.05-3.014-1.382-2.525-2.387-5.449-2.387-7.396 0-4.036 2.609-6.616 5.357-6.616 1.482 0 2.784.577 3.73 1.636.954 1.067 1.628 2.718 1.628 4.98ZM28 71.413c-1.903 0-4.775 1.013-7.264 2.415-1.219.687-2.257 1.419-2.967 2.076-.356.33-.593.609-.732.82a1.44 1.44 0 0 0-.084.145c.017.035.044.083.084.145.139.212.376.49.732.82.71.658 1.748 1.39 2.968 2.076 2.488 1.403 5.36 2.416 7.263 2.416 3.927 0 6.5-2.616 6.5-5.457 0-1.523-.578-2.854-1.622-3.815-1.048-.963-2.665-1.641-4.878-1.641Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M17.965 75.13a13.073 13.073 0 0 0-7.68 11.908v3.745"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M0 96c4.626-7.822 15.945-7.822 20.571 0M78.933 40.473C86.125 40.388 92 46.194 92 53.386V97M81.111 23.383c-2.735 0-6.746 1.408-10.163 3.298-1.684.932-3.134 1.932-4.14 2.847-.505.459-.86.863-1.079 1.192-.19.284-.222.431-.228.458.006.027.039.174.228.459.219.329.574.732 1.079 1.19 1.006.916 2.456 1.916 4.14 2.848 3.417 1.89 7.428 3.299 10.163 3.299 5.605 0 9.389-3.687 9.389-7.796 0-2.16-.837-4.073-2.372-5.46-1.541-1.39-3.884-2.335-7.017-2.335ZM46.889 38.974c2.735 0 6.746-1.408 10.163-3.299 1.684-.931 3.134-1.932 4.14-2.847.505-.459.86-.862 1.079-1.191.19-.285.222-.432.228-.459-.006-.027-.039-.174-.228-.458-.219-.33-.574-.733-1.079-1.191-1.006-.915-2.456-1.916-4.14-2.848-3.417-1.89-7.428-3.298-10.163-3.298-5.605 0-9.389 3.687-9.389 7.795 0 2.16.837 4.073 2.372 5.46 1.541 1.391 3.884 2.336 7.017 2.336Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M65.773 13.14c-1.366 2.356-2.147 6.517-2.211 10.408-.032 1.918.113 3.67.405 4.994.147.664.32 1.173.497 1.527.157.313.27.414.29.43.023.008.167.056.518.034.396-.024.925-.129 1.576-.334 1.298-.41 2.893-1.161 4.545-2.148 3.352-2.001 6.58-4.755 7.945-7.112 2.797-4.825 1.492-9.934-2.09-11.994-1.882-1.082-3.967-1.316-5.94-.685-1.98.633-3.97 2.18-5.535 4.88ZM79.338 42.656c-1.366-2.356-4.594-5.11-7.946-7.112-1.651-.986-3.247-1.737-4.545-2.147-.65-.206-1.18-.31-1.576-.335-.35-.021-.495.026-.519.034-.018.017-.132.117-.288.43-.177.354-.35.863-.497 1.527-.293 1.325-.438 3.076-.406 4.994.065 3.892.846 8.053 2.212 10.409 2.797 4.825 7.892 6.254 11.474 4.194 1.882-1.082 3.129-2.763 3.566-4.78.44-2.025.09-4.515-1.475-7.214Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+        <path
+          d="M48.662 42.656c1.366-2.356 4.594-5.11 7.946-7.112 1.651-.986 3.247-1.737 4.545-2.147.65-.206 1.18-.31 1.576-.335.35-.021.495.026.519.034.018.017.132.117.288.43.178.354.35.863.497 1.527.293 1.325.438 3.076.406 4.994-.065 3.892-.846 8.053-2.212 10.409-2.797 4.825-7.892 6.254-11.474 4.194-1.882-1.082-3.129-2.763-3.566-4.78-.44-2.025-.09-4.515 1.475-7.214ZM48.662 20.94c1.366 2.356 4.594 5.11 7.946 7.112 1.651.986 3.247 1.737 4.545 2.147.65.206 1.18.31 1.576.335.35.021.495-.026.519-.034.018-.017.132-.117.288-.43.178-.355.35-.863.497-1.527.293-1.325.438-3.076.406-4.994-.065-3.892-.846-8.053-2.212-10.41-2.797-4.824-7.892-6.253-11.474-4.193-1.882 1.082-3.129 2.763-3.566 4.78-.44 2.025-.09 4.515 1.475 7.214Z"
+          stroke="#262626"
+          strokeWidth={3}
+        />
+      </svg>
+    );
+  }
+);
+export default SvgUtbetalingsdatoer;

@navikt/community/navno/src/pictograms/UtbetalingsdatoerSmall.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { SVGProps, Ref, forwardRef } from "react";
+const SvgUtbetalingsdatoerSmall = forwardRef(
+  (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => {
+    return (
+      <svg
+        width={64}
+        height={64}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        role="img"
+        ref={ref}
+        {...props}
+      >
+        <path
+          d="M31.333 41.791c0-6.41 6.222-17.63 9.334-17.63 3.11 0 9.333 11.22 9.333 17.63 0 6.41-4.179 11.219-9.334 11.219-5.154 0-9.333-4.138-9.333-11.219Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M39.825 25.484a1.143 1.143 0 1 0 1.683-1.546l-1.683 1.546Zm-9.398-7.96h-7.094v2.285h7.094v-2.285ZM6.19 34.667V64h2.286V34.667H6.19ZM37.44 22.888l2.386 2.596 1.683-1.546-2.386-2.596-1.683 1.547Zm-14.106-5.364c-9.468 0-17.143 7.675-17.143 17.143h2.286c0-8.206 6.652-14.858 14.857-14.858v-2.285Zm7.094 2.285a9.523 9.523 0 0 1 7.012 3.08l1.683-1.547a11.81 11.81 0 0 0-8.695-3.818v2.285Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M13.857 42.744c0 1.298-.67 3.247-1.591 4.93-.453.826-.934 1.53-1.366 2.01-.218.241-.4.401-.538.494-.031.02-.056.036-.076.047a1.054 1.054 0 0 1-.076-.047 3.115 3.115 0 0 1-.538-.494c-.433-.48-.914-1.184-1.366-2.01-.922-1.683-1.592-3.632-1.592-4.93 0-2.69 1.74-4.41 3.572-4.41.987 0 1.855.384 2.487 1.09.635.711 1.084 1.812 1.084 3.32ZM18.667 47.608c-1.27 0-3.184.676-4.843 1.61-.813.459-1.504.946-1.978 1.385-.237.22-.396.405-.488.547a.97.97 0 0 0-.056.096.97.97 0 0 0 .056.097c.092.14.25.326.488.546.474.439 1.165.926 1.978 1.385 1.66.934 3.574 1.61 4.843 1.61 2.618 0 4.333-1.744 4.333-3.638 0-1.015-.385-1.903-1.081-2.543-.699-.643-1.777-1.095-3.252-1.095Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M11.976 50.087a8.715 8.715 0 0 0-5.119 7.938v2.497"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M0 64c3.084-5.215 10.63-5.215 13.714 0M52.622 26.983a8.61 8.61 0 0 1 8.712 8.608v29.076M54.074 15.588c-1.823 0-4.497.939-6.775 2.2-1.123.62-2.09 1.288-2.76 1.897-.337.306-.574.575-.72.795-.126.19-.148.287-.151.305.003.018.025.116.151.306.146.22.383.488.72.794.67.61 1.637 1.277 2.76 1.898 2.278 1.26 4.952 2.2 6.775 2.2 3.737 0 6.26-2.459 6.26-5.198 0-1.44-.558-2.715-1.582-3.64-1.028-.927-2.59-1.557-4.678-1.557ZM31.26 25.982c1.823 0 4.497-.938 6.775-2.199 1.122-.62 2.09-1.288 2.76-1.898.336-.306.573-.575.72-.794.125-.19.147-.288.151-.306-.004-.018-.026-.116-.152-.305-.146-.22-.383-.489-.719-.794-.67-.61-1.638-1.277-2.76-1.899-2.278-1.26-4.952-2.199-6.776-2.199-3.736 0-6.259 2.458-6.259 5.197 0 1.44.558 2.716 1.582 3.64 1.027.928 2.59 1.557 4.677 1.557Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M43.85 8.76c-.912 1.57-1.432 4.345-1.475 6.939-.022 1.279.075 2.446.27 3.33.098.442.213.781.331 1.017.105.209.18.276.193.287.016.005.112.037.346.023.264-.017.616-.086 1.05-.224.866-.273 1.93-.773 3.03-1.431 2.235-1.334 4.387-3.17 5.297-4.741 1.865-3.217.995-6.623-1.393-7.996-1.255-.722-2.645-.878-3.96-.457-1.32.422-2.647 1.453-3.69 3.253ZM52.892 28.438c-.91-1.572-3.062-3.408-5.297-4.742-1.101-.658-2.165-1.158-3.03-1.431-.434-.137-.787-.207-1.05-.224-.234-.014-.33.018-.346.023-.013.011-.089.078-.193.287-.118.236-.234.575-.331 1.018-.195.883-.292 2.05-.27 3.33.042 2.593.563 5.367 1.474 6.938 1.864 3.217 5.261 4.17 7.65 2.796 1.254-.72 2.085-1.842 2.377-3.187.292-1.35.06-3.01-.984-4.809Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+        <path
+          d="M32.442 28.438c.91-1.572 3.062-3.408 5.297-4.742 1.1-.658 2.164-1.158 3.03-1.431.434-.137.786-.207 1.05-.224.234-.014.33.018.346.023.013.011.088.078.193.287.118.236.233.575.331 1.018.195.883.292 2.05.27 3.33-.043 2.593-.563 5.367-1.474 6.938-1.865 3.217-5.262 4.17-7.65 2.796-1.254-.72-2.085-1.842-2.377-3.187-.293-1.35-.06-3.01.984-4.809ZM32.442 13.96c.91 1.57 3.062 3.407 5.297 4.741 1.1.658 2.164 1.158 3.03 1.432.434.137.786.207 1.05.223.234.014.33-.018.346-.023.013-.01.088-.078.193-.287.118-.236.233-.575.331-1.017.195-.884.292-2.051.27-3.33-.043-2.594-.563-5.368-1.474-6.94-1.865-3.216-5.262-4.168-7.65-2.795-1.254.721-2.085 1.842-2.377 3.187-.293 1.35-.06 3.01.984 4.809Z"
+          stroke="#262626"
+          strokeWidth={2}
+        />
+      </svg>
+    );
+  }
+);
+export default SvgUtbetalingsdatoerSmall;

@navikt/community/navno/src/pictograms/index.ts

@@ -0,0 +1,2 @@
+export { default as PictogramUtbetalingsdatoerSmall } from "./UtbetalingsdatoerSmall";
+export { default as PictogramUtbetalingsdatoer } from "./Utbetalingsdatoer";

@navikt/community/navno/template.js

@@ -0,0 +1,13 @@
+const template = (variables, { tpl }) => {
+  return tpl`
+${variables.imports};
+${variables.interfaces};
+
+const ${variables.componentName} = forwardRef((${variables.props}) => {
+  return ${variables.jsx};
+});
+export default ${variables.componentName}
+`;
+};
+
+module.exports = template;

@navikt/community/navno/tsconfig.esm.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}

@navikt/community/navno/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "noEmitHelpers": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "sourceMap": true,
+    "outDir": "./esm",
+    "isolatedModules": true
+  },
+  "include": ["./src"]
+}

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @navikt/ds-css
 
+## 2.0.7
+
+## 2.0.6
+
+## 2.0.5
+
+### Patch Changes
+
+- Reverserte border-width endrind i button
+
+## 2.0.4
+
+## 2.0.3
+
+## 2.0.2
+
+## 2.0.1
+
+### Patch Changes
+
+- [`e8007328d`](https://github.com/navikt/Designsystemet/commit/e8007328db3f6d5be696cf24f03304c79be0f3f7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bugfixer ved bruk av tokens
+
+## 2.0.0
+
+### Major Changes
+
+- [`6b96e4833`](https://github.com/navikt/Designsystemet/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+
+## 1.5.10
+
+## 1.5.9
+
+### Patch Changes
+
+- 4px -> 2px gap chips-toggle active
+
+## 1.5.8
+
+## 1.5.7
+
+## 1.5.6
+
+## 1.5.5
+
 ## 1.5.4
 
 ### Patch Changes

@navikt/core/css/README.md

@@ -1,29 +1,22 @@
-# NAV designsystem styling
+# Aksel styling
 
-CSS-package containing design for @navikt/ds-react and more.
+CSS for NAVs designsystem.
 
-- All our tokens (Colors, border, shadows etc)
+- Css tokens (Colors, border, shadows etc)
 - Component-styling for `@navikt/ds-react` packages
 - Normalize.css v8
-- Fonts
+- Font-loading
 
 ## Installation
 
-Install `@navikt/ds-css` with yarn
-
 ```bash
   yarn add @navikt/ds-css
-```
-
-Install `@navikt/ds-css` with npm
-
-```bash
   npm install @navikt/ds-css
 ```
 
 ## Usage
 
-You can import these styles once to make it accessible in your entire project. Typically you will add the following line to your root .js or .ts files.
+Import styles once to make it accessible for your entire project. Typically you will add the following line to your root .tsx file.
 
 ```javascript
 import "@navikt/ds-css";
@@ -33,7 +26,7 @@ function App() {
 }
 ```
 
-But you can also import it in a .css-file like this
+But you can import it in a .css-file
 
 ```css
 @import "@navikt/ds-css";

@navikt/core/css/accordion.css

@@ -1,11 +1,3 @@
-:root,
-:host {
-  --navds-accordion-color-text-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-accordion-color-border: var(--navds-semantic-color-border);
-  --navds-accordion-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-accordion-color-background-open: var(--navds-semantic-color-interaction-primary-hover-subtle);
-}
-
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -15,24 +7,24 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: var(--navds-spacing-2);
-  padding: 14px var(--navds-spacing-3) var(--navds-spacing-3);
+  gap: var(--a-spacing-2);
+  padding: 14px var(--a-spacing-3) var(--a-spacing-3);
   margin: 0;
   text-align: left;
   background: transparent;
   cursor: pointer;
   border: none;
-  border-bottom: 2px solid var(--navds-accordion-color-border);
+  border-bottom: 2px solid var(--a-border-strong);
 }
 
 .navds-accordion__header:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-accordion__header:hover {
-  color: var(--navds-accordion-color-text-hover);
-  border-color: var(--navds-accordion-color-border-hover);
+  color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
+  border-color: var(--ac-accordion-header-border-hover, var(--a-border-strong));
 }
 
 .navds-accordion__header-content {
@@ -41,17 +33,17 @@
 }
 
 .navds-accordion__item--open > .navds-accordion__header {
-  background-color: var(--navds-accordion-color-background-open);
-  border-color: var(--navds-accordion-color-background-open);
+  background-color: var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle));
+  border-color: var(--ac-accordion-item-border-open, var(--a-surface-action-subtle));
 }
 
 .navds-accordion__content {
-  padding: var(--navds-spacing-3) var(--navds-spacing-3) 18px;
-  border-bottom: 2px solid var(--navds-accordion-color-border);
+  padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
+  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-strong));
 }
 
 .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--navds-accordion-color-border-hover);
+  border-color: var(--ac-accordion-content-border-open, var(--a-border-strong));
 }
 
 .navds-accordion__expand-icon {

@navikt/core/css/alert.css

@@ -1,23 +1,9 @@
-:root,
-:host {
-  --navds-alert-color-border: var(--navds-semantic-color-border-muted);
-  --navds-alert-color-error-border: var(--navds-semantic-color-feedback-danger-border);
-  --navds-alert-color-error-background: var(--navds-global-color-red-50);
-  --navds-alert-color-warning-border: var(--navds-semantic-color-feedback-warning-border);
-  --navds-alert-color-warning-background: var(--navds-global-color-orange-50);
-  --navds-alert-color-info-border: var(--navds-semantic-color-feedback-info-border);
-  --navds-alert-color-info-background: var(--navds-global-color-lightblue-50);
-  --navds-alert-color-success-border: var(--navds-semantic-color-feedback-success-border);
-  --navds-alert-color-success-background: var(--navds-global-color-green-50);
-}
-
 .navds-alert {
-  border-radius: var(--navds-border-radius-medium);
+  border-radius: var(--a-border-radius-medium);
   border: 1px solid;
-  border-color: var(--navds-alert-color-border);
-  padding: var(--navds-spacing-4);
+  padding: var(--a-spacing-4);
   display: flex;
-  gap: var(--navds-spacing-3);
+  gap: var(--a-spacing-3);
   align-items: center;
 }
 
@@ -26,7 +12,7 @@
 }
 
 .navds-alert--small {
-  padding: var(--navds-spacing-2) var(--navds-spacing-4);
+  padding: var(--a-spacing-2) var(--a-spacing-4);
 }
 
 .navds-alert--full-width {
@@ -37,32 +23,32 @@
   flex-shrink: 0;
   font-size: 1.5rem;
   align-self: flex-start;
-  height: var(--navds-font-line-height-xlarge);
+  height: var(--a-font-line-height-xlarge);
 }
 
 .navds-alert--small > .navds-alert__icon {
   font-size: 1.25rem;
-  height: var(--navds-font-line-height-large);
+  height: var(--a-font-line-height-large);
 }
 
 .navds-alert--error {
-  border-color: var(--navds-alert-color-error-border);
-  background-color: var(--navds-alert-color-error-background);
+  border-color: var(--ac-alert-error-border, var(--a-border-danger));
+  background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
 }
 
 .navds-alert--warning {
-  border-color: var(--navds-alert-color-warning-border);
-  background-color: var(--navds-alert-color-warning-background);
+  border-color: var(--ac-alert-warning-border, var(--a-border-warning));
+  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
 }
 
 .navds-alert--info {
-  border-color: var(--navds-alert-color-info-border);
-  background-color: var(--navds-alert-color-info-background);
+  border-color: var(--ac-alert-info-border, var(--a-border-info));
+  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
 }
 
 .navds-alert--success {
-  border-color: var(--navds-alert-color-success-border);
-  background-color: var(--navds-alert-color-success-background);
+  border-color: var(--ac-alert-success-border, var(--a-border-success));
+  background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
 }
 
 .navds-alert--inline {

@navikt/core/css/baseline/Source-Sans-Pro-600.css

@@ -1,7 +0,0 @@
-@font-face {
-  font-family: "Source Sans Pro";
-  font-weight: 600;
-  font-style: normal;
-  src: url(data:application/font-woff;base64,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 truncated
-    format("woff");
-}

@navikt/core/css/baseline/Source-Sans-Pro-italic.css

@@ -1,7 +0,0 @@
-@font-face {
-  font-family: "Source Sans Pro";
-  font-weight: 400;
-  font-style: italic;
-  src: url(data:application/font-woff;base64,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 truncated
-    format("woff");
-}

@navikt/core/css/baseline/Source-Sans-Pro-regular.css

@@ -1,7 +0,0 @@
-@font-face {
-  font-family: "Source Sans Pro";
-  font-weight: 400;
-  font-style: normal;
-  src: url(data:application/font-woff;base64,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 truncated
-    format("woff");
-}

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

@@ -1,8 +1,6 @@
 @import "@navikt/ds-tokens";
 @import "normalize.css";
-@import "Source-Sans-Pro-regular.css";
-@import "Source-Sans-Pro-italic.css";
-@import "Source-Sans-Pro-600.css";
+@import "fonts.css";
 @import "print.css";
 @import "utility.css";
 
@@ -20,26 +18,26 @@ html,
 :root,
 :host,
 [data-theme="light"] {
-  --navds-shadow-focus: 0 0 0 3px var(--navds-semantic-color-focus);
+  --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
 
-  color: var(--navds-semantic-color-text);
+  color: var(--a-text-default);
 }
 
 [data-theme="dark"] {
-  --navds-shadow-focus: var(--navds-shadow-focus-inverted);
+  --a-shadow-focus: var(--a-shadow-focus-inverted);
 
-  color: var(--navds-semantic-color-text-inverted);
+  color: var(--a-text-on-inverted);
 }
 
 body,
 :host {
-  font-family: var(--navds-font-family, "Source Sans Pro", Arial, sans-serif);
+  font-family: var(--a-font-family, "Source Sans Pro", Arial, sans-serif);
   line-height: 1.333;
   font-size: 1.125rem;
 }
 
 a {
-  color: var(--navds-semantic-color-link);
+  color: var(--a-text-action);
 }
 
 button {

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

@@ -0,0 +1,21 @@
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
+}

@navikt/core/css/button.css

@@ -1,60 +1,18 @@
-:root,
-:host,
-[data-theme="light"] {
-  /* Primary */
-  --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-primary-border-focus: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-primary-background: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-primary-background-hover: var(--navds-semantic-color-interaction-primary-hover);
-  --navds-button-color-primary-background-active: var(--navds-semantic-color-interaction-primary-selected);
-
-  /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-secondary-text-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-secondary-text-active: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-secondary-border: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-secondary-border-focus-active-hover: var(--navds-semantic-color-component-background-light);
-  --navds-button-color-secondary-background: var(--navds-semantic-color-component-background-light);
-  --navds-button-color-secondary-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-button-color-secondary-background-active: var(--navds-semantic-color-interaction-primary-selected);
-
-  /* Tertiary */
-  --navds-button-color-tertiary-text: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-tertiary-text-active: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-tertiary-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-button-color-tertiary-border-focus: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-tertiary-border-active: var(--navds-semantic-color-component-background-light);
-  --navds-button-color-tertiary-background-active: var(--navds-semantic-color-interaction-primary-selected);
-
-  /* Danger */
-  --navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-danger-background: var(--navds-semantic-color-interaction-danger);
-  --navds-button-color-danger-background-hover: var(--navds-semantic-color-interaction-danger-hover);
-  --navds-button-color-danger-background-active: var(--navds-semantic-color-interaction-danger-selected);
-  --navds-button-color-danger-border-focus: var(--navds-semantic-color-component-background-light);
-
-  /* Loader */
-  --navds-loader-color-on-button-background: rgb(255 255 255 / 0.3);
-  --navds-loader-color-on-button-foreground: currentColor;
-}
-
 [data-theme="dark"] {
-  /* Primary */
-  --navds-button-color-primary-text: var(--navds-semantic-color-text);
-  --navds-button-color-primary-border-focus: var(--navds-semantic-color-text);
-  --navds-button-color-primary-background: var(--navds-global-color-blue-200);
-  --navds-button-color-primary-background-hover: var(--navds-global-color-blue-300);
-  --navds-button-color-primary-background-active: var(--navds-global-color-blue-400);
-
-  /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-global-color-white);
-  --navds-button-color-secondary-text-hover: var(--navds-global-color-white);
-  --navds-button-color-secondary-text-active: var(--navds-global-color-white);
-  --navds-button-color-secondary-border: var(--navds-global-color-blue-200);
-  --navds-button-color-secondary-border-focus-active-hover: var(--navds-semantic-color-text);
-  --navds-button-color-secondary-background: var(--navds-semantic-color-component-background-inverted);
-  --navds-button-color-secondary-background-hover: var(--navds-global-color-gray-800);
-  --navds-button-color-secondary-background-active: var(--navds-global-color-gray-700);
+  --ac-button-primary-text: var(--a-gray-900);
+  --ac-button-primary-bg: var(--a-blue-200);
+  --ac-button-primary-focus-border: var(--a-gray-900);
+  --ac-button-primary-hover-bg: var(--a-blue-300);
+  --ac-button-primary-active-bg: var(--a-blue-400);
+  --ac-button-secondary-text: var(--a-white);
+  --ac-button-secondary-hover-text: var(--a-white);
+  --ac-button-secondary-active-text: var(--a-white);
+  --ac-button-secondary-active-focus-border: var(--a-gray-900);
+  --ac-button-secondary-bg: var(--a-gray-900);
+  --ac-button-secondary-border: var(--a-blue-200);
+  --ac-button-secondary-hover-bg: var(--a-gray-800);
+  --ac-button-secondary-focus-border: var(--a-blue-200);
+  --ac-button-secondary-active-bg: var(--a-gray-700);
 }
 
 .navds-button {
@@ -64,24 +22,24 @@
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: var(--navds-border-radius-small);
-  padding: var(--navds-spacing-3) var(--navds-spacing-5);
+  border-radius: var(--a-border-radius-medium);
+  padding: var(--a-spacing-3) var(--a-spacing-5);
   align-items: center;
   justify-content: center;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-button--small {
-  padding: 0.375rem var(--navds-spacing-3);
+  padding: 0.375rem var(--a-spacing-3);
 }
 
 .navds-button--xsmall {
-  padding: 0.125rem var(--navds-spacing-2);
-  gap: var(--navds-spacing-1);
+  padding: var(--a-spacing-05) var(--a-spacing-2);
+  gap: var(--a-spacing-1);
 }
 
 .navds-button--icon-only {
-  padding: var(--navds-spacing-3);
+  padding: var(--a-spacing-3);
 }
 
 .navds-button--small.navds-button--icon-only {
@@ -89,27 +47,27 @@
 }
 
 .navds-button--xsmall.navds-button--icon-only {
-  padding: var(--navds-spacing-1);
+  padding: var(--a-spacing-1);
 }
 
 .navds-button:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-button__icon {
-  --navds-button-icon-adjustment: -4px;
+  --ac-button-icon-margin: -4px;
 
   font-size: 1.5rem;
   display: flex;
 }
 
 .navds-button__icon:first-child {
-  margin-left: var(--navds-button-icon-adjustment);
+  margin-left: var(--ac-button-icon-margin);
 }
 
 .navds-button__icon:last-child {
-  margin-right: var(--navds-button-icon-adjustment);
+  margin-right: var(--ac-button-icon-margin);
 }
 
 .navds-button__icon:only-child {
@@ -117,13 +75,13 @@
 }
 
 .navds-button--small .navds-button__icon {
-  --navds-button-icon-adjustment: -2px;
+  --ac-button-icon-margin: -2px;
 
   font-size: 1.25rem;
 }
 
 .navds-button--xsmall .navds-button__icon {
-  --navds-button-icon-adjustment: -2px;
+  --ac-button-icon-margin: -2px;
 
   font-size: 1rem;
 }
@@ -133,25 +91,25 @@
  *************************/
 
 .navds-button--primary {
-  background-color: var(--navds-button-color-primary-background);
-  color: var(--navds-button-color-primary-text);
+  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
+  color: var(--ac-button-primary-text, var(--a-text-on-action));
 }
 
 .navds-button--primary:hover {
-  background-color: var(--navds-button-color-primary-background-hover);
+  background-color: var(--ac-button-primary-hover-bg, var(--a-surface-action-hover));
 }
 
 .navds-button--primary:active {
-  background-color: var(--navds-button-color-primary-background-active);
+  background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
 }
 
 .navds-button--primary:focus {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
 .navds-button--primary:hover:where(:disabled, .navds-button--disabled),
 .navds-button--primary:active:where(:disabled, .navds-button--disabled) {
-  background-color: var(--navds-button-color-primary-background);
+  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
 }
 
 /**************************
@@ -159,35 +117,35 @@
  **************************/
 
 .navds-button--secondary {
-  color: var(--navds-button-color-secondary-text);
-  background-color: var(--navds-button-color-secondary-background);
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+  color: var(--ac-button-secondary-text, var(--a-text-action));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
 .navds-button--secondary:hover {
-  color: var(--navds-button-color-secondary-text-hover);
-  background-color: var(--navds-button-color-secondary-background-hover);
+  color: var(--ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle));
+  background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
 .navds-button--secondary:focus {
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }
 
 .navds-button--secondary:active {
-  color: var(--navds-button-color-secondary-text-active);
-  background-color: var(--navds-button-color-secondary-background-active);
+  color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
+  background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
   box-shadow: none;
 }
 
 .navds-button--secondary:focus:active {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-secondary-border-focus-active-hover), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--navds-button-color-secondary-text);
-  background-color: var(--navds-button-color-secondary-background);
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+  color: var(--ac-button-secondary-text, var(--a-text-action));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
 /****************************
@@ -195,36 +153,37 @@
  ****************************/
 
 .navds-button--tertiary {
-  color: var(--navds-button-color-tertiary-text);
+  color: var(--ac-button-tertiary-text, var(--a-text-action));
 }
 
 .navds-button--tertiary:hover {
-  background-color: var(--navds-button-color-tertiary-background-hover);
+  color: var(--ac-button-tertiary-hover-text, var(--a-text-action-on-action-subtle));
+  background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
 .navds-button--tertiary:focus {
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }
 
 .navds-button--tertiary:active {
-  color: var(--navds-button-color-tertiary-text-active);
-  background-color: var(--navds-button-color-tertiary-background-active);
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
+  color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
+  background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
+  box-shadow: inset 0 0 0 1px var(--a-surface-default);
 }
 
 .navds-button--tertiary:active:hover {
-  background-color: var(--navds-button-color-tertiary-background-active);
+  background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
 }
 
 .navds-button--tertiary:active:focus {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
 .navds-button--tertiary:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--navds-button-color-tertiary-text);
+  color: var(--ac-button-tertiary-text, var(--a-text-action));
   background: none;
   box-shadow: none;
 }
@@ -234,25 +193,25 @@
  *************************/
 
 .navds-button--danger {
-  background-color: var(--navds-button-color-danger-background);
-  color: var(--navds-button-color-danger-text);
+  background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
+  color: var(--ac-button-danger-text, var(--a-text-on-danger));
 }
 
 .navds-button--danger:hover {
-  background-color: var(--navds-button-color-danger-background-hover);
+  background-color: var(--ac-button-danger-hover-bg, var(--a-surface-danger-hover));
 }
 
 .navds-button--danger:active {
-  background-color: var(--navds-button-color-danger-background-active);
+  background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
 }
 
 .navds-button--danger:focus {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
 .navds-button--danger:active:where(:disabled, .navds-button--disabled),
 .navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
-  background-color: var(--navds-button-color-danger-background);
+  background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
 }
 
 /**************************
@@ -268,10 +227,10 @@
 }
 
 .navds-button .navds-loader .navds-loader__foreground {
-  stroke: var(--navds-loader-color-on-button-foreground);
+  stroke: var(--ac-button-loader-stroke, currentColor);
 }
 
 .navds-button--primary .navds-loader .navds-loader__background,
 .navds-button--danger .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
+  stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
 }

@navikt/core/css/chat.css

@@ -1,21 +1,14 @@
-:root,
-:host {
-  --navds-chat-color-background: var(--navds-semantic-color-canvas-background);
-  --navds-chat-color-avatar: var(--navds-semantic-color-text);
-  --navds-chat-color-avatar-background: var(--navds-semantic-color-canvas-background);
-}
-
 .navds-chat {
   display: flex;
   align-items: flex-end;
-  gap: var(--navds-spacing-4);
-  padding-right: var(--navds-spacing-16);
+  gap: var(--a-spacing-4);
+  padding-right: var(--a-spacing-16);
 }
 
 .navds-chat--right {
   flex-direction: row-reverse;
   padding-right: 0;
-  padding-left: var(--navds-spacing-16);
+  padding-left: var(--a-spacing-16);
 }
 
 .navds-chat__bubble-wrapper {
@@ -24,7 +17,7 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-3);
+  gap: var(--a-spacing-3);
 }
 
 .navds-chat--right .navds-chat__bubble-wrapper {
@@ -33,9 +26,9 @@
 
 .navds-chat__avatar {
   align-items: center;
-  background: var(--navds-chat-color-avatar-background);
-  color: var(--navds-chat-color-avatar);
-  border-radius: var(--navds-border-radius-full);
+  background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
+  color: var(--ac-chat-avatar-color, var(--a-text-default));
+  border-radius: var(--a-border-radius-full);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -52,31 +45,31 @@
 
 .navds-chat__bubble {
   padding: 1rem;
-  box-shadow: var(--navds-shadow-small);
+  box-shadow: var(--a-shadow-small);
   width: fit-content;
   max-width: 37.5rem;
-  background-color: var(--navds-chat-color-background);
-  border-radius: var(--navds-border-radius-xlarge);
+  background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
+  border-radius: var(--a-border-radius-xlarge);
   border-bottom-left-radius: 2px;
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-chat__bubble:focus {
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
 .navds-chat--right .navds-chat__bubble {
-  border-radius: var(--navds-border-radius-xlarge);
+  border-radius: var(--a-border-radius-xlarge);
   border-bottom-right-radius: 2px;
 }
 
 .navds-chat__top-text {
-  color: var(--navds-semantic-color-text);
+  color: var(--ac-chat-top-text, var(--a-text-default));
   display: flex;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
   align-items: baseline;
 }
 
@@ -85,5 +78,5 @@
 }
 
 .navds-chat__name {
-  font-weight: var(--navds-font-weight-bold);
+  font-weight: var(--a-font-weight-bold);
 }

@navikt/core/css/chips.css

@@ -1,6 +1,6 @@
 .navds-chips {
   display: flex;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -20,61 +20,57 @@
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: 0.125rem;
+  gap: var(--a-spacing-05);
   margin: 0;
-  padding: 0 var(--navds-spacing-3);
+  padding: 0 var(--a-spacing-3);
   text-decoration: none;
-  border-radius: var(--navds-border-radius-full);
+  border-radius: var(--a-border-radius-full);
   min-height: 32px;
 }
 
 .navds-chips--small .navds-chips__chip {
   min-height: 24px;
-  padding: 0 var(--navds-spacing-2);
+  padding: 0 var(--a-spacing-2);
 }
 
 .navds-chips__toggle {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--navds-global-color-gray-500));
-  background-color: var(--ac-chip-toggle-bg, rgb(0 0 0 / 0.055));
-}
-
-.navds-chips--small .navds-chips__toggle {
-  gap: var(--navds-spacing-1);
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-default));
+  background-color: var(--ac-chip-toggle-bg, var(--a-surface-neutral-subtle));
 }
 
 .navds-chips__toggle:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border-hover, var(--navds-global-color-gray-600));
-  background-color: var(--ac-chip-toggle-bg-hover, rgb(0 0 0 / 0.1));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-strong));
+  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-neutral-subtle-hover));
 }
 
 .navds-chips__toggle[aria-pressed="true"] {
   box-shadow: none;
-  background-color: var(--ac-chip-toggle-bg-pressed, var(--navds-global-color-deepblue-500));
-  color: var(--ac-chip-toggle-text-pressed, var(--navds-global-color-white));
+  background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
+  color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
 }
 
 .navds-chips__toggle[aria-pressed="true"]:hover {
-  background-color: var(--ac-chip-toggle-bg-pressed-hover, var(--navds-global-color-deepblue-600));
+  background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
 }
 
 .navds-chips__toggle:focus-visible {
-  box-shadow: 0 0 0 2px var(--navds-global-color-blue-800);
+  box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
 
 .navds-chips__toggle[aria-pressed="true"]:focus-visible,
 .navds-chips__toggle:active:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 2px var(--navds-global-color-blue-800);
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
 
 .navds-chips__removable--action {
-  background-color: var(--ac-chip-removable-action-bg, var(--navds-global-color-deepblue-500));
-  color: var(--ac-chip-removable-action-text, var(--navds-global-color-white));
+  background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
+  color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
 }
 
 .navds-chips__removable--neutral {
-  color: var(--ac-chip-removable-neutral-text, var(--navds-global-color-gray-900));
-  background-color: var(--ac-chip-removable-neutral-bg, rgb(0 0 0/ 0.055));
-  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--navds-global-color-gray-500));
+  background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
 }
 
 .navds-chips__removable-icon {
@@ -82,7 +78,7 @@
   height: 1.5rem;
   display: grid;
   place-items: center;
-  border-radius: var(--navds-border-radius-full);
+  border-radius: var(--a-border-radius-full);
 }
 
 .navds-chips__toggle-icon {
@@ -90,7 +86,7 @@
   height: 1.25rem;
   display: grid;
   place-items: center;
-  border-radius: var(--navds-border-radius-full);
+  border-radius: var(--a-border-radius-full);
 }
 
 .navds-chips--small .navds-chips__toggle-icon {
@@ -108,20 +104,20 @@
 }
 
 .navds-chips__removable--action:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 2px var(--navds-global-color-blue-800);
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
 }
 
 .navds-chips__removable--neutral:focus-visible {
-  box-shadow: 0 0 0 2px var(--navds-global-color-blue-800);
+  box-shadow: 0 0 0 2px var(--a-border-focus);
 }
 
 .navds-chips__removable--action:hover {
-  background-color: var(--ac-chip-removable-action-bg-hover, var(--navds-global-color-deepblue-700));
+  background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
 }
 
 .navds-chips__removable--neutral:hover {
-  background-color: var(--ac-chip-removable-action-bg-hover, rgb(0 0 0 / 0.1));
-  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border-hover, var(--navds-global-color-gray-600));
+  background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
 }
 
 .navds-chips--icon-left {
@@ -129,11 +125,11 @@
 }
 
 .navds-chips--icon-right {
-  padding-right: var(--navds-spacing-1);
+  padding-right: var(--a-spacing-1);
 }
 
 .navds-chips--small .navds-chips--icon-right {
-  padding-right: 0.125rem;
+  padding-right: var(--a-spacing-05);
 }
 
 .navds-chips--small .navds-chips--icon-left {

@navikt/core/css/content-container.css

@@ -7,11 +7,11 @@
   margin-left: auto;
   margin-right: auto;
   max-width: var(--navds-content-container-max-width);
-  padding: var(--navds-spacing-4);
+  padding: var(--a-spacing-4);
 }
 
 @media (min-width: 448px) {
   .navds-content-container {
-    padding: var(--navds-spacing-6);
+    padding: var(--a-spacing-6);
   }
 }

@navikt/core/css/date.css

@@ -1,16 +1,16 @@
 .navds-date {
-  padding: var(--navds-spacing-3);
+  padding: var(--a-spacing-3);
 }
 
 .navds-date .rdp-day_range_middle.rdp-day_disabled {
-  color: var(--navds-global-color-white);
-  background: var(--navds-global-color-deepblue-500);
+  color: var(--ac-date-middle-text, var(--a-text-on-action));
+  background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
 }
 
 .navds-date .rdp-month,
 .navds-date.rdp-month {
   display: grid;
-  gap: var(--navds-spacing-5);
+  gap: var(--a-spacing-5);
 }
 
 .navds-date__caption-label {
@@ -19,31 +19,31 @@
 
 .navds-date .rdp-head_cell {
   text-transform: capitalize;
-  font-size: var(--navds-font-size-small);
+  font-size: var(--a-font-size-small);
 }
 
 .navds-date .rdp-weeknumber {
-  color: var(--navds-global-color-white);
-  background: var(--navds-global-color-gray-800);
-  font-size: var(--navds-font-size-small);
+  color: var(--ac-date-week-text, var(--a-text-on-neutral));
+  background: var(--ac-date-week-bg, var(--a-surface-neutral));
+  font-size: var(--a-font-size-small);
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0.125rem var(--navds-spacing-1);
-  border-radius: var(--navds-border-radius-small);
+  padding: var(--a-spacing-05) var(--a-spacing-1);
+  border-radius: var(--a-border-radius-small);
 }
 
 .navds-date__caption-dropdown {
   display: flex;
   justify-content: space-between;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
   align-items: center;
 }
 
 .navds-date__caption__month-wrapper {
   display: flex;
   justify-content: center;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
   align-items: center;
 }
 
@@ -56,32 +56,31 @@
   width: 2.5rem;
   height: 2.5rem;
   text-align: center;
-  border-radius: var(--navds-border-radius-medium);
+  border-radius: var(--a-border-radius-medium);
 }
 
 .navds-date .rdp-day_range_start {
-  border-radius: 12px 2px 2px 12px;
-  border-radius: var(--navds-border-radius-xlarge) var(--navds-border-radius-small) var(--navds-border-radius-small)
-    var(--navds-border-radius-xlarge);
+  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-small) var(--a-border-radius-small)
+    var(--a-border-radius-xlarge);
 }
 
 .navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
-  border-radius: var(--navds-border-radius-small) var(--navds-border-radius-xlarge) var(--navds-border-radius-xlarge)
-    var(--navds-border-radius-small);
+  border-radius: var(--a-border-radius-small) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
+    var(--a-border-radius-small);
 }
 
 .navds-date .rdp-day_range_start.rdp-day_range_end {
-  border-radius: var(--navds-border-radius-xlarge);
+  border-radius: var(--a-border-radius-xlarge);
 }
 
 .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
 .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
 .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
-  box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 3px var(--navds-global-color-blue-800);
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
 /* Monthpicker */
@@ -91,13 +90,13 @@
   width: 3rem;
   height: 2.75rem;
   text-transform: capitalize;
-  border-radius: var(--navds-border-radius-medium);
+  border-radius: var(--a-border-radius-medium);
   cursor: pointer;
 }
 
 .navds-date__month-button:focus,
 .navds-monthpicker__caption-button:focus {
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
   z-index: 1;
 }
 
@@ -134,26 +133,26 @@
 
 .navds-date .rdp-day_selected,
 .navds-monthpicker__month--selected {
-  color: var(--navds-global-color-white);
-  background: var(--navds-global-color-deepblue-500);
+  color: var(--ac-date-selected-text, var(--a-text-on-action));
+  background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
   cursor: pointer;
 }
 
 .navds-date .rdp-day_disabled {
   cursor: not-allowed;
   text-decoration: line-through;
-  background-color: var(--navds-global-color-gray-100);
-  color: var(--navds-global-color-gray-600);
+  background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-date-disabled-text, var(--a-text-subtle));
 }
 
 .navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,
 .navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover {
-  background: var(--navds-global-color-blue-50);
+  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
   cursor: pointer;
 }
 
 .navds-date .rdp-day_today {
-  box-shadow: 0 0 0 1px var(--navds-global-color-deepblue-500);
+  box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
   text-decoration: underline;
 }
 
@@ -161,47 +160,47 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-date__caption-button {
-  color: var(--navds-global-color-gray-900);
+  color: var(--ac-date-caption-text, var(--a-text-default));
 }
 
 .navds-date__field-input {
-  padding-right: var(--navds-spacing-12);
+  padding-right: var(--a-spacing-12);
 }
 
 .navds-form-field--small .navds-date__field-input {
-  padding-right: var(--navds-spacing-8);
+  padding-right: var(--a-spacing-8);
 }
 
 /* Error-handling */
 .navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
-  border-color: var(--navds-search-color-border-error);
-  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error);
+  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
+  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
 }
 
 .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 .navds-date__field-button {
   position: absolute;
-  right: var(--navds-spacing-2);
+  right: var(--a-spacing-2);
   top: 50%;
   transform: translateY(-50%);
-  color: var(--navds-global-color-gray-900);
+  color: var(--ac-date-input-button-text, var(--a-text-default));
 }
 
 .navds-form-field--small .navds-date__field-button {
-  right: var(--navds-spacing-2);
+  right: var(--a-spacing-2);
   height: 1.5rem;
   width: 1.5rem;
 }
 
 .navds-form-field--small .navds-date__field-button svg {
-  font-size: var(--navds-font-size-medium);
+  font-size: var(--a-font-size-medium);
 }
 
 .navds-form-field--disabled .navds-date__field-button {

@navikt/core/css/form/confirmation-panel.css

@@ -1,21 +1,11 @@
-:root,
-:host {
-  --navds-confirmation-panel-color-background: var(--navds-global-color-orange-50);
-  --navds-confirmation-panel-color-background-checked: var(--navds-global-color-green-50);
-  --navds-confirmation-panel-color-background-error: var(--navds-global-color-red-50);
-  --navds-confirmation-panel-color-border: var(--navds-semantic-color-feedback-warning-border);
-  --navds-confirmation-panel-color-border-checked: var(--navds-semantic-color-feedback-success-border);
-  --navds-confirmation-panel-color-border-error: var(--navds-semantic-color-feedback-danger-border);
-}
-
 .navds-confirmation-panel__inner {
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-3);
-  padding: var(--navds-spacing-4);
-  border-radius: var(--navds-border-radius-medium);
-  border: 1px solid var(--navds-confirmation-panel-color-border);
-  background-color: var(--navds-confirmation-panel-color-background);
+  gap: var(--a-spacing-3);
+  padding: var(--a-spacing-4);
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
+  background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
   transition: background-color linear 100ms;
   justify-self: stretch;
 }
@@ -25,11 +15,11 @@
 }
 
 .navds-confirmation-panel--checked .navds-confirmation-panel__inner {
-  background-color: var(--navds-confirmation-panel-color-background-checked);
-  border-color: var(--navds-confirmation-panel-color-border-checked);
+  border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
+  background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
 }
 
 .navds-confirmation-panel--error .navds-confirmation-panel__inner {
-  background-color: var(--navds-confirmation-panel-color-background-error);
-  border-color: var(--navds-confirmation-panel-color-border-error);
+  border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
+  background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
 }

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

@@ -1,39 +1,33 @@
-:root,
-:host {
-  --navds-error-summary-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-error-summary-color-border: var(--navds-semantic-color-feedback-danger-border);
-}
-
 .navds-error-summary {
-  background-color: var(--navds-error-summary-color-background);
-  padding: var(--navds-spacing-5);
-  border: 4px solid var(--navds-error-summary-color-border);
+  background-color: var(--ac-error-summary-bg, var(--a-surface-default));
+  padding: var(--a-spacing-5);
+  border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
 }
 
 .navds-error-summary--small {
-  padding: var(--navds-spacing-3);
+  padding: var(--a-spacing-3);
 }
 
 .navds-error-summary:focus {
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
 .navds-error-summary__list {
-  margin: var(--navds-spacing-3) 0;
+  margin: var(--a-spacing-3) 0;
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-3);
-  padding-left: var(--navds-spacing-6);
+  gap: var(--a-spacing-3);
+  padding-left: var(--a-spacing-6);
   list-style: inherit;
 }
 
 .navds-error-summary__list > * {
-  color: var(--navds-global-color-blue-500);
+  color: var(--a-blue-500);
 }
 
 .navds-error-summary--small > .navds-error-summary__list {
-  margin: var(--navds-spacing-2) 0;
-  gap: var(--navds-spacing-2);
-  padding-left: var(--navds-spacing-5);
+  margin: var(--a-spacing-2) 0;
+  gap: var(--a-spacing-2);
+  padding-left: var(--a-spacing-5);
 }

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

@@ -6,11 +6,11 @@
 }
 
 .navds-fieldset > :not(:first-child):not(:empty) {
-  margin-top: var(--navds-spacing-2);
+  margin-top: var(--a-spacing-2);
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
-  margin-top: var(--navds-spacing-1);
+  margin-top: var(--a-spacing-1);
 }
 
 /* Applied when hideLegend is applied to fieldset */

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

@@ -1,7 +1,7 @@
 .navds-form-field {
   display: grid;
   justify-items: start;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-form-field__description {
@@ -11,7 +11,7 @@
 .navds-form-field .navds-error-message,
 .navds-fieldset .navds-error-message {
   display: flex;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-form-field .navds-error-message::before,

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

@@ -1,16 +1,3 @@
-:root,
-:host {
-  --navds-radio-checkbox-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
-  --navds-radio-checkbox-color-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-radio-checkbox-color-background-checked: var(--navds-semantic-color-interaction-primary);
-  --navds-radio-checkbox-color-shadow: var(--navds-semantic-color-border);
-  --navds-radio-checkbox-color-shadow-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-radio-checkbox-color-shadow-checked: var(--navds-semantic-color-interaction-primary);
-  --navds-radio-checkbox-color-shadow-error: var(--navds-semantic-color-interaction-danger);
-  --navds-radio-checkbox-color-label-hover: var(--navds-semantic-color-interaction-primary);
-}
-
 .navds-checkbox,
 .navds-radio {
   position: relative;
@@ -31,32 +18,32 @@
 
 .navds-checkbox__label,
 .navds-radio__label {
-  padding: var(--navds-spacing-3) 0;
+  padding: var(--a-spacing-3) 0;
   cursor: pointer;
   display: flex;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-checkbox__label::before,
 .navds-radio__label::before {
   content: "";
-  background-color: var(--navds-radio-checkbox-color-background);
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
+  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong));
   width: 1.5rem;
   height: 1.5rem;
-  border-radius: var(--navds-border-radius-medium);
+  border-radius: var(--a-border-radius-medium);
   flex-shrink: 0;
 }
 
 .navds-radio__label::before {
-  border-radius: var(--navds-border-radius-full);
+  border-radius: var(--a-border-radius-full);
 }
 
 .navds-checkbox__content,
 .navds-radio__content {
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-1);
+  gap: var(--a-spacing-1);
 }
 
 .navds-checkbox--small > .navds-checkbox__input,
@@ -80,17 +67,17 @@
 
 .navds-checkbox__input:focus + .navds-checkbox__label::before,
 .navds-radio__input:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong)), var(--a-shadow-focus);
 }
 
 .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
 }
 
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
   box-shadow: none;
-  background-color: var(--navds-radio-checkbox-color-background-checked);
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
@@ -98,7 +85,7 @@
   position: absolute;
   top: 50%;
   transform: translate(0.375rem, -50%);
-  background-color: var(--navds-radio-checkbox-color-background);
+  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
   width: 0.75rem;
   height: 0.25rem;
   border-radius: 1px; /* Custom value OK */
@@ -115,7 +102,7 @@
   background-repeat: no-repeat;
   background-size: 13px;
   box-shadow: none;
-  background-color: var(--navds-radio-checkbox-color-background-checked);
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
@@ -124,31 +111,33 @@
 
 .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
 .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked), inset 0 0 0 4px #fff;
-  background-color: var(--navds-radio-checkbox-color-background-checked);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-radio__input:checked:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked), inset 0 0 0 4px #fff, var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--navds-radio-checkbox-color-label-hover);
+  color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
-  background-color: var(--navds-radio-checkbox-color-background-hover);
+  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
 }
 
 .navds-checkbox--error
@@ -157,7 +146,7 @@
 .navds-radio--error
   > .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
@@ -166,7 +155,27 @@
 .navds-radio--error
   > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 .navds-checkbox--disabled,

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

@@ -1,19 +1,9 @@
-:root,
-:host,
-[data-theme="light"] {
-  --navds-search-color-text: var(--navds-semantic-color-text);
-  --navds-search-color-border: var(--navds-semantic-color-border);
-  --navds-search-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-search-color-clear-hover: var(--navds-global-color-blue-500);
-  --navds-search-color-border-error: var(--navds-global-color-red-500);
-}
-
 [data-theme="dark"] {
-  --navds-search-color-text: var(--navds-semantic-color-text-inverted);
-  --navds-search-color-border: var(--navds-semantic-color-border-inverted);
-  --navds-search-color-border-hover: var(--navds-global-color-blue-200);
-  --navds-search-color-clear-hover: var(--navds-global-color-blue-200);
-  --navds-search-color-border-error: var(--navds-global-color-red-300);
+  --ac-search-button-border: var(--a-border-on-inverted);
+  --ac-search-button-border-hover: var(--a-blue-200);
+  --ac-search-clear-icon: var(--a-white);
+  --ac-search-clear-icon-hover: var(--a-blue-200);
+  --ac-search-error-border: var(--a-red-300);
 }
 
 .navds-search {
@@ -33,19 +23,19 @@
 }
 
 .navds-search__input {
-  padding-right: var(--navds-spacing-10);
+  padding-right: var(--a-spacing-10);
 }
 
 .navds-form-field--small .navds-search__input {
-  padding-right: var(--navds-spacing-8);
+  padding-right: var(--a-spacing-8);
 }
 
 .navds-search__input--simple {
-  padding-left: var(--navds-spacing-11);
+  padding-left: var(--a-spacing-11);
 }
 
 .navds-form-field--small .navds-search__input--simple {
-  padding-left: var(--navds-spacing-7);
+  padding-left: var(--a-spacing-7);
 }
 
 .navds-search__input:not(.navds-search__input--simple) {
@@ -55,7 +45,7 @@
 
 .navds-search__search-icon {
   position: absolute;
-  left: var(--navds-spacing-3);
+  left: var(--a-spacing-3);
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
@@ -63,15 +53,15 @@
 }
 
 .navds-form-field--small .navds-search__search-icon {
-  left: var(--navds-spacing-2);
+  left: var(--a-spacing-2);
   font-size: 1rem;
 }
 
 .navds-search__button-clear {
   position: absolute;
   right: 0.75rem;
-  border-radius: var(--navds-border-radius-medium);
-  color: var(--navds-search-color-text);
+  border-radius: var(--a-border-radius-medium);
+  color: var(--ac-search-clear-icon, var(--a-text-default));
   height: 32px;
   width: 32px;
   top: 50%;
@@ -93,11 +83,11 @@
 }
 
 .navds-search__button-clear:hover {
-  color: var(--navds-search-color-clear-hover);
+  color: var(--ac-search-clear-icon-hover, var(--a-text-action));
 }
 
 .navds-search__button-clear:focus {
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
@@ -106,8 +96,8 @@
   min-width: 64px;
   min-height: 32px;
   border-radius: 0;
-  border-top-right-radius: var(--navds-border-radius-medium);
-  border-bottom-right-radius: var(--navds-border-radius-medium);
+  border-top-right-radius: var(--a-border-radius-medium);
+  border-bottom-right-radius: var(--a-border-radius-medium);
 }
 
 .navds-form-field--small .navds-search__button-search svg {
@@ -119,13 +109,16 @@
 }
 
 .navds-search__button-search.navds-button--secondary {
-  box-shadow: -1px 0 0 0 var(--navds-search-color-border) inset, 0 1px 0 0 var(--navds-search-color-border) inset,
-    0 -1px 0 0 var(--navds-search-color-border) inset;
+  box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
+    0 1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
+    0 -1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset;
 }
 
 .navds-search__button-search.navds-button--secondary:hover {
-  box-shadow: -1px 0 0 0 var(--navds-search-color-border-hover) inset, 0 1px 0 0 var(--navds-search-color-border-hover) inset,
-    0 -1px 0 0 var(--navds-search-color-border-hover) inset, -1px 0 0 0 var(--navds-search-color-border-hover);
+  box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
+    0 1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
+    0 -1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action));
   z-index: 1;
 }
 
@@ -134,25 +127,25 @@
 }
 
 .navds-search__button-search.navds-button--secondary:focus {
-  box-shadow: 0 0 0 1px var(--navds-search-color-border) inset, var(--navds-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
 }
 
 .navds-search__button-search.navds-button--secondary:focus:hover {
-  box-shadow: 0 0 0 1px var(--navds-search-color-border-hover) inset, var(--navds-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
 }
 
 .navds-search__button-search.navds-button--secondary:focus:active {
-  box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
 }
 
 /* Error-handling */
 .navds-search--error .navds-search__input:not(:hover):not(:disabled) {
-  border-color: var(--navds-search-color-border-error);
-  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error);
+  border-color: var(--ac-search-error-border, var(--a-border-danger));
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
 }
 
 .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 /* Focus layering */

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

@@ -1,19 +1,8 @@
-:root,
-:host {
-  --navds-select-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-select-color-border: var(--navds-semantic-color-border);
-  --navds-select-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-select-color-border-error: var(--navds-semantic-color-interaction-danger);
-  --navds-select-color-shadow-error: var(--navds-semantic-color-interaction-danger);
-  --navds-select-color-border-disabled: var(--navds-global-color-gray-400);
-  --navds-select-color-background-disabled: var(--navds-semantic-color-component-background-alternate);
-}
-
 .navds-select__input {
   appearance: none;
-  background-color: var(--navds-select-color-background);
-  border-radius: var(--navds-border-radius-medium);
-  border: 1px solid var(--navds-select-color-border);
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-select-border, var(--a-border-strong));
   width: 100%;
   box-sizing: border-box;
   min-height: 48px;
@@ -24,12 +13,12 @@
 }
 
 .navds-select__input:hover {
-  border-color: var(--navds-select-color-border-hover);
+  border-color: var(--ac-select-hover-bg, var(--a-border-action));
 }
 
 .navds-select__input:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-select__container {
@@ -37,7 +26,7 @@
   display: flex;
   width: 100%;
   align-items: center;
-  color: var(--navds-semantic-color-text);
+  color: var(--a-text-default);
 }
 
 .navds-select__chevron {
@@ -57,13 +46,13 @@
   Error handling
 */
 .navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-select-color-shadow-error);
-  border-color: var(--navds-select-color-border-error);
+  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
+  border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }
 
 .navds-select__input:disabled {
-  background-color: var(--navds-select-color-background);
-  border-color: var(--navds-select-color-border);
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border: 1px solid var(--ac-select-border, var(--a-border-strong));
   box-shadow: none;
   cursor: not-allowed;
 }

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

@@ -1,18 +1,3 @@
-:root,
-:host {
-  --navds-switch-color-label: var(--navds-semantic-color-text);
-  --navds-switch-color-label-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
-  --navds-switch-color-track-background-checked: var(--navds-semantic-color-feedback-success-border);
-  --navds-switch-color-track-background-hover: var(--navds-global-color-gray-800);
-  --navds-switch-color-track-background-hover-checked: var(--navds-semantic-color-feedback-success-icon);
-  --navds-switch-color-track-shadow-inner-focus: var(--navds-semantic-color-component-background-light);
-  --navds-switch-color-thumb: var(--navds-semantic-color-component-background-light);
-  --navds-switch-color-thumb-icon: var(--navds-semantic-color-text-muted);
-  --navds-switch-color-thumb-icon-checked: var(--navds-semantic-color-feedback-success-border);
-  --navds-switch-color-thumb-loader-checked: var(--navds-semantic-color-feedback-success-border);
-}
-
 .navds-switch {
   position: relative;
   min-height: 48px;
@@ -47,13 +32,13 @@
 /* Label */
 .navds-switch__label-wrapper {
   cursor: pointer;
-  color: var(--navds-switch-color-label);
+  color: var(--a-text-default);
 }
 
 .navds-switch__content {
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-1);
+  gap: var(--a-spacing-1);
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 
@@ -62,11 +47,11 @@
 }
 
 .navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--navds-spacing-2) - 2px) 0 calc(var(--navds-spacing-2) - 2px) 3.25rem;
+  padding: calc(var(--a-spacing-2) - 2px) 0 calc(var(--a-spacing-2) - 2px) 3.25rem;
 }
 
 .navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--navds-spacing-2) - 2px) 3.25rem calc(var(--navds-spacing-2) - 2px) 0;
+  padding: calc(var(--a-spacing-2) - 2px) 3.25rem calc(var(--a-spacing-2) - 2px) 0;
 }
 
 .navds-switch--with-description,
@@ -76,7 +61,7 @@
 
 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--navds-switch-color-label-hover);
+  color: var(--ac-switch-action, var(--a-surface-action));
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -87,16 +72,16 @@
 .navds-switch__track {
   width: 44px;
   height: 24px;
-  background-color: var(--navds-switch-color-track-background);
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
   position: absolute;
-  top: var(--navds-spacing-3);
+  top: var(--a-spacing-3);
   left: 0;
-  border-radius: var(--navds-border-radius-medium);
+  border-radius: var(--a-border-radius-medium);
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .navds-switch--small > .navds-switch__track {
-  top: var(--navds-spacing-1);
+  top: var(--a-spacing-1);
 }
 
 .navds-switch--right > .navds-switch__input,
@@ -106,34 +91,34 @@
 }
 
 .navds-switch__input:checked ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-checked);
+  background-color: var(--ac-switch-checked-bg, var(--a-surface-success));
 }
 
 .navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-hover);
+  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
 }
 
 .navds-switch__input:hover:checked ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-hover-checked);
+  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-success-hover));
 }
 
 .navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background);
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
 }
 
 .navds-switch__input:checked:disabled ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-checked);
+  background-color: var(--ac-switch-checked-bg, var(--a-border-success));
 }
 
 .navds-switch__input:focus ~ .navds-switch__track {
-  box-shadow: 0 0 0 1px var(--navds-switch-color-track-shadow-inner-focus), var(--navds-shadow-focus);
+  box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
 /* Thumb */
 .navds-switch__thumb {
-  background-color: var(--navds-switch-color-thumb);
-  color: var(--navds-switch-color-thumb-icon);
-  border-radius: var(--navds-border-radius-small);
+  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
+  color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
+  border-radius: var(--a-border-radius-small);
   width: 20px;
   height: 20px;
   position: absolute;
@@ -148,7 +133,7 @@
 
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(20px);
-  color: var(--navds-switch-color-thumb-icon-checked);
+  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -171,7 +156,7 @@
 
 /* Loader */
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb .navds-loader__foreground {
-  stroke: var(--navds-switch-color-thumb-loader-checked);
+  stroke: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
 }
 
 /* Disabled */

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

@@ -1,35 +1,21 @@
-:root,
-:host,
-[data-theme="light"] {
-  --navds-text-field-color-text: var(--navds-semantic-color-text);
-  --navds-text-field-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-text-field-color-border: var(--navds-semantic-color-border);
-  --navds-text-field-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-text-field-color-border-error: var(--navds-semantic-color-interaction-danger);
-  --navds-text-field-color-shadow-error: var(--navds-semantic-color-interaction-danger);
-  --navds-text-field-color-border-disabled: var(--navds-global-color-gray-400);
-  --navds-text-field-color-background-disabled: var(--navds-semantic-color-component-background-alternate);
-  --navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
-  --navds-text-field-color-placeholder-text: var(--navds-semantic-color-text-muted);
-}
-
 [data-theme="dark"] {
-  --navds-text-field-color-text: var(--navds-semantic-color-text-inverted);
-  --navds-text-field-color-background: var(--navds-semantic-color-component-background-inverted);
-  --navds-text-field-color-border: var(--navds-semantic-color-border-inverted);
-  --navds-text-field-color-border-hover: var(--navds-global-color-blue-200);
-  --navds-text-field-color-placeholder-text: var(--navds-global-color-gray-500);
+  --ac-textfield-text: var(--a-text-on-inverted);
+  --ac-textfield-bg: var(--a-surface-inverted);
+  --ac-textfield-border: var(--a-border-on-inverted);
+  --ac-textfield-hover-border: var(--a-blue-200);
+  --ac-textfield-placeholder: var(--a-gray-500);
+  --ac-textfield-error-border: var(--a-red-300);
 }
 
 .navds-text-field__input {
   appearance: none;
-  padding: var(--navds-spacing-2);
-  background-color: var(--navds-text-field-color-background);
-  border-radius: var(--navds-border-radius-medium);
-  border: 1px solid var(--navds-text-field-color-border);
+  padding: var(--a-spacing-2);
+  background-color: var(--ac-textfield-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-textfield-border, var(--a-border-default));
   min-height: 48px;
   width: 100%;
-  color: var(--navds-text-field-color-text);
+  color: var(--ac-textfield-text, var(--a-text-default));
 }
 
 .navds-text-field__input[size] {
@@ -37,7 +23,7 @@
 }
 
 .navds-text-field__input::placeholder {
-  color: var(--navds-text-field-color-placeholder-text);
+  color: var(--ac-textfield-placeholder, var(--a-text-subtle));
 }
 
 .navds-form-field--small .navds-text-field__input {
@@ -46,37 +32,37 @@
 }
 
 .navds-text-field__input:hover {
-  border-color: var(--navds-text-field-color-border-hover);
+  border-color: var(--ac-textfield-hover-border, var(--a-border-action));
 }
 
 .navds-text-field__input:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 /**
   Error handling
 */
 .navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
-  border-color: var(--navds-text-field-color-border-error);
-  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error);
+  border-color: var(--ac-textfield-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
 }
 
 .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error), var(--navds-shadow-focus);
+  box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
 }
 
 /* Disabled handling */
 .navds-text-field__input:disabled {
-  background-color: var(--navds-text-field-color-background);
-  border-color: var(--navds-text-field-color-border);
+  background-color: var(--ac-textfield-bg, var(--a-surface-default));
+  border-color: var(--ac-textfield-border, var(--a-border-default));
   box-shadow: none;
   cursor: not-allowed;
 }
 
 .navds-text-field__input[readonly] {
-  background-color: var(--navds-text-field-color-background);
-  border-color: var(--navds-text-field-color-border);
+  background-color: var(--ac-textfield-bg, var(--a-surface-default));
+  border-color: var(--ac-textfield-border, var(--a-border-default));
   box-shadow: none;
   cursor: not-allowed;
 }

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

@@ -1,15 +1,12 @@
-:root,
-:host {
-  --navds-textarea-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-textarea-color-border: var(--navds-semantic-color-border);
-  --navds-textarea-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-textarea-color-border-error: var(--navds-semantic-color-interaction-danger);
-  --navds-textarea-color-shadow-error: var(--navds-semantic-color-interaction-danger);
-  --navds-textarea-color-counter-text: var(--navds-semantic-color-text-muted);
-  --navds-textarea-color-counter-text-error: var(--navds-semantic-color-interaction-danger);
-  --navds-textarea-color-text-disabled: var(--navds-semantic-color-text);
-  --navds-textarea-color-border-disabled: var(--navds-global-color-gray-400);
-  --navds-textarea-color-background-disabled: var(--navds-semantic-color-component-background-alternate);
+[data-theme="dark"] {
+  --ac-textarea-text: var(--a-text-on-inverted);
+  --ac-textarea-bg: var(--a-transparent);
+  --ac-textarea-border: var(--a-border-on-inverted);
+  --ac-textarea-hover-border: var(--a-blue-200);
+  --ac-textarea-placeholder: var(--a-gray-500);
+  --ac-textarea-error-border: var(--a-red-300);
+  --ac-textarea-counter-text: var(--a-gray-300);
+  --ac-textarea-counter-error-text: var(--a-red-300);
 }
 
 .navds-textarea__wrapper {
@@ -19,27 +16,31 @@
 
 .navds-textarea__input {
   appearance: none;
-  padding: var(--navds-spacing-2);
-  background-color: var(--navds-textarea-color-background);
-  border-radius: var(--navds-border-radius-medium);
-  border: 1px solid var(--navds-textarea-color-border);
+  padding: var(--a-spacing-2);
+  background-color: var(--ac-textarea-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-textarea-border, var(--a-border-default));
   resize: none;
   width: 100%;
   display: block;
-  color: var(--navds-text-field-color-text);
+  color: var(--ac-textarea-text, var(--a-text-default));
 }
 
 .navds-textarea--counter {
-  padding-bottom: var(--navds-spacing-8);
+  padding-bottom: var(--a-spacing-8);
+}
+
+.navds-textarea__input::placeholder {
+  color: var(--ac-textarea-placeholder, var(--a-text-subtle));
 }
 
 .navds-textarea__input:hover {
-  border-color: var(--navds-textarea-color-border-hover);
+  border-color: var(--ac-textarea-hover-border, var(--a-border-action));
 }
 
 .navds-textarea__input:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-form-field--small .navds-textarea__input {
@@ -47,22 +48,22 @@
 }
 
 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
-  padding-bottom: var(--navds-spacing-7);
+  padding-bottom: var(--a-spacing-7);
 }
 
 .navds-textarea__counter {
   pointer-events: none;
-  color: var(--navds-textarea-color-counter-text);
+  color: var(--ac-textarea-counter-text, var(--a-text-subtle));
   font-style: italic;
   position: absolute;
   text-align: left;
   left: 1px;
   bottom: 1px;
-  padding: var(--navds-spacing-1) var(--navds-spacing-2);
+  padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 
 .navds-textarea__counter--error {
-  color: var(--navds-textarea-color-counter-text-error);
+  color: var(--ac-textarea-counter-error-text, var(--a-surface-danger));
 }
 
 .navds-textarea--resize .navds-textarea__input {
@@ -73,20 +74,20 @@
   Error handling
 */
 .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-textarea-color-shadow-error);
-  border-color: var(--navds-textarea-color-border-error);
+  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
+  border-color: var(--ac-textarea-error-border, var(--a-border-danger));
 }
 
 .navds-textarea__input:disabled {
-  background-color: var(--navds-textarea-color-background);
-  border-color: var(--navds-textarea-color-border);
+  background-color: var(--ac-textarea-bg, var(--a-surface-default));
+  border-color: var(--ac-textarea-border, var(--a-border-default));
   box-shadow: none;
   cursor: not-allowed;
 }
 
 .navds-textarea__input[readonly] {
-  background-color: var(--navds-textarea-color-background);
-  border-color: var(--navds-textarea-color-border);
+  background-color: var(--ac-textarea-bg, var(--a-surface-default));
+  border-color: var(--ac-textarea-border, var(--a-border-default));
   box-shadow: none;
   cursor: not-allowed;
 }

@navikt/core/css/grid.css

@@ -5,12 +5,12 @@
 .navds-grid {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--navds-spacing-4);
+  grid-gap: var(--a-spacing-4);
 }
 
 @media (min-width: 448px) {
   .navds-grid {
-    grid-gap: var(--navds-spacing-6);
+    grid-gap: var(--a-spacing-6);
   }
 }
 

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

@@ -1,41 +1,35 @@
-:root,
-:host {
-  --navds-guide-panel-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-guide-panel-color-border: var(--navds-global-color-blue-400);
-  --navds-guide-panel-color-illustration-background: var(--navds-global-color-blue-200);
-}
-
 /**
  * GuidePanel component
  */
 .navds-guide-panel {
   position: relative;
-  padding-left: var(--navds-spacing-10);
+  padding-left: var(--a-spacing-10);
 }
 
 .navds-guide-panel__content {
-  background-color: var(--navds-guide-panel-color-background);
-  border-radius: var(--navds-border-radius-medium);
-  border: 2px solid var(--navds-guide-panel-color-border);
+  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
   min-height: 7.25rem;
-  padding: var(--navds-spacing-6);
-  padding-left: var(--navds-spacing-14);
+  padding: var(--a-spacing-6);
+  padding-left: var(--a-spacing-14);
 }
 
 .navds-guide-panel--poster {
   padding-left: 0;
-  padding-top: var(--navds-spacing-12);
+  padding-top: var(--a-spacing-12);
 }
 
 .navds-guide-panel--poster .navds-guide-panel__content {
-  padding: var(--navds-spacing-8);
-  padding-top: var(--navds-spacing-16);
+  padding: var(--a-spacing-8);
+  padding-top: var(--a-spacing-16);
 }
 
 .navds-guide-panel .navds-guide {
   position: absolute;
-  top: var(--navds-spacing-4);
+  top: var(--a-spacing-4);
   transform: translateX(-50%);
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
 }
 
 .navds-guide-panel--poster .navds-guide {
@@ -50,12 +44,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: var(--a-border-radius-full);
 }
 
 /* Guide illustration frame */
 .navds-guide__illustration {
-  background: var(--navds-guide-panel-color-illustration-background);
-  border-radius: var(--navds-border-radius-full);
+  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
+  border-radius: var(--a-border-radius-full);
   overflow: hidden;
 }
 

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

@@ -1,46 +1,35 @@
-:root,
-:host {
-  --navds-help-text-color: var(--navds-semantic-color-interaction-primary);
-  --navds-help-text-color-hover: var(--navds-semantic-color-component-background-light);
-  --navds-help-text-color-focus: var(--navds-semantic-color-component-background-light);
-  --navds-help-text-color-background-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-help-text-color-background-focus: var(--navds-semantic-color-interaction-primary);
-  --navds-help-text-color-shadow-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-help-text-color-popover-background: var(--navds-semantic-color-feedback-info-background);
-}
-
 .navds-help-text__button {
   margin: 0;
   padding: 0;
   border: 0;
   cursor: pointer;
   background-color: transparent;
-  border-radius: var(--navds-border-radius-full);
+  border-radius: var(--a-border-radius-full);
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--navds-help-text-color);
+  color: var(--ac-help-text-button-color, var(--a-surface-action));
   font-size: 1.5rem;
 }
 
 .navds-help-text__button:focus {
   outline: none;
-  box-shadow: 0 0 0 1px var(--navds-global-color-white), 0 0 0 4px var(--navds-semantic-color-focus);
+  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
 }
 
 .navds-help-text__icon {
-  border-radius: var(--navds-border-radius-full);
+  border-radius: var(--a-border-radius-full);
 }
 
 .navds-help-text__popover > .navds-popover__arrow {
-  background-color: var(--navds-help-text-color-popover-background);
+  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
 }
 
 .navds-help-text__popover.navds-popover {
-  background-color: var(--navds-help-text-color-popover-background);
+  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
   max-width: 65ch;
 
-  --navds-popover-color-border: rgba(38 38 38 / 0.22);
+  --ac-popover-border: var(--a-border-info);
 }
 
 .navds-help-text__icon--filled {

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

@@ -1,31 +1,24 @@
-:root,
-:host {
-  --navds-link-panel-color-text: var(--navds-semantic-color-text);
-  --navds-link-panel-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-link-panel-color-title-hover: var(--navds-semantic-color-link);
-}
-
 .navds-link-panel {
   text-decoration: none;
-  color: var(--navds-link-panel-color-text);
+  color: var(--ac-link-panel-text, var(--a-text-default));
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--navds-spacing-4);
+  gap: var(--a-spacing-4);
 }
 
 .navds-link-panel:hover .navds-link-panel__title {
   text-decoration: underline;
-  color: var(--navds-link-panel-color-title-hover);
+  color: var(--ac-link-panel-hover-text, var(--a-text-action));
 }
 
 .navds-link-panel:hover {
-  box-shadow: var(--navds-shadow-medium);
-  border-color: var(--navds-link-panel-color-border-hover);
+  box-shadow: var(--a-shadow-medium);
+  border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
 }
 
 .navds-link-panel:focus {
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
@@ -41,5 +34,5 @@
 }
 
 .navds-link-panel__description {
-  margin-top: var(--navds-spacing-1);
+  margin-top: var(--a-spacing-1);
 }

@navikt/core/css/link.css

@@ -1,31 +1,18 @@
-:root,
-:host {
-  --navds-link-color-text: var(--navds-semantic-color-link);
-  --navds-link-color-text-focus: var(--navds-semantic-color-text-inverted);
-  --navds-link-color-text-active: var(--navds-semantic-color-text-inverted);
-  --navds-link-color-background-focus: var(--navds-semantic-color-focus);
-  --navds-link-color-background-active: var(--navds-semantic-color-focus);
-  --navds-link-color-icon: var(--navds-semantic-color-link);
-  --navds-link-color-icon-focus: var(--navds-semantic-color-text-inverted);
-  --navds-link-color-on-info-background: var(--navds-semantic-color-text);
-  --navds-link-color-on-error-background: var(--navds-semantic-color-text);
-}
-
 .navds-link {
-  color: var(--navds-link-color-text);
+  color: var(--ac-link-text, var(--a-text-action));
   text-decoration: underline;
   display: inline-flex;
   align-items: center;
-  gap: var(--navds-spacing-1);
+  gap: var(--a-spacing-1);
 }
 
 .navds-alert--info .navds-link {
-  color: var(--navds-link-color-on-info-background);
+  color: var(--a-text-default);
 }
 
 .navds-alert--error .navds-link,
 .navds-confirmation-panel--error .navds-link {
-  color: var(--navds-link-color-on-error-background);
+  color: var(--a-text-default);
 }
 
 .navds-link:hover {
@@ -34,18 +21,18 @@
 
 .navds-link:focus {
   outline: none;
-  color: var(--navds-link-color-text-focus);
+  color: var(--ac-link-focus-text, var(--a-text-on-action));
   text-decoration: none;
-  background-color: var(--navds-link-color-background-focus);
-  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
+  background-color: var(--ac-link-focus-bg, var(--a-border-focus));
+  box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
 }
 
 .navds-link:active {
   outline: none;
-  color: var(--navds-link-color-text-active);
+  color: var(--ac-link-active-text, var(--a-text-on-action));
   text-decoration: none;
-  background-color: var(--navds-link-color-background-active);
-  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
+  background-color: var(--ac-link-active-bg, var(--a-border-focus));
+  box-shadow: 0 0 0 2px var(--ac-link-active-border, var(--a-border-focus));
 }
 
 .navds-link svg {

@navikt/core/css/loader.css

@@ -1,14 +1,3 @@
-:root,
-:host {
-  --navds-loader-color-foreground: var(--navds-global-color-gray-400);
-  --navds-loader-color-background: rgb(0 0 0 / 0.05);
-  --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
-  --navds-loader-color-interaction-foreground: var(--navds-global-color-blue-500);
-  --navds-loader-color-inverted-foreground: var(--navds-global-color-white);
-  --navds-loader-color-inverted-background: rgb(255 255 255 / 0.25);
-  --navds-loader-color-transparent-background: transparent;
-}
-
 .navds-loader {
   width: 1.5rem;
   display: inline-block;
@@ -16,88 +5,88 @@
   animation: loader-rotate 1.8s linear infinite;
   stroke-width: 6;
 
-  --navds-loader-background-stroke-width: 5.9;
+  --ac-loader-background-stroke-width: 5.9;
 }
 
 .navds-loader__foreground {
   animation: loader-dasharray 1.8s ease-in-out infinite;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
-  stroke: var(--navds-loader-color-foreground);
+  stroke: var(--ac-loader-stroke, var(--a-border-default));
 }
 
 .navds-loader__background {
-  stroke: var(--navds-loader-color-background);
-  stroke-width: var(--navds-loader-background-stroke-width);
+  stroke: var(--ac-loader-stroke-bg, var(--a-surface-active));
+  stroke-width: var(--ac-loader-background-stroke-width);
 }
 
 .navds-loader--neutral .navds-loader__foreground {
-  stroke: var(--navds-loader-color-neutral-foreground);
+  stroke: var(--ac-loader-neutral-stroke, var(--a-border-default));
 }
 
 .navds-loader--interaction .navds-loader__foreground {
-  stroke: var(--navds-loader-color-interaction-foreground);
+  stroke: var(--ac-loader-interaction-stroke, var(--a-border-action));
 }
 
 .navds-loader--inverted .navds-loader__foreground {
-  stroke: var(--navds-loader-color-inverted-foreground);
+  stroke: var(--ac-loader-inverted-stroke, var(--a-border-on-inverted));
 }
 
 .navds-loader--inverted .navds-loader__background {
-  stroke: var(--navds-loader-color-inverted-background);
+  stroke: var(--ac-loader-inverted-stroke-bg, var(--a-border-on-inverted-subtle));
 }
 
 .navds-loader--transparent .navds-loader__background {
-  stroke: var(--navds-loader-color-transparent-background);
+  stroke: var(--a-surface-transparent);
 }
 
 .navds-loader--3xlarge {
   width: 5.5rem;
   stroke-width: 5;
 
-  --navds-loader-background-stroke-width: 4.8;
+  --ac-loader-background-stroke-width: 4.8;
 }
 
 .navds-loader--2xlarge {
   width: 4rem;
   stroke-width: 6;
 
-  --navds-loader-background-stroke-width: 5.8;
+  --ac-loader-background-stroke-width: 5.8;
 }
 
 .navds-loader--xlarge {
   width: 2.5rem;
   stroke-width: 6;
 
-  --navds-loader-background-stroke-width: 5.8;
+  --ac-loader-background-stroke-width: 5.8;
 }
 
 .navds-loader--large {
   width: 2rem;
   stroke-width: 7;
 
-  --navds-loader-background-stroke-width: 6.8;
+  --ac-loader-background-stroke-width: 6.8;
 }
 
 .navds-loader--medium {
   width: 1.5rem;
   stroke-width: 7;
 
-  --navds-loader-background-stroke-width: 6.8;
+  --ac-loader-background-stroke-width: 6.8;
 }
 
 .navds-loader--small {
   width: 1.25rem;
   stroke-width: 8;
 
-  --navds-loader-background-stroke-width: 7.8;
+  --ac-loader-background-stroke-width: 7.8;
 }
 
 .navds-loader--xsmall {
   width: 1rem;
   stroke-width: 8;
 
-  --navds-loader-background-stroke-width: 7.8;
+  --ac-loader-background-stroke-width: 7.8;
 }
 
 @keyframes loader-rotate {

@navikt/core/css/modal.css

@@ -1,16 +1,10 @@
-:root,
-:host {
-  --navds-modal-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-modal-color-overlay: rgb(38 38 38 / 0.7);
-}
-
 .ReactModal__Body--open {
   overflow: hidden;
 }
 
 .navds-modal {
-  background-color: var(--navds-modal-color-background);
-  border-radius: var(--navds-border-radius-medium);
+  background-color: var(--ac-modal-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
   display: block;
   position: relative;
   overflow: auto;
@@ -18,24 +12,24 @@
 }
 
 .navds-modal__content {
-  padding: var(--navds-spacing-4);
+  padding: var(--a-spacing-4);
 }
 
 .navds-modal:focus,
 .navds-modal--focus {
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
 .navds-modal__overlay {
   position: fixed;
-  z-index: var(--navds-z-index-modal);
+  z-index: var(--a-z-index-modal);
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: var(--navds-modal-color-overlay);
-  padding: var(--navds-spacing-4);
+  background-color: var(--ac-modal-backdrop, var(--a-surface-backdrop));
+  padding: var(--a-spacing-4);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,14 +48,13 @@
 
 .navds-modal__button {
   position: absolute;
-  top: var(--navds-spacing-4);
-  right: var(--navds-spacing-4);
+  top: var(--a-spacing-4);
+  right: var(--a-spacing-4);
   display: flex;
-  padding: var(--navds-spacing-2);
+  padding: var(--a-spacing-2);
 }
 
 .navds-modal__button svg {
-  /* 24x24px */
   height: 1.5rem;
   width: 1.5rem;
 }

@navikt/core/css/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@navikt/ds-css",
-  "version": "1.5.4",
-  "description": "Css for NAV Designsystem components",
-  "author": "NAV Designsystem team",
+  "version": "2.0.7",
+  "description": "CSS for NAV Designsystem",
+  "author": "Aksel | NAV designsystem team",
   "keywords": [
     "css"
   ],
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^1.5.4",
+    "@navikt/ds-tokens": "^2.0.7",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/css/pagination.css

@@ -1,54 +1,48 @@
-:root,
-:host {
-  --navds-pagination-color-background-selected: var(--navds-semantic-color-interaction-primary-selected);
-  --navds-pagination-color-text-selected: var(--navds-semantic-color-text-inverted);
-}
-
 .navds-pagination__list {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
-  gap: var(--navds-spacing-3);
+  gap: var(--a-spacing-3);
 }
 
 .navds-pagination__ellipsis {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--navds-spacing-12);
+  width: var(--a-spacing-12);
   cursor: default;
 }
 
 .navds-pagination--small .navds-pagination__ellipsis {
-  width: var(--navds-spacing-8);
+  width: var(--a-spacing-8);
 }
 
 .navds-pagination--xsmall .navds-pagination__ellipsis {
-  width: var(--navds-spacing-6);
+  width: var(--a-spacing-6);
 }
 
 .navds-pagination__item {
-  color: var(--navds-semantic-color-text);
+  color: var(--ac-pagination-text, var(--a-text-default));
 }
 
 .navds-pagination--medium .navds-pagination__item {
-  border-radius: var(--navds-border-radius-medium);
+  border-radius: var(--a-border-radius-medium);
 }
 
 .navds-pagination__item[aria-current="true"] {
-  background-color: var(--navds-pagination-color-background-selected);
-  color: var(--navds-pagination-color-text-selected);
+  background-color: var(--ac-pagination-selected-bg, var(--a-surface-action-selected));
+  color: var(--ac-pagination-selected-text, var(--a-text-on-action));
 }
 
 .navds-pagination__item[aria-current="true"]:focus {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
 .navds-pagination__prev-next {
   display: flex;
   align-items: center;
-  gap: var(--navds-spacing-1);
+  gap: var(--a-spacing-1);
 }
 
 .navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
@@ -57,8 +51,8 @@
 }
 
 .navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-left: 0.125rem;
-  padding-right: 0.125rem;
+  padding-left: var(--a-spacing-05);
+  padding-right: var(--a-spacing-05);
 }
 
 .navds-pagination--invisible {

@navikt/core/css/panel.css

@@ -1,16 +1,10 @@
-:root,
-:host {
-  --navds-panel-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-panel-color-border: var(--navds-semantic-color-border-muted);
-}
-
 .navds-panel {
-  background-color: var(--navds-panel-color-background);
-  padding: var(--navds-spacing-4);
-  border-radius: var(--navds-border-radius-small);
+  background-color: var(--ac-panel-bg, var(--a-surface-default));
+  padding: var(--a-spacing-4);
+  border-radius: var(--a-border-radius-small);
   border: 1px solid transparent;
 }
 
 .navds-panel--border {
-  border-color: var(--navds-panel-color-border);
+  border-color: var(--ac-panel-border, var(--a-border-default));
 }

@navikt/core/css/popover.css

@@ -1,20 +1,14 @@
-:root,
-:host {
-  --navds-popover-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-popover-color-border: var(--navds-semantic-color-border-muted);
-}
-
 .navds-popover {
-  z-index: var(--navds-z-index-popover);
-  background-color: var(--navds-popover-color-background);
-  box-shadow: var(--navds-shadow-medium);
+  z-index: var(--a-z-index-popover);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  box-shadow: var(--a-shadow-medium);
   border: 1px solid;
-  border-color: var(--navds-popover-color-border);
-  border-radius: var(--navds-border-radius-medium);
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  border-radius: var(--a-border-radius-medium);
 }
 
 .navds-popover__content {
-  padding: var(--navds-spacing-4);
+  padding: var(--a-spacing-4);
 }
 
 .navds-popover--hidden {
@@ -23,16 +17,16 @@
 
 .navds-popover:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-popover__arrow {
   position: absolute;
   z-index: -1;
   transform: rotate(45deg);
-  background-color: var(--navds-popover-color-background);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
   border: 1px solid;
-  border-color: var(--navds-popover-color-border);
+  border-color: var(--ac-popover-border, var(--a-border-default));
   width: 1rem;
   height: 1rem;
 }

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

@@ -5,33 +5,33 @@
   background: none;
   display: flex;
   align-items: flex-start;
-  gap: 0.125rem;
-  color: var(--navds-semantic-color-link);
-  border-radius: var(--navds-border-radius-small);
-  padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1) 2px;
+  gap: var(--a-spacing-05);
+  color: var(--ac-read-more-text, var(--a-text-action));
+  border-radius: var(--a-border-radius-small);
+  padding: var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-1) 2px;
   text-align: start;
 }
 
 .navds-read-more--small .navds-read-more__button {
-  padding: 2px var(--navds-spacing-1) 2px 2px;
+  padding: 2px var(--a-spacing-1) 2px 2px;
 }
 
 .navds-read-more__button:hover {
-  background-color: rgba(38 38 38 / 0.06);
+  background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
 }
 
 .navds-read-more__button:active {
-  background-color: rgba(38 38 38 / 0.1);
+  background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
 }
 
 .navds-read-more__button:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-read-more__content {
-  margin-top: var(--navds-spacing-1);
-  border-left: 2px solid rgba(38 38 38 / 0.36);
+  margin-top: var(--a-spacing-1);
+  border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
   margin-left: 11px;
   padding-left: 11px;
 }

@navikt/core/css/stepper.css

@@ -3,7 +3,7 @@
   --navds-stepper-border-width: 2px;
   --navds-stepper-line-length: 1rem;
 
-  color: var(--navds-semantic-color-interaction-primary);
+  color: var(--ac-stepper-text, var(--a-surface-action));
   font-weight: 600;
   line-height: 1;
   list-style: none;
@@ -28,7 +28,7 @@
 }
 
 .navds-stepper__line {
-  background-color: var(--navds-semantic-color-border-muted);
+  background-color: var(--ac-stepper-line, var(--a-border-default));
   width: var(--navds-stepper-border-width);
   height: 100%;
   min-height: var(--navds-stepper-line-length);
@@ -37,7 +37,7 @@
 }
 
 .navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
-  background-color: var(--navds-global-color-blue-500);
+  background-color: var(--ac-stepper-line-completed, var(--a-border-selected));
 }
 
 .navds-stepper__line--1 {
@@ -58,7 +58,7 @@
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
   justify-content: flex-start;
   text-decoration: none;
   cursor: pointer;
@@ -76,13 +76,13 @@ button.navds-stepper__step {
 }
 
 .navds-stepper__step--non-interactive {
-  color: var(--navds-global-color-gray-600);
+  color: var(--ac-stepper-non-interactive, var(--a-text-subtle));
   cursor: default;
 }
 
 :where(.navds-stepper__step):focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
   isolation: isolate;
 }
 
@@ -94,7 +94,7 @@ button.navds-stepper__step {
   width: var(--navds-stepper-circle-size);
   height: var(--navds-stepper-circle-size);
   border: var(--navds-stepper-border-width) solid currentColor;
-  border-radius: var(--navds-border-radius-full);
+  border-radius: var(--a-border-radius-full);
   line-height: 1;
 }
 
@@ -168,7 +168,7 @@ button.navds-stepper__step {
 
 /* Active step */
 :where(.navds-stepper__step--active) .navds-stepper__content {
-  color: var(--navds-semantic-color-interaction-primary-selected);
+  color: var(--ac-stepper-active, var(--a-text-action-selected));
 }
 
 :where(.navds-stepper__step:hover) .navds-stepper__content {
@@ -180,28 +180,28 @@ button.navds-stepper__step {
 }
 
 :where(.navds-stepper__step--active) .navds-stepper__circle {
-  background-color: var(--navds-semantic-color-interaction-primary-selected);
-  border-color: var(--navds-semantic-color-interaction-primary-selected);
-  color: var(--navds-semantic-color-text-inverted);
+  background-color: var(--ac-stepper-active-bg, var(--a-surface-action-selected));
+  border-color: var(--ac-stepper-active-border, var(--a-border-action-selected));
+  color: var(--ac-stepper-active-text, var(--a-text-on-action));
 }
 
 :where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle {
-  background-color: var(--navds-semantic-color-interaction-primary-hover-subtle);
+  background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
 /* Non-interactive */
 :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
-  color: var(--navds-global-color-gray-900);
+  color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
 }
 
 .navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
-  background-color: var(--navds-global-color-gray-600);
+  background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong));
 }
 
 :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle {
-  background-color: var(--navds-global-color-gray-900);
-  border-color: var(--navds-global-color-gray-900);
-  color: var(--navds-global-color-white);
+  background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
+  border-color: var(--ac-stepper-non-interactive-active-border, var(--a-surface-inverted));
+  color: var(--ac-stepper-non-interactive-active-text, var(--a-text-on-inverted));
 }
 
 :where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
@@ -209,14 +209,14 @@ button.navds-stepper__step {
 }
 
 :where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle {
-  background-color: var(--navds-global-color-gray-900);
+  background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
 }
 
 :where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle {
   background-color: inherit;
-  color: var(--navds-global-color-deepblue-500);
+  color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
 }
 
 :where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
-  color: var(--navds-global-color-gray-900);
+  color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-default));
 }

@navikt/core/css/table.css

@@ -1,13 +1,3 @@
-:root,
-:host {
-  --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
-  --navds-table-row-color-background-hover: var(--navds-semantic-color-canvas-background);
-  --navds-table-row-color-background-selected: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-table-row-color-background-selected-hover: var(--navds-global-color-blue-100);
-  --navds-table-row-color-background-zebra: var(--navds-semantic-color-component-background-alternate);
-  --navds-table-cell-color-border-hover: var(--navds-semantic-color-border);
-}
-
 .navds-table {
   width: 100%;
   border-collapse: collapse;
@@ -27,19 +17,19 @@
 }
 
 .navds-table__body .navds-table__row--shade-on-hover:hover {
-  background-color: var(--navds-table-row-color-background-hover);
+  background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
 }
 
 .navds-table__row--selected {
-  background-color: var(--navds-table-row-color-background-selected);
+  background-color: var(--ac-table-row-selected, var(--a-surface-action-subtle));
 }
 
 .navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
-  background-color: var(--navds-table-row-color-background-selected-hover);
+  background-color: var(--ac-table-row-selected-hover, var(--a-surface-action-subtle-hover));
 }
 
 .navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
-  background-color: var(--navds-table-row-color-background-zebra);
+  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
 }
 
 .navds-table--zebra-stripes
@@ -49,14 +39,14 @@
 }
 
 .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
-  background-color: var(--navds-table-row-color-background-zebra);
+  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
 }
 
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
-  padding: var(--navds-spacing-4) var(--navds-spacing-3);
-  border-bottom: 1px solid var(--navds-table-cell-color-border);
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
   text-align: left;
 }
 
@@ -77,7 +67,7 @@
 
 :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
 :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
-  border-color: var(--navds-table-cell-color-border-hover);
+  border-color: var(--ac-table-cell-hover-border, var(--a-border-strong));
 }
 
 :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
@@ -86,7 +76,7 @@
 
 .navds-table--small .navds-table__header-cell,
 .navds-table--small .navds-table__data-cell {
-  padding: var(--navds-spacing-2) var(--navds-spacing-3);
+  padding: var(--a-spacing-2) var(--a-spacing-3);
 }
 
 .navds-table .navds-checkbox .navds-checkbox__input {
@@ -108,35 +98,36 @@
 .navds-table__sort-button {
   appearance: none;
   background: none;
-  color: var(--navds-semantic-color-link);
+  color: var(--ac-table-sort-button-text, var(--a-text-action));
   border: none;
   cursor: pointer;
   margin: 0;
-  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  padding: var(--a-spacing-4) var(--a-spacing-3);
   width: 100%;
   display: flex;
-  gap: 0.5rem;
+  gap: var(--a-spacing-2);
   align-items: center;
   line-height: inherit;
   font-weight: inherit;
 }
 
 .navds-table--small .navds-table__sort-button {
-  padding: var(--navds-spacing-2) var(--navds-spacing-3);
+  padding: var(--a-spacing-2) var(--a-spacing-3);
 }
 
 .navds-table__sort-button:hover {
-  background-color: var(--navds-semantic-color-canvas-background);
+  background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
 }
 
 .navds-table__sort-button:focus {
   outline: none;
-  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
 
 .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
 .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
-  background-color: var(--navds-global-color-blue-50);
+  background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
+  color: var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle));
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {
@@ -161,7 +152,7 @@
 }
 
 .navds-table__expandable-row--open .navds-table__header-cell {
-  border-color: var(--navds-semantic-color-border-muted);
+  border-color: var(--ac-table-row-border, var(--a-border-default));
 }
 
 .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
@@ -183,15 +174,15 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  padding: var(--navds-spacing-4);
+  padding: var(--a-spacing-4);
 }
 
 .navds-table--small .navds-table__toggle-expand-button {
-  padding: var(--navds-spacing-2);
+  padding: var(--a-spacing-2);
 }
 
 .navds-table__toggle-expand-button:focus {
-  box-shadow: inset var(--navds-shadow-focus);
+  box-shadow: inset var(--a-shadow-focus);
 }
 
 .navds-table__expandable-icon {
@@ -224,13 +215,13 @@
 }
 
 .navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
-  border-bottom: 1px solid var(--navds-table-cell-color-border);
+  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--navds-spacing-4) 4.25rem;
+  padding: var(--a-spacing-4) 4.25rem;
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--navds-spacing-2) var(--navds-spacing-12);
+  padding: var(--a-spacing-2) var(--a-spacing-12);
 }

@navikt/core/css/tabs.css

@@ -1,5 +1,5 @@
 .navds-tabs__tablist-wrapper {
-  box-shadow: inset 0 -1px 0 0 var(--navds-global-color-gray-300);
+  box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));
   width: 100%;
   display: flex;
 }
@@ -19,7 +19,7 @@
 }
 
 .navds-tabs__scroll-button {
-  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  padding: var(--a-spacing-3) var(--a-spacing-4);
   width: 44px;
   display: flex;
   justify-content: center;
@@ -37,41 +37,41 @@
 }
 
 .navds-tabs--small .navds-tabs__scroll-button {
-  padding: 0.375rem var(--navds-spacing-4);
+  padding: 0.375rem var(--a-spacing-4);
   width: 32px;
 }
 
 .navds-tabs__tab {
   min-height: 48px;
-  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  padding: var(--a-spacing-3) var(--a-spacing-4);
   display: inline-flex;
   justify-content: center;
   align-items: center;
   background: none;
   border: none;
-  color: var(--navds-semantic-color-text-muted);
+  color: var(--ac-tabs-text, var(--a-text-subtle));
   cursor: pointer;
 }
 
 .navds-tabs__tab:hover {
-  box-shadow: inset 0 -3px 0 0 var(--navds-global-color-gray-300);
+  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-hover-border, var(--a-border-subtle-hover));
 }
 
 .navds-tabs__tab[aria-selected="true"] {
-  box-shadow: inset 0 -3px 0 0 var(--navds-semantic-color-interaction-primary);
-  color: var(--navds-semantic-color-text);
+  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action));
+  color: var(--ac-tabs-selected-text, var(--a-text-default));
 }
 
 .navds-tabs__tab:focus {
   outline: none;
-  box-shadow: inset var(--navds-shadow-focus);
-  color: var(--navds-semantic-color-text);
+  box-shadow: inset var(--a-shadow-focus);
+  color: var(--ac-tabs-focus-text, var(--a-text-default));
 }
 
 .navds-tabs__tab-inner {
   display: flex;
   align-items: center;
-  gap: var(--navds-spacing-1);
+  gap: var(--a-spacing-1);
 }
 
 .navds-tabs__tab-inner svg {
@@ -85,12 +85,12 @@
 
 .navds-tabs__tab--small {
   min-height: 32px;
-  padding: 0.375rem var(--navds-spacing-4);
+  padding: 0.375rem var(--a-spacing-4);
 }
 
 .navds-tabs__tab-icon--top,
 .navds-tabs__tab--small.navds-tabs__tab-icon--top {
-  padding: var(--navds-spacing-1) var(--navds-spacing-4);
+  padding: var(--a-spacing-1) var(--a-spacing-4);
 }
 
 .navds-tabs__tab svg,

@navikt/core/css/tag.css

@@ -1,24 +1,10 @@
-:root,
-:host {
-  --navds-tag-color-border: var(--navds-semantic-color-border-muted);
-  --navds-tag-color-background: var(--navds-semantic-color-component-background-alternate);
-  --navds-tag-color-info-background: var(--navds-semantic-color-feedback-info-background);
-  --navds-tag-color-info-border: var(--navds-semantic-color-feedback-info-border);
-  --navds-tag-color-warning-background: var(--navds-semantic-color-feedback-warning-background);
-  --navds-tag-color-warning-border: var(--navds-semantic-color-feedback-warning-border);
-  --navds-tag-color-success-background: var(--navds-semantic-color-feedback-success-background);
-  --navds-tag-color-success-border: var(--navds-semantic-color-feedback-success-border);
-  --navds-tag-color-error-background: var(--navds-semantic-color-feedback-danger-background);
-  --navds-tag-color-error-border: var(--navds-semantic-color-feedback-danger-border);
-}
-
 .navds-tag {
   border: 1px solid;
-  border-radius: var(--navds-border-radius-small);
+  border-radius: var(--a-border-radius-small);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.125rem var(--navds-spacing-2);
+  padding: var(--a-spacing-05) var(--a-spacing-2);
   min-height: 32px;
   line-height: 1;
 }
@@ -30,101 +16,101 @@
 
 .navds-tag--xsmall {
   min-height: 20px;
-  padding: 0 var(--navds-spacing-1);
+  padding: 0 var(--a-spacing-1);
 }
 
 .navds-tag--error {
-  border-color: var(--ac-tag-error-border, var(--navds-global-color-red-500));
-  background-color: var(--ac-tag-error-bg, var(--navds-global-color-red-50));
-  color: var(--ac-tag-error-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-error-border, var(--a-border-danger));
+  background-color: var(--ac-tag-error-bg, var(--a-surface-danger-subtle));
+  color: var(--ac-tag-error-text, var(--a-text-default));
 }
 
 .navds-tag--error-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-error-filled-bg, var(--navds-global-color-red-500));
-  color: var(--ac-tag-error-filled-text, var(--navds-global-color-white));
+  background-color: var(--ac-tag-error-filled-bg, var(--a-surface-danger));
+  color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
 }
 
 .navds-tag--success {
-  border-color: var(--ac-tag-success-border, var(--navds-global-color-green-500));
-  background-color: var(--ac-tag-success-bg, var(--navds-global-color-green-50));
-  color: var(--ac-tag-success-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-success-border, var(--a-border-success));
+  background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
+  color: var(--ac-tag-success-text, var(--a-text-default));
 }
 
 .navds-tag--success-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-success-filled-bg, var(--navds-global-color-green-500));
-  color: var(--ac-tag-success-filled-text, var(--navds-global-color-white));
+  background-color: var(--ac-tag-success-filled-bg, var(--a-surface-success));
+  color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
 }
 
 .navds-tag--warning {
-  border-color: var(--ac-tag-warning-border, var(--navds-global-color-orange-600));
-  background-color: var(--ac-tag-warning-bg, var(--navds-global-color-orange-50));
-  color: var(--ac-tag-warning-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-warning-border, var(--a-border-warning));
+  background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
+  color: var(--ac-tag-warning-text, var(--a-text-default));
 }
 
 .navds-tag--warning-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-warning-filled-bg, var(--navds-global-color-orange-500));
-  color: var(--ac-tag-warning-filled-text, var(--navds-global-color-gray-900));
+  background-color: var(--ac-tag-warning-filled-bg, var(--a-surface-warning));
+  color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
 }
 
 .navds-tag--info {
-  border-color: var(--ac-tag-info-border, var(--navds-global-color-lightblue-700));
-  background-color: var(--ac-tag-info-bg, var(--navds-global-color-lightblue-50));
-  color: var(--ac-tag-info-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-info-border, var(--a-border-info));
+  background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
+  color: var(--ac-tag-info-text, var(--a-text-default));
 }
 
 .navds-tag--info-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-info-filled-bg, var(--navds-global-color-lightblue-500));
-  color: var(--ac-tag-info-filled-text, var(--navds-global-color-gray-900));
+  background-color: var(--ac-tag-info-filled-bg, var(--a-surface-info));
+  color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
 }
 
 .navds-tag--neutral {
-  border-color: var(--ac-tag-neutral-border, var(--navds-global-color-gray-500));
-  background-color: var(--ac-tag-neutral-bg, var(--navds-global-color-gray-100));
-  color: var(--ac-tag-neutral-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-neutral-border, var(--a-border-default));
+  background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-tag-neutral-text, var(--a-text-default));
 }
 
 .navds-tag--neutral-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-neutral-filled-bg, var(--navds-global-color-gray-800));
-  color: var(--ac-tag-neutral-filled-text, var(--navds-global-color-white));
+  background-color: var(--ac-tag-neutral-filled-bg, var(--a-surface-neutral));
+  color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
 }
 
 .navds-tag--alt1 {
-  border-color: var(--ac-tag-alt1-border, var(--navds-global-color-purple-400));
-  background-color: var(--ac-tag-alt1-bg, var(--navds-global-color-purple-100));
-  color: var(--ac-tag-alt1-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
+  background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
+  color: var(--ac-tag-alt-1-text, var(--a-text-default));
 }
 
 .navds-tag--alt1-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-alt1-filled-bg, var(--navds-global-color-purple-400));
-  color: var(--ac-tag-alt1-filled-text, var(--navds-global-color-white));
+  background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
+  color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
 }
 
 .navds-tag--alt2 {
-  border-color: var(--ac-tag-alt2-border, var(--navds-global-color-limegreen-500));
-  background-color: var(--ac-tag-alt2-bg, var(--navds-global-color-limegreen-100));
-  color: var(--ac-tag-alt2-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
+  background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
+  color: var(--ac-tag-alt-2-text, var(--a-text-default));
 }
 
 .navds-tag--alt2-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-alt2-filled-bg, var(--navds-global-color-limegreen-400));
-  color: var(--ac-tag-alt2-filled-text, var(--navds-global-color-gray-900));
+  background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
+  color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
 }
 
 .navds-tag--alt3 {
-  border-color: var(--ac-tag-alt3-border, var(--navds-global-color-deepblue-400));
-  background-color: var(--ac-tag-alt3-bg, var(--navds-global-color-deepblue-100));
-  color: var(--ac-tag-alt3-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
+  background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
+  color: var(--ac-tag-alt-3-text, var(--a-text-default));
 }
 
 .navds-tag--alt3-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-alt3-filled-bg, var(--navds-global-color-deepblue-500));
-  color: var(--ac-tag-alt3-filled-text, var(--navds-global-color-white));
+  background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
+  color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
 }

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

@@ -1,26 +1,15 @@
-:root,
-:host {
-  --navds-toggle-group-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-toggle-group-color-text: var(--navds-semantic-color-text);
-  --navds-toggle-group-color-border: var(--navds-semantic-color-divider);
-  --navds-toggle-group-color-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-toggle-group-color-text-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-toggle-group-color-background-pressed: var(--navds-semantic-color-interaction-primary-selected);
-  --navds-toggle-group-color-text-pressed: var(--navds-semantic-color-text-inverted);
-}
-
 .navds-toggle-group__wrapper {
   display: grid;
   justify-items: start;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-toggle-group {
-  border-radius: 7px; /* Custom value OK */
-  background-color: var(--navds-toggle-group-color-background);
-  box-shadow: inset 0 0 0 1px var(--navds-toggle-group-color-border);
-  padding: calc(var(--navds-spacing-1) + 1px);
-  gap: var(--navds-spacing-1);
+  border-radius: 9px;
+  background-color: var(--ac-toggle-group-bg, var(--a-surface-default));
+  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
+  padding: calc(var(--a-spacing-1) + 1px);
+  gap: var(--a-spacing-1);
   display: inline-grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
@@ -30,34 +19,34 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--navds-spacing-3);
+  padding: var(--a-spacing-3);
   min-height: 48px;
   border: none;
   cursor: pointer;
-  background-color: var(--navds-toggle-group-color-background);
-  color: var(--navds-toggle-group-color-text);
-  border-radius: var(--navds-border-radius-small);
+  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-default));
+  color: var(--ac-toggle-group-button-text, var(--a-text-default));
+  border-radius: var(--a-border-radius-medium);
   min-width: fit-content;
 }
 
 .navds-toggle-group__button:hover {
-  background-color: var(--navds-toggle-group-color-background-hover);
-  color: var(--navds-toggle-group-color-text-hover);
+  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
+  color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
 }
 
 .navds-toggle-group__button:focus {
   outline: none;
-  box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background), 0 0 0 4px var(--navds-semantic-color-focus);
+  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
 }
 
 .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-  box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background-hover), 0 0 0 4px var(--navds-semantic-color-focus);
+  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
 }
 
 .navds-toggle-group__button-inner {
   display: flex;
   align-items: center;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-toggle-group__button-inner > * {
@@ -66,8 +55,8 @@
 
 .navds-toggle-group__button[aria-pressed="true"],
 .navds-toggle-group__button[aria-checked="true"] {
-  background-color: var(--navds-toggle-group-color-background-pressed);
-  color: var(--navds-toggle-group-color-text-pressed);
+  background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
+  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
 }
 
 .navds-toggle-group--small > .navds-toggle-group__button {

@navikt/core/css/tokens.json

@@ -0,0 +1,303 @@
+{
+  "alert": {
+    "--ac-alert-error-border": "--a-border-danger",
+    "--ac-alert-error-bg": "--a-surface-danger-subtle",
+    "--ac-alert-warning-border": "--a-border-warning",
+    "--ac-alert-warning-bg": "--a-surface-warning-subtle",
+    "--ac-alert-info-border": "--a-border-info",
+    "--ac-alert-info-bg": "--a-surface-info-subtle",
+    "--ac-alert-success-border": "--a-border-success",
+    "--ac-alert-success-bg": "--a-surface-success-subtle"
+  },
+  "accordion": {
+    "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
+    "--ac-accordion-header-border-hover": "--a-border-strong",
+    "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
+    "--ac-accordion-item-border-open": "--a-surface-action-subtle",
+    "--ac-accordion-content-border": "--a-border-strong",
+    "--ac-accordion-content-border-open": "--a-border-strong"
+  },
+  "button": {
+    "--ac-button-primary-bg": "--a-surface-action",
+    "--ac-button-primary-text": "--a-text-on-action",
+    "--ac-button-primary-hover-bg": "--a-surface-action-hover",
+    "--ac-button-primary-active-bg": "--a-surface-action-active",
+    "--ac-button-primary-focus-border": "--a-surface-default",
+    "--ac-button-secondary-text": "--a-text-action",
+    "--ac-button-secondary-bg": "--a-surface-default",
+    "--ac-button-secondary-border": "--a-border-action",
+    "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
+    "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-button-secondary-focus-border": "--a-border-action",
+    "--ac-button-secondary-active-text": "--a-text-on-action",
+    "--ac-button-secondary-active-bg": "--a-surface-action-active",
+    "--ac-button-secondary-active-focus-border": "--a-surface-default",
+    "--ac-button-tertiary-text": "--a-text-action",
+    "--ac-button-tertiary-hover-text": "--a-text-action-on-action-subtle",
+    "--ac-button-tertiary-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-button-tertiary-focus-border": "--a-border-action",
+    "--ac-button-tertiary-active-text": "--a-text-on-action",
+    "--ac-button-tertiary-active-bg": "--a-surface-action-active",
+    "--ac-button-tertiary-active-hover-bg": "--a-surface-action-active",
+    "--ac-button-danger-bg": "--a-surface-danger",
+    "--ac-button-danger-text": "--a-text-on-danger",
+    "--ac-button-danger-hover-bg": "--a-surface-danger-hover",
+    "--ac-button-danger-active-bg": "--a-surface-danger-active",
+    "--ac-button-loader-stroke": "currentColor",
+    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)"
+  },
+  "chat": {
+    "--ac-chat-avatar-bg": "--a-bg-subtle",
+    "--ac-chat-avatar-color": "--a-text-default",
+    "--ac-chat-bubble-bg": "--a-bg-subtle",
+    "--ac-chat-top-text": "--a-text-default"
+  },
+  "chips": {
+    "--ac-chip-toggle-border": "--a-border-default",
+    "--ac-chip-toggle-bg": "--a-surface-neutral-subtle",
+    "--ac-chip-toggle-hover-border": "--a-border-strong",
+    "--ac-chip-toggle-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-chip-toggle-pressed-bg": "--a-surface-action-selected",
+    "--ac-chip-toggle-pressed-text": "--a-text-on-action",
+    "--ac-chip-toggle-pressed-hover-bg": "--a-surface-action-selected-hover",
+    "--ac-chip-toggle-focus": "--a-border-focus",
+    "--ac-chip-removable-action-bg": "--a-surface-action-selected",
+    "--ac-chip-removable-action-text": "--a-text-on-action",
+    "--ac-chip-removable-neutral-bg": "--a-surface-neutral-subtle",
+    "--ac-chip-removable-neutral-text": "--a-text-default",
+    "--ac-chip-removable-neutral-border": "--a-border-default",
+    "--ac-chip-removable-action-hover-bg": "--a-surface-action-selected-hover",
+    "--ac-chip-removable-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-chip-removable-neutral-hover-border": "--a-border-strong"
+  },
+  "date": {
+    "--ac-date-middle-text": "--a-text-on-action",
+    "--ac-date-middle-bg": "--a-surface-action-selected",
+    "--ac-date-week-text": "--a-text-on-neutral",
+    "--ac-date-week-bg": "--a-surface-neutral",
+    "--ac-date-selected-text": "--a-text-on-action",
+    "--ac-date-selected-bg": "--a-surface-action-selected",
+    "--ac-date-disabled-bg": "--a-surface-neutral-subtle",
+    "--ac-date-disabled-text": "--a-text-subtle",
+    "--ac-date-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-date-today-border": "--a-border-action-selected",
+    "--ac-date-caption-text": "--a-text-default",
+    "--ac-date-input-error-border": "--a-border-danger",
+    "--ac-date-input-button-text": "--a-text-default"
+  },
+  "guidepanel": {
+    "--ac-guide-panel-bg": "--a-surface-default",
+    "--ac-guide-panel-border": "--a-border-action",
+    "--ac-guide-panel-illustration-bg": "--a-surface-action-subtle"
+  },
+  "helptext": {
+    "--ac-help-text-button-color": "--a-surface-action",
+    "--ac-help-text-popover-bg": "--a-surface-info-subtle"
+  },
+  "linkpanel": {
+    "--ac-link-panel-text": "--a-text-default",
+    "--ac-link-panel-hover-text": "--a-text-action",
+    "--ac-link-panel-hover-border": "--a-border-action"
+  },
+  "link": {
+    "--ac-link-text": "--a-text-action",
+    "--ac-link-focus-text": "--a-text-on-action",
+    "--ac-link-focus-bg": "--a-border-focus",
+    "--ac-link-focus-border": "--a-border-focus",
+    "--ac-link-active-text": "--a-text-on-action",
+    "--ac-link-active-bg": "--a-border-focus",
+    "--ac-link-active-border": "--a-border-focus"
+  },
+  "loader": {
+    "--ac-loader-stroke": "--a-border-default",
+    "--ac-loader-stroke-bg": "--a-surface-active",
+    "--ac-loader-neutral-stroke": "--a-border-default",
+    "--ac-loader-interaction-stroke": "--a-border-action",
+    "--ac-loader-inverted-stroke": "--a-border-on-inverted",
+    "--ac-loader-inverted-stroke-bg": "--a-border-on-inverted-subtle"
+  },
+  "modal": {
+    "--ac-modal-bg": "--a-surface-default",
+    "--ac-modal-backdrop": "--a-surface-backdrop"
+  },
+  "pagination": {
+    "--ac-pagination-text": "--a-text-default",
+    "--ac-pagination-selected-bg": "--a-surface-action-selected",
+    "--ac-pagination-selected-text": "--a-text-on-action"
+  },
+  "panel": {
+    "--ac-panel-bg": "--a-surface-default",
+    "--ac-panel-border": "--a-border-default"
+  },
+  "popover": {
+    "--ac-popover-bg": "--a-surface-default",
+    "--ac-popover-border": "--a-border-default"
+  },
+  "readmore": {
+    "--ac-read-more-text": "--a-text-action",
+    "--ac-read-more-hover-bg": "--a-surface-hover",
+    "--ac-read-more-active-bg": "--a-surface-active",
+    "--ac-read-more-line": "--a-border-divider"
+  },
+  "stepper": {
+    "--ac-stepper-text": "--a-surface-action",
+    "--ac-stepper-line": "--a-border-default",
+    "--ac-stepper-line-completed": "--a-border-selected",
+    "--ac-stepper-non-interactive": "--a-text-subtle",
+    "--ac-stepper-active": "--a-text-action-selected",
+    "--ac-stepper-active-bg": "--a-surface-action-selected",
+    "--ac-stepper-active-border": "--a-border-action-selected",
+    "--ac-stepper-active-text": "--a-text-on-action",
+    "--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-stepper-non-interactive-active": "--a-text-default",
+    "--ac-stepper-non-interactive-line-completed": "--a-border-strong",
+    "--ac-stepper-non-interactive-active-bg": "--a-surface-inverted",
+    "--ac-stepper-non-interactive-active-border": "--a-surface-inverted",
+    "--ac-stepper-non-interactive-active-text": "--a-text-on-inverted",
+    "--ac-stepper-active-completed": "--a-text-action-selected",
+    "--ac-stepper-non-interactive-active-completed": "--a-text-default"
+  },
+  "table": {
+    "--ac-table-row-hover": "--a-bg-subtle",
+    "--ac-table-row-selected": "--a-surface-action-subtle",
+    "--ac-table-row-selected-hover": "--a-surface-action-subtle-hover",
+    "--ac-table-row-zebra": "--a-surface-subtle",
+    "--ac-table-row-border": "--a-border-default",
+    "--ac-table-row-hover-border": "--a-border-strong",
+    "--ac-table-sort-button-text": "--a-text-action",
+    "--ac-table-sort-button-hover-bg": "--a-bg-subtle",
+    "--ac-table-sort-button-sorted-bg": "--a-surface-selected",
+    "--ac-table-sort-button-sorted-text": "--a-text-action-on-action-subtle"
+  },
+  "tabs": {
+    "--ac-tabs-border": "--a-border-divider",
+    "--ac-tabs-text": "--a-text-subtle",
+    "--ac-tabs-hover-border": "--a-border-subtle-hover",
+    "--ac-tabs-selected-border": "--a-border-action",
+    "--ac-tabs-selected-text": "--a-text-default",
+    "--ac-tabs-focus-text": "--a-text-default"
+  },
+  "tag": {
+    "--ac-tag-error-border": "--a-border-danger",
+    "--ac-tag-error-bg": "--a-surface-danger-subtle",
+    "--ac-tag-error-text": "--a-text-default",
+    "--ac-tag-error-filled-bg": "--a-surface-danger",
+    "--ac-tag-error-filled-text": "--a-text-on-danger",
+    "--ac-tag-success-border": "--a-border-success",
+    "--ac-tag-success-bg": "--a-surface-success-subtle",
+    "--ac-tag-success-text": "--a-text-default",
+    "--ac-tag-success-filled-bg": "--a-surface-success",
+    "--ac-tag-success-filled-text": "--a-text-on-success",
+    "--ac-tag-warning-border": "--a-border-warning",
+    "--ac-tag-warning-bg": "--a-surface-warning-subtle",
+    "--ac-tag-warning-text": "--a-text-default",
+    "--ac-tag-warning-filled-bg": "--a-surface-warning",
+    "--ac-tag-warning-filled-text": "--a-text-on-warning",
+    "--ac-tag-info-border": "--a-border-info",
+    "--ac-tag-info-bg": "--a-surface-info-subtle",
+    "--ac-tag-info-text": "--a-text-default",
+    "--ac-tag-info-filled-bg": "--a-surface-info",
+    "--ac-tag-info-filled-text": "--a-text-on-info",
+    "--ac-tag-neutral-border": "--a-border-default",
+    "--ac-tag-neutral-bg": "--a-surface-neutral-subtle",
+    "--ac-tag-neutral-text": "--a-text-default",
+    "--ac-tag-neutral-filled-bg": "--a-surface-neutral",
+    "--ac-tag-neutral-filled-text": "--a-text-on-neutral",
+    "--ac-tag-alt-1-border": "--a-border-alt-1",
+    "--ac-tag-alt-1-bg": "--a-surface-alt-1-subtle",
+    "--ac-tag-alt-1-text": "--a-text-default",
+    "--ac-tag-alt-1-filled-bg": "--a-surface-alt-1",
+    "--ac-tag-alt-1-filled-text": "--a-text-on-alt-1",
+    "--ac-tag-alt-2-border": "--a-border-alt-2",
+    "--ac-tag-alt-2-bg": "--a-surface-alt-2-subtle",
+    "--ac-tag-alt-2-text": "--a-text-default",
+    "--ac-tag-alt-2-filled-bg": "--a-surface-alt-2",
+    "--ac-tag-alt-2-filled-text": "--a-text-on-alt-2",
+    "--ac-tag-alt-3-border": "--a-border-alt-3",
+    "--ac-tag-alt-3-bg": "--a-surface-alt-3-subtle",
+    "--ac-tag-alt-3-text": "--a-text-default",
+    "--ac-tag-alt-3-filled-bg": "--a-surface-alt-3",
+    "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3"
+  },
+  "togglegroup": {
+    "--ac-toggle-group-bg": "--a-surface-default",
+    "--ac-toggle-group-border": "--a-border-default",
+    "--ac-toggle-group-button-bg": "--a-surface-default",
+    "--ac-toggle-group-button-text": "--a-text-default",
+    "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
+    "--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle",
+    "--ac-toggle-group-selected-bg": "--a-surface-action-selected",
+    "--ac-toggle-group-selected-text": "--a-text-on-action"
+  },
+  "tooltip": {
+    "--ac-tooltip-bg": "--a-surface-inverted",
+    "--ac-tooltip-text": "--a-text-on-inverted",
+    "--ac-tooltip-key-bg": "--a-surface-neutral",
+    "--ac-tooltip-key-text": "--a-text-on-inverted"
+  },
+  "typography": {
+    "--ac-typo-error-text": "--a-text-danger"
+  },
+  "confirmationpanel": {
+    "--ac-confirmation-panel-border": "--a-border-warning",
+    "--ac-confirmation-panel-bg": "--a-surface-warning-subtle",
+    "--ac-confirmation-panel-checked-border": "--a-border-success",
+    "--ac-confirmation-panel-checked-bg": "--a-surface-success-subtle",
+    "--ac-confirmation-panel-error-border": "--a-border-danger",
+    "--ac-confirmation-panel-error-bg": "--a-surface-danger-subtle"
+  },
+  "errorsummary": {
+    "--ac-error-summary-bg": "--a-surface-default",
+    "--ac-error-summary-border": "--a-border-danger"
+  },
+  "checkbox-radio": {
+    "--ac-radio-checkbox-bg": "--a-surface-default",
+    "--ac-radio-checkbox-border": "--a-border-strong",
+    "--ac-radio-checkbox-action": "--a-surface-action",
+    "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
+    "--ac-radio-checkbox-error-border": "--a-border-danger",
+    "--ac-radio-checkbox-error-hover-bg": "--a-surface-danger-subtle"
+  },
+  "search": {
+    "--ac-search-button-border": "--a-border-default",
+    "--ac-search-button-border-hover": "--a-border-action",
+    "--ac-search-clear-icon": "--a-text-default",
+    "--ac-search-clear-icon-hover": "--a-text-action",
+    "--ac-search-button-focus-active-border": "--a-surface-default",
+    "--ac-search-error-border": "--a-border-danger"
+  },
+  "select": {
+    "--ac-select-bg": "--a-surface-default",
+    "--ac-select-border": "--a-border-strong",
+    "--ac-select-hover-bg": "--a-border-action",
+    "--ac-select-error-border": "--a-surface-danger"
+  },
+  "switch": {
+    "--ac-switch-action": "--a-surface-action",
+    "--ac-switch-bg": "--a-surface-neutral",
+    "--ac-switch-checked-bg": "--a-surface-success",
+    "--ac-switch-hover-bg": "--a-surface-neutral-hover",
+    "--ac-switch-checked-hover-bg": "--a-surface-success-hover",
+    "--ac-switch-thumb-bg": "--a-surface-default",
+    "--ac-switch-thumb-icon": "--a-icon-subtle",
+    "--ac-switch-thumb-icon-checked": "--a-icon-success"
+  },
+  "textfield": {
+    "--ac-textfield-bg": "--a-surface-default",
+    "--ac-textfield-border": "--a-border-default",
+    "--ac-textfield-text": "--a-text-default",
+    "--ac-textfield-placeholder": "--a-text-subtle",
+    "--ac-textfield-hover-border": "--a-border-action",
+    "--ac-textfield-error-border": "--a-border-danger"
+  },
+  "textarea": {
+    "--ac-textarea-bg": "--a-surface-default",
+    "--ac-textarea-border": "--a-border-default",
+    "--ac-textarea-text": "--a-text-default",
+    "--ac-textarea-placeholder": "--a-text-subtle",
+    "--ac-textarea-hover-border": "--a-border-action",
+    "--ac-textarea-counter-text": "--a-text-subtle",
+    "--ac-textarea-counter-error-text": "--a-surface-danger",
+    "--ac-textarea-error-border": "--a-border-danger"
+  }
+}

@navikt/core/css/tooltip.css

@@ -9,11 +9,11 @@
 }
 
 .navds-tooltip {
-  z-index: var(--navds-z-index-tooltip);
-  background-color: var(--navds-semantic-color-component-background-inverted);
-  color: var(--navds-semantic-color-text-inverted);
-  border-radius: var(--navds-border-radius-small);
-  padding: 0 var(--navds-spacing-2);
+  z-index: var(--a-z-index-tooltip);
+  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
+  color: var(--ac-tooltip-text, var(--a-text-on-inverted));
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-2);
   align-items: center;
   filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
   display: flex;
@@ -29,22 +29,22 @@
   width: 7px;
   transform: rotate(45deg);
   z-index: -1;
-  background-color: var(--navds-semantic-color-component-background-inverted);
+  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
   position: absolute;
 }
 
 .navds-tooltip__keys {
-  padding-bottom: var(--navds-spacing-1);
+  padding-bottom: var(--a-spacing-1);
   display: flex;
-  gap: var(--navds-spacing-1);
+  gap: var(--a-spacing-1);
 }
 
 .navds-tooltip__key {
-  font-family: var(--navds-font-family);
-  background-color: var(--navds-global-color-gray-700);
-  color: var(--navds-semantic-color-text-inverted);
-  border-radius: var(--navds-border-radius-small);
-  padding: 0 var(--navds-spacing-1);
+  font-family: var(--a-font-family);
+  background-color: var(--ac-tooltip-key-bg, var(--a-surface-neutral));
+  color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-1);
   min-width: 18px;
   height: 18px;
   display: inline-flex;

@navikt/core/css/typography.css

@@ -1,183 +1,177 @@
-:root,
-:host,
-[data-theme="light"] {
-  --navds-error-message-color-text: var(--navds-semantic-color-feedback-danger-text);
-}
-
 [data-theme="dark"] {
-  --navds-error-message-color-text: var(--navds-global-color-red-300);
+  --ac-typo-error-text: var(--a-red-300);
 }
 
 /* Heading */
 .navds-heading {
-  font-weight: var(--navds-font-weight-bold);
+  font-weight: var(--a-font-weight-bold);
   margin: 0;
 }
 
 .navds-heading--xlarge {
-  font-size: var(--navds-font-size-heading-2xlarge);
+  font-size: var(--a-font-size-heading-2xlarge);
   letter-spacing: -0.01em;
-  line-height: var(--navds-font-line-height-heading-2xlarge);
+  line-height: var(--a-font-line-height-heading-2xlarge);
 }
 
 .navds-heading--xlarge.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-5);
+  margin-bottom: var(--a-spacing-5);
 }
 
 .navds-heading--large {
-  font-size: var(--navds-font-size-heading-xlarge);
+  font-size: var(--a-font-size-heading-xlarge);
   letter-spacing: -0.008em;
-  line-height: var(--navds-font-line-height-heading-xlarge);
+  line-height: var(--a-font-line-height-heading-xlarge);
 }
 
 .navds-heading--large.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-4);
+  margin-bottom: var(--a-spacing-4);
 }
 
 /* Mobile scale */
 @media (max-width: 480px) {
   .navds-heading--xlarge {
-    font-size: var(--navds-font-size-heading-xlarge);
+    font-size: var(--a-font-size-heading-xlarge);
     letter-spacing: -0.008em;
-    line-height: var(--navds-font-line-height-heading-xlarge);
+    line-height: var(--a-font-line-height-heading-xlarge);
   }
 
   .navds-heading--xlarge.navds-typo--spacing {
-    margin-bottom: var(--navds-spacing-4);
+    margin-bottom: var(--a-spacing-4);
   }
 
   .navds-heading--large {
-    font-size: var(--navds-font-size-heading-large);
+    font-size: var(--a-font-size-heading-large);
     letter-spacing: -0.004em;
-    line-height: var(--navds-font-line-height-heading-large);
+    line-height: var(--a-font-line-height-heading-large);
   }
 
   .navds-heading--large.navds-typo--spacing {
-    margin-bottom: var(--navds-spacing-3);
+    margin-bottom: var(--a-spacing-3);
   }
 }
 
 .navds-heading--medium {
-  font-size: var(--navds-font-size-heading-medium);
+  font-size: var(--a-font-size-heading-medium);
   letter-spacing: -0.002em;
-  line-height: var(--navds-font-line-height-heading-medium);
+  line-height: var(--a-font-line-height-heading-medium);
 }
 
 .navds-heading--medium.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-3);
+  margin-bottom: var(--a-spacing-3);
 }
 
 .navds-heading--small {
-  font-size: var(--navds-font-size-heading-small);
+  font-size: var(--a-font-size-heading-small);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-heading-small);
+  line-height: var(--a-font-line-height-heading-small);
 }
 
 .navds-heading--small.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-3);
+  margin-bottom: var(--a-spacing-3);
 }
 
 .navds-heading--xsmall {
-  font-size: var(--navds-font-size-heading-xsmall);
+  font-size: var(--a-font-size-heading-xsmall);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-heading-xsmall);
+  line-height: var(--a-font-line-height-heading-xsmall);
 }
 
 .navds-heading--xsmall.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-3);
+  margin-bottom: var(--a-spacing-3);
 }
 
 /* Ingress */
 .navds-ingress {
-  font-size: var(--navds-font-size-xlarge);
-  font-weight: var(--navds-font-weight-regular);
+  font-size: var(--a-font-size-xlarge);
+  font-weight: var(--a-font-weight-regular);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-xlarge);
+  line-height: var(--a-font-line-height-xlarge);
   margin: 0;
 }
 
 .navds-ingress.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-10);
+  margin-bottom: var(--a-spacing-10);
 }
 
 /* Body */
 .navds-body-long {
-  font-size: var(--navds-font-size-large);
-  font-weight: var(--navds-font-weight-regular);
+  font-size: var(--a-font-size-large);
+  font-weight: var(--a-font-weight-regular);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-xlarge);
+  line-height: var(--a-font-line-height-xlarge);
   margin: 0;
 }
 
 .navds-body-long.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-7);
+  margin-bottom: var(--a-spacing-7);
 }
 
 .navds-body-long--small {
-  font-size: var(--navds-font-size-medium);
+  font-size: var(--a-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-large);
+  line-height: var(--a-font-line-height-large);
 }
 
 .navds-body-long--small.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-6);
+  margin-bottom: var(--a-spacing-6);
 }
 
 .navds-body-short {
-  font-size: var(--navds-font-size-large);
-  font-weight: var(--navds-font-weight-regular);
+  font-size: var(--a-font-size-large);
+  font-weight: var(--a-font-weight-regular);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-large);
+  line-height: var(--a-font-line-height-large);
   margin: 0;
 }
 
 .navds-body-short.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-3);
+  margin-bottom: var(--a-spacing-3);
 }
 
 .navds-body-short--small {
-  font-size: var(--navds-font-size-medium);
+  font-size: var(--a-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-medium);
+  line-height: var(--a-font-line-height-medium);
 }
 
 .navds-body-short--small.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-2);
+  margin-bottom: var(--a-spacing-2);
 }
 
 /* Label */
 .navds-label {
-  font-size: var(--navds-font-size-large);
-  font-weight: var(--navds-font-weight-bold);
+  font-size: var(--a-font-size-large);
+  font-weight: var(--a-font-weight-bold);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-large);
+  line-height: var(--a-font-line-height-large);
   margin: 0;
 }
 
 .navds-label.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-3);
+  margin-bottom: var(--a-spacing-3);
 }
 
 .navds-label--small {
-  font-size: var(--navds-font-size-medium);
+  font-size: var(--a-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-medium);
+  line-height: var(--a-font-line-height-medium);
 }
 
 .navds-label--small.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-2);
+  margin-bottom: var(--a-spacing-2);
 }
 
 /* Small text */
 .navds-detail {
-  font-size: var(--navds-font-size-small);
+  font-size: var(--a-font-size-small);
   letter-spacing: 0.004em;
-  line-height: var(--navds-font-line-height-medium);
+  line-height: var(--a-font-line-height-medium);
   margin: 0;
 }
 
 .navds-detail.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-2);
+  margin-bottom: var(--a-spacing-2);
 }
 
 .navds-detail.navds-typo--uppercase {
@@ -185,13 +179,13 @@
 }
 
 .navds-detail--small {
-  font-weight: var(--navds-font-weight-regular);
+  font-weight: var(--a-font-weight-regular);
 }
 
 .navds-detail--small.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-2);
+  margin-bottom: var(--a-spacing-2);
 }
 
 .navds-error-message {
-  color: var(--navds-error-message-color-text);
+  color: var(--ac-typo-error-text, var(--a-text-danger));
 }

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,118 @@
 # @navikt/ds-react
 
+## 2.0.7
+
+### Patch Changes
+
+- :bug: Fikset keyboard-click i monthpicker
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.7
+
+## 2.0.6
+
+### Patch Changes
+
+- DateInput hadde duplikat className satt
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.6
+
+## 2.0.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.5
+
+## 2.0.4
+
+### Patch Changes
+
+- Updated dependencies [[`e4b6237e1`](https://github.com/navikt/Designsystemet/commit/e4b6237e1bbf13b1ce5415845d558831b47caf7c)]:
+  - @navikt/ds-icons@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- :sparkles: La til muligheten til å velge layout-strategi for datepicker-popover
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.3
+
+## 2.0.2
+
+### Patch Changes
+
+- :bug: Fikset click-event for datepicker
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.2
+
+## 2.0.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.1
+
+## 2.0.0
+
+### Major Changes
+
+- [`6b96e4833`](https://github.com/navikt/Designsystemet/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+
+## 1.5.10
+
+### Patch Changes
+
+- [#1717](https://github.com/navikt/Designsystemet/pull/1717) [`d9352982d`](https://github.com/navikt/Designsystemet/commit/d9352982d42d5d12a9c5fc345e546f57c753738d) Thanks [@vebnor](https://github.com/vebnor)! - Fikset parentSelector prop i Modal
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.10
+
+## 1.5.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.9
+
+## 1.5.8
+
+### Patch Changes
+
+- console.log removed
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.8
+
+## 1.5.7
+
+### Patch Changes
+
+- defaultMonth/Year prop date-komponent
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.7
+
+## 1.5.6
+
+### Patch Changes
+
+- Datepicker fungerte ikke med open shadow-dom
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.6
+
+## 1.5.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@1.5.5
+
 ## 1.5.4
 
 ### Patch Changes

@navikt/core/react/README.md

@@ -1,28 +1,21 @@
-# NAV React-components
+# Aksel React-components
 
-All of NAVs core React-components
+React-components for NAVs designsystem.
 
-- Uses styling from `@navikt/ds-css`
+- Uses styling defined in `@navikt/ds-css`
 - All components implemented with React.forwardRef!
 - Most components extend native html-elements.
 
 ## Installation
 
-Install `@navikt/ds-react` with yarn
-
 ```bash
   yarn add @navikt/ds-react
-```
-
-Install `@navikt/ds-react` with npm
-
-```bash
   npm install @navikt/ds-react
 ```
 
 ## Usage
 
-Remember to also import @navikt/ds-css to apply styling! See README-link under "learn more"-section below.
+Remember to also import `@navikt/ds-css` for styling!
 
 ```javascript
 import { Button } from "@navikt/ds-react";

@navikt/core/react/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@navikt/ds-react",
-  "version": "1.5.4",
-  "description": "NAV designsystem react components",
-  "author": "NAV Designsystem team",
+  "version": "2.0.7",
+  "description": "Aksel react-components for NAV designsystem",
+  "author": "Aksel | NAV designsystem team",
   "license": "MIT",
   "keywords": [
     "react",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^1.5.4",
+    "@navikt/ds-icons": "^2.0.7",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",
@@ -52,7 +52,6 @@
     "@testing-library/user-event": "^14.2.0",
     "@types/faker": "5.5.8",
     "@types/jest": "^29.0.0",
-    "@types/node": "^17.0.35",
     "@types/react-modal": "^3.13.1",
     "concurrently": "7.2.1",
     "copyfiles": "^2.4.1",

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

@@ -52,8 +52,8 @@ export const Farger = () => {
       avatar="ON"
       name="Ola Normann"
       timestamp="01.01.21 14:00"
-      avatarBgColor="var(--navds-global-color-lightblue-200)"
-      backgroundColor="var(--navds-global-color-lightblue-100)"
+      avatarBgColor="var(--a-lightblue-200)"
+      backgroundColor="var(--a-lightblue-100)"
     >
       <Chat.Bubble>
         Aute minim nisi sunt mollit duis sunt nulla minim non proident.

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

@@ -108,7 +108,6 @@ const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
             autoComplete="off"
             aria-controls={ariaId}
             className={cl(
-              className,
               "navds-date__field-input",
               "navds-text-field__input",
               "navds-body-short",

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

@@ -107,6 +107,13 @@ export interface DatePickerDefaultProps
    * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
    */
   onOpenToggle?: () => void;
+  /**
+   * Avoid using if possible!
+   * Changes what CSS position property to use
+   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
+   * @default "absolute"
+   */
+  strategy?: "absolute" | "fixed";
 }
 
 export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
@@ -134,6 +141,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       open: _open,
       onClose,
       onOpenToggle,
+      strategy = "absolute",
       ...rest
     },
     ref
@@ -204,6 +212,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               id={ariaId}
               role="dialog"
               ref={ref}
+              strategy={strategy}
             >
               <DayPicker
                 locale={getLocaleFromString(locale)}

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

@@ -18,7 +18,7 @@ import { Head } from "./Head";
 interface DatePickerStandaloneDefaultProps
   extends Omit<
     DatePickerDefaultProps,
-    "open" | "onClose" | "onOpenToggle" | "wrapperClassName"
+    "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
   > {
   /**
    * Datepicker classname

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

@@ -286,3 +286,19 @@ export const UseRangedDatepickerValidation = () => {
     </div>
   );
 };
+
+export const defaultShownMonth = () => {
+  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    onDateChange: console.log,
+    defaultMonth: new Date("Oct 23 2022"),
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <DatePicker.Input {...inputProps} label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};