Lerna versionbump [ci skip]

- @navikt/ds-css@0.12.1

.github/workflows/pr-storybook.yml

@@ -0,0 +1,37 @@
+name: Publish storybook to vercel
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+  workflow_dispatch:
+
+jobs:
+  dev:
+    runs-on: ubuntu-latest
+    if: github.event_name != 'push'
+    steps:
+      - uses: actions/checkout@v2
+      - uses: amondnet/vercel-action@v20
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
+          github-token: ${{ secrets.GITHUB_TOKEN }} #Optional
+          vercel-org-id: ${{ secrets.ORG_ID}} #Required
+          vercel-project-id: ${{ secrets.PROJECT_ID}} #Required
+          working-directory: ./
+          alias-domains: |
+            nav-ds-pr-${{github.event.number}}-kenajoh.vercel.app
+  prod:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push'
+    steps:
+      - uses: actions/checkout@v2
+      - uses: amondnet/vercel-action@v20
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
+          github-token: ${{ secrets.GITHUB_TOKEN }} #Optional
+          vercel-args: "--prod" #Optional
+          vercel-org-id: ${{ secrets.ORG_ID}} #Required
+          vercel-project-id: ${{ secrets.PROJECT_ID}} #Required
+          working-directory: ./

.gitignore

@@ -115,4 +115,5 @@ utilities/**/css
 react-docgen.json
 react-docgen-docs.json
 cjs
-esm
+esm
+.vercel

.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

@@ -23,12 +23,12 @@ html {
 body {
   font-family: var(--navds-font-family);
   line-height: 1.333;
-  color: var(--navds-color-text-primary);
+  color: var(--navds-semantic-color-text);
   font-size: 1.125rem;
 }
 
 a {
-  color: var(--navds-color-text-link);
+  color: var(--navds-semantic-color-link);
 }
 
 /* https://web.dev/prefers-reduced-motion/ */

@navikt/core/css/button.css

@@ -1,53 +1,79 @@
 :root {
   /* Primary */
-  --navds-button-color-primary-text: var(--navds-color-white);
-  --navds-button-color-primary-border-focus: var(--navds-color-white);
-  --navds-button-color-primary-background: var(--navds-color-action-default);
+  --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
+  --navds-button-color-primary-border-focus: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-primary-background: var(
+    --navds-semantic-color-interaction-primary
+  );
   --navds-button-color-primary-background-hover: var(
-    --navds-color-action-hover
+    --navds-semantic-color-interaction-primary-hover
   );
   --navds-button-color-primary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
   );
 
   /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-color-action-default);
-  --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-border: var(--navds-color-action-default);
+  --navds-button-color-secondary-text: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-secondary-text-hover: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-secondary-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-secondary-border: var(
+    --navds-semantic-color-interaction-primary
+  );
   --navds-button-color-secondary-border-focus-active-hover: var(
-    --navds-color-white
+    --navds-semantic-color-component-background-light
+  );
+  --navds-button-color-secondary-background: var(
+    --navds-semantic-color-component-background-light
   );
-  --navds-button-color-secondary-background: var(--navds-color-background);
   --navds-button-color-secondary-background-hover: var(
-    --navds-color-action-hover
+    --navds-semantic-color-interaction-primary-hover
   );
   --navds-button-color-secondary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
   );
 
   /* Tertiary */
-  --navds-button-color-tertiary-text: var(--navds-color-action-default);
-  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
-  --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
-  --navds-button-color-tertiary-border-active: var(--navds-color-white);
+  --navds-button-color-tertiary-text: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-tertiary-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-border-focus: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-border-active: var(
+    --navds-semantic-color-component-background-light
+  );
   --navds-button-color-tertiary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
   );
 
   /* Danger */
-  --navds-button-color-danger-text: var(--navds-color-white);
-  --navds-button-color-danger-background: var(--navds-color-danger-default);
-  --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
+  --navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
+  --navds-button-color-danger-background: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-button-color-danger-background-hover: var(
+    --navds-semantic-color-interaction-danger-hover
+  );
   --navds-button-color-danger-background-active: var(
-    --navds-color-danger-active
+    --navds-semantic-color-interaction-danger-selected
+  );
+  --navds-button-color-danger-border-focus: var(
+    --navds-semantic-color-component-background-light
   );
-  --navds-button-color-danger-border-focus: var(--navds-color-white);
-
-  /* Disabled */
-  --navds-button-color-text-disabled: var(--navds-color-text-inverse);
-  --navds-button-color-background-disabled: var(--navds-color-disabled);
 }
 
 .navds-button {
@@ -111,8 +137,13 @@
     var(--navds-shadow-focus);
 }
 
+.navds-button--primary:hover:disabled,
+.navds-button--primary:active:disabled {
+  background-color: var(--navds-button-color-primary-background);
+}
+
 /**************************
- * .navds-button--secondary *
+* .navds-button--secondary *
  **************************/
 
 .navds-button--secondary {
@@ -145,6 +176,13 @@
     var(--navds-shadow-focus);
 }
 
+.navds-button--secondary:disabled,
+.navds-button--secondary:hover:disabled {
+  color: var(--navds-button-color-secondary-text);
+  background-color: var(--navds-button-color-secondary-background);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+}
+
 /****************************
  * .navds-button--tertiary *
  ****************************/
@@ -168,11 +206,23 @@
   box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
 }
 
+.navds-button--tertiary:active:hover {
+  background-color: var(--navds-button-color-tertiary-background-active);
+}
+
 .navds-button--tertiary:active:focus {
   box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
     var(--navds-shadow-focus);
 }
 
+.navds-button--tertiary:disabled,
+.navds-button--tertiary:active:disabled,
+.navds-button--tertiary:active:hover:disabled {
+  color: var(--navds-button-color-tertiary-text);
+  background: none;
+  box-shadow: none;
+}
+
 /*************************
  * .navds-button--danger *
  *************************/
@@ -195,14 +245,17 @@
     var(--navds-shadow-focus);
 }
 
+.navds-button--danger:hover:disabled,
+.navds-button--danger:active:disabled {
+  background-color: var(--navds-button-color-danger-background);
+}
+
 /**************************
  * .navds-button:disabled *
  **************************/
 
 .navds-button:disabled {
-  color: var(--navds-button-color-text-disabled);
-  background-color: var(--navds-button-color-background-disabled);
+  opacity: 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.11.4",
+  "version": "0.12.1",
   "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.6.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.6.3",
+  "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/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.13.2",
+  "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.3",
+    "@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,18 +101,30 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           >
             {legend}
           </Label>
-          {!!description && (
-            <BodyShort
-              as="div"
-              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

@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,16 +68,31 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
       </Label>
 
       {!!description && (
-        <BodyShort
-          as="div"
-          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

@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,31 +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
-          as="div"
-          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={<div>Laborum ad</div>}>
-          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.tsx

@@ -1,71 +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
-          as="div"
-          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,78 +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={<div>Exercitation do labore</div>}
-      >
-        <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange" description={<div>Laborum ad</div>}>
-          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>.");

@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

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

@@ -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/text-field.stories.tsx

@@ -55,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

@@ -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",

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "private": false,
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",
@@ -30,7 +30,6 @@
   },
   "devDependencies": {
     "@types/jest": "^27.0.1",
-    "color": "^4.0.1",
     "dotenv": "^10.0.0",
     "figma-api": "^1.7.0",
     "jest": "^27.2.0",

@navikt/core/tokens/src/colors.json

@@ -297,23 +297,26 @@
     "semantic": {
       "color": {
         "border": {
-          "default": {
-            "value": "{navds.global.color.gray.600.value}"
+          "inverted": {
+            "value": "{navds.global.color.gray.200.value}"
           },
           "muted": {
             "value": "{navds.global.color.gray.400.value}"
+          },
+          "@": {
+            "value": "{navds.global.color.gray.600.value}"
           }
         },
         "canvas": {
           "background": {
-            "default": {
-              "value": "{navds.global.color.gray.100.value}"
-            },
             "inverted": {
               "value": "{navds.global.color.gray.900.value}"
             },
             "light": {
               "value": "{navds.global.color.white.value}"
+            },
+            "@": {
+              "value": "{navds.global.color.gray.100.value}"
             }
           }
         },
@@ -383,50 +386,61 @@
           }
         },
         "focus": {
-          "value": "{navds.global.color.blue.800.value}",
           "inverted": {
             "value": "{navds.global.color.blue.200.value}"
+          },
+          "@": {
+            "value": "{navds.global.color.blue.800.value}"
           }
         },
         "interaction": {
           "danger": {
-            "default": {
-              "value": "{navds.global.color.red.500.value}"
-            },
             "hover": {
               "value": "{navds.global.color.red.600.value}"
             },
             "selected": {
               "value": "{navds.global.color.red.700.value}"
+            },
+            "@": {
+              "value": "{navds.global.color.red.500.value}"
             }
           },
           "primary": {
-            "default": {
-              "value": "{navds.global.color.blue.500.value}"
-            },
             "hover": {
-              "value": "{navds.global.color.blue.600.value}"
+              "subtle": {
+                "value": "{navds.global.color.blue.50.value}"
+              },
+              "@": {
+                "value": "{navds.global.color.blue.600.value}"
+              }
             },
             "selected": {
               "value": "{navds.global.color.deepblue.500.value}"
+            },
+            "@": {
+              "@": {
+                "value": "{navds.global.color.blue.500.value}"
+              }
             }
           }
         },
-        "text": {
-          "default": {
-            "value": "{navds.global.color.gray.900.value}"
+        "link": {
+          "visited": {
+            "value": "{navds.global.color.purple.500.value}"
           },
+          "@": {
+            "value": "{navds.global.color.blue.500.value}"
+          }
+        },
+        "text": {
           "inverted": {
             "value": "{navds.global.color.white.value}"
           },
-          "link": {
-            "value": "{navds.global.color.blue.500.value}",
-            "visited": {
-              "value": "{navds.global.color.purple.500.value}"
-            }
-          },
           "muted": {
             "value": "{navds.global.color.gray.600.value}"
+          },
+          "@": {
+            "value": "{navds.global.color.gray.900.value}"
           }
         }
       }

@navikt/core/tokens/src/index.js

@@ -1,144 +1,8 @@
-const Color = require("color");
-const newColors = require("./colors.json");
-const newSpacing = require("./spacing.json");
-
 const baseFontSize = 16;
-
 const getFontSize = (size) => `${size / baseFontSize}rem`;
-// https://github.com/hihayk/scale/blob/69b766bba2db046d3e8cb4026ae32a32c897f9ff/src/utils.js#L44
-const mixColors = (color, step, amount, mixColor) => {
-  const saturation = Math.round(Color(color).hsl().color[1]);
-  // Setting directly to hex returns different result...
-  return Color(
-    Color(color)
-      .saturate(((step + 1) / 5) * (saturation / 100))
-      .mix(Color(mixColor), ((amount / 100) * (step + 1)) / 5)
-      .string()
-  ).hex();
-};
-
-const lightColor = (color, step) => mixColors(color, step, 100, "white");
-const darkColor = (color, step) => mixColors(color, step, 85, "black");
-
-const baseColors = {
-  blue: "#0067c5",
-  deepblue: "#005B82",
-  lightblue: "#66CBEC",
-  orange: "#FF9100",
-  green: "#06893A",
-  red: "#BA3A26",
-  purple: "#634689",
-  limegreen: "#a2ad00",
-};
-
-const white = "#ffffff";
-const darkgray = "#262626";
-const lightgray = "#F1F1F1";
-
-const gray = (n) => Color(lightgray).mix(Color(darkgray), n).hex();
 
 module.exports = {
   navds: {
-    ...(newSpacing?.navds ?? {}),
-    ...(newColors?.navds ?? {}),
-    color: {
-      white: { value: white },
-      darkgray: { value: darkgray },
-      gray: {
-        90: { value: gray(1) },
-        80: { value: gray(0.8) },
-        60: { value: gray(0.6667) },
-        40: { value: gray(0.4) },
-        20: { value: gray(0.196) },
-        10: { value: gray(0) },
-      },
-      ...Object.entries(baseColors).reduce(
-        (colors, [name, color]) => ({
-          ...colors,
-          [name]: {
-            90: { value: darkColor(color, 3) },
-            80: { value: darkColor(color, 2) },
-            70: { value: darkColor(color, 1) },
-            60: { value: darkColor(color, 0) },
-            50: { value: color },
-            40: { value: lightColor(color, 0) },
-            30: { value: lightColor(color, 1) },
-            20: { value: lightColor(color, 2) },
-            10: { value: lightColor(color, 3) },
-          },
-        }),
-        {}
-      ),
-      disabled: { value: "{navds.color.gray.40.value}" },
-      action: {
-        default: { value: "{navds.color.blue.50.value}" },
-        hover: { value: "{navds.color.blue.60.value}" },
-        active: { value: "{navds.color.deepblue.50.value}" },
-      },
-      danger: {
-        default: { value: "{navds.color.red.50.value}" },
-        hover: { value: "{navds.color.red.60.value}" },
-        active: { value: "{navds.color.red.70.value}" },
-      },
-      error: {
-        border: { value: "{navds.color.red.50.value}" },
-        background: { value: "{navds.color.red.10.value}" },
-      },
-      warning: {
-        border: { value: "{navds.color.orange.60.value}" },
-        background: { value: "{navds.color.orange.10.value}" },
-      },
-      info: {
-        border: { value: "{navds.color.lightblue.70.value}" },
-        background: { value: "{navds.color.lightblue.10.value}" },
-      },
-      success: {
-        border: { value: "{navds.color.green.50.value}" },
-        background: { value: "{navds.color.green.10.value}" },
-      },
-      border: { value: "{navds.color.gray.40.value}" },
-      background: { value: "{navds.color.white.value}" },
-      text: {
-        primary: { value: "{navds.color.gray.90.value}" },
-        inverse: { value: "{navds.color.white.value}" },
-        disabled: { value: "{navds.color.gray.60.value}" },
-        link: { value: "{navds.color.blue.50.value}" },
-        error: { value: "{navds.color.red.50.value}" },
-      },
-      hover: { value: "{navds.color.gray.40.value}" },
-      tag: {
-        error: {
-          border: { value: "{navds.color.red.50.value}" },
-          background: { value: "{navds.color.red.10.value}" },
-        },
-        warning: {
-          border: { value: "{navds.color.orange.60.value}" },
-          background: { value: "{navds.color.orange.10.value}" },
-        },
-        info: {
-          border: { value: "{navds.color.lightblue.70.value}" },
-          background: { value: "{navds.color.lightblue.10.value}" },
-        },
-        success: {
-          border: { value: "{navds.color.green.50.value}" },
-          background: { value: "{navds.color.green.10.value}" },
-        },
-      },
-      modal: {
-        overlay: {
-          value: "rgba(38, 38, 38, 0.7)",
-        },
-      },
-    },
-    border: {
-      default: {
-        value: "1px solid {navds.color.border.value}",
-      },
-      radius: { value: "4px" },
-    },
-    panel: {
-      hover: { value: "1px solid {navds.color.blue.50.value}" },
-    },
     font: {
       family: { value: '"Source Sans Pro", Arial, sans-serif' },
       line: {
@@ -176,35 +40,16 @@ module.exports = {
       },
     },
     shadow: {
-      focus: { value: "0 0 0 3px {navds.color.blue.80.value}" },
-      "focus-on-dark": { value: "0 0 0 3px {navds.color.orange.40.value}" },
-      hover: { value: "{navds.color.hover.value} 0 2px 1px 0" },
-    },
-    text: {
-      focus: { value: "{navds.color.blue.80.value}" },
-      shadow: { value: "0 0 0 2px {navds.color.blue.80.value}" },
-    },
-    contentContainer: {
-      maxWidth: { value: "79.5rem" },
-      padding: {
-        small: { value: "{navds.spacing.4.value}" },
-        mediumAndLarger: { value: "{navds.spacing.6.value}" },
+      focus: { value: "0 0 0 3px {navds.semantic.color.focus.@.value}" },
+      "focus-inverted": {
+        value: "0 0 0 3px {navds.semantic.color.focus.inverted.value}",
       },
-    },
-    grid: {
-      gutter: {
-        small: { value: "{navds.spacing.4.value}" },
-        mediumAndLarger: { value: "{navds.spacing.6.value}" },
+      popover: {
+        value: "0 2px 4px 0 {navds.global.color.gray.200.value}",
       },
-    },
-    layout: {
-      background: {
-        white: { value: white },
-        gray: { value: "{navds.color.gray.10.value}" },
-      },
-      padding: {
-        small: { value: "{navds.spacing.4.value}" },
-        mediumAndLarger: { value: "{navds.spacing.10.value}" },
+      card: {
+        value:
+          "0 1px 3px 0 rgba(38,38,38,0.2),0 2px 1px 0 rgba(38,38,38,0.12),0 1px 1px 0 rgba(38,38,38,0.14)",
       },
     },
     "z-index": {
@@ -212,22 +57,5 @@ module.exports = {
       popover: { value: 1000 },
       focus: { value: 10 },
     },
-    sidebar: {
-      sticky: {
-        offset: { value: "0" },
-      },
-    },
-    checkmark: {
-      image: {
-        white: {
-          value:
-            "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
-        },
-        blue: {
-          value:
-            "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjMDA2N0M1IiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==)",
-        },
-      },
-    },
   },
 };

@navikt/internal/css/divider.css

@@ -1,5 +1,9 @@
+:root {
+  --navdsi-divider-color-border: var(--navds-semantic-color-divider);
+}
+
 .navdsi-divider {
   margin: var(--navds-spacing-3) 0;
   border: none;
-  border-bottom: 1px solid var(--navds-color-gray-40);
+  border-bottom: 1px solid var(--navdsi-divider-color-border);
 }

@navikt/internal/css/dropdown.css

@@ -1,7 +1,19 @@
+:root {
+  --navds-dropdown-menu-color: var(--navds-semantic-color-text);
+  --navdsi-dropdown-item-color-text: var(--navds-semantic-color-link);
+  --navdsi-dropdown-item-color-background-hover: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+  --navdsi-dropdown-item-color-background-active: var(
+    --navds-global-color-blue-200
+  );
+  --navds-dropdown-item-color-focus: var(--navds-semantic-color-focus);
+}
+
 .navdsi-dropdown__menu {
   overflow: hidden;
   padding: var(--navds-spacing-4) 0;
-  color: var(--navds-color-darkgray);
+  color: var(--navds-dropdown-menu-color);
   width: 27ch;
   max-height: 616px;
   overflow-y: auto;
@@ -30,7 +42,7 @@
   margin: 0;
   overflow: visible;
   background: transparent;
-  color: var(--navds-color-text-link);
+  color: var(--navdsi-dropdown-item-color-text);
   font: inherit;
   text-decoration: none;
   text-align: left;
@@ -43,14 +55,14 @@
 }
 
 .navdsi-dropdown__item:hover {
-  background-color: var(--navds-color-blue-10);
+  background-color: var(--navdsi-dropdown-item-color-background-hover);
 }
 
 .navdsi-dropdown__item:active {
-  background-color: var(--navds-color-blue-20);
+  background-color: var(--navdsi-dropdown-item-color-background-active);
 }
 
 .navdsi-dropdown__item:focus {
   outline: none;
-  box-shadow: inset 0 0 0 2px var(--navds-color-blue-80);
+  box-shadow: inset 0 0 0 2px var(--navds-dropdown-item-color-focus);
 }

@navikt/internal/css/header.css

@@ -1,8 +1,12 @@
 :root {
-  --navdsi-header-color-background: var(--navds-color-darkgray);
-  --navdsi-header-color-border: var(--navds-color-gray-40);
-  --navdsi-header-color-text: var(--navds-color-text-inverse);
-  --navdsi-header-focus: inset 0 0 0 2px var(--navds-color-blue-10);
+  --navdsi-header-color-background: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navdsi-header-color-border: var(--navds-semantic-color-border-muted);
+  --navdsi-header-color-text: var(--navds-semantic-color-text-inverted);
+  --navdsi-header-focus: inset 0 0 0 2px var(--navds-global-color-blue-100);
+  --navdsi-header-color-hover: var(--navds-global-color-gray-800);
+  --navdsi-header-color-active: var(--navds-global-color-gray-600);
 }
 
 .navdsi-header {
@@ -61,7 +65,7 @@ button.navdsi-header__title {
 a.navdsi-header__title:hover,
 button.navdsi-header__title:hover,
 .navdsi-header__button:hover {
-  background-color: var(--navds-color-gray-80);
+  background-color: var(--navdsi-header-color-hover);
 }
 
 .navdsi-header__title:focus,
@@ -73,7 +77,7 @@ button.navdsi-header__title:hover,
 a.navdsi-header__title:active,
 button.navdsi-header__title:active,
 .navdsi-header__button:active {
-  background-color: var(--navds-color-gray-60);
+  background-color: var(--navdsi-header-color-active);
 }
 
 .navdsi-header__user-button {

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": false,
   "description": "Css for NAV internal Designsystem components",
   "author": "NAV Designsystem team",

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
@@ -33,8 +33,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^0.6.3",
-    "@navikt/ds-react": "^0.13.2",
+    "@navikt/ds-icons": "^0.7.0",
+    "@navikt/ds-react": "^0.14.0",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",
@@ -44,6 +44,7 @@
     "rimraf": "^3.0.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
   }
 }

README.md

@@ -16,20 +16,20 @@
     <h4><a href="https://design.nav.no">Nettside</a> | <a href="https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md">Bidra</a> | <a href="https://github.com/navikt/nav-frontend-moduler/issues">Bug-rapport</a>
 </div>
 
-## Innhold
+## Innhold i repo
 
 Repoet inneholder følgende:
 
 - [Alle felleskomponenter](https://github.com/navikt/nav-frontend-moduler/tree/master/packages/) i NAVs frontend-rammeverk forvaltet av designsystemet
 - [Felleskomponenter V2 (WIP)](https://github.com/navikt/nav-frontend-moduler/tree/master/@navikt/) oppdaterte og scopede pakker for en bedre brukeropplevelse
 - [Kildekoden](https://github.com/navikt/nav-frontend-moduler/tree/master/website) til vår nettside; [design.nav.no](https://design.nav.no) som tilbyr dokumentasjon for komponentene og NAVs designsystem generelt
-- [Eksempler på forskjellige frontend-oppsett](https://github.com/navikt/nav-frontend-moduler/tree/master/examples) til applikasjoner som skal bruke komponentene
+- [Eksempler på forskjellige frontend-løsninger](https://github.com/navikt/nav-frontend-moduler/tree/master/examples) til applikasjoner som skal bruke komponentene
 - [Storybook](https://navikt.github.io/Designsystemet/?path=/story/ds-react-kom-i-gang--page) for v2 komponenter (wip) og eldre komponenter.
 
-## Bidrag
+## Bidra
 
 Gå til [CONTRIBUTING.md](https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md)
 
-## Lisens
+## Lisenser
 
 Gå til [LICENSE](https://github.com/navikt/nav-frontend-moduler/blob/master/LICENSE)

website/package.json

@@ -34,7 +34,7 @@
     "mdx-utils": "^0.2.0",
     "object-path-immutable": "^4.1.0",
     "prism-react-renderer": "^1.1.1",
-    "prismjs": "1.23.0",
+    "prismjs": "1.25.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",

website/src/components/card/card.less

@@ -2,14 +2,14 @@
   width: 18rem;
   height: 24rem;
   text-decoration: none;
-  color: var(--navds-color-darkgray);
+  color: var(--navds-semantic-color-text);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   padding: 4rem 2rem 2rem 2rem;
   border-radius: 8px;
-  border: 2px solid var(--navds-color-gray-20);
+  border: 2px solid var(--navds-global-color-gray-200);
   background-color: white;
   position: relative;
 
@@ -19,7 +19,7 @@
   }
 
   &:focus {
-    border-color: var(--navds-color-text-focus);
+    border-color: var(--navds-semantic-color-focus);
     outline: none;
   }
 }

website/src/components/code/styles.less

@@ -73,7 +73,7 @@ pre {
   border-top: none;
 
   &:hover {
-    box-shadow: var(--navds-shadow-hover);
+    box-shadow: 0 2px 1px 0 var(--navds-global-color-gray-400);
   }
 
   &:focus {

website/src/components/color-switch/index.css

@@ -8,9 +8,9 @@
   padding: 0;
   border-radius: 0.5rem;
   margin: 0.2rem;
-  box-shadow: var(--navds-shadow-hover);
+  box-shadow: 0 2px 1px 0 var(--navds-semantic-color-border-muted);
   transform: translateY(0.2rem);
-  border: 1px solid var(--navds-color-darkgray);
+  border: 1px solid var(--navds-semantic-color-text);
   min-height: 2rem;
 }
 

website/src/components/icons/styles.less

@@ -146,7 +146,7 @@
   animation: fadeIn 500ms cubic-bezier(0.17, 0.67, 0.83, 0.67) 1;
 
   &:hover {
-    border: var(--navds-panel-hover);
+    border: 1px solid var(--navds-semantic-color-interaction-primary);
   }
 
   &:focus {

website/src/components/layout/forside/styles.less

@@ -35,7 +35,7 @@
 }
 
 .forside__logo-links > * {
-  color: var(--navds-color-text-primary);
+  color: var(--navds-semantic-color-text);
   text-decoration: none;
   margin-right: 2.5rem;
   &:hover {

website/src/components/layout/templates/styles.less

@@ -90,3 +90,7 @@
     text-align: left;
   }
 }
+
+.gp_accordion {
+  margin-bottom: 3px;
+}

website/src/components/layout/templates/verktoykasseArticle.jsx

@@ -10,6 +10,7 @@ import {
   Normaltekst,
 } from "nav-frontend-typografi";
 import Lenke from "nav-frontend-lenker";
+import { Accordion } from "@navikt/ds-react";
 let headlines = [];
 
 const Img = ({ src, ...rest }) => {
@@ -47,7 +48,7 @@ const getToc = (toc) => {
               <Lenke href={item.url} className="toc-link toc-link-h2">
                 {item.title}
               </Lenke>
-              {item.items && item.items.length !== 0 && (
+              {/* {item.items && item.items.length !== 0 && (
                 <ol className="toc-level toc-level-2">
                   {item.items.map((lvl3, x) => {
                     return (
@@ -59,7 +60,7 @@ const getToc = (toc) => {
                     );
                   })}
                 </ol>
-              )}
+              )} */}
             </li>
           );
         })}
@@ -98,6 +99,16 @@ const renderAst = new rehypeReact({
     h4: (props) =>
       registerHeadline(props, (props) => <Undertittel tag="h4" {...props} />),
     inlineCode: (props) => <InlineCode {...props} />,
+    accordion: (props) => {
+      return (
+        <Accordion className="gp_accordion">
+          <Accordion.Item>
+            <Accordion.Header>{props?.tittel}</Accordion.Header>
+            <Accordion.Content>{props.children}</Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      );
+    },
   },
 }).Compiler;
 

yarn.lock

@@ -8314,15 +8314,6 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
-clipboard@^2.0.0:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
-  integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
-  dependencies:
-    good-listener "^1.2.2"
-    select "^1.1.2"
-    tiny-emitter "^2.0.0"
-
 clipboardy@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"
@@ -9835,11 +9826,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
-delegate@^3.1.2:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
-  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
-
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -13444,13 +13430,6 @@ gonzales-pe@^4.3.0:
   dependencies:
     minimist "^1.2.5"
 
-good-listener@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
-  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
-  dependencies:
-    delegate "^3.1.2"
-
 got@8.3.2, got@^8.3.1:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/got/-/got-8.3.2.tgz#1d23f64390e97f776cac52e5b936e5f514d2e937"
@@ -21434,14 +21413,7 @@ prism-react-renderer@^1.1.1:
   resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz#392460acf63540960e5e3caa699d851264e99b89"
   integrity sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==
 
-prismjs@1.23.0:
-  version "1.23.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
-  integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
-  optionalDependencies:
-    clipboard "^2.0.0"
-
-prismjs@^1.21.0, prismjs@~1.25.0:
+prismjs@1.25.0, prismjs@^1.21.0, prismjs@~1.25.0:
   version "1.25.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756"
   integrity sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==
@@ -23324,11 +23296,6 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
-select@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
-  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
-
 selfsigned@^1.10.8:
   version "1.10.11"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.11.tgz#24929cd906fe0f44b6d01fb23999a739537acbe9"
@@ -25260,11 +25227,6 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tiny-emitter@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
-  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
-
 tiny-invariant@^1.0.2, tiny-invariant@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"