fix: Margin spacing tokens in card component (#310)

cds-snc · Aug 20, 2024 · 6c000e0 · 6c000e0
1 parent d61a4a4
commit 6c000e0
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 24 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -1463,7 +1463,7 @@
             "value": {
               "fontFamily": "\"Noto Sans\", sans-serif",
               "fontWeight": "400",
-              "lineHeight": "120%",
+              "lineHeight": "150%",
               "fontSize": "1.25rem"
             },
             "type": "typography"
@@ -1533,9 +1533,11 @@
           "type": "other"
         }
       },
-      "margin": {
-        "value": "0 0 1.5rem",
-        "type": "spacing"
+      "image": {
+        "margin": {
+          "value": "0 0 1.5rem",
+          "type": "spacing"
+        }
       },
       "padding": {
         "value": "2.25rem 1.5rem",
@@ -1571,6 +1573,10 @@
             },
             "type": "typography"
           }
+        },
+        "margin": {
+          "value": "0 0 0.5625rem",
+          "type": "spacing"
         }
       },
       "maxWidth": {

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -283,7 +283,7 @@
   --gcds-card-background-color: #ffffff;
   --gcds-card-box-shadow: 0 0.1875rem 0.5625rem 0.1875rem #00000019;
   --gcds-card-color: #333333;
-  --gcds-card-description-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-card-description-font-desktop: 400 1.25rem/150% "Noto Sans", sans-serif;
   --gcds-card-description-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-card-focus-box-shadow: inset 0 0 0 0.125rem #0535d2;
   --gcds-card-focus-link-background-color: transparent;
@@ -296,12 +296,13 @@
   --gcds-card-focus-outline: 0.1875rem solid #0535d2;
   --gcds-card-hover-background-color: #f1f2f380;
   --gcds-card-hover-box-shadow: 0 0.25rem 0.5625rem 0.25rem #00000032;
-  --gcds-card-margin: 0 0 1.5rem;
+  --gcds-card-image-margin: 0 0 1.5rem;
   --gcds-card-padding: 2.25rem 1.5rem;
   --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-title-margin: 0 0 0.5625rem;
   --gcds-card-max-width: 34.125rem;
   --gcds-checkbox-check-border-width: 0.3125rem;
   --gcds-checkbox-check-height: 1.5rem;

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -139,7 +139,7 @@
   --gcds-card-background-color: #ffffff;
   --gcds-card-box-shadow: 0 0.1875rem 0.5625rem 0.1875rem #00000019;
   --gcds-card-color: #333333;
-  --gcds-card-description-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-card-description-font-desktop: 400 1.25rem/150% "Noto Sans", sans-serif;
   --gcds-card-description-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-card-focus-box-shadow: inset 0 0 0 0.125rem #0535d2;
   --gcds-card-focus-link-background-color: transparent;
@@ -152,12 +152,13 @@
   --gcds-card-focus-outline: 0.1875rem solid #0535d2;
   --gcds-card-hover-background-color: #f1f2f380;
   --gcds-card-hover-box-shadow: 0 0.25rem 0.5625rem 0.25rem #00000032;
-  --gcds-card-margin: 0 0 1.5rem;
+  --gcds-card-image-margin: 0 0 1.5rem;
   --gcds-card-padding: 2.25rem 1.5rem;
   --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-title-margin: 0 0 0.5625rem;
   --gcds-card-max-width: 34.125rem;
   --gcds-checkbox-check-border-width: 0.3125rem;
   --gcds-checkbox-check-height: 1.5rem;

diff --git a/build/web/css/components/card.css b/build/web/css/components/card.css
@@ -6,7 +6,7 @@
   --gcds-card-background-color: #ffffff;
   --gcds-card-box-shadow: 0 0.1875rem 0.5625rem 0.1875rem #00000019;
   --gcds-card-color: #333333;
-  --gcds-card-description-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-card-description-font-desktop: 400 1.25rem/150% "Noto Sans", sans-serif;
   --gcds-card-description-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-card-focus-box-shadow: inset 0 0 0 0.125rem #0535d2;
   --gcds-card-focus-link-background-color: transparent;
@@ -19,11 +19,12 @@
   --gcds-card-focus-outline: 0.1875rem solid #0535d2;
   --gcds-card-hover-background-color: #f1f2f380;
   --gcds-card-hover-box-shadow: 0 0.25rem 0.5625rem 0.25rem #00000032;
-  --gcds-card-margin: 0 0 1.5rem;
+  --gcds-card-image-margin: 0 0 1.5rem;
   --gcds-card-padding: 2.25rem 1.5rem;
   --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-title-margin: 0 0 0.5625rem;
   --gcds-card-max-width: 34.125rem;
 }
diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -283,7 +283,7 @@
   --gcds-card-background-color: #ffffff;
   --gcds-card-box-shadow: 0 0.1875rem 0.5625rem 0.1875rem #00000019;
   --gcds-card-color: #333333;
-  --gcds-card-description-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-card-description-font-desktop: 400 1.25rem/150% "Noto Sans", sans-serif;
   --gcds-card-description-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-card-focus-box-shadow: inset 0 0 0 0.125rem #0535d2;
   --gcds-card-focus-link-background-color: transparent;
@@ -296,12 +296,13 @@
   --gcds-card-focus-outline: 0.1875rem solid #0535d2;
   --gcds-card-hover-background-color: #f1f2f380;
   --gcds-card-hover-box-shadow: 0 0.25rem 0.5625rem 0.25rem #00000032;
-  --gcds-card-margin: 0 0 1.5rem;
+  --gcds-card-image-margin: 0 0 1.5rem;
   --gcds-card-padding: 2.25rem 1.5rem;
   --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-title-margin: 0 0 0.5625rem;
   --gcds-card-max-width: 34.125rem;
   --gcds-checkbox-check-border-width: 0.3125rem;
   --gcds-checkbox-check-height: 1.5rem;

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -281,7 +281,7 @@ $gcds-button-width: fit-content;
 $gcds-card-background-color: #ffffff;
 $gcds-card-box-shadow: 0 0.1875rem 0.5625rem 0.1875rem #00000019;
 $gcds-card-color: #333333;
-$gcds-card-description-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-card-description-font-desktop: 400 1.25rem/150% "Noto Sans", sans-serif;
 $gcds-card-description-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-card-focus-box-shadow: inset 0 0 0 0.125rem #0535d2;
 $gcds-card-focus-link-background-color: transparent;
@@ -294,12 +294,13 @@ $gcds-card-focus-outline-offset: 0.125rem;
 $gcds-card-focus-outline: 0.1875rem solid #0535d2;
 $gcds-card-hover-background-color: #f1f2f380;
 $gcds-card-hover-box-shadow: 0 0.25rem 0.5625rem 0.25rem #00000032;
-$gcds-card-margin: 0 0 1.5rem;
+$gcds-card-image-margin: 0 0 1.5rem;
 $gcds-card-padding: 2.25rem 1.5rem;
 $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-title-margin: 0 0 0.5625rem;
 $gcds-card-max-width: 34.125rem;
 $gcds-checkbox-check-border-width: 0.3125rem;
 $gcds-checkbox-check-height: 1.5rem;

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -137,7 +137,7 @@ $gcds-button-width: fit-content;
 $gcds-card-background-color: #ffffff;
 $gcds-card-box-shadow: 0 0.1875rem 0.5625rem 0.1875rem #00000019;
 $gcds-card-color: #333333;
-$gcds-card-description-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-card-description-font-desktop: 400 1.25rem/150% "Noto Sans", sans-serif;
 $gcds-card-description-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-card-focus-box-shadow: inset 0 0 0 0.125rem #0535d2;
 $gcds-card-focus-link-background-color: transparent;
@@ -150,12 +150,13 @@ $gcds-card-focus-outline-offset: 0.125rem;
 $gcds-card-focus-outline: 0.1875rem solid #0535d2;
 $gcds-card-hover-background-color: #f1f2f380;
 $gcds-card-hover-box-shadow: 0 0.25rem 0.5625rem 0.25rem #00000032;
-$gcds-card-margin: 0 0 1.5rem;
+$gcds-card-image-margin: 0 0 1.5rem;
 $gcds-card-padding: 2.25rem 1.5rem;
 $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-title-margin: 0 0 0.5625rem;
 $gcds-card-max-width: 34.125rem;
 $gcds-checkbox-check-border-width: 0.3125rem;
 $gcds-checkbox-check-height: 1.5rem;

diff --git a/build/web/scss/components/card.scss b/build/web/scss/components/card.scss
@@ -4,7 +4,7 @@
 $gcds-card-background-color: #ffffff;
 $gcds-card-box-shadow: 0 0.1875rem 0.5625rem 0.1875rem #00000019;
 $gcds-card-color: #333333;
-$gcds-card-description-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-card-description-font-desktop: 400 1.25rem/150% "Noto Sans", sans-serif;
 $gcds-card-description-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-card-focus-box-shadow: inset 0 0 0 0.125rem #0535d2;
 $gcds-card-focus-link-background-color: transparent;
@@ -17,10 +17,11 @@ $gcds-card-focus-outline-offset: 0.125rem;
 $gcds-card-focus-outline: 0.1875rem solid #0535d2;
 $gcds-card-hover-background-color: #f1f2f380;
 $gcds-card-hover-box-shadow: 0 0.25rem 0.5625rem 0.25rem #00000032;
-$gcds-card-margin: 0 0 1.5rem;
+$gcds-card-image-margin: 0 0 1.5rem;
 $gcds-card-padding: 2.25rem 1.5rem;
 $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-title-margin: 0 0 0.5625rem;
 $gcds-card-max-width: 34.125rem;
diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -281,7 +281,7 @@ $gcds-button-width: fit-content;
 $gcds-card-background-color: #ffffff;
 $gcds-card-box-shadow: 0 0.1875rem 0.5625rem 0.1875rem #00000019;
 $gcds-card-color: #333333;
-$gcds-card-description-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-card-description-font-desktop: 400 1.25rem/150% "Noto Sans", sans-serif;
 $gcds-card-description-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-card-focus-box-shadow: inset 0 0 0 0.125rem #0535d2;
 $gcds-card-focus-link-background-color: transparent;
@@ -294,12 +294,13 @@ $gcds-card-focus-outline-offset: 0.125rem;
 $gcds-card-focus-outline: 0.1875rem solid #0535d2;
 $gcds-card-hover-background-color: #f1f2f380;
 $gcds-card-hover-box-shadow: 0 0.25rem 0.5625rem 0.25rem #00000032;
-$gcds-card-margin: 0 0 1.5rem;
+$gcds-card-image-margin: 0 0 1.5rem;
 $gcds-card-padding: 2.25rem 1.5rem;
 $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-title-margin: 0 0 0.5625rem;
 $gcds-card-max-width: 34.125rem;
 $gcds-checkbox-check-border-width: 0.3125rem;
 $gcds-checkbox-check-height: 1.5rem;

diff --git a/tokens/components/card/tokens.json b/tokens/components/card/tokens.json
@@ -18,7 +18,7 @@
           "value": {
             "fontFamily": "{fontFamilies.body}",
             "fontWeight": "{fontWeights.regular}",
-            "lineHeight": "{lineHeights.text}",
+            "lineHeight": "{lineHeights.textMobile}",
             "fontSize": "{fontSizes.text}"
           },
           "type": "typography"
@@ -88,9 +88,11 @@
         "type": "other"
       }
     },
-    "margin": {
-      "value": "0 0 {spacing.400.value}",
-      "type": "spacing"
+    "image": {
+      "margin": {
+        "value": "0 0 {spacing.400.value}",
+        "type": "spacing"
+      }
     },
     "padding": {
       "value": "{spacing.450.value} {spacing.400.value}",
@@ -126,6 +128,10 @@
           },
           "type": "typography"
         }
+      },
+      "margin": {
+        "value": "0 0 {spacing.150.value}",
+        "type": "spacing"
       }
     },
     "maxWidth": {