fix: remove brreg action colors, we have to agree upon hover behavior (…

…#758) Co-authored-by: Michael Marszalek <[email protected]>
digdir · Aug 28, 2023 · 02ae6ee · 02ae6ee
1 parent f503271
commit 02ae6ee
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 241 deletions.
diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json
diff --git a/design-tokens/Brand/Brreg.json b/design-tokens/Brand/Brreg.json
@@ -141,38 +141,6 @@
   },
   "semantic": {
     "surface": {
-      "action": {
-        "primary": {
-          "default": {
-            "value": "{brand.primary.600}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "$brand.primary.50",
-            "type": "color"
-          },
-          "active": {
-            "value": "$brand.primary.900",
-            "type": "color",
-            "description": "Standard farge for handlinger"
-          }
-        },
-        "secondary": {
-          "default": {
-            "value": "{brand.secondary.800}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{brand.secondary.50}",
-            "type": "color"
-          },
-          "active": {
-            "value": "{brand.secondary.900}",
-            "type": "color",
-            "description": "Standard farge for handlinger"
-          }
-        }
-      },
       "primary": {
         "light": {
           "value": "{brand.primary.100}",

diff --git a/design-tokens/Brand/Tilsynet.json b/design-tokens/Brand/Tilsynet.json
@@ -249,4 +249,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/tokens/brand/brreg/tokens.cjs.js b/packages/tokens/brand/brreg/tokens.cjs.js
@@ -14,17 +14,17 @@ module.exports = {
   "semantic_surface_neutral_inverted": "#1e2b3c",
   "semantic_surface_action_primary_subtle": "#e6eff8",
   "semantic_surface_action_primary_subtle_hover": "#b3d0ea",
-  "semantic_surface_action_primary_default": "#005FAE",
-  "semantic_surface_action_primary_hover": "$brand.primary.50",
-  "semantic_surface_action_primary_active": "$brand.primary.900",
+  "semantic_surface_action_primary_default": "#0062ba",
+  "semantic_surface_action_primary_hover": "#004e95",
+  "semantic_surface_action_primary_active": "#00315d",
   "semantic_surface_action_primary_no_fill": "#ffffff",
   "semantic_surface_action_primary_no_fill_hover": "#e6eff8",
   "semantic_surface_action_primary_no_fill_active": "#b3d0ea",
   "semantic_surface_action_secondary_subtle": "#f4f5f6",
   "semantic_surface_action_secondary_subtle_hover": "#e9eaec",
-  "semantic_surface_action_secondary_default": "#133349",
-  "semantic_surface_action_secondary_hover": "#FFFFFF",
-  "semantic_surface_action_secondary_active": "#071D2C",
+  "semantic_surface_action_secondary_default": "#00315d",
+  "semantic_surface_action_secondary_hover": "rgba(#00315d, 0.9)",
+  "semantic_surface_action_secondary_active": "rgba(#00315d, 0.8)",
   "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)",

diff --git a/packages/tokens/brand/brreg/tokens.css b/packages/tokens/brand/brreg/tokens.css
@@ -18,17 +18,17 @@
   --fds-semantic-surface-neutral-inverted: #1e2b3c;
   --fds-semantic-surface-action-primary-subtle: #e6eff8;
   --fds-semantic-surface-action-primary-subtle-hover: #b3d0ea;
-  --fds-semantic-surface-action-primary-default: #005FAE;
-  --fds-semantic-surface-action-primary-hover: $brand.primary.50;
-  --fds-semantic-surface-action-primary-active: $brand.primary.900;
+  --fds-semantic-surface-action-primary-default: #0062ba;
+  --fds-semantic-surface-action-primary-hover: #004e95;
+  --fds-semantic-surface-action-primary-active: #00315d;
   --fds-semantic-surface-action-primary-no_fill: #ffffff;
   --fds-semantic-surface-action-primary-no_fill-hover: #e6eff8;
   --fds-semantic-surface-action-primary-no_fill-active: #b3d0ea;
   --fds-semantic-surface-action-secondary-subtle: #f4f5f6;
   --fds-semantic-surface-action-secondary-subtle-hover: #e9eaec;
-  --fds-semantic-surface-action-secondary-default: #133349;
-  --fds-semantic-surface-action-secondary-hover: #FFFFFF;
-  --fds-semantic-surface-action-secondary-active: #071D2C;
+  --fds-semantic-surface-action-secondary-default: #00315d;
+  --fds-semantic-surface-action-secondary-hover: rgba(#00315d, 0.9);
+  --fds-semantic-surface-action-secondary-active: rgba(#00315d, 0.8);
   --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);

diff --git a/packages/tokens/brand/brreg/tokens.esm.js b/packages/tokens/brand/brreg/tokens.esm.js
@@ -13,17 +13,17 @@ export const semantic_surface_neutral_dark = "#68707c";
 export const semantic_surface_neutral_inverted = "#1e2b3c";
 export const semantic_surface_action_primary_subtle = "#e6eff8";
 export const semantic_surface_action_primary_subtle_hover = "#b3d0ea";
-export const semantic_surface_action_primary_default = "#005FAE";
-export const semantic_surface_action_primary_hover = "$brand.primary.50";
-export const semantic_surface_action_primary_active = "$brand.primary.900";
+export const semantic_surface_action_primary_default = "#0062ba";
+export const semantic_surface_action_primary_hover = "#004e95";
+export const semantic_surface_action_primary_active = "#00315d";
 export const semantic_surface_action_primary_no_fill = "#ffffff";
 export const semantic_surface_action_primary_no_fill_hover = "#e6eff8";
 export const semantic_surface_action_primary_no_fill_active = "#b3d0ea";
 export const semantic_surface_action_secondary_subtle = "#f4f5f6";
 export const semantic_surface_action_secondary_subtle_hover = "#e9eaec";
-export const semantic_surface_action_secondary_default = "#133349";
-export const semantic_surface_action_secondary_hover = "#FFFFFF";
-export const semantic_surface_action_secondary_active = "#071D2C";
+export const semantic_surface_action_secondary_default = "#00315d";
+export const semantic_surface_action_secondary_hover = "rgba(#00315d, 0.9)";
+export const semantic_surface_action_secondary_active = "rgba(#00315d, 0.8)";
 export const semantic_surface_action_secondary_no_fill = "#ffffff";
 export const semantic_surface_action_secondary_no_fill_hover = "rgba(#00315d, 0.1)";
 export const semantic_surface_action_secondary_no_fill_active = "rgba(#00315d, 0.2)";

diff --git a/storefront/tokens/brreg.ts b/storefront/tokens/brreg.ts
@@ -153,12 +153,12 @@ export const color = {
             lastName: 'subtle-hover',
           },
           {
-            value: '#005FAE',
+            value: '#0062ba',
             type: 'color',
-            filePath: '../../design-tokens/Brand/Brreg.json',
+            filePath: '../../design-tokens/Base/Semantic.json',
             isSource: false,
             original: {
-              value: '{brand.primary.600}',
+              value: '{colors.blue.700}',
               type: 'color',
             },
             name: '--fds-semantic-surface-action-primary-default',
@@ -167,12 +167,12 @@ export const color = {
             lastName: 'default',
           },
           {
-            value: '$brand.primary.50',
+            value: '#004e95',
             type: 'color',
-            filePath: '../../design-tokens/Brand/Brreg.json',
+            filePath: '../../design-tokens/Base/Semantic.json',
             isSource: false,
             original: {
-              value: '$brand.primary.50',
+              value: '{colors.blue.800}',
               type: 'color',
             },
             name: '--fds-semantic-surface-action-primary-hover',
@@ -181,13 +181,13 @@ export const color = {
             lastName: 'hover',
           },
           {
-            value: '$brand.primary.900',
+            value: '#00315d',
             type: 'color',
             description: 'Standard farge for handlinger',
-            filePath: '../../design-tokens/Brand/Brreg.json',
+            filePath: '../../design-tokens/Base/Semantic.json',
             isSource: false,
             original: {
-              value: '$brand.primary.900',
+              value: '{colors.blue.900}',
               type: 'color',
               description: 'Standard farge for handlinger',
             },
@@ -281,12 +281,12 @@ export const color = {
             lastName: 'subtle-hover',
           },
           {
-            value: '#133349',
+            value: '#00315d',
             type: 'color',
-            filePath: '../../design-tokens/Brand/Brreg.json',
+            filePath: '../../design-tokens/Base/Semantic.json',
             isSource: false,
             original: {
-              value: '{brand.secondary.800}',
+              value: '{colors.blue.900}',
               type: 'color',
             },
             name: '--fds-semantic-surface-action-secondary-default',
@@ -295,12 +295,12 @@ export const color = {
             lastName: 'default',
           },
           {
-            value: '#FFFFFF',
+            value: 'rgba(#00315d, 0.9)',
             type: 'color',
-            filePath: '../../design-tokens/Brand/Brreg.json',
+            filePath: '../../design-tokens/Base/Semantic.json',
             isSource: false,
             original: {
-              value: '{brand.secondary.50}',
+              value: 'rgba({colors.blue.900}, 0.9)',
               type: 'color',
             },
             name: '--fds-semantic-surface-action-secondary-hover',
@@ -309,13 +309,13 @@ export const color = {
             lastName: 'hover',
           },
           {
-            value: '#071D2C',
+            value: 'rgba(#00315d, 0.8)',
             type: 'color',
             description: 'Standard farge for handlinger',
-            filePath: '../../design-tokens/Brand/Brreg.json',
+            filePath: '../../design-tokens/Base/Semantic.json',
             isSource: false,
             original: {
-              value: '{brand.secondary.900}',
+              value: 'rgba({colors.blue.900}, 0.8)',
               type: 'color',
               description: 'Standard farge for handlinger',
             },
-Original file line number
+Diff line change
@@ Expand Up / @@ -249,4 +249,4 @@ @@
           }
         }
       }
-    }
+    }