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

package/lib/cjs/components/SCNavigationSettingsIconButton.js

@@ -10,10 +10,13 @@ const Component = {
                     padding: 0
                 }
             },
-            '& .SCNavigationSettingsIconButton-item .MuiListItemIcon-root': {
-                marginLeft: theme.spacing(0.5),
-                marginBottom: theme.spacing(0.5),
-                color: theme.palette.secondary.main
+            '& .SCNavigationSettingsIconButton-item': {
+                color: theme.palette.getContrastText(theme.palette.background.default),
+                '& .MuiListItemIcon-root': {
+                    marginLeft: theme.spacing(0.5),
+                    marginBottom: theme.spacing(0.5),
+                    color: theme.palette.secondary.main
+                }
             }
         }),
         drawerRoot: ({ theme }) => ({

package/lib/cjs/components/SCOnBoardingWidget.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
@@ -18,7 +19,9 @@ const Component = {
             '& .MuiCardContent-root': {
                 '& .MuiList-root': {
                     paddingTop: 0,
-                    borderRight: `1px solid ${theme.palette.grey[200]}`,
+                    borderRight: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
+                        ? '1px solid rgba(255, 255, 255, 0.12)'
+                        : `1px solid ${theme.palette.grey[200]}`,
                     '& .MuiListItem-root': {
                         paddingBottom: 0
                     }
@@ -101,7 +104,9 @@ const Component = {
                 }
             },
             '& .MuiAccordionSummary-root': {
-                borderBottom: `1px solid ${theme.palette.grey[200]}`,
+                borderBottom: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
+                    ? '1px solid rgba(255, 255, 255, 0.12)'
+                    : `1px solid ${theme.palette.grey[200]}`,
                 borderRadius: 0,
                 [theme.breakpoints.up('md')]: {
                     borderRadius: theme.shape.borderRadius,
@@ -174,7 +179,9 @@ const Component = {
                     padding: 0
                 },
                 [theme.breakpoints.up('md')]: {
-                    borderRight: `1px solid ${theme.palette.grey[200]}`
+                    borderRight: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
+                        ? '1px solid rgba(255, 255, 255, 0.12)'
+                        : `1px solid ${theme.palette.grey[200]}`
                 }
             }
         }),

package/lib/cjs/components/SCPrivateMessageEditor.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const system_1 = require("@mui/system");
+const material_1 = require("@mui/material");
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
-            backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+            backgroundColor: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
+                ? (0, material_1.alpha)(theme.palette.primary.dark, 0.5)
+                : (0, material_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
             '& .SCPrivateMessageEditor-message-input': {
                 width: '100%'
             },

package/lib/cjs/components/SCPrivateMessageSnippetItem.d.ts

@@ -5,6 +5,9 @@ declare const Component: {
             padding: string;
             boxShadow: string;
             marginBottom: any;
+            '& .SCPrivateMessageSnippetItem-contrast-color': {
+                color: string;
+            };
             '& .SCPrivateMessageSnippetItem-time': {
                 float: string;
                 fontSize: any;

package/lib/cjs/components/SCPrivateMessageSnippetItem.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
@@ -7,6 +8,11 @@ const Component = {
             padding: `${theme.spacing(0)}!important`,
             boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
             marginBottom: theme.spacing(1),
+            '& .SCPrivateMessageSnippetItem-contrast-color': {
+                color: (0, material_1.getContrastRatio)(theme.palette.background.paper, theme.palette.common.white) > 4.5
+                    ? (0, material_1.lighten)(theme.palette.common.white, 0.5)
+                    : (0, material_1.darken)(theme.palette.common.white, 0.5)
+            },
             '& .SCPrivateMessageSnippetItem-time': {
                 float: 'right',
                 fontSize: theme.typography.fontWeightRegular

package/lib/cjs/components/SCPrivateMessageSnippets.d.ts

@@ -22,25 +22,15 @@ declare const Component: {
                     };
                 };
                 '& .SCPrivateMessageSnippets-new-message-button': {
-                    color: string;
                     alignSelf: string;
-                    backgroundColor: string;
-                    '&:hover': {
-                        borderWidth: string;
-                        backgroundColor: any;
-                    };
                 };
                 '& .MuiList-root': {
                     flexGrow: number;
                     overflowY: string;
                     padding: any;
-                    '& .Mui-selected': {
-                        backgroundColor: any;
-                    };
                     '& .MuiButtonBase-root, MuiListItemButton-root': {
                         '&:hover': {
                             borderRadius: string;
-                            backgroundColor: any;
                         };
                     };
                 };

package/lib/cjs/components/SCPrivateMessageSnippets.js

@@ -24,23 +24,14 @@ const Component = {
                     }
                 },
                 '& .SCPrivateMessageSnippets-new-message-button': {
-                    color: `${theme.palette.primary.main} !important`,
-                    alignSelf: 'center',
-                    backgroundColor: 'transparent',
-                    '&:hover': {
-                        borderWidth: '2px !important',
-                        backgroundColor: theme.palette.grey['A200']
-                    }
+                    alignSelf: 'center'
                 },
                 '& .MuiList-root': {
                     flexGrow: 1,
                     overflowY: 'auto',
                     padding: theme.spacing(1),
-                    '& .Mui-selected': {
-                        backgroundColor: theme.palette.grey['A200']
-                    },
                     '& .MuiButtonBase-root, MuiListItemButton-root': {
-                        '&:hover': { borderRadius: 'inherit', backgroundColor: theme.palette.grey['A200'] }
+                        '&:hover': { borderRadius: 'inherit' }
                     }
                 }
             },

package/lib/cjs/components/SCPrivateMessageThread.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const system_1 = require("@mui/system");
+const material_1 = require("@mui/material");
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
             height: '100%',
             width: '100%',
-            backgroundColor: (0, system_1.alpha)(theme.palette.common.white, 0.5),
+            backgroundColor: (0, material_1.alpha)(theme.palette.common.white, 0.5),
             borderRadius: 0,
             '& .MuiCardContent-root': {
                 display: 'flex',
@@ -41,7 +41,9 @@ const Component = {
                                 position: 'relative',
                                 marginBottom: theme.spacing(1),
                                 '&.SCPrivateMessageThread-receiver': {
-                                    backgroundColor: theme.palette.common.white,
+                                    backgroundColor: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
+                                        ? theme.palette.background.paper
+                                        : theme.palette.common.white,
                                     marginLeft: theme.spacing(-4),
                                     filter: 'drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1))',
                                     '&:after': {
@@ -49,13 +51,17 @@ const Component = {
                                         content: `""`,
                                         position: 'absolute',
                                         border: `${theme.spacing(3)} solid transparent`,
-                                        borderTop: `${theme.spacing(3)} solid ${theme.palette.common.white}`,
+                                        borderTop: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
+                                            ? `${theme.spacing(3)} solid ${theme.palette.background.paper}`
+                                            : `${theme.spacing(3)} solid ${theme.palette.common.white}`,
                                         top: theme.spacing(0),
                                         left: theme.spacing(-2)
                                     }
                                 },
                                 '&.SCPrivateMessageThread-sender': {
-                                    backgroundColor: theme.palette.grey[300],
+                                    backgroundColor: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
+                                        ? theme.palette.grey[600]
+                                        : theme.palette.grey[300],
                                     position: 'relative',
                                     marginLeft: 'auto',
                                     marginRight: theme.spacing(1),
@@ -63,7 +69,9 @@ const Component = {
                                         content: `""`,
                                         position: 'absolute',
                                         border: `${theme.spacing(3)} solid transparent`,
-                                        borderTop: `${theme.spacing(3)} solid ${theme.palette.grey[300]}`,
+                                        borderTop: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5
+                                            ? `${theme.spacing(3)} solid ${theme.palette.grey[600]}`
+                                            : `${theme.spacing(3)} solid ${theme.palette.grey[300]}`,
                                         top: theme.spacing(0),
                                         right: theme.spacing(-2)
                                     }
@@ -97,7 +105,7 @@ const Component = {
                 height: theme.mixins.toolbar.minHeight,
                 alignItems: 'center',
                 justifyContent: 'center',
-                backgroundColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+                backgroundColor: (0, material_1.alpha)(theme.palette.primary.main, theme.palette.action.activatedOpacity),
                 '& .SCPrivateMessageThread-new-message-header-content': {
                     display: 'flex',
                     alignItems: 'center',

package/lib/cjs/components/SCPrivateMessageThreadItem.d.ts

@@ -6,6 +6,9 @@ declare const Component: {
             padding: any;
             boxShadow: string;
             marginBottom: any;
+            '& .SCPrivateMessageThreadItem-paper-contrast-color': {
+                color: any;
+            };
             '& .MuiListItemSecondaryAction-root': {
                 right: number;
                 top: any;

package/lib/cjs/components/SCPrivateMessageThreadItem.js

@@ -8,6 +8,9 @@ const Component = {
             padding: theme.spacing(2, 4, 4, 2),
             boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
             marginBottom: theme.spacing(1),
+            '& .SCPrivateMessageThreadItem-paper-contrast-color': {
+                color: theme.palette.getContrastText(theme.palette.background.paper)
+            },
             '& .MuiListItemSecondaryAction-root': {
                 right: 10,
                 top: theme.spacing(3),

package/lib/cjs/components/SCUser.d.ts

@@ -7,6 +7,9 @@ declare const Component: {
             borderRadius: number;
             paddingBottom: number;
             overflow: string;
+            '& .SCUser-paper-contrast-color': {
+                color: any;
+            };
             '& .MuiChip-root': {
                 height: string;
             };

package/lib/cjs/components/SCUser.js

@@ -9,6 +9,9 @@ const Component = {
             [theme.breakpoints.up('sm')]: {
                 borderRadius: theme.shape.borderRadius
             },
+            '& .SCUser-paper-contrast-color': {
+                color: theme.palette.getContrastText(theme.palette.background.paper)
+            },
             '& .MuiChip-root': {
                 height: '18px'
             },

package/lib/cjs/components/SCWidget.d.ts

@@ -35,7 +35,7 @@ declare const Component: {
                 '& h5': {
                     fontFamily: any;
                     fontWeight: any;
-                    color: string;
+                    color: any;
                     fontSize: string;
                 };
                 '& .MuiList-root': {

package/lib/cjs/components/SCWidget.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const material_1 = require("@mui/material");
 const Component = {
     variants: [
         {
@@ -35,7 +34,7 @@ const Component = {
                 '& h5': {
                     fontFamily: theme.typography.fontFamily,
                     fontWeight: theme.typography.fontWeightBold,
-                    color: (0, material_1.lighten)(theme.palette.text.primary, 0.5),
+                    color: theme.palette.getContrastText(theme.palette.background.default),
                     fontSize: '1.143rem'
                 },
                 '& .MuiList-root': {

package/lib/cjs/index.d.ts

@@ -249,8 +249,8 @@ declare const theme: {
                     backgroundColor: any;
                     border: string;
                     borderRadius: string;
-                    '& .SCAccordionLessons-contrast-color': {
-                        color: string;
+                    '& .SCAccordionLessons-paper-contrast-color': {
+                        color: any;
                     };
                     '& .SCAccordionLessons-empty': {
                         padding: any;
@@ -382,11 +382,16 @@ declare const theme: {
                 root: ({ theme }: {
                     theme: any;
                 }) => {
-                    '&.SCAddUsersButton-contrast-color': {
+                    '&.SCAddUsersButton-default-contrast-color': {
                         color: any;
                     };
                 };
-                dialogRoot: () => {
+                dialogRoot: ({ theme }: {
+                    theme: any;
+                }) => {
+                    '& .SCAddUsersButton-dialog-paper-contrast-color': {
+                        color: any;
+                    };
                     '& .MuiDialogActions-root': {
                         marginTop: string;
                     };
@@ -562,10 +567,10 @@ declare const theme: {
                             marginTop: any;
                             marginBottom: any;
                             '& .SCBaseItemButton-primary': {
-                                color: any;
+                                color: string;
                             };
                             '& .SCBaseItemButton-secondary': {
-                                color: any;
+                                color: string;
                             };
                         };
                     };
@@ -812,8 +817,8 @@ declare const theme: {
         SCCategoryAutocomplete: {
             styleOverrides: {
                 root: ({ theme }: any) => {
-                    '& .SCCategoryAutocomplete-contrast-color': {
-                        color: string;
+                    '& .SCCategoryAutocomplete-paper-contrast-color': {
+                        color: any;
                     };
                 };
             };
@@ -2168,8 +2173,11 @@ declare const theme: {
                     [x: number]: {
                         marginBottom: string;
                     };
-                    '& .SCCourseDashboard-contrast-color': {
-                        color: string;
+                    '& .SCCourseDashboard-default-contrast-color': {
+                        color: any;
+                    };
+                    '& .SCCourseDashboard-paper-contrast-color': {
+                        color: any;
                     };
                     '& .SCCourseDashboard-header': {
                         [x: number]: {
@@ -2340,7 +2348,6 @@ declare const theme: {
                                 };
                                 '& a': {
                                     textDecoration: string;
-                                    color: string;
                                 };
                                 '& .MuiBadge-root': {
                                     marginRight: any;
@@ -2538,9 +2545,7 @@ declare const theme: {
                             borderTopRightRadius: string;
                             padding: string;
                             '& .SCCourseDashboard-circle': {
-                                width: string; /**
-                                 * Export default theme
-                                 */
+                                width: string;
                                 height: string;
                                 borderRadius: number;
                             };
@@ -2693,8 +2698,11 @@ declare const theme: {
                 root: ({ theme }: {
                     theme: any;
                 }) => {
-                    '& .SCCourseForm-contrast-color': {
-                        color: string;
+                    '& .SCCourseForm-default-contrast-color': {
+                        color: any;
+                    };
+                    '& .SCCourseForm-paper-contrast-color': {
+                        color: any;
                     };
                     '& .SCCourseForm-cover': {
                         position: string;
@@ -2732,6 +2740,9 @@ declare const theme: {
                         '& .SCCourseForm-name': {
                             marginTop: any;
                         };
+                        '.MuiInputBase-root': {
+                            color: any;
+                        };
                         '& .SCCategoryAutocomplete-root ': {
                             marginTop: any;
                         };
@@ -2895,8 +2906,8 @@ declare const theme: {
                     '&:hover': {
                         backgroundColor: string;
                     };
-                    '& .SCCourseParticipantsButton-contrast-color': {
-                        color: string;
+                    '& .SCCourseParticipantsButton-paper-contrast-color': {
+                        color: any;
                     };
                     '& .MuiAvatarGroup-root': {
                         '&:not(.SCAvatarCourseSkeleton-root) .MuiAvatar-root': {
@@ -2930,6 +2941,9 @@ declare const theme: {
                 dialogRoot: ({ theme }: {
                     theme: any;
                 }) => {
+                    '& .SCCourseParticipantsButton-dialog-paper-contrast-color': {
+                        color: any;
+                    };
                     '& .SCCourseParticipantsButton-infinite-scroll': {
                         [x: number]: {
                             height: string;
@@ -3015,8 +3029,11 @@ declare const theme: {
                     borderRadius: string;
                     padding: any;
                     backgroundColor: any;
-                    '& .SCCourseUsersTable-contrast-color': {
-                        color: string;
+                    '& .SCCourseUsersTable-default-contrast-color': {
+                        color: any;
+                    };
+                    '& .SCCourseUsersTable-paper-contrast-color': {
+                        color: any;
                     };
                     '& .SCCourseUsersTable-search': {
                         '& > .MuiInputBase-root': {
@@ -3075,6 +3092,9 @@ declare const theme: {
                 dialogRoot: ({ theme }: {
                     theme: any;
                 }) => {
+                    '& .SCCourseUsersTable-dialog-paper-contrast-color': {
+                        color: any;
+                    };
                     '& .MuiDialogTitle-root': {
                         color: string;
                     };
@@ -3562,8 +3582,11 @@ declare const theme: {
                     [x: number]: {
                         marginBottom: string;
                     };
-                    '& .SCEditCourse-contrast-color': {
-                        color: string;
+                    '& .SCEditCourse-default-contrast-color': {
+                        color: any;
+                    };
+                    '& .SCEditCourse-paper-contrast-color': {
+                        color: any;
                     };
                     '& .SCEditCourse-header': {
                         [x: number]: {
@@ -3724,8 +3747,11 @@ declare const theme: {
                                             gap: string;
                                             '& .SCEditCourse-change-lesson-status-published-wrapper': {
                                                 backgroundColor: any;
+                                                '& .MuiTypography-root': {
+                                                    color: any;
+                                                };
                                                 '& .MuiIcon-root': {
-                                                    color: string;
+                                                    color: any;
                                                 };
                                             };
                                             '& .SCEditCourse-change-lesson-status-icon-draft': {
@@ -4591,6 +4617,8 @@ declare const theme: {
                 };
                 contributorsRoot: ({ theme }: any) => {
                     '& .SCFeedObject-contributors-btn-participants': {
+                        display: string;
+                        gap: string;
                         padding: any;
                         marginLeft: any;
                         color: string;
@@ -4606,7 +4634,7 @@ declare const theme: {
                     "& .MuiAvatar-root": {
                         backgroundColor: string;
                         border: string;
-                        color: string;
+                        color: any;
                         fontSize: string;
                         width: any;
                         height: any;
@@ -6981,10 +7009,13 @@ declare const theme: {
                             padding: number;
                         };
                     };
-                    '& .SCNavigationSettingsIconButton-item .MuiListItemIcon-root': {
-                        marginLeft: any;
-                        marginBottom: any;
+                    '& .SCNavigationSettingsIconButton-item': {
                         color: any;
+                        '& .MuiListItemIcon-root': {
+                            marginLeft: any;
+                            marginBottom: any;
+                            color: any;
+                        };
                     };
                 };
                 drawerRoot: ({ theme }: any) => {
@@ -8111,6 +8142,9 @@ declare const theme: {
                         '& .SCOnBoardingWidget-app-image-android': {
                             width: string;
                             marginTop: any;
+                            /**
+                             * Style assets - Imports - Start
+                             */
                             marginBottom: any;
                         };
                     };
@@ -8442,6 +8476,9 @@ declare const theme: {
                     padding: string;
                     boxShadow: string;
                     marginBottom: any;
+                    '& .SCPrivateMessageSnippetItem-contrast-color': {
+                        color: string;
+                    };
                     '& .SCPrivateMessageSnippetItem-time': {
                         float: string;
                         fontSize: any;
@@ -8522,25 +8559,15 @@ declare const theme: {
                             };
                         };
                         '& .SCPrivateMessageSnippets-new-message-button': {
-                            color: string;
                             alignSelf: string;
-                            backgroundColor: string;
-                            '&:hover': {
-                                borderWidth: string;
-                                backgroundColor: any;
-                            };
                         };
                         '& .MuiList-root': {
                             flexGrow: number;
                             overflowY: string;
                             padding: any;
-                            '& .Mui-selected': {
-                                backgroundColor: any;
-                            };
                             '& .MuiButtonBase-root, MuiListItemButton-root': {
                                 '&:hover': {
                                     borderRadius: string;
-                                    backgroundColor: any;
                                 };
                             };
                         };
@@ -8734,6 +8761,9 @@ declare const theme: {
                     padding: any;
                     boxShadow: string;
                     marginBottom: any;
+                    '& .SCPrivateMessageThreadItem-paper-contrast-color': {
+                        color: any;
+                    };
                     '& .MuiListItemSecondaryAction-root': {
                         right: number;
                         top: any;
@@ -9064,6 +9094,9 @@ declare const theme: {
                     borderRadius: number;
                     paddingBottom: number;
                     overflow: string;
+                    '& .SCUser-paper-contrast-color': {
+                        color: any;
+                    };
                     '& .MuiChip-root': {
                         height: string;
                     };
@@ -10161,8 +10194,6 @@ declare const theme: {
                     '& .SCEventHeader-chip': {
                         marginLeft: any;
                         marginBottom: any;
-                        backgroundColor: any;
-                        color: any;
                         border: string;
                         '& .SCEventHeader-chip-icon': {
                             marginLeft: any;
@@ -10189,7 +10220,6 @@ declare const theme: {
                             alignItems: string;
                             gap: any;
                             paddingLeft: any;
-                            color: any;
                             '& .SCEventHeader-visibility-item': {
                                 fontSize: any;
                                 fontWeight: any;
@@ -10367,6 +10397,7 @@ declare const theme: {
                         padding: string;
                     };
                     backgroundColor: any;
+                    color: any;
                     justifyContent: string;
                     height: number;
                     borderRadius: string;
@@ -10430,6 +10461,7 @@ declare const theme: {
                         '& .MuiList-root .SCEventSubscribeButton-item': {
                             paddingTop: number;
                             paddingBottom: number;
+                            color: string;
                             '&.Mui-disabled': {
                                 paddingTop: any;
                                 paddingBottom: any;
@@ -10991,7 +11023,7 @@ declare const theme: {
                         '& h5': {
                             fontFamily: any;
                             fontWeight: any;
-                            color: string;
+                            color: any;
                             fontSize: string;
                         };
                         '& .MuiList-root': {

package/lib/esm/components/SCAccordionLessons.d.ts

@@ -6,8 +6,8 @@ declare const Component: {
             backgroundColor: any;
             border: string;
             borderRadius: string;
-            '& .SCAccordionLessons-contrast-color': {
-                color: string;
+            '& .SCAccordionLessons-paper-contrast-color': {
+                color: any;
             };
             '& .SCAccordionLessons-empty': {
                 padding: any;

package/lib/esm/components/SCAccordionLessons.js

@@ -1,4 +1,4 @@
-import { darken, getContrastRatio, lighten } from '@mui/material';
+import { getContrastRatio } from '@mui/material';
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
@@ -9,10 +9,8 @@ const Component = {
                 ? `1px solid ${theme.palette.grey[800]}`
                 : `1px solid ${theme.palette.grey[300]}`,
             borderRadius: '5px',
-            '& .SCAccordionLessons-contrast-color': {
-                color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
-                    ? lighten(theme.palette.common.white, 0.5)
-                    : darken(theme.palette.common.white, 0.5)
+            '& .SCAccordionLessons-paper-contrast-color': {
+                color: theme.palette.getContrastText(theme.palette.background.paper)
             },
             '& .SCAccordionLessons-empty': {
                 padding: theme.spacing('19px', 3)