chore: replace colors by using registry colors in extensions, feature…

…d, feedback, and image (podman-desktop#9424) * chore: change hardcoded colors to color registry Signed-off-by: Sonia Sandler <[email protected]>
SoniaSandler · Oct 29, 2024 · f470e81 · f470e81
1 parent 72ba503
commit f470e81
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 22 deletions.
diff --git a/packages/main/src/plugin/color-registry.ts b/packages/main/src/plugin/color-registry.ts
@@ -256,6 +256,8 @@ export class ColorRegistry {
     this.initStates();
     this.initFiles();
     this.initTerminal();
+    this.initProgressBar();
+    this.initBadge();
   }
 
   protected initDefaults(): void {
@@ -1428,4 +1430,40 @@ export class ColorRegistry {
       light: colorPalette.white,
     });
   }
+
+  protected initProgressBar(): void {
+    const pb = 'progressBar-';
+    this.registerColor(`${pb}bg`, {
+      dark: colorPalette.gray[700],
+      light: colorPalette.gray[700],
+    });
+    this.registerColor(`${pb}in-progress-bg`, {
+      dark: colorPalette.purple[600],
+      light: colorPalette.purple[600],
+    });
+    this.registerColor(`${pb}text`, {
+      dark: colorPalette.purple[500],
+      light: colorPalette.purple[600],
+    });
+  }
+
+  protected initBadge(): void {
+    const badge = 'badge-';
+    this.registerColor(`${badge}builtin-extension-bg`, {
+      dark: colorPalette.sky[200],
+      light: colorPalette.sky[200],
+    });
+    this.registerColor(`${badge}builtin-extension-text`, {
+      dark: colorPalette.charcoal[800],
+      light: colorPalette.charcoal[800],
+    });
+    this.registerColor(`${badge}dd-extension-bg`, {
+      dark: colorPalette.sky[600],
+      light: colorPalette.sky[600],
+    });
+    this.registerColor(`${badge}dd-extension-text`, {
+      dark: colorPalette.white,
+      light: colorPalette.white,
+    });
+  }
 }
diff --git a/packages/renderer/src/lib/extensions/CatalogExtension.svelte b/packages/renderer/src/lib/extensions/CatalogExtension.svelte
@@ -18,13 +18,13 @@ function openExtensionDetails() {
 </script>
 
 <div
-  class="rounded-lg border border-[var(--pd-content-bg)] flex flex-col bg-[var(--pd-content-card-bg)] hover:border-dustypurple-500 min-h-32 max-h-32"
+  class="rounded-lg border border-[var(--pd-content-bg)] flex flex-col bg-[var(--pd-content-card-bg)] hover:border-[var(--pd-content-card-border-selected)] min-h-32 max-h-32"
   role="group"
   aria-label={catalogExtensionUI.displayName}>
   <!-- if featured need to display a top banner -->
 
   {#if catalogExtensionUI.isFeatured}
-    <div class="bg-dustypurple-500 rounded-t-md px-2 font-light text-sm min-h-6 flex flex-row items-center">
+    <div class="bg-[var(--pd-content-card-border-selected)] text-[var(--pd-card-header-text)] rounded-t-md px-2 font-light text-sm min-h-6 flex flex-row items-center">
       Featured
     </div>
   {/if}
@@ -53,7 +53,7 @@ function openExtensionDetails() {
       </div>
 
       {#if catalogExtensionUI.isInstalled}
-        <div class="flex flex-1 text-dustypurple-700 p-1 justify-items-end flex-row place-content-end items-center">
+        <div class="flex flex-1 text-[var(--pd-invert-content-info-icon)] p-1 justify-items-end flex-row place-content-end items-center">
           <Fa class="ml-1.5 mr-2" size="1.1x" icon={faCheckCircle} />
           <div class="uppercase text-sm cursor-default">Already installed</div>
         </div>

diff --git a/packages/renderer/src/lib/extensions/ExtensionBadge.svelte b/packages/renderer/src/lib/extensions/ExtensionBadge.svelte
@@ -9,11 +9,11 @@ export let extension: { type: 'dd' | 'pd'; removable: boolean };
 <div class="flex flex-row gap-1 items-center {$$props.class}" role="region" aria-label="Extension Badge">
   {#if extension.type === 'dd'}
     <Tooltip right tip="Docker Desktop extension">
-      <Badge class="text-[8px] text-white" color="bg-sky-600" label="Docker Desktop extension" />
+      <Badge class="text-[8px] text-[var(--pd-badge-dd-extension-text)]" color="bg-[var(--pd-badge-dd-extension-bg)]" label="Docker Desktop extension" />
     </Tooltip>
   {:else if !extension.removable}
     <Tooltip right tip="built-in Extension">
-      <Badge class="text-[8px] text-charcoal-800" color="bg-sky-200" label="built-in Extension" />
+      <Badge class="text-[8px] text-[var(--pd-badge-builtin-extension-text)]" color="bg-[var(--pd-badge-builtin-extension-bg)]" label="built-in Extension" />
     </Tooltip>
   {/if}
 </div>
diff --git a/packages/renderer/src/lib/extensions/InstallManuallyExtensionModal.svelte b/packages/renderer/src/lib/extensions/InstallManuallyExtensionModal.svelte
@@ -117,15 +117,15 @@ function handleKeydown(e: KeyboardEvent) {
       <div class="w-full min-h-9 h-9 py-2">
         {#if installInProgress}
           <div class="flex grow">
-            <div class="w-full h-4 mb-4 rounded-md bg-gray-600 progress-bar overflow-hidden">
+            <div class="w-full h-4 mb-4 rounded-md bg-[var(--pd-progressBar-bg)] progress-bar overflow-hidden">
               <div
-                class="h-4 bg-purple-500 rounded-md"
+                class="h-4 bg-[var(--pd-progressBar-in-progress-bg)] rounded-md"
                 role="progressbar"
                 aria-label="Installation progress"
                 style="width: {progressPercent}%">
               </div>
             </div>
-            <div class="ml-2 w-3 text-sm text-purple-500">{progressPercent}%</div>
+            <div class="ml-2 w-3 text-sm text-[var(--pd-progressBar-text)]">{progressPercent}%</div>
           </div>
         {/if}
       </div>

diff --git a/packages/renderer/src/lib/featured/FeaturedExtension.svelte b/packages/renderer/src/lib/featured/FeaturedExtension.svelte
@@ -16,7 +16,7 @@ export let displayTitle: boolean = false;
   class:border-[var(--pd-card-bg)]={variant === 'primary'}
   class:bg-[var(--pd-invert-content-card-bg)]={variant === 'secondary'}
   class:border-[var(--pd-invert-content-card-bg)]={variant === 'secondary'}
-  class="rounded-md flex flex-row justify-center p-4 border-2 hover:border-dustypurple-500"
+  class="rounded-md flex flex-row justify-center p-4 border-2 hover:border-[var(--pd-content-card-border-selected)]"
   aria-label={featuredExtension.displayName}>
   <div class="flex flex-col flex-1">
     {#if displayTitle}
@@ -31,14 +31,14 @@ export let displayTitle: boolean = false;
       </div>
       <div class="h-full w-18 flex flex-col items-end place-content-center">
         {#if featuredExtension.installed}
-          <div class="text-dustypurple-700 p-1 text-center flex flex-row place-items-center">
+          <div class="text-[var(--pd-content-card-border-selected)] p-1 text-center flex flex-row place-items-center">
             <Fa class="ml-1.5 mr-2" size="1.1x" icon={faCheckCircle} />
             <div class="uppercase font-bold text-sm cursor-default">installed</div>
           </div>
         {:else if featuredExtension.fetchable}
           <FeaturedExtensionDownload extension={featuredExtension} />
         {:else}
-          <div class="text-charcoal-300 p-1 text-center flex flex-row place-items-center">
+          <div class="text-[var(--pd-label-text)] p-1 text-center flex flex-row place-items-center">
             <Fa class="ml-1.5 mr-1" size="1.1x" icon={faCircleXmark} />
             <div class="uppercase text-sm cursor-default font-extralight">N/A</div>
           </div>

diff --git a/packages/renderer/src/lib/feedback/SendFeedback.svelte b/packages/renderer/src/lib/feedback/SendFeedback.svelte
@@ -143,8 +143,8 @@ async function openGitHub(): Promise<void> {
         <div class="text-[var(--pd-modal-text)] p-1 flex flex-row items-center text-xs">
           <Fa size="1.125x" class="cursor-pointer" icon={faQuestionCircle} />
           <span aria-label="Like Podman Desktop? Give us a star on GitHub" class="flex items-center">
-            <Fa class="px-1 text-purple-500" icon={faHeart} />{smileyRating === 3 ? 'Like' : 'Love'} It? Give us a <Fa
-              class="px-1 text-amber-400"
+            <Fa class="px-1 text-[var(--pd-invert-content-info-icon)]" icon={faHeart} />{smileyRating === 3 ? 'Like' : 'Love'} It? Give us a <Fa
+              class="px-1 text-[var(--pd-state-warning)]"
               icon={faStar} />on <Link aria-label="GitHub" onclick={openGitHub}>GitHub</Link>
           </span>
         </div>

diff --git a/packages/renderer/src/lib/image/PullImage.svelte b/packages/renderer/src/lib/image/PullImage.svelte
@@ -239,7 +239,7 @@ async function searchImages(value: string): Promise<string[]> {
         {#if selectedProviderConnection?.type === 'podman' && podmanFQN}
           <div class="absolute mt-2 ml-[-18px] self-start">
             <Tooltip tip="Shortname images will be pulled from Docker Hub" topRight>
-              <Fa id="shortname-warning" size="1.1x" class="text-amber-400" icon={faTriangleExclamation} />
+              <Fa id="shortname-warning" size="1.1x" class="text-[var(--pd-state-warning)]" icon={faTriangleExclamation} />
             </Tooltip>
           </div>
         {/if}

diff --git a/packages/renderer/src/lib/image/PushImageModal.svelte b/packages/renderer/src/lib/image/PushImageModal.svelte
@@ -81,15 +81,15 @@ $: window.hasAuthconfigForImage(imageInfoToPush.name).then(result => (isAuthenti
     <div class="pb-4">
       <label for="modalImageTag" class="block mb-2 text-sm font-medium text-[var(--pd-modal-text)]">Image tag</label>
       {#if isAuthenticatedForThisImage}
-        <Fa class="absolute mt-3 ml-1.5 text-green-300" size="1x" icon={faCheckCircle} />
+        <Fa class="absolute mt-3 ml-1.5 text-[var(--pd-state-success)]" size="1x" icon={faCheckCircle} />
       {:else}
-        <Fa class="absolute mt-3 ml-1.5 text-amber-500" size="1x" icon={faTriangleExclamation} />
+        <Fa class="absolute mt-3 ml-1.5 text-[var(--pd-state-warning)]" size="1x" icon={faTriangleExclamation} />
       {/if}
 
       <select
-        class="text-sm rounded-lg block w-full p-2.5 bg-charcoal-600 pl-6 border-r-8 border-transparent outline-1 outline {isAuthenticatedForThisImage
-          ? 'outline-gray-900'
-          : 'outline-amber-500'} placeholder-gray-700 text-white"
+        class="text-sm rounded-lg block w-full p-2.5 bg-[var(--pd-dropdown-bg)] pl-6 border-r-8 border-transparent outline-1 outline {isAuthenticatedForThisImage
+          ? 'outline-[var(--pd-modal-border)]'
+          : 'outline-[var(--pd-state-warning)]'} placeholder-[var(--pd-content-text)] text-[var(--pd-default-text)]"
         name="imageChoice"
         bind:value={selectedImageTag}>
         {#each imageTags as imageTag}
@@ -99,7 +99,7 @@ $: window.hasAuthconfigForImage(imageInfoToPush.name).then(result => (isAuthenti
       <!-- If the image is UNAUTHENTICATED, show a warning that the image is unable to be pushed
       and to click to go to the registries page -->
       {#if !isAuthenticatedForThisImage}
-        <p class="text-amber-500 pt-1">
+        <p class="text-[var(--pd-state-warning)] pt-1">
           No registry with push permissions found. <Link on:click={() => router.goto('/preferences/registries')}
             >Add a registry now.</Link>
         </p>{/if}

diff --git a/packages/renderer/src/lib/image/RecommendedRegistry.svelte b/packages/renderer/src/lib/image/RecommendedRegistry.svelte
@@ -28,13 +28,13 @@ function goToAuthPage() {
 </script>
 
 {#each recommendedRegistriesToInstall as registry}
-  <div class="text-amber-500 flex flex-row min-h-10 items-center pt-2 space-x-2">
+  <div class="text-[var(--pd-state-warning)] flex flex-row min-h-10 items-center pt-2 space-x-2">
     {#if !registry.isInstalled}
       <FeaturedExtensionDownload extension={registry.extensionDetails} />
     {/if}
     <p>
       {registry.isInstalled ? 'Check' : 'Install'} the &nbsp;<a
-        class="text-amber-500 underline"
+        class="text-[var(--pd-state-warning)] underline"
         href="/extensions/details/{registry.extensionId}">{registry.name} extension</a>
       to manage {registry.id}
     </p>