feat: add global link visited token (#297)

cds-snc · Jul 31, 2024 · d344857 · d344857
1 parent 8b473fc
commit d344857
Show file tree

Hide file tree

Showing 15 changed files with 38 additions and 0 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -79,6 +79,12 @@
           "type": "color"
         }
       },
+      "purple": {
+        "700": {
+          "value": "#7532B8",
+          "type": "color"
+        }
+      },
       "red": {
         "100": {
           "value": "#FBDDDA",
@@ -233,6 +239,10 @@
         "value": "#FFF",
         "type": "color"
       },
+      "visited": {
+        "value": "#7532B8",
+        "type": "color"
+      },
       "focus": {
         "background": {
           "value": "#0535d2",

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -21,6 +21,7 @@
   --gcds-color-green-100: #e6f6ec;
   --gcds-color-green-500: #289f58; /* Must contrast 3:1 with white */
   --gcds-color-green-700: #03662a; /* Must contrast 7:1 with white */
+  --gcds-color-purple-700: #7532b8; /* Must contrast 7:1 with white */
   --gcds-color-red-100: #fbddda;
   --gcds-color-red-500: #d3080c; /* Must contrast 3:1 with white */
   --gcds-color-red-700: #a62a1e; /* Must contrast 7:1 with white */
@@ -54,6 +55,7 @@
   --gcds-link-default: #2b4380; /* Global color: link default */
   --gcds-link-hover: #0535d2; /* Global color: link hover */
   --gcds-link-light: #ffffff; /* Global color: link light */
+  --gcds-link-visited: #7532b8; /* Global color: link visited */
   --gcds-link-focus-background: #0535d2;
   --gcds-link-focus-outline-width: 0.1875rem;
   --gcds-link-focus-outline-offset: 0.125rem;

diff --git a/build/web/css/base.css b/build/web/css/base.css
@@ -21,6 +21,7 @@
   --gcds-color-green-100: #e6f6ec;
   --gcds-color-green-500: #289f58; /* Must contrast 3:1 with white */
   --gcds-color-green-700: #03662a; /* Must contrast 7:1 with white */
+  --gcds-color-purple-700: #7532b8; /* Must contrast 7:1 with white */
   --gcds-color-red-100: #fbddda;
   --gcds-color-red-500: #d3080c; /* Must contrast 3:1 with white */
   --gcds-color-red-700: #a62a1e; /* Must contrast 7:1 with white */

diff --git a/build/web/css/base/color.css b/build/web/css/base/color.css
@@ -21,6 +21,7 @@
   --gcds-color-green-100: #e6f6ec;
   --gcds-color-green-500: #289f58; /* Must contrast 3:1 with white */
   --gcds-color-green-700: #03662a; /* Must contrast 7:1 with white */
+  --gcds-color-purple-700: #7532b8; /* Must contrast 7:1 with white */
   --gcds-color-red-100: #fbddda;
   --gcds-color-red-500: #d3080c; /* Must contrast 3:1 with white */
   --gcds-color-red-700: #a62a1e; /* Must contrast 7:1 with white */

diff --git a/build/web/css/global.css b/build/web/css/global.css
@@ -29,6 +29,7 @@
   --gcds-link-default: #2b4380; /* Global color: link default */
   --gcds-link-hover: #0535d2; /* Global color: link hover */
   --gcds-link-light: #ffffff; /* Global color: link light */
+  --gcds-link-visited: #7532b8; /* Global color: link visited */
   --gcds-text-light: #ffffff; /* Global color: text light */
   --gcds-text-primary: #333333; /* Global color: text primary */
   --gcds-text-secondary: #43474e; /* Global color: text secondary */

diff --git a/build/web/css/global/color.css b/build/web/css/global/color.css
@@ -21,6 +21,7 @@
   --gcds-link-default: #2b4380; /* Global color: link default */
   --gcds-link-hover: #0535d2; /* Global color: link hover */
   --gcds-link-light: #ffffff; /* Global color: link light */
+  --gcds-link-visited: #7532b8; /* Global color: link visited */
   --gcds-text-light: #ffffff; /* Global color: text light */
   --gcds-text-primary: #333333; /* Global color: text primary */
   --gcds-text-secondary: #43474e; /* Global color: text secondary */

diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -21,6 +21,7 @@
   --gcds-color-green-100: #e6f6ec;
   --gcds-color-green-500: #289f58; /* Must contrast 3:1 with white */
   --gcds-color-green-700: #03662a; /* Must contrast 7:1 with white */
+  --gcds-color-purple-700: #7532b8; /* Must contrast 7:1 with white */
   --gcds-color-red-100: #fbddda;
   --gcds-color-red-500: #d3080c; /* Must contrast 3:1 with white */
   --gcds-color-red-700: #a62a1e; /* Must contrast 7:1 with white */
@@ -54,6 +55,7 @@
   --gcds-link-default: #2b4380; /* Global color: link default */
   --gcds-link-hover: #0535d2; /* Global color: link hover */
   --gcds-link-light: #ffffff; /* Global color: link light */
+  --gcds-link-visited: #7532b8; /* Global color: link visited */
   --gcds-link-focus-background: #0535d2;
   --gcds-link-focus-outline-width: 0.1875rem;
   --gcds-link-focus-outline-offset: 0.125rem;

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -19,6 +19,7 @@ $gcds-color-grayscale-1000: #000000;
 $gcds-color-green-100: #e6f6ec;
 $gcds-color-green-500: #289f58; // Must contrast 3:1 with white
 $gcds-color-green-700: #03662a; // Must contrast 7:1 with white
+$gcds-color-purple-700: #7532b8; // Must contrast 7:1 with white
 $gcds-color-red-100: #fbddda;
 $gcds-color-red-500: #d3080c; // Must contrast 3:1 with white
 $gcds-color-red-700: #a62a1e; // Must contrast 7:1 with white
@@ -52,6 +53,7 @@ $gcds-focus-text-form: #0535d2; // Global color: focus text form elements
 $gcds-link-default: #2b4380; // Global color: link default
 $gcds-link-hover: #0535d2; // Global color: link hover
 $gcds-link-light: #ffffff; // Global color: link light
+$gcds-link-visited: #7532b8; // Global color: link visited
 $gcds-link-focus-background: #0535d2;
 $gcds-link-focus-outline-width: 0.1875rem;
 $gcds-link-focus-outline-offset: 0.125rem;

diff --git a/build/web/scss/base.scss b/build/web/scss/base.scss
@@ -19,6 +19,7 @@ $gcds-color-grayscale-1000: #000000;
 $gcds-color-green-100: #e6f6ec;
 $gcds-color-green-500: #289f58; // Must contrast 3:1 with white
 $gcds-color-green-700: #03662a; // Must contrast 7:1 with white
+$gcds-color-purple-700: #7532b8; // Must contrast 7:1 with white
 $gcds-color-red-100: #fbddda;
 $gcds-color-red-500: #d3080c; // Must contrast 3:1 with white
 $gcds-color-red-700: #a62a1e; // Must contrast 7:1 with white

diff --git a/build/web/scss/base/color.scss b/build/web/scss/base/color.scss
@@ -19,6 +19,7 @@ $gcds-color-grayscale-1000: #000000;
 $gcds-color-green-100: #e6f6ec;
 $gcds-color-green-500: #289f58; // Must contrast 3:1 with white
 $gcds-color-green-700: #03662a; // Must contrast 7:1 with white
+$gcds-color-purple-700: #7532b8; // Must contrast 7:1 with white
 $gcds-color-red-100: #fbddda;
 $gcds-color-red-500: #d3080c; // Must contrast 3:1 with white
 $gcds-color-red-700: #a62a1e; // Must contrast 7:1 with white

diff --git a/build/web/scss/global.scss b/build/web/scss/global.scss
@@ -27,6 +27,7 @@ $gcds-focus-text-form: #0535d2; // Global color: focus text form elements
 $gcds-link-default: #2b4380; // Global color: link default
 $gcds-link-hover: #0535d2; // Global color: link hover
 $gcds-link-light: #ffffff; // Global color: link light
+$gcds-link-visited: #7532b8; // Global color: link visited
 $gcds-text-light: #ffffff; // Global color: text light
 $gcds-text-primary: #333333; // Global color: text primary
 $gcds-text-secondary: #43474e; // Global color: text secondary

diff --git a/build/web/scss/global/color.scss b/build/web/scss/global/color.scss
@@ -19,6 +19,7 @@ $gcds-focus-text-form: #0535d2; // Global color: focus text form elements
 $gcds-link-default: #2b4380; // Global color: link default
 $gcds-link-hover: #0535d2; // Global color: link hover
 $gcds-link-light: #ffffff; // Global color: link light
+$gcds-link-visited: #7532b8; // Global color: link visited
 $gcds-text-light: #ffffff; // Global color: text light
 $gcds-text-primary: #333333; // Global color: text primary
 $gcds-text-secondary: #43474e; // Global color: text secondary
diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -19,6 +19,7 @@ $gcds-color-grayscale-1000: #000000;
 $gcds-color-green-100: #e6f6ec;
 $gcds-color-green-500: #289f58; // Must contrast 3:1 with white
 $gcds-color-green-700: #03662a; // Must contrast 7:1 with white
+$gcds-color-purple-700: #7532b8; // Must contrast 7:1 with white
 $gcds-color-red-100: #fbddda;
 $gcds-color-red-500: #d3080c; // Must contrast 3:1 with white
 $gcds-color-red-700: #a62a1e; // Must contrast 7:1 with white
@@ -52,6 +53,7 @@ $gcds-focus-text-form: #0535d2; // Global color: focus text form elements
 $gcds-link-default: #2b4380; // Global color: link default
 $gcds-link-hover: #0535d2; // Global color: link hover
 $gcds-link-light: #ffffff; // Global color: link light
+$gcds-link-visited: #7532b8; // Global color: link visited
 $gcds-link-focus-background: #0535d2;
 $gcds-link-focus-outline-width: 0.1875rem;
 $gcds-link-focus-outline-offset: 0.125rem;

diff --git a/tokens/base/color/tokens.json b/tokens/base/color/tokens.json
@@ -85,6 +85,13 @@
         "comment": "Must contrast 7:1 with white"
       }
     },
+    "purple": {
+      "700": {
+        "value": "#7532B8",
+        "type": "color",
+        "comment": "Must contrast 7:1 with white"
+      }
+    },
     "red": {
       "flag": {
         "value": "#FF0000",

diff --git a/tokens/global/color/tokens.json b/tokens/global/color/tokens.json
@@ -101,6 +101,11 @@
       "value": "{color.grayscale.0.value}",
       "type": "color",
       "comment": "Global color: link light"
+    },
+    "visited": {
+      "value": "{color.purple.700.value}",
+      "type": "color",
+      "comment": "Global color: link visited"
     }
   },
   "text": {