From d843fb078a3dff0b470fbb484a3801e5d481ee08 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Mon, 6 Mar 2023 20:40:59 +1100 Subject: [PATCH] feat(ui): remove references to dark mode --- .../web/src/theme/components/accordion.ts | 13 ++++---- .../web/src/theme/components/button.ts | 31 +++++++++---------- .../web/src/theme/components/checkbox.ts | 29 +++++++++-------- .../web/src/theme/components/formLabel.ts | 5 ++- .../web/src/theme/components/modal.ts | 9 +++--- .../web/src/theme/components/numberInput.ts | 8 ++--- .../web/src/theme/components/popover.ts | 7 ++--- .../web/src/theme/components/progress.ts | 15 ++++----- .../web/src/theme/components/select.ts | 5 ++- .../web/src/theme/components/slider.ts | 11 +++---- .../web/src/theme/components/switch.ts | 7 ++--- .../frontend/web/src/theme/components/tabs.ts | 17 +++++----- .../frontend/web/src/theme/components/text.ts | 5 ++- invokeai/frontend/web/src/theme/theme.ts | 10 +++--- .../src/theme/util/getInputOutlineStyles.ts | 30 +++++++++--------- 15 files changed, 93 insertions(+), 109 deletions(-) diff --git a/invokeai/frontend/web/src/theme/components/accordion.ts b/invokeai/frontend/web/src/theme/components/accordion.ts index dfea0aad74..46a0c69fd7 100644 --- a/invokeai/frontend/web/src/theme/components/accordion.ts +++ b/invokeai/frontend/web/src/theme/components/accordion.ts @@ -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, diff --git a/invokeai/frontend/web/src/theme/components/button.ts b/invokeai/frontend/web/src/theme/components/button.ts index a79a3d356f..879b3dba96 100644 --- a/invokeai/frontend/web/src/theme/components/button.ts +++ b/invokeai/frontend/web/src/theme/components/button.ts @@ -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, }, diff --git a/invokeai/frontend/web/src/theme/components/checkbox.ts b/invokeai/frontend/web/src/theme/components/checkbox.ts index 5bdc8a1a66..ec61706715 100644 --- a/invokeai/frontend/web/src/theme/components/checkbox.ts +++ b/invokeai/frontend/web/src/theme/components/checkbox.ts @@ -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', }, }; }); diff --git a/invokeai/frontend/web/src/theme/components/formLabel.ts b/invokeai/frontend/web/src/theme/components/formLabel.ts index d49fd0a36d..0ff7c6cdea 100644 --- a/invokeai/frontend/web/src/theme/components/formLabel.ts +++ b/invokeai/frontend/web/src/theme/components/formLabel.ts @@ -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', }; }); diff --git a/invokeai/frontend/web/src/theme/components/modal.ts b/invokeai/frontend/web/src/theme/components/modal.ts index 9e422c7704..1f6900278a 100644 --- a/invokeai/frontend/web/src/theme/components/modal.ts +++ b/invokeai/frontend/web/src/theme/components/modal.ts @@ -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', }; }); diff --git a/invokeai/frontend/web/src/theme/components/numberInput.ts b/invokeai/frontend/web/src/theme/components/numberInput.ts index 9d7e773701..935f21077b 100644 --- a/invokeai/frontend/web/src/theme/components/numberInput.ts +++ b/invokeai/frontend/web/src/theme/components/numberInput.ts @@ -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', }, }, }; diff --git a/invokeai/frontend/web/src/theme/components/popover.ts b/invokeai/frontend/web/src/theme/components/popover.ts index d6b5d316ac..449f1d926c 100644 --- a/invokeai/frontend/web/src/theme/components/popover.ts +++ b/invokeai/frontend/web/src/theme/components/popover.ts @@ -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', }; }); diff --git a/invokeai/frontend/web/src/theme/components/progress.ts b/invokeai/frontend/web/src/theme/components/progress.ts index 4d48830e06..8a66a6af7e 100644 --- a/invokeai/frontend/web/src/theme/components/progress.ts +++ b/invokeai/frontend/web/src/theme/components/progress.ts @@ -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', }; }); diff --git a/invokeai/frontend/web/src/theme/components/select.ts b/invokeai/frontend/web/src/theme/components/select.ts index bbb438b4d0..2fad17e1b4 100644 --- a/invokeai/frontend/web/src/theme/components/select.ts +++ b/invokeai/frontend/web/src/theme/components/select.ts @@ -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', }; }); diff --git a/invokeai/frontend/web/src/theme/components/slider.ts b/invokeai/frontend/web/src/theme/components/slider.ts index 1afb188712..adb874b781 100644 --- a/invokeai/frontend/web/src/theme/components/slider.ts +++ b/invokeai/frontend/web/src/theme/components/slider.ts @@ -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', }; diff --git a/invokeai/frontend/web/src/theme/components/switch.ts b/invokeai/frontend/web/src/theme/components/switch.ts index e39b4257b2..6f13888442 100644 --- a/invokeai/frontend/web/src/theme/components/switch.ts +++ b/invokeai/frontend/web/src/theme/components/switch.ts @@ -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`, }; }); diff --git a/invokeai/frontend/web/src/theme/components/tabs.ts b/invokeai/frontend/web/src/theme/components/tabs.ts index 9cd991d8bf..5eb1a36013 100644 --- a/invokeai/frontend/web/src/theme/components/tabs.ts +++ b/invokeai/frontend/web/src/theme/components/tabs.ts @@ -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', }, }, })); diff --git a/invokeai/frontend/web/src/theme/components/text.ts b/invokeai/frontend/web/src/theme/components/text.ts index a485289366..88f5f23f7e 100644 --- a/invokeai/frontend/web/src/theme/components/text.ts +++ b/invokeai/frontend/web/src/theme/components/text.ts @@ -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({ diff --git a/invokeai/frontend/web/src/theme/theme.ts b/invokeai/frontend/web/src/theme/theme.ts index 40df156cdb..6cb658564c 100644 --- a/invokeai/frontend/web/src/theme/theme.ts +++ b/invokeai/frontend/web/src/theme/theme.ts @@ -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, diff --git a/invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts b/invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts index 9550df5863..85e9d109c5 100644 --- a/invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts +++ b/invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts @@ -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', }, });