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