@maz-ui/themes 4.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 LouisMazel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,163 @@
+# @maz-ui/themes
+
+High-performance and typed theme system for Maz-UI, inspired by Shadcn and PrimeVue.
+
+## Features
+
+- 🎨 **HSL CSS Variables** - Uses HSL CSS variables for maximum flexibility
+- 🌓 **Automatic dark mode** - Native dark mode support with `prefers-color-scheme`
+- 🚀 **Automatic generation** - Automatically generates color variants (50-950)
+- ⚡ **Flexible strategies** - Runtime, build-time or hybrid
+- 🛡️ **Strict TypeScript** - Complete types for optimal DX
+- 🎯 **Zero FOUC** - Critical CSS injected inline
+- 🔧 **Configurable presets** - Ready-to-use and customizable presets
+
+## Installation
+
+```bash
+npm install @maz-ui/themes
+```
+
+## Basic usage
+
+### 1. Plugin installation
+
+```typescript
+import { MazUiTheme } from '@maz-ui/themes'
+// main.ts
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+app.use(MazUiTheme, {
+  preset: 'maz-ui',
+  strategy: 'hybrid',
+  darkModeStrategy: 'class'
+})
+```
+
+### 2. Usage in components
+
+```vue
+<script setup>
+import { useMazTheme } from '@maz-ui/themes'
+
+const { toggleDarkMode, isDark } = useMazTheme()
+</script>
+
+<template>
+  <div class="maz-bg-background maz-text-foreground">
+    <button
+      class="maz-bg-primary maz-text-primary-foreground maz-rounded-[var(--radius)]"
+      @click="toggleDarkMode"
+    >
+      Toggle Dark Mode
+    </button>
+  </div>
+</template>
+```
+
+## Available presets
+
+### Default (Shadcn-like)
+
+```typescript
+import { mazUi } from '@maz-ui/themes'
+```
+
+### Dark
+
+```typescript
+import { dark } from '@maz-ui/themes'
+```
+
+### Ocean
+
+```typescript
+import { ocean } from '@maz-ui/themes'
+```
+
+### Obsidian
+
+```typescript
+import { obsidian } from '@maz-ui/themes'
+```
+
+## Creating custom presets
+
+```typescript
+import { definePreset, mazUi } from '@maz-ui/themes'
+
+const myPreset = definePreset({
+  base: mazUi,
+  overrides: {
+    name: 'my-theme',
+    radius: '0.75rem',
+    colors: {
+      light: {
+        primary: '220 100% 50%',
+        secondary: '210 40% 96%'
+      },
+      dark: {
+        primary: '220 100% 70%',
+        secondary: '210 40% 15%'
+      }
+    }
+  }
+})
+```
+
+## Composable API
+
+```typescript
+const {
+  currentPreset, // Ref<ThemePreset>
+  colorMode, // Ref<'light' | 'dark' | 'auto'>
+  isDark, // Ref<boolean>
+  strategy, // Ref<'runtime' | 'build' | 'hybrid'>
+  updateTheme, // (preset: ThemePreset | ThemePresetName | ThemePresetOverrides) => void
+  setColorMode, // (mode: 'light' | 'dark' | 'auto') => void
+  toggleDarkMode // () => void
+} = useMazTheme()
+```
+
+## Strategies
+
+### Runtime
+
+CSS generated and injected dynamically on the client side.
+
+### Build
+
+CSS generated at build-time and included in the bundle.
+
+### Hybrid (recommended)
+
+Critical CSS injected inline, complete CSS loaded asynchronously.
+
+## Generated CSS variables
+
+The system automatically generates:
+
+- Base color variables: `--primary`, `--secondary`, etc.
+- Color scales: `--primary-50` to `--primary-950`
+- Design variables: `--radius`, `--font-family`
+- Dark mode support via `.dark` or `@media (prefers-color-scheme: dark)`
+
+## Build-time
+
+```typescript
+import { buildThemeCSS, generateThemeBundle } from '@maz-ui/themes'
+
+// CSS for a preset
+const css = buildThemeCSS({
+  preset: myPreset,
+  darkModeStrategy: 'class',
+  critical: true
+})
+
+// Bundle for multiple presets
+const bundle = generateThemeBundle([mazUi, darkPreset], {
+  darkModeStrategy: 'class'
+})
+```

package/dist/build/index.js

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

package/dist/composables/index.js

@@ -0,0 +1,11 @@
+import { initThemeState as T, useTheme as a } from "./useTheme.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";
+export {
+  T as initThemeState,
+  a as useTheme
+};

package/dist/composables/useTheme.js

@@ -0,0 +1,95 @@
+import { ref as m, computed as a, watchEffect as p, inject as v, getCurrentInstance as c } from "vue";
+import { setCookie as g } from "../utils/cookie-storage.js";
+import { generateCriticalCSS as k, generateFullCSS as M, injectCSS as s } from "../utils/css-generator.js";
+import { getColorMode as y, getSystemPrefersDark as S } from "../utils/get-color-mode.js";
+import { getPreset as P } from "../utils/get-preset.js";
+import { mergePresets as h } from "../utils/preset-merger.js";
+function w() {
+  return typeof document > "u" || typeof window > "u";
+}
+const r = m();
+function l() {
+  typeof document > "u" || !r.value || r.value.darkModeStrategy === "media" || (r.value.isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
+}
+function C() {
+  const e = c()?.appContext.app;
+  e && r.value && (e.config.globalProperties.$mazThemeState = r.value);
+}
+function z(e) {
+  if (e.currentPreset && e.colorMode !== void 0) {
+    u({
+      currentPreset: e.currentPreset,
+      colorMode: e.colorMode,
+      isDark: e.isDark,
+      strategy: e.strategy,
+      darkModeStrategy: e.darkModeStrategy
+    });
+    return;
+  }
+  const t = y(e.colorMode), o = t === "auto" ? S() === "dark" : t === "dark";
+  u({
+    currentPreset: e.currentPreset,
+    colorMode: t,
+    isDark: o,
+    strategy: e.strategy,
+    darkModeStrategy: e.darkModeStrategy
+  });
+}
+function u(e) {
+  if (r.value = e, typeof window < "u" && r.value.colorMode === "auto") {
+    const t = window.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 && (l(), C());
+  });
+}
+const T = a(() => r.value?.currentPreset), b = a({
+  get: () => r.value?.colorMode,
+  set: (e) => n(e)
+}), D = a(() => r.value?.isDark ?? !1), E = a(() => r.value?.strategy);
+async function x(e) {
+  if (!r.value)
+    return;
+  const t = typeof e == "string" ? await P(e) : e, o = "name" in t && t.name !== r.value.currentPreset.name ? t : h(r.value.currentPreset, t);
+  if (r.value.currentPreset = o, r.value.strategy === "runtime" || r.value.strategy === "hybrid") {
+    const i = {
+      mode: "both",
+      prefix: "maz"
+    }, d = k(o, i), f = M(o, i);
+    s(d, "maz-theme-critical"), s(f, "maz-theme-full");
+  }
+}
+function n(e) {
+  r.value && (r.value.colorMode = e, e === "auto" ? r.value.isDark = typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches : r.value.isDark = e === "dark", l(), g("maz-color-mode", e));
+}
+function F() {
+  r.value && n(r.value.isDark ? "light" : "dark");
+}
+function O() {
+  let e;
+  try {
+    if (e = v("mazThemeState", void 0), !e)
+      throw new Error("mazThemeState not found");
+  } catch {
+    const t = c();
+    t?.appContext?.app?.config?.globalProperties && (e = t.appContext.app.config.globalProperties.$mazThemeState);
+  }
+  if (e && (r.value ? w() && (r.value.colorMode = e.colorMode, r.value.isDark = e.isDark, r.value.currentPreset = e.currentPreset) : z(e)), !r.value)
+    throw new Error("You must install the MazUi or MazUiTheme plugin before using useTheme composable");
+  return {
+    currentPreset: T,
+    colorMode: b,
+    isDark: D,
+    strategy: E,
+    updateTheme: x,
+    setColorMode: n,
+    toggleDarkMode: F
+  };
+}
+export {
+  u as initThemeState,
+  O as useTheme
+};

package/dist/define-preset.js

@@ -0,0 +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 = {}
+}) {
+  return typeof e == "string" ? f(e).then((n) => r(n, t)) : r(e, t);
+}
+export {
+  o as definePreset
+};

package/dist/index.js

@@ -0,0 +1,36 @@
+import { buildSeparateThemeFiles as o, buildThemeCSS as t, createThemeStylesheet as m, generateThemeBundle as a } from "./build/index.js";
+import { initThemeState as S, 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 { generateCriticalCSS as c, generateFullCSS as b, injectCSS as L, removeCSS as j } from "./utils/css-generator.js";
+import { deepMerge as F, mergePresets as H } from "./utils/preset-merger.js";
+import { mazUi as P } from "./presets/mazUi.js";
+import { obsidian as v } from "./presets/obsidian.js";
+import { ocean as B } from "./presets/ocean.js";
+import { pristine as q } from "./presets/pristine.js";
+export {
+  l as MazUiTheme,
+  C as adjustColorLightness,
+  o as buildSeparateThemeFiles,
+  t as buildThemeCSS,
+  m as createThemeStylesheet,
+  F as deepMerge,
+  n as definePreset,
+  h as formatHSL,
+  g as generateColorScale,
+  c as generateCriticalCSS,
+  b as generateFullCSS,
+  a as generateThemeBundle,
+  d as getContrastColor,
+  S as initThemeState,
+  L as injectCSS,
+  P as mazUi,
+  H as mergePresets,
+  v as obsidian,
+  B as ocean,
+  T as parseHSL,
+  q as pristine,
+  j as removeCSS,
+  p as useTheme
+};

package/dist/plugin/index.js

@@ -0,0 +1,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";
+export {
+  e as MazUiTheme
+};

package/dist/plugin.js

@@ -0,0 +1,65 @@
+import { reactive as l } from "vue";
+import { generateCriticalCSS as d, injectCSS as n, generateFullCSS as m } from "./utils/css-generator.js";
+import { getColorMode as u, getSystemPrefersDark as S } from "./utils/get-color-mode.js";
+import { getPreset as f } from "./utils/get-preset.js";
+function g(r, t) {
+  typeof document > "u" || r !== "class" || (t ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
+}
+function k(r, t) {
+  if (typeof document > "u")
+    return;
+  const e = {
+    mode: "both",
+    prefix: t.prefix
+  };
+  if (t.injectCriticalCSS) {
+    const a = d(r, e);
+    n(a, "maz-theme-critical");
+  }
+  if (!t.injectFullCSS)
+    return;
+  const o = m(r, e);
+  t.strategy === "runtime" ? n(o, "maz-theme-full") : t.strategy === "hybrid" && requestIdleCallback(() => {
+    n(o, "maz-theme-full");
+  }, { timeout: 100 });
+}
+function p(r, t) {
+  r.provide("mazThemeState", t), r.config.globalProperties.$mazThemeState = t;
+}
+const z = {
+  async install(r, t = {}) {
+    const e = {
+      preset: "maz-ui",
+      strategy: "runtime",
+      darkModeStrategy: "class",
+      colorMode: "auto",
+      prefix: "maz",
+      injectCriticalCSS: !0,
+      injectFullCSS: !0,
+      ...t
+    }, o = u(e.colorMode), a = o === "auto" ? S() === "dark" : o === "dark", s = l({
+      // @ts-expect-error - empty currentPreset to avoid error
+      currentPreset: {},
+      colorMode: o,
+      isDark: a,
+      strategy: e.strategy,
+      darkModeStrategy: e.darkModeStrategy
+    });
+    g(e.darkModeStrategy, s.isDark), p(r, s);
+    const i = await f(e.preset), c = e.overrides ? {
+      ...i,
+      foundation: {
+        ...i.foundation,
+        ...e.overrides.foundation
+      },
+      colors: {
+        light: { ...i.colors.light, ...e.overrides.colors?.light },
+        dark: { ...i.colors.dark, ...e.overrides.colors?.dark }
+      }
+    } : i;
+    s.currentPreset = c, e.strategy !== "buildtime" && k(c, e);
+  }
+};
+export {
+  z as MazUiTheme
+};

package/dist/presets/index.js

@@ -0,0 +1,10 @@
+import { mazUi as e } from "./mazUi.js";
+import { obsidian as m } from "./obsidian.js";
+import { ocean as t } from "./ocean.js";
+import { pristine as x } from "./pristine.js";
+export {
+  e as mazUi,
+  m as obsidian,
+  t as ocean,
+  x as pristine
+};

package/dist/presets/mazUi.js

@@ -0,0 +1,62 @@
+const r = {
+  name: "maz-ui",
+  foundation: {
+    "base-font-size": "14px",
+    "font-family": "Manrope, sans-serif, system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+    radius: "0.7rem",
+    "border-width": "0.0625rem"
+  },
+  colors: {
+    light: {
+      background: "0 0% 100%",
+      foreground: "210 8% 14%",
+      primary: "210 100% 56%",
+      "primary-foreground": "0 0% 100%",
+      secondary: "272 99% 54%",
+      "secondary-foreground": "0 0% 100%",
+      accent: "164 76% 46%",
+      "accent-foreground": "0 0% 100%",
+      success: "80 61% 50%",
+      "success-foreground": "210 8% 14%",
+      warning: "40 97% 59%",
+      "warning-foreground": "210 8% 14%",
+      destructive: "1 100% 71%",
+      "destructive-foreground": "0 0% 100%",
+      info: "188 78% 41%",
+      "info-foreground": "0 0% 100%",
+      contrast: "235 16% 15%",
+      "contrast-foreground": "255 0% 95%",
+      border: "220 13.04% 90.98%",
+      overlay: "0 0% 40%",
+      muted: "0 0% 54%",
+      shadow: "240 5.9% 10%"
+    },
+    dark: {
+      background: "235 16% 15%",
+      foreground: "0 0% 85%",
+      primary: "210 100% 56%",
+      "primary-foreground": "0 0% 100%",
+      secondary: "272 99% 54%",
+      "secondary-foreground": "0 0% 100%",
+      accent: "164 76% 46%",
+      "accent-foreground": "0 0% 100%",
+      success: "80 61% 50%",
+      "success-foreground": "210 8% 14%",
+      warning: "40 97% 59%",
+      "warning-foreground": "210 8% 14%",
+      destructive: "1 100% 71%",
+      "destructive-foreground": "0 0% 100%",
+      info: "188 78% 41%",
+      "info-foreground": "0 0% 100%",
+      contrast: "0 0% 100%",
+      "contrast-foreground": "210 8% 14%",
+      muted: "255 0% 54%",
+      border: "238 17% 25%",
+      overlay: "0 0% 15%",
+      shadow: "240 3.7% 15.9%"
+    }
+  }
+};
+export {
+  r as mazUi
+};

package/dist/presets/obsidian.js

@@ -0,0 +1,65 @@
+const r = {
+  name: "obsidian",
+  foundation: {
+    "base-font-size": "14px",
+    radius: "0.6rem",
+    "border-width": "1px",
+    "font-family": "'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
+  },
+  colors: {
+    light: {
+      // On reste très sobre même en light mode, légèrement warm
+      background: "0 0% 98%",
+      foreground: "220 13% 15%",
+      primary: "220 100% 60%",
+      "primary-foreground": "0 0% 100%",
+      contrast: "220 13% 15%",
+      "contrast-foreground": "0 0% 100%",
+      secondary: "220 13% 90%",
+      "secondary-foreground": "220 13% 15%",
+      muted: "220 8% 50%",
+      accent: "280 100% 65%",
+      // une touche violet Linear-esque
+      "accent-foreground": "0 0% 100%",
+      destructive: "0 75% 55%",
+      "destructive-foreground": "0 0% 100%",
+      success: "160 60% 40%",
+      "success-foreground": "0 0% 100%",
+      warning: "40 100% 50%",
+      "warning-foreground": "0 0% 100%",
+      info: "200 100% 55%",
+      "info-foreground": "0 0% 100%",
+      border: "220 13% 90%",
+      overlay: "220 13% 15%",
+      shadow: "220 10% 20%"
+    },
+    dark: {
+      background: "220 13% 10%",
+      foreground: "0 0% 95%",
+      primary: "220 100% 70%",
+      "primary-foreground": "0 0% 10%",
+      contrast: "0 0% 100%",
+      "contrast-foreground": "220 13% 10%",
+      secondary: "220 13% 18%",
+      "secondary-foreground": "0 0% 95%",
+      muted: "220 8% 60%",
+      accent: "280 100% 65%",
+      // violet saturé (Linear)
+      "accent-foreground": "0 0% 100%",
+      destructive: "0 70% 60%",
+      "destructive-foreground": "0 0% 100%",
+      success: "160 60% 50%",
+      "success-foreground": "0 0% 100%",
+      warning: "40 100% 55%",
+      "warning-foreground": "0 0% 100%",
+      info: "200 100% 60%",
+      "info-foreground": "0 0% 100%",
+      border: "220 13% 20%",
+      overlay: "220 13% 10%",
+      shadow: "220 10% 5%"
+    }
+  }
+};
+export {
+  r as obsidian
+};

package/dist/presets/ocean.js

@@ -0,0 +1,63 @@
+const r = {
+  name: "ocean",
+  foundation: {
+    "base-font-size": "16px",
+    radius: "1rem",
+    "border-width": "0.125rem",
+    "font-family": "'Poppins', 'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
+  },
+  colors: {
+    light: {
+      background: "200 40% 98%",
+      foreground: "210 20% 12%",
+      primary: "195 60% 45%",
+      "primary-foreground": "0 0% 100%",
+      contrast: "210 20% 12%",
+      "contrast-foreground": "200 40% 98%",
+      secondary: "180 35% 92%",
+      "secondary-foreground": "210 20% 12%",
+      muted: "200 15% 55%",
+      accent: "25 60% 70%",
+      // plus doux, légèrement pêche pastel
+      "accent-foreground": "210 20% 12%",
+      destructive: "5 65% 50%",
+      "destructive-foreground": "0 0% 100%",
+      success: "160 50% 38%",
+      "success-foreground": "0 0% 100%",
+      warning: "35 60% 55%",
+      "warning-foreground": "210 20% 12%",
+      info: "190 60% 50%",
+      "info-foreground": "0 0% 100%",
+      border: "180 25% 85%",
+      overlay: "210 20% 12%",
+      shadow: "195 20% 25%"
+    },
+    dark: {
+      background: "210 20% 10%",
+      foreground: "180 20% 92%",
+      primary: "180 60% 50%",
+      "primary-foreground": "210 20% 10%",
+      contrast: "180 20% 92%",
+      "contrast-foreground": "210 20% 10%",
+      secondary: "200 30% 18%",
+      "secondary-foreground": "180 20% 92%",
+      muted: "200 10% 60%",
+      accent: "25 50% 65%",
+      "accent-foreground": "210 20% 10%",
+      destructive: "5 60% 55%",
+      "destructive-foreground": "0 0% 100%",
+      success: "160 45% 40%",
+      "success-foreground": "0 0% 100%",
+      warning: "35 55% 55%",
+      "warning-foreground": "210 20% 10%",
+      info: "190 50% 55%",
+      "info-foreground": "0 0% 100%",
+      border: "200 20% 25%",
+      overlay: "210 20% 10%",
+      shadow: "195 10% 5%"
+    }
+  }
+};
+export {
+  r as ocean
+};