fix(tokens): Brand tokens not always overriding correctly in tokens e…

…xport (#750)
digdir · Aug 23, 2023 · 4ae2c5b · 4ae2c5b
1 parent f68ad25
commit 4ae2c5b
Show file tree

Hide file tree

Showing 24 changed files with 6,350 additions and 6,322 deletions.
diff --git a/design-tokens/Brand/Tilsynet.json b/design-tokens/Brand/Tilsynet.json
@@ -124,11 +124,11 @@
             "type": "color"
           },
           "hover": {
-            "value": "$brand.primary.800",
+            "value": "{brand.primary.800}",
             "type": "color"
           },
           "active": {
-            "value": "$brand.primary.900",
+            "value": "{brand.primary.900}",
             "type": "color",
             "description": "Standard farge for handlinger"
           }
@@ -249,4 +249,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/tokens/brand/altinn/tokens.cjs.js b/packages/tokens/brand/altinn/tokens.cjs.js
@@ -4,45 +4,8 @@
  */
 
 module.exports = {
-  "brand_primary_100": "#E6EFF8",
-  "brand_primary_200": "#B3D0EA",
-  "brand_primary_300": "#80B1DD",
-  "brand_primary_400": "#66A1D6",
-  "brand_primary_500": "#3381C8",
-  "brand_primary_600": "#1A72C1",
-  "brand_primary_700": "#0062BA",
-  "brand_primary_800": "#004E95",
-  "brand_primary_900": "#00315D",
-  "brand_secondary_100": "#DCD6EA",
-  "brand_secondary_200": "#C5BBDD",
-  "brand_secondary_300": "#A392C8",
-  "brand_secondary_400": "#806AB4",
-  "brand_secondary_500": "#6A52A3",
-  "brand_secondary_600": "#594488",
-  "brand_secondary_700": "#3F3161",
-  "brand_secondary_800": "#352951",
-  "brand_secondary_900": "#231B36",
-  "brand_tertiary_100": "#F9D5DB",
-  "brand_tertiary_200": "#F3ABB6",
-  "brand_tertiary_300": "#EC8292",
-  "brand_tertiary_400": "#E6586D",
-  "brand_tertiary_500": "#E02E49",
-  "brand_tertiary_600": "#B3253A",
-  "brand_tertiary_700": "#861C2C",
-  "brand_tertiary_800": "#5A121D",
-  "brand_tertiary_900": "#480e17",
-  "semantic_surface_primary_light": "#B3D0EA",
-  "semantic_surface_primary_light_hover": "#80B1DD",
-  "semantic_surface_primary_light_active": "#66A1D6",
-  "semantic_surface_primary_dark": "#004E95",
-  "semantic_surface_secondary_light": "#C5BBDD",
-  "semantic_surface_secondary_light_hover": "#A392C8",
-  "semantic_surface_secondary_light_active": "#806AB4",
-  "semantic_surface_secondary_dark": "#231B36",
-  "semantic_surface_tertiary_light": "#F3ABB6",
-  "semantic_surface_tertiary_light_hover": "#EC8292",
-  "semantic_surface_tertiary_light_active": "#E6586D",
-  "semantic_surface_tertiary_dark": "#5A121D",
+  "semantic_background_default": "#ffffff",
+  "semantic_background_subtle": "#f4f5f6",
   "semantic_surface_neutral_default": "#ffffff",
   "semantic_surface_neutral_selected": "#e6eff8",
   "semantic_surface_neutral_subtle": "#f4f5f6",
@@ -93,15 +56,18 @@ module.exports = {
   "semantic_surface_on_inverted_no_fill": "#ffffff00",
   "semantic_surface_on_inverted_no_fill_hover": "#ffffff1a",
   "semantic_surface_on_inverted_no_fill_active": "#ffffff33",
-  "semantic_border_primary_default": "#1A72C1",
-  "semantic_border_primary_hover": "#0062BA",
-  "semantic_border_primary_active": "#004E95",
-  "semantic_border_secondary_default": "#594488",
-  "semantic_border_secondary_hover": "#3F3161",
-  "semantic_border_secondary_active": "#352951",
-  "semantic_border_tertiary_default": "#B3253A",
-  "semantic_border_tertiary_hover": "#861C2C",
-  "semantic_border_tertiary_active": "#5A121D",
+  "semantic_surface_primary_light": "#B3D0EA",
+  "semantic_surface_primary_light_hover": "#80B1DD",
+  "semantic_surface_primary_light_active": "#66A1D6",
+  "semantic_surface_primary_dark": "#004E95",
+  "semantic_surface_secondary_light": "#C5BBDD",
+  "semantic_surface_secondary_light_hover": "#A392C8",
+  "semantic_surface_secondary_light_active": "#806AB4",
+  "semantic_surface_secondary_dark": "#231B36",
+  "semantic_surface_tertiary_light": "#F3ABB6",
+  "semantic_surface_tertiary_light_hover": "#EC8292",
+  "semantic_surface_tertiary_light_active": "#E6586D",
+  "semantic_surface_tertiary_dark": "#5A121D",
   "semantic_border_info_default": "#004e95",
   "semantic_border_action_primary_subtle": "#b3d0ea",
   "semantic_border_action_primary_subtle_hover": "#66a1d6",
@@ -133,8 +99,15 @@ module.exports = {
   "semantic_border_on_inverted_default": "#ffffff",
   "semantic_border_input_default": "#00315d",
   "semantic_border_input_hover": "#0062ba",
-  "semantic_background_default": "#ffffff",
-  "semantic_background_subtle": "#f4f5f6",
+  "semantic_border_primary_default": "#1A72C1",
+  "semantic_border_primary_hover": "#0062BA",
+  "semantic_border_primary_active": "#004E95",
+  "semantic_border_secondary_default": "#594488",
+  "semantic_border_secondary_hover": "#3F3161",
+  "semantic_border_secondary_active": "#352951",
+  "semantic_border_tertiary_default": "#B3253A",
+  "semantic_border_tertiary_hover": "#861C2C",
+  "semantic_border_tertiary_active": "#5A121D",
   "semantic_text_success_default": "#0c6536",
   "semantic_text_success_hover": "#084826",
   "semantic_text_success_active": "#084826",
@@ -233,6 +206,33 @@ module.exports = {
   "shadow_medium": "0 2px 4px -2px #0000001a, 0 4px 5px #0000001a",
   "shadow_large": "0 4px 6px -4px #0000001a, 0 10px 12px #0000001a",
   "shadow_xlarge": "0 8px 10px -6px #0000001a, 0 25px 45px #0000001a",
+  "brand_primary_100": "#E6EFF8",
+  "brand_primary_200": "#B3D0EA",
+  "brand_primary_300": "#80B1DD",
+  "brand_primary_400": "#66A1D6",
+  "brand_primary_500": "#3381C8",
+  "brand_primary_600": "#1A72C1",
+  "brand_primary_700": "#0062BA",
+  "brand_primary_800": "#004E95",
+  "brand_primary_900": "#00315D",
+  "brand_secondary_100": "#DCD6EA",
+  "brand_secondary_200": "#C5BBDD",
+  "brand_secondary_300": "#A392C8",
+  "brand_secondary_400": "#806AB4",
+  "brand_secondary_500": "#6A52A3",
+  "brand_secondary_600": "#594488",
+  "brand_secondary_700": "#3F3161",
+  "brand_secondary_800": "#352951",
+  "brand_secondary_900": "#231B36",
+  "brand_tertiary_100": "#F9D5DB",
+  "brand_tertiary_200": "#F3ABB6",
+  "brand_tertiary_300": "#EC8292",
+  "brand_tertiary_400": "#E6586D",
+  "brand_tertiary_500": "#E02E49",
+  "brand_tertiary_600": "#B3253A",
+  "brand_tertiary_700": "#861C2C",
+  "brand_tertiary_800": "#5A121D",
+  "brand_tertiary_900": "#480e17",
   "component_mode_height_small": "36px",
   "component_mode_height_medium": "45px",
   "component_mode_height_large": "54px",
@@ -242,4 +242,4 @@ module.exports = {
   "component_mode_gap_small": "4.5px",
   "component_mode_gap_medium": "9px",
   "component_mode_gap_large": "13.5px"
-};
+};
diff --git a/packages/tokens/brand/altinn/tokens.css b/packages/tokens/brand/altinn/tokens.css
@@ -8,45 +8,8 @@
   --fds-font-size-f0: clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem);
 
   /** Tokens */ 
-  --fds-brand-primary-100: #E6EFF8;
-  --fds-brand-primary-200: #B3D0EA;
-  --fds-brand-primary-300: #80B1DD;
-  --fds-brand-primary-400: #66A1D6;
-  --fds-brand-primary-500: #3381C8;
-  --fds-brand-primary-600: #1A72C1;
-  --fds-brand-primary-700: #0062BA;
-  --fds-brand-primary-800: #004E95;
-  --fds-brand-primary-900: #00315D;
-  --fds-brand-secondary-100: #DCD6EA;
-  --fds-brand-secondary-200: #C5BBDD;
-  --fds-brand-secondary-300: #A392C8;
-  --fds-brand-secondary-400: #806AB4;
-  --fds-brand-secondary-500: #6A52A3;
-  --fds-brand-secondary-600: #594488;
-  --fds-brand-secondary-700: #3F3161;
-  --fds-brand-secondary-800: #352951;
-  --fds-brand-secondary-900: #231B36;
-  --fds-brand-tertiary-100: #F9D5DB;
-  --fds-brand-tertiary-200: #F3ABB6;
-  --fds-brand-tertiary-300: #EC8292;
-  --fds-brand-tertiary-400: #E6586D;
-  --fds-brand-tertiary-500: #E02E49;
-  --fds-brand-tertiary-600: #B3253A;
-  --fds-brand-tertiary-700: #861C2C;
-  --fds-brand-tertiary-800: #5A121D;
-  --fds-brand-tertiary-900: #480e17;
-  --fds-semantic-surface-primary-light: #B3D0EA;
-  --fds-semantic-surface-primary-light-hover: #80B1DD;
-  --fds-semantic-surface-primary-light-active: #66A1D6;
-  --fds-semantic-surface-primary-dark: #004E95;
-  --fds-semantic-surface-secondary-light: #C5BBDD;
-  --fds-semantic-surface-secondary-light-hover: #A392C8;
-  --fds-semantic-surface-secondary-light-active: #806AB4;
-  --fds-semantic-surface-secondary-dark: #231B36;
-  --fds-semantic-surface-tertiary-light: #F3ABB6;
-  --fds-semantic-surface-tertiary-light-hover: #EC8292;
-  --fds-semantic-surface-tertiary-light-active: #E6586D;
-  --fds-semantic-surface-tertiary-dark: #5A121D;
+  --fds-semantic-background-default: #ffffff;
+  --fds-semantic-background-subtle: #f4f5f6;
   --fds-semantic-surface-neutral-default: #ffffff;
   --fds-semantic-surface-neutral-selected: #e6eff8;
   --fds-semantic-surface-neutral-subtle: #f4f5f6;
@@ -97,15 +60,18 @@
   --fds-semantic-surface-on_inverted-no_fill: #ffffff00;
   --fds-semantic-surface-on_inverted-no_fill-hover: #ffffff1a;
   --fds-semantic-surface-on_inverted-no_fill-active: #ffffff33;
-  --fds-semantic-border-primary-default: #1A72C1;
-  --fds-semantic-border-primary-hover: #0062BA;
-  --fds-semantic-border-primary-active: #004E95;
-  --fds-semantic-border-secondary-default: #594488;
-  --fds-semantic-border-secondary-hover: #3F3161;
-  --fds-semantic-border-secondary-active: #352951;
-  --fds-semantic-border-tertiary-default: #B3253A;
-  --fds-semantic-border-tertiary-hover: #861C2C;
-  --fds-semantic-border-tertiary-active: #5A121D;
+  --fds-semantic-surface-primary-light: #B3D0EA;
+  --fds-semantic-surface-primary-light-hover: #80B1DD;
+  --fds-semantic-surface-primary-light-active: #66A1D6;
+  --fds-semantic-surface-primary-dark: #004E95;
+  --fds-semantic-surface-secondary-light: #C5BBDD;
+  --fds-semantic-surface-secondary-light-hover: #A392C8;
+  --fds-semantic-surface-secondary-light-active: #806AB4;
+  --fds-semantic-surface-secondary-dark: #231B36;
+  --fds-semantic-surface-tertiary-light: #F3ABB6;
+  --fds-semantic-surface-tertiary-light-hover: #EC8292;
+  --fds-semantic-surface-tertiary-light-active: #E6586D;
+  --fds-semantic-surface-tertiary-dark: #5A121D;
   --fds-semantic-border-info-default: #004e95;
   --fds-semantic-border-action-primary-subtle: #b3d0ea;
   --fds-semantic-border-action-primary-subtle-hover: #66a1d6;
@@ -137,8 +103,15 @@
   --fds-semantic-border-on_inverted-default: #ffffff;
   --fds-semantic-border-input-default: #00315d;
   --fds-semantic-border-input-hover: #0062ba;
-  --fds-semantic-background-default: #ffffff;
-  --fds-semantic-background-subtle: #f4f5f6;
+  --fds-semantic-border-primary-default: #1A72C1;
+  --fds-semantic-border-primary-hover: #0062BA;
+  --fds-semantic-border-primary-active: #004E95;
+  --fds-semantic-border-secondary-default: #594488;
+  --fds-semantic-border-secondary-hover: #3F3161;
+  --fds-semantic-border-secondary-active: #352951;
+  --fds-semantic-border-tertiary-default: #B3253A;
+  --fds-semantic-border-tertiary-hover: #861C2C;
+  --fds-semantic-border-tertiary-active: #5A121D;
   --fds-semantic-text-success-default: #0c6536;
   --fds-semantic-text-success-hover: #084826;
   --fds-semantic-text-success-active: #084826;
@@ -237,6 +210,33 @@
   --fds-shadow-medium: 0 2px 4px -2px #0000001a, 0 4px 5px #0000001a;
   --fds-shadow-large: 0 4px 6px -4px #0000001a, 0 10px 12px #0000001a;
   --fds-shadow-xlarge: 0 8px 10px -6px #0000001a, 0 25px 45px #0000001a;
+  --fds-brand-primary-100: #E6EFF8;
+  --fds-brand-primary-200: #B3D0EA;
+  --fds-brand-primary-300: #80B1DD;
+  --fds-brand-primary-400: #66A1D6;
+  --fds-brand-primary-500: #3381C8;
+  --fds-brand-primary-600: #1A72C1;
+  --fds-brand-primary-700: #0062BA;
+  --fds-brand-primary-800: #004E95;
+  --fds-brand-primary-900: #00315D;
+  --fds-brand-secondary-100: #DCD6EA;
+  --fds-brand-secondary-200: #C5BBDD;
+  --fds-brand-secondary-300: #A392C8;
+  --fds-brand-secondary-400: #806AB4;
+  --fds-brand-secondary-500: #6A52A3;
+  --fds-brand-secondary-600: #594488;
+  --fds-brand-secondary-700: #3F3161;
+  --fds-brand-secondary-800: #352951;
+  --fds-brand-secondary-900: #231B36;
+  --fds-brand-tertiary-100: #F9D5DB;
+  --fds-brand-tertiary-200: #F3ABB6;
+  --fds-brand-tertiary-300: #EC8292;
+  --fds-brand-tertiary-400: #E6586D;
+  --fds-brand-tertiary-500: #E02E49;
+  --fds-brand-tertiary-600: #B3253A;
+  --fds-brand-tertiary-700: #861C2C;
+  --fds-brand-tertiary-800: #5A121D;
+  --fds-brand-tertiary-900: #480e17;
   --fds-component-mode-height-small: 36px;
   --fds-component-mode-height-medium: var(--fds-sizing-10);
   --fds-component-mode-height-large: var(--fds-sizing-12);