@swisper.ai/design-system 0.0.2

package/src/mui-theme.ts

@@ -0,0 +1,509 @@
+import { type PaletteColorOptions, type Theme } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
+
+import * as tokens from '../dist/js/tokens';
+
+declare module '@mui/material/styles' {
+  interface PaletteOptions {
+    primary?: PaletteColorOptions;
+    steel?: PaletteColorOptions;
+    blue?: PaletteColorOptions;
+    lagoon?: PaletteColorOptions;
+  }
+}
+
+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 }: { theme: 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 };