@symbo.ls/scratch 3.5.0 → 3.6.1

package/dist/esm/utils/font.js

@@ -1,3 +1,14 @@
+const resolveFileUrl = (url, files) => {
+  if (!url || !files) return null;
+  try {
+    new URL(url);
+    return null;
+  } catch (e) {
+  }
+  const file = files[url];
+  if (file) return file.content && file.content.src;
+  return null;
+};
 const getDefaultOrFirstKey = (LIBRARY, key) => {
   if (LIBRARY[key]) return LIBRARY[key].value;
   if (LIBRARY.default) return LIBRARY[LIBRARY.default].value;
@@ -25,34 +36,37 @@ const setCustomFont = (name, url, weight, options = {}) => {
 };
 const setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
-const getFontFaceEach = (name, weights) => {
+const getFontFaceEach = (name, weights, files) => {
   const keys = Object.keys(weights);
   return keys.map((key) => {
     const { url, fontWeight } = weights[key];
-    return setCustomFont(name, url, fontWeight);
+    const resolvedUrl = resolveFileUrl(url, files) || url;
+    return setCustomFont(name, resolvedUrl, fontWeight);
   });
 };
 const getFontFace = (LIBRARY) => {
   const keys = Object.keys(LIBRARY);
   return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
 };
-const getFontFaceEachString = (name, weights) => {
+const getFontFaceEachString = (name, weights, files) => {
   if (weights && weights.isVariable) {
-    if (isGoogleFontsUrl(weights.url)) {
-      return setFontImport(weights.url);
+    const url2 = resolveFileUrl(weights.url, files) || weights.url;
+    if (isGoogleFontsUrl(url2)) {
+      return setFontImport(url2);
     }
-    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+    return setCustomFontMedia(name, url2, weights.fontWeight, {
       fontStretch: weights.fontStretch,
       fontDisplay: weights.fontDisplay || "swap"
     });
   }
   const isArr = weights[0];
-  if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
-  return setCustomFontMedia(name, weights.url);
+  if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia);
+  const url = resolveFileUrl(weights.url, files) || weights.url;
+  return setCustomFontMedia(name, url);
 };
-const getFontFaceString = (LIBRARY) => {
+const getFontFaceString = (LIBRARY, files) => {
   const keys = Object.keys(LIBRARY);
-  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
+  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value, files));
 };
 export {
   getDefaultOrFirstKey,
@@ -62,6 +76,7 @@ export {
   getFontFaceString,
   getFontFormat,
   isGoogleFontsUrl,
+  resolveFileUrl,
   setCustomFont,
   setCustomFontMedia,
   setFontImport,

package/dist/iife/index.js

@@ -27,6 +27,7 @@ var SmblsScratch = (() => {
     CLASS: () => CLASS,
     COLOR: () => COLOR,
     CONFIG: () => CONFIG,
+    CSS_MEDIA_VARS: () => CSS_MEDIA_VARS,
     CSS_NATIVE_COLOR_REGEX: () => CSS_NATIVE_COLOR_REGEX,
     CSS_UNITS: () => CSS_UNITS,
     CSS_VARS: () => CSS_VARS,
@@ -117,6 +118,7 @@ var SmblsScratch = (() => {
     opacify: () => opacify,
     parseColorToken: () => parseColorToken,
     resolveColorsInGradient: () => resolveColorsInGradient,
+    resolveFileUrl: () => resolveFileUrl,
     returnSubThemeOrDefault: () => returnSubThemeOrDefault,
     rgbArrayToHex: () => rgbArrayToHex,
     rgbToHSL: () => rgbToHSL,
@@ -205,6 +207,7 @@ var SmblsScratch = (() => {
     numToLetterMap: () => numToLetterMap,
     opacify: () => opacify,
     parseColorToken: () => parseColorToken,
+    resolveFileUrl: () => resolveFileUrl,
     returnSubThemeOrDefault: () => returnSubThemeOrDefault,
     rgbArrayToHex: () => rgbArrayToHex,
     rgbToHSL: () => rgbToHSL,
@@ -282,7 +285,7 @@ var SmblsScratch = (() => {
 
   // ../utils/dist/esm/node.js
   var isDOMNode = (obj) => {
-    return typeof window2 !== "undefined" && (obj instanceof window2.Node || obj instanceof window2.Window || obj === window2 || obj === document);
+    return typeof window2 !== "undefined" && (window2.Node && obj instanceof window2.Node || window2.Window && obj instanceof window2.Window || obj === window2 || obj === document);
   };
 
   // ../utils/dist/esm/types.js
@@ -693,6 +696,17 @@ var SmblsScratch = (() => {
   };
 
   // src/utils/font.js
+  var resolveFileUrl = (url, files) => {
+    if (!url || !files) return null;
+    try {
+      new URL(url);
+      return null;
+    } catch (e) {
+    }
+    const file = files[url];
+    if (file) return file.content && file.content.src;
+    return null;
+  };
   var getDefaultOrFirstKey = (LIBRARY, key) => {
     if (LIBRARY[key]) return LIBRARY[key].value;
     if (LIBRARY.default) return LIBRARY[LIBRARY.default].value;
@@ -720,34 +734,37 @@ var SmblsScratch = (() => {
   };
   var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
-  var getFontFaceEach = (name, weights) => {
+  var getFontFaceEach = (name, weights, files) => {
     const keys = Object.keys(weights);
     return keys.map((key) => {
       const { url, fontWeight } = weights[key];
-      return setCustomFont(name, url, fontWeight);
+      const resolvedUrl = resolveFileUrl(url, files) || url;
+      return setCustomFont(name, resolvedUrl, fontWeight);
     });
   };
   var getFontFace = (LIBRARY) => {
     const keys = Object.keys(LIBRARY);
     return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
   };
-  var getFontFaceEachString = (name, weights) => {
+  var getFontFaceEachString = (name, weights, files) => {
     if (weights && weights.isVariable) {
-      if (isGoogleFontsUrl(weights.url)) {
-        return setFontImport(weights.url);
+      const url2 = resolveFileUrl(weights.url, files) || weights.url;
+      if (isGoogleFontsUrl(url2)) {
+        return setFontImport(url2);
       }
-      return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+      return setCustomFontMedia(name, url2, weights.fontWeight, {
         fontStretch: weights.fontStretch,
         fontDisplay: weights.fontDisplay || "swap"
       });
     }
     const isArr = weights[0];
-    if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
-    return setCustomFontMedia(name, weights.url);
+    if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia);
+    const url = resolveFileUrl(weights.url, files) || weights.url;
+    return setCustomFontMedia(name, url);
   };
-  var getFontFaceString = (LIBRARY) => {
+  var getFontFaceString = (LIBRARY, files) => {
     const keys = Object.keys(LIBRARY);
-    return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
+    return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value, files));
   };
 
   // ../smbls-utils/dist/esm/index.js
@@ -969,7 +986,8 @@ var SmblsScratch = (() => {
 
   // src/factory.js
   var CSS_VARS = {};
-  var _CONF = void 0 || defaultConfig_exports;
+  var CSS_MEDIA_VARS = {};
+  var _CONF = defaultConfig_exports;
   var _confLower = {};
   for (const key in _CONF) {
     const lower = key.toLowerCase();
@@ -980,7 +998,9 @@ var SmblsScratch = (() => {
     verbose: false,
     useVariable: true,
     useReset: true,
+    globalTheme: "auto",
     CSS_VARS,
+    CSS_MEDIA_VARS,
     ..._confLower
   };
   var cachedConfig = deepClone(CONFIG);
@@ -1743,24 +1763,101 @@ var SmblsScratch = (() => {
     setHelpers(val, value);
     return { var: CSSvar, value, state, media, helpers };
   };
+  var generateAutoVars = (schemes, varPrefix, CONFIG2) => {
+    const { CSS_VARS: CSS_VARS2 } = CONFIG2;
+    if (!CONFIG2.CSS_MEDIA_VARS) CONFIG2.CSS_MEDIA_VARS = {};
+    const MEDIA_VARS = CONFIG2.CSS_MEDIA_VARS;
+    const globalTheme = CONFIG2.globalTheme !== void 0 ? CONFIG2.globalTheme : "auto";
+    const result = {};
+    const allKeys = /* @__PURE__ */ new Set();
+    for (const scheme in schemes) {
+      if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
+    }
+    for (const param of allKeys) {
+      const symb = param.slice(0, 1);
+      const hasObject = Object.values(schemes).some((s) => isObjectLike(s?.[param]));
+      if (symb === "." && hasObject) {
+        const helperName = param.slice(1);
+        const subSchemes = {};
+        for (const scheme in schemes) {
+          if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
+        }
+        result[param] = generateAutoVars(subSchemes, `${varPrefix}-${helperName}`, CONFIG2);
+      } else if (symb === ":" && hasObject) {
+        const pseudoName = param.replace(/^:+/, "");
+        const subSchemes = {};
+        for (const scheme in schemes) {
+          if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
+        }
+        result[param] = generateAutoVars(subSchemes, `${varPrefix}-${pseudoName}`, CONFIG2);
+      } else if (symb !== "@" && symb !== "." && symb !== ":") {
+        const autoVar = `--theme-${varPrefix}-${param}`;
+        if (globalTheme === "auto") {
+          for (const scheme in schemes) {
+            const val = schemes[scheme]?.[param];
+            if (val === void 0) continue;
+            const color = getColor(val, `@${scheme}`);
+            if (color === void 0) continue;
+            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;
+            }
+          }
+        } else {
+          const forced = String(globalTheme).replace(/^'|'$/g, "");
+          const source = schemes[forced]?.[param];
+          if (source !== void 0) {
+            const color = getColor(source, `@${forced}`);
+            if (color !== void 0) CSS_VARS2[autoVar] = color;
+          }
+        }
+        result[param] = `var(${autoVar})`;
+        result[`.${param}`] = { [param]: result[param] };
+      }
+    }
+    if (result.background || result.color || result.backgroundColor) {
+      result[".inversed"] = {
+        color: result.background || result.backgroundColor,
+        background: result.color
+      };
+    }
+    return result;
+  };
   var setMediaTheme = (val, key, suffix, prefers) => {
     const CONFIG2 = getActiveConfig();
     const { CSS_VARS: CSS_VARS2 } = CONFIG2;
     const theme = { value: val };
+    const isTopLevel = !suffix && !prefers;
     if (isObjectLike(val)) {
+      if (isTopLevel && CONFIG2.useVariable) {
+        const schemes = {};
+        for (const param in val) {
+          if (param.startsWith("@") && isObjectLike(val[param])) {
+            schemes[param.slice(1)] = val[param];
+          }
+        }
+        if (Object.keys(schemes).length) {
+          const autoResult = generateAutoVars(schemes, key, CONFIG2);
+          Object.assign(theme, autoResult);
+        }
+      }
       for (const param in val) {
         const symb = param.slice(0, 1);
         const value = val[param];
         if (symb === "@" || symb === ":" || symb === ".") {
           const hasPrefers = symb === "@" && param;
           theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
-        } else {
+        } else if (!isTopLevel) {
           const 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}`;
           if (CONFIG2.useVariable) {
-            CSS_VARS2[CSSVar] = color;
+            if (CONFIG2.useThemeSuffixedVars) CSS_VARS2[CSSVar] = color;
             theme[param] = `var(${CSSVar})`;
           } else {
             theme[param] = color;
@@ -1768,7 +1865,7 @@ var SmblsScratch = (() => {
           theme[`.${param}`] = { [param]: theme[param] };
         }
       }
-      if (theme.background || theme.color || theme.backgroundColor) {
+      if (!theme[".inversed"] && (theme.background || theme.color || theme.backgroundColor)) {
         theme[".inversed"] = {
           color: theme.background || theme.backgroundColor,
           background: theme.color
@@ -1790,9 +1887,7 @@ var SmblsScratch = (() => {
       const symb = param.slice(0, 1);
       if (isObjectLike(val[param])) {
         if (symb === "@") {
-          const query = CONFIG2.MEDIA[param.slice(1)];
-          const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
-          obj[media] = recursiveTheme(val[param]);
+          continue;
         } else if (symb === ":") {
           obj[`&${param}`] = recursiveTheme(val[param]);
         }
@@ -1823,8 +1918,10 @@ var SmblsScratch = (() => {
     }
     const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(" ");
     let themeValue = activeConfig.THEME[themeName];
-    if (themeValue && (themeModifiers || modifier)) {
-      themeValue = findModifier(themeValue, themeModifiers.length ? themeModifiers : modifier);
+    if (themeValue && themeModifiers.length) {
+      themeValue = findModifier(themeValue, themeModifiers);
+    } else if (themeValue && modifier) {
+      themeValue = findModifier(themeValue, modifier);
     }
     const resolvedTheme = recursiveTheme(themeValue);
     return resolvedTheme;
@@ -1832,22 +1929,25 @@ var SmblsScratch = (() => {
 
   // src/system/font.js
   var setFont = (val, key) => {
+    const CONFIG2 = getActiveConfig();
     const CSSvar = `--font-${key}`;
     if (!val || isArray(val) && !val[0]) return;
     let fontFace;
     if (val.isVariable) {
-      if (isGoogleFontsUrl(val.url)) {
-        fontFace = setFontImport(val.url);
+      const url = resolveFileUrl(val.url, CONFIG2.files) || val.url;
+      if (isGoogleFontsUrl(url)) {
+        fontFace = setFontImport(url);
       } else {
-        fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+        fontFace = setCustomFontMedia(key, url, val.fontWeight, {
           fontStretch: val.fontStretch,
           fontDisplay: val.fontDisplay || "swap"
         });
       }
     } else if (val[0]) {
-      fontFace = getFontFaceEach(key, val);
+      fontFace = getFontFaceEach(key, val, CONFIG2.files);
     } else {
-      fontFace = setCustomFontMedia(key, val.url);
+      const url = resolveFileUrl(val.url, CONFIG2.files) || val.url;
+      fontFace = setCustomFontMedia(key, url);
     }
     return { var: CSSvar, value: val, fontFace };
   };
@@ -2237,7 +2337,7 @@ var SmblsScratch = (() => {
         const configReset = RESET2;
         const configTemplates = TYPOGRAPHY2.templates;
         configReset.body = {
-          ...CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {},
+          ...CONFIG2.useDocumentTheme ? getMediaTheme("document") : {},
           ...configTemplates.body
         };
         configReset.h1 = configTemplates.h1;
@@ -2248,7 +2348,7 @@ var SmblsScratch = (() => {
         configReset.h6 = configTemplates.h6;
       }
       const { body, ...templates } = TYPOGRAPHY2.templates;
-      const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {};
+      const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document") : {};
       if (RESET2.html) overwriteDeep(RESET2.html, globalTheme);
       return deepMerge(merge(RESET2, reset), {
         html: {
@@ -2455,7 +2555,7 @@ var SmblsScratch = (() => {
       }
       const shouldScaleBoxSize = props.scaleBoxSize;
       const isBoxSize = checkIfBoxSize(propertyName);
-      if (!shouldScaleBoxSize && isBoxSize) {
+      if (!shouldScaleBoxSize && isBoxSize && !opts.ratio) {
         value = splitSpacedValue(value);
       }
     }
@@ -2545,11 +2645,13 @@ var SmblsScratch = (() => {
       useDefaultConfig,
       SEMANTIC_ICONS: SEMANTIC_ICONS2,
       semantic_icons,
+      files,
       ...config
     } = recivedConfig;
     if (options.newConfig) {
       CONFIG2 = setActiveConfig(options.newConfig);
     }
+    if (files !== void 0) CONFIG2.files = files;
     if (verbose !== void 0) CONFIG2.verbose = verbose;
     if (useVariable !== void 0) CONFIG2.useVariable = useVariable;
     if (useReset !== void 0) CONFIG2.useReset = useReset;
@@ -2558,6 +2660,7 @@ 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 (useDefaultConfig !== void 0) CONFIG2.useDefaultConfig = useDefaultConfig;
     const _semanticIcons = SEMANTIC_ICONS2 || semantic_icons;
     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.5.0",
+  "version": "3.6.1",
   "files": [
     "dist",
     "*.js",
@@ -17,13 +17,13 @@
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "browser": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js"
+      "require": "./dist/cjs/index.js"
     }
   },
   "source": "src/index.js",
-  "publishConfig": {},
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
     "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
@@ -33,8 +33,8 @@
     "prepublish": "npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^3.5.0",
-    "@symbo.ls/smbls-utils": "^3.5.0",
+    "@domql/utils": "^3.6.1",
+    "@symbo.ls/smbls-utils": "^3.6.1",
     "color-contrast-checker": "^1.5.0"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",

package/src/factory.js

@@ -9,9 +9,10 @@ import {
 import * as CONF from './defaultConfig'
 
 export const CSS_VARS = {}
+export const CSS_MEDIA_VARS = {}
 
 // Build CONFIG with lowercase keys as canonical
-const _CONF = CONF.default || CONF
+const _CONF = CONF
 const _confLower = {}
 for (const key in _CONF) {
   const lower = key.toLowerCase()
@@ -24,7 +25,9 @@ export const CONFIG = {
   verbose: false,
   useVariable: true,
   useReset: true,
+  globalTheme: 'auto',
   CSS_VARS,
+  CSS_MEDIA_VARS,
   ..._confLower
 }
 

package/src/set.js

@@ -108,6 +108,7 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     useDefaultConfig,
     SEMANTIC_ICONS,
     semantic_icons,
+    files,
     ...config
   } = recivedConfig
 
@@ -115,6 +116,7 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     CONFIG = setActiveConfig(options.newConfig)
   }
 
+  if (files !== undefined) CONFIG.files = files
   if (verbose !== undefined) CONFIG.verbose = verbose
   if (useVariable !== undefined) CONFIG.useVariable = useVariable
   if (useReset !== undefined) CONFIG.useReset = useReset
@@ -123,6 +125,7 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   if (useIconSprite !== undefined) CONFIG.useIconSprite = useIconSprite
   if (useDocumentTheme !== undefined) CONFIG.useDocumentTheme = useDocumentTheme
   if (globalTheme !== undefined) CONFIG.globalTheme = globalTheme
+  if (recivedConfig.useThemeSuffixedVars !== undefined) CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars
   if (useDefaultConfig !== undefined) CONFIG.useDefaultConfig = useDefaultConfig
   const _semanticIcons = SEMANTIC_ICONS || semantic_icons
   if (_semanticIcons !== undefined) {

package/src/system/font.js

@@ -9,28 +9,32 @@ import {
   getFontFaceEach,
   isGoogleFontsUrl,
   setCustomFontMedia,
-  setFontImport
+  setFontImport,
+  resolveFileUrl
 } from '../utils'
 
 export const setFont = (val, key) => {
+  const CONFIG = getActiveConfig()
   const CSSvar = `--font-${key}`
 
   if (!val || (isArray(val) && !val[0])) return
 
   let fontFace
   if (val.isVariable) {
-    if (isGoogleFontsUrl(val.url)) {
-      fontFace = setFontImport(val.url)
+    const url = resolveFileUrl(val.url, CONFIG.files) || val.url
+    if (isGoogleFontsUrl(url)) {
+      fontFace = setFontImport(url)
     } else {
-      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+      fontFace = setCustomFontMedia(key, url, val.fontWeight, {
         fontStretch: val.fontStretch,
         fontDisplay: val.fontDisplay || 'swap'
       })
     }
   } else if (val[0]) {
-    fontFace = getFontFaceEach(key, val)
+    fontFace = getFontFaceEach(key, val, CONFIG.files)
   } else {
-    fontFace = setCustomFontMedia(key, val.url)
+    const url = resolveFileUrl(val.url, CONFIG.files) || val.url
+    fontFace = setCustomFontMedia(key, url)
   }
 
   return { var: CSSvar, value: val, fontFace }

package/src/system/reset.js

@@ -16,7 +16,7 @@ export const applyReset = (reset = {}) => {
 
       configReset.body = {
         ...(CONFIG.useDocumentTheme
-          ? getMediaTheme('document', `@${CONFIG.globalTheme}`)
+          ? getMediaTheme('document')
           : {}),
         ...configTemplates.body
       }
@@ -30,7 +30,7 @@ export const applyReset = (reset = {}) => {
 
     const { body, ...templates } = TYPOGRAPHY.templates
     const globalTheme = CONFIG.useDocumentTheme
-      ? getMediaTheme('document', `@${CONFIG.globalTheme}`)
+      ? getMediaTheme('document')
       : {}
     if (RESET.html) overwriteDeep(RESET.html, globalTheme)