feat(ui): ux improvements & redesign

This is a squash merge of a bajillion messy small commits created while iterating on the UI component library and redesign.

invokeai/frontend/web/src/common/components/InvText/InvText.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import type { InvTextProps } from './types';
+import { InvText } from './wrapper';
+
+const meta: Meta<typeof InvText> = {
+  title: 'Primitives/InvText',
+  tags: ['autodocs'],
+  component: InvText,
+};
+
+export default meta;
+type Story = StoryObj<typeof InvText>;
+
+const Component = (props: InvTextProps) => {
+  return <InvText {...props}>Banana sushi is delectable!</InvText>;
+};
+
+export const Default: Story = {
+  render: Component,
+};

invokeai/frontend/web/src/common/components/InvText/theme.ts

@@ -0,0 +1,21 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
+
+const baseStyle = defineStyle(() => ({
+  fontSize: 'sm',
+}));
+
+const error = defineStyle(() => ({
+  color: 'error.400',
+}));
+
+const subtext = defineStyle(() => ({
+  color: 'base.400',
+}));
+
+export const textTheme = defineStyleConfig({
+  baseStyle,
+  variants: {
+    subtext,
+    error,
+  },
+});

invokeai/frontend/web/src/common/components/InvText/types.ts

@@ -0,0 +1,3 @@
+import type { TextProps as ChakraTextProps } from '@chakra-ui/react';
+
+export type InvTextProps = ChakraTextProps;

invokeai/frontend/web/src/common/components/InvText/wrapper.ts

@@ -0,0 +1 @@
+export { Text as InvText } from '@chakra-ui/react';