@symbo.ls/scratch 2.25.3 → 2.27.8
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 +8 -9
- package/dist/cjs/index.js +169 -335
- package/dist/cjs/set.js +120 -237
- package/dist/cjs/system/color.js +48 -86
- package/dist/cjs/system/document.js +20 -30
- package/dist/cjs/system/font.js +24 -38
- package/dist/cjs/system/index.js +120 -240
- package/dist/cjs/system/reset.js +27 -44
- package/dist/cjs/system/shadow.js +63 -116
- package/dist/cjs/system/spacing.js +35 -60
- package/dist/cjs/system/svg.js +25 -40
- package/dist/cjs/system/theme.js +61 -112
- package/dist/cjs/system/timing.js +28 -46
- package/dist/cjs/system/typography.js +37 -74
- package/dist/cjs/transforms/index.js +86 -162
- package/dist/cjs/utils/color.js +13 -26
- package/dist/cjs/utils/font.js +3 -6
- package/dist/cjs/utils/index.js +54 -98
- package/dist/cjs/utils/sequence.js +28 -46
- package/dist/cjs/utils/sprite.js +9 -11
- package/dist/cjs/utils/theme.js +3 -6
- package/dist/cjs/utils/var.js +22 -34
- package/package.json +7 -7
- package/src/system/typography.js +12 -20
|
@@ -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
|
});
|
|
@@ -292,8 +283,7 @@ var isDOMNode = (obj) => {
|
|
|
292
283
|
|
|
293
284
|
// ../../../domql/packages/utils/dist/esm/types.js
|
|
294
285
|
var isObject = (arg) => {
|
|
295
|
-
if (arg === null)
|
|
296
|
-
return false;
|
|
286
|
+
if (arg === null) return false;
|
|
297
287
|
return typeof arg === "object" && arg.constructor === Object;
|
|
298
288
|
};
|
|
299
289
|
var isString = (arg) => typeof arg === "string";
|
|
@@ -302,8 +292,7 @@ var isFunction = (arg) => typeof arg === "function";
|
|
|
302
292
|
var isNull = (arg) => arg === null;
|
|
303
293
|
var isArray = (arg) => Array.isArray(arg);
|
|
304
294
|
var isObjectLike = (arg) => {
|
|
305
|
-
if (arg === null)
|
|
306
|
-
return false;
|
|
295
|
+
if (arg === null) return false;
|
|
307
296
|
return typeof arg === "object";
|
|
308
297
|
};
|
|
309
298
|
var isUndefined = (arg) => {
|
|
@@ -312,7 +301,10 @@ var isUndefined = (arg) => {
|
|
|
312
301
|
|
|
313
302
|
// ../../../domql/packages/utils/dist/esm/array.js
|
|
314
303
|
var mergeArray = (arr, exclude = []) => {
|
|
315
|
-
return arr.reduce(
|
|
304
|
+
return arr.reduce(
|
|
305
|
+
(a, c) => deepMerge(a, deepClone(c, { exclude }), exclude),
|
|
306
|
+
{}
|
|
307
|
+
);
|
|
316
308
|
};
|
|
317
309
|
|
|
318
310
|
// ../../../domql/packages/utils/dist/esm/object.js
|
|
@@ -381,8 +373,7 @@ var deepClone = (obj, options = {}) => {
|
|
|
381
373
|
const clone2 = targetWindow ? isArray(obj) ? new targetWindow.Array() : new targetWindow.Object() : isArray(obj) ? [] : {};
|
|
382
374
|
visited.set(obj, clone2);
|
|
383
375
|
for (const key in obj) {
|
|
384
|
-
if (!Object.prototype.hasOwnProperty.call(obj, key))
|
|
385
|
-
continue;
|
|
376
|
+
if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
|
|
386
377
|
if (exclude.includes(key) || key.startsWith("__") || key === "__proto__")
|
|
387
378
|
continue;
|
|
388
379
|
const value = obj[key];
|
|
@@ -642,10 +633,8 @@ var isScalingUnit = (unit) => {
|
|
|
642
633
|
|
|
643
634
|
// src/utils/color.js
|
|
644
635
|
var colorStringToRgbaArray = (color) => {
|
|
645
|
-
if (color === "")
|
|
646
|
-
|
|
647
|
-
if (color.toLowerCase() === "transparent")
|
|
648
|
-
return [0, 0, 0, 0];
|
|
636
|
+
if (color === "") return [0, 0, 0, 0];
|
|
637
|
+
if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
|
|
649
638
|
if (color[0] === "#") {
|
|
650
639
|
if (color.length < 7) {
|
|
651
640
|
color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
|
|
@@ -676,8 +665,7 @@ var colorStringToRgbaArray = (color) => {
|
|
|
676
665
|
}
|
|
677
666
|
}
|
|
678
667
|
if (color.indexOf("rgb") === 0) {
|
|
679
|
-
if (color.indexOf("rgba") === -1)
|
|
680
|
-
color = `${color}, 1`;
|
|
668
|
+
if (color.indexOf("rgba") === -1) color = `${color}, 1`;
|
|
681
669
|
return color.match(/[\.\d]+/g).map((a) => +a);
|
|
682
670
|
}
|
|
683
671
|
return [0, 0, 0, 0];
|
|
@@ -703,29 +691,20 @@ var hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) %
|
|
|
703
691
|
var getColorShade = (col, amt) => {
|
|
704
692
|
const num = parseInt(col, 16);
|
|
705
693
|
let r = (num >> 16) + amt;
|
|
706
|
-
if (r > 255)
|
|
707
|
-
|
|
708
|
-
else if (r < 0)
|
|
709
|
-
r = 0;
|
|
694
|
+
if (r > 255) r = 255;
|
|
695
|
+
else if (r < 0) r = 0;
|
|
710
696
|
let b = (num >> 8 & 255) + amt;
|
|
711
|
-
if (b > 255)
|
|
712
|
-
|
|
713
|
-
else if (b < 0)
|
|
714
|
-
b = 0;
|
|
697
|
+
if (b > 255) b = 255;
|
|
698
|
+
else if (b < 0) b = 0;
|
|
715
699
|
let g = (num & 255) + amt;
|
|
716
|
-
if (g > 255)
|
|
717
|
-
|
|
718
|
-
else if (g < 0)
|
|
719
|
-
g = 0;
|
|
700
|
+
if (g > 255) g = 255;
|
|
701
|
+
else if (g < 0) g = 0;
|
|
720
702
|
return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
|
|
721
703
|
};
|
|
722
704
|
var getRgbTone = (rgb, tone) => {
|
|
723
|
-
if (isString(rgb) && rgb.includes("rgb"))
|
|
724
|
-
|
|
725
|
-
if (
|
|
726
|
-
rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
|
|
727
|
-
if (isNumber(tone))
|
|
728
|
-
tone += "";
|
|
705
|
+
if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
|
|
706
|
+
if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
|
|
707
|
+
if (isNumber(tone)) tone += "";
|
|
729
708
|
const toHex = rgbArrayToHex(rgb);
|
|
730
709
|
const abs = tone.slice(0, 1);
|
|
731
710
|
if (abs === "-" || abs === "+") {
|
|
@@ -787,8 +766,7 @@ var setSequenceValue = (props, sequenceProps) => {
|
|
|
787
766
|
var setScalingVar = (key, sequenceProps) => {
|
|
788
767
|
const { base, type, unit } = sequenceProps;
|
|
789
768
|
const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
|
|
790
|
-
if (key === 0)
|
|
791
|
-
return defaultVal;
|
|
769
|
+
if (key === 0) return defaultVal;
|
|
792
770
|
const prefix = "--" + (type && type.replace(".", "-"));
|
|
793
771
|
const ratioVar = `${prefix}-ratio`;
|
|
794
772
|
if (key > 0) {
|
|
@@ -825,10 +803,8 @@ var generateSubSequence = (props, sequenceProps) => {
|
|
|
825
803
|
const diffRounded = ~~next - ~~value;
|
|
826
804
|
let arr;
|
|
827
805
|
const [first, middle, second] = getSubratioDifference(value, ratio);
|
|
828
|
-
if (diffRounded > 16)
|
|
829
|
-
|
|
830
|
-
else
|
|
831
|
-
arr = [first, second];
|
|
806
|
+
if (diffRounded > 16) arr = [first, middle, second];
|
|
807
|
+
else arr = [first, second];
|
|
832
808
|
arr.forEach((v, k) => {
|
|
833
809
|
const scaling = ~~(v / base * 1e3) / 1e3;
|
|
834
810
|
const newVar = variable + (k + 1);
|
|
@@ -870,8 +846,7 @@ var generateSequence = (sequenceProps) => {
|
|
|
870
846
|
index: key
|
|
871
847
|
};
|
|
872
848
|
setSequenceValue(props, sequenceProps);
|
|
873
|
-
if (subSequence)
|
|
874
|
-
generateSubSequence(props, sequenceProps);
|
|
849
|
+
if (subSequence) generateSubSequence(props, sequenceProps);
|
|
875
850
|
}
|
|
876
851
|
return sequenceProps;
|
|
877
852
|
};
|
|
@@ -883,13 +858,11 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
883
858
|
unit = UNIT2.default,
|
|
884
859
|
useVariable
|
|
885
860
|
} = sequenceProps;
|
|
886
|
-
if (isString(value) && value.slice(0, 2) === "--")
|
|
887
|
-
return `var(${value})`;
|
|
861
|
+
if (isString(value) && value.slice(0, 2) === "--") return `var(${value})`;
|
|
888
862
|
const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
|
|
889
863
|
const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
|
|
890
864
|
const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
|
|
891
|
-
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)
|
|
892
|
-
return value;
|
|
865
|
+
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;
|
|
893
866
|
const letterVal = value.toUpperCase();
|
|
894
867
|
const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
|
|
895
868
|
let absValue = isNegative ? letterVal.slice(1) : letterVal;
|
|
@@ -913,8 +886,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
913
886
|
return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
|
|
914
887
|
}
|
|
915
888
|
if (!sequence[absValue] && absValue.length === 2) {
|
|
916
|
-
if (CONFIG2.verbose)
|
|
917
|
-
console.warn(absValue, "- value is not found because `subSequence` is set to false");
|
|
889
|
+
if (CONFIG2.verbose) console.warn(absValue, "- value is not found because `subSequence` is set to false");
|
|
918
890
|
absValue = absValue.slice(0, 1);
|
|
919
891
|
}
|
|
920
892
|
if (useVariable || CONFIG2.useVariable) {
|
|
@@ -922,8 +894,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
922
894
|
return isNegative ? `calc(${varValue2} * -1)` : varValue2;
|
|
923
895
|
}
|
|
924
896
|
const sequenceItem = sequence ? sequence[absValue] : null;
|
|
925
|
-
if (!sequenceItem)
|
|
926
|
-
return console.warn("can't find", sequence, absValue);
|
|
897
|
+
if (!sequenceItem) return console.warn("can't find", sequence, absValue);
|
|
927
898
|
if (unit === "ms" || unit === "s") {
|
|
928
899
|
return isNegative + sequenceItem.val + unit;
|
|
929
900
|
}
|
|
@@ -932,12 +903,10 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
932
903
|
var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
|
|
933
904
|
if (typeof value !== "string") {
|
|
934
905
|
const CONFIG2 = getActiveConfig();
|
|
935
|
-
if (CONFIG2.verbose)
|
|
936
|
-
console.warn(propertyName, value, "is not a string");
|
|
906
|
+
if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
|
|
937
907
|
return { [propertyName]: value };
|
|
938
908
|
}
|
|
939
|
-
if (value === "-" || value === "")
|
|
940
|
-
return {};
|
|
909
|
+
if (value === "-" || value === "") return {};
|
|
941
910
|
return { [propertyName]: getSequenceValue(value, sequenceProps) };
|
|
942
911
|
};
|
|
943
912
|
|
|
@@ -986,27 +955,21 @@ var applySequenceVars = (FACTORY2, options = {}) => {
|
|
|
986
955
|
var getColor = (value, key, config) => {
|
|
987
956
|
const CONFIG2 = config || getActiveConfig();
|
|
988
957
|
if (!isString(value)) {
|
|
989
|
-
if (CONFIG2.verbose)
|
|
990
|
-
console.warn(value, "- type for color is not valid");
|
|
958
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
991
959
|
return;
|
|
992
960
|
}
|
|
993
|
-
if (value.slice(0, 2) === "--")
|
|
994
|
-
|
|
995
|
-
if (key && value[key])
|
|
996
|
-
value = value[key];
|
|
961
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
962
|
+
if (key && value[key]) value = value[key];
|
|
997
963
|
const [name, alpha, tone] = isArray(value) ? value : value.split(" ");
|
|
998
964
|
const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
|
|
999
965
|
let val = COLOR2[name] || GRADIENT2[name];
|
|
1000
966
|
if (!val) {
|
|
1001
|
-
if (CONFIG2.verbose)
|
|
1002
|
-
console.warn("Can't find color ", name);
|
|
967
|
+
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
1003
968
|
return value;
|
|
1004
969
|
}
|
|
1005
970
|
if (key) {
|
|
1006
|
-
if (val[key])
|
|
1007
|
-
|
|
1008
|
-
else if (CONFIG2.verbose)
|
|
1009
|
-
console.warn(value, " - does not have ", key);
|
|
971
|
+
if (val[key]) val = val[key];
|
|
972
|
+
else if (CONFIG2.verbose) console.warn(value, " - does not have ", key);
|
|
1010
973
|
}
|
|
1011
974
|
let rgb = val.rgb;
|
|
1012
975
|
if (!rgb) {
|
|
@@ -1016,32 +979,25 @@ var getColor = (value, key, config) => {
|
|
|
1016
979
|
rgb = getRgbTone(rgb, tone);
|
|
1017
980
|
val[tone] = { rgb, var: `${val.var}-${tone}` };
|
|
1018
981
|
}
|
|
1019
|
-
if (val[tone])
|
|
1020
|
-
|
|
1021
|
-
if (alpha)
|
|
1022
|
-
return `rgba(${rgb}, ${alpha})`;
|
|
982
|
+
if (val[tone]) rgb = val[tone].rgb;
|
|
983
|
+
if (alpha) return `rgba(${rgb}, ${alpha})`;
|
|
1023
984
|
return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
|
|
1024
985
|
};
|
|
1025
986
|
var getMediaColor = (value, globalTheme, config) => {
|
|
1026
987
|
const CONFIG2 = config || getActiveConfig();
|
|
1027
|
-
if (!globalTheme)
|
|
1028
|
-
globalTheme = CONFIG2.globalTheme;
|
|
988
|
+
if (!globalTheme) globalTheme = CONFIG2.globalTheme;
|
|
1029
989
|
if (!isString(value)) {
|
|
1030
|
-
if (CONFIG2.verbose)
|
|
1031
|
-
console.warn(value, "- type for color is not valid");
|
|
990
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1032
991
|
return;
|
|
1033
992
|
}
|
|
1034
|
-
if (value.slice(0, 2) === "--")
|
|
1035
|
-
return `var(${value})`;
|
|
993
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1036
994
|
const [name] = isArray(value) ? value : value.split(" ");
|
|
1037
995
|
const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
|
|
1038
996
|
const val = COLOR2[name] || GRADIENT2[name];
|
|
1039
997
|
const isObj = isObject(val);
|
|
1040
|
-
if (isObj && val.value)
|
|
1041
|
-
return getColor(value, `@${globalTheme}`, config);
|
|
998
|
+
if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
|
|
1042
999
|
else if (isObj) {
|
|
1043
|
-
if (globalTheme)
|
|
1044
|
-
return getColor(value, `@${globalTheme}`, config);
|
|
1000
|
+
if (globalTheme) return getColor(value, `@${globalTheme}`, config);
|
|
1045
1001
|
else {
|
|
1046
1002
|
const obj = {};
|
|
1047
1003
|
for (const mediaName in val) {
|
|
@@ -1052,8 +1008,7 @@ var getMediaColor = (value, globalTheme, config) => {
|
|
|
1052
1008
|
return obj;
|
|
1053
1009
|
}
|
|
1054
1010
|
} else {
|
|
1055
|
-
if (CONFIG2.verbose)
|
|
1056
|
-
console.warn("Can't find color", value);
|
|
1011
|
+
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
1057
1012
|
return value;
|
|
1058
1013
|
}
|
|
1059
1014
|
};
|
|
@@ -1066,8 +1021,7 @@ var import_utils15 = __toESM(require_cjs(), 1);
|
|
|
1066
1021
|
var getSequence = (sequenceProps) => {
|
|
1067
1022
|
const CONFIG2 = getActiveConfig();
|
|
1068
1023
|
const { SPACING: SPACING2 } = CONFIG2;
|
|
1069
|
-
if (!sequenceProps)
|
|
1070
|
-
return SPACING2;
|
|
1024
|
+
if (!sequenceProps) return SPACING2;
|
|
1071
1025
|
const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
|
|
1072
1026
|
return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
|
|
1073
1027
|
};
|
|
@@ -1077,8 +1031,7 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
|
|
|
1077
1031
|
return { [propertyName]: value };
|
|
1078
1032
|
}
|
|
1079
1033
|
const stack = (0, import_utils15.arrayzeValue)(value);
|
|
1080
|
-
if (!isArray(stack))
|
|
1081
|
-
return;
|
|
1034
|
+
if (!isArray(stack)) return;
|
|
1082
1035
|
if (stack.length > 1) {
|
|
1083
1036
|
let suffix = "";
|
|
1084
1037
|
if (propertyName === "borderWidth") {
|
|
@@ -1137,32 +1090,25 @@ var getSpacingBasedOnRatio = (props, propertyName, val) => {
|
|
|
1137
1090
|
// src/system/shadow.js
|
|
1138
1091
|
var getShadow = (value, globalTheme) => {
|
|
1139
1092
|
const CONFIG2 = getActiveConfig();
|
|
1140
|
-
if (!globalTheme)
|
|
1141
|
-
globalTheme = CONFIG2.globalTheme;
|
|
1093
|
+
if (!globalTheme) globalTheme = CONFIG2.globalTheme;
|
|
1142
1094
|
if (!isString(value)) {
|
|
1143
|
-
if (CONFIG2.verbose)
|
|
1144
|
-
console.warn(value, "- type for color is not valid");
|
|
1095
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1145
1096
|
return;
|
|
1146
1097
|
}
|
|
1147
|
-
if (value.slice(0, 2) === "--")
|
|
1148
|
-
return `var(${value})`;
|
|
1098
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1149
1099
|
const [name] = isArray(value) ? value : value.split(" ");
|
|
1150
1100
|
const { SHADOW: SHADOW2 } = CONFIG2;
|
|
1151
1101
|
const val = SHADOW2[name];
|
|
1152
1102
|
const isObj = isObject(val);
|
|
1153
1103
|
if (!val) {
|
|
1154
|
-
if (CONFIG2.verbose)
|
|
1155
|
-
console.warn("Can't find color ", name);
|
|
1104
|
+
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
1156
1105
|
return value;
|
|
1157
1106
|
}
|
|
1158
1107
|
if (globalTheme) {
|
|
1159
|
-
if (val[globalTheme])
|
|
1160
|
-
|
|
1161
|
-
else if (CONFIG2.verbose)
|
|
1162
|
-
console.warn(value, " - does not have ", globalTheme);
|
|
1108
|
+
if (val[globalTheme]) return val[globalTheme].value;
|
|
1109
|
+
else if (CONFIG2.verbose) console.warn(value, " - does not have ", globalTheme);
|
|
1163
1110
|
}
|
|
1164
|
-
if (isObj && val.value)
|
|
1165
|
-
return val.value;
|
|
1111
|
+
if (isObj && val.value) return val.value;
|
|
1166
1112
|
if (isObj) {
|
|
1167
1113
|
const obj = {};
|
|
1168
1114
|
for (const mediaName in val) {
|
|
@@ -1172,8 +1118,7 @@ var getShadow = (value, globalTheme) => {
|
|
|
1172
1118
|
}
|
|
1173
1119
|
return obj;
|
|
1174
1120
|
}
|
|
1175
|
-
if (CONFIG2.verbose)
|
|
1176
|
-
console.warn("Can't find color", value);
|
|
1121
|
+
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
1177
1122
|
return value;
|
|
1178
1123
|
};
|
|
1179
1124
|
|
|
@@ -1212,25 +1157,18 @@ var transformBorder = (border) => {
|
|
|
1212
1157
|
const arr = border.split(", ");
|
|
1213
1158
|
return arr.map((v) => {
|
|
1214
1159
|
v = v.trim();
|
|
1215
|
-
if (v.slice(0, 2) === "--")
|
|
1216
|
-
|
|
1217
|
-
else if (
|
|
1218
|
-
|
|
1219
|
-
else if (v.slice(-2) === "px" || v.slice(-2) === "em")
|
|
1220
|
-
return v;
|
|
1221
|
-
else if (getColor(v).length > 2)
|
|
1222
|
-
return getColor(v);
|
|
1160
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1161
|
+
else if (isBorderStyle(v)) return v || "solid";
|
|
1162
|
+
else if (v.slice(-2) === "px" || v.slice(-2) === "em") return v;
|
|
1163
|
+
else if (getColor(v).length > 2) return getColor(v);
|
|
1223
1164
|
return getSpacingByKey(v, "border").border;
|
|
1224
1165
|
}).join(" ");
|
|
1225
1166
|
};
|
|
1226
1167
|
var transformTextStroke = (stroke) => {
|
|
1227
1168
|
return stroke.split(", ").map((v) => {
|
|
1228
|
-
if (v.slice(0, 2) === "--")
|
|
1229
|
-
|
|
1230
|
-
if (v
|
|
1231
|
-
return v;
|
|
1232
|
-
else if (getColor(v))
|
|
1233
|
-
return getColor(v);
|
|
1169
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1170
|
+
if (v.includes("px")) return v;
|
|
1171
|
+
else if (getColor(v)) return getColor(v);
|
|
1234
1172
|
return v;
|
|
1235
1173
|
}).join(" ");
|
|
1236
1174
|
};
|
|
@@ -1238,64 +1176,52 @@ var transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
|
|
|
1238
1176
|
var transformBoxShadow = (shadows, globalTheme) => shadows.split("|").map((shadow) => {
|
|
1239
1177
|
return shadow.split(",").map((v) => {
|
|
1240
1178
|
v = v.trim();
|
|
1241
|
-
if (v.slice(0, 2) === "--")
|
|
1242
|
-
return `var(${v})`;
|
|
1179
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1243
1180
|
if (getColor(v).length > 2) {
|
|
1244
1181
|
const color = getMediaColor(v, globalTheme);
|
|
1245
|
-
if (isObject(color))
|
|
1246
|
-
return Object.values(color).filter((v2) => v2.includes(": " + globalTheme))[0];
|
|
1182
|
+
if (isObject(color)) return Object.values(color).filter((v2) => v2.includes(": " + globalTheme))[0];
|
|
1247
1183
|
return color;
|
|
1248
1184
|
}
|
|
1249
|
-
if (v.includes("px") || v.slice(-2) === "em")
|
|
1250
|
-
return v;
|
|
1185
|
+
if (v.includes("px") || v.slice(-2) === "em") return v;
|
|
1251
1186
|
const arr = v.split(" ");
|
|
1252
|
-
if (!arr.length)
|
|
1253
|
-
return v;
|
|
1187
|
+
if (!arr.length) return v;
|
|
1254
1188
|
return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
|
|
1255
1189
|
}).join(" ");
|
|
1256
1190
|
}).join(",");
|
|
1257
1191
|
var transformBackgroundImage = (backgroundImage, globalTheme) => {
|
|
1258
1192
|
const CONFIG2 = getActiveConfig();
|
|
1259
1193
|
return backgroundImage.split(", ").map((v) => {
|
|
1260
|
-
if (v.slice(0, 2) === "--")
|
|
1261
|
-
|
|
1262
|
-
if (v.includes("url") || v.includes("gradient"))
|
|
1263
|
-
return v;
|
|
1194
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1195
|
+
if (v.includes("url") || v.includes("gradient")) return v;
|
|
1264
1196
|
else if (CONFIG2.GRADIENT[backgroundImage]) {
|
|
1265
1197
|
return {
|
|
1266
1198
|
backgroundImage: getMediaColor(backgroundImage, globalTheme || CONFIG2.globalTheme)
|
|
1267
1199
|
};
|
|
1268
|
-
} else if (v.includes("/") || v.startsWith("http") || v.includes("."))
|
|
1269
|
-
return `url(${v})`;
|
|
1200
|
+
} else if (v.includes("/") || v.startsWith("http") || v.includes(".")) return `url(${v})`;
|
|
1270
1201
|
return v;
|
|
1271
1202
|
}).join(" ");
|
|
1272
1203
|
};
|
|
1273
1204
|
var transfromGap = (gap) => isString(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
|
|
1274
1205
|
var transformTransition = (transition) => {
|
|
1275
1206
|
const arr = transition.split(" ");
|
|
1276
|
-
if (!arr.length)
|
|
1277
|
-
return transition;
|
|
1207
|
+
if (!arr.length) return transition;
|
|
1278
1208
|
return arr.map((v) => {
|
|
1279
|
-
if (v.slice(0, 2) === "--")
|
|
1280
|
-
return `var(${v})`;
|
|
1209
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1281
1210
|
if (v.length < 3 || v.includes("ms")) {
|
|
1282
1211
|
const mapWithSequence = getTimingByKey(v);
|
|
1283
1212
|
return mapWithSequence.timing || v;
|
|
1284
1213
|
}
|
|
1285
|
-
if (getTimingFunction(v))
|
|
1286
|
-
return getTimingFunction(v);
|
|
1214
|
+
if (getTimingFunction(v)) return getTimingFunction(v);
|
|
1287
1215
|
return v;
|
|
1288
1216
|
}).join(" ");
|
|
1289
1217
|
};
|
|
1290
1218
|
var transformDuration = (duration, props, propertyName) => {
|
|
1291
|
-
if (!isString(duration))
|
|
1292
|
-
return;
|
|
1219
|
+
if (!isString(duration)) return;
|
|
1293
1220
|
return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
|
|
1294
1221
|
};
|
|
1295
1222
|
var splitTransition = (transition) => {
|
|
1296
1223
|
const arr = transition.split(",");
|
|
1297
|
-
if (!arr.length)
|
|
1298
|
-
return;
|
|
1224
|
+
if (!arr.length) return;
|
|
1299
1225
|
return arr.map(transformTransition).join(",");
|
|
1300
1226
|
};
|
|
1301
1227
|
var checkIfBoxSize = (propertyName) => {
|
|
@@ -1304,16 +1230,14 @@ var checkIfBoxSize = (propertyName) => {
|
|
|
1304
1230
|
};
|
|
1305
1231
|
var transformSize = (propertyName, val, props = {}, opts = {}) => {
|
|
1306
1232
|
let value = val || props[propertyName];
|
|
1307
|
-
if (isUndefined(value) && isNull(value))
|
|
1308
|
-
return;
|
|
1233
|
+
if (isUndefined(value) && isNull(value)) return;
|
|
1309
1234
|
const shouldScaleBoxSize = props.scaleBoxSize;
|
|
1310
1235
|
const isBoxSize = checkIfBoxSize(propertyName);
|
|
1311
1236
|
if (!shouldScaleBoxSize && isBoxSize && isString(value)) {
|
|
1312
1237
|
value = value.split(" ").map((v) => {
|
|
1313
1238
|
const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
|
|
1314
1239
|
const hasUnits = ["%", "vw", "vh", "ch"].some((unit) => value.includes(unit));
|
|
1315
|
-
if (isSingleLetter && !hasUnits)
|
|
1316
|
-
return v + "_default";
|
|
1240
|
+
if (isSingleLetter && !hasUnits) return v + "_default";
|
|
1317
1241
|
return v;
|
|
1318
1242
|
}).join(" ");
|
|
1319
1243
|
}
|
package/dist/cjs/utils/color.js
CHANGED
|
@@ -52,10 +52,8 @@ var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(nav
|
|
|
52
52
|
// src/utils/color.js
|
|
53
53
|
var ENV = "development";
|
|
54
54
|
var colorStringToRgbaArray = (color) => {
|
|
55
|
-
if (color === "")
|
|
56
|
-
|
|
57
|
-
if (color.toLowerCase() === "transparent")
|
|
58
|
-
return [0, 0, 0, 0];
|
|
55
|
+
if (color === "") return [0, 0, 0, 0];
|
|
56
|
+
if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
|
|
59
57
|
if (color[0] === "#") {
|
|
60
58
|
if (color.length < 7) {
|
|
61
59
|
color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
|
|
@@ -86,8 +84,7 @@ var colorStringToRgbaArray = (color) => {
|
|
|
86
84
|
}
|
|
87
85
|
}
|
|
88
86
|
if (color.indexOf("rgb") === 0) {
|
|
89
|
-
if (color.indexOf("rgba") === -1)
|
|
90
|
-
color = `${color}, 1`;
|
|
87
|
+
if (color.indexOf("rgba") === -1) color = `${color}, 1`;
|
|
91
88
|
return color.match(/[\.\d]+/g).map((a) => +a);
|
|
92
89
|
}
|
|
93
90
|
return [0, 0, 0, 0];
|
|
@@ -144,20 +141,14 @@ var hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) %
|
|
|
144
141
|
var getColorShade = (col, amt) => {
|
|
145
142
|
const num = parseInt(col, 16);
|
|
146
143
|
let r = (num >> 16) + amt;
|
|
147
|
-
if (r > 255)
|
|
148
|
-
|
|
149
|
-
else if (r < 0)
|
|
150
|
-
r = 0;
|
|
144
|
+
if (r > 255) r = 255;
|
|
145
|
+
else if (r < 0) r = 0;
|
|
151
146
|
let b = (num >> 8 & 255) + amt;
|
|
152
|
-
if (b > 255)
|
|
153
|
-
|
|
154
|
-
else if (b < 0)
|
|
155
|
-
b = 0;
|
|
147
|
+
if (b > 255) b = 255;
|
|
148
|
+
else if (b < 0) b = 0;
|
|
156
149
|
let g = (num & 255) + amt;
|
|
157
|
-
if (g > 255)
|
|
158
|
-
|
|
159
|
-
else if (g < 0)
|
|
160
|
-
g = 0;
|
|
150
|
+
if (g > 255) g = 255;
|
|
151
|
+
else if (g < 0) g = 0;
|
|
161
152
|
return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
|
|
162
153
|
};
|
|
163
154
|
var mixTwoRgba = (colorA, colorB, range = 0.5) => {
|
|
@@ -173,20 +164,16 @@ var mixTwoRgba = (colorA, colorB, range = 0.5) => {
|
|
|
173
164
|
var opacify = (color, opacity) => {
|
|
174
165
|
const arr = colorStringToRgbaArray(color);
|
|
175
166
|
if (!arr) {
|
|
176
|
-
if (ENV === "testing" || ENV === "development")
|
|
177
|
-
console.warn(color + " color is not rgba");
|
|
167
|
+
if (ENV === "testing" || ENV === "development") console.warn(color + " color is not rgba");
|
|
178
168
|
return;
|
|
179
169
|
}
|
|
180
170
|
arr[3] = opacity;
|
|
181
171
|
return `rgba(${arr})`;
|
|
182
172
|
};
|
|
183
173
|
var getRgbTone = (rgb, tone) => {
|
|
184
|
-
if (isString(rgb) && rgb.includes("rgb"))
|
|
185
|
-
|
|
186
|
-
if (
|
|
187
|
-
rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
|
|
188
|
-
if (isNumber(tone))
|
|
189
|
-
tone += "";
|
|
174
|
+
if (isString(rgb) && rgb.includes("rgb")) rgb = colorStringToRgbaArray(rgb).join(", ");
|
|
175
|
+
if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
|
|
176
|
+
if (isNumber(tone)) tone += "";
|
|
190
177
|
const toHex = rgbArrayToHex(rgb);
|
|
191
178
|
const abs = tone.slice(0, 1);
|
|
192
179
|
if (abs === "-" || abs === "+") {
|
package/dist/cjs/utils/font.js
CHANGED
|
@@ -32,10 +32,8 @@ __export(font_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(font_exports);
|
|
34
34
|
var getDefaultOrFirstKey = (LIBRARY, key) => {
|
|
35
|
-
if (LIBRARY[key])
|
|
36
|
-
|
|
37
|
-
if (LIBRARY.default)
|
|
38
|
-
return LIBRARY[LIBRARY.default].value;
|
|
35
|
+
if (LIBRARY[key]) return LIBRARY[key].value;
|
|
36
|
+
if (LIBRARY.default) return LIBRARY[LIBRARY.default].value;
|
|
39
37
|
const hasValue = Object.keys(LIBRARY)[0];
|
|
40
38
|
return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
|
|
41
39
|
};
|
|
@@ -62,8 +60,7 @@ var getFontFace = (LIBRARY) => {
|
|
|
62
60
|
};
|
|
63
61
|
var getFontFaceEachString = (name, weights) => {
|
|
64
62
|
const isArr = weights[0];
|
|
65
|
-
if (isArr)
|
|
66
|
-
return getFontFaceEach(name, weights).map(setInCustomFontMedia);
|
|
63
|
+
if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
|
|
67
64
|
return setCustomFontMedia(name, weights.url);
|
|
68
65
|
};
|
|
69
66
|
var getFontFaceString = (LIBRARY) => {
|