@selfcommunity/react-theme-default 1.2.0-alpha.2 → 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 (38) 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/SCEventHeader.d.ts +6 -6
  4. package/lib/cjs/components/SCEventHeader.js +17 -7
  5. package/lib/cjs/components/SCEventSubscribeButton.d.ts +2 -0
  6. package/lib/cjs/components/SCEventSubscribeButton.js +7 -2
  7. package/lib/cjs/components/SCNavigationSettingsIconButton.d.ts +7 -4
  8. package/lib/cjs/components/SCNavigationSettingsIconButton.js +10 -4
  9. package/lib/cjs/components/SCOnBoardingWidget.js +10 -3
  10. package/lib/cjs/components/SCPrivateMessageEditor.js +4 -2
  11. package/lib/cjs/components/SCPrivateMessageSnippetItem.d.ts +3 -0
  12. package/lib/cjs/components/SCPrivateMessageSnippetItem.js +6 -0
  13. package/lib/cjs/components/SCPrivateMessageSnippets.d.ts +0 -10
  14. package/lib/cjs/components/SCPrivateMessageSnippets.js +2 -11
  15. package/lib/cjs/components/SCPrivateMessageThread.js +9 -5
  16. package/lib/cjs/components/SCUser.d.ts +3 -0
  17. package/lib/cjs/components/SCUser.js +6 -0
  18. package/lib/cjs/index.d.ts +26 -22
  19. package/lib/esm/components/SCBaseItemButton.d.ts +2 -2
  20. package/lib/esm/components/SCBaseItemButton.js +7 -2
  21. package/lib/esm/components/SCEventHeader.d.ts +6 -6
  22. package/lib/esm/components/SCEventHeader.js +18 -8
  23. package/lib/esm/components/SCEventSubscribeButton.d.ts +2 -0
  24. package/lib/esm/components/SCEventSubscribeButton.js +7 -2
  25. package/lib/esm/components/SCNavigationSettingsIconButton.d.ts +7 -4
  26. package/lib/esm/components/SCNavigationSettingsIconButton.js +10 -4
  27. package/lib/esm/components/SCOnBoardingWidget.js +10 -3
  28. package/lib/esm/components/SCPrivateMessageEditor.js +4 -2
  29. package/lib/esm/components/SCPrivateMessageSnippetItem.d.ts +3 -0
  30. package/lib/esm/components/SCPrivateMessageSnippetItem.js +6 -0
  31. package/lib/esm/components/SCPrivateMessageSnippets.d.ts +0 -10
  32. package/lib/esm/components/SCPrivateMessageSnippets.js +2 -11
  33. package/lib/esm/components/SCPrivateMessageThread.js +7 -3
  34. package/lib/esm/components/SCUser.d.ts +3 -0
  35. package/lib/esm/components/SCUser.js +6 -0
  36. package/lib/esm/index.d.ts +26 -22
  37. package/lib/umd/react-theme-default.js +1 -1
  38. 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/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/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
  },
package/lib/cjs/index.d.ts CHANGED
@@ -562,10 +562,10 @@ declare const theme: {
562
562
  marginTop: any;
563
563
  marginBottom: any;
564
564
  '& .SCBaseItemButton-primary': {
565
- color: any;
565
+ color: string;
566
566
  };
567
567
  '& .SCBaseItemButton-secondary': {
568
- color: any;
568
+ color: string;
569
569
  };
570
570
  };
571
571
  };
@@ -6981,10 +6981,13 @@ declare const theme: {
6981
6981
  padding: number;
6982
6982
  };
6983
6983
  };
6984
- '& .SCNavigationSettingsIconButton-item .MuiListItemIcon-root': {
6985
- marginLeft: any;
6986
- marginBottom: any;
6987
- color: any;
6984
+ '& .SCNavigationSettingsIconButton-item': {
6985
+ color: string;
6986
+ '& .MuiListItemIcon-root': {
6987
+ marginLeft: any;
6988
+ marginBottom: any;
6989
+ color: any;
6990
+ };
6988
6991
  };
6989
6992
  };
6990
6993
  drawerRoot: ({ theme }: any) => {
@@ -8111,6 +8114,9 @@ declare const theme: {
8111
8114
  '& .SCOnBoardingWidget-app-image-android': {
8112
8115
  width: string;
8113
8116
  marginTop: any;
8117
+ /**
8118
+ * Style assets - Imports - Start
8119
+ */
8114
8120
  marginBottom: any;
8115
8121
  };
8116
8122
  };
@@ -8442,6 +8448,9 @@ declare const theme: {
8442
8448
  padding: string;
8443
8449
  boxShadow: string;
8444
8450
  marginBottom: any;
8451
+ '& .SCPrivateMessageSnippetItem-contrast-color': {
8452
+ color: string;
8453
+ };
8445
8454
  '& .SCPrivateMessageSnippetItem-time': {
8446
8455
  float: string;
8447
8456
  fontSize: any;
@@ -8522,25 +8531,15 @@ declare const theme: {
8522
8531
  };
8523
8532
  };
8524
8533
  '& .SCPrivateMessageSnippets-new-message-button': {
8525
- color: string;
8526
8534
  alignSelf: string;
8527
- backgroundColor: string;
8528
- '&:hover': {
8529
- borderWidth: string;
8530
- backgroundColor: any;
8531
- };
8532
8535
  };
8533
8536
  '& .MuiList-root': {
8534
8537
  flexGrow: number;
8535
8538
  overflowY: string;
8536
8539
  padding: any;
8537
- '& .Mui-selected': {
8538
- backgroundColor: any;
8539
- };
8540
8540
  '& .MuiButtonBase-root, MuiListItemButton-root': {
8541
8541
  '&:hover': {
8542
8542
  borderRadius: string;
8543
- backgroundColor: any;
8544
8543
  };
8545
8544
  };
8546
8545
  };
@@ -9064,6 +9063,9 @@ declare const theme: {
9064
9063
  borderRadius: number;
9065
9064
  paddingBottom: number;
9066
9065
  overflow: string;
9066
+ '& .SCUser-contrast-color': {
9067
+ color: string;
9068
+ };
9067
9069
  '& .MuiChip-root': {
9068
9070
  height: string;
9069
9071
  };
@@ -10121,6 +10123,9 @@ declare const theme: {
10121
10123
  SCEventHeader: {
10122
10124
  styleOverrides: {
10123
10125
  root: ({ theme, isEventAdmin, isEventFinished }: any) => {
10126
+ '& .SCEventHeader-contrast-color': {
10127
+ color: string;
10128
+ };
10124
10129
  '& .SCEventHeader-cover': {
10125
10130
  [x: number]: {
10126
10131
  borderRadius: any;
@@ -10161,8 +10166,6 @@ declare const theme: {
10161
10166
  '& .SCEventHeader-chip': {
10162
10167
  marginLeft: any;
10163
10168
  marginBottom: any;
10164
- backgroundColor: any;
10165
- color: any;
10166
10169
  border: string;
10167
10170
  '& .SCEventHeader-chip-icon': {
10168
10171
  marginLeft: any;
@@ -10172,7 +10175,7 @@ declare const theme: {
10172
10175
  textTransform: string;
10173
10176
  fontSize: string;
10174
10177
  fontWeight: any;
10175
- color: any;
10178
+ color: string;
10176
10179
  paddingLeft: any;
10177
10180
  };
10178
10181
  '& .SCEventHeader-info': {
@@ -10181,7 +10184,7 @@ declare const theme: {
10181
10184
  fontSize: string;
10182
10185
  fontWeight: any;
10183
10186
  paddingLeft: any;
10184
- color: any;
10187
+ color: string;
10185
10188
  };
10186
10189
  '& .SCEventHeader-visibility': {
10187
10190
  display: string;
@@ -10189,11 +10192,10 @@ declare const theme: {
10189
10192
  alignItems: string;
10190
10193
  gap: any;
10191
10194
  paddingLeft: any;
10192
- color: any;
10193
10195
  '& .SCEventHeader-visibility-item': {
10194
10196
  fontSize: any;
10195
10197
  fontWeight: any;
10196
- color: any;
10198
+ color: string;
10197
10199
  display: string;
10198
10200
  justifyContent: string;
10199
10201
  alignItems: string;
@@ -10367,6 +10369,7 @@ declare const theme: {
10367
10369
  padding: string;
10368
10370
  };
10369
10371
  backgroundColor: any;
10372
+ color: any;
10370
10373
  justifyContent: string;
10371
10374
  height: number;
10372
10375
  borderRadius: string;
@@ -10430,6 +10433,7 @@ declare const theme: {
10430
10433
  '& .MuiList-root .SCEventSubscribeButton-item': {
10431
10434
  paddingTop: number;
10432
10435
  paddingBottom: number;
10436
+ color: string;
10433
10437
  '&.Mui-disabled': {
10434
10438
  paddingTop: any;
10435
10439
  paddingBottom: any;
package/lib/esm/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/esm/components/SCBaseItemButton.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { darken, getContrastRatio, lighten } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  root: ({ theme }) => ({
@@ -27,10 +28,14 @@ const Component = {
27
28
  marginTop: theme.spacing(),
28
29
  marginBottom: theme.spacing(),
29
30
  '& .SCBaseItemButton-primary': {
30
- color: theme.palette.text.primary
31
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
32
+ ? lighten(theme.palette.text.primary, 0.5)
33
+ : darken(theme.palette.text.primary, 0.5)
31
34
  },
32
35
  '& .SCBaseItemButton-secondary': {
33
- color: theme.palette.text.secondary
36
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
37
+ ? lighten(theme.palette.text.secondary, 0.5)
38
+ : darken(theme.palette.text.secondary, 0.5)
34
39
  }
35
40
  }
36
41
  },