@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
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) => {
|
|
@@ -356,8 +346,7 @@ var deepClone = (obj, options = {}) => {
|
|
|
356
346
|
const clone2 = targetWindow ? isArray(obj) ? new targetWindow.Array() : new targetWindow.Object() : isArray(obj) ? [] : {};
|
|
357
347
|
visited.set(obj, clone2);
|
|
358
348
|
for (const key in obj) {
|
|
359
|
-
if (!Object.prototype.hasOwnProperty.call(obj, key))
|
|
360
|
-
continue;
|
|
349
|
+
if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
|
|
361
350
|
if (exclude.includes(key) || key.startsWith("__") || key === "__proto__")
|
|
362
351
|
continue;
|
|
363
352
|
const value = obj[key];
|
|
@@ -687,23 +676,19 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
|
|
|
687
676
|
const { mediaRegenerate } = FACTORY2;
|
|
688
677
|
const { sequence, scales } = FACTORY2[media];
|
|
689
678
|
const query = MEDIA2[mediaName];
|
|
690
|
-
if (!query && CONFIG2.verbose)
|
|
691
|
-
console.warn("Can't find media query ", query);
|
|
679
|
+
if (!query && CONFIG2.verbose) console.warn("Can't find media query ", query);
|
|
692
680
|
if (!mediaRegenerate) {
|
|
693
681
|
let underMediaQuery = CSS_VARS2[`@media ${query}`];
|
|
694
|
-
if (!underMediaQuery)
|
|
695
|
-
underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
682
|
+
if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
696
683
|
applySequenceGlobalVars(underMediaQuery, FACTORY2[media], options);
|
|
697
684
|
return;
|
|
698
685
|
}
|
|
699
686
|
for (const key in sequence) {
|
|
700
687
|
const item = sequence[key];
|
|
701
688
|
const value = (isScalingUnit(unit) ? scales[key] : sequence[key].val) + unit;
|
|
702
|
-
if (!query && CONFIG2.verbose)
|
|
703
|
-
console.warn("Can't find query ", query);
|
|
689
|
+
if (!query && CONFIG2.verbose) console.warn("Can't find query ", query);
|
|
704
690
|
let underMediaQuery = CSS_VARS2[`@media ${query}`];
|
|
705
|
-
if (!underMediaQuery)
|
|
706
|
-
underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
691
|
+
if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
|
|
707
692
|
underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
|
|
708
693
|
CSS_VARS2[item.variable + "_" + mediaName] = value;
|
|
709
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.27.
|
|
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.27.
|
|
29
|
-
"@symbo.ls/utils": "^2.27.
|
|
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
|
}
|