From cd14bcf1f6c05f2b0eb1f519bda9c00f04d83bc1 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 21 Jul 2023 13:14:46 +0200
Subject: [PATCH 1/2] add mix to float colors

---
 src/transformers/colorToRgbaFloat.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/transformers/colorToRgbaFloat.ts b/src/transformers/colorToRgbaFloat.ts
index 9750f6501..b9121a267 100644
--- a/src/transformers/colorToRgbaFloat.ts
+++ b/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)
   },
 }

From 4d92fb504e4eb247d5be02911023782e20c88bef Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Fri, 21 Jul 2023 13:18:33 +0200
Subject: [PATCH 2/2] add test for mix

---
 src/transformers/colorToRgbaFloat.test.ts | 36 +++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/transformers/colorToRgbaFloat.test.ts b/src/transformers/colorToRgbaFloat.test.ts
index 85f1a60c7..b6f8957cc 100644
--- a/src/transformers/colorToRgbaFloat.test.ts
+++ b/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({