@pandacss/token-dictionary 0.33.0 → 0.34.1

package/dist/index.d.mts

@@ -130,6 +130,15 @@ declare class TokenDictionary {
     filter(pattern: Partial<Token> | ((token: Token) => boolean)): Token[];
     addConditionalTokens(): this;
     expandTokenReferences(): this;
+    colorMix: (value: string, tokenFn: (path: string) => string) => {
+        invalid: boolean;
+        value: string;
+        color?: undefined;
+    } | {
+        invalid: boolean;
+        color: string;
+        value: string;
+    };
     /**
      * Expand token references to their CSS variable
      */

package/dist/index.d.ts

@@ -130,6 +130,15 @@ declare class TokenDictionary {
     filter(pattern: Partial<Token> | ((token: Token) => boolean)): Token[];
     addConditionalTokens(): this;
     expandTokenReferences(): this;
+    colorMix: (value: string, tokenFn: (path: string) => string) => {
+        invalid: boolean;
+        value: string;
+        color?: undefined;
+    } | {
+        invalid: boolean;
+        color: string;
+        value: string;
+    };
     /**
      * Expand token references to their CSS variable
      */

package/dist/index.js

@@ -586,6 +586,25 @@ var transformAssets = {
     return (0, import_ts_pattern2.match)(raw).with(import_ts_pattern2.P.string, (value) => value).with({ type: "url" }, ({ value }) => `url("${value}")`).with({ type: "svg" }, ({ value }) => `url("${svgToDataUri(value)}")`).exhaustive();
   }
 };
+var transformColorMix = {
+  name: "tokens/color-mix",
+  match: (token) => {
+    return token.extensions.category === "colors" && token.value.includes("/");
+  },
+  transform(token, dict) {
+    return expandReferences(token.value, (path) => {
+      const tokenFn = (tokenPath) => {
+        const token2 = dict.getByName(tokenPath);
+        return token2?.extensions.varRef;
+      };
+      const mix = dict.colorMix(path, tokenFn);
+      if (mix.invalid) {
+        throw new Error("Invalid color mix at " + path + ": " + mix.value);
+      }
+      return mix.value;
+    });
+  }
+};
 var addCssVariables = {
   type: "extensions",
   name: "tokens/css-var",
@@ -609,8 +628,23 @@ var addConditionalCssVariables = {
     if (!refs.length)
       return token.value;
     refs.forEach((ref) => {
-      const variable = dictionary.formatCssVar(ref.split("."), { prefix, hash }).ref;
-      token.value = token.value.replace(`{${ref}}`, variable);
+      if (!ref.includes("/")) {
+        const variable = dictionary.formatCssVar(ref.split("."), { prefix, hash }).ref;
+        token.value = token.value.replace(`{${ref}}`, variable);
+        return;
+      }
+      const expanded = expandReferences(token.value, (path) => {
+        const tokenFn = (tokenPath) => {
+          const token2 = dictionary.getByName(tokenPath);
+          return token2?.extensions.varRef;
+        };
+        const mix = dictionary.colorMix(path, tokenFn);
+        if (mix.invalid) {
+          throw new Error("Invalid color mix at " + path + ": " + mix.value);
+        }
+        return mix.value;
+      });
+      token.value = token.value.replace(`{${ref}}`, expanded);
     });
     return token.value;
   }
@@ -668,6 +702,8 @@ var transforms = [
   transformBorders,
   transformAssets,
   addCssVariables,
+  transformColorMix,
+  // depends on `addCssVariables`
   addConditionalCssVariables,
   addColorPalette
 ];
@@ -896,11 +932,40 @@ var TokenDictionary = class {
     });
     return this;
   }
+  colorMix = (value, tokenFn) => {
+    if (!value || typeof value !== "string")
+      return { invalid: true, value };
+    const [colorPath, rawOpacity] = value.split("/");
+    if (!colorPath || !rawOpacity) {
+      return { invalid: true, value: colorPath };
+    }
+    const colorToken = tokenFn(colorPath);
+    const opacityToken = this.getByName(`opacity.${rawOpacity}`)?.value;
+    if (!opacityToken && isNaN(Number(rawOpacity))) {
+      return { invalid: true, value: colorPath };
+    }
+    const percent = opacityToken ? Number(opacityToken) * 100 + "%" : `${rawOpacity}%`;
+    const color = colorToken ?? colorPath;
+    return {
+      invalid: false,
+      color,
+      value: `color-mix(in srgb, ${color} ${percent}, transparent)`
+    };
+  };
   /**
    * Expand token references to their CSS variable
    */
   expandReferenceInValue(value) {
-    return expandReferences(value, (path) => this.view.get(path));
+    return expandReferences(value, (path) => {
+      if (path.includes("/")) {
+        const mix = this.colorMix(path, this.view.get.bind(this.view));
+        if (mix.invalid) {
+          throw new Error("Invalid color mix at " + path + ": " + mix.value);
+        }
+        return mix.value;
+      }
+      return this.view.get(path);
+    });
   }
   /**
    * Resolve token references to their actual raw value

package/dist/index.mjs

@@ -566,6 +566,25 @@ var transformAssets = {
     return match(raw).with(P2.string, (value) => value).with({ type: "url" }, ({ value }) => `url("${value}")`).with({ type: "svg" }, ({ value }) => `url("${svgToDataUri(value)}")`).exhaustive();
   }
 };
+var transformColorMix = {
+  name: "tokens/color-mix",
+  match: (token) => {
+    return token.extensions.category === "colors" && token.value.includes("/");
+  },
+  transform(token, dict) {
+    return expandReferences(token.value, (path) => {
+      const tokenFn = (tokenPath) => {
+        const token2 = dict.getByName(tokenPath);
+        return token2?.extensions.varRef;
+      };
+      const mix = dict.colorMix(path, tokenFn);
+      if (mix.invalid) {
+        throw new Error("Invalid color mix at " + path + ": " + mix.value);
+      }
+      return mix.value;
+    });
+  }
+};
 var addCssVariables = {
   type: "extensions",
   name: "tokens/css-var",
@@ -589,8 +608,23 @@ var addConditionalCssVariables = {
     if (!refs.length)
       return token.value;
     refs.forEach((ref) => {
-      const variable = dictionary.formatCssVar(ref.split("."), { prefix, hash }).ref;
-      token.value = token.value.replace(`{${ref}}`, variable);
+      if (!ref.includes("/")) {
+        const variable = dictionary.formatCssVar(ref.split("."), { prefix, hash }).ref;
+        token.value = token.value.replace(`{${ref}}`, variable);
+        return;
+      }
+      const expanded = expandReferences(token.value, (path) => {
+        const tokenFn = (tokenPath) => {
+          const token2 = dictionary.getByName(tokenPath);
+          return token2?.extensions.varRef;
+        };
+        const mix = dictionary.colorMix(path, tokenFn);
+        if (mix.invalid) {
+          throw new Error("Invalid color mix at " + path + ": " + mix.value);
+        }
+        return mix.value;
+      });
+      token.value = token.value.replace(`{${ref}}`, expanded);
     });
     return token.value;
   }
@@ -648,6 +682,8 @@ var transforms = [
   transformBorders,
   transformAssets,
   addCssVariables,
+  transformColorMix,
+  // depends on `addCssVariables`
   addConditionalCssVariables,
   addColorPalette
 ];
@@ -876,11 +912,40 @@ var TokenDictionary = class {
     });
     return this;
   }
+  colorMix = (value, tokenFn) => {
+    if (!value || typeof value !== "string")
+      return { invalid: true, value };
+    const [colorPath, rawOpacity] = value.split("/");
+    if (!colorPath || !rawOpacity) {
+      return { invalid: true, value: colorPath };
+    }
+    const colorToken = tokenFn(colorPath);
+    const opacityToken = this.getByName(`opacity.${rawOpacity}`)?.value;
+    if (!opacityToken && isNaN(Number(rawOpacity))) {
+      return { invalid: true, value: colorPath };
+    }
+    const percent = opacityToken ? Number(opacityToken) * 100 + "%" : `${rawOpacity}%`;
+    const color = colorToken ?? colorPath;
+    return {
+      invalid: false,
+      color,
+      value: `color-mix(in srgb, ${color} ${percent}, transparent)`
+    };
+  };
   /**
    * Expand token references to their CSS variable
    */
   expandReferenceInValue(value) {
-    return expandReferences(value, (path) => this.view.get(path));
+    return expandReferences(value, (path) => {
+      if (path.includes("/")) {
+        const mix = this.colorMix(path, this.view.get.bind(this.view));
+        if (mix.invalid) {
+          throw new Error("Invalid color mix at " + path + ": " + mix.value);
+        }
+        return mix.value;
+      }
+      return this.view.get(path);
+    });
   }
   /**
    * Resolve token references to their actual raw value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/token-dictionary",
-  "version": "0.33.0",
+  "version": "0.34.1",
   "description": "Common error messages for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -33,9 +33,9 @@
   ],
   "dependencies": {
     "ts-pattern": "5.0.8",
-    "@pandacss/logger": "^0.33.0",
-    "@pandacss/shared": "0.33.0",
-    "@pandacss/types": "0.33.0"
+    "@pandacss/logger": "^0.34.1",
+    "@pandacss/shared": "0.34.1",
+    "@pandacss/types": "0.34.1"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",