Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): restore prev colors for workflow editor

Browse Source 
Brand colors are now prefixed with "invoke".
This commit is contained in:
psychedelicious 2024-01-06 00:08:36 +11:00 committed by Kent Keirsey
parent d8d266d3be
commit 1a710a4c12
18 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx
View File

@ -21,7 +21,7 @@ export const InvAccordionButton = (props: InvAccordionButtonProps) => {
{children} {children}
<Spacer /> <Spacer />
{badges?.map((b, i) => ( {badges?.map((b, i) => (
<InvBadge key={`${b}.${i}`} colorScheme="blue"> <InvBadge key={`${b}.${i}`} colorScheme="invokeBlue">
{b} {b}
</InvBadge> </InvBadge>
))} ))}

2
invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx
View File

@ -28,7 +28,7 @@ const meta: Meta<typeof InvButton> = {
export default meta; export default meta;
type Story = StoryObj<typeof InvButton>; type Story = StoryObj<typeof InvButton>;
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 variants = ['solid', 'outline', 'ghost', 'link'] as const;
const sizes = ['xs', 'sm', 'md', 'lg'] as const; const sizes = ['xs', 'sm', 'md', 'lg'] as const;

4
invokeai/frontend/web/src/common/components/InvButton/InvButton.tsx
View File

@ -12,7 +12,7 @@ export const InvButton = memo(
<InvTooltip label={tooltip}> <InvTooltip label={tooltip}>
<Button <Button
ref={ref} ref={ref}
colorScheme={isChecked ? 'blue' : 'base'} colorScheme={isChecked ? 'invokeBlue' : 'base'}
{...rest} {...rest}
> >
{children} {children}
@ -22,7 +22,7 @@ export const InvButton = memo(
} }
return ( return (
<Button ref={ref} colorScheme={isChecked ? 'blue' : 'base'} {...rest}> <Button ref={ref} colorScheme={isChecked ? 'invokeBlue' : 'base'} {...rest}>
{children} {children}
</Button> </Button>
); );

6
invokeai/frontend/web/src/common/components/InvHeading/theme.ts
View File

@ -1,11 +1,11 @@
import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
const blue = defineStyle(() => ({ const invokeBlue = defineStyle(() => ({
color: 'blue.300', color: 'invokeBlue.300',
})); }));
export const headingTheme = defineStyleConfig({ export const headingTheme = defineStyleConfig({
variants: { variants: {
blue, invokeBlue,
}, },
}); });

4
invokeai/frontend/web/src/common/components/InvIconButton/InvIconButton.tsx
View File

@ -11,7 +11,7 @@ export const InvIconButton = memo(
<InvTooltip label={tooltip}> <InvTooltip label={tooltip}>
<IconButton <IconButton
ref={ref} ref={ref}
colorScheme={isChecked ? 'blue' : 'base'} colorScheme={isChecked ? 'invokeBlue' : 'base'}
{...rest} {...rest}
/> />
</InvTooltip> </InvTooltip>
@ -21,7 +21,7 @@ export const InvIconButton = memo(
return ( return (
<IconButton <IconButton
ref={ref} ref={ref}
colorScheme={isChecked ? 'blue' : 'base'} colorScheme={isChecked ? 'invokeBlue' : 'base'}
{...rest} {...rest}
/> />
); );

10
invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
View File

@ -142,7 +142,7 @@ const IAICanvasStagingAreaToolbar = () => {
aria-label={`${t('unifiedCanvas.previous')} (Left)`} aria-label={`${t('unifiedCanvas.previous')} (Left)`}
icon={<FaArrowLeft />} icon={<FaArrowLeft />}
onClick={handlePrevImage} onClick={handlePrevImage}
colorScheme="blue" colorScheme="invokeBlue"
isDisabled={!shouldShowStagingImage} isDisabled={!shouldShowStagingImage}
/> />
<InvButton <InvButton
@ -156,7 +156,7 @@ const IAICanvasStagingAreaToolbar = () => {
aria-label={`${t('unifiedCanvas.next')} (Right)`} aria-label={`${t('unifiedCanvas.next')} (Right)`}
icon={<FaArrowRight />} icon={<FaArrowRight />}
onClick={handleNextImage} onClick={handleNextImage}
colorScheme="blue" colorScheme="invokeBlue"
isDisabled={!shouldShowStagingImage} isDisabled={!shouldShowStagingImage}
/> />
</InvButtonGroup> </InvButtonGroup>
@ -166,7 +166,7 @@ const IAICanvasStagingAreaToolbar = () => {
aria-label={`${t('unifiedCanvas.accept')} (Enter)`} aria-label={`${t('unifiedCanvas.accept')} (Enter)`}
icon={<FaCheck />} icon={<FaCheck />}
onClick={handleAccept} onClick={handleAccept}
colorScheme="blue" colorScheme="invokeBlue"
/> />
<InvIconButton <InvIconButton
tooltip={ tooltip={
@ -182,7 +182,7 @@ const IAICanvasStagingAreaToolbar = () => {
data-alert={!shouldShowStagingImage} data-alert={!shouldShowStagingImage}
icon={shouldShowStagingImage ? <FaEye /> : <FaEyeSlash />} icon={shouldShowStagingImage ? <FaEye /> : <FaEyeSlash />}
onClick={handleToggleShouldShowStagingImage} onClick={handleToggleShouldShowStagingImage}
colorScheme="blue" colorScheme="invokeBlue"
/> />
<InvIconButton <InvIconButton
tooltip={t('unifiedCanvas.saveToGallery')} tooltip={t('unifiedCanvas.saveToGallery')}
@ -190,7 +190,7 @@ const IAICanvasStagingAreaToolbar = () => {
isDisabled={!imageDTO || !imageDTO.is_intermediate} isDisabled={!imageDTO || !imageDTO.is_intermediate}
icon={<FaSave />} icon={<FaSave />}
onClick={handleSaveToGallery} onClick={handleSaveToGallery}
colorScheme="blue" colorScheme="invokeBlue"
/> />
<InvIconButton <InvIconButton
tooltip={t('unifiedCanvas.discardAll')} tooltip={t('unifiedCanvas.discardAll')}

2
invokeai/frontend/web/src/features/embedding/EmbeddingPopover.tsx
View File

@ -34,7 +34,7 @@ export const EmbeddingPopover = memo((props: EmbeddingPopoverProps) => {
p={0} p={0}
insetBlockStart={-1} insetBlockStart={-1}
shadow="dark-lg" shadow="dark-lg"
borderColor="blue.300" borderColor="invokeBlue.300"
borderWidth="2px" borderWidth="2px"
borderStyle="solid" borderStyle="solid"
> >

2
invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx
View File

@ -6,7 +6,7 @@ const AutoAddIcon = () => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Flex position="absolute" insetInlineEnd={0} top={0} p={1}> <Flex position="absolute" insetInlineEnd={0} top={0} p={1}>
<Badge variant="solid" bg="blue.500"> <Badge variant="solid" bg="invokeBlue.500">
{t('common.auto')} {t('common.auto')}
</Badge> </Badge>
</Flex> </Flex>

2
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
View File

@ -218,7 +218,7 @@ const GalleryBoard = ({
w="full" w="full"
maxW="full" maxW="full"
borderBottomRadius="base" borderBottomRadius="base"
bg={isSelected ? 'blue.500' : 'base.600'} bg={isSelected ? 'invokeBlue.500' : 'base.600'}
color={isSelected ? 'base.50' : 'base.100'} color={isSelected ? 'base.50' : 'base.100'}
lineHeight="short" lineHeight="short"
fontSize="xs" fontSize="xs"

2
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
View File

@ -124,7 +124,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
w="full" w="full"
maxW="full" maxW="full"
borderBottomRadius="base" borderBottomRadius="base"
bg={isSelected ? 'blue.500' : 'base.600'} bg={isSelected ? 'invokeBlue.500' : 'base.600'}
color={isSelected ? 'base.50' : 'base.100'} color={isSelected ? 'base.50' : 'base.100'}
lineHeight="short" lineHeight="short"
fontSize="xs" fontSize="xs"

6
invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
View File

@ -143,8 +143,8 @@ const FoundModelsList = () => {
fontWeight="semibold" fontWeight="semibold"
p={2} p={2}
borderRadius={4} borderRadius={4}
color="blue.100" color="invokeBlue.100"
bg="blue.600" bg="invokeBlue.600"
> >
{t('common.installed')} {t('common.installed')}
</InvText> </InvText>
@ -184,7 +184,7 @@ const FoundModelsList = () => {
<InvText fontWeight="semibold"> <InvText fontWeight="semibold">
{t('modelManager.modelsFound')}: {foundModels.length} {t('modelManager.modelsFound')}: {foundModels.length}
</InvText> </InvText>
<InvText fontWeight="semibold" color="blue.200"> <InvText fontWeight="semibold" color="invokeBlue.200">
{t('common.notInstalled')}: {filteredModels.length} {t('common.notInstalled')}: {filteredModels.length}
</InvText> </InvText>
</Flex> </Flex>

2
invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
View File

@ -218,7 +218,7 @@ const AddNodePopover = () => {
p={0} p={0}
top={-1} top={-1}
shadow="dark-lg" shadow="dark-lg"
borderColor="blue.400" borderColor="invokeBlue.400"
borderWidth="2px" borderWidth="2px"
borderStyle="solid" borderStyle="solid"
> >

2
invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
View File

@ -28,7 +28,7 @@ const MinimapPanel = () => {
zoomable zoomable
nodeBorderRadius={15} nodeBorderRadius={15}
sx={minimapStyles} sx={minimapStyles}
nodeColor="var(--invokeai-colors-blue-600)" nodeColor="var(--invokeai-colors-base-600)"
maskColor="var(--invokeai-colors-blackAlpha-600)" maskColor="var(--invokeai-colors-blackAlpha-600)"
/> />
)} )}

2
invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx
View File

@ -22,7 +22,7 @@ const PruneQueueButton = ({ asIconButton }: Props) => {
tooltip={t('queue.pruneTooltip', { item_count: finishedCount })} tooltip={t('queue.pruneTooltip', { item_count: finishedCount })}
icon={<BsStars />} icon={<BsStars />}
onClick={pruneQueue} onClick={pruneQueue}
colorScheme="blue" colorScheme="invokeBlue"
/> />
); );
}; };

2
invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
View File

@ -27,7 +27,7 @@ const ProgressBar = () => {
} }
h={2} h={2}
w="full" w="full"
colorScheme="blue" colorScheme="invokeBlue"
/> />
); );
}; };

2
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
View File

@ -40,7 +40,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
<Flex w="full" alignItems="center" gap={2} h={12}> <Flex w="full" alignItems="center" gap={2} h={12}>
<Flex flexDir="column" flexGrow={1} h="full"> <Flex flexDir="column" flexGrow={1} h="full">
<Flex alignItems="center" w="full" h="50%"> <Flex alignItems="center" w="full" h="50%">
<Heading size="sm" variant={isOpen ? 'blue' : undefined}> <Heading size="sm" variant={isOpen ? 'invokeBlue' : undefined}>
{workflowDTO.name || t('workflows.unnamedWorkflow')} {workflowDTO.name || t('workflows.unnamedWorkflow')}
</Heading> </Heading>
<Spacer /> <Spacer />

18
invokeai/frontend/web/src/theme/colors.ts
View File

@ -9,9 +9,9 @@ const WARNING = { H: 28, S: 42 };
const OK = { H: 113, S: 42 }; const OK = { H: 113, S: 42 };
const ERROR = { H: 0, S: 42 }; const ERROR = { H: 0, S: 42 };
const INVOKE_YELLOW = { H: 66, S: 92 }; const INVOKE_YELLOW = { H: 66, S: 92 };
const BLUE = { H: 200, S: 76 }; const INVOKE_BLUE = { H: 200, S: 76 };
const GREEN = { H: 110, S: 69 }; const INVOKE_GREEN = { H: 110, S: 69 };
const RED = { H: 16, S: 92 }; const INVOKE_RED = { H: 16, S: 92 };
export const getArbitraryBaseColor = (lightness: number) => export const getArbitraryBaseColor = (lightness: number) =>
`hsl(${BASE.H} ${BASE.S}% ${lightness}%)`; `hsl(${BASE.H} ${BASE.S}% ${lightness}%)`;
@ -35,12 +35,12 @@ export const InvokeAIColors: InvokeAIThemeColors = {
INVOKE_YELLOW.S, INVOKE_YELLOW.S,
true true
), ),
blue: generateColorPalette(BLUE.H, BLUE.S), invokeBlue: generateColorPalette(INVOKE_BLUE.H, INVOKE_BLUE.S),
blueAlpha: generateColorPalette(BLUE.H, BLUE.S, true), invokeBlueAlpha: generateColorPalette(INVOKE_BLUE.H, INVOKE_BLUE.S, true),
green: generateColorPalette(GREEN.H, GREEN.S), invokeGreen: generateColorPalette(INVOKE_GREEN.H, INVOKE_GREEN.S),
greenAlpha: generateColorPalette(GREEN.H, GREEN.S, true), invokeGreenAlpha: generateColorPalette(INVOKE_GREEN.H, INVOKE_GREEN.S, true),
red: generateColorPalette(RED.H, RED.S), invokeRed: generateColorPalette(INVOKE_RED.H, INVOKE_RED.S),
redAlpha: generateColorPalette(RED.H, RED.S, true), invokeRedAlpha: generateColorPalette(INVOKE_RED.H, INVOKE_RED.S, true),
}; };
export const layerStyleBody = { export const layerStyleBody = {

12
invokeai/frontend/web/src/theme/types.ts
View File

@ -13,12 +13,12 @@ export type InvokeAIThemeColors = {
errorAlpha: Partial<InvokeAIPaletteSteps>; errorAlpha: Partial<InvokeAIPaletteSteps>;
invokeYellow: Partial<InvokeAIPaletteSteps>; invokeYellow: Partial<InvokeAIPaletteSteps>;
invokeYellowAlpha: Partial<InvokeAIPaletteSteps>; invokeYellowAlpha: Partial<InvokeAIPaletteSteps>;
red: Partial<InvokeAIPaletteSteps>; invokeRed: Partial<InvokeAIPaletteSteps>;
redAlpha: Partial<InvokeAIPaletteSteps>; invokeRedAlpha: Partial<InvokeAIPaletteSteps>;
green: Partial<InvokeAIPaletteSteps>; invokeGreen: Partial<InvokeAIPaletteSteps>;
greenAlpha: Partial<InvokeAIPaletteSteps>; invokeGreenAlpha: Partial<InvokeAIPaletteSteps>;
blue: Partial<InvokeAIPaletteSteps>; invokeBlue: Partial<InvokeAIPaletteSteps>;
blueAlpha: Partial<InvokeAIPaletteSteps>; invokeBlueAlpha: Partial<InvokeAIPaletteSteps>;
}; };
export type InvokeAIPaletteSteps = { export type InvokeAIPaletteSteps = {