Update responsive text styles for mobile

Revert "Revert "Unify `Text` responsive styles" (#11833)"

This reverts commit d5cb5ea.

Update responsive text styles for mobile

.changeset/sharp-moose-act.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated responsive text styles for mobile

polaris-react/postcss-mixins/text-style-input.css

@@ -1,7 +1,12 @@
 @define-mixin text-style-input {
-  font-size: var(--p-font-size-325);
+  font-size: var(--p-font-size-400);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-500);
+  line-height: var(--p-font-line-height-600);
   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);
+  }
 }

polaris-react/src/components/AppProvider/global.css

@@ -53,13 +53,18 @@
 
 html,
 body {
-  font-size: var(--p-font-size-325);
-  line-height: var(--p-font-line-height-500);
+  font-size: var(--p-font-size-400);
+  line-height: var(--p-font-line-height-600);
   font-weight: var(--p-font-weight-regular);
   font-feature-settings: 'calt' 0;
   letter-spacing: initial;
   color: var(--p-color-text);
   -webkit-tap-highlight-color: transparent;
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-325);
+    line-height: var(--p-font-line-height-500);
+  }
 }
 
 html,
@@ -114,6 +119,7 @@ html {
   @media (--p-breakpoints-sm-down) {
     html {
       font: -apple-system-body;
+      -webkit-text-size-adjust: calc(100% * (16 / 17));
     }
   }
 }

polaris-react/src/components/Text/Text.module.css

@@ -79,101 +79,117 @@
 }
 
 .headingXs {
-  font-size: var(--p-text-heading-xs-font-size);
-  font-weight: var(--p-text-heading-xs-font-weight);
-  letter-spacing: var(--p-text-heading-xs-font-letter-spacing);
-  line-height: var(--p-text-heading-xs-font-line-height);
+  font-size: var(--p-font-size-300);
+  font-weight: var(--p-font-weight-semibold);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-400);
 }
 
 .headingSm {
-  font-size: var(--p-text-heading-sm-font-size);
-  font-weight: var(--p-text-heading-sm-font-weight);
-  letter-spacing: var(--p-text-heading-sm-font-letter-spacing);
-  line-height: var(--p-text-heading-sm-font-line-height);
+  font-size: var(--p-font-size-350);
+  font-weight: var(--p-font-weight-semibold);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-500);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-325);
+  }
 }
 
 .headingMd {
-  font-size: var(--p-text-heading-md-font-size);
-  font-weight: var(--p-text-heading-md-font-weight);
-  letter-spacing: var(--p-text-heading-md-font-letter-spacing);
-  line-height: var(--p-text-heading-md-font-line-height);
-}
+  font-size: var(--p-font-size-400);
+  font-weight: var(--p-font-weight-semibold);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-500);
 
-.headingLg {
-  font-size: var(--p-text-heading-lg-font-size);
-  font-weight: var(--p-text-heading-lg-font-weight);
-  letter-spacing: var(--p-text-heading-lg-font-letter-spacing);
-  line-height: var(--p-text-heading-lg-font-line-height);
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-350);
+  }
 }
 
-.headingXl {
+.headingLg {
   font-size: var(--p-font-size-500);
   font-weight: var(--p-font-weight-semibold);
   letter-spacing: var(--p-font-letter-spacing-dense);
   line-height: var(--p-font-line-height-600);
+}
+
+.headingXl {
+  font-size: var(--p-font-size-550);
+  font-weight: var(--p-font-weight-bold);
+  letter-spacing: var(--p-font-letter-spacing-dense);
+  line-height: var(--p-font-line-height-800);
 
   @media (--p-breakpoints-md-up) {
-    font-size: var(--p-text-heading-xl-font-size);
-    font-weight: var(--p-text-heading-xl-font-weight);
-    letter-spacing: var(--p-text-heading-xl-font-letter-spacing);
-    line-height: var(--p-text-heading-xl-font-line-height);
+    font-size: var(--p-font-size-600);
   }
 }
 
 .heading2xl {
   font-size: var(--p-font-size-600);
   font-weight: var(--p-font-weight-bold);
-  letter-spacing: var(--p-font-letter-spacing-dense);
+  letter-spacing: var(--p-font-letter-spacing-denser);
   line-height: var(--p-font-line-height-800);
 
   @media (--p-breakpoints-md-up) {
-    font-size: var(--p-text-heading-2xl-font-size);
-    font-weight: var(--p-text-heading-2xl-font-weight);
-    letter-spacing: var(--p-text-heading-2xl-font-letter-spacing);
-    line-height: var(--p-text-heading-2xl-font-line-height);
+    font-size: var(--p-font-size-750);
+    line-height: var(--p-font-line-height-1000);
   }
 }
 
 .heading3xl {
-  font-size: var(--p-font-size-750);
+  font-size: var(--p-font-size-800);
   font-weight: var(--p-font-weight-bold);
   letter-spacing: var(--p-font-letter-spacing-denser);
   line-height: var(--p-font-line-height-1000);
-
-  @media (--p-breakpoints-md-up) {
-    font-size: var(--p-text-heading-3xl-font-size);
-    font-weight: var(--p-text-heading-3xl-font-weight);
-    letter-spacing: var(--p-text-heading-3xl-font-letter-spacing);
-    line-height: var(--p-text-heading-3xl-font-line-height);
-  }
 }
 
 .bodyXs {
-  font-size: var(--p-text-body-xs-font-size);
-  font-weight: var(--p-text-body-xs-font-weight);
-  letter-spacing: var(--p-text-body-xs-font-letter-spacing);
-  line-height: var(--p-text-body-xs-font-line-height);
+  font-size: var(--p-font-size-300);
+  font-weight: var(--p-font-weight-regular);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-400);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-275);
+    line-height: var(--p-font-line-height-300);
+  }
 }
 
 .bodySm {
-  font-size: var(--p-text-body-sm-font-size);
-  font-weight: var(--p-text-body-sm-font-weight);
-  letter-spacing: var(--p-text-body-sm-font-letter-spacing);
-  line-height: var(--p-text-body-sm-font-line-height);
+  font-size: var(--p-font-size-350);
+  font-weight: var(--p-font-weight-regular);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-500);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-300);
+    line-height: var(--p-font-line-height-400);
+  }
 }
 
 .bodyMd {
-  font-size: var(--p-text-body-md-font-size);
-  font-weight: var(--p-text-body-sm-font-weight);
-  letter-spacing: var(--p-text-body-md-font-letter-spacing);
-  line-height: var(--p-text-body-md-font-line-height);
+  font-size: var(--p-font-size-400);
+  font-weight: var(--p-font-weight-regular);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  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);
+  }
 }
 
 .bodyLg {
-  font-size: var(--p-text-body-lg-font-size);
-  font-weight: var(--p-text-body-sm-font-weight);
-  letter-spacing: var(--p-text-body-lg-font-letter-spacing);
-  line-height: var(--p-text-body-lg-font-line-height);
+  font-size: var(--p-font-size-450);
+  font-weight: var(--p-font-weight-regular);
+  letter-spacing: var(--p-font-letter-spacing-normal);
+  line-height: var(--p-font-line-height-600);
+
+  @media (--p-breakpoints-md-up) {
+    font-size: var(--p-font-size-350);
+    line-height: var(--p-font-line-height-500);
+  }
 }
 
 /* font-weight must be below variant styles so