@symbo.ls/scratch 3.8.0 → 3.8.6

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];
@@ -247,6 +429,8 @@ const recursiveTheme = (val) => {
         continue;
       } else if (symb === ":") {
         obj[`&${param}`] = recursiveTheme(val[param]);
+      } else if (symb === ".") {
+        obj[`&${param}`] = recursiveTheme(val[param]);
       }
     } else obj[param] = val[param];
   }

package/dist/esm/utils/font.js

@@ -24,24 +24,28 @@ const isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") |
 const setFontImport = (url) => `@import url('${url}');`;
 const setInCustomFontMedia = (str) => `@font-face { ${str} }`;
 const 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};`;
 };
 const setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 const 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 });
   });
 };
 const getFontFace = (LIBRARY) => {
@@ -61,8 +65,12 @@ const getFontFaceEachString = (name, weights, files) => {
   }
   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
+  });
 };
 const getFontFaceString = (LIBRARY, files) => {
   const keys = Object.keys(LIBRARY);