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/InvCheckbox/InvCheckbox.stories.tsx

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

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

@@ -0,0 +1,69 @@
+import { checkboxAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/styled-system';
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const invokeAIControl = defineStyle((props) => {
+  const { colorScheme: c } = props;
+
+  return {
+    bg: 'base.700',
+    borderColor: 'base.600',
+    color: 'base.100',
+
+    _checked: {
+      bg: `${c}.500`,
+      borderColor: `${c}.500`,
+      color: `${c}.100`,
+
+      _hover: {
+        bg: `${c}.500`,
+        borderColor: `${c}.500`,
+      },
+
+      _disabled: {
+        borderColor: 'transparent',
+        bg: 'whiteAlpha.300',
+        color: 'whiteAlpha.500',
+      },
+    },
+
+    _indeterminate: {
+      bg: `${c}.600`,
+      borderColor: `${c}.600`,
+      color: `${c}.100`,
+    },
+
+    _disabled: {
+      bg: 'whiteAlpha.100',
+      borderColor: 'transparent',
+    },
+
+    _focusVisible: {
+      boxShadow: 'none',
+      outline: 'none',
+    },
+
+    _invalid: {
+      borderColor: 'error.300',
+    },
+  };
+});
+
+const invokeAI = definePartsStyle((props) => ({
+  control: invokeAIControl(props),
+}));
+
+export const checkboxTheme = defineMultiStyleConfig({
+  variants: {
+    invokeAI: invokeAI,
+  },
+  defaultProps: {
+    variant: 'invokeAI',
+    colorScheme: 'blue',
+  },
+});

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

@@ -0,0 +1,3 @@
+import type { CheckboxProps as ChakraCheckboxProps } from '@chakra-ui/react';
+
+export interface InvCheckboxProps extends ChakraCheckboxProps {}

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

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