Skip to content

Commit 9cc7d08

Browse files
offendingcommitoffendingcommit
authored
Merge pull request #9 from offendingcommit/codex/darkmode-accessibility
[codex] Improve dark mode accessibility contrast
2 parents 3d1bb4c + 7827438 commit 9cc7d08

5 files changed

Lines changed: 62 additions & 38 deletions

File tree

‎packages/web/src/components/shared/Badge.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const variantStyles: Record<string, React.CSSProperties> = {
2525
border: "1px solid rgba(239,68,68,0.2)",
2626
},
2727
blue: {
28-
background: "rgba(99,102,241,0.08)",
28+
background: "var(--accent-subtle)",
2929
color: "var(--accent-text)",
3030
border: "1px solid var(--accent-border)",
3131
},

‎packages/web/src/components/ui/button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
66
const buttonVariants = cva(
77
[
88
"inline-flex items-center justify-center gap-1.5 rounded-lg font-medium transition-all",
9-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-1)]",
9+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg)]",
1010
"disabled:opacity-50 disabled:pointer-events-none",
1111
],
1212
{
@@ -24,7 +24,7 @@ const buttonVariants = cva(
2424
"focus-visible:ring-[var(--border)]",
2525
],
2626
ghost: [
27-
"[color:var(--text-3)]",
27+
"[color:var(--text-2)]",
2828
"hover:[background:var(--surface)]",
2929
"focus-visible:ring-[var(--border)]",
3030
],

‎packages/web/src/components/ui/typography.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export function Caption<T extends React.ElementType = "span">({
8585
}: Props<T>) {
8686
const Tag = (as ?? "span") as React.ElementType;
8787
return (
88-
<Tag className={cn("text-xs", className)} style={{ color: "var(--text-4)" }} {...rest}>
88+
<Tag className={cn("text-xs", className)} style={{ color: "var(--text-3)" }} {...rest}>
8989
{children}
9090
</Tag>
9191
);
@@ -101,7 +101,7 @@ export function MonoCaption<T extends React.ElementType = "span">({
101101
return (
102102
<Tag
103103
className={cn("text-xs font-mono", className)}
104-
style={{ color: "var(--text-4)" }}
104+
style={{ color: "var(--text-3)" }}
105105
{...rest}
106106
>
107107
{children}

‎packages/web/src/index.css‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,28 +28,41 @@
2828
/* ─── Theme tokens ─── */
2929
:root,
3030
[data-theme="dark"] {
31-
--bg: #0c0c10;
32-
--bg-2: #111118;
33-
--bg-3: #1a1a24;
34-
--surface: rgba(255, 255, 255, 0.03);
35-
--border: rgba(255, 255, 255, 0.08);
36-
--border-2: rgba(255, 255, 255, 0.13);
37-
--text-1: #e8e8f4;
38-
--text-2: #94a3b8;
39-
--text-3: #64748b;
40-
--text-4: #475569;
31+
color-scheme: dark;
32+
--bg: #0b0d12;
33+
--bg-2: #121722;
34+
--bg-3: #1b2331;
35+
--surface: rgba(148, 163, 184, 0.08);
36+
--border: rgba(148, 163, 184, 0.18);
37+
--border-2: rgba(148, 163, 184, 0.28);
38+
--text-1: #f3f6ff;
39+
--text-2: #c3cddd;
40+
--text-3: #95a4bb;
41+
--text-4: #7787a0;
4142
--accent: #6366f1;
42-
--accent-dim: rgba(99, 102, 241, 0.15);
43-
--accent-border: rgba(99, 102, 241, 0.35);
44-
--accent-text: #a5b4fc;
45-
--sidebar-bg: linear-gradient(180deg, #111118 0%, #0e0e15 100%);
46-
--grid-line: rgba(99, 102, 241, 0.03);
47-
--glow: rgba(79, 70, 229, 0.08);
43+
--accent-text: #d6ddff;
44+
--accent-soft: #c7d2fe;
45+
--accent-dim: rgba(129, 140, 248, 0.18);
46+
--accent-dim-hover: rgba(129, 140, 248, 0.24);
47+
--accent-subtle: rgba(129, 140, 248, 0.14);
48+
--accent-muted: #a5b4fc;
49+
--accent-glow: rgba(129, 140, 248, 0.4);
50+
--accent-border: rgba(129, 140, 248, 0.4);
51+
--accent-border-strong: rgba(165, 180, 252, 0.56);
52+
--accent-spinner-track: rgba(129, 140, 248, 0.26);
53+
--dim-text: #a7b4c8;
54+
--dim-icon: rgba(167, 180, 200, 0.75);
55+
--card-base-bg: rgba(148, 163, 184, 0.08);
56+
--card-base-border: rgba(148, 163, 184, 0.18);
57+
--sidebar-bg: linear-gradient(180deg, #121722 0%, #0d1017 100%);
58+
--grid-line: rgba(129, 140, 248, 0.05);
59+
--glow: rgba(99, 102, 241, 0.1);
4860
--scrollbar: rgba(99, 102, 241, 0.2);
49-
--card-hover: rgba(99, 102, 241, 0.06);
61+
--card-hover: rgba(129, 140, 248, 0.12);
5062
}
5163

5264
[data-theme="light"] {
65+
color-scheme: light;
5366
--bg: #f8f8fc;
5467
--bg-2: #ffffff;
5568
--bg-3: #f0f0f8;
@@ -61,9 +74,20 @@
6174
--text-3: #6b7280;
6275
--text-4: #9ca3af;
6376
--accent: #4f46e5;
77+
--accent-text: #4f46e5;
78+
--accent-soft: #6366f1;
6479
--accent-dim: rgba(79, 70, 229, 0.08);
80+
--accent-dim-hover: rgba(79, 70, 229, 0.12);
81+
--accent-subtle: rgba(79, 70, 229, 0.1);
82+
--accent-muted: #6366f1;
83+
--accent-glow: rgba(79, 70, 229, 0.28);
6584
--accent-border: rgba(79, 70, 229, 0.25);
66-
--accent-text: #4f46e5;
85+
--accent-border-strong: rgba(79, 70, 229, 0.35);
86+
--accent-spinner-track: rgba(79, 70, 229, 0.18);
87+
--dim-text: #4b5563;
88+
--dim-icon: rgba(75, 85, 99, 0.6);
89+
--card-base-bg: rgba(15, 23, 42, 0.03);
90+
--card-base-border: rgba(15, 23, 42, 0.08);
6791
--sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f4f4fc 100%);
6892
--grid-line: rgba(79, 70, 229, 0.04);
6993
--glow: rgba(79, 70, 229, 0.06);

‎packages/web/src/lib/constants.ts‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,27 @@ export const COLOR = {
1717
destructiveBorder: "rgba(239,68,68,0.2)",
1818

1919
// Accent (indigo — matches --accent CSS var)
20-
accent: "#6366f1",
21-
accentText: "#818cf8",
22-
accentSoft: "#c7d2fe",
23-
accentDim: "rgba(99,102,241,0.08)",
24-
accentDimHover: "rgba(99,102,241,0.06)",
25-
accentSubtle: "rgba(99,102,241,0.1)",
26-
accentMuted: "rgba(99,102,241,0.6)",
27-
accentGlow: "rgba(99,102,241,0.4)",
28-
accentBorder: "rgba(99,102,241,0.2)",
29-
accentBorderStrong: "rgba(99,102,241,0.15)",
30-
accentSpinnerTrack: "rgba(99,102,241,0.15)",
20+
accent: "var(--accent)",
21+
accentText: "var(--accent-text)",
22+
accentSoft: "var(--accent-soft)",
23+
accentDim: "var(--accent-dim)",
24+
accentDimHover: "var(--accent-dim-hover)",
25+
accentSubtle: "var(--accent-subtle)",
26+
accentMuted: "var(--accent-muted)",
27+
accentGlow: "var(--accent-glow)",
28+
accentBorder: "var(--accent-border)",
29+
accentBorderStrong: "var(--accent-border-strong)",
30+
accentSpinnerTrack: "var(--accent-spinner-track)",
3131

3232
// Neutral dim (slate-300 at opacity)
33-
dimText: "rgba(148,163,184,0.5)",
34-
dimIcon: "rgba(148,163,184,0.3)",
33+
dimText: "var(--dim-text)",
34+
dimIcon: "var(--dim-icon)",
3535

3636
// Error detail text
3737
destructiveMuted: "rgba(248,113,113,0.6)",
3838
destructiveBorderStrong: "rgba(239,68,68,0.25)",
3939

4040
// Framer-motion hover card base state (inline only — CSS vars can't be animated)
41-
cardBaseBg: "rgba(255,255,255,0.02)",
42-
cardBaseBorder: "rgba(255,255,255,0.06)",
41+
cardBaseBg: "var(--card-base-bg)",
42+
cardBaseBorder: "var(--card-base-border)",
4343
} as const;

0 commit comments

Comments
 (0)