v2.0.0: Tokens og fontlasting (#1718)

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

.changeset/README.md

@@ -0,0 +1,39 @@
+# Changesets
+
+For versjonering bruker vi løsningen [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
+
+## Howto
+
+- For å lage en ny versjons-entry: `yarn changeset`
+- Velg pakkene som skal versjoneres med `arrowkeys` + `Space`
+
+`🦋 Which packages would you like to include?`
+
+Trykk `Space` for å velge pakkene som skal versjoneres, for så trykke `Enter` for å gå videre.
+
+`🦋 Which packages should have a major bump?`
+
+Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
+
+`🦋 Which packages should have a minor bump?`
+
+Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
+
+Hvis du ikke velger major eller minor, så blir pakkene få en patch-bump
+
+- Commit og push.
+
+## Fixed versjonering
+
+Alle base-pakkene våre har `fixed versjonering`. Dette tilsier at en bump på en av disse vil bumpe alle til samme versjon
+
+```sh
+  "@navikt/ds-react",
+  "@navikt/ds-css",
+  "@navikt/ds-icons",
+  "@navikt/ds-tokens",
+  "@navikt/ds-tailwind",
+  "@navikt/ds-css-internal",
+  "@navikt/ds-react-internal",
+  "@navikt/ds-codemod"
+```

.changeset/config.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "navikt/Designsystemet" }
+  ],
+  "commit": false,
+  "fixed": [
+    [
+      "@navikt/ds-react",
+      "@navikt/ds-css",
+      "@navikt/ds-icons",
+      "@navikt/ds-tokens",
+      "@navikt/ds-tailwind",
+      "@navikt/ds-css-internal",
+      "@navikt/ds-react-internal",
+      "@navikt/ds-codemod"
+    ]
+  ],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": ["shadow-dom", "aksel.nav.no"],
+
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "updateInternalDependents": "always"
+  }
+}

.github/ISSUE_TEMPLATE/bug-report.md

@@ -3,25 +3,12 @@ name: Bug Report
 about: Meld inn bugs eller feil
 title: "[BUG]"
 labels: "bug \U0001F41B"
-assignees: ''
-
+assignees: ""
 ---
 
-## Hvilken av tjenestene våre gjelder det?
+## Hva er feilen/problemet?
 
 <!--
-  Sett en x i type pakke det gjelder:
-- [x] type
--->
-
-- [ ] `Komponenter`
-- [ ] `Stiler`
-- [ ] `Ikoner`
-- [ ] `Annet`
-
-## Beskriv feilen/problemet
-
-<!-- 
 > Beskriv hva slags problem(er) som oppstår
 
 > Hva forventet du skulle oppstå?
@@ -31,7 +18,7 @@ assignees: ''
 
 (skriv her.)
 
-## Steg for å reprodusere problemet
+## Steg for å reprodusere problemet (valgfri)
 
 <!--
 1. Steg en
@@ -41,11 +28,11 @@ assignees: ''
 
 (skriv her.)
 
-## Eksempel/Tilleggsinformasjon
+## Eksempel/Tilleggsinformasjon (valgfri)
 
 <!--
 Screenshots eller kodesnippets
-Legg gjerne ved ekstrainfo som nettleser, desktop/mobil etc
+Legg gjerne ved ekstrainfo som nettleser eller desktop/mobil hvis det er relevant.
 -->
 
 ```

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,24 +1,23 @@
 ---
 name: Feature Request
-about: Foreslå noe nytt for designsystemet
+about: Foreslå noe nytt!
 title: "[NEW]"
 labels: new ✨
-assignees: ''
-
+assignees: ""
 ---
 
-## Beskriv forespørselen
+## Hva?
 
 (skriv her.)
 
-## Hvilken funksjon vil dette har for bruker?
+## Hva løser dette?
 
 (skriv her.)
 
-## Eksempler/Tilleggsinformasjon 
+## Eksempler/Info
 
 <!--
-Del gjerne eksempel av lignende løsninger som er i bruk idag, URL/Screenshots etc. 
+Del gjerne eksempel av lignende løsninger som er i bruk idag, URL/Screenshots etc.
 Link gjerne til relaterte issues her også.
 -->
 

.github/workflows/aksel-dev.yml

@@ -0,0 +1,71 @@
+name: Deploy aksel.dev.nav.no
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - next
+
+env:
+  IMAGE: ghcr.io/navikt/designsystemet
+
+jobs:
+  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
+        with:
+          ref: "next"
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+          echo "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
+          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
+          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> 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 docgen
+          yarn workspace aksel.nav.no build:next
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # 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,81 @@
+name: Deploy aksel.nav.no
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - "aksel.nav.no/**"
+
+env:
+  IMAGE: ghcr.io/navikt/designsystemet
+
+jobs:
+  build_and_deploy:
+    name: Build and deploy to prod-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 "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
+          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
+          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> 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
+          yarn docgen
+
+      - name: Tests
+        run: yarn workspace aksel.nav.no test
+
+      - name: E2E
+        run: NEXT_PUBLIC_TEST=true yarn workspace website e2e
+
+      - name: Update sanity sync
+        run: yarn workspace aksel.nav.no sanity:update
+
+      - name: Build application
+        run: yarn workspace aksel.nav.no build:next
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # 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: 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@ab80d026d4753220c4243394c07c7d80f9638d06 # 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,39 @@
+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: yarn
+
+      - name: Export dataset
+        run: SANITY_TOKEN=${{secrets.SANITY_DATASET_EDITOR_TOKEN}} yarn workspace aksel.nav.no sanity: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/sanity
+          destination: "aksel-website-prod/backups"
+          glob: "**/backup-*.tar.gz"

.github/workflows/build-publish.yml

@@ -1,99 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Build -> Test -> Publish
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-  workflow_dispatch:
-
-jobs:
-  test-build:
-    if: "!contains(github.event.head_commit.message, '[ci skip]')"
-    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: Node-modules cache
-        uses: actions/cache@v2
-        id: node-cache
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: install
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install
-      - name: postinstall
-        if: steps.node-cache.outputs.cache-hit == 'true'
-        run: yarn postinstall
-      - name: Boot
-        run: yarn boot
-      - name: Eslint and Stylelint
-        run: yarn lint
-      - name: Test
-        run: yarn test
-
-  publish-npm:
-    needs: test-build
-    runs-on: ubuntu-latest
-    env:
-      NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
-    if: github.event_name == 'push' && contains(github.event.head_commit.message, '[fix]') || contains(github.event.head_commit.message, '[feature]') || contains(github.event.head_commit.message, '[breaking]')
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: "0"
-          token: ${{secrets.GIT_REPO}}
-      - uses: actions/setup-node@v2
-        with:
-          registry-url: https://registry.npmjs.org
-          node-version: 14
-      - name: Node-modules cache
-        uses: actions/cache@v2
-        id: node-cache
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: install
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
-      - name: Boot
-        run: yarn boot
-      - name: Generate docs
-        run: yarn docgen
-      - name: Setup github connection for auth
-        run: |
-          git config --global user.email "github-actions[bot]@users.noreply.github.com"
-          git config --global user.name "github-actions[bot]"
-          git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
-        env:
-          NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
-
-      - name: Update changed packages with PATCH
-        if: "contains(github.event.head_commit.message, '[fix]')"
-        run: yarn lerna version patch --include-merged-tags --yes
-      - name: Update changed packages with MINOR
-        if: "contains(github.event.head_commit.message, '[feature]')"
-        run: yarn lerna version minor --include-merged-tags --yes
-      - name: Update changed packages with MAJOR
-        if: "contains(github.event.head_commit.message, '[breaking]')"
-        run: yarn lerna version major --include-merged-tags --yes
-      - name: Publish to NPM registry
-        run: yarn lerna publish --no-verify-access from-package --yes
-
-      - name: Create a .npmrc file for the github package repository
-        uses: FerLuisxd/create-npmrc@3
-        with:
-          org_name: navikt
-        env:
-          AUTH_TOKEN: ${{secrets.GIT_REPO}}
-      - name: Publish to Github registry
-        run: |
-          yarn lerna publish --registry https://npm.pkg.github.com from-package --yes

.github/workflows/chromatic.yml

@@ -1,46 +1,58 @@
-name: Chromatic
+name: Visual Regression Tests
 
 on:
   push:
-    branches: [master]
+    branches:
+      - "master"
+    paths:
+      - "@navikt/**"
   pull_request:
-    branches: [master]
+    branches: [master, next]
+    paths:
+      - "@navikt/**"
 
 jobs:
-  chromatic-pr:
-    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
+  visual_regression_test:
+    name: "visual regression test (chromatic)"
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v1
+
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
-      - name: Node-modules cache
-        uses: actions/cache@v2
-        id: node-cache
+          node-version: 16.13.0
+          cache: yarn
+
+      - name: Restore cache
+        uses: actions/cache@v3
         with:
           path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: install
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install
-      - name: postinstall
-        if: steps.node-cache.outputs.cache-hit == 'true'
-        run: yarn postinstall
-      - name: Boot
+          key: ${{ runner.os }}-visual-regression-test-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-visual-regression-test-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build packages
         run: yarn boot
-      - name: run chromatic
+
+      - name: Chromatic
         uses: chromaui/action@v1
         id: chromatic_tests
         continue-on-error: true
         with:
+          autoAcceptChanges: "master"
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: x3xqdfgkujg
           exitZeroOnChanges: false
+        env:
+          STORYBOOK_GITHUB_SHA: ${{ github.sha }}
 
       - name: replace storybook url
+        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
         uses: frabert/replace-string-action@v2.0
         id: storybook_url
         with:
@@ -49,12 +61,14 @@ jobs:
           replace-with: ""
 
       - name: Get commit sha
+        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
         id: vars
         shell: bash
         run: |
           echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
 
       - name: Find Comment
+        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
         uses: peter-evans/find-comment@v1
         id: fc
         with:
@@ -63,7 +77,7 @@ jobs:
           body-includes: Chromatic build-output
 
       - name: Create or update comment
-        if: steps.chromatic_tests.outcome == 'success'
+        if: steps.chromatic_tests.outcome == 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
         uses: peter-evans/create-or-update-comment@v1
         with:
           comment-id: ${{ steps.fc.outputs.comment-id }}
@@ -73,13 +87,13 @@ jobs:
 
             - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
             - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
-            - :white_check_mark: SUCCESS :white_check_mark:
+            - :white_check_mark: No changes detected :white_check_mark:
 
             commit: `${{ steps.vars.outputs.sha_short }}`
           edit-mode: replace
 
       - name: Create or update failed comment
-        if: steps.chromatic_tests.outcome != 'success'
+        if: steps.chromatic_tests.outcome != 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
         uses: peter-evans/create-or-update-comment@v1
         with:
           comment-id: ${{ steps.fc.outputs.comment-id }}
@@ -89,38 +103,7 @@ jobs:
 
             - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
             - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
-            - :no_entry_sign: FAILED :no_entry_sign:, review endringer.
+            - :no_entry_sign: Changes detected :no_entry_sign:, review endringer.
 
             commit: `${{ steps.vars.outputs.sha_short }}`
           edit-mode: replace
-
-  chromatic-push:
-    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name == 'push'"
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 14
-      - name: Node-modules cache
-        uses: actions/cache@v2
-        id: node-cache
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: install
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install
-      - name: postinstall
-        if: steps.node-cache.outputs.cache-hit == 'true'
-        run: yarn postinstall
-      - name: Boot
-        run: yarn boot
-      - name: run chromatic
-        uses: chromaui/action@v1
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          projectToken: x3xqdfgkujg
-          autoAcceptChanges: true

.github/workflows/ci.yml

@@ -0,0 +1,44 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+      - next
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  build:
+    name: "Validate build"
+    if: "!contains(github.event.head_commit.message, '[ci skip]')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.13.0
+          cache: yarn
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-test-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-test
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Boot (build packages)
+        run: yarn boot
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test

.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,56 @@
+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
+    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 "ALGOLIA_ADMIN=${{ secrets.ALGOLIA_ADMIN }}" >> aksel.nav.no/website/.env
+          echo "ALGOLIA_ID=${{ secrets.ALGOLIA_ID}}" >> aksel.nav.no/website/.env
+          echo "TRELLO_TOKEN=${{ secrets.TRELLO_TOKEN }}" >> 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
+          yarn docgen
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn workspace website e2e
+      - 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,31 @@
+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: nais/frontend-plattform-cdn-upload-action@main
+        with:
+          cdn-environment: cdn.nav.no
+          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

@@ -0,0 +1,67 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  build:
+    name: "Release packages"
+    if: "!contains(github.event.head_commit.message, '[ci skip]')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.13.0
+          cache: yarn
+
+      - 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: Create release Pull Request or publish to NPM
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          version: yarn version
+          publish: yarn release
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTOMATION }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
+
+      - name: Creating .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            @navikt:registry=https://npm.pkg.github.com
+            //npm.pkg.github.com/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.GIT_REPO }}
+
+      - name: Publish to GPR
+        if: steps.changesets.outputs.published == 'true'
+        id: changesets-gpr
+        uses: changesets/action@v1
+        with:
+          publish: yarn changeset publish
+          createGithubReleases: false
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTOMATION }}
+          GITHUB_TOKEN: ${{ secrets.GIT_REPO }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}

.github/workflows/searchindex.yml

@@ -0,0 +1,25 @@
+name: Indexing search
+on:
+  workflow_dispatch:
+  schedule:
+    # 01.00 & 12.00 every day
+    - cron: "00 01,12 * * *"
+
+jobs:
+  searchcrawl:
+    name: Search-indexing aksel.nav.no
+    runs-on: ubuntu-latest
+    env:
+      APPLICATION_ID: ${{ secrets.ALGOLIA_ID}}
+      API_KEY: ${{ secrets.ALGOLIA_ADMIN }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Read crawler.json
+        id: algolia_config
+        run: echo "::set-output name=config::$(cat ./aksel.nav.no/crawler.json | jq -r tostring)"
+      - name: Push indices to Algolia
+        uses: signcl/docsearch-scraper-action@master
+        env:
+          APPLICATION_ID: ${{ secrets.ALGOLIA_ID}}
+          API_KEY: ${{ secrets.ALGOLIA_ADMIN }}
+          CONFIG: ${{ steps.algolia_config.outputs.config }}

.github/workflows/update-icons.yml

@@ -1,20 +1,20 @@
 name: Update Icons
 
 on:
-#  schedule:
- #   - cron: 0 0 * * *
+  #  schedule:
+  #   - cron: 0 0 * * *
   workflow_dispatch:
 
 jobs:
   update:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 14
       - name: Node-modules cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: "**/node_modules"
@@ -26,7 +26,7 @@ jobs:
         if: steps.node-cache.outputs.cache-hit == 'true'
         run: yarn postinstall
       - name: Update Icons
-        run: yarn update:icons
+        run: yarn workspace @navikt/ds-icons update
         env:
           FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
       - name: Create Pull Request
@@ -39,4 +39,4 @@ jobs:
           author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
           signoff: false
           delete-branch: true
-          title: "[FIX] Ikonsynk Figma"
+          title: "Ikonsynk Figma"

.github/workflows/update-tokens.yml

@@ -7,12 +7,12 @@ jobs:
   update:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 14
       - name: Node-modules cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: "**/node_modules"
@@ -24,7 +24,7 @@ jobs:
         if: steps.node-cache.outputs.cache-hit == 'true'
         run: yarn postinstall
       - name: Update tokens
-        run: yarn update:tokens
+        run: yarn workspace @navikt/ds-tokens update
         env:
           FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
       - name: Create Pull Request
@@ -33,7 +33,7 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           branch: figma-tokens-sync
           delete-branch: true
-          title: "[FEATURE] Tokens sync Figma"
+          title: "Tokens sync Figma"
           commit-message: "Tokens synket fra figma"
           committer: GitHub <noreply@github.com>
           signoff: false

.gitignore

@@ -107,8 +107,8 @@ utilities/**/css
 
 */static/*.zip
 */static/png
-@navikt/core/icons/NAV-ikonpakke-png.zip
-@navikt/core/icons/NAV-ikonpakke-svg.zip
+@navikt/icons/NAV-ikonpakke-png.zip
+@navikt/icons/NAV-ikonpakke-svg.zip
 */**/NAV-ikonpakke-png.zip
 */**/NAV-ikonpakke-svg.zip
 
@@ -125,4 +125,25 @@ _docs.json
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+*/icons/src
+*/icons/png
+*/core/icons
+/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/

.husky/_/husky.sh

@@ -1,10 +1,12 @@
-#!/bin/sh
+#!/usr/bin/env sh
 if [ -z "$husky_skip_init" ]; then
   debug () {
-    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
+    if [ "$HUSKY_DEBUG" = "1" ]; then
+      echo "husky (debug) - $1"
+    fi
   }
 
-  readonly hook_name="$(basename "$0")"
+  readonly hook_name="$(basename -- "$0")"
   debug "starting $hook_name..."
 
   if [ "$HUSKY" = "0" ]; then
@@ -17,14 +19,18 @@ if [ -z "$husky_skip_init" ]; then
     . ~/.huskyrc
   fi
 
-  export readonly husky_skip_init=1
+  readonly husky_skip_init=1
+  export husky_skip_init
   sh -e "$0" "$@"
   exitCode="$?"
 
   if [ $exitCode != 0 ]; then
     echo "husky - $hook_name hook exited with code $exitCode (error)"
-    exit $exitCode
   fi
 
-  exit 0
+  if [ $exitCode = 127 ]; then
+    echo "husky - command not found in PATH=$PATH"
+  fi
+
+  exit $exitCode
 fi

.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/deprecated.stories.mdx

@@ -1,12 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-
-<Meta title="ds-react(deprecated)/intro" />
-
-# Utdaterte pakker
-
-På sikt vil komponentene under bli flyttet ut av ds-react eller erstattes av andre komponenter
-
-- PageHeader -> @navikt/ds-react-navno
-- MicroCard -> @navikt/ds-react-navno
-
-- StepIndicator -> Horizontal `<Stepper />`

.storybook/layout.css

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

.storybook/main.js

@@ -17,10 +17,8 @@ module.exports = {
   },
   stories: () => [...getStories(), "./*.stories.mdx"],
   addons: [
-    "@storybook/addon-docs",
     "@storybook/addon-a11y",
     "@whitespace/storybook-addon-html",
-    "storybook-addon-css-user-preferences",
     {
       name: "@storybook/addon-storysource",
       options: {

.storybook/preview.js

@@ -7,7 +7,7 @@ export const parameters = {
   options: {
     storySort: {
       method: "",
-      order: ["Intro", "ds-icons", "ds-react", ["Default"]],
+      order: ["Intro", "ds-icons", "ds-react", ["form"], ["Default"]],
       locales: "",
     },
   },
@@ -21,13 +21,33 @@ export const parameters = {
         value: "#ffffff",
       },
       {
-        name: "Alternate",
-        value: "#f7f7f7",
-      },
-      {
-        name: "Inverted",
-        value: "#292929",
+        name: "Darkmode",
+        value: "#262626",
       },
     ],
   },
 };
+
+export const globalTypes = {
+  theme: {
+    name: "Theme",
+    description: "Global theme for components",
+    defaultValue: "light",
+    toolbar: {
+      icon: "circlehollow",
+      items: [
+        { value: "light", icon: "circlehollow", title: "light" },
+        { value: "dark", icon: "circle", title: "dark" },
+      ],
+      showName: true,
+    },
+  },
+};
+
+export const withTheme = (StoryFn, context) => (
+  <div data-theme={context.parameters.theme || context.globals.theme} lang="no">
+    <StoryFn />
+  </div>
+);
+
+export const decorators = [withTheme];

.storybook/theme.js

@@ -9,7 +9,7 @@ export default create({
   fontCode: "monospace",
 
   // Text colors
-  textColor: "#292929",
+  textColor: "#262626",
   textInverseColor: "rgba(255,255,255,0.9)",
 
   colorSecondary: "rgba(0, 36, 58, 1)",
@@ -18,5 +18,5 @@ export default create({
   barTextColor: "rgba(0, 91, 130, 1)",
   barSelectedColor: "rgba(0, 36, 58, 1)",
 
-  brandTitle: "NAV Designsystem",
+  brandTitle: "Aksel",
 });

.storybook/velkommen.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 
 <Meta title="Intro/Velkommen" />
 
-# NAV designsystem
+# Aksel, NAVs designsystem
 
 - [Dokumentasjon](https://aksel.nav.no/designsystem)
 - [Komponenter](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
@@ -12,10 +12,10 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 ### Kjernepakke
 
 ```bash
-yarn add @navikt/ds-react @navikt/ds-css @navikt/ds-icons
+yarn add @navikt/ds-react @navikt/ds-css
 ```
 
-### Pakke for interne-flater
+### Interne-flater
 
 ```bash
 yarn add @navikt/ds-react-internal @navikt/ds-css-internal
@@ -31,14 +31,9 @@ yarn add @navikt/ds-icons
 
 ```jsx
 import { Heading } from "@navikt/ds-react";
+import "@navikt/ds-css";
 
 <Heading level="1" size="xlarge">
   Sidetitel
 </Heading>;
 ```
-
-## Bidra
-
-Hjelp oss med å forbedre designsystemet med feedback eller kode-hjelp
-
-- [Kode](https://github.com/navikt/Designsystemet/tree/master/%40navikt)

.yarnrc.yml

@@ -1,3 +1,5 @@
+enableImmutableInstalls: false
+
 nodeLinker: node-modules
 
 plugins:

@navikt/codemod/.gitignore

@@ -3,4 +3,7 @@
 bin/*.js
 *.js.map
 !transforms/**/__testfixtures__/**/*.js
+!transforms/**/tests/**/*.output.js
+!transforms/**/tests/**/*.input.js
+transforms/**/tests/**/*.test.js
 !jest.config.js

@navikt/codemod/CHANGELOG.md

@@ -0,0 +1,47 @@
+# @navikt/ds-codemod
+
+## 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

@@ -0,0 +1,170 @@
+# Aksel Codemods
+
+Collection of Codemods for easier migration between breaking changes in NAVs designsystem-packages.
+
+## Usage
+
+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 (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 <migration> <path>
+```
+
+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)
+```
+
+## V1 -> V2
+
+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. This transform should only be ran once.
+
+Includes these transforms
+
+- v1/tabs
+- v1/chat
+- v1/pagination
+
+### tabs
+
+`npx @navikt/ds-codemod v1/tabs src`
+
+```diff
+<Tabs
+  defaultValue="logg"
+  onChange={(x) => console.log(x)}
+-  loop
++  iconPosition="left"
+>
+  <Tabs.List
+-    loop
+  >
+    <Tabs.Tab
+      value="logg"
+      label="logg"
+-     iconPosition="left"
+    />
+  </Tabs.List>
+  <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+</Tabs>
+```
+
+### chat
+
+`npx @navikt/ds-codemodmod v1/chat src`
+
+```diff
+-<SpeechBubble
++<Chat
+-  illustration={<Illustration />}
+-  topText="Ola Normann 01.01.21 14:00"
+-  illustrationBgColor="blue"
++  avatar={<Illustration />}
++  name="Ola Normann 01.01.21 14:00"
++  avatarBgColor="blue"
+  backgroundColor="red"
+>
+- <SpeechBubble.Bubble>
++ <Chat.Bubble>
+    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+- </SpeechBubble.Bubble>
++ </Chat.Bubble>
+-</SpeechBubble>
++</Chat>
+```
+
+### pagination
+
+`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.
+
+```diff
+-<Pagiation />
++<Pagiation size="small"/>
+
+-<Pagiation size="medium"/>
++<Pagiation size="small"/>
+
+-<Pagiation size="small"/>
++<Pagiation size="xsmall"/>
+```
+
+## 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,191 +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/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/clean.mjs

@@ -0,0 +1,10 @@
+import { deleteSync } from "del";
+
+deleteSync([
+  "utils/**/*.js",
+  "bin/**/*.js",
+  "transforms/**/*.js",
+  "!transforms/**/__testfixtures__",
+  "!transforms/**/tests/*.input.*",
+  "!transforms/**/tests/*.output.*",
+]);

@navikt/codemod/jest.config.js

@@ -1,5 +1,5 @@
 const customJestConfig = {
-  testMatch: ["**/__tests__/**/*.js"],
+  testMatch: ["**/__tests__/**/*.js", "**/tests/*.test.js"],
   verbose: true,
   rootDir: "./transforms",
 };

@navikt/codemod/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "1.0.2",
-  "private": true,
-  "description": "NAV designsystem codemods",
-  "author": "NAV Designsystem team",
+  "version": "2.0.0",
+  "description": "Aksel codemods for NAVs designsystem",
+  "author": "Aksel | NAV designsystem team",
   "license": "MIT",
   "keywords": [
     "react",
@@ -11,16 +10,20 @@
     "jscodeshift"
   ],
   "files": [
-    "transforms/*.js",
+    "transforms/**/*.js",
+    "utils/**/*.js",
     "bin/*.js",
     "lib/**/*.js",
-    "lib/cra-to-next/gitignore"
+    "lib/cra-to-next/gitignore",
+    "tokens-map.mjs"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "dev": "tsc --watch -p tsconfig.json",
-    "test": "jest",
-    "test:watch": "jest --watch"
+    "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"
   },
   "bin": "./bin/ds-codemod.js",
   "repository": {
@@ -36,18 +39,26 @@
     "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",
-    "meow": "7.0.1"
+    "lodash": "4.17.21",
+    "meow": "7.0.1",
+    "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",
-    "typescript": "^4.7.2"
+    "del": "7.0.0",
+    "typescript": "^4.8.0"
   },
   "sideEffects": false,
   "engines": {
     "node": ">=12.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

@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/__tests__/rename-prop.ts

@@ -1,24 +0,0 @@
-export {};
-
-jest.autoMockOff();
-const defineTest = require("jscodeshift/dist/testUtils").defineTest;
-
-const tests = [
-  {
-    fixture: "rename",
-    options: {
-      component: "SpeechBubble",
-      from: "illustration",
-      to: "avatar",
-    },
-  },
-];
-
-for (const test of tests) {
-  defineTest(
-    __dirname,
-    "rename-prop",
-    test.options,
-    `rename-prop/${test.fixture}`
-  );
-}

@navikt/codemod/transforms/rename-prop/rename-prop.ts

@@ -1,4 +1,4 @@
-import renameProps from "./utils/rename-props";
+import renameProps from "../../utils/rename-props";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

@navikt/codemod/transforms/rename-prop/tests/rename-prop.test.ts

@@ -0,0 +1,17 @@
+import { check } from "../../../utils/check";
+
+const migration = "rename-prop";
+const fixtures = ["rename"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+    options: {
+      component: "SpeechBubble",
+      from: "illustration",
+      to: "avatar",
+    },
+  });
+}

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/complete.input.js

@@ -8,8 +8,9 @@ export const Page = () => {
       topText="Ola Normann 01.01.21 14:00"
       backgroundColor="red"
       illustrationBgColor="blue"
+      {...testProps}
     >
-      <SpeechBubble.Bubble>
+      <SpeechBubble.Bubble {...testProps}>
         Aute minim nisi sunt mollit duis sunt nulla minim non proident.
       </SpeechBubble.Bubble>
       <SpeechBubble.Bubble>

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/complete.output.js

@@ -8,8 +8,9 @@ export const Page = () => {
       name="Ola Normann 01.01.21 14:00"
       backgroundColor="red"
       avatarBgColor="blue"
+      {...testProps}
     >
-      <Chat.Bubble>
+      <Chat.Bubble {...testProps}>
         Aute minim nisi sunt mollit duis sunt nulla minim non proident.
       </Chat.Bubble>
       <Chat.Bubble>

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/idempotent.input.js

@@ -3,9 +3,16 @@ import { Pagination, Button } from "@navikt/ds-react";
 export const Demo = () => {
   return (
     <div>
-      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination
+        size="small"
+        onPageChange={setPage}
+        data-version="v1"
+        {...testProps}
+      />
       <Pagination size="small" onPageChange={setPage} data-version="v1" />
       <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
+      <Pagination onPageChange={setPage} />
+      <Pagination size="small" onPageChange={setPage} />
     </div>
   );
 };

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/idempotent.output.js

@@ -3,7 +3,14 @@ import { Pagination, Button } from "@navikt/ds-react";
 export const Demo = () => {
   return (
     <div>
+      <Pagination
+        size="small"
+        onPageChange={setPage}
+        data-version="v1"
+        {...testProps}
+      />
       <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
       <Pagination size="small" onPageChange={setPage} data-version="v1" />
       <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
     </div>

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/import.output.js

@@ -3,9 +3,9 @@ import { Pagination as DsPagination, Button } from "@navikt/ds-react";
 export const Demo = () => {
   return (
     <div>
-      <DsPagination size="small" onPageChange={setPage} />
-      <DsPagination size="small" onPageChange={setPage} />
-      <DsPagination size="xsmall" onPageChange={setPage} />
+      <DsPagination size="small" onPageChange={setPage} data-version="v1" />
+      <DsPagination size="small" onPageChange={setPage} data-version="v1" />
+      <DsPagination size="xsmall" onPageChange={setPage} data-version="v1" />
     </div>
   );
 };

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/size.output.js

@@ -3,9 +3,9 @@ import { Pagination, Button } from "@navikt/ds-react";
 export const Demo = () => {
   return (
     <div>
-      <Pagination size="small" onPageChange={setPage} />
-      <Pagination size="small" onPageChange={setPage} />
-      <Pagination size="xsmall" onPageChange={setPage} />
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
     </div>
   );
 };

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/complete.input.js

@@ -4,9 +4,9 @@ const TabComp = () => {
   return (
     /* prettier-ignore */
     <div>
-      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
-        <Tabs.List loop={false}>
-          <Tabs.Tab value="logg" iconPosition={props.left} label="logg" />
+      <Tabs defaultValue="logg" onChange={(x) => console.log(x)} {...testProps}>
+        <Tabs.List loop={false} {...testProps}>
+          <Tabs.Tab value="logg" iconPosition={props.left} label="logg" {...testProps}/>
           <Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
         </Tabs.List>
         <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/complete.output.js

@@ -7,10 +7,11 @@ const TabComp = () => {
       <Tabs
         defaultValue="logg"
         onChange={(x) => console.log(x)}
+        {...testProps}
         loop={false}
         iconPosition={props.left}>
-        <Tabs.List>
-          <Tabs.Tab value="logg" label="logg" />
+        <Tabs.List {...testProps}>
+          <Tabs.Tab value="logg" label="logg" {...testProps} />
           <Tabs.Tab value="logg2" label="logg2medlangtekst" />
         </Tabs.List>
         <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>

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

@@ -1,4 +1,4 @@
-import renameProps from "../utils/rename-props";
+import renameProps from "../../utils/rename-props";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -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

@@ -8,6 +8,22 @@ export default function transformer(file, api, options) {
 
   const root = j(file.source);
 
+  function addMigrationTag(node) {
+    const attributes = node.openingElement.attributes;
+    const isMigrated = attributes.find(
+      (node) =>
+        node.type === "JSXAttribute" &&
+        node.name.name === "data-version" &&
+        node.value.value === "v1"
+    );
+
+    if (!isMigrated) {
+      attributes.push(
+        j.jsxAttribute(j.jsxIdentifier("data-version"), j.literal("v1"))
+      );
+    }
+  }
+
   /* https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/variant-prop.js */
   function addExplicitStandardProp(node) {
     const attributes = node.openingElement.attributes;
@@ -19,6 +35,7 @@ export default function transformer(file, api, options) {
       attributes.unshift(
         j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small"))
       );
+      addMigrationTag(node);
     }
   }
 
@@ -37,19 +54,25 @@ 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"
       );
+
       parent.value.openingElement?.attributes.forEach((x, index) => {
+        let didUpdate = false;
         if (x.name?.name === "size" && x.type === "JSXAttribute" && !skip) {
           /* addExplicitStandardProp */
           if (x.value.value === "medium") {
             x.value = j.literal("small");
+            didUpdate = true;
           } else if (x.value.value === "small") {
             x.value = j.literal("xsmall");
+            didUpdate = true;
           }
+
+          didUpdate && addMigrationTag(parent.value);
         }
       });
       addExplicitStandardProp(parent.value);

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

@@ -0,0 +1,15 @@
+import transformTabs from "./tabs";
+import transformChat from "./chat";
+import transformPagination from "./pagination";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  file.source = transformTabs(file, api, options);
+  file.source = transformChat(file, api, options);
+  file.source = transformPagination(file, api, options);
+
+  return file.source;
+}

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

@@ -1,4 +1,4 @@
-import renameProps from "../utils/rename-props";
+import renameProps from "../../utils/rename-props";
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -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.input.css

@@ -0,0 +1,7 @@
+.test {
+  color: var(--navds-global-color-blue-100);
+  color: var(--navds-global-color-red-100);
+
+  --navds-global-color-red-100: var(--navds-global-color-green-100);
+  --navds-global-color-blue-100: red;
+}

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

@@ -0,0 +1,16 @@
+const StyledDiv = styled`
+--navds-global-color-red-100: var(--navds-global-color-green-100);
+--navds-global-color-blue-100: red;
+
+.test{
+  color: var(--navds-global-color-blue-100);
+}
+`;
+
+<style>
+  {`
+  .test{
+    color: var(--navds-global-color-blue-100);
+  }
+  `}
+</style>;

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

@@ -0,0 +1,7 @@
+.test {
+  color: var(--a-blue-100);
+  color: var(--a-red-100);
+
+  --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

@@ -0,0 +1,16 @@
+const StyledDiv = styled`
+--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);
+}
+`;
+
+<style>
+  {`
+  .test{
+    color: var(--a-blue-100);
+  }
+  `}
+</style>;

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

@@ -0,0 +1,18 @@
+import { check } from "../../../../utils/check";
+
+const migration = "update-css-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-css-tokens/update-css-tokens.ts

@@ -0,0 +1,22 @@
+import { tokens } from "../../../tokens-map.mjs";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+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]);
+  });
+
+  return src;
+}

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

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import {
+  NavdsGlobalColorBlue400 as abc132,
+  NavdsGlobalColorGray100,
+  NavdsGlobalColorGray400,
+  NavdsSemanticColorLink,
+} from "@navikt/ds-tokens/dist/tokens";
+import { BodyShort } from "@navikt/ds-react";
+
+const StyledNavLink = styled(NavLink)`
+  border-bottom: 5px solid white;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+  :hover {
+    border-bottom: 5px solid ${abc132};
+    p {
+      color: ${NavdsSemanticColorLink};
+    }
+  }
+  &.active {
+    background-color: ${NavdsGlobalColorGray100};
+    border-bottom: 5px solid ${NavdsSemanticColorLink};
+
+    .typo-normal {
+      font-weight: bold;
+    }
+  }
+`;
+
+const StyledLenketekst = styled(BodyShort)`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const StyledTekst = styled(BodyShort)`
+  border-bottom: 5px solid white;
+  color: ${NavdsGlobalColorGray400};
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+`;
+
+const Fane = ({ side, behandlingId, index, deaktivert }) => {
+  const { gåTilUrl } = useApp();
+  const fanenavn = side.navn;
+  return (
+    <>
+      {deaktivert && (
+        <StyledTekst size={"small"}>
+          {index + 1}. {fanenavn}
+        </StyledTekst>
+      )}
+      {!deaktivert && (
+        <StyledNavLink
+          key={side.navn}
+          to={`/behandling/${behandlingId}/${side.href}`}
+          onClick={(e) => {
+            e.preventDefault();
+            gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
+          }}
+        >
+          <StyledLenketekst size={"small"}>
+            {index + 1}. {fanenavn}
+          </StyledLenketekst>
+        </StyledNavLink>
+      )}
+    </>
+  );
+};
+
+export default Fane;

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

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import {
+  ABlue400,
+  AGray100,
+  AGray400,
+  ATextAction,
+} from "@navikt/ds-tokens/dist/tokens";
+import { BodyShort } from "@navikt/ds-react";
+
+const StyledNavLink = styled(NavLink)`
+  border-bottom: 5px solid white;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+  :hover {
+    border-bottom: 5px solid ${ABlue400};
+    p {
+      color: ${ATextAction};
+    }
+  }
+  &.active {
+    background-color: ${AGray100};
+    border-bottom: 5px solid ${ATextAction};
+
+    .typo-normal {
+      font-weight: bold;
+    }
+  }
+`;
+
+const StyledLenketekst = styled(BodyShort)`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const StyledTekst = styled(BodyShort)`
+  border-bottom: 5px solid white;
+  color: ${AGray400};
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+`;
+
+const Fane = ({ side, behandlingId, index, deaktivert }) => {
+  const { gåTilUrl } = useApp();
+  const fanenavn = side.navn;
+  return (
+    <>
+      {deaktivert && (
+        <StyledTekst size={"small"}>
+          {index + 1}. {fanenavn}
+        </StyledTekst>
+      )}
+      {!deaktivert && (
+        <StyledNavLink
+          key={side.navn}
+          to={`/behandling/${behandlingId}/${side.href}`}
+          onClick={(e) => {
+            e.preventDefault();
+            gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
+          }}
+        >
+          <StyledLenketekst size={"small"}>
+            {index + 1}. {fanenavn}
+          </StyledLenketekst>
+        </StyledNavLink>
+      )}
+    </>
+  );
+};
+
+export default Fane;

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

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

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

@@ -0,0 +1,67 @@
+import type { JSCodeshift } from "jscodeshift";
+import {
+  getImportSpecifier,
+  getImportSpecifierName,
+  renameImportSpecifier,
+} from "../../../utils/imports";
+import { translateToken } from "../../../utils/translate-token";
+import { tokens } from "../../../tokens-map.mjs";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file: JSCodeshift, api) {
+  let src = file.source;
+
+  const j = api.jscodeshift as JSCodeshift;
+
+  let root = j(file.source);
+
+  const jsImport = root.find(j.ImportDeclaration).filter((x) => {
+    return ["@navikt/ds-tokens/dist/tokens"].includes(
+      x.node.source.value as string
+    );
+  });
+
+  if (!jsImport) {
+    return src;
+  }
+
+  tokens.forEach((x) => {
+    const name = translateToken(x[0], "js");
+    const out = translateToken(x[1], "js");
+
+    let foundName: string = "";
+
+    getImportSpecifier(j, root, name, "@navikt/ds-tokens/dist/tokens").forEach(
+      (x) => (foundName = x.node.imported.name)
+    );
+
+    if (name === foundName) {
+      const localName =
+        getImportSpecifierName(
+          j,
+          root,
+          name,
+          "@navikt/ds-tokens/dist/tokens"
+        ) || name;
+
+      renameImportSpecifier(
+        j,
+        root,
+        name,
+        out,
+        "@navikt/ds-tokens/dist/tokens"
+      );
+
+      let code = root.toSource();
+
+      const rgx = new RegExp("(" + localName + ")", "gm");
+      code = code.replace(rgx, out);
+      root = j(code);
+    }
+  });
+
+  return root.toSource();
+}

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

@@ -0,0 +1,26 @@
+.filtersMenu {
+  box-shadow: @navds-global-color-blue-200 inset 0 0 0 8px;
+  border-radius: 0.2em;
+  background-color: white;
+}
+
+.filterExplanationHighlight {
+  background-color: @navds-global-color-green-100;
+  border: 1px solid @navds-global-color-green-500;
+  transition: all 0.4s linear;
+}
+
+.lenkepanelNavno {
+  border: 1px solid @navds-semantic-color-link;
+
+  .navds-link-panel__content {
+    display: flex;
+  }
+
+  .navds-link-panel__title,
+  .navds-link-panel__chevron {
+    color: @navds-semantic-color-link;
+  }
+
+  background-color: @navds-global-color-gray-600;
+}

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

@@ -0,0 +1,26 @@
+.filtersMenu {
+  box-shadow: @a-blue-200 inset 0 0 0 8px;
+  border-radius: 0.2em;
+  background-color: white;
+}
+
+.filterExplanationHighlight {
+  background-color: @a-green-100;
+  border: 1px solid @a-green-500;
+  transition: all 0.4s linear;
+}
+
+.lenkepanelNavno {
+  border: 1px solid @a-text-action;
+
+  .navds-link-panel__content {
+    display: flex;
+  }
+
+  .navds-link-panel__title,
+  .navds-link-panel__chevron {
+    color: @a-text-action;
+  }
+
+  background-color: @a-gray-600;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { translateToken } from "../../../utils/translate-token";
+import { tokens } from "../../../tokens-map.mjs";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api) {
+  let src = file.source;
+
+  tokens.forEach((tok) => {
+    const lessToken = translateToken(tok[0], "less");
+
+    const rgx = new RegExp("(\\" + lessToken + ")", "gm");
+    src = src.replace(rgx, translateToken(tok[1], "less"));
+  });
+
+  return src;
+}

@navikt/codemod/transforms/v2.0.0/update-sass-tokens/tests/complete.input.scss

@@ -0,0 +1,30 @@
+.filtersMenu {
+  box-shadow: common.$navds-global-color-blue-200 inset 0 0 0 8px;
+  border-radius: 0.2em;
+  background-color: white;
+}
+
+.filterExplanationHighlight {
+  background-color: common.$navds-global-color-green-100;
+  border: 1px solid common.$navds-global-color-green-500;
+  transition: all 0.4s linear;
+}
+
+.lenkepanelNavno {
+  &:global(.navds-link-panel) {
+    border: 1px solid common.$navds-semantic-color-link;
+  }
+
+  :global {
+    .navds-link-panel__content {
+      display: flex;
+    }
+
+    .navds-link-panel__title,
+    .navds-link-panel__chevron {
+      color: common.$navds-semantic-color-link;
+    }
+  }
+
+  background-color: common.$navds-global-color-gray-600;
+}

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

@@ -0,0 +1,30 @@
+.filtersMenu {
+  box-shadow: common.$a-blue-200 inset 0 0 0 8px;
+  border-radius: 0.2em;
+  background-color: white;
+}
+
+.filterExplanationHighlight {
+  background-color: common.$a-green-100;
+  border: 1px solid common.$a-green-500;
+  transition: all 0.4s linear;
+}
+
+.lenkepanelNavno {
+  &:global(.navds-link-panel) {
+    border: 1px solid common.$a-text-action;
+  }
+
+  :global {
+    .navds-link-panel__content {
+      display: flex;
+    }
+
+    .navds-link-panel__title,
+    .navds-link-panel__chevron {
+      color: common.$a-text-action;
+    }
+  }
+
+  background-color: common.$a-gray-600;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { translateToken } from "../../../utils/translate-token";
+import { tokens } from "../../../tokens-map.mjs";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api) {
+  let src = file.source;
+
+  tokens.forEach((tok) => {
+    const scssToken = translateToken(tok[0], "scss");
+
+    const rgx = new RegExp("(\\" + scssToken + ")", "gm");
+    src = src.replace(rgx, translateToken(tok[1], "scss"));
+  });
+
+  return src;
+}

@navikt/codemod/utils/check.ts

@@ -0,0 +1,47 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import prettier from "prettier";
+
+const applyTransform = require("jscodeshift/dist/testUtils").applyTransform;
+
+interface TestT {
+  fixture: string;
+  migration: string;
+  extension?: "js" | "scss" | "less" | "css";
+  options?: { [option: string]: any };
+}
+
+export function check(
+  dirName: string,
+  { fixture, migration, extension = "js", options = {} }: TestT
+) {
+  describe(migration, () => {
+    it(fixture, async () => {
+      const fixtureDir = path.join(dirName);
+      const inputPath = path.join(fixtureDir, `${fixture}.input.${extension}`);
+      const parser = extension;
+      const source = fs.readFileSync(inputPath, "utf8");
+      const expected = fs.readFileSync(
+        path.join(fixtureDir, `${fixture}.output.${extension}`),
+        "utf8"
+      );
+      // Assumes transform is one level up from tests directory
+      const module = await import(path.join(dirName, "..", migration));
+      const output = applyTransform({ ...module, parser: "tsx" }, options, {
+        source,
+      });
+
+      // Format output and expected with prettier for white spaces and line breaks consistency
+      expect(
+        prettier.format(output, {
+          parser: parser === "js" ? "typescript" : parser,
+        })
+      ).toBe(
+        prettier.format(expected, {
+          parser: parser === "js" ? "typescript" : parser,
+        })
+      );
+    });
+  });
+}

@navikt/codemod/utils/imports.ts

@@ -0,0 +1,37 @@
+import core, { Collection } from "jscodeshift";
+
+export function getImportSpecifier(
+  j: core.JSCodeshift,
+  source: Collection<any>,
+  specifier: string,
+  sourcePath: string
+) {
+  return source
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === sourcePath)
+    .find(j.ImportSpecifier)
+    .filter((path) => path.value.imported.name === specifier);
+}
+
+export function renameImportSpecifier(
+  j: core.JSCodeshift,
+  source: Collection<any>,
+  specifier: string,
+  newSpecifier: string,
+  sourcePath: string
+) {
+  getImportSpecifier(j, source, specifier, sourcePath).replaceWith(
+    j.importSpecifier(j.identifier(newSpecifier))
+  );
+}
+
+export function getImportSpecifierName(
+  j: core.JSCodeshift,
+  source: Collection<any>,
+  specifier: string,
+  sourcePath: string
+) {
+  const specifiers = getImportSpecifier(j, source, specifier, sourcePath);
+
+  return specifiers.length > 0 ? specifiers.nodes()[0]!.local!.name : null;
+}

@navikt/codemod/utils/tests/translate-token.test.ts

@@ -0,0 +1,36 @@
+import { translateToken } from "../translate-token";
+
+export {};
+
+jest.autoMockOff();
+
+const tokens = [
+  {
+    name: "--navds-global-color-red-100",
+    scss: "$navds-global-color-red-100",
+    less: "@navds-global-color-red-100",
+    js: "NavdsGlobalColorRed100",
+  },
+  {
+    name: "--a-blue-100",
+    scss: "$a-blue-100",
+    less: "@a-blue-100",
+    js: "ABlue100",
+  },
+];
+
+describe("Translating tokens to correct format", () => {
+  test("To scss", () => {
+    tokens.forEach((x) =>
+      expect(translateToken(x.name, "scss")).toEqual(x.scss)
+    );
+  });
+  test("To less", () => {
+    tokens.forEach((x) =>
+      expect(translateToken(x.name, "less")).toEqual(x.less)
+    );
+  });
+  test("To js", () => {
+    tokens.forEach((x) => expect(translateToken(x.name, "js")).toEqual(x.js));
+  });
+});

@navikt/codemod/utils/translate-token.ts

@@ -0,0 +1,15 @@
+import _ from "lodash";
+
+export const translateToken = (token: string, type: "scss" | "less" | "js") => {
+  switch (type) {
+    case "scss":
+      return token.replace("--", "$");
+    case "less":
+      return token.replace("--", "@");
+    case "js":
+      return _.startCase(token).split(" ").join("");
+
+    default:
+      return token;
+  }
+};

@navikt/core/css/CHANGELOG.md

@@ -0,0 +1,81 @@
+# @navikt/ds-css
+
+## 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

@@ -0,0 +1,43 @@
+# Aksel styling
+
+CSS for NAVs designsystem.
+
+- Css tokens (Colors, border, shadows etc)
+- Component-styling for `@navikt/ds-react` packages
+- Normalize.css v8
+- Font-loading
+
+## Installation
+
+```bash
+  yarn add @navikt/ds-css
+  npm install @navikt/ds-css
+```
+
+## Usage
+
+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";
+
+function App() {
+  return <Component />;
+}
+```
+
+But you can import it in a .css-file
+
+```css
+@import "@navikt/ds-css";
+```
+
+## Learn more
+
+- [Designsystem documentation](https://aksel.nav.no/designsystem)
+- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
+- [ds-react README](https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/react/README.md)
+
+## License
+
+[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)

@navikt/core/css/accordion.css

@@ -1,20 +1,3 @@
-:root {
-  --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 .ReactCollapse--collapse {
-  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -24,24 +7,24 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: var(--navds-spacing-2);
-  padding: 14px var(--navds-spacing-3) var(--navds-spacing-3);
+  gap: var(--a-spacing-2);
+  padding: 14px var(--a-spacing-3) var(--a-spacing-3);
   margin: 0;
   text-align: left;
   background: transparent;
   cursor: pointer;
   border: none;
-  border-bottom: 2px solid var(--navds-accordion-color-border);
+  border-bottom: 2px solid var(--a-border-strong);
 }
 
 .navds-accordion__header:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-accordion__header:hover {
-  color: var(--navds-accordion-color-text-hover);
-  border-color: var(--navds-accordion-color-border-hover);
+  color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
+  border-color: var(--ac-accordion-header-border-hover, var(--a-border-strong-hover));
 }
 
 .navds-accordion__header-content {
@@ -50,20 +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);
+.navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
+  border-color: var(--ac-accordion-content-border-open, var(--a-border-strong-hover));
 }
 
 .navds-accordion__expand-icon {
@@ -72,7 +52,7 @@
   flex-shrink: 0;
 }
 
-.navds-accordion__item--open .navds-accordion__expand-icon {
+.navds-accordion__item--open > .navds-accordion__header > .navds-accordion__expand-icon {
   transform: rotateZ(180deg);
 }
 
@@ -80,8 +60,7 @@
   display: none;
 }
 
-.navds-accordion__header:hover
-  > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
+.navds-accordion__header:hover > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
   display: inherit;
 }
 

@navikt/core/css/alert.css

@@ -1,30 +1,9 @@
-:root {
-  --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;
 }
 
@@ -33,49 +12,43 @@
 }
 
 .navds-alert--small {
-  padding: var(--navds-spacing-2) var(--navds-spacing-4);
-  gap: var(--navds-spacing-3);
+  padding: var(--a-spacing-2) var(--a-spacing-4);
 }
 
 .navds-alert--full-width {
   border-radius: 0;
 }
 
-.navds-alert--full-width.navds-alert--small {
-  padding-right: var(--navds-spacing-4);
-  padding-left: var(--navds-spacing-4);
-}
-
 .navds-alert > .navds-alert__icon {
   flex-shrink: 0;
   font-size: 1.5rem;
   align-self: flex-start;
-  height: var(--navds-font-line-height-xlarge);
+  height: var(--a-font-line-height-xlarge);
 }
 
 .navds-alert--small > .navds-alert__icon {
   font-size: 1.25rem;
-  height: var(--navds-font-line-height-large);
+  height: var(--a-font-line-height-large);
 }
 
 .navds-alert--error {
-  border-color: var(--navds-alert-color-error-border);
-  background-color: var(--navds-alert-color-error-background);
+  border-color: var(--ac-alert-error-border, var(--a-border-danger));
+  background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
 }
 
 .navds-alert--warning {
-  border-color: var(--navds-alert-color-warning-border);
-  background-color: var(--navds-alert-color-warning-background);
+  border-color: var(--ac-alert-warning-border, var(--a-border-warning));
+  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
 }
 
 .navds-alert--info {
-  border-color: var(--navds-alert-color-info-border);
-  background-color: var(--navds-alert-color-info-background);
+  border-color: var(--ac-alert-info-border, var(--a-border-info));
+  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
 }
 
 .navds-alert--success {
-  border-color: var(--navds-alert-color-success-border);
-  background-color: var(--navds-alert-color-success-background);
+  border-color: var(--ac-alert-success-border, var(--a-border-success));
+  background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
 }
 
 .navds-alert--inline {

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

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

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

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

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

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

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

@@ -1,16 +1,11 @@
 @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";
 
-/* Disabled because of UU concerns */
-
-/* @import "smooth-scroll.css"; */
-
-html {
+html,
+:host {
   box-sizing: border-box;
 }
 
@@ -21,26 +16,28 @@ 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 {
-  font-family: var(--navds-font-family);
+body,
+:host {
+  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-semantic-color-link);
 }
 
 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/baseline/smooth-scroll.css

@@ -1,28 +0,0 @@
-/**
-* Solution copied from blogpost
-* https://schepp.dev/posts/smooth-scrolling-and-page-search/
-* Currently disabled
-*/
-
-@keyframes smoothscroll1 {
-  from,
-  to {
-    scroll-behavior: smooth;
-  }
-}
-
-@keyframes smoothscroll2 {
-  from,
-  to {
-    scroll-behavior: smooth;
-  }
-}
-
-html {
-  animation: smoothscroll1 1s;
-}
-
-html:focus-within {
-  animation-name: smoothscroll2;
-  scroll-behavior: smooth;
-}

@navikt/core/css/button.css

@@ -1,187 +1,115 @@
-:root,
-[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 {
   display: inline-flex;
   cursor: pointer;
   margin: 0;
-  text-align: center;
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: var(--navds-border-radius-small);
-  min-width: 48px;
-  padding: var(--navds-spacing-3);
+  border-radius: var(--a-border-radius-medium);
+  padding: var(--a-spacing-3) var(--a-spacing-5);
+  align-items: center;
+  justify-content: center;
+  gap: var(--a-spacing-2);
 }
 
 .navds-button--small {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-  min-width: 32px;
+  padding: 0.375rem var(--a-spacing-3);
 }
 
 .navds-button--xsmall {
-  padding: 0.125rem 0.375rem;
-  min-width: 24px;
+  padding: var(--a-spacing-05) var(--a-spacing-2);
+  gap: var(--a-spacing-1);
+}
+
+.navds-button--icon-only {
+  padding: var(--a-spacing-3);
+}
+
+.navds-button--small.navds-button--icon-only {
+  padding: 0.375rem;
+}
+
+.navds-button--xsmall.navds-button--icon-only {
+  padding: var(--a-spacing-1);
 }
 
 .navds-button:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
-.navds-button__inner {
-  margin: auto;
-  display: flex;
-  align-items: center;
-  gap: var(--navds-spacing-2);
-}
+.navds-button__icon {
+  --ac-button-icon-margin: -4px;
 
-.navds-button svg {
   font-size: 1.5rem;
+  display: flex;
 }
 
-.navds-button--small svg,
-.navds-button--xsmall svg {
+.navds-button__icon:first-child {
+  margin-left: var(--ac-button-icon-margin);
+}
+
+.navds-button__icon:last-child {
+  margin-right: var(--ac-button-icon-margin);
+}
+
+.navds-button__icon:only-child {
+  margin: 0;
+}
+
+.navds-button--small .navds-button__icon {
+  --ac-button-icon-margin: -2px;
+
   font-size: 1.25rem;
 }
 
+.navds-button--xsmall .navds-button__icon {
+  --ac-button-icon-margin: -2px;
+
+  font-size: 1rem;
+}
+
 /*************************
  * .navds-button--primary *
  *************************/
 
 .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:disabled,
-.navds-button--primary:active:disabled {
-  background-color: var(--navds-button-color-primary-background);
+.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
 }
 
 /**************************
@@ -189,38 +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 1.5px 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 1.5px 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:disabled,
-.navds-button--secondary:hover: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);
+.navds-button--secondary:where(:disabled, .navds-button--disabled),
+.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
+  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 1.5px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
 /****************************
@@ -228,37 +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 1.5px 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:disabled,
-.navds-button--tertiary:active:disabled,
-.navds-button--tertiary:active:hover:disabled {
-  color: var(--navds-button-color-tertiary-text);
+.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(--ac-button-tertiary-text, var(--a-text-action));
   background: none;
   box-shadow: none;
 }
@@ -268,45 +193,44 @@
  *************************/
 
 .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:hover:disabled,
-.navds-button--danger:active:disabled {
-  background-color: var(--navds-button-color-danger-background);
+.navds-button--danger:active:where(:disabled, .navds-button--disabled),
+.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
 }
 
 /**************************
  * .navds-button:disabled *
  **************************/
 
-.navds-button:disabled {
+.navds-button:where(:disabled, .navds-button--disabled) {
   cursor: not-allowed;
 }
 
-.navds-button:disabled:not(.navds-button--loading) {
+.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
   opacity: 0.3;
 }
 
 .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/card.css

@@ -1,55 +0,0 @@
-:root {
-  --navds-card-micro-color-text: var(--navds-semantic-color-text);
-  --navds-card-micro-color-background: var(--navds-global-color-orange-200);
-  --navds-card-micro-color-border: transparent;
-  --navds-card-micro-color-text-hover: var(--navds-semantic-color-link);
-  --navds-card-micro-color-background-hover: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-card-micro-color-border-hover: var(
-    --navds-semantic-color-interaction-primary
-  );
-  --navds-card-micro-color-text-focus: var(--navds-semantic-color-link);
-  --navds-card-micro-color-background-focus: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-card-micro-color-shadow-focus: var(--navds-semantic-color-focus);
-  --navds-card-micro-color-background-active: var(
-    --navds-semantic-color-interaction-primary
-  );
-  --navds-card-micro-color-text-active: var(
-    --navds-semantic-color-text-inverted
-  );
-}
-
-/*
-  MicroCard
-*/
-
-.navds-card__micro {
-  border-radius: var(--navds-border-radius-full);
-  color: var(--navds-card-micro-color-text);
-  display: inline-flex;
-  padding: var(--navds-spacing-1) var(--navds-spacing-2);
-  text-decoration: none;
-  background-color: var(--navds-card-micro-color-background);
-  border: 1px solid var(--navds-card-micro-color-border);
-}
-
-.navds-card__micro:hover {
-  background-color: var(--navds-card-micro-color-background-hover);
-  border-color: var(--navds-card-micro-color-border-hover);
-  color: var(--navds-card-micro-color-text-hover);
-}
-
-.navds-card__micro:focus {
-  background-color: var(--navds-card-micro-color-background-focus);
-  color: var(--navds-card-micro-color-text-focus);
-  outline: none;
-  box-shadow: 0 0 0 3px var(--navds-card-micro-color-shadow-focus);
-}
-
-.navds-card__micro:active {
-  background-color: var(--navds-card-micro-color-background-active);
-  color: var(--navds-card-micro-color-text-active);
-}

@navikt/core/css/chat.css

@@ -0,0 +1,82 @@
+.navds-chat {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--a-spacing-4);
+  padding-right: var(--a-spacing-16);
+}
+
+.navds-chat--right {
+  flex-direction: row-reverse;
+  padding-right: 0;
+  padding-left: var(--a-spacing-16);
+}
+
+.navds-chat__bubble-wrapper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+}
+
+.navds-chat--right .navds-chat__bubble-wrapper {
+  align-items: flex-end;
+}
+
+.navds-chat__avatar {
+  align-items: center;
+  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;
+  overflow: hidden;
+  height: 3rem;
+  width: 3rem;
+}
+
+.navds-chat__avatar svg {
+  align-self: center;
+  height: 100%;
+  width: 100%;
+}
+
+.navds-chat__bubble {
+  padding: 1rem;
+  box-shadow: var(--a-shadow-small);
+  width: fit-content;
+  max-width: 37.5rem;
+  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(--a-spacing-2);
+}
+
+.navds-chat__bubble:focus {
+  box-shadow: var(--a-shadow-focus);
+  outline: none;
+}
+
+.navds-chat--right .navds-chat__bubble {
+  border-radius: var(--a-border-radius-xlarge);
+  border-bottom-right-radius: 2px;
+}
+
+.navds-chat__top-text {
+  color: var(--ac-chat-top-text, var(--a-text-default));
+  display: flex;
+  gap: var(--a-spacing-2);
+  align-items: baseline;
+}
+
+.navds-chat--right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat__name {
+  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

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-content-container-max-width: 79.5rem;
 }
 
@@ -6,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

@@ -0,0 +1,217 @@
+.navds-date {
+  padding: var(--a-spacing-3);
+}
+
+.navds-date .rdp-day_range_middle.rdp-day_disabled {
+  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(--a-spacing-5);
+}
+
+.navds-date__caption-label {
+  text-transform: capitalize;
+}
+
+.navds-date .rdp-head_cell {
+  text-transform: capitalize;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-date .rdp-weeknumber {
+  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: 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(--a-spacing-2);
+  align-items: center;
+}
+
+.navds-date__caption__month-wrapper {
+  display: flex;
+  justify-content: center;
+  gap: var(--a-spacing-2);
+  align-items: center;
+}
+
+.navds-date__caption__month .navds-select__container select {
+  text-transform: capitalize;
+}
+
+.navds-date .rdp-button {
+  all: unset;
+  width: 2.5rem;
+  height: 2.5rem;
+  text-align: center;
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-date .rdp-day_range_start {
+  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(--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(--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(--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(--a-surface-default), var(--a-shadow-focus);
+}
+
+/* Monthpicker */
+.navds-date__month-button {
+  all: unset;
+  text-align: center;
+  width: 3rem;
+  height: 2.75rem;
+  text-transform: capitalize;
+  border-radius: var(--a-border-radius-medium);
+  cursor: pointer;
+}
+
+.navds-date__month-button:focus,
+.navds-monthpicker__caption-button:focus {
+  box-shadow: var(--a-shadow-focus);
+  z-index: 1;
+}
+
+.navds-date__year-label {
+  display: flex;
+  align-items: center;
+}
+
+.navds-date__wrapper,
+.navds-date__standalone-wrapper {
+  height: fit-content;
+  width: fit-content;
+}
+
+.navds-date .navds-date__field {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.navds-date__field-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: fit-content;
+}
+
+/* Focus layering */
+.navds-date__field-input:focus,
+.navds-date__field-button {
+  z-index: 1;
+}
+
+.navds-date .rdp-day_selected,
+.navds-monthpicker__month--selected {
+  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(--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(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
+  cursor: pointer;
+}
+
+.navds-date .rdp-day_today {
+  box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
+  text-decoration: underline;
+}
+
+.navds-date__caption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--a-spacing-2);
+}
+
+.navds-date__caption-button {
+  color: var(--ac-date-caption-text, var(--a-text-default));
+}
+
+.navds-date__field-input {
+  padding-right: var(--a-spacing-12);
+}
+
+.navds-form-field--small .navds-date__field-input {
+  padding-right: var(--a-spacing-8);
+}
+
+/* Error-handling */
+.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
+  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(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+}
+
+.navds-date__field-button {
+  position: absolute;
+  right: var(--a-spacing-2);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ac-date-input-button-text, var(--a-text-default));
+}
+
+.navds-form-field--small .navds-date__field-button {
+  right: var(--a-spacing-2);
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.navds-form-field--small .navds-date__field-button svg {
+  font-size: var(--a-font-size-medium);
+}
+
+.navds-form-field--disabled .navds-date__field-button {
+  opacity: 1;
+}
+
+.navds-date__caption__year {
+  width: 5rem;
+}
+
+.navds-date .rdp-day_outside {
+  visibility: hidden;
+  pointer-events: none;
+}

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

@@ -1,32 +1,11 @@
-:root {
-  --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;
 }
@@ -36,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,42 +1,33 @@
-:root {
-  --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 */