@symbo.ls/uikit 2.11.225 → 2.11.227

package/dist/index.cjs.js

@@ -1383,7 +1383,9 @@ var require_cjs = __commonJS({
       appendIconsSprite: () => appendIconsSprite2,
       appendSVGSprite: () => appendSVGSprite2,
       applyDocument: () => applyDocument,
+      applyGlobalVars: () => applyGlobalVars,
       applyHeadings: () => applyHeadings,
+      applyMediaSequenceVars: () => applyMediaSequenceVars,
       applyReset: () => applyReset,
       applySequenceVars: () => applySequenceVars,
       applySpacingSequence: () => applySpacingSequence,
@@ -1416,6 +1418,8 @@ var require_cjs = __commonJS({
       getShadow: () => getShadow,
       getSpacingBasedOnRatio: () => getSpacingBasedOnRatio4,
       getSpacingByKey: () => getSpacingByKey3,
+      getSubratio: () => getSubratio,
+      getSubratioDifference: () => getSubratioDifference,
       getTheme: () => getTheme,
       getTimingByKey: () => getTimingByKey2,
       getTimingFunction: () => getTimingFunction3,
@@ -1448,7 +1452,9 @@ var require_cjs = __commonJS({
       setInCustomFontMedia: () => setInCustomFontMedia,
       setMediaTheme: () => setMediaTheme,
       setSVG: () => setSVG,
+      setScalingVar: () => setScalingVar,
       setShadow: () => setShadow,
+      setSubScalingVar: () => setSubScalingVar,
       setTheme: () => setTheme,
       setValue: () => setValue,
       setVariables: () => setVariables,
@@ -1465,6 +1471,8 @@ var require_cjs = __commonJS({
     module2.exports = __toCommonJS2(src_exports);
     var utils_exports = {};
     __export2(utils_exports, {
+      applyGlobalVars: () => applyGlobalVars,
+      applyMediaSequenceVars: () => applyMediaSequenceVars,
       applySequenceVars: () => applySequenceVars,
       changeLightness: () => changeLightness,
       colorStringToRgbaArray: () => colorStringToRgbaArray,
@@ -1484,6 +1492,8 @@ var require_cjs = __commonJS({
       getRgbTone: () => getRgbTone,
       getSequenceValue: () => getSequenceValue,
       getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
+      getSubratio: () => getSubratio,
+      getSubratioDifference: () => getSubratioDifference,
       hexToRgb: () => hexToRgb,
       hexToRgbArray: () => hexToRgbArray,
       hexToRgba: () => hexToRgba,
@@ -1500,6 +1510,8 @@ var require_cjs = __commonJS({
       setCustomFont: () => setCustomFont,
       setCustomFontMedia: () => setCustomFontMedia,
       setInCustomFontMedia: () => setInCustomFontMedia,
+      setScalingVar: () => setScalingVar,
+      setSubScalingVar: () => setSubScalingVar,
       setVariables: () => setVariables
     });
     var import_globals = __toESM2(require_cjs7(), 1);
@@ -1781,6 +1793,7 @@ var require_cjs = __commonJS({
       h1Matches: 6,
       lineHeight: 1.5,
       subSequence: true,
+      mediaRegenerate: false,
       unit: "em",
       templates: {},
       sequence: {},
@@ -1828,6 +1841,7 @@ var require_cjs = __commonJS({
       ratio: SEQUENCE.phi,
       range: [-5, 15],
       subSequence: true,
+      mediaRegenerate: false,
       unit: "em",
       sequence: {},
       scales: {},
@@ -1845,6 +1859,7 @@ var require_cjs = __commonJS({
       type: "timing",
       ratio: SEQUENCE["perfect-fourth"],
       range: [-3, 12],
+      mediaRegenerate: false,
       unit: "ms",
       sequence: {},
       scales: {},
@@ -1940,45 +1955,77 @@ var require_cjs = __commonJS({
       19: "T"
     };
     var setSequenceValue = (props4, sequenceProps) => {
-      const { key, variable, value, scaling, index } = props4;
+      const { key, variable, value, scaling, index, scalingVariable } = props4;
       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 prefix2 = "--" + (type && type.replace(".", "-"));
+      const ratioVar = `${prefix2}-ratio`;
+      if (key > 0) {
+        const prevLetterKey = numToLetterMap[key - 1];
+        return `calc(var(${prefix2}-${prevLetterKey}) * var(${ratioVar}))`;
+      }
+      if (key < 0) {
+        const nextLetterKey = numToLetterMap[key + 1];
+        return `calc(var(${prefix2}-${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 prefix2 = "--" + (type && type.replace(".", "-"));
+      const subRatioVarPrefix = `${prefix2}-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 = (props4, sequenceProps) => {
       const { key, base, value, ratio, variable, index } = props4;
       const next2 = value * ratio;
-      const diff = next2 - value;
-      const smallscale = diff / 1.618;
-      const valueRounded = ~~value;
-      const nextRounded = ~~next2;
-      const diffRounded = nextRounded - valueRounded;
-      let arr = [];
-      const first = next2 - smallscale;
-      const second = value + smallscale;
-      const middle = (first + second) / 2;
+      const diffRounded = ~~next2 - ~~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 props22 = {
           key: key + (k + 1),
           variable: newVar,
           value: v,
           scaling,
-          index: index + (k + 1) / 10
+          scalingVariable,
+          index: newIndex
         };
-        return setSequenceValue(props22, sequenceProps);
+        setSequenceValue(props22, sequenceProps);
       });
     };
     var switchSequenceOnNegative = (key, base, ratio) => {
@@ -1994,12 +2041,14 @@ var require_cjs = __commonJS({
         const value = switchSequenceOnNegative(key, base, ratio);
         const scaling = ~~(value / base * 100) / 100;
         const variable = prefix2 + letterKey;
+        const scalingVariable = setScalingVar(key, sequenceProps);
         const props4 = {
           key: letterKey,
           variable,
           value,
           base,
           scaling,
+          scalingVariable,
           ratio,
           index: key
         };
@@ -2089,35 +2138,75 @@ var require_cjs = __commonJS({
         CSS_VARS2[result.var] = result.value;
       }
     };
-    var applySequenceVars = (props4, mediaName, options = {}) => {
+    var applyGlobalVars = (vars, obj, options) => {
       const CONFIG22 = getActiveConfig3();
-      const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
-      const unit = props4.unit || UNIT2.default;
-      const { sequence, scales } = props4;
+      const { UNIT: UNIT2 } = CONFIG22;
+      const unit = obj.unit || UNIT2.default;
+      const { base, ratio, type } = obj;
+      const prefix2 = "--" + (type && type.replace(".", "-"));
+      vars[`${prefix2}-base`] = base;
+      vars[`${prefix2}-unit`] = unit;
+      const ratioVar = `${prefix2}-ratio`;
+      vars[ratioVar] = ratio;
+      const [first, middle, second] = getSubratio(base, ratio);
+      vars[`${prefix2}-sub-ratio-1`] = first;
+      vars[`${prefix2}-sub-ratio-2`] = middle;
+      vars[`${prefix2}-sub-ratio-3`] = second;
+    };
+    var applySequenceVars = (FACTORY2, options = {}) => {
+      const CONFIG22 = getActiveConfig3();
+      const { UNIT: UNIT2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
+      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 = (props4.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
-        if (mediaName) {
-          const query = MEDIA2[mediaName];
-          if (!query) {
-            if (CONFIG22.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 CONFIG22 = getActiveConfig3();
+      const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
+      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 && CONFIG22.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 && CONFIG22.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);
+    };
     var import_utils82 = __toESM2(require_cjs22(), 1);
     var generateSprite = (icons) => {
       const CONFIG22 = getActiveConfig3();
@@ -2583,34 +2672,48 @@ var require_cjs = __commonJS({
       return { var: CSSvar, value: str, arr: value, type };
     };
     var import_utils15 = __toESM2(require_cjs22(), 1);
-    var runThroughMedia = (props4) => {
+    var runThroughMedia = (FACTORY2) => {
       const CONFIG22 = getActiveConfig3();
       const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG22;
-      for (const prop in props4) {
-        const mediaProps = props4[prop];
-        if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = props4;
-          (0, import_utils15.merge)(mediaProps, {
-            type,
-            base,
-            ratio,
-            range,
-            subSequence,
-            h1Matches,
-            unit,
-            sequence: {},
-            scales: {},
-            templates: {},
-            vars: {}
-          });
-          generateSequence(mediaProps);
-          const mediaName = prop.slice(1);
-          applySequenceVars(mediaProps, mediaName);
-          const query = MEDIA2[mediaName];
-          TYPOGRAPHY2.templates[`@media screen and ${query}`] = {
-            fontSize: mediaProps.base / TYPOGRAPHY2.browserDefault + unit
-          };
+      for (const prop in FACTORY2) {
+        const isPropMedia = prop.slice(0, 1) === "@";
+        const mediaValue = FACTORY2[prop];
+        if (!isPropMedia)
+          continue;
+        const { mediaRegenerate } = FACTORY2;
+        const mediaName = prop.slice(1);
+        const {
+          type,
+          base,
+          ratio,
+          range,
+          subSequence,
+          h1Matches,
+          unit
+        } = FACTORY2;
+        (0, import_utils15.merge)(mediaValue, {
+          type,
+          base,
+          ratio,
+          range,
+          subSequence,
+          h1Matches,
+          unit,
+          sequence: {},
+          scales: {},
+          templates: {},
+          vars: {}
+        });
+        const query = MEDIA2[mediaName];
+        TYPOGRAPHY2.templates[`@media screen and ${query}`] = {
+          fontSize: mediaValue.base / TYPOGRAPHY2.browserDefault + unit
+        };
+        if (!mediaRegenerate) {
+          applyMediaSequenceVars(FACTORY2, prop);
+          continue;
         }
+        generateSequence(mediaValue);
+        applyMediaSequenceVars(FACTORY2, prop);
       }
     };
     var applyHeadings = (props4) => {
@@ -2650,28 +2753,36 @@ var require_cjs = __commonJS({
       );
     };
     var import_utils18 = __toESM2(require_cjs22(), 1);
-    var runThroughMedia2 = (sequenceProps) => {
-      for (const prop in sequenceProps) {
-        const mediaProps = sequenceProps[prop];
-        if (prop.slice(0, 1) === "@") {
-          const { type, base, ratio, range, subSequence, h1Matches, unit } = sequenceProps;
-          (0, import_utils18.merge)(mediaProps, {
-            type,
-            base,
-            ratio,
-            range,
-            subSequence,
-            h1Matches,
-            unit,
-            sequence: {},
-            scales: {},
-            templates: {},
-            vars: {}
-          });
-          generateSequence(mediaProps);
-          const mediaName = prop.slice(1);
-          applySequenceVars(mediaProps, mediaName);
-        }
+    var runThroughMedia2 = (FACTORY2) => {
+      for (const prop in FACTORY2) {
+        const mediaProps = FACTORY2[prop];
+        const isMediaName = prop.slice(0, 1) === "@";
+        if (!isMediaName)
+          continue;
+        const {
+          type,
+          base,
+          ratio,
+          range,
+          subSequence,
+          h1Matches,
+          unit
+        } = FACTORY2;
+        (0, import_utils18.merge)(mediaProps, {
+          type,
+          base,
+          ratio,
+          range,
+          subSequence,
+          h1Matches,
+          unit,
+          sequence: {},
+          scales: {},
+          templates: {},
+          vars: {}
+        });
+        generateSequence(mediaProps);
+        applyMediaSequenceVars(FACTORY2, prop);
       }
     };
     var applySpacingSequence = () => {
@@ -2746,7 +2857,7 @@ var require_cjs = __commonJS({
             unit: SPACING2.unit
           });
         }
-        applySequenceVars(sequenceProps, null, { useDefault: false });
+        applySequenceVars(sequenceProps, { useDefault: false });
         return getSpacingByKey3(value, propertyName, sequenceProps);
       }
       return getSpacingByKey3(value, propertyName);
@@ -3040,10 +3151,22 @@ var require_cjs = __commonJS({
         return v;
       }).join(" ");
     };
-    var transformShadow2 = (sh, globalTheme) => {
-      return sh.split(",").map((shadow) => getShadow(shadow, globalTheme)).join(",");
-    };
-    var transformBoxShadow2 = (sh, globalTheme) => getShadow(sh, globalTheme);
+    var transformShadow2 = (sh, globalTheme) => getShadow(sh, globalTheme);
+    var transformBoxShadow2 = (shadows) => shadows.split("|").map((shadow) => {
+      return shadow.split(", ").map((v) => {
+        v = v.trim();
+        if (v.slice(0, 2) === "--")
+          return `var(${v})`;
+        if (getColor2(v).length > 2)
+          return getColor2(v);
+        if (v.includes("px") || v.slice(-2) === "em")
+          return v;
+        const arr = v.split(" ");
+        if (!arr.length)
+          return v;
+        return arr.map((v2) => getSpacingByKey3(v2, "shadow").shadow).join(" ");
+      }).join(" ");
+    }).join(",");
     var transformBackgroundImage2 = (backgroundImage, globalTheme) => {
       const CONFIG22 = getActiveConfig3();
       return backgroundImage.split(", ").map((v) => {
@@ -3368,7 +3491,7 @@ var require_types = __commonJS({
       isNumber: () => isNumber,
       isObject: () => isObject4,
       isObjectLike: () => isObjectLike2,
-      isString: () => isString6,
+      isString: () => isString7,
       isUndefined: () => isUndefined2
     });
     module2.exports = __toCommonJS2(types_exports);
@@ -3378,7 +3501,7 @@ var require_types = __commonJS({
         return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
-    var isString6 = (arg) => typeof arg === "string";
+    var isString7 = (arg) => typeof arg === "string";
     var isNumber = (arg) => typeof arg === "number";
     var isFunction3 = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
@@ -3391,7 +3514,7 @@ var require_types = __commonJS({
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject4(arg) || isObjectLike2(arg) || isString6(arg) || isNumber(arg) || isFunction3(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
+      return isObject4(arg) || isObjectLike2(arg) || isString7(arg) || isNumber(arg) || isFunction3(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
     };
     var isUndefined2 = (arg) => {
       return arg === void 0;
@@ -3400,7 +3523,7 @@ var require_types = __commonJS({
       boolean: isBoolean,
       array: isArray3,
       object: isObject4,
-      string: isString6,
+      string: isString7,
       date: isDate,
       number: isNumber,
       null: isNull,
@@ -5108,7 +5231,6 @@ var require_updateState = __commonJS({
       const targetParent = findGrandParentState || parent.state;
       if (options.replace)
         (0, import_utils14.overwriteDeep)(targetParent, changesValue || value);
-      console.log(changesValue);
       targetParent.update(changesValue, {
         execStateFunction: false,
         isHoisted: true,
@@ -6166,8 +6288,14 @@ var Theme = {
     border: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.border) && {
       border: deps.transformBorder(props4.border)
     },
-    borderColor: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.borderColor) && {
-      borderColor: deps.getMediaColor(props4.borderColor)
+    borderColor: (element) => {
+      const { props: props4, deps } = element;
+      const globalTheme = deps.getSystemTheme(element);
+      if (!props4.borderColor)
+        return;
+      return {
+        borderColor: deps.getMediaColor(props4.borderColor, globalTheme)
+      };
     },
     borderStyle: ({ props: props4 }) => !(0, import_utils.isUndefined)(props4.borderStyle) && {
       borderStyle: props4.borderStyle
@@ -6193,7 +6321,7 @@ var Theme = {
         boxShadow: deps.transformShadow(props4.backgroundImage, globalTheme)
       };
     },
-    boxShadow: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.boxShadow) && {
+    boxShadow: ({ props: props4, deps }) => (0, import_utils.isString)(props4.boxShadow) && {
       boxShadow: deps.transformBoxShadow(props4.boxShadow)
     },
     textShadow: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.textShadow) && {
@@ -8745,7 +8873,7 @@ var Input = {
   props: {
     border: "none",
     type: "input",
-    theme: "tertiary",
+    theme: "field",
     fontSize: "A",
     round: "C",
     lineHeight: 1,
@@ -8760,8 +8888,8 @@ var Input = {
     autocomplete: ({ props: props4 }) => props4.autocomplete,
     placeholder: ({ props: props4 }) => props4.placeholder,
     value: ({ props: props4, state, deps }) => {
-      const { isString: isString6, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
-      if (isString6(props4.value) && props4.value.includes("{{")) {
+      const { isString: isString7, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
+      if (isString7(props4.value) && props4.value.includes("{{")) {
         return replaceLiteralsWithObjectFields2(props4.value, state);
       }
       return props4.value;
@@ -8921,7 +9049,7 @@ var Textarea = {
   },
   ".simple": {
     props: {
-      theme: "tertiary",
+      theme: "field",
       round: "Z2",
       width: "G1",
       height: "E1",
@@ -8990,6 +9118,7 @@ var Select = {
     fontSize: "A",
     border: "none",
     boxSizing: "border-box",
+    theme: "field",
     cursor: "pointer"
   },
   childExtend: {
@@ -9531,7 +9660,7 @@ var returnPropertyValue = (el, property, def) => {
 var RangeWithButtons = {
   minus: {
     extend: SquareButton,
-    props: { theme: "tertiary", icon: "minus" },
+    props: { theme: "secondary", icon: "minus" },
     on: {
       click: (ev, el, s) => {
         const parentProps = el.parent.props;
@@ -9585,7 +9714,7 @@ var RangeWithButtons = {
   },
   plus: {
     extend: SquareButton,
-    props: { theme: "tertiary", icon: "plus" },
+    props: { theme: "secondary", icon: "plus" },
     on: {
       click: (ev, el, s) => {
         const parentProps = el.parent.props;
@@ -9626,27 +9755,6 @@ var style_default = {
 // Slider/index.js
 var import_scratch12 = __toESM(require_cjs());
 var import_utils12 = __toESM(require_cjs2());
-(0, import_scratch12.set)({
-  theme: {
-    sliderThumb: {
-      background: "white 0.2",
-      "&::-webkit-slider-thumb": {
-        background: "#232526",
-        borderColor: (0, import_scratch12.opacify)("#454646", 0.75)
-      },
-      "&:hover": {
-        "&::-webkit-slider-thumb": {
-          borderColor: (0, import_scratch12.opacify)("#fff", 0.35)
-        }
-      },
-      "&:focus, &:active": {
-        "&::-webkit-slider-thumb": {
-          borderColor: "#3C6AC0"
-        }
-      }
-    }
-  }
-});
 var RangeSlider = {
   style: style_default,
   props: {