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

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