Lerna versionbump [ci skip]

- @navikt/ds-css@0.12.0
 - @navikt/ds-icons@0.7.0
 - @navikt/ds-react@0.14.0
 - @navikt/ds-tokens@0.7.0
 - @navikt/ds-css-internal@0.7.0
 - @navikt/ds-react-internal@0.9.0

.github/workflows/update-icons.yml

@@ -1,8 +1,8 @@
 name: Update Icons
 
 on:
-  schedule:
-    - cron: 0 0 * * *
+#  schedule:
+ #   - cron: 0 0 * * *
   workflow_dispatch:
 
 jobs:
@@ -10,8 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0 # Required to retrieve git history
       - uses: actions/setup-node@v1
         with:
           node-version: 14
@@ -27,19 +25,18 @@ jobs:
       - name: postinstall
         if: steps.node-cache.outputs.cache-hit == 'true'
         run: yarn postinstall
-      - name: add Figma token to .env
-        run: echo "FIGMA_TOKEN=${{ secrets.FIGMA_IKONER_API }}" >> @navikt/core/icons/.env
       - 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: "Oppdatert ikoner fra figma"
-          committer: GitHub <noreply@github.com>
+          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] Automatisk PR for ikoner"
-          labels: |
-            Icons
-            automated pr
+          title: "[FIX] Ikonsynk Figma"

.github/workflows/update-tokens.yml

@@ -0,0 +1,41 @@
+name: Update tokens
+
+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 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

.storybook/stories/migration.stories.mdx

@@ -4,6 +4,14 @@ import { Meta } from "@storybook/addon-docs";
 
 # 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

.storybook/stories/roadmap-table.tsx

@@ -6,11 +6,11 @@ import {
 import styled from "styled-components";
 
 const Success = styled(SuccessIcon)`
-  color: var(--navds-color-green-50);
+  color: var(--navds-semantic-color-feedback-success-icon);
 `;
 
 const Error = styled(ErrorIcon)`
-  color: var(--navds-color-red-50);
+  color: var(--navds-semantic-color-feedback-danger-icon);
 `;
 
 const Table = styled(DsTable)`

@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 {

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

@@ -22,13 +22,13 @@ html {
 
 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,12 @@
     var(--navds-shadow-focus);
 }
 
+.navds-button--primary:hover:disabled {
+  background-color: var(--navds-button-color-primary-background);
+}
+
 /**************************
- * .navds-button--secondary *
+* .navds-button--secondary *
  **************************/
 
 .navds-button--secondary {
@@ -145,6 +175,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 +205,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 +244,16 @@
     var(--navds-shadow-focus);
 }
 
+.navds-button--danger:hover: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: 30%;
   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

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

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

@@ -1,13 +0,0 @@
-.navds-checkbox-group--small > .navds-checkboxes {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.navds-fieldset.navds-checkbox-group--medium > .navds-checkboxes {
-  margin-top: 0;
-}
-
-.navds-fieldset.navds-checkbox-group--medium > .navds-fieldset__error {
-  margin-top: 0;
-}

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

@@ -1,146 +0,0 @@
-:root {
-  --navds-checkbox-color-background: var(--navds-color-white);
-  --navds-checkbox-color-border: var(--navds-color-gray-60);
-  --navds-checkbox-color-label-hover: var(--navds-color-blue-50);
-  --navds-checkbox-color-border-hover: var(--navds-color-blue-50);
-  --navds-checkbox-color-background-hover: var(--navds-color-blue-10);
-  --navds-checkbox-color-description: var(--navds-color-gray-80);
-  --navds-checkbox-color-border-checked: var(--navds-color-blue-50);
-  --navds-checkbox-color-background-checked: var(--navds-color-blue-50);
-  --navds-checkbox-color-shadow-error: var(--navds-color-red-50);
-  --navds-checkbox-color-border-error: var(--navds-color-red-50);
-
-  /* Disabled */
-  --navds-checkbox-color-label-disabled: var(--navds-color-gray-40);
-  --navds-checkbox-color-border-disabled: var(--navds-color-gray-60);
-  --navds-checkbox-color-background-disabled: var(--navds-color-gray-10);
-  --navds-checkbox-color-border-checked-disabled: var(--navds-color-gray-40);
-  --navds-checkbox-color-background-checked-disabled: var(
-    --navds-color-gray-40
-  );
-}
-
-.navds-checkbox {
-  position: relative;
-  padding: var(--navds-spacing-3) 0;
-}
-
-.navds-checkbox__input {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  width: 48px;
-  height: 48px;
-  left: -12px;
-  margin: 0;
-  opacity: 0;
-  top: 0;
-}
-
-.navds-checkbox__label {
-  display: flex;
-  width: fit-content;
-  gap: 12px;
-  cursor: pointer;
-}
-
-.navds-checkbox__description {
-  padding-left: calc(48px - 12px);
-  color: var(--navds-checkbox-color-description);
-}
-
-.navds-checkbox--with-description {
-  padding-bottom: 0;
-}
-
-.navds-checkbox .navds-error-message {
-  margin-top: var(--navds-spacing-3);
-}
-
-.navds-checkbox--with-description .navds-error-message {
-  margin-top: 0;
-}
-
-.navds-checkbox--with-error-message {
-  padding-bottom: var(--navds-spacing-2);
-}
-
-.navds-checkbox__label::before {
-  content: "";
-  background-color: var(--navds-checkbox-color-background);
-  border: 1px solid var(--navds-checkbox-color-border);
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 4px;
-  flex-shrink: 0;
-}
-
-.navds-checkbox--small {
-  padding: var(--navds-spacing-1) 0;
-}
-
-.navds-checkbox--small > .navds-checkbox__input {
-  width: 24px;
-  height: 24px;
-  top: 2px;
-  left: 0;
-}
-
-.navds-checkbox--small > .navds-checkbox__label::before {
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-
-.navds-checkbox__input:hover + .navds-checkbox__label {
-  color: var(--navds-checkbox-color-label-hover);
-}
-
-.navds-checkbox__input:hover + .navds-checkbox__label::before {
-  border-color: var(--navds-checkbox-color-border-hover);
-  background-color: var(--navds-checkbox-color-background-hover);
-}
-
-.navds-checkbox__input:focus + .navds-checkbox__label::before {
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-image: var(--navds-checkmark-image-white);
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: 75%;
-  border: 2px solid var(--navds-checkbox-color-border-checked);
-  background-color: var(--navds-checkbox-color-background-checked);
-}
-
-.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-  background-color: white;
-  background-image: var(--navds-checkmark-image-blue);
-}
-
-.navds-checkbox--error
-  > .navds-checkbox__input:not(:hover):not(:focus):not(:disabled):not(:checked)
-  + .navds-checkbox__label::before {
-  box-shadow: 0 0 0 1px var(--navds-checkbox-color-shadow-error);
-  border-color: var(--navds-checkbox-color-border-error);
-}
-
-.navds-checkbox--small .navds-error-message {
-  margin-top: 4px;
-}
-
-.navds-checkbox__input:disabled,
-.navds-checkbox__input:disabled + .navds-checkbox__label {
-  color: var(--navds-checkbox-color-label-disabled);
-  cursor: not-allowed;
-}
-
-.navds-checkbox__input:disabled + .navds-checkbox__label::before {
-  background-color: var(--navds-checkbox-color-background-disabled);
-  border-color: var(--navds-checkbox-color-border-disabled);
-}
-
-.navds-checkbox__input:disabled:checked + .navds-checkbox__label::before {
-  background-color: var(--navds-checkbox-color-background-checked-disabled);
-  border-color: var(--navds-checkbox-color-border-checked-disabled);
-}

@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

@@ -1,8 +1,15 @@
 :root {
-  --navds-error-message-color-text: var(--navds-color-text-error);
+  --navds-error-message-color-text: var(
+    --navds-semantic-color-feedback-danger-text
+  );
 }
 
 .navds-error-message {
-  display: block;
   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,12 +4,9 @@
 @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 "text-field.css";
 @import "textarea.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/radio-group.css

@@ -1,13 +0,0 @@
-.navds-radio-group--small > .navds-radio-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.navds-fieldset.navds-radio-group--medium > .navds-radio-buttons {
-  margin-top: 0;
-}
-
-.navds-fieldset.navds-radio-group--medium > .navds-fieldset__error {
-  margin-top: 0;
-}

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

@@ -1,150 +0,0 @@
-:root {
-  --navds-radio-color-description: var(--navds-color-gray-80);
-  --navds-radio-color-background: var(--navds-color-white);
-  --navds-radio-color-border: var(--navds-color-gray-60);
-  --navds-radio-color-label-hover: var(--navds-color-blue-50);
-  --navds-radio-color-border-hover: var(--navds-color-blue-50);
-  --navds-radio-color-background-hover: var(--navds-color-blue-10);
-  --navds-radio-color-border-checked: var(--navds-color-blue-50);
-  --navds-radio-color-shadow-checked: var(--navds-color-blue-50);
-  --navds-radio-color-shadow-checked-focus: var(--navds-color-blue-80);
-  --navds-radio-color-shadow-background-checked-focus: var(--navds-color-white);
-  --navds-radio-color-shadow-dot-checked-focus: var(--navds-color-blue-50);
-  --navds-radio-color-shadow-error: var(--navds-color-red-50);
-  --navds-radio-color-border-error: var(--navds-color-red-50);
-
-  /* Disabled */
-  --navds-radio-color-background-disabled: var(--navds-color-gray-10);
-  --navds-radio-color-border-disabled: var(--navds-color-gray-60);
-  --navds-radio-color-label-disabled: var(--navds-color-gray-40);
-  --navds-radio-color-background-disabled-checked: var(--navds-color-gray-40);
-  --navds-radio-color-border-disabled-checked: var(--navds-color-gray-40);
-  --navds-radio-color-shadow-disabled-checked: var(--navds-color-gray-40);
-}
-
-.navds-radio {
-  position: relative;
-  padding: var(--navds-spacing-3) 0;
-}
-
-.navds-radio--with-description .navds-error-message {
-  margin-top: 0;
-}
-
-.navds-radio .navds-error-message {
-  margin-top: var(--navds-spacing-3);
-}
-
-.navds-radio__input {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  width: 48px;
-  height: 48px;
-  left: -12px;
-  margin: 0;
-  opacity: 0;
-  top: 0;
-}
-
-.navds-radio__label {
-  display: flex;
-  width: fit-content;
-  gap: 12px;
-  min-width: 48px;
-  cursor: pointer;
-}
-
-.navds-radio__description {
-  padding-left: calc(48px - 12px);
-  color: var(--navds-radio-color-description);
-}
-
-.navds-radio--with-description {
-  padding-bottom: 0;
-}
-
-.navds-radio--with-error-message {
-  padding-bottom: var(--navds-spacing-2);
-}
-
-.navds-radio__label::before {
-  content: "";
-  background-color: var(--navds-radio-color-background);
-  border: 1px solid var(--navds-radio-color-border);
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  border-radius: 50%;
-}
-
-.navds-radio--small {
-  padding: var(--navds-spacing-1) 0;
-}
-
-.navds-radio--small > .navds-radio__input {
-  width: 24px;
-  height: 24px;
-  top: 2px;
-  left: 0;
-}
-
-.navds-radio--small > .navds-radio__label::before {
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-
-.navds-radio__input:hover + .navds-radio__label {
-  color: var(--navds-radio-color-label-hover);
-}
-
-.navds-radio__input:hover + .navds-radio__label::before {
-  border-color: var(--navds-radio-color-border-hover);
-  background-color: var(--navds-radio-color-background-hover);
-}
-
-.navds-radio__input:focus + .navds-radio__label::before {
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-radio__input:checked + .navds-radio__label::before {
-  border: 2px solid var(--navds-radio-color-border-checked);
-  box-shadow: 0 0 0 3px #fff inset,
-    0 0 0 2rem var(--navds-radio-color-shadow-checked) inset;
-}
-
-.navds-radio__input:checked:focus + .navds-radio__label::before {
-  transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
-  box-shadow: 0 0 0 3px var(--navds-radio-color-shadow-checked-focus),
-    0 0 0 3px var(--navds-radio-color-shadow-background-checked-focus) inset,
-    0 0 0 2rem var(--navds-radio-color-shadow-dot-checked-focus) inset;
-}
-
-.navds-radio--error
-  > .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
-  + .navds-radio__label::before {
-  box-shadow: 0 0 0 1px var(--navds-radio-color-shadow-error);
-  border-color: var(--navds-radio-color-border-error);
-}
-
-.navds-radio--small .navds-error-message {
-  margin-top: 4px;
-}
-
-.navds-radio__input:disabled,
-.navds-radio__input:disabled + .navds-radio__label {
-  color: var(--navds-radio-color-label-disabled);
-  cursor: not-allowed;
-}
-
-.navds-radio__input:disabled + .navds-radio__label::before {
-  background-color: var(--navds-radio-color-background-disabled);
-  border-color: var(--navds-radio-color-border-disabled);
-}
-
-.navds-radio__input:disabled:checked + .navds-radio__label::before {
-  background-color: var(--navds-radio-color-background-disabled-checked);
-  border-color: var(--navds-radio-color-border-disabled-checked);
-  box-shadow: 0 0 0 3px #fff inset,
-    0 0 0 2rem var(--navds-radio-color-shadow-disabled-checked) inset;
-}

@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 {
@@ -47,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/text-field.css

@@ -1,12 +1,22 @@
 :root {
-  --navds-text-field-color-background: var(--navds-color-white);
-  --navds-text-field-color-border: var(--navds-color-gray-60);
-  --navds-text-field-color-border-hover: var(--navds-color-blue-50);
-  --navds-text-field-color-border-error: var(--navds-color-red-50);
-  --navds-text-field-color-shadow-error: var(--navds-color-red-50);
-  --navds-text-field-color-border-disabled: var(--navds-color-gray-40);
-  --navds-text-field-color-background-disabled: var(--navds-color-gray-10);
-  --navds-text-field-color-text-disabled: var(--navds-color-darkgray);
+  --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 {
@@ -14,16 +24,20 @@
   padding: 0.5rem;
   background-color: var(--navds-text-field-color-background);
   border-radius: 4px;
-  border: 1px solid var(--navds-text-field-color-border);
+  border: 2px solid var(--navds-text-field-color-border);
   min-height: 48px;
   width: 100%;
 }
 
 .navds-form-field--small > .navds-text-field__input {
-  padding: 0.15rem;
+  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);
 }
@@ -36,20 +50,29 @@
 /**
   Error handling
 */
-.navds-text-field--error
-  > .navds-text-field__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-text-field-color-shadow-error);
+.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,
-.navds-text-field__input[readonly] {
-  background-color: var(--navds-text-field-color-background-disabled);
-  border-color: var(--navds-text-field-color-border-disabled);
+.navds-text-field__input:disabled {
+  background-color: var(--navds-text-field-color-background);
+  border-color: var(--navds-text-field-color-border);
   box-shadow: none;
-  color: var(--navds-text-field-color-text-disabled);
   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;
 }
 
 /**

@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 {
@@ -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/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.10.0",
+  "version": "0.12.0",
   "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.3",
+    "@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 {

@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

@@ -1,3 +1,7 @@
+:root {
+  --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
+}
+
 .navds-table {
   border-collapse: collapse;
   width: 100%;
@@ -20,7 +24,7 @@
   display: table-cell;
   padding: var(--navds-spacing-4);
   text-align: left;
-  border-bottom: var(--navds-border-default);
+  border-bottom: 1px solid var(--navds-table-cell-color-border);
 }
 
 .navds-table--small .navds-table__cell {

@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/icons/meta.json

@@ -1742,13 +1742,13 @@
   {
     "name": "SchoolBag",
     "description": "",
-    "created_at": "2021-04-07T12:13:28.147Z",
+    "created_at": "2021-04-07T12:13:28.140Z",
     "pageName": "Family"
   },
   {
-    "name": "SchoolBag",
+    "name": "SchoolBagFilled",
     "description": "",
-    "created_at": "2021-04-07T12:13:28.140Z",
+    "created_at": "2021-04-07T12:13:28.147Z",
     "pageName": "Family"
   },
   {

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -38,7 +38,8 @@
     "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",

@navikt/core/icons/svg/BabyChangingRoomFilled.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="M12 3C12 4.65685 10.6569 6 9 6C7.34315 6 6 4.65685 6 3C6 1.34315 7.34315 0 9 0C10.6569 0 12 1.34315 12 3ZM23 14.5C23 15.3284 22.3284 16 21.5 16C20.6716 16 20 15.3284 20 14.5C20 13.6716 20.6716 13 21.5 13C22.3284 13 23 13.6716 23 14.5ZM4.68636 6C3.98108 6 3.36366 6.47353 3.18079 7.15469L0.000732422 19H1H3.25773V24H5.25773V19H7.25773V24H9.25773V19H11H12.0018L10.1893 11H13C13.5523 11 14 10.5523 14 10C14 9.44771 13.5523 9 13 9H9.5682C8.65406 7.19312 6.78502 6 4.68636 6ZM20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12V14H16.618L16.1708 13.1056C15.832 12.428 15.1395 12 14.382 12H14C13.4477 12 13 12.4477 13 13C13 13.5523 13.4477 14 14 14H14.382L14.8292 14.8944C15.168 15.572 15.8605 16 16.618 16H18C19.1046 16 20 15.1046 20 14V12ZM13 18C13 17.4477 13.4477 17 14 17H22C22.5523 17 23 17.4477 23 18C23 18.5523 22.5523 19 22 19H14C13.4477 19 13 18.5523 13 18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 3C13 4.65685 11.6569 6 10 6C8.34315 6 7 4.65685 7 3C7 1.34315 8.34315 0 10 0C11.6569 0 13 1.34315 13 3ZM24 14.5C24 15.3284 23.3284 16 22.5 16C21.6716 16 21 15.3284 21 14.5C21 13.6716 21.6716 13 22.5 13C23.3284 13 24 13.6716 24 14.5ZM5.68636 6C4.98108 6 4.36366 6.47353 4.18079 7.15469L1.00073 19H2H4.25773V24H6.25773V19H8.25773V24H10.2577V19H12H13.0018L11.1893 11H14C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H10.5682C9.65406 7.19312 7.78502 6 5.68636 6ZM21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12V14H17.618L17.1708 13.1056C16.832 12.428 16.1395 12 15.382 12H15C14.4477 12 14 12.4477 14 13C14 13.5523 14.4477 14 15 14H15.382L15.8292 14.8944C16.168 15.572 16.8605 16 17.618 16H19C20.1046 16 21 15.1046 21 14V12ZM14 18C14 17.4477 14.4477 17 15 17H23C23.5523 17 24 17.4477 24 18C24 18.5523 23.5523 19 23 19H15C14.4477 19 14 18.5523 14 18Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/SchoolBag.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="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V11C3 7.64262 5.06817 4.76829 8 3.58152ZM2 22V20V15V13C0.895431 13 0 13.8954 0 15V20C0 21.1046 0.895431 22 2 22ZM22 20V22C23.1046 22 24 21.1046 24 20V15C24 13.8954 23.1046 13 22 13V15V20ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 15H15V18H9V15ZM7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V18C17 19.1046 16.1046 20 15 20H9C7.89543 20 7 19.1046 7 18V15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V13H22C23.1046 13 24 13.8954 24 15V20C24 21.1046 23.1046 22 22 22H20.4649C19.7733 23.1956 18.4806 24 17 24H7C5.51944 24 4.22675 23.1956 3.53513 22H2C0.89543 22 0 21.1046 0 20V15C0 13.8954 0.895431 13 2 13H3V11C3 7.64262 5.06817 4.76829 8 3.58152ZM19 20V13V11C19 7.68629 16.3137 5 13 5H11C7.68629 5 5 7.68629 5 11V13V20C5 21.1046 5.89543 22 7 22H17C18.1046 22 19 21.1046 19 20ZM21 15V20H22V15H21ZM2 15H3V20H2L2 15ZM15 15H9V18H15V15ZM9 13C7.89543 13 7 13.8954 7 15V18C7 19.1046 7.89543 20 9 20H15C16.1046 20 17 19.1046 17 18V15C17 13.8954 16.1046 13 15 13H9ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/SchoolBagFilled.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="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V11C3 7.64262 5.06817 4.76829 8 3.58152ZM2 22V20V15V13C0.895431 13 0 13.8954 0 15V20C0 21.1046 0.895431 22 2 22ZM22 20V22C23.1046 22 24 21.1046 24 20V15C24 13.8954 23.1046 13 22 13V15V20ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 15H15V18H9V15ZM7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V18C17 19.1046 16.1046 20 15 20H9C7.89543 20 7 19.1046 7 18V15Z" fill="#262626"/>
+</svg>

@navikt/core/icons/template.js

@@ -35,7 +35,8 @@ function defaultTemplate(
   ${imports}
   ${interfaces}
   function ${componentName}(${props}) {
-    const titleId = _titleId ?? (title ? v4() : undefined);
+    const titleId = _titleId ?? (title ?
+      "icon-title-" + v4() : undefined);
     return ${jsx};
   }
   ${exports}`;

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.6.0",
+    "@navikt/ds-icons": "^0.7.0",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -61,6 +61,7 @@
     "ts-jest": "^27.0.5"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
   }
 }

@navikt/core/react/src/form/Fieldset/Fieldset.tsx

@@ -1,6 +1,6 @@
 import cl from "classnames";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
-import { BodyShort, Label, omit } from "../..";
+import { BodyShort, Detail, Label, omit } from "../..";
 import ErrorMessage from "../ErrorMessage";
 import { FormFieldProps } from "../useFormField";
 import { useFieldset } from "./useFieldset";
@@ -101,17 +101,30 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           >
             {legend}
           </Label>
-          {!!description && (
-            <BodyShort
-              className={cl("navds-fieldset__description", {
-                "sr-only": !!hideLegend,
-              })}
-              id={inputDescriptionId}
-              size={size}
-            >
-              {description}
-            </BodyShort>
-          )}
+          {!!description &&
+            (size === "medium" ? (
+              <BodyShort
+                className={cl("navds-fieldset__description", {
+                  "sr-only": !!hideLegend,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {props.description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-fieldset__description", {
+                  "sr-only": !!hideLegend,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {props.description}
+              </Detail>
+            ))}
           {children}
           <div
             id={errorId}

@navikt/core/react/src/form/Select.tsx

@@ -52,7 +52,10 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         className,
         "navds-form-field",
         `navds-form-field--${size}`,
-        { "navds-select--error": hasError }
+        {
+          "navds-select--error": hasError,
+          "navds-select--disabled": !!inputProps.disabled,
+        }
       )}
     >
       <Label
@@ -67,6 +70,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
       </Label>
       {!!description && (
         <BodyShort
+          as="div"
           className={cl("navds-select__description", {
             "sr-only": hideLabel,
           })}

@navikt/core/react/src/form/TextField.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "classnames";
-import { BodyShort, Label, omit } from "..";
+import { BodyShort, Detail, Label, omit } from "..";
 import ErrorMessage from "./ErrorMessage";
 import { FormFieldProps, useFormField } from "./useFormField";
 
@@ -52,7 +52,10 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
         className,
         "navds-form-field",
         `navds-form-field--${size}`,
-        { "navds-text-field--error": hasError }
+        {
+          "navds-text-field--error": hasError,
+          "navds-text-field--disabled": !!inputProps.disabled,
+        }
       )}
     >
       <Label
@@ -65,15 +68,31 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
       </Label>
 
       {!!description && (
-        <BodyShort
-          className={cl("navds-text-field__description", {
-            "sr-only": hideLabel,
-          })}
-          id={inputDescriptionId}
-          size={size}
-        >
-          {description}
-        </BodyShort>
+        <>
+          {size === "medium" ? (
+            <BodyShort
+              className={cl("navds-text-field__description", {
+                "sr-only": hideLabel,
+              })}
+              id={inputDescriptionId}
+              size="small"
+              as="div"
+            >
+              {description}
+            </BodyShort>
+          ) : (
+            <Detail
+              className={cl("navds-text-field__description", {
+                "sr-only": hideLabel,
+              })}
+              id={inputDescriptionId}
+              size="small"
+              as="div"
+            >
+              {description}
+            </Detail>
+          )}
+        </>
       )}
       <input
         {...omit(rest, ["error", "errorId", "size"])}

@navikt/core/react/src/form/Textarea.tsx

@@ -66,7 +66,10 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           className,
           "navds-form-field",
           `navds-form-field--${size}`,
-          { "navds-textarea--error": hasError }
+          {
+            "navds-textarea--error": hasError,
+            "navds-textarea--disabled": !!inputProps.disabled,
+          }
         )}
       >
         <Label
@@ -81,6 +84,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         </Label>
         {!!description && (
           <BodyShort
+            as="div"
             className={cl("navds-textarea__description", {
               "sr-only": hideLabel,
             })}

@navikt/core/react/src/form/checkbox/Checkbox.test.tsx

@@ -29,10 +29,7 @@ test("checkbox group chains onChange calls", () => {
 });
 
 describe("Checkbox handles controlled-state correctly", () => {
-  const CheckboxComponent = ({
-    onChange = () => null,
-    value,
-  }) => (
+  const CheckboxComponent = ({ onChange = () => null, value }) => (
     <CheckboxGroup legend="legend" onChange={onChange} value={value}>
       <Checkbox value={"value1"}>label1</Checkbox>
       <Checkbox value={"value2"}>label2</Checkbox>
@@ -55,7 +52,12 @@ describe("Checkbox handles controlled-state correctly", () => {
   test("onChange called with expected values", () => {
     const onGroupChange = jest.fn();
 
-    render(<CheckboxComponent onChange={onGroupChange} value={["value1", "value2"]} />);
+    render(
+      <CheckboxComponent
+        onChange={onGroupChange}
+        value={["value1", "value2"]}
+      />
+    );
 
     userEvent.click(screen.getByLabelText("label1"));
 

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -1,13 +1,17 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "classnames";
 import useCheckbox from "./useCheckbox";
-import ErrorMessage from "../ErrorMessage";
 import { FormFieldProps } from "../useFormField";
-import { BodyShort, omit } from "../..";
+import { BodyShort, Detail, omit } from "../..";
 
 export interface CheckboxProps
-  extends FormFieldProps,
+  extends Omit<FormFieldProps, "errorId">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Checkbox has error
+   * @default false
+   */
+  error?: boolean;
   /**
    * Label for checkbox
    */
@@ -23,14 +27,9 @@ export interface CheckboxProps
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    hasError,
-    size,
-    inputDescriptionId,
-  } = useCheckbox(props);
+  const { inputProps, hasError, size } = useCheckbox(props);
+
+  const Description = size === "medium" ? BodyShort : Detail;
 
   return (
     <div
@@ -40,8 +39,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
         `navds-checkbox--${size}`,
         {
           "navds-checkbox--error": hasError,
-          "navds-checkbox--with-error-message": showErrorMsg,
-          "navds-checkbox--with-description": !!props.description,
+          "navds-checkbox--disabled": inputProps.disabled,
         }
       )}
     >
@@ -50,7 +48,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           "children",
           "size",
           "error",
-          "errorId",
           "description",
           "hideLabel",
         ])}
@@ -58,30 +55,26 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
         className="navds-checkbox__input"
         ref={ref}
       />
-      <BodyShort
-        as="label"
-        htmlFor={inputProps.id}
-        size={size}
-        className="navds-checkbox__label"
-      >
-        {props.hideLabel ? (
-          <span className="sr-only">{props.children}</span>
-        ) : (
-          props.children
-        )}
-      </BodyShort>
-      {props.description && (
-        <BodyShort
-          size={size}
-          id={inputDescriptionId}
-          className="navds-checkbox__description"
+      <label htmlFor={inputProps.id} className="navds-checkbox__label">
+        <div
+          className={cl("navds-checkbox__content", {
+            "sr-only": props.hideLabel,
+          })}
         >
-          {props.description}
-        </BodyShort>
-      )}
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
-      </div>
+          <BodyShort as="div" size={size}>
+            {props.children}
+          </BodyShort>
+          {props.description && (
+            <Description
+              as="div"
+              size="small"
+              className="navds-checkbox__description"
+            >
+              {props.description}
+            </Description>
+          )}
+        </div>
+      </label>
     </div>
   );
 });

@navikt/core/react/src/form/checkbox/CheckboxGroup.tsx

@@ -12,7 +12,8 @@ export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
   null
 );
 
-export interface CheckboxGroupProps extends Omit<FieldsetProps, "onChange"> {
+export interface CheckboxGroupProps
+  extends Omit<FieldsetProps, "onChange" | "errorPropagation"> {
   /**
    * Checkboxes
    */

@navikt/core/react/src/form/checkbox/stories/checkbox.stories.mdx

@@ -49,6 +49,8 @@ Man kan både sette en description på CheckboxGroup og selve checkbox
 
 ## Errors
 
+Feilmeldinger kan bare settes på gruppa
+
 ```jsx
 <CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
   <Checkbox value="Apple">Apple</Checkbox>
@@ -65,37 +67,23 @@ Man kan både sette en description på CheckboxGroup og selve checkbox
   </CheckboxGroup>
 </Canvas>
 
-## Errors uten errorPropagation
+Enkelt-checkboxer tar en `boolean` error prop
 
 ```jsx
-<CheckboxGroup
-  legend="Mollit eiusmod"
-  errorPropagation={false}
-  error="Boks nr 2 må være valgt"
->
-  <Checkbox value="Apple">Apple</Checkbox>
-  <Checkbox value="Orange">Orange</Checkbox>
-  <Checkbox value="Melon">Melon</Checkbox>
-</CheckboxGroup>
+<Checkbox value="Apple" error>
+  Apple
+</Checkbox>
 ```
 
 <Canvas>
-  <CheckboxGroup
-    legend="Mollit eiusmod"
-    errorPropagation={false}
-    error="Boks nr 2 må være valgt"
-  >
-    <Checkbox value="Apple">Apple</Checkbox>
-    <Checkbox value="Orange" error="Boksen må være valgt">
-      Orange
-    </Checkbox>
-    <Checkbox value="Melon">Melon</Checkbox>
-  </CheckboxGroup>
+  <Checkbox value="Apple" error>
+    Apple
+  </Checkbox>
 </Canvas>
 
 ## Sizing
 
-Checkboxer har default 44px høy klikkflate. Med size="small" blir denne til 24px slik som før
+Checkboxer har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
 
 ```jsx
 <CheckboxGroup
@@ -166,31 +154,15 @@ Ved bruk av `hideLegend` på CheckboxGroup kan man gjøre slik at legend/descrip
 Ved bruk av `hideLabel` kan man lettere ta i bruk checkbox internt i eks tabeller.
 
 ```jsx
-<CheckboxGroup legend="Mollit eiusmod" hideLegend>
-  <Checkbox value="Apple" hideLabel>
-    Apple
-  </Checkbox>
-  <Checkbox value="Orange" hideLabel>
-    Orange
-  </Checkbox>
-  <Checkbox value="Melon" hideLabel>
-    Melon
-  </Checkbox>
-</CheckboxGroup>
+<Checkbox value="Orange" hideLabel>
+  Orange
+</Checkbox>
 ```
 
 <Canvas>
-  <CheckboxGroup legend="Mollit eiusmod" hideLegend>
-    <Checkbox value="Apple" hideLabel>
-      Apple
-    </Checkbox>
-    <Checkbox value="Orange" hideLabel>
-      Orange
-    </Checkbox>
-    <Checkbox value="Melon" hideLabel>
-      Melon
-    </Checkbox>
-  </CheckboxGroup>
+  <Checkbox value="Orange" hideLabel>
+    Orange
+  </Checkbox>
 </Canvas>
 
 ## Disabled
@@ -206,7 +178,7 @@ NOTE: Husk at disabled bør unngås!
   <Checkbox value="Melon">Melon</Checkbox>
 </CheckboxGroup>
 
-<CheckboxGroup legend="Mollit eiusmod" >
+<CheckboxGroup legend="Mollit eiusmod">
   <Checkbox value="Apple" disabled>Apple</Checkbox>
   <Checkbox value="Orange">Orange</Checkbox>
   <Checkbox value="Melon">Melon</Checkbox>

@navikt/core/react/src/form/checkbox/stories/checkbox.stories.tsx

@@ -7,90 +7,63 @@ export default {
 } as Meta;
 
 export const All = () => {
+  const Checkboxes = (props) => (
+    <CheckboxGroup
+      legend="Mollit eiusmod"
+      description="Exercitation do labore"
+      {...props}
+    >
+      <Checkbox value="Apple">Apple</Checkbox>
+      <Checkbox value="Orange" description="Laborum ad">
+        Orange
+      </Checkbox>
+      <Checkbox value="Banana" description={<div>Laborum ad</div>}>
+        Banana
+      </Checkbox>
+      <Checkbox value="Melon">Melon</Checkbox>
+    </CheckboxGroup>
+  );
+
   return (
     <>
-      <h1>Checkboxes</h1>
-      <CheckboxGroup legend="Mollit eiusmod">
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>description</h2>
-      <CheckboxGroup
-        legend="Mollit eiusmod"
-        description="Exercitation do labore"
-      >
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange" description="Laborum ad">
-          Orange
-        </Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>error</h2>
-      <CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>error uten errorPropagation</h2>
-      <CheckboxGroup
-        legend="Mollit eiusmod"
-        errorPropagation={false}
-        error="Boks nr 2 må være valgt"
-      >
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange" error="Boksen må være valgt">
-          Orange
-        </Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>Sizing</h2>
-      <CheckboxGroup
-        legend="Mollit eiusmod"
-        error="Boks nr 2 må være valgt"
-        size="small"
-      >
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>defaultValue</h2>
-      <CheckboxGroup legend="Mollit eiusmod" defaultValue={["Orange", "Melon"]}>
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>hideLenged</h2>
-      <CheckboxGroup legend="Mollit eiusmod" hideLegend>
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>hideLabel</h2>
-      <CheckboxGroup legend="Mollit eiusmod">
-        <Checkbox value="Apple" hideLabel>
-          Apple
-        </Checkbox>
-        <Checkbox value="Orange" hideLabel>
-          Orange
-        </Checkbox>
-        <Checkbox value="Melon" hideLabel>
-          Melon
-        </Checkbox>
-      </CheckboxGroup>
-      <h2>Disabled</h2>
-      <CheckboxGroup legend="Mollit eiusmod" disabled>
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <CheckboxGroup legend="Mollit eiusmod">
-        <Checkbox value="Apple" disabled>
-          Apple
-        </Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
+      <h1>Checkbox</h1>
+      <h2>Single checkbox</h2>
+      <Checkbox value="Apple">Apple</Checkbox>
+      <h3>Desription</h3>
+      <Checkbox value="Apple" description="Laborum ad" defaultChecked>
+        Apple
+      </Checkbox>
+      <h3>Error</h3>
+      <Checkbox value="Apple" error>
+        Apple
+      </Checkbox>
+      <Checkbox value="Apple" error defaultChecked>
+        Orange
+      </Checkbox>
+      <h3>Hide label</h3>
+      <Checkbox value="Apple" hideLabel description="Laborum ad">
+        Apple
+      </Checkbox>
+      <h3>Disabled</h3>
+      <Checkbox value="Apple" disabled>
+        Apple
+      </Checkbox>
+      <Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
+        Orange
+      </Checkbox>
+
+      <h2>Checkbox group</h2>
+      <Checkboxes />
+      <h3>Error</h3>
+      <Checkboxes error="Dette er en feilmelding" />
+      <h3>Small</h3>
+      <Checkboxes size="small" />
+      <h3>Small + error</h3>
+      <Checkboxes size="small" error="Dette er en feilmelding" />
+      <h3>Default value</h3>
+      <Checkboxes defaultValue={["Orange", "Melon"]} />
+      <h3>Disabled</h3>
+      <Checkboxes disabled />
     </>
   );
 };

@navikt/core/react/src/form/checkbox/useCheckbox.ts

@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { CheckboxProps } from "../..";
 import { useFormField } from "../useFormField";
 import { CheckboxGroupContext } from "./CheckboxGroup";
+import { omit } from "../..";
 
 /**
  * Handles props for Checkboxes in context with Fieldset and CheckboxGroup
@@ -9,7 +10,10 @@ import { CheckboxGroupContext } from "./CheckboxGroup";
 const useCheckbox = ({ children, ...props }: CheckboxProps) => {
   const checkboxGroup = useContext(CheckboxGroupContext);
 
-  const { inputProps, ...rest } = useFormField(props, "checkbox");
+  const { inputProps, ...rest } = useFormField(
+    omit(props, ["description"]),
+    "checkbox"
+  );
 
   if (checkboxGroup) {
     if (props.checked) {

@navikt/core/react/src/form/radio/Radio.test.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import faker from "faker";
+import { Radio, RadioGroup } from ".";
+
+const value1 = faker.datatype.string();
+const label1 = faker.datatype.string();
+const value2 = faker.datatype.string();
+const label2 = faker.datatype.string();
+
+const Group = (props) => (
+  <RadioGroup {...props} legend="legend">
+    <Radio value={value1}>{label1}</Radio>
+    <Radio value={value2}>{label2}</Radio>
+  </RadioGroup>
+);
+
+describe("Controlled RadioGroup", () => {
+  const originalError = console.error;
+  const mockError = jest.fn();
+  beforeEach(() => (console.error = mockError));
+  afterEach(() => (console.error = originalError));
+
+  test("doesnt console.error", () => {
+    const { rerender } = render(<Group value={value1} />);
+    rerender(<Group value={value2} />);
+
+    expect(mockError).toHaveBeenCalledTimes(0);
+  });
+});
+
+describe("Uncontrolled RadioGroup", () => {
+  test("handles state correctly", () => {
+    render(<Group />);
+
+    const input1 = screen.getByLabelText(label1) as HTMLInputElement;
+    const input2 = screen.getByLabelText(label2) as HTMLInputElement;
+
+    expect(input1.checked).toBe(false);
+    expect(input2.checked).toBe(false);
+
+    userEvent.click(screen.getByLabelText(label2));
+
+    expect(input1.checked).toBe(false);
+    expect(input2.checked).toBe(true);
+  });
+
+  test("handles defaultValue correctly", () => {
+    render(<Group defaultValue={value1} />);
+
+    const input1 = screen.getByLabelText(label1) as HTMLInputElement;
+    const input2 = screen.getByLabelText(label2) as HTMLInputElement;
+
+    expect(input1.checked).toBe(true);
+    expect(input2.checked).toBe(false);
+
+    userEvent.click(screen.getByLabelText(label2));
+
+    expect(input1.checked).toBe(false);
+    expect(input2.checked).toBe(true);
+  });
+});

@navikt/core/react/src/form/radio/Radio.tsx

@@ -1,70 +1,56 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "classnames";
-import { BodyShort, omit } from "../..";
-import ErrorMessage from "../ErrorMessage";
+import { BodyShort, Detail, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useRadio } from "./useRadio";
 
 export interface RadioProps
-  extends FormFieldProps,
+  extends Omit<FormFieldProps, "error" | "errorId">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   /**
    * Label for radio
    */
   children: React.ReactNode;
+  /**
+   * The value of the HTML element
+   */
   value: string;
 }
 
 const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    size,
-    hasError,
-    inputDescriptionId,
-  } = useRadio(props);
+  const { inputProps, size, hasError } = useRadio(props);
+
+  const Description = size === "medium" ? BodyShort : Detail;
 
   return (
     <div
       className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
         "navds-radio--error": hasError,
-        "navds-radio--with-error-message": showErrorMsg,
-        "navds-radio--with-description": !!props.description,
+        "navds-radio--disabled": inputProps.disabled,
       })}
     >
       <input
-        {...omit(props, [
-          "children",
-          "size",
-          "error",
-          "errorId",
-          "description",
-        ])}
+        {...omit(props, ["children", "size", "description"])}
         {...inputProps}
         className="navds-radio__input"
         ref={ref}
       />
-      <BodyShort
-        as="label"
-        htmlFor={inputProps.id}
-        size={size}
-        className="navds-radio__label"
-      >
-        {props.children}
-      </BodyShort>
-      {props.description && (
-        <BodyShort
-          size={size}
-          id={inputDescriptionId}
-          className="navds-radio__description"
-        >
-          {props.description}
-        </BodyShort>
-      )}
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
-      </div>
+      <label htmlFor={inputProps.id} className="navds-radio__label">
+        <div className="navds-radio__content">
+          <BodyShort as="div" size={size}>
+            {props.children}
+          </BodyShort>
+          {props.description && (
+            <Description
+              as="div"
+              size="small"
+              className="navds-radio__description"
+            >
+              {props.description}
+            </Description>
+          )}
+        </div>
+      </label>
     </div>
   );
 });

@navikt/core/react/src/form/radio/RadioGroup.tsx

@@ -15,7 +15,8 @@ export const RadioGroupContext = React.createContext<RadioGroupContextProps | nu
   null
 );
 
-export interface RadioGroupProps extends Omit<FieldsetProps, "onChange"> {
+export interface RadioGroupProps
+  extends Omit<FieldsetProps, "onChange" | "errorPropagation"> {
   /**
    * Collection of <Radio>-elements
    */

@navikt/core/react/src/form/radio/stories/radio.stories.mdx

@@ -49,6 +49,8 @@ Man kan både sette en description på RadioGroup og selve Radio
 
 ## Errors
 
+Feilmeldinger kan bare settes på gruppa
+
 ```jsx
 <RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
   <Radio value="Apple">Apple</Radio>
@@ -65,37 +67,9 @@ Man kan både sette en description på RadioGroup og selve Radio
   </RadioGroup>
 </Canvas>
 
-## Errors uten errorPropagation
-
-```jsx
-<RadioGroup
-  legend="Mollit eiusmod"
-  errorPropagation={false}
-  error="Boks nr 2 må være valgt"
->
-  <Radio value="Apple">Apple</Radio>
-  <Radio value="Orange">Orange</Radio>
-  <Radio value="Melon">Melon</Radio>
-</RadioGroup>
-```
-
-<Canvas>
-  <RadioGroup
-    legend="Mollit eiusmod"
-    errorPropagation={false}
-    error="Boks nr 2 må være valgt"
-  >
-    <Radio value="Apple">Apple</Radio>
-    <Radio value="Orange" error="Boksen må være valgt">
-      Orange
-    </Radio>
-    <Radio value="Melon">Melon</Radio>
-  </RadioGroup>
-</Canvas>
-
 ## Sizing
 
-Radioer har default 44px høy klikkflate. Med size="small" blir denne til 24px slik som før
+Radioknapper har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
 
 ```jsx
 <RadioGroup

@navikt/core/react/src/form/radio/stories/radio.stories.tsx

@@ -7,75 +7,47 @@ export default {
 } as Meta;
 
 export const All = () => {
+  const Radios = (props) => (
+    <RadioGroup
+      legend="Mollit eiusmod"
+      description={<div>"Exercitation do labore"</div>}
+      {...props}
+    >
+      <Radio value="Apple">Apple</Radio>
+      <Radio value="Orange" description="Laborum ad">
+        Orange
+      </Radio>
+      <Radio value="Orange" description={<div>Laborum ad</div>}>
+        Orange
+      </Radio>
+      <Radio value="Melon">Melon</Radio>
+    </RadioGroup>
+  );
+
   return (
     <>
-      <h1>Radios</h1>
-      <RadioGroup legend="Mollit eiusmod">
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>description</h2>
-      <RadioGroup legend="Mollit eiusmod" description="Exercitation do labore">
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange" description="Laborum ad">
-          Orange
-        </Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>error</h2>
-      <RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>error uten errorPropagation</h2>
-      <RadioGroup
-        legend="Mollit eiusmod"
-        errorPropagation={false}
-        error="Boks nr 2 må være valgt"
-      >
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange" error="Boksen må være valgt">
-          Orange
-        </Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>Sizing</h2>
-      <RadioGroup
-        legend="Mollit eiusmod"
-        error="Boks nr 2 må være valgt"
-        size="small"
-      >
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>defaultValue</h2>
-      <RadioGroup legend="Mollit eiusmod" defaultValue="Orange">
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <h2>hideLenged</h2>
-      <RadioGroup legend="Mollit eiusmod" hideLegend>
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
+      <h1>Radio group</h1>
+      <Radios />
+      <h2>Error</h2>
+      <Radios error="Dette er en feilmelding" />
+      <h2>Small</h2>
+      <Radios size="small" />
+      <h2>Small + error</h2>
+      <Radios size="small" error="Dette er en feilmelding" />
+      <h2>Default value</h2>
+      <Radios defaultValue="Orange" />
       <h2>Disabled</h2>
-      <RadioGroup legend="Mollit eiusmod" disabled>
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange">Orange</Radio>
-        <Radio value="Melon">Melon</Radio>
-      </RadioGroup>
-      <RadioGroup legend="Mollit eiusmod">
+      <RadioGroup legend="Mollit eiusmod" description="Exercitation do labore">
         <Radio value="Apple" disabled>
           Apple
         </Radio>
-        <Radio value="Orange">Orange</Radio>
+        <Radio value="Orange" description="Laborum ad" disabled>
+          Orange
+        </Radio>
         <Radio value="Melon">Melon</Radio>
       </RadioGroup>
+      <h2>Disabled group</h2>
+      <Radios disabled />
     </>
   );
 };

@navikt/core/react/src/form/radio/useRadio.ts

@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { useFormField } from "../useFormField";
 import { RadioProps } from "./Radio";
 import { RadioGroupContext } from "./RadioGroup";
+import { omit } from "../..";
 
 /**
  * Handles props for Radios in context with Fieldset and RadioGroup
@@ -9,7 +10,10 @@ import { RadioGroupContext } from "./RadioGroup";
 export const useRadio = (props: RadioProps) => {
   const radioGroup = useContext(RadioGroupContext);
 
-  const { inputProps, ...rest } = useFormField(props, "radio");
+  const { inputProps, ...rest } = useFormField(
+    omit(props, ["description"]),
+    "radio"
+  );
 
   if (!radioGroup) {
     console.warn("<Radio> must be used inside <RadioGroup>.");
@@ -24,10 +28,14 @@ export const useRadio = (props: RadioProps) => {
     inputProps: {
       ...inputProps,
       name: radioGroup?.name,
+      defaultChecked:
+        radioGroup?.defaultValue === undefined
+          ? undefined
+          : radioGroup?.defaultValue === props.value,
       checked:
-        (radioGroup?.value ?? radioGroup?.defaultValue) === props.value
-          ? true
-          : undefined,
+        radioGroup?.value === undefined
+          ? undefined
+          : radioGroup?.value === props.value,
       onChange: (e) => {
         props.onChange && props.onChange(e);
         radioGroup?.onChange && radioGroup.onChange(props.value);

@navikt/core/react/src/form/search-field/SearchField.tsx

@@ -79,7 +79,10 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
           "navds-form-field",
           `navds-form-field--${size ?? "medium"}`,
           "navds-search-field",
-          { "navds-search-field--error": hasError }
+          {
+            "navds-search-field--error": hasError,
+            "navds-search-field--disabled": !!inputProps.disabled,
+          }
         )}
       >
         <Label
@@ -94,6 +97,7 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
         </Label>
         {!!description && (
           <BodyShort
+            as="div"
             className={cl("navds-text-field__description", {
               "sr-only": hideLabel,
             })}

@navikt/core/react/src/form/search-field/stories/search-field.stories.tsx

@@ -15,7 +15,7 @@ export const All = () => {
       <h1>SearchField</h1>
       <SearchField
         label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
+        description={<div>Ea cupidatat eu sunt commodo</div>}
       >
         <SearchField.Input />
         <SearchField.Button>
@@ -170,6 +170,30 @@ export const All = () => {
           <SearchField.Input />
         </SearchField>
       </Fieldset>
+
+      <h2>Disabled </h2>
+      <SearchField
+        disabled
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+      >
+        <SearchField.Input />
+        <SearchField.Button>
+          <Search /> Søk
+        </SearchField.Button>
+      </SearchField>
+      <Fieldset legend="Filter" disabled>
+        <SearchField
+          label="Mollit eiusmod"
+          description="Ea cupidatat eu sunt commodo"
+          error="Errormsg"
+        >
+          <SearchField.Input />
+          <SearchField.Button>
+            <Search /> Søk
+          </SearchField.Button>
+        </SearchField>
+      </Fieldset>
     </>
   );
 };

@navikt/core/react/src/form/stories/fieldset.stories.tsx

@@ -21,9 +21,13 @@ export const All = () => {
 
       <Fieldset
         legend="Mollit eiusmod"
-        description="Quis reprehenderit esse cillum"
+        description={<div>Quis reprehenderit esse cillum</div>}
       >
-        <TextField label="Textfield label" hideLabel />
+        <TextField
+          label="Textfield label"
+          hideLabel
+          description={<div>Quis reprehenderit esse cillum</div>}
+        />
         <TextField label="Textfield label" hideLabel />
       </Fieldset>
 

@navikt/core/react/src/form/stories/select.stories.tsx

@@ -19,7 +19,7 @@ export const All = () => {
 
       <h2>Description</h2>
 
-      <Select label="Ipsum enim quis culpa" description="Aute enim">
+      <Select label="Ipsum enim quis culpa" description={<div>Aute enim</div>}>
         <option value="">Velg land</option>
         <option value="norge">Norge</option>
         <option value="sverige">Sverige</option>

@navikt/core/react/src/form/stories/text-field.stories.tsx

@@ -15,7 +15,10 @@ export const All = () => {
 
       <h2>Description</h2>
 
-      <TextField label="Laborum excepteur" description="Cillum mollit" />
+      <TextField
+        label="Laborum excepteur"
+        description={<div>Cillum mollit</div>}
+      />
 
       <h2>Passord-type</h2>
       <TextField label="Passord" type="password" />
@@ -52,6 +55,25 @@ export const All = () => {
         description="Cillum mollit"
         disabled
       />
+      <TextField
+        size="small"
+        label="Laborum excepteur"
+        description="Cillum mollit"
+        disabled
+      />
+      <h2>Readonly</h2>
+
+      <TextField
+        label="Laborum excepteur"
+        description="Cillum mollit"
+        readOnly
+      />
+      <TextField
+        label="Laborum excepteur"
+        description="Cillum mollit"
+        size="small"
+        readOnly
+      />
     </div>
   );
 };

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -23,7 +23,7 @@ export const All = () => {
 
       <Textarea
         label="In anim elit"
-        description="Reprehenderit esse proident"
+        description={<div>Reprehenderit esse proident</div>}
         value={value}
         onChange={handleChange}
       />
@@ -78,7 +78,17 @@ export const All = () => {
         description="Reprehenderit esse proident"
         maxLength={400}
         disabled
-        value={value}
+        value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
+        onChange={handleChange}
+      />
+      <h2>Readonly</h2>
+
+      <Textarea
+        label="In anim elit"
+        description="Reprehenderit esse proident"
+        maxLength={400}
+        readOnly
+        value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
         onChange={handleChange}
       />
     </div>

@navikt/core/react/src/grid/stories/grid.stories.mdx

@@ -31,13 +31,13 @@ Stylingen som blir satt av den:
 .navds-content-container {
   margin-left: auto;
   margin-right: auto;
-  max-width: var(--navds-content-container-max-width); # 79.5rem (1272px)
-  padding: var(--navds-content-container-padding-small); # 1rem
+  max-width: 79.5rem; # (1272px)
+  padding: var(--navds-spacing-4); # 1rem
 }
 
 @media (min-width: 448px) {
   .navds-content-container {
-    padding: var(--navds-content-container-padding-medium-and-larger); # 1.5rem
+    padding: var(--navds-spacing-6); # 1.5rem
   }
 }
 ```

@navikt/core/react/src/guide-panel/stories/example.css

@@ -1,13 +1,13 @@
 .sb-guidepanel__tokens--purple {
-  --navds-guide-panel-color-border: var(--navds-color-purple-40);
+  --navds-guide-panel-color-border: var(--navds-global-color-purple-400);
   --navds-guide-panel-color-illustration-background: var(
-    --navds-color-purple-20
+    --navds-global-color-purple-200
   );
 }
 
 .sb-guidepanel__tokens--green {
-  --navds-guide-panel-color-border: var(--navds-color-green-40);
+  --navds-guide-panel-color-border: var(--navds-global-color-green-400);
   --navds-guide-panel-color-illustration-background: var(
-    --navds-color-green-20
+    --navds-global-color-green-200
   );
 }

@navikt/core/react/src/guide-panel/stories/guidepanel.stories.mdx

@@ -38,9 +38,9 @@ Istedenfor fargetema/themes slik som tidligere veileder brukte velger man nå se
 overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components eller css-klasser, men kan inlines også
 
 ```css
-/* default */
---navds-guide-panel-color-border: var(--navds-color-blue-40);
---navds-guide-panel-color-illustration-background: var(--navds-color-blue-20);
+/* Tokens */
+--navds-guide-panel-color-border
+--navds-guide-panel-color-illustration-background
 ```
 
 ```jsx
@@ -55,16 +55,16 @@ overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components elle
 /* Inline */
 <GuidePanel
   style={{
-    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
-    ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
+    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
+    ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
   }}
 >
     Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
   </GuidePanel>
 <GuidePanel
     style={{
-    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
-    ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
+    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
+    ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
   }}
 >
   Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.

@navikt/core/react/src/guide-panel/stories/guidepanel.stories.tsx

@@ -21,24 +21,24 @@ export const All = () => {
       <h2>custom colors</h2>
       <GuidePanel
         style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-purple-20)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-color-purple-40)",
+          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-purple-200)",
+          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-purple-400)",
         }}
       >
         {panelText}
       </GuidePanel>
       <GuidePanel
         style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-green-20)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-color-green-40)",
+          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-green-200)",
+          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-green-400)",
         }}
       >
         {panelText}
       </GuidePanel>
       <GuidePanel
         style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-color-orange-20)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-color-orange-40)",
+          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
+          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
         }}
       >
         {panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua

@navikt/core/react/src/loader/Loader.tsx

@@ -74,7 +74,7 @@ const Loader = forwardRef<SVGSVGElement, LoaderProps>(
           cx="25"
           cy="25"
           r="20"
-          stroke={"var(--navds-color-gray-40)"}
+          stroke={"var(--navds-global-color-gray-400)"}
           fill="none"
           strokeWidth="5"
           strokeDasharray="50 155"

@navikt/core/react/src/loader/stories/loader.stories.mdx

@@ -85,19 +85,3 @@ Størrelsen justeres også automatisk, slik at alt man trenger er å sette Loade
     <Loader />
   </Button>
 </Canvas>
-
-## Overskrive farger for å sikre kontrast
-
-I de casene der man må justere fargene for å ha bedre kontrast så kan man endre på selve css-variablene som bli brukt
-
-```css
---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-inverted-background: rgba(255, 255, 255, 0.3);
---navds-loader-color-transparent-background: transparent;
---navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
---navds-loader-color-on-button-foreground: currentColor;
-```

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

@@ -17,7 +17,7 @@ const Template = (props) => {
     <>
       <div
         style={{
-          background: "var(--navds-color-gray-60)",
+          background: "var(--navds-global-color-gray-600)",
           textAlign: "center",
           width: "2rem",
           height: "2rem",

@navikt/core/react/src/speech-bubble/stories/speechbubble.stories.mdx

@@ -80,8 +80,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
 <SpeechBubble
   illustration="OLA"
   position="left"
-  illustrationBgColor="var(--navds-color-lightblue-10)"
-  backgroundColor="var(--navds-color-lightblue-20)"
+  illustrationBgColor="var(--navds-global-color-lightblue-100)"
+  backgroundColor="var(--navds-global-color-lightblue-200)"
 >
   <SpeechBubble.Bubble>
     Aute minim nisi sunt mollit duis sunt nulla minim non proident.
@@ -93,8 +93,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
   <SpeechBubble
     illustration="OLA"
     position="left"
-    illustrationBgColor="var(--navds-color-lightblue-10)"
-    backgroundColor="var(--navds-color-lightblue-20)"
+    illustrationBgColor="var(--navds-global-color-lightblue-100)"
+    backgroundColor="var(--navds-global-color-lightblue-200)"
   >
     <SpeechBubble.Bubble>
       Aute minim nisi sunt mollit duis sunt nulla minim non proident.

@navikt/core/react/src/speech-bubble/stories/speechbubble.stories.tsx

@@ -14,7 +14,7 @@ export const All = () => {
       <SpeechBubble
         illustration={<Illustration />}
         topText="Ola Normann 01.01.21 14:00"
-        backgroundColor="var(--navds-color-lightblue-20)"
+        backgroundColor="var(--navds-global-color-lightblue-200)"
       >
         <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
@@ -42,7 +42,7 @@ export const All = () => {
           </div>
         }
         position="right"
-        backgroundColor="var(--navds-color-gray-10)"
+        backgroundColor="var(--navds-global-color-gray-100)"
       >
         <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.

@navikt/core/react/src/typography/stories/index.css

@@ -1,3 +1,3 @@
 .typo-story > div:nth-child(even) {
-  background: var(--navds-color-gray-20);
+  background: var(--navds-global-color-gray-200);
 }

@navikt/core/tokens/config.json

@@ -1,5 +1,5 @@
 {
-  "source": ["src/index.js"],
+  "source": ["src/index.js", "src/**/*.json"],
   "platforms": {
     "scss": {
       "transformGroup": "scss",
@@ -27,7 +27,10 @@
       "files": [
         {
           "destination": "tokens.css",
-          "format": "css/variables"
+          "format": "css/variables",
+          "options": {
+            "outputReferences": true
+          }
         }
       ]
     },
@@ -41,7 +44,7 @@
         },
         {
           "destination": "tokens-cjs.js",
-          "format": "javascript/module"
+          "format": "javascript/module-flat"
         }
       ]
     }

@navikt/core/tokens/figma/colors.ts

@@ -0,0 +1,35 @@
+import { writeFileSync } from "fs";
+import { resolve } from "path";
+import formatToStyleDictionary from "./format-sd";
+import globalColorRefs, { ColorT } from "./global-color-ref";
+import parseName from "./parse-name";
+
+type FigmaColorsT = {
+  [key: string]: string;
+};
+
+const parseColors = async (figmaColors: FigmaColorsT) => {
+  /* Parse name and color into correct format */
+  const colors: ColorT[] = Object.entries(figmaColors)
+    .map(([key, value]) => ({
+      name: parseName(key),
+      color: value,
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .reverse();
+
+  /* Make semantic colors reference global colors */
+  const colorsWithRef = globalColorRefs(colors).reduce(
+    (old, color) => ({ [color.name]: color.color, ...old }),
+    {}
+  );
+
+  const styleDictionaryFormat = formatToStyleDictionary(colorsWithRef, "color");
+
+  writeFileSync(
+    resolve("./src/colors.json"),
+    JSON.stringify(styleDictionaryFormat, null, 2)
+  );
+};
+
+export default parseColors;

@navikt/core/tokens/figma/deepen.ts

@@ -0,0 +1,26 @@
+import unifyNestedLevel from "./unify-nested-level";
+
+const deepen = (obj: { [key: string]: { value: string } }) => {
+  const result = {};
+
+  const workObj = unifyNestedLevel(obj);
+
+  // For each object path (property key) in the object
+  for (const objectPath in workObj) {
+    // Split path into component parts
+    const parts = objectPath.split("-");
+
+    // Create sub-objects along path as needed
+    let target = result;
+    while (parts.length > 1) {
+      const part = parts.shift();
+      target = target[part] = target[part] || {};
+    }
+    // Set value at end of path
+    target[parts[0]] = workObj[objectPath];
+  }
+
+  return result;
+};
+
+export default deepen;

@navikt/core/tokens/figma/fetch.ts

@@ -0,0 +1,46 @@
+import Axios from "axios";
+const { create } = Axios;
+const dotenv = require("dotenv");
+dotenv.config();
+
+const FIGMA_FILE = "m0qpSPpsnNC9DwdmerGqJH";
+
+const FigmaAxion = (token) =>
+  create({
+    headers: {
+      "X-FIGMA-TOKEN": token,
+    },
+  });
+
+export const fetchFile = async () => {
+  const { data } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/${FIGMA_FILE}`)
+    .catch((e) => {
+      throw e;
+    });
+  return data;
+};
+
+export const fetchFileStyles = async () => {
+  const {
+    data: {
+      meta: { styles },
+    },
+  } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/${FIGMA_FILE}/styles`)
+    .catch((e) => {
+      throw e;
+    });
+  return styles;
+};
+
+export const fetchSyncDocument = async () => {
+  const {
+    data: { document },
+  } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/A7fbghTh75Hk65SieEhaKK`)
+    .catch((e) => {
+      throw e;
+    });
+  return document;
+};

@navikt/core/tokens/figma/file-styles.ts

@@ -0,0 +1,77 @@
+import { Node, DOCUMENT } from "figma-api";
+import paintToRgba from "./paint-to-rgba";
+
+interface StyleId {
+  id: string;
+  styleType: "TEXT" | "FILL";
+}
+
+const styleFieldNames = {
+  TEXT: ["text"],
+  FILL: ["fill", "fills", "stroke", "strokes"],
+};
+
+const findNodeWithStyle = (node: Node<any>, styleId: StyleId): Node<any> => {
+  if (
+    node.hasOwnProperty("styles") &&
+    styleFieldNames[styleId.styleType]?.some(
+      (name) => node.styles[name] === styleId.id
+    )
+  ) {
+    return node;
+  } else if (node.children) {
+    for (const child of node.children) {
+      const res = findNodeWithStyle(child, styleId);
+      if (res) {
+        return res;
+      }
+    }
+  }
+};
+
+const findStyleValue = (document: DOCUMENT, styleId: StyleId) => {
+  const node = findNodeWithStyle(document, styleId);
+  if (styleId.id === "5249:11258") {
+  }
+
+  switch (styleId.styleType) {
+    case "FILL":
+      if (node) {
+        if (
+          node.styles.stroke === styleId.id ||
+          node.styles.strokes === styleId.id
+        ) {
+          return paintToRgba(node.strokes[0]);
+        } else {
+          return paintToRgba(node.fills[0]);
+        }
+      } else {
+        return undefined;
+      }
+    case "TEXT":
+      if (node) {
+        return node?.style;
+      } else {
+        return undefined;
+      }
+  }
+};
+
+const styleTypeName = {
+  FILL: "colors",
+  TEXT: "textStyles",
+};
+
+const getFileStyles = (file, fileStyles) =>
+  fileStyles.reduce(
+    (styles, { node_id: id, style_type: styleType, name }) => ({
+      ...styles,
+      [styleTypeName[styleType]]: {
+        ...styles[styleTypeName[styleType]],
+        [name]: findStyleValue(file.document, { id, styleType }),
+      },
+    }),
+    {}
+  );
+
+export default getFileStyles;

@navikt/core/tokens/figma/format-sd.ts

@@ -0,0 +1,35 @@
+import deepen from "./deepen";
+
+const formatToStyleDictionary = (
+  colors: { [key: string]: string },
+  type: "color" | "spacing"
+) => {
+  switch (type) {
+    case "color": {
+      return deepen(
+        Object.entries(colors).reduce(
+          (old, [key, val]) =>
+            val.startsWith("rgba")
+              ? { ...old, [key]: { value: val } }
+              : {
+                  ...old,
+                  [key]: { value: `{${val.replace(/-/g, ".")}.value}` },
+                },
+          {}
+        )
+      );
+    }
+    case "spacing": {
+      return deepen(
+        Object.entries(colors).reduce(
+          (old, [key, val]) => ({ ...old, [key]: { value: val } }),
+          {}
+        )
+      );
+    }
+    default:
+      return {};
+  }
+};
+
+export default formatToStyleDictionary;

@navikt/core/tokens/figma/global-color-ref.ts

@@ -0,0 +1,21 @@
+import Color from "color";
+
+export type ColorT = {
+  name: string;
+  color: string;
+};
+
+const globalColorRefs = (colors: ColorT[]) => {
+  const globalColors = colors.filter((c) => c.name.includes("-global-"));
+
+  return colors.map((c) => {
+    if (c.name.includes("-global-")) return c;
+
+    const globalColor = globalColors.find(
+      (g) => Color(g.color).string() === Color(c.color).string()
+    );
+    return globalColor ? { name: c.name, color: globalColor.name } : c;
+  });
+};
+
+export default globalColorRefs;

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

@@ -0,0 +1,28 @@
+import dotenv from "dotenv";
+import parseColors from "./colors";
+import getFileStyles from "./file-styles";
+import { fetchFile, fetchFileStyles, fetchSyncDocument } from "./fetch";
+/* import Spacing from "./spacing"; */
+
+dotenv.config();
+
+const main = async () => {
+  await Promise.all([fetchFile(), fetchFileStyles(), fetchSyncDocument()])
+    .then(([file, styles, document]) => {
+      const parsedStyles = getFileStyles(file, styles);
+      parsedStyles.colors && parseColors(parsedStyles.colors);
+
+      // TODO: Get spacing by crawling like with colors
+      /* Spacing(document); */
+    })
+    .catch((e) => {
+      console.log("Failed fetching styles and file from figma");
+      throw e;
+    });
+};
+
+try {
+  main();
+} catch (e) {
+  console.error(e.message);
+}

@navikt/core/tokens/figma/paint-to-rgba.ts

@@ -0,0 +1,11 @@
+import { Paint } from "figma-api";
+
+const parseColor = ({ color, opacity }: Paint) => {
+  return `rgba(${Math.round(color.r * 255)}, ${Math.round(
+    color.g * 255
+  )}, ${Math.round(color.b * 255)}, ${
+    opacity !== undefined ? Math.round(opacity * 100) / 100 : 1
+  })`;
+};
+
+export default parseColor;

@navikt/core/tokens/figma/parse-name.ts

@@ -0,0 +1,6 @@
+const parseName = (name: string) => {
+  const [scope, ...rest] = name.toLowerCase().split("/");
+  return `navds-${scope}-color-${rest.join("-")}`;
+};
+
+export default parseName;

@navikt/core/tokens/figma/spacing.ts

@@ -0,0 +1,47 @@
+import { CANVAS, DOCUMENT, FRAME, RECTANGLE } from "figma-api";
+import formatToStyleDictionary from "./format-sd";
+import { writeFileSync } from "fs";
+import { resolve } from "path";
+
+const Spacing = (document: DOCUMENT) => {
+  console.log("Updating spacing-tokens");
+
+  const spacingPage = document.children.find(
+    (c) => c.name === "Spacing"
+  ) as CANVAS;
+
+  if (!spacingPage) {
+    throw new Error("Could not find spacing-page in document");
+  }
+
+  const spacingFrame = spacingPage.children.find(
+    (x) => x.name === "spacing"
+  ) as FRAME;
+
+  if (!spacingFrame) {
+    throw new Error("Could not find spacing-frame in document");
+  }
+
+  const spaces = spacingFrame.children
+    .filter((x) => x.type === "RECTANGLE" && x.name.startsWith("spacing-"))
+    .reduce(
+      (old, space) => ({
+        ...old,
+        [`navds-${space.name}`]: `${
+          (space as RECTANGLE).absoluteBoundingBox.width / 16
+        }rem`,
+      }),
+      {}
+    );
+
+  const styleDictionaryFormat = formatToStyleDictionary(spaces, "spacing");
+
+  writeFileSync(
+    resolve("./src/spacing.json"),
+    JSON.stringify(styleDictionaryFormat, null, 2)
+  );
+
+  console.log("Finished updating spacing-tokens\n");
+};
+
+export default Spacing;

@navikt/core/tokens/figma/tests/deepen.test.ts

@@ -0,0 +1,53 @@
+import deepen from "../deepen";
+
+describe("Check deepen parsing of key name", () => {
+  test("Convert spacing", () => {
+    expect(
+      deepen({
+        "navds-spacing-1": { value: "0.25rem" },
+        "navds-spacing-2": { value: "0.50rem" },
+        "navds-spacing-3": { value: "0.75rem" },
+      })
+    ).toEqual({
+      navds: {
+        spacing: {
+          "1": { value: "0.25rem" },
+          "2": { value: "0.50rem" },
+          "3": { value: "0.75rem" },
+        },
+      },
+    });
+  });
+
+  test("Convert colors", () => {
+    expect(
+      deepen({
+        "navds-global-color-red-100": { value: "rbga(0,1,0,0)" },
+        "navds-global-color-green-100": { value: "rbga(0,4,0,0)" },
+        "navds-global-color-green-200": { value: "rbga(0,5,0,0)" },
+        "navds-semantic-color-border": { value: "rbga(0,10,0,0)" },
+        "navds-semantic-color-background": { value: "rbga(0,11,0,0)" },
+      })
+    ).toEqual({
+      navds: {
+        global: {
+          color: {
+            red: {
+              "100": { value: "rbga(0,1,0,0)" },
+            },
+            green: {
+              "100": { value: "rbga(0,4,0,0)" },
+              "200": { value: "rbga(0,5,0,0)" },
+            },
+          },
+        },
+        semantic: {
+          color: {
+            border: { value: "rbga(0,10,0,0)" },
+            background: { value: "rbga(0,11,0,0)" },
+          },
+        },
+      },
+    });
+  });
+});

@navikt/core/tokens/figma/tests/file-styles.json

@@ -0,0 +1,87 @@
+[
+  {
+    "key": "018d5d2a8b92f9da2994e341b2e3b001a8822f3f",
+    "file_key": "0mfgBpI1SEf32yYXo5efgf",
+    "node_id": "1:5",
+    "style_type": "TEXT",
+    "thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/vzj/ib4/z0B6PeiKmHxp5c6U/style_thumbnail_4.png?Expires=1636329600&Signature=UHMortZ3iu3smP3gjEZD9GdqIoADlILTQmP0AhrpcxwiN5S6GOBR9IcsWGqF6MvRxgZoqn5OctEM0GAC86QK2ed88j1u~bunEcbjK7-GPOiZJzxZ0~DkFOQpYyBQVqm~vTSXcOaWKHldJlrKXz4fUxeIeklygu~N7d1if5P1id9iikHrMODwiM6SMCjn09nwlXClVYAdzrt-F-o0J9fZ6nu9Vu7eKt-lKvisAQFbit7pqnUtZ9n0IEZLNFRIbWhIN~6hIvwCNhd0lquNFs4RAgWbMEwe7cOdMpzPUM~Vw4z1ChhUYkDrcDjkxuBfIpHyUj2FCQUqHomoCgHNpw97QQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+    "name": "test-text-style",
+    "description": "",
+    "created_at": "2021-10-26T17:18:57.283Z",
+    "updated_at": "2021-10-26T17:18:57.283Z",
+    "user": {
+      "id": "872810555172448100",
+      "handle": "Andreas Nordahl",
+      "img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
+    },
+    "sort_position": "!"
+  },
+  {
+    "key": "214a0ef007dee7ac3c1a8a0ec646ff157d730411",
+    "file_key": "0mfgBpI1SEf32yYXo5efgf",
+    "node_id": "1:3",
+    "style_type": "FILL",
+    "thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/12q/5sp/wUcwiMEw4aN4noCs/style_thumbnail_3.png?Expires=1636329600&Signature=Z~1e2~wSQh2zWxf4pv1Z-vNsdYJVYa92vfuSwRlyOYlZGbtiSNN7MbyAFIrdcOicw1MJ-D8cJUT-nifAiD3BVQah9l~A3w~qHEhqgkKy5IP7-f34NX-MxnmxSGg4H5bWLvjGj4sa8SaqsWdugyteV0RejV0--qJCpRSoDdG0aMNa8hiehoxtJGSr8wCTCVENRb0fXAlYHtJDSbW9Ddok-LAUBdlXP0gO44MNKCuL~LQ9yz-MntiT5FGgq1bmA3e530l86cRnG9Ravgl~vgozJN7D4eF~msgH7l8T3S7SLXgy7ZpAmZ81eYYl2F2eqxlVHOAQu5s15f1L1kNjHmhfxg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+    "name": "test-color-style",
+    "description": "",
+    "created_at": "2021-10-26T17:18:57.279Z",
+    "updated_at": "2021-10-26T17:18:57.279Z",
+    "user": {
+      "id": "872810555172448100",
+      "handle": "Andreas Nordahl",
+      "img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
+    },
+    "sort_position": "\""
+  },
+  {
+    "key": "b5548b234042939980688e7130cccc5e33f717e8",
+    "file_key": "0mfgBpI1SEf32yYXo5efgf",
+    "node_id": "2:6",
+    "style_type": "FILL",
+    "thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/kyd/RB9/NkuKodQ2JxOFJAvH/style_thumbnail_2.png?Expires=1636329600&Signature=V1BXHDoHkAIBg-V1KpQzQhFPqO5nSVjJyZY7WOTigBynJ7jlf7QGxzJoefOEUHPKOVgtEs-9qXPABp9REBQ2kWXq21D08313VPkCBFDpXil1FHOW4bS1ogoFw4lZKQppHVNcNWnAxcm9Kt2NyiM1egR-SJX47r9W6v0ydIyvbOtvSds04nugHuEt-L3EC2NPx0TWAFlF-YO3Mqfn8PxikFwuFTQNPlrtiLxs~vcDtdfXiQvhs1McHFC6EhuTho0MJR25RPel1bwzhaOkqKB9IXvccjOx7d-BDcs8jty8cccbNimNO2CPJ5Bf4GuUqF2pDA5QHj9xr98aaVk-yepy8A__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+    "name": "red-see-through",
+    "description": "",
+    "created_at": "2021-10-26T17:18:57.276Z",
+    "updated_at": "2021-10-26T17:18:57.276Z",
+    "user": {
+      "id": "872810555172448100",
+      "handle": "Andreas Nordahl",
+      "img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
+    },
+    "sort_position": "#"
+  },
+  {
+    "key": "e2b9eb27b48ecfddb46430c578e26f9c3a4fe164",
+    "file_key": "0mfgBpI1SEf32yYXo5efgf",
+    "node_id": "3:12",
+    "style_type": "FILL",
+    "thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/SCW/gWi/dNc5At7iWR4CmFxB/style_thumbnail_1.png?Expires=1636329600&Signature=RqsSEZMyvH-h6~X~xBL2Y4R0gnASnbXBHswjxGdqsx1YhBXkixKBO~--zG4TX-OT5cp4BXigXkHYvpd6AWazBuPdnAoN45MgZwv~qz8pgfRcRzUtJCtxnTzaKUQiLkR1Ln5AISUX7efr9KqVN4aDiagaZUXbVfyA7lnDVNbWPe6WN9f80DaIy5N6C4-lcpJWCWGCuLVkKAvI~ZI0L5qz6zJhpnQ~Rig0jn7gMidAQ92P6RvC4KTJREhCBYxPa4m1zsQg43wE4VGk75t-sWTs2On7j4k7754FRfmv1dHkGWuqk5MRaYaWOm8JzR1T2ln2pJYQzlz5wIhfPBtlMkptKA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+    "name": "stroke-color-style",
+    "description": "",
+    "created_at": "2021-10-26T17:18:57.272Z",
+    "updated_at": "2021-10-26T17:18:57.272Z",
+    "user": {
+      "id": "872810555172448100",
+      "handle": "Andreas Nordahl",
+      "img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
+    },
+    "sort_position": "$"
+  },
+  {
+    "key": "13e8bd3685daaeb73693d308b56f35b98e99e643",
+    "file_key": "0mfgBpI1SEf32yYXo5efgf",
+    "node_id": "3:15",
+    "style_type": "FILL",
+    "thumbnail_url": "https://s3-alpha-sig.figma.com/checkpoints/dNp/kEC/VltRP5wczk9nIaJx/style_thumbnail_0.png?Expires=1636329600&Signature=c~j1TRW0Wvxn-ZZkNzk1NJQeymLJ3BJ5qvh~t8Cy8vwYLgxwVz0tz6LomPlwcNmx3xfv6TetosqudMzawSKbd3VBsRfACE84u4TNY7kTBsFkUkeI8JM~00g4LZJC9ESqB4VWIXcK1w0l6tAMdjHtJ8SRER9yF~t7N2sqebq4hOiuwTT1ZcpxpGhnAdRJGJfQt1kxbniryjWQfiadXLEIrHw25pEX0VbFJ2EAn9IL3Jhl2d49TBSE2MEZ5ht-1qU6m9Lnj1Hex3sU-EiS8DhDAeb~twtE7mGiPlXoXRSFUcpkB4EPS5wOa4D4wpq8G85MW3XlpNH08s6N5qG1x66-BQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+    "name": "stroke-color-style-2",
+    "description": "",
+    "created_at": "2021-10-26T17:18:57.267Z",
+    "updated_at": "2021-10-26T17:18:57.267Z",
+    "user": {
+      "id": "872810555172448100",
+      "handle": "Andreas Nordahl",
+      "img_url": "https://s3-alpha.figma.com/profile/544b7720-21c4-4170-b043-db1d569dfd87"
+    },
+    "sort_position": "%"
+  }
+]

@navikt/core/tokens/figma/tests/file-styles.test.ts

@@ -0,0 +1,30 @@
+import file from "./file.json";
+import fileStyles from "./file-styles.json";
+import getFileStyles from "../file-styles";
+
+test("get file styles", () => {
+  expect(getFileStyles(file, fileStyles)).toEqual({
+    colors: {
+      "test-color-style": "rgba(196, 196, 196, 1)",
+      "stroke-color-style": "rgba(84, 138, 83, 1)",
+      "stroke-color-style-2": "rgba(133, 111, 195, 0.69)",
+      "red-see-through": "rgba(219, 16, 16, 0.33)",
+    },
+    textStyles: {
+      "test-text-style": {
+        fontFamily: "Roboto",
+        fontPostScriptName: null,
+        fontWeight: 400,
+        textAutoResize: "WIDTH_AND_HEIGHT",
+        fontSize: 12,
+        textAlignHorizontal: "LEFT",
+        textAlignVertical: "TOP",
+        letterSpacing: 0,
+        lineHeightPx: 20,
+        lineHeightPercent: 142.22222900390625,
+        lineHeightPercentFontSize: 166.6666717529297,
+        lineHeightUnit: "PIXELS",
+      },
+    },
+  });
+});

@navikt/core/tokens/figma/tests/file.json

@@ -0,0 +1,472 @@
+{
+  "document": {
+    "id": "0:0",
+    "name": "Document",
+    "type": "DOCUMENT",
+    "children": [
+      {
+        "id": "0:1",
+        "name": "Page 1",
+        "type": "CANVAS",
+        "children": [
+          {
+            "id": "1:2",
+            "name": "Rectangle 1",
+            "type": "RECTANGLE",
+            "blendMode": "PASS_THROUGH",
+            "absoluteBoundingBox": {
+              "x": -208,
+              "y": -113,
+              "width": 219,
+              "height": 119
+            },
+            "constraints": {
+              "vertical": "TOP",
+              "horizontal": "LEFT"
+            },
+            "fills": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 0.7686274647712708,
+                  "g": 0.7686274647712708,
+                  "b": 0.7686274647712708,
+                  "a": 1
+                }
+              }
+            ],
+            "strokes": [],
+            "strokeWeight": 1,
+            "strokeAlign": "INSIDE",
+            "styles": {
+              "fills": "1:3"
+            },
+            "effects": []
+          },
+          {
+            "id": "1:4",
+            "name": "A Text",
+            "type": "TEXT",
+            "blendMode": "PASS_THROUGH",
+            "absoluteBoundingBox": {
+              "x": -224,
+              "y": 170,
+              "width": 34,
+              "height": 20
+            },
+            "constraints": {
+              "vertical": "TOP",
+              "horizontal": "LEFT"
+            },
+            "fills": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 0,
+                  "g": 0,
+                  "b": 0,
+                  "a": 1
+                }
+              }
+            ],
+            "strokes": [],
+            "strokeWeight": 1,
+            "strokeAlign": "OUTSIDE",
+            "effects": [],
+            "characters": "A Text",
+            "style": {
+              "fontFamily": "Roboto",
+              "fontPostScriptName": null,
+              "fontWeight": 400,
+              "textAutoResize": "WIDTH_AND_HEIGHT",
+              "fontSize": 12,
+              "textAlignHorizontal": "LEFT",
+              "textAlignVertical": "TOP",
+              "letterSpacing": 0,
+              "lineHeightPx": 20,
+              "lineHeightPercent": 142.22222900390625,
+              "lineHeightPercentFontSize": 166.6666717529297,
+              "lineHeightUnit": "PIXELS"
+            },
+            "layoutVersion": 3,
+            "characterStyleOverrides": [],
+            "styleOverrideTable": {},
+            "styles": {
+              "text": "1:5"
+            }
+          },
+          {
+            "id": "3:14",
+            "name": "Frame 1",
+            "type": "FRAME",
+            "blendMode": "PASS_THROUGH",
+            "children": [
+              {
+                "id": "3:13",
+                "name": "Rectangle 2",
+                "type": "RECTANGLE",
+                "blendMode": "PASS_THROUGH",
+                "absoluteBoundingBox": {
+                  "x": 58,
+                  "y": 360,
+                  "width": 257,
+                  "height": 166
+                },
+                "constraints": {
+                  "vertical": "TOP",
+                  "horizontal": "LEFT"
+                },
+                "fills": [
+                  {
+                    "blendMode": "NORMAL",
+                    "type": "SOLID",
+                    "color": {
+                      "r": 0.7686274647712708,
+                      "g": 0.7686274647712708,
+                      "b": 0.7686274647712708,
+                      "a": 1
+                    }
+                  }
+                ],
+                "strokes": [
+                  {
+                    "opacity": 0.6899999976158142,
+                    "blendMode": "NORMAL",
+                    "type": "SOLID",
+                    "color": {
+                      "r": 0.5208221077919006,
+                      "g": 0.4344444274902344,
+                      "b": 0.7666666507720947,
+                      "a": 1
+                    }
+                  }
+                ],
+                "strokeWeight": 1,
+                "strokeAlign": "INSIDE",
+                "styles": {
+                  "stroke": "3:15"
+                },
+                "effects": []
+              }
+            ],
+            "absoluteBoundingBox": {
+              "x": -149,
+              "y": 310,
+              "width": 502,
+              "height": 401
+            },
+            "constraints": {
+              "vertical": "TOP",
+              "horizontal": "LEFT"
+            },
+            "clipsContent": true,
+            "background": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 1,
+                  "g": 1,
+                  "b": 1,
+                  "a": 1
+                }
+              }
+            ],
+            "fills": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 1,
+                  "g": 1,
+                  "b": 1,
+                  "a": 1
+                }
+              }
+            ],
+            "strokes": [],
+            "strokeWeight": 1,
+            "strokeAlign": "INSIDE",
+            "backgroundColor": {
+              "r": 1,
+              "g": 1,
+              "b": 1,
+              "a": 1
+            },
+            "effects": []
+          }
+        ],
+        "backgroundColor": {
+          "r": 0.8980392217636108,
+          "g": 0.8980392217636108,
+          "b": 0.8980392217636108,
+          "a": 1
+        },
+        "prototypeStartNodeID": null,
+        "flowStartingPoints": [],
+        "prototypeDevice": {
+          "type": "NONE",
+          "rotation": "NONE"
+        }
+      },
+      {
+        "id": "2:7",
+        "name": "Page 2",
+        "type": "CANVAS",
+        "children": [
+          {
+            "id": "2:8",
+            "name": "Frame 1",
+            "type": "FRAME",
+            "blendMode": "PASS_THROUGH",
+            "children": [
+              {
+                "id": "2:9",
+                "name": "Group 1",
+                "type": "GROUP",
+                "blendMode": "PASS_THROUGH",
+                "children": [
+                  {
+                    "id": "2:10",
+                    "name": "Rectangle 2",
+                    "type": "RECTANGLE",
+                    "blendMode": "PASS_THROUGH",
+                    "absoluteBoundingBox": {
+                      "x": -137,
+                      "y": -79,
+                      "width": 219,
+                      "height": 119
+                    },
+                    "constraints": {
+                      "vertical": "TOP",
+                      "horizontal": "LEFT"
+                    },
+                    "fills": [
+                      {
+                        "opacity": 0.33000001311302185,
+                        "blendMode": "NORMAL",
+                        "type": "SOLID",
+                        "color": {
+                          "r": 0.8583333492279053,
+                          "g": 0.060798585414886475,
+                          "b": 0.060798585414886475,
+                          "a": 1
+                        }
+                      }
+                    ],
+                    "strokes": [
+                      {
+                        "blendMode": "NORMAL",
+                        "type": "SOLID",
+                        "color": {
+                          "r": 0.3293333053588867,
+                          "g": 0.5416666865348816,
+                          "b": 0.32499998807907104,
+                          "a": 1
+                        }
+                      }
+                    ],
+                    "strokeWeight": 1,
+                    "strokeAlign": "INSIDE",
+                    "styles": {
+                      "fill": "2:6"
+                    },
+                    "effects": []
+                  },
+                  {
+                    "id": "2:11",
+                    "name": "A Text",
+                    "type": "TEXT",
+                    "blendMode": "PASS_THROUGH",
+                    "absoluteBoundingBox": {
+                      "x": -72,
+                      "y": -26,
+                      "width": 34,
+                      "height": 20
+                    },
+                    "constraints": {
+                      "vertical": "TOP",
+                      "horizontal": "LEFT"
+                    },
+                    "fills": [
+                      {
+                        "blendMode": "NORMAL",
+                        "type": "SOLID",
+                        "color": {
+                          "r": 0,
+                          "g": 0,
+                          "b": 0,
+                          "a": 1
+                        }
+                      }
+                    ],
+                    "strokes": [
+                      {
+                        "blendMode": "NORMAL",
+                        "type": "SOLID",
+                        "color": {
+                          "r": 0.3293333053588867,
+                          "g": 0.5416666865348816,
+                          "b": 0.32499998807907104,
+                          "a": 1
+                        }
+                      }
+                    ],
+                    "strokeWeight": 1,
+                    "strokeAlign": "OUTSIDE",
+                    "styles": {
+                      "strokes": "3:12",
+                      "text": "1:5"
+                    },
+                    "effects": [],
+                    "characters": "A Text",
+                    "style": {
+                      "fontFamily": "Roboto",
+                      "fontPostScriptName": null,
+                      "fontWeight": 400,
+                      "textAutoResize": "WIDTH_AND_HEIGHT",
+                      "fontSize": 12,
+                      "textAlignHorizontal": "LEFT",
+                      "textAlignVertical": "TOP",
+                      "letterSpacing": 0,
+                      "lineHeightPx": 20,
+                      "lineHeightPercent": 142.22222900390625,
+                      "lineHeightPercentFontSize": 166.6666717529297,
+                      "lineHeightUnit": "PIXELS"
+                    },
+                    "layoutVersion": 3,
+                    "characterStyleOverrides": [],
+                    "styleOverrideTable": {}
+                  }
+                ],
+                "absoluteBoundingBox": {
+                  "x": -137,
+                  "y": -79,
+                  "width": 219,
+                  "height": 119
+                },
+                "constraints": {
+                  "vertical": "TOP",
+                  "horizontal": "LEFT"
+                },
+                "clipsContent": false,
+                "background": [],
+                "fills": [],
+                "strokes": [],
+                "strokeWeight": 1,
+                "strokeAlign": "INSIDE",
+                "backgroundColor": {
+                  "r": 0,
+                  "g": 0,
+                  "b": 0,
+                  "a": 0
+                },
+                "effects": []
+              }
+            ],
+            "absoluteBoundingBox": {
+              "x": -228,
+              "y": -170,
+              "width": 455,
+              "height": 338
+            },
+            "constraints": {
+              "vertical": "TOP",
+              "horizontal": "LEFT"
+            },
+            "clipsContent": true,
+            "background": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 1,
+                  "g": 1,
+                  "b": 1,
+                  "a": 1
+                }
+              }
+            ],
+            "fills": [
+              {
+                "blendMode": "NORMAL",
+                "type": "SOLID",
+                "color": {
+                  "r": 1,
+                  "g": 1,
+                  "b": 1,
+                  "a": 1
+                }
+              }
+            ],
+            "strokes": [],
+            "strokeWeight": 1,
+            "strokeAlign": "INSIDE",
+            "backgroundColor": {
+              "r": 1,
+              "g": 1,
+              "b": 1,
+              "a": 1
+            },
+            "effects": []
+          }
+        ],
+        "backgroundColor": {
+          "r": 0.8980392217636108,
+          "g": 0.8980392217636108,
+          "b": 0.8980392217636108,
+          "a": 1
+        },
+        "prototypeStartNodeID": null,
+        "flowStartingPoints": [],
+        "prototypeDevice": {
+          "type": "NONE",
+          "rotation": "NONE"
+        }
+      }
+    ]
+  },
+  "components": {},
+  "componentSets": {},
+  "schemaVersion": 0,
+  "styles": {
+    "1:3": {
+      "key": "214a0ef007dee7ac3c1a8a0ec646ff157d730411",
+      "name": "test-color-style",
+      "styleType": "FILL",
+      "description": ""
+    },
+    "1:5": {
+      "key": "018d5d2a8b92f9da2994e341b2e3b001a8822f3f",
+      "name": "test-text-style",
+      "styleType": "TEXT",
+      "description": ""
+    },
+    "3:15": {
+      "key": "13e8bd3685daaeb73693d308b56f35b98e99e643",
+      "name": "stroke-color-style-2",
+      "styleType": "FILL",
+      "description": ""
+    },
+    "2:6": {
+      "key": "b5548b234042939980688e7130cccc5e33f717e8",
+      "name": "red-see-through",
+      "styleType": "FILL",
+      "description": ""
+    },
+    "3:12": {
+      "key": "e2b9eb27b48ecfddb46430c578e26f9c3a4fe164",
+      "name": "stroke-color-style",
+      "styleType": "FILL",
+      "description": ""
+    }
+  },
+  "name": "Untitled",
+  "lastModified": "2021-10-25T14:11:38Z",
+  "thumbnailUrl": "https://s3-alpha-sig.figma.com/thumbnails/0mfgBpI1SEf32yYXo5efgf/default?Expires=1636329600&Signature=UTYTy-IQUHP7nzFXJCQoB9ORcA3L0766gsczI2Il~zEcp1XMqZR6AkFCFJA0PSx-nmT3xkkS~wkEbWyK5--ncek6qZsGwA48GPcLf9NH4iViXg7noQFFrEauFYHihs2MJDuRo3YkLo6l5XTbtgJW2lKiP1yqNre91V9IMCyOsW1al-WaBALacZYYO2NOwV76URr8VCeUWhGwfTZcyj6bra40Arx-cw7gv2j3Zuz~c9CiRz42J9gNJpM2Xl2zPp6teEwvNUCMWvoiclcyTPm3g3mSXc5kQeSBTNNTpk46YEQP~XmHUXMu4d~s66d~3xXATV~QrWjAJ7lZQVYz7VBgSA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+  "version": "1235987453",
+  "role": "owner",
+  "editorType": "figma"
+}

@navikt/core/tokens/figma/tests/format-sd.test.ts

@@ -0,0 +1,71 @@
+import formatToStyledDictionary from "../format-sd";
+
+describe("Check conversion to Styled-dictionary format", () => {
+  test("Converting colors", () => {
+    expect(
+      JSON.stringify(
+        formatToStyledDictionary(
+          {
+            "navds-global-color-red-500": "rgba(1,1,1,1)",
+            "navds-global-color-red-400": "rgba(1,2,1,1)",
+            "navds-global-color-red-300": "rgba(1,3,1,1)",
+            "navds-semantic-color-danger": "navds-global-color-red-400",
+            "navds-semantic-color-danger-hover": "navds-global-color-red-300",
+          },
+          "color"
+        )
+      )
+    ).toBe(
+      JSON.stringify({
+        navds: {
+          global: {
+            color: {
+              red: {
+                "500": { value: "rgba(1,1,1,1)" },
+                "400": { value: "rgba(1,2,1,1)" },
+                "300": { value: "rgba(1,3,1,1)" },
+              },
+            },
+          },
+          semantic: {
+            color: {
+              danger: {
+                hover: {
+                  value: "{navds.global.color.red.300.value}",
+                },
+                "@": { value: "{navds.global.color.red.400.value}" },
+              },
+            },
+          },
+        },
+      })
+    );
+  });
+
+  test("Converting spacing", () => {
+    expect(
+      JSON.stringify(
+        formatToStyledDictionary(
+          {
+            "navds-spacing-1": "0.25rem",
+            "navds-spacing-2": "0.5rem",
+            "navds-spacing-3": "0.75rem",
+            "navds-spacing-4": "1rem",
+          },
+          "spacing"
+        )
+      )
+    ).toBe(
+      JSON.stringify({
+        navds: {
+          spacing: {
+            "1": { value: "0.25rem" },
+            "2": { value: "0.5rem" },
+            "3": { value: "0.75rem" },
+            "4": { value: "1rem" },
+          },
+        },
+      })
+    );
+  });
+});

@navikt/core/tokens/figma/tests/global-color-ref.test.ts

@@ -0,0 +1,25 @@
+import globalColorRefs from "../global-color-ref";
+
+test("Global color refs", () => {
+  let colors = [
+    { name: "navds-global-color-red-400", color: "#D05C4A" },
+    { name: "navds-global-color-red-500", color: "#BA3A26" },
+    { name: "navds-semantic-color-error", color: "#D05C4A" },
+    { name: "navds-semantic-color-hover", color: "#BA3A26" },
+    { name: "navds-semantic-color-noref", color: "#AAAAAA" },
+  ];
+
+  let parsedColors = [
+    { name: "navds-global-color-red-400", color: "#D05C4A" },
+    { name: "navds-global-color-red-500", color: "#BA3A26" },
+    { name: "navds-semantic-color-error", color: "navds-global-color-red-400" },
+    { name: "navds-semantic-color-hover", color: "navds-global-color-red-500" },
+    { name: "navds-semantic-color-noref", color: "#AAAAAA" },
+  ];
+
+  const newColors = globalColorRefs(colors);
+
+  expect(JSON.stringify(newColors, null, 2)).toBe(
+    JSON.stringify(parsedColors, null, 2)
+  );
+});

@navikt/core/tokens/figma/tests/paint-to-rgba.test.ts

@@ -0,0 +1,62 @@
+import { PaintType } from "figma-api";
+import paintToRgba from "../paint-to-rgba";
+
+describe("parse-color", () => {
+  test("white", () => {
+    expect(
+      paintToRgba({
+        type: PaintType.SOLID,
+        color: {
+          r: 1,
+          g: 1,
+          b: 1,
+          a: 1,
+        },
+      })
+    ).toBe("rgba(255, 255, 255, 1)");
+  });
+
+  test("gray", () => {
+    expect(
+      paintToRgba({
+        type: PaintType.SOLID,
+        color: {
+          r: 0.9725490212440491,
+          g: 0.9725490212440491,
+          b: 0.9725490212440491,
+          a: 1,
+        },
+      })
+    ).toBe("rgba(248, 248, 248, 1)");
+  });
+
+  test("transparent", () => {
+    expect(
+      paintToRgba({
+        type: PaintType.SOLID,
+        color: {
+          r: 1,
+          g: 1,
+          b: 1,
+          a: 1,
+        },
+        opacity: 0,
+      })
+    ).toBe("rgba(255, 255, 255, 0)");
+  });
+
+  test("partly transparent", () => {
+    expect(
+      paintToRgba({
+        type: PaintType.SOLID,
+        color: {
+          r: 0.5208221077919006,
+          g: 0.4344444274902344,
+          b: 0.7666666507720947,
+          a: 1,
+        },
+        opacity: 0.6899999976158142,
+      })
+    ).toBe("rgba(133, 111, 195, 0.69)");
+  });
+});

@navikt/core/tokens/figma/tests/parse-name.test.ts

@@ -0,0 +1,12 @@
+import parseName from "../parse-name";
+
+test("parse-name", () => {
+  new Map([
+    ["Global/blue-500", "navds-global-color-blue-500"],
+    ["Global/red-100", "navds-global-color-red-100"],
+    [
+      "Semantic/Interaction/primary-hover",
+      "navds-semantic-color-interaction-primary-hover",
+    ],
+  ]).forEach((value, key) => expect(parseName(key)).toBe(value));
+});

@navikt/core/tokens/figma/tests/unify-nested-level.test.ts

@@ -0,0 +1,43 @@
+import unifyNestedLevel from "../unify-nested-level";
+
+describe("Check unifying of nested levels", () => {
+  test("Check color nesting", () => {
+    const obj = {
+      "navds-global-color-green-50": { value: "rbga(0,1,0,0)" },
+      "navds-global-color-green-500": { value: "rbga(0,2,0,0)" },
+      "navds-semantic-color-primary-hover": {
+        value: "rbga(0,3,0,0)",
+      },
+      "navds-semantic-color-primary-hover-subtle": {
+        value: "rbga(0,4,0,0)",
+      },
+      "navds-semantic-color-danger": { value: "rbga(0,5,0,0)" },
+      "navds-semantic-color-danger-hover": {
+        value: "rbga(0,6,0,0)",
+      },
+      "navds-semantic-color-danger-hover-subtle": {
+        value: "rbga(0,7,0,0)",
+      },
+    };
+
+    const newObj = unifyNestedLevel(obj);
+
+    expect(newObj).toEqual({
+      "navds-global-color-green-50": { value: "rbga(0,1,0,0)" },
+      "navds-global-color-green-500": { value: "rbga(0,2,0,0)" },
+      "navds-semantic-color-primary-hover-@": {
+        value: "rbga(0,3,0,0)",
+      },
+      "navds-semantic-color-primary-hover-subtle": {
+        value: "rbga(0,4,0,0)",
+      },
+      "navds-semantic-color-danger-@-@": { value: "rbga(0,5,0,0)" },
+      "navds-semantic-color-danger-hover-@": {
+        value: "rbga(0,6,0,0)",
+      },
+      "navds-semantic-color-danger-hover-subtle": {
+        value: "rbga(0,7,0,0)",
+      },
+    });
+  });
+});

@navikt/core/tokens/figma/unify-nested-level.ts

@@ -0,0 +1,22 @@
+const unifyNestedLevel = (obj: { [key: string]: { value: string } }) => {
+  // deep copy
+  const workObj = JSON.parse(JSON.stringify(obj));
+
+  Object.keys(workObj).forEach((k) => {
+    const deeperKeys = Object.keys(workObj).filter(
+      (k2) => k2.startsWith(`${k}-`) && k2.length > k.length
+    );
+    if (deeperKeys.length > 0) {
+      const neededNestedLevel =
+        Math.max(...deeperKeys.map((k) => k.split("-").length)) -
+        k.split("-").length;
+
+      delete Object.assign(workObj, {
+        [k + "-@".repeat(neededNestedLevel)]: workObj[k],
+      })[k];
+    }
+  });
+  return workObj;
+};
+
+export default unifyNestedLevel;