@symbo.ls/scratch 3.8.0 → 3.8.6

package/dist/iife/index.js

@@ -197,6 +197,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 = []) => {
@@ -467,7 +478,6 @@ var SmblsScratch = (() => {
     applyTimingSequence: () => applyTimingSequence,
     applyTypographySequence: () => applyTypographySequence,
     breakpoints: () => breakpoints,
-    cases: () => cases,
     changeGlobalTheme: () => changeGlobalTheme,
     changeLightness: () => changeLightness,
     checkIfBoxSize: () => checkIfBoxSize,
@@ -584,7 +594,8 @@ var SmblsScratch = (() => {
     transformTransition: () => transformTransition,
     transfromGap: () => transfromGap,
     typography: () => typography,
-    unit: () => unit
+    unit: () => unit,
+    vars: () => vars
   });
 
   // src/utils/index.js
@@ -905,24 +916,28 @@ var SmblsScratch = (() => {
   var setFontImport = (url) => `@import url('${url}');`;
   var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
   var setCustomFont = (name, url, weight, options = {}) => {
-    const format = getFontFormat(url);
-    const formatStr = format ? ` format('${format}')` : "";
+    const urls = Array.isArray(url) ? url : [url];
+    const srcList = urls.map((u) => {
+      const format = getFontFormat(u);
+      const formatStr = format ? ` format('${format}')` : "";
+      return `url('${u}')${formatStr}`;
+    }).join(",\n       ");
     return `
   font-family: '${name}';
-  font-style: normal;${weight ? `
+  font-style: ${options.fontStyle || "normal"};${weight ? `
   font-weight: ${weight};` : ""}${options.fontStretch ? `
   font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
   font-display: ${options.fontDisplay};` : ""}
-  src: url('${url}')${formatStr};`;
+  src: ${srcList};`;
   };
   var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
   var getFontFaceEach = (name, weights, files) => {
     const keys = Object.keys(weights);
     return keys.map((key) => {
-      const { url, fontWeight } = weights[key];
-      const resolvedUrl = resolveFileUrl(url, files) || url;
-      return setCustomFont(name, resolvedUrl, fontWeight);
+      const { url, fontWeight, fontStyle, fontDisplay, fontStretch } = weights[key];
+      const resolvedUrl = Array.isArray(url) ? url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(url, files) || url;
+      return setCustomFont(name, resolvedUrl, fontWeight, { fontStyle, fontDisplay, fontStretch });
     });
   };
   var getFontFace = (LIBRARY) => {
@@ -942,8 +957,12 @@ var SmblsScratch = (() => {
     }
     const isArr = weights[0];
     if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia);
-    const url = resolveFileUrl(weights.url, files) || weights.url;
-    return setCustomFontMedia(name, url);
+    const url = Array.isArray(weights.url) ? weights.url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(weights.url, files) || weights.url;
+    return setCustomFontMedia(name, url, weights.fontWeight, {
+      fontStyle: weights.fontStyle,
+      fontDisplay: weights.fontDisplay,
+      fontStretch: weights.fontStretch
+    });
   };
   var getFontFaceString = (LIBRARY, files) => {
     const keys = Object.keys(LIBRARY);
@@ -956,9 +975,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) => {
@@ -977,7 +997,6 @@ var SmblsScratch = (() => {
     CLASS: () => CLASS,
     animation: () => animation,
     breakpoints: () => breakpoints,
-    cases: () => cases,
     color: () => color,
     devices: () => devices,
     document: () => document3,
@@ -1000,7 +1019,8 @@ var SmblsScratch = (() => {
     theme: () => theme,
     timing: () => timing,
     typography: () => typography,
-    unit: () => unit
+    unit: () => unit,
+    vars: () => vars
   });
 
   // src/defaultConfig/sequence.js
@@ -1150,9 +1170,6 @@ var SmblsScratch = (() => {
     mobileXS: [375, 768]
   };
 
-  // src/defaultConfig/cases.js
-  var cases = {};
-
   // src/defaultConfig/animation.js
   var animation = {};
 
@@ -1173,6 +1190,7 @@ var SmblsScratch = (() => {
 
   // src/defaultConfig/index.js
   var reset = {};
+  var vars = {};
 
   // src/factory.js
   var CSS_VARS = {};
@@ -1514,20 +1532,20 @@ var SmblsScratch = (() => {
       CSS_VARS2[result.var] = result.value;
     }
   };
-  var applySequenceGlobalVars = (vars, obj, options) => {
+  var applySequenceGlobalVars = (vars2, obj, options) => {
     const CONFIG2 = getActiveConfig();
     const { unit: UNIT } = CONFIG2;
     const unit2 = obj.unit || UNIT.default;
     const { base, ratio, type } = obj;
     const prefix = "--" + (type && type.replace(".", "-"));
-    vars[`${prefix}-base`] = base;
-    vars[`${prefix}-unit`] = unit2;
+    vars2[`${prefix}-base`] = base;
+    vars2[`${prefix}-unit`] = unit2;
     const ratioVar = `${prefix}-ratio`;
-    vars[ratioVar] = ratio;
+    vars2[ratioVar] = ratio;
     const [first, middle, second] = getSubratio(base, ratio);
-    vars[`${prefix}-sub-ratio-1`] = `calc(var(${prefix}-ratio) * ${first / ratio})`;
-    vars[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
-    vars[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
+    vars2[`${prefix}-sub-ratio-1`] = `calc(var(${prefix}-ratio) * ${first / ratio})`;
+    vars2[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
+    vars2[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
   };
   var applySequenceVars = (FACTORY2, options = {}) => {
     const CONFIG2 = getActiveConfig();
@@ -1692,7 +1710,12 @@ var SmblsScratch = (() => {
       [name, alpha, tone] = value;
     } else {
       const parsed = parseColorToken(value);
-      if (!parsed) return value;
+      if (!parsed) {
+        const { color: COLOR2, gradient: GRADIENT2 } = CONFIG2;
+        const directVal = GRADIENT2[value] || COLOR2[value];
+        if (directVal) return CONFIG2.useVariable ? `var(${directVal.var})` : directVal.value;
+        return value;
+      }
       if (parsed.passthrough) return parsed.passthrough;
       if (parsed.cssVar) return `var(${parsed.cssVar})`;
       name = parsed.name;
@@ -1856,6 +1879,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;
@@ -1973,6 +2153,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]));
@@ -1993,11 +2190,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;
@@ -2007,6 +2209,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];
@@ -2090,6 +2295,8 @@ var SmblsScratch = (() => {
           continue;
         } else if (symb === ":") {
           obj[`&${param}`] = recursiveTheme(val[param]);
+        } else if (symb === ".") {
+          obj[`&${param}`] = recursiveTheme(val[param]);
         }
       } else obj[param] = val[param];
     }
@@ -2147,8 +2354,12 @@ var SmblsScratch = (() => {
     } else if (val[0]) {
       fontFace = getFontFaceEach(key, val, CONFIG2.files);
     } else {
-      const url = resolveFileUrl(val.url, CONFIG2.files) || val.url;
-      fontFace = setCustomFontMedia(key, url);
+      const url = Array.isArray(val.url) ? val.url.map((u) => resolveFileUrl(u, CONFIG2.files) || u) : resolveFileUrl(val.url, CONFIG2.files) || val.url;
+      fontFace = setCustomFontMedia(key, url, val.fontWeight, {
+        fontStyle: val.fontStyle,
+        fontDisplay: val.fontDisplay,
+        fontStretch: val.fontStretch
+      });
     }
     return { var: CSSvar, value: val, fontFace };
   };
@@ -2783,11 +2994,14 @@ var SmblsScratch = (() => {
 
   // src/set.js
   init_esm();
-  var setCases = (val, key) => {
-    if (isFunction(val)) return val();
+  var setVars = (val, key) => {
+    const CONFIG2 = getActiveConfig();
+    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+    const varName = key.startsWith("--") ? key : `--${key}`;
+    CSS_VARS2[varName] = val;
     return val;
   };
-  var setSameValue = (val, key) => val;
+  var asIs = (val) => val;
   var VALUE_TRANSFORMERS = {
     color: setColor,
     gradient: setGradient,
@@ -2796,21 +3010,21 @@ var SmblsScratch = (() => {
     fontfamily: setFontFamily,
     theme: setTheme,
     icons: setSvgIcon,
-    semantic_icons: setSameValue,
-    semanticicons: setSameValue,
+    semantic_icons: asIs,
+    semanticicons: asIs,
     svg: setSVG,
-    svg_data: setSameValue,
-    typography: setSameValue,
-    cases: setCases,
+    svg_data: asIs,
+    typography: asIs,
     shadow: setShadow,
-    spacing: setSameValue,
-    media: setSameValue,
-    grid: setSameValue,
-    class: setSameValue,
-    timing: setSameValue,
-    reset: setSameValue,
-    unit: setSameValue,
-    animation: setSameValue
+    spacing: asIs,
+    media: asIs,
+    grid: asIs,
+    class: asIs,
+    timing: asIs,
+    reset: asIs,
+    unit: asIs,
+    animation: asIs,
+    vars: setVars
   };
   var setValue = (factoryName, value, key) => {
     const CONFIG2 = getActiveConfig();
@@ -2822,10 +3036,12 @@ var SmblsScratch = (() => {
         FACTORY2[key] = result;
         return FACTORY2;
       } catch (error) {
-        if (CONFIG2.verbose) console.warn("Error setting", lowerName, "value", value, key, error);
+        if (CONFIG2.verbose)
+          console.warn("Error setting", lowerName, "value", value, key, error);
       }
     }
-    if (CONFIG2.verbose) console.warn("Can not find", lowerName, "method in scratch");
+    if (CONFIG2.verbose)
+      console.warn("Can not find", lowerName, "method in scratch");
   };
   var setEach = (factoryName, props) => {
     const CONFIG2 = getActiveConfig();
@@ -2835,7 +3051,15 @@ var SmblsScratch = (() => {
       try {
         return setValue(lowerName, props[key], key);
       } catch (error) {
-        if (CONFIG2.verbose) console.warn("Error setting", lowerName, "value", props[key], key, error);
+        if (CONFIG2.verbose)
+          console.warn(
+            "Error setting",
+            lowerName,
+            "value",
+            props[key],
+            key,
+            error
+          );
       }
     });
     return CONFIG2[lowerName] || CONFIG2[factoryName];
@@ -2870,6 +3094,7 @@ var SmblsScratch = (() => {
       useDefaultConfig,
       semanticIcons,
       SEMANTIC_ICONS,
+      // deprecated
       semantic_icons: semantic_icons2,
       files,
       ...config
@@ -2886,7 +3111,8 @@ var SmblsScratch = (() => {
     if (useIconSprite !== void 0) CONFIG2.useIconSprite = useIconSprite;
     if (useDocumentTheme !== void 0) CONFIG2.useDocumentTheme = useDocumentTheme;
     if (globalTheme !== void 0) CONFIG2.globalTheme = globalTheme;
-    if (recivedConfig.useThemeSuffixedVars !== void 0) CONFIG2.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
+    if (recivedConfig.useThemeSuffixedVars !== void 0)
+      CONFIG2.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
     if (useDefaultConfig !== void 0) CONFIG2.useDefaultConfig = useDefaultConfig;
     const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons2;
     if (_semanticIcons !== void 0) {

package/package.json

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

package/src/defaultConfig/index.js

@@ -14,7 +14,6 @@ export * from './icons.js'
 export * from './timing.js'
 export * from './document.js'
 export * from './responsive.js'
-export * from './cases.js'
 export * from './animation.js'
 export * from './svg.js'
 export * from './templates.js'
@@ -22,3 +21,4 @@ export * from './grid.js'
 export * from './class.js'
 
 export const reset = {}
+export const vars = {}