[Text] Update heading variants to use composite tokens

Shopify · Sep 28, 2023 · cf22acd · cf22acd
1 parent 7a08f6d
commit cf22acd
Showing 1 changed file with 24 additions and 21 deletions.
diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss
@@ -57,24 +57,24 @@
 }
 
 @mixin _headingSm {
-  font-size: var(--p-font-size-325);
-  line-height: var(--p-font-line-height-500);
+  font-size: var(--p-text-heading-sm-font-size);
+  line-height: var(--p-text-heading-sm-font-line-height);
 }
 
 .headingXs {
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-text-heading-xs-font-weight);
   @include _headingSm;
 }
 
 .headingSm {
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-text-heading-sm-font-weight);
   @include _headingSm;
 }
 
 .headingMd {
-  font-size: var(--p-font-size-350);
-  line-height: var(--p-font-line-height-500);
-  font-weight: var(--p-font-weight-semibold);
+  font-size: var(--p-text-heading-md-font-size);
+  line-height: var(--p-text-heading-md-font-line-height);
+  font-weight: var(--p-text-heading-md-font-weight);
 }
 
 .headingLg {
@@ -83,8 +83,8 @@
   font-weight: var(--p-font-weight-bold);
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-500);
-    line-height: var(--p-font-line-height-600);
+    font-size: var(--p-text-heading-lg-font-size);
+    line-height: var(--p-text-heading-lg-font-line-height);
   }
 }
 
@@ -94,8 +94,8 @@
   font-weight: var(--p-font-weight-bold);
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-600);
-    line-height: var(--p-font-line-height-800);
+    font-size: var(--p-text-heading-xl-font-size);
+    line-height: var(--p-text-heading-xl-font-line-height);
   }
 }
 
@@ -105,8 +105,8 @@
   font-weight: var(--p-font-weight-bold);
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-750);
-    line-height: var(--p-font-line-height-1000);
+    font-size: var(--p-text-heading-2xl-font-size);
+    line-height: var(--p-text-heading-2xl-font-line-height);
   }
 }
 
@@ -116,8 +116,8 @@
   font-weight: var(--p-font-weight-bold);
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-900);
-    line-height: var(--p-font-line-height-1200);
+    font-size: var(--p-text-heading-3xl-font-size);
+    line-height: var(--p-text-heading-3xl-font-line-height);
   }
 }
 
@@ -130,18 +130,21 @@
 }
 
 .bodySm {
-  font-size: var(--p-font-size-300);
-  line-height: var(--p-font-line-height-400);
+  font-size: var(--p-text-body-sm-font-size);
+  font-weight: var(--p-text-body-sm-font-weight);
+  line-height: var(--p-text-body-sm-font-line-height);
 }
 
 .bodyMd {
-  font-size: var(--p-font-size-325);
-  line-height: var(--p-font-line-height-500);
+  font-size: var(--p-text-body-md-font-size);
+  font-weight: var(--p-text-body-sm-font-weight);
+  line-height: var(--p-text-body-md-font-line-height);
 }
 
 .bodyLg {
-  font-size: var(--p-font-size-350);
-  line-height: var(--p-font-line-height-500);
+  font-size: var(--p-text-body-lg-font-size);
+  font-weight: var(--p-text-body-sm-font-weight);
+  line-height: var(--p-text-body-lg-font-line-height);
 }
 
 // font-weight must be below variant styles so