__THEME_BOOT__ __BRAND_HEAD__ 设计规范 — Kole UI Mobile __HEADER__
__SIDEBAR__

设计规范

与 PC 的「设计规范」同口径，本页讲移动端的令牌体系。移动端令牌层只有一层新增：__MOBILE_COUNT__ 个 --kole-m-*（触控尺寸、安全区、移动端字号、手势动效）。 颜色、字体族、圆角、阴影不复制——通过 @import 继承 PC 令牌，改一处两端同时生效。

令牌文件

文件作用
.design_library/kole-ui/colors_and_type.cssPC 令牌（75 个 --kole-*）：品牌色、文字色、边框、圆角、阴影、间距、字号 —— 两端共用
.design_library/kole-ui-mobile/colors_and_type.css移动端令牌层：@import 上一行 + 本节列出的 --kole-m-*
dist/mobile/tokens/tokens.css上两者合成的自包含单文件（消费端只引这一个）

移动端自有令牌（--kole-m-*）

__TOKEN_ROWS__
令牌值用途

移动端组件实际用到的继承令牌

下表的 PC 令牌由移动端 __COMPONENT_COUNT__ 个组件的样式表实际引用（构建时扫描得出）。它们定义在 PC 令牌文件里，值随 PC 主题变化 —— 移动端不需要、也不应该重新定义同名令牌。

__INHERITED_ROWS__
令牌值被哪些组件使用

三条约定

  • 单位：移动端 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; } */
__COPY_SCRIPT__