@kbach/react 0.6.30 → 0.6.32

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
@@ -837,8 +842,7 @@ function styled(Component, baseClasses = "") {
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
         // eslint-disable-line react-hooks/exhaustive-deps
       );
-      const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
-      const finalStyle = isWebPlatform ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
+      const finalStyle = isWebPlatform ? (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
       const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
@@ -1025,7 +1029,7 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
       [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked, isNonStringComponent]
     );
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const componentProps = {
       ref,
       ...restForComponent,

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-E322MVGC.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
@@ -400,8 +406,7 @@ function styled(Component, baseClasses = "") {
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
         // eslint-disable-line react-hooks/exhaustive-deps
       );
-      const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
-      const finalStyle = isWebPlatform ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
+      const finalStyle = isWebPlatform ? (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
       const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";

package/dist/jsx-dev-runtime.js

@@ -234,7 +234,7 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked, isNonStringComponent]
     );
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const componentProps = {
       ref,
       ...restForComponent,
@@ -291,7 +291,7 @@ var DarkWrapper = import_react3.default.forwardRef(
       return s;
     }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
   }
@@ -619,8 +619,7 @@ function omitConsumed(props) {
 }
 function mergeStyle(computed, userStyle) {
   if (!userStyle) return computed;
-  if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
-  return { ...computed, ...userStyle };
+  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
 }
 function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
   if (!webTag || !resolvedBase) return userStyle;
@@ -650,11 +649,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 +675,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 +683,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 +692,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 +710,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-FF4AZQIQ.mjs";
-import "./chunk-TKBIGAR2.mjs";
+} from "./chunk-JUGDQQQ4.mjs";
+import "./chunk-E322MVGC.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -235,7 +235,7 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked, isNonStringComponent]
     );
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const componentProps = {
       ref,
       ...restForComponent,
@@ -292,7 +292,7 @@ var DarkWrapper = import_react3.default.forwardRef(
       return s;
     }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
   }
@@ -625,8 +625,7 @@ function omitConsumed(props) {
 }
 function mergeStyle(computed, userStyle) {
   if (!userStyle) return computed;
-  if (Array.isArray(userStyle)) return Object.assign({}, computed, ...userStyle);
-  return { ...computed, ...userStyle };
+  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
 }
 function withImpliedFlexIfNeeded(webTag, resolvedBase, userStyle) {
   if (!webTag || !resolvedBase) return userStyle;
@@ -656,11 +655,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);
   }
@@ -680,8 +681,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);
@@ -689,7 +689,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);
@@ -698,7 +698,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);
@@ -716,7 +716,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-FF4AZQIQ.mjs";
+} from "./chunk-JUGDQQQ4.mjs";
 import {
   registerWebElement
-} from "./chunk-TKBIGAR2.mjs";
+} from "./chunk-E322MVGC.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;
     }