这是一个巴适伙伴企业官网项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

4.0 KiB

bashi-website — 设计系统完善 + 暗色模式落地

像素君(UI Designer)· 第二轮打磨:把"死"的暗色 token 真正激活,并补全设计系统刻度尺 + 赛道色单源。

1. 设计令牌补全(global.css)

  • 字体刻度尺:在 :root 新增模块化 token —— --fs-xs…4xl、--lh-tight/snug/normal/relaxed、--fw-regular…bold、--ls-tight…widest。设计系统从此有统一"刻度尺",组件可逐步迁移到令牌而非散值。
  • 主题感知 surface 令牌:--surface-card / --text-strong / --header-bg / --accent,浅色下指向既有值,暗色下自动切换。

2. 暗色模式(从摆设变成真功能)

之前 --bg-dark / --text-on-dark / --shadow-dark-* 都定义了,却没有 data-theme="dark" 覆盖块、也没有切换开关——等于死代码。本次:

  • 新增 [data-theme="dark"] 覆盖块:暖调近黑表面(--bg-primary:#16110E、--surface-card:#1E1813)、暖白文字(--text-primary:#F5EFE6、--text-strong:#FBF6EC)、低透明度奶油描边、暗色阴影、color-scheme: dark。
  • body 加 background-color/color 依赖令牌,整页随主题切换。
  • 三态主题开关:src/hooks/useTheme.ts(浅 / 深 / 跟随系统,localStorage 持久化 + 系统偏好实时监听)+ Header 顶栏按钮循环切换 Sun / Moon / Monitor(lucide 图标)。
  • index.html 内联防闪烁脚本:首屏绘制前就设好 data-theme 与 color-scheme,无 FOUC。

3. 组件迁移到主题令牌

  • 中性/深色底上的 text-[var(--brand-black)] → text-[var(--text-strong)](覆盖 Home/Business/Innovation/Join/Contact/About/Footer/Privacy/NotFound/Header 的全部标题与导航文字)。
  • bg-white 卡片 → bg-[var(--surface-card)](Contact/Join/NotFound/Privacy)。
  • 悬停底色 hover:bg-[var(--brand-cream-light)] → hover:bg-[var(--accent)];静态奶油色高亮块(About/Join/Innovation 序号徽章、Contact Passion 卡)→ bg-[var(--accent)]。
  • 英雄区/区块渐变遮罩:白底遮罩改为 color-mix(in srgb, var(--bg-primary) NN%, transparent),奶油渐变改为 var(--bg-secondary),均随主题淡入背景。
  • Header 吸顶与移动菜单底色 → var(--header-bg)。
  • 关键边界:奶油实心按钮(Home 联系 CTA、Business CTA)保留 text-[var(--brand-black)]——浅奶油底配深字在两种主题都可读,若误改成浅字会在暗色下"浅字叠浅底"翻车(已修复一处该回归)。

4. 赛道色单源(--track-* 成为唯一来源)

  • 新增 src/lib/tracks.ts:TRACK_TOKEN 把 social/career/payment/ai 映射到 var(--track-*)。
  • i18n 的 business.tracks[] 加 key 字段、删除原先写死的粉彩 color 字段(即那套双源粉彩)。Home/Business 改用 TRACK_TOKEN[track.key],卡片底色(color-mix 深色调)与圆点 accent 现在共享同一 token,永不漂移。
  • 残留 📍 emoji → lucide MapPin;硬编码 rgba(26,26,26,0.40) 的标语文字 → var(--text-muted)(暗色下原本会不可见)。

验证

  • npx tsc --noEmit → 0 错误;npm run build → 1821 模块;[data-theme=dark] 块与 #16110e 已进入 dist CSS;全站 0 emoji;所有路由 200;改动模块编译干净;主题接线(baskbuddy-theme、data-theme)在产物 JS 中可查。
  • 说明:暗色视觉正确性经逐项推演确认(无 headless 浏览器截图);请点击顶栏 Sun/Moon/Monitor 按钮实际体验切换。

仍可继续打磨的方向(可选)

  • 把组件里的 text-[15px] 等散值逐步替换成本轮新增的 --fs-* 刻度(目前令牌已就位,属渐进式重构)。
  • 补一套更完整的暗色对比度走查清单(针对 .gradient-mesh / .text-gradient-warm 等渐变类在暗色下的表现)。
  • 部署级:确认托管平台的 SPA fallback(已有 public/_redirects,nginx/Vercel 规则可补)。