@maz-ui/mcp 5.0.0-beta.6 → 5.0.0-beta.8
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.
- package/dist/mcp.mjs +1 -1
- package/docs/generated-docs/maz-gallery.doc.md +15 -15
- package/docs/src/blog/v5.md +1 -3
- package/docs/src/directives/click-outside.md +7 -14
- package/docs/src/directives/lazy-img.md +4 -4
- package/docs/src/guide/getting-started.md +3 -2
- package/docs/src/guide/maz-ui-provider.md +6 -3
- package/docs/src/guide/migration-v4.md +7 -3
- package/docs/src/guide/migration-v5.md +67 -12
- package/docs/src/guide/nuxt.md +53 -46
- package/docs/src/guide/tailwind.md +4 -0
- package/docs/src/guide/themes.md +127 -69
- package/docs/src/helpers/capitalize.md +2 -3
- package/docs/src/helpers/currency.md +2 -2
- package/docs/src/helpers/date.md +2 -2
- package/docs/src/helpers/number.md +2 -2
- package/docs/src/plugins/wait.md +1 -1
- package/package.json +3 -3
package/dist/mcp.mjs
CHANGED
|
@@ -7,7 +7,7 @@ import { existsSync, readFileSync, readdirSync } from 'node:fs';
|
|
|
7
7
|
import { resolve, join, dirname } from 'node:path';
|
|
8
8
|
import { fileURLToPath } from 'node:url';
|
|
9
9
|
|
|
10
|
-
const version = "5.0.0-beta.
|
|
10
|
+
const version = "5.0.0-beta.6";
|
|
11
11
|
|
|
12
12
|
class MetadataExtractor {
|
|
13
13
|
extract(name, type, content, manualTags = []) {
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
## Props
|
|
2
2
|
|
|
3
|
-
| Name | Description | Type | Required | Default
|
|
4
|
-
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- |
|
|
5
|
-
| **images** | Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]` | `MazGalleryImage[]` | No | `undefined`
|
|
6
|
-
| **displayed-count** | Images count shown (max: 5) | `number` | No | `5`
|
|
7
|
-
| **remaining** | Remove transparent layer with the remain count (ex: +2) | `boolean` | No | `true`
|
|
8
|
-
| **height** | Height of gallery - set to `false` to remove default height | `number \| string \| false` | No | `150`
|
|
9
|
-
| **width** | Width of gallery - set to `false` to remove default width | `number \| string \| false` | No | `100%`
|
|
10
|
-
| **radius** | Disable the border radius of the gallery | `boolean` | No | `false`
|
|
11
|
-
| **zoom** | Disable full size display when clicking on image | `boolean` | No | `false`
|
|
12
|
-
| **has-empty-layer** | Layer with photography icon when no images is provided | `boolean` | No | `true`
|
|
13
|
-
| **lazy** | Lazy load image - if false, images are directly loaded | `boolean` | No | `true`
|
|
14
|
-
| **blur** | Disable blur effect on image hover | `boolean` | No | `true`
|
|
15
|
-
| **scale** | Disable scale animation effect on image hover | `boolean` | No | `true`
|
|
16
|
-
| **separator-color** | Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000`
|
|
17
|
-
| **background-color** | Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000`
|
|
3
|
+
| Name | Description | Type | Required | Default |
|
|
4
|
+
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- | ------------- |
|
|
5
|
+
| **images** | Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]` | `MazGalleryImage[]` | No | `undefined` |
|
|
6
|
+
| **displayed-count** | Images count shown (max: 5) | `number` | No | `5` |
|
|
7
|
+
| **remaining** | Remove transparent layer with the remain count (ex: +2) | `boolean` | No | `true` |
|
|
8
|
+
| **height** | Height of gallery - set to `false` to remove default height | `number \| string \| false` | No | `150` |
|
|
9
|
+
| **width** | Width of gallery - set to `false` to remove default width | `number \| string \| false` | No | `100%` |
|
|
10
|
+
| **radius** | Disable the border radius of the gallery | `boolean` | No | `false` |
|
|
11
|
+
| **zoom** | Disable full size display when clicking on image | `boolean` | No | `false` |
|
|
12
|
+
| **has-empty-layer** | Layer with photography icon when no images is provided | `boolean` | No | `true` |
|
|
13
|
+
| **lazy** | Lazy load image - if false, images are directly loaded | `boolean` | No | `true` |
|
|
14
|
+
| **blur** | Disable blur effect on image hover | `boolean` | No | `true` |
|
|
15
|
+
| **scale** | Disable scale animation effect on image hover | `boolean` | No | `true` |
|
|
16
|
+
| **separator-color** | Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` | `string` | No | `transparent` |
|
|
17
|
+
| **background-color** | Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000` | `string` | No | `undefined` |
|
package/docs/src/blog/v5.md
CHANGED
|
@@ -90,9 +90,7 @@ npx @maz-ui/upgrade ./ --dry-run
|
|
|
90
90
|
npx @maz-ui/upgrade ./
|
|
91
91
|
```
|
|
92
92
|
|
|
93
|
-
It
|
|
94
|
-
|
|
95
|
-
It respects your `.gitignore`, walks `.vue`/`.css`/`.ts`/`.tsx`/`.cts`/`.mts`/`.js`/`.jsx`/`.cjs`/`.mjs` and `package.json`, and skips the usual build dirs.
|
|
93
|
+
It handles the mechanical part of the migration (CSS subpath imports, prop renames, CSS var renames, Nuxt config keys, custom preset color keys, and `package.json` version bumps)
|
|
96
94
|
|
|
97
95
|
### `@maz-ui/mcp` — for everything else
|
|
98
96
|
|
|
@@ -11,8 +11,7 @@ description: vClickOutside is a Vue directive to trigger a function when the use
|
|
|
11
11
|
|
|
12
12
|
<ComponentDemo>
|
|
13
13
|
<div
|
|
14
|
-
|
|
15
|
-
class="maz:flex maz:flex-center maz:rounded-md"
|
|
14
|
+
class="maz:flex maz:flex-center maz:rounded-md maz:p-12 maz:bg-surface-300"
|
|
16
15
|
>
|
|
17
16
|
<MazCard v-click-outside="clikedOutside">
|
|
18
17
|
Click outside me
|
|
@@ -21,8 +20,7 @@ description: vClickOutside is a Vue directive to trigger a function when the use
|
|
|
21
20
|
|
|
22
21
|
<div
|
|
23
22
|
v-if="hasClikedOutside"
|
|
24
|
-
|
|
25
|
-
class="maz:flex maz:flex-center maz:rounded-md"
|
|
23
|
+
class="maz:flex maz:flex-center maz:rounded-md maz:bg-sucess maz:text-success-foreground maz:p-4 maz:mt-4"
|
|
26
24
|
>
|
|
27
25
|
You clicked outside
|
|
28
26
|
</div>
|
|
@@ -44,8 +42,7 @@ function clikedOutside() {
|
|
|
44
42
|
|
|
45
43
|
<template>
|
|
46
44
|
<div
|
|
47
|
-
|
|
48
|
-
class="flex flex-center rounded"
|
|
45
|
+
class="maz:flex maz:flex-center maz:rounded-md maz:p-12 maz:bg-surface-300"
|
|
49
46
|
>
|
|
50
47
|
<MazCard v-click-outside="clikedOutside">
|
|
51
48
|
Click outside me
|
|
@@ -54,8 +51,7 @@ function clikedOutside() {
|
|
|
54
51
|
|
|
55
52
|
<div
|
|
56
53
|
v-if="hasClikedOutside"
|
|
57
|
-
|
|
58
|
-
class="flex flex-center rounded"
|
|
54
|
+
class="maz:flex maz:flex-center maz:rounded-md maz:bg-sucess maz:text-success-foreground maz:p-4 maz:mt-4"
|
|
59
55
|
>
|
|
60
56
|
You clicked outside
|
|
61
57
|
</div>
|
|
@@ -71,8 +67,7 @@ The directive can accept an options object to customize its behavior:
|
|
|
71
67
|
|
|
72
68
|
<ComponentDemo>
|
|
73
69
|
<div
|
|
74
|
-
|
|
75
|
-
class="maz:flex maz:flex-center maz:rounded-md"
|
|
70
|
+
class="maz:flex maz:flex-center maz:rounded-md maz:p-12 maz:bg-surface-300"
|
|
76
71
|
>
|
|
77
72
|
<MazCard v-click-outside="{ callback: clickedOutsideWithIgnore, ignore: ['.ignore-me'] }">
|
|
78
73
|
<div class="maz:p-4">
|
|
@@ -86,8 +81,7 @@ The directive can accept an options object to customize its behavior:
|
|
|
86
81
|
|
|
87
82
|
<div
|
|
88
83
|
v-if="hasClickedOutsideWithIgnore"
|
|
89
|
-
|
|
90
|
-
class="maz:flex maz:flex-center maz:rounded-md"
|
|
84
|
+
class="maz:flex maz:flex-center maz:rounded-md maz:bg-sucess maz:text-success-foreground maz:p-4 maz:mt-4"
|
|
91
85
|
>
|
|
92
86
|
You clicked outside (button clicks are ignored)
|
|
93
87
|
</div>
|
|
@@ -128,8 +122,7 @@ The directive can be configured to trigger only once:
|
|
|
128
122
|
|
|
129
123
|
<ComponentDemo>
|
|
130
124
|
<div
|
|
131
|
-
|
|
132
|
-
class="maz:flex maz:flex-center maz:rounded-md"
|
|
125
|
+
class="maz:flex maz:flex-center maz:rounded-md maz:p-12 maz:bg-surface-300"
|
|
133
126
|
>
|
|
134
127
|
<MazCard v-click-outside="{ callback: clickedOnce, once: true }">
|
|
135
128
|
Click outside me (works only once)
|
|
@@ -10,7 +10,7 @@ description: vLazyImg is a Vue directive to lazy load images with many options.
|
|
|
10
10
|
## Basic usage
|
|
11
11
|
|
|
12
12
|
<img
|
|
13
|
-
style="background-color: var(--maz-surface-300); width: 80%;"
|
|
13
|
+
style="background-color: var(--maz-color-surface-300); width: 80%;"
|
|
14
14
|
class="flex flex-center rounded"
|
|
15
15
|
v-lazy-img="'https://placedog.net/1500/1000'"
|
|
16
16
|
/>
|
|
@@ -23,7 +23,7 @@ import { vLazyImg } from 'maz-ui/directives'
|
|
|
23
23
|
<template>
|
|
24
24
|
<img
|
|
25
25
|
v-lazy-img="'https://placedog.net/1500/1000'"
|
|
26
|
-
style="background-color: var(--maz-surface-300); width: 80%;"
|
|
26
|
+
style="background-color: var(--maz-color-surface-300); width: 80%;"
|
|
27
27
|
class="flex flex-center rounded"
|
|
28
28
|
>
|
|
29
29
|
</template>
|
|
@@ -54,7 +54,7 @@ import { vLazyImg } from 'maz-ui/directives'
|
|
|
54
54
|
> Open the developer console to show logs
|
|
55
55
|
|
|
56
56
|
<img
|
|
57
|
-
style="background-color: var(--maz-surface-300); width: 80%;"
|
|
57
|
+
style="background-color: var(--maz-color-surface-300); width: 80%;"
|
|
58
58
|
class="flex flex-center rounded"
|
|
59
59
|
v-lazy-img="lazyBinding"
|
|
60
60
|
/>
|
|
@@ -83,7 +83,7 @@ const lazyBinding: vLazyImgBindingValue = {
|
|
|
83
83
|
<template>
|
|
84
84
|
<img
|
|
85
85
|
v-lazy-img="lazyBinding"
|
|
86
|
-
style="background-color: var(--maz-surface-300); width: 80%;"
|
|
86
|
+
style="background-color: var(--maz-color-surface-300); width: 80%;"
|
|
87
87
|
class="flex flex-center rounded"
|
|
88
88
|
>
|
|
89
89
|
</template>
|
|
@@ -93,8 +93,9 @@ npm install @maz-ui/themes
|
|
|
93
93
|
|
|
94
94
|
**Features:**
|
|
95
95
|
|
|
96
|
-
- 🎨
|
|
97
|
-
- 🌓 Smart dark mode
|
|
96
|
+
- 🎨 Native `light-dark()` + `color-scheme` + OKLCh scales via relative color syntax
|
|
97
|
+
- 🌓 Smart dark mode — `class` or `media` strategies, with smooth transitions on toggle
|
|
98
|
+
- ✨ Optional animated theme switch via View Transitions (`setColorMode(..., { animate: true })`)
|
|
98
99
|
- ⚡ `runtime` and `buildtime` rendering strategies
|
|
99
100
|
- 🍪 Active preset persisted across reloads (opt-out)
|
|
100
101
|
- 🛡️ Full TypeScript support
|
|
@@ -97,12 +97,15 @@ The entire Maz-UI setup is now code-split into the Dashboard chunk.
|
|
|
97
97
|
|
|
98
98
|
```typescript
|
|
99
99
|
interface ThemeOptions {
|
|
100
|
-
preset: ThemePreset
|
|
101
|
-
overrides?: ThemePresetOverrides
|
|
102
|
-
strategy?: 'runtime' | 'buildtime'
|
|
100
|
+
preset: ThemePreset // Required - Theme preset (mazUi, ocean, pristine, obsidian, nova, or custom)
|
|
101
|
+
overrides?: ThemePresetOverrides // Partial overrides for colors, foundation, etc.
|
|
102
|
+
strategy?: 'runtime' | 'buildtime' // CSS generation strategy (default: 'runtime')
|
|
103
103
|
darkModeStrategy?: 'class' | 'media' // Dark mode handling (default: 'class')
|
|
104
104
|
colorMode?: 'light' | 'dark' | 'auto' // Initial color mode (default: 'auto')
|
|
105
105
|
mode?: 'light' | 'dark' | 'both' // Supported color modes (default: 'both')
|
|
106
|
+
darkClass?: string // Class on <html> when colorMode === 'dark' (default: 'dark')
|
|
107
|
+
lightClass?: string // Class on <html> when colorMode === 'light' (default: 'light')
|
|
108
|
+
persistPreset?: boolean // Persist active preset in cookie (default: true)
|
|
106
109
|
}
|
|
107
110
|
```
|
|
108
111
|
|
|
@@ -41,6 +41,10 @@ v4.0.0 isn't just an update, it's a **complete rebuild** that transforms Maz-UI
|
|
|
41
41
|
- **Dynamic CSS Variables**: Automatic CSS variable generation
|
|
42
42
|
- **Intelligent dark mode**: Configurable strategies for dark mode based on system preferences and user choice stored in cookies
|
|
43
43
|
|
|
44
|
+
::: tip Theming further evolved in v5
|
|
45
|
+
The theme system has been rewritten on top of native `light-dark()` + `color-scheme` + `color-mix(in oklch)` in v5. If you are upgrading past v4, see the dedicated [v5 migration guide](./migration-v5.md#theming-native-css-rewrite-new-non-breaking-by-default) for the full theming changes (new `lightClass`, `Promise<void>` returns, removed JS helpers).
|
|
46
|
+
:::
|
|
47
|
+
|
|
44
48
|
#### Complete Internationalization
|
|
45
49
|
|
|
46
50
|
- **9 supported languages by default**: EN, FR, DE, ES, IT, PT, JA, ZH-CN
|
|
@@ -688,12 +692,12 @@ app.use(MazUi, {
|
|
|
688
692
|
<script setup>
|
|
689
693
|
import { useTheme } from 'maz-ui/composables'
|
|
690
694
|
|
|
691
|
-
const { isDark, toggleDarkMode,
|
|
695
|
+
const { isDark, toggleDarkMode, updateTheme } = useTheme()
|
|
692
696
|
|
|
693
697
|
// Change theme
|
|
694
|
-
|
|
698
|
+
updateTheme('ocean')
|
|
695
699
|
|
|
696
|
-
// Toggle dark mode
|
|
700
|
+
// Toggle dark mode (v5: returns Promise<void>, optional { animate } param)
|
|
697
701
|
toggleDarkMode()
|
|
698
702
|
</script>
|
|
699
703
|
|
|
@@ -23,7 +23,7 @@ npx @maz-ui/upgrade ./ --dry-run
|
|
|
23
23
|
npx @maz-ui/upgrade ./
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
It
|
|
26
|
+
It handles the mechanical part of the migration (CSS subpath imports, prop renames, CSS var renames, Nuxt config keys, custom preset color keys, and `package.json` version bumps)
|
|
27
27
|
|
|
28
28
|
What it can't decide for you: the `MazIcon` API simplification (section 4), `MazBadge` numeric size mapping (section 9), `foundation.radius` → `scales.rounded.md` reshape (section 11) and `MazChart` `update-mode` defaults (section 8). Those are best handled with the MCP server below.
|
|
29
29
|
|
|
@@ -557,7 +557,7 @@ rg "color\s*=\s*['\"]background['\"]" src/
|
|
|
557
557
|
|
|
558
558
|
### Theme colors are now emitted as OKLCh
|
|
559
559
|
|
|
560
|
-
`@maz-ui/themes` now ships its bundled presets (`mazUi`, `ocean`, `pristine`, `obsidian`) in `oklch()` form, and the
|
|
560
|
+
`@maz-ui/themes` now ships its bundled presets (`mazUi`, `ocean`, `pristine`, `obsidian`, `nova`) in `oklch()` form, and the runtime CSS variables (`--maz-primary`, `--maz-primary-100`, …) therefore hold OKLCh colors. The 50–950 scale is derived in CSS via OKLCh relative color syntax — `oklch(from var(--maz-X) clamp(0, calc(l ± offset), 1) calc(c * mult) h)` — perceptually uniform, chroma-preserving, and live-reactive to base color overrides.
|
|
561
561
|
|
|
562
562
|
This is **transparent for consumers**:
|
|
563
563
|
|
|
@@ -568,16 +568,8 @@ This is **transparent for consumers**:
|
|
|
568
568
|
|
|
569
569
|
You only need to do something if you were:
|
|
570
570
|
|
|
571
|
-
- **Reading the channel format** of a color from `--maz-*` in JS — the value used to be an `hsl(...)` string, it's now an `oklch(...)` string. Use `getComputedStyle(...).getPropertyValue(...)` and a CSS color parser if you need channels.
|
|
572
|
-
- **Calling
|
|
573
|
-
|
|
574
|
-
```ts
|
|
575
|
-
// v4: HSL L percentage
|
|
576
|
-
adjustColorLightness('hsl(210 50% 40%)', 20) // → 'hsl(210 50% 60%)'
|
|
577
|
-
|
|
578
|
-
// v5: OKLCh L (0..1)
|
|
579
|
-
adjustColorLightness('hsl(210 50% 40%)', 0.2) // → 'oklch(0.65 0.108 232.62)'
|
|
580
|
-
```
|
|
571
|
+
- **Reading the channel format** of a color from `--maz-*` in JS — the value used to be an `hsl(...)` string, it's now an `oklch(...)` string (and at runtime the base may resolve through `light-dark()`). Use `getComputedStyle(...).getPropertyValue(...)` and a CSS color parser if you need channels.
|
|
572
|
+
- **Calling the legacy JS palette helpers** (`generateColorScale`, `adjustColorLightness`, `getContrastColor`, `parseHSL`) — these exports were removed in v5. See [BREAKING — removed exports](#breaking-removed-exports) for replacements.
|
|
581
573
|
|
|
582
574
|
Why the switch: OKLCh is perceptually uniform, so generated scales (`primary-50` → `primary-950`) ramp consistently across hues — yellow-700 won't look muddy compared to blue-700 anymore. It also unlocks Display P3 colors when you author a vivid preset.
|
|
583
575
|
|
|
@@ -615,6 +607,69 @@ Four bundled presets remain (`mazUi`, `pristine`, `ocean`, `obsidian`) plus a ne
|
|
|
615
607
|
|
|
616
608
|
Switching to one of the bundled presets does not require any code change beyond the preset name. If you depended on the previous (washed-out gray) `secondary` color in a custom theme, override it back via `colors.{light,dark}.secondary` in your preset.
|
|
617
609
|
|
|
610
|
+
### Theming: native CSS rewrite (new — non-breaking by default)
|
|
611
|
+
|
|
612
|
+
The `@maz-ui/themes` CSS pipeline was rewritten to lean on native CSS instead of JS:
|
|
613
|
+
|
|
614
|
+
- Base colors are now emitted as a single `--maz-X: light-dark(L, D)` declaration. The browser resolves it for you.
|
|
615
|
+
- Color scales `--maz-X-50` through `--maz-X-950` are derived via OKLCh relative color syntax at runtime, so any override on the base color cascades through the whole scale automatically (and preserves its chroma).
|
|
616
|
+
- `:root` declares `color-scheme: light dark` so native widgets (scrollbars, native `<select>`, date pickers, autofill) follow the active mode out of the box.
|
|
617
|
+
- A `<meta name="color-scheme">` tag is **automatically injected** at boot (Vue + Nuxt SSR). No user action — prevents the Flash of inAccurate coloR Theme.
|
|
618
|
+
|
|
619
|
+
Consumer-visible CSS surface is unchanged: `var(--maz-primary)`, `--maz-primary-500`, Tailwind utilities `bg-primary/60`, `bg-primary-500`, etc. all keep working.
|
|
620
|
+
|
|
621
|
+
#### `lightClass` (new — optional, default `'light'`)
|
|
622
|
+
|
|
623
|
+
Mirror of `darkClass`. When `colorMode === 'light'` and `darkModeStrategy === 'class'`, this class is added to `<html>` to force `color-scheme: only light`. Default `'light'` — set to `false`/custom string if it clashes with an existing class in your app:
|
|
624
|
+
|
|
625
|
+
```ts
|
|
626
|
+
app.use(MazUi, {
|
|
627
|
+
theme: {
|
|
628
|
+
preset: mazUi,
|
|
629
|
+
darkClass: 'dark',
|
|
630
|
+
lightClass: 'light', // new
|
|
631
|
+
},
|
|
632
|
+
})
|
|
633
|
+
```
|
|
634
|
+
|
|
635
|
+
Non-breaking: if you never explicitly forced light, nothing changes.
|
|
636
|
+
|
|
637
|
+
#### `setColorMode` / `toggleDarkMode` now return `Promise<void>`
|
|
638
|
+
|
|
639
|
+
Both functions are now async to support the optional `{ animate: true }` parameter (View Transitions). Existing callers that ignored the return value keep working — `await` is only required when you need to chain.
|
|
640
|
+
|
|
641
|
+
```ts
|
|
642
|
+
const { setColorMode, toggleDarkMode } = useTheme()
|
|
643
|
+
|
|
644
|
+
// Existing v4 call — still works, return value ignored
|
|
645
|
+
setColorMode('dark')
|
|
646
|
+
toggleDarkMode()
|
|
647
|
+
|
|
648
|
+
// v5 — await to chain after the change is applied
|
|
649
|
+
await setColorMode('dark')
|
|
650
|
+
|
|
651
|
+
// v5 — animated full-page switch via document.startViewTransition()
|
|
652
|
+
await toggleDarkMode({ animate: true })
|
|
653
|
+
await setColorMode('dark', { animate: true })
|
|
654
|
+
```
|
|
655
|
+
|
|
656
|
+
The View Transitions glue is lazy-imported — when `animate` is not used, it stays out of your boot bundle. Browsers that don't support the API apply the change immediately with no animation.
|
|
657
|
+
|
|
658
|
+
#### BREAKING — removed exports
|
|
659
|
+
|
|
660
|
+
The JS-based palette generator is gone. The following helpers used to be exported from `@maz-ui/themes` and **no longer exist** in v5:
|
|
661
|
+
|
|
662
|
+
| Removed export | Replacement |
|
|
663
|
+
| --- | --- |
|
|
664
|
+
| `generateColorScale(base, mode)` | The scale is now generated in CSS via `oklch(from var(--maz-X) clamp(0, calc(l ± offset), 1) calc(c * mult) h)`. Read the live value from `--maz-X-{50..950}`, or replicate the formula inline. |
|
|
665
|
+
| `parseHSL(value)` | Use a CSS color parser or `parseColorAsOklch` from `@maz-ui/themes/utils/color-conversions`. |
|
|
666
|
+
| `adjustColorLightness(color, amount)` | Inline with `oklch(from <color> calc(l + N) c h)` to shift lightness while preserving chroma and hue. |
|
|
667
|
+
| `getContrastColor(color)` | Use the preset's `*-foreground` token, which is what components consume internally. |
|
|
668
|
+
|
|
669
|
+
`colorToHex`, `parseColorAsOklch` and `formatAsOklch` are **preserved**, now exported from `@maz-ui/themes/utils/color-conversions`.
|
|
670
|
+
|
|
671
|
+
If you were importing any of the removed helpers from `@maz-ui/themes`, replace them before upgrading.
|
|
672
|
+
|
|
618
673
|
### Preset name persistence (new — opt-out, no breaking change)
|
|
619
674
|
|
|
620
675
|
`@maz-ui/themes` now persists the active preset name in a `maz-preset` cookie (1-year TTL, `SameSite=Lax`) — same shape as the existing `maz-color-mode` cookie:
|
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'
|
|
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: '
|
|
133
|
-
dark: { primary: '
|
|
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: '
|
|
224
|
-
secondary: '
|
|
225
|
-
surface: '0 0
|
|
226
|
-
foreground: '
|
|
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: '
|
|
230
|
-
secondary: '
|
|
231
|
-
surface: '
|
|
232
|
-
foreground: '
|
|
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'
|
|
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
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
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
|
|
|
@@ -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
|
|
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
|
-
- **
|
|
15
|
-
- **
|
|
16
|
-
- **
|
|
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
|
|
94
|
-
- `mode` (optional): The supported color modes
|
|
95
|
-
- `colorMode` (optional): The initial color mode
|
|
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: '
|
|
399
|
-
secondary: '
|
|
400
|
-
accent: '
|
|
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: '
|
|
404
|
-
secondary: '
|
|
405
|
-
accent: '
|
|
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: '
|
|
453
|
-
secondary: '
|
|
454
|
-
surface: '
|
|
455
|
-
accent: '
|
|
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: '
|
|
459
|
-
secondary: '
|
|
460
|
-
surface: '
|
|
461
|
-
accent: '
|
|
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, //
|
|
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: '
|
|
627
|
-
dark: { primary: '
|
|
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: '
|
|
691
|
-
dark: { primary: '
|
|
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: '
|
|
733
|
-
dark: { primary: '
|
|
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
|
|
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
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
--maz-
|
|
905
|
-
--maz-foreground: oklch(0.
|
|
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
|
-
|
|
927
|
-
.dark
|
|
928
|
-
|
|
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: '
|
|
975
|
-
secondary: '
|
|
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(
|
|
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': '
|
|
1011
|
-
'secondary': '
|
|
1012
|
-
'accent': '
|
|
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': '
|
|
1016
|
-
'secondary': '
|
|
1017
|
-
'accent': '
|
|
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
|
}
|
|
@@ -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
|
-
|
|
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
|
-
|
|
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>
|
|
@@ -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>
|
|
@@ -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.
|
|
4
|
+
"version": "5.0.0-beta.8",
|
|
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.
|
|
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.
|
|
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"
|