From f68ab55d6b5cfad78c1eb16307a665cbf7a36004 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 14 Jul 2023 23:16:05 +1000
Subject: [PATCH] fix(ui): fix missing mantineTheme, fixes fonts

---
 .../app/components/ThemeLocaleProvider.tsx    |   5 +-
 .../frontend/web/src/mantine-theme/theme.ts   | 126 +-----------------
 2 files changed, 5 insertions(+), 126 deletions(-)

diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
index 132667f8ab..621b196ae0 100644
--- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
+++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
@@ -11,6 +11,7 @@ import '@fontsource-variable/inter';
 import { MantineProvider } from '@mantine/core';
 import 'overlayscrollbars/overlayscrollbars.css';
 import 'theme/css/overlayscrollbars.css';
+import { useMantineTheme } from 'mantine-theme/theme';
 
 type ThemeLocaleProviderProps = {
   children: ReactNode;
@@ -34,8 +35,10 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
     document.body.dir = direction;
   }, [direction]);
 
+  const mantineTheme = useMantineTheme();
+
   return (
-    <MantineProvider>
+    <MantineProvider theme={mantineTheme}>
       <ChakraProvider theme={theme} colorModeManager={manager}>
         {children}
       </ChakraProvider>
diff --git a/invokeai/frontend/web/src/mantine-theme/theme.ts b/invokeai/frontend/web/src/mantine-theme/theme.ts
index 7aab6f115e..3dcbf80b90 100644
--- a/invokeai/frontend/web/src/mantine-theme/theme.ts
+++ b/invokeai/frontend/web/src/mantine-theme/theme.ts
@@ -1,31 +1,7 @@
-import { useColorMode, useToken } from '@chakra-ui/react';
 import { MantineThemeOverride } from '@mantine/core';
-import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
 import { useMemo } from 'react';
-import { mode } from 'theme/util/mode';
 
 export const useMantineTheme = () => {
-  const { colorMode } = useColorMode();
-  const {
-    base50,
-    base100,
-    base200,
-    base300,
-    base400,
-    base500,
-    base600,
-    base700,
-    base800,
-    base900,
-    accent200,
-    accent300,
-    accent400,
-    accent500,
-    accent600,
-  } = useChakraThemeTokens();
-
-  const [boxShadow] = useToken('shadows', ['dark-lg']);
-
   const mantineTheme: MantineThemeOverride = useMemo(
     () => ({
       colorScheme: 'dark',
@@ -46,109 +22,9 @@ export const useMantineTheme = () => {
             },
           },
         },
-        Select: {
-          styles: {
-            label: {
-              color: mode(base700, base300)(colorMode),
-              fontWeight: 'normal',
-            },
-            input: {
-              backgroundColor: mode(base50, base900)(colorMode),
-              borderWidth: '2px',
-              borderColor: mode(base200, base800)(colorMode),
-              color: mode(base900, base100)(colorMode),
-              paddingRight: 24,
-              fontWeight: 600,
-              '&:hover': { borderColor: mode(base300, base600)(colorMode) },
-              '&:focus': {
-                borderColor: mode(accent300, accent600)(colorMode),
-              },
-              '&:is(:focus, :hover)': {
-                borderColor: mode(base400, base500)(colorMode),
-              },
-              '&:focus-within': {
-                borderColor: mode(accent200, accent600)(colorMode),
-              },
-              '&[data-disabled]': {
-                backgroundColor: mode(base300, base700)(colorMode),
-                color: mode(base600, base400)(colorMode),
-                cursor: 'not-allowed',
-              },
-            },
-            value: {
-              backgroundColor: mode(base100, base900)(colorMode),
-              color: mode(base900, base100)(colorMode),
-              button: {
-                color: mode(base900, base100)(colorMode),
-              },
-              '&:hover': {
-                backgroundColor: mode(base300, base700)(colorMode),
-                cursor: 'pointer',
-              },
-            },
-            dropdown: {
-              backgroundColor: mode(base200, base800)(colorMode),
-              borderColor: mode(base200, base800)(colorMode),
-              boxShadow,
-            },
-            item: {
-              backgroundColor: mode(base200, base800)(colorMode),
-              color: mode(base800, base200)(colorMode),
-              padding: 6,
-              '&[data-hovered]': {
-                color: mode(base900, base100)(colorMode),
-                backgroundColor: mode(base300, base700)(colorMode),
-              },
-              '&[data-active]': {
-                backgroundColor: mode(base300, base700)(colorMode),
-                '&:hover': {
-                  color: mode(base900, base100)(colorMode),
-                  backgroundColor: mode(base300, base700)(colorMode),
-                },
-              },
-              '&[data-selected]': {
-                backgroundColor: mode(accent400, accent600)(colorMode),
-                color: mode(base50, base100)(colorMode),
-                fontWeight: 600,
-                '&:hover': {
-                  backgroundColor: mode(accent500, accent500)(colorMode),
-                  color: mode('white', base50)(colorMode),
-                },
-              },
-              '&[data-disabled]': {
-                color: mode(base500, base600)(colorMode),
-                cursor: 'not-allowed',
-              },
-            },
-            rightSection: {
-              width: 32,
-              button: {
-                color: mode(base900, base100)(colorMode),
-              },
-            },
-          },
-        },
       },
     }),
-    [
-      accent200,
-      accent300,
-      accent400,
-      accent500,
-      accent600,
-      base100,
-      base200,
-      base300,
-      base400,
-      base50,
-      base500,
-      base600,
-      base700,
-      base800,
-      base900,
-      boxShadow,
-      colorMode,
-    ]
+    []
   );
 
   return mantineTheme;