用途:为设计系统生成系统化的 z-index 令牌,消除任意取值和 z-index 冲突,为下拉菜单、模态框、提示框、遮罩等提供可预测的层级。
主要能力:提供分层级别参考(Base 0、Raised 1-10、Dropdown 100-199、Sticky 200-299、Fixed 300-399、Overlay 400-499、Modal 500-599、Toast 600-699、Tooltip 700-799、Maximum 9999);支持三种输出格式:CSS 自定义属性、Tailwind 配置、JSON 设计令牌;包含堆叠上下文概念说明、isolation 隔离模式、模态框/下拉/Toast/提示框等组件模式,以及常见反模式与调试方法。
使用方式:先梳理系统中所有分层组件,确定输出格式,再生成带语义命名的令牌并记录各令牌对应场景。CSS 示例:--z-index-modal: 500; Tailwind 中通过 theme.extend.zIndex 扩展;JSON 采用设计令牌格式。
适用场景:新建设计系统的 z-index 令牌、修复现有代码的层级冲突、为遮罩/模态/提示框建立一致分层、记录堆叠上下文预期。
限制:资料未提供安装命令、收费、平台或效果数据;具体取值需按项目实际调整。