@linagora/twake-mui 1.5.0 → 1.6.1
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 +21 -0
- package/README.md +54 -0
- package/dist/components/Avatar/Avatar.stories.d.ts +7 -0
- package/dist/components/Avatar/Avatar.stories.js +73 -0
- package/dist/lib/makeDarkOverrides.js +7 -47
- package/dist/lib/makeLightOverrides.js +659 -39
- package/dist/stories/Alert.stories.d.ts +7 -0
- package/dist/stories/Alert.stories.js +81 -0
- package/dist/stories/Button.stories.d.ts +7 -0
- package/dist/stories/Button.stories.js +78 -0
- package/dist/stories/Dialog.stories.d.ts +7 -0
- package/dist/stories/Dialog.stories.js +40 -0
- package/dist/stories/Input.stories.d.ts +7 -0
- package/dist/stories/Input.stories.js +41 -0
- package/dist/stories/Selection.stories.d.ts +7 -0
- package/dist/stories/Selection.stories.js +37 -0
- package/dist/stories/Typography.stories.d.ts +7 -0
- package/dist/stories/Typography.stories.js +50 -0
- package/package.json +36 -26
- package/dist/lib/overrides/accordionOverrides.d.ts +0 -2
- package/dist/lib/overrides/accordionOverrides.js +0 -63
- package/dist/lib/overrides/autocompleteOverrides.d.ts +0 -2
- package/dist/lib/overrides/autocompleteOverrides.js +0 -31
- package/dist/lib/overrides/avatarOverrides.d.ts +0 -2
- package/dist/lib/overrides/avatarOverrides.js +0 -85
- package/dist/lib/overrides/backdropOverrides.d.ts +0 -2
- package/dist/lib/overrides/backdropOverrides.js +0 -17
- package/dist/lib/overrides/buttonOverrides.d.ts +0 -2
- package/dist/lib/overrides/buttonOverrides.js +0 -86
- package/dist/lib/overrides/checkboxOverrides.d.ts +0 -2
- package/dist/lib/overrides/checkboxOverrides.js +0 -11
- package/dist/lib/overrides/datePickerOverrides.d.ts +0 -2
- package/dist/lib/overrides/datePickerOverrides.js +0 -150
- package/dist/lib/overrides/dialogOverrides.d.ts +0 -5
- package/dist/lib/overrides/dialogOverrides.js +0 -43
- package/dist/lib/overrides/iconButtonOverrides.d.ts +0 -2
- package/dist/lib/overrides/iconButtonOverrides.js +0 -13
- package/dist/lib/overrides/menuItemOverrides.d.ts +0 -2
- package/dist/lib/overrides/menuItemOverrides.js +0 -22
- package/dist/lib/overrides/popoverOverrides.d.ts +0 -2
- package/dist/lib/overrides/popoverOverrides.js +0 -11
- package/dist/lib/overrides/swipeableDrawerOverrides.d.ts +0 -2
- package/dist/lib/overrides/swipeableDrawerOverrides.js +0 -26
- package/dist/lib/overrides/textFieldOverrides.d.ts +0 -5
- package/dist/lib/overrides/textFieldOverrides.js +0 -95
- package/dist/lib/overrides/toggleButtonOverrides.d.ts +0 -3
- package/dist/lib/overrides/toggleButtonOverrides.js +0 -42
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
export const avatarOverrides = (theme) => {
|
|
2
|
-
return {
|
|
3
|
-
styleOverrides: {
|
|
4
|
-
root: {
|
|
5
|
-
fontWeight: 600,
|
|
6
|
-
'&.size-xs': {
|
|
7
|
-
width: 18,
|
|
8
|
-
height: 18,
|
|
9
|
-
fontSize: '9.109px',
|
|
10
|
-
fontWeight: 500,
|
|
11
|
-
lineHeight: '18.219px',
|
|
12
|
-
'& svg': {
|
|
13
|
-
width: '50%',
|
|
14
|
-
height: '50%'
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
'&.size-s': {
|
|
18
|
-
width: 28,
|
|
19
|
-
height: 28,
|
|
20
|
-
fontSize: '12.525px',
|
|
21
|
-
fontWeight: 500,
|
|
22
|
-
lineHeight: '18.219px',
|
|
23
|
-
'& svg': {
|
|
24
|
-
width: '50%',
|
|
25
|
-
height: '50%'
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
'&.size-m': {
|
|
29
|
-
width: 36,
|
|
30
|
-
height: 36,
|
|
31
|
-
fontSize: '18.219px',
|
|
32
|
-
fontWeight: 500,
|
|
33
|
-
lineHeight: '27.328px',
|
|
34
|
-
'& svg': {
|
|
35
|
-
width: '50%',
|
|
36
|
-
height: '50%'
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
'&.size-l': {
|
|
40
|
-
width: 54,
|
|
41
|
-
height: 54,
|
|
42
|
-
fontSize: '27.328px',
|
|
43
|
-
fontWeight: 600,
|
|
44
|
-
lineHeight: '36.438px',
|
|
45
|
-
'& svg': {
|
|
46
|
-
width: '50%',
|
|
47
|
-
height: '50%'
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
'&.size-xl': {
|
|
51
|
-
width: 72,
|
|
52
|
-
height: 72,
|
|
53
|
-
fontSize: '36.438px',
|
|
54
|
-
fontWeight: 600,
|
|
55
|
-
lineHeight: '45.547px',
|
|
56
|
-
'& svg': {
|
|
57
|
-
width: '50%',
|
|
58
|
-
height: '50%'
|
|
59
|
-
}
|
|
60
|
-
},
|
|
61
|
-
'&.disabled': {
|
|
62
|
-
color: theme.palette.primary.contrastText,
|
|
63
|
-
background: theme.palette.grey[300],
|
|
64
|
-
'& img': {
|
|
65
|
-
filter: 'grayscale(1) brightness(2)',
|
|
66
|
-
opacity: 0.5
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
'&.displayInline': {
|
|
70
|
-
display: 'inline-flex'
|
|
71
|
-
},
|
|
72
|
-
'&.border': {
|
|
73
|
-
border: `2px solid ${theme.palette.background.paper}`
|
|
74
|
-
},
|
|
75
|
-
'&.innerBorder': {
|
|
76
|
-
boxShadow: `inset 0px 0px 0px 1px ${theme.palette.divider}`
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
colorDefault: {
|
|
80
|
-
backgroundColor: theme.palette.background.paper,
|
|
81
|
-
color: theme.palette.text.secondary
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { alpha } from '@mui/material/styles';
|
|
2
|
-
export const backdropOverrides = (theme) => {
|
|
3
|
-
return {
|
|
4
|
-
styleOverrides: {
|
|
5
|
-
root: {
|
|
6
|
-
variants: [
|
|
7
|
-
{
|
|
8
|
-
props: { invisible: false },
|
|
9
|
-
style: {
|
|
10
|
-
backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.focusOpacity)
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
]
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
};
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import { alpha } from '@mui/material/styles';
|
|
2
|
-
import paletteJson from '../palette.json';
|
|
3
|
-
import { radius } from '../radius';
|
|
4
|
-
const paletteData = paletteJson;
|
|
5
|
-
export const buttonOverrides = (theme) => {
|
|
6
|
-
return {
|
|
7
|
-
styleOverrides: {
|
|
8
|
-
root: {
|
|
9
|
-
borderRadius: radius.pill,
|
|
10
|
-
boxShadow: 'none',
|
|
11
|
-
'&:hover': {
|
|
12
|
-
boxShadow: 'none'
|
|
13
|
-
},
|
|
14
|
-
'&:active': {
|
|
15
|
-
boxShadow: 'none'
|
|
16
|
-
},
|
|
17
|
-
'&:focus': {
|
|
18
|
-
boxShadow: 'none'
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
contained: {
|
|
22
|
-
boxShadow: 'none',
|
|
23
|
-
'&:hover': {
|
|
24
|
-
boxShadow: 'none'
|
|
25
|
-
},
|
|
26
|
-
'&:active': {
|
|
27
|
-
boxShadow: 'none'
|
|
28
|
-
},
|
|
29
|
-
'&:focus': {
|
|
30
|
-
boxShadow: 'none'
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
containedSecondary: {
|
|
34
|
-
backgroundColor: theme.palette.secondary.main,
|
|
35
|
-
color: alpha(theme.palette.text.primary, 0.9),
|
|
36
|
-
borderRadius: radius.sm,
|
|
37
|
-
'&:hover': {
|
|
38
|
-
backgroundColor: paletteData.Secondary[700],
|
|
39
|
-
color: alpha(theme.palette.text.primary, 0.9)
|
|
40
|
-
},
|
|
41
|
-
'&.Mui-disabled': {
|
|
42
|
-
backgroundColor: theme.palette.action.disabledBackground
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
outlined: {
|
|
46
|
-
backgroundColor: theme.palette.background.paper,
|
|
47
|
-
borderColor: alpha(paletteData.Grey.A900, 0.28),
|
|
48
|
-
color: alpha(theme.palette.text.primary, 0.9),
|
|
49
|
-
'&:hover': {
|
|
50
|
-
backgroundColor: alpha(theme.palette.primary.main, 0.04),
|
|
51
|
-
color: theme.palette.primary.main,
|
|
52
|
-
borderColor: alpha(theme.palette.primary.main, 0.32)
|
|
53
|
-
},
|
|
54
|
-
'&.Mui-disabled': {
|
|
55
|
-
backgroundColor: theme.palette.background.paper,
|
|
56
|
-
color: alpha(theme.palette.grey[900], 0.38),
|
|
57
|
-
borderColor: alpha(paletteData.Grey.A900, 0.28)
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
text: {
|
|
61
|
-
// Text button overrides
|
|
62
|
-
},
|
|
63
|
-
sizeSmall: {
|
|
64
|
-
padding: '6px 16px'
|
|
65
|
-
},
|
|
66
|
-
containedSizeSmall: {
|
|
67
|
-
paddingTop: '7px',
|
|
68
|
-
paddingBottom: '7px'
|
|
69
|
-
},
|
|
70
|
-
sizeMedium: {
|
|
71
|
-
padding: '9px 24px'
|
|
72
|
-
},
|
|
73
|
-
containedSizeMedium: {
|
|
74
|
-
paddingTop: '10px',
|
|
75
|
-
paddingBottom: '10px'
|
|
76
|
-
},
|
|
77
|
-
sizeLarge: {
|
|
78
|
-
padding: '12px 32px'
|
|
79
|
-
},
|
|
80
|
-
containedSizeLarge: {
|
|
81
|
-
paddingTop: '13px',
|
|
82
|
-
paddingBottom: '13px'
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
};
|
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
import { alpha } from '@mui/material/styles';
|
|
2
|
-
// DatePicker component overrides using nested selectors for higher specificity
|
|
3
|
-
export const datePickerOverrides = (theme) => {
|
|
4
|
-
return {
|
|
5
|
-
MuiCssBaseline: {
|
|
6
|
-
styleOverrides: {
|
|
7
|
-
'.MuiDateCalendar-root.MuiDateCalendar-root': {
|
|
8
|
-
width: '230px',
|
|
9
|
-
maxWidth: '230px',
|
|
10
|
-
height: '300px',
|
|
11
|
-
maxHeight: '300px'
|
|
12
|
-
},
|
|
13
|
-
'.MuiDateCalendar-root .MuiDayCalendar-slideTransition': {
|
|
14
|
-
minHeight: '208px'
|
|
15
|
-
},
|
|
16
|
-
'.MuiDateCalendar-root .MuiPickersCalendarHeader-root': {
|
|
17
|
-
padding: '6px 4px',
|
|
18
|
-
maxHeight: '32px',
|
|
19
|
-
minHeight: '32px'
|
|
20
|
-
},
|
|
21
|
-
'.MuiDateCalendar-root .MuiPickersCalendarHeader-label': {
|
|
22
|
-
fontSize: '14px',
|
|
23
|
-
fontStyle: 'normal',
|
|
24
|
-
fontWeight: 600,
|
|
25
|
-
lineHeight: '20px',
|
|
26
|
-
color: alpha(theme.palette.grey[900], 0.9)
|
|
27
|
-
},
|
|
28
|
-
'.MuiDateCalendar-root .MuiPickersCalendarHeader-switchViewButton': {
|
|
29
|
-
padding: '0',
|
|
30
|
-
width: '32px',
|
|
31
|
-
height: '32px',
|
|
32
|
-
color: theme.palette.grey[900]
|
|
33
|
-
},
|
|
34
|
-
'.MuiDateCalendar-root .MuiPickersCalendarHeader-switchViewIcon': {
|
|
35
|
-
fontSize: '15px'
|
|
36
|
-
},
|
|
37
|
-
'.MuiDateCalendar-root .MuiPickersArrowSwitcher-button': {
|
|
38
|
-
padding: '0',
|
|
39
|
-
width: '32px',
|
|
40
|
-
height: '32px',
|
|
41
|
-
color: alpha(theme.palette.grey[900], 0.48)
|
|
42
|
-
},
|
|
43
|
-
'.MuiDateCalendar-root .MuiDayCalendar-weekDayLabel': {
|
|
44
|
-
fontSize: '10px',
|
|
45
|
-
fontStyle: 'normal',
|
|
46
|
-
fontWeight: 500,
|
|
47
|
-
lineHeight: '16px',
|
|
48
|
-
height: '32px',
|
|
49
|
-
width: '32px',
|
|
50
|
-
margin: '0',
|
|
51
|
-
color: alpha(theme.palette.grey[900], 0.48)
|
|
52
|
-
},
|
|
53
|
-
'.MuiDateCalendar-root .MuiPickersDay-root': {
|
|
54
|
-
fontSize: '10px',
|
|
55
|
-
fontStyle: 'normal',
|
|
56
|
-
fontWeight: 500,
|
|
57
|
-
lineHeight: '16px',
|
|
58
|
-
height: '32px',
|
|
59
|
-
width: '32px',
|
|
60
|
-
margin: '0',
|
|
61
|
-
color: alpha(theme.palette.grey[900], 0.9)
|
|
62
|
-
},
|
|
63
|
-
'.MuiDateCalendar-root .MuiPickersDay-root.Mui-selected': {
|
|
64
|
-
backgroundColor: theme.palette.primary.main,
|
|
65
|
-
'&:hover': {
|
|
66
|
-
backgroundColor: theme.palette.primary.dark
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
'.MuiDateCalendar-root .MuiButtonBase-root.MuiPickersDay-root.Mui-selected': {
|
|
70
|
-
backgroundColor: `${theme.palette.primary.main}`,
|
|
71
|
-
'&:hover': {
|
|
72
|
-
backgroundColor: `${theme.palette.primary.dark}`
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
'.MuiDateCalendar-root .MuiMonthCalendar-root': {
|
|
76
|
-
width: '215px'
|
|
77
|
-
},
|
|
78
|
-
'.MuiDateCalendar-root .MuiMonthCalendar-button': {
|
|
79
|
-
fontSize: '14px',
|
|
80
|
-
lineHeight: 1,
|
|
81
|
-
height: '30px',
|
|
82
|
-
width: '55px'
|
|
83
|
-
},
|
|
84
|
-
'.MuiDateCalendar-root .MuiMonthCalendar-button[tabindex="0"]': {
|
|
85
|
-
background: 'transparent'
|
|
86
|
-
},
|
|
87
|
-
'.MuiDateCalendar-root .MuiMonthCalendar-button.Mui-selected': {
|
|
88
|
-
color: theme.palette.primary.contrastText,
|
|
89
|
-
background: theme.palette.primary.main,
|
|
90
|
-
'&:hover': {
|
|
91
|
-
background: theme.palette.primary.dark
|
|
92
|
-
},
|
|
93
|
-
'&:focus': {
|
|
94
|
-
background: theme.palette.primary.dark
|
|
95
|
-
}
|
|
96
|
-
},
|
|
97
|
-
'.MuiDateCalendar-root .MuiMonthCalendar-button.Mui-selected[tabindex="0"]': {
|
|
98
|
-
color: theme.palette.primary.contrastText,
|
|
99
|
-
background: theme.palette.primary.main,
|
|
100
|
-
'&:hover': {
|
|
101
|
-
background: theme.palette.primary.dark
|
|
102
|
-
},
|
|
103
|
-
'&:focus': {
|
|
104
|
-
background: theme.palette.primary.dark
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
'.MuiDateCalendar-root .MuiYearCalendar-root': {
|
|
108
|
-
width: '245px',
|
|
109
|
-
maxWidth: '245px'
|
|
110
|
-
},
|
|
111
|
-
'.MuiDateCalendar-root .MuiYearCalendar-button': {
|
|
112
|
-
fontSize: '14px',
|
|
113
|
-
lineHeight: 1,
|
|
114
|
-
height: '30px',
|
|
115
|
-
width: '55px'
|
|
116
|
-
},
|
|
117
|
-
'.MuiDateCalendar-root .MuiYearCalendar-button[tabindex="0"]': {
|
|
118
|
-
background: 'transparent'
|
|
119
|
-
},
|
|
120
|
-
'.MuiDateCalendar-root .MuiYearCalendar-button.Mui-selected': {
|
|
121
|
-
color: theme.palette.primary.contrastText,
|
|
122
|
-
background: theme.palette.primary.main,
|
|
123
|
-
'&:hover': {
|
|
124
|
-
background: theme.palette.primary.dark
|
|
125
|
-
},
|
|
126
|
-
'&:focus': {
|
|
127
|
-
background: theme.palette.primary.dark
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
'.MuiDateCalendar-root .MuiYearCalendar-button.Mui-selected[tabindex="0"]': {
|
|
131
|
-
color: theme.palette.primary.contrastText,
|
|
132
|
-
background: theme.palette.primary.main,
|
|
133
|
-
'&:hover': {
|
|
134
|
-
background: theme.palette.primary.dark
|
|
135
|
-
},
|
|
136
|
-
'&:focus': {
|
|
137
|
-
background: theme.palette.primary.dark
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
|
-
'.MuiButtonBase-root.MuiMenuItem-root.MuiDigitalClock-item.Mui-selected': {
|
|
141
|
-
backgroundColor: theme.palette.primary.main,
|
|
142
|
-
color: theme.palette.primary.contrastText,
|
|
143
|
-
'&:hover': {
|
|
144
|
-
backgroundColor: theme.palette.primary.dark
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { Components } from '@mui/material/styles';
|
|
2
|
-
export declare const dialogOverrides: () => Components["MuiDialog"];
|
|
3
|
-
export declare const dialogTitleOverrides: () => Components["MuiDialogTitle"];
|
|
4
|
-
export declare const dialogContentOverrides: () => Components["MuiDialogContent"];
|
|
5
|
-
export declare const dialogActionsOverrides: () => Components["MuiDialogActions"];
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { radius } from '../radius';
|
|
2
|
-
export const dialogOverrides = () => {
|
|
3
|
-
return {
|
|
4
|
-
styleOverrides: {
|
|
5
|
-
paper: {
|
|
6
|
-
borderRadius: radius.md,
|
|
7
|
-
boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)',
|
|
8
|
-
maxWidth: '570px'
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
export const dialogTitleOverrides = () => {
|
|
14
|
-
return {
|
|
15
|
-
styleOverrides: {
|
|
16
|
-
root: {
|
|
17
|
-
padding: '12px 32px',
|
|
18
|
-
fontSize: 17,
|
|
19
|
-
fontWeight: 400,
|
|
20
|
-
lineHeight: 1.273,
|
|
21
|
-
letterSpacing: '0'
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
export const dialogContentOverrides = () => {
|
|
27
|
-
return {
|
|
28
|
-
styleOverrides: {
|
|
29
|
-
root: {
|
|
30
|
-
padding: '24px 32px'
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
export const dialogActionsOverrides = () => {
|
|
36
|
-
return {
|
|
37
|
-
styleOverrides: {
|
|
38
|
-
root: {
|
|
39
|
-
padding: '16px 32px'
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { alpha } from '@mui/material/styles';
|
|
2
|
-
import paletteJson from '../palette.json';
|
|
3
|
-
const paletteData = paletteJson;
|
|
4
|
-
export const iconButtonOverrides = () => {
|
|
5
|
-
return {
|
|
6
|
-
styleOverrides: {
|
|
7
|
-
root: {
|
|
8
|
-
color: alpha(paletteData.Grey[900], 0.48),
|
|
9
|
-
padding: '4px'
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { menuItemClasses } from '@mui/material/MenuItem';
|
|
2
|
-
import { alpha } from '@mui/material/styles';
|
|
3
|
-
import { radius } from '../radius';
|
|
4
|
-
export const menuItemOverrides = (theme) => {
|
|
5
|
-
return {
|
|
6
|
-
styleOverrides: {
|
|
7
|
-
root: {
|
|
8
|
-
borderRadius: radius.md,
|
|
9
|
-
'&&&:hover': {
|
|
10
|
-
backgroundColor: `${alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)}`
|
|
11
|
-
},
|
|
12
|
-
[`&.${menuItemClasses.selected}`]: {
|
|
13
|
-
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
|
|
14
|
-
'&:hover': {
|
|
15
|
-
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity +
|
|
16
|
-
theme.palette.action.hoverOpacity)
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { radius } from '../radius';
|
|
2
|
-
// MuiSwipeableDrawer inherits from MuiDrawer.
|
|
3
|
-
// To style the paper (the actual container) of a swipeable drawer, we have to target MuiDrawer
|
|
4
|
-
export const swipeableDrawerOverrides = (theme) => {
|
|
5
|
-
return {
|
|
6
|
-
defaultProps: {
|
|
7
|
-
sx: {
|
|
8
|
-
'& .MuiDrawer-paper': {
|
|
9
|
-
borderTopLeftRadius: radius.md,
|
|
10
|
-
borderTopRightRadius: radius.md,
|
|
11
|
-
'&::before': {
|
|
12
|
-
content: '""',
|
|
13
|
-
display: 'block',
|
|
14
|
-
width: '64px',
|
|
15
|
-
height: '4px',
|
|
16
|
-
backgroundColor: theme.palette.action.disabledBackground,
|
|
17
|
-
borderRadius: radius.md,
|
|
18
|
-
margin: '12px auto',
|
|
19
|
-
marginTop: '30px',
|
|
20
|
-
flexShrink: 0
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { Components } from '@mui/material/styles';
|
|
2
|
-
export declare const textFieldOverrides: () => Components["MuiTextField"];
|
|
3
|
-
export declare const outlinedInputOverrides: () => Components["MuiOutlinedInput"];
|
|
4
|
-
export declare const inputBaseOverrides: () => Components["MuiInputBase"];
|
|
5
|
-
export declare const selectOverrides: () => Components["MuiSelect"];
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import { radius } from '../radius';
|
|
2
|
-
export const textFieldOverrides = () => {
|
|
3
|
-
return {
|
|
4
|
-
defaultProps: {
|
|
5
|
-
size: 'medium'
|
|
6
|
-
},
|
|
7
|
-
styleOverrides: {
|
|
8
|
-
root: {
|
|
9
|
-
'& .MuiOutlinedInput-root': {
|
|
10
|
-
borderRadius: radius.sm,
|
|
11
|
-
'& fieldset': {
|
|
12
|
-
borderRadius: radius.sm
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
export const outlinedInputOverrides = () => {
|
|
20
|
-
return {
|
|
21
|
-
styleOverrides: {
|
|
22
|
-
root: {
|
|
23
|
-
borderRadius: radius.sm,
|
|
24
|
-
'&.Mui-focused fieldset': {
|
|
25
|
-
borderWidth: '1px'
|
|
26
|
-
},
|
|
27
|
-
'& input::placeholder': {
|
|
28
|
-
color: '#8C9CAF',
|
|
29
|
-
opacity: 1
|
|
30
|
-
},
|
|
31
|
-
'& .MuiSvgIcon-root': {
|
|
32
|
-
fontSize: '18px'
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
input: {
|
|
36
|
-
padding: '11px 16px', // Default medium: 48px height
|
|
37
|
-
height: 'auto',
|
|
38
|
-
lineHeight: '24px'
|
|
39
|
-
},
|
|
40
|
-
inputSizeSmall: {
|
|
41
|
-
padding: '8px 16px',
|
|
42
|
-
fontSize: '14px',
|
|
43
|
-
fontWeight: 400,
|
|
44
|
-
lineHeight: '20px',
|
|
45
|
-
minHeight: '26px'
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
variants: [
|
|
49
|
-
{
|
|
50
|
-
props: { size: 'large' },
|
|
51
|
-
style: {
|
|
52
|
-
'& .MuiOutlinedInput-input': {
|
|
53
|
-
padding: '14px 16px' // Large: 54px height
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
]
|
|
58
|
-
};
|
|
59
|
-
};
|
|
60
|
-
export const inputBaseOverrides = () => {
|
|
61
|
-
return {
|
|
62
|
-
styleOverrides: {
|
|
63
|
-
root: {
|
|
64
|
-
'&.MuiInputBase-sizeLarge': {
|
|
65
|
-
fontSize: '16px'
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
};
|
|
71
|
-
export const selectOverrides = () => {
|
|
72
|
-
return {
|
|
73
|
-
styleOverrides: {
|
|
74
|
-
root: {
|
|
75
|
-
'&.MuiOutlinedInput-root': {
|
|
76
|
-
'& .MuiSvgIcon-root': {
|
|
77
|
-
fontSize: '25px'
|
|
78
|
-
},
|
|
79
|
-
'&.MuiInputBase-sizeSmall': {
|
|
80
|
-
'& .MuiSelect-select': {
|
|
81
|
-
padding: '10px 25px 10px 15px',
|
|
82
|
-
fontSize: '14px',
|
|
83
|
-
lineHeight: '20px',
|
|
84
|
-
// Note: :has() selector removed due to jsdom compatibility in tests
|
|
85
|
-
// If SVG is present, padding should be handled via component-level sx prop
|
|
86
|
-
'& svg': {
|
|
87
|
-
marginRight: '8px'
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { alpha } from '@mui/material/styles';
|
|
2
|
-
export const toggleButtonGroupOverrides = () => {
|
|
3
|
-
return {
|
|
4
|
-
styleOverrides: {
|
|
5
|
-
root: {
|
|
6
|
-
borderColor: '#AEAEC0',
|
|
7
|
-
'& .MuiToggleButton-root:not(.Mui-selected)': {
|
|
8
|
-
color: '#8C9CAF',
|
|
9
|
-
backgroundColor: alpha('#49454F', 0.08),
|
|
10
|
-
'&:hover': {
|
|
11
|
-
backgroundColor: alpha('#49454F', 0.08)
|
|
12
|
-
},
|
|
13
|
-
'& svg, & .MuiSvgIcon-root': {
|
|
14
|
-
color: '#8C9CAF'
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
export const toggleButtonOverrides = (theme) => {
|
|
22
|
-
return {
|
|
23
|
-
styleOverrides: {
|
|
24
|
-
root: {
|
|
25
|
-
color: '#525256',
|
|
26
|
-
'&.Mui-selected': {
|
|
27
|
-
color: '#243B55',
|
|
28
|
-
backgroundColor: 'transparent',
|
|
29
|
-
'&:hover': {
|
|
30
|
-
backgroundColor: 'transparent'
|
|
31
|
-
},
|
|
32
|
-
'& svg, & .MuiSvgIcon-root': {
|
|
33
|
-
color: theme.palette.primary.main
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
sizeMedium: {
|
|
38
|
-
padding: '9px 24px'
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
};
|