@maz-ui/themes 5.0.0-canary.ef64a02.0 → 5.0.0

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 (69) hide show
  1. package/README.md +62 -17
  2. package/dist/build/index.d.ts +10 -13
  3. package/dist/build/index.d.ts.map +1 -1
  4. package/dist/build/index.js +42 -1
  5. package/dist/composables/index.js +1 -1
  6. package/dist/composables/useTheme.d.ts +10 -2
  7. package/dist/composables/useTheme.d.ts.map +1 -1
  8. package/dist/composables/useTheme.js +95 -1
  9. package/dist/define-preset.js +8 -1
  10. package/dist/index.d.ts +0 -1
  11. package/dist/index.d.ts.map +1 -1
  12. package/dist/index.js +15 -1
  13. package/dist/plugin.js +12 -1
  14. package/dist/presets/_defaults.d.ts +33 -6
  15. package/dist/presets/_defaults.d.ts.map +1 -1
  16. package/dist/presets/_defaults.js +34 -1
  17. package/dist/presets/index.js +6 -1
  18. package/dist/presets/mazUi.d.ts.map +1 -1
  19. package/dist/presets/mazUi.js +90 -1
  20. package/dist/presets/nova.d.ts.map +1 -1
  21. package/dist/presets/nova.js +88 -1
  22. package/dist/presets/obsidian.d.ts.map +1 -1
  23. package/dist/presets/obsidian.js +90 -1
  24. package/dist/presets/ocean.d.ts.map +1 -1
  25. package/dist/presets/ocean.js +90 -1
  26. package/dist/presets/pristine.d.ts.map +1 -1
  27. package/dist/presets/pristine.js +94 -1
  28. package/dist/types/index.d.ts +62 -3
  29. package/dist/types/index.d.ts.map +1 -1
  30. package/dist/utils/color-conversions.d.ts +29 -0
  31. package/dist/utils/color-conversions.d.ts.map +1 -0
  32. package/dist/utils/color-conversions.js +162 -0
  33. package/dist/utils/color-parser.d.ts +3 -27
  34. package/dist/utils/color-parser.d.ts.map +1 -1
  35. package/dist/utils/color-parser.js +17 -1
  36. package/dist/utils/color-scheme-meta.d.ts +15 -0
  37. package/dist/utils/color-scheme-meta.d.ts.map +1 -0
  38. package/dist/utils/color-scheme-meta.js +12 -0
  39. package/dist/utils/cookie-storage.d.ts +17 -7
  40. package/dist/utils/cookie-storage.d.ts.map +1 -1
  41. package/dist/utils/cookie-storage.js +25 -1
  42. package/dist/utils/css-generator.d.ts +6 -4
  43. package/dist/utils/css-generator.d.ts.map +1 -1
  44. package/dist/utils/css-generator.js +75 -4
  45. package/dist/utils/get-color-mode.js +26 -1
  46. package/dist/utils/get-preset.js +30 -1
  47. package/dist/utils/index.d.ts +2 -1
  48. package/dist/utils/index.d.ts.map +1 -1
  49. package/dist/utils/index.js +13 -1
  50. package/dist/utils/inject-theme-css.d.ts.map +1 -1
  51. package/dist/utils/inject-theme-css.js +12 -1
  52. package/dist/utils/inject.js +7 -1
  53. package/dist/utils/no-transition.js +11 -5
  54. package/dist/utils/preset-merger.d.ts.map +1 -1
  55. package/dist/utils/preset-merger.js +72 -1
  56. package/dist/utils/setup-theme.d.ts +9 -0
  57. package/dist/utils/setup-theme.d.ts.map +1 -1
  58. package/dist/utils/setup-theme.js +133 -1
  59. package/dist/utils/update-document-class.d.ts +2 -2
  60. package/dist/utils/update-document-class.d.ts.map +1 -1
  61. package/dist/utils/update-document-class.js +13 -1
  62. package/dist/utils/use-mutation-observer.js +11 -1
  63. package/dist/utils/view-transition.d.ts +10 -0
  64. package/dist/utils/view-transition.d.ts.map +1 -0
  65. package/dist/utils/view-transition.js +11 -0
  66. package/package.json +28 -14
  67. package/dist/utils/color-utils.d.ts +0 -35
  68. package/dist/utils/color-utils.d.ts.map +0 -1
  69. package/dist/utils/color-utils.js +0 -1
@@ -0,0 +1,29 @@
1
+ export interface HSLChannels {
2
+ h: number;
3
+ s: number;
4
+ l: number;
5
+ }
6
+ export interface OklchChannels {
7
+ /** Lightness in [0, 1] */
8
+ l: number;
9
+ /** Chroma in [0, ~0.4] */
10
+ c: number;
11
+ /** Hue in degrees [0, 360) */
12
+ h: number;
13
+ }
14
+ export declare function parseColor(value: string): HSLChannels;
15
+ /**
16
+ * Parse any CSS color value and return its OKLCH channels.
17
+ *
18
+ * Accepts the same formats as `parseColor` plus native `oklch()` (parsed directly,
19
+ * no roundtrip through sRGB so wide-gamut chroma is preserved).
20
+ */
21
+ export declare function parseColorAsOklch(value: string): OklchChannels;
22
+ export declare function formatAsHSL(channels: HSLChannels): string;
23
+ export declare function formatAsOklch(channels: OklchChannels): string;
24
+ /**
25
+ * Convert any CSS color to a 6-digit `#rrggbb` hex string.
26
+ * Wide-gamut input is clipped to sRGB during conversion.
27
+ */
28
+ export declare function colorToHex(value: string): string;
29
+ //# sourceMappingURL=color-conversions.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-conversions.d.ts","sourceRoot":"","sources":["../../src/utils/color-conversions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,aAAa;IAC5B,0BAA0B;IAC1B,CAAC,EAAE,MAAM,CAAA;IACT,0BAA0B;IAC1B,CAAC,EAAE,MAAM,CAAA;IACT,8BAA8B;IAC9B,CAAC,EAAE,MAAM,CAAA;CACV;AAUD,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAqDrD;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAmB9D;AAoJD,wBAAgB,WAAW,CAAC,QAAQ,EAAE,WAAW,GAAG,MAAM,CAEzD;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,aAAa,GAAG,MAAM,CAM7D;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAQhD"}
@@ -0,0 +1,162 @@
1
+ //#region src/utils/color-conversions.ts
2
+ var HEX_PATTERN = /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
3
+ var LEGACY_PATTERN = /^(-?\d+\.\d+|-?\d+)\s+(\d+\.\d+|\d+)%\s+(\d+\.\d+|\d+)%$/;
4
+ var HSL_FN_PATTERN = /^hsla?\(\s*(-?\d+\.\d+|-?\d+)(?:\s*,\s*|\s+)(\d+\.\d+|\d+)%?(?:\s*,\s*|\s+)(\d+\.\d+|\d+)%?(?:\s*[,/][^)]*)?\)$/i;
5
+ var RGB_FN_PATTERN = /^rgba?\(\s*(\d+\.\d+|\d+)(?:\s*,\s*|\s+)(\d+\.\d+|\d+)(?:\s*,\s*|\s+)(\d+\.\d+|\d+)(?:\s*[,/][^)]*)?\)$/i;
6
+ var OKLCH_PATTERN = /^oklch\(\s*(\d+\.\d+|\d+)(%?)\s+(\d+\.\d+|\d+)\s+(-?\d+\.\d+|-?\d+)(?:\s*\/[^)]*)?\)$/i;
7
+ function parseColor(value) {
8
+ let trimmed = value.trim();
9
+ if (!trimmed) throw Error("Invalid color: empty string");
10
+ let hslMatch = trimmed.match(HSL_FN_PATTERN);
11
+ if (hslMatch) return {
12
+ h: Number.parseFloat(hslMatch[1]),
13
+ s: Number.parseFloat(hslMatch[2]),
14
+ l: Number.parseFloat(hslMatch[3])
15
+ };
16
+ let rgbMatch = trimmed.match(RGB_FN_PATTERN);
17
+ if (rgbMatch) return rgbToHsl(Number.parseFloat(rgbMatch[1]), Number.parseFloat(rgbMatch[2]), Number.parseFloat(rgbMatch[3]));
18
+ let hexMatch = trimmed.match(HEX_PATTERN);
19
+ if (hexMatch) {
20
+ let expanded = expandHex(hexMatch[1]);
21
+ return rgbToHsl(Number.parseInt(expanded.slice(0, 2), 16), Number.parseInt(expanded.slice(2, 4), 16), Number.parseInt(expanded.slice(4, 6), 16));
22
+ }
23
+ let oklchMatch = trimmed.match(OKLCH_PATTERN);
24
+ if (oklchMatch) {
25
+ let lRaw = Number.parseFloat(oklchMatch[1]);
26
+ let { r, g, b } = oklchToRgb(oklchMatch[2] === "%" ? lRaw / 100 : lRaw, Number.parseFloat(oklchMatch[3]), Number.parseFloat(oklchMatch[4]));
27
+ return rgbToHsl(r, g, b);
28
+ }
29
+ let legacyMatch = trimmed.match(LEGACY_PATTERN);
30
+ if (legacyMatch) return {
31
+ h: Number.parseFloat(legacyMatch[1]),
32
+ s: Number.parseFloat(legacyMatch[2]),
33
+ l: Number.parseFloat(legacyMatch[3])
34
+ };
35
+ throw Error(`Invalid color format: ${value}`);
36
+ }
37
+ function parseColorAsOklch(value) {
38
+ let trimmed = value.trim();
39
+ if (!trimmed) throw Error("Invalid color: empty string");
40
+ let oklchMatch = trimmed.match(OKLCH_PATTERN);
41
+ if (oklchMatch) {
42
+ let lRaw = Number.parseFloat(oklchMatch[1]);
43
+ return {
44
+ l: oklchMatch[2] === "%" ? lRaw / 100 : lRaw,
45
+ c: Number.parseFloat(oklchMatch[3]),
46
+ h: Number.parseFloat(oklchMatch[4])
47
+ };
48
+ }
49
+ let { h, s, l } = parseColor(trimmed);
50
+ let { r, g, b } = hslToRgb(h, s, l);
51
+ return rgbToOklch(r, g, b);
52
+ }
53
+ function expandHex(hex) {
54
+ return hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex.length === 4 ? hex.slice(0, 3).split("").map((c) => c + c).join("") : hex.length === 8 ? hex.slice(0, 6) : hex;
55
+ }
56
+ function rgbToHsl(r, g, b) {
57
+ let rNorm = r / 255;
58
+ let gNorm = g / 255;
59
+ let bNorm = b / 255;
60
+ let max = Math.max(rNorm, gNorm, bNorm);
61
+ let min = Math.min(rNorm, gNorm, bNorm);
62
+ let l = (max + min) / 2;
63
+ let h = 0;
64
+ let s = 0;
65
+ if (max !== min) {
66
+ let d = max - min;
67
+ s = l > .5 ? d / (2 - max - min) : d / (max + min), h = max === rNorm ? ((gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0)) / 6 : max === gNorm ? ((bNorm - rNorm) / d + 2) / 6 : ((rNorm - gNorm) / d + 4) / 6;
68
+ }
69
+ return {
70
+ h: h * 360,
71
+ s: s * 100,
72
+ l: l * 100
73
+ };
74
+ }
75
+ function hslToRgb(h, s, l) {
76
+ let sNorm = Math.max(0, Math.min(100, s)) / 100;
77
+ let lNorm = Math.max(0, Math.min(100, l)) / 100;
78
+ let hNorm = (h % 360 + 360) % 360;
79
+ let c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
80
+ let x = c * (1 - Math.abs(hNorm / 60 % 2 - 1));
81
+ let m = lNorm - c / 2;
82
+ let r1 = 0;
83
+ let g1 = 0;
84
+ let b1 = 0;
85
+ return hNorm < 60 ? (r1 = c, g1 = x) : hNorm < 120 ? (r1 = x, g1 = c) : hNorm < 180 ? (g1 = c, b1 = x) : hNorm < 240 ? (g1 = x, b1 = c) : hNorm < 300 ? (r1 = x, b1 = c) : (r1 = c, b1 = x), {
86
+ r: (r1 + m) * 255,
87
+ g: (g1 + m) * 255,
88
+ b: (b1 + m) * 255
89
+ };
90
+ }
91
+ function sRGBToLinear(v) {
92
+ return v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
93
+ }
94
+ function linearToSRGB(v) {
95
+ return v <= .0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - .055;
96
+ }
97
+ function rgbToOklch(r, g, b) {
98
+ let rLin = sRGBToLinear(Math.max(0, Math.min(255, r)) / 255);
99
+ let gLin = sRGBToLinear(Math.max(0, Math.min(255, g)) / 255);
100
+ let bLin = sRGBToLinear(Math.max(0, Math.min(255, b)) / 255);
101
+ let lLms = .4122214708 * rLin + .5363325363 * gLin + .0514459929 * bLin;
102
+ let mLms = .2119034982 * rLin + .6806995451 * gLin + .1073969566 * bLin;
103
+ let sLms = .0883024619 * rLin + .2817188376 * gLin + .6299787005 * bLin;
104
+ let lp = Math.cbrt(lLms);
105
+ let mp = Math.cbrt(mLms);
106
+ let sp = Math.cbrt(sLms);
107
+ let L = .2104542553 * lp + .793617785 * mp - .0040720468 * sp;
108
+ let aLab = 1.9779984951 * lp - 2.428592205 * mp + .4505937099 * sp;
109
+ let bLab = .0259040371 * lp + .7827717662 * mp - .808675766 * sp;
110
+ let C = Math.sqrt(aLab * aLab + bLab * bLab);
111
+ let H = Math.atan2(bLab, aLab) * 180 / Math.PI;
112
+ return H < 0 && (H += 360), {
113
+ l: L,
114
+ c: C,
115
+ h: H
116
+ };
117
+ }
118
+ function oklchToRgb(l, c, h) {
119
+ let hRad = h * Math.PI / 180;
120
+ let a = c * Math.cos(hRad);
121
+ let bLab = c * Math.sin(hRad);
122
+ let lp = l + .3963377774 * a + .2158037573 * bLab;
123
+ let mp = l - .1055613458 * a - .0638541728 * bLab;
124
+ let sp = l - .0894841775 * a - 1.291485548 * bLab;
125
+ let lc = lp ** 3;
126
+ let mc = mp ** 3;
127
+ let sc = sp ** 3;
128
+ let rLinear = 4.0767416621 * lc - 3.3077115913 * mc + .2309699292 * sc;
129
+ let gLinear = -1.2684380046 * lc + 2.6097574011 * mc - .3413193965 * sc;
130
+ let bLinear = -.0041960863 * lc - .7034186147 * mc + 1.707614701 * sc;
131
+ return {
132
+ r: Math.max(0, Math.min(1, linearToSRGB(rLinear))) * 255,
133
+ g: Math.max(0, Math.min(1, linearToSRGB(gLinear))) * 255,
134
+ b: Math.max(0, Math.min(1, linearToSRGB(bLinear))) * 255
135
+ };
136
+ }
137
+ function round1(n) {
138
+ return Math.round(n * 10) / 10;
139
+ }
140
+ function roundTo(n, places) {
141
+ let factor = 10 ** places;
142
+ return Math.round(n * factor) / factor;
143
+ }
144
+ function formatAsHSL(channels) {
145
+ return `hsl(${round1(channels.h)} ${round1(channels.s)}% ${round1(channels.l)}%)`;
146
+ }
147
+ function formatAsOklch(channels) {
148
+ let l = roundTo(channels.l, 4);
149
+ let c = roundTo(channels.c, 4);
150
+ return `oklch(${l} ${c} ${c === 0 ? 0 : roundTo(channels.h, 2)})`;
151
+ }
152
+ function colorToHex(value) {
153
+ let oklch = parseColorAsOklch(value);
154
+ let { r, g, b } = oklchToRgb(oklch.l, oklch.c, oklch.h);
155
+ let toHex = (n) => {
156
+ let v = Math.round(Math.max(0, Math.min(255, n))).toString(16);
157
+ return v.length === 1 ? `0${v}` : v;
158
+ };
159
+ return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
160
+ }
161
+ //#endregion
162
+ export { colorToHex, formatAsHSL, formatAsOklch, parseColor, parseColorAsOklch };
@@ -1,31 +1,7 @@
1
- export interface HSLChannels {
2
- h: number;
3
- s: number;
4
- l: number;
5
- }
6
- export interface OklchChannels {
7
- /** Lightness in [0, 1] */
8
- l: number;
9
- /** Chroma in [0, ~0.4] */
10
- c: number;
11
- /** Hue in degrees [0, 360) */
12
- h: number;
13
- }
14
- export declare function parseColor(value: string): HSLChannels;
15
- /**
16
- * Parse any CSS color value and return its OKLCH channels.
17
- *
18
- * Accepts the same formats as `parseColor` plus native `oklch()` (parsed directly,
19
- * no roundtrip through sRGB so wide-gamut chroma is preserved).
20
- */
21
- export declare function parseColorAsOklch(value: string): OklchChannels;
22
- export declare function formatAsHSL(channels: HSLChannels): string;
23
- export declare function formatAsOklch(channels: OklchChannels): string;
1
+ export declare function isCompleteCSSColor(value: string): boolean;
24
2
  /**
25
- * Convert any CSS color to a 6-digit `#rrggbb` hex string.
26
- * Wide-gamut input is clipped to sRGB during conversion.
3
+ * Normalize an authored color value. Already-complete CSS colors pass through
4
+ * unchanged; the legacy raw `"H S% L%"` form gets wrapped in `hsl(...)`.
27
5
  */
28
- export declare function colorToHex(value: string): string;
29
- export declare function isCompleteCSSColor(value: string): boolean;
30
6
  export declare function normalizeColor(value: string): string;
31
7
  //# sourceMappingURL=color-parser.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"color-parser.d.ts","sourceRoot":"","sources":["../../src/utils/color-parser.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,aAAa;IAC5B,0BAA0B;IAC1B,CAAC,EAAE,MAAM,CAAA;IACT,0BAA0B;IAC1B,CAAC,EAAE,MAAM,CAAA;IACT,8BAA8B;IAC9B,CAAC,EAAE,MAAM,CAAA;CACV;AAcD,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAqDrD;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAmB9D;AAoJD,wBAAgB,WAAW,CAAC,QAAQ,EAAE,WAAW,GAAG,MAAM,CAEzD;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,aAAa,GAAG,MAAM,CAM7D;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAQhD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAOzD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMpD"}
1
+ {"version":3,"file":"color-parser.d.ts","sourceRoot":"","sources":["../../src/utils/color-parser.ts"],"names":[],"mappings":"AAMA,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAOzD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CASpD"}
@@ -1 +1,17 @@
1
- var HEX_PATTERN=/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;var LEGACY_PATTERN=/^(-?\d+\.\d+|-?\d+)\s+(\d+\.\d+|\d+)%\s+(\d+\.\d+|\d+)%$/;var HSL_FN_PATTERN=/^hsla?\(\s*(-?\d+\.\d+|-?\d+)(?:\s*,\s*|\s+)(\d+\.\d+|\d+)%?(?:\s*,\s*|\s+)(\d+\.\d+|\d+)%?(?:\s*[,/][^)]*)?\)$/i;var RGB_FN_PATTERN=/^rgba?\(\s*(\d+\.\d+|\d+)(?:\s*,\s*|\s+)(\d+\.\d+|\d+)(?:\s*,\s*|\s+)(\d+\.\d+|\d+)(?:\s*[,/][^)]*)?\)$/i;var OKLCH_PATTERN=/^oklch\(\s*(\d+\.\d+|\d+)(%?)\s+(\d+\.\d+|\d+)\s+(-?\d+\.\d+|-?\d+)(?:\s*\/[^)]*)?\)$/i;var COMPLETE_COLOR_PATTERN=/^(?:hsla?|rgba?|oklch|oklab|lab|lch|color)\s*\(/i;var HEX_COLOR_PATTERN=/^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;var CSS_VAR_PATTERN=/^var\(\s*--[\w-]+/i;function parseColor(value){let trimmed=value.trim();if(!trimmed)throw Error(`Invalid color: empty string`);let hslMatch=trimmed.match(HSL_FN_PATTERN);if(hslMatch)return{h:Number.parseFloat(hslMatch[1]),s:Number.parseFloat(hslMatch[2]),l:Number.parseFloat(hslMatch[3])};let rgbMatch=trimmed.match(RGB_FN_PATTERN);if(rgbMatch)return rgbToHsl(Number.parseFloat(rgbMatch[1]),Number.parseFloat(rgbMatch[2]),Number.parseFloat(rgbMatch[3]));let hexMatch=trimmed.match(HEX_PATTERN);if(hexMatch){let expanded=expandHex(hexMatch[1]);return rgbToHsl(Number.parseInt(expanded.slice(0,2),16),Number.parseInt(expanded.slice(2,4),16),Number.parseInt(expanded.slice(4,6),16))}let oklchMatch=trimmed.match(OKLCH_PATTERN);if(oklchMatch){let lRaw=Number.parseFloat(oklchMatch[1]);let{r,g,b}=oklchToRgb(oklchMatch[2]===`%`?lRaw/100:lRaw,Number.parseFloat(oklchMatch[3]),Number.parseFloat(oklchMatch[4]));return rgbToHsl(r,g,b)}let legacyMatch=trimmed.match(LEGACY_PATTERN);if(legacyMatch)return{h:Number.parseFloat(legacyMatch[1]),s:Number.parseFloat(legacyMatch[2]),l:Number.parseFloat(legacyMatch[3])};throw Error(`Invalid color format: ${value}`)}function parseColorAsOklch(value){let trimmed=value.trim();if(!trimmed)throw Error(`Invalid color: empty string`);let oklchMatch=trimmed.match(OKLCH_PATTERN);if(oklchMatch){let lRaw=Number.parseFloat(oklchMatch[1]);return{l:oklchMatch[2]===`%`?lRaw/100:lRaw,c:Number.parseFloat(oklchMatch[3]),h:Number.parseFloat(oklchMatch[4])}}let{h,s,l}=parseColor(trimmed);let{r,g,b}=hslToRgb(h,s,l);return rgbToOklch(r,g,b)}function expandHex(hex){return hex.length===3?hex.split(``).map(c=>c+c).join(``):hex.length===4?hex.slice(0,3).split(``).map(c=>c+c).join(``):hex.length===8?hex.slice(0,6):hex}function rgbToHsl(r,g,b){let rNorm=r/255;let gNorm=g/255;let bNorm=b/255;let max=Math.max(rNorm,gNorm,bNorm);let min=Math.min(rNorm,gNorm,bNorm);let l=(max+min)/2;let h=0;let s=0;if(max!==min){let d=max-min;s=l>.5?d/(2-max-min):d/(max+min),h=max===rNorm?((gNorm-bNorm)/d+(gNorm<bNorm?6:0))/6:max===gNorm?((bNorm-rNorm)/d+2)/6:((rNorm-gNorm)/d+4)/6}return{h:h*360,s:s*100,l:l*100}}function hslToRgb(h,s,l){let sNorm=Math.max(0,Math.min(100,s))/100;let lNorm=Math.max(0,Math.min(100,l))/100;let hNorm=(h%360+360)%360;let c=(1-Math.abs(2*lNorm-1))*sNorm;let x=c*(1-Math.abs(hNorm/60%2-1));let m=lNorm-c/2;let r1=0;let g1=0;let b1=0;return hNorm<60?(r1=c,g1=x):hNorm<120?(r1=x,g1=c):hNorm<180?(g1=c,b1=x):hNorm<240?(g1=x,b1=c):hNorm<300?(r1=x,b1=c):(r1=c,b1=x),{r:(r1+m)*255,g:(g1+m)*255,b:(b1+m)*255}}function sRGBToLinear(v){return v<=.04045?v/12.92:((v+.055)/1.055)**2.4}function linearToSRGB(v){return v<=.0031308?12.92*v:1.055*v**(1/2.4)-.055}function rgbToOklch(r,g,b){let rLin=sRGBToLinear(Math.max(0,Math.min(255,r))/255);let gLin=sRGBToLinear(Math.max(0,Math.min(255,g))/255);let bLin=sRGBToLinear(Math.max(0,Math.min(255,b))/255);let lLms=.4122214708*rLin+.5363325363*gLin+.0514459929*bLin;let mLms=.2119034982*rLin+.6806995451*gLin+.1073969566*bLin;let sLms=.0883024619*rLin+.2817188376*gLin+.6299787005*bLin;let lp=Math.cbrt(lLms);let mp=Math.cbrt(mLms);let sp=Math.cbrt(sLms);let L=.2104542553*lp+.793617785*mp-.0040720468*sp;let aLab=1.9779984951*lp-2.428592205*mp+.4505937099*sp;let bLab=.0259040371*lp+.7827717662*mp-.808675766*sp;let C=Math.sqrt(aLab*aLab+bLab*bLab);let H=Math.atan2(bLab,aLab)*180/Math.PI;return H<0&&(H+=360),{l:L,c:C,h:H}}function oklchToRgb(l,c,h){let hRad=h*Math.PI/180;let a=c*Math.cos(hRad);let bLab=c*Math.sin(hRad);let lp=l+.3963377774*a+.2158037573*bLab;let mp=l-.1055613458*a-.0638541728*bLab;let sp=l-.0894841775*a-1.291485548*bLab;let lc=lp**3;let mc=mp**3;let sc=sp**3;let rLinear=4.0767416621*lc-3.3077115913*mc+.2309699292*sc;let gLinear=-1.2684380046*lc+2.6097574011*mc-.3413193965*sc;let bLinear=-.0041960863*lc-.7034186147*mc+1.707614701*sc;return{r:Math.max(0,Math.min(1,linearToSRGB(rLinear)))*255,g:Math.max(0,Math.min(1,linearToSRGB(gLinear)))*255,b:Math.max(0,Math.min(1,linearToSRGB(bLinear)))*255}}function round1(n){return Math.round(n*10)/10}function roundTo(n,places){let factor=10**places;return Math.round(n*factor)/factor}function formatAsHSL(channels){return`hsl(${round1(channels.h)} ${round1(channels.s)}% ${round1(channels.l)}%)`}function formatAsOklch(channels){let l=roundTo(channels.l,4);let c=roundTo(channels.c,4);return`oklch(${l} ${c} ${c===0?0:roundTo(channels.h,2)})`}function colorToHex(value){let oklch=parseColorAsOklch(value);let{r,g,b}=oklchToRgb(oklch.l,oklch.c,oklch.h);let toHex=n=>{let v=Math.round(Math.max(0,Math.min(255,n))).toString(16);return v.length===1?`0${v}`:v};return`#${toHex(r)}${toHex(g)}${toHex(b)}`}function isCompleteCSSColor(value){let trimmed=value.trim();return COMPLETE_COLOR_PATTERN.test(trimmed)||HEX_COLOR_PATTERN.test(trimmed)||CSS_VAR_PATTERN.test(trimmed)}function normalizeColor(value){return isCompleteCSSColor(value)?value:formatAsHSL(parseColor(value))}export{colorToHex,formatAsHSL,formatAsOklch,isCompleteCSSColor,normalizeColor,parseColor,parseColorAsOklch};
1
+ //#region src/utils/color-parser.ts
2
+ var COMPLETE_COLOR_PATTERN = /^(?:hsla?|rgba?|oklch|oklab|lab|lch|color)\s*\(/i;
3
+ var HEX_COLOR_PATTERN = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
4
+ var CSS_VAR_PATTERN = /^var\(\s*--[\w-]+/i;
5
+ var LEGACY_PATTERN = /^(-?\d+\.\d+|-?\d+)\s+(\d+\.\d+|\d+)%\s+(\d+\.\d+|\d+)%$/;
6
+ function isCompleteCSSColor(value) {
7
+ let trimmed = value.trim();
8
+ return COMPLETE_COLOR_PATTERN.test(trimmed) || HEX_COLOR_PATTERN.test(trimmed) || CSS_VAR_PATTERN.test(trimmed);
9
+ }
10
+ function normalizeColor(value) {
11
+ if (isCompleteCSSColor(value)) return value;
12
+ let legacy = value.trim().match(LEGACY_PATTERN);
13
+ if (legacy) return `hsl(${legacy[1]} ${legacy[2]}% ${legacy[3]}%)`;
14
+ throw Error(`Invalid color format: ${value}`);
15
+ }
16
+ //#endregion
17
+ export { isCompleteCSSColor, normalizeColor };
@@ -0,0 +1,15 @@
1
+ import { ColorMode, ThemeMode } from '../types';
2
+ /**
3
+ * Resolve `<meta name="color-scheme" content>` so the browser applies the
4
+ * correct canvas before CSS loads (FART prevention).
5
+ *
6
+ * - mode='light' | 'dark' → that mode
7
+ * - mode='both' → matches colorMode ('auto' falls back to 'light dark')
8
+ */
9
+ export declare function resolveColorSchemeContent(mode: ThemeMode, colorMode: ColorMode): string;
10
+ /**
11
+ * Inject (or update) `<meta name="color-scheme" content="...">` in the head.
12
+ * Safe to call multiple times — updates the existing tag when present.
13
+ */
14
+ export declare function injectColorSchemeMeta(content: string): void;
15
+ //# sourceMappingURL=color-scheme-meta.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-scheme-meta.d.ts","sourceRoot":"","sources":["../../src/utils/color-scheme-meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAGpD;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,GAAG,MAAM,CAIvF;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAU3D"}
@@ -0,0 +1,12 @@
1
+ import { isServer } from "@maz-ui/utils/helpers/isServer";
2
+ //#region src/utils/color-scheme-meta.ts
3
+ function resolveColorSchemeContent(mode, colorMode) {
4
+ return mode === "both" ? colorMode === "auto" ? "light dark" : colorMode : mode;
5
+ }
6
+ function injectColorSchemeMeta(content) {
7
+ if (isServer()) return;
8
+ let meta = document.head.querySelector("meta[name=\"color-scheme\"]");
9
+ meta || (meta = document.createElement("meta"), meta.setAttribute("name", "color-scheme"), document.head.appendChild(meta)), meta.setAttribute("content", content);
10
+ }
11
+ //#endregion
12
+ export { injectColorSchemeMeta, resolveColorSchemeContent };
@@ -1,9 +1,19 @@
1
- export declare function getCookie(key: string): string | null;
2
- export declare function setCookie(key: string, value: string): void;
3
- /** Persisted preset name from `maz-preset` cookie, or `null`. */
4
- export declare function getSavedPresetName(): string | null;
5
- /** Write `name` to the `maz-preset` cookie, no-op if value already matches. */
6
- export declare function saveResolvedPresetName(name: string): void;
7
- /** Drop the `maz-preset` cookie (saved name no longer resolves). */
1
+ export interface SavedPreset {
2
+ /** Identity of the preset declared in the app config (the "base"). */
3
+ base: string;
4
+ /** Currently active preset name (equals `base` unless switched at runtime). */
5
+ active: string;
6
+ }
7
+ /**
8
+ * Parse the `maz-preset` cookie. Format is `"<base>:<active>"` where `base` is
9
+ * the configured preset identity, so a cookie written by another app or a
10
+ * previous config on the same host is detectable as foreign. A legacy
11
+ * plain-name value (no `:`) is treated as unscoped and returns `null` so it
12
+ * cannot hijack the configured preset.
13
+ */
14
+ export declare function getSavedPreset(): SavedPreset | null;
15
+ /** Serialize `base`/`active` into the `maz-preset` cookie, no-op if unchanged. */
16
+ export declare function savePreset(base: string, active: string): void;
17
+ /** Drop the `maz-preset` cookie (saved preset no longer resolves). */
8
18
  export declare function clearSavedPresetName(): void;
9
19
  //# sourceMappingURL=cookie-storage.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"cookie-storage.d.ts","sourceRoot":"","sources":["../../src/utils/cookie-storage.ts"],"names":[],"mappings":"AAIA,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAQpD;AAED,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAK1D;AAED,iEAAiE;AACjE,wBAAgB,kBAAkB,IAAI,MAAM,GAAG,IAAI,CAElD;AAED,+EAA+E;AAC/E,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAIzD;AAED,oEAAoE;AACpE,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C"}
1
+ {"version":3,"file":"cookie-storage.d.ts","sourceRoot":"","sources":["../../src/utils/cookie-storage.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAA;IACZ,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,IAAI,WAAW,GAAG,IAAI,CAenD;AAED,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAS7D;AAED,sEAAsE;AACtE,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}
@@ -1 +1,25 @@
1
- import{isServer}from"@maz-ui/utils/helpers/isServer";var PRESET_COOKIE=`maz-preset`;function getCookie(key){if(isServer())return null;let cookie=document.cookie.split(`;`).find(c=>c.trim().startsWith(`${key}=`));return cookie?decodeURIComponent(cookie.split(`=`)[1]):null}function setCookie(key,value){isServer()||(document.cookie=`${key}=${encodeURIComponent(value)}; path=/; max-age=${3600*24*365}; SameSite=Lax`)}function getSavedPresetName(){return getCookie(PRESET_COOKIE)}function saveResolvedPresetName(name){!name||getCookie(PRESET_COOKIE)===name||setCookie(PRESET_COOKIE,name)}function clearSavedPresetName(){isServer()||(document.cookie=`${PRESET_COOKIE}=; path=/; max-age=0; SameSite=Lax`)}export{clearSavedPresetName,getCookie,getSavedPresetName,saveResolvedPresetName,setCookie};
1
+ import { deleteCookie, getCookie, setCookie } from "@maz-ui/utils/helpers/cookie";
2
+ //#region src/utils/cookie-storage.ts
3
+ var PRESET_COOKIE = "maz-preset";
4
+ function getSavedPreset() {
5
+ let raw = getCookie(PRESET_COOKIE);
6
+ if (!raw) return null;
7
+ let separatorIndex = raw.indexOf(":");
8
+ if (separatorIndex === -1) return null;
9
+ let base = raw.slice(0, separatorIndex);
10
+ let active = raw.slice(separatorIndex + 1);
11
+ return !base || !active ? null : {
12
+ base,
13
+ active
14
+ };
15
+ }
16
+ function savePreset(base, active) {
17
+ if (!base || !active) return;
18
+ let value = `${base}:${active}`;
19
+ getCookie(PRESET_COOKIE) !== value && setCookie(PRESET_COOKIE, value);
20
+ }
21
+ function clearSavedPresetName() {
22
+ deleteCookie(PRESET_COOKIE);
23
+ }
24
+ //#endregion
25
+ export { clearSavedPresetName, getSavedPreset, savePreset };
@@ -1,15 +1,17 @@
1
- import { DarkModeStrategy, ThemeMode, ThemePreset } from '../types';
1
+ import { ThemeMode, ThemePreset } from '../types';
2
2
  export interface CSSOptions {
3
3
  /** Theme mode to generate */
4
4
  mode: ThemeMode;
5
- /** Dark mode selector: 'class' (.dark) | 'media' (@media) */
6
- darkSelectorStrategy: DarkModeStrategy;
5
+ /** Dark mode selector: 'class' (.dark/.light) | 'media' (system pref only) */
6
+ darkSelectorStrategy: 'class' | 'media';
7
7
  /** CSS variables prefix */
8
8
  prefix?: string;
9
9
  /** Dark class name */
10
10
  darkClass: string;
11
+ /** Light class name (default 'light') */
12
+ lightClass?: string;
11
13
  }
12
- export declare function generateCSS(preset: ThemePreset, options?: CSSOptions): string;
14
+ export declare function generateCSS(preset: ThemePreset, options: CSSOptions): string;
13
15
  export declare const CSS_ID = "maz-theme-css";
14
16
  export declare function injectCSS(id: string | undefined, css: string): void;
15
17
  export declare function removeCSS(id?: string): void;
@@ -1 +1 @@
1
- {"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/utils/css-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAgC,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAKtG,MAAM,WAAW,UAAU;IACzB,6BAA6B;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,6DAA6D;IAC7D,oBAAoB,EAAE,gBAAgB,CAAA;IACtC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sBAAsB;IACtB,SAAS,EAAE,MAAM,CAAA;CAClB;AAID,wBAAgB,WAAW,CACzB,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,UAIR,GACA,MAAM,CAwCR;AAuHD,eAAO,MAAM,MAAM,kBAAkB,CAAA;AAErC,wBAAgB,SAAS,CAAC,EAAE,oBAAS,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CA2BxD;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAK3C"}
1
+ {"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/utils/css-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiD,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAKrG,MAAM,WAAW,UAAU;IACzB,6BAA6B;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,8EAA8E;IAC9E,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAA;IACvC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sBAAsB;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAID,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,CA6B5E;AA+FD,eAAO,MAAM,MAAM,kBAAkB,CAAA;AAErC,wBAAgB,SAAS,CAAC,EAAE,oBAAS,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAiBxD;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAI3C"}
@@ -1,4 +1,75 @@
1
- import{normalizeColor}from"./color-parser.js";import{generateColorScale}from"./color-utils.js";import{isServer}from"@maz-ui/utils/helpers/isServer";var scaleColors=[`primary`,`secondary`,`accent`,`destructive`,`success`,`warning`,`info`,`contrast`,`surface`,`foreground`,`divider`,`muted`,`overlay`,`shadow`];function generateCSS(preset,options={mode:`both`,darkSelectorStrategy:`class`,darkClass:`dark`}){let{mode,darkSelectorStrategy,prefix=`maz`,darkClass=`dark`}=options;let css=`@layer theme {
2
- `;let rootSelector=`:root`;let darkClassSelector=`.${darkClass}`;return(mode===`light`||mode===`both`)&&(css+=generateVariablesBlock({selector:rootSelector,colors:preset.colors.light,foundation:preset.foundation,prefix,preset,mode:`light`})),(mode===`dark`||mode===`both`)&&(css+=generateVariablesBlock({selector:darkSelectorStrategy===`media`?rootSelector:darkClassSelector,mediaQuery:darkSelectorStrategy===`media`?`@media (prefers-color-scheme: dark)`:void 0,colors:preset.colors.dark,foundation:mode===`dark`?preset.foundation:void 0,prefix,preset,isDark:!0,mode:`dark`})),css+=`}
3
- `,css}function generateVariablesBlock({selector,mediaQuery,colors,foundation,prefix,preset,isDark=!1,mode=`light`}){let variables=[];colors&&Object.entries(colors).forEach(([key,value])=>{value&&variables.push(` --${prefix}-${key}: ${normalizeColor(value)};`)}),foundation&&Object.entries(foundation).forEach(([key,value])=>{value&&variables.push(` --${prefix}-${key}: ${value};`)}),!isDark&&preset?.scales&&variables.push(...generateScaleVariables(preset.scales,prefix)),preset?.components&&variables.push(...generateComponentVariables(preset.components,mode,prefix)),preset&&variables.push(...generateAllColorScales(isDark?preset.colors.dark:preset.colors.light,prefix));let content=variables.join(`
4
- `);return mediaQuery?`\n ${mediaQuery} {\n ${selector} {\n${content.replace(/^/gm,` `)}\n }\n }\n`:`\n ${selector} {\n${content}\n }\n`}function generateScaleVariables(scales,prefix){let lines=[];return Object.entries(scales.rounded??{}).forEach(([key,value])=>{value&&lines.push(` --${prefix}-rounded-${key}: ${value};`)}),Object.entries(scales.shadow??{}).forEach(([key,value])=>{value&&lines.push(` --${prefix}-shadow-style-${key}: ${value};`)}),lines}function generateComponentVariables(components,mode,prefix){let lines=[];components.btn?.[`font-weight`]&&lines.push(` --${prefix}-btn-font-weight: ${components.btn[`font-weight`]};`);let containerBg=components.container?.bg?.[mode];containerBg&&lines.push(` --${prefix}-container-bg: ${normalizeColor(containerBg)};`);let inputBg=components.input?.bg?.[mode];return inputBg&&lines.push(` --${prefix}-input-bg: ${normalizeColor(inputBg)};`),lines}function generateAllColorScales(colors,prefix){let colorScales=[];return scaleColors.forEach(colorName=>{let baseColor=colors[colorName];if(baseColor){let scale=generateColorScale(baseColor);Object.entries(scale).forEach(([scaleKey,scaleValue])=>{colorScales.push(` --${prefix}-${colorName}-${scaleKey}: ${scaleValue};`)})}}),colorScales}var CSS_ID=`maz-theme-css`;function injectCSS(id=CSS_ID,css){if(isServer())return;let styleElements=[...document.querySelectorAll(`#${id}`)];if(styleElements.length===0){let element=document.createElement(`style`);element.id=id,element.textContent=css,document.head.appendChild(element);return}if(styleElements.length===1){styleElements[0].textContent=css;return}let lastElement=styleElements.at(-1);for(let i=0;i<styleElements.length-1;i++)styleElements[i].remove();lastElement&&(lastElement.textContent=css)}function removeCSS(id=CSS_ID){isServer()||document.querySelectorAll(`#${id}`).forEach(el=>el.remove())}export{CSS_ID,generateCSS,injectCSS,removeCSS};
1
+ import { normalizeColor } from "./color-parser.js";
2
+ import { DEFAULT_ROUNDED_RATIOS } from "../presets/_defaults.js";
3
+ import { isServer } from "@maz-ui/utils/helpers/isServer";
4
+ //#region src/utils/css-generator.ts
5
+ var ROUNDED_KEYS = [
6
+ "xs",
7
+ "sm",
8
+ "md",
9
+ "lg",
10
+ "xl",
11
+ "2xl",
12
+ "3xl"
13
+ ];
14
+ function generateCSS(preset, options) {
15
+ let prefix = options.prefix ?? "maz";
16
+ let lightClass = options.lightClass ?? "light";
17
+ let { mode } = options;
18
+ let lines = ["@layer theme {", " :root {"];
19
+ let colorScheme = mode === "both" ? options.darkSelectorStrategy === "class" ? "light" : "light dark" : `only ${mode}`;
20
+ return lines.push(` color-scheme: ${colorScheme};`), appendFoundation(lines, preset.foundation, prefix), appendScales(lines, preset.scales, prefix), appendComponents(lines, preset, prefix, mode), appendColorVariables(lines, preset.colors, mode, prefix), lines.push(" }"), options.darkSelectorStrategy === "class" && mode === "both" && (lines.push(` .${options.darkClass} { color-scheme: only dark; }`), lines.push(` .${lightClass} { color-scheme: only light; }`)), lines.push("}"), lines.join("\n");
21
+ }
22
+ function appendColorVariables(lines, colors, mode, prefix) {
23
+ for (let [key, lightValue] of Object.entries(colors.light)) if (lightValue) {
24
+ if (mode === "both") {
25
+ let dark = colors.dark[key] ?? lightValue;
26
+ lines.push(` --${prefix}-${key}: light-dark(${normalizeColor(lightValue)}, ${normalizeColor(dark)});`);
27
+ } else lines.push(` --${prefix}-${key}: ${normalizeColor(mode === "dark" ? colors.dark[key] ?? lightValue : lightValue)};`);
28
+ }
29
+ }
30
+ function appendFoundation(lines, foundation, prefix) {
31
+ if (foundation) for (let [key, value] of Object.entries(foundation)) value && lines.push(` --${prefix}-${key}: ${value};`);
32
+ }
33
+ function appendScales(lines, scales, prefix) {
34
+ if (scales) {
35
+ for (let key of ROUNDED_KEYS) {
36
+ let value = scales.rounded?.[key];
37
+ value ? lines.push(` --${prefix}-rounded-${key}: ${value};`) : key !== "md" && lines.push(` --${prefix}-rounded-${key}: calc(var(--${prefix}-rounded-md) * ${DEFAULT_ROUNDED_RATIOS[key]});`);
38
+ }
39
+ for (let [key, value] of Object.entries(scales.shadow ?? {})) value && lines.push(` --${prefix}-shadow-style-${key}: ${value};`);
40
+ }
41
+ }
42
+ function appendComponents(lines, preset, prefix, mode) {
43
+ let components = preset.components;
44
+ if (!components) return;
45
+ components.btn?.["font-weight"] && lines.push(` --${prefix}-btn-font-weight: ${components.btn["font-weight"]};`), components.dialog?.["max-width"] && lines.push(` --${prefix}-dialog-max-width: ${components.dialog["max-width"]};`), components.dialog?.["min-width"] && lines.push(` --${prefix}-dialog-min-width: ${components.dialog["min-width"]};`);
46
+ let emitBg = (componentKey, cssKey) => {
47
+ let bg = components[componentKey]?.bg;
48
+ if (bg) {
49
+ if (mode === "both") {
50
+ let fallback = bg.light ?? bg.dark;
51
+ if (!fallback) return;
52
+ let light = normalizeColor(bg.light ?? fallback);
53
+ let dark = normalizeColor(bg.dark ?? fallback);
54
+ let value = light === dark ? light : `light-dark(${light}, ${dark})`;
55
+ lines.push(` --${prefix}-${cssKey}: ${value};`);
56
+ } else bg[mode] && lines.push(` --${prefix}-${cssKey}: ${normalizeColor(bg[mode])};`);
57
+ }
58
+ };
59
+ emitBg("container", "container-bg"), emitBg("input", "input-bg");
60
+ let inputTopLabelFw = components.input?.["top-label-font-weight"];
61
+ inputTopLabelFw && lines.push(` --${prefix}-input-top-label-font-weight: ${inputTopLabelFw};`);
62
+ }
63
+ var CSS_ID = "maz-theme-css";
64
+ function injectCSS(id = CSS_ID, css) {
65
+ if (isServer()) return;
66
+ let styleElements = document.querySelectorAll(`#${id}`);
67
+ let target = styleElements[styleElements.length - 1];
68
+ for (let i = 0; i < styleElements.length - 1; i++) styleElements[i].remove();
69
+ target || (target = document.createElement("style"), target.id = id, document.head.appendChild(target)), target.textContent = css;
70
+ }
71
+ function removeCSS(id = CSS_ID) {
72
+ isServer() || document.querySelectorAll(`#${id}`).forEach((el) => el.remove());
73
+ }
74
+ //#endregion
75
+ export { CSS_ID, generateCSS, injectCSS, removeCSS };
@@ -1 +1,26 @@
1
- import{getCookie,setCookie}from"./cookie-storage.js";import{isServer}from"@maz-ui/utils/helpers/isServer";function getSavedColorMode(){let savedMode=getCookie(`maz-color-mode`);if(savedMode&&[`light`,`dark`,`auto`].includes(savedMode))return savedMode}function getColorMode(colorMode){return colorMode&&[`light`,`dark`].includes(colorMode)?colorMode:getSavedColorMode()||`auto`}function getSystemColorMode(){return isServer()||typeof globalThis.matchMedia!=`function`?`light`:globalThis.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`}function saveResolvedColorMode(resolvedMode){setCookie(`maz-resolved-color-mode`,resolvedMode)}function getSavedResolvedColorMode(){let saved=getCookie(`maz-resolved-color-mode`);if(saved&&[`light`,`dark`].includes(saved))return saved}export{getColorMode,getSavedColorMode,getSavedResolvedColorMode,getSystemColorMode,saveResolvedColorMode};
1
+ import { isServer } from "@maz-ui/utils/helpers/isServer";
2
+ import { getCookie, setCookie } from "@maz-ui/utils/helpers/cookie";
3
+ //#region src/utils/get-color-mode.ts
4
+ function getSavedColorMode() {
5
+ let savedMode = getCookie("maz-color-mode");
6
+ if (savedMode && [
7
+ "light",
8
+ "dark",
9
+ "auto"
10
+ ].includes(savedMode)) return savedMode;
11
+ }
12
+ function getColorMode(colorMode) {
13
+ return colorMode && ["light", "dark"].includes(colorMode) ? colorMode : getSavedColorMode() || "auto";
14
+ }
15
+ function getSystemColorMode() {
16
+ return isServer() || typeof globalThis.matchMedia != "function" ? "light" : globalThis.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
17
+ }
18
+ function saveResolvedColorMode(resolvedMode) {
19
+ setCookie("maz-resolved-color-mode", resolvedMode);
20
+ }
21
+ function getSavedResolvedColorMode() {
22
+ let saved = getCookie("maz-resolved-color-mode");
23
+ if (saved && ["light", "dark"].includes(saved)) return saved;
24
+ }
25
+ //#endregion
26
+ export { getColorMode, getSavedColorMode, getSavedResolvedColorMode, getSystemColorMode, saveResolvedColorMode };
@@ -1 +1,30 @@
1
- function isPresetObject(preset){return typeof preset==`object`&&!!preset&&!!preset.name}async function getPreset(preset){if(isPresetObject(preset))return preset;if(preset===`mazUi`||!preset||preset===`maz-ui`){let{mazUi}=await import(`../presets/mazUi.js`);return mazUi}if(preset===`ocean`){let{ocean}=await import(`../presets/ocean.js`);return ocean}if(preset===`pristine`){let{pristine}=await import(`../presets/pristine.js`);return pristine}if(preset===`obsidian`){let{obsidian}=await import(`../presets/obsidian.js`);return obsidian}if(preset===`nova`){let{nova}=await import(`../presets/nova.js`);return nova}throw TypeError(`[@maz-ui/themes] Preset ${preset} not found`)}export{getPreset,isPresetObject};
1
+ //#region src/utils/get-preset.ts
2
+ function isPresetObject(preset) {
3
+ return typeof preset == "object" && !!preset && !!preset.name;
4
+ }
5
+ async function getPreset(preset) {
6
+ if (isPresetObject(preset)) return preset;
7
+ if (preset === "mazUi" || !preset || preset === "maz-ui") {
8
+ let { mazUi } = await import("../presets/mazUi.js");
9
+ return mazUi;
10
+ }
11
+ if (preset === "ocean") {
12
+ let { ocean } = await import("../presets/ocean.js");
13
+ return ocean;
14
+ }
15
+ if (preset === "pristine") {
16
+ let { pristine } = await import("../presets/pristine.js");
17
+ return pristine;
18
+ }
19
+ if (preset === "obsidian") {
20
+ let { obsidian } = await import("../presets/obsidian.js");
21
+ return obsidian;
22
+ }
23
+ if (preset === "nova") {
24
+ let { nova } = await import("../presets/nova.js");
25
+ return nova;
26
+ }
27
+ throw TypeError(`[@maz-ui/themes] Preset ${preset} not found`);
28
+ }
29
+ //#endregion
30
+ export { getPreset, isPresetObject };
@@ -1,5 +1,6 @@
1
+ export * from './color-conversions';
1
2
  export * from './color-parser';
2
- export * from './color-utils';
3
+ export * from './color-scheme-meta';
3
4
  export * from './cookie-storage';
4
5
  export * from './css-generator';
5
6
  export * from './get-preset';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
@@ -1 +1,13 @@
1
- import{colorToHex,formatAsHSL,formatAsOklch,isCompleteCSSColor,normalizeColor,parseColor,parseColorAsOklch}from"./color-parser.js";import{adjustColorLightness,generateColorScale,getContrastColor,parseHSL}from"./color-utils.js";import{clearSavedPresetName,getCookie,getSavedPresetName,saveResolvedPresetName,setCookie}from"./cookie-storage.js";import{CSS_ID,generateCSS,injectCSS,removeCSS}from"./css-generator.js";import{getPreset,isPresetObject}from"./get-preset.js";import{injectThemeState}from"./inject.js";import{injectThemeCSS}from"./inject-theme-css.js";import{noTransition}from"./no-transition.js";import{deepMerge,mergePresets}from"./preset-merger.js";import{updateDocumentClass}from"./update-document-class.js";import{defaultOptions,setupTheme}from"./setup-theme.js";export{CSS_ID,adjustColorLightness,clearSavedPresetName,colorToHex,deepMerge,defaultOptions,formatAsHSL,formatAsOklch,generateCSS,generateColorScale,getContrastColor,getCookie,getPreset,getSavedPresetName,injectCSS,injectThemeCSS,injectThemeState,isCompleteCSSColor,isPresetObject,mergePresets,noTransition,normalizeColor,parseColor,parseColorAsOklch,parseHSL,removeCSS,saveResolvedPresetName,setCookie,setupTheme,updateDocumentClass};
1
+ import { colorToHex, formatAsHSL, formatAsOklch, parseColor, parseColorAsOklch } from "./color-conversions.js";
2
+ import { isCompleteCSSColor, normalizeColor } from "./color-parser.js";
3
+ import { injectColorSchemeMeta, resolveColorSchemeContent } from "./color-scheme-meta.js";
4
+ import { clearSavedPresetName, getSavedPreset, savePreset } from "./cookie-storage.js";
5
+ import { CSS_ID, generateCSS, injectCSS, removeCSS } from "./css-generator.js";
6
+ import { getPreset, isPresetObject } from "./get-preset.js";
7
+ import { injectThemeState } from "./inject.js";
8
+ import { injectThemeCSS } from "./inject-theme-css.js";
9
+ import { noTransition } from "./no-transition.js";
10
+ import { deepMerge, mergePresets } from "./preset-merger.js";
11
+ import { updateDocumentClass } from "./update-document-class.js";
12
+ import { defaultOptions, setupTheme } from "./setup-theme.js";
13
+ export { CSS_ID, clearSavedPresetName, colorToHex, deepMerge, defaultOptions, formatAsHSL, formatAsOklch, generateCSS, getPreset, getSavedPreset, injectCSS, injectColorSchemeMeta, injectThemeCSS, injectThemeState, isCompleteCSSColor, isPresetObject, mergePresets, noTransition, normalizeColor, parseColor, parseColorAsOklch, removeCSS, resolveColorSchemeContent, savePreset, setupTheme, updateDocumentClass };
@@ -1 +1 @@
1
- {"version":3,"file":"inject-theme-css.d.ts","sourceRoot":"","sources":["../../src/utils/inject-theme-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG3C,wBAAgB,cAAc,CAC5B,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,QAUxF"}
1
+ {"version":3,"file":"inject-theme-css.d.ts","sourceRoot":"","sources":["../../src/utils/inject-theme-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG3C,wBAAgB,cAAc,CAC5B,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,QAWxF"}
@@ -1 +1,12 @@
1
- import{CSS_ID,generateCSS,injectCSS}from"./css-generator.js";function injectThemeCSS(finalPreset,config){typeof document>`u`||config.strategy===`buildtime`||injectCSS(CSS_ID,generateCSS(finalPreset,{mode:config.mode,darkSelectorStrategy:config.darkModeStrategy,darkClass:config.darkClass}))}export{injectThemeCSS};
1
+ import { CSS_ID, generateCSS, injectCSS } from "./css-generator.js";
2
+ //#region src/utils/inject-theme-css.ts
3
+ function injectThemeCSS(finalPreset, config) {
4
+ typeof document < "u" && config.strategy !== "buildtime" && injectCSS(CSS_ID, generateCSS(finalPreset, {
5
+ mode: config.mode,
6
+ darkSelectorStrategy: config.darkModeStrategy,
7
+ darkClass: config.darkClass,
8
+ lightClass: config.lightClass
9
+ }));
10
+ }
11
+ //#endregion
12
+ export { injectThemeCSS };
@@ -1 +1,7 @@
1
- function injectThemeState({app,themeState}){if(!app)throw Error(`[@maz-ui/themes](injectThemeState) No app provided`);app.provide(`mazThemeState`,themeState),app.config.globalProperties.$mazThemeState=themeState}export{injectThemeState};
1
+ //#region src/utils/inject.ts
2
+ function injectThemeState({ app, themeState }) {
3
+ if (!app) throw Error("[@maz-ui/themes](injectThemeState) No app provided");
4
+ app.provide("mazThemeState", themeState), app.config.globalProperties.$mazThemeState = themeState;
5
+ }
6
+ //#endregion
7
+ export { injectThemeState };
@@ -1,5 +1,11 @@
1
- import{isServer}from"@maz-ui/utils/helpers/isServer";function noTransition(fn,...args){if(isServer())return fn(...args);let style=document.createElement(`style`);return style.textContent=`.no-transitions *,
2
- .no-transitions *::before,
3
- .no-transitions *::after {
4
- transition-property: transform, opacity, scale, rotate, translate !important;
5
- }`,document.head.appendChild(style),document.documentElement.classList.add(`no-transitions`),setTimeout(()=>{document.documentElement.classList.remove(`no-transitions`),style.remove()},500),fn(...args)}export{noTransition};
1
+ import { isServer } from "@maz-ui/utils/helpers/isServer";
2
+ //#region src/utils/no-transition.ts
3
+ function noTransition(fn, ...args) {
4
+ if (isServer()) return fn(...args);
5
+ let style = document.createElement("style");
6
+ return style.textContent = ".no-transitions *,\n.no-transitions *::before,\n.no-transitions *::after {\n transition-property: transform, opacity, scale, rotate, translate !important;\n }", document.head.appendChild(style), document.documentElement.classList.add("no-transitions"), setTimeout(() => {
7
+ document.documentElement.classList.remove("no-transitions"), style.remove();
8
+ }, 500), fn(...args);
9
+ }
10
+ //#endregion
11
+ export { noTransition };