chore: replace colors by using registry colors in preferences, item-f…

…ormats, pvc, and recommendation (podman-desktop#9425) * chore: change hardcoded colors to color registry Signed-off-by: Sonia Sandler <[email protected]>
SoniaSandler · Oct 28, 2024 · ad22e5d · ad22e5d
1 parent 71c2e17
commit ad22e5d
Show file tree

Hide file tree

Showing 16 changed files with 41 additions and 41 deletions.
diff --git a/packages/renderer/src/lib/preferences/ExtensionIcon.spec.ts b/packages/renderer/src/lib/preferences/ExtensionIcon.spec.ts
@@ -100,5 +100,5 @@ test('Expect puzzle for missing icon', async () => {
   const icon = screen.getByRole('img', { hidden: true });
   expect(icon).toBeInTheDocument();
   expect(icon).not.toHaveAttribute('src', extension.icon);
-  expect(icon).toHaveClass('text-violet-600');
+  expect(icon).toHaveClass('text-[var(--pd-invert-content-info-icon)]');
 });
diff --git a/packages/renderer/src/lib/preferences/ExtensionIcon.svelte b/packages/renderer/src/lib/preferences/ExtensionIcon.svelte
@@ -12,5 +12,5 @@ $: fade = extension.state !== 'started' ? ' brightness-50' : '';
 {#if extension.icon}
   <IconImage image={extension.icon} alt={extension.name} class="max-w-8 max-h-8 {fade}" />
 {:else}
-  <Fa class="h-8 w-8 rounded-full text-violet-600 {fade}" size="1.6x" icon={faPuzzlePiece} />
+  <Fa class="h-8 w-8 rounded-full text-[var(--pd-invert-content-info-icon)] {fade}" size="1.6x" icon={faPuzzlePiece} />
 {/if}
diff --git a/packages/renderer/src/lib/preferences/PreferencesCliTool.svelte b/packages/renderer/src/lib/preferences/PreferencesCliTool.svelte
@@ -137,7 +137,7 @@ function getLoggerHandler(_cliToolId: string): ConnectionCallback {
   role="row"
   class="bg-[var(--pd-invert-content-card-bg)] mb-5 rounded-md p-3 flex flex-col"
   aria-label={cliTool.displayName}>
-  <div class="divide-x divide-gray-900 flex flex-row">
+  <div class="divide-x divide-[var(--pd-content-divider)] flex flex-row">
     <div>
       <!-- left col - cli-tool icon/name + "create new" button -->
       <div class="min-w-[170px] max-w-[200px] h-full flex flex-col justify-between">
@@ -219,7 +219,7 @@ function getLoggerHandler(_cliToolId: string): ConnectionCallback {
       </div>
     </div>
     <!-- cli-tools columns -->
-    <div class="grow flex-column divide-gray-900 ml-2">
+    <div class="grow flex-column divide-[var(--pd-content-divider)] ml-2">
       <span class="my-auto ml-3 break-words text-[var(--pd-invert-content-header-text)]" aria-label="cli-display-name"
         >{cliTool.displayName}</span>
       <div
@@ -228,7 +228,7 @@ function getLoggerHandler(_cliToolId: string): ConnectionCallback {
         aria-label="cli-registered-by">
         Registered by {cliTool.extensionInfo.label}
       </div>
-      <div role="region" class="ml-3 mt-2 text-gray-300">
+      <div role="region" class="ml-3 mt-2 text-[var(--pd-invert-content-card-text)]">
         <div class="text-[var(--pd-invert-content-card-text)]">
           <Markdown markdown={cliTool.description} />
         </div>
@@ -289,8 +289,8 @@ function getLoggerHandler(_cliToolId: string): ConnectionCallback {
     </div>
   </div>
   {#if showError}
-    <div class="flex flex-row items-center text-xs text-red-400 ml-[200px] mt-2">
-      <Fa icon={faCircleXmark} class="mr-1 text-red-500" />
+    <div class="flex flex-row items-center text-xs text-[var(--pd-state-error)] ml-[200px] mt-2">
+      <Fa icon={faCircleXmark} class="mr-1 text-[var(--pd-state-error)]" />
       <span>{errorMessage}</span>
       <Button
         type="link"

diff --git a/packages/renderer/src/lib/preferences/PreferencesConnectionCreationOrEditRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesConnectionCreationOrEditRendering.svelte
@@ -520,7 +520,7 @@ function getConnectionResourceConfigurationNumberValue(
                     <Markdown markdown={configurationKey.markdownDescription} />
                   {/if}
                   {#if configurationKey.format === 'memory' || configurationKey.format === 'diskSize' || configurationKey.format === 'cpu'}
-                    <div class="text-gray-600">
+                    <div class="text-[var(--pd-content-text)]">
                       <EditableConnectionResourceItem
                         record={configurationKey}
                         value={getConnectionResourceConfigurationNumberValue(configurationKey, configurationValues)}

diff --git a/packages/renderer/src/lib/preferences/PreferencesProviderInstallationModal.svelte b/packages/renderer/src/lib/preferences/PreferencesProviderInstallationModal.svelte
@@ -36,10 +36,10 @@ function openLink(e: MouseEvent, url: string): void {
               class="mx-auto max-h-12" />
           </div>
           <div class="flex flex-row mx-auto text-md">Some system requirements are missing.</div>
-          <div class="flex flex-col min-h-[150px] mt-5 mx-auto py-4 px-10 rounded-md bg-charcoal-800">
+          <div class="flex flex-col min-h-[150px] mt-5 mx-auto py-4 px-10 rounded-md bg-[var(--pd-content-card-bg)]">
             {#each preflightChecks as preCheck}
               <div class="flex flex-row mb-2 mx-auto">
-                <Fa icon={faCircleXmark} class="text-red-500 mt-0.5" />
+                <Fa icon={faCircleXmark} class="text-[var(--pd-state-error)] mt-0.5" />
                 <div class="flex flex-col ml-1 text-sm">
                   {#if preCheck.description}
                     <span class="w-full" aria-label={preCheck.description}>{preCheck.description}</span>
@@ -59,7 +59,7 @@ function openLink(e: MouseEvent, url: string): void {
               </div>
             {/each}
           </div>
-          <div class="text-xs text-gray-800 mt-2 text-center">
+          <div class="text-xs text-[var(--pd-content-text)] mt-2 text-center">
             Be sure that your system fulfills all the requirements above before proceeding
           </div>
           <div class="flex flex-row justify-end w-full pt-2">

diff --git a/packages/renderer/src/lib/preferences/PreferencesProviderRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesProviderRendering.svelte
@@ -102,14 +102,14 @@ async function stopReceivingLogs(providerInternalId: string): Promise<void> {
       <!-- Manage lifecycle-->
       {#if providerInfo?.lifecycleMethods}
         <div class="pl-1 py-2 px-6">
-          <div class="text-sm italic text-gray-700">Status</div>
+          <div class="text-sm italic text-[var(--pd-content-text)]">Status</div>
           <div class="pl-3">{providerInfo.status}</div>
         </div>
 
         <div class="py-2 px-6 flex flex:row">
           <!-- start is enabled only in stopped mode-->
           {#if providerInfo?.lifecycleMethods.includes('start')}
-            <div class="px-2 text-sm italic text-gray-700">
+            <div class="px-2 text-sm italic text-[var(--pd-content-text)]">
               <Button disabled={providerInfo.status !== 'stopped'} on:click={() => startProvider()} icon={faPlay}>
                 Start
               </Button>
@@ -118,13 +118,13 @@ async function stopReceivingLogs(providerInternalId: string): Promise<void> {
 
           <!-- stop is enabled only in started mode-->
           {#if providerInfo.lifecycleMethods.includes('stop')}
-            <div class="px-2 text-sm italic text-gray-700">
+            <div class="px-2 text-sm italic text-[var(--pd-content-text)]">
               <Button disabled={providerInfo.status !== 'started'} on:click={() => stopProvider()} icon={faStop}>
                 Stop
               </Button>
             </div>
           {/if}
-          <div class="px-2 text-sm italic text-gray-700">
+          <div class="px-2 text-sm italic text-[var(--pd-content-text)]">
             <Button on:click={() => (showModalProviderInfo = providerInfo)} icon={faHistory}>Show Logs</Button>
           </div>
 

diff --git a/packages/renderer/src/lib/preferences/PreferencesProxiesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesProxiesRendering.svelte
@@ -85,7 +85,7 @@ function validate(event: any) {
           for="httpProxy"
           class="mb-2 font-medium {proxyState === ProxyState.PROXY_MANUAL
             ? 'text-[var(--pd-invert-content-card-text)]'
-            : 'text-gray-900'}">Web Proxy (HTTP):</label>
+            : 'text-[var(--pd-content-sub-header)]'}">Web Proxy (HTTP):</label>
         <Input
           name="httpProxy"
           id="httpProxy"
@@ -103,7 +103,7 @@ function validate(event: any) {
           for="httpsProxy"
           class="pt-4 mb-2 font-medium {proxyState === ProxyState.PROXY_MANUAL
             ? 'text-[var(--pd-invert-content-card-text)]'
-            : 'text-gray-900'}">Secure Web Proxy (HTTPS):</label>
+            : 'text-[var(--pd-content-sub-header)]'}">Secure Web Proxy (HTTPS):</label>
         <Input
           name="httpsProxy"
           id="httpsProxy"
@@ -121,7 +121,7 @@ function validate(event: any) {
           for="httpProxy"
           class="pt-4 mb-2 font-medium {proxyState === ProxyState.PROXY_MANUAL
             ? 'text-[var(--pd-invert-content-card-text)]'
-            : 'text-gray-900'}">Bypass proxy settings for these hosts and domains:</label>
+            : 'text-[var(--pd-content-sub-header)]'}">Bypass proxy settings for these hosts and domains:</label>
         <Input
           name="noProxy"
           id="noProxy"

diff --git a/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
@@ -361,7 +361,7 @@ function hasAnyConfiguration(provider: ProviderInfo) {
   <span slot="subtitle" class:hidden={providers.length === 0}>
     Additional provider information is available under <a
       href="/extensions"
-      class="text-gray-700 underline underline-offset-2">Extensions</a>
+      class="text-[var(--pd-content-text)] underline underline-offset-2">Extensions</a>
   </span>
   <div class="h-full" role="region" aria-label="Featured Provider Resources">
     <EmptyScreen
@@ -373,7 +373,7 @@ function hasAnyConfiguration(provider: ProviderInfo) {
 
     {#each providers as provider}
       <div
-        class="bg-[var(--pd-invert-content-card-bg)] mb-5 rounded-md p-3 divide-x divide-gray-900 flex"
+        class="bg-[var(--pd-invert-content-card-bg)] mb-5 rounded-md p-3 divide-x divide-[var(--pd-content-divider)] flex"
         role="region"
         aria-label={provider.id}>
         <div role="region" aria-label="Provider Setup">
@@ -446,7 +446,7 @@ function hasAnyConfiguration(provider: ProviderInfo) {
         </div>
         <!-- providers columns -->
         <div
-          class="grow flex flex-wrap divide-gray-900 ml-2 text-[var(--pd-invert-content-card-text)]"
+          class="grow flex flex-wrap divide-[var(--pd-content-divider)] ml-2 text-[var(--pd-invert-content-card-text)]"
           role="region"
           aria-label="Provider Connections">
           <PreferencesConnectionsEmptyRendering
@@ -470,7 +470,7 @@ function hasAnyConfiguration(provider: ProviderInfo) {
                   </button>
                 </Tooltip>
               </div>
-              <div class="{container.status !== 'started' ? 'text-gray-900' : ''} font-semibold">
+              <div class="{container.status !== 'started' ? 'text-[var(--pd-content-sub-header)]' : ''} font-semibold">
                 {container.displayName}
               </div>
               <div class="flex" aria-label="Connection Status">
@@ -480,16 +480,16 @@ function hasAnyConfiguration(provider: ProviderInfo) {
                   <ConnectionErrorInfoButton status={status} />
                 {/if}
               </div>
-              <div class="mt-2 text-gray-700 text-xs" aria-label="{container.name} type">
+              <div class="mt-2 text-[var(--pd-content-text)] text-xs" aria-label="{container.name} type">
                 {#if container.type === 'docker'}Docker{:else if container.type === 'podman'}Podman{/if} endpoint
               </div>
               <PreferencesResourcesRenderingCopyButton
-                class={container.status !== 'started' ? 'text-gray-900' : ''}
+                class={container.status !== 'started' ? 'text-[var(--pd-content-sub-header)]' : ''}
                 path={container.endpoint.socketPath} />
               {#if providerContainerConfiguration.has(provider.internalId)}
                 {@const providerConfiguration = providerContainerConfiguration.get(provider.internalId) ?? []}
                 <div
-                  class="flex mt-3 {container.status !== 'started' ? 'text-gray-900' : ''}"
+                  class="flex mt-3 {container.status !== 'started' ? 'text-[var(--pd-content-sub-header)]' : ''}"
                   role="group"
                   aria-label="Provider Configuration">
                   {#each providerConfiguration.filter(conf => conf.connection === container.name) as connectionSetting}
@@ -531,7 +531,7 @@ function hasAnyConfiguration(provider: ProviderInfo) {
                 connectionStatus={containerConnectionStatus.get(getProviderConnectionName(provider, container))}
                 updateConnectionStatus={updateContainerStatus}
                 addConnectionToRestartingQueue={addConnectionToRestartingQueue} />
-              <div class="mt-1.5 text-gray-900 text-[9px] flex justify-between">
+              <div class="mt-1.5 text-[var(--pd-content-sub-header)] text-[9px] flex justify-between">
                 <div aria-label="Connection Version">
                   {provider.name}
                   {provider.version ? `v${provider.version}` : ''}
@@ -564,9 +564,9 @@ function hasAnyConfiguration(provider: ProviderInfo) {
                 <ConnectionStatus status={kubeConnection.status} />
               </div>
               <div class="mt-2">
-                <div class="text-gray-700 text-xs">Kubernetes endpoint</div>
+                <div class="text-[var(--pd-content-text)] text-xs">Kubernetes endpoint</div>
                 <div class="mt-1">
-                  <span class="my-auto text-xs" class:text-gray-900={kubeConnection.status !== 'started'}
+                  <span class="my-auto text-xs" class:text-[var(--pd-content-sub-header)]={kubeConnection.status !== 'started'}
                     >{kubeConnection.endpoint.apiURL}</span>
                 </div>
               </div>

diff --git a/packages/renderer/src/lib/preferences/item-formats/EditableItem.svelte b/packages/renderer/src/lib/preferences/item-formats/EditableItem.svelte
@@ -83,10 +83,10 @@ function onCancelClick(e: MouseEvent) {
     </Button>
   {:else}
     <Button on:click={onCancelClick} title="Cancel" class="ml-3" padding="p-2" type="link">
-      <Fa size="0.9x" class="text-red-500" icon={faXmark} />
+      <Fa size="0.9x" class="text-[var(--pd-state-error)]" icon={faXmark} />
     </Button>
     <Button on:click={onSaveClick} title="Save" padding="p-2" disabled={disableSaveButton} type="link">
-      <Fa size="0.9x" class={`${disableSaveButton ? 'text-gray-500' : 'text-green-500'}`} icon={faCheck} />
+      <Fa size="0.9x" class={`${disableSaveButton ? 'text-[var(--pd-button-disabled-text)]' : 'text-[var(--pd-state-success)]'}`} icon={faCheck} />
     </Button>
   {/if}
 </div>
diff --git a/packages/renderer/src/lib/preferences/item-formats/EnumItem.svelte b/packages/renderer/src/lib/preferences/item-formats/EnumItem.svelte
@@ -26,7 +26,7 @@ function onChangeHandler(newValue: unknown) {
   ariaLabel={record.description}>
   {#if record.enum}
     {#each record.enum as recordEnum}
-      <option value={recordEnum}>{recordEnum}</option>
+      <option class="bg-[var(--pd-input-field-focused-bg)]" value={recordEnum}>{recordEnum}</option>
     {/each}
   {/if}
 </Dropdown>
diff --git a/packages/renderer/src/lib/preferences/item-formats/FloatNumberItem.svelte b/packages/renderer/src/lib/preferences/item-formats/FloatNumberItem.svelte
@@ -68,13 +68,13 @@ function assertNumericValueIsValid(value: number): boolean {
 </script>
 
 <div
-  class="flex flex-row rounded-sm bg-zinc-700 text-sm divide-x divide-charcoal-800 w-24 border-b"
-  class:border-violet-500={!numberInputInvalid}
-  class:border-red-500={numberInputInvalid}>
+  class="flex flex-row rounded-sm bg-[var(--pd-input-field-bg)] text-sm divide-x divide-[var(--pd-dropdown-divider)] w-24 border-b"
+  class:border-[var(--pd-state-info)]={!numberInputInvalid}
+  class:border-[var(--pd-state-error)]={numberInputInvalid}>
   <Tooltip topRight tip={numberInputErrorMessage}>
     <input
       type="text"
-      class="w-full px-2 outline-none focus:outline-none text-white text-sm py-0.5"
+      class="w-full px-2 outline-none focus:outline-none text-[var(--pd-input-field-focused-text)] text-sm py-0.5"
       name={record.id}
       bind:value={recordValue}
       on:keypress={event => onNumberInputKeyPress(event)}

diff --git a/packages/renderer/src/lib/preferences/item-formats/SliderItem.svelte b/packages/renderer/src/lib/preferences/item-formats/SliderItem.svelte
@@ -23,4 +23,4 @@ function onInput(event: Event) {
   value={value}
   aria-label={record.description}
   on:input={onInput}
-  class="w-full h-1 bg-violet-600 rounded-lg appearance-none accent-violet-600 cursor-pointer range-xs mt-2" />
+  class="w-full h-1 bg-[var(--pd-input-toggle-on-bg)] rounded-lg appearance-none accent-[var(--pd-input-toggle-on-bg)] cursor-pointer range-xs mt-2" />
diff --git a/packages/renderer/src/lib/pvc/PVCDetails.svelte b/packages/renderer/src/lib/pvc/PVCDetails.svelte
@@ -62,7 +62,7 @@ async function loadDetails() {
     <svelte:fragment slot="actions">
       <PVCActions pvc={pvc} detailed={true} on:update={() => (pvc = pvc)} />
     </svelte:fragment>
-    <div slot="detail" class="flex py-2 w-full justify-end text-sm text-gray-700">
+    <div slot="detail" class="flex py-2 w-full justify-end text-sm text-[var(--pd-content-text)]">
       <StateChange state={pvc.status} />
     </div>
     <svelte:fragment slot="tabs">

diff --git a/packages/renderer/src/lib/pvc/PVCDetailsSummary.svelte b/packages/renderer/src/lib/pvc/PVCDetailsSummary.svelte
@@ -24,6 +24,6 @@ basic information -->
     <KubePVCStatusArtifact artifact={pvc.status} />
     <KubePVCArtifact artifact={pvc.spec} />
   {:else}
-    <p class="text-purple-500 font-medium">Loading ...</p>
+    <p class="text-[var(--pd-state-info)] font-medium">Loading ...</p>
   {/if}
 </Table>
diff --git a/packages/renderer/src/lib/recommendation/ExtensionBanner.spec.ts b/packages/renderer/src/lib/recommendation/ExtensionBanner.spec.ts
@@ -95,7 +95,7 @@ describe('backgrounds', () => {
 
     const card = screen.getByLabelText('Recommended extension');
     expect(card).toBeDefined();
-    expect(card.classList).toContain('bg-charcoal-800');
+    expect(card.classList).toContain('bg-[var(--pd-modal-bg)]');
     expect(card.attributes.getNamedItem('style')?.value).toBeUndefined();
   });
 

diff --git a/packages/renderer/src/lib/recommendation/ExtensionBanner.svelte b/packages/renderer/src/lib/recommendation/ExtensionBanner.svelte
@@ -27,8 +27,8 @@ $effect(() => {
 <div
   style={style}
   aria-label="Recommended extension"
-  class:bg-charcoal-800={!hasBackground}
-  class="bg-charcoal-800 bg-cover max-h-[180px] px-5 py-5 rounded-lg grid grid-cols-[20px_8fr_7fr] gap-4 overflow-hidden">
+  class:bg-[var(--pd-modal-bg)]={!hasBackground}
+  class="bg-[var(--pd-modal-bg)] bg-cover max-h-[180px] px-5 py-5 rounded-lg grid grid-cols-[20px_8fr_7fr] gap-4 overflow-hidden">
   <!-- icon column -->
   <div>
     <img class="w-4 h-4' object-contain mt-1" alt="banner icon" src={banner.icon} />