@symbo.ls/scratch 3.8.8 → 3.14.0

package/dist/esm/set.js

@@ -1,4 +1,4 @@
-import { FACTORY, getActiveConfig, setActiveConfig } from "./factory.js";
+import { FACTORY, getActiveConfig, setActiveConfig, toCamel } from "./factory.js";
 import {
   setColor,
   setGradient,
@@ -13,13 +13,13 @@ import {
   applyTimingSequence,
   applyDocument,
   setShadow
-} from "./system";
-import { deepMerge } from "@domql/utils";
+} from "./system/index.js";
+import { deepMerge, isObject, isArray } from "@symbo.ls/utils";
 const setVars = (val, key) => {
   const CONFIG = getActiveConfig();
-  const { CSS_VARS } = CONFIG;
+  const { cssVars } = CONFIG;
   const varName = key.startsWith("--") ? key : `--${key}`;
-  CSS_VARS[varName] = val;
+  cssVars[varName] = val;
   return val;
 };
 const asIs = (val) => val;
@@ -27,14 +27,14 @@ const VALUE_TRANSFORMERS = {
   color: setColor,
   gradient: setGradient,
   font: setFont,
-  font_family: setFontFamily,
+  fontFamily: setFontFamily,
   fontfamily: setFontFamily,
   theme: setTheme,
   icons: setSvgIcon,
-  semantic_icons: asIs,
+  semanticIcons: asIs,
   semanticicons: asIs,
   svg: setSVG,
-  svg_data: asIs,
+  svgData: asIs,
   typography: asIs,
   shadow: setShadow,
   spacing: asIs,
@@ -49,12 +49,14 @@ const VALUE_TRANSFORMERS = {
 };
 const setValue = (factoryName, value, key) => {
   const CONFIG = getActiveConfig();
-  const lowerName = factoryName.toLowerCase();
-  const FACTORY2 = CONFIG[lowerName] || CONFIG[factoryName];
-  if (VALUE_TRANSFORMERS[lowerName]) {
+  const camelName = toCamel(factoryName);
+  const lowerName = camelName.toLowerCase();
+  const FACTORY2 = CONFIG[camelName] || CONFIG[lowerName] || CONFIG[factoryName];
+  const transformer = VALUE_TRANSFORMERS[camelName] || VALUE_TRANSFORMERS[lowerName];
+  if (transformer) {
     try {
-      const result = VALUE_TRANSFORMERS[lowerName](value, key);
-      FACTORY2[key] = result;
+      const result = transformer(value, key);
+      if (FACTORY2) FACTORY2[key] = result;
       return FACTORY2;
     } catch (error) {
       if (CONFIG.verbose)
@@ -67,7 +69,11 @@ const setValue = (factoryName, value, key) => {
 const setEach = (factoryName, props) => {
   const CONFIG = getActiveConfig();
   const lowerName = factoryName.toLowerCase();
-  const keys = Object.keys(props);
+  const keys = Object.keys(props).sort((a, b) => {
+    const aComposite = isObject(props[a]) || isArray(props[a]) ? 1 : 0;
+    const bComposite = isObject(props[b]) || isArray(props[b]) ? 1 : 0;
+    return aComposite - bComposite;
+  });
   keys.forEach((key) => {
     try {
       return setValue(lowerName, props[key], key);
@@ -85,33 +91,59 @@ const setEach = (factoryName, props) => {
   });
   return CONFIG[lowerName] || CONFIG[factoryName];
 };
-const changeGlobalTheme = (newTheme) => {
-  const CONFIG = getActiveConfig();
+const changeGlobalTheme = (newTheme, targetConfig) => {
+  const CONFIG = targetConfig || 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];
+  const configDoc = CONFIG.document && CONFIG.document.documentElement ? CONFIG.document : null;
+  const targetDoc = configDoc || (typeof document !== "undefined" ? document : null);
+  const targetWin = targetDoc && targetDoc.defaultView || (typeof window !== "undefined" ? window : null);
+  if (targetDoc) {
+    const root = CONFIG.themeRoot || targetDoc.documentElement;
+    const forced = newTheme && newTheme !== "auto";
+    if (forced) {
+      root.setAttribute("data-theme", newTheme);
+      if (newTheme === "dark" || newTheme === "light") {
+        root.style.colorScheme = newTheme;
+      } else {
+        root.style.colorScheme = "light dark";
+      }
+    } else if (targetWin && targetWin.matchMedia) {
+      const apply = (mq2) => {
+        root.setAttribute("data-theme", mq2.matches ? "dark" : "light");
+      };
+      const mq = targetWin.matchMedia("(prefers-color-scheme: dark)");
+      apply(mq);
+      root.style.colorScheme = "light dark";
+      if (!CONFIG.__prefersListener) {
+        CONFIG.__prefersListener = apply;
+        try {
+          mq.addEventListener("change", apply);
+        } catch (e) {
+          mq.addListener(apply);
+        }
+      }
+    } else {
+      root.setAttribute("data-theme", "light");
+      root.style.colorScheme = "light";
+    }
   }
-  for (const key in CONFIG.CSS_MEDIA_VARS) {
-    delete CONFIG.CSS_MEDIA_VARS[key];
+  const themeVarPrefix = CONFIG.varPrefix ? `--${CONFIG.varPrefix}-theme-` : "--theme-";
+  for (const key in CONFIG.cssVars) {
+    if (key.startsWith(themeVarPrefix)) delete CONFIG.cssVars[key];
   }
-  const source = CONFIG._originalTheme || CONFIG.theme;
-  if (source) {
-    const fresh = JSON.parse(JSON.stringify(source));
-    CONFIG.theme = fresh;
-    setEach("theme", fresh);
+  for (const key in CONFIG.cssMediaVars) {
+    delete CONFIG.cssMediaVars[key];
   }
-  if (typeof document !== "undefined" && CONFIG.CSS_VARS) {
-    const sheets = document.styleSheets;
+  if (targetDoc && CONFIG.cssVars) {
+    const targetSelector = CONFIG.scopeSelector || ":root";
+    const sheets = targetDoc.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]);
+          if (rules[j].selectorText === targetSelector) {
+            for (const key in CONFIG.cssVars) {
+              rules[j].style.setProperty(key, CONFIG.cssVars[key]);
             }
             return CONFIG;
           }
@@ -124,7 +156,7 @@ const changeGlobalTheme = (newTheme) => {
 };
 const SET_OPTIONS = {};
 const set = (recivedConfig, options = SET_OPTIONS) => {
-  let CONFIG = getActiveConfig();
+  let CONFIG = options.config || getActiveConfig();
   const {
     version,
     verbose,
@@ -134,19 +166,19 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     useFontImport,
     useIconSprite,
     globalTheme,
+    themeRoot,
     useDocumentTheme,
     useDefaultConfig,
     semanticIcons,
-    SEMANTIC_ICONS,
-    // deprecated
-    semantic_icons,
     files,
+    assets,
     ...config
   } = recivedConfig;
   if (options.newConfig) {
     CONFIG = setActiveConfig(options.newConfig);
   }
   if (files !== void 0) CONFIG.files = files;
+  if (assets !== void 0) CONFIG.assets = assets;
   if (verbose !== void 0) CONFIG.verbose = verbose;
   if (useVariable !== void 0) CONFIG.useVariable = useVariable;
   if (useReset !== void 0) CONFIG.useReset = useReset;
@@ -155,20 +187,46 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
   if (useIconSprite !== void 0) CONFIG.useIconSprite = useIconSprite;
   if (useDocumentTheme !== void 0) CONFIG.useDocumentTheme = useDocumentTheme;
   if (globalTheme !== void 0) CONFIG.globalTheme = globalTheme;
+  if (themeRoot !== void 0) CONFIG.themeRoot = themeRoot;
   if (recivedConfig.useThemeSuffixedVars !== void 0)
     CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
   if (useDefaultConfig !== void 0) CONFIG.useDefaultConfig = useDefaultConfig;
-  const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons;
-  if (_semanticIcons !== void 0) {
-    CONFIG.semantic_icons = _semanticIcons;
-    CONFIG.semanticIcons = CONFIG.semantic_icons;
-    CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons;
-  }
+  if (semanticIcons !== void 0) CONFIG.semanticIcons = semanticIcons;
   if (CONFIG.verbose) console.log(CONFIG);
-  if (typeof document !== "undefined" && CONFIG.globalTheme && CONFIG.globalTheme !== "auto") {
-    document.documentElement.setAttribute("data-theme", CONFIG.globalTheme);
+  const setConfigDoc = CONFIG.document && CONFIG.document.documentElement ? CONFIG.document : null;
+  const setTargetDoc = setConfigDoc || (typeof document !== "undefined" ? document : null);
+  const setTargetWin = setTargetDoc && setTargetDoc.defaultView || (typeof window !== "undefined" ? window : null);
+  const setRoot = setTargetDoc && (CONFIG.themeRoot || setTargetDoc.documentElement);
+  if (setRoot && typeof setRoot.setAttribute === "function") {
+    const forced = CONFIG.globalTheme && CONFIG.globalTheme !== "auto";
+    if (forced) {
+      setRoot.setAttribute("data-theme", CONFIG.globalTheme);
+      if (CONFIG.globalTheme === "dark" || CONFIG.globalTheme === "light") {
+        setRoot.style.colorScheme = CONFIG.globalTheme;
+      } else {
+        setRoot.style.colorScheme = "light dark";
+      }
+    } else if (setTargetWin && setTargetWin.matchMedia) {
+      const apply = (mq2) => {
+        setRoot.setAttribute("data-theme", mq2.matches ? "dark" : "light");
+      };
+      const mq = setTargetWin.matchMedia("(prefers-color-scheme: dark)");
+      apply(mq);
+      setRoot.style.colorScheme = "light dark";
+      if (!CONFIG.__prefersListener) {
+        CONFIG.__prefersListener = apply;
+        try {
+          mq.addEventListener("change", apply);
+        } catch (e) {
+          mq.addListener(apply);
+        }
+      }
+    } else {
+      setRoot.setAttribute("data-theme", "light");
+      setRoot.style.colorScheme = "light";
+    }
   }
-  if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {};
+  if (!CONFIG.__svgCache) CONFIG.__svgCache = {};
   const keys = Object.keys(config);
   const keySet = new Set(keys);
   keys.forEach((key) => {
@@ -177,29 +235,31 @@ 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;
     return setEach(key, config[key]);
   });
-  if (config.typography || config.TYPOGRAPHY) {
+  if (CONFIG.varPrefix) {
+    if (CONFIG.typography) CONFIG.typography.varPrefix = CONFIG.varPrefix;
+    if (CONFIG.spacing) CONFIG.spacing.varPrefix = CONFIG.varPrefix;
+    if (CONFIG.timing) CONFIG.timing.varPrefix = CONFIG.varPrefix;
+  }
+  if (config.typography) {
     try {
       applyTypographySequence();
     } catch (e) {
       if (CONFIG.verbose) console.warn("Error applying typography sequence", e);
     }
   }
-  if (config.spacing || config.SPACING) {
+  if (config.spacing) {
     try {
       applySpacingSequence();
     } catch (e) {
       if (CONFIG.verbose) console.warn("Error applying spacing sequence", e);
     }
   }
-  if (config.timing || config.TIMING) {
+  if (config.timing) {
     try {
       applyTimingSequence();
     } catch (e) {
@@ -207,7 +267,8 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     }
   }
   applyDocument();
-  applyReset();
+  const computedReset = applyReset();
+  if (computedReset) CONFIG.reset = computedReset;
   return CONFIG;
 };
 export {

package/dist/esm/system/color.js

@@ -1,11 +1,11 @@
-import { isObject, isArray, isString } from "@domql/utils";
+import { isObject, isArray, isString } from "@symbo.ls/utils";
 import { getActiveConfig } from "../factory.js";
 import {
   colorStringToRgbaArray,
   getRgbTone,
   isCSSVar,
   parseColorToken
-} from "../utils";
+} from "../utils/index.js";
 const getColor = (value, key, config) => {
   const CONFIG = config || getActiveConfig();
   if (!isString(value)) {
@@ -77,11 +77,14 @@ const getMediaColor = (value, globalTheme, config) => {
   const isObj = isObject(val);
   if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
   else if (isObj) {
+    if (CONFIG.useVariable && val.var) return `var(${val.var})`;
     if (globalTheme) return getColor(value, `@${globalTheme}`, config);
     else {
       const obj = {};
       for (const mediaName in val) {
+        if (mediaName.charCodeAt(0) !== 64) continue;
         const query = CONFIG.media[mediaName.slice(1)];
+        if (!query) continue;
         const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
         obj[media] = getColor(value, mediaName, config);
       }
@@ -99,7 +102,11 @@ const setColor = (val, key, suffix) => {
     val = getColor(rawRef);
     if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
       const parts = rawRef.split(" ");
-      const refColor = CONFIG.color[parts[0]];
+      let refColor = CONFIG.color[parts[0]];
+      if (refColor && !refColor.value && !refColor.rgb && (isString(refColor) || isArray(refColor) || isObject(refColor))) {
+        CONFIG.color[parts[0]] = setColor(refColor, parts[0]);
+        refColor = CONFIG.color[parts[0]];
+      }
       if (refColor && refColor.value) {
         let rgb2 = refColor.rgb;
         const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
@@ -130,10 +137,7 @@ const setColor = (val, key, suffix) => {
     }
   }
   if (isArray(val)) {
-    return {
-      "@light": setColor(val[0], key, "light"),
-      "@dark": setColor(val[1], key, "dark")
-    };
+    val = { "@light": val[0], "@dark": val[1] };
   }
   if (isObject(val)) {
     const obj = {};
@@ -144,16 +148,71 @@ const setColor = (val, key, suffix) => {
         variant.slice(0, 1) === "@" ? variant.slice(1) : variant
       );
     }
+    if (CONFIG.useVariable) {
+      const vp2 = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
+      const adaptiveVar = `--${vp2}color-${key}`;
+      let fallbackValue;
+      const schemeValues = {};
+      for (const variant in obj) {
+        if (variant.charCodeAt(0) !== 64) continue;
+        const scheme = variant.slice(1);
+        const entry = obj[variant];
+        const value2 = entry && (entry.value || entry);
+        if (!value2 || typeof value2 !== "string") continue;
+        schemeValues[scheme] = value2;
+        if (scheme === "light" || fallbackValue === void 0) fallbackValue = value2;
+      }
+      if (fallbackValue !== void 0) {
+        CONFIG.cssVars[adaptiveVar] = fallbackValue;
+        if (!CONFIG.cssMediaVars) CONFIG.cssMediaVars = {};
+        for (const scheme in schemeValues) {
+          const sel = `[data-theme="${scheme}"]`;
+          if (!CONFIG.cssMediaVars[sel]) CONFIG.cssMediaVars[sel] = {};
+          CONFIG.cssMediaVars[sel][adaptiveVar] = schemeValues[scheme];
+          if (scheme === "light" || scheme === "dark") {
+            const mq = `@media (prefers-color-scheme: ${scheme})`;
+            if (!CONFIG.cssMediaVars[mq]) CONFIG.cssMediaVars[mq] = {};
+            CONFIG.cssMediaVars[mq][adaptiveVar] = schemeValues[scheme];
+          }
+        }
+        obj.var = adaptiveVar;
+      }
+    }
     return obj;
   }
-  const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
-  const colorArr = colorStringToRgbaArray(val.value || val);
+  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
+  const CSSVar = `--${vp}color-${key}` + (suffix ? `-${suffix}` : "");
+  let resolvedVal = val.value || val;
+  if (isString(resolvedVal) && resolvedVal.includes(".") && !resolvedVal.includes("(")) {
+    const [colorRef, alphaStr] = resolvedVal.split(".");
+    const refColor = CONFIG.color[colorRef];
+    if (refColor && refColor.rgb) {
+      resolvedVal = `rgba(${refColor.rgb}, ${parseFloat("0." + alphaStr) || 1})`;
+    }
+  }
+  if (isString(resolvedVal) && !resolvedVal.includes("(") && !resolvedVal.startsWith("#")) {
+    const parsed = parseColorToken(resolvedVal);
+    if (parsed && parsed.name && !parsed.passthrough && !parsed.cssVar) {
+      const refColor = CONFIG.color[parsed.name];
+      if (refColor && !refColor.value && !refColor.rgb && (isString(refColor) || isArray(refColor) || isObject(refColor))) {
+        CONFIG.color[parsed.name] = setColor(refColor, parsed.name);
+      }
+      const baseColor = CONFIG.color[parsed.name];
+      if (baseColor && baseColor.rgb) {
+        let rgb2 = baseColor.rgb;
+        if (parsed.tone) rgb2 = getRgbTone(rgb2, parsed.tone);
+        const alphaVal = parsed.alpha ? parseFloat(parsed.alpha) : 1;
+        resolvedVal = `rgba(${rgb2}, ${alphaVal})`;
+      }
+    }
+  }
+  const colorArr = colorStringToRgbaArray(resolvedVal);
   const [r, g, b, a = 1] = colorArr;
   const alpha = parseFloat(a.toFixed(2));
   const rgb = `${r}, ${g}, ${b}`;
   const value = `rgba(${rgb}, ${alpha})`;
   if (CONFIG.useVariable) {
-    CONFIG.CSS_VARS[CSSVar] = value;
+    CONFIG.cssVars[CSSVar] = value;
   }
   return {
     var: CSSVar,
@@ -176,9 +235,10 @@ const setGradient = (val, key, suffix) => {
     for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
     return obj;
   }
-  const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
+  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
+  const CSSVar = `--${vp}gradient-${key}` + (suffix ? `-${suffix}` : "");
   if (CONFIG.useVariable) {
-    CONFIG.CSS_VARS[CSSVar] = val.value || val;
+    CONFIG.cssVars[CSSVar] = val.value || val;
   }
   return {
     var: CSSVar,

package/dist/esm/system/document.js

@@ -1,9 +1,9 @@
-import { merge } from "@domql/utils";
+import { merge } from "@symbo.ls/utils";
 import { getActiveConfig } from "../factory.js";
-import { getDefaultOrFirstKey } from "../utils";
+import { getDefaultOrFirstKey } from "../utils/index.js";
 const applyDocument = () => {
   const CONFIG = getActiveConfig();
-  const { document: DOCUMENT, font_family: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG;
+  const { document: DOCUMENT, fontFamily: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG;
   return merge(DOCUMENT, {
     theme: THEME.document,
     fontFamily: getDefaultOrFirstKey(FONT_FAMILY),

package/dist/esm/system/font.js

@@ -1,5 +1,5 @@
-import { isObject, isArray } from "@domql/utils";
-import { arrayzeValue } from "@symbo.ls/smbls-utils";
+import { isObject, isArray } from "@symbo.ls/utils";
+import { arrayzeValue } from "@symbo.ls/utils";
 import { getActiveConfig } from "../factory.js";
 import {
   getDefaultOrFirstKey,
@@ -8,7 +8,7 @@ import {
   setCustomFontMedia,
   setFontImport,
   resolveFileUrl
-} from "../utils";
+} from "../utils/index.js";
 const setFont = (val, key) => {
   const CONFIG = getActiveConfig();
   const CSSvar = `--font-${key}`;
@@ -38,12 +38,12 @@ const setFont = (val, key) => {
 };
 const getFontFamily = (key, factory) => {
   const CONFIG = getActiveConfig();
-  const { font_family: FONT_FAMILY } = CONFIG;
+  const { fontFamily: FONT_FAMILY } = CONFIG;
   return getDefaultOrFirstKey(factory || FONT_FAMILY, key);
 };
 const setFontFamily = (val, key) => {
   const CONFIG = 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 (isObject(value)) value = arrayzeValue(value);

package/dist/esm/system/reset.js

@@ -1,4 +1,4 @@
-import { deepMerge, merge, overwriteDeep } from "@domql/utils";
+import { deepMerge, merge, overwriteDeep } from "@symbo.ls/utils";
 import { getActiveConfig } from "../factory.js";
 import { getMediaTheme } from "./theme.js";
 const applyReset = (reset = {}) => {
@@ -22,10 +22,28 @@ const applyReset = (reset = {}) => {
     const { body, ...templates } = TYPOGRAPHY.templates;
     const globalTheme = CONFIG.useDocumentTheme ? getMediaTheme("document") : {};
     if (RESET.html) 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 deepMerge(merge(RESET, reset), {
       html: {
         position: "absolute",
-        // overflow: 'hidden',
         width: "100%",
         height: "100%",
         top: "0",
@@ -34,7 +52,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
       },
@@ -50,14 +68,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/esm/system/shadow.js

@@ -6,7 +6,7 @@ import {
   isObject,
   isString,
   isArray
-} from "@domql/utils";
+} from "@symbo.ls/utils";
 const setShadow = (value, key, suffix, prefers) => {
   const CONFIG = getActiveConfig();
   if (isArray(value)) {
@@ -43,9 +43,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/esm/system/spacing.js

@@ -1,5 +1,5 @@
-import { arrayzeValue } from "@symbo.ls/smbls-utils";
-import { isArray, isString, merge } from "@domql/utils";
+import { arrayzeValue } from "@symbo.ls/utils";
+import { isArray, isString, merge } from "@symbo.ls/utils";
 import { getActiveConfig } from "../factory.js";
 import {
   CSS_UNITS,
@@ -8,7 +8,7 @@ import {
   generateSequence,
   getFnPrefixAndValue,
   getSequenceValuePropertyPair
-} from "../utils";
+} from "../utils/index.js";
 const runThroughMedia = (FACTORY) => {
   for (const prop in FACTORY) {
     const mediaProps = FACTORY[prop];

package/dist/esm/system/svg.js

@@ -1,5 +1,5 @@
-import { document } from "@domql/utils";
-import { generateSprite, convertSvgToSymbol } from "../utils";
+import { document } from "@symbo.ls/utils";
+import { generateSprite, convertSvgToSymbol } from "../utils/index.js";
 import { getActiveConfig } from "../factory.js";
 const DEF_OPTIONS = {
   document
@@ -18,12 +18,12 @@ const setSVG = (val, key) => {
 const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = 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 = getActiveConfig();
-  if (CONFIG.useIconSprite && !CONFIG.semantic_icons?.[key]) {
+  if (CONFIG.useIconSprite && !CONFIG.semanticIcons?.[key]) {
     return setSVG(val, key);
   }
   return val;
@@ -31,7 +31,7 @@ const setSvgIcon = (val, key) => {
 const appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = 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 }) => {
@@ -46,6 +46,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 = getActiveConfig();
   const doc = options.document || document;
@@ -58,8 +76,11 @@ const appendSVG = (lib, options = DEF_OPTIONS) => {
   const exists = doc.querySelector("#svgSprite");
   const SVGsprite = 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 });
@@ -67,7 +88,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);