@iobroker/gui-components 10.0.5 → 10.0.7

package/build/ThemeModern.js

@@ -0,0 +1,586 @@
+import { alpha } from '@mui/material/styles';
+export const MODERN_DARK = {
+    background: '#0A121D',
+    paper: '#121A26',
+    sidebar: '#141C29',
+    elevated: '#1A2434',
+    border: '#1E2837',
+    cardBorder: '#1B2533',
+    textPrimary: '#E8EDF5',
+    textSecondary: '#8B97A8',
+    textDisabled: '#586576',
+    primary: '#137BF8',
+    primaryDark: '#0B62D6',
+    primaryLight: '#4B9BFA',
+    secondary: '#436A93',
+    gradient: 'linear-gradient(90deg, #2E93F9 0%, #0B76F5 100%)',
+    gradientHover: 'linear-gradient(90deg, #48A1FA 0%, #1B84F8 100%)',
+    success: '#2EA043',
+    warning: '#E8A33D',
+    error: '#E5534B',
+    info: '#3FA9F5',
+    expert: '#2EA043',
+    nonAck: '#E5534B',
+    hover: 'rgba(255, 255, 255, 0.05)',
+    selected: 'rgba(19, 123, 248, 0.16)',
+};
+export const MODERN_LIGHT = {
+    background: '#F4F7FB',
+    paper: '#FFFFFF',
+    sidebar: '#FFFFFF',
+    elevated: '#FFFFFF',
+    border: '#E2E8F0',
+    cardBorder: '#E2E8F0',
+    textPrimary: '#101827',
+    textSecondary: '#5B6878',
+    textDisabled: '#98A4B3',
+    primary: '#137BF8',
+    primaryDark: '#0B62D6',
+    primaryLight: '#4B9BFA',
+    secondary: '#164477',
+    gradient: 'linear-gradient(90deg, #2E93F9 0%, #0B76F5 100%)',
+    gradientHover: 'linear-gradient(90deg, #48A1FA 0%, #1B84F8 100%)',
+    success: '#1E8E3E',
+    warning: '#C77700',
+    error: '#D93025',
+    info: '#0B72D9',
+    expert: '#1E8E3E',
+    nonAck: '#D93025',
+    hover: 'rgba(16, 24, 39, 0.04)',
+    selected: 'rgba(19, 123, 248, 0.10)',
+};
+const FONT_FAMILY = '"Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+/** Height of the app bar. Used for `MuiToolbar` and for `mixins.toolbar` - the two must not drift apart */
+const TOOLBAR_HEIGHT = 52;
+/**
+ * Build the 25 MUI shadows. The default MUI shadows are too heavy for this design,
+ * so they are replaced by a soft two-layer shadow.
+ */
+function buildShadows(type) {
+    const rgb = type === 'dark' ? '0, 0, 0' : '15, 23, 42';
+    const nearOpacity = type === 'dark' ? 0.24 : 0.04;
+    const farOpacity = type === 'dark' ? 0.36 : 0.08;
+    const shadows = ['none'];
+    for (let i = 1; i <= 24; i++) {
+        const y = Math.round(1 + i * 0.7);
+        const blur = Math.round(2 + i * 1.6);
+        shadows.push(`0px ${Math.max(1, Math.round(y / 2))}px ${Math.max(2, Math.round(blur / 2))}px rgba(${rgb}, ${nearOpacity}), ` +
+            `0px ${y}px ${blur}px rgba(${rgb}, ${farOpacity})`);
+    }
+    return shadows;
+}
+/**
+ * Options and component overrides of the "modern" themes (`modernDark` and `modernLight`).
+ */
+export function getModernTheme(name, type) {
+    const t = type === 'dark' ? MODERN_DARK : MODERN_LIGHT;
+    const options = {
+        name,
+        shape: { borderRadius: 10 },
+        // The app bar is lower than in the MUI default. `mixins.toolbar` has to say so too: consumers
+        // (e.g. the admin) take the top margin of their content from it, and with MUI's 64px they
+        // would leave a gap below the bar.
+        mixins: {
+            toolbar: {
+                minHeight: TOOLBAR_HEIGHT,
+                '@media (min-width:0px) and (orientation: landscape)': { minHeight: TOOLBAR_HEIGHT },
+                '@media (min-width:600px)': { minHeight: TOOLBAR_HEIGHT },
+            },
+        },
+        shadows: buildShadows(type),
+        typography: {
+            fontFamily: FONT_FAMILY,
+            h1: { fontWeight: 700, letterSpacing: '-0.02em' },
+            h2: { fontWeight: 700, letterSpacing: '-0.02em' },
+            h3: { fontWeight: 600, letterSpacing: '-0.02em' },
+            h4: { fontWeight: 600, letterSpacing: '-0.01em' },
+            h5: { fontWeight: 600 },
+            h6: { fontWeight: 600, fontSize: '1.05rem' },
+            subtitle1: { fontWeight: 500 },
+            subtitle2: { fontWeight: 500 },
+            body2: { fontSize: '0.875rem' },
+            button: { fontWeight: 500, textTransform: 'none', letterSpacing: 0 },
+            caption: { fontSize: '0.75rem' },
+        },
+        palette: {
+            mode: type,
+            background: {
+                default: t.background,
+                paper: t.paper,
+            },
+            primary: {
+                main: t.primary,
+                dark: t.primaryDark,
+                light: t.primaryLight,
+                contrastText: '#FFFFFF',
+            },
+            secondary: {
+                main: t.secondary,
+                contrastText: '#FFFFFF',
+            },
+            success: { main: t.success },
+            warning: { main: t.warning },
+            error: { main: t.error },
+            info: { main: t.info },
+            divider: t.border,
+            text: {
+                primary: t.textPrimary,
+                secondary: t.textSecondary,
+                disabled: t.textDisabled,
+            },
+            action: {
+                hover: t.hover,
+                hoverOpacity: type === 'dark' ? 0.06 : 0.04,
+                selected: t.selected,
+                selectedOpacity: type === 'dark' ? 0.16 : 0.1,
+            },
+            expert: t.expert,
+            nonAck: t.nonAck,
+        },
+        toolbar: {
+            height: 52,
+        },
+        saveToolbar: {
+            background: t.primary,
+            button: {
+                borderRadius: 8,
+                height: 34,
+            },
+        },
+    };
+    const components = {
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    backgroundColor: t.background,
+                    color: t.textPrimary,
+                    scrollbarColor: `${t.border} transparent`,
+                },
+                '*::-webkit-scrollbar': {
+                    width: 10,
+                    height: 10,
+                },
+                '*::-webkit-scrollbar-track': {
+                    backgroundColor: 'transparent',
+                },
+                '*::-webkit-scrollbar-thumb': {
+                    backgroundColor: t.border,
+                    borderRadius: 8,
+                    border: `2px solid ${t.background}`,
+                },
+                '*::-webkit-scrollbar-thumb:hover': {
+                    backgroundColor: t.textDisabled,
+                },
+            },
+        },
+        MuiPaper: {
+            defaultProps: {
+                elevation: 0,
+            },
+            styleOverrides: {
+                root: {
+                    // remove the MUI overlay gradient of the dark mode - the colors are defined explicitly
+                    backgroundImage: 'none',
+                    backgroundColor: t.paper,
+                },
+                outlined: {
+                    border: `1px solid ${t.border}`,
+                },
+                rounded: {
+                    borderRadius: 12,
+                },
+            },
+        },
+        MuiCard: {
+            defaultProps: {
+                elevation: 0,
+            },
+            styleOverrides: {
+                root: {
+                    backgroundColor: t.paper,
+                    border: `1px solid ${t.cardBorder}`,
+                    borderRadius: 12,
+                    backgroundImage: 'none',
+                    boxShadow: type === 'dark' ? '0 1px 3px rgba(0, 0, 0, 0.4)' : '0 1px 2px rgba(15, 23, 42, 0.05)',
+                },
+            },
+        },
+        MuiCardHeader: {
+            styleOverrides: {
+                root: {
+                    padding: '16px 20px 8px 20px',
+                },
+                title: {
+                    fontSize: '1rem',
+                    fontWeight: 600,
+                },
+                subheader: {
+                    fontSize: '0.8125rem',
+                    color: t.textSecondary,
+                },
+            },
+        },
+        MuiCardContent: {
+            styleOverrides: {
+                root: {
+                    padding: 20,
+                    '&:last-child': { paddingBottom: 20 },
+                },
+            },
+        },
+        MuiAppBar: {
+            defaultProps: {
+                elevation: 0,
+                color: 'default',
+            },
+            styleOverrides: {
+                root: {
+                    backgroundColor: t.paper,
+                    backgroundImage: 'none',
+                    color: t.textPrimary,
+                    // Drawn inside instead of as a border: a real border would add a pixel to the bar
+                    // height, and the content below positions itself by `mixins.toolbar`.
+                    boxShadow: `inset 0 -1px 0 ${t.border}`,
+                },
+                colorDefault: {
+                    backgroundColor: t.paper,
+                },
+                colorPrimary: {
+                    backgroundColor: t.paper,
+                    color: t.textPrimary,
+                },
+            },
+        },
+        MuiToolbar: {
+            styleOverrides: {
+                root: {
+                    minHeight: TOOLBAR_HEIGHT,
+                    '@media (min-width: 600px)': { minHeight: TOOLBAR_HEIGHT },
+                },
+            },
+        },
+        MuiDrawer: {
+            styleOverrides: {
+                paper: {
+                    backgroundColor: t.sidebar,
+                    backgroundImage: 'none',
+                    borderRight: `1px solid ${t.border}`,
+                },
+            },
+        },
+        MuiDivider: {
+            styleOverrides: {
+                root: {
+                    borderColor: t.border,
+                },
+            },
+        },
+        MuiListItemButton: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 8,
+                    paddingTop: 7,
+                    paddingBottom: 7,
+                    '&:hover': {
+                        backgroundColor: t.hover,
+                    },
+                    '&.Mui-selected': {
+                        // the active navigation item is filled with a gradient
+                        background: t.gradient,
+                        color: '#FFFFFF',
+                        boxShadow: `0 2px 8px ${alpha(t.primary, type === 'dark' ? 0.35 : 0.25)}`,
+                        '& .MuiListItemIcon-root': { color: '#FFFFFF' },
+                        '&:hover': { background: t.gradientHover },
+                    },
+                },
+            },
+        },
+        MuiListItemIcon: {
+            styleOverrides: {
+                root: {
+                    color: t.textSecondary,
+                    minWidth: 36,
+                },
+            },
+        },
+        MuiListItemText: {
+            styleOverrides: {
+                primary: {
+                    fontSize: '0.9rem',
+                },
+            },
+        },
+        MuiMenu: {
+            styleOverrides: {
+                paper: {
+                    backgroundColor: t.elevated,
+                    backgroundImage: 'none',
+                    border: `1px solid ${t.border}`,
+                    borderRadius: 10,
+                },
+                list: {
+                    padding: 6,
+                },
+            },
+        },
+        MuiMenuItem: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 6,
+                    fontSize: '0.875rem',
+                    '&.Mui-selected': {
+                        backgroundColor: t.selected,
+                    },
+                },
+            },
+        },
+        MuiPopover: {
+            styleOverrides: {
+                paper: {
+                    backgroundColor: t.elevated,
+                    backgroundImage: 'none',
+                    border: `1px solid ${t.border}`,
+                    borderRadius: 10,
+                },
+            },
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: {
+                    backgroundColor: t.elevated,
+                    backgroundImage: 'none',
+                    border: `1px solid ${t.border}`,
+                    borderRadius: 14,
+                },
+            },
+        },
+        MuiDialogTitle: {
+            styleOverrides: {
+                root: {
+                    fontSize: '1.05rem',
+                    fontWeight: 600,
+                },
+            },
+        },
+        MuiButton: {
+            defaultProps: {
+                disableElevation: true,
+            },
+            styleOverrides: {
+                root: {
+                    borderRadius: 8,
+                    textTransform: 'none',
+                    fontWeight: 500,
+                    boxShadow: 'none',
+                    '&:hover': { boxShadow: 'none' },
+                },
+                sizeSmall: {
+                    borderRadius: 6,
+                },
+                outlined: {
+                    borderColor: t.border,
+                },
+            },
+        },
+        MuiIconButton: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 8,
+                    color: t.textSecondary,
+                    '&:hover': { backgroundColor: t.hover, color: t.textPrimary },
+                },
+            },
+        },
+        MuiToggleButton: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 8,
+                    borderColor: t.border,
+                    textTransform: 'none',
+                    '&.Mui-selected': {
+                        backgroundColor: t.selected,
+                        color: t.primaryLight,
+                    },
+                },
+            },
+        },
+        MuiChip: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 6,
+                    fontWeight: 500,
+                    fontSize: '0.75rem',
+                },
+                sizeSmall: {
+                    height: 22,
+                },
+                outlined: {
+                    borderColor: t.border,
+                },
+            },
+        },
+        MuiTooltip: {
+            styleOverrides: {
+                tooltip: {
+                    backgroundColor: type === 'dark' ? '#242C37' : '#1F2937',
+                    border: type === 'dark' ? `1px solid ${t.border}` : undefined,
+                    borderRadius: 8,
+                    fontSize: '0.75rem',
+                    padding: '6px 10px',
+                },
+                arrow: {
+                    color: type === 'dark' ? '#242C37' : '#1F2937',
+                },
+            },
+        },
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 8,
+                    backgroundColor: type === 'dark' ? alpha('#FFFFFF', 0.03) : alpha('#0F172A', 0.02),
+                    '& .MuiOutlinedInput-notchedOutline': { borderColor: t.border },
+                    '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: t.textDisabled },
+                },
+                input: {
+                    padding: '10px 12px',
+                },
+            },
+        },
+        MuiInputBase: {
+            styleOverrides: {
+                root: {
+                    fontSize: '0.875rem',
+                },
+            },
+        },
+        MuiInputLabel: {
+            styleOverrides: {
+                root: {
+                    color: t.textSecondary,
+                },
+            },
+        },
+        MuiSelect: {
+            styleOverrides: {
+                select: {
+                    fontSize: '0.875rem',
+                },
+            },
+        },
+        MuiTabs: {
+            styleOverrides: {
+                root: {
+                    minHeight: 42,
+                    borderBottom: `1px solid ${t.border}`,
+                },
+                indicator: {
+                    height: 2,
+                    borderRadius: 2,
+                },
+            },
+        },
+        MuiTab: {
+            styleOverrides: {
+                root: {
+                    minHeight: 42,
+                    textTransform: 'none',
+                    fontWeight: 500,
+                    fontSize: '0.8125rem',
+                    letterSpacing: '0.02em',
+                    color: t.textSecondary,
+                    '&.Mui-selected': { color: t.primaryLight },
+                },
+            },
+        },
+        MuiTable: {
+            styleOverrides: {
+                root: {
+                    borderCollapse: 'separate',
+                },
+            },
+        },
+        MuiTableCell: {
+            styleOverrides: {
+                root: {
+                    borderBottom: `1px solid ${t.border}`,
+                    fontSize: '0.8125rem',
+                    padding: '10px 14px',
+                },
+                head: {
+                    color: t.textSecondary,
+                    fontWeight: 600,
+                    fontSize: '0.75rem',
+                    backgroundColor: t.paper,
+                },
+            },
+        },
+        MuiTableRow: {
+            styleOverrides: {
+                root: {
+                    '&:hover': { backgroundColor: t.hover },
+                    '&.Mui-selected': {
+                        backgroundColor: t.selected,
+                        '&:hover': { backgroundColor: t.selected },
+                    },
+                },
+            },
+        },
+        MuiLinearProgress: {
+            styleOverrides: {
+                root: {
+                    height: 6,
+                    borderRadius: 4,
+                    backgroundColor: type === 'dark' ? alpha('#FFFFFF', 0.08) : alpha('#0F172A', 0.08),
+                },
+                bar: {
+                    borderRadius: 4,
+                },
+            },
+        },
+        MuiSwitch: {
+            styleOverrides: {
+                track: {
+                    borderRadius: 12,
+                },
+            },
+        },
+        MuiCheckbox: {
+            styleOverrides: {
+                root: {
+                    color: t.textDisabled,
+                },
+            },
+        },
+        MuiAlert: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 10,
+                    border: `1px solid ${t.border}`,
+                },
+            },
+        },
+        MuiAccordion: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: t.paper,
+                    backgroundImage: 'none',
+                    border: `1px solid ${t.border}`,
+                    borderRadius: 10,
+                    '&::before': { display: 'none' },
+                },
+            },
+        },
+        MuiLink: {
+            styleOverrides: {
+                root: {
+                    color: t.primaryLight,
+                    textDecorationColor: alpha(t.primaryLight, 0.4),
+                    transition: 'color .2s ease',
+                    '&:hover': { color: t.primary },
+                },
+            },
+        },
+    };
+    return { options, components };
+}
+//# sourceMappingURL=ThemeModern.js.map

package/build/ThemeModern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeModern.js","sourceRoot":"./src/","sources":["ThemeModern.ts"],"names":[],"mappings":"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","sourcesContent":["import { alpha, type Shadows } from '@mui/material/styles';\n\nimport type { ThemeName, ThemeType } from './types';\nimport type { ThemeOptions } from './Theme';\n\n/**\n * Flat design tokens of the \"modern\" themes.\n * Everything that is used more than once in the theme definition below is listed here,\n * so a new variation can be created by copying this object only.\n */\nexport interface ModernTokens {\n    /** Background of the page (behind the cards) */\n    background: string;\n    /** Background of cards, tables and dialogs */\n    paper: string;\n    /** Background of the left navigation */\n    sidebar: string;\n    /** Background of menus, popovers and dialogs (one step above `paper`) */\n    elevated: string;\n    /** Color of the dividers inside of the cards (table rows, lists) */\n    border: string;\n    /** Border of the cards. In the dark theme the cards are separated by the background, not by a border */\n    cardBorder: string;\n    textPrimary: string;\n    textSecondary: string;\n    textDisabled: string;\n    primary: string;\n    primaryDark: string;\n    primaryLight: string;\n    secondary: string;\n    /** Background of the selected navigation item */\n    gradient: string;\n    /** Background of the selected navigation item if hovered */\n    gradientHover: string;\n    success: string;\n    warning: string;\n    error: string;\n    info: string;\n    /** Color of the expert-mode elements */\n    expert: string;\n    /** Color of the not acknowledged values in the object browser */\n    nonAck: string;\n    /** Background of the hovered rows and list items */\n    hover: string;\n    /** Background of the selected rows and list items */\n    selected: string;\n}\n\nexport const MODERN_DARK: ModernTokens = {\n    background: '#0A121D',\n    paper: '#121A26',\n    sidebar: '#141C29',\n    elevated: '#1A2434',\n    border: '#1E2837',\n    cardBorder: '#1B2533',\n    textPrimary: '#E8EDF5',\n    textSecondary: '#8B97A8',\n    textDisabled: '#586576',\n    primary: '#137BF8',\n    primaryDark: '#0B62D6',\n    primaryLight: '#4B9BFA',\n    secondary: '#436A93',\n    gradient: 'linear-gradient(90deg, #2E93F9 0%, #0B76F5 100%)',\n    gradientHover: 'linear-gradient(90deg, #48A1FA 0%, #1B84F8 100%)',\n    success: '#2EA043',\n    warning: '#E8A33D',\n    error: '#E5534B',\n    info: '#3FA9F5',\n    expert: '#2EA043',\n    nonAck: '#E5534B',\n    hover: 'rgba(255, 255, 255, 0.05)',\n    selected: 'rgba(19, 123, 248, 0.16)',\n};\n\nexport const MODERN_LIGHT: ModernTokens = {\n    background: '#F4F7FB',\n    paper: '#FFFFFF',\n    sidebar: '#FFFFFF',\n    elevated: '#FFFFFF',\n    border: '#E2E8F0',\n    cardBorder: '#E2E8F0',\n    textPrimary: '#101827',\n    textSecondary: '#5B6878',\n    textDisabled: '#98A4B3',\n    primary: '#137BF8',\n    primaryDark: '#0B62D6',\n    primaryLight: '#4B9BFA',\n    secondary: '#164477',\n    gradient: 'linear-gradient(90deg, #2E93F9 0%, #0B76F5 100%)',\n    gradientHover: 'linear-gradient(90deg, #48A1FA 0%, #1B84F8 100%)',\n    success: '#1E8E3E',\n    warning: '#C77700',\n    error: '#D93025',\n    info: '#0B72D9',\n    expert: '#1E8E3E',\n    nonAck: '#D93025',\n    hover: 'rgba(16, 24, 39, 0.04)',\n    selected: 'rgba(19, 123, 248, 0.10)',\n};\n\nconst FONT_FAMILY = '\"Inter\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif';\n/** Height of the app bar. Used for `MuiToolbar` and for `mixins.toolbar` - the two must not drift apart */\nconst TOOLBAR_HEIGHT = 52;\n\n/**\n * Build the 25 MUI shadows. The default MUI shadows are too heavy for this design,\n * so they are replaced by a soft two-layer shadow.\n */\nfunction buildShadows(type: ThemeType): Shadows {\n    const rgb = type === 'dark' ? '0, 0, 0' : '15, 23, 42';\n    const nearOpacity = type === 'dark' ? 0.24 : 0.04;\n    const farOpacity = type === 'dark' ? 0.36 : 0.08;\n\n    const shadows: string[] = ['none'];\n    for (let i = 1; i <= 24; i++) {\n        const y = Math.round(1 + i * 0.7);\n        const blur = Math.round(2 + i * 1.6);\n        shadows.push(\n            `0px ${Math.max(1, Math.round(y / 2))}px ${Math.max(2, Math.round(blur / 2))}px rgba(${rgb}, ${nearOpacity}), ` +\n                `0px ${y}px ${blur}px rgba(${rgb}, ${farOpacity})`,\n        );\n    }\n\n    return shadows as unknown as Shadows;\n}\n\n/**\n * Options and component overrides of the \"modern\" themes (`modernDark` and `modernLight`).\n */\nexport function getModernTheme(\n    name: ThemeName,\n    type: ThemeType,\n): { options: ThemeOptions; components: Record<string, any> } {\n    const t: ModernTokens = type === 'dark' ? MODERN_DARK : MODERN_LIGHT;\n\n    const options: ThemeOptions = {\n        name,\n        shape: { borderRadius: 10 },\n        // The app bar is lower than in the MUI default. `mixins.toolbar` has to say so too: consumers\n        // (e.g. the admin) take the top margin of their content from it, and with MUI's 64px they\n        // would leave a gap below the bar.\n        mixins: {\n            toolbar: {\n                minHeight: TOOLBAR_HEIGHT,\n                '@media (min-width:0px) and (orientation: landscape)': { minHeight: TOOLBAR_HEIGHT },\n                '@media (min-width:600px)': { minHeight: TOOLBAR_HEIGHT },\n            },\n        },\n        shadows: buildShadows(type),\n        typography: {\n            fontFamily: FONT_FAMILY,\n            h1: { fontWeight: 700, letterSpacing: '-0.02em' },\n            h2: { fontWeight: 700, letterSpacing: '-0.02em' },\n            h3: { fontWeight: 600, letterSpacing: '-0.02em' },\n            h4: { fontWeight: 600, letterSpacing: '-0.01em' },\n            h5: { fontWeight: 600 },\n            h6: { fontWeight: 600, fontSize: '1.05rem' },\n            subtitle1: { fontWeight: 500 },\n            subtitle2: { fontWeight: 500 },\n            body2: { fontSize: '0.875rem' },\n            button: { fontWeight: 500, textTransform: 'none', letterSpacing: 0 },\n            caption: { fontSize: '0.75rem' },\n        },\n        palette: {\n            mode: type,\n            background: {\n                default: t.background,\n                paper: t.paper,\n            },\n            primary: {\n                main: t.primary,\n                dark: t.primaryDark,\n                light: t.primaryLight,\n                contrastText: '#FFFFFF',\n            },\n            secondary: {\n                main: t.secondary,\n                contrastText: '#FFFFFF',\n            },\n            success: { main: t.success },\n            warning: { main: t.warning },\n            error: { main: t.error },\n            info: { main: t.info },\n            divider: t.border,\n            text: {\n                primary: t.textPrimary,\n                secondary: t.textSecondary,\n                disabled: t.textDisabled,\n            },\n            action: {\n                hover: t.hover,\n                hoverOpacity: type === 'dark' ? 0.06 : 0.04,\n                selected: t.selected,\n                selectedOpacity: type === 'dark' ? 0.16 : 0.1,\n            },\n            expert: t.expert,\n            nonAck: t.nonAck,\n        },\n        toolbar: {\n            height: 52,\n        },\n        saveToolbar: {\n            background: t.primary,\n            button: {\n                borderRadius: 8,\n                height: 34,\n            },\n        },\n    };\n\n    const components: Record<string, any> = {\n        MuiCssBaseline: {\n            styleOverrides: {\n                body: {\n                    backgroundColor: t.background,\n                    color: t.textPrimary,\n                    scrollbarColor: `${t.border} transparent`,\n                },\n                '*::-webkit-scrollbar': {\n                    width: 10,\n                    height: 10,\n                },\n                '*::-webkit-scrollbar-track': {\n                    backgroundColor: 'transparent',\n                },\n                '*::-webkit-scrollbar-thumb': {\n                    backgroundColor: t.border,\n                    borderRadius: 8,\n                    border: `2px solid ${t.background}`,\n                },\n                '*::-webkit-scrollbar-thumb:hover': {\n                    backgroundColor: t.textDisabled,\n                },\n            },\n        },\n        MuiPaper: {\n            defaultProps: {\n                elevation: 0,\n            },\n            styleOverrides: {\n                root: {\n                    // remove the MUI overlay gradient of the dark mode - the colors are defined explicitly\n                    backgroundImage: 'none',\n                    backgroundColor: t.paper,\n                },\n                outlined: {\n                    border: `1px solid ${t.border}`,\n                },\n                rounded: {\n                    borderRadius: 12,\n                },\n            },\n        },\n        MuiCard: {\n            defaultProps: {\n                elevation: 0,\n            },\n            styleOverrides: {\n                root: {\n                    backgroundColor: t.paper,\n                    border: `1px solid ${t.cardBorder}`,\n                    borderRadius: 12,\n                    backgroundImage: 'none',\n                    boxShadow: type === 'dark' ? '0 1px 3px rgba(0, 0, 0, 0.4)' : '0 1px 2px rgba(15, 23, 42, 0.05)',\n                },\n            },\n        },\n        MuiCardHeader: {\n            styleOverrides: {\n                root: {\n                    padding: '16px 20px 8px 20px',\n                },\n                title: {\n                    fontSize: '1rem',\n                    fontWeight: 600,\n                },\n                subheader: {\n                    fontSize: '0.8125rem',\n                    color: t.textSecondary,\n                },\n            },\n        },\n        MuiCardContent: {\n            styleOverrides: {\n                root: {\n                    padding: 20,\n                    '&:last-child': { paddingBottom: 20 },\n                },\n            },\n        },\n        MuiAppBar: {\n            defaultProps: {\n                elevation: 0,\n                color: 'default',\n            },\n            styleOverrides: {\n                root: {\n                    backgroundColor: t.paper,\n                    backgroundImage: 'none',\n                    color: t.textPrimary,\n                    // Drawn inside instead of as a border: a real border would add a pixel to the bar\n                    // height, and the content below positions itself by `mixins.toolbar`.\n                    boxShadow: `inset 0 -1px 0 ${t.border}`,\n                },\n                colorDefault: {\n                    backgroundColor: t.paper,\n                },\n                colorPrimary: {\n                    backgroundColor: t.paper,\n                    color: t.textPrimary,\n                },\n            },\n        },\n        MuiToolbar: {\n            styleOverrides: {\n                root: {\n                    minHeight: TOOLBAR_HEIGHT,\n                    '@media (min-width: 600px)': { minHeight: TOOLBAR_HEIGHT },\n                },\n            },\n        },\n        MuiDrawer: {\n            styleOverrides: {\n                paper: {\n                    backgroundColor: t.sidebar,\n                    backgroundImage: 'none',\n                    borderRight: `1px solid ${t.border}`,\n                },\n            },\n        },\n        MuiDivider: {\n            styleOverrides: {\n                root: {\n                    borderColor: t.border,\n                },\n            },\n        },\n        MuiListItemButton: {\n            styleOverrides: {\n                root: {\n                    borderRadius: 8,\n                    paddingTop: 7,\n                    paddingBottom: 7,\n                    '&:hover': {\n                        backgroundColor: t.hover,\n                    },\n                    '&.Mui-selected': {\n                        // the active navigation item is filled with a gradient\n                        background: t.gradient,\n                        color: '#FFFFFF',\n                        boxShadow: `0 2px 8px ${alpha(t.primary, type === 'dark' ? 0.35 : 0.25)}`,\n                        '& .MuiListItemIcon-root': { color: '#FFFFFF' },\n                        '&:hover': { background: t.gradientHover },\n                    },\n                },\n            },\n        },\n        MuiListItemIcon: {\n            styleOverrides: {\n                root: {\n                    color: t.textSecondary,\n                    minWidth: 36,\n                },\n            },\n        },\n        MuiListItemText: {\n            styleOverrides: {\n                primary: {\n                    fontSize: '0.9rem',\n                },\n            },\n        },\n        MuiMenu: {\n            styleOverrides: {\n                paper: {\n                    backgroundColor: t.elevated,\n                    backgroundImage: 'none',\n                    border: `1px solid ${t.border}`,\n                    borderRadius: 10,\n                },\n                list: {\n                    padding: 6,\n                },\n            },\n        },\n        MuiMenuItem: {\n            styleOverrides: {\n                root: {\n                    borderRadius: 6,\n                    fontSize: '0.875rem',\n                    '&.Mui-selected': {\n                        backgroundColor: t.selected,\n                    },\n                },\n            },\n        },\n        MuiPopover: {\n            styleOverrides: {\n                paper: {\n                    backgroundColor: t.elevated,\n                    backgroundImage: 'none',\n                    border: `1px solid ${t.border}`,\n                    borderRadius: 10,\n                },\n            },\n        },\n        MuiDialog: {\n            styleOverrides: {\n                paper: {\n                    backgroundColor: t.elevated,\n                    backgroundImage: 'none',\n                    border: `1px solid ${t.border}`,\n                    borderRadius: 14,\n                },\n            },\n        },\n        MuiDialogTitle: {\n            styleOverrides: {\n                root: {\n                    fontSize: '1.05rem',\n                    fontWeight: 600,\n                },\n            },\n        },\n        MuiButton: {\n            defaultProps: {\n                disableElevation: true,\n            },\n            styleOverrides: {\n                root: {\n                    borderRadius: 8,\n                    textTransform: 'none',\n                    fontWeight: 500,\n                    boxShadow: 'none',\n                    '&:hover': { boxShadow: 'none' },\n                },\n                sizeSmall: {\n                    borderRadius: 6,\n                },\n                outlined: {\n                    borderColor: t.border,\n                },\n            },\n        },\n        MuiIconButton: {\n            styleOverrides: {\n                root: {\n                    borderRadius: 8,\n                    color: t.textSecondary,\n                    '&:hover': { backgroundColor: t.hover, color: t.textPrimary },\n                },\n            },\n        },\n        MuiToggleButton: {\n            styleOverrides: {\n                root: {\n                    borderRadius: 8,\n                    borderColor: t.border,\n                    textTransform: 'none',\n                    '&.Mui-selected': {\n                        backgroundColor: t.selected,\n                        color: t.primaryLight,\n                    },\n                },\n            },\n        },\n        MuiChip: {\n            styleOverrides: {\n                root: {\n                    borderRadius: 6,\n                    fontWeight: 500,\n                    fontSize: '0.75rem',\n                },\n                sizeSmall: {\n                    height: 22,\n                },\n                outlined: {\n                    borderColor: t.border,\n                },\n            },\n        },\n        MuiTooltip: {\n            styleOverrides: {\n                tooltip: {\n                    backgroundColor: type === 'dark' ? '#242C37' : '#1F2937',\n                    border: type === 'dark' ? `1px solid ${t.border}` : undefined,\n                    borderRadius: 8,\n                    fontSize: '0.75rem',\n                    padding: '6px 10px',\n                },\n                arrow: {\n                    color: type === 'dark' ? '#242C37' : '#1F2937',\n                },\n            },\n        },\n        MuiOutlinedInput: {\n            styleOverrides: {\n                root: {\n                    borderRadius: 8,\n                    backgroundColor: type === 'dark' ? alpha('#FFFFFF', 0.03) : alpha('#0F172A', 0.02),\n                    '& .MuiOutlinedInput-notchedOutline': { borderColor: t.border },\n                    '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: t.textDisabled },\n                },\n                input: {\n                    padding: '10px 12px',\n                },\n            },\n        },\n        MuiInputBase: {\n            styleOverrides: {\n                root: {\n                    fontSize: '0.875rem',\n                },\n            },\n        },\n        MuiInputLabel: {\n            styleOverrides: {\n                root: {\n                    color: t.textSecondary,\n                },\n            },\n        },\n        MuiSelect: {\n            styleOverrides: {\n                select: {\n                    fontSize: '0.875rem',\n                },\n            },\n        },\n        MuiTabs: {\n            styleOverrides: {\n                root: {\n                    minHeight: 42,\n                    borderBottom: `1px solid ${t.border}`,\n                },\n                indicator: {\n                    height: 2,\n                    borderRadius: 2,\n                },\n            },\n        },\n        MuiTab: {\n            styleOverrides: {\n                root: {\n                    minHeight: 42,\n                    textTransform: 'none',\n                    fontWeight: 500,\n                    fontSize: '0.8125rem',\n                    letterSpacing: '0.02em',\n                    color: t.textSecondary,\n                    '&.Mui-selected': { color: t.primaryLight },\n                },\n            },\n        },\n        MuiTable: {\n            styleOverrides: {\n                root: {\n                    borderCollapse: 'separate',\n                },\n            },\n        },\n        MuiTableCell: {\n            styleOverrides: {\n                root: {\n                    borderBottom: `1px solid ${t.border}`,\n                    fontSize: '0.8125rem',\n                    padding: '10px 14px',\n                },\n                head: {\n                    color: t.textSecondary,\n                    fontWeight: 600,\n                    fontSize: '0.75rem',\n                    backgroundColor: t.paper,\n                },\n            },\n        },\n        MuiTableRow: {\n            styleOverrides: {\n                root: {\n                    '&:hover': { backgroundColor: t.hover },\n                    '&.Mui-selected': {\n                        backgroundColor: t.selected,\n                        '&:hover': { backgroundColor: t.selected },\n                    },\n                },\n            },\n        },\n        MuiLinearProgress: {\n            styleOverrides: {\n                root: {\n                    height: 6,\n                    borderRadius: 4,\n                    backgroundColor: type === 'dark' ? alpha('#FFFFFF', 0.08) : alpha('#0F172A', 0.08),\n                },\n                bar: {\n                    borderRadius: 4,\n                },\n            },\n        },\n        MuiSwitch: {\n            styleOverrides: {\n                track: {\n                    borderRadius: 12,\n                },\n            },\n        },\n        MuiCheckbox: {\n            styleOverrides: {\n                root: {\n                    color: t.textDisabled,\n                },\n            },\n        },\n        MuiAlert: {\n            styleOverrides: {\n                root: {\n                    borderRadius: 10,\n                    border: `1px solid ${t.border}`,\n                },\n            },\n        },\n        MuiAccordion: {\n            styleOverrides: {\n                root: {\n                    backgroundColor: t.paper,\n                    backgroundImage: 'none',\n                    border: `1px solid ${t.border}`,\n                    borderRadius: 10,\n                    '&::before': { display: 'none' },\n                },\n            },\n        },\n        MuiLink: {\n            styleOverrides: {\n                root: {\n                    color: t.primaryLight,\n                    textDecorationColor: alpha(t.primaryLight, 0.4),\n                    transition: 'color .2s ease',\n                    '&:hover': { color: t.primary },\n                },\n            },\n        },\n    };\n\n    return { options, components };\n}\n"]}

package/build/index.d.ts

@@ -1,4 +1,5 @@
 export { Theme } from './Theme';
+export { getModernTheme, MODERN_DARK, MODERN_LIGHT, type ModernTokens } from './ThemeModern';
 export { GenericApp } from './GenericApp';
 export { I18n } from './i18n';
 export { printPrompt } from './Prompt';

package/build/index.js

@@ -1,4 +1,5 @@
 export { Theme } from './Theme';
+export { getModernTheme, MODERN_DARK, MODERN_LIGHT } from './ThemeModern';
 export { GenericApp } from './GenericApp';
 export { I18n } from './i18n';
 export { printPrompt } from './Prompt';