设计变量
为什么要使用变量
变量实际上是将设计中的基础元素与具体的样式进行解耦。 对于设计师来说，如果产品的风格需要迭代更新，比如需要更新 危险 的功能色，即 color-danger，只需要修改其对应的颜色默认值，既可以完成整套产品的 UI 迭代。
基础色
基于品牌色动态生成，包含 170 个颜色在内的，17 个不同色相的梯度色盘。通常情况下，我们用使用基础色中的颜色来进一步定义功能色。
主要功能色
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-primary | rgba(var(--ibiz-blue-cyan-4), 1) | 主要颜色。仅在需要非常强调的情况下使用。 |
| --ibiz-color-primary-text | rgba(var(--ibiz-white), 1) | 主要颜色文字色，和背景色形成对比 |
| --ibiz-color-primary-hover | rgba(var(--ibiz-blue-cyan-3), 1) | 主要颜色悬浮态 |
| --ibiz-color-primary-hover-text | rgba(var(--ibiz-white), 1) | 主要颜色悬浮态文字色，和背景色形成对比 |
| --ibiz-color-primary-active | rgba(var(--ibiz-blue-cyan-5), 1) | 主要颜色激活态 |
| --ibiz-color-primary-active-text | rgba(var(--ibiz-white), 1) | 主要颜色激活态文字色，和背景色形成对比 |
| --ibiz-color-primary-disabled | rgba(var(--ibiz-blue-cyan-2), 1) | 主要颜色禁用态 |
| --ibiz-color-primary-disabled-text | rgba(var(--ibiz-white), 1) | 主要颜色禁用态文字色，和背景色形成对比 |
| --ibiz-color-primary-light-default | rgba(var(--ibiz-blue-cyan-0), 1) | 浅版主要颜色（多用于背景）。仅在需要非常强调的情况下使用。 |
| --ibiz-color-primary-light-hover | rgba(var(--ibiz-blue-cyan-1), 1) | 浅版主要颜色悬浮态 |
| --ibiz-color-primary-light-active | rgba(var(--ibiz-blue-cyan-2), 1) | 浅版主要颜色激活态 |
| --ibiz-color-secondary | rgba(var(--ibiz-light-blue-5), 1) | 次要颜色。强调作用次于主要颜色，但仍然具有强调作用。 |
| --ibiz-color-secondary-text | rgba(var(--ibiz-white), 1) | 次要颜色文字色，和背景色形成对比 |
| --ibiz-color-secondary-hover | rgba(var(--ibiz-light-blue-6), 1) | 次要颜色悬浮态 |
| --ibiz-color-secondary-hover-text | rgba(var(--ibiz-white), 1) | 次要颜色悬浮态文字色，和背景色形成对比 |
| --ibiz-color-secondary-active | rgba(var(--ibiz-light-blue-7), 1) | 次要颜色激活态 |
| --ibiz-color-secondary-active-text | rgba(var(--ibiz-white), 1) | 次要颜色激活态文字色，和背景色形成对比 |
| --ibiz-color-secondary-disabled | rgba(var(--ibiz-light-blue-2), 1) | 次要颜色禁用态 |
| --ibiz-color-secondary-disabled-text | rgba(var(--ibiz-white), 1) | 次要颜色禁用态文字色，和背景色形成对比 |
| --ibiz-color-secondary-light-default | rgba(var(--ibiz-light-blue-0), 1) | 浅版次要颜色（多用于背景）。强调作用次于主要颜色，但仍然具有强调作用。 |
| --ibiz-color-secondary-light-hover | rgba(var(--ibiz-light-blue-1), 1) | 浅版次要颜色悬浮态 |
| --ibiz-color-secondary-light-active | rgba(var(--ibiz-light-blue-2), 1) | 浅版次要颜色激活态 |
信息 - info
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-info | rgba(var(--ibiz-blue-cyan-4), 1) | 信息色, 通常用于表达客观、中立信息 |
| --ibiz-color-info-text | rgba(var(--ibiz-white), 1) | 信息色文字色，和背景色形成对比 |
| --ibiz-color-info-hover | rgba(var(--ibiz-blue-cyan-3), 1) | 信息色悬浮态 |
| --ibiz-color-info-hover-text | rgba(var(--ibiz-white), 1) | 信息色悬浮态文字色，和背景色形成对比 |
| --ibiz-color-info-active | rgba(var(--ibiz-blue-cyan-5), 1) | 信息色激活态 |
| --ibiz-color-info-active-text | rgba(var(--ibiz-white), 1) | 信息色激活态文字色，和背景色形成对比 |
| --ibiz-color-info-disabled | rgba(var(--ibiz-blue-cyan-2), 1) | 信息色禁用态 |
| --ibiz-color-info-disabled-text | rgba(var(--ibiz-white), 1) | 信息色禁用态文字色，和背景色形成对比 |
| --ibiz-color-info-light-default | rgba(var(--ibiz-blue-cyan-0), 1) | 浅版信息色（多用于背景），通常用于表达客观、中立信息 |
| --ibiz-color-info-light-hover | rgba(var(--ibiz-blue-cyan-1), 1) | 浅版信息色悬浮态 |
| --ibiz-color-info-light-active | rgba(var(--ibiz-blue-cyan-2), 1) | 浅版信息色激活态 |
成功 - success
通常用于表达成功、完成、开启状态，在带有上述语义的场景下使用
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-success | rgba(var(--ibiz-green-5), 1) | 成功色，表示安全、成功、开启的状态 |
| --ibiz-color-success-text | rgba(var(--ibiz-white), 1) | 成功色文字色，和背景色形成对比 |
| --ibiz-color-success-hover | rgba(var(--ibiz-green-4), 1) | 成功色悬浮态 |
| --ibiz-color-success-hover-text | rgba(var(--ibiz-white), 1) | 成功色悬浮态文字色，和背景色形成对比 |
| --ibiz-color-success-active | rgba(var(--ibiz-green-6), 1) | 成功色激活态 |
| --ibiz-color-success-active-text | rgba(var(--ibiz-white), 1) | 成功色激活态文字色，和背景色形成对比 |
| --ibiz-color-success-disabled | rgba(var(--ibiz-green-2), 1) | 成功色禁用态 |
| --ibiz-color-success-disabled-text | rgba(var(--ibiz-white), 1) | 成功色禁用态文字色，和背景色形成对比 |
| --ibiz-color-success-light-default | rgba(var(--ibiz-green-0), 1) | 浅版成功色（多用于背景），表示安全、成功、开启的状态 |
| --ibiz-color-success-light-hover | rgba(var(--ibiz-green-1), 1) | 浅版成功色悬浮态 |
| --ibiz-color-success-light-active | rgba(var(--ibiz-green-2), 1) | 浅版成功色激活态 |
警告 - warning
通常用于表达警告、不安全状态，在带有上述语义的场景下使用
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-warning | rgba(var(--ibiz-orange-5), 1) | 警示色，表示警告、不安全的状态 |
| --ibiz-color-warning-text | rgba(var(--ibiz-white), 1) | 警示色文字色，和背景色形成对比 |
| --ibiz-color-warning-hover | rgba(var(--ibiz-orange-4), 1) | 警示色悬浮态 |
| --ibiz-color-warning-hover-text | rgba(var(--ibiz-white), 1) | 警示色悬浮态文字色，和背景色形成对比 |
| --ibiz-color-warning-active | rgba(var(--ibiz-orange-6), 1) | 警示色激活态 |
| --ibiz-color-warning-active-text | rgba(var(--ibiz-white), 1) | 警示色激活态文字色，和背景色形成对比 |
| --ibiz-color-warning-light-default | rgba(var(--ibiz-orange-0), 1) | 浅版警示色（多用于背景），表示警告、不安全的状态 |
| --ibiz-color-warning-light-hover | rgba(var(--ibiz-orange-1), 1) | 浅版警示色悬浮态 |
| --ibiz-color-warning-light-active | rgba(var(--ibiz-orange-2), 1) | 浅版警示色激活态 |
危险 - danger
通常用于表达危险状态，在带有上述语义的场景下使用
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-danger | rgba(var(--ibiz-red-5), 1) | 危险色，表示危险的操作、或需要特别注意的危险信息 |
| --ibiz-color-danger-text | rgba(var(--ibiz-white), 1) | 危险色文字色，和背景色形成对比 |
| --ibiz-color-danger-hover | rgba(var(--ibiz-red-4), 1) | 危险色悬浮态 |
| --ibiz-color-danger-hover-text | rgba(var(--ibiz-white), 1) | 危险色悬浮态文字色，和背景色形成对比 |
| --ibiz-color-danger-active | rgba(var(--ibiz-red-6), 1) | 危险色激活态 |
| --ibiz-color-danger-active-text | rgba(var(--ibiz-white), 1) | 危险色激活态文字色，和背景色形成对比 |
| --ibiz-color-danger-light-default | rgba(var(--ibiz-red-0), 1) | 浅版危险色（多用于背景），表示危险的操作、或需要特别注意的危险信息 |
| --ibiz-color-danger-light-hover | rgba(var(--ibiz-red-1), 1) | 浅版危险色悬浮态 |
| --ibiz-color-danger-light-active | rgba(var(--ibiz-red-2), 1) | 浅版危险色激活态 |
禁用色 - disabled
用于界面中各类表达禁用的元素填充，如背景、文本、描边、填充等
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-disabled-text | rgba(var(--ibiz-grey-9), .35) | 禁用态 - 文字 |
| --ibiz-color-disabled-border | rgba(var(--ibiz-grey-1), 1) | 禁用态 - 描边 |
| --ibiz-color-disabled-bg | rgba(var(--ibiz-grey-1), 1) | 禁用态 - 背景 |
| --ibiz-color-disabled-fill | rgba(var(--ibiz-grey-8), .04) | 禁用态 - 填充 |
文本与图标颜色 - text
四个不同层级的文本/图标颜色，依次代表产品界面中最主要、次主要、稍次要和最次要的内容
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-text-0 | rgba(var(--ibiz-grey-9), 1) | 文本/图标颜色 - 最主要 |
| --ibiz-color-text-1 | rgba(var(--ibiz-grey-7), 1) | 文本/图标颜色 - 稍次要 |
| --ibiz-color-text-2 | rgba(var(--ibiz-grey-6), 1) | 文本/图标颜色 - 次要 |
| --ibiz-color-text-3 | rgba(var(--ibiz-grey-4), 1) | 文本/图标颜色 - 最次要 |
| --ibiz-color-text-5 | rgb(219, 228, 236) | 文本色(特殊) - 应用搜索框使用 |
| --ibiz-color-text-menu | rgb(219, 228, 236) | 文本 - 特殊-菜单颜色 |
| --ibiz-color-icon-0 | #65B3FC | 图标颜色 - 最主要 |
| --ibiz-color-icon-1 | #CBE7FE | 图标颜色 - 次要 |
链接色 - link
用于产品中超链接的文本
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-link | rgba(var(--ibiz-blue-cyan-5), 1) | 链接颜色 |
| --ibiz-color-link-hover | rgba(var(--ibiz-blue-cyan-4), 1) | 链接颜色 - 悬浮态 |
| --ibiz-color-link-active | rgba(var(--ibiz-blue-cyan-6), 1) | 链接颜色 - 激活态 |
| --ibiz-color-link-visited | rgba(var(--ibiz-blue-cyan-5), 1) | 链接颜色 - 已访问 |
背景色 - bg
应用中各级背景色，包括容器、菜单、导航栏等。在暗色模式下，我们通常用背景色来区分前后层级
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-bg-0 | rgba(var(--ibiz-grey-0), 1) | 背景色 - 最下层（底部页面） |
| --ibiz-color-bg-1 | rgba(var(--ibiz-white), 1) | 背景色 - 次下层（页面中需要提升的内容） |
| --ibiz-color-bg-2 | rgba(var(--ibiz-white), 1) | 背景色 - 中间层（模态等容器） |
| --ibiz-color-bg-3 | rgba(var(--ibiz-white), 1) | 背景色 - 次上层（通知，Toast 等） |
| --ibiz-color-bg-4 | rgba(var(--ibiz-white), 1) | 背景色 - 最上层（特殊） |
| --ibiz-color-bg-5 | rgba(var(--ibiz-blue-cyan-3),0.6) | 背景色(特殊) - 应用搜索框使用 |
| --ibiz-color-bg-overlay | rgba(var(--ibiz-blue-cyan-3),0.5) | 蒙层背景色 |
填充色 - fill
对于一个元素，如果其所处的容器背景颜色不固定，且这个元素的填充色与最上层背景色的对比度比较小，使用填充色作为 backgroundColor，确保这个元素不会“融于”某一级别背景颜色中，如表单控件。
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-fill-0 | rgba(var(--ibiz-grey-8), .05) | 填充色 - 默认态 |
| --ibiz-color-fill-1 | rgba(var(--ibiz-grey-8), .1) | 填充色 - 悬浮态 |
| --ibiz-color-fill-2 | rgba(var(--ibiz-grey-8), .13) | 填充色 - 激活态 |
| --ibiz-color-scroll-menu | rgba(132, 165, 198, 0.4) | 填充色 - 特殊-菜单滚动条颜色 |
描边色 - border
界面中带有描边属性的颜色
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-border | rgba(var(--ibiz-grey-9), .1) | 默认描边颜色 |
阴影
阴影通常用来表达界面元素的层级，阴影越重的元素距离用户越近
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-color-shadow | rgba(var(--ibiz-black), .04) | 用于模拟描边的阴影颜色 |
| --ibiz-shadow-elevated | 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1) | 用于 toast, modal, popover 等需要提升层级的界面元素 |
字体排版
字体排版用来传达信息内容，并界面看起来有秩序
字号
决定不同层级文本的大小
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-font-size-small | 12px | 小文本字号 |
| --ibiz-font-size-regular | 14px | 常规文本字号 |
| --ibiz-font-size-header-6 | 16px | 六级标题字号 |
| --ibiz-font-size-header-5 | 18px | 五级标题字号 |
| --ibiz-font-size-header-4 | 20px | 四级标题字号 |
| --ibiz-font-size-header-3 | 24px | 三级标题字号 |
| --ibiz-font-size-header-2 | 28px | 二级标题字号 |
| --ibiz-font-size-header-1 | 32px | 一级标题字号 |
字重
决定不同层级文本的粗细
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-font-weight-light | 200 | 字重 - 轻 |
| --ibiz-font-weight-regular | 400 | 字重 - 常规 |
| --ibiz-font-weight-bold | 800 | 字重 - 加粗 |
圆角
使用圆角来描述容器与界面元素的轮廓，从一定程度决定产品的视觉调性
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-border-radius-extra-small | 2px | 超小圆角，用于 checkbox 内圆角 |
| --ibiz-border-radius-small | 4px | 小圆角, 用于 button、tag、tabs 等大多数组件, 比较常用 |
| --ibiz-border-radius-medium | 8px | 中圆角, 用于 dropdown、scrollist、transfer 等菜单类组件 |
| --ibiz-border-radius-large | 12px | 大圆角, 用于 modal |
| --ibiz-border-radius-circle | 50% | 全圆角, 用于 avatar, badge 等组件 |
| --ibiz-border-radius-full | 9999px | 用于创建全尺寸圆角，如胶囊标签等 |
尺寸
尺寸变量被应用在各个组件及内部元素中，用来调整控件的大小、描边的粗细、图标的尺寸等
高度
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-height-control-small | 24px | 表单项高度 - 小尺寸 |
| --ibiz-height-control-default | 32px | 表单项高度 - 默认尺寸 |
| --ibiz-height-control-large | 40px | 表单项高度 - 大尺寸 |
描边尺寸
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-border-thickness | 0 | 描边宽度 - 零 |
| --ibiz-border-thickness-control | 1px | 描边宽度 - 默认状态（checkbox 等） |
| --ibiz-border-thickness-control-focus | 1px | 描边宽度 - focus 状态（checkbox 等） |
图标尺寸
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-width-icon-extra-small | 8px | 图标尺寸 - 超小 |
| --ibiz-width-icon-small | 12px | 图标尺寸 - 小 |
| --ibiz-width-icon-medium | 16px | 图标尺寸 - 中 |
| --ibiz-width-icon-large | 20px | 图标尺寸 - 大 |
| --ibiz-width-icon-extra-large | 24px | 图标尺寸 - 超大 |
间距
间距变量被应用在各个组件内部，或组件与组件之间，用来调整产品整体的密集和紧凑程度
| 变量 | 默认值 | 用法 |
|---|---|---|
| --ibiz-spacing-none | 0 | 间距 - 零 |
| --ibiz-spacing-super-tight | 2px | 间距 - 极紧凑尺寸内/外边距 |
| --ibiz-spacing-extra-tight | 4px | 间距 - 超紧凑尺寸内/外边距 |
| --ibiz-spacing-tight | 8px | 间距 - 紧凑尺寸内/外边距 |
| --ibiz-spacing-base-tight | 12px | 间距 - 默认（偏紧凑）尺寸内/外边距 |
| --ibiz-spacing-base | 16px | 间距 - 默认尺寸内/外边距 |
| --ibiz-spacing-base-loose | 20px | 间距 - 默认（偏宽松）尺寸内/外边距 |
| --ibiz-spacing-loose | 24px | 间距 - 宽松尺寸内/外边距 |
| --ibiz-spacing-extra-loose | 32px | 间距 - 超宽松尺寸内/外边距 |
| --ibiz-spacing-super-loose | 40px | 间距 - 极宽松尺寸内/外边距 |