refactor: move shared styles to tailwind utilities

static/assets/style.css

@@ -14,6 +14,12 @@
   --color-accent: light-dark(#007a85, #00b3c4);
   --color-on-accent: light-dark(#ffffff, #000000);
   --color-surface-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
+  --color-skeleton-base: light-dark(#e5e5e5, #242529);
+  --color-skeleton-highlight: light-dark(#d4d4d4, #303137);
+  --color-border: light-dark(rgba(0, 0, 0, 0.08), rgba(244, 241, 234, 0.08));
+  --color-border-light: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.04));
+  --color-player-segment: #f5c542;
+  --shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 12px rgba(0, 0, 0, 0.32));
 }
 
 @layer base {
@@ -26,26 +32,28 @@
   }
 }
 
-.scrollbar-hidden {
+@utility scrollbar-hidden {
   -ms-overflow-style: none;
   scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
-.scrollbar-hidden::-webkit-scrollbar {
+@utility skeleton {
-  display: none;
+  @apply animate-[skeleton-loading_1.5s_infinite] bg-[linear-gradient(90deg,var(--color-skeleton-base)_25%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_75%)] bg-[length:200%_100%];
+}
+
+@utility skeleton-subtle {
+  @apply opacity-70;
 }
 
 :root {
   color-scheme: light dark;
-  --skeleton-base: light-dark(#e5e5e5, #242529);
-  --skeleton-highlight: light-dark(#d4d4d4, #303137);
-  --border: light-dark(rgba(0, 0, 0, 0.08), rgba(244, 241, 234, 0.08));
-  --border-light: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.04));
-  --shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 12px rgba(0, 0, 0, 0.32));
   --scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.05));
   --scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(244, 241, 234, 0.22));
   --scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(244, 241, 234, 0.32));
-  --player-segment: #f5c542;
 }
 
 html[data-theme="light"] {
@@ -56,27 +64,6 @@ html[data-theme="dark"] {
   color-scheme: dark;
 }
 
-html,
-body {
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-}
-
-.skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--skeleton-base) 25%,
-    var(--skeleton-highlight) 50%,
-    var(--skeleton-base) 75%
-  );
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.5s infinite;
-}
-
-.skeleton-subtle {
-  opacity: 0.7;
-}
-
 @keyframes skeleton-loading {
   0% {
     background-position: 200% 0;
@@ -86,13 +73,3 @@ body {
     background-position: -200% 0;
   }
 }
-
-[data-watchlist-toggle] .watchlist-icon,
-[data-watchlist-toggle] .watchlist-icon path {
-  fill: none;
-}
-
-[data-watchlist-toggle][data-watchlist-state="in"] .watchlist-icon,
-[data-watchlist-toggle][data-watchlist-state="in"] .watchlist-icon path {
-  fill: currentColor;
-}

static/search/render.ts

@@ -197,13 +197,18 @@ const buildWatchlistButton = (item: CommandPaletteItem): HTMLButtonElement | nul
   const inWatchlist = watchlistOverrides.get(malID) ?? item.inWatchlist === true;
   button.type = "button";
   button.className =
-    "absolute bottom-5 left-5 z-20 text-accent opacity-0 transition hover:text-accent/80 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50";
+    "group absolute bottom-5 left-5 z-20 text-accent opacity-0 transition hover:text-accent/80 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50";
   button.dataset.watchlistToggle = "";
   button.dataset.malId = String(malID);
   button.dataset.watchlistTitle = cleanLabel(item);
   button.dataset.watchlistState = inWatchlist ? "in" : "out";
   button.setAttribute("aria-label", inWatchlist ? "Remove from Watchlist" : "Add to Watchlist");
-  button.appendChild(buildSvgIcon(iconPaths.bookmark, "size-6 watchlist-icon"));
+  button.appendChild(
+    buildSvgIcon(
+      iconPaths.bookmark,
+      "size-6 watchlist-icon fill-none group-data-[watchlist-state=in]:fill-current [&_path]:fill-none group-data-[watchlist-state=in]:[&_path]:fill-current",
+    ),
+  );
   return button;
 };
 

templates/components/anime_card.gohtml

@@ -39,10 +39,10 @@
             data-mal-id="{{$anime.MalID}}"
             data-watchlist-title="{{$anime.DisplayTitle}}"
             data-watchlist-state="{{if $isWatchlist}}in{{else}}out{{end}}"
-            class="text-accent hover:text-accent/80 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50 {{if $isWatchlist}}in-watchlist{{end}}"
+            class="group text-accent hover:text-accent/80 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50 {{if $isWatchlist}}in-watchlist{{end}}"
             aria-label="{{if $isWatchlist}}Remove from Watchlist{{else}}Add to Watchlist{{end}}"
           >
-            <svg class="size-6 watchlist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
+            <svg class="size-6 watchlist-icon fill-none group-data-[watchlist-state=in]:fill-current [&_path]:fill-none group-data-[watchlist-state=in]:[&_path]:fill-current" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
           </button>
         </div>
       </div>