@linagora/twake-mui 5.1.1 → 5.2.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# @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/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;
@@ -103,3 +106,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": "5.2.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",