Shopify · aveline · Nov 30, 2021 · Nov 30, 2021
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -1,11 +1,11 @@
 @import '../../styles/common';
 
 $min-height: control-height();
-$vertical-padding: ($min-height - line-height(body) - rem(2px)) / 2;
-$slim-min-height: rem(28px);
-$slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2;
-$large-min-height: rem(44px);
-$large-vertical-padding: ($large-min-height - line-height(body) - rem(2px)) / 2;
+$vertical-padding: ($min-height - line-height(body) - 2px) / 2;
+$slim-min-height: 28px;
+$slim-vertical-padding: ($slim-min-height - line-height(body) - 2px) / 2;
+$large-min-height: 44px;
+$large-vertical-padding: ($large-min-height - line-height(body) - 2px) / 2;
 $spinner-size: 20px;
 
 $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent,

diff --git a/src/components/CheckableButton/CheckableButton.scss b/src/components/CheckableButton/CheckableButton.scss
@@ -2,8 +2,7 @@
 
 $button-min-height: control-height();
 
-$button-vertical-padding: ($button-min-height - line-height(body) - rem(2px)) /
-  2;
+$button-vertical-padding: ($button-min-height - line-height(body) - 2px) / 2;
 
 .CheckableButton {
   @include text-style-button;

diff --git a/src/components/DropZone/components/FileUpload/FileUpload.scss b/src/components/DropZone/components/FileUpload/FileUpload.scss
@@ -1,8 +1,8 @@
 @import '../../../../styles/common';
 
 $fileupload-padding: 15px;
-$slim-min-height: rem(30px);
-$slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2;
+$slim-min-height: 30px;
+$slim-vertical-padding: ($slim-min-height - line-height(body) - 2px) / 2;
 
 .FileUpload {
   padding: $fileupload-padding;

diff --git a/src/components/IndexTable/components/Checkbox/Checkbox.scss b/src/components/IndexTable/components/Checkbox/Checkbox.scss
@@ -1,9 +1,9 @@
 @import '../../../../styles/common';
 
-$expanded-height: rem(32px);
-$expanded-width: rem(32px);
-$condensed-height: rem(44px);
-$condensed-width: rem(50px);
+$expanded-height: 32px;
+$expanded-width: 32px;
+$condensed-height: 44px;
+$condensed-width: 50px;
 
 .TableCellContentContainer {
   display: flex;

diff --git a/src/components/Indicator/Indicator.scss b/src/components/Indicator/Indicator.scss
@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
-$size: rem(10px);
-$base-position: rem(-4px);
+$size: 10px;
+$base-position: -4px;
 
 .Indicator {
   &::before,

diff --git a/src/components/KeyboardKey/KeyboardKey.scss b/src/components/KeyboardKey/KeyboardKey.scss
@@ -1,6 +1,6 @@
 @import '../../styles/common';
 
-$key-base-height: rem(24px);
+$key-base-height: 24px;
 
 .KeyboardKey {
   --p-bottom-shadow-size: 2px;
@@ -14,7 +14,7 @@ $key-base-height: rem(24px);
     0 var(--p-bottom-shadow-size) 0 1px var(--p-border-subdued);
   border-radius: var(--p-border-radius-base);
   font-family: font-family();
-  font-size: rem(12px);
+  font-size: 12px;
   font-weight: var(--p-font-weight-medium);
   line-height: $key-base-height;
   color: var(--p-text-subdued);

diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss
@@ -16,8 +16,8 @@ $relative-size: $primary-basis / $secondary-basis;
 
   @media print {
     body & {
-      font-size: rem(11px);
-      line-height: rem(16px);
+      font-size: 11px;
+      line-height: 16px;
     }
 
     a,

diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss
@@ -31,10 +31,10 @@
       position: absolute;
       z-index: -1;
       // this mimics the box model of the plain button backdrop
-      top: rem(-2px);
-      right: rem(-5px);
-      bottom: rem(-2px);
-      left: rem(-5px);
+      top: -2px;
+      right: -5px;
+      bottom: -2px;
+      left: -5px;
       display: block;
 
       border-radius: border-radius();

diff --git a/src/components/Listbox/components/Loading/Loading.scss b/src/components/Listbox/components/Loading/Loading.scss
@@ -1,6 +1,6 @@
 @import '../../../../styles/common';
 
-$item-min-height: rem(40px);
+$item-min-height: 40px;
 
 .ListItem {
   padding: 0;

diff --git a/src/components/MessageIndicator/MessageIndicator.scss b/src/components/MessageIndicator/MessageIndicator.scss
@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
-$indicator-size: rem(12px);
-$indicator-position: rem(-3px);
+$indicator-size: 12px;
+$indicator-position: -3px;
 
 .MessageIndicatorWrapper {
   position: relative;
@@ -16,5 +16,5 @@ $indicator-position: rem(-3px);
   height: $indicator-size;
   border-radius: 100%;
   background-color: var(--p-icon-highlight);
-  border: solid rem(2px) var(--p-background);
+  border: solid 2px var(--p-background);
 }
diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
@@ -1,6 +1,6 @@
 @import '../../styles/common';
 
-$small-width: rem(620px);
+$small-width: 620px;
 
 .BodyWrapper {
   display: flex;

diff --git a/src/components/Modal/components/Dialog/Dialog.scss b/src/components/Modal/components/Dialog/Dialog.scss
@@ -1,13 +1,13 @@
 @import '../../../../styles/common';
 
-$top-offset-slide-in-start: rem(200px);
+$top-offset-slide-in-start: 200px;
 $vertical-spacing: 60px;
 $height-limit: 600px;
-$xsmall-width: rem(380px);
-$small-width: rem(620px);
-$large-width: rem(980px);
+$xsmall-width: 380px;
+$small-width: 620px;
+$large-width: 980px;
 // @TODO simplify media queries so this isn't needed
-$dangerous-magic-space-16: rem(64px);
+$dangerous-magic-space-16: 64px;
 
 .Container {
   position: fixed;

diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
@@ -2,11 +2,11 @@
 @import './variables';
 
 // Base Navigation styles
-$active-indicator-width: rem(3px);
-$nav-max-width: rem(360px);
+$active-indicator-width: 3px;
+$nav-max-width: 360px;
 
 .Navigation {
-  --icon-size: #{rem(20px)};
+  --icon-size: 20px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -56,7 +56,7 @@ $nav-max-width: rem(360px);
   }
 
   @include breakpoint-after(nav-min-window-corrected()) {
-    padding-top: rem(12px);
+    padding-top: 12px;
   }
 }
 
@@ -239,7 +239,7 @@ $disabled-fade: 0.6;
 }
 
 // Secondary styles
-$secondary-item-font-size: rem(15px);
+$secondary-item-font-size: 15px;
 .SecondaryNavigation {
   flex-basis: 100%;
   margin-left: 0;
@@ -282,14 +282,14 @@ $secondary-item-font-size: rem(15px);
 
     @include breakpoint-after(nav-min-window-corrected()) {
       font-size: $item-font-size-small;
-      line-height: rem(28px);
+      line-height: 28px;
     }
   }
 
   .Text {
-    margin-top: rem(6px);
-    margin-bottom: rem(6px);
-    line-height: rem(20px);
+    margin-top: 6px;
+    margin-bottom: 6px;
+    line-height: 20px;
   }
 
   .Item-selected {
@@ -438,8 +438,8 @@ $secondary-item-font-size: rem(15px);
 .Indicator {
   position: relative;
   display: inline-block;
-  height: rem(10px);
-  width: rem(10px);
+  height: 10px;
+  width: 10px;
 }
 
 .SecondaryNavigation-noIcon .Item {

diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss
@@ -1,15 +1,15 @@
-$item-font-size: rem(16px);
-$item-font-size-small: rem(14px);
-$item-line-height-small: rem(32px);
-$item-line-height-large: rem(36px);
-$text-line-height: rem(20px);
+$item-font-size: 16px;
+$item-font-size-small: 14px;
+$item-line-height-small: 32px;
+$item-line-height-large: 36px;
+$text-line-height: 20px;
 $nav-variables: (
-  mobile-spacing: rem(10px),
-  desktop-spacing: rem(6px),
-  mobile-height: rem(40px),
-  desktop-height: rem(32px),
-  icon-size: rem(20px),
-  item-line-height: rem(40px),
+  mobile-spacing: 10px,
+  desktop-spacing: 6px,
+  mobile-height: 40px,
+  desktop-height: 32px,
+  icon-size: 20px,
+  item-line-height: 40px,
 );
 @function nav($variable) {
   @return map-get($nav-variables, $variable);
@@ -152,8 +152,8 @@ $nav-animation-variables: (
   }
 
   @include breakpoint-before(nav-min-window-corrected()) {
-    font-size: rem(15px);
-    line-height: rem(19px);
+    font-size: 15px;
+    line-height: 19px;
   }
 }
 

diff --git a/src/components/OptionList/components/Option/Option.scss b/src/components/OptionList/components/Option/Option.scss
@@ -2,7 +2,7 @@
 @import '../../../../styles/shared/typography';
 
 $min-height: control-height();
-$control-vertical-adjustment: rem(2px);
+$control-vertical-adjustment: 2px;
 
 .Option {
   @include unstyled-button;

diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss
@@ -1,6 +1,6 @@
 @import '../../styles/common';
 
-$navigation-elements-height: rem(36px);
+$navigation-elements-height: 36px;
 $title-height: line-height(display-large, large-screen);
 $stacking-order: (
   title: 10,

diff --git a/src/components/Page/components/Header/Header.scss b/src/components/Page/components/Header/Header.scss
@@ -5,7 +5,7 @@ $button-style-breakpoint: 768px;
 $medium-layout: 860px;
 $desktop-layout: 1080px;
 $individual-action-padding-x: calc(1.5 * var(--p-space-2));
-$action-menu-rollup-computed-width: rem(40px);
+$action-menu-rollup-computed-width: 40px;
 
 .Header {
   @include page-header-layout;

diff --git 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: 24px;
+  line-height: 28px;
 
   @include when-typography-not-condensed {
-    font-size: rem(20px);
+    font-size: 20px;
   }
 }
 

diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss
@@ -1,10 +1,10 @@
 @import '../../styles/common';
 
-$arrow-size: rem(14px);
-$visible-portion-of-arrow: rem(5px);
-$content-max-height: rem(500px);
-$content-max-width: rem(400px);
-$vertical-motion-offset: rem(-5px);
+$arrow-size: 14px;
+$visible-portion-of-arrow: 5px;
+$content-max-height: 500px;
+$content-max-width: 400px;
+$vertical-motion-offset: -5px;
 
 .Popover {
   max-width: calc(100vw - 2 * var(--p-space-4));

diff --git a/src/components/ProgressBar/ProgressBar.scss b/src/components/ProgressBar/ProgressBar.scss
@@ -3,9 +3,9 @@
 @function progress-bar-height($height: base) {
   $base: 16px;
   $data: (
-    small: rem($base / 2),
-    base: rem($base),
-    large: rem($base * 2),
+    small: $base / 2,
+    base: $base,
+    large: $base * 2,
   );
 
   @return map-get($data, $height);

diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss
@@ -70,7 +70,7 @@
       transform var(--p-duration-100) var(--p-ease);
 
     @media (forced-colors: active) {
-      @include high-contrast-border(rem(5px));
+      @include high-contrast-border(5px);
     }
   }
 

diff --git a/src/components/RangeSlider/RangeSlider.scss b/src/components/RangeSlider/RangeSlider.scss
@@ -1,4 +1,4 @@
-$range-track-height: rem(4px);
+$range-track-height: 4px;
 $range-thumb-size: var(--p-range-slider-thumb-size-base);
 
 @mixin track-dashed {

diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -1,9 +1,9 @@
 @import '../../../../styles/common';
 @import '../../RangeSlider';
 
-$range-wrapper: rem(28px);
+$range-wrapper: 28px;
 
-$range-thumb-border-error: rem(2px) solid var(--p-border-critical);
+$range-thumb-border-error: 2px solid var(--p-border-critical);
 
 .Wrapper {
   --pc-input: 10;
@@ -105,8 +105,8 @@ $range-thumb-border-error: rem(2px) solid var(--p-border-critical);
   }
 }
 
-$range-output-size: rem(32px);
-$range-output-spacing: rem(16px);
+$range-output-size: 32px;
+$range-output-spacing: 16px;
 
 .Prefix {
   flex: 0 0 auto;

diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -124,7 +124,7 @@
   &:focus {
     @include range-thumb-selectors {
       border-color: var(--p-surface);
-      box-shadow: 0 0 0 rem(2px) var(--p-focused);
+      box-shadow: 0 0 0 2px var(--p-focused);
     }
 
     @include high-contrast-outline;
@@ -155,12 +155,12 @@
 }
 
 /// Output value indicator
-$range-output-size: rem(32px);
+$range-output-size: 32px;
 $range-output-translate-x: calc(
   -50% + var(--Polaris-RangeSlider-output-factor) * #{$range-thumb-size}
 );
 
-$range-output-spacing: rem(16px);
+$range-output-spacing: 16px;
 
 .Output {
   position: absolute;