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

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 (70) hide show
  1. package/lib/cjs/components/SCAccordionLessons.d.ts +3 -0
  2. package/lib/cjs/components/SCAccordionLessons.js +27 -9
  3. package/lib/cjs/components/SCCategoryAutocomplete.d.ts +5 -1
  4. package/lib/cjs/components/SCCategoryAutocomplete.js +8 -1
  5. package/lib/cjs/components/SCCommentObject.js +5 -3
  6. package/lib/cjs/components/SCCourseCompletedDialog.d.ts +6 -1
  7. package/lib/cjs/components/SCCourseCompletedDialog.js +7 -1
  8. package/lib/cjs/components/SCCourseDashboard.d.ts +3 -2
  9. package/lib/cjs/components/SCCourseDashboard.js +59 -20
  10. package/lib/cjs/components/SCCourseForm.d.ts +1 -1
  11. package/lib/cjs/components/SCCourseForm.js +34 -12
  12. package/lib/cjs/components/SCCourseParticipantsButton.d.ts +4 -2
  13. package/lib/cjs/components/SCCourseParticipantsButton.js +9 -2
  14. package/lib/cjs/components/SCCourseUsersTable.d.ts +12 -0
  15. package/lib/cjs/components/SCCourseUsersTable.js +29 -4
  16. package/lib/cjs/components/SCEditCourse.d.ts +2 -3
  17. package/lib/cjs/components/SCEditCourse.js +67 -24
  18. package/lib/cjs/components/SCEmptyStatus.d.ts +3 -0
  19. package/lib/cjs/components/SCEmptyStatus.js +12 -2
  20. package/lib/cjs/components/SCEventForm.js +7 -3
  21. package/lib/cjs/components/SCEventMembersWidget.js +7 -2
  22. package/lib/cjs/components/SCFeedObject.d.ts +3 -2
  23. package/lib/cjs/components/SCFeedObject.js +22 -11
  24. package/lib/cjs/components/SCLessonDrawer.d.ts +3 -0
  25. package/lib/cjs/components/SCLessonDrawer.js +9 -1
  26. package/lib/cjs/components/SCLessonEditForm.d.ts +3 -0
  27. package/lib/cjs/components/SCLessonEditForm.js +6 -0
  28. package/lib/cjs/components/SCLessonReleaseMenu.d.ts +3 -0
  29. package/lib/cjs/components/SCLessonReleaseMenu.js +6 -0
  30. package/lib/cjs/components/SCLessonTemplate.d.ts +3 -0
  31. package/lib/cjs/components/SCLessonTemplate.js +6 -1
  32. package/lib/cjs/components/SCMediaFile.d.ts +3 -1
  33. package/lib/cjs/components/SCMediaFile.js +11 -4
  34. package/lib/cjs/index.d.ts +60 -14
  35. package/lib/esm/components/SCAccordionLessons.d.ts +3 -0
  36. package/lib/esm/components/SCAccordionLessons.js +27 -9
  37. package/lib/esm/components/SCCategoryAutocomplete.d.ts +5 -1
  38. package/lib/esm/components/SCCategoryAutocomplete.js +8 -1
  39. package/lib/esm/components/SCCommentObject.js +4 -2
  40. package/lib/esm/components/SCCourseCompletedDialog.d.ts +6 -1
  41. package/lib/esm/components/SCCourseCompletedDialog.js +7 -1
  42. package/lib/esm/components/SCCourseDashboard.d.ts +3 -2
  43. package/lib/esm/components/SCCourseDashboard.js +60 -21
  44. package/lib/esm/components/SCCourseForm.d.ts +1 -1
  45. package/lib/esm/components/SCCourseForm.js +35 -13
  46. package/lib/esm/components/SCCourseParticipantsButton.d.ts +4 -2
  47. package/lib/esm/components/SCCourseParticipantsButton.js +9 -2
  48. package/lib/esm/components/SCCourseUsersTable.d.ts +12 -0
  49. package/lib/esm/components/SCCourseUsersTable.js +29 -4
  50. package/lib/esm/components/SCEditCourse.d.ts +2 -3
  51. package/lib/esm/components/SCEditCourse.js +68 -25
  52. package/lib/esm/components/SCEmptyStatus.d.ts +3 -0
  53. package/lib/esm/components/SCEmptyStatus.js +12 -2
  54. package/lib/esm/components/SCEventForm.js +7 -3
  55. package/lib/esm/components/SCEventMembersWidget.js +7 -2
  56. package/lib/esm/components/SCFeedObject.d.ts +3 -2
  57. package/lib/esm/components/SCFeedObject.js +17 -6
  58. package/lib/esm/components/SCLessonDrawer.d.ts +3 -0
  59. package/lib/esm/components/SCLessonDrawer.js +9 -1
  60. package/lib/esm/components/SCLessonEditForm.d.ts +3 -0
  61. package/lib/esm/components/SCLessonEditForm.js +6 -0
  62. package/lib/esm/components/SCLessonReleaseMenu.d.ts +3 -0
  63. package/lib/esm/components/SCLessonReleaseMenu.js +6 -0
  64. package/lib/esm/components/SCLessonTemplate.d.ts +3 -0
  65. package/lib/esm/components/SCLessonTemplate.js +6 -1
  66. package/lib/esm/components/SCMediaFile.d.ts +3 -1
  67. package/lib/esm/components/SCMediaFile.js +11 -4
  68. package/lib/esm/index.d.ts +60 -14
  69. package/lib/umd/react-theme-default.js +1 -1
  70. package/package.json +2 -2
package/lib/esm/components/SCCourseDashboard.js CHANGED
@@ -1,4 +1,4 @@
1
- import { getContrastRatio } from '@mui/material';
1
+ import { darken, getContrastRatio, lighten } from '@mui/material';
2
2
  const Component = {
3
3
  styleOverrides: {
4
4
  root: ({ theme }) => ({
@@ -6,7 +6,9 @@ const Component = {
6
6
  marginBottom: '56px'
7
7
  },
8
8
  '& .SCCourseDashboard-contrast-color': {
9
- color: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5 ? theme.palette.common.white : undefined
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)
10
12
  },
11
13
  '& .SCCourseDashboard-header': {
12
14
  [theme.breakpoints.down('sm')]: {
@@ -80,10 +82,14 @@ const Component = {
80
82
  '& .SCCourseDashboard-info': {
81
83
  flex: 1,
82
84
  gap: '6px',
83
- border: `1px solid ${theme.palette.grey['300']}`,
85
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
86
+ ? `1px solid ${theme.palette.grey[800]}`
87
+ : `1px solid ${theme.palette.grey[300]}`,
84
88
  borderRadius: '5px',
85
89
  padding: theme.spacing('17px', 3, '19px'),
86
- backgroundColor: theme.palette.common.white,
90
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
91
+ ? theme.palette.background.paper
92
+ : theme.palette.common.white,
87
93
  '& .SCCourseParticipantsButton-root': {
88
94
  justifyContent: 'flex-start',
89
95
  padding: 0
@@ -91,7 +97,9 @@ const Component = {
91
97
  }
92
98
  },
93
99
  '& .SCCourseDashboard-tab-list': {
94
- borderBottom: `1px solid ${theme.palette.grey['300']}`,
100
+ borderBottom: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
101
+ ? `1px solid ${theme.palette.grey[800]}`
102
+ : `1px solid ${theme.palette.grey[300]}`,
95
103
  '& .SCCourseDashboard-tab': {
96
104
  textTransform: 'inherit'
97
105
  },
@@ -110,8 +118,12 @@ const Component = {
110
118
  }
111
119
  },
112
120
  '& .SCCourseDashboard-comments-container': {
113
- backgroundColor: theme.palette.common.white,
114
- border: `1px solid ${theme.palette.grey['300']}`,
121
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
122
+ ? theme.palette.background.paper
123
+ : theme.palette.common.white,
124
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
125
+ ? `1px solid ${theme.palette.grey[800]}`
126
+ : `1px solid ${theme.palette.grey[300]}`,
115
127
  borderRadius: '5px',
116
128
  padding: theme.spacing(1),
117
129
  [theme.breakpoints.up('sm')]: {
@@ -139,7 +151,7 @@ const Component = {
139
151
  width: '5px',
140
152
  height: '5px',
141
153
  borderRadius: '9999px',
142
- backgroundColor: theme.palette.grey['600']
154
+ backgroundColor: theme.palette.grey[600]
143
155
  }
144
156
  }
145
157
  },
@@ -161,7 +173,12 @@ const Component = {
161
173
  flexDirection: 'row',
162
174
  alignItems: 'center',
163
175
  justifyContent: 'space-between',
164
- backgroundColor: theme.palette.common.white,
176
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
177
+ ? lighten(theme.palette.text.primary, 0.5)
178
+ : darken(theme.palette.text.primary, 0.5),
179
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
180
+ ? theme.palette.background.paper
181
+ : theme.palette.common.white,
165
182
  padding: '6px',
166
183
  '& .SCCourseDashboard-user': {
167
184
  flexDirection: 'row',
@@ -188,8 +205,12 @@ const Component = {
188
205
  },
189
206
  '& .SCBuyButton-request-root': {
190
207
  '&:hover, &:active': {
191
- backgroundColor: theme.palette.common.white,
192
- color: theme.palette.primary.main,
208
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
209
+ ? theme.palette.background.paper
210
+ : theme.palette.common.white,
211
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
212
+ ? lighten(theme.palette.text.primary, 0.5)
213
+ : darken(theme.palette.text.primary, 0.5),
193
214
  border: `1px solid ${theme.palette.primary.main}`,
194
215
  '& .MuiIcon-root': {
195
216
  color: theme.palette.primary.main
@@ -202,17 +223,23 @@ const Component = {
202
223
  flexDirection: 'row',
203
224
  alignItems: 'center',
204
225
  gap: '6px',
205
- border: `1px solid ${theme.palette.grey['300']}`,
226
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
227
+ ? `1px solid ${theme.palette.grey[800]}`
228
+ : `1px solid ${theme.palette.grey[300]}`,
206
229
  borderBottom: 'unset',
207
230
  borderTopLeftRadius: '5px',
208
231
  borderTopRightRadius: '5px',
209
232
  padding: '19px 24px',
210
- backgroundColor: theme.palette.common.white,
233
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
234
+ ? theme.palette.background.paper
235
+ : theme.palette.common.white,
211
236
  '& .SCCourseDashboard-circle': {
212
237
  width: '6px',
213
238
  height: '6px',
214
239
  borderRadius: 9999,
215
- backgroundColor: theme.palette.common.black
240
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
241
+ ? theme.palette.common.white
242
+ : theme.palette.common.black
216
243
  }
217
244
  },
218
245
  '& .SCCourseDashboard-margin': {
@@ -221,10 +248,14 @@ const Component = {
221
248
  },
222
249
  '& .SCCourseDashboard-box': {
223
250
  gap: '13px',
224
- border: `1px solid ${theme.palette.grey['300']}`,
251
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
252
+ ? `1px solid ${theme.palette.grey[800]}`
253
+ : `1px solid ${theme.palette.grey[300]}`,
225
254
  borderRadius: '5px',
226
255
  padding: '11px 24px',
227
- backgroundColor: theme.palette.common.white
256
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
257
+ ? theme.palette.background.paper
258
+ : theme.palette.common.white
228
259
  },
229
260
  '& .SCCourseDashboard-percentage-wrapper': {
230
261
  justifyContent: 'space-between',
@@ -235,7 +266,7 @@ const Component = {
235
266
  },
236
267
  '& .SCCourseDashboard-progress': {
237
268
  borderRadius: '28px',
238
- backgroundColor: theme.palette.grey['300']
269
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? theme.palette.grey[800] : theme.palette.grey[300]
239
270
  },
240
271
  '& .SCCourseDashboard-completed-wrapper': {
241
272
  flexDirection: 'row',
@@ -304,7 +335,9 @@ const Component = {
304
335
  '& .SCCourseDashboard-info': {
305
336
  flex: 1,
306
337
  gap: '6px',
307
- border: `1px solid ${theme.palette.grey['300']}`,
338
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
339
+ ? `1px solid ${theme.palette.grey[800]}`
340
+ : `1px solid ${theme.palette.grey[300]}`,
308
341
  borderRadius: '5px',
309
342
  padding: theme.spacing('17px', 3, '19px'),
310
343
  '& .SCCourseParticipantsButton-root': {
@@ -318,7 +351,9 @@ const Component = {
318
351
  alignItems: 'center',
319
352
  justifyContent: 'center',
320
353
  gap: theme.spacing(4),
321
- borderBottom: `1px solid ${theme.palette.grey['300']}`,
354
+ borderBottom: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
355
+ ? `1px solid ${theme.palette.grey[800]}`
356
+ : `1px solid ${theme.palette.grey[300]}`,
322
357
  padding: theme.spacing('12px 0')
323
358
  }
324
359
  },
@@ -345,7 +380,9 @@ const Component = {
345
380
  },
346
381
  '& .SCCourseDashboard-box': {
347
382
  gap: '13px',
348
- border: `1px solid ${theme.palette.grey['300']}`,
383
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
384
+ ? `1px solid ${theme.palette.grey[800]}`
385
+ : `1px solid ${theme.palette.grey[300]}`,
349
386
  borderRadius: '5px',
350
387
  padding: '11px 24px'
351
388
  },
@@ -360,7 +397,9 @@ const Component = {
360
397
  flexDirection: 'row',
361
398
  alignItems: 'center',
362
399
  gap: '6px',
363
- border: `1px solid ${theme.palette.grey['300']}`,
400
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
401
+ ? `1px solid ${theme.palette.grey[800]}`
402
+ : `1px solid ${theme.palette.grey[300]}`,
364
403
  borderBottom: 'unset',
365
404
  borderTopLeftRadius: '5px',
366
405
  borderTopRightRadius: '5px',
package/lib/esm/components/SCCourseForm.d.ts CHANGED
@@ -4,7 +4,7 @@ declare const Component: {
4
4
  theme: any;
5
5
  }) => {
6
6
  '& .SCCourseForm-contrast-color': {
7
- color: any;
7
+ color: string;
8
8
  };
9
9
  '& .SCCourseForm-cover': {
10
10
  position: string;
package/lib/esm/components/SCCourseForm.js CHANGED
@@ -1,9 +1,11 @@
1
- import { alpha, getContrastRatio } from '@mui/material';
1
+ import { alpha, darken, getContrastRatio, lighten } from '@mui/material';
2
2
  const Component = {
3
3
  styleOverrides: {
4
4
  root: ({ theme }) => ({
5
5
  '& .SCCourseForm-contrast-color': {
6
- color: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5 ? theme.palette.common.white : undefined
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)
7
9
  },
8
10
  '& .SCCourseForm-cover': {
9
11
  position: 'relative',
@@ -27,8 +29,12 @@ const Component = {
27
29
  },
28
30
  '& .SCCourseForm-form': {
29
31
  '&.SCCourseForm-step-customization': {
30
- backgroundColor: theme.palette.common.white,
31
- border: `1px solid ${theme.palette.grey['300']}`,
32
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
33
+ ? theme.palette.background.paper
34
+ : theme.palette.common.white,
35
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
36
+ ? `1px solid ${theme.palette.grey[800]}`
37
+ : `1px solid ${theme.palette.grey[300]}`,
32
38
  borderBottom: 'unset',
33
39
  borderRadius: '5px',
34
40
  borderBottomLeftRadius: 'unset',
@@ -45,7 +51,9 @@ const Component = {
45
51
  marginTop: theme.spacing(1)
46
52
  },
47
53
  '& .SCCourseForm-edit-root': {
48
- backgroundColor: theme.palette.common.white,
54
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
55
+ ? theme.palette.background.paper
56
+ : theme.palette.common.white,
49
57
  marginTop: theme.spacing(1),
50
58
  '& .SCCourseForm-edit-card': {
51
59
  display: 'flex',
@@ -111,10 +119,16 @@ const Component = {
111
119
  gap: theme.spacing(2.5),
112
120
  marginTop: theme.spacing(1.5),
113
121
  '& .SCCourseForm-selected': {
114
- backgroundColor: alpha(theme.palette.success.main, theme.palette.action.selectedOpacity),
115
- border: `1px solid ${theme.palette.success.main} !important`,
122
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
123
+ ? alpha(theme.palette.success.dark, 0.5)
124
+ : alpha(theme.palette.success.main, theme.palette.action.selectedOpacity),
125
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
126
+ ? `1px solid ${theme.palette.success.dark} !important`
127
+ : `1px solid ${theme.palette.success.main} !important`,
116
128
  '&:hover': {
117
- backgroundColor: alpha(theme.palette.success.main, theme.palette.action.selectedOpacity)
129
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
130
+ ? `${alpha(theme.palette.success.dark, 0.8)} !important`
131
+ : `${alpha(theme.palette.success.main, theme.palette.action.selectedOpacity)} !important`
118
132
  }
119
133
  },
120
134
  '& .SCCourseForm-disabled': {
@@ -123,10 +137,12 @@ const Component = {
123
137
  },
124
138
  '& .MuiCard-root': {
125
139
  boxShadow: 'none',
126
- border: `1px solid ${theme.palette.grey[300]}`,
140
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
141
+ ? `1px solid ${theme.palette.grey[800]}`
142
+ : `1px solid ${theme.palette.grey[300]}`,
127
143
  borderRadius: '10px',
128
144
  '&:hover': {
129
- backgroundColor: theme.palette.grey[200]
145
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? theme.palette.grey[900] : theme.palette.grey[200]
130
146
  },
131
147
  '& .MuiCardContent-root': {
132
148
  '& .MuiTypography-h5': {
@@ -153,8 +169,12 @@ const Component = {
153
169
  justifyContent: 'flex-end',
154
170
  gap: theme.spacing(2),
155
171
  '&.SCCourseForm-step-customization': {
156
- backgroundColor: theme.palette.common.white,
157
- border: `1px solid ${theme.palette.grey['300']}`,
172
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
173
+ ? theme.palette.background.paper
174
+ : theme.palette.common.white,
175
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
176
+ ? `1px solid ${theme.palette.grey[800]}`
177
+ : `1px solid ${theme.palette.grey[300]}`,
158
178
  borderTop: 'unset',
159
179
  borderRadius: '5px',
160
180
  borderTopLeftRadius: 'unset',
@@ -170,7 +190,9 @@ const Component = {
170
190
  },
171
191
  '& .MuiDivider-root': {
172
192
  marginTop: theme.spacing(2),
173
- border: `1px solid ${alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`
193
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
194
+ ? `1px solid ${alpha(theme.palette.primary.dark, 0.5)}`
195
+ : `1px solid ${alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`
174
196
  },
175
197
  '& .MuiDialogTitle-root': {
176
198
  '& span': {
package/lib/esm/components/SCCourseParticipantsButton.d.ts CHANGED
@@ -11,12 +11,15 @@ declare const Component: {
11
11
  '&:hover': {
12
12
  backgroundColor: string;
13
13
  };
14
+ '& .SCCourseParticipantsButton-contrast-color': {
15
+ color: string;
16
+ };
14
17
  '& .MuiAvatarGroup-root': {
15
18
  '&:not(.SCAvatarCourseSkeleton-root) .MuiAvatar-root': {
16
19
  '&.MuiAvatar-colorDefault': {
17
20
  marginLeft: number;
18
21
  backgroundColor: string;
19
- color: any;
22
+ color: string;
20
23
  border: string;
21
24
  borderRadius: number;
22
25
  padding: number;
@@ -35,7 +38,6 @@ declare const Component: {
35
38
  };
36
39
  };
37
40
  '& .SCCourseParticipantsButton-participants': {
38
- color: any;
39
41
  '& .MuiIcon-root': {
40
42
  marginRight: any;
41
43
  };
package/lib/esm/components/SCCourseParticipantsButton.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, enrolled }) => ({
@@ -8,12 +9,19 @@ const Component = {
8
9
  '&:hover': {
9
10
  backgroundColor: 'unset'
10
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)
16
+ },
11
17
  '& .MuiAvatarGroup-root': {
12
18
  '&:not(.SCAvatarCourseSkeleton-root) .MuiAvatar-root': {
13
19
  '&.MuiAvatar-colorDefault': {
14
20
  marginLeft: 0,
15
21
  backgroundColor: 'transparent',
16
- color: theme.palette.primary.main,
22
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
23
+ ? lighten(theme.palette.common.white, 0.5)
24
+ : darken(theme.palette.common.white, 0.5),
17
25
  border: '0 none',
18
26
  borderRadius: 0,
19
27
  padding: 1
@@ -32,7 +40,6 @@ const Component = {
32
40
  }
33
41
  },
34
42
  '& .SCCourseParticipantsButton-participants': {
35
- color: theme.palette.text.primary,
36
43
  '& .MuiIcon-root': {
37
44
  marginRight: theme.spacing(1)
38
45
  }
package/lib/esm/components/SCCourseUsersTable.d.ts CHANGED
@@ -10,10 +10,16 @@ declare const Component: {
10
10
  borderRadius: string;
11
11
  padding: any;
12
12
  backgroundColor: any;
13
+ '& .SCCourseUsersTable-contrast-color': {
14
+ color: string;
15
+ };
13
16
  '& .SCCourseUsersTable-search': {
14
17
  '& > .MuiInputBase-root': {
15
18
  borderBottomLeftRadius: string;
16
19
  borderBottomRightRadius: string;
20
+ '& > input': {
21
+ color: string;
22
+ };
17
23
  };
18
24
  '& .SCCourseUsersTable-end-adornment-wrapper': {
19
25
  flexDirection: string;
@@ -64,10 +70,16 @@ declare const Component: {
64
70
  dialogRoot: ({ theme }: {
65
71
  theme: any;
66
72
  }) => {
73
+ '& .MuiDialogTitle-root': {
74
+ color: string;
75
+ };
67
76
  '& .MuiDialogContent-root': {
68
77
  [x: number]: {
69
78
  paddingBottom: string;
70
79
  };
80
+ '& .SCCourseUsersTable-contrast-color': {
81
+ color: string;
82
+ };
71
83
  '& .SCCourseUsersTable-content-wrapper': {
72
84
  [x: number]: {
73
85
  marginTop: string;
package/lib/esm/components/SCCourseUsersTable.js CHANGED
@@ -1,17 +1,32 @@
1
+ import { darken, getContrastRatio, lighten } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  root: ({ theme }) => ({
4
- border: `1px solid ${theme.palette.grey['300']}`,
5
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
6
+ ? `1px solid ${theme.palette.grey[800]}`
7
+ : `1px solid ${theme.palette.grey[300]}`,
5
8
  borderRadius: '5px',
6
9
  padding: theme.spacing(1),
7
- backgroundColor: theme.palette.common.white,
10
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
11
+ ? theme.palette.background.paper
12
+ : theme.palette.common.white,
8
13
  [theme.breakpoints.up('sm')]: {
9
14
  padding: theme.spacing(2)
10
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)
20
+ },
11
21
  '& .SCCourseUsersTable-search': {
12
22
  '& > .MuiInputBase-root': {
13
23
  borderBottomLeftRadius: 'unset',
14
- borderBottomRightRadius: 'unset'
24
+ borderBottomRightRadius: 'unset',
25
+ '& > input': {
26
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
27
+ ? lighten(theme.palette.common.white, 0.5)
28
+ : darken(theme.palette.common.white, 0.5)
29
+ }
15
30
  },
16
31
  '& .SCCourseUsersTable-end-adornment-wrapper': {
17
32
  flexDirection: 'row',
@@ -39,7 +54,7 @@ const Component = {
39
54
  '& .SCCourseUsersTable-progress': {
40
55
  width: '100%',
41
56
  borderRadius: '28px',
42
- backgroundColor: theme.palette.grey['300'],
57
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? theme.palette.grey[800] : theme.palette.grey[300],
43
58
  [theme.breakpoints.down('sm')]: {
44
59
  display: 'none'
45
60
  }
@@ -58,10 +73,20 @@ const Component = {
58
73
  paddingTop: theme.spacing(3)
59
74
  }),
60
75
  dialogRoot: ({ theme }) => ({
76
+ '& .MuiDialogTitle-root': {
77
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
78
+ ? lighten(theme.palette.common.white, 0.5)
79
+ : darken(theme.palette.common.white, 0.5)
80
+ },
61
81
  '& .MuiDialogContent-root': {
62
82
  [theme.breakpoints.down('md')]: {
63
83
  paddingBottom: '20px'
64
84
  },
85
+ '& .SCCourseUsersTable-contrast-color': {
86
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
87
+ ? lighten(theme.palette.common.white, 0.5)
88
+ : darken(theme.palette.common.white, 0.5)
89
+ },
65
90
  '& .SCCourseUsersTable-content-wrapper': {
66
91
  gap: theme.spacing(1),
67
92
  [theme.breakpoints.down('md')]: {
package/lib/esm/components/SCEditCourse.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const Component: {
7
7
  marginBottom: string;
8
8
  };
9
9
  '& .SCEditCourse-contrast-color': {
10
- color: any;
10
+ color: string;
11
11
  };
12
12
  '& .SCEditCourse-header': {
13
13
  [x: number]: {
@@ -167,10 +167,9 @@ declare const Component: {
167
167
  alignItems: string;
168
168
  gap: string;
169
169
  '& .SCEditCourse-change-lesson-status-published-wrapper': {
170
- color: any;
171
170
  backgroundColor: any;
172
171
  '& .MuiIcon-root': {
173
- color: any;
172
+ color: string;
174
173
  };
175
174
  };
176
175
  '& .SCEditCourse-change-lesson-status-icon-draft': {