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
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,永不漂移。
5. Footer 清理
- 残留
📍emoji → lucideMapPin;硬编码rgba(26,26,26,0.40)的标语文字 →var(--text-muted)(暗色下原本会不可见)。
验证
npx tsc --noEmit→ 0 错误;npm run build→ 1821 模块;[data-theme=dark]块与#16110e已进入distCSS;全站 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 规则可补)。