@mui/docs 6.0.0-alpha.8 → 6.0.0-alpha.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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,81 @@
|
|
|
1
1
|
# [Versions](https://mui.com/versions/)
|
|
2
2
|
|
|
3
|
+
## v6.0.0-alpha.9
|
|
4
|
+
|
|
5
|
+
<!-- generated comparing v6.0.0-alpha.8..next -->
|
|
6
|
+
|
|
7
|
+
_May 29, 2024_
|
|
8
|
+
|
|
9
|
+
A big thanks to the 23 contributors who made this release possible. Here are some highlights ✨:
|
|
10
|
+
|
|
11
|
+
- 🚀 `CssVarsProvider` and `extendTheme` are now stable (#42246) @siriwatknp
|
|
12
|
+
|
|
13
|
+
### `@mui/material@6.0.0-alpha.9`
|
|
14
|
+
|
|
15
|
+
- ​<!-- 49 -->[AlertTitle] Enable extending Typography props (#42269) @lucasgmelo
|
|
16
|
+
- ​<!-- 48 -->[AvatarGroup] deprecate `componentsProps` for v6 (#42122) @lhilgert9
|
|
17
|
+
- ​<!-- 15 -->[Grid] Deprecate `wrap` prop (#42363) @fedirjh
|
|
18
|
+
- ​<!-- 14 -->[ListItem] Document `*Component` and `*Props` props deprecations (#42263) @aarongarciah
|
|
19
|
+
- ​<!-- 13 -->[ListItem] Deprecate ListItem's components and componentsProps (#42219) @aarongarciah
|
|
20
|
+
- ​<!-- 12 -->[ListItemSecondaryAction] Deprecate component (#42251) @aarongarciah
|
|
21
|
+
- ​<!-- 11 -->Stabilize `CssVarsProvider` and `extendTheme` (#42246) @siriwatknp
|
|
22
|
+
- ​<!-- 10 -->[Popper] Deprecate components and componentProps props for v6 (#42111) @ChronicusUA
|
|
23
|
+
- ​<!-- 09 -->[responsiveFontSizes] Handled undefined variants (#42412) @brijeshb42
|
|
24
|
+
- ​<!-- 08 -->[Slider] Fix wrong CSS value (#42370) @mnajdova
|
|
25
|
+
- ​<!-- 07 -->[Tooltip] Deprecate components and componentProps props for v6 (#42107) @ChronicusUA
|
|
26
|
+
|
|
27
|
+
### `@mui/system@6.0.0-alpha.9`
|
|
28
|
+
|
|
29
|
+
- ​<!-- 34 -->[createStyled] Intercept `ownerState` coming from `props` and `ownerState` (#42358) @DiegoAndai
|
|
30
|
+
|
|
31
|
+
### `@mui/codemod@6.0.0-alpha.9`
|
|
32
|
+
|
|
33
|
+
- ​<!-- 41 -->Add `sx` prop for v6 migration (#42153) @siriwatknp
|
|
34
|
+
- ​<!-- 40 -->Add codemod for removing system props (#42282) @siriwatknp
|
|
35
|
+
|
|
36
|
+
### Docs
|
|
37
|
+
|
|
38
|
+
- ​<!-- 33 -->Remove unused images (#42324) @danilo-leal
|
|
39
|
+
- ​<!-- 32 -->Add Pigment CSS and Base UI logos SVGs (#42322) @danilo-leal
|
|
40
|
+
- ​<!-- 22 -->[joy-ui] Fix template responsiveness (#42422) @j4marcos
|
|
41
|
+
- ​<!-- 21 -->[material-ui] Add the Pashto locale (#42244) @sayoubiaf
|
|
42
|
+
- ​<!-- 20 -->[material-ui] Remove duplicate Design Kits page (#42338) @danilo-leal
|
|
43
|
+
- ​<!-- 19 -->[material-ui] Document callback to access theme in GlobalStyles (#42257) @aarongarciah
|
|
44
|
+
- ​<!-- 18 -->[material-ui] Add minor modifications to the Vertical stepper demo (#42342) @mihilt
|
|
45
|
+
- ​<!-- 17 -->[material-ui][Tabs] Improve the Basic Tabs demo (#42374) @MatheusEli
|
|
46
|
+
- ​<!-- 16 -->[pigment-css] Polish redirection mention @oliviertassinari
|
|
47
|
+
|
|
48
|
+
### Core
|
|
49
|
+
|
|
50
|
+
- ​<!-- 47 -->[blog] Add fixes and clean ups to the Blog page (#42311) @danilo-leal
|
|
51
|
+
- ​<!-- 46 -->[blog] Add the "Product" tag to the Pigment CSS post (#42365) @danilo-leal
|
|
52
|
+
- ​<!-- 45 -->[code-infra] Simplify .stylelintrc.js @oliviertassinari
|
|
53
|
+
- ​<!-- 44 -->[code-infra] Fix stylelint locally (#42411) @oliviertassinari
|
|
54
|
+
- ​<!-- 43 -->[code-infra] Run corepack enable on all CI jobs (#42331) @Janpot
|
|
55
|
+
- ​<!-- 42 -->[code-infra] Create examples eslint rule (#42170) @oliviertassinari
|
|
56
|
+
- ​<!-- 39 -->[core] Apply React 19 type changes that don't require upcoming `@types/` packages (#42346) @DiegoAndai
|
|
57
|
+
- ​<!-- 38 -->[core] Remove `react-swipeable-views-utils` package from docs (#42378) @ZeeshanTamboli
|
|
58
|
+
- ​<!-- 37 -->[core] Update `@testing-library/react` and `@testing-library/dom` packages (#42349) @ZeeshanTamboli
|
|
59
|
+
- ​<!-- 36 -->[core] Remove `@types/prettier` package (#42339) @ZeeshanTamboli
|
|
60
|
+
- ​<!-- 35 -->[core] Remove `WyW-in-JS` from Renovate config (#42335) @ZeeshanTamboli
|
|
61
|
+
- ​<!-- 31 -->[docs-infra] Split feedback channels per product (#42413) @alexfauquette
|
|
62
|
+
- ​<!-- 30 -->[docs-infra] Avoid cryptic errors when tests don't exist (#42356) @Janpot
|
|
63
|
+
- ​<!-- 29 -->[docs-infra] Make menu styles consistent (#42387) @danilo-leal
|
|
64
|
+
- ​<!-- 28 -->[docs-infra] Display deprecation messages in API pages (#42352) @aarongarciah
|
|
65
|
+
- ​<!-- 27 -->[docs-infra] Standardize API pages Alert styles (#42386) @danilo-leal
|
|
66
|
+
- ​<!-- 26 -->[docs-infra] Fix Toolpad Core API links (#42362) @apedroferreira
|
|
67
|
+
- ​<!-- 25 -->[docs-infra] Tigthen up the header design (#42180) @danilo-leal
|
|
68
|
+
- ​<!-- 24 -->[docs-infra] Add Toolpad to muiNpmOrgs for codesandbox demos (#42316) @Janpot
|
|
69
|
+
- ​<!-- 23 -->[docs-infra] Allow JSDoc tags (#42337) @aarongarciah
|
|
70
|
+
- ​<!-- 06 -->[test] Remove `userAgent` override in `jsdom` env (#42344) @cherniavskii
|
|
71
|
+
- ​<!-- 05 -->[utils] Fix GitHub-reported prototype pollution vulnerability in `deepmerge` (#41652) @tjcouch-sil
|
|
72
|
+
- ​<!-- 04 -->[website] Add Nikita to the about page (#42418) @nikitaa24
|
|
73
|
+
- ​<!-- 03 -->[website] Fix hero spacing changes applying at the wrong breakpoint (#42341) @KenanYusuf
|
|
74
|
+
- ​<!-- 02 -->[website] Adds Kenan Yusuf to about page (#42317) @KenanYusuf
|
|
75
|
+
- ​<!-- 01 -->[website] Improve about page @oliviertassinari
|
|
76
|
+
|
|
77
|
+
All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @apedroferreira, @brijeshb42, @cherniavskii, @ChronicusUA, @danilo-leal, @DiegoAndai, @fedirjh, @j4marcos, @Janpot, @KenanYusuf, @lhilgert9, @lucasgmelo, @MatheusEli, @mihilt, @mnajdova, @nikitaa24, @oliviertassinari, @sayoubiaf, @siriwatknp, @tjcouch-sil, @ZeeshanTamboli
|
|
78
|
+
|
|
3
79
|
## v6.0.0-alpha.8
|
|
4
80
|
|
|
5
81
|
<!-- generated comparing v6.0.0-alpha.7..next -->
|
|
@@ -318,29 +318,95 @@ export function getThemedComponents() {
|
|
|
318
318
|
MuiAlert: {
|
|
319
319
|
styleOverrides: {
|
|
320
320
|
root: {
|
|
321
|
-
padding: '
|
|
321
|
+
padding: '16px',
|
|
322
|
+
gap: '12px',
|
|
323
|
+
fontSize: '1rem',
|
|
324
|
+
'& * ul': {
|
|
325
|
+
paddingLeft: '24px !important',
|
|
326
|
+
marginBottom: '0 !important'
|
|
327
|
+
},
|
|
328
|
+
// !important is used here to override the anchor tag color coming from MarkdownElement
|
|
329
|
+
'& .MuiAlert-icon': {
|
|
330
|
+
margin: 0,
|
|
331
|
+
marginTop: '2px',
|
|
332
|
+
padding: 0
|
|
333
|
+
},
|
|
334
|
+
'& .MuiAlert-message': {
|
|
335
|
+
padding: 0
|
|
336
|
+
}
|
|
337
|
+
},
|
|
338
|
+
icon: {
|
|
339
|
+
paddingTop: 10,
|
|
340
|
+
paddingBottom: 0
|
|
322
341
|
},
|
|
323
342
|
standardWarning: ({
|
|
324
343
|
theme
|
|
325
|
-
}) => [
|
|
344
|
+
}) => [
|
|
345
|
+
// same styles from the MarkdownElement callout
|
|
346
|
+
{
|
|
326
347
|
backgroundColor: alpha(theme.palette.warning[50], 0.5),
|
|
327
348
|
color: (theme.vars || theme).palette.grey[900],
|
|
328
349
|
border: '1px solid',
|
|
329
|
-
borderColor: alpha(theme.palette.warning[
|
|
350
|
+
borderColor: alpha(theme.palette.warning[700], 0.15),
|
|
330
351
|
'& .MuiAlert-icon': {
|
|
331
|
-
color: (theme.vars || theme).palette.warning[
|
|
352
|
+
color: (theme.vars || theme).palette.warning[600]
|
|
353
|
+
},
|
|
354
|
+
'& * a': {
|
|
355
|
+
// !important is used here to override the anchor tag color coming from MarkdownElement
|
|
356
|
+
color: `${(theme.vars || theme).palette.warning[900]} !important`,
|
|
357
|
+
textDecorationColor: `${alpha(theme.palette.warning.main, 0.4)} !important`,
|
|
358
|
+
'&:hover': {
|
|
359
|
+
textDecorationColor: `${(theme.vars || theme).palette.warning[900]} !important`
|
|
360
|
+
}
|
|
332
361
|
}
|
|
333
362
|
}, theme.applyDarkStyles({
|
|
334
|
-
backgroundColor: alpha(theme.palette.warning[700], 0.
|
|
363
|
+
backgroundColor: alpha(theme.palette.warning[700], 0.12),
|
|
335
364
|
color: (theme.vars || theme).palette.warning[50],
|
|
336
365
|
'& .MuiAlert-icon': {
|
|
337
|
-
color: (theme.vars || theme).palette.warning[
|
|
366
|
+
color: (theme.vars || theme).palette.warning[400]
|
|
367
|
+
},
|
|
368
|
+
'& * a': {
|
|
369
|
+
color: `${(theme.vars || theme).palette.warning[100]} !important`,
|
|
370
|
+
textDecorationColor: `${alpha(theme.palette.warning[600], 0.4)} !important`,
|
|
371
|
+
'&:hover': {
|
|
372
|
+
textDecorationColor: `${(theme.vars || theme).palette.warning[600]} !important`
|
|
373
|
+
}
|
|
338
374
|
}
|
|
339
375
|
})],
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
376
|
+
standardSuccess: ({
|
|
377
|
+
theme
|
|
378
|
+
}) => [
|
|
379
|
+
// same styles from the MarkdownElement callout
|
|
380
|
+
{
|
|
381
|
+
backgroundColor: alpha(theme.palette.success[50], 0.5),
|
|
382
|
+
color: (theme.vars || theme).palette.success[900],
|
|
383
|
+
border: `1px solid ${(theme.vars || theme).palette.success[100]}`,
|
|
384
|
+
'& .MuiAlert-icon': {
|
|
385
|
+
color: (theme.vars || theme).palette.success[600]
|
|
386
|
+
},
|
|
387
|
+
'& * a': {
|
|
388
|
+
// !important is used here to override the anchor tag color coming from MarkdownElement
|
|
389
|
+
color: `${(theme.vars || theme).palette.success[900]} !important`,
|
|
390
|
+
textDecorationColor: `${alpha(theme.palette.success.main, 0.4)} !important`,
|
|
391
|
+
'&:hover': {
|
|
392
|
+
textDecorationColor: `${(theme.vars || theme).palette.success[900]} !important`
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
}, theme.applyDarkStyles({
|
|
396
|
+
backgroundColor: alpha(theme.palette.success[700], 0.12),
|
|
397
|
+
color: (theme.vars || theme).palette.success[50],
|
|
398
|
+
borderColor: alpha(theme.palette.success[400], 0.1),
|
|
399
|
+
'& .MuiAlert-icon': {
|
|
400
|
+
color: (theme.vars || theme).palette.success[500]
|
|
401
|
+
},
|
|
402
|
+
'& * a': {
|
|
403
|
+
color: `${(theme.vars || theme).palette.success[100]} !important`,
|
|
404
|
+
textDecorationColor: `${alpha(theme.palette.success[600], 0.4)} !important`,
|
|
405
|
+
'&:hover': {
|
|
406
|
+
textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
})]
|
|
344
410
|
}
|
|
345
411
|
},
|
|
346
412
|
MuiButtonBase: {
|
|
@@ -425,7 +491,7 @@ export function getThemedComponents() {
|
|
|
425
491
|
color: (theme.vars || theme).palette.text.primary,
|
|
426
492
|
backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
|
|
427
493
|
borderColor: (theme.vars || theme).palette.primaryDark[100],
|
|
428
|
-
boxShadow:
|
|
494
|
+
boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
|
|
429
495
|
'&:hover': {
|
|
430
496
|
backgroundColor: (theme.vars || theme).palette.grey[50]
|
|
431
497
|
},
|
|
@@ -433,7 +499,7 @@ export function getThemedComponents() {
|
|
|
433
499
|
color: (theme.vars || theme).palette.primaryDark[100],
|
|
434
500
|
borderColor: alpha(theme.palette.primaryDark[600], 0.5),
|
|
435
501
|
backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
|
|
436
|
-
boxShadow: `${alpha(theme.palette.primaryDark[600], 0.
|
|
502
|
+
boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
|
|
437
503
|
'&:hover': {
|
|
438
504
|
backgroundColor: (theme.vars || theme).palette.primaryDark[700],
|
|
439
505
|
borderColor: (theme.vars || theme).palette.primaryDark[600]
|
|
@@ -473,7 +539,24 @@ export function getThemedComponents() {
|
|
|
473
539
|
backgroundColor: (theme.vars || theme).palette.primaryDark[700]
|
|
474
540
|
}
|
|
475
541
|
}),
|
|
476
|
-
...(ownerState.variant === 'text' && {
|
|
542
|
+
...(ownerState.variant === 'text' && ownerState.color === 'secondary' && {
|
|
543
|
+
color: (theme.vars || theme).palette.text.secondary,
|
|
544
|
+
'&:hover': {
|
|
545
|
+
backgroundColor: (theme.vars || theme).palette.grey[50]
|
|
546
|
+
},
|
|
547
|
+
'&:active': {
|
|
548
|
+
backgroundColor: (theme.vars || theme).palette.grey[200]
|
|
549
|
+
},
|
|
550
|
+
...theme.applyDarkStyles({
|
|
551
|
+
'&:hover': {
|
|
552
|
+
backgroundColor: alpha(theme.palette.primaryDark[700], 0.5)
|
|
553
|
+
},
|
|
554
|
+
'&:active': {
|
|
555
|
+
backgroundColor: (theme.vars || theme).palette.primaryDark[700]
|
|
556
|
+
}
|
|
557
|
+
})
|
|
558
|
+
}),
|
|
559
|
+
...(ownerState.variant === 'text' && ownerState.color === 'primary' && {
|
|
477
560
|
color: (theme.vars || theme).palette.primary[600],
|
|
478
561
|
...theme.applyDarkStyles({
|
|
479
562
|
color: (theme.vars || theme).palette.primary[300]
|
|
@@ -615,6 +698,21 @@ export function getThemedComponents() {
|
|
|
615
698
|
}]
|
|
616
699
|
},
|
|
617
700
|
MuiIconButton: {
|
|
701
|
+
styleOverrides: {
|
|
702
|
+
root: ({
|
|
703
|
+
theme,
|
|
704
|
+
ownerState
|
|
705
|
+
}) => ({
|
|
706
|
+
borderRadius: theme.shape.borderRadius,
|
|
707
|
+
...(ownerState.size === 'small' && {
|
|
708
|
+
height: 32,
|
|
709
|
+
width: 32,
|
|
710
|
+
'& .MuiSvgIcon-root': {
|
|
711
|
+
fontSize: defaultTheme.typography.pxToRem(18)
|
|
712
|
+
}
|
|
713
|
+
})
|
|
714
|
+
})
|
|
715
|
+
},
|
|
618
716
|
variants: [{
|
|
619
717
|
props: {
|
|
620
718
|
color: 'primary'
|
|
@@ -622,14 +720,11 @@ export function getThemedComponents() {
|
|
|
622
720
|
style: ({
|
|
623
721
|
theme
|
|
624
722
|
}) => [{
|
|
625
|
-
height: 34,
|
|
626
|
-
width: 34,
|
|
627
723
|
border: `1px solid`,
|
|
628
|
-
borderRadius: theme.shape.borderRadius,
|
|
629
724
|
color: (theme.vars || theme).palette.primary.main,
|
|
630
725
|
backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
|
|
631
726
|
borderColor: (theme.vars || theme).palette.primaryDark[100],
|
|
632
|
-
boxShadow: `${alpha(theme.palette.grey[
|
|
727
|
+
boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
|
|
633
728
|
'&:hover': {
|
|
634
729
|
borderColor: (theme.vars || theme).palette.grey[300],
|
|
635
730
|
background: (theme.vars || theme).palette.grey[50]
|
|
@@ -638,10 +733,10 @@ export function getThemedComponents() {
|
|
|
638
733
|
color: (theme.vars || theme).palette.primary[300],
|
|
639
734
|
borderColor: alpha(theme.palette.primaryDark[600], 0.5),
|
|
640
735
|
backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
|
|
641
|
-
boxShadow: `${alpha(theme.palette.primaryDark[600], 0.
|
|
736
|
+
boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
|
|
642
737
|
'&:hover': {
|
|
643
|
-
borderColor: (theme.vars || theme).palette.primaryDark[
|
|
644
|
-
background: alpha(theme.palette.primaryDark[700], 0.
|
|
738
|
+
borderColor: (theme.vars || theme).palette.primaryDark[600],
|
|
739
|
+
background: alpha(theme.palette.primaryDark[700], 0.8)
|
|
645
740
|
}
|
|
646
741
|
})]
|
|
647
742
|
}, {
|
|
@@ -651,14 +746,12 @@ export function getThemedComponents() {
|
|
|
651
746
|
style: ({
|
|
652
747
|
theme
|
|
653
748
|
}) => [{
|
|
654
|
-
height: 34,
|
|
655
|
-
width: 34,
|
|
656
749
|
color: (theme.vars || theme).palette.text.tertiary,
|
|
657
750
|
borderRadius: theme.shape.borderRadius,
|
|
658
751
|
border: `1px solid`,
|
|
659
752
|
backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
|
|
660
753
|
borderColor: (theme.vars || theme).palette.primaryDark[100],
|
|
661
|
-
boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0
|
|
754
|
+
boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
|
|
662
755
|
'&:hover': {
|
|
663
756
|
color: (theme.vars || theme).palette.primary.main,
|
|
664
757
|
borderColor: (theme.vars || theme).palette.grey[300],
|
|
@@ -667,7 +760,7 @@ export function getThemedComponents() {
|
|
|
667
760
|
}, theme.applyDarkStyles({
|
|
668
761
|
borderColor: alpha(theme.palette.primaryDark[600], 0.5),
|
|
669
762
|
backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
|
|
670
|
-
boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0
|
|
763
|
+
boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
|
|
671
764
|
'&:hover': {
|
|
672
765
|
color: (theme.vars || theme).palette.primary[400],
|
|
673
766
|
borderColor: (theme.vars || theme).palette.primaryDark[500],
|
|
@@ -681,15 +774,26 @@ export function getThemedComponents() {
|
|
|
681
774
|
paper: ({
|
|
682
775
|
theme
|
|
683
776
|
}) => [{
|
|
777
|
+
padding: '6px',
|
|
684
778
|
minWidth: 160,
|
|
685
779
|
color: (theme.vars || theme).palette.text.secondary,
|
|
686
780
|
backgroundImage: 'none',
|
|
687
781
|
border: '1px solid',
|
|
688
782
|
backgroundColor: (theme.vars || theme).palette.background.paper,
|
|
689
783
|
borderColor: (theme.vars || theme).palette.grey[200],
|
|
784
|
+
'& .MuiMenu-list': {
|
|
785
|
+
display: 'flex',
|
|
786
|
+
flexDirection: 'column',
|
|
787
|
+
gap: '2px',
|
|
788
|
+
'& .MuiDivider-root': {
|
|
789
|
+
margin: '4px -8px 4px -8px'
|
|
790
|
+
}
|
|
791
|
+
},
|
|
690
792
|
'& .MuiMenuItem-root': {
|
|
793
|
+
padding: '6px 12px',
|
|
794
|
+
borderRadius: '6px',
|
|
691
795
|
fontSize: theme.typography.pxToRem(14),
|
|
692
|
-
fontWeight:
|
|
796
|
+
fontWeight: theme.typography.fontWeightMedium,
|
|
693
797
|
'&:hover, &:focus': {
|
|
694
798
|
backgroundColor: (theme.vars || theme).palette.grey[100],
|
|
695
799
|
color: (theme.vars || theme).palette.text.primary
|
|
@@ -711,7 +815,7 @@ export function getThemedComponents() {
|
|
|
711
815
|
backgroundColor: (theme.vars || theme).palette.primaryDark[700]
|
|
712
816
|
},
|
|
713
817
|
'&.Mui-selected': {
|
|
714
|
-
color: (theme.vars || theme).palette.primary[
|
|
818
|
+
color: (theme.vars || theme).palette.primary[200],
|
|
715
819
|
backgroundColor: alpha(theme.palette.primary[900], 0.4)
|
|
716
820
|
}
|
|
717
821
|
}
|
|
@@ -735,10 +839,7 @@ export function getThemedComponents() {
|
|
|
735
839
|
root: ({
|
|
736
840
|
theme
|
|
737
841
|
}) => ({
|
|
738
|
-
borderColor: (theme.vars || theme).palette.
|
|
739
|
-
...theme.applyDarkStyles({
|
|
740
|
-
borderColor: alpha(theme.palette.primaryDark[500], 0.3)
|
|
741
|
-
})
|
|
842
|
+
borderColor: (theme.vars || theme).palette.divider
|
|
742
843
|
})
|
|
743
844
|
}
|
|
744
845
|
},
|
|
@@ -329,29 +329,95 @@ function getThemedComponents() {
|
|
|
329
329
|
MuiAlert: {
|
|
330
330
|
styleOverrides: {
|
|
331
331
|
root: {
|
|
332
|
-
padding: '
|
|
332
|
+
padding: '16px',
|
|
333
|
+
gap: '12px',
|
|
334
|
+
fontSize: '1rem',
|
|
335
|
+
'& * ul': {
|
|
336
|
+
paddingLeft: '24px !important',
|
|
337
|
+
marginBottom: '0 !important'
|
|
338
|
+
},
|
|
339
|
+
// !important is used here to override the anchor tag color coming from MarkdownElement
|
|
340
|
+
'& .MuiAlert-icon': {
|
|
341
|
+
margin: 0,
|
|
342
|
+
marginTop: '2px',
|
|
343
|
+
padding: 0
|
|
344
|
+
},
|
|
345
|
+
'& .MuiAlert-message': {
|
|
346
|
+
padding: 0
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
icon: {
|
|
350
|
+
paddingTop: 10,
|
|
351
|
+
paddingBottom: 0
|
|
333
352
|
},
|
|
334
353
|
standardWarning: ({
|
|
335
354
|
theme
|
|
336
|
-
}) => [
|
|
355
|
+
}) => [
|
|
356
|
+
// same styles from the MarkdownElement callout
|
|
357
|
+
{
|
|
337
358
|
backgroundColor: (0, _styles.alpha)(theme.palette.warning[50], 0.5),
|
|
338
359
|
color: (theme.vars || theme).palette.grey[900],
|
|
339
360
|
border: '1px solid',
|
|
340
|
-
borderColor: (0, _styles.alpha)(theme.palette.warning[
|
|
361
|
+
borderColor: (0, _styles.alpha)(theme.palette.warning[700], 0.15),
|
|
341
362
|
'& .MuiAlert-icon': {
|
|
342
|
-
color: (theme.vars || theme).palette.warning[
|
|
363
|
+
color: (theme.vars || theme).palette.warning[600]
|
|
364
|
+
},
|
|
365
|
+
'& * a': {
|
|
366
|
+
// !important is used here to override the anchor tag color coming from MarkdownElement
|
|
367
|
+
color: `${(theme.vars || theme).palette.warning[900]} !important`,
|
|
368
|
+
textDecorationColor: `${(0, _styles.alpha)(theme.palette.warning.main, 0.4)} !important`,
|
|
369
|
+
'&:hover': {
|
|
370
|
+
textDecorationColor: `${(theme.vars || theme).palette.warning[900]} !important`
|
|
371
|
+
}
|
|
343
372
|
}
|
|
344
373
|
}, theme.applyDarkStyles({
|
|
345
|
-
backgroundColor: (0, _styles.alpha)(theme.palette.warning[700], 0.
|
|
374
|
+
backgroundColor: (0, _styles.alpha)(theme.palette.warning[700], 0.12),
|
|
346
375
|
color: (theme.vars || theme).palette.warning[50],
|
|
347
376
|
'& .MuiAlert-icon': {
|
|
348
|
-
color: (theme.vars || theme).palette.warning[
|
|
377
|
+
color: (theme.vars || theme).palette.warning[400]
|
|
378
|
+
},
|
|
379
|
+
'& * a': {
|
|
380
|
+
color: `${(theme.vars || theme).palette.warning[100]} !important`,
|
|
381
|
+
textDecorationColor: `${(0, _styles.alpha)(theme.palette.warning[600], 0.4)} !important`,
|
|
382
|
+
'&:hover': {
|
|
383
|
+
textDecorationColor: `${(theme.vars || theme).palette.warning[600]} !important`
|
|
384
|
+
}
|
|
349
385
|
}
|
|
350
386
|
})],
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
387
|
+
standardSuccess: ({
|
|
388
|
+
theme
|
|
389
|
+
}) => [
|
|
390
|
+
// same styles from the MarkdownElement callout
|
|
391
|
+
{
|
|
392
|
+
backgroundColor: (0, _styles.alpha)(theme.palette.success[50], 0.5),
|
|
393
|
+
color: (theme.vars || theme).palette.success[900],
|
|
394
|
+
border: `1px solid ${(theme.vars || theme).palette.success[100]}`,
|
|
395
|
+
'& .MuiAlert-icon': {
|
|
396
|
+
color: (theme.vars || theme).palette.success[600]
|
|
397
|
+
},
|
|
398
|
+
'& * a': {
|
|
399
|
+
// !important is used here to override the anchor tag color coming from MarkdownElement
|
|
400
|
+
color: `${(theme.vars || theme).palette.success[900]} !important`,
|
|
401
|
+
textDecorationColor: `${(0, _styles.alpha)(theme.palette.success.main, 0.4)} !important`,
|
|
402
|
+
'&:hover': {
|
|
403
|
+
textDecorationColor: `${(theme.vars || theme).palette.success[900]} !important`
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
}, theme.applyDarkStyles({
|
|
407
|
+
backgroundColor: (0, _styles.alpha)(theme.palette.success[700], 0.12),
|
|
408
|
+
color: (theme.vars || theme).palette.success[50],
|
|
409
|
+
borderColor: (0, _styles.alpha)(theme.palette.success[400], 0.1),
|
|
410
|
+
'& .MuiAlert-icon': {
|
|
411
|
+
color: (theme.vars || theme).palette.success[500]
|
|
412
|
+
},
|
|
413
|
+
'& * a': {
|
|
414
|
+
color: `${(theme.vars || theme).palette.success[100]} !important`,
|
|
415
|
+
textDecorationColor: `${(0, _styles.alpha)(theme.palette.success[600], 0.4)} !important`,
|
|
416
|
+
'&:hover': {
|
|
417
|
+
textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
})]
|
|
355
421
|
}
|
|
356
422
|
},
|
|
357
423
|
MuiButtonBase: {
|
|
@@ -436,7 +502,7 @@ function getThemedComponents() {
|
|
|
436
502
|
color: (theme.vars || theme).palette.text.primary,
|
|
437
503
|
backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
|
|
438
504
|
borderColor: (theme.vars || theme).palette.primaryDark[100],
|
|
439
|
-
boxShadow:
|
|
505
|
+
boxShadow: `#FFF 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
|
|
440
506
|
'&:hover': {
|
|
441
507
|
backgroundColor: (theme.vars || theme).palette.grey[50]
|
|
442
508
|
},
|
|
@@ -444,7 +510,7 @@ function getThemedComponents() {
|
|
|
444
510
|
color: (theme.vars || theme).palette.primaryDark[100],
|
|
445
511
|
borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
|
|
446
512
|
backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
|
|
447
|
-
boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.
|
|
513
|
+
boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
|
|
448
514
|
'&:hover': {
|
|
449
515
|
backgroundColor: (theme.vars || theme).palette.primaryDark[700],
|
|
450
516
|
borderColor: (theme.vars || theme).palette.primaryDark[600]
|
|
@@ -484,7 +550,24 @@ function getThemedComponents() {
|
|
|
484
550
|
backgroundColor: (theme.vars || theme).palette.primaryDark[700]
|
|
485
551
|
}
|
|
486
552
|
}),
|
|
487
|
-
...(ownerState.variant === 'text' && {
|
|
553
|
+
...(ownerState.variant === 'text' && ownerState.color === 'secondary' && {
|
|
554
|
+
color: (theme.vars || theme).palette.text.secondary,
|
|
555
|
+
'&:hover': {
|
|
556
|
+
backgroundColor: (theme.vars || theme).palette.grey[50]
|
|
557
|
+
},
|
|
558
|
+
'&:active': {
|
|
559
|
+
backgroundColor: (theme.vars || theme).palette.grey[200]
|
|
560
|
+
},
|
|
561
|
+
...theme.applyDarkStyles({
|
|
562
|
+
'&:hover': {
|
|
563
|
+
backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5)
|
|
564
|
+
},
|
|
565
|
+
'&:active': {
|
|
566
|
+
backgroundColor: (theme.vars || theme).palette.primaryDark[700]
|
|
567
|
+
}
|
|
568
|
+
})
|
|
569
|
+
}),
|
|
570
|
+
...(ownerState.variant === 'text' && ownerState.color === 'primary' && {
|
|
488
571
|
color: (theme.vars || theme).palette.primary[600],
|
|
489
572
|
...theme.applyDarkStyles({
|
|
490
573
|
color: (theme.vars || theme).palette.primary[300]
|
|
@@ -626,6 +709,21 @@ function getThemedComponents() {
|
|
|
626
709
|
}]
|
|
627
710
|
},
|
|
628
711
|
MuiIconButton: {
|
|
712
|
+
styleOverrides: {
|
|
713
|
+
root: ({
|
|
714
|
+
theme,
|
|
715
|
+
ownerState
|
|
716
|
+
}) => ({
|
|
717
|
+
borderRadius: theme.shape.borderRadius,
|
|
718
|
+
...(ownerState.size === 'small' && {
|
|
719
|
+
height: 32,
|
|
720
|
+
width: 32,
|
|
721
|
+
'& .MuiSvgIcon-root': {
|
|
722
|
+
fontSize: defaultTheme.typography.pxToRem(18)
|
|
723
|
+
}
|
|
724
|
+
})
|
|
725
|
+
})
|
|
726
|
+
},
|
|
629
727
|
variants: [{
|
|
630
728
|
props: {
|
|
631
729
|
color: 'primary'
|
|
@@ -633,14 +731,11 @@ function getThemedComponents() {
|
|
|
633
731
|
style: ({
|
|
634
732
|
theme
|
|
635
733
|
}) => [{
|
|
636
|
-
height: 34,
|
|
637
|
-
width: 34,
|
|
638
734
|
border: `1px solid`,
|
|
639
|
-
borderRadius: theme.shape.borderRadius,
|
|
640
735
|
color: (theme.vars || theme).palette.primary.main,
|
|
641
736
|
backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
|
|
642
737
|
borderColor: (theme.vars || theme).palette.primaryDark[100],
|
|
643
|
-
boxShadow: `${(0, _styles.alpha)(theme.palette.grey[
|
|
738
|
+
boxShadow: `${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
|
|
644
739
|
'&:hover': {
|
|
645
740
|
borderColor: (theme.vars || theme).palette.grey[300],
|
|
646
741
|
background: (theme.vars || theme).palette.grey[50]
|
|
@@ -649,10 +744,10 @@ function getThemedComponents() {
|
|
|
649
744
|
color: (theme.vars || theme).palette.primary[300],
|
|
650
745
|
borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
|
|
651
746
|
backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
|
|
652
|
-
boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.
|
|
747
|
+
boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
|
|
653
748
|
'&:hover': {
|
|
654
|
-
borderColor: (theme.vars || theme).palette.primaryDark[
|
|
655
|
-
background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.
|
|
749
|
+
borderColor: (theme.vars || theme).palette.primaryDark[600],
|
|
750
|
+
background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8)
|
|
656
751
|
}
|
|
657
752
|
})]
|
|
658
753
|
}, {
|
|
@@ -662,14 +757,12 @@ function getThemedComponents() {
|
|
|
662
757
|
style: ({
|
|
663
758
|
theme
|
|
664
759
|
}) => [{
|
|
665
|
-
height: 34,
|
|
666
|
-
width: 34,
|
|
667
760
|
color: (theme.vars || theme).palette.text.tertiary,
|
|
668
761
|
borderRadius: theme.shape.borderRadius,
|
|
669
762
|
border: `1px solid`,
|
|
670
763
|
backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
|
|
671
764
|
borderColor: (theme.vars || theme).palette.primaryDark[100],
|
|
672
|
-
boxShadow: `${(0, _styles.alpha)(theme.palette.grey[50], 0.4)} 0
|
|
765
|
+
boxShadow: `${(0, _styles.alpha)(theme.palette.grey[50], 0.4)} 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.5)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
|
|
673
766
|
'&:hover': {
|
|
674
767
|
color: (theme.vars || theme).palette.primary.main,
|
|
675
768
|
borderColor: (theme.vars || theme).palette.grey[300],
|
|
@@ -678,7 +771,7 @@ function getThemedComponents() {
|
|
|
678
771
|
}, theme.applyDarkStyles({
|
|
679
772
|
borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
|
|
680
773
|
backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
|
|
681
|
-
boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)} 0
|
|
774
|
+
boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
|
|
682
775
|
'&:hover': {
|
|
683
776
|
color: (theme.vars || theme).palette.primary[400],
|
|
684
777
|
borderColor: (theme.vars || theme).palette.primaryDark[500],
|
|
@@ -692,15 +785,26 @@ function getThemedComponents() {
|
|
|
692
785
|
paper: ({
|
|
693
786
|
theme
|
|
694
787
|
}) => [{
|
|
788
|
+
padding: '6px',
|
|
695
789
|
minWidth: 160,
|
|
696
790
|
color: (theme.vars || theme).palette.text.secondary,
|
|
697
791
|
backgroundImage: 'none',
|
|
698
792
|
border: '1px solid',
|
|
699
793
|
backgroundColor: (theme.vars || theme).palette.background.paper,
|
|
700
794
|
borderColor: (theme.vars || theme).palette.grey[200],
|
|
795
|
+
'& .MuiMenu-list': {
|
|
796
|
+
display: 'flex',
|
|
797
|
+
flexDirection: 'column',
|
|
798
|
+
gap: '2px',
|
|
799
|
+
'& .MuiDivider-root': {
|
|
800
|
+
margin: '4px -8px 4px -8px'
|
|
801
|
+
}
|
|
802
|
+
},
|
|
701
803
|
'& .MuiMenuItem-root': {
|
|
804
|
+
padding: '6px 12px',
|
|
805
|
+
borderRadius: '6px',
|
|
702
806
|
fontSize: theme.typography.pxToRem(14),
|
|
703
|
-
fontWeight:
|
|
807
|
+
fontWeight: theme.typography.fontWeightMedium,
|
|
704
808
|
'&:hover, &:focus': {
|
|
705
809
|
backgroundColor: (theme.vars || theme).palette.grey[100],
|
|
706
810
|
color: (theme.vars || theme).palette.text.primary
|
|
@@ -722,7 +826,7 @@ function getThemedComponents() {
|
|
|
722
826
|
backgroundColor: (theme.vars || theme).palette.primaryDark[700]
|
|
723
827
|
},
|
|
724
828
|
'&.Mui-selected': {
|
|
725
|
-
color: (theme.vars || theme).palette.primary[
|
|
829
|
+
color: (theme.vars || theme).palette.primary[200],
|
|
726
830
|
backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.4)
|
|
727
831
|
}
|
|
728
832
|
}
|
|
@@ -746,10 +850,7 @@ function getThemedComponents() {
|
|
|
746
850
|
root: ({
|
|
747
851
|
theme
|
|
748
852
|
}) => ({
|
|
749
|
-
borderColor: (theme.vars || theme).palette.
|
|
750
|
-
...theme.applyDarkStyles({
|
|
751
|
-
borderColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.3)
|
|
752
|
-
})
|
|
853
|
+
borderColor: (theme.vars || theme).palette.divider
|
|
753
854
|
})
|
|
754
855
|
}
|
|
755
856
|
},
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"defaultComponent": "Default component",
|
|
16
16
|
"defaultValue": "Default value",
|
|
17
17
|
"defaultHTMLTag": "Default HTML tag",
|
|
18
|
+
"defaultDeprecationMessage": "This API is deprecated.",
|
|
18
19
|
"demos": "Demos",
|
|
19
20
|
"deprecated": "Deprecated",
|
|
20
21
|
"description": "Description",
|
|
@@ -93,7 +94,7 @@
|
|
|
93
94
|
"copySource": "Copy the source",
|
|
94
95
|
"copySourceLinkJS": "Copy link to JavaScript source",
|
|
95
96
|
"copySourceLinkTS": "Copy link to TypeScript source",
|
|
96
|
-
"dashboardDescr": "
|
|
97
|
+
"dashboardDescr": "A collection of charts and complex components in a responsive dashboard layout.",
|
|
97
98
|
"dashboardTitle": "Dashboard",
|
|
98
99
|
"decreaseSpacing": "decrease spacing",
|
|
99
100
|
"demoToolbarLabel": "demo source",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/docs",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.9",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "MUI Team",
|
|
6
6
|
"description": "MUI Docs - Documentation building blocks.",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
"homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-docs",
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@babel/runtime": "^7.24.
|
|
26
|
+
"@babel/runtime": "^7.24.6",
|
|
27
27
|
"clipboard-copy": "^4.0.1",
|
|
28
28
|
"clsx": "^2.1.1",
|
|
29
29
|
"nprogress": "^0.2.0",
|