@symbo.ls/scratch 2.33.13 → 2.33.17

package/dist/cjs/system/index.js

@@ -319,6 +319,7 @@ __export(system_exports, {
   applySpacingSequence: () => applySpacingSequence,
   applyTimingSequence: () => applyTimingSequence,
   applyTypographySequence: () => applyTypographySequence,
+  checkIfBoxSize: () => checkIfBoxSize,
   getColor: () => getColor,
   getFontFamily: () => getFontFamily,
   getFontSizeByKey: () => getFontSizeByKey,
@@ -339,7 +340,8 @@ __export(system_exports, {
   setSVG: () => setSVG,
   setShadow: () => setShadow,
   setSvgIcon: () => setSvgIcon,
-  setTheme: () => setTheme
+  setTheme: () => setTheme,
+  splitSpacedValue: () => splitSpacedValue
 });
 module.exports = __toCommonJS(system_exports);
 
@@ -744,6 +746,58 @@ var getActiveConfig = (def) => {
 var isScalingUnit = (unit) => {
   return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
 };
+var CSS_UNITS = [
+  // Absolute
+  "px",
+  "cm",
+  "mm",
+  "in",
+  "pt",
+  "pc",
+  // Font-relative
+  "em",
+  "rem",
+  "ex",
+  "cap",
+  "ch",
+  "ic",
+  "lh",
+  "rlh",
+  // Viewport-relative
+  "%",
+  "vw",
+  "vh",
+  "vmin",
+  "vmax",
+  "svw",
+  "svh",
+  "lvw",
+  "lvh",
+  "dvw",
+  "dvh",
+  // Container query units
+  "cqw",
+  "cqh",
+  "cqi",
+  "cqb",
+  "cqmin",
+  "cqmax",
+  // Angle
+  "deg",
+  "rad",
+  "grad",
+  "turn",
+  // Time
+  "s",
+  "ms",
+  // Resolution
+  "dpi",
+  "dpcm",
+  "dppx",
+  // Grid fractional
+  "fr",
+  "auto"
+];
 
 // src/utils/color.js
 var colorStringToRgbaArray = (color) => {
@@ -899,6 +953,12 @@ var setSequenceValue = (props, sequenceProps) => {
   sequenceProps.scales[key] = scaling;
   sequenceProps.vars[variable] = scaling + sequenceProps.unit;
 };
+var getFnPrefixAndValue = (val) => {
+  if (!val.includes("(")) return val;
+  const prefix = val.split("(")[0];
+  const value = val.slice(val.indexOf("(") + 1, val.lastIndexOf(")"));
+  return [prefix, value];
+};
 var setScalingVar = (key, sequenceProps) => {
   const { base, type, unit } = sequenceProps;
   const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
@@ -994,13 +1054,26 @@ var generateSequence = (sequenceProps) => {
 var getSequenceValue = (value = "A", sequenceProps) => {
   const CONFIG2 = getActiveConfig();
   const { UNIT: UNIT2 } = CONFIG2;
-  const { sequence, unit = UNIT2.default, useVariable } = sequenceProps;
   if (isString(value) && value.slice(0, 2) === "--") return `var(${value})`;
-  const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
+  const { sequence, unit = UNIT2.default, useVariable } = sequenceProps;
   const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
   const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
-  if (value === "none" || value === "auto" || value === "unset" || value === "inherit" || value === "fit-content" || value === "min-content" || value === "max-content" || value.includes("calc") || value.includes("var") || !startsWithDashOrLetter)
-    return value;
+  const hasUnits = CSS_UNITS.some((unit2) => value.includes(unit2));
+  if (hasUnits || !startsWithDashOrLetter) return value;
+  const skipArr = [
+    "none",
+    "auto",
+    "max-content",
+    "min-content",
+    "fit-content",
+    "inherit",
+    "initial",
+    "unset",
+    "revert",
+    "revert-layer"
+  ];
+  if (skipArr.includes(value)) return value;
+  const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
   const letterVal = value.toUpperCase();
   const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
   let absValue = isNegative ? letterVal.slice(1) : letterVal;
@@ -1042,14 +1115,38 @@ var getSequenceValue = (value = "A", sequenceProps) => {
   }
   return isNegative + sequenceItem.scaling + unit;
 };
-var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
+var getSequenceValueBySymbols = (value, sequenceProps) => {
+  const mathArr = ["+", "-", "*", "/", ","].filter(
+    (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 + " ");
+  }).join("");
+};
+var getSequenceValuePropertyPair = (value, propertyName, sequenceProps, fnPrefix) => {
   if (typeof value !== "string") {
     const CONFIG2 = getActiveConfig();
     if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
     return { [propertyName]: value };
   }
   if (value === "-" || value === "") return {};
-  return { [propertyName]: getSequenceValue(value, sequenceProps) };
+  if (!fnPrefix && value.includes("(")) {
+    const fnArr = getFnPrefixAndValue(value);
+    fnPrefix = fnArr[0];
+    value = fnArr[1];
+  }
+  const mathArr = ["+", "-", "*", "/", ","].filter(
+    (v) => value.includes(v + " ")
+  );
+  if (mathArr.length) {
+    value = getSequenceValueBySymbols(value, sequenceProps);
+  } else value = getSequenceValue(value, sequenceProps);
+  return { [propertyName]: fnPrefix ? `${fnPrefix}(${value})` : value };
 };
 var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
 var findHeadings = (propertyNames) => {
@@ -1613,15 +1710,7 @@ var runThroughMedia2 = (FACTORY2) => {
     const mediaProps = FACTORY2[prop];
     const isMediaName = prop.slice(0, 1) === "@";
     if (!isMediaName) continue;
-    const {
-      type,
-      base,
-      ratio,
-      range,
-      subSequence,
-      h1Matches,
-      unit
-    } = FACTORY2;
+    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY2;
     merge(mediaProps, {
       type,
       base,
@@ -1639,6 +1728,12 @@ var runThroughMedia2 = (FACTORY2) => {
     applyMediaSequenceVars(FACTORY2, prop);
   }
 };
+var checkIfBoxSize = (propertyName) => {
+  const prop = propertyName.toLowerCase();
+  const includesWidth = prop.includes("width") || prop.includes("height");
+  const includesBorder = prop.includes("border") || prop.includes("outline");
+  return includesWidth && !includesBorder;
+};
 var applySpacingSequence = () => {
   const CONFIG2 = getActiveConfig();
   const { SPACING: SPACING2 } = CONFIG2;
@@ -1653,12 +1748,16 @@ var getSequence = (sequenceProps) => {
   const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
   return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
 };
-var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
+var getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefix) => {
   const sequence = getSequence(sequenceProps);
-  if (isString(value) && (value.includes("calc") || value.includes("var"))) {
-    return { [propertyName]: value };
+  if (isString(value)) {
+    if (!fnPrefix && value.includes("(")) {
+      const fnArray = getFnPrefixAndValue(value);
+      fnPrefix = fnArray[0];
+      value = fnArray[1];
+    }
   }
-  const stack = (0, import_utils15.arrayzeValue)(value);
+  const stack = fnPrefix ? [value] : (0, import_utils15.arrayzeValue)(value);
   if (!isArray(stack)) return;
   if (stack.length > 1) {
     let suffix = "";
@@ -1674,45 +1773,40 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
     const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
       stack[i],
       propertyName + direction + suffix,
-      sequence
+      sequence,
+      fnPrefix
+    );
+    return directions[stack.length].map(
+      (dir, key) => wrapSequenceValueByDirection(dir, key)
     );
-    return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key));
   }
-  return getSequenceValuePropertyPair(
-    value,
-    propertyName,
-    sequence
-  );
+  return getSequenceValuePropertyPair(value, propertyName, sequence, fnPrefix);
 };
-var getSpacingBasedOnRatio = (props, propertyName, val) => {
+var getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
   const CONFIG2 = getActiveConfig();
   const { SPACING: SPACING2 } = CONFIG2;
-  const { spacingRatio, unit } = props;
-  const value = val || props[propertyName];
-  if (spacingRatio) {
-    let sequenceProps = SPACING2[spacingRatio];
-    if (!sequenceProps) {
-      const { type, base, range, subSequence } = SPACING2;
-      sequenceProps = SPACING2[spacingRatio] = merge({
-        ratio: spacingRatio,
-        type: type + "-" + spacingRatio,
-        unit,
-        sequence: {},
-        scales: {},
-        templates: {},
-        vars: {}
-      }, {
-        base,
-        range,
-        subSequence,
-        ratio: SPACING2.ratio,
-        unit: SPACING2.unit
-      });
-    }
-    applySequenceVars(sequenceProps, { useDefault: false });
-    return getSpacingByKey(value, propertyName, sequenceProps);
-  }
-  return getSpacingByKey(value, propertyName);
+  let value = val || props[propertyName];
+  if (!fnPrefix && isString(value) && value.includes("(")) {
+    const fnArr = getFnPrefixAndValue(value);
+    fnPrefix = fnArr[0];
+    value = fnArr[1];
+  }
+  if (props.spacingRatio) {
+    const sequenceProps = applyCustomSequence(props);
+    return getSpacingByKey(value, propertyName, sequenceProps, fnPrefix);
+  }
+  return getSpacingByKey(value, propertyName, SPACING2, fnPrefix);
+};
+var splitSpacedValue = (val) => {
+  const addDefault = (v) => {
+    const isSymbol = ["+", "-", "*", "/"].includes(v);
+    const hasUnits = CSS_UNITS.some((unit) => val.includes(unit));
+    if (isSymbol || hasUnits) return v;
+    const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
+    if (isSingleLetter) return v + "_default";
+    return v;
+  };
+  return val.split(",").map((v) => v.trim()).map(addDefault).join(",").split(" ").map(addDefault).join(" ");
 };
 
 // src/system/shadow.js

package/dist/cjs/system/shadow.js

@@ -681,6 +681,58 @@ var getActiveConfig = (def) => {
 var isScalingUnit = (unit) => {
   return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
 };
+var CSS_UNITS = [
+  // Absolute
+  "px",
+  "cm",
+  "mm",
+  "in",
+  "pt",
+  "pc",
+  // Font-relative
+  "em",
+  "rem",
+  "ex",
+  "cap",
+  "ch",
+  "ic",
+  "lh",
+  "rlh",
+  // Viewport-relative
+  "%",
+  "vw",
+  "vh",
+  "vmin",
+  "vmax",
+  "svw",
+  "svh",
+  "lvw",
+  "lvh",
+  "dvw",
+  "dvh",
+  // Container query units
+  "cqw",
+  "cqh",
+  "cqi",
+  "cqb",
+  "cqmin",
+  "cqmax",
+  // Angle
+  "deg",
+  "rad",
+  "grad",
+  "turn",
+  // Time
+  "s",
+  "ms",
+  // Resolution
+  "dpi",
+  "dpcm",
+  "dppx",
+  // Grid fractional
+  "fr",
+  "auto"
+];
 
 // src/utils/color.js
 var colorStringToRgbaArray = (color) => {
@@ -812,6 +864,12 @@ var setSequenceValue = (props, sequenceProps) => {
   sequenceProps.scales[key] = scaling;
   sequenceProps.vars[variable] = scaling + sequenceProps.unit;
 };
+var getFnPrefixAndValue = (val) => {
+  if (!val.includes("(")) return val;
+  const prefix = val.split("(")[0];
+  const value = val.slice(val.indexOf("(") + 1, val.lastIndexOf(")"));
+  return [prefix, value];
+};
 var setScalingVar = (key, sequenceProps) => {
   const { base, type, unit } = sequenceProps;
   const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
@@ -904,13 +962,26 @@ var generateSequence = (sequenceProps) => {
 var getSequenceValue = (value = "A", sequenceProps) => {
   const CONFIG2 = getActiveConfig();
   const { UNIT: UNIT2 } = CONFIG2;
-  const { sequence, unit = UNIT2.default, useVariable } = sequenceProps;
   if (isString(value) && value.slice(0, 2) === "--") return `var(${value})`;
-  const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
+  const { sequence, unit = UNIT2.default, useVariable } = sequenceProps;
   const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
   const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
-  if (value === "none" || value === "auto" || value === "unset" || value === "inherit" || value === "fit-content" || value === "min-content" || value === "max-content" || value.includes("calc") || value.includes("var") || !startsWithDashOrLetter)
-    return value;
+  const hasUnits = CSS_UNITS.some((unit2) => value.includes(unit2));
+  if (hasUnits || !startsWithDashOrLetter) return value;
+  const skipArr = [
+    "none",
+    "auto",
+    "max-content",
+    "min-content",
+    "fit-content",
+    "inherit",
+    "initial",
+    "unset",
+    "revert",
+    "revert-layer"
+  ];
+  if (skipArr.includes(value)) return value;
+  const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
   const letterVal = value.toUpperCase();
   const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
   let absValue = isNegative ? letterVal.slice(1) : letterVal;
@@ -952,14 +1023,38 @@ var getSequenceValue = (value = "A", sequenceProps) => {
   }
   return isNegative + sequenceItem.scaling + unit;
 };
-var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
+var getSequenceValueBySymbols = (value, sequenceProps) => {
+  const mathArr = ["+", "-", "*", "/", ","].filter(
+    (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 + " ");
+  }).join("");
+};
+var getSequenceValuePropertyPair = (value, propertyName, sequenceProps, fnPrefix) => {
   if (typeof value !== "string") {
     const CONFIG2 = getActiveConfig();
     if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
     return { [propertyName]: value };
   }
   if (value === "-" || value === "") return {};
-  return { [propertyName]: getSequenceValue(value, sequenceProps) };
+  if (!fnPrefix && value.includes("(")) {
+    const fnArr = getFnPrefixAndValue(value);
+    fnPrefix = fnArr[0];
+    value = fnArr[1];
+  }
+  const mathArr = ["+", "-", "*", "/", ","].filter(
+    (v) => value.includes(v + " ")
+  );
+  if (mathArr.length) {
+    value = getSequenceValueBySymbols(value, sequenceProps);
+  } else value = getSequenceValue(value, sequenceProps);
+  return { [propertyName]: fnPrefix ? `${fnPrefix}(${value})` : value };
 };
 
 // src/utils/sprite.js
@@ -1007,12 +1102,16 @@ var getSequence = (sequenceProps) => {
   const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
   return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
 };
-var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
+var getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefix) => {
   const sequence = getSequence(sequenceProps);
-  if (isString(value) && (value.includes("calc") || value.includes("var"))) {
-    return { [propertyName]: value };
+  if (isString(value)) {
+    if (!fnPrefix && value.includes("(")) {
+      const fnArray = getFnPrefixAndValue(value);
+      fnPrefix = fnArray[0];
+      value = fnArray[1];
+    }
   }
-  const stack = (0, import_utils9.arrayzeValue)(value);
+  const stack = fnPrefix ? [value] : (0, import_utils9.arrayzeValue)(value);
   if (!isArray(stack)) return;
   if (stack.length > 1) {
     let suffix = "";
@@ -1028,15 +1127,14 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
     const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
       stack[i],
       propertyName + direction + suffix,
-      sequence
+      sequence,
+      fnPrefix
+    );
+    return directions[stack.length].map(
+      (dir, key) => wrapSequenceValueByDirection(dir, key)
     );
-    return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key));
   }
-  return getSequenceValuePropertyPair(
-    value,
-    propertyName,
-    sequence
-  );
+  return getSequenceValuePropertyPair(value, propertyName, sequence, fnPrefix);
 };
 
 // src/system/shadow.js