From f6a38bb48fd89cffca5e0d715382a3e369e3b74d Mon Sep 17 00:00:00 2001
From: jamey <jamey@server.jamey.stream>
Date: Fri, 20 Feb 2026 01:07:25 +0000
Subject: [PATCH] fix muted text invisible in dark mode on setup and dashboard
 pages

Replace non-existent --color-base-content-60 variable (with hard-coded
black fallback) with color-mix(in oklch, var(--color-base-content) 60%,
transparent) which adapts to the current theme.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 assets/css/admin/components.css          | 20 ++++++++++----------
 lib/berrypod_web/live/admin/dashboard.ex |  6 +++---
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/assets/css/admin/components.css b/assets/css/admin/components.css
index cab6b9e..b8297e1 100644
--- a/assets/css/admin/components.css
+++ b/assets/css/admin/components.css
@@ -675,7 +675,7 @@
 }
 
 .setup-subtitle {
-  color: var(--color-base-content-60, rgba(0 0 0 / 0.6));
+  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
   margin-top: 0.25rem;
   font-size: 0.875rem;
 }
@@ -715,7 +715,7 @@
   font-weight: 600;
   flex-shrink: 0;
   background: var(--color-base-200, #e5e5e5);
-  color: var(--color-base-content-60, rgba(0 0 0 / 0.6));
+  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
 }
 
 .setup-card-number-done {
@@ -732,7 +732,7 @@
   margin-top: 0.25rem;
   padding-left: 2.5rem;
   font-size: 0.8125rem;
-  color: var(--color-base-content-60, rgba(0 0 0 / 0.6));
+  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
 }
 
 .setup-card-body {
@@ -742,7 +742,7 @@
 
 .setup-hint {
   font-size: 0.8125rem;
-  color: var(--color-base-content-60, rgba(0 0 0 / 0.6));
+  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
   margin-bottom: 0.75rem;
 }
 
@@ -753,7 +753,7 @@
 
 .setup-key-hint {
   font-size: 0.75rem;
-  color: var(--color-base-content-60, rgba(0 0 0 / 0.6));
+  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
   margin-top: 0.25rem;
 }
 
@@ -824,7 +824,7 @@
 
 .setup-provider-tagline {
   font-size: 0.75rem;
-  color: var(--color-base-content-60, rgba(0 0 0 / 0.6));
+  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
 }
 
 .setup-provider-badge {
@@ -832,7 +832,7 @@
   padding: 0.125rem 0.375rem;
   border-radius: 9999px;
   background: var(--color-base-200, #e5e5e5);
-  color: var(--color-base-content-60, rgba(0 0 0 / 0.6));
+  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
 }
 
 .setup-provider-form {
@@ -863,7 +863,7 @@
 
 .setup-complete p {
   font-size: 0.875rem;
-  color: var(--color-base-content-60, rgba(0 0 0 / 0.6));
+  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
   margin: 0.25rem 0 1rem;
 }
 
@@ -893,7 +893,7 @@
   align-items: center;
   gap: 0.5rem;
   font-size: 0.8125rem;
-  color: var(--color-base-content-60, rgba(0 0 0 / 0.6));
+  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
 }
 
 .admin-checklist-bar {
@@ -951,7 +951,7 @@
 }
 
 .admin-checklist-label-done {
-  color: var(--color-base-content-60, rgba(0 0 0 / 0.6));
+  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
 }
 
 .admin-checklist-action {
diff --git a/lib/berrypod_web/live/admin/dashboard.ex b/lib/berrypod_web/live/admin/dashboard.ex
index a7b3d97..9c3fe69 100644
--- a/lib/berrypod_web/live/admin/dashboard.ex
+++ b/lib/berrypod_web/live/admin/dashboard.ex
@@ -107,14 +107,14 @@ defmodule BerrypodWeb.Admin.Dashboard do
         <h2 style="font-size: 1.125rem; font-weight: 600;">Recent orders</h2>
         <.link
           navigate={~p"/admin/orders"}
-          style="font-size: 0.875rem; color: var(--color-base-content-60, rgba(0 0 0 / 0.6));"
+          style="font-size: 0.875rem; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);"
         >
           View all &rarr;
         </.link>
       </div>
 
       <%= if @recent_orders == [] do %>
-        <div style="border: 1px solid var(--color-base-200, #e5e5e5); border-radius: 0.5rem; padding: 2rem; text-align: center; color: var(--color-base-content-60, rgba(0 0 0 / 0.6));">
+        <div style="border: 1px solid var(--color-base-200, #e5e5e5); border-radius: 0.5rem; padding: 2rem; text-align: center; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">
           <div style="margin: 0 auto 0.75rem; width: 2.5rem; opacity: 0.3;">
             <.icon name="hero-inbox" class="size-10" />
           </div>
@@ -262,7 +262,7 @@ defmodule BerrypodWeb.Admin.Dashboard do
         </div>
         <div>
           <p style="font-size: 1.5rem; font-weight: 700;">{@value}</p>
-          <p style="font-size: 0.875rem; color: var(--color-base-content-60, rgba(0 0 0 / 0.6));">
+          <p style="font-size: 0.875rem; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">
             {@label}
           </p>
         </div>