跳到主要内容
menumenu tanreiexpand_morecontrasttranslate
tanreiexpand_more
开始使用WebReactSwiftUIJetpack ComposeFlutterReact Native预设你自己的设计系统与 AI 代理一起使用 Tanrei品牌设计令牌设计系统与定制Theme Studio颜色字体排印图标形状层级动效交互状态行为布局无障碍文字颜色令牌字阶令牌形状令牌层级令牌动效令牌状态令牌间距与度量令牌组件按钮主操作按钮分段按钮按钮组带菜单的按钮工具栏复制按钮复选框单选按钮开关纸片(Chip)菜单滑块滑块字段日历DateTimePicker字段组单选组复选框组下拉选择框下拉选择字段菜单栏文件上传文件选择器 进阶放置区文本输入框 进阶文本字段纸片字段字段组合框 进阶组合框字段数字输入框 进阶数字字段颜色输入框 进阶颜色字段一次性验证码输入框 进阶一次性验证码字段嵌入式文本输入框 进阶聊天输入栏卡片分隔线模态层 进阶对话框列表列表行底部面板侧边面板轮播代码块表格弹出框步骤折叠面板描述列表图示应用外壳页头树视图时间线图片预览调整手柄可调整大小的框滚动区域徽标进度指示器计量条数字滚动器加载指示器消息条(Snackbar)工具提示键盘快捷键标签(Tag)行内代码提示块(Callout)头像空状态标签组(Tag group)骨架屏文件项色块跑马灯文本标签页标签页视图应用栏导航栏导航抽屉搜索链接分页上一页/下一页链接步骤条面包屑目录链接卡片FAB 菜单状态Tanrei 是如何构建的参与贡献许可与致谢
首页令牌参考状态令牌

状态令牌

状态层和禁用状态的不透明度。

content_copy以 Markdown 格式查看

tanrei.sys.state 下的不透明度。每个样张分别展示状态层叠加在表面上和叠加在主色填充上的效果。使用指引请阅读交互状态。

令牌 值 样张
--tanrei-sys-state-disabled-container-opacity 0.12 (12%) AaAa
--tanrei-sys-state-disabled-content-opacity 0.38 (38%) AaAa
--tanrei-sys-state-dragged-state-layer-opacity 0.16 (16%) AaAa
--tanrei-sys-state-focus-state-layer-opacity 0.1 (10%) AaAa
--tanrei-sys-state-hover-state-layer-opacity 0.08 (8%) AaAa
--tanrei-sys-state-pressed-state-layer-opacity 0.1 (10%) AaAa
--tanrei-sys-state-selected-state-layer-opacity 0.16 (16%) AaAa

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