feat: added global action colors (#779)

Co-authored-by: Michael Marszalek <[email protected]>
digdir · Sep 7, 2023 · 2046352 · 2046352
1 parent 28f85e7
commit 2046352
Show file tree

Hide file tree

Showing 22 changed files with 3,712 additions and 2,555 deletions.
diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json
@@ -73,7 +73,6 @@
       "semantic.border.action.secondary.default": "20948acfebc16b98ebdec218156eb3d4156c0867",
       "semantic.border.action.secondary.hover": "59b9c4d246e503f867dc67a58ea049bdff778761",
       "semantic.border.action.secondary.active": "c44fc2b5b1167ed0a9721fffb500fbd953106d6a",
-      "semantic.border.action.default": "e447feeef19c9d45be5c1aaa78b0c83b0470ba62",
       "semantic.border.action.hover": "a2f8f4e4e251e043760e84a07d2e45168db134c2",
       "semantic.border.neutral.default": "6eef00f8c90207cd1a7887bfcd6def2021ab3bcd",
       "semantic.border.neutral.subtle": "d7b34602ebe292a4b03305d26722b93960e93fc7",
@@ -159,7 +158,8 @@
       "base_sizing": "8b2e38e747d963c47774762963f63383916e47ab",
       "border_width.default": "9d16c8e36225953fb4962f8740c4c61564d5a301",
       "border_width.active": "5a6e53c5e40ed0bba4925a247a6ecc099b7c4fa1",
-      "border_width.tab_focus": "064b5dac51141b65dfc44d3c255a04644cca3547"
+      "border_width.tab_focus": "064b5dac51141b65dfc44d3c255a04644cca3547",
+      "semantic.border.action.dark": "e447feeef19c9d45be5c1aaa78b0c83b0470ba62"
     },
     "group": "Core"
   },
@@ -329,7 +329,6 @@
       "semantic.surface.tertiary.tertiary-active": "S:b689fae8c6cc5fd27dae42b560d971d5e7dbb9ae,",
       "semantic.border.info.default": "S:19df2fc03ec24346fa30c0b37d50b64cb0c85614,",
       "semantic.border.action.subtle": "S:04ad95c402fd76ed849b1031835632c8d3c06236,",
-      "semantic.border.action.default": "S:38130df3c467c65fd93968897876556bc5bf60e7,",
       "semantic.border.action.hover": "S:bc8730939b4c02ed642ca9a8e5397ecaad9ec020,",
       "semantic.border.action.active": "S:019654324698b19d71ba02e616e183dfb30f15b9,",
       "semantic.border.neutral.default": "S:86de0ad5e55f2e4ac7cb2a0ad8f48105e6e9a626,",
@@ -416,7 +415,8 @@
       "semantic.surface.neutral.subtle-hover": "S:ecb9014f477602ba313b83b489c86b56d3cdb0ba,",
       "semantic.surface.primary.light": "S:5d186a6b3411853833badfc76abd94a6fdfbc63a,",
       "brand.secondary.900": "S:23925b130515fb61d12fb3414165f61e094a6262,",
-      "semantic.surface.danger.no_fill-active": "S:edd236f2e24d2f9f83699730b5ef792aa03d96a5,"
+      "semantic.surface.danger.no_fill-active": "S:edd236f2e24d2f9f83699730b5ef792aa03d96a5,",
+      "semantic.border.action.dark": "S:38130df3c467c65fd93968897876556bc5bf60e7,"
     },
     "$figmaCollectionId": "VariableCollectionId:6324:1609",
     "$figmaModeId": "6324:1",
@@ -532,7 +532,6 @@
       "semantic.border.action.secondary.default": "1982d70d5d0554312964527b839818103942ad07",
       "semantic.border.action.secondary.hover": "5a198e77a279505db0762533275d772d3cdb1137",
       "semantic.border.action.secondary.active": "147ad7bee625c87b00c3bf733523396cfcf8aeee",
-      "semantic.border.action.default": "0f2c1c18c8204303501a0f6adc9a06b98861299e",
       "semantic.border.action.hover": "ab15b7ba98f93f5349337859d8c4e0a1bb4b64a9",
       "semantic.border.neutral.default": "926cf2c12ee7510e905c5935d04a99c27e780bb6",
       "semantic.border.neutral.subtle": "61eaf517c6981184009c98e80d58a953ab69422f",
@@ -618,7 +617,8 @@
       "base_sizing": "9720ca86555bde90493208437a6f5cacd270ee0e",
       "border_width.default": "b44447ba2e2504923d4903e4eb14954434480085",
       "border_width.active": "82d06b8c6fdeea622611fa744ff261661a211760",
-      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7"
+      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7",
+      "semantic.border.action.dark": "0f2c1c18c8204303501a0f6adc9a06b98861299e"
     },
     "group": "Brand"
   },
@@ -745,7 +745,6 @@
       "semantic.border.action.secondary.default": "1982d70d5d0554312964527b839818103942ad07",
       "semantic.border.action.secondary.hover": "5a198e77a279505db0762533275d772d3cdb1137",
       "semantic.border.action.secondary.active": "147ad7bee625c87b00c3bf733523396cfcf8aeee",
-      "semantic.border.action.default": "0f2c1c18c8204303501a0f6adc9a06b98861299e",
       "semantic.border.action.hover": "ab15b7ba98f93f5349337859d8c4e0a1bb4b64a9",
       "semantic.border.neutral.default": "926cf2c12ee7510e905c5935d04a99c27e780bb6",
       "semantic.border.neutral.subtle": "61eaf517c6981184009c98e80d58a953ab69422f",
@@ -831,7 +830,8 @@
       "base_sizing": "9720ca86555bde90493208437a6f5cacd270ee0e",
       "border_width.default": "b44447ba2e2504923d4903e4eb14954434480085",
       "border_width.active": "82d06b8c6fdeea622611fa744ff261661a211760",
-      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7"
+      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7",
+      "semantic.border.action.dark": "0f2c1c18c8204303501a0f6adc9a06b98861299e"
     },
     "group": "Brand"
   },
@@ -958,7 +958,6 @@
       "semantic.border.action.secondary.default": "1982d70d5d0554312964527b839818103942ad07",
       "semantic.border.action.secondary.hover": "5a198e77a279505db0762533275d772d3cdb1137",
       "semantic.border.action.secondary.active": "147ad7bee625c87b00c3bf733523396cfcf8aeee",
-      "semantic.border.action.default": "0f2c1c18c8204303501a0f6adc9a06b98861299e",
       "semantic.border.action.hover": "ab15b7ba98f93f5349337859d8c4e0a1bb4b64a9",
       "semantic.border.neutral.default": "926cf2c12ee7510e905c5935d04a99c27e780bb6",
       "semantic.border.neutral.subtle": "61eaf517c6981184009c98e80d58a953ab69422f",
@@ -1044,7 +1043,8 @@
       "base_sizing": "9720ca86555bde90493208437a6f5cacd270ee0e",
       "border_width.default": "b44447ba2e2504923d4903e4eb14954434480085",
       "border_width.active": "82d06b8c6fdeea622611fa744ff261661a211760",
-      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7"
+      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7",
+      "semantic.border.action.dark": "0f2c1c18c8204303501a0f6adc9a06b98861299e"
     },
     "group": "Brand"
   },
@@ -1183,7 +1183,6 @@
       "semantic.border.action.secondary.default": "1982d70d5d0554312964527b839818103942ad07",
       "semantic.border.action.secondary.hover": "5a198e77a279505db0762533275d772d3cdb1137",
       "semantic.border.action.secondary.active": "147ad7bee625c87b00c3bf733523396cfcf8aeee",
-      "semantic.border.action.default": "0f2c1c18c8204303501a0f6adc9a06b98861299e",
       "semantic.border.action.hover": "ab15b7ba98f93f5349337859d8c4e0a1bb4b64a9",
       "semantic.border.neutral.default": "926cf2c12ee7510e905c5935d04a99c27e780bb6",
       "semantic.border.neutral.subtle": "61eaf517c6981184009c98e80d58a953ab69422f",
@@ -1261,7 +1260,8 @@
       "base_sizing": "9720ca86555bde90493208437a6f5cacd270ee0e",
       "border_width.default": "b44447ba2e2504923d4903e4eb14954434480085",
       "border_width.active": "82d06b8c6fdeea622611fa744ff261661a211760",
-      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7"
+      "border_width.tab_focus": "3ddf887f27c7dff953b8399c667e16448ae252d7",
+      "semantic.border.action.dark": "0f2c1c18c8204303501a0f6adc9a06b98861299e"
     },
     "group": "Brand",
     "$figmaCollectionId": "VariableCollectionId:6324:1609",

diff --git a/design-tokens/Base/Semantic.json b/design-tokens/Base/Semantic.json
@@ -42,6 +42,43 @@
         }
       },
       "action": {
+        "subtle": {
+          "value": "{colors.blue.100}",
+          "type": "color"
+        },
+        "subtle-hover": {
+          "value": "{colors.blue.200}",
+          "type": "color"
+        },
+        "default": {
+          "value": "{colors.blue.700}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{colors.blue.800}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{colors.blue.900}",
+          "type": "color",
+          "description": "Standard farge for handlinger"
+        },
+        "no_fill": {
+          "value": "{colors.white}",
+          "type": "color"
+        },
+        "no_fill-hover": {
+          "value": "{colors.blue.100}",
+          "type": "color"
+        },
+        "no_fill-active": {
+          "value": "{colors.blue.200}",
+          "type": "color"
+        },
+        "checked": {
+          "value": "{colors.blue.700}",
+          "type": "color"
+        },
         "primary": {
           "subtle": {
             "value": "{colors.blue.100}",
@@ -111,10 +148,6 @@
             "value": "rgba({colors.blue.900}, 0.2)",
             "type": "color"
           }
-        },
-        "checked": {
-          "value": "{colors.blue.700}",
-          "type": "color"
         }
       },
       "success": {
@@ -244,6 +277,34 @@
         }
       },
       "action": {
+        "subtle": {
+          "value": "{colors.blue.200}",
+          "type": "color"
+        },
+        "subtle-hover": {
+          "value": "{colors.blue.400}",
+          "type": "color"
+        },
+        "default": {
+          "value": "{colors.blue.700}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "{colors.blue.700}",
+          "type": "color"
+        },
+        "active": {
+          "value": "{colors.blue.900}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{colors.blue.900}",
+          "type": "color"
+        },
+        "dark-hover": {
+          "value": "{colors.blue.700}",
+          "type": "color"
+        },
         "primary": {
           "subtle": {
             "value": "{colors.blue.200}",
@@ -287,14 +348,6 @@
             "value": "{colors.blue.900}",
             "type": "color"
           }
-        },
-        "default": {
-          "value": "{colors.blue.900}",
-          "type": "color"
-        },
-        "hover": {
-          "value": "{colors.blue.700}",
-          "type": "color"
         }
       },
       "neutral": {
@@ -422,6 +475,22 @@
         }
       },
       "action": {
+        "default": {
+          "value": "{colors.blue.700}",
+          "type": "color"
+        },
+        "hover": {
+          "value": "#004e95",
+          "type": "color"
+        },
+        "active": {
+          "value": "#00315d",
+          "type": "color"
+        },
+        "on_action": {
+          "value": "{colors.white}",
+          "type": "color"
+        },
         "primary": {
           "default": {
             "value": "{colors.blue.700}",

diff --git a/packages/tokens/brand/altinn/tokens.cjs.js b/packages/tokens/brand/altinn/tokens.cjs.js
@@ -13,6 +13,15 @@ module.exports = {
   "semantic_surface_neutral_dark": "#68707c",
   "semantic_surface_neutral_dark_hover": "#4b5563",
   "semantic_surface_neutral_inverted": "#1e2b3c",
+  "semantic_surface_action_subtle": "#e6eff8",
+  "semantic_surface_action_subtle_hover": "#b3d0ea",
+  "semantic_surface_action_default": "#0062ba",
+  "semantic_surface_action_hover": "#004e95",
+  "semantic_surface_action_active": "#00315d",
+  "semantic_surface_action_no_fill": "#ffffff",
+  "semantic_surface_action_no_fill_hover": "#e6eff8",
+  "semantic_surface_action_no_fill_active": "#b3d0ea",
+  "semantic_surface_action_checked": "#0062ba",
   "semantic_surface_action_primary_subtle": "#e6eff8",
   "semantic_surface_action_primary_subtle_hover": "#b3d0ea",
   "semantic_surface_action_primary_default": "#0062ba",
@@ -29,7 +38,6 @@ module.exports = {
   "semantic_surface_action_secondary_no_fill": "#ffffff",
   "semantic_surface_action_secondary_no_fill_hover": "rgba(#00315d, 0.1)",
   "semantic_surface_action_secondary_no_fill_active": "rgba(#00315d, 0.2)",
-  "semantic_surface_action_checked": "#0062ba",
   "semantic_surface_success_subtle": "#d1f4e1",
   "semantic_surface_success_subtle_hover": "#8be4b5",
   "semantic_surface_success_default": "#118849",
@@ -70,6 +78,13 @@ module.exports = {
   "semantic_surface_tertiary_light_active": "#E6586D",
   "semantic_surface_tertiary_dark": "#5A121D",
   "semantic_border_info_default": "#004e95",
+  "semantic_border_action_subtle": "#b3d0ea",
+  "semantic_border_action_subtle_hover": "#66a1d6",
+  "semantic_border_action_default": "#0062ba",
+  "semantic_border_action_hover": "#0062ba",
+  "semantic_border_action_active": "#00315d",
+  "semantic_border_action_dark": "#00315d",
+  "semantic_border_action_dark_hover": "#0062ba",
   "semantic_border_action_primary_subtle": "#b3d0ea",
   "semantic_border_action_primary_subtle_hover": "#66a1d6",
   "semantic_border_action_primary_default": "#0062ba",
@@ -80,8 +95,6 @@ module.exports = {
   "semantic_border_action_secondary_default": "#00315d",
   "semantic_border_action_secondary_hover": "#00315d",
   "semantic_border_action_secondary_active": "#00315d",
-  "semantic_border_action_default": "#00315d",
-  "semantic_border_action_hover": "#0062ba",
   "semantic_border_neutral_default": "#68707c",
   "semantic_border_neutral_subtle": "#d2d5d8",
   "semantic_border_neutral_strong": "#1e2b3c",
@@ -117,6 +130,10 @@ module.exports = {
   "semantic_text_neutral_default": "#1e2b3c",
   "semantic_text_neutral_subtle": "#4b5563",
   "semantic_text_neutral_on_inverted": "#ffffff",
+  "semantic_text_action_default": "#0062ba",
+  "semantic_text_action_hover": "#004e95",
+  "semantic_text_action_active": "#00315d",
+  "semantic_text_action_on_action": "#ffffff",
   "semantic_text_action_primary_default": "#0062ba",
   "semantic_text_action_primary_hover": "#004e95",
   "semantic_text_action_primary_active": "#00315d",

diff --git a/packages/tokens/brand/altinn/tokens.css b/packages/tokens/brand/altinn/tokens.css
@@ -17,6 +17,15 @@
   --fds-semantic-surface-neutral-dark: #68707c;
   --fds-semantic-surface-neutral-dark-hover: #4b5563;
   --fds-semantic-surface-neutral-inverted: #1e2b3c;
+  --fds-semantic-surface-action-subtle: #e6eff8;
+  --fds-semantic-surface-action-subtle-hover: #b3d0ea;
+  --fds-semantic-surface-action-default: #0062ba;
+  --fds-semantic-surface-action-hover: #004e95;
+  --fds-semantic-surface-action-active: #00315d;
+  --fds-semantic-surface-action-no_fill: #ffffff;
+  --fds-semantic-surface-action-no_fill-hover: #e6eff8;
+  --fds-semantic-surface-action-no_fill-active: #b3d0ea;
+  --fds-semantic-surface-action-checked: #0062ba;
   --fds-semantic-surface-action-primary-subtle: #e6eff8;
   --fds-semantic-surface-action-primary-subtle-hover: #b3d0ea;
   --fds-semantic-surface-action-primary-default: #0062ba;
@@ -33,7 +42,6 @@
   --fds-semantic-surface-action-secondary-no_fill: #ffffff;
   --fds-semantic-surface-action-secondary-no_fill-hover: rgba(#00315d, 0.1);
   --fds-semantic-surface-action-secondary-no_fill-active: rgba(#00315d, 0.2);
-  --fds-semantic-surface-action-checked: #0062ba;
   --fds-semantic-surface-success-subtle: #d1f4e1;
   --fds-semantic-surface-success-subtle-hover: #8be4b5;
   --fds-semantic-surface-success-default: #118849;
@@ -74,6 +82,13 @@
   --fds-semantic-surface-tertiary-light-active: #E6586D;
   --fds-semantic-surface-tertiary-dark: #5A121D;
   --fds-semantic-border-info-default: #004e95;
+  --fds-semantic-border-action-subtle: #b3d0ea;
+  --fds-semantic-border-action-subtle-hover: #66a1d6;
+  --fds-semantic-border-action-default: #0062ba;
+  --fds-semantic-border-action-hover: #0062ba;
+  --fds-semantic-border-action-active: #00315d;
+  --fds-semantic-border-action-dark: #00315d;
+  --fds-semantic-border-action-dark-hover: #0062ba;
   --fds-semantic-border-action-primary-subtle: #b3d0ea;
   --fds-semantic-border-action-primary-subtle-hover: #66a1d6;
   --fds-semantic-border-action-primary-default: #0062ba;
@@ -84,8 +99,6 @@
   --fds-semantic-border-action-secondary-default: #00315d;
   --fds-semantic-border-action-secondary-hover: #00315d;
   --fds-semantic-border-action-secondary-active: #00315d;
-  --fds-semantic-border-action-default: #00315d;
-  --fds-semantic-border-action-hover: #0062ba;
   --fds-semantic-border-neutral-default: #68707c;
   --fds-semantic-border-neutral-subtle: #d2d5d8;
   --fds-semantic-border-neutral-strong: #1e2b3c;
@@ -121,6 +134,10 @@
   --fds-semantic-text-neutral-default: #1e2b3c;
   --fds-semantic-text-neutral-subtle: #4b5563;
   --fds-semantic-text-neutral-on_inverted: #ffffff;
+  --fds-semantic-text-action-default: #0062ba;
+  --fds-semantic-text-action-hover: #004e95;
+  --fds-semantic-text-action-active: #00315d;
+  --fds-semantic-text-action-on_action: #ffffff;
   --fds-semantic-text-action-primary-default: #0062ba;
   --fds-semantic-text-action-primary-hover: #004e95;
   --fds-semantic-text-action-primary-active: #00315d;