chore: add light mode to k8s tables

### What does this PR do?

Adds light mode for kubernetes tables / areas where the colour was
harcoded.

### Screenshot / video of UI

<!-- If this PR is changing UI, please include
screenshots or screencasts showing the difference -->

### What issues does this PR fix or reference?

<!-- Include any related issues from Podman Desktop
repository (or from another issue tracker). -->

Closes containers#7574

### How to test this PR?

<!-- Please explain steps to verify the functionality,
do not forget to provide unit/component tests -->

- [X] Tests cover change

Test in light and dark mode.

Signed-off-by: Charlie Drage <charlie@charliedrage.com>

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 () => {

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>

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

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>

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

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}

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 () => {

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>

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 () => {

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>

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

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>

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 () => {

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>

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 () => {

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>