@linagora/twake-mui 1.6.0 → 2.0.0

package/dist/lib/makeLightOverrides.js

@@ -1,39 +1,436 @@
+import { menuItemClasses } from '@mui/material/MenuItem';
 import { alpha } from '@mui/material/styles';
-import { accordionOverrides } from './overrides/accordionOverrides';
-import { autocompleteOverrides } from './overrides/autocompleteOverrides';
-import { avatarOverrides } from './overrides/avatarOverrides';
-import { backdropOverrides } from './overrides/backdropOverrides';
-import { buttonOverrides } from './overrides/buttonOverrides';
-import { checkboxOverrides } from './overrides/checkboxOverrides';
-import { datePickerOverrides } from './overrides/datePickerOverrides';
-import { dialogOverrides, dialogTitleOverrides, dialogContentOverrides, dialogActionsOverrides } from './overrides/dialogOverrides';
-import { iconButtonOverrides } from './overrides/iconButtonOverrides';
-import { menuItemOverrides } from './overrides/menuItemOverrides';
-import { popoverOverrides } from './overrides/popoverOverrides';
-import { swipeableDrawerOverrides } from './overrides/swipeableDrawerOverrides';
-import { textFieldOverrides, outlinedInputOverrides, inputBaseOverrides, selectOverrides } from './overrides/textFieldOverrides';
-import { toggleButtonGroupOverrides, toggleButtonOverrides } from './overrides/toggleButtonOverrides';
+import paletteJson from './palette.json';
+import { radius } from './radius';
+const paletteData = paletteJson;
 export const makeLightOverrides = (theme) => {
-    const datePickerOverridesResult = datePickerOverrides(theme);
-    const accordionOverridesResult = accordionOverrides(theme);
     return {
-        MuiButton: buttonOverrides(theme),
-        MuiTextField: textFieldOverrides(),
-        MuiOutlinedInput: outlinedInputOverrides(),
-        MuiInputBase: inputBaseOverrides(),
-        MuiSelect: selectOverrides(),
-        MuiAutocomplete: autocompleteOverrides(),
-        MuiDialog: dialogOverrides(),
-        MuiDialogTitle: dialogTitleOverrides(),
-        MuiDialogContent: dialogContentOverrides(),
-        MuiDialogActions: dialogActionsOverrides(),
-        MuiPopover: popoverOverrides(),
-        MuiAvatar: avatarOverrides(theme),
-        MuiToggleButtonGroup: toggleButtonGroupOverrides(),
-        MuiToggleButton: toggleButtonOverrides(theme),
-        MuiIconButton: iconButtonOverrides(),
-        MuiCheckbox: checkboxOverrides(),
-        MuiBackdrop: backdropOverrides(theme),
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    borderRadius: radius.pill,
+                    boxShadow: 'none',
+                    '&:hover': {
+                        boxShadow: 'none'
+                    },
+                    '&:active': {
+                        boxShadow: 'none'
+                    },
+                    '&:focus': {
+                        boxShadow: 'none'
+                    },
+                    variants: [
+                        {
+                            props: { variant: 'contained', color: 'secondary' },
+                            style: {
+                                backgroundColor: theme.palette.secondary.main,
+                                color: alpha(theme.palette.text.primary, 0.9),
+                                borderRadius: radius.sm,
+                                '&:hover': {
+                                    backgroundColor: paletteData.Secondary[700],
+                                    color: alpha(theme.palette.text.primary, 0.9)
+                                },
+                                '&.Mui-disabled': {
+                                    backgroundColor: theme.palette.action.disabledBackground
+                                }
+                            }
+                        },
+                        {
+                            props: { size: 'small' },
+                            style: {
+                                padding: '6px 16px'
+                            }
+                        },
+                        {
+                            props: { size: 'medium' },
+                            style: {
+                                padding: '9px 24px'
+                            }
+                        },
+                        {
+                            props: { size: 'large' },
+                            style: {
+                                padding: '12px 32px'
+                            }
+                        },
+                        {
+                            props: { variant: 'contained', size: 'small' },
+                            style: {
+                                paddingTop: '7px',
+                                paddingBottom: '7px'
+                            }
+                        },
+                        {
+                            props: { variant: 'contained', size: 'medium' },
+                            style: {
+                                paddingTop: '10px',
+                                paddingBottom: '10px'
+                            }
+                        },
+                        {
+                            props: { variant: 'contained', size: 'large' },
+                            style: {
+                                paddingTop: '13px',
+                                paddingBottom: '13px'
+                            }
+                        }
+                    ]
+                },
+                contained: {
+                    boxShadow: 'none',
+                    '&:hover': {
+                        boxShadow: 'none'
+                    },
+                    '&:active': {
+                        boxShadow: 'none'
+                    },
+                    '&:focus': {
+                        boxShadow: 'none'
+                    }
+                },
+                outlined: {
+                    backgroundColor: theme.palette.background.paper,
+                    borderColor: alpha(paletteData.Grey.A900, 0.28),
+                    color: alpha(theme.palette.text.primary, 0.9),
+                    '&:hover': {
+                        backgroundColor: alpha(theme.palette.primary.main, 0.04),
+                        color: theme.palette.primary.main,
+                        borderColor: alpha(theme.palette.primary.main, 0.32)
+                    },
+                    '&.Mui-disabled': {
+                        backgroundColor: theme.palette.background.paper,
+                        color: alpha(theme.palette.grey[900], 0.38),
+                        borderColor: alpha(paletteData.Grey.A900, 0.28)
+                    }
+                }
+            }
+        },
+        MuiTextField: {
+            defaultProps: {
+                size: 'medium'
+            },
+            styleOverrides: {
+                root: {
+                    '& .MuiOutlinedInput-root': {
+                        borderRadius: radius.sm,
+                        '& fieldset': {
+                            borderRadius: radius.sm
+                        }
+                    }
+                }
+            }
+        },
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: {
+                    borderRadius: radius.sm,
+                    '&.Mui-focused fieldset': {
+                        borderWidth: '1px'
+                    },
+                    '& input::placeholder': {
+                        color: '#8C9CAF',
+                        opacity: 1
+                    },
+                    '& .MuiSvgIcon-root': {
+                        fontSize: '18px'
+                    }
+                },
+                input: {
+                    padding: '11px 16px', // Default medium: 48px height
+                    height: 'auto',
+                    lineHeight: '24px',
+                    variants: [
+                        {
+                            props: { size: 'small' },
+                            style: {
+                                padding: '8px 16px',
+                                fontSize: '14px',
+                                fontWeight: 400,
+                                lineHeight: '20px',
+                                minHeight: '26px'
+                            }
+                        }
+                    ]
+                }
+            },
+            variants: [
+                {
+                    props: { size: 'large' },
+                    style: {
+                        '& .MuiOutlinedInput-input': {
+                            padding: '14px 16px' // Large: 54px height
+                        }
+                    }
+                }
+            ]
+        },
+        MuiInputBase: {
+            styleOverrides: {
+                root: {
+                    '&.MuiInputBase-sizeLarge': {
+                        fontSize: '16px'
+                    }
+                }
+            }
+        },
+        MuiSelect: {
+            styleOverrides: {
+                root: {
+                    '&.MuiOutlinedInput-root': {
+                        '& .MuiSvgIcon-root': {
+                            fontSize: '25px'
+                        },
+                        '&.MuiInputBase-sizeSmall': {
+                            '& .MuiSelect-select': {
+                                padding: '10px 25px 10px 15px',
+                                fontSize: '14px',
+                                lineHeight: '20px',
+                                // Note: :has() selector removed due to jsdom compatibility in tests
+                                // If SVG is present, padding should be handled via component-level sx prop
+                                '& svg': {
+                                    marginRight: '8px'
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        MuiAutocomplete: {
+            styleOverrides: {
+                root: {
+                    // Using "&&" to increase CSS specificity
+                    '&&': {
+                        '& .MuiOutlinedInput-root': {
+                            paddingLeft: '16px',
+                            borderRadius: radius.sm,
+                            '& fieldset.MuiOutlinedInput-notchedOutline': {
+                                borderRadius: radius.sm
+                            },
+                            '&.MuiInputBase-sizeSmall': {
+                                paddingTop: '8px',
+                                paddingBottom: '8px',
+                                paddingLeft: '16px',
+                                '& .MuiAutocomplete-input': {
+                                    padding: '0px 4px 0px 8px'
+                                }
+                            }
+                        }
+                    }
+                },
+                // Styling for chips in Autocomplete
+                tag: {
+                    margin: '2px'
+                }
+            }
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: {
+                    borderRadius: radius.md,
+                    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)',
+                    maxWidth: '570px'
+                },
+                paperFullScreen: {
+                    borderRadius: 0,
+                    maxWidth: '100%'
+                }
+            }
+        },
+        MuiDialogTitle: {
+            styleOverrides: {
+                root: {
+                    padding: '12px 32px',
+                    fontSize: 17,
+                    fontWeight: 400,
+                    lineHeight: 1.273,
+                    letterSpacing: '0'
+                }
+            }
+        },
+        MuiDialogContent: {
+            styleOverrides: {
+                root: {
+                    padding: '24px 32px'
+                }
+            }
+        },
+        MuiDialogActions: {
+            styleOverrides: {
+                root: {
+                    padding: '16px 32px'
+                }
+            }
+        },
+        MuiPopover: {
+            styleOverrides: {
+                paper: {
+                    borderRadius: radius.md,
+                    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)'
+                }
+            }
+        },
+        MuiAvatar: {
+            styleOverrides: {
+                root: {
+                    fontWeight: 600,
+                    '&.size-xs': {
+                        width: 18,
+                        height: 18,
+                        fontSize: '9.109px',
+                        fontWeight: 500,
+                        lineHeight: '18.219px',
+                        '& svg': {
+                            width: '50%',
+                            height: '50%'
+                        }
+                    },
+                    '&.size-s': {
+                        width: 28,
+                        height: 28,
+                        fontSize: '12.525px',
+                        fontWeight: 500,
+                        lineHeight: '18.219px',
+                        '& svg': {
+                            width: '50%',
+                            height: '50%'
+                        }
+                    },
+                    '&.size-m': {
+                        width: 36,
+                        height: 36,
+                        fontSize: '18.219px',
+                        fontWeight: 500,
+                        lineHeight: '27.328px',
+                        '& svg': {
+                            width: '50%',
+                            height: '50%'
+                        }
+                    },
+                    '&.size-l': {
+                        width: 54,
+                        height: 54,
+                        fontSize: '27.328px',
+                        fontWeight: 600,
+                        lineHeight: '36.438px',
+                        '& svg': {
+                            width: '50%',
+                            height: '50%'
+                        }
+                    },
+                    '&.size-xl': {
+                        width: 72,
+                        height: 72,
+                        fontSize: '36.438px',
+                        fontWeight: 600,
+                        lineHeight: '45.547px',
+                        '& svg': {
+                            width: '50%',
+                            height: '50%'
+                        }
+                    },
+                    '&.disabled': {
+                        color: theme.palette.primary.contrastText,
+                        background: theme.palette.grey[300],
+                        '& img': {
+                            filter: 'grayscale(1) brightness(2)',
+                            opacity: 0.5
+                        }
+                    },
+                    '&.displayInline': {
+                        display: 'inline-flex'
+                    },
+                    '&.border': {
+                        border: `2px solid ${theme.palette.background.paper}`
+                    },
+                    '&.innerBorder': {
+                        boxShadow: `inset 0px 0px 0px 1px ${theme.palette.divider}`
+                    },
+                    variants: [
+                        {
+                            props: { color: 'default' },
+                            style: {
+                                backgroundColor: theme.palette.background.paper,
+                                color: theme.palette.text.secondary
+                            }
+                        }
+                    ]
+                }
+            }
+        },
+        MuiToggleButtonGroup: {
+            styleOverrides: {
+                root: {
+                    borderColor: '#AEAEC0',
+                    '& .MuiToggleButton-root:not(.Mui-selected)': {
+                        color: '#8C9CAF',
+                        backgroundColor: alpha('#49454F', 0.08),
+                        '&:hover': {
+                            backgroundColor: alpha('#49454F', 0.08)
+                        },
+                        '& svg, & .MuiSvgIcon-root': {
+                            color: '#8C9CAF'
+                        }
+                    }
+                }
+            }
+        },
+        MuiToggleButton: {
+            styleOverrides: {
+                root: {
+                    color: '#525256',
+                    '&.Mui-selected': {
+                        color: '#243B55',
+                        backgroundColor: 'transparent',
+                        '&:hover': {
+                            backgroundColor: 'transparent'
+                        },
+                        '& svg, & .MuiSvgIcon-root': {
+                            color: theme.palette.primary.main
+                        }
+                    },
+                    variants: [
+                        {
+                            props: { size: 'medium' },
+                            style: {
+                                padding: '9px 24px'
+                            }
+                        }
+                    ]
+                }
+            }
+        },
+        MuiIconButton: {
+            styleOverrides: {
+                root: {
+                    color: alpha(paletteData.Grey[900], 0.48),
+                    padding: '4px'
+                }
+            }
+        },
+        MuiCheckbox: {
+            styleOverrides: {
+                root: {
+                    '&.MuiCheckbox-sizeSmall': {
+                        padding: '6px'
+                    }
+                }
+            }
+        },
+        MuiBackdrop: {
+            styleOverrides: {
+                root: {
+                    variants: [
+                        {
+                            props: { invisible: false },
+                            style: {
+                                backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.focusOpacity)
+                            }
+                        }
+                    ]
+                }
+            }
+        },
         MuiTypography: {
             styleOverrides: {
                 root: {
@@ -44,15 +441,98 @@ export const makeLightOverrides = (theme) => {
                 }
             }
         },
-        ...datePickerOverridesResult,
-        MuiAccordionSummary: accordionOverridesResult.MuiAccordionSummary,
+        MuiAccordion: {
+            styleOverrides: {
+                root: {
+                    '&::before': {
+                        display: 'none'
+                    }
+                }
+            }
+        },
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: {
+                    padding: '0',
+                    minHeight: '32px',
+                    '&.Mui-expanded': {
+                        minHeight: '32px'
+                    }
+                },
+                content: {
+                    fontSize: '14px',
+                    fontWeight: 500,
+                    lineHeight: '20px',
+                    color: alpha(paletteData.Grey[900], 0.9),
+                    margin: 0,
+                    '&.Mui-expanded': {
+                        margin: 0
+                    }
+                },
+                expandIconWrapper: {
+                    padding: '4px',
+                    color: alpha(paletteData.Grey[900], 0.48),
+                    borderRadius: '50%',
+                    '&:hover': {
+                        backgroundColor: alpha(paletteData.Primary.A400, 0.04)
+                    }
+                }
+            }
+        },
         MuiCssBaseline: {
             styleOverrides: {
-                ...(datePickerOverridesResult.MuiCssBaseline?.styleOverrides || {}),
-                ...(accordionOverridesResult.MuiCssBaseline?.styleOverrides || {})
+                '.MuiAccordion-root .MuiListItem-root': {
+                    padding: '0',
+                    borderRadius: '4px',
+                    '&:hover': {
+                        backgroundColor: alpha(paletteData.Grey.A900, 0.04)
+                    }
+                },
+                '.MuiAccordion-root .MuiListItem-root label': {
+                    fontSize: '14px',
+                    fontStyle: 'normal',
+                    fontWeight: 400,
+                    color: alpha(paletteData.Grey[900], 0.9)
+                }
             }
         },
-        MuiMenuItem: menuItemOverrides(theme),
-        MuiSwipeableDrawer: swipeableDrawerOverrides(theme)
+        MuiMenuItem: {
+            styleOverrides: {
+                root: {
+                    borderRadius: radius.md,
+                    '&&&:hover': {
+                        backgroundColor: `${alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)}`
+                    },
+                    [`&.${menuItemClasses.selected}`]: {
+                        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+                        '&:hover': {
+                            backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity +
+                                theme.palette.action.hoverOpacity)
+                        }
+                    }
+                }
+            }
+        },
+        MuiSwipeableDrawer: {
+            defaultProps: {
+                sx: {
+                    '& .MuiDrawer-paper': {
+                        borderTopLeftRadius: radius.md,
+                        borderTopRightRadius: radius.md,
+                        '&::before': {
+                            content: '""',
+                            display: 'block',
+                            width: '64px',
+                            height: '4px',
+                            backgroundColor: theme.palette.action.disabledBackground,
+                            borderRadius: radius.md,
+                            margin: '12px auto',
+                            marginTop: '30px',
+                            flexShrink: 0
+                        }
+                    }
+                }
+            }
+        }
     };
 };

package/dist/lib/makePalette.d.ts

@@ -1,2 +1,3 @@
 import { PaletteOptions } from '@mui/material/styles';
-export declare const makePalette: (mode?: "light" | "dark") => PaletteOptions;
+import { PaletteJson } from './types';
+export declare const makePalette: (mode?: "light" | "dark", palette?: PaletteJson) => PaletteOptions;

package/dist/lib/makePalette.js

@@ -1,60 +1,60 @@
 import paletteJson from './palette.json';
 const paletteData = paletteJson;
-export const makePalette = (mode = 'light') => {
+export const makePalette = (mode = 'light', palette = paletteData) => {
     return {
         mode,
         primary: {
-            light: paletteData.Primary[300],
-            main: paletteData.Primary[600],
-            dark: paletteData.Primary[800],
-            contrastText: paletteData.Primary.ContrastText
+            light: palette.Primary[300],
+            main: palette.Primary[600],
+            dark: palette.Primary[800],
+            contrastText: palette.Primary.ContrastText
         },
         secondary: {
-            light: paletteData.Secondary[300],
-            main: paletteData.Secondary[600],
-            dark: paletteData.Secondary[800],
-            contrastText: paletteData.Secondary.ContrastText
+            light: palette.Secondary[300],
+            main: palette.Secondary[600],
+            dark: palette.Secondary[800],
+            contrastText: palette.Secondary.ContrastText
         },
         error: {
-            light: paletteData.Error[300],
-            main: paletteData.Error[600],
-            dark: paletteData.Error[800],
-            contrastText: paletteData.Error.ContrastText
+            light: palette.Error[300],
+            main: palette.Error[600],
+            dark: palette.Error[800],
+            contrastText: palette.Error.ContrastText
         },
         warning: {
-            light: paletteData.Warning[300],
-            main: paletteData.Warning[500],
-            dark: paletteData.Warning[700],
-            contrastText: paletteData.Warning.ContrastText
+            light: palette.Warning[300],
+            main: palette.Warning[500],
+            dark: palette.Warning[700],
+            contrastText: palette.Warning.ContrastText
         },
         success: {
-            light: paletteData.Success[300],
-            main: paletteData.Success[600],
-            dark: paletteData.Success[800],
-            contrastText: paletteData.Success.ContrastText
+            light: palette.Success[300],
+            main: palette.Success[600],
+            dark: palette.Success[800],
+            contrastText: palette.Success.ContrastText
         },
         info: {
-            light: paletteData.Info[300],
-            main: paletteData.Info[600],
-            dark: paletteData.Info[800],
+            light: palette.Info[300],
+            main: palette.Info[600],
+            dark: palette.Info[800],
             contrastText: '#fff'
         },
         grey: {
-            50: paletteData.Grey[50],
-            100: paletteData.Grey[100],
-            200: paletteData.Grey[200],
-            300: paletteData.Grey[300],
-            400: paletteData.Grey[400],
-            500: paletteData.Grey[500],
-            600: paletteData.Grey[600],
-            700: paletteData.Grey[700],
-            800: paletteData.Grey[800],
-            900: paletteData.Grey[900],
-            A100: paletteData.Grey.A100,
-            A200: paletteData.Grey.A200,
-            A400: paletteData.Grey.A400,
-            A700: paletteData.Grey.A700,
-            A900: paletteData.Grey.A900
+            50: palette.Grey[50],
+            100: palette.Grey[100],
+            200: palette.Grey[200],
+            300: palette.Grey[300],
+            400: palette.Grey[400],
+            500: palette.Grey[500],
+            600: palette.Grey[600],
+            700: palette.Grey[700],
+            800: palette.Grey[800],
+            900: palette.Grey[900],
+            A100: palette.Grey.A100,
+            A200: palette.Grey.A200,
+            A400: palette.Grey.A400,
+            A700: palette.Grey.A700,
+            A900: palette.Grey.A900
         },
         text: {
             primary: '#000000',
@@ -67,7 +67,7 @@ export const makePalette = (mode = 'light') => {
         },
         divider: '#E1E3E6',
         action: {
-            active: paletteData.Primary['A400'],
+            active: palette.Primary['A400'],
             hover: 'rgba(246, 126, 53, 0.04)',
             selected: 'rgba(246, 126, 53, 0.08)',
             disabled: 'rgba(0, 0, 0, 0.32)',