@symbo.ls/scratch 3.8.8 → 3.14.0

package/dist/cjs/system/font.js

@@ -23,30 +23,30 @@ __export(font_exports, {
   setFontFamily: () => setFontFamily
 });
 module.exports = __toCommonJS(font_exports);
-var import_utils = require("@domql/utils");
-var import_smbls_utils = require("@symbo.ls/smbls-utils");
+var import_utils = require("@symbo.ls/utils");
+var import_utils2 = require("@symbo.ls/utils");
 var import_factory = require("../factory.js");
-var import_utils2 = require("../utils");
+var import_utils3 = require("../utils/index.js");
 const setFont = (val, key) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const CSSvar = `--font-${key}`;
   if (!val || (0, import_utils.isArray)(val) && !val[0]) return;
   let fontFace;
   if (val.isVariable) {
-    const url = (0, import_utils2.resolveFileUrl)(val.url, CONFIG.files) || val.url;
-    if ((0, import_utils2.isGoogleFontsUrl)(url)) {
-      fontFace = (0, import_utils2.setFontImport)(url);
+    const url = (0, import_utils3.resolveFileUrl)(val.url, CONFIG.files) || val.url;
+    if ((0, import_utils3.isGoogleFontsUrl)(url)) {
+      fontFace = (0, import_utils3.setFontImport)(url);
     } else {
-      fontFace = (0, import_utils2.setCustomFontMedia)(key, url, val.fontWeight, {
+      fontFace = (0, import_utils3.setCustomFontMedia)(key, url, val.fontWeight, {
         fontStretch: val.fontStretch,
         fontDisplay: val.fontDisplay || "swap"
       });
     }
   } else if (val[0]) {
-    fontFace = (0, import_utils2.getFontFaceEach)(key, val, CONFIG.files);
+    fontFace = (0, import_utils3.getFontFaceEach)(key, val, CONFIG.files);
   } else {
-    const url = Array.isArray(val.url) ? val.url.map((u) => (0, import_utils2.resolveFileUrl)(u, CONFIG.files) || u) : (0, import_utils2.resolveFileUrl)(val.url, CONFIG.files) || val.url;
-    fontFace = (0, import_utils2.setCustomFontMedia)(key, url, val.fontWeight, {
+    const url = Array.isArray(val.url) ? val.url.map((u) => (0, import_utils3.resolveFileUrl)(u, CONFIG.files) || u) : (0, import_utils3.resolveFileUrl)(val.url, CONFIG.files) || val.url;
+    fontFace = (0, import_utils3.setCustomFontMedia)(key, url, val.fontWeight, {
       fontStyle: val.fontStyle,
       fontDisplay: val.fontDisplay,
       fontStretch: val.fontStretch
@@ -56,15 +56,15 @@ const setFont = (val, key) => {
 };
 const getFontFamily = (key, factory) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  const { font_family: FONT_FAMILY } = CONFIG;
-  return (0, import_utils2.getDefaultOrFirstKey)(factory || FONT_FAMILY, key);
+  const { fontFamily: FONT_FAMILY } = CONFIG;
+  return (0, import_utils3.getDefaultOrFirstKey)(factory || FONT_FAMILY, key);
 };
 const setFontFamily = (val, key) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  const { font_family: FONT_FAMILY, font_family_types: FONT_FAMILY_TYPES } = CONFIG;
+  const { fontFamily: FONT_FAMILY, fontFamilyTypes: FONT_FAMILY_TYPES } = CONFIG;
   let { value, type } = val;
   if (val.isDefault) FONT_FAMILY.default = key;
-  if ((0, import_utils.isObject)(value)) value = (0, import_smbls_utils.arrayzeValue)(value);
+  if ((0, import_utils.isObject)(value)) value = (0, import_utils2.arrayzeValue)(value);
   const CSSvar = `--font-family-${key}`;
   const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES[type]}`;
   return { var: CSSvar, value: str, arr: value, type };

package/dist/cjs/system/reset.js

@@ -21,7 +21,7 @@ __export(reset_exports, {
   applyReset: () => applyReset
 });
 module.exports = __toCommonJS(reset_exports);
-var import_utils = require("@domql/utils");
+var import_utils = require("@symbo.ls/utils");
 var import_factory = require("../factory.js");
 var import_theme = require("./theme.js");
 const applyReset = (reset = {}) => {
@@ -45,10 +45,28 @@ const applyReset = (reset = {}) => {
     const { body, ...templates } = TYPOGRAPHY.templates;
     const globalTheme = CONFIG.useDocumentTheme ? (0, import_theme.getMediaTheme)("document") : {};
     if (RESET.html) (0, import_utils.overwriteDeep)(RESET.html, globalTheme);
+    if (TYPOGRAPHY.unit) {
+      const { media: MEDIA } = CONFIG;
+      for (const key in TYPOGRAPHY) {
+        if (key.charAt(0) !== "@") continue;
+        const mediaTypo = TYPOGRAPHY[key];
+        if (!mediaTypo) continue;
+        if (mediaTypo.unit === TYPOGRAPHY.unit || !mediaTypo.unit) continue;
+        const mediaUnit = mediaTypo.unit;
+        const mediaBase = mediaTypo.base || TYPOGRAPHY.base;
+        const mediaBrowserDefault = mediaTypo.browserDefault || TYPOGRAPHY.browserDefault;
+        const mediaName = key.slice(1);
+        const query = MEDIA[mediaName];
+        if (!query) continue;
+        const mediaKey = "@media " + (query === "print" ? query : "screen and " + query);
+        if (!RESET[mediaKey]) RESET[mediaKey] = {};
+        if (!RESET[mediaKey].html) RESET[mediaKey].html = {};
+        RESET[mediaKey].html.fontSize = mediaBase / mediaBrowserDefault + mediaUnit;
+      }
+    }
     return (0, import_utils.deepMerge)((0, import_utils.merge)(RESET, reset), {
       html: {
         position: "absolute",
-        // overflow: 'hidden',
         width: "100%",
         height: "100%",
         top: "0",
@@ -57,7 +75,7 @@ const applyReset = (reset = {}) => {
         WebkitFontSmoothing: "subpixel-antialiased",
         scrollBehavior: "smooth",
         ...globalTheme,
-        fontSize: TYPOGRAPHY.browserDefault + "px",
+        fontSize: TYPOGRAPHY.unit ? TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + TYPOGRAPHY.unit : TYPOGRAPHY.browserDefault + "px",
         fontFamily: DOCUMENT.fontFamily,
         lineHeight: DOCUMENT.lineHeight
       },
@@ -73,14 +91,23 @@ const applyReset = (reset = {}) => {
       a: {
         color: "currentColor"
       },
-      // form elements
+      button: {
+        color: "inherit",
+        font: "inherit",
+        background: "transparent",
+        border: "none",
+        cursor: "pointer",
+        appearance: "none",
+        WebkitAppearance: "none"
+      },
+      "input, select, textarea": {
+        color: "inherit",
+        font: "inherit"
+      },
       fieldset: {
         border: 0,
         padding: 0,
         margin: 0
-      },
-      "select, input": {
-        fontFamily: DOCUMENT.fontFamily
       }
     });
   }

package/dist/cjs/system/shadow.js

@@ -26,7 +26,7 @@ var import_factory = require("../factory.js");
 var import_color = require("./color.js");
 var import_spacing = require("./spacing.js");
 var import_color2 = require("../utils/color.js");
-var import_utils = require("@domql/utils");
+var import_utils = require("@symbo.ls/utils");
 const setShadow = (value, key, suffix, prefers) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   if ((0, import_utils.isArray)(value)) {
@@ -63,9 +63,10 @@ const setShadow = (value, key, suffix, prefers) => {
       }).join(" ");
     }).join(", ");
   }
-  const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : "");
+  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
+  const CSSVar = `--${vp}shadow-${key}` + (suffix ? `-${suffix}` : "");
   if (CONFIG.useVariable) {
-    CONFIG.CSS_VARS[CSSVar] = value;
+    CONFIG.cssVars[CSSVar] = value;
   }
   return {
     var: CSSVar,

package/dist/cjs/system/spacing.js

@@ -25,17 +25,17 @@ __export(spacing_exports, {
   splitSpacedValue: () => splitSpacedValue
 });
 module.exports = __toCommonJS(spacing_exports);
-var import_smbls_utils = require("@symbo.ls/smbls-utils");
-var import_utils = require("@domql/utils");
+var import_utils = require("@symbo.ls/utils");
+var import_utils2 = require("@symbo.ls/utils");
 var import_factory = require("../factory.js");
-var import_utils2 = require("../utils");
+var import_utils3 = require("../utils/index.js");
 const runThroughMedia = (FACTORY) => {
   for (const prop in FACTORY) {
     const mediaProps = FACTORY[prop];
     const isMediaName = prop.slice(0, 1) === "@";
     if (!isMediaName) continue;
     const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY;
-    (0, import_utils.merge)(mediaProps, {
+    (0, import_utils2.merge)(mediaProps, {
       type,
       base,
       ratio,
@@ -48,8 +48,8 @@ const runThroughMedia = (FACTORY) => {
       templates: {},
       vars: {}
     });
-    (0, import_utils2.generateSequence)(mediaProps);
-    (0, import_utils2.applyMediaSequenceVars)(FACTORY, prop);
+    (0, import_utils3.generateSequence)(mediaProps);
+    (0, import_utils3.applyMediaSequenceVars)(FACTORY, prop);
   }
 };
 const checkIfBoxSize = (propertyName) => {
@@ -61,8 +61,8 @@ const checkIfBoxSize = (propertyName) => {
 const applySpacingSequence = () => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const { spacing: SPACING } = CONFIG;
-  (0, import_utils2.generateSequence)(SPACING);
-  (0, import_utils2.applySequenceVars)(SPACING);
+  (0, import_utils3.generateSequence)(SPACING);
+  (0, import_utils3.applySequenceVars)(SPACING);
   runThroughMedia(SPACING);
 };
 const getSequence = (sequenceProps) => {
@@ -70,19 +70,19 @@ const getSequence = (sequenceProps) => {
   const { spacing: SPACING } = CONFIG;
   if (!sequenceProps || !sequenceProps.sequence) return SPACING;
   const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
-  return hasGenerated ? sequenceProps : (0, import_utils2.generateSequence)(sequenceProps);
+  return hasGenerated ? sequenceProps : (0, import_utils3.generateSequence)(sequenceProps);
 };
 const getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefix) => {
   const sequence = getSequence(sequenceProps);
-  if ((0, import_utils.isString)(value)) {
+  if ((0, import_utils2.isString)(value)) {
     if (!fnPrefix && value.includes("(")) {
-      const fnArray = (0, import_utils2.getFnPrefixAndValue)(value);
+      const fnArray = (0, import_utils3.getFnPrefixAndValue)(value);
       fnPrefix = fnArray[0];
       value = fnArray[1];
     }
   }
-  const stack = fnPrefix ? [value] : (0, import_smbls_utils.arrayzeValue)(value);
-  if (!(0, import_utils.isArray)(stack)) return;
+  const stack = fnPrefix ? [value] : (0, import_utils.arrayzeValue)(value);
+  if (!(0, import_utils2.isArray)(stack)) return;
   if (stack.length > 1) {
     let suffix = "";
     if (propertyName === "borderWidth") {
@@ -94,7 +94,7 @@ const getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefi
       3: ["BlockStart", "Inline", "BlockEnd"],
       4: ["BlockStart", "InlineEnd", "BlockEnd", "InlineStart"]
     };
-    const wrapSequenceValueByDirection = (direction, i) => (0, import_utils2.getSequenceValuePropertyPair)(
+    const wrapSequenceValueByDirection = (direction, i) => (0, import_utils3.getSequenceValuePropertyPair)(
       stack[i],
       propertyName + direction + suffix,
       sequence,
@@ -104,14 +104,14 @@ const getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefi
       (dir, key) => wrapSequenceValueByDirection(dir, key)
     );
   }
-  return (0, import_utils2.getSequenceValuePropertyPair)(value, propertyName, sequence, fnPrefix);
+  return (0, import_utils3.getSequenceValuePropertyPair)(value, propertyName, sequence, fnPrefix);
 };
 const getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const { spacing: SPACING } = CONFIG;
   let value = val || props[propertyName];
-  if (!fnPrefix && (0, import_utils.isString)(value) && value.includes("(")) {
-    const fnArr = (0, import_utils2.getFnPrefixAndValue)(value);
+  if (!fnPrefix && (0, import_utils2.isString)(value) && value.includes("(")) {
+    const fnArr = (0, import_utils3.getFnPrefixAndValue)(value);
     fnPrefix = fnArr[0];
     value = fnArr[1];
   }
@@ -124,7 +124,7 @@ const getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
 const splitSpacedValue = (val) => {
   const addDefault = (v) => {
     const isSymbol = ["+", "-", "*", "/"].includes(v);
-    const hasUnits = import_utils2.CSS_UNITS.some((unit) => val.includes(unit));
+    const hasUnits = import_utils3.CSS_UNITS.some((unit) => val.includes(unit));
     if (isSymbol || hasUnits) return v;
     const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
     if (isSingleLetter) return v + "_default";

package/dist/cjs/system/svg.js

@@ -24,8 +24,8 @@ __export(svg_exports, {
   setSvgIcon: () => setSvgIcon
 });
 module.exports = __toCommonJS(svg_exports);
-var import_utils = require("@domql/utils");
-var import_utils2 = require("../utils");
+var import_utils = require("@symbo.ls/utils");
+var import_utils2 = require("../utils/index.js");
 var import_factory = require("../factory.js");
 const DEF_OPTIONS = {
   document: import_utils.document
@@ -44,12 +44,12 @@ const setSVG = (val, key) => {
 const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG.svg;
-  for (const key in LIBRARY) lib[key] = CONFIG.svg[key];
+  for (const key in LIBRARY) lib[key] = LIBRARY[key];
   appendSVG(lib, options);
 };
 const setSvgIcon = (val, key) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  if (CONFIG.useIconSprite && !CONFIG.semantic_icons?.[key]) {
+  if (CONFIG.useIconSprite && !CONFIG.semanticIcons?.[key]) {
     return setSVG(val, key);
   }
   return val;
@@ -57,7 +57,7 @@ const setSvgIcon = (val, key) => {
 const appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG.icons;
-  for (const key in LIBRARY) lib[key] = CONFIG.icons[key];
+  for (const key in LIBRARY) lib[key] = LIBRARY[key];
   appendSVG(lib, options);
 };
 const createSVGSpriteElement = (doc, options = { isRoot: true }) => {
@@ -72,6 +72,24 @@ const createSVGSpriteElement = (doc, options = { isRoot: true }) => {
   }
   return svgElem;
 };
+const parseSVGSprite = (doc, svgString) => {
+  const DOMParserCtor = typeof DOMParser !== "undefined" ? DOMParser : null;
+  if (DOMParserCtor) {
+    const wrapped = `<svg xmlns="http://www.w3.org/2000/svg">${svgString}</svg>`;
+    const parser = new DOMParserCtor();
+    const parsed = parser.parseFromString(wrapped, "image/svg+xml");
+    if (parsed.querySelector("parsererror")) return null;
+    return parsed.documentElement;
+  }
+  return null;
+};
+const moveChildren = (doc, from, to) => {
+  while (from.firstChild) {
+    const child = from.firstChild;
+    to.appendChild(doc.importNode(child, true));
+    child.remove();
+  }
+};
 const appendSVG = (lib, options = DEF_OPTIONS) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const doc = options.document || import_utils.document;
@@ -84,8 +102,11 @@ const appendSVG = (lib, options = DEF_OPTIONS) => {
   const exists = doc.querySelector("#svgSprite");
   const SVGsprite = (0, import_utils2.generateSprite)(lib);
   const spriteHtml = `<svg aria-hidden="true" width="0" height="0" style="position:absolute" id="svgSprite">${SVGsprite}</svg>`;
+  const parsed = parseSVGSprite(doc, SVGsprite);
   if (exists) {
-    if (doc.body.insertAdjacentHTML) {
+    if (parsed) {
+      moveChildren(doc, parsed, exists);
+    } else if (doc.body.insertAdjacentHTML) {
       exists.insertAdjacentHTML("beforeend", SVGsprite);
     } else {
       const tempSVG = createSVGSpriteElement(doc, { isRoot: false });
@@ -93,7 +114,13 @@ const appendSVG = (lib, options = DEF_OPTIONS) => {
       exists.append(...tempSVG.children);
     }
   } else {
-    if (doc.body.insertAdjacentHTML) {
+    if (parsed) {
+      const svgSpriteDOM = createSVGSpriteElement(doc);
+      if (svgSpriteDOM && svgSpriteDOM.nodeType) {
+        moveChildren(doc, parsed, svgSpriteDOM);
+        doc.body.prepend(svgSpriteDOM);
+      }
+    } else if (doc.body.insertAdjacentHTML) {
       doc.body.insertAdjacentHTML("afterbegin", spriteHtml);
     } else {
       const svgSpriteDOM = createSVGSpriteElement(doc);

package/dist/cjs/system/theme.js

@@ -24,10 +24,10 @@ __export(theme_exports, {
   setTheme: () => setTheme
 });
 module.exports = __toCommonJS(theme_exports);
-var import_color = require("./color");
+var import_color = require("./color.js");
 var import_factory = require("../factory.js");
 var import_color2 = require("../utils/color.js");
-var import_utils = require("@domql/utils");
+var import_utils = require("@symbo.ls/utils");
 const CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
   "black",
   "white",
@@ -185,6 +185,13 @@ const CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
   "yellowgreen",
   "rebeccapurple"
 ]);
+const COLOR_PARAM_TOKENS = ["color", "Color", "background", "Background", "fill", "Fill", "stroke", "Stroke"];
+const isColorParam = (param) => {
+  for (let i = 0; i < COLOR_PARAM_TOKENS.length; i++) {
+    if (param.includes(COLOR_PARAM_TOKENS[i])) return true;
+  }
+  return false;
+};
 const setThemeValue = (theme) => {
   const value = {};
   const { state, media, helpers, ...rest } = theme;
@@ -286,7 +293,8 @@ const setTheme = (val, key) => {
   if (CONFIG.useVariable) return setMediaTheme(val, key);
   const { state, media, helpers } = val;
   const value = setThemeValue(val, key);
-  const CSSvar = `--theme-${key}`;
+  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
+  const CSSvar = `--${vp}theme-${key}`;
   setSelectors(val, value);
   setMedia(val, value);
   setHelpers(val, value);
@@ -299,9 +307,9 @@ const keySetters = {
   ".": (theme, value) => setHelpers(theme, value)
 };
 const generateAutoVars = (schemes, varPrefix, CONFIG) => {
-  const { CSS_VARS } = CONFIG;
-  if (!CONFIG.CSS_MEDIA_VARS) CONFIG.CSS_MEDIA_VARS = {};
-  const MEDIA_VARS = CONFIG.CSS_MEDIA_VARS;
+  const { cssVars: CSS_VARS } = CONFIG;
+  if (!CONFIG.cssMediaVars) CONFIG.cssMediaVars = {};
+  const MEDIA_VARS = CONFIG.cssMediaVars;
   const globalTheme = CONFIG.globalTheme !== void 0 ? CONFIG.globalTheme : "auto";
   const result = {};
   const allKeys = /* @__PURE__ */ new Set();
@@ -309,19 +317,18 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
     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);
+    if (symb === "@" || symb === "." || symb === ":") continue;
+    if (!isColorParam(param)) 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);
       }
     }
   }
@@ -343,38 +350,31 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
       }
       result[param] = generateAutoVars(subSchemes, `${varPrefix}-${pseudoName}`, 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;
-          if (scheme === "dark" || scheme === "light") {
-            const mq = `@media (prefers-color-scheme: ${scheme})`;
-            if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {};
-            MEDIA_VARS[mq][autoVar] = color;
-          }
-        }
-        if (fallbackColor !== void 0) {
-          CSS_VARS[autoVar] = fallbackColor;
+      const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
+      const autoVar = `--${vp}theme-${varPrefix}-${param}`;
+      const forced = globalTheme && globalTheme !== "auto" ? String(globalTheme).replace(/^'|'$/g, "") : null;
+      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 (forced && scheme === forced || !forced && (scheme === "light" || fallbackColor === void 0)) {
+          fallbackColor = color;
         }
-      } else {
-        const forced = String(globalTheme).replace(/^'|'$/g, "");
-        const source = schemes[forced]?.[param];
-        if (source !== void 0) {
-          const color = (0, import_color.getColor)(source, `@${forced}`);
-          if (color !== void 0) CSS_VARS[autoVar] = color;
+        const selector = `[data-theme="${scheme}"]`;
+        if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
+        MEDIA_VARS[selector][autoVar] = color;
+        if (scheme === "dark" || scheme === "light") {
+          const mq = `@media (prefers-color-scheme: ${scheme})`;
+          if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {};
+          MEDIA_VARS[mq][autoVar] = color;
         }
       }
+      if (fallbackColor !== void 0) {
+        CSS_VARS[autoVar] = fallbackColor;
+      }
       result[param] = `var(${autoVar})`;
       result[`.${param}`] = { [param]: result[param] };
     }
@@ -389,7 +389,7 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
 };
 const setMediaTheme = (val, key, suffix, prefers) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  const { CSS_VARS } = CONFIG;
+  const { cssVars: CSS_VARS } = CONFIG;
   const theme = { value: val };
   const isTopLevel = !suffix && !prefers;
   if ((0, import_utils.isObjectLike)(val)) {
@@ -415,7 +415,8 @@ const setMediaTheme = (val, key, suffix, prefers) => {
         const color = (0, import_color.getColor)(value, prefers);
         const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
         const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
-        const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
+        const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
+        const CSSVar = `--${vp}theme-${key}${varmetaSuffixName}-${param}`;
         if (CONFIG.useVariable) {
           if (CONFIG.useThemeSuffixedVars) CSS_VARS[CSSVar] = color;
           theme[param] = `var(${CSSVar})`;

package/dist/cjs/system/timing.js

@@ -23,24 +23,24 @@ __export(timing_exports, {
   getTimingFunction: () => getTimingFunction
 });
 module.exports = __toCommonJS(timing_exports);
-var import_smbls_utils = require("@symbo.ls/smbls-utils");
+var import_utils = require("@symbo.ls/utils");
 var import_factory = require("../factory.js");
-var import_utils = require("../utils");
+var import_utils2 = require("../utils/index.js");
 const applyTimingSequence = () => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const { timing: TIMING } = CONFIG;
-  (0, import_utils.generateSequence)(TIMING);
-  (0, import_utils.applySequenceVars)(TIMING);
+  (0, import_utils2.generateSequence)(TIMING);
+  (0, import_utils2.applySequenceVars)(TIMING);
 };
 const getTimingFunction = (value) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const { timing: TIMING } = CONFIG;
-  return TIMING[value] || TIMING[(0, import_smbls_utils.toCamelCase)(value)] || value;
+  return TIMING[value] || TIMING[(0, import_utils.toCamelCase)(value)] || value;
 };
 const getTimingByKey = (value, property = "timing") => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const { timing: TIMING } = CONFIG;
-  return (0, import_utils.getSequenceValuePropertyPair)(
+  return (0, import_utils2.getSequenceValuePropertyPair)(
     value,
     property,
     TIMING

package/dist/cjs/system/typography.js

@@ -24,9 +24,9 @@ __export(typography_exports, {
   runThroughMedia: () => runThroughMedia
 });
 module.exports = __toCommonJS(typography_exports);
-var import_utils = require("@domql/utils");
+var import_utils = require("@symbo.ls/utils");
 var import_factory = require("../factory.js");
-var import_utils2 = require("../utils");
+var import_utils2 = require("../utils/index.js");
 const runThroughMedia = (FACTORY) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const { typography: TYPOGRAPHY, media: MEDIA } = CONFIG;
@@ -46,12 +46,21 @@ const runThroughMedia = (FACTORY) => {
       h1Matches,
       unit
     });
+    const VIEWPORT_UNITS = /* @__PURE__ */ new Set(["vw", "vh", "vmin", "vmax", "svw", "svh", "lvw", "lvh", "dvw", "dvh"]);
+    const inheritedUnit = mediaValue.unit || unit;
+    const mediaUnit = !mediaValue.unit && VIEWPORT_UNITS.has(unit) ? "rem" : inheritedUnit;
     const query = MEDIA[mediaName];
     const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
     TYPOGRAPHY.templates[media] = {
-      fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + unit
+      fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + mediaUnit
     };
     if (!mediaRegenerate) {
+      (0, import_utils.merge)(mediaValue, {
+        sequence: {},
+        scales: {},
+        vars: {}
+      });
+      (0, import_utils2.generateSequence)(mediaValue);
       (0, import_utils2.applyMediaSequenceVars)(FACTORY, prop);
       continue;
     }

package/dist/cjs/transforms/index.js

@@ -33,10 +33,10 @@ __export(transforms_exports, {
   transfromGap: () => transfromGap
 });
 module.exports = __toCommonJS(transforms_exports);
-var import_utils = require("@domql/utils");
-var import_factory = require("../factory");
-var import_system = require("../system");
-var import_utils2 = require("../utils");
+var import_utils = require("@symbo.ls/utils");
+var import_factory = require("../factory.js");
+var import_system = require("../system/index.js");
+var import_utils2 = require("../utils/index.js");
 const BORDER_STYLES = /* @__PURE__ */ new Set([
   "none",
   "hidden",

package/dist/cjs/utils/color.js

@@ -40,7 +40,7 @@ __export(color_exports, {
   splitTopLevelCommas: () => splitTopLevelCommas
 });
 module.exports = __toCommonJS(color_exports);
-var import_utils = require("@domql/utils");
+var import_utils = require("@symbo.ls/utils");
 const colorStringToRgbaArray = (color) => {
   if (color === "") return [0, 0, 0, 0];
   if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];

package/dist/cjs/utils/font.js

@@ -50,6 +50,7 @@ const getDefaultOrFirstKey = (LIBRARY, key) => {
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
 const getFontFormat = (url) => {
+  if (typeof url !== "string" || !url) return null;
   const ext = url.split(/[#?]/)[0].split(".").pop().trim();
   if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
   return null;
@@ -58,7 +59,8 @@ 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 urls = Array.isArray(url) ? url : [url];
+  const rawUrls = Array.isArray(url) ? url : [url];
+  const urls = rawUrls.filter((u) => typeof u === "string" && u);
   const srcList = urls.map((u) => {
     const format = getFontFormat(u);
     const formatStr = format ? ` format('${format}')` : "";