feat: node editor

squashed rebase on main after backendd refactor

invokeai/frontend/web/src/theme/components/checkbox.ts

@@ -13,12 +13,12 @@ const invokeAIControl = defineStyle((props) => {
 
   return {
     bg: mode('base.200', 'base.700')(props),
-    borderColor: mode('base.200', 'base.700')(props),
+    borderColor: mode('base.300', 'base.600')(props),
     color: mode('base.900', 'base.100')(props),
 
     _checked: {
-      bg: mode(`${c}.300`, `${c}.600`)(props),
-      borderColor: mode(`${c}.300`, `${c}.600`)(props),
+      bg: mode(`${c}.300`, `${c}.500`)(props),
+      borderColor: mode(`${c}.300`, `${c}.500`)(props),
       color: mode(`${c}.900`, `${c}.100`)(props),
 
       _hover: {
@@ -45,7 +45,8 @@ const invokeAIControl = defineStyle((props) => {
     },
 
     _focusVisible: {
-      boxShadow: 'outline',
+      boxShadow: 'none',
+      outline: 'none',
     },
 
     _invalid: {

invokeai/frontend/web/src/theme/components/formLabel.ts

@@ -14,6 +14,9 @@ const invokeAI = defineStyle((props) => {
       opacity: 0.4,
     },
     color: mode('base.700', 'base.300')(props),
+    _invalid: {
+      color: mode('error.500', 'error.300')(props),
+    },
   };
 });
 

invokeai/frontend/web/src/theme/components/tabs.ts

@@ -8,16 +8,16 @@ import { mode } from '@chakra-ui/theme-tools';
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const invokeAIRoot = defineStyle((_props) => {
+const appTabsRoot = defineStyle((_props) => {
   return {
     display: 'flex',
     columnGap: 4,
   };
 });
 
-const invokeAITab = defineStyle((_props) => ({}));
+const appTabsTab = defineStyle((_props) => ({}));
 
-const invokeAITablist = defineStyle((props) => {
+const appTabsTablist = defineStyle((props) => {
   const { colorScheme: c } = props;
 
   return {
@@ -65,24 +65,49 @@ const invokeAITablist = defineStyle((props) => {
   };
 });
 
-const invokeAITabpanel = defineStyle((_props) => ({
+const appTabsTabpanel = defineStyle((_props) => ({
   padding: 0,
   height: '100%',
 }));
 
-const invokeAI = definePartsStyle((props) => ({
-  root: invokeAIRoot(props),
-  tab: invokeAITab(props),
-  tablist: invokeAITablist(props),
-  tabpanel: invokeAITabpanel(props),
+const appTabs = definePartsStyle((props) => ({
+  root: appTabsRoot(props),
+  tab: appTabsTab(props),
+  tablist: appTabsTablist(props),
+  tabpanel: appTabsTabpanel(props),
+}));
+
+const line = definePartsStyle((props) => ({
+  tab: {
+    borderTopRadius: 'base',
+    px: 4,
+    py: 1,
+    fontSize: 'sm',
+    color: mode('base.600', 'base.400')(props),
+    fontWeight: 500,
+    _selected: {
+      color: mode('accent.600', 'accent.400')(props),
+    },
+  },
+  tabpanel: {
+    p: 0,
+    pt: 4,
+    w: 'full',
+    h: 'full',
+  },
+  tabpanels: {
+    w: 'full',
+    h: 'full',
+  },
 }));
 
 export const tabsTheme = defineMultiStyleConfig({
   variants: {
-    invokeAI,
+    line,
+    appTabs,
   },
   defaultProps: {
-    variant: 'invokeAI',
+    variant: 'appTabs',
     colorScheme: 'accent',
   },
 });

invokeai/frontend/web/src/theme/components/textarea.ts

@@ -40,6 +40,7 @@ const invokeAI = defineStyle((props) => ({
       },
     },
   },
+  p: 2,
 }));
 
 export const textareaTheme = defineStyleConfig({

invokeai/frontend/web/src/theme/custom/reactflow.ts

@@ -0,0 +1,21 @@
+import { SystemStyleObject } from '@chakra-ui/styled-system';
+
+const selectionStyles: SystemStyleObject = {
+  backgroundColor: 'accentAlpha.150 !important',
+  borderColor: 'accentAlpha.700 !important',
+  borderRadius: 'base !important',
+  borderStyle: 'dashed !important',
+  _dark: {
+    borderColor: 'accent.400 !important',
+  },
+};
+
+export const reactflowStyles: SystemStyleObject = {
+  '.react-flow__nodesselection-rect': {
+    ...selectionStyles,
+    padding: '1rem !important',
+    boxSizing: 'content-box !important',
+    transform: 'translate(-1rem, -1rem) !important',
+  },
+  '.react-flow__selection': selectionStyles,
+};

invokeai/frontend/web/src/theme/theme.ts

@@ -21,6 +21,7 @@ import { tabsTheme } from './components/tabs';
 import { textTheme } from './components/text';
 import { textareaTheme } from './components/textarea';
 import { tooltipTheme } from './components/tooltip';
+import { reactflowStyles } from './custom/reactflow';
 
 export const theme: ThemeOverride = {
   config: {
@@ -44,11 +45,27 @@ export const theme: ThemeOverride = {
       color: 'base.900',
       '.chakra-ui-dark &': { bg: 'base.800', color: 'base.100' },
     },
+    nodeBody: {
+      bg: 'base.100',
+      color: 'base.900',
+      '.chakra-ui-dark &': { bg: 'base.800', color: 'base.100' },
+    },
+    nodeHeader: {
+      bg: 'base.200',
+      color: 'base.900',
+      '.chakra-ui-dark &': { bg: 'base.700', color: 'base.100' },
+    },
+    nodeFooter: {
+      bg: 'base.200',
+      color: 'base.900',
+      '.chakra-ui-dark &': { bg: 'base.700', color: 'base.100' },
+    },
   },
   styles: {
     global: () => ({
       layerStyle: 'body',
       '*': { ...no_scrollbar },
+      ...reactflowStyles,
     }),
   },
   direction: 'ltr',
@@ -85,7 +102,10 @@ export const theme: ThemeOverride = {
         '0px 0px 0px 1px var(--invokeai-colors-base-150), 0px 0px 0px 3px var(--invokeai-colors-accent-500)',
       dark: '0px 0px 0px 1px var(--invokeai-colors-base-900), 0px 0px 0px 3px var(--invokeai-colors-accent-400)',
     },
-    nodeSelectedOutline: `0 0 0 2px var(--invokeai-colors-accent-450)`,
+    nodeSelectedOutline: {
+      light: `0 0 0 2px var(--invokeai-colors-accent-400)`,
+      dark: `0 0 0 2px var(--invokeai-colors-accent-500)`,
+    },
   },
   colors: InvokeAIColors,
   components: {