层级

层级（Elevation）描述的是哪个表面位于哪个表面之上。Tanrei 保留了 0 到 5 这六个语义级别，并以克制的方式来绘制它们。

level0

level1

level2

level3

level4

level5

令牌	浅色	深色
--tanrei-sys-elevation-level0
--tanrei-sys-elevation-level1	0px 0px 0px 1px rgb(0 0 0 / 0.08)	0px 0px 0px 1px rgb(0 0 0 / 0.08)
--tanrei-sys-elevation-level2	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04)	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04)
--tanrei-sys-elevation-level3	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06)	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06)
--tanrei-sys-elevation-level4	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06)	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06)
--tanrei-sys-elevation-level5	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06)	0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06)

生成自 design/tokens/tanrei.light.tokens.json, design/tokens/tanrei.dark.tokens.json, tokens/sys/elevation.tokens.json

先画圆环，再画阴影

link

零级以上的每个级别，都是一个由两类图层组成的复合阴影令牌：

1. 一圈 1px 的圆环，使用 elevation-ring 角色，无论在什么背景上都能清晰地勾勒出边缘；
2. 一到两层极柔和、不透明度很低的阴影，随级别升高而变大。

圆环始终是第一层。无法绘制阴影扩展（spread）的平台，把它渲染为一像素的边框，其余部分保持不变。

不叠加色调

link

抬升的表面不会叠加主色的色调。纵深由圆环、阴影，以及在需要时沿表面容器阶梯上移一级来表达。这样，中性的表面始终保持中性。

在深色主题中

link

在接近黑色的背景上，阴影很难看清。因此在深色主题中，主要靠圆环起作用，抬升的表面同时也会换用更亮一级的容器角色。

如何使用层级

link

级别	典型用途
0	页面，以及与页面齐平的一切
1	静止状态的卡片、分段控件中被选中的选项
2	elevated 按钮、悬停时抬起的卡片
3	菜单、弹出框、消息条
4–5	对话框、面板以及其他模态表面

一个屏幕上使用的级别越少越好。如果相邻的两个元素需要区分开，而它们都不是浮起的，就改用细线。