gortium/openconcho
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve dark mode accessibility contrast

Browse Source
This commit is contained in:
Offending Commit
2026-05-12 09:49:27 -05:00
parent 3d1bb4c93c
commit 7827438d92
5 changed files with 63 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/components/shared/Badge.tsx
View File

@@ -25,7 +25,7 @@ const variantStyles: Record<string, React.CSSProperties> = {
border: "1px solid rgba(239,68,68,0.2)", border: "1px solid rgba(239,68,68,0.2)",
}, },
blue: { blue: {
background: "rgba(99,102,241,0.08)", background: "var(--accent-subtle)",
color: "var(--accent-text)", color: "var(--accent-text)",
border: "1px solid var(--accent-border)", border: "1px solid var(--accent-border)",
}, },

4
packages/web/src/components/ui/button.tsx
View File

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
const buttonVariants = cva( const buttonVariants = cva(
[ [
"inline-flex items-center justify-center gap-1.5 rounded-lg font-medium transition-all", "inline-flex items-center justify-center gap-1.5 rounded-lg font-medium transition-all",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-1)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg)]",
"disabled:opacity-50 disabled:pointer-events-none", "disabled:opacity-50 disabled:pointer-events-none",
], ],
{ {
@@ -24,7 +24,7 @@ const buttonVariants = cva(
"focus-visible:ring-[var(--border)]", "focus-visible:ring-[var(--border)]",
], ],
ghost: [ ghost: [
"[color:var(--text-3)]", "[color:var(--text-2)]",
"hover:[background:var(--surface)]", "hover:[background:var(--surface)]",
"focus-visible:ring-[var(--border)]", "focus-visible:ring-[var(--border)]",
], ],

4
packages/web/src/components/ui/typography.tsx
View File

@@ -85,7 +85,7 @@ export function Caption<T extends React.ElementType = "span">({
}: Props<T>) { }: Props<T>) {
const Tag = (as ?? "span") as React.ElementType; const Tag = (as ?? "span") as React.ElementType;
return ( return (
<Tag className={cn("text-xs", className)} style={{ color: "var(--text-4)" }} {...rest}> <Tag className={cn("text-xs", className)} style={{ color: "var(--text-3)" }} {...rest}>
{children} {children}
</Tag> </Tag>
); );
@@ -101,7 +101,7 @@ export function MonoCaption<T extends React.ElementType = "span">({
return ( return (
<Tag <Tag
className={cn("text-xs font-mono", className)} className={cn("text-xs font-mono", className)}
style={{ color: "var(--text-4)" }} style={{ color: "var(--text-3)" }}
{...rest} {...rest}
> >
{children} {children}

62
packages/web/src/index.css
View File

@@ -28,28 +28,41 @@
/* ─── Theme tokens ─── */ /* ─── Theme tokens ─── */
:root, :root,
[data-theme="dark"] { [data-theme="dark"] {
--bg: #0c0c10; color-scheme: dark;
--bg-2: #111118; --bg: #0b0d12;
--bg-3: #1a1a24; --bg-2: #121722;
--surface: rgba(255, 255, 255, 0.03); --bg-3: #1b2331;
--border: rgba(255, 255, 255, 0.08); --surface: rgba(148, 163, 184, 0.08);
--border-2: rgba(255, 255, 255, 0.13); --border: rgba(148, 163, 184, 0.18);
--text-1: #e8e8f4; --border-2: rgba(148, 163, 184, 0.28);
--text-2: #94a3b8; --text-1: #f3f6ff;
--text-3: #64748b; --text-2: #c3cddd;
--text-4: #475569; --text-3: #95a4bb;
--text-4: #7787a0;
--accent: #6366f1; --accent: #6366f1;
--accent-dim: rgba(99, 102, 241, 0.15); --accent-text: #d6ddff;
--accent-border: rgba(99, 102, 241, 0.35); --accent-soft: #c7d2fe;
--accent-text: #a5b4fc; --accent-dim: rgba(129, 140, 248, 0.18);
--sidebar-bg: linear-gradient(180deg, #111118 0%, #0e0e15 100%); --accent-dim-hover: rgba(129, 140, 248, 0.24);
--grid-line: rgba(99, 102, 241, 0.03); --accent-subtle: rgba(129, 140, 248, 0.14);
--glow: rgba(79, 70, 229, 0.08); --accent-muted: #a5b4fc;
--accent-glow: rgba(129, 140, 248, 0.4);
--accent-border: rgba(129, 140, 248, 0.4);
--accent-border-strong: rgba(165, 180, 252, 0.56);
--accent-spinner-track: rgba(129, 140, 248, 0.26);
--dim-text: #a7b4c8;
--dim-icon: rgba(167, 180, 200, 0.75);
--card-base-bg: rgba(148, 163, 184, 0.08);
--card-base-border: rgba(148, 163, 184, 0.18);
--sidebar-bg: linear-gradient(180deg, #121722 0%, #0d1017 100%);
--grid-line: rgba(129, 140, 248, 0.05);
--glow: rgba(99, 102, 241, 0.1);
--scrollbar: rgba(99, 102, 241, 0.2); --scrollbar: rgba(99, 102, 241, 0.2);
--card-hover: rgba(99, 102, 241, 0.06); --card-hover: rgba(129, 140, 248, 0.12);
} }
[data-theme="light"] { [data-theme="light"] {
color-scheme: light;
--bg: #f8f8fc; --bg: #f8f8fc;
--bg-2: #ffffff; --bg-2: #ffffff;
--bg-3: #f0f0f8; --bg-3: #f0f0f8;
@@ -61,9 +74,20 @@
--text-3: #6b7280; --text-3: #6b7280;
--text-4: #9ca3af; --text-4: #9ca3af;
--accent: #4f46e5; --accent: #4f46e5;
--accent-dim: rgba(79, 70, 229, 0.08);
--accent-border: rgba(79, 70, 229, 0.25);
--accent-text: #4f46e5; --accent-text: #4f46e5;
--accent-soft: #6366f1;
--accent-dim: rgba(79, 70, 229, 0.08);
--accent-dim-hover: rgba(79, 70, 229, 0.12);
--accent-subtle: rgba(79, 70, 229, 0.1);
--accent-muted: #6366f1;
--accent-glow: rgba(79, 70, 229, 0.28);
--accent-border: rgba(79, 70, 229, 0.25);
--accent-border-strong: rgba(79, 70, 229, 0.35);
--accent-spinner-track: rgba(79, 70, 229, 0.18);
--dim-text: #4b5563;
--dim-icon: rgba(75, 85, 99, 0.6);
--card-base-bg: rgba(15, 23, 42, 0.03);
--card-base-border: rgba(15, 23, 42, 0.08);
--sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f4f4fc 100%); --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f4f4fc 100%);
--grid-line: rgba(79, 70, 229, 0.04); --grid-line: rgba(79, 70, 229, 0.04);
--glow: rgba(79, 70, 229, 0.06); --glow: rgba(79, 70, 229, 0.06);

30
packages/web/src/lib/constants.ts
View File

@@ -17,27 +17,27 @@ export const COLOR = {
destructiveBorder: "rgba(239,68,68,0.2)", destructiveBorder: "rgba(239,68,68,0.2)",
// Accent (indigo — matches --accent CSS var) // Accent (indigo — matches --accent CSS var)
accent: "#6366f1", accent: "var(--accent)",
accentText: "#818cf8", accentText: "var(--accent-text)",
accentSoft: "#c7d2fe", accentSoft: "var(--accent-soft)",
accentDim: "rgba(99,102,241,0.08)", accentDim: "var(--accent-dim)",
accentDimHover: "rgba(99,102,241,0.06)", accentDimHover: "var(--accent-dim-hover)",
accentSubtle: "rgba(99,102,241,0.1)", accentSubtle: "var(--accent-subtle)",
accentMuted: "rgba(99,102,241,0.6)", accentMuted: "var(--accent-muted)",
accentGlow: "rgba(99,102,241,0.4)", accentGlow: "var(--accent-glow)",
accentBorder: "rgba(99,102,241,0.2)", accentBorder: "var(--accent-border)",
accentBorderStrong: "rgba(99,102,241,0.15)", accentBorderStrong: "var(--accent-border-strong)",
accentSpinnerTrack: "rgba(99,102,241,0.15)", accentSpinnerTrack: "var(--accent-spinner-track)",
// Neutral dim (slate-300 at opacity) // Neutral dim (slate-300 at opacity)
dimText: "rgba(148,163,184,0.5)", dimText: "var(--dim-text)",
dimIcon: "rgba(148,163,184,0.3)", dimIcon: "var(--dim-icon)",
// Error detail text // Error detail text
destructiveMuted: "rgba(248,113,113,0.6)", destructiveMuted: "rgba(248,113,113,0.6)",
destructiveBorderStrong: "rgba(239,68,68,0.25)", destructiveBorderStrong: "rgba(239,68,68,0.25)",
// Framer-motion hover card base state (inline only — CSS vars can't be animated) // Framer-motion hover card base state (inline only — CSS vars can't be animated)
cardBaseBg: "rgba(255,255,255,0.02)", cardBaseBg: "var(--card-base-bg)",
cardBaseBorder: "rgba(255,255,255,0.06)", cardBaseBorder: "var(--card-base-border)",
} as const; } as const;