fix(css): 弹窗在 portal 内重建共享令牌基座,修复样式静默失效
弹窗外壳由 runtime portal 到 <body>,已经位于任何页面级 token 作用域之外。此前
路由样式把语义别名挂在页面容器上:
.aksrt-orders-page { --orders-ink: var(--color-ink, #333); }
弹窗内部再消费 var(--orders-ink) 时该变量不存在,整条声明被判为无效值丢弃。
CSS 自定义属性解析失败不会抛错,只表现为边框消失、次级文字发灰发透明,排查
成本很高——订单详情弹窗此前「样式没做完」的观感就来自这里。
修法是在弹窗外壳上重建基座,而不是逐个给弹窗补别名:外壳永远位于 portal 内,
任何弹窗都能直接消费。
- modal-runtime.css 新增 portal token bridge,在 .aksrt-modal-runtime 上声明
--modal-ink / -ink-2 / -muted / -line / -line-soft / -surface / -surface-2 /
-surface-3 / -primary / -on-primary / -warning / -success / -danger,
全部以 var(--color-*, 回退值) 兜底
- orders.css 的 --detail-* 由直接推导调色板值改为映射 var(--modal-*),路由文件
不再自行持有颜色定义,避免同类问题在下一个弹窗上重演
- 重建 assets/css/build/public.css 与 public.min.css
验证:node --test(已追踪用例)333 项 / 333 通过;确认重建后的 public.min.css
已包含 --modal-ink。视觉核对未在本次提交内完成(需要可运行的站点),如需可在
真实环境按订单详情弹窗逐项比对边框、分隔线与次级文字色。
This commit is contained in:
@@ -4,6 +4,35 @@
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
/* ---- portal token bridge ----
|
||||
*
|
||||
* 弹窗由 runtime portal 到 <body>,因此它位于任何「页面级 token 作用域」之外。
|
||||
* 典型陷阱:路由样式把语义别名挂在页面上,例如
|
||||
*
|
||||
* .aksrt-orders-page { --orders-ink: var(--color-ink, #333); }
|
||||
*
|
||||
* 弹窗内部再去 `var(--orders-ink)` 时该变量不存在,整条声明会被静默丢弃——
|
||||
* 表现为边框消失、次级文字变透明,而不是抛错,排查成本很高。
|
||||
*
|
||||
* 因此共享调色板在这里声明:本壳层永远在 portal 内,任何弹窗都能直接消费
|
||||
* `--modal-*`。路由样式应把自己的局部别名映射到这里,而不是映射到页面级变量。
|
||||
*/
|
||||
.aksrt-modal-runtime {
|
||||
--modal-ink: var(--color-ink, #333333);
|
||||
--modal-ink-2: var(--color-ink-2, #4e5358);
|
||||
--modal-muted: var(--color-ink-3, #777777);
|
||||
--modal-line: var(--color-line-stronger, rgba(50, 50, 50, 0.12));
|
||||
--modal-line-soft: var(--color-line, rgba(50, 50, 50, 0.06));
|
||||
--modal-surface: var(--surface-1, #ffffff);
|
||||
--modal-surface-2: var(--surface-2, #eeeeee);
|
||||
--modal-surface-3: var(--surface-4, #f8f8f8);
|
||||
--modal-primary: var(--color-primary, #f04494);
|
||||
--modal-on-primary: var(--color-on-primary, #ffffff);
|
||||
--modal-warning: var(--color-warning, #f59e0b);
|
||||
--modal-success: var(--color-success, #10b981);
|
||||
--modal-danger: var(--color-danger, #ef4444);
|
||||
}
|
||||
|
||||
/* ---- scroll lock ---- */
|
||||
html.aksrt-modal-runtime-open,
|
||||
body.aksrt-modal-runtime-open {
|
||||
|
||||
Reference in New Issue
Block a user