@symbo.ls/scratch 2.11.225 → 2.11.227

package/dist/cjs/utils/index.js

@@ -1346,6 +1346,8 @@ var require_cjs2 = __commonJS({
 // src/utils/index.js
 var utils_exports = {};
 __export(utils_exports, {
+  applyGlobalVars: () => applyGlobalVars,
+  applyMediaSequenceVars: () => applyMediaSequenceVars,
   applySequenceVars: () => applySequenceVars,
   changeLightness: () => changeLightness,
   colorStringToRgbaArray: () => colorStringToRgbaArray,
@@ -1365,6 +1367,8 @@ __export(utils_exports, {
   getRgbTone: () => getRgbTone,
   getSequenceValue: () => getSequenceValue,
   getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
+  getSubratio: () => getSubratio,
+  getSubratioDifference: () => getSubratioDifference,
   hexToRgb: () => hexToRgb,
   hexToRgbArray: () => hexToRgbArray,
   hexToRgba: () => hexToRgba,
@@ -1381,6 +1385,8 @@ __export(utils_exports, {
   setCustomFont: () => setCustomFont,
   setCustomFontMedia: () => setCustomFontMedia,
   setInCustomFontMedia: () => setInCustomFontMedia,
+  setScalingVar: () => setScalingVar,
+  setSubScalingVar: () => setSubScalingVar,
   setVariables: () => setVariables
 });
 module.exports = __toCommonJS(utils_exports);
@@ -1674,6 +1680,7 @@ var defaultProps = {
   h1Matches: 6,
   lineHeight: 1.5,
   subSequence: true,
+  mediaRegenerate: false,
   unit: "em",
   templates: {},
   sequence: {},
@@ -1729,6 +1736,7 @@ var defaultProps2 = {
   ratio: SEQUENCE.phi,
   range: [-5, 15],
   subSequence: true,
+  mediaRegenerate: false,
   unit: "em",
   sequence: {},
   scales: {},
@@ -1756,6 +1764,7 @@ var defaultProps3 = {
   type: "timing",
   ratio: SEQUENCE["perfect-fourth"],
   range: [-3, 12],
+  mediaRegenerate: false,
   unit: "ms",
   sequence: {},
   scales: {},
@@ -1856,45 +1865,77 @@ var numToLetterMap = {
   19: "T"
 };
 var setSequenceValue = (props, sequenceProps) => {
-  const { key, variable, value, scaling, index } = props;
+  const { key, variable, value, scaling, index, scalingVariable } = props;
   sequenceProps.sequence[key] = {
     key,
     decimal: ~~(value * 100) / 100,
     val: ~~value,
     scaling,
     index,
+    scalingVariable,
     variable
   };
   sequenceProps.scales[key] = scaling;
   sequenceProps.vars[variable] = scaling + sequenceProps.unit;
 };
+var setScalingVar = (key, sequenceProps) => {
+  const { type } = sequenceProps;
+  if (key === 0)
+    return "1em";
+  const prefix = "--" + (type && type.replace(".", "-"));
+  const ratioVar = `${prefix}-ratio`;
+  if (key > 0) {
+    const prevLetterKey = numToLetterMap[key - 1];
+    return `calc(var(${prefix}-${prevLetterKey}) * var(${ratioVar}))`;
+  }
+  if (key < 0) {
+    const nextLetterKey = numToLetterMap[key + 1];
+    return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`;
+  }
+};
+var 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 subRatioVarPrefix = `${prefix}-sub-ratio-`;
+  return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`;
+};
+var getSubratioDifference = (base, ratio) => {
+  const diff = base * ratio - base;
+  const subRatio = diff / 1.618;
+  const first = base * ratio - subRatio;
+  const second = base + subRatio;
+  const middle = (first + second) / 2;
+  return [first, middle, second];
+};
+var getSubratio = (base, ratio) => {
+  return getSubratioDifference(base, ratio).map((v) => v / base);
+};
 var generateSubSequence = (props, sequenceProps) => {
   const { key, base, value, ratio, variable, index } = props;
   const next = value * ratio;
-  const diff = next - value;
-  const smallscale = diff / 1.618;
-  const valueRounded = ~~value;
-  const nextRounded = ~~next;
-  const diffRounded = nextRounded - valueRounded;
-  let arr = [];
-  const first = next - smallscale;
-  const second = value + smallscale;
-  const middle = (first + second) / 2;
+  const diffRounded = ~~next - ~~value;
+  let arr;
+  const [first, middle, second] = getSubratioDifference(value, ratio);
   if (diffRounded > 16)
     arr = [first, middle, second];
   else
     arr = [first, second];
-  arr.map((v, k) => {
+  arr.forEach((v, k) => {
     const scaling = ~~(v / base * 1e3) / 1e3;
     const newVar = variable + (k + 1);
+    const newIndex = index + (k + 1) / 10;
+    const scalingVariable = setSubScalingVar(k + 1, arr, variable, sequenceProps);
     const props2 = {
       key: key + (k + 1),
       variable: newVar,
       value: v,
       scaling,
-      index: index + (k + 1) / 10
+      scalingVariable,
+      index: newIndex
     };
-    return setSequenceValue(props2, sequenceProps);
+    setSequenceValue(props2, sequenceProps);
   });
 };
 var switchSequenceOnNegative = (key, base, ratio) => {
@@ -1910,12 +1951,14 @@ var generateSequence = (sequenceProps) => {
     const value = switchSequenceOnNegative(key, base, ratio);
     const scaling = ~~(value / base * 100) / 100;
     const variable = prefix + letterKey;
+    const scalingVariable = setScalingVar(key, sequenceProps);
     const props = {
       key: letterKey,
       variable,
       value,
       base,
       scaling,
+      scalingVariable,
       ratio,
       index: key
     };
@@ -2007,35 +2050,75 @@ var setVariables = (result, key) => {
     CSS_VARS2[result.var] = result.value;
   }
 };
-var applySequenceVars = (props, mediaName, options = {}) => {
+var applyGlobalVars = (vars, obj, options) => {
   const CONFIG2 = getActiveConfig();
-  const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
-  const unit = props.unit || UNIT2.default;
-  const { sequence, scales } = props;
+  const { UNIT: UNIT2 } = CONFIG2;
+  const unit = obj.unit || UNIT2.default;
+  const { base, ratio, type } = obj;
+  const prefix = "--" + (type && type.replace(".", "-"));
+  vars[`${prefix}-base`] = base;
+  vars[`${prefix}-unit`] = unit;
+  const ratioVar = `${prefix}-ratio`;
+  vars[ratioVar] = ratio;
+  const [first, middle, second] = getSubratio(base, ratio);
+  vars[`${prefix}-sub-ratio-1`] = first;
+  vars[`${prefix}-sub-ratio-2`] = middle;
+  vars[`${prefix}-sub-ratio-3`] = second;
+};
+var applySequenceVars = (FACTORY2, options = {}) => {
+  const CONFIG2 = getActiveConfig();
+  const { UNIT: UNIT2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
+  const unit = FACTORY2.unit || UNIT2.default;
+  const { mediaRegenerate, sequence, scales } = FACTORY2;
+  if (!mediaRegenerate) {
+    applyGlobalVars(CSS_VARS2, FACTORY2, options);
+  }
   for (const key in sequence) {
     const item = sequence[key];
-    const value = (props.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
-    if (mediaName) {
-      const query = MEDIA2[mediaName];
-      if (!query) {
-        if (CONFIG2.verbose)
-          console.warn("Can't find query ", query);
-      }
-      let underMediaQuery = CSS_VARS2[`@media ${query}`];
-      if (!underMediaQuery)
-        underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
-      underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
-      CSS_VARS2[item.variable + "_" + mediaName] = value;
+    const value = (FACTORY2.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+    if (!mediaRegenerate) {
+      CSS_VARS2[item.variable + "_default"] = value;
+      CSS_VARS2[item.variable] = item.scalingVariable;
+      continue;
+    }
+    if (options.useDefault === false) {
+      CSS_VARS2[item.variable] = value;
     } else {
-      if (options.useDefault === false) {
-        CSS_VARS2[item.variable] = value;
-      } else {
-        CSS_VARS2[item.variable + "_default"] = value;
-        CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
-      }
+      CSS_VARS2[item.variable + "_default"] = value;
+      CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
     }
   }
 };
+var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
+  const CONFIG2 = getActiveConfig();
+  const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
+  const mediaName = media.slice(1);
+  const unit = FACTORY2.unit || UNIT2.default;
+  const { mediaRegenerate } = FACTORY2;
+  const { sequence, scales } = FACTORY2[media];
+  const query = MEDIA2[mediaName];
+  if (!query && CONFIG2.verbose)
+    console.warn("Can't find media query ", query);
+  if (!mediaRegenerate) {
+    let underMediaQuery = CSS_VARS2[`@media ${query}`];
+    if (!underMediaQuery)
+      underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+    applyGlobalVars(underMediaQuery, FACTORY2[media], options);
+    return;
+  }
+  for (const key in sequence) {
+    const item = sequence[key];
+    const value = (FACTORY2.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+    if (!query && CONFIG2.verbose)
+      console.warn("Can't find query ", query);
+    let underMediaQuery = CSS_VARS2[`@media ${query}`];
+    if (!underMediaQuery)
+      underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+    underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
+    CSS_VARS2[item.variable + "_" + mediaName] = value;
+  }
+  console.log(CSS_VARS2);
+};
 
 // src/utils/sprite.js
 var import_utils8 = __toESM(require_cjs2(), 1);

package/dist/cjs/utils/sequence.js

@@ -1316,7 +1316,11 @@ __export(sequence_exports, {
   generateSubSequence: () => generateSubSequence,
   getSequenceValue: () => getSequenceValue,
   getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
-  numToLetterMap: () => numToLetterMap
+  getSubratio: () => getSubratio,
+  getSubratioDifference: () => getSubratioDifference,
+  numToLetterMap: () => numToLetterMap,
+  setScalingVar: () => setScalingVar,
+  setSubScalingVar: () => setSubScalingVar
 });
 module.exports = __toCommonJS(sequence_exports);
 var import_utils4 = __toESM(require_cjs(), 1);
@@ -1405,6 +1409,7 @@ var defaultProps = {
   h1Matches: 6,
   lineHeight: 1.5,
   subSequence: true,
+  mediaRegenerate: false,
   unit: "em",
   templates: {},
   sequence: {},
@@ -1460,6 +1465,7 @@ var defaultProps2 = {
   ratio: SEQUENCE.phi,
   range: [-5, 15],
   subSequence: true,
+  mediaRegenerate: false,
   unit: "em",
   sequence: {},
   scales: {},
@@ -1487,6 +1493,7 @@ var defaultProps3 = {
   type: "timing",
   ratio: SEQUENCE["perfect-fourth"],
   range: [-3, 12],
+  mediaRegenerate: false,
   unit: "ms",
   sequence: {},
   scales: {},
@@ -1587,45 +1594,77 @@ var numToLetterMap = {
   19: "T"
 };
 var setSequenceValue = (props, sequenceProps) => {
-  const { key, variable, value, scaling, index } = props;
+  const { key, variable, value, scaling, index, scalingVariable } = props;
   sequenceProps.sequence[key] = {
     key,
     decimal: ~~(value * 100) / 100,
     val: ~~value,
     scaling,
     index,
+    scalingVariable,
     variable
   };
   sequenceProps.scales[key] = scaling;
   sequenceProps.vars[variable] = scaling + sequenceProps.unit;
 };
+var setScalingVar = (key, sequenceProps) => {
+  const { type } = sequenceProps;
+  if (key === 0)
+    return "1em";
+  const prefix = "--" + (type && type.replace(".", "-"));
+  const ratioVar = `${prefix}-ratio`;
+  if (key > 0) {
+    const prevLetterKey = numToLetterMap[key - 1];
+    return `calc(var(${prefix}-${prevLetterKey}) * var(${ratioVar}))`;
+  }
+  if (key < 0) {
+    const nextLetterKey = numToLetterMap[key + 1];
+    return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`;
+  }
+};
+var 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 subRatioVarPrefix = `${prefix}-sub-ratio-`;
+  return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`;
+};
+var getSubratioDifference = (base, ratio) => {
+  const diff = base * ratio - base;
+  const subRatio = diff / 1.618;
+  const first = base * ratio - subRatio;
+  const second = base + subRatio;
+  const middle = (first + second) / 2;
+  return [first, middle, second];
+};
+var getSubratio = (base, ratio) => {
+  return getSubratioDifference(base, ratio).map((v) => v / base);
+};
 var generateSubSequence = (props, sequenceProps) => {
   const { key, base, value, ratio, variable, index } = props;
   const next = value * ratio;
-  const diff = next - value;
-  const smallscale = diff / 1.618;
-  const valueRounded = ~~value;
-  const nextRounded = ~~next;
-  const diffRounded = nextRounded - valueRounded;
-  let arr = [];
-  const first = next - smallscale;
-  const second = value + smallscale;
-  const middle = (first + second) / 2;
+  const diffRounded = ~~next - ~~value;
+  let arr;
+  const [first, middle, second] = getSubratioDifference(value, ratio);
   if (diffRounded > 16)
     arr = [first, middle, second];
   else
     arr = [first, second];
-  arr.map((v, k) => {
+  arr.forEach((v, k) => {
     const scaling = ~~(v / base * 1e3) / 1e3;
     const newVar = variable + (k + 1);
+    const newIndex = index + (k + 1) / 10;
+    const scalingVariable = setSubScalingVar(k + 1, arr, variable, sequenceProps);
     const props2 = {
       key: key + (k + 1),
       variable: newVar,
       value: v,
       scaling,
-      index: index + (k + 1) / 10
+      scalingVariable,
+      index: newIndex
     };
-    return setSequenceValue(props2, sequenceProps);
+    setSequenceValue(props2, sequenceProps);
   });
 };
 var switchSequenceOnNegative = (key, base, ratio) => {
@@ -1641,12 +1680,14 @@ var generateSequence = (sequenceProps) => {
     const value = switchSequenceOnNegative(key, base, ratio);
     const scaling = ~~(value / base * 100) / 100;
     const variable = prefix + letterKey;
+    const scalingVariable = setScalingVar(key, sequenceProps);
     const props = {
       key: letterKey,
       variable,
       value,
       base,
       scaling,
+      scalingVariable,
       ratio,
       index: key
     };

package/dist/cjs/utils/sprite.js

@@ -1391,6 +1391,7 @@ var defaultProps = {
   h1Matches: 6,
   lineHeight: 1.5,
   subSequence: true,
+  mediaRegenerate: false,
   unit: "em",
   templates: {},
   sequence: {},
@@ -1446,6 +1447,7 @@ var defaultProps2 = {
   ratio: SEQUENCE.phi,
   range: [-5, 15],
   subSequence: true,
+  mediaRegenerate: false,
   unit: "em",
   sequence: {},
   scales: {},
@@ -1473,6 +1475,7 @@ var defaultProps3 = {
   type: "timing",
   ratio: SEQUENCE["perfect-fourth"],
   range: [-3, 12],
+  mediaRegenerate: false,
   unit: "ms",
   sequence: {},
   scales: {},

package/dist/cjs/utils/var.js

@@ -205,7 +205,7 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray,
+      isArray: () => isArray3,
       isBoolean: () => isBoolean,
       isDate: () => isDate,
       isDefined: () => isDefined2,
@@ -213,24 +213,24 @@ var require_types = __commonJS({
       isNot: () => isNot,
       isNull: () => isNull,
       isNumber: () => isNumber,
-      isObject: () => isObject2,
+      isObject: () => isObject4,
       isObjectLike: () => isObjectLike2,
-      isString: () => isString,
+      isString: () => isString3,
       isUndefined: () => isUndefined
     });
     module2.exports = __toCommonJS2(types_exports);
     var import_node = require_node();
-    var isObject2 = (arg) => {
+    var isObject4 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
-    var isString = (arg) => typeof arg === "string";
+    var isString3 = (arg) => typeof arg === "string";
     var isNumber = (arg) => typeof arg === "number";
     var isFunction = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray = (arg) => Array.isArray(arg);
+    var isArray3 = (arg) => Array.isArray(arg);
     var isDate = (d) => d instanceof Date;
     var isObjectLike2 = (arg) => {
       if (arg === null)
@@ -238,16 +238,16 @@ var require_types = __commonJS({
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject2(arg) || isObjectLike2(arg) || isString(arg) || isNumber(arg) || isFunction(arg) || isArray(arg) || isObjectLike2(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
+      return isObject4(arg) || isObjectLike2(arg) || isString3(arg) || isNumber(arg) || isFunction(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray,
-      object: isObject2,
-      string: isString,
+      array: isArray3,
+      object: isObject4,
+      string: isString3,
       date: isDate,
       number: isNumber,
       null: isNull,
@@ -1310,11 +1310,13 @@ var require_cjs = __commonJS({
 // src/utils/var.js
 var var_exports = {};
 __export(var_exports, {
+  applyGlobalVars: () => applyGlobalVars,
+  applyMediaSequenceVars: () => applyMediaSequenceVars,
   applySequenceVars: () => applySequenceVars,
   setVariables: () => setVariables
 });
 module.exports = __toCommonJS(var_exports);
-var import_utils2 = __toESM(require_cjs(), 1);
+var import_utils6 = __toESM(require_cjs(), 1);
 
 // src/factory.js
 var import_utils = __toESM(require_cjs(), 1);
@@ -1391,6 +1393,7 @@ var defaultProps = {
   h1Matches: 6,
   lineHeight: 1.5,
   subSequence: true,
+  mediaRegenerate: false,
   unit: "em",
   templates: {},
   sequence: {},
@@ -1446,6 +1449,7 @@ var defaultProps2 = {
   ratio: SEQUENCE.phi,
   range: [-5, 15],
   subSequence: true,
+  mediaRegenerate: false,
   unit: "em",
   sequence: {},
   scales: {},
@@ -1473,6 +1477,7 @@ var defaultProps3 = {
   type: "timing",
   ratio: SEQUENCE["perfect-fourth"],
   range: [-3, 12],
+  mediaRegenerate: false,
   unit: "ms",
   sequence: {},
   scales: {},
@@ -1543,41 +1548,103 @@ var getActiveConfig = (def) => {
   return FACTORY[def || FACTORY.active];
 };
 
+// src/utils/sequence.js
+var import_utils4 = __toESM(require_cjs(), 1);
+
+// ../utils/src/index.js
+var import_utils3 = __toESM(require_cjs());
+
+// ../utils/src/scaling.js
+var import_utils2 = __toESM(require_cjs());
+
+// src/utils/sequence.js
+var getSubratioDifference = (base, ratio) => {
+  const diff = base * ratio - base;
+  const subRatio = diff / 1.618;
+  const first = base * ratio - subRatio;
+  const second = base + subRatio;
+  const middle = (first + second) / 2;
+  return [first, middle, second];
+};
+var getSubratio = (base, ratio) => {
+  return getSubratioDifference(base, ratio).map((v) => v / base);
+};
+
 // src/utils/var.js
 var setVariables = (result, key) => {
   const CONFIG2 = getActiveConfig();
   const { CSS_VARS: CSS_VARS2 } = CONFIG2;
-  if ((0, import_utils2.isObjectLike)(result.value)) {
+  if ((0, import_utils6.isObjectLike)(result.value)) {
   } else {
     CSS_VARS2[result.var] = result.value;
   }
 };
-var applySequenceVars = (props, mediaName, options = {}) => {
+var applyGlobalVars = (vars, obj, options) => {
   const CONFIG2 = getActiveConfig();
-  const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
-  const unit = props.unit || UNIT2.default;
-  const { sequence, scales } = props;
+  const { UNIT: UNIT2 } = CONFIG2;
+  const unit = obj.unit || UNIT2.default;
+  const { base, ratio, type } = obj;
+  const prefix = "--" + (type && type.replace(".", "-"));
+  vars[`${prefix}-base`] = base;
+  vars[`${prefix}-unit`] = unit;
+  const ratioVar = `${prefix}-ratio`;
+  vars[ratioVar] = ratio;
+  const [first, middle, second] = getSubratio(base, ratio);
+  vars[`${prefix}-sub-ratio-1`] = first;
+  vars[`${prefix}-sub-ratio-2`] = middle;
+  vars[`${prefix}-sub-ratio-3`] = second;
+};
+var applySequenceVars = (FACTORY2, options = {}) => {
+  const CONFIG2 = getActiveConfig();
+  const { UNIT: UNIT2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
+  const unit = FACTORY2.unit || UNIT2.default;
+  const { mediaRegenerate, sequence, scales } = FACTORY2;
+  if (!mediaRegenerate) {
+    applyGlobalVars(CSS_VARS2, FACTORY2, options);
+  }
   for (const key in sequence) {
     const item = sequence[key];
-    const value = (props.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
-    if (mediaName) {
-      const query = MEDIA2[mediaName];
-      if (!query) {
-        if (CONFIG2.verbose)
-          console.warn("Can't find query ", query);
-      }
-      let underMediaQuery = CSS_VARS2[`@media ${query}`];
-      if (!underMediaQuery)
-        underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
-      underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
-      CSS_VARS2[item.variable + "_" + mediaName] = value;
+    const value = (FACTORY2.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+    if (!mediaRegenerate) {
+      CSS_VARS2[item.variable + "_default"] = value;
+      CSS_VARS2[item.variable] = item.scalingVariable;
+      continue;
+    }
+    if (options.useDefault === false) {
+      CSS_VARS2[item.variable] = value;
     } else {
-      if (options.useDefault === false) {
-        CSS_VARS2[item.variable] = value;
-      } else {
-        CSS_VARS2[item.variable + "_default"] = value;
-        CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
-      }
+      CSS_VARS2[item.variable + "_default"] = value;
+      CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
     }
   }
 };
+var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
+  const CONFIG2 = getActiveConfig();
+  const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
+  const mediaName = media.slice(1);
+  const unit = FACTORY2.unit || UNIT2.default;
+  const { mediaRegenerate } = FACTORY2;
+  const { sequence, scales } = FACTORY2[media];
+  const query = MEDIA2[mediaName];
+  if (!query && CONFIG2.verbose)
+    console.warn("Can't find media query ", query);
+  if (!mediaRegenerate) {
+    let underMediaQuery = CSS_VARS2[`@media ${query}`];
+    if (!underMediaQuery)
+      underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+    applyGlobalVars(underMediaQuery, FACTORY2[media], options);
+    return;
+  }
+  for (const key in sequence) {
+    const item = sequence[key];
+    const value = (FACTORY2.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
+    if (!query && CONFIG2.verbose)
+      console.warn("Can't find query ", query);
+    let underMediaQuery = CSS_VARS2[`@media ${query}`];
+    if (!underMediaQuery)
+      underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+    underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
+    CSS_VARS2[item.variable + "_" + mediaName] = value;
+  }
+  console.log(CSS_VARS2);
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.11.225",
+  "version": "2.11.227",
   "files": [
     "src",
     "dist"
@@ -29,5 +29,5 @@
     "@symbo.ls/utils": "latest",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "6f10ab3baba728d15243a17edb13a5dd5618cb98"
+  "gitHead": "6ac105edd74f4d797b096bebfdf80b473831f26e"
 }

package/src/defaultConfig/spacing.js

@@ -9,6 +9,7 @@ const defaultProps = {
   ratio: SEQUENCE.phi,
   range: [-5, +15],
   subSequence: true,
+  mediaRegenerate: false,
   unit: 'em',
   sequence: {},
   scales: {},

package/src/defaultConfig/timing.js

@@ -8,6 +8,7 @@ const defaultProps = {
   type: 'timing',
   ratio: SEQUENCE['perfect-fourth'],
   range: [-3, +12],
+  mediaRegenerate: false,
   unit: 'ms',
   sequence: {},
   scales: {},

package/src/defaultConfig/typography.js

@@ -11,6 +11,7 @@ const defaultProps = {
   h1Matches: +6,
   lineHeight: 1.5,
   subSequence: true,
+  mediaRegenerate: false,
   unit: 'em',
   templates: {},
   sequence: {},