From 1a710a4c1249f636a5dfb1e490a6f7eae166728f Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 6 Jan 2024 00:08:36 +1100 Subject: [PATCH] fix(ui): restore prev colors for workflow editor Brand colors are now prefixed with "invoke". --- .../InvAccordion/InvAccordionButton.tsx | 2 +- .../components/InvButton/InvButton.stories.tsx | 2 +- .../common/components/InvButton/InvButton.tsx | 4 ++-- .../src/common/components/InvHeading/theme.ts | 6 +++--- .../components/InvIconButton/InvIconButton.tsx | 4 ++-- .../components/IAICanvasStagingAreaToolbar.tsx | 10 +++++----- .../features/embedding/EmbeddingPopover.tsx | 2 +- .../gallery/components/Boards/AutoAddIcon.tsx | 2 +- .../Boards/BoardsList/GalleryBoard.tsx | 2 +- .../Boards/BoardsList/NoBoardBoard.tsx | 2 +- .../AddModelsPanel/FoundModelsList.tsx | 6 +++--- .../flow/AddNodePopover/AddNodePopover.tsx | 2 +- .../flow/panels/MinimapPanel/MinimapPanel.tsx | 2 +- .../queue/components/PruneQueueButton.tsx | 2 +- .../features/system/components/ProgressBar.tsx | 2 +- .../components/WorkflowLibraryListItem.tsx | 2 +- invokeai/frontend/web/src/theme/colors.ts | 18 +++++++++--------- invokeai/frontend/web/src/theme/types.ts | 12 ++++++------ 18 files changed, 41 insertions(+), 41 deletions(-) diff --git a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx b/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx index 4cb45a99f6..667a6de460 100644 --- a/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx +++ b/invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx @@ -21,7 +21,7 @@ export const InvAccordionButton = (props: InvAccordionButtonProps) => { {children} {badges?.map((b, i) => ( - + {b} ))} diff --git a/invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx b/invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx index 80a31b5b25..c317c3b84d 100644 --- a/invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx +++ b/invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx @@ -28,7 +28,7 @@ const meta: Meta = { export default meta; type Story = StoryObj; -const colorSchemes = ['base', 'invokeYellow', 'red', 'green', 'blue'] as const; +const colorSchemes = ['base', 'invokeYellow', 'invokeRed', 'invokeGreen', 'invokeBlue'] as const; const variants = ['solid', 'outline', 'ghost', 'link'] as const; const sizes = ['xs', 'sm', 'md', 'lg'] as const; diff --git a/invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx b/invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx index ffd2bbca86..945e7258cf 100644 --- a/invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx +++ b/invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx @@ -12,7 +12,7 @@ export const InvButton = memo( ); diff --git a/invokeai/frontend/web/src/common/components/InvHeading/theme.ts b/invokeai/frontend/web/src/common/components/InvHeading/theme.ts index abbed4b39f..73c0eecdc5 100644 --- a/invokeai/frontend/web/src/common/components/InvHeading/theme.ts +++ b/invokeai/frontend/web/src/common/components/InvHeading/theme.ts @@ -1,11 +1,11 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; -const blue = defineStyle(() => ({ - color: 'blue.300', +const invokeBlue = defineStyle(() => ({ + color: 'invokeBlue.300', })); export const headingTheme = defineStyleConfig({ variants: { - blue, + invokeBlue, }, }); diff --git a/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx b/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx index 747658ee43..6bddb79e2b 100644 --- a/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx +++ b/invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx @@ -11,7 +11,7 @@ export const InvIconButton = memo( @@ -21,7 +21,7 @@ export const InvIconButton = memo( return ( ); diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx index ffc2eda332..7823e068ea 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx @@ -142,7 +142,7 @@ const IAICanvasStagingAreaToolbar = () => { aria-label={`${t('unifiedCanvas.previous')} (Left)`} icon={} onClick={handlePrevImage} - colorScheme="blue" + colorScheme="invokeBlue" isDisabled={!shouldShowStagingImage} /> { aria-label={`${t('unifiedCanvas.next')} (Right)`} icon={} onClick={handleNextImage} - colorScheme="blue" + colorScheme="invokeBlue" isDisabled={!shouldShowStagingImage} /> @@ -166,7 +166,7 @@ const IAICanvasStagingAreaToolbar = () => { aria-label={`${t('unifiedCanvas.accept')} (Enter)`} icon={} onClick={handleAccept} - colorScheme="blue" + colorScheme="invokeBlue" /> { data-alert={!shouldShowStagingImage} icon={shouldShowStagingImage ? : } onClick={handleToggleShouldShowStagingImage} - colorScheme="blue" + colorScheme="invokeBlue" /> { isDisabled={!imageDTO || !imageDTO.is_intermediate} icon={} onClick={handleSaveToGallery} - colorScheme="blue" + colorScheme="invokeBlue" /> { p={0} insetBlockStart={-1} shadow="dark-lg" - borderColor="blue.300" + borderColor="invokeBlue.300" borderWidth="2px" borderStyle="solid" > diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx index 459f0e987e..72da8b3cba 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx @@ -6,7 +6,7 @@ const AutoAddIcon = () => { const { t } = useTranslation(); return ( - + {t('common.auto')} diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx index 3feb43e9e1..610f92de0d 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx @@ -218,7 +218,7 @@ const GalleryBoard = ({ w="full" maxW="full" borderBottomRadius="base" - bg={isSelected ? 'blue.500' : 'base.600'} + bg={isSelected ? 'invokeBlue.500' : 'base.600'} color={isSelected ? 'base.50' : 'base.100'} lineHeight="short" fontSize="xs" diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx index 00a7f66832..e0a84aa955 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx @@ -124,7 +124,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => { w="full" maxW="full" borderBottomRadius="base" - bg={isSelected ? 'blue.500' : 'base.600'} + bg={isSelected ? 'invokeBlue.500' : 'base.600'} color={isSelected ? 'base.50' : 'base.100'} lineHeight="short" fontSize="xs" diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx index 0a1acea8b8..323c2b8039 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx @@ -143,8 +143,8 @@ const FoundModelsList = () => { fontWeight="semibold" p={2} borderRadius={4} - color="blue.100" - bg="blue.600" + color="invokeBlue.100" + bg="invokeBlue.600" > {t('common.installed')} @@ -184,7 +184,7 @@ const FoundModelsList = () => { {t('modelManager.modelsFound')}: {foundModels.length} - + {t('common.notInstalled')}: {filteredModels.length} diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx index fe6a2ed709..b798fec9b4 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx @@ -218,7 +218,7 @@ const AddNodePopover = () => { p={0} top={-1} shadow="dark-lg" - borderColor="blue.400" + borderColor="invokeBlue.400" borderWidth="2px" borderStyle="solid" > diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx index c2963dd530..344d36570b 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx @@ -28,7 +28,7 @@ const MinimapPanel = () => { zoomable nodeBorderRadius={15} sx={minimapStyles} - nodeColor="var(--invokeai-colors-blue-600)" + nodeColor="var(--invokeai-colors-base-600)" maskColor="var(--invokeai-colors-blackAlpha-600)" /> )} diff --git a/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx index bef9bb9213..fc6670ff46 100644 --- a/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx @@ -22,7 +22,7 @@ const PruneQueueButton = ({ asIconButton }: Props) => { tooltip={t('queue.pruneTooltip', { item_count: finishedCount })} icon={} onClick={pruneQueue} - colorScheme="blue" + colorScheme="invokeBlue" /> ); }; diff --git a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx index 0244534d78..165bf0496b 100644 --- a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx +++ b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx @@ -27,7 +27,7 @@ const ProgressBar = () => { } h={2} w="full" - colorScheme="blue" + colorScheme="invokeBlue" /> ); }; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx index 372882ffa0..8bc9777613 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx @@ -40,7 +40,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => { - + {workflowDTO.name || t('workflows.unnamedWorkflow')} diff --git a/invokeai/frontend/web/src/theme/colors.ts b/invokeai/frontend/web/src/theme/colors.ts index 7330e01500..e35af79a61 100644 --- a/invokeai/frontend/web/src/theme/colors.ts +++ b/invokeai/frontend/web/src/theme/colors.ts @@ -9,9 +9,9 @@ const WARNING = { H: 28, S: 42 }; const OK = { H: 113, S: 42 }; const ERROR = { H: 0, S: 42 }; const INVOKE_YELLOW = { H: 66, S: 92 }; -const BLUE = { H: 200, S: 76 }; -const GREEN = { H: 110, S: 69 }; -const RED = { H: 16, S: 92 }; +const INVOKE_BLUE = { H: 200, S: 76 }; +const INVOKE_GREEN = { H: 110, S: 69 }; +const INVOKE_RED = { H: 16, S: 92 }; export const getArbitraryBaseColor = (lightness: number) => `hsl(${BASE.H} ${BASE.S}% ${lightness}%)`; @@ -35,12 +35,12 @@ export const InvokeAIColors: InvokeAIThemeColors = { INVOKE_YELLOW.S, true ), - blue: generateColorPalette(BLUE.H, BLUE.S), - blueAlpha: generateColorPalette(BLUE.H, BLUE.S, true), - green: generateColorPalette(GREEN.H, GREEN.S), - greenAlpha: generateColorPalette(GREEN.H, GREEN.S, true), - red: generateColorPalette(RED.H, RED.S), - redAlpha: generateColorPalette(RED.H, RED.S, true), + invokeBlue: generateColorPalette(INVOKE_BLUE.H, INVOKE_BLUE.S), + invokeBlueAlpha: generateColorPalette(INVOKE_BLUE.H, INVOKE_BLUE.S, true), + invokeGreen: generateColorPalette(INVOKE_GREEN.H, INVOKE_GREEN.S), + invokeGreenAlpha: generateColorPalette(INVOKE_GREEN.H, INVOKE_GREEN.S, true), + invokeRed: generateColorPalette(INVOKE_RED.H, INVOKE_RED.S), + invokeRedAlpha: generateColorPalette(INVOKE_RED.H, INVOKE_RED.S, true), }; export const layerStyleBody = { diff --git a/invokeai/frontend/web/src/theme/types.ts b/invokeai/frontend/web/src/theme/types.ts index 04c2f6b5da..87527812df 100644 --- a/invokeai/frontend/web/src/theme/types.ts +++ b/invokeai/frontend/web/src/theme/types.ts @@ -13,12 +13,12 @@ export type InvokeAIThemeColors = { errorAlpha: Partial; invokeYellow: Partial; invokeYellowAlpha: Partial; - red: Partial; - redAlpha: Partial; - green: Partial; - greenAlpha: Partial; - blue: Partial; - blueAlpha: Partial; + invokeRed: Partial; + invokeRedAlpha: Partial; + invokeGreen: Partial; + invokeGreenAlpha: Partial; + invokeBlue: Partial; + invokeBlueAlpha: Partial; }; export type InvokeAIPaletteSteps = {