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

fix: enforce semantic contrast across admin
Local Build and Deploy / deploy (push) Successful in 44s
Details

Browse Source
This commit is contained in:
Simo committed 2026-07-12 15:14:15 +02:00
1 parent 45c8178cfa
commit f0b4bc1630
86 files changed
+438 -338
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/permissions/[id]/rank-edit-client.tsx
+10 -10
View File
@@ -110,10 +110,10 @@ function PermToggle({
'w-7 h-6 text-[11px] font-mono rounded transition-all font-medium',
v === value
? v === '0'
? 'bg-zinc-500 text-white shadow-sm'
? 'bg-[var(--color-text-muted)] text-[var(--color-surface-text-readable)] shadow-sm'
: v === '1'
? 'bg-emerald-500 text-white shadow-sm'
: 'bg-amber-500 text-white shadow-sm'
? 'bg-[var(--color-success)] text-[var(--color-success-foreground-readable)] shadow-sm'
: 'bg-[var(--color-warning)] text-[var(--color-warning-foreground-readable)] shadow-sm'
: 'bg-muted/60 text-muted-foreground/40 hover:bg-muted hover:text-muted-foreground',
)}
>
@@ -291,7 +291,7 @@ export function RankEditClient({
key={key}
className={cn(
'flex items-center justify-between px-3 py-2 bg-card',
(perms[key] ?? '0') !== '0' && 'bg-emerald-500/5',
(perms[key] ?? '0') !== '0' && 'bg-[var(--color-success-subtle)]',
)}
>
<span className="font-mono text-xs truncate mr-3">{key}</span>
@@ -326,9 +326,9 @@ export function RankEditClient({
</Button>
</Link>
{initialRank.id >= 7 ? (
<Crown className="h-6 w-6 text-yellow-500" />
<Crown className="h-6 w-6 text-[var(--color-warning-text-readable)]" />
) : initialRank.id >= 5 ? (
<ShieldCheck className="h-6 w-6 text-blue-500" />
<ShieldCheck className="h-6 w-6 text-[var(--color-info-text-readable)]" />
) : (
<Shield className="h-6 w-6 text-muted-foreground" />
)}
@@ -548,10 +548,10 @@ export function RankEditClient({
<span className="w-3 h-3 rounded bg-zinc-500 inline-block" /> Off
</span>
<span className="flex items-center gap-1">
<span className="w-3 h-3 rounded bg-emerald-500 inline-block" /> On
<span className="w-3 h-3 rounded bg-[var(--color-success-subtle)] inline-block" /> On
</span>
<span className="flex items-center gap-1">
<span className="w-3 h-3 rounded bg-amber-500 inline-block" /> Owner
<span className="w-3 h-3 rounded bg-[var(--color-warning-subtle)] inline-block" /> Owner
</span>
</div>
</div>
@@ -660,7 +660,7 @@ export function RankEditClient({
key={perm.id}
className={cn(
'flex items-center gap-3 rounded-lg border px-4 py-3 transition-all',
on ? 'border-emerald-500/40 bg-emerald-500/5' : 'hover:bg-muted/50',
on ? 'border-[var(--color-success-border)] bg-[var(--color-success-subtle)]' : 'hover:bg-muted/50',
)}
>
<Checkbox checked={on} onCheckedChange={() => toggleCms(perm.slug)} />
@@ -671,7 +671,7 @@ export function RankEditClient({
)}
</div>
{on && (
<Badge className="bg-emerald-500/15 text-emerald-600 border-emerald-500/30 text-[10px]">
<Badge className="bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-[var(--color-success-border)] text-[10px]">
Active
</Badge>
)}
src/app/admin/permissions/permissions-list.tsx
+8 -8
View File
@@ -45,17 +45,17 @@ interface Props {
}
const RANK_ICONS: Record<number, React.ReactNode> = {
7: <Crown className="h-4 w-4 text-yellow-500" />,
6: <ShieldCheck className="h-4 w-4 text-red-500" />,
5: <Shield className="h-4 w-4 text-blue-500" />,
4: <UserCheck className="h-4 w-4 text-green-500" />,
7: <Crown className="h-4 w-4 text-[var(--color-warning-text-readable)]" />,
6: <ShieldCheck className="h-4 w-4 text-[var(--color-error-text-readable)]" />,
5: <Shield className="h-4 w-4 text-[var(--color-info-text-readable)]" />,
4: <UserCheck className="h-4 w-4 text-[var(--color-success-text-readable)]" />,
}
const RANK_COLORS: Record<number, string> = {
7: 'border-yellow-500/50 bg-yellow-500/5',
6: 'border-red-500/30 bg-red-500/5',
5: 'border-blue-500/30 bg-blue-500/5',
4: 'border-green-500/30 bg-green-500/5',
7: 'border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)]',
6: 'border-[var(--color-error-border)] bg-[var(--color-error-subtle)]',
5: 'border-[var(--color-info-border)] bg-[var(--color-info-subtle)]',
4: 'border-[var(--color-success-border)] bg-[var(--color-success-subtle)]',
}
export function PermissionsList({ ranks: initialRanks }: Props) {