remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix multi-theme contrast: separate public tokens from admin remap.
Local Build and Deploy / deploy (push) Successful in 54s
Details

Browse Source 
Public cards no longer paint with always-dark admin surfaces, and admin pages fully remap background/text/surface so shadcn UI stays readable on the admin canvas.

Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed 2026-07-15 20:51:20 +02:00
1 parent d7278c77f9
commit ed56bf0917
2 files changed
+83 -58
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/globals.css
+82 -57
View File
@@ -251,6 +251,17 @@ summary,
url("/assets/images/background-light.jpg") no-repeat fixed center / cover; url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
background-blend-mode: overlay; background-blend-mode: overlay;
} }
html.dark .site-bg {
background:
linear-gradient(
to bottom,
color-mix(in srgb, var(--color-primary) 10%, rgba(0, 0, 0, 0.72)),
rgba(0, 0, 0, 0.82)
),
url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
background-blend-mode: overlay;
}
.article-body { .article-body {
line-height: 1.7; line-height: 1.7;
@@ -326,8 +337,8 @@ a:hover {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.card { .card {
background: var(--color-navbar); background: var(--color-surface);
color: var(--color-navbar-text-readable, var(--color-navbar-text)); color: var(--color-surface-text-readable, var(--color-text-readable));
border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
@@ -363,7 +374,7 @@ a:hover {
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: all 0.18s ease; transition: all 0.18s ease;
background: #eef2f7; background: color-mix(in srgb, var(--color-text-muted) 14%, var(--color-surface));
color: var(--color-text-readable, var(--color-text)); color: var(--color-text-readable, var(--color-text));
text-decoration: none; text-decoration: none;
} }
@@ -446,7 +457,7 @@ tbody tr:hover {
} }
.avatar { .avatar {
border-radius: var(--avatar-border-radius); border-radius: var(--avatar-border-radius);
background: #f1f5f9; background: var(--color-surface);
border: 2px solid var(--avatar-border-color); border: 2px solid var(--avatar-border-color);
} }
.currency { .currency {
@@ -457,7 +468,7 @@ tbody tr:hover {
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.2rem 0.6rem 0.2rem 0.2rem; padding: 0.2rem 0.6rem 0.2rem 0.2rem;
border-radius: 999px; border-radius: 999px;
background: #f8fafc; background: var(--color-surface);
border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
color: var(--color-pill-text-readable, var(--color-text-readable)); color: var(--color-pill-text-readable, var(--color-text-readable));
} }
@@ -616,9 +627,9 @@ tbody tr:hover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
background: var(--admin-surface); background: var(--color-surface);
color: var(--admin-text); color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 12%, transparent);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
overflow: hidden; overflow: hidden;
@@ -634,11 +645,11 @@ tbody tr:hover {
padding: 0.9rem 1.1rem; padding: 0.9rem 1.1rem;
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
color-mix(in srgb, var(--admin-accent) 10%, var(--admin-surface)), color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)),
color-mix(in srgb, var(--admin-accent) 5%, var(--admin-surface)) color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))
); );
border-bottom: 1px solid border-bottom: 1px solid
color-mix(in srgb, var(--admin-text-muted) 8%, transparent); color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 8%, transparent);
} }
.content-card-icon { .content-card-icon {
flex: none; flex: none;
@@ -650,11 +661,11 @@ tbody tr:hover {
font-size: 1.25rem; font-size: 1.25rem;
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
color-mix(in srgb, var(--admin-accent) 22%, var(--admin-surface)), color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)),
color-mix(in srgb, var(--admin-accent) 12%, var(--admin-surface)) color-mix(in srgb, var(--color-primary) 12%, var(--color-surface))
); );
box-shadow: inset 0 0 0 1px box-shadow: inset 0 0 0 1px
color-mix(in srgb, var(--admin-accent) 30%, transparent); color-mix(in srgb, var(--color-primary) 30%, transparent);
} }
.content-card-head-text { .content-card-head-text {
min-width: 0; min-width: 0;
@@ -665,12 +676,12 @@ tbody tr:hover {
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1rem;
line-height: 1.3; line-height: 1.3;
color: var(--admin-text); color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
} }
.content-card-subtitle { .content-card-subtitle {
margin: 0.15rem 0 0; margin: 0.15rem 0 0;
font-size: 0.78rem; font-size: 0.78rem;
color: var(--admin-text-muted); color: var(--color-text-muted-readable, var(--color-text-muted));
} }
.content-card-action { .content-card-action {
flex: none; flex: none;
@@ -714,8 +725,8 @@ tbody tr:hover {
gap: 0.85rem; gap: 0.85rem;
} }
.stat-block { .stat-block {
background: var(--admin-canvas); background: var(--color-background);
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 12%, transparent);
border-radius: 12px; border-radius: 12px;
padding: 0.85rem 1rem; padding: 0.85rem 1rem;
text-align: center; text-align: center;
@@ -724,12 +735,12 @@ tbody tr:hover {
font-size: 1.6rem; font-size: 1.6rem;
font-weight: 800; font-weight: 800;
line-height: 1.1; line-height: 1.1;
color: var(--admin-accent-text); color: var(--color-primary-readable, var(--color-primary));
} }
.stat-block-label { .stat-block-label {
margin-top: 0.2rem; margin-top: 0.2rem;
font-size: 0.78rem; font-size: 0.78rem;
color: var(--admin-text-muted); color: var(--color-text-muted-readable, var(--color-text-muted));
} }
/* Empty states */ /* Empty states */
@@ -751,12 +762,12 @@ tbody tr:hover {
font-weight: 700; font-weight: 700;
padding: 0.1rem 0.55rem 0.1rem 0.45rem; padding: 0.1rem 0.55rem 0.1rem 0.45rem;
border-radius: 999px; border-radius: 999px;
background: color-mix(in srgb, var(--admin-text-muted) 14%, transparent); background: color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
color: var(--admin-text-muted); color: var(--color-text-muted-readable, var(--color-text-muted));
} }
.online-badge.online { .online-badge.online {
background: color-mix(in srgb, var(--admin-success) 16%, transparent); background: color-mix(in srgb, var(--color-success) 16%, transparent);
color: var(--admin-success); color: var(--color-success);
} }
.online-dot { .online-dot {
width: 8px; width: 8px;
@@ -765,9 +776,9 @@ tbody tr:hover {
background: currentColor; background: currentColor;
} }
.online-badge.online .online-dot { .online-badge.online .online-dot {
background: var(--admin-success); background: var(--color-success);
box-shadow: 0 0 0 3px box-shadow: 0 0 0 3px
color-mix(in srgb, var(--admin-success) 22%, transparent); color-mix(in srgb, var(--color-success) 22%, transparent);
} }
/* Leaderboard rank chip */ /* Leaderboard rank chip */
@@ -780,12 +791,12 @@ tbody tr:hover {
border-radius: 999px; border-radius: 999px;
font-weight: 800; font-weight: 800;
font-size: 0.95rem; font-size: 0.95rem;
background: var(--admin-canvas); background: var(--color-background);
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 18%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 18%, transparent);
} }
.rank-badge.rank-1 { .rank-badge.rank-1 {
background: color-mix(in srgb, var(--admin-warning) 20%, transparent); background: color-mix(in srgb, var(--color-warning) 20%, transparent);
border-color: var(--admin-warning); border-color: var(--color-warning);
} }
.rank-badge.rank-2 { .rank-badge.rank-2 {
background: color-mix(in srgb, #94a3b8 22%, transparent); background: color-mix(in srgb, #94a3b8 22%, transparent);
@@ -812,7 +823,7 @@ tbody tr:hover {
gap: 0.25rem; gap: 0.25rem;
} }
.radio-sidebar-link:hover { .radio-sidebar-link:hover {
background: color-mix(in srgb, var(--admin-accent) 10%, transparent); background: color-mix(in srgb, var(--color-primary) 10%, transparent);
text-decoration: none; text-decoration: none;
} }
@media (max-width: 48rem) { @media (max-width: 48rem) {
@@ -827,7 +838,7 @@ tbody tr:hover {
gap: 0.25rem; gap: 0.25rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
border-bottom: 1px solid border-bottom: 1px solid
color-mix(in srgb, var(--admin-text-muted) 14%, transparent); color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
overflow-x: auto; overflow-x: auto;
} }
.radio-sidebar-head { .radio-sidebar-head {
@@ -858,7 +869,7 @@ tbody tr:hover {
appearance: none; appearance: none;
border: 0; border: 0;
background: transparent; background: transparent;
color: var(--admin-accent-text); color: var(--color-primary-readable, var(--color-primary));
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
font-size: 0.78rem; font-size: 0.78rem;
@@ -871,11 +882,11 @@ tbody tr:hover {
} }
.cms-info-trigger:hover, .cms-info-trigger:hover,
.cms-info-trigger:focus-visible { .cms-info-trigger:focus-visible {
color: var(--admin-accent-text); color: var(--color-primary-readable, var(--color-primary));
} }
.cms-info-trigger:focus-visible, .cms-info-trigger:focus-visible,
.cms-info-close:focus-visible { .cms-info-close:focus-visible {
outline: 3px solid color-mix(in srgb, var(--admin-accent) 42%, transparent); outline: 3px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
outline-offset: 3px; outline-offset: 3px;
} }
.cms-info-backdrop { .cms-info-backdrop {
@@ -892,17 +903,17 @@ tbody tr:hover {
position: relative; position: relative;
width: min(440px, 100%); width: min(440px, 100%);
border: 1px solid border: 1px solid
color-mix(in srgb, var(--admin-accent) 30%, var(--admin-border)); color-mix(in srgb, var(--color-primary) 30%, color-mix(in srgb, var(--color-text-muted) 22%, transparent));
border-radius: 8px; border-radius: 8px;
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
color-mix(in srgb, var(--admin-accent) 12%, transparent), color-mix(in srgb, var(--color-primary) 12%, transparent),
transparent 42% transparent 42%
), ),
var(--admin-surface); var(--color-surface);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
color: var(--admin-text); color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
padding: 1.25rem; padding: 1.25rem;
} }
.cms-info-close { .cms-info-close {
@@ -913,20 +924,20 @@ tbody tr:hover {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
place-items: center; place-items: center;
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 18%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 18%, transparent);
border-radius: 999px; border-radius: 999px;
background: color-mix(in srgb, var(--admin-surface) 84%, transparent); background: color-mix(in srgb, var(--color-surface) 84%, transparent);
color: var(--admin-text-muted); color: var(--color-text-muted-readable, var(--color-text-muted));
cursor: pointer; cursor: pointer;
font-weight: 900; font-weight: 900;
line-height: 1; line-height: 1;
} }
.cms-info-close:hover { .cms-info-close:hover {
color: var(--admin-text); color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
border-color: color-mix(in srgb, var(--admin-accent) 40%, transparent); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
} }
.cms-info-kicker { .cms-info-kicker {
color: var(--admin-accent-text); color: var(--color-primary-readable, var(--color-primary));
font-size: 0.74rem; font-size: 0.74rem;
font-weight: 900; font-weight: 900;
letter-spacing: 0; letter-spacing: 0;
@@ -942,17 +953,17 @@ tbody tr:hover {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-top: 0.65rem; margin-top: 0.65rem;
border: 1px solid color-mix(in srgb, var(--admin-accent) 34%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
border-radius: 999px; border-radius: 999px;
background: color-mix(in srgb, var(--admin-accent) 14%, transparent); background: color-mix(in srgb, var(--color-primary) 14%, transparent);
color: var(--admin-text); color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 900; font-weight: 900;
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
} }
.cms-info-copy { .cms-info-copy {
margin: 0.9rem 0 0; margin: 0.9rem 0 0;
color: var(--admin-text-muted); color: var(--color-text-muted-readable, var(--color-text-muted));
font-size: 0.92rem; font-size: 0.92rem;
line-height: 1.55; line-height: 1.55;
} }
@@ -963,20 +974,20 @@ tbody tr:hover {
margin: 1rem 0 0; margin: 1rem 0 0;
} }
.cms-info-grid div { .cms-info-grid div {
border: 1px solid color-mix(in srgb, var(--admin-text-muted) 14%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
border-radius: 8px; border-radius: 8px;
background: color-mix(in srgb, var(--admin-canvas) 68%, transparent); background: color-mix(in srgb, var(--color-background) 68%, transparent);
padding: 0.7rem; padding: 0.7rem;
} }
.cms-info-grid dt { .cms-info-grid dt {
color: var(--admin-text-muted); color: var(--color-text-muted-readable, var(--color-text-muted));
font-size: 0.68rem; font-size: 0.68rem;
font-weight: 800; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
} }
.cms-info-grid dd { .cms-info-grid dd {
margin: 0.18rem 0 0; margin: 0.18rem 0 0;
color: var(--admin-text); color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 900; font-weight: 900;
line-height: 1.25; line-height: 1.25;
@@ -991,17 +1002,17 @@ tbody tr:hover {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 1rem;
border: 1px solid color-mix(in srgb, var(--admin-accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
border-radius: 8px; border-radius: 8px;
background: color-mix(in srgb, var(--admin-accent) 8%, transparent); background: color-mix(in srgb, var(--color-primary) 8%, transparent);
padding: 0.65rem 0.75rem; padding: 0.65rem 0.75rem;
} }
.cms-info-credit span { .cms-info-credit span {
color: var(--admin-text); color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
font-weight: 900; font-weight: 900;
} }
.cms-info-credit small { .cms-info-credit small {
color: var(--admin-text-muted); color: var(--color-text-muted-readable, var(--color-text-muted));
font-size: 0.74rem; font-size: 0.74rem;
font-weight: 700; font-weight: 700;
text-align: right; text-align: right;
@@ -1100,6 +1111,9 @@ tbody tr:hover {
unaffected. This also covers Radix portals (Dialog/Select/Dropdown/ unaffected. This also covers Radix portals (Dialog/Select/Dropdown/
Popover/Tooltip) which mount under <body>. */ Popover/Tooltip) which mount under <body>. */
body:has([data-admin]) { body:has([data-admin]) {
/* Full public→admin token remap so shadcn + body + leftover
public utilities all inherit the admin palette with contrast. */
--color-background: var(--admin-canvas);
--color-foreground: var(--admin-text); --color-foreground: var(--admin-text);
--color-card: var(--admin-surface); --color-card: var(--admin-surface);
--color-card-foreground: var(--admin-text); --color-card-foreground: var(--admin-text);
@@ -1127,6 +1141,17 @@ body:has([data-admin]) {
--color-border: var(--admin-border); --color-border: var(--admin-border);
--color-input: var(--admin-border); --color-input: var(--admin-border);
--color-ring: var(--admin-accent); --color-ring: var(--admin-accent);
/* Public Atom tokens still referenced by body / .muted / inputs */
--color-text: var(--admin-text);
--color-text-readable: var(--admin-text);
--color-text-muted: var(--admin-text-muted);
--color-text-muted-readable: var(--admin-text-muted);
--color-surface: var(--admin-surface);
--color-surface-text-readable: var(--admin-text);
--color-dropdown: var(--admin-surface);
--color-dropdown-text-readable: var(--admin-text);
color: var(--admin-text);
background-color: var(--admin-canvas);
} }
/* ── Details/summary open states for nav ──────────────────── */ /* ── Details/summary open states for nav ──────────────────── */
src/components/ui/button.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const buttonVariants = cva(
destructive: destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", "border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80", "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: ghost: