[Snyk] Security upgrade node from 16.4-alpine3.14 to 16.13.1-alpine3.14 (#1817)

Co-authored-by: snyk-bot <snyk-bot@snyk.io>

.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"],
+  "ignore": ["shadow-dom", "aksel.nav.no", "@navikt/ds-navno"],
 
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always"

.github/ISSUE_TEMPLATE/new-component.yml

@@ -0,0 +1,24 @@
+name: Ny komponent
+description: Send et ønske om en eller flere nye komponenter
+title: "[Ny komponent]: "
+labels: ["nytt ✨", "forespørsel 🥰", "komponenter 🧩"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: input
+    id: title
+    attributes:
+      label: Navn på komponent
+      description: Hva er navnet på komponenten du ønsker deg?
+      placeholder: eks. datepicker
+    validations:
+      required: true
+  - type: textarea
+    id: examples
+    attributes:
+      label: Eksempel på komponenten
+      description: Send en lenke til eksempler på komponenten

.github/ISSUE_TEMPLATE/new-icon.yaml

@@ -0,0 +1,24 @@
+name: Nytt ikon
+description: Send et ønske om et eller flere nye ikoner
+title: "[Nytt ikon]: "
+labels: ["nytt ✨", "ikoner 🖼", "forespørsel 🥰"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: input
+    id: title
+    attributes:
+      label: Navn på ikonet
+      description: Hva er navnet på ikonet du ønsker deg?
+      placeholder: eks. send
+    validations:
+      required: true
+  - type: textarea
+    id: examples
+    attributes:
+      label: Eksempel på ikonet
+      description: Send en lenke til eksempler på ikonet

.github/ISSUE_TEMPLATE/update-component.yml

@@ -0,0 +1,16 @@
+name: Innspill til komponent
+description: Send inn innspill til komponent
+title: "[Innspill til komponent]: "
+labels: ["forespørsel 🥰", "komponenter 🧩", "nytt ✨", "beta 🧪"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: textarea
+    id: feeback
+    attributes:
+      label: Tilbakemelding
+      description: Beskriv hvilke tilbakemeldinger du har til komponenten

.github/ISSUE_TEMPLATE/update-icon.yml

@@ -0,0 +1,16 @@
+name: Innspill til ikon
+description: Send inn innspill til ikon
+title: "[Innspill til ikon]: "
+labels: ["forespørsel 🥰", "nytt ✨"]
+assignees:
+  - olejorgenbakken
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Takk for at du bidrar inn i Aksel!
+  - type: textarea
+    id: feeback
+    attributes:
+      label: Tilbakemelding
+      description: Beskriv hvilke tilbakemeldinger du har til ikonet

.github/workflows/aksel-dev.yml

@@ -0,0 +1,93 @@
+name: Deploy aksel.dev.nav.no
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - next
+
+env:
+  IMAGE: ghcr.io/navikt/designsystemet
+
+jobs:
+  snyk-monitor:
+    name: monitor dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        continue-on-error: true
+        uses: snyk/actions/node@master
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: monitor
+          args: --org=designsystemet --severity-threshold=high
+  snyk-test:
+    name: analyze dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@master
+        continue-on-error: true
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: test
+          args: --org=designsystemet --severity-threshold=high
+  build_and_deploy:
+    name: Build and deploy to dev-gcp
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+      - uses: actions/checkout@v2
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-dev-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-dev-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build application
+        run: |
+          yarn boot
+          yarn workspace aksel.nav.no build:next
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Get complete tag
+        run: echo "TAG=DEV-$( date +%s )" >> $GITHUB_ENV
+      - name: Create docker image tags
+        run: echo "DOCKER_TAG=${{ env.IMAGE }}:${{ env.TAG }}" >> $GITHUB_ENV
+      - name: Build docker image
+        run: docker build -t ${{ env.DOCKER_TAG }} . -f aksel.nav.no/Dockerfile
+      - name: Push docker image
+        run: |
+          docker push ${{ env.DOCKER_TAG }}
+
+      - name: Deploy to dev-gcp
+        uses: nais/deploy/actions/deploy@master
+        env:
+          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
+          RESOURCE: aksel.nav.no/nais-dev.yaml
+          CLUSTER: dev-gcp
+          IMAGE: ${{ env.DOCKER_TAG }}

.github/workflows/aksel-prod.yml

@@ -0,0 +1,136 @@
+name: Deploy aksel.nav.no
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - "aksel.nav.no/**"
+
+env:
+  IMAGE: ghcr.io/navikt/designsystemet
+
+jobs:
+  snyk-monitor:
+    name: monitor dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        continue-on-error: true
+        uses: snyk/actions/node@master
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: monitor
+          args: --org=designsystemet --severity-threshold=high
+  snyk-test:
+    name: analyze dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@master
+        continue-on-error: true
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: test
+          args: --org=designsystemet --severity-threshold=high
+  sync_data_with_sanity:
+    name: Update component data
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+      - uses: actions/checkout@v2
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-prod-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-prod-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run docgen
+        run: |
+          yarn boot
+          yarn docgen
+
+      - name: Update sanity sync
+        run: yarn workspace aksel.nav.no sanity:update
+
+  build_and_deploy:
+    name: Build and deploy to prod-gcp
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+      - uses: actions/checkout@v2
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-prod-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-prod-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build packages
+        run: yarn boot
+
+      - name: Tests
+        run: yarn workspace aksel.nav.no test
+
+      - name: Build application
+        run: yarn workspace aksel.nav.no build:next
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Get complete tag
+        run: echo "TAG=$( date +%s )" >> $GITHUB_ENV
+      - name: Create docker image tags
+        run: echo "DOCKER_TAG=${{ env.IMAGE }}:${{ env.TAG }}" >> $GITHUB_ENV
+      - name: Build docker image
+        run: docker build -t ${{ env.DOCKER_TAG }} . -f aksel.nav.no/Dockerfile
+      - name: Wait for e2e-tests to succeed
+        uses: lewagon/wait-on-check-action@v1.2.0
+        with:
+          ref: ${{ github.ref }}
+          check-name: "Smoketest Aksel"
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          wait-interval: 10
+      - name: Push docker image
+        run: |
+          docker push ${{ env.DOCKER_TAG }}
+
+      - name: Deploy to prod-gcp
+        uses: nais/deploy/actions/deploy@master
+        env:
+          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
+          RESOURCE: aksel.nav.no/nais-prod.yaml
+          CLUSTER: prod-gcp
+          IMAGE: ${{ env.DOCKER_TAG }}

.github/workflows/aksel-redeploy.yml

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

.github/workflows/backup-sanity.yml

@@ -0,0 +1,38 @@
+name: Backup sanity dateset to gcp
+on:
+  workflow_dispatch:
+  schedule:
+    # 12.00 every 3 days
+    - cron: "0 0 */3 * *"
+jobs:
+  execute:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Required to retrieve git history
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-build-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+      - name: Install dependencies
+        run: cd aksel.nav.no/website && yarn
+
+      - name: Export dataset
+        run: cd aksel.nav.no/website && SANITY_PREVIEW_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn backup
+      - name: Upload GCP bucket
+        uses: "google-github-actions/auth@v0"
+        with:
+          credentials_json: "${{ secrets.gcp_credentials_prod }}"
+      - uses: "google-github-actions/upload-cloud-storage@v0"
+        with:
+          path: ./aksel.nav.no/website
+          destination: "aksel-website-prod/backups"
+          glob: "backup-*.tar.gz"

.github/workflows/chromatic.yml

@@ -4,11 +4,10 @@ on:
   push:
     branches:
       - "master"
-      - "next"
     paths:
       - "@navikt/**"
   pull_request:
-    branches: [master]
+    branches: [master, next]
     paths:
       - "@navikt/**"
 

.github/workflows/ci.yml

@@ -6,7 +6,6 @@ on:
       - master
       - next
   pull_request:
-    types: [opened, edited]
   workflow_dispatch:
 
 jobs:

.github/workflows/codeql.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [master, next]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [master]
+  schedule:
+    - cron: "41 8 * * 6"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ["javascript"]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+
+          # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+      # - run: |
+      #   echo "Run, Build Application using script"
+      #   ./location_of_script_within_repo/buildscript.sh
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2

.github/workflows/e2e.yml

@@ -0,0 +1,55 @@
+name: E2E / Playwright Tests
+on:
+  push:
+    branches: [master, next]
+    paths:
+      - "aksel.nav.no/**"
+  pull_request:
+    branches: [master, next]
+    paths:
+      - "aksel.nav.no/**"
+
+jobs:
+  playwright:
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.30.0-focal
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-e2e-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-e2e-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build packages
+        run: |
+          yarn boot
+
+      - name: Build application
+        run: yarn workspace aksel.nav.no build:next
+
+      - name: Run Playwright tests
+        run: yarn workspace website e2e:ci-full
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: aksel.nav.no/website/playwright-report/
+          retention-days: 10

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

@@ -0,0 +1,30 @@
+name: "push-to-cdn"
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - "master"
+    paths:
+      - "fonts/**"
+
+jobs:
+  upload:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: "read"
+      id-token: "write"
+
+    steps:
+      - uses: "actions/checkout@v3"
+
+      - id: upload
+        uses: navikt/frontend/actions/cdn-upload/v1@main
+        with:
+          cdn-team-name: aksel
+          source: ./fonts
+          destination: "" # uploads folder to team root
+
+      - run: echo uploaded file ${{ steps.upload.outputs.uploaded }}
+        shell: bash

.github/workflows/release.yml

@@ -27,9 +27,9 @@ jobs:
         uses: actions/cache@v3
         with:
           path: "**/node_modules"
-          key: ${{ runner.os }}-test-${{ github.sha }}
+          key: ${{ runner.os }}-prod-${{ github.sha }}
           restore-keys: |
-            ${{ runner.os }}-test
+            ${{ runner.os }}-prod
 
       - name: Install dependencies
         run: yarn

.github/workflows/smoketest.yml

@@ -0,0 +1,49 @@
+name: Smoketest aksel.nav.no
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - "aksel.nav.no/**"
+
+env:
+  IMAGE: ghcr.io/navikt/designsystemet
+
+jobs:
+  smoketest:
+    name: Smoketest Aksel
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.30.0-focal
+    steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+      - uses: actions/checkout@v2
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-prod-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-prod-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: build packages
+        run: |
+          yarn boot
+
+      - name: Build application
+        run: yarn workspace aksel.nav.no build:next
+
+      - name: E2E smoketest
+        run: yarn workspace website e2e:ci

.gitignore

@@ -116,6 +116,7 @@ react-docgen.json
 react-docgen-docs.json
 cjs
 esm
+@navikt/community/navno/css
 .vercel
 _docs.json
 
@@ -129,4 +130,24 @@ _docs.json
 */icons/src
 */icons/png
 */core/icons
-/storybook-static
+/storybook-static
+
+# Aksel.nav.no
+.next
+!*/website/lib/
+!*/website/public/
+!aksel.nav.no/**/*.d.ts
+!*/sanity/lib/
+!*/sanity/static/
+out
+videos
+sanity/scripts/renameField.js
+tmp.json
+/test-results/
+/playwright-report/
+/playwright/.cache/
+playwright-report/
+/test-results/
+backup-*.tar.gz
+sitemap-urls.json
+*.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

.prettierignore

@@ -0,0 +1,2 @@
+**/nais-dev.yaml
+**/nais-prod.yaml

.storybook/layout.css

@@ -15,3 +15,7 @@
 .rowgap[data-theme="dark"] {
   background-color: #262626;
 }
+
+.rowgap-wrap {
+  flex-wrap: wrap;
+}

.storybook/main.js

@@ -17,8 +17,8 @@ module.exports = {
   },
   stories: () => [...getStories(), "./*.stories.mdx"],
   addons: [
-    "@storybook/addon-docs",
     "@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,3 +1,97 @@
 # @navikt/ds-codemod
 
+## 2.1.6
+
+## 2.1.5
+
+## 2.1.4
+
+## 2.1.3
+
+## 2.1.2
+
+## 2.1.1
+
+## 2.1.0
+
+## 2.0.18
+
+## 2.0.17
+
+## 2.0.16
+
+## 2.0.15
+
+## 2.0.14
+
+## 2.0.13
+
+## 2.0.12
+
+## 2.0.11
+
+## 2.0.10
+
+## 2.0.9
+
+## 2.0.8
+
+## 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
+
+## 1.5.2
+
+## 1.5.1
+
+## 1.5.0
+
+## 1.4.4
+
+## 1.4.3
+
+## 1.4.2
+
+## 1.4.1
+
+## 1.4.0
+
+## 1.3.39
+
+### Patch Changes
+
+- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+
 ## 1.3.38

@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.3.38",
-  "description": "NAV designsystem codemods",
-  "author": "NAV Designsystem team",
+  "version": "2.1.6",
+  "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"
@@ -36,7 +39,7 @@
     "globby": "11.0.1",
     "inquirer": "7.3.3",
     "is-git-clean": "1.1.0",
-    "jest": "^27.5.0",
+    "jest": "^29.0.0",
     "jscodeshift": "0.13.1",
     "jscodeshift-add-imports": "1.0.10",
     "lodash": "4.17.21",
@@ -44,10 +47,12 @@
     "prettier": "2.7.1"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.0.0",
+    "@types/jest": "^29.0.0",
     "@types/jscodeshift": "0.11.5",
     "@types/react": "^18.0.0",
     "del": "7.0.0",
-    "typescript": "^4.7.2"
+    "typescript": "^4.8.0"
   },
   "sideEffects": false,
   "engines": {

@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/v1.0.0/chat.ts

@@ -28,7 +28,7 @@ export default function transformer(file, api, options) {
       });
     });
 
-  if (!!j(file.source).findJSXElements(localName)) {
+  if (j(file.source).findJSXElements(localName)) {
     renameProps({
       root,
       componentName: localName,

@navikt/codemod/transforms/v1.0.0/pagination.ts

@@ -54,7 +54,7 @@ export default function transformer(file, api, options) {
       });
     });
 
-  if (!!j(file.source).findJSXElements(localName)) {
+  if (j(file.source).findJSXElements(localName)) {
     root.findJSXElements(`${localName}`).forEach((parent) => {
       const skip = !!parent.value.openingElement?.attributes.find(
         (x) => x.name.name === "data-version" && x.value.value === "v1"

@navikt/codemod/transforms/v1.0.0/tabs.ts

@@ -23,7 +23,7 @@ export default function transformer(file, api, options) {
       });
     });
 
-  if (!!j(file.source).findJSXElements(localName)) {
+  if (j(file.source).findJSXElements(localName)) {
     renameProps({
       root,
       componentName: `${localName}.List`,

@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.1.6",
+    "@navikt/ds-react": "^2.1.6",
+    "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,3 +1,151 @@
 # @navikt/ds-css
 
+## 2.1.6
+
+## 2.1.5
+
+## 2.1.4
+
+## 2.1.3
+
+## 2.1.2
+
+### Patch Changes
+
+- [`62f36da5e`](https://github.com/navikt/Designsystemet/commit/62f36da5e74fc7f53414d42b310c3b57597795bc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Small textfield har nå 8px horisontal padding (4px før)
+
+## 2.1.1
+
+## 2.1.0
+
+## 2.0.18
+
+## 2.0.17
+
+## 2.0.16
+
+## 2.0.15
+
+### Patch Changes
+
+- [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
+
+## 2.0.14
+
+## 2.0.13
+
+## 2.0.12
+
+### Patch Changes
+
+- [#1737](https://github.com/navikt/Designsystemet/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/Designsystemet/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
+
+## 2.0.11
+
+## 2.0.10
+
+## 2.0.9
+
+## 2.0.8
+
+## 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
+
+- [#1709](https://github.com/navikt/Designsystemet/pull/1709) [`77302a30b`](https://github.com/navikt/Designsystemet/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
+
+## 1.5.3
+
+### Patch Changes
+
+- Byttet om på alt-farge rekkefølge
+
+## 1.5.2
+
+### Patch Changes
+
+- :memo: Rename FilterChips to ToggleChips
+
+## 1.5.1
+
+### Patch Changes
+
+- Flex-wrap chips.css
+
+## 1.5.0
+
+### Minor Changes
+
+- [#1684](https://github.com/navikt/Designsystemet/pull/1684) [`e19bf67b3`](https://github.com/navikt/Designsystemet/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
+
+- [#1668](https://github.com/navikt/Designsystemet/pull/1668) [`97c5f60e9`](https://github.com/navikt/Designsystemet/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
+
+## 1.4.4
+
+## 1.4.3
+
+### Patch Changes
+
+- :sparkles: Validering og inputFormat i Date-komponenter
+
+## 1.4.2
+
+## 1.4.1
+
+### Patch Changes
+
+- [`3c08651df`](https://github.com/navikt/Designsystemet/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
+
+## 1.4.0
+
+## 1.3.39
+
+### Patch Changes
+
+- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+
 ## 1.3.38

@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(--ac-accordion-header-border, 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,d09GRgABAAAAAGs8ABIAAAABObAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABlAAAABwAAAAcgbAfskdERUYAAAGwAAAAUAAAAGQKXws7R1BPUwAAAgAAACMhAAC0xJ5YlXNHU1VCAAAlJAAAApkAAAWOhmdQKU9TLzIAACfAAAAAWQAAAGBe39OaY21hcAAAKBwAAAG2AAACKkTtz/ZjdnQgAAAp1AAAAC4AAAAuA9EOJGZwZ20AACoEAAABAgAAAXMGWZw3Z2FzcAAAKwgAAAAIAAAACAAAABBnbHlmAAArEAAANKEAAGTowwXT7WhlYWQAAF+0AAAANgAAADYNjyK7aGhlYQAAX+wAAAAgAAAAJAZ4AoRobXR4AABgDAAAAm8AAAQq4JchCmxvY2EAAGJ8AAACGQAAAiQkzT8obWF4cAAAZJgAAAAgAAAAIAMoAZ1uYW1lAABkuAAAA0AAAAhsMGQcaHBvc3QAAGf4AAAC7QAABP8BLWbjcHJlcAAAaugAAABTAAAAVlMavjgAAAABAAAAANXtRbgAAAAA0goY/AAAAADZuMD9eNodjDEKgEAQAyd7VoeFD7P0w2qjlfoX70BBMUgYGEJ2EdCanoEgI0YzOcHMYl/ZSRyc9uIElct+89hfBVJS503jP/ETvtrcZ/f6AG+/EKB42u1dC5BcVZn+p9MZOp3OECZtHMaERMwiYEiChLwJgQoPERFYQEVgVXysJAFES9Ha3VpeEi1kcSu1m4pZTVHZMlqCQafYkE1BjEOM7IghxjA1Ow6TSdMOM83QGTudsRnq7Hf+c+695z66+/ZjhkD2/nVv377P8/jP/z7/pQYiitNa+ilFV19+9Q3Uevs371lLc790zxfW0Mq1n/3anXQtRXENCcG/DRShCdUeWfOFe+6k1nWfvWcNzV63Zt0aOverX/7WF2gBXyGvm6CvlVv1hM+TtUykBCVpBs2hufqZS9RvJK5+J9xCjQ3ydzc/YVL0H6IvNt7TuOWU6Ozd13z+zs7/vI0aGlY0NGF7NZ41my6lK+kauoFups/QF9EG99C99E/0IH2XHqN/o830OG2jJ6mNdtJu2ksddIA6qYdSNEBZytMonjMtEkE5Hop0WfsNj/H+ZD7+SuRV7E/i/fvlcWyf5+uft+5Sxxue4Hvn8rbZ2J/J9/bzNsXbH0S+i+Pv5f2/8jVf5/0sbwVvh/j4Zudp+l0P8JGn9PFDaKVTaDXdirbaBmhFPXfS+1DX3WjlXwNm0vOAM+g3gFm4OkK/pd+jgeMNU3FnE+5bhnUV1suxXo31eqyfxHqb7rk7sN6N9etY/wHr/VjXoyTEparrtqEZfdLQMAM9O5NWVN23DQ3viWzF9m94ey1vl/J2Fm9n8/bveXuV3NL3eP9zvF3ORx7j/a851zRcx9sLjf15vJ3J26m8vYK3Cd6qJ5zKTyvwfqvcRs6KPI39m3i/GdsIMH8OXcStuh49uAnwPmoHzCDZJhMaYjjXiLUV62ysZ2Gdi/XDWJdw220tu72GVmJ7E1q2Eb2exLNm4zlz8fyb5bhrSPL2NN5O5ZGZ4u0R3jbi2kW0GDhyE32CR/f+hkk8QuNYp8q38HVqexbwrQHXJ3BFI7ayDK/wtp3v/R968UTHRJRB0qMoNaOdzgUuTgCmtdB2tPdTWCPYm469M3HFk2jNn1MMRxbgyKU4dyrqfAbXW95/Di2lT1OkYQs/MUM5tNlkUNWMyAOyYoBhmAKXYseBGyfu0QaNCxHsnwWIogXPxfbDgCgtBETRvleiTT8CaKCrABH09vU4cgNgAnDsE+AVnwI0YvTfDPy4BRCj7wCitIE2YivHSZR+Qk/g+jbaga2kfRPoOUCMfgWI0R5AhMdSlOngBDpGx+V4BETpTUAEPOAtHFHlPZf7qBX92oD3E3onAxi2a2SuEVAlefW1wNEIxgCJgkjjdyp6Myf6sO0TWSqziF1iv+i0R4/vHac/Kd/x3lRLI51O38KRJokrYrvoEbtFl2gHlp2EC8bNLrTBtpOy7lmRFt3YdgAD+oGd3bzXJzr5zAiOpLF2iBRaqRfbNLYZceAdX+8B3vbb/529vJtSWmfQHpK+Zk7oWkk6YVCJeuG02HZi13vM2jMj9tNq0UYx0QYaMUAzxFH5H62MM8CHAZzZ9a6r9SGLF4u9bt6MMyQGjePjXbK05G5o91HwRg8Nd7aeM51q9Hp7ln+aZJ1EX+i3D+Ddh1jK6sS/PkVFxrH+wyfhGBw9Ceo4HIy7DpeWHCsI2wKPDfMalbgvurE9jPVZuYqn7Wue5e1h/e9p4HWGr9ccDnKA5PyS9x9mvB/W+724YhjyQLf4k33+TyeGJDPuUmOWZYL8CYNFT9NCsRW/W8UGfQj/xUt8hvh3Q+B9beByJPZZ/5x973mR4v/YioOQBZ8DHMRZ7JUoVQr4kmHdJgEdKha6OtHiT5T4Df4bUibh6xKyDvzUmPc+Vat6UmNd5zhzzhZA2CVeps67KqhzFNLKLq5xnFp0D4xlnbvsOrdIvbUOde7iOm+rqJ9btMwbh+ac8T+vujqH5UFi50nIn0/GOu+l/19qXaZ6pPdQFENbtwL/uY8ovV1uIaX0s3U0Lf9rfj1VbKe5cltKpxcH/Vyft7kiusaAI4mIIWnDO3GlG5GTtajg+iJ1kfV0nlnXOufGq85aNhhLWTFjtmF1NbPuCmphlt4LgZqv7JN0wB17xrzOaVedh6p6SqE49ssR6KtzX0nN6B3Rz6rGweOoeD8rCwVFaCI1A6bRxYCJdDugkb4JiNN9AOlFuxzHJ9IUHIljeypgEkts36DTAJPoTECc5gBuYY/LOva4rKPzAF9jv8s69ruso0WAW2kxYBktASynpYCL8G8Z3r4c8He0AnAJjl1En6HVgDvYW7OWvTVr2FuzmK4GfJU+BljKnpu17LlZS58EfJ09NyvYc7OSPg24jf03q/DmW1GvdYB76S7AN+gfAefQ/fQwzkvvzjr6V8Ai9vGsYx/POvoB/RDl+hHgEvb53sFen7X0JD2FMkjfz1r2/ayl/6Zn8XbpAVrFHqBV7AFazB6gdewBWkt7AZdQHx3B21OAyfQqIEFpwCT6M2Ay9QMS9BpgEg0CJtHrgHtpCHAO+5DWsA9pHfuQFrMPaQ37jJrRirejjvdR5LzbpAR/zk8/9Hn6KF2hLfeD0ksE7XxQ/P7EkYlEB8vfCTEq+pjvjmKkJikJObqXLWddY16WrNjNNpOsOCz2ih/zwSTLGE2shZKLJjarEmKVe38BlyhgjCUxelvFm9Bvd6PMPxF76sHZHErG5SswFWtkSpYvxeX5ykK96DLWAr8/A3oZFyPaFhrHGjWsowE6mmXxUKW3ystUaagYzSpHMflZ6VBtlvfZCKI+W8EU19P7xau1yU7iOPB2pALJrLGUzZK9Z6lwGi2uPSox0eYiMX/f+Lm4eMWxTcme49a12m0C+ILCgAL32eHwbcN3DWJ7GOMjL46UlhFZ6hgtJc+hX0Ykj5Y+cV1CjYmVWnyNtxZKnq3QUmeVq/x9PuyNcw8Mh21ZbevIl7qiomUueNVccOgWmhn4vN84WGTsFSwsM9pxJp1N88B3r9L/Z3DvZw0alodsMEkcr4A2/xj3RU37otYHY6V0wPrYWa2n2BJap9js7j3xpEFvuhWvYjoyxDg7yNb0QdSiz6Y3LThyL66Q9vCs1aLiZYczos0ypXUnPHFHpVqYLAVb+Qf5X7vYgbF5cKwlXN2HNdDUarxYor0upU/XcO9hXfOXi1lPxZtBOrHqNd1vpq1zUnG5QI4oUpF5lZRwxIPb+fHyikgebr/1z/Yonoy9RBEcnuY5GKMTd0kU90W4W3487Td1W6LslZFScXPgea99vknJOHXAmoq950qmt+7W1rahovJKbfJyk8ZL1TaJkJhC5XCl6tbq9EqHbyfOiB7dNgqCKGs04H+0dJ1CtkRKcTnI5QPgeIO+C1Aiy7Ptlhts3Ml5x68hBeXFa+I5Te1z0GoqlRpHWQOQetII0zqp+bLVxnmr7/2FEJJoKN4l/og2OYp3D6LsPWjfJKSTqLv+4nc+ft7Pdc2yfCNlm1f5aI/yOppcG1e9bMsAhXJtE14q5KvfMPaPBl6yIJxeHXYMnURLvIJ+2KionysymGmbHHcywqBq+t0TjmpBll4vfgG5+efikHhc3KZosYw65fgTjk4Qm3yc4TCP3lfEH2TUC/b/wNvHxfdQj03iUS2dyJH4F/H7YA22mNzIspQcU5lK7is9omteGjWPqvTdDrWZStNBIWaVvC5ZY00V/ZjNUM8lOS7jJho8cgyrwvHi8g0w+HVJb5lPZUvrtI7FRG+l5WfA9oAc52fY/jX9/mgx3bg0R9Eaar9ejyv+J8emtuQNl5C/AuQtHz/LlZft2Qo5qktyRPO3KDD6FLR4LLCl4p6yRLmVMrZMclhHOQ0ElwV8MRuaTj2GVsl4aGLJdmXvck+teoK+7nWXreKgWK9l7qnaPvNtQ9fsEi96scCWc3brA+/lf3ezDe81YJK2QBpSz54AOYrKynRMQ8R/GdHyafvdBU1hEvpXlm8Gl3+eUzbll3d7zRQ+hKWBLGkNuy0LLLeU9G+XlVxCSn14+ygwb0Tfk7BbSUrFTZ5eUVaAqAc7o8peaFNkhanDPP6ltbVPy13lZ/9kNJ/KYAQPjYmXJV7LzdzXmSC7SClqVdIaHNpqYONYVtO3Zt3iCfSS1nvFMc9N0wPeFvX1f9bsORz5a8Xt8mI9dMNy+gGoSHdx643ujcOBF0wSbxmUYtA/Rnz8Yqar16UX7qhHOp8QeiT2iQ2OvY3xe6vGRZs3O7N3DH1poARf7tGybBBPdse+esoNjr5edIBvdUNG7Zd0VHxfxVLz2V2iE2O3Hdj2PD8/JY5AYpXXddse2qRsHfEge4J2iWewdvC9Oy3tRPzCjDwSbUa/TTckt9ZQttLine 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;
 }
 
@@ -84,6 +77,22 @@
   align-self: flex-end;
 }
 
+.navds-chat--top-text-left .navds-chat__top-text {
+  align-self: flex-start;
+}
+
+.navds-chat--top-text-right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--left .navds-chat__top-text--right {
+  align-self: flex-end;
+}
+
+.navds-chat--right .navds-chat__top-text--left {
+  align-self: flex-start;
+}
+
 .navds-chat__name {
-  font-weight: var(--navds-font-weight-bold);
+  font-weight: var(--a-font-weight-bold);
 }

@navikt/core/css/chips.css

@@ -0,0 +1,137 @@
+.navds-chips {
+  display: flex;
+  gap: var(--a-spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+}
+
+.navds-chips :where(li) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: block;
+}
+
+.navds-chips__chip {
+  all: unset;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: var(--a-spacing-05);
+  margin: 0;
+  padding: 0 var(--a-spacing-3);
+  text-decoration: none;
+  border-radius: var(--a-border-radius-full);
+  min-height: 32px;
+}
+
+.navds-chips--small .navds-chips__chip {
+  min-height: 24px;
+  padding: 0 var(--a-spacing-2);
+}
+
+.navds-chips__toggle {
+  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-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-pressed-bg, var(--a-surface-action-selected));
+  color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
+}
+
+.navds-chips__toggle[aria-pressed="true"]:hover {
+  background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+.navds-chips__toggle:focus-visible {
+  box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+}
+
+.navds-chips__toggle[aria-pressed="true"]:focus-visible,
+.navds-chips__toggle:active:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+}
+
+.navds-chips__removable--action {
+  background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
+  color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
+}
+
+.navds-chips__removable--neutral {
+  background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
+}
+
+.navds-chips__removable-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: grid;
+  place-items: center;
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-chips__toggle-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: grid;
+  place-items: center;
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-chips--small .navds-chips__toggle-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.navds-chips--small .navds-chips__removable-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-chips--small .navds-chips__removable-icon > svg {
+  width: 0.75rem;
+}
+
+.navds-chips__removable--action:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
+}
+
+.navds-chips__removable--neutral:focus-visible {
+  box-shadow: 0 0 0 2px var(--a-border-focus);
+}
+
+.navds-chips__removable--action:hover {
+  background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+.navds-chips__removable--neutral:hover {
+  background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
+}
+
+.navds-chips--icon-left {
+  padding-left: 0.375rem;
+}
+
+.navds-chips--icon-right {
+  padding-right: var(--a-spacing-1);
+}
+
+.navds-chips--small .navds-chips--icon-right {
+  padding-right: var(--a-spacing-05);
+}
+
+.navds-chips--small .navds-chips--icon-left {
+  padding-left: 0.375rem;
+}

@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,49 +111,63 @@
 
 .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
   > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
-.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);
+.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
   > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
-.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);
+.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+  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(: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) + .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,46 +23,46 @@
 }
 
 .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 {
-  padding: 0 0.25rem;
+  padding: 0 0.5rem;
   min-height: 32px;
 }
 
 .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/index.css

@@ -7,6 +7,7 @@
 @import "button.css";
 @import "content-container.css";
 @import "chat.css";
+@import "chips.css";
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";

@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.3.38",
-  "description": "Css for NAV Designsystem components",
-  "author": "NAV Designsystem team",
+  "version": "2.1.6",
+  "description": "CSS for NAV Designsystem",
+  "author": "Aksel | NAV designsystem team",
   "keywords": [
     "css"
   ],
@@ -20,11 +20,11 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^1.3.38",
+    "@navikt/ds-tokens": "^2.1.6",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.3.6",
-    "postcss-cli": "^8.3.1",
+    "postcss": "^8.4.0",
+    "postcss-cli": "^9.0.0",
     "postcss-combine-duplicated-selectors": "10.0.3",
-    "postcss-import": "^14.0.2"
+    "postcss-import": "^14.1.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 {