跳到主要内容

设计令牌Tokens

所有令牌都是 :root 上的 CSS 变量，前缀 --ok-。组件样式只引用令牌，不写死色值和毫秒数；自己写样式时也一样，主题、强调色和动效偏好就会自动生效。

令牌一览

每一类令牌的取值、可视化和使用规矩写在对应的设计基础页里，点右侧链接查看。颜色的值随主题和强调色变化，在色彩页里实时读出。

类别令牌说明详见
品牌色--ok-ink --ok-paper --ok-pink两套主题共用。色彩 · 品牌色
表面--ok-well-2 --ok-well --ok-bg --ok-surface --ok-card --ok-raised --ok-pop --ok-thumb --ok-fill --ok-fill-hover …从凹到凸的表面色阶，浮层、填充。色彩 · 色阶、语义表面
半透明--ok-hover --ok-line --ok-line-2 --ok-hi --ok-scrim只有这五个带透明度。色彩 · 半透明只用在四处
文字--ok-text --ok-text-2 --ok-text-3 --ok-inverse --ok-on-inverse …正文三级与反色。色彩 · 全部色彩令牌
强调色--ok-accent --ok-accent-* --ok-on-accent随 data-accent 切换，其余由 color-mix() 派生。色彩 · 强调色与状态色
状态色--ok-success --ok-warning --ok-danger --ok-info，各带 -text -soft主色共用，文字色深色下提亮。色彩 · 状态色
字体--ok-font --ok-font-display --ok-font-mono系统字体栈。字体 · 三套字体
标题字号--ok-fs-display --ok-fs-h1 … --ok-fs-h4桌面 56 / 40 / 28 / 20 / 17，窄于 520px 时 38 / 30 / 24 / 18 / 16。字体 · 字阶
圆角--ok-r-1 … --ok-r-6 --ok-r-full --ok-r-nested8 / 12 / 16 / 24 / 32 / 44 × --ok-rk；--ok-r-nested 由容器向下传。形状 · 圆角、同心圆角
间距--ok-s-1 … --ok-s-164pt 栅格，数字 × 4 = 像素。形状 · 间距
控件高度--ok-h-sm --ok-h-md --ok-h-lg --ok-h-item --ok-h-item-sub32 / 40 / 48，列表项 36 / 30；触屏抬高。形状 · 控件高度
时长--ok-dur-1 … --ok-dur-690 / 150 / 240 / 360 / 520 / 800ms，已乘 --ok-ms。动效 · 时长
缓动与弹簧--ok-ease-* --ok-spring --ok-spring-soft / snappy / bouncy / wobbly，各带 -dur弹簧是 linear() 缓动加配套时长，成对使用。动效 · 缓动与弹簧
悬浮卡片进退场--ok-float-in-dur --ok-float-in-ease --ok-float-fade-dur --ok-float-out-dur --ok-float-out-ease303 / 100 / 160ms，进场 spring-soft、退场 ease-in。所有悬浮卡片共用。动效 · 悬浮卡片
全局开关--ok-ms --ok-rk --ok-corner动效倍率（减弱动效时为 0）、圆角倍率、圆角曲线。主题

在自己的样式里用

引用令牌而不是抄数值：深浅色、强调色、触屏高度、窄屏字号和减弱动效都会自动跟上。

css
.my-panel {
  padding: var(--ok-s-5);
  border-radius: var(--ok-r-4); corner-shape: var(--ok-corner);
  background: var(--ok-card); color: var(--ok-text);
  box-shadow: inset 0 0 0 1px var(--ok-line), inset 0 1.5px 0 var(--ok-hi);   /* 内描边 + 顶部高光，不是投影 */
  transition: transform var(--ok-spring-dur) var(--ok-spring), opacity var(--ok-dur-2) var(--ok-ease-out);
}
.my-title { font: 700 var(--ok-fs-h2)/1.25 var(--ok-font-display); }

圆角要配 corner-shape: var(--ok-corner)；全圆用 --ok-r-full 配 corner-shape: round。弹簧缓动和它的时长令牌成对使用。缺令牌的时候在自己的样式里用局部变量，不要改写库的 --ok-*（主题相关的几个全局开关除外，见 主题）。