feat(ui): add alpha colors

invokeai/frontend/web/src/theme/colors/greenTea.ts

@@ -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)',
 };

invokeai/frontend/web/src/theme/colors/invokeAI.ts

@@ -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)',
 };

invokeai/frontend/web/src/theme/colors/lightTheme.ts

@@ -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)',
 };

invokeai/frontend/web/src/theme/colors/oceanBlue.ts

@@ -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)',
 };

invokeai/frontend/web/src/theme/themeTypes.d.ts

@@ -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;
 };
 

invokeai/frontend/web/src/theme/util/generateColorPalette.ts

@@ -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',
+    0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 59, 64, 68, 73, 77, 82, 86,
-    '5',
+    95, 100,
-    '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}%, ${
+    ] = `hsl(${hue} ${saturation}% ${darkPaletteLightness}% / ${A})`;
-      lightnessSteps[colorSteps.length - 1 - index]
+
-    }%)`;
+    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;