@linagora/twake-mui 5.1.0 → 5.2.0

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

@@ -1,7 +1,8 @@
 import { createTheme } from '@mui/material/styles';
-import { makeDarkOverrides } from './makeDarkOverrides';
-import { makeLightOverrides } from './makeLightOverrides';
+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,9 +28,10 @@ export const makeTheme = (mode = 'light') => {
     const theme = createTheme({
         ...themesCommonConfig,
         palette,
-        typography
+        typography,
+        shadows: makeShadows(mode)
     });
-    const components = mode === 'dark' ? makeDarkOverrides(theme) : makeLightOverrides(theme);
+    const components = mode === 'dark' ? darkOverrides : lightOverrides;
     // Create the final theme with components
     return createTheme({
         ...theme,

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/dist/stories/ThemePlayground.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+declare function ThemePlaygroundContent(): React.ReactElement;
+declare const meta: Meta<typeof ThemePlaygroundContent>;
+export default meta;
+type Story = StoryObj<typeof ThemePlaygroundContent>;
+export declare const Docs: Story;

package/dist/stories/ThemePlayground.stories.js

@@ -0,0 +1,231 @@
+import { Button, Stack, Chip } from '@mui/material';
+import React from 'react';
+import { TwakeMuiThemeProvider } from '../components/ThemeProvider';
+import { makePalette } from '../lib/makePalette';
+const customPalette = {
+    Primary: {
+        '50': '#FFF9F6',
+        '100': '#FFF5F0',
+        '200': '#FFF1E3',
+        '300': '#FFD8BF',
+        '400': '#FFAE7B',
+        '500': '#FF8D46',
+        '600': '#F67E35',
+        '700': '#F66F35',
+        '800': '#E55B31',
+        '900': '#7A411E',
+        ContrastText: '#fff'
+    },
+    Secondary: {
+        '50': '#E5FFFF',
+        '100': '#B3FFFF',
+        '200': '#80FFFF',
+        '300': '#4DFFFF',
+        '400': '#1AFFFF',
+        '500': '#00FFFF',
+        '600': '#00CCCC',
+        '700': '#009999',
+        '800': '#006666',
+        '900': '#003333',
+        ContrastText: '#000'
+    },
+    Error: {
+        '50': '#FFE5E5',
+        '100': '#FFB3B3',
+        '200': '#FF8080',
+        '300': '#FF4D4D',
+        '400': '#FF1A1A',
+        '500': '#FF0000',
+        '600': '#CC0000',
+        '700': '#990000',
+        '800': '#660000',
+        '900': '#330000',
+        ContrastText: '#fff'
+    },
+    Warning: {
+        '50': '#FFFFE5',
+        '100': '#FFFFB3',
+        '200': '#FFFF80',
+        '300': '#FFFF4D',
+        '400': '#FFFF1A',
+        '500': '#FFFF00',
+        '600': '#CCCC00',
+        '700': '#999900',
+        '800': '#666600',
+        '900': '#333300',
+        ContrastText: '#000'
+    },
+    Success: {
+        '50': '#E5FFE5',
+        '100': '#B3FFB3',
+        '200': '#80FF80',
+        '300': '#4DFF4D',
+        '400': '#1AFF1A',
+        '500': '#00FF00',
+        '600': '#00CC00',
+        '700': '#009900',
+        '800': '#006600',
+        '900': '#003300',
+        ContrastText: '#000'
+    },
+    Info: {
+        '50': '#F0E5FF',
+        '100': '#D1B3FF',
+        '200': '#B380FF',
+        '300': '#944DFF',
+        '400': '#751AFF',
+        '500': '#6600FF',
+        '600': '#5200CC',
+        '700': '#3D0099',
+        '800': '#290066',
+        '900': '#140033'
+    },
+    Grey: {
+        '50': '#F2F2F2',
+        '100': '#00FF00',
+        '200': '#CCCCCC',
+        '300': '#B3B3B3',
+        '400': '#808080',
+        '500': '#808080',
+        '600': '#666666',
+        '700': '#4D4D4D',
+        '800': '#00FF00',
+        '900': '#FF00FF',
+        A100: '#FFFFFF',
+        A200: '#F0F0F0',
+        A400: '#00FF00',
+        A700: '#262626',
+        A900: '#0D0D0D'
+    },
+    Common: {
+        black: '#FF0000',
+        white: '#0000ff'
+    }
+};
+const BASE_PALETTE = makePalette('light', customPalette);
+function ColorSwatch({ label, color }) {
+    return (React.createElement(Stack, { direction: "row", spacing: 1 },
+        React.createElement("div", { style: {
+                width: 24,
+                height: 24,
+                borderRadius: 4,
+                backgroundColor: color,
+                border: '1px solid rgba(0,0,0,0.1)'
+            } }),
+        React.createElement("code", { style: { fontSize: 12, color: '#666' } }, label),
+        React.createElement("code", { style: { fontSize: 12 } }, color)));
+}
+function ThemePlaygroundContent() {
+    const primaryMain = BASE_PALETTE.primary.main;
+    const secondaryMain = BASE_PALETTE.secondary
+        .main;
+    const textPrimary = BASE_PALETTE.text.primary;
+    const textSecondary = BASE_PALETTE.text.secondary;
+    const backgroundDefault = BASE_PALETTE.background.default;
+    const backgroundPaper = BASE_PALETTE.background.paper;
+    return (React.createElement(TwakeMuiThemeProvider, { themeOptions: { palette: BASE_PALETTE } },
+        React.createElement(Stack, { spacing: 4, sx: { p: 3, minWidth: 640 } },
+            React.createElement("section", null,
+                React.createElement("h3", { style: { marginTop: 0, marginBottom: 12 } }, "Palette Colors"),
+                React.createElement(Stack, { spacing: 1 },
+                    React.createElement(ColorSwatch, { label: "primary.main", color: primaryMain }),
+                    React.createElement(ColorSwatch, { label: "secondary.main", color: secondaryMain }),
+                    React.createElement(ColorSwatch, { label: "text.primary", color: textPrimary }),
+                    React.createElement(ColorSwatch, { label: "text.secondary", color: textSecondary }),
+                    React.createElement(ColorSwatch, { label: "background.default", color: backgroundDefault }),
+                    React.createElement(ColorSwatch, { label: "background.paper", color: backgroundPaper }))),
+            React.createElement("section", null,
+                React.createElement("h3", { style: { marginTop: 0, marginBottom: 12 } }, "Buttons"),
+                React.createElement(Stack, { spacing: 2 },
+                    React.createElement(Stack, { direction: "row", spacing: 2 },
+                        React.createElement(Button, { variant: "contained", color: "primary" }, "Contained primary"),
+                        React.createElement(Button, { variant: "outlined", color: "primary" }, "Outlined primary"),
+                        React.createElement(Button, { variant: "text", color: "primary" }, "Text primary")),
+                    React.createElement(Stack, { direction: "row", spacing: 2 },
+                        React.createElement(Button, { variant: "contained", color: "secondary" }, "Contained secondary"),
+                        React.createElement(Button, { variant: "outlined", color: "secondary" }, "Outlined secondary"),
+                        React.createElement(Button, { variant: "text", color: "secondary" }, "Text secondary")),
+                    React.createElement(Stack, { direction: "row", spacing: 2 },
+                        React.createElement(Button, { variant: "contained", disabled: true }, "Disabled")))),
+            React.createElement("section", null,
+                React.createElement("h3", { style: { marginTop: 0, marginBottom: 12 } }, "Chips"),
+                React.createElement(Stack, { direction: "row", spacing: 2 },
+                    React.createElement(Chip, { label: "Primary filled", color: "primary" }),
+                    React.createElement(Chip, { label: "Primary outlined", color: "primary", variant: "outlined" }),
+                    React.createElement(Chip, { label: "Secondary filled", color: "secondary" }),
+                    React.createElement(Chip, { label: "Secondary outlined", color: "secondary", variant: "outlined" }))),
+            React.createElement("section", null,
+                React.createElement("h3", { style: { marginTop: 0, marginBottom: 12 } }, "Typography"),
+                React.createElement(Stack, { spacing: 0.5 },
+                    React.createElement("span", { style: {
+                            color: textPrimary,
+                            fontSize: 15
+                        } }, "text.primary \u2014 The quick brown fox"),
+                    React.createElement("span", { style: {
+                            color: textSecondary,
+                            fontSize: 13
+                        } }, "text.secondary \u2014 The quick brown fox"))),
+            React.createElement("section", null,
+                React.createElement("h3", { style: { marginTop: 0, marginBottom: 12 } }, "Backgrounds"),
+                React.createElement(Stack, { direction: "row", spacing: 2 },
+                    React.createElement(Stack, { sx: {
+                            width: 120,
+                            height: 64,
+                            borderRadius: 1,
+                            border: '1px solid',
+                            borderColor: 'divider',
+                            bgcolor: 'background.default',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        } },
+                        React.createElement("code", { style: { fontSize: 10 } }, "default")),
+                    React.createElement(Stack, { sx: {
+                            width: 120,
+                            height: 64,
+                            borderRadius: 1,
+                            border: '1px solid',
+                            borderColor: 'divider',
+                            bgcolor: 'background.paper',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        } },
+                        React.createElement("code", { style: { fontSize: 10 } }, "paper")))))));
+}
+const meta = {
+    title: 'ThemePlayground',
+    component: ThemePlaygroundContent,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs']
+};
+export default meta;
+export const Docs = {
+    parameters: {
+        docs: {
+            source: {
+                code: `import { makePalette } from '@linagora/twake-mui'
+import type { PaletteJson } from '@linagora/twake-mui'
+
+const customPalette: PaletteJson = {
+  Primary: {
+    '500': '#FF00AA',
+    ContrastText: '#fff'
+  },
+  Secondary: {
+    '500': '#00FFFF',
+    ContrastText: '#000'
+  },
+  // ...Error, Warning, Success, Info, Grey, Common
+}
+
+// Generate a full MUI palette from your design tokens
+const basePalette = makePalette('light', customPalette)
+
+<TwakeMuiThemeProvider
+  themeOptions={{palette: basePalette}}
+>
+  <YourApp />
+</TwakeMuiThemeProvider>`
+            }
+        }
+    }
+};

package/package.json

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

package/dist/lib/makeDarkOverrides.d.ts

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

package/dist/lib/makeDarkOverrides.js

@@ -1,9 +0,0 @@
-import { merge } from 'lodash';
-import { makeLightOverrides } from './makeLightOverrides';
-export const makeDarkOverrides = (theme) => {
-    const makeOverridesForDarkTheme = (
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    theme) => ({});
-    const DarkOverrides = merge(makeLightOverrides(theme), makeOverridesForDarkTheme(theme));
-    return DarkOverrides;
-};

package/dist/lib/makeLightOverrides.d.ts

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