@symbo.ls/scratch 3.8.1 → 3.8.7

package/dist/cjs/set.js

@@ -101,14 +101,37 @@ const setEach = (factoryName, props) => {
 const changeGlobalTheme = (newTheme) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   CONFIG.globalTheme = newTheme;
+  if (typeof document !== "undefined" && newTheme && newTheme !== "auto") {
+    document.documentElement.setAttribute("data-theme", newTheme);
+  }
   for (const key in CONFIG.CSS_VARS) {
     if (key.startsWith("--theme-")) delete CONFIG.CSS_VARS[key];
   }
   for (const key in CONFIG.CSS_MEDIA_VARS) {
     delete CONFIG.CSS_MEDIA_VARS[key];
   }
-  if (CONFIG.theme) {
-    setEach("theme", CONFIG.theme);
+  const source = CONFIG._originalTheme || CONFIG.theme;
+  if (source) {
+    const fresh = JSON.parse(JSON.stringify(source));
+    CONFIG.theme = fresh;
+    setEach("theme", fresh);
+  }
+  if (typeof document !== "undefined" && CONFIG.CSS_VARS) {
+    const sheets = document.styleSheets;
+    for (let i = 0; i < sheets.length; i++) {
+      try {
+        const rules = sheets[i].cssRules;
+        for (let j = 0; j < rules.length; j++) {
+          if (rules[j].selectorText === ":root") {
+            for (const key in CONFIG.CSS_VARS) {
+              rules[j].style.setProperty(key, CONFIG.CSS_VARS[key]);
+            }
+            return CONFIG;
+          }
+        }
+      } catch (e) {
+      }
+    }
   }
   return CONFIG;
 };
@@ -155,6 +178,9 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons;
   }
   if (CONFIG.verbose) console.log(CONFIG);
+  if (typeof document !== "undefined" && CONFIG.globalTheme && CONFIG.globalTheme !== "auto") {
+    document.documentElement.setAttribute("data-theme", CONFIG.globalTheme);
+  }
   if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {};
   const keys = Object.keys(config);
   const keySet = new Set(keys);
@@ -164,6 +190,9 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
       (0, import_utils.deepMerge)(config[lower], config[key]);
     }
   });
+  if (config.theme && !CONFIG._originalTheme) {
+    CONFIG._originalTheme = JSON.parse(JSON.stringify(config.theme));
+  }
   keys.map((key) => {
     const lower = key.toLowerCase();
     if (lower !== key && keySet.has(lower)) return;

package/dist/cjs/system/theme.js

@@ -28,6 +28,163 @@ var import_color = require("./color");
 var import_factory = require("../factory.js");
 var import_color2 = require("../utils/color.js");
 var import_utils = require("@domql/utils");
+const CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
+  "black",
+  "white",
+  "red",
+  "green",
+  "blue",
+  "yellow",
+  "orange",
+  "purple",
+  "pink",
+  "brown",
+  "gray",
+  "grey",
+  "cyan",
+  "magenta",
+  "lime",
+  "olive",
+  "navy",
+  "teal",
+  "aqua",
+  "maroon",
+  "silver",
+  "fuchsia",
+  "transparent",
+  "currentColor",
+  "currentcolor",
+  "inherit",
+  "initial",
+  "unset",
+  "none",
+  "aliceblue",
+  "antiquewhite",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "blanchedalmond",
+  "blueviolet",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "greenyellow",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "limegreen",
+  "linen",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "oldlace",
+  "olivedrab",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "plum",
+  "powderblue",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "slategrey",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "thistle",
+  "tomato",
+  "turquoise",
+  "violet",
+  "wheat",
+  "whitesmoke",
+  "yellowgreen",
+  "rebeccapurple"
+]);
 const setThemeValue = (theme) => {
   const value = {};
   const { state, media, helpers, ...rest } = theme;
@@ -151,6 +308,23 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
   for (const scheme in schemes) {
     if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
   }
+  const brokenSchemes = /* @__PURE__ */ new Set();
+  if (globalTheme === "auto") {
+    for (const param of allKeys) {
+      const symb = param.slice(0, 1);
+      if (symb === "@" || symb === "." || symb === ":") continue;
+      for (const scheme in schemes) {
+        if (brokenSchemes.has(scheme)) continue;
+        const val = schemes[scheme]?.[param];
+        if (val === void 0) continue;
+        const color = (0, import_color.getColor)(val, `@${scheme}`);
+        if (color === void 0) continue;
+        if ((0, import_utils.isString)(color) && /^[a-z][a-zA-Z]+$/.test(color) && !CSS_NAMED_COLORS.has(color)) {
+          brokenSchemes.add(scheme);
+        }
+      }
+    }
+  }
   for (const param of allKeys) {
     const symb = param.slice(0, 1);
     const hasObject = Object.values(schemes).some((s) => (0, import_utils.isObjectLike)(s?.[param]));
@@ -171,11 +345,16 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
     } else if (symb !== "@" && symb !== "." && symb !== ":") {
       const autoVar = `--theme-${varPrefix}-${param}`;
       if (globalTheme === "auto") {
+        let fallbackColor;
         for (const scheme in schemes) {
+          if (brokenSchemes.has(scheme)) continue;
           const val = schemes[scheme]?.[param];
           if (val === void 0) continue;
           const color = (0, import_color.getColor)(val, `@${scheme}`);
           if (color === void 0) continue;
+          if (scheme === "light" || fallbackColor === void 0) {
+            fallbackColor = color;
+          }
           const selector = `[data-theme="${scheme}"]`;
           if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
           MEDIA_VARS[selector][autoVar] = color;
@@ -185,6 +364,9 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
             MEDIA_VARS[mq][autoVar] = color;
           }
         }
+        if (fallbackColor !== void 0) {
+          CSS_VARS[autoVar] = fallbackColor;
+        }
       } else {
         const forced = String(globalTheme).replace(/^'|'$/g, "");
         const source = schemes[forced]?.[param];

package/dist/esm/set.js

@@ -88,14 +88,37 @@ const setEach = (factoryName, props) => {
 const changeGlobalTheme = (newTheme) => {
   const CONFIG = getActiveConfig();
   CONFIG.globalTheme = newTheme;
+  if (typeof document !== "undefined" && newTheme && newTheme !== "auto") {
+    document.documentElement.setAttribute("data-theme", newTheme);
+  }
   for (const key in CONFIG.CSS_VARS) {
     if (key.startsWith("--theme-")) delete CONFIG.CSS_VARS[key];
   }
   for (const key in CONFIG.CSS_MEDIA_VARS) {
     delete CONFIG.CSS_MEDIA_VARS[key];
   }
-  if (CONFIG.theme) {
-    setEach("theme", CONFIG.theme);
+  const source = CONFIG._originalTheme || CONFIG.theme;
+  if (source) {
+    const fresh = JSON.parse(JSON.stringify(source));
+    CONFIG.theme = fresh;
+    setEach("theme", fresh);
+  }
+  if (typeof document !== "undefined" && CONFIG.CSS_VARS) {
+    const sheets = document.styleSheets;
+    for (let i = 0; i < sheets.length; i++) {
+      try {
+        const rules = sheets[i].cssRules;
+        for (let j = 0; j < rules.length; j++) {
+          if (rules[j].selectorText === ":root") {
+            for (const key in CONFIG.CSS_VARS) {
+              rules[j].style.setProperty(key, CONFIG.CSS_VARS[key]);
+            }
+            return CONFIG;
+          }
+        }
+      } catch (e) {
+      }
+    }
   }
   return CONFIG;
 };
@@ -142,6 +165,9 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons;
   }
   if (CONFIG.verbose) console.log(CONFIG);
+  if (typeof document !== "undefined" && CONFIG.globalTheme && CONFIG.globalTheme !== "auto") {
+    document.documentElement.setAttribute("data-theme", CONFIG.globalTheme);
+  }
   if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {};
   const keys = Object.keys(config);
   const keySet = new Set(keys);
@@ -151,6 +177,9 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
       deepMerge(config[lower], config[key]);
     }
   });
+  if (config.theme && !CONFIG._originalTheme) {
+    CONFIG._originalTheme = JSON.parse(JSON.stringify(config.theme));
+  }
   keys.map((key) => {
     const lower = key.toLowerCase();
     if (lower !== key && keySet.has(lower)) return;

package/dist/esm/system/theme.js

@@ -7,6 +7,163 @@ import {
   isObjectLike,
   isArray
 } from "@domql/utils";
+const CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
+  "black",
+  "white",
+  "red",
+  "green",
+  "blue",
+  "yellow",
+  "orange",
+  "purple",
+  "pink",
+  "brown",
+  "gray",
+  "grey",
+  "cyan",
+  "magenta",
+  "lime",
+  "olive",
+  "navy",
+  "teal",
+  "aqua",
+  "maroon",
+  "silver",
+  "fuchsia",
+  "transparent",
+  "currentColor",
+  "currentcolor",
+  "inherit",
+  "initial",
+  "unset",
+  "none",
+  "aliceblue",
+  "antiquewhite",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "blanchedalmond",
+  "blueviolet",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "greenyellow",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "limegreen",
+  "linen",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "oldlace",
+  "olivedrab",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "plum",
+  "powderblue",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "slategrey",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "thistle",
+  "tomato",
+  "turquoise",
+  "violet",
+  "wheat",
+  "whitesmoke",
+  "yellowgreen",
+  "rebeccapurple"
+]);
 const setThemeValue = (theme) => {
   const value = {};
   const { state, media, helpers, ...rest } = theme;
@@ -130,6 +287,23 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
   for (const scheme in schemes) {
     if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
   }
+  const brokenSchemes = /* @__PURE__ */ new Set();
+  if (globalTheme === "auto") {
+    for (const param of allKeys) {
+      const symb = param.slice(0, 1);
+      if (symb === "@" || symb === "." || symb === ":") continue;
+      for (const scheme in schemes) {
+        if (brokenSchemes.has(scheme)) continue;
+        const val = schemes[scheme]?.[param];
+        if (val === void 0) continue;
+        const color = getColor(val, `@${scheme}`);
+        if (color === void 0) continue;
+        if (isString(color) && /^[a-z][a-zA-Z]+$/.test(color) && !CSS_NAMED_COLORS.has(color)) {
+          brokenSchemes.add(scheme);
+        }
+      }
+    }
+  }
   for (const param of allKeys) {
     const symb = param.slice(0, 1);
     const hasObject = Object.values(schemes).some((s) => isObjectLike(s?.[param]));
@@ -150,11 +324,16 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
     } else if (symb !== "@" && symb !== "." && symb !== ":") {
       const autoVar = `--theme-${varPrefix}-${param}`;
       if (globalTheme === "auto") {
+        let fallbackColor;
         for (const scheme in schemes) {
+          if (brokenSchemes.has(scheme)) continue;
           const val = schemes[scheme]?.[param];
           if (val === void 0) continue;
           const color = getColor(val, `@${scheme}`);
           if (color === void 0) continue;
+          if (scheme === "light" || fallbackColor === void 0) {
+            fallbackColor = color;
+          }
           const selector = `[data-theme="${scheme}"]`;
           if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
           MEDIA_VARS[selector][autoVar] = color;
@@ -164,6 +343,9 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
             MEDIA_VARS[mq][autoVar] = color;
           }
         }
+        if (fallbackColor !== void 0) {
+          CSS_VARS[autoVar] = fallbackColor;
+        }
       } else {
         const forced = String(globalTheme).replace(/^'|'$/g, "");
         const source = schemes[forced]?.[param];

package/dist/iife/index.js

@@ -182,6 +182,7 @@ var SmblsScratch = (() => {
       exec = (param, element, state, context) => {
         if (isFunction(param)) {
           if (!element) return;
+          if (typeof param.call !== "function") return param;
           const result = param.call(
             element,
             element,
@@ -197,6 +198,17 @@ var SmblsScratch = (() => {
           }
           return result;
         }
+        if (param != null && element?.context?.plugins && (isArray(param) || isObject(param) && !isDOMNode(param))) {
+          const plugins = element.context.plugins;
+          for (const plugin of plugins) {
+            if (plugin.resolveHandler) {
+              const resolved = plugin.resolveHandler(param, element);
+              if (typeof resolved === "function") {
+                return exec(resolved, element, state, context);
+              }
+            }
+          }
+        }
         return param;
       };
       merge = (element, obj, excludeFrom = []) => {
@@ -964,9 +976,10 @@ var SmblsScratch = (() => {
   // ../smbls-utils/dist/esm/index.js
   init_esm();
   var toCamelCase = (str) => {
+    if (typeof str !== "string") str = String(str || "");
     return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
       return index === 0 ? word.toLowerCase() : word.toUpperCase();
-    }).replaceAll(/\s+/g, "");
+    }).replace(/\s+/g, "");
   };
   var toDashCase = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
   var arrayzeValue = (val) => {
@@ -1867,6 +1880,163 @@ var SmblsScratch = (() => {
 
   // src/system/theme.js
   init_esm();
+  var CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
+    "black",
+    "white",
+    "red",
+    "green",
+    "blue",
+    "yellow",
+    "orange",
+    "purple",
+    "pink",
+    "brown",
+    "gray",
+    "grey",
+    "cyan",
+    "magenta",
+    "lime",
+    "olive",
+    "navy",
+    "teal",
+    "aqua",
+    "maroon",
+    "silver",
+    "fuchsia",
+    "transparent",
+    "currentColor",
+    "currentcolor",
+    "inherit",
+    "initial",
+    "unset",
+    "none",
+    "aliceblue",
+    "antiquewhite",
+    "aquamarine",
+    "azure",
+    "beige",
+    "bisque",
+    "blanchedalmond",
+    "blueviolet",
+    "burlywood",
+    "cadetblue",
+    "chartreuse",
+    "chocolate",
+    "coral",
+    "cornflowerblue",
+    "cornsilk",
+    "crimson",
+    "darkblue",
+    "darkcyan",
+    "darkgoldenrod",
+    "darkgray",
+    "darkgreen",
+    "darkgrey",
+    "darkkhaki",
+    "darkmagenta",
+    "darkolivegreen",
+    "darkorange",
+    "darkorchid",
+    "darkred",
+    "darksalmon",
+    "darkseagreen",
+    "darkslateblue",
+    "darkslategray",
+    "darkslategrey",
+    "darkturquoise",
+    "darkviolet",
+    "deeppink",
+    "deepskyblue",
+    "dimgray",
+    "dimgrey",
+    "dodgerblue",
+    "firebrick",
+    "floralwhite",
+    "forestgreen",
+    "gainsboro",
+    "ghostwhite",
+    "gold",
+    "goldenrod",
+    "greenyellow",
+    "honeydew",
+    "hotpink",
+    "indianred",
+    "indigo",
+    "ivory",
+    "khaki",
+    "lavender",
+    "lavenderblush",
+    "lawngreen",
+    "lemonchiffon",
+    "lightblue",
+    "lightcoral",
+    "lightcyan",
+    "lightgoldenrodyellow",
+    "lightgray",
+    "lightgreen",
+    "lightgrey",
+    "lightpink",
+    "lightsalmon",
+    "lightseagreen",
+    "lightskyblue",
+    "lightslategray",
+    "lightslategrey",
+    "lightsteelblue",
+    "lightyellow",
+    "limegreen",
+    "linen",
+    "mediumaquamarine",
+    "mediumblue",
+    "mediumorchid",
+    "mediumpurple",
+    "mediumseagreen",
+    "mediumslateblue",
+    "mediumspringgreen",
+    "mediumturquoise",
+    "mediumvioletred",
+    "midnightblue",
+    "mintcream",
+    "mistyrose",
+    "moccasin",
+    "navajowhite",
+    "oldlace",
+    "olivedrab",
+    "orangered",
+    "orchid",
+    "palegoldenrod",
+    "palegreen",
+    "paleturquoise",
+    "palevioletred",
+    "papayawhip",
+    "peachpuff",
+    "peru",
+    "plum",
+    "powderblue",
+    "rosybrown",
+    "royalblue",
+    "saddlebrown",
+    "salmon",
+    "sandybrown",
+    "seagreen",
+    "seashell",
+    "sienna",
+    "skyblue",
+    "slateblue",
+    "slategray",
+    "slategrey",
+    "snow",
+    "springgreen",
+    "steelblue",
+    "tan",
+    "thistle",
+    "tomato",
+    "turquoise",
+    "violet",
+    "wheat",
+    "whitesmoke",
+    "yellowgreen",
+    "rebeccapurple"
+  ]);
   var setThemeValue = (theme2) => {
     const value = {};
     const { state, media: media2, helpers, ...rest } = theme2;
@@ -1984,6 +2154,23 @@ var SmblsScratch = (() => {
     for (const scheme in schemes) {
       if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
     }
+    const brokenSchemes = /* @__PURE__ */ new Set();
+    if (globalTheme === "auto") {
+      for (const param of allKeys) {
+        const symb = param.slice(0, 1);
+        if (symb === "@" || symb === "." || symb === ":") continue;
+        for (const scheme in schemes) {
+          if (brokenSchemes.has(scheme)) continue;
+          const val = schemes[scheme]?.[param];
+          if (val === void 0) continue;
+          const color2 = getColor(val, `@${scheme}`);
+          if (color2 === void 0) continue;
+          if (isString(color2) && /^[a-z][a-zA-Z]+$/.test(color2) && !CSS_NAMED_COLORS.has(color2)) {
+            brokenSchemes.add(scheme);
+          }
+        }
+      }
+    }
     for (const param of allKeys) {
       const symb = param.slice(0, 1);
       const hasObject = Object.values(schemes).some((s) => isObjectLike(s?.[param]));
@@ -2004,11 +2191,16 @@ var SmblsScratch = (() => {
       } else if (symb !== "@" && symb !== "." && symb !== ":") {
         const autoVar = `--theme-${varPrefix}-${param}`;
         if (globalTheme === "auto") {
+          let fallbackColor;
           for (const scheme in schemes) {
+            if (brokenSchemes.has(scheme)) continue;
             const val = schemes[scheme]?.[param];
             if (val === void 0) continue;
             const color2 = getColor(val, `@${scheme}`);
             if (color2 === void 0) continue;
+            if (scheme === "light" || fallbackColor === void 0) {
+              fallbackColor = color2;
+            }
             const selector = `[data-theme="${scheme}"]`;
             if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
             MEDIA_VARS[selector][autoVar] = color2;
@@ -2018,6 +2210,9 @@ var SmblsScratch = (() => {
               MEDIA_VARS[mq][autoVar] = color2;
             }
           }
+          if (fallbackColor !== void 0) {
+            CSS_VARS2[autoVar] = fallbackColor;
+          }
         } else {
           const forced = String(globalTheme).replace(/^'|'$/g, "");
           const source = schemes[forced]?.[param];
@@ -2873,14 +3068,37 @@ var SmblsScratch = (() => {
   var changeGlobalTheme = (newTheme) => {
     const CONFIG2 = getActiveConfig();
     CONFIG2.globalTheme = newTheme;
+    if (typeof document !== "undefined" && newTheme && newTheme !== "auto") {
+      document.documentElement.setAttribute("data-theme", newTheme);
+    }
     for (const key in CONFIG2.CSS_VARS) {
       if (key.startsWith("--theme-")) delete CONFIG2.CSS_VARS[key];
     }
     for (const key in CONFIG2.CSS_MEDIA_VARS) {
       delete CONFIG2.CSS_MEDIA_VARS[key];
     }
-    if (CONFIG2.theme) {
-      setEach("theme", CONFIG2.theme);
+    const source = CONFIG2._originalTheme || CONFIG2.theme;
+    if (source) {
+      const fresh = JSON.parse(JSON.stringify(source));
+      CONFIG2.theme = fresh;
+      setEach("theme", fresh);
+    }
+    if (typeof document !== "undefined" && CONFIG2.CSS_VARS) {
+      const sheets = document.styleSheets;
+      for (let i = 0; i < sheets.length; i++) {
+        try {
+          const rules = sheets[i].cssRules;
+          for (let j = 0; j < rules.length; j++) {
+            if (rules[j].selectorText === ":root") {
+              for (const key in CONFIG2.CSS_VARS) {
+                rules[j].style.setProperty(key, CONFIG2.CSS_VARS[key]);
+              }
+              return CONFIG2;
+            }
+          }
+        } catch (e) {
+        }
+      }
     }
     return CONFIG2;
   };
@@ -2927,6 +3145,9 @@ var SmblsScratch = (() => {
       CONFIG2.SEMANTIC_ICONS = CONFIG2.semantic_icons;
     }
     if (CONFIG2.verbose) console.log(CONFIG2);
+    if (typeof document !== "undefined" && CONFIG2.globalTheme && CONFIG2.globalTheme !== "auto") {
+      document.documentElement.setAttribute("data-theme", CONFIG2.globalTheme);
+    }
     if (!CONFIG2.__svg_cache) CONFIG2.__svg_cache = {};
     const keys = Object.keys(config);
     const keySet = new Set(keys);
@@ -2936,6 +3157,9 @@ var SmblsScratch = (() => {
         deepMerge(config[lower], config[key]);
       }
     });
+    if (config.theme && !CONFIG2._originalTheme) {
+      CONFIG2._originalTheme = JSON.parse(JSON.stringify(config.theme));
+    }
     keys.map((key) => {
       const lower = key.toLowerCase();
       if (lower !== key && keySet.has(lower)) return;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "3.8.1",
+  "version": "3.8.7",
   "files": [
     "dist",
     "*.js",
@@ -33,8 +33,8 @@
     "prepublish": "npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^3.8.1",
-    "@symbo.ls/smbls-utils": "^3.8.1",
+    "@domql/utils": "^3.8.7",
+    "@symbo.ls/smbls-utils": "^3.8.7",
     "color-contrast-checker": "^1.5.0"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",

package/src/set.js

@@ -109,6 +109,11 @@ export const changeGlobalTheme = (newTheme) => {
   const CONFIG = getActiveConfig()
   CONFIG.globalTheme = newTheme
 
+  // Set data-theme attribute on document element for CSS selector-based theming
+  if (typeof document !== 'undefined' && newTheme && newTheme !== 'auto') {
+    document.documentElement.setAttribute('data-theme', newTheme)
+  }
+
   // Clear theme-related CSS vars
   for (const key in CONFIG.CSS_VARS) {
     if (key.startsWith('--theme-')) delete CONFIG.CSS_VARS[key]
@@ -119,9 +124,31 @@ export const changeGlobalTheme = (newTheme) => {
     delete CONFIG.CSS_MEDIA_VARS[key]
   }
 
-  // Re-process all themes with the new globalTheme
-  if (CONFIG.theme) {
-    setEach('theme', CONFIG.theme)
+  // Re-process themes from original definitions (not mutated processed ones)
+  const source = CONFIG._originalTheme || CONFIG.theme
+  if (source) {
+    // Deep clone to avoid re-mutating the originals
+    const fresh = JSON.parse(JSON.stringify(source))
+    CONFIG.theme = fresh
+    setEach('theme', fresh)
+  }
+
+  // Apply updated CSS vars to the existing :root stylesheet rule
+  if (typeof document !== 'undefined' && CONFIG.CSS_VARS) {
+    const sheets = document.styleSheets
+    for (let i = 0; i < sheets.length; i++) {
+      try {
+        const rules = sheets[i].cssRules
+        for (let j = 0; j < rules.length; j++) {
+          if (rules[j].selectorText === ':root') {
+            for (const key in CONFIG.CSS_VARS) {
+              rules[j].style.setProperty(key, CONFIG.CSS_VARS[key])
+            }
+            return CONFIG
+          }
+        }
+      } catch (e) { /* cross-origin stylesheet */ }
+    }
   }
 
   return CONFIG
@@ -174,6 +201,11 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   }
   if (CONFIG.verbose) console.log(CONFIG)
 
+  // Set data-theme attribute on document for CSS selector-based theming
+  if (typeof document !== 'undefined' && CONFIG.globalTheme && CONFIG.globalTheme !== 'auto') {
+    document.documentElement.setAttribute('data-theme', CONFIG.globalTheme)
+  }
+
   if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {}
 
   const keys = Object.keys(config)
@@ -187,6 +219,11 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     }
   })
 
+  // Store original theme definitions before processing mutates them
+  if (config.theme && !CONFIG._originalTheme) {
+    CONFIG._originalTheme = JSON.parse(JSON.stringify(config.theme))
+  }
+
   // Process only lowercase keys (skip UPPERCASE when lowercase equivalent exists)
   keys.map((key) => {
     const lower = key.toLowerCase()

package/src/system/theme.js

@@ -11,6 +11,38 @@ import {
   isArray
 } from '@domql/utils'
 
+// Common CSS named colors — used to distinguish valid CSS color names
+// from unresolved design-system tokens (e.g. 'blackRussian', 'grayMid')
+const CSS_NAMED_COLORS = new Set([
+  'black', 'white', 'red', 'green', 'blue', 'yellow', 'orange', 'purple',
+  'pink', 'brown', 'gray', 'grey', 'cyan', 'magenta', 'lime', 'olive',
+  'navy', 'teal', 'aqua', 'maroon', 'silver', 'fuchsia', 'transparent',
+  'currentColor', 'currentcolor', 'inherit', 'initial', 'unset', 'none',
+  'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque',
+  'blanchedalmond', 'blueviolet', 'burlywood', 'cadetblue', 'chartreuse',
+  'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'darkblue',
+  'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki',
+  'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred',
+  'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey',
+  'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey',
+  'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite',
+  'gold', 'goldenrod', 'greenyellow', 'honeydew', 'hotpink', 'indianred', 'indigo',
+  'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon',
+  'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray',
+  'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen',
+  'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow',
+  'limegreen', 'linen', 'mediumaquamarine', 'mediumblue', 'mediumorchid',
+  'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen',
+  'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose',
+  'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid',
+  'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip',
+  'peachpuff', 'peru', 'plum', 'powderblue', 'rosybrown', 'royalblue',
+  'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna',
+  'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen',
+  'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat',
+  'whitesmoke', 'yellowgreen', 'rebeccapurple'
+])
+
 const setThemeValue = theme => {
   const value = {}
   const { state, media, helpers, ...rest } = theme
@@ -166,6 +198,27 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
     if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k)
   }
 
+  // Pre-scan: detect schemes with unresolvable color values
+  // If any color in a scheme fails to resolve, skip the ENTIRE scheme
+  // to avoid partial theme application (e.g. white text without dark background)
+  const brokenSchemes = new Set()
+  if (globalTheme === 'auto') {
+    for (const param of allKeys) {
+      const symb = param.slice(0, 1)
+      if (symb === '@' || symb === '.' || symb === ':') continue
+      for (const scheme in schemes) {
+        if (brokenSchemes.has(scheme)) continue
+        const val = schemes[scheme]?.[param]
+        if (val === undefined) continue
+        const color = getColor(val, `@${scheme}`)
+        if (color === undefined) continue
+        if (isString(color) && /^[a-z][a-zA-Z]+$/.test(color) && !CSS_NAMED_COLORS.has(color)) {
+          brokenSchemes.add(scheme)
+        }
+      }
+    }
+  }
+
   for (const param of allKeys) {
     const symb = param.slice(0, 1)
 
@@ -193,12 +246,19 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
       const autoVar = `--theme-${varPrefix}-${param}`
 
       if (globalTheme === 'auto') {
+        let fallbackColor
         for (const scheme in schemes) {
+          if (brokenSchemes.has(scheme)) continue
           const val = schemes[scheme]?.[param]
           if (val === undefined) continue
           const color = getColor(val, `@${scheme}`)
           if (color === undefined) continue
 
+          // Use 'light' scheme (or first resolved) as base fallback
+          if (scheme === 'light' || fallbackColor === undefined) {
+            fallbackColor = color
+          }
+
           // [data-theme] selector for ALL schemes (custom + standard)
           const selector = `[data-theme="${scheme}"]`
           if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {}
@@ -211,6 +271,12 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
             MEDIA_VARS[mq][autoVar] = color
           }
         }
+
+        // Set fallback default (light or first scheme) so the variable
+        // always resolves even without a matching media query
+        if (fallbackColor !== undefined) {
+          CSS_VARS[autoVar] = fallbackColor
+        }
       } else {
         // Force specific theme — set non-suffixed var directly
         const forced = String(globalTheme).replace(/^'|'$/g, '')