@symbo.ls/scratch 3.8.8 → 3.14.0

package/dist/cjs/utils/sequence.js

@@ -34,8 +34,8 @@ __export(sequence_exports, {
   setSubScalingVar: () => setSubScalingVar
 });
 module.exports = __toCommonJS(sequence_exports);
-var import_utils = require("@domql/utils");
-var import_smbls_utils = require("@symbo.ls/smbls-utils");
+var import_utils = require("@symbo.ls/utils");
+var import_utils2 = require("@symbo.ls/utils");
 var import_factory = require("../factory.js");
 var import_unit = require("./unit.js");
 var import_color = require("./color.js");
@@ -79,7 +79,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;
@@ -87,11 +88,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 = ((0, import_unit.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];
@@ -99,6 +103,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}))`;
   }
 };
@@ -106,7 +116,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}))`;
 };
@@ -150,13 +161,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];
@@ -197,7 +214,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 = {
@@ -238,7 +256,8 @@ const getSequenceValue = (value = "A", sequenceProps) => {
     "revert-layer"
   ];
   if (skipArr.includes(value)) return value;
-  const prefix = `--${(0, import_smbls_utils.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
+  const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
+  const prefix = `--${vp}${(0, import_utils2.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
   const letterVal = value.toUpperCase();
   const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
   let absValue = isNegative ? letterVal.slice(1) : letterVal;
@@ -285,12 +304,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/cjs/utils/sprite.js

@@ -22,15 +22,15 @@ __export(sprite_exports, {
   generateSprite: () => generateSprite
 });
 module.exports = __toCommonJS(sprite_exports);
-var import_utils = require("@domql/utils");
-var import_factory = require("../factory");
+var import_utils = require("@symbo.ls/utils");
+var import_factory = require("../factory.js");
 const isDev = (0, import_utils.isNotProduction)();
 const generateSprite = (icons) => {
   const CONFIG = (0, import_factory.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;
@@ -81,5 +81,12 @@ 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>");

package/dist/cjs/utils/var.js

@@ -24,13 +24,13 @@ __export(var_exports, {
   setVariables: () => setVariables
 });
 module.exports = __toCommonJS(var_exports);
-var import_utils = require("@domql/utils");
+var import_utils = require("@symbo.ls/utils");
 var import_factory = require("../factory.js");
 var import_sequence = require("./sequence.js");
 var import_unit = require("./unit.js");
 const setVariables = (result, key) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  const { CSS_VARS } = CONFIG;
+  const { cssVars: CSS_VARS } = CONFIG;
   if ((0, import_utils.isObjectLike)(result.value)) {
   } else {
     CSS_VARS[result.var] = result.value;
@@ -41,7 +41,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`;
@@ -51,10 +52,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 = (0, import_factory.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);
@@ -77,17 +80,28 @@ const applySequenceVars = (FACTORY, options = {}) => {
 };
 const applyMediaSequenceVars = (FACTORY, media, options = {}) => {
   const CONFIG = (0, import_factory.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) {

package/dist/esm/defaultConfig/class.js

@@ -1,5 +1,4 @@
 const defaultProps = {};
-const CLASS = defaultProps;
 export {
-  CLASS
+  defaultProps as class
 };

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

@@ -4,15 +4,15 @@ 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 = {};
 export {
-  font_face,
-  font_family,
-  font_family_types
+  fontFace,
+  fontFamily,
+  fontFamilyTypes
 };

package/dist/esm/defaultConfig/icons.js

@@ -1,6 +1,6 @@
 const icons = {};
-const semantic_icons = {};
+const semanticIcons = {};
 export {
   icons,
-  semantic_icons
+  semanticIcons
 };

package/dist/esm/defaultConfig/svg.js

@@ -1,6 +1,6 @@
 const svg = {};
-const svg_data = {};
+const svgData = {};
 export {
   svg,
-  svg_data
+  svgData
 };

package/dist/esm/defaultConfig/timing.js

@@ -1,4 +1,4 @@
-import { sequence } from "./sequence";
+import { sequence } from "./sequence.js";
 const defaultProps = {
   default: 150,
   base: 150,

package/dist/esm/factory.js

@@ -3,30 +3,30 @@ import {
   deepMerge,
   isDefined,
   isObject
-} from "@domql/utils";
-import * as CONF from "./defaultConfig";
-const CSS_VARS = {};
-const CSS_MEDIA_VARS = {};
+} from "@symbo.ls/utils";
+import * as CONF from "./defaultConfig/index.js";
+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 = deepClone(CONFIG);
@@ -40,7 +40,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) => {
@@ -49,12 +57,64 @@ const setActiveConfig = (newConfig) => {
   FACTORY["1"] = deepMerge(newConfig, 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 (!isObject(val)) continue;
+      merged = merged ? deepMerge(val, merged) : val;
+    }
+    if (!merged) continue;
+    for (const v of vs) if (isObject(cfg[v])) cfg[v] = merged;
+  }
+};
+const createConfig = (name, overrides, { cleanBase = false } = {}) => {
+  const activeBase = cleanBase ? null : getActiveConfig();
+  const base = deepClone(
+    !cleanBase && activeBase && activeBase._scratchConfig ? activeBase : cachedConfig
+  );
+  for (const flag of APP_FLAGS) {
+    delete base[flag];
+  }
+  const cfg = 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;
+};
 export {
   CONFIG,
-  CSS_MEDIA_VARS,
-  CSS_VARS,
   FACTORY,
   activateConfig,
+  createConfig,
+  cssMediaVars,
+  cssVars,
   getActiveConfig,
-  setActiveConfig
+  popConfig,
+  pushConfig,
+  setActiveConfig,
+  toCamel
 };

package/dist/esm/index.js

@@ -1,12 +1,14 @@
 import * as scratchUtils from "./utils/index.js";
 import * as scratchSystem from "./system/index.js";
+import * as scratchDefaultConfig from "./defaultConfig/index.js";
 export * from "./factory.js";
-export * from "./defaultConfig";
-export * from "./system";
-export * from "./utils";
-export * from "./transforms";
+export * from "./defaultConfig/index.js";
+export * from "./system/index.js";
+export * from "./utils/index.js";
+export * from "./transforms/index.js";
 export * from "./set.js";
 export {
+  scratchDefaultConfig,
   scratchSystem,
   scratchUtils
 };