基础
颜色、文字、间距、形状、动效和状态:取值,以及使用它们的规则。
- 颜色表面、文字、线和角色的颜色,每种颜色的含义,以及它们保证的对比度。
- 字体排印两种字体,字号阶梯以及每种字号和字重的用途,文字颜色的三个层级,字体度量 token,以及大小写规则。
- 间距与尺寸4px 间距网格、点击区域、控件和行的高度、头像尺寸、头部高度和布局宽度。
- 对齐落在边距线或中线上的是什么:形状、字母还是图标框;以及标题栏两端的图标按钮放在哪里。
- 形状五种圆角、两种描边宽度,以及为什么圆角容器的边缘上不贴任何东西。
- 层级哪些东西会浮起并投下阴影,哪些控件浮在对话之上却不带阴影,弹出层如何定位,以及焦点环。
- 动效按下、悬停、滑入和头像变化的时长与缓动,以及状态从不循环播放动画这条规则。
- 状态悬停、按下、焦点、选中、未读、禁用、错误、忙碌和自动填充的样子,所有组件通用。
- 图标图标集、描边和颜色、各场景的图标尺寸,以及哪些东西不是图标。
- 品牌每类页面可以用多少品牌元素,以及 logo 和手绘回应的规则。
- 深色模式深色模式下什么会变、什么不变,以及每张贴纸都会加上的模切边。
- 无障碍每个 Raft 产品都遵守的规则,让它在任何视力、键盘、读屏软件、触屏或动效设置下都能用:对比度、焦点、点击区域、动效、语义、触屏和语言,以及实现这些规则的组件。
- Token每组 token 及其在两种模式下的值,token 名怎么构成,tokens.json 放在哪里、foundation.css 如何由它生成,以及如何迁移弃用的名称。