Lerna versionbump [ci skip]

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

.github/workflows/build-publish.yml

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

.github/workflows/chromatic.yml

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

.github/workflows/update-tokens.yml

@@ -1,8 +1,6 @@
 name: Update tokens
 
 on:
-  schedule:
-    - cron: 0 0 * * *
   workflow_dispatch:
 
 jobs:

.gitignore

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

.storybook/stories/migration.stories.mdx

@@ -4,6 +4,14 @@ import { Meta } from "@storybook/addon-docs";
 
 # Migreringsguider
 
+## Migrering til ds-css v0.12, ds-tokens v0.7
+
+### Tokens er refaktort og oppdatert
+
+- Vi har nå fått helt nye tokens synket fra 3.0 biblioteket i Figma.
+- Dette vi si at de som har brukt tokens for styling i sitt prosjekt må gå gjennom å fikse alle endringene.
+- Hvis du bare har brukt react-komponentene rett ut av boken så har denne endringene ikke noe å si for deg.
+
 ## Migrering til ds-react v0.11, ds-css v0.10
 
 ### ErrorSummary

.storybook/stories/roadmap-table.tsx

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

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

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

@navikt/core/css/accordion.css

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

@navikt/core/css/alert.css

@@ -1,21 +1,51 @@
 :root {
-  --navds-alert-color-border: var(--navds-color-gray-40);
-  --navds-alert-color-error-border: var(--navds-color-error-border);
-  --navds-alert-color-error-background: var(--navds-color-error-background);
-  --navds-alert-color-warning-border: var(--navds-color-warning-border);
-  --navds-alert-color-warning-background: var(--navds-color-warning-background);
-  --navds-alert-color-info-border: var(--navds-color-info-border);
-  --navds-alert-color-info-background: var(--navds-color-info-background);
-  --navds-alert-color-success-border: var(--navds-color-success-border);
-  --navds-alert-color-success-background: var(--navds-color-success-background);
-  --navds-alert-color-error-icon: var(--navds-color-red-60);
-  --navds-alert-color-error-icon-background: var(--navds-color-white);
-  --navds-alert-color-warning-icon: var(--navds-color-orange-40);
-  --navds-alert-color-warning-icon-background: var(--navds-color-darkgray);
-  --navds-alert-color-info-icon: var(--navds-color-lightblue-70);
-  --navds-alert-color-info-icon-background: var(--navds-color-white);
-  --navds-alert-color-success-icon: var(--navds-color-green-70);
-  --navds-alert-color-success-icon-background: var(--navds-color-white);
+  --navds-alert-color-border: var(--navds-semantic-color-border-muted);
+  --navds-alert-color-error-border: var(
+    --navds-semantic-color-feedback-danger-border
+  );
+  --navds-alert-color-error-background: var(
+    --navds-semantic-color-feedback-danger-background
+  );
+  --navds-alert-color-warning-border: var(
+    --navds-semantic-color-feedback-warning-border
+  );
+  --navds-alert-color-warning-background: var(
+    --navds-semantic-color-feedback-warning-background
+  );
+  --navds-alert-color-info-border: var(
+    --navds-semantic-color-feedback-info-border
+  );
+  --navds-alert-color-info-background: var(
+    --navds-semantic-color-feedback-info-background
+  );
+  --navds-alert-color-success-border: var(
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-alert-color-success-background: var(
+    --navds-semantic-color-feedback-success-background
+  );
+  --navds-alert-color-error-icon: var(
+    --navds-semantic-color-feedback-danger-icon
+  );
+  --navds-alert-color-error-icon-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-alert-color-warning-icon: var(
+    --navds-semantic-color-feedback-warning-icon
+  );
+  --navds-alert-color-warning-icon-background: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-alert-color-info-icon: var(--navds-semantic-color-feedback-info-icon);
+  --navds-alert-color-info-icon-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-alert-color-success-icon: var(
+    --navds-semantic-color-feedback-success-icon
+  );
+  --navds-alert-color-success-icon-background: var(
+    --navds-semantic-color-component-background-light
+  );
 }
 
 .navds-alert {

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

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

@navikt/core/css/button.css

@@ -1,53 +1,79 @@
 :root {
   /* Primary */
-  --navds-button-color-primary-text: var(--navds-color-white);
-  --navds-button-color-primary-border-focus: var(--navds-color-white);
-  --navds-button-color-primary-background: var(--navds-color-action-default);
+  --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
+  --navds-button-color-primary-border-focus: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-primary-background: var(
+    --navds-semantic-color-interaction-primary
+  );
   --navds-button-color-primary-background-hover: var(
-    --navds-color-action-hover
+    --navds-semantic-color-interaction-primary-hover
   );
   --navds-button-color-primary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
   );
 
   /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-color-action-default);
-  --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-border: var(--navds-color-action-default);
+  --navds-button-color-secondary-text: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-secondary-text-hover: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-secondary-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-secondary-border: var(
+    --navds-semantic-color-interaction-primary
+  );
   --navds-button-color-secondary-border-focus-active-hover: var(
-    --navds-color-white
+    --navds-semantic-color-component-background-light
+  );
+  --navds-button-color-secondary-background: var(
+    --navds-semantic-color-component-background-light
   );
-  --navds-button-color-secondary-background: var(--navds-color-background);
   --navds-button-color-secondary-background-hover: var(
-    --navds-color-action-hover
+    --navds-semantic-color-interaction-primary-hover
   );
   --navds-button-color-secondary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
   );
 
   /* Tertiary */
-  --navds-button-color-tertiary-text: var(--navds-color-action-default);
-  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
-  --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
-  --navds-button-color-tertiary-border-active: var(--navds-color-white);
+  --navds-button-color-tertiary-text: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
+  --navds-button-color-tertiary-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-border-focus: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-button-color-tertiary-border-active: var(
+    --navds-semantic-color-component-background-light
+  );
   --navds-button-color-tertiary-background-active: var(
-    --navds-color-action-active
+    --navds-semantic-color-interaction-primary-selected
   );
 
   /* Danger */
-  --navds-button-color-danger-text: var(--navds-color-white);
-  --navds-button-color-danger-background: var(--navds-color-danger-default);
-  --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
+  --navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
+  --navds-button-color-danger-background: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-button-color-danger-background-hover: var(
+    --navds-semantic-color-interaction-danger-hover
+  );
   --navds-button-color-danger-background-active: var(
-    --navds-color-danger-active
+    --navds-semantic-color-interaction-danger-selected
+  );
+  --navds-button-color-danger-border-focus: var(
+    --navds-semantic-color-component-background-light
   );
-  --navds-button-color-danger-border-focus: var(--navds-color-white);
-
-  /* Disabled */
-  --navds-button-color-text-disabled: var(--navds-color-text-inverse);
-  --navds-button-color-background-disabled: var(--navds-color-disabled);
 }
 
 .navds-button {
@@ -111,8 +137,13 @@
     var(--navds-shadow-focus);
 }
 
+.navds-button--primary:hover:disabled,
+.navds-button--primary:active:disabled {
+  background-color: var(--navds-button-color-primary-background);
+}
+
 /**************************
- * .navds-button--secondary *
+* .navds-button--secondary *
  **************************/
 
 .navds-button--secondary {
@@ -145,6 +176,13 @@
     var(--navds-shadow-focus);
 }
 
+.navds-button--secondary:disabled,
+.navds-button--secondary:hover:disabled {
+  color: var(--navds-button-color-secondary-text);
+  background-color: var(--navds-button-color-secondary-background);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+}
+
 /****************************
  * .navds-button--tertiary *
  ****************************/
@@ -168,11 +206,23 @@
   box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
 }
 
+.navds-button--tertiary:active:hover {
+  background-color: var(--navds-button-color-tertiary-background-active);
+}
+
 .navds-button--tertiary:active:focus {
   box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
     var(--navds-shadow-focus);
 }
 
+.navds-button--tertiary:disabled,
+.navds-button--tertiary:active:disabled,
+.navds-button--tertiary:active:hover:disabled {
+  color: var(--navds-button-color-tertiary-text);
+  background: none;
+  box-shadow: none;
+}
+
 /*************************
  * .navds-button--danger *
  *************************/
@@ -195,14 +245,17 @@
     var(--navds-shadow-focus);
 }
 
+.navds-button--danger:hover:disabled,
+.navds-button--danger:active:disabled {
+  background-color: var(--navds-button-color-danger-background);
+}
+
 /**************************
  * .navds-button:disabled *
  **************************/
 
 .navds-button:disabled {
-  color: var(--navds-button-color-text-disabled);
-  background-color: var(--navds-button-color-background-disabled);
+  opacity: 0.3;
   cursor: not-allowed;
-  box-shadow: none;
   transform: none;
 }

@navikt/core/css/card.css

@@ -1,15 +1,25 @@
 :root {
-  --navds-card-micro-color-text: var(--navds-color-text-primary);
-  --navds-card-micro-color-background: var(--navds-color-orange-20);
+  --navds-card-micro-color-text: var(--navds-semantic-color-text);
+  --navds-card-micro-color-background: var(--navds-global-color-orange-200);
   --navds-card-micro-color-border: transparent;
-  --navds-card-micro-color-text-hover: var(--navds-color-blue-50);
-  --navds-card-micro-color-background-hover: var(--navds-color-white);
-  --navds-card-micro-color-border-hover: var(--navds-color-blue-50);
-  --navds-card-micro-color-text-focus: var(--navds-color-blue-50);
-  --navds-card-micro-color-background-focus: var(--navds-color-white);
-  --navds-card-micro-color-shadow-focus: var(--navds-color-blue-80);
-  --navds-card-micro-color-background-active: var(--navds-color-blue-70);
-  --navds-card-micro-color-text-active: var(--navds-color-white);
+  --navds-card-micro-color-text-hover: var(--navds-semantic-color-link);
+  --navds-card-micro-color-background-hover: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-card-micro-color-border-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-card-micro-color-text-focus: var(--navds-semantic-color-link);
+  --navds-card-micro-color-background-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-card-micro-color-shadow-focus: var(--navds-semantic-color-focus);
+  --navds-card-micro-color-background-active: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-card-micro-color-text-active: var(
+    --navds-semantic-color-text-inverted
+  );
 }
 
 /*

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

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

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

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

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

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

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

@@ -1,6 +1,10 @@
 :root {
-  --navds-error-summary-color-background: var(--navds-color-white);
-  --navds-error-summary-color-border: var(--navds-color-error-border);
+  --navds-error-summary-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-error-summary-color-border: var(
+    --navds-semantic-color-feedback-danger-border
+  );
 }
 
 .navds-error-summary {

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

@@ -8,6 +8,7 @@
 @import "error-message.css";
 @import "radio-checkbox.css";
 @import "select.css";
+@import "switch.css";
 @import "text-field.css";
 @import "textarea.css";
 @import "search-field.css";

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

@@ -1,12 +1,26 @@
 :root {
-  --navds-radio-checkbox-color-background: var(--navds-color-white);
-  --navds-radio-checkbox-color-background-hover: var(--navds-color-blue-10);
-  --navds-radio-checkbox-color-background-checked: var(--navds-color-blue-50);
-  --navds-radio-checkbox-color-shadow: var(--navds-color-gray-60);
-  --navds-radio-checkbox-color-shadow-hover: var(--navds-color-blue-50);
-  --navds-radio-checkbox-color-shadow-checked: var(--navds-color-blue-50);
-  --navds-radio-checkbox-color-shadow-error: var(--navds-color-red-50);
-  --navds-radio-checkbox-color-label-hover: var(--navds-color-blue-50);
+  --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,
@@ -94,7 +108,7 @@
 }
 
 .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  background-image: var(--navds-checkmark-image-white);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
   background-position: 6px center;
   background-repeat: no-repeat;
   background-size: 13px;

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

@@ -1,7 +1,13 @@
 :root {
-  --navds-search-field-color-shadow-error: var(--navds-color-red-50);
-  --navds-search-field-color-border-error: var(--navds-color-red-50);
-  --navds-search-field-color-clearbutton-border: var(--navds-color-gray-60);
+  --navds-search-field-color-shadow-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-search-field-color-border-error: var(
+    --navds-semantic-color-interaction-danger
+  );
+  --navds-search-field-color-clearbutton-border: var(
+    --navds-semantic-color-border
+  );
 }
 
 .navds-search-field__input-wrapper {

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

@@ -1,9 +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-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 {

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

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

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

@@ -1,9 +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-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 {

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

@@ -1,11 +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-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 {
@@ -23,7 +38,7 @@
   width: 100%;
   transition: height 0.1s ease-out;
   display: block;
-  min-height: 48px;
+  min-height: 3rem;
 }
 
 .navds-textarea--counter {
@@ -41,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 {

@navikt/core/css/grid.css

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

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

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

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

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

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

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

@navikt/core/css/link.css

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

@navikt/core/css/loader.css

@@ -1,9 +1,15 @@
 :root {
-  --navds-loader-color-foreground: var(--navds-color-gray-40);
-  --navds-loader-color-background: var(--navds-color-gray-10);
-  --navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
-  --navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
-  --navds-loader-color-inverted-foreground: var(--navds-color-white);
+  --navds-loader-color-foreground: var(--navds-global-color-gray-400);
+  --navds-loader-color-background: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
+  --navds-loader-color-interaction-foreground: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-loader-color-inverted-foreground: var(
+    --navds-semantic-color-component-background-light
+  );
   --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
   --navds-loader-color-transparent-background: transparent;
   --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);

@navikt/core/css/modal.css

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

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.11.5",
+  "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.6.3",
+    "@navikt/ds-tokens": "^0.7.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

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

@@ -1,8 +1,14 @@
 :root {
-  --navds-page-header-color-background: var(--navds-color-background);
-  --navds-page-header-color-shadow-situation: var(--navds-color-orange-40);
-  --navds-page-header-color-shadow-product: var(--navds-color-green-40);
-  --navds-page-header-color-shadow-guide: var(--navds-color-deepblue-40);
+  --navds-page-header-color-background: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-page-header-color-shadow-situation: var(
+    --navds-global-color-orange-400
+  );
+  --navds-page-header-color-shadow-product: var(--navds-global-color-green-400);
+  --navds-page-header-color-shadow-guide: var(
+    --navds-global-color-deepblue-400
+  );
 }
 
 .navds-page-header {

@navikt/core/css/panel.css

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

@navikt/core/css/popover.css

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

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

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

@navikt/core/css/table.css

@@ -1,3 +1,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;
+}

@navikt/core/css/tag.css

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

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -38,7 +38,8 @@
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
   },
   "devDependencies": {
     "@svgr/cli": "^5.5.0",

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.13.3",
+  "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.3",
+    "@navikt/ds-icons": "^0.7.0",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -61,6 +61,7 @@
     "ts-jest": "^27.0.5"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
   }
 }

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

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

@navikt/core/react/src/form/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@navikt/core/react/src/table/DataCell.tsx

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

@navikt/core/react/src/table/HeaderCell.tsx

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

@navikt/core/react/src/table/Row.tsx

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

@navikt/core/react/src/table/Table.tsx

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

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

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

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

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

@navikt/core/tokens/config.json

@@ -1,5 +1,5 @@
 {
-  "source": ["src/index.js"],
+  "source": ["src/index.js", "src/**/*.json"],
   "platforms": {
     "scss": {
       "transformGroup": "scss",

@navikt/core/tokens/package.json

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

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

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

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

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

@navikt/internal/css/divider.css

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

@navikt/internal/css/dropdown.css

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

@navikt/internal/css/header.css

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

@navikt/internal/css/package.json

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

@navikt/internal/react/package.json

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

README.md

@@ -16,7 +16,7 @@
     <h4><a href="https://design.nav.no">Nettside</a> | <a href="https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md">Bidra</a> | <a href="https://github.com/navikt/nav-frontend-moduler/issues">Bug-rapport</a>
 </div>
 
-## Innhold
+## Innhold i repo
 
 Repoet inneholder følgende:
 
@@ -26,10 +26,10 @@ Repoet inneholder følgende:
 - [Eksempler på forskjellige frontend-løsninger](https://github.com/navikt/nav-frontend-moduler/tree/master/examples) til applikasjoner som skal bruke komponentene
 - [Storybook](https://navikt.github.io/Designsystemet/?path=/story/ds-react-kom-i-gang--page) for v2 komponenter (wip) og eldre komponenter.
 
-## Bidrag
+## Bidra
 
 Gå til [CONTRIBUTING.md](https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md)
 
-## Lisens
+## Lisenser
 
 Gå til [LICENSE](https://github.com/navikt/nav-frontend-moduler/blob/master/LICENSE)

examples/cra/.gitignore

@@ -1,24 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-package-lock.json

examples/cra/README.md

@@ -1,31 +0,0 @@
-# Create-React-App eksempel prosjekt
-
-Er satt opp som et enkelt oppsett som støtter bruk av designsystemet sine komponenter. Er også satt opp for bruk av riktig typografi og basestiler med `nav-frontend-core` og `nav-frontend-typografi-style`
-
-Bruker pakken `Craco` https://www.npmjs.com/package/@craco/craco for å kunne extende Webpack-features uten å ta i bruk `eject`.
-
-Satt opp for å støtte lasting av `less` filer ved hjelp av `craco-less` https://github.com/DocSpring/craco-less#readme.
-
-Prosjektet kjører `pretty-quick` on-`git commit` for automatisk kjøring av prettier, samt linting av js/ts og less on-`git push`.
-
-Development og linting:
-
-```
-yarn install
-yarn start
-```
-
-Bygging for produksjon:
-
-```
-yarn install
-yarn run build
-```
-
-For å kjøre build lokalt kan `serve` brukes:
-https://www.npmjs.com/package/serve
-
-```
-yarn install -g serve
-serve build
-```

examples/cra/craco.config.js

@@ -1,9 +0,0 @@
-const { ESLINT_MODES } = require("@craco/craco");
-const CracoLessPlugin = require("craco-less");
-
-module.exports = {
-  plugins: [{ plugin: CracoLessPlugin }],
-  eslint: {
-    mode: ESLINT_MODES.file,
-  },
-};

examples/cra/package.json

@@ -1,73 +0,0 @@
-{
-  "name": "cra",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@craco/craco": "^6.0.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
-    "classnames": "^2.2.6",
-    "craco": "^0.0.3",
-    "craco-less": "^1.17.1",
-    "nav-frontend-core": "^5.0.10",
-    "nav-frontend-typografi": "^3.0.0",
-    "nav-frontend-typografi-style": "^1.0.31",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^16.8.0",
-    "react-scripts": "4.0.1",
-    "typescript": "^4.0.3",
-    "web-vitals": "^0.2.4"
-  },
-  "devDependencies": {
-    "husky": "^4.3.6",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0",
-    "stylelint": "^13.8.0",
-    "stylelint-config-standard": "^20.0.0"
-  },
-  "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "craco eject",
-    "lint": "yarn lint:jsts && yarn lint:less",
-    "lint:jsts": "npx eslint .",
-    "lint:less": "npx stylelint --syntax less **/*.less"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged",
-      "pre-push": "yarn lint"
-    }
-  },
-  "stylelint": {
-    "extends": "stylelint-config-standard",
-    "rules": {},
-    "ignoreFiles": []
-  },
-  "prettier": {},
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

examples/cra/public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

examples/cra/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

examples/cra/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

examples/cra/src/App.less

@@ -1,7 +0,0 @@
-@import (reference) "nav-frontend-core";
-
-.app {
-  width: 100vw;
-  height: 100vh;
-  background-color: #f1f1f1;
-}

examples/cra/src/App.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-import "./App.less";
-
-const App = (): JSX.Element => {
-  return <div className="app"></div>;
-};
-
-export default App;

examples/cra/src/index.less

@@ -1 +0,0 @@
-@import "nav-frontend-core";

examples/cra/src/index.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.less";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

examples/cra/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from "web-vitals";
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

examples/cra/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom";

examples/cra/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src"]
-}

examples/nextjs-app/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

examples/nextjs-app/.gitignore

@@ -1,34 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# vercel
-.vercel

examples/nextjs-app/README.md

@@ -1,34 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs-app/next.config.js

@@ -1,41 +0,0 @@
-/** @type {import('next').NextConfig} */
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-/**
- * Leter etter bruk av nav-frontend-* pakker og @navikt/* pakker i nermeste package.json
- * Husk å endre til riktig package.json hvis strukturen av imports er annerledes (eks yarn workspaces)
- */
-const packageJson = require("./package.json");
-const modules = [];
-const withLess = require("next-with-less");
-
-Object.keys(packageJson.dependencies).forEach((key) => {
-  /**
-   * Nextjs does not as of june 2021 support esm import/export syntax
-   * TODO: Remove this when this issue is fixed
-   *  */
-  if (key.startsWith("@navikt/") || key.startsWith("nav-frontend-")) {
-    modules.push(key);
-  }
-});
-
-const withTM = require("next-transpile-modules")(modules);
-
-module.exports = withTM(
-  withLess({
-    productionBrowserSourceMaps: true,
-
-    /**
-     * Added to support @navikt/ds-icons package, can be changed to other svg-handlers
-     */
-    webpack(config) {
-      config.module.rules.push({
-        test: /\.svg$/,
-        use: ["@svgr/webpack"],
-      });
-
-      return config;
-    },
-    reactStrictMode: true,
-  })
-);

examples/nextjs-app/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "nextjs-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "next": "11.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "next-with-less": "^1.0.0",
-    "next-transpile-modules": "^8.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "17.0.17",
-    "eslint": "7.32.0",
-    "eslint-config-next": "11.1.0",
-    "typescript": "4.3.5"
-  }
-}

examples/nextjs-app/pages/_app.tsx

@@ -1,7 +0,0 @@
-import "../styles/globals.css";
-import type { AppProps } from "next/app";
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}
-export default MyApp;

examples/nextjs-app/pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-
-type Data = {
-  name: string;
-};
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: "John Doe" });
-}

examples/nextjs-app/pages/index.tsx

@@ -1,72 +0,0 @@
-import type { NextPage } from "next";
-import Head from "next/head";
-import Image from "next/image";
-import styles from "../styles/Home.module.css";
-
-const Home: NextPage = () => {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{" "}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{" "}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  );
-};
-
-export default Home;

examples/nextjs-app/public/vercel.svg

@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

examples/nextjs-app/styles/Home.module.css

@@ -1,121 +0,0 @@
-.container {
-  min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-
-.main {
-  padding: 5rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  width: 100%;
-  height: 100px;
-  border-top: 1px solid #eaeaea;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-  margin-top: 3rem;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  width: 45%;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}

examples/nextjs-app/styles/globals.css

@@ -1,16 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}

examples/nextjs-app/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve"
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}

examples/webpack/.gitignore

@@ -1,24 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-package-lock.json

examples/webpack/README.md

@@ -1,34 +0,0 @@
-# Webpack eksempel prosjekt
-
-Er satt opp som et enkelt oppsett som støtter bruk av designsystemet sine komponenter. Er også satt opp for bruk av riktig typografi og basestiler med `nav-frontend-core` og `nav-frontend-typografi-style`
-
-Prosjektet kjører `pretty-quick` on-`git commit` for automatisk kjøring av prettier, samt linting av js/ts og less on-`git push`.
-
-Development med hot-reloading og linting:
-
-```
-yarn install
-yarn start
-```
-
-Bygging for produksjon:
-
-```
-yarn install
-yarn run build
-```
-
-Bruker `copyfiles` for å kopiere `index.html` til `/dist`
-https://www.npmjs.com/package/copyfiles
-
-```
-yarn install -g copyfiles
-```
-
-For å kjøre build lokalt kan `serve` brukes:
-https://www.npmjs.com/package/serve
-
-```
-yarn install -g serve
-serve dist
-```