feat(ui): add color swatches to mask fill

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import RgbColorPicker from 'common/components/RgbColorPicker';
+import RgbColorPicker from 'common/components/ColorPicker/RgbColorPicker';
 import { rgbColorToString } from 'common/util/colorCodeTransformers';
 import { MaskFillStyle } from 'features/controlLayers/components/common/MaskFillStyle';
 import { entityFillColorChanged, entityFillStyleChanged } from 'features/controlLayers/store/canvasSlice';
@@ -65,7 +65,7 @@ export const EntityListSelectedEntityActionBarFill = memo(() => {
       <PopoverContent>
         <PopoverBody minH={64}>
           <Flex flexDir="column" gap={4}>
-            <RgbColorPicker color={fill.color} onChange={onChangeFillColor} withNumberInput />
+            <RgbColorPicker color={fill.color} onChange={onChangeFillColor} withNumberInput withSwatches />
             <MaskFillStyle style={fill.style} onChange={onChangeFillStyle} />
           </Flex>
         </PopoverBody>

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx

@@ -1,7 +1,16 @@
-import { Box, Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger, Tooltip } from '@invoke-ai/ui-library';
+import {
+  Box,
+  Flex,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Tooltip,
+} from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIColorPicker from 'common/components/IAIColorPicker';
+import RgbaColorPicker from 'common/components/ColorPicker/RgbaColorPicker';
 import { rgbaColorToString } from 'common/util/colorCodeTransformers';
 import { selectCanvasSettingsSlice, settingsColorChanged } from 'features/controlLayers/store/canvasSettingsSlice';
 import type { RgbaColor } from 'features/controlLayers/store/types';
@@ -12,20 +21,6 @@ import { useTranslation } from 'react-i18next';
 
 const selectColor = createSelector(selectCanvasSettingsSlice, (settings) => settings.color);
 
-const SWATCHES = [
-  { r: 0, g: 0, b: 0, a: 1 }, // black
-  { r: 255, g: 255, b: 255, a: 1 }, // white
-  { r: 255, g: 90, b: 94, a: 1 }, // red
-  { r: 255, g: 146, b: 75, a: 1 }, // orange
-  { r: 255, g: 202, b: 59, a: 1 }, // yellow
-  { r: 197, g: 202, b: 48, a: 1 }, // lime
-  { r: 138, g: 201, b: 38, a: 1 }, // green
-  { r: 83, g: 165, b: 117, a: 1 }, // teal
-  { r: 23, g: 130, b: 196, a: 1 }, // blue
-  { r: 66, g: 103, b: 172, a: 1 }, // indigo
-  { r: 107, g: 76, b: 147, a: 1 }, // purple
-];
-
 export const ToolColorPicker = memo(() => {
   const { t } = useTranslation();
   const fill = useAppSelector(selectColor);
@@ -65,15 +60,9 @@ export const ToolColorPicker = memo(() => {
         </Flex>
       </PopoverTrigger>
       <PopoverContent>
+        <PopoverArrow />
         <PopoverBody minH={64}>
-          <Flex flexDir="column" gap={4}>
-            <IAIColorPicker color={fill} onChange={onChange} withNumberInput />
-            <Flex gap={2} justifyContent="space-between">
-              {SWATCHES.map((color, i) => (
-                <ColorSwatch key={i} color={color} />
-              ))}
-            </Flex>
-          </Flex>
+          <RgbaColorPicker color={fill} onChange={onChange} withNumberInput withSwatches />
         </PopoverBody>
       </PopoverContent>
     </Popover>
@@ -81,22 +70,3 @@ export const ToolColorPicker = memo(() => {
 });
 
 ToolColorPicker.displayName = 'ToolFillColorPicker';
-
-const ColorSwatch = ({ color }: { color: RgbaColor }) => {
-  const dispatch = useAppDispatch();
-  const onClick = useCallback(() => {
-    dispatch(settingsColorChanged(color));
-  }, [color, dispatch]);
-  return (
-    <Box
-      role="button"
-      onClick={onClick}
-      h={8}
-      w={8}
-      borderColor="base.300"
-      borderWidth={1}
-      bg={rgbaColorToString(color)}
-      borderRadius="base"
-    />
-  );
-};

invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillColorOptions.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIColorPicker from 'common/components/IAIColorPicker';
+import RgbaColorPicker from 'common/components/ColorPicker/RgbaColorPicker';
 import {
   selectInfillColorValue,
   selectInfillMethod,
@@ -30,7 +30,7 @@ const ParamInfillColorOptions = () => {
       <FormControl isDisabled={infillMethod !== 'color'}>
         <FormLabel>{t('parameters.infillColorValue')}</FormLabel>
         <Box w="full" pt={2} pb={2}>
-          <IAIColorPicker color={infillColor} onChange={handleInfillColor} />
+          <RgbaColorPicker color={infillColor} onChange={handleInfillColor} />
         </Box>
       </FormControl>
     </Flex>