feat: Add tokens for fieldset in date-input (#392)

cds-snc · Feb 10, 2025 · b1792ca · b1792ca
1 parent a390b02
commit b1792ca
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 16 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -1887,19 +1887,49 @@
         },
         "error": {
           "margin": {
-            "value": "0 0 0.125rem",
+            "value": "0",
             "type": "spacing"
           }
         },
         "hint": {
           "margin": {
-            "value": "0 0 0.125rem",
+            "value": "0.375rem 0 0.125rem",
             "type": "spacing"
           }
         },
         "margin": {
           "value": "0 0 1.125rem",
           "type": "spacing"
+        },
+        "required": {
+          "font": {
+            "desktop": {
+              "value": {
+                "fontFamily": "'Noto Sans', sans-serif",
+                "fontWeight": "400",
+                "lineHeight": "160%",
+                "fontSize": "1.25rem"
+              },
+              "type": "typography"
+            },
+            "mobile": {
+              "value": {
+                "fontFamily": "'Noto Sans', sans-serif",
+                "fontWeight": "400",
+                "lineHeight": "155%",
+                "fontSize": "1.125rem"
+              },
+              "type": "typography"
+            }
+          },
+          "margin": {
+            "value": "0 0 0 0.375rem",
+            "type": "spacing"
+          }
+        },
+        "text": {
+          "value": "#333333",
+          "type": "color"
         }
       },
       "label": {

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -211,9 +211,13 @@
   --gcds-date-input-danger-border: #d3080c;
   --gcds-date-input-fieldset-font-desktop: 700 1.25rem/160% 'Noto Sans', sans-serif;
   --gcds-date-input-fieldset-font-mobile: 700 1.125rem/155% 'Noto Sans', sans-serif;
-  --gcds-date-input-fieldset-error-margin: 0 0 0.125rem;
-  --gcds-date-input-fieldset-hint-margin: 0 0 0.125rem;
+  --gcds-date-input-fieldset-error-margin: 0;
+  --gcds-date-input-fieldset-hint-margin: 0.375rem 0 0.125rem;
   --gcds-date-input-fieldset-margin: 0 0 1.125rem;
+  --gcds-date-input-fieldset-required-font-desktop: 400 1.25rem/160% 'Noto Sans', sans-serif;
+  --gcds-date-input-fieldset-required-font-mobile: 400 1.125rem/155% 'Noto Sans', sans-serif;
+  --gcds-date-input-fieldset-required-margin: 0 0 0 0.375rem;
+  --gcds-date-input-fieldset-text: #333333;
   --gcds-date-input-label-font-desktop: 500 1.25rem/160% 'Noto Sans', sans-serif;
   --gcds-date-input-label-font-mobile: 500 1.125rem/155% 'Noto Sans', sans-serif;
   --gcds-date-input-margin: 0.75rem;

diff --git a/build/web/css/components/date-input.css b/build/web/css/components/date-input.css
@@ -6,9 +6,13 @@
   --gcds-date-input-danger-border: #d3080c;
   --gcds-date-input-fieldset-font-desktop: 700 1.25rem/160% 'Noto Sans', sans-serif;
   --gcds-date-input-fieldset-font-mobile: 700 1.125rem/155% 'Noto Sans', sans-serif;
-  --gcds-date-input-fieldset-error-margin: 0 0 0.125rem;
-  --gcds-date-input-fieldset-hint-margin: 0 0 0.125rem;
+  --gcds-date-input-fieldset-error-margin: 0;
+  --gcds-date-input-fieldset-hint-margin: 0.375rem 0 0.125rem;
   --gcds-date-input-fieldset-margin: 0 0 1.125rem;
+  --gcds-date-input-fieldset-required-font-desktop: 400 1.25rem/160% 'Noto Sans', sans-serif;
+  --gcds-date-input-fieldset-required-font-mobile: 400 1.125rem/155% 'Noto Sans', sans-serif;
+  --gcds-date-input-fieldset-required-margin: 0 0 0 0.375rem;
+  --gcds-date-input-fieldset-text: #333333;
   --gcds-date-input-label-font-desktop: 500 1.25rem/160% 'Noto Sans', sans-serif;
   --gcds-date-input-label-font-mobile: 500 1.125rem/155% 'Noto Sans', sans-serif;
   --gcds-date-input-margin: 0.75rem;

diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -371,9 +371,13 @@
   --gcds-date-input-danger-border: #d3080c;
   --gcds-date-input-fieldset-font-desktop: 700 1.25rem/160% 'Noto Sans', sans-serif;
   --gcds-date-input-fieldset-font-mobile: 700 1.125rem/155% 'Noto Sans', sans-serif;
-  --gcds-date-input-fieldset-error-margin: 0 0 0.125rem;
-  --gcds-date-input-fieldset-hint-margin: 0 0 0.125rem;
+  --gcds-date-input-fieldset-error-margin: 0;
+  --gcds-date-input-fieldset-hint-margin: 0.375rem 0 0.125rem;
   --gcds-date-input-fieldset-margin: 0 0 1.125rem;
+  --gcds-date-input-fieldset-required-font-desktop: 400 1.25rem/160% 'Noto Sans', sans-serif;
+  --gcds-date-input-fieldset-required-font-mobile: 400 1.125rem/155% 'Noto Sans', sans-serif;
+  --gcds-date-input-fieldset-required-margin: 0 0 0 0.375rem;
+  --gcds-date-input-fieldset-text: #333333;
   --gcds-date-input-label-font-desktop: 500 1.25rem/160% 'Noto Sans', sans-serif;
   --gcds-date-input-label-font-mobile: 500 1.125rem/155% 'Noto Sans', sans-serif;
   --gcds-date-input-margin: 0.75rem;

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -209,9 +209,13 @@ $gcds-checkbox-padding: 0.5rem;
 $gcds-date-input-danger-border: #d3080c;
 $gcds-date-input-fieldset-font-desktop: 700 1.25rem/160% 'Noto Sans', sans-serif;
 $gcds-date-input-fieldset-font-mobile: 700 1.125rem/155% 'Noto Sans', sans-serif;
-$gcds-date-input-fieldset-error-margin: 0 0 0.125rem;
-$gcds-date-input-fieldset-hint-margin: 0 0 0.125rem;
+$gcds-date-input-fieldset-error-margin: 0;
+$gcds-date-input-fieldset-hint-margin: 0.375rem 0 0.125rem;
 $gcds-date-input-fieldset-margin: 0 0 1.125rem;
+$gcds-date-input-fieldset-required-font-desktop: 400 1.25rem/160% 'Noto Sans', sans-serif;
+$gcds-date-input-fieldset-required-font-mobile: 400 1.125rem/155% 'Noto Sans', sans-serif;
+$gcds-date-input-fieldset-required-margin: 0 0 0 0.375rem;
+$gcds-date-input-fieldset-text: #333333;
 $gcds-date-input-label-font-desktop: 500 1.25rem/160% 'Noto Sans', sans-serif;
 $gcds-date-input-label-font-mobile: 500 1.125rem/155% 'Noto Sans', sans-serif;
 $gcds-date-input-margin: 0.75rem;

diff --git a/build/web/scss/components/date-input.scss b/build/web/scss/components/date-input.scss
@@ -4,9 +4,13 @@
 $gcds-date-input-danger-border: #d3080c;
 $gcds-date-input-fieldset-font-desktop: 700 1.25rem/160% 'Noto Sans', sans-serif;
 $gcds-date-input-fieldset-font-mobile: 700 1.125rem/155% 'Noto Sans', sans-serif;
-$gcds-date-input-fieldset-error-margin: 0 0 0.125rem;
-$gcds-date-input-fieldset-hint-margin: 0 0 0.125rem;
+$gcds-date-input-fieldset-error-margin: 0;
+$gcds-date-input-fieldset-hint-margin: 0.375rem 0 0.125rem;
 $gcds-date-input-fieldset-margin: 0 0 1.125rem;
+$gcds-date-input-fieldset-required-font-desktop: 400 1.25rem/160% 'Noto Sans', sans-serif;
+$gcds-date-input-fieldset-required-font-mobile: 400 1.125rem/155% 'Noto Sans', sans-serif;
+$gcds-date-input-fieldset-required-margin: 0 0 0 0.375rem;
+$gcds-date-input-fieldset-text: #333333;
 $gcds-date-input-label-font-desktop: 500 1.25rem/160% 'Noto Sans', sans-serif;
 $gcds-date-input-label-font-mobile: 500 1.125rem/155% 'Noto Sans', sans-serif;
 $gcds-date-input-margin: 0.75rem;
diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -369,9 +369,13 @@ $gcds-checkbox-padding: 0.5rem;
 $gcds-date-input-danger-border: #d3080c;
 $gcds-date-input-fieldset-font-desktop: 700 1.25rem/160% 'Noto Sans', sans-serif;
 $gcds-date-input-fieldset-font-mobile: 700 1.125rem/155% 'Noto Sans', sans-serif;
-$gcds-date-input-fieldset-error-margin: 0 0 0.125rem;
-$gcds-date-input-fieldset-hint-margin: 0 0 0.125rem;
+$gcds-date-input-fieldset-error-margin: 0;
+$gcds-date-input-fieldset-hint-margin: 0.375rem 0 0.125rem;
 $gcds-date-input-fieldset-margin: 0 0 1.125rem;
+$gcds-date-input-fieldset-required-font-desktop: 400 1.25rem/160% 'Noto Sans', sans-serif;
+$gcds-date-input-fieldset-required-font-mobile: 400 1.125rem/155% 'Noto Sans', sans-serif;
+$gcds-date-input-fieldset-required-margin: 0 0 0 0.375rem;
+$gcds-date-input-fieldset-text: #333333;
 $gcds-date-input-label-font-desktop: 500 1.25rem/160% 'Noto Sans', sans-serif;
 $gcds-date-input-label-font-mobile: 500 1.125rem/155% 'Noto Sans', sans-serif;
 $gcds-date-input-margin: 0.75rem;

diff --git a/tokens/components/date-input/tokens.json b/tokens/components/date-input/tokens.json
@@ -29,19 +29,49 @@
       },
       "error": {
         "margin": {
-          "value": "0 0 {spacing.25.value}",
+          "value": "0",
           "type": "spacing"
         }
       },
       "hint": {
         "margin": {
-          "value": "0 0 {spacing.25.value}",
+          "value": "{spacing.75.value} 0 {spacing.25.value}",
           "type": "spacing"
         }
       },
       "margin": {
         "value": "0 0 {spacing.225.value}",
         "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.75.value}",
+          "type": "spacing"
+        }
+      },
+      "text": {
+        "value": "{text.primary.value}",
+        "type": "color"
       }
     },
     "label": {