localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

slice 4: accent palette refinement — blue → teal

Browse Source 
Replace the four accent-family hex codes site-wide with the teal palette
(keeps the dark theme; only swaps the accent family, not the dark base):

  #3b82f6 (accent primary CTA)   → #5B7C8D  (teal)        [839×]
  #2563eb (accent-dark / hover)  → #4A6473  (darker teal) [44×]
  #60a5fa (info link, lighter)   → #8FB0C3  (mid teal)    [68×]
  #1e3a5f (accent-muted bg)      → #2F4F5F  (navy)        [44×]

tailwind.config.js tokens updated to match (accent/accent-dark/accent-muted).
Sweep also covers tailwind.css. 108 files touched. The dark base (#0d0d0d,
#111, #161616, #1a1a1a etc.) is intentionally untouched.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar (via Claude)
2026-05-15 23:33:04 +00:00
parent f6fa7570c4
commit 52fe7bceb6
109 changed files with 937 additions and 937 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/newsletter/archive/page.tsx
View File

@@ -62,7 +62,7 @@ function NewsletterCard({ newsletter }: { newsletter: Newsletter }) {
const blocks = Array.isArray(newsletter.article_blocks)
? newsletter.article_blocks.filter((b) => b.title)
: [];
const accent = newsletter.accent_color || "#3b82f6";
const accent = newsletter.accent_color || "#5B7C8D";
const layoutLabel: Record<string, string> = {
featured: "Weekly Digest",
@@ -112,7 +112,7 @@ function NewsletterCard({ newsletter }: { newsletter: Newsletter }) {
<span className="mt-1.5 w-1 h-1 rounded-full bg-[#444] flex-shrink-0" />
<span className="font-body text-[#888] text-xs leading-relaxed line-clamp-1">
{block.category && (
<span className="text-[#3b82f6] font-bold mr-1">{block.category}:</span>
<span className="text-[#5B7C8D] font-bold mr-1">{block.category}:</span>
)}
{block.title}
</span>
@@ -131,7 +131,7 @@ function NewsletterCard({ newsletter }: { newsletter: Newsletter }) {
<span className="font-body text-[#555] text-xs">
{blocks.length} {blocks.length === 1 ? "story" : "stories"}
</span>
<span className="font-body text-[#3b82f6] text-xs font-medium">
<span className="font-body text-[#5B7C8D] text-xs font-medium">
Issue #{newsletter.id.slice(0, 6).toUpperCase()}
</span>
</div>
@@ -180,12 +180,12 @@ function SignupCTA() {
return (
<section
className="bg-[#0d1520] border border-[#1e3a5f] rounded-sm p-6 md:p-8"
className="bg-[#0d1520] border border-[#2F4F5F] rounded-sm p-6 md:p-8"
aria-labelledby={`${formId}-heading`}>
<div className="flex items-center gap-3 mb-4">
<div className="flex-1 h-px bg-[#1e3a5f]" />
<div className="flex-1 h-px bg-[#2F4F5F]" />
<span className="section-label" id={`${formId}-heading`}>Subscribe</span>
<div className="flex-1 h-px bg-[#1e3a5f]" />
<div className="flex-1 h-px bg-[#2F4F5F]" />
</div>
<h3 className="font-heading text-[#e0e0e0] text-xl font-bold text-center mb-1">
Never Miss an Issue
@@ -196,9 +196,9 @@ function SignupCTA() {
{status === "success" ? (
<div className="text-center py-4" role="status" aria-live="polite">
<div className="w-10 h-10 rounded-full bg-[#3b82f6]/20 flex items-center justify-center mx-auto mb-3">
<div className="w-10 h-10 rounded-full bg-[#5B7C8D]/20 flex items-center justify-center mx-auto mb-3">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M4 10l4 4 8-8" stroke="#3b82f6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4 10l4 4 8-8" stroke="#5B7C8D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<p className="font-heading text-[#e0e0e0] font-bold mb-1">You&apos;re subscribed!</p>
@@ -227,7 +227,7 @@ function SignupCTA() {
/>
<span
aria-hidden="true"
className={`mr-1.5 inline-block w-3 h-3 rounded-sm border transition-colors ${checked ? "bg-[#3b82f6] border-[#3b82f6]" : "border-[#444]"}`}>
className={`mr-1.5 inline-block w-3 h-3 rounded-sm border transition-colors ${checked ? "bg-[#5B7C8D] border-[#5B7C8D]" : "border-[#444]"}`}>
{checked && (
<svg viewBox="0 0 12 12" fill="none" className="w-full h-full" aria-hidden="true">
<path d="M2 6l3 3 5-5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
@@ -261,7 +261,7 @@ function SignupCTA() {
<button
type="submit"
disabled={status === "loading"}
className={`btn-subscribe py-2.5 px-6 text-sm whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] ${status === "loading" ? "opacity-70 cursor-not-allowed" : ""}`}>
className={`btn-subscribe py-2.5 px-6 text-sm whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D] ${status === "loading" ? "opacity-70 cursor-not-allowed" : ""}`}>
{status === "loading" ? "Subscribing..." : "Subscribe Free"}
</button>
</div>
@@ -274,7 +274,7 @@ function SignupCTA() {
<p className="font-body text-[#555] text-xs mt-3 text-center">
No spam. Unsubscribe anytime.{" "}
<Link href="/privacy" className="text-[#3b82f6] hover:underline">
<Link href="/privacy" className="text-[#5B7C8D] hover:underline">
Privacy Policy
</Link>
</p>
@@ -418,9 +418,9 @@ export default function NewsletterArchivePage() {
<button
key={topic}
onClick={() => setSelectedTopic(topic)}
className={`font-body text-xs px-3 py-1.5 rounded-sm border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] ${
className={`font-body text-xs px-3 py-1.5 rounded-sm border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D] ${
selectedTopic === topic
? "bg-[#3b82f6] border-[#3b82f6] text-white"
? "bg-[#5B7C8D] border-[#5B7C8D] text-white"
: "bg-transparent border-[#333] text-[#888] hover:border-[#555] hover:text-[#ccc]"
}`}
aria-pressed={selectedTopic === topic}>
@@ -461,7 +461,7 @@ export default function NewsletterArchivePage() {
{hasActiveFilters && (
<button
onClick={handleClearFilters}
className="font-body text-xs text-[#3b82f6] hover:text-[#60a5fa] transition-colors underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6]">
className="font-body text-xs text-[#5B7C8D] hover:text-[#8FB0C3] transition-colors underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D]">
Clear filters
</button>
)}
@@ -497,7 +497,7 @@ export default function NewsletterArchivePage() {
<p className="font-body text-red-400 text-sm mb-3">{error}</p>
<button
onClick={fetchArchive}
className="font-body text-xs text-[#3b82f6] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6]">
className="font-body text-xs text-[#5B7C8D] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D]">
Try again
</button>
</div>
@@ -520,7 +520,7 @@ export default function NewsletterArchivePage() {
</p>
<button
onClick={handleClearFilters}
className="font-body text-xs text-[#3b82f6] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6]">
className="font-body text-xs text-[#5B7C8D] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D]">
Clear all filters
</button>
</div>
@@ -551,9 +551,9 @@ export default function NewsletterArchivePage() {
<li key={topic}>
<button
onClick={() => setSelectedTopic(topic)}
className={`w-full text-left font-body text-sm py-1.5 px-2 rounded-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] ${
className={`w-full text-left font-body text-sm py-1.5 px-2 rounded-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D] ${
selectedTopic === topic
? "text-[#3b82f6] bg-[#3b82f6]/10"
? "text-[#5B7C8D] bg-[#5B7C8D]/10"
: "text-[#888] hover:text-[#ccc] hover:bg-[#1a1a1a]"
}`}>
{topic}
@@ -574,9 +574,9 @@ export default function NewsletterArchivePage() {
<li key={year}>
<button
onClick={() => { setSelectedYear(String(year)); setSelectedMonth(""); }}
className={`w-full text-left font-body text-sm py-1.5 px-2 rounded-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] ${
className={`w-full text-left font-body text-sm py-1.5 px-2 rounded-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D] ${
selectedYear === String(year)
? "text-[#3b82f6] bg-[#3b82f6]/10"
? "text-[#5B7C8D] bg-[#5B7C8D]/10"
: "text-[#888] hover:text-[#ccc] hover:bg-[#1a1a1a]"
}`}>
{year}