Remove global and input responsive text styles

Remove input and select responsive text Add changeset
Shopify · Apr 4, 2024 · 4ff4a01 · 4ff4a01
1 parent 931b78d
commit 4ff4a01
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 35 deletions.
diff --git a/.changeset/cuddly-goats-remain.md b/.changeset/cuddly-goats-remain.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Revert responsive text style updates
diff --git a/polaris-react/postcss-mixins/text-style-input.css b/polaris-react/postcss-mixins/text-style-input.css
@@ -1,12 +1,7 @@
 @define-mixin text-style-input {
-  font-size: var(--p-font-size-400);
+  font-size: var(--p-font-size-325);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-600);
+  line-height: var(--p-font-line-height-500);
   border: none;
   letter-spacing: initial;
-
-  @media (--p-breakpoints-md-up) {
-    font-size: var(--p-font-size-325);
-    line-height: var(--p-font-line-height-500);
-  }
 }
diff --git a/polaris-react/src/components/AppProvider/global.css b/polaris-react/src/components/AppProvider/global.css
@@ -53,17 +53,12 @@
 
 html,
 body {
-  font-size: var(--p-font-size-400);
-  line-height: var(--p-font-line-height-600);
+  font-size: var(--p-font-size-325);
+  line-height: var(--p-font-line-height-500);
   font-weight: var(--p-font-weight-regular);
   font-feature-settings: 'calt' 0;
   letter-spacing: initial;
   color: var(--p-color-text);
-
-  @media (--p-breakpoints-md-up) {
-    font-size: var(--p-font-size-325);
-    line-height: var(--p-font-line-height-500);
-  }
 }
 
 html,

diff --git a/polaris-react/src/components/Select/Select.module.css b/polaris-react/src/components/Select/Select.module.css
@@ -87,9 +87,9 @@
 
 .Input {
   /* Even though the input is invisible, text styles apply to the options menu */
-  font-size: var(--p-font-size-400);
+  font-size: var(--p-font-size-325);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-600);
+  line-height: var(--p-font-line-height-500);
 
   /* Safari requires the font-family to be added to the <select> element */
   font-family: var(--p-font-family-sans);
@@ -112,11 +112,6 @@
   /* Google chrome on Windows requires padding to be added otherwise <option> has no space */
   padding: var(--p-space-150) var(--p-space-200) var(--p-space-150)
     var(--p-space-300);
-
-  @media (--p-breakpoints-md-up) {
-    font-size: var(--p-font-size-325);
-    line-height: var(--p-font-line-height-500);
-  }
 }
 
 .Backdrop {

diff --git a/polaris-react/src/components/TextField/TextField.module.css b/polaris-react/src/components/TextField/TextField.module.css
@@ -222,14 +222,9 @@
     min-width: 1em;
     grid-area: 1 / 2;
     padding: 0 var(--p-space-300);
-    font-size: var(--p-font-size-400);
+    font-size: var(--p-font-size-325);
     font-weight: var(--p-font-weight-regular);
-    line-height: var(--p-font-line-height-600);
-
-    @media (--p-breakpoints-md-up) {
-      font-size: var(--p-font-size-325);
-      line-height: var(--p-font-line-height-500);
-    }
+    line-height: var(--p-font-line-height-500);
   }
 }
 
@@ -251,9 +246,9 @@
 }
 
 .Input {
-  font-size: var(--p-font-size-400);
+  font-size: var(--p-font-size-325);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-600);
+  line-height: var(--p-font-line-height-500);
   letter-spacing: initial;
   position: relative;
   /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
@@ -273,11 +268,6 @@
   color: var(--p-color-text);
   align-items: center;
 
-  @media (--p-breakpoints-md-up) {
-    font-size: var(--p-font-size-325);
-    line-height: var(--p-font-line-height-500);
-  }
-
   .Prefix + & {
     padding-left: 0;
   }