@symbo.ls/scratch 3.8.8 → 3.14.0

package/dist/esm/system/theme.js

@@ -1,4 +1,4 @@
-import { getColor } from "./color";
+import { getColor } from "./color.js";
 import { getActiveConfig } from "../factory.js";
 import { isCSSVar } from "../utils/color.js";
 import {
@@ -6,7 +6,7 @@ import {
   isString,
   isObjectLike,
   isArray
-} from "@domql/utils";
+} from "@symbo.ls/utils";
 const CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
   "black",
   "white",
@@ -164,6 +164,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;
@@ -265,7 +272,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);
@@ -278,9 +286,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();
@@ -288,19 +296,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 = getColor(val, `@${scheme}`);
-        if (color === void 0) continue;
-        if (isString(color) && /^[a-z][a-zA-Z]+$/.test(color) && !CSS_NAMED_COLORS.has(color)) {
-          brokenSchemes.add(scheme);
-        }
+  for (const param of allKeys) {
+    const symb = param.slice(0, 1);
+    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 = getColor(val, `@${scheme}`);
+      if (color === void 0) continue;
+      if (isString(color) && /^[a-z][a-zA-Z]+$/.test(color) && !CSS_NAMED_COLORS.has(color)) {
+        brokenSchemes.add(scheme);
       }
     }
   }
@@ -322,38 +329,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 = 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 = 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 = 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] };
     }
@@ -368,7 +368,7 @@ const generateAutoVars = (schemes, varPrefix, CONFIG) => {
 };
 const setMediaTheme = (val, key, suffix, prefers) => {
   const CONFIG = getActiveConfig();
-  const { CSS_VARS } = CONFIG;
+  const { cssVars: CSS_VARS } = CONFIG;
   const theme = { value: val };
   const isTopLevel = !suffix && !prefers;
   if (isObjectLike(val)) {
@@ -394,7 +394,8 @@ const setMediaTheme = (val, key, suffix, prefers) => {
         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}`;
+        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/esm/system/timing.js

@@ -1,10 +1,10 @@
-import { toCamelCase } from "@symbo.ls/smbls-utils";
+import { toCamelCase } from "@symbo.ls/utils";
 import { getActiveConfig } from "../factory.js";
 import {
   applySequenceVars,
   generateSequence,
   getSequenceValuePropertyPair
-} from "../utils";
+} from "../utils/index.js";
 const applyTimingSequence = () => {
   const CONFIG = getActiveConfig();
   const { timing: TIMING } = CONFIG;

package/dist/esm/system/typography.js

@@ -1,4 +1,4 @@
-import { merge } from "@domql/utils";
+import { merge } from "@symbo.ls/utils";
 import { getActiveConfig } from "../factory.js";
 import {
   applyMediaSequenceVars,
@@ -6,7 +6,7 @@ import {
   findHeadings,
   generateSequence,
   getSequenceValuePropertyPair
-} from "../utils";
+} from "../utils/index.js";
 const runThroughMedia = (FACTORY) => {
   const CONFIG = getActiveConfig();
   const { typography: TYPOGRAPHY, media: MEDIA } = CONFIG;
@@ -26,12 +26,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) {
+      merge(mediaValue, {
+        sequence: {},
+        scales: {},
+        vars: {}
+      });
+      generateSequence(mediaValue);
       applyMediaSequenceVars(FACTORY, prop);
       continue;
     }

package/dist/esm/transforms/index.js

@@ -1,5 +1,5 @@
-import { isString, isObject, exec } from "@domql/utils";
-import { getActiveConfig } from "../factory";
+import { isString, isObject, exec } from "@symbo.ls/utils";
+import { getActiveConfig } from "../factory.js";
 import {
   getSpacingByKey,
   getColor,
@@ -10,7 +10,7 @@ import {
   getSpacingBasedOnRatio,
   checkIfBoxSize,
   splitSpacedValue
-} from "../system";
+} from "../system/index.js";
 import {
   getFnPrefixAndValue,
   isResolvedColor,
@@ -18,7 +18,7 @@ import {
   CSS_NATIVE_COLOR_REGEX,
   splitTopLevelCommas,
   parseColorToken
-} from "../utils";
+} from "../utils/index.js";
 const BORDER_STYLES = /* @__PURE__ */ new Set([
   "none",
   "hidden",

package/dist/esm/utils/color.js

@@ -4,7 +4,7 @@ import {
   isString,
   isNumber,
   isNotProduction
-} from "@domql/utils";
+} from "@symbo.ls/utils";
 const colorStringToRgbaArray = (color) => {
   if (color === "") return [0, 0, 0, 0];
   if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];

package/dist/esm/utils/font.js

@@ -16,6 +16,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;
@@ -24,7 +25,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}')` : "";

package/dist/esm/utils/sequence.js

@@ -1,5 +1,5 @@
-import { isString } from "@domql/utils";
-import { toDashCase } from "@symbo.ls/smbls-utils";
+import { isString } from "@symbo.ls/utils";
+import { toDashCase } from "@symbo.ls/utils";
 import { getActiveConfig } from "../factory.js";
 import { CSS_UNITS, isScalingUnit } from "./unit.js";
 import { isCSSVar } from "./color.js";
@@ -43,7 +43,8 @@ const setSequenceValue = (props, sequenceProps) => {
     variable
   };
   sequenceProps.scales[key] = scaling;
-  sequenceProps.vars[variable] = scaling + sequenceProps.unit;
+  const varUnit = VIEWPORT_UNITS.has(sequenceProps.unit) ? "rem" : sequenceProps.unit;
+  sequenceProps.vars[variable] = scaling + varUnit;
 };
 const getFnPrefixAndValue = (val) => {
   if (!val.includes("(")) return val;
@@ -51,11 +52,14 @@ const getFnPrefixAndValue = (val) => {
   const value = val.slice(val.indexOf("(") + 1, val.lastIndexOf(")"));
   return [prefix, value];
 };
+const VIEWPORT_UNITS = /* @__PURE__ */ new Set(["vw", "vh", "vmin", "vmax", "svw", "svh", "lvw", "lvh", "dvw", "dvh"]);
 const setScalingVar = (key, sequenceProps) => {
-  const { base, type, unit } = sequenceProps;
+  const { base, type, unit: rawUnit } = sequenceProps;
+  const unit = VIEWPORT_UNITS.has(rawUnit) ? "rem" : rawUnit;
   const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
   if (key === 0) return defaultVal;
-  const prefix = "--" + (type && type.replace(".", "-"));
+  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
+  const prefix = "--" + vp + (type && type.replace(".", "-"));
   const ratioVar = `${prefix}-ratio`;
   if (key > 0) {
     const prevLetterKey = numToLetterMap[key - 1];
@@ -63,6 +67,12 @@ const setScalingVar = (key, sequenceProps) => {
   }
   if (key < 0) {
     const nextLetterKey = numToLetterMap[key + 1];
+    const absKey = Math.abs(key);
+    const phiPow = Math.pow(PHI, 2 * absKey);
+    const prevAscKey = numToLetterMap[absKey];
+    if (prevAscKey) {
+      return `max(calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar})), calc(var(${prefix}-${prevAscKey}) / ${phiPow.toFixed(4)}))`;
+    }
     return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`;
   }
 };
@@ -70,7 +80,8 @@ const setSubScalingVar = (index, arr, variable, sequenceProps) => {
   const { type } = sequenceProps;
   const skipMiddle = index === 2 && arr.length === 2;
   const indexMapWithLength = skipMiddle ? index + 1 : index;
-  const prefix = "--" + (type && type.replace(".", "-"));
+  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
+  const prefix = "--" + vp + (type && type.replace(".", "-"));
   const subRatioVarPrefix = `${prefix}-sub-ratio-`;
   return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`;
 };
@@ -114,13 +125,19 @@ const generateSubSequence = (props, sequenceProps) => {
     setSequenceValue(props2, sequenceProps);
   });
 };
+const PHI = 1.618;
 const switchSequenceOnNegative = (key, base, ratio) => {
-  return base * Math.pow(ratio, key);
+  if (key >= 0) return base * Math.pow(ratio, key);
+  const absKey = Math.abs(key);
+  const current = base * Math.pow(ratio, key);
+  const normalized = base * Math.pow(ratio, absKey) / Math.pow(PHI, 2 * absKey);
+  return Math.max(current, normalized);
 };
 const generateSequence = (sequenceProps) => {
   const { type, base, ratio, range, subSequence } = sequenceProps;
   const n = Math.abs(range[0]) + Math.abs(range[1]);
-  const prefix = "--" + (type && type.replace(".", "-")) + "-";
+  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
+  const prefix = "--" + vp + (type && type.replace(".", "-")) + "-";
   for (let i = 0; i <= n; i++) {
     const key = range[1] - i;
     const letterKey = numToLetterMap[key];
@@ -161,7 +178,8 @@ const generateSequencePosition = (sequenceProps, position = 0) => {
   };
   const value = base * Math.pow(ratio, index);
   const scaling = ~~(value / base * 100) / 100;
-  const prefix = "--" + (type && type.replace(".", "-")) + "-";
+  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
+  const prefix = "--" + vp + (type && type.replace(".", "-")) + "-";
   const variable = prefix + letterKey;
   const scalingVariable = setScalingVar(index, sequenceProps);
   const props = {
@@ -202,7 +220,8 @@ const getSequenceValue = (value = "A", sequenceProps) => {
     "revert-layer"
   ];
   if (skipArr.includes(value)) return value;
-  const prefix = `--${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
+  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
+  const prefix = `--${vp}${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
   const letterVal = value.toUpperCase();
   const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
   let absValue = isNegative ? letterVal.slice(1) : letterVal;
@@ -249,12 +268,12 @@ const getSequenceValueBySymbols = (value, sequenceProps) => {
     (v) => value.includes(v + " ")
   );
   if (!mathArr.length) return value;
-  return mathArr.map((symbol) => {
-    const valuesArr = value.split(symbol + " ").map((v) => v.trim());
-    const transformedValues = valuesArr.map((v) => {
-      return getSequenceValue(v, sequenceProps);
-    });
-    return transformedValues.join(" " + symbol + " ");
+  const symbolRegex = /(\s*[+\-*/,]\s*)/;
+  const tokens = value.split(symbolRegex);
+  return tokens.map((token) => {
+    const trimmed = token.trim();
+    if (!trimmed || ["+", "-", "*", "/", ","].includes(trimmed)) return token;
+    return getSequenceValue(trimmed, sequenceProps);
   }).join("");
 };
 const getSequenceValuePropertyPair = (value, propertyName, sequenceProps, fnPrefix) => {

package/dist/esm/utils/sprite.js

@@ -1,12 +1,12 @@
-import { isArray, isNotProduction, isString } from "@domql/utils";
-import { getActiveConfig } from "../factory";
+import { isArray, isNotProduction, isString } from "@symbo.ls/utils";
+import { getActiveConfig } from "../factory.js";
 const isDev = isNotProduction();
 const generateSprite = (icons) => {
   const CONFIG = getActiveConfig();
   let sprite = "";
   for (const key in icons) {
-    if (CONFIG.__svg_cache[key]) continue;
-    else CONFIG.__svg_cache[key] = true;
+    if (CONFIG.__svgCache[key]) continue;
+    else CONFIG.__svgCache[key] = true;
     sprite += icons[key];
   }
   return sprite;
@@ -57,8 +57,15 @@ const convertSvgToSymbol = (key, code) => {
   symbol = symbol.replace(/width="[^"]*"/, "");
   symbol = symbol.replace(/height="[^"]*"/, "");
   symbol = symbol.replace("</svg", "</symbol");
+  symbol = expandSvgSelfClosing(symbol);
   return symbol;
 };
+const SVG_VOID_TAGS = "line|circle|ellipse|rect|polyline|polygon|path|stop|use|image";
+const SVG_SELF_CLOSING_RE = new RegExp(
+  `<(${SVG_VOID_TAGS})\\b([^>]*?)\\s*/>`,
+  "g"
+);
+const expandSvgSelfClosing = (str) => str.replace(SVG_SELF_CLOSING_RE, "<$1$2></$1>");
 export {
   convertSvgToSymbol,
   generateSprite

package/dist/esm/utils/var.js

@@ -1,10 +1,10 @@
-import { isObjectLike } from "@domql/utils";
+import { isObjectLike } from "@symbo.ls/utils";
 import { getActiveConfig } from "../factory.js";
 import { getSubratio } from "./sequence.js";
 import { isScalingUnit } from "./unit.js";
 const setVariables = (result, key) => {
   const CONFIG = getActiveConfig();
-  const { CSS_VARS } = CONFIG;
+  const { cssVars: CSS_VARS } = CONFIG;
   if (isObjectLike(result.value)) {
   } else {
     CSS_VARS[result.var] = result.value;
@@ -15,7 +15,8 @@ const applySequenceGlobalVars = (vars, obj, options) => {
   const { unit: UNIT } = CONFIG;
   const unit = obj.unit || UNIT.default;
   const { base, ratio, type } = obj;
-  const prefix = "--" + (type && type.replace(".", "-"));
+  const vp = obj.varPrefix ? obj.varPrefix + "-" : "";
+  const prefix = "--" + vp + (type && type.replace(".", "-"));
   vars[`${prefix}-base`] = base;
   vars[`${prefix}-unit`] = unit;
   const ratioVar = `${prefix}-ratio`;
@@ -25,10 +26,12 @@ const applySequenceGlobalVars = (vars, obj, options) => {
   vars[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
   vars[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
 };
+const VIEWPORT_UNITS = /* @__PURE__ */ new Set(["vw", "vh", "vmin", "vmax", "svw", "svh", "lvw", "lvh", "dvw", "dvh"]);
 const applySequenceVars = (FACTORY, options = {}) => {
   const CONFIG = getActiveConfig();
-  const { unit: UNIT, timing: TIMING, CSS_VARS } = CONFIG;
-  const unit = FACTORY.unit || UNIT.default;
+  const { unit: UNIT, timing: TIMING, cssVars: CSS_VARS } = CONFIG;
+  const rawUnit = FACTORY.unit || UNIT.default;
+  const unit = VIEWPORT_UNITS.has(rawUnit) ? "rem" : rawUnit;
   const { mediaRegenerate, sequence, scales } = FACTORY;
   if (!mediaRegenerate) {
     applySequenceGlobalVars(CSS_VARS, FACTORY, options);
@@ -51,17 +54,28 @@ const applySequenceVars = (FACTORY, options = {}) => {
 };
 const applyMediaSequenceVars = (FACTORY, media, options = {}) => {
   const CONFIG = getActiveConfig();
-  const { unit: UNIT, media: MEDIA, CSS_VARS } = CONFIG;
+  const { unit: UNIT, media: MEDIA, cssVars: CSS_VARS } = CONFIG;
   const mediaName = media.slice(1);
-  const unit = FACTORY.unit || UNIT.default;
+  const mediaConfig = FACTORY[media];
+  const rawMediaUnit = mediaConfig.unit || FACTORY.unit || UNIT.default;
+  const unit = VIEWPORT_UNITS.has(rawMediaUnit) ? "rem" : rawMediaUnit;
   const { mediaRegenerate } = FACTORY;
-  const { sequence, scales } = FACTORY[media];
+  const { sequence, scales } = mediaConfig;
   const query = MEDIA[mediaName];
   if (!query && CONFIG.verbose) console.warn("Can't find media query ", query);
   if (!mediaRegenerate) {
     let underMediaQuery = CSS_VARS[`@media ${query}`];
     if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {};
-    applySequenceGlobalVars(underMediaQuery, FACTORY[media], options);
+    applySequenceGlobalVars(underMediaQuery, mediaConfig, options);
+    const parentUnit = FACTORY.unit || UNIT.default;
+    if (unit !== parentUnit && sequence) {
+      for (const key in sequence) {
+        const item = sequence[key];
+        const value = scales[key] + unit;
+        underMediaQuery[item.variable + "_default"] = value;
+        underMediaQuery[item.variable] = value;
+      }
+    }
     return;
   }
   for (const key in sequence) {