Use zinc everywhere

lib/music_library_web/components/layouts.ex

@@ -13,8 +13,8 @@ defmodule MusicLibraryWeb.Layouts do
   embed_templates "layouts/*"
 
   @nav_base_classes "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
-  @nav_inactive_classes "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200"
-  @nav_active_classes "border-zinc-500 text-gray-900 dark:text-gray-100"
+  @nav_inactive_classes "border-transparent text-zinc-500 hover:border-zinc-300 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200"
+  @nav_active_classes "border-zinc-500 text-zinc-900 dark:text-zinc-100"
 
   def section_link_classes(current_section, section) when current_section == section do
     [@nav_base_classes, @nav_active_classes]

lib/music_library_web/components/pagination.ex

@@ -28,7 +28,7 @@ defmodule MusicLibraryWeb.Pagination do
             "relative inline-flex items-center rounded-md border",
             "px-3 py-2 text-sm font-medium",
             "bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400",
-            "text-white active:text-white/80 dark:text-gray-900 dark:active:text-gray-900/80",
+            "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
             "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           ]}
         >
@@ -41,7 +41,7 @@ defmodule MusicLibraryWeb.Pagination do
             "relative ml-3 inline-flex items-center rounded-md border",
             "px-3 py-2 text-sm font-medium",
             "bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400",
-            "text-white active:text-white/80 dark:text-gray-900 dark:active:text-gray-900/80",
+            "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
             "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           ]}
         >

lib/music_library_web/controllers/session_html/new.html.heex

@@ -1,7 +1,7 @@
 <div class="flex min-h-full items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
   <div class="w-full max-w-sm space-y-10">
     <div>
-      <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-gray-200">
+      <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-zinc-900 dark:text-zinc-200">
         <%= gettext("Welcome to your Music Library") %>
       </h2>
     </div>
@@ -19,10 +19,10 @@
               "relative block w-full rounded-md border-0 py-1.5",
               "sm:text-sm sm:leading-6",
               "ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
-              "text-gray-900 dark:text-gray-200",
+              "text-zinc-900 dark:text-zinc-200",
               "dark:bg-zinc-700",
-              "ring-gray-200 dark:ring-gray-400",
-              "placeholder:text-gray-400 dark:placeholder:text-gray-400",
+              "ring-zinc-200 dark:ring-zinc-400",
+              "placeholder:text-zinc-400 dark:placeholder:text-zinc-400",
               "focus:ring-zinc-400 dark:focus:ring-zinc-300"
             ]}
             placeholder="Password"
@@ -37,7 +37,7 @@
             "flex w-full justify-center rounded-md",
             "bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400",
             "px-3 py-1.5 text-sm font-semibold leading-6",
-            "text-white dark:text-gray-900",
+            "text-white dark:text-zinc-900",
             "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           ]}
         >

lib/music_library_web/live/record_live/import_component.ex

@@ -30,7 +30,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
       <ul
         :if={@release_groups !== []}
         role="list"
-        class="divide-y divide-gray-100 dark:divide-slate-300/30 mt-5"
+        class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5"
       >
         <.result :for={release_group <- @release_groups} release_group={release_group} />
       </ul>
@@ -48,7 +48,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
     ~H"""
     <li
       id={"musicbrainz_" <> @release_group.id}
-      class="flex justify-between gap-x-6 py-5 hover:bg-gray-50 dark:hover:bg-zinc-700"
+      class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700"
     >
       <div class="shrink-0 flex items-center justify-between w-full px-4">
         <div class="min-w-0 flex-auto">
@@ -94,7 +94,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
           <.focus_wrap
             id={"actions-#{@release_group.id}"}
             class={[
-              "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
+              "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
             ]}
             role="menu"
             aria-orientation="vertical"
@@ -103,7 +103,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
           >
             <.link
               :for={format <- Records.Record.formats()}
-              class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+              class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
               role="menuitem"
               tabindex="-1"
               id={"actions-#{@release_group.id}-#{format}-import"}
@@ -124,7 +124,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
 
   defp type_badge(assigns) do
     ~H"""
-    <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
+    <span class="inline-flex items-center rounded-md bg-zinc-50 px-2 py-1 text-xs font-medium text-zinc-600 ring-1 ring-inset ring-zinc-500/10">
       <%= @type %>
     </span>
     """

lib/music_library_web/live/record_live/index.html.heex

@@ -29,7 +29,7 @@
 </div>
 
 <ul
-  class="divide-y divide-gray-100 dark:divide-slate-300/30 mt-5"
+  class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5"
   role="list"
   id="records"
   phx-update="stream"
@@ -37,7 +37,7 @@
   <li
     :for={{id, record} <- @streams.records}
     phx-click={JS.navigate(~p"/records/#{record}")}
-    class="flex justify-between gap-x-6 py-5 hover:bg-gray-50 dark:hover:bg-zinc-700 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
+    class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
     id={id}
   >
     <div class="flex min-w-0 gap-x-4 items-center">
@@ -107,7 +107,7 @@
         <.focus_wrap
           id={"actions-#{record.id}"}
           class={[
-            "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
+            "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
           ]}
           role="menu"
           aria-orientation="vertical"
@@ -115,7 +115,7 @@
           tabindex="-1"
         >
           <.link
-            class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-show"}
@@ -126,7 +126,7 @@
           <a
             href={musicbrainz_url(record)}
             target=".blank"
-            class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-musicbrainz"}
@@ -135,7 +135,7 @@
           </a>
 
           <.link
-            class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-edit"}

lib/music_library_web/live/record_live/show.html.heex

@@ -43,7 +43,7 @@
     </p>
   </div>
   <div>
-    <dl class="mt-4 divide-y divide-gray-100 dark:divide-slate-300/30">
+    <dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
           <%= gettext("Genres") %>

lib/music_library_web/live/stats_live/data_components.ex

@@ -20,7 +20,7 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
           src={~p"/covers/#{@record.id}"}
           alt={@record.title}
         />
-        <p class="ml-24 truncate text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">
+        <p class="ml-24 truncate text-xs sm:text-sm font-medium text-zinc-500 dark:text-zinc-400">
           <%= @title %>
         </p>
       </dt>
@@ -28,12 +28,12 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
         <p class="font-semibold">
           <.link
             :for={artist <- @record.artists}
-            class="text-sm md:text-base lg:text-2xl text-gray-900 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+            class="text-sm md:text-base lg:text-2xl text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
             patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"}
           >
             <%= artist.name %>
           </.link>
-          <span class="text-sm md:text-base block text-gray-600 dark:text-gray-200">
+          <span class="text-sm md:text-base block text-zinc-600 dark:text-zinc-200">
             <%= @record.title %>
           </span>
         </p>
@@ -50,14 +50,14 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
     ~H"""
     <div class="overflow-hidden rounded-md bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
       <dt>
-        <p class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
+        <p class="truncate text-sm font-medium text-zinc-500 dark:text-zinc-400">
           <%= @title %>
         </p>
       </dt>
       <dd class="flex items-baseline mt-1 pb-6 sm:pb-7">
         <a
           href={@path}
-          class="text-2xl font-semibold text-gray-900 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+          class="text-2xl font-semibold text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
         >
           <%= @count %>
         </a>

lib/music_library_web/live/stats_live/index.html.heex

@@ -1,5 +1,5 @@
 <div>
-  <h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
+  <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
     <%= gettext("Basics") %>
   </h1>
   <dl class="mt-5 grid grid-cols-2 gap-5 sm:grid-cols-5">
@@ -14,20 +14,20 @@
 </div>
 
 <div>
-  <h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
+  <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
     <%= gettext("Formats") %>
   </h1>
   <dl class={[
-    "mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
+    "mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
     stats_class(@collection_count_by_format)
   ]}>
     <div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
-      <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center max-sm:text-xs break-keep">
+      <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
         <%= Record.format_long_label(format) %>
       </dt>
       <dd class="mt-1 text-center">
         <a
-          class="text-xl lg:text-2xl font-semibold hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+          class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
           href={~p"/records?query=format:#{format}"}
         >
           <%= count %>
@@ -38,20 +38,20 @@
 </div>
 
 <div>
-  <h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
+  <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
     <%= gettext("Types") %>
   </h1>
   <dl class={[
-    "mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
+    "mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
     stats_class(@collection_count_by_type)
   ]}>
     <div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
-      <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center max-sm:text-xs break-keep">
+      <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
         <%= Record.type_long_label(type) %>
       </dt>
       <dd class="mt-1 text-center">
         <a
-          class="text-xl lg:text-2xl font-semibold hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+          class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
           href={~p"/records?query=type:#{type}"}
         >
           <%= count %>
@@ -62,14 +62,14 @@
 </div>
 
 <div class="flow-root">
-  <h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
+  <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
     <%= gettext("Scrobble activity") %>
   </h1>
   <ul id="scrobble-activity" role="list" class="-mb-8 mt-5" phx-update="stream">
     <li :for={{id, track} <- @streams.recent_tracks} id={id} class="group">
       <div class="relative pb-8">
         <span
-          class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-gray-200"
+          class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
           aria-hidden="true"
         >
         </span>

lib/music_library_web/live/wishlist_live/index.html.heex

@@ -29,7 +29,7 @@
 </div>
 
 <ul
-  class="divide-y divide-gray-100 dark:divide-slate-300/30 mt-5"
+  class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5"
   role="list"
   id="records"
   phx-update="stream"
@@ -37,7 +37,7 @@
   <li
     :for={{id, record} <- @streams.records}
     phx-click={JS.navigate(~p"/wishlist/#{record}")}
-    class="flex justify-between gap-x-6 py-5 hover:bg-gray-50 dark:hover:bg-zinc-700 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
+    class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
     id={id}
   >
     <div class="flex min-w-0 gap-x-4 items-center">
@@ -107,7 +107,7 @@
         <.focus_wrap
           id={"actions-#{record.id}"}
           class={[
-            "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
+            "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-none"
           ]}
           role="menu"
           aria-orientation="vertical"
@@ -115,7 +115,7 @@
           tabindex="-1"
         >
           <.link
-            class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-show"}
@@ -126,7 +126,7 @@
           <a
             href={musicbrainz_url(record)}
             target=".blank"
-            class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-musicbrainz"}
@@ -135,7 +135,7 @@
           </a>
 
           <.link
-            class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-edit"}
@@ -145,7 +145,7 @@
           </.link>
 
           <.link
-            class="block px-3 py-1 text-sm leading-6 text-gray-900 dark:text-zinc-400 hover:bg-gray-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
+            class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
             role="menuitem"
             tabindex="-1"
             id={"actions-#{record.id}-purchase"}

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -44,7 +44,7 @@
   </div>
 
   <div>
-    <dl class="mt-4 divide-y divide-gray-100 dark:divide-slate-300/30">
+    <dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
       <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
           <%= gettext("Genres") %>