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 alpha colors

Browse Source
This commit is contained in:
psychedelicious 2023-06-03 12:41:31 +10:00
parent d92c7f5483
commit faa69f8a47
6 changed files with 45 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,16 @@ import { generateColorPalette } from '../util/generateColorPalette';
export const greenTeaThemeColors: InvokeAIThemeColors = {
base: generateColorPalette(223, 10),
baseAlpha: generateColorPalette(223, 10, false, true),
accent: generateColorPalette(155, 80),
accentAlpha: generateColorPalette(155, 80, false, true),
working: generateColorPalette(47, 68),
workingAlpha: generateColorPalette(47, 68, false, true),
warning: generateColorPalette(28, 75),
warningAlpha: generateColorPalette(28, 75, false, true),
ok: generateColorPalette(122, 49),
okAlpha: generateColorPalette(122, 49, false, true),
error: generateColorPalette(0, 50),
errorAlpha: generateColorPalette(0, 50, false, true),
gridLineColor: 'rgba(255, 255, 255, 0.2)',
};

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

@ -3,10 +3,16 @@ import { generateColorPalette } from 'theme/util/generateColorPalette';
export const invokeAIThemeColors: InvokeAIThemeColors = {
base: generateColorPalette(225, 15),
baseAlpha: generateColorPalette(225, 15, false, true),
accent: generateColorPalette(250, 50),
accentAlpha: generateColorPalette(250, 50, false, true),
working: generateColorPalette(47, 67),
workingAlpha: generateColorPalette(47, 67, false, true),
warning: generateColorPalette(28, 75),
warningAlpha: generateColorPalette(28, 75, false, true),
ok: generateColorPalette(113, 70),
okAlpha: generateColorPalette(113, 70, false, true),
error: generateColorPalette(0, 76),
errorAlpha: generateColorPalette(0, 76, false, true),
gridLineColor: 'rgba(255, 255, 255, 0.2)',
};

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

@ -3,10 +3,16 @@ import { generateColorPalette } from '../util/generateColorPalette';
export const lightThemeColors: InvokeAIThemeColors = {
base: generateColorPalette(223, 10, true),
baseAlpha: generateColorPalette(223, 10, true, true),
accent: generateColorPalette(40, 80, true),
accentAlpha: generateColorPalette(40, 80, true, true),
working: generateColorPalette(47, 68, true),
workingAlpha: generateColorPalette(47, 68, true, true),
warning: generateColorPalette(28, 75, true),
warningAlpha: generateColorPalette(28, 75, true, true),
ok: generateColorPalette(122, 49, true),
okAlpha: generateColorPalette(122, 49, true, true),
error: generateColorPalette(0, 50, true),
errorAlpha: generateColorPalette(0, 50, true, true),
gridLineColor: 'rgba(0, 0, 0, 0.2)',
};

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

@ -3,10 +3,16 @@ import { generateColorPalette } from '../util/generateColorPalette';
export const oceanBlueColors: InvokeAIThemeColors = {
base: generateColorPalette(220, 30),
baseAlpha: generateColorPalette(220, 30, false, true),
accent: generateColorPalette(210, 80),
accentAlpha: generateColorPalette(210, 80, false, true),
working: generateColorPalette(47, 68),
workingAlpha: generateColorPalette(47, 68, false, true),
warning: generateColorPalette(28, 75),
warningAlpha: generateColorPalette(28, 75, false, true),
ok: generateColorPalette(122, 49),
okAlpha: generateColorPalette(122, 49, false, true),
error: generateColorPalette(0, 100),
errorAlpha: generateColorPalette(0, 100, false, true),
gridLineColor: 'rgba(136, 148, 184, 0.2)',
};

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

@ -1,10 +1,16 @@
export type InvokeAIThemeColors = {
base: Partial<InvokeAIPaletteSteps>;
baseAlpha: Partial<InvokeAIPaletteSteps>;
accent: Partial<InvokeAIPaletteSteps>;
accentAlpha: Partial<InvokeAIPaletteSteps>;
working: Partial<InvokeAIPaletteSteps>;
workingAlpha: Partial<InvokeAIPaletteSteps>;
warning: Partial<InvokeAIPaletteSteps>;
warningAlpha: Partial<InvokeAIPaletteSteps>;
ok: Partial<InvokeAIPaletteSteps>;
okAlpha: Partial<InvokeAIPaletteSteps>;
error: Partial<InvokeAIPaletteSteps>;
errorAlpha: Partial<InvokeAIPaletteSteps>;
gridLineColor: string;
};

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

@ -9,49 +9,38 @@ import { InvokeAIPaletteSteps } from 'theme/themeTypes';
export function generateColorPalette(
hue: string | number,
saturation: string | number,
light = false
light = false,
alpha = false
) {
hue = String(hue);
saturation = String(saturation);
const colorSteps = Array.from({ length: 21 }, (_, i) => i * 50);
const lightnessSteps = [
'0',
'5',
'10',
'15',
'20',
'25',
'30',
'35',
'40',
'45',
'50',
'55',
'59',
'64',
'68',
'73',
'77',
'82',
'86',
'95',
'100',
0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 59, 64, 68, 73, 77, 82, 86,
95, 100,
];
const darkPalette: Partial<InvokeAIPaletteSteps> = {};
const lightPalette: Partial<InvokeAIPaletteSteps> = {};
colorSteps.forEach((colorStep, index) => {
const A = alpha ? lightnessSteps[index] / 100 : 1;
// Lightness should be 50% for alpha colors
const darkPaletteLightness = alpha
? 50
: lightnessSteps[colorSteps.length - 1 - index];
darkPalette[
colorStep as keyof typeof darkPalette
] = `hsl(${hue}, ${saturation}%, ${
lightnessSteps[colorSteps.length - 1 - index]
}%)`;
] = `hsl(${hue} ${saturation}% ${darkPaletteLightness}% / ${A})`;
const lightPaletteLightness = alpha ? 50 : lightnessSteps[index];
lightPalette[
colorStep as keyof typeof lightPalette
] = `hsl(${hue}, ${saturation}%, ${lightnessSteps[index]}%)`;
] = `hsl(${hue} ${saturation}% ${lightPaletteLightness}% / ${A})`;
});
return light ? lightPalette : darkPalette;