@pandacss/token-dictionary 0.35.0 → 0.36.1

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _pandacss_types from '@pandacss/types';
-import { Tokens, SemanticTokens } from '@pandacss/types';
+import { Tokens, SemanticTokens, ThemeVariantsMap } from '@pandacss/types';
 import { CssVarOptions, CssVar } from '@pandacss/shared';
 
 type TokenStatus = 'deprecated' | 'experimental' | 'new';
@@ -9,6 +9,7 @@ interface ExtensionData {
     references?: TokenReferences;
     condition?: string;
     conditions?: TokenConditions;
+    theme?: string;
 }
 interface TokenConditions {
     [key: string]: string;
@@ -97,6 +98,7 @@ interface TokenDictionaryOptions {
     tokens?: Tokens;
     semanticTokens?: SemanticTokens;
     breakpoints?: Record<string, string>;
+    themes?: ThemeVariantsMap | undefined;
     prefix?: string;
     hash?: boolean;
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _pandacss_types from '@pandacss/types';
-import { Tokens, SemanticTokens } from '@pandacss/types';
+import { Tokens, SemanticTokens, ThemeVariantsMap } from '@pandacss/types';
 import { CssVarOptions, CssVar } from '@pandacss/shared';
 
 type TokenStatus = 'deprecated' | 'experimental' | 'new';
@@ -9,6 +9,7 @@ interface ExtensionData {
     references?: TokenReferences;
     condition?: string;
     conditions?: TokenConditions;
+    theme?: string;
 }
 interface TokenConditions {
     [key: string]: string;
@@ -97,6 +98,7 @@ interface TokenDictionaryOptions {
     tokens?: Tokens;
     semanticTokens?: SemanticTokens;
     breakpoints?: Record<string, string>;
+    themes?: ThemeVariantsMap | undefined;
     prefix?: string;
     hash?: boolean;
 }

package/dist/index.js

@@ -592,6 +592,8 @@ var transformColorMix = {
     return token.extensions.category === "colors" && token.value.includes("/");
   },
   transform(token, dict) {
+    if (!token.value.includes("/"))
+      return token;
     return expandReferences(token.value, (path) => {
       const tokenFn = (tokenPath) => {
         const token2 = dict.getByName(tokenPath);
@@ -747,7 +749,7 @@ var TokenDictionary = class {
   formatTokenName = (path) => path.join(".");
   formatCssVar = (path, options) => (0, import_shared5.cssVar)(path.join("-"), options);
   registerTokens() {
-    const { tokens = {}, semanticTokens = {}, breakpoints } = this.options;
+    const { tokens = {}, semanticTokens = {}, breakpoints, themes = {} } = this.options;
     const breakpointTokens = expandBreakpoints(breakpoints);
     const computedTokens = (0, import_shared5.compact)({
       ...tokens,
@@ -757,22 +759,50 @@ var TokenDictionary = class {
         ...breakpointTokens.sizes
       }
     });
+    const processToken = (token, path) => {
+      const isDefault = path.includes("DEFAULT");
+      path = filterDefault(path);
+      assertTokenFormat(token);
+      const category = path[0];
+      const name = this.formatTokenName(path);
+      const node = new Token({ ...token, name, path });
+      node.setExtensions({
+        category,
+        prop: this.formatTokenName(path.slice(1))
+      });
+      if (isDefault) {
+        node.setExtensions({ isDefault });
+      }
+      return node;
+    };
+    const processSemantic = (token, path) => {
+      const isDefault = path.includes("DEFAULT");
+      path = filterDefault(path);
+      assertTokenFormat(token);
+      const category = path[0];
+      const name = this.formatTokenName(path);
+      const normalizedToken = (0, import_shared5.isString)(token.value) || isCompositeTokenValue(token.value) ? { value: { base: token.value } } : token;
+      const { value, ...restData } = normalizedToken;
+      const node = new Token({
+        ...restData,
+        name,
+        value: value.base || "",
+        path
+      });
+      node.setExtensions({
+        category,
+        conditions: value,
+        prop: this.formatTokenName(path.slice(1))
+      });
+      if (isDefault) {
+        node.setExtensions({ isDefault });
+      }
+      return node;
+    };
     (0, import_shared5.walkObject)(
       computedTokens,
       (token, path) => {
-        const isDefault = path.includes("DEFAULT");
-        path = filterDefault(path);
-        assertTokenFormat(token);
-        const category = path[0];
-        const name = this.formatTokenName(path);
-        const node = new Token({ ...token, name, path });
-        node.setExtensions({
-          category,
-          prop: this.formatTokenName(path.slice(1))
-        });
-        if (isDefault) {
-          node.setExtensions({ isDefault });
-        }
+        const node = processToken(token, path);
         this.registerToken(node);
       },
       { stop: isToken }
@@ -780,31 +810,34 @@ var TokenDictionary = class {
     (0, import_shared5.walkObject)(
       semanticTokens,
       (token, path) => {
-        const isDefault = path.includes("DEFAULT");
-        path = filterDefault(path);
-        assertTokenFormat(token);
-        const category = path[0];
-        const name = this.formatTokenName(path);
-        const normalizedToken = (0, import_shared5.isString)(token.value) || isCompositeTokenValue(token.value) ? { value: { base: token.value } } : token;
-        const { value, ...restData } = normalizedToken;
-        const node = new Token({
-          ...restData,
-          name,
-          value: value.base || "",
-          path
-        });
-        node.setExtensions({
-          category,
-          conditions: value,
-          prop: this.formatTokenName(path.slice(1))
-        });
-        if (isDefault) {
-          node.setExtensions({ isDefault });
-        }
+        const node = processSemantic(token, path);
         this.registerToken(node);
       },
       { stop: isToken }
     );
+    Object.entries(themes).forEach(([theme, themeVariant]) => {
+      const condName = "_theme" + (0, import_shared5.capitalize)(theme);
+      (0, import_shared5.walkObject)(
+        themeVariant.tokens ?? {},
+        (token, path) => {
+          const themeToken = { value: { [condName]: token.value } };
+          const node = processSemantic(themeToken, path);
+          node.setExtensions({ theme, isVirtual: true });
+          this.registerToken(node);
+        },
+        { stop: isToken }
+      );
+      (0, import_shared5.walkObject)(
+        themeVariant.semanticTokens ?? {},
+        (token, path) => {
+          const themeToken = { value: { [condName]: token.value } };
+          const node = processSemantic(themeToken, path);
+          node.setExtensions({ theme, isSemantic: true, isVirtual: true });
+          this.registerToken(node);
+        },
+        { stop: isToken }
+      );
+    });
     return this;
   }
   registerToken = (token, transformPhase) => {
@@ -1095,8 +1128,8 @@ var TokenDictionaryView = class {
     flat.set(token.name, value);
   }
   processVars(token, group) {
-    const { condition, isNegative, isVirtual, var: varName } = token.extensions;
-    if (isNegative || isVirtual || !condition)
+    const { condition, isNegative, isVirtual, var: varName, theme } = token.extensions;
+    if (isNegative || !theme && isVirtual || !condition)
       return;
     if (!group.has(condition))
       group.set(condition, /* @__PURE__ */ new Map());

package/dist/index.mjs

@@ -1,5 +1,6 @@
 // src/dictionary.ts
 import {
+  capitalize,
   compact,
   cssVar,
   isString as isString2,
@@ -572,6 +573,8 @@ var transformColorMix = {
     return token.extensions.category === "colors" && token.value.includes("/");
   },
   transform(token, dict) {
+    if (!token.value.includes("/"))
+      return token;
     return expandReferences(token.value, (path) => {
       const tokenFn = (tokenPath) => {
         const token2 = dict.getByName(tokenPath);
@@ -727,7 +730,7 @@ var TokenDictionary = class {
   formatTokenName = (path) => path.join(".");
   formatCssVar = (path, options) => cssVar(path.join("-"), options);
   registerTokens() {
-    const { tokens = {}, semanticTokens = {}, breakpoints } = this.options;
+    const { tokens = {}, semanticTokens = {}, breakpoints, themes = {} } = this.options;
     const breakpointTokens = expandBreakpoints(breakpoints);
     const computedTokens = compact({
       ...tokens,
@@ -737,22 +740,50 @@ var TokenDictionary = class {
         ...breakpointTokens.sizes
       }
     });
+    const processToken = (token, path) => {
+      const isDefault = path.includes("DEFAULT");
+      path = filterDefault(path);
+      assertTokenFormat(token);
+      const category = path[0];
+      const name = this.formatTokenName(path);
+      const node = new Token({ ...token, name, path });
+      node.setExtensions({
+        category,
+        prop: this.formatTokenName(path.slice(1))
+      });
+      if (isDefault) {
+        node.setExtensions({ isDefault });
+      }
+      return node;
+    };
+    const processSemantic = (token, path) => {
+      const isDefault = path.includes("DEFAULT");
+      path = filterDefault(path);
+      assertTokenFormat(token);
+      const category = path[0];
+      const name = this.formatTokenName(path);
+      const normalizedToken = isString2(token.value) || isCompositeTokenValue(token.value) ? { value: { base: token.value } } : token;
+      const { value, ...restData } = normalizedToken;
+      const node = new Token({
+        ...restData,
+        name,
+        value: value.base || "",
+        path
+      });
+      node.setExtensions({
+        category,
+        conditions: value,
+        prop: this.formatTokenName(path.slice(1))
+      });
+      if (isDefault) {
+        node.setExtensions({ isDefault });
+      }
+      return node;
+    };
     walkObject2(
       computedTokens,
       (token, path) => {
-        const isDefault = path.includes("DEFAULT");
-        path = filterDefault(path);
-        assertTokenFormat(token);
-        const category = path[0];
-        const name = this.formatTokenName(path);
-        const node = new Token({ ...token, name, path });
-        node.setExtensions({
-          category,
-          prop: this.formatTokenName(path.slice(1))
-        });
-        if (isDefault) {
-          node.setExtensions({ isDefault });
-        }
+        const node = processToken(token, path);
         this.registerToken(node);
       },
       { stop: isToken }
@@ -760,31 +791,34 @@ var TokenDictionary = class {
     walkObject2(
       semanticTokens,
       (token, path) => {
-        const isDefault = path.includes("DEFAULT");
-        path = filterDefault(path);
-        assertTokenFormat(token);
-        const category = path[0];
-        const name = this.formatTokenName(path);
-        const normalizedToken = isString2(token.value) || isCompositeTokenValue(token.value) ? { value: { base: token.value } } : token;
-        const { value, ...restData } = normalizedToken;
-        const node = new Token({
-          ...restData,
-          name,
-          value: value.base || "",
-          path
-        });
-        node.setExtensions({
-          category,
-          conditions: value,
-          prop: this.formatTokenName(path.slice(1))
-        });
-        if (isDefault) {
-          node.setExtensions({ isDefault });
-        }
+        const node = processSemantic(token, path);
         this.registerToken(node);
       },
       { stop: isToken }
     );
+    Object.entries(themes).forEach(([theme, themeVariant]) => {
+      const condName = "_theme" + capitalize(theme);
+      walkObject2(
+        themeVariant.tokens ?? {},
+        (token, path) => {
+          const themeToken = { value: { [condName]: token.value } };
+          const node = processSemantic(themeToken, path);
+          node.setExtensions({ theme, isVirtual: true });
+          this.registerToken(node);
+        },
+        { stop: isToken }
+      );
+      walkObject2(
+        themeVariant.semanticTokens ?? {},
+        (token, path) => {
+          const themeToken = { value: { [condName]: token.value } };
+          const node = processSemantic(themeToken, path);
+          node.setExtensions({ theme, isSemantic: true, isVirtual: true });
+          this.registerToken(node);
+        },
+        { stop: isToken }
+      );
+    });
     return this;
   }
   registerToken = (token, transformPhase) => {
@@ -1075,8 +1109,8 @@ var TokenDictionaryView = class {
     flat.set(token.name, value);
   }
   processVars(token, group) {
-    const { condition, isNegative, isVirtual, var: varName } = token.extensions;
-    if (isNegative || isVirtual || !condition)
+    const { condition, isNegative, isVirtual, var: varName, theme } = token.extensions;
+    if (isNegative || !theme && isVirtual || !condition)
       return;
     if (!group.has(condition))
       group.set(condition, /* @__PURE__ */ new Map());

package/package.json

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