@symbo.ls/scratch 3.8.8 → 3.14.0

package/README.md

@@ -1,10 +1,10 @@
 # Scratch framework
 
-Scratch is CSS framework and methodology to build web, mobile and TV applications with one code base. 
+Design system factory for Symbols. Receives a configuration and outputs resolved design tokens (colors, themes, fonts, spacing, media queries). In v4, Scratch feeds into the atomic CSS engine (`@symbo.ls/css`) for class generation.
 
 [![npm version](https://badge.fury.io/js/%40rackai%2Fscratch.svg)](https://badge.fury.io/js/%40rackai%2Fscratch)
 
-Recevies a configuration and outputs the system of design related properties. It also applies reset by default and receives a few options:
+Receives a configuration and outputs the system of design related properties. It also applies reset by default and receives a few options:
 
 | option | default | description |
 | --- | --- | --- |

package/dist/cjs/defaultConfig/class.js

@@ -18,8 +18,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var class_exports = {};
 __export(class_exports, {
-  CLASS: () => CLASS
+  class: () => defaultProps
 });
 module.exports = __toCommonJS(class_exports);
 const defaultProps = {};
-const CLASS = defaultProps;

package/dist/cjs/defaultConfig/font-family.js

@@ -18,9 +18,9 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var font_family_exports = {};
 __export(font_family_exports, {
-  font_face: () => font_face,
-  font_family: () => font_family,
-  font_family_types: () => font_family_types
+  fontFace: () => fontFace,
+  fontFamily: () => fontFamily,
+  fontFamilyTypes: () => fontFamilyTypes
 });
 module.exports = __toCommonJS(font_family_exports);
 var defaultFont = {
@@ -29,10 +29,10 @@ var defaultFont = {
   family: "",
   type: ""
 };
-const font_family = {};
-const font_family_types = {
+const fontFamily = {};
+const fontFamilyTypes = {
   "sans-serif": "Helvetica, Arial, sans-serif, --system-default",
   serif: "Times New Roman, Georgia, serif, --system-default",
   monospace: "Courier New, monospace, --system-default"
 };
-const font_face = {};
+const fontFace = {};

package/dist/cjs/defaultConfig/icons.js

@@ -19,8 +19,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var icons_exports = {};
 __export(icons_exports, {
   icons: () => icons,
-  semantic_icons: () => semantic_icons
+  semanticIcons: () => semanticIcons
 });
 module.exports = __toCommonJS(icons_exports);
 const icons = {};
-const semantic_icons = {};
+const semanticIcons = {};

package/dist/cjs/defaultConfig/svg.js

@@ -19,8 +19,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var svg_exports = {};
 __export(svg_exports, {
   svg: () => svg,
-  svg_data: () => svg_data
+  svgData: () => svgData
 });
 module.exports = __toCommonJS(svg_exports);
 const svg = {};
-const svg_data = {};
+const svgData = {};

package/dist/cjs/defaultConfig/timing.js

@@ -21,7 +21,7 @@ __export(timing_exports, {
   timing: () => timing
 });
 module.exports = __toCommonJS(timing_exports);
-var import_sequence = require("./sequence");
+var import_sequence = require("./sequence.js");
 const defaultProps = {
   default: 150,
   base: 150,

package/dist/cjs/factory.js

@@ -29,38 +29,42 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var factory_exports = {};
 __export(factory_exports, {
   CONFIG: () => CONFIG,
-  CSS_MEDIA_VARS: () => CSS_MEDIA_VARS,
-  CSS_VARS: () => CSS_VARS,
   FACTORY: () => FACTORY,
   activateConfig: () => activateConfig,
+  createConfig: () => createConfig,
+  cssMediaVars: () => cssMediaVars,
+  cssVars: () => cssVars,
   getActiveConfig: () => getActiveConfig,
-  setActiveConfig: () => setActiveConfig
+  popConfig: () => popConfig,
+  pushConfig: () => pushConfig,
+  setActiveConfig: () => setActiveConfig,
+  toCamel: () => toCamel
 });
 module.exports = __toCommonJS(factory_exports);
-var import_utils = require("@domql/utils");
-var CONF = __toESM(require("./defaultConfig"), 1);
-const CSS_VARS = {};
-const CSS_MEDIA_VARS = {};
+var import_utils = require("@symbo.ls/utils");
+var CONF = __toESM(require("./defaultConfig/index.js"), 1);
+const cssVars = {};
+const cssMediaVars = {};
 const _CONF = CONF;
 const _confLower = {};
 const toCamel = (s) => s.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
-const toUpper = (s) => s.replace(/([A-Z])/g, "_$1").toUpperCase();
 for (const key in _CONF) {
   const lower = key.toLowerCase();
   _confLower[lower] = _CONF[key];
   const camel = toCamel(lower);
   if (camel !== lower) _confLower[camel] = _CONF[key];
   if (lower !== key) _confLower[key] = _CONF[key];
-  const upper = toUpper(key);
-  if (upper !== key) _confLower[upper] = _CONF[key];
 }
 const CONFIG = {
   verbose: false,
   useVariable: true,
   useReset: true,
   globalTheme: "auto",
-  CSS_VARS,
-  CSS_MEDIA_VARS,
+  cssVars,
+  cssMediaVars,
+  CSS_VARS: cssVars,
+  CSS_MEDIA_VARS: cssMediaVars,
+  _scratchConfig: true,
   ..._confLower
 };
 const cachedConfig = (0, import_utils.deepClone)(CONFIG);
@@ -74,7 +78,15 @@ const activateConfig = (def) => {
   }
   return FACTORY[def || FACTORY.active];
 };
+const configStack = [];
+const pushConfig = (config) => {
+  if (config && config._scratchConfig) configStack.push(config);
+};
+const popConfig = () => {
+  configStack.pop();
+};
 const getActiveConfig = (def) => {
+  if (configStack.length) return configStack[configStack.length - 1];
   return FACTORY[def || FACTORY.active] || CONFIG;
 };
 const setActiveConfig = (newConfig) => {
@@ -83,3 +95,51 @@ const setActiveConfig = (newConfig) => {
   FACTORY["1"] = (0, import_utils.deepMerge)(newConfig, (0, import_utils.deepClone)(cachedConfig));
   return newConfig;
 };
+const APP_FLAGS = [
+  "useReset",
+  "useVariable",
+  "useFontImport",
+  "useIconSprite",
+  "useSvgSprite",
+  "useDocumentTheme",
+  "useDefaultIcons",
+  "useDefaultConfig",
+  "verbose",
+  "globalTheme"
+];
+const ALIAS_GROUPS = [
+  ["fontfamily", "fontFamily", "font_family"],
+  ["fontfamilytypes", "fontFamilyTypes"],
+  ["semanticicons", "semanticIcons"],
+  ["svgdata", "svgData"]
+];
+const aliasCaseVariants = (cfg) => {
+  for (const vs of ALIAS_GROUPS) {
+    let merged;
+    for (const v of vs) {
+      const val = cfg[v];
+      if (!(0, import_utils.isObject)(val)) continue;
+      merged = merged ? (0, import_utils.deepMerge)(val, merged) : val;
+    }
+    if (!merged) continue;
+    for (const v of vs) if ((0, import_utils.isObject)(cfg[v])) cfg[v] = merged;
+  }
+};
+const createConfig = (name, overrides, { cleanBase = false } = {}) => {
+  const activeBase = cleanBase ? null : getActiveConfig();
+  const base = (0, import_utils.deepClone)(
+    !cleanBase && activeBase && activeBase._scratchConfig ? activeBase : cachedConfig
+  );
+  for (const flag of APP_FLAGS) {
+    delete base[flag];
+  }
+  const cfg = (0, import_utils.deepMerge)(overrides || {}, base);
+  cfg.cssVars = {};
+  cfg.cssMediaVars = {};
+  cfg.CSS_VARS = cfg.cssVars;
+  cfg.CSS_MEDIA_VARS = cfg.cssMediaVars;
+  cfg._scratchConfig = true;
+  aliasCaseVariants(cfg);
+  if (name) FACTORY[name] = cfg;
+  return cfg;
+};

package/dist/cjs/index.js

@@ -29,15 +29,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
+  scratchDefaultConfig: () => scratchDefaultConfig,
   scratchSystem: () => scratchSystem,
   scratchUtils: () => scratchUtils
 });
 module.exports = __toCommonJS(index_exports);
 var scratchUtils = __toESM(require("./utils/index.js"), 1);
 var scratchSystem = __toESM(require("./system/index.js"), 1);
+var scratchDefaultConfig = __toESM(require("./defaultConfig/index.js"), 1);
 __reExport(index_exports, require("./factory.js"), module.exports);
-__reExport(index_exports, require("./defaultConfig"), module.exports);
-__reExport(index_exports, require("./system"), module.exports);
-__reExport(index_exports, require("./utils"), module.exports);
-__reExport(index_exports, require("./transforms"), module.exports);
+__reExport(index_exports, require("./defaultConfig/index.js"), module.exports);
+__reExport(index_exports, require("./system/index.js"), module.exports);
+__reExport(index_exports, require("./utils/index.js"), module.exports);
+__reExport(index_exports, require("./transforms/index.js"), module.exports);
 __reExport(index_exports, require("./set.js"), module.exports);

package/dist/cjs/set.js

@@ -26,13 +26,13 @@ __export(set_exports, {
 });
 module.exports = __toCommonJS(set_exports);
 var import_factory = require("./factory.js");
-var import_system = require("./system");
-var import_utils = require("@domql/utils");
+var import_system = require("./system/index.js");
+var import_utils = require("@symbo.ls/utils");
 const setVars = (val, key) => {
   const CONFIG = (0, import_factory.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;
@@ -40,14 +40,14 @@ const VALUE_TRANSFORMERS = {
   color: import_system.setColor,
   gradient: import_system.setGradient,
   font: import_system.setFont,
-  font_family: import_system.setFontFamily,
+  fontFamily: import_system.setFontFamily,
   fontfamily: import_system.setFontFamily,
   theme: import_system.setTheme,
   icons: import_system.setSvgIcon,
-  semantic_icons: asIs,
+  semanticIcons: asIs,
   semanticicons: asIs,
   svg: import_system.setSVG,
-  svg_data: asIs,
+  svgData: asIs,
   typography: asIs,
   shadow: import_system.setShadow,
   spacing: asIs,
@@ -62,12 +62,14 @@ const VALUE_TRANSFORMERS = {
 };
 const setValue = (factoryName, value, key) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  const lowerName = factoryName.toLowerCase();
-  const FACTORY2 = CONFIG[lowerName] || CONFIG[factoryName];
-  if (VALUE_TRANSFORMERS[lowerName]) {
+  const camelName = (0, import_factory.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)
@@ -80,7 +82,11 @@ const setValue = (factoryName, value, key) => {
 const setEach = (factoryName, props) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
   const lowerName = factoryName.toLowerCase();
-  const keys = Object.keys(props);
+  const keys = Object.keys(props).sort((a, b) => {
+    const aComposite = (0, import_utils.isObject)(props[a]) || (0, import_utils.isArray)(props[a]) ? 1 : 0;
+    const bComposite = (0, import_utils.isObject)(props[b]) || (0, import_utils.isArray)(props[b]) ? 1 : 0;
+    return aComposite - bComposite;
+  });
   keys.forEach((key) => {
     try {
       return setValue(lowerName, props[key], key);
@@ -98,33 +104,59 @@ const setEach = (factoryName, props) => {
   });
   return CONFIG[lowerName] || CONFIG[factoryName];
 };
-const changeGlobalTheme = (newTheme) => {
-  const CONFIG = (0, import_factory.getActiveConfig)();
+const changeGlobalTheme = (newTheme, targetConfig) => {
+  const CONFIG = targetConfig || (0, import_factory.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;
           }
@@ -137,7 +169,7 @@ const changeGlobalTheme = (newTheme) => {
 };
 const SET_OPTIONS = {};
 const set = (recivedConfig, options = SET_OPTIONS) => {
-  let CONFIG = (0, import_factory.getActiveConfig)();
+  let CONFIG = options.config || (0, import_factory.getActiveConfig)();
   const {
     version,
     verbose,
@@ -147,19 +179,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 = (0, import_factory.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;
@@ -168,20 +200,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) => {
@@ -190,29 +248,31 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
       (0, import_utils.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 {
       (0, import_system.applyTypographySequence)();
     } catch (e) {
       if (CONFIG.verbose) console.warn("Error applying typography sequence", e);
     }
   }
-  if (config.spacing || config.SPACING) {
+  if (config.spacing) {
     try {
       (0, import_system.applySpacingSequence)();
     } catch (e) {
       if (CONFIG.verbose) console.warn("Error applying spacing sequence", e);
     }
   }
-  if (config.timing || config.TIMING) {
+  if (config.timing) {
     try {
       (0, import_system.applyTimingSequence)();
     } catch (e) {
@@ -220,6 +280,7 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     }
   }
   (0, import_system.applyDocument)();
-  (0, import_system.applyReset)();
+  const computedReset = (0, import_system.applyReset)();
+  if (computedReset) CONFIG.reset = computedReset;
   return CONFIG;
 };

package/dist/cjs/system/color.js

@@ -24,9 +24,9 @@ __export(color_exports, {
   setGradient: () => setGradient
 });
 module.exports = __toCommonJS(color_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 getColor = (value, key, config) => {
   const CONFIG = config || (0, import_factory.getActiveConfig)();
   if (!(0, import_utils.isString)(value)) {
@@ -98,11 +98,14 @@ const getMediaColor = (value, globalTheme, config) => {
   const isObj = (0, import_utils.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);
       }
@@ -120,7 +123,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 && ((0, import_utils.isString)(refColor) || (0, import_utils.isArray)(refColor) || (0, import_utils.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";
@@ -151,10 +158,7 @@ const setColor = (val, key, suffix) => {
     }
   }
   if ((0, import_utils.isArray)(val)) {
-    return {
-      "@light": setColor(val[0], key, "light"),
-      "@dark": setColor(val[1], key, "dark")
-    };
+    val = { "@light": val[0], "@dark": val[1] };
   }
   if ((0, import_utils.isObject)(val)) {
     const obj = {};
@@ -165,16 +169,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 = (0, import_utils2.colorStringToRgbaArray)(val.value || val);
+  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
+  const CSSVar = `--${vp}color-${key}` + (suffix ? `-${suffix}` : "");
+  let resolvedVal = val.value || val;
+  if ((0, import_utils.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 ((0, import_utils.isString)(resolvedVal) && !resolvedVal.includes("(") && !resolvedVal.startsWith("#")) {
+    const parsed = (0, import_utils2.parseColorToken)(resolvedVal);
+    if (parsed && parsed.name && !parsed.passthrough && !parsed.cssVar) {
+      const refColor = CONFIG.color[parsed.name];
+      if (refColor && !refColor.value && !refColor.rgb && ((0, import_utils.isString)(refColor) || (0, import_utils.isArray)(refColor) || (0, import_utils.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 = (0, import_utils2.getRgbTone)(rgb2, parsed.tone);
+        const alphaVal = parsed.alpha ? parseFloat(parsed.alpha) : 1;
+        resolvedVal = `rgba(${rgb2}, ${alphaVal})`;
+      }
+    }
+  }
+  const colorArr = (0, import_utils2.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,
@@ -197,9 +256,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/cjs/system/document.js

@@ -21,12 +21,12 @@ __export(document_exports, {
   applyDocument: () => applyDocument
 });
 module.exports = __toCommonJS(document_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 applyDocument = () => {
   const CONFIG = (0, import_factory.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 (0, import_utils.merge)(DOCUMENT, {
     theme: THEME.document,
     fontFamily: (0, import_utils2.getDefaultOrFirstKey)(FONT_FAMILY),