@zesty-io/material 0.7.0 → 0.10.0

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 (23) hide show
  1. package/es/FieldTypeOneToMany/index.d.ts +1 -1
  2. package/es/FieldTypeOneToOne/index.d.ts +1 -1
  3. package/es/IconButton/IconButton.stories.d.ts +5 -0
  4. package/es/IconButton/IconButton.stories.js +11 -0
  5. package/es/IconButton/index.d.ts +32 -0
  6. package/es/IconButton/index.js +15 -0
  7. package/es/TextField.stories.d.ts +1 -2
  8. package/es/icons/Home.d.ts +3 -0
  9. package/es/icons/Home.js +3 -0
  10. package/es/icons/ScreenShare.d.ts +3 -0
  11. package/es/icons/ScreenShare.js +3 -0
  12. package/es/icons/index.d.ts +2 -0
  13. package/es/icons/index.js +2 -0
  14. package/es/index.d.ts +16 -15
  15. package/es/index.js +16 -15
  16. package/es/theme/Theme.stories.d.ts +3 -2
  17. package/es/theme/Theme.stories.js +10 -6
  18. package/es/theme/index.d.ts +12 -5
  19. package/es/theme/index.js +496 -358
  20. package/es/theme/palette.d.ts +42 -5
  21. package/es/theme/palette.js +85 -68
  22. package/es/theme/typography.js +5 -0
  23. package/package.json +3 -3
package/es/theme/index.js CHANGED
@@ -1,447 +1,585 @@
1
- import palette from "./palette";
1
+ import { lightThemePalette, darkThemePalette } from "./palette";
2
2
  import typography from "./typography";
3
3
  import { alpha, createTheme } from "@mui/material/styles";
4
- let theme = createTheme({
5
- palette,
6
- typography,
7
- });
8
- theme = createTheme(theme, {
9
- components: {
10
- MuiFormLabel: {
11
- styleOverrides: {
12
- root: {
13
- ...theme.typography.body2,
14
- },
15
- },
4
+ const components = {
5
+ MuiFormLabel: {
6
+ styleOverrides: {
7
+ root: ({ theme }) => ({
8
+ ...theme.typography.body2,
9
+ }),
16
10
  },
17
- MuiTab: {
18
- styleOverrides: {
19
- root: {
20
- padding: "8px",
21
- margin: "8px",
22
- borderRadius: "8px",
23
- minHeight: "unset",
24
- minWidth: "unset",
25
- textTransform: "none",
26
- "&:hover": {
27
- backgroundColor: theme.palette.grey[100],
28
- },
29
- "&.Mui-selected": {
30
- "&:hover": {
31
- backgroundColor: theme.palette.deepOrange[50],
32
- },
33
- },
34
- },
11
+ },
12
+ MuiTabs: {
13
+ styleOverrides: {
14
+ root: {
15
+ minHeight: "44px",
16
+ },
17
+ flexContainer: {
18
+ gap: "16px",
19
+ height: "44px",
35
20
  },
36
21
  },
37
- MuiCardHeader: {
38
- styleOverrides: {
39
- root: {
40
- padding: "16px 16px 0px",
22
+ },
23
+ MuiTab: {
24
+ styleOverrides: {
25
+ root: ({ theme }) => ({
26
+ color: theme.palette.text.disabled,
27
+ paddingLeft: 0,
28
+ paddingRight: 0,
29
+ minHeight: "unset",
30
+ minWidth: "unset",
31
+ textTransform: "none",
32
+ "&:hover": {
33
+ color: theme.palette.text.primary,
34
+ },
35
+ "&.Mui-selected": {
36
+ color: theme.palette.text.primary,
37
+ },
38
+ "& .MuiTab-iconWrapper": {
39
+ marginRight: "4px",
41
40
  },
41
+ }),
42
+ },
43
+ },
44
+ MuiCardHeader: {
45
+ styleOverrides: {
46
+ root: {
47
+ padding: "16px 16px 0px",
42
48
  },
43
49
  },
44
- MuiCardContent: {
45
- styleOverrides: {
46
- root: {
47
- padding: "8px 16px 16px",
48
- ":last-child": {
49
- paddingBottom: "16px",
50
- },
50
+ },
51
+ MuiCardContent: {
52
+ styleOverrides: {
53
+ root: {
54
+ padding: "8px 16px 16px",
55
+ ":last-child": {
56
+ paddingBottom: "16px",
51
57
  },
52
58
  },
53
59
  },
54
- MuiButton: {
55
- variants: [
56
- {
57
- props: { size: "xsmall" },
58
- style: {
59
- padding: "2px 10px",
60
- },
61
- },
62
- ],
63
- styleOverrides: {
64
- root: {
65
- textTransform: "none",
60
+ },
61
+ MuiButton: {
62
+ variants: [
63
+ {
64
+ props: { size: "xsmall" },
65
+ style: {
66
+ padding: "2px 10px",
67
+ },
68
+ },
69
+ ],
70
+ styleOverrides: {
71
+ root: {
72
+ textTransform: "none",
73
+ },
74
+ sizeSmall: {
75
+ fontSize: "14px",
76
+ },
77
+ outlinedInherit: ({ theme }) => ({
78
+ color: theme.palette.text.secondary,
79
+ borderColor: theme.palette.border,
80
+ }),
81
+ containedInherit: ({ theme }) => ({
82
+ color: theme.palette.text.secondary,
83
+ backgroundColor: theme.palette.grey[100],
84
+ }),
85
+ textInherit: ({ theme }) => ({
86
+ color: theme.palette.text.secondary,
87
+ }),
88
+ },
89
+ defaultProps: {
90
+ disableElevation: true,
91
+ },
92
+ },
93
+ MuiButtonGroup: {
94
+ defaultProps: {
95
+ disableElevation: true,
96
+ },
97
+ styleOverrides: {
98
+ groupedContainedPrimary: ({ theme }) => ({
99
+ color: theme.palette.primary.main,
100
+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
101
+ "&:hover": {
102
+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
66
103
  },
67
- sizeSmall: {
68
- fontSize: "14px",
104
+ }),
105
+ },
106
+ },
107
+ MuiOutlinedInput: {
108
+ styleOverrides: {
109
+ root: ({ theme }) => ({
110
+ padding: "0px 8px",
111
+ borderRadius: "8px",
112
+ backgroundColor: theme.palette.background.paper,
113
+ "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
114
+ borderColor: theme.palette.border,
69
115
  },
70
- outlinedInherit: {
71
- color: theme.palette.text.secondary,
116
+ "&:hover .MuiOutlinedInput-notchedOutline": {
72
117
  borderColor: theme.palette.border,
73
118
  },
74
- containedInherit: {
75
- color: theme.palette.text.secondary,
76
- backgroundColor: theme.palette.grey[100],
119
+ "&.Mui-focused:hover .MuiOutlinedInput-notchedOutline": {
120
+ borderColor: theme.palette.primary.main,
77
121
  },
78
- textInherit: {
79
- color: theme.palette.text.secondary,
122
+ "&.MuiInputBase-adornedStart .MuiInputAdornment-root": {
123
+ color: theme.palette.action.active,
80
124
  },
81
- },
82
- defaultProps: {
83
- disableElevation: true,
84
- },
85
- },
86
- MuiButtonGroup: {
87
- defaultProps: {
88
- disableElevation: true,
89
- },
90
- styleOverrides: {
91
- groupedContained: {
92
- color: theme.palette.primary.main,
93
- backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
94
- "&:hover": {
95
- backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
96
- },
125
+ }),
126
+ input: ({ theme }) => ({
127
+ padding: "10px 0px",
128
+ ":read-only": {
129
+ color: theme.palette.text.secondary,
97
130
  },
98
- },
99
- },
100
- MuiOutlinedInput: {
101
- styleOverrides: {
102
- root: {
103
- padding: "0px 8px",
104
- borderRadius: "8px",
105
- backgroundColor: theme.palette.common.white,
106
- "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
107
- borderColor: theme.palette.border,
108
- },
109
- "&:hover .MuiOutlinedInput-notchedOutline": {
110
- borderColor: theme.palette.border,
111
- },
112
- "&.Mui-focused:hover .MuiOutlinedInput-notchedOutline": {
113
- borderColor: theme.palette.primary.main,
114
- },
131
+ "::placeholder": {
132
+ color: theme.palette.text.disabled,
115
133
  },
134
+ }),
135
+ sizeSmall: {
116
136
  input: {
117
- padding: "10px 0px",
118
- ":read-only": {
119
- color: theme.palette.text.secondary,
120
- },
121
- },
122
- sizeSmall: {
123
- input: {
124
- padding: "8px 0px",
125
- },
126
- },
127
- notchedOutline: {
128
- borderColor: theme.palette.border,
137
+ padding: "8px 0px",
129
138
  },
130
139
  },
140
+ notchedOutline: ({ theme }) => ({
141
+ borderColor: theme.palette.border,
142
+ }),
131
143
  },
132
- MuiFormHelperText: {
133
- styleOverrides: {
134
- root: {
135
- ...theme.typography.body2,
136
- margin: "4px 0px 0px 0px",
137
- },
138
- },
144
+ },
145
+ MuiFormHelperText: {
146
+ styleOverrides: {
147
+ root: ({ theme }) => ({
148
+ ...theme.typography.body2,
149
+ margin: "4px 0px 0px 0px",
150
+ }),
139
151
  },
140
- MuiInputBase: {
141
- styleOverrides: {
142
- input: {
143
- ...theme.typography.body2,
144
- "::placeholder": {
145
- color: theme.palette.text.disabled,
146
- opacity: 1,
147
- },
152
+ },
153
+ MuiInputBase: {
154
+ styleOverrides: {
155
+ input: ({ theme }) => ({
156
+ ...theme.typography.body2,
157
+ "::placeholder": {
158
+ color: theme.palette.text.disabled,
159
+ opacity: 1,
148
160
  },
149
- },
161
+ }),
150
162
  },
151
- MuiInputLabel: {
152
- styleOverrides: {
153
- root: {
154
- ...theme.typography.body2,
155
- color: theme.palette.text.primary,
156
- marginBottom: "4px",
157
- fontWeight: 600,
158
- },
159
- },
163
+ },
164
+ MuiInputLabel: {
165
+ styleOverrides: {
166
+ root: ({ theme }) => ({
167
+ ...theme.typography.body2,
168
+ color: theme.palette.text.primary,
169
+ marginBottom: "4px",
170
+ fontWeight: 600,
171
+ }),
160
172
  },
161
- MuiInputAdornment: {
162
- styleOverrides: {
163
- root: {
164
- "& > .MuiSvgIcon-root": {
165
- margin: "4px",
166
- },
173
+ },
174
+ MuiInputAdornment: {
175
+ styleOverrides: {
176
+ root: {
177
+ "& > .MuiSvgIcon-root": {
178
+ margin: "4px",
167
179
  },
168
180
  },
169
181
  },
170
- MuiIconButton: {
171
- styleOverrides: {
172
- sizeSmall: {
173
- padding: "4px",
174
- },
182
+ },
183
+ MuiIconButton: {
184
+ styleOverrides: {
185
+ root: {
186
+ borderRadius: "4px",
175
187
  },
176
- },
177
- MuiDialog: {
178
- styleOverrides: {
179
- paper: {
180
- borderRadius: "8px",
181
- },
182
- paperWidthXs: {
183
- width: "480px",
184
- maxWidth: "480px",
185
- },
188
+ sizeSmall: {
189
+ padding: "6px",
186
190
  },
187
191
  },
188
- MuiDialogTitle: {
189
- styleOverrides: {
190
- root: {
191
- ...theme.typography.h5,
192
- fontWeight: 600,
193
- padding: "20px",
192
+ variants: [
193
+ {
194
+ props: { size: "xsmall" },
195
+ style: {
196
+ width: "24px",
197
+ height: "24px",
198
+ padding: "3px",
194
199
  },
195
200
  },
196
- },
197
- MuiDialogContent: {
198
- styleOverrides: {
199
- root: {
200
- padding: "20px",
201
- paddingTop: 0,
202
- },
203
- dividers: {
204
- borderColor: theme.palette.border,
201
+ {
202
+ props: { size: "xxsmall" },
203
+ style: {
204
+ width: "20px",
205
+ height: "20px",
206
+ padding: "2px",
205
207
  },
206
208
  },
207
- },
208
- MuiDialogContentText: {
209
- styleOverrides: {
210
- root: {
211
- ...theme.typography.body2,
212
- },
209
+ ],
210
+ },
211
+ MuiDialog: {
212
+ styleOverrides: {
213
+ paper: {
214
+ borderRadius: "8px",
213
215
  },
214
- },
215
- MuiDialogActions: {
216
- styleOverrides: {
217
- root: {
218
- padding: "20px",
219
- paddingTop: 0,
220
- },
216
+ paperWidthXs: {
217
+ width: "480px",
218
+ maxWidth: "480px",
221
219
  },
222
220
  },
223
- MuiBackdrop: {
224
- styleOverrides: {
225
- root: {
226
- backgroundColor: alpha(theme.palette.grey[900], 0.5),
227
- },
228
- invisible: {
229
- backgroundColor: "transparent",
230
- },
231
- },
221
+ },
222
+ MuiDialogTitle: {
223
+ styleOverrides: {
224
+ root: ({ theme }) => ({
225
+ ...theme.typography.h5,
226
+ fontWeight: 600,
227
+ padding: "20px",
228
+ }),
232
229
  },
233
- MuiMenu: {
234
- styleOverrides: {
235
- list: {
236
- minWidth: "240px",
237
- },
230
+ },
231
+ MuiDialogContent: {
232
+ styleOverrides: {
233
+ root: {
234
+ padding: "20px",
235
+ paddingTop: 0,
238
236
  },
237
+ dividers: ({ theme }) => ({
238
+ borderColor: theme.palette.border,
239
+ }),
239
240
  },
240
- MuiAccordion: {
241
- styleOverrides: {
242
- root: {
243
- "&:before": {
244
- backgroundColor: theme.palette.border,
245
- },
246
- },
241
+ },
242
+ MuiDialogContentText: {
243
+ styleOverrides: {
244
+ root: ({ theme }) => ({
245
+ ...theme.typography.body2,
246
+ }),
247
+ },
248
+ },
249
+ MuiDialogActions: {
250
+ styleOverrides: {
251
+ root: {
252
+ padding: "20px",
253
+ paddingTop: 0,
247
254
  },
248
255
  },
249
- MuiSlider: {
250
- styleOverrides: {
251
- rail: {
252
- backgroundColor: theme.palette.grey[400],
253
- },
256
+ },
257
+ MuiBackdrop: {
258
+ styleOverrides: {
259
+ root: ({ theme }) => ({
260
+ backgroundColor: alpha(theme.palette.grey[900], 0.5),
261
+ }),
262
+ invisible: {
263
+ backgroundColor: "transparent",
254
264
  },
255
265
  },
256
- MuiChip: {
257
- styleOverrides: {
258
- root: {
259
- borderRadius: "4px",
260
- },
261
- colorDefault: {
262
- backgroundColor: theme.palette.grey[100],
263
- ":hover": {
264
- backgroundColor: theme.palette.grey[200],
265
- },
266
- ":focus": {
267
- backgroundColor: theme.palette.grey[300],
268
- },
269
- },
266
+ },
267
+ MuiMenu: {
268
+ styleOverrides: {
269
+ list: {
270
+ minWidth: "240px",
270
271
  },
271
272
  },
272
- MuiAlert: {
273
- styleOverrides: {
274
- icon: {
275
- alignSelf: "center",
276
- },
277
- standardWarning: {
278
- " .MuiAlert-icon": {
279
- color: theme.palette.common.black,
280
- },
281
- },
282
- standardInfo: {
283
- backgroundColor: alpha(theme.palette.blue[500], 0.1),
284
- " .MuiAlert-icon": {
285
- color: theme.palette.info.main,
286
- },
287
- },
288
- standardError: {
289
- backgroundColor: alpha(theme.palette.error.main, 0.1),
290
- " .MuiAlert-icon": {
291
- color: theme.palette.error.main,
292
- },
273
+ },
274
+ MuiMenuItem: {
275
+ styleOverrides: {
276
+ root: {
277
+ " .MuiListItemIcon-root": {
278
+ minWidth: "32px",
293
279
  },
294
280
  },
295
281
  },
296
- MuiDataGrid: {
297
- styleOverrides: {
298
- root: {
299
- borderColor: theme.palette.border,
300
- borderRadius: "8px",
282
+ },
283
+ MuiAccordion: {
284
+ styleOverrides: {
285
+ root: ({ theme }) => ({
286
+ "&:before": {
287
+ backgroundColor: theme.palette.border,
301
288
  },
302
- cell: {
303
- borderColor: theme.palette.border,
304
- padding: "0 16px",
305
- "&:focus": {
306
- outline: "none",
307
- },
289
+ }),
290
+ },
291
+ },
292
+ MuiSlider: {
293
+ styleOverrides: {
294
+ rail: ({ theme }) => ({
295
+ backgroundColor: theme.palette.grey[400],
296
+ }),
297
+ },
298
+ },
299
+ MuiChip: {
300
+ styleOverrides: {
301
+ root: {
302
+ borderRadius: "4px",
303
+ },
304
+ // @ts-ignore
305
+ colorDefault: ({ theme }) => ({
306
+ backgroundColor: theme.palette.grey[100],
307
+ ":hover": {
308
+ backgroundColor: theme.palette.grey[200],
308
309
  },
309
- columnHeaders: {
310
- borderColor: theme.palette.border,
311
- backgroundColor: theme.palette.grey[50],
310
+ ":focus": {
311
+ backgroundColor: theme.palette.grey[300],
312
312
  },
313
- columnHeader: {
314
- padding: "0 16px",
315
- "&:focus": {
316
- outline: "none",
317
- },
313
+ }),
314
+ },
315
+ },
316
+ MuiAlert: {
317
+ styleOverrides: {
318
+ icon: {
319
+ alignSelf: "center",
320
+ },
321
+ standardWarning: ({ theme }) => ({
322
+ " .MuiAlert-icon": {
323
+ color: theme.palette.common.black,
318
324
  },
319
- columnHeaderTitle: {
320
- fontWeight: 600,
325
+ }),
326
+ standardInfo: ({ theme }) => ({
327
+ backgroundColor: alpha(theme.palette.blue[500], 0.1),
328
+ " .MuiAlert-icon": {
329
+ color: theme.palette.info.main,
321
330
  },
322
- columnSeparator: {
323
- visibility: "hidden",
331
+ }),
332
+ standardError: ({ theme }) => ({
333
+ backgroundColor: alpha(theme.palette.error.main, 0.1),
334
+ " .MuiAlert-icon": {
335
+ color: theme.palette.error.main,
324
336
  },
325
- },
337
+ }),
326
338
  },
327
- MuiFab: {
328
- styleOverrides: {
329
- root: {
330
- boxShadow: "none",
331
- },
339
+ },
340
+ MuiDataGrid: {
341
+ styleOverrides: {
342
+ root: ({ theme }) => ({
343
+ borderColor: theme.palette.border,
344
+ borderRadius: "8px",
345
+ }),
346
+ cell: ({ theme }) => ({
347
+ borderColor: theme.palette.border,
348
+ padding: "0 16px",
349
+ "&:focus": {
350
+ outline: "none",
351
+ },
352
+ }),
353
+ columnHeaders: ({ theme }) => ({
354
+ borderColor: theme.palette.border,
355
+ backgroundColor: theme.palette.grey[100],
356
+ }),
357
+ columnHeader: {
358
+ padding: "0 16px",
359
+ "&:focus": {
360
+ outline: "none",
361
+ },
362
+ },
363
+ columnHeaderTitle: {
364
+ fontWeight: 600,
365
+ },
366
+ columnSeparator: {
367
+ visibility: "hidden",
332
368
  },
333
369
  },
334
- MuiSpeedDial: {
335
- styleOverrides: {
336
- actions: {
337
- paddingTop: "38px !important",
338
- },
370
+ },
371
+ MuiFab: {
372
+ styleOverrides: {
373
+ root: {
374
+ boxShadow: "none",
339
375
  },
340
376
  },
341
- MuiSpeedDialAction: {
342
- styleOverrides: {
343
- fab: {
344
- marginTop: "6px",
345
- marginBottom: "6px",
346
- },
347
- staticTooltipLabel: {
348
- ...theme.typography.body2,
349
- fontWeight: 500,
350
- color: theme.palette.common.white,
351
- backgroundColor: "transparent",
352
- whiteSpace: "nowrap",
353
- boxShadow: "none",
354
- paddingRight: 0,
355
- },
377
+ },
378
+ MuiSpeedDial: {
379
+ styleOverrides: {
380
+ actions: {
381
+ paddingTop: "38px !important",
356
382
  },
357
383
  },
358
- MuiListItemButton: {
359
- styleOverrides: {
360
- divider: {
361
- borderColor: theme.palette.border,
384
+ },
385
+ MuiSpeedDialAction: {
386
+ styleOverrides: {
387
+ fab: {
388
+ marginTop: "6px",
389
+ marginBottom: "6px",
390
+ },
391
+ staticTooltipLabel: ({ theme }) => ({
392
+ ...theme.typography.body2,
393
+ fontWeight: 500,
394
+ color: theme.palette.common.white,
395
+ backgroundColor: "transparent",
396
+ whiteSpace: "nowrap",
397
+ boxShadow: "none",
398
+ paddingRight: 0,
399
+ }),
400
+ },
401
+ },
402
+ MuiListItemButton: {
403
+ styleOverrides: {
404
+ divider: ({ theme }) => ({
405
+ borderColor: theme.palette.border,
406
+ }),
407
+ },
408
+ },
409
+ MuiLink: {
410
+ styleOverrides: {
411
+ root: ({ theme }) => ({
412
+ color: theme.palette.info.dark,
413
+ textDecorationColor: theme.palette.info.main,
414
+ "&:hover": {
415
+ textDecorationColor: theme.palette.info.dark,
362
416
  },
417
+ }),
418
+ },
419
+ defaultProps: {
420
+ underline: "hover",
421
+ },
422
+ },
423
+ MuiTooltip: {
424
+ styleOverrides: {
425
+ popper: {
426
+ maxWidth: "240px",
363
427
  },
428
+ tooltip: ({ theme }) => ({
429
+ ...theme.typography.body3,
430
+ }),
364
431
  },
365
- MuiLink: {
366
- styleOverrides: {
367
- root: {
368
- color: theme.palette.info.dark,
369
- textDecorationColor: theme.palette.info.main,
370
- "&:hover": {
371
- textDecorationColor: theme.palette.info.dark,
432
+ },
433
+ MuiTreeItem: {
434
+ styleOverrides: {
435
+ root: ({ theme }) => ({
436
+ color: theme.palette.text.disabled,
437
+ svg: {
438
+ color: theme.palette.action.active,
439
+ },
440
+ }),
441
+ content: ({ theme }) => ({
442
+ paddingTop: "6px",
443
+ paddingBottom: "6px",
444
+ paddingLeft: 0,
445
+ paddingRight: "12px",
446
+ borderRadius: 4,
447
+ width: "unset",
448
+ "&.Mui-focused:hover": {
449
+ background: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
450
+ },
451
+ "&.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focused": {
452
+ background: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
453
+ " .MuiTreeItem-label .MuiSvgIcon-root": {
454
+ color: theme.palette.primary.main,
455
+ },
456
+ " .MuiTypography-root": {
457
+ color: theme.palette.primary.main,
372
458
  },
373
459
  },
460
+ }),
461
+ label: {
462
+ paddingLeft: "0",
374
463
  },
375
- defaultProps: {
376
- underline: "hover",
464
+ iconContainer: {
465
+ marginRight: "0",
466
+ width: "24px",
467
+ svg: {
468
+ fontSize: "24px",
469
+ },
377
470
  },
378
471
  },
379
- MuiTooltip: {
380
- styleOverrides: {
381
- popper: {
382
- maxWidth: "240px",
383
- },
384
- tooltip: {
385
- ...theme.typography.body3,
386
- },
472
+ },
473
+ MuiCssBaseline: {
474
+ styleOverrides: {
475
+ body: {
476
+ "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
477
+ width: "8px",
478
+ height: "8px",
479
+ },
480
+ "&::-webkit-scrollbar-track-piece, & *::-webkit-scrollbar-track-piece": ({ theme }) => ({
481
+ backgroundColor: theme.palette.grey[100],
482
+ borderRadius: "4px",
483
+ }),
484
+ "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": ({ theme, }) => ({
485
+ backgroundColor: theme.palette.grey[300],
486
+ borderRadius: "4px",
487
+ }),
387
488
  },
388
489
  },
389
- MuiTreeItem: {
390
- styleOverrides: {
391
- content: {
392
- paddingTop: "6px",
393
- paddingBottom: "6px",
394
- paddingLeft: 0,
395
- paddingRight: "12px",
396
- borderRadius: 4,
397
- width: "unset",
398
- "&.Mui-selected": {
399
- background: alpha(theme.palette.primary.main, 0.04),
400
- " .MuiTreeItem-label .MuiSvgIcon-root": {
401
- color: theme.palette.primary.main,
402
- },
403
- " .MuiTypography-root": {
404
- color: theme.palette.primary.dark,
405
- },
490
+ },
491
+ MuiDivider: {
492
+ styleOverrides: {
493
+ root: ({ theme }) => ({
494
+ borderColor: theme.palette.border,
495
+ }),
496
+ },
497
+ },
498
+ MuiListItem: {
499
+ styleOverrides: {
500
+ root: ({ theme }) => ({
501
+ color: theme.palette.text.secondary,
502
+ "&.Mui-selected": {
503
+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
504
+ color: theme.palette.primary.main,
505
+ svg: {
506
+ color: theme.palette.primary.main,
406
507
  },
407
508
  },
408
- label: {
409
- paddingLeft: "0",
410
- },
411
- iconContainer: {
412
- marginRight: "0",
413
- width: "24px",
509
+ }),
510
+ },
511
+ },
512
+ MuiBreadcrumbs: {
513
+ styleOverrides: {
514
+ root: ({ theme }) => ({
515
+ '& button[aria-label="Show path"]': {
516
+ backgroundColor: "transparent",
517
+ margin: 0,
518
+ color: theme.palette.action.active,
414
519
  svg: {
415
- fontSize: "24px",
520
+ width: "20px",
521
+ height: "20px",
522
+ },
523
+ "&:hover": {
524
+ color: theme.palette.primary.main,
416
525
  },
417
526
  },
527
+ }),
528
+ separator: ({ theme }) => ({
529
+ color: theme.palette.grey[400],
530
+ height: "20px",
531
+ alignItems: "center",
532
+ }),
533
+ },
534
+ },
535
+ MuiScopedCssBaseline: {
536
+ styleOverrides: {
537
+ root: ({ theme }) => ({
538
+ "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
539
+ width: "8px",
540
+ height: "8px",
541
+ },
542
+ "&::-webkit-scrollbar-track-piece, & *::-webkit-scrollbar-track-piece": {
543
+ backgroundColor: theme.palette.grey[800],
544
+ borderRadius: "4px",
545
+ },
546
+ "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
547
+ backgroundColor: theme.palette.grey[700],
548
+ borderRadius: "4px",
549
+ },
550
+ }),
551
+ },
552
+ },
553
+ MuiToggleButton: {
554
+ styleOverrides: {
555
+ sizeSmall: {
556
+ fontSize: "16px",
418
557
  },
419
558
  },
420
- MuiCssBaseline: {
559
+ },
560
+ };
561
+ export let theme = createTheme({
562
+ typography,
563
+ palette: {
564
+ mode: "light",
565
+ ...lightThemePalette,
566
+ },
567
+ components,
568
+ });
569
+ export let darkTheme = createTheme(theme, {
570
+ palette: {
571
+ mode: "dark",
572
+ ...darkThemePalette,
573
+ },
574
+ components: {
575
+ MuiIconButton: {
421
576
  styleOverrides: {
422
- body: {
423
- "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
424
- width: "8px",
425
- height: "8px",
426
- },
427
- "&::-webkit-scrollbar-track-piece, & *::-webkit-scrollbar-track-piece": {
428
- backgroundColor: theme.palette.grey[100],
429
- borderRadius: "4px",
430
- },
431
- "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
432
- backgroundColor: theme.palette.grey[300],
433
- borderRadius: "4px",
577
+ root: {
578
+ "&:hover": {
579
+ backgroundColor: theme.palette.grey[800],
434
580
  },
435
581
  },
436
582
  },
437
583
  },
438
- MuiDivider: {
439
- styleOverrides: {
440
- root: {
441
- borderColor: theme.palette.border
442
- }
443
- }
444
- }
445
584
  },
446
585
  });
447
- export default theme;