@kbach/react 0.6.16 → 0.6.17

package/dist/vite-plugin.js

@@ -3152,26 +3152,37 @@ function buildColorVarMap(theme, usedCSS) {
   const hexRe = /#[0-9a-fA-F]{3,8}\b/g;
   let hm;
   while ((hm = hexRe.exec(usedCSS)) !== null) usedHexValues.add(hm[0].toLowerCase());
-  const map = /* @__PURE__ */ new Map();
+  const replacements = /* @__PURE__ */ new Map();
+  const declarations = /* @__PURE__ */ new Map();
   for (const [name, shades] of Object.entries(theme.colors ?? {})) {
     const entries = typeof shades === "string" ? [[name, shades]] : Object.entries(shades).map(([s, v]) => [`${name}-${s}`, v]);
     for (const [fullName, val] of entries) {
-      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val)) {
-        if (usedHexValues.has(val.toLowerCase())) {
-          map.set(val, `--color-${fullName}`);
-        }
+      if (typeof val !== "string" || !/^#[0-9a-fA-F]{3,8}$/.test(val)) continue;
+      if (usedHexValues.has(val.toLowerCase())) {
+        const varName = `--color-${fullName}`;
+        replacements.set(val, `var(${varName})`);
+        declarations.set(varName, val);
+      }
+      const rgb = parseHexRgb(val);
+      if (!rgb) continue;
+      const triplet = `${rgb[0]},${rgb[1]},${rgb[2]}`;
+      const rgbaPrefix = `rgba(${triplet},`;
+      if (usedCSS.includes(rgbaPrefix)) {
+        const rgbVarName = `--color-${fullName}-rgb`;
+        replacements.set(rgbaPrefix, `rgba(var(${rgbVarName}),`);
+        declarations.set(rgbVarName, triplet);
       }
     }
   }
-  return map;
+  return { replacements, declarations };
 }
 function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
-  const colorVars = buildColorVarMap(theme, allRaw);
-  const sortedColorVars = [...colorVars].sort(([a], [b]) => b.length - a.length);
+  const { replacements, declarations } = buildColorVarMap(theme, allRaw);
+  const sortedReplacements = [...replacements].sort(([a], [b]) => b.length - a.length);
   function applyVars(css) {
-    for (const [val, varName] of sortedColorVars)
-      css = css.split(val).join(`var(${varName})`);
+    for (const [pattern, replacement] of sortedReplacements)
+      css = css.split(pattern).join(replacement);
     return css;
   }
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
@@ -3182,9 +3193,9 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
     groups.get(label).push(applyVars(css));
   }
   const out = ["/* Generated by Kbach \u2014 do not edit */"];
-  if (colorVars.size > 0) {
+  if (declarations.size > 0) {
     out.push("\n:root {");
-    for (const [val, varName] of colorVars) out.push(`  ${varName}: ${val};`);
+    for (const [varName, val] of declarations) out.push(`  ${varName}: ${val};`);
     out.push("}");
   }
   const globalCSS = buildThemeGlobal(theme);

package/dist/vite-plugin.mjs

@@ -3118,26 +3118,37 @@ function buildColorVarMap(theme, usedCSS) {
   const hexRe = /#[0-9a-fA-F]{3,8}\b/g;
   let hm;
   while ((hm = hexRe.exec(usedCSS)) !== null) usedHexValues.add(hm[0].toLowerCase());
-  const map = /* @__PURE__ */ new Map();
+  const replacements = /* @__PURE__ */ new Map();
+  const declarations = /* @__PURE__ */ new Map();
   for (const [name, shades] of Object.entries(theme.colors ?? {})) {
     const entries = typeof shades === "string" ? [[name, shades]] : Object.entries(shades).map(([s, v]) => [`${name}-${s}`, v]);
     for (const [fullName, val] of entries) {
-      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val)) {
-        if (usedHexValues.has(val.toLowerCase())) {
-          map.set(val, `--color-${fullName}`);
-        }
+      if (typeof val !== "string" || !/^#[0-9a-fA-F]{3,8}$/.test(val)) continue;
+      if (usedHexValues.has(val.toLowerCase())) {
+        const varName = `--color-${fullName}`;
+        replacements.set(val, `var(${varName})`);
+        declarations.set(varName, val);
+      }
+      const rgb = parseHexRgb(val);
+      if (!rgb) continue;
+      const triplet = `${rgb[0]},${rgb[1]},${rgb[2]}`;
+      const rgbaPrefix = `rgba(${triplet},`;
+      if (usedCSS.includes(rgbaPrefix)) {
+        const rgbVarName = `--color-${fullName}-rgb`;
+        replacements.set(rgbaPrefix, `rgba(var(${rgbVarName}),`);
+        declarations.set(rgbVarName, triplet);
       }
     }
   }
-  return map;
+  return { replacements, declarations };
 }
 function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
-  const colorVars = buildColorVarMap(theme, allRaw);
-  const sortedColorVars = [...colorVars].sort(([a], [b]) => b.length - a.length);
+  const { replacements, declarations } = buildColorVarMap(theme, allRaw);
+  const sortedReplacements = [...replacements].sort(([a], [b]) => b.length - a.length);
   function applyVars(css) {
-    for (const [val, varName] of sortedColorVars)
-      css = css.split(val).join(`var(${varName})`);
+    for (const [pattern, replacement] of sortedReplacements)
+      css = css.split(pattern).join(replacement);
     return css;
   }
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
@@ -3148,9 +3159,9 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
     groups.get(label).push(applyVars(css));
   }
   const out = ["/* Generated by Kbach \u2014 do not edit */"];
-  if (colorVars.size > 0) {
+  if (declarations.size > 0) {
     out.push("\n:root {");
-    for (const [val, varName] of colorVars) out.push(`  ${varName}: ${val};`);
+    for (const [varName, val] of declarations) out.push(`  ${varName}: ${val};`);
     out.push("}");
   }
   const globalCSS = buildThemeGlobal(theme);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.16",
+  "version": "0.6.17",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",