@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: () => 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,28 @@ 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 ENV = "development";
|
|
893
|
+
var isDev = isNotProduction(ENV);
|
|
894
|
+
|
|
911
895
|
// src/system/typography.js
|
|
912
896
|
var runThroughMedia = (FACTORY2) => {
|
|
913
897
|
const CONFIG2 = getActiveConfig();
|
|
@@ -915,19 +899,10 @@ var runThroughMedia = (FACTORY2) => {
|
|
|
915
899
|
for (const prop in FACTORY2) {
|
|
916
900
|
const isPropMedia = prop.slice(0, 1) === "@";
|
|
917
901
|
const mediaValue = FACTORY2[prop];
|
|
918
|
-
if (!isPropMedia)
|
|
919
|
-
continue;
|
|
902
|
+
if (!isPropMedia) continue;
|
|
920
903
|
const { mediaRegenerate } = FACTORY2;
|
|
921
904
|
const mediaName = prop.slice(1);
|
|
922
|
-
const {
|
|
923
|
-
type,
|
|
924
|
-
base,
|
|
925
|
-
ratio,
|
|
926
|
-
range,
|
|
927
|
-
subSequence,
|
|
928
|
-
h1Matches,
|
|
929
|
-
unit
|
|
930
|
-
} = FACTORY2;
|
|
905
|
+
const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY2;
|
|
931
906
|
merge(mediaValue, {
|
|
932
907
|
type,
|
|
933
908
|
base,
|
|
@@ -957,7 +932,7 @@ var runThroughMedia = (FACTORY2) => {
|
|
|
957
932
|
}
|
|
958
933
|
};
|
|
959
934
|
var applyHeadings = (props) => {
|
|
960
|
-
var _a;
|
|
935
|
+
var _a, _b;
|
|
961
936
|
const CONFIG2 = getActiveConfig();
|
|
962
937
|
if (props.h1Matches) {
|
|
963
938
|
const unit = props.unit;
|
|
@@ -966,10 +941,8 @@ var applyHeadings = (props) => {
|
|
|
966
941
|
for (const k in HEADINGS) {
|
|
967
942
|
const headerName = `h${parseInt(k) + 1}`;
|
|
968
943
|
const headerStyle = templates[headerName];
|
|
969
|
-
if (!HEADINGS[k])
|
|
970
|
-
continue;
|
|
971
944
|
templates[headerName] = {
|
|
972
|
-
fontSize: CONFIG2.useVariable ? `var(${(_a = HEADINGS[k]) == null ? void 0 : _a.variable})` : `${HEADINGS[k].scaling}${unit}`,
|
|
945
|
+
fontSize: CONFIG2.useVariable ? `var(${(_a = HEADINGS[k]) == null ? void 0 : _a.variable})` : `${(_b = HEADINGS[k]) == null ? void 0 : _b.scaling}${unit}`,
|
|
973
946
|
margin: headerStyle ? headerStyle.margin : 0,
|
|
974
947
|
lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
|
|
975
948
|
letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
|
|
@@ -989,9 +962,6 @@ var applyTypographySequence = () => {
|
|
|
989
962
|
var getFontSizeByKey = (value) => {
|
|
990
963
|
const CONFIG2 = getActiveConfig();
|
|
991
964
|
const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
|
|
992
|
-
return getSequenceValuePropertyPair(
|
|
993
|
-
value,
|
|
994
|
-
"fontSize",
|
|
995
|
-
TYPOGRAPHY2
|
|
996
|
-
);
|
|
965
|
+
return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY2);
|
|
997
966
|
};
|
|
967
|
+
// @preserve-env
|