@symbo.ls/scratch 3.8.6 → 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/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/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,
@@ -3067,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;
   };
@@ -3121,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);
@@ -3130,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.6",
+  "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.6",
-    "@symbo.ls/smbls-utils": "^3.8.6",
+    "@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()