Lerna versionbump [ci skip]

- @navikt/ds-css@0.11.5 - @navikt/ds-react@0.13.3 - @navikt/ds-react-internal@0.8.3
[FEATURE] 3.0 Beta sync (#1341 )
2026-10-16 18:52:02 +00:00 · 2021-12-06 11:09:52 +00:00 · 2021-12-06 11:52:59 +01:00 · 2021-12-06 10:46:24 +01:00 · 2021-12-03 13:53:39 +01:00 · 2021-12-02 13:23:57 +00:00
166 changed files with 4861 additions and 2886 deletions
@@ -1,8 +1,8 @@
 name: Update Icons

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

 jobs:
@@ -10,8 +10,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0 # Required to retrieve git history
      - uses: actions/setup-node@v1
        with:
          node-version: 14
@@ -35,11 +33,10 @@ jobs:
        uses: peter-evans/create-pull-request@v3
        with:
          token: ${{ secrets.GIT_REPO }}
-          commit-message: "Oppdatert ikoner fra figma"
-          committer: GitHub <noreply@github.com>
+          commit-message: "Ikoner synket fra figma"
          branch: figma-icons-sync
+          committer: GitHub <noreply@github.com>
+          author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
+          signoff: false
          delete-branch: true
-          title: "[FEATURE] Automatisk PR for ikoner"
-          labels: |
-            Icons
-            automated pr
+          title: "[FIX] Ikonsynk Figma"
@@ -0,0 +1,41 @@
+name: Update tokens
+
+on:
+  schedule:
+    - cron: 0 0 * * *
+  workflow_dispatch:
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Update tokens
+        run: yarn update:tokens
+        env:
+          FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: figma-tokens-sync
+          delete-branch: true
+          title: "[FEATURE] Tokens sync Figma"
+          commit-message: "Tokens synket fra figma"
+          committer: GitHub <noreply@github.com>
+          signoff: false
@@ -22,7 +22,7 @@ html {

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

 .navds-error-message {
-  display: block;
  color: var(--navds-error-message-color-text);
+  display: flex;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-error-message::before {
+  content: "•";
 }
@@ -6,14 +6,19 @@
 }

 .navds-fieldset > :not(:first-child):not(:empty) {
-  margin-top: 8px;
+  margin-top: var(--navds-spacing-2);
 }

-.navds-fieldset--small > :not(:first-child):not(:empty) {
-  margin-top: 4px;
+.navds-fieldset > .navds-fieldset__description:not(:empty) {
+  margin-top: var(--navds-spacing-1);
 }

 /* Applied when hideLegend is applied to fieldset */
 .navds-fieldset > .sr-only + :not(:first-child):not(:empty) {
  margin-top: 0;
 }
+
+.navds-fieldset:disabled > .navds-fieldset__legend,
+.navds-fieldset:disabled > .navds-fieldset__description {
+  opacity: 0.3;
+}
@@ -1,11 +1,6 @@
 .navds-form-field > :not(:first-child):not(:empty),
 .navds-form-field > input:not(:first-child) {
-  margin-top: 8px;
-}
-
-.navds-form-field--small > :not(:first-child):not(:empty),
-.navds-form-field--small > input:not(:first-child) {
-  margin-top: 4px;
+  margin-top: var(--navds-spacing-2);
 }

 /* Applied when hideLabel is applied to form-element */
@@ -4,12 +4,9 @@
@import "fieldset.css";
@import "form.css";
@import "error-summary.css";
-@import "checkbox.css";
-@import "checkbox-group.css";
@import "confirmation-panel.css";
@import "error-message.css";
-@import "radio.css";
-@import "radio-group.css";
+@import "radio-checkbox.css";
@import "select.css";
@import "text-field.css";
@import "textarea.css";
@@ -0,0 +1,168 @@
+: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-checkbox,
+.navds-radio {
+  position: relative;
+  width: fit-content;
+}
+
+.navds-checkbox__input,
+.navds-radio__input {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  top: 0;
+  left: -12px;
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.navds-checkbox__label,
+.navds-radio__label {
+  padding: var(--navds-spacing-3) 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-checkbox__label::before,
+.navds-radio__label::before {
+  content: "";
+  background-color: var(--navds-radio-checkbox-color-background);
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.navds-radio__label::before {
+  border-radius: 50%;
+}
+
+.navds-checkbox__content,
+.navds-radio__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-checkbox__description,
+.navds-radio__description {
+  color: var(--navds-color-text-primary);
+}
+
+.navds-checkbox--small > .navds-checkbox__input,
+.navds-radio--small > .navds-radio__input {
+  width: 32px;
+  height: 32px;
+  top: 0;
+  left: -6px;
+}
+
+.navds-checkbox--small > .navds-checkbox__label,
+.navds-radio--small > .navds-radio__label {
+  padding: 6px 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__label::before,
+.navds-radio--small > .navds-radio__label::before {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio__input:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-image: var(--navds-checkmark-image-white);
+  background-position: 6px center;
+  background-repeat: no-repeat;
+  background-size: 13px;
+  box-shadow: none;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-checkbox--small
+  > .navds-checkbox__input:checked
+  + .navds-checkbox__label::before {
+  background-position: 4px center;
+}
+
+.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+  box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
+}
+
+.navds-radio__input:checked + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
+    inset 0 0 0 4px #fff;
+  background-color: var(--navds-radio-checkbox-color-background-checked);
+}
+
+.navds-radio__input:checked:focus + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
+    inset 0 0 0 4px #fff, var(--navds-shadow-focus);
+}
+
+.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+  color: var(--navds-radio-checkbox-color-label-hover);
+}
+
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:focus)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
+  background-color: var(--navds-radio-checkbox-color-background-hover);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:not(:hover):not(:disabled):not(:checked)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)
+  + .navds-radio__label::before {
+  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
+    var(--navds-shadow-focus);
+}
+
+.navds-checkbox--disabled,
+.navds-radio--disabled {
+  opacity: 0.3;
+}
+
+.navds-checkbox--disabled > .navds-checkbox__input,
+.navds-checkbox--disabled > .navds-checkbox__label,
+.navds-radio--disabled > .navds-radio__input,
+.navds-radio--disabled > .navds-radio__label {
+  cursor: not-allowed;
+}
@@ -1,13 +0,0 @@
-.navds-radio-group--small > .navds-radio-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.navds-fieldset.navds-radio-group--medium > .navds-radio-buttons {
-  margin-top: 0;
-}
-
-.navds-fieldset.navds-radio-group--medium > .navds-fieldset__error {
-  margin-top: 0;
-}
@@ -1,150 +0,0 @@
-:root {
-  --navds-radio-color-description: var(--navds-color-gray-80);
-  --navds-radio-color-background: var(--navds-color-white);
-  --navds-radio-color-border: var(--navds-color-gray-60);
-  --navds-radio-color-label-hover: var(--navds-color-blue-50);
-  --navds-radio-color-border-hover: var(--navds-color-blue-50);
-  --navds-radio-color-background-hover: var(--navds-color-blue-10);
-  --navds-radio-color-border-checked: var(--navds-color-blue-50);
-  --navds-radio-color-shadow-checked: var(--navds-color-blue-50);
-  --navds-radio-color-shadow-checked-focus: var(--navds-color-blue-80);
-  --navds-radio-color-shadow-background-checked-focus: var(--navds-color-white);
-  --navds-radio-color-shadow-dot-checked-focus: var(--navds-color-blue-50);
-  --navds-radio-color-shadow-error: var(--navds-color-red-50);
-  --navds-radio-color-border-error: var(--navds-color-red-50);
-
-  /* Disabled */
-  --navds-radio-color-background-disabled: var(--navds-color-gray-10);
-  --navds-radio-color-border-disabled: var(--navds-color-gray-60);
-  --navds-radio-color-label-disabled: var(--navds-color-gray-40);
-  --navds-radio-color-background-disabled-checked: var(--navds-color-gray-40);
-  --navds-radio-color-border-disabled-checked: var(--navds-color-gray-40);
-  --navds-radio-color-shadow-disabled-checked: var(--navds-color-gray-40);
-}
-
-.navds-radio {
-  position: relative;
-  padding: var(--navds-spacing-3) 0;
-}
-
-.navds-radio--with-description .navds-error-message {
-  margin-top: 0;
-}
-
-.navds-radio .navds-error-message {
-  margin-top: var(--navds-spacing-3);
-}
-
-.navds-radio__input {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  width: 48px;
-  height: 48px;
-  left: -12px;
-  margin: 0;
-  opacity: 0;
-  top: 0;
-}
-
-.navds-radio__label {
-  display: flex;
-  width: fit-content;
-  gap: 12px;
-  min-width: 48px;
-  cursor: pointer;
-}
-
-.navds-radio__description {
-  padding-left: calc(48px - 12px);
-  color: var(--navds-radio-color-description);
-}
-
-.navds-radio--with-description {
-  padding-bottom: 0;
-}
-
-.navds-radio--with-error-message {
-  padding-bottom: var(--navds-spacing-2);
-}
-
-.navds-radio__label::before {
-  content: "";
-  background-color: var(--navds-radio-color-background);
-  border: 1px solid var(--navds-radio-color-border);
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  border-radius: 50%;
-}
-
-.navds-radio--small {
-  padding: var(--navds-spacing-1) 0;
-}
-
-.navds-radio--small > .navds-radio__input {
-  width: 24px;
-  height: 24px;
-  top: 2px;
-  left: 0;
-}
-
-.navds-radio--small > .navds-radio__label::before {
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-
-.navds-radio__input:hover + .navds-radio__label {
-  color: var(--navds-radio-color-label-hover);
-}
-
-.navds-radio__input:hover + .navds-radio__label::before {
-  border-color: var(--navds-radio-color-border-hover);
-  background-color: var(--navds-radio-color-background-hover);
-}
-
-.navds-radio__input:focus + .navds-radio__label::before {
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-radio__input:checked + .navds-radio__label::before {
-  border: 2px solid var(--navds-radio-color-border-checked);
-  box-shadow: 0 0 0 3px #fff inset,
-    0 0 0 2rem var(--navds-radio-color-shadow-checked) inset;
-}
-
-.navds-radio__input:checked:focus + .navds-radio__label::before {
-  transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
-  box-shadow: 0 0 0 3px var(--navds-radio-color-shadow-checked-focus),
-    0 0 0 3px var(--navds-radio-color-shadow-background-checked-focus) inset,
-    0 0 0 2rem var(--navds-radio-color-shadow-dot-checked-focus) inset;
-}
-
-.navds-radio--error
-  > .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
-  + .navds-radio__label::before {
-  box-shadow: 0 0 0 1px var(--navds-radio-color-shadow-error);
-  border-color: var(--navds-radio-color-border-error);
-}
-
-.navds-radio--small .navds-error-message {
-  margin-top: 4px;
-}
-
-.navds-radio__input:disabled,
-.navds-radio__input:disabled + .navds-radio__label {
-  color: var(--navds-radio-color-label-disabled);
-  cursor: not-allowed;
-}
-
-.navds-radio__input:disabled + .navds-radio__label::before {
-  background-color: var(--navds-radio-color-background-disabled);
-  border-color: var(--navds-radio-color-border-disabled);
-}
-
-.navds-radio__input:disabled:checked + .navds-radio__label::before {
-  background-color: var(--navds-radio-color-background-disabled-checked);
-  border-color: var(--navds-radio-color-border-disabled-checked);
-  box-shadow: 0 0 0 3px #fff inset,
-    0 0 0 2rem var(--navds-radio-color-shadow-disabled-checked) inset;
-}
@@ -47,3 +47,7 @@
  box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
  border-color: var(--navds-search-field-color-border-error);
 }
+
+.navds-search-field--disabled {
+  opacity: 0.3;
+}
@@ -4,9 +4,6 @@
  --navds-select-color-border-hover: var(--navds-color-blue-50);
  --navds-select-color-border-error: var(--navds-color-red-50);
  --navds-select-color-shadow-error: var(--navds-color-red-50);
-  --navds-select-color-border-disabled: var(--navds-color-gray-40);
-  --navds-select-color-background-disabled: var(--navds-color-gray-10);
-  --navds-select-color-text-disabled: var(--navds-color-darkgray);
 }

 .navds-select__input {
@@ -59,12 +56,16 @@
  border-color: var(--navds-select-color-border-error);
 }

-/* Disabled handling */
-.navds-select__input:disabled,
-.navds-select__input[read-only] {
-  background-color: var(--navds-select-color-background-disabled);
-  border-color: var(--navds-select-color-border-disabled);
+/*
+  Disabled handling
+ */
+.navds-select--disabled {
+  opacity: 0.3;
+}
+
+.navds-select__input:disabled {
+  background-color: var(--navds-select-color-background);
+  border-color: var(--navds-select-color-border);
  box-shadow: none;
-  color: var(--navds-select-color-text-disabled);
  cursor: not-allowed;
 }
@@ -4,9 +4,6 @@
  --navds-text-field-color-border-hover: var(--navds-color-blue-50);
  --navds-text-field-color-border-error: var(--navds-color-red-50);
  --navds-text-field-color-shadow-error: var(--navds-color-red-50);
-  --navds-text-field-color-border-disabled: var(--navds-color-gray-40);
-  --navds-text-field-color-background-disabled: var(--navds-color-gray-10);
-  --navds-text-field-color-text-disabled: var(--navds-color-darkgray);
 }

 .navds-text-field__input {
@@ -14,16 +11,20 @@
  padding: 0.5rem;
  background-color: var(--navds-text-field-color-background);
  border-radius: 4px;
-  border: 1px solid var(--navds-text-field-color-border);
+  border: 2px solid var(--navds-text-field-color-border);
  min-height: 48px;
  width: 100%;
 }

 .navds-form-field--small > .navds-text-field__input {
-  padding: 0.15rem;
+  padding: 0 0.15rem;
  min-height: 32px;
 }

+.navds-form-field--small > .navds-text-field__description:not(:empty) {
+  margin-top: var(--navds-spacing-1);
+}
+
 .navds-text-field__input:hover {
  border-color: var(--navds-text-field-color-border-hover);
 }
@@ -36,20 +37,29 @@
 /**
  Error handling
 */
-.navds-text-field--error
-  > .navds-text-field__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-text-field-color-shadow-error);
+.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
  border-color: var(--navds-text-field-color-border-error);
 }

 /* Disabled handling */
-.navds-text-field__input:disabled,
-.navds-text-field__input[readonly] {
-  background-color: var(--navds-text-field-color-background-disabled);
-  border-color: var(--navds-text-field-color-border-disabled);
+.navds-text-field__input:disabled {
+  background-color: var(--navds-text-field-color-background);
+  border-color: var(--navds-text-field-color-border);
  box-shadow: none;
-  color: var(--navds-text-field-color-text-disabled);
  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.navds-text-field__input[readonly] {
+  background-color: var(--navds-text-field-color-background);
+  border-color: var(--navds-text-field-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-text-field--disabled > .navds-text-field__label,
+.navds-text-field--disabled > .navds-text-field__description {
+  opacity: 0.3;
 }

 /**
@@ -6,9 +6,6 @@
  --navds-textarea-color-shadow-error: var(--navds-color-red-50);
  --navds-textarea-color-counter-text: var(--navds-color-gray-40);
  --navds-textarea-color-counter-text-error: var(--navds-color-red-50);
-  --navds-textarea-color-text-disabled: var(--navds-color-darkgray);
-  --navds-textarea-color-border-disabled: var(--navds-color-gray-40);
-  --navds-textarea-color-background-disabled: var(--navds-color-gray-10);
 }

 .navds-textarea__wrapper {
@@ -78,11 +75,20 @@
 /*
  Disabled handling
 */
-.navds-textarea__input:disabled,
+.navds-textarea--disabled {
+  opacity: 0.3;
+}
+
+.navds-textarea__input:disabled {
+  background-color: var(--navds-textarea-color-background);
+  border-color: var(--navds-textarea-color-border);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
 .navds-textarea__input[readonly] {
-  background-color: var(--navds-textarea-color-background-disabled);
-  border-color: var(--navds-textarea-color-border-disabled);
+  background-color: var(--navds-textarea-color-background);
+  border-color: var(--navds-textarea-color-border);
  box-shadow: none;
-  color: var(--navds-textarea-color-text-disabled);
  cursor: not-allowed;
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.10.0",
+  "version": "0.11.5",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.5.3",
+    "@navikt/ds-tokens": "^0.6.3",
    "normalize.css": "^8.0.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
@@ -8,7 +8,6 @@ module.exports = {
  svgProps: {
    focusable: false,
    role: "img",
-    tabIndex: -1,
  },
  replaceAttrValues: {
    "#262626": "currentColor",
@@ -18,6 +18,7 @@ export const getPublishedIcons = async () => {
  const { data } = await FigmaAxion(process.env.FIGMA_TOKEN)
    .get(`https://api.figma.com/v1/files/${FILE_KEY}/components`)
    .catch((e) => {
+      console.log("Failed getPublishedIcons ");
      throw e;
    });
  return data?.meta?.components;
@@ -34,6 +35,7 @@ export const getIconsDownloadableUrl = async (nodeIds: string) => {
      `https://api.figma.com/v1/images/${FILE_KEY}/?ids=${nodeIds}&format=svg`
    )
    .catch((e) => {
+      console.log("Failed getIconsDownloadableUrl ");
      throw e;
    });

@@ -1742,13 +1742,13 @@
  {
    "name": "SchoolBag",
    "description": "",
-    "created_at": "2021-04-07T12:13:28.147Z",
+    "created_at": "2021-04-07T12:13:28.140Z",
    "pageName": "Family"
  },
  {
-    "name": "SchoolBag",
+    "name": "SchoolBagFilled",
    "description": "",
-    "created_at": "2021-04-07T12:13:28.140Z",
+    "created_at": "2021-04-07T12:13:28.147Z",
    "pageName": "Family"
  },
  {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.5.9",
+  "version": "0.6.3",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C12 4.65685 10.6569 6 9 6C7.34315 6 6 4.65685 6 3C6 1.34315 7.34315 0 9 0C10.6569 0 12 1.34315 12 3ZM23 14.5C23 15.3284 22.3284 16 21.5 16C20.6716 16 20 15.3284 20 14.5C20 13.6716 20.6716 13 21.5 13C22.3284 13 23 13.6716 23 14.5ZM4.68636 6C3.98108 6 3.36366 6.47353 3.18079 7.15469L0.000732422 19H1H3.25773V24H5.25773V19H7.25773V24H9.25773V19H11H12.0018L10.1893 11H13C13.5523 11 14 10.5523 14 10C14 9.44771 13.5523 9 13 9H9.5682C8.65406 7.19312 6.78502 6 4.68636 6ZM20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12V14H16.618L16.1708 13.1056C15.832 12.428 15.1395 12 14.382 12H14C13.4477 12 13 12.4477 13 13C13 13.5523 13.4477 14 14 14H14.382L14.8292 14.8944C15.168 15.572 15.8605 16 16.618 16H18C19.1046 16 20 15.1046 20 14V12ZM13 18C13 17.4477 13.4477 17 14 17H22C22.5523 17 23 17.4477 23 18C23 18.5523 22.5523 19 22 19H14C13.4477 19 13 18.5523 13 18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 3C13 4.65685 11.6569 6 10 6C8.34315 6 7 4.65685 7 3C7 1.34315 8.34315 0 10 0C11.6569 0 13 1.34315 13 3ZM24 14.5C24 15.3284 23.3284 16 22.5 16C21.6716 16 21 15.3284 21 14.5C21 13.6716 21.6716 13 22.5 13C23.3284 13 24 13.6716 24 14.5ZM5.68636 6C4.98108 6 4.36366 6.47353 4.18079 7.15469L1.00073 19H2H4.25773V24H6.25773V19H8.25773V24H10.2577V19H12H13.0018L11.1893 11H14C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9H10.5682C9.65406 7.19312 7.78502 6 5.68636 6ZM21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12V14H17.618L17.1708 13.1056C16.832 12.428 16.1395 12 15.382 12H15C14.4477 12 14 12.4477 14 13C14 13.5523 14.4477 14 15 14H15.382L15.8292 14.8944C16.168 15.572 16.8605 16 17.618 16H19C20.1046 16 21 15.1046 21 14V12ZM14 18C14 17.4477 14.4477 17 15 17H23C23.5523 17 24 17.4477 24 18C24 18.5523 23.5523 19 23 19H15C14.4477 19 14 18.5523 14 18Z" fill="#262626"/>
 </svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V11C3 7.64262 5.06817 4.76829 8 3.58152ZM2 22V20V15V13C0.895431 13 0 13.8954 0 15V20C0 21.1046 0.895431 22 2 22ZM22 20V22C23.1046 22 24 21.1046 24 20V15C24 13.8954 23.1046 13 22 13V15V20ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 15H15V18H9V15ZM7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V18C17 19.1046 16.1046 20 15 20H9C7.89543 20 7 19.1046 7 18V15Z" fill="#262626"/>
+</svg>
Author	SHA1	Message	Date
github-actions[bot]	f6c4f853af	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.5 - @navikt/ds-react@0.13.3 - @navikt/ds-react-internal@0.8.3	2021-12-06 11:09:52 +00:00
KenandAndreas Nordahl	9a2cd06452	[FEATURE] 3.0 Beta sync (#1341 ) * checkbox border + spacing * oppdatert spacing + description * oppdatert checkbox til 3.0 beta * lint fix * disabled for checkbox * fjernet ubrukte tokens * generell opacity 0.3 * reduce checkbox label spacing * adjust checkbox desc placement * bruker nå Detail for small description * reduce error message bullet spacing * adjust small checkbox alignment * adjust error message and fieldset spacing * remove duplicate disabled opacity * reduce fieldset desc margin * small checkbox size * [FIX] Beta 3.0 Disabled for restrende form-elementer (#1346) * fieldset * oppdatert textfield * select disabled * fikset additive opacity fieldset * remove duplicate disabled style Co-authored-by: Andreas Nordahl <andnorda@gmail.com> * Beta 3.0 Radio (#1342) * oppdatert small * oppdatert radio error * oppdatert disabled for radio * fjernet ubrukte tokens * radio by box shadow * some radio positioning and fieldset desc size * remove duplicate disabled opacity * oopsie * oopsie Co-authored-by: Andreas Nordahl <andnorda@gmail.com> * align small checkbox desc * align hidden input of small checkbox and radio * combine radio and checkbox styles * lint fixes * error on checkbox and radio is boolean * remove errorPopagation from checkbox group and radio group * remove error from radio as it only makes sense on group * cleanup checkbox stories * cleanup radio stories * update radio and checkbox how-to guides * place and size checkmark absolutely to fix strange rounding behaviour * padding around label * oopsie * Beta 3.0 Textfield (#1343) Co-authored-by: Andreas Nordahl <andnorda@gmail.com> * radio-label/desc as "div" Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-12-06 11:52:59 +01:00
Ken	40ae4d9a20	Update README.md	2021-12-06 10:46:24 +01:00
Ken	3e835fc76c	kan nå bruke accordion i god-praksis	2021-12-03 13:53:39 +01:00
github-actions[bot]	2ad9183b09	Lerna versionbump [ci skip] - @navikt/ds-react@0.13.2 - @navikt/ds-react-internal@0.8.2	2021-12-02 13:23:57 +00:00
Andreas Nordahl	627b4f06cb	[fix] field description as div (#1353 )	2021-12-02 14:05:07 +01:00
Ken	3977927ac8	Update README.md	2021-11-26 10:57:26 +01:00
Ken	6f81c2cf4e	Update update-tokens.yml	2021-11-18 11:57:06 +01:00
github-actions[bot]	46f97b006f	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.4 - @navikt/ds-tokens@0.6.3	2021-11-17 14:28:50 +00:00
Ken	9338995a3c	[FIX] Nested token-parsing (#1347 )	2021-11-17 15:09:59 +01:00
github-actions[bot]	e3cf943ab3	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.3	2021-11-15 13:33:02 +00:00
Andreas Nordahl	59a3c71821	[FIX] Reduce body line-height to make struts smaller	2021-11-15 14:12:54 +01:00
Andreas NordahlandKen	edab708a93	add security playbook card to front page. adjust styling (#1330 ) Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-11-12 15:50:05 +01:00
github-actions[bot]	c291a6106f	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.2 - @navikt/ds-tokens@0.6.2	2021-11-12 13:43:24 +00:00
github-actions[bot]andKenAJoh	8f0601e93f	[FIX] Tokens sync Figma (#1331 ) Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>	2021-11-12 14:27:21 +01:00
github-actions[bot]	03a9d1a554	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.1 - @navikt/ds-icons@0.6.3 - @navikt/ds-react@0.13.1 - @navikt/ds-tokens@0.6.1 - @navikt/ds-react-internal@0.8.1	2021-11-12 11:01:46 +00:00
github-actions[bot]andKenAJoh	c58688a966	[FIX] Tokens sync Figma (#1328 ) Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>	2021-11-12 11:45:51 +01:00
Ken	f242e5028c	Fikset parsing til Style Dictionary format (#1329 )	2021-11-12 11:08:51 +01:00
KenandAndreas Nordahl	92e13a173f	[FIX ] ikon id prefikset (#1324 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-11-12 10:05:52 +01:00
github-actions[bot]	a06b27a218	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.0 - @navikt/ds-react@0.13.0 - @navikt/ds-tokens@0.6.0 - @navikt/ds-react-internal@0.8.0	2021-11-11 17:30:19 +00:00
KenandAndreas Nordahl	942f611c38	[FEATURE] Henter tokens fra Figma (#1270 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-11-11 18:08:31 +01:00
github-actions[bot]	9754e17057	Lerna versionbump [ci skip] - @navikt/ds-react-internal@0.7.4	2021-11-11 16:13:22 +00:00
Ken	656d53c9e4	[FIX] Fjernet aria-haspopup fra toggle-button (#1325 )	2021-11-11 16:57:21 +01:00
Ken	d0bf3d81a8	Update update-icons.yml	2021-11-06 13:47:34 +01:00
github-actions[bot]	39c4c751d8	Lerna versionbump [ci skip] - @navikt/ds-react@0.12.3 - @navikt/ds-react-internal@0.7.3	2021-11-05 11:00:44 +00:00
Andreas Nordahl	dacaf44ea8	[fix] controlled radio group no longer logs errors (#1322 )	2021-11-05 11:42:35 +01:00
github-actions[bot]	8c4c73cc2e	Lerna versionbump [ci skip] - @navikt/ds-icons@0.6.2 - @navikt/ds-react@0.12.2 - @navikt/ds-react-internal@0.7.2	2021-11-03 10:23:10 +00:00
KenandKenAJoh	324eb29f02	[FIX] Ikonsynk Figma (#1319 ) Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>	2021-11-03 11:05:24 +01:00
github-actions[bot]	ce0bde9ea3	Lerna versionbump [ci skip] - @navikt/ds-icons@0.6.1 - @navikt/ds-react@0.12.1 - @navikt/ds-react-internal@0.7.1	2021-11-02 12:30:06 +00:00
KenandGitHub	4c26512709	[FIX] Ikonsynk fra Figma (Automatisk PR) (#1317 ) Co-authored-by: GitHub <noreply@github.com>	2021-11-02 13:13:29 +01:00
Ken	17f5f9e379	github bot som Pr author	2021-11-02 11:39:39 +01:00
Ken	95eeb92a4e	Update update-icons.yml	2021-11-02 11:10:10 +01:00
github-actions[bot]	0673ab670f	Lerna versionbump [ci skip] - @navikt/ds-icons@0.6.0 - @navikt/ds-react@0.12.0 - @navikt/ds-react-internal@0.7.0	2021-11-01 11:54:29 +00:00
KenandKenAJoh	68d5e81076	[FEATURE] Automatisk PR for ikoner (#1314 ) Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>	2021-11-01 12:39:54 +01:00
Ken	b775a84493	oppdatert automatisk PR tekst	2021-11-01 10:53:02 +01:00
Ken	27f491d452	bedre feilmeldinger	2021-11-01 10:21:36 +01:00
Ken	129d159570	fikset update build script	2021-11-01 10:10:38 +01:00
github-actions[bot]	b5d1eb0105	Lerna versionbump [ci skip] - @navikt/ds-icons@0.5.10 - @navikt/ds-react@0.11.10 - @navikt/ds-react-internal@0.6.11	2021-10-29 13:19:58 +00:00
Ken	0f03d9c538	[FIX] Fjernet tabindex fra ikoner (#1313 )	2021-10-29 15:01:07 +02:00