novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(theme): 品牌色令牌语义拆分与暗黑模式全站治理

Browse Source 
- 拆分品牌色「文字/底色」双通道：新增 --color-brand-ink(-rgb)（深色 #F87171）
  与 tailwind brand.ink；text-brand → text-brand-ink 迁移 247 处；
  bg-brand/border-brand 保持 --color-brand-rgb 不翻转（红底白字 5.58:1 不能动）
- dark 块补齐 --color-brand-bg: #2A1418（修复深色白字压浅粉底 1.04:1）
- hero 徽章新增 --badge-accent-text 桥接：accentColor 直用作深底文字不可读
  （#1e3a5f 深底 1.65:1），浅色取原色 / 深色 color-mix 提亮
- 硬编码颜色 token 化：bg-white/text-gray-*/border-gray-* → bg-bg-*/text-text-*/border-border-*
- 可访问性：触控目标 <24px 归零（footer 链接列 [&_a]:min-h-6 收口 377 处等）、
  news 搜索框补 aria-label、标题跳级 h2→h4 修正为 h3、装饰 blur 光斑容器补
  overflow-hidden 消除伪文本裁剪
- 验证：tsc 0 / eslint 0 error / jest 0 失败用例 / dogfood 33 路由 × 双主题 P1-P3 全零
This commit is contained in:
zhangxiang
2026-09-20 11:50:58 +08:00
parent d959fa9a81
commit 5ecab7b15d
54 changed files with 339 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/home-content-v15.tsx
+30 -30
View File
@@ -221,7 +221,7 @@ function HeroSection({ heroData }: {
{...rise(20, 0.03)}
className="mb-6"
>
<span className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium border ${dark ? 'bg-brand/10 text-brand-light border-brand/30' : 'bg-brand/5 text-brand border-brand/15'}`}>
<span className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium border ${dark ? 'bg-brand/10 text-brand-light border-brand/30' : 'bg-brand/5 text-brand-ink border-brand/15'}`}>
{slogan}
</span>
</motion.div>
@@ -289,7 +289,7 @@ function HeroStatsBand({ stats }: { stats?: Record<string, any>[] }) {
<div key={i} className="flex items-baseline gap-2">
<span className={cn(
'text-3xl sm:text-4xl md:text-5xl font-mono font-bold tabular-nums leading-none',
i === 0 ? 'text-brand' : 'text-ink'
i === 0 ? 'text-brand-ink' : 'text-ink'
)}>
{stat.value}
</span>
@@ -329,7 +329,7 @@ function TrustSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
<ScrollReveal className="mb-16 sm:mb-20">
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-px bg-brand" />
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand-ink">
{eyebrow}
</span>
</div>
@@ -361,7 +361,7 @@ function TrustSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
<StaggerReveal staggerDelay={0.05}>
<div className="p-6 sm:p-8 bg-brand-bg border border-[rgba(196,30,58,0.15)]" data-testid="early-access-banner">
<div className="flex items-center gap-3 mb-4">
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand-ink">
{earlyLabel}
</span>
</div>
@@ -374,14 +374,14 @@ function TrustSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
<div className="grid sm:grid-cols-3 gap-4 mb-8">
{earlyStatus.map((s) => (
<div key={s.label} className="p-4 bg-bg-primary border border-brand/10">
<div className="text-sm font-semibold text-brand mb-1">{s.label}</div>
<div className="text-sm font-semibold text-brand-ink mb-1">{s.label}</div>
<div className="text-xs text-text-secondary leading-relaxed">{s.desc}</div>
</div>
))}
</div>
<StaticLink
href="/contact"
className="group inline-flex shrink-0 items-center gap-2 text-sm font-semibold text-ink hover:text-brand transition-colors"
className="group inline-flex shrink-0 items-center min-h-6 gap-2 text-sm font-semibold text-ink hover:text-brand-ink transition-colors"
>
<span>{earlyCtaLabel}</span>
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
@@ -449,7 +449,7 @@ function NarrativeSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
{act.number}
</span>
</div>
<h3 className="text-xl lg:text-2xl font-bold text-ink mb-4 group-hover:text-brand transition-colors duration-300">
<h3 className="text-xl lg:text-2xl font-bold text-ink mb-4 group-hover:text-brand-ink transition-colors duration-300">
{act.title}
</h3>
<p className="text-text-secondary leading-relaxed mb-8 text-sm">
@@ -458,7 +458,7 @@ function NarrativeSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
<div className="pt-6 border-t border-border-primary">
<a
href={act.href}
className="group/link inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors"
className="group/link inline-flex items-center min-h-6 gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand-ink transition-colors"
>
<span>{act.cta}</span>
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-1" />
@@ -493,7 +493,7 @@ function InsightsSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
<ScrollReveal className="md:max-w-3xl">
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-px bg-brand" />
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand-ink">
{eyebrow}
</span>
</div>
@@ -507,10 +507,10 @@ function InsightsSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
<ScrollReveal delay={0.1}>
<StaticLink
href="/news"
className="group inline-flex items-center gap-3 text-ink font-semibold text-sm"
className="group inline-flex items-center min-h-6 gap-3 text-ink font-semibold text-sm"
>
查看全部洞察
<ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand" />
<ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand-ink" />
</StaticLink>
</ScrollReveal>
</div>
@@ -523,21 +523,21 @@ function InsightsSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
className="group flex flex-col h-full bg-bg-primary p-8 sm:p-10 md:p-12 transition-colors duration-300 hover:bg-bg-secondary"
>
<div className="flex items-center justify-between mb-8">
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand-ink">
{insight.tag}
</span>
{insight.date && (
<span className="text-xs text-text-muted tabular-nums">{insight.date}</span>
)}
</div>
<h3 className="text-xl lg:text-2xl font-bold text-ink mb-4 leading-[1.25] group-hover:text-brand transition-colors duration-300">
<h3 className="text-xl lg:text-2xl font-bold text-ink mb-4 leading-[1.25] group-hover:text-brand-ink transition-colors duration-300">
{insight.title}
</h3>
<p className="text-text-secondary leading-relaxed mb-8 text-sm flex-1">
{insight.desc}
</p>
<div className="pt-6 border-t border-border-primary">
<span className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors">
<span className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand-ink transition-colors">
阅读全文
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
</span>
@@ -606,7 +606,7 @@ function ServicesSection({ services, pageCopy }: { services?: Record<string, any
</div>
)}
<div className="mt-auto pt-2">
<div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors">
<div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand-ink transition-colors">
<span>了解详情</span>
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
</div>
@@ -642,12 +642,12 @@ function FounderQuoteSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
<div className="bg-bg-primary/95 rounded-2xl p-8 sm:p-10 md:p-12 max-w-3xl mx-auto shadow-sm border border-brand/10">
<div className="flex items-center justify-center gap-3 mb-8">
<div className="w-10 h-px bg-brand/40" />
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand-ink">
{eyebrow}
</span>
<div className="w-10 h-px bg-brand/40" />
</div>
<Quote className="w-10 h-10 mx-auto mb-8 text-brand/40" aria-hidden="true" />
<Quote className="w-10 h-10 mx-auto mb-8 text-brand-ink/40" aria-hidden="true" />
<blockquote className="text-base sm:text-xl md:text-[28px] font-medium text-ink leading-[1.7] mb-10 border-l-0 pl-0 m-0 max-w-[640px] mx-auto whitespace-pre-line">
{quoteText}
</blockquote>
@@ -693,7 +693,7 @@ function CasesSection({ cases, pageCopy }: { cases?: Record<string, any>[]; page
<ScrollReveal>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-px bg-brand" />
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand-ink">
{casesEyebrow}
</span>
</div>
@@ -705,10 +705,10 @@ function CasesSection({ cases, pageCopy }: { cases?: Record<string, any>[]; page
</p>
<StaticLink
href="/contact"
className="group inline-flex items-center gap-3 text-ink font-semibold text-sm"
className="group inline-flex items-center min-h-6 gap-3 text-ink font-semibold text-sm"
>
成为首批共创客户
<ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand" />
<ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand-ink" />
</StaticLink>
</ScrollReveal>
<ScrollReveal delay={0.15}>
@@ -775,10 +775,10 @@ function CasesSection({ cases, pageCopy }: { cases?: Record<string, any>[]; page
<ScrollReveal delay={0.1}>
<StaticLink
href="/cases"
className="group inline-flex items-center gap-3 text-ink font-semibold text-sm"
className="group inline-flex items-center min-h-6 gap-3 text-ink font-semibold text-sm"
>
查看全部案例
<ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand" />
<ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand-ink" />
</StaticLink>
</ScrollReveal>
</div>
@@ -879,7 +879,7 @@ function CasesSection({ cases, pageCopy }: { cases?: Record<string, any>[]; page
<div key={j}>
<div className={cn(
'text-xl sm:text-2xl font-black leading-none mb-2',
j === 0 ? 'text-brand' : 'text-ink'
j === 0 ? 'text-brand-ink' : 'text-ink'
)}>
{metric.value}
</div>
@@ -891,7 +891,7 @@ function CasesSection({ cases, pageCopy }: { cases?: Record<string, any>[]; page
</div>
<div className="mt-auto pt-4 border-t border-border-primary">
<div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors">
<div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand-ink transition-colors">
<span>了解详情</span>
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
</div>
@@ -920,7 +920,7 @@ function NewsSection({ news, pageCopy }: { news?: NewsItem[]; pageCopy?: HomePag
<ScrollReveal className="md:max-w-3xl">
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-px bg-brand" />
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand-ink">
{eyebrow}
</span>
</div>
@@ -931,10 +931,10 @@ function NewsSection({ news, pageCopy }: { news?: NewsItem[]; pageCopy?: HomePag
<ScrollReveal delay={0.1}>
<StaticLink
href="/news"
className="group inline-flex items-center gap-3 text-ink font-semibold text-sm"
className="group inline-flex items-center min-h-6 gap-3 text-ink font-semibold text-sm"
>
{ctaLabel}
<ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand" />
<ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-text-secondary group-hover:text-brand-ink" />
</StaticLink>
</ScrollReveal>
</div>
@@ -947,7 +947,7 @@ function NewsSection({ news, pageCopy }: { news?: NewsItem[]; pageCopy?: HomePag
className="group bain-card block p-8 sm:p-9 h-full flex flex-col"
>
<div className="flex items-center gap-3 mb-6">
<Badge variant="outline" className="text-xs border-brand/30 text-brand">
<Badge variant="outline" className="text-xs border-brand/30 text-brand-ink">
{item.category}
</Badge>
<span className="flex items-center gap-1.5 text-xs text-text-muted">
@@ -955,14 +955,14 @@ function NewsSection({ news, pageCopy }: { news?: NewsItem[]; pageCopy?: HomePag
{item.date}
</span>
</div>
<h3 className="text-lg lg:text-xl font-bold text-ink mb-4 leading-[1.3] line-clamp-2 group-hover:text-brand transition-colors duration-300">
<h3 className="text-lg lg:text-xl font-bold text-ink mb-4 leading-[1.3] line-clamp-2 group-hover:text-brand-ink transition-colors duration-300">
{item.title}
</h3>
<p className="text-sm text-text-secondary leading-relaxed mb-6 line-clamp-2 flex-1">
{item.excerpt}
</p>
<div className="pt-4 border-t border-border-primary">
<span className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors">
<span className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand-ink transition-colors">
阅读全文
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
</span>