组件库

正文

正文与表单标签,取 Apple secondaryLabel 语义色

用途

表单行左侧标签、辅助说明等次级文字,凡不是「值本身」的说明性内容都用它。用例参考:设置表单的「玩家 UID」等标签、详情面板的字段名、列表行的次行说明。

设计规范 · macOS 26 / 27

  • 色值 rgba(60,60,67,.6) / 暗 rgba(235,235,245,.6) 正是 Apple 语义色 secondaryLabel 的标准取值,与主文本 label(本库配套取 rgba(0,0,0,.85) / rgba(255,255,255,.88))拉开一档层级,两种外观自动成立。
  • macOS 正文基准为 13pt(NSFont.systemFontSize);窗口 body 基础字号即 13px,本组件 text-sm(14px)用于与控件同行的表单标签。
  • 玻璃与亚克力底上要保证对比:值与重要文本用 label 色,弱化说明才用 secondary,不再叠加额外透明度。

使用规则

  • 标签与控件同行排布:标签固定最小宽左对齐,控件跟随其后(表单行高约 44px)。
  • 写语义变量不写死灰值,保证明暗外观与亚克力态一致。

参考实现

建议令牌化为语义变量而非到处写死色值——本仓库经 base.css 的 --secondary 暴露为 text-secondary 工具类。

本页目录