@kbach/react 0.6.30 → 0.6.32

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;
     }

package/kbach-react.md

@@ -712,6 +712,29 @@ module.exports = {
 
 **Global default font (web):** Setting `fontFamily.sans` to anything other than `'System'` auto-injects `body { font-family: <font> }`.
 
+### Mode-aware colors (dark mode without `dark:`)
+
+A color value can be `{ light, dark }` instead of a plain string — define it once, and every class using that color automatically picks the right side, with no `dark:` variant needed at the call site:
+
+```js
+extend: {
+  theme: {
+    colors: {
+      surface: { light: '#ffffff', dark: '#111827' },
+      // each side can itself be an alias — resolved independently
+      accent:  { light: 'blue-6', dark: 'blue-4' },
+    },
+  },
+},
+```
+
+```jsx
+<div className="bg-surface text-accent" />
+// equivalent to writing bg-white dark:bg-gray-9 text-blue-6 dark:text-blue-4 by hand
+```
+
+Works everywhere a color does — `useColors()` (returns the active side directly), opacity composition (`bg-surface/50`), and per-shade within a scale (`brand: { 6: { light: '#3b82f6', dark: '#60a5fa' } }`). An explicit `dark:`/`light:` modifier stacked on an already mode-aware color is not supported (falls back to the light side) — the whole point is not needing `dark:` for these.
+
 ### Runtime update
 ```js
 import { updateConfig, clearCache } from '@kbach/react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.30",
+  "version": "0.6.32",
   "description": "React / React Native components and hooks for the Kbach framework",
   "repository": {
     "type": "git",