fix: ts/color/css/hexrgba to apply to all color type tokens

tokens-studio · Jul 8, 2023 · 6a6a5d2 · 6a6a5d2
1 parent 1243f97
commit 6a6a5d2
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/.changeset/warm-walls-end.md b/.changeset/warm-walls-end.md
@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+ts/color/css/hexrgba to correctly apply on all color typed tokens, including those containing references.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/registerTransforms.ts b/src/registerTransforms.ts
@@ -177,7 +177,7 @@ export async function registerTransforms(sd: Core, transformOpts?: TransformOpti
     name: 'ts/color/css/hexrgba',
     type: 'value',
     transitive: true,
-    matcher: token => typeof token.value === 'string' && token.value.startsWith('rgba(#'),
+    matcher: token => typeof token.value === 'string' && token.type === 'color',
     transformer: token => transformHEXRGBaForCSS(token.value),
   });
 

diff --git a/test/integration/sd-transforms.test.ts b/test/integration/sd-transforms.test.ts
@@ -43,6 +43,7 @@ describe('sd-transforms smoke tests', () => {
 
   it('supports tokens-studio tokens', async () => {
     const file = await promises.readFile(outputFilePath, 'utf-8');
+    console.log(file);
     expect(file).to.include(`:root {
   --sdDimensionScale: 2;
   --sdDimensionXs: 4px;
@@ -76,6 +77,8 @@ describe('sd-transforms smoke tests', () => {
   --sdShadow: inset 0 4px 10px 0 rgba(0,0,0,0.4);
   --sdBorderWidth: 5px;
   --sdBorder: 5px solid #000000;
+  --sdColor: #FF00FF;
+  --sdUsesColor: rgba(255, 0, 255, 1);
 }`);
   });
 });
diff --git a/test/integration/tokens/sd-transforms.tokens.json b/test/integration/tokens/sd-transforms.tokens.json
@@ -179,5 +179,13 @@
       "color": "#000000"
     },
     "type": "border"
+  },
+  "color": {
+    "value": "#FF00FF",
+    "type": "color"
+  },
+  "usesColor": {
+    "value": "rgba( {color}, 1)",
+    "type": "color"
   }
 }