@swisper.ai/design-system 0.0.2

package/dist/mui-theme.js

@@ -0,0 +1,476 @@
+import { createTheme } from '@mui/material/styles';
+import * as tokens from '../dist/js/tokens';
+const DEFAULT_PADDING_STEP = 8;
+// Constants from frontend theme
+export const paperXMargin = 20;
+export const paperYMargin = 20;
+export const doublePaperXMargin = paperXMargin * 2;
+export const doublePaperYMargin = paperYMargin * 2;
+export const tertiaryColor = '#B6C2D1';
+const defaultTheme = createTheme({
+    palette: {
+        action: {
+            disabled: '#F9FBFC61',
+            disabledBackground: '#F9FBFC61',
+        },
+        steel: {
+            100: tokens.SwisperCoreColorSteel100,
+            // 150: tokens.SwisperCoreColorSteel150,
+            200: tokens.SwisperCoreColorSteel200,
+            // 250: tokens.SwisperCoreColorSteel250,
+            300: tokens.SwisperCoreColorSteel300,
+            400: tokens.SwisperCoreColorSteel400,
+            500: tokens.SwisperCoreColorSteel500,
+            600: tokens.SwisperCoreColorSteel600,
+            // 650: tokens.SwisperCoreColorSteel650,
+            700: tokens.SwisperCoreColorSteel700,
+            800: tokens.SwisperCoreColorSteel800,
+            900: tokens.SwisperCoreColorSteel900,
+        },
+        blue: {
+            100: tokens.SwisperCoreColorBlue100,
+            300: tokens.SwisperCoreColorBlue300,
+            400: tokens.SwisperCoreColorBlue400,
+            500: tokens.SwisperCoreColorBlue500,
+            600: tokens.SwisperCoreColorBlue600,
+            700: tokens.SwisperCoreColorBlue700,
+            800: tokens.SwisperCoreColorBlue800,
+        },
+        lagoon: {
+        // 5: tokens.SwisperCoreColorLagoon5,
+        },
+    },
+    typography: {
+        fontSize: 16,
+        fontWeightLight: 300,
+        fontWeightRegular: 400,
+        fontWeightMedium: 500,
+        fontWeightBold: 700,
+        htmlFontSize: 16,
+        fontFamily: '"Noto Sans", sans-serif',
+        h1: {
+            fontSize: '2rem', // 32px
+            lineHeight: '140%',
+            letterSpacing: 0,
+        },
+        h2: {
+            fontSize: '1.750rem', // 28px
+            lineHeight: '140%',
+            letterSpacing: 0,
+        },
+        h3: {
+            fontSize: '1.5rem', // 24px
+            fontWeight: 'medium',
+            lineHeight: '140%',
+            letterSpacing: 0,
+        },
+        h4: {
+            fontSize: '1.25rem', // 20px
+            fontWeight: 'medium',
+            lineHeight: '140%',
+            letterSpacing: 0,
+        },
+        h5: {
+            fontSize: '1.5rem', // 18px
+            fontWeight: 700,
+            lineHeight: '140%',
+            letterSpacing: 0,
+        },
+        h6: {
+            fontSize: '1.125rem', // 16px
+            fontWeight: 600,
+            lineHeight: '140%',
+            letterSpacing: 0,
+        },
+        body1: {
+            fontSize: '1rem', // 16px
+            lineHeight: '160%',
+            letterSpacing: 0,
+        },
+        body2: {
+            fontSize: '0.875rem', // 14px
+            fontWeight: 400,
+            lineHeight: '160%',
+            letterSpacing: 0,
+        },
+        caption: {
+            fontSize: '0.75rem', // 12px
+            lineHeight: '130%', // 16px
+            letterSpacing: '0.16px',
+        },
+        subtitle1: {
+            fontSize: '1rem', // 16px
+            fontWeight: 400,
+            lineHeight: 1.75, // 28px
+            letterSpacing: '0.15px',
+        },
+        subtitle2: {
+            fontSize: '0.875rem', // 14px
+            fontWeight: 500,
+            lineHeight: 1.57, // 22px
+            letterSpacing: '0.1px',
+        },
+        overline: {
+            fontSize: '0.75rem', // 12px
+            fontWeight: 400,
+            lineHeight: 1.5, // 18px
+            letterSpacing: '1.92px',
+            textTransform: 'uppercase',
+        },
+    },
+    spacing: DEFAULT_PADDING_STEP,
+    shape: {
+        borderRadius: Number(tokens.SwisperCoreBorderRadius50),
+    },
+    components: {
+        MuiSvgIcon: {
+            styleOverrides: {
+                root: {
+                    '&.MuiSvgIcon-fontSizeInherit': {
+                        width: '100%',
+                        height: '100%',
+                    },
+                    '&.MuiSvgIcon-fontSizeSmall': {
+                        width: '1.25rem' /* 20px */,
+                        height: '1.25rem' /* 20px */,
+                    },
+                    '&.MuiSvgIcon-fontSizeMedium': {
+                        width: '1.5rem' /* 24px */,
+                        height: '1.5rem' /* 24px */,
+                    },
+                    '&.MuiSvgIcon-fontSizeLarge': {
+                        width: '2.188rem' /* 35px */,
+                        height: '2.188rem' /* 35px */,
+                    },
+                },
+            },
+            defaultProps: {
+                fontSize: 'medium',
+            },
+        },
+        MuiIconButton: {},
+    },
+});
+const darkTheme = createTheme(defaultTheme, {
+    palette: {
+        mode: 'dark',
+        primary: {
+            main: tokens.SwisperDarkColorPrimaryMain,
+        },
+        secondary: {
+            main: '#B6C2D1',
+        },
+        error: {
+            main: '#FF5252',
+        },
+        background: {
+            default: tokens.SwisperDarkColorGlobalBg,
+        },
+        text: {
+            primary: tokens.SwisperDarkColorGlobalFgBase,
+            secondary: '#FFFFFFB2',
+            tertiary: tertiaryColor,
+        },
+        warning: {
+            dark: '#F57C00',
+        },
+    },
+    shape: {
+        borderRadius: Number(tokens.SwisperCoreBorderRadius100),
+    },
+    components: {
+        MuiIconButton: {
+            styleOverrides: {
+                root: {
+                    color: tertiaryColor,
+                    '&:hover': {
+                        color: 'white',
+                    },
+                },
+            },
+        },
+        MuiAppBar: {
+            defaultProps: {
+                elevation: 0,
+            },
+            styleOverrides: {
+                root: {
+                    backgroundColor: tokens.SwisperDarkColorGlobalBg,
+                    elevation: 0,
+                    padding: 16,
+                    paddingBottom: 0,
+                    minHeight: 0,
+                    margin: 0,
+                },
+            },
+        },
+        MuiToolbar: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    minHeight: 0,
+                    padding: 0,
+                    [theme.breakpoints.up('sm')]: {
+                        minHeight: 0,
+                        padding: 0,
+                    },
+                }),
+            },
+        },
+        MuiPaper: {
+            defaultProps: {
+                elevation: 0,
+            },
+            styleOverrides: {
+                root: {
+                    backgroundColor: tokens.SwisperDarkColorGlobalSurface,
+                    color: tokens.SwisperDarkColorGlobalFgBase,
+                    borderRadius: Number(tokens.SwisperCoreBorderRadius100),
+                    border: 0,
+                    padding: 16,
+                    margin: `${paperYMargin}px ${paperXMargin}px`,
+                },
+                elevation16: {
+                    '&.MuiPaper-elevation': {
+                        margin: 0,
+                        height: 'calc(100vh)',
+                    },
+                },
+            },
+        },
+        MuiDrawer: {
+            styleOverrides: {
+                paper: {
+                    backgroundColor: tokens.SwisperDarkColorGlobalBg,
+                    borderRight: 0,
+                    borderRadius: 0,
+                    borderTopRightRadius: '16px',
+                    borderBottomRightRadius: '16px',
+                    height: `calc(100vh - 64px - ${doublePaperYMargin}px)`, // Using default header height
+                    marginTop: `calc(64px + ${paperYMargin}px)`, // Using default header height
+                    width: 280, // Default SIDEMENU_WIDTH
+                    boxSizing: 'border-box',
+                },
+            },
+        },
+        MuiSelect: {
+            styleOverrides: {
+                root: {
+                    '&::before': {
+                        borderBottom: '0px',
+                    },
+                    '&.MuiInput-root:hover': {
+                        '&::before': {
+                            borderBottom: '0px',
+                        },
+                    },
+                    '& .MuiSelect-iconOutlined': {
+                        color: 'inherit',
+                    },
+                },
+                select: {
+                    '& .MuiSelect-iconOutlined': {
+                        color: 'inherit',
+                    },
+                },
+            },
+        },
+        MuiPopover: {
+            styleOverrides: {
+                paper: {
+                    margin: '8px',
+                    padding: '8px',
+                },
+            },
+        },
+        MuiTextField: {
+            styleOverrides: {
+                root: {
+                    '& .MuiInputBase-input::placeholder': {
+                        color: '#F9FBFC4D',
+                    },
+                },
+            },
+        },
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    textTransform: 'none',
+                },
+            },
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: {
+                    elevation: 16,
+                    borderRadius: '10px',
+                    margin: `${paperYMargin}px ${paperXMargin}px`,
+                    padding: 0,
+                    background: '#141923',
+                },
+            },
+        },
+        MuiDialogContent: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#222834',
+                    padding: '0px 24px',
+                },
+            },
+        },
+        MuiDialogTitle: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#222834',
+                    padding: '16px 24px',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    fontWeight: 600,
+                    fontSize: '1.25rem',
+                    lineHeight: '24px',
+                },
+            },
+        },
+        MuiFormControlLabel: {
+            styleOverrides: {
+                root: {
+                    margin: 0,
+                },
+            },
+        },
+        MuiMenu: {
+            styleOverrides: {
+                root: {},
+                paper: {
+                    background: '#202730',
+                    border: '1px solid #202730',
+                    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.9)',
+                    borderRadius: '4px',
+                    padding: 0,
+                },
+                list: {
+                    padding: '12px',
+                    overflowY: 'scroll',
+                },
+            },
+        },
+        MuiMenuItem: {
+            styleOverrides: {
+                root: {
+                    gap: '0',
+                    padding: '8px',
+                    borderRadius: '8px',
+                    minHeight: '40px',
+                    fontStyle: 'normal',
+                    fontWeight: 700,
+                    fontSize: '16px',
+                    lineHeight: '24px',
+                    letterSpacing: '0.15px',
+                    color: '#FFFFFF',
+                    '& .MuiListItemText-root': {
+                        minWidth: '40px',
+                    },
+                    '& .MuiDivider-root': {
+                        margin: '0',
+                        backgroundColor: 'red',
+                    },
+                    '&:hover': {
+                        backgroundColor: '#2E3442',
+                    },
+                    '&:hover .MuiListItemIcon-root': {
+                        color: '#FFFFFF',
+                    },
+                    '&.Mui-selected': {
+                        backgroundColor: '#2E3442',
+                    },
+                    '&.Mui-selected:hover': {
+                        backgroundColor: '#2E3442',
+                    },
+                },
+            },
+        },
+        MuiListItemIcon: {
+            styleOverrides: {
+                root: {
+                    color: '#FFFFFF8F',
+                    minWidth: '40px',
+                },
+            },
+        },
+        MuiInputBase: {
+            styleOverrides: {
+                input: {
+                    '&::placeholder': {
+                        color: '#F9FBFC4D',
+                    },
+                    '&:-webkit-autofill': {
+                        backgroundColor: 'red',
+                        color: 'red',
+                    },
+                },
+            },
+        },
+        MuiCheckbox: {
+            styleOverrides: {
+                root: {
+                    '& .MuiSvgIcon-root': {
+                        fill: '#FFFFFF8F',
+                    },
+                    '&.Mui-checked .MuiSvgIcon-root': {
+                        fill: tokens.SwisperDarkColorPrimaryMain,
+                    },
+                },
+            },
+        },
+        MuiTable: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'transparent',
+                },
+            },
+        },
+        MuiTableHead: {},
+        MuiTableBody: {},
+        MuiTableRow: {},
+        MuiTableCell: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'transparent',
+                    padding: '8px',
+                    borderBottom: 'none',
+                    '&:first-child': {
+                        paddingLeft: '16px',
+                    },
+                    '&:last-child': {
+                        paddingRight: '16px',
+                    },
+                    fontFamily: 'var(--font-noto-sans)',
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                    fontSize: '16px',
+                    lineHeight: '150%',
+                    color: '#FFFFFF',
+                    '&[data-header]': {
+                        color: '#FFFFFFB2',
+                        backgroundColor: '#5C647C1A',
+                    },
+                },
+            },
+        },
+    },
+});
+const lightTheme = createTheme(defaultTheme, {
+    palette: {
+        mode: 'light',
+    },
+    components: {
+        MuiDialog: {
+            styleOverrides: {
+                sx: {
+                    backgroundColor: 'transparent',
+                },
+            },
+        },
+    },
+});
+export { lightTheme, darkTheme };