@symbo.ls/scratch 2.27.0 → 2.27.11
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 -345
- package/dist/cjs/set.js +126 -240
- package/dist/cjs/system/color.js +54 -87
- package/dist/cjs/system/document.js +26 -29
- package/dist/cjs/system/font.js +30 -37
- package/dist/cjs/system/index.js +126 -243
- package/dist/cjs/system/reset.js +33 -43
- package/dist/cjs/system/shadow.js +69 -117
- package/dist/cjs/system/spacing.js +41 -59
- package/dist/cjs/system/svg.js +31 -41
- package/dist/cjs/system/theme.js +67 -113
- package/dist/cjs/system/timing.js +34 -45
- package/dist/cjs/system/typography.js +43 -73
- package/dist/cjs/transforms/index.js +92 -163
- package/dist/cjs/utils/color.js +21 -35
- package/dist/cjs/utils/font.js +3 -6
- package/dist/cjs/utils/index.js +62 -108
- package/dist/cjs/utils/sequence.js +25 -45
- package/dist/cjs/utils/sprite.js +15 -12
- 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 -30
- package/src/utils/sprite.js +12 -7
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,23 +1033,19 @@ 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
|
}
|
|
@@ -1093,15 +1053,13 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
|
|
|
1093
1053
|
|
|
1094
1054
|
// src/utils/sprite.js
|
|
1095
1055
|
var ENV = "development";
|
|
1096
|
-
var isDev = ENV
|
|
1056
|
+
var isDev = isNotProduction(ENV);
|
|
1097
1057
|
var generateSprite = (icons) => {
|
|
1098
1058
|
const CONFIG2 = getActiveConfig();
|
|
1099
1059
|
let sprite = "";
|
|
1100
1060
|
for (const key in icons) {
|
|
1101
|
-
if (CONFIG2.__svg_cache[key])
|
|
1102
|
-
|
|
1103
|
-
else
|
|
1104
|
-
CONFIG2.__svg_cache[key] = true;
|
|
1061
|
+
if (CONFIG2.__svg_cache[key]) continue;
|
|
1062
|
+
else CONFIG2.__svg_cache[key] = true;
|
|
1105
1063
|
sprite += icons[key];
|
|
1106
1064
|
}
|
|
1107
1065
|
return sprite;
|
|
@@ -1109,8 +1067,7 @@ var generateSprite = (icons) => {
|
|
|
1109
1067
|
var parseRootAttributes = (htmlString) => {
|
|
1110
1068
|
const val = htmlString.default || htmlString;
|
|
1111
1069
|
if (!isString(val)) {
|
|
1112
|
-
if (isDev)
|
|
1113
|
-
console.warn("parseRootAttributes:", val, "is not a string");
|
|
1070
|
+
if (isDev) console.warn("parseRootAttributes:", val, "is not a string");
|
|
1114
1071
|
return;
|
|
1115
1072
|
}
|
|
1116
1073
|
const match = val.match(/<svg\s+(.*?)>/);
|
|
@@ -1118,7 +1075,9 @@ var parseRootAttributes = (htmlString) => {
|
|
|
1118
1075
|
return {};
|
|
1119
1076
|
}
|
|
1120
1077
|
const attrString = match[1];
|
|
1121
|
-
const attrs = attrString.match(
|
|
1078
|
+
const attrs = attrString.match(
|
|
1079
|
+
/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
|
|
1080
|
+
);
|
|
1122
1081
|
return attrs.reduce((acc, attr) => {
|
|
1123
1082
|
const [key, value] = attr.split("=");
|
|
1124
1083
|
acc[key] = value.replace(/['"]/g, "");
|
|
@@ -1158,27 +1117,21 @@ var convertSvgToSymbol = (key, code) => {
|
|
|
1158
1117
|
var getColor = (value, key, config) => {
|
|
1159
1118
|
const CONFIG2 = config || getActiveConfig();
|
|
1160
1119
|
if (!isString(value)) {
|
|
1161
|
-
if (CONFIG2.verbose)
|
|
1162
|
-
console.warn(value, "- type for color is not valid");
|
|
1120
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1163
1121
|
return;
|
|
1164
1122
|
}
|
|
1165
|
-
if (value.slice(0, 2) === "--")
|
|
1166
|
-
|
|
1167
|
-
if (key && value[key])
|
|
1168
|
-
value = value[key];
|
|
1123
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1124
|
+
if (key && value[key]) value = value[key];
|
|
1169
1125
|
const [name, alpha, tone] = isArray(value) ? value : value.split(" ");
|
|
1170
1126
|
const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
|
|
1171
1127
|
let val = COLOR2[name] || GRADIENT2[name];
|
|
1172
1128
|
if (!val) {
|
|
1173
|
-
if (CONFIG2.verbose)
|
|
1174
|
-
console.warn("Can't find color ", name);
|
|
1129
|
+
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
1175
1130
|
return value;
|
|
1176
1131
|
}
|
|
1177
1132
|
if (key) {
|
|
1178
|
-
if (val[key])
|
|
1179
|
-
|
|
1180
|
-
else if (CONFIG2.verbose)
|
|
1181
|
-
console.warn(value, " - does not have ", key);
|
|
1133
|
+
if (val[key]) val = val[key];
|
|
1134
|
+
else if (CONFIG2.verbose) console.warn(value, " - does not have ", key);
|
|
1182
1135
|
}
|
|
1183
1136
|
let rgb = val.rgb;
|
|
1184
1137
|
if (!rgb) {
|
|
@@ -1188,32 +1141,25 @@ var getColor = (value, key, config) => {
|
|
|
1188
1141
|
rgb = getRgbTone(rgb, tone);
|
|
1189
1142
|
val[tone] = { rgb, var: `${val.var}-${tone}` };
|
|
1190
1143
|
}
|
|
1191
|
-
if (val[tone])
|
|
1192
|
-
|
|
1193
|
-
if (alpha)
|
|
1194
|
-
return `rgba(${rgb}, ${alpha})`;
|
|
1144
|
+
if (val[tone]) rgb = val[tone].rgb;
|
|
1145
|
+
if (alpha) return `rgba(${rgb}, ${alpha})`;
|
|
1195
1146
|
return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
|
|
1196
1147
|
};
|
|
1197
1148
|
var getMediaColor = (value, globalTheme, config) => {
|
|
1198
1149
|
const CONFIG2 = config || getActiveConfig();
|
|
1199
|
-
if (!globalTheme)
|
|
1200
|
-
globalTheme = CONFIG2.globalTheme;
|
|
1150
|
+
if (!globalTheme) globalTheme = CONFIG2.globalTheme;
|
|
1201
1151
|
if (!isString(value)) {
|
|
1202
|
-
if (CONFIG2.verbose)
|
|
1203
|
-
console.warn(value, "- type for color is not valid");
|
|
1152
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1204
1153
|
return;
|
|
1205
1154
|
}
|
|
1206
|
-
if (value.slice(0, 2) === "--")
|
|
1207
|
-
return `var(${value})`;
|
|
1155
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1208
1156
|
const [name] = isArray(value) ? value : value.split(" ");
|
|
1209
1157
|
const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
|
|
1210
1158
|
const val = COLOR2[name] || GRADIENT2[name];
|
|
1211
1159
|
const isObj = isObject(val);
|
|
1212
|
-
if (isObj && val.value)
|
|
1213
|
-
return getColor(value, `@${globalTheme}`, config);
|
|
1160
|
+
if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
|
|
1214
1161
|
else if (isObj) {
|
|
1215
|
-
if (globalTheme)
|
|
1216
|
-
return getColor(value, `@${globalTheme}`, config);
|
|
1162
|
+
if (globalTheme) return getColor(value, `@${globalTheme}`, config);
|
|
1217
1163
|
else {
|
|
1218
1164
|
const obj = {};
|
|
1219
1165
|
for (const mediaName in val) {
|
|
@@ -1224,8 +1170,7 @@ var getMediaColor = (value, globalTheme, config) => {
|
|
|
1224
1170
|
return obj;
|
|
1225
1171
|
}
|
|
1226
1172
|
} else {
|
|
1227
|
-
if (CONFIG2.verbose)
|
|
1228
|
-
console.warn("Can't find color", value);
|
|
1173
|
+
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
1229
1174
|
return value;
|
|
1230
1175
|
}
|
|
1231
1176
|
};
|
|
@@ -1234,8 +1179,7 @@ var setColor = (val, key, suffix) => {
|
|
|
1234
1179
|
if (isString(val) && val.slice(0, 2) === "--") {
|
|
1235
1180
|
val = getColor(val.slice(2));
|
|
1236
1181
|
if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
|
|
1237
|
-
if (CONFIG2.verbose)
|
|
1238
|
-
console.warn(val, "- referred but does not exist");
|
|
1182
|
+
if (CONFIG2.verbose) console.warn(val, "- referred but does not exist");
|
|
1239
1183
|
val = val.split(" ")[0];
|
|
1240
1184
|
}
|
|
1241
1185
|
}
|
|
@@ -1274,8 +1218,7 @@ var setColor = (val, key, suffix) => {
|
|
|
1274
1218
|
};
|
|
1275
1219
|
var setGradient = (val, key, suffix) => {
|
|
1276
1220
|
const CONFIG2 = getActiveConfig();
|
|
1277
|
-
if (isString(val) && val.slice(0, 2) === "--")
|
|
1278
|
-
val = getColor(val.slice(2));
|
|
1221
|
+
if (isString(val) && val.slice(0, 2) === "--") val = getColor(val.slice(2));
|
|
1279
1222
|
if (isArray(val)) {
|
|
1280
1223
|
return {
|
|
1281
1224
|
"@light": setGradient(val[0], key, "light"),
|
|
@@ -1284,8 +1227,7 @@ var setGradient = (val, key, suffix) => {
|
|
|
1284
1227
|
}
|
|
1285
1228
|
if (isObject(val)) {
|
|
1286
1229
|
const obj = {};
|
|
1287
|
-
for (const variant in val)
|
|
1288
|
-
obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
|
|
1230
|
+
for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
|
|
1289
1231
|
return obj;
|
|
1290
1232
|
}
|
|
1291
1233
|
const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
|
|
@@ -1311,22 +1253,19 @@ var setThemeValue = (theme) => {
|
|
|
1311
1253
|
return value;
|
|
1312
1254
|
};
|
|
1313
1255
|
var getThemeValue = (theme) => {
|
|
1314
|
-
if (theme.value)
|
|
1315
|
-
return theme.value;
|
|
1256
|
+
if (theme.value) return theme.value;
|
|
1316
1257
|
theme.value = setThemeValue(theme);
|
|
1317
1258
|
return theme.value;
|
|
1318
1259
|
};
|
|
1319
1260
|
var getTheme = (value, modifier) => {
|
|
1320
1261
|
const CONFIG2 = getActiveConfig();
|
|
1321
|
-
if (CONFIG2.useVariable)
|
|
1322
|
-
return getMediaTheme(value, modifier);
|
|
1262
|
+
if (CONFIG2.useVariable) return getMediaTheme(value, modifier);
|
|
1323
1263
|
const { THEME: THEME2 } = CONFIG2;
|
|
1324
1264
|
if (isString(value)) {
|
|
1325
1265
|
const [theme, subtheme] = value.split(" ");
|
|
1326
1266
|
const isOurTheme = THEME2[theme];
|
|
1327
1267
|
if (isOurTheme) {
|
|
1328
|
-
if (!subtheme && !modifier)
|
|
1329
|
-
return getThemeValue(isOurTheme);
|
|
1268
|
+
if (!subtheme && !modifier) return getThemeValue(isOurTheme);
|
|
1330
1269
|
value = [theme, subtheme || modifier];
|
|
1331
1270
|
}
|
|
1332
1271
|
}
|
|
@@ -1334,14 +1273,10 @@ var getTheme = (value, modifier) => {
|
|
|
1334
1273
|
const themeName = value[0];
|
|
1335
1274
|
const subThemeName = value[1];
|
|
1336
1275
|
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);
|
|
1276
|
+
if (media && media[subThemeName]) return getThemeValue(media[subThemeName]);
|
|
1277
|
+
if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName]);
|
|
1278
|
+
if (state && state[subThemeName]) return getThemeValue(state[subThemeName]);
|
|
1279
|
+
} else if (isObject(value)) return setThemeValue(value);
|
|
1345
1280
|
};
|
|
1346
1281
|
var setInverseTheme = (theme, variant, value) => {
|
|
1347
1282
|
if (isObject(variant)) {
|
|
@@ -1359,13 +1294,11 @@ var setInverseTheme = (theme, variant, value) => {
|
|
|
1359
1294
|
var setPseudo = (theme, key, variant, themeValue) => {
|
|
1360
1295
|
const result = getTheme(variant);
|
|
1361
1296
|
themeValue[`&:${key}`] = result;
|
|
1362
|
-
if (isObject(variant) && !variant.value)
|
|
1363
|
-
variant.value = result;
|
|
1297
|
+
if (isObject(variant) && !variant.value) variant.value = result;
|
|
1364
1298
|
};
|
|
1365
1299
|
var setSelectors = (theme, value) => {
|
|
1366
1300
|
const { state } = theme;
|
|
1367
|
-
if (!state)
|
|
1368
|
-
return;
|
|
1301
|
+
if (!state) return;
|
|
1369
1302
|
const keys = Object.keys(state);
|
|
1370
1303
|
keys.map((key) => {
|
|
1371
1304
|
const variant = state[key];
|
|
@@ -1377,20 +1310,16 @@ var setSelectors = (theme, value) => {
|
|
|
1377
1310
|
var setPrefersScheme = (theme, key, variant, themeValue) => {
|
|
1378
1311
|
const result = getTheme(variant);
|
|
1379
1312
|
themeValue[`@media (prefers-color-scheme: ${key})`] = result;
|
|
1380
|
-
if (isObject(variant) && !variant.value)
|
|
1381
|
-
variant.value = result;
|
|
1313
|
+
if (isObject(variant) && !variant.value) variant.value = result;
|
|
1382
1314
|
};
|
|
1383
1315
|
var setMedia = (theme, value) => {
|
|
1384
1316
|
const { media } = theme;
|
|
1385
|
-
if (!media)
|
|
1386
|
-
return;
|
|
1317
|
+
if (!media) return;
|
|
1387
1318
|
const keys = Object.keys(media);
|
|
1388
1319
|
keys.map((key) => {
|
|
1389
1320
|
const variant = media[key];
|
|
1390
|
-
if (key === "dark" || key === "light")
|
|
1391
|
-
|
|
1392
|
-
if (key === "inverse")
|
|
1393
|
-
setInverseTheme(theme, variant, value);
|
|
1321
|
+
if (key === "dark" || key === "light") setPrefersScheme(theme, key, variant, value);
|
|
1322
|
+
if (key === "inverse") setInverseTheme(theme, variant, value);
|
|
1394
1323
|
return theme;
|
|
1395
1324
|
});
|
|
1396
1325
|
return theme;
|
|
@@ -1398,23 +1327,19 @@ var setMedia = (theme, value) => {
|
|
|
1398
1327
|
var setHelpers = (theme, value) => {
|
|
1399
1328
|
const CONFIG2 = getActiveConfig();
|
|
1400
1329
|
const { helpers } = theme;
|
|
1401
|
-
if (!helpers)
|
|
1402
|
-
return;
|
|
1330
|
+
if (!helpers) return;
|
|
1403
1331
|
const keys = Object.keys(helpers);
|
|
1404
1332
|
keys.map((key) => {
|
|
1405
1333
|
const helper = helpers[key];
|
|
1406
|
-
if (isString(helper))
|
|
1407
|
-
|
|
1408
|
-
else
|
|
1409
|
-
getThemeValue(helpers[key]);
|
|
1334
|
+
if (isString(helper)) helpers[key] = CONFIG2.THEME[helper];
|
|
1335
|
+
else getThemeValue(helpers[key]);
|
|
1410
1336
|
return theme;
|
|
1411
1337
|
});
|
|
1412
1338
|
return theme;
|
|
1413
1339
|
};
|
|
1414
1340
|
var setTheme = (val, key) => {
|
|
1415
1341
|
const CONFIG2 = getActiveConfig();
|
|
1416
|
-
if (CONFIG2.useVariable)
|
|
1417
|
-
return setMediaTheme(val, key);
|
|
1342
|
+
if (CONFIG2.useVariable) return setMediaTheme(val, key);
|
|
1418
1343
|
const { state, media, helpers } = val;
|
|
1419
1344
|
const value = setThemeValue(val, key);
|
|
1420
1345
|
const CSSvar = `--theme-${key}`;
|
|
@@ -1476,24 +1401,19 @@ var recursiveTheme = (val) => {
|
|
|
1476
1401
|
} else if (symb === ":") {
|
|
1477
1402
|
obj[`&${param}`] = recursiveTheme(val[param]);
|
|
1478
1403
|
}
|
|
1479
|
-
} else
|
|
1480
|
-
obj[param] = val[param];
|
|
1404
|
+
} else obj[param] = val[param];
|
|
1481
1405
|
}
|
|
1482
1406
|
return obj;
|
|
1483
1407
|
};
|
|
1484
1408
|
var findModifierFromArray = (val, modifierArray) => {
|
|
1485
1409
|
const currentMod = modifierArray.shift();
|
|
1486
|
-
if (val[currentMod])
|
|
1487
|
-
return findModifierFromArray(val[currentMod], modifierArray);
|
|
1410
|
+
if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray);
|
|
1488
1411
|
return val;
|
|
1489
1412
|
};
|
|
1490
1413
|
var findModifier = (val, modifier) => {
|
|
1491
|
-
if (isArray(modifier))
|
|
1492
|
-
|
|
1493
|
-
else
|
|
1494
|
-
return val[modifier];
|
|
1495
|
-
else
|
|
1496
|
-
return val;
|
|
1414
|
+
if (isArray(modifier)) return findModifierFromArray(val, modifier);
|
|
1415
|
+
else if (isString(modifier) && val[modifier]) return val[modifier];
|
|
1416
|
+
else return val;
|
|
1497
1417
|
};
|
|
1498
1418
|
var getMediaTheme = (value, modifier) => {
|
|
1499
1419
|
const activeConfig = getActiveConfig();
|
|
@@ -1519,8 +1439,7 @@ var getMediaTheme = (value, modifier) => {
|
|
|
1519
1439
|
var import_utils11 = __toESM(require_cjs(), 1);
|
|
1520
1440
|
var setFont = (val, key) => {
|
|
1521
1441
|
const CSSvar = `--font-${key}`;
|
|
1522
|
-
if (!val || isArray(val) && !val[0])
|
|
1523
|
-
return;
|
|
1442
|
+
if (!val || isArray(val) && !val[0]) return;
|
|
1524
1443
|
const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
|
|
1525
1444
|
return { var: CSSvar, value: val, fontFace };
|
|
1526
1445
|
};
|
|
@@ -1533,10 +1452,8 @@ var setFontFamily = (val, key) => {
|
|
|
1533
1452
|
const CONFIG2 = getActiveConfig();
|
|
1534
1453
|
const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG2;
|
|
1535
1454
|
let { value, type } = val;
|
|
1536
|
-
if (val.isDefault)
|
|
1537
|
-
|
|
1538
|
-
if (isObject(value))
|
|
1539
|
-
value = (0, import_utils11.arrayzeValue)(value);
|
|
1455
|
+
if (val.isDefault) FONT_FAMILY2.default = key;
|
|
1456
|
+
if (isObject(value)) value = (0, import_utils11.arrayzeValue)(value);
|
|
1540
1457
|
const CSSvar = `--font-family-${key}`;
|
|
1541
1458
|
const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
|
|
1542
1459
|
return { var: CSSvar, value: str, arr: value, type };
|
|
@@ -1549,19 +1466,10 @@ var runThroughMedia = (FACTORY2) => {
|
|
|
1549
1466
|
for (const prop in FACTORY2) {
|
|
1550
1467
|
const isPropMedia = prop.slice(0, 1) === "@";
|
|
1551
1468
|
const mediaValue = FACTORY2[prop];
|
|
1552
|
-
if (!isPropMedia)
|
|
1553
|
-
continue;
|
|
1469
|
+
if (!isPropMedia) continue;
|
|
1554
1470
|
const { mediaRegenerate } = FACTORY2;
|
|
1555
1471
|
const mediaName = prop.slice(1);
|
|
1556
|
-
const {
|
|
1557
|
-
type,
|
|
1558
|
-
base,
|
|
1559
|
-
ratio,
|
|
1560
|
-
range,
|
|
1561
|
-
subSequence,
|
|
1562
|
-
h1Matches,
|
|
1563
|
-
unit
|
|
1564
|
-
} = FACTORY2;
|
|
1472
|
+
const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY2;
|
|
1565
1473
|
merge(mediaValue, {
|
|
1566
1474
|
type,
|
|
1567
1475
|
base,
|
|
@@ -1591,7 +1499,7 @@ var runThroughMedia = (FACTORY2) => {
|
|
|
1591
1499
|
}
|
|
1592
1500
|
};
|
|
1593
1501
|
var applyHeadings = (props) => {
|
|
1594
|
-
var _a;
|
|
1502
|
+
var _a, _b;
|
|
1595
1503
|
const CONFIG2 = getActiveConfig();
|
|
1596
1504
|
if (props.h1Matches) {
|
|
1597
1505
|
const unit = props.unit;
|
|
@@ -1600,10 +1508,8 @@ var applyHeadings = (props) => {
|
|
|
1600
1508
|
for (const k in HEADINGS) {
|
|
1601
1509
|
const headerName = `h${parseInt(k) + 1}`;
|
|
1602
1510
|
const headerStyle = templates[headerName];
|
|
1603
|
-
if (!HEADINGS[k])
|
|
1604
|
-
continue;
|
|
1605
1511
|
templates[headerName] = {
|
|
1606
|
-
fontSize: CONFIG2.useVariable ? `var(${(_a = HEADINGS[k]) == null ? void 0 : _a.variable})` : `${HEADINGS[k].scaling}${unit}`,
|
|
1512
|
+
fontSize: CONFIG2.useVariable ? `var(${(_a = HEADINGS[k]) == null ? void 0 : _a.variable})` : `${(_b = HEADINGS[k]) == null ? void 0 : _b.scaling}${unit}`,
|
|
1607
1513
|
margin: headerStyle ? headerStyle.margin : 0,
|
|
1608
1514
|
lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
|
|
1609
1515
|
letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
|
|
@@ -1623,11 +1529,7 @@ var applyTypographySequence = () => {
|
|
|
1623
1529
|
var getFontSizeByKey = (value) => {
|
|
1624
1530
|
const CONFIG2 = getActiveConfig();
|
|
1625
1531
|
const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
|
|
1626
|
-
return getSequenceValuePropertyPair(
|
|
1627
|
-
value,
|
|
1628
|
-
"fontSize",
|
|
1629
|
-
TYPOGRAPHY2
|
|
1630
|
-
);
|
|
1532
|
+
return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY2);
|
|
1631
1533
|
};
|
|
1632
1534
|
|
|
1633
1535
|
// src/system/spacing.js
|
|
@@ -1636,8 +1538,7 @@ var runThroughMedia2 = (FACTORY2) => {
|
|
|
1636
1538
|
for (const prop in FACTORY2) {
|
|
1637
1539
|
const mediaProps = FACTORY2[prop];
|
|
1638
1540
|
const isMediaName = prop.slice(0, 1) === "@";
|
|
1639
|
-
if (!isMediaName)
|
|
1640
|
-
continue;
|
|
1541
|
+
if (!isMediaName) continue;
|
|
1641
1542
|
const {
|
|
1642
1543
|
type,
|
|
1643
1544
|
base,
|
|
@@ -1674,8 +1575,7 @@ var applySpacingSequence = () => {
|
|
|
1674
1575
|
var getSequence = (sequenceProps) => {
|
|
1675
1576
|
const CONFIG2 = getActiveConfig();
|
|
1676
1577
|
const { SPACING: SPACING2 } = CONFIG2;
|
|
1677
|
-
if (!sequenceProps)
|
|
1678
|
-
return SPACING2;
|
|
1578
|
+
if (!sequenceProps) return SPACING2;
|
|
1679
1579
|
const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
|
|
1680
1580
|
return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
|
|
1681
1581
|
};
|
|
@@ -1685,8 +1585,7 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
|
|
|
1685
1585
|
return { [propertyName]: value };
|
|
1686
1586
|
}
|
|
1687
1587
|
const stack = (0, import_utils15.arrayzeValue)(value);
|
|
1688
|
-
if (!isArray(stack))
|
|
1689
|
-
return;
|
|
1588
|
+
if (!isArray(stack)) return;
|
|
1690
1589
|
if (stack.length > 1) {
|
|
1691
1590
|
let suffix = "";
|
|
1692
1591
|
if (propertyName === "borderWidth") {
|
|
@@ -1765,15 +1664,11 @@ var setShadow = (value, key, suffix, prefers) => {
|
|
|
1765
1664
|
if (isString(value) && value.includes(",")) {
|
|
1766
1665
|
value = value.split(",").map((v) => {
|
|
1767
1666
|
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;
|
|
1667
|
+
if (v.startsWith("--")) return `var(${v})`;
|
|
1668
|
+
if (getColor(v).length > 2) return getColor(v);
|
|
1669
|
+
if (v.includes("px") || v.slice(-2) === "em") return v;
|
|
1774
1670
|
const arr = v.split(" ");
|
|
1775
|
-
if (!arr.length)
|
|
1776
|
-
return v;
|
|
1671
|
+
if (!arr.length) return v;
|
|
1777
1672
|
return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
|
|
1778
1673
|
}).join(" ");
|
|
1779
1674
|
}
|
|
@@ -1788,32 +1683,25 @@ var setShadow = (value, key, suffix, prefers) => {
|
|
|
1788
1683
|
};
|
|
1789
1684
|
var getShadow = (value, globalTheme) => {
|
|
1790
1685
|
const CONFIG2 = getActiveConfig();
|
|
1791
|
-
if (!globalTheme)
|
|
1792
|
-
globalTheme = CONFIG2.globalTheme;
|
|
1686
|
+
if (!globalTheme) globalTheme = CONFIG2.globalTheme;
|
|
1793
1687
|
if (!isString(value)) {
|
|
1794
|
-
if (CONFIG2.verbose)
|
|
1795
|
-
console.warn(value, "- type for color is not valid");
|
|
1688
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1796
1689
|
return;
|
|
1797
1690
|
}
|
|
1798
|
-
if (value.slice(0, 2) === "--")
|
|
1799
|
-
return `var(${value})`;
|
|
1691
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1800
1692
|
const [name] = isArray(value) ? value : value.split(" ");
|
|
1801
1693
|
const { SHADOW: SHADOW2 } = CONFIG2;
|
|
1802
1694
|
const val = SHADOW2[name];
|
|
1803
1695
|
const isObj = isObject(val);
|
|
1804
1696
|
if (!val) {
|
|
1805
|
-
if (CONFIG2.verbose)
|
|
1806
|
-
console.warn("Can't find color ", name);
|
|
1697
|
+
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
1807
1698
|
return value;
|
|
1808
1699
|
}
|
|
1809
1700
|
if (globalTheme) {
|
|
1810
|
-
if (val[globalTheme])
|
|
1811
|
-
|
|
1812
|
-
else if (CONFIG2.verbose)
|
|
1813
|
-
console.warn(value, " - does not have ", globalTheme);
|
|
1701
|
+
if (val[globalTheme]) return val[globalTheme].value;
|
|
1702
|
+
else if (CONFIG2.verbose) console.warn(value, " - does not have ", globalTheme);
|
|
1814
1703
|
}
|
|
1815
|
-
if (isObj && val.value)
|
|
1816
|
-
return val.value;
|
|
1704
|
+
if (isObj && val.value) return val.value;
|
|
1817
1705
|
if (isObj) {
|
|
1818
1706
|
const obj = {};
|
|
1819
1707
|
for (const mediaName in val) {
|
|
@@ -1823,8 +1711,7 @@ var getShadow = (value, globalTheme) => {
|
|
|
1823
1711
|
}
|
|
1824
1712
|
return obj;
|
|
1825
1713
|
}
|
|
1826
|
-
if (CONFIG2.verbose)
|
|
1827
|
-
console.warn("Can't find color", value);
|
|
1714
|
+
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
1828
1715
|
return value;
|
|
1829
1716
|
};
|
|
1830
1717
|
|
|
@@ -1870,8 +1757,7 @@ var DEF_OPTIONS = {
|
|
|
1870
1757
|
var setSVG = (val, key) => {
|
|
1871
1758
|
const CONFIG2 = getActiveConfig();
|
|
1872
1759
|
if (!val) {
|
|
1873
|
-
if (CONFIG2.verbose)
|
|
1874
|
-
console.warn("setSVG: val is not defined", key);
|
|
1760
|
+
if (CONFIG2.verbose) console.warn("setSVG: val is not defined", key);
|
|
1875
1761
|
return;
|
|
1876
1762
|
}
|
|
1877
1763
|
if (CONFIG2.useSvgSprite) {
|
|
@@ -1882,8 +1768,7 @@ var setSVG = (val, key) => {
|
|
|
1882
1768
|
var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
|
|
1883
1769
|
const CONFIG2 = getActiveConfig();
|
|
1884
1770
|
const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
|
|
1885
|
-
for (const key in LIBRARY)
|
|
1886
|
-
lib[key] = CONFIG2.SVG[key];
|
|
1771
|
+
for (const key in LIBRARY) lib[key] = CONFIG2.SVG[key];
|
|
1887
1772
|
appendSVG(lib, options);
|
|
1888
1773
|
};
|
|
1889
1774
|
var setSvgIcon = (val, key) => {
|
|
@@ -1897,13 +1782,11 @@ var setSvgIcon = (val, key) => {
|
|
|
1897
1782
|
var appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
|
|
1898
1783
|
const CONFIG2 = getActiveConfig();
|
|
1899
1784
|
const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
|
|
1900
|
-
for (const key in LIBRARY)
|
|
1901
|
-
lib[key] = CONFIG2.ICONS[key];
|
|
1785
|
+
for (const key in LIBRARY) lib[key] = CONFIG2.ICONS[key];
|
|
1902
1786
|
appendSVG(lib, options);
|
|
1903
1787
|
};
|
|
1904
1788
|
var createSVGSpriteElement = (options = { isRoot: true }) => {
|
|
1905
|
-
if (!document2 || !document2.createElementNS)
|
|
1906
|
-
return;
|
|
1789
|
+
if (!document2 || !document2.createElementNS) return;
|
|
1907
1790
|
const svgElem = document2.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
1908
1791
|
if (options.isRoot) {
|
|
1909
1792
|
svgElem.setAttribute("aria-hidden", "true");
|
|
@@ -1959,8 +1842,7 @@ var applyReset = (reset = {}) => {
|
|
|
1959
1842
|
}
|
|
1960
1843
|
const { body, ...templates } = TYPOGRAPHY2.templates;
|
|
1961
1844
|
const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {};
|
|
1962
|
-
if (RESET2.html)
|
|
1963
|
-
overwriteDeep(RESET2.html, globalTheme);
|
|
1845
|
+
if (RESET2.html) overwriteDeep(RESET2.html, globalTheme);
|
|
1964
1846
|
return deepMerge(merge(RESET2, reset), {
|
|
1965
1847
|
html: {
|
|
1966
1848
|
position: "absolute",
|
|
@@ -1998,3 +1880,4 @@ var applyReset = (reset = {}) => {
|
|
|
1998
1880
|
});
|
|
1999
1881
|
}
|
|
2000
1882
|
};
|
|
1883
|
+
// @preserve-env
|