mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat(ui): tweak light mode colors, buttons pop (#3612)
the light mode button colors were way off, much improved
This commit is contained in:
blessedcoolant
GitHub
commit
a9bc45b8af
@ -98,11 +98,12 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
|
||||
},
|
||||
},
|
||||
'&[data-selected]': {
|
||||
color: mode(base900, base50)(colorMode),
|
||||
backgroundColor: mode(accent300, accent600)(colorMode),
|
||||
backgroundColor: mode(accent400, accent600)(colorMode),
|
||||
color: mode(base50, base100)(colorMode),
|
||||
fontWeight: 600,
|
||||
'&:hover': {
|
||||
backgroundColor: mode(accent400, accent500)(colorMode),
|
||||
backgroundColor: mode(accent500, accent500)(colorMode),
|
||||
color: mode('white', base50)(colorMode),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -101,11 +101,12 @@ const IAIMantineSelect = (props: IAISelectProps) => {
|
||||
},
|
||||
},
|
||||
'&[data-selected]': {
|
||||
color: mode(base900, base50)(colorMode),
|
||||
backgroundColor: mode(accent300, accent600)(colorMode),
|
||||
backgroundColor: mode(accent400, accent600)(colorMode),
|
||||
color: mode(base50, base100)(colorMode),
|
||||
fontWeight: 600,
|
||||
'&:hover': {
|
||||
backgroundColor: mode(accent400, accent500)(colorMode),
|
||||
backgroundColor: mode(accent500, accent500)(colorMode),
|
||||
color: mode('white', base50)(colorMode),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -4,52 +4,114 @@ import { mode } from '@chakra-ui/theme-tools';
|
||||
const invokeAI = defineStyle((props) => {
|
||||
const { colorScheme: c } = props;
|
||||
// must specify `_disabled` colors if we override `_hover`, else hover on disabled has no styles
|
||||
|
||||
if (c === 'base') {
|
||||
const _disabled = {
|
||||
bg: mode(`${c}.350`, `${c}.700`)(props),
|
||||
color: mode(`${c}.750`, `${c}.150`)(props),
|
||||
bg: mode('base.200', 'base.700')(props),
|
||||
color: mode('base.500', 'base.150')(props),
|
||||
svg: {
|
||||
fill: mode(`${c}.750`, `${c}.150`)(props),
|
||||
fill: mode('base.500', 'base.150')(props),
|
||||
},
|
||||
opacity: 1,
|
||||
filter: 'saturate(65%)',
|
||||
};
|
||||
|
||||
return {
|
||||
bg: mode(`${c}.200`, `${c}.600`)(props),
|
||||
color: mode(`${c}.850`, `${c}.100`)(props),
|
||||
bg: mode('base.200', 'base.600')(props),
|
||||
color: mode('base.850', 'base.100')(props),
|
||||
borderRadius: 'base',
|
||||
textShadow: mode(
|
||||
`0 0 0.3rem var(--invokeai-colors-${c}-50)`,
|
||||
`0 0 0.3rem var(--invokeai-colors-${c}-900)`
|
||||
'0 0 0.3rem var(--invokeai-colors-base-50)',
|
||||
'0 0 0.3rem var(--invokeai-colors-base-900)'
|
||||
)(props),
|
||||
svg: {
|
||||
fill: mode(`${c}.850`, `${c}.100`)(props),
|
||||
fill: mode('base.850', 'base.100')(props),
|
||||
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))`
|
||||
)(props),
|
||||
},
|
||||
_disabled,
|
||||
_hover: {
|
||||
bg: mode(`${c}.300`, `${c}.500`)(props),
|
||||
color: mode(`${c}.900`, `${c}.50`)(props),
|
||||
bg: mode('accent.500', 'accent.500')(props),
|
||||
color: mode('white', 'base.50')(props),
|
||||
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,
|
||||
},
|
||||
_checked: {
|
||||
bg: mode('accent.200', 'accent.600')(props),
|
||||
color: mode('accent.800', 'accent.100')(props),
|
||||
bg: mode('accent.400', 'accent.600')(props),
|
||||
color: mode('base.50', 'base.100')(props),
|
||||
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,
|
||||
_hover: {
|
||||
bg: mode('accent.300', 'accent.500')(props),
|
||||
color: mode('accent.900', 'accent.50')(props),
|
||||
bg: mode('accent.500', 'accent.500')(props),
|
||||
color: mode('white', 'base.50')(props),
|
||||
svg: {
|
||||
fill: mode('accent.900', 'accent.50')(props),
|
||||
fill: mode('white', 'base.50')(props),
|
||||
},
|
||||
_disabled,
|
||||
},
|
||||
|
||||
@ -37,20 +37,22 @@ const invokeAITablist = defineStyle((props) => {
|
||||
fill: mode('base.700', 'base.300')(props),
|
||||
},
|
||||
_selected: {
|
||||
borderBottomColor: 'base.800',
|
||||
bg: mode('accent.200', 'accent.600')(props),
|
||||
color: mode('accent.800', 'accent.100')(props),
|
||||
_hover: {
|
||||
bg: mode('accent.300', 'accent.500')(props),
|
||||
color: mode('accent.900', 'accent.50')(props),
|
||||
},
|
||||
bg: mode('accent.400', 'accent.600')(props),
|
||||
color: mode('base.50', 'base.100')(props),
|
||||
svg: {
|
||||
fill: mode('base.900', 'base.50')(props),
|
||||
fill: mode(`base.50`, `base.100`)(props),
|
||||
filter: mode(
|
||||
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-accent-100))`,
|
||||
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-accent-900))`
|
||||
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
|
||||
`drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
|
||||
)(props),
|
||||
},
|
||||
_hover: {
|
||||
bg: mode('accent.500', 'accent.500')(props),
|
||||
color: mode('white', 'base.50')(props),
|
||||
svg: {
|
||||
fill: mode('white', 'base.50')(props),
|
||||
},
|
||||
},
|
||||
},
|
||||
_hover: {
|
||||
bg: mode('base.100', 'base.800')(props),
|
||||
@ -81,5 +83,6 @@ export const tabsTheme = defineMultiStyleConfig({
|
||||
},
|
||||
defaultProps: {
|
||||
variant: 'invokeAI',
|
||||
colorScheme: 'accent',
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user