Stepper · 常规状态
116×32px 全圆角,G05 背景,左右 16×16px 加减图标(边距 12px),中间 14px 数字,点击加减 1
Stepper · 禁用状态
图标和数字颜色均为 G30,不可交互
| 属性 | 值 | Token |
| 整体宽度 | 116px | --stp-width |
| 整体高度 | 32px | --stp-height |
| 圆角 | 999px(全圆角) | --stp-radius |
| 背景颜色 | #F5F7FA G05 | --stp-bg → --G05 |
| 图标尺寸 | 16×16px | --stp-icon-size |
| 图标边距 | 12px | --stp-icon-padding |
| 数字字号 | 14px | --stp-number-font |
| 数字字重 | 500 | font-weight:500 |
| 数字字体 | HarmonyOS Sans | --font-number |
| 图标颜色(正常) | #223355 G60 | --stp-icon-color → --G60 |
| 数字颜色 | #223355 G60 | --stp-number-color → --G60 |
| 图标颜色(达到上限/下限) | #CED4E0 G30 | --stp-icon-limit-color → --G30 |
| 图标颜色 | #CED4E0 G30 | --stp-icon-disabled-color → --G30 |
| 数字颜色 | #CED4E0 G30 | --stp-number-disabled-color → --G30 |
| 背景颜色 | #F5F7FA G05 | --stp-disabled-bg → --G05 |
| 点击加号 | 数字 +1 | action:plus |
| 点击减号 | 数字 -1 | action:minus |
| 达到上限 | 加号图标变 G30,不可继续增加 | limit:upper |
| 达到下限 | 减号图标变 G30,不可继续减少 | limit:lower |
| 禁用态 | 图标和数字均变 G30,不可交互 | disabled |
| 图标状态切换 | 0.15s ease | transition |