@symbo.ls/scratch 2.25.3 → 2.27.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/factory.js +8 -9
- package/dist/cjs/index.js +169 -335
- package/dist/cjs/set.js +120 -237
- package/dist/cjs/system/color.js +48 -86
- package/dist/cjs/system/document.js +20 -30
- package/dist/cjs/system/font.js +24 -38
- package/dist/cjs/system/index.js +120 -240
- package/dist/cjs/system/reset.js +27 -44
- package/dist/cjs/system/shadow.js +63 -116
- package/dist/cjs/system/spacing.js +35 -60
- package/dist/cjs/system/svg.js +25 -40
- package/dist/cjs/system/theme.js +61 -112
- package/dist/cjs/system/timing.js +28 -46
- package/dist/cjs/system/typography.js +37 -74
- package/dist/cjs/transforms/index.js +86 -162
- package/dist/cjs/utils/color.js +13 -26
- package/dist/cjs/utils/font.js +3 -6
- package/dist/cjs/utils/index.js +54 -98
- package/dist/cjs/utils/sequence.js +28 -46
- package/dist/cjs/utils/sprite.js +9 -11
- package/dist/cjs/utils/theme.js +3 -6
- package/dist/cjs/utils/var.js +22 -34
- package/package.json +7 -7
- package/src/system/typography.js +12 -20
package/dist/cjs/utils/var.js
CHANGED
|
@@ -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
|
});
|
|
@@ -287,8 +278,7 @@ var isFunction = (arg) => typeof arg === "function";
|
|
|
287
278
|
var isNull = (arg) => arg === null;
|
|
288
279
|
var isArray = (arg) => Array.isArray(arg);
|
|
289
280
|
var isObjectLike = (arg) => {
|
|
290
|
-
if (arg === null)
|
|
291
|
-
return false;
|
|
281
|
+
if (arg === null) return false;
|
|
292
282
|
return typeof arg === "object";
|
|
293
283
|
};
|
|
294
284
|
var isUndefined = (arg) => {
|
|
@@ -297,7 +287,10 @@ var isUndefined = (arg) => {
|
|
|
297
287
|
|
|
298
288
|
// ../../../domql/packages/utils/dist/esm/array.js
|
|
299
289
|
var mergeArray = (arr, exclude = []) => {
|
|
300
|
-
return arr.reduce(
|
|
290
|
+
return arr.reduce(
|
|
291
|
+
(a, c) => deepMerge(a, deepClone(c, { exclude }), exclude),
|
|
292
|
+
{}
|
|
293
|
+
);
|
|
301
294
|
};
|
|
302
295
|
|
|
303
296
|
// ../../../domql/packages/utils/dist/esm/object.js
|
|
@@ -353,8 +346,7 @@ var deepClone = (obj, options = {}) => {
|
|
|
353
346
|
const clone2 = targetWindow ? isArray(obj) ? new targetWindow.Array() : new targetWindow.Object() : isArray(obj) ? [] : {};
|
|
354
347
|
visited.set(obj, clone2);
|
|
355
348
|
for (const key in obj) {
|
|
356
|
-
if (!Object.prototype.hasOwnProperty.call(obj, key))
|
|
357
|
-
continue;
|
|
349
|
+
if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
|
|
358
350
|
if (exclude.includes(key) || key.startsWith("__") || key === "__proto__")
|
|
359
351
|
continue;
|
|
360
352
|
const value = obj[key];
|
|
@@ -684,23 +676,19 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
|
|
|
684
676
|
const { mediaRegenerate } = FACTORY2;
|
|
685
677
|
const { sequence, scales } = FACTORY2[media];
|
|
686
678
|
const query = MEDIA2[mediaName];
|
|
687
|
-
if (!query && CONFIG2.verbose)
|
|
688
|
-
console.warn("Can't find media query ", query);
|
|
679
|
+
if (!query && CONFIG2.verbose) console.warn("Can't find media query ", query);
|
|
689
680
|
if (!mediaRegenerate) {
|
|
690
681
|
let underMediaQuery = CSS_VARS2[`@media ${query}`];
|
|
691
|
-
if (!underMediaQuery)
|
|
692
|
-
underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
682
|
+
if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
693
683
|
applySequenceGlobalVars(underMediaQuery, FACTORY2[media], options);
|
|
694
684
|
return;
|
|
695
685
|
}
|
|
696
686
|
for (const key in sequence) {
|
|
697
687
|
const item = sequence[key];
|
|
698
688
|
const value = (isScalingUnit(unit) ? scales[key] : sequence[key].val) + unit;
|
|
699
|
-
if (!query && CONFIG2.verbose)
|
|
700
|
-
console.warn("Can't find query ", query);
|
|
689
|
+
if (!query && CONFIG2.verbose) console.warn("Can't find query ", query);
|
|
701
690
|
let underMediaQuery = CSS_VARS2[`@media ${query}`];
|
|
702
|
-
if (!underMediaQuery)
|
|
703
|
-
underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
691
|
+
if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
704
692
|
underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
|
|
705
693
|
CSS_VARS2[item.variable + "_" + mediaName] = value;
|
|
706
694
|
}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@symbo.ls/scratch",
|
|
3
3
|
"description": "Φ / CSS framework and methodology.",
|
|
4
4
|
"author": "symbo.ls",
|
|
5
|
-
"version": "2.
|
|
5
|
+
"version": "2.27.8",
|
|
6
6
|
"files": [
|
|
7
7
|
"src",
|
|
8
8
|
"dist"
|
|
@@ -18,16 +18,16 @@
|
|
|
18
18
|
"publishConfig": {},
|
|
19
19
|
"scripts": {
|
|
20
20
|
"copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
|
|
21
|
-
"build:esm": "npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
|
|
22
|
-
"build:cjs": "npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs --bundle",
|
|
23
|
-
"build:iife": "npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
|
|
21
|
+
"build:esm": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
|
|
22
|
+
"build:cjs": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs --bundle",
|
|
23
|
+
"build:iife": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
|
|
24
24
|
"build": "npm run build:cjs",
|
|
25
25
|
"prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@domql/utils": "^2.
|
|
29
|
-
"@symbo.ls/utils": "^2.
|
|
28
|
+
"@domql/utils": "^2.27.8",
|
|
29
|
+
"@symbo.ls/utils": "^2.27.8",
|
|
30
30
|
"color-contrast-checker": "^1.5.0"
|
|
31
31
|
},
|
|
32
|
-
"gitHead": "
|
|
32
|
+
"gitHead": "e783fd54228d5c7aaab9d4b5624199a17a6c4713"
|
|
33
33
|
}
|
package/src/system/typography.js
CHANGED
|
@@ -23,15 +23,7 @@ export const runThroughMedia = FACTORY => {
|
|
|
23
23
|
const { mediaRegenerate } = FACTORY
|
|
24
24
|
const mediaName = prop.slice(1)
|
|
25
25
|
|
|
26
|
-
const {
|
|
27
|
-
type,
|
|
28
|
-
base,
|
|
29
|
-
ratio,
|
|
30
|
-
range,
|
|
31
|
-
subSequence,
|
|
32
|
-
h1Matches,
|
|
33
|
-
unit
|
|
34
|
-
} = FACTORY
|
|
26
|
+
const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY
|
|
35
27
|
|
|
36
28
|
merge(mediaValue, {
|
|
37
29
|
type,
|
|
@@ -44,7 +36,8 @@ export const runThroughMedia = FACTORY => {
|
|
|
44
36
|
})
|
|
45
37
|
|
|
46
38
|
const query = MEDIA[mediaName]
|
|
47
|
-
const media =
|
|
39
|
+
const media =
|
|
40
|
+
'@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
|
|
48
41
|
TYPOGRAPHY.templates[media] = {
|
|
49
42
|
fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + unit
|
|
50
43
|
}
|
|
@@ -67,7 +60,7 @@ export const runThroughMedia = FACTORY => {
|
|
|
67
60
|
}
|
|
68
61
|
}
|
|
69
62
|
|
|
70
|
-
export const applyHeadings =
|
|
63
|
+
export const applyHeadings = props => {
|
|
71
64
|
const CONFIG = getActiveConfig()
|
|
72
65
|
if (props.h1Matches) {
|
|
73
66
|
const unit = props.unit
|
|
@@ -76,13 +69,16 @@ export const applyHeadings = (props) => {
|
|
|
76
69
|
for (const k in HEADINGS) {
|
|
77
70
|
const headerName = `h${parseInt(k) + 1}`
|
|
78
71
|
const headerStyle = templates[headerName]
|
|
79
|
-
if (!HEADINGS[k]) continue
|
|
80
72
|
templates[headerName] = {
|
|
81
|
-
fontSize: CONFIG.useVariable
|
|
73
|
+
fontSize: CONFIG.useVariable
|
|
74
|
+
? `var(${HEADINGS[k]?.variable})`
|
|
75
|
+
: `${HEADINGS[k]?.scaling}${unit}`,
|
|
82
76
|
margin: headerStyle ? headerStyle.margin : 0,
|
|
83
77
|
lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
|
|
84
|
-
letterSpacing: headerStyle
|
|
85
|
-
|
|
78
|
+
letterSpacing: headerStyle
|
|
79
|
+
? headerStyle.letterSpacing
|
|
80
|
+
: props.letterSpacing,
|
|
81
|
+
fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
|
|
86
82
|
}
|
|
87
83
|
}
|
|
88
84
|
}
|
|
@@ -101,9 +97,5 @@ export const applyTypographySequence = () => {
|
|
|
101
97
|
export const getFontSizeByKey = value => {
|
|
102
98
|
const CONFIG = getActiveConfig()
|
|
103
99
|
const { TYPOGRAPHY } = CONFIG
|
|
104
|
-
return getSequenceValuePropertyPair(
|
|
105
|
-
value,
|
|
106
|
-
'fontSize',
|
|
107
|
-
TYPOGRAPHY
|
|
108
|
-
)
|
|
100
|
+
return getSequenceValuePropertyPair(value, 'fontSize', TYPOGRAPHY)
|
|
109
101
|
}
|