From af03a356cc9513b1cc2588499d24b7618f994221 Mon Sep 17 00:00:00 2001
From: Alex Page <hi@alexpage.dev>
Date: Wed, 27 Apr 2022 07:07:32 -0700
Subject: [PATCH] use rem instead of em

---
 .../src/components/Button/Button.module.scss  |  6 +--
 .../ComponentsNav/ComponentsNav.module.scss   |  8 ++--
 .../GlobalSearch/GlobalSearch.module.scss     |  8 ++--
 .../IconGallery/IconGallery.module.scss       | 19 +++++-----
 .../components/Longform/Longform.module.scss  |  6 +--
 .../src/components/Nav/Nav.module.scss        |  6 +--
 .../src/components/Page/Page.module.scss      | 16 ++++----
 .../TextField/TextField.module.scss           |  2 +-
 .../src/components/Token/Token.module.scss    |  8 ++--
 polaris.shopify.com/src/styles/globals.scss   | 38 +++++++++----------
 10 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/polaris.shopify.com/src/components/Button/Button.module.scss b/polaris.shopify.com/src/components/Button/Button.module.scss
index 83299f5b34f..4167e2c71dd 100644
--- a/polaris.shopify.com/src/components/Button/Button.module.scss
+++ b/polaris.shopify.com/src/components/Button/Button.module.scss
@@ -1,7 +1,7 @@
 .Button {
   appearance: none;
   background: #fbfbfb;
-  padding: 0.3em 0.5em 0.35em;
+  padding: 0.3rem 0.5rem 0.35rem;
   border: none;
   font-weight: var(--font-weight-400);
   border-radius: var(--border-radius-200);
@@ -17,8 +17,8 @@
 
   &.pill {
     border-radius: 100px;
-    padding-left: 0.75em;
-    padding-right: 0.75em;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 
   &[aria-pressed="true"],
diff --git a/polaris.shopify.com/src/components/ComponentsNav/ComponentsNav.module.scss b/polaris.shopify.com/src/components/ComponentsNav/ComponentsNav.module.scss
index 47a910388df..65ead0c7769 100644
--- a/polaris.shopify.com/src/components/ComponentsNav/ComponentsNav.module.scss
+++ b/polaris.shopify.com/src/components/ComponentsNav/ComponentsNav.module.scss
@@ -13,12 +13,12 @@
 }
 
 .ComponentsNav {
-  padding: 2em;
+  padding: 2rem;
 
   ul {
     flex: 1;
     display: grid;
-    margin: 0 -1em;
+    margin: 0 -1rem;
     grid-template-columns: repeat(5, 1fr);
 
     @media screen and (max-width: 2400px) {
@@ -41,9 +41,9 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      padding: 1em;
+      padding: 1rem;
       border-radius: var(--border-radius-700);
-      gap: 0.75em;
+      gap: 0.75rem;
       color: inherit;
       transition: background-color 0.05s linear;
 
diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss
index 2deea37aaba..7998212852b 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss
@@ -1,7 +1,7 @@
 .GlobalSearch {
   padding-left: 1rem;
   input {
-    background: #ffffff url(./SearchMajor.svg) no-repeat 1em center;
+    background: #ffffff url(./SearchMajor.svg) no-repeat 1rem center;
     background-size: 16px auto;
 
     &::-webkit-search-decoration,
@@ -17,7 +17,7 @@
   position: absolute;
   z-index: 1;
   border-radius: var(--border-radius-500);
-  width: 30em;
+  width: 30rem;
   animation: search-results-enter 0.3s cubic-bezier(0.25, 1, 0.5, 1) both;
   transform-origin: 0 0;
   overflow: auto;
@@ -26,7 +26,7 @@
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.025), 0 0 20px rgba(0, 0, 0, 0.025),
     0 50px 100px rgba(0, 0, 0, 0.1);
   background: #ffffff;
-  padding: 1.75rem 0.5em 1.25rem;
+  padding: 1.75rem 0.5rem 1.25rem;
 
   &:empty {
     display: none;
@@ -72,7 +72,7 @@
 
 .Excerpt {
   margin: 0;
-  font-size: 0.8em;
+  font-size: 0.8rem;
   display: flex;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
diff --git a/polaris.shopify.com/src/components/IconGallery/IconGallery.module.scss b/polaris.shopify.com/src/components/IconGallery/IconGallery.module.scss
index 69da8e0085f..21ea3696e8b 100644
--- a/polaris.shopify.com/src/components/IconGallery/IconGallery.module.scss
+++ b/polaris.shopify.com/src/components/IconGallery/IconGallery.module.scss
@@ -3,7 +3,7 @@
 }
 
 .Filter {
-  padding: 2em;
+  padding: 2rem;
 
   .TextField {
     margin-top: 1.75rem;
@@ -22,7 +22,7 @@
 .IconGrid {
   display: grid;
   margin-top: 20px;
-  margin-bottom: 3em;
+  margin-bottom: 3rem;
   flex: 1;
   gap: 2px;
   padding: 0 0 0 2px;
@@ -35,6 +35,7 @@
   at any resolution.
   */
   grid-template-columns: repeat(9, 1fr);
+
   @media screen and (max-width: 2400px) {
     grid-template-columns: repeat(8, 1fr);
   }
@@ -89,7 +90,7 @@
 .Preview {
   display: flex;
   justify-content: center;
-  padding: 3em 0;
+  padding: 3rem 0;
   animation: icon-in 0.25s 0.05s ease both;
 }
 
@@ -97,7 +98,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-bottom: 3em;
+  padding-bottom: 3rem;
 
   p {
     max-width: 60%;
@@ -106,24 +107,24 @@
 }
 
 .Sidebar {
-  width: 28em;
+  width: 28rem;
   animation: sidebar-enter 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
 .SidebarInner {
   animation: sidebar-inner-enter 0.3s 0.3s linear both;
-  padding: 2em;
+  padding: 2rem;
 }
 
 .Tabs {
   display: flex;
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
   box-shadow: inset 0 -1px #dddddd;
 }
 
 .Tab {
   position: relative;
-  padding: 1.25em 1em;
+  padding: 1.25rem 1rem;
   flex: 1;
   cursor: pointer;
   background: transparent;
@@ -157,7 +158,7 @@
   }
 
   100% {
-    width: 28em;
+    width: 28rem;
   }
 }
 
diff --git a/polaris.shopify.com/src/components/Longform/Longform.module.scss b/polaris.shopify.com/src/components/Longform/Longform.module.scss
index a9d170659be..b1afcfc2026 100644
--- a/polaris.shopify.com/src/components/Longform/Longform.module.scss
+++ b/polaris.shopify.com/src/components/Longform/Longform.module.scss
@@ -10,7 +10,7 @@
 
   li {
     list-style-type: disc;
-    margin-left: 1.1em;
+    margin-left: 1.1rem;
   }
 
   h1,
@@ -39,7 +39,7 @@
   }
 
   h4 {
-    margin-top: 1.5em;
+    margin-top: 1.5rem;
   }
 
   hr {
@@ -50,7 +50,7 @@
     font-family: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono",
       Menlo, Consolas, monospace;
     font-size: var(--font-size-300);
-    padding: 1em;
+    padding: 1rem;
     background: var(--text);
     color: var(--surface);
     border-radius: var(--border-radius-200);
diff --git a/polaris.shopify.com/src/components/Nav/Nav.module.scss b/polaris.shopify.com/src/components/Nav/Nav.module.scss
index 7e41eb30c38..324476b1334 100644
--- a/polaris.shopify.com/src/components/Nav/Nav.module.scss
+++ b/polaris.shopify.com/src/components/Nav/Nav.module.scss
@@ -1,8 +1,8 @@
 .Nav {
   flex: 1;
   font-size: var(--font-size-300);
-  padding: 2em;
-  min-width: 16em;
+  padding: 2rem;
+  min-width: 16rem;
   border-right: 1px solid #ededed;
 
   span {
@@ -13,7 +13,7 @@
     position: relative;
     display: inline-block;
     padding: 1px 0;
-    padding-left: 1.2em;
+    padding-left: 1.2rem;
     color: var(--text-subdued);
 
     &:hover {
diff --git a/polaris.shopify.com/src/components/Page/Page.module.scss b/polaris.shopify.com/src/components/Page/Page.module.scss
index fa9335246a2..f11e32e13e7 100644
--- a/polaris.shopify.com/src/components/Page/Page.module.scss
+++ b/polaris.shopify.com/src/components/Page/Page.module.scss
@@ -16,8 +16,8 @@
   align-items: center;
   font-weight: var(--font-weight-500);
   color: inherit;
-  gap: 1em;
-  margin: 1em 1em 1.75em;
+  gap: 1rem;
+  margin: 1rem 1rem 1.75rem;
 
   p {
     margin: 0;
@@ -25,8 +25,8 @@
 }
 
 .HeaderMain {
-  padding: 1em 2em 1em 1em;
-  width: 16em;
+  padding: 1rem 2rem 1rem 1rem;
+  width: 16rem;
   background: #fafafa;
 
   li a {
@@ -34,9 +34,9 @@
     display: flex;
     align-items: center;
     height: 100%;
-    padding: 0.66em 1rem;
+    padding: 0.66rem 1rem;
     color: inherit;
-    gap: 1em;
+    gap: 1rem;
     font-weight: var(--font-weight-500);
   }
 }
@@ -57,6 +57,6 @@
 }
 
 .MainContent {
-  margin: 4em auto;
-  max-width: 42em;
+  margin: 4rem auto;
+  max-width: 42rem;
 }
diff --git a/polaris.shopify.com/src/components/TextField/TextField.module.scss b/polaris.shopify.com/src/components/TextField/TextField.module.scss
index 205aacea4d9..df1a9ee7f81 100644
--- a/polaris.shopify.com/src/components/TextField/TextField.module.scss
+++ b/polaris.shopify.com/src/components/TextField/TextField.module.scss
@@ -3,7 +3,7 @@
   padding: 0.75rem 0.6rem 0.75rem 2.75rem;
   width: 100%;
   border-radius: var(--border-radius-300);
-  background: url(./FilterMajor.svg) no-repeat 1em center;
+  background: url(./FilterMajor.svg) no-repeat 1rem center;
   background-size: 16px auto;
   border: 1px solid #dddddd;
   border-top-color: #aaaaaa;
diff --git a/polaris.shopify.com/src/components/Token/Token.module.scss b/polaris.shopify.com/src/components/Token/Token.module.scss
index bfeaf68974f..15b04fa5ef5 100644
--- a/polaris.shopify.com/src/components/Token/Token.module.scss
+++ b/polaris.shopify.com/src/components/Token/Token.module.scss
@@ -2,8 +2,8 @@
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 1em;
-  margin-bottom: 1em;
+  gap: 1rem;
+  margin-bottom: 1rem;
 
   &:last-child {
     margin-bottom: 0;
@@ -52,7 +52,7 @@
   font-size: var(--font-size-200);
   background: var(--surface-token);
   color: var(--text-token);
-  padding: 0.25em 0.75em;
+  padding: 0.25rem 0.75rem;
   border-radius: var(--border-radius-200);
   text-align: left;
 }
@@ -60,5 +60,5 @@
 .Token .Description {
   margin: 0;
   width: 50%;
-  font-size: 0.8em;
+  font-size: 0.8rem;
 }
diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss
index d1119fe0a38..d77c6ff49a1 100644
--- a/polaris.shopify.com/src/styles/globals.scss
+++ b/polaris.shopify.com/src/styles/globals.scss
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
 
 :root {
-  --nav-width: 18em;
+  --nav-width: 18rem;
   --narrow-content-width: 720px;
   --focus-outline: 0 0 0 2px black;
 
@@ -15,24 +15,24 @@
   --surface-token: #fdf0fd;
   --primary: #008060;
 
-  --font-size-100: 0.75em;
-  --font-size-200: 0.8em;
-  --font-size-300: 0.95em;
-  --font-size-400: 1em;
-  --font-size-500: 1.1em;
-  --font-size-600: 1.2em;
-  --font-size-700: 1.33em;
-  --font-size-800: 2em;
-  --font-size-900: 4em;
-  --font-size-1000: 7em;
+  --font-size-100: 0.75rem;
+  --font-size-200: 0.8rem;
+  --font-size-300: 0.95rem;
+  --font-size-400: 1rem;
+  --font-size-500: 1.1rem;
+  --font-size-600: 1.2rem;
+  --font-size-700: 1.33rem;
+  --font-size-800: 2rem;
+  --font-size-900: 4rem;
+  --font-size-1000: 7rem;
 
   --font-weight-400: 400;
   --font-weight-500: 500;
   --font-weight-600: 600;
 
-  --letter-spacing-100: -0.03em;
-  --letter-spacing-200: -0.02em;
-  --letter-spacing-300: -0.01em;
+  --letter-spacing-100: -0.03rem;
+  --letter-spacing-200: -0.02rem;
+  --letter-spacing-300: -0.01rem;
   --letter-spacing-400: 0;
 
   --border-radius-100: 0;
@@ -89,14 +89,14 @@ h1 {
   font-size: var(--font-size-900);
   font-weight: var(--font-weight-600);
   line-height: 1.1;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.03rem;
 }
 
 h2 {
   font-size: var(--font-size-800);
   font-weight: var(--font-weight-400);
   line-height: 1.2;
-  letter-spacing: -0.0125em;
+  letter-spacing: -0.0125rem;
 }
 
 h3 {
@@ -125,10 +125,10 @@ h4 {
 // Legacy CSS from old site (used in markdown files)
 .usage-list {
   margin: 1.25rem 0;
-  font-size: 0.9em;
+  font-size: 0.9rem;
   display: flex;
   flex-direction: column;
-  gap: 1em;
+  gap: 1rem;
 
   .usage-list-part {
     flex: 1;
@@ -141,7 +141,7 @@ h4 {
     }
 
     p {
-      margin-top: 0.5em;
+      margin-top: 0.5rem;
     }
   }