@maz-ui/mcp 5.0.0-beta.1 → 5.0.0-beta.17

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 (63) hide show
  1. package/dist/mcp.mjs +1 -1
  2. package/docs/generated-docs/maz-checkbox.doc.md +16 -17
  3. package/docs/generated-docs/maz-circular-progress-bar.doc.md +1 -1
  4. package/docs/generated-docs/maz-code-highlight.doc.md +11 -0
  5. package/docs/generated-docs/maz-date-picker.doc.md +41 -41
  6. package/docs/generated-docs/maz-drawer.doc.md +7 -8
  7. package/docs/generated-docs/maz-expand-animation.doc.md +4 -4
  8. package/docs/generated-docs/maz-fullscreen-loader.doc.md +5 -5
  9. package/docs/generated-docs/maz-gallery.doc.md +15 -15
  10. package/docs/generated-docs/maz-input-code.doc.md +16 -16
  11. package/docs/generated-docs/maz-input-phone-number.doc.md +42 -38
  12. package/docs/generated-docs/maz-input-price.doc.md +14 -14
  13. package/docs/generated-docs/maz-input-tags.doc.md +16 -16
  14. package/docs/generated-docs/maz-input.doc.md +14 -14
  15. package/docs/generated-docs/maz-lazy-img.doc.md +14 -14
  16. package/docs/generated-docs/maz-loading-bar.doc.md +4 -4
  17. package/docs/generated-docs/maz-pull-to-refresh.doc.md +10 -10
  18. package/docs/generated-docs/maz-radio-buttons.doc.md +17 -17
  19. package/docs/generated-docs/maz-radio.doc.md +16 -16
  20. package/docs/generated-docs/maz-reading-progress-bar.doc.md +4 -4
  21. package/docs/generated-docs/maz-sidebar-content.doc.md +5 -0
  22. package/docs/generated-docs/maz-sidebar-footer.doc.md +5 -0
  23. package/docs/generated-docs/maz-sidebar-group.doc.md +11 -0
  24. package/docs/generated-docs/maz-sidebar-header.doc.md +5 -0
  25. package/docs/generated-docs/maz-sidebar-menu-button.doc.md +27 -0
  26. package/docs/generated-docs/maz-sidebar-menu-item.doc.md +5 -0
  27. package/docs/generated-docs/maz-sidebar-menu-sub.doc.md +16 -0
  28. package/docs/generated-docs/maz-sidebar-menu.doc.md +5 -0
  29. package/docs/generated-docs/maz-sidebar-separator.doc.md +0 -0
  30. package/docs/generated-docs/maz-sidebar-trigger.doc.md +5 -0
  31. package/docs/generated-docs/maz-sidebar.doc.md +36 -0
  32. package/docs/generated-docs/maz-slider.doc.md +1 -1
  33. package/docs/generated-docs/maz-spinner.doc.md +4 -4
  34. package/docs/generated-docs/maz-switch.doc.md +14 -14
  35. package/docs/generated-docs/maz-table.doc.md +5 -5
  36. package/docs/generated-docs/maz-textarea.doc.md +25 -24
  37. package/docs/generated-docs/maz-ticker.doc.md +1 -1
  38. package/docs/generated-docs/maz-window-mockup.doc.md +23 -0
  39. package/docs/src/blog/v5.md +1 -3
  40. package/docs/src/components/maz-code-highlight.md +233 -0
  41. package/docs/src/components/maz-container.md +2 -2
  42. package/docs/src/components/maz-input-phone-number.md +106 -103
  43. package/docs/src/components/maz-sidebar.md +674 -0
  44. package/docs/src/components/maz-textarea.md +27 -1
  45. package/docs/src/components/maz-timeline.md +60 -0
  46. package/docs/src/components/maz-window-mockup.md +249 -0
  47. package/docs/src/directives/click-outside.md +7 -14
  48. package/docs/src/directives/lazy-img.md +4 -4
  49. package/docs/src/directives/tooltip.md +23 -0
  50. package/docs/src/ecosystem/eslint-config.md +95 -1
  51. package/docs/src/guide/getting-started.md +13 -11
  52. package/docs/src/guide/maz-ui-provider.md +6 -3
  53. package/docs/src/guide/migration-v4.md +7 -3
  54. package/docs/src/guide/migration-v5.md +67 -12
  55. package/docs/src/guide/nuxt.md +53 -46
  56. package/docs/src/guide/tailwind.md +4 -0
  57. package/docs/src/guide/themes.md +127 -69
  58. package/docs/src/helpers/capitalize.md +2 -3
  59. package/docs/src/helpers/currency.md +2 -2
  60. package/docs/src/helpers/date.md +2 -2
  61. package/docs/src/helpers/number.md +2 -2
  62. package/docs/src/plugins/wait.md +1 -1
  63. package/package.json +4 -4
package/docs/src/guide/getting-started.md CHANGED
@@ -93,8 +93,9 @@ npm install @maz-ui/themes
93
93
 
94
94
  **Features:**
95
95
 
96
- - 🎨 OKLCh color system with perceptually uniform 11-step scales
97
- - 🌓 Smart dark mode detection and class/media/auto strategies
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
@@ -163,15 +164,6 @@ npm install @maz-ui/icons
163
164
  Maz-UI v5 is built with tree-shaking in mind. Import only what you need for optimal bundle sizes:
164
165
 
165
166
  ```typescript
166
- /**
167
- * Utilities
168
- */
169
-
170
- // ❌ Avoid importing everything
171
- import { formatCurrency, debounce } from '@maz-ui/utils'
172
- // ✅ Import from @maz-ui/utils
173
- import { formatCurrency, debounce } from '@maz-ui/utils'
174
-
175
167
  /**
176
168
  * Components
177
169
  */
@@ -215,6 +207,16 @@ import { vClickOutside } from 'maz-ui/directives/vClickOutside'
215
207
  import { MazUi } from 'maz-ui/plugins'
216
208
  // ✅✅ Direct plugin import (most optimized)
217
209
  import { MazUi } from 'maz-ui/plugins/maz-ui'
210
+
211
+ /**
212
+ * Utilities
213
+ */
214
+
215
+ // ❌ Avoid importing everything
216
+ import { formatCurrency, debounce } from '@maz-ui/utils'
217
+ // ✅ Import from @maz-ui/utils
218
+ import { debounce } from '@maz-ui/utils/helpers/debounce'
219
+ import { formatCurrency } from '@maz-ui/utils/helpers/formatCurrency'
218
220
  ```
219
221
 
220
222
  ::: tip Maximum Optimization
package/docs/src/guide/maz-ui-provider.md CHANGED
@@ -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 // Required - Theme preset (mazUi, ocean, pristine, obsidian, or custom)
101
- overrides?: ThemePresetOverrides // Partial overrides for colors, foundation, etc.
102
- strategy?: 'runtime' | 'buildtime' // CSS generation strategy (default: 'runtime')
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
 
package/docs/src/guide/migration-v4.md CHANGED
@@ -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, setTheme } = useTheme()
695
+ const { isDark, toggleDarkMode, updateTheme } = useTheme()
692
696
 
693
697
  // Change theme
694
- setTheme('ocean')
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
 
package/docs/src/guide/migration-v5.md CHANGED
@@ -23,7 +23,7 @@ npx @maz-ui/upgrade ./ --dry-run
23
23
  npx @maz-ui/upgrade ./
24
24
  ```
25
25
 
26
- It rewrites: CSS subpath imports (`maz-ui/styles` → `maz-ui/style.css`), `left-icon`/`right-icon` → `start-icon`/`end-icon` (props, slots, `--has-*-icon` classes), `footer-align`/`variant` direction values, `color="background"` / `active-color="background"` → `surface`, `rounded-size="base"` → `md`, `--maz-background` / `--maz-border` CSS vars → `--maz-surface` / `--maz-divider`, `hsl(var(--maz-X))` collapse, Nuxt `injectMainCss` → `injectCss`, theme `strategy: 'hybrid'` → `'runtime'`, drops the removed theme options (`injectCriticalCSS`, `injectFullCSS`, `injectAllCSSOnServer`), and renames `colors.{light,dark}.background` → `surface` / `.border` → `divider` inside custom presets. It also bumps every `maz-ui` and `@maz-ui/*` entry in your `package.json` files to `^5.0.0` and runs the right `<pm> install` for you (detected from your lockfile — pnpm, yarn, bun, npm). Pass `--no-install` if you want to skip the install step.
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 dynamic color scale generator (`generateColorScale`, `adjustColorLightness`, `getContrastColor`) steps in OKLCh space and emits `oklch(L C H)` strings. The runtime CSS variables (`--maz-primary`, `--maz-primary-100`, …) therefore hold OKLCh colors.
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 `adjustColorLightness`** directly — the `adjustment` parameter is now in OKLCh L units (`0..1`) instead of HSL L percentage (`0..100`). Divide your existing values by 100.
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' | '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.