跳到主要内容

Tabs 选中态字重改为 Body/Emphasized semibold (WEB-1352)

版本： 0.9.1 · 类型： 🐛 Bug 修复

WEB-1352 · 来源走查 HARN-702

问题​

Community > Skills 的二级 tab（Discover / Installed / My contributions）选中态字重偏轻一档。设计标注要求选中态使用文字 token Body/Emphasized · 14/20。

根因​

TABS_TRIGGER_BASE_CLASS 的选中态写的是 data-[state=active]:font-medium（500）。Figma Tabs 节点（5ssRkvUdqpsRwwW59ooQCp node 522:53227）的选中态文本实测为 fontWeight: 600 / Inter-SemiBold / 14 / 20，对应 token --Font-Weight-Emphasized: "Semibold"。字号与行高本来就是对的——实现直接取 --Font-Size-Body（14px）与 --Line-Height-Body（20px）——只有字重差一档。

设计规范文档与文档站排版表另有一处陈旧记录：行高写成 22px，而 token 实际是 20px。实现从未受影响，错的只有文档。

改动文件​

  • packages/design/src/components/Tabs/styles.ts
  • packages/design/src/components/Tabs/TabsDesignSpec.md
  • packages/design/src/components/Tabs/__tests__/Tabs.test.tsx
  • packages/design-site/docs/components/tabs.mdx（及中文版）

改动内容​

  1. styles.ts：data-[state=active]:font-medium → data-[state=active]:font-semibold，并修正文件顶部规范注释里的字重与行高描述。
  2. TabsDesignSpec.md 与文档站排版表：选中字重 500 → 600（semibold），行高 22px → 20px。
  3. Tabs.test.tsx：新增单测，断言 trigger 带 data-[state=active]:font-semibold 且不再带 data-[state=active]:font-medium。

影响​

  • 所有使用 @plaud/design Tabs 的页面，选中标签字重变为 600。
  • 硬编码了选中态字重的调用方需要跟着改。apps/web4 的 CommunitySkillsPage 叠了一份 invisible 的固定宽度占位标签，用来消除「选中变粗导致整行 tab 抖动」；该占位原为 font-medium，已同步改为 font-semibold，否则占位撑不满真实宽度、抖动会回归。