From e2f3f66da5200069a6efc5cd063bf204f8179b45 Mon Sep 17 00:00:00 2001
From: Aveline Thelen <aveline.thelen@shopify.com>
Date: Thu, 18 Nov 2021 09:45:00 -0800
Subject: [PATCH] Start replacing font-size() with custom properties and set
 base font-size to browser default

---
 src/components/AppProvider/AppProvider.scss    |  2 +-
 src/components/Navigation/Navigation.scss      |  4 ++--
 src/components/Navigation/_variables.scss      |  4 ++--
 .../Header/components/Title/Title.scss         |  6 +++---
 src/styles/foundation/_utilities.scss          |  2 +-
 src/styles/shared/_typography.scss             | 18 +++++++++---------
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss
index 512dadbe76e..e251e022860 100644
--- a/src/components/AppProvider/AppProvider.scss
+++ b/src/components/AppProvider/AppProvider.scss
@@ -32,7 +32,7 @@ button {
 
 html {
   position: relative;
-  font-size: ($base-font-size / $default-browser-font-size) * 100%;
+  font-size: 100%;
   -webkit-font-smoothing: antialiased;
 
   // This needs to come after -webkit-font-smoothing
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
index 177caabd80a..551b5389d5e 100644
--- a/src/components/Navigation/Navigation.scss
+++ b/src/components/Navigation/Navigation.scss
@@ -348,11 +348,11 @@ $secondary-item-font-size: rem(15px);
   padding-left: spacing();
 
   .Text {
-    font-size: font-size(subheading);
+    font-size: var(--fs-1);
     color: var(--p-text-subdued);
 
     @include when-typography-not-condensed {
-      font-size: font-size(subheading, large-screen);
+      font-size: var(--fs-0);
     }
   }
 
diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss
index 3ca76d233e0..cc7097f1712 100644
--- a/src/components/Navigation/_variables.scss
+++ b/src/components/Navigation/_variables.scss
@@ -1,5 +1,5 @@
-$item-font-size: rem(16px);
-$item-font-size-small: rem(14px);
+$item-font-size: var(--fs-4);
+$item-font-size-small: var(--fs-2);
 $item-line-height-small: rem(32px);
 $item-line-height-large: rem(36px);
 // This is the only place this color is used.
diff --git a/src/components/Page/components/Header/components/Title/Title.scss b/src/components/Page/components/Header/components/Title/Title.scss
index c99775f7c9a..b73ea57079c 100644
--- a/src/components/Page/components/Header/components/Title/Title.scss
+++ b/src/components/Page/components/Header/components/Title/Title.scss
@@ -3,11 +3,11 @@
 .Title {
   @include text-breakword;
   @include text-emphasis-strong;
-  font-size: rem(24px);
-  line-height: rem(28px);
+  font-size: var(--fs-8);
+  line-height: var(--lh-3);
 
   @include when-typography-not-condensed {
-    font-size: rem(20px);
+    font-size: var(--fs-6);
   }
 }
 
diff --git a/src/styles/foundation/_utilities.scss b/src/styles/foundation/_utilities.scss
index 85c28bda793..2087d3ce3eb 100644
--- a/src/styles/foundation/_utilities.scss
+++ b/src/styles/foundation/_utilities.scss
@@ -13,7 +13,7 @@ $base-font-size: 10px;
   } @else if $unit == 'rem' {
     @return $value;
   } @else if $unit == 'px' {
-    @return $value / $base-font-size * 1rem;
+    @return $value / $default-browser-font-size * 1rem;
   } @else if $unit == 'em' {
     @return $unit / 1em * 1rem;
   } @else {
diff --git a/src/styles/shared/_typography.scss b/src/styles/shared/_typography.scss
index f1fb83bf3d4..af7e28a84be 100644
--- a/src/styles/shared/_typography.scss
+++ b/src/styles/shared/_typography.scss
@@ -13,34 +13,34 @@ $typography-condensed: em(640px);
 }
 
 @mixin text-style-caption {
-  font-size: font-size(caption);
+  font-size: var(--fs-1);
   font-weight: 400;
   line-height: line-height(caption);
 
   @include when-typography-not-condensed {
-    font-size: font-size(caption, large-screen);
+    font-size: var(--fs-0);
     line-height: line-height(caption, large-screen);
   }
 }
 
 @mixin text-style-heading {
-  font-size: font-size(heading);
+  font-size: var(--fs-8);
   font-weight: 600;
   line-height: line-height(heading);
 
   @include when-typography-not-condensed {
-    font-size: font-size(heading, large-screen);
+    font-size: var(--fs-4);
   }
 }
 
 @mixin text-style-subheading {
-  font-size: font-size(subheading);
+  font-size: var(--fs-1);
   font-weight: 600;
-  line-height: line-height(subheading);
+  line-height: var(--lh-0);
   text-transform: uppercase;
 
   @include when-typography-not-condensed {
-    font-size: font-size(subheading, large-screen);
+    font-size: var(--fs-0);
   }
 }
 
@@ -59,7 +59,7 @@ $typography-condensed: em(640px);
 }
 
 @mixin text-style-body {
-  font-size: font-size(body);
+  font-size: var(--fs-2);
   font-weight: 400;
   line-height: line-height(body);
 
@@ -67,7 +67,7 @@ $typography-condensed: em(640px);
   letter-spacing: initial;
 
   @include when-typography-not-condensed {
-    font-size: font-size(body, large-screen);
+    font-size: var(--fs-3);
   }
 }