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

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

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

@@ -0,0 +1,35 @@
+import { progressAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/styled-system';
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const invokeAIFilledTrack = defineStyle((_props) => ({
+  bg: 'invokeYellow.500',
+}));
+
+const invokeAITrack = defineStyle((_props) => {
+  return {
+    bg: 'base.800',
+  };
+});
+
+const invokeAI = definePartsStyle((props) => ({
+  filledTrack: invokeAIFilledTrack(props),
+  track: invokeAITrack(props),
+}));
+
+export const progressTheme = defineMultiStyleConfig({
+  baseStyle: {
+    track: { borderRadius: '2px' },
+  },
+  variants: {
+    invokeAI,
+  },
+  defaultProps: {
+    variant: 'invokeAI',
+  },
+});

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

@@ -0,0 +1 @@
+export type { ProgressProps as InvProgressProps } from '@chakra-ui/react';

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

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