chore: status-colors

We have hard-coded colors for 'connections' in a few different places:

- Kubernetes resources - text in green-500 when connected.
- Kubernetes connection badge on list pages - green-600 for connected vs
  gray-900 for disconnected.
- Authentication - green-500 for signed in vs gray-500 for signed out.

This adds two new status colors and switches these places to use them.
- 'connected': green-600
- 'disconnected': gray-500

Although 'signed in' is a slightly different thing than connected I didn't
think it merited having different names or using different colors. The
choice of green-600 and gray-500 was taking a balance of what was there +
what looks better in light mode.

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

packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte

@@ -70,11 +70,15 @@ import SettingsPage from './SettingsPage.svelte';
                 <div class="flex flex-row items-center w-full h-full">
                   <dif>
                     <Fa
-                      class="h-3 w-3 text-md mr-2 text-{provider.accounts.length > 0 ? 'green' : 'gray'}-500"
+                      class="h-3 w-3 text-md mr-2 text-{provider.accounts.length > 0
+                        ? 'status-connected'
+                        : 'status-disconnected'}"
                       icon="{faCircle}" />
                   </dif>
                   <div
-                    class="uppercase text-xs text-{provider.accounts.length > 0 ? 'green' : 'gray'}-500"
+                    class="uppercase text-xs text-{provider.accounts.length > 0
+                      ? 'status-connected'
+                      : 'status-disconnected'}"
                     aria-label="Provider Status">
                     <span>
                       {provider.accounts.length > 0 ? 'Logged in' : 'Logged out'}

packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte

@@ -103,8 +103,10 @@ async function handleDeleteContext(contextName: string) {
               <div class="flex-none w-36">
                 {#if $kubernetesContextsState.get(context.name)?.reachable}
                   <div class="flex flex-row pt-2">
-                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                    <div class="ml-1 font-bold text-[9px] text-green-500" aria-label="Context Reachable">REACHABLE</div>
+                    <div class="w-3 h-3 rounded-full bg-status-connected"></div>
+                    <div class="ml-1 font-bold text-[9px] text-status-connected" aria-label="Context Reachable">
+                      REACHABLE
+                    </div>
                   </div>
                   <div class="flex flex-row gap-4 mt-4">
                     <div class="text-center">

packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.spec.ts

@@ -90,7 +90,7 @@ test('expect badges to be green when reachable', async () => {
 
   expect(mocks.getCurrentKubeContextState).toHaveBeenCalled();
   const status = screen.getByRole('status');
-  expect(status.firstChild).toHaveClass('bg-green-600');
+  expect(status.firstChild).toHaveClass('bg-status-connected');
 });
 
 test('expect badges to be gray when not reachable', async () => {
@@ -106,7 +106,7 @@ test('expect badges to be gray when not reachable', async () => {
 
   expect(mocks.getCurrentKubeContextState).toHaveBeenCalled();
   const status = screen.getByRole('status');
-  expect(status.firstChild).toHaveClass('bg-gray-900');
+  expect(status.firstChild).toHaveClass('bg-status-disconnected');
 });
 
 test('expect no tooltip when no error', async () => {

packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.svelte

@@ -11,8 +11,8 @@ function getText(state?: ContextGeneralState): string {
 }
 
 function getClassColor(state?: ContextGeneralState): string {
-  if (state?.reachable) return 'bg-green-600';
-  return 'bg-gray-900';
+  if (state?.reachable) return 'bg-status-connected';
+  return 'bg-status-disconnected';
 }
 
 $: text = getText($kubernetesCurrentContextState);

tailwind.config.cjs

@@ -77,6 +77,8 @@ module.exports = {
         // If we don't know the status, use gray
         'unknown': tailwindColors.gray[100],
 
+        'connected': tailwindColors.green[600],
+        'disconnected': tailwindColors.gray[500],
       },
       // The remaining colors below are not part of our palette and are only here
       // to maintain existing code. No new use.