@symbo.ls/scratch 3.4.0 → 3.4.2

package/dist/cjs/factory.js

@@ -39,12 +39,19 @@ module.exports = __toCommonJS(factory_exports);
 var import_utils = require("@domql/utils");
 var CONF = __toESM(require("./defaultConfig"), 1);
 const CSS_VARS = {};
+const _CONF = CONF.default || CONF;
+const _confLower = {};
+for (const key in _CONF) {
+  const lower = key.toLowerCase();
+  _confLower[lower] = _CONF[key];
+  if (lower !== key) _confLower[key] = _CONF[key];
+}
 const CONFIG = {
   verbose: false,
   useVariable: true,
   useReset: true,
   CSS_VARS,
-  ...CONF.default || CONF
+  ..._confLower
 };
 const cachedConfig = (0, import_utils.deepClone)(CONFIG);
 const FACTORY = {

package/dist/cjs/set.js

@@ -54,33 +54,33 @@ const VALUE_TRANSFORMERS = {
   unit: setSameValue,
   animation: setSameValue
 };
-const setValue = (FACTORY_NAME, value, key) => {
+const setValue = (factoryName, value, key) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  const factoryName = FACTORY_NAME.toLowerCase();
-  const FACTORY2 = CONFIG[FACTORY_NAME];
-  if (VALUE_TRANSFORMERS[factoryName]) {
+  const lowerName = factoryName.toLowerCase();
+  const FACTORY2 = CONFIG[lowerName] || CONFIG[factoryName];
+  if (VALUE_TRANSFORMERS[lowerName]) {
     try {
-      const result = VALUE_TRANSFORMERS[factoryName](value, key);
+      const result = VALUE_TRANSFORMERS[lowerName](value, key);
       FACTORY2[key] = result;
       return FACTORY2;
     } catch (error) {
-      if (CONFIG.verbose) console.warn("Error setting", factoryName, "value", value, key, error);
+      if (CONFIG.verbose) console.warn("Error setting", lowerName, "value", value, key, error);
     }
   }
-  if (CONFIG.verbose) console.warn("Can not find", factoryName, "method in scratch");
+  if (CONFIG.verbose) console.warn("Can not find", lowerName, "method in scratch");
 };
 const setEach = (factoryName, props) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  const FACTORY_NAME = factoryName.toUpperCase();
+  const lowerName = factoryName.toLowerCase();
   const keys = Object.keys(props);
   keys.forEach((key) => {
     try {
-      return setValue(FACTORY_NAME, props[key], key);
+      return setValue(lowerName, props[key], key);
     } catch (error) {
-      if (CONFIG.verbose) console.warn("Error setting", FACTORY_NAME, "value", props[key], key, error);
+      if (CONFIG.verbose) console.warn("Error setting", lowerName, "value", props[key], key, error);
     }
   });
-  return CONFIG[FACTORY_NAME];
+  return CONFIG[lowerName] || CONFIG[factoryName];
 };
 const SET_OPTIONS = {};
 const set = (recivedConfig, options = SET_OPTIONS) => {
@@ -97,6 +97,7 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     useDocumentTheme,
     useDefaultConfig,
     SEMANTIC_ICONS,
+    semantic_icons,
     ...config
   } = recivedConfig;
   if (options.newConfig) {
@@ -111,7 +112,11 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
   if (useDocumentTheme !== void 0) CONFIG.useDocumentTheme = useDocumentTheme;
   if (globalTheme !== void 0) CONFIG.globalTheme = globalTheme;
   if (useDefaultConfig !== void 0) CONFIG.useDefaultConfig = useDefaultConfig;
-  if (SEMANTIC_ICONS !== void 0) CONFIG.SEMANTIC_ICONS = SEMANTIC_ICONS;
+  const _semanticIcons = SEMANTIC_ICONS || semantic_icons;
+  if (_semanticIcons !== void 0) {
+    CONFIG.semantic_icons = _semanticIcons;
+    CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons;
+  }
   if (CONFIG.verbose) console.log(CONFIG);
   if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {};
   const keys = Object.keys(config);

package/dist/esm/factory.js

@@ -6,12 +6,19 @@ import {
 } from "@domql/utils";
 import * as CONF from "./defaultConfig";
 const CSS_VARS = {};
+const _CONF = CONF.default || CONF;
+const _confLower = {};
+for (const key in _CONF) {
+  const lower = key.toLowerCase();
+  _confLower[lower] = _CONF[key];
+  if (lower !== key) _confLower[key] = _CONF[key];
+}
 const CONFIG = {
   verbose: false,
   useVariable: true,
   useReset: true,
   CSS_VARS,
-  ...CONF.default || CONF
+  ..._confLower
 };
 const cachedConfig = deepClone(CONFIG);
 const FACTORY = {

package/dist/esm/set.js

@@ -42,33 +42,33 @@ const VALUE_TRANSFORMERS = {
   unit: setSameValue,
   animation: setSameValue
 };
-const setValue = (FACTORY_NAME, value, key) => {
+const setValue = (factoryName, value, key) => {
   const CONFIG = getActiveConfig();
-  const factoryName = FACTORY_NAME.toLowerCase();
-  const FACTORY2 = CONFIG[FACTORY_NAME];
-  if (VALUE_TRANSFORMERS[factoryName]) {
+  const lowerName = factoryName.toLowerCase();
+  const FACTORY2 = CONFIG[lowerName] || CONFIG[factoryName];
+  if (VALUE_TRANSFORMERS[lowerName]) {
     try {
-      const result = VALUE_TRANSFORMERS[factoryName](value, key);
+      const result = VALUE_TRANSFORMERS[lowerName](value, key);
       FACTORY2[key] = result;
       return FACTORY2;
     } catch (error) {
-      if (CONFIG.verbose) console.warn("Error setting", factoryName, "value", value, key, error);
+      if (CONFIG.verbose) console.warn("Error setting", lowerName, "value", value, key, error);
     }
   }
-  if (CONFIG.verbose) console.warn("Can not find", factoryName, "method in scratch");
+  if (CONFIG.verbose) console.warn("Can not find", lowerName, "method in scratch");
 };
 const setEach = (factoryName, props) => {
   const CONFIG = getActiveConfig();
-  const FACTORY_NAME = factoryName.toUpperCase();
+  const lowerName = factoryName.toLowerCase();
   const keys = Object.keys(props);
   keys.forEach((key) => {
     try {
-      return setValue(FACTORY_NAME, props[key], key);
+      return setValue(lowerName, props[key], key);
     } catch (error) {
-      if (CONFIG.verbose) console.warn("Error setting", FACTORY_NAME, "value", props[key], key, error);
+      if (CONFIG.verbose) console.warn("Error setting", lowerName, "value", props[key], key, error);
     }
   });
-  return CONFIG[FACTORY_NAME];
+  return CONFIG[lowerName] || CONFIG[factoryName];
 };
 const SET_OPTIONS = {};
 const set = (recivedConfig, options = SET_OPTIONS) => {
@@ -85,6 +85,7 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     useDocumentTheme,
     useDefaultConfig,
     SEMANTIC_ICONS,
+    semantic_icons,
     ...config
   } = recivedConfig;
   if (options.newConfig) {
@@ -99,7 +100,11 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
   if (useDocumentTheme !== void 0) CONFIG.useDocumentTheme = useDocumentTheme;
   if (globalTheme !== void 0) CONFIG.globalTheme = globalTheme;
   if (useDefaultConfig !== void 0) CONFIG.useDefaultConfig = useDefaultConfig;
-  if (SEMANTIC_ICONS !== void 0) CONFIG.SEMANTIC_ICONS = SEMANTIC_ICONS;
+  const _semanticIcons = SEMANTIC_ICONS || semantic_icons;
+  if (_semanticIcons !== void 0) {
+    CONFIG.semantic_icons = _semanticIcons;
+    CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons;
+  }
   if (CONFIG.verbose) console.log(CONFIG);
   if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {};
   const keys = Object.keys(config);

package/dist/iife/index.js

@@ -969,12 +969,19 @@ var SmblsScratch = (() => {
 
   // src/factory.js
   var CSS_VARS = {};
+  var _CONF = void 0 || defaultConfig_exports;
+  var _confLower = {};
+  for (const key in _CONF) {
+    const lower = key.toLowerCase();
+    _confLower[lower] = _CONF[key];
+    if (lower !== key) _confLower[key] = _CONF[key];
+  }
   var CONFIG = {
     verbose: false,
     useVariable: true,
     useReset: true,
     CSS_VARS,
-    ...void 0 || defaultConfig_exports
+    ..._confLower
   };
   var cachedConfig = deepClone(CONFIG);
   var FACTORY = {
@@ -1543,14 +1550,31 @@ var SmblsScratch = (() => {
         const parts = rawRef.split(" ");
         const refColor = CONFIG2.COLOR[parts[0]];
         if (refColor && refColor.value) {
-          if (parts[1] !== void 0) {
-            val = `rgba(${refColor.rgb}, ${parts[1]})`;
-          } else {
-            val = refColor.value;
+          let rgb2 = refColor.rgb;
+          const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
+          const tone = parts[2];
+          if (tone) {
+            rgb2 = getRgbTone(rgb2, tone);
           }
+          val = `rgba(${rgb2}, ${alpha2})`;
         } else {
-          if (CONFIG2.verbose) console.warn(val, "- referred but does not exist");
-          val = parts[0];
+          const tone = parts[2];
+          const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
+          if (tone) {
+            try {
+              const rgb2 = colorStringToRgbaArray(parts[0]);
+              if (rgb2 && rgb2.length >= 3) {
+                const tonedRgb = getRgbTone(rgb2.slice(0, 3).join(", "), tone);
+                val = `rgba(${tonedRgb}, ${alpha2})`;
+              } else {
+                val = parts[0];
+              }
+            } catch (e) {
+              val = parts[0];
+            }
+          } else {
+            val = parts[0];
+          }
         }
       }
     }
@@ -2477,33 +2501,33 @@ var SmblsScratch = (() => {
     unit: setSameValue,
     animation: setSameValue
   };
-  var setValue = (FACTORY_NAME, value, key) => {
+  var setValue = (factoryName, value, key) => {
     const CONFIG2 = getActiveConfig();
-    const factoryName = FACTORY_NAME.toLowerCase();
-    const FACTORY2 = CONFIG2[FACTORY_NAME];
-    if (VALUE_TRANSFORMERS[factoryName]) {
+    const lowerName = factoryName.toLowerCase();
+    const FACTORY2 = CONFIG2[lowerName] || CONFIG2[factoryName];
+    if (VALUE_TRANSFORMERS[lowerName]) {
       try {
-        const result = VALUE_TRANSFORMERS[factoryName](value, key);
+        const result = VALUE_TRANSFORMERS[lowerName](value, key);
         FACTORY2[key] = result;
         return FACTORY2;
       } catch (error) {
-        if (CONFIG2.verbose) console.warn("Error setting", factoryName, "value", value, key, error);
+        if (CONFIG2.verbose) console.warn("Error setting", lowerName, "value", value, key, error);
       }
     }
-    if (CONFIG2.verbose) console.warn("Can not find", factoryName, "method in scratch");
+    if (CONFIG2.verbose) console.warn("Can not find", lowerName, "method in scratch");
   };
   var setEach = (factoryName, props) => {
     const CONFIG2 = getActiveConfig();
-    const FACTORY_NAME = factoryName.toUpperCase();
+    const lowerName = factoryName.toLowerCase();
     const keys = Object.keys(props);
     keys.forEach((key) => {
       try {
-        return setValue(FACTORY_NAME, props[key], key);
+        return setValue(lowerName, props[key], key);
       } catch (error) {
-        if (CONFIG2.verbose) console.warn("Error setting", FACTORY_NAME, "value", props[key], key, error);
+        if (CONFIG2.verbose) console.warn("Error setting", lowerName, "value", props[key], key, error);
       }
     });
-    return CONFIG2[FACTORY_NAME];
+    return CONFIG2[lowerName] || CONFIG2[factoryName];
   };
   var SET_OPTIONS = {};
   var set = (recivedConfig, options = SET_OPTIONS) => {
@@ -2520,6 +2544,7 @@ var SmblsScratch = (() => {
       useDocumentTheme,
       useDefaultConfig,
       SEMANTIC_ICONS: SEMANTIC_ICONS2,
+      semantic_icons,
       ...config
     } = recivedConfig;
     if (options.newConfig) {
@@ -2534,7 +2559,11 @@ var SmblsScratch = (() => {
     if (useDocumentTheme !== void 0) CONFIG2.useDocumentTheme = useDocumentTheme;
     if (globalTheme !== void 0) CONFIG2.globalTheme = globalTheme;
     if (useDefaultConfig !== void 0) CONFIG2.useDefaultConfig = useDefaultConfig;
-    if (SEMANTIC_ICONS2 !== void 0) CONFIG2.SEMANTIC_ICONS = SEMANTIC_ICONS2;
+    const _semanticIcons = SEMANTIC_ICONS2 || semantic_icons;
+    if (_semanticIcons !== void 0) {
+      CONFIG2.semantic_icons = _semanticIcons;
+      CONFIG2.SEMANTIC_ICONS = CONFIG2.semantic_icons;
+    }
     if (CONFIG2.verbose) console.log(CONFIG2);
     if (!CONFIG2.__svg_cache) CONFIG2.__svg_cache = {};
     const keys = Object.keys(config);

package/package.json

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

package/src/factory.js

@@ -9,12 +9,23 @@ import {
 import * as CONF from './defaultConfig'
 
 export const CSS_VARS = {}
+
+// Build CONFIG with lowercase keys as canonical
+const _CONF = CONF.default || CONF
+const _confLower = {}
+for (const key in _CONF) {
+  const lower = key.toLowerCase()
+  _confLower[lower] = _CONF[key]
+  // backward compat: keep UPPERCASE alias pointing to same object
+  if (lower !== key) _confLower[key] = _CONF[key]
+}
+
 export const CONFIG = {
   verbose: false,
   useVariable: true,
   useReset: true,
   CSS_VARS,
-  ...(CONF.default || CONF)
+  ..._confLower
 }
 
 const cachedConfig = deepClone(CONFIG)

package/src/set.js

@@ -56,38 +56,38 @@ export const VALUE_TRANSFORMERS = {
  * @param {String} key Key, or the name of the property
  * @returns {Object} Factory
  */
-export const setValue = (FACTORY_NAME, value, key) => {
+export const setValue = (factoryName, value, key) => {
   const CONFIG = getActiveConfig()
-  const factoryName = FACTORY_NAME.toLowerCase()
-  const FACTORY = CONFIG[FACTORY_NAME]
+  const lowerName = factoryName.toLowerCase()
+  const FACTORY = CONFIG[lowerName] || CONFIG[factoryName]
 
-  if (VALUE_TRANSFORMERS[factoryName]) {
+  if (VALUE_TRANSFORMERS[lowerName]) {
     try {
-      const result = VALUE_TRANSFORMERS[factoryName](value, key)
+      const result = VALUE_TRANSFORMERS[lowerName](value, key)
       FACTORY[key] = result
       return FACTORY
     } catch (error) {
-      if (CONFIG.verbose) console.warn('Error setting', factoryName, 'value', value, key, error)
+      if (CONFIG.verbose) console.warn('Error setting', lowerName, 'value', value, key, error)
     }
   }
 
-  if (CONFIG.verbose) console.warn('Can not find', factoryName, 'method in scratch')
+  if (CONFIG.verbose) console.warn('Can not find', lowerName, 'method in scratch')
 }
 
 export const setEach = (factoryName, props) => {
   const CONFIG = getActiveConfig()
-  const FACTORY_NAME = factoryName.toUpperCase()
+  const lowerName = factoryName.toLowerCase()
   const keys = Object.keys(props)
 
   keys.forEach((key) => {
     try {
-      return setValue(FACTORY_NAME, props[key], key)
+      return setValue(lowerName, props[key], key)
     } catch (error) {
-      if (CONFIG.verbose) console.warn('Error setting', FACTORY_NAME, 'value', props[key], key, error)
+      if (CONFIG.verbose) console.warn('Error setting', lowerName, 'value', props[key], key, error)
     }
   })
 
-  return CONFIG[FACTORY_NAME]
+  return CONFIG[lowerName] || CONFIG[factoryName]
 }
 
 const SET_OPTIONS = {}
@@ -107,6 +107,7 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     useDocumentTheme,
     useDefaultConfig,
     SEMANTIC_ICONS,
+    semantic_icons,
     ...config
   } = recivedConfig
 
@@ -123,7 +124,11 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   if (useDocumentTheme !== undefined) CONFIG.useDocumentTheme = useDocumentTheme
   if (globalTheme !== undefined) CONFIG.globalTheme = globalTheme
   if (useDefaultConfig !== undefined) CONFIG.useDefaultConfig = useDefaultConfig
-  if (SEMANTIC_ICONS !== undefined) CONFIG.SEMANTIC_ICONS = SEMANTIC_ICONS
+  const _semanticIcons = SEMANTIC_ICONS || semantic_icons
+  if (_semanticIcons !== undefined) {
+    CONFIG.semantic_icons = _semanticIcons
+    CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons // backward compat alias
+  }
   if (CONFIG.verbose) console.log(CONFIG)
 
   if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {}

package/src/system/color.js

@@ -124,14 +124,32 @@ export const setColor = (val, key, suffix) => {
       const parts = rawRef.split(' ')
       const refColor = CONFIG.COLOR[parts[0]]
       if (refColor && refColor.value) {
-        if (parts[1] !== undefined) {
-          val = `rgba(${refColor.rgb}, ${parts[1]})`
-        } else {
-          val = refColor.value
+        let rgb = refColor.rgb
+        const alpha = parts[1] !== undefined ? parts[1] : '1'
+        const tone = parts[2]
+        if (tone) {
+          rgb = getRgbTone(rgb, tone)
         }
+        val = `rgba(${rgb}, ${alpha})`
       } else {
-        if (CONFIG.verbose) console.warn(val, '- referred but does not exist')
-        val = parts[0]
+        // Try to resolve as CSS keyword color with tone modifier
+        const tone = parts[2]
+        const alpha = parts[1] !== undefined ? parts[1] : '1'
+        if (tone) {
+          try {
+            const rgb = colorStringToRgbaArray(parts[0])
+            if (rgb && rgb.length >= 3) {
+              const tonedRgb = getRgbTone(rgb.slice(0, 3).join(', '), tone)
+              val = `rgba(${tonedRgb}, ${alpha})`
+            } else {
+              val = parts[0]
+            }
+          } catch (e) {
+            val = parts[0]
+          }
+        } else {
+          val = parts[0]
+        }
       }
     }
   }