# qiaoyi_custom_styles

**Repository Path**: zhangpingchuan/qiaoyi_custom_styles

## Basic Information

- **Project Name**: qiaoyi_custom_styles
- **Description**: No description available
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-12
- **Last Updated**: 2025-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 主题包

## 建模配置

新建主题后，配置主题参数[theme-package-path]，参数格式为：插件名称@版本号。一旦你新建并启用了一个界面主题，应用程序将根据配置的主题参数 theme-package-path 获取该路径下的主题包，并将其注入到应用中。这样，应用程序将使用这个界面主题包来改变界面的外观和行为

配置截图：

![image](public/assets/images/theme-config.png)

## 文件说明

1. layout：该目录下放置的是定制的默认视图布局面板模型

2. theme: 主题样式目录

   |      文件名       |        说明         |
   | :---------------: | :-----------------: |
   |     app.scss      |   应用级样式文件    |
   |     ctrl.scss     |   部件级样式文件    |
   |    editor.scss    |   编辑器样式文件    |
   | element-plus.scss | element组件样式文件 |
   |    theme.scss     |  主题样式变量文件   |
   |     view.scs      |   视图级样式文件    |

3. 当你使用定制界面主题包时，模板将不会自动注入默认的界面主题包。如果你只想调整局部主题，你可以选择继承一个合适的界面主题包作为基础进行定制

   ```js
   import WebTheme from '@ibiz-template/web-theme';
   
   export default {
     install(app: App) {
       // 挂载继承主题
       app.use(WebTheme);
     },
   };
   ```


## 基础色

基于品牌色动态生成，包含 170 个颜色在内的，17 个不同色相的梯度色盘。通常情况下，我们用使用基础色中的颜色来进一步定义功能色

![image.png](public/assets/images/color.png)

![image.png](public/assets/images/color2.png)

![image.png](public/assets/images/color3.png)

## 功能色

从基础色盘中引用，应用在包括界面背景，文本图标，链接，描边在内的各类用户界面元素上；侨益主题中有部分特殊设置的颜色。

### 主要颜色 - primary

用户界面主强调色及各交互态颜色，通常用于主操作按钮等

| 变量                               | 默认值                           | 用法                                                       |
| :--------------------------------- | :------------------------------- | :--------------------------------------------------------- |
| --ibiz-color-primary               | \#008FD7                         | 主要颜色。仅在需要非常强调的情况下使用。                   |
| --ibiz-color-primary-text          | rgba(var(--ibiz-white), 1)       | 主要颜色文字色，和背景色形成对比                           |
| --ibiz-color-primary-hover         | \#e8f4ff                         | 主要颜色悬浮态                                             |
| --ibiz-color-primary-hover-text    | rgba(var(--ibiz-white), 1)       | 主要颜色悬浮态文字色，和背景色形成对比                     |
| --ibiz-color-primary-active        | \#2f9bff                         | 主要颜色激活态                                             |
| --ibiz-color-primary-active-text   | rgba(var(--ibiz-white), 1)       | 主要颜色激活态文字色，和背景色形成对比                     |
| --ibiz-color-primary-disabled      | \#74bcff                         | 主要颜色禁用态                                             |
| --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) | 浅版主要颜色激活态                                         |

### 次要颜色 - secondary

次要颜色 - secondary

| 变量                                 | 默认值                            | 用法                                                         |
| :----------------------------------- | :-------------------------------- | :----------------------------------------------------------- |
| --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) | 浅版次要颜色激活态                                           |

### 第三颜色 - tertiary

用户界面中非强调色及各交互态颜色，通常用于常规、非强调功能操作按钮等

| 变量                                | 默认值                      | 用法                                             |
| :---------------------------------- | :-------------------------- | :----------------------------------------------- |
| --ibiz-color-tertiary               | rgba(var(--ibiz-grey-5), 1) | 第三颜色，可以在页面上多次使用                   |
| --ibiz-color-tertiary-text          | rgba(var(--ibiz-white), 1)  | 第三颜色文字色，和背景色形成对比                 |
| --ibiz-color-tertiary-hover         | rgba(var(--ibiz-grey-4), 1) | 第三颜色悬浮态                                   |
| --ibiz-color-tertiary-hover-text    | rgba(var(--ibiz-white), 1)  | 第三颜色悬浮态文字色，和背景色形成对比           |
| --ibiz-color-tertiary-active        | rgba(var(--ibiz-grey-6), 1) | 第三颜色激活态                                   |
| --ibiz-color-tertiary-active-text   | rgba(var(--ibiz-white), 1)  | 第三颜色激活态文字色，和背景色形成对比           |
| --ibiz-color-tertiary-light-default | rgba(var(--ibiz-grey-0), 1) | 浅版第三颜色（多用于背景），可以在页面上多次使用 |
| --ibiz-color-tertiary-light-hover   | rgba(var(--ibiz-grey-1), 1) | 浅版第三颜色悬浮态                               |
| --ibiz-color-tertiary-light-active  | rgba(var(--ibiz-grey-2), 1) | 浅版第三颜色激活态                               |

### 信息 - info

通常用于表达客观、中立信息，在带有上述语义的场景下使用

| 变量                            | 默认值                           | 用法                                                 |
| :------------------------------ | :------------------------------- | :--------------------------------------------------- |
| --ibiz-color-info               | \#909399                         | 信息色, 通常用于表达客观、中立信息                   |
| --ibiz-color-info-text          | rgba(var(--ibiz-white), 1)       | 信息色文字色，和背景色形成对比                       |
| --ibiz-color-info-hover         | \#b1b3b8                         | 信息色悬浮态                                         |
| --ibiz-color-info-hover-text    | rgba(var(--ibiz-white), 1)       | 信息色悬浮态文字色，和背景色形成对比                 |
| --ibiz-color-info-active        | \#73767a                         | 信息色激活态                                         |
| --ibiz-color-info-active-text   | rgba(var(--ibiz-white), 1)       | 信息色激活态文字色，和背景色形成对比                 |
| --ibiz-color-info-disabled      | \#c8c9cc                         | 信息色禁用态                                         |
| --ibiz-color-info-disabled-text | rgba(var(--ibiz-white), 1)       | 信息色禁用态文字色，和背景色形成对比                 |
| --ibiz-color-info-light-default | \#f4f4f5                         | 浅版信息色（多用于背景），通常用于表达客观、中立信息 |
| --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               | \#33B73C                     | 成功色，表示安全、成功、开启的状态                   |
| --ibiz-color-success-text          | rgba(var(--ibiz-white), 1)   | 成功色文字色，和背景色形成对比                       |
| --ibiz-color-success-hover         | \#95d475                     | 成功色悬浮态                                         |
| --ibiz-color-success-hover-text    | rgba(var(--ibiz-white), 1)   | 成功色悬浮态文字色，和背景色形成对比                 |
| --ibiz-color-success-active        | \#529b2e                     | 成功色激活态                                         |
| --ibiz-color-success-active-text   | rgba(var(--ibiz-white), 1)   | 成功色激活态文字色，和背景色形成对比                 |
| --ibiz-color-success-disabled      | \#b3e19d                     | 成功色禁用态                                         |
| --ibiz-color-success-disabled-text | rgba(var(--ibiz-white), 1)   | 成功色禁用态文字色，和背景色形成对比                 |
| --ibiz-color-success-light-default | \#e7faf0                     | 浅版成功色（多用于背景），表示安全、成功、开启的状态 |
| --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               | \#ffba00                      | 警示色，表示警告、不安全的状态                   |
| --ibiz-color-warning-text          | rgba(var(--ibiz-white), 1)    | 警示色文字色，和背景色形成对比                   |
| --ibiz-color-warning-hover         | \#eebe77                      | 警示色悬浮态                                     |
| --ibiz-color-warning-hover-text    | rgba(var(--ibiz-white), 1)    | 警示色悬浮态文字色，和背景色形成对比             |
| --ibiz-color-warning-active        | \#b88230                      | 警示色激活态                                     |
| --ibiz-color-warning-active-text   | rgba(var(--ibiz-white), 1)    | 警示色激活态文字色，和背景色形成对比             |
| --ibiz-color-warning-disabled      | \#f3d19e                      | 警示色禁用态                                     |
| --ibiz-color-warning-disabled-text | rgba(var(--ibiz-white), 1)    | 警示色禁用态文字色，和背景色形成对比             |
| --ibiz-color-warning-light-default | \#fff8e6                      | 浅版警示色（多用于背景），表示警告、不安全的状态 |
| --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               | \#E6525E                   | 危险色，表示危险的操作、或需要特别注意的危险信息             |
| --ibiz-color-danger-text          | rgba(var(--ibiz-white), 1) | 危险色文字色，和背景色形成对比                               |
| --ibiz-color-danger-hover         | \#f89898                   | 危险色悬浮态                                                 |
| --ibiz-color-danger-hover-text    | rgba(var(--ibiz-white), 1) | 危险色悬浮态文字色，和背景色形成对比                         |
| --ibiz-color-danger-active        | \#c45656                   | 危险色激活态                                                 |
| --ibiz-color-danger-active-text   | rgba(var(--ibiz-white), 1) | 危险色激活态文字色，和背景色形成对比                         |
| --ibiz-color-danger-disabled      | \#fab6b6                   | 危险色禁用态                                                 |
| --ibiz-color-danger-disabled-text | rgba(var(--ibiz-white), 1) | 危险色禁用态文字色，和背景色形成对比                         |
| --ibiz-color-danger-light-default | \#ffeded                   | 浅版危险色（多用于背景），表示危险的操作、或需要特别注意的危险信息 |
| --ibiz-color-danger-light-hover   | rgba(var(--ibiz-red-1), 1) | 浅版危险色悬浮态                                             |
| --ibiz-color-danger-light-active  | rgba(var(--ibiz-red-2), 1) | 浅版危险色激活态                                             |

### 文本与图标颜色 - text

四个不同层级的文本/图标颜色，依次代表产品界面中最主要、次主要、稍次要和最次要的内容

| 变量                   | 默认值                      | 用法                          |
| :--------------------- | :-------------------------- | :---------------------------- |
| --ibiz-color-text-0    | \#333                       | 文本/图标颜色 - 最主要        |
| --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    | rgba(var(--ibiz-white), 1)  | 文本色(特殊) - 应用搜索框使用 |
| --ibiz-color-text-menu | rgba(var(--ibiz-white), 1)  | 文本 - 特殊-菜单颜色          |

### 图标颜色

主要用于应用头中的图标颜色

| 变量                | 默认值                 | 用法            |
| ------------------- | ---------------------- | --------------- |
| --ibiz-color-icon-0 | rgb(204 204 204 / 60%) | 图标颜色 - 主要 |
| --ibiz-color-icon-1 | \#707078               | 图标颜色 - 次要 |

### 链接色 - link

用于产品中超链接的文本

| 变量                      | 默认值                           | 用法              |
| :------------------------ | :------------------------------- | :---------------- |
| --ibiz-color-link         | --ibiz-color-primary             | 链接颜色          |
| --ibiz-color-link-hover   | \#8cc8ff                         | 链接颜色 - 悬浮态 |
| --ibiz-color-link-active  | --ibiz-color-primary-active      | 链接颜色 - 激活态 |
| --ibiz-color-link-visited | rgba(var(--ibiz-blue-cyan-5), 1) | 链接颜色 - 已访问 |

### 背景色 - bg

应用中各级背景色，包括容器、菜单、导航栏等。在暗色模式下，我们通常用背景色来区分前后层级

| 变量                    | 默认值                     | 用法                                    |
| :---------------------- | :------------------------- | :-------------------------------------- |
| --ibiz-color-bg-0       | \#E8E5E5                   | 背景色 - 最下层（底部页面）             |
| --ibiz-color-bg-1       | \#eff1f2                   | 背景色 - 次下层（页面中需要提升的内容） |
| --ibiz-color-bg-2       | rgba(var(--ibiz-white), 1) | 背景色 - 中间层（模态等容器）           |
| --ibiz-color-bg-3       | \#e3e5e8                   | 背景色 - 次上层（通知，Toast 等）       |
| --ibiz-color-bg-4       | rgba(var(--ibiz-white), 1) | 背景色 - 最上层（特殊）                 |
| --ibiz-color-bg-5       | rgb(204 204 204 / 60%)     | 背景色(特殊) - 应用搜索框使用           |
| --ibiz-color-bg-overlay | rgb(0 0 0 / 10%)           | 蒙层背景色                              |

### 填充色 - fill

对于一个元素，如果其所处的容器背景颜色不固定，且这个元素的填充色与最上层背景色的对比度比较小，使用填充色作为 backgroundColor，确保这个元素不会“融于”某一级别背景颜色中，如表单控件。

| 变量                     | 默认值                        | 用法                         |
| :----------------------- | :---------------------------- | :--------------------------- |
| --ibiz-color-fill-0      | \#e1e4e5                      | 填充色 - 默认态              |
| --ibiz-color-fill-1      | rgba(var(--ibiz-grey-8), .1)  | 填充色 - 悬浮态              |
| --ibiz-color-fill-2      | rgba(var(--ibiz-grey-8), .13) | 填充色 - 激活态              |
| --ibiz-color-scroll-menu | \#53565d                      | 填充色 - 特殊-菜单滚动条颜色 |

### 描边色 - border

界面中带有描边属性的颜色

| 变量                      | 默认值   | 用法                |
| :------------------------ | :------- | :------------------ |
| --ibiz-color-border       | \#e4e7ed | 默认描边颜色        |
| --ibiz-color-border-hover | \#badeff | 悬浮描边色          |
| --ibiz-color-border-2     | \#333    | 特殊-编辑器边框颜色 |

### 禁用态 - disabled

用于界面中各类表达禁用的元素填充，如背景、文本、描边、填充等

| 变量                         | 默认值                        | 用法          |
| :--------------------------- | :---------------------------- | :------------ |
| --ibiz-color-disabled-text   | rgba(var(--ibiz-grey-9), .35) | 禁用态 - 文字 |
| --ibiz-color-disabled-border | \#333                         | 禁用态 - 描边 |
| --ibiz-color-disabled-bg     | rgba(var(--ibiz-grey-1), 1)   | 禁用态 - 背景 |
| --ibiz-color-disabled-fill   | \#e1e4e5                      | 禁用态 - 填充 |

## 阴影

阴影通常用来表达界面元素的层级，阴影越重的元素距离用户越近

| 变量                   | 默认值                                                  | 用法                                                |
| :--------------------- | :------------------------------------------------------ | :-------------------------------------------------- |
| --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    | 10px   | 小文本字号   |
| --ibiz-font-size-regular  | 12px   | 常规文本字号 |
| --ibiz-font-size-header-6 | 14px   | 六级标题字号 |
| --ibiz-font-size-header-5 | 16px   | 五级标题字号 |
| --ibiz-font-size-header-4 | 18px   | 四级标题字号 |
| --ibiz-font-size-header-3 | 20px   | 三级标题字号 |
| --ibiz-font-size-header-2 | 24px   | 二级标题字号 |
| --ibiz-font-size-header-1 | 28px   | 一级标题字号 |


## 字重


决定不同层级文本的粗细

| 变量                       | 默认值 | 用法        |
| :------------------------- | :----- | :---------- |
| --ibiz-font-weight-light   | 200    | 字重 - 轻   |
| --ibiz-font-weight-regular | 400    | 字重 - 常规 |
| --ibiz-font-weight-bold    | 800    | 字重 - 加粗 |

## 圆角


使用圆角来描述容器与界面元素的轮廓，从一定程度决定产品的视觉调性

| 变量                             | 默认值 | 用法                                                    |
| :------------------------------- | :----- | :------------------------------------------------------ |
| --ibiz-border-radius-extra-small | 2.5px  | 超小圆角，用于 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   | 16px   | 表单项高度 - 小尺寸   |
| --ibiz-height-control-default | 24px   | 表单项高度 - 默认尺寸 |
| --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   | 间距 - 极宽松尺寸内/外边距         |

## 编辑

编辑器变量被应用在各个编辑器内部，用来调整编辑器的样式

| 变量                                    | 默认值                           | 用法               |
| :-------------------------------------- | :------------------------------- | :----------------- |
| --ibiz-editor-default-placeholder-color | --ibiz-color-text-2              | 编辑器默认占位颜色 |
| --ibiz-editor-default-line-height       | --ibiz-height-control-default    | 编辑器默认行高     |
| --ibiz-editor-default-text-size         | --ibiz-font-size-regular         | 编辑器默认文字大小 |
| --ibiz-editor-default-text-color        | --ibiz-color-text-0              | 编辑器默认文字颜色 |
| --ibiz-editor-default-bg-color          | --ibiz-color-white               | 编辑器默认背景颜色 |
| --ibiz-editor-default-border-color      | --ibiz-color-border-2            | 编辑器默认边框颜色 |
| --ibiz-editor-hover-bg-color            | --ibiz-color-fill-1              | 编辑器悬浮背景颜色 |
| --ibiz-editor-hover-border-color        | --ibiz-color-border-2            | 编辑器悬浮边框颜色 |
| --ibiz-editor-active-bg-color           | --ibiz-color-fill-2              | 编辑器激活背景颜色 |
| --ibiz-editor-active-border-color       | --ibiz-color-border-2            | 编辑器激活边框颜色 |
| --ibiz-editor-focus-bg-color            | --ibiz-color-fill-0              | 编辑器选中背景颜色 |
| --ibiz-editor-focus-border-color        | --ibiz-color-border-2            | 编辑器选中边框颜色 |
| --ibiz-editor-focus-bg-color            | --ibiz-color-fill-0              | 编辑器选中背景颜色 |
| --ibiz-editor-focus-border-color        | --ibiz-color-border-2            | 编辑器选中边框颜色 |
| --ibiz-editor-disabled-text-color       | --ibiz-color-disabled-text       | 编辑器禁用文本颜色 |
| --ibiz-editor-disabled-bg-color         | --ibiz-color-disabled-fill       | 编辑器禁用背景颜色 |
| --ibiz-editor-disabled-border-color     | --ibiz-color-border-2            | 编辑器禁用边框颜色 |
| --ibiz-editor-readonly-text-color       | --ibiz-editor-default-text-color | 编辑器只读文本颜色 |
| --ibiz-editor-readonly-bg-color         | --ibiz-editor-default-bg-color   | 编辑器只读背景颜色 |
| --ibiz-editor-readonly-border-color     | --ibiz-color-border-2            | 编辑器只读边框颜色 |