feat(color-palette): add new spinner component colors (#14745)

Signed-off-by: Václav Vančura <commit@vancura.dev>
Co-authored-by: Claude <noreply@anthropic.com>

package.json

@@ -140,6 +140,7 @@
     "@rollup/plugin-typescript": "^12.3.0",
     "@tsconfig/strictest": "^2.0.7",
     "@types/adm-zip": "^0.5.7",
+    "@types/culori": "^4.0.1",
     "@types/dockerode": "^3.3.45",
     "@types/express": "^4.17.21",
     "@types/getos": "^3.0.4",
@@ -198,6 +199,7 @@
     "check-disk-space": "^3.4.0",
     "chokidar": "^3.6.0",
     "compare-versions": "^6.1.1",
+    "culori": "^4.0.2",
     "date.js": "^0.3.3",
     "dockerode": "^4.0.9",
     "electron-context-menu": "4.1.1",

packages/main/src/plugin/color-registry.spec.ts

@@ -72,6 +72,10 @@ class TestColorRegistry extends ColorRegistry {
   override initLabel(): void {
     super.initLabel();
   }
+
+  override initCommon(): void {
+    super.initCommon();
+  }
 }
 
 const _onDidChangeConfiguration = new Emitter<IConfigurationChangeEvent>();
@@ -668,3 +672,43 @@ describe('badge', () => {
     });
   });
 });
+
+describe('initCommon', () => {
+  let spyOnRegisterColor: MockInstance<(colorId: string, definition: ColorDefinition) => void>;
+
+  beforeEach(() => {
+    // mock the registerColor
+    spyOnRegisterColor = vi.spyOn(colorRegistry, 'registerColor');
+    spyOnRegisterColor.mockReturnValue(undefined);
+
+    colorRegistry.initCommon();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('registers item-disabled color with correct alpha', () => {
+    expect(spyOnRegisterColor).toHaveBeenCalledTimes(1);
+
+    // check the call
+    const call = spyOnRegisterColor.mock.calls[0];
+    expect(call?.[0]).toBe('item-disabled');
+    expect(call?.[1]).toBeDefined();
+    expect(call?.[1].dark).toBeDefined();
+    expect(call?.[1].light).toBeDefined();
+
+    // verify both colors are strings (formatted CSS)
+    expect(typeof call?.[1].dark).toBe('string');
+    expect(typeof call?.[1].light).toBe('string');
+
+    // verify the colors contain alpha information (should be rgba or oklch with alpha)
+    // The colors should be formatted CSS strings with 0.4 alpha
+    const darkColor = call?.[1].dark as string;
+    const lightColor = call?.[1].light as string;
+
+    // Check that alpha is present (either rgba format or oklch with alpha)
+    expect(darkColor).toMatch(/rgba|oklch.*\/\s*0\.4|40%|alpha/i);
+    expect(lightColor).toMatch(/rgba|oklch.*\/\s*0\.4|40%|alpha/i);
+  });
+});

packages/main/src/plugin/color-registry.ts

@@ -17,6 +17,7 @@
  ***********************************************************************/
 
 import type * as extensionApi from '@podman-desktop/api';
+import { formatCss, parse } from 'culori';
 
 import type { AnalyzedExtension } from '/@/plugin/extension/extension-analyzer.js';
 import type { ColorDefinition, ColorInfo } from '/@api/color-info.js';
@@ -256,6 +257,7 @@ export class ColorRegistry {
     this.initTerminal();
     this.initProgressBar();
     this.initBadge();
+    this.initCommon();
   }
 
   protected initDefaults(): void {
@@ -1546,4 +1548,22 @@ export class ColorRegistry {
       light: colorPalette.gray[600],
     });
   }
+
+  protected initCommon(): void {
+    const darkParsed = parse(colorPalette.stone[300]);
+    const lightParsed = parse(colorPalette.stone[600]);
+
+    if (!darkParsed || !lightParsed) {
+      throw new Error('Failed to parse stone palette colors');
+    }
+
+    darkParsed.alpha = 0.4;
+    lightParsed.alpha = 0.4;
+
+    this.registerColor(`item-disabled`, {
+      dark: formatCss(darkParsed),
+      light: formatCss(lightParsed),
+      // TODO: light HC + dark HC
+    });
+  }
 }

pnpm-lock.yaml

@@ -49,6 +49,9 @@ importers:
       compare-versions:
         specifier: ^6.1.1
         version: 6.1.1
+      culori:
+        specifier: ^4.0.2
+        version: 4.0.2
       date.js:
         specifier: ^0.3.3
         version: 0.3.3
@@ -164,6 +167,9 @@ importers:
       '@types/adm-zip':
         specifier: ^0.5.7
         version: 0.5.7
+      '@types/culori':
+        specifier: ^4.0.1
+        version: 4.0.1
       '@types/dockerode':
         specifier: ^3.3.45
         version: 3.3.45
@@ -4096,6 +4102,9 @@ packages:
   '@types/conventional-commits-parser@5.0.1':
     resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
 
+  '@types/culori@4.0.1':
+    resolution: {integrity: sha512-43M51r/22CjhbOXyGT361GZ9vncSVQ39u62x5eJdBQFviI8zWp2X5jzqg7k4M6PVgDQAClpy2bUe2dtwEgEDVQ==}
+
   '@types/d3-array@3.2.1':
     resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
 
@@ -5995,6 +6004,10 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  culori@4.0.2:
+    resolution: {integrity: sha512-1+BhOB8ahCn4O0cep0Sh2l9KCOfOdY+BXJnKMHFFzDEouSr/el18QwXEMRlOj9UY5nCeA8UN3a/82rUWRBeyBw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   custom-media-element@1.4.5:
     resolution: {integrity: sha512-cjrsQufETwxjvwZbYbKBCJNvmQ2++G9AvT45zDi7NXL9k2PdVcs2h0jQz96J6G4TMKRCcEsoJ+QTgQD00Igtjw==}
 
@@ -15992,6 +16005,8 @@ snapshots:
     dependencies:
       '@types/node': 22.19.0
 
+  '@types/culori@4.0.1': {}
+
   '@types/d3-array@3.2.1': {}
 
   '@types/d3-axis@3.0.6':
@@ -18303,6 +18318,8 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  culori@4.0.2: {}
+
   custom-media-element@1.4.5: {}
 
   cytoscape-cose-bilkent@4.1.0(cytoscape@3.30.3):

tailwind-color-palette.json

@@ -110,6 +110,19 @@
     "800": "#1a4a72",
     "900": "#1b3f5f"
   },
+  "stone": {
+    "50": "oklch(98.5% 0.001 106.423)",
+    "100": "oklch(97% 0.001 106.424)",
+    "200": "oklch(92.3% 0.003 48.717)",
+    "300": "oklch(86.9% 0.005 56.366)",
+    "400": "oklch(70.9% 0.01 56.259)",
+    "500": "oklch(55.3% 0.013 58.071)",
+    "600": "oklch(44.4% 0.011 73.639)",
+    "700": "oklch(37.4% 0.01 67.558)",
+    "800": "oklch(26.8% 0.007 34.298)",
+    "900": "oklch(21.6% 0.006 56.043)",
+    "950": "oklch(14.7% 0.004 49.25)"
+  },
   "white": "#fff",
   "transparent": "transparent"
 }