fix: pass colorspace to color modifier mix utility (#272)

tokens-studio · Mar 27, 2024 · 7617f9d · 7617f9d
1 parent 03cf7ad
commit 7617f9d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/.changeset/eight-owls-complain.md 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
@@ -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
@@ -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
@@ -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');
     });