@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
@@ -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
  displayRoot: ({ theme }) => ({
@@ -69,7 +70,9 @@ const Component = {
69
70
  },
70
71
  '& .SCMediaFile-border': {
71
72
  position: 'relative',
72
- border: '2px solid #FFF',
73
+ border: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
74
+ ? '2px solid rgba(255, 255, 255, 0.12)'
75
+ : `2px solid ${theme.palette.common.white}`,
73
76
  '&:hover > div': {
74
77
  bottom: 0,
75
78
  height: 'auto'
@@ -166,11 +169,16 @@ const Component = {
166
169
  }),
167
170
  triggerMenuRoot: () => ({}),
168
171
  docRoot: ({ theme }) => ({
169
- border: '1px solid #DDD',
172
+ border: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? '1px solid rgba(255, 255, 255, 0.12)' : '1px solid #DDD',
170
173
  borderRadius: '10px',
171
174
  padding: theme.spacing(1),
172
175
  flexDirection: 'row',
173
176
  gap: '8px',
177
+ '& .SCMediaFile-contrast-color': {
178
+ color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
179
+ ? (0, material_1.lighten)(theme.palette.common.white, 0.5)
180
+ : (0, material_1.darken)(theme.palette.common.white, 0.5)
181
+ },
174
182
  '& .SCMediaFile-image-wrapper': {
175
183
  flexShrink: 0,
176
184
  padding: 0,
@@ -191,8 +199,7 @@ const Component = {
191
199
  overflow: 'hidden'
192
200
  },
193
201
  '& .SCMediaFile-subtitle': {
194
- textAlign: 'left',
195
- color: theme.palette.grey['600']
202
+ textAlign: 'left'
196
203
  }
197
204
  },
198
205
  '& .SCMediaFile-action-wrapper': {
@@ -2,6 +2,10 @@ declare const Component: {
2
2
  styleOverrides: {
3
3
  displayRoot: ({ theme }: any) => {
4
4
  marginTop: any;
5
+ '& .react-player__preview': {
6
+ backgroundSize: string;
7
+ backgroundColor: string;
8
+ };
5
9
  '& .SCMediaLink-link': {
6
10
  position: string;
7
11
  backgroundColor: string;
@@ -1,10 +1,14 @@
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
  displayRoot: ({ theme }) => ({
7
7
  marginTop: theme.spacing(2),
8
+ '& .react-player__preview': {
9
+ backgroundSize: 'contain !important',
10
+ backgroundColor: '#000'
11
+ },
8
12
  '& .SCMediaLink-link': {
9
13
  position: 'relative',
10
14
  backgroundColor: '#F5F5F5',
@@ -43,7 +47,7 @@ const Component = {
43
47
  }
44
48
  },
45
49
  '& .SCMediaLink-thumbnail': {
46
- border: `1px solid ${(0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`,
50
+ border: `1px solid ${(0, material_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`,
47
51
  borderRadius: theme.shape.borderRadius * 0.75,
48
52
  paddingTop: theme.spacing(1),
49
53
  margin: theme.spacing(1, 2, 1, 1),
@@ -28,6 +28,7 @@ declare const Component: {
28
28
  border: string;
29
29
  '&.MuiPaper-elevation0': {
30
30
  borderRadius: number;
31
+ backgroundColor: string;
31
32
  };
32
33
  '& .MuiCardContent-root': {
33
34
  padding: any;
@@ -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
  variants: [
6
6
  {
@@ -27,14 +27,15 @@ const Component = {
27
27
  borderRadius: theme.shape.borderRadius
28
28
  },
29
29
  '&.MuiPaper-elevation0': {
30
- borderRadius: 0
30
+ borderRadius: 0,
31
+ backgroundColor: 'rgba(255,255,255,0)'
31
32
  },
32
33
  '& .MuiCardContent-root': {
33
34
  padding: theme.spacing(2.2),
34
35
  '& h5': {
35
36
  fontFamily: theme.typography.fontFamily,
36
37
  fontWeight: theme.typography.fontWeightBold,
37
- color: (0, system_1.darken)(theme.palette.text.primary, 0.5),
38
+ color: (0, material_1.lighten)(theme.palette.text.primary, 0.5),
38
39
  fontSize: '1.143rem'
39
40
  },
40
41
  '& .MuiList-root': {
@@ -249,6 +249,9 @@ declare const theme: {
249
249
  backgroundColor: any;
250
250
  border: string;
251
251
  borderRadius: string;
252
+ '& .SCAccordionLessons-contrast-color': {
253
+ color: string;
254
+ };
252
255
  '& .SCAccordionLessons-empty': {
253
256
  padding: any;
254
257
  };
@@ -808,7 +811,11 @@ declare const theme: {
808
811
  };
809
812
  SCCategoryAutocomplete: {
810
813
  styleOverrides: {
811
- root: ({ theme }: any) => {};
814
+ root: ({ theme }: any) => {
815
+ '& .SCCategoryAutocomplete-contrast-color': {
816
+ color: string;
817
+ };
818
+ };
812
819
  };
813
820
  };
814
821
  SCCategoryFeedTemplate: {
@@ -2162,7 +2169,7 @@ declare const theme: {
2162
2169
  marginBottom: string;
2163
2170
  };
2164
2171
  '& .SCCourseDashboard-contrast-color': {
2165
- color: any;
2172
+ color: string;
2166
2173
  };
2167
2174
  '& .SCCourseDashboard-header': {
2168
2175
  [x: number]: {
@@ -2320,6 +2327,7 @@ declare const theme: {
2320
2327
  flexDirection: string;
2321
2328
  alignItems: string;
2322
2329
  justifyContent: string;
2330
+ color: string;
2323
2331
  backgroundColor: any;
2324
2332
  padding: string;
2325
2333
  '& .SCCourseDashboard-user': {
@@ -2348,7 +2356,7 @@ declare const theme: {
2348
2356
  '& .SCBuyButton-request-root': {
2349
2357
  '&:hover, &:active': {
2350
2358
  backgroundColor: any;
2351
- color: any;
2359
+ color: string;
2352
2360
  border: string;
2353
2361
  '& .MuiIcon-root': {
2354
2362
  color: any;
@@ -2530,7 +2538,9 @@ declare const theme: {
2530
2538
  borderTopRightRadius: string;
2531
2539
  padding: string;
2532
2540
  '& .SCCourseDashboard-circle': {
2533
- width: string;
2541
+ width: string; /**
2542
+ * Export default theme
2543
+ */
2534
2544
  height: string;
2535
2545
  borderRadius: number;
2536
2546
  };
@@ -2684,7 +2694,7 @@ declare const theme: {
2684
2694
  theme: any;
2685
2695
  }) => {
2686
2696
  '& .SCCourseForm-contrast-color': {
2687
- color: any;
2697
+ color: string;
2688
2698
  };
2689
2699
  '& .SCCourseForm-cover': {
2690
2700
  position: string;
@@ -2885,12 +2895,15 @@ declare const theme: {
2885
2895
  '&:hover': {
2886
2896
  backgroundColor: string;
2887
2897
  };
2898
+ '& .SCCourseParticipantsButton-contrast-color': {
2899
+ color: string;
2900
+ };
2888
2901
  '& .MuiAvatarGroup-root': {
2889
2902
  '&:not(.SCAvatarCourseSkeleton-root) .MuiAvatar-root': {
2890
2903
  '&.MuiAvatar-colorDefault': {
2891
2904
  marginLeft: number;
2892
2905
  backgroundColor: string;
2893
- color: any;
2906
+ color: string;
2894
2907
  border: string;
2895
2908
  borderRadius: number;
2896
2909
  padding: number;
@@ -2909,7 +2922,6 @@ declare const theme: {
2909
2922
  };
2910
2923
  };
2911
2924
  '& .SCCourseParticipantsButton-participants': {
2912
- color: any;
2913
2925
  '& .MuiIcon-root': {
2914
2926
  marginRight: any;
2915
2927
  };
@@ -3003,10 +3015,16 @@ declare const theme: {
3003
3015
  borderRadius: string;
3004
3016
  padding: any;
3005
3017
  backgroundColor: any;
3018
+ '& .SCCourseUsersTable-contrast-color': {
3019
+ color: string;
3020
+ };
3006
3021
  '& .SCCourseUsersTable-search': {
3007
3022
  '& > .MuiInputBase-root': {
3008
3023
  borderBottomLeftRadius: string;
3009
3024
  borderBottomRightRadius: string;
3025
+ '& > input': {
3026
+ color: string;
3027
+ };
3010
3028
  };
3011
3029
  '& .SCCourseUsersTable-end-adornment-wrapper': {
3012
3030
  flexDirection: string;
@@ -3057,10 +3075,16 @@ declare const theme: {
3057
3075
  dialogRoot: ({ theme }: {
3058
3076
  theme: any;
3059
3077
  }) => {
3078
+ '& .MuiDialogTitle-root': {
3079
+ color: string;
3080
+ };
3060
3081
  '& .MuiDialogContent-root': {
3061
3082
  [x: number]: {
3062
3083
  paddingBottom: string;
3063
3084
  };
3085
+ '& .SCCourseUsersTable-contrast-color': {
3086
+ color: string;
3087
+ };
3064
3088
  '& .SCCourseUsersTable-content-wrapper': {
3065
3089
  [x: number]: {
3066
3090
  marginTop: string;
@@ -3539,7 +3563,7 @@ declare const theme: {
3539
3563
  marginBottom: string;
3540
3564
  };
3541
3565
  '& .SCEditCourse-contrast-color': {
3542
- color: any;
3566
+ color: string;
3543
3567
  };
3544
3568
  '& .SCEditCourse-header': {
3545
3569
  [x: number]: {
@@ -3699,10 +3723,9 @@ declare const theme: {
3699
3723
  alignItems: string;
3700
3724
  gap: string;
3701
3725
  '& .SCEditCourse-change-lesson-status-published-wrapper': {
3702
- color: any;
3703
3726
  backgroundColor: any;
3704
3727
  '& .MuiIcon-root': {
3705
- color: any;
3728
+ color: string;
3706
3729
  };
3707
3730
  };
3708
3731
  '& .SCEditCourse-change-lesson-status-icon-draft': {
@@ -4194,6 +4217,7 @@ declare const theme: {
4194
4217
  };
4195
4218
  '& hr': {
4196
4219
  margin: string;
4220
+ borderColor: string;
4197
4221
  };
4198
4222
  '& a': {
4199
4223
  color: any;
@@ -4340,7 +4364,7 @@ declare const theme: {
4340
4364
  fontWeight: any;
4341
4365
  marginTop: any;
4342
4366
  marginBottom: number;
4343
- color: any;
4367
+ color: string;
4344
4368
  '&:hover': {
4345
4369
  color: string;
4346
4370
  };
@@ -4349,7 +4373,7 @@ declare const theme: {
4349
4373
  borderColor: any;
4350
4374
  };
4351
4375
  '& .SCFeedObject-action-vote-button, & .SCFeedObject-action-comment-button, & .SCFeedObject-action-share-button, & .SCReactionAction-button': {
4352
- color: any;
4376
+ color: string;
4353
4377
  marginTop: any;
4354
4378
  marginBottom: any;
4355
4379
  borderRadius: string;
@@ -5549,7 +5573,6 @@ declare const theme: {
5549
5573
  padding: any;
5550
5574
  '&:hover': {
5551
5575
  color: any;
5552
- background: string;
5553
5576
  border: string;
5554
5577
  };
5555
5578
  };
@@ -5657,6 +5680,9 @@ declare const theme: {
5657
5680
  width: string;
5658
5681
  flexShrink?: undefined;
5659
5682
  };
5683
+ '& .SCLessonDrawer-contrast-color': {
5684
+ color: string;
5685
+ };
5660
5686
  '& h4': {
5661
5687
  fontWeight: any;
5662
5688
  };
@@ -5891,9 +5917,14 @@ declare const theme: {
5891
5917
  };
5892
5918
  SCCourseCompletedDialog: {
5893
5919
  styleOverrides: {
5894
- root: () => {
5920
+ root: ({ theme }: {
5921
+ theme: any;
5922
+ }) => {
5895
5923
  '& .SCCourseCompletedDialog-wrapper': {
5896
5924
  alignItems: string;
5925
+ '& .SCCourseCompletedDialog-contrast-color': {
5926
+ color: string;
5927
+ };
5897
5928
  '& .SCCourseCompletedDialog-title': {
5898
5929
  marginTop: string;
5899
5930
  marginBottom: string;
@@ -5920,6 +5951,9 @@ declare const theme: {
5920
5951
  display: string;
5921
5952
  flexDirection: string;
5922
5953
  justifyContent: string;
5954
+ '& .SCLessonEditForm-contrast-color': {
5955
+ color: string;
5956
+ };
5923
5957
  '& .SCLessonEditForm-form': {
5924
5958
  display: string;
5925
5959
  flexDirection: string;
@@ -5975,6 +6009,9 @@ declare const theme: {
5975
6009
  styleOverrides: {
5976
6010
  root: () => {};
5977
6011
  containerRoot: ({ theme, open }: any) => {
6012
+ '& .SCLessonTemplate-contrast-color': {
6013
+ color: string;
6014
+ };
5978
6015
  '& .SCLessonTemplate-navigation-title': {
5979
6016
  display: string;
5980
6017
  alignItems: string;
@@ -6073,6 +6110,9 @@ declare const theme: {
6073
6110
  popoverRoot: ({ theme }: any) => {
6074
6111
  width: string;
6075
6112
  borderRadius: string;
6113
+ '& .SCLessonReleaseMenu-popover-contrast-color': {
6114
+ color: string;
6115
+ };
6076
6116
  '& .MuiPaper-root': {
6077
6117
  padding: any;
6078
6118
  };
@@ -6704,6 +6744,9 @@ declare const theme: {
6704
6744
  padding: any;
6705
6745
  flexDirection: string;
6706
6746
  gap: string;
6747
+ '& .SCMediaFile-contrast-color': {
6748
+ color: string;
6749
+ };
6707
6750
  '& .SCMediaFile-image-wrapper': {
6708
6751
  flexShrink: number;
6709
6752
  padding: number;
@@ -6725,7 +6768,6 @@ declare const theme: {
6725
6768
  };
6726
6769
  '& .SCMediaFile-subtitle': {
6727
6770
  textAlign: string;
6728
- color: any;
6729
6771
  };
6730
6772
  };
6731
6773
  '& .SCMediaFile-action-wrapper': {
@@ -6745,6 +6787,10 @@ declare const theme: {
6745
6787
  styleOverrides: {
6746
6788
  displayRoot: ({ theme }: any) => {
6747
6789
  marginTop: any;
6790
+ '& .react-player__preview': {
6791
+ backgroundSize: string;
6792
+ backgroundColor: string;
6793
+ };
6748
6794
  '& .SCMediaLink-link': {
6749
6795
  position: string;
6750
6796
  backgroundColor: string;
@@ -10938,6 +10984,7 @@ declare const theme: {
10938
10984
  border: string;
10939
10985
  '&.MuiPaper-elevation0': {
10940
10986
  borderRadius: number;
10987
+ backgroundColor: string;
10941
10988
  };
10942
10989
  '& .MuiCardContent-root': {
10943
10990
  padding: any;
@@ -11109,6 +11156,9 @@ declare const theme: {
11109
11156
  padding: any;
11110
11157
  marginTop: string;
11111
11158
  backgroundColor: any;
11159
+ '& .SCEmptyStatus-contrast-color': {
11160
+ color: string;
11161
+ };
11112
11162
  '& .SCEmptyStatus-box': {
11113
11163
  width: string;
11114
11164
  height: string;
@@ -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
  };
@@ -1,9 +1,19 @@
1
+ import { darken, getContrastRatio, lighten } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
4
  root: ({ theme }) => ({
4
- backgroundColor: theme.palette.common.white,
5
- border: `1px solid ${theme.palette.grey['300']}`,
5
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
6
+ ? theme.palette.background.paper
7
+ : theme.palette.common.white,
8
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
9
+ ? `1px solid ${theme.palette.grey[800]}`
10
+ : `1px solid ${theme.palette.grey[300]}`,
6
11
  borderRadius: '5px',
12
+ '& .SCAccordionLessons-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
+ },
7
17
  '& .SCAccordionLessons-empty': {
8
18
  padding: theme.spacing('19px', 3)
9
19
  },
@@ -11,9 +21,11 @@ const Component = {
11
21
  '& .SCAccordionLessons-summary': {
12
22
  flexDirection: 'row-reverse',
13
23
  gap: theme.spacing(1),
14
- borderBottom: `1px solid ${theme.palette.grey['300']}`,
24
+ borderBottom: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
25
+ ? `1px solid ${theme.palette.grey[800]}`
26
+ : `1px solid ${theme.palette.grey[300]}`,
15
27
  padding: theme.spacing('22px', 3),
16
- backgroundColor: theme.palette.grey['200'],
28
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? theme.palette.grey[700] : theme.palette.grey[200],
17
29
  '& .MuiAccordionSummary-content': {
18
30
  justifyContent: 'space-between',
19
31
  margin: 0,
@@ -30,14 +42,16 @@ const Component = {
30
42
  gap: theme.spacing(1),
31
43
  padding: theme.spacing('22px', 6),
32
44
  '&:not(:last-child)': {
33
- borderBottom: `1px solid ${theme.palette.grey['300']}`
45
+ borderBottom: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
46
+ ? `1px solid ${theme.palette.grey[800]}`
47
+ : `1px solid ${theme.palette.grey[300]}`
34
48
  },
35
49
  '& .SCAccordionLessons-circle': {
36
50
  flexShrink: 0,
37
51
  width: theme.spacing(2),
38
52
  height: theme.spacing(2),
39
53
  borderRadius: '9999px',
40
- backgroundColor: theme.palette.grey['300']
54
+ backgroundColor: theme.palette.common.white
41
55
  },
42
56
  '& .SCAccordionLessons-link': {
43
57
  textDecoration: 'underline',
@@ -52,15 +66,19 @@ const Component = {
52
66
  }
53
67
  }),
54
68
  skeletonRoot: ({ theme }) => ({
55
- border: `1px solid ${theme.palette.grey['300']}`,
69
+ border: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
70
+ ? `1px solid ${theme.palette.grey[800]}`
71
+ : `1px solid ${theme.palette.grey[300]}`,
56
72
  borderRadius: '5px',
57
73
  '& .SCAccordionLessons-accordion': {
58
74
  '& .SCAccordionLessons-summary': {
59
75
  display: 'flex',
60
76
  justifyContent: 'space-between',
61
- borderBottom: `1px solid ${theme.palette.grey['300']}`,
77
+ borderBottom: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
78
+ ? `1px solid ${theme.palette.grey[800]}`
79
+ : `1px solid ${theme.palette.grey[300]}`,
62
80
  padding: theme.spacing('22px', 3),
63
- backgroundColor: theme.palette.grey['200']
81
+ backgroundColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5 ? theme.palette.grey[700] : theme.palette.grey[200]
64
82
  }
65
83
  }
66
84
  })
@@ -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;
@@ -1,6 +1,13 @@
1
+ import { darken, getContrastRatio, lighten } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
- root: ({ theme }) => ({})
4
+ 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)
9
+ }
10
+ })
4
11
  }
5
12
  };
6
13
  export default Component;
@@ -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 }) => ({
@@ -43,7 +43,9 @@ const Component = {
43
43
  display: 'flex',
44
44
  padding: `6px`,
45
45
  borderRadius: theme.shape.borderRadius * 0.5,
46
- borderColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
46
+ borderColor: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
47
+ ? 'rgba(255, 255, 255, 0.12)'
48
+ : alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
47
49
  '& .MuiCardContent-root': {
48
50
  flexGrow: 1,
49
51
  padding: 0,
@@ -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;
@@ -1,8 +1,14 @@
1
+ import { darken, getContrastRatio, lighten } from '@mui/material';
1
2
  const Component = {
2
3
  styleOverrides: {
3
- root: () => ({
4
+ root: ({ theme }) => ({
4
5
  '& .SCCourseCompletedDialog-wrapper': {
5
6
  alignItems: 'center',
7
+ '& .SCCourseCompletedDialog-contrast-color': {
8
+ color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
9
+ ? lighten(theme.palette.common.white, 0.5)
10
+ : darken(theme.palette.common.white, 0.5)
11
+ },
6
12
  '& .SCCourseCompletedDialog-title': {
7
13
  marginTop: '60px',
8
14
  marginBottom: '27px'
@@ -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;