Remove js rem function

UNRELEASED.md

@@ -38,6 +38,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Remove filter functions ([#4650](https://github.com/Shopify/polaris-react/pull/4650))
 - Remove all color() invocations ([#4636](https://github.com/Shopify/polaris-react/pull/4636))
 - Cleaned up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635))
+- Removed `rem()` function from `tokens.ts` ([#4695](https://github.com/Shopify/polaris-react/pull/4695))
 
 ### Deprecations
 

src/utilities/theme/tokens.ts

@@ -1,8 +1,8 @@
 export const Tokens = {
   // Border Radiuses
-  borderRadiusSlim: rem('2px'),
-  borderRadiusBase: rem('4px'),
-  borderRadiusWide: rem('8px'),
+  borderRadiusSlim: '0.2rem',
+  borderRadiusBase: '0.4rem',
+  borderRadiusWide: '0.8rem',
   borderRadiusFull: '50%',
 
   // Shadows
@@ -26,38 +26,31 @@ export const Tokens = {
   overrideLoadingZIndex: '514',
   buttonFontWeight: '500',
   nonNullContent: "''",
-  choiceSize: rem('20px'),
-  iconSize: rem('10px'),
-  choiceMargin: rem('1px'),
-  controlBorderWidth: rem('2px'),
+  choiceSize: '2rem',
+  iconSize: '1rem',
+  choiceMargin: '0.1rem',
+  controlBorderWidth: '0.2rem',
   bannerBorderDefault: buildBannerBorder('--p-border-neutral-subdued'),
   bannerBorderSuccess: buildBannerBorder('--p-border-success-subdued'),
   bannerBorderHighlight: buildBannerBorder('--p-border-highlight-subdued'),
   bannerBorderWarning: buildBannerBorder('--p-border-warning-subdued'),
   bannerBorderCritical: buildBannerBorder('--p-border-critical-subdued'),
   badgeMixBlendMode: 'luminosity',
-  thinBorderSubdued: `${rem('1px')} solid var(--p-border-subdued)`,
-  textFieldSpinnerOffset: rem('2px'),
-  textFieldFocusRingOffset: rem('-4px'),
-  textFieldFocusRingBorderRadius: rem('7px'),
-  buttonGroupItemSpacing: rem('-1px'),
+  thinBorderSubdued: '0.1rem solid var(--p-border-subdued)',
+  textFieldSpinnerOffset: '0.2rem',
+  textFieldFocusRingOffset: '-0.4rem',
+  textFieldFocusRingBorderRadius: '0.7rem',
+  buttonGroupItemSpacing: '-0.1rem',
   duration100: '100ms',
   duration150: '150ms',
   easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)',
   ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)',
-  rangeSliderThumbSizeBase: rem('16px'),
-  rangeSliderThumbSizeActive: rem('24px'),
+  rangeSliderThumbSizeBase: '1.6rem',
+  rangeSliderThumbSizeActive: '2.4rem',
   rangeSliderThumbScale: '1.5',
   badgeFontWeight: '400',
 };
 
-function rem(px: string) {
-  const baseFontSize = 10;
-  return `${parseInt(px, 10) / baseFontSize}rem`;
-}
-
 function buildBannerBorder(cssVar: string) {
-  return `inset 0 ${rem('1px')} 0 0 var(${cssVar}), inset 0 0 0 ${rem(
-    '1px',
-  )} var(${cssVar})`;
+  return `inset 0 0.1rem 0 0 var(${cssVar}), inset 0 0 0 0.1rem var(${cssVar})`;
 }