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, createMultiStyleConfigHelpers,
defineStyle, defineStyle,
} from '@chakra-ui/styled-system'; } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { definePartsStyle, defineMultiStyleConfig } = const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys); createMultiStyleConfigHelpers(parts.keys);
@ -20,16 +19,16 @@ const invokeAIButton = defineStyle((props) => {
fontSize: 'sm', fontSize: 'sm',
border: 'none', border: 'none',
borderRadius: 'base', borderRadius: 'base',
bg: mode(`${c}.250`, `${c}.800`)(props), bg: `${c}.800`,
color: mode('base.900', 'base.100')(props), color: 'base.100',
_hover: { _hover: {
bg: mode(`${c}.300`, `${c}.700`)(props), bg: `${c}.700`,
}, },
_expanded: { _expanded: {
bg: mode(`${c}.250`, `${c}.750`)(props), bg: `${c}.750`,
borderBottomRadius: 'none', borderBottomRadius: 'none',
_hover: { _hover: {
bg: mode(`${c}.300`, `${c}.700`)(props), bg: `${c}.700`,
}, },
}, },
}; };
@ -38,7 +37,7 @@ const invokeAIButton = defineStyle((props) => {
const invokeAIPanel = defineStyle((props) => { const invokeAIPanel = defineStyle((props) => {
const { colorScheme: c } = props; const { colorScheme: c } = props;
return { return {
bg: mode(`${c}.200`, `${c}.800`)(props), bg: `${c}.800`,
borderRadius: 'base', borderRadius: 'base',
borderTopRadius: 'none', borderTopRadius: 'none',
p: 4, 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 { defineStyle, defineStyleConfig } from '@chakra-ui/react';
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
const _disabled = { const _disabled = {
bg: mode(`${c}.200`, `${c}.600`)(props), bg: `${c}.600`,
color: mode(`${c}.700`, `${c}.100`)(props), color: `${c}.100`,
svg: { svg: {
fill: mode(`${c}.700`, `${c}.100`)(props), fill: `${c}.100`,
}, },
}; };
return { return {
bg: mode(`${c}.300`, `${c}.700`)(props), bg: `${c}.700`,
color: mode(`${c}.800`, `${c}.100`)(props), color: `${c}.100`,
borderRadius: 'base', borderRadius: 'base',
svg: { svg: {
fill: mode(`${c}.800`, `${c}.100`)(props), fill: `${c}.100`,
}, },
_disabled, _disabled,
_hover: { _hover: {
bg: mode(`${c}.400`, `${c}.650`)(props), bg: `${c}.650`,
color: mode(`black`, `${c}.50`)(props), color: `${c}.50`,
svg: { svg: {
fill: mode(`black`, `${c}.50`)(props), fill: `${c}.50`,
}, },
_disabled, _disabled,
}, },
_checked: { _checked: {
bg: mode('accent.200', 'accent.700')(props), bg: 'accent.700',
color: mode('accent.800', 'accent.100')(props), color: 'accent.100',
svg: { svg: {
fill: mode('accent.800', 'accent.100')(props), fill: 'accent.100',
}, },
_disabled, _disabled,
_hover: { _hover: {
bg: mode('accent.300', 'accent.600')(props), bg: 'accent.600',
color: mode('accent.900', 'accent.50')(props), color: 'accent.50',
svg: { svg: {
fill: mode('accent.900', 'accent.50')(props), fill: 'accent.50',
}, },
_disabled, _disabled,
}, },

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

@ -3,7 +3,6 @@ import {
createMultiStyleConfigHelpers, createMultiStyleConfigHelpers,
defineStyle, defineStyle,
} from '@chakra-ui/styled-system'; } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { definePartsStyle, defineMultiStyleConfig } = const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys); createMultiStyleConfigHelpers(parts.keys);
@ -13,31 +12,31 @@ const invokeAIControl = defineStyle((props) => {
return { return {
_checked: { _checked: {
bg: mode(`${c}.500`, `${c}.200`)(props), bg: `${c}.200`,
borderColor: mode(`${c}.500`, `${c}.200`)(props), borderColor: `${c}.200`,
color: mode('white', 'base.900')(props), color: 'base.900',
_hover: { _hover: {
bg: mode(`${c}.600`, `${c}.300`)(props), bg: `${c}.300`,
borderColor: mode(`${c}.600`, `${c}.300`)(props), borderColor: `${c}.300`,
}, },
_disabled: { _disabled: {
borderColor: mode('base.200', 'transparent')(props), borderColor: 'transparent',
bg: mode('base.200', 'whiteAlpha.300')(props), bg: 'whiteAlpha.300',
color: mode('base.500', 'whiteAlpha.500')(props), color: 'whiteAlpha.500',
}, },
}, },
_indeterminate: { _indeterminate: {
bg: mode(`${c}.500`, `${c}.200`)(props), bg: `${c}.200`,
borderColor: mode(`${c}.500`, `${c}.200`)(props), borderColor: `${c}.200`,
color: mode('white', 'base.900')(props), color: 'base.900',
}, },
_disabled: { _disabled: {
bg: mode('base.100', 'whiteAlpha.100')(props), bg: 'whiteAlpha.100',
borderColor: mode('base.100', 'transparent')(props), borderColor: 'transparent',
}, },
_focusVisible: { _focusVisible: {
@ -45,7 +44,7 @@ const invokeAIControl = defineStyle((props) => {
}, },
_invalid: { _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 { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const invokeAI = defineStyle((props) => { const invokeAI = defineStyle((_props) => {
return { return {
fontSize: 'sm', fontSize: 'sm',
marginEnd: 0, marginEnd: 0,
@ -13,7 +12,7 @@ const invokeAI = defineStyle((props) => {
_disabled: { _disabled: {
opacity: 0.4, 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, createMultiStyleConfigHelpers,
defineStyle, defineStyle,
} from '@chakra-ui/styled-system'; } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } = const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys); createMultiStyleConfigHelpers(parts.keys);
@ -14,18 +13,18 @@ const invokeAIOverlay = defineStyle({
const invokeAIDialogContainer = defineStyle({}); const invokeAIDialogContainer = defineStyle({});
const invokeAIDialog = defineStyle((props) => { const invokeAIDialog = defineStyle((_props) => {
return { return {
bg: mode('base.300', 'base.850')(props), bg: 'base.850',
maxH: '80vh', maxH: '80vh',
}; };
}); });
const invokeAIHeader = defineStyle((props) => { const invokeAIHeader = defineStyle((_props) => {
return { return {
fontWeight: '600', fontWeight: '600',
fontSize: 'lg', 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, createMultiStyleConfigHelpers,
defineStyle, defineStyle,
} from '@chakra-ui/styled-system'; } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
import { getInputOutlineStyles } from '../util/getInputOutlineStyles'; import { getInputOutlineStyles } from '../util/getInputOutlineStyles';
const { defineMultiStyleConfig, definePartsStyle } = const { defineMultiStyleConfig, definePartsStyle } =
@ -33,7 +33,7 @@ const invokeAIStepperGroup = defineStyle((_props) => {
}; };
}); });
const invokeAIStepper = defineStyle((props) => { const invokeAIStepper = defineStyle((_props) => {
return { return {
border: 'none', border: 'none',
// expand arrow hitbox // expand arrow hitbox
@ -43,11 +43,11 @@ const invokeAIStepper = defineStyle((props) => {
my: 0, my: 0,
svg: { svg: {
color: mode('base.600', 'base.300')(props), color: 'base.300',
width: 2.5, width: 2.5,
height: 2.5, height: 2.5,
_hover: { _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, defineStyle,
} from '@chakra-ui/styled-system'; } from '@chakra-ui/styled-system';
import { cssVar } from '@chakra-ui/theme-tools'; import { cssVar } from '@chakra-ui/theme-tools';
import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } = const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys); createMultiStyleConfigHelpers(parts.keys);
@ -13,7 +12,7 @@ const $popperBg = cssVar('popper-bg');
const $arrowBg = cssVar('popper-arrow-bg'); const $arrowBg = cssVar('popper-arrow-bg');
const $arrowShadowColor = cssVar('popper-arrow-shadow-color'); const $arrowShadowColor = cssVar('popper-arrow-shadow-color');
const invokeAIContent = defineStyle((props) => { const invokeAIContent = defineStyle((_props) => {
return { return {
[$arrowBg.variable]: `colors.base.800`, [$arrowBg.variable]: `colors.base.800`,
[$popperBg.variable]: `colors.base.800`, [$popperBg.variable]: `colors.base.800`,
@ -23,8 +22,8 @@ const invokeAIContent = defineStyle((props) => {
p: 4, p: 4,
borderWidth: '2px', borderWidth: '2px',
borderStyle: 'solid', borderStyle: 'solid',
borderColor: mode('base.500', 'base.600')(props), borderColor: 'base.600',
bg: mode('base.200', 'base.800')(props), bg: 'base.800',
}; };
}); });

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

@ -3,25 +3,22 @@ import {
createMultiStyleConfigHelpers, createMultiStyleConfigHelpers,
defineStyle, defineStyle,
} from '@chakra-ui/styled-system'; } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } = const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys); createMultiStyleConfigHelpers(parts.keys);
const invokeAIFilledTrack = defineStyle((props) => ({ const invokeAIFilledTrack = defineStyle((_props) => ({
bg: mode('accent.400', 'accent.600')(props), bg: 'accent.600',
transition: 'width 0.2s ease-in-out', transition: 'width 0.2s ease-in-out',
_indeterminate: { _indeterminate: {
bgGradient: `linear(to-r, transparent 0%, ${mode( bgGradient:
'accent.400', 'linear(to-r, transparent 0%, accent.600 50%, transparent 100%);',
'accent.600'
)(props)} 50%, transparent 100%);`,
}, },
})); }));
const invokeAITrack = defineStyle((props) => { const invokeAITrack = defineStyle((_props) => {
return { 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 { selectAnatomy as parts } from '@chakra-ui/anatomy';
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'; import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
import { getInputOutlineStyles } from '../util/getInputOutlineStyles'; import { getInputOutlineStyles } from '../util/getInputOutlineStyles';
import { mode } from '@chakra-ui/theme-tools';
const { definePartsStyle, defineMultiStyleConfig } = const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys); createMultiStyleConfigHelpers(parts.keys);
const invokeAIIcon = defineStyle((props) => { const invokeAIIcon = defineStyle((_props) => {
return { 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 { sliderAnatomy as parts } from '@chakra-ui/anatomy';
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'; import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
import { mode } from '@chakra-ui/theme-tools';
const { definePartsStyle, defineMultiStyleConfig } = const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(parts.keys); createMultiStyleConfigHelpers(parts.keys);
const invokeAITrack = defineStyle((props) => { const invokeAITrack = defineStyle((_props) => {
return { return {
bg: mode('base.300', 'base.400')(props), bg: 'base.400',
h: 1.5, h: 1.5,
}; };
}); });
@ -15,7 +14,7 @@ const invokeAITrack = defineStyle((props) => {
const invokeAIFilledTrack = defineStyle((props) => { const invokeAIFilledTrack = defineStyle((props) => {
const { colorScheme: c } = props; const { colorScheme: c } = props;
return { return {
bg: mode(`${c}.400`, `${c}.600`)(props), bg: `${c}.600`,
h: 1.5, h: 1.5,
}; };
}); });
@ -27,11 +26,11 @@ const invokeAIThumb = defineStyle((_props) => {
}; };
}); });
const invokeAIMark = defineStyle((props) => { const invokeAIMark = defineStyle((_props) => {
return { return {
fontSize: 'xs', fontSize: 'xs',
fontWeight: '500', fontWeight: '500',
color: mode('base.800', 'base.200')(props), color: 'base.200',
mt: 2, mt: 2,
insetInlineStart: 'unset', insetInlineStart: 'unset',
}; };

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

@ -3,7 +3,6 @@ import {
createMultiStyleConfigHelpers, createMultiStyleConfigHelpers,
defineStyle, defineStyle,
} from '@chakra-ui/styled-system'; } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } = const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys); createMultiStyleConfigHelpers(parts.keys);
@ -12,13 +11,13 @@ const invokeAITrack = defineStyle((props) => {
const { colorScheme: c } = props; const { colorScheme: c } = props;
return { return {
bg: mode(`base.400`, `base.600`)(props), bg: 'base.600',
_focusVisible: { _focusVisible: {
boxShadow: 'none', boxShadow: 'none',
}, },
_checked: { _checked: {
bg: mode(`${c}.400`, `${c}.600`)(props), bg: `${c}.600`,
}, },
}; };
}); });
@ -27,7 +26,7 @@ const invokeAIThumb = defineStyle((props) => {
const { colorScheme: c } = props; const { colorScheme: c } = props;
return { 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, createMultiStyleConfigHelpers,
defineStyle, defineStyle,
} from '@chakra-ui/styled-system'; } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } = const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys); createMultiStyleConfigHelpers(parts.keys);
@ -17,26 +16,26 @@ const invokeAIRoot = defineStyle((_props) => {
const invokeAITab = defineStyle((_props) => ({})); const invokeAITab = defineStyle((_props) => ({}));
const invokeAITablist = defineStyle((props) => ({ const invokeAITablist = defineStyle((_props) => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: 1, gap: 1,
color: mode('base.500', 'base.700')(props), color: 'base.700',
button: { button: {
fontSize: 'sm', fontSize: 'sm',
padding: 2, padding: 2,
borderRadius: 'base', borderRadius: 'base',
_selected: { _selected: {
bg: mode('accent.200', 'accent.700')(props), bg: 'accent.700',
color: mode('accent.800', 'accent.100')(props), color: 'accent.100',
_hover: { _hover: {
bg: mode('accent.300', 'accent.600')(props), bg: 'accent.600',
color: mode('accent.900', 'accent.50')(props), color: 'accent.50',
}, },
}, },
_hover: { _hover: {
bg: mode('base.300', 'base.600')(props), bg: 'base.600',
color: mode('base.900', 'base.50')(props), 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 { defineStyle, defineStyleConfig } from '@chakra-ui/react';
import { mode } from '@chakra-ui/theme-tools';
const subtext = defineStyle((props) => ({ const subtext = defineStyle((_props) => ({
color: mode('base.700', 'base.400')(props), color: 'base.400',
})); }));
export const textTheme = defineStyleConfig({ 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 { ThemeOverride } from '@chakra-ui/react';
import type { StyleFunctionProps } from '@chakra-ui/styled-system'; import type { StyleFunctionProps } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
import { invokeAIThemeColors } from './colors/invokeAI'; import { invokeAIThemeColors } from './colors/invokeAI';
import { accordionTheme } from './components/accordion'; import { accordionTheme } from './components/accordion';
import { buttonTheme } from './components/button'; import { buttonTheme } from './components/button';
@ -22,15 +22,13 @@ import { textareaTheme } from './components/textarea';
export const theme: ThemeOverride = { export const theme: ThemeOverride = {
config: { config: {
initialColorMode: 'dark',
useSystemColorMode: false,
cssVarPrefix: 'invokeai', cssVarPrefix: 'invokeai',
}, },
styles: { styles: {
global: (props: StyleFunctionProps) => ({ global: (_props: StyleFunctionProps) => ({
body: { body: {
bg: mode('base.100', 'base.900')(props), bg: 'base.900',
color: mode('base.800', 'base.50')(props), color: 'base.50',
overflow: 'hidden', overflow: 'hidden',
}, },
...scrollbar, ...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', outline: 'none',
borderWidth: 2, borderWidth: 2,
borderStyle: 'solid', borderStyle: 'solid',
borderColor: mode('base.300', 'base.800')(props), borderColor: 'base.800',
bg: mode('base.200', 'base.900')(props), bg: 'base.900',
borderRadius: 'base', borderRadius: 'base',
color: mode('base.900', 'base.100')(props), color: 'base.100',
boxShadow: 'none', boxShadow: 'none',
_hover: { _hover: {
borderColor: mode('base.500', 'base.600')(props), borderColor: 'base.600',
}, },
_focus: { _focus: {
borderColor: mode('accent.600', 'accent.700')(props), borderColor: 'accent.700',
boxShadow: 'none', boxShadow: 'none',
_hover: { _hover: {
borderColor: mode('accent.700', 'accent.600')(props), borderColor: 'accent.600',
}, },
}, },
_invalid: { _invalid: {
borderColor: mode('error.300', 'error.700')(props), borderColor: 'error.700',
boxShadow: 'none', boxShadow: 'none',
_hover: { _hover: {
borderColor: mode('error.500', 'error.600')(props), borderColor: 'error.600',
}, },
}, },
_disabled: { _disabled: {
borderColor: mode('base.300', 'base.700')(props), borderColor: 'base.700',
bg: mode('base.400', 'base.700')(props), bg: 'base.700',
color: mode('base.600', 'base.400')(props), color: 'base.400',
_hover: { _hover: {
borderColor: mode('base.300', 'base.700')(props), borderColor: 'base.700',
}, },
}, },
_placeholder: { _placeholder: {
color: mode('base.600', 'base.400')(props), color: 'base.400',
}, },
}); });