@linagora/twake-mui 5.1.1 → 6.0.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# @linagora/twake-mui [6.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@5.2.0...@linagora/twake-mui@6.0.0) (2026-09-08)
+
+
+### Features
+
+* **twake-mui:** Drop app-specific overrides from the theme ([b67cec4](https://github.com/linagora/twake-ui/commit/b67cec4bd20ebc9c04d998966e0f8c00c72830e1))
+* **twake-mui:** Remove inert rules from light overrides ([d50595c](https://github.com/linagora/twake-ui/commit/d50595c35ac30e6e2a32be74a0cde5b45798cc44))
+
+
+### BREAKING CHANGES
+
+* **twake-mui:** Custom style for `Popover`, `Backdrop`,
+`SwipeableDrawer` and `ListItem inside Accordion` has been
+removed
+* **twake-mui:** size="large" no longer typechecks on TextField and InputBase.
+
+# @linagora/twake-mui [5.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@5.1.1...@linagora/twake-mui@5.2.0) (2026-09-08)
+
+
+### Bug Fixes
+
+* **twake-mui:** Type background.contrast on the MUI palette ([0985fcb](https://github.com/linagora/twake-ui/commit/0985fcbc880b73575ffd817ab70b724979d74481))
+
+
+### Features
+
+* **twake-mui:** Add border and text.icon palette keys from cozy-ui ([9082d24](https://github.com/linagora/twake-ui/commit/9082d2416ad8be62772627bebe4daa27f4eabeca))
+* **twake-mui:** Align elevation shadows with cozy-ui ([64d3d5c](https://github.com/linagora/twake-ui/commit/64d3d5cce9e02ca013317ced302ba557a03d9de3))
+
 ## @linagora/twake-mui [5.1.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@5.1.0...@linagora/twake-mui@5.1.1) (2026-09-08)
 
 

package/dist/lib/lightOverrides.js

@@ -104,21 +104,6 @@ export const lightOverrides = {
             })
         }
     },
-    MuiTextField: {
-        defaultProps: {
-            size: 'medium'
-        },
-        styleOverrides: {
-            root: {
-                '& .MuiOutlinedInput-root': {
-                    borderRadius: radius.sm,
-                    '& fieldset': {
-                        borderRadius: radius.sm
-                    }
-                }
-            }
-        }
-    },
     MuiOutlinedInput: {
         styleOverrides: {
             root: ({ theme }) => ({
@@ -151,25 +136,6 @@ export const lightOverrides = {
                     }
                 ]
             }
-        },
-        variants: [
-            {
-                props: { size: 'large' },
-                style: {
-                    '& .MuiOutlinedInput-input': {
-                        padding: '14px 16px' // Large: 54px height
-                    }
-                }
-            }
-        ]
-    },
-    MuiInputBase: {
-        styleOverrides: {
-            root: {
-                '&.MuiInputBase-sizeLarge': {
-                    fontSize: '16px'
-                }
-            }
         }
     },
     MuiSelect: {
@@ -261,14 +227,6 @@ export const lightOverrides = {
             }
         }
     },
-    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)'
-            }
-        }
-    },
     MuiChip: {
         styleOverrides: {
             root: {
@@ -422,20 +380,6 @@ export const lightOverrides = {
             }
         }
     },
-    MuiBackdrop: {
-        styleOverrides: {
-            root: {
-                variants: [
-                    {
-                        props: { invisible: false },
-                        style: ({ theme }) => ({
-                            backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.focusOpacity)
-                        })
-                    }
-                ]
-            }
-        }
-    },
     MuiAccordion: {
         styleOverrides: {
             root: {
@@ -556,23 +500,6 @@ export const lightOverrides = {
             })
         }
     },
-    MuiCssBaseline: {
-        styleOverrides: theme => ({
-            '.MuiAccordion-root .MuiListItem-root': {
-                padding: '0',
-                borderRadius: '4px',
-                '&:hover': {
-                    backgroundColor: alpha(theme.palette.grey[900], 0.04)
-                }
-            },
-            '.MuiAccordion-root .MuiListItem-root label': {
-                fontSize: '14px',
-                fontStyle: 'normal',
-                fontWeight: 400,
-                color: alpha(theme.palette.grey[900], 0.9)
-            }
-        })
-    },
     MuiMenuItem: {
         styleOverrides: {
             root: ({ theme }) => ({
@@ -589,26 +516,5 @@ export const lightOverrides = {
                 }
             })
         }
-    },
-    MuiSwipeableDrawer: {
-        defaultProps: {
-            sx: theme => ({
-                '& .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,6 +1,7 @@
 import { PaletteOptions } from '@mui/material/styles';
-import { PaletteJson, BackgroundPalette, GreyPalette } from './types';
+import { PaletteJson, BackgroundPalette, GreyPalette, BorderPalette } from './types';
 export declare const makePalette: (mode?: "light" | "dark", palette?: PaletteJson) => PaletteOptions & {
     background: BackgroundPalette;
     grey: GreyPalette;
+    border: BorderPalette;
 };

package/dist/lib/makePalette.js

@@ -61,13 +61,22 @@ export const makePalette = (mode = 'light', palette = paletteData) => {
             text: {
                 primary: palette.Common.white,
                 secondary: alpha(palette.Common.white, 0.64),
-                disabled: alpha(palette.Common.white, 0.4)
+                disabled: alpha(palette.Common.white, 0.4),
+                icon: palette.Common.white
             },
             background: {
                 default: palette.Grey.A400,
                 paper: palette.Grey[800],
                 contrast: alpha(palette.Common.white, 0.072)
             },
+            border: {
+                main: alpha(palette.Common.white, 0.24),
+                disabled: alpha(palette.Common.white, 0.12),
+                ghost: alpha(palette.Common.white, 0.48),
+                ghostDisabled: alpha(palette.Common.white, 0.24),
+                opacity: 0.48,
+                ghostOpacity: 0.48
+            },
             divider: alpha(palette.Common.white, 0.16),
             action: {
                 active: palette.Common.white,
@@ -142,13 +151,22 @@ export const makePalette = (mode = 'light', palette = paletteData) => {
         text: {
             primary: alpha(palette.Grey[900], 0.9),
             secondary: alpha(palette.Grey[900], 0.64),
-            disabled: alpha(palette.Grey[900], 0.32)
+            disabled: alpha(palette.Grey[900], 0.32),
+            icon: alpha(palette.Grey[900], 0.72)
         },
         background: {
             default: palette.Grey[100],
             paper: palette.Common.white,
             contrast: alpha(palette.Grey[900], 0.048)
         },
+        border: {
+            main: alpha(palette.Grey[900], 0.16),
+            disabled: alpha(palette.Grey[900], 0.08),
+            ghost: alpha(palette.Grey[900], 0.48),
+            ghostDisabled: alpha(palette.Grey[900], 0.16),
+            opacity: 0.32,
+            ghostOpacity: 0.48
+        },
         divider: alpha(palette.Grey[900], 0.12),
         action: {
             active: alpha(palette.Grey[900], 0.56),

package/dist/lib/makeShadows.d.ts

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

package/dist/lib/makeShadows.js

@@ -0,0 +1,52 @@
+import { alpha } from '@mui/material/styles';
+import paletteJson from './palette.json';
+const paletteData = paletteJson;
+/**
+ * Each elevation is two offset layers plus a constant hairline outline.
+ * Tuple is [y1, blur1, spread1, opacity1, y2, blur2, spread2, opacity2];
+ * the x offset is always 0.
+ */
+const elevations = [
+    [2, 4, 0, 0.08, 4, 16, 0, 0.06],
+    [3, 5, 0, 0.09, 4, 17, 0, 0.07],
+    [3, 5, -1, 0.09, 5, 19, 1, 0.08],
+    [3, 6, -1, 0.1, 5, 20, 1, 0.08],
+    [4, 6, -1, 0.11, 5, 22, 1, 0.09],
+    [4, 7, -2, 0.11, 6, 23, 2, 0.1],
+    [5, 7, -2, 0.12, 6, 24, 2, 0.11],
+    [5, 8, -2, 0.13, 6, 26, 2, 0.11],
+    [5, 8, -3, 0.14, 7, 27, 3, 0.12],
+    [6, 9, -3, 0.14, 7, 29, 3, 0.13],
+    [6, 9, -3, 0.15, 7, 30, 3, 0.14],
+    [7, 10, -4, 0.16, 8, 31, 4, 0.15],
+    [7, 10, -4, 0.16, 8, 33, 4, 0.15],
+    [8, 11, -5, 0.17, 9, 34, 5, 0.16],
+    [8, 11, -5, 0.18, 9, 35, 5, 0.17],
+    [9, 12, -5, 0.18, 9, 37, 5, 0.18],
+    [9, 12, -6, 0.19, 10, 38, 6, 0.19],
+    [9, 13, -6, 0.2, 10, 40, 6, 0.19],
+    [10, 13, -6, 0.21, 10, 41, 6, 0.2],
+    [10, 14, -7, 0.21, 11, 42, 7, 0.21],
+    [11, 14, -7, 0.22, 11, 44, 7, 0.22],
+    [11, 15, -7, 0.23, 11, 45, 7, 0.22],
+    [12, 15, -8, 0.23, 12, 47, 8, 0.23],
+    [12, 16, -8, 0.24, 12, 48, 8, 0.24]
+];
+const OUTLINE_OPACITY = 0.12;
+/**
+ * cozy-ui defines a flat 26th elevation outside the ramp. MUI's `Shadows`
+ * contract stops at 25, so `theme.shadows[25]` is reachable at runtime but not
+ * through the type. Kept to stay iso with cozy-ui.
+ */
+const EXTRA_ELEVATION_OPACITY = 0.04;
+export const makeShadows = (mode = 'light', palette = paletteData) => {
+    const shadowColor = mode === 'dark' ? palette.Common.black : palette.Grey[900];
+    const outline = `0px 0px 0px 0.5px ${alpha(shadowColor, OUTLINE_OPACITY)}`;
+    const shadows = elevations.map(([y1, blur1, spread1, o1, y2, blur2, spread2, o2]) => [
+        `0px ${y1}px ${blur1}px ${spread1}px ${alpha(shadowColor, o1)}`,
+        `0px ${y2}px ${blur2}px ${spread2}px ${alpha(shadowColor, o2)}`,
+        outline
+    ].join(', '));
+    const extraElevation = `0px 1px 4px ${alpha(shadowColor, EXTRA_ELEVATION_OPACITY)}`;
+    return ['none', ...shadows, extraElevation];
+};

package/dist/lib/makeTheme.js

@@ -2,6 +2,7 @@ import { createTheme } from '@mui/material/styles';
 import { darkOverrides } from './darkOverrides';
 import { lightOverrides } from './lightOverrides';
 import { makePalette } from './makePalette';
+import { makeShadows } from './makeShadows';
 import { makeTypography } from './makeTypography';
 // DatePicker styles are applied through component overrides
 const themesCommonConfig = {
@@ -27,7 +28,8 @@ export const makeTheme = (mode = 'light') => {
     const theme = createTheme({
         ...themesCommonConfig,
         palette,
-        typography
+        typography,
+        shadows: makeShadows(mode)
     });
     const components = mode === 'dark' ? darkOverrides : lightOverrides;
     // Create the final theme with components

package/dist/lib/types.d.ts

@@ -57,6 +57,9 @@ export interface BorderPalette {
     main: string;
     disabled: string;
     ghost: string;
+    ghostDisabled: string;
+    opacity: number;
+    ghostOpacity: number;
 }
 export interface PaletteJson {
     Primary: PaletteColor;
@@ -69,16 +72,6 @@ export interface PaletteJson {
     Common: CommonColor;
 }
 export type TypographyOptions = TypographyVariantsOptions;
-declare module '@mui/material/TextField' {
-    interface TextFieldPropsSizeOverrides {
-        large: true;
-    }
-}
-declare module '@mui/material/InputBase' {
-    interface InputBasePropsSizeOverrides {
-        large: true;
-    }
-}
 export interface TypographyConfig {
     fontFamily?: string;
     fontSize?: number;
@@ -103,3 +96,22 @@ export interface TypographyVariants {
     overline: TypographyConfig;
 }
 export type MakeTypography = () => TypographyOptions;
+/**
+ * Twake additions on top of the MUI palette, mirroring cozy-ui. MUI does not
+ * declare them, so without this augmentation consumers reading
+ * `theme.palette.background.contrast` get a type error.
+ */
+declare module '@mui/material/styles' {
+    interface TypeBackground {
+        contrast: string;
+    }
+    interface TypeText {
+        icon: string;
+    }
+    interface Palette {
+        border: BorderPalette;
+    }
+    interface PaletteOptions {
+        border?: Partial<BorderPalette>;
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "5.1.1",
+  "version": "6.0.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",