Figma mix

src/transformers/colorToRgbaFloat.test.ts

@@ -82,6 +82,42 @@ describe('Transformer: colorToRgbaFloat', () => {
     ])
   })
 
+  it('transforms `color` tokens including mix', () => {
+    expect(
+      [
+        getMockToken({value: '#343434', mix: {color: '#000000', weight: 0.5}}),
+        getMockToken({value: '#34343466', mix: {color: '#000000'}}),
+        getMockToken({value: 'rgb(100,200,255)', mix: {weight: 0.5}}),
+        getMockToken({value: 'rgba(100,200,255,0.8)', mix: {color: undefined, weight: undefined}}),
+      ].map(item => colorToRgbaFloat.transformer(item, {})),
+    ).toStrictEqual([
+      {
+        b: 0.10196078431372549,
+        g: 0.10196078431372549,
+        r: 0.10196078431372549,
+        a: 1,
+      },
+      {
+        b: 0.050980392156862744,
+        g: 0.050980392156862744,
+        r: 0.050980392156862744,
+        a: 0.4,
+      },
+      {
+        r: 0.39215686274509803,
+        g: 0.7843137254901961,
+        b: 1,
+        a: 1,
+      },
+      {
+        r: 0.39215686274509803,
+        g: 0.7843137254901961,
+        b: 1,
+        a: 0.8,
+      },
+    ])
+  })
+
   it('it forwards `rgb float` values', () => {
     const input = [
       getMockToken({

src/transformers/colorToRgbaFloat.ts

@@ -1,11 +1,12 @@
-import {toHex} from 'color2k'
+import {mix, toHex} from 'color2k'
 import {isColor} from '~/src/filters'
 import type StyleDictionary from 'style-dictionary'
 import {getTokenValue} from './utilities/getTokenValue'
 
-const toRgbaFloat = (color: string, alpha?: number) => {
+const toRgbaFloat = (token: StyleDictionary.TransformedToken, alpha?: number) => {
   // get hex value from color string
-  const hex = toHex(color)
+  // const hex = toHex(color)
+  const hex = toHex(mix(getTokenValue(token), token.mix?.color || getTokenValue(token), token.mix?.weight || 0))
   // 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']
   // return parsed rgba float object using alpha value from token, from hex code or defaults to 1
@@ -47,6 +48,6 @@ export const colorToRgbaFloat: StyleDictionary.Transform = {
     // skip if value is already rgb float
     if (isRgbaFloat(token.value)) return token.value
     // convert hex or rgb values to rgba float
-    return toRgbaFloat(getTokenValue(token), token.alpha)
+    return toRgbaFloat(token, token.alpha)
   },
 }