DESIGN
材质与层次
选择 solid、frosted、glass 与 glass-clear，用真实背景验证透射与文字可读性。
四种真实表面
| Surface.material | 用途 | 选择依据 |
|---|---|---|
| solid | 正文、表格、表单与降级 | 稳定背景，优先长时间阅读 |
| frosted | 较厚的内容与结构区域 | 保留层次，降低背景干扰 |
| glass | 独立导航、工具栏与浮动控件 | 透射、边缘光与投影共同分离层次 |
| glass-clear | 媒体背景上的控件，显式启用 | 验证实际图像背景与局部 dimming |
<Surface material="glass">
<Button variant="ghost">播放</Button>
</Surface>控制采样层数
同一个玻璃工具栏内的按钮共享外壳，用状态填充表达操作。独立浮层可以采用玻璃；覆盖另一块玻璃区域时，根据实际重叠关系加厚或转实色。
Portal 只改变 DOM 与定位，不会消除视觉重叠。不能把“避免玻璃叠玻璃”解释为所有菜单永远实色。
透射、边缘与内壁
共享材料规则提供固定背景采样、定向反射、非均匀 rim、内高光与接触/环境投影。文字和图标保持不透明，不用容器整体 opacity 做玻璃。
Regular 默认填充遮蔽为浅色 52%（白色底）、深色 68%（中性石墨底）。Clear 在透明填充之外另有局部遮蔽层（浅色白色 16%、深色黑色 40%，与填充合成约 33%／52%）， 用于媒体控件的可读性；最终透射不能只看填充的 alpha。实验室调整后的主题仍需在应用的实际背景上检查。
Web CSS 是材质近似；局部折射不是当前默认跨浏览器能力，也不宣称与 Apple 原生 Liquid Glass 等价。
用真实组件比较材质 → 查看玻璃候选 A/B 对照 →背景可读性策略
以默认 Token 的实测矩阵为准（2 主题 × 11 背景 × 4 材质，Chromium 1440×1000， 未取整 4.5:1，逐文字包围框采样）。支持状态分四类，不得互相概括：supported（默认实测全部 ≥4.5:1）、pressure（默认实测存在 <4.5:1 样本）、not-recommended（用途本身不推荐，不等于每个背景都低对比）、explicit-override-unverified（显式 tint/accent 覆盖后默认结论不适用）。
regular 的正文与控件标签除“深色×纯白”（正文样本实测最低 3.910:1，<4.5）外全部 ≥4.5:1； 副文字仅保证中等亮度背景（山水、文字列表、图表、棋盘）与同向极端背景（浅色×纯白、深色×纯黑）。 默认已测压力背景：浅色×{暗插画, 明暗分区, 纯黑}、深色×{亮插画, 纯白}—— 改用 frosted 或 solid（两者默认矩阵全部背景实测达标），或给控件局部实色底面。 媒体前景策略看媒体本身的亮暗与内容用途，而不是系统主题。
clear 用于媒体轻工具栏且按媒体逐个验证：深色主题的真实亮/暗照片实测通过； 浅色主题的真实照片（混合亮暗区域实测最低 1.134:1）与明暗分区实测失败。 clear 用于完整表单是不推荐用途（同向极端背景仍可达标）。 压力组合不能通过换有利底图或删样本来隐藏。
回退也是设计的一部分
减少透明、缺少 backdrop-filter、高对比度和显式 solid 都需要稳定的替代背景。使用照片、高频棋盘与明暗分区验证可读性，不能只看纯白背景。