fix: use themed G-Stack filter color

Author: ryota-murakami

src/renderer/src/components/layout/MainContent.browser.test.tsx

@@ -541,10 +541,10 @@ describe('MainContent SkillTypeFilter dropdown options', () => {
 
     const gstackItem = screen.getByRole('menuitemradio', { name: /G-Stack/i })
     await expect.element(gstackItem).toBeInTheDocument()
-    const dot = gstackItem.element().querySelector('.bg-sky-400')
+    const dot = gstackItem.element().querySelector('.bg-gstack')
     expect(
       dot,
-      'G-Stack menu item should contain a span with bg-sky-400',
+      'G-Stack menu item should contain a span with bg-gstack',
     ).not.toBeNull()
   })
 

src/renderer/src/components/layout/MainContent.tsx

@@ -108,7 +108,7 @@ const SKILL_TYPE_FILTER_OPTIONS: {
   { value: 'all', label: 'All' },
   { value: 'symlinked', label: 'Symlinked', dotClass: 'bg-success' },
   { value: 'local', label: 'Local', dotClass: 'bg-emerald-400' },
-  { value: 'gstack', label: 'G-Stack', dotClass: 'bg-sky-400' },
+  { value: 'gstack', label: 'G-Stack', dotClass: 'bg-gstack' },
   { value: 'orphan', label: 'Orphan', dotClass: 'bg-destructive' },
 ]
 

src/renderer/src/styles/globals.css

@@ -68,6 +68,10 @@
     --input: oklch(0.3 var(--chroma-6) var(--theme-hue));
     --ring: oklch(0.7 var(--theme-chroma) var(--theme-hue));
 
+    /* G-Stack is a skill-type accent, so its dot follows the active theme
+     * axis instead of using a fixed utility palette color. */
+    --gstack: oklch(0.7 var(--theme-chroma) var(--theme-hue));
+
     /* Success — fixed green regardless of theme. This is the "linked /
      * valid symlink" status color used across badges, heatmap cells,
      * and the coverage bar. Keeping it theme-invariant avoids the
@@ -111,6 +115,8 @@
     --input: oklch(0.88 var(--chroma-4) var(--theme-hue));
     --ring: oklch(0.5 var(--theme-chroma) var(--theme-hue));
 
+    --gstack: oklch(0.5 var(--theme-chroma) var(--theme-hue));
+
     --success: oklch(0.55 0.17 155);
     --success-foreground: oklch(0.99 0.01 155);
   }

tailwind.config.ts

@@ -42,6 +42,10 @@ const config: Config = {
           DEFAULT: 'var(--success)',
           foreground: 'var(--success-foreground)',
         },
+        // Theme-axis accent used for the G-Stack skill-type filter dot.
+        gstack: {
+          DEFAULT: 'var(--gstack)',
+        },
         border: 'var(--border)',
         input: 'var(--input)',
         ring: 'var(--ring)',