feat(ui): extract mantine component styles to hook, add less opinionated mantine components

IAIMantineSelect and IAIMantineMultiSelect have a bit of extra logic that prevents simple select functionality from working as expected.

- extract the styles into hooks
- rename those two components to IAIMantineSearchableSelect and IAIMantineSearchableMultiSelect
- Create IAIMantineSelect (which is just a dropdown) and use it in model manager and a few other places

When we only have a few options to present and searching is not efficient, we should use this instead.

invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx

@@ -9,7 +9,6 @@ import { theme as invokeAITheme } from 'theme/theme';
 
 import '@fontsource-variable/inter';
 import { MantineProvider } from '@mantine/core';
-import { mantineTheme } from 'mantine-theme/theme';
 import 'overlayscrollbars/overlayscrollbars.css';
 import 'theme/css/overlayscrollbars.css';
 
@@ -36,7 +35,7 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
   }, [direction]);
 
   return (
-    <MantineProvider withGlobalStyles theme={mantineTheme}>
+    <MantineProvider>
       <ChakraProvider theme={theme} colorModeManager={manager}>
         {children}
       </ChakraProvider>

invokeai/frontend/web/src/common/components/IAIMantineInput.tsx

@@ -7,8 +7,17 @@ type IAIMantineTextInputProps = TextInputProps;
 
 export default function IAIMantineTextInput(props: IAIMantineTextInputProps) {
   const { ...rest } = props;
-  const { base50, base100, base200, base800, base900, accent500, accent300 } =
+  const {
-    useChakraThemeTokens();
+    base50,
+    base100,
+    base200,
+    base300,
+    base800,
+    base700,
+    base900,
+    accent500,
+    accent300,
+  } = useChakraThemeTokens();
   const { colorMode } = useColorMode();
 
   return (
@@ -24,6 +33,10 @@ export default function IAIMantineTextInput(props: IAIMantineTextInputProps) {
             borderColor: mode(accent300, accent500)(colorMode),
           },
         },
+        label: {
+          color: mode(base700, base300)(colorMode),
+          fontWeight: 'normal',
+        },
       })}
       {...rest}
     />

invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx

@@ -1,10 +1,9 @@
-import { Tooltip, useColorMode, useToken } from '@chakra-ui/react';
+import { Tooltip } from '@chakra-ui/react';
 import { MultiSelect, MultiSelectProps } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
+import { useMantineMultiSelectStyles } from 'mantine-theme/hooks/useMantineMultiSelectStyles';
 import { KeyboardEvent, RefObject, memo, useCallback } from 'react';
-import { mode } from 'theme/util/mode';
 
 type IAIMultiSelectProps = MultiSelectProps & {
   tooltip?: string;
@@ -14,25 +13,6 @@ type IAIMultiSelectProps = MultiSelectProps & {
 const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
   const { searchable = true, tooltip, inputRef, ...rest } = props;
   const dispatch = useAppDispatch();
-  const {
-    base50,
-    base100,
-    base200,
-    base300,
-    base400,
-    base500,
-    base600,
-    base700,
-    base800,
-    base900,
-    accent200,
-    accent300,
-    accent400,
-    accent500,
-    accent600,
-  } = useChakraThemeTokens();
-  const [boxShadow] = useToken('shadows', ['dark-lg']);
-  const { colorMode } = useColorMode();
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
@@ -52,6 +32,8 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
     [dispatch]
   );
 
+  const styles = useMantineMultiSelectStyles();
+
   return (
     <Tooltip label={tooltip} placement="top" hasArrow isOpen={true}>
       <MultiSelect
@@ -60,92 +42,7 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
         onKeyUp={handleKeyUp}
         searchable={searchable}
         maxDropdownHeight={300}
-        styles={() => ({
+        styles={styles}
-          label: {
-            color: mode(base700, base300)(colorMode),
-            fontWeight: 'normal',
-          },
-          searchInput: {
-            ':placeholder': {
-              color: mode(base300, base700)(colorMode),
-            },
-          },
-          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(base200, base800)(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: 24,
-            padding: 20,
-            button: {
-              color: mode(base900, base100)(colorMode),
-            },
-          },
-        })}
         {...rest}
       />
     </Tooltip>

invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx

@@ -0,0 +1,78 @@
+import { Tooltip } from '@chakra-ui/react';
+import { Select, SelectProps } from '@mantine/core';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
+import { useMantineSelectStyles } from 'mantine-theme/hooks/useMantineSelectStyles';
+import { KeyboardEvent, RefObject, memo, useCallback, useState } from 'react';
+
+export type IAISelectDataType = {
+  value: string;
+  label: string;
+  tooltip?: string;
+};
+
+type IAISelectProps = SelectProps & {
+  tooltip?: string;
+  inputRef?: RefObject<HTMLInputElement>;
+};
+
+const IAIMantineSearchableSelect = (props: IAISelectProps) => {
+  const { searchable = true, tooltip, inputRef, onChange, ...rest } = props;
+  const dispatch = useAppDispatch();
+
+  const [searchValue, setSearchValue] = useState('');
+
+  // we want to capture shift keypressed even when an input is focused
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.shiftKey) {
+        dispatch(shiftKeyPressed(true));
+      }
+    },
+    [dispatch]
+  );
+
+  const handleKeyUp = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (!e.shiftKey) {
+        dispatch(shiftKeyPressed(false));
+      }
+    },
+    [dispatch]
+  );
+
+  // wrap onChange to clear search value on select
+  const handleChange = useCallback(
+    (v: string | null) => {
+      setSearchValue('');
+
+      if (!onChange) {
+        return;
+      }
+
+      onChange(v);
+    },
+    [onChange]
+  );
+
+  const styles = useMantineSelectStyles();
+
+  return (
+    <Tooltip label={tooltip} placement="top" hasArrow>
+      <Select
+        ref={inputRef}
+        searchValue={searchValue}
+        onSearchChange={setSearchValue}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        searchable={searchable}
+        maxDropdownHeight={300}
+        styles={styles}
+        {...rest}
+      />
+    </Tooltip>
+  );
+};
+
+export default memo(IAIMantineSearchableSelect);

invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx

@@ -1,10 +1,7 @@
-import { Tooltip, useColorMode, useToken } from '@chakra-ui/react';
+import { Tooltip } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { useMantineSelectStyles } from 'mantine-theme/hooks/useMantineSelectStyles';
-import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
+import { RefObject, memo } from 'react';
-import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
-import { KeyboardEvent, RefObject, memo, useCallback, useState } from 'react';
-import { mode } from 'theme/util/mode';
 
 export type IAISelectDataType = {
   value: string;
@@ -18,157 +15,13 @@ type IAISelectProps = SelectProps & {
 };
 
 const IAIMantineSelect = (props: IAISelectProps) => {
-  const { searchable = true, tooltip, inputRef, onChange, ...rest } = props;
+  const { tooltip, inputRef, ...rest } = props;
-  const dispatch = useAppDispatch();
-  const {
-    base50,
-    base100,
-    base200,
-    base300,
-    base400,
-    base500,
-    base600,
-    base700,
-    base800,
-    base900,
-    accent200,
-    accent300,
-    accent400,
-    accent500,
-    accent600,
-  } = useChakraThemeTokens();
 
-  const { colorMode } = useColorMode();
+  const styles = useMantineSelectStyles();
-  const [searchValue, setSearchValue] = useState('');
-
-  // we want to capture shift keypressed even when an input is focused
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
-      if (e.shiftKey) {
-        dispatch(shiftKeyPressed(true));
-      }
-    },
-    [dispatch]
-  );
-
-  const handleKeyUp = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
-      if (!e.shiftKey) {
-        dispatch(shiftKeyPressed(false));
-      }
-    },
-    [dispatch]
-  );
-
-  // wrap onChange to clear search value on select
-  const handleChange = useCallback(
-    (v: string | null) => {
-      setSearchValue('');
-
-      if (!onChange) {
-        return;
-      }
-
-      onChange(v);
-    },
-    [onChange]
-  );
-
-  const [boxShadow] = useToken('shadows', ['dark-lg']);
 
   return (
     <Tooltip label={tooltip} placement="top" hasArrow>
-      <Select
+      <Select ref={inputRef} styles={styles} {...rest} />
-        ref={inputRef}
-        searchValue={searchValue}
-        onSearchChange={setSearchValue}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        onKeyUp={handleKeyUp}
-        searchable={searchable}
-        maxDropdownHeight={300}
-        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),
-            },
-          },
-        })}
-        {...rest}
-      />
     </Tooltip>
   );
 };

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -24,7 +24,7 @@ import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { isEqual } from 'lodash-es';
 
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import {
   canvasCopiedToClipboard,
   canvasDownloadedAsImage,
@@ -213,7 +213,7 @@ const IAICanvasToolbar = () => {
       }}
     >
       <Box w={24}>
-        <IAIMantineSelect
+        <IAIMantineSearchableSelect
           tooltip={`${t('unifiedCanvas.layer')} (Q)`}
           value={layer}
           data={LAYER_NAMES_DICT}

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx

@@ -1,8 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIMantineSelect, {
+import IAIMantineSearchableSelect, {
   IAISelectDataType,
-} from 'common/components/IAIMantineSelect';
+} from 'common/components/IAIMantineSearchableSelect';
 import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 import {
   CONTROLNET_MODELS,
@@ -48,7 +48,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
   );
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       data={controlNetModels}
       value={model}
       onChange={handleModelChanged}

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx

@@ -1,8 +1,12 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 
-import IAIMantineSelect, {
+import { createSelector } from '@reduxjs/toolkit';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIMantineSearchableSelect, {
   IAISelectDataType,
-} from 'common/components/IAIMantineSelect';
+} from 'common/components/IAIMantineSearchableSelect';
+import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
+import { configSelector } from 'features/system/store/configSelectors';
 import { map } from 'lodash-es';
 import { memo, useCallback } from 'react';
 import { CONTROLNET_PROCESSORS } from '../../store/constants';
@@ -11,10 +15,6 @@ import {
   ControlNetProcessorNode,
   ControlNetProcessorType,
 } from '../../store/types';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
-import { createSelector } from '@reduxjs/toolkit';
-import { configSelector } from 'features/system/store/configSelectors';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 
 type ParamControlNetProcessorSelectProps = {
   controlNetId: string;
@@ -72,7 +72,7 @@ const ParamControlNetProcessorSelect = (
   );
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       label="Processor"
       value={processorNode.type ?? 'canny_image_processor'}
       data={controlNetProcessors}

invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx

@@ -9,7 +9,7 @@ import {
 import { SelectItem } from '@mantine/core';
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectItemWithTooltip';
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { forEach } from 'lodash-es';
@@ -106,7 +106,7 @@ const ParamEmbeddingPopover = (props: Props) => {
               </Text>
             </Flex>
           ) : (
-            <IAIMantineSelect
+            <IAIMantineSearchableSelect
               inputRef={inputRef}
               autoFocus
               placeholder={'Add Embedding'}

invokeai/frontend/web/src/features/gallery/components/Boards/UpdateImageBoardModal.tsx

@@ -12,10 +12,10 @@ import {
 } from '@chakra-ui/react';
 import IAIButton from 'common/components/IAIButton';
 
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import { memo, useContext, useRef, useState } from 'react';
-import { AddImageToBoardContext } from '../../../../app/contexts/AddImageToBoardContext';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
+import { AddImageToBoardContext } from '../../../../app/contexts/AddImageToBoardContext';
 
 const UpdateImageBoardModal = () => {
   // const boards = useSelector(selectBoardsAll);
@@ -56,7 +56,7 @@ const UpdateImageBoardModal = () => {
                 {isFetching ? (
                   <Spinner />
                 ) : (
-                  <IAIMantineSelect
+                  <IAIMantineSearchableSelect
                     placeholder="Select Board"
                     onChange={(v) => setSelectedBoard(v)}
                     value={selectedBoard}

invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx

@@ -4,7 +4,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { RootState, stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectItemWithTooltip';
 import { loraAdded } from 'features/lora/store/loraSlice';
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
@@ -84,7 +84,7 @@ const ParamLoRASelect = () => {
   }
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       placeholder={data.length === 0 ? 'All LoRAs added' : 'Add LoRA'}
       value={null}
       data={data}

invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx

@@ -3,7 +3,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppToaster } from 'app/components/Toaster';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import { map } from 'lodash-es';
 import { forwardRef, useCallback } from 'react';
 import 'reactflow/dist/style.css';
@@ -77,7 +77,7 @@ const AddNodeMenu = () => {
 
   return (
     <Flex sx={{ gap: 2, alignItems: 'center' }}>
-      <IAIMantineSelect
+      <IAIMantineSearchableSelect
         selectOnBlur={false}
         placeholder="Add Node"
         value={null}

invokeai/frontend/web/src/features/nodes/components/fields/LoRAModelInputFieldComponent.tsx

@@ -1,7 +1,7 @@
 import { Flex, Text } from '@chakra-ui/react';
 import { SelectItem } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectItemWithTooltip';
 import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
 import {
@@ -89,7 +89,7 @@ const LoRAModelInputFieldComponent = (
   }
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       value={selectedLoRAModel?.id ?? null}
       label={
         selectedLoRAModel?.base_model &&

invokeai/frontend/web/src/features/nodes/components/fields/ModelInputFieldComponent.tsx

@@ -6,7 +6,7 @@ import {
 } from 'features/nodes/types/types';
 
 import { SelectItem } from '@mantine/core';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { modelIdToMainModelParam } from 'features/parameters/util/modelIdToMainModelParam';
 import { forEach } from 'lodash-es';
@@ -81,14 +81,14 @@ const ModelInputFieldComponent = (
   );
 
   return isLoading ? (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       label={t('modelManager.model')}
       placeholder="Loading..."
       disabled={true}
       data={[]}
     />
   ) : (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       tooltip={selectedModel?.description}
       label={
         selectedModel?.base_model && MODEL_TYPE_MAP[selectedModel?.base_model]

invokeai/frontend/web/src/features/nodes/components/fields/VaeModelInputFieldComponent.tsx

@@ -1,6 +1,6 @@
 import { SelectItem } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectItemWithTooltip';
 import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
 import {
@@ -86,7 +86,7 @@ const VaeModelInputFieldComponent = (
   );
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       itemComponent={IAIMantineSelectItemWithTooltip}
       tooltip={selectedVaeModel?.description}
       label={

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxScaleMethod } from 'features/canvas/store/canvasSlice';
 import {
@@ -35,7 +35,7 @@ const ParamScaleBeforeProcessing = () => {
   };
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       label={t('parameters.scaleBeforeProcessing')}
       data={BOUNDING_BOX_SCALES_DICT}
       value={boundingBoxScale}

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx

@@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { SCHEDULER_LABEL_MAP, SCHEDULER_NAMES } from 'app/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setScheduler } from 'features/parameters/store/generationSlice';
 import { SchedulerParam } from 'features/parameters/types/parameterSchemas';
@@ -48,7 +48,7 @@ const ParamScheduler = () => {
   );
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       label={t('parameters.scheduler')}
       value={scheduler}
       data={data}

invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreType.tsx

@@ -1,7 +1,7 @@
 import { FACETOOL_TYPES } from 'app/constants';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import {
   FacetoolType,
   setFacetoolType,
@@ -20,7 +20,7 @@ export default function FaceRestoreType() {
     dispatch(setFacetoolType(v as FacetoolType));
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       label={t('parameters.type')}
       data={FACETOOL_TYPES.concat()}
       value={facetoolType}

invokeai/frontend/web/src/features/parameters/components/Parameters/MainModel/ParamMainModelSelect.tsx

@@ -2,7 +2,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 
 import { SelectItem } from '@mantine/core';
 import { createSelector } from '@reduxjs/toolkit';
@@ -77,14 +77,14 @@ const ParamMainModelSelect = () => {
   );
 
   return isLoading ? (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       label={t('modelManager.model')}
       placeholder="Loading..."
       disabled={true}
       data={[]}
     />
   ) : (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       tooltip={selectedModel?.description}
       label={t('modelManager.model')}
       value={selectedModel?.id}

invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleScale.tsx

@@ -1,7 +1,7 @@
 import { UPSCALING_LEVELS } from 'app/constants';
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import {
   UpscalingLevel,
   setUpscalingLevel,
@@ -24,7 +24,7 @@ export default function UpscaleScale() {
     dispatch(setUpscalingLevel(Number(v) as UpscalingLevel));
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       disabled={!isESRGANAvailable}
       label={t('parameters.scale')}
       value={String(upscalingLevel)}

invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEModelSelect.tsx

@@ -2,7 +2,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 
 import { SelectItem } from '@mantine/core';
 import { forEach } from 'lodash-es';
@@ -92,7 +92,7 @@ const ParamVAEModelSelect = () => {
   );
 
   return (
-    <IAIMantineSelect
+    <IAIMantineSearchableSelect
       itemComponent={IAIMantineSelectItemWithTooltip}
       tooltip={selectedVaeModel?.description}
       label={t('modelManager.vae')}

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx

@@ -10,6 +10,7 @@ import { makeToast } from 'app/components/Toaster';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIInput from 'common/components/IAIInput';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
 import IAISlider from 'common/components/IAISlider';
@@ -176,7 +177,7 @@ export default function MergeModelsPanel() {
           value={baseModel}
           onChange={handleBaseModelChange}
         />
-        <IAIMantineSelect
+        <IAIMantineSearchableSelect
           label={t('modelManager.modelOne')}
           w="100%"
           value={modelOne}
@@ -184,7 +185,7 @@ export default function MergeModelsPanel() {
           data={modelOneList}
           onChange={(v) => setModelOne(v)}
         />
-        <IAIMantineSelect
+        <IAIMantineSearchableSelect
           label={t('modelManager.modelTwo')}
           w="100%"
           placeholder={t('modelManager.selectModel')}
@@ -192,7 +193,7 @@ export default function MergeModelsPanel() {
           data={modelTwoList}
           onChange={(v) => setModelTwo(v)}
         />
-        <IAIMantineSelect
+        <IAIMantineSearchableSelect
           label={t('modelManager.modelThree')}
           data={modelThreeList}
           w="100%"

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx

@@ -1,7 +1,8 @@
 import { DeleteIcon } from '@chakra-ui/icons';
-import { Button, Flex, Text, Tooltip } from '@chakra-ui/react';
+import { Flex, Text, Tooltip } from '@chakra-ui/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIAlertDialog from 'common/components/IAIAlertDialog';
+import IAIButton from 'common/components/IAIButton';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { useCallback } from 'react';
@@ -36,7 +37,8 @@ export default function ModelListItem(props: ModelListItemProps) {
   return (
     <Flex sx={{ gap: 2, alignItems: 'center', w: 'full' }}>
       <Flex
-        as={Button}
+        as={IAIButton}
+        isChecked={isSelected}
         sx={{
           justifyContent: 'start',
           p: 2,

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx

@@ -9,17 +9,15 @@ import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 
-import { memo, useCallback, useLayoutEffect } from 'react';
-import UnifiedCanvasToolbarBeta from './UnifiedCanvasBeta/UnifiedCanvasToolbarBeta';
-import UnifiedCanvasToolSettingsBeta from './UnifiedCanvasBeta/UnifiedCanvasToolSettingsBeta';
-import { ImageDTO } from 'services/api/types';
-import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
-import IAIDropOverlay from 'common/components/IAIDropOverlay';
 import {
   CanvasInitialImageDropData,
   isValidDrop,
   useDroppable,
 } from 'app/components/ImageDnd/typesafeDnd';
+import IAIDropOverlay from 'common/components/IAIDropOverlay';
+import { memo, useLayoutEffect } from 'react';
+import UnifiedCanvasToolSettingsBeta from './UnifiedCanvasBeta/UnifiedCanvasToolSettingsBeta';
+import UnifiedCanvasToolbarBeta from './UnifiedCanvasBeta/UnifiedCanvasToolbarBeta';
 
 const selector = createSelector(
   [canvasSelector, uiSelector],

invokeai/frontend/web/src/mantine-theme/hooks/useMantineMultiSelectStyles.ts

@@ -0,0 +1,140 @@
+import { useColorMode, useToken } from '@chakra-ui/react';
+import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
+import { useCallback } from 'react';
+import { mode } from 'theme/util/mode';
+
+export const useMantineMultiSelectStyles = () => {
+  const {
+    base50,
+    base100,
+    base200,
+    base300,
+    base400,
+    base500,
+    base600,
+    base700,
+    base800,
+    base900,
+    accent200,
+    accent300,
+    accent400,
+    accent500,
+    accent600,
+  } = useChakraThemeTokens();
+
+  const { colorMode } = useColorMode();
+  const [boxShadow] = useToken('shadows', ['dark-lg']);
+
+  const styles = useCallback(
+    () => ({
+      label: {
+        color: mode(base700, base300)(colorMode),
+      },
+      separatorLabel: {
+        color: mode(base500, base500)(colorMode),
+        '::after': { borderTopColor: mode(base300, base700)(colorMode) },
+      },
+      searchInput: {
+        ':placeholder': {
+          color: mode(base300, base700)(colorMode),
+        },
+      },
+      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(base200, base800)(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: 24,
+        padding: 20,
+        button: {
+          color: mode(base900, base100)(colorMode),
+        },
+      },
+    }),
+    [
+      accent200,
+      accent300,
+      accent400,
+      accent500,
+      accent600,
+      base100,
+      base200,
+      base300,
+      base400,
+      base50,
+      base500,
+      base600,
+      base700,
+      base800,
+      base900,
+      boxShadow,
+      colorMode,
+    ]
+  );
+
+  return styles;
+};

invokeai/frontend/web/src/mantine-theme/hooks/useMantineSelectStyles.ts

@@ -0,0 +1,134 @@
+import { useColorMode, useToken } from '@chakra-ui/react';
+import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
+import { useCallback } from 'react';
+import { mode } from 'theme/util/mode';
+
+export const useMantineSelectStyles = () => {
+  const {
+    base50,
+    base100,
+    base200,
+    base300,
+    base400,
+    base500,
+    base600,
+    base700,
+    base800,
+    base900,
+    accent200,
+    accent300,
+    accent400,
+    accent500,
+    accent600,
+  } = useChakraThemeTokens();
+
+  const { colorMode } = useColorMode();
+  const [boxShadow] = useToken('shadows', ['dark-lg']);
+
+  const styles = useCallback(
+    () => ({
+      label: {
+        color: mode(base700, base300)(colorMode),
+      },
+      separatorLabel: {
+        color: mode(base500, base500)(colorMode),
+        '::after': { borderTopColor: mode(base300, base700)(colorMode) },
+      },
+      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 styles;
+};

invokeai/frontend/web/src/mantine-theme/theme.ts

@@ -1,6 +1,33 @@
+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 mantineTheme: MantineThemeOverride = {
+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',
       fontFamily: `'Inter Variable', sans-serif`,
       components: {
@@ -19,5 +46,110 @@ export const mantineTheme: MantineThemeOverride = {
             },
           },
         },
+        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;
 };