@selfcommunity/react-theme-default 1.2.0-alpha.1 → 1.2.0-alpha.3

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 (42) hide show
  1. package/lib/cjs/components/SCBaseItemButton.d.ts +2 -2
  2. package/lib/cjs/components/SCBaseItemButton.js +7 -2
  3. package/lib/cjs/components/SCEventForm.js +7 -3
  4. package/lib/cjs/components/SCEventHeader.d.ts +6 -6
  5. package/lib/cjs/components/SCEventHeader.js +17 -7
  6. package/lib/cjs/components/SCEventMembersWidget.js +7 -2
  7. package/lib/cjs/components/SCEventSubscribeButton.d.ts +2 -0
  8. package/lib/cjs/components/SCEventSubscribeButton.js +7 -2
  9. package/lib/cjs/components/SCNavigationSettingsIconButton.d.ts +7 -4
  10. package/lib/cjs/components/SCNavigationSettingsIconButton.js +10 -4
  11. package/lib/cjs/components/SCOnBoardingWidget.js +10 -3
  12. package/lib/cjs/components/SCPrivateMessageEditor.js +4 -2
  13. package/lib/cjs/components/SCPrivateMessageSnippetItem.d.ts +3 -0
  14. package/lib/cjs/components/SCPrivateMessageSnippetItem.js +6 -0
  15. package/lib/cjs/components/SCPrivateMessageSnippets.d.ts +0 -10
  16. package/lib/cjs/components/SCPrivateMessageSnippets.js +2 -11
  17. package/lib/cjs/components/SCPrivateMessageThread.js +9 -5
  18. package/lib/cjs/components/SCUser.d.ts +3 -0
  19. package/lib/cjs/components/SCUser.js +6 -0
  20. package/lib/cjs/index.d.ts +26 -22
  21. package/lib/esm/components/SCBaseItemButton.d.ts +2 -2
  22. package/lib/esm/components/SCBaseItemButton.js +7 -2
  23. package/lib/esm/components/SCEventForm.js +7 -3
  24. package/lib/esm/components/SCEventHeader.d.ts +6 -6
  25. package/lib/esm/components/SCEventHeader.js +18 -8
  26. package/lib/esm/components/SCEventMembersWidget.js +7 -2
  27. package/lib/esm/components/SCEventSubscribeButton.d.ts +2 -0
  28. package/lib/esm/components/SCEventSubscribeButton.js +7 -2
  29. package/lib/esm/components/SCNavigationSettingsIconButton.d.ts +7 -4
  30. package/lib/esm/components/SCNavigationSettingsIconButton.js +10 -4
  31. package/lib/esm/components/SCOnBoardingWidget.js +10 -3
  32. package/lib/esm/components/SCPrivateMessageEditor.js +4 -2
  33. package/lib/esm/components/SCPrivateMessageSnippetItem.d.ts +3 -0
  34. package/lib/esm/components/SCPrivateMessageSnippetItem.js +6 -0
  35. package/lib/esm/components/SCPrivateMessageSnippets.d.ts +0 -10
  36. package/lib/esm/components/SCPrivateMessageSnippets.js +2 -11
  37. package/lib/esm/components/SCPrivateMessageThread.js +7 -3
  38. package/lib/esm/components/SCUser.d.ts +3 -0
  39. package/lib/esm/components/SCUser.js +6 -0
  40. package/lib/esm/index.d.ts +26 -22
  41. package/lib/umd/react-theme-default.js +1 -1
  42. package/package.json +2 -2
package/lib/cjs/components/SCBaseItemButton.d.ts CHANGED
@@ -27,10 +27,10 @@ declare const Component: {
27
27
  marginTop: any;
28
28
  marginBottom: any;
29
29
  '& .SCBaseItemButton-primary': {
30
- color: any;
30
+ color: string;
31
31
  };
32
32
  '& .SCBaseItemButton-secondary': {
33
- color: any;
33
+ color: string;
34
34
  };
35
35
  };
36
36
  };
package/lib/cjs/components/SCBaseItemButton.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ const material_1 = require("@mui/material");
3
4
  const Component = {
4
5
  styleOverrides: {
5
6
  root: ({ theme }) => ({
@@ -29,10 +30,14 @@ const Component = {
29
30
  marginTop: theme.spacing(),
30
31
  marginBottom: theme.spacing(),
31
32
  '& .SCBaseItemButton-primary': {
32
- color: theme.palette.text.primary
33
+ color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
34
+ ? (0, material_1.lighten)(theme.palette.text.primary, 0.5)
35
+ : (0, material_1.darken)(theme.palette.text.primary, 0.5)
33
36
  },
34
37
  '& .SCBaseItemButton-secondary': {
35
- color: theme.palette.text.secondary
38
+ color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
39
+ ? (0, material_1.lighten)(theme.palette.text.secondary, 0.5)
40
+ : (0, material_1.darken)(theme.palette.text.secondary, 0.5)
36
41
  }
37
42
  }
38
43
  },
package/lib/cjs/components/SCEventForm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const system_1 = require("@mui/system");
3
+ const material_1 = require("@mui/material");
4
4
  const Component = {
5
5
  styleOverrides: {
6
6
  root: ({ theme }) => ({
@@ -91,7 +91,9 @@ const Component = {
91
91
  },
92
92
  '& .MuiDivider-root': {
93
93
  marginTop: theme.spacing(2),
94
- border: `1px solid ${(0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`
94
+ border: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
95
+ ? `1px solid ${(0, material_1.alpha)(theme.palette.primary.dark, 0.5)}`
96
+ : `1px solid ${(0, material_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`
95
97
  },
96
98
  '& .MuiDialogTitle-root': {
97
99
  '& span': {
@@ -101,7 +103,9 @@ const Component = {
101
103
  },
102
104
  '& .SCEventForm-event-address-root': {
103
105
  marginTop: theme.spacing(2),
104
- backgroundColor: theme.palette.grey['A200'],
106
+ backgroundColor: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
107
+ ? theme.palette.background.paper
108
+ : theme.palette.grey['A200'],
105
109
  borderRadius: 5,
106
110
  '& .SCEventForm-event-address-tabs': {
107
111
  padding: theme.spacing(0, 2, 0, 2),
package/lib/cjs/components/SCEventHeader.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  declare const Component: {
2
2
  styleOverrides: {
3
3
  root: ({ theme, isEventAdmin, isEventFinished }: any) => {
4
+ '& .SCEventHeader-contrast-color': {
5
+ color: string;
6
+ };
4
7
  '& .SCEventHeader-cover': {
5
8
  [x: number]: {
6
9
  borderRadius: any;
@@ -41,8 +44,6 @@ declare const Component: {
41
44
  '& .SCEventHeader-chip': {
42
45
  marginLeft: any;
43
46
  marginBottom: any;
44
- backgroundColor: any;
45
- color: any;
46
47
  border: string;
47
48
  '& .SCEventHeader-chip-icon': {
48
49
  marginLeft: any;
@@ -52,7 +53,7 @@ declare const Component: {
52
53
  textTransform: string;
53
54
  fontSize: string;
54
55
  fontWeight: any;
55
- color: any;
56
+ color: string;
56
57
  paddingLeft: any;
57
58
  };
58
59
  '& .SCEventHeader-info': {
@@ -61,7 +62,7 @@ declare const Component: {
61
62
  fontSize: string;
62
63
  fontWeight: any;
63
64
  paddingLeft: any;
64
- color: any;
65
+ color: string;
65
66
  };
66
67
  '& .SCEventHeader-visibility': {
67
68
  display: string;
@@ -69,11 +70,10 @@ declare const Component: {
69
70
  alignItems: string;
70
71
  gap: any;
71
72
  paddingLeft: any;
72
- color: any;
73
73
  '& .SCEventHeader-visibility-item': {
74
74
  fontSize: any;
75
75
  fontWeight: any;
76
- color: any;
76
+ color: string;
77
77
  display: string;
78
78
  justifyContent: string;
79
79
  alignItems: string;
package/lib/cjs/components/SCEventHeader.js CHANGED
@@ -4,6 +4,11 @@ const material_1 = require("@mui/material");
4
4
  const Component = {
5
5
  styleOverrides: {
6
6
  root: ({ theme, isEventAdmin, isEventFinished }) => ({
7
+ '& .SCEventHeader-contrast-color': {
8
+ color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
9
+ ? (0, material_1.lighten)(theme.palette.common.white, 0.5)
10
+ : (0, material_1.darken)(theme.palette.common.white, 0.5)
11
+ },
7
12
  '& .SCEventHeader-cover': {
8
13
  position: 'relative',
9
14
  minHeight: 150,
@@ -44,9 +49,9 @@ const Component = {
44
49
  '& .SCEventHeader-chip': {
45
50
  marginLeft: theme.spacing(2),
46
51
  marginBottom: theme.spacing(),
47
- backgroundColor: theme.palette.common.white,
48
- color: theme.palette.error.light,
49
- border: `1px solid ${theme.palette.grey[400]}`,
52
+ border: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
53
+ ? '1px solid rgba(255, 255, 255, 0.12)'
54
+ : `1px solid ${theme.palette.grey[400]}`,
50
55
  '& .SCEventHeader-chip-icon': {
51
56
  marginLeft: theme.spacing(1)
52
57
  }
@@ -55,7 +60,9 @@ const Component = {
55
60
  textTransform: 'uppercase',
56
61
  fontSize: '1.143rem',
57
62
  fontWeight: theme.typography.fontWeightLight,
58
- color: isEventFinished ? theme.palette.grey[500] : theme.palette.text.secondary,
63
+ color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
64
+ ? (0, material_1.lighten)(isEventFinished ? theme.palette.grey[500] : theme.palette.text.secondary, 0.5)
65
+ : (0, material_1.darken)(isEventFinished ? theme.palette.grey[500] : theme.palette.text.secondary, 0.5),
59
66
  paddingLeft: theme.spacing(2)
60
67
  },
61
68
  '& .SCEventHeader-info': {
@@ -64,7 +71,9 @@ const Component = {
64
71
  fontSize: '1.857rem',
65
72
  fontWeight: theme.typography.fontWeightBold,
66
73
  paddingLeft: theme.spacing(2),
67
- color: isEventFinished ? theme.palette.grey[500] : 'inherit'
74
+ color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
75
+ ? (0, material_1.lighten)(isEventFinished ? theme.palette.grey[500] : theme.palette.common.white, 0.5)
76
+ : (0, material_1.darken)(isEventFinished ? theme.palette.grey[500] : theme.palette.common.white, 0.5)
68
77
  },
69
78
  '& .SCEventHeader-visibility': {
70
79
  display: 'flex',
@@ -72,11 +81,12 @@ const Component = {
72
81
  alignItems: 'center',
73
82
  gap: theme.spacing(0.5),
74
83
  paddingLeft: theme.spacing(2),
75
- color: isEventFinished ? theme.palette.grey[500] : 'inherit',
76
84
  '& .SCEventHeader-visibility-item': {
77
85
  fontSize: theme.typography.fontSize,
78
86
  fontWeight: theme.typography.fontWeightLight,
79
- color: theme.palette.text.secondary,
87
+ color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
88
+ ? (0, material_1.lighten)(isEventFinished ? theme.palette.grey[500] : theme.palette.common.white, 0.5)
89
+ : (0, material_1.darken)(isEventFinished ? theme.palette.grey[500] : theme.palette.common.white, 0.5),
80
90
  display: 'flex',
81
91
  justifyContent: 'center',
82
92
  alignItems: 'center',
package/lib/cjs/components/SCEventMembersWidget.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ const material_1 = require("@mui/material");
3
4
  const Component = {
4
5
  styleOverrides: {
5
6
  root: ({ theme }) => ({
@@ -9,7 +10,9 @@ const Component = {
9
10
  marginBottom: '18px'
10
11
  },
11
12
  '& .SCEventMembersWidget-tabs-wrapper': {
12
- borderBottom: `1px solid ${theme.palette.grey['300']}`,
13
+ borderBottom: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
14
+ ? `1px solid ${theme.palette.grey[800]}`
15
+ : `1px solid ${theme.palette.grey[300]}`,
13
16
  '& .SCEventMembersWidget-tab-label-wrapper': {
14
17
  gap: '2px',
15
18
  alignItems: 'center'
@@ -36,7 +39,9 @@ const Component = {
36
39
  marginBottom: '18px'
37
40
  },
38
41
  '& .SCEventMembersWidget-tabs-wrapper': {
39
- borderBottom: `1px solid ${theme.palette.grey['300']}`,
42
+ borderBottom: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
43
+ ? `1px solid ${theme.palette.grey[800]}`
44
+ : `1px solid ${theme.palette.grey[300]}`,
40
45
  '& .SCEventMembersWidget-tab-label-wrapper': {
41
46
  gap: '2px',
42
47
  alignItems: 'center'
package/lib/cjs/components/SCEventSubscribeButton.d.ts CHANGED
@@ -7,6 +7,7 @@ declare const Component: {
7
7
  padding: string;
8
8
  };
9
9
  backgroundColor: any;
10
+ color: any;
10
11
  justifyContent: string;
11
12
  height: number;
12
13
  borderRadius: string;
@@ -70,6 +71,7 @@ declare const Component: {
70
71
  '& .MuiList-root .SCEventSubscribeButton-item': {
71
72
  paddingTop: number;
72
73
  paddingBottom: number;
74
+ color: string;
73
75
  '&.Mui-disabled': {
74
76
  paddingTop: any;
75
77
  paddingBottom: any;
package/lib/cjs/components/SCEventSubscribeButton.js CHANGED
@@ -1,9 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ const material_1 = require("@mui/material");
3
4
  const Component = {
4
5
  styleOverrides: {
5
6
  selectRoot: ({ theme }) => ({
6
- backgroundColor: theme.palette.grey['A200'],
7
+ backgroundColor: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? theme.palette.grey[800] : theme.palette.grey['A200'],
8
+ color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? theme.palette.common.white : undefined,
7
9
  justifyContent: 'space-between',
8
10
  height: 33,
9
11
  borderRadius: '5px',
@@ -11,7 +13,7 @@ const Component = {
11
13
  padding: '10px'
12
14
  },
13
15
  '&:hover, &:active': {
14
- backgroundColor: theme.palette.common.black,
16
+ backgroundColor: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? theme.palette.grey[900] : theme.palette.common.black,
15
17
  color: theme.palette.common.white,
16
18
  '& .MuiIcon-root': {
17
19
  color: theme.palette.common.white
@@ -64,6 +66,9 @@ const Component = {
64
66
  '& .MuiList-root .SCEventSubscribeButton-item': {
65
67
  paddingTop: 0,
66
68
  paddingBottom: 0,
69
+ color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
70
+ ? (0, material_1.lighten)(theme.palette.common.white, 0.5)
71
+ : (0, material_1.darken)(theme.palette.common.white, 0.5),
67
72
  '&.Mui-disabled': {
68
73
  paddingTop: theme.spacing(1),
69
74
  paddingBottom: theme.spacing(1)
package/lib/cjs/components/SCNavigationSettingsIconButton.d.ts CHANGED
@@ -8,10 +8,13 @@ declare const Component: {
8
8
  padding: number;
9
9
  };
10
10
  };
11
- '& .SCNavigationSettingsIconButton-item .MuiListItemIcon-root': {
12
- marginLeft: any;
13
- marginBottom: any;
14
- color: any;
11
+ '& .SCNavigationSettingsIconButton-item': {
12
+ color: string;
13
+ '& .MuiListItemIcon-root': {
14
+ marginLeft: any;
15
+ marginBottom: any;
16
+ color: any;
17
+ };
15
18
  };
16
19
  };
17
20
  drawerRoot: ({ theme }: any) => {
package/lib/cjs/components/SCNavigationSettingsIconButton.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ const material_1 = require("@mui/material");
3
4
  const Component = {
4
5
  styleOverrides: {
5
6
  menuRoot: ({ theme }) => ({
@@ -10,10 +11,15 @@ const Component = {
10
11
  padding: 0
11
12
  }
12
13
  },
13
- '& .SCNavigationSettingsIconButton-item .MuiListItemIcon-root': {
14
- marginLeft: theme.spacing(0.5),
15
- marginBottom: theme.spacing(0.5),
16
- color: theme.palette.secondary.main
14
+ '& .SCNavigationSettingsIconButton-item': {
15
+ color: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
16
+ ? (0, material_1.lighten)(theme.palette.common.white, 0.5)
17
+ : (0, material_1.darken)(theme.palette.common.white, 0.5),
18
+ '& .MuiListItemIcon-root': {
19
+ marginLeft: theme.spacing(0.5),
20
+ marginBottom: theme.spacing(0.5),
21
+ color: theme.palette.secondary.main
22
+ }
17
23
  }
18
24
  }),
19
25
  drawerRoot: ({ theme }) => ({
package/lib/cjs/components/SCOnBoardingWidget.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ const material_1 = require("@mui/material");
3
4
  const Component = {
4
5
  styleOverrides: {
5
6
  root: ({ theme }) => ({
@@ -18,7 +19,9 @@ const Component = {
18
19
  '& .MuiCardContent-root': {
19
20
  '& .MuiList-root': {
20
21
  paddingTop: 0,
21
- borderRight: `1px solid ${theme.palette.grey[200]}`,
22
+ borderRight: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
23
+ ? '1px solid rgba(255, 255, 255, 0.12)'
24
+ : `1px solid ${theme.palette.grey[200]}`,
22
25
  '& .MuiListItem-root': {
23
26
  paddingBottom: 0
24
27
  }
@@ -101,7 +104,9 @@ const Component = {
101
104
  }
102
105
  },
103
106
  '& .MuiAccordionSummary-root': {
104
- borderBottom: `1px solid ${theme.palette.grey[200]}`,
107
+ borderBottom: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
108
+ ? '1px solid rgba(255, 255, 255, 0.12)'
109
+ : `1px solid ${theme.palette.grey[200]}`,
105
110
  borderRadius: 0,
106
111
  [theme.breakpoints.up('md')]: {
107
112
  borderRadius: theme.shape.borderRadius,
@@ -174,7 +179,9 @@ const Component = {
174
179
  padding: 0
175
180
  },
176
181
  [theme.breakpoints.up('md')]: {
177
- borderRight: `1px solid ${theme.palette.grey[200]}`
182
+ borderRight: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
183
+ ? '1px solid rgba(255, 255, 255, 0.12)'
184
+ : `1px solid ${theme.palette.grey[200]}`
178
185
  }
179
186
  }
180
187
  }),
package/lib/cjs/components/SCPrivateMessageEditor.js CHANGED
@@ -1,10 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const system_1 = require("@mui/system");
3
+ const material_1 = require("@mui/material");
4
4
  const Component = {
5
5
  styleOverrides: {
6
6
  root: ({ theme }) => ({
7
- backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
7
+ backgroundColor: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
8
+ ? (0, material_1.alpha)(theme.palette.primary.dark, 0.5)
9
+ : (0, material_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
8
10
  '& .SCPrivateMessageEditor-message-input': {
9
11
  width: '100%'
10
12
  },
package/lib/cjs/components/SCPrivateMessageSnippetItem.d.ts CHANGED
@@ -5,6 +5,9 @@ declare const Component: {
5
5
  padding: string;
6
6
  boxShadow: string;
7
7
  marginBottom: any;
8
+ '& .SCPrivateMessageSnippetItem-contrast-color': {
9
+ color: string;
10
+ };
8
11
  '& .SCPrivateMessageSnippetItem-time': {
9
12
  float: string;
10
13
  fontSize: any;
package/lib/cjs/components/SCPrivateMessageSnippetItem.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ const material_1 = require("@mui/material");
3
4
  const Component = {
4
5
  styleOverrides: {
5
6
  root: ({ theme }) => ({
@@ -7,6 +8,11 @@ const Component = {
7
8
  padding: `${theme.spacing(0)}!important`,
8
9
  boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
9
10
  marginBottom: theme.spacing(1),
11
+ '& .SCPrivateMessageSnippetItem-contrast-color': {
12
+ color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
13
+ ? (0, material_1.lighten)(theme.palette.common.white, 0.5)
14
+ : (0, material_1.darken)(theme.palette.common.white, 0.5)
15
+ },
10
16
  '& .SCPrivateMessageSnippetItem-time': {
11
17
  float: 'right',
12
18
  fontSize: theme.typography.fontWeightRegular
package/lib/cjs/components/SCPrivateMessageSnippets.d.ts CHANGED
@@ -22,25 +22,15 @@ declare const Component: {
22
22
  };
23
23
  };
24
24
  '& .SCPrivateMessageSnippets-new-message-button': {
25
- color: string;
26
25
  alignSelf: string;
27
- backgroundColor: string;
28
- '&:hover': {
29
- borderWidth: string;
30
- backgroundColor: any;
31
- };
32
26
  };
33
27
  '& .MuiList-root': {
34
28
  flexGrow: number;
35
29
  overflowY: string;
36
30
  padding: any;
37
- '& .Mui-selected': {
38
- backgroundColor: any;
39
- };
40
31
  '& .MuiButtonBase-root, MuiListItemButton-root': {
41
32
  '&:hover': {
42
33
  borderRadius: string;
43
- backgroundColor: any;
44
34
  };
45
35
  };
46
36
  };
package/lib/cjs/components/SCPrivateMessageSnippets.js CHANGED
@@ -24,23 +24,14 @@ const Component = {
24
24
  }
25
25
  },
26
26
  '& .SCPrivateMessageSnippets-new-message-button': {
27
- color: `${theme.palette.primary.main} !important`,
28
- alignSelf: 'center',
29
- backgroundColor: 'transparent',
30
- '&:hover': {
31
- borderWidth: '2px !important',
32
- backgroundColor: theme.palette.grey['A200']
33
- }
27
+ alignSelf: 'center'
34
28
  },
35
29
  '& .MuiList-root': {
36
30
  flexGrow: 1,
37
31
  overflowY: 'auto',
38
32
  padding: theme.spacing(1),
39
- '& .Mui-selected': {
40
- backgroundColor: theme.palette.grey['A200']
41
- },
42
33
  '& .MuiButtonBase-root, MuiListItemButton-root': {
43
- '&:hover': { borderRadius: 'inherit', backgroundColor: theme.palette.grey['A200'] }
34
+ '&:hover': { borderRadius: 'inherit' }
44
35
  }
45
36
  }
46
37
  },
package/lib/cjs/components/SCPrivateMessageThread.js CHANGED
@@ -1,12 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const system_1 = require("@mui/system");
3
+ const material_1 = require("@mui/material");
4
4
  const Component = {
5
5
  styleOverrides: {
6
6
  root: ({ theme }) => ({
7
7
  height: '100%',
8
8
  width: '100%',
9
- backgroundColor: (0, system_1.alpha)(theme.palette.common.white, 0.5),
9
+ backgroundColor: (0, material_1.alpha)(theme.palette.common.white, 0.5),
10
10
  borderRadius: 0,
11
11
  '& .MuiCardContent-root': {
12
12
  display: 'flex',
@@ -41,7 +41,9 @@ const Component = {
41
41
  position: 'relative',
42
42
  marginBottom: theme.spacing(1),
43
43
  '&.SCPrivateMessageThread-receiver': {
44
- backgroundColor: theme.palette.common.white,
44
+ backgroundColor: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
45
+ ? theme.palette.background.paper
46
+ : theme.palette.common.white,
45
47
  marginLeft: theme.spacing(-4),
46
48
  filter: 'drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1))',
47
49
  '&:after': {
@@ -49,7 +51,9 @@ const Component = {
49
51
  content: `""`,
50
52
  position: 'absolute',
51
53
  border: `${theme.spacing(3)} solid transparent`,
52
- borderTop: `${theme.spacing(3)} solid ${theme.palette.common.white}`,
54
+ borderTop: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
55
+ ? `${theme.spacing(3)} solid ${theme.palette.background.paper}`
56
+ : `${theme.spacing(3)} solid ${theme.palette.common.white}`,
53
57
  top: theme.spacing(0),
54
58
  left: theme.spacing(-2)
55
59
  }
@@ -97,7 +101,7 @@ const Component = {
97
101
  height: theme.mixins.toolbar.minHeight,
98
102
  alignItems: 'center',
99
103
  justifyContent: 'center',
100
- backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
104
+ backgroundColor: (0, material_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
101
105
  '& .SCPrivateMessageThread-new-message-header-content': {
102
106
  display: 'flex',
103
107
  alignItems: 'center',
package/lib/cjs/components/SCUser.d.ts CHANGED
@@ -7,6 +7,9 @@ declare const Component: {
7
7
  borderRadius: number;
8
8
  paddingBottom: number;
9
9
  overflow: string;
10
+ '& .SCUser-contrast-color': {
11
+ color: string;
12
+ };
10
13
  '& .MuiChip-root': {
11
14
  height: string;
12
15
  };
package/lib/cjs/components/SCUser.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ const material_1 = require("@mui/material");
3
4
  const Component = {
4
5
  styleOverrides: {
5
6
  root: ({ theme }) => ({
@@ -9,6 +10,11 @@ const Component = {
9
10
  [theme.breakpoints.up('sm')]: {
10
11
  borderRadius: theme.shape.borderRadius
11
12
  },
13
+ '& .SCUser-contrast-color': {
14
+ color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
15
+ ? (0, material_1.lighten)(theme.palette.common.white, 0.5)
16
+ : (0, material_1.darken)(theme.palette.common.white, 0.5)
17
+ },
12
18
  '& .MuiChip-root': {
13
19
  height: '18px'
14
20
  },