chore: replace colors by using registry colors in ui (podman-desktop#…

…9689) * chore: change hardcoded colors to color registry Signed-off-by: Sonia Sandler <[email protected]>
SoniaSandler · Nov 4, 2024 · 577c047 · 577c047
1 parent b7ba284
commit 577c047
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 58 deletions.
diff --git a/packages/renderer/src/lib/ui/AuditMessageBox.svelte b/packages/renderer/src/lib/ui/AuditMessageBox.svelte
@@ -22,7 +22,7 @@ $: errorRecords = auditResult?.records.filter(record => record.type === 'error')
       aria-label="error">
       <div class="flex flex-row">
         <div class="mr-3">
-          <Fa size="1.1x" class="text-red-400" icon={faXmarkCircle} />
+          <Fa size="1.1x" class="text-[var(--pd-state-error)]" icon={faXmarkCircle} />
         </div>
         <div class="text-sm">
           {record.record}
@@ -40,7 +40,7 @@ $: errorRecords = auditResult?.records.filter(record => record.type === 'error')
       aria-label="warning">
       <div class="flex flex-row">
         <div class="mr-3">
-          <Fa size="1.1x" class="flex text-amber-400" icon={faTriangleExclamation} />
+          <Fa size="1.1x" class="flex text-[var(--pd-state-warning)]" icon={faTriangleExclamation} />
         </div>
         <div class="text-sm">
           {record.record}

diff --git a/packages/renderer/src/lib/ui/Badge.svelte b/packages/renderer/src/lib/ui/Badge.svelte
@@ -26,6 +26,6 @@ onMount(async () => {
 });
 </script>
 
-<div class="text-black text-xs me-2 px-1 py-0.5 rounded select-none {customClass} {$$props.class}" style={customStyle}>
+<div class="text-[var(--pd-card-bg)] text-xs me-2 px-1 py-0.5 rounded select-none {customClass} {$$props.class}" style={customStyle}>
   {label}
 </div>
diff --git a/packages/renderer/src/lib/ui/ConnectionErrorInfoButton.svelte b/packages/renderer/src/lib/ui/ConnectionErrorInfoButton.svelte
@@ -7,6 +7,6 @@ export let status: IConnectionStatus | undefined;
 {#if status?.action && status?.error}
   <button
     aria-label="{status.action} failed"
-    class="ml-3 text-[9px] text-red-500 underline"
+    class="ml-3 text-[9px] text-[var(--pd-state-error)] underline"
     on:click={() => window.events?.send('toggle-task-manager', '')}>{status.action} failed</button>
 {/if}
diff --git a/packages/renderer/src/lib/ui/ConnectionStatus.spec.ts b/packages/renderer/src/lib/ui/ConnectionStatus.spec.ts
@@ -1,5 +1,5 @@
 /**********************************************************************
- * Copyright (C) 2023 Red Hat, Inc.
+ * Copyright (C) 2023-2024 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.
@@ -34,9 +34,9 @@ test('Expect green text and icon when connection is running', async () => {
   const icon = screen.getByLabelText(connectionStatusIcon);
   const label = screen.getByLabelText(connectionStatusLabel);
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveClass('bg-green-500');
+  expect(icon).toHaveClass('bg-[var(--pd-status-running)]');
   expect(label).toBeInTheDocument();
-  expect(label).toHaveClass('text-green-500');
+  expect(label).toHaveClass('text-[var(--pd-status-running)]');
   expect(label).toHaveTextContent('RUNNING');
 });
 
@@ -45,9 +45,9 @@ test('Expect green text and icon when connection is starting', async () => {
   const icon = screen.getByLabelText(connectionStatusIcon);
   const label = screen.getByLabelText(connectionStatusLabel);
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveClass('bg-green-500');
+  expect(icon).toHaveClass('bg-[var(--pd-status-starting)]');
   expect(label).toBeInTheDocument();
-  expect(label).toHaveClass('text-green-500');
+  expect(label).toHaveClass('text-[var(--pd-status-starting)]');
   expect(label).toHaveTextContent('STARTING');
 });
 
@@ -56,9 +56,9 @@ test('Expect green text and icon when connection is stopped', async () => {
   const icon = screen.getByLabelText(connectionStatusIcon);
   const label = screen.getByLabelText(connectionStatusLabel);
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveClass('bg-gray-900');
+  expect(icon).toHaveClass('bg-[var(--pd-status-stopped)]');
   expect(label).toBeInTheDocument();
-  expect(label).toHaveClass('text-gray-900');
+  expect(label).toHaveClass('text-[var(--pd-status-stopped)]');
   expect(label).toHaveTextContent('OFF');
 });
 
@@ -67,9 +67,9 @@ test('Expect green text and icon when connection is stopping', async () => {
   const icon = screen.getByLabelText(connectionStatusIcon);
   const label = screen.getByLabelText(connectionStatusLabel);
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveClass('bg-red-500');
+  expect(icon).toHaveClass('bg-[var(--pd-status-terminated)]');
   expect(label).toBeInTheDocument();
-  expect(label).toHaveClass('text-red-500');
+  expect(label).toHaveClass('text-[var(--pd-status-terminated)]');
   expect(label).toHaveTextContent('STOPPING');
 });
 
@@ -78,8 +78,8 @@ test('Expect green text and icon when connection is unknown', async () => {
   const icon = screen.getByLabelText(connectionStatusIcon);
   const label = screen.getByLabelText(connectionStatusLabel);
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveClass('bg-gray-900');
+  expect(icon).toHaveClass('bg-[var(--pd-status-unknown)]');
   expect(label).toBeInTheDocument();
-  expect(label).toHaveClass('text-gray-900');
+  expect(label).toHaveClass('text-[var(--pd-status-unknown)]');
   expect(label).toHaveTextContent('UNKNOWN');
 });
diff --git a/packages/renderer/src/lib/ui/ConnectionStatus.svelte b/packages/renderer/src/lib/ui/ConnectionStatus.svelte
@@ -13,47 +13,47 @@ const statusesStyle = new Map<string, ConnectionStatusStyle>([
   [
     'started',
     {
-      bgColor: 'bg-green-500',
-      txtColor: 'text-green-500',
+      bgColor: 'bg-[var(--pd-status-running)]',
+      txtColor: 'text-[var(--pd-status-running)]',
       label: 'RUNNING',
     },
   ],
   [
     'starting',
     {
-      bgColor: 'bg-green-500',
-      txtColor: 'text-green-500',
+      bgColor: 'bg-[var(--pd-status-starting)]',
+      txtColor: 'text-[var(--pd-status-starting)]',
       label: 'STARTING',
     },
   ],
   [
     'stopped',
     {
-      bgColor: 'bg-gray-900',
-      txtColor: 'text-gray-900',
+      bgColor: 'bg-[var(--pd-status-stopped)]',
+      txtColor: 'text-[var(--pd-status-stopped)]',
       label: 'OFF',
     },
   ],
   [
     'stopping',
     {
-      bgColor: 'bg-red-500',
-      txtColor: 'text-red-500',
+      bgColor: 'bg-[var(--pd-status-terminated)]',
+      txtColor: 'text-[var(--pd-status-terminated)]',
       label: 'STOPPING',
     },
   ],
   [
     'failed',
     {
-      bgColor: 'bg-red-500',
-      txtColor: 'text-red-500',
+      bgColor: 'bg-[var(--pd-status-terminated)]',
+      txtColor: 'text-[var(--pd-status-terminated)]',
       label: 'FAILED',
     },
   ],
 ]);
 $: statusStyle = statusesStyle.get(status) ?? {
-  bgColor: 'bg-gray-900',
-  txtColor: 'text-gray-900',
+  bgColor: 'bg-[var(--pd-status-unknown)]',
+  txtColor: 'text-[var(--pd-status-unknown)]',
   label: status.toUpperCase(),
 };
 </script>

diff --git a/packages/renderer/src/lib/ui/ExtensionStatus.spec.ts b/packages/renderer/src/lib/ui/ExtensionStatus.spec.ts
@@ -31,9 +31,9 @@ test('Expect green text and icon when extension is running', async () => {
   const icon = screen.getByLabelText(extensionStatusIcon);
   const label = screen.getByLabelText(extensionStatusLabel);
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveClass('bg-green-500');
+  expect(icon).toHaveClass('bg-[var(--pd-status-running)]');
   expect(label).toBeInTheDocument();
-  expect(label).toHaveClass('text-green-500');
+  expect(label).toHaveClass('text-[var(--pd-status-running)]');
   expect(label).toHaveTextContent('ACTIVE');
 });
 
@@ -42,9 +42,9 @@ test('Expect green text and icon when extension is starting', async () => {
   const icon = screen.getByLabelText(extensionStatusIcon);
   const label = screen.getByLabelText(extensionStatusLabel);
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveClass('bg-green-500');
+  expect(icon).toHaveClass('bg-[var(--pd-status-starting)]');
   expect(label).toBeInTheDocument();
-  expect(label).toHaveClass('text-green-500');
+  expect(label).toHaveClass('text-[var(--pd-status-starting)]');
   expect(label).toHaveTextContent('ACTIVATING');
 });
 
@@ -53,9 +53,9 @@ test('Expect green text and icon when extension is stopped', async () => {
   const icon = screen.getByLabelText(extensionStatusIcon);
   const label = screen.getByLabelText(extensionStatusLabel);
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveClass('bg-gray-900');
+  expect(icon).toHaveClass('bg-[var(--pd-status-stopped)]');
   expect(label).toBeInTheDocument();
-  expect(label).toHaveClass('text-gray-900');
+  expect(label).toHaveClass('text-[var(--pd-status-stopped)]');
   expect(label).toHaveTextContent('DISABLED');
 });
 
@@ -64,19 +64,19 @@ test('Expect green text and icon when extension is stopping', async () => {
   const icon = screen.getByLabelText(extensionStatusIcon);
   const label = screen.getByLabelText(extensionStatusLabel);
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveClass('bg-red-500');
+  expect(icon).toHaveClass('bg-[var(--pd-status-terminated)]');
   expect(label).toBeInTheDocument();
-  expect(label).toHaveClass('text-red-500');
+  expect(label).toHaveClass('text-[var(--pd-status-terminated)]');
   expect(label).toHaveTextContent('DISABLING');
 });
 test('Expect green text and icon when extension is unknown', async () => {
   render(ExtensionStatus, { status: 'unknown' });
   const icon = screen.getByLabelText(extensionStatusIcon);
   const label = screen.getByLabelText(extensionStatusLabel);
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveClass('bg-gray-900');
+  expect(icon).toHaveClass('bg-[var(--pd-status-unknown)]');
   expect(label).toBeInTheDocument();
-  expect(label).toHaveClass('text-gray-900');
+  expect(label).toHaveClass('text-[var(--pd-status-unknown)]');
   expect(label).toHaveTextContent('UNKNOWN');
 });
 
@@ -85,8 +85,8 @@ test('Expect purple text and icon when extension is downloadable', async () => {
   const icon = screen.getByLabelText(extensionStatusIcon);
   const label = screen.getByLabelText(extensionStatusLabel);
   expect(icon).toBeInTheDocument();
-  expect(icon).toHaveClass('bg-purple-600');
+  expect(icon).toHaveClass('bg-[var(--pd-notification-dot)]');
   expect(label).toBeInTheDocument();
-  expect(label).toHaveClass('text-gray-700');
+  expect(label).toHaveClass('text-[var(--pd-status-ready)]');
   expect(label).toHaveTextContent('DOWNLOADABLE');
 });
diff --git a/packages/renderer/src/lib/ui/ExtensionStatus.svelte b/packages/renderer/src/lib/ui/ExtensionStatus.svelte
@@ -12,55 +12,55 @@ const statusesStyle = new Map<string, ConnectionStatusStyle>([
   [
     'started',
     {
-      bgColor: 'bg-green-500',
-      txtColor: 'text-green-500',
+      bgColor: 'bg-[var(--pd-status-running)]',
+      txtColor: 'text-[var(--pd-status-running)]',
       label: 'ACTIVE',
     },
   ],
   [
     'starting',
     {
-      bgColor: 'bg-green-500',
-      txtColor: 'text-green-500',
+      bgColor: 'bg-[var(--pd-status-starting)]',
+      txtColor: 'text-[var(--pd-status-starting)]',
       label: 'ACTIVATING',
     },
   ],
   [
     'stopped',
     {
-      bgColor: 'bg-gray-900',
-      txtColor: 'text-gray-900',
+      bgColor: 'bg-[var(--pd-status-stopped)]',
+      txtColor: 'text-[var(--pd-status-stopped)]',
       label: 'DISABLED',
     },
   ],
   [
     'stopping',
     {
-      bgColor: 'bg-red-500',
-      txtColor: 'text-red-500',
+      bgColor: 'bg-[var(--pd-status-terminated)]',
+      txtColor: 'text-[var(--pd-status-terminated)]',
       label: 'DISABLING',
     },
   ],
   [
     'failed',
     {
-      bgColor: 'bg-red-500',
-      txtColor: 'text-red-500',
+      bgColor: 'bg-[var(--pd-status-terminated)]',
+      txtColor: 'text-[var(--pd-status-terminated)]',
       label: 'FAILED',
     },
   ],
   [
     'downloadable',
     {
-      bgColor: 'bg-purple-600',
-      txtColor: 'text-gray-700',
+      bgColor: 'bg-[var(--pd-notification-dot)]',
+      txtColor: 'text-[var(--pd-status-ready)]',
       label: 'DOWNLOADABLE',
     },
   ],
 ]);
 $: statusStyle = statusesStyle.get(status) ?? {
-  bgColor: 'bg-gray-900',
-  txtColor: 'text-gray-900',
+  bgColor: 'bg-[var(--pd-status-unknown)]',
+  txtColor: 'text-[var(--pd-status-unknown)]',
   label: status.toUpperCase(),
 };
 </script>

diff --git a/packages/renderer/src/lib/ui/PasswordInput.svelte b/packages/renderer/src/lib/ui/PasswordInput.svelte
@@ -38,7 +38,7 @@ async function onShowHide() {
   bind:element={element}>
   <svelte:fragment slot="right">
     <button
-      class="px-1 cursor-pointer text-gray-700 group-hover:text-gray-900 group-focus-within:text-gray-900"
+      class="px-1 cursor-pointer text-[var(--pd-input-field-stroke)] group-hover:text-[var(--pd-input-field-hover-stroke)] group-focus-within:text-[var(--pd-input-field-hover-stroke)]"
       class:hidden={!password || readonly}
       aria-label="show/hide"
       on:click={onShowHide}

diff --git a/packages/renderer/src/lib/ui/ProviderResultPage.svelte b/packages/renderer/src/lib/ui/ProviderResultPage.svelte
@@ -122,14 +122,14 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
           selected={true}
           disabled={countBySeverity.critical === 0}
           icon={faExclamationCircle}
-          iconClass="text-red-600"
+          iconClass="text-[var(--pd-state-error)]"
           on:click={event => onSeverityClicked('critical', event.detail)}
           >Critical ({countBySeverity.critical})</ToggleButton>
         <ToggleButton
           selected={true}
           disabled={countBySeverity.high === 0}
           icon={faExclamationTriangle}
-          iconClass="text-amber-500"
+          iconClass="text-[var(--pd-state-warning)]"
           on:click={event => onSeverityClicked('high', event.detail)}>High ({countBySeverity.high})</ToggleButton>
         <ToggleButton
           selected={true}
@@ -147,7 +147,7 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
           selected={true}
           disabled={countBySeverity.success === 0}
           icon={faCheckSquare}
-          iconClass="text-green-500"
+          iconClass="text-[var(--pd-state-success)]"
           on:click={event => onSeverityClicked('success', event.detail)}
           >Passed ({countBySeverity.success})</ToggleButton>
       </ToggleButtonGroup>

diff --git a/packages/renderer/src/lib/ui/StatusDot.svelte b/packages/renderer/src/lib/ui/StatusDot.svelte
@@ -33,6 +33,6 @@ let dotClass = getStatusColor(status);
   </div>
   <!-- If text -->
   {#if number}
-    <div class="text-sm text-bold text-gray-600 mr-0.5">{number}</div>
+    <div class="text-sm text-bold text-[var(--pd-content-text)] mr-0.5">{number}</div>
   {/if}
 </Tooltip>