@pandacss/generator 0.0.0-dev-20240313103423 → 0.0.0-dev-20240315003802

package/dist/index.js

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/generator.ts
 var import_core5 = require("@pandacss/core");
-var import_ts_pattern12 = require("ts-pattern");
+var import_ts_pattern13 = require("ts-pattern");
 
 // src/artifacts/setup-artifacts.ts
 var import_outdent43 = __toESM(require("outdent"));
@@ -2834,7 +2834,7 @@ var static_css_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ninterface GenericProperties {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport interface GlobalStyleObject {\n  [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n  [selector: string]: SystemStyleObject | undefined\n  extend?: GlobalStyleObject | undefined\n}\n\ntype FilterStyleObject<P extends string> = {\n  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject\n}\ntype StyleProps = SystemProperties & MinimalNested<SystemStyleObject>\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ninterface GenericProperties {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport interface GlobalStyleObject {\n  [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n  [selector: string]: SystemStyleObject | undefined\n  extend?: GlobalStyleObject | undefined\n}\n\ntype FilterStyleObject<P extends string> = {\n  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject\n}\ntype StyleProps = SystemStyleObject & WithCss\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
 };
 
 // src/artifacts/types/generated.ts
@@ -2910,6 +2910,7 @@ var generateTypesEntry = (ctx, isJsxRequired) => {
 };
 
 // src/artifacts/types/prop-types.ts
+var import_shared3 = require("@pandacss/shared");
 var import_outdent40 = require("outdent");
 var import_ts_pattern11 = require("ts-pattern");
 function generatePropTypes(ctx) {
@@ -2926,6 +2927,8 @@ function generatePropTypes(ctx) {
     interface PropertyValueTypes {`
   ];
   const types = utility.getTypes();
+  const cssVars = ctx.globalVars;
+  const withCssVars = !cssVars.isEmpty() ? " | CssVars" : "";
   for (const [prop, values] of types.entries()) {
     result.push(`	${prop}: ${values.join(" | ")};`);
   }
@@ -2944,6 +2947,10 @@ function generatePropTypes(ctx) {
   return import_outdent40.outdent`
   ${result.join("\n")}
 
+  ${!cssVars.isEmpty() ? import_outdent40.outdent`
+  type CssVars = ${(0, import_shared3.unionType)(cssVars.vars)}
+  ` : ""}
+
   type StrictableProps =
     | 'alignContent'
     | 'alignItems'
@@ -3025,8 +3032,11 @@ function generatePropTypes(ctx) {
 
   type PropOrCondition<Key, Value> = ${(0, import_ts_pattern11.match)(ctx.config).with(
     { strictTokens: true, strictPropertyValues: true },
-    () => "ConditionalValue<WithEscapeHatch<FilterVagueString<Key, Value>>>"
-  ).with({ strictTokens: true }, () => "ConditionalValue<WithEscapeHatch<Value>>").with({ strictPropertyValues: true }, () => "ConditionalValue<WithEscapeHatch<FilterVagueString<Key, Value>>>").otherwise(() => "ConditionalValue<Value | (string & {})>")}
+    () => `ConditionalValue<WithEscapeHatch<FilterVagueString<Key, Value>>${withCssVars}>`
+  ).with({ strictTokens: true }, () => `ConditionalValue<WithEscapeHatch<Value>${withCssVars}>`).with(
+    { strictPropertyValues: true },
+    () => `ConditionalValue<WithEscapeHatch<FilterVagueString<Key, Value>>${withCssVars}>`
+  ).otherwise(() => `ConditionalValue<Value | (string & {})${withCssVars}>`)}
 
   type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
     ? PropOrCondition<T, ${(0, import_ts_pattern11.match)(ctx.config).with(
@@ -3052,7 +3062,9 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 var import_is_valid_prop = require("@pandacss/is-valid-prop");
+var import_shared4 = require("@pandacss/shared");
 var import_outdent41 = __toESM(require("outdent"));
+var import_ts_pattern12 = require("ts-pattern");
 function generateStyleProps(ctx) {
   const props = new Set(import_is_valid_prop.allCssProperties.concat(ctx.utility.keys()).filter(Boolean));
   return import_outdent41.default`
@@ -3060,10 +3072,23 @@ function generateStyleProps(ctx) {
     ${ctx.file.importType("PropertyValue", "./prop-type")}
     ${ctx.file.importType("Token", "../tokens/index")}
 
-    export type CssVarProperties = {
-      [key in \`--\${string}\`]?: ConditionalValue<Token | (string & {}) | (number & {})>
+    type CssVarValue = ConditionalValue<Token | (string & {}) | (number & {})>
+    
+    type GenericCssVarProperties = {
+      [key in \`--$\{string & {}}\`]?: CssVarValue
     }
 
+    ${(0, import_ts_pattern12.match)(ctx.globalVars.isEmpty()).with(
+    false,
+    () => import_outdent41.default`
+      type CssVarName = ${(0, import_shared4.unionType)(ctx.globalVars.names)}
+  
+      type CssVar = \`--\${CssVarName}\`
+      
+      export type CssVarProperties = ConfigCssVarProperties & GenericCssVarProperties
+      `
+  ).otherwise(() => import_outdent41.default`export type CssVarProperties = GenericCssVarProperties`)}
+
     export interface SystemProperties {
       ${Array.from(props).map((v) => `	${v}?: PropertyValue<'${v}'>`).join("\n")}
     }
@@ -3071,7 +3096,7 @@ function generateStyleProps(ctx) {
 }
 
 // src/artifacts/types/token-types.ts
-var import_shared3 = require("@pandacss/shared");
+var import_shared5 = require("@pandacss/shared");
 var import_outdent42 = require("outdent");
 var import_pluralize = __toESM(require("pluralize"));
 var categories = [
@@ -3104,27 +3129,27 @@ function generateTokenTypes(ctx) {
     config: { theme }
   } = ctx;
   const set = /* @__PURE__ */ new Set();
-  set.add(`export type Token = ${tokens.isEmpty ? "string" : (0, import_shared3.unionType)(Array.from(tokens.byName.keys()))}`);
+  set.add(`export type Token = ${tokens.isEmpty ? "string" : (0, import_shared5.unionType)(Array.from(tokens.byName.keys()))}`);
   const result = /* @__PURE__ */ new Set(["export type Tokens = {"]);
   if (tokens.isEmpty) {
     result.add("[token: string]: string");
   } else {
     const colorPaletteKeys = Array.from(tokens.view.colorPalettes.keys());
     if (colorPaletteKeys.length) {
-      set.add(`export type ColorPalette = ${(0, import_shared3.unionType)(colorPaletteKeys)}`);
+      set.add(`export type ColorPalette = ${(0, import_shared5.unionType)(colorPaletteKeys)}`);
     }
     for (const [key, value] of tokens.view.categoryMap.entries()) {
-      const typeName = (0, import_shared3.capitalize)(import_pluralize.default.singular(key));
-      set.add(`export type ${typeName}Token = ${(0, import_shared3.unionType)(value.keys())}`);
+      const typeName = (0, import_shared5.capitalize)(import_pluralize.default.singular(key));
+      set.add(`export type ${typeName}Token = ${(0, import_shared5.unionType)(value.keys())}`);
       result.add(`		${key}: ${typeName}Token`);
     }
     if (theme?.keyframes)
-      set.add(`export type AnimationName = ${(0, import_shared3.unionType)(Object.keys(theme.keyframes))}`);
+      set.add(`export type AnimationName = ${(0, import_shared5.unionType)(Object.keys(theme.keyframes))}`);
     result.add(`		animationName: AnimationName`);
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
-  set.add(`export type TokenCategory = ${(0, import_shared3.unionType)(categories)}`);
+  set.add(`export type TokenCategory = ${(0, import_shared5.unionType)(categories)}`);
   return import_outdent42.outdent.string(Array.from(set).join("\n\n"));
 }
 
@@ -3637,10 +3662,10 @@ var generateParserCss = (ctx, decoder) => {
 
 // src/artifacts/css/reset-css.ts
 var import_core3 = require("@pandacss/core");
-var import_shared4 = require("@pandacss/shared");
+var import_shared6 = require("@pandacss/shared");
 function generateResetCss(ctx, sheet) {
   const { preflight } = ctx.config;
-  const { scope = "", level = "parent" } = (0, import_shared4.isObject)(preflight) ? preflight : {};
+  const { scope = "", level = "parent" } = (0, import_shared6.isObject)(preflight) ? preflight : {};
   let selector = "";
   if (scope && level === "parent") {
     selector = `${scope} `;
@@ -3738,7 +3763,7 @@ function generateResetCss(ctx, sheet) {
     }
   };
   if (level === "element") {
-    const modified = (0, import_shared4.mapEntries)(scoped, (k, v) => [k, { [selector]: v }]);
+    const modified = (0, import_shared6.mapEntries)(scoped, (k, v) => [k, { [selector]: v }]);
     Object.assign(reset, modified);
   } else if (selector) {
     reset[selector] = scoped;
@@ -3871,7 +3896,7 @@ var Generator = class extends import_core5.Context {
     return generateArtifacts(this, ids);
   };
   appendCssOfType = (type, sheet) => {
-    (0, import_ts_pattern12.match)(type).with("preflight", () => generateResetCss(this, sheet)).with("tokens", () => generateTokenCss(this, sheet)).with("static", () => generateStaticCss(this, sheet)).with("global", () => generateGlobalCss(this, sheet)).with("keyframes", () => generateKeyframeCss(this, sheet)).otherwise(() => {
+    (0, import_ts_pattern13.match)(type).with("preflight", () => generateResetCss(this, sheet)).with("tokens", () => generateTokenCss(this, sheet)).with("static", () => generateStaticCss(this, sheet)).with("global", () => generateGlobalCss(this, sheet)).with("keyframes", () => generateKeyframeCss(this, sheet)).otherwise(() => {
       throw new Error(`Unknown css artifact type <${type}>`);
     });
   };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/generator.ts
 import { Context as Context2 } from "@pandacss/core";
-import { match as match12 } from "ts-pattern";
+import { match as match13 } from "ts-pattern";
 
 // src/artifacts/setup-artifacts.ts
 import outdent43 from "outdent";
@@ -2798,7 +2798,7 @@ var static_css_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ninterface GenericProperties {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport interface GlobalStyleObject {\n  [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n  [selector: string]: SystemStyleObject | undefined\n  extend?: GlobalStyleObject | undefined\n}\n\ntype FilterStyleObject<P extends string> = {\n  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject\n}\ntype StyleProps = SystemProperties & MinimalNested<SystemStyleObject>\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ninterface GenericProperties {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport interface GlobalStyleObject {\n  [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n  [selector: string]: SystemStyleObject | undefined\n  extend?: GlobalStyleObject | undefined\n}\n\ntype FilterStyleObject<P extends string> = {\n  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject\n}\ntype StyleProps = SystemStyleObject & WithCss\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
 };
 
 // src/artifacts/types/generated.ts
@@ -2874,6 +2874,7 @@ var generateTypesEntry = (ctx, isJsxRequired) => {
 };
 
 // src/artifacts/types/prop-types.ts
+import { unionType as unionType3 } from "@pandacss/shared";
 import { outdent as outdent40 } from "outdent";
 import { match as match11 } from "ts-pattern";
 function generatePropTypes(ctx) {
@@ -2890,6 +2891,8 @@ function generatePropTypes(ctx) {
     interface PropertyValueTypes {`
   ];
   const types = utility.getTypes();
+  const cssVars = ctx.globalVars;
+  const withCssVars = !cssVars.isEmpty() ? " | CssVars" : "";
   for (const [prop, values] of types.entries()) {
     result.push(`	${prop}: ${values.join(" | ")};`);
   }
@@ -2908,6 +2911,10 @@ function generatePropTypes(ctx) {
   return outdent40`
   ${result.join("\n")}
 
+  ${!cssVars.isEmpty() ? outdent40`
+  type CssVars = ${unionType3(cssVars.vars)}
+  ` : ""}
+
   type StrictableProps =
     | 'alignContent'
     | 'alignItems'
@@ -2989,8 +2996,11 @@ function generatePropTypes(ctx) {
 
   type PropOrCondition<Key, Value> = ${match11(ctx.config).with(
     { strictTokens: true, strictPropertyValues: true },
-    () => "ConditionalValue<WithEscapeHatch<FilterVagueString<Key, Value>>>"
-  ).with({ strictTokens: true }, () => "ConditionalValue<WithEscapeHatch<Value>>").with({ strictPropertyValues: true }, () => "ConditionalValue<WithEscapeHatch<FilterVagueString<Key, Value>>>").otherwise(() => "ConditionalValue<Value | (string & {})>")}
+    () => `ConditionalValue<WithEscapeHatch<FilterVagueString<Key, Value>>${withCssVars}>`
+  ).with({ strictTokens: true }, () => `ConditionalValue<WithEscapeHatch<Value>${withCssVars}>`).with(
+    { strictPropertyValues: true },
+    () => `ConditionalValue<WithEscapeHatch<FilterVagueString<Key, Value>>${withCssVars}>`
+  ).otherwise(() => `ConditionalValue<Value | (string & {})${withCssVars}>`)}
 
   type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
     ? PropOrCondition<T, ${match11(ctx.config).with(
@@ -3016,7 +3026,9 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 import { allCssProperties } from "@pandacss/is-valid-prop";
+import { unionType as unionType4 } from "@pandacss/shared";
 import outdent41 from "outdent";
+import { match as match12 } from "ts-pattern";
 function generateStyleProps(ctx) {
   const props = new Set(allCssProperties.concat(ctx.utility.keys()).filter(Boolean));
   return outdent41`
@@ -3024,10 +3036,23 @@ function generateStyleProps(ctx) {
     ${ctx.file.importType("PropertyValue", "./prop-type")}
     ${ctx.file.importType("Token", "../tokens/index")}
 
-    export type CssVarProperties = {
-      [key in \`--\${string}\`]?: ConditionalValue<Token | (string & {}) | (number & {})>
+    type CssVarValue = ConditionalValue<Token | (string & {}) | (number & {})>
+    
+    type GenericCssVarProperties = {
+      [key in \`--$\{string & {}}\`]?: CssVarValue
     }
 
+    ${match12(ctx.globalVars.isEmpty()).with(
+    false,
+    () => outdent41`
+      type CssVarName = ${unionType4(ctx.globalVars.names)}
+  
+      type CssVar = \`--\${CssVarName}\`
+      
+      export type CssVarProperties = ConfigCssVarProperties & GenericCssVarProperties
+      `
+  ).otherwise(() => outdent41`export type CssVarProperties = GenericCssVarProperties`)}
+
     export interface SystemProperties {
       ${Array.from(props).map((v) => `	${v}?: PropertyValue<'${v}'>`).join("\n")}
     }
@@ -3035,7 +3060,7 @@ function generateStyleProps(ctx) {
 }
 
 // src/artifacts/types/token-types.ts
-import { capitalize, unionType as unionType3 } from "@pandacss/shared";
+import { capitalize, unionType as unionType5 } from "@pandacss/shared";
 import { outdent as outdent42 } from "outdent";
 import pluralize from "pluralize";
 var categories = [
@@ -3068,27 +3093,27 @@ function generateTokenTypes(ctx) {
     config: { theme }
   } = ctx;
   const set = /* @__PURE__ */ new Set();
-  set.add(`export type Token = ${tokens.isEmpty ? "string" : unionType3(Array.from(tokens.byName.keys()))}`);
+  set.add(`export type Token = ${tokens.isEmpty ? "string" : unionType5(Array.from(tokens.byName.keys()))}`);
   const result = /* @__PURE__ */ new Set(["export type Tokens = {"]);
   if (tokens.isEmpty) {
     result.add("[token: string]: string");
   } else {
     const colorPaletteKeys = Array.from(tokens.view.colorPalettes.keys());
     if (colorPaletteKeys.length) {
-      set.add(`export type ColorPalette = ${unionType3(colorPaletteKeys)}`);
+      set.add(`export type ColorPalette = ${unionType5(colorPaletteKeys)}`);
     }
     for (const [key, value] of tokens.view.categoryMap.entries()) {
       const typeName = capitalize(pluralize.singular(key));
-      set.add(`export type ${typeName}Token = ${unionType3(value.keys())}`);
+      set.add(`export type ${typeName}Token = ${unionType5(value.keys())}`);
       result.add(`		${key}: ${typeName}Token`);
     }
     if (theme?.keyframes)
-      set.add(`export type AnimationName = ${unionType3(Object.keys(theme.keyframes))}`);
+      set.add(`export type AnimationName = ${unionType5(Object.keys(theme.keyframes))}`);
     result.add(`		animationName: AnimationName`);
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
-  set.add(`export type TokenCategory = ${unionType3(categories)}`);
+  set.add(`export type TokenCategory = ${unionType5(categories)}`);
   return outdent42.string(Array.from(set).join("\n\n"));
 }
 
@@ -3835,7 +3860,7 @@ var Generator = class extends Context2 {
     return generateArtifacts(this, ids);
   };
   appendCssOfType = (type, sheet) => {
-    match12(type).with("preflight", () => generateResetCss(this, sheet)).with("tokens", () => generateTokenCss(this, sheet)).with("static", () => generateStaticCss(this, sheet)).with("global", () => generateGlobalCss(this, sheet)).with("keyframes", () => generateKeyframeCss(this, sheet)).otherwise(() => {
+    match13(type).with("preflight", () => generateResetCss(this, sheet)).with("tokens", () => generateTokenCss(this, sheet)).with("static", () => generateStaticCss(this, sheet)).with("global", () => generateGlobalCss(this, sheet)).with("keyframes", () => generateKeyframeCss(this, sheet)).otherwise(() => {
       throw new Error(`Unknown css artifact type <${type}>`);
     });
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20240313103423",
+  "version": "0.0.0-dev-20240315003802",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.35",
     "ts-pattern": "5.0.8",
-    "@pandacss/core": "0.0.0-dev-20240313103423",
-    "@pandacss/is-valid-prop": "^0.0.0-dev-20240313103423",
-    "@pandacss/logger": "0.0.0-dev-20240313103423",
-    "@pandacss/shared": "0.0.0-dev-20240313103423",
-    "@pandacss/token-dictionary": "0.0.0-dev-20240313103423",
-    "@pandacss/types": "0.0.0-dev-20240313103423"
+    "@pandacss/core": "0.0.0-dev-20240315003802",
+    "@pandacss/is-valid-prop": "^0.0.0-dev-20240315003802",
+    "@pandacss/logger": "0.0.0-dev-20240315003802",
+    "@pandacss/shared": "0.0.0-dev-20240315003802",
+    "@pandacss/token-dictionary": "0.0.0-dev-20240315003802",
+    "@pandacss/types": "0.0.0-dev-20240315003802"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"