A personal media tracker built on the AT Protocol
opnshelf.xyz
feat: replace blue accent with amber/gold color scheme
- Swap sapphire blue palette for warm amber/gold (#f3bc00)
- Add complete amber color scale (50-900) for light/dark mode harmony
- Update semantic tokens: --accent, --accent-hover, --accent-subtle, --accent-muted
- Fix text contrast: dark brown (#3f2e00) on amber backgrounds
- Use lighter amber (#fbbf24) for dark mode visibility
- Add amber-to-orange gradient for .gradient-text utility
+28
-28
+2
-2
apps/web/src/components/ErrorBoundary.tsx
+2
-2
apps/web/src/components/ErrorBoundary.tsx
···
52
52
<button
53
53
type="button"
54
54
onClick={handleRetry}
55
-
className="inline-flex items-center justify-center gap-2 rounded-md bg-[var(--accent)] px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-[var(--accent-hover)]"
55
+
className="inline-flex items-center justify-center gap-2 rounded-md bg-[var(--accent)] px-6 py-3 text-sm font-medium text-[#3f2e00] transition-colors hover:bg-[var(--accent-hover)]"
56
56
>
57
57
<RefreshCw className="h-4 w-4" />
58
58
Try Again
···
103
103
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
104
104
<Link
105
105
to="/"
106
-
className="inline-flex items-center justify-center gap-2 rounded-md bg-[var(--accent)] px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-[var(--accent-hover)]"
106
+
className="inline-flex items-center justify-center gap-2 rounded-md bg-[var(--accent)] px-6 py-3 text-sm font-medium text-[#3f2e00] transition-colors hover:bg-[var(--accent-hover)]"
107
107
>
108
108
<Home className="h-4 w-4" />
109
109
Go Home
+2
-2
apps/web/src/components/Header.tsx
+2
-2
apps/web/src/components/Header.tsx
···
55
55
<div className="container-app">
56
56
<nav className="flex h-16 items-center justify-between">
57
57
<Link to="/" className="flex items-center gap-2">
58
-
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--accent)] text-white">
58
+
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--accent)] text-[#3f2e00]">
59
59
<Film className="h-4 w-4" />
60
60
</div>
61
61
<span className="font-display text-lg font-bold tracking-tight">
···
81
81
{/* Logo */}
82
82
<div className="flex items-center gap-2">
83
83
<Link to="/" className="flex items-center gap-2">
84
-
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--accent)] text-white">
84
+
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--accent)] text-[#3f2e00]">
85
85
<Film className="h-4 w-4" />
86
86
</div>
87
87
<span className="font-display text-lg font-bold tracking-tight">
+2
-2
apps/web/src/routes/lists.tsx
+2
-2
apps/web/src/routes/lists.tsx
···
470
470
onClick={() => setViewMode("grid")}
471
471
className={`rounded-md p-1.5 transition-colors ${
472
472
viewMode === "grid"
473
-
? "bg-[var(--accent)] text-white"
473
+
? "bg-[var(--accent)] text-[#3f2e00]"
474
474
: "text-[var(--foreground-muted)] hover:text-[var(--foreground)]"
475
475
}`}
476
476
aria-label="Grid view"
···
482
482
onClick={() => setViewMode("list")}
483
483
className={`rounded-md p-1.5 transition-colors ${
484
484
viewMode === "list"
485
-
? "bg-[var(--accent)] text-white"
485
+
? "bg-[var(--accent)] text-[#3f2e00]"
486
486
: "text-[var(--foreground-muted)] hover:text-[var(--foreground)]"
487
487
}`}
488
488
aria-label="List view"
+1
-1
apps/web/src/routes/login.tsx
+1
-1
apps/web/src/routes/login.tsx
···
38
38
{/* Logo */}
39
39
<div className="mb-8 text-center">
40
40
<div className="mb-4 flex justify-center">
41
-
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[var(--accent)] text-white">
41
+
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[var(--accent)] text-[#3f2e00]">
42
42
<Film className="h-8 w-8" />
43
43
</div>
44
44
</div>
+1
-1
apps/web/src/routes/show/$id.tsx
+1
-1
apps/web/src/routes/show/$id.tsx
···
346
346
{/* Current Progress */}
347
347
{isTracking && nextEpisode && (
348
348
<div className="mt-4 flex items-center gap-2 text-sm">
349
-
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-[var(--accent)] text-white text-xs font-medium">
349
+
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-[var(--accent)] text-[#3f2e00] text-xs font-medium">
350
350
{nextEpisode.episode_number}
351
351
</div>
352
352
<span className="text-[var(--foreground-muted)]">
+19
-19
apps/web/src/styles.css
+19
-19
apps/web/src/styles.css
···
24
24
--slate-900: #0f172a;
25
25
--slate-950: #020617;
26
26
27
-
/* Accent - Sapphire blue */
28
-
--accent-50: #eff6ff;
29
-
--accent-100: #dbeafe;
30
-
--accent-200: #bfdbfe;
31
-
--accent-300: #93c5fd;
32
-
--accent-400: #60a5fa;
33
-
--accent-500: #3b82f6;
34
-
--accent-600: #2563eb;
35
-
--accent-700: #1d4ed8;
36
-
--accent-800: #1e40af;
37
-
--accent-900: #1e3a8a;
27
+
/* Accent - Warm Amber/Gold */
28
+
--accent-50: #fffbeb;
29
+
--accent-100: #fef3c7;
30
+
--accent-200: #fde68a;
31
+
--accent-300: #fcd34d;
32
+
--accent-400: #fbbf24;
33
+
--accent-500: #f59e0b;
34
+
--accent-600: #f3bc00;
35
+
--accent-700: #d97706;
36
+
--accent-800: #92400e;
37
+
--accent-900: #78350f;
38
38
39
39
/* Semantic tokens */
40
40
--background: var(--slate-50);
···
73
73
--popover: var(--background-elevated);
74
74
--popover-foreground: var(--foreground);
75
75
--primary: var(--accent);
76
-
--primary-foreground: #ffffff;
76
+
--primary-foreground: #3f2e00;
77
77
--secondary: var(--background-subtle);
78
78
--secondary-foreground: var(--foreground);
79
79
--muted: var(--background-subtle);
···
94
94
--foreground-muted: var(--slate-400);
95
95
--foreground-subtle: var(--slate-500);
96
96
97
-
--accent: var(--accent-500);
98
-
--accent-hover: var(--accent-400);
99
-
--accent-subtle: rgba(59, 130, 246, 0.1);
100
-
--accent-muted: rgba(59, 130, 246, 0.2);
97
+
--accent: var(--accent-400);
98
+
--accent-hover: var(--accent-300);
99
+
--accent-subtle: rgba(251, 191, 36, 0.15);
100
+
--accent-muted: rgba(251, 191, 36, 0.25);
101
101
102
102
--border: var(--slate-800);
103
103
--border-strong: var(--slate-700);
···
114
114
--popover: var(--background-elevated);
115
115
--popover-foreground: var(--foreground);
116
116
--primary: var(--accent);
117
-
--primary-foreground: var(--slate-950);
117
+
--primary-foreground: #3f2e00;
118
118
--secondary: var(--background-subtle);
119
119
--secondary-foreground: var(--foreground);
120
120
--muted: var(--background-subtle);
···
292
292
293
293
.btn-primary {
294
294
background-color: var(--accent);
295
-
color: white;
295
+
color: #3f2e00;
296
296
border-color: var(--accent);
297
297
}
298
298
···
579
579
580
580
/* Gradient text */
581
581
.gradient-text {
582
-
background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
582
+
background: linear-gradient(135deg, var(--accent-400), #f97316);
583
583
-webkit-background-clip: text;
584
584
-webkit-text-fill-color: transparent;
585
585
background-clip: text;