@galaxy-ds/core 2.0.12 → 2.0.13

package/src/Theme/leap/desktop/overrides/menuItem.ts

@@ -21,15 +21,12 @@ export const menuItemOverrides: Components<Theme>['MuiMenuItem'] = {
           color: '#fff',
         },
         '&.Mui-selected': {
-          backgroundColor: '#0078D7',
+          backgroundColor: '#4e9af7',
           '& .MuiListItemText-root': {
             color: '#fff',
           },
         },
-        '&.gds-menu-item-icon .MuiListItemIcon-root': {
-          display: 'none',
-        },
-        '.customMultipleList &$selected': {
+        '&.customMultipleList .Mui-selected': {
           backgroundColor: '#fff',
         },
         '&.Mui-selected:hover': {
@@ -69,36 +66,67 @@ export const menuItemOverrides: Components<Theme>['MuiMenuItem'] = {
         '& .MuiDivider-root': {
           marginLeft: 32,
         },
+        '&.gds-menu-item-icon': {
+          paddingLeft: 0,
+          '& .MuiSvgIcon-root': {
+            fontSize: 15,
+          },
+          '& .MuiListItemIcon-root': {
+            color: theme.palette.text.primary,
+            minWidth: 22,
+            height: 22,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          },
+          '&.Mui-selected': {
+            '& .MuiListItemIcon-root': {
+              color: '#fff',
+              backgroundColor: '#4e9af7'
+            },
+          },
+          '&:hover .MuiListItemIcon-root': {
+            color: '#fff',
+            backgroundColor: '#0078D7',
+          },
+        },
         '&.gds-menu-item-system': {
+          borderRadius: theme.shapes.sm,
           minHeight: 22,
           maxHeight: 22,
           padding: 0,
           paddingLeft: 32,
           paddingRight: 10,
-          backgroundColor: theme.palette.grey[100],
+          marginTop: theme.shapes.sm,
+          marginBottom: theme.shapes.sm,
+          backgroundColor: '#F9F9F9',
           color: theme.palette.text.primary,
           ...theme.typography.body2,
           '&:hover': {
-            backgroundColor: '#91C9F7',
+            backgroundColor: '#EDEDEE',
             color: theme.palette.text.primary,
           },
           '&:hover .MuiListItemText-root .MuiTypography-root': {
             color: theme.palette.text.primary,
           },
+          '&:hover .MuiListItemIcon-root': {
+            backgroundColor: '#EDEDEE',
+            borderRadius: theme.shapes.sm,
+          },
           '&.Mui-selected': {
-            backgroundColor: theme.palette.grey[100],
+            backgroundColor: "#EDEDEE",
             '& .MuiListItemText-root': {
               color: theme.palette.text.primary,
             },
             '& .MuiListItemIcon-root': {
-              backgroundColor: '#91C9F7',
+              backgroundColor: '#EDEDEE',
+              borderRadius: theme.shapes.sm,
             },
             '& svg': {
               color: theme.palette.text.primary,
             },
           },
           '&.Mui-selected:hover': {
-            backgroundColor: '#91C9F7',
             color: theme.palette.text.primary,
             '& svg': {
               color: theme.palette.text.primary,

package/src/Theme/leap/desktop/theme.ts

@@ -191,5 +191,7 @@ theme = createTheme(theme, {
 
 theme.shadows[3] = '2px 3px 4px 0 rgba(0,0,0,0.5)';
 theme.shadows[4] = '0px 4px 20px 0px #00000036'; //Shadow / Modal Window
+theme.shadows[5] = '0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)';
+theme.shadows[6] = '0px 2px 4px -1px rgba(0, 0, 0, 0.06),0px 4px 6px -1px rgba(0, 0, 0, 0.1)'; // Menu System
 
 export default theme;

package/src/Theme/leap/web/design-tokens/components/chip.ts

@@ -57,7 +57,8 @@ const chip = {
             fontWeight: '400',
             fontSize: '12px',
             height: '20px',
-            iconBorder: '1px solid #d4d4d4'
+            iconBorder: '1px solid #d4d4d4',
+            paddingLabel: '8px',
         },
     }
 }

package/src/Theme/leap/web/overrides/Dialog/dialog.ts

@@ -57,11 +57,12 @@ export const dialogOverrides: Components<Theme>['MuiDialog'] = {
             }
           },
         },
+
+
         "&.gds-modal--desktop": {
           '& .gds-modal_paper': {
             color: "#444444", 
-            border: '1px solid #CCCCCC',
-            boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.21)',
+            boxShadow: theme.shadows[5],
             maxWidth: 502,
             "&:focus": {
               outline: 'none',
@@ -125,12 +126,9 @@ export const dialogOverrides: Components<Theme>['MuiDialog'] = {
       },
     }),
     paper: ({ theme }) => ({
-      border: '1px solid #CCCCCC',
-      boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.21)',
-      background: theme.palette.grey[100],
       "& .MuiDialogTitle-root + .MuiDialogContent-root": {
         "&:not(.gds-disablePaddings)": {
-          paddingTop: 12,  
+          paddingTop: 16,  
         },
       },
     }),

package/src/Theme/leap/web/overrides/menu.ts

@@ -10,6 +10,7 @@ export const menuOverrides: Components<Theme>['MuiMenu'] = {
           marginTop: 1,
           paddingTop: 4,
           paddingBottom: 4,
+          borderRadius: 4,
         },
 
         '& .customDropdown': {
@@ -19,10 +20,12 @@ export const menuOverrides: Components<Theme>['MuiMenu'] = {
         },
 
         "&.gds-menu-system .MuiPaper-root": {
-          color: "#d4d4d4",
-          border: "1px solid #CCCCCC",
-          backgroundColor: "#eeeeee",
-          padding: "0 2px",
+          color: '#d4d4d4',
+          border: '1px solid #CCCCCC',
+          boxShadow: theme.shadows[6],
+          borderRadius: theme.shapes.sm,
+          backgroundColor: '#F9F9F9',
+          padding: '0 4px',
           minWidth: 180,
           "& .MuiListSubheader-root": {
             fontSize: theme.typography.body2.fontSize,
@@ -30,10 +33,9 @@ export const menuOverrides: Components<Theme>['MuiMenu'] = {
         },
       }),
       list: {
-        padding: '2px 0',
+        padding: 0,
         '& .MuiListSubheader-root': {
           pointerEvents: 'none',
-          background: 'none',
         },
       },
     }

package/src/Theme/leap/web/overrides/menuItem.ts

@@ -6,7 +6,7 @@ export const menuItemOverrides: Components<Theme>['MuiMenuItem'] = {
       '&.MuiMenuItem-root': {
         lineHeight: 1.5715,
         letterSpacing: '0.01rem',
-        padding: '.375rem 1.25rem',
+        padding: '.25rem 1.25rem',
         '& .MuiListItemText-root .MuiTypography-root': {
           fontSize: '.8125rem',
         },
@@ -95,33 +95,42 @@ export const menuItemOverrides: Components<Theme>['MuiMenuItem'] = {
           },
         },
         '&.gds-menu-item-system': {
+          borderRadius: theme.shapes.sm,
           minHeight: 22,
           maxHeight: 22,
           padding: 0,
           paddingLeft: 32,
           paddingRight: 10,
-          backgroundColor: theme.palette.grey[100],
+          marginTop: theme.shapes.sm,
+          marginBottom: theme.shapes.sm,
+          backgroundColor: '#F9F9F9',
           color: theme.palette.text.primary,
           ...theme.typography.body2,
           '&:hover': {
-            backgroundColor: '#91C9F7',
+            backgroundColor: '#EDEDEE',
             color: theme.palette.text.primary,
           },
           '&:hover .MuiListItemText-root .MuiTypography-root': {
             color: theme.palette.text.primary,
           },
+          '&:hover .MuiListItemIcon-root': {
+            backgroundColor: '#EDEDEE',
+            borderRadius: theme.shapes.sm,
+          },
           '&.Mui-selected': {
-            backgroundColor: theme.palette.grey[100],
-            color: theme.palette.text.primary,
+            backgroundColor: "#EDEDEE",
+            '& .MuiListItemText-root': {
+              color: theme.palette.text.primary,
+            },
             '& .MuiListItemIcon-root': {
-              backgroundColor: '#91C9F7',
+              backgroundColor: '#EDEDEE',
+              borderRadius: theme.shapes.sm,
             },
             '& svg': {
               color: theme.palette.text.primary,
             },
           },
           '&.Mui-selected:hover': {
-            backgroundColor: '#91C9F7',
             color: theme.palette.text.primary,
             '& svg': {
               color: theme.palette.text.primary,
@@ -147,8 +156,10 @@ export const menuItemOverrides: Components<Theme>['MuiMenuItem'] = {
             color: 'currentColor',
           },
           '& .MuiListItemText-root': {
-            color: theme.palette.text.primary,
             margin: 0,
+            '& .MuiTypography-root': {
+              ...theme.typography.body2,
+            },
           },
         },
       },

package/src/Theme/leap/web/theme.ts

@@ -119,5 +119,7 @@ theme = createTheme(theme, {
 // Override shadows
 theme.shadows[3] = '2px 3px 4px 0 rgba(0,0,0,0.15)';
 theme.shadows[4] = '0px 4px 20px 0px #00000036'; //Shadow / Modal Window
+theme.shadows[5] = '0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);';
+theme.shadows[6] = '0px 2px 4px -1px rgba(0, 0, 0, 0.06),0px 4px 6px -1px rgba(0, 0, 0, 0.1)'; // Menu System
 
 export default theme;

package/src/stories/ReleaseNotes.stories.mdx

@@ -16,3 +16,4 @@ import './introduction.css';
 - [Button] `color="default"` is deprecated, changed to `color="inherit"`
 - [MenuContext] is deprecated
 - [AppointmentCalendar] is deprecated
+- [Chip] `variant="primary"` is deprecated, changed to `color="primary"`