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

@@ -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',
   ],
 });

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);
   });

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': {