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.
2024-08-30 20:32:17 +00:00 · 2023-07-14 23:00:38 +10:00 · 2023-07-14 23:00:38 +10:00 · 79d65125c2
commit 79d65125c2
parent d4dfd84525
27 changed files with 580 additions and 333 deletions
--- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
+++ b/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>
--- a/invokeai/frontend/web/src/common/components/IAIMantineInput.tsx
+++ b/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 } =
-    useChakraThemeTokens();
+  const {
+    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}
    />
--- a/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
+++ b/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={() => ({
-          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),
-            },
-          },
-        })}
+        styles={styles}
        {...rest}
      />
    </Tooltip>
--- a/invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx
+++ b/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);
--- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
+++ b/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 { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
-import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
-import { KeyboardEvent, RefObject, memo, useCallback, useState } from 'react';
-import { mode } from 'theme/util/mode';
+import { useMantineSelectStyles } from 'mantine-theme/hooks/useMantineSelectStyles';
+import { RefObject, memo } from 'react';

 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 dispatch = useAppDispatch();
-  const {
-    base50,
-    base100,
-    base200,
-    base300,
-    base400,
-    base500,
-    base600,
-    base700,
-    base800,
-    base900,
-    accent200,
-    accent300,
-    accent400,
-    accent500,
-    accent600,
-  } = useChakraThemeTokens();
+  const { tooltip, inputRef, ...rest } = props;

-  const { colorMode } = useColorMode();
-  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']);
+  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={() => ({
-          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}
-      />
+      <Select ref={inputRef} styles={styles} {...rest} />
    </Tooltip>
  );
 };
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx
+++ b/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'}
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/UpdateImageBoardModal.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/nodes/components/fields/LoRAModelInputFieldComponent.tsx
+++ b/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 &&
--- a/invokeai/frontend/web/src/features/nodes/components/fields/ModelInputFieldComponent.tsx
+++ b/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]
--- a/invokeai/frontend/web/src/features/nodes/components/fields/VaeModelInputFieldComponent.tsx
+++ b/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={
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreType.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/MainModel/ParamMainModelSelect.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleScale.tsx
+++ b/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)}
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/VAEModel/ParamVAEModelSelect.tsx
+++ b/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')}
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx
+++ b/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%"
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
+++ b/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,
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx
+++ b/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],
--- a/invokeai/frontend/web/src/mantine-theme/hooks/useMantineMultiSelectStyles.ts
+++ b/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;
+};
--- a/invokeai/frontend/web/src/mantine-theme/hooks/useMantineSelectStyles.ts
+++ b/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;
+};
--- a/invokeai/frontend/web/src/mantine-theme/theme.ts
+++ b/invokeai/frontend/web/src/mantine-theme/theme.ts
@ -1,23 +1,155 @@
+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 = {
-  colorScheme: 'dark',
-  fontFamily: `'Inter Variable', sans-serif`,
-  components: {
-    ScrollArea: {
-      defaultProps: {
-        scrollbarSize: 10,
-      },
-      styles: {
-        scrollbar: {
-          '&:hover': {
-            backgroundColor: 'var(--invokeai-colors-baseAlpha-300)',
+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: {
+        ScrollArea: {
+          defaultProps: {
+            scrollbarSize: 10,
+          },
+          styles: {
+            scrollbar: {
+              '&:hover': {
+                backgroundColor: 'var(--invokeai-colors-baseAlpha-300)',
+              },
+            },
+            thumb: {
+              backgroundColor: 'var(--invokeai-colors-baseAlpha-300)',
+            },
          },
        },
-        thumb: {
-          backgroundColor: 'var(--invokeai-colors-baseAlpha-300)',
+        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;
 };