全局 / 基础
尺寸与布局
控件高度、命中区域、容器宽度和断点。
展示
系统样例
控件与命中区域
视觉尺寸和触控命中区域分开定义。
2.25rem2.75rem3.25rem2.75rem页面布局
容器、正文、侧栏和目录使用稳定宽度角色。
页面最大宽度
90remshell正文最大行宽
68chreadable文档侧边栏宽度
17remsidebar页内目录宽度
12remtoc文档三栏断点
72rembreakpoint.docsToken
2 个分类
| 名称 | 类型 | 浅色 | 深色 | 预览 |
|---|---|---|---|---|
global.size.control.sm小型控件 36px | dimension | 2.25rem | 2.25rem | Aa |
global.size.control.md中型控件 44px | dimension | 2.75rem | 2.75rem | Aa |
global.size.control.lg大型控件 52px | dimension | 3.25rem | 3.25rem | Aa |
global.size.hitTarget推荐触控命中区域 44px | dimension | 2.75rem | 2.75rem | Aa |
global.layout.shell页面最大宽度 | dimension | 90rem | 90rem | Aa |
global.layout.readable正文最大行宽 | dimension | 68ch | 68ch | Aa |
global.layout.sidebar文档侧边栏宽度 | dimension | 17rem | 17rem | Aa |
global.layout.toc页内目录宽度 | dimension | 12rem | 12rem | Aa |
global.layout.breakpoint.docs文档三栏断点 | dimension | 72rem | 72rem | Aa |
使用
使用规则
- 页面和组件通过语义或组件 Token 使用这些值。
- 不要在页面中复制原始值。
- 浅色和深色主题分别检查实际组合。