feat(ui): tweak light mode colors, buttons pop (#3612)

the light mode button colors were way off, much improved

invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx

@@ -98,11 +98,12 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
               },
             },
             '&[data-selected]': {
-              color: mode(base900, base50)(colorMode),
+              backgroundColor: mode(accent400, accent600)(colorMode),
-              backgroundColor: mode(accent300, accent600)(colorMode),
+              color: mode(base50, base100)(colorMode),
               fontWeight: 600,
               '&:hover': {
-                backgroundColor: mode(accent400, accent500)(colorMode),
+                backgroundColor: mode(accent500, accent500)(colorMode),
+                color: mode('white', base50)(colorMode),
               },
             },
           },

invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx

@@ -101,11 +101,12 @@ const IAIMantineSelect = (props: IAISelectProps) => {
               },
             },
             '&[data-selected]': {
-              color: mode(base900, base50)(colorMode),
+              backgroundColor: mode(accent400, accent600)(colorMode),
-              backgroundColor: mode(accent300, accent600)(colorMode),
+              color: mode(base50, base100)(colorMode),
               fontWeight: 600,
               '&:hover': {
-                backgroundColor: mode(accent400, accent500)(colorMode),
+                backgroundColor: mode(accent500, accent500)(colorMode),
+                color: mode('white', base50)(colorMode),
               },
             },
           },

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

@@ -4,52 +4,114 @@ import { mode } from '@chakra-ui/theme-tools';
 const invokeAI = defineStyle((props) => {
   const { colorScheme: c } = props;
   // must specify `_disabled` colors if we override `_hover`, else hover on disabled has no styles
+
+  if (c === 'base') {
+    const _disabled = {
+      bg: mode('base.200', 'base.700')(props),
+      color: mode('base.500', 'base.150')(props),
+      svg: {
+        fill: mode('base.500', 'base.150')(props),
+      },
+      opacity: 1,
+    };
+
+    return {
+      bg: mode('base.200', 'base.600')(props),
+      color: mode('base.850', 'base.100')(props),
+      borderRadius: 'base',
+      textShadow: mode(
+        '0 0 0.3rem var(--invokeai-colors-base-50)',
+        '0 0 0.3rem var(--invokeai-colors-base-900)'
+      )(props),
+      svg: {
+        fill: mode('base.850', 'base.100')(props),
+        filter: mode(
+          'drop-shadow(0px 0px 0.3rem var(--invokeai-colors-base-100))',
+          'drop-shadow(0px 0px 0.3rem var(--invokeai-colors-base-800))'
+        )(props),
+      },
+      _disabled,
+      _hover: {
+        bg: mode('base.300', 'base.500')(props),
+        color: mode('base.900', 'base.50')(props),
+        svg: {
+          fill: mode('base.900', 'base.50')(props),
+        },
+        _disabled,
+      },
+      _checked: {
+        bg: mode('accent.400', 'accent.600')(props),
+        color: mode('base.50', 'base.100')(props),
+        svg: {
+          fill: mode(`${c}.50`, `${c}.100`)(props),
+          filter: mode(
+            `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
+            `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
+          )(props),
+        },
+        _disabled,
+        _hover: {
+          bg: mode('accent.500', 'accent.500')(props),
+          color: mode('white', 'base.50')(props),
+          svg: {
+            fill: mode('white', 'base.50')(props),
+          },
+          _disabled,
+        },
+      },
+    };
+  }
+
   const _disabled = {
-    bg: mode(`${c}.350`, `${c}.700`)(props),
+    bg: mode(`${c}.200`, `${c}.700`)(props),
-    color: mode(`${c}.750`, `${c}.150`)(props),
+    color: mode(`${c}.100`, `${c}.150`)(props),
     svg: {
-      fill: mode(`${c}.750`, `${c}.150`)(props),
+      fill: mode(`${c}.100`, `${c}.150`)(props),
     },
     opacity: 1,
-    filter: 'saturate(65%)',
+    filter: mode(undefined, 'saturate(65%)')(props),
   };
 
   return {
-    bg: mode(`${c}.200`, `${c}.600`)(props),
+    bg: mode(`${c}.400`, `${c}.600`)(props),
-    color: mode(`${c}.850`, `${c}.100`)(props),
+    color: mode(`base.50`, `base.100`)(props),
     borderRadius: 'base',
     textShadow: mode(
-      `0 0 0.3rem var(--invokeai-colors-${c}-50)`,
+      `0 0 0.3rem var(--invokeai-colors-${c}-600)`,
       `0 0 0.3rem var(--invokeai-colors-${c}-900)`
     )(props),
     svg: {
-      fill: mode(`${c}.850`, `${c}.100`)(props),
+      fill: mode(`base.50`, `base.100`)(props),
       filter: mode(
-        `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-100))`,
+        `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
         `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
       )(props),
     },
     _disabled,
     _hover: {
-      bg: mode(`${c}.300`, `${c}.500`)(props),
+      bg: mode(`${c}.500`, `${c}.500`)(props),
-      color: mode(`${c}.900`, `${c}.50`)(props),
+      color: mode('white', `base.50`)(props),
       svg: {
-        fill: mode(`${c}.900`, `${c}.50`)(props),
+        fill: mode('white', `base.50`)(props),
       },
       _disabled,
     },
     _checked: {
-      bg: mode('accent.200', 'accent.600')(props),
+      bg: mode('accent.400', 'accent.600')(props),
-      color: mode('accent.800', 'accent.100')(props),
+      color: mode('base.50', 'base.100')(props),
       svg: {
-        fill: mode('accent.800', 'accent.100')(props),
+        fill: mode(`base.50`, `base.100`)(props),
+        filter: mode(
+          `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
+          `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
+        )(props),
       },
       _disabled,
       _hover: {
-        bg: mode('accent.300', 'accent.500')(props),
+        bg: mode('accent.500', 'accent.500')(props),
-        color: mode('accent.900', 'accent.50')(props),
+        color: mode('white', 'base.50')(props),
         svg: {
-          fill: mode('accent.900', 'accent.50')(props),
+          fill: mode('white', 'base.50')(props),
         },
         _disabled,
       },

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

@@ -37,20 +37,22 @@ const invokeAITablist = defineStyle((props) => {
         fill: mode('base.700', 'base.300')(props),
       },
       _selected: {
-        borderBottomColor: 'base.800',
+        bg: mode('accent.400', 'accent.600')(props),
-        bg: mode('accent.200', 'accent.600')(props),
+        color: mode('base.50', 'base.100')(props),
-        color: mode('accent.800', 'accent.100')(props),
-        _hover: {
-          bg: mode('accent.300', 'accent.500')(props),
-          color: mode('accent.900', 'accent.50')(props),
-        },
         svg: {
-          fill: mode('base.900', 'base.50')(props),
+          fill: mode(`base.50`, `base.100`)(props),
           filter: mode(
-            `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-accent-100))`,
+            `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
-            `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-accent-900))`
+            `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
           )(props),
         },
+        _hover: {
+          bg: mode('accent.500', 'accent.500')(props),
+          color: mode('white', 'base.50')(props),
+          svg: {
+            fill: mode('white', 'base.50')(props),
+          },
+        },
       },
       _hover: {
         bg: mode('base.100', 'base.800')(props),
@@ -81,5 +83,6 @@ export const tabsTheme = defineMultiStyleConfig({
   },
   defaultProps: {
     variant: 'invokeAI',
+    colorScheme: 'accent',
   },
 });