From 41e7dbc578ddfe478b9ffa01bdabe9d1531a8bca Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Wed, 8 Dec 2021 14:43:56 -0500
Subject: [PATCH 1/2] Use rems in tokens

---
 .vscode/settings.json   |  5 ++++-
 src/tokens/_shape.ts    | 13 +++++++------
 src/tokens/_spacing.ts  | 33 +++++++++++++++++----------------
 src/tokens/utilities.ts |  4 ++++
 4 files changed, 32 insertions(+), 23 deletions(-)
 create mode 100644 src/tokens/utilities.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a567f5e5b46..cd014a5313d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -23,5 +23,8 @@
     "{build,build-internal}/": true,
     "examples/*/build": true
   },
-  "typescript.tsdk": "./node_modules/typescript/lib"
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "[typescript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }
diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts
index 4608a35d8dd..273c3ff55ec 100644
--- a/src/tokens/_shape.ts
+++ b/src/tokens/_shape.ts
@@ -1,11 +1,12 @@
 import type {TokenGroup} from './tokens';
+import {rem} from './utilities';
 
 export const shape: TokenGroup = {
-  'border-radius-05': '2px',
-  'border-radius-1': '4px',
-  'border-radius-2': '8px',
-  'border-radius-3': '12px',
-  'border-radius-4': '16px',
-  'border-radius-5': '20px',
+  'border-radius-05': rem('2px'),
+  'border-radius-1': rem('4px'),
+  'border-radius-2': rem('8px'),
+  'border-radius-3': rem('12px'),
+  'border-radius-4': rem('16px'),
+  'border-radius-5': rem('20px'),
   'border-radius-6': '50%',
 };
diff --git a/src/tokens/_spacing.ts b/src/tokens/_spacing.ts
index 13426cab962..c9fca077cc1 100644
--- a/src/tokens/_spacing.ts
+++ b/src/tokens/_spacing.ts
@@ -1,21 +1,22 @@
 import type {TokenGroup} from './tokens';
+import {rem} from './utilities';
 
 export const spacing: TokenGroup = {
   'space-0': '0',
-  'space-025': '1px',
-  'space-05': '2px',
-  'space-1': '4px',
-  'space-2': '8px',
-  'space-3': '12px',
-  'space-4': '16px',
-  'space-5': '20px',
-  'space-6': '24px',
-  'space-8': '32px',
-  'space-10': '40px',
-  'space-12': '48px',
-  'space-16': '64px',
-  'space-20': '80px',
-  'space-24': '96px',
-  'space-28': '112px',
-  'space-32': '128px',
+  'space-025': rem('1px'),
+  'space-05': rem('2px'),
+  'space-1': rem('4px'),
+  'space-2': rem('8px'),
+  'space-3': rem('12px'),
+  'space-4': rem('16px'),
+  'space-5': rem('20px'),
+  'space-6': rem('24px'),
+  'space-8': rem('32px'),
+  'space-10': rem('40px'),
+  'space-12': rem('48px'),
+  'space-16': rem('64px'),
+  'space-20': rem('80px'),
+  'space-24': rem('96px'),
+  'space-28': rem('112px'),
+  'space-32': rem('128px'),
 };
diff --git a/src/tokens/utilities.ts b/src/tokens/utilities.ts
new file mode 100644
index 00000000000..fc57cfa6272
--- /dev/null
+++ b/src/tokens/utilities.ts
@@ -0,0 +1,4 @@
+export function rem(px: string) {
+  const baseFontSize = 16;
+  return `${parseInt(px, 10) / baseFontSize}rem`;
+}

From c874db21187052790ff3dc20addb23f44d6a032a Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Wed, 8 Dec 2021 14:46:57 -0500
Subject: [PATCH 2/2] revert settings.json change

---
 .vscode/settings.json   | 5 +----
 src/tokens/utilities.ts | 5 +++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index cd014a5313d..a567f5e5b46 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -23,8 +23,5 @@
     "{build,build-internal}/": true,
     "examples/*/build": true
   },
-  "typescript.tsdk": "./node_modules/typescript/lib",
-  "[typescript]": {
-    "editor.defaultFormatter": "vscode.typescript-language-features"
-  }
+  "typescript.tsdk": "./node_modules/typescript/lib"
 }
diff --git a/src/tokens/utilities.ts b/src/tokens/utilities.ts
index fc57cfa6272..71fc8bdb971 100644
--- a/src/tokens/utilities.ts
+++ b/src/tokens/utilities.ts
@@ -1,4 +1,5 @@
+const BASE_FONT_SIZE = 16;
+
 export function rem(px: string) {
-  const baseFontSize = 16;
-  return `${parseInt(px, 10) / baseFontSize}rem`;
+  return `${parseInt(px, 10) / BASE_FONT_SIZE}rem`;
 }