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): remove references to dark mode

Browse Source
This commit is contained in:
psychedelicious 2023-03-06 20:40:59 +11:00
parent 41b2e4633f
commit d843fb078a
15 changed files with 93 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/src/theme/components/accordion.ts
View File

@ -3,7 +3,6 @@ import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys);
@ -20,16 +19,16 @@ const invokeAIButton = defineStyle((props) => {
fontSize: 'sm',
border: 'none',
borderRadius: 'base',
bg: mode(`${c}.250`, `${c}.800`)(props),
color: mode('base.900', 'base.100')(props),
bg: `${c}.800`,
color: 'base.100',
_hover: {
bg: mode(`${c}.300`, `${c}.700`)(props),
bg: `${c}.700`,
},
_expanded: {
bg: mode(`${c}.250`, `${c}.750`)(props),
bg: `${c}.750`,
borderBottomRadius: 'none',
_hover: {
bg: mode(`${c}.300`, `${c}.700`)(props),
bg: `${c}.700`,
},
},
};
@ -38,7 +37,7 @@ const invokeAIButton = defineStyle((props) => {
const invokeAIPanel = defineStyle((props) => {
const { colorScheme: c } = props;
return {
bg: mode(`${c}.200`, `${c}.800`)(props),
bg: `${c}.800`,
borderRadius: 'base',
borderTopRadius: 'none',
p: 4,

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

@ -1,45 +1,44 @@
import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
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
const _disabled = {
bg: mode(`${c}.200`, `${c}.600`)(props),
color: mode(`${c}.700`, `${c}.100`)(props),
bg: `${c}.600`,
color: `${c}.100`,
svg: {
fill: mode(`${c}.700`, `${c}.100`)(props),
fill: `${c}.100`,
},
};
return {
bg: mode(`${c}.300`, `${c}.700`)(props),
color: mode(`${c}.800`, `${c}.100`)(props),
bg: `${c}.700`,
color: `${c}.100`,
borderRadius: 'base',
svg: {
fill: mode(`${c}.800`, `${c}.100`)(props),
fill: `${c}.100`,
},
_disabled,
_hover: {
bg: mode(`${c}.400`, `${c}.650`)(props),
color: mode(`black`, `${c}.50`)(props),
bg: `${c}.650`,
color: `${c}.50`,
svg: {
fill: mode(`black`, `${c}.50`)(props),
fill: `${c}.50`,
},
_disabled,
},
_checked: {
bg: mode('accent.200', 'accent.700')(props),
color: mode('accent.800', 'accent.100')(props),
bg: 'accent.700',
color: 'accent.100',
svg: {
fill: mode('accent.800', 'accent.100')(props),
fill: 'accent.100',
},
_disabled,
_hover: {
bg: mode('accent.300', 'accent.600')(props),
color: mode('accent.900', 'accent.50')(props),
bg: 'accent.600',
color: 'accent.50',
svg: {
fill: mode('accent.900', 'accent.50')(props),
fill: 'accent.50',
},
_disabled,
},

29
invokeai/frontend/web/src/theme/components/checkbox.ts
View File

@ -3,7 +3,6 @@ import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys);
@ -13,31 +12,31 @@ const invokeAIControl = defineStyle((props) => {
return {
_checked: {
bg: mode(`${c}.500`, `${c}.200`)(props),
borderColor: mode(`${c}.500`, `${c}.200`)(props),
color: mode('white', 'base.900')(props),
bg: `${c}.200`,
borderColor: `${c}.200`,
color: 'base.900',
_hover: {
bg: mode(`${c}.600`, `${c}.300`)(props),
borderColor: mode(`${c}.600`, `${c}.300`)(props),
bg: `${c}.300`,
borderColor: `${c}.300`,
},
_disabled: {
borderColor: mode('base.200', 'transparent')(props),
bg: mode('base.200', 'whiteAlpha.300')(props),
color: mode('base.500', 'whiteAlpha.500')(props),
borderColor: 'transparent',
bg: 'whiteAlpha.300',
color: 'whiteAlpha.500',
},
},
_indeterminate: {
bg: mode(`${c}.500`, `${c}.200`)(props),
borderColor: mode(`${c}.500`, `${c}.200`)(props),
color: mode('white', 'base.900')(props),
bg: `${c}.200`,
borderColor: `${c}.200`,
color: 'base.900',
},
_disabled: {
bg: mode('base.100', 'whiteAlpha.100')(props),
borderColor: mode('base.100', 'transparent')(props),
bg: 'whiteAlpha.100',
borderColor: 'transparent',
},
_focusVisible: {
@ -45,7 +44,7 @@ const invokeAIControl = defineStyle((props) => {
},
_invalid: {
borderColor: mode('red.500', 'red.300')(props),
borderColor: 'red.300',
},
};
});

5
invokeai/frontend/web/src/theme/components/formLabel.ts
View File

@ -1,7 +1,6 @@
import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const invokeAI = defineStyle((props) => {
const invokeAI = defineStyle((_props) => {
return {
fontSize: 'sm',
marginEnd: 0,
@ -13,7 +12,7 @@ const invokeAI = defineStyle((props) => {
_disabled: {
opacity: 0.4,
},
color: mode('base.600', 'base.300')(props),
color: 'base.300',
};
});

9
invokeai/frontend/web/src/theme/components/modal.ts
View File

@ -3,7 +3,6 @@ import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
@ -14,18 +13,18 @@ const invokeAIOverlay = defineStyle({
const invokeAIDialogContainer = defineStyle({});
const invokeAIDialog = defineStyle((props) => {
const invokeAIDialog = defineStyle((_props) => {
return {
bg: mode('base.300', 'base.850')(props),
bg: 'base.850',
maxH: '80vh',
};
});
const invokeAIHeader = defineStyle((props) => {
const invokeAIHeader = defineStyle((_props) => {
return {
fontWeight: '600',
fontSize: 'lg',
color: mode('base.700', 'base.200')(props),
color: 'base.200',
};
});

8
invokeai/frontend/web/src/theme/components/numberInput.ts
View File

@ -3,7 +3,7 @@ import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
import { getInputOutlineStyles } from '../util/getInputOutlineStyles';
const { defineMultiStyleConfig, definePartsStyle } =
@ -33,7 +33,7 @@ const invokeAIStepperGroup = defineStyle((_props) => {
};
});
const invokeAIStepper = defineStyle((props) => {
const invokeAIStepper = defineStyle((_props) => {
return {
border: 'none',
// expand arrow hitbox
@ -43,11 +43,11 @@ const invokeAIStepper = defineStyle((props) => {
my: 0,
svg: {
color: mode('base.600', 'base.300')(props),
color: 'base.300',
width: 2.5,
height: 2.5,
_hover: {
color: mode('base.900', 'base.50')(props),
color: 'base.50',
},
},
};

7
invokeai/frontend/web/src/theme/components/popover.ts
View File

@ -4,7 +4,6 @@ import {
defineStyle,
} from '@chakra-ui/styled-system';
import { cssVar } from '@chakra-ui/theme-tools';
import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
@ -13,7 +12,7 @@ const $popperBg = cssVar('popper-bg');
const $arrowBg = cssVar('popper-arrow-bg');
const $arrowShadowColor = cssVar('popper-arrow-shadow-color');
const invokeAIContent = defineStyle((props) => {
const invokeAIContent = defineStyle((_props) => {
return {
[$arrowBg.variable]: `colors.base.800`,
[$popperBg.variable]: `colors.base.800`,
@ -23,8 +22,8 @@ const invokeAIContent = defineStyle((props) => {
p: 4,
borderWidth: '2px',
borderStyle: 'solid',
borderColor: mode('base.500', 'base.600')(props),
bg: mode('base.200', 'base.800')(props),
borderColor: 'base.600',
bg: 'base.800',
};
});

15
invokeai/frontend/web/src/theme/components/progress.ts
View File

@ -3,25 +3,22 @@ import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
const invokeAIFilledTrack = defineStyle((props) => ({
bg: mode('accent.400', 'accent.600')(props),
const invokeAIFilledTrack = defineStyle((_props) => ({
bg: 'accent.600',
transition: 'width 0.2s ease-in-out',
_indeterminate: {
bgGradient: `linear(to-r, transparent 0%, ${mode(
'accent.400',
'accent.600'
)(props)} 50%, transparent 100%);`,
bgGradient:
'linear(to-r, transparent 0%, accent.600 50%, transparent 100%);',
},
}));
const invokeAITrack = defineStyle((props) => {
const invokeAITrack = defineStyle((_props) => {
return {
bg: mode('base.300', 'base.800')(props),
bg: 'base.800',
};
});

5
invokeai/frontend/web/src/theme/components/select.ts
View File

@ -1,14 +1,13 @@
import { selectAnatomy as parts } from '@chakra-ui/anatomy';
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
import { getInputOutlineStyles } from '../util/getInputOutlineStyles';
import { mode } from '@chakra-ui/theme-tools';
const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys);
const invokeAIIcon = defineStyle((props) => {
const invokeAIIcon = defineStyle((_props) => {
return {
color: mode('base.600', 'base.300')(props),
color: 'base.300',
};
});

11
invokeai/frontend/web/src/theme/components/slider.ts
View File

@ -1,13 +1,12 @@
import { sliderAnatomy as parts } from '@chakra-ui/anatomy';
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
import { mode } from '@chakra-ui/theme-tools';
const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys);
const invokeAITrack = defineStyle((props) => {
const invokeAITrack = defineStyle((_props) => {
return {
bg: mode('base.300', 'base.400')(props),
bg: 'base.400',
h: 1.5,
};
});
@ -15,7 +14,7 @@ const invokeAITrack = defineStyle((props) => {
const invokeAIFilledTrack = defineStyle((props) => {
const { colorScheme: c } = props;
return {
bg: mode(`${c}.400`, `${c}.600`)(props),
bg: `${c}.600`,
h: 1.5,
};
});
@ -27,11 +26,11 @@ const invokeAIThumb = defineStyle((_props) => {
};
});
const invokeAIMark = defineStyle((props) => {
const invokeAIMark = defineStyle((_props) => {
return {
fontSize: 'xs',
fontWeight: '500',
color: mode('base.800', 'base.200')(props),
color: 'base.200',
mt: 2,
insetInlineStart: 'unset',
};

7
invokeai/frontend/web/src/theme/components/switch.ts
View File

@ -3,7 +3,6 @@ import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
@ -12,13 +11,13 @@ const invokeAITrack = defineStyle((props) => {
const { colorScheme: c } = props;
return {
bg: mode(`base.400`, `base.600`)(props),
bg: 'base.600',
_focusVisible: {
boxShadow: 'none',
},
_checked: {
bg: mode(`${c}.400`, `${c}.600`)(props),
bg: `${c}.600`,
},
};
});
@ -27,7 +26,7 @@ const invokeAIThumb = defineStyle((props) => {
const { colorScheme: c } = props;
return {
bg: mode(`${c}.50`, `${c}.50`)(props),
bg: `${c}.50`,
};
});

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

@ -3,7 +3,6 @@ import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
@ -17,26 +16,26 @@ const invokeAIRoot = defineStyle((_props) => {
const invokeAITab = defineStyle((_props) => ({}));
const invokeAITablist = defineStyle((props) => ({
const invokeAITablist = defineStyle((_props) => ({
display: 'flex',
flexDirection: 'column',
gap: 1,
color: mode('base.500', 'base.700')(props),
color: 'base.700',
button: {
fontSize: 'sm',
padding: 2,
borderRadius: 'base',
_selected: {
bg: mode('accent.200', 'accent.700')(props),
color: mode('accent.800', 'accent.100')(props),
bg: 'accent.700',
color: 'accent.100',
_hover: {
bg: mode('accent.300', 'accent.600')(props),
color: mode('accent.900', 'accent.50')(props),
bg: 'accent.600',
color: 'accent.50',
},
},
_hover: {
bg: mode('base.300', 'base.600')(props),
color: mode('base.900', 'base.50')(props),
bg: 'base.600',
color: 'base.50',
},
},
}));

5
invokeai/frontend/web/src/theme/components/text.ts
View File

@ -1,8 +1,7 @@
import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
import { mode } from '@chakra-ui/theme-tools';
const subtext = defineStyle((props) => ({
color: mode('base.700', 'base.400')(props),
const subtext = defineStyle((_props) => ({
color: 'base.400',
}));
export const textTheme = defineStyleConfig({

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

@ -1,6 +1,6 @@
import { ThemeOverride } from '@chakra-ui/react';
import type { StyleFunctionProps } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
import { invokeAIThemeColors } from './colors/invokeAI';
import { accordionTheme } from './components/accordion';
import { buttonTheme } from './components/button';
@ -22,15 +22,13 @@ import { textareaTheme } from './components/textarea';
export const theme: ThemeOverride = {
config: {
initialColorMode: 'dark',
useSystemColorMode: false,
cssVarPrefix: 'invokeai',
},
styles: {
global: (props: StyleFunctionProps) => ({
global: (_props: StyleFunctionProps) => ({
body: {
bg: mode('base.100', 'base.900')(props),
color: mode('base.800', 'base.50')(props),
bg: 'base.900',
color: 'base.50',
overflow: 'hidden',
},
...scrollbar,

30
invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts
View File

@ -1,40 +1,40 @@
import { mode, StyleFunctionProps } from '@chakra-ui/theme-tools';
import { StyleFunctionProps } from '@chakra-ui/theme-tools';
export const getInputOutlineStyles = (props: StyleFunctionProps) => ({
export const getInputOutlineStyles = (_props: StyleFunctionProps) => ({
outline: 'none',
borderWidth: 2,
borderStyle: 'solid',
borderColor: mode('base.300', 'base.800')(props),
bg: mode('base.200', 'base.900')(props),
borderColor: 'base.800',
bg: 'base.900',
borderRadius: 'base',
color: mode('base.900', 'base.100')(props),
color: 'base.100',
boxShadow: 'none',
_hover: {
borderColor: mode('base.500', 'base.600')(props),
borderColor: 'base.600',
},
_focus: {
borderColor: mode('accent.600', 'accent.700')(props),
borderColor: 'accent.700',
boxShadow: 'none',
_hover: {
borderColor: mode('accent.700', 'accent.600')(props),
borderColor: 'accent.600',
},
},
_invalid: {
borderColor: mode('error.300', 'error.700')(props),
borderColor: 'error.700',
boxShadow: 'none',
_hover: {
borderColor: mode('error.500', 'error.600')(props),
borderColor: 'error.600',
},
},
_disabled: {
borderColor: mode('base.300', 'base.700')(props),
bg: mode('base.400', 'base.700')(props),
color: mode('base.600', 'base.400')(props),
borderColor: 'base.700',
bg: 'base.700',
color: 'base.400',
_hover: {
borderColor: mode('base.300', 'base.700')(props),
borderColor: 'base.700',
},
},
_placeholder: {
color: mode('base.600', 'base.400')(props),
color: 'base.400',
},
});