fix: resolve calculated color modifier values [348]

Author: Dario Soller

src/checkAndEvaluateMath.ts

@@ -75,7 +75,10 @@ function splitMultiIntoSingleValues(expr: string): string[] {
   return [expr];
 }
 
-function parseAndReduce(expr: string, fractionDigits = defaultFractionDigits): string | number {
+export function parseAndReduce(
+  expr: string,
+  fractionDigits = defaultFractionDigits,
+): string | number {
   let result: string | number = expr;
 
   // Check if expression is already a number

src/color-modifiers/modifyColor.ts

@@ -4,6 +4,7 @@ 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';
 
 // Users using UIColor swift format are blocked from using such transform in
 // combination with this color modify transform when using references.
@@ -39,24 +40,25 @@ export function modifyColor(
 
   const color = new Color(baseColor);
   let returnedColor = color;
+  const modifyValueResolvedCalc = Number(parseAndReduce(modifier.value, 4));
   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),
         );
         break;
       case 'alpha': {
-        returnedColor = transparentize(color, Number(modifier.value));
+        returnedColor = transparentize(color, modifyValueResolvedCalc);
         break;
       }
       default:
@@ -75,11 +77,7 @@ export function modifyColor(
       }
     }
 
-    return returnedColor.toString({
-      inGamut: true,
-      precision: 3,
-      format: modifier.format,
-    });
+    return returnedColor.toString({ inGamut: true, precision: 3, format: modifier.format });
   } catch (e) {
     return baseColor;
   }