@linagora/twake-mui 1.6.1 → 3.0.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# @linagora/twake-mui [3.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@2.0.0...@linagora/twake-mui@3.0.0) (2026-07-27)
+
+
+### Features
+
+* **twake-mui:** Export mui/lab components and upgrade mui ([9b1d516](https://github.com/linagora/twake-ui/commit/9b1d5162464daa8bfbb8da74c001c0ade3bf0cf4))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** You must have `"@mui/material": "^9.2.0"` and "@mui/lab": "^9.0.0-beta.6"
+
+# [2.0.0](https://github.com/linagora/twake-ui/compare/v1.6.1...v2.0.0) (2026-06-10)
+
+
+* Merge pull request [#23](https://github.com/linagora/twake-ui/issues/23) from linagora/migrate-to-mui-v9 ([a0103e7](https://github.com/linagora/twake-ui/commit/a0103e76cc988ceb49611beaa72cd3df09425673))
+
+
+### Bug Fixes
+
+* **CI:** use NPM_TOKEN_IN_VAULT for publishing ([967b795](https://github.com/linagora/twake-ui/commit/967b7956d3e13d3ba744ea674606646ccf7e85e3))
+
+
+### Features
+
+* makePalette now has palette as an argument and is exported into the lib ([5a9850f](https://github.com/linagora/twake-ui/commit/5a9850f21dd9befec6a20d652ee306478c943a20))
+
+
+### BREAKING CHANGES
+
+* updated to mui v9
+
 ## [1.6.1](https://github.com/linagora/twake-ui/compare/v1.6.0...v1.6.1) (2026-05-06)
 
 

package/README.md

@@ -1,6 +1,6 @@
 # twake-mui
 
-MUI v7 theme system for Twake Calendar and other Twake applications.
+MUI v9 theme system for Twake Calendar and other Twake applications.
 
 ## Requirements
 
@@ -58,7 +58,7 @@ function MyComponent() {
 
 - **Palette System**: Techno-independent color definitions
 - **Component Overrides**: Pre-styled Button, TextField, Dialog components
-- **MUI v7 Compatible**: Built for Material-UI v7
+- **MUI v9 Compatible**: Built for Material-UI v9
 
 ## Development
 

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 export * from '@mui/material';
+export * from '@mui/lab';
 export { createTheme, ThemeProvider, styled, alpha, darken, lighten, useTheme } from '@mui/material/styles';
 export { default as Autocomplete } from '@mui/material/Autocomplete';
 export { TwakeMuiThemeProvider } from './components/ThemeProvider';
+export { makePalette } from './lib/makePalette';
 export { theme } from './lib/theme';
 export type { TwakeTheme } from './lib/theme';
 export { radius } from './lib/radius';

package/dist/index.js

@@ -1,7 +1,9 @@
 export * from '@mui/material';
+export * from '@mui/lab';
 export { createTheme, ThemeProvider, styled, alpha, darken, lighten, useTheme } from '@mui/material/styles';
 export { default as Autocomplete } from '@mui/material/Autocomplete';
 export { TwakeMuiThemeProvider } from './components/ThemeProvider';
+export { makePalette } from './lib/makePalette';
 export { theme } from './lib/theme';
 export { radius } from './lib/radius';
 export { Avatar, default as AvatarDefault } from './components/Avatar';

package/dist/lib/makeDarkOverrides.d.ts

@@ -1,2 +1,2 @@
-import { Theme, Components } from '@mui/material/styles';
-export declare const makeDarkOverrides: (theme: Theme) => Components;
+import { Theme, ThemeOptions } from '@mui/material/styles';
+export declare const makeDarkOverrides: (theme: Theme) => NonNullable<ThemeOptions["components"]>;

package/dist/lib/makeLightOverrides.d.ts

@@ -1,2 +1,2 @@
-import { Theme, Components } from '@mui/material/styles';
-export declare const makeLightOverrides: (theme: Theme) => Components;
+import { Theme, ThemeOptions } from '@mui/material/styles';
+export declare const makeLightOverrides: (theme: Theme) => NonNullable<ThemeOptions["components"]>;

package/dist/lib/makeLightOverrides.js

@@ -240,11 +240,11 @@ export const makeLightOverrides = (theme) => {
         MuiDialogTitle: {
             styleOverrides: {
                 root: {
+                    ...theme.typography.h3,
                     padding: '12px 32px',
-                    fontSize: 17,
-                    fontWeight: 400,
-                    lineHeight: 1.273,
-                    letterSpacing: '0'
+                    [theme.breakpoints.down('sm')]: {
+                        ...theme.typography.h4
+                    }
                 }
             }
         },
@@ -481,146 +481,6 @@ export const makeLightOverrides = (theme) => {
         },
         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: `${theme.palette.primary.main}`,
-                    '&:hover': {
-                        backgroundColor: `${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
-                    }
-                },
-                '.MuiButtonBase-root.MuiMenuItem-root.MuiDigitalClock-item.Mui-selected': {
-                    backgroundColor: theme.palette.primary.main,
-                    color: theme.palette.primary.contrastText,
-                    '&:hover': {
-                        backgroundColor: theme.palette.primary.dark
-                    }
-                },
                 '.MuiAccordion-root .MuiListItem-root': {
                     padding: '0',
                     borderRadius: '4px',

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)',

package/dist/stories/Dialog.stories.js

@@ -30,7 +30,7 @@ export const Screenshot = {
         React.createElement("section", null,
             React.createElement("h3", { style: { marginBottom: '12px' } }, "Dialog Components"),
             React.createElement(Stack, { spacing: 2 },
-                React.createElement(Dialog, { open: true },
+                React.createElement(Dialog, { open: true, disableAutoFocus: true },
                     React.createElement(DialogTitle, null, "Standard Dialog"),
                     React.createElement(DialogContent, null,
                         React.createElement(DialogContentText, null, "This demonstrates the standard dialog appearance with all its subcomponents styled according to the Twake theme.")),

package/dist/stories/Typography.stories.js

@@ -45,6 +45,6 @@ export const Screenshot = {
                 React.createElement(Typography, { color: "textPrimary" }, "Text primary color"),
                 React.createElement(Typography, { color: "textSecondary" }, "Text secondary color"),
                 React.createElement(Typography, { color: "textDisabled" }, "Text disabled color"),
-                React.createElement(Typography, { color: "text.primary" }, "Text primary color"),
-                React.createElement(Typography, { color: "text.secondary" }, "Text secondary color")))))
+                React.createElement(Typography, { sx: { color: 'text.primary' } }, "Text primary color"),
+                React.createElement(Typography, { sx: { color: 'text.secondary' } }, "Text secondary color")))))
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "1.6.1",
-  "description": "MUI v7 theme system for Twake applications",
+  "version": "3.0.0",
+  "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
   "engines": {
@@ -50,7 +50,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@mui/material": "^7.1.2",
+    "@mui/lab": "^9.0.0-beta.6",
+    "@mui/material": "^9.2.0",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -59,8 +60,9 @@
     "@argos-ci/storybook": "5.3.2",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "7.3.10",
-    "@mui/material": "^7.1.2",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/lab": "^9.0.0-beta.6",
+    "@mui/material": "^9.2.0",
     "@storybook/addon-docs": "10.3.5",
     "@storybook/addon-vitest": "10.3.5",
     "@storybook/builder-vite": "10.3.5",
@@ -73,7 +75,7 @@
     "eslint-config-cozy-app": "7.0.0",
     "eslint-plugin-storybook": "10.3.5",
     "lodash": "4.18.1",
-    "playwright": "1.59.1",
+    "playwright": "1.60.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "10.3.5",