refactor: adjust mobile padding for footer bands

cds-snc · Feb 13, 2025 · aa42cbb · aa42cbb
1 parent ef70928
commit aa42cbb
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 18 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -2462,8 +2462,14 @@
     "footer": {
       "band": {
         "padding": {
-          "value": "2.25rem 0",
-          "type": "spacing"
+          "desktop": {
+            "value": "2.25rem 0",
+            "type": "spacing"
+          },
+          "mobile": {
+            "value": "1.5rem 0",
+            "type": "spacing"
+          }
         }
       },
       "container": {
@@ -2560,7 +2566,7 @@
         "listitem": {
           "before": {
             "margin": {
-              "value": "0 1.125rem",
+              "value": "0 1.5rem",
               "type": "spacing"
             }
           }

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -304,7 +304,8 @@
   --gcds-file-uploader-hover-button-background: #d7e5f5;
   --gcds-file-uploader-active-button-background: #000000;
   --gcds-file-uploader-active-button-text: #ffffff;
-  --gcds-footer-band-padding: 2.25rem 0;
+  --gcds-footer-band-padding-desktop: 2.25rem 0;
+  --gcds-footer-band-padding-mobile: 1.5rem 0;
   --gcds-footer-container-margin: 0 auto;
   --gcds-footer-container-width: 71.25rem;
   --gcds-footer-contextual-background: #33465c;
@@ -320,7 +321,7 @@
   --gcds-footer-main-nav-first-after-width: 2.25rem;
   --gcds-footer-main-text: #ffffff;
   --gcds-footer-sub-background: #f1f2f3;
-  --gcds-footer-sub-listitem-before-margin: 0 1.125rem;
+  --gcds-footer-sub-listitem-before-margin: 0 1.5rem;
   --gcds-footer-sub-signature-width: 10.25rem;
   --gcds-footer-sub-signature-min-width: auto;
   --gcds-footer-sub-signature-max-height: 2.4375rem;

diff --git a/build/web/css/components/footer.css b/build/web/css/components/footer.css
@@ -3,7 +3,8 @@
  */
 
 :root {
-  --gcds-footer-band-padding: 2.25rem 0;
+  --gcds-footer-band-padding-desktop: 2.25rem 0;
+  --gcds-footer-band-padding-mobile: 1.5rem 0;
   --gcds-footer-container-margin: 0 auto;
   --gcds-footer-container-width: 71.25rem;
   --gcds-footer-contextual-background: #33465c;
@@ -19,7 +20,7 @@
   --gcds-footer-main-nav-first-after-width: 2.25rem;
   --gcds-footer-main-text: #ffffff;
   --gcds-footer-sub-background: #f1f2f3;
-  --gcds-footer-sub-listitem-before-margin: 0 1.125rem;
+  --gcds-footer-sub-listitem-before-margin: 0 1.5rem;
   --gcds-footer-sub-signature-width: 10.25rem;
   --gcds-footer-sub-signature-min-width: auto;
   --gcds-footer-sub-signature-max-height: 2.4375rem;

diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -464,7 +464,8 @@
   --gcds-file-uploader-hover-button-background: #d7e5f5;
   --gcds-file-uploader-active-button-background: #000000;
   --gcds-file-uploader-active-button-text: #ffffff;
-  --gcds-footer-band-padding: 2.25rem 0;
+  --gcds-footer-band-padding-desktop: 2.25rem 0;
+  --gcds-footer-band-padding-mobile: 1.5rem 0;
   --gcds-footer-container-margin: 0 auto;
   --gcds-footer-container-width: 71.25rem;
   --gcds-footer-contextual-background: #33465c;
@@ -480,7 +481,7 @@
   --gcds-footer-main-nav-first-after-width: 2.25rem;
   --gcds-footer-main-text: #ffffff;
   --gcds-footer-sub-background: #f1f2f3;
-  --gcds-footer-sub-listitem-before-margin: 0 1.125rem;
+  --gcds-footer-sub-listitem-before-margin: 0 1.5rem;
   --gcds-footer-sub-signature-width: 10.25rem;
   --gcds-footer-sub-signature-min-width: auto;
   --gcds-footer-sub-signature-max-height: 2.4375rem;

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -302,7 +302,8 @@ $gcds-file-uploader-focus-button-outline-offset: 0.125rem;
 $gcds-file-uploader-hover-button-background: #d7e5f5;
 $gcds-file-uploader-active-button-background: #000000;
 $gcds-file-uploader-active-button-text: #ffffff;
-$gcds-footer-band-padding: 2.25rem 0;
+$gcds-footer-band-padding-desktop: 2.25rem 0;
+$gcds-footer-band-padding-mobile: 1.5rem 0;
 $gcds-footer-container-margin: 0 auto;
 $gcds-footer-container-width: 71.25rem;
 $gcds-footer-contextual-background: #33465c;
@@ -318,7 +319,7 @@ $gcds-footer-main-nav-first-after-border-width: 0.25rem;
 $gcds-footer-main-nav-first-after-width: 2.25rem;
 $gcds-footer-main-text: #ffffff;
 $gcds-footer-sub-background: #f1f2f3;
-$gcds-footer-sub-listitem-before-margin: 0 1.125rem;
+$gcds-footer-sub-listitem-before-margin: 0 1.5rem;
 $gcds-footer-sub-signature-width: 10.25rem;
 $gcds-footer-sub-signature-min-width: auto;
 $gcds-footer-sub-signature-max-height: 2.4375rem;

diff --git a/build/web/scss/components/footer.scss b/build/web/scss/components/footer.scss
@@ -1,7 +1,8 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$gcds-footer-band-padding: 2.25rem 0;
+$gcds-footer-band-padding-desktop: 2.25rem 0;
+$gcds-footer-band-padding-mobile: 1.5rem 0;
 $gcds-footer-container-margin: 0 auto;
 $gcds-footer-container-width: 71.25rem;
 $gcds-footer-contextual-background: #33465c;
@@ -17,7 +18,7 @@ $gcds-footer-main-nav-first-after-border-width: 0.25rem;
 $gcds-footer-main-nav-first-after-width: 2.25rem;
 $gcds-footer-main-text: #ffffff;
 $gcds-footer-sub-background: #f1f2f3;
-$gcds-footer-sub-listitem-before-margin: 0 1.125rem;
+$gcds-footer-sub-listitem-before-margin: 0 1.5rem;
 $gcds-footer-sub-signature-width: 10.25rem;
 $gcds-footer-sub-signature-min-width: auto;
 $gcds-footer-sub-signature-max-height: 2.4375rem;

diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -462,7 +462,8 @@ $gcds-file-uploader-focus-button-outline-offset: 0.125rem;
 $gcds-file-uploader-hover-button-background: #d7e5f5;
 $gcds-file-uploader-active-button-background: #000000;
 $gcds-file-uploader-active-button-text: #ffffff;
-$gcds-footer-band-padding: 2.25rem 0;
+$gcds-footer-band-padding-desktop: 2.25rem 0;
+$gcds-footer-band-padding-mobile: 1.5rem 0;
 $gcds-footer-container-margin: 0 auto;
 $gcds-footer-container-width: 71.25rem;
 $gcds-footer-contextual-background: #33465c;
@@ -478,7 +479,7 @@ $gcds-footer-main-nav-first-after-border-width: 0.25rem;
 $gcds-footer-main-nav-first-after-width: 2.25rem;
 $gcds-footer-main-text: #ffffff;
 $gcds-footer-sub-background: #f1f2f3;
-$gcds-footer-sub-listitem-before-margin: 0 1.125rem;
+$gcds-footer-sub-listitem-before-margin: 0 1.5rem;
 $gcds-footer-sub-signature-width: 10.25rem;
 $gcds-footer-sub-signature-min-width: auto;
 $gcds-footer-sub-signature-max-height: 2.4375rem;

diff --git a/tokens/components/footer/tokens.json b/tokens/components/footer/tokens.json
@@ -2,8 +2,14 @@
   "footer": {
     "band": {
       "padding": {
-        "value": "{spacing.450.value} 0",
-        "type": "spacing"
+        "desktop": {
+          "value": "{spacing.450.value} 0",
+          "type": "spacing"
+        },
+        "mobile": {
+          "value": "{spacing.300.value} 0",
+          "type": "spacing"
+        }
       }
     },
     "container": {
@@ -102,7 +108,7 @@
       "listitem": {
         "before": {
           "margin": {
-            "value": "0 {spacing.225.value}",
+            "value": "0 {spacing.300.value}",
             "type": "spacing"
           }
         }