@maz-ui/mcp 5.0.0-beta.6 → 5.0.0-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/mcp.mjs +1 -1
  2. package/docs/generated-docs/maz-circular-progress-bar.doc.md +1 -1
  3. package/docs/generated-docs/maz-code-highlight.doc.md +11 -0
  4. package/docs/generated-docs/maz-drawer.doc.md +1 -1
  5. package/docs/generated-docs/maz-fullscreen-loader.doc.md +5 -5
  6. package/docs/generated-docs/maz-gallery.doc.md +15 -15
  7. package/docs/generated-docs/maz-sidebar-content.doc.md +5 -0
  8. package/docs/generated-docs/maz-sidebar-footer.doc.md +5 -0
  9. package/docs/generated-docs/maz-sidebar-group.doc.md +11 -0
  10. package/docs/generated-docs/maz-sidebar-header.doc.md +5 -0
  11. package/docs/generated-docs/maz-sidebar-menu-button.doc.md +26 -0
  12. package/docs/generated-docs/maz-sidebar-menu-item.doc.md +5 -0
  13. package/docs/generated-docs/maz-sidebar-menu-sub.doc.md +16 -0
  14. package/docs/generated-docs/maz-sidebar-menu.doc.md +5 -0
  15. package/docs/generated-docs/maz-sidebar-separator.doc.md +0 -0
  16. package/docs/generated-docs/maz-sidebar-trigger.doc.md +11 -0
  17. package/docs/generated-docs/maz-sidebar.doc.md +33 -0
  18. package/docs/generated-docs/maz-slider.doc.md +1 -1
  19. package/docs/generated-docs/maz-spinner.doc.md +4 -4
  20. package/docs/generated-docs/maz-ticker.doc.md +1 -1
  21. package/docs/generated-docs/maz-window-mockup.doc.md +23 -0
  22. package/docs/src/blog/v5.md +1 -3
  23. package/docs/src/components/maz-code-highlight.md +233 -0
  24. package/docs/src/components/maz-sidebar.md +621 -0
  25. package/docs/src/components/maz-timeline.md +60 -0
  26. package/docs/src/components/maz-window-mockup.md +249 -0
  27. package/docs/src/directives/click-outside.md +7 -14
  28. package/docs/src/directives/lazy-img.md +4 -4
  29. package/docs/src/guide/getting-started.md +13 -11
  30. package/docs/src/guide/maz-ui-provider.md +6 -3
  31. package/docs/src/guide/migration-v4.md +7 -3
  32. package/docs/src/guide/migration-v5.md +67 -12
  33. package/docs/src/guide/nuxt.md +53 -46
  34. package/docs/src/guide/tailwind.md +4 -0
  35. package/docs/src/guide/themes.md +127 -69
  36. package/docs/src/helpers/capitalize.md +2 -3
  37. package/docs/src/helpers/currency.md +2 -2
  38. package/docs/src/helpers/date.md +2 -2
  39. package/docs/src/helpers/number.md +2 -2
  40. package/docs/src/plugins/wait.md +1 -1
  41. package/package.json +3 -3
package/docs/src/guide/nuxt.md CHANGED
@@ -126,11 +126,13 @@ export default defineNuxtConfig({
126
126
  theme: {
127
127
  preset: 'maz-ui', // 'maz-ui' | 'pristine' | 'ocean' | 'obsidian' | 'nova' | custom object
128
128
  strategy: 'runtime', // 'runtime' | 'buildtime'
129
- darkModeStrategy: 'class', // 'class' | 'media' | 'auto'
129
+ darkModeStrategy: 'class', // 'class' | 'media'
130
+ darkClass: 'dark', // class on <html> when colorMode === 'dark' (default: 'dark')
131
+ lightClass: 'light', // class on <html> when colorMode === 'light' (default: 'light')
130
132
  overrides: {
131
133
  colors: {
132
- light: { primary: '220 100% 50%' },
133
- dark: { primary: '220 100% 70%' }
134
+ light: { primary: 'oklch(0.65 0.19 254)' },
135
+ dark: { primary: 'oklch(0.72 0.18 254)' }
134
136
  }
135
137
  },
136
138
  mode: 'both', // 'light' | 'dark' | 'both'
@@ -220,16 +222,16 @@ const theme = {
220
222
  overrides: {
221
223
  colors: {
222
224
  light: {
223
- primary: '220 100% 50%',
224
- secondary: '220 14% 96%',
225
- surface: '0 0% 100%',
226
- foreground: '222 84% 5%',
225
+ primary: 'oklch(0.6 0.18 254)',
226
+ secondary: 'oklch(0.96 0.01 254)',
227
+ surface: 'oklch(1 0 0)',
228
+ foreground: 'oklch(0.16 0.02 254)',
227
229
  },
228
230
  dark: {
229
- primary: '220 100% 70%',
230
- secondary: '220 14% 4%',
231
- surface: '222 84% 5%',
232
- foreground: '210 40% 98%',
231
+ primary: 'oklch(0.72 0.18 254)',
232
+ secondary: 'oklch(0.22 0.02 254)',
233
+ surface: 'oklch(0.16 0.02 254)',
234
+ foreground: 'oklch(0.96 0.005 254)',
233
235
  }
234
236
  },
235
237
  // Override other theme properties...
@@ -245,7 +247,14 @@ const theme = {
245
247
  strategy: 'runtime', // 'runtime' (recommended) | 'buildtime'
246
248
 
247
249
  // Dark mode handling
248
- darkModeStrategy: 'class', // 'class' | 'media' | 'auto'
250
+ darkModeStrategy: 'class', // 'class' | 'media'
251
+
252
+ // Class added to <html> when colorMode === 'dark' (default: 'dark')
253
+ darkClass: 'dark',
254
+
255
+ // Class added to <html> when colorMode === 'light' (default: 'light')
256
+ // Mirror of darkClass — used to force `color-scheme: only light`.
257
+ lightClass: 'light',
249
258
 
250
259
  // Persist the active preset name in the `maz-preset` cookie so the
251
260
  // user's last-used theme is restored on reload. Default: true.
@@ -379,41 +388,39 @@ import { definePreset } from '@maz-ui/themes'
379
388
 
380
389
  export const customTheme = definePreset({
381
390
  base: 'maz-ui',
382
- name: 'custom',
383
- foundation: {
384
- 'base-font-size': '14px',
385
- 'font-family': `Manrope, sans-serif, system-ui, -apple-system`,
386
- 'space': '0.25rem',
387
- 'border-width': '0.0625rem',
388
- },
389
- scales: {
390
- rounded: { md: '0.7rem' },
391
- },
392
- colors: {
393
- light: {
394
- primary: '350 100% 50%', // Custom pink
395
- secondary: '350 14% 96%',
396
- surface: '0 0% 100%',
397
- foreground: '222 84% 5%',
398
- muted: '210 40% 96%',
399
- accent: '210 40% 90%',
400
- destructive: '0 84% 60%',
401
- border: '214 32% 91%',
402
- input: '214 32% 91%',
403
- ring: '350 100% 50%',
391
+ overrides: {
392
+ name: 'custom',
393
+ foundation: {
394
+ 'base-font-size': '14px',
395
+ 'font-family': `Manrope, sans-serif, system-ui, -apple-system`,
396
+ 'space': '0.25rem',
397
+ 'border-width': '0.0625rem',
398
+ },
399
+ scales: {
400
+ rounded: { md: '0.7rem' },
401
+ },
402
+ colors: {
403
+ light: {
404
+ primary: 'oklch(0.65 0.27 5)', // Custom pink
405
+ secondary: 'oklch(0.96 0.01 5)',
406
+ surface: 'oklch(1 0 0)',
407
+ foreground: 'oklch(0.16 0.02 254)',
408
+ muted: 'oklch(0.6 0.01 254)',
409
+ accent: 'oklch(0.7 0.05 5)',
410
+ destructive: 'oklch(0.6 0.22 27)',
411
+ divider: 'oklch(0.92 0.005 254)',
412
+ },
413
+ dark: {
414
+ primary: 'oklch(0.75 0.22 5)',
415
+ secondary: 'oklch(0.24 0.02 5)',
416
+ surface: 'oklch(0.16 0.02 254)',
417
+ foreground: 'oklch(0.96 0.005 254)',
418
+ muted: 'oklch(0.6 0.01 254)',
419
+ accent: 'oklch(0.3 0.04 5)',
420
+ destructive: 'oklch(0.55 0.2 27)',
421
+ divider: 'oklch(0.3 0.01 254)',
422
+ }
404
423
  },
405
- dark: {
406
- primary: '350 100% 70%',
407
- secondary: '350 14% 4%',
408
- surface: '222 84% 5%',
409
- foreground: '210 40% 98%',
410
- muted: '217 33% 17%',
411
- accent: '217 33% 17%',
412
- destructive: '0 62% 30%',
413
- border: '217 33% 17%',
414
- input: '217 33% 17%',
415
- ring: '350 100% 70%',
416
- }
417
424
  },
418
425
  })
419
426
 
package/docs/src/guide/tailwind.md CHANGED
@@ -47,6 +47,10 @@ Each one comes with `bg-X`, `text-X`, `border-X`, an 11-step scale (`bg-X-50`
47
47
  <div class="bg-success-100 text-success-700">Saved!</div>
48
48
  ```
49
49
 
50
+ ::: info Alpha utilities and scales in v5
51
+ `bg-primary/60`, `text-primary/40`, `border-primary/50` and the rest of Tailwind's alpha syntax continue to work unchanged. In v5 the 50–950 scales are derived in CSS via OKLCh relative color syntax and the base colors are resolved through `light-dark()`, but this is invisible at the utility level — your Tailwind classes don't change.
52
+ :::
53
+
50
54
  ### Neutral & surface colors
51
55
 
52
56
  These don't have a foreground variant — they're typically used for backgrounds, text, borders or overlays directly. Each one still ships an 11-step scale.
package/docs/src/guide/themes.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  title: Theming
3
- description: Modern and performant theme system for Maz-UI with TypeScript, HSL CSS variables and flexible strategies.
3
+ description: Modern and performant theme system for Maz-UI built on native CSS features (`light-dark()`, `color-scheme`, `color-mix(in oklch)`) for v5.
4
4
  ---
5
5
 
6
6
  # {{ $frontmatter.title }}
@@ -11,9 +11,11 @@ description: Modern and performant theme system for Maz-UI with TypeScript, HSL
11
11
 
12
12
  ## Features
13
13
 
14
- - **Modern HSL CSS Variables** - Maximum flexibility with colors
15
- - **Smart Dark Mode** - Automatic support with `prefers-color-scheme`
16
- - **Automatic Generation** - Color scales (50-950) created automatically
14
+ - **Native `light-dark()` + `color-scheme`** - Modern CSS theming with zero JS overhead for the light/dark switch
15
+ - **Native widget theming** - `color-scheme` makes scrollbars, native `<select>`, date pickers and autofill follow the active mode automatically
16
+ - **Animated theme switch** - Optional full-page View Transitions via `setColorMode(..., { animate: true })`
17
+ - **Anti-FART** - `<meta name="color-scheme">` injected at boot to prevent any Flash of inAccurate coloR Theme (no setup needed)
18
+ - **Automatic color scales** - `--maz-X-50` through `--maz-X-950` derived via OKLCh relative color syntax — perceptually uniform and chroma-preserving
17
19
  - **Performance Strategies** - Runtime injection or build-time generation according to your needs
18
20
  - **Strict TypeScript** - Complete types for perfect DX
19
21
  - **Zero FOUC** - Pass the preset object up front; the full CSS is injected synchronously on first paint
@@ -44,6 +46,10 @@ app.use(MazUi, {
44
46
  darkModeStrategy: 'class', // 'class' | 'media' (only if mode is `both`)
45
47
  mode: 'both', // 'light' | 'dark' | 'both' (supported color modes)
46
48
  colorMode: 'auto', // 'auto' | 'light' | 'dark' (initial color mode, only if mode is 'both')
49
+ // Class added to <html> when dark mode is forced (default: 'dark')
50
+ darkClass: 'dark',
51
+ // Class added to <html> when light mode is forced (default: 'light')
52
+ lightClass: 'light',
47
53
  persistPreset: true, // remember the active preset name across reloads
48
54
  }
49
55
  })
@@ -89,10 +95,12 @@ const { toggleDarkMode, isDark, updateTheme } = useTheme()
89
95
 
90
96
  - `preset`: The theme preset to use
91
97
  - `overrides` (optional): Override specific parts of the theme
92
- - `strategy` (optional): The rendering strategy to use
93
- - `darkModeStrategy` (optional): The dark mode strategy to use, only if you use mode `both`
94
- - `mode` (optional): The supported color modes to use (light, dark, both)
95
- - `colorMode` (optional): The initial color mode to use (only if mode is 'both')
98
+ - `strategy` (optional, default `'runtime'`): The rendering strategy to use — `'runtime' | 'buildtime'`
99
+ - `darkModeStrategy` (optional, default `'class'`): The dark mode strategy — `'class' | 'media'`, only if you use mode `both`
100
+ - `mode` (optional, default `'both'`): The supported color modes — `'light' | 'dark' | 'both'`
101
+ - `colorMode` (optional, default `'auto'`): The initial color mode — `'light' | 'dark' | 'auto'` (only if mode is `'both'`)
102
+ - `darkClass` (optional, default `'dark'`): Class added to `<html>` when `colorMode === 'dark'`
103
+ - `lightClass` (optional, default `'light'`): Class added to `<html>` when `colorMode === 'light'` — mirror of `darkClass`
96
104
  - `persistPreset` (optional, default `true`): Persist the active preset name in the `maz-preset` cookie so it is restored on reload.
97
105
 
98
106
  ### Preset persistence
@@ -118,6 +126,48 @@ Useful when:
118
126
  - You want zero theme-related cookies (privacy / regulatory).
119
127
  - The active preset is fully driven by the consumer app and no end-user switching is exposed.
120
128
 
129
+ ## Color modes and class toggling
130
+
131
+ `darkClass` and `lightClass` interact with `darkModeStrategy` to control how `<html>` is decorated when the user picks an explicit mode.
132
+
133
+ ### `darkModeStrategy: 'class'` (default)
134
+
135
+ - `setColorMode('dark')` adds `darkClass` (default `.dark`) to `<html>` → `color-scheme: only dark`.
136
+ - `setColorMode('light')` adds `lightClass` (default `.light`) to `<html>` → `color-scheme: only light`.
137
+ - `setColorMode('auto')` removes both classes → `color-scheme: light dark` lets the browser follow the system `prefers-color-scheme`.
138
+
139
+ Forcing both classes on the root ensures native widgets (scrollbars, native `<select>`, date pickers, autofill backgrounds, …) match the explicit user choice rather than the OS preference.
140
+
141
+ ### `darkModeStrategy: 'media'`
142
+
143
+ - No class is ever added to `<html>`.
144
+ - The browser always follows `prefers-color-scheme` via `color-scheme: light dark`.
145
+ - `setColorMode()` still updates the persisted cookie but does **not** force a visual override.
146
+
147
+ ## Animated theme switch
148
+
149
+ For a full-page animated swap (rather than per-variable color tweens), pass `{ animate: true }` to `setColorMode` or `toggleDarkMode`:
150
+
151
+ ```vue
152
+ <script setup>
153
+ import { useTheme } from '@maz-ui/themes'
154
+
155
+ const { toggleDarkMode, setColorMode } = useTheme()
156
+
157
+ async function onToggle() {
158
+ await toggleDarkMode({ animate: true })
159
+ }
160
+
161
+ async function forceDark() {
162
+ await setColorMode('dark', { animate: true })
163
+ }
164
+ </script>
165
+ ```
166
+
167
+ - Wraps the switch in `document.startViewTransition()` so the browser captures a snapshot of the page before/after and crossfades between them.
168
+ - The View Transition glue is **lazy-imported** — when `animate` is not used, it stays out of the boot bundle.
169
+ - **Graceful degradation:** in browsers that don't support the API, the change is applied immediately with no animation (no error thrown).
170
+
121
171
  ## Interactive Demo
122
172
 
123
173
  <ComponentDemo title="Real-time theme control">
@@ -395,14 +445,14 @@ const customTheme = await definePreset({
395
445
  },
396
446
  colors: {
397
447
  light: {
398
- primary: '280 100% 60%',
399
- secondary: '300 50% 90%',
400
- accent: '260 100% 70%'
448
+ primary: 'oklch(0.62 0.24 305)',
449
+ secondary: 'oklch(0.94 0.04 320)',
450
+ accent: 'oklch(0.7 0.22 290)'
401
451
  },
402
452
  dark: {
403
- primary: '280 100% 70%',
404
- secondary: '300 30% 20%',
405
- accent: '260 100% 80%'
453
+ primary: 'oklch(0.72 0.22 305)',
454
+ secondary: 'oklch(0.28 0.06 320)',
455
+ accent: 'oklch(0.78 0.2 290)'
406
456
  }
407
457
  }
408
458
  },
@@ -449,16 +499,16 @@ const brandTheme = await definePreset({
449
499
  },
450
500
  colors: {
451
501
  light: {
452
- primary: '210 100% 50%',
453
- secondary: '210 40% 96%',
454
- surface: '210 20% 98%',
455
- accent: '280 100% 70%'
502
+ primary: 'oklch(0.6 0.18 254)',
503
+ secondary: 'oklch(0.96 0.01 254)',
504
+ surface: 'oklch(0.99 0.005 254)',
505
+ accent: 'oklch(0.7 0.22 305)'
456
506
  },
457
507
  dark: {
458
- primary: '210 100% 60%',
459
- secondary: '210 40% 15%',
460
- surface: '210 20% 8%',
461
- accent: '280 100% 80%'
508
+ primary: 'oklch(0.7 0.18 254)',
509
+ secondary: 'oklch(0.22 0.03 254)',
510
+ surface: 'oklch(0.18 0.02 254)',
511
+ accent: 'oklch(0.78 0.2 305)'
462
512
  }
463
513
  }
464
514
  }
@@ -530,7 +580,7 @@ const surfaceTheme = definePreset({
530
580
  },
531
581
  container: {
532
582
  // Cards / dialogs / popovers / drawers — light = page surface, dark = a tier above
533
- bg: { light: 'var(--maz-surface)', dark: 'var(--maz-surface-300)' },
583
+ bg: { light: 'var(--maz-surface)', dark: 'var(--maz-color-surface-300)' },
534
584
  },
535
585
  input: {
536
586
  // All form-control surfaces
@@ -548,18 +598,32 @@ Components consume these via `maz:bg-container` / `maz:bg-input` Tailwind utilit
548
598
  ```typescript
549
599
  const {
550
600
  // Reactive state
601
+ preset, // ComputedRef<ThemePreset>
551
602
  presetName, // ComputedRef<string>
552
- colorMode, // ComputedRef<'light' | 'dark' | 'auto'>
603
+ colorMode, // Ref<'light' | 'dark' | 'auto'> — also accepts assignment (computed setter)
553
604
  isDark, // ComputedRef<boolean>
554
605
  strategy, // ComputedRef<'runtime' | 'buildtime'>
606
+ mode, // ComputedRef<'light' | 'dark' | 'both'>
607
+ darkModeStrategy, // ComputedRef<'class' | 'media'>
555
608
 
556
609
  // Actions
557
- updateTheme, // (preset: ThemePreset | ThemePresetOverrides) => void
558
- setColorMode, // (mode: 'light' | 'dark' | 'auto') => void
559
- toggleDarkMode // () => void
610
+ updateTheme, // (preset: ThemePreset | ThemePresetName | ThemePresetOverrides) => Promise<void>
611
+ setColorMode, // (mode: 'light' | 'dark' | 'auto', options?: { animate?: boolean }) => Promise<void>
612
+ toggleDarkMode, // (options?: { animate?: boolean }) => Promise<void>
560
613
  } = useTheme()
614
+
615
+ // Set the color mode imperatively
616
+ await setColorMode('dark')
617
+
618
+ // Or assign to `colorMode` — it's a computed with a setter
619
+ colorMode.value = 'dark'
620
+
621
+ // Animated full-page switch via View Transitions
622
+ await toggleDarkMode({ animate: true })
561
623
  ```
562
624
 
625
+ `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.
626
+
563
627
  ### Advanced Usage Examples
564
628
 
565
629
  ```vue
@@ -623,8 +687,8 @@ const customPreset = definePreset({
623
687
  overrides: {
624
688
  name: 'custom',
625
689
  colors: {
626
- light: { primary: '221.2 83.2% 53.3%' },
627
- dark: { primary: '217.2 91.2% 59.8%' },
690
+ light: { primary: 'oklch(0.6 0.18 254)' },
691
+ dark: { primary: 'oklch(0.7 0.18 254)' },
628
692
  },
629
693
  },
630
694
  })
@@ -687,8 +751,8 @@ const customPreset = definePreset({
687
751
  overrides: {
688
752
  name: 'custom',
689
753
  colors: {
690
- light: { primary: '221.2 83.2% 53.3%' },
691
- dark: { primary: '217.2 91.2% 59.8%' },
754
+ light: { primary: 'oklch(0.6 0.18 254)' },
755
+ dark: { primary: 'oklch(0.7 0.18 254)' },
692
756
  },
693
757
  },
694
758
  })
@@ -729,8 +793,8 @@ const customPreset = definePreset({
729
793
  overrides: {
730
794
  name: 'custom',
731
795
  colors: {
732
- light: { primary: '221.2 83.2% 53.3%' },
733
- dark: { primary: '217.2 91.2% 59.8%' },
796
+ light: { primary: 'oklch(0.6 0.18 254)' },
797
+ dark: { primary: 'oklch(0.7 0.18 254)' },
734
798
  },
735
799
  },
736
800
  })
@@ -819,7 +883,7 @@ const styleTag = createThemeStylesheet(css, {
819
883
 
820
884
  ## Token Reference
821
885
 
822
- Every preset emits the same set of CSS variables on `:root` (and a `.dark` block when `mode: 'both'`). Use these names directly in your own CSS — `var(--maz-primary)`, `calc(var(--maz-space) * 4)`, etc.
886
+ Every preset emits the same set of CSS variables on `:root`. With `mode: 'both'`, each base color is a single `light-dark(L, D)` declaration that the browser resolves to the active scheme. Use these names directly in your own CSS — `var(--maz-primary)`, `calc(var(--maz-space) * 4)`, etc.
823
887
 
824
888
  ### Foundation
825
889
 
@@ -896,13 +960,22 @@ Per-component knobs under `components.<key>`. All optional — omit to fall back
896
960
 
897
961
  ### Sample output
898
962
 
963
+ Each base color is emitted as a `light-dark()` value; scales `--maz-X-50` through `--maz-X-950` are derived via OKLCh relative color syntax so they automatically follow base color overrides at runtime, preserving chroma at every step.
964
+
899
965
  ```css
900
966
  :root {
901
- /* Main colors */
902
- --maz-primary: oklch(0.6495 0.1913 253.63);
903
- --maz-primary-foreground: oklch(1 0 0);
904
- --maz-surface: oklch(1 0 0);
905
- --maz-foreground: oklch(0.2573 0.0068 248.09);
967
+ color-scheme: light dark;
968
+
969
+ /* Base colors — one declaration each, resolved by the browser */
970
+ --maz-primary: light-dark(oklch(0.65 0.19 254), oklch(0.72 0.18 254));
971
+ --maz-primary-foreground: light-dark(oklch(1 0 0), oklch(0.16 0.01 254));
972
+ --maz-surface: light-dark(oklch(1 0 0), oklch(0.18 0.01 254));
973
+ --maz-foreground: light-dark(oklch(0.26 0.01 254), oklch(0.96 0.005 254));
974
+
975
+ /* Auto-generated 50–950 scale — derived via relative color syntax */
976
+ --maz-primary-500: var(--maz-primary);
977
+ --maz-primary-600: oklch(from var(--maz-primary) clamp(0, calc(l - 0.07), 1) c h);
978
+ /* ... */
906
979
 
907
980
  /* Foundation */
908
981
  --maz-base-font-size: 14px;
@@ -914,31 +987,15 @@ Per-component knobs under `components.<key>`. All optional — omit to fall back
914
987
  /* Scales */
915
988
  --maz-rounded-md: 0.7rem;
916
989
  --maz-shadow-style-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), …;
917
-
918
- /* Auto-generated 50–950 scale */
919
- --maz-primary-500: oklch(…);
920
- /* ... */
921
990
  }
922
- ```
923
-
924
- ### Dark Mode
925
991
 
926
- ```css
927
- .dark {
928
- --maz-surface: 235 16% 15%;
929
- --maz-foreground: 0 0% 85%;
930
- /* Variables automatically adapted */
931
- }
932
-
933
- /* Or with media query */
934
- @media (prefers-color-scheme: dark) {
935
- :root {
936
- --maz-surface: 235 16% 15%;
937
- --maz-foreground: 0 0% 85%;
938
- }
939
- }
992
+ /* With darkModeStrategy: 'class' — explicit user choice overrides the system */
993
+ .dark { color-scheme: only dark; }
994
+ .light { color-scheme: only light; }
940
995
  ```
941
996
 
997
+ For deeper detail on the generated CSS contract, see the [`@maz-ui/themes` README](https://github.com/LouisMazel/maz-ui/tree/master/packages/themes#generated-css-variables).
998
+
942
999
 
943
1000
  ## Usage with Nuxt
944
1001
 
@@ -965,20 +1022,21 @@ export default defineConfig({
965
1022
  ```typescript [After (@maz-ui/themes)]
966
1023
  // main.ts
967
1024
  import { definePreset, mazUi } from '@maz-ui/themes'
1025
+ import { MazUiTheme } from '@maz-ui/themes/plugin'
968
1026
 
969
1027
  const myTheme = definePreset({
970
1028
  base: mazUi,
971
1029
  overrides: {
972
1030
  colors: {
973
1031
  light: {
974
- primary: '210 100% 56%',
975
- secondary: '164 76% 46%'
1032
+ primary: 'oklch(0.65 0.19 254)',
1033
+ secondary: 'oklch(0.72 0.16 168)'
976
1034
  }
977
1035
  }
978
1036
  }
979
1037
  })
980
1038
 
981
- app.use(MazThemePlugin, { preset: myTheme })
1039
+ app.use(MazUiTheme, { preset: myTheme })
982
1040
  ```
983
1041
 
984
1042
  :::
@@ -1007,14 +1065,14 @@ const customPreset = await definePreset({
1007
1065
  name: 'custom-purple',
1008
1066
  colors: {
1009
1067
  light: {
1010
- 'primary': '280 100% 60%',
1011
- 'secondary': '300 50% 90%',
1012
- 'accent': '260 100% 70%'
1068
+ 'primary': 'oklch(0.62 0.24 305)',
1069
+ 'secondary': 'oklch(0.94 0.04 320)',
1070
+ 'accent': 'oklch(0.7 0.22 290)'
1013
1071
  },
1014
1072
  dark: {
1015
- 'primary': '280 100% 70%',
1016
- 'secondary': '300 30% 20%',
1017
- 'accent': '260 100% 80%'
1073
+ 'primary': 'oklch(0.72 0.22 305)',
1074
+ 'secondary': 'oklch(0.28 0.06 320)',
1075
+ 'accent': 'oklch(0.78 0.2 290)'
1018
1076
  }
1019
1077
  }
1020
1078
  }
package/docs/src/helpers/capitalize.md CHANGED
@@ -10,8 +10,7 @@ description: The module capitalize is a function that adds a capital letter to a
10
10
  <MazInput v-model="stringValue" />
11
11
 
12
12
  <div
13
- style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
14
- class="flex flex-center rounded gap-05"
13
+ class="maz:flex maz:flex-center maz:rounded-md maz:gap-0.5 maz:p-4 maz:mt-16 maz:bg-surface-300"
15
14
  >
16
15
  formatted value: <strong>{{ stringFormatted }}</strong>
17
16
  </div>
@@ -32,7 +31,7 @@ const stringFormatted = computed(() =>
32
31
  <MazInput v-model="stringValue" />
33
32
 
34
33
  <div
35
- style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
34
+ class="flex flex-center rounded-md gap-0.5 p-4 mt-16 bg-surface-300"
36
35
  >
37
36
  {{ stringFormatted }}
38
37
  </div>
package/docs/src/helpers/currency.md CHANGED
@@ -16,7 +16,7 @@ Enter only numbers
16
16
  <MazInput v-model="numberValue" type="number" />
17
17
 
18
18
  <div
19
- style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
19
+ style="padding: 16px; margin-top: 16px; background-color: var(--maz-color-surface-300);"
20
20
  class="flex flex-center rounded gap-05"
21
21
  >
22
22
  formatted value: <strong>{{ priceFormatted }}</strong>
@@ -38,7 +38,7 @@ const priceFormatted = computed(() =>
38
38
  <MazInput v-model="numberValue" type="number" />
39
39
 
40
40
  <div
41
- style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
41
+ style="padding: 16px; margin-top: 16px; background-color: var(--maz-color-surface-300);"
42
42
  >
43
43
  {{ priceFormatted }}
44
44
  </div>
package/docs/src/helpers/date.md CHANGED
@@ -12,7 +12,7 @@ description: The module formatDate is a function that formats dates with the nat
12
12
  <MazInput v-model="dateValue" type="date" />
13
13
 
14
14
  <div
15
- style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
15
+ style="padding: 16px; margin-top: 16px; background-color: var(--maz-color-surface-300);"
16
16
  class="flex flex-center rounded gap-05"
17
17
  >
18
18
  formatted value: <strong>{{ dateFormatted }}</strong>
@@ -34,7 +34,7 @@ const dateFormatted = computed(() =>
34
34
  <MazInput v-model="dateValue" type="date" />
35
35
 
36
36
  <div
37
- style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
37
+ style="padding: 16px; margin-top: 16px; background-color: var(--maz-color-surface-300);"
38
38
  >
39
39
  {{ dateFormatted }}
40
40
  </div>
package/docs/src/helpers/number.md CHANGED
@@ -12,7 +12,7 @@ description: The module formatNumber is a function that formats numbers with the
12
12
  <MazInput v-model="numberValue" type="number" />
13
13
 
14
14
  <div
15
- style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
15
+ style="padding: 16px; margin-top: 16px; background-color: var(--maz-color-surface-300);"
16
16
  class="maz:flex maz:flex-center maz:rounded-md maz:gap-0.5"
17
17
  >
18
18
  formatted value: <strong>{{ numberFormatted }}</strong>
@@ -34,7 +34,7 @@ const numberFormatted = computed(() =>
34
34
  <MazInput v-model="numberValue" type="number" />
35
35
 
36
36
  <div
37
- style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
37
+ style="padding: 16px; margin-top: 16px; background-color: var(--maz-color-surface-300);"
38
38
  >
39
39
  {{ numberFormatted }}
40
40
  </div>
package/docs/src/plugins/wait.md CHANGED
@@ -46,7 +46,7 @@ export default defineNuxtConfig({
46
46
 
47
47
  <br />
48
48
 
49
- <div v-if="submitted" style="padding: 20px; background-color: var(--maz-surface-300); border-radius: 10px; margin-top: 1rem;">
49
+ <div v-if="submitted" style="padding: 20px; background-color: var(--maz-color-surface-300); border-radius: 10px; margin-top: 1rem;">
50
50
  Data Submitted
51
51
  </div>
52
52
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@maz-ui/mcp",
3
3
  "type": "module",
4
- "version": "5.0.0-beta.6",
4
+ "version": "5.0.0-beta.9",
5
5
  "description": "Maz-UI ModelContextProtocol Client",
6
6
  "author": "Louis Mazel <me@loicmazuel.com>",
7
7
  "license": "MIT",
@@ -42,7 +42,7 @@
42
42
  ],
43
43
  "dependencies": {
44
44
  "@modelcontextprotocol/sdk": "^1.29.0",
45
- "@maz-ui/node": "5.0.0-beta.5",
45
+ "@maz-ui/node": "5.0.0-beta.8",
46
46
  "@maz-ui/utils": "5.0.0-beta.6"
47
47
  },
48
48
  "devDependencies": {
@@ -52,7 +52,7 @@
52
52
  "ts-node-maintained": "^10.9.5",
53
53
  "tsx": "^4.21.0",
54
54
  "unbuild": "^3.6.1",
55
- "@maz-ui/eslint-config": "5.0.0-beta.6"
55
+ "@maz-ui/eslint-config": "5.0.0-beta.8"
56
56
  },
57
57
  "lint-staged": {
58
58
  "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"