@yamada-ui/react 2.2.5-dev-20260721065212 → 2.3.0-dev-20260723023720

package/dist/cjs/core/css/utils.cjs

@@ -82,7 +82,7 @@ function tokenToVar(system) {
 }
 function varToValue(system) {
 	return function(variable) {
-		const value = system.cssVars[variable];
+		const value = system.cssVars.light[variable];
 		if (isCSSVar(value)) return varToValue(system)(value.replace(/^var\(/, "").replace(/\)$/, ""));
 		else return value;
 	};

package/dist/cjs/core/css/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","names":["isColorScheme","getColorSchemeVar"],"sources":["../../../../src/core/css/utils.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { ColorMode, System, ThemeToken, UsageTheme } from \"../system\"\nimport type { StyleConfig } from \"./config\"\nimport type { CSSFunction, CSSProperties } from \"./index.types\"\nimport { isObject, isString, isUndefined } from \"../../utils\"\nimport { getColorSchemeVar, isColorScheme } from \"../system\"\n\nexport interface TransformOptions {\n  system: System\n  css?: CSSFunction\n  fallback?: any\n  prev?: Dict\n  properties?: CSSProperties[]\n  theme?: UsageTheme\n}\n\nexport interface Transform {\n  (value: any, options: TransformOptions): any\n}\n\nexport const globalValues = new Set([\n  \"inherit\",\n  \"initial\",\n  \"none\",\n  \"revert\",\n  \"unset\",\n])\n\nexport function isCSSFunction(value: any) {\n  return isString(value) && value.includes(\"(\") && value.includes(\")\")\n}\n\nexport function getCSSFunction(value: any) {\n  const regex = /(^[a-z-A-Z]+)\\((.*)\\)/g\n  const [, type, values] = regex.exec(value) ?? []\n\n  return { type, values }\n}\n\nexport function splitValues(\n  values: string,\n  cb: (\n    current: string,\n    prev: string | undefined,\n    next: string | undefined,\n  ) => boolean = (current) => current === \",\",\n  addSeparator = false,\n) {\n  const result = []\n\n  let value = \"\"\n  let depth = 0\n\n  for (let i = 0; i < values.length; i++) {\n    const current = values[i]\n    const prev = values[i - 1]\n    const next = values[i + 1]\n\n    if (current === \"(\") depth++\n    if (current === \")\") depth--\n\n    if (!isUndefined(current) && cb(current, prev, next) && depth === 0) {\n      if (value) result.push(value.trim())\n\n      if (addSeparator) result.push(current)\n\n      value = \"\"\n    } else {\n      value += current\n    }\n  }\n\n  if (value) result.push(value.trim())\n\n  return result.filter(Boolean)\n}\n\nexport function isCSSVar(value: string) {\n  return /^var\\(--.+\\)$/.test(value)\n}\n\nexport function isInterpolation(value: string) {\n  return /\\{.+\\}/.test(value)\n}\n\nexport function isCSSToken({ cssMap }: System) {\n  return function (value: any) {\n    return isObject(cssMap) && value in cssMap && !!cssMap[value]?.ref\n  }\n}\n\nexport function isImportant(value: any): boolean {\n  return (\n    isString(value) && (/\\s*!important$/.test(value) || /\\s*!$/.test(value))\n  )\n}\n\nexport function omitImportant(value: any): string {\n  return isString(value) ? value.replace(/(!important|!)$/, \"\").trim() : value\n}\n\nexport function insertImportant(value: any, style?: StyleConfig): any {\n  if (isString(value)) return value + \" !important\"\n  else if (isObject(value))\n    if (style?.important) {\n      return Object.fromEntries(\n        Object.entries(value).map(([key, value]) => [\n          key,\n          value + \" !important\",\n        ]),\n      )\n    } else {\n      if (!style?.properties) return value\n\n      for (const property of style.properties) value[property] += \" !important\"\n    }\n\n  return value\n}\n\nexport function analyzeCSSValue(value: any) {\n  let n = parseFloat(value.toString())\n  const unit = value.toString().replace(String(n), \"\")\n\n  return { unit, unitless: !unit, value }\n}\n\nexport function tokenToVar(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken))\n      return system.cssMap[resolvedToken]!.ref\n    else return fallbackValue || value\n  }\n}\n\nexport function varToValue(system: System) {\n  return function (variable: string): string {\n    const value = system.cssVars[variable]\n\n    if (isCSSVar(value))\n      return varToValue(system)(value.replace(/^var\\(/, \"\").replace(/\\)$/, \"\"))\n    else return value\n  }\n}\n\nexport function tokenToValue(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken)) {\n      const variable = system.cssMap[resolvedToken]!.var\n\n      return varToValue(system)(variable)\n    } else {\n      return fallbackValue || value\n    }\n  }\n}\n\nexport function mode<L, D>(light: L, dark: D) {\n  return function (colorMode: ColorMode | undefined = \"light\"): D | L {\n    return colorMode === \"light\" ? light : dark\n  }\n}\n\nfunction combineFunctions(a: Transform, b: Transform): Transform {\n  return function (value, ...args) {\n    return b(a(value, ...args), ...args)\n  }\n}\n\nexport function pipe(...transformers: Transform[]) {\n  return transformers.reduce(combineFunctions)\n}\n"],"mappings":"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"}
+{"version":3,"file":"utils.cjs","names":["isColorScheme","getColorSchemeVar"],"sources":["../../../../src/core/css/utils.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { ColorMode, System, ThemeToken, UsageTheme } from \"../system\"\nimport type { StyleConfig } from \"./config\"\nimport type { CSSFunction, CSSProperties } from \"./index.types\"\nimport { isObject, isString, isUndefined } from \"../../utils\"\nimport { getColorSchemeVar, isColorScheme } from \"../system\"\n\nexport interface TransformOptions {\n  system: System\n  css?: CSSFunction\n  fallback?: any\n  prev?: Dict\n  properties?: CSSProperties[]\n  theme?: UsageTheme\n}\n\nexport interface Transform {\n  (value: any, options: TransformOptions): any\n}\n\nexport const globalValues = new Set([\n  \"inherit\",\n  \"initial\",\n  \"none\",\n  \"revert\",\n  \"unset\",\n])\n\nexport function isCSSFunction(value: any) {\n  return isString(value) && value.includes(\"(\") && value.includes(\")\")\n}\n\nexport function getCSSFunction(value: any) {\n  const regex = /(^[a-z-A-Z]+)\\((.*)\\)/g\n  const [, type, values] = regex.exec(value) ?? []\n\n  return { type, values }\n}\n\nexport function splitValues(\n  values: string,\n  cb: (\n    current: string,\n    prev: string | undefined,\n    next: string | undefined,\n  ) => boolean = (current) => current === \",\",\n  addSeparator = false,\n) {\n  const result = []\n\n  let value = \"\"\n  let depth = 0\n\n  for (let i = 0; i < values.length; i++) {\n    const current = values[i]\n    const prev = values[i - 1]\n    const next = values[i + 1]\n\n    if (current === \"(\") depth++\n    if (current === \")\") depth--\n\n    if (!isUndefined(current) && cb(current, prev, next) && depth === 0) {\n      if (value) result.push(value.trim())\n\n      if (addSeparator) result.push(current)\n\n      value = \"\"\n    } else {\n      value += current\n    }\n  }\n\n  if (value) result.push(value.trim())\n\n  return result.filter(Boolean)\n}\n\nexport function isCSSVar(value: string) {\n  return /^var\\(--.+\\)$/.test(value)\n}\n\nexport function isInterpolation(value: string) {\n  return /\\{.+\\}/.test(value)\n}\n\nexport function isCSSToken({ cssMap }: System) {\n  return function (value: any) {\n    return isObject(cssMap) && value in cssMap && !!cssMap[value]?.ref\n  }\n}\n\nexport function isImportant(value: any): boolean {\n  return (\n    isString(value) && (/\\s*!important$/.test(value) || /\\s*!$/.test(value))\n  )\n}\n\nexport function omitImportant(value: any): string {\n  return isString(value) ? value.replace(/(!important|!)$/, \"\").trim() : value\n}\n\nexport function insertImportant(value: any, style?: StyleConfig): any {\n  if (isString(value)) return value + \" !important\"\n  else if (isObject(value))\n    if (style?.important) {\n      return Object.fromEntries(\n        Object.entries(value).map(([key, value]) => [\n          key,\n          value + \" !important\",\n        ]),\n      )\n    } else {\n      if (!style?.properties) return value\n\n      for (const property of style.properties) value[property] += \" !important\"\n    }\n\n  return value\n}\n\nexport function analyzeCSSValue(value: any) {\n  let n = parseFloat(value.toString())\n  const unit = value.toString().replace(String(n), \"\")\n\n  return { unit, unitless: !unit, value }\n}\n\nexport function tokenToVar(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken))\n      return system.cssMap[resolvedToken]!.ref\n    else return fallbackValue || value\n  }\n}\n\nexport function varToValue(system: System) {\n  return function (variable: string): string {\n    const value = system.cssVars.light[variable]\n\n    if (isCSSVar(value))\n      return varToValue(system)(value.replace(/^var\\(/, \"\").replace(/\\)$/, \"\"))\n    else return value\n  }\n}\n\nexport function tokenToValue(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken)) {\n      const variable = system.cssMap[resolvedToken]!.var\n\n      return varToValue(system)(variable)\n    } else {\n      return fallbackValue || value\n    }\n  }\n}\n\nexport function mode<L, D>(light: L, dark: D) {\n  return function (colorMode: ColorMode | undefined = \"light\"): D | L {\n    return colorMode === \"light\" ? light : dark\n  }\n}\n\nfunction combineFunctions(a: Transform, b: Transform): Transform {\n  return function (value, ...args) {\n    return b(a(value, ...args), ...args)\n  }\n}\n\nexport function pipe(...transformers: Transform[]) {\n  return transformers.reduce(combineFunctions)\n}\n"],"mappings":"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"}

package/dist/cjs/core/index.cjs

@@ -70,6 +70,7 @@ exports.createSlotComponent = require_create_component.createSlotComponent;
 exports.createStorageManager = require_storage_manager.createStorageManager;
 exports.createStyled = require_styled.createStyled;
 exports.createSystem = require_create_system.createSystem;
+exports.createVarRules = require_var.createVarRules;
 exports.createVars = require_var.createVars;
 exports.css = require_css.css;
 exports.cssProps = require_props.cssProps;

package/dist/cjs/core/system/create-system.cjs

@@ -33,7 +33,10 @@ const defaultSystem = {
 	breakpoints: require_breakpoint.createBreakpoints(),
 	config: {},
 	cssMap: {},
-	cssVars: {},
+	cssVars: {
+		light: {},
+		dark: {}
+	},
 	layers: require_layer.createLayers(),
 	utils: { getClassName: require_utils_index.utils_exports.bem }
 };
@@ -57,7 +60,6 @@ function createSystem(theme, config = {}, rootNode) {
 	if (theme.themeSchemes) {
 		const themeSchemeEntries = Object.entries(theme.themeSchemes);
 		for (const [themeScheme, nestedTheme] of themeSchemeEntries) {
-			const themeCondition = `[data-theme=${themeScheme}] &:not([data-theme]), &[data-theme=${themeScheme}]`;
 			const nestedPrimaryTokens = {
 				...createTokens(nestedTheme, "primary", shouldProcess),
 				...createColorSchemeTokens(theme, nestedTheme, shouldProcess)
@@ -69,7 +71,8 @@ function createSystem(theme, config = {}, rootNode) {
 				...secondaryTokens,
 				...tertiaryTokens
 			});
-			cssVars[themeCondition] = nestedCSSVars;
+			cssVars.themes ??= {};
+			cssVars.themes[themeScheme] = nestedCSSVars;
 		}
 	}
 	return {

package/dist/cjs/core/system/create-system.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"create-system.cjs","names":["createBreakpoints","createLayers","mergeVars","createVars"],"sources":["../../../../src/core/system/create-system.ts"],"sourcesContent":["import type { Dict, FlattenObjectOptions } from \"../../utils\"\nimport type { CSSAnimationObject, CSSModifierObject } from \"../css\"\nimport type {\n  DefineThemeValue,\n  System,\n  ThemeConfig,\n  UsageTheme,\n} from \"./index.types\"\nimport { bem, flattenObject, isArray, isObject, isUndefined } from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport { createBreakpoints } from \"./breakpoint\"\nimport { createLayers } from \"./layer\"\nimport { createVars, mergeVars } from \"./var\"\n\nexport type VariableResponsiveValue = Dict<\n  [DefineThemeValue, DefineThemeValue] | DefineThemeValue\n>\n\nexport type VariableColorModeValue = [\n  DefineThemeValue | Dict<DefineThemeValue>,\n  DefineThemeValue | Dict<DefineThemeValue>,\n]\n\nexport type VariableKeyframeValue =\n  | [\n      CSSModifierObject | Dict<CSSModifierObject>,\n      CSSModifierObject | Dict<CSSModifierObject>,\n    ]\n  | CSSModifierObject\n  | Dict<CSSModifierObject>\n\nexport type VariableAnimationValue =\n  | CSSAnimationObject\n  | CSSAnimationObject[]\n  | Dict<CSSAnimationObject>\n\nexport type VariableValue =\n  | DefineThemeValue\n  | VariableAnimationValue\n  | VariableColorModeValue\n  | VariableKeyframeValue\n  | VariableResponsiveValue\n\ninterface VariableToken {\n  semantic: boolean\n  value: VariableValue\n}\n\nexport interface VariableTokens {\n  [key: string]: VariableToken\n}\n\ninterface TokenOptions {\n  [key: string]: FlattenObjectOptions\n}\n\nconst primaryTokens = {\n  aspectRatios: {},\n  blurs: {},\n  borders: {},\n  colors: {},\n  durations: {},\n  easings: {},\n  fonts: {},\n  fontSizes: {},\n  fontWeights: {},\n  letterSpacings: {},\n  lineHeights: {},\n  radii: {},\n  sizes: {},\n  spaces: {},\n  zIndices: {},\n} satisfies TokenOptions\n\ntype PrimaryToken = keyof typeof primaryTokens\n\nconst secondaryTokens = {\n  gradients: {},\n  keyframes: { maxDepth: 1 },\n  shadows: {},\n} satisfies TokenOptions\n\ntype SecondaryToken = keyof typeof secondaryTokens\n\nconst tertiaryTokens = {\n  animations: { shouldProcess: (obj) => !obj.keyframes },\n} satisfies TokenOptions\n\ntype TertiaryToken = keyof typeof tertiaryTokens\n\nconst tokenMap: {\n  [key in \"primary\" | \"secondary\" | \"tertiary\"]: TokenOptions\n} = {\n  primary: primaryTokens,\n  secondary: secondaryTokens,\n  tertiary: tertiaryTokens,\n}\n\nexport type ThemeToken =\n  | \"breakpoints\"\n  | PrimaryToken\n  | SecondaryToken\n  | TertiaryToken\n\nexport const defaultSystem: System = {\n  breakpoints: createBreakpoints(),\n  config: {},\n  cssMap: {},\n  cssVars: {},\n  layers: createLayers(),\n  utils: { getClassName: bem },\n}\n\nexport function createSystem(\n  theme: UsageTheme,\n  config: ThemeConfig = {},\n  rootNode?: Document | Node | ShadowRoot,\n): System {\n  const prefix = config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n  const breakpoints = createBreakpoints(theme.breakpoints, config.breakpoint)\n  const layers = createLayers(config.css?.layers)\n  const shouldProcess = config.theme?.responsive\n    ? (obj: any) => !breakpoints.isResponsive(obj, true)\n    : () => true\n\n  const primaryTokens = {\n    ...createTokens(theme, \"primary\", shouldProcess),\n    ...createColorSchemeTokens(theme, undefined, shouldProcess),\n  }\n  const secondaryTokens = createTokens(theme, \"secondary\", shouldProcess)\n  const tertiaryTokens = createTokens(theme, \"tertiary\", shouldProcess)\n\n  const { cssMap, cssVars } = mergeVars(\n    createVars(prefix, theme, breakpoints, rootNode)(primaryTokens),\n    createVars(prefix, theme, breakpoints, rootNode)(secondaryTokens),\n    createVars(prefix, theme, breakpoints, rootNode)(tertiaryTokens),\n  )()\n\n  const getClassName = (\n    block?: string,\n    element?: string,\n    modifier?: string,\n  ) => {\n    if (!block) return \"\"\n\n    const className = bem(block, element, modifier)\n\n    return `${prefix}-${className}`\n  }\n\n  if (theme.themeSchemes) {\n    const themeSchemeEntries = Object.entries<Dict>(theme.themeSchemes)\n\n    for (const [themeScheme, nestedTheme] of themeSchemeEntries) {\n      const themeCondition = `[data-theme=${themeScheme}] &:not([data-theme]), &[data-theme=${themeScheme}]`\n\n      const nestedPrimaryTokens = {\n        ...createTokens(nestedTheme, \"primary\", shouldProcess),\n        ...createColorSchemeTokens(theme, nestedTheme, shouldProcess),\n      }\n      const nestedSecondaryTokens = createTokens(\n        nestedTheme,\n        \"secondary\",\n        shouldProcess,\n      )\n      const nestedTertiaryTokens = createTokens(\n        nestedTheme,\n        \"tertiary\",\n        shouldProcess,\n      )\n\n      const { cssVars: nestedCSSVars } = mergeVars(\n        createVars(prefix, theme, breakpoints, rootNode)(nestedPrimaryTokens),\n        createVars(prefix, theme, breakpoints, rootNode)(nestedSecondaryTokens),\n        createVars(prefix, theme, breakpoints, rootNode)(nestedTertiaryTokens),\n      )({ ...primaryTokens, ...secondaryTokens, ...tertiaryTokens })\n\n      cssVars[themeCondition] = nestedCSSVars\n    }\n  }\n\n  return {\n    breakpoints,\n    config,\n    cssMap,\n    cssVars,\n    layers,\n    rootNode,\n    utils: { getClassName },\n  }\n}\n\nfunction createColorSchemeTokens(\n  theme: Dict,\n  nestedTheme: Dict | undefined,\n  shouldProcess: FlattenObjectOptions[\"shouldProcess\"],\n) {\n  const colors = { base: theme.colors ?? {}, nested: nestedTheme?.colors ?? {} }\n  const semanticColors = {\n    base: theme.semanticTokens?.colors ?? {},\n    nested: nestedTheme?.semanticTokens?.colors ?? {},\n  }\n  const colorSchemeTokens = flattenObject(\n    (nestedTheme ?? theme).semanticTokens?.colorSchemes ?? {},\n    { shouldProcess },\n  )\n\n  const results: VariableTokens = {}\n\n  function insertToken(\n    primaryKey: string,\n    secondaryKey: string | undefined,\n    value: any,\n  ) {\n    if (isUndefined(value)) return\n\n    if (!secondaryKey || secondaryKey === \"base\")\n      results[`colors.${primaryKey}`] = { semantic: true, value }\n    else\n      results[`colors.${primaryKey}.${secondaryKey}`] = {\n        semantic: true,\n        value,\n      }\n  }\n\n  function processValue(primaryKey: string, colors: any, keyOrValue: any) {\n    const value = colors.nested[keyOrValue] ?? colors.base[keyOrValue]\n\n    if (isObject(value)) {\n      const tokens = flattenObject(value, { shouldProcess })\n\n      Object.keys(tokens).forEach((secondaryKey) => {\n        const value =\n          secondaryKey === \"base\" ? keyOrValue : `${keyOrValue}.${secondaryKey}`\n\n        insertToken(primaryKey, secondaryKey, value)\n      })\n    } else {\n      insertToken(primaryKey, undefined, keyOrValue)\n    }\n  }\n\n  function processColorModeValue(\n    primaryKey: string,\n    colors: any,\n    keyOrValue: any[],\n  ) {\n    const [lightValue, darkValue] = keyOrValue\n    const lightColors = colors.nested[lightValue] ?? colors.base[lightValue]\n    const darkColors = colors.nested[darkValue] ?? colors.base[darkValue]\n\n    if (isObject(lightColors) && isObject(darkColors)) {\n      const tokens = flattenObject(lightColors, { shouldProcess })\n\n      Object.keys(tokens).forEach((secondaryKey) => {\n        const value = [\n          secondaryKey === \"base\"\n            ? lightValue\n            : `${lightValue}.${secondaryKey}`,\n          secondaryKey === \"base\" ? darkValue : `${darkValue}.${secondaryKey}`,\n        ]\n\n        insertToken(primaryKey, secondaryKey, value)\n      })\n    } else if (!isObject(lightValue) && !isObject(darkValue)) {\n      insertToken(primaryKey, undefined, [lightValue, darkValue])\n    }\n  }\n\n  Object.entries(colorSchemeTokens).forEach(([primaryKey, value]) => {\n    if (isArray(value)) {\n      processColorModeValue(primaryKey, colors, value)\n      processColorModeValue(primaryKey, semanticColors, value)\n    } else {\n      processValue(primaryKey, colors, value)\n      processValue(primaryKey, semanticColors, value)\n    }\n  })\n\n  return results\n}\n\nfunction createTokens(\n  theme: Dict,\n  target: \"primary\" | \"secondary\" | \"tertiary\",\n  shouldProcess: FlattenObjectOptions[\"shouldProcess\"] = () => true,\n) {\n  const results: VariableTokens = {}\n\n  Object.entries(tokenMap[target]).forEach(\n    ([primaryKey, { shouldProcess: shouldProcessProp, ...rest }]) => {\n      const options: FlattenObjectOptions = {\n        ...rest,\n        shouldProcess: (obj) =>\n          shouldProcess(obj) && (!shouldProcessProp || shouldProcessProp(obj)),\n      }\n\n      const tokens = flattenObject(theme[primaryKey] ?? {}, options)\n      const semanticTokens = flattenObject(\n        theme.semanticTokens?.[primaryKey] ?? {},\n        options,\n      )\n\n      Object.entries(tokens).forEach(([secondaryKey, value]) => {\n        const token = `${primaryKey}.${secondaryKey}`\n\n        results[token] = { semantic: false, value }\n      })\n\n      Object.entries(semanticTokens).forEach(([secondaryKey, value]) => {\n        let token = `${primaryKey}.${secondaryKey}`\n\n        if (token.endsWith(\".base\")) token = token.replace(\".base\", \"\")\n\n        results[token] = { semantic: true, value }\n      })\n    },\n  )\n\n  return results\n}\n"],"mappings":";;;;;;AA0FA,MAAM,WAEF;CACF,SAAS;EApCT,cAAc,CAAC;EACf,OAAO,CAAC;EACR,SAAS,CAAC;EACV,QAAQ,CAAC;EACT,WAAW,CAAC;EACZ,SAAS,CAAC;EACV,OAAO,CAAC;EACR,WAAW,CAAC;EACZ,aAAa,CAAC;EACd,gBAAgB,CAAC;EACjB,aAAa,CAAC;EACd,OAAO,CAAC;EACR,OAAO,CAAC;EACR,QAAQ,CAAC;EACT,UAAU,CAAC;CAsBU;CACrB,WAAW;EAjBX,WAAW,CAAC;EACZ,WAAW,EAAE,UAAU,EAAE;EACzB,SAAS,CAAC;CAee;CACzB,UAAU,EAVV,YAAY,EAAE,gBAAgB,QAAQ,CAAC,IAAI,UAAU,EAU9B;AACzB;AAQA,MAAa,gBAAwB;CACnC,aAAaA,mBAAAA,kBAAkB;CAC/B,QAAQ,CAAC;CACT,QAAQ,CAAC;CACT,SAAS,CAAC;CACV,QAAQC,cAAAA,aAAa;CACrB,OAAO,EAAE,cAAA,oBAAA,cAAc,IAAI;AAC7B;AAEA,SAAgB,aACd,OACA,SAAsB,CAAC,GACvB,UACQ;CACR,MAAM,SAAS,OAAO,KAAK,aAAA;CAC3B,MAAM,cAAcD,mBAAAA,kBAAkB,MAAM,aAAa,OAAO,UAAU;CAC1E,MAAM,SAASC,cAAAA,aAAa,OAAO,KAAK,MAAM;CAC9C,MAAM,gBAAgB,OAAO,OAAO,cAC/B,QAAa,CAAC,YAAY,aAAa,KAAK,IAAI,UAC3C;CAEV,MAAM,gBAAgB;EACpB,GAAG,aAAa,OAAO,WAAW,aAAa;EAC/C,GAAG,wBAAwB,OAAO,KAAA,GAAW,aAAa;CAC5D;CACA,MAAM,kBAAkB,aAAa,OAAO,aAAa,aAAa;CACtE,MAAM,iBAAiB,aAAa,OAAO,YAAY,aAAa;CAEpE,MAAM,EAAE,QAAQ,YAAYC,YAAAA,UAC1BC,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,aAAa,GAC9DA,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,eAAe,GAChEA,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,cAAc,CACjE,CAAC,CAAC;CAEF,MAAM,gBACJ,OACA,SACA,aACG;EACH,IAAI,CAAC,OAAO,OAAO;EAEnB,MAAM,aAAA,GAAA,oBAAA,cAAA,IAAA,CAAgB,OAAO,SAAS,QAAQ;EAE9C,OAAO,GAAG,OAAO,GAAG;CACtB;CAEA,IAAI,MAAM,cAAc;EACtB,MAAM,qBAAqB,OAAO,QAAc,MAAM,YAAY;EAElE,KAAK,MAAM,CAAC,aAAa,gBAAgB,oBAAoB;GAC3D,MAAM,iBAAiB,eAAe,YAAY,sCAAsC,YAAY;GAEpG,MAAM,sBAAsB;IAC1B,GAAG,aAAa,aAAa,WAAW,aAAa;IACrD,GAAG,wBAAwB,OAAO,aAAa,aAAa;GAC9D;GACA,MAAM,wBAAwB,aAC5B,aACA,aACA,aACF;GACA,MAAM,uBAAuB,aAC3B,aACA,YACA,aACF;GAEA,MAAM,EAAE,SAAS,kBAAkBD,YAAAA,UACjCC,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,mBAAmB,GACpEA,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,qBAAqB,GACtEA,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,oBAAoB,CACvE,CAAC,CAAC;IAAE,GAAG;IAAe,GAAG;IAAiB,GAAG;GAAe,CAAC;GAE7D,QAAQ,kBAAkB;EAC5B;CACF;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,OAAO,EAAE,aAAa;CACxB;AACF;AAEA,SAAS,wBACP,OACA,aACA,eACA;CACA,MAAM,SAAS;EAAE,MAAM,MAAM,UAAU,CAAC;EAAG,QAAQ,aAAa,UAAU,CAAC;CAAE;CAC7E,MAAM,iBAAiB;EACrB,MAAM,MAAM,gBAAgB,UAAU,CAAC;EACvC,QAAQ,aAAa,gBAAgB,UAAU,CAAC;CAClD;CACA,MAAM,qBAAA,GAAA,oBAAA,cAAA,cAAA,EACH,eAAe,MAAA,CAAO,gBAAgB,gBAAgB,CAAC,GACxD,EAAE,cAAc,CAClB;CAEA,MAAM,UAA0B,CAAC;CAEjC,SAAS,YACP,YACA,cACA,OACA;EACA,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,KAAK,GAAG;EAExB,IAAI,CAAC,gBAAgB,iBAAiB,QACpC,QAAQ,UAAU,gBAAgB;GAAE,UAAU;GAAM;EAAM;OAE1D,QAAQ,UAAU,WAAW,GAAG,kBAAkB;GAChD,UAAU;GACV;EACF;CACJ;CAEA,SAAS,aAAa,YAAoB,QAAa,YAAiB;EACtE,MAAM,QAAQ,OAAO,OAAO,eAAe,OAAO,KAAK;EAEvD,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GAAG;GACnB,MAAM,UAAA,GAAA,oBAAA,cAAA,cAAA,CAAuB,OAAO,EAAE,cAAc,CAAC;GAErD,OAAO,KAAK,MAAM,CAAC,CAAC,SAAS,iBAAiB;IAI5C,YAAY,YAAY,cAFtB,iBAAiB,SAAS,aAAa,GAAG,WAAW,GAAG,cAEf;GAC7C,CAAC;EACH,OACE,YAAY,YAAY,KAAA,GAAW,UAAU;CAEjD;CAEA,SAAS,sBACP,YACA,QACA,YACA;EACA,MAAM,CAAC,YAAY,aAAa;EAChC,MAAM,cAAc,OAAO,OAAO,eAAe,OAAO,KAAK;EAC7D,MAAM,aAAa,OAAO,OAAO,cAAc,OAAO,KAAK;EAE3D,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,WAAW,MAAA,GAAA,oBAAA,cAAA,SAAA,CAAc,UAAU,GAAG;GACjD,MAAM,UAAA,GAAA,oBAAA,cAAA,cAAA,CAAuB,aAAa,EAAE,cAAc,CAAC;GAE3D,OAAO,KAAK,MAAM,CAAC,CAAC,SAAS,iBAAiB;IAQ5C,YAAY,YAAY,cAAc,CANpC,iBAAiB,SACb,aACA,GAAG,WAAW,GAAG,gBACrB,iBAAiB,SAAS,YAAY,GAAG,UAAU,GAAG,cAGd,CAAC;GAC7C,CAAC;EACH,OAAO,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,UAAU,KAAK,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,SAAS,GACrD,YAAY,YAAY,KAAA,GAAW,CAAC,YAAY,SAAS,CAAC;CAE9D;CAEA,OAAO,QAAQ,iBAAiB,CAAC,CAAC,SAAS,CAAC,YAAY,WAAW;EACjE,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,GAAG;GAClB,sBAAsB,YAAY,QAAQ,KAAK;GAC/C,sBAAsB,YAAY,gBAAgB,KAAK;EACzD,OAAO;GACL,aAAa,YAAY,QAAQ,KAAK;GACtC,aAAa,YAAY,gBAAgB,KAAK;EAChD;CACF,CAAC;CAED,OAAO;AACT;AAEA,SAAS,aACP,OACA,QACA,sBAA6D,MAC7D;CACA,MAAM,UAA0B,CAAC;CAEjC,OAAO,QAAQ,SAAS,OAAO,CAAC,CAAC,SAC9B,CAAC,YAAY,EAAE,eAAe,mBAAmB,GAAG,YAAY;EAC/D,MAAM,UAAgC;GACpC,GAAG;GACH,gBAAgB,QACd,cAAc,GAAG,MAAM,CAAC,qBAAqB,kBAAkB,GAAG;EACtE;EAEA,MAAM,UAAA,GAAA,oBAAA,cAAA,cAAA,CAAuB,MAAM,eAAe,CAAC,GAAG,OAAO;EAC7D,MAAM,kBAAA,GAAA,oBAAA,cAAA,cAAA,CACJ,MAAM,iBAAiB,eAAe,CAAC,GACvC,OACF;EAEA,OAAO,QAAQ,MAAM,CAAC,CAAC,SAAS,CAAC,cAAc,WAAW;GACxD,MAAM,QAAQ,GAAG,WAAW,GAAG;GAE/B,QAAQ,SAAS;IAAE,UAAU;IAAO;GAAM;EAC5C,CAAC;EAED,OAAO,QAAQ,cAAc,CAAC,CAAC,SAAS,CAAC,cAAc,WAAW;GAChE,IAAI,QAAQ,GAAG,WAAW,GAAG;GAE7B,IAAI,MAAM,SAAS,OAAO,GAAG,QAAQ,MAAM,QAAQ,SAAS,EAAE;GAE9D,QAAQ,SAAS;IAAE,UAAU;IAAM;GAAM;EAC3C,CAAC;CACH,CACF;CAEA,OAAO;AACT"}
+{"version":3,"file":"create-system.cjs","names":["createBreakpoints","createLayers","mergeVars","createVars"],"sources":["../../../../src/core/system/create-system.ts"],"sourcesContent":["import type { Dict, FlattenObjectOptions } from \"../../utils\"\nimport type { CSSAnimationObject, CSSModifierObject } from \"../css\"\nimport type {\n  DefineThemeValue,\n  System,\n  ThemeConfig,\n  UsageTheme,\n} from \"./index.types\"\nimport { bem, flattenObject, isArray, isObject, isUndefined } from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport { createBreakpoints } from \"./breakpoint\"\nimport { createLayers } from \"./layer\"\nimport { createVars, mergeVars } from \"./var\"\n\nexport type VariableResponsiveValue = Dict<\n  [DefineThemeValue, DefineThemeValue] | DefineThemeValue\n>\n\nexport type VariableColorModeValue = [\n  DefineThemeValue | Dict<DefineThemeValue>,\n  DefineThemeValue | Dict<DefineThemeValue>,\n]\n\nexport type VariableKeyframeValue =\n  | [\n      CSSModifierObject | Dict<CSSModifierObject>,\n      CSSModifierObject | Dict<CSSModifierObject>,\n    ]\n  | CSSModifierObject\n  | Dict<CSSModifierObject>\n\nexport type VariableAnimationValue =\n  | CSSAnimationObject\n  | CSSAnimationObject[]\n  | Dict<CSSAnimationObject>\n\nexport type VariableValue =\n  | DefineThemeValue\n  | VariableAnimationValue\n  | VariableColorModeValue\n  | VariableKeyframeValue\n  | VariableResponsiveValue\n\ninterface VariableToken {\n  semantic: boolean\n  value: VariableValue\n}\n\nexport interface VariableTokens {\n  [key: string]: VariableToken\n}\n\ninterface TokenOptions {\n  [key: string]: FlattenObjectOptions\n}\n\nconst primaryTokens = {\n  aspectRatios: {},\n  blurs: {},\n  borders: {},\n  colors: {},\n  durations: {},\n  easings: {},\n  fonts: {},\n  fontSizes: {},\n  fontWeights: {},\n  letterSpacings: {},\n  lineHeights: {},\n  radii: {},\n  sizes: {},\n  spaces: {},\n  zIndices: {},\n} satisfies TokenOptions\n\ntype PrimaryToken = keyof typeof primaryTokens\n\nconst secondaryTokens = {\n  gradients: {},\n  keyframes: { maxDepth: 1 },\n  shadows: {},\n} satisfies TokenOptions\n\ntype SecondaryToken = keyof typeof secondaryTokens\n\nconst tertiaryTokens = {\n  animations: { shouldProcess: (obj) => !obj.keyframes },\n} satisfies TokenOptions\n\ntype TertiaryToken = keyof typeof tertiaryTokens\n\nconst tokenMap: {\n  [key in \"primary\" | \"secondary\" | \"tertiary\"]: TokenOptions\n} = {\n  primary: primaryTokens,\n  secondary: secondaryTokens,\n  tertiary: tertiaryTokens,\n}\n\nexport type ThemeToken =\n  | \"breakpoints\"\n  | PrimaryToken\n  | SecondaryToken\n  | TertiaryToken\n\nexport const defaultSystem: System = {\n  breakpoints: createBreakpoints(),\n  config: {},\n  cssMap: {},\n  cssVars: { light: {}, dark: {} },\n  layers: createLayers(),\n  utils: { getClassName: bem },\n}\n\nexport function createSystem(\n  theme: UsageTheme,\n  config: ThemeConfig = {},\n  rootNode?: Document | Node | ShadowRoot,\n): System {\n  const prefix = config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n  const breakpoints = createBreakpoints(theme.breakpoints, config.breakpoint)\n  const layers = createLayers(config.css?.layers)\n  const shouldProcess = config.theme?.responsive\n    ? (obj: any) => !breakpoints.isResponsive(obj, true)\n    : () => true\n\n  const primaryTokens = {\n    ...createTokens(theme, \"primary\", shouldProcess),\n    ...createColorSchemeTokens(theme, undefined, shouldProcess),\n  }\n  const secondaryTokens = createTokens(theme, \"secondary\", shouldProcess)\n  const tertiaryTokens = createTokens(theme, \"tertiary\", shouldProcess)\n\n  const { cssMap, cssVars } = mergeVars(\n    createVars(prefix, theme, breakpoints, rootNode)(primaryTokens),\n    createVars(prefix, theme, breakpoints, rootNode)(secondaryTokens),\n    createVars(prefix, theme, breakpoints, rootNode)(tertiaryTokens),\n  )()\n\n  const getClassName = (\n    block?: string,\n    element?: string,\n    modifier?: string,\n  ) => {\n    if (!block) return \"\"\n\n    const className = bem(block, element, modifier)\n\n    return `${prefix}-${className}`\n  }\n\n  if (theme.themeSchemes) {\n    const themeSchemeEntries = Object.entries<Dict>(theme.themeSchemes)\n\n    for (const [themeScheme, nestedTheme] of themeSchemeEntries) {\n      const nestedPrimaryTokens = {\n        ...createTokens(nestedTheme, \"primary\", shouldProcess),\n        ...createColorSchemeTokens(theme, nestedTheme, shouldProcess),\n      }\n      const nestedSecondaryTokens = createTokens(\n        nestedTheme,\n        \"secondary\",\n        shouldProcess,\n      )\n      const nestedTertiaryTokens = createTokens(\n        nestedTheme,\n        \"tertiary\",\n        shouldProcess,\n      )\n\n      const { cssVars: nestedCSSVars } = mergeVars(\n        createVars(prefix, theme, breakpoints, rootNode)(nestedPrimaryTokens),\n        createVars(prefix, theme, breakpoints, rootNode)(nestedSecondaryTokens),\n        createVars(prefix, theme, breakpoints, rootNode)(nestedTertiaryTokens),\n      )({ ...primaryTokens, ...secondaryTokens, ...tertiaryTokens })\n\n      cssVars.themes ??= {}\n      cssVars.themes[themeScheme] = nestedCSSVars\n    }\n  }\n\n  return {\n    breakpoints,\n    config,\n    cssMap,\n    cssVars,\n    layers,\n    rootNode,\n    utils: { getClassName },\n  }\n}\n\nfunction createColorSchemeTokens(\n  theme: Dict,\n  nestedTheme: Dict | undefined,\n  shouldProcess: FlattenObjectOptions[\"shouldProcess\"],\n) {\n  const colors = { base: theme.colors ?? {}, nested: nestedTheme?.colors ?? {} }\n  const semanticColors = {\n    base: theme.semanticTokens?.colors ?? {},\n    nested: nestedTheme?.semanticTokens?.colors ?? {},\n  }\n  const colorSchemeTokens = flattenObject(\n    (nestedTheme ?? theme).semanticTokens?.colorSchemes ?? {},\n    { shouldProcess },\n  )\n\n  const results: VariableTokens = {}\n\n  function insertToken(\n    primaryKey: string,\n    secondaryKey: string | undefined,\n    value: any,\n  ) {\n    if (isUndefined(value)) return\n\n    if (!secondaryKey || secondaryKey === \"base\")\n      results[`colors.${primaryKey}`] = { semantic: true, value }\n    else\n      results[`colors.${primaryKey}.${secondaryKey}`] = {\n        semantic: true,\n        value,\n      }\n  }\n\n  function processValue(primaryKey: string, colors: any, keyOrValue: any) {\n    const value = colors.nested[keyOrValue] ?? colors.base[keyOrValue]\n\n    if (isObject(value)) {\n      const tokens = flattenObject(value, { shouldProcess })\n\n      Object.keys(tokens).forEach((secondaryKey) => {\n        const value =\n          secondaryKey === \"base\" ? keyOrValue : `${keyOrValue}.${secondaryKey}`\n\n        insertToken(primaryKey, secondaryKey, value)\n      })\n    } else {\n      insertToken(primaryKey, undefined, keyOrValue)\n    }\n  }\n\n  function processColorModeValue(\n    primaryKey: string,\n    colors: any,\n    keyOrValue: any[],\n  ) {\n    const [lightValue, darkValue] = keyOrValue\n    const lightColors = colors.nested[lightValue] ?? colors.base[lightValue]\n    const darkColors = colors.nested[darkValue] ?? colors.base[darkValue]\n\n    if (isObject(lightColors) && isObject(darkColors)) {\n      const tokens = flattenObject(lightColors, { shouldProcess })\n\n      Object.keys(tokens).forEach((secondaryKey) => {\n        const value = [\n          secondaryKey === \"base\"\n            ? lightValue\n            : `${lightValue}.${secondaryKey}`,\n          secondaryKey === \"base\" ? darkValue : `${darkValue}.${secondaryKey}`,\n        ]\n\n        insertToken(primaryKey, secondaryKey, value)\n      })\n    } else if (!isObject(lightValue) && !isObject(darkValue)) {\n      insertToken(primaryKey, undefined, [lightValue, darkValue])\n    }\n  }\n\n  Object.entries(colorSchemeTokens).forEach(([primaryKey, value]) => {\n    if (isArray(value)) {\n      processColorModeValue(primaryKey, colors, value)\n      processColorModeValue(primaryKey, semanticColors, value)\n    } else {\n      processValue(primaryKey, colors, value)\n      processValue(primaryKey, semanticColors, value)\n    }\n  })\n\n  return results\n}\n\nfunction createTokens(\n  theme: Dict,\n  target: \"primary\" | \"secondary\" | \"tertiary\",\n  shouldProcess: FlattenObjectOptions[\"shouldProcess\"] = () => true,\n) {\n  const results: VariableTokens = {}\n\n  Object.entries(tokenMap[target]).forEach(\n    ([primaryKey, { shouldProcess: shouldProcessProp, ...rest }]) => {\n      const options: FlattenObjectOptions = {\n        ...rest,\n        shouldProcess: (obj) =>\n          shouldProcess(obj) && (!shouldProcessProp || shouldProcessProp(obj)),\n      }\n\n      const tokens = flattenObject(theme[primaryKey] ?? {}, options)\n      const semanticTokens = flattenObject(\n        theme.semanticTokens?.[primaryKey] ?? {},\n        options,\n      )\n\n      Object.entries(tokens).forEach(([secondaryKey, value]) => {\n        const token = `${primaryKey}.${secondaryKey}`\n\n        results[token] = { semantic: false, value }\n      })\n\n      Object.entries(semanticTokens).forEach(([secondaryKey, value]) => {\n        let token = `${primaryKey}.${secondaryKey}`\n\n        if (token.endsWith(\".base\")) token = token.replace(\".base\", \"\")\n\n        results[token] = { semantic: true, value }\n      })\n    },\n  )\n\n  return results\n}\n"],"mappings":"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"}

package/dist/cjs/core/system/index.cjs

@@ -28,6 +28,7 @@ exports.createLayers = require_layer.createLayers;
 exports.createStorageManager = require_storage_manager.createStorageManager;
 exports.createStyled = require_styled.createStyled;
 exports.createSystem = require_create_system.createSystem;
+exports.createVarRules = require_var.createVarRules;
 exports.createVars = require_var.createVars;
 exports.defaultEnvironment = require_environment_provider.defaultEnvironment;
 exports.defaultLayers = require_layer.defaultLayers;

package/dist/cjs/core/system/theme-provider.cjs

@@ -3,6 +3,7 @@ const require_utils_index = require("../../utils/index.cjs");
 const require_constant = require("../constant.cjs");
 const require_environment_provider = require("./environment-provider.cjs");
 const require_storage_manager = require("./storage-manager.cjs");
+const require_var = require("./var.cjs");
 const require_system_provider = require("./system-provider.cjs");
 const require_css = require("../css/css.cjs");
 let react = require("react");
@@ -84,7 +85,7 @@ const GlobalStyles = () => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.Global, { styles: [
 		atRule,
 		wrap("tokens", (0, react.useMemo)(() => {
-			return { [system.config.css?.varRoot ?? ":host, :root, [data-mode]"]: system.cssVars };
+			return require_var.createVarRules(system.config.css?.varRoot ?? ":host, :root", system.cssVars);
 		}, [system])),
 		wrap("reset", resetStyle),
 		wrap("global", globalStyle)

package/dist/cjs/core/system/theme-provider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.cjs","names":["THEME_SCHEME_STORAGE_KEY","createStorageManager","useEnvironment","EmotionThemeProvider","useSystem","css","Global","ThemeContext"],"sources":["../../../../src/core/system/theme-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProviderProps as EmotionThemeProviderProps } from \"@emotion/react\"\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { Environment } from \"./environment-provider\"\nimport type {\n  ChangeThemeScheme,\n  StyledTheme,\n  Theme,\n  ThemeConfig,\n  ThemeScheme,\n  UsageTheme,\n} from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n  ThemeProvider as EmotionThemeProvider,\n  Global,\n  ThemeContext,\n} from \"@emotion/react\"\nimport { use, useCallback, useEffect, useMemo, useState } from \"react\"\nimport {\n  isEmptyObject,\n  isObject,\n  isShadowRoot,\n  isUndefined,\n  merge,\n} from \"../../utils\"\nimport { THEME_SCHEME_STORAGE_KEY } from \"../constant\"\nimport { css } from \"../css\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { useSystem } from \"./system-provider\"\n\nexport const getPreventTransition = (environment: Environment) => {\n  const win = environment.getWindow()\n  const doc = environment.getDocument()\n  const root = environment.getRootElement()\n  const rootNode = environment.getRootNode()\n\n  if (!win || !doc || !root) return\n\n  const css = doc.createElement(\"style\")\n  const shadowRoot = isShadowRoot(rootNode)\n  const selector = shadowRoot ? \":host, *\" : \"*\"\n  const container = shadowRoot ? rootNode : doc.head\n\n  const node = doc.createTextNode(\n    `${selector}{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n  )\n\n  css.appendChild(node)\n\n  container.appendChild(css)\n\n  return () => {\n    const forceReflow = () => win.getComputedStyle(root)\n\n    forceReflow()\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        container.removeChild(css)\n      })\n    })\n  }\n}\n\nexport interface ThemeProviderProps\n  extends\n    PropsWithChildren,\n    Omit<EmotionThemeProviderProps, \"children\" | \"theme\"> {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * If `storage` is `cookie`, the cookie to use.\n   * If not provided, the cookie will be set to `document.cookie`.\n   */\n  cookie?: string\n  /**\n   * The storage to use.\n   * If you are using a server-side rendering library, you should use `cookie`.\n   *\n   * @default 'localStorage'\n   */\n  storage?: Storage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n}\n\nexport const ThemeProvider: FC<ThemeProviderProps> = ({\n  children,\n  config,\n  cookie,\n  storage = cookie ? \"cookie\" : \"localStorage\",\n  storageKey = THEME_SCHEME_STORAGE_KEY,\n  theme = {},\n}) => {\n  const { defaultThemeScheme = \"base\", disableTransitionOnChange } =\n    config ?? {}\n  const storageManager = useMemo(\n    () => createStorageManager(storage, storageKey, defaultThemeScheme, cookie),\n    [cookie, defaultThemeScheme, storage, storageKey],\n  )\n  const environment = useEnvironment()\n  const [themeScheme, setThemeScheme] = useState<ThemeScheme>(\n    storageManager.get(),\n  )\n\n  const changeThemeScheme: ChangeThemeScheme = useCallback(\n    (themeScheme) => {\n      const root = environment.getRootElement()\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      if (root) root.dataset.theme = themeScheme\n\n      cleanup?.()\n\n      setThemeScheme(themeScheme)\n\n      storageManager.set(themeScheme)\n    },\n    [disableTransitionOnChange, environment, storageManager],\n  )\n\n  useEffect(() => {\n    const themeScheme = storageManager.get()\n\n    changeThemeScheme(themeScheme)\n  }, [changeThemeScheme, storageManager])\n\n  return (\n    <EmotionThemeProvider theme={{ changeThemeScheme, themeScheme, ...theme }}>\n      <GlobalStyles />\n\n      {children}\n    </EmotionThemeProvider>\n  )\n}\n\nexport const GlobalStyles: FC = () => {\n  const system = useSystem()\n  const { theme } = useTheme<UsageTheme>()\n  const { atRule, wrap } = system.layers\n\n  const resetStyle = useMemo(() => {\n    const style = theme.styles?.resetStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const globalStyle = useMemo(() => {\n    const style = theme.styles?.globalStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const cssVars = useMemo(() => {\n    return {\n      [system.config.css?.varRoot ?? \":host, :root, [data-mode]\"]:\n        system.cssVars,\n    }\n  }, [system])\n\n  return (\n    <Global\n      styles={[\n        atRule,\n        wrap(\"tokens\", cssVars),\n        wrap(\"reset\", resetStyle),\n        wrap(\"global\", globalStyle),\n      ]}\n    />\n  )\n}\n\n/**\n * `useTheme` is a custom hook that returns a function for retrieving and switching themes.\n *\n * @see https://yamada-ui.com/docs/hooks/use-theme\n */\nexport const useTheme = <Y extends UsageTheme = Theme>() => {\n  const internalTheme = use(ThemeContext) as StyledTheme<Y>\n\n  const theme = useMemo(() => {\n    const { themeScheme } = internalTheme\n\n    if (isUndefined(themeScheme) || themeScheme === \"base\") return internalTheme\n\n    const nestedTheme =\n      \"themeSchemes\" in internalTheme && isObject(internalTheme.themeSchemes)\n        ? internalTheme.themeSchemes[themeScheme as string]\n        : undefined\n\n    if (!nestedTheme) return internalTheme\n\n    return merge<StyledTheme<Y>>(internalTheme, nestedTheme)\n  }, [internalTheme])\n\n  const value = useMemo(() => {\n    const { changeThemeScheme, themeScheme } = internalTheme\n\n    return {\n      changeThemeScheme,\n      internalTheme,\n      theme,\n      themeScheme,\n    }\n  }, [theme, internalTheme])\n\n  return value\n}\n"],"mappings":";;;;;;;;;;;AAiCA,MAAa,wBAAwB,gBAA6B;CAChE,MAAM,MAAM,YAAY,UAAU;CAClC,MAAM,MAAM,YAAY,YAAY;CACpC,MAAM,OAAO,YAAY,eAAe;CACxC,MAAM,WAAW,YAAY,YAAY;CAEzC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM;CAE3B,MAAM,MAAM,IAAI,cAAc,OAAO;CACrC,MAAM,cAAA,GAAA,oBAAA,cAAA,aAAA,CAA0B,QAAQ;CACxC,MAAM,WAAW,aAAa,aAAa;CAC3C,MAAM,YAAY,aAAa,WAAW,IAAI;CAE9C,MAAM,OAAO,IAAI,eACf,GAAG,SAAS,wJACd;CAEA,IAAI,YAAY,IAAI;CAEpB,UAAU,YAAY,GAAG;CAEzB,aAAa;EACX,MAAM,oBAAoB,IAAI,iBAAiB,IAAI;EAEnD,YAAY;EAEZ,4BAA4B;GAC1B,4BAA4B;IAC1B,UAAU,YAAY,GAAG;GAC3B,CAAC;EACH,CAAC;CACH;AACF;AAiCA,MAAa,iBAAyC,EACpD,UACA,QACA,QACA,UAAU,SAAS,WAAW,gBAC9B,aAAaA,iBAAAA,0BACb,QAAQ,CAAC,QACL;CACJ,MAAM,EAAE,qBAAqB,QAAQ,8BACnC,UAAU,CAAC;CACb,MAAM,kBAAA,GAAA,MAAA,QAAA,OACEC,wBAAAA,qBAAqB,SAAS,YAAY,oBAAoB,MAAM,GAC1E;EAAC;EAAQ;EAAoB;EAAS;CAAU,CAClD;CACA,MAAM,cAAcC,6BAAAA,eAAe;CACnC,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,SAAA,CAClB,eAAe,IAAI,CACrB;CAEA,MAAM,qBAAA,GAAA,MAAA,YAAA,EACH,gBAAgB;EACf,MAAM,OAAO,YAAY,eAAe;EAExC,MAAM,UAAU,4BACZ,qBAAqB,WAAW,IAChC,KAAA;EAEJ,IAAI,MAAM,KAAK,QAAQ,QAAQ;EAE/B,UAAU;EAEV,eAAe,WAAW;EAE1B,eAAe,IAAI,WAAW;CAChC,GACA;EAAC;EAA2B;EAAa;CAAc,CACzD;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,cAAc,eAAe,IAAI;EAEvC,kBAAkB,WAAW;CAC/B,GAAG,CAAC,mBAAmB,cAAc,CAAC;CAEtC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,eAAAA,eAAD;EAAsB,OAAO;GAAE;GAAmB;GAAa,GAAG;EAAM;YAAxE,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD,CAAe,CAAA,GAEd,QACmB;;AAE1B;AAEA,MAAa,qBAAyB;CACpC,MAAM,SAASC,wBAAAA,UAAU;CACzB,MAAM,EAAE,UAAU,SAAqB;CACvC,MAAM,EAAE,QAAQ,SAAS,OAAO;CAEhC,MAAM,cAAA,GAAA,MAAA,QAAA,OAA2B;EAC/B,MAAM,QAAQ,MAAM,QAAQ;EAE5B,IAAI,CAAC,UAAA,GAAA,oBAAA,cAAA,cAAA,CAAuB,KAAK,GAAG,OAAO,KAAA;EAE3C,OAAOC,YAAAA,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK;CACjC,GAAG,CAAC,QAAQ,KAAK,CAAC;CAElB,MAAM,eAAA,GAAA,MAAA,QAAA,OAA4B;EAChC,MAAM,QAAQ,MAAM,QAAQ;EAE5B,IAAI,CAAC,UAAA,GAAA,oBAAA,cAAA,cAAA,CAAuB,KAAK,GAAG,OAAO,KAAA;EAE3C,OAAOA,YAAAA,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK;CACjC,GAAG,CAAC,QAAQ,KAAK,CAAC;CASlB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD,EACE,QAAQ;EACN;EACA,KAAK,WAAA,GAAA,MAAA,QAAA,OAXmB;GAC5B,OAAO,GACJ,OAAO,OAAO,KAAK,WAAW,8BAC7B,OAAO,QACX;EACF,GAAG,CAAC,MAAM,CAMiB,CAAC;EACtB,KAAK,SAAS,UAAU;EACxB,KAAK,UAAU,WAAW;CAC5B,EACD,CAAA;AAEL;;;;;;AAOA,MAAa,iBAA+C;CAC1D,MAAM,iBAAA,GAAA,MAAA,IAAA,CAAoBC,eAAAA,YAAY;CAEtC,MAAM,SAAA,GAAA,MAAA,QAAA,OAAsB;EAC1B,MAAM,EAAE,gBAAgB;EAExB,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,WAAW,KAAK,gBAAgB,QAAQ,OAAO;EAE/D,MAAM,cACJ,kBAAkB,kBAAA,GAAA,oBAAA,cAAA,SAAA,CAA0B,cAAc,YAAY,IAClE,cAAc,aAAa,eAC3B,KAAA;EAEN,IAAI,CAAC,aAAa,OAAO;EAEzB,QAAA,GAAA,oBAAA,cAAA,MAAA,CAA6B,eAAe,WAAW;CACzD,GAAG,CAAC,aAAa,CAAC;CAalB,QAAA,GAAA,MAAA,QAAA,OAX4B;EAC1B,MAAM,EAAE,mBAAmB,gBAAgB;EAE3C,OAAO;GACL;GACA;GACA;GACA;EACF;CACF,GAAG,CAAC,OAAO,aAAa,CAEb;AACb"}
+{"version":3,"file":"theme-provider.cjs","names":["THEME_SCHEME_STORAGE_KEY","createStorageManager","useEnvironment","EmotionThemeProvider","useSystem","css","Global","createVarRules","ThemeContext"],"sources":["../../../../src/core/system/theme-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProviderProps as EmotionThemeProviderProps } from \"@emotion/react\"\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { Environment } from \"./environment-provider\"\nimport type {\n  ChangeThemeScheme,\n  StyledTheme,\n  Theme,\n  ThemeConfig,\n  ThemeScheme,\n  UsageTheme,\n} from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n  ThemeProvider as EmotionThemeProvider,\n  Global,\n  ThemeContext,\n} from \"@emotion/react\"\nimport { use, useCallback, useEffect, useMemo, useState } from \"react\"\nimport {\n  isEmptyObject,\n  isObject,\n  isShadowRoot,\n  isUndefined,\n  merge,\n} from \"../../utils\"\nimport { THEME_SCHEME_STORAGE_KEY } from \"../constant\"\nimport { css } from \"../css\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { useSystem } from \"./system-provider\"\nimport { createVarRules } from \"./var\"\n\nexport const getPreventTransition = (environment: Environment) => {\n  const win = environment.getWindow()\n  const doc = environment.getDocument()\n  const root = environment.getRootElement()\n  const rootNode = environment.getRootNode()\n\n  if (!win || !doc || !root) return\n\n  const css = doc.createElement(\"style\")\n  const shadowRoot = isShadowRoot(rootNode)\n  const selector = shadowRoot ? \":host, *\" : \"*\"\n  const container = shadowRoot ? rootNode : doc.head\n\n  const node = doc.createTextNode(\n    `${selector}{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n  )\n\n  css.appendChild(node)\n\n  container.appendChild(css)\n\n  return () => {\n    const forceReflow = () => win.getComputedStyle(root)\n\n    forceReflow()\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        container.removeChild(css)\n      })\n    })\n  }\n}\n\nexport interface ThemeProviderProps\n  extends\n    PropsWithChildren,\n    Omit<EmotionThemeProviderProps, \"children\" | \"theme\"> {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * If `storage` is `cookie`, the cookie to use.\n   * If not provided, the cookie will be set to `document.cookie`.\n   */\n  cookie?: string\n  /**\n   * The storage to use.\n   * If you are using a server-side rendering library, you should use `cookie`.\n   *\n   * @default 'localStorage'\n   */\n  storage?: Storage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n}\n\nexport const ThemeProvider: FC<ThemeProviderProps> = ({\n  children,\n  config,\n  cookie,\n  storage = cookie ? \"cookie\" : \"localStorage\",\n  storageKey = THEME_SCHEME_STORAGE_KEY,\n  theme = {},\n}) => {\n  const { defaultThemeScheme = \"base\", disableTransitionOnChange } =\n    config ?? {}\n  const storageManager = useMemo(\n    () => createStorageManager(storage, storageKey, defaultThemeScheme, cookie),\n    [cookie, defaultThemeScheme, storage, storageKey],\n  )\n  const environment = useEnvironment()\n  const [themeScheme, setThemeScheme] = useState<ThemeScheme>(\n    storageManager.get(),\n  )\n\n  const changeThemeScheme: ChangeThemeScheme = useCallback(\n    (themeScheme) => {\n      const root = environment.getRootElement()\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      if (root) root.dataset.theme = themeScheme\n\n      cleanup?.()\n\n      setThemeScheme(themeScheme)\n\n      storageManager.set(themeScheme)\n    },\n    [disableTransitionOnChange, environment, storageManager],\n  )\n\n  useEffect(() => {\n    const themeScheme = storageManager.get()\n\n    changeThemeScheme(themeScheme)\n  }, [changeThemeScheme, storageManager])\n\n  return (\n    <EmotionThemeProvider theme={{ changeThemeScheme, themeScheme, ...theme }}>\n      <GlobalStyles />\n\n      {children}\n    </EmotionThemeProvider>\n  )\n}\n\nexport const GlobalStyles: FC = () => {\n  const system = useSystem()\n  const { theme } = useTheme<UsageTheme>()\n  const { atRule, wrap } = system.layers\n\n  const resetStyle = useMemo(() => {\n    const style = theme.styles?.resetStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const globalStyle = useMemo(() => {\n    const style = theme.styles?.globalStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const varRules = useMemo(() => {\n    return createVarRules(\n      system.config.css?.varRoot ?? \":host, :root\",\n      system.cssVars,\n    )\n  }, [system])\n\n  return (\n    <Global\n      styles={[\n        atRule,\n        wrap(\"tokens\", varRules),\n        wrap(\"reset\", resetStyle),\n        wrap(\"global\", globalStyle),\n      ]}\n    />\n  )\n}\n\n/**\n * `useTheme` is a custom hook that returns a function for retrieving and switching themes.\n *\n * @see https://yamada-ui.com/docs/hooks/use-theme\n */\nexport const useTheme = <Y extends UsageTheme = Theme>() => {\n  const internalTheme = use(ThemeContext) as StyledTheme<Y>\n\n  const theme = useMemo(() => {\n    const { themeScheme } = internalTheme\n\n    if (isUndefined(themeScheme) || themeScheme === \"base\") return internalTheme\n\n    const nestedTheme =\n      \"themeSchemes\" in internalTheme && isObject(internalTheme.themeSchemes)\n        ? internalTheme.themeSchemes[themeScheme as string]\n        : undefined\n\n    if (!nestedTheme) return internalTheme\n\n    return merge<StyledTheme<Y>>(internalTheme, nestedTheme)\n  }, [internalTheme])\n\n  const value = useMemo(() => {\n    const { changeThemeScheme, themeScheme } = internalTheme\n\n    return {\n      changeThemeScheme,\n      internalTheme,\n      theme,\n      themeScheme,\n    }\n  }, [theme, internalTheme])\n\n  return value\n}\n"],"mappings":"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"}

package/dist/cjs/core/system/var.cjs

@@ -4,7 +4,6 @@ const require_create_system = require("./create-system.cjs");
 const require_utils = require("../css/utils.cjs");
 const require_animation = require("../css/animation.cjs");
 const require_color_mix = require("../css/color-mix.cjs");
-const require_conditions = require("../css/conditions.cjs");
 const require_gradient = require("../css/gradient.cjs");
 const require_css = require("../css/css.cjs");
 //#region src/core/system/var.ts
@@ -41,7 +40,6 @@ const isColor = (token) => token.startsWith("colors.");
 const isColorScheme = (token) => (0, require_utils_index.utils_exports.isString)(token) && token.startsWith("colorScheme.") && !token.includes("/");
 function createVars(prefix = "ui", theme, breakpoints, rootNode) {
 	return function(tokens) {
-		const { getQuery, isResponsive } = breakpoints;
 		function tokenToVar(token) {
 			token = token.replace(/\./g, "-");
 			token = token.replace(/\//g, "\\/");
@@ -51,7 +49,10 @@ function createVars(prefix = "ui", theme, breakpoints, rootNode) {
 				variable
 			};
 		}
-		return function(cssMap = {}, cssVars = {}, prevTokens) {
+		return function(cssMap = {}, cssVars = {
+			light: {},
+			dark: {}
+		}, prevTokens) {
 			const system = {
 				...require_create_system.defaultSystem,
 				cssMap,
@@ -131,20 +132,10 @@ function createVars(prefix = "ui", theme, breakpoints, rootNode) {
 				};
 			}
 			function createVar(token, value, variable) {
-				return function(semantic, queries = []) {
+				return function(semantic, colorMode = "light", breakpoint = "base") {
 					if (isAnimation(token)) value = createAnimationVar(value);
-					if ((0, require_utils_index.utils_exports.isArray)(value)) {
-						const [lightValue, darkValue] = value;
-						createVar(token, lightValue, variable)(semantic, queries);
-						createVar(token, darkValue, variable)(semantic, [...queries, require_conditions.conditions._dark]);
-					} else if (isResponsive(value, true)) Object.entries(value).forEach(([key, value]) => {
-						if (key === "base") createVar(token, value, variable)(semantic, queries);
-						else {
-							const query = getQuery(key);
-							if (!query) return;
-							createVar(token, value, variable)(semantic, [...queries, query]);
-						}
-					});
+					if ((0, require_utils_index.utils_exports.isArray)(value)) value.forEach((value, index) => createVar(token, value, variable)(semantic, !index ? "light" : "dark", breakpoint));
+					else if (breakpoints.isResponsive(value, true)) Object.entries(value).forEach(([breakpoint, value]) => createVar(token, value, variable)(semantic, colorMode, breakpoint));
 					else {
 						const computedValue = valueToVar(value);
 						let resolvedValue = computedValue;
@@ -156,12 +147,14 @@ function createVars(prefix = "ui", theme, breakpoints, rootNode) {
 							resolvedValue = reference;
 						}
 						if (!(0, require_utils_index.utils_exports.isObject)(resolvedValue)) resolvedValue = { [variable]: resolvedValue };
-						const resolvedCssVars = queries.reduceRight((prev, key) => ({ [key]: prev }), resolvedValue);
-						cssVars = (0, require_utils_index.utils_exports.merge)(cssVars, resolvedCssVars);
+						const query = breakpoints.getQuery(breakpoint);
+						if (query) resolvedValue = { [colorMode]: { [query]: resolvedValue } };
+						else resolvedValue = { [colorMode]: resolvedValue };
+						cssVars = (0, require_utils_index.utils_exports.merge)(cssVars, resolvedValue);
 					}
 				};
 			}
-			for (let [token, { semantic, value }] of Object.entries(tokens)) {
+			for (const [token, { semantic, value }] of Object.entries(tokens)) {
 				const { reference, variable } = tokenToVar(token);
 				createVar(token, value, variable)(semantic);
 				if (isSpace(token)) {
@@ -186,7 +179,10 @@ function createVars(prefix = "ui", theme, breakpoints, rootNode) {
 function mergeVars(...fns) {
 	return function(prevTokens) {
 		let cssMap = {};
-		let cssVars = {};
+		let cssVars = {
+			light: {},
+			dark: {}
+		};
 		for (const fn of fns) {
 			const result = fn(cssMap, cssVars, prevTokens);
 			cssMap = {
@@ -204,6 +200,40 @@ function mergeVars(...fns) {
 		};
 	};
 }
+function createSelector(selectors, attr) {
+	return selectors.split(",").map((selector) => {
+		selector = selector.trim();
+		if (!attr) return selector;
+		else if (selector === ":host") return `${selector}(${attr})`;
+		else return `${selector}${attr}`;
+	}).join(", ");
+}
+function createVarRules(varRoot, cssVars) {
+	return Object.fromEntries(Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {
+		if ((0, require_utils_index.utils_exports.isEmptyObject)(cssVars)) return [];
+		if (colorMode === "light" || colorMode === "dark") {
+			const dark = colorMode === "dark";
+			const attr = `[data-mode=${colorMode}]`;
+			return [[[createSelector(varRoot, dark ? attr : void 0), attr].join(", "), cssVars]];
+		} else return Object.entries(cssVars).flatMap(([themeScheme, cssVars]) => Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {
+			if ((0, require_utils_index.utils_exports.isEmptyObject)(cssVars)) return [];
+			const dark = colorMode === "dark";
+			const attrs = {
+				colorMode: `[data-mode=${colorMode}]`,
+				themeScheme: `[data-theme=${themeScheme}]`
+			};
+			const attr = !dark ? attrs.themeScheme : `${attrs.themeScheme}${attrs.colorMode}`;
+			return [[(0, require_utils_index.utils_exports.filterEmpty)([
+				createSelector(varRoot, attr),
+				attr,
+				`${attrs.themeScheme} ${attrs.colorMode}`,
+				dark ? `${attrs.colorMode} ${attrs.themeScheme}` : void 0,
+				`:host(${attrs.themeScheme}) ${attrs.colorMode}`,
+				dark ? `:host(${attrs.colorMode}) ${attrs.themeScheme}` : void 0
+			]).join(", "), cssVars]];
+		}));
+	}));
+}
 function varAttr(value, token, fallbackValue) {
 	if ((0, require_utils_index.utils_exports.isUndefined)(value) || (0, require_utils_index.utils_exports.isNull)(value) || require_utils.isCSSFunction(value)) return value;
 	if ((0, require_utils_index.utils_exports.isObject)(value) || (0, require_utils_index.utils_exports.isArray)(value)) return (0, require_utils_index.utils_exports.replaceObject)(value, (value) => varAttr(value, token, fallbackValue));
@@ -229,6 +259,7 @@ function injectVars(objOrArray, targets, isInvalidProp) {
 	else return callback(objOrArray);
 }
 //#endregion
+exports.createVarRules = createVarRules;
 exports.createVars = createVars;
 exports.getColorSchemeVar = getColorSchemeVar;
 exports.getVar = getVar;

package/dist/cjs/core/system/var.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"var.cjs","names":["defaultSystem","colorMix","animation","gradient","injectKeyframes","css","conditions","isCSSFunction","getStyle","isCSSVar","isInterpolation"],"sources":["../../../../src/core/system/var.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { CSSProperties, StyleValueWithCondition } from \"../css\"\nimport type {\n  CSSMap,\n  DefineThemeValue,\n  System,\n  ThemeToken,\n  UsageTheme,\n  VariableTokens,\n  VariableValue,\n} from \"../system\"\nimport type { Breakpoints } from \"./breakpoint\"\nimport {\n  calc,\n  escape,\n  isArray,\n  isNull,\n  isObject,\n  isString,\n  isUndefined,\n  merge,\n  replaceObject,\n} from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport {\n  animation,\n  colorMix,\n  conditions,\n  css,\n  getStyle,\n  gradient,\n  injectKeyframes,\n  isCSSFunction,\n  isCSSVar,\n} from \"../css\"\nimport { isInterpolation } from \"../css/utils\"\nimport { defaultSystem } from \"../system\"\n\ntype ParsedValue = number | string | undefined\n\ninterface Variable {\n  reference: string\n  variable: string\n}\n\nexport function transformInterpolation(\n  value: any,\n  callback: (value: string, fallbackValue?: string) => string,\n) {\n  if (isString(value))\n    return value.replace(/\\{(.*?)\\}/g, (_, value) => {\n      const [token, fallbackValue] = value.split(/,(.+)/)\n\n      return callback(token.trim(), fallbackValue?.trim())\n    })\n  else return value\n}\n\nexport function getVar(token: string, fallback?: string) {\n  if (!token.startsWith(\"--\")) token = `--${token}`\n\n  token = token.replace(/[^-_a-zA-Z0-9]/g, \"\")\n\n  return fallback ? `var(${token}, ${fallback})` : `var(${token})`\n}\n\nexport function getVarName(system: System) {\n  return function (token: string) {\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    return `--${prefix}-${token}`\n  }\n}\n\nexport function getColorSchemeVar(system: System) {\n  return function (value: any, fallback?: string) {\n    if (!isString(value)) return value\n\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    const [, token] = value.split(\".\")\n\n    return getVar(`${prefix}-colorScheme-${token}`, fallback)\n  }\n}\n\nconst isGradient = (token: string) => token.startsWith(\"gradients.\")\nconst isKeyframes = (token: string) => token.startsWith(\"keyframes.\")\nconst isAnimation = (token: string) => token.startsWith(\"animations.\")\nconst isSpace = (token: string) => token.startsWith(\"spaces.\")\nconst isColor = (token: string) => token.startsWith(\"colors.\")\nexport const isColorScheme = (token: any) =>\n  isString(token) && token.startsWith(\"colorScheme.\") && !token.includes(\"/\")\n\nexport function createVars(\n  prefix: string = DEFAULT_VAR_PREFIX,\n  theme: UsageTheme,\n  breakpoints: Breakpoints,\n  rootNode?: System[\"rootNode\"],\n) {\n  return function (tokens: VariableTokens) {\n    const { getQuery, isResponsive } = breakpoints\n\n    function tokenToVar(token: string): Variable {\n      token = token.replace(/\\./g, \"-\")\n      token = token.replace(/\\//g, \"\\\\/\")\n\n      const variable = `--${[prefix, escape(token, \"-\")].filter(Boolean).join(\"-\")}`\n      const reference = `var(${variable})`\n\n      return { reference, variable }\n    }\n\n    return function (\n      cssMap: CSSMap = {},\n      cssVars: Dict = {},\n      prevTokens?: VariableTokens,\n    ): { cssMap: CSSMap; cssVars: Dict } {\n      const system: System = { ...defaultSystem, cssMap, rootNode }\n      const options = { css, system, theme }\n\n      function getRelatedReference(\n        token: string,\n        value: ParsedValue = \"\",\n      ): [ParsedValue, Exclude<ParsedValue, undefined>] {\n        const relatedToken = [token.split(\".\")[0], value].join(\".\")\n\n        if (token === relatedToken) return [undefined, value]\n\n        const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n        if (!targetToken) return [undefined, value]\n\n        const { reference, variable } = tokenToVar(relatedToken)\n\n        return [variable, reference]\n      }\n\n      function valueToVar(value: any) {\n        return transformInterpolation(value, (value, fallbackValue) => {\n          if (value.includes(\"colors.\") || value.includes(\"colorScheme.\")) {\n            if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n            return colorMix(value, { fallback: fallbackValue, system })\n          } else {\n            const token = tokens[value] ?? prevTokens?.[value]\n\n            if (token) {\n              return tokenToVar(value).reference\n            } else if (value in cssMap && cssMap[value]?.ref) {\n              return cssMap[value].ref\n            } else if (fallbackValue) {\n              fallbackValue =\n                fallbackValue in cssMap && cssMap[fallbackValue]?.ref\n                  ? cssMap[fallbackValue]?.ref\n                  : fallbackValue\n\n              return `var(--${prefix}-${value}, ${fallbackValue})`\n            } else {\n              return `var(--${prefix}-${value})`\n            }\n          }\n        })\n      }\n\n      function createNegativeVar(token: string, reference: string) {\n        const paths = token.split(\".\")\n        const [start, ...rest] = paths\n\n        const negativeToken = `${start}.-${rest.join(\".\")}`\n\n        const negativeReference = calc.negate(reference)\n\n        return { negativeReference, negativeToken }\n      }\n\n      function createAnimationVar(value: VariableValue) {\n        if (isArray(value))\n          return value.map((value) => animation(value, options)).join(\",\")\n        else return animation(value, options)\n      }\n\n      function createGradientVar(token: string, value: DefineThemeValue) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return gradient(value, options)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable ? reference : gradient(value, options)\n          }\n        }\n      }\n\n      function createKeyframesVar(token: string, value: any) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return injectKeyframes(css(system, theme)(value), rootNode)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : injectKeyframes(css(system, theme)(value), rootNode)\n          }\n        }\n      }\n\n      function createColorVar(\n        token: string,\n        properties: string[],\n        value: DefineThemeValue,\n      ) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return colorMix(value, { ...options, properties })\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : colorMix(value, { ...options, properties })\n          }\n        }\n      }\n\n      function createVar(\n        token: string,\n        value: VariableValue,\n        variable: string,\n      ) {\n        return function (semantic: boolean, queries: string[] = []) {\n          if (isAnimation(token)) value = createAnimationVar(value)\n\n          if (isArray(value)) {\n            const [lightValue, darkValue] = value\n\n            createVar(token, lightValue, variable)(semantic, queries)\n            createVar(\n              token,\n              darkValue,\n              variable,\n            )(semantic, [...queries, conditions._dark])\n          } else if (isResponsive(value, true)) {\n            Object.entries(value).forEach(([key, value]) => {\n              if (key === \"base\") {\n                createVar(token, value, variable)(semantic, queries)\n              } else {\n                const query = getQuery(key)\n\n                if (!query) return\n\n                createVar(token, value, variable)(semantic, [...queries, query])\n              }\n            })\n          } else {\n            const computedValue: DefineThemeValue = valueToVar(value)\n\n            let resolvedValue: DefineThemeValue | Dict = computedValue\n\n            if (isKeyframes(token)) {\n              resolvedValue = createKeyframesVar(token, computedValue)(semantic)\n            } else if (isGradient(token)) {\n              resolvedValue = createGradientVar(token, computedValue)(semantic)\n            } else if (isColor(token)) {\n              resolvedValue = createColorVar(\n                token,\n                [variable],\n                computedValue,\n              )(semantic)\n            } else if (semantic) {\n              const [, reference] = getRelatedReference(token, computedValue)\n\n              resolvedValue = reference\n            }\n\n            if (!isObject(resolvedValue))\n              resolvedValue = { [variable]: resolvedValue }\n\n            const resolvedCssVars = queries.reduceRight<Dict>(\n              (prev, key) => ({ [key]: prev }),\n              resolvedValue,\n            )\n\n            cssVars = merge(cssVars, resolvedCssVars)\n          }\n        }\n      }\n\n      for (let [token, { semantic, value }] of Object.entries(tokens)) {\n        const { reference, variable } = tokenToVar(token)\n\n        createVar(token, value, variable)(semantic)\n\n        if (isSpace(token)) {\n          const { negativeReference, negativeToken } = createNegativeVar(\n            token,\n            reference,\n          )\n\n          cssMap[negativeToken] = { ref: negativeReference, var: variable }\n        }\n\n        cssMap[token] = { ref: reference, var: variable }\n      }\n\n      return { cssMap, cssVars }\n    }\n  }\n}\n\nexport type CreateVars = ReturnType<ReturnType<typeof createVars>>\n\nexport function mergeVars(...fns: CreateVars[]) {\n  return function (prevTokens?: VariableTokens) {\n    let cssMap: CSSMap = {}\n    let cssVars: Dict = {}\n\n    for (const fn of fns) {\n      const result = fn(cssMap, cssVars, prevTokens)\n\n      cssMap = { ...cssMap, ...result.cssMap }\n      cssVars = { ...cssVars, ...result.cssVars }\n    }\n\n    return { cssMap, cssVars }\n  }\n}\n\nexport function varAttr<Y = StyleValueWithCondition<number | string>>(\n  value: undefined | Y,\n  token?: ThemeToken,\n  fallbackValue?: string,\n): undefined | Y {\n  if (isUndefined(value) || isNull(value) || isCSSFunction(value)) return value\n\n  if (isObject(value) || isArray(value))\n    return replaceObject(value, (value) => varAttr(value, token, fallbackValue))\n  else\n    return token\n      ? (`{${token}.${value as number | string}, ${fallbackValue ?? (value as number | string)}}` as Y)\n      : value\n}\n\nexport function injectVars<Y extends Dict | Dict[] | undefined>(\n  objOrArray: Y,\n  targets: { [key in CSSProperties]?: string },\n  isInvalidProp?: (prop: string) => boolean,\n): Y {\n  if (!objOrArray) return objOrArray\n\n  function callback(objOrArray: Dict) {\n    return Object.fromEntries(\n      Object.entries(objOrArray).flatMap(function ([prop, value]) {\n        if (isInvalidProp?.(prop)) return [[prop, value]]\n\n        const target = targets[prop]\n        const result: [string, any][] = []\n\n        if (target) {\n          const { token } = getStyle(prop) ?? {}\n\n          if (isCSSVar(value) || isInterpolation(value))\n            result.push([`--${target}`, value])\n          else\n            result.push([\n              `--${target}`,\n              replaceObject(value, (value) =>\n                token ? `{${token}.${value}, ${value}}` : value,\n              ),\n            ])\n        } else if (isObject(value)) {\n          result.push([prop, injectVars(value, targets)])\n        } else {\n          result.push([prop, value])\n        }\n\n        return result\n      }),\n    )\n  }\n\n  if (isArray(objOrArray)) return objOrArray.map(callback) as Y\n  else return callback(objOrArray) as Y\n}\n"],"mappings":";;;;;;;;;;AA6CA,SAAgB,uBACd,OACA,UACA;CACA,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GAChB,OAAO,MAAM,QAAQ,eAAe,GAAG,UAAU;EAC/C,MAAM,CAAC,OAAO,iBAAiB,MAAM,MAAM,OAAO;EAElD,OAAO,SAAS,MAAM,KAAK,GAAG,eAAe,KAAK,CAAC;CACrD,CAAC;MACE,OAAO;AACd;AAEA,SAAgB,OAAO,OAAe,UAAmB;CACvD,IAAI,CAAC,MAAM,WAAW,IAAI,GAAG,QAAQ,KAAK;CAE1C,QAAQ,MAAM,QAAQ,mBAAmB,EAAE;CAE3C,OAAO,WAAW,OAAO,MAAM,IAAI,SAAS,KAAK,OAAO,MAAM;AAChE;AAEA,SAAgB,WAAW,QAAgB;CACzC,OAAO,SAAU,OAAe;EAG9B,OAAO,KAFQ,OAAO,OAAO,KAAK,aAAA,KAEf,GAAG;CACxB;AACF;AAEA,SAAgB,kBAAkB,QAAgB;CAChD,OAAO,SAAU,OAAY,UAAmB;EAC9C,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,KAAK,GAAG,OAAO;EAE7B,MAAM,SAAS,OAAO,OAAO,KAAK,aAAA;EAElC,MAAM,GAAG,SAAS,MAAM,MAAM,GAAG;EAEjC,OAAO,OAAO,GAAG,OAAO,eAAe,SAAS,QAAQ;CAC1D;AACF;AAEA,MAAM,cAAc,UAAkB,MAAM,WAAW,YAAY;AACnE,MAAM,eAAe,UAAkB,MAAM,WAAW,YAAY;AACpE,MAAM,eAAe,UAAkB,MAAM,WAAW,aAAa;AACrE,MAAM,WAAW,UAAkB,MAAM,WAAW,SAAS;AAC7D,MAAM,WAAW,UAAkB,MAAM,WAAW,SAAS;AAC7D,MAAa,iBAAiB,WAAA,GAAA,oBAAA,cAAA,SAAA,CACnB,KAAK,KAAK,MAAM,WAAW,cAAc,KAAK,CAAC,MAAM,SAAS,GAAG;AAE5E,SAAgB,WACd,SAAA,MACA,OACA,aACA,UACA;CACA,OAAO,SAAU,QAAwB;EACvC,MAAM,EAAE,UAAU,iBAAiB;EAEnC,SAAS,WAAW,OAAyB;GAC3C,QAAQ,MAAM,QAAQ,OAAO,GAAG;GAChC,QAAQ,MAAM,QAAQ,OAAO,KAAK;GAElC,MAAM,WAAW,KAAK,CAAC,SAAA,GAAA,oBAAA,cAAA,OAAA,CAAe,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAG3E,OAAO;IAAE,WAAA,OAFgB,SAAS;IAEd;GAAS;EAC/B;EAEA,OAAO,SACL,SAAiB,CAAC,GAClB,UAAgB,CAAC,GACjB,YACmC;GACnC,MAAM,SAAiB;IAAE,GAAGA,sBAAAA;IAAe;IAAQ;GAAS;GAC5D,MAAM,UAAU;IAAE,KAAA,YAAA;IAAK;IAAQ;GAAM;GAErC,SAAS,oBACP,OACA,QAAqB,IAC2B;IAChD,MAAM,eAAe,CAAC,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,GAAG;IAE1D,IAAI,UAAU,cAAc,OAAO,CAAC,KAAA,GAAW,KAAK;IAIpD,IAAI,EAFgB,OAAO,iBAAiB,aAAa,gBAEvC,OAAO,CAAC,KAAA,GAAW,KAAK;IAE1C,MAAM,EAAE,WAAW,aAAa,WAAW,YAAY;IAEvD,OAAO,CAAC,UAAU,SAAS;GAC7B;GAEA,SAAS,WAAW,OAAY;IAC9B,OAAO,uBAAuB,QAAQ,OAAO,kBAAkB;KAC7D,IAAI,MAAM,SAAS,SAAS,KAAK,MAAM,SAAS,cAAc,GAAG;MAC/D,IAAI,cAAc,KAAK,GAAG,OAAO,kBAAkB,MAAM,CAAC,CAAC,KAAK;MAEhE,OAAOC,kBAAAA,SAAS,OAAO;OAAE,UAAU;OAAe;MAAO,CAAC;KAC5D,OAGE,IAFc,OAAO,UAAU,aAAa,QAG1C,OAAO,WAAW,KAAK,CAAC,CAAC;UACpB,IAAI,SAAS,UAAU,OAAO,MAAM,EAAE,KAC3C,OAAO,OAAO,MAAM,CAAC;UAChB,IAAI,eAAe;MACxB,gBACE,iBAAiB,UAAU,OAAO,cAAc,EAAE,MAC9C,OAAO,cAAc,EAAE,MACvB;MAEN,OAAO,SAAS,OAAO,GAAG,MAAM,IAAI,cAAc;KACpD,OACE,OAAO,SAAS,OAAO,GAAG,MAAM;IAGtC,CAAC;GACH;GAEA,SAAS,kBAAkB,OAAe,WAAmB;IAE3D,MAAM,CAAC,OAAO,GAAG,QADH,MAAM,MAAM,GACG;IAE7B,MAAM,gBAAgB,GAAG,MAAM,IAAI,KAAK,KAAK,GAAG;IAIhD,OAAO;KAAE,mBAAA,oBAAA,cAFiB,KAAK,OAAO,SAEb;KAAG;IAAc;GAC5C;GAEA,SAAS,mBAAmB,OAAsB;IAChD,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,GACf,OAAO,MAAM,KAAK,UAAUC,kBAAAA,UAAU,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG;SAC5D,OAAOA,kBAAAA,UAAU,OAAO,OAAO;GACtC;GAEA,SAAS,kBAAkB,OAAe,OAAyB;IACjE,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAOC,iBAAAA,SAAS,OAAO,OAAO;UACzB;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WAAW,YAAYA,iBAAAA,SAAS,OAAO,OAAO;KACvD;IACF;GACF;GAEA,SAAS,mBAAmB,OAAe,OAAY;IACrD,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAOC,kBAAAA,gBAAgBC,YAAAA,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK,GAAG,QAAQ;UACrD;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WACH,YACAD,kBAAAA,gBAAgBC,YAAAA,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK,GAAG,QAAQ;KACzD;IACF;GACF;GAEA,SAAS,eACP,OACA,YACA,OACA;IACA,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAOJ,kBAAAA,SAAS,OAAO;MAAE,GAAG;MAAS;KAAW,CAAC;UAC5C;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WACH,YACAA,kBAAAA,SAAS,OAAO;OAAE,GAAG;OAAS;MAAW,CAAC;KAChD;IACF;GACF;GAEA,SAAS,UACP,OACA,OACA,UACA;IACA,OAAO,SAAU,UAAmB,UAAoB,CAAC,GAAG;KAC1D,IAAI,YAAY,KAAK,GAAG,QAAQ,mBAAmB,KAAK;KAExD,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,GAAG;MAClB,MAAM,CAAC,YAAY,aAAa;MAEhC,UAAU,OAAO,YAAY,QAAQ,CAAC,CAAC,UAAU,OAAO;MACxD,UACE,OACA,WACA,QACF,CAAC,CAAC,UAAU,CAAC,GAAG,SAASK,mBAAAA,WAAW,KAAK,CAAC;KAC5C,OAAO,IAAI,aAAa,OAAO,IAAI,GACjC,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;MAC9C,IAAI,QAAQ,QACV,UAAU,OAAO,OAAO,QAAQ,CAAC,CAAC,UAAU,OAAO;WAC9C;OACL,MAAM,QAAQ,SAAS,GAAG;OAE1B,IAAI,CAAC,OAAO;OAEZ,UAAU,OAAO,OAAO,QAAQ,CAAC,CAAC,UAAU,CAAC,GAAG,SAAS,KAAK,CAAC;MACjE;KACF,CAAC;UACI;MACL,MAAM,gBAAkC,WAAW,KAAK;MAExD,IAAI,gBAAyC;MAE7C,IAAI,YAAY,KAAK,GACnB,gBAAgB,mBAAmB,OAAO,aAAa,CAAC,CAAC,QAAQ;WAC5D,IAAI,WAAW,KAAK,GACzB,gBAAgB,kBAAkB,OAAO,aAAa,CAAC,CAAC,QAAQ;WAC3D,IAAI,QAAQ,KAAK,GACtB,gBAAgB,eACd,OACA,CAAC,QAAQ,GACT,aACF,CAAC,CAAC,QAAQ;WACL,IAAI,UAAU;OACnB,MAAM,GAAG,aAAa,oBAAoB,OAAO,aAAa;OAE9D,gBAAgB;MAClB;MAEA,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,aAAa,GACzB,gBAAgB,GAAG,WAAW,cAAc;MAE9C,MAAM,kBAAkB,QAAQ,aAC7B,MAAM,SAAS,GAAG,MAAM,KAAK,IAC9B,aACF;MAEA,WAAA,GAAA,oBAAA,cAAA,MAAA,CAAgB,SAAS,eAAe;KAC1C;IACF;GACF;GAEA,KAAK,IAAI,CAAC,OAAO,EAAE,UAAU,YAAY,OAAO,QAAQ,MAAM,GAAG;IAC/D,MAAM,EAAE,WAAW,aAAa,WAAW,KAAK;IAEhD,UAAU,OAAO,OAAO,QAAQ,CAAC,CAAC,QAAQ;IAE1C,IAAI,QAAQ,KAAK,GAAG;KAClB,MAAM,EAAE,mBAAmB,kBAAkB,kBAC3C,OACA,SACF;KAEA,OAAO,iBAAiB;MAAE,KAAK;MAAmB,KAAK;KAAS;IAClE;IAEA,OAAO,SAAS;KAAE,KAAK;KAAW,KAAK;IAAS;GAClD;GAEA,OAAO;IAAE;IAAQ;GAAQ;EAC3B;CACF;AACF;AAIA,SAAgB,UAAU,GAAG,KAAmB;CAC9C,OAAO,SAAU,YAA6B;EAC5C,IAAI,SAAiB,CAAC;EACtB,IAAI,UAAgB,CAAC;EAErB,KAAK,MAAM,MAAM,KAAK;GACpB,MAAM,SAAS,GAAG,QAAQ,SAAS,UAAU;GAE7C,SAAS;IAAE,GAAG;IAAQ,GAAG,OAAO;GAAO;GACvC,UAAU;IAAE,GAAG;IAAS,GAAG,OAAO;GAAQ;EAC5C;EAEA,OAAO;GAAE;GAAQ;EAAQ;CAC3B;AACF;AAEA,SAAgB,QACd,OACA,OACA,eACe;CACf,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,KAAK,MAAA,GAAA,oBAAA,cAAA,OAAA,CAAY,KAAK,KAAKC,cAAAA,cAAc,KAAK,GAAG,OAAO;CAExE,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,MAAA,GAAA,oBAAA,cAAA,QAAA,CAAa,KAAK,GAClC,QAAA,GAAA,oBAAA,cAAA,cAAA,CAAqB,QAAQ,UAAU,QAAQ,OAAO,OAAO,aAAa,CAAC;MAE3E,OAAO,QACF,IAAI,MAAM,GAAG,MAAyB,IAAI,iBAAkB,MAA0B,KACvF;AACR;AAEA,SAAgB,WACd,YACA,SACA,eACG;CACH,IAAI,CAAC,YAAY,OAAO;CAExB,SAAS,SAAS,YAAkB;EAClC,OAAO,OAAO,YACZ,OAAO,QAAQ,UAAU,CAAC,CAAC,QAAQ,SAAU,CAAC,MAAM,QAAQ;GAC1D,IAAI,gBAAgB,IAAI,GAAG,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC;GAEhD,MAAM,SAAS,QAAQ;GACvB,MAAM,SAA0B,CAAC;GAEjC,IAAI,QAAQ;IACV,MAAM,EAAE,UAAUC,YAAAA,SAAS,IAAI,KAAK,CAAC;IAErC,IAAIC,cAAAA,SAAS,KAAK,KAAKC,cAAAA,gBAAgB,KAAK,GAC1C,OAAO,KAAK,CAAC,KAAK,UAAU,KAAK,CAAC;SAElC,OAAO,KAAK,CACV,KAAK,WAAA,GAAA,oBAAA,cAAA,cAAA,CACS,QAAQ,UACpB,QAAQ,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,KAAK,KAC5C,CACF,CAAC;GACL,OAAO,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GACvB,OAAO,KAAK,CAAC,MAAM,WAAW,OAAO,OAAO,CAAC,CAAC;QAE9C,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;GAG3B,OAAO;EACT,CAAC,CACH;CACF;CAEA,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,UAAU,GAAG,OAAO,WAAW,IAAI,QAAQ;MAClD,OAAO,SAAS,UAAU;AACjC"}
+{"version":3,"file":"var.cjs","names":["defaultSystem","colorMix","animation","gradient","injectKeyframes","css","isCSSFunction","getStyle","isCSSVar","isInterpolation"],"sources":["../../../../src/core/system/var.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { CSSProperties, StyleValueWithCondition } from \"../css\"\nimport type {\n  ColorMode,\n  CSSMap,\n  CSSVars,\n  DefineThemeValue,\n  System,\n  ThemeToken,\n  UsageTheme,\n  VariableTokens,\n  VariableValue,\n} from \"../system\"\nimport type { Breakpoints } from \"./breakpoint\"\nimport {\n  calc,\n  escape,\n  filterEmpty,\n  isArray,\n  isEmptyObject,\n  isNull,\n  isObject,\n  isString,\n  isUndefined,\n  merge,\n  replaceObject,\n} from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport {\n  animation,\n  colorMix,\n  css,\n  getStyle,\n  gradient,\n  injectKeyframes,\n  isCSSFunction,\n  isCSSVar,\n} from \"../css\"\nimport { isInterpolation } from \"../css/utils\"\nimport { defaultSystem } from \"../system\"\n\ntype ParsedValue = number | string | undefined\n\ninterface Variable {\n  reference: string\n  variable: string\n}\n\nexport function transformInterpolation(\n  value: any,\n  callback: (value: string, fallbackValue?: string) => string,\n) {\n  if (isString(value))\n    return value.replace(/\\{(.*?)\\}/g, (_, value) => {\n      const [token, fallbackValue] = value.split(/,(.+)/)\n\n      return callback(token.trim(), fallbackValue?.trim())\n    })\n  else return value\n}\n\nexport function getVar(token: string, fallback?: string) {\n  if (!token.startsWith(\"--\")) token = `--${token}`\n\n  token = token.replace(/[^-_a-zA-Z0-9]/g, \"\")\n\n  return fallback ? `var(${token}, ${fallback})` : `var(${token})`\n}\n\nexport function getVarName(system: System) {\n  return function (token: string) {\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    return `--${prefix}-${token}`\n  }\n}\n\nexport function getColorSchemeVar(system: System) {\n  return function (value: any, fallback?: string) {\n    if (!isString(value)) return value\n\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    const [, token] = value.split(\".\")\n\n    return getVar(`${prefix}-colorScheme-${token}`, fallback)\n  }\n}\n\nconst isGradient = (token: string) => token.startsWith(\"gradients.\")\nconst isKeyframes = (token: string) => token.startsWith(\"keyframes.\")\nconst isAnimation = (token: string) => token.startsWith(\"animations.\")\nconst isSpace = (token: string) => token.startsWith(\"spaces.\")\nconst isColor = (token: string) => token.startsWith(\"colors.\")\nexport const isColorScheme = (token: any) =>\n  isString(token) && token.startsWith(\"colorScheme.\") && !token.includes(\"/\")\n\nexport function createVars(\n  prefix: string = DEFAULT_VAR_PREFIX,\n  theme: UsageTheme,\n  breakpoints: Breakpoints,\n  rootNode?: System[\"rootNode\"],\n) {\n  return function (tokens: VariableTokens) {\n    function tokenToVar(token: string): Variable {\n      token = token.replace(/\\./g, \"-\")\n      token = token.replace(/\\//g, \"\\\\/\")\n\n      const variable = `--${[prefix, escape(token, \"-\")].filter(Boolean).join(\"-\")}`\n      const reference = `var(${variable})`\n\n      return { reference, variable }\n    }\n\n    return function (\n      cssMap: CSSMap = {},\n      cssVars: CSSVars = { light: {}, dark: {} },\n      prevTokens?: VariableTokens,\n    ): { cssMap: CSSMap; cssVars: CSSVars } {\n      const system: System = { ...defaultSystem, cssMap, rootNode }\n      const options = { css, system, theme }\n\n      function getRelatedReference(\n        token: string,\n        value: ParsedValue = \"\",\n      ): [ParsedValue, Exclude<ParsedValue, undefined>] {\n        const relatedToken = [token.split(\".\")[0], value].join(\".\")\n\n        if (token === relatedToken) return [undefined, value]\n\n        const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n        if (!targetToken) return [undefined, value]\n\n        const { reference, variable } = tokenToVar(relatedToken)\n\n        return [variable, reference]\n      }\n\n      function valueToVar(value: any) {\n        return transformInterpolation(value, (value, fallbackValue) => {\n          if (value.includes(\"colors.\") || value.includes(\"colorScheme.\")) {\n            if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n            return colorMix(value, { fallback: fallbackValue, system })\n          } else {\n            const token = tokens[value] ?? prevTokens?.[value]\n\n            if (token) {\n              return tokenToVar(value).reference\n            } else if (value in cssMap && cssMap[value]?.ref) {\n              return cssMap[value].ref\n            } else if (fallbackValue) {\n              fallbackValue =\n                fallbackValue in cssMap && cssMap[fallbackValue]?.ref\n                  ? cssMap[fallbackValue]?.ref\n                  : fallbackValue\n\n              return `var(--${prefix}-${value}, ${fallbackValue})`\n            } else {\n              return `var(--${prefix}-${value})`\n            }\n          }\n        })\n      }\n\n      function createNegativeVar(token: string, reference: string) {\n        const paths = token.split(\".\")\n        const [start, ...rest] = paths\n\n        const negativeToken = `${start}.-${rest.join(\".\")}`\n\n        const negativeReference = calc.negate(reference)\n\n        return { negativeReference, negativeToken }\n      }\n\n      function createAnimationVar(value: VariableValue) {\n        if (isArray(value))\n          return value.map((value) => animation(value, options)).join(\",\")\n        else return animation(value, options)\n      }\n\n      function createGradientVar(token: string, value: DefineThemeValue) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return gradient(value, options)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable ? reference : gradient(value, options)\n          }\n        }\n      }\n\n      function createKeyframesVar(token: string, value: any) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return injectKeyframes(css(system, theme)(value), rootNode)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : injectKeyframes(css(system, theme)(value), rootNode)\n          }\n        }\n      }\n\n      function createColorVar(\n        token: string,\n        properties: string[],\n        value: DefineThemeValue,\n      ) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return colorMix(value, { ...options, properties })\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : colorMix(value, { ...options, properties })\n          }\n        }\n      }\n\n      function createVar(\n        token: string,\n        value: VariableValue,\n        variable: string,\n      ) {\n        return function (\n          semantic: boolean,\n          colorMode: ColorMode = \"light\",\n          breakpoint: string = \"base\",\n        ) {\n          if (isAnimation(token)) value = createAnimationVar(value)\n\n          if (isArray(value)) {\n            value.forEach((value, index) =>\n              createVar(token, value, variable)(\n                semantic,\n                !index ? \"light\" : \"dark\",\n                breakpoint,\n              ),\n            )\n          } else if (breakpoints.isResponsive(value, true)) {\n            Object.entries(value).forEach(([breakpoint, value]) =>\n              createVar(token, value, variable)(\n                semantic,\n                colorMode,\n                breakpoint,\n              ),\n            )\n          } else {\n            const computedValue: DefineThemeValue = valueToVar(value)\n\n            let resolvedValue: DefineThemeValue | Dict = computedValue\n\n            if (isKeyframes(token)) {\n              resolvedValue = createKeyframesVar(token, computedValue)(semantic)\n            } else if (isGradient(token)) {\n              resolvedValue = createGradientVar(token, computedValue)(semantic)\n            } else if (isColor(token)) {\n              resolvedValue = createColorVar(\n                token,\n                [variable],\n                computedValue,\n              )(semantic)\n            } else if (semantic) {\n              const [, reference] = getRelatedReference(token, computedValue)\n\n              resolvedValue = reference\n            }\n\n            if (!isObject(resolvedValue))\n              resolvedValue = { [variable]: resolvedValue }\n\n            const query = breakpoints.getQuery(breakpoint)\n\n            if (query)\n              resolvedValue = { [colorMode]: { [query]: resolvedValue } }\n            else resolvedValue = { [colorMode]: resolvedValue }\n\n            cssVars = merge(cssVars, resolvedValue)\n          }\n        }\n      }\n\n      for (const [token, { semantic, value }] of Object.entries(tokens)) {\n        const { reference, variable } = tokenToVar(token)\n\n        createVar(token, value, variable)(semantic)\n\n        if (isSpace(token)) {\n          const { negativeReference, negativeToken } = createNegativeVar(\n            token,\n            reference,\n          )\n\n          cssMap[negativeToken] = { ref: negativeReference, var: variable }\n        }\n\n        cssMap[token] = { ref: reference, var: variable }\n      }\n\n      return { cssMap, cssVars }\n    }\n  }\n}\n\nexport type CreateVars = ReturnType<ReturnType<typeof createVars>>\n\nexport function mergeVars(...fns: CreateVars[]) {\n  return function (prevTokens?: VariableTokens) {\n    let cssMap: CSSMap = {}\n    let cssVars: CSSVars = { light: {}, dark: {} }\n\n    for (const fn of fns) {\n      const result = fn(cssMap, cssVars, prevTokens)\n\n      cssMap = { ...cssMap, ...result.cssMap }\n      cssVars = { ...cssVars, ...result.cssVars }\n    }\n\n    return { cssMap, cssVars }\n  }\n}\n\nfunction createSelector(selectors: string, attr?: string): string {\n  return selectors\n    .split(\",\")\n    .map((selector) => {\n      selector = selector.trim()\n\n      if (!attr) return selector\n      else if (selector === \":host\") return `${selector}(${attr})`\n      else return `${selector}${attr}`\n    })\n    .join(\", \")\n}\n\nexport function createVarRules(varRoot: string, cssVars: CSSVars): Dict {\n  return Object.fromEntries(\n    Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {\n      if (isEmptyObject(cssVars)) return []\n\n      if (colorMode === \"light\" || colorMode === \"dark\") {\n        const dark = colorMode === \"dark\"\n        const attr = `[data-mode=${colorMode}]`\n        const selector = createSelector(varRoot, dark ? attr : undefined)\n\n        return [[[selector, attr].join(\", \"), cssVars]]\n      } else {\n        return Object.entries<Dict>(cssVars).flatMap(([themeScheme, cssVars]) =>\n          Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {\n            if (isEmptyObject(cssVars)) return []\n\n            const dark = colorMode === \"dark\"\n            const attrs = {\n              colorMode: `[data-mode=${colorMode}]`,\n              themeScheme: `[data-theme=${themeScheme}]`,\n            }\n            const attr = !dark\n              ? attrs.themeScheme\n              : `${attrs.themeScheme}${attrs.colorMode}`\n            const selector = createSelector(varRoot, attr)\n\n            return [\n              [\n                filterEmpty([\n                  selector,\n                  attr,\n                  `${attrs.themeScheme} ${attrs.colorMode}`,\n                  dark ? `${attrs.colorMode} ${attrs.themeScheme}` : undefined,\n                  `:host(${attrs.themeScheme}) ${attrs.colorMode}`,\n                  dark\n                    ? `:host(${attrs.colorMode}) ${attrs.themeScheme}`\n                    : undefined,\n                ]).join(\", \"),\n                cssVars,\n              ],\n            ]\n          }),\n        )\n      }\n    }),\n  )\n}\n\nexport function varAttr<Y = StyleValueWithCondition<number | string>>(\n  value: undefined | Y,\n  token?: ThemeToken,\n  fallbackValue?: string,\n): undefined | Y {\n  if (isUndefined(value) || isNull(value) || isCSSFunction(value)) return value\n\n  if (isObject(value) || isArray(value))\n    return replaceObject(value, (value) => varAttr(value, token, fallbackValue))\n  else\n    return token\n      ? (`{${token}.${value as number | string}, ${fallbackValue ?? (value as number | string)}}` as Y)\n      : value\n}\n\nexport function injectVars<Y extends Dict | Dict[] | undefined>(\n  objOrArray: Y,\n  targets: { [key in CSSProperties]?: string },\n  isInvalidProp?: (prop: string) => boolean,\n): Y {\n  if (!objOrArray) return objOrArray\n\n  function callback(objOrArray: Dict) {\n    return Object.fromEntries(\n      Object.entries(objOrArray).flatMap(function ([prop, value]) {\n        if (isInvalidProp?.(prop)) return [[prop, value]]\n\n        const target = targets[prop]\n        const result: [string, any][] = []\n\n        if (target) {\n          const { token } = getStyle(prop) ?? {}\n\n          if (isCSSVar(value) || isInterpolation(value))\n            result.push([`--${target}`, value])\n          else\n            result.push([\n              `--${target}`,\n              replaceObject(value, (value) =>\n                token ? `{${token}.${value}, ${value}}` : value,\n              ),\n            ])\n        } else if (isObject(value)) {\n          result.push([prop, injectVars(value, targets)])\n        } else {\n          result.push([prop, value])\n        }\n\n        return result\n      }),\n    )\n  }\n\n  if (isArray(objOrArray)) return objOrArray.map(callback) as Y\n  else return callback(objOrArray) as Y\n}\n"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -4709,6 +4709,7 @@ var src_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	createStyled: () => require_styled.createStyled,
 	createSystem: () => require_create_system.createSystem,
 	createTransition: () => require_transition.createTransition,
+	createVarRules: () => require_var.createVarRules,
 	createVars: () => require_var.createVars,
 	css: () => require_css.css,
 	cssProps: () => require_props.cssProps,
@@ -8117,6 +8118,7 @@ exports.createStore = require_store.createStore;
 exports.createStyled = require_styled.createStyled;
 exports.createSystem = require_create_system.createSystem;
 exports.createTransition = require_transition.createTransition;
+exports.createVarRules = require_var.createVarRules;
 exports.createVars = require_var.createVars;
 exports.css = require_css.css;
 exports.cssProps = require_props.cssProps;

package/dist/cjs/theme/tokens/z-indices.cjs

@@ -13,7 +13,8 @@ const zIndices = require("../../core/system/config.cjs").defineTokens.zIndices({
 	freeza: 9996,
 	vegeta: 9997,
 	sonGoku: 9998,
-	beerus: 9999
+	beerus: 9999,
+	infinity: 2147483647
 });
 //#endregion
 exports.zIndices = zIndices;

package/dist/cjs/theme/tokens/z-indices.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"z-indices.cjs","names":["defineTokens"],"sources":["../../../../src/theme/tokens/z-indices.ts"],"sourcesContent":["/* eslint-disable perfectionist/sort-objects */\nimport { defineTokens } from \"../../core\"\n\nexport const zIndices = defineTokens.zIndices({\n  yamcha: 1,\n  kurillin: 9,\n  nappa: 99,\n\n  guldo: 100,\n  jeice: 110,\n  burter: 120,\n  recoome: 130,\n  ginyu: 140,\n  dodoria: 150,\n  zarbon: 160,\n\n  freeza: 9996,\n  vegeta: 9997,\n  sonGoku: 9998,\n  beerus: 9999,\n})\n"],"mappings":";AAGA,MAAa,iDAAWA,CAAAA,CAAAA,aAAa,SAAS;CAC5C,QAAQ;CACR,UAAU;CACV,OAAO;CAEP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CAER,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;AACV,CAAC"}
+{"version":3,"file":"z-indices.cjs","names":["defineTokens"],"sources":["../../../../src/theme/tokens/z-indices.ts"],"sourcesContent":["/* eslint-disable perfectionist/sort-objects */\nimport { defineTokens } from \"../../core\"\n\nexport const zIndices = defineTokens.zIndices({\n  yamcha: 1,\n  kurillin: 9,\n  nappa: 99,\n\n  guldo: 100,\n  jeice: 110,\n  burter: 120,\n  recoome: 130,\n  ginyu: 140,\n  dodoria: 150,\n  zarbon: 160,\n\n  freeza: 9996,\n  vegeta: 9997,\n  sonGoku: 9998,\n  beerus: 9999,\n\n  infinity: 2147483647,\n})\n"],"mappings":";AAGA,MAAa,iDAAWA,CAAAA,CAAAA,aAAa,SAAS;CAC5C,QAAQ;CACR,UAAU;CACV,OAAO;CAEP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CAER,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;CAER,UAAU;AACZ,CAAC"}

package/dist/esm/core/css/utils.js

@@ -82,7 +82,7 @@ function tokenToVar(system) {
 }
 function varToValue(system) {
 	return function(variable) {
-		const value = system.cssVars[variable];
+		const value = system.cssVars.light[variable];
 		if (isCSSVar(value)) return varToValue(system)(value.replace(/^var\(/, "").replace(/\)$/, ""));
 		else return value;
 	};

package/dist/esm/core/css/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/core/css/utils.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { ColorMode, System, ThemeToken, UsageTheme } from \"../system\"\nimport type { StyleConfig } from \"./config\"\nimport type { CSSFunction, CSSProperties } from \"./index.types\"\nimport { isObject, isString, isUndefined } from \"../../utils\"\nimport { getColorSchemeVar, isColorScheme } from \"../system\"\n\nexport interface TransformOptions {\n  system: System\n  css?: CSSFunction\n  fallback?: any\n  prev?: Dict\n  properties?: CSSProperties[]\n  theme?: UsageTheme\n}\n\nexport interface Transform {\n  (value: any, options: TransformOptions): any\n}\n\nexport const globalValues = new Set([\n  \"inherit\",\n  \"initial\",\n  \"none\",\n  \"revert\",\n  \"unset\",\n])\n\nexport function isCSSFunction(value: any) {\n  return isString(value) && value.includes(\"(\") && value.includes(\")\")\n}\n\nexport function getCSSFunction(value: any) {\n  const regex = /(^[a-z-A-Z]+)\\((.*)\\)/g\n  const [, type, values] = regex.exec(value) ?? []\n\n  return { type, values }\n}\n\nexport function splitValues(\n  values: string,\n  cb: (\n    current: string,\n    prev: string | undefined,\n    next: string | undefined,\n  ) => boolean = (current) => current === \",\",\n  addSeparator = false,\n) {\n  const result = []\n\n  let value = \"\"\n  let depth = 0\n\n  for (let i = 0; i < values.length; i++) {\n    const current = values[i]\n    const prev = values[i - 1]\n    const next = values[i + 1]\n\n    if (current === \"(\") depth++\n    if (current === \")\") depth--\n\n    if (!isUndefined(current) && cb(current, prev, next) && depth === 0) {\n      if (value) result.push(value.trim())\n\n      if (addSeparator) result.push(current)\n\n      value = \"\"\n    } else {\n      value += current\n    }\n  }\n\n  if (value) result.push(value.trim())\n\n  return result.filter(Boolean)\n}\n\nexport function isCSSVar(value: string) {\n  return /^var\\(--.+\\)$/.test(value)\n}\n\nexport function isInterpolation(value: string) {\n  return /\\{.+\\}/.test(value)\n}\n\nexport function isCSSToken({ cssMap }: System) {\n  return function (value: any) {\n    return isObject(cssMap) && value in cssMap && !!cssMap[value]?.ref\n  }\n}\n\nexport function isImportant(value: any): boolean {\n  return (\n    isString(value) && (/\\s*!important$/.test(value) || /\\s*!$/.test(value))\n  )\n}\n\nexport function omitImportant(value: any): string {\n  return isString(value) ? value.replace(/(!important|!)$/, \"\").trim() : value\n}\n\nexport function insertImportant(value: any, style?: StyleConfig): any {\n  if (isString(value)) return value + \" !important\"\n  else if (isObject(value))\n    if (style?.important) {\n      return Object.fromEntries(\n        Object.entries(value).map(([key, value]) => [\n          key,\n          value + \" !important\",\n        ]),\n      )\n    } else {\n      if (!style?.properties) return value\n\n      for (const property of style.properties) value[property] += \" !important\"\n    }\n\n  return value\n}\n\nexport function analyzeCSSValue(value: any) {\n  let n = parseFloat(value.toString())\n  const unit = value.toString().replace(String(n), \"\")\n\n  return { unit, unitless: !unit, value }\n}\n\nexport function tokenToVar(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken))\n      return system.cssMap[resolvedToken]!.ref\n    else return fallbackValue || value\n  }\n}\n\nexport function varToValue(system: System) {\n  return function (variable: string): string {\n    const value = system.cssVars[variable]\n\n    if (isCSSVar(value))\n      return varToValue(system)(value.replace(/^var\\(/, \"\").replace(/\\)$/, \"\"))\n    else return value\n  }\n}\n\nexport function tokenToValue(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken)) {\n      const variable = system.cssMap[resolvedToken]!.var\n\n      return varToValue(system)(variable)\n    } else {\n      return fallbackValue || value\n    }\n  }\n}\n\nexport function mode<L, D>(light: L, dark: D) {\n  return function (colorMode: ColorMode | undefined = \"light\"): D | L {\n    return colorMode === \"light\" ? light : dark\n  }\n}\n\nfunction combineFunctions(a: Transform, b: Transform): Transform {\n  return function (value, ...args) {\n    return b(a(value, ...args), ...args)\n  }\n}\n\nexport function pipe(...transformers: Transform[]) {\n  return transformers.reduce(combineFunctions)\n}\n"],"mappings":"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"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/core/css/utils.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { ColorMode, System, ThemeToken, UsageTheme } from \"../system\"\nimport type { StyleConfig } from \"./config\"\nimport type { CSSFunction, CSSProperties } from \"./index.types\"\nimport { isObject, isString, isUndefined } from \"../../utils\"\nimport { getColorSchemeVar, isColorScheme } from \"../system\"\n\nexport interface TransformOptions {\n  system: System\n  css?: CSSFunction\n  fallback?: any\n  prev?: Dict\n  properties?: CSSProperties[]\n  theme?: UsageTheme\n}\n\nexport interface Transform {\n  (value: any, options: TransformOptions): any\n}\n\nexport const globalValues = new Set([\n  \"inherit\",\n  \"initial\",\n  \"none\",\n  \"revert\",\n  \"unset\",\n])\n\nexport function isCSSFunction(value: any) {\n  return isString(value) && value.includes(\"(\") && value.includes(\")\")\n}\n\nexport function getCSSFunction(value: any) {\n  const regex = /(^[a-z-A-Z]+)\\((.*)\\)/g\n  const [, type, values] = regex.exec(value) ?? []\n\n  return { type, values }\n}\n\nexport function splitValues(\n  values: string,\n  cb: (\n    current: string,\n    prev: string | undefined,\n    next: string | undefined,\n  ) => boolean = (current) => current === \",\",\n  addSeparator = false,\n) {\n  const result = []\n\n  let value = \"\"\n  let depth = 0\n\n  for (let i = 0; i < values.length; i++) {\n    const current = values[i]\n    const prev = values[i - 1]\n    const next = values[i + 1]\n\n    if (current === \"(\") depth++\n    if (current === \")\") depth--\n\n    if (!isUndefined(current) && cb(current, prev, next) && depth === 0) {\n      if (value) result.push(value.trim())\n\n      if (addSeparator) result.push(current)\n\n      value = \"\"\n    } else {\n      value += current\n    }\n  }\n\n  if (value) result.push(value.trim())\n\n  return result.filter(Boolean)\n}\n\nexport function isCSSVar(value: string) {\n  return /^var\\(--.+\\)$/.test(value)\n}\n\nexport function isInterpolation(value: string) {\n  return /\\{.+\\}/.test(value)\n}\n\nexport function isCSSToken({ cssMap }: System) {\n  return function (value: any) {\n    return isObject(cssMap) && value in cssMap && !!cssMap[value]?.ref\n  }\n}\n\nexport function isImportant(value: any): boolean {\n  return (\n    isString(value) && (/\\s*!important$/.test(value) || /\\s*!$/.test(value))\n  )\n}\n\nexport function omitImportant(value: any): string {\n  return isString(value) ? value.replace(/(!important|!)$/, \"\").trim() : value\n}\n\nexport function insertImportant(value: any, style?: StyleConfig): any {\n  if (isString(value)) return value + \" !important\"\n  else if (isObject(value))\n    if (style?.important) {\n      return Object.fromEntries(\n        Object.entries(value).map(([key, value]) => [\n          key,\n          value + \" !important\",\n        ]),\n      )\n    } else {\n      if (!style?.properties) return value\n\n      for (const property of style.properties) value[property] += \" !important\"\n    }\n\n  return value\n}\n\nexport function analyzeCSSValue(value: any) {\n  let n = parseFloat(value.toString())\n  const unit = value.toString().replace(String(n), \"\")\n\n  return { unit, unitless: !unit, value }\n}\n\nexport function tokenToVar(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken))\n      return system.cssMap[resolvedToken]!.ref\n    else return fallbackValue || value\n  }\n}\n\nexport function varToValue(system: System) {\n  return function (variable: string): string {\n    const value = system.cssVars.light[variable]\n\n    if (isCSSVar(value))\n      return varToValue(system)(value.replace(/^var\\(/, \"\").replace(/\\)$/, \"\"))\n    else return value\n  }\n}\n\nexport function tokenToValue(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken)) {\n      const variable = system.cssMap[resolvedToken]!.var\n\n      return varToValue(system)(variable)\n    } else {\n      return fallbackValue || value\n    }\n  }\n}\n\nexport function mode<L, D>(light: L, dark: D) {\n  return function (colorMode: ColorMode | undefined = \"light\"): D | L {\n    return colorMode === \"light\" ? light : dark\n  }\n}\n\nfunction combineFunctions(a: Transform, b: Transform): Transform {\n  return function (value, ...args) {\n    return b(a(value, ...args), ...args)\n  }\n}\n\nexport function pipe(...transformers: Transform[]) {\n  return transformers.reduce(combineFunctions)\n}\n"],"mappings":"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"}

package/dist/esm/core/index.js

@@ -3,7 +3,7 @@ import { COLOR_MODE_STORAGE_KEY, DEFAULT_DIRECTION, DEFAULT_LAYERS, DEFAULT_LOCA
 import { EnvironmentProvider, defaultEnvironment, useEnvironment } from "./system/environment-provider.js";
 import { createStorageManager } from "./system/storage-manager.js";
 import { createLayers, defaultLayers } from "./system/layer.js";
-import { createVars, getColorSchemeVar, getVar, getVarName, injectVars, isColorScheme, mergeVars, transformInterpolation, varAttr } from "./system/var.js";
+import { createVarRules, createVars, getColorSchemeVar, getVar, getVarName, injectVars, isColorScheme, mergeVars, transformInterpolation, varAttr } from "./system/var.js";
 import { createSystem, defaultSystem } from "./system/create-system.js";
 import { SystemProvider, useSystem } from "./system/system-provider.js";
 import { GlobalStyles, ThemeProvider, getPreventTransition, useTheme } from "./system/theme-provider.js";
@@ -31,4 +31,4 @@ import { chainProps, createShouldForwardProp, cssProps, extractProps, isEqualPro
 import { getSlotClassName, mergeSlotCSS, useComponentSlotStyle, useComponentStyle } from "./components/use-component-style.js";
 import { getClassName, getDisplayName } from "./components/utils.js";
 import { createComponent, createSlotComponent } from "./components/create-component.js";
-export { COLOR_MODE_STORAGE_KEY, ColorModeContext, ColorModeProvider, ColorModeScript, ColorSchemeContext, DEFAULT_DIRECTION, DEFAULT_LAYERS, DEFAULT_LOCALE, DEFAULT_VAR_PREFIX, EnvironmentProvider, GlobalStyles, SystemProvider, THEME_SCHEME_STORAGE_KEY, ThemeProvider, ThemeSchemeScript, animation, animationProperties, aspectRatioProperties, atRuleStyles, attributeProperties, attributeSelectors, attributes, blurProperties, borderProperties, chainProps, colorMix, colorProperties, conditionProperties, conditionSelectors, conditions, createBreakpoints, createComponent, createLayers, createShouldForwardProp, createSlotComponent, createStorageManager, createStyled, createSystem, createVars, css, cssProps, defaultEnvironment, defaultLayers, defaultSystem, defineComponentSlotStyle, defineComponentStyle, defineConfig, defineSemanticTokens, defineStyles, defineTheme, defineThemeSchemes, defineTokens, display, durationProperties, easingProperties, extractProps, focusRingStyle, fontProperties, getCSS, getCSSFunction, getClassName, getColorModeValue, getColorSchemeVar, getCondition, getDisplayName, getPreventTransition, getSlotClassName, getStorageScript, getStyle, getVar, getVarName, gradient, gradientProperties, groupAttributeProperties, groupAttributeSelectors, groupAttributes, injectKeyframes, injectVars, isCSSFunction, isCSSToken, isCSSVar, isColorScheme, isEqualProps, keyframeProperties, keyframes, mergeCSS, mergeProps, mergeSlotCSS, mergeVars, peerAttributeProperties, peerAttributeSelectors, peerAttributes, pseudoClassProperties, pseudoClassSelectors, pseudoClasses, pseudoElementProperties, pseudoElementSelectors, pseudoElements, pseudoStyles, radiusProperties, shadowProperties, shorthandStyles, sizeProperties, spaceProperties, standardStyles, styleProperties, styled, styledStyles, styles, tokenToValue, tokenToVar, transformConditionalValue, transformInterpolation, transforms, useCSS, useColorMode, useColorModeValue, useColorSchemeContext, useComponentSlotStyle, useComponentStyle, useEnvironment, useExtractProps, useInjectVarsIntoCss, useInjectVarsIntoProps, useSplitProps, useSystem, useSystemColorMode, useTheme, varAttr, varToValue, variableLengthProperties, vendorProperties, zIndexProperties };
+export { COLOR_MODE_STORAGE_KEY, ColorModeContext, ColorModeProvider, ColorModeScript, ColorSchemeContext, DEFAULT_DIRECTION, DEFAULT_LAYERS, DEFAULT_LOCALE, DEFAULT_VAR_PREFIX, EnvironmentProvider, GlobalStyles, SystemProvider, THEME_SCHEME_STORAGE_KEY, ThemeProvider, ThemeSchemeScript, animation, animationProperties, aspectRatioProperties, atRuleStyles, attributeProperties, attributeSelectors, attributes, blurProperties, borderProperties, chainProps, colorMix, colorProperties, conditionProperties, conditionSelectors, conditions, createBreakpoints, createComponent, createLayers, createShouldForwardProp, createSlotComponent, createStorageManager, createStyled, createSystem, createVarRules, createVars, css, cssProps, defaultEnvironment, defaultLayers, defaultSystem, defineComponentSlotStyle, defineComponentStyle, defineConfig, defineSemanticTokens, defineStyles, defineTheme, defineThemeSchemes, defineTokens, display, durationProperties, easingProperties, extractProps, focusRingStyle, fontProperties, getCSS, getCSSFunction, getClassName, getColorModeValue, getColorSchemeVar, getCondition, getDisplayName, getPreventTransition, getSlotClassName, getStorageScript, getStyle, getVar, getVarName, gradient, gradientProperties, groupAttributeProperties, groupAttributeSelectors, groupAttributes, injectKeyframes, injectVars, isCSSFunction, isCSSToken, isCSSVar, isColorScheme, isEqualProps, keyframeProperties, keyframes, mergeCSS, mergeProps, mergeSlotCSS, mergeVars, peerAttributeProperties, peerAttributeSelectors, peerAttributes, pseudoClassProperties, pseudoClassSelectors, pseudoClasses, pseudoElementProperties, pseudoElementSelectors, pseudoElements, pseudoStyles, radiusProperties, shadowProperties, shorthandStyles, sizeProperties, spaceProperties, standardStyles, styleProperties, styled, styledStyles, styles, tokenToValue, tokenToVar, transformConditionalValue, transformInterpolation, transforms, useCSS, useColorMode, useColorModeValue, useColorSchemeContext, useComponentSlotStyle, useComponentStyle, useEnvironment, useExtractProps, useInjectVarsIntoCss, useInjectVarsIntoProps, useSplitProps, useSystem, useSystemColorMode, useTheme, varAttr, varToValue, variableLengthProperties, vendorProperties, zIndexProperties };

package/dist/esm/core/system/create-system.js

@@ -33,7 +33,10 @@ const defaultSystem = {
 	breakpoints: createBreakpoints(),
 	config: {},
 	cssMap: {},
-	cssVars: {},
+	cssVars: {
+		light: {},
+		dark: {}
+	},
 	layers: createLayers(),
 	utils: { getClassName: utils_exports.bem }
 };
@@ -57,7 +60,6 @@ function createSystem(theme, config = {}, rootNode) {
 	if (theme.themeSchemes) {
 		const themeSchemeEntries = Object.entries(theme.themeSchemes);
 		for (const [themeScheme, nestedTheme] of themeSchemeEntries) {
-			const themeCondition = `[data-theme=${themeScheme}] &:not([data-theme]), &[data-theme=${themeScheme}]`;
 			const nestedPrimaryTokens = {
 				...createTokens(nestedTheme, "primary", shouldProcess),
 				...createColorSchemeTokens(theme, nestedTheme, shouldProcess)
@@ -69,7 +71,8 @@ function createSystem(theme, config = {}, rootNode) {
 				...secondaryTokens,
 				...tertiaryTokens
 			});
-			cssVars[themeCondition] = nestedCSSVars;
+			cssVars.themes ??= {};
+			cssVars.themes[themeScheme] = nestedCSSVars;
 		}
 	}
 	return {