@maz-ui/themes 4.0.0-beta.7 → 4.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.
- package/README.md +1 -1
- package/dist/build/index.js +34 -30
- package/dist/composables/index.js +1 -1
- package/dist/composables/useTheme.js +54 -53
- package/dist/index.js +21 -20
- package/dist/plugin/index.js +3 -2
- package/dist/plugin.js +25 -31
- package/dist/presets/pristine.js +4 -4
- package/dist/types/build/index.d.ts.map +1 -1
- package/dist/types/composables/useTheme.d.ts +5 -11
- package/dist/types/composables/useTheme.d.ts.map +1 -1
- package/dist/types/define-preset.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/plugin.d.ts +3 -5
- package/dist/types/plugin.d.ts.map +1 -1
- package/dist/types/types/index.d.ts +14 -2
- package/dist/types/types/index.d.ts.map +1 -1
- package/dist/types/utils/color-utils.d.ts.map +1 -1
- package/dist/types/utils/css-generator.d.ts +11 -23
- package/dist/types/utils/css-generator.d.ts.map +1 -1
- package/dist/types/utils/get-color-mode.d.ts +1 -1
- package/dist/types/utils/get-color-mode.d.ts.map +1 -1
- package/dist/types/utils/get-preset.d.ts +3 -4
- package/dist/types/utils/get-preset.d.ts.map +1 -1
- package/dist/utils/color-utils.js +36 -45
- package/dist/utils/cookie-storage.js +1 -1
- package/dist/utils/css-generator.js +117 -93
- package/dist/utils/get-color-mode.js +8 -8
- package/dist/utils/index.js +15 -14
- package/package.json +13 -11
package/README.md
CHANGED
package/dist/build/index.js
CHANGED
|
@@ -1,52 +1,56 @@
|
|
|
1
|
-
import { generateCriticalCSS as
|
|
2
|
-
function
|
|
1
|
+
import { generateCriticalCSS as o, generateFullCSS as d } from "../utils/css-generator.js";
|
|
2
|
+
function s(t) {
|
|
3
3
|
const {
|
|
4
4
|
preset: e,
|
|
5
|
-
mode:
|
|
5
|
+
mode: a = "both",
|
|
6
|
+
darkSelector: l = "class",
|
|
6
7
|
prefix: r = "maz",
|
|
7
|
-
criticalOnly:
|
|
8
|
-
} = t,
|
|
9
|
-
mode:
|
|
8
|
+
criticalOnly: i = !1
|
|
9
|
+
} = t, c = {
|
|
10
|
+
mode: a,
|
|
11
|
+
darkSelectorStrategy: l,
|
|
10
12
|
prefix: r
|
|
11
13
|
};
|
|
12
|
-
if (
|
|
13
|
-
return
|
|
14
|
-
const
|
|
15
|
-
return `${
|
|
16
|
-
${
|
|
14
|
+
if (i)
|
|
15
|
+
return o(e, c);
|
|
16
|
+
const n = o(e, c), m = d(e, c);
|
|
17
|
+
return `${n}
|
|
18
|
+
${m}`;
|
|
17
19
|
}
|
|
18
20
|
function u(t, e = {}) {
|
|
19
21
|
const {
|
|
20
|
-
mode:
|
|
22
|
+
mode: a = "both",
|
|
23
|
+
darkSelector: l = "class",
|
|
21
24
|
prefix: r = "maz",
|
|
22
|
-
criticalOnly:
|
|
25
|
+
criticalOnly: i = !1
|
|
23
26
|
} = e;
|
|
24
|
-
return t.reduce((
|
|
25
|
-
preset:
|
|
26
|
-
mode:
|
|
27
|
+
return t.reduce((c, n) => (c[n.name] = s({
|
|
28
|
+
preset: n,
|
|
29
|
+
mode: a,
|
|
30
|
+
darkSelector: l,
|
|
27
31
|
prefix: r,
|
|
28
|
-
criticalOnly:
|
|
29
|
-
}),
|
|
32
|
+
criticalOnly: i
|
|
33
|
+
}), c), {});
|
|
30
34
|
}
|
|
31
35
|
function f(t, e = {}) {
|
|
32
|
-
const { id:
|
|
33
|
-
let
|
|
34
|
-
return
|
|
36
|
+
const { id: a = "maz-theme", media: l } = e;
|
|
37
|
+
let r = `<style id="${a}"`;
|
|
38
|
+
return l && (r += ` media="${l}"`), r += `>
|
|
35
39
|
${t}
|
|
36
|
-
</style>`,
|
|
40
|
+
</style>`, r;
|
|
37
41
|
}
|
|
38
|
-
function
|
|
39
|
-
const { prefix:
|
|
42
|
+
function h(t, e = {}) {
|
|
43
|
+
const { prefix: a = "maz", darkSelector: l = "class" } = e, r = { prefix: a, darkSelectorStrategy: l };
|
|
40
44
|
return {
|
|
41
|
-
critical:
|
|
42
|
-
full:
|
|
43
|
-
lightOnly:
|
|
44
|
-
darkOnly:
|
|
45
|
+
critical: o(t, { ...r, mode: "both" }),
|
|
46
|
+
full: d(t, { ...r, mode: "both" }),
|
|
47
|
+
lightOnly: s({ preset: t, mode: "light", ...e }),
|
|
48
|
+
darkOnly: s({ preset: t, mode: "dark", ...e })
|
|
45
49
|
};
|
|
46
50
|
}
|
|
47
51
|
export {
|
|
48
|
-
|
|
49
|
-
|
|
52
|
+
h as buildSeparateThemeFiles,
|
|
53
|
+
s as buildThemeCSS,
|
|
50
54
|
f as createThemeStylesheet,
|
|
51
55
|
u as generateThemeBundle
|
|
52
56
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { initThemeState as T, useTheme as a } from "./useTheme.js";
|
|
2
1
|
import "vue";
|
|
3
2
|
import "../utils/cookie-storage.js";
|
|
4
3
|
import "../utils/css-generator.js";
|
|
5
4
|
import "../utils/get-color-mode.js";
|
|
6
5
|
import "../utils/get-preset.js";
|
|
7
6
|
import "../utils/preset-merger.js";
|
|
7
|
+
import { initThemeState as T, useTheme as a } from "./useTheme.js";
|
|
8
8
|
export {
|
|
9
9
|
T as initThemeState,
|
|
10
10
|
a as useTheme
|
|
@@ -1,103 +1,104 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
import { setCookie as
|
|
3
|
-
import { generateCriticalCSS as
|
|
4
|
-
import { getColorMode as
|
|
5
|
-
import { getPreset as
|
|
6
|
-
import { mergePresets as
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { ref as g, computed as a, watchEffect as p, inject as v, getCurrentInstance as c, watch as k } from "vue";
|
|
2
|
+
import { setCookie as y } from "../utils/cookie-storage.js";
|
|
3
|
+
import { generateCriticalCSS as S, generateFullCSS as M, injectCSS as s, CSS_IDS as u } from "../utils/css-generator.js";
|
|
4
|
+
import { getColorMode as P, isSystemPrefersDark as h } from "../utils/get-color-mode.js";
|
|
5
|
+
import { getPreset as C } from "../utils/get-preset.js";
|
|
6
|
+
import { mergePresets as T } from "../utils/preset-merger.js";
|
|
7
|
+
const r = g();
|
|
8
|
+
function d(e) {
|
|
9
|
+
typeof document > "u" || !e || e.darkModeStrategy === "media" || e.mode === "light" || (e.isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
|
|
9
10
|
}
|
|
10
|
-
|
|
11
|
-
function d() {
|
|
12
|
-
typeof document > "u" || !r.value || r.value.darkModeStrategy === "media" || (r.value.isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
|
|
13
|
-
}
|
|
14
|
-
function C() {
|
|
11
|
+
function w() {
|
|
15
12
|
const e = c()?.appContext.app;
|
|
16
13
|
e && r.value && (e.config.globalProperties.$mazThemeState = r.value);
|
|
17
14
|
}
|
|
18
15
|
function b(e) {
|
|
19
16
|
if (e.currentPreset && e.colorMode !== void 0) {
|
|
20
|
-
|
|
17
|
+
l({
|
|
21
18
|
currentPreset: e.currentPreset,
|
|
22
19
|
colorMode: e.colorMode,
|
|
20
|
+
mode: e.mode,
|
|
23
21
|
isDark: e.isDark,
|
|
24
22
|
strategy: e.strategy,
|
|
25
23
|
darkModeStrategy: e.darkModeStrategy
|
|
26
24
|
});
|
|
27
25
|
return;
|
|
28
26
|
}
|
|
29
|
-
const t =
|
|
30
|
-
|
|
27
|
+
const t = P(e.colorMode), o = t === "auto" ? h() : t === "dark";
|
|
28
|
+
l({
|
|
31
29
|
currentPreset: e.currentPreset,
|
|
32
30
|
colorMode: t,
|
|
31
|
+
mode: e.mode,
|
|
33
32
|
isDark: o,
|
|
34
33
|
strategy: e.strategy,
|
|
35
34
|
darkModeStrategy: e.darkModeStrategy
|
|
36
35
|
});
|
|
37
36
|
}
|
|
38
|
-
function
|
|
37
|
+
function l(e) {
|
|
39
38
|
if (r.value = e, typeof globalThis.window < "u" && r.value.colorMode === "auto") {
|
|
40
39
|
const t = globalThis.matchMedia("(prefers-color-scheme: dark)"), o = () => {
|
|
41
40
|
r.value && r.value.colorMode === "auto" && (r.value.isDark = t.matches);
|
|
42
41
|
};
|
|
43
42
|
t.addEventListener("change", o), o();
|
|
44
43
|
}
|
|
45
|
-
|
|
46
|
-
r.value && (d(),
|
|
44
|
+
p(() => {
|
|
45
|
+
r.value && (d(r.value), w());
|
|
47
46
|
});
|
|
48
47
|
}
|
|
49
|
-
const z = a(
|
|
48
|
+
const z = a({
|
|
50
49
|
get: () => r.value?.colorMode,
|
|
51
|
-
set: (e) =>
|
|
52
|
-
}),
|
|
53
|
-
async function
|
|
50
|
+
set: (e) => n(e)
|
|
51
|
+
}), E = a(() => r.value?.isDark ?? !1), L = a(() => r.value?.strategy), x = a(() => r.value?.mode), D = a(() => r.value?.darkModeStrategy), F = a(() => r.value?.currentPreset.name);
|
|
52
|
+
async function I(e) {
|
|
54
53
|
if (!r.value)
|
|
55
54
|
return;
|
|
56
|
-
const t = typeof e == "string" ? await
|
|
55
|
+
const t = typeof e == "string" ? await C(e) : e, o = "name" in t && t.name !== r.value.currentPreset.name ? t : T(r.value.currentPreset, t);
|
|
57
56
|
if (r.value.currentPreset = o, r.value.strategy === "runtime" || r.value.strategy === "hybrid") {
|
|
58
|
-
const
|
|
59
|
-
mode: r.value.
|
|
57
|
+
const i = {
|
|
58
|
+
mode: r.value.mode,
|
|
59
|
+
darkSelectorStrategy: r.value.darkModeStrategy,
|
|
60
60
|
prefix: "maz"
|
|
61
|
-
}, f =
|
|
62
|
-
|
|
61
|
+
}, f = S(o, i), m = M(o, i);
|
|
62
|
+
s(u.CRITICAL, f), s(u.FULL, m);
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
-
function
|
|
66
|
-
r.value && (r.value.colorMode = e, e === "auto" ? r.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : r.value.isDark = e === "dark", d(),
|
|
65
|
+
function n(e) {
|
|
66
|
+
r.value && (r.value.colorMode = e, e === "auto" ? r.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : r.value.isDark = e === "dark", d(r.value), y("maz-color-mode", e));
|
|
67
67
|
}
|
|
68
|
-
function
|
|
69
|
-
r.value &&
|
|
68
|
+
function U() {
|
|
69
|
+
r.value && n(r.value.isDark ? "light" : "dark");
|
|
70
70
|
}
|
|
71
71
|
function O() {
|
|
72
72
|
let e;
|
|
73
73
|
try {
|
|
74
|
-
if (e =
|
|
74
|
+
if (e = v("mazThemeState", void 0), !e)
|
|
75
75
|
throw new Error("mazThemeState not found");
|
|
76
76
|
} catch {
|
|
77
77
|
const t = c();
|
|
78
78
|
t?.appContext?.app?.config?.globalProperties && (e = t.appContext.app.config.globalProperties.$mazThemeState);
|
|
79
79
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
toggleDarkMode:
|
|
97
|
-
|
|
98
|
-
|
|
80
|
+
if (e && (r.value ? (typeof document > "u" || typeof globalThis.window > "u") && (r.value = {
|
|
81
|
+
...r.value,
|
|
82
|
+
...e
|
|
83
|
+
}) : b(e)), k(() => e?.currentPreset, (t) => {
|
|
84
|
+
r.value && t && (r.value.currentPreset = t);
|
|
85
|
+
}, {
|
|
86
|
+
once: !0
|
|
87
|
+
}), !r.value)
|
|
88
|
+
throw new Error("[@maz-ui/themes] You must install the MazUi or MazUiTheme plugin before using useTheme composable");
|
|
89
|
+
return {
|
|
90
|
+
presetName: F,
|
|
91
|
+
colorMode: z,
|
|
92
|
+
isDark: E,
|
|
93
|
+
strategy: L,
|
|
94
|
+
updateTheme: I,
|
|
95
|
+
setColorMode: n,
|
|
96
|
+
toggleDarkMode: U,
|
|
97
|
+
mode: x,
|
|
98
|
+
darkModeStrategy: D
|
|
99
|
+
};
|
|
99
100
|
}
|
|
100
101
|
export {
|
|
101
|
-
|
|
102
|
+
l as initThemeState,
|
|
102
103
|
O as useTheme
|
|
103
104
|
};
|
package/dist/index.js
CHANGED
|
@@ -1,36 +1,37 @@
|
|
|
1
|
-
import { buildSeparateThemeFiles as o, buildThemeCSS as t, createThemeStylesheet as m, generateThemeBundle as
|
|
2
|
-
import { initThemeState as
|
|
1
|
+
import { buildSeparateThemeFiles as o, buildThemeCSS as t, createThemeStylesheet as m, generateThemeBundle as S } from "./build/index.js";
|
|
2
|
+
import { initThemeState as i, useTheme as p } from "./composables/useTheme.js";
|
|
3
3
|
import { definePreset as n } from "./define-preset.js";
|
|
4
4
|
import { MazUiTheme as l } from "./plugin.js";
|
|
5
5
|
import { adjustColorLightness as C, formatHSL as h, generateColorScale as g, getContrastColor as d, parseHSL as T } from "./utils/color-utils.js";
|
|
6
|
-
import {
|
|
7
|
-
import { deepMerge as
|
|
8
|
-
import { mazUi as
|
|
9
|
-
import { obsidian as
|
|
10
|
-
import { ocean as
|
|
11
|
-
import { pristine as
|
|
6
|
+
import { CSS_IDS as c, generateCriticalCSS as b, generateFullCSS as L, injectCSS as j, removeCSS as z } from "./utils/css-generator.js";
|
|
7
|
+
import { deepMerge as H, mergePresets as M } from "./utils/preset-merger.js";
|
|
8
|
+
import { mazUi as U } from "./presets/mazUi.js";
|
|
9
|
+
import { obsidian as y } from "./presets/obsidian.js";
|
|
10
|
+
import { ocean as D } from "./presets/ocean.js";
|
|
11
|
+
import { pristine as _ } from "./presets/pristine.js";
|
|
12
12
|
export {
|
|
13
|
+
c as CSS_IDS,
|
|
13
14
|
l as MazUiTheme,
|
|
14
15
|
C as adjustColorLightness,
|
|
15
16
|
o as buildSeparateThemeFiles,
|
|
16
17
|
t as buildThemeCSS,
|
|
17
18
|
m as createThemeStylesheet,
|
|
18
|
-
|
|
19
|
+
H as deepMerge,
|
|
19
20
|
n as definePreset,
|
|
20
21
|
h as formatHSL,
|
|
21
22
|
g as generateColorScale,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
b as generateCriticalCSS,
|
|
24
|
+
L as generateFullCSS,
|
|
25
|
+
S as generateThemeBundle,
|
|
25
26
|
d as getContrastColor,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
i as initThemeState,
|
|
28
|
+
j as injectCSS,
|
|
29
|
+
U as mazUi,
|
|
30
|
+
M as mergePresets,
|
|
31
|
+
y as obsidian,
|
|
32
|
+
D as ocean,
|
|
32
33
|
T as parseHSL,
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
_ as pristine,
|
|
35
|
+
z as removeCSS,
|
|
35
36
|
p as useTheme
|
|
36
37
|
};
|
package/dist/plugin/index.js
CHANGED
|
@@ -2,7 +2,8 @@ import "vue";
|
|
|
2
2
|
import "../utils/css-generator.js";
|
|
3
3
|
import "../utils/get-color-mode.js";
|
|
4
4
|
import "../utils/get-preset.js";
|
|
5
|
-
import
|
|
5
|
+
import "../utils/preset-merger.js";
|
|
6
|
+
import { MazUiTheme as a } from "../plugin.js";
|
|
6
7
|
export {
|
|
7
|
-
|
|
8
|
+
a as MazUiTheme
|
|
8
9
|
};
|
package/dist/plugin.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { reactive as
|
|
2
|
-
import { generateCriticalCSS as
|
|
3
|
-
import { getColorMode as u,
|
|
4
|
-
import { getPreset as
|
|
1
|
+
import { reactive as n } from "vue";
|
|
2
|
+
import { generateCriticalCSS as l, injectCSS as d, CSS_IDS as i, generateFullCSS as S } from "./utils/css-generator.js";
|
|
3
|
+
import { getColorMode as u, isSystemPrefersDark as f } from "./utils/get-color-mode.js";
|
|
4
|
+
import { getPreset as y } from "./utils/get-preset.js";
|
|
5
|
+
import { mergePresets as C } from "./utils/preset-merger.js";
|
|
5
6
|
function g(r, t) {
|
|
6
7
|
typeof document > "u" || r !== "class" || (t ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
|
|
7
8
|
}
|
|
@@ -9,55 +10,48 @@ function k(r, t) {
|
|
|
9
10
|
if (typeof document > "u")
|
|
10
11
|
return;
|
|
11
12
|
const e = {
|
|
12
|
-
mode: t.
|
|
13
|
+
mode: t.mode,
|
|
14
|
+
darkSelectorStrategy: t.darkModeStrategy
|
|
13
15
|
};
|
|
14
16
|
if (t.injectCriticalCSS) {
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
+
const a = l(r, e);
|
|
18
|
+
d(i.CRITICAL, a);
|
|
17
19
|
}
|
|
18
20
|
if (!t.injectFullCSS)
|
|
19
21
|
return;
|
|
20
|
-
const o =
|
|
21
|
-
t.strategy === "runtime" ?
|
|
22
|
-
|
|
22
|
+
const o = S(r, e);
|
|
23
|
+
t.strategy === "runtime" ? d(i.FULL, o) : t.strategy === "hybrid" && requestIdleCallback(() => {
|
|
24
|
+
d(i.FULL, o);
|
|
23
25
|
}, { timeout: 100 });
|
|
24
26
|
}
|
|
25
|
-
function
|
|
27
|
+
function M(r, t) {
|
|
26
28
|
r.provide("mazThemeState", t), r.config.globalProperties.$mazThemeState = t;
|
|
27
29
|
}
|
|
28
|
-
const
|
|
29
|
-
async install(r, t
|
|
30
|
+
const v = {
|
|
31
|
+
async install(r, t) {
|
|
30
32
|
const e = {
|
|
31
|
-
preset: "maz-ui",
|
|
32
33
|
strategy: "runtime",
|
|
34
|
+
overrides: {},
|
|
33
35
|
darkModeStrategy: "class",
|
|
34
|
-
colorMode: "auto",
|
|
36
|
+
colorMode: (t?.mode !== "both" ? t?.mode : t?.colorMode) ?? "auto",
|
|
35
37
|
injectCriticalCSS: !0,
|
|
36
38
|
injectFullCSS: !0,
|
|
39
|
+
mode: "both",
|
|
37
40
|
...t
|
|
38
|
-
}, o = u(e.colorMode),
|
|
41
|
+
}, o = e.mode !== "both" ? e.mode : u(e.colorMode), a = o === "auto" && e.mode === "both" ? f() : o === "dark" || e.mode === "dark", s = n({
|
|
39
42
|
// @ts-expect-error - empty currentPreset to avoid error
|
|
40
43
|
currentPreset: {},
|
|
44
|
+
mode: e.mode,
|
|
41
45
|
colorMode: o,
|
|
42
|
-
isDark:
|
|
46
|
+
isDark: a,
|
|
43
47
|
strategy: e.strategy,
|
|
44
48
|
darkModeStrategy: e.darkModeStrategy
|
|
45
49
|
});
|
|
46
|
-
g(e.darkModeStrategy,
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
foundation: {
|
|
50
|
-
...a.foundation,
|
|
51
|
-
...e.overrides.foundation
|
|
52
|
-
},
|
|
53
|
-
colors: {
|
|
54
|
-
light: { ...a.colors.light, ...e.overrides.colors?.light },
|
|
55
|
-
dark: { ...a.colors.dark, ...e.overrides.colors?.dark }
|
|
56
|
-
}
|
|
57
|
-
} : a;
|
|
58
|
-
s.currentPreset = c, e.strategy !== "buildtime" && k(c, e);
|
|
50
|
+
g(e.darkModeStrategy, a), M(r, s);
|
|
51
|
+
const c = await y(e.preset), m = Object.keys(e.overrides).length > 0 ? C(c, e.overrides) : c;
|
|
52
|
+
s.currentPreset = m, e.strategy !== "buildtime" && k(m, e);
|
|
59
53
|
}
|
|
60
54
|
};
|
|
61
55
|
export {
|
|
62
|
-
|
|
56
|
+
v as MazUiTheme
|
|
63
57
|
};
|
package/dist/presets/pristine.js
CHANGED
|
@@ -12,8 +12,8 @@ const r = {
|
|
|
12
12
|
foreground: "0 0% 10%",
|
|
13
13
|
primary: "220 10% 15%",
|
|
14
14
|
"primary-foreground": "0 0% 100%",
|
|
15
|
-
contrast: "
|
|
16
|
-
"contrast-foreground": "0 0%
|
|
15
|
+
contrast: "0 0% 15%",
|
|
16
|
+
"contrast-foreground": "0 0% 95%",
|
|
17
17
|
secondary: "220 10% 92%",
|
|
18
18
|
"secondary-foreground": "0 0% 10%",
|
|
19
19
|
muted: "0 0% 60%",
|
|
@@ -36,8 +36,8 @@ const r = {
|
|
|
36
36
|
foreground: "0 0% 95%",
|
|
37
37
|
primary: "0 0% 95%",
|
|
38
38
|
"primary-foreground": "0 0% 10%",
|
|
39
|
-
contrast: "
|
|
40
|
-
"contrast-foreground": "0 0%
|
|
39
|
+
contrast: "220 10% 92%",
|
|
40
|
+
"contrast-foreground": "0 0% 10%",
|
|
41
41
|
secondary: "0 0% 18%",
|
|
42
42
|
"secondary-foreground": "0 0% 95%",
|
|
43
43
|
muted: "0 0% 60%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/build/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG3C,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,WAAW,CAAA;IACnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,iBAAiB,GAAG,MAAM,CAwBhE;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,GAAE;IACnE,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkB9B;AAED,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE;IAC1D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACV,GAAG,MAAM,CAYd;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,GAAE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,GAAG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/build/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG3C,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,WAAW,CAAA;IACnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,iBAAiB,GAAG,MAAM,CAwBhE;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,GAAE;IACnE,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkB9B;AAED,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE;IAC1D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACV,GAAG,MAAM,CAYd;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,GAAE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,GAAG;IACP,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAWA"}
|
|
@@ -1,24 +1,18 @@
|
|
|
1
|
-
import { ColorMode, Strategy, ThemePreset, ThemePresetName, ThemePresetOverrides, ThemeState } from '../types';
|
|
1
|
+
import { ColorMode, DarkModeStrategy, Strategy, ThemeMode, ThemePreset, ThemePresetName, ThemePresetOverrides, ThemeState } from '../types';
|
|
2
2
|
export declare function initThemeState(initialState: ThemeState): void;
|
|
3
3
|
declare function updateTheme(preset: ThemePreset | ThemePresetOverrides | ThemePresetName): Promise<void>;
|
|
4
|
-
declare function setColorMode(
|
|
4
|
+
declare function setColorMode(colorMode: ColorMode): void;
|
|
5
5
|
declare function toggleDarkMode(): void;
|
|
6
6
|
export declare function useTheme(): {
|
|
7
|
-
|
|
8
|
-
colorMode: import('vue').Ref<string, string>;
|
|
9
|
-
isDark: import('vue').ComputedRef<boolean>;
|
|
10
|
-
strategy: import('vue').ComputedRef<string>;
|
|
11
|
-
updateTheme: () => Promise<void>;
|
|
12
|
-
setColorMode: () => void;
|
|
13
|
-
toggleDarkMode: () => void;
|
|
14
|
-
} | {
|
|
15
|
-
currentPreset: import('vue').ComputedRef<ThemePreset>;
|
|
7
|
+
presetName: import('vue').ComputedRef<string>;
|
|
16
8
|
colorMode: import('vue').WritableComputedRef<ColorMode, ColorMode>;
|
|
17
9
|
isDark: import('vue').ComputedRef<boolean>;
|
|
18
10
|
strategy: import('vue').ComputedRef<Strategy>;
|
|
19
11
|
updateTheme: typeof updateTheme;
|
|
20
12
|
setColorMode: typeof setColorMode;
|
|
21
13
|
toggleDarkMode: typeof toggleDarkMode;
|
|
14
|
+
mode: import('vue').ComputedRef<ThemeMode>;
|
|
15
|
+
darkModeStrategy: import('vue').ComputedRef<DarkModeStrategy>;
|
|
22
16
|
};
|
|
23
17
|
export {};
|
|
24
18
|
//# sourceMappingURL=useTheme.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/composables/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/composables/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA2DhJ,wBAAgB,cAAc,CAAC,YAAY,EAAE,UAAU,QAsBtD;AAaD,iBAAe,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,oBAAoB,GAAG,eAAe,iBAyBtF;AAED,iBAAS,YAAY,CAAC,SAAS,EAAE,SAAS,QAgBzC;AAED,iBAAS,cAAc,SAKtB;AAED,wBAAgB,QAAQ;;;;;;;;;;EAoDvB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define-preset.d.ts","sourceRoot":"","sources":["../../src/define-preset.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"define-preset.d.ts","sourceRoot":"","sources":["../../src/define-preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAIjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,wBAAgB,YAAY,CAAC,OAAO,EAAE;IACpC,IAAI,EAAE,WAAW,CAAA;IACjB,SAAS,EAAE,oBAAoB,CAAA;CAChC,GAAG,WAAW,CAAA;AAEf,wBAAgB,YAAY,CAAC,OAAO,EAAE;IACpC,IAAI,EAAE,eAAe,CAAA;IACrB,SAAS,EAAE,oBAAoB,CAAA;CAChC,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,wBAAwB,CAAA;AACtC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,wBAAwB,CAAA;AACtC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA"}
|
package/dist/types/plugin.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { Plugin } from 'vue';
|
|
1
2
|
import { ThemeConfig, ThemeState } from './types';
|
|
2
|
-
import { App } from 'vue';
|
|
3
3
|
export interface MazUiThemeOptions extends Omit<ThemeConfig, 'prefix'> {
|
|
4
4
|
/**
|
|
5
5
|
* Inject critical CSS
|
|
@@ -28,10 +28,8 @@ export interface MazUiThemeOptions extends Omit<ThemeConfig, 'prefix'> {
|
|
|
28
28
|
* })
|
|
29
29
|
* ```
|
|
30
30
|
*/
|
|
31
|
-
export declare const MazUiTheme:
|
|
32
|
-
|
|
33
|
-
};
|
|
34
|
-
declare module '@vue/runtime-core' {
|
|
31
|
+
export declare const MazUiTheme: Plugin<[MazUiThemeOptions]>;
|
|
32
|
+
declare module 'vue' {
|
|
35
33
|
interface ComponentCustomProperties {
|
|
36
34
|
/**
|
|
37
35
|
* Maz theme plugin options
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAO,MAAM,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,KAAK,EAAoB,WAAW,EAAe,UAAU,EAAE,MAAM,SAAS,CAAA;AAarF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IACpE;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAiDD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,CAAC,iBAAiB,CAAC,CA+ClD,CAAA;AAED,OAAO,QAAQ,KAAK,CAAC;IACnB,UAAU,yBAAyB;QACjC;;;;;;;;;;;;;;WAcG;QACH,cAAc,EAAE,UAAU,CAAA;KAC3B;CACF"}
|
|
@@ -63,6 +63,7 @@ export interface ThemePreset {
|
|
|
63
63
|
}
|
|
64
64
|
export type ThemePresetName = 'mazUi' | 'ocean' | 'pristine' | 'obsidian' | 'maz-ui';
|
|
65
65
|
export type ColorMode = 'light' | 'dark' | 'auto';
|
|
66
|
+
export type ThemeMode = 'light' | 'dark' | 'both';
|
|
66
67
|
export type DarkModeStrategy = 'class' | 'media';
|
|
67
68
|
export type Strategy = 'runtime' | 'buildtime' | 'hybrid';
|
|
68
69
|
export interface ThemeConfig {
|
|
@@ -78,7 +79,7 @@ export interface ThemeConfig {
|
|
|
78
79
|
* @description Can be a predefined preset name or a custom preset object
|
|
79
80
|
* @default mazUi preset
|
|
80
81
|
*/
|
|
81
|
-
preset
|
|
82
|
+
preset: ThemePreset;
|
|
82
83
|
/**
|
|
83
84
|
* Custom preset overrides
|
|
84
85
|
* @description Allows customizing specific parts of the preset without redefining it entirely
|
|
@@ -103,7 +104,7 @@ export interface ThemeConfig {
|
|
|
103
104
|
*/
|
|
104
105
|
darkModeStrategy?: DarkModeStrategy;
|
|
105
106
|
/**
|
|
106
|
-
*
|
|
107
|
+
* Initial color mode to use
|
|
107
108
|
* @description
|
|
108
109
|
* - `light`: Light mode
|
|
109
110
|
* - `dark`: Dark mode
|
|
@@ -111,6 +112,15 @@ export interface ThemeConfig {
|
|
|
111
112
|
* @default 'auto'
|
|
112
113
|
*/
|
|
113
114
|
colorMode?: ColorMode;
|
|
115
|
+
/**
|
|
116
|
+
* Supported color modes to use
|
|
117
|
+
* @description
|
|
118
|
+
* - `light`: Will inject only light CSS variables
|
|
119
|
+
* - `dark`: Will inject only dark CSS variables
|
|
120
|
+
* - `both`: Will inject both light and dark CSS variables
|
|
121
|
+
* @default 'both'
|
|
122
|
+
*/
|
|
123
|
+
mode?: ThemeMode;
|
|
114
124
|
}
|
|
115
125
|
export interface ColorScale {
|
|
116
126
|
50: string;
|
|
@@ -123,10 +133,12 @@ export interface ColorScale {
|
|
|
123
133
|
700: string;
|
|
124
134
|
800: string;
|
|
125
135
|
900: string;
|
|
136
|
+
950: string;
|
|
126
137
|
}
|
|
127
138
|
export interface ThemeState {
|
|
128
139
|
currentPreset: ThemePreset;
|
|
129
140
|
colorMode: ColorMode;
|
|
141
|
+
mode: ThemeMode;
|
|
130
142
|
isDark: boolean;
|
|
131
143
|
strategy: Strategy;
|
|
132
144
|
darkModeStrategy: DarkModeStrategy;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG,GAAG,GAAG,MAAM,IAAI,MAAM,KAAK,MAAM,GAAG,CAAA;AACnD,MAAM,MAAM,QAAQ,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,CAAA;AAE9F,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE,GAAG,CAAA;IACjB,YAAY,EAAE,GAAG,CAAA;IACjB,SAAS,EAAE,GAAG,CAAA;IACd,oBAAoB,EAAE,GAAG,CAAA;IACzB,WAAW,EAAE,GAAG,CAAA;IAChB,sBAAsB,EAAE,GAAG,CAAA;IAC3B,QAAQ,EAAE,GAAG,CAAA;IACb,mBAAmB,EAAE,GAAG,CAAA;IACxB,MAAM,EAAE,GAAG,CAAA;IACX,iBAAiB,EAAE,GAAG,CAAA;IACtB,UAAU,EAAE,GAAG,CAAA;IACf,qBAAqB,EAAE,GAAG,CAAA;IAC1B,aAAa,EAAE,GAAG,CAAA;IAClB,wBAAwB,EAAE,GAAG,CAAA;IAC7B,SAAS,EAAE,GAAG,CAAA;IACd,oBAAoB,EAAE,GAAG,CAAA;IACzB,SAAS,EAAE,GAAG,CAAA;IACd,oBAAoB,EAAE,GAAG,CAAA;IACzB,SAAS,EAAE,GAAG,CAAA;IACd,OAAO,EAAE,GAAG,CAAA;IACZ,QAAQ,EAAE,GAAG,CAAA;IACb,QAAQ,EAAE,GAAG,CAAA;CACd;AAED,MAAM,WAAW,eAAe;IAC9B,gBAAgB,CAAC,EAAE,QAAQ,CAAA;IAC3B,QAAQ,EAAE,QAAQ,CAAA;IAClB,cAAc,EAAE,QAAQ,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;QAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;KAC5B,CAAA;IAED;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CACtC;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE;QACN,KAAK,EAAE,WAAW,CAAA;QAClB,IAAI,EAAE,WAAW,CAAA;KAClB,CAAA;IACD,UAAU,EAAE,eAAe,CAAA;CAC5B;AAED,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEpF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,OAAO,CAAA;AAEhD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEzD,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;OAIG;IACH,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/color-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAUzE;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAKjE;
|
|
1
|
+
{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/color-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAUzE;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAKjE;AAkCD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,UAAU,CAyChE;AAED,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAG1D;AAED,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAIlF"}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import { DarkModeStrategy, ThemeColors, ThemeFoundation, ThemePreset } from '../types';
|
|
2
|
-
type ThemeMode = 'light' | 'dark' | 'both';
|
|
1
|
+
import { DarkModeStrategy, ThemeColors, ThemeFoundation, ThemeMode, ThemePreset } from '../types';
|
|
3
2
|
export interface CriticalCSSOptions {
|
|
4
3
|
/** Critical color variables to include */
|
|
5
4
|
criticalColors?: (keyof ThemeColors)[];
|
|
6
5
|
/** Critical foundation variables to include */
|
|
7
6
|
criticalFoundation?: (keyof ThemeFoundation)[];
|
|
8
7
|
/** Theme mode to generate */
|
|
9
|
-
mode
|
|
8
|
+
mode: ThemeMode;
|
|
10
9
|
/** Dark mode selector: 'class' (.dark) | 'media' (@media) */
|
|
11
|
-
darkSelectorStrategy
|
|
10
|
+
darkSelectorStrategy: DarkModeStrategy;
|
|
12
11
|
/** CSS variables prefix */
|
|
13
12
|
prefix?: string;
|
|
14
13
|
}
|
|
@@ -16,31 +15,20 @@ export interface FullCSSOptions {
|
|
|
16
15
|
/** Critical variables to exclude (to avoid duplication) */
|
|
17
16
|
excludeCritical?: (keyof ThemeColors | keyof ThemeFoundation)[];
|
|
18
17
|
/** Theme mode to generate */
|
|
19
|
-
mode
|
|
18
|
+
mode: ThemeMode;
|
|
20
19
|
/** Dark mode selector: 'class' (.dark) | 'media' (@media) */
|
|
21
|
-
darkSelectorStrategy
|
|
20
|
+
darkSelectorStrategy: DarkModeStrategy;
|
|
22
21
|
/** CSS variables prefix */
|
|
23
22
|
prefix?: string;
|
|
24
23
|
/** Include color scales (50-900) */
|
|
25
24
|
includeColorScales?: boolean;
|
|
26
25
|
}
|
|
27
|
-
/**
|
|
28
|
-
* Generates critical CSS to prevent FOUC
|
|
29
|
-
* Contains only essential variables
|
|
30
|
-
*/
|
|
31
26
|
export declare function generateCriticalCSS(preset: ThemePreset, options?: CriticalCSSOptions): string;
|
|
32
|
-
/**
|
|
33
|
-
* Generates full CSS without critical variables
|
|
34
|
-
* Avoids duplication with critical CSS
|
|
35
|
-
*/
|
|
36
27
|
export declare function generateFullCSS(preset: ThemePreset, options?: FullCSSOptions): string;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
*/
|
|
44
|
-
export declare function removeCSS(id?: string): void;
|
|
45
|
-
export {};
|
|
28
|
+
export declare enum CSS_IDS {
|
|
29
|
+
FULL = "maz-theme-full",
|
|
30
|
+
CRITICAL = "maz-theme-critical"
|
|
31
|
+
}
|
|
32
|
+
export declare function injectCSS(id: CSS_IDS, css: string): void;
|
|
33
|
+
export declare function removeCSS(id: CSS_IDS): void;
|
|
46
34
|
//# sourceMappingURL=css-generator.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../../src/utils/css-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../../src/utils/css-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAGtG,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,cAAc,CAAC,EAAE,CAAC,MAAM,WAAW,CAAC,EAAE,CAAA;IACtC,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,CAAC,MAAM,eAAe,CAAC,EAAE,CAAA;IAC9C,6BAA6B;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,6DAA6D;IAC7D,oBAAoB,EAAE,gBAAgB,CAAA;IACtC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,2DAA2D;IAC3D,eAAe,CAAC,EAAE,CAAC,MAAM,WAAW,GAAG,MAAM,eAAe,CAAC,EAAE,CAAA;IAC/D,6BAA6B;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,6DAA6D;IAC7D,oBAAoB,EAAE,gBAAgB,CAAA;IACtC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAmCD,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,kBAGR,GACA,MAAM,CAwCR;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,cAGR,GACA,MAAM,CA4CR;AAoHD,oBAAY,OAAO;IACjB,IAAI,mBAAmB;IACvB,QAAQ,uBAAuB;CAChC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAaxD;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAQ3C"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ColorMode } from '../types';
|
|
2
2
|
export declare function getColorMode(colorMode?: ColorMode): ColorMode;
|
|
3
|
-
export declare function
|
|
3
|
+
export declare function isSystemPrefersDark(): boolean;
|
|
4
4
|
//# sourceMappingURL=get-color-mode.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-color-mode.d.ts","sourceRoot":"","sources":["../../../src/utils/get-color-mode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAGzC,wBAAgB,YAAY,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAW7D;AAED,wBAAgB,
|
|
1
|
+
{"version":3,"file":"get-color-mode.d.ts","sourceRoot":"","sources":["../../../src/utils/get-color-mode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAGzC,wBAAgB,YAAY,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAW7D;AAED,wBAAgB,mBAAmB,YAElC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export declare function
|
|
4
|
-
export declare function getPreset(preset?: MazUiThemeOptions['preset']): Promise<ThemePreset>;
|
|
1
|
+
import { ThemePreset, ThemePresetName, ThemePresetOverrides } from '../types';
|
|
2
|
+
export declare function isPresetObject(preset?: ThemePresetName | ThemePreset | ThemePresetOverrides): preset is ThemePreset;
|
|
3
|
+
export declare function getPreset(preset?: ThemePresetName | ThemePreset): Promise<ThemePreset>;
|
|
5
4
|
//# sourceMappingURL=get-preset.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-preset.d.ts","sourceRoot":"","sources":["../../../src/utils/get-preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"get-preset.d.ts","sourceRoot":"","sources":["../../../src/utils/get-preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAElF,wBAAgB,cAAc,CAAC,MAAM,CAAC,EAAE,eAAe,GAAG,WAAW,GAAG,oBAAoB,GAAG,MAAM,IAAI,WAAW,CAEnH;AAED,wBAAsB,SAAS,CAAC,MAAM,CAAC,EAAE,eAAe,GAAG,WAAW,wBA0BrE"}
|
|
@@ -8,70 +8,61 @@ function l(n) {
|
|
|
8
8
|
l: Number.parseFloat(t[3])
|
|
9
9
|
};
|
|
10
10
|
}
|
|
11
|
-
function i(n, t,
|
|
12
|
-
const
|
|
13
|
-
return `${
|
|
11
|
+
function i(n, t, r) {
|
|
12
|
+
const o = Math.round(n * 10) / 10, s = Math.round(t * 10) / 10, e = Math.round(r * 10) / 10;
|
|
13
|
+
return `${o} ${s}% ${e}%`;
|
|
14
14
|
}
|
|
15
|
-
const
|
|
16
|
-
50:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
// Base + 30% = moderately light
|
|
22
|
-
300: 20,
|
|
23
|
-
// Base + 20% = light-medium
|
|
24
|
-
400: 10,
|
|
25
|
-
// Base + 10% = slightly lighter
|
|
15
|
+
const d = {
|
|
16
|
+
50: 37.5,
|
|
17
|
+
100: 30,
|
|
18
|
+
200: 22.5,
|
|
19
|
+
300: 15,
|
|
20
|
+
400: 7.5,
|
|
26
21
|
500: 0,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
800: -30,
|
|
33
|
-
// Base - 30% = very dark
|
|
34
|
-
900: -40
|
|
35
|
-
// Base - 40% = extremely dark
|
|
22
|
+
600: -7.5,
|
|
23
|
+
700: -15,
|
|
24
|
+
800: -22.5,
|
|
25
|
+
900: -30,
|
|
26
|
+
950: -37.5
|
|
36
27
|
};
|
|
37
|
-
function
|
|
28
|
+
function p(n, t, r) {
|
|
38
29
|
if (t === n)
|
|
39
30
|
return 1;
|
|
40
|
-
const
|
|
31
|
+
const o = Math.min(r / 100, 1), s = Math.abs(t - n);
|
|
41
32
|
if (t < n) {
|
|
42
|
-
const e = s / 500 * 0.25 *
|
|
33
|
+
const e = s / 500 * 0.25 * o;
|
|
43
34
|
return Math.max(0.3, 1 - e);
|
|
44
35
|
} else {
|
|
45
|
-
const e = s / 400 * 0.15 *
|
|
36
|
+
const e = s / 400 * 0.15 * o;
|
|
46
37
|
return Math.min(1.3, 1 + e);
|
|
47
38
|
}
|
|
48
39
|
}
|
|
49
|
-
function
|
|
50
|
-
const { h: t, s:
|
|
51
|
-
return
|
|
52
|
-
if (
|
|
53
|
-
c
|
|
40
|
+
function b(n) {
|
|
41
|
+
const { h: t, s: r, l: o } = l(n), s = 500, e = o, m = Object.keys(d).map(Number), u = {};
|
|
42
|
+
return m.forEach((c) => {
|
|
43
|
+
if (c === s)
|
|
44
|
+
u[c] = i(t, r, o);
|
|
54
45
|
else {
|
|
55
|
-
const h = M[
|
|
56
|
-
let
|
|
57
|
-
|
|
58
|
-
const
|
|
59
|
-
c
|
|
46
|
+
const h = c < s, f = c > s, M = d[c];
|
|
47
|
+
let a;
|
|
48
|
+
h && o >= 100 ? a = e : a = e + M, f && o <= 0 && (a = 0), a = Math.min(100, Math.max(0, a));
|
|
49
|
+
const S = p(s, c, r), L = Math.min(100, Math.max(5, r * S));
|
|
50
|
+
u[c] = i(t, L, a);
|
|
60
51
|
}
|
|
61
|
-
}),
|
|
52
|
+
}), u;
|
|
62
53
|
}
|
|
63
|
-
function
|
|
54
|
+
function F(n) {
|
|
64
55
|
const { l: t } = l(n);
|
|
65
56
|
return t > 50 ? "0 0% 0%" : "0 0% 100%";
|
|
66
57
|
}
|
|
67
|
-
function
|
|
68
|
-
const { h:
|
|
69
|
-
return i(
|
|
58
|
+
function x(n, t) {
|
|
59
|
+
const { h: r, s: o, l: s } = l(n), e = Math.max(0, Math.min(100, s + t));
|
|
60
|
+
return i(r, o, e);
|
|
70
61
|
}
|
|
71
62
|
export {
|
|
72
|
-
|
|
63
|
+
x as adjustColorLightness,
|
|
73
64
|
i as formatHSL,
|
|
74
|
-
|
|
75
|
-
|
|
65
|
+
b as generateColorScale,
|
|
66
|
+
F as getContrastColor,
|
|
76
67
|
l as parseHSL
|
|
77
68
|
};
|
|
@@ -5,7 +5,7 @@ function c(e) {
|
|
|
5
5
|
return t ? decodeURIComponent(t.split("=")[1]) : null;
|
|
6
6
|
}
|
|
7
7
|
function u(e, o) {
|
|
8
|
-
typeof document > "u" || (document.cookie = `${e}=${encodeURIComponent(o)}; path=/; max-age=${
|
|
8
|
+
typeof document > "u" || (document.cookie = `${e}=${encodeURIComponent(o)}; path=/; max-age=${3600 * 24 * 365}; SameSite=Lax`);
|
|
9
9
|
}
|
|
10
10
|
export {
|
|
11
11
|
c as getCookie,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { generateColorScale as
|
|
1
|
+
import { generateColorScale as b } from "./color-utils.js";
|
|
2
2
|
const h = [
|
|
3
3
|
"background",
|
|
4
4
|
"foreground",
|
|
@@ -21,146 +21,170 @@ const h = [
|
|
|
21
21
|
"muted",
|
|
22
22
|
"shadow",
|
|
23
23
|
"border"
|
|
24
|
-
],
|
|
24
|
+
], C = [
|
|
25
25
|
"radius",
|
|
26
26
|
"font-family",
|
|
27
27
|
"base-font-size",
|
|
28
28
|
"border-width"
|
|
29
29
|
], S = ["primary", "secondary", "accent", "destructive", "success", "warning", "info", "contrast", "background", "foreground", "border", "muted", "overlay", "shadow"];
|
|
30
|
-
function
|
|
30
|
+
function j(e, o = {
|
|
31
|
+
mode: "both",
|
|
32
|
+
darkSelectorStrategy: "class"
|
|
33
|
+
}) {
|
|
31
34
|
const {
|
|
32
|
-
criticalColors:
|
|
33
|
-
criticalFoundation: c =
|
|
34
|
-
mode:
|
|
35
|
-
darkSelectorStrategy:
|
|
35
|
+
criticalColors: r = h,
|
|
36
|
+
criticalFoundation: c = C,
|
|
37
|
+
mode: t,
|
|
38
|
+
darkSelectorStrategy: s,
|
|
36
39
|
prefix: i = "maz"
|
|
37
|
-
} = o,
|
|
38
|
-
let
|
|
40
|
+
} = o, l = y(e.foundation, c);
|
|
41
|
+
let n = `@layer maz-ui-theme {
|
|
39
42
|
`;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
43
|
+
if (t === "light" || t === "both") {
|
|
44
|
+
const a = m(e.colors.light, r);
|
|
45
|
+
n += f({
|
|
46
|
+
selector: ":root",
|
|
47
|
+
colors: a,
|
|
48
|
+
foundation: l,
|
|
49
|
+
prefix: i
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
if (t === "dark" || t === "both") {
|
|
53
|
+
const a = m(e.colors.dark, r);
|
|
54
|
+
n += f({
|
|
55
|
+
selector: s === "media" ? ":root" : ".dark",
|
|
56
|
+
mediaQuery: s === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
|
|
57
|
+
colors: a,
|
|
58
|
+
foundation: l,
|
|
59
|
+
prefix: i
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
return n += `}
|
|
63
|
+
`, n;
|
|
53
64
|
}
|
|
54
|
-
function
|
|
65
|
+
function p(e, o = {
|
|
66
|
+
mode: "both",
|
|
67
|
+
darkSelectorStrategy: "class"
|
|
68
|
+
}) {
|
|
55
69
|
const {
|
|
56
|
-
excludeCritical:
|
|
57
|
-
mode: c
|
|
58
|
-
darkSelectorStrategy:
|
|
59
|
-
prefix:
|
|
70
|
+
excludeCritical: r = h,
|
|
71
|
+
mode: c,
|
|
72
|
+
darkSelectorStrategy: t,
|
|
73
|
+
prefix: s = "maz",
|
|
60
74
|
includeColorScales: i = !0
|
|
61
|
-
} = o,
|
|
62
|
-
let
|
|
75
|
+
} = o, l = k(e.foundation, C);
|
|
76
|
+
let n = `@layer maz-ui-theme {
|
|
63
77
|
`;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
78
|
+
if (c === "light" || c === "both") {
|
|
79
|
+
const a = g(e.colors.light, r);
|
|
80
|
+
n += f({
|
|
81
|
+
selector: ":root",
|
|
82
|
+
colors: a,
|
|
83
|
+
foundation: l,
|
|
84
|
+
prefix: s,
|
|
85
|
+
includeScales: i,
|
|
86
|
+
preset: e
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
if (c === "dark" || c === "both") {
|
|
90
|
+
const a = g(e.colors.dark, r);
|
|
91
|
+
n += f({
|
|
92
|
+
selector: t === "media" ? ":root" : ".dark",
|
|
93
|
+
mediaQuery: t === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
|
|
94
|
+
colors: a,
|
|
95
|
+
foundation: c === "dark" ? l : void 0,
|
|
96
|
+
// Appearance only if dark mode only
|
|
97
|
+
prefix: s,
|
|
98
|
+
includeScales: i,
|
|
99
|
+
preset: e,
|
|
100
|
+
isDark: !0
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
return n += `}
|
|
104
|
+
`, n;
|
|
83
105
|
}
|
|
84
|
-
function m(
|
|
106
|
+
function m(e, o) {
|
|
85
107
|
return Object.fromEntries(
|
|
86
|
-
o.filter((
|
|
108
|
+
o.filter((r) => e[r]).map((r) => [r, e[r]])
|
|
87
109
|
);
|
|
88
110
|
}
|
|
89
|
-
function y(
|
|
90
|
-
return
|
|
91
|
-
o.filter((
|
|
111
|
+
function y(e, o) {
|
|
112
|
+
return e ? Object.fromEntries(
|
|
113
|
+
o.filter((r) => e[r]).map((r) => [r, e[r]])
|
|
92
114
|
) : {};
|
|
93
115
|
}
|
|
94
|
-
function g(
|
|
116
|
+
function g(e, o) {
|
|
95
117
|
return Object.fromEntries(
|
|
96
|
-
Object.entries(
|
|
118
|
+
Object.entries(e).filter(([r]) => !o.includes(r))
|
|
97
119
|
);
|
|
98
120
|
}
|
|
99
|
-
function k(
|
|
100
|
-
return
|
|
101
|
-
Object.entries(
|
|
121
|
+
function k(e, o) {
|
|
122
|
+
return e ? Object.fromEntries(
|
|
123
|
+
Object.entries(e).filter(([r]) => !o.includes(r))
|
|
102
124
|
) : {};
|
|
103
125
|
}
|
|
104
126
|
function f({
|
|
105
|
-
selector:
|
|
127
|
+
selector: e,
|
|
106
128
|
mediaQuery: o,
|
|
107
|
-
colors:
|
|
129
|
+
colors: r,
|
|
108
130
|
foundation: c,
|
|
109
|
-
prefix:
|
|
110
|
-
includeScales:
|
|
131
|
+
prefix: t,
|
|
132
|
+
includeScales: s = !1,
|
|
111
133
|
preset: i,
|
|
112
|
-
isDark:
|
|
134
|
+
isDark: l = !1
|
|
113
135
|
}) {
|
|
114
|
-
const
|
|
115
|
-
if (
|
|
116
|
-
|
|
117
|
-
}), c && Object.entries(c).forEach(([
|
|
118
|
-
|
|
119
|
-
}),
|
|
120
|
-
const
|
|
121
|
-
|
|
136
|
+
const n = [];
|
|
137
|
+
if (r && Object.entries(r).forEach(([u, d]) => {
|
|
138
|
+
d && n.push(` --${t}-${u}: ${d};`);
|
|
139
|
+
}), c && Object.entries(c).forEach(([u, d]) => {
|
|
140
|
+
d && n.push(` --${t}-${u}: ${d};`);
|
|
141
|
+
}), s && i) {
|
|
142
|
+
const u = l ? i.colors.dark : i.colors.light, d = E(u, t);
|
|
143
|
+
n.push(...d);
|
|
122
144
|
}
|
|
123
|
-
const
|
|
145
|
+
const a = n.join(`
|
|
124
146
|
`);
|
|
125
147
|
return o ? `
|
|
126
148
|
${o} {
|
|
127
|
-
${
|
|
128
|
-
${
|
|
149
|
+
${e} {
|
|
150
|
+
${a.replace(/^/gm, " ")}
|
|
129
151
|
}
|
|
130
152
|
}
|
|
131
153
|
` : `
|
|
132
|
-
${
|
|
133
|
-
${
|
|
154
|
+
${e} {
|
|
155
|
+
${a}
|
|
134
156
|
}
|
|
135
157
|
`;
|
|
136
158
|
}
|
|
137
|
-
function E(
|
|
138
|
-
const
|
|
159
|
+
function E(e, o) {
|
|
160
|
+
const r = [];
|
|
139
161
|
return S.forEach((c) => {
|
|
140
|
-
const
|
|
141
|
-
if (
|
|
142
|
-
const
|
|
143
|
-
Object.entries(
|
|
144
|
-
|
|
162
|
+
const t = e[c];
|
|
163
|
+
if (t) {
|
|
164
|
+
const s = b(t);
|
|
165
|
+
Object.entries(s).forEach(([i, l]) => {
|
|
166
|
+
r.push(` --${o}-${c}-${i}: ${l};`);
|
|
145
167
|
});
|
|
146
168
|
}
|
|
147
|
-
}),
|
|
169
|
+
}), r;
|
|
148
170
|
}
|
|
149
|
-
|
|
171
|
+
var $ = /* @__PURE__ */ ((e) => (e.FULL = "maz-theme-full", e.CRITICAL = "maz-theme-critical", e))($ || {});
|
|
172
|
+
function v(e, o) {
|
|
150
173
|
if (typeof document > "u")
|
|
151
174
|
return;
|
|
152
|
-
let
|
|
153
|
-
|
|
175
|
+
let r = document.getElementById(e);
|
|
176
|
+
r || (r = document.createElement("style"), r.id = e, document.head.appendChild(r)), r.textContent = o;
|
|
154
177
|
}
|
|
155
|
-
function
|
|
178
|
+
function F(e) {
|
|
156
179
|
if (typeof document > "u")
|
|
157
180
|
return;
|
|
158
|
-
const o = document.getElementById(
|
|
181
|
+
const o = document.getElementById(e);
|
|
159
182
|
o && o.remove();
|
|
160
183
|
}
|
|
161
184
|
export {
|
|
162
|
-
|
|
163
|
-
j as
|
|
164
|
-
p as
|
|
165
|
-
v as
|
|
185
|
+
$ as CSS_IDS,
|
|
186
|
+
j as generateCriticalCSS,
|
|
187
|
+
p as generateFullCSS,
|
|
188
|
+
v as injectCSS,
|
|
189
|
+
F as removeCSS
|
|
166
190
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { getCookie as
|
|
2
|
-
function
|
|
1
|
+
import { getCookie as r } from "./cookie-storage.js";
|
|
2
|
+
function o(e) {
|
|
3
3
|
if (e && ["light", "dark"].includes(e))
|
|
4
4
|
return e;
|
|
5
|
-
const
|
|
6
|
-
return
|
|
5
|
+
const t = r("maz-color-mode");
|
|
6
|
+
return t && ["light", "dark"].includes(t) ? t : "auto";
|
|
7
7
|
}
|
|
8
|
-
function
|
|
9
|
-
return typeof globalThis.window < "u" && typeof globalThis.matchMedia == "function" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches
|
|
8
|
+
function n() {
|
|
9
|
+
return typeof globalThis.window < "u" && typeof globalThis.matchMedia == "function" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
10
10
|
}
|
|
11
11
|
export {
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
o as getColorMode,
|
|
13
|
+
n as isSystemPrefersDark
|
|
14
14
|
};
|
package/dist/utils/index.js
CHANGED
|
@@ -1,22 +1,23 @@
|
|
|
1
|
-
import { adjustColorLightness as o, formatHSL as t, generateColorScale as
|
|
1
|
+
import { adjustColorLightness as o, formatHSL as t, generateColorScale as S, getContrastColor as C, parseHSL as s } from "./color-utils.js";
|
|
2
2
|
import { getCookie as g, setCookie as m } from "./cookie-storage.js";
|
|
3
|
-
import {
|
|
4
|
-
import { getPreset as
|
|
5
|
-
import { deepMerge as
|
|
3
|
+
import { CSS_IDS as l, generateCriticalCSS as p, generateFullCSS as f, injectCSS as n, removeCSS as x } from "./css-generator.js";
|
|
4
|
+
import { getPreset as j, isPresetObject as L } from "./get-preset.js";
|
|
5
|
+
import { deepMerge as d, mergePresets as k } from "./preset-merger.js";
|
|
6
6
|
export {
|
|
7
|
+
l as CSS_IDS,
|
|
7
8
|
o as adjustColorLightness,
|
|
8
|
-
|
|
9
|
+
d as deepMerge,
|
|
9
10
|
t as formatHSL,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
S as generateColorScale,
|
|
12
|
+
p as generateCriticalCSS,
|
|
13
|
+
f as generateFullCSS,
|
|
13
14
|
C as getContrastColor,
|
|
14
15
|
g as getCookie,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
j as getPreset,
|
|
17
|
+
n as injectCSS,
|
|
18
|
+
L as isPresetObject,
|
|
19
|
+
k as mergePresets,
|
|
20
|
+
s as parseHSL,
|
|
21
|
+
x as removeCSS,
|
|
21
22
|
m as setCookie
|
|
22
23
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maz-ui/themes",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "4.0.0
|
|
4
|
+
"version": "4.0.0",
|
|
5
5
|
"description": "Theme system for Maz-UI with TypeScript support and CSS variables",
|
|
6
6
|
"author": "Louis Mazel <me@loicmazuel.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -61,8 +61,7 @@
|
|
|
61
61
|
"./plugin": {
|
|
62
62
|
"types": "./dist/types/plugin.d.ts",
|
|
63
63
|
"import": "./dist/plugin/index.js"
|
|
64
|
-
}
|
|
65
|
-
"./*": "./*"
|
|
64
|
+
}
|
|
66
65
|
},
|
|
67
66
|
"main": "./dist/index.js",
|
|
68
67
|
"module": "./dist/index.js",
|
|
@@ -76,10 +75,10 @@
|
|
|
76
75
|
},
|
|
77
76
|
"scripts": {
|
|
78
77
|
"build": "vite build",
|
|
79
|
-
"
|
|
78
|
+
"build:watch": "vite build --watch",
|
|
80
79
|
"typecheck": "vue-tsc --noEmit",
|
|
81
|
-
"lint": "eslint .",
|
|
82
|
-
"lint:fix": "
|
|
80
|
+
"lint": "cross-env NODE_ENV=production eslint .",
|
|
81
|
+
"lint:fix": "pnpm lint --fix",
|
|
83
82
|
"pre-commit": "lint-staged",
|
|
84
83
|
"test": "vitest",
|
|
85
84
|
"test:unit": "vitest run",
|
|
@@ -91,14 +90,17 @@
|
|
|
91
90
|
"peerDependencies": {
|
|
92
91
|
"vue": "^3.5.0"
|
|
93
92
|
},
|
|
93
|
+
"dependencies": {
|
|
94
|
+
"@maz-ui/utils": "4.0.0"
|
|
95
|
+
},
|
|
94
96
|
"devDependencies": {
|
|
95
97
|
"glob": "^11.0.3",
|
|
96
|
-
"typescript": "^5.
|
|
97
|
-
"vue": "^3.5.
|
|
98
|
-
"vue-tsc": "^
|
|
98
|
+
"typescript": "^5.9.2",
|
|
99
|
+
"vue": "^3.5.18",
|
|
100
|
+
"vue-tsc": "^3.0.5"
|
|
99
101
|
},
|
|
100
102
|
"lint-staged": {
|
|
101
|
-
"*.{js,ts,vue,mjs,mts,cjs,md}": "cross-env NODE_ENV=production eslint --fix"
|
|
103
|
+
"*.{js,ts,vue,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
|
|
102
104
|
},
|
|
103
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "b2e03a043ad3334ed5ce456c7f0e67c728c09524"
|
|
104
106
|
}
|