feat(ui): make badges a bit paler

too stabby in the eye region

invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx

@@ -21,13 +21,7 @@ export const InvAccordionButton = (props: InvAccordionButtonProps) => {
       {children}
       <Spacer />
       {badges?.map((b, i) => (
-        <InvBadge
+        <InvBadge key={`${b}.${i}`} colorScheme="blue">
-          key={`${b}.${i}`}
-          variant="solid"
-          background="blue.400"
-          fontSize={10}
-          fontWeight={800}
-        >
           {b}
         </InvBadge>
       ))}

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

@@ -1,13 +1,13 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
 
 const baseStyle = defineStyle((props) => ({
-  fontSize: '9px',
+  fontSize: 10,
   px: 2,
   py: 1,
   minW: 4,
   lineHeight: 1,
   borderRadius: 'sm',
-  bg: `${props.colorScheme}.300`,
+  bg: `${props.colorScheme}.200`,
   color: 'base.900',
   fontWeight: 'bold',
   letterSpacing: 0.5,
@@ -20,7 +20,6 @@ const baseStyle = defineStyle((props) => ({
 export const badgeTheme = defineStyleConfig({
   baseStyle,
   defaultProps: {
-    variant: 'solid',
     colorScheme: 'base',
   },
 });

invokeai/frontend/web/src/common/components/InvTabs/InvTab.tsx

@@ -11,11 +11,7 @@ export const InvTab = memo(
       <ChakraTab ref={ref} {...rest}>
         {children}
         <Spacer />
-        {badges?.map((b, i) => (
+        {badges?.map((b, i) => <InvBadge key={`${b}.${i}`} colorScheme='invokeYellow'>{b}</InvBadge>)}
-          <InvBadge key={`${b}.${i}`} colorScheme="blue">
-            {b}
-          </InvBadge>
-        ))}
       </ChakraTab>
     );
   })