feat: Create basic IAIMantineTextInput component for form usage

2024-08-30 20:32:17 +00:00 · 2023-07-12 20:10:33 +12:00 · 2023-07-12 20:10:33 +12:00 · 310e401b03
commit 310e401b03
parent 3568e28b1c
1 changed files with 31 additions and 0 deletions
--- a/invokeai/frontend/web/src/common/components/IAIMantineInput.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineInput.tsx
@ -0,0 +1,31 @@
+import { useColorMode } from '@chakra-ui/react';
+import { TextInput, TextInputProps } from '@mantine/core';
+import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
+import { mode } from 'theme/util/mode';
+
+type IAIMantineTextInputProps = TextInputProps;
+
+export default function IAIMantineTextInput(props: IAIMantineTextInputProps) {
+  const { ...rest } = props;
+  const { base50, base100, base200, base800, base900, accent500, accent300 } =
+    useChakraThemeTokens();
+  const { colorMode } = useColorMode();
+
+  return (
+    <TextInput
+      styles={() => ({
+        input: {
+          color: mode(base900, base100)(colorMode),
+          backgroundColor: mode(base50, base900)(colorMode),
+          borderColor: mode(base200, base800)(colorMode),
+          borderWidth: 2,
+          outline: 'none',
+          ':focus': {
+            borderColor: mode(accent300, accent500)(colorMode),
+          },
+        },
+      })}
+      {...rest}
+    />
+  );
+}