@linagora/twake-mui 5.1.0 → 5.2.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 (18) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/lib/darkOverrides.d.ts +2 -0
  3. package/dist/lib/darkOverrides.js +3 -0
  4. package/dist/lib/lightOverrides.d.ts +2 -0
  5. package/dist/lib/lightOverrides.js +614 -0
  6. package/dist/lib/makePalette.d.ts +2 -1
  7. package/dist/lib/makePalette.js +20 -2
  8. package/dist/lib/makeShadows.d.ts +3 -0
  9. package/dist/lib/makeShadows.js +52 -0
  10. package/dist/lib/makeTheme.js +6 -4
  11. package/dist/lib/types.d.ts +22 -0
  12. package/dist/stories/ThemePlayground.stories.d.ts +7 -0
  13. package/dist/stories/ThemePlayground.stories.js +231 -0
  14. package/package.json +1 -1
  15. package/dist/lib/makeDarkOverrides.d.ts +0 -2
  16. package/dist/lib/makeDarkOverrides.js +0 -9
  17. package/dist/lib/makeLightOverrides.d.ts +0 -2
  18. package/dist/lib/makeLightOverrides.js +0 -621
package/dist/lib/makeLightOverrides.js DELETED
@@ -1,621 +0,0 @@
1
- import { menuItemClasses } from '@mui/material/MenuItem';
2
- import { alpha, darken } from '@mui/material/styles';
3
- import React from 'react';
4
- import paletteJson from './palette.json';
5
- import { radius } from './radius';
6
- import AccordionExpandIcon from '../components/AccordionExpandIcon';
7
- const paletteData = paletteJson;
8
- export const makeLightOverrides = (theme) => {
9
- return {
10
- MuiButton: {
11
- styleOverrides: {
12
- root: {
13
- borderRadius: radius.pill,
14
- boxShadow: 'none',
15
- '&:hover': {
16
- boxShadow: 'none'
17
- },
18
- '&:active': {
19
- boxShadow: 'none'
20
- },
21
- '&:focus': {
22
- boxShadow: 'none'
23
- },
24
- variants: [
25
- {
26
- props: { variant: 'contained', color: 'secondary' },
27
- style: {
28
- backgroundColor: theme.palette.secondary.main,
29
- color: alpha(theme.palette.text.primary, 0.9),
30
- borderRadius: radius.sm,
31
- '&:hover': {
32
- backgroundColor: paletteData.Secondary[700],
33
- color: alpha(theme.palette.text.primary, 0.9)
34
- },
35
- '&.Mui-disabled': {
36
- backgroundColor: theme.palette.action.disabledBackground
37
- }
38
- }
39
- },
40
- {
41
- props: { size: 'small' },
42
- style: {
43
- padding: '6px 16px'
44
- }
45
- },
46
- {
47
- props: { size: 'medium' },
48
- style: {
49
- padding: '9px 24px'
50
- }
51
- },
52
- {
53
- props: { size: 'large' },
54
- style: {
55
- padding: '12px 32px'
56
- }
57
- },
58
- {
59
- props: { variant: 'contained', size: 'small' },
60
- style: {
61
- paddingTop: '7px',
62
- paddingBottom: '7px'
63
- }
64
- },
65
- {
66
- props: { variant: 'contained', size: 'medium' },
67
- style: {
68
- paddingTop: '10px',
69
- paddingBottom: '10px'
70
- }
71
- },
72
- {
73
- props: { variant: 'contained', size: 'large' },
74
- style: {
75
- paddingTop: '13px',
76
- paddingBottom: '13px'
77
- }
78
- }
79
- ]
80
- },
81
- contained: {
82
- boxShadow: 'none',
83
- '&:hover': {
84
- boxShadow: 'none'
85
- },
86
- '&:active': {
87
- boxShadow: 'none'
88
- },
89
- '&:focus': {
90
- boxShadow: 'none'
91
- }
92
- },
93
- outlined: {
94
- backgroundColor: theme.palette.background.paper,
95
- borderColor: alpha(paletteData.Grey.A900, 0.28),
96
- color: alpha(theme.palette.text.primary, 0.9),
97
- '&:hover': {
98
- backgroundColor: alpha(theme.palette.primary.main, 0.04),
99
- color: theme.palette.primary.main,
100
- borderColor: alpha(theme.palette.primary.main, 0.32)
101
- },
102
- '&.Mui-disabled': {
103
- backgroundColor: theme.palette.background.paper,
104
- color: alpha(theme.palette.grey[900], 0.38),
105
- borderColor: alpha(paletteData.Grey.A900, 0.28)
106
- }
107
- }
108
- }
109
- },
110
- MuiTextField: {
111
- defaultProps: {
112
- size: 'medium'
113
- },
114
- styleOverrides: {
115
- root: {
116
- '& .MuiOutlinedInput-root': {
117
- borderRadius: radius.sm,
118
- '& fieldset': {
119
- borderRadius: radius.sm
120
- }
121
- }
122
- }
123
- }
124
- },
125
- MuiOutlinedInput: {
126
- styleOverrides: {
127
- root: {
128
- borderRadius: radius.sm,
129
- '&.Mui-focused fieldset': {
130
- borderWidth: '1px'
131
- },
132
- '& input::placeholder': {
133
- color: '#8C9CAF',
134
- opacity: 1
135
- },
136
- '& .MuiSvgIcon-root': {
137
- fontSize: '18px'
138
- }
139
- },
140
- input: {
141
- padding: '11px 16px', // Default medium: 48px height
142
- height: 'auto',
143
- lineHeight: '24px',
144
- variants: [
145
- {
146
- props: { size: 'small' },
147
- style: {
148
- padding: '8px 16px',
149
- fontSize: '14px',
150
- fontWeight: 400,
151
- lineHeight: '20px',
152
- minHeight: '26px'
153
- }
154
- }
155
- ]
156
- }
157
- },
158
- variants: [
159
- {
160
- props: { size: 'large' },
161
- style: {
162
- '& .MuiOutlinedInput-input': {
163
- padding: '14px 16px' // Large: 54px height
164
- }
165
- }
166
- }
167
- ]
168
- },
169
- MuiInputBase: {
170
- styleOverrides: {
171
- root: {
172
- '&.MuiInputBase-sizeLarge': {
173
- fontSize: '16px'
174
- }
175
- }
176
- }
177
- },
178
- MuiSelect: {
179
- styleOverrides: {
180
- root: {
181
- '&.MuiOutlinedInput-root': {
182
- '& .MuiSvgIcon-root': {
183
- fontSize: '25px'
184
- },
185
- '&.MuiInputBase-sizeSmall': {
186
- '& .MuiSelect-select': {
187
- padding: '10px 25px 10px 15px',
188
- fontSize: '14px',
189
- lineHeight: '20px',
190
- // Note: :has() selector removed due to jsdom compatibility in tests
191
- // If SVG is present, padding should be handled via component-level sx prop
192
- '& svg': {
193
- marginRight: '8px'
194
- }
195
- }
196
- }
197
- }
198
- }
199
- }
200
- },
201
- MuiAutocomplete: {
202
- styleOverrides: {
203
- root: {
204
- // Using "&&" to increase CSS specificity
205
- '&&': {
206
- '& .MuiOutlinedInput-root': {
207
- paddingLeft: '16px',
208
- borderRadius: radius.sm,
209
- '& fieldset.MuiOutlinedInput-notchedOutline': {
210
- borderRadius: radius.sm
211
- },
212
- '&.MuiInputBase-sizeSmall': {
213
- paddingTop: '8px',
214
- paddingBottom: '8px',
215
- paddingLeft: '16px',
216
- '& .MuiAutocomplete-input': {
217
- padding: '0px 4px 0px 8px'
218
- }
219
- }
220
- }
221
- }
222
- },
223
- // Styling for chips in Autocomplete
224
- tag: {
225
- margin: '2px'
226
- }
227
- }
228
- },
229
- MuiDialog: {
230
- styleOverrides: {
231
- paper: {
232
- borderRadius: radius.md,
233
- boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)',
234
- maxWidth: '570px'
235
- },
236
- paperFullScreen: {
237
- borderRadius: 0,
238
- maxWidth: '100%'
239
- }
240
- }
241
- },
242
- MuiDialogTitle: {
243
- styleOverrides: {
244
- root: {
245
- ...theme.typography.h3,
246
- padding: '12px 32px',
247
- [theme.breakpoints.down('sm')]: {
248
- ...theme.typography.h4
249
- }
250
- }
251
- }
252
- },
253
- MuiDialogContent: {
254
- styleOverrides: {
255
- root: {
256
- padding: '24px 32px'
257
- }
258
- }
259
- },
260
- MuiDialogActions: {
261
- styleOverrides: {
262
- root: {
263
- padding: '16px 32px'
264
- }
265
- }
266
- },
267
- MuiPopover: {
268
- styleOverrides: {
269
- paper: {
270
- borderRadius: radius.md,
271
- boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)'
272
- }
273
- }
274
- },
275
- MuiChip: {
276
- styleOverrides: {
277
- root: {
278
- '&.square': {
279
- borderRadius: radius.md
280
- }
281
- }
282
- }
283
- },
284
- MuiAvatar: {
285
- styleOverrides: {
286
- root: {
287
- fontWeight: 600,
288
- '&.size-xs': {
289
- width: 18,
290
- height: 18,
291
- fontSize: '9.109px',
292
- fontWeight: 500,
293
- lineHeight: '18.219px',
294
- '& svg': {
295
- width: '50%',
296
- height: '50%'
297
- }
298
- },
299
- '&.size-s': {
300
- width: 28,
301
- height: 28,
302
- fontSize: '12.525px',
303
- fontWeight: 500,
304
- lineHeight: '18.219px',
305
- '& svg': {
306
- width: '50%',
307
- height: '50%'
308
- }
309
- },
310
- '&.size-m': {
311
- width: 36,
312
- height: 36,
313
- fontSize: '18.219px',
314
- fontWeight: 500,
315
- lineHeight: '27.328px',
316
- '& svg': {
317
- width: '50%',
318
- height: '50%'
319
- }
320
- },
321
- '&.size-l': {
322
- width: 54,
323
- height: 54,
324
- fontSize: '27.328px',
325
- fontWeight: 600,
326
- lineHeight: '36.438px',
327
- '& svg': {
328
- width: '50%',
329
- height: '50%'
330
- }
331
- },
332
- '&.size-xl': {
333
- width: 72,
334
- height: 72,
335
- fontSize: '36.438px',
336
- fontWeight: 600,
337
- lineHeight: '45.547px',
338
- '& svg': {
339
- width: '50%',
340
- height: '50%'
341
- }
342
- },
343
- '&.disabled': {
344
- color: theme.palette.primary.contrastText,
345
- background: theme.palette.grey[300],
346
- '& img': {
347
- filter: 'grayscale(1) brightness(2)',
348
- opacity: 0.5
349
- }
350
- },
351
- '&.displayInline': {
352
- display: 'inline-flex'
353
- },
354
- '&.border': {
355
- border: `2px solid ${theme.palette.background.paper}`
356
- },
357
- '&.innerBorder': {
358
- boxShadow: `inset 0px 0px 0px 1px ${theme.palette.divider}`
359
- },
360
- variants: [
361
- {
362
- props: { color: 'default' },
363
- style: {
364
- backgroundColor: theme.palette.background.paper,
365
- color: theme.palette.text.secondary
366
- }
367
- }
368
- ]
369
- }
370
- }
371
- },
372
- MuiToggleButtonGroup: {
373
- styleOverrides: {
374
- root: {
375
- borderColor: '#AEAEC0',
376
- '& .MuiToggleButton-root:not(.Mui-selected)': {
377
- color: '#8C9CAF',
378
- backgroundColor: alpha('#49454F', 0.08),
379
- '&:hover': {
380
- backgroundColor: alpha('#49454F', 0.08)
381
- },
382
- '& svg, & .MuiSvgIcon-root': {
383
- color: '#8C9CAF'
384
- }
385
- }
386
- }
387
- }
388
- },
389
- MuiToggleButton: {
390
- styleOverrides: {
391
- root: {
392
- color: '#525256',
393
- '&.Mui-selected': {
394
- color: '#243B55',
395
- backgroundColor: 'transparent',
396
- '&:hover': {
397
- backgroundColor: 'transparent'
398
- },
399
- '& svg, & .MuiSvgIcon-root': {
400
- color: theme.palette.primary.main
401
- }
402
- },
403
- variants: [
404
- {
405
- props: { size: 'medium' },
406
- style: {
407
- padding: '9px 24px'
408
- }
409
- }
410
- ]
411
- }
412
- }
413
- },
414
- MuiIconButton: {
415
- styleOverrides: {
416
- root: {
417
- color: alpha(paletteData.Grey[900], 0.48),
418
- padding: '4px'
419
- }
420
- }
421
- },
422
- MuiCheckbox: {
423
- styleOverrides: {
424
- root: {
425
- '&.MuiCheckbox-sizeSmall': {
426
- padding: '6px'
427
- }
428
- }
429
- }
430
- },
431
- MuiBackdrop: {
432
- styleOverrides: {
433
- root: {
434
- variants: [
435
- {
436
- props: { invisible: false },
437
- style: {
438
- backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.focusOpacity)
439
- }
440
- }
441
- ]
442
- }
443
- }
444
- },
445
- MuiAccordion: {
446
- styleOverrides: {
447
- root: {
448
- '&::before': {
449
- display: 'none'
450
- }
451
- }
452
- }
453
- },
454
- MuiAccordionSummary: {
455
- defaultProps: { expandIcon: React.createElement(AccordionExpandIcon, null) },
456
- styleOverrides: {
457
- root: {
458
- backgroundColor: theme.palette.grey[100],
459
- textTransform: 'uppercase',
460
- fontWeight: 'bold',
461
- fontSize: '0.875rem',
462
- minHeight: '3.5rem',
463
- padding: 0,
464
- color: theme.palette.text.primary,
465
- '&.Mui-expanded': {
466
- minHeight: '3.5rem'
467
- }
468
- },
469
- expandIconWrapper: {
470
- order: 0,
471
- '&&': {
472
- marginLeft: '0.3125rem'
473
- },
474
- transform: 'rotate(-90deg)',
475
- '&.Mui-expanded': {
476
- marginLeft: '0.3125rem',
477
- transform: 'rotate(0deg)'
478
- }
479
- },
480
- content: {
481
- margin: '0.75rem 0',
482
- paddingLeft: '0.5rem',
483
- paddingRight: '0.25rem',
484
- order: 1,
485
- '& > :last-child': {
486
- paddingRight: 0
487
- },
488
- '&.Mui-expanded': {
489
- margin: '0.75rem 0'
490
- }
491
- }
492
- }
493
- },
494
- MuiFab: {
495
- defaultProps: { size: 'medium' },
496
- styleOverrides: {
497
- root: {
498
- borderRadius: 28,
499
- width: 96,
500
- height: 96,
501
- color: theme.palette.text.primary,
502
- backgroundColor: theme.palette.background.paper,
503
- '&:hover': {
504
- backgroundColor: darken(theme.palette.background.paper, 0.05)
505
- },
506
- '@media (hover: none)': {
507
- backgroundColor: theme.palette.background.paper
508
- }
509
- },
510
- primary: {
511
- color: theme.palette.primary.dark,
512
- backgroundColor: theme.palette.primary.light,
513
- '&:hover': {
514
- backgroundColor: darken(theme.palette.primary.light, 0.05)
515
- },
516
- '@media (hover: none)': {
517
- backgroundColor: theme.palette.primary.light
518
- }
519
- },
520
- extended: {
521
- borderRadius: 16,
522
- width: 'auto',
523
- height: 56,
524
- minWidth: 56,
525
- padding: '0 20px',
526
- '&.MuiFab-sizeSmall': {
527
- borderRadius: 16,
528
- width: 'auto',
529
- height: 42,
530
- minWidth: 42,
531
- padding: '0 12px'
532
- },
533
- '&.MuiFab-sizeMedium': {
534
- borderRadius: 16,
535
- width: 'auto',
536
- height: 48,
537
- minWidth: 48,
538
- padding: '0 16px'
539
- }
540
- },
541
- sizeSmall: {
542
- borderRadius: 12,
543
- width: 40,
544
- height: 40
545
- },
546
- sizeMedium: {
547
- borderRadius: 16,
548
- width: 56,
549
- height: 56
550
- }
551
- }
552
- },
553
- MuiTooltip: {
554
- defaultProps: { arrow: true },
555
- styleOverrides: {
556
- tooltip: {
557
- backgroundColor: alpha(theme.palette.grey[800], 0.9),
558
- fontSize: '1rem',
559
- lineHeight: 1.3,
560
- borderRadius: '4px',
561
- padding: '8px 12px'
562
- }
563
- }
564
- },
565
- MuiCssBaseline: {
566
- styleOverrides: {
567
- '.MuiAccordion-root .MuiListItem-root': {
568
- padding: '0',
569
- borderRadius: '4px',
570
- '&:hover': {
571
- backgroundColor: alpha(paletteData.Grey.A900, 0.04)
572
- }
573
- },
574
- '.MuiAccordion-root .MuiListItem-root label': {
575
- fontSize: '14px',
576
- fontStyle: 'normal',
577
- fontWeight: 400,
578
- color: alpha(paletteData.Grey[900], 0.9)
579
- }
580
- }
581
- },
582
- MuiMenuItem: {
583
- styleOverrides: {
584
- root: {
585
- borderRadius: radius.md,
586
- '&&&:hover': {
587
- backgroundColor: `${alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)}`
588
- },
589
- [`&.${menuItemClasses.selected}`]: {
590
- backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
591
- '&:hover': {
592
- backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity +
593
- theme.palette.action.hoverOpacity)
594
- }
595
- }
596
- }
597
- }
598
- },
599
- MuiSwipeableDrawer: {
600
- defaultProps: {
601
- sx: {
602
- '& .MuiDrawer-paper': {
603
- borderTopLeftRadius: radius.md,
604
- borderTopRightRadius: radius.md,
605
- '&::before': {
606
- content: '""',
607
- display: 'block',
608
- width: '64px',
609
- height: '4px',
610
- backgroundColor: theme.palette.action.disabledBackground,
611
- borderRadius: radius.md,
612
- margin: '12px auto',
613
- marginTop: '30px',
614
- flexShrink: 0
615
- }
616
- }
617
- }
618
- }
619
- }
620
- };
621
- };