@linagora/twake-mui 9.1.0 → 9.3.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# @linagora/twake-mui [9.3.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.2.0...@linagora/twake-mui@9.3.0) (2026-09-23)
+
+
+### Features
+
+* **twake-mui:** Migrate Tooltip from cozy-ui ([6a5263a](https://github.com/linagora/twake-ui/commit/6a5263a2d5246798a1d003a8a2a7e0b5183bbe0d))
+
+# @linagora/twake-mui [9.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.1.0...@linagora/twake-mui@9.2.0) (2026-09-22)
+
+
+### Bug Fixes
+
+* **twake-mui:** Tint light-mode shadows with Grey 900, like cozy-ui ([4c74b68](https://github.com/linagora/twake-ui/commit/4c74b6861f6160ce174b7022ec2b42a64f5d5ecd))
+
+
+### Features
+
+* Read the palette from twake-css ([7c0a9e6](https://github.com/linagora/twake-ui/commit/7c0a9e6719d9520bdfdbd7b32b9d3132f2ae7d64))
+
+
+### Dependencies
+
+* **@linagora/twake-css:** upgraded to 1.0.0
+
 # @linagora/twake-mui [9.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.0.0...@linagora/twake-mui@9.1.0) (2026-09-22)
 
 

package/dist/lib/makePalette.js

@@ -1,6 +1,6 @@
+import paletteJson from '@linagora/twake-css/palette.json';
 import { alpha } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
-import paletteJson from './palette.json';
 const paletteData = paletteJson;
 export const makePalette = (mode = 'light', overrides = {}) => {
     const palette = deepmerge(paletteData, overrides);

package/dist/lib/makeShadows.d.ts

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

package/dist/lib/makeShadows.js

@@ -1,5 +1,5 @@
+import paletteJson from '@linagora/twake-css/palette.json';
 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.
@@ -39,8 +39,8 @@ const OUTLINE_OPACITY = 0.12;
  * through the type. Kept to stay iso with cozy-ui.
  */
 const EXTRA_ELEVATION_OPACITY = 0.04;
-export const makeShadows = (palette = paletteData) => {
-    const shadowColor = palette.Common.black;
+export const makeShadows = (mode = 'light', palette = paletteData) => {
+    const shadowColor = mode === 'light' ? palette.Grey[900] : palette.Common.black;
     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)}`,

package/dist/lib/makeTheme.js

@@ -25,14 +25,20 @@ const themesCommonConfig = {
 export const makeTheme = (mode = 'light', paletteOverrides, themeOptions) => {
     const baseOptions = {
         ...themesCommonConfig,
-        cssVariables: { colorSchemeSelector: 'data-theme' },
+        cssVariables: { colorSchemeSelector: 'data-theme', cssVarPrefix: 'twake' },
         defaultColorScheme: mode,
         colorSchemes: {
-            light: { palette: makePalette('light', paletteOverrides) },
-            dark: { palette: makePalette('dark', paletteOverrides) }
+            light: {
+                palette: makePalette('light', paletteOverrides),
+                shadows: makeShadows('light')
+            },
+            dark: {
+                palette: makePalette('dark', paletteOverrides),
+                shadows: makeShadows('dark')
+            }
         },
         typography: makeTypography(),
-        shadows: makeShadows(),
+        shadows: makeShadows(mode),
         components: overrides
     };
     return createTheme(deepmerge(baseOptions, themeOptions ?? {}));

package/dist/lib/overrides.js

@@ -1000,10 +1000,17 @@ export const overrides = {
         styleOverrides: {
             tooltip: ({ theme }) => ({
                 backgroundColor: alpha(theme.palette.grey[800], 0.9),
-                fontSize: '1rem',
-                lineHeight: 1.3,
-                borderRadius: '4px',
-                padding: '8px 12px'
+                borderRadius: radius.sm,
+                variants: [
+                    {
+                        props: ({ ownerState }) => !ownerState.touch,
+                        style: {
+                            fontSize: theme.typography.pxToRem(16),
+                            lineHeight: 1.3,
+                            padding: '8px 12px'
+                        }
+                    }
+                ]
             })
         }
     },

package/dist/lib/types.d.ts

@@ -1,38 +1,9 @@
-import { TypographyVariantsOptions } from '@mui/material/styles';
-export interface CommonColor {
-    white: string;
-    black: string;
-}
-export interface PaletteColor {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-    ContrastText?: string;
-}
-export interface GreyPalette {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-    A100: string;
-    A200: string;
-    A400: string;
-    A700: string;
-    A900: string;
-}
+import paletteJson from '@linagora/twake-css/palette.json';
+import { Shadows, TypographyVariantsOptions } from '@mui/material/styles';
+export type PaletteJson = typeof paletteJson;
+export type PaletteColor = PaletteJson['Primary'];
+export type GreyPalette = PaletteJson['Grey'];
+export type CommonColor = PaletteJson['Common'];
 export interface TextPalette {
     primary: string;
     secondary: string;
@@ -61,16 +32,6 @@ export interface BorderPalette {
     opacity: number;
     ghostOpacity: number;
 }
-export interface PaletteJson {
-    Primary: PaletteColor;
-    Secondary: PaletteColor;
-    Error: PaletteColor;
-    Warning: PaletteColor;
-    Success: PaletteColor;
-    Info: Omit<PaletteColor, 'ContrastText'>;
-    Grey: GreyPalette;
-    Common: CommonColor;
-}
 export type TypographyOptions = TypographyVariantsOptions;
 export interface TypographyConfig {
     fontFamily?: string;
@@ -102,6 +63,9 @@ export type MakeTypography = () => TypographyOptions;
  * `theme.palette.background.contrast` get a type error.
  */
 declare module '@mui/material/styles' {
+    interface ColorSystemOptions {
+        shadows?: Shadows;
+    }
     interface CssThemeVariables {
         enabled: true;
     }

package/dist/stories/Tooltip.stories.d.ts

@@ -3,5 +3,5 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Tooltip>;
 export default meta;
 type Story = StoryObj<typeof Tooltip>;
-export declare const Docs: Story;
+export declare const Default: Story;
 export declare const Screenshot: Story;

package/dist/stories/Tooltip.stories.js

@@ -1,13 +1,24 @@
-import { Tooltip, Typography } from '@mui/material';
+import { CarbonCopy, Icon } from '@linagora/twake-icons';
+import { Box, Stack, Tooltip, Typography } from '@mui/material';
 import React from 'react';
+const title = (React.createElement(React.Fragment, null,
+    React.createElement(Stack, { direction: "row", spacing: 1, sx: { alignItems: 'center', mb: 1 } },
+        React.createElement(Icon, { icon: CarbonCopy }),
+        React.createElement(Typography, { variant: "body1", color: "inherit" }, "Carbon copy")),
+    React.createElement(Typography, { variant: "caption", color: "inherit" }, "Indicates whether the document is defined as \u201Cauthentic and original\u201D by Cozy Cloud, the host of your Cozy, as it can claim that it comes directly from a third-party service, without having undergone any modification.")));
 const meta = {
     title: 'Tooltip',
     component: Tooltip,
     parameters: { layout: 'centered' },
-    tags: ['autodocs']
+    tags: ['autodocs'],
+    decorators: [
+        // The dark tooltip shares the dark paper colour, so it would vanish on it
+        (Story) => (React.createElement(Box, { sx: theme => theme.applyStyles('dark', { bgcolor: 'background.default' }) },
+            React.createElement(Story, null)))
+    ]
 };
 export default meta;
-export const Docs = {
+export const Default = {
     argTypes: {
         placement: {
             control: 'select',
@@ -25,17 +36,13 @@ export const Docs = {
         arrow: { control: 'boolean' }
     },
     args: {
-        title: (React.createElement(React.Fragment, null,
-            React.createElement(Typography, { variant: "body1", color: "inherit" }, "Carbon copy"),
-            React.createElement(Typography, { variant: "caption", color: "inherit" }, "Indicates whether the document is defined as \u201Cauthentic and original\u201D"))),
+        title,
         children: React.createElement("u", null, "hover over me")
     }
 };
 export const Screenshot = {
     tags: ['argos'],
-    render: () => (React.createElement("div", { style: { padding: 48 } },
-        React.createElement(Tooltip, { open: true, title: React.createElement(React.Fragment, null,
-                React.createElement(Typography, { variant: "body1", color: "inherit" }, "Carbon copy"),
-                React.createElement(Typography, { variant: "caption", color: "inherit" }, "Indicates whether the document is defined as \u201Cauthentic and original\u201D")) },
+    render: () => (React.createElement("div", { style: { padding: '48px 96px 200px' } },
+        React.createElement(Tooltip, { open: true, title: title },
             React.createElement("u", null, "hover over me"))))
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "9.1.0",
+  "version": "9.3.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "build": "tsc",
     "build:doc": "storybook build --output-dir storybook-static",
     "start": "tsc --watch",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run --project unit",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
     "clean": "rm -rf dist",
@@ -58,6 +58,7 @@
     "twake-i18n": ">=0.5.0"
   },
   "dependencies": {
+    "@linagora/twake-css": "^1.0.0",
     "@mui/utils": "^9.2.0",
     "classnames": "^2.5.1"
   },

package/dist/lib/palette.json

@@ -1,100 +0,0 @@
-{
-    "Primary": {
-        "50": "#f6fbff",
-        "100": "#e3f1ff",
-        "200": "#d2e9ff",
-        "300": "#bfdfff",
-        "400": "#7bbdff",
-        "500": "#46a2ff",
-        "600": "#0a84ff",
-        "700": "#006bd8",
-        "800": "#0157ad",
-        "900": "#082139",
-        "ContrastText": "#fff"
-    },
-    "Secondary": {
-        "50": "#f1f5fa",
-        "100": "#e8f0fa",
-        "200": "#d1e0f2",
-        "300": "#b5d1f1",
-        "400": "#96bce8",
-        "500": "#85b5ec",
-        "600": "#5c9ce6",
-        "700": "#5085c3",
-        "800": "#243b55",
-        "900": "#081f39",
-        "ContrastText": "#fff"
-    },
-    "Error": {
-        "50": "#fffbfe",
-        "100": "#fceeee",
-        "200": "#ffd2d7",
-        "300": "#ff939d",
-        "400": "#ff7a87",
-        "500": "#ff4d5e",
-        "600": "#ff3347",
-        "700": "#d32c3c",
-        "800": "#b52c39",
-        "900": "#7a1e27",
-        "ContrastText": "#fff"
-    },
-    "Warning": {
-        "50": "#fff8e1",
-        "100": "#ffecb3",
-        "200": "#ffe082",
-        "300": "#ffd54f",
-        "400": "#ffca28",
-        "500": "#ffb300",
-        "600": "#ff8f00",
-        "700": "#ff6f00",
-        "800": "#b5672c",
-        "900": "#281c07",
-        "ContrastText": "#fff"
-    },
-    "Success": {
-        "50": "#f3fff5",
-        "100": "#e3ffe7",
-        "200": "#b9f6ca",
-        "300": "#97eca1",
-        "400": "#66e475",
-        "500": "#38c949",
-        "600": "#00c853",
-        "700": "#00ad48",
-        "800": "#245538",
-        "900": "#08250b",
-        "ContrastText": "#fff"
-    },
-    "Info": {
-        "50": "#edffff",
-        "100": "#d4feff",
-        "200": "#affdff",
-        "300": "#86f5f7",
-        "400": "#4ee2e5",
-        "500": "#1de9b6",
-        "600": "#00bfa5",
-        "700": "#00796b",
-        "800": "#004345",
-        "900": "#002526"
-    },
-    "Grey": {
-        "50": "#FBFDFF",
-        "100": "#F3F6F9",
-        "200": "#EDF2F7",
-        "300": "#E1E3E6",
-        "400": "#C5C7CA",
-        "500": "#AAACAE",
-        "600": "#909294",
-        "700": "#757779",
-        "800": "#4E5052",
-        "900": "#424244",
-        "A100": "#FCFCFC",
-        "A200": "#E5ECF3",
-        "A400": "#2C3039",
-        "A700": "#5D6169",
-        "A900": "#1C1B1F"
-    },
-    "Common": {
-        "white": "#fff",
-        "black": "#000"
-    }
-}