💄 Text-subtle, icon-subtle til 700 nivå, form-description farger(#2036)

navikt · Jun 7, 2023 · b2f796d · b2f796d
1 parent 17d92c9
commit b2f796d
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 4 deletions.
diff --git a/.changeset/wild-chefs-rescue.md b/.changeset/wild-chefs-rescue.md
@@ -0,0 +1,8 @@
+---
+"@navikt/ds-css": minor
+"@navikt/ds-tokens": minor
+---
+
+- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600).
+- Icon-subtle bruker nå grayalpha.
+- Alle description-felter på fieldsets har nå text-subtle som farge.
diff --git a/@navikt/core/css/form/fieldset.css b/@navikt/core/css/form/fieldset.css
@@ -9,6 +9,10 @@
   margin-top: var(--a-spacing-2);
 }
 
+.navds-fieldset__description {
+  color: var(--ac-form-description, var(--a-text-subtle));
+}
+
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
   margin-top: 0.125rem;
 }

diff --git a/@navikt/core/css/form/form.css b/@navikt/core/css/form/form.css
@@ -6,6 +6,7 @@
 
 .navds-form-field__description {
   margin-top: -6px;
+  color: var(--ac-form-description, var(--a-text-subtle));
 }
 
 .navds-form-field .navds-error-message,

diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
@@ -349,6 +349,10 @@
     "--ac-radio-checkbox-error-border": "--a-border-danger",
     "--ac-radio-checkbox-error-hover-bg": "--a-surface-danger-subtle"
   },
+  "forms": {
+    "--ac-form-description": "--a-text-subtle",
+    "--ac-form-subdescription": "--a-text-subtle"
+  },
   "search": {
     "--ac-search-button-border": "--a-border-default",
     "--ac-search-button-border-hover": "--a-border-action",

diff --git a/@navikt/core/tokens/docs.json b/@navikt/core/tokens/docs.json
@@ -221,7 +221,7 @@
   ],
   "semantic-text": [
     { "name": "--a-text-default", "value": "rgba(38, 38, 38, 1)" },
-    { "name": "--a-text-subtle", "value": "rgba(0, 0, 0, 0.56)" },
+    { "name": "--a-text-subtle", "value": "rgba(0, 0, 0, 0.65)" },
     { "name": "--a-text-visited", "value": "rgba(99, 70, 137, 1)" },
     { "name": "--a-text-danger", "value": "rgba(195, 0, 0, 1)" },
     { "name": "--a-text-action", "value": "rgba(0, 103, 197, 1)" },
@@ -339,7 +339,7 @@
   ],
   "semantic-icon": [
     { "name": "--a-icon-default", "value": "rgba(38, 38, 38, 1)" },
-    { "name": "--a-icon-subtle", "value": "rgba(112, 112, 112, 1)" },
+    { "name": "--a-icon-subtle", "value": "rgba(0, 0, 0, 0.65)" },
     { "name": "--a-icon-on-neutral", "value": "rgba(255, 255, 255, 1)" },
     { "name": "--a-icon-on-inverted", "value": "rgba(255, 255, 255, 1)" },
     { "name": "--a-icon-action", "value": "rgba(0, 103, 197, 1)" },

diff --git a/@navikt/core/tokens/src/semantic-colors.json b/@navikt/core/tokens/src/semantic-colors.json
@@ -5,7 +5,7 @@
         "value": "{a.gray.900.value}"
       },
       "subtle": {
-        "value": "{a.grayalpha.600.value}"
+        "value": "{a.grayalpha.700.value}"
       },
       "visited": {
         "value": "{a.purple.500.value}"
@@ -284,7 +284,7 @@
         "value": "{a.gray.900.value}"
       },
       "subtle": {
-        "value": "{a.gray.600.value}"
+        "value": "{a.grayalpha.700.value}"
       },
       "action": {
         "selected": { "value": "{a.deepblue.500.value}" },