设计规范
与 PC 的「设计规范」同口径，本页讲移动端的令牌体系。移动端令牌层只有一层新增：15 个 --kole-m-*（触控尺寸、安全区、移动端字号、手势动效）。
颜色、字体族、圆角、阴影不复制——通过 @import 继承 PC 令牌，改一处两端同时生效。
令牌文件
| 文件 | 作用 |
|---|---|
.design_library/kole-ui/colors_and_type.css | PC 令牌（75 个 --kole-*）：品牌色、文字色、边框、圆角、阴影、间距、字号 —— 两端共用 |
.design_library/kole-ui-mobile/colors_and_type.css | 移动端令牌层：@import 上一行 + 本节列出的 --kole-m-* |
dist/mobile/tokens/tokens.css | 上两者合成的自包含单文件（消费端只引这一个） |
移动端自有令牌（--kole-m-*）
| 令牌 | 值 | 用途 |
|---|---|---|
--kole-m-touch-target | 44px | 可点区域最小边长 |
--kole-m-navbar-height | 44px | 顶部导航栏内容高度（不含安全区） |
--kole-m-tabbar-height | 50px | 底部标签栏内容高度（不含安全区） |
--kole-m-action-height | 56px | 动作面板 / 列表行高度 |
--kole-m-gutter | 16px | 页面左右留白 |
--kole-m-hit-slack | 8px | 视觉尺寸不足 44px 时的扩展点击热区 |
--kole-m-safe-top | 0px | 顶部安全区；支持 env() 时由 @supports 覆盖为 env(safe-area-inset-top) |
--kole-m-safe-bottom | 0px | 底部安全区；支持 env() 时由 @supports 覆盖为 env(safe-area-inset-bottom) |
--kole-m-font-size-title | 17px | 导航栏标题 |
--kole-m-font-size-body | 16px | 正文 / 列表项 |
--kole-m-font-size-label | 14px | 次级说明 |
--kole-m-font-size-caption | 11px | 标签栏文字 |
--kole-m-duration-slide | 240ms | 面板/抽屉滑出 |
--kole-m-duration-refresh | 300ms | 下拉刷新回弹 |
--kole-m-ease-slide | cubic-bezier(.32, .72, 0, 1) |
移动端组件实际用到的继承令牌
下表的 PC 令牌由移动端 47 个组件的样式表实际引用（构建时扫描得出）。它们定义在 PC 令牌文件里，值随 PC 主题变化 —— 移动端不需要、也不应该重新定义同名令牌。
| 令牌 | 值 | 被哪些组件使用 |
|---|---|---|
--kole-color-border | #E8ECF1 | 顶部导航栏、底部标签栏、动作面板、下拉刷新、按钮、单元格、分割线、对话框、宫格、步骤条、数字键盘、日期选择器、列表、折叠面板、输入框、搜索框、步进器、多行文本框、多选框、表单、单选框、滑动选择器、级联选择器、颜色选择器、消息通知、选择器、弹出气泡、分段器、吸顶容器、表格、上传 |
--kole-color-brand | #2F54EB | 顶部导航栏、底部标签栏、下拉刷新、按钮、标签、对话框、宫格、步骤条、通知栏、数字键盘、日期选择器、图标、链接、加载、头像、折叠面板、进度条、输入框、搜索框、开关、多行文本框、多选框、表单、单选框、评分、滑动选择器、级联选择器、颜色选择器、选择器、弹出气泡、分段器、吸顶容器、表格、排版、上传 |
--kole-color-brand-active | #10239E | 按钮、数字键盘、链接、搜索框、表单、上传 |
--kole-color-brand-bg | #F0F5FF | 顶部导航栏、底部标签栏、动作面板、下拉刷新、按钮、标签、通知栏、日期选择器、链接、加载、步进器、多选框、单选框、滑动选择器、级联选择器、选择器、吸顶容器、表格、排版、上传 |
--kole-color-card-bg | #FFFFFF | 顶部导航栏、底部标签栏、动作面板、下拉刷新、滑动单元格、按钮、单元格、弹出层、对话框、宫格、步骤条、数字键盘、日期选择器、加载、头像、列表、折叠面板、进度条、输入框、搜索框、步进器、开关、多行文本框、多选框、表单、单选框、评分、滑动选择器、级联选择器、颜色选择器、消息通知、选择器、弹出气泡、分段器、吸顶容器、表格、上传 |
--kole-color-disabled-bg | #F5F5F5 | 按钮、标签、数字键盘、链接、头像、进度条、输入框、搜索框、步进器、多行文本框、多选框、表单、单选框、滑动选择器、颜色选择器、分段器、上传 |
--kole-color-error | #CF1322 | 底部标签栏、动作面板、滑动单元格、按钮、徽标、标签、对话框、步骤条、通知栏、图标、链接、进度条、输入框、多行文本框、表单、颜色选择器、消息通知、上传 |
--kole-color-focus-ring | rgba(47, 84, 235, 0.2) | 顶部导航栏、底部标签栏、动作面板、下拉刷新、滑动单元格、按钮、单元格、标签、弹出层、对话框、宫格、通知栏、数字键盘、日期选择器、链接、头像、列表、折叠面板、输入框、搜索框、步进器、开关、多行文本框、多选框、表单、单选框、评分、滑动选择器、级联选择器、颜色选择器、消息通知、选择器、弹出气泡、分段器、吸顶容器、表格、排版、上传 |
--kole-color-icon-inactive | #8F8F8F | 开关、评分 |
--kole-color-info | #096DD9 | 消息通知 |
--kole-color-mask | rgba(0, 0, 0, 0.45) | 动作面板、弹出层、对话框、日期选择器、加载、级联选择器、颜色选择器、遮罩层、选择器、上传 |
--kole-color-mask-strong | rgba(0, 0, 0, 0.85) | 轻提示、遮罩层 |
--kole-color-page-bg | #F5F7FA | 动作面板、布局、列表、级联选择器 |
--kole-color-success | #2E7D0A | 下拉刷新、标签、通知栏、图标、链接、头像、进度条、消息通知、排版、上传 |
--kole-color-table-header-bg | #FAFAFA | 滑动单元格、单元格、标签、弹出层、对话框、宫格、通知栏、数字键盘、布局、头像、列表、折叠面板、步进器、开关、多选框、表单、单选框、级联选择器、消息通知、选择器、弹出气泡、分段器、表格、上传 |
--kole-color-tag-green-bg | #F6FFED | 标签、通知栏 |
--kole-color-text-body | #262626 | 顶部导航栏、动作面板、下拉刷新、滑动单元格、按钮、单元格、弹出层、对话框、宫格、步骤条、数字键盘、日期选择器、布局、加载、列表、折叠面板、进度条、输入框、搜索框、步进器、开关、多行文本框、多选框、表单、单选框、评分、滑动选择器、级联选择器、颜色选择器、消息通知、选择器、弹出气泡、分段器、表格、排版、上传 |
--kole-color-text-disabled | #BFBFBF | 顶部导航栏、底部标签栏、动作面板、按钮、单元格、标签、对话框、宫格、数字键盘、链接、头像、列表、折叠面板、输入框、搜索框、步进器、开关、多行文本框、多选框、表单、单选框、评分、滑动选择器、级联选择器、颜色选择器、选择器、分段器、表格、上传 |
--kole-color-text-inverse | #FFFFFF | 底部标签栏、滑动单元格、按钮、徽标、轻提示、步骤条、数字键盘、头像、进度条、多选框、表单、单选框、颜色选择器、上传 |
--kole-color-text-placeholder | #767676 | 单元格、列表、折叠面板、输入框、搜索框、多行文本框、多选框、表单、单选框、滑动选择器、级联选择器 |
--kole-color-text-secondary | #6E6E6E | 底部标签栏、动作面板、下拉刷新、滑动单元格、单元格、分割线、标签、弹出层、对话框、步骤条、数字键盘、图标、布局、加载、头像、列表、折叠面板、输入框、搜索框、步进器、多行文本框、多选框、表单、单选框、评分、滑动选择器、级联选择器、颜色选择器、消息通知、分段器、吸顶容器、表格、排版、上传 |
--kole-color-text-tertiary | #595959 | 排版 |
--kole-color-text-title | #1F2329 | 顶部导航栏、滑动单元格、单元格、对话框、日期选择器、列表、折叠面板、多选框、表单、单选框、级联选择器、选择器、弹出气泡、吸顶容器、排版、上传 |
--kole-color-tooltip-bg | #1F2329 | 轻提示 |
--kole-color-warning | #8C5A00 | 标签、通知栏、图标、消息通知 |
--kole-duration-base | 0.3s | 顶部导航栏、上传 |
--kole-duration-fast | 0.2s | 按钮、链接、颜色选择器、弹出气泡、分段器 |
--kole-ease-out | ease-out | 下拉刷新、进度条、弹出气泡 |
--kole-ease-standard | ease | 顶部导航栏、动作面板、按钮、链接、折叠面板、输入框、搜索框、开关、多行文本框、多选框、单选框、滑动选择器、颜色选择器、分段器、上传 |
--kole-font-family | "PingFang SC", "Source Han Sans SC", "Source Han Sans", "Microsoft YaHei", "Inter", "DIN", -apple-system, "Segoe UI", sans-serif | 顶部导航栏、底部标签栏、动作面板、下拉刷新、滑动单元格、徽标、标签、弹出层、轻提示、对话框、宫格、步骤条、通知栏、数字键盘、日期选择器、加载、头像、列表、折叠面板、进度条、级联选择器、颜色选择器、消息通知、选择器、弹出气泡、分段器、吸顶容器、表格、排版、上传 |
--kole-font-family-num | "Inter", "DIN", "Segoe UI", sans-serif | 底部标签栏、颜色选择器、表格、上传 |
--kole-icon-size-16 | 16px | 图标、加载、消息通知 |
--kole-icon-size-20 | 20px | 底部标签栏、下拉刷新、图标 |
--kole-icon-size-24 | 24px | 图标 |
--kole-radius-base | 4px | 顶部导航栏、动作面板、按钮、数字键盘、日期选择器、输入框、搜索框、步进器、多行文本框、表单、级联选择器、颜色选择器、消息通知、选择器、弹出气泡、分段器、吸顶容器、表格、排版、上传 |
--kole-radius-large | 8px | 弹出层、轻提示、对话框、日期选择器、加载、折叠面板、级联选择器、选择器 |
--kole-radius-medium | 6px | 布局、头像、弹出气泡 |
--kole-radius-small | 2px | 徽标、链接、多选框 |
--kole-shadow-high | 0 8px 24px rgba(0, 0, 0, 0.12) | 加载 |
--kole-shadow-low | 0 1px 4px rgba(0, 0, 0, 0.06) | 顶部导航栏、开关、滑动选择器、分段器 |
--kole-shadow-medium | 0 4px 12px rgba(0, 0, 0, 0.08) | 消息通知、弹出气泡、吸顶容器 |
--kole-space-12 | 12px | 动作面板、滑动单元格、按钮、单元格、分割线、弹出层、布局、加载、列表、折叠面板、进度条、输入框、搜索框、步进器、开关、多行文本框、多选框、表单、单选框、滑动选择器、颜色选择器、消息通知、弹出气泡、分段器、吸顶容器、表格、上传 |
--kole-space-16 | 16px | 按钮、弹出层、轻提示、宫格、步骤条、布局、折叠面板、多选框、表单、单选框、颜色选择器、弹出气泡、分段器、上传 |
--kole-space-20 | 20px | 按钮、轻提示、对话框、加载 |
--kole-space-24 | 24px | 布局、加载 |
--kole-space-4 | 4px | 顶部导航栏、底部标签栏、滑动单元格、按钮、徽标、标签、步骤条、日期选择器、图标、链接、进度条、表单、级联选择器、选择器、弹出气泡、表格、上传 |
--kole-space-40 | 40px | 列表、级联选择器、表格 |
--kole-space-48 | 48px | 通知栏 |
--kole-space-8 | 8px | 顶部导航栏、动作面板、下拉刷新、单元格、分割线、标签、弹出层、轻提示、对话框、宫格、步骤条、通知栏、日期选择器、布局、加载、列表、输入框、搜索框、步进器、开关、多行文本框、多选框、表单、单选框、评分、级联选择器、颜色选择器、消息通知、选择器、弹出气泡、吸顶容器、排版、上传 |
三条约定
- 单位：移动端 Web 端（css / html / jsx / vue2 / vue3）用
px，触摸目标由--kole-m-touch-target（44px）保证；uni-app 端用rpx（750rpx = 视口宽度），组件内以同名令牌覆盖成 rpx 值（如--kole-m-touch-target: 88rpx）。 - 安全区：
--kole-m-safe-top/bottom用@supports (padding-top: env(safe-area-inset-top))探测后取env()，不支持时为0px（老浏览器拿到的是合法值，而不是被丢弃的声明）。页面需带viewport-fit=cover。 - 明暗模式：由
html.kole-dark承担，颜色令牌在 PC 令牌文件里成对定义；移动端令牌层不定义颜色，因此暗色下不会出现"两端调色不一致"。
改令牌的正确姿势
只改一处，两端同时生效
/* PC 令牌（颜色 / 字体 / 圆角 / 阴影）：两端共用 —— 改这里 */
/* .design_library/kole-ui/colors_and_type.css */
:root { --kole-color-brand: #2F54EB; }
/* 移动端自有令牌（触控 / 安全区 / 字号）：只影响移动端 —— 改这里 */
/* .design_library/kole-ui-mobile/colors_and_type.css */
:root { --kole-m-touch-target: 44px; }
/* 组件里的尺寸默认走令牌，业务侧可覆盖：
.kole-m-pullrefresh { --kole-m-pullrefresh-threshold: 80px; } */