fix: various small design bug fixes (#318)

* refactor: set header margin to correct value * refactor: fix footer heading fonts
cds-snc · Sep 12, 2024 · 182270f · 182270f
1 parent ad84c2d
commit 182270f
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 32 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -2280,13 +2280,26 @@
         }
       },
       "font": {
-        "value": {
-          "fontFamily": "\"Noto Sans\", sans-serif",
-          "fontWeight": "400",
-          "lineHeight": "135%",
-          "fontSize": "1.1111111111111112rem"
-        },
-        "type": "typography"
+        "heading": {
+          "desktop": {
+            "value": {
+              "fontFamily": "\"Lato\", sans-serif",
+              "fontWeight": "700",
+              "lineHeight": "126.41975308641975%",
+              "fontSize": "1.58203125rem"
+            },
+            "type": "typography"
+          },
+          "mobile": {
+            "value": {
+              "fontFamily": "\"Lato\", sans-serif",
+              "fontWeight": "700",
+              "lineHeight": "138.27160493827162%",
+              "fontSize": "1.265625rem"
+            },
+            "type": "typography"
+          }
+        }
       },
       "list": {
         "gridGap": {
@@ -2471,7 +2484,7 @@
         }
       },
       "margin": {
-        "value": "0 0 0.75rem",
+        "value": "0 0 3.75rem",
         "type": "spacing"
       },
       "skiptonav": {

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -423,7 +423,8 @@
   --gcds-footer-contextual-background: #33465c;
   --gcds-footer-contextual-padding: 1.125rem 0;
   --gcds-footer-contextual-text: #ffffff;
-  --gcds-footer-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-footer-font-heading-desktop: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif;
+  --gcds-footer-font-heading-mobile: 700 1.265625rem/138.27160493827162% "Lato", sans-serif;
   --gcds-footer-list-grid-gap: 0.75rem;
   --gcds-footer-list-padding: 0;
   --gcds-footer-listitem-margin: 0 0 1.125rem;
@@ -456,7 +457,7 @@
   --gcds-header-brand-signature-margin: 0 0 0.375rem;
   --gcds-header-brand-toggle-padding: 0 1.125rem;
   --gcds-header-container-max-width: 71.25rem;
-  --gcds-header-margin: 0 0 0.75rem;
+  --gcds-header-margin: 0 0 3.75rem;
   --gcds-header-skiptonav-top: 1.5rem;
   --gcds-heading-character-limit-h1: 31ch;
   --gcds-heading-character-limit-h2: 35ch;

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -277,7 +277,8 @@
   --gcds-footer-contextual-background: #33465c;
   --gcds-footer-contextual-padding: 1.125rem 0;
   --gcds-footer-contextual-text: #ffffff;
-  --gcds-footer-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-footer-font-heading-desktop: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif;
+  --gcds-footer-font-heading-mobile: 700 1.265625rem/138.27160493827162% "Lato", sans-serif;
   --gcds-footer-list-grid-gap: 0.75rem;
   --gcds-footer-list-padding: 0;
   --gcds-footer-listitem-margin: 0 0 1.125rem;
@@ -310,7 +311,7 @@
   --gcds-header-brand-signature-margin: 0 0 0.375rem;
   --gcds-header-brand-toggle-padding: 0 1.125rem;
   --gcds-header-container-max-width: 71.25rem;
-  --gcds-header-margin: 0 0 0.75rem;
+  --gcds-header-margin: 0 0 3.75rem;
   --gcds-header-skiptonav-top: 1.5rem;
   --gcds-heading-character-limit-h1: 31ch;
   --gcds-heading-character-limit-h2: 35ch;

diff --git a/build/web/css/components/footer.css b/build/web/css/components/footer.css
@@ -8,7 +8,8 @@
   --gcds-footer-contextual-background: #33465c;
   --gcds-footer-contextual-padding: 1.125rem 0;
   --gcds-footer-contextual-text: #ffffff;
-  --gcds-footer-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-footer-font-heading-desktop: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif;
+  --gcds-footer-font-heading-mobile: 700 1.265625rem/138.27160493827162% "Lato", sans-serif;
   --gcds-footer-list-grid-gap: 0.75rem;
   --gcds-footer-list-padding: 0;
   --gcds-footer-listitem-margin: 0 0 1.125rem;

diff --git a/build/web/css/components/header.css b/build/web/css/components/header.css
@@ -11,6 +11,6 @@
   --gcds-header-brand-signature-margin: 0 0 0.375rem;
   --gcds-header-brand-toggle-padding: 0 1.125rem;
   --gcds-header-container-max-width: 71.25rem;
-  --gcds-header-margin: 0 0 0.75rem;
+  --gcds-header-margin: 0 0 3.75rem;
   --gcds-header-skiptonav-top: 1.5rem;
 }
diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -423,7 +423,8 @@
   --gcds-footer-contextual-background: #33465c;
   --gcds-footer-contextual-padding: 1.125rem 0;
   --gcds-footer-contextual-text: #ffffff;
-  --gcds-footer-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+  --gcds-footer-font-heading-desktop: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif;
+  --gcds-footer-font-heading-mobile: 700 1.265625rem/138.27160493827162% "Lato", sans-serif;
   --gcds-footer-list-grid-gap: 0.75rem;
   --gcds-footer-list-padding: 0;
   --gcds-footer-listitem-margin: 0 0 1.125rem;
@@ -456,7 +457,7 @@
   --gcds-header-brand-signature-margin: 0 0 0.375rem;
   --gcds-header-brand-toggle-padding: 0 1.125rem;
   --gcds-header-container-max-width: 71.25rem;
-  --gcds-header-margin: 0 0 0.75rem;
+  --gcds-header-margin: 0 0 3.75rem;
   --gcds-header-skiptonav-top: 1.5rem;
   --gcds-heading-character-limit-h1: 31ch;
   --gcds-heading-character-limit-h2: 35ch;

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -421,7 +421,8 @@ $gcds-footer-container-width: 71.25rem;
 $gcds-footer-contextual-background: #33465c;
 $gcds-footer-contextual-padding: 1.125rem 0;
 $gcds-footer-contextual-text: #ffffff;
-$gcds-footer-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-footer-font-heading-desktop: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif;
+$gcds-footer-font-heading-mobile: 700 1.265625rem/138.27160493827162% "Lato", sans-serif;
 $gcds-footer-list-grid-gap: 0.75rem;
 $gcds-footer-list-padding: 0;
 $gcds-footer-listitem-margin: 0 0 1.125rem;
@@ -454,7 +455,7 @@ $gcds-header-brand-padding: 0 0 0.375rem;
 $gcds-header-brand-signature-margin: 0 0 0.375rem;
 $gcds-header-brand-toggle-padding: 0 1.125rem;
 $gcds-header-container-max-width: 71.25rem;
-$gcds-header-margin: 0 0 0.75rem;
+$gcds-header-margin: 0 0 3.75rem;
 $gcds-header-skiptonav-top: 1.5rem;
 $gcds-heading-character-limit-h1: 31ch;
 $gcds-heading-character-limit-h2: 35ch;

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -275,7 +275,8 @@ $gcds-footer-container-width: 71.25rem;
 $gcds-footer-contextual-background: #33465c;
 $gcds-footer-contextual-padding: 1.125rem 0;
 $gcds-footer-contextual-text: #ffffff;
-$gcds-footer-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-footer-font-heading-desktop: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif;
+$gcds-footer-font-heading-mobile: 700 1.265625rem/138.27160493827162% "Lato", sans-serif;
 $gcds-footer-list-grid-gap: 0.75rem;
 $gcds-footer-list-padding: 0;
 $gcds-footer-listitem-margin: 0 0 1.125rem;
@@ -308,7 +309,7 @@ $gcds-header-brand-padding: 0 0 0.375rem;
 $gcds-header-brand-signature-margin: 0 0 0.375rem;
 $gcds-header-brand-toggle-padding: 0 1.125rem;
 $gcds-header-container-max-width: 71.25rem;
-$gcds-header-margin: 0 0 0.75rem;
+$gcds-header-margin: 0 0 3.75rem;
 $gcds-header-skiptonav-top: 1.5rem;
 $gcds-heading-character-limit-h1: 31ch;
 $gcds-heading-character-limit-h2: 35ch;

diff --git a/build/web/scss/components/footer.scss b/build/web/scss/components/footer.scss
@@ -6,7 +6,8 @@ $gcds-footer-container-width: 71.25rem;
 $gcds-footer-contextual-background: #33465c;
 $gcds-footer-contextual-padding: 1.125rem 0;
 $gcds-footer-contextual-text: #ffffff;
-$gcds-footer-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-footer-font-heading-desktop: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif;
+$gcds-footer-font-heading-mobile: 700 1.265625rem/138.27160493827162% "Lato", sans-serif;
 $gcds-footer-list-grid-gap: 0.75rem;
 $gcds-footer-list-padding: 0;
 $gcds-footer-listitem-margin: 0 0 1.125rem;

diff --git a/build/web/scss/components/header.scss b/build/web/scss/components/header.scss
@@ -9,5 +9,5 @@ $gcds-header-brand-padding: 0 0 0.375rem;
 $gcds-header-brand-signature-margin: 0 0 0.375rem;
 $gcds-header-brand-toggle-padding: 0 1.125rem;
 $gcds-header-container-max-width: 71.25rem;
-$gcds-header-margin: 0 0 0.75rem;
+$gcds-header-margin: 0 0 3.75rem;
 $gcds-header-skiptonav-top: 1.5rem;
diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -421,7 +421,8 @@ $gcds-footer-container-width: 71.25rem;
 $gcds-footer-contextual-background: #33465c;
 $gcds-footer-contextual-padding: 1.125rem 0;
 $gcds-footer-contextual-text: #ffffff;
-$gcds-footer-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif;
+$gcds-footer-font-heading-desktop: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif;
+$gcds-footer-font-heading-mobile: 700 1.265625rem/138.27160493827162% "Lato", sans-serif;
 $gcds-footer-list-grid-gap: 0.75rem;
 $gcds-footer-list-padding: 0;
 $gcds-footer-listitem-margin: 0 0 1.125rem;
@@ -454,7 +455,7 @@ $gcds-header-brand-padding: 0 0 0.375rem;
 $gcds-header-brand-signature-margin: 0 0 0.375rem;
 $gcds-header-brand-toggle-padding: 0 1.125rem;
 $gcds-header-container-max-width: 71.25rem;
-$gcds-header-margin: 0 0 0.75rem;
+$gcds-header-margin: 0 0 3.75rem;
 $gcds-header-skiptonav-top: 1.5rem;
 $gcds-heading-character-limit-h1: 31ch;
 $gcds-heading-character-limit-h2: 35ch;

diff --git a/tokens/components/footer/tokens.json b/tokens/components/footer/tokens.json
@@ -25,13 +25,26 @@
       }
     },
     "font": {
-      "value": {
-        "fontFamily": "{fontFamilies.body}",
-        "fontWeight": "{fontWeights.regular}",
-        "lineHeight": "{lineHeights.caption}",
-        "fontSize": "{fontSizes.caption}"
-      },
-      "type": "typography"
+      "heading": {
+        "desktop": {
+          "value": {
+            "fontFamily": "{fontFamilies.heading}",
+            "fontWeight": "{fontWeights.bold}",
+            "lineHeight": "{lineHeights.h5}",
+            "fontSize": "{fontSizes.h5}"
+          },
+          "type": "typography"
+        },
+        "mobile": {
+          "value": {
+            "fontFamily": "{fontFamilies.heading}",
+            "fontWeight": "{fontWeights.bold}",
+            "lineHeight": "{lineHeights.h5Mobile}",
+            "fontSize": "{fontSizes.h5Mobile}"
+          },
+          "type": "typography"
+        }
+      }
     },
     "list": {
       "gridGap": {

diff --git a/tokens/components/header/tokens.json b/tokens/components/header/tokens.json
@@ -45,7 +45,7 @@
       }
     },
     "margin": {
-      "value": "0 0 {spacing.200.value}",
+      "value": "0 0 {spacing.550.value}",
       "type": "spacing"
     },
     "skiptonav": {