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

package/README.md

@@ -4,9 +4,11 @@ High-performance and typed theme system for Maz-UI.
 
 ## 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)
+- 🎨 **Native `light-dark()` + `color-scheme`** - Modern CSS theming with zero JS overhead for the light/dark switch
+- 🌓 **Native dark mode** - `color-scheme` makes native form controls, scrollbars, and built-in widgets adapt automatically
+- ✨ **View Transitions** - Optional full-page animated theme switch via `document.startViewTransition()`
+- 🛡️ **Anti-FART** - `<meta name="color-scheme">` injected at boot to prevent any Flash of inAccurate coloR Theme
+- 🚀 **Automatic generation** - Automatically generates color variants (50-950) via OKLCh relative color syntax
 - ⚡ **Flexible strategies** - Runtime injection or build-time generation
 - 🛡️ **Strict TypeScript** - Complete types for optimal DX
 - 🎯 **Zero FOUC** - Pass the preset object so the full CSS renders synchronously on first paint
@@ -34,6 +36,10 @@ app.use(MazUiTheme, {
   preset: mazUi,
   strategy: 'runtime',
   darkModeStrategy: 'class',
+  // Class added to <html> when dark mode is forced (default: 'dark')
+  darkClass: 'dark',
+  // Class added to <html> when light mode is forced (default: 'light')
+  lightClass: 'light',
   // remember the active preset name across reloads (default: true)
   persistPreset: true,
 })
@@ -41,7 +47,7 @@ app.use(MazUiTheme, {
 
 ### Preset persistence
 
-The active preset name is stored in a `maz-preset` cookie (1-year TTL, `SameSite=Lax`). At boot the cookie takes priority over `options.preset` (string name **or** preset object — both treated as the default the app boots with), so the user's last choice survives across reloads. The cookie is written on every successful resolution and on every `useTheme().updateTheme()` call, and auto-cleared if the saved name no longer resolves. Set `persistPreset: false` to opt out — no cookie is read or written.
+The active preset is stored in a `maz-preset` cookie (1-year TTL, `SameSite=Lax`) as a `base:active` pair, where `base` is the identity of the preset declared in `options.preset` and `active` is the one currently applied. The configured `options.preset` is always authoritative: a runtime switch made via `useTheme().updateTheme()` is only restored on reload when its `base` matches the configured preset, so a stale cookie - or a cookie written by another app on the same host - can never override the preset your app declares. A foreign or legacy (plain-name) cookie is ignored and healed on the next resolution. Set `persistPreset: false` to opt out - no cookie is read or written.
 
 ### 2. Usage in components
 
@@ -64,6 +70,41 @@ const { toggleDarkMode, isDark } = useTheme()
 </template>
 ```
 
+## Color modes and class toggling
+
+`darkClass` and `lightClass` interact with `darkModeStrategy` to control how `<html>` is decorated.
+
+### `darkModeStrategy: 'class'` (default)
+
+- `setColorMode('dark')` → adds `darkClass` (default `.dark`) to `<html>` → CSS applies `color-scheme: only dark`.
+- `setColorMode('light')` → adds `lightClass` (default `.light`) to `<html>` → CSS applies `color-scheme: only light`.
+- `setColorMode('auto')` → removes both classes, leaving only `color-scheme: light dark` on `:root` so the browser follows the system `prefers-color-scheme`.
+
+Forcing both classes (light/dark) on the root ensures the browser-native widgets (scrollbars, native `<select>`, date pickers, autofill backgrounds, …) match the explicit user choice rather than the OS preference.
+
+### `darkModeStrategy: 'media'`
+
+- No class is ever added to `<html>`.
+- The browser always follows `prefers-color-scheme` via `color-scheme: light dark`.
+- `setColorMode()` still updates the persisted cookie but does **not** force a visual override — system preference always wins.
+
+## Animated theme switch (View Transitions)
+
+For a full-page animated swap (rather than per-variable color tweens), pass `{ animate: true }` to `setColorMode` or `toggleDarkMode`:
+
+```ts
+import { useTheme } from '@maz-ui/themes'
+
+const { toggleDarkMode, setColorMode } = useTheme()
+
+await toggleDarkMode({ animate: true })
+await setColorMode('dark', { animate: true })
+```
+
+- Wraps the switch in `document.startViewTransition()` so the browser captures a snapshot of the page before/after and crossfades between them.
+- The helper is **lazy-imported** — when `animate` is not used, the View Transitions glue stays out of the boot bundle.
+- **Graceful degradation:** in browsers that don't support the API (e.g., Firefox stable as of mid-2026), the change is applied immediately with no animation — no error thrown.
+
 ## Available presets
 
 ### Default
@@ -106,16 +147,16 @@ const myPreset = definePreset({
   overrides: {
     name: 'my-theme',
     scales: {
-      radius: { md: '0.75rem' },
+      rounded: { md: '0.75rem' },
     },
     colors: {
       light: {
-        primary: '220 100% 50%',
-        secondary: '210 40% 96%',
+        primary: 'oklch(0.6 0.2 250)',
+        secondary: 'oklch(0.96 0.01 250)',
       },
       dark: {
-        primary: '220 100% 70%',
-        secondary: '210 40% 15%',
+        primary: 'oklch(0.7 0.2 250)',
+        secondary: 'oklch(0.2 0.01 250)',
       },
     },
   },
@@ -133,12 +174,16 @@ const {
   colorMode, // Ref<'light' | 'dark' | 'auto'>
   isDark, // ComputedRef<boolean>
   strategy, // ComputedRef<'runtime' | 'buildtime'>
-  updateTheme, // (preset: ThemePreset | ThemePresetName | ThemePresetOverrides) => void
-  setColorMode, // (mode: 'light' | 'dark' | 'auto') => void
-  toggleDarkMode, // () => void
+  updateTheme, // (preset: ThemePreset | ThemePresetName | ThemePresetOverrides) => Promise<void>
+  setColorMode, // (mode: 'light' | 'dark' | 'auto', options?: { animate?: boolean }) => Promise<void>
+  toggleDarkMode, // (options?: { animate?: boolean }) => Promise<void>
 } = useTheme()
 ```
 
+`setColorMode` and `toggleDarkMode` are **async** (`Promise<void>`). The promise resolves once the change — and the optional View Transition — has been applied. Callers can ignore the return value when no transition is needed.
+
+The optional `{ animate?: boolean }` parameter enables the View Transitions API (see [Animated theme switch](#animated-theme-switch-view-transitions)).
+
 ## Strategies
 
 ### Runtime (recommended)
@@ -151,12 +196,12 @@ CSS generated at build-time and included in the bundle. Nothing is injected at r
 
 ## Generated CSS variables
 
-The system automatically generates:
+The generator produces a modern, native CSS contract:
 
-- 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)`
+- **Base colors** are emitted as `light-dark(L, D)` when `mode: 'both'` — a single declaration that the browser resolves to the active scheme. Example: `--maz-primary: light-dark(oklch(0.6 0.2 250), oklch(0.7 0.2 250));`.
+- **Scale palettes** `--maz-X-50` through `--maz-X-950` are derived from the base via OKLCh relative color syntax — `oklch(from var(--maz-X) clamp(0, calc(l ± offset), 1) calc(c * mult) h)`. Lightness offsets follow Tailwind v4's perceptual spread; chroma is preserved (and tapered near extremes) so derived shades stay vibrant rather than washed-out.
+- **Color scheme** is declared on `:root` as `color-scheme: light dark`. With `darkModeStrategy: 'class'`, the generator also emits `.dark { color-scheme: only dark; }` and `.light { color-scheme: only light; }` so an explicit user choice overrides the system preference (and native widgets follow).
+- **Design tokens** — `--maz-rounded-*`, `--maz-shadow-*`, `--maz-font-family`, motion durations, easings, etc. — are bridged into Tailwind v4 via `@theme inline`.
 
 ## Build-time
 

package/dist/build/index.d.ts

@@ -1,6 +1,5 @@
 import { ThemePreset } from '../types';
-export interface BuildThemeOptions {
-    preset: ThemePreset;
+interface SharedOptions {
     /** Theme mode to generate */
     mode?: 'light' | 'dark' | 'both';
     /** Dark mode selector: 'class' (.dark) | 'media' (@media) */
@@ -9,24 +8,22 @@ export interface BuildThemeOptions {
     prefix?: string;
     /** Dark class name */
     darkClass?: string;
+    /** Light class name (default 'light') */
+    lightClass?: string;
 }
-export declare function buildThemeCSS(options: BuildThemeOptions): string;
-export declare function generateThemeBundle(presets: ThemePreset[], options?: {
-    mode?: 'light' | 'dark' | 'both';
-    darkSelector?: 'class' | 'media';
-    prefix?: string;
-}): Record<string, string>;
+export interface BuildThemeOptions extends SharedOptions {
+    preset: ThemePreset;
+}
+export declare function buildThemeCSS({ preset, mode, darkSelector, prefix, darkClass, lightClass, }: BuildThemeOptions): string;
+export declare function generateThemeBundle(presets: ThemePreset[], options?: SharedOptions): Record<string, string>;
 export declare function createThemeStylesheet(css: string, options?: {
     id?: string;
     media?: string;
 }): string;
-export declare function buildSeparateThemeFiles(preset: ThemePreset, options?: {
-    prefix?: string;
-    darkSelector?: 'class' | 'media';
-    darkClass?: string;
-}): {
+export declare function buildSeparateThemeFiles(preset: ThemePreset, options?: Omit<SharedOptions, 'mode'>): {
     full: string;
     lightOnly: string;
     darkOnly: string;
 };
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/build/index.d.ts.map

@@ -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,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,iBAAiB,GAAG,MAAM,CAehE;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,GAAE;IACnE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;CACX,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAgB9B;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;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACd,GAAG;IACP,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAMA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/build/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG3C,UAAU,aAAa;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,MAAM,EAAE,WAAW,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,IAAa,EACb,YAAsB,EACtB,MAAc,EACd,SAAkB,EAClB,UAAoB,GACrB,EAAE,iBAAiB,GAAG,MAAM,CAQ5B;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK/G;AAED,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAO,GAAG,MAAM,CAIxG;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,GAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAM,GAAG;IACvG,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAMA"}

package/dist/build/index.js

@@ -1 +1,42 @@
-import{generateCSS}from"../utils/css-generator.js";function buildThemeCSS(options){let{preset,mode=`both`,darkSelector=`class`,prefix=`maz`,darkClass=`dark`}=options;return generateCSS(preset,{mode,darkSelectorStrategy:darkSelector,prefix,darkClass})}function generateThemeBundle(presets,options={}){let{mode=`both`,darkSelector=`class`,prefix=`maz`}=options;return presets.reduce((bundle,preset)=>(bundle[preset.name]=buildThemeCSS({preset,mode,darkSelector,prefix}),bundle),{})}function createThemeStylesheet(css,options={}){let{id=`maz-theme`,media}=options;let styleTag=`<style id="${id}"`;return media&&(styleTag+=` media="${media}"`),styleTag+=`>\n${css}\n</style>`,styleTag}function buildSeparateThemeFiles(preset,options={}){return{full:buildThemeCSS({preset,mode:`both`,...options}),lightOnly:buildThemeCSS({preset,mode:`light`,...options}),darkOnly:buildThemeCSS({preset,mode:`dark`,...options})}}export{buildSeparateThemeFiles,buildThemeCSS,createThemeStylesheet,generateThemeBundle};
+import { generateCSS } from "../utils/css-generator.js";
+//#region src/build/index.ts
+function buildThemeCSS({ preset, mode = "both", darkSelector = "class", prefix = "maz", darkClass = "dark", lightClass = "light" }) {
+	return generateCSS(preset, {
+		mode,
+		darkSelectorStrategy: darkSelector,
+		prefix,
+		darkClass,
+		lightClass
+	});
+}
+function generateThemeBundle(presets, options = {}) {
+	return presets.reduce((bundle, preset) => (bundle[preset.name] = buildThemeCSS({
+		preset,
+		...options
+	}), bundle), {});
+}
+function createThemeStylesheet(css, options = {}) {
+	let { id = "maz-theme", media } = options;
+	return `<style id="${id}"${media ? ` media="${media}"` : ""}>\n${css}\n</style>`;
+}
+function buildSeparateThemeFiles(preset, options = {}) {
+	return {
+		full: buildThemeCSS({
+			preset,
+			mode: "both",
+			...options
+		}),
+		lightOnly: buildThemeCSS({
+			preset,
+			mode: "light",
+			...options
+		}),
+		darkOnly: buildThemeCSS({
+			preset,
+			mode: "dark",
+			...options
+		})
+	};
+}
+//#endregion
+export { buildSeparateThemeFiles, buildThemeCSS, createThemeStylesheet, generateThemeBundle };

package/dist/composables/index.js

@@ -1 +1 @@
-import{useTheme}from"./useTheme.js";export{useTheme};
+export { useTheme } from "./useTheme.js";

package/dist/composables/useTheme.d.ts

@@ -1,7 +1,11 @@
 import { ColorMode, ThemePreset, ThemePresetName, ThemePresetOverrides } from '../types';
 declare function updateTheme(preset: ThemePreset | ThemePresetOverrides | ThemePresetName): Promise<void>;
-declare function setColorMode(colorMode: ColorMode): void;
-declare function toggleDarkMode(): void;
+declare function setColorMode(colorMode: ColorMode, options?: {
+    animate?: boolean;
+}): Promise<void>;
+declare function toggleDarkMode(options?: {
+    animate?: boolean;
+}): Promise<void>;
 export declare function useTheme(): {
     /**
      * Current theme preset
@@ -34,11 +38,15 @@ export declare function useTheme(): {
      * Set the color mode
      * @description Set the color mode - Can be 'auto', 'dark' or 'light'
      * @param colorMode The new color mode
+     * @param options.animate When `true`, wrap the change in a View Transition for a smooth full-page animation. Lazy-imports the helper so unused code stays out of the boot bundle.
+     * @returns A `Promise<void>` that resolves once the change (and optional transition) is applied. Callers may ignore the return.
      */
     setColorMode: typeof setColorMode;
     /**
      * Toggle the dark mode
      * @description Toggle the dark mode
+     * @param options.animate When `true`, wrap the toggle in a View Transition.
+     * @returns A `Promise<void>` that resolves once the change (and optional transition) is applied.
      */
     toggleDarkMode: typeof toggleDarkMode;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/composables/useTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAc,MAAM,UAAU,CAAA;AA0BzG,iBAAe,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,oBAAoB,GAAG,eAAe,iBA+BtF;AAED,iBAAS,YAAY,CAAC,SAAS,EAAE,SAAS,QAWzC;AAED,iBAAS,cAAc,SAEtB;AAiCD,wBAAgB,QAAQ;IAkBpB;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;;OAIG;wBACiB,WAAW,GAAG,oBAAoB,GAAG,eAAe,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC;IAGzG;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;EAGN"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/composables/useTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAc,MAAM,UAAU,CAAA;AAgCzG,iBAAe,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,oBAAoB,GAAG,eAAe,iBAmCtF;AAED,iBAAe,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAmBpG;AAED,iBAAS,cAAc,CAAC,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAE1E;AAiCD,wBAAgB,QAAQ;IAkBpB;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;;OAIG;wBACiB,WAAW,GAAG,oBAAoB,GAAG,eAAe,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC;IAGzG;;;;;;OAMG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;EAGN"}

package/dist/composables/useTheme.js

@@ -1 +1,95 @@
-import{saveResolvedPresetName,setCookie}from"../utils/cookie-storage.js";import{CSS_ID,generateCSS,injectCSS}from"../utils/css-generator.js";import{getPreset}from"../utils/get-preset.js";import{noTransition}from"../utils/no-transition.js";import{mergePresets}from"../utils/preset-merger.js";import{getSystemColorMode,saveResolvedColorMode}from"../utils/get-color-mode.js";import{isServer}from"@maz-ui/utils/helpers/isServer";import{computed,getCurrentInstance,inject,ref,watch}from"vue";var themeState=ref();var colorMode=computed({get:()=>themeState.value?.colorMode,set:mode=>setColorMode(mode)});var isDark=computed(()=>themeState.value?.isDark||!1);var strategy=computed(()=>themeState.value?.strategy);var mode=computed(()=>themeState.value?.mode);var darkModeStrategy=computed(()=>themeState.value?.darkModeStrategy);var preset=computed(()=>themeState.value?.preset);var presetName=computed(()=>preset.value?.name);async function updateTheme(preset){if(!themeState.value)return;let _preset=typeof preset==`string`?await getPreset(preset):preset;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}let newPreset=`name`in _preset&&_preset.name!==themeState.value.preset.name?_preset:mergePresets(themeState.value.preset,_preset);themeState.value.preset=newPreset,themeState.value.persistPreset&&saveResolvedPresetName(newPreset.name),themeState.value.strategy===`runtime`&&injectCSS(CSS_ID,generateCSS(newPreset,{mode:themeState.value.mode,darkSelectorStrategy:themeState.value.darkModeStrategy,prefix:`maz`,darkClass:themeState.value.darkClass}))}function setColorMode(colorMode){themeState.value&&(themeState.value.colorMode=colorMode,setCookie(`maz-color-mode`,colorMode),colorMode===`auto`&&saveResolvedColorMode(getSystemColorMode()===`dark`?`dark`:`light`))}function toggleDarkMode(){setColorMode(isDark.value?`light`:`dark`)}var stopInjectedWatch;function setThemeStateFromGlobalProperties(){themeState.value=void 0,stopInjectedWatch?.(),stopInjectedWatch=void 0;try{let injectedState=inject(`mazThemeState`,void 0);if(themeState.value=injectedState?.value,injectedState&&(stopInjectedWatch=watch(injectedState,newState=>{newState&&(themeState.value=newState)},{deep:!0})),!themeState.value)throw Error(`mazThemeState not found`)}catch{let instance=getCurrentInstance();instance?.appContext?.app?.config?.globalProperties&&(themeState.value=instance.appContext.app.config.globalProperties.$mazThemeState.value)}}function useTheme(){isServer()&&(themeState.value=void 0);try{if(themeState.value||setThemeStateFromGlobalProperties(),!themeState.value)throw Error(`[@maz-ui/themes] no theme state found`)}catch{throw Error(`[@maz-ui/themes] You must install the MazUi or MazUiTheme plugin, or wrap your components in a MazUiProvider, before using useTheme composable`)}return{preset,presetName,colorMode,isDark,strategy,updateTheme(preset){return noTransition(updateTheme,preset)},setColorMode,toggleDarkMode,mode,darkModeStrategy,currentPreset:preset}}export{useTheme};
+import { getSavedPreset, savePreset } from "../utils/cookie-storage.js";
+import { CSS_ID, generateCSS, injectCSS } from "../utils/css-generator.js";
+import { getPreset } from "../utils/get-preset.js";
+import { noTransition } from "../utils/no-transition.js";
+import { mergePresets } from "../utils/preset-merger.js";
+import { getSystemColorMode, saveResolvedColorMode } from "../utils/get-color-mode.js";
+import { isServer } from "@maz-ui/utils/helpers/isServer";
+import { setCookie } from "@maz-ui/utils/helpers/cookie";
+import { computed, getCurrentInstance, inject, ref, watch } from "vue";
+//#region src/composables/useTheme.ts
+var themeState = ref();
+var colorMode = computed({
+	get: () => themeState.value?.colorMode,
+	set: (mode) => void setColorMode(mode)
+});
+var isDark = computed(() => themeState.value?.isDark || !1);
+var strategy = computed(() => themeState.value?.strategy);
+var mode = computed(() => themeState.value?.mode);
+var darkModeStrategy = computed(() => themeState.value?.darkModeStrategy);
+var preset = computed(() => themeState.value?.preset);
+var presetName = computed(() => preset.value?.name);
+async function updateTheme(preset) {
+	if (!themeState.value) return;
+	let _preset = typeof preset == "string" ? await getPreset(preset) : preset;
+	if (!_preset || !themeState.value.preset) {
+		console.error("[@maz-ui/themes] No preset found — with buildtime strategy you must pass a full preset");
+		return;
+	}
+	let newPreset = "name" in _preset && _preset.name !== themeState.value.preset.name ? _preset : mergePresets(themeState.value.preset, _preset);
+	if (themeState.value.preset = newPreset, themeState.value.persistPreset) {
+		let base = getSavedPreset()?.base ?? newPreset.name;
+		savePreset(base, newPreset.name);
+	}
+	if (themeState.value.strategy === "runtime") {
+		let fullCSS = generateCSS(newPreset, {
+			mode: themeState.value.mode,
+			darkSelectorStrategy: themeState.value.darkModeStrategy,
+			prefix: "maz",
+			darkClass: themeState.value.darkClass,
+			lightClass: themeState.value.lightClass
+		});
+		injectCSS(CSS_ID, fullCSS);
+	}
+}
+async function setColorMode(colorMode, options = {}) {
+	if (!themeState.value) return;
+	let apply = () => {
+		themeState.value.colorMode = colorMode, setCookie("maz-color-mode", colorMode), colorMode === "auto" && saveResolvedColorMode(getSystemColorMode() === "dark" ? "dark" : "light");
+	};
+	if (options.animate) {
+		let { runViewTransition } = await import("../utils/view-transition.js");
+		await runViewTransition(apply);
+	} else apply();
+}
+function toggleDarkMode(options = {}) {
+	return setColorMode(isDark.value ? "light" : "dark", options);
+}
+var stopInjectedWatch;
+function setThemeStateFromGlobalProperties() {
+	themeState.value = void 0, stopInjectedWatch?.(), stopInjectedWatch = void 0;
+	try {
+		let injectedState = inject("mazThemeState", void 0);
+		if (themeState.value = injectedState?.value, injectedState && (stopInjectedWatch = watch(injectedState, (newState) => {
+			newState && (themeState.value = newState);
+		}, { deep: !0 })), !themeState.value) throw Error("mazThemeState not found");
+	} catch {
+		let instance = getCurrentInstance();
+		instance?.appContext?.app?.config?.globalProperties && (themeState.value = instance.appContext.app.config.globalProperties.$mazThemeState.value);
+	}
+}
+function useTheme() {
+	isServer() && (themeState.value = void 0);
+	try {
+		if (themeState.value || setThemeStateFromGlobalProperties(), !themeState.value) throw Error("[@maz-ui/themes] no theme state found");
+	} catch {
+		throw Error("[@maz-ui/themes] useTheme requires the MazUi/MazUiTheme plugin or a MazUiProvider wrapper");
+	}
+	return {
+		preset,
+		presetName,
+		colorMode,
+		isDark,
+		strategy,
+		updateTheme(preset) {
+			return noTransition(updateTheme, preset);
+		},
+		setColorMode,
+		toggleDarkMode,
+		mode,
+		darkModeStrategy,
+		currentPreset: preset
+	};
+}
+//#endregion
+export { useTheme };

package/dist/define-preset.js

@@ -1 +1,8 @@
-import{getPreset}from"./utils/get-preset.js";import{mergePresets}from"./utils/preset-merger.js";function definePreset({base=`maz-ui`,overrides={}}){return typeof base==`string`?getPreset(base).then(basePreset=>mergePresets(basePreset,overrides)):mergePresets(base,overrides)}export{definePreset};
+import { getPreset } from "./utils/get-preset.js";
+import { mergePresets } from "./utils/preset-merger.js";
+//#region src/define-preset.ts
+function definePreset({ base = "maz-ui", overrides = {} }) {
+	return typeof base == "string" ? getPreset(base).then((basePreset) => mergePresets(basePreset, overrides)) : mergePresets(base, overrides);
+}
+//#endregion
+export { definePreset };

package/dist/index.d.ts

@@ -4,7 +4,6 @@ export * from './define-preset';
 export * from './plugin';
 export * from './presets';
 export * from './types';
-export * from './utils/color-utils';
 export * from './utils/css-generator';
 export * from './utils/inject-theme-css';
 export * from './utils/preset-merger';

package/dist/index.d.ts.map

@@ -1 +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,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA"}
+{"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,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA"}

package/dist/index.js

@@ -1 +1,15 @@
-import{adjustColorLightness,generateColorScale,getContrastColor,parseHSL}from"./utils/color-utils.js";import{CSS_ID,generateCSS,injectCSS,removeCSS}from"./utils/css-generator.js";import{injectThemeCSS}from"./utils/inject-theme-css.js";import{deepMerge,mergePresets}from"./utils/preset-merger.js";import{defaultOptions,setupTheme}from"./utils/setup-theme.js";import{MazUiTheme}from"./plugin.js";import{definePreset}from"./define-preset.js";import{pristine}from"./presets/pristine.js";import{ocean}from"./presets/ocean.js";import{obsidian}from"./presets/obsidian.js";import{nova}from"./presets/nova.js";import{mazUi}from"./presets/mazUi.js";import{useTheme}from"./composables/useTheme.js";import{buildSeparateThemeFiles,buildThemeCSS,createThemeStylesheet,generateThemeBundle}from"./build/index.js";import"./presets/index.js";export{CSS_ID,MazUiTheme,adjustColorLightness,buildSeparateThemeFiles,buildThemeCSS,createThemeStylesheet,deepMerge,defaultOptions,definePreset,generateCSS,generateColorScale,generateThemeBundle,getContrastColor,injectCSS,injectThemeCSS,mazUi,mergePresets,nova,obsidian,ocean,parseHSL,pristine,removeCSS,setupTheme,useTheme};
+import { CSS_ID, generateCSS, injectCSS, removeCSS } from "./utils/css-generator.js";
+import { injectThemeCSS } from "./utils/inject-theme-css.js";
+import { deepMerge, mergePresets } from "./utils/preset-merger.js";
+import { defaultOptions, setupTheme } from "./utils/setup-theme.js";
+import { MazUiTheme } from "./plugin.js";
+import { definePreset } from "./define-preset.js";
+import { pristine } from "./presets/pristine.js";
+import { ocean } from "./presets/ocean.js";
+import { obsidian } from "./presets/obsidian.js";
+import { nova } from "./presets/nova.js";
+import { mazUi } from "./presets/mazUi.js";
+import { useTheme } from "./composables/useTheme.js";
+import { buildSeparateThemeFiles, buildThemeCSS, createThemeStylesheet, generateThemeBundle } from "./build/index.js";
+import "./presets/index.js";
+export { CSS_ID, MazUiTheme, buildSeparateThemeFiles, buildThemeCSS, createThemeStylesheet, deepMerge, defaultOptions, definePreset, generateCSS, generateThemeBundle, injectCSS, injectThemeCSS, mazUi, mergePresets, nova, obsidian, ocean, pristine, removeCSS, setupTheme, useTheme };

package/dist/plugin.js

@@ -1 +1,12 @@
-import{injectThemeState}from"./utils/inject.js";import{setupTheme}from"./utils/setup-theme.js";var MazUiTheme={install(app,options){let{themeState}=setupTheme(options);injectThemeState({app,themeState})}};export{MazUiTheme};
+import { injectThemeState } from "./utils/inject.js";
+import { setupTheme } from "./utils/setup-theme.js";
+//#region src/plugin.ts
+var MazUiTheme = { install(app, options) {
+	let { themeState } = setupTheme(options);
+	injectThemeState({
+		app,
+		themeState
+	});
+} };
+//#endregion
+export { MazUiTheme };

package/dist/presets/_defaults.d.ts

@@ -1,10 +1,19 @@
-import { ThemeComponentBg, ThemeFoundation, ThemeScales } from '../types';
+import { RoundedScaleKey, ThemeComponentBg, ThemeComponents, ThemeFoundation, ThemeScales } from '../types';
 /**
  * Defaults shared across the bundled presets. Each preset can spread these
- * and override the keys it cares about. `rounded` is intentionally NOT shared
- * — every preset declares its own scale anchored on its visual identity.
+ * and override the keys it cares about. The bundled presets only declare
+ * `scales.rounded.md` — the other rounded keys are filled at CSS-generation
+ * time via `calc(var(--maz-rounded-md) * DEFAULT_ROUNDED_RATIOS[key])`. A
+ * preset (or user override) may still set any rounded key to a literal value
+ * to opt out of the calc fallback for that key.
  */
 export declare const DEFAULT_SPACE: NonNullable<ThemeFoundation['space']>;
+/**
+ * Multipliers used to derive the rounded scale from `md` when a key is not
+ * explicitly set. Anchored on `md = 1` (implicit). Picked to match the
+ * scale shared by `nova`, `obsidian` and `ocean`.
+ */
+export declare const DEFAULT_ROUNDED_RATIOS: Record<Exclude<RoundedScaleKey, 'md'>, number>;
 export declare const DEFAULT_SHADOW: ThemeScales['shadow'];
 export declare const DEFAULT_DISABLED_OPACITY = "0.5";
 export declare const DEFAULT_DISABLED_CURSOR = "not-allowed";
@@ -19,15 +28,33 @@ export declare const DEFAULT_FONT_MONO = "ui-monospace, SFMono-Regular, Menlo, M
  */
 export declare const DEFAULT_CONTAINER_BG: ThemeComponentBg;
 /**
- * Per-mode default bg for inputs. Light uses the bare `surface`; dark uses
- * `surface-400` so inputs read as one tier above the page background — the
- * same contrast pattern the v4 components shipped with.
+ * Per-mode default bg for inputs. Light uses the bare `surface`; dark
+ * derives one tier above the page background via relative OKLCh syntax
+ * (mirrors SCALE_OFFSETS step -400: l+0.06) — same contrast pattern the
+ * v4 components shipped with. Self-contained, no Tailwind dependency.
  */
 export declare const DEFAULT_INPUT_BG: ThemeComponentBg;
+/**
+ * Default font-weight used by the top-label in `.m-input` when the
+ * `top-label` prop is set. The value is '600' by default, allowing
+ * presets to easily increase or decrease it when needed.
+ */
+export declare const DEFAULT_INPUT_TOP_LABEL_FONT_WEIGHT = "600";
 /**
  * Default font weight used by `MazBtn` — medium (500). Presets can
  * override via `components.btn.font-weight` to bias the button text
  * heavier or lighter for their visual identity.
  */
 export declare const DEFAULT_BTN_FONT_WEIGHT = "500";
+/**
+ * Default `max-width` / `min-width` for `MazDialog` on tablet and up.
+ * Anchored on a 14px `base-font-size` (38rem ≈ 532px, 32rem ≈ 448px).
+ * Presets with a different `base-font-size` (e.g. ocean at 16px) should
+ * scale these in rem to keep the rendered pixel width consistent.
+ * Consumed by the component via `var(--maz-dialog-max-width, 38rem)` /
+ * `var(--maz-dialog-min-width, 32rem)`, and still overridable per-instance
+ * through the `max-width` / `min-width` props.
+ */
+export declare const DEFAULT_DIALOG_MAX_WIDTH: NonNullable<ThemeComponents['dialog']>['max-width'];
+export declare const DEFAULT_DIALOG_MIN_WIDTH: NonNullable<ThemeComponents['dialog']>['min-width'];
 //# sourceMappingURL=_defaults.d.ts.map

package/dist/presets/_defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_defaults.d.ts","sourceRoot":"","sources":["../../src/presets/_defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE9E;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,WAAW,CAAC,eAAe,CAAC,OAAO,CAAC,CAAa,CAAA;AAE7E,eAAO,MAAM,cAAc,EAAE,WAAW,CAAC,QAAQ,CAMhD,CAAA;AAED,eAAO,MAAM,wBAAwB,QAAQ,CAAA;AAC7C,eAAO,MAAM,uBAAuB,gBAAgB,CAAA;AAEpD;;GAEG;AACH,eAAO,MAAM,iBAAiB,uGAC0E,CAAA;AAExG;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,gBAGlC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBAG9B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,QAAQ,CAAA"}
+{"version":3,"file":"_defaults.d.ts","sourceRoot":"","sources":["../../src/presets/_defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAEhH;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,WAAW,CAAC,eAAe,CAAC,OAAO,CAAC,CAAa,CAAA;AAE7E;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE,IAAI,CAAC,EAAE,MAAM,CAOjF,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,WAAW,CAAC,QAAQ,CAMhD,CAAA;AAED,eAAO,MAAM,wBAAwB,QAAQ,CAAA;AAC7C,eAAO,MAAM,uBAAuB,gBAAgB,CAAA;AAEpD;;GAEG;AACH,eAAO,MAAM,iBAAiB,uGAC0E,CAAA;AAExG;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,gBAGlC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBAG9B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,mCAAmC,QAAQ,CAAA;AAExD;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,QAAQ,CAAA;AAE5C;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,EAAE,WAAW,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAW,CAAA;AACpG,eAAO,MAAM,wBAAwB,EAAE,WAAW,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAW,CAAA"}

package/dist/presets/_defaults.js

@@ -1 +1,34 @@
-var DEFAULT_SPACE=`0.25rem`;var DEFAULT_SHADOW={sm:`0 1px 2px 0 rgb(0 0 0 / 0.05)`,md:`0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`,lg:`0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`,xl:`0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)`,elevation:`0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -1px rgb(0 0 0 / 0.06)`};var DEFAULT_DISABLED_OPACITY=`0.5`;var DEFAULT_DISABLED_CURSOR=`not-allowed`;var DEFAULT_FONT_MONO=`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`;var DEFAULT_CONTAINER_BG={light:`var(--maz-surface)`,dark:`var(--maz-surface)`};var DEFAULT_INPUT_BG={light:`var(--maz-surface)`,dark:`var(--maz-surface-400)`};var DEFAULT_BTN_FONT_WEIGHT=`500`;export{DEFAULT_BTN_FONT_WEIGHT,DEFAULT_CONTAINER_BG,DEFAULT_DISABLED_CURSOR,DEFAULT_DISABLED_OPACITY,DEFAULT_FONT_MONO,DEFAULT_INPUT_BG,DEFAULT_SHADOW,DEFAULT_SPACE};
+//#region src/presets/_defaults.ts
+var DEFAULT_SPACE = "0.25rem";
+var DEFAULT_ROUNDED_RATIOS = {
+	xs: .25,
+	sm: .5,
+	lg: 1.5,
+	xl: 2,
+	"2xl": 3,
+	"3xl": 4
+};
+var DEFAULT_SHADOW = {
+	sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+	md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+	lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+	xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+	elevation: "0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -1px rgb(0 0 0 / 0.06)"
+};
+var DEFAULT_DISABLED_OPACITY = "0.5";
+var DEFAULT_DISABLED_CURSOR = "not-allowed";
+var DEFAULT_FONT_MONO = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+var DEFAULT_CONTAINER_BG = {
+	light: "var(--maz-surface)",
+	dark: "var(--maz-surface)"
+};
+var DEFAULT_INPUT_BG = {
+	light: "var(--maz-surface)",
+	dark: "oklch(from var(--maz-surface) clamp(0, calc(l + 0.06), 1) c h)"
+};
+var DEFAULT_INPUT_TOP_LABEL_FONT_WEIGHT = "600";
+var DEFAULT_BTN_FONT_WEIGHT = "500";
+var DEFAULT_DIALOG_MAX_WIDTH = "38rem";
+var DEFAULT_DIALOG_MIN_WIDTH = "32rem";
+//#endregion
+export { DEFAULT_BTN_FONT_WEIGHT, DEFAULT_CONTAINER_BG, DEFAULT_DIALOG_MAX_WIDTH, DEFAULT_DIALOG_MIN_WIDTH, DEFAULT_DISABLED_CURSOR, DEFAULT_DISABLED_OPACITY, DEFAULT_FONT_MONO, DEFAULT_INPUT_BG, DEFAULT_INPUT_TOP_LABEL_FONT_WEIGHT, DEFAULT_ROUNDED_RATIOS, DEFAULT_SHADOW, DEFAULT_SPACE };

package/dist/presets/index.js

@@ -1 +1,6 @@
-import{pristine}from"./pristine.js";import{ocean}from"./ocean.js";import{obsidian}from"./obsidian.js";import{nova}from"./nova.js";import{mazUi}from"./mazUi.js";export{mazUi,nova,obsidian,ocean,pristine};
+import { pristine } from "./pristine.js";
+import { ocean } from "./ocean.js";
+import { obsidian } from "./obsidian.js";
+import { nova } from "./nova.js";
+import { mazUi } from "./mazUi.js";
+export { mazUi, nova, obsidian, ocean, pristine };

package/dist/presets/mazUi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mazUi.d.ts","sourceRoot":"","sources":["../../src/presets/mazUi.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAc3C,eAAO,MAAM,KAAK,EAAE,WAqFnB,CAAA"}
+{"version":3,"file":"mazUi.d.ts","sourceRoot":"","sources":["../../src/presets/mazUi.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAiB3C,eAAO,MAAM,KAAK,EAAE,WA8EnB,CAAA"}