fix: update link tokens (#191)

cds-snc · Nov 2, 2023 · 3649eb8 · 3649eb8
1 parent 2afddba
commit 3649eb8
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 43 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -216,13 +216,24 @@
         "type": "color"
       },
       "font": {
-        "value": {
-          "fontFamily": "\"Noto Sans\", sans-serif",
-          "fontWeight": "400",
-          "lineHeight": "120%",
-          "fontSize": "1.25rem"
+        "small": {
+          "value": {
+            "fontFamily": "\"Noto Sans\", sans-serif",
+            "fontWeight": "400",
+            "lineHeight": "135%",
+            "fontSize": "1.1111111111111112rem"
+          },
+          "type": "typography"
         },
-        "type": "typography"
+        "regular": {
+          "value": {
+            "fontFamily": "\"Noto Sans\", sans-serif",
+            "fontWeight": "400",
+            "lineHeight": "120%",
+            "fontSize": "1.25rem"
+          },
+          "type": "typography"
+        }
       },
       "focus": {
         "background": {
@@ -247,18 +258,11 @@
           "color": {
             "value": "#0535d2",
             "type": "color"
-          }
-        }
-      },
-      "small": {
-        "font": {
-          "value": {
-            "fontFamily": "\"Noto Sans\", sans-serif",
-            "fontWeight": "400",
-            "lineHeight": "135%",
-            "fontSize": "1.1111111111111112rem"
           },
-          "type": "typography"
+          "radius": {
+            "value": "0.1875rem",
+            "type": "borderRadius"
+          }
         }
       },
       "decoration": {

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 31 Oct 2023 16:19:46 GMT
+ * Generated on Wed, 01 Nov 2023 23:33:43 GMT
  */
 
 :root {
@@ -51,13 +51,14 @@
   --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-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-link-font-small: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-link-font-regular: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-link-focus-background: #0535d2;
   --gcds-link-focus-outline-width: 0.1875rem;
   --gcds-link-focus-outline-offset: 0.125rem;
   --gcds-link-focus-text: #ffffff;
   --gcds-link-focus-border-color: #0535d2;
-  --gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-link-focus-border-radius: 0.1875rem;
   --gcds-link-decoration-thickness: 0.0625rem;
   --gcds-link-underline-offset: 0.25rem;
   --gcds-text-light: #ffffff; /* Global color: text light */

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -1,16 +1,17 @@
 /**
  * Do not edit directly
- * Generated on Tue, 31 Oct 2023 16:19:46 GMT
+ * Generated on Wed, 01 Nov 2023 23:33:43 GMT
  */
 
 :root {
-  --gcds-link-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-link-font-small: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-link-font-regular: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-link-focus-background: #0535d2;
   --gcds-link-focus-outline-width: 0.1875rem;
   --gcds-link-focus-outline-offset: 0.125rem;
   --gcds-link-focus-text: #ffffff;
   --gcds-link-focus-border-color: #0535d2;
-  --gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-link-focus-border-radius: 0.1875rem;
   --gcds-link-decoration-thickness: 0.0625rem;
   --gcds-link-underline-offset: 0.25rem;
   --gcds-text-character-limit: 65ch;

diff --git a/build/web/css/components/link.css b/build/web/css/components/link.css
@@ -1,16 +1,17 @@
 /**
  * Do not edit directly
- * Generated on Tue, 31 Oct 2023 16:19:46 GMT
+ * Generated on Wed, 01 Nov 2023 23:33:43 GMT
  */
 
 :root {
-  --gcds-link-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-link-font-small: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-link-font-regular: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-link-focus-background: #0535d2;
   --gcds-link-focus-outline-width: 0.1875rem;
   --gcds-link-focus-outline-offset: 0.125rem;
   --gcds-link-focus-text: #ffffff;
   --gcds-link-focus-border-color: #0535d2;
-  --gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-link-focus-border-radius: 0.1875rem;
   --gcds-link-decoration-thickness: 0.0625rem;
   --gcds-link-underline-offset: 0.25rem;
 }
diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 31 Oct 2023 16:19:46 GMT
+ * Generated on Wed, 01 Nov 2023 23:33:43 GMT
  */
 
 :root {
@@ -51,13 +51,14 @@
   --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-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-link-font-small: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-link-font-regular: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-link-focus-background: #0535d2;
   --gcds-link-focus-outline-width: 0.1875rem;
   --gcds-link-focus-outline-offset: 0.125rem;
   --gcds-link-focus-text: #ffffff;
   --gcds-link-focus-border-color: #0535d2;
-  --gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-link-focus-border-radius: 0.1875rem;
   --gcds-link-decoration-thickness: 0.0625rem;
   --gcds-link-underline-offset: 0.25rem;
   --gcds-text-light: #ffffff; /* Global color: text light */

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 31 Oct 2023 16:19:46 GMT
+// Generated on Wed, 01 Nov 2023 23:33:43 GMT
 
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
@@ -49,13 +49,14 @@ $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-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-link-font-small: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-link-font-regular: 400 1.25rem/120% "Noto Sans", sans-serif;
 $gcds-link-focus-background: #0535d2;
 $gcds-link-focus-outline-width: 0.1875rem;
 $gcds-link-focus-outline-offset: 0.125rem;
 $gcds-link-focus-text: #ffffff;
 $gcds-link-focus-border-color: #0535d2;
-$gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-link-focus-border-radius: 0.1875rem;
 $gcds-link-decoration-thickness: 0.0625rem;
 $gcds-link-underline-offset: 0.25rem;
 $gcds-text-light: #ffffff; // Global color: text light

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -1,14 +1,15 @@
 
 // Do not edit directly
-// Generated on Tue, 31 Oct 2023 16:19:45 GMT
+// Generated on Wed, 01 Nov 2023 23:33:43 GMT
 
-$gcds-link-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-link-font-small: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-link-font-regular: 400 1.25rem/120% "Noto Sans", sans-serif;
 $gcds-link-focus-background: #0535d2;
 $gcds-link-focus-outline-width: 0.1875rem;
 $gcds-link-focus-outline-offset: 0.125rem;
 $gcds-link-focus-text: #ffffff;
 $gcds-link-focus-border-color: #0535d2;
-$gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-link-focus-border-radius: 0.1875rem;
 $gcds-link-decoration-thickness: 0.0625rem;
 $gcds-link-underline-offset: 0.25rem;
 $gcds-text-character-limit: 65ch;

diff --git a/build/web/scss/components/link.scss b/build/web/scss/components/link.scss
@@ -1,13 +1,14 @@
 
 // Do not edit directly
-// Generated on Tue, 31 Oct 2023 16:19:45 GMT
+// Generated on Wed, 01 Nov 2023 23:33:43 GMT
 
-$gcds-link-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-link-font-small: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-link-font-regular: 400 1.25rem/120% "Noto Sans", sans-serif;
 $gcds-link-focus-background: #0535d2;
 $gcds-link-focus-outline-width: 0.1875rem;
 $gcds-link-focus-outline-offset: 0.125rem;
 $gcds-link-focus-text: #ffffff;
 $gcds-link-focus-border-color: #0535d2;
-$gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-link-focus-border-radius: 0.1875rem;
 $gcds-link-decoration-thickness: 0.0625rem;
 $gcds-link-underline-offset: 0.25rem;
diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 31 Oct 2023 16:19:45 GMT
+// Generated on Wed, 01 Nov 2023 23:33:42 GMT
 
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
@@ -49,13 +49,14 @@ $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-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-link-font-small: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-link-font-regular: 400 1.25rem/120% "Noto Sans", sans-serif;
 $gcds-link-focus-background: #0535d2;
 $gcds-link-focus-outline-width: 0.1875rem;
 $gcds-link-focus-outline-offset: 0.125rem;
 $gcds-link-focus-text: #ffffff;
 $gcds-link-focus-border-color: #0535d2;
-$gcds-link-small-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-link-focus-border-radius: 0.1875rem;
 $gcds-link-decoration-thickness: 0.0625rem;
 $gcds-link-underline-offset: 0.25rem;
 $gcds-text-light: #ffffff; // Global color: text light

diff --git a/tokens/components/link/tokens.json b/tokens/components/link/tokens.json
@@ -32,18 +32,31 @@
         "color": {
           "value": "{focus.background.value}",
           "type": "color"
+        },
+        "radius": {
+          "value": "{border.radius.sm.value}",
+          "type": "borderRadius"
         }
       }
     },
-    "small": {
-      "font": {
+    "font": {
+      "small": {
         "value": {
           "fontFamily": "{fontFamilies.body}",
           "fontWeight": "{fontWeights.regular}",
           "lineHeight": "{lineHeights.caption}",
           "fontSize": "{fontSizes.caption}"
         },
         "type": "typography"
+      },
+      "regular": {
+        "value": {
+          "fontFamily": "{fontFamilies.body}",
+          "fontWeight": "{fontWeights.regular}",
+          "lineHeight": "{lineHeights.text}",
+          "fontSize": "{fontSizes.text}"
+        },
+        "type": "typography"
       }
     },
     "decoration": {