From 26bcaa7edcad8a6b8386200bc4db6c766442e1c0 Mon Sep 17 00:00:00 2001
From: Alan B Smith <a.bax.smith@gmail.com>
Date: Wed, 27 Sep 2023 13:12:00 -0600
Subject: [PATCH] fix(web): Fix letter-spacing transformer (#25)

Updates the letter-spacing transformer to use `rem` instead of `em`.

[category:Web Infrastructure]
---
 packages/canvas-tokens/build.ts                      | 2 +-
 packages/canvas-tokens/utils/spec/transforms.spec.ts | 6 +++---
 packages/canvas-tokens/utils/transformers/index.ts   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/canvas-tokens/build.ts b/packages/canvas-tokens/build.ts
index 66acf85..d4707ab 100644
--- a/packages/canvas-tokens/build.ts
+++ b/packages/canvas-tokens/build.ts
@@ -115,7 +115,7 @@ StyleDictionary.registerTransformGroup({
     'value/hex-to-rgba',
     'value/wrapped-font-family',
     'value/math',
-    'value/spacing-em',
+    'value/spacing-rem',
     'value/flatten-rgba',
   ],
 });
diff --git a/packages/canvas-tokens/utils/spec/transforms.spec.ts b/packages/canvas-tokens/utils/spec/transforms.spec.ts
index bdd185f..d9854c3 100644
--- a/packages/canvas-tokens/utils/spec/transforms.spec.ts
+++ b/packages/canvas-tokens/utils/spec/transforms.spec.ts
@@ -69,12 +69,12 @@ describe('transforms', () => {
     expect(result).toBe(expected);
   });
 
-  it('should add em to letter spacing values', () => {
-    const result = transforms['value/spacing-em'].transformer(
+  it('should convert letter spacing values from px to rem', () => {
+    const result = transforms['value/spacing-rem'].transformer(
       {...defaultToken, value: '0.4'},
       defaultOptions
     );
-    const expected = '0.4em';
+    const expected = '0.025rem';
 
     expect(result).toBe(expected);
   });
diff --git a/packages/canvas-tokens/utils/transformers/index.ts b/packages/canvas-tokens/utils/transformers/index.ts
index 894e166..9d5b4ef 100644
--- a/packages/canvas-tokens/utils/transformers/index.ts
+++ b/packages/canvas-tokens/utils/transformers/index.ts
@@ -42,11 +42,11 @@ export const transforms: Record<string, Transform> = {
     transformer: ({value}) => `"${value}"`,
   },
   // transform function that adds em to letter spacing values
-  'value/spacing-em': {
+  'value/spacing-rem': {
     type: 'value',
     transitive: true,
     matcher: filter.isLetterSpacing,
-    transformer: ({value}) => `${value}em`,
+    transformer: ({value}) => `${value / 16}rem`,
   },
   // transform function that changes any border object value to its single line string
   'value/flatten-border': {