fix: fieldset legend required font (#307)

cds-snc · Aug 13, 2024 · 2dad7bf · 2dad7bf
1 parent f04eab1
commit 2dad7bf
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 0 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -2007,6 +2007,26 @@
           "type": "spacing"
         },
         "required": {
+          "font": {
+            "desktop": {
+              "value": {
+                "fontFamily": "\"Noto Sans\", sans-serif",
+                "fontWeight": "400",
+                "lineHeight": "120%",
+                "fontSize": "1.25rem"
+              },
+              "type": "typography"
+            },
+            "mobile": {
+              "value": {
+                "fontFamily": "\"Noto Sans\", sans-serif",
+                "fontWeight": "400",
+                "lineHeight": "150%",
+                "fontSize": "1rem"
+              },
+              "type": "typography"
+            }
+          },
           "margin": {
             "value": "0 0 0 0.375rem",
             "type": "spacing"

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -378,6 +378,8 @@
   --gcds-fieldset-font-desktop: 600 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
   --gcds-fieldset-font-mobile: 600 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
   --gcds-fieldset-legend-margin: 0 0 0.1875rem;
+  --gcds-fieldset-legend-required-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-fieldset-legend-required-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-fieldset-legend-required-margin: 0 0 0 0.375rem;
   --gcds-file-uploader-button-background: #ffffff;
   --gcds-file-uploader-button-border-radius: 0.375rem;

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -234,6 +234,8 @@
   --gcds-fieldset-font-desktop: 600 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
   --gcds-fieldset-font-mobile: 600 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
   --gcds-fieldset-legend-margin: 0 0 0.1875rem;
+  --gcds-fieldset-legend-required-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-fieldset-legend-required-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-fieldset-legend-required-margin: 0 0 0 0.375rem;
   --gcds-file-uploader-button-background: #ffffff;
   --gcds-file-uploader-button-border-radius: 0.375rem;

diff --git a/build/web/css/components/fieldset.css b/build/web/css/components/fieldset.css
@@ -9,5 +9,7 @@
   --gcds-fieldset-font-desktop: 600 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
   --gcds-fieldset-font-mobile: 600 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
   --gcds-fieldset-legend-margin: 0 0 0.1875rem;
+  --gcds-fieldset-legend-required-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-fieldset-legend-required-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-fieldset-legend-required-margin: 0 0 0 0.375rem;
 }
diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -378,6 +378,8 @@
   --gcds-fieldset-font-desktop: 600 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
   --gcds-fieldset-font-mobile: 600 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
   --gcds-fieldset-legend-margin: 0 0 0.1875rem;
+  --gcds-fieldset-legend-required-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-fieldset-legend-required-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
   --gcds-fieldset-legend-required-margin: 0 0 0 0.375rem;
   --gcds-file-uploader-button-background: #ffffff;
   --gcds-file-uploader-button-border-radius: 0.375rem;

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -376,6 +376,8 @@ $gcds-fieldset-focus-text: #0535d2;
 $gcds-fieldset-font-desktop: 600 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
 $gcds-fieldset-font-mobile: 600 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
 $gcds-fieldset-legend-margin: 0 0 0.1875rem;
+$gcds-fieldset-legend-required-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-fieldset-legend-required-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-fieldset-legend-required-margin: 0 0 0 0.375rem;
 $gcds-file-uploader-button-background: #ffffff;
 $gcds-file-uploader-button-border-radius: 0.375rem;

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -232,6 +232,8 @@ $gcds-fieldset-focus-text: #0535d2;
 $gcds-fieldset-font-desktop: 600 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
 $gcds-fieldset-font-mobile: 600 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
 $gcds-fieldset-legend-margin: 0 0 0.1875rem;
+$gcds-fieldset-legend-required-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-fieldset-legend-required-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-fieldset-legend-required-margin: 0 0 0 0.375rem;
 $gcds-file-uploader-button-background: #ffffff;
 $gcds-file-uploader-button-border-radius: 0.375rem;

diff --git a/build/web/scss/components/fieldset.scss b/build/web/scss/components/fieldset.scss
@@ -7,4 +7,6 @@ $gcds-fieldset-focus-text: #0535d2;
 $gcds-fieldset-font-desktop: 600 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
 $gcds-fieldset-font-mobile: 600 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
 $gcds-fieldset-legend-margin: 0 0 0.1875rem;
+$gcds-fieldset-legend-required-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-fieldset-legend-required-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-fieldset-legend-required-margin: 0 0 0 0.375rem;
diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -376,6 +376,8 @@ $gcds-fieldset-focus-text: #0535d2;
 $gcds-fieldset-font-desktop: 600 2.00225830078125rem/124.85901539399482% "Lato", sans-serif;
 $gcds-fieldset-font-mobile: 600 1.601806640625rem/124.85901539399481% "Lato", sans-serif;
 $gcds-fieldset-legend-margin: 0 0 0.1875rem;
+$gcds-fieldset-legend-required-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-fieldset-legend-required-font-mobile: 400 1rem/150% "Noto Sans", sans-serif;
 $gcds-fieldset-legend-required-margin: 0 0 0 0.375rem;
 $gcds-file-uploader-button-background: #ffffff;
 $gcds-file-uploader-button-border-radius: 0.375rem;

diff --git a/tokens/components/fieldset/tokens.json b/tokens/components/fieldset/tokens.json
@@ -44,6 +44,26 @@
         "type": "spacing"
       },
       "required": {
+        "font": {
+          "desktop": {
+            "value": {
+              "fontFamily": "{fontFamilies.body}",
+              "fontWeight": "{fontWeights.regular}",
+              "lineHeight": "{lineHeights.text}",
+              "fontSize": "{fontSizes.text}"
+            },
+            "type": "typography"
+          },
+          "mobile": {
+            "value": {
+              "fontFamily": "{fontFamilies.body}",
+              "fontWeight": "{fontWeights.regular}",
+              "lineHeight": "{lineHeights.textMobile}",
+              "fontSize": "{fontSizes.textMobile}"
+            },
+            "type": "typography"
+          }
+        },
         "margin": {
           "value": "0 0 0 {spacing.100.value}",
           "type": "spacing"