jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix muted text invisible in dark mode on setup and dashboard pages

Browse Source 
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>
This commit is contained in:
jamey 2026-02-20 01:07:25 +00:00
parent c2caeed64d
commit f6a38bb48f
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/css/admin/components.css
View File

@ -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 {

6
lib/berrypod_web/live/admin/dashboard.ex
View File

@ -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>