From 33042cde79da1c33b93bd17b649ff4b4da2a7403 Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Mon, 16 Mar 2026 21:30:42 +0800
Subject: [PATCH] fix: unify color system around configurable accent, warm-tint
 neutrals

Replace hardcoded purple gradients with accent-derived colors so
changing NEXT_PUBLIC_COLOR_ACCENT actually controls the entire site.
Warm-tint ink colors and body background from slate to stone.
Remove decorative floating orbs from hero. Simplify tag page to
accent-derived tints instead of 5 random colors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/tags/page.tsx               |  8 +++-----
 components/hero.tsx             |  4 +---
 components/post-card.tsx        |  2 +-
 components/post-list-item.tsx   |  2 +-
 components/reading-progress.tsx |  6 +++---
 components/repo-card.tsx        |  2 +-
 components/timeline-wrapper.tsx |  8 ++------
 styles/globals.css              | 23 ++++++++++-------------
 8 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/app/tags/page.tsx b/app/tags/page.tsx
index 7b3db6a..674a10c 100644
--- a/app/tags/page.tsx
+++ b/app/tags/page.tsx
@@ -21,11 +21,9 @@ export default function TagIndexPage() {
   const topTags = tags.slice(0, 3);
 
   const colorClasses = [
-    'from-rose-400/70 to-rose-200/40',
-    'from-emerald-400/70 to-emerald-200/40',
-    'from-sky-400/70 to-sky-200/40',
-    'from-amber-400/70 to-amber-200/40',
-    'from-violet-400/70 to-violet-200/40'
+    'from-accent/60 to-accent/20',
+    'from-accent/50 to-accent/15',
+    'from-accent/40 to-accent/10',
   ];
 
   // CollectionPage schema with ItemList
diff --git a/components/hero.tsx b/components/hero.tsx
index 3270dac..5aa89c4 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -52,9 +52,7 @@ export function Hero() {
   }[];
 
   return (
-    <section className="motion-card group relative mb-8 overflow-hidden rounded-xl border bg-gradient-to-r from-sky-50 via-indigo-50 to-slate-50 px-6 py-6 shadow-sm dark:border-slate-800 dark:from-slate-900 dark:via-slate-950 dark:to-slate-900">
-      <div className="pointer-events-none absolute -left-16 -top-16 h-40 w-40 rounded-full bg-sky-300/40 blur-3xl mix-blend-soft-light motion-safe:animate-float-soft dark:bg-sky-500/25" />
-      <div className="pointer-events-none absolute -bottom-20 right-[-3rem] h-44 w-44 rounded-full bg-indigo-300/35 blur-3xl mix-blend-soft-light motion-safe:animate-float-soft dark:bg-indigo-500/25" />
+    <section className="motion-card group relative mb-8 overflow-hidden rounded-xl border bg-accent-soft px-6 py-6 shadow-sm dark:border-slate-800">
 
       <div className="relative flex items-center gap-4 motion-safe:animate-fade-in-up">
         <div className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-900 text-xl font-semibold text-slate-50 shadow-md transition-transform duration-300 ease-out group-hover:scale-105 dark:bg-slate-100 dark:text-slate-900">
diff --git a/components/post-card.tsx b/components/post-card.tsx
index 41aa44f..7a6a15d 100644
--- a/components/post-card.tsx
+++ b/components/post-card.tsx
@@ -18,7 +18,7 @@ export function PostCard({ post, showTags = true }: PostCardProps) {
 
   return (
     <article className="motion-card group relative overflow-hidden rounded-xl border bg-white shadow-sm transition-all duration-300 ease-snappy hover:-translate-y-1 hover:shadow-lg dark:border-slate-800 dark:bg-slate-900">
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-1 origin-left scale-x-0 bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100" />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-1 origin-left scale-x-0 bg-accent opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100" />
       {cover && (
         <div className="relative w-full bg-slate-100 dark:bg-slate-800 overflow-hidden">
           <Image
diff --git a/components/post-list-item.tsx b/components/post-list-item.tsx
index bbe61bb..78db84c 100644
--- a/components/post-list-item.tsx
+++ b/components/post-list-item.tsx
@@ -21,7 +21,7 @@ export function PostListItem({ post, priority = false }: Props) {
 
   return (
     <article className="motion-card group relative flex gap-4 rounded-2xl border border-white/40 bg-white/60 p-5 shadow-lg backdrop-blur-md transition-all hover:scale-[1.01] hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60">
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100" />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-accent opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100" />
       {cover && (
         <div className="relative flex h-24 w-24 flex-none overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800 sm:h-auto sm:w-40">
           <Image
diff --git a/components/reading-progress.tsx b/components/reading-progress.tsx
index b8c7c5b..d555eb1 100644
--- a/components/reading-progress.tsx
+++ b/components/reading-progress.tsx
@@ -56,7 +56,7 @@ export function ReadingProgress() {
     <div className="pointer-events-none fixed inset-x-0 top-0 z-[1200] h-1.5 bg-transparent">
       <div className="relative h-1.5 w-full overflow-visible">
         {useScrollDriven ? (
-          <div aria-hidden="true" className="reading-progress-bar-scroll-driven absolute inset-y-0 left-0 w-full origin-left rounded-full bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] shadow-[0_0_12px_rgba(124,58,237,0.5)]">
+          <div aria-hidden="true" className="reading-progress-bar-scroll-driven absolute inset-y-0 left-0 w-full origin-left rounded-full bg-accent">
             <span
               className="absolute -right-2 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-white/80 blur-[1px] dark:bg-slate-900/80"
               aria-hidden="true"
@@ -64,7 +64,7 @@ export function ReadingProgress() {
           </div>
         ) : (
           <div
-            className="absolute inset-y-0 left-0 w-full origin-left rounded-full bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] shadow-[0_0_12px_rgba(124,58,237,0.5)] will-change-transform transition-[transform,opacity] duration-300 ease-out"
+            className="absolute inset-y-0 left-0 w-full origin-left rounded-full bg-accent will-change-transform transition-[transform,opacity] duration-300 ease-out"
             style={{
               transform: `scaleX(${progress / 100})`,
               opacity: progress > 0 ? 1 : 0
@@ -78,7 +78,7 @@ export function ReadingProgress() {
           </div>
         )}
         <span
-          className="absolute inset-x-0 top-2 h-px bg-gradient-to-r from-transparent via-blue-200/40 to-transparent blur-sm dark:via-blue-900/30"
+          className="absolute inset-x-0 top-2 h-px bg-gradient-to-r from-transparent via-accent-soft to-transparent blur-sm"
           aria-hidden="true"
         />
       </div>
diff --git a/components/repo-card.tsx b/components/repo-card.tsx
index bc83f55..a3d7b1f 100644
--- a/components/repo-card.tsx
+++ b/components/repo-card.tsx
@@ -18,7 +18,7 @@ export function RepoCard({ repo, animationDelay = 0 }: RepoCardProps) {
         animationDelay > 0 ? { animationDelay: `${animationDelay}ms` } : undefined
       }
     >
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100" />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-accent opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100" />
       <div className="flex items-start justify-between gap-2">
         <Link
           href={repo.htmlUrl}
diff --git a/components/timeline-wrapper.tsx b/components/timeline-wrapper.tsx
index 7b039bf..d42521a 100644
--- a/components/timeline-wrapper.tsx
+++ b/components/timeline-wrapper.tsx
@@ -29,18 +29,14 @@ export function TimelineWrapper({ children, className }: TimelineWrapperProps) {
   return (
     <div className={clsx('relative pl-6 md:pl-8', className)}>
       <span
-        className="pointer-events-none absolute left-2 top-0 h-full w-[2px] rounded-full bg-blue-400 shadow-[0_0_10px_rgba(59,130,246,0.35)] dark:bg-cyan-300 md:left-3"
-        aria-hidden="true"
-      />
-      <span
-        className="pointer-events-none absolute left-2 top-0 h-full w-[8px] rounded-full bg-blue-500/15 blur-[14px] md:left-3"
+        className="pointer-events-none absolute left-2 top-0 h-full w-[2px] rounded-full bg-accent/40 md:left-3"
         aria-hidden="true"
       />
 
       <div className="space-y-4">
         {items.map((child, index) => (
           <div key={index} className="relative pl-5 sm:pl-8">
-            <span className="pointer-events-none absolute left-0 top-1/2 h-px w-5 -translate-x-full -translate-y-1/2 bg-gradient-to-r from-transparent via-blue-300/80 to-transparent dark:via-cyan-200/80 sm:w-8" aria-hidden="true" />
+            <span className="pointer-events-none absolute left-0 top-1/2 h-px w-5 -translate-x-full -translate-y-1/2 bg-gradient-to-r from-transparent via-accent/30 to-transparent sm:w-8" aria-hidden="true" />
             {child}
           </div>
         ))}
diff --git a/styles/globals.css b/styles/globals.css
index 22e9d88..fa74817 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -28,7 +28,7 @@
 
   /* Custom box shadows */
   --shadow-lifted: 0 12px 30px -14px rgba(0, 0, 0, 0.35);
-  --shadow-outline: 0 0 0 1px rgba(139, 92, 246, 0.25);
+  --shadow-outline: 0 0 0 1px color-mix(in oklch, var(--color-accent) 25%, transparent);
 
   /* Custom keyframes */
   --animate-fade-in-up: fade-in-up 0.6s ease-out both;
@@ -1332,22 +1332,19 @@
   --font-weight-semibold: 600;
   --font-system-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'PingFang TC', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans CJK TC', 'Noto Sans CJK SC', 'Source Han Sans TC', 'Source Han Sans SC', 'Roboto', 'Ubuntu', 'Cantarell', 'Inter', 'Helvetica Neue', Arial, sans-serif;
 
-  /* Ink + accent palette */
-  --color-ink-strong: #0f172a;
-  --color-ink-body: #1f2937;
-  --color-ink-muted: #475569;
-  --color-accent: #7c3aed;
-  --color-accent-soft: #f4f0ff;
+  /* Ink palette — warm-tinted neutrals */
+  --color-ink-strong: #1c1917;
+  --color-ink-body: #292524;
+  --color-ink-muted: #57534e;
 
   font-size: clamp(15px, 0.65vw + 11px, 19px);
 }
 
 .dark {
-  --color-ink-strong: #e2e8f0;
-  --color-ink-body: #cbd5e1;
-  --color-ink-muted: #94a3b8;
-  --color-accent: #a78bfa;
-  --color-accent-soft: #1f1a3d;
+  /* Ink palette — warm-tinted neutrals (dark) */
+  --color-ink-strong: #e7e5e4;
+  --color-ink-body: #d6d3d1;
+  --color-ink-muted: #a8a29e;
 }
 
 @media (min-width: 2560px) {
@@ -1357,7 +1354,7 @@
 }
 
 body {
-  @apply bg-white text-gray-900 transition-colors duration-200 ease-snappy dark:bg-gray-950 dark:text-gray-100;
+  @apply bg-stone-50 text-stone-900 transition-colors duration-200 ease-snappy dark:bg-stone-950 dark:text-stone-100;
   font-size: 1rem;
   line-height: var(--line-height-body);
   font-family: var(--font-system-sans);