From 7617f9d916e42b76cc588a849b07a92b0387690b Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@gmail.com>
Date: Wed, 27 Mar 2024 12:29:15 +0100
Subject: [PATCH] fix: pass colorspace to color modifier mix utility (#272)

---
 .changeset/eight-owls-complain.md                      |  5 +++++
 src/color-modifiers/mix.ts                             | 10 ++++++++--
 src/color-modifiers/modifyColor.ts                     |  7 ++++++-
 .../color-modifiers/transformColorModifiers.spec.ts    |  8 +++-----
 4 files changed, 22 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/eight-owls-complain.md

diff --git a/.changeset/eight-owls-complain.md b/.changeset/eight-owls-complain.md
new file mode 100644
index 0000000..5f71cb0
--- /dev/null
+++ b/.changeset/eight-owls-complain.md
@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Pass colorspace to mix modifier, to use the correct color space to mix in.
diff --git a/src/color-modifiers/mix.ts b/src/color-modifiers/mix.ts
index 209a656..15f08fd 100644
--- a/src/color-modifiers/mix.ts
+++ b/src/color-modifiers/mix.ts
@@ -1,7 +1,13 @@
 import Color from 'colorjs.io';
+import { ColorSpaceTypes } from '@tokens-studio/types';
 
-export function mix(color: Color, amount: number, mixColor: Color): Color {
+export function mix(
+  color: Color,
+  colorSpace: ColorSpaceTypes,
+  amount: number,
+  mixColor: Color,
+): Color {
   const mixValue = Math.max(0, Math.min(1, Number(amount)));
 
-  return new Color(color.mix(mixColor, mixValue).toString());
+  return new Color(color.mix(mixColor, mixValue, { space: colorSpace }).toString());
 }
diff --git a/src/color-modifiers/modifyColor.ts b/src/color-modifiers/modifyColor.ts
index 4a1cdd3..f78d52f 100644
--- a/src/color-modifiers/modifyColor.ts
+++ b/src/color-modifiers/modifyColor.ts
@@ -48,7 +48,12 @@ export function modifyColor(
         returnedColor = darken(color, modifier.space, Number(modifier.value));
         break;
       case 'mix':
-        returnedColor = mix(color, Number(modifier.value), new Color(modifier.color));
+        returnedColor = mix(
+          color,
+          modifier.space,
+          Number(modifier.value),
+          new Color(modifier.color),
+        );
         break;
       case 'alpha': {
         returnedColor = transparentize(color, Number(modifier.value));
diff --git a/test/spec/color-modifiers/transformColorModifiers.spec.ts b/test/spec/color-modifiers/transformColorModifiers.spec.ts
index 2779f47..9127e1d 100644
--- a/test/spec/color-modifiers/transformColorModifiers.spec.ts
+++ b/test/spec/color-modifiers/transformColorModifiers.spec.ts
@@ -96,14 +96,12 @@ describe('transform color modifiers', () => {
       });
 
       // mix black with white, should give a grey
-      expect(transformColorModifiers(token(ColorSpaceTypes.HSL))).to.equal('hsl(91.8 0% 46.6%)');
+      expect(transformColorModifiers(token(ColorSpaceTypes.HSL))).to.equal('hsl(0 0% 50%)');
       expect(transformColorModifiers(token(ColorSpaceTypes.LCH))).to.equal('lch(50 0 0)');
       expect(transformColorModifiers(token(ColorSpaceTypes.P3))).to.equal(
-        'color(display-p3 0.47 0.47 0.47)',
-      );
-      expect(transformColorModifiers(token(ColorSpaceTypes.SRGB))).to.equal(
-        'rgb(46.6% 46.6% 46.6%)',
+        'color(display-p3 0.5 0.5 0.5)',
       );
+      expect(transformColorModifiers(token(ColorSpaceTypes.SRGB))).to.equal('rgb(50% 50% 50%)');
       // without space, return original
       expect(transformColorModifiers(token(''))).to.equal('#000000');
     });