# 设计变量表及命名规范

##
通用变量

用于非组件或多个组件上的变量。

###
颜色

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
字体 |  |  |
`@color-text-base` |  | 默认文字 | `tabs-默认选项` `button行动按钮-次按钮` `floatmenu浮动菜单-菜单项` `list列表-label` `picker选择器-选项` `input输入框-输入内容` `modal弹窗-标题` `step步骤条-标题`
`@color-text-base-inverse` |  | 深色背景下的文字 | `行动按钮-主按钮` `临时告知` `toast` `徽标数` `深色标签`
`@color-text-placeholder` |  | 文本框提示 | `input输入框、textarea输入区域-文字提示` `清除图标的默认颜色`
`@color-text-disabled` |  | 失效 |
`@color-text-caption` |  | 辅助描述 |
`@color-text-paragraph` |  | 段落 |
`@color-link` |  | 链接色 | `链接的颜色` `可点击文字按钮的文字颜色`
`@color-shadow` |  | 阴影色 | `floatmenu浮动菜单`
填充 |  |  |
`@fill-base` |  | 组件默认背景 |
`@fill-body` |  | 页面背景 |
`@fill-tap` |  | 默认背景按下 |
`@fill-disabled` |  | 失效背景 |
`@fill-mask` |  | 遮罩背景 | `dropdown` `actionsheet` `floatmenu` `modal`
`@fill-overlay-inverse` |  | 浮层背景反色 | `toast`
全局 |  |  |
`@brand-primary` |  | 主色 | `主按钮-背景色` `icon-背景色`
`@brand-primary-tap` |  | 主色按下 |
`@brand-success` |  | 成功 |
`@brand-warning` |  | 警告 | `NoticeBar-文字`
`@brand-error` |  | 失败 |
`@brand-hot` |  | 热门 | 优惠、热门、强调
`@brand-important` |  | 重要 | 用于 badge 等
边框 |  |  |
`@border-color-base` |  | 基本边框色 | `button按钮-次按钮` `list列表` `tab选项卡` `actionsheet操作列表-选项分割线`
透明度 |  |  |
`@opacity-disabled` |  | 组件禁用 | `switch` `checkbox` `radio`
组件 |  |  |

###
字体尺寸

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
全局 |  |  |
`@font-size-icontext` | `20px` | 图标辅助文字 | `tabbar-图标辅助文字`
`@font-size-caption-sm` | `24px` | 辅助文字 - 小 | `列表-辅助文字` `列表-日期`
`@font-size-base` | `26px` | 基本字体 | `弹窗-描述` `列表-标题`
`@font-size-subhead` | `28px` | 副标题 | `Tabs`
`@font-size-caption` | `30px` | 辅助文字 | `列表-右侧内容`
`@font-size-heading` | `34px` | 标题字体 | `list列表-label` `input输入框-输入内容` `input输入框-暗提示` `modal弹框-标题` `城市选择-选项` `actionsheet操作列表-选项` `steps进度条-标题`
`@font-size-display-sm` | `36px` | 展示型字体 - 小 |
`@font-size-display-md` | `42px` | 展示型字体 - 中 |
`@font-size-display-lg` | `48px` | 展示型字体 - 大 |
`@font-size-display-xl` | `60px` | 展示型字体 - 超大 |

###
字体族

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@font-family-base` | `-apple-system,"SF UI Text",Roboto,Noto,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;` | 默认全局字体 |
`@font-family-code` | `Consolas,Menlo,Courier,monospace` | 代码字体 |

###
圆角

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@radius-xs` | `4px` |  | `icon消息类\tag`
`@radius-sm` | `6px` |  | `行动按钮-辅助按钮` `floatmenu浮动菜单-容器` `searchbar搜索框`
`@radius-md` | `10px` |  | `toast` `actionsheet-图标` `输入框-密码输入框` `行动按钮-主/次按钮`
`@radius-lg` | `14px` |  | `modal弹框`

###
边框尺寸

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@border-width-sm` | `1px` | 标准边框 | `浮动菜单` `弹框- list` `动作菜单` `选择器` `input` `文字类icon`
`@border-width-md` | `2px` |  | `次／辅助按钮` `输入框-验证码前纵向分割线`
`@border-width-lg` | `4px` |  | `steps步骤条-轴线` `tabs选项卡-选中项的边线`

###
间距

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
水平 |  |  |
`@h-spacing-sm` | `12px` |  | 行动按钮-辅助按钮
`@h-spacing-md` | `18px` |  | `floatmenu-容器与分割线&分割线与文字`
`@h-spacing-lg` | `30px` | 容器内横向间距 | `notice-bar` `列表` `表单` `modal-关闭图标距离容器边距`
垂直 |  |  |
`@v-spacing-xs` | `6px` |  | `列表：标题和辅助文字间`
`@v-spacing-sm` | `12px` |  | `toast：图标和文字`
`@v-spacing-md` | `18px` |  | `actionsheet：选项和取消操作间` `列表：title、footer离list选项的间距` `分享组件：图标和文字` `分享组件：图标和文字`
`@v-spacing-lg` | `30px` |  | `title的外边距` `modal-关闭图标距离容器边距` `modal-图片与标题间距`
`@v-spacing-xl` | `42px` | 容器内纵向间距 | `actionsheet-分享组件` `modal`

###
高度

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@option-height` | `84px` |  | `actionsheet-选项` `picker`

###
图标尺寸

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@icon-size-xxs` | `30px` |  | `搜索框内icon` `公告左右两侧icon` `表单右侧对勾icon、下一级icon、title bar 返回按钮占位符`
`@icon-size-xs` | `36px` |  | ``
`@icon-size-sm` | `42px` |  | `float` `button里的icon` `表单里的小图` `表单里的多项选择checkbox、表单里同意条款checkbox` `输入框右侧删除按钮` `定位icon` `临时告知左侧icon`
`@icon-size-md` | `44px` |  | navbar 上
`@icon-size-lg` | `72px` |  | `toast 里的icon` `页面正中loading icon`

##
组件变量

只用于特定组件。

###
Button

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@button-height` | `84px` |  | `button` `action-sheet` `弹窗按钮`
`@button-height-sm` | `46px` |  | `辅助按钮-小尺寸`
`@across-button-height` | `84px` |  | `通栏按钮`
`@button-font-size-sm` | `24px` | 小按钮字体大小 |
`@button-font-size` | `36px` | 按钮字体大小 |
`@primary-button-fill` |  |  | `主按钮背景色`
`@primary-button-fill-tap` |  |  | `主按钮-按下背景色`
`@ghost-button-color` |  |  | 同时应用于背景、文字颜色、边框色
`@ghost-button-fill-tap` |  |  |
`@link-button-font-size` | `32px` | 链接按钮字体 |
`@link-button-fill-tap` |  | 链接按钮按下背景 |

###
List

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@list-item-height` | `90px` | 用于列表项 | `列表`
`@list-item-height-sm` | `70px` | 小尺寸列表 |
`@list-title-height` | `60px` | 索引列表分类标题的高度 | `索引列表-头部`

###
Input

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@input-font-size` | `28px` | 输入框文字 |
`@input-color-icon` |  | 输入框中操作图标 | `输入框中清除图标`
`@input-color-icon-tap` |  | 输入框中操作图标按下 | `输入框中清除图标按下`
`@input-color-icon-inverse` |  | 深色背景下输入框中操作按钮 | `深色背景下输入框中清除按钮`
`@input-color-icon-tap-inverse` |  | 深色背景输入框中操作按钮按下 | `深色背景下输入框中清除按钮按下`
背景 |  |  |

###
Tabs

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@tabs-height` | `84px` |  | `tabs`
`@tabs-font-size-heading` | `30px` | tabs选项字体 |
`@tabs-color` |  | Tabs 的高亮边和文字色彩 |

###
SegmentedControl

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@segmented-control-color` |  |  | 同时应用于背景、文字颜色、边框色
`@segmented-control-height` | `54px` | 分段控件的高度 | `分段控件`
`@segmented-control-fill-tap` |  | 分段控件选项按下的背景色 |

###
TabBar

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@tab-bar-height` | `100px` | TabBar 的 高度 | `tabbar`

###
SearchBar

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@search-bar-input-height` | `56px` | 搜索框高度 |

###
NoticeBar

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@notice-bar-height` | `72px` |  | 临时公告
`@notice-bar-fill` |  | 全局通知背景 | `notice-bar 背景色`

###
Switch

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@switch-fill` |  | switch选中的背景色 |

###
Tag

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@tag-height` | `48px` | 标签高度 |
`@tag-height-sm` | `28px` | 小号标签高度 |
`@tag-color` |  | 标签字体颜色、边线颜色 |

###
Table

变量名 | 默认变量值 | 描述 | 场景
--- | --- | --- | ---
`@table-title-height` | `60px` | 表格头高度 |

##
变量命名规范

`@{组件}-{属性}-{场景}-{状态}-{大小}-{反色}`

###
组件

可选，具体组件名：如 `button` `tabs` `list` `input` 等。未指定时表示全局通用。

> 组件名可以复合，例如 `default-button` `table` `tabs-current` `link-button` 以表示更精确的主体。

###
属性

必选，变量实际内容。

- `brand` 通用品牌色
- `fill` 背景色
- `border-color` 边框色
- `color` 色彩。优先使用上面三种。
- `border-width` 边框大小
- `font-size` 文字大小
- `radius` 圆角大小
- `height` 容器高度
- `v-spacing` 垂直间距
- `h-spacing` 水平间距

###
场景

- `text` 文本
- `heading` 标题
- `subhead` 子标题
- `caption` 辅助说明文字
- `paragraph` 段落文字
- `placeholder` 占位符
- `display` 广告/展示
- `icontext` 图标文字
- `link` 链接
- `body` 页面
- `overlay` 浮层
- `mask` 遮罩
- `shadow` 阴影

###
状态

可选。

- `base` 基本/默认
- `tap` 按下
- `disabled` 失效

- `priamry` 主要
- `success` 成功
- `warning` 警告
- `info` 信息
- `important` 重要/强调
- `error` 错误

###
大小

约定的大小选项。可选，一般和 `font-size` `radius` `height` `spacing` `border-width` 进行配合。

- `xl` 超大
- `lg` 大
- `md` 中
- `sm` 小
- `xs` 超小

###
反色

可选。

- `inverse` 用于深色背景

> 注 `@brand-primary 10%` less 中用 `rgba(@brand-primary, 10%)` 实现。