From 76bb212d932621a0058925dd92d2091d48902ff8 Mon Sep 17 00:00:00 2001
From: RayRedGoose <RayRedGoose@users.noreply.github.com>
Date: Mon, 1 Apr 2024 14:53:09 -0600
Subject: [PATCH] chore: Add transform to handle opacity as percentage

---
 packages/canvas-tokens/utils/filters/index.ts        |  5 +++++
 packages/canvas-tokens/utils/spec/transforms.spec.ts | 10 ++++++++++
 packages/canvas-tokens/utils/transformers/index.ts   |  6 ++++++
 3 files changed, 21 insertions(+)

diff --git a/packages/canvas-tokens/utils/filters/index.ts b/packages/canvas-tokens/utils/filters/index.ts
index 7ad8fd9..7859789 100644
--- a/packages/canvas-tokens/utils/filters/index.ts
+++ b/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;
+};
diff --git a/packages/canvas-tokens/utils/spec/transforms.spec.ts b/packages/canvas-tokens/utils/spec/transforms.spec.ts
index f233638..2ac521e 100644
--- a/packages/canvas-tokens/utils/spec/transforms.spec.ts
+++ b/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);
+  });
 });
diff --git a/packages/canvas-tokens/utils/transformers/index.ts b/packages/canvas-tokens/utils/transformers/index.ts
index 9d5b4ef..5747462 100644
--- a/packages/canvas-tokens/utils/transformers/index.ts
+++ b/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',