uiUI 组件系统
对比

FOUNDATIONS

一致，从设计变量开始。

颜色、字体、几何与动效由同一份 token 约定驱动。切换顶部风格，查看这些变量怎样作用于真实组件。

三种风格，同一个接口

风格与明暗独立选择。预设改变排版、控件和颜色，组件的属性与事件保持一致。

风格桌面控件预览圆角设计语言
精密32px8px让查找、验证和接入像操作精密仪器一样直接。
编辑40px2px像阅读一册细致编排的组件样张，理解内容与表现。
工作室38px20px让真实组件像工作台上的对象，拥有合适的分量与空间。

并排比较三种风格 ↗

复用 Token 约定

contractVersion: 1 定义变量名称、类型、用途与预设。JSON 是唯一编辑源，CSS 由它生成并在构建时校验；全部风格沿用现有 CSS 变量接口。

@import '@sofish/ui/styles.css';
/* Put both attributes on the same ancestor. */
/* <html data-ui-style="folio" data-mode="dark"> */

下载 Token JSON · 下载风格 CSS

颜色与主题

Canvas--color-paper
Surface--color-surface
Ink--color-ink
Secondary--color-muted
Accent--color-accent
Border--color-rule
@import '@sofish/ui/styles.css';
:root[data-ui-style] {
  --radius-input: 6px;
}
/* Set data-mode="dark" on an ancestor for dark mode. */

文字层级

Aa 组件系统

为阅读、操作与构建保留清晰的层级。

正文 16 / 28 一段舒展、易读的中文，配合 Geist 英文与数字 012345。

标签 14 / 22 输入名称、选择日期、确认操作。

辅助 12 / 18 说明、时间与次要状态。

--font-display / --font-body / --font-outlier

间距与边界

内容按相关性分组；边框建立区域，留白建立阅读节奏。

4
8
12
16
24
32
48
64

控件尺寸

桌面控件随风格采用 32、40 或 38px 的最小高度，触控环境统一为 48px。图标通常为 16px，点击区域独立扩展；复选标记为 18px，整行标签可点击。日历、表格与分隔栏按各自任务保留合适密度。

单行文字，可直接编辑

每一种输入方式，都有清晰反馈。

原生表单与焦点轮廓优先。自定义日历、网格、标签页、分隔栏与菜单提供键盘操作。交互以状态和文字反馈结果；减少动态效果偏好会停用非必要动效。这些是实现准则，不能代替应用自己的辅助技术测试。

浏览组件 ↗