From 654ee75985556b83baa6cadcfa28c036ef735bb4 Mon Sep 17 00:00:00 2001
From: Charlie Drage <charlie@charliedrage.com>
Date: Tue, 11 Jun 2024 12:50:30 -0400
Subject: [PATCH] chore: add light mode to k8s tables (#7584)

---
 .../src/lib/deployments/DeploymentColumnName.spec.ts      | 2 +-
 .../src/lib/deployments/DeploymentColumnName.svelte       | 4 +++-
 .../src/lib/deployments/DeploymentColumnPods.spec.ts      | 2 +-
 .../src/lib/deployments/DeploymentColumnPods.svelte       | 2 +-
 .../ingresses-routes/IngressRouteColumnBackend.spec.ts    | 8 ++++----
 .../lib/ingresses-routes/IngressRouteColumnBackend.svelte | 2 +-
 .../lib/ingresses-routes/IngressRouteColumnName.spec.ts   | 4 ++--
 .../lib/ingresses-routes/IngressRouteColumnName.svelte    | 4 +++-
 packages/renderer/src/lib/node/NodeColumnName.spec.ts     | 2 +-
 packages/renderer/src/lib/node/NodeColumnName.svelte      | 4 +++-
 packages/renderer/src/lib/pod/PodColumnAge.spec.ts        | 2 +-
 packages/renderer/src/lib/pod/PodColumnAge.svelte         | 2 +-
 packages/renderer/src/lib/pod/PodColumnName.spec.ts       | 4 ++--
 packages/renderer/src/lib/pod/PodColumnName.svelte        | 6 ++++--
 .../renderer/src/lib/service/ServiceColumnName.spec.ts    | 2 +-
 .../renderer/src/lib/service/ServiceColumnName.svelte     | 6 ++++--
 16 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/packages/renderer/src/lib/deployments/DeploymentColumnName.spec.ts b/packages/renderer/src/lib/deployments/DeploymentColumnName.spec.ts
index 484633d3af8df..3f5dfd199c7d5 100644
--- a/packages/renderer/src/lib/deployments/DeploymentColumnName.spec.ts
+++ b/packages/renderer/src/lib/deployments/DeploymentColumnName.spec.ts
@@ -41,7 +41,7 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(deployment.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect clicking works', async () => {
diff --git a/packages/renderer/src/lib/deployments/DeploymentColumnName.svelte b/packages/renderer/src/lib/deployments/DeploymentColumnName.svelte
index dc33ad28769cd..669650b194f12 100644
--- a/packages/renderer/src/lib/deployments/DeploymentColumnName.svelte
+++ b/packages/renderer/src/lib/deployments/DeploymentColumnName.svelte
@@ -11,5 +11,7 @@ function openDetails() {
 </script>
 
 <button class="hover:cursor-pointer flex flex-col max-w-full" on:click="{() => openDetails()}">
-  <div class="text-sm text-gray-300 max-w-full overflow-hidden text-ellipsis">{object.name}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+    {object.name}
+  </div>
 </button>
diff --git a/packages/renderer/src/lib/deployments/DeploymentColumnPods.spec.ts b/packages/renderer/src/lib/deployments/DeploymentColumnPods.spec.ts
index 919f1af409fc4..97cafdab9c0f5 100644
--- a/packages/renderer/src/lib/deployments/DeploymentColumnPods.spec.ts
+++ b/packages/renderer/src/lib/deployments/DeploymentColumnPods.spec.ts
@@ -39,5 +39,5 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(deployment.ready + ' / ' + deployment.replicas);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-xs');
-  expect(text).toHaveClass('text-gray-500');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
diff --git a/packages/renderer/src/lib/deployments/DeploymentColumnPods.svelte b/packages/renderer/src/lib/deployments/DeploymentColumnPods.svelte
index 86928de87ddc1..c1172307b68e0 100644
--- a/packages/renderer/src/lib/deployments/DeploymentColumnPods.svelte
+++ b/packages/renderer/src/lib/deployments/DeploymentColumnPods.svelte
@@ -4,6 +4,6 @@ import type { DeploymentUI } from './DeploymentUI';
 export let object: DeploymentUI;
 </script>
 
-<div class="text-xs text-gray-500">
+<div class="text-xs text-[var(--pd-table-body-text-highlight)]">
   {object.ready} / {object.replicas}
 </div>
diff --git a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.spec.ts b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.spec.ts
index e5b5d2249dd5c..a7b1ffb23ea0f 100644
--- a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.spec.ts
+++ b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.spec.ts
@@ -64,7 +64,7 @@ test('Expect simple column styling with single path ingress', async () => {
   const text = screen.getByText(backend);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-500');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect simple column styling with multiple paths ingress', async () => {
@@ -110,11 +110,11 @@ test('Expect simple column styling with multiple paths ingress', async () => {
   const firstElement = screen.getByText(backends[0]);
   expect(firstElement).toBeInTheDocument();
   expect(firstElement).toHaveClass('text-sm');
-  expect(firstElement).toHaveClass('text-gray-500');
+  expect(firstElement).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
   const secondElement = screen.getByText(backends[1]);
   expect(secondElement).toBeInTheDocument();
   expect(secondElement).toHaveClass('text-sm');
-  expect(secondElement).toHaveClass('text-gray-500');
+  expect(secondElement).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect simple column styling with route', async () => {
@@ -137,5 +137,5 @@ test('Expect simple column styling with route', async () => {
   const text = screen.getByText(backend);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-500');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
diff --git a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.svelte b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.svelte
index 5785b50cbd132..4be70d16afe53 100644
--- a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.svelte
+++ b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnBackend.svelte
@@ -9,5 +9,5 @@ const ingressRouteUtils = new IngressRouteUtils();
 </script>
 
 {#each ingressRouteUtils.getBackends(object) as backend}
-  <div class="text-sm text-gray-500">{backend}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)]">{backend}</div>
 {/each}
diff --git a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.spec.ts b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.spec.ts
index a0aa46234b5b9..f67a6687eed2e 100644
--- a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.spec.ts
+++ b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.spec.ts
@@ -53,7 +53,7 @@ test('Expect simple column styling with Ingress', async () => {
   const text = screen.getByText(ingressUI.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect clicking on Ingress works', async () => {
@@ -76,7 +76,7 @@ test('Expect simple column styling with Route', async () => {
   const text = screen.getByText(routeUI.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect clicking on Route works', async () => {
diff --git a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.svelte b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.svelte
index 8712af0a66052..68dd19e394cbb 100644
--- a/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.svelte
+++ b/packages/renderer/src/lib/ingresses-routes/IngressRouteColumnName.svelte
@@ -18,5 +18,7 @@ function openDetails() {
 </script>
 
 <button class="hover:cursor-pointer flex flex-col max-w-full" on:click="{() => openDetails()}">
-  <div class="text-sm text-gray-300 max-w-full overflow-hidden text-ellipsis">{object.name}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+    {object.name}
+  </div>
 </button>
diff --git a/packages/renderer/src/lib/node/NodeColumnName.spec.ts b/packages/renderer/src/lib/node/NodeColumnName.spec.ts
index 34e782c5bf67f..a45eb8414bcd9 100644
--- a/packages/renderer/src/lib/node/NodeColumnName.spec.ts
+++ b/packages/renderer/src/lib/node/NodeColumnName.spec.ts
@@ -41,7 +41,7 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(node.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect clicking works', async () => {
diff --git a/packages/renderer/src/lib/node/NodeColumnName.svelte b/packages/renderer/src/lib/node/NodeColumnName.svelte
index 59f598bf14ae9..f9dd10b42cffe 100644
--- a/packages/renderer/src/lib/node/NodeColumnName.svelte
+++ b/packages/renderer/src/lib/node/NodeColumnName.svelte
@@ -11,5 +11,7 @@ function openDetails() {
 </script>
 
 <button class="hover:cursor-pointer flex flex-col max-w-full" on:click="{() => openDetails()}">
-  <div class="text-sm text-gray-300 max-w-full overflow-hidden text-ellipsis">{object.name}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+    {object.name}
+  </div>
 </button>
diff --git a/packages/renderer/src/lib/pod/PodColumnAge.spec.ts b/packages/renderer/src/lib/pod/PodColumnAge.spec.ts
index 68f35e3d32c7b..6ab1c8ad737ef 100644
--- a/packages/renderer/src/lib/pod/PodColumnAge.spec.ts
+++ b/packages/renderer/src/lib/pod/PodColumnAge.spec.ts
@@ -44,5 +44,5 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(pod.age);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-700');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
diff --git a/packages/renderer/src/lib/pod/PodColumnAge.svelte b/packages/renderer/src/lib/pod/PodColumnAge.svelte
index 2db51e6d88c0e..2b0d08cc1f6e1 100644
--- a/packages/renderer/src/lib/pod/PodColumnAge.svelte
+++ b/packages/renderer/src/lib/pod/PodColumnAge.svelte
@@ -5,6 +5,6 @@ import type { PodInfoUI } from './PodInfoUI';
 export let object: PodInfoUI;
 </script>
 
-<div class="text-sm text-gray-700">
+<div class="text-sm text-[var(--pd-table-body-text-highlight)]">
   <StateChange state="{object.status}">{object.age}</StateChange>
 </div>
diff --git a/packages/renderer/src/lib/pod/PodColumnName.spec.ts b/packages/renderer/src/lib/pod/PodColumnName.spec.ts
index 9910ba71b83e0..7ab74b9f75b9a 100644
--- a/packages/renderer/src/lib/pod/PodColumnName.spec.ts
+++ b/packages/renderer/src/lib/pod/PodColumnName.spec.ts
@@ -46,12 +46,12 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(pod.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 
   const id = screen.getByText(pod.shortId);
   expect(id).toBeInTheDocument();
   expect(id).toHaveClass('text-xs');
-  expect(id).toHaveClass('text-violet-400');
+  expect(id).toHaveClass('text-[var(--pd-table-body-text-sub-secondary)]');
 });
 
 test('Expect clicking works', async () => {
diff --git a/packages/renderer/src/lib/pod/PodColumnName.svelte b/packages/renderer/src/lib/pod/PodColumnName.svelte
index 521e86448bce8..3710e5b83e7db 100644
--- a/packages/renderer/src/lib/pod/PodColumnName.svelte
+++ b/packages/renderer/src/lib/pod/PodColumnName.svelte
@@ -16,6 +16,8 @@ function openDetailsPod(pod: PodInfoUI) {
 </script>
 
 <button class="hover:cursor-pointer flex flex-col max-w-full" on:click="{() => openDetailsPod(object)}">
-  <div class="text-sm text-gray-300 max-w-full overflow-hidden text-ellipsis">{object.name}</div>
-  <div class="text-xs text-violet-400">{object.shortId}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+    {object.name}
+  </div>
+  <div class="text-xs text-[var(--pd-table-body-text-sub-secondary)]">{object.shortId}</div>
 </button>
diff --git a/packages/renderer/src/lib/service/ServiceColumnName.spec.ts b/packages/renderer/src/lib/service/ServiceColumnName.spec.ts
index d9db00cd12c95..a9963f343658e 100644
--- a/packages/renderer/src/lib/service/ServiceColumnName.spec.ts
+++ b/packages/renderer/src/lib/service/ServiceColumnName.spec.ts
@@ -42,7 +42,7 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText(service.name);
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-300');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text-highlight)]');
 });
 
 test('Expect clicking works', async () => {
diff --git a/packages/renderer/src/lib/service/ServiceColumnName.svelte b/packages/renderer/src/lib/service/ServiceColumnName.svelte
index 1bec369e2fde8..39f6bdbe653d2 100644
--- a/packages/renderer/src/lib/service/ServiceColumnName.svelte
+++ b/packages/renderer/src/lib/service/ServiceColumnName.svelte
@@ -11,8 +11,10 @@ function openDetails() {
 </script>
 
 <button class="hover:cursor-pointer flex flex-col max-w-full" on:click="{() => openDetails()}">
-  <div class="text-sm text-gray-300 max-w-full overflow-hidden text-ellipsis">{object.name}</div>
+  <div class="text-sm text-[var(--pd-table-body-text-highlight)] max-w-full overflow-hidden text-ellipsis">
+    {object.name}
+  </div>
   {#if object.loadBalancerIPs}
-    <div class="text-xs text-violet-400">{object.loadBalancerIPs}</div>
+    <div class="text-xs text-[var(--pd-table-body-text-sub-secondary)]">{object.loadBalancerIPs}</div>
   {/if}
 </button>