refactor(frontend): update theme

1 files changed, 217 insertions, 129 deletions

diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 82b8dfa9..5bc14704 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -4,13 +4,15 @@ import {
   type Components,
   type CSSObject,
   responsiveFontSizes,
+  type Theme,
   type ThemeOptions,
   ThemeProvider as MaterialUiThemeProvider,
   type TypographyStyle,
   type TypographyVariantsOptions,
+  useTheme,
 } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, createContext, useContext } from 'react';
 
 import { useRootStore } from '../RootStore';
 
@@ -60,34 +62,44 @@ declare module '@mui/material/styles' {
   }
 }
 
-function getMUIThemeOptions(darkMode: boolean): ThemeOptions {
-  const typography: TypographyVariantsOptions = {
-    editor: {
-      fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
-      fontFeatureSettings: '"liga", "calt"',
-      fontSize: '1rem',
-      fontWeight: 400,
-      lineHeight: 1.5,
-      letterSpacing: 0,
-      textRendering: 'optimizeLegibility',
-    },
-  };
+const typography: TypographyVariantsOptions = {
+  editor: {
+    fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
+    fontFeatureSettings: '"liga", "calt"',
+    fontSize: '1rem',
+    fontWeight: 400,
+    lineHeight: 1.5,
+    letterSpacing: 0,
+    textRendering: 'optimizeLegibility',
+  },
+};
 
-  const components: Components = {
-    MuiButton: {
-      styleOverrides: {
-        root: { borderRadius: '50em' },
-        text: { padding: '6px 16px' },
-        textSizeSmall: { padding: '4px 10px' },
-        textSizeLarge: { padding: '8px 22px' },
-      },
+const components: Components = {
+  MuiButton: {
+    styleOverrides: {
+      root: { '&.rounded': { borderRadius: '50em' } },
+      text: { '&.rounded': { padding: '6px 16px' } },
+      textSizeSmall: { '&.rounded': { padding: '4px 10px' } },
+      textSizeLarge: { '&.rounded': { padding: '8px 22px' } },
     },
-    MuiToggleButtonGroup: {
-      styleOverrides: {
-        groupedHorizontal: {
-          borderRadius: '50em',
-          ':first-of-type': { paddingLeft: 15 },
-          ':last-of-type': { paddingRight: 15 },
+  },
+  MuiToggleButton: {
+    styleOverrides: {
+      root: { '&.iconOnly': { borderRadius: '100%' } },
+    },
+  },
+  MuiToggleButtonGroup: {
+    styleOverrides: {
+      root: {
+        '&.rounded .MuiToggleButtonGroup-groupedHorizontal': {
+          ':first-of-type': {
+            paddingLeft: 15,
+            borderRadius: '50em 0 0 50em',
+          },
+          ':last-of-type': {
+            paddingRight: 15,
+            borderRadius: '0 50em 50em 0',
+          },
           '&.MuiToggleButton-sizeSmall': {
             ':first-of-type': { paddingLeft: 9 },
             ':last-of-type': { paddingRight: 9 },
@@ -99,122 +111,198 @@ function getMUIThemeOptions(darkMode: boolean): ThemeOptions {
         },
       },
     },
+  },
+  MuiTooltip: {
+    styleOverrides: {
+      tooltip: {
+        background: alpha('#212121', 0.93),
+        color: '#fff',
+      },
+      arrow: {
+        color: alpha('#212121', 0.93),
+      },
+    },
+  },
+};
+
+function createResponsiveTheme(options: ThemeOptions): Theme {
+  return responsiveFontSizes(createTheme(options));
+}
+
+const lightTheme = createResponsiveTheme({
+  typography,
+  components,
+  palette: {
+    mode: 'light',
+    primary: { main: '#038a99' },
+    secondary: { main: '#e45649' },
+    error: { main: '#ca1243' },
+    warning: { main: '#c18401' },
+    success: { main: '#50a14f' },
+    info: { main: '#4078f2' },
+    background: {
+      default: '#ffffff',
+      paper: '#ffffff',
+    },
+    text: {
+      primary: '#35373e',
+      secondary: '#696c77',
+      disabled: '#8e8f97',
+    },
+    divider: alpha('#35373e', 0.21),
+    outer: {
+      background: '#fafafa',
+      border: '#d4d4d6',
+    },
+    highlight: {
+      number: '#0084bc',
+      parameter: '#6a3e3e',
+      comment: '#8e8f97',
+      activeLine: '#fafafa',
+      selection: '#c8e4fb',
+      lineNumber: '#8e8f97',
+      foldPlaceholder: alpha('#35373e', 0.08),
+      activeLintRange: alpha('#f2a60d', 0.28),
+      occurences: {
+        read: alpha('#35373e', 0.16),
+        write: alpha('#35373e', 0.16),
+      },
+      search: {
+        match: '#00bcd4',
+        selected: '#d500f9',
+        contrastText: '#ffffff',
+      },
+    },
+  },
+});
+
+const darkTheme = createResponsiveTheme({
+  typography,
+  components: {
+    ...components,
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          color: '#f00',
+          backgroundColor: '#000',
+          border: `10px solid #ff0`,
+        },
+      },
+    },
     MuiTooltip: {
+      ...(components.MuiTooltip || {}),
       styleOverrides: {
+        ...(components.MuiTooltip?.styleOverrides || {}),
         tooltip: {
-          background: alpha('#212121', 0.93),
-          color: '#fff',
-        },
-        arrow: {
-          color: alpha('#212121', 0.93),
+          ...((components.MuiTooltip?.styleOverrides?.tooltip as
+            | CSSObject
+            | undefined) || {}),
+          color: '#ebebff',
         },
       },
     },
-  };
+  },
+  palette: {
+    mode: 'dark',
+    primary: { main: '#56b6c2' },
+    secondary: { main: '#be5046' },
+    error: { main: '#e06c75' },
+    warning: { main: '#e5c07b' },
+    success: { main: '#98c379' },
+    info: { main: '#61afef' },
+    background: {
+      default: '#282c34',
+      paper: '#21252b',
+    },
+    text: {
+      primary: '#ebebff',
+      secondary: '#abb2bf',
+      disabled: '#828997',
+    },
+    divider: alpha('#abb2bf', 0.24),
+    outer: {
+      background: '#21252b',
+      border: '#181a1f',
+    },
+    highlight: {
+      number: '#6188a6',
+      parameter: '#c8ae9d',
+      comment: '#828997',
+      activeLine: '#21252b',
+      selection: '#3e4453',
+      lineNumber: '#828997',
+      foldPlaceholder: alpha('#ebebff', 0.12),
+      activeLintRange: alpha('#fbc346', 0.28),
+      occurences: {
+        read: alpha('#ebebff', 0.24),
+        write: alpha('#ebebff', 0.24),
+      },
+      search: {
+        match: '#33eaff',
+        selected: '#dd33fa',
+        contrastText: '#21252b',
+      },
+    },
+  },
+});
 
-  return darkMode
-    ? {
-        typography,
-        components: {
-          ...components,
-          MuiTooltip: {
-            ...(components.MuiTooltip || {}),
-            styleOverrides: {
-              ...(components.MuiTooltip?.styleOverrides || {}),
-              tooltip: {
-                ...((components.MuiTooltip?.styleOverrides?.tooltip as
-                  | CSSObject
-                  | undefined) || {}),
-                color: '#ebebff',
-              },
-            },
-          },
-        },
-        palette: {
-          mode: 'dark',
-          primary: { main: '#56b6c2' },
-          error: { main: '#e06c75' },
-          warning: { main: '#e5c07b' },
-          success: { main: '#57a470' },
-          info: { main: '#52b8ff' },
-          background: {
-            default: '#282c34',
-            paper: '#21252b',
-          },
-          text: {
-            primary: '#ebebff',
-            secondary: '#abb2bf',
-            disabled: '#4b5263',
-          },
-          divider: alpha('#abb2bf', 0.16),
-          outer: {
-            background: '#21252b',
-            border: '#181a1f',
-          },
-          highlight: {
-            number: '#6188a6',
-            parameter: '#c8ae9d',
-            comment: '#6b717d',
-            activeLine: '#21252b',
-            selection: '#3e4453',
-            lineNumber: '#4b5263',
-            foldPlaceholder: alpha('#ebebff', 0.12),
-            activeLintRange: alpha('#fbc346', 0.28),
-            occurences: {
-              read: alpha('#ebebff', 0.24),
-              write: alpha('#ebebff', 0.24),
-            },
-            search: {
-              match: '#33eaff',
-              selected: '#dd33fa',
-              contrastText: '#21252b',
-            },
-          },
-        },
-      }
-    : {
-        typography,
-        components,
-        palette: {
-          mode: 'light',
-          primary: { main: '#0398a8' },
-          outer: {
-            background: '#f5f5f5',
-            border: '#cacaca',
-          },
-          highlight: {
-            number: '#3d79a2',
-            parameter: '#6a3e3e',
-            comment: 'rgba(0, 0, 0, 0.38)',
-            activeLine: '#f5f5f5',
-            selection: '#c8e4fb',
-            lineNumber: 'rgba(0, 0, 0, 0.38)',
-            foldPlaceholder: 'rgba(0, 0, 0, 0.12)',
-            activeLintRange: alpha('#ed6c02', 0.24),
-            occurences: {
-              read: 'rgba(0, 0, 0, 0.12)',
-              write: 'rgba(0, 0, 0, 0.12)',
-            },
-            search: {
-              match: '#00bcd4',
-              selected: '#d500f9',
-              contrastText: '#ffffff',
-            },
-          },
-        },
-      };
+const ContrastThemeContext = createContext<Theme | undefined>(undefined);
+
+function ThemeAndContrastThemeProvider({
+  theme,
+  contrastTheme,
+  children,
+}: {
+  theme: Theme;
+  contrastTheme: Theme;
+  children?: ReactNode;
+}): JSX.Element {
+  return (
+    <MaterialUiThemeProvider theme={theme}>
+      <ContrastThemeContext.Provider value={contrastTheme}>
+        {children}
+      </ContrastThemeContext.Provider>
+    </MaterialUiThemeProvider>
+  );
 }
 
-function ThemeProvider({ children }: { children?: ReactNode }) {
+ThemeAndContrastThemeProvider.defaultProps = {
+  children: undefined,
+};
+
+export function ContrastThemeProvider({
+  children,
+}: {
+  children?: ReactNode;
+}): JSX.Element {
+  const theme = useTheme();
+  const contrastTheme = useContext(ContrastThemeContext);
+  if (!contrastTheme) {
+    throw new Error('ContrastThemeProvider must be used within ThemeProvider');
+  }
+  return (
+    <ThemeAndContrastThemeProvider theme={contrastTheme} contrastTheme={theme}>
+      {children}
+    </ThemeAndContrastThemeProvider>
+  );
+}
+
+ContrastThemeProvider.defaultProps = {
+  children: undefined,
+};
+
+function ThemeProvider({ children }: { children?: ReactNode }): JSX.Element {
   const {
     themeStore: { darkMode },
   } = useRootStore();
 
-  const themeOptions = getMUIThemeOptions(darkMode);
-  const theme = responsiveFontSizes(createTheme(themeOptions));
-
   return (
-    <MaterialUiThemeProvider theme={theme}>{children}</MaterialUiThemeProvider>
+    <ThemeAndContrastThemeProvider
+      theme={darkMode ? darkTheme : lightTheme}
+      contrastTheme={darkMode ? lightTheme : darkTheme}
+    >
+      {children}
+    </ThemeAndContrastThemeProvider>
   );
 }