Merge pull request #38 from lukasoppermann/fix-for-transparent-color

Converting named color transparent correctly

__tests__/transformer/color-to-hex.test.ts

@@ -35,4 +35,13 @@ describe('Transformer: colorToHex', () => {
       "#34343466"
     ]);
   })
+
+  it('transforms `named colors` and `transparent` to hex value', () => {
+    const input = [{ value: 'purple' }, { value: 'transparent' }]
+    const expectedOutput = [
+      "#800080",
+      "#00000000",
+    ]
+    expect(input.map(item => colorToHex.transformer(item as StyleDictionary.TransformedToken, {}))).toStrictEqual(expectedOutput)
+  })
 })

__tests__/transformer/color-to-rgb.test.ts

@@ -35,4 +35,13 @@ describe('Transformer: colorToHex', () => {
       "rgba(52, 52, 52, 0.4)"
     ]);
   })
+
+  it('transforms `named colors` and `transparent` to rgb value', () => {
+    const input = [{ value: 'purple' }, { value: 'transparent' }]
+    const expectedOutput = [
+      "rgba(128, 0, 128, 1)",
+      "rgba(0, 0, 0, 0)",
+    ]
+    expect(input.map(item => colorToRgba.transformer(item as StyleDictionary.TransformedToken, {}))).toStrictEqual(expectedOutput)
+  })
 })

__tests__/transformer/color-to-rgba-float.test.ts

@@ -118,4 +118,23 @@ describe('Transformer: colorToRgbaFloat', () => {
     ]
     expect(input.map(item => colorToRgbaFloat.transformer(item as StyleDictionary.TransformedToken, {}))).toStrictEqual(expectedOutput)
   })
+
+  it('transforms `named colors` and `transparent` to rgb float value', () => {
+    const input = [{ value: 'purple' }, { value: 'transparent' }]
+    const expectedOutput = [
+      {
+        r: 0.5019607843137255,
+        g: 0,
+        b: 0.5019607843137255,
+        a: 1,
+      },
+      {
+        r: 0,
+        g: 0,
+        b: 0,
+        a: 0,
+      },
+    ]
+    expect(input.map(item => colorToRgbaFloat.transformer(item as StyleDictionary.TransformedToken, {}))).toStrictEqual(expectedOutput)
+  })
 })

src/transformer/color-to-rgba-float.ts

@@ -6,13 +6,13 @@ const toRgbaFloat = (color: string, alpha?: number) => {
   // get hex value from color string
   const hex = toHex(color)
   // retrieve spots from hex value (hex 3, hex 6 or hex 8)
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex) ?? ['00', '00', '00']
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex) ?? ['00', '00', '00', 'ff']
   // return parsed rgba float object using alpha value from token, from hex code or defaults to 1
   return {
     r: parseInt(result[1], 16) / 255,
     g: parseInt(result[2], 16) / 255,
     b: parseInt(result[3], 16) / 255,
-    a: alpha !== undefined ? alpha : parseInt(result[4], 16) / 255 || 1,
+    a: alpha ?? (result[4] !== undefined ? parseInt(result[4], 16) / 255 : 1),
   }
 }
 // sum up the values of all values in an array