@pandacss/token-dictionary 0.32.1 → 0.34.0

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

@@ -583,7 +583,26 @@ var transformAssets = {
   match: (token) => token.extensions.category === "assets",
   transform(token) {
     const raw = token.value;
-    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();
+    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 = {
@@ -633,17 +652,23 @@ var addColorPalette = {
     if (tokenPathClone.length === 0) {
       return {};
     }
-    const colorPaletteRoots = tokenPathClone.reduce((acc, _, i, arr) => {
-      const next = arr.slice(0, i + 1);
-      acc.push(next);
-      return acc;
-    }, []);
+    const colorPaletteRoots = tokenPathClone.reduce(
+      (acc, _, i, arr) => {
+        const next = arr.slice(0, i + 1);
+        acc.push(next);
+        return acc;
+      },
+      []
+    );
     const colorPaletteRoot = tokenPathClone[0];
     const colorPalette = dict.formatTokenName(tokenPathClone);
-    const colorPaletteTokenKeys = token.path.slice(token.path.indexOf(colorPaletteRoot) + 1).reduce((acc, _, i, arr) => {
-      acc.push(arr.slice(i));
-      return acc;
-    }, []);
+    const colorPaletteTokenKeys = token.path.slice(token.path.indexOf(colorPaletteRoot) + 1).reduce(
+      (acc, _, i, arr) => {
+        acc.push(arr.slice(i));
+        return acc;
+      },
+      []
+    );
     if (colorPaletteTokenKeys.length === 0) {
       colorPaletteTokenKeys.push([""]);
     }
@@ -662,6 +687,8 @@ var transforms = [
   transformBorders,
   transformAssets,
   addCssVariables,
+  transformColorMix,
+  // depends on `addCssVariables`
   addConditionalCssVariables,
   addColorPalette
 ];
@@ -858,10 +885,13 @@ var TokenDictionary = class {
         return;
       const references = this.getReferences(token.value);
       token.setExtensions({
-        references: references.reduce((object, reference) => {
-          object[reference.name] = reference;
-          return object;
-        }, {})
+        references: references.reduce(
+          (object, reference) => {
+            object[reference.name] = reference;
+            return object;
+          },
+          {}
+        )
       });
     });
     return this;
@@ -887,11 +917,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
@@ -1018,7 +1077,7 @@ var TokenDictionaryView = class {
       byCategory.set(category, /* @__PURE__ */ new Map());
     const value = isNegative ? token.isConditional ? token.originalValue : token.value : varRef;
     byCategory.get(category).set(prop, value);
-    flat.set([category, prop].join("."), value);
+    flat.set(token.name, value);
   }
   processVars(token, group) {
     const { condition, isNegative, isVirtual, var: varName } = token.extensions;

package/dist/index.mjs

@@ -563,7 +563,26 @@ var transformAssets = {
   match: (token) => token.extensions.category === "assets",
   transform(token) {
     const raw = token.value;
-    return match(raw).with(P2.string, (value) => value).with({ type: "url" }, ({ value }) => `url('${value}')`).with({ type: "svg" }, ({ value }) => `url('${svgToDataUri(value)}')`).exhaustive();
+    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 = {
@@ -613,17 +632,23 @@ var addColorPalette = {
     if (tokenPathClone.length === 0) {
       return {};
     }
-    const colorPaletteRoots = tokenPathClone.reduce((acc, _, i, arr) => {
-      const next = arr.slice(0, i + 1);
-      acc.push(next);
-      return acc;
-    }, []);
+    const colorPaletteRoots = tokenPathClone.reduce(
+      (acc, _, i, arr) => {
+        const next = arr.slice(0, i + 1);
+        acc.push(next);
+        return acc;
+      },
+      []
+    );
     const colorPaletteRoot = tokenPathClone[0];
     const colorPalette = dict.formatTokenName(tokenPathClone);
-    const colorPaletteTokenKeys = token.path.slice(token.path.indexOf(colorPaletteRoot) + 1).reduce((acc, _, i, arr) => {
-      acc.push(arr.slice(i));
-      return acc;
-    }, []);
+    const colorPaletteTokenKeys = token.path.slice(token.path.indexOf(colorPaletteRoot) + 1).reduce(
+      (acc, _, i, arr) => {
+        acc.push(arr.slice(i));
+        return acc;
+      },
+      []
+    );
     if (colorPaletteTokenKeys.length === 0) {
       colorPaletteTokenKeys.push([""]);
     }
@@ -642,6 +667,8 @@ var transforms = [
   transformBorders,
   transformAssets,
   addCssVariables,
+  transformColorMix,
+  // depends on `addCssVariables`
   addConditionalCssVariables,
   addColorPalette
 ];
@@ -838,10 +865,13 @@ var TokenDictionary = class {
         return;
       const references = this.getReferences(token.value);
       token.setExtensions({
-        references: references.reduce((object, reference) => {
-          object[reference.name] = reference;
-          return object;
-        }, {})
+        references: references.reduce(
+          (object, reference) => {
+            object[reference.name] = reference;
+            return object;
+          },
+          {}
+        )
       });
     });
     return this;
@@ -867,11 +897,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
@@ -998,7 +1057,7 @@ var TokenDictionaryView = class {
       byCategory.set(category, /* @__PURE__ */ new Map());
     const value = isNegative ? token.isConditional ? token.originalValue : token.value : varRef;
     byCategory.get(category).set(prop, value);
-    flat.set([category, prop].join("."), value);
+    flat.set(token.name, value);
   }
   processVars(token, group) {
     const { condition, isNegative, isVirtual, var: varName } = token.extensions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/token-dictionary",
-  "version": "0.32.1",
+  "version": "0.34.0",
   "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.32.1",
-    "@pandacss/types": "0.32.1",
-    "@pandacss/shared": "0.32.1"
+    "@pandacss/logger": "^0.34.0",
+    "@pandacss/shared": "0.34.0",
+    "@pandacss/types": "0.34.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",