refactor(staged): switch badge colors from HSL to OKLCH and centralize helpers

apps/staged/src/lib/features/projects/ProjectsList.svelte

@@ -35,6 +35,7 @@
   import { setProjects } from './projectsSidebarState.svelte';
   import { darkMode } from '../../stores/isDark.svelte';
   import { repoBadgeStore } from '../../stores/repoBadges.svelte';
+  import { badgeBg, badgeFg, badgeBgHover } from '../../shared/badgeColors';
 
   type FilterKind = 'unread' | 'running' | { repo: string; subpath: string };
 
@@ -454,7 +455,7 @@
                 class:active
                 onclick={() => toggleFilter(filter)}
                 style={badge
-                  ? `--repo-bg: ${darkMode.value ? `hsl(${badge.hue} 35% 22%)` : `hsl(${badge.hue} 50% 92%)`}; --repo-fg: ${darkMode.value ? `hsl(${badge.hue} 50% 75%)` : `hsl(${badge.hue} 55% 35%)`}; --repo-bg-hover: ${darkMode.value ? `hsl(${badge.hue} 35% 28%)` : `hsl(${badge.hue} 50% 88%)`}`
+                  ? `--repo-bg: ${badgeBg(badge.hue, darkMode.value)}; --repo-fg: ${badgeFg(badge.hue, darkMode.value)}; --repo-bg-hover: ${badgeBgHover(badge.hue, darkMode.value)}`
                   : ''}
               >
                 <RepoLabel githubRepo={rf.repo} subpath={rf.subpath || null} />
@@ -554,11 +555,10 @@
                       {#if badge}
                         <span
                           class="repo-badge-label"
-                          style="background: {darkMode.value
-                            ? `hsl(${badge.hue} 35% 22%)`
-                            : `hsl(${badge.hue} 50% 92%)`}; color: {darkMode.value
-                            ? `hsl(${badge.hue} 50% 75%)`
-                            : `hsl(${badge.hue} 55% 35%)`};"
+                          style="background: {badgeBg(badge.hue, darkMode.value)}; color: {badgeFg(
+                            badge.hue,
+                            darkMode.value
+                          )};"
                         >
                           <RepoLabel githubRepo={r.githubRepo} subpath={r.subpath} />
                         </span>
@@ -573,11 +573,10 @@
                     {#if badge}
                       <span
                         class="repo-badge-label"
-                        style="background: {darkMode.value
-                          ? `hsl(${badge.hue} 35% 22%)`
-                          : `hsl(${badge.hue} 50% 92%)`}; color: {darkMode.value
-                          ? `hsl(${badge.hue} 50% 75%)`
-                          : `hsl(${badge.hue} 55% 35%)`};"
+                        style="background: {badgeBg(badge.hue, darkMode.value)}; color: {badgeFg(
+                          badge.hue,
+                          darkMode.value
+                        )};"
                       >
                         <RepoLabel githubRepo={project.githubRepo} subpath={project.subpath} />
                       </span>

apps/staged/src/lib/features/projects/SuggestedRepos.svelte

@@ -14,6 +14,7 @@
   import { repoBadgeStore } from '../../stores/repoBadges.svelte';
   import { darkMode } from '../../stores/isDark.svelte';
   import RepoLabel from '../../shared/RepoLabel.svelte';
+  import * as badge from '../../shared/badgeColors';
   import Spinner from '../../shared/Spinner.svelte';
   import { getStoreValue, setStoreValue } from '../../shared/persistentStore';
 
@@ -114,25 +115,7 @@
     return repoBadgeStore.lookup(suggestion.githubRepo, suggestion.subpath)?.hue ?? 210;
   }
 
-  function badgeBg(hue: number): string {
-    return darkMode.value ? `hsl(${hue} 35% 22%)` : `hsl(${hue} 50% 92%)`;
-  }
-
-  function badgeFg(hue: number): string {
-    return darkMode.value ? `hsl(${hue} 50% 75%)` : `hsl(${hue} 55% 35%)`;
-  }
-
-  function badgeBorder(hue: number): string {
-    return darkMode.value ? `hsl(${hue} 35% 32%)` : `hsl(${hue} 45% 82%)`;
-  }
-
-  function badgeBgHover(hue: number): string {
-    return darkMode.value ? `hsl(${hue} 40% 30%)` : `hsl(${hue} 60% 85%)`;
-  }
-
-  function badgeBorderHover(hue: number): string {
-    return darkMode.value ? `hsl(${hue} 45% 45%)` : `hsl(${hue} 50% 65%)`;
-  }
+  const dark = $derived(darkMode.value);
 </script>
 
 {#if dismissLoaded && !dismissed && suggestions.length > 0}
@@ -149,11 +132,16 @@
         {@const isAdding = addingKey === suggestionKey(suggestion)}
         <button
           class="suggested-chip"
-          style="--chip-bg: {badgeBg(hue)}; --chip-bg-hover: {badgeBgHover(
-            hue
-          )}; --chip-border: {badgeBorder(hue)}; --chip-border-hover: {badgeBorderHover(
-            hue
-          )}; --chip-fg: {badgeFg(hue)};"
+          style="--chip-bg: {badge.badgeBg(hue, dark)}; --chip-bg-hover: {badge.badgeBgHover(
+            hue,
+            dark
+          )}; --chip-border: {badge.badgeBorder(
+            hue,
+            dark
+          )}; --chip-border-hover: {badge.badgeBorderHover(hue, dark)}; --chip-fg: {badge.badgeFg(
+            hue,
+            dark
+          )};"
           disabled={isAdding}
           onclick={() => handleAdd(suggestion)}
         >

apps/staged/src/lib/shared/RepoBadge.svelte

@@ -6,6 +6,7 @@
 -->
 <script lang="ts">
   import { darkMode } from '../stores/isDark.svelte';
+  import { badgeBg, badgeFg } from './badgeColors';
 
   interface Props {
     shortName: string;
@@ -15,9 +16,9 @@
 
   let { shortName, hue, small = false }: Props = $props();
 
-  let bg = $derived(darkMode.value ? `hsl(${hue} 35% 22%)` : `hsl(${hue} 50% 92%)`);
+  let bg = $derived(badgeBg(hue, darkMode.value));
 
-  let fg = $derived(darkMode.value ? `hsl(${hue} 50% 75%)` : `hsl(${hue} 55% 35%)`);
+  let fg = $derived(badgeFg(hue, darkMode.value));
 </script>
 
 <span class="repo-badge" class:small style="background: {bg}; color: {fg};" title={shortName}>

apps/staged/src/lib/shared/badgeColors.ts

@@ -0,0 +1,26 @@
+/**
+ * Centralized OKLCH badge color helpers.
+ *
+ * All badge/chip color construction flows through here so the
+ * lightness and chroma values are defined in exactly one place.
+ */
+
+export function badgeBg(hue: number, dark: boolean): string {
+  return dark ? `oklch(0.30 0.04 ${hue})` : `oklch(0.95 0.03 ${hue})`;
+}
+
+export function badgeFg(hue: number, dark: boolean): string {
+  return dark ? `oklch(0.78 0.10 ${hue})` : `oklch(0.45 0.12 ${hue})`;
+}
+
+export function badgeBgHover(hue: number, dark: boolean): string {
+  return dark ? `oklch(0.35 0.05 ${hue})` : `oklch(0.92 0.04 ${hue})`;
+}
+
+export function badgeBorder(hue: number, dark: boolean): string {
+  return dark ? `oklch(0.38 0.05 ${hue})` : `oklch(0.87 0.05 ${hue})`;
+}
+
+export function badgeBorderHover(hue: number, dark: boolean): string {
+  return dark ? `oklch(0.50 0.08 ${hue})` : `oklch(0.72 0.09 ${hue})`;
+}