feat!: new tokens for search component mobile text (#321)

replaces font.value with font.desktop.value and font.mobile.value
cds-snc · Sep 13, 2024 · f4bdabe · f4bdabe
1 parent e0524e5
commit f4bdabe
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 20 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -3831,13 +3831,24 @@
         }
       },
       "font": {
-        "value": {
-          "fontFamily": "\"Noto Sans\", sans-serif",
-          "fontWeight": "400",
-          "lineHeight": "120%",
-          "fontSize": "1.25rem"
+        "desktop": {
+          "value": {
+            "fontFamily": "\"Noto Sans\", sans-serif",
+            "fontWeight": "400",
+            "lineHeight": "120%",
+            "fontSize": "1.25rem"
+          },
+          "type": "typography"
         },
-        "type": "typography"
+        "mobile": {
+          "value": {
+            "fontFamily": "\"Noto Sans\", sans-serif",
+            "fontWeight": "400",
+            "lineHeight": "120%",
+            "fontSize": "1rem"
+          },
+          "type": "typography"
+        }
       },
       "margin": {
         "value": "0 0 0.1875rem",

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -699,7 +699,8 @@
   --gcds-search-focus-border-radius: 0.1875rem;
   --gcds-search-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-search-focus-text: #0535d2;
-  --gcds-search-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-search-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-search-font-mobile: 400 1rem/120% "Noto Sans", sans-serif;
   --gcds-search-margin: 0 0 0.1875rem;
   --gcds-search-min-width-and-height: 3rem;
   --gcds-search-outline-width: 0.1875rem;

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -553,7 +553,8 @@
   --gcds-search-focus-border-radius: 0.1875rem;
   --gcds-search-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-search-focus-text: #0535d2;
-  --gcds-search-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-search-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-search-font-mobile: 400 1rem/120% "Noto Sans", sans-serif;
   --gcds-search-margin: 0 0 0.1875rem;
   --gcds-search-min-width-and-height: 3rem;
   --gcds-search-outline-width: 0.1875rem;

diff --git a/build/web/css/components/search.css b/build/web/css/components/search.css
@@ -10,7 +10,8 @@
   --gcds-search-focus-border-radius: 0.1875rem;
   --gcds-search-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-search-focus-text: #0535d2;
-  --gcds-search-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-search-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-search-font-mobile: 400 1rem/120% "Noto Sans", sans-serif;
   --gcds-search-margin: 0 0 0.1875rem;
   --gcds-search-min-width-and-height: 3rem;
   --gcds-search-outline-width: 0.1875rem;

diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -699,7 +699,8 @@
   --gcds-search-focus-border-radius: 0.1875rem;
   --gcds-search-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-search-focus-text: #0535d2;
-  --gcds-search-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-search-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-search-font-mobile: 400 1rem/120% "Noto Sans", sans-serif;
   --gcds-search-margin: 0 0 0.1875rem;
   --gcds-search-min-width-and-height: 3rem;
   --gcds-search-outline-width: 0.1875rem;

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -697,7 +697,8 @@ $gcds-search-default-text: #333333;
 $gcds-search-focus-border-radius: 0.1875rem;
 $gcds-search-focus-box-shadow: 0 0 0 0.125rem #ffffff;
 $gcds-search-focus-text: #0535d2;
-$gcds-search-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-search-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-search-font-mobile: 400 1rem/120% "Noto Sans", sans-serif;
 $gcds-search-margin: 0 0 0.1875rem;
 $gcds-search-min-width-and-height: 3rem;
 $gcds-search-outline-width: 0.1875rem;

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -551,7 +551,8 @@ $gcds-search-default-text: #333333;
 $gcds-search-focus-border-radius: 0.1875rem;
 $gcds-search-focus-box-shadow: 0 0 0 0.125rem #ffffff;
 $gcds-search-focus-text: #0535d2;
-$gcds-search-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-search-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-search-font-mobile: 400 1rem/120% "Noto Sans", sans-serif;
 $gcds-search-margin: 0 0 0.1875rem;
 $gcds-search-min-width-and-height: 3rem;
 $gcds-search-outline-width: 0.1875rem;

diff --git a/build/web/scss/components/search.scss b/build/web/scss/components/search.scss
@@ -8,7 +8,8 @@ $gcds-search-default-text: #333333;
 $gcds-search-focus-border-radius: 0.1875rem;
 $gcds-search-focus-box-shadow: 0 0 0 0.125rem #ffffff;
 $gcds-search-focus-text: #0535d2;
-$gcds-search-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-search-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-search-font-mobile: 400 1rem/120% "Noto Sans", sans-serif;
 $gcds-search-margin: 0 0 0.1875rem;
 $gcds-search-min-width-and-height: 3rem;
 $gcds-search-outline-width: 0.1875rem;

diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -697,7 +697,8 @@ $gcds-search-default-text: #333333;
 $gcds-search-focus-border-radius: 0.1875rem;
 $gcds-search-focus-box-shadow: 0 0 0 0.125rem #ffffff;
 $gcds-search-focus-text: #0535d2;
-$gcds-search-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-search-font-desktop: 400 1.25rem/120% "Noto Sans", sans-serif;
+$gcds-search-font-mobile: 400 1rem/120% "Noto Sans", sans-serif;
 $gcds-search-margin: 0 0 0.1875rem;
 $gcds-search-min-width-and-height: 3rem;
 $gcds-search-outline-width: 0.1875rem;

diff --git a/tokens/components/search/tokens.json b/tokens/components/search/tokens.json
@@ -37,13 +37,24 @@
       }
     },
     "font": {
-      "value": {
-        "fontFamily": "{fontFamilies.body}",
-        "fontWeight": "{fontWeights.regular}",
-        "lineHeight": "{lineHeights.text}",
-        "fontSize": "{fontSizes.text}"
+      "desktop": {
+        "value": {
+          "fontFamily": "{fontFamilies.body}",
+          "fontWeight": "{fontWeights.regular}",
+          "lineHeight": "{lineHeights.text}",
+          "fontSize": "{fontSizes.text}"
+        },
+        "type": "typography"
       },
-      "type": "typography"
+      "mobile": {
+        "value": {
+          "fontFamily": "{fontFamilies.body}",
+          "fontWeight": "{fontWeights.regular}",
+          "lineHeight": "{lineHeights.text}",
+          "fontSize": "{fontSizes.textMobile}"
+        },
+        "type": "typography"
+      }
     },
     "margin": {
       "value": "0 0 {spacing.50.value}",