From 041e63744d3ee1c232624c56f80f69ecc1f8ccb8 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 29 Apr 2026 22:54:30 -0400
Subject: [PATCH] fix(web): promote bg-accent-tint to a real Tailwind utility

Replaces the :global scoped-style workaround in AdminSidebar with a proper
accent.tint color tier in tailwind.config.js. Tailwind generates bg-accent-tint
deterministically; the global class no longer leaks from a single component.
Future consumers (e.g. /admin/requests tab counts) get the same utility.
---
 web/src/lib/components/AdminSidebar.svelte | 9 ---------
 web/tailwind.config.js                     | 5 ++++-
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/AdminSidebar.svelte b/web/src/lib/components/AdminSidebar.svelte
index 8097f1e9..381395ab 100644
--- a/web/src/lib/components/AdminSidebar.svelte
+++ b/web/src/lib/components/AdminSidebar.svelte
@@ -57,12 +57,3 @@
     </ul>
   </nav>
 </aside>
-
-<style>
-  /* "12% accent-tinted bg" — the design-system rule for active nav state.
-     :global is required because the class is composed inside a templated
-     class string the Svelte scoped-CSS pass can't see. */
-  :global(.bg-accent-tint) {
-    background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
-  }
-</style>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 8833cac6..a0baaa4d 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -22,7 +22,10 @@ export default {
           secondary: 'var(--fs-bronze)',
           destructive: 'var(--fs-oxblood)'
         },
-        accent: 'var(--fs-accent)',
+        accent: {
+          DEFAULT: 'var(--fs-accent)',
+          tint: 'color-mix(in srgb, var(--fs-accent) 12%, transparent)'
+        },
         warning: 'var(--fs-warning)',
         error: 'var(--fs-error)',
         info: 'var(--fs-info)'