@symbo.ls/scratch 3.14.0 → 3.14.1
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/README.md +1 -1
- package/dist/cjs/defaultConfig/animation.js +4 -2
- package/dist/cjs/defaultConfig/cases.js +4 -2
- package/dist/cjs/defaultConfig/class.js +5 -2
- package/dist/cjs/defaultConfig/color.js +6 -9
- package/dist/cjs/defaultConfig/document.js +4 -2
- package/dist/cjs/defaultConfig/font-family.js +8 -12
- package/dist/cjs/defaultConfig/font.js +4 -11
- package/dist/cjs/defaultConfig/grid.js +5 -3
- package/dist/cjs/defaultConfig/icons.js +6 -4
- package/dist/cjs/defaultConfig/index.js +200 -24
- package/dist/cjs/defaultConfig/media.js +4 -2
- package/dist/cjs/defaultConfig/responsive.js +6 -4
- package/dist/cjs/defaultConfig/sequence.js +4 -2
- package/dist/cjs/defaultConfig/shadow.js +4 -2
- package/dist/cjs/defaultConfig/spacing.js +56 -7
- package/dist/cjs/defaultConfig/svg.js +6 -4
- package/dist/cjs/defaultConfig/templates.js +4 -2
- package/dist/cjs/defaultConfig/theme.js +4 -14
- package/dist/cjs/defaultConfig/timing.js +36 -5
- package/dist/cjs/defaultConfig/typography.js +36 -5
- package/dist/cjs/defaultConfig/unit.js +4 -2
- package/dist/cjs/factory.js +345 -104
- package/dist/cjs/index.js +6333 -13
- package/dist/cjs/package.json +4 -0
- package/dist/cjs/set.js +5609 -214
- package/dist/cjs/system/color.js +4487 -170
- package/dist/cjs/system/document.js +4371 -11
- package/dist/cjs/system/font.js +4401 -28
- package/dist/cjs/system/index.js +5748 -11
- package/dist/cjs/system/reset.js +4449 -52
- package/dist/cjs/system/shadow.js +4834 -44
- package/dist/cjs/system/spacing.js +4752 -39
- package/dist/cjs/system/svg.js +4437 -74
- package/dist/cjs/system/theme.js +4526 -336
- package/dist/cjs/system/timing.js +4695 -19
- package/dist/cjs/system/typography.js +4755 -42
- package/dist/cjs/tests/index.js +4 -2
- package/dist/cjs/transforms/index.js +5019 -134
- package/dist/cjs/utils/color.js +47 -66
- package/dist/cjs/utils/font.js +25 -48
- package/dist/cjs/utils/index.js +5068 -8
- package/dist/cjs/utils/sequence.js +4436 -67
- package/dist/cjs/utils/sprite.js +353 -19
- package/dist/cjs/utils/theme.js +3 -1
- package/dist/cjs/utils/unit.js +4 -2
- package/dist/cjs/utils/var.js +4391 -57
- package/package.json +1 -1
- package/src/utils/sprite.js +29 -12
- package/dist/esm/defaultConfig/animation.js +0 -4
- package/dist/esm/defaultConfig/cases.js +0 -4
- package/dist/esm/defaultConfig/class.js +0 -4
- package/dist/esm/defaultConfig/color.js +0 -11
- package/dist/esm/defaultConfig/document.js +0 -4
- package/dist/esm/defaultConfig/font-family.js +0 -18
- package/dist/esm/defaultConfig/font.js +0 -13
- package/dist/esm/defaultConfig/grid.js +0 -5
- package/dist/esm/defaultConfig/icons.js +0 -6
- package/dist/esm/defaultConfig/index.js +0 -25
- package/dist/esm/defaultConfig/media.js +0 -9
- package/dist/esm/defaultConfig/responsive.js +0 -30
- package/dist/esm/defaultConfig/sequence.js +0 -29
- package/dist/esm/defaultConfig/shadow.js +0 -4
- package/dist/esm/defaultConfig/spacing.js +0 -18
- package/dist/esm/defaultConfig/svg.js +0 -6
- package/dist/esm/defaultConfig/templates.js +0 -4
- package/dist/esm/defaultConfig/theme.js +0 -16
- package/dist/esm/defaultConfig/timing.js +0 -17
- package/dist/esm/defaultConfig/typography.js +0 -21
- package/dist/esm/defaultConfig/unit.js +0 -6
- package/dist/esm/factory.js +0 -120
- package/dist/esm/index.js +0 -14
- package/dist/esm/set.js +0 -280
- package/dist/esm/system/color.js +0 -253
- package/dist/esm/system/document.js +0 -16
- package/dist/esm/system/font.js +0 -58
- package/dist/esm/system/index.js +0 -10
- package/dist/esm/system/reset.js +0 -94
- package/dist/esm/system/shadow.js +0 -92
- package/dist/esm/system/spacing.js +0 -121
- package/dist/esm/system/svg.js +0 -113
- package/dist/esm/system/theme.js +0 -481
- package/dist/esm/system/timing.js +0 -32
- package/dist/esm/system/typography.js +0 -94
- package/dist/esm/tests/index.js +0 -8
- package/dist/esm/transforms/index.js +0 -216
- package/dist/esm/utils/color.js +0 -192
- package/dist/esm/utils/font.js +0 -94
- package/dist/esm/utils/index.js +0 -7
- package/dist/esm/utils/sequence.js +0 -322
- package/dist/esm/utils/sprite.js +0 -72
- package/dist/esm/utils/theme.js +0 -9
- package/dist/esm/utils/unit.js +0 -59
- package/dist/esm/utils/var.js +0 -96
- package/dist/iife/index.js +0 -3630
package/dist/iife/index.js
DELETED
|
@@ -1,3630 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var SmblsScratch = (() => {
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __esm = (fn, res) => function __init() {
|
|
8
|
-
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
9
|
-
};
|
|
10
|
-
var __export = (target, all) => {
|
|
11
|
-
for (var name in all)
|
|
12
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
13
|
-
};
|
|
14
|
-
var __copyProps = (to, from, except, desc) => {
|
|
15
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
16
|
-
for (let key of __getOwnPropNames(from))
|
|
17
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
18
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
19
|
-
}
|
|
20
|
-
return to;
|
|
21
|
-
};
|
|
22
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
|
-
|
|
24
|
-
// ../utils/globals.js
|
|
25
|
-
var window2, document2;
|
|
26
|
-
var init_globals = __esm({
|
|
27
|
-
"../utils/globals.js"() {
|
|
28
|
-
"use strict";
|
|
29
|
-
window2 = globalThis;
|
|
30
|
-
document2 = window2.document;
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
// ../utils/node.js
|
|
35
|
-
var isDOMNode;
|
|
36
|
-
var init_node = __esm({
|
|
37
|
-
"../utils/node.js"() {
|
|
38
|
-
"use strict";
|
|
39
|
-
init_globals();
|
|
40
|
-
isDOMNode = (obj) => {
|
|
41
|
-
return typeof window2 !== "undefined" && (window2.Node && obj instanceof window2.Node || window2.Window && obj instanceof window2.Window || obj === window2 || obj === document);
|
|
42
|
-
};
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
// ../utils/types.js
|
|
47
|
-
var isObject, isString, isNumber, isFunction, isArray, isObjectLike, isDefined;
|
|
48
|
-
var init_types = __esm({
|
|
49
|
-
"../utils/types.js"() {
|
|
50
|
-
"use strict";
|
|
51
|
-
isObject = (arg) => {
|
|
52
|
-
if (arg === null) return false;
|
|
53
|
-
return typeof arg === "object" && arg.constructor === Object;
|
|
54
|
-
};
|
|
55
|
-
isString = (arg) => typeof arg === "string";
|
|
56
|
-
isNumber = (arg) => typeof arg === "number";
|
|
57
|
-
isFunction = (arg) => typeof arg === "function";
|
|
58
|
-
isArray = (arg) => Array.isArray(arg);
|
|
59
|
-
isObjectLike = (arg) => {
|
|
60
|
-
if (arg === null) return false;
|
|
61
|
-
return typeof arg === "object";
|
|
62
|
-
};
|
|
63
|
-
isDefined = (arg) => arg !== void 0;
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
// ../utils/array.js
|
|
68
|
-
var unstackArrayOfObjects;
|
|
69
|
-
var init_array = __esm({
|
|
70
|
-
"../utils/array.js"() {
|
|
71
|
-
"use strict";
|
|
72
|
-
init_object();
|
|
73
|
-
unstackArrayOfObjects = (arr, exclude = []) => {
|
|
74
|
-
return arr.reduce(
|
|
75
|
-
(a, c) => deepMerge(a, deepClone(c, { exclude }), exclude),
|
|
76
|
-
{}
|
|
77
|
-
);
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
|
|
82
|
-
// ../utils/string.js
|
|
83
|
-
var init_string = __esm({
|
|
84
|
-
"../utils/string.js"() {
|
|
85
|
-
"use strict";
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
// ../utils/keys.js
|
|
90
|
-
var STATE_METHODS, PROPS_METHODS, METHODS, METHODS_EXL;
|
|
91
|
-
var init_keys = __esm({
|
|
92
|
-
"../utils/keys.js"() {
|
|
93
|
-
"use strict";
|
|
94
|
-
STATE_METHODS = /* @__PURE__ */ new Set([
|
|
95
|
-
"update",
|
|
96
|
-
"parse",
|
|
97
|
-
"clean",
|
|
98
|
-
"create",
|
|
99
|
-
"destroy",
|
|
100
|
-
"add",
|
|
101
|
-
"toggle",
|
|
102
|
-
"remove",
|
|
103
|
-
"apply",
|
|
104
|
-
"set",
|
|
105
|
-
"reset",
|
|
106
|
-
"replace",
|
|
107
|
-
"quietReplace",
|
|
108
|
-
"quietUpdate",
|
|
109
|
-
"applyReplace",
|
|
110
|
-
"applyFunction",
|
|
111
|
-
"keys",
|
|
112
|
-
"values",
|
|
113
|
-
"ref",
|
|
114
|
-
"rootUpdate",
|
|
115
|
-
"parentUpdate",
|
|
116
|
-
"parent",
|
|
117
|
-
"__element",
|
|
118
|
-
"__depends",
|
|
119
|
-
"__ref",
|
|
120
|
-
"__children",
|
|
121
|
-
"root",
|
|
122
|
-
"setByPath",
|
|
123
|
-
"setPathCollection",
|
|
124
|
-
"removeByPath",
|
|
125
|
-
"removePathCollection",
|
|
126
|
-
"getByPath"
|
|
127
|
-
]);
|
|
128
|
-
PROPS_METHODS = /* @__PURE__ */ new Set(["update", "__element"]);
|
|
129
|
-
METHODS = /* @__PURE__ */ new Set([
|
|
130
|
-
"set",
|
|
131
|
-
"reset",
|
|
132
|
-
"update",
|
|
133
|
-
"remove",
|
|
134
|
-
"updateContent",
|
|
135
|
-
"removeContent",
|
|
136
|
-
"lookup",
|
|
137
|
-
"lookdown",
|
|
138
|
-
"lookdownAll",
|
|
139
|
-
"getRef",
|
|
140
|
-
"getPath",
|
|
141
|
-
"setNodeStyles",
|
|
142
|
-
"spotByPath",
|
|
143
|
-
"keys",
|
|
144
|
-
"parse",
|
|
145
|
-
"setProps",
|
|
146
|
-
"parseDeep",
|
|
147
|
-
"variables",
|
|
148
|
-
"if",
|
|
149
|
-
"log",
|
|
150
|
-
"verbose",
|
|
151
|
-
"warn",
|
|
152
|
-
"error",
|
|
153
|
-
"call",
|
|
154
|
-
"nextElement",
|
|
155
|
-
"previousElement",
|
|
156
|
-
"getRootState",
|
|
157
|
-
"getRoot",
|
|
158
|
-
"getRootData",
|
|
159
|
-
"getRootContext",
|
|
160
|
-
"getContext",
|
|
161
|
-
"getQuery",
|
|
162
|
-
"getDB",
|
|
163
|
-
"getChildren",
|
|
164
|
-
"preventContentUpdate",
|
|
165
|
-
"preventContentRecreate"
|
|
166
|
-
]);
|
|
167
|
-
METHODS_EXL = /* @__PURE__ */ new Set([
|
|
168
|
-
"node",
|
|
169
|
-
"context",
|
|
170
|
-
"extends",
|
|
171
|
-
"__element",
|
|
172
|
-
"__ref",
|
|
173
|
-
...METHODS,
|
|
174
|
-
...STATE_METHODS,
|
|
175
|
-
...PROPS_METHODS
|
|
176
|
-
]);
|
|
177
|
-
}
|
|
178
|
-
});
|
|
179
|
-
|
|
180
|
-
// ../utils/object.js
|
|
181
|
-
var _startsWithDunder, exec, merge, deepMerge, _deepMerge, deepClone, overwriteDeep;
|
|
182
|
-
var init_object = __esm({
|
|
183
|
-
"../utils/object.js"() {
|
|
184
|
-
"use strict";
|
|
185
|
-
init_globals();
|
|
186
|
-
init_types();
|
|
187
|
-
init_array();
|
|
188
|
-
init_node();
|
|
189
|
-
init_keys();
|
|
190
|
-
_startsWithDunder = (e) => e.charCodeAt(0) === 95 && e.charCodeAt(1) === 95;
|
|
191
|
-
exec = (param, element, state, context) => {
|
|
192
|
-
if (isFunction(param)) {
|
|
193
|
-
if (!element) return;
|
|
194
|
-
if (typeof param.call !== "function") return param;
|
|
195
|
-
return param.call(
|
|
196
|
-
element,
|
|
197
|
-
element,
|
|
198
|
-
state || element.state,
|
|
199
|
-
context || element.context
|
|
200
|
-
);
|
|
201
|
-
}
|
|
202
|
-
if (param != null && element?.context?.plugins && (isArray(param) || isObject(param) && !isDOMNode(param))) {
|
|
203
|
-
const plugins = element.context.plugins;
|
|
204
|
-
for (const plugin of plugins) {
|
|
205
|
-
if (plugin.resolveHandler) {
|
|
206
|
-
const resolved = plugin.resolveHandler(param, element);
|
|
207
|
-
if (typeof resolved === "function") {
|
|
208
|
-
return exec(resolved, element, state, context);
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
return param;
|
|
214
|
-
};
|
|
215
|
-
merge = (element, obj, excludeFrom = []) => {
|
|
216
|
-
const useSet = excludeFrom instanceof Set;
|
|
217
|
-
for (const e in obj) {
|
|
218
|
-
if (!Object.prototype.hasOwnProperty.call(obj, e)) continue;
|
|
219
|
-
if (_startsWithDunder(e)) continue;
|
|
220
|
-
if (useSet ? excludeFrom.has(e) : excludeFrom.includes(e)) continue;
|
|
221
|
-
if (element[e] === void 0) {
|
|
222
|
-
element[e] = obj[e];
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
return element;
|
|
226
|
-
};
|
|
227
|
-
deepMerge = (element, extend, excludeFrom = METHODS_EXL) => {
|
|
228
|
-
return _deepMerge(element, extend, excludeFrom, null);
|
|
229
|
-
};
|
|
230
|
-
_deepMerge = (element, extend, excludeFrom, ancestors) => {
|
|
231
|
-
if (element === extend) return element;
|
|
232
|
-
if (ancestors) {
|
|
233
|
-
for (let i = 0; i < ancestors.length; i += 2) {
|
|
234
|
-
if (ancestors[i] === element && ancestors[i + 1] === extend) return element;
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
const useSet = excludeFrom instanceof Set;
|
|
238
|
-
for (const e in extend) {
|
|
239
|
-
if (!Object.prototype.hasOwnProperty.call(extend, e)) continue;
|
|
240
|
-
if (_startsWithDunder(e)) continue;
|
|
241
|
-
if (useSet ? excludeFrom.has(e) : excludeFrom.includes(e)) continue;
|
|
242
|
-
const elementProp = element[e];
|
|
243
|
-
const extendProp = extend[e];
|
|
244
|
-
if (isObjectLike(elementProp) && isObjectLike(extendProp)) {
|
|
245
|
-
const stack = ancestors || [];
|
|
246
|
-
stack.push(element, extend);
|
|
247
|
-
_deepMerge(elementProp, extendProp, excludeFrom, stack);
|
|
248
|
-
stack.length -= 2;
|
|
249
|
-
} else if (elementProp === void 0) {
|
|
250
|
-
element[e] = extendProp;
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
return element;
|
|
254
|
-
};
|
|
255
|
-
deepClone = (obj, options = {}) => {
|
|
256
|
-
const {
|
|
257
|
-
exclude = [],
|
|
258
|
-
cleanUndefined = false,
|
|
259
|
-
cleanNull = false,
|
|
260
|
-
window: targetWindow,
|
|
261
|
-
visited = /* @__PURE__ */ new WeakMap(),
|
|
262
|
-
handleExtends = false
|
|
263
|
-
} = options;
|
|
264
|
-
const contentWindow = targetWindow || window2 || globalThis;
|
|
265
|
-
if (!isObjectLike(obj) || isDOMNode(obj)) {
|
|
266
|
-
return obj;
|
|
267
|
-
}
|
|
268
|
-
if (visited.has(obj)) {
|
|
269
|
-
return visited.get(obj);
|
|
270
|
-
}
|
|
271
|
-
const isArr = isArray(obj);
|
|
272
|
-
const clone = isArr ? [] : {};
|
|
273
|
-
visited.set(obj, clone);
|
|
274
|
-
const excludeSet = exclude instanceof Set ? exclude : exclude.length > 3 ? new Set(exclude) : null;
|
|
275
|
-
for (const key in obj) {
|
|
276
|
-
if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
|
|
277
|
-
if (_startsWithDunder(key) || key === "__proto__") continue;
|
|
278
|
-
if (excludeSet ? excludeSet.has(key) : exclude.includes(key)) continue;
|
|
279
|
-
const value = obj[key];
|
|
280
|
-
if (cleanUndefined && value === void 0) continue;
|
|
281
|
-
if (cleanNull && value === null) continue;
|
|
282
|
-
if (isDOMNode(value)) {
|
|
283
|
-
clone[key] = value;
|
|
284
|
-
continue;
|
|
285
|
-
}
|
|
286
|
-
if (handleExtends && key === "extends" && isArray(value)) {
|
|
287
|
-
clone[key] = unstackArrayOfObjects(value, exclude);
|
|
288
|
-
continue;
|
|
289
|
-
}
|
|
290
|
-
if (isFunction(value)) {
|
|
291
|
-
clone[key] = value;
|
|
292
|
-
continue;
|
|
293
|
-
}
|
|
294
|
-
if (isObjectLike(value)) {
|
|
295
|
-
clone[key] = deepClone(value, {
|
|
296
|
-
...options,
|
|
297
|
-
visited
|
|
298
|
-
});
|
|
299
|
-
} else {
|
|
300
|
-
clone[key] = value;
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
return clone;
|
|
304
|
-
};
|
|
305
|
-
overwriteDeep = (obj, params, opts = {}, visited = /* @__PURE__ */ new WeakMap()) => {
|
|
306
|
-
if (!isObjectLike(obj) || !isObjectLike(params) || isDOMNode(obj) || isDOMNode(params)) {
|
|
307
|
-
return params;
|
|
308
|
-
}
|
|
309
|
-
if (visited.has(obj)) return visited.get(obj);
|
|
310
|
-
visited.set(obj, obj);
|
|
311
|
-
const excl = opts.exclude;
|
|
312
|
-
const exclSet = excl ? excl instanceof Set ? excl : new Set(excl) : null;
|
|
313
|
-
const forcedExclude = !opts.preventForce;
|
|
314
|
-
for (const e in params) {
|
|
315
|
-
if (!Object.prototype.hasOwnProperty.call(params, e)) continue;
|
|
316
|
-
if (exclSet && exclSet.has(e) || forcedExclude && _startsWithDunder(e))
|
|
317
|
-
continue;
|
|
318
|
-
const objProp = obj[e];
|
|
319
|
-
const paramsProp = params[e];
|
|
320
|
-
if (isDOMNode(paramsProp)) {
|
|
321
|
-
obj[e] = paramsProp;
|
|
322
|
-
} else if (isObjectLike(objProp) && isObjectLike(paramsProp)) {
|
|
323
|
-
obj[e] = overwriteDeep(objProp, paramsProp, opts, visited);
|
|
324
|
-
} else if (paramsProp !== void 0) {
|
|
325
|
-
obj[e] = paramsProp;
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
return obj;
|
|
329
|
-
};
|
|
330
|
-
}
|
|
331
|
-
});
|
|
332
|
-
|
|
333
|
-
// ../utils/key.js
|
|
334
|
-
var init_key = __esm({
|
|
335
|
-
"../utils/key.js"() {
|
|
336
|
-
"use strict";
|
|
337
|
-
}
|
|
338
|
-
});
|
|
339
|
-
|
|
340
|
-
// ../utils/env.js
|
|
341
|
-
var NODE_ENV, isProduction, isNotProduction;
|
|
342
|
-
var init_env = __esm({
|
|
343
|
-
"../utils/env.js"() {
|
|
344
|
-
"use strict";
|
|
345
|
-
NODE_ENV = process.env.NODE_ENV;
|
|
346
|
-
isProduction = (env = NODE_ENV) => env === "production";
|
|
347
|
-
isNotProduction = (env = NODE_ENV) => !isProduction(env);
|
|
348
|
-
}
|
|
349
|
-
});
|
|
350
|
-
|
|
351
|
-
// ../utils/function.js
|
|
352
|
-
var init_function = __esm({
|
|
353
|
-
"../utils/function.js"() {
|
|
354
|
-
"use strict";
|
|
355
|
-
}
|
|
356
|
-
});
|
|
357
|
-
|
|
358
|
-
// ../utils/if.js
|
|
359
|
-
var init_if = __esm({
|
|
360
|
-
"../utils/if.js"() {
|
|
361
|
-
"use strict";
|
|
362
|
-
}
|
|
363
|
-
});
|
|
364
|
-
|
|
365
|
-
// ../utils/log.js
|
|
366
|
-
var init_log = __esm({
|
|
367
|
-
"../utils/log.js"() {
|
|
368
|
-
"use strict";
|
|
369
|
-
}
|
|
370
|
-
});
|
|
371
|
-
|
|
372
|
-
// ../utils/cookie.js
|
|
373
|
-
var isMobile;
|
|
374
|
-
var init_cookie = __esm({
|
|
375
|
-
"../utils/cookie.js"() {
|
|
376
|
-
"use strict";
|
|
377
|
-
isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
|
|
378
|
-
}
|
|
379
|
-
});
|
|
380
|
-
|
|
381
|
-
// ../utils/tags.js
|
|
382
|
-
var init_tags = __esm({
|
|
383
|
-
"../utils/tags.js"() {
|
|
384
|
-
"use strict";
|
|
385
|
-
}
|
|
386
|
-
});
|
|
387
|
-
|
|
388
|
-
// ../utils/extends.js
|
|
389
|
-
var init_extends = __esm({
|
|
390
|
-
"../utils/extends.js"() {
|
|
391
|
-
"use strict";
|
|
392
|
-
}
|
|
393
|
-
});
|
|
394
|
-
|
|
395
|
-
// ../utils/component.js
|
|
396
|
-
var init_component = __esm({
|
|
397
|
-
"../utils/component.js"() {
|
|
398
|
-
"use strict";
|
|
399
|
-
}
|
|
400
|
-
});
|
|
401
|
-
|
|
402
|
-
// ../utils/props.js
|
|
403
|
-
var init_props = __esm({
|
|
404
|
-
"../utils/props.js"() {
|
|
405
|
-
"use strict";
|
|
406
|
-
}
|
|
407
|
-
});
|
|
408
|
-
|
|
409
|
-
// ../utils/element.js
|
|
410
|
-
var init_element = __esm({
|
|
411
|
-
"../utils/element.js"() {
|
|
412
|
-
"use strict";
|
|
413
|
-
}
|
|
414
|
-
});
|
|
415
|
-
|
|
416
|
-
// ../utils/state.js
|
|
417
|
-
var init_state = __esm({
|
|
418
|
-
"../utils/state.js"() {
|
|
419
|
-
"use strict";
|
|
420
|
-
}
|
|
421
|
-
});
|
|
422
|
-
|
|
423
|
-
// ../utils/scope.js
|
|
424
|
-
var init_scope = __esm({
|
|
425
|
-
"../utils/scope.js"() {
|
|
426
|
-
"use strict";
|
|
427
|
-
}
|
|
428
|
-
});
|
|
429
|
-
|
|
430
|
-
// ../utils/triggerEvent.js
|
|
431
|
-
var init_triggerEvent = __esm({
|
|
432
|
-
"../utils/triggerEvent.js"() {
|
|
433
|
-
"use strict";
|
|
434
|
-
}
|
|
435
|
-
});
|
|
436
|
-
|
|
437
|
-
// ../utils/cache.js
|
|
438
|
-
var init_cache = __esm({
|
|
439
|
-
"../utils/cache.js"() {
|
|
440
|
-
"use strict";
|
|
441
|
-
}
|
|
442
|
-
});
|
|
443
|
-
|
|
444
|
-
// ../utils/methods.js
|
|
445
|
-
var init_methods = __esm({
|
|
446
|
-
"../utils/methods.js"() {
|
|
447
|
-
"use strict";
|
|
448
|
-
}
|
|
449
|
-
});
|
|
450
|
-
|
|
451
|
-
// ../utils/update.js
|
|
452
|
-
var init_update = __esm({
|
|
453
|
-
"../utils/update.js"() {
|
|
454
|
-
"use strict";
|
|
455
|
-
}
|
|
456
|
-
});
|
|
457
|
-
|
|
458
|
-
// ../utils/projectKeys.js
|
|
459
|
-
var init_projectKeys = __esm({
|
|
460
|
-
"../utils/projectKeys.js"() {
|
|
461
|
-
}
|
|
462
|
-
});
|
|
463
|
-
|
|
464
|
-
// ../utils/browser.js
|
|
465
|
-
var init_browser = __esm({
|
|
466
|
-
"../utils/browser.js"() {
|
|
467
|
-
"use strict";
|
|
468
|
-
}
|
|
469
|
-
});
|
|
470
|
-
|
|
471
|
-
// ../utils/cdn.js
|
|
472
|
-
var init_cdn = __esm({
|
|
473
|
-
"../utils/cdn.js"() {
|
|
474
|
-
"use strict";
|
|
475
|
-
}
|
|
476
|
-
});
|
|
477
|
-
|
|
478
|
-
// ../utils/date.js
|
|
479
|
-
var init_date = __esm({
|
|
480
|
-
"../utils/date.js"() {
|
|
481
|
-
"use strict";
|
|
482
|
-
}
|
|
483
|
-
});
|
|
484
|
-
|
|
485
|
-
// ../utils/detectHeight.js
|
|
486
|
-
var init_detectHeight = __esm({
|
|
487
|
-
"../utils/detectHeight.js"() {
|
|
488
|
-
"use strict";
|
|
489
|
-
}
|
|
490
|
-
});
|
|
491
|
-
|
|
492
|
-
// ../utils/fibonacci.js
|
|
493
|
-
var init_fibonacci = __esm({
|
|
494
|
-
"../utils/fibonacci.js"() {
|
|
495
|
-
"use strict";
|
|
496
|
-
}
|
|
497
|
-
});
|
|
498
|
-
|
|
499
|
-
// ../utils/files.js
|
|
500
|
-
var init_files = __esm({
|
|
501
|
-
"../utils/files.js"() {
|
|
502
|
-
"use strict";
|
|
503
|
-
}
|
|
504
|
-
});
|
|
505
|
-
|
|
506
|
-
// ../utils/load.js
|
|
507
|
-
var init_load = __esm({
|
|
508
|
-
"../utils/load.js"() {
|
|
509
|
-
"use strict";
|
|
510
|
-
}
|
|
511
|
-
});
|
|
512
|
-
|
|
513
|
-
// ../utils/metadata.js
|
|
514
|
-
var init_metadata = __esm({
|
|
515
|
-
"../utils/metadata.js"() {
|
|
516
|
-
"use strict";
|
|
517
|
-
}
|
|
518
|
-
});
|
|
519
|
-
|
|
520
|
-
// ../utils/scaling.js
|
|
521
|
-
var init_scaling = __esm({
|
|
522
|
-
"../utils/scaling.js"() {
|
|
523
|
-
"use strict";
|
|
524
|
-
}
|
|
525
|
-
});
|
|
526
|
-
|
|
527
|
-
// ../utils/sharedLibraries.js
|
|
528
|
-
var init_sharedLibraries = __esm({
|
|
529
|
-
"../utils/sharedLibraries.js"() {
|
|
530
|
-
"use strict";
|
|
531
|
-
}
|
|
532
|
-
});
|
|
533
|
-
|
|
534
|
-
// ../utils/string-extra.js
|
|
535
|
-
var toCamelCase, toDashCase, arrayzeValue;
|
|
536
|
-
var init_string_extra = __esm({
|
|
537
|
-
"../utils/string-extra.js"() {
|
|
538
|
-
"use strict";
|
|
539
|
-
init_types();
|
|
540
|
-
toCamelCase = (str) => {
|
|
541
|
-
if (typeof str !== "string") str = String(str || "");
|
|
542
|
-
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
|
|
543
|
-
return index === 0 ? word.toLowerCase() : word.toUpperCase();
|
|
544
|
-
}).replace(/\s+/g, "");
|
|
545
|
-
};
|
|
546
|
-
toDashCase = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
|
|
547
|
-
arrayzeValue = (val) => {
|
|
548
|
-
if (isArray(val)) return val;
|
|
549
|
-
if (isString(val)) return val.split(" ");
|
|
550
|
-
if (isObject(val)) return Object.values(val);
|
|
551
|
-
if (isNumber(val)) return [val];
|
|
552
|
-
};
|
|
553
|
-
}
|
|
554
|
-
});
|
|
555
|
-
|
|
556
|
-
// ../utils/style.js
|
|
557
|
-
var init_style = __esm({
|
|
558
|
-
"../utils/style.js"() {
|
|
559
|
-
"use strict";
|
|
560
|
-
}
|
|
561
|
-
});
|
|
562
|
-
|
|
563
|
-
// ../utils/index.js
|
|
564
|
-
var init_utils = __esm({
|
|
565
|
-
"../utils/index.js"() {
|
|
566
|
-
"use strict";
|
|
567
|
-
init_key();
|
|
568
|
-
init_env();
|
|
569
|
-
init_types();
|
|
570
|
-
init_object();
|
|
571
|
-
init_function();
|
|
572
|
-
init_array();
|
|
573
|
-
init_node();
|
|
574
|
-
init_if();
|
|
575
|
-
init_log();
|
|
576
|
-
init_string();
|
|
577
|
-
init_globals();
|
|
578
|
-
init_cookie();
|
|
579
|
-
init_tags();
|
|
580
|
-
init_component();
|
|
581
|
-
init_props();
|
|
582
|
-
init_extends();
|
|
583
|
-
init_element();
|
|
584
|
-
init_state();
|
|
585
|
-
init_keys();
|
|
586
|
-
init_scope();
|
|
587
|
-
init_methods();
|
|
588
|
-
init_cache();
|
|
589
|
-
init_update();
|
|
590
|
-
init_triggerEvent();
|
|
591
|
-
init_projectKeys();
|
|
592
|
-
init_browser();
|
|
593
|
-
init_cdn();
|
|
594
|
-
init_date();
|
|
595
|
-
init_detectHeight();
|
|
596
|
-
init_fibonacci();
|
|
597
|
-
init_files();
|
|
598
|
-
init_load();
|
|
599
|
-
init_metadata();
|
|
600
|
-
init_scaling();
|
|
601
|
-
init_sharedLibraries();
|
|
602
|
-
init_string_extra();
|
|
603
|
-
init_style();
|
|
604
|
-
}
|
|
605
|
-
});
|
|
606
|
-
|
|
607
|
-
// src/index.js
|
|
608
|
-
var index_exports = {};
|
|
609
|
-
__export(index_exports, {
|
|
610
|
-
CONFIG: () => CONFIG,
|
|
611
|
-
CSS_NATIVE_COLOR_REGEX: () => CSS_NATIVE_COLOR_REGEX,
|
|
612
|
-
CSS_UNITS: () => CSS_UNITS,
|
|
613
|
-
FACTORY: () => FACTORY,
|
|
614
|
-
VALUE_TRANSFORMERS: () => VALUE_TRANSFORMERS,
|
|
615
|
-
activateConfig: () => activateConfig,
|
|
616
|
-
animation: () => animation,
|
|
617
|
-
appendSVGSprite: () => appendSVGSprite,
|
|
618
|
-
appendSvgIconsSprite: () => appendSvgIconsSprite,
|
|
619
|
-
applyDocument: () => applyDocument,
|
|
620
|
-
applyHeadings: () => applyHeadings,
|
|
621
|
-
applyMediaSequenceVars: () => applyMediaSequenceVars,
|
|
622
|
-
applyReset: () => applyReset,
|
|
623
|
-
applySequenceGlobalVars: () => applySequenceGlobalVars,
|
|
624
|
-
applySequenceVars: () => applySequenceVars,
|
|
625
|
-
applySpacingSequence: () => applySpacingSequence,
|
|
626
|
-
applyTimingSequence: () => applyTimingSequence,
|
|
627
|
-
applyTypographySequence: () => applyTypographySequence,
|
|
628
|
-
breakpoints: () => breakpoints,
|
|
629
|
-
changeGlobalTheme: () => changeGlobalTheme,
|
|
630
|
-
changeLightness: () => changeLightness,
|
|
631
|
-
checkIfBoxSize: () => checkIfBoxSize,
|
|
632
|
-
class: () => defaultProps5,
|
|
633
|
-
color: () => color,
|
|
634
|
-
colorStringToRgbaArray: () => colorStringToRgbaArray,
|
|
635
|
-
convertSvgToSymbol: () => convertSvgToSymbol,
|
|
636
|
-
createConfig: () => createConfig,
|
|
637
|
-
cssMediaVars: () => cssMediaVars,
|
|
638
|
-
cssVars: () => cssVars,
|
|
639
|
-
devices: () => devices,
|
|
640
|
-
document: () => document3,
|
|
641
|
-
findHeadingLetter: () => findHeadingLetter,
|
|
642
|
-
findHeadings: () => findHeadings,
|
|
643
|
-
font: () => font,
|
|
644
|
-
fontFace: () => fontFace,
|
|
645
|
-
fontFamily: () => fontFamily,
|
|
646
|
-
fontFamilyTypes: () => fontFamilyTypes,
|
|
647
|
-
generateSequence: () => generateSequence,
|
|
648
|
-
generateSequencePosition: () => generateSequencePosition,
|
|
649
|
-
generateSprite: () => generateSprite,
|
|
650
|
-
generateSubSequence: () => generateSubSequence,
|
|
651
|
-
getActiveConfig: () => getActiveConfig,
|
|
652
|
-
getColor: () => getColor,
|
|
653
|
-
getColorShade: () => getColorShade,
|
|
654
|
-
getDefaultOrFirstKey: () => getDefaultOrFirstKey,
|
|
655
|
-
getFnPrefixAndValue: () => getFnPrefixAndValue,
|
|
656
|
-
getFontFace: () => getFontFace,
|
|
657
|
-
getFontFaceEach: () => getFontFaceEach,
|
|
658
|
-
getFontFaceEachString: () => getFontFaceEachString,
|
|
659
|
-
getFontFaceString: () => getFontFaceString,
|
|
660
|
-
getFontFamily: () => getFontFamily,
|
|
661
|
-
getFontFormat: () => getFontFormat,
|
|
662
|
-
getFontSizeByKey: () => getFontSizeByKey,
|
|
663
|
-
getMediaColor: () => getMediaColor,
|
|
664
|
-
getMediaTheme: () => getMediaTheme,
|
|
665
|
-
getRgbTone: () => getRgbTone,
|
|
666
|
-
getSequenceValue: () => getSequenceValue,
|
|
667
|
-
getSequenceValueBySymbols: () => getSequenceValueBySymbols,
|
|
668
|
-
getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
|
|
669
|
-
getShadow: () => getShadow,
|
|
670
|
-
getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
|
|
671
|
-
getSpacingByKey: () => getSpacingByKey,
|
|
672
|
-
getSubratio: () => getSubratio,
|
|
673
|
-
getSubratioDifference: () => getSubratioDifference,
|
|
674
|
-
getTheme: () => getTheme,
|
|
675
|
-
getTimingByKey: () => getTimingByKey,
|
|
676
|
-
getTimingFunction: () => getTimingFunction,
|
|
677
|
-
gradient: () => gradient,
|
|
678
|
-
grid: () => grid,
|
|
679
|
-
hexToRgb: () => hexToRgb,
|
|
680
|
-
hexToRgbArray: () => hexToRgbArray,
|
|
681
|
-
hexToRgba: () => hexToRgba,
|
|
682
|
-
hslToRgb: () => hslToRgb,
|
|
683
|
-
icons: () => icons,
|
|
684
|
-
isCSSVar: () => isCSSVar,
|
|
685
|
-
isGoogleFontsUrl: () => isGoogleFontsUrl,
|
|
686
|
-
isResolvedColor: () => isResolvedColor,
|
|
687
|
-
isScalingUnit: () => isScalingUnit,
|
|
688
|
-
media: () => media,
|
|
689
|
-
mixTwoColors: () => mixTwoColors,
|
|
690
|
-
mixTwoRgb: () => mixTwoRgb,
|
|
691
|
-
mixTwoRgba: () => mixTwoRgba,
|
|
692
|
-
numToLetterMap: () => numToLetterMap,
|
|
693
|
-
opacify: () => opacify,
|
|
694
|
-
parseColorToken: () => parseColorToken,
|
|
695
|
-
popConfig: () => popConfig,
|
|
696
|
-
pushConfig: () => pushConfig,
|
|
697
|
-
reset: () => reset,
|
|
698
|
-
resolveColorsInGradient: () => resolveColorsInGradient,
|
|
699
|
-
resolveFileUrl: () => resolveFileUrl,
|
|
700
|
-
returnSubThemeOrDefault: () => returnSubThemeOrDefault,
|
|
701
|
-
rgbArrayToHex: () => rgbArrayToHex,
|
|
702
|
-
rgbToHSL: () => rgbToHSL,
|
|
703
|
-
rgbToHex: () => rgbToHex,
|
|
704
|
-
runThroughMedia: () => runThroughMedia,
|
|
705
|
-
scratchDefaultConfig: () => defaultConfig_exports,
|
|
706
|
-
scratchSystem: () => system_exports,
|
|
707
|
-
scratchUtils: () => utils_exports,
|
|
708
|
-
semanticIcons: () => semanticIcons,
|
|
709
|
-
sequence: () => sequence,
|
|
710
|
-
set: () => set,
|
|
711
|
-
setActiveConfig: () => setActiveConfig,
|
|
712
|
-
setColor: () => setColor,
|
|
713
|
-
setCustomFont: () => setCustomFont,
|
|
714
|
-
setCustomFontMedia: () => setCustomFontMedia,
|
|
715
|
-
setEach: () => setEach,
|
|
716
|
-
setFont: () => setFont,
|
|
717
|
-
setFontFamily: () => setFontFamily,
|
|
718
|
-
setFontImport: () => setFontImport,
|
|
719
|
-
setGradient: () => setGradient,
|
|
720
|
-
setInCustomFontMedia: () => setInCustomFontMedia,
|
|
721
|
-
setMediaTheme: () => setMediaTheme,
|
|
722
|
-
setSVG: () => setSVG,
|
|
723
|
-
setScalingVar: () => setScalingVar,
|
|
724
|
-
setShadow: () => setShadow,
|
|
725
|
-
setSubScalingVar: () => setSubScalingVar,
|
|
726
|
-
setSvgIcon: () => setSvgIcon,
|
|
727
|
-
setTheme: () => setTheme,
|
|
728
|
-
setValue: () => setValue,
|
|
729
|
-
setVariables: () => setVariables,
|
|
730
|
-
shadow: () => shadow,
|
|
731
|
-
spacing: () => spacing,
|
|
732
|
-
splitSpacedValue: () => splitSpacedValue,
|
|
733
|
-
splitTopLevelCommas: () => splitTopLevelCommas,
|
|
734
|
-
splitTransition: () => splitTransition,
|
|
735
|
-
svg: () => svg,
|
|
736
|
-
svgData: () => svgData,
|
|
737
|
-
templates: () => templates,
|
|
738
|
-
theme: () => theme,
|
|
739
|
-
timing: () => timing,
|
|
740
|
-
toCamel: () => toCamel,
|
|
741
|
-
transformBackgroundImage: () => transformBackgroundImage,
|
|
742
|
-
transformBorder: () => transformBorder,
|
|
743
|
-
transformBorderRadius: () => transformBorderRadius,
|
|
744
|
-
transformBoxShadow: () => transformBoxShadow,
|
|
745
|
-
transformDuration: () => transformDuration,
|
|
746
|
-
transformShadow: () => transformShadow,
|
|
747
|
-
transformSize: () => transformSize,
|
|
748
|
-
transformSizeRatio: () => transformSizeRatio,
|
|
749
|
-
transformTextStroke: () => transformTextStroke,
|
|
750
|
-
transformTransition: () => transformTransition,
|
|
751
|
-
transfromGap: () => transfromGap,
|
|
752
|
-
typography: () => typography,
|
|
753
|
-
unit: () => unit,
|
|
754
|
-
vars: () => vars
|
|
755
|
-
});
|
|
756
|
-
|
|
757
|
-
// src/utils/index.js
|
|
758
|
-
var utils_exports = {};
|
|
759
|
-
__export(utils_exports, {
|
|
760
|
-
CSS_NATIVE_COLOR_REGEX: () => CSS_NATIVE_COLOR_REGEX,
|
|
761
|
-
CSS_UNITS: () => CSS_UNITS,
|
|
762
|
-
applyMediaSequenceVars: () => applyMediaSequenceVars,
|
|
763
|
-
applySequenceGlobalVars: () => applySequenceGlobalVars,
|
|
764
|
-
applySequenceVars: () => applySequenceVars,
|
|
765
|
-
changeLightness: () => changeLightness,
|
|
766
|
-
colorStringToRgbaArray: () => colorStringToRgbaArray,
|
|
767
|
-
convertSvgToSymbol: () => convertSvgToSymbol,
|
|
768
|
-
findHeadingLetter: () => findHeadingLetter,
|
|
769
|
-
findHeadings: () => findHeadings,
|
|
770
|
-
generateSequence: () => generateSequence,
|
|
771
|
-
generateSequencePosition: () => generateSequencePosition,
|
|
772
|
-
generateSprite: () => generateSprite,
|
|
773
|
-
generateSubSequence: () => generateSubSequence,
|
|
774
|
-
getColorShade: () => getColorShade,
|
|
775
|
-
getDefaultOrFirstKey: () => getDefaultOrFirstKey,
|
|
776
|
-
getFnPrefixAndValue: () => getFnPrefixAndValue,
|
|
777
|
-
getFontFace: () => getFontFace,
|
|
778
|
-
getFontFaceEach: () => getFontFaceEach,
|
|
779
|
-
getFontFaceEachString: () => getFontFaceEachString,
|
|
780
|
-
getFontFaceString: () => getFontFaceString,
|
|
781
|
-
getFontFormat: () => getFontFormat,
|
|
782
|
-
getRgbTone: () => getRgbTone,
|
|
783
|
-
getSequenceValue: () => getSequenceValue,
|
|
784
|
-
getSequenceValueBySymbols: () => getSequenceValueBySymbols,
|
|
785
|
-
getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
|
|
786
|
-
getSubratio: () => getSubratio,
|
|
787
|
-
getSubratioDifference: () => getSubratioDifference,
|
|
788
|
-
hexToRgb: () => hexToRgb,
|
|
789
|
-
hexToRgbArray: () => hexToRgbArray,
|
|
790
|
-
hexToRgba: () => hexToRgba,
|
|
791
|
-
hslToRgb: () => hslToRgb,
|
|
792
|
-
isCSSVar: () => isCSSVar,
|
|
793
|
-
isGoogleFontsUrl: () => isGoogleFontsUrl,
|
|
794
|
-
isResolvedColor: () => isResolvedColor,
|
|
795
|
-
isScalingUnit: () => isScalingUnit,
|
|
796
|
-
mixTwoColors: () => mixTwoColors,
|
|
797
|
-
mixTwoRgb: () => mixTwoRgb,
|
|
798
|
-
mixTwoRgba: () => mixTwoRgba,
|
|
799
|
-
numToLetterMap: () => numToLetterMap,
|
|
800
|
-
opacify: () => opacify,
|
|
801
|
-
parseColorToken: () => parseColorToken,
|
|
802
|
-
resolveFileUrl: () => resolveFileUrl,
|
|
803
|
-
returnSubThemeOrDefault: () => returnSubThemeOrDefault,
|
|
804
|
-
rgbArrayToHex: () => rgbArrayToHex,
|
|
805
|
-
rgbToHSL: () => rgbToHSL,
|
|
806
|
-
rgbToHex: () => rgbToHex,
|
|
807
|
-
setCustomFont: () => setCustomFont,
|
|
808
|
-
setCustomFontMedia: () => setCustomFontMedia,
|
|
809
|
-
setFontImport: () => setFontImport,
|
|
810
|
-
setInCustomFontMedia: () => setInCustomFontMedia,
|
|
811
|
-
setScalingVar: () => setScalingVar,
|
|
812
|
-
setSubScalingVar: () => setSubScalingVar,
|
|
813
|
-
setVariables: () => setVariables,
|
|
814
|
-
splitTopLevelCommas: () => splitTopLevelCommas
|
|
815
|
-
});
|
|
816
|
-
|
|
817
|
-
// src/utils/unit.js
|
|
818
|
-
var isScalingUnit = (unit2) => {
|
|
819
|
-
return unit2 === "em" || unit2 === "rem" || unit2 === "vw" || unit2 === "vh" || unit2 === "vmax" || unit2 === "vmin";
|
|
820
|
-
};
|
|
821
|
-
var CSS_UNITS = [
|
|
822
|
-
// Absolute
|
|
823
|
-
"px",
|
|
824
|
-
"cm",
|
|
825
|
-
"mm",
|
|
826
|
-
"in",
|
|
827
|
-
"pt",
|
|
828
|
-
"pc",
|
|
829
|
-
// Font-relative
|
|
830
|
-
"em",
|
|
831
|
-
"rem",
|
|
832
|
-
"ex",
|
|
833
|
-
"cap",
|
|
834
|
-
"ch",
|
|
835
|
-
"ic",
|
|
836
|
-
"lh",
|
|
837
|
-
"rlh",
|
|
838
|
-
// Viewport-relative
|
|
839
|
-
"%",
|
|
840
|
-
"vw",
|
|
841
|
-
"vh",
|
|
842
|
-
"vmin",
|
|
843
|
-
"vmax",
|
|
844
|
-
"svw",
|
|
845
|
-
"svh",
|
|
846
|
-
"lvw",
|
|
847
|
-
"lvh",
|
|
848
|
-
"dvw",
|
|
849
|
-
"dvh",
|
|
850
|
-
// Container query units
|
|
851
|
-
"cqw",
|
|
852
|
-
"cqh",
|
|
853
|
-
"cqi",
|
|
854
|
-
"cqb",
|
|
855
|
-
"cqmin",
|
|
856
|
-
"cqmax",
|
|
857
|
-
// Angle
|
|
858
|
-
"deg",
|
|
859
|
-
"rad",
|
|
860
|
-
"grad",
|
|
861
|
-
"turn",
|
|
862
|
-
// Time
|
|
863
|
-
"s",
|
|
864
|
-
"ms",
|
|
865
|
-
// Resolution
|
|
866
|
-
"dpi",
|
|
867
|
-
"dpcm",
|
|
868
|
-
"dppx",
|
|
869
|
-
// Grid fractional
|
|
870
|
-
"fr",
|
|
871
|
-
"auto"
|
|
872
|
-
];
|
|
873
|
-
|
|
874
|
-
// src/utils/color.js
|
|
875
|
-
init_utils();
|
|
876
|
-
var colorStringToRgbaArray = (color2) => {
|
|
877
|
-
if (color2 === "") return [0, 0, 0, 0];
|
|
878
|
-
if (color2.toLowerCase() === "transparent") return [0, 0, 0, 0];
|
|
879
|
-
if (color2[0] === "#") {
|
|
880
|
-
if (color2.length < 7) {
|
|
881
|
-
color2 = "#" + color2[1] + color2[1] + color2[2] + color2[2] + color2[3] + color2[3] + (color2.length > 4 ? color2[4] + color2[4] : "");
|
|
882
|
-
}
|
|
883
|
-
return [
|
|
884
|
-
parseInt(color2.substr(1, 2), 16),
|
|
885
|
-
parseInt(color2.substr(3, 2), 16),
|
|
886
|
-
parseInt(color2.substr(5, 2), 16),
|
|
887
|
-
color2.length > 7 ? parseInt(color2.substr(7, 2), 16) / 255 : 1
|
|
888
|
-
];
|
|
889
|
-
}
|
|
890
|
-
if (color2.indexOf("rgb") === -1) {
|
|
891
|
-
if (document2 && window2) {
|
|
892
|
-
const elem = document2.body.appendChild(document2.createElement("fictum"));
|
|
893
|
-
const flag = "rgb(1, 2, 3)";
|
|
894
|
-
elem.style.color = flag;
|
|
895
|
-
if (elem.style.color !== flag) {
|
|
896
|
-
document2.body.removeChild(elem);
|
|
897
|
-
return;
|
|
898
|
-
}
|
|
899
|
-
elem.style.color = color2;
|
|
900
|
-
if (elem.style.color === flag || elem.style.color === "") {
|
|
901
|
-
document2.body.removeChild(elem);
|
|
902
|
-
return [0, 0, 0, 0];
|
|
903
|
-
}
|
|
904
|
-
color2 = window2.getComputedStyle(elem).color;
|
|
905
|
-
document2.body.removeChild(elem);
|
|
906
|
-
}
|
|
907
|
-
}
|
|
908
|
-
if (color2.indexOf("rgb") === 0) {
|
|
909
|
-
if (color2.indexOf("rgba") === -1) color2 = `${color2}, 1`;
|
|
910
|
-
return color2.match(/[\.\d]+/g).map((a) => +a);
|
|
911
|
-
}
|
|
912
|
-
return [0, 0, 0, 0];
|
|
913
|
-
};
|
|
914
|
-
var mixTwoColors = (colorA, colorB, range = 0.5) => {
|
|
915
|
-
colorA = colorStringToRgbaArray(colorA);
|
|
916
|
-
colorB = colorStringToRgbaArray(colorB);
|
|
917
|
-
return mixTwoRgba(colorA, colorB, range);
|
|
918
|
-
};
|
|
919
|
-
var hexToRgb = (hex, alpha = 1) => {
|
|
920
|
-
const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
|
|
921
|
-
return `rgb(${r},${g},${b})`;
|
|
922
|
-
};
|
|
923
|
-
var hexToRgbArray = (hex, alpha = 1) => {
|
|
924
|
-
const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
|
|
925
|
-
return [r, g, b];
|
|
926
|
-
};
|
|
927
|
-
var rgbToHex = (r, g, b) => {
|
|
928
|
-
return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
|
|
929
|
-
};
|
|
930
|
-
var rgbArrayToHex = ([r, g, b]) => {
|
|
931
|
-
return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
932
|
-
};
|
|
933
|
-
var hexToRgba = (hex, alpha = 1) => {
|
|
934
|
-
const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
|
|
935
|
-
return `rgba(${r},${g},${b},${alpha})`;
|
|
936
|
-
};
|
|
937
|
-
var mixTwoRgb = (colorA, colorB, range = 0.5) => {
|
|
938
|
-
const arr = [];
|
|
939
|
-
for (let i = 0; i < 3; i++) {
|
|
940
|
-
arr[i] = ~~(colorA[i] + (colorB[i] - colorA[i]) * range);
|
|
941
|
-
}
|
|
942
|
-
return `rgb(${arr})`;
|
|
943
|
-
};
|
|
944
|
-
var changeLightness = (delta, hsl) => {
|
|
945
|
-
const [hue, saturation, lightness] = hsl;
|
|
946
|
-
const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)));
|
|
947
|
-
return [hue, saturation, newLightness];
|
|
948
|
-
};
|
|
949
|
-
var rgbToHSL = (r, g, b) => {
|
|
950
|
-
const a = Math.max(r, g, b);
|
|
951
|
-
const n = a - Math.min(r, g, b);
|
|
952
|
-
const f = 1 - Math.abs(a + a - n - 1);
|
|
953
|
-
const h = n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n);
|
|
954
|
-
return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2];
|
|
955
|
-
};
|
|
956
|
-
var hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)) => [f(0), f(8), f(4)];
|
|
957
|
-
var getColorShade = (col, amt) => {
|
|
958
|
-
const num = parseInt(col, 16);
|
|
959
|
-
let r = (num >> 16) + amt;
|
|
960
|
-
if (r > 255) r = 255;
|
|
961
|
-
else if (r < 0) r = 0;
|
|
962
|
-
let b = (num >> 8 & 255) + amt;
|
|
963
|
-
if (b > 255) b = 255;
|
|
964
|
-
else if (b < 0) b = 0;
|
|
965
|
-
let g = (num & 255) + amt;
|
|
966
|
-
if (g > 255) g = 255;
|
|
967
|
-
else if (g < 0) g = 0;
|
|
968
|
-
return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
|
|
969
|
-
};
|
|
970
|
-
var mixTwoRgba = (colorA, colorB, range = 0.5) => {
|
|
971
|
-
const arr = [];
|
|
972
|
-
for (let i = 0; i < 4; i++) {
|
|
973
|
-
const round = i === 3 ? (x) => x : Math.round;
|
|
974
|
-
arr[i] = round(colorA[i] + (colorB[i] - colorA[i]) * range);
|
|
975
|
-
}
|
|
976
|
-
return `rgba(${arr})`;
|
|
977
|
-
};
|
|
978
|
-
var opacify = (color2, opacity) => {
|
|
979
|
-
const arr = colorStringToRgbaArray(color2);
|
|
980
|
-
if (!arr) {
|
|
981
|
-
if (isNotProduction()) console.warn(color2 + " color is not rgba");
|
|
982
|
-
return;
|
|
983
|
-
}
|
|
984
|
-
arr[3] = opacity;
|
|
985
|
-
return `rgba(${arr})`;
|
|
986
|
-
};
|
|
987
|
-
var isCSSVar = (v) => v.charCodeAt(0) === 45 && v.charCodeAt(1) === 45;
|
|
988
|
-
var CSS_NATIVE_COLOR_REGEX = /(?:rgba?\(|hsla?\(|#[0-9a-fA-F]{3,8}\b)/;
|
|
989
|
-
var COLOR_TOKEN_REGEX = /^([a-zA-Z]\w*)(?:\.(\d+))?(?:([+-]\d+|=\d+))?$/;
|
|
990
|
-
var parseColorToken = (value) => {
|
|
991
|
-
if (!isString(value)) return null;
|
|
992
|
-
if (CSS_NATIVE_COLOR_REGEX.test(value)) return { passthrough: value };
|
|
993
|
-
if (isCSSVar(value)) return { cssVar: value };
|
|
994
|
-
const match = value.match(COLOR_TOKEN_REGEX);
|
|
995
|
-
if (!match) return null;
|
|
996
|
-
const [, name, alphaDigits, rawTone] = match;
|
|
997
|
-
const alpha = alphaDigits !== void 0 ? `0.${alphaDigits}` : void 0;
|
|
998
|
-
const tone = rawTone && rawTone[0] === "=" ? rawTone.slice(1) : rawTone;
|
|
999
|
-
return { name, alpha, tone };
|
|
1000
|
-
};
|
|
1001
|
-
var isResolvedColor = (result) => {
|
|
1002
|
-
return isString(result) && (result.includes("rgb") || result.includes("var(") || result.includes("#"));
|
|
1003
|
-
};
|
|
1004
|
-
var splitTopLevelCommas = (value) => {
|
|
1005
|
-
const result = [];
|
|
1006
|
-
let current = "";
|
|
1007
|
-
let depth = 0;
|
|
1008
|
-
for (const char of value) {
|
|
1009
|
-
if (char === "(") depth += 1;
|
|
1010
|
-
else if (char === ")" && depth > 0) depth -= 1;
|
|
1011
|
-
if (char === "," && depth === 0) {
|
|
1012
|
-
result.push(current);
|
|
1013
|
-
current = "";
|
|
1014
|
-
continue;
|
|
1015
|
-
}
|
|
1016
|
-
current += char;
|
|
1017
|
-
}
|
|
1018
|
-
if (current.length || !result.length) result.push(current);
|
|
1019
|
-
return result;
|
|
1020
|
-
};
|
|
1021
|
-
var getRgbTone = (rgb, tone) => {
|
|
1022
|
-
if (isString(rgb) && rgb.includes("rgb"))
|
|
1023
|
-
rgb = colorStringToRgbaArray(rgb).join(", ");
|
|
1024
|
-
if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
|
|
1025
|
-
if (isNumber(tone)) tone += "";
|
|
1026
|
-
const toHex = rgbArrayToHex(rgb);
|
|
1027
|
-
const abs = tone.slice(0, 1);
|
|
1028
|
-
if (abs === "-" || abs === "+") {
|
|
1029
|
-
const colorShade = getColorShade(toHex, parseFloat(tone));
|
|
1030
|
-
return hexToRgbArray(colorShade).join(", ");
|
|
1031
|
-
} else {
|
|
1032
|
-
const [r, g, b] = rgb;
|
|
1033
|
-
const hsl = rgbToHSL(r, g, b);
|
|
1034
|
-
const [h, s, l] = hsl;
|
|
1035
|
-
const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
|
|
1036
|
-
return newRgb;
|
|
1037
|
-
}
|
|
1038
|
-
};
|
|
1039
|
-
|
|
1040
|
-
// src/utils/theme.js
|
|
1041
|
-
var returnSubThemeOrDefault = (orig, theme2) => {
|
|
1042
|
-
if (!orig) return;
|
|
1043
|
-
if (orig.themes && orig.themes[theme2]) return orig.themes[theme2];
|
|
1044
|
-
if (orig[theme2]) return [orig, orig[theme2]];
|
|
1045
|
-
return orig;
|
|
1046
|
-
};
|
|
1047
|
-
|
|
1048
|
-
// src/utils/font.js
|
|
1049
|
-
var resolveFileUrl = (url, files) => {
|
|
1050
|
-
if (!url || !files) return null;
|
|
1051
|
-
try {
|
|
1052
|
-
new URL(url);
|
|
1053
|
-
return null;
|
|
1054
|
-
} catch (e) {
|
|
1055
|
-
}
|
|
1056
|
-
const file = files[url];
|
|
1057
|
-
if (file) return file.content && file.content.src;
|
|
1058
|
-
return null;
|
|
1059
|
-
};
|
|
1060
|
-
var getDefaultOrFirstKey = (LIBRARY, key) => {
|
|
1061
|
-
if (LIBRARY[key]) return LIBRARY[key].value;
|
|
1062
|
-
if (LIBRARY.default) return LIBRARY[LIBRARY.default].value;
|
|
1063
|
-
const hasValue = Object.keys(LIBRARY)[0];
|
|
1064
|
-
return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
|
|
1065
|
-
};
|
|
1066
|
-
var getFontFormat = (url) => {
|
|
1067
|
-
if (typeof url !== "string" || !url) return null;
|
|
1068
|
-
const ext = url.split(/[#?]/)[0].split(".").pop().trim();
|
|
1069
|
-
if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
|
|
1070
|
-
return null;
|
|
1071
|
-
};
|
|
1072
|
-
var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
|
|
1073
|
-
var setFontImport = (url) => `@import url('${url}');`;
|
|
1074
|
-
var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
|
|
1075
|
-
var setCustomFont = (name, url, weight, options = {}) => {
|
|
1076
|
-
const rawUrls = Array.isArray(url) ? url : [url];
|
|
1077
|
-
const urls = rawUrls.filter((u) => typeof u === "string" && u);
|
|
1078
|
-
const srcList = urls.map((u) => {
|
|
1079
|
-
const format = getFontFormat(u);
|
|
1080
|
-
const formatStr = format ? ` format('${format}')` : "";
|
|
1081
|
-
return `url('${u}')${formatStr}`;
|
|
1082
|
-
}).join(",\n ");
|
|
1083
|
-
return `
|
|
1084
|
-
font-family: '${name}';
|
|
1085
|
-
font-style: ${options.fontStyle || "normal"};${weight ? `
|
|
1086
|
-
font-weight: ${weight};` : ""}${options.fontStretch ? `
|
|
1087
|
-
font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
|
|
1088
|
-
font-display: ${options.fontDisplay};` : ""}
|
|
1089
|
-
src: ${srcList};`;
|
|
1090
|
-
};
|
|
1091
|
-
var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
|
|
1092
|
-
}`;
|
|
1093
|
-
var getFontFaceEach = (name, weights, files) => {
|
|
1094
|
-
const keys = Object.keys(weights);
|
|
1095
|
-
return keys.map((key) => {
|
|
1096
|
-
const { url, fontWeight, fontStyle, fontDisplay, fontStretch } = weights[key];
|
|
1097
|
-
const resolvedUrl = Array.isArray(url) ? url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(url, files) || url;
|
|
1098
|
-
return setCustomFont(name, resolvedUrl, fontWeight, { fontStyle, fontDisplay, fontStretch });
|
|
1099
|
-
});
|
|
1100
|
-
};
|
|
1101
|
-
var getFontFace = (LIBRARY) => {
|
|
1102
|
-
const keys = Object.keys(LIBRARY);
|
|
1103
|
-
return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
|
|
1104
|
-
};
|
|
1105
|
-
var getFontFaceEachString = (name, weights, files) => {
|
|
1106
|
-
if (weights && weights.isVariable) {
|
|
1107
|
-
const url2 = resolveFileUrl(weights.url, files) || weights.url;
|
|
1108
|
-
if (isGoogleFontsUrl(url2)) {
|
|
1109
|
-
return setFontImport(url2);
|
|
1110
|
-
}
|
|
1111
|
-
return setCustomFontMedia(name, url2, weights.fontWeight, {
|
|
1112
|
-
fontStretch: weights.fontStretch,
|
|
1113
|
-
fontDisplay: weights.fontDisplay || "swap"
|
|
1114
|
-
});
|
|
1115
|
-
}
|
|
1116
|
-
const isArr = weights[0];
|
|
1117
|
-
if (isArr) return getFontFaceEach(name, weights, files).map(setInCustomFontMedia);
|
|
1118
|
-
const url = Array.isArray(weights.url) ? weights.url.map((u) => resolveFileUrl(u, files) || u) : resolveFileUrl(weights.url, files) || weights.url;
|
|
1119
|
-
return setCustomFontMedia(name, url, weights.fontWeight, {
|
|
1120
|
-
fontStyle: weights.fontStyle,
|
|
1121
|
-
fontDisplay: weights.fontDisplay,
|
|
1122
|
-
fontStretch: weights.fontStretch
|
|
1123
|
-
});
|
|
1124
|
-
};
|
|
1125
|
-
var getFontFaceString = (LIBRARY, files) => {
|
|
1126
|
-
const keys = Object.keys(LIBRARY);
|
|
1127
|
-
return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value, files));
|
|
1128
|
-
};
|
|
1129
|
-
|
|
1130
|
-
// src/utils/sequence.js
|
|
1131
|
-
init_utils();
|
|
1132
|
-
init_utils();
|
|
1133
|
-
|
|
1134
|
-
// src/factory.js
|
|
1135
|
-
init_utils();
|
|
1136
|
-
|
|
1137
|
-
// src/defaultConfig/index.js
|
|
1138
|
-
var defaultConfig_exports = {};
|
|
1139
|
-
__export(defaultConfig_exports, {
|
|
1140
|
-
animation: () => animation,
|
|
1141
|
-
breakpoints: () => breakpoints,
|
|
1142
|
-
class: () => defaultProps5,
|
|
1143
|
-
color: () => color,
|
|
1144
|
-
devices: () => devices,
|
|
1145
|
-
document: () => document3,
|
|
1146
|
-
font: () => font,
|
|
1147
|
-
fontFace: () => fontFace,
|
|
1148
|
-
fontFamily: () => fontFamily,
|
|
1149
|
-
fontFamilyTypes: () => fontFamilyTypes,
|
|
1150
|
-
gradient: () => gradient,
|
|
1151
|
-
grid: () => grid,
|
|
1152
|
-
icons: () => icons,
|
|
1153
|
-
media: () => media,
|
|
1154
|
-
reset: () => reset,
|
|
1155
|
-
semanticIcons: () => semanticIcons,
|
|
1156
|
-
sequence: () => sequence,
|
|
1157
|
-
shadow: () => shadow,
|
|
1158
|
-
spacing: () => spacing,
|
|
1159
|
-
svg: () => svg,
|
|
1160
|
-
svgData: () => svgData,
|
|
1161
|
-
templates: () => templates,
|
|
1162
|
-
theme: () => theme,
|
|
1163
|
-
timing: () => timing,
|
|
1164
|
-
typography: () => typography,
|
|
1165
|
-
unit: () => unit,
|
|
1166
|
-
vars: () => vars
|
|
1167
|
-
});
|
|
1168
|
-
|
|
1169
|
-
// src/defaultConfig/sequence.js
|
|
1170
|
-
var sequence = {
|
|
1171
|
-
"minor-second": 1.067,
|
|
1172
|
-
"major-second": 1.125,
|
|
1173
|
-
"minor-third": 1.2,
|
|
1174
|
-
"major-third": 1.25,
|
|
1175
|
-
"perfect-fourth": 1.333,
|
|
1176
|
-
"augmented-fourth": 1.414,
|
|
1177
|
-
"perfect-fifth": 1.5,
|
|
1178
|
-
"minor-sixth": 1.6,
|
|
1179
|
-
phi: 1.618,
|
|
1180
|
-
// golden-ratio
|
|
1181
|
-
"major-sixth": 1.667,
|
|
1182
|
-
"square-root-3": 1.732,
|
|
1183
|
-
// theodorus
|
|
1184
|
-
"minor-seventh": 1.778,
|
|
1185
|
-
"major-seventh": 1.875,
|
|
1186
|
-
octave: 2,
|
|
1187
|
-
"square-root-5": 2.23,
|
|
1188
|
-
// pythagoras
|
|
1189
|
-
"major-tenth": 2.5,
|
|
1190
|
-
"major-eleventh": 2.667,
|
|
1191
|
-
"major-twelfth": 3,
|
|
1192
|
-
pi: 3.14,
|
|
1193
|
-
// archimedes
|
|
1194
|
-
"double-octave": 4
|
|
1195
|
-
};
|
|
1196
|
-
|
|
1197
|
-
// src/defaultConfig/unit.js
|
|
1198
|
-
var unit = {
|
|
1199
|
-
default: "em"
|
|
1200
|
-
};
|
|
1201
|
-
|
|
1202
|
-
// src/defaultConfig/typography.js
|
|
1203
|
-
var defaultProps = {
|
|
1204
|
-
browserDefault: 16,
|
|
1205
|
-
base: 16,
|
|
1206
|
-
type: "font-size",
|
|
1207
|
-
ratio: sequence["minor-third"],
|
|
1208
|
-
range: [-3, 12],
|
|
1209
|
-
h1Matches: 6,
|
|
1210
|
-
lineHeight: 1.5,
|
|
1211
|
-
subSequence: true,
|
|
1212
|
-
mediaRegenerate: false,
|
|
1213
|
-
unit: "em",
|
|
1214
|
-
templates: {},
|
|
1215
|
-
sequence: {},
|
|
1216
|
-
scales: {},
|
|
1217
|
-
vars: {}
|
|
1218
|
-
};
|
|
1219
|
-
var typography = defaultProps;
|
|
1220
|
-
|
|
1221
|
-
// src/defaultConfig/font.js
|
|
1222
|
-
var font = {};
|
|
1223
|
-
|
|
1224
|
-
// src/defaultConfig/font-family.js
|
|
1225
|
-
var fontFamily = {};
|
|
1226
|
-
var fontFamilyTypes = {
|
|
1227
|
-
"sans-serif": "Helvetica, Arial, sans-serif, --system-default",
|
|
1228
|
-
serif: "Times New Roman, Georgia, serif, --system-default",
|
|
1229
|
-
monospace: "Courier New, monospace, --system-default"
|
|
1230
|
-
};
|
|
1231
|
-
var fontFace = {};
|
|
1232
|
-
|
|
1233
|
-
// src/defaultConfig/media.js
|
|
1234
|
-
var media = {
|
|
1235
|
-
tv: "(min-width: 2780px)",
|
|
1236
|
-
light: "(prefers-color-scheme: light)",
|
|
1237
|
-
dark: "(prefers-color-scheme: dark)",
|
|
1238
|
-
print: "print"
|
|
1239
|
-
};
|
|
1240
|
-
|
|
1241
|
-
// src/defaultConfig/spacing.js
|
|
1242
|
-
var defaultProps2 = {
|
|
1243
|
-
base: typography.base,
|
|
1244
|
-
type: "spacing",
|
|
1245
|
-
ratio: sequence.phi,
|
|
1246
|
-
range: [-5, 15],
|
|
1247
|
-
subSequence: true,
|
|
1248
|
-
mediaRegenerate: false,
|
|
1249
|
-
unit: "em",
|
|
1250
|
-
sequence: {},
|
|
1251
|
-
scales: {},
|
|
1252
|
-
vars: {}
|
|
1253
|
-
};
|
|
1254
|
-
var spacing = defaultProps2;
|
|
1255
|
-
|
|
1256
|
-
// src/defaultConfig/color.js
|
|
1257
|
-
var color = {};
|
|
1258
|
-
var gradient = {};
|
|
1259
|
-
|
|
1260
|
-
// src/defaultConfig/theme.js
|
|
1261
|
-
var theme = {};
|
|
1262
|
-
|
|
1263
|
-
// src/defaultConfig/shadow.js
|
|
1264
|
-
var shadow = {};
|
|
1265
|
-
|
|
1266
|
-
// src/defaultConfig/icons.js
|
|
1267
|
-
var icons = {};
|
|
1268
|
-
var semanticIcons = {};
|
|
1269
|
-
|
|
1270
|
-
// src/defaultConfig/timing.js
|
|
1271
|
-
var defaultProps3 = {
|
|
1272
|
-
default: 150,
|
|
1273
|
-
base: 150,
|
|
1274
|
-
type: "timing",
|
|
1275
|
-
ratio: sequence["perfect-fourth"],
|
|
1276
|
-
range: [-3, 12],
|
|
1277
|
-
mediaRegenerate: false,
|
|
1278
|
-
unit: "ms",
|
|
1279
|
-
sequence: {},
|
|
1280
|
-
scales: {},
|
|
1281
|
-
vars: {}
|
|
1282
|
-
};
|
|
1283
|
-
var timing = defaultProps3;
|
|
1284
|
-
|
|
1285
|
-
// src/defaultConfig/document.js
|
|
1286
|
-
var document3 = {};
|
|
1287
|
-
|
|
1288
|
-
// src/defaultConfig/responsive.js
|
|
1289
|
-
var breakpoints = {
|
|
1290
|
-
screenL: 1920,
|
|
1291
|
-
screenM: 1680,
|
|
1292
|
-
screenS: 1440,
|
|
1293
|
-
tabletL: 1366,
|
|
1294
|
-
tabletM: 1280,
|
|
1295
|
-
tabletS: 1024,
|
|
1296
|
-
mobileL: 768,
|
|
1297
|
-
mobileM: 560,
|
|
1298
|
-
mobileS: 480,
|
|
1299
|
-
mobileXS: 375
|
|
1300
|
-
};
|
|
1301
|
-
var devices = {
|
|
1302
|
-
screenXXL: [2560, 1440],
|
|
1303
|
-
screenXL: [2240, 1260],
|
|
1304
|
-
screenL: [1920, 1024],
|
|
1305
|
-
screenM: [1680, 1024],
|
|
1306
|
-
screenS: [1440, 720],
|
|
1307
|
-
tabletL: [1366, 926],
|
|
1308
|
-
tabletM: [1280, 768],
|
|
1309
|
-
tabletS: [1024, 768],
|
|
1310
|
-
mobileL: [768, 375],
|
|
1311
|
-
mobileM: [560, 768],
|
|
1312
|
-
mobileS: [480, 768],
|
|
1313
|
-
mobileXS: [375, 768]
|
|
1314
|
-
};
|
|
1315
|
-
|
|
1316
|
-
// src/defaultConfig/animation.js
|
|
1317
|
-
var animation = {};
|
|
1318
|
-
|
|
1319
|
-
// src/defaultConfig/svg.js
|
|
1320
|
-
var svg = {};
|
|
1321
|
-
var svgData = {};
|
|
1322
|
-
|
|
1323
|
-
// src/defaultConfig/templates.js
|
|
1324
|
-
var templates = {};
|
|
1325
|
-
|
|
1326
|
-
// src/defaultConfig/grid.js
|
|
1327
|
-
var defaultProps4 = {};
|
|
1328
|
-
var grid = defaultProps4;
|
|
1329
|
-
|
|
1330
|
-
// src/defaultConfig/class.js
|
|
1331
|
-
var defaultProps5 = {};
|
|
1332
|
-
|
|
1333
|
-
// src/defaultConfig/index.js
|
|
1334
|
-
var reset = {};
|
|
1335
|
-
var vars = {};
|
|
1336
|
-
|
|
1337
|
-
// src/factory.js
|
|
1338
|
-
var cssVars = {};
|
|
1339
|
-
var cssMediaVars = {};
|
|
1340
|
-
var _CONF = defaultConfig_exports;
|
|
1341
|
-
var _confLower = {};
|
|
1342
|
-
var toCamel = (s) => s.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
|
|
1343
|
-
for (const key in _CONF) {
|
|
1344
|
-
const lower = key.toLowerCase();
|
|
1345
|
-
_confLower[lower] = _CONF[key];
|
|
1346
|
-
const camel = toCamel(lower);
|
|
1347
|
-
if (camel !== lower) _confLower[camel] = _CONF[key];
|
|
1348
|
-
if (lower !== key) _confLower[key] = _CONF[key];
|
|
1349
|
-
}
|
|
1350
|
-
var CONFIG = {
|
|
1351
|
-
verbose: false,
|
|
1352
|
-
useVariable: true,
|
|
1353
|
-
useReset: true,
|
|
1354
|
-
globalTheme: "auto",
|
|
1355
|
-
cssVars,
|
|
1356
|
-
cssMediaVars,
|
|
1357
|
-
CSS_VARS: cssVars,
|
|
1358
|
-
CSS_MEDIA_VARS: cssMediaVars,
|
|
1359
|
-
_scratchConfig: true,
|
|
1360
|
-
..._confLower
|
|
1361
|
-
};
|
|
1362
|
-
var cachedConfig = deepClone(CONFIG);
|
|
1363
|
-
var FACTORY = {
|
|
1364
|
-
active: "0",
|
|
1365
|
-
0: CONFIG
|
|
1366
|
-
};
|
|
1367
|
-
var activateConfig = (def) => {
|
|
1368
|
-
if (isDefined(def)) {
|
|
1369
|
-
FACTORY.active = def;
|
|
1370
|
-
}
|
|
1371
|
-
return FACTORY[def || FACTORY.active];
|
|
1372
|
-
};
|
|
1373
|
-
var configStack = [];
|
|
1374
|
-
var pushConfig = (config) => {
|
|
1375
|
-
if (config && config._scratchConfig) configStack.push(config);
|
|
1376
|
-
};
|
|
1377
|
-
var popConfig = () => {
|
|
1378
|
-
configStack.pop();
|
|
1379
|
-
};
|
|
1380
|
-
var getActiveConfig = (def) => {
|
|
1381
|
-
if (configStack.length) return configStack[configStack.length - 1];
|
|
1382
|
-
return FACTORY[def || FACTORY.active] || CONFIG;
|
|
1383
|
-
};
|
|
1384
|
-
var setActiveConfig = (newConfig) => {
|
|
1385
|
-
if (!isObject(newConfig)) return;
|
|
1386
|
-
FACTORY.active = "1";
|
|
1387
|
-
FACTORY["1"] = deepMerge(newConfig, deepClone(cachedConfig));
|
|
1388
|
-
return newConfig;
|
|
1389
|
-
};
|
|
1390
|
-
var APP_FLAGS = [
|
|
1391
|
-
"useReset",
|
|
1392
|
-
"useVariable",
|
|
1393
|
-
"useFontImport",
|
|
1394
|
-
"useIconSprite",
|
|
1395
|
-
"useSvgSprite",
|
|
1396
|
-
"useDocumentTheme",
|
|
1397
|
-
"useDefaultIcons",
|
|
1398
|
-
"useDefaultConfig",
|
|
1399
|
-
"verbose",
|
|
1400
|
-
"globalTheme"
|
|
1401
|
-
];
|
|
1402
|
-
var ALIAS_GROUPS = [
|
|
1403
|
-
["fontfamily", "fontFamily", "font_family"],
|
|
1404
|
-
["fontfamilytypes", "fontFamilyTypes"],
|
|
1405
|
-
["semanticicons", "semanticIcons"],
|
|
1406
|
-
["svgdata", "svgData"]
|
|
1407
|
-
];
|
|
1408
|
-
var aliasCaseVariants = (cfg) => {
|
|
1409
|
-
for (const vs of ALIAS_GROUPS) {
|
|
1410
|
-
let merged;
|
|
1411
|
-
for (const v of vs) {
|
|
1412
|
-
const val = cfg[v];
|
|
1413
|
-
if (!isObject(val)) continue;
|
|
1414
|
-
merged = merged ? deepMerge(val, merged) : val;
|
|
1415
|
-
}
|
|
1416
|
-
if (!merged) continue;
|
|
1417
|
-
for (const v of vs) if (isObject(cfg[v])) cfg[v] = merged;
|
|
1418
|
-
}
|
|
1419
|
-
};
|
|
1420
|
-
var createConfig = (name, overrides, { cleanBase = false } = {}) => {
|
|
1421
|
-
const activeBase = cleanBase ? null : getActiveConfig();
|
|
1422
|
-
const base = deepClone(
|
|
1423
|
-
!cleanBase && activeBase && activeBase._scratchConfig ? activeBase : cachedConfig
|
|
1424
|
-
);
|
|
1425
|
-
for (const flag of APP_FLAGS) {
|
|
1426
|
-
delete base[flag];
|
|
1427
|
-
}
|
|
1428
|
-
const cfg = deepMerge(overrides || {}, base);
|
|
1429
|
-
cfg.cssVars = {};
|
|
1430
|
-
cfg.cssMediaVars = {};
|
|
1431
|
-
cfg.CSS_VARS = cfg.cssVars;
|
|
1432
|
-
cfg.CSS_MEDIA_VARS = cfg.cssMediaVars;
|
|
1433
|
-
cfg._scratchConfig = true;
|
|
1434
|
-
aliasCaseVariants(cfg);
|
|
1435
|
-
if (name) FACTORY[name] = cfg;
|
|
1436
|
-
return cfg;
|
|
1437
|
-
};
|
|
1438
|
-
|
|
1439
|
-
// src/utils/sequence.js
|
|
1440
|
-
var numToLetterMap = {
|
|
1441
|
-
"-6": "U",
|
|
1442
|
-
"-5": "V",
|
|
1443
|
-
"-4": "W",
|
|
1444
|
-
"-3": "X",
|
|
1445
|
-
"-2": "Y",
|
|
1446
|
-
"-1": "Z",
|
|
1447
|
-
0: "A",
|
|
1448
|
-
1: "B",
|
|
1449
|
-
2: "C",
|
|
1450
|
-
3: "D",
|
|
1451
|
-
4: "E",
|
|
1452
|
-
5: "F",
|
|
1453
|
-
6: "G",
|
|
1454
|
-
7: "H",
|
|
1455
|
-
8: "I",
|
|
1456
|
-
9: "J",
|
|
1457
|
-
10: "K",
|
|
1458
|
-
11: "L",
|
|
1459
|
-
12: "M",
|
|
1460
|
-
13: "N",
|
|
1461
|
-
14: "O",
|
|
1462
|
-
15: "P",
|
|
1463
|
-
16: "Q",
|
|
1464
|
-
17: "R",
|
|
1465
|
-
18: "S",
|
|
1466
|
-
19: "T"
|
|
1467
|
-
};
|
|
1468
|
-
var setSequenceValue = (props, sequenceProps) => {
|
|
1469
|
-
const { key, variable, value, scaling, index, scalingVariable } = props;
|
|
1470
|
-
sequenceProps.sequence[key] = {
|
|
1471
|
-
key,
|
|
1472
|
-
decimal: ~~(value * 100) / 100,
|
|
1473
|
-
val: ~~value,
|
|
1474
|
-
scaling,
|
|
1475
|
-
index,
|
|
1476
|
-
scalingVariable,
|
|
1477
|
-
variable
|
|
1478
|
-
};
|
|
1479
|
-
sequenceProps.scales[key] = scaling;
|
|
1480
|
-
const varUnit = VIEWPORT_UNITS.has(sequenceProps.unit) ? "rem" : sequenceProps.unit;
|
|
1481
|
-
sequenceProps.vars[variable] = scaling + varUnit;
|
|
1482
|
-
};
|
|
1483
|
-
var getFnPrefixAndValue = (val) => {
|
|
1484
|
-
if (!val.includes("(")) return val;
|
|
1485
|
-
const prefix = val.split("(")[0];
|
|
1486
|
-
const value = val.slice(val.indexOf("(") + 1, val.lastIndexOf(")"));
|
|
1487
|
-
return [prefix, value];
|
|
1488
|
-
};
|
|
1489
|
-
var VIEWPORT_UNITS = /* @__PURE__ */ new Set(["vw", "vh", "vmin", "vmax", "svw", "svh", "lvw", "lvh", "dvw", "dvh"]);
|
|
1490
|
-
var setScalingVar = (key, sequenceProps) => {
|
|
1491
|
-
const { base, type, unit: rawUnit } = sequenceProps;
|
|
1492
|
-
const unit2 = VIEWPORT_UNITS.has(rawUnit) ? "rem" : rawUnit;
|
|
1493
|
-
const defaultVal = (isScalingUnit(unit2) ? 1 : base) + unit2;
|
|
1494
|
-
if (key === 0) return defaultVal;
|
|
1495
|
-
const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
|
|
1496
|
-
const prefix = "--" + vp + (type && type.replace(".", "-"));
|
|
1497
|
-
const ratioVar = `${prefix}-ratio`;
|
|
1498
|
-
if (key > 0) {
|
|
1499
|
-
const prevLetterKey = numToLetterMap[key - 1];
|
|
1500
|
-
return `calc(var(${prefix}-${prevLetterKey}) * var(${ratioVar}))`;
|
|
1501
|
-
}
|
|
1502
|
-
if (key < 0) {
|
|
1503
|
-
const nextLetterKey = numToLetterMap[key + 1];
|
|
1504
|
-
const absKey = Math.abs(key);
|
|
1505
|
-
const phiPow = Math.pow(PHI, 2 * absKey);
|
|
1506
|
-
const prevAscKey = numToLetterMap[absKey];
|
|
1507
|
-
if (prevAscKey) {
|
|
1508
|
-
return `max(calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar})), calc(var(${prefix}-${prevAscKey}) / ${phiPow.toFixed(4)}))`;
|
|
1509
|
-
}
|
|
1510
|
-
return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`;
|
|
1511
|
-
}
|
|
1512
|
-
};
|
|
1513
|
-
var setSubScalingVar = (index, arr, variable, sequenceProps) => {
|
|
1514
|
-
const { type } = sequenceProps;
|
|
1515
|
-
const skipMiddle = index === 2 && arr.length === 2;
|
|
1516
|
-
const indexMapWithLength = skipMiddle ? index + 1 : index;
|
|
1517
|
-
const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
|
|
1518
|
-
const prefix = "--" + vp + (type && type.replace(".", "-"));
|
|
1519
|
-
const subRatioVarPrefix = `${prefix}-sub-ratio-`;
|
|
1520
|
-
return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`;
|
|
1521
|
-
};
|
|
1522
|
-
var getSubratioDifference = (base, ratio) => {
|
|
1523
|
-
const diff = base * ratio - base;
|
|
1524
|
-
const subRatio = diff / 1.618;
|
|
1525
|
-
const first = base * ratio - subRatio;
|
|
1526
|
-
const second = base + subRatio;
|
|
1527
|
-
const middle = (first + second) / 2;
|
|
1528
|
-
return [first, middle, second];
|
|
1529
|
-
};
|
|
1530
|
-
var getSubratio = (base, ratio) => {
|
|
1531
|
-
return getSubratioDifference(base, ratio).map((v) => v / base);
|
|
1532
|
-
};
|
|
1533
|
-
var generateSubSequence = (props, sequenceProps) => {
|
|
1534
|
-
const { key, base, value, ratio, variable, index } = props;
|
|
1535
|
-
const next = value * ratio;
|
|
1536
|
-
const diffRounded = ~~next - ~~value;
|
|
1537
|
-
let arr;
|
|
1538
|
-
const [first, middle, second] = getSubratioDifference(value, ratio);
|
|
1539
|
-
if (diffRounded > 16) arr = [first, middle, second];
|
|
1540
|
-
else arr = [first, second];
|
|
1541
|
-
arr.forEach((v, k) => {
|
|
1542
|
-
const scaling = ~~(v / base * 1e3) / 1e3;
|
|
1543
|
-
const newVar = variable + (k + 1);
|
|
1544
|
-
const newIndex = index + (k + 1) / 10;
|
|
1545
|
-
const scalingVariable = setSubScalingVar(
|
|
1546
|
-
k + 1,
|
|
1547
|
-
arr,
|
|
1548
|
-
variable,
|
|
1549
|
-
sequenceProps
|
|
1550
|
-
);
|
|
1551
|
-
const props2 = {
|
|
1552
|
-
key: key + (k + 1),
|
|
1553
|
-
variable: newVar,
|
|
1554
|
-
value: v,
|
|
1555
|
-
scaling,
|
|
1556
|
-
scalingVariable,
|
|
1557
|
-
index: newIndex
|
|
1558
|
-
};
|
|
1559
|
-
setSequenceValue(props2, sequenceProps);
|
|
1560
|
-
});
|
|
1561
|
-
};
|
|
1562
|
-
var PHI = 1.618;
|
|
1563
|
-
var switchSequenceOnNegative = (key, base, ratio) => {
|
|
1564
|
-
if (key >= 0) return base * Math.pow(ratio, key);
|
|
1565
|
-
const absKey = Math.abs(key);
|
|
1566
|
-
const current = base * Math.pow(ratio, key);
|
|
1567
|
-
const normalized = base * Math.pow(ratio, absKey) / Math.pow(PHI, 2 * absKey);
|
|
1568
|
-
return Math.max(current, normalized);
|
|
1569
|
-
};
|
|
1570
|
-
var generateSequence = (sequenceProps) => {
|
|
1571
|
-
const { type, base, ratio, range, subSequence } = sequenceProps;
|
|
1572
|
-
const n = Math.abs(range[0]) + Math.abs(range[1]);
|
|
1573
|
-
const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
|
|
1574
|
-
const prefix = "--" + vp + (type && type.replace(".", "-")) + "-";
|
|
1575
|
-
for (let i = 0; i <= n; i++) {
|
|
1576
|
-
const key = range[1] - i;
|
|
1577
|
-
const letterKey = numToLetterMap[key];
|
|
1578
|
-
const value = switchSequenceOnNegative(key, base, ratio);
|
|
1579
|
-
const scaling = ~~(value / base * 100) / 100;
|
|
1580
|
-
const variable = prefix + letterKey;
|
|
1581
|
-
const scalingVariable = setScalingVar(key, sequenceProps);
|
|
1582
|
-
const props = {
|
|
1583
|
-
key: letterKey,
|
|
1584
|
-
variable,
|
|
1585
|
-
value,
|
|
1586
|
-
base,
|
|
1587
|
-
scaling,
|
|
1588
|
-
scalingVariable,
|
|
1589
|
-
ratio,
|
|
1590
|
-
index: key
|
|
1591
|
-
};
|
|
1592
|
-
setSequenceValue(props, sequenceProps);
|
|
1593
|
-
if (subSequence) generateSubSequence(props, sequenceProps);
|
|
1594
|
-
}
|
|
1595
|
-
return sequenceProps;
|
|
1596
|
-
};
|
|
1597
|
-
var generateSequencePosition = (sequenceProps, position = 0) => {
|
|
1598
|
-
const { type, base, ratio, subSequence } = sequenceProps;
|
|
1599
|
-
const letterKey = isString(position) ? position : numToLetterMap[position];
|
|
1600
|
-
const index = isString(position) ? Object.entries(numToLetterMap).find(
|
|
1601
|
-
([, value2]) => value2 === position
|
|
1602
|
-
)?.[0] : position;
|
|
1603
|
-
if (!letterKey) {
|
|
1604
|
-
console.warn(`Position ${position} is out of range in numToLetterMap`);
|
|
1605
|
-
return null;
|
|
1606
|
-
}
|
|
1607
|
-
const result = {
|
|
1608
|
-
sequence: {},
|
|
1609
|
-
scales: {},
|
|
1610
|
-
vars: {},
|
|
1611
|
-
...sequenceProps
|
|
1612
|
-
};
|
|
1613
|
-
const value = base * Math.pow(ratio, index);
|
|
1614
|
-
const scaling = ~~(value / base * 100) / 100;
|
|
1615
|
-
const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
|
|
1616
|
-
const prefix = "--" + vp + (type && type.replace(".", "-")) + "-";
|
|
1617
|
-
const variable = prefix + letterKey;
|
|
1618
|
-
const scalingVariable = setScalingVar(index, sequenceProps);
|
|
1619
|
-
const props = {
|
|
1620
|
-
key: letterKey,
|
|
1621
|
-
variable,
|
|
1622
|
-
value,
|
|
1623
|
-
base,
|
|
1624
|
-
scaling,
|
|
1625
|
-
scalingVariable,
|
|
1626
|
-
ratio,
|
|
1627
|
-
index
|
|
1628
|
-
};
|
|
1629
|
-
setSequenceValue(props, result);
|
|
1630
|
-
if (subSequence) {
|
|
1631
|
-
generateSubSequence(props, result);
|
|
1632
|
-
}
|
|
1633
|
-
return result;
|
|
1634
|
-
};
|
|
1635
|
-
var getSequenceValue = (value = "A", sequenceProps) => {
|
|
1636
|
-
const CONFIG2 = getActiveConfig();
|
|
1637
|
-
const { unit: UNIT } = CONFIG2;
|
|
1638
|
-
if (isString(value) && isCSSVar(value)) return `var(${value})`;
|
|
1639
|
-
const { sequence: sequence2, unit: unit2 = UNIT.default, useVariable } = sequenceProps;
|
|
1640
|
-
const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
|
|
1641
|
-
const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
|
|
1642
|
-
const hasUnits = CSS_UNITS.some((unit3) => value.includes(unit3));
|
|
1643
|
-
if (hasUnits || !startsWithDashOrLetter) return value;
|
|
1644
|
-
const skipArr = [
|
|
1645
|
-
"none",
|
|
1646
|
-
"auto",
|
|
1647
|
-
"max-content",
|
|
1648
|
-
"min-content",
|
|
1649
|
-
"fit-content",
|
|
1650
|
-
"inherit",
|
|
1651
|
-
"initial",
|
|
1652
|
-
"unset",
|
|
1653
|
-
"revert",
|
|
1654
|
-
"revert-layer"
|
|
1655
|
-
];
|
|
1656
|
-
if (skipArr.includes(value)) return value;
|
|
1657
|
-
const vp = sequenceProps.varPrefix ? sequenceProps.varPrefix + "-" : "";
|
|
1658
|
-
const prefix = `--${vp}${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
|
|
1659
|
-
const letterVal = value.toUpperCase();
|
|
1660
|
-
const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
|
|
1661
|
-
let absValue = isNegative ? letterVal.slice(1) : letterVal;
|
|
1662
|
-
let mediaName = "";
|
|
1663
|
-
if (absValue.includes("_")) {
|
|
1664
|
-
mediaName = "_" + absValue.split("_")[1].toLowerCase();
|
|
1665
|
-
absValue = absValue.split("_")[0];
|
|
1666
|
-
}
|
|
1667
|
-
const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
|
|
1668
|
-
if (absValue.includes("+")) {
|
|
1669
|
-
const [first, second] = absValue.split("+");
|
|
1670
|
-
const joint = `${varValue(first)} + ${varValue(second)}`;
|
|
1671
|
-
return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
|
|
1672
|
-
} else if (absValue.includes("*")) {
|
|
1673
|
-
const [first, second] = absValue.split("*");
|
|
1674
|
-
const joint = `${varValue(first)} * ${varValue(second)}`;
|
|
1675
|
-
return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
|
|
1676
|
-
} else if (absValue.includes("-")) {
|
|
1677
|
-
const [first, second] = absValue.split("-");
|
|
1678
|
-
const joint = `${varValue(first)} - ${varValue(second)}`;
|
|
1679
|
-
return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
|
|
1680
|
-
}
|
|
1681
|
-
if (!sequence2[absValue] && absValue.length === 2) {
|
|
1682
|
-
if (CONFIG2.verbose)
|
|
1683
|
-
console.warn(
|
|
1684
|
-
absValue,
|
|
1685
|
-
"- value is not found because `subSequence` is set to false"
|
|
1686
|
-
);
|
|
1687
|
-
absValue = absValue.slice(0, 1);
|
|
1688
|
-
}
|
|
1689
|
-
if (useVariable || CONFIG2.useVariable) {
|
|
1690
|
-
const varValue2 = `var(${prefix}${absValue}${mediaName})`;
|
|
1691
|
-
return isNegative ? `calc(${varValue2} * -1)` : varValue2;
|
|
1692
|
-
}
|
|
1693
|
-
const sequenceItem = sequence2 ? sequence2[absValue] : null;
|
|
1694
|
-
if (!sequenceItem) return console.warn("can't find", sequence2, absValue);
|
|
1695
|
-
if (unit2 === "ms" || unit2 === "s") {
|
|
1696
|
-
return isNegative + sequenceItem.val + unit2;
|
|
1697
|
-
}
|
|
1698
|
-
return isNegative + sequenceItem.scaling + unit2;
|
|
1699
|
-
};
|
|
1700
|
-
var getSequenceValueBySymbols = (value, sequenceProps) => {
|
|
1701
|
-
const mathArr = ["+", "-", "*", "/", ","].filter(
|
|
1702
|
-
(v) => value.includes(v + " ")
|
|
1703
|
-
);
|
|
1704
|
-
if (!mathArr.length) return value;
|
|
1705
|
-
const symbolRegex = /(\s*[+\-*/,]\s*)/;
|
|
1706
|
-
const tokens = value.split(symbolRegex);
|
|
1707
|
-
return tokens.map((token) => {
|
|
1708
|
-
const trimmed = token.trim();
|
|
1709
|
-
if (!trimmed || ["+", "-", "*", "/", ","].includes(trimmed)) return token;
|
|
1710
|
-
return getSequenceValue(trimmed, sequenceProps);
|
|
1711
|
-
}).join("");
|
|
1712
|
-
};
|
|
1713
|
-
var getSequenceValuePropertyPair = (value, propertyName, sequenceProps, fnPrefix) => {
|
|
1714
|
-
if (typeof value !== "string") {
|
|
1715
|
-
const CONFIG2 = getActiveConfig();
|
|
1716
|
-
if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
|
|
1717
|
-
return { [propertyName]: value };
|
|
1718
|
-
}
|
|
1719
|
-
if (value === "-" || value === "") return {};
|
|
1720
|
-
if (!fnPrefix && value.includes("(")) {
|
|
1721
|
-
const fnArr = getFnPrefixAndValue(value);
|
|
1722
|
-
fnPrefix = fnArr[0];
|
|
1723
|
-
value = fnArr[1];
|
|
1724
|
-
}
|
|
1725
|
-
const mathArr = ["+", "-", "*", "/", ","].filter(
|
|
1726
|
-
(v) => value.includes(v + " ")
|
|
1727
|
-
);
|
|
1728
|
-
if (mathArr.length) {
|
|
1729
|
-
value = getSequenceValueBySymbols(value, sequenceProps);
|
|
1730
|
-
} else value = getSequenceValue(value, sequenceProps);
|
|
1731
|
-
return { [propertyName]: fnPrefix ? `${fnPrefix}(${value})` : value };
|
|
1732
|
-
};
|
|
1733
|
-
var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
|
|
1734
|
-
var findHeadings = (propertyNames) => {
|
|
1735
|
-
const { h1Matches, sequence: sequence2 } = propertyNames;
|
|
1736
|
-
return new Array(6).fill(null).map((_, i) => {
|
|
1737
|
-
const findLetter = findHeadingLetter(h1Matches, i);
|
|
1738
|
-
return sequence2[findLetter];
|
|
1739
|
-
});
|
|
1740
|
-
};
|
|
1741
|
-
|
|
1742
|
-
// src/utils/var.js
|
|
1743
|
-
init_utils();
|
|
1744
|
-
var setVariables = (result, key) => {
|
|
1745
|
-
const CONFIG2 = getActiveConfig();
|
|
1746
|
-
const { cssVars: CSS_VARS } = CONFIG2;
|
|
1747
|
-
if (isObjectLike(result.value)) {
|
|
1748
|
-
} else {
|
|
1749
|
-
CSS_VARS[result.var] = result.value;
|
|
1750
|
-
}
|
|
1751
|
-
};
|
|
1752
|
-
var applySequenceGlobalVars = (vars2, obj, options) => {
|
|
1753
|
-
const CONFIG2 = getActiveConfig();
|
|
1754
|
-
const { unit: UNIT } = CONFIG2;
|
|
1755
|
-
const unit2 = obj.unit || UNIT.default;
|
|
1756
|
-
const { base, ratio, type } = obj;
|
|
1757
|
-
const vp = obj.varPrefix ? obj.varPrefix + "-" : "";
|
|
1758
|
-
const prefix = "--" + vp + (type && type.replace(".", "-"));
|
|
1759
|
-
vars2[`${prefix}-base`] = base;
|
|
1760
|
-
vars2[`${prefix}-unit`] = unit2;
|
|
1761
|
-
const ratioVar = `${prefix}-ratio`;
|
|
1762
|
-
vars2[ratioVar] = ratio;
|
|
1763
|
-
const [first, middle, second] = getSubratio(base, ratio);
|
|
1764
|
-
vars2[`${prefix}-sub-ratio-1`] = `calc(var(${prefix}-ratio) * ${first / ratio})`;
|
|
1765
|
-
vars2[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
|
|
1766
|
-
vars2[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
|
|
1767
|
-
};
|
|
1768
|
-
var VIEWPORT_UNITS2 = /* @__PURE__ */ new Set(["vw", "vh", "vmin", "vmax", "svw", "svh", "lvw", "lvh", "dvw", "dvh"]);
|
|
1769
|
-
var applySequenceVars = (FACTORY2, options = {}) => {
|
|
1770
|
-
const CONFIG2 = getActiveConfig();
|
|
1771
|
-
const { unit: UNIT, timing: TIMING, cssVars: CSS_VARS } = CONFIG2;
|
|
1772
|
-
const rawUnit = FACTORY2.unit || UNIT.default;
|
|
1773
|
-
const unit2 = VIEWPORT_UNITS2.has(rawUnit) ? "rem" : rawUnit;
|
|
1774
|
-
const { mediaRegenerate, sequence: sequence2, scales } = FACTORY2;
|
|
1775
|
-
if (!mediaRegenerate) {
|
|
1776
|
-
applySequenceGlobalVars(CSS_VARS, FACTORY2, options);
|
|
1777
|
-
}
|
|
1778
|
-
for (const key in sequence2) {
|
|
1779
|
-
const item = sequence2[key];
|
|
1780
|
-
const value = (FACTORY2.type === TIMING.type ? sequence2[key].val : scales[key]) + unit2;
|
|
1781
|
-
if (!mediaRegenerate) {
|
|
1782
|
-
CSS_VARS[item.variable + "_default"] = value;
|
|
1783
|
-
CSS_VARS[item.variable] = item.scalingVariable;
|
|
1784
|
-
continue;
|
|
1785
|
-
}
|
|
1786
|
-
if (options.useDefault === false) {
|
|
1787
|
-
CSS_VARS[item.variable] = value;
|
|
1788
|
-
} else {
|
|
1789
|
-
CSS_VARS[item.variable + "_default"] = value;
|
|
1790
|
-
CSS_VARS[item.variable] = `var(${item.variable + "_default"})`;
|
|
1791
|
-
}
|
|
1792
|
-
}
|
|
1793
|
-
};
|
|
1794
|
-
var applyMediaSequenceVars = (FACTORY2, media2, options = {}) => {
|
|
1795
|
-
const CONFIG2 = getActiveConfig();
|
|
1796
|
-
const { unit: UNIT, media: MEDIA, cssVars: CSS_VARS } = CONFIG2;
|
|
1797
|
-
const mediaName = media2.slice(1);
|
|
1798
|
-
const mediaConfig = FACTORY2[media2];
|
|
1799
|
-
const rawMediaUnit = mediaConfig.unit || FACTORY2.unit || UNIT.default;
|
|
1800
|
-
const unit2 = VIEWPORT_UNITS2.has(rawMediaUnit) ? "rem" : rawMediaUnit;
|
|
1801
|
-
const { mediaRegenerate } = FACTORY2;
|
|
1802
|
-
const { sequence: sequence2, scales } = mediaConfig;
|
|
1803
|
-
const query = MEDIA[mediaName];
|
|
1804
|
-
if (!query && CONFIG2.verbose) console.warn("Can't find media query ", query);
|
|
1805
|
-
if (!mediaRegenerate) {
|
|
1806
|
-
let underMediaQuery = CSS_VARS[`@media ${query}`];
|
|
1807
|
-
if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {};
|
|
1808
|
-
applySequenceGlobalVars(underMediaQuery, mediaConfig, options);
|
|
1809
|
-
const parentUnit = FACTORY2.unit || UNIT.default;
|
|
1810
|
-
if (unit2 !== parentUnit && sequence2) {
|
|
1811
|
-
for (const key in sequence2) {
|
|
1812
|
-
const item = sequence2[key];
|
|
1813
|
-
const value = scales[key] + unit2;
|
|
1814
|
-
underMediaQuery[item.variable + "_default"] = value;
|
|
1815
|
-
underMediaQuery[item.variable] = value;
|
|
1816
|
-
}
|
|
1817
|
-
}
|
|
1818
|
-
return;
|
|
1819
|
-
}
|
|
1820
|
-
for (const key in sequence2) {
|
|
1821
|
-
const item = sequence2[key];
|
|
1822
|
-
const value = (isScalingUnit(unit2) ? scales[key] : sequence2[key].val) + unit2;
|
|
1823
|
-
if (!query && CONFIG2.verbose) console.warn("Can't find query ", query);
|
|
1824
|
-
let underMediaQuery = CSS_VARS[`@media ${query}`];
|
|
1825
|
-
if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {};
|
|
1826
|
-
underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
|
|
1827
|
-
CSS_VARS[item.variable + "_" + mediaName] = value;
|
|
1828
|
-
}
|
|
1829
|
-
};
|
|
1830
|
-
|
|
1831
|
-
// src/utils/sprite.js
|
|
1832
|
-
init_utils();
|
|
1833
|
-
var isDev = isNotProduction();
|
|
1834
|
-
var generateSprite = (icons2) => {
|
|
1835
|
-
const CONFIG2 = getActiveConfig();
|
|
1836
|
-
let sprite = "";
|
|
1837
|
-
for (const key in icons2) {
|
|
1838
|
-
if (CONFIG2.__svgCache[key]) continue;
|
|
1839
|
-
else CONFIG2.__svgCache[key] = true;
|
|
1840
|
-
sprite += icons2[key];
|
|
1841
|
-
}
|
|
1842
|
-
return sprite;
|
|
1843
|
-
};
|
|
1844
|
-
var parseRootAttributes = (htmlString) => {
|
|
1845
|
-
const val = htmlString.default || htmlString;
|
|
1846
|
-
if (!isString(val)) {
|
|
1847
|
-
if (isDev) console.warn("parseRootAttributes:", val, "is not a string");
|
|
1848
|
-
return;
|
|
1849
|
-
}
|
|
1850
|
-
const match = val.match(/<svg\s+(.*?)>/);
|
|
1851
|
-
if (!match || !match[1]) {
|
|
1852
|
-
return {};
|
|
1853
|
-
}
|
|
1854
|
-
const attrString = match[1];
|
|
1855
|
-
const attrs = attrString.match(
|
|
1856
|
-
/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
|
|
1857
|
-
);
|
|
1858
|
-
return attrs.reduce((acc, attr) => {
|
|
1859
|
-
const [key, value] = attr.split("=");
|
|
1860
|
-
acc[key] = value.replace(/['"]/g, "");
|
|
1861
|
-
return acc;
|
|
1862
|
-
}, {});
|
|
1863
|
-
};
|
|
1864
|
-
var replaceIdsAndUrls = (code, key) => {
|
|
1865
|
-
const idRegex = /id="([^"]*)"/;
|
|
1866
|
-
const urlRegex = /url\(#([^)]*)\)/g;
|
|
1867
|
-
const matches = code.match(/id="([^"]*)"/g);
|
|
1868
|
-
let replacedCode = code;
|
|
1869
|
-
if (isArray(matches)) {
|
|
1870
|
-
matches.forEach(() => {
|
|
1871
|
-
const randomKey = Math.floor(Math.random() * 1e5);
|
|
1872
|
-
replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
|
|
1873
|
-
});
|
|
1874
|
-
}
|
|
1875
|
-
return replacedCode;
|
|
1876
|
-
};
|
|
1877
|
-
var convertSvgToSymbol = (key, code) => {
|
|
1878
|
-
const extractAttrs = parseRootAttributes(code);
|
|
1879
|
-
const { width, height } = extractAttrs;
|
|
1880
|
-
const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`;
|
|
1881
|
-
const xmlns = "http://www.w3.org/2000/svg";
|
|
1882
|
-
const replacedCode = replaceIdsAndUrls(code, key);
|
|
1883
|
-
let symbol = replacedCode.replace(
|
|
1884
|
-
"<svg",
|
|
1885
|
-
`<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
|
|
1886
|
-
);
|
|
1887
|
-
symbol = symbol.replace(/width="[^"]*"/, "");
|
|
1888
|
-
symbol = symbol.replace(/height="[^"]*"/, "");
|
|
1889
|
-
symbol = symbol.replace("</svg", "</symbol");
|
|
1890
|
-
symbol = expandSvgSelfClosing(symbol);
|
|
1891
|
-
return symbol;
|
|
1892
|
-
};
|
|
1893
|
-
var SVG_VOID_TAGS = "line|circle|ellipse|rect|polyline|polygon|path|stop|use|image";
|
|
1894
|
-
var SVG_SELF_CLOSING_RE = new RegExp(
|
|
1895
|
-
`<(${SVG_VOID_TAGS})\\b([^>]*?)\\s*/>`,
|
|
1896
|
-
"g"
|
|
1897
|
-
);
|
|
1898
|
-
var expandSvgSelfClosing = (str) => str.replace(SVG_SELF_CLOSING_RE, "<$1$2></$1>");
|
|
1899
|
-
|
|
1900
|
-
// src/system/index.js
|
|
1901
|
-
var system_exports = {};
|
|
1902
|
-
__export(system_exports, {
|
|
1903
|
-
appendSVGSprite: () => appendSVGSprite,
|
|
1904
|
-
appendSvgIconsSprite: () => appendSvgIconsSprite,
|
|
1905
|
-
applyDocument: () => applyDocument,
|
|
1906
|
-
applyHeadings: () => applyHeadings,
|
|
1907
|
-
applyReset: () => applyReset,
|
|
1908
|
-
applySpacingSequence: () => applySpacingSequence,
|
|
1909
|
-
applyTimingSequence: () => applyTimingSequence,
|
|
1910
|
-
applyTypographySequence: () => applyTypographySequence,
|
|
1911
|
-
checkIfBoxSize: () => checkIfBoxSize,
|
|
1912
|
-
getColor: () => getColor,
|
|
1913
|
-
getFontFamily: () => getFontFamily,
|
|
1914
|
-
getFontSizeByKey: () => getFontSizeByKey,
|
|
1915
|
-
getMediaColor: () => getMediaColor,
|
|
1916
|
-
getMediaTheme: () => getMediaTheme,
|
|
1917
|
-
getShadow: () => getShadow,
|
|
1918
|
-
getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
|
|
1919
|
-
getSpacingByKey: () => getSpacingByKey,
|
|
1920
|
-
getTheme: () => getTheme,
|
|
1921
|
-
getTimingByKey: () => getTimingByKey,
|
|
1922
|
-
getTimingFunction: () => getTimingFunction,
|
|
1923
|
-
runThroughMedia: () => runThroughMedia,
|
|
1924
|
-
setColor: () => setColor,
|
|
1925
|
-
setFont: () => setFont,
|
|
1926
|
-
setFontFamily: () => setFontFamily,
|
|
1927
|
-
setGradient: () => setGradient,
|
|
1928
|
-
setMediaTheme: () => setMediaTheme,
|
|
1929
|
-
setSVG: () => setSVG,
|
|
1930
|
-
setShadow: () => setShadow,
|
|
1931
|
-
setSvgIcon: () => setSvgIcon,
|
|
1932
|
-
setTheme: () => setTheme,
|
|
1933
|
-
splitSpacedValue: () => splitSpacedValue
|
|
1934
|
-
});
|
|
1935
|
-
|
|
1936
|
-
// src/system/color.js
|
|
1937
|
-
init_utils();
|
|
1938
|
-
var getColor = (value, key, config) => {
|
|
1939
|
-
const CONFIG2 = config || getActiveConfig();
|
|
1940
|
-
if (!isString(value)) {
|
|
1941
|
-
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1942
|
-
return;
|
|
1943
|
-
}
|
|
1944
|
-
if (isCSSVar(value)) return `var(${value})`;
|
|
1945
|
-
if (key && value[key]) value = value[key];
|
|
1946
|
-
let name, alpha, tone;
|
|
1947
|
-
if (isArray(value)) {
|
|
1948
|
-
[name, alpha, tone] = value;
|
|
1949
|
-
} else {
|
|
1950
|
-
const parsed = parseColorToken(value);
|
|
1951
|
-
if (!parsed) {
|
|
1952
|
-
const { color: COLOR2, gradient: GRADIENT2 } = CONFIG2;
|
|
1953
|
-
const directVal = GRADIENT2[value] || COLOR2[value];
|
|
1954
|
-
if (directVal) return CONFIG2.useVariable ? `var(${directVal.var})` : directVal.value;
|
|
1955
|
-
return value;
|
|
1956
|
-
}
|
|
1957
|
-
if (parsed.passthrough) return parsed.passthrough;
|
|
1958
|
-
if (parsed.cssVar) return `var(${parsed.cssVar})`;
|
|
1959
|
-
name = parsed.name;
|
|
1960
|
-
alpha = parsed.alpha;
|
|
1961
|
-
tone = parsed.tone;
|
|
1962
|
-
}
|
|
1963
|
-
const { color: COLOR, gradient: GRADIENT } = CONFIG2;
|
|
1964
|
-
let val = COLOR[name] || GRADIENT[name];
|
|
1965
|
-
if (!val) {
|
|
1966
|
-
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
1967
|
-
return value;
|
|
1968
|
-
}
|
|
1969
|
-
if (key) {
|
|
1970
|
-
if (val[key]) val = val[key];
|
|
1971
|
-
else if (CONFIG2.verbose) console.warn(value, " - does not have ", key);
|
|
1972
|
-
}
|
|
1973
|
-
let rgb = val.rgb;
|
|
1974
|
-
if (!rgb) {
|
|
1975
|
-
return CONFIG2.useVariable ? `var(${val.var})` : val.value;
|
|
1976
|
-
}
|
|
1977
|
-
if (tone && !val[tone]) {
|
|
1978
|
-
rgb = getRgbTone(rgb, tone);
|
|
1979
|
-
val[tone] = { rgb, var: `${val.var}-${tone}` };
|
|
1980
|
-
}
|
|
1981
|
-
if (val[tone]) rgb = val[tone].rgb;
|
|
1982
|
-
if (alpha) return `rgba(${rgb}, ${alpha})`;
|
|
1983
|
-
if (tone) return `rgba(${rgb}, 1)`;
|
|
1984
|
-
return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
|
|
1985
|
-
};
|
|
1986
|
-
var getMediaColor = (value, globalTheme, config) => {
|
|
1987
|
-
const CONFIG2 = config || getActiveConfig();
|
|
1988
|
-
if (!globalTheme) globalTheme = CONFIG2.globalTheme === "auto" ? null : CONFIG2.globalTheme;
|
|
1989
|
-
if (!isString(value)) {
|
|
1990
|
-
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
1991
|
-
return;
|
|
1992
|
-
}
|
|
1993
|
-
if (isCSSVar(value)) return `var(${value})`;
|
|
1994
|
-
let name;
|
|
1995
|
-
if (isArray(value)) {
|
|
1996
|
-
name = value[0];
|
|
1997
|
-
} else {
|
|
1998
|
-
const parsed = parseColorToken(value);
|
|
1999
|
-
if (!parsed) return value;
|
|
2000
|
-
if (parsed.passthrough) return parsed.passthrough;
|
|
2001
|
-
if (parsed.cssVar) return `var(${parsed.cssVar})`;
|
|
2002
|
-
name = parsed.name;
|
|
2003
|
-
}
|
|
2004
|
-
const { color: COLOR, gradient: GRADIENT } = CONFIG2;
|
|
2005
|
-
const val = COLOR[name] || GRADIENT[name];
|
|
2006
|
-
const isObj = isObject(val);
|
|
2007
|
-
if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
|
|
2008
|
-
else if (isObj) {
|
|
2009
|
-
if (CONFIG2.useVariable && val.var) return `var(${val.var})`;
|
|
2010
|
-
if (globalTheme) return getColor(value, `@${globalTheme}`, config);
|
|
2011
|
-
else {
|
|
2012
|
-
const obj = {};
|
|
2013
|
-
for (const mediaName in val) {
|
|
2014
|
-
if (mediaName.charCodeAt(0) !== 64) continue;
|
|
2015
|
-
const query = CONFIG2.media[mediaName.slice(1)];
|
|
2016
|
-
if (!query) continue;
|
|
2017
|
-
const media2 = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
|
|
2018
|
-
obj[media2] = getColor(value, mediaName, config);
|
|
2019
|
-
}
|
|
2020
|
-
return obj;
|
|
2021
|
-
}
|
|
2022
|
-
} else {
|
|
2023
|
-
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
2024
|
-
return value;
|
|
2025
|
-
}
|
|
2026
|
-
};
|
|
2027
|
-
var setColor = (val, key, suffix) => {
|
|
2028
|
-
const CONFIG2 = getActiveConfig();
|
|
2029
|
-
if (isString(val) && isCSSVar(val)) {
|
|
2030
|
-
const rawRef = val.slice(2);
|
|
2031
|
-
val = getColor(rawRef);
|
|
2032
|
-
if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
|
|
2033
|
-
const parts = rawRef.split(" ");
|
|
2034
|
-
let refColor = CONFIG2.color[parts[0]];
|
|
2035
|
-
if (refColor && !refColor.value && !refColor.rgb && (isString(refColor) || isArray(refColor) || isObject(refColor))) {
|
|
2036
|
-
CONFIG2.color[parts[0]] = setColor(refColor, parts[0]);
|
|
2037
|
-
refColor = CONFIG2.color[parts[0]];
|
|
2038
|
-
}
|
|
2039
|
-
if (refColor && refColor.value) {
|
|
2040
|
-
let rgb2 = refColor.rgb;
|
|
2041
|
-
const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
|
|
2042
|
-
const tone = parts[2];
|
|
2043
|
-
if (tone) {
|
|
2044
|
-
rgb2 = getRgbTone(rgb2, tone);
|
|
2045
|
-
}
|
|
2046
|
-
val = `rgba(${rgb2}, ${alpha2})`;
|
|
2047
|
-
} else {
|
|
2048
|
-
const tone = parts[2];
|
|
2049
|
-
const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
|
|
2050
|
-
if (tone) {
|
|
2051
|
-
try {
|
|
2052
|
-
const rgb2 = colorStringToRgbaArray(parts[0]);
|
|
2053
|
-
if (rgb2 && rgb2.length >= 3) {
|
|
2054
|
-
const tonedRgb = getRgbTone(rgb2.slice(0, 3).join(", "), tone);
|
|
2055
|
-
val = `rgba(${tonedRgb}, ${alpha2})`;
|
|
2056
|
-
} else {
|
|
2057
|
-
val = parts[0];
|
|
2058
|
-
}
|
|
2059
|
-
} catch (e) {
|
|
2060
|
-
val = parts[0];
|
|
2061
|
-
}
|
|
2062
|
-
} else {
|
|
2063
|
-
val = parts[0];
|
|
2064
|
-
}
|
|
2065
|
-
}
|
|
2066
|
-
}
|
|
2067
|
-
}
|
|
2068
|
-
if (isArray(val)) {
|
|
2069
|
-
val = { "@light": val[0], "@dark": val[1] };
|
|
2070
|
-
}
|
|
2071
|
-
if (isObject(val)) {
|
|
2072
|
-
const obj = {};
|
|
2073
|
-
for (const variant in val) {
|
|
2074
|
-
obj[variant] = setColor(
|
|
2075
|
-
val[variant],
|
|
2076
|
-
key,
|
|
2077
|
-
variant.slice(0, 1) === "@" ? variant.slice(1) : variant
|
|
2078
|
-
);
|
|
2079
|
-
}
|
|
2080
|
-
if (CONFIG2.useVariable) {
|
|
2081
|
-
const vp2 = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
|
|
2082
|
-
const adaptiveVar = `--${vp2}color-${key}`;
|
|
2083
|
-
let fallbackValue;
|
|
2084
|
-
const schemeValues = {};
|
|
2085
|
-
for (const variant in obj) {
|
|
2086
|
-
if (variant.charCodeAt(0) !== 64) continue;
|
|
2087
|
-
const scheme = variant.slice(1);
|
|
2088
|
-
const entry = obj[variant];
|
|
2089
|
-
const value2 = entry && (entry.value || entry);
|
|
2090
|
-
if (!value2 || typeof value2 !== "string") continue;
|
|
2091
|
-
schemeValues[scheme] = value2;
|
|
2092
|
-
if (scheme === "light" || fallbackValue === void 0) fallbackValue = value2;
|
|
2093
|
-
}
|
|
2094
|
-
if (fallbackValue !== void 0) {
|
|
2095
|
-
CONFIG2.cssVars[adaptiveVar] = fallbackValue;
|
|
2096
|
-
if (!CONFIG2.cssMediaVars) CONFIG2.cssMediaVars = {};
|
|
2097
|
-
for (const scheme in schemeValues) {
|
|
2098
|
-
const sel = `[data-theme="${scheme}"]`;
|
|
2099
|
-
if (!CONFIG2.cssMediaVars[sel]) CONFIG2.cssMediaVars[sel] = {};
|
|
2100
|
-
CONFIG2.cssMediaVars[sel][adaptiveVar] = schemeValues[scheme];
|
|
2101
|
-
if (scheme === "light" || scheme === "dark") {
|
|
2102
|
-
const mq = `@media (prefers-color-scheme: ${scheme})`;
|
|
2103
|
-
if (!CONFIG2.cssMediaVars[mq]) CONFIG2.cssMediaVars[mq] = {};
|
|
2104
|
-
CONFIG2.cssMediaVars[mq][adaptiveVar] = schemeValues[scheme];
|
|
2105
|
-
}
|
|
2106
|
-
}
|
|
2107
|
-
obj.var = adaptiveVar;
|
|
2108
|
-
}
|
|
2109
|
-
}
|
|
2110
|
-
return obj;
|
|
2111
|
-
}
|
|
2112
|
-
const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
|
|
2113
|
-
const CSSVar = `--${vp}color-${key}` + (suffix ? `-${suffix}` : "");
|
|
2114
|
-
let resolvedVal = val.value || val;
|
|
2115
|
-
if (isString(resolvedVal) && resolvedVal.includes(".") && !resolvedVal.includes("(")) {
|
|
2116
|
-
const [colorRef, alphaStr] = resolvedVal.split(".");
|
|
2117
|
-
const refColor = CONFIG2.color[colorRef];
|
|
2118
|
-
if (refColor && refColor.rgb) {
|
|
2119
|
-
resolvedVal = `rgba(${refColor.rgb}, ${parseFloat("0." + alphaStr) || 1})`;
|
|
2120
|
-
}
|
|
2121
|
-
}
|
|
2122
|
-
if (isString(resolvedVal) && !resolvedVal.includes("(") && !resolvedVal.startsWith("#")) {
|
|
2123
|
-
const parsed = parseColorToken(resolvedVal);
|
|
2124
|
-
if (parsed && parsed.name && !parsed.passthrough && !parsed.cssVar) {
|
|
2125
|
-
const refColor = CONFIG2.color[parsed.name];
|
|
2126
|
-
if (refColor && !refColor.value && !refColor.rgb && (isString(refColor) || isArray(refColor) || isObject(refColor))) {
|
|
2127
|
-
CONFIG2.color[parsed.name] = setColor(refColor, parsed.name);
|
|
2128
|
-
}
|
|
2129
|
-
const baseColor = CONFIG2.color[parsed.name];
|
|
2130
|
-
if (baseColor && baseColor.rgb) {
|
|
2131
|
-
let rgb2 = baseColor.rgb;
|
|
2132
|
-
if (parsed.tone) rgb2 = getRgbTone(rgb2, parsed.tone);
|
|
2133
|
-
const alphaVal = parsed.alpha ? parseFloat(parsed.alpha) : 1;
|
|
2134
|
-
resolvedVal = `rgba(${rgb2}, ${alphaVal})`;
|
|
2135
|
-
}
|
|
2136
|
-
}
|
|
2137
|
-
}
|
|
2138
|
-
const colorArr = colorStringToRgbaArray(resolvedVal);
|
|
2139
|
-
const [r, g, b, a = 1] = colorArr;
|
|
2140
|
-
const alpha = parseFloat(a.toFixed(2));
|
|
2141
|
-
const rgb = `${r}, ${g}, ${b}`;
|
|
2142
|
-
const value = `rgba(${rgb}, ${alpha})`;
|
|
2143
|
-
if (CONFIG2.useVariable) {
|
|
2144
|
-
CONFIG2.cssVars[CSSVar] = value;
|
|
2145
|
-
}
|
|
2146
|
-
return {
|
|
2147
|
-
var: CSSVar,
|
|
2148
|
-
rgb,
|
|
2149
|
-
alpha,
|
|
2150
|
-
value
|
|
2151
|
-
};
|
|
2152
|
-
};
|
|
2153
|
-
var setGradient = (val, key, suffix) => {
|
|
2154
|
-
const CONFIG2 = getActiveConfig();
|
|
2155
|
-
if (isString(val) && isCSSVar(val)) val = getColor(val.slice(2));
|
|
2156
|
-
if (isArray(val)) {
|
|
2157
|
-
return {
|
|
2158
|
-
"@light": setGradient(val[0], key, "light"),
|
|
2159
|
-
"@dark": setGradient(val[0], key, "dark")
|
|
2160
|
-
};
|
|
2161
|
-
}
|
|
2162
|
-
if (isObject(val)) {
|
|
2163
|
-
const obj = {};
|
|
2164
|
-
for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
|
|
2165
|
-
return obj;
|
|
2166
|
-
}
|
|
2167
|
-
const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
|
|
2168
|
-
const CSSVar = `--${vp}gradient-${key}` + (suffix ? `-${suffix}` : "");
|
|
2169
|
-
if (CONFIG2.useVariable) {
|
|
2170
|
-
CONFIG2.cssVars[CSSVar] = val.value || val;
|
|
2171
|
-
}
|
|
2172
|
-
return {
|
|
2173
|
-
var: CSSVar,
|
|
2174
|
-
value: val.value || val
|
|
2175
|
-
};
|
|
2176
|
-
};
|
|
2177
|
-
|
|
2178
|
-
// src/system/theme.js
|
|
2179
|
-
init_utils();
|
|
2180
|
-
var CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
|
|
2181
|
-
"black",
|
|
2182
|
-
"white",
|
|
2183
|
-
"red",
|
|
2184
|
-
"green",
|
|
2185
|
-
"blue",
|
|
2186
|
-
"yellow",
|
|
2187
|
-
"orange",
|
|
2188
|
-
"purple",
|
|
2189
|
-
"pink",
|
|
2190
|
-
"brown",
|
|
2191
|
-
"gray",
|
|
2192
|
-
"grey",
|
|
2193
|
-
"cyan",
|
|
2194
|
-
"magenta",
|
|
2195
|
-
"lime",
|
|
2196
|
-
"olive",
|
|
2197
|
-
"navy",
|
|
2198
|
-
"teal",
|
|
2199
|
-
"aqua",
|
|
2200
|
-
"maroon",
|
|
2201
|
-
"silver",
|
|
2202
|
-
"fuchsia",
|
|
2203
|
-
"transparent",
|
|
2204
|
-
"currentColor",
|
|
2205
|
-
"currentcolor",
|
|
2206
|
-
"inherit",
|
|
2207
|
-
"initial",
|
|
2208
|
-
"unset",
|
|
2209
|
-
"none",
|
|
2210
|
-
"aliceblue",
|
|
2211
|
-
"antiquewhite",
|
|
2212
|
-
"aquamarine",
|
|
2213
|
-
"azure",
|
|
2214
|
-
"beige",
|
|
2215
|
-
"bisque",
|
|
2216
|
-
"blanchedalmond",
|
|
2217
|
-
"blueviolet",
|
|
2218
|
-
"burlywood",
|
|
2219
|
-
"cadetblue",
|
|
2220
|
-
"chartreuse",
|
|
2221
|
-
"chocolate",
|
|
2222
|
-
"coral",
|
|
2223
|
-
"cornflowerblue",
|
|
2224
|
-
"cornsilk",
|
|
2225
|
-
"crimson",
|
|
2226
|
-
"darkblue",
|
|
2227
|
-
"darkcyan",
|
|
2228
|
-
"darkgoldenrod",
|
|
2229
|
-
"darkgray",
|
|
2230
|
-
"darkgreen",
|
|
2231
|
-
"darkgrey",
|
|
2232
|
-
"darkkhaki",
|
|
2233
|
-
"darkmagenta",
|
|
2234
|
-
"darkolivegreen",
|
|
2235
|
-
"darkorange",
|
|
2236
|
-
"darkorchid",
|
|
2237
|
-
"darkred",
|
|
2238
|
-
"darksalmon",
|
|
2239
|
-
"darkseagreen",
|
|
2240
|
-
"darkslateblue",
|
|
2241
|
-
"darkslategray",
|
|
2242
|
-
"darkslategrey",
|
|
2243
|
-
"darkturquoise",
|
|
2244
|
-
"darkviolet",
|
|
2245
|
-
"deeppink",
|
|
2246
|
-
"deepskyblue",
|
|
2247
|
-
"dimgray",
|
|
2248
|
-
"dimgrey",
|
|
2249
|
-
"dodgerblue",
|
|
2250
|
-
"firebrick",
|
|
2251
|
-
"floralwhite",
|
|
2252
|
-
"forestgreen",
|
|
2253
|
-
"gainsboro",
|
|
2254
|
-
"ghostwhite",
|
|
2255
|
-
"gold",
|
|
2256
|
-
"goldenrod",
|
|
2257
|
-
"greenyellow",
|
|
2258
|
-
"honeydew",
|
|
2259
|
-
"hotpink",
|
|
2260
|
-
"indianred",
|
|
2261
|
-
"indigo",
|
|
2262
|
-
"ivory",
|
|
2263
|
-
"khaki",
|
|
2264
|
-
"lavender",
|
|
2265
|
-
"lavenderblush",
|
|
2266
|
-
"lawngreen",
|
|
2267
|
-
"lemonchiffon",
|
|
2268
|
-
"lightblue",
|
|
2269
|
-
"lightcoral",
|
|
2270
|
-
"lightcyan",
|
|
2271
|
-
"lightgoldenrodyellow",
|
|
2272
|
-
"lightgray",
|
|
2273
|
-
"lightgreen",
|
|
2274
|
-
"lightgrey",
|
|
2275
|
-
"lightpink",
|
|
2276
|
-
"lightsalmon",
|
|
2277
|
-
"lightseagreen",
|
|
2278
|
-
"lightskyblue",
|
|
2279
|
-
"lightslategray",
|
|
2280
|
-
"lightslategrey",
|
|
2281
|
-
"lightsteelblue",
|
|
2282
|
-
"lightyellow",
|
|
2283
|
-
"limegreen",
|
|
2284
|
-
"linen",
|
|
2285
|
-
"mediumaquamarine",
|
|
2286
|
-
"mediumblue",
|
|
2287
|
-
"mediumorchid",
|
|
2288
|
-
"mediumpurple",
|
|
2289
|
-
"mediumseagreen",
|
|
2290
|
-
"mediumslateblue",
|
|
2291
|
-
"mediumspringgreen",
|
|
2292
|
-
"mediumturquoise",
|
|
2293
|
-
"mediumvioletred",
|
|
2294
|
-
"midnightblue",
|
|
2295
|
-
"mintcream",
|
|
2296
|
-
"mistyrose",
|
|
2297
|
-
"moccasin",
|
|
2298
|
-
"navajowhite",
|
|
2299
|
-
"oldlace",
|
|
2300
|
-
"olivedrab",
|
|
2301
|
-
"orangered",
|
|
2302
|
-
"orchid",
|
|
2303
|
-
"palegoldenrod",
|
|
2304
|
-
"palegreen",
|
|
2305
|
-
"paleturquoise",
|
|
2306
|
-
"palevioletred",
|
|
2307
|
-
"papayawhip",
|
|
2308
|
-
"peachpuff",
|
|
2309
|
-
"peru",
|
|
2310
|
-
"plum",
|
|
2311
|
-
"powderblue",
|
|
2312
|
-
"rosybrown",
|
|
2313
|
-
"royalblue",
|
|
2314
|
-
"saddlebrown",
|
|
2315
|
-
"salmon",
|
|
2316
|
-
"sandybrown",
|
|
2317
|
-
"seagreen",
|
|
2318
|
-
"seashell",
|
|
2319
|
-
"sienna",
|
|
2320
|
-
"skyblue",
|
|
2321
|
-
"slateblue",
|
|
2322
|
-
"slategray",
|
|
2323
|
-
"slategrey",
|
|
2324
|
-
"snow",
|
|
2325
|
-
"springgreen",
|
|
2326
|
-
"steelblue",
|
|
2327
|
-
"tan",
|
|
2328
|
-
"thistle",
|
|
2329
|
-
"tomato",
|
|
2330
|
-
"turquoise",
|
|
2331
|
-
"violet",
|
|
2332
|
-
"wheat",
|
|
2333
|
-
"whitesmoke",
|
|
2334
|
-
"yellowgreen",
|
|
2335
|
-
"rebeccapurple"
|
|
2336
|
-
]);
|
|
2337
|
-
var COLOR_PARAM_TOKENS = ["color", "Color", "background", "Background", "fill", "Fill", "stroke", "Stroke"];
|
|
2338
|
-
var isColorParam = (param) => {
|
|
2339
|
-
for (let i = 0; i < COLOR_PARAM_TOKENS.length; i++) {
|
|
2340
|
-
if (param.includes(COLOR_PARAM_TOKENS[i])) return true;
|
|
2341
|
-
}
|
|
2342
|
-
return false;
|
|
2343
|
-
};
|
|
2344
|
-
var setThemeValue = (theme2) => {
|
|
2345
|
-
const value = {};
|
|
2346
|
-
const { state, media: media2, helpers, ...rest } = theme2;
|
|
2347
|
-
const keys = Object.keys(rest);
|
|
2348
|
-
keys.map((key) => {
|
|
2349
|
-
const conditions = ["color", "Color", "background", "border"];
|
|
2350
|
-
const isColor = conditions.some((k) => key.includes(k));
|
|
2351
|
-
return value[key] = isColor ? getColor(theme2[key]) : theme2[key];
|
|
2352
|
-
});
|
|
2353
|
-
return value;
|
|
2354
|
-
};
|
|
2355
|
-
var getThemeValue = (theme2) => {
|
|
2356
|
-
if (theme2.value) return theme2.value;
|
|
2357
|
-
theme2.value = setThemeValue(theme2);
|
|
2358
|
-
return theme2.value;
|
|
2359
|
-
};
|
|
2360
|
-
var getTheme = (value, modifier) => {
|
|
2361
|
-
const CONFIG2 = getActiveConfig();
|
|
2362
|
-
if (CONFIG2.useVariable) return getMediaTheme(value, modifier);
|
|
2363
|
-
const THEME = CONFIG2.theme;
|
|
2364
|
-
if (isString(value)) {
|
|
2365
|
-
const [theme2, subtheme] = value.split(" ");
|
|
2366
|
-
const isOurTheme = THEME[theme2];
|
|
2367
|
-
if (isOurTheme) {
|
|
2368
|
-
if (!subtheme && !modifier) return getThemeValue(isOurTheme);
|
|
2369
|
-
value = [theme2, subtheme || modifier];
|
|
2370
|
-
}
|
|
2371
|
-
}
|
|
2372
|
-
if (isObjectLike(value) && value[1]) {
|
|
2373
|
-
const themeName = value[0];
|
|
2374
|
-
const subThemeName = value[1];
|
|
2375
|
-
const { helpers, media: media2, state } = THEME[themeName];
|
|
2376
|
-
if (media2 && media2[subThemeName]) return getThemeValue(media2[subThemeName]);
|
|
2377
|
-
if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName]);
|
|
2378
|
-
if (state && state[subThemeName]) return getThemeValue(state[subThemeName]);
|
|
2379
|
-
} else if (isObject(value)) return setThemeValue(value);
|
|
2380
|
-
};
|
|
2381
|
-
var setInverseTheme = (theme2, variant, value) => {
|
|
2382
|
-
if (isObject(variant)) {
|
|
2383
|
-
theme2.variants.inverse.value = setThemeValue(variant);
|
|
2384
|
-
} else if (variant === true) {
|
|
2385
|
-
const { color: color2, background } = value;
|
|
2386
|
-
theme2.variants.inverse = {
|
|
2387
|
-
value: {
|
|
2388
|
-
color: background,
|
|
2389
|
-
background: color2
|
|
2390
|
-
}
|
|
2391
|
-
};
|
|
2392
|
-
}
|
|
2393
|
-
};
|
|
2394
|
-
var setPseudo = (theme2, key, variant, themeValue) => {
|
|
2395
|
-
const result = getTheme(variant);
|
|
2396
|
-
themeValue[`&:${key}`] = result;
|
|
2397
|
-
if (isObject(variant) && !variant.value) variant.value = result;
|
|
2398
|
-
};
|
|
2399
|
-
var setSelectors = (theme2, value) => {
|
|
2400
|
-
const { state } = theme2;
|
|
2401
|
-
if (!state) return;
|
|
2402
|
-
const keys = Object.keys(state);
|
|
2403
|
-
keys.map((key) => {
|
|
2404
|
-
const variant = state[key];
|
|
2405
|
-
setPseudo(theme2, key, variant, value);
|
|
2406
|
-
return theme2;
|
|
2407
|
-
});
|
|
2408
|
-
return theme2;
|
|
2409
|
-
};
|
|
2410
|
-
var setPrefersScheme = (theme2, key, variant, themeValue) => {
|
|
2411
|
-
const result = getTheme(variant);
|
|
2412
|
-
themeValue[`@media (prefers-color-scheme: ${key})`] = result;
|
|
2413
|
-
if (isObject(variant) && !variant.value) variant.value = result;
|
|
2414
|
-
};
|
|
2415
|
-
var setMedia = (theme2, value) => {
|
|
2416
|
-
const { media: media2 } = theme2;
|
|
2417
|
-
if (!media2) return;
|
|
2418
|
-
const keys = Object.keys(media2);
|
|
2419
|
-
keys.map((key) => {
|
|
2420
|
-
const variant = media2[key];
|
|
2421
|
-
if (key === "dark" || key === "light") setPrefersScheme(theme2, key, variant, value);
|
|
2422
|
-
if (key === "inverse") setInverseTheme(theme2, variant, value);
|
|
2423
|
-
return theme2;
|
|
2424
|
-
});
|
|
2425
|
-
return theme2;
|
|
2426
|
-
};
|
|
2427
|
-
var setHelpers = (theme2, value) => {
|
|
2428
|
-
const CONFIG2 = getActiveConfig();
|
|
2429
|
-
const { helpers } = theme2;
|
|
2430
|
-
if (!helpers) return;
|
|
2431
|
-
const keys = Object.keys(helpers);
|
|
2432
|
-
keys.map((key) => {
|
|
2433
|
-
const helper = helpers[key];
|
|
2434
|
-
if (isString(helper)) helpers[key] = CONFIG2.theme[helper];
|
|
2435
|
-
else getThemeValue(helpers[key]);
|
|
2436
|
-
return theme2;
|
|
2437
|
-
});
|
|
2438
|
-
return theme2;
|
|
2439
|
-
};
|
|
2440
|
-
var setTheme = (val, key) => {
|
|
2441
|
-
const CONFIG2 = getActiveConfig();
|
|
2442
|
-
if (CONFIG2.useVariable) return setMediaTheme(val, key);
|
|
2443
|
-
const { state, media: media2, helpers } = val;
|
|
2444
|
-
const value = setThemeValue(val, key);
|
|
2445
|
-
const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
|
|
2446
|
-
const CSSvar = `--${vp}theme-${key}`;
|
|
2447
|
-
setSelectors(val, value);
|
|
2448
|
-
setMedia(val, value);
|
|
2449
|
-
setHelpers(val, value);
|
|
2450
|
-
return { var: CSSvar, value, state, media: media2, helpers };
|
|
2451
|
-
};
|
|
2452
|
-
var generateAutoVars = (schemes, varPrefix, CONFIG2) => {
|
|
2453
|
-
const { cssVars: CSS_VARS } = CONFIG2;
|
|
2454
|
-
if (!CONFIG2.cssMediaVars) CONFIG2.cssMediaVars = {};
|
|
2455
|
-
const MEDIA_VARS = CONFIG2.cssMediaVars;
|
|
2456
|
-
const globalTheme = CONFIG2.globalTheme !== void 0 ? CONFIG2.globalTheme : "auto";
|
|
2457
|
-
const result = {};
|
|
2458
|
-
const allKeys = /* @__PURE__ */ new Set();
|
|
2459
|
-
for (const scheme in schemes) {
|
|
2460
|
-
if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
|
|
2461
|
-
}
|
|
2462
|
-
const brokenSchemes = /* @__PURE__ */ new Set();
|
|
2463
|
-
for (const param of allKeys) {
|
|
2464
|
-
const symb = param.slice(0, 1);
|
|
2465
|
-
if (symb === "@" || symb === "." || symb === ":") continue;
|
|
2466
|
-
if (!isColorParam(param)) continue;
|
|
2467
|
-
for (const scheme in schemes) {
|
|
2468
|
-
if (brokenSchemes.has(scheme)) continue;
|
|
2469
|
-
const val = schemes[scheme]?.[param];
|
|
2470
|
-
if (val === void 0) continue;
|
|
2471
|
-
const color2 = getColor(val, `@${scheme}`);
|
|
2472
|
-
if (color2 === void 0) continue;
|
|
2473
|
-
if (isString(color2) && /^[a-z][a-zA-Z]+$/.test(color2) && !CSS_NAMED_COLORS.has(color2)) {
|
|
2474
|
-
brokenSchemes.add(scheme);
|
|
2475
|
-
}
|
|
2476
|
-
}
|
|
2477
|
-
}
|
|
2478
|
-
for (const param of allKeys) {
|
|
2479
|
-
const symb = param.slice(0, 1);
|
|
2480
|
-
const hasObject = Object.values(schemes).some((s) => isObjectLike(s?.[param]));
|
|
2481
|
-
if (symb === "." && hasObject) {
|
|
2482
|
-
const helperName = param.slice(1);
|
|
2483
|
-
const subSchemes = {};
|
|
2484
|
-
for (const scheme in schemes) {
|
|
2485
|
-
if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
|
|
2486
|
-
}
|
|
2487
|
-
result[param] = generateAutoVars(subSchemes, `${varPrefix}-${helperName}`, CONFIG2);
|
|
2488
|
-
} else if (symb === ":" && hasObject) {
|
|
2489
|
-
const pseudoName = param.replace(/^:+/, "");
|
|
2490
|
-
const subSchemes = {};
|
|
2491
|
-
for (const scheme in schemes) {
|
|
2492
|
-
if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
|
|
2493
|
-
}
|
|
2494
|
-
result[param] = generateAutoVars(subSchemes, `${varPrefix}-${pseudoName}`, CONFIG2);
|
|
2495
|
-
} else if (symb !== "@" && symb !== "." && symb !== ":") {
|
|
2496
|
-
const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
|
|
2497
|
-
const autoVar = `--${vp}theme-${varPrefix}-${param}`;
|
|
2498
|
-
const forced = globalTheme && globalTheme !== "auto" ? String(globalTheme).replace(/^'|'$/g, "") : null;
|
|
2499
|
-
let fallbackColor;
|
|
2500
|
-
for (const scheme in schemes) {
|
|
2501
|
-
if (brokenSchemes.has(scheme)) continue;
|
|
2502
|
-
const val = schemes[scheme]?.[param];
|
|
2503
|
-
if (val === void 0) continue;
|
|
2504
|
-
const color2 = getColor(val, `@${scheme}`);
|
|
2505
|
-
if (color2 === void 0) continue;
|
|
2506
|
-
if (forced && scheme === forced || !forced && (scheme === "light" || fallbackColor === void 0)) {
|
|
2507
|
-
fallbackColor = color2;
|
|
2508
|
-
}
|
|
2509
|
-
const selector = `[data-theme="${scheme}"]`;
|
|
2510
|
-
if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
|
|
2511
|
-
MEDIA_VARS[selector][autoVar] = color2;
|
|
2512
|
-
if (scheme === "dark" || scheme === "light") {
|
|
2513
|
-
const mq = `@media (prefers-color-scheme: ${scheme})`;
|
|
2514
|
-
if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {};
|
|
2515
|
-
MEDIA_VARS[mq][autoVar] = color2;
|
|
2516
|
-
}
|
|
2517
|
-
}
|
|
2518
|
-
if (fallbackColor !== void 0) {
|
|
2519
|
-
CSS_VARS[autoVar] = fallbackColor;
|
|
2520
|
-
}
|
|
2521
|
-
result[param] = `var(${autoVar})`;
|
|
2522
|
-
result[`.${param}`] = { [param]: result[param] };
|
|
2523
|
-
}
|
|
2524
|
-
}
|
|
2525
|
-
if (result.background || result.color || result.backgroundColor) {
|
|
2526
|
-
result[".inversed"] = {
|
|
2527
|
-
color: result.background || result.backgroundColor,
|
|
2528
|
-
background: result.color
|
|
2529
|
-
};
|
|
2530
|
-
}
|
|
2531
|
-
return result;
|
|
2532
|
-
};
|
|
2533
|
-
var setMediaTheme = (val, key, suffix, prefers) => {
|
|
2534
|
-
const CONFIG2 = getActiveConfig();
|
|
2535
|
-
const { cssVars: CSS_VARS } = CONFIG2;
|
|
2536
|
-
const theme2 = { value: val };
|
|
2537
|
-
const isTopLevel = !suffix && !prefers;
|
|
2538
|
-
if (isObjectLike(val)) {
|
|
2539
|
-
if (isTopLevel && CONFIG2.useVariable) {
|
|
2540
|
-
const schemes = {};
|
|
2541
|
-
for (const param in val) {
|
|
2542
|
-
if (param.startsWith("@") && isObjectLike(val[param])) {
|
|
2543
|
-
schemes[param.slice(1)] = val[param];
|
|
2544
|
-
}
|
|
2545
|
-
}
|
|
2546
|
-
if (Object.keys(schemes).length) {
|
|
2547
|
-
const autoResult = generateAutoVars(schemes, key, CONFIG2);
|
|
2548
|
-
Object.assign(theme2, autoResult);
|
|
2549
|
-
}
|
|
2550
|
-
}
|
|
2551
|
-
for (const param in val) {
|
|
2552
|
-
const symb = param.slice(0, 1);
|
|
2553
|
-
const value = val[param];
|
|
2554
|
-
if (symb === "@" || symb === ":" || symb === ".") {
|
|
2555
|
-
const hasPrefers = symb === "@" && param;
|
|
2556
|
-
theme2[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
|
|
2557
|
-
} else if (!isTopLevel) {
|
|
2558
|
-
const color2 = getColor(value, prefers);
|
|
2559
|
-
const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
|
|
2560
|
-
const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
|
|
2561
|
-
const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
|
|
2562
|
-
const CSSVar = `--${vp}theme-${key}${varmetaSuffixName}-${param}`;
|
|
2563
|
-
if (CONFIG2.useVariable) {
|
|
2564
|
-
if (CONFIG2.useThemeSuffixedVars) CSS_VARS[CSSVar] = color2;
|
|
2565
|
-
theme2[param] = `var(${CSSVar})`;
|
|
2566
|
-
} else {
|
|
2567
|
-
theme2[param] = color2;
|
|
2568
|
-
}
|
|
2569
|
-
theme2[`.${param}`] = { [param]: theme2[param] };
|
|
2570
|
-
}
|
|
2571
|
-
}
|
|
2572
|
-
if (!theme2[".inversed"] && (theme2.background || theme2.color || theme2.backgroundColor)) {
|
|
2573
|
-
theme2[".inversed"] = {
|
|
2574
|
-
color: theme2.background || theme2.backgroundColor,
|
|
2575
|
-
background: theme2.color
|
|
2576
|
-
};
|
|
2577
|
-
}
|
|
2578
|
-
}
|
|
2579
|
-
if (isString(val) && isCSSVar(val)) {
|
|
2580
|
-
const THEME = CONFIG2.theme;
|
|
2581
|
-
const value = THEME[val.slice(2)];
|
|
2582
|
-
const getReferenced = getMediaTheme(value, prefers);
|
|
2583
|
-
return getReferenced;
|
|
2584
|
-
}
|
|
2585
|
-
return theme2;
|
|
2586
|
-
};
|
|
2587
|
-
var recursiveTheme = (val) => {
|
|
2588
|
-
const CONFIG2 = getActiveConfig();
|
|
2589
|
-
const obj = {};
|
|
2590
|
-
for (const param in val) {
|
|
2591
|
-
const symb = param.slice(0, 1);
|
|
2592
|
-
if (isObjectLike(val[param])) {
|
|
2593
|
-
if (symb === "@") {
|
|
2594
|
-
continue;
|
|
2595
|
-
} else if (symb === ":") {
|
|
2596
|
-
obj[`&${param}`] = recursiveTheme(val[param]);
|
|
2597
|
-
} else if (symb === ".") {
|
|
2598
|
-
obj[`&${param}`] = recursiveTheme(val[param]);
|
|
2599
|
-
}
|
|
2600
|
-
} else obj[param] = val[param];
|
|
2601
|
-
}
|
|
2602
|
-
return obj;
|
|
2603
|
-
};
|
|
2604
|
-
var findModifierFromArray = (val, modifierArray) => {
|
|
2605
|
-
const currentMod = modifierArray.shift();
|
|
2606
|
-
if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray);
|
|
2607
|
-
return val;
|
|
2608
|
-
};
|
|
2609
|
-
var findModifier = (val, modifier) => {
|
|
2610
|
-
if (isArray(modifier)) return findModifierFromArray(val, modifier);
|
|
2611
|
-
else if (isString(modifier) && val[modifier]) return val[modifier];
|
|
2612
|
-
else return val;
|
|
2613
|
-
};
|
|
2614
|
-
var getMediaTheme = (value, modifier) => {
|
|
2615
|
-
const activeConfig = getActiveConfig();
|
|
2616
|
-
if (isString(value) && isCSSVar(value)) {
|
|
2617
|
-
value = getMediaTheme(value.slice(2));
|
|
2618
|
-
}
|
|
2619
|
-
if (!value || !isString(value)) {
|
|
2620
|
-
if (activeConfig.verbose) {
|
|
2621
|
-
console.warn(`${value} - Theme is not a string`);
|
|
2622
|
-
}
|
|
2623
|
-
return;
|
|
2624
|
-
}
|
|
2625
|
-
const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(" ");
|
|
2626
|
-
let themeValue = activeConfig.theme[themeName];
|
|
2627
|
-
if (themeValue && themeModifiers.length) {
|
|
2628
|
-
themeValue = findModifier(themeValue, themeModifiers);
|
|
2629
|
-
} else if (themeValue && modifier) {
|
|
2630
|
-
themeValue = findModifier(themeValue, modifier);
|
|
2631
|
-
}
|
|
2632
|
-
const resolvedTheme = recursiveTheme(themeValue);
|
|
2633
|
-
return resolvedTheme;
|
|
2634
|
-
};
|
|
2635
|
-
|
|
2636
|
-
// src/system/font.js
|
|
2637
|
-
init_utils();
|
|
2638
|
-
init_utils();
|
|
2639
|
-
var setFont = (val, key) => {
|
|
2640
|
-
const CONFIG2 = getActiveConfig();
|
|
2641
|
-
const CSSvar = `--font-${key}`;
|
|
2642
|
-
if (!val || isArray(val) && !val[0]) return;
|
|
2643
|
-
let fontFace2;
|
|
2644
|
-
if (val.isVariable) {
|
|
2645
|
-
const url = resolveFileUrl(val.url, CONFIG2.files) || val.url;
|
|
2646
|
-
if (isGoogleFontsUrl(url)) {
|
|
2647
|
-
fontFace2 = setFontImport(url);
|
|
2648
|
-
} else {
|
|
2649
|
-
fontFace2 = setCustomFontMedia(key, url, val.fontWeight, {
|
|
2650
|
-
fontStretch: val.fontStretch,
|
|
2651
|
-
fontDisplay: val.fontDisplay || "swap"
|
|
2652
|
-
});
|
|
2653
|
-
}
|
|
2654
|
-
} else if (val[0]) {
|
|
2655
|
-
fontFace2 = getFontFaceEach(key, val, CONFIG2.files);
|
|
2656
|
-
} else {
|
|
2657
|
-
const url = Array.isArray(val.url) ? val.url.map((u) => resolveFileUrl(u, CONFIG2.files) || u) : resolveFileUrl(val.url, CONFIG2.files) || val.url;
|
|
2658
|
-
fontFace2 = setCustomFontMedia(key, url, val.fontWeight, {
|
|
2659
|
-
fontStyle: val.fontStyle,
|
|
2660
|
-
fontDisplay: val.fontDisplay,
|
|
2661
|
-
fontStretch: val.fontStretch
|
|
2662
|
-
});
|
|
2663
|
-
}
|
|
2664
|
-
return { var: CSSvar, value: val, fontFace: fontFace2 };
|
|
2665
|
-
};
|
|
2666
|
-
var getFontFamily = (key, factory) => {
|
|
2667
|
-
const CONFIG2 = getActiveConfig();
|
|
2668
|
-
const { fontFamily: FONT_FAMILY } = CONFIG2;
|
|
2669
|
-
return getDefaultOrFirstKey(factory || FONT_FAMILY, key);
|
|
2670
|
-
};
|
|
2671
|
-
var setFontFamily = (val, key) => {
|
|
2672
|
-
const CONFIG2 = getActiveConfig();
|
|
2673
|
-
const { fontFamily: FONT_FAMILY, fontFamilyTypes: FONT_FAMILY_TYPES } = CONFIG2;
|
|
2674
|
-
let { value, type } = val;
|
|
2675
|
-
if (val.isDefault) FONT_FAMILY.default = key;
|
|
2676
|
-
if (isObject(value)) value = arrayzeValue(value);
|
|
2677
|
-
const CSSvar = `--font-family-${key}`;
|
|
2678
|
-
const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES[type]}`;
|
|
2679
|
-
return { var: CSSvar, value: str, arr: value, type };
|
|
2680
|
-
};
|
|
2681
|
-
|
|
2682
|
-
// src/system/typography.js
|
|
2683
|
-
init_utils();
|
|
2684
|
-
var runThroughMedia = (FACTORY2) => {
|
|
2685
|
-
const CONFIG2 = getActiveConfig();
|
|
2686
|
-
const { typography: TYPOGRAPHY, media: MEDIA } = CONFIG2;
|
|
2687
|
-
for (const prop in FACTORY2) {
|
|
2688
|
-
const isPropMedia = prop.slice(0, 1) === "@";
|
|
2689
|
-
const mediaValue = FACTORY2[prop];
|
|
2690
|
-
if (!isPropMedia) continue;
|
|
2691
|
-
const { mediaRegenerate } = FACTORY2;
|
|
2692
|
-
const mediaName = prop.slice(1);
|
|
2693
|
-
const { type, base, ratio, range, subSequence, h1Matches, unit: unit2 } = FACTORY2;
|
|
2694
|
-
merge(mediaValue, {
|
|
2695
|
-
type,
|
|
2696
|
-
base,
|
|
2697
|
-
ratio,
|
|
2698
|
-
range,
|
|
2699
|
-
subSequence,
|
|
2700
|
-
h1Matches,
|
|
2701
|
-
unit: unit2
|
|
2702
|
-
});
|
|
2703
|
-
const VIEWPORT_UNITS3 = /* @__PURE__ */ new Set(["vw", "vh", "vmin", "vmax", "svw", "svh", "lvw", "lvh", "dvw", "dvh"]);
|
|
2704
|
-
const inheritedUnit = mediaValue.unit || unit2;
|
|
2705
|
-
const mediaUnit = !mediaValue.unit && VIEWPORT_UNITS3.has(unit2) ? "rem" : inheritedUnit;
|
|
2706
|
-
const query = MEDIA[mediaName];
|
|
2707
|
-
const media2 = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
|
|
2708
|
-
TYPOGRAPHY.templates[media2] = {
|
|
2709
|
-
fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + mediaUnit
|
|
2710
|
-
};
|
|
2711
|
-
if (!mediaRegenerate) {
|
|
2712
|
-
merge(mediaValue, {
|
|
2713
|
-
sequence: {},
|
|
2714
|
-
scales: {},
|
|
2715
|
-
vars: {}
|
|
2716
|
-
});
|
|
2717
|
-
generateSequence(mediaValue);
|
|
2718
|
-
applyMediaSequenceVars(FACTORY2, prop);
|
|
2719
|
-
continue;
|
|
2720
|
-
}
|
|
2721
|
-
merge(mediaValue, {
|
|
2722
|
-
sequence: {},
|
|
2723
|
-
scales: {},
|
|
2724
|
-
templates: {},
|
|
2725
|
-
vars: {}
|
|
2726
|
-
});
|
|
2727
|
-
generateSequence(mediaValue);
|
|
2728
|
-
applyMediaSequenceVars(FACTORY2, prop);
|
|
2729
|
-
}
|
|
2730
|
-
};
|
|
2731
|
-
var applyHeadings = (props) => {
|
|
2732
|
-
const CONFIG2 = getActiveConfig();
|
|
2733
|
-
if (props.h1Matches) {
|
|
2734
|
-
const unit2 = props.unit;
|
|
2735
|
-
const HEADINGS = findHeadings(props);
|
|
2736
|
-
const { templates: templates2 } = props;
|
|
2737
|
-
for (const k in HEADINGS) {
|
|
2738
|
-
const headerName = `h${parseInt(k) + 1}`;
|
|
2739
|
-
const headerStyle = templates2[headerName];
|
|
2740
|
-
templates2[headerName] = {
|
|
2741
|
-
fontSize: CONFIG2.useVariable ? `var(${HEADINGS[k]?.variable})` : `${HEADINGS[k]?.scaling}${unit2}`,
|
|
2742
|
-
margin: headerStyle ? headerStyle.margin : 0,
|
|
2743
|
-
lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
|
|
2744
|
-
letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
|
|
2745
|
-
fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
|
|
2746
|
-
};
|
|
2747
|
-
}
|
|
2748
|
-
}
|
|
2749
|
-
};
|
|
2750
|
-
var applyTypographySequence = () => {
|
|
2751
|
-
const CONFIG2 = getActiveConfig();
|
|
2752
|
-
const { typography: TYPOGRAPHY } = CONFIG2;
|
|
2753
|
-
generateSequence(TYPOGRAPHY);
|
|
2754
|
-
applyHeadings(TYPOGRAPHY);
|
|
2755
|
-
applySequenceVars(TYPOGRAPHY);
|
|
2756
|
-
runThroughMedia(TYPOGRAPHY);
|
|
2757
|
-
};
|
|
2758
|
-
var getFontSizeByKey = (value) => {
|
|
2759
|
-
const CONFIG2 = getActiveConfig();
|
|
2760
|
-
const { typography: TYPOGRAPHY } = CONFIG2;
|
|
2761
|
-
return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY);
|
|
2762
|
-
};
|
|
2763
|
-
|
|
2764
|
-
// src/system/spacing.js
|
|
2765
|
-
init_utils();
|
|
2766
|
-
init_utils();
|
|
2767
|
-
var runThroughMedia2 = (FACTORY2) => {
|
|
2768
|
-
for (const prop in FACTORY2) {
|
|
2769
|
-
const mediaProps = FACTORY2[prop];
|
|
2770
|
-
const isMediaName = prop.slice(0, 1) === "@";
|
|
2771
|
-
if (!isMediaName) continue;
|
|
2772
|
-
const { type, base, ratio, range, subSequence, h1Matches, unit: unit2 } = FACTORY2;
|
|
2773
|
-
merge(mediaProps, {
|
|
2774
|
-
type,
|
|
2775
|
-
base,
|
|
2776
|
-
ratio,
|
|
2777
|
-
range,
|
|
2778
|
-
subSequence,
|
|
2779
|
-
h1Matches,
|
|
2780
|
-
unit: unit2,
|
|
2781
|
-
sequence: {},
|
|
2782
|
-
scales: {},
|
|
2783
|
-
templates: {},
|
|
2784
|
-
vars: {}
|
|
2785
|
-
});
|
|
2786
|
-
generateSequence(mediaProps);
|
|
2787
|
-
applyMediaSequenceVars(FACTORY2, prop);
|
|
2788
|
-
}
|
|
2789
|
-
};
|
|
2790
|
-
var checkIfBoxSize = (propertyName) => {
|
|
2791
|
-
const prop = propertyName.toLowerCase();
|
|
2792
|
-
const includesWidth = prop.includes("width") || prop.includes("height");
|
|
2793
|
-
const includesBorder = prop.includes("border") || prop.includes("outline");
|
|
2794
|
-
return includesWidth && !includesBorder;
|
|
2795
|
-
};
|
|
2796
|
-
var applySpacingSequence = () => {
|
|
2797
|
-
const CONFIG2 = getActiveConfig();
|
|
2798
|
-
const { spacing: SPACING } = CONFIG2;
|
|
2799
|
-
generateSequence(SPACING);
|
|
2800
|
-
applySequenceVars(SPACING);
|
|
2801
|
-
runThroughMedia2(SPACING);
|
|
2802
|
-
};
|
|
2803
|
-
var getSequence = (sequenceProps) => {
|
|
2804
|
-
const CONFIG2 = getActiveConfig();
|
|
2805
|
-
const { spacing: SPACING } = CONFIG2;
|
|
2806
|
-
if (!sequenceProps || !sequenceProps.sequence) return SPACING;
|
|
2807
|
-
const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
|
|
2808
|
-
return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
|
|
2809
|
-
};
|
|
2810
|
-
var getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefix) => {
|
|
2811
|
-
const sequence2 = getSequence(sequenceProps);
|
|
2812
|
-
if (isString(value)) {
|
|
2813
|
-
if (!fnPrefix && value.includes("(")) {
|
|
2814
|
-
const fnArray = getFnPrefixAndValue(value);
|
|
2815
|
-
fnPrefix = fnArray[0];
|
|
2816
|
-
value = fnArray[1];
|
|
2817
|
-
}
|
|
2818
|
-
}
|
|
2819
|
-
const stack = fnPrefix ? [value] : arrayzeValue(value);
|
|
2820
|
-
if (!isArray(stack)) return;
|
|
2821
|
-
if (stack.length > 1) {
|
|
2822
|
-
let suffix = "";
|
|
2823
|
-
if (propertyName === "borderWidth") {
|
|
2824
|
-
propertyName = "border";
|
|
2825
|
-
suffix = "Width";
|
|
2826
|
-
}
|
|
2827
|
-
const directions = {
|
|
2828
|
-
2: ["Block", "Inline"],
|
|
2829
|
-
3: ["BlockStart", "Inline", "BlockEnd"],
|
|
2830
|
-
4: ["BlockStart", "InlineEnd", "BlockEnd", "InlineStart"]
|
|
2831
|
-
};
|
|
2832
|
-
const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
|
|
2833
|
-
stack[i],
|
|
2834
|
-
propertyName + direction + suffix,
|
|
2835
|
-
sequence2,
|
|
2836
|
-
fnPrefix
|
|
2837
|
-
);
|
|
2838
|
-
return directions[stack.length].map(
|
|
2839
|
-
(dir, key) => wrapSequenceValueByDirection(dir, key)
|
|
2840
|
-
);
|
|
2841
|
-
}
|
|
2842
|
-
return getSequenceValuePropertyPair(value, propertyName, sequence2, fnPrefix);
|
|
2843
|
-
};
|
|
2844
|
-
var getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
|
|
2845
|
-
const CONFIG2 = getActiveConfig();
|
|
2846
|
-
const { spacing: SPACING } = CONFIG2;
|
|
2847
|
-
let value = val || props[propertyName];
|
|
2848
|
-
if (!fnPrefix && isString(value) && value.includes("(")) {
|
|
2849
|
-
const fnArr = getFnPrefixAndValue(value);
|
|
2850
|
-
fnPrefix = fnArr[0];
|
|
2851
|
-
value = fnArr[1];
|
|
2852
|
-
}
|
|
2853
|
-
if (props.spacingRatio) {
|
|
2854
|
-
const sequenceProps = applyCustomSequence(props);
|
|
2855
|
-
return getSpacingByKey(value, propertyName, sequenceProps, fnPrefix);
|
|
2856
|
-
}
|
|
2857
|
-
return getSpacingByKey(value, propertyName, SPACING, fnPrefix);
|
|
2858
|
-
};
|
|
2859
|
-
var splitSpacedValue = (val) => {
|
|
2860
|
-
const addDefault = (v) => {
|
|
2861
|
-
const isSymbol = ["+", "-", "*", "/"].includes(v);
|
|
2862
|
-
const hasUnits = CSS_UNITS.some((unit2) => val.includes(unit2));
|
|
2863
|
-
if (isSymbol || hasUnits) return v;
|
|
2864
|
-
const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
|
|
2865
|
-
if (isSingleLetter) return v + "_default";
|
|
2866
|
-
return v;
|
|
2867
|
-
};
|
|
2868
|
-
return val.split(",").map((v) => v.trim()).map(addDefault).join(",").split(" ").map(addDefault).join(" ");
|
|
2869
|
-
};
|
|
2870
|
-
|
|
2871
|
-
// src/system/shadow.js
|
|
2872
|
-
init_utils();
|
|
2873
|
-
var setShadow = (value, key, suffix, prefers) => {
|
|
2874
|
-
const CONFIG2 = getActiveConfig();
|
|
2875
|
-
if (isArray(value)) {
|
|
2876
|
-
return {
|
|
2877
|
-
"@light": setShadow(value[0], key, "light"),
|
|
2878
|
-
"@dark": setShadow(value[1], key, "dark")
|
|
2879
|
-
};
|
|
2880
|
-
}
|
|
2881
|
-
if (isObject(value)) {
|
|
2882
|
-
const obj = {};
|
|
2883
|
-
for (const variant in value) {
|
|
2884
|
-
obj[variant] = setShadow(
|
|
2885
|
-
value[variant],
|
|
2886
|
-
key,
|
|
2887
|
-
variant.startsWith("@") ? variant.slice(1) : variant
|
|
2888
|
-
);
|
|
2889
|
-
}
|
|
2890
|
-
return obj;
|
|
2891
|
-
}
|
|
2892
|
-
if (isString(value) && !CSS_NATIVE_COLOR_REGEX.test(value)) {
|
|
2893
|
-
value = splitTopLevelCommas(value).map((shadow2) => {
|
|
2894
|
-
shadow2 = shadow2.trim();
|
|
2895
|
-
return shadow2.split(/\s+/).map((v) => {
|
|
2896
|
-
v = v.trim();
|
|
2897
|
-
if (!v) return "";
|
|
2898
|
-
if (v.startsWith("--")) return `var(${v})`;
|
|
2899
|
-
const color2 = getColor(v);
|
|
2900
|
-
if (isResolvedColor(color2)) return color2;
|
|
2901
|
-
if (/^\d/.test(v) || v === "0" || v.includes("px") || v.slice(-2) === "em") return v;
|
|
2902
|
-
if (v === "inset" || v === "none") return v;
|
|
2903
|
-
const spacing2 = getSpacingByKey(v, "shadow");
|
|
2904
|
-
if (spacing2 && spacing2.shadow) return spacing2.shadow;
|
|
2905
|
-
return v;
|
|
2906
|
-
}).join(" ");
|
|
2907
|
-
}).join(", ");
|
|
2908
|
-
}
|
|
2909
|
-
const vp = CONFIG2.varPrefix ? CONFIG2.varPrefix + "-" : "";
|
|
2910
|
-
const CSSVar = `--${vp}shadow-${key}` + (suffix ? `-${suffix}` : "");
|
|
2911
|
-
if (CONFIG2.useVariable) {
|
|
2912
|
-
CONFIG2.cssVars[CSSVar] = value;
|
|
2913
|
-
}
|
|
2914
|
-
return {
|
|
2915
|
-
var: CSSVar,
|
|
2916
|
-
value
|
|
2917
|
-
};
|
|
2918
|
-
};
|
|
2919
|
-
var getShadow = (value, globalTheme) => {
|
|
2920
|
-
const CONFIG2 = getActiveConfig();
|
|
2921
|
-
if (!globalTheme) globalTheme = CONFIG2.globalTheme;
|
|
2922
|
-
if (!isString(value)) {
|
|
2923
|
-
if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
|
|
2924
|
-
return;
|
|
2925
|
-
}
|
|
2926
|
-
if (isCSSVar(value)) return `var(${value})`;
|
|
2927
|
-
const [name] = isArray(value) ? value : value.split(" ");
|
|
2928
|
-
const SHADOW = CONFIG2.shadow;
|
|
2929
|
-
const val = SHADOW[name];
|
|
2930
|
-
const isObj = isObject(val);
|
|
2931
|
-
if (!val) {
|
|
2932
|
-
if (CONFIG2.verbose) console.warn("Can't find color ", name);
|
|
2933
|
-
return value;
|
|
2934
|
-
}
|
|
2935
|
-
if (globalTheme) {
|
|
2936
|
-
if (val[globalTheme]) return val[globalTheme].value;
|
|
2937
|
-
else if (CONFIG2.verbose) console.warn(value, " - does not have ", globalTheme);
|
|
2938
|
-
}
|
|
2939
|
-
if (isObj && val.value) return val.value;
|
|
2940
|
-
if (isObj) {
|
|
2941
|
-
const obj = {};
|
|
2942
|
-
for (const mediaName in val) {
|
|
2943
|
-
const query = CONFIG2.media[mediaName.slice(1)];
|
|
2944
|
-
const media2 = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
|
|
2945
|
-
obj[media2] = val.value;
|
|
2946
|
-
}
|
|
2947
|
-
return obj;
|
|
2948
|
-
}
|
|
2949
|
-
if (CONFIG2.verbose) console.warn("Can't find color", value);
|
|
2950
|
-
return value;
|
|
2951
|
-
};
|
|
2952
|
-
|
|
2953
|
-
// src/system/timing.js
|
|
2954
|
-
init_utils();
|
|
2955
|
-
var applyTimingSequence = () => {
|
|
2956
|
-
const CONFIG2 = getActiveConfig();
|
|
2957
|
-
const { timing: TIMING } = CONFIG2;
|
|
2958
|
-
generateSequence(TIMING);
|
|
2959
|
-
applySequenceVars(TIMING);
|
|
2960
|
-
};
|
|
2961
|
-
var getTimingFunction = (value) => {
|
|
2962
|
-
const CONFIG2 = getActiveConfig();
|
|
2963
|
-
const { timing: TIMING } = CONFIG2;
|
|
2964
|
-
return TIMING[value] || TIMING[toCamelCase(value)] || value;
|
|
2965
|
-
};
|
|
2966
|
-
var getTimingByKey = (value, property = "timing") => {
|
|
2967
|
-
const CONFIG2 = getActiveConfig();
|
|
2968
|
-
const { timing: TIMING } = CONFIG2;
|
|
2969
|
-
return getSequenceValuePropertyPair(
|
|
2970
|
-
value,
|
|
2971
|
-
property,
|
|
2972
|
-
TIMING
|
|
2973
|
-
);
|
|
2974
|
-
};
|
|
2975
|
-
|
|
2976
|
-
// src/system/document.js
|
|
2977
|
-
init_utils();
|
|
2978
|
-
var applyDocument = () => {
|
|
2979
|
-
const CONFIG2 = getActiveConfig();
|
|
2980
|
-
const { document: DOCUMENT, fontFamily: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG2;
|
|
2981
|
-
return merge(DOCUMENT, {
|
|
2982
|
-
theme: THEME.document,
|
|
2983
|
-
fontFamily: getDefaultOrFirstKey(FONT_FAMILY),
|
|
2984
|
-
fontSize: TYPOGRAPHY.base,
|
|
2985
|
-
lineHeight: TYPOGRAPHY.lineHeight
|
|
2986
|
-
});
|
|
2987
|
-
};
|
|
2988
|
-
|
|
2989
|
-
// src/system/svg.js
|
|
2990
|
-
init_utils();
|
|
2991
|
-
var DEF_OPTIONS = {
|
|
2992
|
-
document: document2
|
|
2993
|
-
};
|
|
2994
|
-
var setSVG = (val, key) => {
|
|
2995
|
-
const CONFIG2 = getActiveConfig();
|
|
2996
|
-
if (!val) {
|
|
2997
|
-
if (CONFIG2.verbose) console.warn("setSVG: val is not defined", key);
|
|
2998
|
-
return;
|
|
2999
|
-
}
|
|
3000
|
-
if (CONFIG2.useSvgSprite) {
|
|
3001
|
-
return convertSvgToSymbol(key, val);
|
|
3002
|
-
}
|
|
3003
|
-
return val;
|
|
3004
|
-
};
|
|
3005
|
-
var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
|
|
3006
|
-
const CONFIG2 = getActiveConfig();
|
|
3007
|
-
const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.svg;
|
|
3008
|
-
for (const key in LIBRARY) lib[key] = LIBRARY[key];
|
|
3009
|
-
appendSVG(lib, options);
|
|
3010
|
-
};
|
|
3011
|
-
var setSvgIcon = (val, key) => {
|
|
3012
|
-
const CONFIG2 = getActiveConfig();
|
|
3013
|
-
if (CONFIG2.useIconSprite && !CONFIG2.semanticIcons?.[key]) {
|
|
3014
|
-
return setSVG(val, key);
|
|
3015
|
-
}
|
|
3016
|
-
return val;
|
|
3017
|
-
};
|
|
3018
|
-
var appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
|
|
3019
|
-
const CONFIG2 = getActiveConfig();
|
|
3020
|
-
const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.icons;
|
|
3021
|
-
for (const key in LIBRARY) lib[key] = LIBRARY[key];
|
|
3022
|
-
appendSVG(lib, options);
|
|
3023
|
-
};
|
|
3024
|
-
var createSVGSpriteElement = (doc, options = { isRoot: true }) => {
|
|
3025
|
-
if (!doc || !doc.createElementNS) return;
|
|
3026
|
-
const svgElem = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
3027
|
-
if (options.isRoot) {
|
|
3028
|
-
svgElem.setAttribute("aria-hidden", "true");
|
|
3029
|
-
svgElem.setAttribute("width", "0");
|
|
3030
|
-
svgElem.setAttribute("height", "0");
|
|
3031
|
-
svgElem.setAttribute("style", "position:absolute");
|
|
3032
|
-
svgElem.setAttribute("id", "svgSprite");
|
|
3033
|
-
}
|
|
3034
|
-
return svgElem;
|
|
3035
|
-
};
|
|
3036
|
-
var parseSVGSprite = (doc, svgString) => {
|
|
3037
|
-
const DOMParserCtor = typeof DOMParser !== "undefined" ? DOMParser : null;
|
|
3038
|
-
if (DOMParserCtor) {
|
|
3039
|
-
const wrapped = `<svg xmlns="http://www.w3.org/2000/svg">${svgString}</svg>`;
|
|
3040
|
-
const parser = new DOMParserCtor();
|
|
3041
|
-
const parsed = parser.parseFromString(wrapped, "image/svg+xml");
|
|
3042
|
-
if (parsed.querySelector("parsererror")) return null;
|
|
3043
|
-
return parsed.documentElement;
|
|
3044
|
-
}
|
|
3045
|
-
return null;
|
|
3046
|
-
};
|
|
3047
|
-
var moveChildren = (doc, from, to) => {
|
|
3048
|
-
while (from.firstChild) {
|
|
3049
|
-
const child = from.firstChild;
|
|
3050
|
-
to.appendChild(doc.importNode(child, true));
|
|
3051
|
-
child.remove();
|
|
3052
|
-
}
|
|
3053
|
-
};
|
|
3054
|
-
var appendSVG = (lib, options = DEF_OPTIONS) => {
|
|
3055
|
-
const CONFIG2 = getActiveConfig();
|
|
3056
|
-
const doc = options.document || document2;
|
|
3057
|
-
if (!doc || !doc.documentElement) {
|
|
3058
|
-
if (CONFIG2.verbose) {
|
|
3059
|
-
console.warn("To append SVG sprites it should be run in browser environment");
|
|
3060
|
-
}
|
|
3061
|
-
return generateSprite(lib);
|
|
3062
|
-
}
|
|
3063
|
-
const exists = doc.querySelector("#svgSprite");
|
|
3064
|
-
const SVGsprite = generateSprite(lib);
|
|
3065
|
-
const spriteHtml = `<svg aria-hidden="true" width="0" height="0" style="position:absolute" id="svgSprite">${SVGsprite}</svg>`;
|
|
3066
|
-
const parsed = parseSVGSprite(doc, SVGsprite);
|
|
3067
|
-
if (exists) {
|
|
3068
|
-
if (parsed) {
|
|
3069
|
-
moveChildren(doc, parsed, exists);
|
|
3070
|
-
} else if (doc.body.insertAdjacentHTML) {
|
|
3071
|
-
exists.insertAdjacentHTML("beforeend", SVGsprite);
|
|
3072
|
-
} else {
|
|
3073
|
-
const tempSVG = createSVGSpriteElement(doc, { isRoot: false });
|
|
3074
|
-
tempSVG.innerHTML = SVGsprite;
|
|
3075
|
-
exists.append(...tempSVG.children);
|
|
3076
|
-
}
|
|
3077
|
-
} else {
|
|
3078
|
-
if (parsed) {
|
|
3079
|
-
const svgSpriteDOM = createSVGSpriteElement(doc);
|
|
3080
|
-
if (svgSpriteDOM && svgSpriteDOM.nodeType) {
|
|
3081
|
-
moveChildren(doc, parsed, svgSpriteDOM);
|
|
3082
|
-
doc.body.prepend(svgSpriteDOM);
|
|
3083
|
-
}
|
|
3084
|
-
} else if (doc.body.insertAdjacentHTML) {
|
|
3085
|
-
doc.body.insertAdjacentHTML("afterbegin", spriteHtml);
|
|
3086
|
-
} else {
|
|
3087
|
-
const svgSpriteDOM = createSVGSpriteElement(doc);
|
|
3088
|
-
if (svgSpriteDOM && svgSpriteDOM.nodeType) {
|
|
3089
|
-
svgSpriteDOM.innerHTML = SVGsprite;
|
|
3090
|
-
doc.body.prepend(svgSpriteDOM);
|
|
3091
|
-
}
|
|
3092
|
-
}
|
|
3093
|
-
}
|
|
3094
|
-
};
|
|
3095
|
-
|
|
3096
|
-
// src/system/reset.js
|
|
3097
|
-
init_utils();
|
|
3098
|
-
var applyReset = (reset2 = {}) => {
|
|
3099
|
-
const CONFIG2 = getActiveConfig();
|
|
3100
|
-
const { reset: RESET, typography: TYPOGRAPHY, document: DOCUMENT } = CONFIG2;
|
|
3101
|
-
if (RESET) {
|
|
3102
|
-
if (RESET[":root"]) {
|
|
3103
|
-
const configReset = RESET;
|
|
3104
|
-
const configTemplates = TYPOGRAPHY.templates;
|
|
3105
|
-
configReset.body = {
|
|
3106
|
-
...CONFIG2.useDocumentTheme ? getMediaTheme("document") : {},
|
|
3107
|
-
...configTemplates.body
|
|
3108
|
-
};
|
|
3109
|
-
configReset.h1 = configTemplates.h1;
|
|
3110
|
-
configReset.h2 = configTemplates.h2;
|
|
3111
|
-
configReset.h3 = configTemplates.h3;
|
|
3112
|
-
configReset.h4 = configTemplates.h4;
|
|
3113
|
-
configReset.h5 = configTemplates.h5;
|
|
3114
|
-
configReset.h6 = configTemplates.h6;
|
|
3115
|
-
}
|
|
3116
|
-
const { body, ...templates2 } = TYPOGRAPHY.templates;
|
|
3117
|
-
const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document") : {};
|
|
3118
|
-
if (RESET.html) overwriteDeep(RESET.html, globalTheme);
|
|
3119
|
-
if (TYPOGRAPHY.unit) {
|
|
3120
|
-
const { media: MEDIA } = CONFIG2;
|
|
3121
|
-
for (const key in TYPOGRAPHY) {
|
|
3122
|
-
if (key.charAt(0) !== "@") continue;
|
|
3123
|
-
const mediaTypo = TYPOGRAPHY[key];
|
|
3124
|
-
if (!mediaTypo) continue;
|
|
3125
|
-
if (mediaTypo.unit === TYPOGRAPHY.unit || !mediaTypo.unit) continue;
|
|
3126
|
-
const mediaUnit = mediaTypo.unit;
|
|
3127
|
-
const mediaBase = mediaTypo.base || TYPOGRAPHY.base;
|
|
3128
|
-
const mediaBrowserDefault = mediaTypo.browserDefault || TYPOGRAPHY.browserDefault;
|
|
3129
|
-
const mediaName = key.slice(1);
|
|
3130
|
-
const query = MEDIA[mediaName];
|
|
3131
|
-
if (!query) continue;
|
|
3132
|
-
const mediaKey = "@media " + (query === "print" ? query : "screen and " + query);
|
|
3133
|
-
if (!RESET[mediaKey]) RESET[mediaKey] = {};
|
|
3134
|
-
if (!RESET[mediaKey].html) RESET[mediaKey].html = {};
|
|
3135
|
-
RESET[mediaKey].html.fontSize = mediaBase / mediaBrowserDefault + mediaUnit;
|
|
3136
|
-
}
|
|
3137
|
-
}
|
|
3138
|
-
return deepMerge(merge(RESET, reset2), {
|
|
3139
|
-
html: {
|
|
3140
|
-
position: "absolute",
|
|
3141
|
-
width: "100%",
|
|
3142
|
-
height: "100%",
|
|
3143
|
-
top: "0",
|
|
3144
|
-
left: "0",
|
|
3145
|
-
margin: "0",
|
|
3146
|
-
WebkitFontSmoothing: "subpixel-antialiased",
|
|
3147
|
-
scrollBehavior: "smooth",
|
|
3148
|
-
...globalTheme,
|
|
3149
|
-
fontSize: TYPOGRAPHY.unit ? TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + TYPOGRAPHY.unit : TYPOGRAPHY.browserDefault + "px",
|
|
3150
|
-
fontFamily: DOCUMENT.fontFamily,
|
|
3151
|
-
lineHeight: DOCUMENT.lineHeight
|
|
3152
|
-
},
|
|
3153
|
-
body: {
|
|
3154
|
-
boxSizing: "border-box",
|
|
3155
|
-
height: "100%",
|
|
3156
|
-
margin: 0,
|
|
3157
|
-
fontFamily: DOCUMENT.fontFamily,
|
|
3158
|
-
fontSize: TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG2.unit.default,
|
|
3159
|
-
...templates2,
|
|
3160
|
-
...body
|
|
3161
|
-
},
|
|
3162
|
-
a: {
|
|
3163
|
-
color: "currentColor"
|
|
3164
|
-
},
|
|
3165
|
-
button: {
|
|
3166
|
-
color: "inherit",
|
|
3167
|
-
font: "inherit",
|
|
3168
|
-
background: "transparent",
|
|
3169
|
-
border: "none",
|
|
3170
|
-
cursor: "pointer",
|
|
3171
|
-
appearance: "none",
|
|
3172
|
-
WebkitAppearance: "none"
|
|
3173
|
-
},
|
|
3174
|
-
"input, select, textarea": {
|
|
3175
|
-
color: "inherit",
|
|
3176
|
-
font: "inherit"
|
|
3177
|
-
},
|
|
3178
|
-
fieldset: {
|
|
3179
|
-
border: 0,
|
|
3180
|
-
padding: 0,
|
|
3181
|
-
margin: 0
|
|
3182
|
-
}
|
|
3183
|
-
});
|
|
3184
|
-
}
|
|
3185
|
-
};
|
|
3186
|
-
|
|
3187
|
-
// src/transforms/index.js
|
|
3188
|
-
init_utils();
|
|
3189
|
-
var BORDER_STYLES = /* @__PURE__ */ new Set([
|
|
3190
|
-
"none",
|
|
3191
|
-
"hidden",
|
|
3192
|
-
"dotted",
|
|
3193
|
-
"dashed",
|
|
3194
|
-
"solid",
|
|
3195
|
-
"double",
|
|
3196
|
-
"groove",
|
|
3197
|
-
"ridge",
|
|
3198
|
-
"inset",
|
|
3199
|
-
"outset",
|
|
3200
|
-
"initial"
|
|
3201
|
-
]);
|
|
3202
|
-
var GRADIENT_KEYWORDS = /* @__PURE__ */ new Set([
|
|
3203
|
-
"to",
|
|
3204
|
-
"top",
|
|
3205
|
-
"bottom",
|
|
3206
|
-
"left",
|
|
3207
|
-
"right",
|
|
3208
|
-
"center",
|
|
3209
|
-
"at",
|
|
3210
|
-
"circle",
|
|
3211
|
-
"ellipse",
|
|
3212
|
-
"closest-side",
|
|
3213
|
-
"farthest-side",
|
|
3214
|
-
"closest-corner",
|
|
3215
|
-
"farthest-corner"
|
|
3216
|
-
]);
|
|
3217
|
-
var isBorderStyle = (str) => BORDER_STYLES.has(str);
|
|
3218
|
-
var transformBorder = (border) => {
|
|
3219
|
-
const str = border + "";
|
|
3220
|
-
if (CSS_NATIVE_COLOR_REGEX.test(str)) return str;
|
|
3221
|
-
const trimmed = str.trim();
|
|
3222
|
-
if (trimmed === "none" || trimmed === "0" || trimmed === "initial" || trimmed === "inherit" || trimmed === "unset") return str;
|
|
3223
|
-
const tokens = str.split(/\s+/);
|
|
3224
|
-
return tokens.map((v) => {
|
|
3225
|
-
v = v.trim();
|
|
3226
|
-
if (!v) return "";
|
|
3227
|
-
if (isCSSVar(v)) return `var(${v})`;
|
|
3228
|
-
if (isBorderStyle(v)) return v;
|
|
3229
|
-
if (/^\d/.test(v) || v === "0") return v;
|
|
3230
|
-
const color2 = getColor(v);
|
|
3231
|
-
if (isResolvedColor(color2)) return color2;
|
|
3232
|
-
const spacing2 = getSpacingByKey(v, "border");
|
|
3233
|
-
if (spacing2 && spacing2.border) return spacing2.border;
|
|
3234
|
-
return v;
|
|
3235
|
-
}).join(" ");
|
|
3236
|
-
};
|
|
3237
|
-
var transformTextStroke = (stroke) => {
|
|
3238
|
-
if (CSS_NATIVE_COLOR_REGEX.test(stroke)) return stroke;
|
|
3239
|
-
return stroke.split(/\s+/).map((v) => {
|
|
3240
|
-
v = v.trim();
|
|
3241
|
-
if (!v) return "";
|
|
3242
|
-
if (isCSSVar(v)) return `var(${v})`;
|
|
3243
|
-
if (/^\d/.test(v) || v.includes("px") || v === "0") return v;
|
|
3244
|
-
const color2 = getColor(v);
|
|
3245
|
-
if (isResolvedColor(color2)) return color2;
|
|
3246
|
-
return v;
|
|
3247
|
-
}).join(" ");
|
|
3248
|
-
};
|
|
3249
|
-
var transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
|
|
3250
|
-
var transformBoxShadow = (shadows, globalTheme) => {
|
|
3251
|
-
if (CSS_NATIVE_COLOR_REGEX.test(shadows)) return shadows;
|
|
3252
|
-
return splitTopLevelCommas(shadows).map((shadow2) => {
|
|
3253
|
-
shadow2 = shadow2.trim();
|
|
3254
|
-
if (!shadow2) return "";
|
|
3255
|
-
return shadow2.split(/\s+/).map((v) => {
|
|
3256
|
-
v = v.trim();
|
|
3257
|
-
if (!v) return "";
|
|
3258
|
-
if (isCSSVar(v)) return `var(${v})`;
|
|
3259
|
-
if (v === "inset" || v === "none") return v;
|
|
3260
|
-
const color2 = getColor(v);
|
|
3261
|
-
if (isResolvedColor(color2)) {
|
|
3262
|
-
const mediaColor = getMediaColor(v, globalTheme);
|
|
3263
|
-
if (isObject(mediaColor))
|
|
3264
|
-
return Object.values(mediaColor).filter(
|
|
3265
|
-
(c) => c.includes(": " + globalTheme)
|
|
3266
|
-
)[0];
|
|
3267
|
-
return mediaColor;
|
|
3268
|
-
}
|
|
3269
|
-
if (/^\d/.test(v) || v === "0" || v.includes("px") || v.slice(-2) === "em") return v;
|
|
3270
|
-
const spacing2 = getSpacingByKey(v, "shadow");
|
|
3271
|
-
if (spacing2 && spacing2.shadow) return spacing2.shadow;
|
|
3272
|
-
return v;
|
|
3273
|
-
}).join(" ");
|
|
3274
|
-
}).join(", ");
|
|
3275
|
-
};
|
|
3276
|
-
var resolveColorsInGradient = (gradient2, globalTheme) => {
|
|
3277
|
-
const parenStart = gradient2.indexOf("(");
|
|
3278
|
-
if (parenStart === -1) return gradient2;
|
|
3279
|
-
const prefix = gradient2.slice(0, parenStart + 1);
|
|
3280
|
-
const inner = gradient2.slice(parenStart + 1, gradient2.lastIndexOf(")"));
|
|
3281
|
-
const suffix = ")";
|
|
3282
|
-
const segments = splitTopLevelCommas(inner);
|
|
3283
|
-
const resolved = segments.map((segment) => {
|
|
3284
|
-
segment = segment.trim();
|
|
3285
|
-
const tokens = segment.split(/\s+/);
|
|
3286
|
-
return tokens.map((token) => {
|
|
3287
|
-
if (!token) return token;
|
|
3288
|
-
if (/^\d/.test(token) || token === "0") return token;
|
|
3289
|
-
if (GRADIENT_KEYWORDS.has(token)) return token;
|
|
3290
|
-
if (token === "transparent") return token;
|
|
3291
|
-
if (CSS_NATIVE_COLOR_REGEX.test(token)) return token;
|
|
3292
|
-
const color2 = getColor(token);
|
|
3293
|
-
if (isResolvedColor(color2)) return color2;
|
|
3294
|
-
return token;
|
|
3295
|
-
}).join(" ");
|
|
3296
|
-
});
|
|
3297
|
-
return prefix + resolved.join(", ") + suffix;
|
|
3298
|
-
};
|
|
3299
|
-
var transformBackgroundImage = (backgroundImage, globalTheme) => {
|
|
3300
|
-
const CONFIG2 = getActiveConfig();
|
|
3301
|
-
return backgroundImage.split(", ").map((v) => {
|
|
3302
|
-
if (isCSSVar(v)) return `var(${v})`;
|
|
3303
|
-
if (v.includes("url")) return v;
|
|
3304
|
-
if (v.includes("gradient")) return resolveColorsInGradient(v, globalTheme);
|
|
3305
|
-
else if (CONFIG2.gradient[backgroundImage]) {
|
|
3306
|
-
return {
|
|
3307
|
-
backgroundImage: getMediaColor(
|
|
3308
|
-
backgroundImage,
|
|
3309
|
-
globalTheme || CONFIG2.globalTheme
|
|
3310
|
-
)
|
|
3311
|
-
};
|
|
3312
|
-
} else if (v.includes("/") || v.startsWith("http") || v.includes(".") && !parseColorToken(v))
|
|
3313
|
-
return `url(${v})`;
|
|
3314
|
-
return v;
|
|
3315
|
-
}).join(" ");
|
|
3316
|
-
};
|
|
3317
|
-
var transfromGap = (gap) => isString(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
|
|
3318
|
-
var transformTransition = (transition) => {
|
|
3319
|
-
const arr = transition.split(" ");
|
|
3320
|
-
if (!arr.length) return transition;
|
|
3321
|
-
return arr.map((v) => {
|
|
3322
|
-
if (isCSSVar(v)) return `var(${v})`;
|
|
3323
|
-
if (v.length < 3 || v.includes("ms")) {
|
|
3324
|
-
const mapWithSequence = getTimingByKey(v);
|
|
3325
|
-
return mapWithSequence.timing || v;
|
|
3326
|
-
}
|
|
3327
|
-
if (getTimingFunction(v)) return getTimingFunction(v);
|
|
3328
|
-
return v;
|
|
3329
|
-
}).join(" ");
|
|
3330
|
-
};
|
|
3331
|
-
var transformDuration = (duration, props, propertyName) => {
|
|
3332
|
-
if (!isString(duration)) return;
|
|
3333
|
-
return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
|
|
3334
|
-
};
|
|
3335
|
-
var splitTransition = (transition) => {
|
|
3336
|
-
const arr = transition.split(",");
|
|
3337
|
-
if (!arr.length) return;
|
|
3338
|
-
return arr.map(transformTransition).join(",");
|
|
3339
|
-
};
|
|
3340
|
-
function transformSize(propertyName, val, props = {}, opts = {}) {
|
|
3341
|
-
let value = exec.call(this, val || props[propertyName]);
|
|
3342
|
-
if (value === void 0 || value === null) return;
|
|
3343
|
-
let fnPrefix;
|
|
3344
|
-
if (isString(value)) {
|
|
3345
|
-
if (value.includes("(")) {
|
|
3346
|
-
const fnArr = getFnPrefixAndValue(value);
|
|
3347
|
-
fnPrefix = fnArr[0];
|
|
3348
|
-
value = fnArr[1];
|
|
3349
|
-
}
|
|
3350
|
-
const shouldScaleBoxSize = props.scaleBoxSize;
|
|
3351
|
-
const isBoxSize = checkIfBoxSize(propertyName);
|
|
3352
|
-
if (!shouldScaleBoxSize && isBoxSize && !opts.ratio) {
|
|
3353
|
-
value = splitSpacedValue(value);
|
|
3354
|
-
}
|
|
3355
|
-
}
|
|
3356
|
-
return opts.ratio ? getSpacingBasedOnRatio(props, propertyName, value, fnPrefix) : getSpacingByKey(value, propertyName, void 0, fnPrefix);
|
|
3357
|
-
}
|
|
3358
|
-
var transformSizeRatio = (propertyName, val = null, props) => {
|
|
3359
|
-
return transformSize(propertyName, val, props, {
|
|
3360
|
-
ratio: true
|
|
3361
|
-
});
|
|
3362
|
-
};
|
|
3363
|
-
var transformBorderRadius = (radius, props, propertyName) => {
|
|
3364
|
-
if (!isString(radius)) return;
|
|
3365
|
-
return {
|
|
3366
|
-
borderRadius: radius.split(" ").map((v, k) => getSpacingBasedOnRatio(props, propertyName, v)[propertyName]).join(" ")
|
|
3367
|
-
};
|
|
3368
|
-
};
|
|
3369
|
-
|
|
3370
|
-
// src/set.js
|
|
3371
|
-
init_utils();
|
|
3372
|
-
var setVars = (val, key) => {
|
|
3373
|
-
const CONFIG2 = getActiveConfig();
|
|
3374
|
-
const { cssVars: cssVars2 } = CONFIG2;
|
|
3375
|
-
const varName = key.startsWith("--") ? key : `--${key}`;
|
|
3376
|
-
cssVars2[varName] = val;
|
|
3377
|
-
return val;
|
|
3378
|
-
};
|
|
3379
|
-
var asIs = (val) => val;
|
|
3380
|
-
var VALUE_TRANSFORMERS = {
|
|
3381
|
-
color: setColor,
|
|
3382
|
-
gradient: setGradient,
|
|
3383
|
-
font: setFont,
|
|
3384
|
-
fontFamily: setFontFamily,
|
|
3385
|
-
fontfamily: setFontFamily,
|
|
3386
|
-
theme: setTheme,
|
|
3387
|
-
icons: setSvgIcon,
|
|
3388
|
-
semanticIcons: asIs,
|
|
3389
|
-
semanticicons: asIs,
|
|
3390
|
-
svg: setSVG,
|
|
3391
|
-
svgData: asIs,
|
|
3392
|
-
typography: asIs,
|
|
3393
|
-
shadow: setShadow,
|
|
3394
|
-
spacing: asIs,
|
|
3395
|
-
media: asIs,
|
|
3396
|
-
grid: asIs,
|
|
3397
|
-
class: asIs,
|
|
3398
|
-
timing: asIs,
|
|
3399
|
-
reset: asIs,
|
|
3400
|
-
unit: asIs,
|
|
3401
|
-
animation: asIs,
|
|
3402
|
-
vars: setVars
|
|
3403
|
-
};
|
|
3404
|
-
var setValue = (factoryName, value, key) => {
|
|
3405
|
-
const CONFIG2 = getActiveConfig();
|
|
3406
|
-
const camelName = toCamel(factoryName);
|
|
3407
|
-
const lowerName = camelName.toLowerCase();
|
|
3408
|
-
const FACTORY2 = CONFIG2[camelName] || CONFIG2[lowerName] || CONFIG2[factoryName];
|
|
3409
|
-
const transformer = VALUE_TRANSFORMERS[camelName] || VALUE_TRANSFORMERS[lowerName];
|
|
3410
|
-
if (transformer) {
|
|
3411
|
-
try {
|
|
3412
|
-
const result = transformer(value, key);
|
|
3413
|
-
if (FACTORY2) FACTORY2[key] = result;
|
|
3414
|
-
return FACTORY2;
|
|
3415
|
-
} catch (error) {
|
|
3416
|
-
if (CONFIG2.verbose)
|
|
3417
|
-
console.warn("Error setting", lowerName, "value", value, key, error);
|
|
3418
|
-
}
|
|
3419
|
-
}
|
|
3420
|
-
if (CONFIG2.verbose)
|
|
3421
|
-
console.warn("Can not find", lowerName, "method in scratch");
|
|
3422
|
-
};
|
|
3423
|
-
var setEach = (factoryName, props) => {
|
|
3424
|
-
const CONFIG2 = getActiveConfig();
|
|
3425
|
-
const lowerName = factoryName.toLowerCase();
|
|
3426
|
-
const keys = Object.keys(props).sort((a, b) => {
|
|
3427
|
-
const aComposite = isObject(props[a]) || isArray(props[a]) ? 1 : 0;
|
|
3428
|
-
const bComposite = isObject(props[b]) || isArray(props[b]) ? 1 : 0;
|
|
3429
|
-
return aComposite - bComposite;
|
|
3430
|
-
});
|
|
3431
|
-
keys.forEach((key) => {
|
|
3432
|
-
try {
|
|
3433
|
-
return setValue(lowerName, props[key], key);
|
|
3434
|
-
} catch (error) {
|
|
3435
|
-
if (CONFIG2.verbose)
|
|
3436
|
-
console.warn(
|
|
3437
|
-
"Error setting",
|
|
3438
|
-
lowerName,
|
|
3439
|
-
"value",
|
|
3440
|
-
props[key],
|
|
3441
|
-
key,
|
|
3442
|
-
error
|
|
3443
|
-
);
|
|
3444
|
-
}
|
|
3445
|
-
});
|
|
3446
|
-
return CONFIG2[lowerName] || CONFIG2[factoryName];
|
|
3447
|
-
};
|
|
3448
|
-
var changeGlobalTheme = (newTheme, targetConfig) => {
|
|
3449
|
-
const CONFIG2 = targetConfig || getActiveConfig();
|
|
3450
|
-
CONFIG2.globalTheme = newTheme;
|
|
3451
|
-
const configDoc = CONFIG2.document && CONFIG2.document.documentElement ? CONFIG2.document : null;
|
|
3452
|
-
const targetDoc = configDoc || (typeof document !== "undefined" ? document : null);
|
|
3453
|
-
const targetWin = targetDoc && targetDoc.defaultView || (typeof window !== "undefined" ? window : null);
|
|
3454
|
-
if (targetDoc) {
|
|
3455
|
-
const root = CONFIG2.themeRoot || targetDoc.documentElement;
|
|
3456
|
-
const forced = newTheme && newTheme !== "auto";
|
|
3457
|
-
if (forced) {
|
|
3458
|
-
root.setAttribute("data-theme", newTheme);
|
|
3459
|
-
if (newTheme === "dark" || newTheme === "light") {
|
|
3460
|
-
root.style.colorScheme = newTheme;
|
|
3461
|
-
} else {
|
|
3462
|
-
root.style.colorScheme = "light dark";
|
|
3463
|
-
}
|
|
3464
|
-
} else if (targetWin && targetWin.matchMedia) {
|
|
3465
|
-
const apply = (mq2) => {
|
|
3466
|
-
root.setAttribute("data-theme", mq2.matches ? "dark" : "light");
|
|
3467
|
-
};
|
|
3468
|
-
const mq = targetWin.matchMedia("(prefers-color-scheme: dark)");
|
|
3469
|
-
apply(mq);
|
|
3470
|
-
root.style.colorScheme = "light dark";
|
|
3471
|
-
if (!CONFIG2.__prefersListener) {
|
|
3472
|
-
CONFIG2.__prefersListener = apply;
|
|
3473
|
-
try {
|
|
3474
|
-
mq.addEventListener("change", apply);
|
|
3475
|
-
} catch (e) {
|
|
3476
|
-
mq.addListener(apply);
|
|
3477
|
-
}
|
|
3478
|
-
}
|
|
3479
|
-
} else {
|
|
3480
|
-
root.setAttribute("data-theme", "light");
|
|
3481
|
-
root.style.colorScheme = "light";
|
|
3482
|
-
}
|
|
3483
|
-
}
|
|
3484
|
-
const themeVarPrefix = CONFIG2.varPrefix ? `--${CONFIG2.varPrefix}-theme-` : "--theme-";
|
|
3485
|
-
for (const key in CONFIG2.cssVars) {
|
|
3486
|
-
if (key.startsWith(themeVarPrefix)) delete CONFIG2.cssVars[key];
|
|
3487
|
-
}
|
|
3488
|
-
for (const key in CONFIG2.cssMediaVars) {
|
|
3489
|
-
delete CONFIG2.cssMediaVars[key];
|
|
3490
|
-
}
|
|
3491
|
-
if (targetDoc && CONFIG2.cssVars) {
|
|
3492
|
-
const targetSelector = CONFIG2.scopeSelector || ":root";
|
|
3493
|
-
const sheets = targetDoc.styleSheets;
|
|
3494
|
-
for (let i = 0; i < sheets.length; i++) {
|
|
3495
|
-
try {
|
|
3496
|
-
const rules = sheets[i].cssRules;
|
|
3497
|
-
for (let j = 0; j < rules.length; j++) {
|
|
3498
|
-
if (rules[j].selectorText === targetSelector) {
|
|
3499
|
-
for (const key in CONFIG2.cssVars) {
|
|
3500
|
-
rules[j].style.setProperty(key, CONFIG2.cssVars[key]);
|
|
3501
|
-
}
|
|
3502
|
-
return CONFIG2;
|
|
3503
|
-
}
|
|
3504
|
-
}
|
|
3505
|
-
} catch (e) {
|
|
3506
|
-
}
|
|
3507
|
-
}
|
|
3508
|
-
}
|
|
3509
|
-
return CONFIG2;
|
|
3510
|
-
};
|
|
3511
|
-
var SET_OPTIONS = {};
|
|
3512
|
-
var set = (recivedConfig, options = SET_OPTIONS) => {
|
|
3513
|
-
let CONFIG2 = options.config || getActiveConfig();
|
|
3514
|
-
const {
|
|
3515
|
-
version,
|
|
3516
|
-
verbose,
|
|
3517
|
-
useVariable,
|
|
3518
|
-
useReset,
|
|
3519
|
-
useSvgSprite,
|
|
3520
|
-
useFontImport,
|
|
3521
|
-
useIconSprite,
|
|
3522
|
-
globalTheme,
|
|
3523
|
-
themeRoot,
|
|
3524
|
-
useDocumentTheme,
|
|
3525
|
-
useDefaultConfig,
|
|
3526
|
-
semanticIcons: semanticIcons2,
|
|
3527
|
-
files,
|
|
3528
|
-
assets,
|
|
3529
|
-
...config
|
|
3530
|
-
} = recivedConfig;
|
|
3531
|
-
if (options.newConfig) {
|
|
3532
|
-
CONFIG2 = setActiveConfig(options.newConfig);
|
|
3533
|
-
}
|
|
3534
|
-
if (files !== void 0) CONFIG2.files = files;
|
|
3535
|
-
if (assets !== void 0) CONFIG2.assets = assets;
|
|
3536
|
-
if (verbose !== void 0) CONFIG2.verbose = verbose;
|
|
3537
|
-
if (useVariable !== void 0) CONFIG2.useVariable = useVariable;
|
|
3538
|
-
if (useReset !== void 0) CONFIG2.useReset = useReset;
|
|
3539
|
-
if (useFontImport !== void 0) CONFIG2.useFontImport = useFontImport;
|
|
3540
|
-
if (useSvgSprite !== void 0) CONFIG2.useSvgSprite = useSvgSprite;
|
|
3541
|
-
if (useIconSprite !== void 0) CONFIG2.useIconSprite = useIconSprite;
|
|
3542
|
-
if (useDocumentTheme !== void 0) CONFIG2.useDocumentTheme = useDocumentTheme;
|
|
3543
|
-
if (globalTheme !== void 0) CONFIG2.globalTheme = globalTheme;
|
|
3544
|
-
if (themeRoot !== void 0) CONFIG2.themeRoot = themeRoot;
|
|
3545
|
-
if (recivedConfig.useThemeSuffixedVars !== void 0)
|
|
3546
|
-
CONFIG2.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
|
|
3547
|
-
if (useDefaultConfig !== void 0) CONFIG2.useDefaultConfig = useDefaultConfig;
|
|
3548
|
-
if (semanticIcons2 !== void 0) CONFIG2.semanticIcons = semanticIcons2;
|
|
3549
|
-
if (CONFIG2.verbose) console.log(CONFIG2);
|
|
3550
|
-
const setConfigDoc = CONFIG2.document && CONFIG2.document.documentElement ? CONFIG2.document : null;
|
|
3551
|
-
const setTargetDoc = setConfigDoc || (typeof document !== "undefined" ? document : null);
|
|
3552
|
-
const setTargetWin = setTargetDoc && setTargetDoc.defaultView || (typeof window !== "undefined" ? window : null);
|
|
3553
|
-
const setRoot = setTargetDoc && (CONFIG2.themeRoot || setTargetDoc.documentElement);
|
|
3554
|
-
if (setRoot && typeof setRoot.setAttribute === "function") {
|
|
3555
|
-
const forced = CONFIG2.globalTheme && CONFIG2.globalTheme !== "auto";
|
|
3556
|
-
if (forced) {
|
|
3557
|
-
setRoot.setAttribute("data-theme", CONFIG2.globalTheme);
|
|
3558
|
-
if (CONFIG2.globalTheme === "dark" || CONFIG2.globalTheme === "light") {
|
|
3559
|
-
setRoot.style.colorScheme = CONFIG2.globalTheme;
|
|
3560
|
-
} else {
|
|
3561
|
-
setRoot.style.colorScheme = "light dark";
|
|
3562
|
-
}
|
|
3563
|
-
} else if (setTargetWin && setTargetWin.matchMedia) {
|
|
3564
|
-
const apply = (mq2) => {
|
|
3565
|
-
setRoot.setAttribute("data-theme", mq2.matches ? "dark" : "light");
|
|
3566
|
-
};
|
|
3567
|
-
const mq = setTargetWin.matchMedia("(prefers-color-scheme: dark)");
|
|
3568
|
-
apply(mq);
|
|
3569
|
-
setRoot.style.colorScheme = "light dark";
|
|
3570
|
-
if (!CONFIG2.__prefersListener) {
|
|
3571
|
-
CONFIG2.__prefersListener = apply;
|
|
3572
|
-
try {
|
|
3573
|
-
mq.addEventListener("change", apply);
|
|
3574
|
-
} catch (e) {
|
|
3575
|
-
mq.addListener(apply);
|
|
3576
|
-
}
|
|
3577
|
-
}
|
|
3578
|
-
} else {
|
|
3579
|
-
setRoot.setAttribute("data-theme", "light");
|
|
3580
|
-
setRoot.style.colorScheme = "light";
|
|
3581
|
-
}
|
|
3582
|
-
}
|
|
3583
|
-
if (!CONFIG2.__svgCache) CONFIG2.__svgCache = {};
|
|
3584
|
-
const keys = Object.keys(config);
|
|
3585
|
-
const keySet = new Set(keys);
|
|
3586
|
-
keys.forEach((key) => {
|
|
3587
|
-
const lower = key.toLowerCase();
|
|
3588
|
-
if (lower !== key && keySet.has(lower)) {
|
|
3589
|
-
deepMerge(config[lower], config[key]);
|
|
3590
|
-
}
|
|
3591
|
-
});
|
|
3592
|
-
keys.map((key) => {
|
|
3593
|
-
const lower = key.toLowerCase();
|
|
3594
|
-
if (lower !== key && keySet.has(lower)) return;
|
|
3595
|
-
return setEach(key, config[key]);
|
|
3596
|
-
});
|
|
3597
|
-
if (CONFIG2.varPrefix) {
|
|
3598
|
-
if (CONFIG2.typography) CONFIG2.typography.varPrefix = CONFIG2.varPrefix;
|
|
3599
|
-
if (CONFIG2.spacing) CONFIG2.spacing.varPrefix = CONFIG2.varPrefix;
|
|
3600
|
-
if (CONFIG2.timing) CONFIG2.timing.varPrefix = CONFIG2.varPrefix;
|
|
3601
|
-
}
|
|
3602
|
-
if (config.typography) {
|
|
3603
|
-
try {
|
|
3604
|
-
applyTypographySequence();
|
|
3605
|
-
} catch (e) {
|
|
3606
|
-
if (CONFIG2.verbose) console.warn("Error applying typography sequence", e);
|
|
3607
|
-
}
|
|
3608
|
-
}
|
|
3609
|
-
if (config.spacing) {
|
|
3610
|
-
try {
|
|
3611
|
-
applySpacingSequence();
|
|
3612
|
-
} catch (e) {
|
|
3613
|
-
if (CONFIG2.verbose) console.warn("Error applying spacing sequence", e);
|
|
3614
|
-
}
|
|
3615
|
-
}
|
|
3616
|
-
if (config.timing) {
|
|
3617
|
-
try {
|
|
3618
|
-
applyTimingSequence();
|
|
3619
|
-
} catch (e) {
|
|
3620
|
-
if (CONFIG2.verbose) console.warn("Error applying timing sequence", e);
|
|
3621
|
-
}
|
|
3622
|
-
}
|
|
3623
|
-
applyDocument();
|
|
3624
|
-
const computedReset = applyReset();
|
|
3625
|
-
if (computedReset) CONFIG2.reset = computedReset;
|
|
3626
|
-
return CONFIG2;
|
|
3627
|
-
};
|
|
3628
|
-
return __toCommonJS(index_exports);
|
|
3629
|
-
})();
|
|
3630
|
-
// @preserve-env
|