Fix/348 modify mix value calculations

package.json

@@ -27,7 +27,7 @@
     "prepare": "husky install",
     "release": "npm run build && changeset publish",
     "test": "npm run test:unit && npm run test:integration",
-    "test:integration": "ts-mocha -n loader=ts-node/esm -p tsconfig.json test/**/*.test.ts",
+    "test:integration": "vitest run",
     "test:unit": "web-test-runner --coverage",
     "test:unit:coverage": "cd coverage/lcov-report && npx http-server -o -c-1",
     "test:unit:watch": "web-test-runner --watch"
@@ -36,7 +36,7 @@
     "@bundled-es-modules/deepmerge": "^4.3.1",
     "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6",
     "@tokens-studio/types": "^0.5.1",
-    "colorjs.io": "^0.4.3",
+    "colorjs.io": "^0.5.2",
     "expr-eval-fork": "^2.0.2",
     "is-mergeable-object": "^1.1.1"
   },
@@ -66,9 +66,8 @@
     "prettier-package-json": "^2.8.0",
     "rimraf": "^6.0.1",
     "tinycolor2": "^1.6.0",
-    "ts-mocha": "^10.0.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.5.2"
+    "typescript": "^5.8.2",
+    "vitest": "^3.0.9"
   },
   "keywords": [
     "design tokens",

src/TransformOptions.ts

@@ -2,6 +2,8 @@ export type ColorModifierFormat = 'hex' | 'hsl' | 'lch' | 'p3' | 'srgb';
 
 export interface ColorModifierOptions {
   format: ColorModifierFormat;
+  mathFractionDigits?: number;
+  precision?: number;
 }
 
 export interface TransformOptions {

src/checkAndEvaluateMath.ts

@@ -1,10 +1,9 @@
 import { DesignToken } from 'style-dictionary/types';
 import { Parser } from 'expr-eval-fork';
 import { parse, reduceExpression } from '@bundled-es-modules/postcss-calc-ast-parser';
+import { defaultFractionDigits } from './utils/constants.js';
 
-const defaultFractionDigits = 4;
 const mathChars = ['+', '-', '*', '/'];
-
 const parser = new Parser();
 
 function checkIfInsideGroup(expr: string, fullExpr: string): boolean {
@@ -75,7 +74,7 @@ function splitMultiIntoSingleValues(expr: string): string[] {
   return [expr];
 }
 
-function parseAndReduce(expr: string, fractionDigits = defaultFractionDigits): string | number {
+export function parseAndReduce(expr: string, mathFractionDigits: number): string | number {
   let result: string | number = expr;
 
   // Check if expression is already a number
@@ -146,14 +145,14 @@ function parseAndReduce(expr: string, fractionDigits = defaultFractionDigits): s
   }
 
   // the outer Number() gets rid of insignificant trailing zeros of decimal numbers
-  const reducedToFixed = Number(Number.parseFloat(`${result}`).toFixed(fractionDigits));
+  const reducedToFixed = Number(Number.parseFloat(`${result}`).toFixed(mathFractionDigits));
   result = resultUnit ? `${reducedToFixed}${resultUnit}` : reducedToFixed;
   return result;
 }
 
 export function checkAndEvaluateMath(
   token: DesignToken,
-  fractionDigits?: number,
+  mathFractionDigits = defaultFractionDigits,
 ): DesignToken['value'] {
   const expr = token.$value ?? token.value;
   const type = token.$type ?? token.type;
@@ -167,7 +166,7 @@ export function checkAndEvaluateMath(
       return expr;
     }
     const exprs = splitMultiIntoSingleValues(expr);
-    const reducedExprs = exprs.map(_expr => parseAndReduce(_expr, fractionDigits));
+    const reducedExprs = exprs.map(_expr => parseAndReduce(_expr, mathFractionDigits));
     if (reducedExprs.length === 1) {
       return reducedExprs[0];
     }

src/color-modifiers/darken.ts

@@ -41,7 +41,7 @@ export function darken(color: Color, colorSpace: ColorSpaceTypes, amount: number
     }
 
     default: {
-      return color.darken(amount);
+      return color.darken(amount) as Color;
     }
   }
 }

src/color-modifiers/lighten.ts

@@ -39,7 +39,7 @@ export function lighten(color: Color, colorSpace: ColorSpaceTypes, amount: numbe
       return color;
     }
     default: {
-      return color.lighten(amount);
+      return color.lighten(amount) as Color;
     }
   }
 }

src/color-modifiers/mix.ts

@@ -6,8 +6,9 @@ export function mix(
   colorSpace: ColorSpaceTypes,
   amount: number,
   mixColor: Color,
+  precision: number,
 ): Color {
   const mixValue = Math.max(0, Math.min(1, Number(amount)));
 
-  return new Color(color.mix(mixColor, mixValue, { space: colorSpace }).toString());
+  return new Color(color.mix(mixColor, mixValue, { space: colorSpace }).toString({ precision }));
 }

src/color-modifiers/modifyColor.ts

@@ -1,9 +1,11 @@
 import Color from 'colorjs.io';
 import { transparentize } from './transparentize.js';
 import { mix } from './mix.js';
 import { darken } from './darken.js';
 import { lighten } from './lighten.js';
 import { ColorModifier } from '@tokens-studio/types';
+import { parseAndReduce } from '../checkAndEvaluateMath.js';
+import { defaultColorPrecision, defaultFractionDigits } from '../utils/constants.js';
 
 // Users using UIColor swift format are blocked from using such transform in
 // combination with this color modify transform when using references.
@@ -36,27 +38,41 @@
   }
 
   baseColor = parseUIColor(baseColor);
-
   const color = new Color(baseColor);
   let returnedColor = color;
+
+  let resolvedMathFractionDigits: number = defaultFractionDigits;
+  if (modifier?.mathFractionDigits) {
+    resolvedMathFractionDigits = modifier.mathFractionDigits;
+  }
+  const modifyValueResolvedCalc = Number(
+    parseAndReduce(modifier.value, resolvedMathFractionDigits),
+  );
+
+  let resolvedColorPrecision: number = defaultColorPrecision;
+  if (modifier?.precision) {
+    resolvedColorPrecision = modifier.precision;
+  }
+
   try {
     switch (modifier.type) {
       case 'lighten':
-        returnedColor = lighten(color, modifier.space, Number(modifier.value));
+        returnedColor = lighten(color, modifier.space, modifyValueResolvedCalc);
         break;
       case 'darken':
-        returnedColor = darken(color, modifier.space, Number(modifier.value));
+        returnedColor = darken(color, modifier.space, modifyValueResolvedCalc);
         break;
       case 'mix':
         returnedColor = mix(
           color,
           modifier.space,
-          Number(modifier.value),
+          modifyValueResolvedCalc,
           new Color(modifier.color),
+          resolvedColorPrecision,
         );
         break;
       case 'alpha': {
-        returnedColor = transparentize(color, Number(modifier.value));
+        returnedColor = transparentize(color, modifyValueResolvedCalc);
         break;
       }
       default:
@@ -77,7 +93,7 @@
 
     return returnedColor.toString({
       inGamut: true,
-      precision: 3,
+      precision: modifier.precision,
       format: modifier.format,
     });
   } catch (e) {

src/color-modifiers/transformColorModifiers.ts

@@ -1,8 +1,10 @@
 import type { DesignToken } from 'style-dictionary/types';
 import { usesReferences } from 'style-dictionary/utils';
 import { modifyColor } from './modifyColor.js';
 import { ColorModifier } from '@tokens-studio/types';
 import { ColorModifierOptions } from '../TransformOptions.js';
+import { defaultFractionDigits, defaultColorPrecision } from '../utils/constants.js';
+
 /**
  * Helper: Transforms color tokens with tokens studio color modifiers
  */
@@ -22,5 +24,11 @@
   if (options?.format) {
     modifier.format = options.format;
   }
+  if (!modifier.mathFractionDigits) {
+    modifier.mathFractionDigits = options?.mathFractionDigits ?? defaultFractionDigits;
+  }
+  if (!modifier.precision) {
+    modifier.precision = options?.precision ?? defaultColorPrecision;
+  }
   return modifyColor(token.$value ?? token.value, modifier);
 }

src/register.ts

@@ -1,5 +1,5 @@
 import type { PreprocessedTokens } from 'style-dictionary/types';
-import StyleDictionary from 'style-dictionary';
+import StyleDictionary, { PlatformConfig } from 'style-dictionary';
 import { transformDimension } from './transformDimension.js';
 import { transformHEXRGBaForCSS } from './css/transformHEXRGBa.js';
 import { transformFontWeight } from './transformFontWeight.js';
@@ -9,10 +9,11 @@ import { transformTypographyForCompose } from './compose/transformTypography.js'
 import { checkAndEvaluateMath } from './checkAndEvaluateMath.js';
 import { mapDescriptionToComment } from './mapDescriptionToComment.js';
 import { transformColorModifiers } from './color-modifiers/transformColorModifiers.js';
-import { TransformOptions } from './TransformOptions.js';
+import { ColorModifierOptions, TransformOptions } from './TransformOptions.js';
 import { transformOpacity } from './transformOpacity.js';
 import { parseTokens } from './preprocessors/parse-tokens.js';
 import { transformShadow } from './css/transformShadow.js';
+import { defaultFractionDigits } from './utils/constants.js';
 
 export const getTransforms = (transformOpts?: TransformOptions) => {
   const agnosticTransforms = [
@@ -73,7 +74,8 @@ export async function register(sd: typeof StyleDictionary, transformOpts?: Trans
     type: 'value',
     transitive: true,
     filter: token => ['string', 'object'].includes(typeof (token.$value ?? token.value)),
-    transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits),
+    transform: (token, platformCfg) =>
+      checkAndEvaluateMath(token, platformCfg.mathFractionDigits ?? defaultFractionDigits),
   });
 
   sd.registerTransform({
@@ -171,7 +173,52 @@ export async function register(sd: typeof StyleDictionary, transformOpts?: Trans
       (token.$type ?? token.type) === 'color' &&
       token.$extensions &&
       token.$extensions['studio.tokens']?.modify,
-    transform: token => transformColorModifiers(token, transformOpts?.['ts/color/modifiers']),
+    transform: (token, platformCfg) => {
+      const hasTransformOpts = transformOpts?.['ts/color/modifiers'];
+      const hasPlatformPrecision = platformCfg.precision !== undefined;
+      const hasPlatformMathFractionDigits = platformCfg.mathFractionDigits !== undefined;
+
+      if (hasTransformOpts || hasPlatformPrecision || hasPlatformMathFractionDigits) {
+        const resolveColorModifyTransformOpts = (
+          platformCfg: PlatformConfig,
+          transformOpts?: TransformOptions,
+        ): ColorModifierOptions | undefined => {
+          let resolvedOpts: ColorModifierOptions | undefined;
+
+          if (transformOpts?.['ts/color/modifiers']) {
+            if (transformOpts['ts/color/modifiers']?.precision) {
+              resolvedOpts = resolvedOpts ? resolvedOpts : ({} as ColorModifierOptions);
+              resolvedOpts.precision = transformOpts['ts/color/modifiers']?.precision;
+            }
+
+            if (transformOpts['ts/color/modifiers']?.mathFractionDigits) {
+              resolvedOpts = resolvedOpts ? resolvedOpts : ({} as ColorModifierOptions);
+              resolvedOpts.mathFractionDigits =
+                transformOpts['ts/color/modifiers']?.mathFractionDigits;
+            }
+          }
+
+          if (platformCfg.precision) {
+            resolvedOpts = {} as ColorModifierOptions;
+            resolvedOpts.precision = platformCfg.precision;
+          }
+
+          if (platformCfg.mathFractionDigits) {
+            resolvedOpts = resolvedOpts ? resolvedOpts : ({} as ColorModifierOptions);
+            resolvedOpts.mathFractionDigits = platformCfg.mathFractionDigits;
+          }
+
+          return resolvedOpts;
+        };
+
+        const resolvedColorModifyTransformOpts: ColorModifierOptions | undefined =
+          resolveColorModifyTransformOpts(platformCfg, transformOpts);
+
+        return transformColorModifiers(token, resolvedColorModifyTransformOpts);
+      }
+
+      return transformColorModifiers(token);
+    },
   });
 
   const includeBuiltinGroup = transformOpts?.withSDBuiltins ?? true;

src/utils/constants.ts

@@ -0,0 +1,5 @@
+export const defaultFractionDigits = 4;
+
+// 3 for backwards compatibility, but should better be 5, referring to the default precision (5) of the colorJS.io library
+// see: https://colorjs.io/docs/output.html#getting-a-string-representation-of-a-color
+export const defaultColorPrecision = 3;