Lerna versionbump [ci skip]

- @navikt/ds-css@0.12.6 - @navikt/ds-react@0.14.2 - @navikt/ds-react-internal@0.9.2
[FIX] Switch-komponent (#1359 )
2026-10-15 02:02:02 +00:00 · 2021-12-21 14:02:07 +00:00 · 2021-12-21 14:47:59 +01:00 · 2021-12-17 12:27:25 +00:00 · 2021-12-17 13:14:11 +01:00 · 2021-12-17 10:23:03 +00:00
177 changed files with 6236 additions and 4384 deletions
@@ -45,12 +45,6 @@ jobs:
        run: echo "BRANCH=HEAD" >> website/.env
      - name: Test gatsby-build (design.nav.no)
        run: yarn build:gatsby
-      - name: Test chromatic
-        uses: chromaui/action@v1
-        with:
-          token: ${{ secrets.GIT_REPO }}
-          projectToken: ${{ secrets.CHROMATIC }}
-          exitZeroOnChanges: true

  publish-npm:
    needs: test-build
@@ -0,0 +1,126 @@
+name: Chromatic
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  chromatic-pr:
+    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Boot
+        run: yarn boot
+      - name: run chromatic
+        uses: chromaui/action@v1
+        id: chromatic_tests
+        continue-on-error: true
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: x3xqdfgkujg
+          exitZeroOnChanges: false
+
+      - name: replace storybook url
+        uses: frabert/replace-string-action@v2.0
+        id: storybook_url
+        with:
+          pattern: "(iframe.html)"
+          string: ${{ steps.chromatic_tests.outputs.storybookUrl }}
+          replace-with: ""
+
+      - name: Get commit sha
+        id: vars
+        shell: bash
+        run: |
+          echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        id: fc
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: "github-actions[bot]"
+          body-includes: Chromatic build-output
+
+      - name: Create or update comment
+        if: steps.chromatic_tests.outcome == 'success'
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            Chromatic build-output:
+
+            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
+            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
+            - :white_check_mark: SUCCESS :white_check_mark:
+
+            commit: `${{ steps.vars.outputs.sha_short }}`
+          edit-mode: replace
+
+      - name: Create or update failed comment
+        if: steps.chromatic_tests.outcome != 'success'
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            **Chromatic build-output**:
+
+            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
+            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
+            - :no_entry_sign: FAILED :no_entry_sign:, review endringer.
+
+            commit: `${{ steps.vars.outputs.sha_short }}`
+          edit-mode: replace
+
+  chromatic-push:
+    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name == 'push'"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Boot
+        run: yarn boot
+      - name: run chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: x3xqdfgkujg
+          autoAcceptChanges: true
@@ -1,8 +1,8 @@
 name: Update Icons

 on:
-  schedule:
-    - cron: 0 0 * * *
+#  schedule:
+ #   - cron: 0 0 * * *
  workflow_dispatch:

 jobs:
@@ -10,8 +10,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0 # Required to retrieve git history
      - uses: actions/setup-node@v1
        with:
          node-version: 14
@@ -27,19 +25,18 @@ jobs:
      - name: postinstall
        if: steps.node-cache.outputs.cache-hit == 'true'
        run: yarn postinstall
-      - name: add Figma token to .env
-        run: echo "FIGMA_TOKEN=${{ secrets.FIGMA_IKONER_API }}" >> @navikt/core/icons/.env
      - name: Update Icons
        run: yarn update:icons
+        env:
+          FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
      - name: Create Pull Request
        uses: peter-evans/create-pull-request@v3
        with:
          token: ${{ secrets.GIT_REPO }}
-          commit-message: "Oppdatert ikoner fra figma"
-          committer: GitHub <noreply@github.com>
+          commit-message: "Ikoner synket fra figma"
          branch: figma-icons-sync
+          committer: GitHub <noreply@github.com>
+          author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
+          signoff: false
          delete-branch: true
-          title: "[FIX] Automatisk PR for ikoner"
-          labels: |
-            Icons
-            automated pr
+          title: "[FIX] Ikonsynk Figma"
@@ -0,0 +1,39 @@
+name: Update tokens
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Update tokens
+        run: yarn update:tokens
+        env:
+          FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: figma-tokens-sync
+          delete-branch: true
+          title: "[FEATURE] Tokens sync Figma"
+          commit-message: "Tokens synket fra figma"
+          committer: GitHub <noreply@github.com>
+          signoff: false
@@ -115,4 +115,5 @@ utilities/**/css
 react-docgen.json
 react-docgen-docs.json
 cjs
-esm
+esm
+.vercel
@@ -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
@@ -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)`
@@ -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;
 }
@@ -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 {
@@ -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 {
@@ -22,13 +22,13 @@ html {

 body {
  font-family: var(--navds-font-family);
-  line-height: 1.375;
-  color: var(--navds-color-text-primary);
+  line-height: 1.333;
+  color: var(--navds-semantic-color-text);
  font-size: 1.125rem;
 }

 a {
-  color: var(--navds-color-text-link);
+  color: var(--navds-semantic-color-link);
 }

 /* https://web.dev/prefers-reduced-motion/ */
@@ -1,53 +1,79 @@
 :root {
  /* Primary */
-  --navds-button-color-primary-text: var(--navds-color-white);
-  --navds-button-color-primary-border-focus: var(--navds-color-white);
-  --navds-button-color-primary-background: var(--navds-color-action-default);
+  --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
+  --navds-button-color-primary-border-focus: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-primary-background: var(
+    --navds-semantic-color-interaction-primary
+  );
  --navds-button-color-primary-background-hover: var(
-    --navds-color-action-hover
+    --navds-semantic-color-interaction-primary-hover
  );
  --navds-button-color-primary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
  );

  /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-color-action-default);
-  --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-border: var(--navds-color-action-default);
+  --navds-button-color-secondary-text: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-secondary-text-hover: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-secondary-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-secondary-border: var(
+    --navds-semantic-color-interaction-primary
+  );
  --navds-button-color-secondary-border-focus-active-hover: var(
-    --navds-color-white
+    --navds-semantic-color-component-background-light
+  );
+  --navds-button-color-secondary-background: var(
+    --navds-semantic-color-component-background-light
  );
-  --navds-button-color-secondary-background: var(--navds-color-background);
  --navds-button-color-secondary-background-hover: var(
-    --navds-color-action-hover
+    --navds-semantic-color-interaction-primary-hover
  );
  --navds-button-color-secondary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
  );

  /* Tertiary */
-  --navds-button-color-tertiary-text: var(--navds-color-action-default);
-  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
-  --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
-  --navds-button-color-tertiary-border-active: var(--navds-color-white);
+  --navds-button-color-tertiary-text: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-tertiary-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-border-focus: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-border-active: var(
+    --navds-semantic-color-component-background-light
+  );
  --navds-button-color-tertiary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
  );

  /* Danger */
-  --navds-button-color-danger-text: var(--navds-color-white);
-  --navds-button-color-danger-background: var(--navds-color-danger-default);
-  --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
+  --navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
+  --navds-button-color-danger-background: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-button-color-danger-background-hover: var(
+    --navds-semantic-color-interaction-danger-hover
+  );
  --navds-button-color-danger-background-active: var(
-    --navds-color-danger-active
+    --navds-semantic-color-interaction-danger-selected
+  );
+  --navds-button-color-danger-border-focus: var(
+    --navds-semantic-color-component-background-light
  );
-  --navds-button-color-danger-border-focus: var(--navds-color-white);
-
-  /* Disabled */
-  --navds-button-color-text-disabled: var(--navds-color-text-inverse);
-  --navds-button-color-background-disabled: var(--navds-color-disabled);
 }

 .navds-button {
@@ -111,8 +137,13 @@
    var(--navds-shadow-focus);
 }

+.navds-button--primary:hover:disabled,
+.navds-button--primary:active:disabled {
+  background-color: var(--navds-button-color-primary-background);
+}
+
 /**************************
- * .navds-button--secondary *
+* .navds-button--secondary *
 **************************/

 .navds-button--secondary {
@@ -145,6 +176,13 @@
    var(--navds-shadow-focus);
 }

+.navds-button--secondary:disabled,
+.navds-button--secondary:hover:disabled {
+  color: var(--navds-button-color-secondary-text);
+  background-color: var(--navds-button-color-secondary-background);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+}
+
 /****************************
 * .navds-button--tertiary *
 ****************************/
@@ -168,11 +206,23 @@
  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
 }

+.navds-button--tertiary:active:hover {
+  background-color: var(--navds-button-color-tertiary-background-active);
+}
+
 .navds-button--tertiary:active:focus {
  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
    var(--navds-shadow-focus);
 }

+.navds-button--tertiary:disabled,
+.navds-button--tertiary:active:disabled,
+.navds-button--tertiary:active:hover:disabled {
+  color: var(--navds-button-color-tertiary-text);
+  background: none;
+  box-shadow: none;
+}
+
 /*************************
 * .navds-button--danger *
 *************************/
@@ -195,14 +245,17 @@
    var(--navds-shadow-focus);
 }

+.navds-button--danger:hover:disabled,
+.navds-button--danger:active:disabled {
+  background-color: var(--navds-button-color-danger-background);
+}
+
 /**************************
 * .navds-button:disabled *
 **************************/

 .navds-button:disabled {
-  color: var(--navds-button-color-text-disabled);
-  background-color: var(--navds-button-color-background-disabled);
+  opacity: 0.3;
  cursor: not-allowed;
-  box-shadow: none;
  transform: none;
 }
@@ -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
+  );
 }

 /*
@@ -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);
  }
 }
@@ -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;
-}
@@ -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);
-}
@@ -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==);
 }
@@ -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: "•";
 }
@@ -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 {
@@ -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;
+}
@@ -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 */
@@ -4,13 +4,11 @@
@import "fieldset.css";
@import "form.css";
@import "error-summary.css";
-@import "checkbox.css";
-@import "checkbox-group.css";
@import "confirmation-panel.css";
@import "error-message.css";
-@import "radio.css";
-@import "radio-group.css";
+@import "radio-checkbox.css";
@import "select.css";
+@import "switch.css";
@import "text-field.css";
@import "textarea.css";
@import "search-field.css";
@@ -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;
+}
@@ -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;
-}
@@ -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;
-}
@@ -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;
+}
@@ -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;
 }
@@ -0,0 +1,183 @@
+:root {
+  --navds-switch-color-label: var(--navds-color-text-primary);
+  --navds-switch-color-label-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
+  --navds-switch-color-track-background-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-switch-color-track-background-hover-checked: var(
+    --navds-semantic-color-interaction-primary-hover
+  );
+  --navds-switch-color-track-shadow-inner-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-switch-color-thumb: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-switch-color-thumb-loader-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+}
+
+.navds-switch {
+  position: relative;
+  min-height: 48px;
+  width: fit-content;
+}
+
+.navds-switch--small {
+  position: relative;
+  min-height: 32px;
+}
+
+/* Input */
+.navds-switch__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-switch--small > .navds-switch__input {
+  height: 32px;
+  top: 0;
+}
+
+/* Label */
+.navds-switch__label-wrapper {
+  cursor: pointer;
+  color: var(--navds-switch-color-label);
+}
+
+.navds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-1);
+  padding: 0.75rem 0 0.75rem 3.25rem;
+}
+
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--navds-spacing-2) - 2px) 0
+    calc(var(--navds-spacing-2) - 2px) 3.25rem;
+}
+
+.navds-switch--with-description,
+.navds-switch--small
+  > .navds-switch__label-wrapper
+  > .navds-switch--with-description {
+  padding-bottom: 0;
+}
+
+.navds-switch__input:hover ~ .navds-switch__label-wrapper {
+  color: var(--navds-switch-color-label-hover);
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+  color: inherit;
+}
+
+/* Track */
+.navds-switch__track {
+  width: 44px;
+  height: 24px;
+  background-color: var(--navds-switch-color-track-background);
+  position: absolute;
+  top: var(--navds-spacing-3);
+  left: 0;
+  border-radius: var(--navds-spacing-4);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navds-switch--small > .navds-switch__track {
+  top: var(--navds-spacing-1);
+}
+
+.navds-switch__input:checked ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-checked);
+}
+
+.navds-switch__input:hover:checked ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-hover-checked);
+}
+
+.navds-switch__input:disabled ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background);
+}
+
+.navds-switch__input:checked:disabled ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-checked);
+}
+
+.navds-switch__input:focus ~ .navds-switch__track {
+  box-shadow: 0 0 0 1px var(--navds-switch-color-track-shadow-inner-focus),
+    var(--navds-shadow-focus);
+}
+
+/* Thumb */
+.navds-switch__thumb {
+  background-color: var(--navds-switch-color-thumb);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  transform: translateX(0);
+  left: 2px;
+  top: 2px;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(20px);
+}
+
+.navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(2px);
+}
+
+.navds-switch__input:checked:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(18px);
+}
+
+.navds-switch__input:disabled:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(0);
+}
+
+.navds-switch__input:checked:disabled:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(20px);
+}
+
+/* Loader */
+.navds-switch__input:checked
+  ~ .navds-switch__track
+  > .navds-switch__thumb
+  .navds-loader__foreground {
+  stroke: var(--navds-switch-color-thumb-loader-checked);
+}
+
+/* Disabled */
+.navds-switch__input:disabled {
+  appearance: none;
+}
+
+.navds-switch--disabled {
+  opacity: 0.3;
+}
+
+.navds-switch__input:disabled,
+.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+  cursor: not-allowed;
+}
@@ -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;
 }

 /**
@@ -1,14 +1,26 @@
 :root {
-  --navds-textarea-color-background: var(--navds-color-white);
-  --navds-textarea-color-border: var(--navds-color-gray-60);
-  --navds-textarea-color-border-hover: var(--navds-color-blue-50);
-  --navds-textarea-color-border-error: var(--navds-color-red-50);
-  --navds-textarea-color-shadow-error: var(--navds-color-red-50);
-  --navds-textarea-color-counter-text: var(--navds-color-gray-40);
-  --navds-textarea-color-counter-text-error: var(--navds-color-red-50);
-  --navds-textarea-color-text-disabled: var(--navds-color-darkgray);
-  --navds-textarea-color-border-disabled: var(--navds-color-gray-40);
-  --navds-textarea-color-background-disabled: var(--navds-color-gray-10);
+  --navds-textarea-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-textarea-color-border: var(--navds-semantic-color-border);
+  --navds-textarea-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-textarea-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-counter-text: var(--navds-global-color-gray-400);
+  --navds-textarea-color-counter-text-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-textarea-color-text-disabled: var(--navds-semantic-color-text);
+  --navds-textarea-color-border-disabled: var(--navds-global-color-gray-400);
+  --navds-textarea-color-background-disabled: var(
+    --navds-semantic-color-component-background-alternate
+  );
 }

 .navds-textarea__wrapper {
@@ -26,7 +38,7 @@
  width: 100%;
  transition: height 0.1s ease-out;
  display: block;
-  min-height: 48px;
+  min-height: 3rem;
 }

 .navds-textarea--counter {
@@ -44,7 +56,7 @@

 .navds-form-field--small .navds-textarea__input {
  padding: var(--navds-spacing-1);
-  min-height: 32px;
+  min-height: 2rem;
 }

 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
@@ -78,11 +90,20 @@
 /*
  Disabled handling
 */
-.navds-textarea__input:disabled,
+.navds-textarea--disabled {
+  opacity: 0.3;
+}
+
+.navds-textarea__input:disabled {
+  background-color: var(--navds-textarea-color-background);
+  border-color: var(--navds-textarea-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
 .navds-textarea__input[readonly] {
-  background-color: var(--navds-textarea-color-background-disabled);
-  border-color: var(--navds-textarea-color-border-disabled);
+  background-color: var(--navds-textarea-color-background);
+  border-color: var(--navds-textarea-color-border);
  box-shadow: none;
-  color: var(--navds-textarea-color-text-disabled);
  cursor: not-allowed;
 }
@@ -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);
  }
 }

@@ -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
+  );
 }

 /**
@@ -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 {
@@ -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);
 }

@@ -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 {
@@ -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);
@@ -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 {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.10.0",
+  "version": "0.12.6",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.5.3",
+    "@navikt/ds-tokens": "^0.7.0",
    "normalize.css": "^8.0.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
@@ -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 {
@@ -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;
 }

@@ -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;
@@ -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);
@@ -1,3 +1,20 @@
+:root {
+  --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
+  --navds-table-row-color-background-hover: var(
+    --navds-semantic-color-canvas-background
+  );
+  --navds-table-row-color-background-selected: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+  --navds-table-row-color-background-selected-hover: var(
+    --navds-global-color-blue-100
+  );
+  --navds-table-row-color-background-zebra: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-table-cell-color-border-hover: var(--navds-semantic-color-border);
+}
+
 .navds-table {
  border-collapse: collapse;
  width: 100%;
@@ -16,13 +33,50 @@
  display: table-row;
 }

-.navds-table__cell {
-  display: table-cell;
-  padding: var(--navds-spacing-4);
-  text-align: left;
-  border-bottom: var(--navds-border-default);
+.navds-table__body .navds-table__row:hover {
+  background-color: var(--navds-table-row-color-background-hover);
 }

-.navds-table--small .navds-table__cell {
+.navds-table__row--selected {
+  background-color: var(--navds-table-row-color-background-selected);
+}
+
+.navds-table__body .navds-table__row--selected:hover {
+  background-color: var(--navds-table-row-color-background-selected-hover);
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  .navds-table__row:nth-of-type(odd):not(:hover):not(.navds-table__row--selected) {
+  background-color: var(--navds-table-row-color-background-zebra);
+}
+
+.navds-table__header-cell,
+.navds-table__data-cell {
+  display: table-cell;
+  padding: var(--navds-spacing-4);
+  border-bottom: 1px solid var(--navds-table-cell-color-border);
+  text-align: left;
+}
+
+.navds-table__body .navds-table__row:hover .navds-table__header-cell,
+.navds-table__body .navds-table__row:hover .navds-table__data-cell {
+  border-color: var(--navds-table-cell-color-border-hover);
+}
+
+.navds-table--small .navds-table__header-cell,
+.navds-table--small .navds-table__data-cell {
  padding: var(--navds-spacing-2);
 }
+
+.navds-table .navds-checkbox .navds-checkbox__input {
+  top: -12px;
+}
+
+.navds-table .navds-checkbox--small .navds-checkbox__input {
+  top: -6px;
+}
+
+.navds-table .navds-checkbox .navds-checkbox__label {
+  padding: 0;
+}
@@ -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 {
@@ -1742,13 +1742,13 @@
  {
    "name": "SchoolBag",
    "description": "",
-    "created_at": "2021-04-07T12:13:28.147Z",
+    "created_at": "2021-04-07T12:13:28.140Z",
    "pageName": "Family"
  },
  {
-    "name": "SchoolBag",
+    "name": "SchoolBagFilled",
    "description": "",
-    "created_at": "2021-04-07T12:13:28.140Z",
+    "created_at": "2021-04-07T12:13:28.147Z",
    "pageName": "Family"
  },
  {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.6.0",
+  "version": "0.7.0",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -38,7 +38,8 @@
    "uuid": "^8.3.2"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
  },
  "devDependencies": {
    "@svgr/cli": "^5.5.0",
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C12 4.65685 10.6569 6 9 6C7.34315 6 6 4.65685 6 3C6 1.34315 7.34315 0 9 0C10.6569 0 12 1.34315 12 3ZM23 14.5C23 15.3284 22.3284 16 21.5 16C20.6716 16 20 15.3284 20 14.5C20 13.6716 20.6716 13 21.5 13C22.3284 13 23 13.6716 23 14.5ZM4.68636 6C3.98108 6 3.36366 6.47353 3.18079 7.15469L0.000732422 19H1H3.25773V24H5.25773V19H7.25773V24H9.25773V19H11H12.0018L10.1893 11H13C13.5523 11 14 10.5523 14 10C14 9.44771 13.5523 9 13 9H9.5682C8.65406 7.19312 6.78502 6 4.68636 6ZM20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12V14H16.618L16.1708 13.1056C15.832 12.428 15.1395 12 14.382 12H14C13.4477 12 13 12.4477 13 13C13 13.5523 13.4477 14 14 14H14.382L14.8292 14.8944C15.168 15.572 15.8605 16 16.618 16H18C19.1046 16 20 15.1046 20 14V12ZM13 18C13 17.4477 13.4477 17 14 17H22C22.5523 17 23 17.4477 23 18C23 18.5523 22.5523 19 22 19H14C13.4477 19 13 18.5523 13 18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 3C13 4.65685 11.6569 6 10 6C8.34315 6 7 4.65685 7 3C7 1.34315 8.34315 0 10 0C11.6569 0 13 1.34315 13 3ZM24 14.5C24 15.3284 23.3284 16 22.5 16C21.6716 16 21 15.3284 21 14.5C21 13.6716 21.6716 13 22.5 13C23.3284 13 24 13.6716 24 14.5ZM5.68636 6C4.98108 6 4.36366 6.47353 4.18079 7.15469L1.00073 19H2H4.25773V24H6.25773V19H8.25773V24H10.2577V19H12H13.0018L11.1893 11H14C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H10.5682C9.65406 7.19312 7.78502 6 5.68636 6ZM21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12V14H17.618L17.1708 13.1056C16.832 12.428 16.1395 12 15.382 12H15C14.4477 12 14 12.4477 14 13C14 13.5523 14.4477 14 15 14H15.382L15.8292 14.8944C16.168 15.572 16.8605 16 17.618 16H19C20.1046 16 21 15.1046 21 14V12ZM14 18C14 17.4477 14.4477 17 15 17H23C23.5523 17 24 17.4477 24 18C24 18.5523 23.5523 19 23 19H15C14.4477 19 14 18.5523 14 18Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V11C3 7.64262 5.06817 4.76829 8 3.58152ZM2 22V20V15V13C0.895431 13 0 13.8954 0 15V20C0 21.1046 0.895431 22 2 22ZM22 20V22C23.1046 22 24 21.1046 24 20V15C24 13.8954 23.1046 13 22 13V15V20ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 15H15V18H9V15ZM7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V18C17 19.1046 16.1046 20 15 20H9C7.89543 20 7 19.1046 7 18V15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V13H22C23.1046 13 24 13.8954 24 15V20C24 21.1046 23.1046 22 22 22H20.4649C19.7733 23.1956 18.4806 24 17 24H7C5.51944 24 4.22675 23.1956 3.53513 22H2C0.89543 22 0 21.1046 0 20V15C0 13.8954 0.895431 13 2 13H3V11C3 7.64262 5.06817 4.76829 8 3.58152ZM19 20V13V11C19 7.68629 16.3137 5 13 5H11C7.68629 5 5 7.68629 5 11V13V20C5 21.1046 5.89543 22 7 22H17C18.1046 22 19 21.1046 19 20ZM21 15V20H22V15H21ZM2 15H3V20H2L2 15ZM15 15H9V18H15V15ZM9 13C7.89543 13 7 13.8954 7 15V18C7 19.1046 7.89543 20 9 20H15C16.1046 20 17 19.1046 17 18V15C17 13.8954 16.1046 13 15 13H9ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9Z" fill="#262626"/>
 </svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V11C3 7.64262 5.06817 4.76829 8 3.58152ZM2 22V20V15V13C0.895431 13 0 13.8954 0 15V20C0 21.1046 0.895431 22 2 22ZM22 20V22C23.1046 22 24 21.1046 24 20V15C24 13.8954 23.1046 13 22 13V15V20ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 15H15V18H9V15ZM7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V18C17 19.1046 16.1046 20 15 20H9C7.89543 20 7 19.1046 7 18V15Z" fill="#262626"/>
+</svg>
@@ -35,7 +35,8 @@ function defaultTemplate(
  ${imports}
  ${interfaces}
  function ${componentName}(${props}) {
-    const titleId = _titleId ?? (title ? v4() : undefined);
+    const titleId = _titleId ?? (title ?
+      "icon-title-" + v4() : undefined);
    return ${jsx};
  }
  ${exports}`;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.12.0",
+  "version": "0.14.2",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.6.0",
+    "@navikt/ds-icons": "^0.7.0",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.2.6",
    "react-collapse": "^5.1.0",
@@ -61,6 +61,7 @@
    "ts-jest": "^27.0.5"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
  }
 }
@@ -1,6 +1,6 @@
 import cl from "classnames";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
-import { BodyShort, Label, omit } from "../..";
+import { BodyShort, Detail, Label, omit } from "../..";
 import ErrorMessage from "../ErrorMessage";
 import { FormFieldProps } from "../useFormField";
 import { useFieldset } from "./useFieldset";
@@ -101,17 +101,30 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
          >
            {legend}
          </Label>
-          {!!description && (
-            <BodyShort
-              className={cl("navds-fieldset__description", {
-                "sr-only": !!hideLegend,
-              })}
-              id={inputDescriptionId}
-              size={size}
-            >
-              {description}
-            </BodyShort>
-          )}
+          {!!description &&
+            (size === "medium" ? (
+              <BodyShort
+                className={cl("navds-fieldset__description", {
+                  "sr-only": !!hideLegend,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {props.description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-fieldset__description", {
+                  "sr-only": !!hideLegend,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {props.description}
+              </Detail>
+            ))}
          {children}
          <div
            id={errorId}
@@ -52,7 +52,10 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
        className,
        "navds-form-field",
        `navds-form-field--${size}`,
-        { "navds-select--error": hasError }
+        {
+          "navds-select--error": hasError,
+          "navds-select--disabled": !!inputProps.disabled,
+        }
      )}
    >
      <Label
@@ -67,6 +70,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
      </Label>
      {!!description && (
        <BodyShort
+          as="div"
          className={cl("navds-select__description", {
            "sr-only": hideLabel,
          })}
@@ -0,0 +1,81 @@
+import cl from "classnames";
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import { BodyShort, Detail, Loader, omit } from "..";
+import { FormFieldProps, useFormField } from "./useFormField";
+
+export interface SwitchProps
+  extends Omit<FormFieldProps, "error" | "errorId">,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Switch-label
+   */
+  children: React.ReactNode;
+  /**
+   * If enabled shows the label and description for screenreaders only
+   */
+  hideLabel?: boolean;
+  /**
+   * Toggles loading state with loader-component on switch
+   */
+  loading?: boolean;
+}
+
+const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
+  const { inputProps, size } = useFormField(props, "switch");
+
+  const {
+    children,
+    className,
+    description,
+    hideLabel = false,
+    loading,
+    ...rest
+  } = props;
+
+  const Description = size === "medium" ? BodyShort : Detail;
+
+  return (
+    <div
+      className={cl("navds-switch", props.className, `navds-switch--${size}`, {
+        "navds-switch--disabled": inputProps.disabled,
+      })}
+    >
+      <input
+        {...omit(rest, ["size"])}
+        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+        ref={ref}
+        type="checkbox"
+        className={cl(className, "navds-switch__input")}
+      />
+      <span className="navds-switch__track">
+        <span className="navds-switch__thumb">
+          {loading && <Loader size="xsmall" />}
+        </span>
+      </span>
+
+      <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
+        <div
+          className={cl("navds-switch__content", {
+            "sr-only": hideLabel,
+            "navds-switch--with-description": !!description && !hideLabel,
+          })}
+        >
+          <BodyShort as="div" size={size} className="navds-switch__label">
+            {children}
+          </BodyShort>
+          {description && (
+            <Description
+              as="div"
+              size="small"
+              className="navds-switch__description"
+            >
+              {description}
+            </Description>
+          )}
+        </div>
+      </label>
+    </div>
+  );
+});
+
+export default Switch;
@@ -1,6 +1,6 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "classnames";
-import { BodyShort, Label, omit } from "..";
+import { BodyShort, Detail, Label, omit } from "..";
 import ErrorMessage from "./ErrorMessage";
 import { FormFieldProps, useFormField } from "./useFormField";

@@ -52,7 +52,10 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
        className,
        "navds-form-field",
        `navds-form-field--${size}`,
-        { "navds-text-field--error": hasError }
+        {
+          "navds-text-field--error": hasError,
+          "navds-text-field--disabled": !!inputProps.disabled,
+        }
      )}
    >
      <Label
@@ -65,15 +68,31 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
      </Label>

      {!!description && (
-        <BodyShort
-          className={cl("navds-text-field__description", {
-            "sr-only": hideLabel,
-          })}
-          id={inputDescriptionId}
-          size={size}
-        >
-          {description}
-        </BodyShort>
+        <>
+          {size === "medium" ? (
+            <BodyShort
+              className={cl("navds-text-field__description", {
+                "sr-only": hideLabel,
+              })}
+              id={inputDescriptionId}
+              size="small"
+              as="div"
+            >
+              {description}
+            </BodyShort>
+          ) : (
+            <Detail
+              className={cl("navds-text-field__description", {
+                "sr-only": hideLabel,
+              })}
+              id={inputDescriptionId}
+              size="small"
+              as="div"
+            >
+              {description}
+            </Detail>
+          )}
+        </>
      )}
      <input
        {...omit(rest, ["error", "errorId", "size"])}
@@ -66,7 +66,10 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
          className,
          "navds-form-field",
          `navds-form-field--${size}`,
-          { "navds-textarea--error": hasError }
+          {
+            "navds-textarea--error": hasError,
+            "navds-textarea--disabled": !!inputProps.disabled,
+          }
        )}
      >
        <Label
@@ -81,6 +84,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
        </Label>
        {!!description && (
          <BodyShort
+            as="div"
            className={cl("navds-textarea__description", {
              "sr-only": hideLabel,
            })}
@@ -29,10 +29,7 @@ test("checkbox group chains onChange calls", () => {
 });

 describe("Checkbox handles controlled-state correctly", () => {
-  const CheckboxComponent = ({
-    onChange = () => null,
-    value,
-  }) => (
+  const CheckboxComponent = ({ onChange = () => null, value }) => (
    <CheckboxGroup legend="legend" onChange={onChange} value={value}>
      <Checkbox value={"value1"}>label1</Checkbox>
      <Checkbox value={"value2"}>label2</Checkbox>
@@ -55,7 +52,12 @@ describe("Checkbox handles controlled-state correctly", () => {
  test("onChange called with expected values", () => {
    const onGroupChange = jest.fn();

-    render(<CheckboxComponent onChange={onGroupChange} value={["value1", "value2"]} />);
+    render(
+      <CheckboxComponent
+        onChange={onGroupChange}
+        value={["value1", "value2"]}
+      />
+    );

    userEvent.click(screen.getByLabelText("label1"));

@@ -1,13 +1,17 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "classnames";
 import useCheckbox from "./useCheckbox";
-import ErrorMessage from "../ErrorMessage";
 import { FormFieldProps } from "../useFormField";
-import { BodyShort, omit } from "../..";
+import { BodyShort, Detail, omit } from "../..";

 export interface CheckboxProps
-  extends FormFieldProps,
+  extends Omit<FormFieldProps, "errorId">,
    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Checkbox has error
+   * @default false
+   */
+  error?: boolean;
  /**
   * Label for checkbox
   */
@@ -23,14 +27,9 @@ export interface CheckboxProps
 }

 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    hasError,
-    size,
-    inputDescriptionId,
-  } = useCheckbox(props);
+  const { inputProps, hasError, size } = useCheckbox(props);
+
+  const Description = size === "medium" ? BodyShort : Detail;

  return (
    <div
@@ -40,8 +39,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
        `navds-checkbox--${size}`,
        {
          "navds-checkbox--error": hasError,
-          "navds-checkbox--with-error-message": showErrorMsg,
-          "navds-checkbox--with-description": !!props.description,
+          "navds-checkbox--disabled": inputProps.disabled,
        }
      )}
    >
@@ -50,7 +48,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
          "children",
          "size",
          "error",
-          "errorId",
          "description",
          "hideLabel",
        ])}
@@ -58,30 +55,26 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
        className="navds-checkbox__input"
        ref={ref}
      />
-      <BodyShort
-        as="label"
-        htmlFor={inputProps.id}
-        size={size}
-        className="navds-checkbox__label"
-      >
-        {props.hideLabel ? (
-          <span className="sr-only">{props.children}</span>
-        ) : (
-          props.children
-        )}
-      </BodyShort>
-      {props.description && (
-        <BodyShort
-          size={size}
-          id={inputDescriptionId}
-          className="navds-checkbox__description"
+      <label htmlFor={inputProps.id} className="navds-checkbox__label">
+        <div
+          className={cl("navds-checkbox__content", {
+            "sr-only": props.hideLabel,
+          })}
        >
-          {props.description}
-        </BodyShort>
-      )}
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
-      </div>
+          <BodyShort as="div" size={size}>
+            {props.children}
+          </BodyShort>
+          {props.description && (
+            <Description
+              as="div"
+              size="small"
+              className="navds-checkbox__description"
+            >
+              {props.description}
+            </Description>
+          )}
+        </div>
+      </label>
    </div>
  );
 });
@@ -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
   */
@@ -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>
@@ -7,90 +7,63 @@ export default {
 } as Meta;

 export const All = () => {
+  const Checkboxes = (props) => (
+    <CheckboxGroup
+      legend="Mollit eiusmod"
+      description="Exercitation do labore"
+      {...props}
+    >
+      <Checkbox value="Apple">Apple</Checkbox>
+      <Checkbox value="Orange" description="Laborum ad">
+        Orange
+      </Checkbox>
+      <Checkbox value="Banana" description={<div>Laborum ad</div>}>
+        Banana
+      </Checkbox>
+      <Checkbox value="Melon">Melon</Checkbox>
+    </CheckboxGroup>
+  );
+
  return (
    <>
-      <h1>Checkboxes</h1>
-      <CheckboxGroup legend="Mollit eiusmod">
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>description</h2>
-      <CheckboxGroup
-        legend="Mollit eiusmod"
-        description="Exercitation do labore"
-      >
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange" description="Laborum ad">
-          Orange
-        </Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>error</h2>
-      <CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>error uten errorPropagation</h2>
-      <CheckboxGroup
-        legend="Mollit eiusmod"
-        errorPropagation={false}
-        error="Boks nr 2 må være valgt"
-      >
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange" error="Boksen må være valgt">
-          Orange
-        </Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>Sizing</h2>
-      <CheckboxGroup
-        legend="Mollit eiusmod"
-        error="Boks nr 2 må være valgt"
-        size="small"
-      >
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>defaultValue</h2>
-      <CheckboxGroup legend="Mollit eiusmod" defaultValue={["Orange", "Melon"]}>
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>hideLenged</h2>
-      <CheckboxGroup legend="Mollit eiusmod" hideLegend>
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <h2>hideLabel</h2>
-      <CheckboxGroup legend="Mollit eiusmod">
-        <Checkbox value="Apple" hideLabel>
-          Apple
-        </Checkbox>
-        <Checkbox value="Orange" hideLabel>
-          Orange
-        </Checkbox>
-        <Checkbox value="Melon" hideLabel>
-          Melon
-        </Checkbox>
-      </CheckboxGroup>
-      <h2>Disabled</h2>
-      <CheckboxGroup legend="Mollit eiusmod" disabled>
-        <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
-      <CheckboxGroup legend="Mollit eiusmod">
-        <Checkbox value="Apple" disabled>
-          Apple
-        </Checkbox>
-        <Checkbox value="Orange">Orange</Checkbox>
-        <Checkbox value="Melon">Melon</Checkbox>
-      </CheckboxGroup>
+      <h1>Checkbox</h1>
+      <h2>Single checkbox</h2>
+      <Checkbox value="Apple">Apple</Checkbox>
+      <h3>Desription</h3>
+      <Checkbox value="Apple" description="Laborum ad" defaultChecked>
+        Apple
+      </Checkbox>
+      <h3>Error</h3>
+      <Checkbox value="Apple" error>
+        Apple
+      </Checkbox>
+      <Checkbox value="Apple" error defaultChecked>
+        Orange
+      </Checkbox>
+      <h3>Hide label</h3>
+      <Checkbox value="Apple" hideLabel description="Laborum ad">
+        Apple
+      </Checkbox>
+      <h3>Disabled</h3>
+      <Checkbox value="Apple" disabled>
+        Apple
+      </Checkbox>
+      <Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
+        Orange
+      </Checkbox>
+
+      <h2>Checkbox group</h2>
+      <Checkboxes />
+      <h3>Error</h3>
+      <Checkboxes error="Dette er en feilmelding" />
+      <h3>Small</h3>
+      <Checkboxes size="small" />
+      <h3>Small + error</h3>
+      <Checkboxes size="small" error="Dette er en feilmelding" />
+      <h3>Default value</h3>
+      <Checkboxes defaultValue={["Orange", "Melon"]} />
+      <h3>Disabled</h3>
+      <Checkboxes disabled />
    </>
  );
 };
@@ -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) {
@@ -12,6 +12,7 @@ export {
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
 export { SearchField, SearchFieldProps } from "./search-field";
 export { default as Select, SelectProps } from "./Select";
+export { default as Switch, SwitchProps } from "./Switch";
 export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";
@@ -0,0 +1,63 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import faker from "faker";
+import { Radio, RadioGroup } from ".";
+
+const value1 = faker.datatype.string();
+const label1 = faker.datatype.string();
+const value2 = faker.datatype.string();
+const label2 = faker.datatype.string();
+
+const Group = (props) => (
+  <RadioGroup {...props} legend="legend">
+    <Radio value={value1}>{label1}</Radio>
+    <Radio value={value2}>{label2}</Radio>
+  </RadioGroup>
+);
+
+describe("Controlled RadioGroup", () => {
+  const originalError = console.error;
+  const mockError = jest.fn();
+  beforeEach(() => (console.error = mockError));
+  afterEach(() => (console.error = originalError));
+
+  test("doesnt console.error", () => {
+    const { rerender } = render(<Group value={value1} />);
+    rerender(<Group value={value2} />);
+
+    expect(mockError).toHaveBeenCalledTimes(0);
+  });
+});
+
+describe("Uncontrolled RadioGroup", () => {
+  test("handles state correctly", () => {
+    render(<Group />);
+
+    const input1 = screen.getByLabelText(label1) as HTMLInputElement;
+    const input2 = screen.getByLabelText(label2) as HTMLInputElement;
+
+    expect(input1.checked).toBe(false);
+    expect(input2.checked).toBe(false);
+
+    userEvent.click(screen.getByLabelText(label2));
+
+    expect(input1.checked).toBe(false);
+    expect(input2.checked).toBe(true);
+  });
+
+  test("handles defaultValue correctly", () => {
+    render(<Group defaultValue={value1} />);
+
+    const input1 = screen.getByLabelText(label1) as HTMLInputElement;
+    const input2 = screen.getByLabelText(label2) as HTMLInputElement;
+
+    expect(input1.checked).toBe(true);
+    expect(input2.checked).toBe(false);
+
+    userEvent.click(screen.getByLabelText(label2));
+
+    expect(input1.checked).toBe(false);
+    expect(input2.checked).toBe(true);
+  });
+});
@@ -1,70 +1,56 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "classnames";
-import { BodyShort, omit } from "../..";
-import ErrorMessage from "../ErrorMessage";
+import { BodyShort, Detail, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useRadio } from "./useRadio";

 export interface RadioProps
-  extends FormFieldProps,
+  extends Omit<FormFieldProps, "error" | "errorId">,
    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
  /**
   * Label for radio
   */
  children: React.ReactNode;
+  /**
+   * The value of the HTML element
+   */
  value: string;
 }

 const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    size,
-    hasError,
-    inputDescriptionId,
-  } = useRadio(props);
+  const { inputProps, size, hasError } = useRadio(props);
+
+  const Description = size === "medium" ? BodyShort : Detail;

  return (
    <div
      className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
        "navds-radio--error": hasError,
-        "navds-radio--with-error-message": showErrorMsg,
-        "navds-radio--with-description": !!props.description,
+        "navds-radio--disabled": inputProps.disabled,
      })}
    >
      <input
-        {...omit(props, [
-          "children",
-          "size",
-          "error",
-          "errorId",
-          "description",
-        ])}
+        {...omit(props, ["children", "size", "description"])}
        {...inputProps}
        className="navds-radio__input"
        ref={ref}
      />
-      <BodyShort
-        as="label"
-        htmlFor={inputProps.id}
-        size={size}
-        className="navds-radio__label"
-      >
-        {props.children}
-      </BodyShort>
-      {props.description && (
-        <BodyShort
-          size={size}
-          id={inputDescriptionId}
-          className="navds-radio__description"
-        >
-          {props.description}
-        </BodyShort>
-      )}
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
-      </div>
+      <label htmlFor={inputProps.id} className="navds-radio__label">
+        <div className="navds-radio__content">
+          <BodyShort as="div" size={size}>
+            {props.children}
+          </BodyShort>
+          {props.description && (
+            <Description
+              as="div"
+              size="small"
+              className="navds-radio__description"
+            >
+              {props.description}
+            </Description>
+          )}
+        </div>
+      </label>
    </div>
  );
 });
@@ -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
   */
@@ -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
@@ -7,75 +7,47 @@ export default {
 } as Meta;

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

 /**
 * Handles props for Radios in context with Fieldset and RadioGroup
@@ -9,7 +10,10 @@ import { RadioGroupContext } from "./RadioGroup";
 export const useRadio = (props: RadioProps) => {
  const radioGroup = useContext(RadioGroupContext);

-  const { inputProps, ...rest } = useFormField(props, "radio");
+  const { inputProps, ...rest } = useFormField(
+    omit(props, ["description"]),
+    "radio"
+  );

  if (!radioGroup) {
    console.warn("<Radio> must be used inside <RadioGroup>.");
@@ -24,10 +28,14 @@ export const useRadio = (props: RadioProps) => {
    inputProps: {
      ...inputProps,
      name: radioGroup?.name,
+      defaultChecked:
+        radioGroup?.defaultValue === undefined
+          ? undefined
+          : radioGroup?.defaultValue === props.value,
      checked:
-        (radioGroup?.value ?? radioGroup?.defaultValue) === props.value
-          ? true
-          : undefined,
+        radioGroup?.value === undefined
+          ? undefined
+          : radioGroup?.value === props.value,
      onChange: (e) => {
        props.onChange && props.onChange(e);
        radioGroup?.onChange && radioGroup.onChange(props.value);
@@ -79,7 +79,10 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
          "navds-form-field",
          `navds-form-field--${size ?? "medium"}`,
          "navds-search-field",
-          { "navds-search-field--error": hasError }
+          {
+            "navds-search-field--error": hasError,
+            "navds-search-field--disabled": !!inputProps.disabled,
+          }
        )}
      >
        <Label
@@ -94,6 +97,7 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
        </Label>
        {!!description && (
          <BodyShort
+            as="div"
            className={cl("navds-text-field__description", {
              "sr-only": hideLabel,
            })}
@@ -15,7 +15,7 @@ export const All = () => {
      <h1>SearchField</h1>
      <SearchField
        label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
+        description={<div>Ea cupidatat eu sunt commodo</div>}
      >
        <SearchField.Input />
        <SearchField.Button>
@@ -170,6 +170,30 @@ export const All = () => {
          <SearchField.Input />
        </SearchField>
      </Fieldset>
+
+      <h2>Disabled </h2>
+      <SearchField
+        disabled
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+      >
+        <SearchField.Input />
+        <SearchField.Button>
+          <Search /> Søk
+        </SearchField.Button>
+      </SearchField>
+      <Fieldset legend="Filter" disabled>
+        <SearchField
+          label="Mollit eiusmod"
+          description="Ea cupidatat eu sunt commodo"
+          error="Errormsg"
+        >
+          <SearchField.Input />
+          <SearchField.Button>
+            <Search /> Søk
+          </SearchField.Button>
+        </SearchField>
+      </Fieldset>
    </>
  );
 };
@@ -21,9 +21,13 @@ export const All = () => {

      <Fieldset
        legend="Mollit eiusmod"
-        description="Quis reprehenderit esse cillum"
+        description={<div>Quis reprehenderit esse cillum</div>}
      >
-        <TextField label="Textfield label" hideLabel />
+        <TextField
+          label="Textfield label"
+          hideLabel
+          description={<div>Quis reprehenderit esse cillum</div>}
+        />
        <TextField label="Textfield label" hideLabel />
      </Fieldset>

@@ -19,7 +19,7 @@ export const All = () => {

      <h2>Description</h2>

-      <Select label="Ipsum enim quis culpa" description="Aute enim">
+      <Select label="Ipsum enim quis culpa" description={<div>Aute enim</div>}>
        <option value="">Velg land</option>
        <option value="norge">Norge</option>
        <option value="sverige">Sverige</option>
@@ -0,0 +1,104 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Switch } from "../index";
+
+<Meta title="ds-react/form/switch/intro" />
+
+# Hvordan ta i bruk Switch
+
+```jsx
+<Switch>Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch>Slå på feature</Switch>
+</Canvas>
+
+## Description
+
+```jsx
+<Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
+</Canvas>
+
+## Sizing
+
+Switch har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
+
+```jsx
+<Switch size="small" >Slå på feature</Switch>
+<Switch size="small" description="Dette vil gjøre x og y">Slå på feature</Switch>
+```
+
+<Canvas>
+  <div>
+    <Switch size="small">Slå på feature</Switch>
+    <Switch size="small" description="Dette vil gjøre x og y">
+      Slå på feature
+    </Switch>
+  </div>
+</Canvas>
+
+## defaultChecked
+
+Switch er en stylet checkbox, så både `checked` og `defaultChecked` fungerer
+
+```jsx
+<Switch defaultChecked>Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch defaultChecked>Slå på feature</Switch>
+</Canvas>
+
+## hideLabel
+
+Ved bruk av `hideLegend` på Switch kan man gjøre slik at legend/description bare vises for skjermlesere
+
+```jsx
+<Switch hideLabel>Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch hideLabel>Slå på feature</Switch>
+</Canvas>
+
+## Disabled
+
+Ved bruk av `disabled` kan man både disabled enkelte checkboxer eller checkboxgruppen.
+
+NOTE: Husk at disabled bør unngås!
+
+```jsx
+<Switch disabled>Slå på feature</Switch>
+```
+
+<Canvas>
+  <div>
+    <Switch disabled>Slå på feature</Switch>
+    <Switch disabled defaultChecked>
+      Slå på feature
+    </Switch>
+  </div>
+</Canvas>
+
+## Loading
+
+Om systemet bruker tid på å utføre handlingen vises en loading-indikator på switch’en.
+Om ventetiden er mer enn noen sekunder bør en forklarende tekst også vises.
+Teksten må forklare kort og godt hvorfor brukeren må vente.
+
+```jsx
+<Switch loading>Slå på feature</Switch>
+```
+
+<Canvas>
+  <div>
+    <Switch loading>Slå på feature</Switch>
+    <Switch loading defaultChecked>
+      Slå på feature
+    </Switch>
+  </div>
+</Canvas>
@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { Switch } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+import { Fieldset } from "../..";
+export default {
+  title: "ds-react/form/switch",
+  component: Switch,
+} as Meta;
+
+export const All = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div>
+      <h1>Switch</h1>
+      <Switch>Label text</Switch>
+
+      <h2>Switch w/Description</h2>
+      <Switch>Label text</Switch>
+      <Switch description="Switch description">Label text</Switch>
+      <Switch>Label text</Switch>
+
+      <h2>hidelabel</h2>
+      <Switch description="Switch description" hideLabel>
+        Label text
+      </Switch>
+      <Switch description="Switch description" hideLabel>
+        Label text
+      </Switch>
+      <Switch hideLabel size="small">
+        Label text small
+      </Switch>
+
+      <h2>Switch small</h2>
+      <Switch size="small">Label text</Switch>
+      <Switch description="Switch description" size="small">
+        Label text
+      </Switch>
+      <Switch size="small">Label text</Switch>
+
+      <h2>Controlled</h2>
+      <Switch checked={checked} onChange={() => setChecked(!checked)}>
+        Label text
+      </Switch>
+
+      <h2>Defaultchecked</h2>
+      <Switch defaultChecked>Label text</Switch>
+
+      <h2>Disabled</h2>
+      <Switch disabled>Label text</Switch>
+      <Switch disabled defaultChecked>
+        Label text
+      </Switch>
+
+      <h2>With fieldset error</h2>
+      <Fieldset legend="Fieldset legend" error="Errormsg">
+        <Switch defaultChecked>Label text</Switch>
+        <Switch>Label text</Switch>
+      </Fieldset>
+
+      <h2>loading prop</h2>
+      <Switch loading>Label text</Switch>
+      <Switch size="small" loading>
+        Label text
+      </Switch>
+      <Switch disabled loading>
+        Label text
+      </Switch>
+    </div>
+  );
+};
@@ -15,7 +15,10 @@ export const All = () => {

      <h2>Description</h2>

-      <TextField label="Laborum excepteur" description="Cillum mollit" />
+      <TextField
+        label="Laborum excepteur"
+        description={<div>Cillum mollit</div>}
+      />

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

      <Textarea
        label="In anim elit"
-        description="Reprehenderit esse proident"
+        description={<div>Reprehenderit esse proident</div>}
        value={value}
        onChange={handleChange}
      />
@@ -78,7 +78,17 @@ export const All = () => {
        description="Reprehenderit esse proident"
        maxLength={400}
        disabled
-        value={value}
+        value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
+        onChange={handleChange}
+      />
+      <h2>Readonly</h2>
+
+      <Textarea
+        label="In anim elit"
+        description="Reprehenderit esse proident"
+        maxLength={400}
+        readOnly
+        value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
        onChange={handleChange}
      />
    </div>
@@ -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
  }
 }
 ```
@@ -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
  );
 }
@@ -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.
@@ -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
@@ -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"
@@ -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;
-```
@@ -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",
@@ -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.
@@ -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.
@@ -1,5 +1,7 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
+import { BodyShort } from "..";
+import { TableContext } from ".";

 interface DataCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}

@@ -8,8 +10,22 @@ export interface DataCellType
    DataCellProps & React.RefAttributes<HTMLTableCellElement>
  > {}

-const DataCell: DataCellType = forwardRef(({ className, ...rest }, ref) => (
-  <td {...rest} ref={ref} className={cl("navds-table__cell", className)} />
-));
+const DataCell: DataCellType = forwardRef(
+  ({ className, children = "", ...rest }, ref) => {
+    const context = useContext(TableContext);
+
+    return (
+      <BodyShort
+        as="td"
+        ref={ref}
+        className={cl("navds-table__data-cell", className)}
+        size={context?.size}
+        {...rest}
+      >
+        {children}
+      </BodyShort>
+    );
+  }
+);

 export default DataCell;
@@ -1,15 +1,32 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
+import { Label, TableContext } from "..";

-interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}
+interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  scope?: string;
+}

 export interface HeaderCellType
  extends React.ForwardRefExoticComponent<
    HeaderCellProps & React.RefAttributes<HTMLTableCellElement>
  > {}

-const HeaderCell: HeaderCellType = forwardRef(({ className, ...rest }, ref) => (
-  <th {...rest} ref={ref} className={cl("navds-table__cell", className)} />
-));
+const HeaderCell: HeaderCellType = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    const context = useContext(TableContext);
+
+    return (
+      <Label
+        as="th"
+        ref={ref}
+        className={cl("navds-table__header-cell", className)}
+        size={context?.size}
+        {...rest}
+      >
+        {children}
+      </Label>
+    );
+  }
+);

 export default HeaderCell;
@@ -1,15 +1,29 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";

-interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {}
+interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  /**
+   * Row is selected
+   * @default false
+   */
+  selected?: boolean;
+}

 export interface RowType
  extends React.ForwardRefExoticComponent<
    RowProps & React.RefAttributes<HTMLTableRowElement>
  > {}

-const Row: RowType = forwardRef(({ className, ...rest }, ref) => (
-  <tr {...rest} ref={ref} className={cl("navds-table__row", className)} />
-));
+const Row: RowType = forwardRef(
+  ({ className, selected = false, ...rest }, ref) => (
+    <tr
+      {...rest}
+      ref={ref}
+      className={cl("navds-table__row", className, {
+        "navds-table__row--selected": selected,
+      })}
+    />
+  )
+);

 export default Row;
@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { createContext, forwardRef } from "react";
 import cl from "classnames";
 import Header, { HeaderType } from "./Header";
 import Body, { BodyType } from "./Body";
@@ -12,6 +12,11 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   * @default "medium"
   */
  size?: "medium" | "small";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
 }

 export interface TableType
@@ -25,13 +30,25 @@ export interface TableType
  HeaderCell: HeaderCellType;
 }

-const Table = forwardRef(({ className, size = "medium", ...rest }, ref) => (
-  <table
-    {...rest}
-    ref={ref}
-    className={cl("navds-table", `navds-table--${size}`, className)}
-  />
-)) as TableType;
+export interface TableContextProps {
+  size: "medium" | "small";
+}
+
+export const TableContext = createContext<TableContextProps | null>(null);
+
+const Table = forwardRef(
+  ({ className, zebraStripes = false, size = "medium", ...rest }, ref) => (
+    <TableContext.Provider value={{ size }}>
+      <table
+        {...rest}
+        ref={ref}
+        className={cl("navds-table", `navds-table--${size}`, className, {
+          "navds-table--zebra-stripes": zebraStripes,
+        })}
+      />
+    </TableContext.Provider>
+  )
+) as TableType;

 Table.Header = Header;
 Table.Body = Body;
@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { Table } from "../index";
-import { Alert, Link } from "@navikt/ds-react";
+import { Alert, Checkbox, Link } from "@navikt/ds-react";

 export default {
  title: "ds-react/table",
@@ -8,70 +8,46 @@ export default {
 };

 export const All = () => {
+  const TableComponent = (props) => (
+    <Table {...props}>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>ID</Table.HeaderCell>
+          <Table.HeaderCell>Fornavn</Table.HeaderCell>
+          <Table.HeaderCell>Etternavn</Table.HeaderCell>
+          <Table.HeaderCell>Rolle</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        <Table.Row>
+          <Table.HeaderCell>1</Table.HeaderCell>
+          <Table.DataCell>Jean-Luc</Table.DataCell>
+          <Table.DataCell>Picard</Table.DataCell>
+          <Table.DataCell>Kaptein</Table.DataCell>
+        </Table.Row>
+        <Table.Row>
+          <Table.HeaderCell>2</Table.HeaderCell>
+          <Table.DataCell>William</Table.DataCell>
+          <Table.DataCell>Riker</Table.DataCell>
+          <Table.DataCell>Kommandør</Table.DataCell>
+        </Table.Row>
+        <Table.Row>
+          <Table.HeaderCell>3</Table.HeaderCell>
+          <Table.DataCell>Geordi</Table.DataCell>
+          <Table.DataCell>La Forge</Table.DataCell>
+          <Table.DataCell>Sjefsingeniør</Table.DataCell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
  return (
    <>
      <h1>Table</h1>
-      <Table>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>ID</Table.HeaderCell>
-            <Table.HeaderCell>Fornavn</Table.HeaderCell>
-            <Table.HeaderCell>Etternavn</Table.HeaderCell>
-            <Table.HeaderCell>Rolle</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          <Table.Row>
-            <Table.HeaderCell>1</Table.HeaderCell>
-            <Table.DataCell>Jean-Luc</Table.DataCell>
-            <Table.DataCell>Picard</Table.DataCell>
-            <Table.DataCell>Kaptein</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>2</Table.HeaderCell>
-            <Table.DataCell>William</Table.DataCell>
-            <Table.DataCell>Riker</Table.DataCell>
-            <Table.DataCell>Kommandør</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>3</Table.HeaderCell>
-            <Table.DataCell>Geordi</Table.DataCell>
-            <Table.DataCell>La Forge</Table.DataCell>
-            <Table.DataCell>Sjefsingeniør</Table.DataCell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
+      <TableComponent />
+      <h2>Zebra</h2>
+      <TableComponent zebraStripes />
      <h2>Small Table</h2>
-      <Table size="small">
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>ID</Table.HeaderCell>
-            <Table.HeaderCell>Fornavn</Table.HeaderCell>
-            <Table.HeaderCell>Etternavn</Table.HeaderCell>
-            <Table.HeaderCell>Rolle</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          <Table.Row>
-            <Table.HeaderCell>1</Table.HeaderCell>
-            <Table.DataCell>Jean-Luc</Table.DataCell>
-            <Table.DataCell>Picard</Table.DataCell>
-            <Table.DataCell>Kaptein</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>2</Table.HeaderCell>
-            <Table.DataCell>William</Table.DataCell>
-            <Table.DataCell>Riker</Table.DataCell>
-            <Table.DataCell>Kommandør</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>3</Table.HeaderCell>
-            <Table.DataCell>Geordi</Table.DataCell>
-            <Table.DataCell>La Forge</Table.DataCell>
-            <Table.DataCell>Sjefsingeniør</Table.DataCell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
+      <TableComponent size="small" />
      <h2>Table with divs</h2>
      <Alert variant="warning">
        Obs! Hvis man skal bygge tabeller uten å bruke vanlig {"<tabell> "}
@@ -87,48 +63,48 @@ export const All = () => {
      <div className="navds-table" role="table">
        <div className="navds-table__header" role="rowgroup">
          <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="columnheader">
+            <div className="navds-table__header-cell" role="columnheader">
              Fornavn
            </div>
-            <div className="navds-table__cell" role="columnheader">
+            <div className="navds-table__header-cell" role="columnheader">
              Etternavn
            </div>
-            <div className="navds-table__cell" role="columnheader">
+            <div className="navds-table__header-cell" role="columnheader">
              Rolle
            </div>
          </div>
        </div>
        <div className="navds-table__body" role="rowgroup">
          <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Jean-Luc
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Picard
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Kaptein
            </div>
          </div>
          <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              William
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Riker
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Kommandør
            </div>
          </div>
          <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Geordi
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              La Forge
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Sjefsingeniør
            </div>
          </div>
@@ -137,3 +113,110 @@ export const All = () => {
    </>
  );
 };
+
+export const Selection = () => (
+  <>
+    <h1>Selection</h1>
+    <h2>Medium</h2>
+    <SelectionTable />
+    <h2>Small</h2>
+    <SelectionTable size="small" />
+  </>
+);
+
+const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
+  const useToggleList = (initialState) => {
+    const [list, setList] = useState(initialState);
+
+    return [
+      list,
+      (value) =>
+        setList((list) =>
+          list.includes(value)
+            ? list.filter((id) => id !== value)
+            : [...list, value]
+        ),
+    ];
+  };
+
+  const [selectedRows, toggleSelectedRow] = useToggleList([]);
+
+  return (
+    <Table size={size} zebraStripes>
+      <Table.Body>
+        <Table.Row>
+          <Table.DataCell>
+            <Checkbox
+              size={size}
+              checked={selectedRows.includes("all")}
+              onChange={() => toggleSelectedRow("all")}
+            >
+              Select all
+            </Checkbox>
+          </Table.DataCell>
+          <Table.HeaderCell scope="col">Name</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Age</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Country</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Points</Table.HeaderCell>
+        </Table.Row>
+        <Table.Row selected={selectedRows.includes("1")}>
+          <Table.DataCell>
+            <Checkbox
+              size={size}
+              hideLabel
+              checked={selectedRows.includes("1")}
+              onChange={() => toggleSelectedRow("1")}
+              aria-labelledby={`x_r1-${size}`}
+            >
+              {" "}
+            </Checkbox>
+          </Table.DataCell>
+          <Table.HeaderCell scope="row">
+            <span id={`x_r1-${size}`}>Donald Smith</span>
+          </Table.HeaderCell>
+          <Table.DataCell>32</Table.DataCell>
+          <Table.DataCell>USA</Table.DataCell>
+          <Table.DataCell>38</Table.DataCell>
+        </Table.Row>
+        <Table.Row selected={selectedRows.includes("2")}>
+          <Table.DataCell>
+            <Checkbox
+              size={size}
+              hideLabel
+              checked={selectedRows.includes("2")}
+              onChange={() => toggleSelectedRow("2")}
+              aria-labelledby={`x_r2-${size}`}
+            >
+              {" "}
+            </Checkbox>
+          </Table.DataCell>
+          <Table.HeaderCell scope="row">
+            <span id={`x_r2-${size}`}>Preben Aalborg</span>
+          </Table.HeaderCell>
+          <Table.DataCell>44</Table.DataCell>
+          <Table.DataCell>Denmark</Table.DataCell>
+          <Table.DataCell>11</Table.DataCell>
+        </Table.Row>
+        <Table.Row selected={selectedRows.includes("3")}>
+          <Table.DataCell>
+            <Checkbox
+              size={size}
+              hideLabel
+              checked={selectedRows.includes("3")}
+              onChange={() => toggleSelectedRow("3")}
+              aria-labelledby={`x_r3-${size}`}
+            >
+              {" "}
+            </Checkbox>
+          </Table.DataCell>
+          <Table.HeaderCell scope="row">
+            <span id={`x_r3-${size}`}>Rudolph Bachenmeier</span>
+          </Table.HeaderCell>
+          <Table.DataCell>32</Table.DataCell>
+          <Table.DataCell>Germany</Table.DataCell>
+          <Table.DataCell>70</Table.DataCell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
+};
@@ -1,3 +1,3 @@
 .typo-story > div:nth-child(even) {
-  background: var(--navds-color-gray-20);
+  background: var(--navds-global-color-gray-200);
 }
@@ -1,5 +1,5 @@
 {
-  "source": ["src/index.js"],
+  "source": ["src/index.js", "src/**/*.json"],
  "platforms": {
    "scss": {
      "transformGroup": "scss",
@@ -27,7 +27,10 @@
      "files": [
        {
          "destination": "tokens.css",
-          "format": "css/variables"
+          "format": "css/variables",
+          "options": {
+            "outputReferences": true
+          }
        }
      ]
    },
@@ -41,7 +44,7 @@
        },
        {
          "destination": "tokens-cjs.js",
-          "format": "javascript/module"
+          "format": "javascript/module-flat"
        }
      ]
    }
@@ -0,0 +1,35 @@
+import { writeFileSync } from "fs";
+import { resolve } from "path";
+import formatToStyleDictionary from "./format-sd";
+import globalColorRefs, { ColorT } from "./global-color-ref";
+import parseName from "./parse-name";
+
+type FigmaColorsT = {
+  [key: string]: string;
+};
+
+const parseColors = async (figmaColors: FigmaColorsT) => {
+  /* Parse name and color into correct format */
+  const colors: ColorT[] = Object.entries(figmaColors)
+    .map(([key, value]) => ({
+      name: parseName(key),
+      color: value,
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .reverse();
+
+  /* Make semantic colors reference global colors */
+  const colorsWithRef = globalColorRefs(colors).reduce(
+    (old, color) => ({ [color.name]: color.color, ...old }),
+    {}
+  );
+
+  const styleDictionaryFormat = formatToStyleDictionary(colorsWithRef, "color");
+
+  writeFileSync(
+    resolve("./src/colors.json"),
+    JSON.stringify(styleDictionaryFormat, null, 2)
+  );
+};
+
+export default parseColors;
@@ -0,0 +1,26 @@
+import unifyNestedLevel from "./unify-nested-level";
+
+const deepen = (obj: { [key: string]: { value: string } }) => {
+  const result = {};
+
+  const workObj = unifyNestedLevel(obj);
+
+  // For each object path (property key) in the object
+  for (const objectPath in workObj) {
+    // Split path into component parts
+    const parts = objectPath.split("-");
+
+    // Create sub-objects along path as needed
+    let target = result;
+    while (parts.length > 1) {
+      const part = parts.shift();
+      target = target[part] = target[part] || {};
+    }
+    // Set value at end of path
+    target[parts[0]] = workObj[objectPath];
+  }
+
+  return result;
+};
+
+export default deepen;
@@ -0,0 +1,46 @@
+import Axios from "axios";
+const { create } = Axios;
+const dotenv = require("dotenv");
+dotenv.config();
+
+const FIGMA_FILE = "m0qpSPpsnNC9DwdmerGqJH";
+
+const FigmaAxion = (token) =>
+  create({
+    headers: {
+      "X-FIGMA-TOKEN": token,
+    },
+  });
+
+export const fetchFile = async () => {
+  const { data } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/${FIGMA_FILE}`)
+    .catch((e) => {
+      throw e;
+    });
+  return data;
+};
+
+export const fetchFileStyles = async () => {
+  const {
+    data: {
+      meta: { styles },
+    },
+  } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/${FIGMA_FILE}/styles`)
+    .catch((e) => {
+      throw e;
+    });
+  return styles;
+};
+
+export const fetchSyncDocument = async () => {
+  const {
+    data: { document },
+  } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/A7fbghTh75Hk65SieEhaKK`)
+    .catch((e) => {
+      throw e;
+    });
+  return document;
+};
@@ -0,0 +1,77 @@
+import { Node, DOCUMENT } from "figma-api";
+import paintToRgba from "./paint-to-rgba";
+
+interface StyleId {
+  id: string;
+  styleType: "TEXT" | "FILL";
+}
+
+const styleFieldNames = {
+  TEXT: ["text"],
+  FILL: ["fill", "fills", "stroke", "strokes"],
+};
+
+const findNodeWithStyle = (node: Node<any>, styleId: StyleId): Node<any> => {
+  if (
+    node.hasOwnProperty("styles") &&
+    styleFieldNames[styleId.styleType]?.some(
+      (name) => node.styles[name] === styleId.id
+    )
+  ) {
+    return node;
+  } else if (node.children) {
+    for (const child of node.children) {
+      const res = findNodeWithStyle(child, styleId);
+      if (res) {
+        return res;
+      }
+    }
+  }
+};
+
+const findStyleValue = (document: DOCUMENT, styleId: StyleId) => {
+  const node = findNodeWithStyle(document, styleId);
+  if (styleId.id === "5249:11258") {
+  }
+
+  switch (styleId.styleType) {
+    case "FILL":
+      if (node) {
+        if (
+          node.styles.stroke === styleId.id ||
+          node.styles.strokes === styleId.id
+        ) {
+          return paintToRgba(node.strokes[0]);
+        } else {
+          return paintToRgba(node.fills[0]);
+        }
+      } else {
+        return undefined;
+      }
+    case "TEXT":
+      if (node) {
+        return node?.style;
+      } else {
+        return undefined;
+      }
+  }
+};
+
+const styleTypeName = {
+  FILL: "colors",
+  TEXT: "textStyles",
+};
+
+const getFileStyles = (file, fileStyles) =>
+  fileStyles.reduce(
+    (styles, { node_id: id, style_type: styleType, name }) => ({
+      ...styles,
+      [styleTypeName[styleType]]: {
+        ...styles[styleTypeName[styleType]],
+        [name]: findStyleValue(file.document, { id, styleType }),
+      },
+    }),
+    {}
+  );
+
+export default getFileStyles;
@@ -0,0 +1,35 @@
+import deepen from "./deepen";
+
+const formatToStyleDictionary = (
+  colors: { [key: string]: string },
+  type: "color" | "spacing"
+) => {
+  switch (type) {
+    case "color": {
+      return deepen(
+        Object.entries(colors).reduce(
+          (old, [key, val]) =>
+            val.startsWith("rgba")
+              ? { ...old, [key]: { value: val } }
+              : {
+                  ...old,
+                  [key]: { value: `{${val.replace(/-/g, ".")}.value}` },
+                },
+          {}
+        )
+      );
+    }
+    case "spacing": {
+      return deepen(
+        Object.entries(colors).reduce(
+          (old, [key, val]) => ({ ...old, [key]: { value: val } }),
+          {}
+        )
+      );
+    }
+    default:
+      return {};
+  }
+};
+
+export default formatToStyleDictionary;
@@ -0,0 +1,21 @@
+import Color from "color";
+
+export type ColorT = {
+  name: string;
+  color: string;
+};
+
+const globalColorRefs = (colors: ColorT[]) => {
+  const globalColors = colors.filter((c) => c.name.includes("-global-"));
+
+  return colors.map((c) => {
+    if (c.name.includes("-global-")) return c;
+
+    const globalColor = globalColors.find(
+      (g) => Color(g.color).string() === Color(c.color).string()
+    );
+    return globalColor ? { name: c.name, color: globalColor.name } : c;
+  });
+};
+
+export default globalColorRefs;
@@ -0,0 +1,28 @@
+import dotenv from "dotenv";
+import parseColors from "./colors";
+import getFileStyles from "./file-styles";
+import { fetchFile, fetchFileStyles, fetchSyncDocument } from "./fetch";
+/* import Spacing from "./spacing"; */
+
+dotenv.config();
+
+const main = async () => {
+  await Promise.all([fetchFile(), fetchFileStyles(), fetchSyncDocument()])
+    .then(([file, styles, document]) => {
+      const parsedStyles = getFileStyles(file, styles);
+      parsedStyles.colors && parseColors(parsedStyles.colors);
+
+      // TODO: Get spacing by crawling like with colors
+      /* Spacing(document); */
+    })
+    .catch((e) => {
+      console.log("Failed fetching styles and file from figma");
+      throw e;
+    });
+};
+
+try {
+  main();
+} catch (e) {
+  console.error(e.message);
+}
Author	SHA1	Message	Date
github-actions[bot]	ce1c6de935	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.6 - @navikt/ds-react@0.14.2 - @navikt/ds-react-internal@0.9.2	2021-12-21 14:02:07 +00:00
Ken	6f430ae69c	[FIX] Switch-komponent (#1359 )	2021-12-21 14:47:59 +01:00
github-actions[bot]	ab03820591	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.5	2021-12-17 12:27:25 +00:00
Andreas Nordahl	9016c9bff4	[fix] selector specificity bug in zebra table (#1370 )	2021-12-17 13:14:11 +01:00
github-actions[bot]	99ed25a0b4	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.4 - @navikt/ds-react@0.14.1 - @navikt/ds-react-internal@0.9.1	2021-12-17 10:23:03 +00:00
Andreas NordahlandKen	488168f6ed	[fix] Table updates (#1369 ) * adjust table sizes * add table body row hover style * add zebra style option to table * add simple table row selection * add table row hover dark borderC * move table checkbox style to table.css * small selection table * fix token ref * a11y table story for morten * hack type errors * fix id issue * Update @navikt/core/css/table.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/table.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/table.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * define table css custom props Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2021-12-17 11:10:19 +01:00
Ken	12d81f8553	[ci skip] Fjernet ubrukte eksempler	2021-12-16 15:47:49 +01:00
Ken	abcee8bad6	[ci skip] fjernet cron-job tokens	2021-12-16 15:37:46 +01:00
github-actions[bot]	815b07c3ff	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.3	2021-12-16 10:04:44 +00:00
Ken	942d0c522a	[FIX] FIkser bakgrunn for textarea (#1368 )	2021-12-16 10:52:01 +01:00
Ken	34dfa9d1ee	exitZeroOnChanges: false chromatic workflow	2021-12-15 22:57:46 +01:00
Ken	fa3032d13c	chromatic workflow	2021-12-15 22:09:47 +01:00
Ken	b12086625a	[ci skip] chromatic workflow	2021-12-15 17:56:32 +01:00
Ken	c1e78d0359	[ci skip] chromatic workflow	2021-12-15 16:36:19 +01:00
Ken	7fbad47841	[ci skip] chromatic workflow	2021-12-15 15:13:07 +01:00
Ken	3c426e07e7	[ci skip] chromatic-workflow	2021-12-15 15:06:55 +01:00
Ken	662ab4cbfd	[ci skip] Tester endring i conditionals, chromatic-workflow	2021-12-15 14:45:49 +01:00
Ken	85a816e415	[ci skip] Finner nå riktig chromatic comment i pr	2021-12-15 14:26:59 +01:00
Ken	613339f289	[ci skip] logger chromatic output	2021-12-14 17:17:10 +01:00
Ken	48b42c0a8f	[ci skip] fikset comments	2021-12-14 16:57:28 +01:00
Ken	a28b70343a	get status for chromatic build in comments	2021-12-14 16:39:29 +01:00
Ken	762fa3ef08	continue-on-error for chromatic error	2021-12-14 16:17:18 +01:00
Ken	8bf95d7c58	splittet push og pr build	2021-12-14 15:39:25 +01:00
Ken	3a08d0e25c	la til commit-sha i chromatic melding	2021-12-14 15:21:31 +01:00
Ken	685b443374	chromatic-status fix	2021-12-14 15:18:22 +01:00
Ken	d107eecc93	la til chromatic status i comment	2021-12-14 15:06:20 +01:00
Ken	879d8f6306	workflow for chromatic pr, fjernet vercel	2021-12-14 15:04:06 +01:00
github-actions[bot]	6641304e0e	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.2	2021-12-14 11:03:29 +00:00
Ken	d56d329547	[FIX] button:disabled opacity til 0.3, tidligere 30% (#1363 )	2021-12-14 11:48:29 +01:00
Ken	afefca5b46	Update chromatic.yml	2021-12-14 11:30:57 +01:00
Ken	918a189c3e	oppdatert workflow	2021-12-14 11:15:13 +01:00
Ken	bef36ccf81	workflow for chromatic PR	2021-12-14 11:13:13 +01:00
github-actions[bot]	80ad6349e2	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.1	2021-12-13 12:41:19 +00:00
Ken	67dc10d290	[FIX] active:disabled styling for button (#1360 )	2021-12-13 13:25:59 +01:00
Ken	05477b273e	fikset alias for vercel deploy	2021-12-13 11:23:13 +01:00
Ken	0b05928f69	vercel workflow- kjører ikke dev på master push	2021-12-13 11:02:41 +01:00
Ken	f5b2012245	vercel workflow fix	2021-12-13 11:01:08 +01:00
Ken	3b59d03bca	vercel workflow	2021-12-13 10:59:48 +01:00
Ken	794c6fea4e	oppdatert gitignore	2021-12-13 10:51:10 +01:00
Ken	01cc0b3703	Update README.md	2021-12-10 13:13:49 +01:00
github-actions[bot]	36d98e1d19	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.0 - @navikt/ds-icons@0.7.0 - @navikt/ds-react@0.14.0 - @navikt/ds-tokens@0.7.0 - @navikt/ds-css-internal@0.7.0 - @navikt/ds-react-internal@0.9.0	2021-12-07 15:12:59 +00:00
Ken Andreas Nordahl KenAJoh github-actions[bot]	705b2cbe9c	[FEATURE] Tokens migrering (#1332 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com> Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2021-12-07 15:53:48 +01:00
dependabot[bot]	2fc2572d93	Bump prismjs from 1.23.0 to 1.25.0 (#1354 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-12-07 15:31:21 +01:00
Ken	5fd0b3cffd	hotfix god-praksis accordion margin-bottom	2021-12-07 15:07:51 +01:00
Ken	ead802c0d8	hotfix god-praksis accordion margin-bottom	2021-12-07 13:41:54 +01:00
Ken	eb9ca68e5c	Update README.md	2021-12-07 13:11:39 +01:00
Ken	89a604bd57	Fjernet lvl2 toc fra god-praksis template	2021-12-06 16:23:14 +01:00
Ken	9465cdf30a	[FEATURE] React og @types/react til v17 i peerDep (#1355 )	2021-12-06 16:13:58 +01:00
Ken	cb482b4cdc	Update README.md	2021-12-06 14:18:51 +01:00
github-actions[bot]	f6c4f853af	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.5 - @navikt/ds-react@0.13.3 - @navikt/ds-react-internal@0.8.3	2021-12-06 11:09:52 +00:00
KenandAndreas Nordahl	9a2cd06452	[FEATURE] 3.0 Beta sync (#1341 ) * checkbox border + spacing * oppdatert spacing + description * oppdatert checkbox til 3.0 beta * lint fix * disabled for checkbox * fjernet ubrukte tokens * generell opacity 0.3 * reduce checkbox label spacing * adjust checkbox desc placement * bruker nå Detail for small description * reduce error message bullet spacing * adjust small checkbox alignment * adjust error message and fieldset spacing * remove duplicate disabled opacity * reduce fieldset desc margin * small checkbox size * [FIX] Beta 3.0 Disabled for restrende form-elementer (#1346) * fieldset * oppdatert textfield * select disabled * fikset additive opacity fieldset * remove duplicate disabled style Co-authored-by: Andreas Nordahl <andnorda@gmail.com> * Beta 3.0 Radio (#1342) * oppdatert small * oppdatert radio error * oppdatert disabled for radio * fjernet ubrukte tokens * radio by box shadow * some radio positioning and fieldset desc size * remove duplicate disabled opacity * oopsie * oopsie Co-authored-by: Andreas Nordahl <andnorda@gmail.com> * align small checkbox desc * align hidden input of small checkbox and radio * combine radio and checkbox styles * lint fixes * error on checkbox and radio is boolean * remove errorPopagation from checkbox group and radio group * remove error from radio as it only makes sense on group * cleanup checkbox stories * cleanup radio stories * update radio and checkbox how-to guides * place and size checkmark absolutely to fix strange rounding behaviour * padding around label * oopsie * Beta 3.0 Textfield (#1343) Co-authored-by: Andreas Nordahl <andnorda@gmail.com> * radio-label/desc as "div" Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-12-06 11:52:59 +01:00
Ken	40ae4d9a20	Update README.md	2021-12-06 10:46:24 +01:00
Ken	3e835fc76c	kan nå bruke accordion i god-praksis	2021-12-03 13:53:39 +01:00
github-actions[bot]	2ad9183b09	Lerna versionbump [ci skip] - @navikt/ds-react@0.13.2 - @navikt/ds-react-internal@0.8.2	2021-12-02 13:23:57 +00:00
Andreas Nordahl	627b4f06cb	[fix] field description as div (#1353 )	2021-12-02 14:05:07 +01:00
Ken	3977927ac8	Update README.md	2021-11-26 10:57:26 +01:00
Ken	6f81c2cf4e	Update update-tokens.yml	2021-11-18 11:57:06 +01:00
github-actions[bot]	46f97b006f	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.4 - @navikt/ds-tokens@0.6.3	2021-11-17 14:28:50 +00:00
Ken	9338995a3c	[FIX] Nested token-parsing (#1347 )	2021-11-17 15:09:59 +01:00
github-actions[bot]	e3cf943ab3	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.3	2021-11-15 13:33:02 +00:00
Andreas Nordahl	59a3c71821	[FIX] Reduce body line-height to make struts smaller	2021-11-15 14:12:54 +01:00
Andreas NordahlandKen	edab708a93	add security playbook card to front page. adjust styling (#1330 ) Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-11-12 15:50:05 +01:00
github-actions[bot]	c291a6106f	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.2 - @navikt/ds-tokens@0.6.2	2021-11-12 13:43:24 +00:00
github-actions[bot]andKenAJoh	8f0601e93f	[FIX] Tokens sync Figma (#1331 ) Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>	2021-11-12 14:27:21 +01:00
github-actions[bot]	03a9d1a554	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.1 - @navikt/ds-icons@0.6.3 - @navikt/ds-react@0.13.1 - @navikt/ds-tokens@0.6.1 - @navikt/ds-react-internal@0.8.1	2021-11-12 11:01:46 +00:00
github-actions[bot]andKenAJoh	c58688a966	[FIX] Tokens sync Figma (#1328 ) Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>	2021-11-12 11:45:51 +01:00
Ken	f242e5028c	Fikset parsing til Style Dictionary format (#1329 )	2021-11-12 11:08:51 +01:00
KenandAndreas Nordahl	92e13a173f	[FIX ] ikon id prefikset (#1324 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-11-12 10:05:52 +01:00
github-actions[bot]	a06b27a218	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.0 - @navikt/ds-react@0.13.0 - @navikt/ds-tokens@0.6.0 - @navikt/ds-react-internal@0.8.0	2021-11-11 17:30:19 +00:00
KenandAndreas Nordahl	942f611c38	[FEATURE] Henter tokens fra Figma (#1270 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-11-11 18:08:31 +01:00
github-actions[bot]	9754e17057	Lerna versionbump [ci skip] - @navikt/ds-react-internal@0.7.4	2021-11-11 16:13:22 +00:00
Ken	656d53c9e4	[FIX] Fjernet aria-haspopup fra toggle-button (#1325 )	2021-11-11 16:57:21 +01:00
Ken	d0bf3d81a8	Update update-icons.yml	2021-11-06 13:47:34 +01:00
github-actions[bot]	39c4c751d8	Lerna versionbump [ci skip] - @navikt/ds-react@0.12.3 - @navikt/ds-react-internal@0.7.3	2021-11-05 11:00:44 +00:00
Andreas Nordahl	dacaf44ea8	[fix] controlled radio group no longer logs errors (#1322 )	2021-11-05 11:42:35 +01:00
github-actions[bot]	8c4c73cc2e	Lerna versionbump [ci skip] - @navikt/ds-icons@0.6.2 - @navikt/ds-react@0.12.2 - @navikt/ds-react-internal@0.7.2	2021-11-03 10:23:10 +00:00
KenandKenAJoh	324eb29f02	[FIX] Ikonsynk Figma (#1319 ) Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>	2021-11-03 11:05:24 +01:00
github-actions[bot]	ce0bde9ea3	Lerna versionbump [ci skip] - @navikt/ds-icons@0.6.1 - @navikt/ds-react@0.12.1 - @navikt/ds-react-internal@0.7.1	2021-11-02 12:30:06 +00:00
KenandGitHub	4c26512709	[FIX] Ikonsynk fra Figma (Automatisk PR) (#1317 ) Co-authored-by: GitHub <noreply@github.com>	2021-11-02 13:13:29 +01:00
Ken	17f5f9e379	github bot som Pr author	2021-11-02 11:39:39 +01:00
Ken	95eeb92a4e	Update update-icons.yml	2021-11-02 11:10:10 +01:00