@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/SCEditCourse.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
  '& .SCEditCourse-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
  '& .SCEditCourse-header': {
12
14
  flexDirection: 'row',
@@ -17,7 +19,9 @@ const Component = {
17
19
  }
18
20
  },
19
21
  '& .SCEditCourse-tab-list': {
20
- borderBottom: `1px solid ${theme.palette.grey['300']}`,
22
+ borderBottom: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
23
+ ? `1px solid ${theme.palette.grey[800]}`
24
+ : `1px solid ${theme.palette.grey[300]}`,
21
25
  '& .SCEditCourse-tab': {
22
26
  textTransform: 'inherit'
23
27
  },
@@ -63,16 +67,22 @@ const Component = {
63
67
  }
64
68
  },
65
69
  '& .SCEditCourse-lesson-empty-status': {
66
- border: `1px solid ${theme.palette.grey[300]}`,
70
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
71
+ ? `1px solid ${theme.palette.grey[800]}`
72
+ : `1px solid ${theme.palette.grey[300]}`,
67
73
  borderRadius: '5px'
68
74
  },
69
75
  '& .SCEditCourse-empty-status-button': {
70
76
  marginTop: '7px'
71
77
  },
72
78
  '& .SCEditCourse-lessons-inner-wrapper': {
73
- border: `1px solid ${theme.palette.grey[300]}`,
79
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
80
+ ? `1px solid ${theme.palette.grey[800]}`
81
+ : `1px solid ${theme.palette.grey[300]}`,
74
82
  borderRadius: '5px',
75
- backgroundColor: theme.palette.common.white,
83
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
84
+ ? theme.palette.background.paper
85
+ : theme.palette.common.white,
76
86
  marginTop: '9px',
77
87
  padding: theme.spacing(1),
78
88
  [theme.breakpoints.up('sm')]: {
@@ -83,11 +93,15 @@ const Component = {
83
93
  alignItems: 'center',
84
94
  justifyContent: 'space-between',
85
95
  padding: theme.spacing(2),
86
- border: `1px solid ${theme.palette.grey[300]}`,
96
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
97
+ ? `1px solid ${theme.palette.grey[800]}`
98
+ : `1px solid ${theme.palette.grey[300]}`,
87
99
  borderBottom: 'unset',
88
100
  borderTopLeftRadius: '5px',
89
101
  borderTopRightRadius: '5px',
90
- backgroundColor: theme.palette.common.white,
102
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
103
+ ? theme.palette.background.paper
104
+ : theme.palette.common.white,
91
105
  '& .SCEditCourse-lessons-sections': {
92
106
  flexDirection: 'row',
93
107
  alignItems: 'center',
@@ -96,7 +110,9 @@ const Component = {
96
110
  width: '6px',
97
111
  height: '6px',
98
112
  borderRadius: 9999,
99
- backgroundColor: theme.palette.common.black
113
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
114
+ ? theme.palette.common.white
115
+ : theme.palette.common.black
100
116
  }
101
117
  },
102
118
  '& .SCEditCourse-section-button': {
@@ -108,10 +124,14 @@ const Component = {
108
124
  },
109
125
  '& .SCEditCourse-table-container': {
110
126
  width: 'auto',
111
- border: `1px solid ${theme.palette.grey[300]}`,
127
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
128
+ ? `1px solid ${theme.palette.grey[800]}`
129
+ : `1px solid ${theme.palette.grey[300]}`,
112
130
  borderBottomLeftRadius: '5px',
113
131
  borderBottomRightRadius: '5px',
114
- backgroundColor: theme.palette.common.white,
132
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
133
+ ? theme.palette.background.paper
134
+ : theme.palette.common.white,
115
135
  '& .SCEditCourse-table': {
116
136
  '& .SCEditCourse-cell-width': {
117
137
  width: '3%'
@@ -140,7 +160,9 @@ const Component = {
140
160
  gap: '10px'
141
161
  },
142
162
  '& .SCEditCourse-table-body-accordion': {
143
- backgroundColor: theme.palette.grey[200]
163
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
164
+ ? theme.palette.grey[800]
165
+ : theme.palette.grey[200]
144
166
  },
145
167
  '& .SCEditCourse-edit-mode-wrapper': {
146
168
  flexDirection: 'row',
@@ -166,17 +188,20 @@ const Component = {
166
188
  gap: '22px'
167
189
  },
168
190
  '& .SCEditCourse-change-lesson-status-published-wrapper': {
169
- color: theme.palette.common.white,
170
- backgroundColor: theme.palette.primary.main,
191
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
192
+ ? theme.palette.primary.dark
193
+ : theme.palette.primary.main,
171
194
  '& .MuiIcon-root': {
172
- color: theme.palette.common.white
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)
173
198
  }
174
199
  },
175
200
  '& .SCEditCourse-change-lesson-status-icon-draft': {
176
201
  width: '20px',
177
202
  height: '20px',
178
203
  borderRadius: 9999,
179
- backgroundColor: theme.palette.grey['600']
204
+ backgroundColor: theme.palette.grey[600]
180
205
  }
181
206
  },
182
207
  '& .SCEditCourse-table-body-collapse-wrapper': {
@@ -196,10 +221,14 @@ const Component = {
196
221
  marginBottom: theme.spacing(2)
197
222
  },
198
223
  '& .SCEditCourse-options-container': {
199
- border: `1px solid ${theme.palette.grey['300']}`,
224
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
225
+ ? `1px solid ${theme.palette.grey[800]}`
226
+ : `1px solid ${theme.palette.grey[300]}`,
200
227
  borderRadius: '5px',
201
228
  padding: theme.spacing(1),
202
- backgroundColor: theme.palette.common.white,
229
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
230
+ ? theme.palette.background.paper
231
+ : theme.palette.common.white,
203
232
  [theme.breakpoints.up('sm')]: {
204
233
  padding: theme.spacing(2)
205
234
  },
@@ -241,7 +270,9 @@ const Component = {
241
270
  alignItems: 'center',
242
271
  justifyContent: 'center',
243
272
  gap: theme.spacing(4),
244
- borderBottom: `1px solid ${theme.palette.grey['300']}`,
273
+ borderBottom: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
274
+ ? `1px solid ${theme.palette.grey[800]}`
275
+ : `1px solid ${theme.palette.grey[300]}`,
245
276
  padding: theme.spacing('12px 0'),
246
277
  marginBottom: '13px'
247
278
  },
@@ -263,9 +294,13 @@ const Component = {
263
294
  }
264
295
  },
265
296
  '& .SCEditCourse-lessons-inner-wrapper': {
266
- border: `1px solid ${theme.palette.grey[300]}`,
297
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
298
+ ? `1px solid ${theme.palette.grey[800]}`
299
+ : `1px solid ${theme.palette.grey[300]}`,
267
300
  borderRadius: '5px',
268
- backgroundColor: theme.palette.common.white,
301
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
302
+ ? theme.palette.background.paper
303
+ : theme.palette.common.white,
269
304
  marginTop: '9px',
270
305
  padding: theme.spacing(1),
271
306
  [theme.breakpoints.up('sm')]: {
@@ -276,12 +311,16 @@ const Component = {
276
311
  alignItems: 'center',
277
312
  justifyContent: 'space-between',
278
313
  padding: theme.spacing(2),
279
- border: `1px solid ${theme.palette.grey[300]}`,
314
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
315
+ ? `1px solid ${theme.palette.grey[800]}`
316
+ : `1px solid ${theme.palette.grey[300]}`,
280
317
  borderRadius: '5px'
281
318
  },
282
319
  '& .SCEditCourse-table-container': {
283
320
  width: 'auto',
284
- border: `1px solid ${theme.palette.grey[300]}`,
321
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
322
+ ? `1px solid ${theme.palette.grey[800]}`
323
+ : `1px solid ${theme.palette.grey[300]}`,
285
324
  borderBottomLeftRadius: '5px',
286
325
  borderBottomRightRadius: '5px',
287
326
  '& .SCEditCourse-margin': {
@@ -304,10 +343,14 @@ const Component = {
304
343
  marginBottom: theme.spacing(2)
305
344
  },
306
345
  '& .SCEditCourse-options-container': {
307
- border: `1px solid ${theme.palette.grey['300']}`,
346
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
347
+ ? `1px solid ${theme.palette.grey[800]}`
348
+ : `1px solid ${theme.palette.grey[300]}`,
308
349
  borderRadius: '5px',
309
350
  paddingBottom: '10px',
310
- backgroundColor: theme.palette.common.white,
351
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
352
+ ? theme.palette.background.paper
353
+ : theme.palette.common.white,
311
354
  '& .SCEditCourse-options-wrapper': {
312
355
  gap: theme.spacing(5),
313
356
  maxWidth: '600px',
package/lib/esm/components/SCEmptyStatus.d.ts CHANGED
@@ -9,6 +9,9 @@ declare const Component: {
9
9
  padding: any;
10
10
  marginTop: string;
11
11
  backgroundColor: any;
12
+ '& .SCEmptyStatus-contrast-color': {
13
+ color: string;
14
+ };
12
15
  '& .SCEmptyStatus-box': {
13
16
  width: string;
14
17
  height: string;
package/lib/esm/components/SCEmptyStatus.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 }) => ({
@@ -6,11 +7,20 @@ const Component = {
6
7
  gap: '10px',
7
8
  padding: theme.spacing(3),
8
9
  marginTop: '9px',
9
- 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,
13
+ '& .SCEmptyStatus-contrast-color': {
14
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
15
+ ? lighten(theme.palette.common.white, 0.5)
16
+ : darken(theme.palette.common.white, 0.5)
17
+ },
10
18
  '& .SCEmptyStatus-box': {
11
19
  width: '130px',
12
20
  height: '130px',
13
- border: `2px solid ${theme.palette.grey[300]}`,
21
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
22
+ ? `2px solid ${theme.palette.grey[800]}`
23
+ : `2px solid ${theme.palette.grey[300]}`,
14
24
  borderRadius: '20px',
15
25
  marginBottom: '10px',
16
26
  '& .SCEmptyStatus-rotated-box': {
package/lib/esm/components/SCEventForm.js CHANGED
@@ -1,4 +1,4 @@
1
- import { alpha } from '@mui/system';
1
+ import { alpha, getContrastRatio } from '@mui/material';
2
2
  const Component = {
3
3
  styleOverrides: {
4
4
  root: ({ theme }) => ({
@@ -89,7 +89,9 @@ const Component = {
89
89
  },
90
90
  '& .MuiDivider-root': {
91
91
  marginTop: theme.spacing(2),
92
- border: `1px solid ${alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`
92
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
93
+ ? `1px solid ${alpha(theme.palette.primary.dark, 0.5)}`
94
+ : `1px solid ${alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`
93
95
  },
94
96
  '& .MuiDialogTitle-root': {
95
97
  '& span': {
@@ -99,7 +101,9 @@ const Component = {
99
101
  },
100
102
  '& .SCEventForm-event-address-root': {
101
103
  marginTop: theme.spacing(2),
102
- backgroundColor: theme.palette.grey['A200'],
104
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
105
+ ? theme.palette.background.paper
106
+ : theme.palette.grey['A200'],
103
107
  borderRadius: 5,
104
108
  '& .SCEventForm-event-address-tabs': {
105
109
  padding: theme.spacing(0, 2, 0, 2),
package/lib/esm/components/SCEventMembersWidget.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { getContrastRatio } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  root: ({ theme }) => ({
@@ -7,7 +8,9 @@ const Component = {
7
8
  marginBottom: '18px'
8
9
  },
9
10
  '& .SCEventMembersWidget-tabs-wrapper': {
10
- borderBottom: `1px solid ${theme.palette.grey['300']}`,
11
+ borderBottom: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
12
+ ? `1px solid ${theme.palette.grey[800]}`
13
+ : `1px solid ${theme.palette.grey[300]}`,
11
14
  '& .SCEventMembersWidget-tab-label-wrapper': {
12
15
  gap: '2px',
13
16
  alignItems: 'center'
@@ -34,7 +37,9 @@ const Component = {
34
37
  marginBottom: '18px'
35
38
  },
36
39
  '& .SCEventMembersWidget-tabs-wrapper': {
37
- borderBottom: `1px solid ${theme.palette.grey['300']}`,
40
+ borderBottom: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
41
+ ? `1px solid ${theme.palette.grey[800]}`
42
+ : `1px solid ${theme.palette.grey[300]}`,
38
43
  '& .SCEventMembersWidget-tab-label-wrapper': {
39
44
  gap: '2px',
40
45
  alignItems: 'center'
package/lib/esm/components/SCFeedObject.d.ts CHANGED
@@ -231,6 +231,7 @@ declare const Component: {
231
231
  };
232
232
  '& hr': {
233
233
  margin: string;
234
+ borderColor: string;
234
235
  };
235
236
  '& a': {
236
237
  color: any;
@@ -377,7 +378,7 @@ declare const Component: {
377
378
  fontWeight: any;
378
379
  marginTop: any;
379
380
  marginBottom: number;
380
- color: any;
381
+ color: string;
381
382
  '&:hover': {
382
383
  color: string;
383
384
  };
@@ -386,7 +387,7 @@ declare const Component: {
386
387
  borderColor: any;
387
388
  };
388
389
  '& .SCFeedObject-action-vote-button, & .SCFeedObject-action-comment-button, & .SCFeedObject-action-share-button, & .SCReactionAction-button': {
389
- color: any;
390
+ color: string;
390
391
  marginTop: any;
391
392
  marginBottom: any;
392
393
  borderRadius: string;
package/lib/esm/components/SCFeedObject.js CHANGED
@@ -1,4 +1,4 @@
1
- import { alpha } from '@mui/system';
1
+ import { alpha, darken, getContrastRatio, lighten } from '@mui/material';
2
2
  const Component = {
3
3
  styleOverrides: {
4
4
  root: ({ theme }) => ({
@@ -84,7 +84,9 @@ const Component = {
84
84
  textTransform: 'initial'
85
85
  }
86
86
  },
87
- borderBottom: '1px solid rgba(221, 221, 221, 1)',
87
+ borderBottom: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5
88
+ ? '1px solid rgba(255, 255, 255, 0.12)'
89
+ : '1px solid rgba(221, 221, 221, 1)',
88
90
  margin: theme.spacing(0.5, 2, 0, 2)
89
91
  },
90
92
  '& .SCFeedObject-content': {
@@ -161,7 +163,9 @@ const Component = {
161
163
  borderRadius: theme.shape.borderRadius
162
164
  },
163
165
  '& .SCFeedObject-category': {
164
- borderBottom: '1px solid rgba(221, 221, 221, 1)',
166
+ borderBottom: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
167
+ ? '1px solid rgba(255, 255, 255, 0.12)'
168
+ : '1px solid rgba(221, 221, 221, 1)',
165
169
  margin: theme.spacing(0, 2),
166
170
  '& .SCFeedObject-group, & .SCFeedObject-event': {
167
171
  borderBottom: 'none',
@@ -231,7 +235,10 @@ const Component = {
231
235
  display: 'block'
232
236
  },
233
237
  '& hr': {
234
- margin: '1em 0'
238
+ margin: '1em 0',
239
+ borderColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
240
+ ? 'rgba(255, 255, 255, 0.12)'
241
+ : 'rgba(221, 221, 221, 1)'
235
242
  },
236
243
  '& a': {
237
244
  color: theme.palette.text.secondary,
@@ -376,7 +383,9 @@ const Component = {
376
383
  fontWeight: theme.typography.fontWeightRegular,
377
384
  marginTop: theme.spacing(0),
378
385
  marginBottom: 0,
379
- color: theme.palette.primary.main,
386
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
387
+ ? lighten(theme.palette.text.primary, 0.5)
388
+ : darken(theme.palette.text.primary, 0.5),
380
389
  '&:hover': {
381
390
  color: 'inherit'
382
391
  }
@@ -385,7 +394,9 @@ const Component = {
385
394
  borderColor: theme.palette.grey[300]
386
395
  },
387
396
  '& .SCFeedObject-action-vote-button, & .SCFeedObject-action-comment-button, & .SCFeedObject-action-share-button, & .SCReactionAction-button': {
388
- color: theme.palette.primary.main,
397
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
398
+ ? lighten(theme.palette.text.primary, 0.5)
399
+ : darken(theme.palette.text.primary, 0.5),
389
400
  marginTop: theme.spacing(-0.5),
390
401
  marginBottom: theme.spacing(0.5),
391
402
  borderRadius: '50%',
package/lib/esm/components/SCLessonDrawer.d.ts CHANGED
@@ -8,6 +8,9 @@ declare const Component: {
8
8
  width: string;
9
9
  flexShrink?: undefined;
10
10
  };
11
+ '& .SCLessonDrawer-contrast-color': {
12
+ color: string;
13
+ };
11
14
  '& h4': {
12
15
  fontWeight: any;
13
16
  };
package/lib/esm/components/SCLessonDrawer.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 }) => ({
@@ -8,6 +9,11 @@ const Component = {
8
9
  [theme.breakpoints.up('sm')]: {
9
10
  width: '300px'
10
11
  },
12
+ '& .SCLessonDrawer-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
  '& h4': {
12
18
  fontWeight: theme.typography.fontWeightMedium
13
19
  },
@@ -16,7 +22,9 @@ const Component = {
16
22
  [theme.breakpoints.up('sm')]: {
17
23
  width: '300px'
18
24
  },
19
- backgroundColor: theme.palette.grey[200]
25
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
26
+ ? theme.palette.background.paper
27
+ : theme.palette.grey[200]
20
28
  },
21
29
  '& .SCLessonDrawer-header': {
22
30
  [theme.breakpoints.up('sm')]: {
package/lib/esm/components/SCLessonEditForm.d.ts CHANGED
@@ -9,6 +9,9 @@ declare const Component: {
9
9
  display: string;
10
10
  flexDirection: string;
11
11
  justifyContent: string;
12
+ '& .SCLessonEditForm-contrast-color': {
13
+ color: string;
14
+ };
12
15
  '& .SCLessonEditForm-form': {
13
16
  display: string;
14
17
  flexDirection: string;
package/lib/esm/components/SCLessonEditForm.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 }) => ({
@@ -9,6 +10,11 @@ const Component = {
9
10
  display: 'flex',
10
11
  flexDirection: 'column',
11
12
  justifyContent: 'space-between',
13
+ '& .SCLessonEditForm-contrast-color': {
14
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
15
+ ? lighten(theme.palette.common.white, 0.5)
16
+ : darken(theme.palette.common.white, 0.5)
17
+ },
12
18
  '& .SCLessonEditForm-form': {
13
19
  display: 'flex',
14
20
  flexDirection: 'column'
package/lib/esm/components/SCLessonReleaseMenu.d.ts CHANGED
@@ -4,6 +4,9 @@ declare const Component: {
4
4
  popoverRoot: ({ theme }: any) => {
5
5
  width: string;
6
6
  borderRadius: string;
7
+ '& .SCLessonReleaseMenu-popover-contrast-color': {
8
+ color: string;
9
+ };
7
10
  '& .MuiPaper-root': {
8
11
  padding: any;
9
12
  };
package/lib/esm/components/SCLessonReleaseMenu.js CHANGED
@@ -1,9 +1,15 @@
1
+ import { darken, getContrastRatio, lighten } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  root: ({ theme }) => ({}),
4
5
  popoverRoot: ({ theme }) => ({
5
6
  width: '260px',
6
7
  borderRadius: '4px',
8
+ '& .SCLessonReleaseMenu-popover-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)
12
+ },
7
13
  '& .MuiPaper-root': {
8
14
  padding: theme.spacing(2)
9
15
  },
package/lib/esm/components/SCLessonTemplate.d.ts CHANGED
@@ -2,6 +2,9 @@ declare const Component: {
2
2
  styleOverrides: {
3
3
  root: () => {};
4
4
  containerRoot: ({ theme, open }: any) => {
5
+ '& .SCLessonTemplate-contrast-color': {
6
+ color: string;
7
+ };
5
8
  '& .SCLessonTemplate-navigation-title': {
6
9
  display: string;
7
10
  alignItems: string;
package/lib/esm/components/SCLessonTemplate.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { darken, getContrastRatio, lighten } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  root: () => ({}),
@@ -9,7 +10,11 @@ const Component = {
9
10
  }), marginRight: 0 }, (open && {
10
11
  [theme.breakpoints.down('md')]: { width: '100%' },
11
12
  width: `calc(100% - 300px)`
12
- })), { '& .SCLessonTemplate-navigation-title': {
13
+ })), { '& .SCLessonTemplate-contrast-color': {
14
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
15
+ ? lighten(theme.palette.common.white, 0.5)
16
+ : darken(theme.palette.common.white, 0.5)
17
+ }, '& .SCLessonTemplate-navigation-title': {
13
18
  display: 'flex',
14
19
  alignItems: 'center',
15
20
  justifyContent: 'space-between',
package/lib/esm/components/SCMediaFile.d.ts CHANGED
@@ -171,6 +171,9 @@ declare const Component: {
171
171
  padding: any;
172
172
  flexDirection: string;
173
173
  gap: string;
174
+ '& .SCMediaFile-contrast-color': {
175
+ color: string;
176
+ };
174
177
  '& .SCMediaFile-image-wrapper': {
175
178
  flexShrink: number;
176
179
  padding: number;
@@ -192,7 +195,6 @@ declare const Component: {
192
195
  };
193
196
  '& .SCMediaFile-subtitle': {
194
197
  textAlign: string;
195
- color: any;
196
198
  };
197
199
  };
198
200
  '& .SCMediaFile-action-wrapper': {
package/lib/esm/components/SCMediaFile.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { darken, getContrastRatio, lighten } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  displayRoot: ({ theme }) => ({
@@ -67,7 +68,9 @@ const Component = {
67
68
  },
68
69
  '& .SCMediaFile-border': {
69
70
  position: 'relative',
70
- border: '2px solid #FFF',
71
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
72
+ ? '2px solid rgba(255, 255, 255, 0.12)'
73
+ : `2px solid ${theme.palette.common.white}`,
71
74
  '&:hover > div': {
72
75
  bottom: 0,
73
76
  height: 'auto'
@@ -164,11 +167,16 @@ const Component = {
164
167
  }),
165
168
  triggerMenuRoot: () => ({}),
166
169
  docRoot: ({ theme }) => ({
167
- border: '1px solid #DDD',
170
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? '1px solid rgba(255, 255, 255, 0.12)' : '1px solid #DDD',
168
171
  borderRadius: '10px',
169
172
  padding: theme.spacing(1),
170
173
  flexDirection: 'row',
171
174
  gap: '8px',
175
+ '& .SCMediaFile-contrast-color': {
176
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
177
+ ? lighten(theme.palette.common.white, 0.5)
178
+ : darken(theme.palette.common.white, 0.5)
179
+ },
172
180
  '& .SCMediaFile-image-wrapper': {
173
181
  flexShrink: 0,
174
182
  padding: 0,
@@ -189,8 +197,7 @@ const Component = {
189
197
  overflow: 'hidden'
190
198
  },
191
199
  '& .SCMediaFile-subtitle': {
192
- textAlign: 'left',
193
- color: theme.palette.grey['600']
200
+ textAlign: 'left'
194
201
  }
195
202
  },
196
203
  '& .SCMediaFile-action-wrapper': {