@symbo.ls/scratch 3.2.3 → 3.2.7

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.
Files changed (66) hide show
  1. package/dist/cjs/factory.js +23 -494
  2. package/dist/cjs/index.js +11 -2742
  3. package/dist/cjs/set.js +66 -2060
  4. package/dist/esm/factory.js +43 -0
  5. package/dist/esm/index.js +12 -0
  6. package/dist/esm/set.js +148 -0
  7. package/dist/iife/index.js +2580 -0
  8. package/package.json +25 -15
  9. package/src/set.js +22 -7
  10. package/src/system/color.js +48 -11
  11. package/src/system/font.js +19 -5
  12. package/src/system/reset.js +12 -3
  13. package/src/system/shadow.js +20 -13
  14. package/src/system/spacing.js +63 -56
  15. package/src/system/theme.js +4 -3
  16. package/src/system/timing.js +1 -1
  17. package/src/transforms/index.js +212 -95
  18. package/src/utils/color.js +79 -0
  19. package/src/utils/font.js +54 -14
  20. package/src/utils/sequence.js +94 -39
  21. package/src/utils/sprite.js +2 -2
  22. package/src/utils/unit.js +69 -2
  23. package/src/utils/var.js +1 -2
  24. package/dist/cjs/defaultConfig/animation.js +0 -26
  25. package/dist/cjs/defaultConfig/cases.js +0 -26
  26. package/dist/cjs/defaultConfig/class.js +0 -27
  27. package/dist/cjs/defaultConfig/color.js +0 -28
  28. package/dist/cjs/defaultConfig/document.js +0 -26
  29. package/dist/cjs/defaultConfig/font-family.js +0 -34
  30. package/dist/cjs/defaultConfig/font.js +0 -26
  31. package/dist/cjs/defaultConfig/grid.js +0 -27
  32. package/dist/cjs/defaultConfig/icons.js +0 -28
  33. package/dist/cjs/defaultConfig/index.js +0 -222
  34. package/dist/cjs/defaultConfig/media.js +0 -31
  35. package/dist/cjs/defaultConfig/responsive.js +0 -52
  36. package/dist/cjs/defaultConfig/sequence.js +0 -51
  37. package/dist/cjs/defaultConfig/shadow.js +0 -26
  38. package/dist/cjs/defaultConfig/spacing.js +0 -87
  39. package/dist/cjs/defaultConfig/svg.js +0 -28
  40. package/dist/cjs/defaultConfig/templates.js +0 -26
  41. package/dist/cjs/defaultConfig/theme.js +0 -26
  42. package/dist/cjs/defaultConfig/timing.js +0 -68
  43. package/dist/cjs/defaultConfig/typography.js +0 -72
  44. package/dist/cjs/defaultConfig/unit.js +0 -28
  45. package/dist/cjs/package.json +0 -4
  46. package/dist/cjs/system/color.js +0 -1175
  47. package/dist/cjs/system/document.js +0 -987
  48. package/dist/cjs/system/font.js +0 -1009
  49. package/dist/cjs/system/index.js +0 -2227
  50. package/dist/cjs/system/reset.js +0 -1099
  51. package/dist/cjs/system/shadow.js +0 -1384
  52. package/dist/cjs/system/spacing.js +0 -1338
  53. package/dist/cjs/system/svg.js +0 -1086
  54. package/dist/cjs/system/theme.js +0 -1276
  55. package/dist/cjs/system/timing.js +0 -1213
  56. package/dist/cjs/system/typography.js +0 -1311
  57. package/dist/cjs/tests/index.js +0 -30
  58. package/dist/cjs/transforms/index.js +0 -1613
  59. package/dist/cjs/utils/color.js +0 -333
  60. package/dist/cjs/utils/font.js +0 -69
  61. package/dist/cjs/utils/index.js +0 -1548
  62. package/dist/cjs/utils/sequence.js +0 -1198
  63. package/dist/cjs/utils/sprite.js +0 -579
  64. package/dist/cjs/utils/theme.js +0 -31
  65. package/dist/cjs/utils/unit.js +0 -28
  66. package/dist/cjs/utils/var.js +0 -1040
package/dist/cjs/index.js CHANGED
@@ -5,9 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
6
  var __getProtoOf = Object.getPrototypeOf;
7
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __commonJS = (cb, mod) => function __require() {
9
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
10
- };
11
8
  var __export = (target, all) => {
12
9
  for (var name in all)
13
10
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -20,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
20
17
  }
21
18
  return to;
22
19
  };
20
+ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
23
21
  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
24
22
  // If the importer is in node compatibility mode or this is not an ESM
25
23
  // file that has been converted to a CommonJS file using a Babel-
@@ -29,2746 +27,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
29
27
  mod
30
28
  ));
31
29
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
32
-
33
- // ../utils/dist/cjs/index.js
34
- var require_cjs = __commonJS({
35
- "../utils/dist/cjs/index.js"(exports, module2) {
36
- "use strict";
37
- var __defProp3 = Object.defineProperty;
38
- var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
39
- var __getOwnPropNames2 = Object.getOwnPropertyNames;
40
- var __hasOwnProp3 = Object.prototype.hasOwnProperty;
41
- var __export2 = (target, all) => {
42
- for (var name in all)
43
- __defProp3(target, name, { get: all[name], enumerable: true });
44
- };
45
- var __copyProps2 = (to, from, except, desc) => {
46
- if (from && typeof from === "object" || typeof from === "function") {
47
- for (let key of __getOwnPropNames2(from))
48
- if (!__hasOwnProp3.call(to, key) && key !== except)
49
- __defProp3(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
50
- }
51
- return to;
52
- };
53
- var __toCommonJS2 = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
54
- var index_exports2 = {};
55
- __export2(index_exports2, {
56
- arrayzeValue: () => arrayzeValue3,
57
- copyJavaScriptToClipboard: () => copyJavaScriptToClipboard,
58
- copyStringToClipboard: () => copyStringToClipboard,
59
- fibonacciNumberByIndex: () => fibonacciNumberByIndex,
60
- findClosestNumber: () => findClosestNumber,
61
- findClosestNumberInFactory: () => findClosestNumberInFactory,
62
- formatDate: () => formatDate,
63
- isPhoto: () => isPhoto,
64
- loadCssFile: () => loadCssFile,
65
- loadJavascript: () => loadJavascript,
66
- loadJavascriptFile: () => loadJavascriptFile,
67
- loadJavascriptFileEmbedSync: () => loadJavascriptFileEmbedSync,
68
- loadJavascriptFileSync: () => loadJavascriptFileSync,
69
- loadRemoteCSS: () => loadRemoteCSS,
70
- loadRemoteScript: () => loadRemoteScript,
71
- removeChars: () => removeChars,
72
- toCamelCase: () => toCamelCase2,
73
- toDashCase: () => toDashCase2,
74
- toDescriptionCase: () => toDescriptionCase,
75
- toTitleCase: () => toTitleCase,
76
- toggleFullscreen: () => toggleFullscreen
77
- });
78
- module2.exports = __toCommonJS2(index_exports2);
79
- var window22 = globalThis;
80
- var document22 = window22.document;
81
- var isObject2 = (arg) => {
82
- if (arg === null) return false;
83
- return typeof arg === "object" && arg.constructor === Object;
84
- };
85
- var isString2 = (arg) => typeof arg === "string";
86
- var isNumber2 = (arg) => typeof arg === "number";
87
- var isArray2 = (arg) => Array.isArray(arg);
88
- var STATE_METHODS3 = [
89
- "update",
90
- "parse",
91
- "clean",
92
- "create",
93
- "destroy",
94
- "add",
95
- "toggle",
96
- "remove",
97
- "apply",
98
- "set",
99
- "reset",
100
- "replace",
101
- "quietReplace",
102
- "quietUpdate",
103
- "applyReplace",
104
- "applyFunction",
105
- "keys",
106
- "values",
107
- "ref",
108
- "rootUpdate",
109
- "parentUpdate",
110
- "parent",
111
- "__element",
112
- "__depends",
113
- "__ref",
114
- "__children",
115
- "root",
116
- "setByPath",
117
- "setPathCollection",
118
- "removeByPath",
119
- "removePathCollection",
120
- "getByPath"
121
- ];
122
- var PROPS_METHODS3 = ["update", "__element"];
123
- var METHODS3 = [
124
- "set",
125
- "reset",
126
- "update",
127
- "remove",
128
- "updateContent",
129
- "removeContent",
130
- "lookup",
131
- "lookdown",
132
- "lookdownAll",
133
- "getRef",
134
- "getPath",
135
- "setNodeStyles",
136
- "spotByPath",
137
- "keys",
138
- "parse",
139
- "setProps",
140
- "parseDeep",
141
- "variables",
142
- "if",
143
- "log",
144
- "verbose",
145
- "warn",
146
- "error",
147
- "call",
148
- "nextElement",
149
- "previousElement"
150
- ];
151
- var METHODS_EXL3 = [
152
- ...["node", "context", "extends", "__element", "__ref"],
153
- ...METHODS3,
154
- ...STATE_METHODS3,
155
- ...PROPS_METHODS3
156
- ];
157
- var isMobile2 = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
158
- var STATE_METHODS22 = [
159
- "update",
160
- "parse",
161
- "clean",
162
- "create",
163
- "destroy",
164
- "add",
165
- "toggle",
166
- "remove",
167
- "apply",
168
- "set",
169
- "reset",
170
- "replace",
171
- "quietReplace",
172
- "quietUpdate",
173
- "applyReplace",
174
- "applyFunction",
175
- "keys",
176
- "values",
177
- "ref",
178
- "rootUpdate",
179
- "parentUpdate",
180
- "parent",
181
- "__element",
182
- "__depends",
183
- "__ref",
184
- "__children",
185
- "root",
186
- "setByPath",
187
- "setPathCollection",
188
- "removeByPath",
189
- "removePathCollection",
190
- "getByPath"
191
- ];
192
- var PROPS_METHODS22 = ["update", "__element"];
193
- var METHODS22 = [
194
- "set",
195
- "reset",
196
- "update",
197
- "remove",
198
- "updateContent",
199
- "removeContent",
200
- "lookup",
201
- "lookdown",
202
- "lookdownAll",
203
- "getRef",
204
- "getPath",
205
- "setNodeStyles",
206
- "spotByPath",
207
- "keys",
208
- "parse",
209
- "setProps",
210
- "parseDeep",
211
- "variables",
212
- "if",
213
- "log",
214
- "verbose",
215
- "warn",
216
- "error",
217
- "call",
218
- "nextElement",
219
- "previousElement"
220
- ];
221
- var METHODS_EXL22 = [
222
- ...["node", "context", "extends", "__element", "__ref"],
223
- ...METHODS22,
224
- ...STATE_METHODS22,
225
- ...PROPS_METHODS22
226
- ];
227
- var window32 = globalThis;
228
- var document32 = window32.document;
229
- async function toggleFullscreen(opts) {
230
- if (!document.fullscreenElement) {
231
- try {
232
- await (this.node || document).requestFullscreen();
233
- } catch (err) {
234
- console.warn(`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`);
235
- }
236
- } else {
237
- await document.exitFullscreen();
238
- }
239
- }
240
- var findClosestNumber = (number, arr) => {
241
- return (isArray2(arr) ? arr : Object.values(arr)).reduce((prev, curr) => {
242
- return Math.abs(curr - number) < Math.abs(prev - number) ? curr : prev;
243
- });
244
- };
245
- var findClosestNumberInFactory = (val, factory) => {
246
- val = parseFloat(val);
247
- if (isObject2(factory)) factory = Object.values(factory);
248
- return findClosestNumber(val, factory);
249
- };
250
- var formatDate = (timestamp) => {
251
- if (!timestamp) return "";
252
- const d = new Date(timestamp);
253
- const ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
254
- const mo = new Intl.DateTimeFormat("en", { month: "short" }).format(d);
255
- const da = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(d);
256
- return `${da} ${mo}, ${ye}`;
257
- };
258
- var fibonacciNumberByIndex = function fibonacciNumberByIndex2(n) {
259
- const fib = [0, 1];
260
- for (let i = 2; i <= n; i++) {
261
- fib[i] = fib[i - 1] + fib[i - 2];
262
- }
263
- return fib[n];
264
- };
265
- var loadJavascriptFile = (FILE_URL, async = false, doc = document, type = "text/javascript") => {
266
- return new Promise((resolve, reject) => {
267
- try {
268
- const scriptEle = doc.createElement("script");
269
- scriptEle.type = type;
270
- scriptEle.async = async;
271
- scriptEle.src = FILE_URL;
272
- scriptEle.addEventListener("load", (ev) => {
273
- resolve({
274
- status: true
275
- });
276
- });
277
- scriptEle.addEventListener("error", (ev) => {
278
- reject(
279
- new Error({
280
- status: false,
281
- message: `Failed to load the script ${FILE_URL}`
282
- })
283
- );
284
- });
285
- doc.body.appendChild(scriptEle);
286
- } catch (error) {
287
- reject(error);
288
- }
289
- });
290
- };
291
- var loadJavascriptFileSync = (fileUrl, doc = document, type = "text/javascript") => {
292
- return new Promise((resolve, reject) => {
293
- const scriptEle = doc.createElement("script");
294
- scriptEle.type = type;
295
- scriptEle.src = fileUrl;
296
- const blocker = doc.createElement("div");
297
- blocker.style.cssText = "position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.8);z-index:9999;";
298
- doc.body.appendChild(blocker);
299
- scriptEle.onload = () => {
300
- console.log(`Successfully loaded: ${fileUrl}`);
301
- doc.body.removeChild(blocker);
302
- resolve();
303
- };
304
- scriptEle.onerror = () => {
305
- doc.body.removeChild(blocker);
306
- reject(new Error(`Failed to load: ${fileUrl}`));
307
- };
308
- doc.body.appendChild(scriptEle);
309
- });
310
- };
311
- var loadJavascriptFileEmbedSync = (FILE_URL, doc = document, fallback, type = "text/javascript") => {
312
- const xhr = new window.XMLHttpRequest();
313
- xhr.open("GET", FILE_URL, false);
314
- xhr.send();
315
- if (xhr.status === 200) {
316
- const scriptEle = doc.createElement("script");
317
- scriptEle.type = type;
318
- scriptEle.text = xhr.responseText;
319
- doc.body.appendChild(scriptEle);
320
- if (typeof fallback === "function") fallback();
321
- } else {
322
- throw new Error(`Failed to load the script ${FILE_URL}`);
323
- }
324
- };
325
- var loadCssFile = (FILE_URL, async = false, doc = document, type = "text/javascript") => {
326
- return new Promise((resolve, reject) => {
327
- try {
328
- const linkElem = doc.createElement("link");
329
- linkElem.rel = "stylesheet";
330
- linkElem.href = FILE_URL;
331
- linkElem.addEventListener("load", (ev) => {
332
- resolve({
333
- status: true
334
- });
335
- });
336
- doc.head.appendChild(linkElem);
337
- } catch (error) {
338
- reject(error);
339
- }
340
- });
341
- };
342
- var loadJavascript = (body, async = false, doc = document, type = "text/javascript", id = "smbls-script") => {
343
- try {
344
- const scriptEle = doc.createElement("script");
345
- scriptEle.type = type;
346
- scriptEle.async = async;
347
- scriptEle.id = id;
348
- scriptEle.innerHTML = body;
349
- doc.body.appendChild(scriptEle);
350
- } catch (error) {
351
- console.warn(error);
352
- }
353
- };
354
- function loadRemoteScript(url, options = {}) {
355
- const { window: window4 = globalThis } = options;
356
- const { document: document4 = window4.document } = options;
357
- return new Promise((resolve, reject) => {
358
- const existingScript = document4.querySelector(`script[src="${url}"]`);
359
- if (existingScript) {
360
- return resolve(existingScript);
361
- }
362
- const script = document4.createElement("script");
363
- script.src = url;
364
- script.async = options.async === true;
365
- script.type = options.type || "text/javascript";
366
- if (options.id) script.id = options.id;
367
- if (options.integrity) script.integrity = options.integrity;
368
- if (options.crossOrigin) script.crossOrigin = options.crossOrigin;
369
- script.onload = () => {
370
- script.onerror = script.onload = null;
371
- resolve(script);
372
- };
373
- script.onerror = () => {
374
- script.onerror = script.onload = null;
375
- reject(new Error(`Failed to load script: ${url}`));
376
- };
377
- document4.head.appendChild(script);
378
- });
379
- }
380
- async function loadRemoteCSS(url, options = {}) {
381
- const { window: window4 = globalThis } = options;
382
- const { document: document4 = window4.document } = options;
383
- return new Promise((resolve, reject) => {
384
- const existingLink = document4.querySelector(`link[href="${url}"]`);
385
- if (existingLink) {
386
- return resolve(existingLink);
387
- }
388
- const link = document4.createElement("link");
389
- link.href = url;
390
- link.rel = options.rel || "stylesheet";
391
- link.type = "text/css";
392
- link.media = options.media || "all";
393
- if (options.id) link.id = options.id;
394
- if (options.integrity) link.integrity = options.integrity;
395
- if (options.crossOrigin) link.crossOrigin = options.crossOrigin;
396
- link.onload = () => {
397
- link.onerror = link.onload = null;
398
- resolve(link);
399
- };
400
- link.onerror = () => {
401
- link.onerror = link.onload = null;
402
- reject(new Error(`Failed to load stylesheet: ${url}`));
403
- };
404
- document4.head.appendChild(link);
405
- });
406
- }
407
- var isPhoto = (format) => ["jpeg", "gif", "jpg", "png", "tiff", "woff"].includes(format);
408
- var copyStringToClipboard = async (str) => {
409
- try {
410
- await navigator.clipboard.writeText(str);
411
- } catch (err) {
412
- console.warn("Failed to copy text: ", err);
413
- }
414
- };
415
- var copyJavaScriptToClipboard = async (jsCode) => {
416
- try {
417
- const blob = new Blob([jsCode], { type: "text/javascript" });
418
- const clipboardItem = new window.ClipboardItem({ "text/plain": blob });
419
- await navigator.clipboard.write([clipboardItem]);
420
- console.log("JavaScript code copied to clipboard as text/javascript");
421
- } catch (err) {
422
- console.error("Failed to copy JavaScript code: ", err);
423
- }
424
- };
425
- var removeChars = (str) => {
426
- return str.replace(/[^a-zA-Z0-9_]/g, "");
427
- };
428
- var toCamelCase2 = (str) => {
429
- return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
430
- return index === 0 ? word.toLowerCase() : word.toUpperCase();
431
- }).replaceAll(/\s+/g, "");
432
- };
433
- var toTitleCase = (str) => str && str.replace(/\w\S*/g, (txt) => {
434
- return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
435
- });
436
- var toDashCase2 = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
437
- var toDescriptionCase = (str = "") => {
438
- if (typeof str !== "string") return;
439
- const result = str.replace(/([A-Z])/g, " $1");
440
- return result.charAt(0).toUpperCase() + result.slice(1);
441
- };
442
- var arrayzeValue3 = (val) => {
443
- if (isArray2(val)) return val;
444
- if (isString2(val)) return val.split(" ");
445
- if (isObject2(val)) return Object.values(val);
446
- if (isNumber2(val)) return [val];
447
- };
448
- }
449
- });
450
-
451
- // src/index.js
452
30
  var index_exports = {};
453
31
  __export(index_exports, {
454
- ANIMATION: () => ANIMATION,
455
- BREAKPOINTS: () => BREAKPOINTS,
456
- CASES: () => CASES,
457
- CLASS: () => CLASS,
458
- COLOR: () => COLOR,
459
- CONFIG: () => CONFIG,
460
- CSS_VARS: () => CSS_VARS,
461
- DEVICES: () => DEVICES,
462
- DOCUMENT: () => DOCUMENT,
463
- FACTORY: () => FACTORY,
464
- FONT: () => FONT,
465
- FONT_FACE: () => FONT_FACE,
466
- FONT_FAMILY: () => FONT_FAMILY,
467
- FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
468
- GRADIENT: () => GRADIENT,
469
- GRID: () => GRID,
470
- ICONS: () => ICONS,
471
- MEDIA: () => MEDIA,
472
- RESET: () => RESET,
473
- SEMANTIC_ICONS: () => SEMANTIC_ICONS,
474
- SEQUENCE: () => SEQUENCE,
475
- SHADOW: () => SHADOW,
476
- SPACING: () => SPACING,
477
- SVG: () => SVG,
478
- SVG_DATA: () => SVG_DATA,
479
- TEMPLATES: () => TEMPLATES,
480
- THEME: () => THEME,
481
- TIMING: () => TIMING,
482
- TYPOGRAPHY: () => TYPOGRAPHY,
483
- UNIT: () => UNIT,
484
- VALUE_TRANSFORMERS: () => VALUE_TRANSFORMERS,
485
- activateConfig: () => activateConfig,
486
- appendSVGSprite: () => appendSVGSprite,
487
- appendSvgIconsSprite: () => appendSvgIconsSprite,
488
- applyDocument: () => applyDocument,
489
- applyHeadings: () => applyHeadings,
490
- applyMediaSequenceVars: () => applyMediaSequenceVars,
491
- applyReset: () => applyReset,
492
- applySequenceGlobalVars: () => applySequenceGlobalVars,
493
- applySequenceVars: () => applySequenceVars,
494
- applySpacingSequence: () => applySpacingSequence,
495
- applyTimingSequence: () => applyTimingSequence,
496
- applyTypographySequence: () => applyTypographySequence,
497
- changeLightness: () => changeLightness,
498
- checkIfBoxSize: () => checkIfBoxSize,
499
- colorStringToRgbaArray: () => colorStringToRgbaArray,
500
- convertSvgToSymbol: () => convertSvgToSymbol,
501
- findHeadingLetter: () => findHeadingLetter,
502
- findHeadings: () => findHeadings,
503
- generateSequence: () => generateSequence,
504
- generateSequencePosition: () => generateSequencePosition,
505
- generateSprite: () => generateSprite,
506
- generateSubSequence: () => generateSubSequence,
507
- getActiveConfig: () => getActiveConfig,
508
- getColor: () => getColor,
509
- getColorShade: () => getColorShade,
510
- getDefaultOrFirstKey: () => getDefaultOrFirstKey,
511
- getFontFace: () => getFontFace,
512
- getFontFaceEach: () => getFontFaceEach,
513
- getFontFaceEachString: () => getFontFaceEachString,
514
- getFontFaceString: () => getFontFaceString,
515
- getFontFamily: () => getFontFamily,
516
- getFontFormat: () => getFontFormat,
517
- getFontSizeByKey: () => getFontSizeByKey,
518
- getMediaColor: () => getMediaColor,
519
- getMediaTheme: () => getMediaTheme,
520
- getRgbTone: () => getRgbTone,
521
- getSequenceValue: () => getSequenceValue,
522
- getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
523
- getShadow: () => getShadow,
524
- getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
525
- getSpacingByKey: () => getSpacingByKey,
526
- getSubratio: () => getSubratio,
527
- getSubratioDifference: () => getSubratioDifference,
528
- getTheme: () => getTheme,
529
- getTimingByKey: () => getTimingByKey,
530
- getTimingFunction: () => getTimingFunction,
531
- hexToRgb: () => hexToRgb,
532
- hexToRgbArray: () => hexToRgbArray,
533
- hexToRgba: () => hexToRgba,
534
- hslToRgb: () => hslToRgb,
535
- isScalingUnit: () => isScalingUnit,
536
- mixTwoColors: () => mixTwoColors,
537
- mixTwoRgb: () => mixTwoRgb,
538
- mixTwoRgba: () => mixTwoRgba,
539
- numToLetterMap: () => numToLetterMap,
540
- opacify: () => opacify,
541
- returnSubThemeOrDefault: () => returnSubThemeOrDefault,
542
- rgbArrayToHex: () => rgbArrayToHex,
543
- rgbToHSL: () => rgbToHSL,
544
- rgbToHex: () => rgbToHex,
545
- runThroughMedia: () => runThroughMedia,
546
- scratchSystem: () => system_exports,
547
- scratchUtils: () => utils_exports,
548
- set: () => set,
549
- setActiveConfig: () => setActiveConfig,
550
- setColor: () => setColor,
551
- setCustomFont: () => setCustomFont,
552
- setCustomFontMedia: () => setCustomFontMedia,
553
- setEach: () => setEach,
554
- setFont: () => setFont,
555
- setFontFamily: () => setFontFamily,
556
- setGradient: () => setGradient,
557
- setInCustomFontMedia: () => setInCustomFontMedia,
558
- setMediaTheme: () => setMediaTheme,
559
- setSVG: () => setSVG,
560
- setScalingVar: () => setScalingVar,
561
- setShadow: () => setShadow,
562
- setSubScalingVar: () => setSubScalingVar,
563
- setSvgIcon: () => setSvgIcon,
564
- setTheme: () => setTheme,
565
- setValue: () => setValue,
566
- setVariables: () => setVariables,
567
- splitTransition: () => splitTransition,
568
- transformBackgroundImage: () => transformBackgroundImage,
569
- transformBorder: () => transformBorder,
570
- transformBorderRadius: () => transformBorderRadius,
571
- transformBoxShadow: () => transformBoxShadow,
572
- transformDuration: () => transformDuration,
573
- transformShadow: () => transformShadow,
574
- transformSize: () => transformSize,
575
- transformSizeRatio: () => transformSizeRatio,
576
- transformTextStroke: () => transformTextStroke,
577
- transformTransition: () => transformTransition,
578
- transfromGap: () => transfromGap
32
+ scratchSystem: () => scratchSystem,
33
+ scratchUtils: () => scratchUtils
579
34
  });
580
35
  module.exports = __toCommonJS(index_exports);
581
-
582
- // src/utils/index.js
583
- var utils_exports = {};
584
- __export(utils_exports, {
585
- applyMediaSequenceVars: () => applyMediaSequenceVars,
586
- applySequenceGlobalVars: () => applySequenceGlobalVars,
587
- applySequenceVars: () => applySequenceVars,
588
- changeLightness: () => changeLightness,
589
- colorStringToRgbaArray: () => colorStringToRgbaArray,
590
- convertSvgToSymbol: () => convertSvgToSymbol,
591
- findHeadingLetter: () => findHeadingLetter,
592
- findHeadings: () => findHeadings,
593
- generateSequence: () => generateSequence,
594
- generateSequencePosition: () => generateSequencePosition,
595
- generateSprite: () => generateSprite,
596
- generateSubSequence: () => generateSubSequence,
597
- getColorShade: () => getColorShade,
598
- getDefaultOrFirstKey: () => getDefaultOrFirstKey,
599
- getFontFace: () => getFontFace,
600
- getFontFaceEach: () => getFontFaceEach,
601
- getFontFaceEachString: () => getFontFaceEachString,
602
- getFontFaceString: () => getFontFaceString,
603
- getFontFormat: () => getFontFormat,
604
- getRgbTone: () => getRgbTone,
605
- getSequenceValue: () => getSequenceValue,
606
- getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
607
- getSubratio: () => getSubratio,
608
- getSubratioDifference: () => getSubratioDifference,
609
- hexToRgb: () => hexToRgb,
610
- hexToRgbArray: () => hexToRgbArray,
611
- hexToRgba: () => hexToRgba,
612
- hslToRgb: () => hslToRgb,
613
- isScalingUnit: () => isScalingUnit,
614
- mixTwoColors: () => mixTwoColors,
615
- mixTwoRgb: () => mixTwoRgb,
616
- mixTwoRgba: () => mixTwoRgba,
617
- numToLetterMap: () => numToLetterMap,
618
- opacify: () => opacify,
619
- returnSubThemeOrDefault: () => returnSubThemeOrDefault,
620
- rgbArrayToHex: () => rgbArrayToHex,
621
- rgbToHSL: () => rgbToHSL,
622
- rgbToHex: () => rgbToHex,
623
- setCustomFont: () => setCustomFont,
624
- setCustomFontMedia: () => setCustomFontMedia,
625
- setInCustomFontMedia: () => setInCustomFontMedia,
626
- setScalingVar: () => setScalingVar,
627
- setSubScalingVar: () => setSubScalingVar,
628
- setVariables: () => setVariables
629
- });
630
-
631
- // src/utils/unit.js
632
- var isScalingUnit = (unit) => {
633
- return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
634
- };
635
-
636
- // ../../../domql/packages/utils/dist/esm/globals.js
637
- var window2 = globalThis;
638
- var document2 = window2.document;
639
-
640
- // ../../../domql/packages/utils/dist/esm/node.js
641
- var isDOMNode = (obj) => {
642
- return typeof window2 !== "undefined" && (obj instanceof window2.Node || obj instanceof window2.Window || obj === window2 || obj === document);
643
- };
644
-
645
- // ../../../domql/packages/utils/dist/esm/types.js
646
- var isObject = (arg) => {
647
- if (arg === null) return false;
648
- return typeof arg === "object" && arg.constructor === Object;
649
- };
650
- var isString = (arg) => typeof arg === "string";
651
- var isNumber = (arg) => typeof arg === "number";
652
- var isFunction = (arg) => typeof arg === "function";
653
- var isBoolean = (arg) => arg === true || arg === false;
654
- var isNull = (arg) => arg === null;
655
- var isArray = (arg) => Array.isArray(arg);
656
- var isDate = (d) => d instanceof Date;
657
- var isObjectLike = (arg) => {
658
- if (arg === null) return false;
659
- return typeof arg === "object";
660
- };
661
- var isDefined = (arg) => {
662
- return isObject(arg) || isObjectLike(arg) || isString(arg) || isNumber(arg) || isFunction(arg) || isArray(arg) || isObjectLike(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
663
- };
664
- var isUndefined = (arg) => {
665
- return arg === void 0;
666
- };
667
-
668
- // ../../../domql/packages/utils/dist/esm/array.js
669
- var unstackArrayOfObjects = (arr, exclude = []) => {
670
- return arr.reduce(
671
- (a, c) => deepMerge(a, deepClone(c, { exclude }), exclude),
672
- {}
673
- );
674
- };
675
-
676
- // ../../../domql/packages/utils/dist/esm/keys.js
677
- var STATE_METHODS = [
678
- "update",
679
- "parse",
680
- "clean",
681
- "create",
682
- "destroy",
683
- "add",
684
- "toggle",
685
- "remove",
686
- "apply",
687
- "set",
688
- "reset",
689
- "replace",
690
- "quietReplace",
691
- "quietUpdate",
692
- "applyReplace",
693
- "applyFunction",
694
- "keys",
695
- "values",
696
- "ref",
697
- "rootUpdate",
698
- "parentUpdate",
699
- "parent",
700
- "__element",
701
- "__depends",
702
- "__ref",
703
- "__children",
704
- "root",
705
- "setByPath",
706
- "setPathCollection",
707
- "removeByPath",
708
- "removePathCollection",
709
- "getByPath"
710
- ];
711
- var PROPS_METHODS = ["update", "__element"];
712
- var METHODS = [
713
- "set",
714
- "reset",
715
- "update",
716
- "remove",
717
- "updateContent",
718
- "removeContent",
719
- "lookup",
720
- "lookdown",
721
- "lookdownAll",
722
- "getRef",
723
- "getPath",
724
- "setNodeStyles",
725
- "spotByPath",
726
- "keys",
727
- "parse",
728
- "setProps",
729
- "parseDeep",
730
- "variables",
731
- "if",
732
- "log",
733
- "verbose",
734
- "warn",
735
- "error",
736
- "call",
737
- "nextElement",
738
- "previousElement"
739
- ];
740
- var METHODS_EXL = [
741
- ...["node", "context", "extends", "__element", "__ref"],
742
- ...METHODS,
743
- ...STATE_METHODS,
744
- ...PROPS_METHODS
745
- ];
746
-
747
- // ../../../domql/packages/utils/dist/esm/object.js
748
- var __defProp2 = Object.defineProperty;
749
- var __defProps = Object.defineProperties;
750
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
751
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
752
- var __hasOwnProp2 = Object.prototype.hasOwnProperty;
753
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
754
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
755
- var __spreadValues = (a, b) => {
756
- for (var prop in b || (b = {}))
757
- if (__hasOwnProp2.call(b, prop))
758
- __defNormalProp(a, prop, b[prop]);
759
- if (__getOwnPropSymbols)
760
- for (var prop of __getOwnPropSymbols(b)) {
761
- if (__propIsEnum.call(b, prop))
762
- __defNormalProp(a, prop, b[prop]);
763
- }
764
- return a;
765
- };
766
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
767
- var merge = (element, obj, excludeFrom = []) => {
768
- for (const e in obj) {
769
- const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, e);
770
- if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__")) {
771
- continue;
772
- }
773
- const elementProp = element[e];
774
- const objProp = obj[e];
775
- if (elementProp === void 0) {
776
- element[e] = objProp;
777
- }
778
- }
779
- return element;
780
- };
781
- var deepMerge = (element, extend, excludeFrom = METHODS_EXL) => {
782
- for (const e in extend) {
783
- const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(extend, e);
784
- if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__")) {
785
- continue;
786
- }
787
- const elementProp = element[e];
788
- const extendProp = extend[e];
789
- if (isObjectLike(elementProp) && isObjectLike(extendProp)) {
790
- deepMerge(elementProp, extendProp, excludeFrom);
791
- } else if (elementProp === void 0) {
792
- element[e] = extendProp;
793
- }
794
- }
795
- return element;
796
- };
797
- var deepClone = (obj, options = {}) => {
798
- const {
799
- exclude = [],
800
- cleanUndefined = false,
801
- cleanNull = false,
802
- window: targetWindow,
803
- visited = /* @__PURE__ */ new WeakMap(),
804
- handleExtends = false
805
- } = options;
806
- const contentWindow = targetWindow || window2 || globalThis;
807
- if (!isObjectLike(obj) || isDOMNode(obj)) {
808
- return obj;
809
- }
810
- if (visited.has(obj)) {
811
- return visited.get(obj);
812
- }
813
- const clone2 = contentWindow ? isArray(obj) ? new contentWindow.Array() : new contentWindow.Object() : isArray(obj) ? [] : {};
814
- visited.set(obj, clone2);
815
- for (const key in obj) {
816
- if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
817
- if (exclude.includes(key) || key.startsWith("__") || key === "__proto__") {
818
- continue;
819
- }
820
- const value = obj[key];
821
- if (cleanUndefined && isUndefined(value) || cleanNull && isNull(value)) {
822
- continue;
823
- }
824
- if (isDOMNode(value)) {
825
- clone2[key] = value;
826
- continue;
827
- }
828
- if (handleExtends && key === "extends" && isArray(value)) {
829
- clone2[key] = unstackArrayOfObjects(value, exclude);
830
- continue;
831
- }
832
- if (isFunction(value) && options.window) {
833
- clone2[key] = contentWindow.eval("(" + value.toString() + ")");
834
- continue;
835
- }
836
- if (isObjectLike(value)) {
837
- clone2[key] = deepClone(value, __spreadProps(__spreadValues({}, options), {
838
- visited
839
- }));
840
- } else {
841
- clone2[key] = value;
842
- }
843
- }
844
- return clone2;
845
- };
846
- var overwriteDeep = (obj, params, opts = {}, visited = /* @__PURE__ */ new WeakMap()) => {
847
- const excl = opts.exclude || [];
848
- const forcedExclude = opts.preventForce ? [] : ["node", "window"];
849
- if (!isObjectLike(obj) || !isObjectLike(params) || isDOMNode(obj) || isDOMNode(params)) {
850
- return params;
851
- }
852
- if (visited.has(obj)) return visited.get(obj);
853
- visited.set(obj, obj);
854
- for (const e in params) {
855
- if (!Object.hasOwnProperty.call(params, e)) continue;
856
- if (excl.includes(e) || forcedExclude && e.startsWith("__")) continue;
857
- const objProp = obj[e];
858
- const paramsProp = params[e];
859
- if (isDOMNode(paramsProp)) {
860
- obj[e] = paramsProp;
861
- } else if (isObjectLike(objProp) && isObjectLike(paramsProp)) {
862
- obj[e] = overwriteDeep(objProp, paramsProp, opts, visited);
863
- } else if (paramsProp !== void 0) {
864
- obj[e] = paramsProp;
865
- }
866
- }
867
- return obj;
868
- };
869
-
870
- // ../../../domql/packages/utils/dist/esm/env.js
871
- var NODE_ENV = "development";
872
- var isProduction = (env = NODE_ENV) => env === "production";
873
- var isNotProduction = (env = NODE_ENV) => !isProduction(env);
874
-
875
- // ../../../domql/packages/utils/dist/esm/cookie.js
876
- var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
877
-
878
- // ../../../domql/packages/event/dist/esm/keys.js
879
- var STATE_METHODS2 = [
880
- "update",
881
- "parse",
882
- "clean",
883
- "create",
884
- "destroy",
885
- "add",
886
- "toggle",
887
- "remove",
888
- "apply",
889
- "set",
890
- "reset",
891
- "replace",
892
- "quietReplace",
893
- "quietUpdate",
894
- "applyReplace",
895
- "applyFunction",
896
- "keys",
897
- "values",
898
- "ref",
899
- "rootUpdate",
900
- "parentUpdate",
901
- "parent",
902
- "__element",
903
- "__depends",
904
- "__ref",
905
- "__children",
906
- "root",
907
- "setByPath",
908
- "setPathCollection",
909
- "removeByPath",
910
- "removePathCollection",
911
- "getByPath"
912
- ];
913
- var PROPS_METHODS2 = ["update", "__element"];
914
- var METHODS2 = [
915
- "set",
916
- "reset",
917
- "update",
918
- "remove",
919
- "updateContent",
920
- "removeContent",
921
- "lookup",
922
- "lookdown",
923
- "lookdownAll",
924
- "getRef",
925
- "getPath",
926
- "setNodeStyles",
927
- "spotByPath",
928
- "keys",
929
- "parse",
930
- "setProps",
931
- "parseDeep",
932
- "variables",
933
- "if",
934
- "log",
935
- "verbose",
936
- "warn",
937
- "error",
938
- "call",
939
- "nextElement",
940
- "previousElement"
941
- ];
942
- var METHODS_EXL2 = [
943
- ...["node", "context", "extends", "__element", "__ref"],
944
- ...METHODS2,
945
- ...STATE_METHODS2,
946
- ...PROPS_METHODS2
947
- ];
948
-
949
- // ../../../domql/packages/event/dist/esm/globals.js
950
- var window3 = globalThis;
951
- var document3 = window3.document;
952
-
953
- // src/utils/color.js
954
- var colorStringToRgbaArray = (color) => {
955
- if (color === "") return [0, 0, 0, 0];
956
- if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
957
- if (color[0] === "#") {
958
- if (color.length < 7) {
959
- color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
960
- }
961
- return [
962
- parseInt(color.substr(1, 2), 16),
963
- parseInt(color.substr(3, 2), 16),
964
- parseInt(color.substr(5, 2), 16),
965
- color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
966
- ];
967
- }
968
- if (color.indexOf("rgb") === -1) {
969
- if (document2 && window2) {
970
- const elem = document2.body.appendChild(document2.createElement("fictum"));
971
- const flag = "rgb(1, 2, 3)";
972
- elem.style.color = flag;
973
- if (elem.style.color !== flag) {
974
- document2.body.removeChild(elem);
975
- return;
976
- }
977
- elem.style.color = color;
978
- if (elem.style.color === flag || elem.style.color === "") {
979
- document2.body.removeChild(elem);
980
- return [0, 0, 0, 0];
981
- }
982
- color = window2.getComputedStyle(elem).color;
983
- document2.body.removeChild(elem);
984
- }
985
- }
986
- if (color.indexOf("rgb") === 0) {
987
- if (color.indexOf("rgba") === -1) color = `${color}, 1`;
988
- return color.match(/[\.\d]+/g).map((a) => +a);
989
- }
990
- return [0, 0, 0, 0];
991
- };
992
- var mixTwoColors = (colorA, colorB, range = 0.5) => {
993
- colorA = colorStringToRgbaArray(colorA);
994
- colorB = colorStringToRgbaArray(colorB);
995
- return mixTwoRgba(colorA, colorB, range);
996
- };
997
- var hexToRgb = (hex, alpha = 1) => {
998
- const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
999
- return `rgb(${r},${g},${b})`;
1000
- };
1001
- var hexToRgbArray = (hex, alpha = 1) => {
1002
- const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
1003
- return [r, g, b];
1004
- };
1005
- var rgbToHex = (r, g, b) => {
1006
- return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
1007
- };
1008
- var rgbArrayToHex = ([r, g, b]) => {
1009
- return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
1010
- };
1011
- var hexToRgba = (hex, alpha = 1) => {
1012
- const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
1013
- return `rgba(${r},${g},${b},${alpha})`;
1014
- };
1015
- var mixTwoRgb = (colorA, colorB, range = 0.5) => {
1016
- const arr = [];
1017
- for (let i = 0; i < 3; i++) {
1018
- arr[i] = ~~(colorA[i] + (colorB[i] - colorA[i]) * range);
1019
- }
1020
- return `rgb(${arr})`;
1021
- };
1022
- var changeLightness = (delta, hsl) => {
1023
- const [hue, saturation, lightness] = hsl;
1024
- const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)));
1025
- return [hue, saturation, newLightness];
1026
- };
1027
- var rgbToHSL = (r, g, b) => {
1028
- const a = Math.max(r, g, b);
1029
- const n = a - Math.min(r, g, b);
1030
- const f = 1 - Math.abs(a + a - n - 1);
1031
- const h = n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n);
1032
- return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2];
1033
- };
1034
- 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)];
1035
- var getColorShade = (col, amt) => {
1036
- const num = parseInt(col, 16);
1037
- let r = (num >> 16) + amt;
1038
- if (r > 255) r = 255;
1039
- else if (r < 0) r = 0;
1040
- let b = (num >> 8 & 255) + amt;
1041
- if (b > 255) b = 255;
1042
- else if (b < 0) b = 0;
1043
- let g = (num & 255) + amt;
1044
- if (g > 255) g = 255;
1045
- else if (g < 0) g = 0;
1046
- return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
1047
- };
1048
- var mixTwoRgba = (colorA, colorB, range = 0.5) => {
1049
- const arr = [];
1050
- for (let i = 0; i < 4; i++) {
1051
- const round = i === 3 ? (x) => x : Math.round;
1052
- arr[i] = round(colorA[i] + (colorB[i] - colorA[i]) * range);
1053
- }
1054
- return `rgba(${arr})`;
1055
- };
1056
- var opacify = (color, opacity) => {
1057
- const arr = colorStringToRgbaArray(color);
1058
- if (!arr) {
1059
- if (isNotProduction()) console.warn(color + " color is not rgba");
1060
- return;
1061
- }
1062
- arr[3] = opacity;
1063
- return `rgba(${arr})`;
1064
- };
1065
- var getRgbTone = (rgb, tone) => {
1066
- if (isString(rgb) && rgb.includes("rgb"))
1067
- rgb = colorStringToRgbaArray(rgb).join(", ");
1068
- if (isString(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
1069
- if (isNumber(tone)) tone += "";
1070
- const toHex = rgbArrayToHex(rgb);
1071
- const abs = tone.slice(0, 1);
1072
- if (abs === "-" || abs === "+") {
1073
- const colorShade = getColorShade(toHex, parseFloat(tone));
1074
- return hexToRgbArray(colorShade).join(", ");
1075
- } else {
1076
- const [r, g, b] = rgb;
1077
- const hsl = rgbToHSL(r, g, b);
1078
- const [h, s, l] = hsl;
1079
- const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
1080
- return newRgb;
1081
- }
1082
- };
1083
-
1084
- // src/utils/theme.js
1085
- var returnSubThemeOrDefault = (orig, theme) => {
1086
- if (!orig) return;
1087
- if (orig.themes && orig.themes[theme]) return orig.themes[theme];
1088
- if (orig[theme]) return [orig, orig[theme]];
1089
- return orig;
1090
- };
1091
-
1092
- // src/utils/font.js
1093
- var getDefaultOrFirstKey = (LIBRARY, key) => {
1094
- if (LIBRARY[key]) return LIBRARY[key].value;
1095
- if (LIBRARY.default) return LIBRARY[LIBRARY.default].value;
1096
- const hasValue = Object.keys(LIBRARY)[0];
1097
- return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
1098
- };
1099
- var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
1100
- var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
1101
- var setCustomFont = (name, url, weight) => `
1102
- font-family: '${name}';
1103
- font-style: normal;
1104
- ${weight && `font-weight: ${weight};`}
1105
- src: url('${url}') format('${getFontFormat(url)}');`;
1106
- var setCustomFontMedia = (name, url, weight) => `@font-face {
1107
- ${setCustomFont(name, url, weight)}
1108
- }`;
1109
- var getFontFaceEach = (name, weights) => {
1110
- const keys = Object.keys(weights);
1111
- return keys.map((key) => {
1112
- const { url, fontWeight } = weights[key];
1113
- return setCustomFont(name, url, fontWeight);
1114
- });
1115
- };
1116
- var getFontFace = (LIBRARY) => {
1117
- const keys = Object.keys(LIBRARY);
1118
- return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
1119
- };
1120
- var getFontFaceEachString = (name, weights) => {
1121
- const isArr = weights[0];
1122
- if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
1123
- return setCustomFontMedia(name, weights.url);
1124
- };
1125
- var getFontFaceString = (LIBRARY) => {
1126
- const keys = Object.keys(LIBRARY);
1127
- return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
1128
- };
1129
-
1130
- // src/utils/sequence.js
1131
- var import_utils5 = __toESM(require_cjs(), 1);
1132
-
1133
- // src/defaultConfig/index.js
1134
- var defaultConfig_exports = {};
1135
- __export(defaultConfig_exports, {
1136
- ANIMATION: () => ANIMATION,
1137
- BREAKPOINTS: () => BREAKPOINTS,
1138
- CASES: () => CASES,
1139
- CLASS: () => CLASS,
1140
- COLOR: () => COLOR,
1141
- DEVICES: () => DEVICES,
1142
- DOCUMENT: () => DOCUMENT,
1143
- FONT: () => FONT,
1144
- FONT_FACE: () => FONT_FACE,
1145
- FONT_FAMILY: () => FONT_FAMILY,
1146
- FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
1147
- GRADIENT: () => GRADIENT,
1148
- GRID: () => GRID,
1149
- ICONS: () => ICONS,
1150
- MEDIA: () => MEDIA,
1151
- RESET: () => RESET,
1152
- SEMANTIC_ICONS: () => SEMANTIC_ICONS,
1153
- SEQUENCE: () => SEQUENCE,
1154
- SHADOW: () => SHADOW,
1155
- SPACING: () => SPACING,
1156
- SVG: () => SVG,
1157
- SVG_DATA: () => SVG_DATA,
1158
- TEMPLATES: () => TEMPLATES,
1159
- THEME: () => THEME,
1160
- TIMING: () => TIMING,
1161
- TYPOGRAPHY: () => TYPOGRAPHY,
1162
- UNIT: () => UNIT
1163
- });
1164
-
1165
- // src/defaultConfig/sequence.js
1166
- var SEQUENCE = {
1167
- "minor-second": 1.067,
1168
- "major-second": 1.125,
1169
- "minor-third": 1.2,
1170
- "major-third": 1.25,
1171
- "perfect-fourth": 1.333,
1172
- "augmented-fourth": 1.414,
1173
- "perfect-fifth": 1.5,
1174
- "minor-sixth": 1.6,
1175
- phi: 1.618,
1176
- // golden-ratio
1177
- "major-sixth": 1.667,
1178
- "square-root-3": 1.732,
1179
- // theodorus
1180
- "minor-seventh": 1.778,
1181
- "major-seventh": 1.875,
1182
- octave: 2,
1183
- "square-root-5": 2.23,
1184
- // pythagoras
1185
- "major-tenth": 2.5,
1186
- "major-eleventh": 2.667,
1187
- "major-twelfth": 3,
1188
- pi: 3.14,
1189
- // archimedes
1190
- "double-octave": 4
1191
- };
1192
-
1193
- // src/defaultConfig/unit.js
1194
- var UNIT = {
1195
- default: "em"
1196
- };
1197
-
1198
- // src/defaultConfig/typography.js
1199
- var defaultProps = {
1200
- browserDefault: 16,
1201
- base: 16,
1202
- type: "font-size",
1203
- ratio: SEQUENCE["minor-third"],
1204
- range: [-3, 12],
1205
- h1Matches: 6,
1206
- lineHeight: 1.5,
1207
- subSequence: true,
1208
- mediaRegenerate: false,
1209
- unit: "em",
1210
- templates: {},
1211
- sequence: {},
1212
- scales: {},
1213
- vars: {}
1214
- };
1215
- var TYPOGRAPHY = defaultProps;
1216
-
1217
- // src/defaultConfig/font.js
1218
- var FONT = {};
1219
-
1220
- // src/defaultConfig/font-family.js
1221
- var FONT_FAMILY = {};
1222
- var FONT_FAMILY_TYPES = {
1223
- "sans-serif": "Helvetica, Arial, sans-serif, --system-default",
1224
- serif: "Times New Roman, Georgia, serif, --system-default",
1225
- monospace: "Courier New, monospace, --system-default"
1226
- };
1227
- var FONT_FACE = {};
1228
-
1229
- // src/defaultConfig/media.js
1230
- var MEDIA = {
1231
- tv: "(min-width: 2780px)",
1232
- light: "(prefers-color-scheme: light)",
1233
- dark: "(prefers-color-scheme: dark)",
1234
- print: "print"
1235
- };
1236
-
1237
- // src/defaultConfig/spacing.js
1238
- var defaultProps2 = {
1239
- base: TYPOGRAPHY.base,
1240
- type: "spacing",
1241
- ratio: SEQUENCE.phi,
1242
- range: [-5, 15],
1243
- subSequence: true,
1244
- mediaRegenerate: false,
1245
- unit: "em",
1246
- sequence: {},
1247
- scales: {},
1248
- vars: {}
1249
- };
1250
- var SPACING = defaultProps2;
1251
-
1252
- // src/defaultConfig/color.js
1253
- var COLOR = {};
1254
- var GRADIENT = {};
1255
-
1256
- // src/defaultConfig/theme.js
1257
- var THEME = {};
1258
-
1259
- // src/defaultConfig/shadow.js
1260
- var SHADOW = {};
1261
-
1262
- // src/defaultConfig/icons.js
1263
- var ICONS = {};
1264
- var SEMANTIC_ICONS = {};
1265
-
1266
- // src/defaultConfig/timing.js
1267
- var defaultProps3 = {
1268
- default: 150,
1269
- base: 150,
1270
- type: "timing",
1271
- ratio: SEQUENCE["perfect-fourth"],
1272
- range: [-3, 12],
1273
- mediaRegenerate: false,
1274
- unit: "ms",
1275
- sequence: {},
1276
- scales: {},
1277
- vars: {}
1278
- };
1279
- var TIMING = defaultProps3;
1280
-
1281
- // src/defaultConfig/document.js
1282
- var DOCUMENT = {};
1283
-
1284
- // src/defaultConfig/responsive.js
1285
- var BREAKPOINTS = {
1286
- screenL: 1920,
1287
- screenM: 1680,
1288
- screenS: 1440,
1289
- tabletL: 1366,
1290
- tabletM: 1280,
1291
- tabletS: 1024,
1292
- mobileL: 768,
1293
- mobileM: 560,
1294
- mobileS: 480,
1295
- mobileXS: 375
1296
- };
1297
- var DEVICES = {
1298
- screenXXL: [2560, 1440],
1299
- screenXL: [2240, 1260],
1300
- screenL: [1920, 1024],
1301
- screenM: [1680, 1024],
1302
- screenS: [1440, 720],
1303
- tabletL: [1366, 926],
1304
- tabletM: [1280, 768],
1305
- tabletS: [1024, 768],
1306
- mobileL: [768, 375],
1307
- mobileM: [560, 768],
1308
- mobileS: [480, 768],
1309
- mobileXS: [375, 768]
1310
- };
1311
-
1312
- // src/defaultConfig/cases.js
1313
- var CASES = {};
1314
-
1315
- // src/defaultConfig/animation.js
1316
- var ANIMATION = {};
1317
-
1318
- // src/defaultConfig/svg.js
1319
- var SVG = {};
1320
- var SVG_DATA = {};
1321
-
1322
- // src/defaultConfig/templates.js
1323
- var TEMPLATES = {};
1324
-
1325
- // src/defaultConfig/grid.js
1326
- var defaultProps4 = {};
1327
- var GRID = defaultProps4;
1328
-
1329
- // src/defaultConfig/class.js
1330
- var defaultProps5 = {};
1331
- var CLASS = defaultProps5;
1332
-
1333
- // src/defaultConfig/index.js
1334
- var RESET = {};
1335
-
1336
- // src/factory.js
1337
- var CSS_VARS = {};
1338
- var CONFIG = {
1339
- verbose: false,
1340
- useVariable: true,
1341
- useReset: true,
1342
- CSS_VARS,
1343
- ...void 0 || defaultConfig_exports
1344
- };
1345
- var cachedConfig = deepClone(CONFIG);
1346
- var FACTORY = {
1347
- active: "0",
1348
- 0: CONFIG
1349
- };
1350
- var activateConfig = (def) => {
1351
- if (isDefined(def)) {
1352
- FACTORY.active = def;
1353
- }
1354
- return FACTORY[def || FACTORY.active];
1355
- };
1356
- var getActiveConfig = (def) => {
1357
- return FACTORY[def || FACTORY.active] || CONFIG;
1358
- };
1359
- var setActiveConfig = (newConfig) => {
1360
- if (!isObject(newConfig)) return;
1361
- FACTORY.active = "1";
1362
- FACTORY["1"] = deepMerge(newConfig, deepClone(cachedConfig));
1363
- return newConfig;
1364
- };
1365
-
1366
- // src/utils/sequence.js
1367
- var numToLetterMap = {
1368
- "-6": "U",
1369
- "-5": "V",
1370
- "-4": "W",
1371
- "-3": "X",
1372
- "-2": "Y",
1373
- "-1": "Z",
1374
- 0: "A",
1375
- 1: "B",
1376
- 2: "C",
1377
- 3: "D",
1378
- 4: "E",
1379
- 5: "F",
1380
- 6: "G",
1381
- 7: "H",
1382
- 8: "I",
1383
- 9: "J",
1384
- 10: "K",
1385
- 11: "L",
1386
- 12: "M",
1387
- 13: "N",
1388
- 14: "O",
1389
- 15: "P",
1390
- 16: "Q",
1391
- 17: "R",
1392
- 18: "S",
1393
- 19: "T"
1394
- };
1395
- var setSequenceValue = (props, sequenceProps) => {
1396
- const { key, variable, value, scaling, index, scalingVariable } = props;
1397
- sequenceProps.sequence[key] = {
1398
- key,
1399
- decimal: ~~(value * 100) / 100,
1400
- val: ~~value,
1401
- scaling,
1402
- index,
1403
- scalingVariable,
1404
- variable
1405
- };
1406
- sequenceProps.scales[key] = scaling;
1407
- sequenceProps.vars[variable] = scaling + sequenceProps.unit;
1408
- };
1409
- var setScalingVar = (key, sequenceProps) => {
1410
- const { base, type, unit } = sequenceProps;
1411
- const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
1412
- if (key === 0) return defaultVal;
1413
- const prefix = "--" + (type && type.replace(".", "-"));
1414
- const ratioVar = `${prefix}-ratio`;
1415
- if (key > 0) {
1416
- const prevLetterKey = numToLetterMap[key - 1];
1417
- return `calc(var(${prefix}-${prevLetterKey}) * var(${ratioVar}))`;
1418
- }
1419
- if (key < 0) {
1420
- const nextLetterKey = numToLetterMap[key + 1];
1421
- return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`;
1422
- }
1423
- };
1424
- var setSubScalingVar = (index, arr, variable, sequenceProps) => {
1425
- const { type } = sequenceProps;
1426
- const skipMiddle = index === 2 && arr.length === 2;
1427
- const indexMapWithLength = skipMiddle ? index + 1 : index;
1428
- const prefix = "--" + (type && type.replace(".", "-"));
1429
- const subRatioVarPrefix = `${prefix}-sub-ratio-`;
1430
- return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`;
1431
- };
1432
- var getSubratioDifference = (base, ratio) => {
1433
- const diff = base * ratio - base;
1434
- const subRatio = diff / 1.618;
1435
- const first = base * ratio - subRatio;
1436
- const second = base + subRatio;
1437
- const middle = (first + second) / 2;
1438
- return [first, middle, second];
1439
- };
1440
- var getSubratio = (base, ratio) => {
1441
- return getSubratioDifference(base, ratio).map((v) => v / base);
1442
- };
1443
- var generateSubSequence = (props, sequenceProps) => {
1444
- const { key, base, value, ratio, variable, index } = props;
1445
- const next = value * ratio;
1446
- const diffRounded = ~~next - ~~value;
1447
- let arr;
1448
- const [first, middle, second] = getSubratioDifference(value, ratio);
1449
- if (diffRounded > 16) arr = [first, middle, second];
1450
- else arr = [first, second];
1451
- arr.forEach((v, k) => {
1452
- const scaling = ~~(v / base * 1e3) / 1e3;
1453
- const newVar = variable + (k + 1);
1454
- const newIndex = index + (k + 1) / 10;
1455
- const scalingVariable = setSubScalingVar(k + 1, arr, variable, sequenceProps);
1456
- const props2 = {
1457
- key: key + (k + 1),
1458
- variable: newVar,
1459
- value: v,
1460
- scaling,
1461
- scalingVariable,
1462
- index: newIndex
1463
- };
1464
- setSequenceValue(props2, sequenceProps);
1465
- });
1466
- };
1467
- var switchSequenceOnNegative = (key, base, ratio) => {
1468
- return base * Math.pow(ratio, key);
1469
- };
1470
- var generateSequence = (sequenceProps) => {
1471
- const { type, base, ratio, range, subSequence } = sequenceProps;
1472
- const n = Math.abs(range[0]) + Math.abs(range[1]);
1473
- const prefix = "--" + (type && type.replace(".", "-")) + "-";
1474
- for (let i = 0; i <= n; i++) {
1475
- const key = range[1] - i;
1476
- const letterKey = numToLetterMap[key];
1477
- const value = switchSequenceOnNegative(key, base, ratio);
1478
- const scaling = ~~(value / base * 100) / 100;
1479
- const variable = prefix + letterKey;
1480
- const scalingVariable = setScalingVar(key, sequenceProps);
1481
- const props = {
1482
- key: letterKey,
1483
- variable,
1484
- value,
1485
- base,
1486
- scaling,
1487
- scalingVariable,
1488
- ratio,
1489
- index: key
1490
- };
1491
- setSequenceValue(props, sequenceProps);
1492
- if (subSequence) generateSubSequence(props, sequenceProps);
1493
- }
1494
- return sequenceProps;
1495
- };
1496
- var generateSequencePosition = (sequenceProps, position = 0) => {
1497
- var _a;
1498
- const { type, base, ratio, subSequence } = sequenceProps;
1499
- const letterKey = isString(position) ? position : numToLetterMap[position];
1500
- const index = isString(position) ? (_a = Object.entries(numToLetterMap).find(
1501
- ([, value2]) => value2 === position
1502
- )) == null ? void 0 : _a[0] : position;
1503
- if (!letterKey) {
1504
- console.warn(`Position ${position} is out of range in numToLetterMap`);
1505
- return null;
1506
- }
1507
- const result = {
1508
- sequence: {},
1509
- scales: {},
1510
- vars: {},
1511
- ...sequenceProps
1512
- };
1513
- const value = base * Math.pow(ratio, index);
1514
- const scaling = ~~(value / base * 100) / 100;
1515
- const prefix = "--" + (type && type.replace(".", "-")) + "-";
1516
- const variable = prefix + letterKey;
1517
- const scalingVariable = setScalingVar(index, sequenceProps);
1518
- const props = {
1519
- key: letterKey,
1520
- variable,
1521
- value,
1522
- base,
1523
- scaling,
1524
- scalingVariable,
1525
- ratio,
1526
- index
1527
- };
1528
- setSequenceValue(props, result);
1529
- if (subSequence) {
1530
- generateSubSequence(props, result);
1531
- }
1532
- return result;
1533
- };
1534
- var getSequenceValue = (value = "A", sequenceProps) => {
1535
- const CONFIG2 = getActiveConfig();
1536
- const { UNIT: UNIT2 } = CONFIG2;
1537
- const {
1538
- sequence,
1539
- unit = UNIT2.default,
1540
- useVariable
1541
- } = sequenceProps;
1542
- if (isString(value) && value.slice(0, 2) === "--") return `var(${value})`;
1543
- const prefix = `--${(0, import_utils5.toDashCase)(sequenceProps.type.replace(".", "-"))}-`;
1544
- const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
1545
- const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
1546
- if (value === "none" || value === "auto" || value === "unset" || value === "inherit" || value === "fit-content" || value === "min-content" || value === "max-content" || value.includes("calc") || value.includes("var") || !startsWithDashOrLetter) return value;
1547
- const letterVal = value.toUpperCase();
1548
- const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
1549
- let absValue = isNegative ? letterVal.slice(1) : letterVal;
1550
- let mediaName = "";
1551
- if (absValue.includes("_")) {
1552
- mediaName = "_" + absValue.split("_")[1].toLowerCase();
1553
- absValue = absValue.split("_")[0];
1554
- }
1555
- const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
1556
- if (absValue.includes("+")) {
1557
- const [first, second] = absValue.split("+");
1558
- const joint = `${varValue(first)} + ${varValue(second)}`;
1559
- return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1560
- } else if (absValue.includes("*")) {
1561
- const [first, second] = absValue.split("*");
1562
- const joint = `${varValue(first)} * ${varValue(second)}`;
1563
- return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1564
- } else if (absValue.includes("-")) {
1565
- const [first, second] = absValue.split("-");
1566
- const joint = `${varValue(first)} - ${varValue(second)}`;
1567
- return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1568
- }
1569
- if (!sequence[absValue] && absValue.length === 2) {
1570
- if (CONFIG2.verbose) console.warn(absValue, "- value is not found because `subSequence` is set to false");
1571
- absValue = absValue.slice(0, 1);
1572
- }
1573
- if (useVariable || CONFIG2.useVariable) {
1574
- const varValue2 = `var(${prefix}${absValue}${mediaName})`;
1575
- return isNegative ? `calc(${varValue2} * -1)` : varValue2;
1576
- }
1577
- const sequenceItem = sequence ? sequence[absValue] : null;
1578
- if (!sequenceItem) return console.warn("can't find", sequence, absValue);
1579
- if (unit === "ms" || unit === "s") {
1580
- return isNegative + sequenceItem.val + unit;
1581
- }
1582
- return isNegative + sequenceItem.scaling + unit;
1583
- };
1584
- var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
1585
- if (typeof value !== "string") {
1586
- const CONFIG2 = getActiveConfig();
1587
- if (CONFIG2.verbose) console.warn(propertyName, value, "is not a string");
1588
- return { [propertyName]: value };
1589
- }
1590
- if (value === "-" || value === "") return {};
1591
- return { [propertyName]: getSequenceValue(value, sequenceProps) };
1592
- };
1593
- var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
1594
- var findHeadings = (propertyNames) => {
1595
- const { h1Matches, sequence } = propertyNames;
1596
- return new Array(6).fill(null).map((_, i) => {
1597
- const findLetter = findHeadingLetter(h1Matches, i);
1598
- return sequence[findLetter];
1599
- });
1600
- };
1601
-
1602
- // src/utils/var.js
1603
- var setVariables = (result, key) => {
1604
- const CONFIG2 = getActiveConfig();
1605
- const { CSS_VARS: CSS_VARS2 } = CONFIG2;
1606
- if (isObjectLike(result.value)) {
1607
- } else {
1608
- CSS_VARS2[result.var] = result.value;
1609
- }
1610
- };
1611
- var applySequenceGlobalVars = (vars, obj, options) => {
1612
- const CONFIG2 = getActiveConfig();
1613
- const { UNIT: UNIT2 } = CONFIG2;
1614
- const unit = obj.unit || UNIT2.default;
1615
- const { base, ratio, type } = obj;
1616
- const prefix = "--" + (type && type.replace(".", "-"));
1617
- vars[`${prefix}-base`] = base;
1618
- vars[`${prefix}-unit`] = unit;
1619
- const ratioVar = `${prefix}-ratio`;
1620
- vars[ratioVar] = ratio;
1621
- const [first, middle, second] = getSubratio(base, ratio);
1622
- vars[`${prefix}-sub-ratio-1`] = `calc(var(${prefix}-ratio) * ${first / ratio})`;
1623
- vars[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
1624
- vars[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
1625
- };
1626
- var applySequenceVars = (FACTORY2, options = {}) => {
1627
- const CONFIG2 = getActiveConfig();
1628
- const { UNIT: UNIT2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG2;
1629
- const unit = FACTORY2.unit || UNIT2.default;
1630
- const { mediaRegenerate, sequence, scales } = FACTORY2;
1631
- if (!mediaRegenerate) {
1632
- applySequenceGlobalVars(CSS_VARS2, FACTORY2, options);
1633
- }
1634
- for (const key in sequence) {
1635
- const item = sequence[key];
1636
- const value = (FACTORY2.type === TIMING2.type ? sequence[key].val : scales[key]) + unit;
1637
- if (!mediaRegenerate) {
1638
- CSS_VARS2[item.variable + "_default"] = value;
1639
- CSS_VARS2[item.variable] = item.scalingVariable;
1640
- continue;
1641
- }
1642
- if (options.useDefault === false) {
1643
- CSS_VARS2[item.variable] = value;
1644
- } else {
1645
- CSS_VARS2[item.variable + "_default"] = value;
1646
- CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
1647
- }
1648
- }
1649
- };
1650
- var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
1651
- const CONFIG2 = getActiveConfig();
1652
- const { UNIT: UNIT2, MEDIA: MEDIA2, CSS_VARS: CSS_VARS2 } = CONFIG2;
1653
- const mediaName = media.slice(1);
1654
- const unit = FACTORY2.unit || UNIT2.default;
1655
- const { mediaRegenerate } = FACTORY2;
1656
- const { sequence, scales } = FACTORY2[media];
1657
- const query = MEDIA2[mediaName];
1658
- if (!query && CONFIG2.verbose) console.warn("Can't find media query ", query);
1659
- if (!mediaRegenerate) {
1660
- let underMediaQuery = CSS_VARS2[`@media ${query}`];
1661
- if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
1662
- applySequenceGlobalVars(underMediaQuery, FACTORY2[media], options);
1663
- return;
1664
- }
1665
- for (const key in sequence) {
1666
- const item = sequence[key];
1667
- const value = (isScalingUnit(unit) ? scales[key] : sequence[key].val) + unit;
1668
- if (!query && CONFIG2.verbose) console.warn("Can't find query ", query);
1669
- let underMediaQuery = CSS_VARS2[`@media ${query}`];
1670
- if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
1671
- underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
1672
- CSS_VARS2[item.variable + "_" + mediaName] = value;
1673
- }
1674
- };
1675
-
1676
- // src/utils/sprite.js
1677
- var isDev = isNotProduction();
1678
- var generateSprite = (icons) => {
1679
- const CONFIG2 = getActiveConfig();
1680
- let sprite = "";
1681
- for (const key in icons) {
1682
- if (CONFIG2.__svg_cache[key]) continue;
1683
- else CONFIG2.__svg_cache[key] = true;
1684
- sprite += icons[key];
1685
- }
1686
- return sprite;
1687
- };
1688
- var parseRootAttributes = (htmlString) => {
1689
- const val = htmlString.default || htmlString;
1690
- if (!isString(val)) {
1691
- if (isDev) console.warn("parseRootAttributes:", val, "is not a string");
1692
- return;
1693
- }
1694
- const match = val.match(/<svg\s+(.*?)>/);
1695
- if (!match || !match[1]) {
1696
- return {};
1697
- }
1698
- const attrString = match[1];
1699
- const attrs = attrString.match(
1700
- /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
1701
- );
1702
- return attrs.reduce((acc, attr) => {
1703
- const [key, value] = attr.split("=");
1704
- acc[key] = value.replace(/['"]/g, "");
1705
- return acc;
1706
- }, {});
1707
- };
1708
- var replaceIdsAndUrls = (code, key) => {
1709
- const idRegex = /id="([^"]*)"/;
1710
- const urlRegex = /url\(#([^)]*)\)/g;
1711
- const matches = code.match(/id="([^"]*)"/g);
1712
- let replacedCode = code;
1713
- if (isArray(matches)) {
1714
- matches.forEach(() => {
1715
- const randomKey = Math.floor(Math.random() * 1e5);
1716
- replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
1717
- });
1718
- }
1719
- return replacedCode;
1720
- };
1721
- var convertSvgToSymbol = (key, code) => {
1722
- const extractAttrs = parseRootAttributes(code);
1723
- const { width, height } = extractAttrs;
1724
- const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`;
1725
- const xmlns = "http://www.w3.org/2000/svg";
1726
- const replacedCode = replaceIdsAndUrls(code, key);
1727
- let symbol = replacedCode.replace(
1728
- "<svg",
1729
- `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
1730
- );
1731
- symbol = symbol.replace(/width="[^"]*"/, "");
1732
- symbol = symbol.replace(/height="[^"]*"/, "");
1733
- symbol = symbol.replace("</svg", "</symbol");
1734
- return symbol;
1735
- };
1736
-
1737
- // src/system/index.js
1738
- var system_exports = {};
1739
- __export(system_exports, {
1740
- appendSVGSprite: () => appendSVGSprite,
1741
- appendSvgIconsSprite: () => appendSvgIconsSprite,
1742
- applyDocument: () => applyDocument,
1743
- applyHeadings: () => applyHeadings,
1744
- applyReset: () => applyReset,
1745
- applySpacingSequence: () => applySpacingSequence,
1746
- applyTimingSequence: () => applyTimingSequence,
1747
- applyTypographySequence: () => applyTypographySequence,
1748
- getColor: () => getColor,
1749
- getFontFamily: () => getFontFamily,
1750
- getFontSizeByKey: () => getFontSizeByKey,
1751
- getMediaColor: () => getMediaColor,
1752
- getMediaTheme: () => getMediaTheme,
1753
- getShadow: () => getShadow,
1754
- getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
1755
- getSpacingByKey: () => getSpacingByKey,
1756
- getTheme: () => getTheme,
1757
- getTimingByKey: () => getTimingByKey,
1758
- getTimingFunction: () => getTimingFunction,
1759
- runThroughMedia: () => runThroughMedia,
1760
- setColor: () => setColor,
1761
- setFont: () => setFont,
1762
- setFontFamily: () => setFontFamily,
1763
- setGradient: () => setGradient,
1764
- setMediaTheme: () => setMediaTheme,
1765
- setSVG: () => setSVG,
1766
- setShadow: () => setShadow,
1767
- setSvgIcon: () => setSvgIcon,
1768
- setTheme: () => setTheme
1769
- });
1770
-
1771
- // src/system/color.js
1772
- var getColor = (value, key, config) => {
1773
- const CONFIG2 = config || getActiveConfig();
1774
- if (!isString(value)) {
1775
- if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
1776
- return;
1777
- }
1778
- if (value.slice(0, 2) === "--") return `var(${value})`;
1779
- if (key && value[key]) value = value[key];
1780
- const [name, alpha, tone] = isArray(value) ? value : value.split(" ");
1781
- const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
1782
- let val = COLOR2[name] || GRADIENT2[name];
1783
- if (!val) {
1784
- if (CONFIG2.verbose) console.warn("Can't find color ", name);
1785
- return value;
1786
- }
1787
- if (key) {
1788
- if (val[key]) val = val[key];
1789
- else if (CONFIG2.verbose) console.warn(value, " - does not have ", key);
1790
- }
1791
- let rgb = val.rgb;
1792
- if (!rgb) {
1793
- return CONFIG2.useVariable ? `var(${val.var})` : val.value;
1794
- }
1795
- if (tone && !val[tone]) {
1796
- rgb = getRgbTone(rgb, tone);
1797
- val[tone] = { rgb, var: `${val.var}-${tone}` };
1798
- }
1799
- if (val[tone]) rgb = val[tone].rgb;
1800
- if (alpha) return `rgba(${rgb}, ${alpha})`;
1801
- return CONFIG2.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
1802
- };
1803
- var getMediaColor = (value, globalTheme, config) => {
1804
- const CONFIG2 = config || getActiveConfig();
1805
- if (!globalTheme) globalTheme = CONFIG2.globalTheme;
1806
- if (!isString(value)) {
1807
- if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
1808
- return;
1809
- }
1810
- if (value.slice(0, 2) === "--") return `var(${value})`;
1811
- const [name] = isArray(value) ? value : value.split(" ");
1812
- const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
1813
- const val = COLOR2[name] || GRADIENT2[name];
1814
- const isObj = isObject(val);
1815
- if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
1816
- else if (isObj) {
1817
- if (globalTheme) return getColor(value, `@${globalTheme}`, config);
1818
- else {
1819
- const obj = {};
1820
- for (const mediaName in val) {
1821
- const query = CONFIG2.MEDIA[mediaName.slice(1)];
1822
- const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
1823
- obj[media] = getColor(value, mediaName, config);
1824
- }
1825
- return obj;
1826
- }
1827
- } else {
1828
- if (CONFIG2.verbose) console.warn("Can't find color", value);
1829
- return value;
1830
- }
1831
- };
1832
- var setColor = (val, key, suffix) => {
1833
- const CONFIG2 = getActiveConfig();
1834
- if (isString(val) && val.slice(0, 2) === "--") {
1835
- val = getColor(val.slice(2));
1836
- if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
1837
- if (CONFIG2.verbose) console.warn(val, "- referred but does not exist");
1838
- val = val.split(" ")[0];
1839
- }
1840
- }
1841
- if (isArray(val)) {
1842
- return {
1843
- "@light": setColor(val[0], key, "light"),
1844
- "@dark": setColor(val[1], key, "dark")
1845
- };
1846
- }
1847
- if (isObject(val)) {
1848
- const obj = {};
1849
- for (const variant in val) {
1850
- obj[variant] = setColor(
1851
- val[variant],
1852
- key,
1853
- variant.slice(0, 1) === "@" ? variant.slice(1) : variant
1854
- );
1855
- }
1856
- return obj;
1857
- }
1858
- const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
1859
- const colorArr = colorStringToRgbaArray(val.value || val);
1860
- const [r, g, b, a = 1] = colorArr;
1861
- const alpha = parseFloat(a.toFixed(2));
1862
- const rgb = `${r}, ${g}, ${b}`;
1863
- const value = `rgba(${rgb}, ${alpha})`;
1864
- if (CONFIG2.useVariable) {
1865
- CONFIG2.CSS_VARS[CSSVar] = value;
1866
- }
1867
- return {
1868
- var: CSSVar,
1869
- rgb,
1870
- alpha,
1871
- value
1872
- };
1873
- };
1874
- var setGradient = (val, key, suffix) => {
1875
- const CONFIG2 = getActiveConfig();
1876
- if (isString(val) && val.slice(0, 2) === "--") val = getColor(val.slice(2));
1877
- if (isArray(val)) {
1878
- return {
1879
- "@light": setGradient(val[0], key, "light"),
1880
- "@dark": setGradient(val[0], key, "dark")
1881
- };
1882
- }
1883
- if (isObject(val)) {
1884
- const obj = {};
1885
- for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
1886
- return obj;
1887
- }
1888
- const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
1889
- if (CONFIG2.useVariable) {
1890
- CONFIG2.CSS_VARS[CSSVar] = val.value || val;
1891
- }
1892
- return {
1893
- var: CSSVar,
1894
- value: val.value || val
1895
- };
1896
- };
1897
-
1898
- // src/system/theme.js
1899
- var setThemeValue = (theme) => {
1900
- const value = {};
1901
- const { state, media, helpers, ...rest } = theme;
1902
- const keys = Object.keys(rest);
1903
- keys.map((key) => {
1904
- const conditions = ["color", "Color", "background", "border"];
1905
- const isColor = conditions.some((k) => key.includes(k));
1906
- return value[key] = isColor ? getColor(theme[key]) : theme[key];
1907
- });
1908
- return value;
1909
- };
1910
- var getThemeValue = (theme) => {
1911
- if (theme.value) return theme.value;
1912
- theme.value = setThemeValue(theme);
1913
- return theme.value;
1914
- };
1915
- var getTheme = (value, modifier) => {
1916
- const CONFIG2 = getActiveConfig();
1917
- if (CONFIG2.useVariable) return getMediaTheme(value, modifier);
1918
- const { THEME: THEME2 } = CONFIG2;
1919
- if (isString(value)) {
1920
- const [theme, subtheme] = value.split(" ");
1921
- const isOurTheme = THEME2[theme];
1922
- if (isOurTheme) {
1923
- if (!subtheme && !modifier) return getThemeValue(isOurTheme);
1924
- value = [theme, subtheme || modifier];
1925
- }
1926
- }
1927
- if (isObjectLike(value) && value[1]) {
1928
- const themeName = value[0];
1929
- const subThemeName = value[1];
1930
- const { helpers, media, state } = THEME2[themeName];
1931
- if (media && media[subThemeName]) return getThemeValue(media[subThemeName]);
1932
- if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName]);
1933
- if (state && state[subThemeName]) return getThemeValue(state[subThemeName]);
1934
- } else if (isObject(value)) return setThemeValue(value);
1935
- };
1936
- var setInverseTheme = (theme, variant, value) => {
1937
- if (isObject(variant)) {
1938
- theme.variants.inverse.value = setThemeValue(variant);
1939
- } else if (variant === true) {
1940
- const { color, background } = value;
1941
- theme.variants.inverse = {
1942
- value: {
1943
- color: background,
1944
- background: color
1945
- }
1946
- };
1947
- }
1948
- };
1949
- var setPseudo = (theme, key, variant, themeValue) => {
1950
- const result = getTheme(variant);
1951
- themeValue[`&:${key}`] = result;
1952
- if (isObject(variant) && !variant.value) variant.value = result;
1953
- };
1954
- var setSelectors = (theme, value) => {
1955
- const { state } = theme;
1956
- if (!state) return;
1957
- const keys = Object.keys(state);
1958
- keys.map((key) => {
1959
- const variant = state[key];
1960
- setPseudo(theme, key, variant, value);
1961
- return theme;
1962
- });
1963
- return theme;
1964
- };
1965
- var setPrefersScheme = (theme, key, variant, themeValue) => {
1966
- const result = getTheme(variant);
1967
- themeValue[`@media (prefers-color-scheme: ${key})`] = result;
1968
- if (isObject(variant) && !variant.value) variant.value = result;
1969
- };
1970
- var setMedia = (theme, value) => {
1971
- const { media } = theme;
1972
- if (!media) return;
1973
- const keys = Object.keys(media);
1974
- keys.map((key) => {
1975
- const variant = media[key];
1976
- if (key === "dark" || key === "light") setPrefersScheme(theme, key, variant, value);
1977
- if (key === "inverse") setInverseTheme(theme, variant, value);
1978
- return theme;
1979
- });
1980
- return theme;
1981
- };
1982
- var setHelpers = (theme, value) => {
1983
- const CONFIG2 = getActiveConfig();
1984
- const { helpers } = theme;
1985
- if (!helpers) return;
1986
- const keys = Object.keys(helpers);
1987
- keys.map((key) => {
1988
- const helper = helpers[key];
1989
- if (isString(helper)) helpers[key] = CONFIG2.THEME[helper];
1990
- else getThemeValue(helpers[key]);
1991
- return theme;
1992
- });
1993
- return theme;
1994
- };
1995
- var setTheme = (val, key) => {
1996
- const CONFIG2 = getActiveConfig();
1997
- if (CONFIG2.useVariable) return setMediaTheme(val, key);
1998
- const { state, media, helpers } = val;
1999
- const value = setThemeValue(val, key);
2000
- const CSSvar = `--theme-${key}`;
2001
- setSelectors(val, value);
2002
- setMedia(val, value);
2003
- setHelpers(val, value);
2004
- return { var: CSSvar, value, state, media, helpers };
2005
- };
2006
- var setMediaTheme = (val, key, suffix, prefers) => {
2007
- const CONFIG2 = getActiveConfig();
2008
- const { CSS_VARS: CSS_VARS2 } = CONFIG2;
2009
- const theme = { value: val };
2010
- if (isObjectLike(val)) {
2011
- for (const param in val) {
2012
- const symb = param.slice(0, 1);
2013
- const value = val[param];
2014
- if (symb === "@" || symb === ":" || symb === ".") {
2015
- const hasPrefers = symb === "@" && param;
2016
- theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
2017
- } else {
2018
- const color = getColor(value, prefers);
2019
- const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
2020
- const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
2021
- const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
2022
- if (CONFIG2.useVariable) {
2023
- CSS_VARS2[CSSVar] = color;
2024
- theme[param] = `var(${CSSVar})`;
2025
- } else {
2026
- theme[param] = color;
2027
- }
2028
- theme[`.${param}`] = { [param]: theme[param] };
2029
- }
2030
- }
2031
- if (theme.background || theme.color || theme.backgroundColor) {
2032
- theme[".inversed"] = {
2033
- color: theme.background || theme.backgroundColor,
2034
- background: theme.color
2035
- };
2036
- }
2037
- }
2038
- if (isString(val) && val.slice(0, 2) === "--") {
2039
- const { THEME: THEME2 } = CONFIG2;
2040
- const value = THEME2[val.slice(2)];
2041
- const getReferenced = getMediaTheme(value, prefers);
2042
- return getReferenced;
2043
- }
2044
- return theme;
2045
- };
2046
- var recursiveTheme = (val) => {
2047
- const CONFIG2 = getActiveConfig();
2048
- const obj = {};
2049
- for (const param in val) {
2050
- const symb = param.slice(0, 1);
2051
- if (isObjectLike(val[param])) {
2052
- if (symb === "@") {
2053
- const query = CONFIG2.MEDIA[param.slice(1)];
2054
- const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
2055
- obj[media] = recursiveTheme(val[param]);
2056
- } else if (symb === ":") {
2057
- obj[`&${param}`] = recursiveTheme(val[param]);
2058
- }
2059
- } else obj[param] = val[param];
2060
- }
2061
- return obj;
2062
- };
2063
- var findModifierFromArray = (val, modifierArray) => {
2064
- const currentMod = modifierArray.shift();
2065
- if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray);
2066
- return val;
2067
- };
2068
- var findModifier = (val, modifier) => {
2069
- if (isArray(modifier)) return findModifierFromArray(val, modifier);
2070
- else if (isString(modifier) && val[modifier]) return val[modifier];
2071
- else return val;
2072
- };
2073
- var getMediaTheme = (value, modifier) => {
2074
- const activeConfig = getActiveConfig();
2075
- if (isString(value) && value.slice(0, 2) === "--") {
2076
- value = getMediaTheme(value.slice(2));
2077
- }
2078
- if (!value || !isString(value)) {
2079
- if (activeConfig.verbose) {
2080
- console.warn(`${value} - Theme is not a string`);
2081
- }
2082
- return;
2083
- }
2084
- const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(" ");
2085
- let themeValue = activeConfig.THEME[themeName];
2086
- if (themeValue && (themeModifiers || modifier)) {
2087
- themeValue = findModifier(themeValue, themeModifiers.length ? themeModifiers : modifier);
2088
- }
2089
- const resolvedTheme = recursiveTheme(themeValue);
2090
- return resolvedTheme;
2091
- };
2092
-
2093
- // src/system/font.js
2094
- var import_utils12 = __toESM(require_cjs(), 1);
2095
- var setFont = (val, key) => {
2096
- const CSSvar = `--font-${key}`;
2097
- if (!val || isArray(val) && !val[0]) return;
2098
- const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
2099
- return { var: CSSvar, value: val, fontFace };
2100
- };
2101
- var getFontFamily = (key, factory) => {
2102
- const CONFIG2 = getActiveConfig();
2103
- const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG2;
2104
- return getDefaultOrFirstKey(factory || FONT_FAMILY2, key);
2105
- };
2106
- var setFontFamily = (val, key) => {
2107
- const CONFIG2 = getActiveConfig();
2108
- const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG2;
2109
- let { value, type } = val;
2110
- if (val.isDefault) FONT_FAMILY2.default = key;
2111
- if (isObject(value)) value = (0, import_utils12.arrayzeValue)(value);
2112
- const CSSvar = `--font-family-${key}`;
2113
- const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
2114
- return { var: CSSvar, value: str, arr: value, type };
2115
- };
2116
-
2117
- // src/system/typography.js
2118
- var runThroughMedia = (FACTORY2) => {
2119
- const CONFIG2 = getActiveConfig();
2120
- const { TYPOGRAPHY: TYPOGRAPHY2, MEDIA: MEDIA2 } = CONFIG2;
2121
- for (const prop in FACTORY2) {
2122
- const isPropMedia = prop.slice(0, 1) === "@";
2123
- const mediaValue = FACTORY2[prop];
2124
- if (!isPropMedia) continue;
2125
- const { mediaRegenerate } = FACTORY2;
2126
- const mediaName = prop.slice(1);
2127
- const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY2;
2128
- merge(mediaValue, {
2129
- type,
2130
- base,
2131
- ratio,
2132
- range,
2133
- subSequence,
2134
- h1Matches,
2135
- unit
2136
- });
2137
- const query = MEDIA2[mediaName];
2138
- const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
2139
- TYPOGRAPHY2.templates[media] = {
2140
- fontSize: mediaValue.base / TYPOGRAPHY2.browserDefault + unit
2141
- };
2142
- if (!mediaRegenerate) {
2143
- applyMediaSequenceVars(FACTORY2, prop);
2144
- continue;
2145
- }
2146
- merge(mediaValue, {
2147
- sequence: {},
2148
- scales: {},
2149
- templates: {},
2150
- vars: {}
2151
- });
2152
- generateSequence(mediaValue);
2153
- applyMediaSequenceVars(FACTORY2, prop);
2154
- }
2155
- };
2156
- var applyHeadings = (props) => {
2157
- var _a, _b;
2158
- const CONFIG2 = getActiveConfig();
2159
- if (props.h1Matches) {
2160
- const unit = props.unit;
2161
- const HEADINGS = findHeadings(props);
2162
- const { templates } = props;
2163
- for (const k in HEADINGS) {
2164
- const headerName = `h${parseInt(k) + 1}`;
2165
- const headerStyle = templates[headerName];
2166
- templates[headerName] = {
2167
- fontSize: CONFIG2.useVariable ? `var(${(_a = HEADINGS[k]) == null ? void 0 : _a.variable})` : `${(_b = HEADINGS[k]) == null ? void 0 : _b.scaling}${unit}`,
2168
- margin: headerStyle ? headerStyle.margin : 0,
2169
- lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
2170
- letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
2171
- fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
2172
- };
2173
- }
2174
- }
2175
- };
2176
- var applyTypographySequence = () => {
2177
- const CONFIG2 = getActiveConfig();
2178
- const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
2179
- generateSequence(TYPOGRAPHY2);
2180
- applyHeadings(TYPOGRAPHY2);
2181
- applySequenceVars(TYPOGRAPHY2);
2182
- runThroughMedia(TYPOGRAPHY2);
2183
- };
2184
- var getFontSizeByKey = (value) => {
2185
- const CONFIG2 = getActiveConfig();
2186
- const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
2187
- return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY2);
2188
- };
2189
-
2190
- // src/system/spacing.js
2191
- var import_utils16 = __toESM(require_cjs(), 1);
2192
- var runThroughMedia2 = (FACTORY2) => {
2193
- for (const prop in FACTORY2) {
2194
- const mediaProps = FACTORY2[prop];
2195
- const isMediaName = prop.slice(0, 1) === "@";
2196
- if (!isMediaName) continue;
2197
- const {
2198
- type,
2199
- base,
2200
- ratio,
2201
- range,
2202
- subSequence,
2203
- h1Matches,
2204
- unit
2205
- } = FACTORY2;
2206
- merge(mediaProps, {
2207
- type,
2208
- base,
2209
- ratio,
2210
- range,
2211
- subSequence,
2212
- h1Matches,
2213
- unit,
2214
- sequence: {},
2215
- scales: {},
2216
- templates: {},
2217
- vars: {}
2218
- });
2219
- generateSequence(mediaProps);
2220
- applyMediaSequenceVars(FACTORY2, prop);
2221
- }
2222
- };
2223
- var applySpacingSequence = () => {
2224
- const CONFIG2 = getActiveConfig();
2225
- const { SPACING: SPACING2 } = CONFIG2;
2226
- generateSequence(SPACING2);
2227
- applySequenceVars(SPACING2);
2228
- runThroughMedia2(SPACING2);
2229
- };
2230
- var getSequence = (sequenceProps) => {
2231
- const CONFIG2 = getActiveConfig();
2232
- const { SPACING: SPACING2 } = CONFIG2;
2233
- if (!sequenceProps) return SPACING2;
2234
- const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
2235
- return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
2236
- };
2237
- var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
2238
- const sequence = getSequence(sequenceProps);
2239
- if (isString(value) && (value.includes("calc") || value.includes("var"))) {
2240
- return { [propertyName]: value };
2241
- }
2242
- const stack = (0, import_utils16.arrayzeValue)(value);
2243
- if (!isArray(stack)) return;
2244
- if (stack.length > 1) {
2245
- let suffix = "";
2246
- if (propertyName === "borderWidth") {
2247
- propertyName = "border";
2248
- suffix = "Width";
2249
- }
2250
- const directions = {
2251
- 2: ["Block", "Inline"],
2252
- 3: ["BlockStart", "Inline", "BlockEnd"],
2253
- 4: ["BlockStart", "InlineEnd", "BlockEnd", "InlineStart"]
2254
- };
2255
- const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
2256
- stack[i],
2257
- propertyName + direction + suffix,
2258
- sequence
2259
- );
2260
- return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key));
2261
- }
2262
- return getSequenceValuePropertyPair(
2263
- value,
2264
- propertyName,
2265
- sequence
2266
- );
2267
- };
2268
- var getSpacingBasedOnRatio = (props, propertyName, val) => {
2269
- const CONFIG2 = getActiveConfig();
2270
- const { SPACING: SPACING2 } = CONFIG2;
2271
- const { spacingRatio, unit } = props;
2272
- const value = val || props[propertyName];
2273
- if (spacingRatio) {
2274
- let sequenceProps = SPACING2[spacingRatio];
2275
- if (!sequenceProps) {
2276
- const { type, base, range, subSequence } = SPACING2;
2277
- sequenceProps = SPACING2[spacingRatio] = merge({
2278
- ratio: spacingRatio,
2279
- type: type + "-" + spacingRatio,
2280
- unit,
2281
- sequence: {},
2282
- scales: {},
2283
- templates: {},
2284
- vars: {}
2285
- }, {
2286
- base,
2287
- range,
2288
- subSequence,
2289
- ratio: SPACING2.ratio,
2290
- unit: SPACING2.unit
2291
- });
2292
- }
2293
- applySequenceVars(sequenceProps, { useDefault: false });
2294
- return getSpacingByKey(value, propertyName, sequenceProps);
2295
- }
2296
- return getSpacingByKey(value, propertyName);
2297
- };
2298
-
2299
- // src/system/shadow.js
2300
- var setShadow = (value, key, suffix, prefers) => {
2301
- const CONFIG2 = getActiveConfig();
2302
- if (isArray(value)) {
2303
- return {
2304
- "@light": setShadow(value[0], key, "light"),
2305
- "@dark": setShadow(value[1], key, "dark")
2306
- };
2307
- }
2308
- if (isObject(value)) {
2309
- const obj = {};
2310
- for (const variant in value) {
2311
- obj[variant] = setShadow(
2312
- value[variant],
2313
- key,
2314
- variant.startsWith("@") ? variant.slice(1) : variant
2315
- );
2316
- }
2317
- return obj;
2318
- }
2319
- if (isString(value) && value.includes(",")) {
2320
- value = value.split(",").map((v) => {
2321
- v = v.trim();
2322
- if (v.startsWith("--")) return `var(${v})`;
2323
- if (getColor(v).length > 2) return getColor(v);
2324
- if (v.includes("px") || v.slice(-2) === "em") return v;
2325
- const arr = v.split(" ");
2326
- if (!arr.length) return v;
2327
- return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
2328
- }).join(" ");
2329
- }
2330
- const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : "");
2331
- if (CONFIG2.useVariable) {
2332
- CONFIG2.CSS_VARS[CSSVar] = value;
2333
- }
2334
- return {
2335
- var: CSSVar,
2336
- value
2337
- };
2338
- };
2339
- var getShadow = (value, globalTheme) => {
2340
- const CONFIG2 = getActiveConfig();
2341
- if (!globalTheme) globalTheme = CONFIG2.globalTheme;
2342
- if (!isString(value)) {
2343
- if (CONFIG2.verbose) console.warn(value, "- type for color is not valid");
2344
- return;
2345
- }
2346
- if (value.slice(0, 2) === "--") return `var(${value})`;
2347
- const [name] = isArray(value) ? value : value.split(" ");
2348
- const { SHADOW: SHADOW2 } = CONFIG2;
2349
- const val = SHADOW2[name];
2350
- const isObj = isObject(val);
2351
- if (!val) {
2352
- if (CONFIG2.verbose) console.warn("Can't find color ", name);
2353
- return value;
2354
- }
2355
- if (globalTheme) {
2356
- if (val[globalTheme]) return val[globalTheme].value;
2357
- else if (CONFIG2.verbose) console.warn(value, " - does not have ", globalTheme);
2358
- }
2359
- if (isObj && val.value) return val.value;
2360
- if (isObj) {
2361
- const obj = {};
2362
- for (const mediaName in val) {
2363
- const query = CONFIG2.MEDIA[mediaName.slice(1)];
2364
- const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
2365
- obj[media] = val.value;
2366
- }
2367
- return obj;
2368
- }
2369
- if (CONFIG2.verbose) console.warn("Can't find color", value);
2370
- return value;
2371
- };
2372
-
2373
- // src/system/timing.js
2374
- var import_utils20 = __toESM(require_cjs(), 1);
2375
- var applyTimingSequence = () => {
2376
- const CONFIG2 = getActiveConfig();
2377
- const { TIMING: TIMING2 } = CONFIG2;
2378
- generateSequence(TIMING2);
2379
- applySequenceVars(TIMING2);
2380
- };
2381
- var getTimingFunction = (value) => {
2382
- const CONFIG2 = getActiveConfig();
2383
- const { TIMING: TIMING2 } = CONFIG2;
2384
- return TIMING2[value] || TIMING2[(0, import_utils20.toCamelCase)(value)] || value;
2385
- };
2386
- var getTimingByKey = (value, property = "timing") => {
2387
- const CONFIG2 = getActiveConfig();
2388
- const { TIMING: TIMING2 } = CONFIG2;
2389
- return getSequenceValuePropertyPair(
2390
- value,
2391
- property,
2392
- TIMING2
2393
- );
2394
- };
2395
-
2396
- // src/system/document.js
2397
- var applyDocument = () => {
2398
- const CONFIG2 = getActiveConfig();
2399
- const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY2, THEME: THEME2, TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
2400
- return merge(DOCUMENT2, {
2401
- theme: THEME2.document,
2402
- fontFamily: getDefaultOrFirstKey(FONT_FAMILY2),
2403
- fontSize: TYPOGRAPHY2.base,
2404
- lineHeight: TYPOGRAPHY2.lineHeight
2405
- });
2406
- };
2407
-
2408
- // src/system/svg.js
2409
- var DEF_OPTIONS = {
2410
- document: document2
2411
- };
2412
- var setSVG = (val, key) => {
2413
- const CONFIG2 = getActiveConfig();
2414
- if (!val) {
2415
- if (CONFIG2.verbose) console.warn("setSVG: val is not defined", key);
2416
- return;
2417
- }
2418
- if (CONFIG2.useSvgSprite) {
2419
- return convertSvgToSymbol(key, val);
2420
- }
2421
- return val;
2422
- };
2423
- var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
2424
- const CONFIG2 = getActiveConfig();
2425
- const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
2426
- for (const key in LIBRARY) lib[key] = CONFIG2.SVG[key];
2427
- appendSVG(lib, options);
2428
- };
2429
- var setSvgIcon = (val, key) => {
2430
- var _a;
2431
- const CONFIG2 = getActiveConfig();
2432
- if (CONFIG2.useIconSprite && !((_a = CONFIG2.SEMANTIC_ICONS) == null ? void 0 : _a[key])) {
2433
- return setSVG(val, key);
2434
- }
2435
- return val;
2436
- };
2437
- var appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
2438
- const CONFIG2 = getActiveConfig();
2439
- const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
2440
- for (const key in LIBRARY) lib[key] = CONFIG2.ICONS[key];
2441
- appendSVG(lib, options);
2442
- };
2443
- var createSVGSpriteElement = (options = { isRoot: true }) => {
2444
- if (!document2 || !document2.createElementNS) return;
2445
- const svgElem = document2.createElementNS("http://www.w3.org/2000/svg", "svg");
2446
- if (options.isRoot) {
2447
- svgElem.setAttribute("aria-hidden", "true");
2448
- svgElem.setAttribute("width", "0");
2449
- svgElem.setAttribute("height", "0");
2450
- svgElem.setAttribute("style", "position:absolute");
2451
- svgElem.setAttribute("id", "svgSprite");
2452
- }
2453
- return svgElem;
2454
- };
2455
- var appendSVG = (lib, options = DEF_OPTIONS) => {
2456
- const CONFIG2 = getActiveConfig();
2457
- const doc = options.document || document2;
2458
- if (!doc || !doc.documentElement) {
2459
- if (CONFIG2.verbose) {
2460
- console.warn("To append SVG sprites it should be run in browser environment");
2461
- }
2462
- return generateSprite(lib);
2463
- }
2464
- const exists = doc.querySelector("#svgSprite");
2465
- const SVGsprite = generateSprite(lib);
2466
- if (exists) {
2467
- const tempSVG = createSVGSpriteElement({ isRoot: false });
2468
- tempSVG.innerHTML = SVGsprite;
2469
- exists.append(...tempSVG.children);
2470
- } else {
2471
- const svgSpriteDOM = createSVGSpriteElement();
2472
- if (svgSpriteDOM && svgSpriteDOM.nodeType) {
2473
- svgSpriteDOM.innerHTML = SVGsprite;
2474
- doc.body.prepend(svgSpriteDOM);
2475
- }
2476
- }
2477
- };
2478
-
2479
- // src/system/reset.js
2480
- var applyReset = (reset = {}) => {
2481
- const CONFIG2 = getActiveConfig();
2482
- const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
2483
- if (RESET2) {
2484
- if (RESET2[":root"]) {
2485
- const configReset = RESET2;
2486
- const configTemplates = TYPOGRAPHY2.templates;
2487
- configReset.body = {
2488
- ...CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {},
2489
- ...configTemplates.body
2490
- };
2491
- configReset.h1 = configTemplates.h1;
2492
- configReset.h2 = configTemplates.h2;
2493
- configReset.h3 = configTemplates.h3;
2494
- configReset.h4 = configTemplates.h4;
2495
- configReset.h5 = configTemplates.h5;
2496
- configReset.h6 = configTemplates.h6;
2497
- }
2498
- const { body, ...templates } = TYPOGRAPHY2.templates;
2499
- const globalTheme = CONFIG2.useDocumentTheme ? getMediaTheme("document", `@${CONFIG2.globalTheme}`) : {};
2500
- if (RESET2.html) overwriteDeep(RESET2.html, globalTheme);
2501
- return deepMerge(merge(RESET2, reset), {
2502
- html: {
2503
- position: "absolute",
2504
- // overflow: 'hidden',
2505
- width: "100%",
2506
- height: "100%",
2507
- top: "0",
2508
- left: "0",
2509
- margin: "0",
2510
- WebkitFontSmoothing: "subpixel-antialiased",
2511
- scrollBehavior: "smooth",
2512
- ...globalTheme,
2513
- fontSize: TYPOGRAPHY2.browserDefault + "px",
2514
- fontFamily: DOCUMENT2.fontFamily,
2515
- lineHeight: DOCUMENT2.lineHeight
2516
- },
2517
- body: {
2518
- boxSizing: "border-box",
2519
- height: "100%",
2520
- margin: 0,
2521
- fontFamily: DOCUMENT2.fontFamily,
2522
- fontSize: TYPOGRAPHY2.base / TYPOGRAPHY2.browserDefault + CONFIG2.UNIT.default,
2523
- ...templates,
2524
- ...body
2525
- },
2526
- // form elements
2527
- fieldset: {
2528
- border: 0,
2529
- padding: 0,
2530
- margin: 0
2531
- },
2532
- "select, input": {
2533
- fontFamily: DOCUMENT2.fontFamily
2534
- }
2535
- });
2536
- }
2537
- };
2538
-
2539
- // src/transforms/index.js
2540
- var isBorderStyle = (str) => [
2541
- "none",
2542
- "hidden",
2543
- "dotted",
2544
- "dashed",
2545
- "solid",
2546
- "double",
2547
- "groove",
2548
- "ridge",
2549
- "inset",
2550
- "outset",
2551
- "initial"
2552
- ].some((v) => str.includes(v));
2553
- var transformBorder = (border) => {
2554
- const arr = border.split(", ");
2555
- return arr.map((v) => {
2556
- v = v.trim();
2557
- if (v.slice(0, 2) === "--") return `var(${v})`;
2558
- else if (isBorderStyle(v)) return v || "solid";
2559
- else if (v.slice(-2) === "px" || v.slice(-2) === "em") return v;
2560
- else if (getColor(v).length > 2) return getColor(v);
2561
- return getSpacingByKey(v, "border").border;
2562
- }).join(" ");
2563
- };
2564
- var transformTextStroke = (stroke) => {
2565
- return stroke.split(", ").map((v) => {
2566
- if (v.slice(0, 2) === "--") return `var(${v})`;
2567
- if (v.includes("px")) return v;
2568
- else if (getColor(v)) return getColor(v);
2569
- return v;
2570
- }).join(" ");
2571
- };
2572
- var transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
2573
- var transformBoxShadow = (shadows, globalTheme) => shadows.split("|").map((shadow) => {
2574
- return shadow.split(",").map((v) => {
2575
- v = v.trim();
2576
- if (v.slice(0, 2) === "--") return `var(${v})`;
2577
- if (getColor(v).length > 2) {
2578
- const color = getMediaColor(v, globalTheme);
2579
- if (isObject(color)) return Object.values(color).filter((v2) => v2.includes(": " + globalTheme))[0];
2580
- return color;
2581
- }
2582
- if (v.includes("px") || v.slice(-2) === "em") return v;
2583
- const arr = v.split(" ");
2584
- if (!arr.length) return v;
2585
- return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
2586
- }).join(" ");
2587
- }).join(",");
2588
- var transformBackgroundImage = (backgroundImage, globalTheme) => {
2589
- const CONFIG2 = getActiveConfig();
2590
- return backgroundImage.split(", ").map((v) => {
2591
- if (v.slice(0, 2) === "--") return `var(${v})`;
2592
- if (v.includes("url") || v.includes("gradient")) return v;
2593
- else if (CONFIG2.GRADIENT[backgroundImage]) {
2594
- return {
2595
- backgroundImage: getMediaColor(backgroundImage, globalTheme || CONFIG2.globalTheme)
2596
- };
2597
- } else if (v.includes("/") || v.startsWith("http") || v.includes(".")) return `url(${v})`;
2598
- return v;
2599
- }).join(" ");
2600
- };
2601
- var transfromGap = (gap) => isString(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
2602
- var transformTransition = (transition) => {
2603
- const arr = transition.split(" ");
2604
- if (!arr.length) return transition;
2605
- return arr.map((v) => {
2606
- if (v.slice(0, 2) === "--") return `var(${v})`;
2607
- if (v.length < 3 || v.includes("ms")) {
2608
- const mapWithSequence = getTimingByKey(v);
2609
- return mapWithSequence.timing || v;
2610
- }
2611
- if (getTimingFunction(v)) return getTimingFunction(v);
2612
- return v;
2613
- }).join(" ");
2614
- };
2615
- var transformDuration = (duration, props, propertyName) => {
2616
- if (!isString(duration)) return;
2617
- return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
2618
- };
2619
- var splitTransition = (transition) => {
2620
- const arr = transition.split(",");
2621
- if (!arr.length) return;
2622
- return arr.map(transformTransition).join(",");
2623
- };
2624
- var checkIfBoxSize = (propertyName) => {
2625
- const prop = propertyName.toLowerCase();
2626
- return (prop.includes("width") || prop.includes("height")) && !prop.includes("border");
2627
- };
2628
- var transformSize = (propertyName, val, props = {}, opts = {}) => {
2629
- let value = val || props[propertyName];
2630
- if (isUndefined(value) && isNull(value)) return;
2631
- const shouldScaleBoxSize = props.scaleBoxSize;
2632
- const isBoxSize = checkIfBoxSize(propertyName);
2633
- if (!shouldScaleBoxSize && isBoxSize && isString(value)) {
2634
- value = value.split(" ").map((v) => {
2635
- const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
2636
- const hasUnits = ["%", "vw", "vh", "ch"].some((unit) => value.includes(unit));
2637
- if (isSingleLetter && !hasUnits) return v + "_default";
2638
- return v;
2639
- }).join(" ");
2640
- }
2641
- if (opts.ratio) {
2642
- return getSpacingBasedOnRatio(props, propertyName, value);
2643
- } else {
2644
- return getSpacingByKey(value, propertyName);
2645
- }
2646
- };
2647
- var transformSizeRatio = (propertyName, val = null, props) => {
2648
- return transformSize(propertyName, val, props, {
2649
- ratio: true
2650
- });
2651
- };
2652
- var transformBorderRadius = (radius, props, propertyName) => {
2653
- if (!isString(radius)) return;
2654
- return {
2655
- borderRadius: radius.split(" ").map((v, k) => getSpacingBasedOnRatio(props, propertyName, v)[propertyName]).join(" ")
2656
- };
2657
- };
2658
-
2659
- // src/set.js
2660
- var setCases = (val, key) => {
2661
- if (isFunction(val)) return val();
2662
- return val;
2663
- };
2664
- var setSameValue = (val, key) => val;
2665
- var VALUE_TRANSFORMERS = {
2666
- color: setColor,
2667
- gradient: setGradient,
2668
- font: setFont,
2669
- font_family: setFontFamily,
2670
- theme: setTheme,
2671
- icons: setSvgIcon,
2672
- semantic_icons: setSameValue,
2673
- svg: setSVG,
2674
- svg_data: setSameValue,
2675
- typography: setSameValue,
2676
- cases: setCases,
2677
- shadow: setShadow,
2678
- spacing: setSameValue,
2679
- media: setSameValue,
2680
- grid: setSameValue,
2681
- class: setSameValue,
2682
- timing: setSameValue,
2683
- reset: setSameValue,
2684
- unit: setSameValue,
2685
- animation: setSameValue
2686
- };
2687
- var setValue = (FACTORY_NAME, value, key) => {
2688
- const CONFIG2 = getActiveConfig();
2689
- const factoryName = FACTORY_NAME.toLowerCase();
2690
- const FACTORY2 = CONFIG2[FACTORY_NAME];
2691
- if (VALUE_TRANSFORMERS[factoryName]) {
2692
- try {
2693
- const result = VALUE_TRANSFORMERS[factoryName](value, key);
2694
- FACTORY2[key] = result;
2695
- return FACTORY2;
2696
- } catch (error) {
2697
- if (CONFIG2.verbose) console.warn("Error setting", factoryName, "value", value, key, error);
2698
- }
2699
- }
2700
- if (CONFIG2.verbose) console.warn("Can not find", factoryName, "method in scratch");
2701
- };
2702
- var setEach = (factoryName, props) => {
2703
- const CONFIG2 = getActiveConfig();
2704
- const FACTORY_NAME = factoryName.toUpperCase();
2705
- const keys = Object.keys(props);
2706
- keys.forEach((key) => {
2707
- try {
2708
- return setValue(FACTORY_NAME, props[key], key);
2709
- } catch (error) {
2710
- if (CONFIG2.verbose) console.warn("Error setting", FACTORY_NAME, "value", props[key], key, error);
2711
- }
2712
- });
2713
- return CONFIG2[FACTORY_NAME];
2714
- };
2715
- var SET_OPTIONS = {};
2716
- var set = (recivedConfig, options = SET_OPTIONS) => {
2717
- let CONFIG2 = getActiveConfig();
2718
- const {
2719
- version,
2720
- verbose,
2721
- useVariable,
2722
- useReset,
2723
- useSvgSprite,
2724
- useFontImport,
2725
- useIconSprite,
2726
- globalTheme,
2727
- useDocumentTheme,
2728
- useDefaultConfig,
2729
- SEMANTIC_ICONS: SEMANTIC_ICONS2,
2730
- ...config
2731
- } = recivedConfig;
2732
- if (options.newConfig) {
2733
- CONFIG2 = setActiveConfig(options.newConfig);
2734
- }
2735
- if (verbose !== void 0) CONFIG2.verbose = verbose;
2736
- if (useVariable !== void 0) CONFIG2.useVariable = useVariable;
2737
- if (useReset !== void 0) CONFIG2.useReset = useReset;
2738
- if (useFontImport !== void 0) CONFIG2.useFontImport = useFontImport;
2739
- if (useSvgSprite !== void 0) CONFIG2.useSvgSprite = useSvgSprite;
2740
- if (useIconSprite !== void 0) CONFIG2.useIconSprite = useIconSprite;
2741
- if (useDocumentTheme !== void 0) CONFIG2.useDocumentTheme = useDocumentTheme;
2742
- if (globalTheme !== void 0) CONFIG2.globalTheme = globalTheme;
2743
- if (useDefaultConfig !== void 0) CONFIG2.useDefaultConfig = useDefaultConfig;
2744
- if (SEMANTIC_ICONS2 !== void 0) CONFIG2.SEMANTIC_ICONS = SEMANTIC_ICONS2;
2745
- if (CONFIG2.verbose) console.log(CONFIG2);
2746
- if (!CONFIG2.__svg_cache) CONFIG2.__svg_cache = {};
2747
- const keys = Object.keys(config);
2748
- keys.map((key) => setEach(key, config[key]));
2749
- if (config.TYPOGRAPHY) {
2750
- try {
2751
- applyTypographySequence();
2752
- } catch (e) {
2753
- if (CONFIG2.verbose) console.warn("Error applying typography sequence", e);
2754
- }
2755
- }
2756
- if (config.SPACING) {
2757
- try {
2758
- applySpacingSequence();
2759
- } catch (e) {
2760
- if (CONFIG2.verbose) console.warn("Error applying typography sequence", e);
2761
- }
2762
- }
2763
- if (config.TIMING) {
2764
- try {
2765
- applyTimingSequence();
2766
- } catch (e) {
2767
- if (CONFIG2.verbose) console.warn("Error applying typography sequence", e);
2768
- }
2769
- }
2770
- applyDocument();
2771
- applyReset();
2772
- return CONFIG2;
2773
- };
2774
- // @preserve-env
36
+ var scratchUtils = __toESM(require("./utils/index.js"), 1);
37
+ var scratchSystem = __toESM(require("./system/index.js"), 1);
38
+ __reExport(index_exports, require("./factory.js"), module.exports);
39
+ __reExport(index_exports, require("./defaultConfig"), module.exports);
40
+ __reExport(index_exports, require("./system"), module.exports);
41
+ __reExport(index_exports, require("./utils"), module.exports);
42
+ __reExport(index_exports, require("./transforms"), module.exports);
43
+ __reExport(index_exports, require("./set.js"), module.exports);