@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
|
@@ -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
|
});
|
|
@@ -281,6 +272,11 @@ __export(transforms_exports, {
|
|
|
281
272
|
});
|
|
282
273
|
module.exports = __toCommonJS(transforms_exports);
|
|
283
274
|
|
|
275
|
+
// ../../../domql/packages/utils/dist/esm/env.js
|
|
276
|
+
var NODE_ENV = "development";
|
|
277
|
+
var isProduction = (env = NODE_ENV) => env === "production";
|
|
278
|
+
var isNotProduction = (env = NODE_ENV) => !isProduction(env);
|
|
279
|
+
|
|
284
280
|
// ../../../domql/packages/utils/dist/esm/globals.js
|
|
285
281
|
var window2 = globalThis;
|
|
286
282
|
var document2 = window2.document;
|
|
@@ -292,8 +288,7 @@ var isDOMNode = (obj) => {
|
|
|
292
288
|
|
|
293
289
|
// ../../../domql/packages/utils/dist/esm/types.js
|
|
294
290
|
var isObject = (arg) => {
|
|
295
|
-
if (arg === null)
|
|
296
|
-
return false;
|
|
291
|
+
if (arg === null) return false;
|
|
297
292
|
return typeof arg === "object" && arg.constructor === Object;
|
|
298
293
|
};
|
|
299
294
|
var isString = (arg) => typeof arg === "string";
|
|
@@ -302,8 +297,7 @@ var isFunction = (arg) => typeof arg === "function";
|
|
|
302
297
|
var isNull = (arg) => arg === null;
|
|
303
298
|
var isArray = (arg) => Array.isArray(arg);
|
|
304
299
|
var isObjectLike = (arg) => {
|
|
305
|
-
if (arg === null)
|
|
306
|
-
return false;
|
|
300
|
+
if (arg === null) return false;
|
|
307
301
|
return typeof arg === "object";
|
|
308
302
|
};
|
|
309
303
|
var isUndefined = (arg) => {
|
|
@@ -384,8 +378,7 @@ var deepClone = (obj, options = {}) => {
|
|
|
384
378
|
const clone2 = targetWindow ? isArray(obj) ? new targetWindow.Array() : new targetWindow.Object() : isArray(obj) ? [] : {};
|
|
385
379
|
visited.set(obj, clone2);
|
|
386
380
|
for (const key in obj) {
|
|
387
|
-
if (!Object.prototype.hasOwnProperty.call(obj, key))
|
|
388
|
-
continue;
|
|
381
|
+
if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
|
|
389
382
|
if (exclude.includes(key) || key.startsWith("__") || key === "__proto__")
|
|
390
383
|
continue;
|
|
391
384
|
const value = obj[key];
|
|
@@ -645,10 +638,8 @@ var isScalingUnit = (unit) => {
|
|
|
645
638
|
|
|
646
639
|
// src/utils/color.js
|
|
647
640
|
var colorStringToRgbaArray = (color) => {
|
|
648
|
-
if (color === "")
|
|
649
|
-
|
|
650
|
-
if (color.toLowerCase() === "transparent")
|
|
651
|
-
return [0, 0, 0, 0];
|
|
641
|
+
if (color === "") return [0, 0, 0, 0];
|
|
642
|
+
if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
|
|
652
643
|
if (color[0] === "#") {
|
|
653
644
|
if (color.length < 7) {
|
|
654
645
|
color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
|
|
@@ -679,8 +670,7 @@ var colorStringToRgbaArray = (color) => {
|
|
|
679
670
|
}
|
|
680
671
|
}
|
|
681
672
|
if (color.indexOf("rgb") === 0) {
|
|
682
|
-
if (color.indexOf("rgba") === -1)
|
|
683
|
-
color = `${color}, 1`;
|
|
673
|
+
if (color.indexOf("rgba") === -1) color = `${color}, 1`;
|
|
684
674
|
return color.match(/[\.\d]+/g).map((a) => +a);
|
|
685
675
|
}
|
|
686
676
|
return [0, 0, 0, 0];
|
|
@@ -699,36 +689,25 @@ var rgbToHSL = (r, g, b) => {
|
|
|
699
689
|
const h = n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n);
|
|
700
690
|
return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2];
|
|
701
691
|
};
|
|
702
|
-
var hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) % 12) => l - a * Math.max(
|
|
703
|
-
Math.min(k - 3, 9 - k, 1),
|
|
704
|
-
-1
|
|
705
|
-
)) => [f(0), f(8), f(4)];
|
|
692
|
+
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)];
|
|
706
693
|
var getColorShade = (col, amt) => {
|
|
707
694
|
const num = parseInt(col, 16);
|
|
708
695
|
let r = (num >> 16) + amt;
|
|
709
|
-
if (r > 255)
|
|
710
|
-
|
|
711
|
-
else if (r < 0)
|
|
712
|
-
r = 0;
|
|
696
|
+
if (r > 255) r = 255;
|
|
697
|
+
else if (r < 0) r = 0;
|
|
713
698
|
let b = (num >> 8 & 255) + amt;
|
|
714
|
-
if (b > 255)
|
|
715
|
-
|
|
716
|
-
else if (b < 0)
|
|
717
|
-
b = 0;
|
|
699
|
+
if (b > 255) b = 255;
|
|
700
|
+
else if (b < 0) b = 0;
|
|
718
701
|
let g = (num & 255) + amt;
|
|
719
|
-
if (g > 255)
|
|
720
|
-
|
|
721
|
-
else if (g < 0)
|
|
722
|
-
g = 0;
|
|
702
|
+
if (g > 255) g = 255;
|
|
703
|
+
else if (g < 0) g = 0;
|
|
723
704
|
return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
|
|
724
705
|
};
|
|
725
706
|
var getRgbTone = (rgb, tone) => {
|
|
726
707
|
if (isString(rgb) && rgb.includes("rgb"))
|
|
727
708
|
rgb = colorStringToRgbaArray(rgb).join(", ");
|
|
728
|
-
if (isString(rgb))
|
|
729
|
-
|
|
730
|
-
if (isNumber(tone))
|
|
731
|
-
tone += "";
|
|
709
|
+
if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
|
|
710
|
+
if (isNumber(tone)) tone += "";
|
|
732
711
|
const toHex = rgbArrayToHex(rgb);
|
|
733
712
|
const abs = tone.slice(0, 1);
|
|
734
713
|
if (abs === "-" || abs === "+") {
|
|
@@ -790,8 +769,7 @@ var setSequenceValue = (props, sequenceProps) => {
|
|
|
790
769
|
var setScalingVar = (key, sequenceProps) => {
|
|
791
770
|
const { base, type, unit } = sequenceProps;
|
|
792
771
|
const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
|
|
793
|
-
if (key === 0)
|
|
794
|
-
return defaultVal;
|
|
772
|
+
if (key === 0) return defaultVal;
|
|
795
773
|
const prefix = "--" + (type && type.replace(".", "-"));
|
|
796
774
|
const ratioVar = `${prefix}-ratio`;
|
|
797
775
|
if (key > 0) {
|
|
@@ -828,10 +806,8 @@ var generateSubSequence = (props, sequenceProps) => {
|
|
|
828
806
|
const diffRounded = ~~next - ~~value;
|
|
829
807
|
let arr;
|
|
830
808
|
const [first, middle, second] = getSubratioDifference(value, ratio);
|
|
831
|
-
if (diffRounded > 16)
|
|
832
|
-
|
|
833
|
-
else
|
|
834
|
-
arr = [first, second];
|
|
809
|
+
if (diffRounded > 16) arr = [first, middle, second];
|
|
810
|
+
else arr = [first, second];
|
|
835
811
|
arr.forEach((v, k) => {
|
|
836
812
|
const scaling = ~~(v / base * 1e3) / 1e3;
|
|
837
813
|
const newVar = variable + (k + 1);
|
|
@@ -873,8 +849,7 @@ var generateSequence = (sequenceProps) => {
|
|
|
873
849
|
index: key
|
|
874
850
|
};
|
|
875
851
|
setSequenceValue(props, sequenceProps);
|
|
876
|
-
if (subSequence)
|
|
877
|
-
generateSubSequence(props, sequenceProps);
|
|
852
|
+
if (subSequence) generateSubSequence(props, sequenceProps);
|
|
878
853
|
}
|
|
879
854
|
return sequenceProps;
|
|
880
855
|
};
|
|
@@ -886,13 +861,11 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
886
861
|
unit = UNIT2.default,
|
|
887
862
|
useVariable
|
|
888
863
|
} = sequenceProps;
|
|
889
|
-
if (isString(value) && value.slice(0, 2) === "--")
|
|
890
|
-
return `var(${value})`;
|
|
864
|
+
if (isString(value) && value.slice(0, 2) === "--") return `var(${value})`;
|
|
891
865
|
const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
|
|
892
866
|
const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
|
|
893
867
|
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;
|
|
868
|
+
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
869
|
const letterVal = value.toUpperCase();
|
|
897
870
|
const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
|
|
898
871
|
let absValue = isNegative ? letterVal.slice(1) : letterVal;
|
|
@@ -916,8 +889,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
916
889
|
return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
|
|
917
890
|
}
|
|
918
891
|
if (!sequence[absValue] && absValue.length === 2) {
|
|
919
|
-
if (CONFIG2.verbose)
|
|
920
|
-
console.warn(absValue, "- value is not found because `subSequence` is set to false");
|
|
892
|
+
if (CONFIG2.verbose) console.warn(absValue, "- value is not found because `subSequence` is set to false");
|
|
921
893
|
absValue = absValue.slice(0, 1);
|
|
922
894
|
}
|
|
923
895
|
if (useVariable || CONFIG2.useVariable) {
|
|
@@ -925,8 +897,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
925
897
|
return isNegative ? `calc(${varValue2} * -1)` : varValue2;
|
|
926
898
|
}
|
|
927
899
|
const sequenceItem = sequence ? sequence[absValue] : null;
|
|
928
|
-
if (!sequenceItem)
|
|
929
|
-
return console.warn("can't find", sequence, absValue);
|
|
900
|
+
if (!sequenceItem) return console.warn("can't find", sequence, absValue);
|
|
930
901
|
if (unit === "ms" || unit === "s") {
|
|
931
902
|
return isNegative + sequenceItem.val + unit;
|
|
932
903
|
}
|
|
@@ -935,12 +906,10 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
935
906
|
var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
|
|
936
907
|
if (typeof value !== "string") {
|
|
937
908
|
const CONFIG2 = getActiveConfig();
|
|
938
|
-
if (CONFIG2.verbose)
|
|
939
|
-
console.warn(propertyName, value, "is not a string");
|
|
909
|
+
if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
|
|
940
910
|
return { [propertyName]: value };
|
|
941
911
|
}
|
|
942
|
-
if (value === "-" || value === "")
|
|
943
|
-
return {};
|
|
912
|
+
if (value === "-" || value === "") return {};
|
|
944
913
|
return { [propertyName]: getSequenceValue(value, sequenceProps) };
|
|
945
914
|
};
|
|
946
915
|
|
|
@@ -985,31 +954,29 @@ var applySequenceVars = (FACTORY2, options = {}) => {
|
|
|
985
954
|
}
|
|
986
955
|
};
|
|
987
956
|
|
|
957
|
+
// src/utils/sprite.js
|
|
958
|
+
var ENV = "development";
|
|
959
|
+
var isDev = isNotProduction(ENV);
|
|
960
|
+
|
|
988
961
|
// src/system/color.js
|
|
989
962
|
var getColor = (value, key, config) => {
|
|
990
963
|
const CONFIG2 = config || getActiveConfig();
|
|
991
964
|
if (!isString(value)) {
|
|
992
|
-
if (CONFIG2.verbose)
|
|
993
|
-
console.warn(value, "- type for color is not valid");
|
|
965
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
994
966
|
return;
|
|
995
967
|
}
|
|
996
|
-
if (value.slice(0, 2) === "--")
|
|
997
|
-
|
|
998
|
-
if (key && value[key])
|
|
999
|
-
value = value[key];
|
|
968
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
969
|
+
if (key && value[key]) value = value[key];
|
|
1000
970
|
const [name, alpha, tone] = isArray(value) ? value : value.split(" ");
|
|
1001
971
|
const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
|
|
1002
972
|
let val = COLOR2[name] || GRADIENT2[name];
|
|
1003
973
|
if (!val) {
|
|
1004
|
-
if (CONFIG2.verbose)
|
|
1005
|
-
console.warn("Can't find color ", name);
|
|
974
|
+
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
1006
975
|
return value;
|
|
1007
976
|
}
|
|
1008
977
|
if (key) {
|
|
1009
|
-
if (val[key])
|
|
1010
|
-
|
|
1011
|
-
else if (CONFIG2.verbose)
|
|
1012
|
-
console.warn(value, " - does not have ", key);
|
|
978
|
+
if (val[key]) val = val[key];
|
|
979
|
+
else if (CONFIG2.verbose) console.warn(value, " - does not have ", key);
|
|
1013
980
|
}
|
|
1014
981
|
let rgb = val.rgb;
|
|
1015
982
|
if (!rgb) {
|
|
@@ -1019,32 +986,25 @@ var getColor = (value, key, config) => {
|
|
|
1019
986
|
rgb = getRgbTone(rgb, tone);
|
|
1020
987
|
val[tone] = { rgb, var: `${val.var}-${tone}` };
|
|
1021
988
|
}
|
|
1022
|
-
if (val[tone])
|
|
1023
|
-
|
|
1024
|
-
if (alpha)
|
|
1025
|
-
return `rgba(${rgb}, ${alpha})`;
|
|
989
|
+
if (val[tone]) rgb = val[tone].rgb;
|
|
990
|
+
if (alpha) return `rgba(${rgb}, ${alpha})`;
|
|
1026
991
|
return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
|
|
1027
992
|
};
|
|
1028
993
|
var getMediaColor = (value, globalTheme, config) => {
|
|
1029
994
|
const CONFIG2 = config || getActiveConfig();
|
|
1030
|
-
if (!globalTheme)
|
|
1031
|
-
globalTheme = CONFIG2.globalTheme;
|
|
995
|
+
if (!globalTheme) globalTheme = CONFIG2.globalTheme;
|
|
1032
996
|
if (!isString(value)) {
|
|
1033
|
-
if (CONFIG2.verbose)
|
|
1034
|
-
console.warn(value, "- type for color is not valid");
|
|
997
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1035
998
|
return;
|
|
1036
999
|
}
|
|
1037
|
-
if (value.slice(0, 2) === "--")
|
|
1038
|
-
return `var(${value})`;
|
|
1000
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1039
1001
|
const [name] = isArray(value) ? value : value.split(" ");
|
|
1040
1002
|
const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
|
|
1041
1003
|
const val = COLOR2[name] || GRADIENT2[name];
|
|
1042
1004
|
const isObj = isObject(val);
|
|
1043
|
-
if (isObj && val.value)
|
|
1044
|
-
return getColor(value, `@${globalTheme}`, config);
|
|
1005
|
+
if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
|
|
1045
1006
|
else if (isObj) {
|
|
1046
|
-
if (globalTheme)
|
|
1047
|
-
return getColor(value, `@${globalTheme}`, config);
|
|
1007
|
+
if (globalTheme) return getColor(value, `@${globalTheme}`, config);
|
|
1048
1008
|
else {
|
|
1049
1009
|
const obj = {};
|
|
1050
1010
|
for (const mediaName in val) {
|
|
@@ -1055,8 +1015,7 @@ var getMediaColor = (value, globalTheme, config) => {
|
|
|
1055
1015
|
return obj;
|
|
1056
1016
|
}
|
|
1057
1017
|
} else {
|
|
1058
|
-
if (CONFIG2.verbose)
|
|
1059
|
-
console.warn("Can't find color", value);
|
|
1018
|
+
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
1060
1019
|
return value;
|
|
1061
1020
|
}
|
|
1062
1021
|
};
|
|
@@ -1069,8 +1028,7 @@ var import_utils15 = __toESM(require_cjs(), 1);
|
|
|
1069
1028
|
var getSequence = (sequenceProps) => {
|
|
1070
1029
|
const CONFIG2 = getActiveConfig();
|
|
1071
1030
|
const { SPACING: SPACING2 } = CONFIG2;
|
|
1072
|
-
if (!sequenceProps)
|
|
1073
|
-
return SPACING2;
|
|
1031
|
+
if (!sequenceProps) return SPACING2;
|
|
1074
1032
|
const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
|
|
1075
1033
|
return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
|
|
1076
1034
|
};
|
|
@@ -1080,8 +1038,7 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
|
|
|
1080
1038
|
return { [propertyName]: value };
|
|
1081
1039
|
}
|
|
1082
1040
|
const stack = (0, import_utils15.arrayzeValue)(value);
|
|
1083
|
-
if (!isArray(stack))
|
|
1084
|
-
return;
|
|
1041
|
+
if (!isArray(stack)) return;
|
|
1085
1042
|
if (stack.length > 1) {
|
|
1086
1043
|
let suffix = "";
|
|
1087
1044
|
if (propertyName === "borderWidth") {
|
|
@@ -1140,32 +1097,25 @@ var getSpacingBasedOnRatio = (props, propertyName, val) => {
|
|
|
1140
1097
|
// src/system/shadow.js
|
|
1141
1098
|
var getShadow = (value, globalTheme) => {
|
|
1142
1099
|
const CONFIG2 = getActiveConfig();
|
|
1143
|
-
if (!globalTheme)
|
|
1144
|
-
globalTheme = CONFIG2.globalTheme;
|
|
1100
|
+
if (!globalTheme) globalTheme = CONFIG2.globalTheme;
|
|
1145
1101
|
if (!isString(value)) {
|
|
1146
|
-
if (CONFIG2.verbose)
|
|
1147
|
-
console.warn(value, "- type for color is not valid");
|
|
1102
|
+
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1148
1103
|
return;
|
|
1149
1104
|
}
|
|
1150
|
-
if (value.slice(0, 2) === "--")
|
|
1151
|
-
return `var(${value})`;
|
|
1105
|
+
if (value.slice(0, 2) === "--") return `var(${value})`;
|
|
1152
1106
|
const [name] = isArray(value) ? value : value.split(" ");
|
|
1153
1107
|
const { SHADOW: SHADOW2 } = CONFIG2;
|
|
1154
1108
|
const val = SHADOW2[name];
|
|
1155
1109
|
const isObj = isObject(val);
|
|
1156
1110
|
if (!val) {
|
|
1157
|
-
if (CONFIG2.verbose)
|
|
1158
|
-
console.warn("Can't find color ", name);
|
|
1111
|
+
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
1159
1112
|
return value;
|
|
1160
1113
|
}
|
|
1161
1114
|
if (globalTheme) {
|
|
1162
|
-
if (val[globalTheme])
|
|
1163
|
-
|
|
1164
|
-
else if (CONFIG2.verbose)
|
|
1165
|
-
console.warn(value, " - does not have ", globalTheme);
|
|
1115
|
+
if (val[globalTheme]) return val[globalTheme].value;
|
|
1116
|
+
else if (CONFIG2.verbose) console.warn(value, " - does not have ", globalTheme);
|
|
1166
1117
|
}
|
|
1167
|
-
if (isObj && val.value)
|
|
1168
|
-
return val.value;
|
|
1118
|
+
if (isObj && val.value) return val.value;
|
|
1169
1119
|
if (isObj) {
|
|
1170
1120
|
const obj = {};
|
|
1171
1121
|
for (const mediaName in val) {
|
|
@@ -1175,8 +1125,7 @@ var getShadow = (value, globalTheme) => {
|
|
|
1175
1125
|
}
|
|
1176
1126
|
return obj;
|
|
1177
1127
|
}
|
|
1178
|
-
if (CONFIG2.verbose)
|
|
1179
|
-
console.warn("Can't find color", value);
|
|
1128
|
+
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
1180
1129
|
return value;
|
|
1181
1130
|
};
|
|
1182
1131
|
|
|
@@ -1215,25 +1164,18 @@ var transformBorder = (border) => {
|
|
|
1215
1164
|
const arr = border.split(", ");
|
|
1216
1165
|
return arr.map((v) => {
|
|
1217
1166
|
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);
|
|
1167
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1168
|
+
else if (isBorderStyle(v)) return v || "solid";
|
|
1169
|
+
else if (v.slice(-2) === "px" || v.slice(-2) === "em") return v;
|
|
1170
|
+
else if (getColor(v).length > 2) return getColor(v);
|
|
1226
1171
|
return getSpacingByKey(v, "border").border;
|
|
1227
1172
|
}).join(" ");
|
|
1228
1173
|
};
|
|
1229
1174
|
var transformTextStroke = (stroke) => {
|
|
1230
1175
|
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);
|
|
1176
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1177
|
+
if (v.includes("px")) return v;
|
|
1178
|
+
else if (getColor(v)) return getColor(v);
|
|
1237
1179
|
return v;
|
|
1238
1180
|
}).join(" ");
|
|
1239
1181
|
};
|
|
@@ -1241,64 +1183,52 @@ var transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
|
|
|
1241
1183
|
var transformBoxShadow = (shadows, globalTheme) => shadows.split("|").map((shadow) => {
|
|
1242
1184
|
return shadow.split(",").map((v) => {
|
|
1243
1185
|
v = v.trim();
|
|
1244
|
-
if (v.slice(0, 2) === "--")
|
|
1245
|
-
return `var(${v})`;
|
|
1186
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1246
1187
|
if (getColor(v).length > 2) {
|
|
1247
1188
|
const color = getMediaColor(v, globalTheme);
|
|
1248
|
-
if (isObject(color))
|
|
1249
|
-
return Object.values(color).filter((v2) => v2.includes(": " + globalTheme))[0];
|
|
1189
|
+
if (isObject(color)) return Object.values(color).filter((v2) => v2.includes(": " + globalTheme))[0];
|
|
1250
1190
|
return color;
|
|
1251
1191
|
}
|
|
1252
|
-
if (v.includes("px") || v.slice(-2) === "em")
|
|
1253
|
-
return v;
|
|
1192
|
+
if (v.includes("px") || v.slice(-2) === "em") return v;
|
|
1254
1193
|
const arr = v.split(" ");
|
|
1255
|
-
if (!arr.length)
|
|
1256
|
-
return v;
|
|
1194
|
+
if (!arr.length) return v;
|
|
1257
1195
|
return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
|
|
1258
1196
|
}).join(" ");
|
|
1259
1197
|
}).join(",");
|
|
1260
1198
|
var transformBackgroundImage = (backgroundImage, globalTheme) => {
|
|
1261
1199
|
const CONFIG2 = getActiveConfig();
|
|
1262
1200
|
return backgroundImage.split(", ").map((v) => {
|
|
1263
|
-
if (v.slice(0, 2) === "--")
|
|
1264
|
-
|
|
1265
|
-
if (v.includes("url") || v.includes("gradient"))
|
|
1266
|
-
return v;
|
|
1201
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1202
|
+
if (v.includes("url") || v.includes("gradient")) return v;
|
|
1267
1203
|
else if (CONFIG2.GRADIENT[backgroundImage]) {
|
|
1268
1204
|
return {
|
|
1269
1205
|
backgroundImage: getMediaColor(backgroundImage, globalTheme || CONFIG2.globalTheme)
|
|
1270
1206
|
};
|
|
1271
|
-
} else if (v.includes("/") || v.startsWith("http") || v.includes("."))
|
|
1272
|
-
return `url(${v})`;
|
|
1207
|
+
} else if (v.includes("/") || v.startsWith("http") || v.includes(".")) return `url(${v})`;
|
|
1273
1208
|
return v;
|
|
1274
1209
|
}).join(" ");
|
|
1275
1210
|
};
|
|
1276
1211
|
var transfromGap = (gap) => isString(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
|
|
1277
1212
|
var transformTransition = (transition) => {
|
|
1278
1213
|
const arr = transition.split(" ");
|
|
1279
|
-
if (!arr.length)
|
|
1280
|
-
return transition;
|
|
1214
|
+
if (!arr.length) return transition;
|
|
1281
1215
|
return arr.map((v) => {
|
|
1282
|
-
if (v.slice(0, 2) === "--")
|
|
1283
|
-
return `var(${v})`;
|
|
1216
|
+
if (v.slice(0, 2) === "--") return `var(${v})`;
|
|
1284
1217
|
if (v.length < 3 || v.includes("ms")) {
|
|
1285
1218
|
const mapWithSequence = getTimingByKey(v);
|
|
1286
1219
|
return mapWithSequence.timing || v;
|
|
1287
1220
|
}
|
|
1288
|
-
if (getTimingFunction(v))
|
|
1289
|
-
return getTimingFunction(v);
|
|
1221
|
+
if (getTimingFunction(v)) return getTimingFunction(v);
|
|
1290
1222
|
return v;
|
|
1291
1223
|
}).join(" ");
|
|
1292
1224
|
};
|
|
1293
1225
|
var transformDuration = (duration, props, propertyName) => {
|
|
1294
|
-
if (!isString(duration))
|
|
1295
|
-
return;
|
|
1226
|
+
if (!isString(duration)) return;
|
|
1296
1227
|
return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
|
|
1297
1228
|
};
|
|
1298
1229
|
var splitTransition = (transition) => {
|
|
1299
1230
|
const arr = transition.split(",");
|
|
1300
|
-
if (!arr.length)
|
|
1301
|
-
return;
|
|
1231
|
+
if (!arr.length) return;
|
|
1302
1232
|
return arr.map(transformTransition).join(",");
|
|
1303
1233
|
};
|
|
1304
1234
|
var checkIfBoxSize = (propertyName) => {
|
|
@@ -1307,16 +1237,14 @@ var checkIfBoxSize = (propertyName) => {
|
|
|
1307
1237
|
};
|
|
1308
1238
|
var transformSize = (propertyName, val, props = {}, opts = {}) => {
|
|
1309
1239
|
let value = val || props[propertyName];
|
|
1310
|
-
if (isUndefined(value) && isNull(value))
|
|
1311
|
-
return;
|
|
1240
|
+
if (isUndefined(value) && isNull(value)) return;
|
|
1312
1241
|
const shouldScaleBoxSize = props.scaleBoxSize;
|
|
1313
1242
|
const isBoxSize = checkIfBoxSize(propertyName);
|
|
1314
1243
|
if (!shouldScaleBoxSize && isBoxSize && isString(value)) {
|
|
1315
1244
|
value = value.split(" ").map((v) => {
|
|
1316
1245
|
const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
|
|
1317
1246
|
const hasUnits = ["%", "vw", "vh", "ch"].some((unit) => value.includes(unit));
|
|
1318
|
-
if (isSingleLetter && !hasUnits)
|
|
1319
|
-
return v + "_default";
|
|
1247
|
+
if (isSingleLetter && !hasUnits) return v + "_default";
|
|
1320
1248
|
return v;
|
|
1321
1249
|
}).join(" ");
|
|
1322
1250
|
}
|
|
@@ -1331,3 +1259,4 @@ var transformSizeRatio = (propertyName, props) => {
|
|
|
1331
1259
|
ratio: true
|
|
1332
1260
|
});
|
|
1333
1261
|
};
|
|
1262
|
+
// @preserve-env
|
package/dist/cjs/utils/color.js
CHANGED
|
@@ -38,6 +38,11 @@ __export(color_exports, {
|
|
|
38
38
|
});
|
|
39
39
|
module.exports = __toCommonJS(color_exports);
|
|
40
40
|
|
|
41
|
+
// ../../../domql/packages/utils/dist/esm/env.js
|
|
42
|
+
var NODE_ENV = "development";
|
|
43
|
+
var isProduction = (env = NODE_ENV) => env === "production";
|
|
44
|
+
var isNotProduction = (env = NODE_ENV) => !isProduction(env);
|
|
45
|
+
|
|
41
46
|
// ../../../domql/packages/utils/dist/esm/globals.js
|
|
42
47
|
var window2 = globalThis;
|
|
43
48
|
var document2 = window2.document;
|
|
@@ -52,10 +57,8 @@ var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(nav
|
|
|
52
57
|
// src/utils/color.js
|
|
53
58
|
var ENV = "development";
|
|
54
59
|
var colorStringToRgbaArray = (color) => {
|
|
55
|
-
if (color === "")
|
|
56
|
-
|
|
57
|
-
if (color.toLowerCase() === "transparent")
|
|
58
|
-
return [0, 0, 0, 0];
|
|
60
|
+
if (color === "") return [0, 0, 0, 0];
|
|
61
|
+
if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
|
|
59
62
|
if (color[0] === "#") {
|
|
60
63
|
if (color.length < 7) {
|
|
61
64
|
color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
|
|
@@ -86,8 +89,7 @@ var colorStringToRgbaArray = (color) => {
|
|
|
86
89
|
}
|
|
87
90
|
}
|
|
88
91
|
if (color.indexOf("rgb") === 0) {
|
|
89
|
-
if (color.indexOf("rgba") === -1)
|
|
90
|
-
color = `${color}, 1`;
|
|
92
|
+
if (color.indexOf("rgba") === -1) color = `${color}, 1`;
|
|
91
93
|
return color.match(/[\.\d]+/g).map((a) => +a);
|
|
92
94
|
}
|
|
93
95
|
return [0, 0, 0, 0];
|
|
@@ -124,10 +126,7 @@ var mixTwoRgb = (colorA, colorB, range = 0.5) => {
|
|
|
124
126
|
};
|
|
125
127
|
var changeLightness = (delta, hsl) => {
|
|
126
128
|
const [hue, saturation, lightness] = hsl;
|
|
127
|
-
const newLightness = Math.max(
|
|
128
|
-
0,
|
|
129
|
-
Math.min(100, lightness + parseFloat(delta))
|
|
130
|
-
);
|
|
129
|
+
const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)));
|
|
131
130
|
return [hue, saturation, newLightness];
|
|
132
131
|
};
|
|
133
132
|
var rgbToHSL = (r, g, b) => {
|
|
@@ -137,44 +136,32 @@ var rgbToHSL = (r, g, b) => {
|
|
|
137
136
|
const h = n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n);
|
|
138
137
|
return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2];
|
|
139
138
|
};
|
|
140
|
-
var hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) % 12) => l - a * Math.max(
|
|
141
|
-
Math.min(k - 3, 9 - k, 1),
|
|
142
|
-
-1
|
|
143
|
-
)) => [f(0), f(8), f(4)];
|
|
139
|
+
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)];
|
|
144
140
|
var getColorShade = (col, amt) => {
|
|
145
141
|
const num = parseInt(col, 16);
|
|
146
142
|
let r = (num >> 16) + amt;
|
|
147
|
-
if (r > 255)
|
|
148
|
-
|
|
149
|
-
else if (r < 0)
|
|
150
|
-
r = 0;
|
|
143
|
+
if (r > 255) r = 255;
|
|
144
|
+
else if (r < 0) r = 0;
|
|
151
145
|
let b = (num >> 8 & 255) + amt;
|
|
152
|
-
if (b > 255)
|
|
153
|
-
|
|
154
|
-
else if (b < 0)
|
|
155
|
-
b = 0;
|
|
146
|
+
if (b > 255) b = 255;
|
|
147
|
+
else if (b < 0) b = 0;
|
|
156
148
|
let g = (num & 255) + amt;
|
|
157
|
-
if (g > 255)
|
|
158
|
-
|
|
159
|
-
else if (g < 0)
|
|
160
|
-
g = 0;
|
|
149
|
+
if (g > 255) g = 255;
|
|
150
|
+
else if (g < 0) g = 0;
|
|
161
151
|
return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
|
|
162
152
|
};
|
|
163
153
|
var mixTwoRgba = (colorA, colorB, range = 0.5) => {
|
|
164
154
|
const arr = [];
|
|
165
155
|
for (let i = 0; i < 4; i++) {
|
|
166
156
|
const round = i === 3 ? (x) => x : Math.round;
|
|
167
|
-
arr[i] = round(
|
|
168
|
-
colorA[i] + (colorB[i] - colorA[i]) * range
|
|
169
|
-
);
|
|
157
|
+
arr[i] = round(colorA[i] + (colorB[i] - colorA[i]) * range);
|
|
170
158
|
}
|
|
171
159
|
return `rgba(${arr})`;
|
|
172
160
|
};
|
|
173
161
|
var opacify = (color, opacity) => {
|
|
174
162
|
const arr = colorStringToRgbaArray(color);
|
|
175
163
|
if (!arr) {
|
|
176
|
-
if (ENV
|
|
177
|
-
console.warn(color + " color is not rgba");
|
|
164
|
+
if (isNotProduction(ENV)) console.warn(color + " color is not rgba");
|
|
178
165
|
return;
|
|
179
166
|
}
|
|
180
167
|
arr[3] = opacity;
|
|
@@ -183,10 +170,8 @@ var opacify = (color, opacity) => {
|
|
|
183
170
|
var getRgbTone = (rgb, tone) => {
|
|
184
171
|
if (isString(rgb) && rgb.includes("rgb"))
|
|
185
172
|
rgb = colorStringToRgbaArray(rgb).join(", ");
|
|
186
|
-
if (isString(rgb))
|
|
187
|
-
|
|
188
|
-
if (isNumber(tone))
|
|
189
|
-
tone += "";
|
|
173
|
+
if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
|
|
174
|
+
if (isNumber(tone)) tone += "";
|
|
190
175
|
const toHex = rgbArrayToHex(rgb);
|
|
191
176
|
const abs = tone.slice(0, 1);
|
|
192
177
|
if (abs === "-" || abs === "+") {
|
|
@@ -200,3 +185,4 @@ var getRgbTone = (rgb, tone) => {
|
|
|
200
185
|
return newRgb;
|
|
201
186
|
}
|
|
202
187
|
};
|
|
188
|
+
// @preserve-env
|