@kbach/react 0.6.29 → 0.6.31

package/dist/index.d.ts

@@ -50,7 +50,7 @@ type ColorsAPI<ColorName extends string = DefaultColorName> = {
      */
     readonly alpha: (color: string, opacity?: number) => string;
 };
-declare function wrapColors<ColorName extends string = DefaultColorName>(rawColors: ThemeColors): ColorsAPI<ColorName>;
+declare function wrapColors<ColorName extends string = DefaultColorName>(rawColors: ThemeColors, isDark?: boolean): ColorsAPI<ColorName>;
 declare function useColors<ColorName extends string = DefaultColorName>(): ColorsAPI<ColorName>;
 
 /**

package/dist/index.js

@@ -99,7 +99,10 @@ function applyOpacity(color, opacity) {
   if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
   return color;
 }
-function makeShadeProxy(shades) {
+function pickSide(value, isDark) {
+  return (0, import_core.isModeAwareColor)(value) ? isDark ? value.dark : value.light : value;
+}
+function makeShadeProxy(shades, isDark) {
   return new Proxy(shades, {
     get(target, prop) {
       const key = String(prop);
@@ -108,14 +111,15 @@ function makeShadeProxy(shades) {
         const slash = key.indexOf("/");
         const shade = key.slice(0, slash);
         const op = Number(key.slice(slash + 1));
-        const color = target[shade];
-        return typeof color === "string" ? applyOpacity(color, op) : void 0;
+        const color2 = target[shade];
+        return color2 !== void 0 ? applyOpacity(pickSide(color2, isDark), op) : void 0;
       }
-      return target[key];
+      const color = target[key];
+      return color !== void 0 ? pickSide(color, isDark) : void 0;
     }
   });
 }
-function wrapColors(rawColors) {
+function wrapColors(rawColors, isDark = false) {
   const cache = /* @__PURE__ */ new Map();
   const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
   return new Proxy({ alpha }, {
@@ -128,19 +132,20 @@ function wrapColors(rawColors) {
         const name = key.slice(0, slash);
         const op = Number(key.slice(slash + 1));
         const entry2 = rawColors[name];
-        return typeof entry2 === "string" ? applyOpacity(entry2, op) : void 0;
+        return entry2 !== void 0 && (typeof entry2 === "string" || (0, import_core.isModeAwareColor)(entry2)) ? applyOpacity(pickSide(entry2, isDark), op) : void 0;
       }
       const entry = rawColors[key];
       if (entry === void 0) return void 0;
-      if (typeof entry === "string") return entry;
-      if (!cache.has(key)) cache.set(key, makeShadeProxy(entry));
-      return cache.get(key);
+      if (typeof entry === "string" || (0, import_core.isModeAwareColor)(entry)) return pickSide(entry, isDark);
+      const cacheKey = `${key}:${isDark}`;
+      if (!cache.has(cacheKey)) cache.set(cacheKey, makeShadeProxy(entry, isDark));
+      return cache.get(cacheKey);
     }
   });
 }
 function useColors() {
-  const { config } = useTheme();
-  return (0, import_react2.useMemo)(() => wrapColors(config.theme.colors), [config.theme.colors]);
+  const { config, isDark } = useTheme();
+  return (0, import_react2.useMemo)(() => wrapColors(config.theme.colors, isDark), [config.theme.colors, isDark]);
 }
 
 // src/useSpacing.ts

package/dist/index.mjs

@@ -18,6 +18,7 @@ import {
   hasInteractiveBuckets,
   hasResponsiveBuckets,
   initConfig,
+  isModeAwareColor,
   isNative,
   isWeb,
   kbachWarn,
@@ -42,7 +43,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-TKBIGAR2.mjs";
+} from "./chunk-OIJ6RP4F.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -74,7 +75,10 @@ function applyOpacity(color, opacity) {
   if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
   return color;
 }
-function makeShadeProxy(shades) {
+function pickSide(value, isDark) {
+  return isModeAwareColor(value) ? isDark ? value.dark : value.light : value;
+}
+function makeShadeProxy(shades, isDark) {
   return new Proxy(shades, {
     get(target, prop) {
       const key = String(prop);
@@ -83,14 +87,15 @@ function makeShadeProxy(shades) {
         const slash = key.indexOf("/");
         const shade = key.slice(0, slash);
         const op = Number(key.slice(slash + 1));
-        const color = target[shade];
-        return typeof color === "string" ? applyOpacity(color, op) : void 0;
+        const color2 = target[shade];
+        return color2 !== void 0 ? applyOpacity(pickSide(color2, isDark), op) : void 0;
       }
-      return target[key];
+      const color = target[key];
+      return color !== void 0 ? pickSide(color, isDark) : void 0;
     }
   });
 }
-function wrapColors(rawColors) {
+function wrapColors(rawColors, isDark = false) {
   const cache = /* @__PURE__ */ new Map();
   const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
   return new Proxy({ alpha }, {
@@ -103,19 +108,20 @@ function wrapColors(rawColors) {
         const name = key.slice(0, slash);
         const op = Number(key.slice(slash + 1));
         const entry2 = rawColors[name];
-        return typeof entry2 === "string" ? applyOpacity(entry2, op) : void 0;
+        return entry2 !== void 0 && (typeof entry2 === "string" || isModeAwareColor(entry2)) ? applyOpacity(pickSide(entry2, isDark), op) : void 0;
       }
       const entry = rawColors[key];
       if (entry === void 0) return void 0;
-      if (typeof entry === "string") return entry;
-      if (!cache.has(key)) cache.set(key, makeShadeProxy(entry));
-      return cache.get(key);
+      if (typeof entry === "string" || isModeAwareColor(entry)) return pickSide(entry, isDark);
+      const cacheKey = `${key}:${isDark}`;
+      if (!cache.has(cacheKey)) cache.set(cacheKey, makeShadeProxy(entry, isDark));
+      return cache.get(cacheKey);
     }
   });
 }
 function useColors() {
-  const { config } = useTheme();
-  return useMemo(() => wrapColors(config.theme.colors), [config.theme.colors]);
+  const { config, isDark } = useTheme();
+  return useMemo(() => wrapColors(config.theme.colors, isDark), [config.theme.colors, isDark]);
 }
 
 // src/useSpacing.ts

package/dist/jsx-dev-runtime.js

@@ -623,10 +623,16 @@ function mergeStyle(computed, userStyle) {
   return { ...computed, ...userStyle };
 }
 function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
-  if (!webTag || !resolvedBase || resolvedBase.display !== void 0 || !("flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase)) {
-    return userStyle;
-  }
-  return Array.isArray(userStyle) ? [{ display: "flex" }, ...userStyle] : { display: "flex", ...userStyle };
+  if (!webTag || !resolvedBase) return userStyle;
+  const explicitDisplay = resolvedBase.display;
+  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase;
+  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
+  if (!willBeFlex) return userStyle;
+  const compensation = {};
+  if (explicitDisplay === void 0) compensation.display = "flex";
+  if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
+  if (Object.keys(compensation).length === 0) return userStyle;
+  return Array.isArray(userStyle) ? [compensation, ...userStyle] : { ...compensation, ...userStyle };
 }
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
@@ -644,11 +650,13 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, effectiveType, workingProps, key);
   }
   const classStr = classStrRaw;
-  if (!import_core6.isNative && (0, import_core6.isRuntimeCSSDisabled)() && classStr && !__kbachStyles) {
+  const config = (0, import_core6.getConfig)();
+  const expandedClassStr = classStr ? (0, import_core6.expandModeAwareColorClasses)(classStr, config.theme.colors) : classStr;
+  if (!import_core6.isNative && (0, import_core6.isRuntimeCSSDisabled)() && expandedClassStr && !__kbachStyles) {
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     return makeElement(isStaticChildren, effectiveType, {
       ...passProps2,
-      className: (0, import_core6.normalizeClassString)(classStr),
+      className: (0, import_core6.normalizeClassString)(expandedClassStr),
       ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
     }, key);
   }
@@ -668,8 +676,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
     return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);
   }
-  const config = (0, import_core6.getConfig)();
-  const resolved = !import_core6.isWeb && __kbachStyles != null ? __kbachStyles : classStr ? (0, import_core6.resolve)(classStr, config.theme, config.darkMode) : {};
+  const resolved = !import_core6.isWeb && __kbachStyles != null ? __kbachStyles : expandedClassStr ? (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode) : {};
   const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
   const userStyle = withImpliedFlexIfNeeded(webTag, resolved.base, rawUserStyle);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
@@ -677,7 +684,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
       Component: effectiveType,
       resolvedStyle: resolved,
-      ...!import_core6.isNative && classStr ? { className: (0, import_core6.normalizeClassString)(classStr) } : {},
+      ...!import_core6.isNative && expandedClassStr ? { className: (0, import_core6.normalizeClassString)(expandedClassStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -686,7 +693,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return (0, import_jsx_runtime.jsx)(DarkWrapper, {
       Component: effectiveType,
       resolvedStyle: resolved,
-      ...!import_core6.isNative && classStr ? { className: (0, import_core6.normalizeClassString)(classStr) } : {},
+      ...!import_core6.isNative && expandedClassStr ? { className: (0, import_core6.normalizeClassString)(expandedClassStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -704,7 +711,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   return makeElement(isStaticChildren, effectiveType, {
     ...passProps,
     ...finalStyle !== void 0 ? { style: finalStyle } : {},
-    ...!import_core6.isNative && classStr ? { className: (0, import_core6.normalizeClassString)(classStr) } : {}
+    ...!import_core6.isNative && expandedClassStr ? { className: (0, import_core6.normalizeClassString)(expandedClassStr) } : {}
   }, key);
 }
 function jsx(type, props, key) {

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-S6AHQ5M6.mjs";
-import "./chunk-TKBIGAR2.mjs";
+} from "./chunk-MOWXWICC.mjs";
+import "./chunk-OIJ6RP4F.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -629,10 +629,16 @@ function mergeStyle(computed, userStyle) {
   return { ...computed, ...userStyle };
 }
 function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
-  if (!webTag || !resolvedBase || resolvedBase.display !== void 0 || !("flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase)) {
-    return userStyle;
-  }
-  return Array.isArray(userStyle) ? [{ display: "flex" }, ...userStyle] : { display: "flex", ...userStyle };
+  if (!webTag || !resolvedBase) return userStyle;
+  const explicitDisplay = resolvedBase.display;
+  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase;
+  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
+  if (!willBeFlex) return userStyle;
+  const compensation = {};
+  if (explicitDisplay === void 0) compensation.display = "flex";
+  if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
+  if (Object.keys(compensation).length === 0) return userStyle;
+  return Array.isArray(userStyle) ? [compensation, ...userStyle] : { ...compensation, ...userStyle };
 }
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
@@ -650,11 +656,13 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return makeElement(isStaticChildren, effectiveType, workingProps, key);
   }
   const classStr = classStrRaw;
-  if (!import_core6.isNative && (0, import_core6.isRuntimeCSSDisabled)() && classStr && !__kbachStyles) {
+  const config = (0, import_core6.getConfig)();
+  const expandedClassStr = classStr ? (0, import_core6.expandModeAwareColorClasses)(classStr, config.theme.colors) : classStr;
+  if (!import_core6.isNative && (0, import_core6.isRuntimeCSSDisabled)() && expandedClassStr && !__kbachStyles) {
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     return makeElement(isStaticChildren, effectiveType, {
       ...passProps2,
-      className: (0, import_core6.normalizeClassString)(classStr),
+      className: (0, import_core6.normalizeClassString)(expandedClassStr),
       ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
     }, key);
   }
@@ -674,8 +682,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
     return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);
   }
-  const config = (0, import_core6.getConfig)();
-  const resolved = !import_core6.isWeb && __kbachStyles != null ? __kbachStyles : classStr ? (0, import_core6.resolve)(classStr, config.theme, config.darkMode) : {};
+  const resolved = !import_core6.isWeb && __kbachStyles != null ? __kbachStyles : expandedClassStr ? (0, import_core6.resolve)(expandedClassStr, config.theme, config.darkMode) : {};
   const { style: rawUserStyle, ...passProps } = omitConsumed(workingProps);
   const userStyle = withImpliedFlexIfNeeded(webTag, resolved.base, rawUserStyle);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
@@ -683,7 +690,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
       Component: effectiveType,
       resolvedStyle: resolved,
-      ...!import_core6.isNative && classStr ? { className: (0, import_core6.normalizeClassString)(classStr) } : {},
+      ...!import_core6.isNative && expandedClassStr ? { className: (0, import_core6.normalizeClassString)(expandedClassStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -692,7 +699,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return (0, import_jsx_runtime.jsx)(DarkWrapper, {
       Component: effectiveType,
       resolvedStyle: resolved,
-      ...!import_core6.isNative && classStr ? { className: (0, import_core6.normalizeClassString)(classStr) } : {},
+      ...!import_core6.isNative && expandedClassStr ? { className: (0, import_core6.normalizeClassString)(expandedClassStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -710,7 +717,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   return makeElement(isStaticChildren, effectiveType, {
     ...passProps,
     ...finalStyle !== void 0 ? { style: finalStyle } : {},
-    ...!import_core6.isNative && classStr ? { className: (0, import_core6.normalizeClassString)(classStr) } : {}
+    ...!import_core6.isNative && expandedClassStr ? { className: (0, import_core6.normalizeClassString)(expandedClassStr) } : {}
   }, key);
 }
 function jsx(type, props, key) {

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-S6AHQ5M6.mjs";
+} from "./chunk-MOWXWICC.mjs";
 import {
   registerWebElement
-} from "./chunk-TKBIGAR2.mjs";
+} from "./chunk-OIJ6RP4F.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.d.mts

@@ -47,8 +47,17 @@ interface ModifierDef {
 interface StyleValue {
     [key: string]: string | number | undefined | null | StyleValue | StyleValue[];
 }
-type ColorShades = Record<string, string>;
-type ThemeColors = Record<string, string | ColorShades>;
+/**
+ * A color value is either a plain string (hex/rgb/alias-to-another-color-name)
+ * or a mode-aware pair — resolved to `light` or `dark` per the active theme
+ * mode wherever it's actually used (className resolution, useColors()).
+ */
+type ColorValue = string | {
+    light: string;
+    dark: string;
+};
+type ColorShades = Record<string, ColorValue>;
+type ThemeColors = Record<string, ColorValue | ColorShades>;
 type ThemeSpacing = Record<string, number | string>;
 interface ThemeConfig {
     colors: ThemeColors;

package/dist/vite-plugin.d.ts

@@ -47,8 +47,17 @@ interface ModifierDef {
 interface StyleValue {
     [key: string]: string | number | undefined | null | StyleValue | StyleValue[];
 }
-type ColorShades = Record<string, string>;
-type ThemeColors = Record<string, string | ColorShades>;
+/**
+ * A color value is either a plain string (hex/rgb/alias-to-another-color-name)
+ * or a mode-aware pair — resolved to `light` or `dark` per the active theme
+ * mode wherever it's actually used (className resolution, useColors()).
+ */
+type ColorValue = string | {
+    light: string;
+    dark: string;
+};
+type ColorShades = Record<string, ColorValue>;
+type ThemeColors = Record<string, ColorValue | ColorShades>;
 type ThemeSpacing = Record<string, number | string>;
 interface ThemeConfig {
     colors: ThemeColors;

package/dist/vite-plugin.js

@@ -649,7 +649,15 @@ var defaultTheme = {
   animation: {}
 };
 
+// src/core/colorValue.ts
+function isModeAwareColor(v) {
+  return typeof v === "object" && v !== null && "light" in v && "dark" in v;
+}
+
 // src/core/resolvers/color.ts
+function pickModeAwareFallback(v) {
+  return isModeAwareColor(v) ? v.light : v;
+}
 function resolveColor(value, colors, isArbitrary) {
   if (isArbitrary) return value;
   const slashIdx = value.indexOf("/");
@@ -661,15 +669,17 @@ function resolveColor(value, colors, isArbitrary) {
   } else if (colorPart in colors) {
     const entry = colors[colorPart];
     if (typeof entry === "string") hex = entry;
-    else if (typeof entry === "object" && "6" in entry) hex = entry["6"];
+    else if (isModeAwareColor(entry)) hex = pickModeAwareFallback(entry);
+    else if (typeof entry === "object" && "6" in entry) hex = pickModeAwareFallback(entry["6"]);
   } else {
     const lastDash = colorPart.lastIndexOf("-");
     if (lastDash > 0) {
       const colorName = colorPart.slice(0, lastDash);
       const shade = colorPart.slice(lastDash + 1);
       const scale = colors[colorName];
-      if (scale && typeof scale === "object" && shade in scale) {
-        hex = scale[shade] ?? null;
+      if (scale && typeof scale === "object" && !isModeAwareColor(scale) && shade in scale) {
+        const shadeVal = scale[shade];
+        hex = shadeVal !== void 0 ? pickModeAwareFallback(shadeVal) : null;
       }
     }
   }
@@ -2755,6 +2765,62 @@ function findOuterColon(s) {
   return -1;
 }
 
+// src/core/modeAwareColors.ts
+var _modeAwareMapCache = /* @__PURE__ */ new WeakMap();
+function buildModeAwareMap(colors) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [name, entry] of Object.entries(colors)) {
+    if (isModeAwareColor(entry)) {
+      map.set(name, entry);
+    } else if (entry && typeof entry === "object") {
+      for (const [shade, val] of Object.entries(entry)) {
+        if (isModeAwareColor(val)) map.set(`${name}-${shade}`, val);
+      }
+    }
+  }
+  return map;
+}
+function getModeAwareMap(colors) {
+  let map = _modeAwareMapCache.get(colors);
+  if (!map) {
+    map = buildModeAwareMap(colors);
+    _modeAwareMapCache.set(colors, map);
+  }
+  return map;
+}
+function expandModeAwareColorClasses(classString, colors) {
+  const map = getModeAwareMap(colors);
+  if (map.size === 0) return classString;
+  const tokens = splitClassTokens(classString);
+  let changed = false;
+  const out = [];
+  for (const token of tokens) {
+    const parsed = parseClass(token);
+    if (!parsed || parsed.isArbitrary) {
+      out.push(token);
+      continue;
+    }
+    if (parsed.modifiers.includes("dark") || parsed.modifiers.includes("light")) {
+      out.push(token);
+      continue;
+    }
+    const slashIdx = parsed.value.indexOf("/");
+    const colorPart = slashIdx > 0 ? parsed.value.slice(0, slashIdx) : parsed.value;
+    const opacitySuffix = slashIdx > 0 ? parsed.value.slice(slashIdx) : "";
+    const pair = map.get(colorPart);
+    if (!pair) {
+      out.push(token);
+      continue;
+    }
+    changed = true;
+    const bang = parsed.important ? "!" : "";
+    const modPrefix = parsed.modifiers.map((m) => `${m}:`).join("");
+    out.push(`${bang}${modPrefix}${parsed.utility}-[${pair.light}]${opacitySuffix}`);
+    out.push(`${bang}dark:${modPrefix}${parsed.utility}-[${pair.dark}]${opacitySuffix}`);
+  }
+  return changed ? out.join(" ") : classString;
+}
+
 // src/core/resolver.ts
 var _defaultFontFamily;
 function setDefaultFontFamily(font) {
@@ -2977,7 +3043,7 @@ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens
 }
 function generateClassCSS(classString, theme, darkMode = "attribute", screens = {}) {
   const rules = [];
-  for (const parsed of parseClasses(classString)) {
+  for (const parsed of parseClasses(expandModeAwareColorClasses(classString, theme.colors))) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) continue;
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
@@ -3011,8 +3077,9 @@ function resolveOneRef(ref, colors) {
   const shade = ref.slice(lastDash + 1);
   if (!/^\d+$/.test(shade)) return null;
   const entry = colors[name];
-  if (!entry || typeof entry !== "object") return null;
-  return entry[shade] ?? null;
+  if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
+  const target = entry[shade];
+  return typeof target === "string" ? target : null;
 }
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
@@ -3025,14 +3092,17 @@ function resolveColorRefs(colors) {
     }
     return current;
   }
+  function resolveValue(val) {
+    return typeof val === "string" ? resolveChain(val) : { light: resolveChain(val.light), dark: resolveChain(val.dark) };
+  }
   const out = {};
   for (const [key, val] of Object.entries(colors)) {
-    if (typeof val === "string") {
-      out[key] = resolveChain(val);
+    if (typeof val === "string" || isModeAwareColor(val)) {
+      out[key] = resolveValue(val);
     } else {
       const shades = {};
-      for (const [shade, hex] of Object.entries(val)) {
-        shades[shade] = resolveChain(hex);
+      for (const [shade, v] of Object.entries(val)) {
+        shades[shade] = resolveValue(v);
       }
       out[key] = shades;
     }

package/dist/vite-plugin.mjs

@@ -615,7 +615,15 @@ var defaultTheme = {
   animation: {}
 };
 
+// src/core/colorValue.ts
+function isModeAwareColor(v) {
+  return typeof v === "object" && v !== null && "light" in v && "dark" in v;
+}
+
 // src/core/resolvers/color.ts
+function pickModeAwareFallback(v) {
+  return isModeAwareColor(v) ? v.light : v;
+}
 function resolveColor(value, colors, isArbitrary) {
   if (isArbitrary) return value;
   const slashIdx = value.indexOf("/");
@@ -627,15 +635,17 @@ function resolveColor(value, colors, isArbitrary) {
   } else if (colorPart in colors) {
     const entry = colors[colorPart];
     if (typeof entry === "string") hex = entry;
-    else if (typeof entry === "object" && "6" in entry) hex = entry["6"];
+    else if (isModeAwareColor(entry)) hex = pickModeAwareFallback(entry);
+    else if (typeof entry === "object" && "6" in entry) hex = pickModeAwareFallback(entry["6"]);
   } else {
     const lastDash = colorPart.lastIndexOf("-");
     if (lastDash > 0) {
       const colorName = colorPart.slice(0, lastDash);
       const shade = colorPart.slice(lastDash + 1);
       const scale = colors[colorName];
-      if (scale && typeof scale === "object" && shade in scale) {
-        hex = scale[shade] ?? null;
+      if (scale && typeof scale === "object" && !isModeAwareColor(scale) && shade in scale) {
+        const shadeVal = scale[shade];
+        hex = shadeVal !== void 0 ? pickModeAwareFallback(shadeVal) : null;
       }
     }
   }
@@ -2721,6 +2731,62 @@ function findOuterColon(s) {
   return -1;
 }
 
+// src/core/modeAwareColors.ts
+var _modeAwareMapCache = /* @__PURE__ */ new WeakMap();
+function buildModeAwareMap(colors) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [name, entry] of Object.entries(colors)) {
+    if (isModeAwareColor(entry)) {
+      map.set(name, entry);
+    } else if (entry && typeof entry === "object") {
+      for (const [shade, val] of Object.entries(entry)) {
+        if (isModeAwareColor(val)) map.set(`${name}-${shade}`, val);
+      }
+    }
+  }
+  return map;
+}
+function getModeAwareMap(colors) {
+  let map = _modeAwareMapCache.get(colors);
+  if (!map) {
+    map = buildModeAwareMap(colors);
+    _modeAwareMapCache.set(colors, map);
+  }
+  return map;
+}
+function expandModeAwareColorClasses(classString, colors) {
+  const map = getModeAwareMap(colors);
+  if (map.size === 0) return classString;
+  const tokens = splitClassTokens(classString);
+  let changed = false;
+  const out = [];
+  for (const token of tokens) {
+    const parsed = parseClass(token);
+    if (!parsed || parsed.isArbitrary) {
+      out.push(token);
+      continue;
+    }
+    if (parsed.modifiers.includes("dark") || parsed.modifiers.includes("light")) {
+      out.push(token);
+      continue;
+    }
+    const slashIdx = parsed.value.indexOf("/");
+    const colorPart = slashIdx > 0 ? parsed.value.slice(0, slashIdx) : parsed.value;
+    const opacitySuffix = slashIdx > 0 ? parsed.value.slice(slashIdx) : "";
+    const pair = map.get(colorPart);
+    if (!pair) {
+      out.push(token);
+      continue;
+    }
+    changed = true;
+    const bang = parsed.important ? "!" : "";
+    const modPrefix = parsed.modifiers.map((m) => `${m}:`).join("");
+    out.push(`${bang}${modPrefix}${parsed.utility}-[${pair.light}]${opacitySuffix}`);
+    out.push(`${bang}dark:${modPrefix}${parsed.utility}-[${pair.dark}]${opacitySuffix}`);
+  }
+  return changed ? out.join(" ") : classString;
+}
+
 // src/core/resolver.ts
 var _defaultFontFamily;
 function setDefaultFontFamily(font) {
@@ -2943,7 +3009,7 @@ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens
 }
 function generateClassCSS(classString, theme, darkMode = "attribute", screens = {}) {
   const rules = [];
-  for (const parsed of parseClasses(classString)) {
+  for (const parsed of parseClasses(expandModeAwareColorClasses(classString, theme.colors))) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) continue;
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
@@ -2977,8 +3043,9 @@ function resolveOneRef(ref, colors) {
   const shade = ref.slice(lastDash + 1);
   if (!/^\d+$/.test(shade)) return null;
   const entry = colors[name];
-  if (!entry || typeof entry !== "object") return null;
-  return entry[shade] ?? null;
+  if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
+  const target = entry[shade];
+  return typeof target === "string" ? target : null;
 }
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
@@ -2991,14 +3058,17 @@ function resolveColorRefs(colors) {
     }
     return current;
   }
+  function resolveValue(val) {
+    return typeof val === "string" ? resolveChain(val) : { light: resolveChain(val.light), dark: resolveChain(val.dark) };
+  }
   const out = {};
   for (const [key, val] of Object.entries(colors)) {
-    if (typeof val === "string") {
-      out[key] = resolveChain(val);
+    if (typeof val === "string" || isModeAwareColor(val)) {
+      out[key] = resolveValue(val);
     } else {
       const shades = {};
-      for (const [shade, hex] of Object.entries(val)) {
-        shades[shade] = resolveChain(hex);
+      for (const [shade, v] of Object.entries(val)) {
+        shades[shade] = resolveValue(v);
       }
       out[key] = shades;
     }