交互状态
状态层、“先留间隙、再画圆环”的焦点指示，以及禁用状态的画法。
可交互的组件共用一套状态词汇：enabled、hovered、focused、pressed、dragged、selected、activated、error、loading 和 disabled。组件的规格会列出它支持的状态，每个平台都必须全部实现。
悬停、聚焦、按下和拖动通过状态层来呈现：一层覆盖在组件容器之上的半透明浮层。
- 状态层取内容的颜色，也就是它所覆盖对象的
on-角色。在 filled 按钮上是on-primary；在 text 按钮上是标签的颜色。 - 它的不透明度来自令牌，而不是组件。
- 同一时刻只显示一层。 多个状态重叠时，最强的那个胜出：按下高于聚焦，聚焦高于悬停。
- 它通过一段短促的效果过渡淡入，按下时则立即出现。
低调的选中状态也是一层，而且是一直保留的那一层：列表中选中的选项、菜单中的当前链接项和 tonal 标签页的指示器，都以其内容颜色按 selected-state-layer-opacity（悬停层的两倍）绘制，叠在该项所处的任何表面之上。因此在任何表面上，选中项与悬停项之间的差距，都和悬停项与静止项之间的差距相同。悬停、聚焦和按下层叠在它之上；选中状态从不只靠填充来表达：勾选标记、标识或标签也会表明它。
| 令牌 | 值 | 样张 |
|---|---|---|
--tanrei-sys-state-disabled-container-opacity | 0.12 (12%) | AaAa |
--tanrei-sys-state-disabled-content-opacity | 0.38 (38%) | AaAa |
--tanrei-sys-state-dragged-state-layer-opacity | 0.16 (16%) | AaAa |
--tanrei-sys-state-focus-state-layer-opacity | 0.1 (10%) | AaAa |
--tanrei-sys-state-hover-state-layer-opacity | 0.08 (8%) | AaAa |
--tanrei-sys-state-pressed-state-layer-opacity | 0.1 (10%) | AaAa |
--tanrei-sys-state-selected-state-layer-opacity | 0.16 (16%) | AaAa |
生成自 design/tokens/tanrei.light.tokens.json, tokens/sys/state.tokens.json
将指针悬停在下面的按钮上并按下它们，看看状态层在不同容器上的样子：
状态层
键盘焦点的画法是：先是一圈 2px 的、表面颜色的间隙，外面再是一圈 2px 的、focus-ring 角色的圆环。有了这圈间隙，即使组件自身的填充色与圆环颜色相近，圆环也一定看得见；这个角色相对于表面的对比度会按 3:1 进行校验。
- 圆环只在键盘和辅助技术聚焦时显示，指针点击时不显示。
- 它从不带动画。
- 它沿着组件的形状向外偏移绘制。
Tanrei 不在按下时绘制向外扩散的涟漪。按下时的状态层就是反馈。主题可以选择启用涟漪，但没有任何组件依赖它。
禁用的组件以 on-surface 的 disabled-container-opacity 绘制容器，以 disabled-content-opacity 绘制内容，不显示状态层，并且不在焦点顺序之内。禁用的元素不受对比度要求的约束，这也正是应当少用它们的原因。
提示
更好的做法是让操作保持可用，并在用户使用它时说明还缺少什么。禁用的按钮没法告诉任何人它为什么被禁用。