Colour token change (#9)

**Changelog:** >- /dist assets (_map, _variables) >- New version of figma/tokens.json file (removal of opacity values)
qld-gov-au · May 28, 2024 · 79fdf7f · 79fdf7f
1 parent e6bab2f
commit 79fdf7f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 70 deletions.
diff --git a/dist/scss/_map.scss b/dist/scss/_map.scss
@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 27 May 2024 07:37:52 GMT
+ * Generated on Tue, 28 May 2024 05:01:09 GMT
  */
 
 $qld-tokens: (
@@ -45,16 +45,15 @@ $qld-tokens: (
   'core-default-color-code-muted': #c0d7ec,
   'core-default-color-contained-layout-background': #09549F,
   'core-default-color-contained-layout-background-dark': #09549F,
-  'core-default-opacity-neutral-white-10': 0.1 #ffffff,
-  'core-default-opacity-neutral-light-10': 0.1 #e0e0e0,
-  'core-default-opacity-neutral-black-10': 0.1 #131212,
-  'core-default-opacity-neutral-darkest-10': 0.1 #222020,
-  'color-default-color-light-background-background-alt': #e8e8e8,
-  'color-default-color-light-background-background-alt-shade': #e0e0e0,
-  'color-default-color-light-background-background': #eff4f9,
-  'color-default-color-light-background-background-shade': #e5eef5,
-  'color-default-color-light-border-border-alt': #7a7a7a,
-  'color-default-color-light-border-border': #ccddee,
+  'color-default-color-light-background-default': #ffffff,
+  'color-default-color-light-background-default-shade': #f5f5f5,
+  'color-default-color-light-background-light': #eff4f9,
+  'color-default-color-light-background-light-shade': #e5eef5,
+  'color-default-color-light-background-alt': #e8e8e8,
+  'color-default-color-light-background-alt-shade': #e0e0e0,
+  'color-default-color-light-border-default': #ebebeb,
+  'color-default-color-light-border-light': #ccddee,
+  'color-default-color-light-border-alt': #7a7a7a,
   'color-default-color-light-action-primary': #09549f,
   'color-default-color-light-action-primary-hover': #003e7d,
   'color-default-color-light-action-secondary': #005b23,
@@ -63,36 +62,38 @@ $qld-tokens: (
   'color-default-color-light-link-default': #09549f,
   'color-default-color-light-link-visited': #551a8b,
   'color-default-color-light-accent-design-accent': #6BBE27,
-  'color-default-color-light-focus-focus': #0085B3,
+  'color-default-color-light-focus-default': #0085B3,
   'color-default-color-light-underline-default': #3f7ab4,
-  'color-default-color-light-underline-default-hover': #3f7ab4,
+  'color-default-color-light-underline-default-hover': #09549F,
   'color-default-color-light-underline-visited': #8b63b0,
   'color-default-color-light-underline-visited-hover': #551a8b,
-  'color-default-color-light-text-heading': #04284c,
-  'color-default-color-light-text-text': #414141,
+  'color-default-color-light-text-default': #414141,
   'color-default-color-light-text-lighter': #636363,
-  'color-default-color-light-text-site-title': #022a50,
-  'color-default-color-dark-background-background': #09549F,
-  'color-default-color-dark-background-background-shade': #04498f,
-  'color-default-color-dark-background-background-alt': #05325F,
-  'color-default-color-dark-background-background-alt-shade': #052c53,
-  'color-default-color-dark-border-border': #1d9ac6,
-  'color-default-color-dark-border-border-alt': #09acfe,
+  'color-default-color-light-text-heading': #04284c,
+  'color-default-color-light-site-title': #022a50,
+  'color-default-color-light-crest-fill': #1D1D1D,
+  'color-default-color-dark-background-default': #09549F,
+  'color-default-color-dark-background-default-shade': #04498f,
+  'color-default-color-dark-background-alt': #05325F,
+  'color-default-color-dark-background-alt-shade': #052c53,
+  'color-default-color-dark-border-default': #1d9ac6,
+  'color-default-color-dark-border-alt': #09acfe,
   'color-default-color-dark-action-primary': #78ba00,
   'color-default-color-dark-action-primary-hover': #add33f,
   'color-default-color-dark-action-secondary': #FFE500,
   'color-default-color-dark-action-secondary-hover': #ffef60,
-  'color-default-color-dark-link-on-action': #121940,
   'color-default-color-dark-link-default': #ffffff,
   'color-default-color-dark-link-visited': #e1bbee,
+  'color-default-color-dark-link-on-action': #121940,
   'color-default-color-dark-accent-design-accent': #6BBE27,
-  'color-default-color-dark-focus-focus': #01b0e5,
+  'color-default-color-dark-focus-default': #01b0e5,
   'color-default-color-dark-underline-default': #b5cce2,
   'color-default-color-dark-underline-default-hover': #ffffff,
-  'color-default-color-dark-underline-visited-hover': #EE11BB,
   'color-default-color-dark-underline-visited': #e1c2ff,
-  'color-default-color-dark-text-heading': #ffffff,
-  'color-default-color-dark-text-text': #ffffff,
+  'color-default-color-dark-underline-visited-hover': #EE11BB,
+  'color-default-color-dark-text-default': #ffffff,
   'color-default-color-dark-text-lighter': #deebf9,
-  'color-default-color-dark-text-site-title': #ffffff
+  'color-default-color-dark-text-heading': #ffffff,
+  'color-default-color-dark-site-title': #ffffff,
+  'color-default-color-dark-crest-fill': #ffffff
 );
diff --git a/dist/scss/_variables.scss b/dist/scss/_variables.scss
@@ -1,4 +1,6 @@
-// Generated on Mon, 27 May 2024 07:37:52 GMT
+
+// Do not edit directly
+// Generated on Tue, 28 May 2024 05:01:09 GMT
 
 $core-default-color-neutral-black: #131212;
 $core-default-color-neutral-darkest: #222020;
@@ -40,10 +42,6 @@ $core-default-color-code-violet: #c88df7;
 $core-default-color-code-muted: #c0d7ec;
 $core-default-color-contained-layout-background: #09549F;
 $core-default-color-contained-layout-background-dark: #09549F;
-$core-default-opacity-neutral-white-10: 0.1 #ffffff;
-$core-default-opacity-neutral-light-10: 0.1 #e0e0e0;
-$core-default-opacity-neutral-black-10: 0.1 #131212;
-$core-default-opacity-neutral-darkest-10: 0.1 #222020;
 $color-default-color-light-background-default: #ffffff;
 $color-default-color-light-background-default-shade: #f5f5f5;
 $color-default-color-light-background-light: #eff4f9;
@@ -88,7 +86,6 @@ $color-default-color-dark-accent-design-accent: #6BBE27;
 $color-default-color-dark-focus-default: #01b0e5;
 $color-default-color-dark-underline-default: #b5cce2;
 $color-default-color-dark-underline-default-hover: #ffffff;
-$color-default-color-dark-underline-visited-hover: #EE11BB;
 $color-default-color-dark-underline-visited: #e1c2ff;
 $color-default-color-dark-underline-visited-hover: #EE11BB;
 $color-default-color-dark-text-default: #ffffff;

diff --git a/figma/tokens.json b/figma/tokens.json
@@ -287,34 +287,6 @@
           "description": "Used as the Custom background colour when using the advanced banner in a contained layout. There is only 1 variable that is automatically applied based on the colour of the header."
         }
       }
-    },
-    "opacity": {
-      "neutral": {
-        "white": {
-          "10": {
-            "value": "0.1 #ffffff",
-            "type": "opacity"
-          }
-        },
-        "light": {
-          "10": {
-            "value": "0.1 #e0e0e0",
-            "type": "opacity"
-          }
-        },
-        "black": {
-          "10": {
-            "value": "0.1 #131212",
-            "type": "opacity"
-          }
-        },
-        "darkest": {
-          "10": {
-            "value": "0.1 #222020",
-            "type": "opacity"
-          }
-        }
-      }
     }
   },
   "Color/Default": {
@@ -608,12 +580,6 @@
             "parent": "Color/Value",
             "description": "Hover colour for link underline."
           },
-          "visited--hover": {
-            "value": "#EE11BB",
-            "type": "color",
-            "parent": "Color/Value",
-            "description": "Hover colour for visited link underline."
-          },
           "visited": {
             "value": "#e1c2ff",
             "type": "color",

diff --git a/tests/verifyCount.test.js b/tests/verifyCount.test.js
@@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 
 describe('SCSS Properties Count', () => {
-  it('should verify the total number of SCSS variables (x)', () => {
+  it('should verify the total number of SCSS variables (91)', () => {
     const filePath = path.join(__dirname, '../dist/scss/_variables.scss');
     const fileContent = fs.readFileSync(filePath, 'utf8');
 
@@ -11,7 +11,7 @@ describe('SCSS Properties Count', () => {
     const regex = /\$[a-zA-Z0-9-]+:/g;
     const match = fileContent.match(regex);
 
-    const expectedPropertyCount = 96; // Example expected count. Adjust this as necessary.
+    const expectedPropertyCount = 91; // Example expected count. Adjust this as necessary.
     expect(match).toHaveLength(expectedPropertyCount);
   });
 });