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): tweak light mode colors, buttons pop

Browse Source
This commit is contained in:
psychedelicious 2023-06-30 13:07:37 +10:00
parent 877483093a
commit d6cfbe982f
4 changed files with 101 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
View File

@ -98,11 +98,12 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
}, },
}, },
'&[data-selected]': { '&[data-selected]': {
color: mode(base900, base50)(colorMode), backgroundColor: mode(accent400, accent600)(colorMode),
backgroundColor: mode(accent300, accent600)(colorMode), color: mode(base50, base100)(colorMode),
fontWeight: 600, fontWeight: 600,
'&:hover': { '&:hover': {
backgroundColor: mode(accent400, accent500)(colorMode), backgroundColor: mode(accent500, accent500)(colorMode),
color: mode('white', base50)(colorMode),
}, },
}, },
}, },

7
invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
View File

@ -101,11 +101,12 @@ const IAIMantineSelect = (props: IAISelectProps) => {
}, },
}, },
'&[data-selected]': { '&[data-selected]': {
color: mode(base900, base50)(colorMode), backgroundColor: mode(accent400, accent600)(colorMode),
backgroundColor: mode(accent300, accent600)(colorMode), color: mode(base50, base100)(colorMode),
fontWeight: 600, fontWeight: 600,
'&:hover': { '&:hover': {
backgroundColor: mode(accent400, accent500)(colorMode), backgroundColor: mode(accent500, accent500)(colorMode),
color: mode('white', base50)(colorMode),
}, },
}, },
}, },

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

@ -4,52 +4,114 @@ import { mode } from '@chakra-ui/theme-tools';
const invokeAI = defineStyle((props) => { const invokeAI = defineStyle((props) => {
const { colorScheme: c } = props; const { colorScheme: c } = props;
// must specify `_disabled` colors if we override `_hover`, else hover on disabled has no styles // must specify `_disabled` colors if we override `_hover`, else hover on disabled has no styles
if (c === 'base') {
const _disabled = { const _disabled = {
bg: mode(`${c}.350`, `${c}.700`)(props), bg: mode('base.200', 'base.700')(props),
color: mode(`${c}.750`, `${c}.150`)(props), color: mode('base.500', 'base.150')(props),
svg: { svg: {
fill: mode(`${c}.750`, `${c}.150`)(props), fill: mode('base.500', 'base.150')(props),
}, },
opacity: 1, opacity: 1,
filter: 'saturate(65%)',
}; };
return { return {
bg: mode(`${c}.200`, `${c}.600`)(props), bg: mode('base.200', 'base.600')(props),
color: mode(`${c}.850`, `${c}.100`)(props), color: mode('base.850', 'base.100')(props),
borderRadius: 'base', borderRadius: 'base',
textShadow: mode( textShadow: mode(
`0 0 0.3rem var(--invokeai-colors-${c}-50)`, '0 0 0.3rem var(--invokeai-colors-base-50)',
`0 0 0.3rem var(--invokeai-colors-${c}-900)` '0 0 0.3rem var(--invokeai-colors-base-900)'
)(props), )(props),
svg: { svg: {
fill: mode(`${c}.850`, `${c}.100`)(props), fill: mode('base.850', 'base.100')(props),
filter: mode( filter: mode(
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-100))`, 'drop-shadow(0px 0px 0.3rem var(--invokeai-colors-base-100))',
'drop-shadow(0px 0px 0.3rem var(--invokeai-colors-base-800))'
)(props),
},
_disabled,
_hover: {
bg: mode('base.300', 'base.500')(props),
color: mode('base.900', 'base.50')(props),
svg: {
fill: mode('base.900', 'base.50')(props),
},
_disabled,
},
_checked: {
bg: mode('accent.400', 'accent.600')(props),
color: mode('base.50', 'base.100')(props),
svg: {
fill: mode(`${c}.50`, `${c}.100`)(props),
filter: mode(
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))` `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
)(props), )(props),
}, },
_disabled, _disabled,
_hover: { _hover: {
bg: mode(`${c}.300`, `${c}.500`)(props), bg: mode('accent.500', 'accent.500')(props),
color: mode(`${c}.900`, `${c}.50`)(props), color: mode('white', 'base.50')(props),
svg: { svg: {
fill: mode(`${c}.900`, `${c}.50`)(props), fill: mode('white', 'base.50')(props),
},
_disabled,
},
},
};
}
const _disabled = {
bg: mode(`${c}.200`, `${c}.700`)(props),
color: mode(`${c}.100`, `${c}.150`)(props),
svg: {
fill: mode(`${c}.100`, `${c}.150`)(props),
},
opacity: 1,
filter: mode(undefined, 'saturate(65%)')(props),
};
return {
bg: mode(`${c}.400`, `${c}.600`)(props),
color: mode(`base.50`, `base.100`)(props),
borderRadius: 'base',
textShadow: mode(
`0 0 0.3rem var(--invokeai-colors-${c}-600)`,
`0 0 0.3rem var(--invokeai-colors-${c}-900)`
)(props),
svg: {
fill: mode(`base.50`, `base.100`)(props),
filter: mode(
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
)(props),
},
_disabled,
_hover: {
bg: mode(`${c}.500`, `${c}.500`)(props),
color: mode('white', `base.50`)(props),
svg: {
fill: mode('white', `base.50`)(props),
}, },
_disabled, _disabled,
}, },
_checked: { _checked: {
bg: mode('accent.200', 'accent.600')(props), bg: mode('accent.400', 'accent.600')(props),
color: mode('accent.800', 'accent.100')(props), color: mode('base.50', 'base.100')(props),
svg: { svg: {
fill: mode('accent.800', 'accent.100')(props), fill: mode(`base.50`, `base.100`)(props),
filter: mode(
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
)(props),
}, },
_disabled, _disabled,
_hover: { _hover: {
bg: mode('accent.300', 'accent.500')(props), bg: mode('accent.500', 'accent.500')(props),
color: mode('accent.900', 'accent.50')(props), color: mode('white', 'base.50')(props),
svg: { svg: {
fill: mode('accent.900', 'accent.50')(props), fill: mode('white', 'base.50')(props),
}, },
_disabled, _disabled,
}, },

23
invokeai/frontend/web/src/theme/components/tabs.ts
View File

@ -37,20 +37,22 @@ const invokeAITablist = defineStyle((props) => {
fill: mode('base.700', 'base.300')(props), fill: mode('base.700', 'base.300')(props),
}, },
_selected: { _selected: {
borderBottomColor: 'base.800', bg: mode('accent.400', 'accent.600')(props),
bg: mode('accent.200', 'accent.600')(props), color: mode('base.50', 'base.100')(props),
color: mode('accent.800', 'accent.100')(props),
_hover: {
bg: mode('accent.300', 'accent.500')(props),
color: mode('accent.900', 'accent.50')(props),
},
svg: { svg: {
fill: mode('base.900', 'base.50')(props), fill: mode(`base.50`, `base.100`)(props),
filter: mode( filter: mode(
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-accent-100))`, `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-accent-900))` `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
)(props), )(props),
}, },
_hover: {
bg: mode('accent.500', 'accent.500')(props),
color: mode('white', 'base.50')(props),
svg: {
fill: mode('white', 'base.50')(props),
},
},
}, },
_hover: { _hover: {
bg: mode('base.100', 'base.800')(props), bg: mode('base.100', 'base.800')(props),
@ -81,5 +83,6 @@ export const tabsTheme = defineMultiStyleConfig({
}, },
defaultProps: { defaultProps: {
variant: 'invokeAI', variant: 'invokeAI',
colorScheme: 'accent',
}, },
}); });