@selfcommunity/react-theme-default 1.2.0-alpha.2 → 1.2.0-alpha.4

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 (88) hide show
  1. package/lib/cjs/components/SCAccordionLessons.d.ts +2 -2
  2. package/lib/cjs/components/SCAccordionLessons.js +2 -4
  3. package/lib/cjs/components/SCAddUsersButton.d.ts +7 -2
  4. package/lib/cjs/components/SCAddUsersButton.js +6 -4
  5. package/lib/cjs/components/SCBaseItemButton.d.ts +2 -2
  6. package/lib/cjs/components/SCBaseItemButton.js +7 -2
  7. package/lib/cjs/components/SCCategoryAutocomplete.d.ts +2 -2
  8. package/lib/cjs/components/SCCategoryAutocomplete.js +2 -5
  9. package/lib/cjs/components/SCCategoryFollowersButton.js +4 -1
  10. package/lib/cjs/components/SCCourseDashboard.d.ts +5 -3
  11. package/lib/cjs/components/SCCourseDashboard.js +6 -6
  12. package/lib/cjs/components/SCCourseForm.d.ts +8 -2
  13. package/lib/cjs/components/SCCourseForm.js +8 -4
  14. package/lib/cjs/components/SCCourseParticipantsButton.d.ts +5 -2
  15. package/lib/cjs/components/SCCourseParticipantsButton.js +8 -5
  16. package/lib/cjs/components/SCCourseUsersTable.d.ts +8 -2
  17. package/lib/cjs/components/SCCourseUsersTable.js +8 -4
  18. package/lib/cjs/components/SCEditCourse.d.ts +9 -3
  19. package/lib/cjs/components/SCEditCourse.js +9 -7
  20. package/lib/cjs/components/SCEventHeader.d.ts +0 -3
  21. package/lib/cjs/components/SCEventHeader.js +18 -7
  22. package/lib/cjs/components/SCEventSubscribeButton.d.ts +2 -0
  23. package/lib/cjs/components/SCEventSubscribeButton.js +7 -2
  24. package/lib/cjs/components/SCFeedObject.d.ts +3 -1
  25. package/lib/cjs/components/SCFeedObject.js +4 -2
  26. package/lib/cjs/components/SCGroupMembersButton.js +4 -1
  27. package/lib/cjs/components/SCInlineComposerWidget.js +1 -1
  28. package/lib/cjs/components/SCNavigationSettingsIconButton.d.ts +6 -3
  29. package/lib/cjs/components/SCNavigationSettingsIconButton.js +7 -4
  30. package/lib/cjs/components/SCOnBoardingWidget.js +10 -3
  31. package/lib/cjs/components/SCPrivateMessageEditor.js +4 -2
  32. package/lib/cjs/components/SCPrivateMessageSnippetItem.d.ts +3 -0
  33. package/lib/cjs/components/SCPrivateMessageSnippetItem.js +6 -0
  34. package/lib/cjs/components/SCPrivateMessageSnippets.d.ts +0 -10
  35. package/lib/cjs/components/SCPrivateMessageSnippets.js +2 -11
  36. package/lib/cjs/components/SCPrivateMessageThread.js +15 -7
  37. package/lib/cjs/components/SCPrivateMessageThreadItem.d.ts +3 -0
  38. package/lib/cjs/components/SCPrivateMessageThreadItem.js +3 -0
  39. package/lib/cjs/components/SCUser.d.ts +3 -0
  40. package/lib/cjs/components/SCUser.js +3 -0
  41. package/lib/cjs/components/SCWidget.d.ts +1 -1
  42. package/lib/cjs/components/SCWidget.js +1 -2
  43. package/lib/cjs/index.d.ts +73 -41
  44. package/lib/esm/components/SCAccordionLessons.d.ts +2 -2
  45. package/lib/esm/components/SCAccordionLessons.js +3 -5
  46. package/lib/esm/components/SCAddUsersButton.d.ts +7 -2
  47. package/lib/esm/components/SCAddUsersButton.js +6 -4
  48. package/lib/esm/components/SCBaseItemButton.d.ts +2 -2
  49. package/lib/esm/components/SCBaseItemButton.js +7 -2
  50. package/lib/esm/components/SCCategoryAutocomplete.d.ts +2 -2
  51. package/lib/esm/components/SCCategoryAutocomplete.js +2 -5
  52. package/lib/esm/components/SCCategoryFollowersButton.js +4 -1
  53. package/lib/esm/components/SCCourseDashboard.d.ts +5 -3
  54. package/lib/esm/components/SCCourseDashboard.js +6 -6
  55. package/lib/esm/components/SCCourseForm.d.ts +8 -2
  56. package/lib/esm/components/SCCourseForm.js +9 -5
  57. package/lib/esm/components/SCCourseParticipantsButton.d.ts +5 -2
  58. package/lib/esm/components/SCCourseParticipantsButton.js +8 -5
  59. package/lib/esm/components/SCCourseUsersTable.d.ts +8 -2
  60. package/lib/esm/components/SCCourseUsersTable.js +8 -4
  61. package/lib/esm/components/SCEditCourse.d.ts +9 -3
  62. package/lib/esm/components/SCEditCourse.js +10 -8
  63. package/lib/esm/components/SCEventHeader.d.ts +0 -3
  64. package/lib/esm/components/SCEventHeader.js +19 -8
  65. package/lib/esm/components/SCEventSubscribeButton.d.ts +2 -0
  66. package/lib/esm/components/SCEventSubscribeButton.js +7 -2
  67. package/lib/esm/components/SCFeedObject.d.ts +3 -1
  68. package/lib/esm/components/SCFeedObject.js +4 -2
  69. package/lib/esm/components/SCGroupMembersButton.js +4 -1
  70. package/lib/esm/components/SCInlineComposerWidget.js +1 -1
  71. package/lib/esm/components/SCNavigationSettingsIconButton.d.ts +6 -3
  72. package/lib/esm/components/SCNavigationSettingsIconButton.js +7 -4
  73. package/lib/esm/components/SCOnBoardingWidget.js +10 -3
  74. package/lib/esm/components/SCPrivateMessageEditor.js +4 -2
  75. package/lib/esm/components/SCPrivateMessageSnippetItem.d.ts +3 -0
  76. package/lib/esm/components/SCPrivateMessageSnippetItem.js +6 -0
  77. package/lib/esm/components/SCPrivateMessageSnippets.d.ts +0 -10
  78. package/lib/esm/components/SCPrivateMessageSnippets.js +2 -11
  79. package/lib/esm/components/SCPrivateMessageThread.js +13 -5
  80. package/lib/esm/components/SCPrivateMessageThreadItem.d.ts +3 -0
  81. package/lib/esm/components/SCPrivateMessageThreadItem.js +3 -0
  82. package/lib/esm/components/SCUser.d.ts +3 -0
  83. package/lib/esm/components/SCUser.js +3 -0
  84. package/lib/esm/components/SCWidget.d.ts +1 -1
  85. package/lib/esm/components/SCWidget.js +1 -2
  86. package/lib/esm/index.d.ts +73 -41
  87. package/lib/umd/react-theme-default.js +1 -1
  88. package/package.json +2 -2
@@ -3,11 +3,16 @@ declare const Component: {
3
3
  root: ({ theme }: {
4
4
  theme: any;
5
5
  }) => {
6
- '&.SCAddUsersButton-contrast-color': {
6
+ '&.SCAddUsersButton-default-contrast-color': {
7
7
  color: any;
8
8
  };
9
9
  };
10
- dialogRoot: () => {
10
+ dialogRoot: ({ theme }: {
11
+ theme: any;
12
+ }) => {
13
+ '& .SCAddUsersButton-dialog-paper-contrast-color': {
14
+ color: any;
15
+ };
11
16
  '& .MuiDialogActions-root': {
12
17
  marginTop: string;
13
18
  };
@@ -1,12 +1,14 @@
1
- import { getContrastRatio } from '@mui/material';
2
1
  const Component = {
3
2
  styleOverrides: {
4
3
  root: ({ theme }) => ({
5
- '&.SCAddUsersButton-contrast-color': {
6
- color: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5 ? theme.palette.common.white : undefined
4
+ '&.SCAddUsersButton-default-contrast-color': {
5
+ color: theme.palette.getContrastText(theme.palette.background.default)
7
6
  }
8
7
  }),
9
- dialogRoot: () => ({
8
+ dialogRoot: ({ theme }) => ({
9
+ '& .SCAddUsersButton-dialog-paper-contrast-color': {
10
+ color: theme.palette.getContrastText(theme.palette.background.paper)
11
+ },
10
12
  '& .MuiDialogActions-root': {
11
13
  marginTop: '36px'
12
14
  },
@@ -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
  };
@@ -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
  },
@@ -1,8 +1,8 @@
1
1
  declare const Component: {
2
2
  styleOverrides: {
3
3
  root: ({ theme }: any) => {
4
- '& .SCCategoryAutocomplete-contrast-color': {
5
- color: string;
4
+ '& .SCCategoryAutocomplete-paper-contrast-color': {
5
+ color: any;
6
6
  };
7
7
  };
8
8
  };
@@ -1,11 +1,8 @@
1
- import { darken, getContrastRatio, lighten } from '@mui/material';
2
1
  const Component = {
3
2
  styleOverrides: {
4
3
  root: ({ theme }) => ({
5
- '& .SCCategoryAutocomplete-contrast-color': {
6
- color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
7
- ? lighten(theme.palette.common.white, 0.5)
8
- : darken(theme.palette.common.white, 0.5)
4
+ '& .SCCategoryAutocomplete-paper-contrast-color': {
5
+ color: theme.palette.getContrastText(theme.palette.background.paper)
9
6
  }
10
7
  })
11
8
  }
@@ -1,3 +1,4 @@
1
+ import { getContrastRatio } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  root: ({ theme, followers }) => ({
@@ -15,7 +16,9 @@ const Component = {
15
16
  },
16
17
  '& .MuiAvatar-root': {
17
18
  height: theme.selfcommunity.user.avatar.sizeSmall,
18
- border: `1px solid ${theme.palette.common.white}`,
19
+ border: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5
20
+ ? '1px solid rgba(255, 255, 255, 0.12)'
21
+ : `1px solid ${theme.palette.common.white}`,
19
22
  fontSize: '0.7rem',
20
23
  '&:first-of-type': {
21
24
  width: followers > 3 ? 'auto' : theme.selfcommunity.user.avatar.sizeSmall
@@ -6,8 +6,11 @@ declare const Component: {
6
6
  [x: number]: {
7
7
  marginBottom: string;
8
8
  };
9
- '& .SCCourseDashboard-contrast-color': {
10
- color: string;
9
+ '& .SCCourseDashboard-default-contrast-color': {
10
+ color: any;
11
+ };
12
+ '& .SCCourseDashboard-paper-contrast-color': {
13
+ color: any;
11
14
  };
12
15
  '& .SCCourseDashboard-header': {
13
16
  [x: number]: {
@@ -178,7 +181,6 @@ declare const Component: {
178
181
  };
179
182
  '& a': {
180
183
  textDecoration: string;
181
- color: string;
182
184
  };
183
185
  '& .MuiBadge-root': {
184
186
  marginRight: any;
@@ -5,10 +5,11 @@ const Component = {
5
5
  [theme.breakpoints.down('sm')]: {
6
6
  marginBottom: '56px'
7
7
  },
8
- '& .SCCourseDashboard-contrast-color': {
9
- color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
10
- ? lighten(theme.palette.common.white, 0.5)
11
- : darken(theme.palette.common.white, 0.5)
8
+ '& .SCCourseDashboard-default-contrast-color': {
9
+ color: theme.palette.getContrastText(theme.palette.background.default)
10
+ },
11
+ '& .SCCourseDashboard-paper-contrast-color': {
12
+ color: theme.palette.getContrastText(theme.palette.background.paper)
12
13
  },
13
14
  '& .SCCourseDashboard-header': {
14
15
  [theme.breakpoints.down('sm')]: {
@@ -189,8 +190,7 @@ const Component = {
189
190
  height: '36px'
190
191
  },
191
192
  '& a': {
192
- textDecoration: 'none',
193
- color: 'inherit'
193
+ textDecoration: 'none'
194
194
  },
195
195
  '& .MuiBadge-root': {
196
196
  marginRight: theme.spacing(0.5)
@@ -3,8 +3,11 @@ declare const Component: {
3
3
  root: ({ theme }: {
4
4
  theme: any;
5
5
  }) => {
6
- '& .SCCourseForm-contrast-color': {
7
- color: string;
6
+ '& .SCCourseForm-default-contrast-color': {
7
+ color: any;
8
+ };
9
+ '& .SCCourseForm-paper-contrast-color': {
10
+ color: any;
8
11
  };
9
12
  '& .SCCourseForm-cover': {
10
13
  position: string;
@@ -42,6 +45,9 @@ declare const Component: {
42
45
  '& .SCCourseForm-name': {
43
46
  marginTop: any;
44
47
  };
48
+ '.MuiInputBase-root': {
49
+ color: any;
50
+ };
45
51
  '& .SCCategoryAutocomplete-root ': {
46
52
  marginTop: any;
47
53
  };
@@ -1,11 +1,12 @@
1
- import { alpha, darken, getContrastRatio, lighten } from '@mui/material';
1
+ import { alpha, getContrastRatio } from '@mui/material';
2
2
  const Component = {
3
3
  styleOverrides: {
4
4
  root: ({ theme }) => ({
5
- '& .SCCourseForm-contrast-color': {
6
- color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
7
- ? lighten(theme.palette.common.white, 0.5)
8
- : darken(theme.palette.common.white, 0.5)
5
+ '& .SCCourseForm-default-contrast-color': {
6
+ color: theme.palette.getContrastText(theme.palette.background.default)
7
+ },
8
+ '& .SCCourseForm-paper-contrast-color': {
9
+ color: theme.palette.getContrastText(theme.palette.background.paper)
9
10
  },
10
11
  '& .SCCourseForm-cover': {
11
12
  position: 'relative',
@@ -47,6 +48,9 @@ const Component = {
47
48
  '& .SCCourseForm-name': {
48
49
  marginTop: theme.spacing(3)
49
50
  },
51
+ '.MuiInputBase-root': {
52
+ color: theme.palette.getContrastText(theme.palette.background.paper)
53
+ },
50
54
  '& .SCCategoryAutocomplete-root ': {
51
55
  marginTop: theme.spacing(1)
52
56
  },
@@ -11,8 +11,8 @@ declare const Component: {
11
11
  '&:hover': {
12
12
  backgroundColor: string;
13
13
  };
14
- '& .SCCourseParticipantsButton-contrast-color': {
15
- color: string;
14
+ '& .SCCourseParticipantsButton-paper-contrast-color': {
15
+ color: any;
16
16
  };
17
17
  '& .MuiAvatarGroup-root': {
18
18
  '&:not(.SCAvatarCourseSkeleton-root) .MuiAvatar-root': {
@@ -46,6 +46,9 @@ declare const Component: {
46
46
  dialogRoot: ({ theme }: {
47
47
  theme: any;
48
48
  }) => {
49
+ '& .SCCourseParticipantsButton-dialog-paper-contrast-color': {
50
+ color: any;
51
+ };
49
52
  '& .SCCourseParticipantsButton-infinite-scroll': {
50
53
  [x: number]: {
51
54
  height: string;
@@ -9,10 +9,8 @@ const Component = {
9
9
  '&:hover': {
10
10
  backgroundColor: 'unset'
11
11
  },
12
- '& .SCCourseParticipantsButton-contrast-color': {
13
- color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
14
- ? lighten(theme.palette.common.white, 0.5)
15
- : darken(theme.palette.common.white, 0.5)
12
+ '& .SCCourseParticipantsButton-paper-contrast-color': {
13
+ color: theme.palette.getContrastText(theme.palette.background.paper)
16
14
  },
17
15
  '& .MuiAvatarGroup-root': {
18
16
  '&:not(.SCAvatarCourseSkeleton-root) .MuiAvatar-root': {
@@ -29,7 +27,9 @@ const Component = {
29
27
  },
30
28
  '& .MuiAvatar-root': {
31
29
  height: theme.selfcommunity.user.avatar.sizeSmall,
32
- border: `1px solid ${theme.palette.common.white}`,
30
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
31
+ ? 'rgba(255, 255, 255, 0.12)'
32
+ : `1px solid ${theme.palette.common.white}`,
33
33
  fontSize: '0.7rem',
34
34
  '&:first-of-type': {
35
35
  width: enrolled > 3 ? 'auto' : theme.selfcommunity.user.avatar.sizeSmall
@@ -46,6 +46,9 @@ const Component = {
46
46
  }
47
47
  }),
48
48
  dialogRoot: ({ theme }) => ({
49
+ '& .SCCourseParticipantsButton-dialog-paper-contrast-color': {
50
+ color: theme.palette.getContrastText(theme.palette.background.paper)
51
+ },
49
52
  '& .SCCourseParticipantsButton-infinite-scroll': {
50
53
  height: '400px !important',
51
54
  [theme.breakpoints.down('md')]: {
@@ -10,8 +10,11 @@ declare const Component: {
10
10
  borderRadius: string;
11
11
  padding: any;
12
12
  backgroundColor: any;
13
- '& .SCCourseUsersTable-contrast-color': {
14
- color: string;
13
+ '& .SCCourseUsersTable-default-contrast-color': {
14
+ color: any;
15
+ };
16
+ '& .SCCourseUsersTable-paper-contrast-color': {
17
+ color: any;
15
18
  };
16
19
  '& .SCCourseUsersTable-search': {
17
20
  '& > .MuiInputBase-root': {
@@ -70,6 +73,9 @@ declare const Component: {
70
73
  dialogRoot: ({ theme }: {
71
74
  theme: any;
72
75
  }) => {
76
+ '& .SCCourseUsersTable-dialog-paper-contrast-color': {
77
+ color: any;
78
+ };
73
79
  '& .MuiDialogTitle-root': {
74
80
  color: string;
75
81
  };
@@ -13,10 +13,11 @@ const Component = {
13
13
  [theme.breakpoints.up('sm')]: {
14
14
  padding: theme.spacing(2)
15
15
  },
16
- '& .SCCourseUsersTable-contrast-color': {
17
- color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
18
- ? lighten(theme.palette.common.white, 0.5)
19
- : darken(theme.palette.common.white, 0.5)
16
+ '& .SCCourseUsersTable-default-contrast-color': {
17
+ color: theme.palette.getContrastText(theme.palette.background.default)
18
+ },
19
+ '& .SCCourseUsersTable-paper-contrast-color': {
20
+ color: theme.palette.getContrastText(theme.palette.background.paper)
20
21
  },
21
22
  '& .SCCourseUsersTable-search': {
22
23
  '& > .MuiInputBase-root': {
@@ -73,6 +74,9 @@ const Component = {
73
74
  paddingTop: theme.spacing(3)
74
75
  }),
75
76
  dialogRoot: ({ theme }) => ({
77
+ '& .SCCourseUsersTable-dialog-paper-contrast-color': {
78
+ color: theme.palette.getContrastText(theme.palette.background.paper)
79
+ },
76
80
  '& .MuiDialogTitle-root': {
77
81
  color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
78
82
  ? lighten(theme.palette.common.white, 0.5)
@@ -6,8 +6,11 @@ declare const Component: {
6
6
  [x: number]: {
7
7
  marginBottom: string;
8
8
  };
9
- '& .SCEditCourse-contrast-color': {
10
- color: string;
9
+ '& .SCEditCourse-default-contrast-color': {
10
+ color: any;
11
+ };
12
+ '& .SCEditCourse-paper-contrast-color': {
13
+ color: any;
11
14
  };
12
15
  '& .SCEditCourse-header': {
13
16
  [x: number]: {
@@ -168,8 +171,11 @@ declare const Component: {
168
171
  gap: string;
169
172
  '& .SCEditCourse-change-lesson-status-published-wrapper': {
170
173
  backgroundColor: any;
174
+ '& .MuiTypography-root': {
175
+ color: any;
176
+ };
171
177
  '& .MuiIcon-root': {
172
- color: string;
178
+ color: any;
173
179
  };
174
180
  };
175
181
  '& .SCEditCourse-change-lesson-status-icon-draft': {
@@ -1,14 +1,15 @@
1
- import { darken, getContrastRatio, lighten } from '@mui/material';
1
+ import { getContrastRatio } from '@mui/material';
2
2
  const Component = {
3
3
  styleOverrides: {
4
4
  root: ({ theme }) => ({
5
5
  [theme.breakpoints.down('sm')]: {
6
6
  marginBottom: '56px'
7
7
  },
8
- '& .SCEditCourse-contrast-color': {
9
- color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
10
- ? lighten(theme.palette.common.white, 0.5)
11
- : darken(theme.palette.common.white, 0.5)
8
+ '& .SCEditCourse-default-contrast-color': {
9
+ color: theme.palette.getContrastText(theme.palette.background.default)
10
+ },
11
+ '& .SCEditCourse-paper-contrast-color': {
12
+ color: theme.palette.getContrastText(theme.palette.background.paper)
12
13
  },
13
14
  '& .SCEditCourse-header': {
14
15
  flexDirection: 'row',
@@ -191,10 +192,11 @@ const Component = {
191
192
  backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
192
193
  ? theme.palette.primary.dark
193
194
  : theme.palette.primary.main,
195
+ '& .MuiTypography-root': {
196
+ color: theme.palette.common.white
197
+ },
194
198
  '& .MuiIcon-root': {
195
- color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
196
- ? lighten(theme.palette.common.white, 0.5)
197
- : darken(theme.palette.common.white, 0.5)
199
+ color: theme.palette.common.white
198
200
  }
199
201
  },
200
202
  '& .SCEditCourse-change-lesson-status-icon-draft': {
@@ -41,8 +41,6 @@ declare const Component: {
41
41
  '& .SCEventHeader-chip': {
42
42
  marginLeft: any;
43
43
  marginBottom: any;
44
- backgroundColor: any;
45
- color: any;
46
44
  border: string;
47
45
  '& .SCEventHeader-chip-icon': {
48
46
  marginLeft: any;
@@ -69,7 +67,6 @@ declare const Component: {
69
67
  alignItems: string;
70
68
  gap: any;
71
69
  paddingLeft: any;
72
- color: any;
73
70
  '& .SCEventHeader-visibility-item': {
74
71
  fontSize: any;
75
72
  fontWeight: any;
@@ -1,4 +1,4 @@
1
- import { alpha } from '@mui/material';
1
+ import { alpha, darken, getContrastRatio, lighten } from '@mui/material';
2
2
  const Component = {
3
3
  styleOverrides: {
4
4
  root: ({ theme, isEventAdmin, isEventFinished }) => ({
@@ -42,9 +42,9 @@ const Component = {
42
42
  '& .SCEventHeader-chip': {
43
43
  marginLeft: theme.spacing(2),
44
44
  marginBottom: theme.spacing(),
45
- backgroundColor: theme.palette.common.white,
46
- color: theme.palette.error.light,
47
- border: `1px solid ${theme.palette.grey[400]}`,
45
+ border: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5
46
+ ? '1px solid rgba(255, 255, 255, 0.12)'
47
+ : `1px solid ${theme.palette.grey[400]}`,
48
48
  '& .SCEventHeader-chip-icon': {
49
49
  marginLeft: theme.spacing(1)
50
50
  }
@@ -53,7 +53,11 @@ const Component = {
53
53
  textTransform: 'uppercase',
54
54
  fontSize: '1.143rem',
55
55
  fontWeight: theme.typography.fontWeightLight,
56
- color: isEventFinished ? theme.palette.grey[500] : theme.palette.text.secondary,
56
+ color: isEventFinished
57
+ ? getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5
58
+ ? lighten(theme.palette.grey[500], 0.5)
59
+ : darken(theme.palette.grey[500], 0.5)
60
+ : theme.palette.getContrastText(theme.palette.background.default),
57
61
  paddingLeft: theme.spacing(2)
58
62
  },
59
63
  '& .SCEventHeader-info': {
@@ -62,7 +66,11 @@ const Component = {
62
66
  fontSize: '1.857rem',
63
67
  fontWeight: theme.typography.fontWeightBold,
64
68
  paddingLeft: theme.spacing(2),
65
- color: isEventFinished ? theme.palette.grey[500] : 'inherit'
69
+ color: isEventFinished
70
+ ? getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5
71
+ ? lighten(theme.palette.grey[500], 0.5)
72
+ : darken(theme.palette.grey[500], 0.5)
73
+ : theme.palette.getContrastText(theme.palette.background.default)
66
74
  },
67
75
  '& .SCEventHeader-visibility': {
68
76
  display: 'flex',
@@ -70,11 +78,14 @@ const Component = {
70
78
  alignItems: 'center',
71
79
  gap: theme.spacing(0.5),
72
80
  paddingLeft: theme.spacing(2),
73
- color: isEventFinished ? theme.palette.grey[500] : 'inherit',
74
81
  '& .SCEventHeader-visibility-item': {
75
82
  fontSize: theme.typography.fontSize,
76
83
  fontWeight: theme.typography.fontWeightLight,
77
- color: theme.palette.text.secondary,
84
+ color: isEventFinished
85
+ ? getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5
86
+ ? lighten(theme.palette.grey[500], 0.5)
87
+ : darken(theme.palette.grey[500], 0.5)
88
+ : theme.palette.getContrastText(theme.palette.background.default),
78
89
  display: 'flex',
79
90
  justifyContent: 'center',
80
91
  alignItems: 'center',
@@ -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;
@@ -1,7 +1,9 @@
1
+ import { darken, getContrastRatio, lighten } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  selectRoot: ({ theme }) => ({
4
- backgroundColor: theme.palette.grey['A200'],
5
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? theme.palette.grey[800] : theme.palette.grey['A200'],
6
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? theme.palette.common.white : undefined,
5
7
  justifyContent: 'space-between',
6
8
  height: 33,
7
9
  borderRadius: '5px',
@@ -9,7 +11,7 @@ const Component = {
9
11
  padding: '10px'
10
12
  },
11
13
  '&:hover, &:active': {
12
- backgroundColor: theme.palette.common.black,
14
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? theme.palette.grey[900] : theme.palette.common.black,
13
15
  color: theme.palette.common.white,
14
16
  '& .MuiIcon-root': {
15
17
  color: theme.palette.common.white
@@ -62,6 +64,9 @@ const Component = {
62
64
  '& .MuiList-root .SCEventSubscribeButton-item': {
63
65
  paddingTop: 0,
64
66
  paddingBottom: 0,
67
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
68
+ ? lighten(theme.palette.common.white, 0.5)
69
+ : darken(theme.palette.common.white, 0.5),
65
70
  '&.Mui-disabled': {
66
71
  paddingTop: theme.spacing(1),
67
72
  paddingBottom: theme.spacing(1)
@@ -605,6 +605,8 @@ declare const Component: {
605
605
  };
606
606
  contributorsRoot: ({ theme }: any) => {
607
607
  '& .SCFeedObject-contributors-btn-participants': {
608
+ display: string;
609
+ gap: string;
608
610
  padding: any;
609
611
  marginLeft: any;
610
612
  color: string;
@@ -620,7 +622,7 @@ declare const Component: {
620
622
  "& .MuiAvatar-root": {
621
623
  backgroundColor: string;
622
624
  border: string;
623
- color: string;
625
+ color: any;
624
626
  fontSize: string;
625
627
  width: any;
626
628
  height: any;
@@ -614,6 +614,8 @@ const Component = {
614
614
  }),
615
615
  contributorsRoot: ({ theme }) => ({
616
616
  '& .SCFeedObject-contributors-btn-participants': {
617
+ display: 'flex',
618
+ gap: '4px',
617
619
  padding: theme.spacing(0.5),
618
620
  marginLeft: theme.spacing(-0.5),
619
621
  color: 'inherit',
@@ -628,8 +630,8 @@ const Component = {
628
630
  },
629
631
  ['& .MuiAvatar-root']: {
630
632
  backgroundColor: '#d5d5d5',
631
- border: '2px solid #FFF !important',
632
- color: '#FFF',
633
+ border: `1px solid ${theme.palette.common.white}`,
634
+ color: theme.palette.common.white,
633
635
  fontSize: '0.55rem',
634
636
  width: theme.selfcommunity.user.avatar.sizeSmall,
635
637
  height: theme.selfcommunity.user.avatar.sizeSmall,
@@ -1,3 +1,4 @@
1
+ import { getContrastRatio } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  root: ({ theme, subscribers }) => ({
@@ -15,7 +16,9 @@ const Component = {
15
16
  },
16
17
  '& .MuiAvatar-root': {
17
18
  height: theme.selfcommunity.user.avatar.sizeSmall,
18
- border: `1px solid ${theme.palette.common.white}`,
19
+ border: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5
20
+ ? '1px solid rgba(255, 255, 255, 0.12)'
21
+ : `1px solid ${theme.palette.common.white}`,
19
22
  fontSize: '0.7rem',
20
23
  '&:first-of-type': {
21
24
  width: subscribers > 3 ? 'auto' : theme.selfcommunity.user.avatar.sizeSmall
@@ -16,7 +16,7 @@ const Component = {
16
16
  '& .MuiButton-root': {
17
17
  fontWeight: theme.typography.fontWeightMedium,
18
18
  letterSpacing: '0.17px',
19
- padding: theme.spacing(0.5, 0),
19
+ padding: theme.spacing(0.5, 0, 0.5, 1),
20
20
  '&:hover': {
21
21
  color: theme.palette.text.secondary,
22
22
  border: 'none'
@@ -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;
11
+ '& .SCNavigationSettingsIconButton-item': {
14
12
  color: any;
13
+ '& .MuiListItemIcon-root': {
14
+ marginLeft: any;
15
+ marginBottom: any;
16
+ color: any;
17
+ };
15
18
  };
16
19
  };
17
20
  drawerRoot: ({ theme }: any) => {
@@ -8,10 +8,13 @@ const Component = {
8
8
  padding: 0
9
9
  }
10
10
  },
11
- '& .SCNavigationSettingsIconButton-item .MuiListItemIcon-root': {
12
- marginLeft: theme.spacing(0.5),
13
- marginBottom: theme.spacing(0.5),
14
- color: theme.palette.secondary.main
11
+ '& .SCNavigationSettingsIconButton-item': {
12
+ color: theme.palette.getContrastText(theme.palette.background.default),
13
+ '& .MuiListItemIcon-root': {
14
+ marginLeft: theme.spacing(0.5),
15
+ marginBottom: theme.spacing(0.5),
16
+ color: theme.palette.secondary.main
17
+ }
15
18
  }
16
19
  }),
17
20
  drawerRoot: ({ theme }) => ({