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

feat(ui): board styles

Browse Source
This commit is contained in:
psychedelicious 2023-07-21 20:02:54 +10:00 committed by Kent Keirsey
parent c2c99b8650
commit 68f1f87c6f
19 changed files with 306 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts
View File

@ -44,7 +44,7 @@ export const addBoardIdSelectedListener = () => {
() =>
imagesApi.endpoints.listImages.select(queryArgs)(getState())
.isSuccess,
1000
5000
);
if (isSuccess) {

5
invokeai/frontend/web/src/common/components/IAICollapse.tsx
View File

@ -92,7 +92,10 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
sx={{
p: 4,
borderBottomRadius: 'base',
bg: mode('base.100', 'base.800')(colorMode),
bg: 'base.100',
_dark: {
bg: 'base.800',
},
}}
>
{children}

29
invokeai/frontend/web/src/common/components/IAIDndImage.tsx
View File

@ -18,12 +18,20 @@ import {
import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
import ImageContextMenu from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
import { MouseEvent, ReactElement, SyntheticEvent, memo } from 'react';
import {
MouseEvent,
ReactElement,
SyntheticEvent,
memo,
useCallback,
useState,
} from 'react';
import { FaImage, FaUndo, FaUpload } from 'react-icons/fa';
import { ImageDTO, PostUploadAction } from 'services/api/types';
import { mode } from 'theme/util/mode';
import IAIDraggable from './IAIDraggable';
import IAIDroppable from './IAIDroppable';
import SelectionOverlay from './SelectionOverlay';
type IAIDndImageProps = {
imageDTO: ImageDTO | undefined;
@ -49,6 +57,7 @@ type IAIDndImageProps = {
thumbnail?: boolean;
noContentFallback?: ReactElement;
useThumbailFallback?: boolean;
withHoverOverlay?: boolean;
};
const IAIDndImage = (props: IAIDndImageProps) => {
@ -75,9 +84,17 @@ const IAIDndImage = (props: IAIDndImageProps) => {
resetIcon = <FaUndo />,
noContentFallback = <IAINoContentFallback icon={FaImage} />,
useThumbailFallback,
withHoverOverlay = false,
} = props;
const { colorMode } = useColorMode();
const [isHovered, setIsHovered] = useState(false);
const handleMouseOver = useCallback(() => {
setIsHovered(true);
}, []);
const handleMouseOut = useCallback(() => {
setIsHovered(false);
}, []);
const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
postUploadAction,
@ -105,6 +122,8 @@ const IAIDndImage = (props: IAIDndImageProps) => {
{(ref) => (
<Flex
ref={ref}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
sx={{
width: 'full',
height: 'full',
@ -147,14 +166,14 @@ const IAIDndImage = (props: IAIDndImageProps) => {
maxW: 'full',
maxH: 'full',
borderRadius: 'base',
shadow: isSelected ? 'selected.light' : undefined,
_dark: {
shadow: isSelected ? 'selected.dark' : undefined,
},
...imageSx,
}}
/>
{withMetadataOverlay && <ImageMetadataOverlay image={imageDTO} />}
<SelectionOverlay
isSelected={isSelected}
isHovered={withHoverOverlay ? isHovered : false}
/>
</Flex>
)}
{!imageDTO && !isUploadDisabled && (

42
invokeai/frontend/web/src/common/components/SelectionOverlay.tsx Normal file
View File

@ -0,0 +1,42 @@
import { Box } from '@chakra-ui/react';
type Props = {
isSelected: boolean;
isHovered: boolean;
};
const SelectionOverlay = ({ isSelected, isHovered }: Props) => {
return (
<Box
className="selection-box"
sx={{
position: 'absolute',
top: 0,
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
borderRadius: 'base',
opacity: isSelected ? 1 : 0.7,
transitionProperty: 'common',
transitionDuration: '0.1s',
shadow: isSelected
? isHovered
? 'hoverSelected.light'
: 'selected.light'
: isHovered
? 'hoverUnselected.light'
: undefined,
_dark: {
shadow: isSelected
? isHovered
? 'hoverSelected.dark'
: 'selected.dark'
: isHovered
? 'hoverUnselected.dark'
: undefined,
},
}}
/>
);
};
export default SelectionOverlay;

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

@ -5,7 +5,7 @@ const AutoAddIcon = () => {
<Flex
sx={{
position: 'absolute',
insetInlineStart: 0,
insetInlineEnd: 0,
top: 0,
p: 1,
}}

52
invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
View File

@ -1,13 +1,19 @@
import { MenuItem, MenuList } from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks';
import { MenuGroup, MenuItem, MenuList } from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { ContextMenu, ContextMenuProps } from 'chakra-ui-contextmenu';
import { boardIdSelected } from 'features/gallery/store/gallerySlice';
import { memo, useCallback } from 'react';
import { FaFolder } from 'react-icons/fa';
import {
autoAddBoardIdChanged,
boardIdSelected,
} from 'features/gallery/store/gallerySlice';
import { MouseEvent, memo, useCallback, useMemo } from 'react';
import { FaFolder, FaPlus } from 'react-icons/fa';
import { BoardDTO } from 'services/api/types';
import { menuListMotionProps } from 'theme/components/menu';
import GalleryBoardContextMenuItems from './GalleryBoardContextMenuItems';
import NoBoardContextMenuItems from './NoBoardContextMenuItems';
import { useBoardName } from 'services/api/hooks/useBoardName';
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
type Props = {
board?: BoardDTO;
@ -20,9 +26,30 @@ const BoardContextMenu = memo(
({ board, board_id, setBoardToDelete, children }: Props) => {
const dispatch = useAppDispatch();
const selector = useMemo(
() =>
createSelector(stateSelector, ({ gallery }) => {
const isSelected = gallery.selectedBoardId === board_id;
const isAutoAdd = gallery.autoAddBoardId === board_id;
return { isSelected, isAutoAdd };
}),
[board_id]
);
const { isSelected, isAutoAdd } = useAppSelector(selector);
const boardName = useBoardName(board_id);
const handleSelectBoard = useCallback(() => {
dispatch(boardIdSelected(board?.board_id ?? board_id));
}, [board?.board_id, board_id, dispatch]);
dispatch(boardIdSelected(board_id));
}, [board_id, dispatch]);
const handleSetAutoAdd = useCallback(() => {
dispatch(autoAddBoardIdChanged(board_id));
}, [board_id, dispatch]);
const skipEvent = useCallback((e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();
}, []);
return (
<ContextMenu<HTMLDivElement>
@ -35,9 +62,15 @@ const BoardContextMenu = memo(
<MenuList
sx={{ visibility: 'visible !important' }}
motionProps={menuListMotionProps}
onContextMenu={skipEvent}
>
<MenuItem icon={<FaFolder />} onClickCapture={handleSelectBoard}>
Select Board
<MenuGroup title={boardName}>
<MenuItem
icon={<FaPlus />}
isDisabled={isAutoAdd}
onClick={handleSetAutoAdd}
>
Auto-add to this Board
</MenuItem>
{!board && <NoBoardContextMenuItems />}
{board && (
@ -46,6 +79,7 @@ const BoardContextMenu = memo(
setBoardToDelete={setBoardToDelete}
/>
)}
</MenuGroup>
</MenuList>
)}
>

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

@ -76,7 +76,7 @@ const BoardsList = (props: Props) => {
<Grid
className="list-container"
sx={{
gridTemplateColumns: `repeat(auto-fill, minmax(96px, 1fr));`,
gridTemplateColumns: `repeat(auto-fill, minmax(108px, 1fr));`,
maxH: 346,
}}
>

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

@ -26,6 +26,7 @@ import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
import { BoardDTO } from 'services/api/types';
import AutoAddIcon from '../AutoAddIcon';
import BoardContextMenu from '../BoardContextMenu';
import SelectionOverlay from 'common/components/SelectionOverlay';
const BASE_BADGE_STYLES: ChakraProps['sx'] = {
bg: 'base.500',
@ -56,7 +57,13 @@ const GalleryBoard = memo(
);
const { isSelectedForAutoAdd } = useAppSelector(selector);
const [isHovered, setIsHovered] = useState(false);
const handleMouseOver = useCallback(() => {
setIsHovered(true);
}, []);
const handleMouseOut = useCallback(() => {
setIsHovered(false);
}, []);
const { currentData: coverImage } = useGetImageDTOQuery(
board.cover_image_name ?? skipToken
);
@ -83,26 +90,30 @@ const GalleryBoard = memo(
);
const handleSubmit = useCallback(
(newBoardName: string) => {
if (!newBoardName) {
async (newBoardName: string) => {
// empty strings are not allowed
if (!newBoardName.trim()) {
setLocalBoardName(board_name);
return;
}
if (newBoardName === board_name) {
// don't updated the board name if it hasn't changed
if (newBoardName === board_name) {
return;
}
updateBoard({ board_id, changes: { board_name: newBoardName } })
.unwrap()
.then((response) => {
try {
const { board_name } = await updateBoard({
board_id,
changes: { board_name: newBoardName },
}).unwrap();
// update local state
setLocalBoardName(response.board_name);
})
.catch(() => {
setLocalBoardName(board_name);
} catch {
// revert on error
setLocalBoardName(board_name);
});
}
},
[board_id, board_name, updateBoard]
);
@ -116,6 +127,8 @@ const GalleryBoard = memo(
sx={{ w: 'full', h: 'full', touchAction: 'none', userSelect: 'none' }}
>
<Flex
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
sx={{
position: 'relative',
justifyContent: 'center',
@ -174,7 +187,7 @@ const GalleryBoard = memo(
boxSize={12}
as={FaUser}
sx={{
mt: -3,
mt: -6,
opacity: 0.7,
color: 'base.500',
_dark: {
@ -184,7 +197,7 @@ const GalleryBoard = memo(
/>
</Flex>
)}
<Flex
{/* <Flex
sx={{
position: 'absolute',
insetInlineEnd: 0,
@ -195,24 +208,11 @@ const GalleryBoard = memo(
<Badge variant="solid" sx={BASE_BADGE_STYLES}>
{totalImages}/{totalAssets}
</Badge>
</Flex>
</Flex> */}
{isSelectedForAutoAdd && <AutoAddIcon />}
<Box
className="selection-box"
sx={{
position: 'absolute',
top: 0,
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
borderRadius: 'base',
transitionProperty: 'common',
transitionDuration: 'common',
shadow: isSelected ? 'selected.light' : undefined,
_dark: {
shadow: isSelected ? 'selected.dark' : undefined,
},
}}
<SelectionOverlay
isSelected={isSelected}
isHovered={isHovered}
/>
<Flex
sx={{

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

@ -1,13 +1,15 @@
import { Badge, Box, ChakraProps, Flex, Icon, Text } from '@chakra-ui/react';
import { Box, ChakraProps, Flex, Image, Text } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { MoveBoardDropData } from 'app/components/ImageDnd/typesafeDnd';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import InvokeAILogoImage from 'assets/images/logo.png';
import IAIDroppable from 'common/components/IAIDroppable';
import SelectionOverlay from 'common/components/SelectionOverlay';
import { boardIdSelected } from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useMemo } from 'react';
import { FaFolder } from 'react-icons/fa';
import { memo, useCallback, useMemo, useState } from 'react';
import { useBoardName } from 'services/api/hooks/useBoardName';
import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
import AutoAddIcon from '../AutoAddIcon';
import BoardContextMenu from '../BoardContextMenu';
@ -33,9 +35,17 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
const dispatch = useAppDispatch();
const { totalImages, totalAssets } = useBoardTotal(undefined);
const { autoAddBoardId } = useAppSelector(selector);
const boardName = useBoardName(undefined);
const handleSelectBoard = useCallback(() => {
dispatch(boardIdSelected(undefined));
}, [dispatch]);
const [isHovered, setIsHovered] = useState(false);
const handleMouseOver = useCallback(() => {
setIsHovered(true);
}, []);
const handleMouseOut = useCallback(() => {
setIsHovered(false);
}, []);
const droppableData: MoveBoardDropData = useMemo(
() => ({
@ -49,6 +59,8 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
return (
<Box sx={{ w: 'full', h: 'full', touchAction: 'none', userSelect: 'none' }}>
<Flex
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
sx={{
position: 'relative',
justifyContent: 'center',
@ -86,9 +98,9 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
alignItems: 'center',
}}
>
<Icon
{/* <Icon
boxSize={12}
as={FaFolder}
as={FaBucket}
sx={{
opacity: 0.7,
color: 'base.500',
@ -96,9 +108,23 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
color: 'base.500',
},
}}
/> */}
<Image
src={InvokeAILogoImage}
alt="invoke-ai-logo"
sx={{
opacity: 0.4,
filter: 'grayscale(1)',
mt: -6,
w: 16,
h: 16,
minW: 16,
minH: 16,
userSelect: 'none',
}}
/>
</Flex>
<Flex
{/* <Flex
sx={{
position: 'absolute',
insetInlineEnd: 0,
@ -109,25 +135,33 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
<Badge variant="solid" sx={BASE_BADGE_STYLES}>
{totalImages}/{totalAssets}
</Badge>
</Flex>
</Flex> */}
{!autoAddBoardId && <AutoAddIcon />}
<Box
className="selection-box"
<Flex
sx={{
position: 'absolute',
top: 0,
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
borderRadius: 'base',
transitionProperty: 'common',
transitionDuration: 'common',
shadow: isSelected ? 'selected.light' : undefined,
left: 0,
p: 1,
justifyContent: 'center',
alignItems: 'center',
w: 'full',
maxW: 'full',
borderBottomRadius: 'base',
bg: isSelected ? 'accent.400' : 'base.500',
color: isSelected ? 'base.50' : 'base.100',
_dark: {
shadow: isSelected ? 'selected.dark' : undefined,
bg: isSelected ? 'accent.500' : 'base.600',
color: isSelected ? 'base.50' : 'base.100',
},
lineHeight: 'short',
fontSize: 'xs',
fontWeight: isSelected ? 700 : 500,
}}
/>
>
{boardName}
</Flex>
<SelectionOverlay isSelected={isSelected} isHovered={isHovered} />
<IAIDroppable
data={droppableData}
dropLabel={<Text fontSize="md">Move</Text>}

4
invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
View File

@ -59,11 +59,11 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
</MenuItem> */}
</>
)}
{!isSelectedForAutoAdd && (
{/* {!isSelectedForAutoAdd && (
<MenuItem icon={<FaPlus />} onClick={handleToggleAutoAdd}>
Auto-add to this Board
</MenuItem>
)}
)} */}
<MenuItem
sx={{ color: 'error.600', _dark: { color: 'error.300' } }}
icon={<FaTrash />}

4
invokeai/frontend/web/src/features/gallery/components/Boards/NoBoardContextMenuItems.tsx
View File

@ -16,11 +16,11 @@ const NoBoardContextMenuItems = () => {
return (
<>
{autoAddBoardId && (
{/* {autoAddBoardId && (
<MenuItem icon={<FaPlus />} onClick={handleDisableAutoAdd}>
Auto-add to this Board
</MenuItem>
)}
)} */}
</>
);
};

33
invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
View File

@ -6,7 +6,6 @@ import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { memo, useMemo } from 'react';
import { useBoardName } from 'services/api/hooks/useBoardName';
import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
const selector = createSelector(
[stateSelector],
@ -27,24 +26,28 @@ const GalleryBoardName = (props: Props) => {
const { isOpen, onToggle } = props;
const { selectedBoardId } = useAppSelector(selector);
const boardName = useBoardName(selectedBoardId);
const { totalImages, totalAssets } = useBoardTotal(selectedBoardId);
// const { totalImages, totalAssets } = useBoardTotal(selectedBoardId);
const formattedBoardName = useMemo(() => {
if (!boardName) {
return '';
}
if (boardName && (totalImages === undefined || totalAssets === undefined)) {
return boardName;
}
const count = `${totalImages}/${totalAssets}`;
if (boardName.length > 20) {
return `${boardName.substring(0, 20)}... (${count})`;
return `${boardName.substring(0, 20)}...`;
}
return `${boardName} (${count})`;
}, [boardName, totalAssets, totalImages]);
return boardName;
// if (!boardName) {
// return '';
// }
// if (boardName && (totalImages === undefined || totalAssets === undefined)) {
// return boardName;
// }
// const count = `${totalImages}/${totalAssets}`;
// if (boardName.length > 20) {
// return `${boardName.substring(0, 20)}... (${count})`;
// }
// return `${boardName} (${count})`;
}, [boardName]);
return (
<Flex

26
invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
View File

@ -1,5 +1,6 @@
import {
Box,
Button,
ButtonGroup,
Flex,
Spacer,
@ -92,23 +93,42 @@ const ImageGalleryContent = () => {
>
<Tabs
index={galleryView === 'images' ? 0 : 1}
variant="line"
variant="unstyled"
size="sm"
sx={{ w: 'full' }}
>
<TabList>
<ButtonGroup
isAttached
sx={{
w: 'full',
}}
>
<Tab
as={IAIButton}
size="sm"
isChecked={galleryView === 'images'}
onClick={handleClickImages}
sx={{ borderTopRadius: 'base', w: 'full' }}
sx={{
w: 'full',
}}
leftIcon={<FaImages />}
>
Images
</Tab>
<Tab
as={IAIButton}
size="sm"
isChecked={galleryView === 'assets'}
onClick={handleClickAssets}
sx={{ borderTopRadius: 'base', w: 'full' }}
sx={{
w: 'full',
}}
leftIcon={<FaServer />}
>
Assets
</Tab>
</ButtonGroup>
</TabList>
</Tabs>
</Flex>

1
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
View File

@ -106,6 +106,7 @@ const GalleryImage = (props: HoverableImageProps) => {
isDropDisabled={true}
isUploadDisabled={true}
thumbnail={true}
withHoverOverlay
// resetIcon={<FaTrash />}
// resetTooltip="Delete image"
// withResetIcon // removed bc it's too easy to accidentally delete images

34
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
View File

@ -1,8 +1,9 @@
import { Box, Spinner } from '@chakra-ui/react';
import { Box, Flex } from '@chakra-ui/react';
import { useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { IMAGE_LIMIT } from 'features/gallery//store/gallerySlice';
import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
import {
UseOverlayScrollbarsParams,
useOverlayScrollbars,
@ -15,11 +16,10 @@ import {
useLazyListImagesQuery,
useListImagesQuery,
} from 'services/api/endpoints/images';
import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
import GalleryImage from './GalleryImage';
import ImageGridItemContainer from './ImageGridItemContainer';
import ImageGridListContainer from './ImageGridListContainer';
import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
const overlayScrollbarsConfig: UseOverlayScrollbarsParams = {
defer: true,
@ -87,20 +87,34 @@ const GalleryImageGrid = () => {
if (!currentData) {
return (
<Box sx={{ w: 'full', h: 'full' }}>
<Spinner size="2xl" opacity={0.5} />
</Box>
<Flex
sx={{
w: 'full',
h: 'full',
alignItems: 'center',
justifyContent: 'center',
}}
>
<IAINoContentFallback label="Loading..." icon={FaImage} />
</Flex>
);
}
if (isSuccess && currentData?.ids.length === 0) {
return (
<Box sx={{ w: 'full', h: 'full' }}>
<Flex
sx={{
w: 'full',
h: 'full',
alignItems: 'center',
justifyContent: 'center',
}}
>
<IAINoContentFallback
label={t('gallery.noImagesInGallery')}
icon={FaImage}
/>
</Box>
</Flex>
);
}
@ -129,9 +143,7 @@ const GalleryImageGrid = () => {
loadingText="Loading"
flexShrink={0}
>
{areMoreAvailable
? t('gallery.loadMore')
: t('gallery.allImagesLoaded')}
{`Load More (${currentData.ids.length} of ${currentViewTotal})`}
</IAIButton>
</>
);

1
invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx
View File

@ -78,7 +78,6 @@ const ParametersDrawer = () => {
}}
>
<Flex
paddingTop={1.5}
paddingBottom={4}
justifyContent="space-between"
alignItems="center"

2
invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
View File

@ -164,7 +164,7 @@ const ResizableDrawer = ({
sx={{
borderColor: mode('base.200', 'base.800')(colorMode),
p: 4,
bg: mode('base.100', 'base.900')(colorMode),
bg: mode('base.50', 'base.900')(colorMode),
height: 'full',
shadow: isOpen ? 'dark-lg' : undefined,
...containerStyles,

14
invokeai/frontend/web/src/theme/components/button.ts
View File

@ -64,9 +64,23 @@ const invokeAI = defineStyle((props) => {
};
});
const invokeAIOutline = defineStyle((props) => {
const { colorScheme: c } = props;
const borderColor = mode(`gray.200`, `whiteAlpha.300`)(props);
return {
border: '1px solid',
borderColor: c === 'gray' ? borderColor : 'currentColor',
'.chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)':
{ marginEnd: '-1px' },
'.chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)':
{ marginBottom: '-1px' },
};
});
export const buttonTheme = defineStyleConfig({
variants: {
invokeAI,
invokeAIOutline,
},
defaultProps: {
variant: 'invokeAI',

6
invokeai/frontend/web/src/theme/theme.ts
View File

@ -78,12 +78,12 @@ export const theme: ThemeOverride = {
hoverSelected: {
light:
'0px 0px 0px 1px var(--invokeai-colors-base-150), 0px 0px 0px 4px var(--invokeai-colors-accent-500)',
dark: '0px 0px 0px 1px var(--invokeai-colors-base-900), 0px 0px 0px 4px var(--invokeai-colors-accent-300)',
dark: '0px 0px 0px 1px var(--invokeai-colors-base-900), 0px 0px 0px 4px var(--invokeai-colors-accent-400)',
},
hoverUnselected: {
light:
'0px 0px 0px 1px var(--invokeai-colors-base-150), 0px 0px 0px 4px var(--invokeai-colors-accent-200)',
dark: '0px 0px 0px 1px var(--invokeai-colors-base-900), 0px 0px 0px 4px var(--invokeai-colors-accent-600)',
'0px 0px 0px 1px var(--invokeai-colors-base-150), 0px 0px 0px 3px var(--invokeai-colors-accent-500)',
dark: '0px 0px 0px 1px var(--invokeai-colors-base-900), 0px 0px 0px 3px var(--invokeai-colors-accent-400)',
},
nodeSelectedOutline: `0 0 0 2px var(--invokeai-colors-accent-450)`,
},