@maz-ui/themes 4.1.7-beta.0 → 4.1.7-beta.5

package/README.md

@@ -23,14 +23,15 @@ npm install @maz-ui/themes
 ### 1. Plugin installation
 
 ```typescript
-import { MazUiTheme } from '@maz-ui/themes'
 // main.ts
+import { MazUiTheme } from '@maz-ui/themes/plugin'
+import { mazUi } from '@maz-ui/themes/presets/mazUi'
 import { createApp } from 'vue'
 
 const app = createApp(App)
 
 app.use(MazUiTheme, {
-  preset: 'maz-ui',
+  preset: mazUi,
   strategy: 'hybrid',
   darkModeStrategy: 'class'
 })
@@ -40,9 +41,9 @@ app.use(MazUiTheme, {
 
 ```vue
 <script setup>
-import { useMazTheme } from '@maz-ui/themes'
+import { useTheme } from '@maz-ui/themes'
 
-const { toggleDarkMode, isDark } = useMazTheme()
+const { toggleDarkMode, isDark } = useTheme()
 </script>
 
 <template>
@@ -59,28 +60,28 @@ const { toggleDarkMode, isDark } = useMazTheme()
 
 ## Available presets
 
-### Default (Shadcn-like)
+### Default
 
 ```typescript
-import { mazUi } from '@maz-ui/themes'
+import { mazUi } from '@maz-ui/themes/presets/mazUi'
 ```
 
-### Dark
+### Pristine
 
 ```typescript
-import { dark } from '@maz-ui/themes'
+import { pristine } from '@maz-ui/themes/presets/pristine'
 ```
 
 ### Ocean
 
 ```typescript
-import { ocean } from '@maz-ui/themes'
+import { ocean } from '@maz-ui/themes/presets/ocean'
 ```
 
 ### Obsidian
 
 ```typescript
-import { obsidian } from '@maz-ui/themes'
+import { obsidian } from '@maz-ui/themes/presets/obsidian'
 ```
 
 ## Creating custom presets
@@ -110,15 +111,18 @@ const myPreset = definePreset({
 ## Composable API
 
 ```typescript
+import { useTheme } from '@maz-ui/themes'
+
 const {
-  currentPreset, // Ref<ThemePreset>
+  preset, // ComputedRef<ThemePreset>
+  presetName, // ComputedRef<string>
   colorMode, // Ref<'light' | 'dark' | 'auto'>
-  isDark, // Ref<boolean>
-  strategy, // Ref<'runtime' | 'build' | 'hybrid'>
+  isDark, // ComputedRef<boolean>
+  strategy, // ComputedRef<'runtime' | 'build' | 'hybrid'>
   updateTheme, // (preset: ThemePreset | ThemePresetName | ThemePresetOverrides) => void
   setColorMode, // (mode: 'light' | 'dark' | 'auto') => void
-  toggleDarkMode // () => void
-} = useMazTheme()
+  toggleDarkMode, // () => void
+} = useTheme()
 ```
 
 ## Strategies

package/dist/build/index.js

@@ -1,56 +1,58 @@
-import { generateCriticalCSS as o, generateFullCSS as d } from "../utils/css-generator.js";
-function s(t) {
+import { generateCSS } from "../utils/css-generator.js";
+function buildThemeCSS(options) {
   const {
-    preset: e,
-    mode: a = "both",
-    darkSelector: l = "class",
-    prefix: r = "maz",
-    criticalOnly: i = !1
-  } = t, c = {
-    mode: a,
-    darkSelectorStrategy: l,
-    prefix: r
-  };
-  if (i)
-    return o(e, c);
-  const n = o(e, c), m = d(e, c);
-  return `${n}
-${m}`;
+    preset,
+    mode = "both",
+    darkSelector = "class",
+    prefix = "maz",
+    darkClass = "dark",
+    criticalOnly = !1
+  } = options, cssOptions = {
+    mode,
+    darkSelectorStrategy: darkSelector,
+    prefix,
+    darkClass
+  }, criticalCSS = generateCSS(preset, { ...cssOptions, onlyCritical: !0 });
+  if (criticalOnly)
+    return criticalCSS;
+  const fullCSS = generateCSS(preset, cssOptions);
+  return `${criticalCSS}
+${fullCSS}`;
 }
-function u(t, e = {}) {
+function generateThemeBundle(presets, options = {}) {
   const {
-    mode: a = "both",
-    darkSelector: l = "class",
-    prefix: r = "maz",
-    criticalOnly: i = !1
-  } = e;
-  return t.reduce((c, n) => (c[n.name] = s({
-    preset: n,
-    mode: a,
-    darkSelector: l,
-    prefix: r,
-    criticalOnly: i
-  }), c), {});
+    mode = "both",
+    darkSelector = "class",
+    prefix = "maz",
+    criticalOnly = !1
+  } = options;
+  return presets.reduce((bundle, preset) => (bundle[preset.name] = buildThemeCSS({
+    preset,
+    mode,
+    darkSelector,
+    prefix,
+    criticalOnly
+  }), bundle), {});
 }
-function f(t, e = {}) {
-  const { id: a = "maz-theme", media: l } = e;
-  let r = `<style id="${a}"`;
-  return l && (r += ` media="${l}"`), r += `>
-${t}
-</style>`, r;
+function createThemeStylesheet(css, options = {}) {
+  const { id = "maz-theme", media } = options;
+  let styleTag = `<style id="${id}"`;
+  return media && (styleTag += ` media="${media}"`), styleTag += `>
+${css}
+</style>`, styleTag;
 }
-function h(t, e = {}) {
-  const { prefix: a = "maz", darkSelector: l = "class" } = e, r = { prefix: a, darkSelectorStrategy: l };
+function buildSeparateThemeFiles(preset, options = {}) {
+  const { prefix = "maz", darkSelector = "class", darkClass = "dark" } = options, baseOptions = { prefix, darkSelectorStrategy: darkSelector, darkClass };
   return {
-    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 })
+    critical: generateCSS(preset, { ...baseOptions, mode: "both", onlyCritical: !0 }),
+    full: generateCSS(preset, { ...baseOptions, mode: "both" }),
+    lightOnly: buildThemeCSS({ preset, mode: "light", ...options }),
+    darkOnly: buildThemeCSS({ preset, mode: "dark", ...options })
   };
 }
 export {
-  h as buildSeparateThemeFiles,
-  s as buildThemeCSS,
-  f as createThemeStylesheet,
-  u as generateThemeBundle
+  buildSeparateThemeFiles,
+  buildThemeCSS,
+  createThemeStylesheet,
+  generateThemeBundle
 };

package/dist/chunks/isServer.BAlEcRRr.js

@@ -0,0 +1,6 @@
+function isServer() {
+  return typeof document > "u" || typeof globalThis.window > "u";
+}
+export {
+  isServer as i
+};

package/dist/composables/index.js

@@ -1,11 +1,10 @@
-import { initThemeState as T, useTheme as a } from "./useTheme.js";
+import "../chunks/isServer.BAlEcRRr.js";
 import "vue";
 import "../utils/cookie-storage.js";
 import "../utils/css-generator.js";
-import "../utils/get-color-mode.js";
 import "../utils/get-preset.js";
 import "../utils/preset-merger.js";
+import { useTheme } from "./useTheme.js";
 export {
-  T as initThemeState,
-  a as useTheme
+  useTheme
 };

package/dist/composables/useTheme.js

@@ -1,165 +1,107 @@
-import { ref as f, onMounted as k, computed as s, toValue as w, watch as y, watchEffect as T, inject as C, getCurrentInstance as M } from "vue";
-import { setCookie as z } from "../utils/cookie-storage.js";
-import { generateCriticalCSS as E, generateFullCSS as L, injectCSS as p, CSS_IDS as v } from "../utils/css-generator.js";
-import { getColorMode as x, isSystemPrefersDark as I } from "../utils/get-color-mode.js";
-import { getPreset as O } from "../utils/get-preset.js";
-import { mergePresets as $ } from "../utils/preset-merger.js";
-function D() {
-  return typeof document > "u" || typeof globalThis.window > "u";
-}
-function F() {
-  return typeof document < "u";
-}
-function R(e) {
-  return !!e;
-}
-function U(e, o, r = {}) {
-  const {
-    internalWindow: u = F() ? globalThis : void 0,
-    ...c
-  } = r;
-  let n;
-  const d = f(!1);
-  k(() => {
-    d.value = (u && "MutationObserver" in u) ?? !1;
-  });
-  const m = () => {
-    n && (n.disconnect(), n = void 0);
-  }, b = s(() => {
-    const a = w(e);
-    let i;
-    return a && "$el" in a ? i = a.$el : a && (i = a), new Set([i].filter(R));
-  }), P = y(
-    b,
-    (a) => {
-      m(), d.value && a.size && (n = new MutationObserver(o), a.forEach((i) => n.observe(i, c)));
-    },
-    { immediate: !0, flush: "post" }
-  );
-  return {
-    isSupported: d,
-    stop: () => {
-      P(), m();
-    },
-    takeRecords: () => n?.takeRecords()
-  };
-}
-const t = f();
-function S(e) {
-  typeof document > "u" || !e || e.darkModeStrategy === "media" || e.mode === "light" || (e.isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
-}
-function j() {
-  const e = M()?.appContext.app;
-  e && t.value && (e.config.globalProperties.$mazThemeState = t.value);
-}
-function N(e) {
-  if (e.currentPreset && e.colorMode !== void 0) {
-    g({
-      currentPreset: e.currentPreset,
-      colorMode: e.colorMode,
-      mode: e.mode,
-      isDark: e.isDark,
-      strategy: e.strategy,
-      darkModeStrategy: e.darkModeStrategy
-    });
+import { i as isServer } from "../chunks/isServer.BAlEcRRr.js";
+import { ref, computed, inject, getCurrentInstance } from "vue";
+import { setCookie } from "../utils/cookie-storage.js";
+import { generateCSS, injectCSS, CSS_ID } from "../utils/css-generator.js";
+import { getPreset } from "../utils/get-preset.js";
+import { mergePresets } from "../utils/preset-merger.js";
+const themeState = ref(), colorMode = computed({
+  get: () => themeState.value?.colorMode,
+  set: (mode2) => setColorMode(mode2)
+}), isDark = computed(() => themeState.value?.isDark || !1), strategy = computed(() => themeState.value?.strategy), mode = computed(() => themeState.value?.mode), darkModeStrategy = computed(() => themeState.value?.darkModeStrategy), preset = computed(() => themeState.value?.preset), presetName = computed(() => preset.value?.name);
+async function updateTheme(preset2) {
+  if (!themeState.value)
     return;
-  }
-  const o = x(e.colorMode), r = o === "auto" ? I() : o === "dark";
-  g({
-    currentPreset: e.currentPreset,
-    colorMode: o,
-    mode: e.mode,
-    isDark: r,
-    strategy: e.strategy,
-    darkModeStrategy: e.darkModeStrategy
-  });
-}
-function g(e) {
-  if (t.value = e, typeof globalThis.window < "u" && t.value.colorMode === "auto") {
-    const o = globalThis.matchMedia("(prefers-color-scheme: dark)"), r = () => {
-      t.value && t.value.colorMode === "auto" && (t.value.isDark = o.matches);
-    };
-    o.addEventListener("change", r), r();
-  }
-  T(() => {
-    t.value && (S(t.value), j());
-  });
-}
-const W = s({
-  get: () => t.value?.colorMode,
-  set: (e) => l(e)
-}), _ = s(() => t.value?.isDark ?? !1), A = s(() => t.value?.strategy), G = s(() => t.value?.mode), Q = s(() => t.value?.darkModeStrategy), h = s(() => t.value?.currentPreset), V = s(() => h.value?.name);
-async function Y(e) {
-  if (!t.value)
-    return;
-  const o = typeof e == "string" ? await O(e) : e;
-  if (!o || !t.value.currentPreset) {
+  const _preset = typeof preset2 == "string" ? await getPreset(preset2) : preset2;
+  if (!_preset || !themeState.value.preset) {
     console.error("[@maz-ui/themes] No preset found - If you are using the buildtime strategy, you must provide a complete preset");
     return;
   }
-  const r = "name" in o && o.name !== t.value.currentPreset.name ? o : $(t.value.currentPreset, o);
-  if (t.value.currentPreset = r, t.value.strategy === "runtime" || t.value.strategy === "hybrid") {
-    const u = {
-      mode: t.value.mode,
-      darkSelectorStrategy: t.value.darkModeStrategy,
-      prefix: "maz"
-    }, c = E(r, u), n = L(r, u);
-    p(v.CRITICAL, c), p(v.FULL, n);
+  const newPreset = "name" in _preset && _preset.name !== themeState.value.preset.name ? _preset : mergePresets(themeState.value.preset, _preset);
+  if (themeState.value.preset = newPreset, themeState.value.strategy === "runtime" || themeState.value.strategy === "hybrid") {
+    const cssOptions = {
+      mode: themeState.value.mode,
+      darkSelectorStrategy: themeState.value.darkModeStrategy,
+      prefix: "maz",
+      darkClass: themeState.value.darkClass
+    }, fullCSS = generateCSS(newPreset, cssOptions);
+    injectCSS(CSS_ID, fullCSS);
   }
 }
-function l(e, o = !0) {
-  t.value && (t.value.colorMode = e, e === "auto" ? t.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : t.value.isDark = e === "dark", o && S(t.value), z("maz-color-mode", e));
+function setColorMode(colorMode2) {
+  themeState.value && (themeState.value.colorMode = colorMode2, setCookie("maz-color-mode", colorMode2));
 }
-function q() {
-  t.value && l(t.value.isDark ? "light" : "dark");
+function toggleDarkMode() {
+  setColorMode(isDark.value ? "light" : "dark");
 }
-function oe() {
-  const e = f();
-  k(() => {
-    e.value = document.documentElement;
-  }), U(
-    e,
-    () => {
-      if (D() || !t.value)
-        return;
-      const r = document.documentElement.classList.contains("dark") ? "dark" : "light";
-      t.value.colorMode !== r && l(r, !1);
-    },
-    {
-      attributes: !0
-    }
-  );
-  let o;
+function setThemeStateFromGlobalProperties() {
+  themeState.value = void 0;
   try {
-    if (o = C("mazThemeState", void 0), !o)
+    const injectedState = inject("mazThemeState", void 0);
+    if (themeState.value = injectedState?.value, !themeState.value)
       throw new Error("mazThemeState not found");
   } catch {
-    const r = M();
-    r?.appContext?.app?.config?.globalProperties && (o = r.appContext.app.config.globalProperties.$mazThemeState);
+    const instance = getCurrentInstance();
+    instance?.appContext?.app?.config?.globalProperties && (themeState.value = instance.appContext.app.config.globalProperties.$mazThemeState.value);
   }
-  if (o && (t.value ? (typeof document > "u" || typeof globalThis.window > "u") && (t.value = {
-    ...t.value,
-    ...o
-  }) : N(o)), y(() => o?.currentPreset, (r) => {
-    t.value && r && (t.value.currentPreset = r);
-  }, {
-    once: !0
-  }), !t.value)
+}
+function useTheme() {
+  if (isServer() && (themeState.value = void 0), themeState.value || setThemeStateFromGlobalProperties(), !themeState.value)
     throw new Error("[@maz-ui/themes] You must install the MazUi or MazUiTheme plugin before using useTheme composable");
   return {
-    presetName: V,
-    colorMode: W,
-    isDark: _,
-    strategy: A,
-    updateTheme: Y,
-    setColorMode: l,
-    toggleDarkMode: q,
-    mode: G,
-    darkModeStrategy: Q,
-    currentPreset: h
+    /**
+     * Current theme preset
+     */
+    preset,
+    /**
+     * Current theme name
+     */
+    presetName,
+    /**
+     * Current color mode
+     * @description The color mode - Can be 'auto', 'dark' or 'light'
+     */
+    colorMode,
+    /**
+     * Whether the current color mode is dark
+     */
+    isDark,
+    /**
+     * Strategy used to apply the theme
+     */
+    strategy,
+    /**
+     * Update the theme
+     * @param preset The new theme preset
+     * @description Update the theme with a new preset or override some tokens
+     */
+    updateTheme,
+    /**
+     * Set the color mode
+     * @description Set the color mode - Can be 'auto', 'dark' or 'light'
+     * @param colorMode The new color mode
+     */
+    setColorMode,
+    /**
+     * Toggle the dark mode
+     * @description Toggle the dark mode
+     */
+    toggleDarkMode,
+    /**
+     * Mode
+     * @description Supported themes - Can be 'both', 'light' or 'dark'
+     */
+    mode,
+    /**
+     * Dark mode strategy
+     * @description Strategy used to apply the dark mode - Can be 'class' or 'media'
+     */
+    darkModeStrategy,
+    /**
+     * @deprecated use `preset` instead
+     */
+    currentPreset: preset
   };
 }
 export {
-  g as initThemeState,
-  oe as useTheme
+  useTheme
 };

package/dist/define-preset.js

@@ -1,11 +1,11 @@
-import { mergePresets as r } from "./utils/preset-merger.js";
-import { getPreset as f } from "./utils/get-preset.js";
-function o({
-  base: e = "maz-ui",
-  overrides: t = {}
+import { mergePresets } from "./utils/preset-merger.js";
+import { getPreset } from "./utils/get-preset.js";
+function definePreset({
+  base = "maz-ui",
+  overrides = {}
 }) {
-  return typeof e == "string" ? f(e).then((n) => r(n, t)) : r(e, t);
+  return typeof base == "string" ? getPreset(base).then((basePreset) => mergePresets(basePreset, overrides)) : mergePresets(base, overrides);
 }
 export {
-  o as definePreset
+  definePreset
 };

package/dist/index.js

@@ -1,37 +1,35 @@
-import { buildSeparateThemeFiles as o, buildThemeCSS as t, createThemeStylesheet as m, generateThemeBundle as S } from "./build/index.js";
-import { initThemeState as i, useTheme as p } from "./composables/useTheme.js";
-import { definePreset as n } from "./define-preset.js";
-import { MazUiTheme as l } from "./plugin.js";
-import { adjustColorLightness as C, formatHSL as h, generateColorScale as g, getContrastColor as d, parseHSL as T } from "./utils/color-utils.js";
-import { CSS_IDS as c, generateCriticalCSS as b, generateFullCSS as L, injectCSS as j, removeCSS as z } from "./utils/css-generator.js";
-import { deepMerge as H, mergePresets as M } from "./utils/preset-merger.js";
-import { mazUi as U } from "./presets/mazUi.js";
-import { obsidian as y } from "./presets/obsidian.js";
-import { ocean as D } from "./presets/ocean.js";
-import { pristine as _ } from "./presets/pristine.js";
+import { buildSeparateThemeFiles, buildThemeCSS, createThemeStylesheet, generateThemeBundle } from "./build/index.js";
+import { useTheme } from "./composables/useTheme.js";
+import { definePreset } from "./define-preset.js";
+import { MazUiTheme } from "./plugin.js";
+import { adjustColorLightness, formatHSL, generateColorScale, getContrastColor, parseHSL } from "./utils/color-utils.js";
+import { CSS_ID, generateCSS, injectCSS, removeCSS } from "./utils/css-generator.js";
+import { deepMerge, mergePresets } from "./utils/preset-merger.js";
+import { mazUi } from "./presets/mazUi.js";
+import { obsidian } from "./presets/obsidian.js";
+import { ocean } from "./presets/ocean.js";
+import { pristine } from "./presets/pristine.js";
 export {
-  c as CSS_IDS,
-  l as MazUiTheme,
-  C as adjustColorLightness,
-  o as buildSeparateThemeFiles,
-  t as buildThemeCSS,
-  m as createThemeStylesheet,
-  H as deepMerge,
-  n as definePreset,
-  h as formatHSL,
-  g as generateColorScale,
-  b as generateCriticalCSS,
-  L as generateFullCSS,
-  S as generateThemeBundle,
-  d as getContrastColor,
-  i as initThemeState,
-  j as injectCSS,
-  U as mazUi,
-  M as mergePresets,
-  y as obsidian,
-  D as ocean,
-  T as parseHSL,
-  _ as pristine,
-  z as removeCSS,
-  p as useTheme
+  CSS_ID,
+  MazUiTheme,
+  adjustColorLightness,
+  buildSeparateThemeFiles,
+  buildThemeCSS,
+  createThemeStylesheet,
+  deepMerge,
+  definePreset,
+  formatHSL,
+  generateCSS,
+  generateColorScale,
+  generateThemeBundle,
+  getContrastColor,
+  injectCSS,
+  mazUi,
+  mergePresets,
+  obsidian,
+  ocean,
+  parseHSL,
+  pristine,
+  removeCSS,
+  useTheme
 };

package/dist/plugin/index.js

@@ -1,9 +1,11 @@
+import "../chunks/isServer.BAlEcRRr.js";
 import "vue";
+import { MazUiTheme } from "../plugin.js";
 import "../utils/css-generator.js";
 import "../utils/get-color-mode.js";
+import "../utils/update-document-class.js";
 import "../utils/get-preset.js";
 import "../utils/preset-merger.js";
-import { MazUiTheme as a } from "../plugin.js";
 export {
-  a as MazUiTheme
+  MazUiTheme
 };