fix: Add missing component tokens for link and card (#288)

* fix: Add missing component tokens for card and link * Add missing hover token to link
cds-snc · Jul 10, 2024 · 824fdc0 · 824fdc0
1 parent 3d1c018
commit 824fdc0
Show file tree

Hide file tree

Showing 13 changed files with 32 additions and 0 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -311,6 +311,10 @@
           "type": "borderWidth"
         }
       },
+      "hover-decoration-thickness": {
+        "value": "0.125rem",
+        "type": "borderWidth"
+      },
       "underline": {
         "offset": {
           "value": "0.25rem",
@@ -1615,6 +1619,10 @@
             "type": "typography"
           }
         }
+      },
+      "maxWidth": {
+        "value": "34.125rem",
+        "type": "sizing"
       }
     },
     "checkbox": {

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -65,6 +65,7 @@
   --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-link-decoration-thickness: 0.0625rem;
+  --gcds-link-hover-decoration-thickness: 0.125rem;
   --gcds-link-underline-offset: 0.25rem;
   --gcds-text-light: #ffffff; /* Global color: text light */
   --gcds-text-primary: #333333; /* Global color: text primary */
@@ -310,6 +311,7 @@
   --gcds-card-badge-padding: 0.1875rem 1.5rem;
   --gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
   --gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+  --gcds-card-max-width: 34.125rem;
   --gcds-checkbox-check-border-width: 0.3125rem;
   --gcds-checkbox-check-height: 1.5rem;
   --gcds-checkbox-check-left: 1rem;

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -14,6 +14,7 @@
   --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-link-decoration-thickness: 0.0625rem;
+  --gcds-link-hover-decoration-thickness: 0.125rem;
   --gcds-link-underline-offset: 0.25rem;
   --gcds-text-character-limit: 65ch;
   --gcds-text-role-light: #ffffff;
@@ -168,6 +169,7 @@
   --gcds-card-badge-padding: 0.1875rem 1.5rem;
   --gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
   --gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+  --gcds-card-max-width: 34.125rem;
   --gcds-checkbox-check-border-width: 0.3125rem;
   --gcds-checkbox-check-height: 1.5rem;
   --gcds-checkbox-check-left: 1rem;

diff --git a/build/web/css/components/card.css b/build/web/css/components/card.css
@@ -26,4 +26,5 @@
   --gcds-card-badge-padding: 0.1875rem 1.5rem;
   --gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
   --gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+  --gcds-card-max-width: 34.125rem;
 }
diff --git a/build/web/css/components/link.css b/build/web/css/components/link.css
@@ -14,5 +14,6 @@
   --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-link-decoration-thickness: 0.0625rem;
+  --gcds-link-hover-decoration-thickness: 0.125rem;
   --gcds-link-underline-offset: 0.25rem;
 }
diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -65,6 +65,7 @@
   --gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
   --gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-link-decoration-thickness: 0.0625rem;
+  --gcds-link-hover-decoration-thickness: 0.125rem;
   --gcds-link-underline-offset: 0.25rem;
   --gcds-text-light: #ffffff; /* Global color: text light */
   --gcds-text-primary: #333333; /* Global color: text primary */
@@ -310,6 +311,7 @@
   --gcds-card-badge-padding: 0.1875rem 1.5rem;
   --gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
   --gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+  --gcds-card-max-width: 34.125rem;
   --gcds-checkbox-check-border-width: 0.3125rem;
   --gcds-checkbox-check-height: 1.5rem;
   --gcds-checkbox-check-left: 1rem;

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -63,6 +63,7 @@ $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sa
 $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
 $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-link-decoration-thickness: 0.0625rem;
+$gcds-link-hover-decoration-thickness: 0.125rem;
 $gcds-link-underline-offset: 0.25rem;
 $gcds-text-light: #ffffff; // Global color: text light
 $gcds-text-primary: #333333; // Global color: text primary
@@ -308,6 +309,7 @@ $gcds-card-badge-background-color: #20809D;
 $gcds-card-badge-padding: 0.1875rem 1.5rem;
 $gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
 $gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+$gcds-card-max-width: 34.125rem;
 $gcds-checkbox-check-border-width: 0.3125rem;
 $gcds-checkbox-check-height: 1.5rem;
 $gcds-checkbox-check-left: 1rem;

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -12,6 +12,7 @@ $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sa
 $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
 $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-link-decoration-thickness: 0.0625rem;
+$gcds-link-hover-decoration-thickness: 0.125rem;
 $gcds-link-underline-offset: 0.25rem;
 $gcds-text-character-limit: 65ch;
 $gcds-text-role-light: #ffffff;
@@ -166,6 +167,7 @@ $gcds-card-badge-background-color: #20809D;
 $gcds-card-badge-padding: 0.1875rem 1.5rem;
 $gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
 $gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+$gcds-card-max-width: 34.125rem;
 $gcds-checkbox-check-border-width: 0.3125rem;
 $gcds-checkbox-check-height: 1.5rem;
 $gcds-checkbox-check-left: 1rem;

diff --git a/build/web/scss/components/card.scss b/build/web/scss/components/card.scss
@@ -24,3 +24,4 @@ $gcds-card-badge-background-color: #20809D;
 $gcds-card-badge-padding: 0.1875rem 1.5rem;
 $gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
 $gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+$gcds-card-max-width: 34.125rem;
diff --git a/build/web/scss/components/link.scss b/build/web/scss/components/link.scss
@@ -12,4 +12,5 @@ $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sa
 $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
 $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-link-decoration-thickness: 0.0625rem;
+$gcds-link-hover-decoration-thickness: 0.125rem;
 $gcds-link-underline-offset: 0.25rem;
diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -63,6 +63,7 @@ $gcds-link-font-small-mobile: 400 0.8888888888888888rem/140.625% "Noto Sans", sa
 $gcds-link-font-regular-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
 $gcds-link-font-regular-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-link-decoration-thickness: 0.0625rem;
+$gcds-link-hover-decoration-thickness: 0.125rem;
 $gcds-link-underline-offset: 0.25rem;
 $gcds-text-light: #ffffff; // Global color: text light
 $gcds-text-primary: #333333; // Global color: text primary
@@ -308,6 +309,7 @@ $gcds-card-badge-background-color: #20809D;
 $gcds-card-badge-padding: 0.1875rem 1.5rem;
 $gcds-card-title-font-desktop: 700 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
 $gcds-card-title-font-mobile: 700 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
+$gcds-card-max-width: 34.125rem;
 $gcds-checkbox-check-border-width: 0.3125rem;
 $gcds-checkbox-check-height: 1.5rem;
 $gcds-checkbox-check-left: 1rem;

diff --git a/tokens/components/card/tokens.json b/tokens/components/card/tokens.json
@@ -133,6 +133,10 @@
           "type": "typography"
         }
       }
+    },
+    "maxWidth": {
+        "value": "34.125rem",
+        "type": "sizing"
     }
   }
 }
diff --git a/tokens/components/link/tokens.json b/tokens/components/link/tokens.json
@@ -78,6 +78,10 @@
         "type": "borderWidth"
       }
     },
+    "hover-decoration-thickness": {
+      "value": "{border.width.md.value}",
+      "type": "borderWidth"
+    },
     "underline": {
       "offset": {
         "value": "{border.width.lg.value}",