@symbo.ls/scratch 2.27.0 → 2.27.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/factory.js +5 -8
- package/dist/cjs/index.js +177 -347
- package/dist/cjs/set.js +126 -241
- package/dist/cjs/system/color.js +53 -87
- package/dist/cjs/system/document.js +25 -29
- package/dist/cjs/system/font.js +29 -37
- package/dist/cjs/system/index.js +126 -244
- package/dist/cjs/system/reset.js +32 -43
- package/dist/cjs/system/shadow.js +68 -117
- package/dist/cjs/system/spacing.js +40 -59
- package/dist/cjs/system/svg.js +31 -42
- package/dist/cjs/system/theme.js +66 -113
- package/dist/cjs/system/timing.js +33 -45
- package/dist/cjs/system/typography.js +42 -73
- package/dist/cjs/transforms/index.js +91 -163
- package/dist/cjs/utils/color.js +21 -36
- package/dist/cjs/utils/font.js +3 -6
- package/dist/cjs/utils/index.js +62 -110
- package/dist/cjs/utils/sequence.js +25 -45
- package/dist/cjs/utils/sprite.js +15 -13
- package/dist/cjs/utils/theme.js +3 -6
- package/dist/cjs/utils/var.js +19 -33
- package/package.json +7 -7
- package/src/system/typography.js +12 -20
- package/src/utils/color.js +42 -31
- package/src/utils/sprite.js +12 -8
|
@@ -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: () => arrayzeValue,
|
|
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 arrayzeValue = (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
|
});
|
|
@@ -273,6 +264,11 @@ __export(typography_exports, {
|
|
|
273
264
|
});
|
|
274
265
|
module.exports = __toCommonJS(typography_exports);
|
|
275
266
|
|
|
267
|
+
// ../../../domql/packages/utils/dist/esm/env.js
|
|
268
|
+
var NODE_ENV = "development";
|
|
269
|
+
var isProduction = (env = NODE_ENV) => env === "production";
|
|
270
|
+
var isNotProduction = (env = NODE_ENV) => !isProduction(env);
|
|
271
|
+
|
|
276
272
|
// ../../../domql/packages/utils/dist/esm/globals.js
|
|
277
273
|
var window2 = globalThis;
|
|
278
274
|
var document2 = window2.document;
|
|
@@ -288,8 +284,7 @@ var isFunction = (arg) => typeof arg === "function";
|
|
|
288
284
|
var isNull = (arg) => arg === null;
|
|
289
285
|
var isArray = (arg) => Array.isArray(arg);
|
|
290
286
|
var isObjectLike = (arg) => {
|
|
291
|
-
if (arg === null)
|
|
292
|
-
return false;
|
|
287
|
+
if (arg === null) return false;
|
|
293
288
|
return typeof arg === "object";
|
|
294
289
|
};
|
|
295
290
|
var isUndefined = (arg) => {
|
|
@@ -370,8 +365,7 @@ var deepClone = (obj, options = {}) => {
|
|
|
370
365
|
const clone2 = targetWindow ? isArray(obj) ? new targetWindow.Array() : new targetWindow.Object() : isArray(obj) ? [] : {};
|
|
371
366
|
visited.set(obj, clone2);
|
|
372
367
|
for (const key in obj) {
|
|
373
|
-
if (!Object.prototype.hasOwnProperty.call(obj, key))
|
|
374
|
-
continue;
|
|
368
|
+
if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
|
|
375
369
|
if (exclude.includes(key) || key.startsWith("__") || key === "__proto__")
|
|
376
370
|
continue;
|
|
377
371
|
const value = obj[key];
|
|
@@ -676,8 +670,7 @@ var setSequenceValue = (props, sequenceProps) => {
|
|
|
676
670
|
var setScalingVar = (key, sequenceProps) => {
|
|
677
671
|
const { base, type, unit } = sequenceProps;
|
|
678
672
|
const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
|
|
679
|
-
if (key === 0)
|
|
680
|
-
return defaultVal;
|
|
673
|
+
if (key === 0) return defaultVal;
|
|
681
674
|
const prefix = "--" + (type && type.replace(".", "-"));
|
|
682
675
|
const ratioVar = `${prefix}-ratio`;
|
|
683
676
|
if (key > 0) {
|
|
@@ -714,10 +707,8 @@ var generateSubSequence = (props, sequenceProps) => {
|
|
|
714
707
|
const diffRounded = ~~next - ~~value;
|
|
715
708
|
let arr;
|
|
716
709
|
const [first, middle, second] = getSubratioDifference(value, ratio);
|
|
717
|
-
if (diffRounded > 16)
|
|
718
|
-
|
|
719
|
-
else
|
|
720
|
-
arr = [first, second];
|
|
710
|
+
if (diffRounded > 16) arr = [first, middle, second];
|
|
711
|
+
else arr = [first, second];
|
|
721
712
|
arr.forEach((v, k) => {
|
|
722
713
|
const scaling = ~~(v / base * 1e3) / 1e3;
|
|
723
714
|
const newVar = variable + (k + 1);
|
|
@@ -759,8 +750,7 @@ var generateSequence = (sequenceProps) => {
|
|
|
759
750
|
index: key
|
|
760
751
|
};
|
|
761
752
|
setSequenceValue(props, sequenceProps);
|
|
762
|
-
if (subSequence)
|
|
763
|
-
generateSubSequence(props, sequenceProps);
|
|
753
|
+
if (subSequence) generateSubSequence(props, sequenceProps);
|
|
764
754
|
}
|
|
765
755
|
return sequenceProps;
|
|
766
756
|
};
|
|
@@ -772,13 +762,11 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
772
762
|
unit = UNIT2.default,
|
|
773
763
|
useVariable
|
|
774
764
|
} = sequenceProps;
|
|
775
|
-
if (isString(value) && value.slice(0, 2) === "--")
|
|
776
|
-
return `var(${value})`;
|
|
765
|
+
if (isString(value) && value.slice(0, 2) === "--") return `var(${value})`;
|
|
777
766
|
const prefix = `--${(0, import_utils4.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
|
|
778
767
|
const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
|
|
779
768
|
const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
|
|
780
|
-
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)
|
|
781
|
-
return value;
|
|
769
|
+
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;
|
|
782
770
|
const letterVal = value.toUpperCase();
|
|
783
771
|
const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
|
|
784
772
|
let absValue = isNegative ? letterVal.slice(1) : letterVal;
|
|
@@ -802,8 +790,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
802
790
|
return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
|
|
803
791
|
}
|
|
804
792
|
if (!sequence[absValue] && absValue.length === 2) {
|
|
805
|
-
if (CONFIG2.verbose)
|
|
806
|
-
console.warn(absValue, "- value is not found because `subSequence` is set to false");
|
|
793
|
+
if (CONFIG2.verbose) console.warn(absValue, "- value is not found because `subSequence` is set to false");
|
|
807
794
|
absValue = absValue.slice(0, 1);
|
|
808
795
|
}
|
|
809
796
|
if (useVariable || CONFIG2.useVariable) {
|
|
@@ -811,8 +798,7 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
811
798
|
return isNegative ? `calc(${varValue2} * -1)` : varValue2;
|
|
812
799
|
}
|
|
813
800
|
const sequenceItem = sequence ? sequence[absValue] : null;
|
|
814
|
-
if (!sequenceItem)
|
|
815
|
-
return console.warn("can't find", sequence, absValue);
|
|
801
|
+
if (!sequenceItem) return console.warn("can't find", sequence, absValue);
|
|
816
802
|
if (unit === "ms" || unit === "s") {
|
|
817
803
|
return isNegative + sequenceItem.val + unit;
|
|
818
804
|
}
|
|
@@ -821,12 +807,10 @@ var getSequenceValue = (value = "A", sequenceProps) => {
|
|
|
821
807
|
var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
|
|
822
808
|
if (typeof value !== "string") {
|
|
823
809
|
const CONFIG2 = getActiveConfig();
|
|
824
|
-
if (CONFIG2.verbose)
|
|
825
|
-
console.warn(propertyName, value, "is not a string");
|
|
810
|
+
if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
|
|
826
811
|
return { [propertyName]: value };
|
|
827
812
|
}
|
|
828
|
-
if (value === "-" || value === "")
|
|
829
|
-
return {};
|
|
813
|
+
if (value === "-" || value === "") return {};
|
|
830
814
|
return { [propertyName]: getSequenceValue(value, sequenceProps) };
|
|
831
815
|
};
|
|
832
816
|
var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
|
|
@@ -886,28 +870,27 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
|
|
|
886
870
|
const { mediaRegenerate } = FACTORY2;
|
|
887
871
|
const { sequence, scales } = FACTORY2[media];
|
|
888
872
|
const query = MEDIA2[mediaName];
|
|
889
|
-
if (!query && CONFIG2.verbose)
|
|
890
|
-
console.warn("Can't find media query ", query);
|
|
873
|
+
if (!query && CONFIG2.verbose) console.warn("Can't find media query ", query);
|
|
891
874
|
if (!mediaRegenerate) {
|
|
892
875
|
let underMediaQuery = CSS_VARS2[`@media ${query}`];
|
|
893
|
-
if (!underMediaQuery)
|
|
894
|
-
underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
876
|
+
if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
895
877
|
applySequenceGlobalVars(underMediaQuery, FACTORY2[media], options);
|
|
896
878
|
return;
|
|
897
879
|
}
|
|
898
880
|
for (const key in sequence) {
|
|
899
881
|
const item = sequence[key];
|
|
900
882
|
const value = (isScalingUnit(unit) ? scales[key] : sequence[key].val) + unit;
|
|
901
|
-
if (!query && CONFIG2.verbose)
|
|
902
|
-
console.warn("Can't find query ", query);
|
|
883
|
+
if (!query && CONFIG2.verbose) console.warn("Can't find query ", query);
|
|
903
884
|
let underMediaQuery = CSS_VARS2[`@media ${query}`];
|
|
904
|
-
if (!underMediaQuery)
|
|
905
|
-
underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
885
|
+
if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
906
886
|
underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
|
|
907
887
|
CSS_VARS2[item.variable + "_" + mediaName] = value;
|
|
908
888
|
}
|
|
909
889
|
};
|
|
910
890
|
|
|
891
|
+
// src/utils/sprite.js
|
|
892
|
+
var isDev = isNotProduction();
|
|
893
|
+
|
|
911
894
|
// src/system/typography.js
|
|
912
895
|
var runThroughMedia = (FACTORY2) => {
|
|
913
896
|
const CONFIG2 = getActiveConfig();
|
|
@@ -915,19 +898,10 @@ var runThroughMedia = (FACTORY2) => {
|
|
|
915
898
|
for (const prop in FACTORY2) {
|
|
916
899
|
const isPropMedia = prop.slice(0, 1) === "@";
|
|
917
900
|
const mediaValue = FACTORY2[prop];
|
|
918
|
-
if (!isPropMedia)
|
|
919
|
-
continue;
|
|
901
|
+
if (!isPropMedia) continue;
|
|
920
902
|
const { mediaRegenerate } = FACTORY2;
|
|
921
903
|
const mediaName = prop.slice(1);
|
|
922
|
-
const {
|
|
923
|
-
type,
|
|
924
|
-
base,
|
|
925
|
-
ratio,
|
|
926
|
-
range,
|
|
927
|
-
subSequence,
|
|
928
|
-
h1Matches,
|
|
929
|
-
unit
|
|
930
|
-
} = FACTORY2;
|
|
904
|
+
const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY2;
|
|
931
905
|
merge(mediaValue, {
|
|
932
906
|
type,
|
|
933
907
|
base,
|
|
@@ -957,7 +931,7 @@ var runThroughMedia = (FACTORY2) => {
|
|
|
957
931
|
}
|
|
958
932
|
};
|
|
959
933
|
var applyHeadings = (props) => {
|
|
960
|
-
var _a;
|
|
934
|
+
var _a, _b;
|
|
961
935
|
const CONFIG2 = getActiveConfig();
|
|
962
936
|
if (props.h1Matches) {
|
|
963
937
|
const unit = props.unit;
|
|
@@ -966,10 +940,8 @@ var applyHeadings = (props) => {
|
|
|
966
940
|
for (const k in HEADINGS) {
|
|
967
941
|
const headerName = `h${parseInt(k) + 1}`;
|
|
968
942
|
const headerStyle = templates[headerName];
|
|
969
|
-
if (!HEADINGS[k])
|
|
970
|
-
continue;
|
|
971
943
|
templates[headerName] = {
|
|
972
|
-
fontSize: CONFIG2.useVariable ? `var(${(_a = HEADINGS[k]) == null ? void 0 : _a.variable})` : `${HEADINGS[k].scaling}${unit}`,
|
|
944
|
+
fontSize: CONFIG2.useVariable ? `var(${(_a = HEADINGS[k]) == null ? void 0 : _a.variable})` : `${(_b = HEADINGS[k]) == null ? void 0 : _b.scaling}${unit}`,
|
|
973
945
|
margin: headerStyle ? headerStyle.margin : 0,
|
|
974
946
|
lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
|
|
975
947
|
letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
|
|
@@ -989,9 +961,6 @@ var applyTypographySequence = () => {
|
|
|
989
961
|
var getFontSizeByKey = (value) => {
|
|
990
962
|
const CONFIG2 = getActiveConfig();
|
|
991
963
|
const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
|
|
992
|
-
return getSequenceValuePropertyPair(
|
|
993
|
-
value,
|
|
994
|
-
"fontSize",
|
|
995
|
-
TYPOGRAPHY2
|
|
996
|
-
);
|
|
964
|
+
return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY2);
|
|
997
965
|
};
|
|
966
|
+
// @preserve-env
|