@linagora/twake-mui 1.2.0

package/dist/lib/overrides/accordionOverrides.js

@@ -0,0 +1,63 @@
+import { alpha } from '@mui/material/styles';
+import paletteJson from '../palette.json';
+var paletteData = paletteJson;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export var accordionOverrides = function (theme) {
+    return {
+        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: {
+                '.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)
+                }
+            }
+        }
+    };
+};

package/dist/lib/overrides/autocompleteOverrides.js

@@ -0,0 +1,31 @@
+import { radius } from '../radius';
+export var autocompleteOverrides = function () {
+    return {
+        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'
+            }
+        }
+    };
+};

package/dist/lib/overrides/avatarOverrides.js

@@ -0,0 +1,85 @@
+export var avatarOverrides = function (theme) {
+    return {
+        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 ".concat(theme.palette.background.paper)
+                },
+                '&.innerBorder': {
+                    boxShadow: "inset 0px 0px 0px 1px ".concat(theme.palette.divider)
+                }
+            },
+            colorDefault: {
+                backgroundColor: theme.palette.background.paper,
+                color: theme.palette.text.secondary
+            }
+        }
+    };
+};

package/dist/lib/overrides/backdropOverrides.js

@@ -0,0 +1,17 @@
+import { alpha } from '@mui/material/styles';
+export var backdropOverrides = function (theme) {
+    return {
+        styleOverrides: {
+            root: {
+                variants: [
+                    {
+                        props: { invisible: false },
+                        style: {
+                            backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.focusOpacity)
+                        }
+                    }
+                ]
+            }
+        }
+    };
+};

package/dist/lib/overrides/buttonOverrides.js

@@ -0,0 +1,86 @@
+import { alpha } from '@mui/material/styles';
+import paletteJson from '../palette.json';
+import { radius } from '../radius';
+var paletteData = paletteJson;
+export var buttonOverrides = function (theme) {
+    return {
+        styleOverrides: {
+            root: {
+                borderRadius: radius.pill,
+                boxShadow: 'none',
+                '&:hover': {
+                    boxShadow: 'none'
+                },
+                '&:active': {
+                    boxShadow: 'none'
+                },
+                '&:focus': {
+                    boxShadow: 'none'
+                }
+            },
+            contained: {
+                boxShadow: 'none',
+                '&:hover': {
+                    boxShadow: 'none'
+                },
+                '&:active': {
+                    boxShadow: 'none'
+                },
+                '&:focus': {
+                    boxShadow: 'none'
+                }
+            },
+            containedSecondary: {
+                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
+                }
+            },
+            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)
+                }
+            },
+            text: {
+            // Text button overrides
+            },
+            sizeSmall: {
+                padding: '6px 16px'
+            },
+            containedSizeSmall: {
+                paddingTop: '7px',
+                paddingBottom: '7px'
+            },
+            sizeMedium: {
+                padding: '9px 24px'
+            },
+            containedSizeMedium: {
+                paddingTop: '10px',
+                paddingBottom: '10px'
+            },
+            sizeLarge: {
+                padding: '12px 32px'
+            },
+            containedSizeLarge: {
+                paddingTop: '13px',
+                paddingBottom: '13px'
+            }
+        }
+    };
+};

package/dist/lib/overrides/checkboxOverrides.js

@@ -0,0 +1,11 @@
+export var checkboxOverrides = function () {
+    return {
+        styleOverrides: {
+            root: {
+                '&.MuiCheckbox-sizeSmall': {
+                    padding: '6px'
+                }
+            }
+        }
+    };
+};

package/dist/lib/overrides/datePickerOverrides.js

@@ -0,0 +1,143 @@
+import { alpha } from '@mui/material/styles';
+// DatePicker component overrides using nested selectors for higher specificity
+export var datePickerOverrides = function (theme) {
+    return {
+        MuiCssBaseline: {
+            styleOverrides: {
+                '.MuiDateCalendar-root.MuiDateCalendar-root': {
+                    width: '230px',
+                    maxWidth: '230px',
+                    height: '300px',
+                    maxHeight: '300px'
+                },
+                '.MuiDateCalendar-root .MuiDayCalendar-slideTransition': {
+                    minHeight: '208px'
+                },
+                '.MuiDateCalendar-root .MuiPickersCalendarHeader-root': {
+                    padding: '6px 4px',
+                    maxHeight: '32px',
+                    minHeight: '32px'
+                },
+                '.MuiDateCalendar-root .MuiPickersCalendarHeader-label': {
+                    fontSize: '14px',
+                    fontStyle: 'normal',
+                    fontWeight: 600,
+                    lineHeight: '20px',
+                    color: alpha(theme.palette.grey[900], 0.9)
+                },
+                '.MuiDateCalendar-root .MuiPickersCalendarHeader-switchViewButton': {
+                    padding: '0',
+                    width: '32px',
+                    height: '32px',
+                    color: theme.palette.grey[900]
+                },
+                '.MuiDateCalendar-root .MuiPickersCalendarHeader-switchViewIcon': {
+                    fontSize: '15px'
+                },
+                '.MuiDateCalendar-root .MuiPickersArrowSwitcher-button': {
+                    padding: '0',
+                    width: '32px',
+                    height: '32px',
+                    color: alpha(theme.palette.grey[900], 0.48)
+                },
+                '.MuiDateCalendar-root .MuiDayCalendar-weekDayLabel': {
+                    fontSize: '10px',
+                    fontStyle: 'normal',
+                    fontWeight: 500,
+                    lineHeight: '16px',
+                    height: '32px',
+                    width: '32px',
+                    margin: '0',
+                    color: alpha(theme.palette.grey[900], 0.48)
+                },
+                '.MuiDateCalendar-root .MuiPickersDay-root': {
+                    fontSize: '10px',
+                    fontStyle: 'normal',
+                    fontWeight: 500,
+                    lineHeight: '16px',
+                    height: '32px',
+                    width: '32px',
+                    margin: '0',
+                    color: alpha(theme.palette.grey[900], 0.9)
+                },
+                '.MuiDateCalendar-root .MuiPickersDay-root.Mui-selected': {
+                    backgroundColor: theme.palette.primary.main,
+                    '&:hover': {
+                        backgroundColor: theme.palette.primary.dark
+                    }
+                },
+                '.MuiDateCalendar-root .MuiButtonBase-root.MuiPickersDay-root.Mui-selected': {
+                    backgroundColor: "".concat(theme.palette.primary.main),
+                    '&:hover': {
+                        backgroundColor: "".concat(theme.palette.primary.dark)
+                    }
+                },
+                '.MuiDateCalendar-root .MuiMonthCalendar-root': {
+                    width: '215px'
+                },
+                '.MuiDateCalendar-root .MuiMonthCalendar-button': {
+                    fontSize: '14px',
+                    lineHeight: 1,
+                    height: '30px',
+                    width: '55px'
+                },
+                '.MuiDateCalendar-root .MuiMonthCalendar-button[tabindex="0"]': {
+                    background: 'transparent'
+                },
+                '.MuiDateCalendar-root .MuiMonthCalendar-button.Mui-selected': {
+                    color: theme.palette.primary.contrastText,
+                    background: theme.palette.primary.main,
+                    '&:hover': {
+                        background: theme.palette.primary.dark
+                    },
+                    '&:focus': {
+                        background: theme.palette.primary.dark
+                    }
+                },
+                '.MuiDateCalendar-root .MuiMonthCalendar-button.Mui-selected[tabindex="0"]': {
+                    color: theme.palette.primary.contrastText,
+                    background: theme.palette.primary.main,
+                    '&:hover': {
+                        background: theme.palette.primary.dark
+                    },
+                    '&:focus': {
+                        background: theme.palette.primary.dark
+                    }
+                },
+                '.MuiDateCalendar-root .MuiYearCalendar-root': {
+                    width: '245px',
+                    maxWidth: '245px'
+                },
+                '.MuiDateCalendar-root .MuiYearCalendar-button': {
+                    fontSize: '14px',
+                    lineHeight: 1,
+                    height: '30px',
+                    width: '55px'
+                },
+                '.MuiDateCalendar-root .MuiYearCalendar-button[tabindex="0"]': {
+                    background: 'transparent'
+                },
+                '.MuiDateCalendar-root .MuiYearCalendar-button.Mui-selected': {
+                    color: theme.palette.primary.contrastText,
+                    background: theme.palette.primary.main,
+                    '&:hover': {
+                        background: theme.palette.primary.dark
+                    },
+                    '&:focus': {
+                        background: theme.palette.primary.dark
+                    }
+                },
+                '.MuiDateCalendar-root .MuiYearCalendar-button.Mui-selected[tabindex="0"]': {
+                    color: theme.palette.primary.contrastText,
+                    background: theme.palette.primary.main,
+                    '&:hover': {
+                        background: theme.palette.primary.dark
+                    },
+                    '&:focus': {
+                        background: theme.palette.primary.dark
+                    }
+                }
+            }
+        }
+    };
+};

package/dist/lib/overrides/dialogOverrides.js

@@ -0,0 +1,43 @@
+import { radius } from '../radius';
+export var dialogOverrides = function () {
+    return {
+        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'
+            }
+        }
+    };
+};
+export var dialogTitleOverrides = function () {
+    return {
+        styleOverrides: {
+            root: {
+                padding: '12px 32px',
+                fontSize: 17,
+                fontWeight: 400,
+                lineHeight: 1.273,
+                letterSpacing: '0'
+            }
+        }
+    };
+};
+export var dialogContentOverrides = function () {
+    return {
+        styleOverrides: {
+            root: {
+                padding: '24px 32px'
+            }
+        }
+    };
+};
+export var dialogActionsOverrides = function () {
+    return {
+        styleOverrides: {
+            root: {
+                padding: '16px 32px'
+            }
+        }
+    };
+};

package/dist/lib/overrides/iconButtonOverrides.js

@@ -0,0 +1,13 @@
+import { alpha } from '@mui/material/styles';
+import paletteJson from '../palette.json';
+var paletteData = paletteJson;
+export var iconButtonOverrides = function () {
+    return {
+        styleOverrides: {
+            root: {
+                color: alpha(paletteData.Grey[900], 0.48),
+                padding: '4px'
+            }
+        }
+    };
+};

package/dist/lib/overrides/menuItemOverrides.js

@@ -0,0 +1,24 @@
+import { menuItemClasses } from '@mui/material/MenuItem';
+import { alpha } from '@mui/material/styles';
+import { radius } from '../radius';
+export var menuItemOverrides = function (theme) {
+    var _a;
+    return {
+        styleOverrides: {
+            root: (_a = {
+                    borderRadius: radius.md,
+                    '&&&:hover': {
+                        backgroundColor: "".concat(alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity))
+                    }
+                },
+                _a["&.".concat(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)
+                    }
+                },
+                _a)
+        }
+    };
+};

package/dist/lib/overrides/popoverOverrides.js

@@ -0,0 +1,11 @@
+import { radius } from '../radius';
+export var popoverOverrides = function () {
+    return {
+        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)'
+            }
+        }
+    };
+};

package/dist/lib/overrides/textFieldOverrides.js

@@ -0,0 +1,90 @@
+import { radius } from '../radius';
+export var textFieldOverrides = function () {
+    return {
+        defaultProps: {
+            size: 'medium'
+        },
+        styleOverrides: {
+            root: {
+                '& .MuiOutlinedInput-root': {
+                    borderRadius: radius.sm,
+                    '& fieldset': {
+                        borderRadius: radius.sm
+                    }
+                }
+            }
+        }
+    };
+};
+export var outlinedInputOverrides = function () {
+    return {
+        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'
+            },
+            inputSizeSmall: {
+                padding: '8px 16px',
+                fontSize: '14px',
+                fontWeight: 400,
+                lineHeight: '20px',
+                minHeight: '26px'
+            }
+        },
+        variants: [
+            {
+                props: { size: 'large' },
+                style: {
+                    '& .MuiOutlinedInput-input': {
+                        padding: '14px 16px' // Large: 54px height
+                    }
+                }
+            }
+        ]
+    };
+};
+export var inputBaseOverrides = function () {
+    return {
+        styleOverrides: {
+            root: {
+                '&.MuiInputBase-sizeLarge': {
+                    fontSize: '16px'
+                }
+            }
+        }
+    };
+};
+export var selectOverrides = function () {
+    return {
+        styleOverrides: {
+            root: {
+                '&.MuiOutlinedInput-root': {
+                    '&.MuiInputBase-sizeSmall': {
+                        '& .MuiSelect-select': {
+                            padding: '11px 16px',
+                            // 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'
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    };
+};

package/dist/lib/overrides/toggleButtonOverrides.js

@@ -0,0 +1,42 @@
+import { alpha } from '@mui/material/styles';
+export var toggleButtonGroupOverrides = function () {
+    return {
+        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'
+                    }
+                }
+            }
+        }
+    };
+};
+export var toggleButtonOverrides = function (theme) {
+    return {
+        styleOverrides: {
+            root: {
+                color: '#525256',
+                '&.Mui-selected': {
+                    color: '#243B55',
+                    backgroundColor: 'transparent',
+                    '&:hover': {
+                        backgroundColor: 'transparent'
+                    },
+                    '& svg, & .MuiSvgIcon-root': {
+                        color: theme.palette.primary.main
+                    }
+                }
+            },
+            sizeMedium: {
+                padding: '9px 24px'
+            }
+        }
+    };
+};