@mui/docs 6.0.0-alpha.6 → 6.0.0-alpha.8

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 (30) hide show
  1. package/CHANGELOG.md +84 -2
  2. package/CodeCopy/CodeCopyButton.js +10 -19
  3. package/HighlightedCode/HighlightedCode.js +25 -25
  4. package/InfoCard/InfoCard.js +38 -39
  5. package/Link/Link.js +40 -38
  6. package/MarkdownElement/MarkdownElement.js +60 -61
  7. package/NProgressBar/NProgressBar.js +6 -7
  8. package/SectionTitle/SectionTitle.d.ts +7 -0
  9. package/SectionTitle/SectionTitle.js +30 -0
  10. package/SectionTitle/index.d.ts +1 -0
  11. package/SectionTitle/index.js +1 -0
  12. package/SectionTitle/package.json +6 -0
  13. package/branding/brandingTheme.js +392 -324
  14. package/node/CodeCopy/CodeCopyButton.js +10 -19
  15. package/node/HighlightedCode/HighlightedCode.js +25 -25
  16. package/node/InfoCard/InfoCard.js +38 -39
  17. package/node/Link/Link.js +43 -40
  18. package/node/MarkdownElement/MarkdownElement.js +61 -62
  19. package/node/NProgressBar/NProgressBar.js +6 -7
  20. package/node/SectionTitle/SectionTitle.js +38 -0
  21. package/node/SectionTitle/index.js +16 -0
  22. package/node/branding/brandingTheme.js +392 -324
  23. package/node/svgIcons/FileDownload.js +3 -3
  24. package/node/svgIcons/JavaScript.js +3 -3
  25. package/node/svgIcons/TypeScript.js +3 -3
  26. package/package.json +3 -3
  27. package/svgIcons/FileDownload.js +3 -3
  28. package/svgIcons/JavaScript.js +3 -3
  29. package/svgIcons/TypeScript.js +3 -3
  30. package/tsconfig.build.tsbuildinfo +1 -1
package/node/branding/brandingTheme.js CHANGED
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.getMetaThemeColor = exports.getDesignTokens = exports.error = exports.brandingLightTheme = exports.brandingDarkTheme = exports.blueDark = exports.blue = void 0;
8
8
  exports.getThemedComponents = getThemedComponents;
9
9
  exports.warning = exports.success = exports.grey = void 0;
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
10
  var _ArrowDropDownRounded = _interopRequireDefault(require("@mui/icons-material/ArrowDropDownRounded"));
12
11
  var _styles = require("@mui/material/styles");
13
12
  // TODO: enable this once types conflict is fixed
@@ -104,57 +103,75 @@ const getMetaThemeColor = mode => {
104
103
  };
105
104
  exports.getMetaThemeColor = getMetaThemeColor;
106
105
  const getDesignTokens = mode => ({
107
- palette: (0, _extends2.default)({
108
- primary: (0, _extends2.default)({}, blue, mode === 'dark' && {
109
- main: blue[400]
110
- }),
111
- secondary: (0, _extends2.default)({}, grey, mode === 'light' && {
112
- main: blueDark[100],
113
- contrastText: blueDark[600]
114
- }, mode === 'dark' && {
115
- main: blueDark[700],
116
- contrastText: blueDark[600]
117
- }),
106
+ palette: {
107
+ primary: {
108
+ ...blue,
109
+ ...(mode === 'dark' && {
110
+ main: blue[400]
111
+ })
112
+ },
113
+ secondary: {
114
+ ...grey,
115
+ ...(mode === 'light' && {
116
+ main: blueDark[100],
117
+ contrastText: blueDark[600]
118
+ }),
119
+ ...(mode === 'dark' && {
120
+ main: blueDark[700],
121
+ contrastText: blueDark[600]
122
+ })
123
+ },
118
124
  divider: mode === 'dark' ? (0, _styles.alpha)(blueDark[500], 0.3) : grey[100],
119
125
  primaryDark: blueDark,
120
- mode
121
- }, mode === 'dark' && {
122
- background: {
123
- default: blueDark[900],
124
- paper: (0, _styles.alpha)(blueDark[800], 0.8)
125
- }
126
- }, {
126
+ mode,
127
+ ...(mode === 'dark' && {
128
+ background: {
129
+ default: blueDark[900],
130
+ paper: (0, _styles.alpha)(blueDark[800], 0.8)
131
+ }
132
+ }),
127
133
  common: {
128
134
  black: 'hsl(200, 10%, 4%)'
129
135
  },
130
- text: (0, _extends2.default)({}, mode === 'light' && {
131
- primary: grey[900],
132
- secondary: grey[800],
133
- tertiary: grey[700]
134
- }, mode === 'dark' && {
135
- primary: '#fff',
136
- secondary: grey[400],
137
- tertiary: grey[500]
138
- }),
139
- grey: (0, _extends2.default)({}, grey, mode === 'light' && {
140
- main: grey[100],
141
- contrastText: grey[600]
142
- }, mode === 'dark' && {
143
- main: grey[700],
144
- contrastText: grey[600]
145
- }),
136
+ text: {
137
+ ...(mode === 'light' && {
138
+ primary: grey[900],
139
+ secondary: grey[800],
140
+ tertiary: grey[700]
141
+ }),
142
+ ...(mode === 'dark' && {
143
+ primary: '#fff',
144
+ secondary: grey[400],
145
+ tertiary: grey[500]
146
+ })
147
+ },
148
+ grey: {
149
+ ...grey,
150
+ ...(mode === 'light' && {
151
+ main: grey[100],
152
+ contrastText: grey[600]
153
+ }),
154
+ ...(mode === 'dark' && {
155
+ main: grey[700],
156
+ contrastText: grey[600]
157
+ })
158
+ },
146
159
  error,
147
- success: (0, _extends2.default)({}, success, mode === 'dark' && {
148
- main: success[600]
149
- }, mode === 'light' && {
150
- main: success[700]
151
- }),
160
+ success: {
161
+ ...success,
162
+ ...(mode === 'dark' && {
163
+ main: success[600]
164
+ }),
165
+ ...(mode === 'light' && {
166
+ main: success[700]
167
+ })
168
+ },
152
169
  warning,
153
170
  gradients: {
154
171
  radioSubtle: mode === 'dark' ? `radial-gradient(100% 100% at 100% 100%, transparent 0, ${(0, _styles.alpha)(blue[900], 0.3)} 300%)` : `radial-gradient(100% 90% at 50% 0, transparent 0, ${(0, _styles.alpha)(blue[100], 0.3)} 300%)`,
155
172
  linearSubtle: mode === 'dark' ? `linear-gradient(0deg, ${(0, _styles.alpha)(blue[900], 0.1)}, ${(0, _styles.alpha)(blueDark[900], 0.5)})` : `linear-gradient(0deg, ${(0, _styles.alpha)(blue[50], 0.4)}, ${(0, _styles.alpha)(grey[50], 0.1)})`
156
173
  }
157
- }),
174
+ },
158
175
  shape: {
159
176
  borderRadius: 12
160
177
  },
@@ -176,15 +193,16 @@ const getDesignTokens = mode => ({
176
193
  fontFamilySystem: systemFont.join(','),
177
194
  fontWeightSemiBold: 600,
178
195
  fontWeightExtraBold: 800,
179
- h1: (0, _extends2.default)({
196
+ h1: {
180
197
  fontFamily: ['"General Sans"', ...systemFont].join(','),
181
198
  fontSize: 'clamp(2.5rem, 1.125rem + 3.5vw, 3.5em)',
182
199
  fontWeight: 600,
183
200
  lineHeight: 78 / 70,
184
- letterSpacing: -0.2
185
- }, mode === 'light' && {
186
- color: blueDark[900]
187
- }),
201
+ letterSpacing: -0.2,
202
+ ...(mode === 'light' && {
203
+ color: blueDark[900]
204
+ })
205
+ },
188
206
  h2: {
189
207
  fontFamily: ['"General Sans"', ...systemFont].join(','),
190
208
  fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)',
@@ -361,107 +379,118 @@ function getThemedComponents() {
361
379
  root: ({
362
380
  theme,
363
381
  ownerState
364
- }) => (0, _extends2.default)({
365
- transition: 'all 120ms ease-in'
366
- }, ownerState.size === 'large' && (0, _extends2.default)({}, theme.typography.body1, {
367
- lineHeight: 21 / 16,
368
- padding: theme.spacing('8px', '10px', '10px', '12px'),
369
- fontWeight: theme.typography.fontWeightSemiBold,
370
- borderRadius: 10,
371
- '& > span': {
372
- transition: '0.2s',
373
- marginLeft: 4
374
- },
375
- '&:hover > span': {
376
- transform: 'translateX(2px)'
377
- }
378
- }), ownerState.size === 'medium' && {
379
- fontSize: defaultTheme.typography.pxToRem(15),
380
- padding: theme.spacing('8px', '12px', '8px', '14px'),
381
- fontWeight: theme.typography.fontWeightSemiBold,
382
- borderRadius: 8,
383
- '& > span': {
384
- transition: '0.2s',
385
- marginLeft: 4
386
- },
387
- '&:hover > span': {
388
- transform: 'translateX(2px)'
389
- }
390
- }, ownerState.size === 'small' && {
391
- padding: theme.spacing('6px', 1.5),
392
- fontFamily: theme.typography.fontFamily,
393
- fontSize: defaultTheme.typography.pxToRem(13),
394
- fontWeight: theme.typography.fontWeightSemiBold,
395
- borderRadius: 8,
396
- '& .MuiButton-startIcon': {
397
- transition: '0.15s',
398
- marginRight: 4,
399
- marginLeft: -1
400
- },
401
- '& .MuiButton-endIcon': {
402
- transition: '0.15s',
403
- marginLeft: 4
404
- },
405
- '&:hover': {
382
+ }) => ({
383
+ transition: 'all 120ms ease-in',
384
+ ...(ownerState.size === 'large' && {
385
+ ...theme.typography.body1,
386
+ lineHeight: 21 / 16,
387
+ padding: theme.spacing('8px', '10px', '10px', '12px'),
388
+ fontWeight: theme.typography.fontWeightSemiBold,
389
+ borderRadius: 10,
390
+ '& > span': {
391
+ transition: '0.2s',
392
+ marginLeft: 4
393
+ },
394
+ '&:hover > span': {
395
+ transform: 'translateX(2px)'
396
+ }
397
+ }),
398
+ ...(ownerState.size === 'medium' && {
399
+ fontSize: defaultTheme.typography.pxToRem(15),
400
+ padding: theme.spacing('8px', '12px', '8px', '14px'),
401
+ fontWeight: theme.typography.fontWeightSemiBold,
402
+ borderRadius: 8,
403
+ '& > span': {
404
+ transition: '0.2s',
405
+ marginLeft: 4
406
+ },
407
+ '&:hover > span': {
408
+ transform: 'translateX(2px)'
409
+ }
410
+ }),
411
+ ...(ownerState.size === 'small' && {
412
+ padding: theme.spacing('6px', 1.5),
413
+ fontFamily: theme.typography.fontFamily,
414
+ fontSize: defaultTheme.typography.pxToRem(13),
415
+ fontWeight: theme.typography.fontWeightSemiBold,
416
+ borderRadius: 8,
406
417
  '& .MuiButton-startIcon': {
407
- transform: 'translateX(-2px)'
418
+ transition: '0.15s',
419
+ marginRight: 4,
420
+ marginLeft: -1
408
421
  },
409
422
  '& .MuiButton-endIcon': {
410
- transform: 'translateX(2px)'
423
+ transition: '0.15s',
424
+ marginLeft: 4
425
+ },
426
+ '&:hover': {
427
+ '& .MuiButton-startIcon': {
428
+ transform: 'translateX(-2px)'
429
+ },
430
+ '& .MuiButton-endIcon': {
431
+ transform: 'translateX(2px)'
432
+ }
411
433
  }
412
- }
413
- }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && (0, _extends2.default)({
414
- color: (theme.vars || theme).palette.text.primary,
415
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
416
- borderColor: (theme.vars || theme).palette.primaryDark[100],
417
- boxShadow: `${(0, _styles.alpha)(theme.palette.grey[50], 0.5)} 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.5)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
418
- '&:hover': {
419
- backgroundColor: (theme.vars || theme).palette.grey[50]
420
- }
421
- }, theme.applyDarkStyles({
422
- color: (theme.vars || theme).palette.primaryDark[100],
423
- borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
424
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
425
- boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
426
- '&:hover': {
427
- backgroundColor: (theme.vars || theme).palette.primaryDark[700],
428
- borderColor: (theme.vars || theme).palette.primaryDark[600]
429
- }
430
- })), ownerState.variant === 'outlined' && ownerState.color === 'primary' && (0, _extends2.default)({
431
- color: (theme.vars || theme).palette.primary[600],
432
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[50], 0.2),
433
- borderColor: (theme.vars || theme).palette.primary[100],
434
- boxShadow: `${(0, _styles.alpha)(theme.palette.primary[50], 0.8)} 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.4)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
435
- '&:hover': {
436
- backgroundColor: (theme.vars || theme).palette.primary[50],
437
- borderColor: (theme.vars || theme).palette.primary[200]
438
- }
439
- }, theme.applyDarkStyles({
440
- color: (theme.vars || theme).palette.primary[200],
441
- borderColor: (0, _styles.alpha)(theme.palette.primary[900], 0.7),
442
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.2),
443
- boxShadow: `${(0, _styles.alpha)(theme.palette.primary[900], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
444
- '&:hover': {
445
- backgroundColor: (theme.vars || theme).palette.primary[900],
446
- borderColor: (theme.vars || theme).palette.primary[700]
447
- }
448
- })), ownerState.variant === 'contained' && ownerState.color === 'primary' && {
449
- color: '#fff',
450
- textShadow: `0 1px 1px ${(0, _styles.alpha)(theme.palette.common.black, 0.6)}`,
451
- backgroundColor: (theme.vars || theme).palette.primary[500],
452
- backgroundImage: `linear-gradient(180deg, ${(0, _styles.alpha)(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`,
453
- boxShadow: `${theme.palette.primary[400]} 0 2px 0 inset, ${theme.palette.primary[700]} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
454
- '&:hover': {
455
- backgroundColor: (theme.vars || theme).palette.primary[700]
456
- },
457
- '&:active': {
458
- backgroundColor: (theme.vars || theme).palette.primaryDark[700]
459
- }
460
- }, ownerState.variant === 'text' && (0, _extends2.default)({
461
- color: (theme.vars || theme).palette.primary[600]
462
- }, theme.applyDarkStyles({
463
- color: (theme.vars || theme).palette.primary[300]
464
- })))
434
+ }),
435
+ ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
436
+ color: (theme.vars || theme).palette.text.primary,
437
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
438
+ borderColor: (theme.vars || theme).palette.primaryDark[100],
439
+ boxShadow: `${(0, _styles.alpha)(theme.palette.grey[50], 0.5)} 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.5)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
440
+ '&:hover': {
441
+ backgroundColor: (theme.vars || theme).palette.grey[50]
442
+ },
443
+ ...theme.applyDarkStyles({
444
+ color: (theme.vars || theme).palette.primaryDark[100],
445
+ borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
446
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
447
+ boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
448
+ '&:hover': {
449
+ backgroundColor: (theme.vars || theme).palette.primaryDark[700],
450
+ borderColor: (theme.vars || theme).palette.primaryDark[600]
451
+ }
452
+ })
453
+ }),
454
+ ...(ownerState.variant === 'outlined' && ownerState.color === 'primary' && {
455
+ color: (theme.vars || theme).palette.primary[600],
456
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[50], 0.2),
457
+ borderColor: (theme.vars || theme).palette.primary[100],
458
+ boxShadow: `${(0, _styles.alpha)(theme.palette.primary[50], 0.8)} 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.4)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
459
+ '&:hover': {
460
+ backgroundColor: (theme.vars || theme).palette.primary[50],
461
+ borderColor: (theme.vars || theme).palette.primary[200]
462
+ },
463
+ ...theme.applyDarkStyles({
464
+ color: (theme.vars || theme).palette.primary[200],
465
+ borderColor: (0, _styles.alpha)(theme.palette.primary[900], 0.7),
466
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.2),
467
+ boxShadow: `${(0, _styles.alpha)(theme.palette.primary[900], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
468
+ '&:hover': {
469
+ backgroundColor: (theme.vars || theme).palette.primary[900],
470
+ borderColor: (theme.vars || theme).palette.primary[700]
471
+ }
472
+ })
473
+ }),
474
+ ...(ownerState.variant === 'contained' && ownerState.color === 'primary' && {
475
+ color: '#fff',
476
+ textShadow: `0 1px 1px ${(0, _styles.alpha)(theme.palette.common.black, 0.6)}`,
477
+ backgroundColor: (theme.vars || theme).palette.primary[500],
478
+ backgroundImage: `linear-gradient(180deg, ${(0, _styles.alpha)(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`,
479
+ boxShadow: `${theme.palette.primary[400]} 0 2px 0 inset, ${theme.palette.primary[700]} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
480
+ '&:hover': {
481
+ backgroundColor: (theme.vars || theme).palette.primary[700]
482
+ },
483
+ '&:active': {
484
+ backgroundColor: (theme.vars || theme).palette.primaryDark[700]
485
+ }
486
+ }),
487
+ ...(ownerState.variant === 'text' && {
488
+ color: (theme.vars || theme).palette.primary[600],
489
+ ...theme.applyDarkStyles({
490
+ color: (theme.vars || theme).palette.primary[300]
491
+ })
492
+ })
493
+ })
465
494
  },
466
495
  variants: [{
467
496
  // @ts-ignore internal repo module augmentation issue
@@ -579,20 +608,21 @@ function getThemedComponents() {
579
608
  },
580
609
  style: ({
581
610
  theme
582
- }) => (0, _extends2.default)({
611
+ }) => ({
583
612
  marginBottom: 1,
584
613
  fontSize: theme.typography.pxToRem(14),
585
614
  fontWeight: theme.typography.fontWeightBold,
586
615
  color: (theme.vars || theme).palette.primary[600],
587
616
  '&:hover': {
588
617
  backgroundColor: (theme.vars || theme).palette.primary[50]
589
- }
590
- }, theme.applyDarkStyles({
591
- color: (theme.vars || theme).palette.primary[300],
592
- '&:hover': {
593
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.3)
594
- }
595
- }))
618
+ },
619
+ ...theme.applyDarkStyles({
620
+ color: (theme.vars || theme).palette.primary[300],
621
+ '&:hover': {
622
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.3)
623
+ }
624
+ })
625
+ })
596
626
  }]
597
627
  },
598
628
  MuiIconButton: {
@@ -703,22 +733,24 @@ function getThemedComponents() {
703
733
  styleOverrides: {
704
734
  paper: ({
705
735
  theme
706
- }) => (0, _extends2.default)({
707
- boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)'
708
- }, theme.applyDarkStyles({
709
- boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)'
710
- }))
736
+ }) => ({
737
+ boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)',
738
+ ...theme.applyDarkStyles({
739
+ boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)'
740
+ })
741
+ })
711
742
  }
712
743
  },
713
744
  MuiDivider: {
714
745
  styleOverrides: {
715
746
  root: ({
716
747
  theme
717
- }) => (0, _extends2.default)({
718
- borderColor: (theme.vars || theme).palette.grey[100]
719
- }, theme.applyDarkStyles({
720
- borderColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.3)
721
- }))
748
+ }) => ({
749
+ borderColor: (theme.vars || theme).palette.grey[100],
750
+ ...theme.applyDarkStyles({
751
+ borderColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.3)
752
+ })
753
+ })
722
754
  }
723
755
  },
724
756
  MuiLink: {
@@ -771,107 +803,131 @@ function getThemedComponents() {
771
803
  variant
772
804
  },
773
805
  theme
774
- }) => (0, _extends2.default)({
806
+ }) => ({
775
807
  fontWeight: theme.typography.fontWeightSemiBold,
776
- paddingBottom: 0.2
777
- }, variant === 'outlined' && color === 'default' && (0, _extends2.default)({
778
- backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.5),
779
- color: (theme.vars || theme).palette.grey[900],
780
- borderColor: (theme.vars || theme).palette.grey[200],
781
- '&:hover': {
782
- backgroundColor: (theme.vars || theme).palette.grey[100],
783
- color: (theme.vars || theme).palette.grey[900]
784
- }
785
- }, theme.applyDarkStyles({
786
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.4),
787
- color: (theme.vars || theme).palette.grey[300],
788
- borderColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.5),
789
- '&:hover': {
790
- color: (theme.vars || theme).palette.grey[300],
791
- backgroundColor: (theme.vars || theme).palette.primaryDark[700]
792
- }
793
- })), variant === 'outlined' && color === 'info' && (0, _extends2.default)({
794
- backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.5),
795
- color: (theme.vars || theme).palette.grey[900],
796
- borderColor: (theme.vars || theme).palette.grey[200]
797
- }, theme.applyDarkStyles({
798
- color: (theme.vars || theme).palette.grey[300],
799
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5),
800
- borderColor: (theme.vars || theme).palette.primaryDark[600]
801
- })), variant === 'outlined' && color === 'primary' && (0, _extends2.default)({
802
- borderColor: (theme.vars || theme).palette.primary[100],
803
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.2)
804
- }, theme.applyDarkStyles({
805
- color: (theme.vars || theme).palette.primary[300],
806
- borderColor: (0, _styles.alpha)(theme.palette.primary[500], 0.2),
807
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[700], 0.2)
808
- })), variant === 'outlined' && color === 'success' && (0, _extends2.default)({
809
- borderColor: (theme.vars || theme).palette.success[100],
810
- backgroundColor: (theme.vars || theme).palette.success[50],
811
- color: (theme.vars || theme).palette.success[900]
812
- }, theme.applyDarkStyles({
813
- color: (theme.vars || theme).palette.success[300],
814
- borderColor: (0, _styles.alpha)(theme.palette.success[300], 0.2),
815
- background: (0, _styles.alpha)(theme.palette.success[800], 0.2)
816
- })), variant === 'filled' && (0, _extends2.default)({}, color === 'default' && (0, _extends2.default)({
817
- border: '1px solid transparent',
818
- color: (theme.vars || theme).palette.primary[700],
819
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.5),
820
- '&:hover': {
821
- backgroundColor: (theme.vars || theme).palette.primary[100]
822
- }
823
- }, theme.applyDarkStyles({
824
- color: '#fff',
825
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.8),
826
- '&:hover': {
827
- backgroundColor: (theme.vars || theme).palette.primaryDark[600]
828
- }
829
- })), color === 'primary' && (0, _extends2.default)({
830
- color: (theme.vars || theme).palette.primary[600],
831
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.4),
832
- '&:hover': {
833
- backgroundColor: (theme.vars || theme).palette.primary[100]
834
- },
835
- '& .MuiChip-deleteIcon': {
836
- color: (theme.vars || theme).palette.primary[600],
837
- '&:hover': {
838
- color: (theme.vars || theme).palette.primary[700]
839
- }
840
- },
841
- '&.Mui-focusVisible': {
842
- backgroundColor: (theme.vars || theme).palette.primary[200]
843
- }
844
- }, theme.applyDarkStyles({
845
- color: (theme.vars || theme).palette.primary[100],
846
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.5),
847
- '&:hover': {
848
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.5)
849
- },
850
- '& .MuiChip-deleteIcon': {
851
- color: (theme.vars || theme).palette.primary[100],
808
+ paddingBottom: 0.2,
809
+ ...(variant === 'outlined' && color === 'default' && {
810
+ backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.5),
811
+ color: (theme.vars || theme).palette.grey[900],
812
+ borderColor: (theme.vars || theme).palette.grey[200],
852
813
  '&:hover': {
853
- color: (theme.vars || theme).palette.primary[50]
854
- }
855
- }
856
- }))), variant === 'light' && (0, _extends2.default)({}, color === 'default' && (0, _extends2.default)({
857
- color: (theme.vars || theme).palette.primary[700],
858
- backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.3)
859
- }, theme.applyDarkStyles({
860
- color: (theme.vars || theme).palette.primary[200],
861
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5)
862
- })), color === 'warning' && (0, _extends2.default)({
863
- color: (theme.vars || theme).palette.warning[900],
864
- backgroundColor: (theme.vars || theme).palette.warning[100]
865
- }, theme.applyDarkStyles({
866
- color: '#fff',
867
- backgroundColor: (theme.vars || theme).palette.warning[900]
868
- })), color === 'success' && (0, _extends2.default)({
869
- color: (theme.vars || theme).palette.success[900],
870
- backgroundColor: (theme.vars || theme).palette.success[100]
871
- }, theme.applyDarkStyles({
872
- color: '#fff',
873
- backgroundColor: (theme.vars || theme).palette.success[900]
874
- }))))
814
+ backgroundColor: (theme.vars || theme).palette.grey[100],
815
+ color: (theme.vars || theme).palette.grey[900]
816
+ },
817
+ ...theme.applyDarkStyles({
818
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.4),
819
+ color: (theme.vars || theme).palette.grey[300],
820
+ borderColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.5),
821
+ '&:hover': {
822
+ color: (theme.vars || theme).palette.grey[300],
823
+ backgroundColor: (theme.vars || theme).palette.primaryDark[700]
824
+ }
825
+ })
826
+ }),
827
+ ...(variant === 'outlined' && color === 'info' && {
828
+ backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.5),
829
+ color: (theme.vars || theme).palette.grey[900],
830
+ borderColor: (theme.vars || theme).palette.grey[200],
831
+ ...theme.applyDarkStyles({
832
+ color: (theme.vars || theme).palette.grey[300],
833
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5),
834
+ borderColor: (theme.vars || theme).palette.primaryDark[600]
835
+ })
836
+ }),
837
+ ...(variant === 'outlined' && color === 'primary' && {
838
+ borderColor: (theme.vars || theme).palette.primary[100],
839
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.2),
840
+ ...theme.applyDarkStyles({
841
+ color: (theme.vars || theme).palette.primary[300],
842
+ borderColor: (0, _styles.alpha)(theme.palette.primary[500], 0.2),
843
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[700], 0.2)
844
+ })
845
+ }),
846
+ ...(variant === 'outlined' && color === 'success' && {
847
+ borderColor: (theme.vars || theme).palette.success[100],
848
+ backgroundColor: (theme.vars || theme).palette.success[50],
849
+ color: (theme.vars || theme).palette.success[900],
850
+ ...theme.applyDarkStyles({
851
+ color: (theme.vars || theme).palette.success[300],
852
+ borderColor: (0, _styles.alpha)(theme.palette.success[300], 0.2),
853
+ background: (0, _styles.alpha)(theme.palette.success[800], 0.2)
854
+ })
855
+ }),
856
+ ...(variant === 'filled' && {
857
+ ...(color === 'default' && {
858
+ border: '1px solid transparent',
859
+ color: (theme.vars || theme).palette.primary[700],
860
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.5),
861
+ '&:hover': {
862
+ backgroundColor: (theme.vars || theme).palette.primary[100]
863
+ },
864
+ ...theme.applyDarkStyles({
865
+ color: '#fff',
866
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.8),
867
+ '&:hover': {
868
+ backgroundColor: (theme.vars || theme).palette.primaryDark[600]
869
+ }
870
+ })
871
+ }),
872
+ ...(color === 'primary' && {
873
+ color: (theme.vars || theme).palette.primary[600],
874
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.4),
875
+ '&:hover': {
876
+ backgroundColor: (theme.vars || theme).palette.primary[100]
877
+ },
878
+ '& .MuiChip-deleteIcon': {
879
+ color: (theme.vars || theme).palette.primary[600],
880
+ '&:hover': {
881
+ color: (theme.vars || theme).palette.primary[700]
882
+ }
883
+ },
884
+ '&.Mui-focusVisible': {
885
+ backgroundColor: (theme.vars || theme).palette.primary[200]
886
+ },
887
+ ...theme.applyDarkStyles({
888
+ color: (theme.vars || theme).palette.primary[100],
889
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[800], 0.5),
890
+ '&:hover': {
891
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.5)
892
+ },
893
+ '& .MuiChip-deleteIcon': {
894
+ color: (theme.vars || theme).palette.primary[100],
895
+ '&:hover': {
896
+ color: (theme.vars || theme).palette.primary[50]
897
+ }
898
+ }
899
+ })
900
+ })
901
+ }),
902
+ // for labelling product in the search
903
+ // @ts-ignore internal repo module augmentation issue
904
+ ...(variant === 'light' && {
905
+ ...(color === 'default' && {
906
+ color: (theme.vars || theme).palette.primary[700],
907
+ backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.3),
908
+ ...theme.applyDarkStyles({
909
+ color: (theme.vars || theme).palette.primary[200],
910
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.5)
911
+ })
912
+ }),
913
+ ...(color === 'warning' && {
914
+ color: (theme.vars || theme).palette.warning[900],
915
+ backgroundColor: (theme.vars || theme).palette.warning[100],
916
+ ...theme.applyDarkStyles({
917
+ color: '#fff',
918
+ backgroundColor: (theme.vars || theme).palette.warning[900]
919
+ })
920
+ }),
921
+ ...(color === 'success' && {
922
+ color: (theme.vars || theme).palette.success[900],
923
+ backgroundColor: (theme.vars || theme).palette.success[100],
924
+ ...theme.applyDarkStyles({
925
+ color: '#fff',
926
+ backgroundColor: (theme.vars || theme).palette.success[900]
927
+ })
928
+ })
929
+ })
930
+ })
875
931
  }
876
932
  },
877
933
  MuiList: {
@@ -941,7 +997,7 @@ function getThemedComponents() {
941
997
  root: ({
942
998
  theme,
943
999
  ownerState
944
- }) => [(0, _extends2.default)({
1000
+ }) => [{
945
1001
  backgroundImage: 'none',
946
1002
  backgroundColor: '#fff',
947
1003
  '&[href]': {
@@ -949,47 +1005,49 @@ function getThemedComponents() {
949
1005
  },
950
1006
  transition: theme.transitions.create(['border', 'box-shadow'], {
951
1007
  duration: theme.transitions.duration.shortest
952
- })
953
- }, ownerState.variant === 'outlined' && {
954
- display: 'block',
955
- borderColor: (theme.vars || theme).palette.grey[100],
956
- '&[href]': {
957
- textDecorationLine: 'none',
958
- boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
959
- '&:hover': {
960
- borderColor: (theme.vars || theme).palette.primary[200],
961
- boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`
1008
+ }),
1009
+ ...(ownerState.variant === 'outlined' && {
1010
+ display: 'block',
1011
+ borderColor: (theme.vars || theme).palette.grey[100],
1012
+ '&[href]': {
1013
+ textDecorationLine: 'none',
1014
+ boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
1015
+ '&:hover': {
1016
+ borderColor: (theme.vars || theme).palette.primary[200],
1017
+ boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`
1018
+ },
1019
+ '&:focus-visible': {
1020
+ outline: `3px solid ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
1021
+ outlineOffset: '2px'
1022
+ }
962
1023
  },
963
- '&:focus-visible': {
964
- outline: `3px solid ${(0, _styles.alpha)(theme.palette.primary[500], 0.5)}`,
965
- outlineOffset: '2px'
966
- }
967
- },
968
- ':is(a&), :is(button&)': {
969
- '&:hover': {
970
- borderColor: (theme.vars || theme).palette.primary[200],
971
- boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`
1024
+ ':is(a&), :is(button&)': {
1025
+ '&:hover': {
1026
+ borderColor: (theme.vars || theme).palette.primary[200],
1027
+ boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`
1028
+ }
972
1029
  }
973
- }
974
- }), theme.applyDarkStyles((0, _extends2.default)({
975
- backgroundColor: (theme.vars || theme).palette.primaryDark[900]
976
- }, ownerState.variant === 'outlined' && {
977
- borderColor: (theme.vars || theme).palette.primaryDark[700],
978
- backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.6),
979
- '&[href]': {
980
- textDecorationLine: 'none',
981
- boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[700], 0.4)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
982
- '&:hover': {
983
- borderColor: (0, _styles.alpha)(theme.palette.primary[600], 0.5),
984
- boxShadow: `0px 2px 8px ${(0, _styles.alpha)(theme.palette.primary[900], 0.6)}`
985
- }
986
- },
987
- ':is(a&), :is(button&)': {
988
- '&:hover': {
989
- boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`
1030
+ })
1031
+ }, theme.applyDarkStyles({
1032
+ backgroundColor: (theme.vars || theme).palette.primaryDark[900],
1033
+ ...(ownerState.variant === 'outlined' && {
1034
+ borderColor: (theme.vars || theme).palette.primaryDark[700],
1035
+ backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.6),
1036
+ '&[href]': {
1037
+ textDecorationLine: 'none',
1038
+ boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[700], 0.4)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
1039
+ '&:hover': {
1040
+ borderColor: (0, _styles.alpha)(theme.palette.primary[600], 0.5),
1041
+ boxShadow: `0px 2px 8px ${(0, _styles.alpha)(theme.palette.primary[900], 0.6)}`
1042
+ }
1043
+ },
1044
+ ':is(a&), :is(button&)': {
1045
+ '&:hover': {
1046
+ boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`
1047
+ }
990
1048
  }
991
- }
992
- }))]
1049
+ })
1050
+ })]
993
1051
  }
994
1052
  },
995
1053
  MuiTableCell: {
@@ -997,14 +1055,16 @@ function getThemedComponents() {
997
1055
  root: ({
998
1056
  theme,
999
1057
  ownerState
1000
- }) => (0, _extends2.default)({
1058
+ }) => ({
1001
1059
  padding: theme.spacing(1, 2),
1002
- borderColor: (theme.vars || theme).palette.divider
1003
- }, ownerState.variant === 'head' && {
1004
- color: (theme.vars || theme).palette.text.primary,
1005
- fontWeight: 700
1006
- }, ownerState.variant === 'body' && {
1007
- color: (theme.vars || theme).palette.text.secondary
1060
+ borderColor: (theme.vars || theme).palette.divider,
1061
+ ...(ownerState.variant === 'head' && {
1062
+ color: (theme.vars || theme).palette.text.primary,
1063
+ fontWeight: 700
1064
+ }),
1065
+ ...(ownerState.variant === 'body' && {
1066
+ color: (theme.vars || theme).palette.text.secondary
1067
+ })
1008
1068
  })
1009
1069
  }
1010
1070
  },
@@ -1012,11 +1072,12 @@ function getThemedComponents() {
1012
1072
  styleOverrides: {
1013
1073
  root: ({
1014
1074
  theme
1015
- }) => (0, _extends2.default)({
1016
- backgroundColor: '#fff'
1017
- }, theme.applyDarkStyles({
1018
- backgroundColor: (theme.vars || theme).palette.primaryDark[900]
1019
- }))
1075
+ }) => ({
1076
+ backgroundColor: '#fff',
1077
+ ...theme.applyDarkStyles({
1078
+ backgroundColor: (theme.vars || theme).palette.primaryDark[900]
1079
+ })
1080
+ })
1020
1081
  }
1021
1082
  },
1022
1083
  MuiToggleButton: {
@@ -1024,14 +1085,14 @@ function getThemedComponents() {
1024
1085
  root: ({
1025
1086
  theme,
1026
1087
  ownerState
1027
- }) => [(0, _extends2.default)({
1088
+ }) => [{
1028
1089
  textTransform: 'none',
1029
1090
  fontWeight: theme.typography.fontWeightMedium,
1030
1091
  color: theme.palette.text.secondary,
1031
- borderColor: theme.palette.grey[200]
1032
- }, ownerState.size === 'small' && {
1033
- padding: '0.375rem 0.75rem'
1034
- }, {
1092
+ borderColor: theme.palette.grey[200],
1093
+ ...(ownerState.size === 'small' && {
1094
+ padding: '0.375rem 0.75rem'
1095
+ }),
1035
1096
  '&.Mui-selected': {
1036
1097
  color: (theme.vars || theme).palette.primary[700],
1037
1098
  borderColor: `${(theme.vars || theme).palette.primary[200]} !important`,
@@ -1040,7 +1101,7 @@ function getThemedComponents() {
1040
1101
  backgroundColor: (theme.vars || theme).palette.primary[100]
1041
1102
  }
1042
1103
  }
1043
- }), theme.applyDarkStyles({
1104
+ }, theme.applyDarkStyles({
1044
1105
  borderColor: theme.palette.primaryDark[700],
1045
1106
  '&:hover': {
1046
1107
  backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.2)
@@ -1089,13 +1150,14 @@ function getThemedComponents() {
1089
1150
  },
1090
1151
  track: ({
1091
1152
  theme
1092
- }) => (0, _extends2.default)({
1153
+ }) => ({
1093
1154
  opacity: 1,
1094
1155
  borderRadius: 32,
1095
- backgroundColor: theme.palette.grey[400]
1096
- }, theme.applyDarkStyles({
1097
- backgroundColor: theme.palette.grey[800]
1098
- })),
1156
+ backgroundColor: theme.palette.grey[400],
1157
+ ...theme.applyDarkStyles({
1158
+ backgroundColor: theme.palette.grey[800]
1159
+ })
1160
+ }),
1099
1161
  thumb: {
1100
1162
  flexShrink: 0,
1101
1163
  width: '14px',
@@ -1151,5 +1213,11 @@ function getThemedComponents() {
1151
1213
  }
1152
1214
  };
1153
1215
  }
1154
- const brandingDarkTheme = exports.brandingDarkTheme = (0, _styles.createTheme)((0, _extends2.default)({}, getDesignTokens('dark'), getThemedComponents()));
1155
- const brandingLightTheme = exports.brandingLightTheme = (0, _styles.createTheme)((0, _extends2.default)({}, getDesignTokens('light'), getThemedComponents()));
1216
+ const brandingDarkTheme = exports.brandingDarkTheme = (0, _styles.createTheme)({
1217
+ ...getDesignTokens('dark'),
1218
+ ...getThemedComponents()
1219
+ });
1220
+ const brandingLightTheme = exports.brandingLightTheme = (0, _styles.createTheme)({
1221
+ ...getDesignTokens('light'),
1222
+ ...getThemedComponents()
1223
+ });