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

chore: More colors to own files + small color tweaks

Browse Source
This commit is contained in:
blessedcoolant 2023-06-30 06:04:42 +12:00
parent 032c7e68d0
commit 6e917dcbb0
3 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
invokeai/frontend/web/src/theme/colors/colors.ts Normal file
View File

@ -0,0 +1,24 @@
import { InvokeAIThemeColors } from 'theme/themeTypes';
import { generateColorPalette } from 'theme/util/generateColorPalette';
const BASE = { H: 220, S: 16 };
const ACCENT = { H: 250, S: 52 };
const WORKING = { H: 47, S: 50 };
const WARNING = { H: 28, S: 50 };
const OK = { H: 113, S: 50 };
const ERROR = { H: 0, S: 50 };
export const InvokeAIColors: InvokeAIThemeColors = {
base: generateColorPalette(BASE.H, BASE.S),
baseAlpha: generateColorPalette(BASE.H, BASE.S, true),
accent: generateColorPalette(ACCENT.H, ACCENT.S),
accentAlpha: generateColorPalette(ACCENT.H, ACCENT.S, true),
working: generateColorPalette(WORKING.H, WORKING.S),
workingAlpha: generateColorPalette(WORKING.H, WORKING.S, true),
warning: generateColorPalette(WARNING.H, WARNING.S),
warningAlpha: generateColorPalette(WARNING.H, WARNING.S, true),
ok: generateColorPalette(OK.H, OK.S),
okAlpha: generateColorPalette(OK.H, OK.S, true),
error: generateColorPalette(ERROR.H, ERROR.S),
errorAlpha: generateColorPalette(ERROR.H, ERROR.S, true),
};

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

@ -1,5 +1,6 @@
import { ThemeOverride } from '@chakra-ui/react'; import { ThemeOverride } from '@chakra-ui/react';
import { InvokeAIColors } from './colors/colors';
import { accordionTheme } from './components/accordion'; import { accordionTheme } from './components/accordion';
import { buttonTheme } from './components/button'; import { buttonTheme } from './components/button';
import { checkboxTheme } from './components/checkbox'; import { checkboxTheme } from './components/checkbox';
@ -10,7 +11,7 @@ import { modalTheme } from './components/modal';
import { numberInputTheme } from './components/numberInput'; import { numberInputTheme } from './components/numberInput';
import { popoverTheme } from './components/popover'; import { popoverTheme } from './components/popover';
import { progressTheme } from './components/progress'; import { progressTheme } from './components/progress';
import { no_scrollbar, scrollbar as _scrollbar } from './components/scrollbar'; import { no_scrollbar } from './components/scrollbar';
import { selectTheme } from './components/select'; import { selectTheme } from './components/select';
import { sliderTheme } from './components/slider'; import { sliderTheme } from './components/slider';
import { switchTheme } from './components/switch'; import { switchTheme } from './components/switch';
@ -18,14 +19,6 @@ import { tabsTheme } from './components/tabs';
import { textTheme } from './components/text'; import { textTheme } from './components/text';
import { textareaTheme } from './components/textarea'; import { textareaTheme } from './components/textarea';
import { tooltipTheme } from './components/tooltip'; import { tooltipTheme } from './components/tooltip';
import { generateColorPalette } from './util/generateColorPalette';
const BASE = { H: 240, S: 8 };
const ACCENT = { H: 260, S: 52 };
const WORKING = { H: 47, S: 50 };
const WARNING = { H: 28, S: 50 };
const OK = { H: 113, S: 50 };
const ERROR = { H: 0, S: 50 };
export const theme: ThemeOverride = { export const theme: ThemeOverride = {
config: { config: {
@ -77,20 +70,7 @@ export const theme: ThemeOverride = {
}, },
nodeSelectedOutline: `0 0 0 2px var(--invokeai-colors-base-500)`, nodeSelectedOutline: `0 0 0 2px var(--invokeai-colors-base-500)`,
}, },
colors: { colors: InvokeAIColors,
base: generateColorPalette(BASE.H, BASE.S),
baseAlpha: generateColorPalette(BASE.H, BASE.S, true),
accent: generateColorPalette(ACCENT.H, ACCENT.S),
accentAlpha: generateColorPalette(ACCENT.H, ACCENT.S, true),
working: generateColorPalette(WORKING.H, WORKING.S),
workingAlpha: generateColorPalette(WORKING.H, WORKING.S, true),
warning: generateColorPalette(WARNING.H, WARNING.S),
warningAlpha: generateColorPalette(WARNING.H, WARNING.S, true),
ok: generateColorPalette(OK.H, OK.S),
okAlpha: generateColorPalette(OK.H, OK.S, true),
error: generateColorPalette(ERROR.H, ERROR.S),
errorAlpha: generateColorPalette(ERROR.H, ERROR.S, true),
},
components: { components: {
Button: buttonTheme, // Button and IconButton Button: buttonTheme, // Button and IconButton
Input: inputTheme, Input: inputTheme,

1
invokeai/frontend/web/src/theme/themeTypes.d.ts vendored
View File

@ -11,7 +11,6 @@ export type InvokeAIThemeColors = {
okAlpha: Partial<InvokeAIPaletteSteps>; okAlpha: Partial<InvokeAIPaletteSteps>;
error: Partial<InvokeAIPaletteSteps>; error: Partial<InvokeAIPaletteSteps>;
errorAlpha: Partial<InvokeAIPaletteSteps>; errorAlpha: Partial<InvokeAIPaletteSteps>;
gridLineColor: string;
}; };
export type InvokeAIPaletteSteps = { export type InvokeAIPaletteSteps = {