From cf22acdac40d048c437d1dad437ff0184dc98fa7 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 28 Sep 2023 15:56:31 -0400
Subject: [PATCH] [Text] Update heading variants to use composite tokens

---
 polaris-react/src/components/Text/Text.scss | 45 +++++++++++----------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss
index 420f5492fbc..603a4b4db06 100644
--- 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