@maz-ui/themes 4.0.0-beta.19 → 4.0.0-beta.24

package/README.md

@@ -1,6 +1,6 @@
 # @maz-ui/themes
 
-High-performance and typed theme system for Maz-UI, inspired by Shadcn and PrimeVue.
+High-performance and typed theme system for Maz-UI.
 
 ## Features
 

package/dist/build/index.js

@@ -1,52 +1,56 @@
-import { generateCriticalCSS as c, generateFullCSS as m } from "../utils/css-generator.js";
-function o(t) {
+import { generateCriticalCSS as o, generateFullCSS as d } from "../utils/css-generator.js";
+function s(t) {
   const {
     preset: e,
-    mode: i = "both",
+    mode: a = "both",
+    darkSelector: l = "class",
     prefix: r = "maz",
-    criticalOnly: n = !1
-  } = t, l = {
-    mode: i,
+    criticalOnly: i = !1
+  } = t, c = {
+    mode: a,
+    darkSelectorStrategy: l,
     prefix: r
   };
-  if (n)
-    return c(e, l);
-  const a = c(e, l), s = m(e, l);
-  return `${a}
-${s}`;
+  if (i)
+    return o(e, c);
+  const n = o(e, c), m = d(e, c);
+  return `${n}
+${m}`;
 }
 function u(t, e = {}) {
   const {
-    mode: i = "both",
+    mode: a = "both",
+    darkSelector: l = "class",
     prefix: r = "maz",
-    criticalOnly: n = !1
+    criticalOnly: i = !1
   } = e;
-  return t.reduce((l, a) => (l[a.name] = o({
-    preset: a,
-    mode: i,
+  return t.reduce((c, n) => (c[n.name] = s({
+    preset: n,
+    mode: a,
+    darkSelector: l,
     prefix: r,
-    criticalOnly: n
-  }), l), {});
+    criticalOnly: i
+  }), c), {});
 }
 function f(t, e = {}) {
-  const { id: i = "maz-theme", media: r } = e;
-  let n = `<style id="${i}"`;
-  return r && (n += ` media="${r}"`), n += `>
+  const { id: a = "maz-theme", media: l } = e;
+  let r = `<style id="${a}"`;
+  return l && (r += ` media="${l}"`), r += `>
 ${t}
-</style>`, n;
+</style>`, r;
 }
-function S(t, e = {}) {
-  const { prefix: i = "maz", darkSelector: r = "class" } = e, n = { prefix: i, darkSelector: r };
+function h(t, e = {}) {
+  const { prefix: a = "maz", darkSelector: l = "class" } = e, r = { prefix: a, darkSelectorStrategy: l };
   return {
-    critical: c(t, { ...n, mode: "both" }),
-    full: m(t, { ...n, mode: "both" }),
-    lightOnly: o({ preset: t, mode: "light", ...e }),
-    darkOnly: o({ preset: t, mode: "dark", ...e })
+    critical: o(t, { ...r, mode: "both" }),
+    full: d(t, { ...r, mode: "both" }),
+    lightOnly: s({ preset: t, mode: "light", ...e }),
+    darkOnly: s({ preset: t, mode: "dark", ...e })
   };
 }
 export {
-  S as buildSeparateThemeFiles,
-  o as buildThemeCSS,
+  h as buildSeparateThemeFiles,
+  s as buildThemeCSS,
   f as createThemeStylesheet,
   u as generateThemeBundle
 };

package/dist/composables/useTheme.js

@@ -1,23 +1,23 @@
-import { ref as n, computed as a, watchEffect as p, inject as v, getCurrentInstance as d } from "vue";
-import { setCookie as k } from "../utils/cookie-storage.js";
-import { generateCriticalCSS as y, generateFullCSS as M, injectCSS as u, CSS_IDS as l } from "../utils/css-generator.js";
-import { getColorMode as S, getSystemPrefersDark as P } from "../utils/get-color-mode.js";
-import { getPreset as h } from "../utils/get-preset.js";
-import { mergePresets as C } from "../utils/preset-merger.js";
-function T() {
+import { ref as M, computed as a, watchEffect as P, inject as h, getCurrentInstance as v, watch as C } from "vue";
+import { setCookie as T } from "../utils/cookie-storage.js";
+import { generateCriticalCSS as b, generateFullCSS as w, injectCSS as s, CSS_IDS as u } from "../utils/css-generator.js";
+import { getColorMode as z, isSystemPrefersDark as L } from "../utils/get-color-mode.js";
+import { getPreset as x } from "../utils/get-preset.js";
+import { mergePresets as D } from "../utils/preset-merger.js";
+function E() {
   return typeof document > "u" || typeof globalThis.window > "u";
 }
-const r = n();
-function m() {
-  typeof document > "u" || !r.value || r.value.darkModeStrategy === "media" || (r.value.isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
+const r = M();
+function k(e) {
+  typeof document > "u" || !e || e.darkModeStrategy === "media" || e.mode === "light" || (e.isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
 }
-function b() {
-  const e = d()?.appContext.app;
+function F() {
+  const e = v()?.appContext.app;
   e && r.value && (e.config.globalProperties.$mazThemeState = r.value);
 }
-function w(e) {
+function I(e) {
   if (e.currentPreset && e.colorMode !== void 0) {
-    c({
+    l({
       currentPreset: e.currentPreset,
       colorMode: e.colorMode,
       mode: e.mode,
@@ -27,8 +27,8 @@ function w(e) {
     });
     return;
   }
-  const t = S(e.colorMode), o = t === "auto" ? P() === "dark" : t === "dark";
-  c({
+  const t = z(e.colorMode), o = t === "auto" ? L() : t === "dark";
+  l({
     currentPreset: e.currentPreset,
     colorMode: t,
     mode: e.mode,
@@ -37,61 +37,73 @@ function w(e) {
     darkModeStrategy: e.darkModeStrategy
   });
 }
-function c(e) {
+function l(e) {
   if (r.value = e, typeof globalThis.window < "u" && r.value.colorMode === "auto") {
     const t = globalThis.matchMedia("(prefers-color-scheme: dark)"), o = () => {
       r.value && r.value.colorMode === "auto" && (r.value.isDark = t.matches);
     };
     t.addEventListener("change", o), o();
   }
-  p(() => {
-    r.value && (m(), b());
+  P(() => {
+    r.value && (k(r.value), F());
   });
 }
-const z = a(() => r.value?.currentPreset), D = a({
+const c = a({
   get: () => r.value?.colorMode,
-  set: (e) => i(e)
-}), L = a(() => r.value?.isDark ?? !1), x = a(() => r.value?.strategy);
-async function E(e) {
+  set: (e) => n(e)
+}), d = a(() => r.value?.isDark ?? !1), m = a(() => r.value?.strategy), f = a(() => r.value?.mode), g = a(() => r.value?.darkModeStrategy), p = a(() => r.value?.currentPreset.name);
+async function U(e) {
   if (!r.value)
     return;
-  const t = typeof e == "string" ? await h(e) : e, o = "name" in t && t.name !== r.value.currentPreset.name ? t : C(r.value.currentPreset, t);
+  const t = typeof e == "string" ? await x(e) : e, o = "name" in t && t.name !== r.value.currentPreset.name ? t : D(r.value.currentPreset, t);
   if (r.value.currentPreset = o, r.value.strategy === "runtime" || r.value.strategy === "hybrid") {
-    const s = {
+    const i = {
       mode: r.value.mode,
+      darkSelectorStrategy: r.value.darkModeStrategy,
       prefix: "maz"
-    }, f = y(o, s), g = M(o, s);
-    u(f, l.CRITICAL), u(g, l.FULL);
+    }, y = b(o, i), S = w(o, i);
+    s(u.CRITICAL, y), s(u.FULL, S);
   }
 }
-function i(e) {
-  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", m(), k("maz-color-mode", e));
+function n(e) {
+  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", k(r.value), T("maz-color-mode", e));
 }
-function F() {
-  r.value && i(r.value.isDark ? "light" : "dark");
+function j() {
+  r.value && n(r.value.isDark ? "light" : "dark");
 }
-function G() {
+function Q() {
   let e;
   try {
-    if (e = v("mazThemeState", void 0), !e)
+    if (e = h("mazThemeState", void 0), !e)
       throw new Error("mazThemeState not found");
   } catch {
-    const t = d();
+    const t = v();
     t?.appContext?.app?.config?.globalProperties && (e = t.appContext.app.config.globalProperties.$mazThemeState);
   }
-  return e && (r.value ? T() && (r.value.colorMode = e.colorMode, r.value.mode = e.mode, r.value.isDark = e.isDark, r.value.currentPreset = e.currentPreset) : w(e)), r.value ? {
-    currentPreset: z,
-    colorMode: D,
-    isDark: L,
-    strategy: x,
-    updateTheme: E,
-    setColorMode: i,
-    toggleDarkMode: F
+  return e && (r.value ? E() && (r.value = {
+    ...r.value,
+    ...e
+  }) : I(e)), C(() => e?.currentPreset, (t) => {
+    r.value && t && (r.value.currentPreset = t);
+  }, {
+    once: !0
+  }), r.value ? {
+    presetName: p,
+    colorMode: c,
+    isDark: d,
+    strategy: m,
+    updateTheme: U,
+    setColorMode: n,
+    toggleDarkMode: j,
+    mode: f,
+    darkModeStrategy: g
   } : (console.error("[@maz-ui/themes] You must install the MazUi or MazUiTheme plugin before using useTheme composable"), {
-    currentPreset: n({}),
-    colorMode: n("light"),
-    isDark: a(() => !1),
-    strategy: a(() => "hybrid"),
+    presetName: p,
+    colorMode: c,
+    isDark: d,
+    strategy: m,
+    mode: f,
+    darkModeStrategy: g,
     updateTheme: () => Promise.resolve(),
     setColorMode: () => {
     },
@@ -100,6 +112,6 @@ function G() {
   });
 }
 export {
-  c as initThemeState,
-  G as useTheme
+  l as initThemeState,
+  Q as useTheme
 };

package/dist/plugin/index.js

@@ -2,7 +2,8 @@ import "vue";
 import "../utils/css-generator.js";
 import "../utils/get-color-mode.js";
 import "../utils/get-preset.js";
-import { MazUiTheme as e } from "../plugin.js";
+import "../utils/preset-merger.js";
+import { MazUiTheme as a } from "../plugin.js";
 export {
-  e as MazUiTheme
+  a as MazUiTheme
 };

package/dist/plugin.js

@@ -1,7 +1,8 @@
-import { reactive as l } from "vue";
-import { generateCriticalCSS as m, injectCSS as i, CSS_IDS as s, generateFullCSS as u } from "./utils/css-generator.js";
-import { getColorMode as S, getSystemPrefersDark as f } from "./utils/get-color-mode.js";
-import { getPreset as C } from "./utils/get-preset.js";
+import { reactive as n } from "vue";
+import { generateCriticalCSS as l, injectCSS as d, CSS_IDS as i, generateFullCSS as S } from "./utils/css-generator.js";
+import { getColorMode as u, isSystemPrefersDark as f } from "./utils/get-color-mode.js";
+import { getPreset as y } from "./utils/get-preset.js";
+import { mergePresets as C } from "./utils/preset-merger.js";
 function g(r, t) {
   typeof document > "u" || r !== "class" || (t ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
 }
@@ -9,34 +10,36 @@ function k(r, t) {
   if (typeof document > "u")
     return;
   const e = {
-    mode: t.mode
+    mode: t.mode,
+    darkSelectorStrategy: t.darkModeStrategy
   };
   if (t.injectCriticalCSS) {
-    const a = m(r, e);
-    i(a, s.CRITICAL);
+    const a = l(r, e);
+    d(i.CRITICAL, a);
   }
   if (!t.injectFullCSS)
     return;
-  const o = u(r, e);
-  t.strategy === "runtime" ? i(o, s.FULL) : t.strategy === "hybrid" && requestIdleCallback(() => {
-    i(o, s.FULL);
+  const o = S(r, e);
+  t.strategy === "runtime" ? d(i.FULL, o) : t.strategy === "hybrid" && requestIdleCallback(() => {
+    d(i.FULL, o);
   }, { timeout: 100 });
 }
-function y(r, t) {
+function M(r, t) {
   r.provide("mazThemeState", t), r.config.globalProperties.$mazThemeState = t;
 }
-const j = {
+const v = {
   async install(r, t = {}) {
     const e = {
       preset: "maz-ui",
       strategy: "runtime",
+      overrides: {},
       darkModeStrategy: "class",
-      colorMode: t.mode !== "both" ? t.mode : t.colorMode,
+      colorMode: (t.mode !== "both" ? t.mode : t.colorMode) ?? "auto",
       injectCriticalCSS: !0,
       injectFullCSS: !0,
       mode: "both",
       ...t
-    }, o = e.mode !== "both" ? e.mode : S(e.colorMode), a = o === "auto" && e.mode === "both" ? f() === "dark" : o === "dark" || e.mode === "dark", n = l({
+    }, o = e.mode !== "both" ? e.mode : u(e.colorMode), a = o === "auto" && e.mode === "both" ? f() : o === "dark" || e.mode === "dark", s = n({
       // @ts-expect-error - empty currentPreset to avoid error
       currentPreset: {},
       mode: e.mode,
@@ -45,21 +48,11 @@ const j = {
       strategy: e.strategy,
       darkModeStrategy: e.darkModeStrategy
     });
-    g(e.darkModeStrategy, a), y(r, n);
-    const d = await C(e.preset), c = e.overrides ? {
-      ...d,
-      foundation: {
-        ...d.foundation,
-        ...e.overrides.foundation
-      },
-      colors: {
-        light: { ...d.colors.light, ...e.overrides.colors?.light },
-        dark: { ...d.colors.dark, ...e.overrides.colors?.dark }
-      }
-    } : d;
-    n.currentPreset = c, e.strategy !== "buildtime" && k(c, e);
+    g(e.darkModeStrategy, a), M(r, s);
+    const c = await y(e.preset), m = Object.keys(e.overrides).length > 0 ? C(c, e.overrides) : c;
+    s.currentPreset = m, e.strategy !== "buildtime" && k(m, e);
   }
 };
 export {
-  j as MazUiTheme
+  v as MazUiTheme
 };

package/dist/presets/pristine.js

@@ -12,8 +12,8 @@ const r = {
       foreground: "0 0% 10%",
       primary: "220 10% 15%",
       "primary-foreground": "0 0% 100%",
-      contrast: "220 10% 92%",
-      "contrast-foreground": "0 0% 10%",
+      contrast: "0 0% 15%",
+      "contrast-foreground": "0 0% 95%",
       secondary: "220 10% 92%",
       "secondary-foreground": "0 0% 10%",
       muted: "0 0% 60%",
@@ -36,8 +36,8 @@ const r = {
       foreground: "0 0% 95%",
       primary: "0 0% 95%",
       "primary-foreground": "0 0% 10%",
-      contrast: "0 0% 15%",
-      "contrast-foreground": "0 0% 95%",
+      contrast: "220 10% 92%",
+      "contrast-foreground": "0 0% 10%",
       secondary: "0 0% 18%",
       "secondary-foreground": "0 0% 95%",
       muted: "0 0% 60%",

package/dist/types/composables/useTheme.d.ts

@@ -1,137 +1,15 @@
-import { ColorMode, Strategy, ThemePreset, ThemePresetName, ThemePresetOverrides, ThemeState } from '../types';
+import { ColorMode, DarkModeStrategy, Strategy, ThemeMode, ThemePreset, ThemePresetName, ThemePresetOverrides, ThemeState } from '../types';
 export declare function initThemeState(initialState: ThemeState): void;
 declare function updateTheme(preset: ThemePreset | ThemePresetOverrides | ThemePresetName): Promise<void>;
 declare function setColorMode(colorMode: ColorMode): void;
 declare function toggleDarkMode(): void;
 export declare function useTheme(): {
-    currentPreset: import('vue').Ref<{
-        name: string;
-        colors: {
-            light: {
-                background: import('..').HSL;
-                foreground: import('..').HSL;
-                primary: import('..').HSL;
-                'primary-foreground': import('..').HSL;
-                secondary: import('..').HSL;
-                'secondary-foreground': import('..').HSL;
-                accent: import('..').HSL;
-                'accent-foreground': import('..').HSL;
-                info: import('..').HSL;
-                'info-foreground': import('..').HSL;
-                contrast: import('..').HSL;
-                'contrast-foreground': import('..').HSL;
-                destructive: import('..').HSL;
-                'destructive-foreground': import('..').HSL;
-                success: import('..').HSL;
-                'success-foreground': import('..').HSL;
-                warning: import('..').HSL;
-                'warning-foreground': import('..').HSL;
-                overlay: import('..').HSL;
-                muted: import('..').HSL;
-                border: import('..').HSL;
-                shadow: import('..').HSL;
-            };
-            dark: {
-                background: import('..').HSL;
-                foreground: import('..').HSL;
-                primary: import('..').HSL;
-                'primary-foreground': import('..').HSL;
-                secondary: import('..').HSL;
-                'secondary-foreground': import('..').HSL;
-                accent: import('..').HSL;
-                'accent-foreground': import('..').HSL;
-                info: import('..').HSL;
-                'info-foreground': import('..').HSL;
-                contrast: import('..').HSL;
-                'contrast-foreground': import('..').HSL;
-                destructive: import('..').HSL;
-                'destructive-foreground': import('..').HSL;
-                success: import('..').HSL;
-                'success-foreground': import('..').HSL;
-                warning: import('..').HSL;
-                'warning-foreground': import('..').HSL;
-                overlay: import('..').HSL;
-                muted: import('..').HSL;
-                border: import('..').HSL;
-                shadow: import('..').HSL;
-            };
-        };
-        foundation: {
-            'base-font-size'?: import('..').SizeUnit | undefined;
-            radius: import('..').SizeUnit;
-            'border-width': import('..').SizeUnit;
-            'font-family'?: string | undefined;
-        };
-    }, ThemePreset | {
-        name: string;
-        colors: {
-            light: {
-                background: import('..').HSL;
-                foreground: import('..').HSL;
-                primary: import('..').HSL;
-                'primary-foreground': import('..').HSL;
-                secondary: import('..').HSL;
-                'secondary-foreground': import('..').HSL;
-                accent: import('..').HSL;
-                'accent-foreground': import('..').HSL;
-                info: import('..').HSL;
-                'info-foreground': import('..').HSL;
-                contrast: import('..').HSL;
-                'contrast-foreground': import('..').HSL;
-                destructive: import('..').HSL;
-                'destructive-foreground': import('..').HSL;
-                success: import('..').HSL;
-                'success-foreground': import('..').HSL;
-                warning: import('..').HSL;
-                'warning-foreground': import('..').HSL;
-                overlay: import('..').HSL;
-                muted: import('..').HSL;
-                border: import('..').HSL;
-                shadow: import('..').HSL;
-            };
-            dark: {
-                background: import('..').HSL;
-                foreground: import('..').HSL;
-                primary: import('..').HSL;
-                'primary-foreground': import('..').HSL;
-                secondary: import('..').HSL;
-                'secondary-foreground': import('..').HSL;
-                accent: import('..').HSL;
-                'accent-foreground': import('..').HSL;
-                info: import('..').HSL;
-                'info-foreground': import('..').HSL;
-                contrast: import('..').HSL;
-                'contrast-foreground': import('..').HSL;
-                destructive: import('..').HSL;
-                'destructive-foreground': import('..').HSL;
-                success: import('..').HSL;
-                'success-foreground': import('..').HSL;
-                warning: import('..').HSL;
-                'warning-foreground': import('..').HSL;
-                overlay: import('..').HSL;
-                muted: import('..').HSL;
-                border: import('..').HSL;
-                shadow: import('..').HSL;
-            };
-        };
-        foundation: {
-            'base-font-size'?: import('..').SizeUnit | undefined;
-            radius: import('..').SizeUnit;
-            'border-width': import('..').SizeUnit;
-            'font-family'?: string | undefined;
-        };
-    }>;
-    colorMode: import('vue').Ref<ColorMode, ColorMode>;
-    isDark: import('vue').ComputedRef<boolean>;
-    strategy: import('vue').ComputedRef<Strategy>;
-    updateTheme: typeof updateTheme;
-    setColorMode: typeof setColorMode;
-    toggleDarkMode: typeof toggleDarkMode;
-} | {
-    currentPreset: import('vue').ComputedRef<ThemePreset>;
+    presetName: import('vue').ComputedRef<string>;
     colorMode: import('vue').WritableComputedRef<ColorMode, ColorMode>;
     isDark: import('vue').ComputedRef<boolean>;
     strategy: import('vue').ComputedRef<Strategy>;
+    mode: import('vue').ComputedRef<ThemeMode>;
+    darkModeStrategy: import('vue').ComputedRef<DarkModeStrategy>;
     updateTheme: typeof updateTheme;
     setColorMode: typeof setColorMode;
     toggleDarkMode: typeof toggleDarkMode;

package/dist/types/composables/useTheme.d.ts.map

@@ -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;AA2DnH,wBAAgB,cAAc,CAAC,YAAY,EAAE,UAAU,QAsBtD;AAYD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqCwB,OAAO,WAAW;kBAChC,OAAO,YAAY;oBACjB,OAAO,cAAc;;;;;;;;;EAaxD"}
+{"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;AA4DhJ,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;;;;;;;iBA+CwB,OAAO,WAAW;kBAChC,OAAO,YAAY;oBACjB,OAAO,cAAc;EAexD"}

package/dist/types/plugin.d.ts

@@ -31,7 +31,7 @@ export interface MazUiThemeOptions extends Omit<ThemeConfig, 'prefix'> {
 export declare const MazUiTheme: {
     install(app: App, options?: MazUiThemeOptions): Promise<void>;
 };
-declare module '@vue/runtime-core' {
+declare module 'vue' {
     interface ComponentCustomProperties {
         /**
          * Maz theme plugin options

package/dist/types/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,KAAK,EAAoB,WAAW,EAAe,UAAU,EAAE,MAAM,SAAS,CAAA;AAWrF,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;iBACF,GAAG,YAAW,iBAAiB;CAwDnD,CAAA;AAED,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAU,yBAAyB;QACjC;;;;;;;;;;;;;;WAcG;QACH,cAAc,EAAE,UAAU,CAAA;KAC3B;CACF"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,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;iBACF,GAAG,YAAW,iBAAiB;CA+CnD,CAAA;AAED,OAAO,QAAQ,KAAK,CAAC;IACnB,UAAU,yBAAyB;QACjC;;;;;;;;;;;;;;WAcG;QACH,cAAc,EAAE,UAAU,CAAA;KAC3B;CACF"}

package/dist/types/utils/css-generator.d.ts

@@ -5,9 +5,9 @@ export interface CriticalCSSOptions {
     /** Critical foundation variables to include */
     criticalFoundation?: (keyof ThemeFoundation)[];
     /** Theme mode to generate */
-    mode?: ThemeMode;
+    mode: ThemeMode;
     /** Dark mode selector: 'class' (.dark) | 'media' (@media) */
-    darkSelectorStrategy?: DarkModeStrategy;
+    darkSelectorStrategy: DarkModeStrategy;
     /** CSS variables prefix */
     prefix?: string;
 }
@@ -15,9 +15,9 @@ export interface FullCSSOptions {
     /** Critical variables to exclude (to avoid duplication) */
     excludeCritical?: (keyof ThemeColors | keyof ThemeFoundation)[];
     /** Theme mode to generate */
-    mode?: ThemeMode;
+    mode: ThemeMode;
     /** Dark mode selector: 'class' (.dark) | 'media' (@media) */
-    darkSelectorStrategy?: DarkModeStrategy;
+    darkSelectorStrategy: DarkModeStrategy;
     /** CSS variables prefix */
     prefix?: string;
     /** Include color scales (50-900) */
@@ -40,7 +40,7 @@ export declare enum CSS_IDS {
 /**
  * Injects CSS into the DOM
  */
-export declare function injectCSS(css: string, id: CSS_IDS): void;
+export declare function injectCSS(id: CSS_IDS, css: string): void;
 /**
  * Supprime le CSS du DOM
  */

package/dist/types/utils/css-generator.d.ts.map

@@ -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,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAOtG,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,CAAC,EAAE,SAAS,CAAA;IAChB,6DAA6D;IAC7D,oBAAoB,CAAC,EAAE,gBAAgB,CAAA;IACvC,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,CAAC,EAAE,SAAS,CAAA;IAChB,6DAA6D;IAC7D,oBAAoB,CAAC,EAAE,gBAAgB,CAAA;IACvC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAoCD;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAsCR;AAMD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,cAAmB,GAC3B,MAAM,CA0CR;AA+ID,oBAAY,OAAO;IACjB,IAAI,mBAAmB;IACvB,QAAQ,uBAAuB;CAChC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,CAaxD;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAQ3C"}
+{"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;AAOtG,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;AAoCD;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,kBAGR,GACA,MAAM,CAwCR;AAMD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,cAGR,GACA,MAAM,CA4CR;AA+ID,oBAAY,OAAO;IACjB,IAAI,mBAAmB;IACvB,QAAQ,uBAAuB;CAChC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAaxD;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAQ3C"}

package/dist/types/utils/get-color-mode.d.ts

@@ -1,4 +1,4 @@
 import { ColorMode } from '../types';
 export declare function getColorMode(colorMode?: ColorMode): ColorMode;
-export declare function getSystemPrefersDark(): "light" | "dark";
+export declare function isSystemPrefersDark(): boolean;
 //# sourceMappingURL=get-color-mode.d.ts.map

package/dist/types/utils/get-color-mode.d.ts.map

@@ -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,oBAAoB,qBAInC"}
+{"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"}

package/dist/utils/css-generator.js

@@ -26,67 +26,89 @@ const h = [
   "font-family",
   "base-font-size",
   "border-width"
-], y = ["primary", "secondary", "accent", "destructive", "success", "warning", "info", "contrast", "background", "foreground", "border", "muted", "overlay", "shadow"];
-function j(e, o = {}) {
+], S = ["primary", "secondary", "accent", "destructive", "success", "warning", "info", "contrast", "background", "foreground", "border", "muted", "overlay", "shadow"];
+function j(e, o = {
+  mode: "both",
+  darkSelectorStrategy: "class"
+}) {
   const {
     criticalColors: r = h,
     criticalFoundation: c = C,
-    mode: n = "both",
-    darkSelectorStrategy: a = "class",
+    mode: t,
+    darkSelectorStrategy: s,
     prefix: i = "maz"
-  } = o, d = m(e.colors.light, r), s = m(e.colors.dark, r), l = S(e.foundation, c);
-  let t = `@layer maz-ui-theme {
+  } = o, l = y(e.foundation, c);
+  let n = `@layer maz-ui-theme {
 `;
-  return (n === "light" || n === "both") && (t += f({
-    selector: ":root",
-    colors: d,
-    foundation: l,
-    prefix: i
-  })), (n === "dark" || n === "both") && (t += f({
-    selector: a === "media" ? ":root" : ".dark",
-    mediaQuery: a === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
-    colors: s,
-    foundation: l,
-    prefix: i
-  })), t += `}
-`, t;
+  if (t === "light" || t === "both") {
+    const a = m(e.colors.light, r);
+    n += f({
+      selector: ":root",
+      colors: a,
+      foundation: l,
+      prefix: i
+    });
+  }
+  if (t === "dark" || t === "both") {
+    const a = m(e.colors.dark, r);
+    n += f({
+      selector: s === "media" ? ":root" : ".dark",
+      mediaQuery: s === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
+      colors: a,
+      foundation: l,
+      prefix: i
+    });
+  }
+  return n += `}
+`, n;
 }
-function p(e, o = {}) {
+function p(e, o = {
+  mode: "both",
+  darkSelectorStrategy: "class"
+}) {
   const {
     excludeCritical: r = h,
-    mode: c = "both",
-    darkSelectorStrategy: n = "class",
-    prefix: a = "maz",
+    mode: c,
+    darkSelectorStrategy: t,
+    prefix: s = "maz",
     includeColorScales: i = !0
-  } = o, d = g(e.colors.light, r), s = g(e.colors.dark, r), l = k(e.foundation, C);
-  let t = `@layer maz-ui-theme {
+  } = o, l = k(e.foundation, C);
+  let n = `@layer maz-ui-theme {
 `;
-  return (c === "light" || c === "both") && (t += f({
-    selector: ":root",
-    colors: d,
-    foundation: l,
-    prefix: a,
-    includeScales: i,
-    preset: e
-  })), (c === "dark" || c === "both") && (t += f({
-    selector: n === "media" ? ":root" : ".dark",
-    mediaQuery: n === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
-    colors: s,
-    foundation: c === "dark" ? l : void 0,
-    // Appearance only if dark mode only
-    prefix: a,
-    includeScales: i,
-    preset: e,
-    isDark: !0
-  })), t += `}
-`, t;
+  if (c === "light" || c === "both") {
+    const a = g(e.colors.light, r);
+    n += f({
+      selector: ":root",
+      colors: a,
+      foundation: l,
+      prefix: s,
+      includeScales: i,
+      preset: e
+    });
+  }
+  if (c === "dark" || c === "both") {
+    const a = g(e.colors.dark, r);
+    n += f({
+      selector: t === "media" ? ":root" : ".dark",
+      mediaQuery: t === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
+      colors: a,
+      foundation: c === "dark" ? l : void 0,
+      // Appearance only if dark mode only
+      prefix: s,
+      includeScales: i,
+      preset: e,
+      isDark: !0
+    });
+  }
+  return n += `}
+`, n;
 }
 function m(e, o) {
   return Object.fromEntries(
     o.filter((r) => e[r]).map((r) => [r, e[r]])
   );
 }
-function S(e, o) {
+function y(e, o) {
   return e ? Object.fromEntries(
     o.filter((r) => e[r]).map((r) => [r, e[r]])
   ) : {};
@@ -106,42 +128,42 @@ function f({
   mediaQuery: o,
   colors: r,
   foundation: c,
-  prefix: n,
-  includeScales: a = !1,
+  prefix: t,
+  includeScales: s = !1,
   preset: i,
-  isDark: d = !1
+  isDark: l = !1
 }) {
-  const s = [];
-  if (r && Object.entries(r).forEach(([t, u]) => {
-    u && s.push(`  --${n}-${t}: ${u};`);
-  }), c && Object.entries(c).forEach(([t, u]) => {
-    u && s.push(`  --${n}-${t}: ${u};`);
-  }), a && i) {
-    const t = d ? i.colors.dark : i.colors.light, u = E(t, n);
-    s.push(...u);
+  const n = [];
+  if (r && Object.entries(r).forEach(([u, d]) => {
+    d && n.push(`  --${t}-${u}: ${d};`);
+  }), c && Object.entries(c).forEach(([u, d]) => {
+    d && n.push(`  --${t}-${u}: ${d};`);
+  }), s && i) {
+    const u = l ? i.colors.dark : i.colors.light, d = E(u, t);
+    n.push(...d);
   }
-  const l = s.join(`
+  const a = n.join(`
 `);
   return o ? `
   ${o} {
     ${e} {
-${l.replace(/^/gm, "  ")}
+${a.replace(/^/gm, "  ")}
     }
   }
 ` : `
   ${e} {
-${l}
+${a}
   }
 `;
 }
 function E(e, o) {
   const r = [];
-  return y.forEach((c) => {
-    const n = e[c];
-    if (n) {
-      const a = b(n);
-      Object.entries(a).forEach(([i, d]) => {
-        r.push(`  --${o}-${c}-${i}: ${d};`);
+  return S.forEach((c) => {
+    const t = e[c];
+    if (t) {
+      const s = b(t);
+      Object.entries(s).forEach(([i, l]) => {
+        r.push(`  --${o}-${c}-${i}: ${l};`);
       });
     }
   }), r;
@@ -150,8 +172,8 @@ var $ = /* @__PURE__ */ ((e) => (e.FULL = "maz-theme-full", e.CRITICAL = "maz-th
 function v(e, o) {
   if (typeof document > "u")
     return;
-  let r = document.getElementById(o);
-  r || (r = document.createElement("style"), r.id = o, document.head.appendChild(r)), r.textContent = e;
+  let r = document.getElementById(e);
+  r || (r = document.createElement("style"), r.id = e, document.head.appendChild(r)), r.textContent = o;
 }
 function F(e) {
   if (typeof document > "u")

package/dist/utils/get-color-mode.js

@@ -1,14 +1,14 @@
-import { getCookie as t } from "./cookie-storage.js";
-function a(e) {
+import { getCookie as r } from "./cookie-storage.js";
+function o(e) {
   if (e && ["light", "dark"].includes(e))
     return e;
-  const r = t("maz-color-mode");
-  return r && ["light", "dark"].includes(r) ? r : i();
+  const t = r("maz-color-mode");
+  return t && ["light", "dark"].includes(t) ? t : "auto";
 }
-function i() {
-  return typeof globalThis.window < "u" && typeof globalThis.matchMedia == "function" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+function n() {
+  return typeof globalThis.window < "u" && typeof globalThis.matchMedia == "function" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches;
 }
 export {
-  a as getColorMode,
-  i as getSystemPrefersDark
+  o as getColorMode,
+  n as isSystemPrefersDark
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/themes",
   "type": "module",
-  "version": "4.0.0-beta.19",
+  "version": "4.0.0-beta.24",
   "description": "Theme system for Maz-UI with TypeScript support and CSS variables",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -100,5 +100,5 @@
   "lint-staged": {
     "*.{js,ts,vue,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
-  "gitHead": "80c4301de259a3f8d432c8da0994da8d51c5b564"
+  "gitHead": "9ea5ccdfb15f18c4e102ef5d2cfba29bd304d38e"
 }