Lerna versionbump [ci skip]

- @navikt/ds-css@0.12.6
 - @navikt/ds-react@0.14.2
 - @navikt/ds-react-internal@0.9.2

.github/workflows/build-publish.yml

@@ -30,37 +30,36 @@ 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: Test
+        run: yarn test
       - 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
 
   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 +89,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:

.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/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

.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

@@ -11,6 +11,7 @@ module.exports = {
   ],
   addons: [
     "@storybook/addon-docs",
+    "@storybook/addon-a11y",
     {
       name: "@storybook/addon-storysource",
       options: {

.storybook/preview.js

@@ -1,5 +1,6 @@
 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

@@ -20,3 +20,16 @@ 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.
+
+## Bruke styled-components eller emotion
+
+Flere av våre komponenter er implementert med OverridableComponent. Dette vil si at komponenten tar i mot en prop, `as` som lar deg endre hvilken tag som blir satt.
+Bruk for dette er eks hvis du ønsker `Heading` stilen, men ikke en heading-tag. Da kan man lett skrive `<Heading as="div">` og man vil få en `div`-tag istedenfor.
+
+Flere css-in-js bibliotek har også denne funksjonaliteten bygd inne, noe som kan komplisere ting når alle bruker samme navn `as` for dette.
+
+### Løsninger
+
+[Styled-components](https://styled-components.com/docs/api#forwardedas-prop)
+
+> TLDR: Bruk `forwardedAs` istendenfor `as` på komponentene, SD fikser resten.

.storybook/stories/migration.stories.mdx

@@ -2,7 +2,41 @@ import { Meta } from "@storybook/addon-docs";
 
 <Meta title="ds-react/Migration" />
 
-# Migrering til ds-react, ds-css v0.8.0
+# Migreringsguider
+
+## Migrering til ds-css v0.12, ds-tokens v0.7
+
+### Tokens er refaktort og oppdatert
+
+- Vi har nå fått helt nye tokens synket fra 3.0 biblioteket i Figma.
+- Dette vi si at de som har brukt tokens for styling i sitt prosjekt må gå gjennom å fikse alle endringene.
+- Hvis du bare har brukt react-komponentene rett ut av boken så har denne endringene ikke noe å si for deg.
+
+## Migrering til ds-react v0.11, ds-css v0.10
+
+### ErrorSummary
+
+- ErrorSummaryItem -> ErrorSummary.Item
+  Må da slette import "ErrorSummaryItem" da denne ikke er eksponert alene lengre
+
+### SearchField
+
+- SearchFieldButton -> SearchField.Button
+- SearchFieldClearButton -> SearchField.Clear
+- SearchFieldInput -> SearchField.Input
+
+SearchFieldButton, SearchFieldClearButton og SearchFieldInput må da slettes fra imports da de ikke er eksponert lengre.
+
+### CopyToClipBoard
+
+Komponenten er flyttet til pakkene "@navikt/ds-react-internal" og "@navikt/ds-css-internal". API er ikke endret
+så fikses med
+
+```bash
+yarn install @navikt/ds-react-internal @navikt/ds-css-internal
+```
+
+## 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.

.storybook/stories/roadmap-table.tsx

@@ -0,0 +1,269 @@
+import { Table as DsTable } from "@navikt/ds-react";
+import {
+  SuccessFilled as SuccessIcon,
+  ErrorFilled as ErrorIcon,
+} from "@navikt/ds-icons";
+import styled from "styled-components";
+
+const Success = styled(SuccessIcon)`
+  color: var(--navds-semantic-color-feedback-success-icon);
+`;
+
+const Error = styled(ErrorIcon)`
+  color: var(--navds-semantic-color-feedback-danger-icon);
+`;
+
+const Table = styled(DsTable)`
+  .navds-table__cell > svg,
+  .navds-table__cell > span {
+    vertical-align: middle;
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+`;
+
+type CompT = {
+  name: string;
+  status: Partial<[boolean, boolean, boolean]>;
+  desc?: React.ReactNode;
+};
+
+const Components: CompT[] = [
+  {
+    name: "Alertstriper",
+    status: [true, true, true],
+    desc: "Navn: Alert",
+  },
+  { name: "Chevron", status: [false], desc: "" },
+  {
+    name: "Core",
+    status: [true, true, false],
+    desc: <code>@navikt/ds-css</code>,
+  },
+  {
+    name: "Ekspanderbartpanel",
+    status: [true, true, true],
+    desc: "Navn: Accordion, styling ikke oppdatert til nyeste versjon",
+  },
+  { name: "Etiketter", status: [true, true, false], desc: "Navn: Tag" },
+  {
+    name: "Fullbreddeknapp-style",
+    status: [false],
+    desc: "",
+  },
+  { name: "Grid", status: [true, true, false], desc: "Navn: Grid" },
+  { name: "Hjelpetekst", status: [true, true, true], desc: "Navn: HelpText" },
+  {
+    name: "Ikoner-assets",
+    status: [true, true, true],
+    desc: <code>@navikt/ds-icons</code>,
+  },
+  {
+    name: "js-utils",
+    status: [true, true, false],
+    desc:
+      "Diverse util-funksjoner blir eksponert gjennom ds-react, men tar for det meste i bruk npm pakker",
+  },
+  { name: "Knapper", status: [true, true, true], desc: "Navn: Button" },
+  { name: "Lenkepanel", status: [true, true, true], desc: "Navn: LinkPanel" },
+  { name: "Lenker", status: [true, true, true], desc: "Navn: Link" },
+  { name: "Lesmerpanel", status: [false], desc: "" },
+  { name: "Lukknapp", status: [false], desc: `Bruk Button med "Close"-ikon` },
+  { name: "Modal", status: [true, true, true], desc: "Navn: Modal" },
+  { name: "Paneler", status: [true, true, true], desc: "Navn: Panel" },
+  {
+    name: "Bekrefcheckbokspanel",
+    status: [true, true, true],
+    desc: "Navn: ConfirmationPanel",
+  },
+  {
+    name: "Checkbokspanel-gruppe",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Checkbokspanel",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Checkbox-gruppe",
+    status: [true, true, true],
+    desc: "Navn: CheckboxGroup",
+  },
+  { name: "Checkbox", status: [true, true, true], desc: "Navn: Checkbox" },
+  {
+    name: "Feiloppsummering",
+    status: [true, true, false],
+    desc: "Navn: ErrorSummary, API vil bli endret for denne",
+  },
+  {
+    name: "Fnr-input",
+    status: [false],
+    desc:
+      "Skjema-elementer med validering vil ikke bli lagt til med det første, men vil diskuteres i fremtiden",
+  },
+  { name: "Input", status: [true, true, true], desc: "Navn: TextField" },
+  {
+    name: "Label",
+    status: [false],
+    desc: "Skjema-elementer fikser dette selv",
+  },
+  { name: "Radio-Gruppe", status: [true, true, true], desc: "RadioGroup" },
+  { name: "Radio", status: [true, true, true], desc: "Navn: Radio" },
+  {
+    name: "Radiopanel-gruppe",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Radio-panel",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  { name: "Select", status: [true, true, true], desc: "Navn: Select" },
+  { name: "Skjema-gruppe", status: [true, true, true], desc: "Navn: Fieldset" },
+  {
+    name: "Skjemaelement-feilemelding",
+    status: [false],
+    desc: "",
+  },
+  { name: "Textarea", status: [true, true, true], desc: "Navn: Textarea" },
+  { name: "Togglegruppe", status: [true, false, false], desc: "" },
+  { name: "ToggleKnapp", status: [true, false, false], desc: "" },
+  {
+    name: "Toggle",
+    status: [true, false, false],
+    desc: "Vil bli samme komponent som ToggleKnapp",
+  },
+  { name: "Popover", status: [true, true, true], desc: "Navn: Popover" },
+  { name: "Snakkeboble", status: [true, true, true], desc: "SpeechBubble" },
+  { name: "Spinner", status: [true, true, true], desc: "Navn: Loader" },
+  { name: "Stegindikator", status: [true, false, false], desc: "" },
+  {
+    name: "Tabell-style",
+    status: [true, true, false],
+    desc: "Navn: Table, Er nå publisert som React-component",
+  },
+  { name: "Tabs", status: [true, false, false], desc: "" },
+  { name: "Tekstomrade", status: [false], desc: "" },
+  {
+    name: "Typografi",
+    status: [true, true, true],
+    desc: "Navn: se typography-mappen i storybook",
+  },
+  { name: "veileder", status: [false], desc: "" },
+  {
+    name: "Veilederpanel",
+    status: [true, true, true],
+    desc: "Navn: GuidePanel",
+  },
+];
+
+const NewComps: CompT[] = [
+  {
+    name: "AccordionMenu",
+    status: [true, true, true],
+    desc: "",
+  },
+  {
+    name: "SearcField",
+    status: [true, true, false],
+    desc: "Denne vil undergå større endringer",
+  },
+  {
+    name: "MicroCard",
+    status: [true, true, false],
+    desc: "Vil flyttes over i egen navno pakke for eksterne sider",
+  },
+  {
+    name: "PageHeader",
+    status: [true, true, false],
+    desc: "Vil flyttes over i egen navno pakke for eksterne sider",
+  },
+  {
+    name: "CopyToClipboard",
+    status: [true, true, false],
+    desc: "Vil flyttes over til @navikt/ds-react-internal pakke",
+  },
+  {
+    name: "Table",
+    status: [true, true, false],
+    desc:
+      "Implementer stylingen til nav-frontend-table-styles, API vil videreutvikles",
+  },
+  {
+    name: "Switch",
+    status: [true, false, false],
+    desc: "",
+  },
+  {
+    name: "Tooltip",
+    status: [true, false, false],
+    desc: "",
+  },
+  {
+    name: "Timeline",
+    status: [true, false, false],
+    desc: "",
+  },
+];
+
+const CompTable = ({ list }) => (
+  <Table>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Komponent</Table.HeaderCell>
+        <Table.HeaderCell>Med i nytt system</Table.HeaderCell>
+        <Table.HeaderCell>Publisert i pakker</Table.HeaderCell>
+        <Table.HeaderCell>Fullført**</Table.HeaderCell>
+        <Table.HeaderCell>Info</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {list.map((comp) => {
+        return (
+          <Table.Row>
+            <Table.HeaderCell>{comp.name}</Table.HeaderCell>
+            <Table.DataCell>
+              {comp.status?.[0] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[0] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>
+              {comp.status?.[1] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[1] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>
+              {comp.status?.[2] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[1] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>{comp.desc ? comp.desc : "-"}</Table.DataCell>
+          </Table.Row>
+        );
+      })}
+    </Table.Body>
+  </Table>
+);
+
+export const NewCompTable = () => {
+  return <CompTable list={NewComps} />;
+};
+
+export const OldCompTable = () => {
+  return <CompTable list={Components} />;
+};

.storybook/stories/roadmap.stories.mdx

@@ -1,16 +1,30 @@
 import { Meta } from "@storybook/addon-docs";
+import { NewCompTable, OldCompTable } from "./roadmap-table.tsx";
 
 <Meta title="ds-react/Roadmap" />
 
-# Plan videre
+# Roadmap
 
-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.
+## Komponenter
 
-(Rekkefølgen representer ikke faktisk tidsline eller prioritet)
+\*\* Fullført betyr i denne konteksten at vi føler API-et er ok og da kan forvente mindre breaking changes.
+Komponenten kan fortsatt bli utsatt for endringer i selve designet.
+
+### Nye komponenter / wip
+
+<NewCompTable />
+
+### Migrering av gamle komponenter
+
+<OldCompTable />
+
+## Plan videre
+
+Vi jobber kontinuerlig med å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
+ny dokumentasjon-side under Verktøykassen, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider.
+Dette vil la oss bygge mer robuste og fleksible løsninger for fremtiden som skal være bedre tilpasset produktene våre.
+
+(Rekkefølgen representer ikke faktisk tidslinje)
 
 ## Tokens
 
@@ -20,12 +34,11 @@ Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke c
 ## 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.
+Eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.
 
 ## Ny dokumentasjon-side
 
-Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i nav med "Verktøykassen"
+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`
 
@@ -46,6 +59,6 @@ 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å å
+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

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

@navikt/core/css/accordion-menu.css

@@ -1,9 +1,11 @@
 :root {
-  --navds-accordion-menu-color-text: var(--navds-color-text-link);
-  --navds-accordion-menu-color-text-focus: var(--navds-color-darkgray);
-  --navds-accordion-menu-color-background-hover: var(--navds-color-blue-10);
-  --navds-accordion-menu-color-text-active: var(--navds-color-text);
-  --navds-accordion-menu-outline-focus: var(--navds-text-focus);
+  --navds-accordion-menu-color-text: var(--navds-semantic-color-link);
+  --navds-accordion-menu-color-text-focus: var(--navds-semantic-color-text);
+  --navds-accordion-menu-color-background-hover: var(
+    --navds-global-color-blue-50
+  );
+  --navds-accordion-menu-color-text-active: var(--navds-semantic-color-text);
+  --navds-accordion-menu-outline-focus: var(--navds-semantic-color-focus);
 }
 
 .navds-accordion-menu__list {
@@ -97,7 +99,7 @@
 }
 
 .navds-accordion-menu-item--active {
-  box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
+  box-shadow: inset 0.5rem 0 var(--navds-semantic-color-link);
   color: var(--navds-accordion-menu-color-text-active);
   text-decoration: none;
 }

@navikt/core/css/accordion.css

@@ -1,9 +1,15 @@
 :root {
-  --navds-accordion-color-text: var(--navds-color-darkgray);
-  --navds-accordion-color-background: var(--navds-color-background);
-  --navds-accordion-color-text-hover: var(--navds-color-blue-50);
-  --navds-accordion-color-border-hover: var(--navds-color-blue-50);
-  --navds-accordion-color-border-focus: var(--navds-color-background);
+  --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-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-accordion-color-border-focus: var(
+    ---navds-semantic-color-component-background-light
+  );
 }
 
 .navds-accordion .ReactCollapse--collapse {

@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,79 @@
 :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);
 }
 
 .navds-button {
@@ -111,8 +137,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 +176,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 +206,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 +245,17 @@
     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);
+  opacity: 0.3;
   cursor: not-allowed;
-  box-shadow: none;
   transform: none;
 }

@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

@@ -6,14 +6,19 @@
 }
 
 .navds-fieldset > :not(:first-child):not(:empty) {
-  margin-top: 8px;
+  margin-top: var(--navds-spacing-2);
 }
 
-.navds-fieldset--small > :not(:first-child):not(:empty) {
-  margin-top: 4px;
+.navds-fieldset > .navds-fieldset__description:not(:empty) {
+  margin-top: var(--navds-spacing-1);
 }
 
 /* Applied when hideLegend is applied to fieldset */
 .navds-fieldset > .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

@@ -1,11 +1,6 @@
 .navds-form-field > :not(:first-child):not(:empty),
 .navds-form-field > input:not(:first-child) {
-  margin-top: 8px;
-}
-
-.navds-form-field--small > :not(:first-child):not(:empty),
-.navds-form-field--small > input:not(:first-child) {
-  margin-top: 4px;
+  margin-top: var(--navds-spacing-2);
 }
 
 /* Applied when hideLabel is applied to form-element */

@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,182 @@
+:root {
+  --navds-radio-checkbox-color-background: var(
+    --navds-semantic-color-canvas-background-light
+  );
+  --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-color-text-primary);
+}
+
+.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: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: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(:focus)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
+  background-color: var(--navds-radio-checkbox-color-background-hover);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:not(:hover):not(:disabled):not(:checked)
+  + .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)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--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,12 +1,22 @@
 :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 {
@@ -59,12 +69,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,183 @@
+:root {
+  --navds-switch-color-label: var(--navds-color-text-primary);
+  --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-interaction-primary
+  );
+  --navds-switch-color-track-background-hover-checked: var(
+    --navds-semantic-color-interaction-primary-hover
+  );
+  --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-loader-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+}
+
+.navds-switch {
+  position: relative;
+  min-height: 48px;
+  width: fit-content;
+}
+
+.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--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--with-description,
+.navds-switch--small
+  > .navds-switch__label-wrapper
+  > .navds-switch--with-description {
+  padding-bottom: 0;
+}
+
+.navds-switch__input:hover ~ .navds-switch__label-wrapper {
+  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: var(--navds-spacing-4);
+  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__input:checked ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-checked);
+}
+
+.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);
+  border-radius: 50%;
+  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);
+}
+
+.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 {
+  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,86 @@
+: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: 2px solid var(--navds-text-field-color-border);
+  min-height: 48px;
+  width: 100%;
+}
+
+.navds-form-field--small > .navds-text-field__input {
+  padding: 0 0.15rem;
+  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);
+}
+
+/* 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

@@ -7,8 +7,6 @@
 @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";
@@ -20,6 +18,7 @@
 @import "panel.css";
 @import "link-panel.css";
 @import "speech-bubble.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,9 +1,15 @@
 :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);

@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.12.6",
   "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.7.0",
     "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/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

@@ -5,9 +5,9 @@
 }
 
 .navds-heading--2xlarge {
-  font-size: var(--navds-font-size-heading-2xl);
+  font-size: var(--navds-font-size-heading-2xlarge);
   letter-spacing: -0.01em;
-  line-height: var(--navds-font-line-height-heading-2xl);
+  line-height: var(--navds-font-line-height-heading-2xlarge);
 }
 
 .navds-heading--2xlarge.navds-typo--spacing {
@@ -15,9 +15,9 @@
 }
 
 .navds-heading--xlarge {
-  font-size: var(--navds-font-size-heading-xl);
+  font-size: var(--navds-font-size-heading-xlarge);
   letter-spacing: -0.008em;
-  line-height: var(--navds-font-line-height-heading-xl);
+  line-height: var(--navds-font-line-height-heading-xlarge);
 }
 
 .navds-heading--xlarge.navds-typo--spacing {
@@ -25,9 +25,9 @@
 }
 
 .navds-heading--large {
-  font-size: var(--navds-font-size-heading-l);
+  font-size: var(--navds-font-size-heading-large);
   letter-spacing: -0.004em;
-  line-height: var(--navds-font-line-height-heading-l);
+  line-height: var(--navds-font-line-height-heading-large);
 }
 
 .navds-heading--large.navds-typo--spacing {
@@ -35,9 +35,9 @@
 }
 
 .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 +45,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 +55,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 +66,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 +79,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 +91,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 +101,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 +113,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 +124,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 +136,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 +147,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,48 @@
+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;
+};
+
+/**
+ * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.5.3",
+  "version": "0.7.0",
   "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",
+    "convert-icons": "node scripts/pngConverter.mjs",
+    "clean": "rimraf src cjs esm png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
+    "zip-icons": "node scripts/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",
+    "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/uuid": "^8.3.1",
     "copyfiles": "^2.4.1",
     "dotenv": "^10.0.0",
     "lodash.kebabcase": "^4.1.1",
@@ -45,6 +52,7 @@
     "react": "^16.8.0 || ^17.0.0",
     "rimraf": "3.0.2",
     "sharp": "0.29.1",
+    "ts-node": "^10.4.0",
     "zip-dir": "^2.0.0"
   }
 }

@navikt/core/icons/stories/icons.stories.mdx

@@ -16,9 +16,7 @@ yarn add @navikt/ds-icons
 Import { Expand } from `@navikt/ds-icons`;
 
 <Expand
-	aria-label="Åpne meny"
-	role="img"
-	focusable="false"
+	title="Åpne meny"
 />
 ```
 

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

@@ -1,3 +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="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1502 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06213 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1503 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06214 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" 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>