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): Add ThemeTypes & Move Grid Line Color

Browse Source
This commit is contained in:
blessedcoolant 2023-03-10 01:00:08 +13:00 committed by psychedelicious
parent d81088dff7
commit d2fbc9f5e3
7 changed files with 59 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
View File

@ -1,5 +1,6 @@
// Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/
import { useToken } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
@ -22,13 +23,6 @@ const selector = createSelector(
}
);
const gridLinesColor = {
dark: 'rgba(255, 255, 255, 0.2)',
green: 'rgba(255, 255, 255, 0.2)',
light: 'rgba(0, 0, 0, 0.2)',
ocean: 'rgba(136, 148, 184, 0.2)',
};
const IAICanvasGrid = () => {
const currentTheme = useAppSelector(
(state: RootState) => state.ui.currentTheme
@ -37,6 +31,8 @@ const IAICanvasGrid = () => {
useAppSelector(selector);
const [gridLines, setGridLines] = useState<ReactNode[]>([]);
const [gridLineColor] = useToken('colors', ['gridLineColor']);
const unscale = useCallback(
(value: number) => {
return value / stageScale;
@ -45,9 +41,6 @@ const IAICanvasGrid = () => {
);
useLayoutEffect(() => {
const gridLineColor =
gridLinesColor[currentTheme as keyof typeof gridLinesColor];
const { width, height } = stageDimensions;
const { x, y } = stageCoordinates;
@ -112,7 +105,14 @@ const IAICanvasGrid = () => {
));
setGridLines(xLines.concat(yLines));
}, [stageScale, stageCoordinates, stageDimensions, currentTheme, unscale]);
}, [
stageScale,
stageCoordinates,
stageDimensions,
currentTheme,
unscale,
gridLineColor,
]);
return <Group>{gridLines}</Group>;
};

4
invokeai/frontend/web/src/theme/colors/greenTea.ts
View File

@ -1,10 +1,12 @@
import { InvokeAIThemeColors } from 'theme/themeTypes';
import { generateColorPalette } from '../util/generateColorPalette';
export const greenTeaThemeColors = {
export const greenTeaThemeColors: InvokeAIThemeColors = {
base: generateColorPalette(223, 10),
accent: generateColorPalette(155, 80),
working: generateColorPalette(47, 68),
warning: generateColorPalette(28, 75),
ok: generateColorPalette(122, 49),
error: generateColorPalette(0, 50),
gridLineColor: 'rgba(255, 255, 255, 0.2)',
};

4
invokeai/frontend/web/src/theme/colors/invokeAI.ts
View File

@ -1,10 +1,12 @@
import { InvokeAIThemeColors } from 'theme/themeTypes';
import { generateColorPalette } from 'theme/util/generateColorPalette';
export const invokeAIThemeColors = {
export const invokeAIThemeColors: InvokeAIThemeColors = {
base: generateColorPalette(225, 15),
accent: generateColorPalette(250, 50),
working: generateColorPalette(47, 67),
warning: generateColorPalette(28, 75),
ok: generateColorPalette(113, 70),
error: generateColorPalette(0, 76),
gridLineColor: 'rgba(255, 255, 255, 0.2)',
};

4
invokeai/frontend/web/src/theme/colors/lightTheme.ts
View File

@ -1,10 +1,12 @@
import { InvokeAIThemeColors } from 'theme/themeTypes';
import { generateColorPalette } from '../util/generateColorPalette';
export const lightThemeColors = {
export const lightThemeColors: InvokeAIThemeColors = {
base: generateColorPalette(223, 10, true),
accent: generateColorPalette(40, 80, true),
working: generateColorPalette(47, 68, true),
warning: generateColorPalette(28, 75, true),
ok: generateColorPalette(122, 49, true),
error: generateColorPalette(0, 50, true),
gridLineColor: 'rgba(0, 0, 0, 0.2)',
};

4
invokeai/frontend/web/src/theme/colors/oceanBlue.ts
View File

@ -1,10 +1,12 @@
import { InvokeAIThemeColors } from 'theme/themeTypes';
import { generateColorPalette } from '../util/generateColorPalette';
export const oceanBlueColors = {
export const oceanBlueColors: InvokeAIThemeColors = {
base: generateColorPalette(220, 30),
accent: generateColorPalette(210, 80),
working: generateColorPalette(47, 68),
warning: generateColorPalette(28, 75),
ok: generateColorPalette(122, 49),
error: generateColorPalette(0, 100),
gridLineColor: 'rgba(136, 148, 184, 0.2)',
};

33
invokeai/frontend/web/src/theme/themeTypes.d.ts vendored Normal file
View File

@ -0,0 +1,33 @@
export declare type InvokeAIThemeColors = {
base: Partial<InvokeAIPaletteSteps>;
accent: Partial<InvokeAIPaletteSteps>;
working: Partial<InvokeAIPaletteSteps>;
warning: Partial<InvokeAIPaletteSteps>;
ok: Partial<InvokeAIPaletteSteps>;
error: Partial<InvokeAIPaletteSteps>;
gridLineColor: string;
};
export declare type InvokeAIPaletteSteps = {
0: string;
50: string;
100: string;
150: string;
200: string;
250: string;
300: string;
350: string;
400: string;
450: string;
500: string;
550: string;
600: string;
650: string;
700: string;
750: string;
800: string;
850: string;
900: string;
950: string;
1000: string;
};

28
invokeai/frontend/web/src/theme/util/generateColorPalette.ts
View File

@ -1,26 +1,4 @@
type paletteSteps = {
0: string;
50: string;
100: string;
150: string;
200: string;
250: string;
300: string;
350: string;
400: string;
450: string;
500: string;
550: string;
600: string;
650: string;
700: string;
750: string;
800: string;
850: string;
900: string;
950: string;
1000: string;
};
import { InvokeAIPaletteSteps } from 'theme/themeTypes';
/**
* Add two numbers together
@ -61,8 +39,8 @@ export function generateColorPalette(
'100',
];
const darkPalette: Partial<paletteSteps> = {};
const lightPalette: Partial<paletteSteps> = {};
const darkPalette: Partial<InvokeAIPaletteSteps> = {};
const lightPalette: Partial<InvokeAIPaletteSteps> = {};
colorSteps.forEach((colorStep, index) => {
darkPalette[