@symbo.ls/scratch 3.4.5 → 3.4.9
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/defaultConfig/animation.js +24 -0
- package/dist/cjs/defaultConfig/cases.js +24 -0
- package/dist/cjs/defaultConfig/class.js +25 -0
- package/dist/cjs/defaultConfig/color.js +31 -0
- package/dist/cjs/defaultConfig/document.js +24 -0
- package/dist/cjs/defaultConfig/font-family.js +38 -0
- package/dist/cjs/defaultConfig/font.js +33 -0
- package/dist/cjs/defaultConfig/grid.js +25 -0
- package/dist/cjs/defaultConfig/icons.js +26 -0
- package/dist/cjs/defaultConfig/index.js +45 -0
- package/dist/cjs/defaultConfig/media.js +29 -0
- package/dist/cjs/defaultConfig/responsive.js +50 -0
- package/dist/cjs/defaultConfig/sequence.js +49 -0
- package/dist/cjs/defaultConfig/shadow.js +29 -0
- package/dist/cjs/defaultConfig/spacing.js +38 -0
- package/dist/cjs/defaultConfig/svg.js +26 -0
- package/dist/cjs/defaultConfig/templates.js +24 -0
- package/dist/cjs/defaultConfig/theme.js +36 -0
- package/dist/cjs/defaultConfig/timing.js +37 -0
- package/dist/cjs/defaultConfig/typography.js +41 -0
- package/dist/cjs/defaultConfig/unit.js +26 -0
- package/dist/cjs/system/color.js +203 -0
- package/dist/cjs/system/document.js +36 -0
- package/dist/cjs/system/font.js +64 -0
- package/dist/cjs/system/index.js +27 -0
- package/dist/cjs/system/reset.js +87 -0
- package/dist/cjs/system/shadow.js +107 -0
- package/dist/cjs/system/spacing.js +134 -0
- package/dist/cjs/system/svg.js +97 -0
- package/dist/cjs/system/theme.js +234 -0
- package/dist/cjs/system/timing.js +48 -0
- package/dist/cjs/system/typography.js +99 -0
- package/dist/cjs/tests/index.js +28 -0
- package/dist/cjs/transforms/index.js +219 -0
- package/dist/cjs/utils/color.js +206 -0
- package/dist/cjs/utils/font.js +89 -0
- package/dist/cjs/utils/index.js +24 -0
- package/dist/cjs/utils/sequence.js +323 -0
- package/dist/cjs/utils/sprite.js +85 -0
- package/dist/cjs/utils/theme.js +29 -0
- package/dist/cjs/utils/unit.js +79 -0
- package/dist/cjs/utils/var.js +102 -0
- package/dist/esm/defaultConfig/animation.js +4 -0
- package/dist/esm/defaultConfig/cases.js +4 -0
- package/dist/esm/defaultConfig/class.js +5 -0
- package/dist/esm/defaultConfig/color.js +11 -0
- package/dist/esm/defaultConfig/document.js +4 -0
- package/dist/esm/defaultConfig/font-family.js +18 -0
- package/dist/esm/defaultConfig/font.js +13 -0
- package/dist/esm/defaultConfig/grid.js +5 -0
- package/dist/esm/defaultConfig/icons.js +6 -0
- package/dist/esm/defaultConfig/index.js +24 -0
- package/dist/esm/defaultConfig/media.js +9 -0
- package/dist/esm/defaultConfig/responsive.js +30 -0
- package/dist/esm/defaultConfig/sequence.js +29 -0
- package/dist/esm/defaultConfig/shadow.js +9 -0
- package/dist/esm/defaultConfig/spacing.js +18 -0
- package/dist/esm/defaultConfig/svg.js +6 -0
- package/dist/esm/defaultConfig/templates.js +4 -0
- package/dist/esm/defaultConfig/theme.js +16 -0
- package/dist/esm/defaultConfig/timing.js +17 -0
- package/dist/esm/defaultConfig/typography.js +21 -0
- package/dist/esm/defaultConfig/unit.js +6 -0
- package/dist/esm/system/color.js +188 -0
- package/dist/esm/system/document.js +16 -0
- package/dist/esm/system/font.js +50 -0
- package/dist/esm/system/index.js +10 -0
- package/dist/esm/system/reset.js +67 -0
- package/dist/esm/system/shadow.js +91 -0
- package/dist/esm/system/spacing.js +121 -0
- package/dist/esm/system/svg.js +77 -0
- package/dist/esm/system/theme.js +219 -0
- package/dist/esm/system/timing.js +32 -0
- package/dist/esm/system/typography.js +85 -0
- package/dist/esm/tests/index.js +8 -0
- package/dist/esm/transforms/index.js +216 -0
- package/dist/esm/utils/color.js +192 -0
- package/dist/esm/utils/font.js +69 -0
- package/dist/esm/utils/index.js +7 -0
- package/dist/esm/utils/sequence.js +303 -0
- package/dist/esm/utils/sprite.js +65 -0
- package/dist/esm/utils/theme.js +9 -0
- package/dist/esm/utils/unit.js +59 -0
- package/dist/esm/utils/var.js +82 -0
- package/package.json +7 -7
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var typography_exports = {};
|
|
20
|
+
__export(typography_exports, {
|
|
21
|
+
TYPOGRAPHY: () => TYPOGRAPHY
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(typography_exports);
|
|
24
|
+
var import_sequence = require("./sequence.js");
|
|
25
|
+
const defaultProps = {
|
|
26
|
+
browserDefault: 16,
|
|
27
|
+
base: 16,
|
|
28
|
+
type: "font-size",
|
|
29
|
+
ratio: import_sequence.SEQUENCE["minor-third"],
|
|
30
|
+
range: [-3, 12],
|
|
31
|
+
h1Matches: 6,
|
|
32
|
+
lineHeight: 1.5,
|
|
33
|
+
subSequence: true,
|
|
34
|
+
mediaRegenerate: false,
|
|
35
|
+
unit: "em",
|
|
36
|
+
templates: {},
|
|
37
|
+
sequence: {},
|
|
38
|
+
scales: {},
|
|
39
|
+
vars: {}
|
|
40
|
+
};
|
|
41
|
+
const TYPOGRAPHY = defaultProps;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var unit_exports = {};
|
|
20
|
+
__export(unit_exports, {
|
|
21
|
+
UNIT: () => UNIT
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(unit_exports);
|
|
24
|
+
const UNIT = {
|
|
25
|
+
default: "em"
|
|
26
|
+
};
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var color_exports = {};
|
|
20
|
+
__export(color_exports, {
|
|
21
|
+
getColor: () => getColor,
|
|
22
|
+
getMediaColor: () => getMediaColor,
|
|
23
|
+
setColor: () => setColor,
|
|
24
|
+
setGradient: () => setGradient
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(color_exports);
|
|
27
|
+
var import_utils = require("@domql/utils");
|
|
28
|
+
var import_factory = require("../factory.js");
|
|
29
|
+
var import_utils2 = require("../utils");
|
|
30
|
+
const getColor = (value, key, config) => {
|
|
31
|
+
const CONFIG = config || (0, import_factory.getActiveConfig)();
|
|
32
|
+
if (!(0, import_utils.isString)(value)) {
|
|
33
|
+
if (CONFIG.verbose) console.warn(value, "- type for color is not valid");
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
if ((0, import_utils2.isCSSVar)(value)) return `var(${value})`;
|
|
37
|
+
if (key && value[key]) value = value[key];
|
|
38
|
+
let name, alpha, tone;
|
|
39
|
+
if ((0, import_utils.isArray)(value)) {
|
|
40
|
+
[name, alpha, tone] = value;
|
|
41
|
+
} else {
|
|
42
|
+
const parsed = (0, import_utils2.parseColorToken)(value);
|
|
43
|
+
if (!parsed) return value;
|
|
44
|
+
if (parsed.passthrough) return parsed.passthrough;
|
|
45
|
+
if (parsed.cssVar) return `var(${parsed.cssVar})`;
|
|
46
|
+
name = parsed.name;
|
|
47
|
+
alpha = parsed.alpha;
|
|
48
|
+
tone = parsed.tone;
|
|
49
|
+
}
|
|
50
|
+
const { COLOR, GRADIENT } = CONFIG;
|
|
51
|
+
let val = COLOR[name] || GRADIENT[name];
|
|
52
|
+
if (!val) {
|
|
53
|
+
if (CONFIG.verbose) console.warn("Can't find color ", name);
|
|
54
|
+
return value;
|
|
55
|
+
}
|
|
56
|
+
if (key) {
|
|
57
|
+
if (val[key]) val = val[key];
|
|
58
|
+
else if (CONFIG.verbose) console.warn(value, " - does not have ", key);
|
|
59
|
+
}
|
|
60
|
+
let rgb = val.rgb;
|
|
61
|
+
if (!rgb) {
|
|
62
|
+
return CONFIG.useVariable ? `var(${val.var})` : val.value;
|
|
63
|
+
}
|
|
64
|
+
if (tone && !val[tone]) {
|
|
65
|
+
rgb = (0, import_utils2.getRgbTone)(rgb, tone);
|
|
66
|
+
val[tone] = { rgb, var: `${val.var}-${tone}` };
|
|
67
|
+
}
|
|
68
|
+
if (val[tone]) rgb = val[tone].rgb;
|
|
69
|
+
if (alpha) return `rgba(${rgb}, ${alpha})`;
|
|
70
|
+
if (tone) return `rgba(${rgb}, 1)`;
|
|
71
|
+
return CONFIG.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
|
|
72
|
+
};
|
|
73
|
+
const getMediaColor = (value, globalTheme, config) => {
|
|
74
|
+
const CONFIG = config || (0, import_factory.getActiveConfig)();
|
|
75
|
+
if (!globalTheme) globalTheme = CONFIG.globalTheme === "auto" ? null : CONFIG.globalTheme;
|
|
76
|
+
if (!(0, import_utils.isString)(value)) {
|
|
77
|
+
if (CONFIG.verbose) console.warn(value, "- type for color is not valid");
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
if ((0, import_utils2.isCSSVar)(value)) return `var(${value})`;
|
|
81
|
+
let name;
|
|
82
|
+
if ((0, import_utils.isArray)(value)) {
|
|
83
|
+
name = value[0];
|
|
84
|
+
} else {
|
|
85
|
+
const parsed = (0, import_utils2.parseColorToken)(value);
|
|
86
|
+
if (!parsed) return value;
|
|
87
|
+
if (parsed.passthrough) return parsed.passthrough;
|
|
88
|
+
if (parsed.cssVar) return `var(${parsed.cssVar})`;
|
|
89
|
+
name = parsed.name;
|
|
90
|
+
}
|
|
91
|
+
const { COLOR, GRADIENT } = CONFIG;
|
|
92
|
+
const val = COLOR[name] || GRADIENT[name];
|
|
93
|
+
const isObj = (0, import_utils.isObject)(val);
|
|
94
|
+
if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
|
|
95
|
+
else if (isObj) {
|
|
96
|
+
if (globalTheme) return getColor(value, `@${globalTheme}`, config);
|
|
97
|
+
else {
|
|
98
|
+
const obj = {};
|
|
99
|
+
for (const mediaName in val) {
|
|
100
|
+
const query = CONFIG.MEDIA[mediaName.slice(1)];
|
|
101
|
+
const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
|
|
102
|
+
obj[media] = getColor(value, mediaName, config);
|
|
103
|
+
}
|
|
104
|
+
return obj;
|
|
105
|
+
}
|
|
106
|
+
} else {
|
|
107
|
+
if (CONFIG.verbose) console.warn("Can't find color", value);
|
|
108
|
+
return value;
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
const setColor = (val, key, suffix) => {
|
|
112
|
+
const CONFIG = (0, import_factory.getActiveConfig)();
|
|
113
|
+
if ((0, import_utils.isString)(val) && (0, import_utils2.isCSSVar)(val)) {
|
|
114
|
+
const rawRef = val.slice(2);
|
|
115
|
+
val = getColor(rawRef);
|
|
116
|
+
if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
|
|
117
|
+
const parts = rawRef.split(" ");
|
|
118
|
+
const refColor = CONFIG.COLOR[parts[0]];
|
|
119
|
+
if (refColor && refColor.value) {
|
|
120
|
+
let rgb2 = refColor.rgb;
|
|
121
|
+
const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
|
|
122
|
+
const tone = parts[2];
|
|
123
|
+
if (tone) {
|
|
124
|
+
rgb2 = (0, import_utils2.getRgbTone)(rgb2, tone);
|
|
125
|
+
}
|
|
126
|
+
val = `rgba(${rgb2}, ${alpha2})`;
|
|
127
|
+
} else {
|
|
128
|
+
const tone = parts[2];
|
|
129
|
+
const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
|
|
130
|
+
if (tone) {
|
|
131
|
+
try {
|
|
132
|
+
const rgb2 = (0, import_utils2.colorStringToRgbaArray)(parts[0]);
|
|
133
|
+
if (rgb2 && rgb2.length >= 3) {
|
|
134
|
+
const tonedRgb = (0, import_utils2.getRgbTone)(rgb2.slice(0, 3).join(", "), tone);
|
|
135
|
+
val = `rgba(${tonedRgb}, ${alpha2})`;
|
|
136
|
+
} else {
|
|
137
|
+
val = parts[0];
|
|
138
|
+
}
|
|
139
|
+
} catch (e) {
|
|
140
|
+
val = parts[0];
|
|
141
|
+
}
|
|
142
|
+
} else {
|
|
143
|
+
val = parts[0];
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
if ((0, import_utils.isArray)(val)) {
|
|
149
|
+
return {
|
|
150
|
+
"@light": setColor(val[0], key, "light"),
|
|
151
|
+
"@dark": setColor(val[1], key, "dark")
|
|
152
|
+
};
|
|
153
|
+
}
|
|
154
|
+
if ((0, import_utils.isObject)(val)) {
|
|
155
|
+
const obj = {};
|
|
156
|
+
for (const variant in val) {
|
|
157
|
+
obj[variant] = setColor(
|
|
158
|
+
val[variant],
|
|
159
|
+
key,
|
|
160
|
+
variant.slice(0, 1) === "@" ? variant.slice(1) : variant
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
return obj;
|
|
164
|
+
}
|
|
165
|
+
const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
|
|
166
|
+
const colorArr = (0, import_utils2.colorStringToRgbaArray)(val.value || val);
|
|
167
|
+
const [r, g, b, a = 1] = colorArr;
|
|
168
|
+
const alpha = parseFloat(a.toFixed(2));
|
|
169
|
+
const rgb = `${r}, ${g}, ${b}`;
|
|
170
|
+
const value = `rgba(${rgb}, ${alpha})`;
|
|
171
|
+
if (CONFIG.useVariable) {
|
|
172
|
+
CONFIG.CSS_VARS[CSSVar] = value;
|
|
173
|
+
}
|
|
174
|
+
return {
|
|
175
|
+
var: CSSVar,
|
|
176
|
+
rgb,
|
|
177
|
+
alpha,
|
|
178
|
+
value
|
|
179
|
+
};
|
|
180
|
+
};
|
|
181
|
+
const setGradient = (val, key, suffix) => {
|
|
182
|
+
const CONFIG = (0, import_factory.getActiveConfig)();
|
|
183
|
+
if ((0, import_utils.isString)(val) && (0, import_utils2.isCSSVar)(val)) val = getColor(val.slice(2));
|
|
184
|
+
if ((0, import_utils.isArray)(val)) {
|
|
185
|
+
return {
|
|
186
|
+
"@light": setGradient(val[0], key, "light"),
|
|
187
|
+
"@dark": setGradient(val[0], key, "dark")
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
if ((0, import_utils.isObject)(val)) {
|
|
191
|
+
const obj = {};
|
|
192
|
+
for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
|
|
193
|
+
return obj;
|
|
194
|
+
}
|
|
195
|
+
const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
|
|
196
|
+
if (CONFIG.useVariable) {
|
|
197
|
+
CONFIG.CSS_VARS[CSSVar] = val.value || val;
|
|
198
|
+
}
|
|
199
|
+
return {
|
|
200
|
+
var: CSSVar,
|
|
201
|
+
value: val.value || val
|
|
202
|
+
};
|
|
203
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var document_exports = {};
|
|
20
|
+
__export(document_exports, {
|
|
21
|
+
applyDocument: () => applyDocument
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(document_exports);
|
|
24
|
+
var import_utils = require("@domql/utils");
|
|
25
|
+
var import_factory = require("../factory.js");
|
|
26
|
+
var import_utils2 = require("../utils");
|
|
27
|
+
const applyDocument = () => {
|
|
28
|
+
const CONFIG = (0, import_factory.getActiveConfig)();
|
|
29
|
+
const { DOCUMENT, FONT_FAMILY, THEME, TYPOGRAPHY } = CONFIG;
|
|
30
|
+
return (0, import_utils.merge)(DOCUMENT, {
|
|
31
|
+
theme: THEME.document,
|
|
32
|
+
fontFamily: (0, import_utils2.getDefaultOrFirstKey)(FONT_FAMILY),
|
|
33
|
+
fontSize: TYPOGRAPHY.base,
|
|
34
|
+
lineHeight: TYPOGRAPHY.lineHeight
|
|
35
|
+
});
|
|
36
|
+
};
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var font_exports = {};
|
|
20
|
+
__export(font_exports, {
|
|
21
|
+
getFontFamily: () => getFontFamily,
|
|
22
|
+
setFont: () => setFont,
|
|
23
|
+
setFontFamily: () => setFontFamily
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(font_exports);
|
|
26
|
+
var import_utils = require("@domql/utils");
|
|
27
|
+
var import_smbls_utils = require("@symbo.ls/smbls-utils");
|
|
28
|
+
var import_factory = require("../factory.js");
|
|
29
|
+
var import_utils2 = require("../utils");
|
|
30
|
+
const setFont = (val, key) => {
|
|
31
|
+
const CSSvar = `--font-${key}`;
|
|
32
|
+
if (!val || (0, import_utils.isArray)(val) && !val[0]) return;
|
|
33
|
+
let fontFace;
|
|
34
|
+
if (val.isVariable) {
|
|
35
|
+
if ((0, import_utils2.isGoogleFontsUrl)(val.url)) {
|
|
36
|
+
fontFace = (0, import_utils2.setFontImport)(val.url);
|
|
37
|
+
} else {
|
|
38
|
+
fontFace = (0, import_utils2.setCustomFontMedia)(key, val.url, val.fontWeight, {
|
|
39
|
+
fontStretch: val.fontStretch,
|
|
40
|
+
fontDisplay: val.fontDisplay || "swap"
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
} else if (val[0]) {
|
|
44
|
+
fontFace = (0, import_utils2.getFontFaceEach)(key, val);
|
|
45
|
+
} else {
|
|
46
|
+
fontFace = (0, import_utils2.setCustomFontMedia)(key, val.url);
|
|
47
|
+
}
|
|
48
|
+
return { var: CSSvar, value: val, fontFace };
|
|
49
|
+
};
|
|
50
|
+
const getFontFamily = (key, factory) => {
|
|
51
|
+
const CONFIG = (0, import_factory.getActiveConfig)();
|
|
52
|
+
const { FONT_FAMILY } = CONFIG;
|
|
53
|
+
return (0, import_utils2.getDefaultOrFirstKey)(factory || FONT_FAMILY, key);
|
|
54
|
+
};
|
|
55
|
+
const setFontFamily = (val, key) => {
|
|
56
|
+
const CONFIG = (0, import_factory.getActiveConfig)();
|
|
57
|
+
const { FONT_FAMILY, FONT_FAMILY_TYPES } = CONFIG;
|
|
58
|
+
let { value, type } = val;
|
|
59
|
+
if (val.isDefault) FONT_FAMILY.default = key;
|
|
60
|
+
if ((0, import_utils.isObject)(value)) value = (0, import_smbls_utils.arrayzeValue)(value);
|
|
61
|
+
const CSSvar = `--font-family-${key}`;
|
|
62
|
+
const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES[type]}`;
|
|
63
|
+
return { var: CSSvar, value: str, arr: value, type };
|
|
64
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
+
var system_exports = {};
|
|
17
|
+
module.exports = __toCommonJS(system_exports);
|
|
18
|
+
__reExport(system_exports, require("./color.js"), module.exports);
|
|
19
|
+
__reExport(system_exports, require("./theme.js"), module.exports);
|
|
20
|
+
__reExport(system_exports, require("./font.js"), module.exports);
|
|
21
|
+
__reExport(system_exports, require("./typography.js"), module.exports);
|
|
22
|
+
__reExport(system_exports, require("./spacing.js"), module.exports);
|
|
23
|
+
__reExport(system_exports, require("./shadow.js"), module.exports);
|
|
24
|
+
__reExport(system_exports, require("./timing.js"), module.exports);
|
|
25
|
+
__reExport(system_exports, require("./document.js"), module.exports);
|
|
26
|
+
__reExport(system_exports, require("./svg.js"), module.exports);
|
|
27
|
+
__reExport(system_exports, require("./reset.js"), module.exports);
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var reset_exports = {};
|
|
20
|
+
__export(reset_exports, {
|
|
21
|
+
applyReset: () => applyReset
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(reset_exports);
|
|
24
|
+
var import_utils = require("@domql/utils");
|
|
25
|
+
var import_factory = require("../factory.js");
|
|
26
|
+
var import_theme = require("./theme.js");
|
|
27
|
+
const applyReset = (reset = {}) => {
|
|
28
|
+
const CONFIG = (0, import_factory.getActiveConfig)();
|
|
29
|
+
const { RESET, TYPOGRAPHY, DOCUMENT } = CONFIG;
|
|
30
|
+
if (RESET) {
|
|
31
|
+
if (RESET[":root"]) {
|
|
32
|
+
const configReset = RESET;
|
|
33
|
+
const configTemplates = TYPOGRAPHY.templates;
|
|
34
|
+
configReset.body = {
|
|
35
|
+
...CONFIG.useDocumentTheme ? (0, import_theme.getMediaTheme)("document", `@${CONFIG.globalTheme}`) : {},
|
|
36
|
+
...configTemplates.body
|
|
37
|
+
};
|
|
38
|
+
configReset.h1 = configTemplates.h1;
|
|
39
|
+
configReset.h2 = configTemplates.h2;
|
|
40
|
+
configReset.h3 = configTemplates.h3;
|
|
41
|
+
configReset.h4 = configTemplates.h4;
|
|
42
|
+
configReset.h5 = configTemplates.h5;
|
|
43
|
+
configReset.h6 = configTemplates.h6;
|
|
44
|
+
}
|
|
45
|
+
const { body, ...templates } = TYPOGRAPHY.templates;
|
|
46
|
+
const globalTheme = CONFIG.useDocumentTheme ? (0, import_theme.getMediaTheme)("document", `@${CONFIG.globalTheme}`) : {};
|
|
47
|
+
if (RESET.html) (0, import_utils.overwriteDeep)(RESET.html, globalTheme);
|
|
48
|
+
return (0, import_utils.deepMerge)((0, import_utils.merge)(RESET, reset), {
|
|
49
|
+
html: {
|
|
50
|
+
position: "absolute",
|
|
51
|
+
// overflow: 'hidden',
|
|
52
|
+
width: "100%",
|
|
53
|
+
height: "100%",
|
|
54
|
+
top: "0",
|
|
55
|
+
left: "0",
|
|
56
|
+
margin: "0",
|
|
57
|
+
WebkitFontSmoothing: "subpixel-antialiased",
|
|
58
|
+
scrollBehavior: "smooth",
|
|
59
|
+
...globalTheme,
|
|
60
|
+
fontSize: TYPOGRAPHY.browserDefault + "px",
|
|
61
|
+
fontFamily: DOCUMENT.fontFamily,
|
|
62
|
+
lineHeight: DOCUMENT.lineHeight
|
|
63
|
+
},
|
|
64
|
+
body: {
|
|
65
|
+
boxSizing: "border-box",
|
|
66
|
+
height: "100%",
|
|
67
|
+
margin: 0,
|
|
68
|
+
fontFamily: DOCUMENT.fontFamily,
|
|
69
|
+
fontSize: TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
|
|
70
|
+
...templates,
|
|
71
|
+
...body
|
|
72
|
+
},
|
|
73
|
+
a: {
|
|
74
|
+
color: "currentColor"
|
|
75
|
+
},
|
|
76
|
+
// form elements
|
|
77
|
+
fieldset: {
|
|
78
|
+
border: 0,
|
|
79
|
+
padding: 0,
|
|
80
|
+
margin: 0
|
|
81
|
+
},
|
|
82
|
+
"select, input": {
|
|
83
|
+
fontFamily: DOCUMENT.fontFamily
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
};
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var shadow_exports = {};
|
|
20
|
+
__export(shadow_exports, {
|
|
21
|
+
getShadow: () => getShadow,
|
|
22
|
+
setShadow: () => setShadow
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(shadow_exports);
|
|
25
|
+
var import_factory = require("../factory.js");
|
|
26
|
+
var import_color = require("./color.js");
|
|
27
|
+
var import_spacing = require("./spacing.js");
|
|
28
|
+
var import_color2 = require("../utils/color.js");
|
|
29
|
+
var import_utils = require("@domql/utils");
|
|
30
|
+
const setShadow = (value, key, suffix, prefers) => {
|
|
31
|
+
const CONFIG = (0, import_factory.getActiveConfig)();
|
|
32
|
+
if ((0, import_utils.isArray)(value)) {
|
|
33
|
+
return {
|
|
34
|
+
"@light": setShadow(value[0], key, "light"),
|
|
35
|
+
"@dark": setShadow(value[1], key, "dark")
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
if ((0, import_utils.isObject)(value)) {
|
|
39
|
+
const obj = {};
|
|
40
|
+
for (const variant in value) {
|
|
41
|
+
obj[variant] = setShadow(
|
|
42
|
+
value[variant],
|
|
43
|
+
key,
|
|
44
|
+
variant.startsWith("@") ? variant.slice(1) : variant
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
return obj;
|
|
48
|
+
}
|
|
49
|
+
if ((0, import_utils.isString)(value) && !import_color2.CSS_NATIVE_COLOR_REGEX.test(value)) {
|
|
50
|
+
value = (0, import_color2.splitTopLevelCommas)(value).map((shadow) => {
|
|
51
|
+
shadow = shadow.trim();
|
|
52
|
+
return shadow.split(/\s+/).map((v) => {
|
|
53
|
+
v = v.trim();
|
|
54
|
+
if (!v) return "";
|
|
55
|
+
if (v.startsWith("--")) return `var(${v})`;
|
|
56
|
+
const color = (0, import_color.getColor)(v);
|
|
57
|
+
if ((0, import_color2.isResolvedColor)(color)) return color;
|
|
58
|
+
if (/^\d/.test(v) || v === "0" || v.includes("px") || v.slice(-2) === "em") return v;
|
|
59
|
+
if (v === "inset" || v === "none") return v;
|
|
60
|
+
const spacing = (0, import_spacing.getSpacingByKey)(v, "shadow");
|
|
61
|
+
if (spacing && spacing.shadow) return spacing.shadow;
|
|
62
|
+
return v;
|
|
63
|
+
}).join(" ");
|
|
64
|
+
}).join(", ");
|
|
65
|
+
}
|
|
66
|
+
const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : "");
|
|
67
|
+
if (CONFIG.useVariable) {
|
|
68
|
+
CONFIG.CSS_VARS[CSSVar] = value;
|
|
69
|
+
}
|
|
70
|
+
return {
|
|
71
|
+
var: CSSVar,
|
|
72
|
+
value
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
const getShadow = (value, globalTheme) => {
|
|
76
|
+
const CONFIG = (0, import_factory.getActiveConfig)();
|
|
77
|
+
if (!globalTheme) globalTheme = CONFIG.globalTheme;
|
|
78
|
+
if (!(0, import_utils.isString)(value)) {
|
|
79
|
+
if (CONFIG.verbose) console.warn(value, "- type for color is not valid");
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
if ((0, import_color2.isCSSVar)(value)) return `var(${value})`;
|
|
83
|
+
const [name] = (0, import_utils.isArray)(value) ? value : value.split(" ");
|
|
84
|
+
const { SHADOW } = CONFIG;
|
|
85
|
+
const val = SHADOW[name];
|
|
86
|
+
const isObj = (0, import_utils.isObject)(val);
|
|
87
|
+
if (!val) {
|
|
88
|
+
if (CONFIG.verbose) console.warn("Can't find color ", name);
|
|
89
|
+
return value;
|
|
90
|
+
}
|
|
91
|
+
if (globalTheme) {
|
|
92
|
+
if (val[globalTheme]) return val[globalTheme].value;
|
|
93
|
+
else if (CONFIG.verbose) console.warn(value, " - does not have ", globalTheme);
|
|
94
|
+
}
|
|
95
|
+
if (isObj && val.value) return val.value;
|
|
96
|
+
if (isObj) {
|
|
97
|
+
const obj = {};
|
|
98
|
+
for (const mediaName in val) {
|
|
99
|
+
const query = CONFIG.MEDIA[mediaName.slice(1)];
|
|
100
|
+
const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
|
|
101
|
+
obj[media] = val.value;
|
|
102
|
+
}
|
|
103
|
+
return obj;
|
|
104
|
+
}
|
|
105
|
+
if (CONFIG.verbose) console.warn("Can't find color", value);
|
|
106
|
+
return value;
|
|
107
|
+
};
|