Lerna versionbump [ci skip]

- @navikt/ds-icons@0.8.2
 - @navikt/ds-react@0.16.2
 - @navikt/ds-react-internal@0.11.2

.github/workflows/build-publish.yml

@@ -1,7 +1,7 @@
 # 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 and maybe publish
+name: Build -> Test -> Publish
 
 on:
   push:
@@ -30,37 +30,30 @@ jobs:
       - name: install
         if: steps.node-cache.outputs.cache-hit != 'true'
         run: yarn install
-      - name: test
-        run: yarn test
+      - 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: add access token to .env
-        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
-      - name: add branch token to .env
-        run: echo "BRANCH=HEAD" >> website/.env
-      - name: Test gatsby-build (design.nav.no)
-        run: yarn build:gatsby
-      - name: Test chromatic
-        uses: chromaui/action@v1
-        with:
-          token: ${{ secrets.GIT_REPO }}
-          projectToken: ${{ secrets.CHROMATIC }}
-          exitZeroOnChanges: true
+      - 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@v1
+      - uses: actions/setup-node@v2
         with:
-          registry-url: http://registry.npmjs.org
+          registry-url: https://registry.npmjs.org
           node-version: 14
       - name: Node-modules cache
         uses: actions/cache@v2
@@ -90,17 +83,9 @@ jobs:
       - name: Update changed packages with MAJOR
         if: "contains(github.event.head_commit.message, '[breaking]')"
         run: yarn lerna version major --include-merged-tags --yes
-
-      - name: Create a .npmrc file for NPM
-        run: |
-          echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
-          npm whoami
-        env:
-          NPM_TOKEN: ${{secrets.NPM_AUTOMATION}}
       - name: Publish to NPM registry
-        run: |
-          yarn lerna publish from-package --yes
-          rm .npmrc
+        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:
@@ -109,56 +94,4 @@ jobs:
           AUTH_TOKEN: ${{secrets.GIT_REPO}}
       - name: Publish to Github registry
         run: |
-          rm lerna.json && cp utilities/lerna.json lerna.json
-          git add . && git commit -m "tmp"
           yarn lerna publish --registry https://npm.pkg.github.com from-package --yes
-
-  publish-pages:
-    needs: test-build
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push'
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: "0"
-          token: ${{secrets.GIT_REPO}}
-      - 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 deps
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install
-      - name: Gulp-build
-        run: yarn boot
-      - name: add access token to .env
-        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
-      - name: add branch token to .env
-        run: echo "BRANCH=HEAD" >> website/.env
-      - name: Building Gatsby
-        run: yarn build:gatsby
-      - name: Building Storybook
-        run: yarn build-storybook
-
-      - name: Deploy to Design.nav.no 🚀
-        uses: JamesIves/github-pages-deploy-action@3.6.2
-        with:
-          GITHUB_TOKEN: $NAV_DS_TOKEN
-          BRANCH: gh-pages
-          FOLDER: website/public
-        env:
-          NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
-
-      - name: Deploy storybook to designsystem-repo
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          personal_token: ${{secrets.GIT_REPO}}
-          external_repository: navikt/designsystemet
-          publish_dir: ./storybook-static
-          user_name: "github-actions[bot]"
-          user_email: "github-actions[bot]@users.noreply.github.com"

.github/workflows/chromatic.yml

@@ -0,0 +1,126 @@
+name: Chromatic
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  chromatic-pr:
+    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
+        id: chromatic_tests
+        continue-on-error: true
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: x3xqdfgkujg
+          exitZeroOnChanges: false
+
+      - name: replace storybook url
+        uses: frabert/replace-string-action@v2.0
+        id: storybook_url
+        with:
+          pattern: "(iframe.html)"
+          string: ${{ steps.chromatic_tests.outputs.storybookUrl }}
+          replace-with: ""
+
+      - name: Get commit sha
+        id: vars
+        shell: bash
+        run: |
+          echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        id: fc
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: "github-actions[bot]"
+          body-includes: Chromatic build-output
+
+      - name: Create or update comment
+        if: steps.chromatic_tests.outcome == 'success'
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            Chromatic build-output:
+
+            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
+            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
+            - :white_check_mark: SUCCESS :white_check_mark:
+
+            commit: `${{ steps.vars.outputs.sha_short }}`
+          edit-mode: replace
+
+      - name: Create or update failed comment
+        if: steps.chromatic_tests.outcome != 'success'
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            **Chromatic build-output**:
+
+            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
+            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
+            - :no_entry_sign: FAILED :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/publish_storybook.yml

@@ -1,39 +0,0 @@
-# This workflow will run will build the component library and the storybook, then publish it to https://navikt.github.io/Designsystemet
-
-name: Publish Storybook
-
-on:
- workflow_dispatch
-
-jobs:
-  publish-storybook:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: "0"
-          token: ${{secrets.GIT_REPO}}
-      - 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 deps
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
-      - name: Gulp-build
-        run: yarn boot
-      - name: Building Storybook
-        run: yarn build-storybook
-      - name: Deploy storybook
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          personal_token: ${{secrets.GIT_REPO}}
-          external_repository: navikt/designsystemet
-          publish_dir: ./storybook-static
-          user_name: "github-actions[bot]"
-          user_email: "github-actions[bot]@users.noreply.github.com"

.github/workflows/update-icons.yml

@@ -0,0 +1,42 @@
+name: Update Icons
+
+on:
+#  schedule:
+ #   - cron: 0 0 * * *
+  workflow_dispatch:
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - 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: Update Icons
+        run: yarn update:icons
+        env:
+          FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          token: ${{ secrets.GIT_REPO }}
+          commit-message: "Ikoner synket fra figma"
+          branch: figma-icons-sync
+          committer: GitHub <noreply@github.com>
+          author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
+          signoff: false
+          delete-branch: true
+          title: "[FIX] Ikonsynk Figma"

.github/workflows/update-tokens.yml

@@ -0,0 +1,39 @@
+name: Update tokens
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - 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: Update tokens
+        run: yarn update:tokens
+        env:
+          FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: figma-tokens-sync
+          delete-branch: true
+          title: "[FEATURE] Tokens sync Figma"
+          commit-message: "Tokens synket fra figma"
+          committer: GitHub <noreply@github.com>
+          signoff: false

.github/workflows/vk-innhold-dev.yml

@@ -1,47 +0,0 @@
-name: Publish verktøykasse-innhold to dev
-
-on:
-  push:
-    branches: verktoykasse-prototype
-  repository_dispatch:
-    types: [new-content]
-  workflow_dispatch:
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          ref: verktoykasse-prototype
-          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 deps
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install
-      - name: Gulp-build
-        run: yarn boot
-      - name: Eslint and Stylelint
-        run: yarn lint
-      - name: add access token to .env
-        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
-      - name: add branch token to .env
-        run: echo "BRANCH=dev" >> website/.env
-      - name: Gatsby-build
-        run: yarn build:gatsby
-      - name: Deploy to dev gh-pages
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          personal_token: ${{secrets.GIT_REPO}}
-          external_repository: navikt/verktoykasse-innhold
-          publish_dir: website/public
-          user_name: "github-actions[bot]"
-          user_email: "github-actions[bot]@users.noreply.github.com"

.gitignore

@@ -100,7 +100,6 @@ examples/webpack/out
 
 *.d.ts
 *-exports.less
-**/css/
 */figma-api/icons
 */ds-icons/png
 packages/**/css
@@ -108,12 +107,13 @@ utilities/**/css
 
 */static/*.zip
 */static/png
-@navikt/ds-icons/NAV-ikonpakke-png.zip
-@navikt/ds-icons/NAV-ikonpakke-svg.zip
+@navikt/core/icons/NAV-ikonpakke-png.zip
+@navikt/core/icons/NAV-ikonpakke-svg.zip
 */**/NAV-ikonpakke-png.zip
 */**/NAV-ikonpakke-svg.zip
 
 react-docgen.json
 react-docgen-docs.json
 cjs
-esm
+esm
+.vercel

.specifyrc.json

@@ -1,46 +0,0 @@
-{
-  "repository": "@nav/designsystem",
-  "head": "specify-sync",
-  "base": "specify-token-parsing",
-  "rules": [
-    {
-      "name": "Color sync",
-      "path": "@navikt/ds-tokens/src/colors.js",
-      "filter": {
-        "types": ["color"]
-      },
-      "parsers": [
-        {
-          "name": "to-theme-ui",
-          "options": {
-            "formatConfig": {
-              "module": "commonjs"
-            },
-            "formatTokens": {
-              "colorFormat": {
-                "format": "rgb"
-              }
-            }
-          }
-        }
-      ]
-    },
-    {
-      "name": "Spacing sync",
-      "path": "@navikt/ds-tokens/src/spacing.js",
-      "filter": {
-        "types": ["measurement"]
-      },
-      "parsers": [
-        {
-          "name": "to-theme-ui",
-          "options": {
-            "formatConfig": {
-              "module": "commonjs"
-            }
-          }
-        }
-      ]
-    }
-  ]
-}

.storybook/main.js

@@ -1,16 +1,19 @@
+const getStories = () => {
+  return process.env.stories
+    ? [`../@navikt/**/${process.env.stories}.stories.@(js|jsx|ts|tsx|mdx)`]
+    : ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)"];
+};
+
 module.exports = {
   webpackFinal: async (config, { configType }) => {
     config.devServer = { stats: "errors-only" };
     return config;
   },
   devServer: { stats: "errors-only" },
-  stories: [
-    "../.storybook/**/*.stories.@(mdx)",
-    "../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
-    "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
-  ],
+  stories: () => getStories(),
   addons: [
     "@storybook/addon-docs",
+    "@storybook/addon-a11y",
     {
       name: "@storybook/addon-storysource",
       options: {
@@ -27,4 +30,7 @@ module.exports = {
       },
     },
   ],
+  core: {
+    builder: "webpack5",
+  },
 };

.storybook/preview.js

@@ -1,5 +1,5 @@
-import "nav-frontend-core";
 import "@navikt/ds-css/index.css";
+import "@navikt/ds-css-internal/index.css";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

.storybook/stories/introduction.stories.mdx

@@ -1,22 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="ds-react/Kom i gang" />
-
-# Ta i bruk `@navikt/ds-react` pakken
-
-## Oppsett
-
-```bash
-yarn add @navikt/ds-react @navikt/ds-css
-```
-
-Siden stilene ikke importeres direkte i komponentene, så må man selv importere ds-css.
-For å legge til all stylingen som trengs må man da bare importere `ds-css`.
-
-```bash
-import "@navikt/ds-css"
-```
-
-Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
-
-Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.

.storybook/stories/migration.stories.mdx

@@ -1,229 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="ds-react/Migration" />
-
-# Migrering til ds-react, ds-css v0.8.0
-
-Denne guiden vil være til hjelp for de som allerede har begynt å ta i bruk de nye pakkene våre tidligere enn v0.8.0.
-For de som ikke har begynt å ta i bruk pakkene kan man se bort fra denne.
-
-Fra versjon v0.7 til v0.8 er det komment flere store endringer både i ds-react og ds-css. For å lettere
-oppdatere til v0.8 har vi da laget en liten guide som forklarer de største endringene.
-
-## Styling
-
-De fleste komponenter har fått diverse justering på styling. Anbefales da å ta en rask sjekk om alt fortsatt stemmer
-etter oppdateringen.
-
-## Sizing
-
-Alle komponenter som tidligere var implementert med `size`-prop har fått oppdatert
-props fra "xs", "s", "m", "l", "xl", "2xl" -> "xsmall", "small", "medium", "large", "xlarge", "2xlarge".
-
-Dette betyr også at css-stylingen er eks endret fra `.navds-body-short--s` -> `.navds-body-short--small`
-
-## Overridable component
-
-Komponenter som tidligere implementerte ovveridable component med bruk av `component`-prop bruker nå `as`.
-Implementasjonen av OverridableComponent er WIP så kan hende typene ender opp med å krangle i enkelte tilfeller. Om så ta gjerne kontakt med oss
-slik at vi får sett på det tilfellet!
-
-```jsx
-/* Før */
-<BodyShort component="span" />
-
-/* Etter */
-<BodyShort as="span" />
-```
-
-## Navneendringer
-
-### Buttons
-
-- `Primary` -> `Secondary` (Normal)
-- `Action` -> `Primary` (Hoved)
-- `Secondary` -> `Tertiary` (Flat)
-
-For alle som har brukt `<Button />` så må man fikse slik at riktige knapper blir brukt der de skal!
-
-## Nytt
-
-- GuidePanel (veilederpanel)
-- HelpText (Hjeleptext)
-
-### Typography
-
-Vi har valgt å endre fra `<Title/>` -> `<Heading/>` i typografien vår da dette ga mer mening i bruk.
-APIet til komponenten er ikke endret borsett fra "Sizing" endringene nevt lengre opp, så skal bare være en rask search/replace.
-
-For de som har brukt css-en direkte, eks `navds-title` så må man endre til `navds-heading`
-
-Endret `Header` -> `PageHeader`, samme som er nevnt ang endringen over gjelder her også: sjekk css hvis brukt direkte.
-
-## Fjernet komponenter
-
-Fjernet da den var utdaterte/må ses mer på
-
-- ProductPageLayout
-
-## Typography
-
-Linjehøyder for alle typo-komponentene er oppdatert til å matche figma.
-
-Lagt til en Heading lvl 6 og size="xsmall"
-
-## AccordionMenu
-
-Implementert med dot-notation
-
-- Trenger bare importere AccordionMenu
-- AccordionMenuCollapsable -> AccordionMenu.Collapsable
-- AccordionMenuItem -> AccordionMenu.Item
-
-## Accordion
-
-Implementert med dot-notation
-
-- Trenger bare importere Accordion nå
-
-Fragmenterte komponenten:
-
-- Accordion -> Accordion.Item
-- Header -> Accordion.Header
-- children -> Accordion.Content
-
-La til prop: `defaultOpen` på `Accordion.Item`
-
-```jsx
-/* Før */
-<Accordion heading="tittel" open={open} onClick={(open) => setOpen(!open)}>
-  Eu magna fugiat officia
-</Accordion>
-<Accordion heading="tittel2" open={open2} onClick={(open2) => setOpen(!open2)}>
-  Eu magna fugiat officia
-</Accordion>
-
-/* Etter */
-<Accordion>
-  <Accordion.Item open={open}>
-    <Accordion.Header onClick={(open) => setOpen(!open)}>
-      Accordion header text
-    </Accordion.Header>
-    <Accordion.Content>
-      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
-      laboris voluptate officia pariatur.Lorem est ex anim velit
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item open={open2}>
-    <Accordion.Header onClick={(open2) => setOpen(!open2)}>
-      Accordion header text
-    </Accordion.Header>
-    <Accordion.Content>
-      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
-      laboris voluptate officia pariatur.Lorem est ex anim velit
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion>
-```
-
-## Alert
-
-- La til `fullWidth`-prop for alert uten border-radius og width 100%
-- La til `inline`-prop for alert med transparent border/background og 0 padding.
-
-## Button
-
-Oppdatert med Overridablecomponent.
-
-Håndtering av sentrering, margins er oppdatert. Trenger ikke wrappe tekst med `span` når man skal bruke ikoner lengre.
-
-Hvis man skal manuelt justere på alignment av innhold, eks bruke `flex-direction: column` må man sette
-det på css-klassen `.navds-button__inner` da children er wrappet i den.
-
-## CopyToClipboard
-
-Ekstender nå ButtonProps, slik at man eks kan ta i bruk `size`-proppen
-
-`text`-prop -> `copyText`
-`label`-prop -> `popoverText`
-
-Fjernet `icon`-prop, la til `popoverPlacement`
-
-## Modal
-
-Implementert med dot-notasjon
-
-Innholds-padding er flyttet fra Modal -> Modal.Content
-
-```
-/* Før */
-<Modal>Modal innhold</Modal>
-
-/* Etter */
-<Modal><Modal.Content>Modal innhold</Modal.Content></Modal>
-```
-
-## LinkPanel
-
-Implementert med dot-notasjon
-
-```jsx
-/* Før */
-<LinkPanel href="#">Consectetur eu duis aliqua eu irure fugiat fugiat eu.</LinkPanel>
-
-/* Etter */
-<LinkPanel href="#">
-  <LinkPanel.Title>
-    Consectetur eu duis aliqua eu irure fugiat fugiat eu.
-  </LinkPanel.Title>
-</LinkPanel>
-```
-
-Kan nå legge til en beskrivelse med `Linkpanel.Description`
-
-```jsx
-<LinkPanel href="#">
-  <LinkPanel.Title>
-    Consectetur eu duis aliqua eu irure fugiat fugiat eu.
-  </LinkPanel.Title>
-  <LinkPanel.Description>Aliqua id aliquip Lorem esse</LinkPanel.Description>
-</LinkPanel>
-```
-
-## Popover
-
-Implementert med dot-notasjon
-
-Får nå padding rundt innhold med Popover.Content
-
-```jsx
-
-/* Før */
-
-<Popover>Popover innhold</Popover>
-
-/* Etter */
-
-<Popover>
-  <Popover.Content>Modal innhold</Popover.Content>
-</Popover>
-```
-
-## Header -> PageHeader
-
-Props må fikses for de som har brukt denne komponenten, i tilleg til å endre navn.
-
-- `variant`-prop -> `align`
-- `theme`-prop -> `variant`
-
-## MicroCard
-
-- Oppdatert med OverridableComponent
-
-## SpeechBubble
-
-Implementert med Dot-notasjon
-
-- `<Bubble/>` -> `<SpeechBubble.Bubble/>`
-
-Bubble er fortsatt eksportert så vil ikke brekke noe for de som har begynt å ta denne i bruk.

.storybook/stories/roadmap.stories.mdx

@@ -1,51 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="ds-react/Roadmap" />
-
-# Plan videre
-
-Arbeidet med det nye pakke-oppsettet har nå foregått en stund og skulle egentlig vært
-lengre på vei en det er nå. Men arbeidet har på ingen måte stoppet opp! Vi jobber kontinuerlig med
-å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
-ny dokumentasjons-side bygd med Sanity, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider. Dette vil da forhåpentligvis la oss
-bygge mer robuste og fleksible løsninger for fremtiden.
-
-(Rekkefølgen representer ikke faktisk tidsline eller prioritet)
-
-## Tokens
-
-Vi bygger opp `@navikt/ds-tokens` pakken som inneholder alle design-tokensene til designsystemet fra bunnen av.
-Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke css-variabler.
-
-## Intern / Ekstern sizing
-
-Komponenter tilpasses og standariseres bedre for skillet mellom interne/eksterne flater.
-Løsning er ikke fast bestemt, men eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.
-Dette vil da eksempelvis kunne være en standard som er gjennomgående for de fleste komponentene.
-
-## Ny dokumentasjon-side
-
-Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i nav med "Verktøykassen"
-
-## Migrere komponenter/styling fra nav-frontend-\* -> `@navikt/ds-css / @navikt/ds-react`
-
-Dette arbeidet kommer sakte men sikkert på plass, men tar litt tid da mye må på plass først, da eksempelvis sizing og tokens.
-Noen komponenter vil ha oppdatert funksjonalitet, noen bare stilendringer, mens noen kan nesten brukes 1-1 fra nav-frontend-.
-
-Note: Noen pakker vil ikke flyttes over fra nav-frontend og `deprecates` i praksis da. De pakkene som ikka tas over vil ikke bli deprecated på `npm`, slik at man kan fortsette å ta dem i bruk uten en sint terminal hver gang man kjører `yarn install`.
-
-## Theming
-
-Etterhvert når vi har nye react, css og token pakke på plass har vi et ønske om å kunne se på theming for
-eks darkmode.
-
-## Vue, svelte, web-components etc...
-
-Dette er noe vi ikke har på planene for tiden, men etterhvert som ting faller på plass så vil dette være
-noe vi kunne ta en titt på hvis vi ser at det trengs.
-
-## Versjonering
-
-To av de nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
-ha både samversjonering (alle pakker under en eks ds-react versjon) og induvduell verjsonering da eks ds-react/button har en egen versjon
-slik at man kan ha mer finkontroll over komponentbruk på siden sin.

.storybook/webpack.config.js

@@ -1,20 +1,13 @@
 const path = require("path");
 
 module.exports = (baseConfig) => {
-  baseConfig.config.module.rules.push(
-    {
-      test: /\.css$/,
-      use: ["style-loader", "css-loader"],
-      include: [
-        path.resolve(__dirname, "../node_modules/@navikt/ds-css/index.css"),
-      ],
-    },
-    {
-      test: /\.less$/,
-      loaders: ["style-loader", "css-loader", "less-loader"],
-      include: path.resolve(__dirname, "../packages/"),
-    }
-  );
+  baseConfig.config.module.rules.push({
+    test: /\.css$/,
+    use: ["style-loader", "css-loader"],
+    include: [
+      path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
+    ],
+  });
   baseConfig.config.resolve.alias = {
     ...baseConfig.config.resolve.alias,
     "./normalize.css": path.resolve(

@navikt/core/css/accordion.css

@@ -0,0 +1,98 @@
+:root {
+  --navds-accordion-color-text: var(--navds-semantic-color-text);
+  --navds-accordion-color-background: var(
+    ---navds-semantic-color-component-background-light
+  );
+  --navds-accordion-color-text-hover: var(--navds-semantic-color-link);
+  --navds-accordion-color-border: var(--navds-semantic-color-border-muted);
+  --navds-accordion-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-accordion-color-text-open: var(--navds-semantic-color-text);
+  --navds-accordion-color-text-open-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 {
+  background: var(--navds-accordion-color-background);
+}
+
+.navds-accordion__header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--navds-spacing-4);
+  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  margin: 0;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+  border: none;
+  border-bottom: 2px solid var(--navds-accordion-color-border);
+}
+
+.navds-accordion__header:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-accordion__header:hover {
+  color: var(--navds-accordion-color-text-hover);
+  border-color: var(--navds-accordion-color-border-hover);
+}
+
+.navds-accordion__item--open > .navds-accordion__header {
+  background-color: var(--navds-accordion-color-background-open);
+  color: var(--navds-accordion-color-text-open);
+  border-color: transparent;
+}
+
+.navds-accordion__item--open > .navds-accordion__header:hover {
+  border-color: transparent;
+  color: var(--navds-accordion-color-text-open-hover);
+}
+
+.navds-accordion__content {
+  color: var(--navds-accordion-color-text);
+  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
+  border-bottom: 2px solid var(--navds-accordion-color-border);
+}
+
+.navds-accordion__item--open
+  > .navds-accordion__header:hover
+  + *
+  .navds-accordion__content {
+  border-color: var(--navds-accordion-color-border-hover);
+}
+
+.navds-accordion__expand-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+
+.navds-accordion__expand-icon--flip {
+  transform: rotateZ(180deg);
+}
+
+.navds-accordion__expand-icon--filled {
+  display: none;
+}
+
+.navds-accordion__header:hover
+  > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
+  display: inherit;
+}
+
+.navds-accordion__header:hover > .navds-accordion__expand-icon {
+  display: none;
+}

@navikt/core/css/alert.css

@@ -1,21 +1,51 @@
 :root {
-  --navds-alert-color-border: var(--navds-color-gray-40);
-  --navds-alert-color-error-border: var(--navds-color-error-border);
-  --navds-alert-color-error-background: var(--navds-color-error-background);
-  --navds-alert-color-warning-border: var(--navds-color-warning-border);
-  --navds-alert-color-warning-background: var(--navds-color-warning-background);
-  --navds-alert-color-info-border: var(--navds-color-info-border);
-  --navds-alert-color-info-background: var(--navds-color-info-background);
-  --navds-alert-color-success-border: var(--navds-color-success-border);
-  --navds-alert-color-success-background: var(--navds-color-success-background);
-  --navds-alert-color-error-icon: var(--navds-color-red-60);
-  --navds-alert-color-error-icon-background: var(--navds-color-white);
-  --navds-alert-color-warning-icon: var(--navds-color-orange-40);
-  --navds-alert-color-warning-icon-background: var(--navds-color-darkgray);
-  --navds-alert-color-info-icon: var(--navds-color-lightblue-70);
-  --navds-alert-color-info-icon-background: var(--navds-color-white);
-  --navds-alert-color-success-icon: var(--navds-color-green-70);
-  --navds-alert-color-success-icon-background: var(--navds-color-white);
+  --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-semantic-color-feedback-danger-background
+  );
+  --navds-alert-color-warning-border: var(
+    --navds-semantic-color-feedback-warning-border
+  );
+  --navds-alert-color-warning-background: var(
+    --navds-semantic-color-feedback-warning-background
+  );
+  --navds-alert-color-info-border: var(
+    --navds-semantic-color-feedback-info-border
+  );
+  --navds-alert-color-info-background: var(
+    --navds-semantic-color-feedback-info-background
+  );
+  --navds-alert-color-success-border: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-alert-color-success-background: var(
+    --navds-semantic-color-feedback-success-background
+  );
+  --navds-alert-color-error-icon: var(
+    --navds-semantic-color-feedback-danger-icon
+  );
+  --navds-alert-color-error-icon-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-alert-color-warning-icon: var(
+    --navds-semantic-color-feedback-warning-icon
+  );
+  --navds-alert-color-warning-icon-background: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-alert-color-info-icon: var(--navds-semantic-color-feedback-info-icon);
+  --navds-alert-color-info-icon-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-alert-color-success-icon: var(
+    --navds-semantic-color-feedback-success-icon
+  );
+  --navds-alert-color-success-icon-background: var(
+    --navds-semantic-color-component-background-light
+  );
 }
 
 .navds-alert {
@@ -44,12 +74,12 @@
   flex-shrink: 0;
   font-size: 1.5rem;
   align-self: flex-start;
-  height: var(--navds-font-line-height-xl);
+  height: var(--navds-font-line-height-xlarge);
 }
 
 .navds-alert--small > .navds-alert__icon {
   font-size: 1.25rem;
-  height: var(--navds-font-line-height-l);
+  height: var(--navds-font-line-height-large);
 }
 
 .navds-alert--error {

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

@@ -7,6 +7,7 @@
 @import "utility.css";
 
 /* Disabled because of UU concerns */
+
 /* @import "smooth-scroll.css"; */
 
 html {
@@ -14,20 +15,20 @@ html {
 }
 
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
 body {
   font-family: var(--navds-font-family);
-  line-height: 1.375;
-  color: var(--navds-color-text-primary);
+  line-height: 1.333;
+  color: var(--navds-semantic-color-text);
   font-size: 1.125rem;
 }
 
 a {
-  color: var(--navds-color-text-link);
+  color: var(--navds-semantic-color-link);
 }
 
 /* https://web.dev/prefers-reduced-motion/ */

@navikt/core/css/button.css

@@ -1,53 +1,83 @@
 :root {
   /* Primary */
-  --navds-button-color-primary-text: var(--navds-color-white);
-  --navds-button-color-primary-border-focus: var(--navds-color-white);
-  --navds-button-color-primary-background: var(--navds-color-action-default);
+  --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-color-action-hover
+    --navds-semantic-color-interaction-primary-hover
   );
   --navds-button-color-primary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
   );
 
   /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-color-action-default);
-  --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-border: var(--navds-color-action-default);
+  --navds-button-color-secondary-text: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-secondary-text-hover: var(
+    --navds-semantic-color-text-inverted
+  );
+  --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-color-white
+    --navds-semantic-color-component-background-light
+  );
+  --navds-button-color-secondary-background: var(
+    --navds-semantic-color-component-background-light
   );
-  --navds-button-color-secondary-background: var(--navds-color-background);
   --navds-button-color-secondary-background-hover: var(
-    --navds-color-action-hover
+    --navds-semantic-color-interaction-primary-hover
   );
   --navds-button-color-secondary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
   );
 
   /* Tertiary */
-  --navds-button-color-tertiary-text: var(--navds-color-action-default);
-  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
-  --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
-  --navds-button-color-tertiary-border-active: var(--navds-color-white);
+  --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-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --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-color-action-active
+    --navds-semantic-color-interaction-primary-selected
   );
 
   /* Danger */
-  --navds-button-color-danger-text: var(--navds-color-white);
-  --navds-button-color-danger-background: var(--navds-color-danger-default);
-  --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
+  --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-color-danger-active
+    --navds-semantic-color-interaction-danger-selected
+  );
+  --navds-button-color-danger-border-focus: var(
+    --navds-semantic-color-component-background-light
   );
-  --navds-button-color-danger-border-focus: var(--navds-color-white);
 
-  /* Disabled */
-  --navds-button-color-text-disabled: var(--navds-color-text-inverse);
-  --navds-button-color-background-disabled: var(--navds-color-disabled);
+  /* Loader */
+  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-on-button-foreground: currentColor;
 }
 
 .navds-button {
@@ -111,8 +141,13 @@
     var(--navds-shadow-focus);
 }
 
+.navds-button--primary:hover:disabled,
+.navds-button--primary:active:disabled {
+  background-color: var(--navds-button-color-primary-background);
+}
+
 /**************************
- * .navds-button--secondary *
+* .navds-button--secondary *
  **************************/
 
 .navds-button--secondary {
@@ -145,6 +180,13 @@
     var(--navds-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--tertiary *
  ****************************/
@@ -168,11 +210,23 @@
   box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
 }
 
+.navds-button--tertiary:active:hover {
+  background-color: var(--navds-button-color-tertiary-background-active);
+}
+
 .navds-button--tertiary:active:focus {
   box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
     var(--navds-shadow-focus);
 }
 
+.navds-button--tertiary:disabled,
+.navds-button--tertiary:active:disabled,
+.navds-button--tertiary:active:hover:disabled {
+  color: var(--navds-button-color-tertiary-text);
+  background: none;
+  box-shadow: none;
+}
+
 /*************************
  * .navds-button--danger *
  *************************/
@@ -195,14 +249,28 @@
     var(--navds-shadow-focus);
 }
 
+.navds-button--danger:hover:disabled,
+.navds-button--danger:active:disabled {
+  background-color: var(--navds-button-color-danger-background);
+}
+
 /**************************
  * .navds-button:disabled *
  **************************/
 
 .navds-button:disabled {
-  color: var(--navds-button-color-text-disabled);
-  background-color: var(--navds-button-color-background-disabled);
   cursor: not-allowed;
-  box-shadow: none;
-  transform: none;
+}
+
+.navds-button:disabled:not(.navds-button--loading) {
+  opacity: 0.3;
+}
+
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: var(--navds-loader-color-on-button-foreground);
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
 }

@navikt/core/css/card.css

@@ -1,15 +1,25 @@
 :root {
-  --navds-card-micro-color-text: var(--navds-color-text-primary);
-  --navds-card-micro-color-background: var(--navds-color-orange-20);
+  --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-color-blue-50);
-  --navds-card-micro-color-background-hover: var(--navds-color-white);
-  --navds-card-micro-color-border-hover: var(--navds-color-blue-50);
-  --navds-card-micro-color-text-focus: var(--navds-color-blue-50);
-  --navds-card-micro-color-background-focus: var(--navds-color-white);
-  --navds-card-micro-color-shadow-focus: var(--navds-color-blue-80);
-  --navds-card-micro-color-background-active: var(--navds-color-blue-70);
-  --navds-card-micro-color-text-active: var(--navds-color-white);
+  --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
+  );
 }
 
 /*

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

@@ -0,0 +1,12 @@
+.navds-content-container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 79.5rem;
+  padding: var(--navds-spacing-4);
+}
+
+@media (min-width: 448px) {
+  .navds-content-container {
+    padding: var(--navds-spacing-6);
+  }
+}

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

@@ -1,30 +1,30 @@
 :root {
   --navds-confirmation-panel-color-background: var(
-    --navds-color-warning-background
+    --navds-semantic-color-feedback-warning-background
   );
   --navds-confirmation-panel-color-background-checked: var(
-    --navds-color-success-background
+    --navds-semantic-color-feedback-success-background
   );
   --navds-confirmation-panel-color-border-checked: var(
-    --navds-color-success-background
+    --navds-semantic-color-feedback-success-background
   );
   --navds-confirmation-panel-color-background-error: var(
-    --navds-color-error-background
+    --navds-semantic-color-feedback-danger-background
   );
   --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
-    --navds-color-green-70
+    --navds-global-color-green-700
   );
   --navds-confirmation-panel-color-checkbox-border-checked-hover: var(
-    --navds-color-green-70
+    --navds-global-color-green-700
   );
   --navds-confirmation-panel-color-checkbox-background-checked: var(
-    --navds-color-green-50
+    --navds-global-color-green-500
   );
   --navds-confirmation-panel-color-checkbox-border-checked: var(
-    --navds-color-green-50
+    --navds-semantic-color-feedback-success-border
   );
   --navds-confirmation-panel-color-checkbox-label-checked: var(
-    --navds-color-darkgray
+    --navds-semantic-color-text
   );
 }
 
@@ -77,7 +77,7 @@
     --navds-confirmation-panel-color-checkbox-background-checked
   );
   border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
-  background-image: var(--navds-checkmark-image-white);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
 }
 
 .navds-confirmation-panel--checked
@@ -94,5 +94,5 @@
 .navds-confirmation-panel--checked
   .navds-checkbox__input:focus:hover
   + .navds-checkbox__label::before {
-  background-image: var(--navds-checkmark-image-white);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
 }

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

@@ -0,0 +1,15 @@
+:root {
+  --navds-error-message-color-text: var(
+    --navds-semantic-color-feedback-danger-text
+  );
+}
+
+.navds-error-message {
+  color: var(--navds-error-message-color-text);
+  display: flex;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-error-message::before {
+  content: "•";
+}

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

@@ -1,6 +1,10 @@
 :root {
-  --navds-error-summary-color-background: var(--navds-color-white);
-  --navds-error-summary-color-border: var(--navds-color-error-border);
+  --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 {

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

@@ -0,0 +1,24 @@
+.navds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.navds-fieldset > :not(:first-child):not(:empty) {
+  margin-top: var(--navds-spacing-2);
+}
+
+.navds-fieldset > .navds-fieldset__description:not(:empty) {
+  margin-top: var(--navds-spacing-1);
+}
+
+/* Applied when hideLegend is applied to fieldset */
+.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
+  margin-top: 0;
+}
+
+.navds-fieldset:disabled > .navds-fieldset__legend,
+.navds-fieldset:disabled > .navds-fieldset__description {
+  opacity: 0.3;
+}

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

@@ -0,0 +1,10 @@
+.navds-form-field > :not(:first-child):not(:empty),
+.navds-form-field > input:not(:first-child) {
+  margin-top: var(--navds-spacing-2);
+}
+
+/* Applied when hideLabel is applied to form-element */
+.navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
+.navds-form-field > .navds-sr-only + input:not(:first-child) {
+  margin-top: 0;
+}

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

@@ -4,13 +4,11 @@
 @import "fieldset.css";
 @import "form.css";
 @import "error-summary.css";
-@import "checkbox.css";
-@import "checkbox-group.css";
 @import "confirmation-panel.css";
 @import "error-message.css";
-@import "radio.css";
-@import "radio-group.css";
+@import "radio-checkbox.css";
 @import "select.css";
+@import "switch.css";
 @import "text-field.css";
 @import "textarea.css";
 @import "search-field.css";

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

@@ -0,0 +1,206 @@
+:root {
+  --navds-radio-checkbox-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
+  --navds-radio-checkbox-color-background-hover: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+  --navds-radio-checkbox-color-background-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-radio-checkbox-color-shadow: var(--navds-semantic-color-border);
+  --navds-radio-checkbox-color-shadow-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-radio-checkbox-color-shadow-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-radio-checkbox-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-radio-checkbox-color-label-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+}
+
+.navds-checkbox,
+.navds-radio {
+  position: relative;
+  width: fit-content;
+}
+
+.navds-checkbox__input,
+.navds-radio__input {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  top: 0;
+  left: -12px;
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.navds-checkbox__label,
+.navds-radio__label {
+  padding: var(--navds-spacing-3) 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-checkbox__label::before,
+.navds-radio__label::before {
+  content: "";
+  background-color: var(--navds-radio-checkbox-color-background);
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.navds-radio__label::before {
+  border-radius: 50%;
+}
+
+.navds-checkbox__content,
+.navds-radio__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-checkbox__description,
+.navds-radio__description {
+  color: var(--navds-radio-checkbox-color-text);
+}
+
+.navds-checkbox--small > .navds-checkbox__input,
+.navds-radio--small > .navds-radio__input {
+  width: 32px;
+  height: 32px;
+  top: 0;
+  left: -6px;
+}
+
+.navds-checkbox--small > .navds-checkbox__label,
+.navds-radio--small > .navds-radio__label {
+  padding: 6px 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__label::before,
+.navds-radio--small > .navds-radio__label::before {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio__input:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
+  box-shadow: none;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translate(0.375rem, -50%);
+  background-color: var(--navds-radio-checkbox-color-background);
+  width: 0.75rem;
+  height: 0.25rem;
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+
+.navds-checkbox--small
+  .navds-checkbox__input:indeterminate
+  + .navds-checkbox__label::after {
+  transform: translate(0.25rem, -50%);
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  background-position: 6px center;
+  background-repeat: no-repeat;
+  background-size: 13px;
+  box-shadow: none;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-checkbox--small
+  > .navds-checkbox__input:checked
+  + .navds-checkbox__label::before {
+  background-position: 4px center;
+}
+.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+  box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
+}
+
+.navds-radio__input:checked + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
+    inset 0 0 0 4px #fff;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-radio__input:checked:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
+    inset 0 0 0 4px #fff, var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+  color: var(--navds-radio-checkbox-color-label-hover);
+}
+
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
+  background-color: var(--navds-radio-checkbox-color-background-hover);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox--disabled,
+.navds-radio--disabled {
+  opacity: 0.3;
+}
+
+.navds-checkbox--disabled > .navds-checkbox__input,
+.navds-checkbox--disabled > .navds-checkbox__label,
+.navds-radio--disabled > .navds-radio__input,
+.navds-radio--disabled > .navds-radio__label {
+  cursor: not-allowed;
+}

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

@@ -1,7 +1,13 @@
 :root {
-  --navds-search-field-color-shadow-error: var(--navds-color-red-50);
-  --navds-search-field-color-border-error: var(--navds-color-red-50);
-  --navds-search-field-color-clearbutton-border: var(--navds-color-gray-60);
+  --navds-search-field-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-search-field-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-search-field-color-clearbutton-border: var(
+    --navds-semantic-color-border
+  );
 }
 
 .navds-search-field__input-wrapper {
@@ -29,6 +35,10 @@
   border-bottom-left-radius: 0;
 }
 
+.navds-search-field__input-wrapper > :last-child:first-child {
+  border-radius: 4px;
+}
+
 .navds-search-field__input-wrapper :focus {
   z-index: var(--navds-z-index-focus);
 }
@@ -43,3 +53,7 @@
   box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
   border-color: var(--navds-search-field-color-border-error);
 }
+
+.navds-search-field--disabled {
+  opacity: 0.3;
+}

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

@@ -1,17 +1,26 @@
 :root {
-  --navds-select-color-background: var(--navds-color-white);
-  --navds-select-color-border: var(--navds-color-gray-60);
-  --navds-select-color-border-hover: var(--navds-color-blue-50);
-  --navds-select-color-border-error: var(--navds-color-red-50);
-  --navds-select-color-shadow-error: var(--navds-color-red-50);
-  --navds-select-color-border-disabled: var(--navds-color-gray-40);
-  --navds-select-color-background-disabled: var(--navds-color-gray-10);
-  --navds-select-color-text-disabled: var(--navds-color-darkgray);
+  --navds-select-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-select-color-border: var(--navds-semantic-color-border);
+  --navds-select-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-select-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-select-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-select-color-border-disabled: var(--navds-global-color-gray-400);
+  --navds-select-color-background-disabled: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-select-color-text-disabled: var(--navds-semantic-color-text);
 }
 
 .navds-select__input {
   appearance: none;
-  padding: 0.5rem;
   background-color: var(--navds-select-color-background);
   border-radius: 4px;
   border: 1px solid var(--navds-select-color-border);
@@ -20,6 +29,7 @@
   min-height: 48px;
   display: inline-block;
   position: relative;
+  padding: 0.5rem;
   padding-right: 2.5rem;
 }
 
@@ -49,6 +59,7 @@
 .navds-form-field--small .navds-select__input {
   min-height: 32px;
   padding: 0.25rem;
+  padding-right: 2rem;
 }
 
 /**
@@ -59,12 +70,16 @@
   border-color: var(--navds-select-color-border-error);
 }
 
-/* Disabled handling */
-.navds-select__input:disabled,
-.navds-select__input[read-only] {
-  background-color: var(--navds-select-color-background-disabled);
-  border-color: var(--navds-select-color-border-disabled);
+/*
+  Disabled handling
+ */
+.navds-select--disabled {
+  opacity: 0.3;
+}
+
+.navds-select__input:disabled {
+  background-color: var(--navds-select-color-background);
+  border-color: var(--navds-select-color-border);
   box-shadow: none;
-  color: var(--navds-select-color-text-disabled);
   cursor: not-allowed;
 }

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

@@ -0,0 +1,220 @@
+:root {
+  --navds-switch-color-label: var(--navds-semantic-color-text);
+  --navds-switch-color-label-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
+  --navds-switch-color-track-background-checked: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-switch-color-track-background-hover: var(
+    --navds-global-color-gray-800
+  );
+  --navds-switch-color-track-background-hover-checked: var(
+    --navds-semantic-color-feedback-success-icon
+  );
+  --navds-switch-color-track-shadow-inner-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-switch-color-thumb: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-switch-color-thumb-icon: var(--navds-semantic-color-text-muted);
+  --navds-switch-color-thumb-icon-checked: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-switch-color-thumb-loader-checked: var(
+    --navds-semantic-color-feedback-success-border
+  );
+}
+
+.navds-switch {
+  position: relative;
+  min-height: 48px;
+  width: fit-content;
+}
+
+.navds-switch--right {
+  width: auto;
+}
+
+.navds-switch--small {
+  position: relative;
+  min-height: 32px;
+}
+
+/* Input */
+.navds-switch__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-switch--small > .navds-switch__input {
+  height: 32px;
+  top: 0;
+}
+
+/* Label */
+.navds-switch__label-wrapper {
+  cursor: pointer;
+  color: var(--navds-switch-color-label);
+}
+
+.navds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-1);
+  padding: 0.75rem 0 0.75rem 3.25rem;
+}
+
+.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: 0.75rem 3.25rem 0.75rem 0;
+}
+
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--navds-spacing-2) - 2px) 0
+    calc(var(--navds-spacing-2) - 2px) 3.25rem;
+}
+
+.navds-switch--right.navds-switch--small
+  > .navds-switch__label-wrapper
+  > .navds-switch__content {
+  padding: calc(var(--navds-spacing-2) - 2px) 3.25rem
+    calc(var(--navds-spacing-2) - 2px) 0;
+}
+
+.navds-switch--with-description,
+.navds-switch--small
+  > .navds-switch__label-wrapper
+  > .navds-switch--with-description {
+  padding-bottom: 0;
+}
+
+.navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch__label-wrapper:hover {
+  color: var(--navds-switch-color-label-hover);
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+  color: inherit;
+}
+
+/* Track */
+.navds-switch__track {
+  width: 44px;
+  height: 24px;
+  background-color: var(--navds-switch-color-track-background);
+  position: absolute;
+  top: var(--navds-spacing-3);
+  left: 0;
+  border-radius: 4px;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navds-switch--small > .navds-switch__track {
+  top: var(--navds-spacing-1);
+}
+
+.navds-switch--right > .navds-switch__input,
+.navds-switch--right > .navds-switch__track {
+  right: 0;
+  left: auto;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-checked);
+}
+
+.navds-switch__input:hover ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-hover);
+}
+
+.navds-switch__input:hover:checked ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-hover-checked);
+}
+
+.navds-switch__input:disabled ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background);
+}
+
+.navds-switch__input:checked:disabled ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-checked);
+}
+
+.navds-switch__input:focus ~ .navds-switch__track {
+  box-shadow: 0 0 0 1px var(--navds-switch-color-track-shadow-inner-focus),
+    var(--navds-shadow-focus);
+}
+
+/* Thumb */
+.navds-switch__thumb {
+  background-color: var(--navds-switch-color-thumb);
+  color: var(--navds-switch-color-thumb-icon);
+  border-radius: 2.5px;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  transform: translateX(0);
+  left: 2px;
+  top: 2px;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(20px);
+  color: var(--navds-switch-color-thumb-icon-checked);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(2px);
+  }
+
+  .navds-switch__input:checked:hover
+    ~ .navds-switch__track
+    > .navds-switch__thumb {
+    transform: translateX(18px);
+  }
+}
+
+.navds-switch__input:disabled:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(0);
+}
+
+.navds-switch__input:checked:disabled:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(20px);
+}
+
+/* Loader */
+.navds-switch__input:checked
+  ~ .navds-switch__track
+  > .navds-switch__thumb
+  .navds-loader__foreground {
+  stroke: var(--navds-switch-color-thumb-loader-checked);
+}
+
+/* Disabled */
+.navds-switch__input:disabled {
+  appearance: none;
+}
+
+.navds-switch--disabled:not(.navds-switch--loading) {
+  opacity: 0.3;
+}
+
+.navds-switch__input:disabled,
+.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,93 @@
+:root {
+  --navds-text-field-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-text-field-color-border: var(--navds-semantic-color-border);
+  --navds-text-field-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-text-field-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-text-field-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-text-field-color-border-disabled: var(--navds-global-color-gray-400);
+  --navds-text-field-color-background-disabled: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
+}
+
+.navds-text-field__input {
+  appearance: none;
+  padding: 0.5rem;
+  background-color: var(--navds-text-field-color-background);
+  border-radius: 4px;
+  border: 1px solid var(--navds-text-field-color-border);
+  min-height: 48px;
+  width: 100%;
+}
+
+.navds-form-field--small > .navds-text-field__input {
+  padding: 0 0.25rem;
+  min-height: 32px;
+}
+
+.navds-form-field--small > .navds-text-field__description:not(:empty) {
+  margin-top: var(--navds-spacing-1);
+}
+
+.navds-text-field__input:hover {
+  border-color: var(--navds-text-field-color-border-hover);
+}
+
+.navds-text-field__input:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+/**
+  Error handling
+*/
+.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
+  border-color: var(--navds-text-field-color-border-error);
+  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error);
+}
+
+.navds-text-field--error
+  > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error),
+    var(--navds-shadow-focus);
+}
+
+/* Disabled handling */
+.navds-text-field__input:disabled {
+  background-color: var(--navds-text-field-color-background);
+  border-color: var(--navds-text-field-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.navds-text-field__input[readonly] {
+  background-color: var(--navds-text-field-color-background);
+  border-color: var(--navds-text-field-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-text-field--disabled > .navds-text-field__label,
+.navds-text-field--disabled > .navds-text-field__description {
+  opacity: 0.3;
+}
+
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"]::-webkit-search-decoration,
+.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-button,
+.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}

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

@@ -1,14 +1,26 @@
 :root {
-  --navds-textarea-color-background: var(--navds-color-white);
-  --navds-textarea-color-border: var(--navds-color-gray-60);
-  --navds-textarea-color-border-hover: var(--navds-color-blue-50);
-  --navds-textarea-color-border-error: var(--navds-color-red-50);
-  --navds-textarea-color-shadow-error: var(--navds-color-red-50);
-  --navds-textarea-color-counter-text: var(--navds-color-gray-40);
-  --navds-textarea-color-counter-text-error: var(--navds-color-red-50);
-  --navds-textarea-color-text-disabled: var(--navds-color-darkgray);
-  --navds-textarea-color-border-disabled: var(--navds-color-gray-40);
-  --navds-textarea-color-background-disabled: var(--navds-color-gray-10);
+  --navds-textarea-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-textarea-color-border: var(--navds-semantic-color-border);
+  --navds-textarea-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-textarea-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-counter-text: var(--navds-global-color-gray-400);
+  --navds-textarea-color-counter-text-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-text-disabled: var(--navds-semantic-color-text);
+  --navds-textarea-color-border-disabled: var(--navds-global-color-gray-400);
+  --navds-textarea-color-background-disabled: var(
+    --navds-semantic-color-component-background-alternate
+  );
 }
 
 .navds-textarea__wrapper {
@@ -26,7 +38,7 @@
   width: 100%;
   transition: height 0.1s ease-out;
   display: block;
-  min-height: 48px;
+  min-height: 3rem;
 }
 
 .navds-textarea--counter {
@@ -44,7 +56,7 @@
 
 .navds-form-field--small .navds-textarea__input {
   padding: var(--navds-spacing-1);
-  min-height: 32px;
+  min-height: 2rem;
 }
 
 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
@@ -78,11 +90,20 @@
 /*
   Disabled handling
  */
-.navds-textarea__input:disabled,
+.navds-textarea--disabled {
+  opacity: 0.3;
+}
+
+.navds-textarea__input:disabled {
+  background-color: var(--navds-textarea-color-background);
+  border-color: var(--navds-textarea-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
 .navds-textarea__input[readonly] {
-  background-color: var(--navds-textarea-color-background-disabled);
-  border-color: var(--navds-textarea-color-border-disabled);
+  background-color: var(--navds-textarea-color-background);
+  border-color: var(--navds-textarea-color-border);
   box-shadow: none;
-  color: var(--navds-textarea-color-text-disabled);
   cursor: not-allowed;
 }

@navikt/core/css/grid.css

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

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

@@ -1,7 +1,11 @@
 :root {
-  --navds-guide-panel-color-background: var(--navds-color-background);
-  --navds-guide-panel-color-border: var(--navds-color-blue-40);
-  --navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
+  --navds-guide-panel-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-guide-panel-color-border: var(--navds-global-color-blue-400);
+  --navds-guide-panel-color-illustration-background: var(
+    --navds-global-color-blue-200
+  );
 }
 
 /**

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

@@ -1,13 +1,25 @@
 :root {
   --navds-help-text-color-button-background: transparent;
-  --navds-help-text-color-icon: var(--navds-color-blue-50);
-  --navds-help-text-color-icon-hover: var(--navds-color-white);
-  --navds-help-text-color-icon-background-hover: var(--navds-color-blue-50);
-  --navds-help-text-color-icon-shadow-hover: var(--navds-color-blue-50);
-  --navds-help-text-color-icon-focus: var(--navds-color-white);
-  --navds-help-text-color-icon-background-focus: var(--navds-color-blue-50);
-  --navds-help-text-color-icon-shadow-focus: var(--navds-color-blue-80);
-  --navds-help-text-color-popover-background: var(--navds-color-lightblue-10);
+  --navds-help-text-color-icon: var(--navds-semantic-color-interaction-primary);
+  --navds-help-text-color-icon-hover: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-help-text-color-icon-background-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-help-text-color-icon-shadow-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-help-text-color-icon-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-help-text-color-icon-background-focus: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-help-text-color-icon-shadow-focus: var(--navds-semantic-color-focus);
+  --navds-help-text-color-popover-background: var(
+    --navds-semantic-color-feedback-info-background
+  );
 }
 
 .navds-help-text__button {

@navikt/core/css/index.css

@@ -3,23 +3,23 @@
 @import "grid.css";
 
 @import "accordion.css";
-@import "accordion-menu.css";
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
-@import "copy-to-clipboard.css";
-@import "internal-header.css";
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";
 @import "link.css";
 @import "loader.css";
+@import "menu.css";
 @import "modal.css";
 @import "popover.css";
 @import "tag.css";
 @import "panel.css";
 @import "link-panel.css";
 @import "speech-bubble.css";
+@import "step-indicator.css";
+@import "table.css";
 
 /* Navno spesific packages */
 @import "page-header.css";

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

@@ -1,7 +1,9 @@
 :root {
-  --navds-link-panel-color-text: var(--navds-color-gray-90);
-  --navds-link-panel-color-border-hover: var(--navds-color-blue-50);
-  --navds-link-panel-color-title-hover: var(--navds-color-text-link);
+  --navds-link-panel-color-text: var(--navds-semantic-color-text);
+  --navds-link-panel-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-link-panel-color-title-hover: var(--navds-semantic-color-link);
 }
 
 .navds-link-panel {
@@ -19,7 +21,7 @@
 }
 
 .navds-link-panel:hover {
-  box-shadow: var(--navds-shadow-hover);
+  box-shadow: var(--navds-shadow-card);
   border-color: var(--navds-link-panel-color-border-hover);
 }
 

@navikt/core/css/link.css

@@ -1,13 +1,13 @@
 :root {
-  --navds-link-color-text: var(--navds-color-text-link);
-  --navds-link-color-text-focus: var(--navds-color-text-inverse);
-  --navds-link-color-text-active: var(--navds-color-text-inverse);
-  --navds-link-color-background-focus: var(--navds-text-focus);
-  --navds-link-color-background-active: var(--navds-text-focus);
-  --navds-link-color-icon: var(--navds-color-text-link);
-  --navds-link-color-icon-focus: var(--navds-color-text-inverse);
-  --navds-link-color-on-info-background: var(--navds-color-text-primary);
-  --navds-link-color-on-error-background: var(--navds-color-text-primary);
+  --navds-link-color-text: var(--navds-semantic-color-link);
+  --navds-link-color-text-focus: var(--navds-semantic-color-text-inverted);
+  --navds-link-color-text-active: var(--navds-semantic-color-text-inverted);
+  --navds-link-color-background-focus: var(--navds-semantic-color-focus);
+  --navds-link-color-background-active: var(--navds-semantic-color-focus);
+  --navds-link-color-icon: var(--navds-semantic-color-link);
+  --navds-link-color-icon-focus: var(--navds-semantic-color-text-inverted);
+  --navds-link-color-on-info-background: var(--navds-semantic-color-text);
+  --navds-link-color-on-error-background: var(--navds-semantic-color-text);
 }
 
 .navds-link {
@@ -36,7 +36,7 @@
   color: var(--navds-link-color-text-focus);
   text-decoration: none;
   background-color: var(--navds-link-color-background-focus);
-  box-shadow: var(--navds-text-shadow);
+  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
 }
 
 .navds-link:active {
@@ -44,7 +44,7 @@
   color: var(--navds-link-color-text-active);
   text-decoration: none;
   background-color: var(--navds-link-color-background-active);
-  box-shadow: var(--navds-text-shadow);
+  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
 }
 
 .navds-link svg {

@navikt/core/css/loader.css

@@ -1,13 +1,17 @@
 :root {
-  --navds-loader-color-foreground: var(--navds-color-gray-40);
-  --navds-loader-color-background: var(--navds-color-gray-10);
-  --navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
-  --navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
-  --navds-loader-color-inverted-foreground: var(--navds-color-white);
+  --navds-loader-color-foreground: var(--navds-global-color-gray-400);
+  --navds-loader-color-background: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
+  --navds-loader-color-interaction-foreground: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-loader-color-inverted-foreground: var(
+    --navds-semantic-color-component-background-light
+  );
   --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
   --navds-loader-color-transparent-background: transparent;
-  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
-  --navds-loader-color-on-button-foreground: currentColor;
 }
 
 .navds-loader {
@@ -72,27 +76,6 @@
   width: 1rem;
 }
 
-/*
- * Button spesific styling
- */
-
-.navds-button .navds-loader .navds-loader__foreground {
-  stroke: var(--navds-loader-color-on-button-foreground);
-}
-
-.navds-button:hover .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
-}
-
-.navds-button:active .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
-}
-
-.navds-button--primary .navds-loader .navds-loader__background,
-.navds-button--danger .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
-}
-
 @keyframes loader-rotate {
   100% {
     transform: rotate(360deg);

@navikt/core/css/menu.css

@@ -0,0 +1,102 @@
+:root {
+  --navds-menu-color-text: var(--navds-semantic-color-link);
+  --navds-menu-color-text-hover: var(--navds-semantic-color-text);
+  --navds-menu-color-text-focus: var(--navds-semantic-color-text);
+  --navds-menu-color-background-hover: var(--navds-global-color-blue-50);
+  --navds-menu-color-text-active: var(--navds-semantic-color-text);
+  --navds-menu-outline-focus: var(--navds-semantic-color-focus);
+}
+
+.navds-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding: 0 0.5rem;
+}
+
+.navds-menu__list--inner {
+  padding: 0;
+}
+
+.navds-menu-collapse__button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  font: inherit;
+  text-align: inherit;
+  margin: 0;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: var(--navds-font-weight-bold);
+  color: var(--navds-menu-color-text);
+}
+
+.navds-menu-item,
+.navds-menu-collapse__button {
+  font-weight: var(--navds-font-weight-bold);
+  display: flex;
+  padding: var(--navds-spacing-3) var(--navds-spacing-2);
+  text-decoration: none;
+}
+
+.navds-menu-item:focus,
+.navds-menu-collapse__button:focus {
+  outline: 3px solid var(--navds-menu-outline-focus);
+  outline-offset: -3px;
+  color: var(--navds-menu-color-text-focus);
+}
+
+.navds-menu-collapse__button:focus > .navds-menu-collapse__expand-icon {
+  color: var(--navds-menu-color-focus);
+}
+
+.navds-menu-item:hover,
+.navds-menu-collapse__button:hover {
+  background-color: var(--navds-menu-color-background-hover);
+  color: var(--navds-menu-color-text-hover);
+}
+
+.navds-menu-item--active {
+  box-shadow: -0.5rem 0 var(--navds-semantic-color-link);
+  color: var(--navds-menu-color-text-active);
+  text-decoration: none;
+}
+
+/* Collapse icon */
+.navds-menu-collapse__expand-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+  margin-left: var(--navds-spacing-2);
+}
+
+.navds-menu-collapse__expand-icon--filled,
+.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon {
+  display: none;
+}
+
+.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon--filled {
+  display: block;
+}
+
+.navds-menu-collapse--open
+  > .navds-menu-collapse__button
+  > .navds-menu-collapse__expand-icon {
+  transform: rotate(180deg);
+}
+
+/* Nesting levels */
+.navds-menu__list[data-depth="1"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="1"] .navds-menu-item {
+  padding-left: var(--navds-spacing-6);
+}
+
+.navds-menu__list[data-depth="2"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="2"] .navds-menu-item {
+  padding-left: var(--navds-spacing-10);
+}
+
+.navds-menu__list[data-depth="3"] .navds-menu-collapse__button,
+.navds-menu__list[data-depth="3"] .navds-menu-item {
+  padding-left: var(--navds-spacing-14);
+}

@navikt/core/css/modal.css

@@ -1,6 +1,8 @@
 :root {
-  --navds-modal-color-background: var(--navds-color-background);
-  --navds-modal-color-overlay: var(--navds-color-modal-overlay);
+  --navds-modal-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-modal-color-overlay: rgba(38, 38, 38, 0.7);
 }
 
 .ReactModal__Body--open {

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.8.3",
+  "version": "0.15.2",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.5.1",
+    "@navikt/ds-tokens": "^0.8.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

@navikt/core/css/page-header.css

@@ -1,8 +1,14 @@
 :root {
-  --navds-page-header-color-background: var(--navds-color-background);
-  --navds-page-header-color-shadow-situation: var(--navds-color-orange-40);
-  --navds-page-header-color-shadow-product: var(--navds-color-green-40);
-  --navds-page-header-color-shadow-guide: var(--navds-color-deepblue-40);
+  --navds-page-header-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-page-header-color-shadow-situation: var(
+    --navds-global-color-orange-400
+  );
+  --navds-page-header-color-shadow-product: var(--navds-global-color-green-400);
+  --navds-page-header-color-shadow-guide: var(
+    --navds-global-color-deepblue-400
+  );
 }
 
 .navds-page-header {
@@ -65,6 +71,6 @@
     height: 3rem;
   }
   .navds-page-header__title {
-    font-size: var(--navds-font-size-title-xl);
+    font-size: var(--navds-font-size-heading-xlarge);
   }
 }

@navikt/core/css/panel.css

@@ -1,12 +1,14 @@
 :root {
-  --navds-panel-color-background: var(--navds-color-white);
-  --navds-panel-color-border: var(--navds-color-border);
+  --navds-panel-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-panel-color-border: var(--navds-semantic-color-border-muted);
 }
 
 .navds-panel {
   background-color: var(--navds-panel-color-background);
   padding: var(--navds-spacing-4);
-  border-radius: var(--navds-border-radius);
+  border-radius: 4px;
   border: 1px solid transparent;
 }
 

@navikt/core/css/popover.css

@@ -1,13 +1,14 @@
 :root {
-  --navds-popover-color-background: var(--navds-color-background);
-  --navds-popover-color-border: var(--navds-color-gray-40);
-  --navds-popover-color-shadow: var(--navds-color-gray-20);
+  --navds-popover-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-popover-color-border: var(--navds-semantic-color-border-muted);
 }
 
 .navds-popover {
   z-index: var(--navds-z-index-popover);
   background-color: var(--navds-popover-color-background);
-  box-shadow: 0 2px 4px 0 var(--navds-popover-color-shadow);
+  box-shadow: var(--navds-shadow-popover);
   border: 1px solid;
   border-color: var(--navds-popover-color-border);
   border-radius: 4px;

@navikt/core/css/speech-bubble.css

@@ -1,11 +1,14 @@
 :root {
-  --navds-speechbubble-color-background: var(--navds-color-gray-10);
-  --navds-speechbubble-color-shadow: var(--navds-color-gray-20);
-  --navds-speechbubble-color-illustration: var(--navds-color-darkgray);
+  --navds-speechbubble-color-background: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-speechbubble-color-illustration: var(--navds-semantic-color-text);
   --navds-speechbubble-color-illustration-background: var(
-    --navds-color-gray-20
+    --navds-semantic-color-canvas-background
+  );
+  --navds-speechbubble-color-detail-text: var(
+    --navds-semantic-color-text-muted
   );
-  --navds-speechbubble-color-detail-text: var(--navds-color-gray-60);
 }
 
 .navds-speechbubble {
@@ -52,7 +55,7 @@
 
 .navds-speechbubble__bubble {
   padding: 1rem;
-  box-shadow: 0 2px 4px 0 var(--navds-speechbubble-color-shadow);
+  box-shadow: var(--navds-shadow-popover);
   width: fit-content;
   max-width: 37.5rem;
   background-color: var(--navds-speechbubble-color-background);

@navikt/core/css/step-indicator.css

@@ -0,0 +1,202 @@
+:root {
+  --navds-step-indicator-color-step-line: var(--navds-semantic-color-divider);
+  --navds-step-indicator-color-step-text: var(--navds-semantic-color-text);
+  --navds-step-indicator-color-step-label: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-step-indicator-color-step-number-background: var(
+    --navds-semantic-color-canvas-background-light
+  );
+  --navds-step-indicator-color-step-number-background-finished: var(
+    --navds-semantic-color-canvas-background
+  );
+  --navds-step-indicator-color-step-number-shadow: var(
+    --navds-semantic-color-border
+  );
+  --navds-step-indicator-color-step-number-shadow-active: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+  --navds-step-indicator-color-step-number-shadow-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-step-indicator-color-step-number-background-active: var(
+    --navds-semantic-color-interaction-primary-selected
+  );
+  --navds-step-indicator-color-step-number-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-step-indicator-color-step-number-shadow-inset: var(
+    --navds-semantic-color-component-background-light
+  );
+}
+
+/* StepIndicator */
+.navds-step-indicator {
+  display: flex;
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+}
+
+/* Step */
+.navds-step-indicator__step-wrapper {
+  padding: 0 var(--navds-spacing-2);
+  flex: 1;
+  position: relative;
+  list-style: none;
+  min-width: 10rem;
+}
+
+.navds-step-indicator__step-wrapper--hidelabel {
+  min-width: 5rem;
+}
+
+.navds-step-indicator__step {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 0;
+  background: none;
+  border: none;
+  appearance: none;
+  width: 100%;
+  flex-shrink: 1;
+  color: var(--navds-step-indicator-color-step-text);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.navds-step-indicator__step-number {
+  flex-shrink: 0;
+  display: flex;
+  width: 2rem;
+  height: 2rem;
+  margin: 0.5rem;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
+  background-color: var(--navds-step-indicator-color-step-number-background);
+}
+
+.navds-step-indicator__step-wrapper:first-child
+  > .navds-step-indicator__step
+  > .navds-step-indicator__step-number {
+  padding-right: 0;
+}
+
+.navds-step-indicator__step-wrapper:last-child
+  > .navds-step-indicator__step
+  > .navds-step-indicator__step-number {
+  padding-left: 0;
+}
+
+.navds-step-indicator__step-label {
+  width: 100%;
+  margin-top: var(--navds-spacing-4);
+  text-align: center;
+  color: var(--navds-step-indicator-color-step-label);
+  text-decoration: underline;
+}
+
+.navds-step-indicator__step-line {
+  flex: 1 1 100%;
+  position: absolute;
+  top: 1.5rem;
+  right: calc(50% + 2rem);
+  left: calc(-50% + 2rem);
+  display: block;
+  border-top: 2px solid var(--navds-step-indicator-color-step-line);
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.navds-step-indicator__step--active > .navds-step-indicator__step-label {
+  color: var(--navds-step-indicator-color-step-text);
+  font-weight: bold;
+}
+
+.navds-step-indicator__step--active > .navds-step-indicator__step-number {
+  background-color: var(
+    --navds-step-indicator-color-step-number-background-active
+  );
+  color: var(--navds-step-indicator-color-step-number-text-active);
+  box-shadow: 0 0 0 1px
+    var(--navds-step-indicator-color-step-number-shadow-active);
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0.25rem;
+}
+
+.navds-step-indicator__step:focus {
+  outline: none;
+}
+
+.navds-step-indicator__step:hover > .navds-step-indicator__step-label {
+  text-decoration: none;
+}
+
+.navds-step-indicator__step.navds-step-indicator__step--disabled:hover
+  > .navds-step-indicator__step-label {
+  text-decoration: underline;
+}
+
+.navds-step-indicator__step--active > .navds-step-indicator__step-label,
+.navds-step-indicator__step--active.navds-step-indicator__step--disabled:hover
+  > .navds-step-indicator__step-label {
+  text-decoration: none;
+}
+
+.navds-step-indicator__step:hover > .navds-step-indicator__step-number {
+  background: var(--navds-step-indicator-color-step-number-background);
+  box-shadow: 0 0 0 2px
+    var(--navds-step-indicator-color-step-number-shadow-hover);
+}
+
+.navds-step-indicator__step--active:hover > .navds-step-indicator__step-number {
+  background-color: var(
+    --navds-step-indicator-color-step-number-background-active
+  );
+  color: var(--navds-step-indicator-color-step-number-text-active);
+  box-shadow: 0 0 0 1px
+    var(--navds-step-indicator-color-step-number-shadow-active);
+}
+
+.navds-step-indicator__step:focus > .navds-step-indicator__step-number {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-step-indicator__step--active:focus > .navds-step-indicator__step-number {
+  box-shadow: 0 0 0 1px inset
+      var(--navds-step-indicator-color-step-number-shadow-inset),
+    var(--navds-shadow-focus);
+}
+
+.navds-step-indicator__step--disabled:hover
+  > .navds-step-indicator__step-number {
+  box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
+}
+
+.navds-step-indicator__step--disabled.navds-step-indicator__step--active:disabled
+  > .navds-step-indicator__step-number {
+  box-shadow: 0 0 0 1px
+    var(--navds-step-indicator-color-step-number-shadow-active);
+}
+
+/* Finished state */
+.navds-step-indicator__step--finished > .navds-step-indicator__step-number,
+.navds-step-indicator__step--finished.navds-step-indicator__step--disabled
+  > .navds-step-indicator__step-number {
+  background: var(--navds-step-indicator-color-step-number-background-finished);
+}
+
+/* Disabled */
+.navds-step-indicator__step--disabled > .navds-step-indicator__step-number,
+.navds-step-indicator__step--disabled > .navds-step-indicator__step-label {
+  opacity: 0.3;
+}
+
+.navds-step-indicator__step--disabled {
+  cursor: not-allowed;
+}

@navikt/core/css/table.css

@@ -0,0 +1,82 @@
+:root {
+  --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
+  --navds-table-row-color-background-hover: var(
+    --navds-semantic-color-canvas-background
+  );
+  --navds-table-row-color-background-selected: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+  --navds-table-row-color-background-selected-hover: var(
+    --navds-global-color-blue-100
+  );
+  --navds-table-row-color-background-zebra: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-table-cell-color-border-hover: var(--navds-semantic-color-border);
+}
+
+.navds-table {
+  border-collapse: collapse;
+  width: 100%;
+  display: table;
+}
+
+.navds-table__header {
+  display: table-header-group;
+}
+
+.navds-table__body {
+  display: table-row-group;
+}
+
+.navds-table__row {
+  display: table-row;
+}
+
+.navds-table__body .navds-table__row:hover {
+  background-color: var(--navds-table-row-color-background-hover);
+}
+
+.navds-table__row--selected {
+  background-color: var(--navds-table-row-color-background-selected);
+}
+
+.navds-table__body .navds-table__row--selected:hover {
+  background-color: var(--navds-table-row-color-background-selected-hover);
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  .navds-table__row:nth-of-type(odd):not(:hover):not(.navds-table__row--selected) {
+  background-color: var(--navds-table-row-color-background-zebra);
+}
+
+.navds-table__header-cell,
+.navds-table__data-cell {
+  display: table-cell;
+  padding: var(--navds-spacing-4);
+  border-bottom: 1px solid var(--navds-table-cell-color-border);
+  text-align: left;
+}
+
+.navds-table__body .navds-table__row:hover .navds-table__header-cell,
+.navds-table__body .navds-table__row:hover .navds-table__data-cell {
+  border-color: var(--navds-table-cell-color-border-hover);
+}
+
+.navds-table--small .navds-table__header-cell,
+.navds-table--small .navds-table__data-cell {
+  padding: var(--navds-spacing-2);
+}
+
+.navds-table .navds-checkbox .navds-checkbox__input {
+  top: -12px;
+}
+
+.navds-table .navds-checkbox--small .navds-checkbox__input {
+  top: -6px;
+}
+
+.navds-table .navds-checkbox .navds-checkbox__label {
+  padding: 0;
+}

@navikt/core/css/tag.css

@@ -1,18 +1,32 @@
 :root {
-  --navds-tag-color-border: var(--navds-color-gray-40);
-  --navds-tag-color-background: var(--navds-color-gray-10);
-  --navds-tag-color-info-background: var(--navds-color-tag-info-background);
-  --navds-tag-color-info-border: var(--navds-color-tag-info-border);
+  --navds-tag-color-border: var(--navds-semantic-color-border-muted);
+  --navds-tag-color-background: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-tag-color-info-background: var(
+    --navds-semantic-color-feedback-info-background
+  );
+  --navds-tag-color-info-border: var(
+    --navds-semantic-color-feedback-info-border
+  );
   --navds-tag-color-warning-background: var(
-    --navds-color-tag-warning-background
+    --navds-semantic-color-feedback-warning-background
+  );
+  --navds-tag-color-warning-border: var(
+    --navds-semantic-color-feedback-warning-border
   );
-  --navds-tag-color-warning-border: var(--navds-color-tag-warning-border);
   --navds-tag-color-success-background: var(
-    --navds-color-tag-success-background
+    --navds-semantic-color-feedback-success-background
+  );
+  --navds-tag-color-success-border: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-tag-color-error-background: var(
+    --navds-semantic-color-feedback-danger-background
+  );
+  --navds-tag-color-error-border: var(
+    --navds-semantic-color-feedback-danger-border
   );
-  --navds-tag-color-success-border: var(--navds-color-tag-success-border);
-  --navds-tag-color-error-background: var(--navds-color-tag-error-background);
-  --navds-tag-color-error-border: var(--navds-color-tag-error-border);
 }
 
 .navds-tag {

@navikt/core/css/typography.css

@@ -4,40 +4,53 @@
   margin: 0;
 }
 
-.navds-heading--2xlarge {
-  font-size: var(--navds-font-size-heading-2xl);
-  letter-spacing: -0.01em;
-  line-height: var(--navds-font-line-height-heading-2xl);
-}
-
-.navds-heading--2xlarge.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-5);
-}
-
 .navds-heading--xlarge {
-  font-size: var(--navds-font-size-heading-xl);
-  letter-spacing: -0.008em;
-  line-height: var(--navds-font-line-height-heading-xl);
+  font-size: var(--navds-font-size-heading-2xlarge);
+  letter-spacing: -0.01em;
+  line-height: var(--navds-font-line-height-heading-2xlarge);
 }
 
 .navds-heading--xlarge.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-4);
+  margin-bottom: var(--navds-spacing-5);
 }
 
 .navds-heading--large {
-  font-size: var(--navds-font-size-heading-l);
-  letter-spacing: -0.004em;
-  line-height: var(--navds-font-line-height-heading-l);
+  font-size: var(--navds-font-size-heading-xlarge);
+  letter-spacing: -0.008em;
+  line-height: var(--navds-font-line-height-heading-xlarge);
 }
 
 .navds-heading--large.navds-typo--spacing {
-  margin-bottom: var(--navds-spacing-3);
+  margin-bottom: var(--navds-spacing-4);
+}
+
+/* Mobile scale */
+@media (max-width: 480px) {
+  .navds-heading--xlarge {
+    font-size: var(--navds-font-size-heading-xlarge);
+    letter-spacing: -0.008em;
+    line-height: var(--navds-font-line-height-heading-xlarge);
+  }
+
+  .navds-heading--xlarge.navds-typo--spacing {
+    margin-bottom: var(--navds-spacing-4);
+  }
+
+  .navds-heading--large {
+    font-size: var(--navds-font-size-heading-large);
+    letter-spacing: -0.004em;
+    line-height: var(--navds-font-line-height-heading-large);
+  }
+
+  .navds-heading--large.navds-typo--spacing {
+    margin-bottom: var(--navds-spacing-3);
+  }
 }
 
 .navds-heading--medium {
-  font-size: var(--navds-font-size-heading-m);
+  font-size: var(--navds-font-size-heading-medium);
   letter-spacing: -0.002em;
-  line-height: var(--navds-font-line-height-heading-m);
+  line-height: var(--navds-font-line-height-heading-medium);
 }
 
 .navds-heading--medium.navds-typo--spacing {
@@ -45,9 +58,9 @@
 }
 
 .navds-heading--small {
-  font-size: var(--navds-font-size-heading-s);
+  font-size: var(--navds-font-size-heading-small);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-heading-s);
+  line-height: var(--navds-font-line-height-heading-small);
 }
 
 .navds-heading--small.navds-typo--spacing {
@@ -55,9 +68,9 @@
 }
 
 .navds-heading--xsmall {
-  font-size: var(--navds-font-size-heading-xs);
+  font-size: var(--navds-font-size-heading-xsmall);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-heading-xs);
+  line-height: var(--navds-font-line-height-heading-xsmall);
 }
 
 .navds-heading--xsmall.navds-typo--spacing {
@@ -66,10 +79,10 @@
 
 /* Ingress */
 .navds-ingress {
-  font-size: var(--navds-font-size-xl);
+  font-size: var(--navds-font-size-xlarge);
   font-weight: var(--navds-font-weight-regular);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-xl);
+  line-height: var(--navds-font-line-height-xlarge);
   margin: 0;
 }
 
@@ -79,10 +92,10 @@
 
 /* Body */
 .navds-body-long {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
   font-weight: var(--navds-font-weight-regular);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-xl);
+  line-height: var(--navds-font-line-height-xlarge);
   margin: 0;
 }
 
@@ -91,9 +104,9 @@
 }
 
 .navds-body-long--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
 }
 
 .navds-body-long--small.navds-typo--spacing {
@@ -101,10 +114,10 @@
 }
 
 .navds-body-short {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
   font-weight: var(--navds-font-weight-regular);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
   margin: 0;
 }
 
@@ -113,9 +126,9 @@
 }
 
 .navds-body-short--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
 }
 
 .navds-body-short--small.navds-typo--spacing {
@@ -124,10 +137,10 @@
 
 /* Label */
 .navds-label {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
   font-weight: var(--navds-font-weight-bold);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
   margin: 0;
 }
 
@@ -136,9 +149,9 @@
 }
 
 .navds-label--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
 }
 
 .navds-label--small.navds-typo--spacing {
@@ -147,10 +160,10 @@
 
 /* Small text */
 .navds-detail {
-  font-size: var(--navds-font-size-s);
+  font-size: var(--navds-font-size-small);
   font-weight: var(--navds-font-weight-bold);
   letter-spacing: 0.004em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
   margin: 0;
 }
 

@navikt/core/icons/.gitignore

@@ -0,0 +1,2 @@
+/src
+/png

@navikt/core/icons/.svgrrc.js

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

@navikt/core/icons/README.md

@@ -0,0 +1,28 @@
+# @navikt/ds-icons
+
+Leverer [NAVs ikoner](https://design.nav.no/resources/icons) i React og SVG.
+
+## Installering
+
+```sh
+// yarn
+yarn add @navikt/ds-icons
+
+// npm
+npm install @navikt/ds-icons
+```
+
+## Bruk
+
+```jsx
+/* ESM (anbefalt for tree-shaking)*/
+import { Down } from "@navikt/ds-icons";
+/* CJS */
+import { Down } from "@navikt/cjs/ds-icons";
+
+<Down aria-label="Åpne meny" />;
+```
+
+## Dokumentasjon
+
+- [Ikonsøk](https://design.nav.no/resources/icons)

@navikt/core/icons/figma/api.ts

@@ -0,0 +1,52 @@
+import Axios from "axios";
+const { create, get } = Axios;
+
+const FILE_KEY = "UmEVH3pZ71uJPsSz9ilP3Y";
+
+const FigmaAxion = (token?: string) =>
+  create({
+    headers: {
+      "X-FIGMA-TOKEN": token,
+    },
+  });
+
+/**
+ * Published Figma-components
+ * https://www.figma.com/file/UmEVH3pZ71uJPsSz9ilP3Y/%F0%9F%92%A0NAV-ikoner-2.5-Figma
+ */
+export const getPublishedIcons = async () => {
+  const { data } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/${FILE_KEY}/components`)
+    .catch((e) => {
+      console.log("Failed getPublishedIcons ");
+      throw e;
+    });
+
+  return data?.meta?.components?.filter((component: any) => {
+    const page = component?.containing_frame?.pageName;
+    return page !== "🔆Pictogram" && page !== "🧩Placeholder";
+  });
+};
+
+/**
+ * Downloadable link to each icon in SVG-format
+ */
+export const getIconsDownloadableUrl = async (nodeIds: string) => {
+  const {
+    data: { images },
+  } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(
+      `https://api.figma.com/v1/images/${FILE_KEY}/?ids=${nodeIds}&format=svg`
+    )
+    .catch((e) => {
+      console.log("Failed getIconsDownloadableUrl ");
+      throw e;
+    });
+
+  return Object.values(images) as string[];
+};
+
+/**
+ * Download icon @url
+ */
+export const getIconContent = async (url: string) => get(url);

@navikt/core/icons/figma/index.ts

@@ -0,0 +1,85 @@
+import {
+  getPublishedIcons,
+  getIconsDownloadableUrl,
+  getIconContent,
+} from "./api";
+import { existsSync, writeFileSync, mkdirSync } from "fs";
+import { resolve } from "path";
+import pLimit from "p-limit";
+import rimraf from "rimraf";
+import startCase from "lodash.startcase";
+import { writeMeta } from "./write-meta";
+import dotenv from "dotenv";
+dotenv.config();
+
+export type ComponentT = {
+  key: string;
+  file_key: string;
+  node_id: string;
+  thumbnail_url: string;
+  name: string;
+  description: string;
+  updated_at: string;
+  created_at: string;
+  user: any;
+  containing_frame: any;
+};
+
+const main = async () => {
+  if (!process.env.FIGMA_TOKEN) {
+    throw new Error("FIGMA_TOKEN not set in .env");
+  }
+  const iconFolder = "./svg";
+
+  // Limiting to ~20 concurrent downloads seems to lead to less errors
+  const limit = pLimit(20);
+
+  const publishedIconNodes: ComponentT[] = await getPublishedIcons();
+
+  writeMeta(publishedIconNodes);
+  /* Get all urls in one fetch rather than 300+ */
+  const iconUrls: string[] = await getIconsDownloadableUrl(
+    publishedIconNodes.map((node) => node.node_id).join(",")
+  );
+
+  if (existsSync(iconFolder)) {
+    rimraf.sync(iconFolder);
+  }
+  mkdirSync(iconFolder);
+
+  console.log("Total icons: " + publishedIconNodes.length);
+
+  await Promise.all(
+    iconUrls.map((url, x) =>
+      limit(() =>
+        getIconContent(url)
+          .then(({ data }) => {
+            writeFileSync(
+              resolve(
+                iconFolder,
+                `${startCase(publishedIconNodes[x].name).replace(
+                  /\s/g,
+                  ""
+                )}.svg`
+              ),
+              data,
+              {
+                encoding: "utf8",
+              }
+            );
+          })
+          .catch((e) => {
+            throw e;
+          })
+      )
+    )
+  );
+
+  console.log("\nDownloaded all icons from Figma!\n");
+};
+
+try {
+  main();
+} catch (e) {
+  throw e;
+}

@navikt/core/icons/figma/write-meta.ts

@@ -0,0 +1,35 @@
+import { existsSync, unlinkSync, writeFileSync } from "fs";
+import startCase from "lodash.startcase";
+import { ComponentT } from ".";
+
+const generateMetadata = (publishedIconNodes: ComponentT[]) => {
+  return publishedIconNodes
+    .map(({ name, description, created_at, containing_frame }) => {
+      return {
+        name: startCase(name).replace(/\s/g, ""),
+        description,
+        created_at,
+        // strip emojis
+        pageName: containing_frame.pageName.replace(
+          /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
+          ""
+        ),
+      };
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+};
+
+export const writeMeta = (publishedIconNodes: ComponentT[]) => {
+  const metadataFileName = "./meta.json";
+
+  if (existsSync(metadataFileName)) {
+    unlinkSync(metadataFileName);
+  }
+  writeFileSync(
+    metadataFileName,
+    JSON.stringify(generateMetadata(publishedIconNodes)),
+    {
+      encoding: "utf8",
+    }
+  );
+};

@navikt/core/icons/icons.stories.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
+import isChromatic from "chromatic/isChromatic";
 
-import * as Icons from "../src";
+import * as Icons from "./src";
 export default {
   title: "ds-icons/Ikoner",
   argTypes: {
@@ -16,7 +17,7 @@ export default {
   },
 };
 
-if (process.env.STORYBOOK_CHROMATIC === "true") {
+if (isChromatic()) {
   const iconsStories = storiesOf("ds-icons/Ikoner", module);
 
   Object.entries(Icons).forEach(([name, Icon]) => {

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.5.3",
+  "version": "0.8.2",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -22,22 +22,29 @@
     "/cjs",
     "/esm",
     "/src",
-    "/svg"
+    "/svg",
+    "/meta.json"
   ],
   "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../utilities/scripts/createPackageJsonsWithESMPointers.js",
-    "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node --experimental-modules --es-module-specifier-resolution=node -r dotenv/config figma-api/index.mjs dotenv_config_path=figma-api/.env",
-    "create-icons": "svgr --silent --typescript --ref --icon --title-prop --replace-attr-values \"#262626=currentColor\" -d src svg",
-    "convert-icons": "node figma-api/pngConverter.mjs",
-    "clean": "rimraf src png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
-    "zip-icons": "node figma-api/zipIcons.mjs",
-    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons"
+    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-icons": "svgr --out-dir src svg",
+    "clean": "rimraf src cjs esm",
+    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "update": "ts-node figma/index.ts dotenv/config"
+  },
+  "dependencies": {
+    "uuid": "^8.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
   },
   "devDependencies": {
     "@svgr/cli": "^5.5.0",
+    "@types/lodash.startcase": "^4.4.6",
+    "@types/rimraf": "3.0.2",
+    "@types/uuid": "^8.3.1",
+    "axios": "^0.21.3",
     "copyfiles": "^2.4.1",
     "dotenv": "^10.0.0",
     "lodash.kebabcase": "^4.1.1",
@@ -45,6 +52,6 @@
     "react": "^16.8.0 || ^17.0.0",
     "rimraf": "3.0.2",
     "sharp": "0.29.1",
-    "zip-dir": "^2.0.0"
+    "ts-node": "^10.4.0"
   }
 }

@navikt/core/icons/svg/Attachment.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8634 1.00122C18.1639 0.974609 19.5426 1.3819 20.5704 2.35845C21.5981 3.33501 22.0267 4.64511 21.9987 5.88083C21.9709 7.10846 21.4908 8.35534 20.5704 9.22999L11.1693 18.163C10.6021 18.7019 9.81338 18.9683 9.05641 18.9838C8.29093 18.9995 7.45868 18.76 6.83035 18.163C6.20202 17.5659 5.95004 16.7751 5.96653 16.0478C5.98283 15.3285 6.26318 14.579 6.83035 14.0401L13.3388 7.85568C13.7382 7.47618 14.3857 7.47618 14.7851 7.85568C15.1845 8.23518 15.1845 8.85048 14.7851 9.22999L8.27667 15.4144C8.13723 15.5469 8.01819 15.7922 8.01145 16.0896C8.0049 16.3789 8.10622 16.6267 8.27667 16.7887C8.44712 16.9506 8.70788 17.0469 9.01237 17.0407C9.32537 17.0343 9.58355 16.9212 9.72299 16.7887L19.1241 7.85568C19.6168 7.38747 19.9355 6.64474 19.9538 5.83898C19.9719 5.0413 19.6939 4.27422 19.1241 3.73276C18.5542 3.19129 17.7469 2.92716 16.9075 2.94433C16.0595 2.96168 15.2778 3.26454 14.7851 3.73276L5.38403 12.6658C4.6945 13.321 4.13449 14.5364 4.05489 15.8977C3.9765 17.2386 4.37172 18.5754 5.38403 19.5373C7.5157 21.5628 10.484 21.5628 12.6156 19.5373L19.1519 13.3265C19.5513 12.947 20.1988 12.947 20.5982 13.3265C20.9976 13.706 20.9976 14.3213 20.5982 14.7008L14.0619 20.9116C11.1315 23.6961 6.86816 23.6961 3.93772 20.9116C2.41897 19.4685 1.91025 17.5412 2.01264 15.7899C2.11384 14.0591 2.81936 12.3541 3.93772 11.2914L13.3388 2.35845C14.2593 1.4838 15.5715 1.02766 16.8634 1.00122Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/AttachmentFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3472 0.00138792C17.7614 -0.0288776 19.2813 0.434034 20.4223 1.56794L19.3387 2.6448L20.4223 1.56794C21.5633 2.70184 22.0291 4.21243 21.9986 5.61786C21.9684 7.01063 21.4486 8.445 20.4223 9.46495L11.0314 18.7978C10.358 19.467 9.43759 19.7854 8.57056 19.8039C7.69079 19.8227 6.71672 19.5352 5.97471 18.7978C5.23271 18.0604 4.94338 17.0923 4.96233 16.218C4.981 15.3563 5.30134 14.4416 5.97472 13.7724L12.4761 7.31122C13.0746 6.71649 14.0448 6.71649 14.6433 7.31122C15.2417 7.90596 15.2417 8.87022 14.6433 9.46495L8.14185 15.9261C8.10938 15.9584 8.03076 16.083 8.02641 16.2836C8.02234 16.4715 8.08594 16.5885 8.14185 16.6441C8.19777 16.6996 8.31553 16.7628 8.50458 16.7588C8.70636 16.7545 8.83176 16.6763 8.86423 16.6441L18.2552 7.31122C18.6406 6.92821 18.9187 6.28392 18.9345 5.55228C18.9501 4.8333 18.71 4.17373 18.2552 3.72167C17.8003 3.26961 17.1366 3.03104 16.4132 3.04652C15.677 3.06227 15.0287 3.33865 14.6433 3.72167L5.25234 13.0545C4.67063 13.6326 4.14756 14.7746 4.07345 16.1004C4.00113 17.3941 4.36759 18.6364 5.25234 19.5157C7.18223 21.4337 9.82386 21.4337 11.7538 19.5157L18.2829 13.0269C18.8814 12.4322 19.8516 12.4322 20.4501 13.0269C21.0485 13.6216 21.0485 14.5859 20.4501 15.1806L13.9209 21.6694C10.7941 24.7769 6.21196 24.7769 3.0852 21.6694C1.44161 20.036 0.9051 17.8683 1.01337 15.9314C1.11986 14.0266 1.86096 12.1174 3.0852 10.9008L12.4761 1.56794C13.5024 0.547983 14.9457 0.0313808 16.3472 0.00138792Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/BabyChangingRoomFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 3C13 4.65685 11.6569 6 10 6C8.34315 6 7 4.65685 7 3C7 1.34315 8.34315 0 10 0C11.6569 0 13 1.34315 13 3ZM24 14.5C24 15.3284 23.3284 16 22.5 16C21.6716 16 21 15.3284 21 14.5C21 13.6716 21.6716 13 22.5 13C23.3284 13 24 13.6716 24 14.5ZM5.68636 6C4.98108 6 4.36366 6.47353 4.18079 7.15469L1.00073 19H2H4.25773V24H6.25773V19H8.25773V24H10.2577V19H12H13.0018L11.1893 11H14C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H10.5682C9.65406 7.19312 7.78502 6 5.68636 6ZM21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12V14H17.618L17.1708 13.1056C16.832 12.428 16.1395 12 15.382 12H15C14.4477 12 14 12.4477 14 13C14 13.5523 14.4477 14 15 14H15.382L15.8292 14.8944C16.168 15.572 16.8605 16 17.618 16H19C20.1046 16 21 15.1046 21 14V12ZM14 18C14 17.4477 14.4477 17 15 17H23C23.5523 17 24 17.4477 24 18C24 18.5523 23.5523 19 23 19H15C14.4477 19 14 18.5523 14 18Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Bed.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V10C23.1046 10 24 10.8954 24 12V22H22V18H2V22H0V12C0 10.8954 0.895431 10 2 10V4ZM2 16H22V12H2V16ZM20 4V10C20 7.79086 18.2091 6 16 6H15C13.8053 6 12.7329 6.52376 12 7.35418C11.2671 6.52376 10.1947 6 9 6H8C5.79086 6 4 7.79086 4 10V4H20ZM16 8C17.1046 8 18 8.89543 18 10H13C13 8.89543 13.8954 8 15 8H16ZM9 8C10.1046 8 11 8.89543 11 10H6C6 8.89543 6.89543 8 8 8H9Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/BedFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V10C23.1046 10 24 10.8954 24 12V22H22V18H2V22H0V12C0 10.8954 0.895431 10 2 10V4ZM17 7C19 7 20 8.89543 20 10H13C13 8.89543 14 7 16 7H17ZM8 7C10 7 11 8.89543 11 10H4C4 8.89543 5 7 7 7H8Z" fill="#262626"/>
+</svg>