chore: Add transform to handle opacity as percentage

packages/canvas-tokens/utils/filters/index.ts

@@ -39,3 +39,8 @@ export const isComposite: Matcher = ({type}) => {
 export const isNotComposite: Matcher = token => {
   return !isComposite(token);
 };
+
+export const isBaseOpacity: Matcher = token => {
+  const [level, category] = token.path;
+  return level === 'base' && category === 'opacity' && parseFloat(token.value) > 1;
+};

packages/canvas-tokens/utils/spec/transforms.spec.ts

@@ -225,4 +225,14 @@ describe('transforms', () => {
 
     expect(result).toBe(expected);
   });
+
+  it('should convert opacity to number below 1', () => {
+    const result = transforms['value/opacity'].transformer(
+      {...defaultToken, value: '40'},
+      defaultOptions
+    );
+    const expected = '0.4';
+
+    expect(result).toBe(expected);
+  });
 });

packages/canvas-tokens/utils/transformers/index.ts

@@ -28,6 +28,12 @@ export const transforms: Record<string, Transform> = {
     matcher: filter.isSysColor,
     transformer: flatRGBAColor,
   },
+  'value/opacity': {
+    type: 'value',
+    transitive: true,
+    matcher: filter.isBaseOpacity,
+    transformer: ({value}) => `${value / 100}`,
+  },
   // transform function that changes a value to its CSS var name
   'value/variables': {
     type: 'value',