@symbo.ls/scratch 2.27.0 → 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 +4 -8
- package/dist/cjs/index.js +165 -334
- package/dist/cjs/set.js +116 -236
- package/dist/cjs/system/color.js +44 -85
- package/dist/cjs/system/document.js +16 -29
- package/dist/cjs/system/font.js +20 -37
- package/dist/cjs/system/index.js +116 -239
- package/dist/cjs/system/reset.js +23 -43
- package/dist/cjs/system/shadow.js +59 -115
- package/dist/cjs/system/spacing.js +31 -59
- package/dist/cjs/system/svg.js +21 -39
- package/dist/cjs/system/theme.js +57 -111
- package/dist/cjs/system/timing.js +24 -45
- package/dist/cjs/system/typography.js +33 -73
- package/dist/cjs/transforms/index.js +82 -161
- package/dist/cjs/utils/color.js +13 -26
- package/dist/cjs/utils/font.js +3 -6
- package/dist/cjs/utils/index.js +50 -97
- package/dist/cjs/utils/sequence.js +24 -45
- package/dist/cjs/utils/sprite.js +5 -10
- package/dist/cjs/utils/theme.js +3 -6
- package/dist/cjs/utils/var.js +18 -33
- 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) => {
|
|
@@ -384,8 +373,7 @@ var deepClone = (obj, options = {}) => {
|
|
|
384
373
|
const clone2 = targetWindow ? isArray(obj) ? new targetWindow.Array() : new targetWindow.Object() : isArray(obj) ? [] : {};
|
|
385
374
|
visited.set(obj, clone2);
|
|
386
375
|
for (const key in obj) {
|
|
387
|
-
if (!Object.prototype.hasOwnProperty.call(obj, key))
|
|
388
|
-
continue;
|
|
376
|
+
if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
|
|
389
377
|
if (exclude.includes(key) || key.startsWith("__") || key === "__proto__")
|
|
390
378
|
continue;
|
|
391
379
|
const value = obj[key];
|
|
@@ -645,10 +633,8 @@ var isScalingUnit = (unit) => {
|
|
|
645
633
|
|
|
646
634
|
// src/utils/color.js
|
|
647
635
|
var colorStringToRgbaArray = (color) => {
|
|
648
|
-
if (color === "")
|
|
649
|
-
|
|
650
|
-
if (color.toLowerCase() === "transparent")
|
|
651
|
-
return [0, 0, 0, 0];
|
|
636
|
+
if (color === "") return [0, 0, 0, 0];
|
|
637
|
+
if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
|
|
652
638
|
if (color[0] === "#") {
|
|
653
639
|
if (color.length < 7) {
|
|
654
640
|
color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
|
|
@@ -679,8 +665,7 @@ var colorStringToRgbaArray = (color) => {
|
|
|
679
665
|
}
|
|
680
666
|
}
|
|
681
667
|
if (color.indexOf("rgb") === 0) {
|
|
682
|
-
if (color.indexOf("rgba") === -1)
|
|
683
|
-
color = `${color}, 1`;
|
|
668
|
+
if (color.indexOf("rgba") === -1) color = `${color}, 1`;
|
|
684
669
|
return color.match(/[\.\d]+/g).map((a) => +a);
|
|
685
670
|
}
|
|
686
671
|
return [0, 0, 0, 0];
|
|
@@ -706,29 +691,20 @@ var hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) %
|
|
|
706
691
|
var getColorShade = (col, amt) => {
|
|
707
692
|
const num = parseInt(col, 16);
|
|
708
693
|
let r = (num >> 16) + amt;
|
|
709
|
-
if (r > 255)
|
|
710
|
-
|
|
711
|
-
else if (r < 0)
|
|
712
|
-
r = 0;
|
|
694
|
+
if (r > 255) r = 255;
|
|
695
|
+
else if (r < 0) r = 0;
|
|
713
696
|
let b = (num >> 8 & 255) + amt;
|
|
714
|
-
if (b > 255)
|
|
715
|
-
|
|
716
|
-
else if (b < 0)
|
|
717
|
-
b = 0;
|
|
697
|
+
if (b > 255) b = 255;
|
|
698
|
+
else if (b < 0) b = 0;
|
|
718
699
|
let g = (num & 255) + amt;
|
|
719
|
-
if (g > 255)
|
|
720
|
-
|
|
721
|
-
else if (g < 0)
|
|
722
|
-
g = 0;
|
|
700
|
+
if (g > 255) g = 255;
|
|
701
|
+
else if (g < 0) g = 0;
|
|
723
702
|
return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
|
|
724
703
|
};
|
|
725
704
|
var getRgbTone = (rgb, tone) => {
|
|
726
|
-
if (isString(rgb) && rgb.includes("rgb"))
|
|
727
|
-
|
|
728
|
-
if (
|
|
729
|
-
rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
|
|
730
|
-
if (isNumber(tone))
|
|
731
|
-
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 += "";
|
|
732
708
|
const toHex = rgbArrayToHex(rgb);
|
|
733
709
|
const abs = tone.slice(0, 1);
|
|
734
710
|
if (abs === "-" || abs === "+") {
|
|
@@ -790,8 +766,7 @@ var setSequenceValue = (props, sequenceProps) => {
|
|
|
790
766
|
var setScalingVar = (key, sequenceProps) => {
|
|
791
767
|
const { base, type, unit } = sequenceProps;
|
|
792
768
|
const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
|
|
793
|
-
if (key === 0)
|
|
794
|
-
return defaultVal;
|
|
769
|
+
if (key === 0) return defaultVal;
|
|
795
770
|
const prefix = "--" + (type && type.replace(".", "-"));
|
|
796
771
|
const ratioVar = `${prefix}-ratio`;
|
|
797
772
|
if (key > 0) {
|
|
@@ -828,10 +803,8 @@ var generateSubSequence = (props, sequenceProps) => {
|
|
|
828
803
|
const diffRounded = ~~next - ~~value;
|
|
829
804
|
let arr;
|
|
830
805
|
const [first, middle, second] = getSubratioDifference(value, ratio);
|
|
831
|
-
if (diffRounded > 16)
|
|
832
|
-
|
|
833
|
-
else
|
|
834
|
-
arr = [first, second];
|
|
806
|
+
if (diffRounded > 16) arr = [first, middle, second];
|
|
807
|
+
else arr = [first, second];
|
|
835
808
|
arr.forEach((v, k) => {
|
|
836
809
|
const scaling = ~~(v / base * 1e3) / 1e3;
|
|
837
810
|
const newVar = variable + (k + 1);
|
|
@@ -873,8 +846,7 @@ var generateSequence = (sequenceProps) => {
|
|
|
873
846
|
index: key
|
|
874
847
|
};
|
|
875
848
|
setSequenceValue(props, sequenceProps);
|
|
876
|
-
if (subSequence)
|
|
877
|
-
generateSubSequence(props, sequenceProps);
|
|
849
|
+
if (subSequence) generateSubSequence(props, sequenceProps);
|
|
878
850
|
}
|
|
879
851
|
return sequenceProps;
|
|
880
852
|
};
|
|
@@ -886,13 +858,11 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
886
858
|
unit = UNIT2.default,
|
|
887
859
|
useVariable
|
|
888
860
|
} = sequenceProps;
|
|
889
|
-
if (isString(value) && value.slice(0, 2) === "--")
|
|
890
|
-
return `var(${value})`;
|
|
861
|
+
if (isString(value) && value.slice(0, 2) === "--") return `var(${value})`;
|
|
891
862
|
const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
|
|
892
863
|
const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
|
|
893
864
|
const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
|
|
894
|
-
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)
|
|
895
|
-
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;
|
|
896
866
|
const letterVal = value.toUpperCase();
|
|
897
867
|
const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
|
|
898
868
|
let absValue = isNegative ? letterVal.slice(1) : letterVal;
|
|
@@ -916,8 +886,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
916
886
|
return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
|
|
917
887
|
}
|
|
918
888
|
if (!sequence[absValue] && absValue.length === 2) {
|
|
919
|
-
if (CONFIG2.verbose)
|
|
920
|
-
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");
|
|
921
890
|
absValue = absValue.slice(0, 1);
|
|
922
891
|
}
|
|
923
892
|
if (useVariable || CONFIG2.useVariable) {
|
|
@@ -925,8 +894,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
925
894
|
return isNegative ? `calc(${varValue2} * -1)` : varValue2;
|
|
926
895
|
}
|
|
927
896
|
const sequenceItem = sequence ? sequence[absValue] : null;
|
|
928
|
-
if (!sequenceItem)
|
|
929
|
-
return console.warn("can't find", sequence, absValue);
|
|
897
|
+
if (!sequenceItem) return console.warn("can't find", sequence, absValue);
|
|
930
898
|
if (unit === "ms" || unit === "s") {
|
|
931
899
|
return isNegative + sequenceItem.val + unit;
|
|
932
900
|
}
|
|
@@ -935,12 +903,10 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
935
903
|
var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
|
|
936
904
|
if (typeof value !== "string") {
|
|
937
905
|
const CONFIG2 = getActiveConfig();
|
|
938
|
-
if (CONFIG2.verbose)
|
|
939
|
-
console.warn(propertyName, value, "is not a string");
|
|
906
|
+
if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
|
|
940
907
|
return { [propertyName]: value };
|
|
941
908
|
}
|
|
942
|
-
if (value === "-" || value === "")
|
|
943
|
-
return {};
|
|
909
|
+
if (value === "-" || value === "") return {};
|
|
944
910
|
return { [propertyName]: getSequenceValue(value, sequenceProps) };
|
|
945
911
|
};
|
|
946
912
|
|
|
@@ -989,27 +955,21 @@ var applySequenceVars = (FACTORY2, options = {}) => {
|
|
|
989
955
|
var getColor = (value, key, config) => {
|
|
990
956
|
const CONFIG2 = config || getActiveConfig();
|
|
991
957
|
if (!isString(value)) {
|
|
992
|
-
if (CONFIG2.verbose)
|
|
993
|
-
console.warn(value, "- type for color is not valid");
|
|
958
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
994
959
|
return;
|
|
995
960
|
}
|
|
996
|
-
if (value.slice(0, 2) === "--")
|
|
997
|
-
|
|
998
|
-
if (key && value[key])
|
|
999
|
-
value = value[key];
|
|
961
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
962
|
+
if (key && value[key]) value = value[key];
|
|
1000
963
|
const [name, alpha, tone] = isArray(value) ? value : value.split(" ");
|
|
1001
964
|
const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
|
|
1002
965
|
let val = COLOR2[name] || GRADIENT2[name];
|
|
1003
966
|
if (!val) {
|
|
1004
|
-
if (CONFIG2.verbose)
|
|
1005
|
-
console.warn("Can't find color ", name);
|
|
967
|
+
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
1006
968
|
return value;
|
|
1007
969
|
}
|
|
1008
970
|
if (key) {
|
|
1009
|
-
if (val[key])
|
|
1010
|
-
|
|
1011
|
-
else if (CONFIG2.verbose)
|
|
1012
|
-
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);
|
|
1013
973
|
}
|
|
1014
974
|
let rgb = val.rgb;
|
|
1015
975
|
if (!rgb) {
|
|
@@ -1019,32 +979,25 @@ var getColor = (value, key, config) => {
|
|
|
1019
979
|
rgb = getRgbTone(rgb, tone);
|
|
1020
980
|
val[tone] = { rgb, var: `${val.var}-${tone}` };
|
|
1021
981
|
}
|
|
1022
|
-
if (val[tone])
|
|
1023
|
-
|
|
1024
|
-
if (alpha)
|
|
1025
|
-
return `rgba(${rgb}, ${alpha})`;
|
|
982
|
+
if (val[tone]) rgb = val[tone].rgb;
|
|
983
|
+
if (alpha) return `rgba(${rgb}, ${alpha})`;
|
|
1026
984
|
return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
|
|
1027
985
|
};
|
|
1028
986
|
var getMediaColor = (value, globalTheme, config) => {
|
|
1029
987
|
const CONFIG2 = config || getActiveConfig();
|
|
1030
|
-
if (!globalTheme)
|
|
1031
|
-
globalTheme = CONFIG2.globalTheme;
|
|
988
|
+
if (!globalTheme) globalTheme = CONFIG2.globalTheme;
|
|
1032
989
|
if (!isString(value)) {
|
|
1033
|
-
if (CONFIG2.verbose)
|
|
1034
|
-
console.warn(value, "- type for color is not valid");
|
|
990
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1035
991
|
return;
|
|
1036
992
|
}
|
|
1037
|
-
if (value.slice(0, 2) === "--")
|
|
1038
|
-
return `var(${value})`;
|
|
993
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1039
994
|
const [name] = isArray(value) ? value : value.split(" ");
|
|
1040
995
|
const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
|
|
1041
996
|
const val = COLOR2[name] || GRADIENT2[name];
|
|
1042
997
|
const isObj = isObject(val);
|
|
1043
|
-
if (isObj && val.value)
|
|
1044
|
-
return getColor(value, `@${globalTheme}`, config);
|
|
998
|
+
if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
|
|
1045
999
|
else if (isObj) {
|
|
1046
|
-
if (globalTheme)
|
|
1047
|
-
return getColor(value, `@${globalTheme}`, config);
|
|
1000
|
+
if (globalTheme) return getColor(value, `@${globalTheme}`, config);
|
|
1048
1001
|
else {
|
|
1049
1002
|
const obj = {};
|
|
1050
1003
|
for (const mediaName in val) {
|
|
@@ -1055,8 +1008,7 @@ var getMediaColor = (value, globalTheme, config) => {
|
|
|
1055
1008
|
return obj;
|
|
1056
1009
|
}
|
|
1057
1010
|
} else {
|
|
1058
|
-
if (CONFIG2.verbose)
|
|
1059
|
-
console.warn("Can't find color", value);
|
|
1011
|
+
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
1060
1012
|
return value;
|
|
1061
1013
|
}
|
|
1062
1014
|
};
|
|
@@ -1069,8 +1021,7 @@ var import_utils15 = __toESM(require_cjs(), 1);
|
|
|
1069
1021
|
var getSequence = (sequenceProps) => {
|
|
1070
1022
|
const CONFIG2 = getActiveConfig();
|
|
1071
1023
|
const { SPACING: SPACING2 } = CONFIG2;
|
|
1072
|
-
if (!sequenceProps)
|
|
1073
|
-
return SPACING2;
|
|
1024
|
+
if (!sequenceProps) return SPACING2;
|
|
1074
1025
|
const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
|
|
1075
1026
|
return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
|
|
1076
1027
|
};
|
|
@@ -1080,8 +1031,7 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
|
|
|
1080
1031
|
return { [propertyName]: value };
|
|
1081
1032
|
}
|
|
1082
1033
|
const stack = (0, import_utils15.arrayzeValue)(value);
|
|
1083
|
-
if (!isArray(stack))
|
|
1084
|
-
return;
|
|
1034
|
+
if (!isArray(stack)) return;
|
|
1085
1035
|
if (stack.length > 1) {
|
|
1086
1036
|
let suffix = "";
|
|
1087
1037
|
if (propertyName === "borderWidth") {
|
|
@@ -1140,32 +1090,25 @@ var getSpacingBasedOnRatio = (props, propertyName, val) => {
|
|
|
1140
1090
|
// src/system/shadow.js
|
|
1141
1091
|
var getShadow = (value, globalTheme) => {
|
|
1142
1092
|
const CONFIG2 = getActiveConfig();
|
|
1143
|
-
if (!globalTheme)
|
|
1144
|
-
globalTheme = CONFIG2.globalTheme;
|
|
1093
|
+
if (!globalTheme) globalTheme = CONFIG2.globalTheme;
|
|
1145
1094
|
if (!isString(value)) {
|
|
1146
|
-
if (CONFIG2.verbose)
|
|
1147
|
-
console.warn(value, "- type for color is not valid");
|
|
1095
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1148
1096
|
return;
|
|
1149
1097
|
}
|
|
1150
|
-
if (value.slice(0, 2) === "--")
|
|
1151
|
-
return `var(${value})`;
|
|
1098
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1152
1099
|
const [name] = isArray(value) ? value : value.split(" ");
|
|
1153
1100
|
const { SHADOW: SHADOW2 } = CONFIG2;
|
|
1154
1101
|
const val = SHADOW2[name];
|
|
1155
1102
|
const isObj = isObject(val);
|
|
1156
1103
|
if (!val) {
|
|
1157
|
-
if (CONFIG2.verbose)
|
|
1158
|
-
console.warn("Can't find color ", name);
|
|
1104
|
+
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
1159
1105
|
return value;
|
|
1160
1106
|
}
|
|
1161
1107
|
if (globalTheme) {
|
|
1162
|
-
if (val[globalTheme])
|
|
1163
|
-
|
|
1164
|
-
else if (CONFIG2.verbose)
|
|
1165
|
-
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);
|
|
1166
1110
|
}
|
|
1167
|
-
if (isObj && val.value)
|
|
1168
|
-
return val.value;
|
|
1111
|
+
if (isObj && val.value) return val.value;
|
|
1169
1112
|
if (isObj) {
|
|
1170
1113
|
const obj = {};
|
|
1171
1114
|
for (const mediaName in val) {
|
|
@@ -1175,8 +1118,7 @@ var getShadow = (value, globalTheme) => {
|
|
|
1175
1118
|
}
|
|
1176
1119
|
return obj;
|
|
1177
1120
|
}
|
|
1178
|
-
if (CONFIG2.verbose)
|
|
1179
|
-
console.warn("Can't find color", value);
|
|
1121
|
+
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
1180
1122
|
return value;
|
|
1181
1123
|
};
|
|
1182
1124
|
|
|
@@ -1215,25 +1157,18 @@ var transformBorder = (border) => {
|
|
|
1215
1157
|
const arr = border.split(", ");
|
|
1216
1158
|
return arr.map((v) => {
|
|
1217
1159
|
v = v.trim();
|
|
1218
|
-
if (v.slice(0, 2) === "--")
|
|
1219
|
-
|
|
1220
|
-
else if (
|
|
1221
|
-
|
|
1222
|
-
else if (v.slice(-2) === "px" || v.slice(-2) === "em")
|
|
1223
|
-
return v;
|
|
1224
|
-
else if (getColor(v).length > 2)
|
|
1225
|
-
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);
|
|
1226
1164
|
return getSpacingByKey(v, "border").border;
|
|
1227
1165
|
}).join(" ");
|
|
1228
1166
|
};
|
|
1229
1167
|
var transformTextStroke = (stroke) => {
|
|
1230
1168
|
return stroke.split(", ").map((v) => {
|
|
1231
|
-
if (v.slice(0, 2) === "--")
|
|
1232
|
-
|
|
1233
|
-
if (v
|
|
1234
|
-
return v;
|
|
1235
|
-
else if (getColor(v))
|
|
1236
|
-
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);
|
|
1237
1172
|
return v;
|
|
1238
1173
|
}).join(" ");
|
|
1239
1174
|
};
|
|
@@ -1241,64 +1176,52 @@ var transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
|
|
|
1241
1176
|
var transformBoxShadow = (shadows, globalTheme) => shadows.split("|").map((shadow) => {
|
|
1242
1177
|
return shadow.split(",").map((v) => {
|
|
1243
1178
|
v = v.trim();
|
|
1244
|
-
if (v.slice(0, 2) === "--")
|
|
1245
|
-
return `var(${v})`;
|
|
1179
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1246
1180
|
if (getColor(v).length > 2) {
|
|
1247
1181
|
const color = getMediaColor(v, globalTheme);
|
|
1248
|
-
if (isObject(color))
|
|
1249
|
-
return Object.values(color).filter((v2) => v2.includes(": " + globalTheme))[0];
|
|
1182
|
+
if (isObject(color)) return Object.values(color).filter((v2) => v2.includes(": " + globalTheme))[0];
|
|
1250
1183
|
return color;
|
|
1251
1184
|
}
|
|
1252
|
-
if (v.includes("px") || v.slice(-2) === "em")
|
|
1253
|
-
return v;
|
|
1185
|
+
if (v.includes("px") || v.slice(-2) === "em") return v;
|
|
1254
1186
|
const arr = v.split(" ");
|
|
1255
|
-
if (!arr.length)
|
|
1256
|
-
return v;
|
|
1187
|
+
if (!arr.length) return v;
|
|
1257
1188
|
return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
|
|
1258
1189
|
}).join(" ");
|
|
1259
1190
|
}).join(",");
|
|
1260
1191
|
var transformBackgroundImage = (backgroundImage, globalTheme) => {
|
|
1261
1192
|
const CONFIG2 = getActiveConfig();
|
|
1262
1193
|
return backgroundImage.split(", ").map((v) => {
|
|
1263
|
-
if (v.slice(0, 2) === "--")
|
|
1264
|
-
|
|
1265
|
-
if (v.includes("url") || v.includes("gradient"))
|
|
1266
|
-
return v;
|
|
1194
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1195
|
+
if (v.includes("url") || v.includes("gradient")) return v;
|
|
1267
1196
|
else if (CONFIG2.GRADIENT[backgroundImage]) {
|
|
1268
1197
|
return {
|
|
1269
1198
|
backgroundImage: getMediaColor(backgroundImage, globalTheme || CONFIG2.globalTheme)
|
|
1270
1199
|
};
|
|
1271
|
-
} else if (v.includes("/") || v.startsWith("http") || v.includes("."))
|
|
1272
|
-
return `url(${v})`;
|
|
1200
|
+
} else if (v.includes("/") || v.startsWith("http") || v.includes(".")) return `url(${v})`;
|
|
1273
1201
|
return v;
|
|
1274
1202
|
}).join(" ");
|
|
1275
1203
|
};
|
|
1276
1204
|
var transfromGap = (gap) => isString(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
|
|
1277
1205
|
var transformTransition = (transition) => {
|
|
1278
1206
|
const arr = transition.split(" ");
|
|
1279
|
-
if (!arr.length)
|
|
1280
|
-
return transition;
|
|
1207
|
+
if (!arr.length) return transition;
|
|
1281
1208
|
return arr.map((v) => {
|
|
1282
|
-
if (v.slice(0, 2) === "--")
|
|
1283
|
-
return `var(${v})`;
|
|
1209
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1284
1210
|
if (v.length < 3 || v.includes("ms")) {
|
|
1285
1211
|
const mapWithSequence = getTimingByKey(v);
|
|
1286
1212
|
return mapWithSequence.timing || v;
|
|
1287
1213
|
}
|
|
1288
|
-
if (getTimingFunction(v))
|
|
1289
|
-
return getTimingFunction(v);
|
|
1214
|
+
if (getTimingFunction(v)) return getTimingFunction(v);
|
|
1290
1215
|
return v;
|
|
1291
1216
|
}).join(" ");
|
|
1292
1217
|
};
|
|
1293
1218
|
var transformDuration = (duration, props, propertyName) => {
|
|
1294
|
-
if (!isString(duration))
|
|
1295
|
-
return;
|
|
1219
|
+
if (!isString(duration)) return;
|
|
1296
1220
|
return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
|
|
1297
1221
|
};
|
|
1298
1222
|
var splitTransition = (transition) => {
|
|
1299
1223
|
const arr = transition.split(",");
|
|
1300
|
-
if (!arr.length)
|
|
1301
|
-
return;
|
|
1224
|
+
if (!arr.length) return;
|
|
1302
1225
|
return arr.map(transformTransition).join(",");
|
|
1303
1226
|
};
|
|
1304
1227
|
var checkIfBoxSize = (propertyName) => {
|
|
@@ -1307,16 +1230,14 @@ var checkIfBoxSize = (propertyName) => {
|
|
|
1307
1230
|
};
|
|
1308
1231
|
var transformSize = (propertyName, val, props = {}, opts = {}) => {
|
|
1309
1232
|
let value = val || props[propertyName];
|
|
1310
|
-
if (isUndefined(value) && isNull(value))
|
|
1311
|
-
return;
|
|
1233
|
+
if (isUndefined(value) && isNull(value)) return;
|
|
1312
1234
|
const shouldScaleBoxSize = props.scaleBoxSize;
|
|
1313
1235
|
const isBoxSize = checkIfBoxSize(propertyName);
|
|
1314
1236
|
if (!shouldScaleBoxSize && isBoxSize && isString(value)) {
|
|
1315
1237
|
value = value.split(" ").map((v) => {
|
|
1316
1238
|
const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
|
|
1317
1239
|
const hasUnits = ["%", "vw", "vh", "ch"].some((unit) => value.includes(unit));
|
|
1318
|
-
if (isSingleLetter && !hasUnits)
|
|
1319
|
-
return v + "_default";
|
|
1240
|
+
if (isSingleLetter && !hasUnits) return v + "_default";
|
|
1320
1241
|
return v;
|
|
1321
1242
|
}).join(" ");
|
|
1322
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) => {
|