@symbo.ls/scratch 3.14.0 → 3.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/defaultConfig/animation.js +4 -2
  3. package/dist/cjs/defaultConfig/cases.js +4 -2
  4. package/dist/cjs/defaultConfig/class.js +5 -2
  5. package/dist/cjs/defaultConfig/color.js +6 -9
  6. package/dist/cjs/defaultConfig/document.js +4 -2
  7. package/dist/cjs/defaultConfig/font-family.js +8 -12
  8. package/dist/cjs/defaultConfig/font.js +4 -11
  9. package/dist/cjs/defaultConfig/grid.js +5 -3
  10. package/dist/cjs/defaultConfig/icons.js +6 -4
  11. package/dist/cjs/defaultConfig/index.js +200 -24
  12. package/dist/cjs/defaultConfig/media.js +4 -2
  13. package/dist/cjs/defaultConfig/responsive.js +6 -4
  14. package/dist/cjs/defaultConfig/sequence.js +4 -2
  15. package/dist/cjs/defaultConfig/shadow.js +4 -2
  16. package/dist/cjs/defaultConfig/spacing.js +56 -7
  17. package/dist/cjs/defaultConfig/svg.js +6 -4
  18. package/dist/cjs/defaultConfig/templates.js +4 -2
  19. package/dist/cjs/defaultConfig/theme.js +4 -14
  20. package/dist/cjs/defaultConfig/timing.js +36 -5
  21. package/dist/cjs/defaultConfig/typography.js +36 -5
  22. package/dist/cjs/defaultConfig/unit.js +4 -2
  23. package/dist/cjs/factory.js +345 -104
  24. package/dist/cjs/index.js +6333 -13
  25. package/dist/cjs/package.json +4 -0
  26. package/dist/cjs/set.js +5609 -214
  27. package/dist/cjs/system/color.js +4487 -170
  28. package/dist/cjs/system/document.js +4371 -11
  29. package/dist/cjs/system/font.js +4401 -28
  30. package/dist/cjs/system/index.js +5748 -11
  31. package/dist/cjs/system/reset.js +4449 -52
  32. package/dist/cjs/system/shadow.js +4834 -44
  33. package/dist/cjs/system/spacing.js +4752 -39
  34. package/dist/cjs/system/svg.js +4437 -74
  35. package/dist/cjs/system/theme.js +4526 -336
  36. package/dist/cjs/system/timing.js +4695 -19
  37. package/dist/cjs/system/typography.js +4755 -42
  38. package/dist/cjs/tests/index.js +4 -2
  39. package/dist/cjs/transforms/index.js +5019 -134
  40. package/dist/cjs/utils/color.js +47 -66
  41. package/dist/cjs/utils/font.js +25 -48
  42. package/dist/cjs/utils/index.js +5068 -8
  43. package/dist/cjs/utils/sequence.js +4436 -67
  44. package/dist/cjs/utils/sprite.js +353 -19
  45. package/dist/cjs/utils/theme.js +3 -1
  46. package/dist/cjs/utils/unit.js +4 -2
  47. package/dist/cjs/utils/var.js +4391 -57
  48. package/package.json +1 -1
  49. package/src/utils/sprite.js +29 -12
  50. package/dist/esm/defaultConfig/animation.js +0 -4
  51. package/dist/esm/defaultConfig/cases.js +0 -4
  52. package/dist/esm/defaultConfig/class.js +0 -4
  53. package/dist/esm/defaultConfig/color.js +0 -11
  54. package/dist/esm/defaultConfig/document.js +0 -4
  55. package/dist/esm/defaultConfig/font-family.js +0 -18
  56. package/dist/esm/defaultConfig/font.js +0 -13
  57. package/dist/esm/defaultConfig/grid.js +0 -5
  58. package/dist/esm/defaultConfig/icons.js +0 -6
  59. package/dist/esm/defaultConfig/index.js +0 -25
  60. package/dist/esm/defaultConfig/media.js +0 -9
  61. package/dist/esm/defaultConfig/responsive.js +0 -30
  62. package/dist/esm/defaultConfig/sequence.js +0 -29
  63. package/dist/esm/defaultConfig/shadow.js +0 -4
  64. package/dist/esm/defaultConfig/spacing.js +0 -18
  65. package/dist/esm/defaultConfig/svg.js +0 -6
  66. package/dist/esm/defaultConfig/templates.js +0 -4
  67. package/dist/esm/defaultConfig/theme.js +0 -16
  68. package/dist/esm/defaultConfig/timing.js +0 -17
  69. package/dist/esm/defaultConfig/typography.js +0 -21
  70. package/dist/esm/defaultConfig/unit.js +0 -6
  71. package/dist/esm/factory.js +0 -120
  72. package/dist/esm/index.js +0 -14
  73. package/dist/esm/set.js +0 -280
  74. package/dist/esm/system/color.js +0 -253
  75. package/dist/esm/system/document.js +0 -16
  76. package/dist/esm/system/font.js +0 -58
  77. package/dist/esm/system/index.js +0 -10
  78. package/dist/esm/system/reset.js +0 -94
  79. package/dist/esm/system/shadow.js +0 -92
  80. package/dist/esm/system/spacing.js +0 -121
  81. package/dist/esm/system/svg.js +0 -113
  82. package/dist/esm/system/theme.js +0 -481
  83. package/dist/esm/system/timing.js +0 -32
  84. package/dist/esm/system/typography.js +0 -94
  85. package/dist/esm/tests/index.js +0 -8
  86. package/dist/esm/transforms/index.js +0 -216
  87. package/dist/esm/utils/color.js +0 -192
  88. package/dist/esm/utils/font.js +0 -94
  89. package/dist/esm/utils/index.js +0 -7
  90. package/dist/esm/utils/sequence.js +0 -322
  91. package/dist/esm/utils/sprite.js +0 -72
  92. package/dist/esm/utils/theme.js +0 -9
  93. package/dist/esm/utils/unit.js +0 -59
  94. package/dist/esm/utils/var.js +0 -96
  95. package/dist/iife/index.js +0 -3630
package/dist/esm/set.js DELETED
@@ -1,280 +0,0 @@
1
- import { FACTORY, getActiveConfig, setActiveConfig, toCamel } from "./factory.js";
2
- import {
3
- setColor,
4
- setGradient,
5
- setFont,
6
- setFontFamily,
7
- setTheme,
8
- setSvgIcon,
9
- setSVG,
10
- applyTypographySequence,
11
- applySpacingSequence,
12
- applyReset,
13
- applyTimingSequence,
14
- applyDocument,
15
- setShadow
16
- } from "./system/index.js";
17
- import { deepMerge, isObject, isArray } from "@symbo.ls/utils";
18
- const setVars = (val, key) => {
19
- const CONFIG = getActiveConfig();
20
- const { cssVars } = CONFIG;
21
- const varName = key.startsWith("--") ? key : `--${key}`;
22
- cssVars[varName] = val;
23
- return val;
24
- };
25
- const asIs = (val) => val;
26
- const VALUE_TRANSFORMERS = {
27
- color: setColor,
28
- gradient: setGradient,
29
- font: setFont,
30
- fontFamily: setFontFamily,
31
- fontfamily: setFontFamily,
32
- theme: setTheme,
33
- icons: setSvgIcon,
34
- semanticIcons: asIs,
35
- semanticicons: asIs,
36
- svg: setSVG,
37
- svgData: asIs,
38
- typography: asIs,
39
- shadow: setShadow,
40
- spacing: asIs,
41
- media: asIs,
42
- grid: asIs,
43
- class: asIs,
44
- timing: asIs,
45
- reset: asIs,
46
- unit: asIs,
47
- animation: asIs,
48
- vars: setVars
49
- };
50
- const setValue = (factoryName, value, key) => {
51
- const CONFIG = getActiveConfig();
52
- const camelName = toCamel(factoryName);
53
- const lowerName = camelName.toLowerCase();
54
- const FACTORY2 = CONFIG[camelName] || CONFIG[lowerName] || CONFIG[factoryName];
55
- const transformer = VALUE_TRANSFORMERS[camelName] || VALUE_TRANSFORMERS[lowerName];
56
- if (transformer) {
57
- try {
58
- const result = transformer(value, key);
59
- if (FACTORY2) FACTORY2[key] = result;
60
- return FACTORY2;
61
- } catch (error) {
62
- if (CONFIG.verbose)
63
- console.warn("Error setting", lowerName, "value", value, key, error);
64
- }
65
- }
66
- if (CONFIG.verbose)
67
- console.warn("Can not find", lowerName, "method in scratch");
68
- };
69
- const setEach = (factoryName, props) => {
70
- const CONFIG = getActiveConfig();
71
- const lowerName = factoryName.toLowerCase();
72
- const keys = Object.keys(props).sort((a, b) => {
73
- const aComposite = isObject(props[a]) || isArray(props[a]) ? 1 : 0;
74
- const bComposite = isObject(props[b]) || isArray(props[b]) ? 1 : 0;
75
- return aComposite - bComposite;
76
- });
77
- keys.forEach((key) => {
78
- try {
79
- return setValue(lowerName, props[key], key);
80
- } catch (error) {
81
- if (CONFIG.verbose)
82
- console.warn(
83
- "Error setting",
84
- lowerName,
85
- "value",
86
- props[key],
87
- key,
88
- error
89
- );
90
- }
91
- });
92
- return CONFIG[lowerName] || CONFIG[factoryName];
93
- };
94
- const changeGlobalTheme = (newTheme, targetConfig) => {
95
- const CONFIG = targetConfig || getActiveConfig();
96
- CONFIG.globalTheme = newTheme;
97
- const configDoc = CONFIG.document && CONFIG.document.documentElement ? CONFIG.document : null;
98
- const targetDoc = configDoc || (typeof document !== "undefined" ? document : null);
99
- const targetWin = targetDoc && targetDoc.defaultView || (typeof window !== "undefined" ? window : null);
100
- if (targetDoc) {
101
- const root = CONFIG.themeRoot || targetDoc.documentElement;
102
- const forced = newTheme && newTheme !== "auto";
103
- if (forced) {
104
- root.setAttribute("data-theme", newTheme);
105
- if (newTheme === "dark" || newTheme === "light") {
106
- root.style.colorScheme = newTheme;
107
- } else {
108
- root.style.colorScheme = "light dark";
109
- }
110
- } else if (targetWin && targetWin.matchMedia) {
111
- const apply = (mq2) => {
112
- root.setAttribute("data-theme", mq2.matches ? "dark" : "light");
113
- };
114
- const mq = targetWin.matchMedia("(prefers-color-scheme: dark)");
115
- apply(mq);
116
- root.style.colorScheme = "light dark";
117
- if (!CONFIG.__prefersListener) {
118
- CONFIG.__prefersListener = apply;
119
- try {
120
- mq.addEventListener("change", apply);
121
- } catch (e) {
122
- mq.addListener(apply);
123
- }
124
- }
125
- } else {
126
- root.setAttribute("data-theme", "light");
127
- root.style.colorScheme = "light";
128
- }
129
- }
130
- const themeVarPrefix = CONFIG.varPrefix ? `--${CONFIG.varPrefix}-theme-` : "--theme-";
131
- for (const key in CONFIG.cssVars) {
132
- if (key.startsWith(themeVarPrefix)) delete CONFIG.cssVars[key];
133
- }
134
- for (const key in CONFIG.cssMediaVars) {
135
- delete CONFIG.cssMediaVars[key];
136
- }
137
- if (targetDoc && CONFIG.cssVars) {
138
- const targetSelector = CONFIG.scopeSelector || ":root";
139
- const sheets = targetDoc.styleSheets;
140
- for (let i = 0; i < sheets.length; i++) {
141
- try {
142
- const rules = sheets[i].cssRules;
143
- for (let j = 0; j < rules.length; j++) {
144
- if (rules[j].selectorText === targetSelector) {
145
- for (const key in CONFIG.cssVars) {
146
- rules[j].style.setProperty(key, CONFIG.cssVars[key]);
147
- }
148
- return CONFIG;
149
- }
150
- }
151
- } catch (e) {
152
- }
153
- }
154
- }
155
- return CONFIG;
156
- };
157
- const SET_OPTIONS = {};
158
- const set = (recivedConfig, options = SET_OPTIONS) => {
159
- let CONFIG = options.config || getActiveConfig();
160
- const {
161
- version,
162
- verbose,
163
- useVariable,
164
- useReset,
165
- useSvgSprite,
166
- useFontImport,
167
- useIconSprite,
168
- globalTheme,
169
- themeRoot,
170
- useDocumentTheme,
171
- useDefaultConfig,
172
- semanticIcons,
173
- files,
174
- assets,
175
- ...config
176
- } = recivedConfig;
177
- if (options.newConfig) {
178
- CONFIG = setActiveConfig(options.newConfig);
179
- }
180
- if (files !== void 0) CONFIG.files = files;
181
- if (assets !== void 0) CONFIG.assets = assets;
182
- if (verbose !== void 0) CONFIG.verbose = verbose;
183
- if (useVariable !== void 0) CONFIG.useVariable = useVariable;
184
- if (useReset !== void 0) CONFIG.useReset = useReset;
185
- if (useFontImport !== void 0) CONFIG.useFontImport = useFontImport;
186
- if (useSvgSprite !== void 0) CONFIG.useSvgSprite = useSvgSprite;
187
- if (useIconSprite !== void 0) CONFIG.useIconSprite = useIconSprite;
188
- if (useDocumentTheme !== void 0) CONFIG.useDocumentTheme = useDocumentTheme;
189
- if (globalTheme !== void 0) CONFIG.globalTheme = globalTheme;
190
- if (themeRoot !== void 0) CONFIG.themeRoot = themeRoot;
191
- if (recivedConfig.useThemeSuffixedVars !== void 0)
192
- CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
193
- if (useDefaultConfig !== void 0) CONFIG.useDefaultConfig = useDefaultConfig;
194
- if (semanticIcons !== void 0) CONFIG.semanticIcons = semanticIcons;
195
- if (CONFIG.verbose) console.log(CONFIG);
196
- const setConfigDoc = CONFIG.document && CONFIG.document.documentElement ? CONFIG.document : null;
197
- const setTargetDoc = setConfigDoc || (typeof document !== "undefined" ? document : null);
198
- const setTargetWin = setTargetDoc && setTargetDoc.defaultView || (typeof window !== "undefined" ? window : null);
199
- const setRoot = setTargetDoc && (CONFIG.themeRoot || setTargetDoc.documentElement);
200
- if (setRoot && typeof setRoot.setAttribute === "function") {
201
- const forced = CONFIG.globalTheme && CONFIG.globalTheme !== "auto";
202
- if (forced) {
203
- setRoot.setAttribute("data-theme", CONFIG.globalTheme);
204
- if (CONFIG.globalTheme === "dark" || CONFIG.globalTheme === "light") {
205
- setRoot.style.colorScheme = CONFIG.globalTheme;
206
- } else {
207
- setRoot.style.colorScheme = "light dark";
208
- }
209
- } else if (setTargetWin && setTargetWin.matchMedia) {
210
- const apply = (mq2) => {
211
- setRoot.setAttribute("data-theme", mq2.matches ? "dark" : "light");
212
- };
213
- const mq = setTargetWin.matchMedia("(prefers-color-scheme: dark)");
214
- apply(mq);
215
- setRoot.style.colorScheme = "light dark";
216
- if (!CONFIG.__prefersListener) {
217
- CONFIG.__prefersListener = apply;
218
- try {
219
- mq.addEventListener("change", apply);
220
- } catch (e) {
221
- mq.addListener(apply);
222
- }
223
- }
224
- } else {
225
- setRoot.setAttribute("data-theme", "light");
226
- setRoot.style.colorScheme = "light";
227
- }
228
- }
229
- if (!CONFIG.__svgCache) CONFIG.__svgCache = {};
230
- const keys = Object.keys(config);
231
- const keySet = new Set(keys);
232
- keys.forEach((key) => {
233
- const lower = key.toLowerCase();
234
- if (lower !== key && keySet.has(lower)) {
235
- deepMerge(config[lower], config[key]);
236
- }
237
- });
238
- keys.map((key) => {
239
- const lower = key.toLowerCase();
240
- if (lower !== key && keySet.has(lower)) return;
241
- return setEach(key, config[key]);
242
- });
243
- if (CONFIG.varPrefix) {
244
- if (CONFIG.typography) CONFIG.typography.varPrefix = CONFIG.varPrefix;
245
- if (CONFIG.spacing) CONFIG.spacing.varPrefix = CONFIG.varPrefix;
246
- if (CONFIG.timing) CONFIG.timing.varPrefix = CONFIG.varPrefix;
247
- }
248
- if (config.typography) {
249
- try {
250
- applyTypographySequence();
251
- } catch (e) {
252
- if (CONFIG.verbose) console.warn("Error applying typography sequence", e);
253
- }
254
- }
255
- if (config.spacing) {
256
- try {
257
- applySpacingSequence();
258
- } catch (e) {
259
- if (CONFIG.verbose) console.warn("Error applying spacing sequence", e);
260
- }
261
- }
262
- if (config.timing) {
263
- try {
264
- applyTimingSequence();
265
- } catch (e) {
266
- if (CONFIG.verbose) console.warn("Error applying timing sequence", e);
267
- }
268
- }
269
- applyDocument();
270
- const computedReset = applyReset();
271
- if (computedReset) CONFIG.reset = computedReset;
272
- return CONFIG;
273
- };
274
- export {
275
- VALUE_TRANSFORMERS,
276
- changeGlobalTheme,
277
- set,
278
- setEach,
279
- setValue
280
- };
@@ -1,253 +0,0 @@
1
- import { isObject, isArray, isString } from "@symbo.ls/utils";
2
- import { getActiveConfig } from "../factory.js";
3
- import {
4
- colorStringToRgbaArray,
5
- getRgbTone,
6
- isCSSVar,
7
- parseColorToken
8
- } from "../utils/index.js";
9
- const getColor = (value, key, config) => {
10
- const CONFIG = config || getActiveConfig();
11
- if (!isString(value)) {
12
- if (CONFIG.verbose) console.warn(value, "- type for color is not valid");
13
- return;
14
- }
15
- if (isCSSVar(value)) return `var(${value})`;
16
- if (key && value[key]) value = value[key];
17
- let name, alpha, tone;
18
- if (isArray(value)) {
19
- [name, alpha, tone] = value;
20
- } else {
21
- const parsed = parseColorToken(value);
22
- if (!parsed) {
23
- const { color: COLOR2, gradient: GRADIENT2 } = CONFIG;
24
- const directVal = GRADIENT2[value] || COLOR2[value];
25
- if (directVal) return CONFIG.useVariable ? `var(${directVal.var})` : directVal.value;
26
- return value;
27
- }
28
- if (parsed.passthrough) return parsed.passthrough;
29
- if (parsed.cssVar) return `var(${parsed.cssVar})`;
30
- name = parsed.name;
31
- alpha = parsed.alpha;
32
- tone = parsed.tone;
33
- }
34
- const { color: COLOR, gradient: GRADIENT } = CONFIG;
35
- let val = COLOR[name] || GRADIENT[name];
36
- if (!val) {
37
- if (CONFIG.verbose) console.warn("Can't find color ", name);
38
- return value;
39
- }
40
- if (key) {
41
- if (val[key]) val = val[key];
42
- else if (CONFIG.verbose) console.warn(value, " - does not have ", key);
43
- }
44
- let rgb = val.rgb;
45
- if (!rgb) {
46
- return CONFIG.useVariable ? `var(${val.var})` : val.value;
47
- }
48
- if (tone && !val[tone]) {
49
- rgb = getRgbTone(rgb, tone);
50
- val[tone] = { rgb, var: `${val.var}-${tone}` };
51
- }
52
- if (val[tone]) rgb = val[tone].rgb;
53
- if (alpha) return `rgba(${rgb}, ${alpha})`;
54
- if (tone) return `rgba(${rgb}, 1)`;
55
- return CONFIG.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
56
- };
57
- const getMediaColor = (value, globalTheme, config) => {
58
- const CONFIG = config || getActiveConfig();
59
- if (!globalTheme) globalTheme = CONFIG.globalTheme === "auto" ? null : CONFIG.globalTheme;
60
- if (!isString(value)) {
61
- if (CONFIG.verbose) console.warn(value, "- type for color is not valid");
62
- return;
63
- }
64
- if (isCSSVar(value)) return `var(${value})`;
65
- let name;
66
- if (isArray(value)) {
67
- name = value[0];
68
- } else {
69
- const parsed = parseColorToken(value);
70
- if (!parsed) return value;
71
- if (parsed.passthrough) return parsed.passthrough;
72
- if (parsed.cssVar) return `var(${parsed.cssVar})`;
73
- name = parsed.name;
74
- }
75
- const { color: COLOR, gradient: GRADIENT } = CONFIG;
76
- const val = COLOR[name] || GRADIENT[name];
77
- const isObj = isObject(val);
78
- if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
79
- else if (isObj) {
80
- if (CONFIG.useVariable && val.var) return `var(${val.var})`;
81
- if (globalTheme) return getColor(value, `@${globalTheme}`, config);
82
- else {
83
- const obj = {};
84
- for (const mediaName in val) {
85
- if (mediaName.charCodeAt(0) !== 64) continue;
86
- const query = CONFIG.media[mediaName.slice(1)];
87
- if (!query) continue;
88
- const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
89
- obj[media] = getColor(value, mediaName, config);
90
- }
91
- return obj;
92
- }
93
- } else {
94
- if (CONFIG.verbose) console.warn("Can't find color", value);
95
- return value;
96
- }
97
- };
98
- const setColor = (val, key, suffix) => {
99
- const CONFIG = getActiveConfig();
100
- if (isString(val) && isCSSVar(val)) {
101
- const rawRef = val.slice(2);
102
- val = getColor(rawRef);
103
- if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
104
- const parts = rawRef.split(" ");
105
- let refColor = CONFIG.color[parts[0]];
106
- if (refColor && !refColor.value && !refColor.rgb && (isString(refColor) || isArray(refColor) || isObject(refColor))) {
107
- CONFIG.color[parts[0]] = setColor(refColor, parts[0]);
108
- refColor = CONFIG.color[parts[0]];
109
- }
110
- if (refColor && refColor.value) {
111
- let rgb2 = refColor.rgb;
112
- const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
113
- const tone = parts[2];
114
- if (tone) {
115
- rgb2 = getRgbTone(rgb2, tone);
116
- }
117
- val = `rgba(${rgb2}, ${alpha2})`;
118
- } else {
119
- const tone = parts[2];
120
- const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
121
- if (tone) {
122
- try {
123
- const rgb2 = colorStringToRgbaArray(parts[0]);
124
- if (rgb2 && rgb2.length >= 3) {
125
- const tonedRgb = getRgbTone(rgb2.slice(0, 3).join(", "), tone);
126
- val = `rgba(${tonedRgb}, ${alpha2})`;
127
- } else {
128
- val = parts[0];
129
- }
130
- } catch (e) {
131
- val = parts[0];
132
- }
133
- } else {
134
- val = parts[0];
135
- }
136
- }
137
- }
138
- }
139
- if (isArray(val)) {
140
- val = { "@light": val[0], "@dark": val[1] };
141
- }
142
- if (isObject(val)) {
143
- const obj = {};
144
- for (const variant in val) {
145
- obj[variant] = setColor(
146
- val[variant],
147
- key,
148
- variant.slice(0, 1) === "@" ? variant.slice(1) : variant
149
- );
150
- }
151
- if (CONFIG.useVariable) {
152
- const vp2 = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
153
- const adaptiveVar = `--${vp2}color-${key}`;
154
- let fallbackValue;
155
- const schemeValues = {};
156
- for (const variant in obj) {
157
- if (variant.charCodeAt(0) !== 64) continue;
158
- const scheme = variant.slice(1);
159
- const entry = obj[variant];
160
- const value2 = entry && (entry.value || entry);
161
- if (!value2 || typeof value2 !== "string") continue;
162
- schemeValues[scheme] = value2;
163
- if (scheme === "light" || fallbackValue === void 0) fallbackValue = value2;
164
- }
165
- if (fallbackValue !== void 0) {
166
- CONFIG.cssVars[adaptiveVar] = fallbackValue;
167
- if (!CONFIG.cssMediaVars) CONFIG.cssMediaVars = {};
168
- for (const scheme in schemeValues) {
169
- const sel = `[data-theme="${scheme}"]`;
170
- if (!CONFIG.cssMediaVars[sel]) CONFIG.cssMediaVars[sel] = {};
171
- CONFIG.cssMediaVars[sel][adaptiveVar] = schemeValues[scheme];
172
- if (scheme === "light" || scheme === "dark") {
173
- const mq = `@media (prefers-color-scheme: ${scheme})`;
174
- if (!CONFIG.cssMediaVars[mq]) CONFIG.cssMediaVars[mq] = {};
175
- CONFIG.cssMediaVars[mq][adaptiveVar] = schemeValues[scheme];
176
- }
177
- }
178
- obj.var = adaptiveVar;
179
- }
180
- }
181
- return obj;
182
- }
183
- const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
184
- const CSSVar = `--${vp}color-${key}` + (suffix ? `-${suffix}` : "");
185
- let resolvedVal = val.value || val;
186
- if (isString(resolvedVal) && resolvedVal.includes(".") && !resolvedVal.includes("(")) {
187
- const [colorRef, alphaStr] = resolvedVal.split(".");
188
- const refColor = CONFIG.color[colorRef];
189
- if (refColor && refColor.rgb) {
190
- resolvedVal = `rgba(${refColor.rgb}, ${parseFloat("0." + alphaStr) || 1})`;
191
- }
192
- }
193
- if (isString(resolvedVal) && !resolvedVal.includes("(") && !resolvedVal.startsWith("#")) {
194
- const parsed = parseColorToken(resolvedVal);
195
- if (parsed && parsed.name && !parsed.passthrough && !parsed.cssVar) {
196
- const refColor = CONFIG.color[parsed.name];
197
- if (refColor && !refColor.value && !refColor.rgb && (isString(refColor) || isArray(refColor) || isObject(refColor))) {
198
- CONFIG.color[parsed.name] = setColor(refColor, parsed.name);
199
- }
200
- const baseColor = CONFIG.color[parsed.name];
201
- if (baseColor && baseColor.rgb) {
202
- let rgb2 = baseColor.rgb;
203
- if (parsed.tone) rgb2 = getRgbTone(rgb2, parsed.tone);
204
- const alphaVal = parsed.alpha ? parseFloat(parsed.alpha) : 1;
205
- resolvedVal = `rgba(${rgb2}, ${alphaVal})`;
206
- }
207
- }
208
- }
209
- const colorArr = colorStringToRgbaArray(resolvedVal);
210
- const [r, g, b, a = 1] = colorArr;
211
- const alpha = parseFloat(a.toFixed(2));
212
- const rgb = `${r}, ${g}, ${b}`;
213
- const value = `rgba(${rgb}, ${alpha})`;
214
- if (CONFIG.useVariable) {
215
- CONFIG.cssVars[CSSVar] = value;
216
- }
217
- return {
218
- var: CSSVar,
219
- rgb,
220
- alpha,
221
- value
222
- };
223
- };
224
- const setGradient = (val, key, suffix) => {
225
- const CONFIG = getActiveConfig();
226
- if (isString(val) && isCSSVar(val)) val = getColor(val.slice(2));
227
- if (isArray(val)) {
228
- return {
229
- "@light": setGradient(val[0], key, "light"),
230
- "@dark": setGradient(val[0], key, "dark")
231
- };
232
- }
233
- if (isObject(val)) {
234
- const obj = {};
235
- for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
236
- return obj;
237
- }
238
- const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
239
- const CSSVar = `--${vp}gradient-${key}` + (suffix ? `-${suffix}` : "");
240
- if (CONFIG.useVariable) {
241
- CONFIG.cssVars[CSSVar] = val.value || val;
242
- }
243
- return {
244
- var: CSSVar,
245
- value: val.value || val
246
- };
247
- };
248
- export {
249
- getColor,
250
- getMediaColor,
251
- setColor,
252
- setGradient
253
- };
@@ -1,16 +0,0 @@
1
- import { merge } from "@symbo.ls/utils";
2
- import { getActiveConfig } from "../factory.js";
3
- import { getDefaultOrFirstKey } from "../utils/index.js";
4
- const applyDocument = () => {
5
- const CONFIG = getActiveConfig();
6
- const { document: DOCUMENT, fontFamily: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG;
7
- return merge(DOCUMENT, {
8
- theme: THEME.document,
9
- fontFamily: getDefaultOrFirstKey(FONT_FAMILY),
10
- fontSize: TYPOGRAPHY.base,
11
- lineHeight: TYPOGRAPHY.lineHeight
12
- });
13
- };
14
- export {
15
- applyDocument
16
- };
@@ -1,58 +0,0 @@
1
- import { isObject, isArray } from "@symbo.ls/utils";
2
- import { arrayzeValue } from "@symbo.ls/utils";
3
- import { getActiveConfig } from "../factory.js";
4
- import {
5
- getDefaultOrFirstKey,
6
- getFontFaceEach,
7
- isGoogleFontsUrl,
8
- setCustomFontMedia,
9
- setFontImport,
10
- resolveFileUrl
11
- } from "../utils/index.js";
12
- const setFont = (val, key) => {
13
- const CONFIG = getActiveConfig();
14
- const CSSvar = `--font-${key}`;
15
- if (!val || isArray(val) && !val[0]) return;
16
- let fontFace;
17
- if (val.isVariable) {
18
- const url = resolveFileUrl(val.url, CONFIG.files) || val.url;
19
- if (isGoogleFontsUrl(url)) {
20
- fontFace = setFontImport(url);
21
- } else {
22
- fontFace = setCustomFontMedia(key, url, val.fontWeight, {
23
- fontStretch: val.fontStretch,
24
- fontDisplay: val.fontDisplay || "swap"
25
- });
26
- }
27
- } else if (val[0]) {
28
- fontFace = getFontFaceEach(key, val, CONFIG.files);
29
- } else {
30
- const url = Array.isArray(val.url) ? val.url.map((u) => resolveFileUrl(u, CONFIG.files) || u) : resolveFileUrl(val.url, CONFIG.files) || val.url;
31
- fontFace = setCustomFontMedia(key, url, val.fontWeight, {
32
- fontStyle: val.fontStyle,
33
- fontDisplay: val.fontDisplay,
34
- fontStretch: val.fontStretch
35
- });
36
- }
37
- return { var: CSSvar, value: val, fontFace };
38
- };
39
- const getFontFamily = (key, factory) => {
40
- const CONFIG = getActiveConfig();
41
- const { fontFamily: FONT_FAMILY } = CONFIG;
42
- return getDefaultOrFirstKey(factory || FONT_FAMILY, key);
43
- };
44
- const setFontFamily = (val, key) => {
45
- const CONFIG = getActiveConfig();
46
- const { fontFamily: FONT_FAMILY, fontFamilyTypes: FONT_FAMILY_TYPES } = CONFIG;
47
- let { value, type } = val;
48
- if (val.isDefault) FONT_FAMILY.default = key;
49
- if (isObject(value)) value = arrayzeValue(value);
50
- const CSSvar = `--font-family-${key}`;
51
- const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES[type]}`;
52
- return { var: CSSvar, value: str, arr: value, type };
53
- };
54
- export {
55
- getFontFamily,
56
- setFont,
57
- setFontFamily
58
- };
@@ -1,10 +0,0 @@
1
- export * from "./color.js";
2
- export * from "./theme.js";
3
- export * from "./font.js";
4
- export * from "./typography.js";
5
- export * from "./spacing.js";
6
- export * from "./shadow.js";
7
- export * from "./timing.js";
8
- export * from "./document.js";
9
- export * from "./svg.js";
10
- export * from "./reset.js";