ui-frosted-gradient-clear-sleevelisted

# 透明套层磨砂玻璃 该体系有三种明确区分的产品表面： | 产品表面 | 视觉语言 | 材质规则 | |---|---|---| | 移动端 App（`.t-app`） | 黑布罗／白岩主题、酸绿色强调、圆润触控控件 | 双层磨砂玻璃 | | 公开官网（`.t-web`） | 与 App 共用令牌，采用编辑式排版与响应式网格 | 面板或固定 Chrome 跨越纹理画布时使用玻璃 | | 运营管理系统（`.t-admin`） | SemiDesign 浅色体系、蓝色强调、更高的数据控件密度 | 紧凑的单层磨砂玻璃；沿用蓝色状态语义 | ## 先选择正确的产品表面 1. 编写 CSS 前先确认交付的产品表面。 2. App、官网与运营后台的玻璃效果使用 `assets/frosted.css`；组件基础规则只能使用语义化 `--glass-*` 令牌。 3. 运营后台使用 `.t-admin` 专属的紧凑玻璃映射，以及 `references/kirakira-surfaces.md` 中的密度／圆角规则；保持蓝色状态语义，不要加入与信息层级无关的装饰性模糊。 4. 需要 KiraKira 配色、表单、布局、组件形态与 z 层级契约时，阅读 `references/kirakira-surfaces.md`。 5. 仅在需要时阅读对应参考： - 令牌数值与对比度安全的中性色阶：`references/tokens.md` - 玻璃嵌套、实心豁免与组件角色：`references/layering.md` - 运行时／无障碍／不支持引擎的降级：`references/degradation.md` - 特异性与对比度审计：`references/pitfalls.md` ## 不可违背的材质规则 1. 在 App／官网玻璃层背后铺设高频纹理。1.5px 斜纹能让模糊可见，平滑光晕不能。 2. 移动端 App 的画布必须叠加 45°、1.5px 的细斜纹，并以语义令牌实现：浅色主题映射为低对比灰纹，深色主题映射为低对比白纹。纹理应位于玻璃层之后，不能影响文字对比度或实心控件。 3. 主按钮、危险按钮、选中 Chip、徽章和发出的消息气泡必须保持不透明。它们承载 `--on-brand` 文字，必须显式使用 `backdrop-filter:none`。 4. 面板模糊与控件模糊必须分层：App／官网面板约 22px、控件约 10px；`.t-admin` 使用更紧凑的面板约 16px、控件约 8px。内层面板应改为实心，而非嵌套大半径模糊。 5. `.t-admin` 的页面、导航、筛选区、卡片、表单控件与表格外框均使用其玻璃令牌；数据单元格、选中态、状态色块、主／危险操作与可读性优先的密集区域保持实心。 6. 低端设备、减少透明度设置与不支持的引擎都通过令牌重映射处理。禁止逐个组件覆盖来关闭玻璃效果。 7. App／官网及后台的扁平降级态必须保留卡片投影；投影是分离机制，不是玻璃效果。 ## 实现约定 - 在组件基础规则中使用语义变量（`--glass-bg`、`--glass-ctl`、`--material-nav`、`--brand`）。组件变体中禁止硬编码 `rgba()`。 - 语义变体的特异性必须低于基础规则：`.chip{…}` 有效；`.t-app .chip{…}` 会覆盖 `chip--ok/warn/danger` 变体。 - App 使用最小 44px 的触控控件；官网保留同等可访问触控目