style(gcds-input + gcds-textarea): add mobile font size to input & textarea (#975)

* chore: update tokens package

* style(gcds-input + gcds-textarea): add mobile font size to input & textarea

Author: melaniebmn

package-lock.json

@@ -52,7 +52,7 @@
     "@babel/preset-typescript": "^7.21.0",
     "@bgotink/playwright-coverage": "^0.3.2",
     "@gcds-core/fonts": "^1.0.0",
-    "@cdssnc/gcds-tokens": "^2.13.0",
+    "@cdssnc/gcds-tokens": "^2.13.1",
     "@playwright/test": "^1.52.0",
     "@stencil/angular-output-target": "file:../../utils/angular-output-target",
     "@stencil/playwright": "^0.2.1",

packages/web/package.json

@@ -20,10 +20,14 @@
   :host .gcds-input-wrapper {
     max-width: 75ch;
     width: 100%;
-    font: var(--gcds-input-font);
+    font: var(--gcds-input-font-desktop);
     color: var(--gcds-input-default-text);
     transition: color ease-in-out 0.15s;
 
+    @media only screen and (width < 48em) {
+      font: var(--gcds-input-font-mobile);
+    }
+
     input {
       display: block;
       min-width: var(--gcds-input-min-width-and-height);

packages/web/src/components/gcds-input/gcds-input.css

@@ -20,10 +20,14 @@
   :host .gcds-textarea-wrapper {
     width: 100%;
     max-width: 75ch;
-    font: var(--gcds-textarea-font);
+    font: var(--gcds-textarea-font-desktop);
     color: var(--gcds-textarea-default-text);
     transition: color ease-in-out 0.15s;
 
+    @media only screen and (width < 48em) {
+      font: var(--gcds-textarea-font-mobile);
+    }
+
     textarea {
       display: block;
       min-width: 50%;