From 153930c10138de5cf8ce45dd25040f2f5f9731c4 Mon Sep 17 00:00:00 2001
From: Sonia Sandler <66797193+SoniaSandler@users.noreply.github.com>
Date: Mon, 11 Nov 2024 11:52:09 -0500
Subject: [PATCH] chore: replace colors by using registry colors in service,
 task-manager, troubleshooting, and window-control-buttons (#9427)

* chore: change hardcoded colors to color registry
Signed-off-by: Sonia Sandler <ssandler@redhat.com>
---
 packages/main/src/plugin/color-registry.ts    | 21 +++++++++++++++++++
 .../src/lib/service/ServiceColumnType.spec.ts |  8 +++----
 .../src/lib/service/ServiceColumnType.svelte  |  8 +++----
 .../src/lib/service/ServiceDetails.svelte     |  2 +-
 .../lib/service/ServiceDetailsSummary.svelte  |  2 +-
 .../src/lib/task-manager/ProgressBar.svelte   |  6 +++---
 .../TroubleshootingPageStoreDetails.svelte    |  4 ++--
 .../LinuxControlButton.svelte                 |  2 +-
 8 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/packages/main/src/plugin/color-registry.ts b/packages/main/src/plugin/color-registry.ts
index a473817de7dc1..09b376b17847e 100644
--- a/packages/main/src/plugin/color-registry.ts
+++ b/packages/main/src/plugin/color-registry.ts
@@ -335,6 +335,11 @@ export class ColorRegistry {
       light: colorPalette.purple[900],
     });
 
+    this.registerColor('titlebar-hover-bg', {
+      dark: colorPalette.charcoal[300],
+      light: colorPalette.gray[300],
+    });
+
     this.registerColor('titlebar-windows-hover-exit-bg', {
       dark: '#c42b1c',
       light: '#c42b1c',
@@ -1465,5 +1470,21 @@ export class ColorRegistry {
       dark: colorPalette.white,
       light: colorPalette.white,
     });
+    this.registerColor(`${badge}sky`, {
+      dark: colorPalette.sky[500],
+      light: colorPalette.sky[500],
+    });
+    this.registerColor(`${badge}purple`, {
+      dark: colorPalette.purple[500],
+      light: colorPalette.purple[500],
+    });
+    this.registerColor(`${badge}fuschia`, {
+      dark: colorPalette.fuschia[600],
+      light: colorPalette.fuschia[600],
+    });
+    this.registerColor(`${badge}gray`, {
+      dark: colorPalette.gray[600],
+      light: colorPalette.gray[600],
+    });
   }
 }
diff --git a/packages/renderer/src/lib/service/ServiceColumnType.spec.ts b/packages/renderer/src/lib/service/ServiceColumnType.spec.ts
index e0e6b3aad50f3..219a16879da33 100644
--- a/packages/renderer/src/lib/service/ServiceColumnType.spec.ts
+++ b/packages/renderer/src/lib/service/ServiceColumnType.spec.ts
@@ -43,7 +43,7 @@ test('Expect basic column styling', async () => {
 
   const dot = text.parentElement?.children[0];
   expect(dot).toBeInTheDocument();
-  expect(dot).toHaveClass('text-gray-600');
+  expect(dot).toHaveClass('text-[var(--pd-badge-gray)]');
   result.unmount();
 });
 
@@ -56,7 +56,7 @@ test('Expect column styling ClusterIP', async () => {
 
   const dot = text.parentElement?.children[0];
   expect(dot).toBeInTheDocument();
-  expect(dot).toHaveClass('text-sky-500');
+  expect(dot).toHaveClass('text-[var(--pd-badge-sky)]');
 });
 
 test('Expect column styling LoadBalancer', async () => {
@@ -68,7 +68,7 @@ test('Expect column styling LoadBalancer', async () => {
 
   const dot = text.parentElement?.children[0];
   expect(dot).toBeInTheDocument();
-  expect(dot).toHaveClass('text-purple-500');
+  expect(dot).toHaveClass('text-[var(--pd-badge-purple)]');
 });
 
 test('Expect column styling NodePort', async () => {
@@ -80,5 +80,5 @@ test('Expect column styling NodePort', async () => {
 
   const dot = text.parentElement?.children[0];
   expect(dot).toBeInTheDocument();
-  expect(dot).toHaveClass('text-fuschia-600');
+  expect(dot).toHaveClass('text-[var(--pd-badge-fuschia)]');
 });
diff --git a/packages/renderer/src/lib/service/ServiceColumnType.svelte b/packages/renderer/src/lib/service/ServiceColumnType.svelte
index 315595ce3f0bd..cde7eb2b447d4 100644
--- a/packages/renderer/src/lib/service/ServiceColumnType.svelte
+++ b/packages/renderer/src/lib/service/ServiceColumnType.svelte
@@ -12,16 +12,16 @@ function getTypeAttributes(type: string) {
   switch (type) {
     case 'ClusterIP':
       // faNetworkWired: Represents internal network connections, suitable for ClusterIP
-      return { color: 'text-sky-500', icon: faNetworkWired };
+      return { color: 'text-[var(--pd-badge-sky)]', icon: faNetworkWired };
     case 'LoadBalancer':
       // faBalanceScale: Symbolizes distribution, fitting for LoadBalancer that distributes traffic
-      return { color: 'text-purple-500', icon: faBalanceScale };
+      return { color: 'text-[var(--pd-badge-purple)]', icon: faBalanceScale };
     case 'NodePort':
       // faPlug: Indicates a connection point, appropriate for NodePort which exposes services on each Node's IP
-      return { color: 'text-fuschia-600', icon: faPlug };
+      return { color: 'text-[var(--pd-badge-fuschia)]', icon: faPlug };
     default:
       // faQuestionCircle: Used for unknown or unspecified types
-      return { color: 'text-gray-600', icon: faQuestionCircle };
+      return { color: 'text-[var(--pd-badge-gray)]', icon: faQuestionCircle };
   }
 }
 </script>
diff --git a/packages/renderer/src/lib/service/ServiceDetails.svelte b/packages/renderer/src/lib/service/ServiceDetails.svelte
index 285cb9528cafe..ad9f119cda4dd 100644
--- a/packages/renderer/src/lib/service/ServiceDetails.svelte
+++ b/packages/renderer/src/lib/service/ServiceDetails.svelte
@@ -64,7 +64,7 @@ async function loadDetails() {
     <svelte:fragment slot="actions">
       <ServiceActions service={service} detailed={true} on:update={() => (service = service)} />
     </svelte:fragment>
-    <div slot="detail" class="flex py-2 w-full justify-end text-sm text-gray-700">
+    <div slot="detail" class="flex py-2 w-full justify-end text-sm text-[var(--pd-content-text)]">
       <StateChange state={service.status} />
     </div>
     <svelte:fragment slot="tabs">
diff --git a/packages/renderer/src/lib/service/ServiceDetailsSummary.svelte b/packages/renderer/src/lib/service/ServiceDetailsSummary.svelte
index 3db1b94cbed2e..b842c3afd0196 100644
--- a/packages/renderer/src/lib/service/ServiceDetailsSummary.svelte
+++ b/packages/renderer/src/lib/service/ServiceDetailsSummary.svelte
@@ -28,6 +28,6 @@ basic information -->
     <KubeServiceArtifact serviceName={service.metadata?.name} namespace={service.metadata?.namespace} artifact={service.spec} />
     <KubeEventsArtifact events={events} />
   {:else}
-    <p class="text-purple-500 font-medium">Loading ...</p>
+    <p class="text-[var(--pd-state-info)] font-medium">Loading ...</p>
   {/if}
 </Table>
diff --git a/packages/renderer/src/lib/task-manager/ProgressBar.svelte b/packages/renderer/src/lib/task-manager/ProgressBar.svelte
index a418ab997f021..f81b6777cd6d0 100644
--- a/packages/renderer/src/lib/task-manager/ProgressBar.svelte
+++ b/packages/renderer/src/lib/task-manager/ProgressBar.svelte
@@ -35,15 +35,15 @@ export let height: string = 'h-4';
 </script>
 
 <div class="flex flex-row">
-  <div class="{width} {height} rounded-full bg-gray-900 progress-bar overflow-hidden">
+  <div class="{width} {height} rounded-full bg-[var(--pd-progressBar-bg)] progress-bar overflow-hidden">
     {#if progress !== undefined}
       <div
-        class="{width} {height} bg-purple-600 rounded-full progress-bar-incremental"
+        class="{width} {height} bg-[var(--pd-progressBar-in-progress-bg)] rounded-full progress-bar-incremental"
         role="progressbar"
         style="width:{progress}%">
       </div>
     {:else}
-      <div class="{width} {height} bg-purple-600 rounded-full progress-bar-indeterminate" role="progressbar"></div>
+      <div class="{width} {height} bg-[var(--pd-progressBar-in-progress-bg)] rounded-full progress-bar-indeterminate" role="progressbar"></div>
     {/if}
   </div>
   {#if progress !== undefined}
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStoreDetails.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStoreDetails.svelte
index e6cb5bef961a1..12187d9a5d842 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStoreDetails.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStoreDetails.svelte
@@ -84,12 +84,12 @@ async function fetch(): Promise<void> {
               {/each}
             </ul>
           {:else}
-            <div class="h-32 flex flex-row mx-auto text-xs text-gray-800 text-center">No buffer events</div>
+            <div class="h-32 flex flex-row mx-auto text-xs text-[var(--pd-content-text)] text-center">No buffer events</div>
           {/if}
         </div>
       </div>
 
-      <div class="text-xs text-gray-800 mt-2 text-center">Track events that have updated the store</div>
+      <div class="text-xs text-[var(--pd-content-text)] mt-2 text-center">Track events that have updated the store</div>
     </div>
   </div>
   <svelte:fragment slot="buttons">
diff --git a/packages/renderer/src/lib/window-control-buttons/LinuxControlButton.svelte b/packages/renderer/src/lib/window-control-buttons/LinuxControlButton.svelte
index 443740667cb07..cb8f31888e7cc 100644
--- a/packages/renderer/src/lib/window-control-buttons/LinuxControlButton.svelte
+++ b/packages/renderer/src/lib/window-control-buttons/LinuxControlButton.svelte
@@ -29,6 +29,6 @@ onMount(() => {
   on:click={() => action()}
   title={titleName}
   aria-label={name}
-  class="h-[25px] w-[25px] cursor-pointer text-gray-400 hover:rounded-full hover:bg-charcoal-300 flex place-items-center justify-center">
+  class="h-[25px] w-[25px] cursor-pointer text-[var(--pd-titlebar-text)] hover:rounded-full hover:bg-[var(--pd-titlebar-hover-bg)] flex place-items-center justify-center">
   <Fa size={iconSize} icon={icon} />
 </button>