@linagora/twake-mui 5.1.0 → 5.1.1

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.1.1",
   "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"]>;