chore: icon color cleanup

The icons should not be using hard-coded color values. Bootc status icon
switched to using the appropriate color variables. The red is a little
bright and we lose the sky blue for building :( but these are the correct
colors and now match Podman Desktop.

Disk image icon uses #fff since the mask should be pure FFF (should not
have been using the palette in the first place).

Part of #975.

Signed-off-by: Tim deBoer <[email protected]>

Author: deboer-tim

packages/frontend/src/lib/BootcStatusIcon.spec.ts

@@ -1,5 +1,5 @@
 /**********************************************************************
- * Copyright (C) 2024 Red Hat, Inc.
+ * Copyright (C) 2024-2025 Red Hat, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -29,7 +29,7 @@ test('Expect running status to display correct background color', async () => {
   const icon = screen.getByRole('status');
   expect(icon).toBeInTheDocument();
   expect(icon).toHaveAttribute('title', status);
-  expect(icon).toHaveClass('bg-sky-400');
+  expect(icon).toHaveClass('bg-[var(--pd-status-created)]');
 });
 
 test('Expect success status to display green background', async () => {
@@ -38,7 +38,7 @@ test('Expect success status to display green background', async () => {
   const icon = screen.getByRole('status');
   expect(icon).toBeInTheDocument();
   expect(icon).toHaveAttribute('title', status);
-  expect(icon).toHaveClass('bg-green-600');
+  expect(icon).toHaveClass('bg-[var(--pd-status-running)]');
 });
 
 test('Expect error status to display red background', async () => {
@@ -47,7 +47,7 @@ test('Expect error status to display red background', async () => {
   const icon = screen.getByRole('status');
   expect(icon).toBeInTheDocument();
   expect(icon).toHaveAttribute('title', status);
-  expect(icon).toHaveClass('bg-red-600');
+  expect(icon).toHaveClass('bg-[var(--pd-status-terminated)]');
 });
 
 test('If running, creating or deleting, expect an svg which is the spinner', async () => {
@@ -64,5 +64,5 @@ test('Expect lost status to display amber background', async () => {
   const icon = screen.getByRole('status');
   expect(icon).toBeInTheDocument();
   expect(icon).toHaveAttribute('title', status);
-  expect(icon).toHaveClass('bg-amber-600');
+  expect(icon).toHaveClass('bg-[var(--pd-status-degraded)]');
 });

packages/frontend/src/lib/BootcStatusIcon.svelte

@@ -21,13 +21,13 @@ $: solid =
 <div class="grid place-content-center" style="position:relative">
   <div
     class="grid place-content-center rounded-sm aspect-square text-xs"
-    class:bg-green-600={status === 'success'}
-    class:bg-sky-400={status === 'running'}
-    class:bg-red-600={status === 'error'}
-    class:bg-amber-600={status === 'lost'}
+    class:bg-[var(--pd-status-running)]={status === 'success'}
+    class:bg-[var(--pd-status-created)]={status === 'running'}
+    class:bg-[var(--pd-status-terminated)]={status === 'error'}
+    class:bg-[var(--pd-status-degraded)]={status === 'lost'}
     class:p-0.5={!solid}
     class:p-1={solid}
-    class:border-gray-700={!solid}
+    class:border-[var(--pd-status-not-running)]={!solid}
     class:text-[var(--pd-status-not-running)]={!solid}
     class:text-[var(--pd-status-contrast)]={solid}
     role="status"

packages/frontend/src/lib/DiskImageIcon.svelte

@@ -35,7 +35,7 @@ export let solid = true;
     </g>
     <defs>
       <clipPath id="clip0_48_55">
-        <rect width="15" height="16" fill="white" transform="matrix(-1 0 0 1 15 0)"></rect>
+        <rect width="15" height="16" fill="#fff" transform="matrix(-1 0 0 1 15 0)"></rect>
       </clipPath>
     </defs>
   {:else}
@@ -52,7 +52,7 @@ export let solid = true;
     </g>
     <defs>
       <clipPath id="clip0_48_54">
-        <rect width="14.5263" height="16" fill="white" transform="matrix(-1 0 0 1 15.5263 0)"></rect>
+        <rect width="14.5263" height="16" fill="#fff" transform="matrix(-1 0 0 1 15.5263 0)"></rect>
       </clipPath>
     </defs>
   {/if}