语义 / 布局
层级与动效角色
静态、浮起、浮层和交互动效角色。
展示
系统样例
semantic.elevation.raised0 0 0 1px oklch(0 0 0 / 0.06), 0 2px 8px oklch(0 0 0 / 0.06)semantic.elevation.elevated0 0 0 1px oklch(0 0 0 / 0.07), 0 12px 32px oklch(0 0 0 / 0.12)semantic.motion.interactive120mssemantic.motion.disclosure200mssemantic.motion.loadingCycle800mssemantic.motion.easing.standardcubic-bezier(0.2, 0, 0, 1)semantic.motion.scale.press0.96Token
2 个分类
| 名称 | 类型 | 浅色 | 深色 | 预览 |
|---|---|---|---|---|
semantic.elevation.raised浮起层级 | shadow | 0 0 0 1px oklch(0 0 0 / 0.06), 0 2px 8px oklch(0 0 0 / 0.06) | 0 0 0 1px oklch(0 0 0 / 0.06), 0 2px 8px oklch(0 0 0 / 0.06) | Aa |
semantic.elevation.elevated浮层层级 | shadow | 0 0 0 1px oklch(0 0 0 / 0.07), 0 12px 32px oklch(0 0 0 / 0.12) | 0 0 0 1px oklch(0 0 0 / 0.07), 0 12px 32px oklch(0 0 0 / 0.12) | Aa |
semantic.motion.interactive交互动效 | duration | 120ms | 120ms | Aa |
semantic.motion.disclosure展开动效 | duration | 200ms | 200ms | Aa |
semantic.motion.loadingCycle循环加载动效 | duration | 800ms | 800ms | Aa |
semantic.motion.easing.standard标准缓动 | cubicBezier | cubic-bezier(0.2, 0, 0, 1) | cubic-bezier(0.2, 0, 0, 1) | Aa |
semantic.motion.scale.press按压缩放 | number | 0.96 | 0.96 | Aa |
使用
使用规则
- 页面和组件通过语义或组件 Token 使用这些值。
- 不要在页面中复制原始值。
- 浅色和深色主题分别检查实际组合。