peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(theme): R10 S1 — semantic status colors (danger/warn/success)

Browse Source 
Add theme-scoped --danger/--warn/--success (+ -fg) tokens wired into the v4
@theme inline, replacing ~110 raw red/amber/emerald/green palette refs across
34 files. Fixes light-theme contrast failures (fixed Tailwind shades fell to
~1.7-3:1 on white). Status colors are scheme-independent — recognised by hue,
shifting only by theme to hold contrast (bright on dark bg, darkened on light).
Solid fills use the paired -fg text; @source inline guarantees the full -fg set
exists. IMDb rating gold kept as a deliberate decorative non-status exception.
This commit is contained in:
peter
2026-08-09 01:03:53 +02:00
parent 9ca0c61ea9
commit d794524adf
35 changed files with 123 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AdminUsers.tsx
+7 -7
View File
@@ -58,7 +58,7 @@ function Badge({
tone === "accent"
? "border-accent/40 text-accent"
: tone === "warning"
? "border-amber-500/40 text-amber-500"
? "border-warn/40 text-warn"
: "border-border text-muted";
return (
<span className={`shrink-0 text-[11px] px-2 py-0.5 rounded-full border ${cls}`}>
@@ -230,8 +230,8 @@ function UsersRoles({ me }: { me: Me }) {
}
className={`shrink-0 p-1.5 rounded-lg border disabled:opacity-40 transition ${
u.is_suspended
? "border-amber-500/40 text-amber-500 hover:bg-amber-500/10"
: "border-border text-muted hover:text-amber-500"
? "border-warn/40 text-warn hover:bg-warn/10"
: "border-border text-muted hover:text-warn"
}`}
>
{u.is_suspended ? (
@@ -248,7 +248,7 @@ function UsersRoles({ me }: { me: Me }) {
onClick={() => onDelete(u)}
disabled={u.is_demo || self || pendingIds.has(u.id)}
aria-label={t("users.delete.action")}
className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-red-400 disabled:opacity-40 transition"
className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-danger disabled:opacity-40 transition"
>
<Trash2 className="w-4 h-4" />
</button>
@@ -368,7 +368,7 @@ function AdminInvites() {
{decided.map((i) => (
<div key={i.id} className="flex items-center justify-between gap-2">
<span className="truncate">{i.email}</span>
<span className={i.status === "approved" ? "text-accent" : "text-red-400"}>
<span className={i.status === "approved" ? "text-accent" : "text-danger"}>
{i.status}
</span>
</div>
@@ -445,7 +445,7 @@ function AdminDemo() {
<button
onClick={() => onRemove(r)}
disabled={remove.isPending}
className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-red-400 disabled:opacity-50 transition"
className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-danger disabled:opacity-50 transition"
aria-label={t("settings.demo.remove")}
>
<Trash2 className="w-4 h-4" />
@@ -542,7 +542,7 @@ function InviteRow({
<button
onClick={onDeny}
disabled={busy}
className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-red-400 disabled:opacity-50 transition"
className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-danger disabled:opacity-50 transition"
aria-label={t("settings.invites.deny")}
>
<X className="w-4 h-4" />