@symbo.ls/scratch 2.27.0 → 2.27.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/factory.js +5 -8
- package/dist/cjs/index.js +177 -347
- package/dist/cjs/set.js +126 -241
- package/dist/cjs/system/color.js +53 -87
- package/dist/cjs/system/document.js +25 -29
- package/dist/cjs/system/font.js +29 -37
- package/dist/cjs/system/index.js +126 -244
- package/dist/cjs/system/reset.js +32 -43
- package/dist/cjs/system/shadow.js +68 -117
- package/dist/cjs/system/spacing.js +40 -59
- package/dist/cjs/system/svg.js +31 -42
- package/dist/cjs/system/theme.js +66 -113
- package/dist/cjs/system/timing.js +33 -45
- package/dist/cjs/system/typography.js +42 -73
- package/dist/cjs/transforms/index.js +91 -163
- package/dist/cjs/utils/color.js +21 -36
- package/dist/cjs/utils/font.js +3 -6
- package/dist/cjs/utils/index.js +62 -110
- package/dist/cjs/utils/sequence.js +25 -45
- package/dist/cjs/utils/sprite.js +15 -13
- package/dist/cjs/utils/theme.js +3 -6
- package/dist/cjs/utils/var.js +19 -33
- package/package.json +7 -7
- package/src/system/typography.js +12 -20
- package/src/utils/color.js +42 -31
- package/src/utils/sprite.js +12 -8
package/dist/cjs/system/index.js
CHANGED
|
@@ -51,8 +51,8 @@ var require_cjs = __commonJS({
|
|
|
51
51
|
return to;
|
|
52
52
|
};
|
|
53
53
|
var __toCommonJS2 = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
|
|
54
|
-
var
|
|
55
|
-
__export2(
|
|
54
|
+
var index_exports = {};
|
|
55
|
+
__export2(index_exports, {
|
|
56
56
|
arrayzeValue: () => arrayzeValue3,
|
|
57
57
|
copyJavaScriptToClipboard: () => copyJavaScriptToClipboard,
|
|
58
58
|
copyStringToClipboard: () => copyStringToClipboard,
|
|
@@ -73,12 +73,11 @@ var require_cjs = __commonJS({
|
|
|
73
73
|
toTitleCase: () => toTitleCase,
|
|
74
74
|
toggleFullscreen: () => toggleFullscreen
|
|
75
75
|
});
|
|
76
|
-
module2.exports = __toCommonJS2(
|
|
76
|
+
module2.exports = __toCommonJS2(index_exports);
|
|
77
77
|
var window22 = globalThis;
|
|
78
78
|
var document22 = window22.document;
|
|
79
79
|
var isObject2 = (arg) => {
|
|
80
|
-
if (arg === null)
|
|
81
|
-
return false;
|
|
80
|
+
if (arg === null) return false;
|
|
82
81
|
return typeof arg === "object" && arg.constructor === Object;
|
|
83
82
|
};
|
|
84
83
|
var isString2 = (arg) => typeof arg === "string";
|
|
@@ -103,13 +102,11 @@ var require_cjs = __commonJS({
|
|
|
103
102
|
};
|
|
104
103
|
var findClosestNumberInFactory = (val, factory) => {
|
|
105
104
|
val = parseFloat(val);
|
|
106
|
-
if (isObject2(factory))
|
|
107
|
-
factory = Object.values(factory);
|
|
105
|
+
if (isObject2(factory)) factory = Object.values(factory);
|
|
108
106
|
return findClosestNumber(val, factory);
|
|
109
107
|
};
|
|
110
108
|
var formatDate = (timestamp) => {
|
|
111
|
-
if (!timestamp)
|
|
112
|
-
return "";
|
|
109
|
+
if (!timestamp) return "";
|
|
113
110
|
const d = new Date(timestamp);
|
|
114
111
|
const ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
|
|
115
112
|
const mo = new Intl.DateTimeFormat("en", { month: "short" }).format(d);
|
|
@@ -176,8 +173,7 @@ var require_cjs = __commonJS({
|
|
|
176
173
|
scriptEle.type = type;
|
|
177
174
|
scriptEle.text = xhr.responseText;
|
|
178
175
|
doc.body.appendChild(scriptEle);
|
|
179
|
-
if (typeof fallback === "function")
|
|
180
|
-
fallback();
|
|
176
|
+
if (typeof fallback === "function") fallback();
|
|
181
177
|
} else {
|
|
182
178
|
throw new Error(`Failed to load the script ${FILE_URL}`);
|
|
183
179
|
}
|
|
@@ -245,20 +241,15 @@ var require_cjs = __commonJS({
|
|
|
245
241
|
);
|
|
246
242
|
var toDashCase2 = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
|
|
247
243
|
var toDescriptionCase = (str = "") => {
|
|
248
|
-
if (typeof str !== "string")
|
|
249
|
-
return;
|
|
244
|
+
if (typeof str !== "string") return;
|
|
250
245
|
const result = str.replace(/([A-Z])/g, " $1");
|
|
251
246
|
return result.charAt(0).toUpperCase() + result.slice(1);
|
|
252
247
|
};
|
|
253
248
|
var arrayzeValue3 = (val) => {
|
|
254
|
-
if (isArray2(val))
|
|
255
|
-
|
|
256
|
-
if (
|
|
257
|
-
|
|
258
|
-
if (isObject2(val))
|
|
259
|
-
return Object.values(val);
|
|
260
|
-
if (isNumber2(val))
|
|
261
|
-
return [val];
|
|
249
|
+
if (isArray2(val)) return val;
|
|
250
|
+
if (isString2(val)) return val.split(" ");
|
|
251
|
+
if (isObject2(val)) return Object.values(val);
|
|
252
|
+
if (isNumber2(val)) return [val];
|
|
262
253
|
};
|
|
263
254
|
}
|
|
264
255
|
});
|
|
@@ -298,6 +289,11 @@ __export(system_exports, {
|
|
|
298
289
|
});
|
|
299
290
|
module.exports = __toCommonJS(system_exports);
|
|
300
291
|
|
|
292
|
+
// ../../../domql/packages/utils/dist/esm/env.js
|
|
293
|
+
var NODE_ENV = "development";
|
|
294
|
+
var isProduction = (env = NODE_ENV) => env === "production";
|
|
295
|
+
var isNotProduction = (env = NODE_ENV) => !isProduction(env);
|
|
296
|
+
|
|
301
297
|
// ../../../domql/packages/utils/dist/esm/globals.js
|
|
302
298
|
var window2 = globalThis;
|
|
303
299
|
var document2 = window2.document;
|
|
@@ -309,8 +305,7 @@ var isDOMNode = (obj) => {
|
|
|
309
305
|
|
|
310
306
|
// ../../../domql/packages/utils/dist/esm/types.js
|
|
311
307
|
var isObject = (arg) => {
|
|
312
|
-
if (arg === null)
|
|
313
|
-
return false;
|
|
308
|
+
if (arg === null) return false;
|
|
314
309
|
return typeof arg === "object" && arg.constructor === Object;
|
|
315
310
|
};
|
|
316
311
|
var isString = (arg) => typeof arg === "string";
|
|
@@ -319,8 +314,7 @@ var isFunction = (arg) => typeof arg === "function";
|
|
|
319
314
|
var isNull = (arg) => arg === null;
|
|
320
315
|
var isArray = (arg) => Array.isArray(arg);
|
|
321
316
|
var isObjectLike = (arg) => {
|
|
322
|
-
if (arg === null)
|
|
323
|
-
return false;
|
|
317
|
+
if (arg === null) return false;
|
|
324
318
|
return typeof arg === "object";
|
|
325
319
|
};
|
|
326
320
|
var isUndefined = (arg) => {
|
|
@@ -401,8 +395,7 @@ var deepClone = (obj, options = {}) => {
|
|
|
401
395
|
const clone2 = targetWindow ? isArray(obj) ? new targetWindow.Array() : new targetWindow.Object() : isArray(obj) ? [] : {};
|
|
402
396
|
visited.set(obj, clone2);
|
|
403
397
|
for (const key in obj) {
|
|
404
|
-
if (!Object.prototype.hasOwnProperty.call(obj, key))
|
|
405
|
-
continue;
|
|
398
|
+
if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
|
|
406
399
|
if (exclude.includes(key) || key.startsWith("__") || key === "__proto__")
|
|
407
400
|
continue;
|
|
408
401
|
const value = obj[key];
|
|
@@ -436,14 +429,11 @@ var overwriteDeep = (obj, params, opts = {}, visited = /* @__PURE__ */ new WeakM
|
|
|
436
429
|
if (!isObjectLike(obj) || !isObjectLike(params) || isDOMNode(obj) || isDOMNode(params)) {
|
|
437
430
|
return params;
|
|
438
431
|
}
|
|
439
|
-
if (visited.has(obj))
|
|
440
|
-
return visited.get(obj);
|
|
432
|
+
if (visited.has(obj)) return visited.get(obj);
|
|
441
433
|
visited.set(obj, obj);
|
|
442
434
|
for (const e in params) {
|
|
443
|
-
if (!Object.hasOwnProperty.call(params, e))
|
|
444
|
-
|
|
445
|
-
if (excl.includes(e) || forcedExclude && e.startsWith("__"))
|
|
446
|
-
continue;
|
|
435
|
+
if (!Object.hasOwnProperty.call(params, e)) continue;
|
|
436
|
+
if (excl.includes(e) || forcedExclude && e.startsWith("__")) continue;
|
|
447
437
|
const objProp = obj[e];
|
|
448
438
|
const paramsProp = params[e];
|
|
449
439
|
if (isDOMNode(paramsProp)) {
|
|
@@ -688,10 +678,8 @@ var isScalingUnit = (unit) => {
|
|
|
688
678
|
|
|
689
679
|
// src/utils/color.js
|
|
690
680
|
var colorStringToRgbaArray = (color) => {
|
|
691
|
-
if (color === "")
|
|
692
|
-
|
|
693
|
-
if (color.toLowerCase() === "transparent")
|
|
694
|
-
return [0, 0, 0, 0];
|
|
681
|
+
if (color === "") return [0, 0, 0, 0];
|
|
682
|
+
if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
|
|
695
683
|
if (color[0] === "#") {
|
|
696
684
|
if (color.length < 7) {
|
|
697
685
|
color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
|
|
@@ -722,8 +710,7 @@ var colorStringToRgbaArray = (color) => {
|
|
|
722
710
|
}
|
|
723
711
|
}
|
|
724
712
|
if (color.indexOf("rgb") === 0) {
|
|
725
|
-
if (color.indexOf("rgba") === -1)
|
|
726
|
-
color = `${color}, 1`;
|
|
713
|
+
if (color.indexOf("rgba") === -1) color = `${color}, 1`;
|
|
727
714
|
return color.match(/[\.\d]+/g).map((a) => +a);
|
|
728
715
|
}
|
|
729
716
|
return [0, 0, 0, 0];
|
|
@@ -742,36 +729,25 @@ var rgbToHSL = (r, g, b) => {
|
|
|
742
729
|
const h = n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n);
|
|
743
730
|
return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2];
|
|
744
731
|
};
|
|
745
|
-
var hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) % 12) => l - a * Math.max(
|
|
746
|
-
Math.min(k - 3, 9 - k, 1),
|
|
747
|
-
-1
|
|
748
|
-
)) => [f(0), f(8), f(4)];
|
|
732
|
+
var hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)) => [f(0), f(8), f(4)];
|
|
749
733
|
var getColorShade = (col, amt) => {
|
|
750
734
|
const num = parseInt(col, 16);
|
|
751
735
|
let r = (num >> 16) + amt;
|
|
752
|
-
if (r > 255)
|
|
753
|
-
|
|
754
|
-
else if (r < 0)
|
|
755
|
-
r = 0;
|
|
736
|
+
if (r > 255) r = 255;
|
|
737
|
+
else if (r < 0) r = 0;
|
|
756
738
|
let b = (num >> 8 & 255) + amt;
|
|
757
|
-
if (b > 255)
|
|
758
|
-
|
|
759
|
-
else if (b < 0)
|
|
760
|
-
b = 0;
|
|
739
|
+
if (b > 255) b = 255;
|
|
740
|
+
else if (b < 0) b = 0;
|
|
761
741
|
let g = (num & 255) + amt;
|
|
762
|
-
if (g > 255)
|
|
763
|
-
|
|
764
|
-
else if (g < 0)
|
|
765
|
-
g = 0;
|
|
742
|
+
if (g > 255) g = 255;
|
|
743
|
+
else if (g < 0) g = 0;
|
|
766
744
|
return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
|
|
767
745
|
};
|
|
768
746
|
var getRgbTone = (rgb, tone) => {
|
|
769
747
|
if (isString(rgb) && rgb.includes("rgb"))
|
|
770
748
|
rgb = colorStringToRgbaArray(rgb).join(", ");
|
|
771
|
-
if (isString(rgb))
|
|
772
|
-
|
|
773
|
-
if (isNumber(tone))
|
|
774
|
-
tone += "";
|
|
749
|
+
if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
|
|
750
|
+
if (isNumber(tone)) tone += "";
|
|
775
751
|
const toHex = rgbArrayToHex(rgb);
|
|
776
752
|
const abs = tone.slice(0, 1);
|
|
777
753
|
if (abs === "-" || abs === "+") {
|
|
@@ -788,10 +764,8 @@ var getRgbTone = (rgb, tone) => {
|
|
|
788
764
|
|
|
789
765
|
// src/utils/font.js
|
|
790
766
|
var getDefaultOrFirstKey = (LIBRARY, key) => {
|
|
791
|
-
if (LIBRARY[key])
|
|
792
|
-
|
|
793
|
-
if (LIBRARY.default)
|
|
794
|
-
return LIBRARY[LIBRARY.default].value;
|
|
767
|
+
if (LIBRARY[key]) return LIBRARY[key].value;
|
|
768
|
+
if (LIBRARY.default) return LIBRARY[LIBRARY.default].value;
|
|
795
769
|
const hasValue = Object.keys(LIBRARY)[0];
|
|
796
770
|
return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
|
|
797
771
|
};
|
|
@@ -859,8 +833,7 @@ var setSequenceValue = (props, sequenceProps) => {
|
|
|
859
833
|
var setScalingVar = (key, sequenceProps) => {
|
|
860
834
|
const { base, type, unit } = sequenceProps;
|
|
861
835
|
const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
|
|
862
|
-
if (key === 0)
|
|
863
|
-
return defaultVal;
|
|
836
|
+
if (key === 0) return defaultVal;
|
|
864
837
|
const prefix = "--" + (type && type.replace(".", "-"));
|
|
865
838
|
const ratioVar = `${prefix}-ratio`;
|
|
866
839
|
if (key > 0) {
|
|
@@ -897,10 +870,8 @@ var generateSubSequence = (props, sequenceProps) => {
|
|
|
897
870
|
const diffRounded = ~~next - ~~value;
|
|
898
871
|
let arr;
|
|
899
872
|
const [first, middle, second] = getSubratioDifference(value, ratio);
|
|
900
|
-
if (diffRounded > 16)
|
|
901
|
-
|
|
902
|
-
else
|
|
903
|
-
arr = [first, second];
|
|
873
|
+
if (diffRounded > 16) arr = [first, middle, second];
|
|
874
|
+
else arr = [first, second];
|
|
904
875
|
arr.forEach((v, k) => {
|
|
905
876
|
const scaling = ~~(v / base * 1e3) / 1e3;
|
|
906
877
|
const newVar = variable + (k + 1);
|
|
@@ -942,8 +913,7 @@ var generateSequence = (sequenceProps) => {
|
|
|
942
913
|
index: key
|
|
943
914
|
};
|
|
944
915
|
setSequenceValue(props, sequenceProps);
|
|
945
|
-
if (subSequence)
|
|
946
|
-
generateSubSequence(props, sequenceProps);
|
|
916
|
+
if (subSequence) generateSubSequence(props, sequenceProps);
|
|
947
917
|
}
|
|
948
918
|
return sequenceProps;
|
|
949
919
|
};
|
|
@@ -955,13 +925,11 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
955
925
|
unit = UNIT2.default,
|
|
956
926
|
useVariable
|
|
957
927
|
} = sequenceProps;
|
|
958
|
-
if (isString(value) && value.slice(0, 2) === "--")
|
|
959
|
-
return `var(${value})`;
|
|
928
|
+
if (isString(value) && value.slice(0, 2) === "--") return `var(${value})`;
|
|
960
929
|
const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
|
|
961
930
|
const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
|
|
962
931
|
const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
|
|
963
|
-
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)
|
|
964
|
-
return value;
|
|
932
|
+
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;
|
|
965
933
|
const letterVal = value.toUpperCase();
|
|
966
934
|
const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
|
|
967
935
|
let absValue = isNegative ? letterVal.slice(1) : letterVal;
|
|
@@ -985,8 +953,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
985
953
|
return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
|
|
986
954
|
}
|
|
987
955
|
if (!sequence[absValue] && absValue.length === 2) {
|
|
988
|
-
if (CONFIG2.verbose)
|
|
989
|
-
console.warn(absValue, "- value is not found because `subSequence` is set to false");
|
|
956
|
+
if (CONFIG2.verbose) console.warn(absValue, "- value is not found because `subSequence` is set to false");
|
|
990
957
|
absValue = absValue.slice(0, 1);
|
|
991
958
|
}
|
|
992
959
|
if (useVariable || CONFIG2.useVariable) {
|
|
@@ -994,8 +961,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
994
961
|
return isNegative ? `calc(${varValue2} * -1)` : varValue2;
|
|
995
962
|
}
|
|
996
963
|
const sequenceItem = sequence ? sequence[absValue] : null;
|
|
997
|
-
if (!sequenceItem)
|
|
998
|
-
return console.warn("can't find", sequence, absValue);
|
|
964
|
+
if (!sequenceItem) return console.warn("can't find", sequence, absValue);
|
|
999
965
|
if (unit === "ms" || unit === "s") {
|
|
1000
966
|
return isNegative + sequenceItem.val + unit;
|
|
1001
967
|
}
|
|
@@ -1004,12 +970,10 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
1004
970
|
var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
|
|
1005
971
|
if (typeof value !== "string") {
|
|
1006
972
|
const CONFIG2 = getActiveConfig();
|
|
1007
|
-
if (CONFIG2.verbose)
|
|
1008
|
-
console.warn(propertyName, value, "is not a string");
|
|
973
|
+
if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
|
|
1009
974
|
return { [propertyName]: value };
|
|
1010
975
|
}
|
|
1011
|
-
if (value === "-" || value === "")
|
|
1012
|
-
return {};
|
|
976
|
+
if (value === "-" || value === "") return {};
|
|
1013
977
|
return { [propertyName]: getSequenceValue(value, sequenceProps) };
|
|
1014
978
|
};
|
|
1015
979
|
var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
|
|
@@ -1069,39 +1033,32 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
|
|
|
1069
1033
|
const { mediaRegenerate } = FACTORY2;
|
|
1070
1034
|
const { sequence, scales } = FACTORY2[media];
|
|
1071
1035
|
const query = MEDIA2[mediaName];
|
|
1072
|
-
if (!query && CONFIG2.verbose)
|
|
1073
|
-
console.warn("Can't find media query ", query);
|
|
1036
|
+
if (!query && CONFIG2.verbose) console.warn("Can't find media query ", query);
|
|
1074
1037
|
if (!mediaRegenerate) {
|
|
1075
1038
|
let underMediaQuery = CSS_VARS2[`@media ${query}`];
|
|
1076
|
-
if (!underMediaQuery)
|
|
1077
|
-
underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
1039
|
+
if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
1078
1040
|
applySequenceGlobalVars(underMediaQuery, FACTORY2[media], options);
|
|
1079
1041
|
return;
|
|
1080
1042
|
}
|
|
1081
1043
|
for (const key in sequence) {
|
|
1082
1044
|
const item = sequence[key];
|
|
1083
1045
|
const value = (isScalingUnit(unit) ? scales[key] : sequence[key].val) + unit;
|
|
1084
|
-
if (!query && CONFIG2.verbose)
|
|
1085
|
-
console.warn("Can't find query ", query);
|
|
1046
|
+
if (!query && CONFIG2.verbose) console.warn("Can't find query ", query);
|
|
1086
1047
|
let underMediaQuery = CSS_VARS2[`@media ${query}`];
|
|
1087
|
-
if (!underMediaQuery)
|
|
1088
|
-
underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
1048
|
+
if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
1089
1049
|
underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
|
|
1090
1050
|
CSS_VARS2[item.variable + "_" + mediaName] = value;
|
|
1091
1051
|
}
|
|
1092
1052
|
};
|
|
1093
1053
|
|
|
1094
1054
|
// src/utils/sprite.js
|
|
1095
|
-
var
|
|
1096
|
-
var isDev = ENV === "development" || ENV === "testing";
|
|
1055
|
+
var isDev = isNotProduction();
|
|
1097
1056
|
var generateSprite = (icons) => {
|
|
1098
1057
|
const CONFIG2 = getActiveConfig();
|
|
1099
1058
|
let sprite = "";
|
|
1100
1059
|
for (const key in icons) {
|
|
1101
|
-
if (CONFIG2.__svg_cache[key])
|
|
1102
|
-
|
|
1103
|
-
else
|
|
1104
|
-
CONFIG2.__svg_cache[key] = true;
|
|
1060
|
+
if (CONFIG2.__svg_cache[key]) continue;
|
|
1061
|
+
else CONFIG2.__svg_cache[key] = true;
|
|
1105
1062
|
sprite += icons[key];
|
|
1106
1063
|
}
|
|
1107
1064
|
return sprite;
|
|
@@ -1109,8 +1066,7 @@ var generateSprite = (icons) => {
|
|
|
1109
1066
|
var parseRootAttributes = (htmlString) => {
|
|
1110
1067
|
const val = htmlString.default || htmlString;
|
|
1111
1068
|
if (!isString(val)) {
|
|
1112
|
-
if (isDev)
|
|
1113
|
-
console.warn("parseRootAttributes:", val, "is not a string");
|
|
1069
|
+
if (isDev) console.warn("parseRootAttributes:", val, "is not a string");
|
|
1114
1070
|
return;
|
|
1115
1071
|
}
|
|
1116
1072
|
const match = val.match(/<svg\s+(.*?)>/);
|
|
@@ -1118,7 +1074,9 @@ var parseRootAttributes = (htmlString) => {
|
|
|
1118
1074
|
return {};
|
|
1119
1075
|
}
|
|
1120
1076
|
const attrString = match[1];
|
|
1121
|
-
const attrs = attrString.match(
|
|
1077
|
+
const attrs = attrString.match(
|
|
1078
|
+
/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
|
|
1079
|
+
);
|
|
1122
1080
|
return attrs.reduce((acc, attr) => {
|
|
1123
1081
|
const [key, value] = attr.split("=");
|
|
1124
1082
|
acc[key] = value.replace(/['"]/g, "");
|
|
@@ -1158,27 +1116,21 @@ var convertSvgToSymbol = (key, code) => {
|
|
|
1158
1116
|
var getColor = (value, key, config) => {
|
|
1159
1117
|
const CONFIG2 = config || getActiveConfig();
|
|
1160
1118
|
if (!isString(value)) {
|
|
1161
|
-
if (CONFIG2.verbose)
|
|
1162
|
-
console.warn(value, "- type for color is not valid");
|
|
1119
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1163
1120
|
return;
|
|
1164
1121
|
}
|
|
1165
|
-
if (value.slice(0, 2) === "--")
|
|
1166
|
-
|
|
1167
|
-
if (key && value[key])
|
|
1168
|
-
value = value[key];
|
|
1122
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1123
|
+
if (key && value[key]) value = value[key];
|
|
1169
1124
|
const [name, alpha, tone] = isArray(value) ? value : value.split(" ");
|
|
1170
1125
|
const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
|
|
1171
1126
|
let val = COLOR2[name] || GRADIENT2[name];
|
|
1172
1127
|
if (!val) {
|
|
1173
|
-
if (CONFIG2.verbose)
|
|
1174
|
-
console.warn("Can't find color ", name);
|
|
1128
|
+
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
1175
1129
|
return value;
|
|
1176
1130
|
}
|
|
1177
1131
|
if (key) {
|
|
1178
|
-
if (val[key])
|
|
1179
|
-
|
|
1180
|
-
else if (CONFIG2.verbose)
|
|
1181
|
-
console.warn(value, " - does not have ", key);
|
|
1132
|
+
if (val[key]) val = val[key];
|
|
1133
|
+
else if (CONFIG2.verbose) console.warn(value, " - does not have ", key);
|
|
1182
1134
|
}
|
|
1183
1135
|
let rgb = val.rgb;
|
|
1184
1136
|
if (!rgb) {
|
|
@@ -1188,32 +1140,25 @@ var getColor = (value, key, config) => {
|
|
|
1188
1140
|
rgb = getRgbTone(rgb, tone);
|
|
1189
1141
|
val[tone] = { rgb, var: `${val.var}-${tone}` };
|
|
1190
1142
|
}
|
|
1191
|
-
if (val[tone])
|
|
1192
|
-
|
|
1193
|
-
if (alpha)
|
|
1194
|
-
return `rgba(${rgb}, ${alpha})`;
|
|
1143
|
+
if (val[tone]) rgb = val[tone].rgb;
|
|
1144
|
+
if (alpha) return `rgba(${rgb}, ${alpha})`;
|
|
1195
1145
|
return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
|
|
1196
1146
|
};
|
|
1197
1147
|
var getMediaColor = (value, globalTheme, config) => {
|
|
1198
1148
|
const CONFIG2 = config || getActiveConfig();
|
|
1199
|
-
if (!globalTheme)
|
|
1200
|
-
globalTheme = CONFIG2.globalTheme;
|
|
1149
|
+
if (!globalTheme) globalTheme = CONFIG2.globalTheme;
|
|
1201
1150
|
if (!isString(value)) {
|
|
1202
|
-
if (CONFIG2.verbose)
|
|
1203
|
-
console.warn(value, "- type for color is not valid");
|
|
1151
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1204
1152
|
return;
|
|
1205
1153
|
}
|
|
1206
|
-
if (value.slice(0, 2) === "--")
|
|
1207
|
-
return `var(${value})`;
|
|
1154
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1208
1155
|
const [name] = isArray(value) ? value : value.split(" ");
|
|
1209
1156
|
const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
|
|
1210
1157
|
const val = COLOR2[name] || GRADIENT2[name];
|
|
1211
1158
|
const isObj = isObject(val);
|
|
1212
|
-
if (isObj && val.value)
|
|
1213
|
-
return getColor(value, `@${globalTheme}`, config);
|
|
1159
|
+
if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
|
|
1214
1160
|
else if (isObj) {
|
|
1215
|
-
if (globalTheme)
|
|
1216
|
-
return getColor(value, `@${globalTheme}`, config);
|
|
1161
|
+
if (globalTheme) return getColor(value, `@${globalTheme}`, config);
|
|
1217
1162
|
else {
|
|
1218
1163
|
const obj = {};
|
|
1219
1164
|
for (const mediaName in val) {
|
|
@@ -1224,8 +1169,7 @@ var getMediaColor = (value, globalTheme, config) => {
|
|
|
1224
1169
|
return obj;
|
|
1225
1170
|
}
|
|
1226
1171
|
} else {
|
|
1227
|
-
if (CONFIG2.verbose)
|
|
1228
|
-
console.warn("Can't find color", value);
|
|
1172
|
+
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
1229
1173
|
return value;
|
|
1230
1174
|
}
|
|
1231
1175
|
};
|
|
@@ -1234,8 +1178,7 @@ var setColor = (val, key, suffix) => {
|
|
|
1234
1178
|
if (isString(val) && val.slice(0, 2) === "--") {
|
|
1235
1179
|
val = getColor(val.slice(2));
|
|
1236
1180
|
if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
|
|
1237
|
-
if (CONFIG2.verbose)
|
|
1238
|
-
console.warn(val, "- referred but does not exist");
|
|
1181
|
+
if (CONFIG2.verbose) console.warn(val, "- referred but does not exist");
|
|
1239
1182
|
val = val.split(" ")[0];
|
|
1240
1183
|
}
|
|
1241
1184
|
}
|
|
@@ -1274,8 +1217,7 @@ var setColor = (val, key, suffix) => {
|
|
|
1274
1217
|
};
|
|
1275
1218
|
var setGradient = (val, key, suffix) => {
|
|
1276
1219
|
const CONFIG2 = getActiveConfig();
|
|
1277
|
-
if (isString(val) && val.slice(0, 2) === "--")
|
|
1278
|
-
val = getColor(val.slice(2));
|
|
1220
|
+
if (isString(val) && val.slice(0, 2) === "--") val = getColor(val.slice(2));
|
|
1279
1221
|
if (isArray(val)) {
|
|
1280
1222
|
return {
|
|
1281
1223
|
"@light": setGradient(val[0], key, "light"),
|
|
@@ -1284,8 +1226,7 @@ var setGradient = (val, key, suffix) => {
|
|
|
1284
1226
|
}
|
|
1285
1227
|
if (isObject(val)) {
|
|
1286
1228
|
const obj = {};
|
|
1287
|
-
for (const variant in val)
|
|
1288
|
-
obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
|
|
1229
|
+
for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
|
|
1289
1230
|
return obj;
|
|
1290
1231
|
}
|
|
1291
1232
|
const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
|
|
@@ -1311,22 +1252,19 @@ var setThemeValue = (theme) => {
|
|
|
1311
1252
|
return value;
|
|
1312
1253
|
};
|
|
1313
1254
|
var getThemeValue = (theme) => {
|
|
1314
|
-
if (theme.value)
|
|
1315
|
-
return theme.value;
|
|
1255
|
+
if (theme.value) return theme.value;
|
|
1316
1256
|
theme.value = setThemeValue(theme);
|
|
1317
1257
|
return theme.value;
|
|
1318
1258
|
};
|
|
1319
1259
|
var getTheme = (value, modifier) => {
|
|
1320
1260
|
const CONFIG2 = getActiveConfig();
|
|
1321
|
-
if (CONFIG2.useVariable)
|
|
1322
|
-
return getMediaTheme(value, modifier);
|
|
1261
|
+
if (CONFIG2.useVariable) return getMediaTheme(value, modifier);
|
|
1323
1262
|
const { THEME: THEME2 } = CONFIG2;
|
|
1324
1263
|
if (isString(value)) {
|
|
1325
1264
|
const [theme, subtheme] = value.split(" ");
|
|
1326
1265
|
const isOurTheme = THEME2[theme];
|
|
1327
1266
|
if (isOurTheme) {
|
|
1328
|
-
if (!subtheme && !modifier)
|
|
1329
|
-
return getThemeValue(isOurTheme);
|
|
1267
|
+
if (!subtheme && !modifier) return getThemeValue(isOurTheme);
|
|
1330
1268
|
value = [theme, subtheme || modifier];
|
|
1331
1269
|
}
|
|
1332
1270
|
}
|
|
@@ -1334,14 +1272,10 @@ var getTheme = (value, modifier) => {
|
|
|
1334
1272
|
const themeName = value[0];
|
|
1335
1273
|
const subThemeName = value[1];
|
|
1336
1274
|
const { helpers, media, state } = THEME2[themeName];
|
|
1337
|
-
if (media && media[subThemeName])
|
|
1338
|
-
|
|
1339
|
-
if (
|
|
1340
|
-
|
|
1341
|
-
if (state && state[subThemeName])
|
|
1342
|
-
return getThemeValue(state[subThemeName]);
|
|
1343
|
-
} else if (isObject(value))
|
|
1344
|
-
return setThemeValue(value);
|
|
1275
|
+
if (media && media[subThemeName]) return getThemeValue(media[subThemeName]);
|
|
1276
|
+
if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName]);
|
|
1277
|
+
if (state && state[subThemeName]) return getThemeValue(state[subThemeName]);
|
|
1278
|
+
} else if (isObject(value)) return setThemeValue(value);
|
|
1345
1279
|
};
|
|
1346
1280
|
var setInverseTheme = (theme, variant, value) => {
|
|
1347
1281
|
if (isObject(variant)) {
|
|
@@ -1359,13 +1293,11 @@ var setInverseTheme = (theme, variant, value) => {
|
|
|
1359
1293
|
var setPseudo = (theme, key, variant, themeValue) => {
|
|
1360
1294
|
const result = getTheme(variant);
|
|
1361
1295
|
themeValue[`&:${key}`] = result;
|
|
1362
|
-
if (isObject(variant) && !variant.value)
|
|
1363
|
-
variant.value = result;
|
|
1296
|
+
if (isObject(variant) && !variant.value) variant.value = result;
|
|
1364
1297
|
};
|
|
1365
1298
|
var setSelectors = (theme, value) => {
|
|
1366
1299
|
const { state } = theme;
|
|
1367
|
-
if (!state)
|
|
1368
|
-
return;
|
|
1300
|
+
if (!state) return;
|
|
1369
1301
|
const keys = Object.keys(state);
|
|
1370
1302
|
keys.map((key) => {
|
|
1371
1303
|
const variant = state[key];
|
|
@@ -1377,20 +1309,16 @@ var setSelectors = (theme, value) => {
|
|
|
1377
1309
|
var setPrefersScheme = (theme, key, variant, themeValue) => {
|
|
1378
1310
|
const result = getTheme(variant);
|
|
1379
1311
|
themeValue[`@media (prefers-color-scheme: ${key})`] = result;
|
|
1380
|
-
if (isObject(variant) && !variant.value)
|
|
1381
|
-
variant.value = result;
|
|
1312
|
+
if (isObject(variant) && !variant.value) variant.value = result;
|
|
1382
1313
|
};
|
|
1383
1314
|
var setMedia = (theme, value) => {
|
|
1384
1315
|
const { media } = theme;
|
|
1385
|
-
if (!media)
|
|
1386
|
-
return;
|
|
1316
|
+
if (!media) return;
|
|
1387
1317
|
const keys = Object.keys(media);
|
|
1388
1318
|
keys.map((key) => {
|
|
1389
1319
|
const variant = media[key];
|
|
1390
|
-
if (key === "dark" || key === "light")
|
|
1391
|
-
|
|
1392
|
-
if (key === "inverse")
|
|
1393
|
-
setInverseTheme(theme, variant, value);
|
|
1320
|
+
if (key === "dark" || key === "light") setPrefersScheme(theme, key, variant, value);
|
|
1321
|
+
if (key === "inverse") setInverseTheme(theme, variant, value);
|
|
1394
1322
|
return theme;
|
|
1395
1323
|
});
|
|
1396
1324
|
return theme;
|
|
@@ -1398,23 +1326,19 @@ var setMedia = (theme, value) => {
|
|
|
1398
1326
|
var setHelpers = (theme, value) => {
|
|
1399
1327
|
const CONFIG2 = getActiveConfig();
|
|
1400
1328
|
const { helpers } = theme;
|
|
1401
|
-
if (!helpers)
|
|
1402
|
-
return;
|
|
1329
|
+
if (!helpers) return;
|
|
1403
1330
|
const keys = Object.keys(helpers);
|
|
1404
1331
|
keys.map((key) => {
|
|
1405
1332
|
const helper = helpers[key];
|
|
1406
|
-
if (isString(helper))
|
|
1407
|
-
|
|
1408
|
-
else
|
|
1409
|
-
getThemeValue(helpers[key]);
|
|
1333
|
+
if (isString(helper)) helpers[key] = CONFIG2.THEME[helper];
|
|
1334
|
+
else getThemeValue(helpers[key]);
|
|
1410
1335
|
return theme;
|
|
1411
1336
|
});
|
|
1412
1337
|
return theme;
|
|
1413
1338
|
};
|
|
1414
1339
|
var setTheme = (val, key) => {
|
|
1415
1340
|
const CONFIG2 = getActiveConfig();
|
|
1416
|
-
if (CONFIG2.useVariable)
|
|
1417
|
-
return setMediaTheme(val, key);
|
|
1341
|
+
if (CONFIG2.useVariable) return setMediaTheme(val, key);
|
|
1418
1342
|
const { state, media, helpers } = val;
|
|
1419
1343
|
const value = setThemeValue(val, key);
|
|
1420
1344
|
const CSSvar = `--theme-${key}`;
|
|
@@ -1476,24 +1400,19 @@ var recursiveTheme = (val) => {
|
|
|
1476
1400
|
} else if (symb === ":") {
|
|
1477
1401
|
obj[`&${param}`] = recursiveTheme(val[param]);
|
|
1478
1402
|
}
|
|
1479
|
-
} else
|
|
1480
|
-
obj[param] = val[param];
|
|
1403
|
+
} else obj[param] = val[param];
|
|
1481
1404
|
}
|
|
1482
1405
|
return obj;
|
|
1483
1406
|
};
|
|
1484
1407
|
var findModifierFromArray = (val, modifierArray) => {
|
|
1485
1408
|
const currentMod = modifierArray.shift();
|
|
1486
|
-
if (val[currentMod])
|
|
1487
|
-
return findModifierFromArray(val[currentMod], modifierArray);
|
|
1409
|
+
if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray);
|
|
1488
1410
|
return val;
|
|
1489
1411
|
};
|
|
1490
1412
|
var findModifier = (val, modifier) => {
|
|
1491
|
-
if (isArray(modifier))
|
|
1492
|
-
|
|
1493
|
-
else
|
|
1494
|
-
return val[modifier];
|
|
1495
|
-
else
|
|
1496
|
-
return val;
|
|
1413
|
+
if (isArray(modifier)) return findModifierFromArray(val, modifier);
|
|
1414
|
+
else if (isString(modifier) && val[modifier]) return val[modifier];
|
|
1415
|
+
else return val;
|
|
1497
1416
|
};
|
|
1498
1417
|
var getMediaTheme = (value, modifier) => {
|
|
1499
1418
|
const activeConfig = getActiveConfig();
|
|
@@ -1519,8 +1438,7 @@ var getMediaTheme = (value, modifier) => {
|
|
|
1519
1438
|
var import_utils11 = __toESM(require_cjs(), 1);
|
|
1520
1439
|
var setFont = (val, key) => {
|
|
1521
1440
|
const CSSvar = `--font-${key}`;
|
|
1522
|
-
if (!val || isArray(val) && !val[0])
|
|
1523
|
-
return;
|
|
1441
|
+
if (!val || isArray(val) && !val[0]) return;
|
|
1524
1442
|
const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
|
|
1525
1443
|
return { var: CSSvar, value: val, fontFace };
|
|
1526
1444
|
};
|
|
@@ -1533,10 +1451,8 @@ var setFontFamily = (val, key) => {
|
|
|
1533
1451
|
const CONFIG2 = getActiveConfig();
|
|
1534
1452
|
const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG2;
|
|
1535
1453
|
let { value, type } = val;
|
|
1536
|
-
if (val.isDefault)
|
|
1537
|
-
|
|
1538
|
-
if (isObject(value))
|
|
1539
|
-
value = (0, import_utils11.arrayzeValue)(value);
|
|
1454
|
+
if (val.isDefault) FONT_FAMILY2.default = key;
|
|
1455
|
+
if (isObject(value)) value = (0, import_utils11.arrayzeValue)(value);
|
|
1540
1456
|
const CSSvar = `--font-family-${key}`;
|
|
1541
1457
|
const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
|
|
1542
1458
|
return { var: CSSvar, value: str, arr: value, type };
|
|
@@ -1549,19 +1465,10 @@ var runThroughMedia = (FACTORY2) => {
|
|
|
1549
1465
|
for (const prop in FACTORY2) {
|
|
1550
1466
|
const isPropMedia = prop.slice(0, 1) === "@";
|
|
1551
1467
|
const mediaValue = FACTORY2[prop];
|
|
1552
|
-
if (!isPropMedia)
|
|
1553
|
-
continue;
|
|
1468
|
+
if (!isPropMedia) continue;
|
|
1554
1469
|
const { mediaRegenerate } = FACTORY2;
|
|
1555
1470
|
const mediaName = prop.slice(1);
|
|
1556
|
-
const {
|
|
1557
|
-
type,
|
|
1558
|
-
base,
|
|
1559
|
-
ratio,
|
|
1560
|
-
range,
|
|
1561
|
-
subSequence,
|
|
1562
|
-
h1Matches,
|
|
1563
|
-
unit
|
|
1564
|
-
} = FACTORY2;
|
|
1471
|
+
const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY2;
|
|
1565
1472
|
merge(mediaValue, {
|
|
1566
1473
|
type,
|
|
1567
1474
|
base,
|
|
@@ -1591,7 +1498,7 @@ var runThroughMedia = (FACTORY2) => {
|
|
|
1591
1498
|
}
|
|
1592
1499
|
};
|
|
1593
1500
|
var applyHeadings = (props) => {
|
|
1594
|
-
var _a;
|
|
1501
|
+
var _a, _b;
|
|
1595
1502
|
const CONFIG2 = getActiveConfig();
|
|
1596
1503
|
if (props.h1Matches) {
|
|
1597
1504
|
const unit = props.unit;
|
|
@@ -1600,10 +1507,8 @@ var applyHeadings = (props) => {
|
|
|
1600
1507
|
for (const k in HEADINGS) {
|
|
1601
1508
|
const headerName = `h${parseInt(k) + 1}`;
|
|
1602
1509
|
const headerStyle = templates[headerName];
|
|
1603
|
-
if (!HEADINGS[k])
|
|
1604
|
-
continue;
|
|
1605
1510
|
templates[headerName] = {
|
|
1606
|
-
fontSize: CONFIG2.useVariable ? `var(${(_a = HEADINGS[k]) == null ? void 0 : _a.variable})` : `${HEADINGS[k].scaling}${unit}`,
|
|
1511
|
+
fontSize: CONFIG2.useVariable ? `var(${(_a = HEADINGS[k]) == null ? void 0 : _a.variable})` : `${(_b = HEADINGS[k]) == null ? void 0 : _b.scaling}${unit}`,
|
|
1607
1512
|
margin: headerStyle ? headerStyle.margin : 0,
|
|
1608
1513
|
lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
|
|
1609
1514
|
letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
|
|
@@ -1623,11 +1528,7 @@ var applyTypographySequence = () => {
|
|
|
1623
1528
|
var getFontSizeByKey = (value) => {
|
|
1624
1529
|
const CONFIG2 = getActiveConfig();
|
|
1625
1530
|
const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
|
|
1626
|
-
return getSequenceValuePropertyPair(
|
|
1627
|
-
value,
|
|
1628
|
-
"fontSize",
|
|
1629
|
-
TYPOGRAPHY2
|
|
1630
|
-
);
|
|
1531
|
+
return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY2);
|
|
1631
1532
|
};
|
|
1632
1533
|
|
|
1633
1534
|
// src/system/spacing.js
|
|
@@ -1636,8 +1537,7 @@ var runThroughMedia2 = (FACTORY2) => {
|
|
|
1636
1537
|
for (const prop in FACTORY2) {
|
|
1637
1538
|
const mediaProps = FACTORY2[prop];
|
|
1638
1539
|
const isMediaName = prop.slice(0, 1) === "@";
|
|
1639
|
-
if (!isMediaName)
|
|
1640
|
-
continue;
|
|
1540
|
+
if (!isMediaName) continue;
|
|
1641
1541
|
const {
|
|
1642
1542
|
type,
|
|
1643
1543
|
base,
|
|
@@ -1674,8 +1574,7 @@ var applySpacingSequence = () => {
|
|
|
1674
1574
|
var getSequence = (sequenceProps) => {
|
|
1675
1575
|
const CONFIG2 = getActiveConfig();
|
|
1676
1576
|
const { SPACING: SPACING2 } = CONFIG2;
|
|
1677
|
-
if (!sequenceProps)
|
|
1678
|
-
return SPACING2;
|
|
1577
|
+
if (!sequenceProps) return SPACING2;
|
|
1679
1578
|
const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
|
|
1680
1579
|
return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
|
|
1681
1580
|
};
|
|
@@ -1685,8 +1584,7 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
|
|
|
1685
1584
|
return { [propertyName]: value };
|
|
1686
1585
|
}
|
|
1687
1586
|
const stack = (0, import_utils15.arrayzeValue)(value);
|
|
1688
|
-
if (!isArray(stack))
|
|
1689
|
-
return;
|
|
1587
|
+
if (!isArray(stack)) return;
|
|
1690
1588
|
if (stack.length > 1) {
|
|
1691
1589
|
let suffix = "";
|
|
1692
1590
|
if (propertyName === "borderWidth") {
|
|
@@ -1765,15 +1663,11 @@ var setShadow = (value, key, suffix, prefers) => {
|
|
|
1765
1663
|
if (isString(value) && value.includes(",")) {
|
|
1766
1664
|
value = value.split(",").map((v) => {
|
|
1767
1665
|
v = v.trim();
|
|
1768
|
-
if (v.startsWith("--"))
|
|
1769
|
-
|
|
1770
|
-
if (
|
|
1771
|
-
return getColor(v);
|
|
1772
|
-
if (v.includes("px") || v.slice(-2) === "em")
|
|
1773
|
-
return v;
|
|
1666
|
+
if (v.startsWith("--")) return `var(${v})`;
|
|
1667
|
+
if (getColor(v).length > 2) return getColor(v);
|
|
1668
|
+
if (v.includes("px") || v.slice(-2) === "em") return v;
|
|
1774
1669
|
const arr = v.split(" ");
|
|
1775
|
-
if (!arr.length)
|
|
1776
|
-
return v;
|
|
1670
|
+
if (!arr.length) return v;
|
|
1777
1671
|
return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
|
|
1778
1672
|
}).join(" ");
|
|
1779
1673
|
}
|
|
@@ -1788,32 +1682,25 @@ var setShadow = (value, key, suffix, prefers) => {
|
|
|
1788
1682
|
};
|
|
1789
1683
|
var getShadow = (value, globalTheme) => {
|
|
1790
1684
|
const CONFIG2 = getActiveConfig();
|
|
1791
|
-
if (!globalTheme)
|
|
1792
|
-
globalTheme = CONFIG2.globalTheme;
|
|
1685
|
+
if (!globalTheme) globalTheme = CONFIG2.globalTheme;
|
|
1793
1686
|
if (!isString(value)) {
|
|
1794
|
-
if (CONFIG2.verbose)
|
|
1795
|
-
console.warn(value, "- type for color is not valid");
|
|
1687
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1796
1688
|
return;
|
|
1797
1689
|
}
|
|
1798
|
-
if (value.slice(0, 2) === "--")
|
|
1799
|
-
return `var(${value})`;
|
|
1690
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1800
1691
|
const [name] = isArray(value) ? value : value.split(" ");
|
|
1801
1692
|
const { SHADOW: SHADOW2 } = CONFIG2;
|
|
1802
1693
|
const val = SHADOW2[name];
|
|
1803
1694
|
const isObj = isObject(val);
|
|
1804
1695
|
if (!val) {
|
|
1805
|
-
if (CONFIG2.verbose)
|
|
1806
|
-
console.warn("Can't find color ", name);
|
|
1696
|
+
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
1807
1697
|
return value;
|
|
1808
1698
|
}
|
|
1809
1699
|
if (globalTheme) {
|
|
1810
|
-
if (val[globalTheme])
|
|
1811
|
-
|
|
1812
|
-
else if (CONFIG2.verbose)
|
|
1813
|
-
console.warn(value, " - does not have ", globalTheme);
|
|
1700
|
+
if (val[globalTheme]) return val[globalTheme].value;
|
|
1701
|
+
else if (CONFIG2.verbose) console.warn(value, " - does not have ", globalTheme);
|
|
1814
1702
|
}
|
|
1815
|
-
if (isObj && val.value)
|
|
1816
|
-
return val.value;
|
|
1703
|
+
if (isObj && val.value) return val.value;
|
|
1817
1704
|
if (isObj) {
|
|
1818
1705
|
const obj = {};
|
|
1819
1706
|
for (const mediaName in val) {
|
|
@@ -1823,8 +1710,7 @@ var getShadow = (value, globalTheme) => {
|
|
|
1823
1710
|
}
|
|
1824
1711
|
return obj;
|
|
1825
1712
|
}
|
|
1826
|
-
if (CONFIG2.verbose)
|
|
1827
|
-
console.warn("Can't find color", value);
|
|
1713
|
+
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
1828
1714
|
return value;
|
|
1829
1715
|
};
|
|
1830
1716
|
|
|
@@ -1870,8 +1756,7 @@ var DEF_OPTIONS = {
|
|
|
1870
1756
|
var setSVG = (val, key) => {
|
|
1871
1757
|
const CONFIG2 = getActiveConfig();
|
|
1872
1758
|
if (!val) {
|
|
1873
|
-
if (CONFIG2.verbose)
|
|
1874
|
-
console.warn("setSVG: val is not defined", key);
|
|
1759
|
+
if (CONFIG2.verbose) console.warn("setSVG: val is not defined", key);
|
|
1875
1760
|
return;
|
|
1876
1761
|
}
|
|
1877
1762
|
if (CONFIG2.useSvgSprite) {
|
|
@@ -1882,8 +1767,7 @@ var setSVG = (val, key) => {
|
|
|
1882
1767
|
var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
|
|
1883
1768
|
const CONFIG2 = getActiveConfig();
|
|
1884
1769
|
const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
|
|
1885
|
-
for (const key in LIBRARY)
|
|
1886
|
-
lib[key] = CONFIG2.SVG[key];
|
|
1770
|
+
for (const key in LIBRARY) lib[key] = CONFIG2.SVG[key];
|
|
1887
1771
|
appendSVG(lib, options);
|
|
1888
1772
|
};
|
|
1889
1773
|
var setSvgIcon = (val, key) => {
|
|
@@ -1897,13 +1781,11 @@ var setSvgIcon = (val, key) => {
|
|
|
1897
1781
|
var appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
|
|
1898
1782
|
const CONFIG2 = getActiveConfig();
|
|
1899
1783
|
const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
|
|
1900
|
-
for (const key in LIBRARY)
|
|
1901
|
-
lib[key] = CONFIG2.ICONS[key];
|
|
1784
|
+
for (const key in LIBRARY) lib[key] = CONFIG2.ICONS[key];
|
|
1902
1785
|
appendSVG(lib, options);
|
|
1903
1786
|
};
|
|
1904
1787
|
var createSVGSpriteElement = (options = { isRoot: true }) => {
|
|
1905
|
-
if (!document2 || !document2.createElementNS)
|
|
1906
|
-
return;
|
|
1788
|
+
if (!document2 || !document2.createElementNS) return;
|
|
1907
1789
|
const svgElem = document2.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
1908
1790
|
if (options.isRoot) {
|
|
1909
1791
|
svgElem.setAttribute("aria-hidden", "true");
|
|
@@ -1959,8 +1841,7 @@ var applyReset = (reset = {}) => {
|
|
|
1959
1841
|
}
|
|
1960
1842
|
const { body, ...templates } = TYPOGRAPHY2.templates;
|
|
1961
1843
|
const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {};
|
|
1962
|
-
if (RESET2.html)
|
|
1963
|
-
overwriteDeep(RESET2.html, globalTheme);
|
|
1844
|
+
if (RESET2.html) overwriteDeep(RESET2.html, globalTheme);
|
|
1964
1845
|
return deepMerge(merge(RESET2, reset), {
|
|
1965
1846
|
html: {
|
|
1966
1847
|
position: "absolute",
|
|
@@ -1998,3 +1879,4 @@ var applyReset = (reset = {}) => {
|
|
|
1998
1879
|
});
|
|
1999
1880
|
}
|
|
2000
1881
|
};
|
|
1882
|
+
// @preserve-env
|