@kbach/react 1.0.0-beta.17 → 1.0.0-beta.19

package/dist/{chunk-OWWJ2PME.mjs → chunk-43FOLRQA.mjs}

@@ -166,11 +166,29 @@ function resolveColorEntry(value, lookup) {
   return typeof base === "string" ? applyOpacityToHex(base, opacity) : { light: applyOpacityToHex(base.light, opacity), dark: applyOpacityToHex(base.dark, opacity) };
 }
 function resolveColors(extend, existing) {
+  const { dark: darkExtend, ...lightExtend } = extend;
   const resolved = {};
   const lookup = (name) => resolved[name] ?? existing[name];
-  for (const [name, value] of Object.entries(extend)) {
+  for (const [name, value] of Object.entries(lightExtend)) {
+    if (typeof value === "object" && value !== null && !("light" in value) && !("dark" in value)) continue;
     resolved[name] = resolveColorEntry(value, lookup);
   }
+  if (darkExtend) {
+    const resolvedDark = {};
+    const lookupDark = (name) => {
+      const found = resolvedDark[name] ?? existing[name];
+      return typeof found === "string" ? found : void 0;
+    };
+    for (const [name, value] of Object.entries(darkExtend)) {
+      const entry = resolveColorEntry(value, lookupDark);
+      resolvedDark[name] = typeof entry === "string" ? entry : entry.dark;
+    }
+    for (const [name, darkValue] of Object.entries(resolvedDark)) {
+      const lightEntry = resolved[name];
+      if (lightEntry === void 0 || typeof lightEntry !== "string") continue;
+      resolved[name] = { light: lightEntry, dark: darkValue };
+    }
+  }
   return resolved;
 }
 function resolveKbachConfig(config) {

package/dist/{chunk-CQKDEA6F.mjs → chunk-MRBB55KV.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveKbachConfig
-} from "./chunk-OWWJ2PME.mjs";
+} from "./chunk-43FOLRQA.mjs";
 import {
   buildResetCSS,
   defaultTheme
@@ -445,10 +445,16 @@ function stripModifierPrefix(token) {
   return token.replace(/^(?:[a-zA-Z0-9_/-]+:)+/, "");
 }
 var MARKER_CLASSES = /* @__PURE__ */ new Set(["group", "peer"]);
+function isMarkerClass(base) {
+  if (MARKER_CLASSES.has(base)) return true;
+  const slashIdx = base.lastIndexOf("/");
+  if (slashIdx === -1) return false;
+  return MARKER_CLASSES.has(base.slice(0, slashIdx)) && slashIdx < base.length - 1;
+}
 function warnIfUnknownClass(token, filePath, code, isResolvable, projectCssClasses, warnedTokens) {
   if (isResolvable || warnedTokens.has(token)) return;
   const base = stripModifierPrefix(token);
-  if (!base || projectCssClasses.has(base) || MARKER_CLASSES.has(base)) return;
+  if (!base || projectCssClasses.has(base) || isMarkerClass(base)) return;
   warnedTokens.add(token);
   const pos = findLineCol(code, token);
   const location = pos ? `${blue(filePath)}${green(`:${pos.line}:${pos.column}`)}` : blue(filePath);

package/dist/{config-B00tH6vN.d.mts → config-N74_lKa0.d.mts}

@@ -87,8 +87,28 @@ interface KbachConfig {
          * already-defined-above) is treated as a literal CSS value instead
          * (`accent: 'red'` — REAL CSS `red`, since there's no color named "red"
          * to alias), never an error either way.
+         *
+         * `dark` is a reserved key, not a color name — a SECOND way to write a
+         * mode-aware color, as a group instead of per-color: `{ surface:
+         * 'gray-2', card: 'white', dark: { surface: 'gray-11', card: 'gray-9' } }`
+         * makes `surface`/`card` mode-aware, while a name never mentioned under
+         * `dark` (like a hypothetical always-the-same `brand` here) stays a
+         * plain, mode-independent color. Equivalent to writing `surface: {
+         * light: 'gray-2', dark: 'gray-11' }` directly — pick whichever reads
+         * better for your config: per-color pairs when only a couple of colors
+         * are mode-aware, the grouped block when most of them are and writing
+         * "light"/"dark" twice per line would be repetitive. A name under
+         * `dark` with no matching top-level (light) entry is skipped — mode-
+         * aware colors need both sides written out. References inside `dark`
+         * resolve against the built-in palette and OTHER entries within `dark`
+         * itself (not the light-side custom colors, and not a light-side color
+         * already written as a `{ light, dark }` pair) — self-contained, the
+         * same way the light side already resolves independently of it.
          */
-        colors?: Record<string, ColorEntry | string>;
+        colors?: {
+            [colorName: string]: ColorEntry | string | Record<string, string> | undefined;
+            dark?: Record<string, string>;
+        };
         spacing?: Record<string, number>;
         screens?: Record<string, number>;
         /** Named font stacks, e.g. `{ display: '"Cal Sans", sans-serif' }` — adds to (or overrides one of) `defaultTheme.fontFamily`'s three names. */

package/dist/{config-B00tH6vN.d.ts → config-N74_lKa0.d.ts}

@@ -87,8 +87,28 @@ interface KbachConfig {
          * already-defined-above) is treated as a literal CSS value instead
          * (`accent: 'red'` — REAL CSS `red`, since there's no color named "red"
          * to alias), never an error either way.
+         *
+         * `dark` is a reserved key, not a color name — a SECOND way to write a
+         * mode-aware color, as a group instead of per-color: `{ surface:
+         * 'gray-2', card: 'white', dark: { surface: 'gray-11', card: 'gray-9' } }`
+         * makes `surface`/`card` mode-aware, while a name never mentioned under
+         * `dark` (like a hypothetical always-the-same `brand` here) stays a
+         * plain, mode-independent color. Equivalent to writing `surface: {
+         * light: 'gray-2', dark: 'gray-11' }` directly — pick whichever reads
+         * better for your config: per-color pairs when only a couple of colors
+         * are mode-aware, the grouped block when most of them are and writing
+         * "light"/"dark" twice per line would be repetitive. A name under
+         * `dark` with no matching top-level (light) entry is skipped — mode-
+         * aware colors need both sides written out. References inside `dark`
+         * resolve against the built-in palette and OTHER entries within `dark`
+         * itself (not the light-side custom colors, and not a light-side color
+         * already written as a `{ light, dark }` pair) — self-contained, the
+         * same way the light side already resolves independently of it.
          */
-        colors?: Record<string, ColorEntry | string>;
+        colors?: {
+            [colorName: string]: ColorEntry | string | Record<string, string> | undefined;
+            dark?: Record<string, string>;
+        };
         spacing?: Record<string, number>;
         screens?: Record<string, number>;
         /** Named font stacks, e.g. `{ display: '"Cal Sans", sans-serif' }` — adds to (or overrides one of) `defaultTheme.fontFamily`'s three names. */

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { C as ColorEntry, a as ContainerConfig, D as DarkModeStrategy, K as KbachConfig, T as ThemeConfig, b as applyKbachConfig, d as defaultTheme, g as getTheme, r as resolveKbachConfig, s as setTheme } from './config-B00tH6vN.mjs';
+export { C as ColorEntry, a as ContainerConfig, D as DarkModeStrategy, K as KbachConfig, T as ThemeConfig, b as applyKbachConfig, d as defaultTheme, g as getTheme, r as resolveKbachConfig, s as setTheme } from './config-N74_lKa0.mjs';
 import * as react from 'react';
 import { ReactNode } from 'react';
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { C as ColorEntry, a as ContainerConfig, D as DarkModeStrategy, K as KbachConfig, T as ThemeConfig, b as applyKbachConfig, d as defaultTheme, g as getTheme, r as resolveKbachConfig, s as setTheme } from './config-B00tH6vN.js';
+export { C as ColorEntry, a as ContainerConfig, D as DarkModeStrategy, K as KbachConfig, T as ThemeConfig, b as applyKbachConfig, d as defaultTheme, g as getTheme, r as resolveKbachConfig, s as setTheme } from './config-N74_lKa0.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
 

package/dist/index.js

@@ -789,11 +789,29 @@ function resolveColorEntry(value, lookup) {
   return typeof base === "string" ? applyOpacityToHex(base, opacity) : { light: applyOpacityToHex(base.light, opacity), dark: applyOpacityToHex(base.dark, opacity) };
 }
 function resolveColors(extend, existing) {
+  const { dark: darkExtend, ...lightExtend } = extend;
   const resolved = {};
   const lookup = (name) => resolved[name] ?? existing[name];
-  for (const [name, value] of Object.entries(extend)) {
+  for (const [name, value] of Object.entries(lightExtend)) {
+    if (typeof value === "object" && value !== null && !("light" in value) && !("dark" in value)) continue;
     resolved[name] = resolveColorEntry(value, lookup);
   }
+  if (darkExtend) {
+    const resolvedDark = {};
+    const lookupDark = (name) => {
+      const found = resolvedDark[name] ?? existing[name];
+      return typeof found === "string" ? found : void 0;
+    };
+    for (const [name, value] of Object.entries(darkExtend)) {
+      const entry = resolveColorEntry(value, lookupDark);
+      resolvedDark[name] = typeof entry === "string" ? entry : entry.dark;
+    }
+    for (const [name, darkValue] of Object.entries(resolvedDark)) {
+      const lightEntry = resolved[name];
+      if (lightEntry === void 0 || typeof lightEntry !== "string") continue;
+      resolved[name] = { light: lightEntry, dark: darkValue };
+    }
+  }
   return resolved;
 }
 function resolveKbachConfig(config) {

package/dist/index.mjs

@@ -16,7 +16,7 @@ import {
   setGlobalThemeMode,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-OWWJ2PME.mjs";
+} from "./chunk-43FOLRQA.mjs";
 import {
   BASE_RESET,
   RESET_STYLE_ID,

package/dist/postcss-plugin.d.mts

@@ -1,5 +1,5 @@
 import { Plugin } from 'postcss';
-import { T as ThemeConfig, K as KbachConfig } from './config-B00tH6vN.mjs';
+import { T as ThemeConfig, K as KbachConfig } from './config-N74_lKa0.mjs';
 
 interface KbachPostcssPluginOptions {
     /**

package/dist/postcss-plugin.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'postcss';
-import { T as ThemeConfig, K as KbachConfig } from './config-B00tH6vN.js';
+import { T as ThemeConfig, K as KbachConfig } from './config-N74_lKa0.js';
 
 interface KbachPostcssPluginOptions {
     /**

package/dist/postcss-plugin.js

@@ -531,10 +531,16 @@ function stripModifierPrefix(token) {
   return token.replace(/^(?:[a-zA-Z0-9_/-]+:)+/, "");
 }
 var MARKER_CLASSES = /* @__PURE__ */ new Set(["group", "peer"]);
+function isMarkerClass(base) {
+  if (MARKER_CLASSES.has(base)) return true;
+  const slashIdx = base.lastIndexOf("/");
+  if (slashIdx === -1) return false;
+  return MARKER_CLASSES.has(base.slice(0, slashIdx)) && slashIdx < base.length - 1;
+}
 function warnIfUnknownClass(token, filePath, code, isResolvable, projectCssClasses, warnedTokens) {
   if (isResolvable || warnedTokens.has(token)) return;
   const base = stripModifierPrefix(token);
-  if (!base || projectCssClasses.has(base) || MARKER_CLASSES.has(base)) return;
+  if (!base || projectCssClasses.has(base) || isMarkerClass(base)) return;
   warnedTokens.add(token);
   const pos = findLineCol(code, token);
   const location = pos ? `${blue(filePath)}${green(`:${pos.line}:${pos.column}`)}` : blue(filePath);
@@ -1092,11 +1098,29 @@ function resolveColorEntry(value, lookup) {
   return typeof base === "string" ? applyOpacityToHex(base, opacity) : { light: applyOpacityToHex(base.light, opacity), dark: applyOpacityToHex(base.dark, opacity) };
 }
 function resolveColors(extend, existing) {
+  const { dark: darkExtend, ...lightExtend } = extend;
   const resolved = {};
   const lookup = (name) => resolved[name] ?? existing[name];
-  for (const [name, value] of Object.entries(extend)) {
+  for (const [name, value] of Object.entries(lightExtend)) {
+    if (typeof value === "object" && value !== null && !("light" in value) && !("dark" in value)) continue;
     resolved[name] = resolveColorEntry(value, lookup);
   }
+  if (darkExtend) {
+    const resolvedDark = {};
+    const lookupDark = (name) => {
+      const found = resolvedDark[name] ?? existing[name];
+      return typeof found === "string" ? found : void 0;
+    };
+    for (const [name, value] of Object.entries(darkExtend)) {
+      const entry = resolveColorEntry(value, lookupDark);
+      resolvedDark[name] = typeof entry === "string" ? entry : entry.dark;
+    }
+    for (const [name, darkValue] of Object.entries(resolvedDark)) {
+      const lightEntry = resolved[name];
+      if (lightEntry === void 0 || typeof lightEntry !== "string") continue;
+      resolved[name] = { light: lightEntry, dark: darkValue };
+    }
+  }
   return resolved;
 }
 function resolveKbachConfig(config) {

package/dist/postcss-plugin.mjs

@@ -6,8 +6,8 @@ import {
   highlight,
   kbachTag,
   resolveEffectiveTheme
-} from "./chunk-CQKDEA6F.mjs";
-import "./chunk-OWWJ2PME.mjs";
+} from "./chunk-MRBB55KV.mjs";
+import "./chunk-43FOLRQA.mjs";
 import "./chunk-OVKVZA7B.mjs";
 
 // src/postcss-plugin/index.ts

package/dist/vite-plugin.d.mts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import { T as ThemeConfig, K as KbachConfig } from './config-B00tH6vN.mjs';
+import { T as ThemeConfig, K as KbachConfig } from './config-N74_lKa0.mjs';
 
 interface KbachPluginOptions {
     /** Defaults to the same defaultTheme the runtime uses — pass your own to keep both in sync. */

package/dist/vite-plugin.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import { T as ThemeConfig, K as KbachConfig } from './config-B00tH6vN.js';
+import { T as ThemeConfig, K as KbachConfig } from './config-N74_lKa0.js';
 
 interface KbachPluginOptions {
     /** Defaults to the same defaultTheme the runtime uses — pass your own to keep both in sync. */

package/dist/vite-plugin.js

@@ -778,11 +778,29 @@ function resolveColorEntry(value, lookup) {
   return typeof base === "string" ? applyOpacityToHex(base, opacity) : { light: applyOpacityToHex(base.light, opacity), dark: applyOpacityToHex(base.dark, opacity) };
 }
 function resolveColors(extend, existing) {
+  const { dark: darkExtend, ...lightExtend } = extend;
   const resolved = {};
   const lookup = (name) => resolved[name] ?? existing[name];
-  for (const [name, value] of Object.entries(extend)) {
+  for (const [name, value] of Object.entries(lightExtend)) {
+    if (typeof value === "object" && value !== null && !("light" in value) && !("dark" in value)) continue;
     resolved[name] = resolveColorEntry(value, lookup);
   }
+  if (darkExtend) {
+    const resolvedDark = {};
+    const lookupDark = (name) => {
+      const found = resolvedDark[name] ?? existing[name];
+      return typeof found === "string" ? found : void 0;
+    };
+    for (const [name, value] of Object.entries(darkExtend)) {
+      const entry = resolveColorEntry(value, lookupDark);
+      resolvedDark[name] = typeof entry === "string" ? entry : entry.dark;
+    }
+    for (const [name, darkValue] of Object.entries(resolvedDark)) {
+      const lightEntry = resolved[name];
+      if (lightEntry === void 0 || typeof lightEntry !== "string") continue;
+      resolved[name] = { light: lightEntry, dark: darkValue };
+    }
+  }
   return resolved;
 }
 function resolveKbachConfig(config) {
@@ -1047,10 +1065,16 @@ function stripModifierPrefix(token) {
   return token.replace(/^(?:[a-zA-Z0-9_/-]+:)+/, "");
 }
 var MARKER_CLASSES = /* @__PURE__ */ new Set(["group", "peer"]);
+function isMarkerClass(base) {
+  if (MARKER_CLASSES.has(base)) return true;
+  const slashIdx = base.lastIndexOf("/");
+  if (slashIdx === -1) return false;
+  return MARKER_CLASSES.has(base.slice(0, slashIdx)) && slashIdx < base.length - 1;
+}
 function warnIfUnknownClass(token, filePath, code, isResolvable, projectCssClasses, warnedTokens) {
   if (isResolvable || warnedTokens.has(token)) return;
   const base = stripModifierPrefix(token);
-  if (!base || projectCssClasses.has(base) || MARKER_CLASSES.has(base)) return;
+  if (!base || projectCssClasses.has(base) || isMarkerClass(base)) return;
   warnedTokens.add(token);
   const pos = findLineCol(code, token);
   const location = pos ? `${blue(filePath)}${green(`:${pos.line}:${pos.column}`)}` : blue(filePath);

package/dist/vite-plugin.mjs

@@ -5,8 +5,8 @@ import {
   kbach,
   loadConfigFile,
   resolveEffectiveTheme
-} from "./chunk-CQKDEA6F.mjs";
-import "./chunk-OWWJ2PME.mjs";
+} from "./chunk-MRBB55KV.mjs";
+import "./chunk-43FOLRQA.mjs";
 import "./chunk-OVKVZA7B.mjs";
 export {
   CSS_SYNC_DEBOUNCE_MS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.19",
   "description": "A utility-first styling engine for React, powered by a real Rust/WASM core — Tailwind CSS v4 feature parity with Kbach's own color palette.",
   "keywords": [
     "css",
@@ -72,7 +72,7 @@
     "generate:colors": "node ../core-engine/scripts/generate-palette.mjs src/generatedPalette.ts"
   },
   "dependencies": {
-    "@kbach/core-engine": "1.0.0-beta.10"
+    "@kbach/core-engine": "1.0.0-beta.11"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",