Repository: Tencent/tdesign-mobile-vue
Pull request #944 (2023-07-11 10:17:56)

chore: add css variables content for api docs
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue
### 相关 PR
common: 
https://github.com/Tencent/tdesign-common/pull/1527
https://github.com/Tencent/tdesign-common/pull/1528

### 其他说明
form、list、table、swipe-cell 组件未抽离变量，sticky 组件无css variable

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- site: API文档新增 `css variables` 内容

- [x] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


github-actions[bot]: **Size Change:** 0 B 

**Total Size:** 387 kB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.4 kB |
| `./dist/tdesign.js` | 204 kB |
| `./dist/tdesign.min.css` | 27.1 kB |
| `./dist/tdesign.min.js` | 118 kB |

</details>


github-actions[bot]: <a href="https://preview-pr944-tdesign-mobile-vue.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/5518763951) -->
<!-- AUTO_PREVIEW_HOOK -->
github-actions[bot]: **Size Change:** 0 B 

**Total Size:** 387 kB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.4 kB |
| `./dist/tdesign.js` | 204 kB |
| `./dist/tdesign.min.css` | 27.1 kB |
| `./dist/tdesign.min.js` | 118 kB |

</details>


github-actions[bot]: **Size Change:** 0 B 

**Total Size:** 387 kB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.5 kB |
| `./dist/tdesign.js` | 204 kB |
| `./dist/tdesign.min.css` | 27.2 kB |
| `./dist/tdesign.min.js` | 118 kB |

</details>


github-actions[bot]: **Size Change:** 0 B 

**Total Size:** 387 kB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.5 kB |
| `./dist/tdesign.js` | 204 kB |
| `./dist/tdesign.min.css` | 27.2 kB |
| `./dist/tdesign.min.js` | 118 kB |

</details>


github-actions[bot]: **Size Change:** 0 B 

**Total Size:** 387 kB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.5 kB |
| `./dist/tdesign.js` | 204 kB |
| `./dist/tdesign.min.css` | 27.2 kB |
| `./dist/tdesign.min.js` | 118 kB |

</details>


github-actions[bot]: **Size Change:** 0 B 

**Total Size:** 387 kB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.5 kB |
| `./dist/tdesign.js` | 204 kB |
| `./dist/tdesign.min.css` | 27.2 kB |
| `./dist/tdesign.min.js` | 118 kB |

</details>


github-actions[bot]: **Size Change:** 0 B 

**Total Size:** 387 kB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.5 kB |
| `./dist/tdesign.js` | 204 kB |
| `./dist/tdesign.min.css` | 27.2 kB |
| `./dist/tdesign.min.js` | 118 kB |

</details>


github-actions[bot]: **Size Change:** 0 B 

**Total Size:** 387 kB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.5 kB |
| `./dist/tdesign.js` | 204 kB |
| `./dist/tdesign.min.css` | 27.2 kB |
| `./dist/tdesign.min.js` | 118 kB |

</details>


github-actions[bot]: **Size Change:** 0 B 

**Total Size:** 387 kB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.5 kB |
| `./dist/tdesign.js` | 204 kB |
| `./dist/tdesign.min.css` | 27.2 kB |
| `./dist/tdesign.min.js` | 118 kB |

</details>


github-actions[bot]: **Size Change:** 0 B 

**Total Size:** 387 kB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.5 kB |
| `./dist/tdesign.js` | 204 kB |
| `./dist/tdesign.min.css` | 27.2 kB |
| `./dist/tdesign.min.js` | 118 kB |

</details>


github-actions[bot]: **Size Change:** 0 B 

**Total Size:** 387 kB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 37.5 kB |
| `./dist/tdesign.js` | 204 kB |
| `./dist/tdesign.min.css` | 27.2 kB |
| `./dist/tdesign.min.js` | 118 kB |

</details>



Patch:
diff --git a/package.json b/package.json
index a9a57e75..5e9e0391 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "lint:fix-prettier": "prettier ./ --ignore-path .gitignore --ignore-path .eslintignore --write './*.{vue,ts,tsx}' --ignore-unknown",
     "lint:vue": "vue-tsc --noEmit -p tsconfig.build.json",
     "update:coverage-badge": "node scripts/test/generate-coverage.js",
+    "update:css": "node scripts/test/generate-css-vars.js",
     "changelog": "publish-cli changelog",
     "robot": "publish-cli robot-msg",
     "commit": "git-cz"
diff --git a/src/_common b/src/_common
index 07581c69..daea5733 160000
--- a/src/_common
+++ b/src/_common
@@ -1,1 +1,1 @@
-Subproject commit 07581c69fc029a7eb7560af0e1131878f5b88ae9
+Subproject commit daea573340143dc814667df44d9738517a0f4a0b
diff --git a/src/action-sheet/action-sheet.en-US.md b/src/action-sheet/action-sheet.en-US.md
index e7ecb3f2..46fa53e9 100644
--- a/src/action-sheet/action-sheet.en-US.md
+++ b/src/action-sheet/action-sheet.en-US.md
@@ -26,3 +26,21 @@ name | params | description
 cancel | `(context: { e: MouseEvent })` | \-
 close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-action-sheet-border-color | @gray-color-1 | - 
+--td-action-sheet-border-radius | @radius-extra-large | - 
+--td-action-sheet-cancel-height | 48px | - 
+--td-action-sheet-color | @font-gray-1 | - 
+--td-action-sheet-description-color | @font-gray-3 | - 
+--td-action-sheet-dot-active-color | @brand-color | - 
+--td-action-sheet-dot-color | @font-gray-4 | - 
+--td-action-sheet-dot-size | 8px | - 
+--td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
+--td-action-sheet-list-item-height | 56px | - 
+--td-action-sheet-text-align | center | - 
+--td-action-sheet-text-weight | 400 | - 
diff --git a/src/action-sheet/action-sheet.md b/src/action-sheet/action-sheet.md
index 998e4630..9f702656 100644
--- a/src/action-sheet/action-sheet.md
+++ b/src/action-sheet/action-sheet.md
@@ -25,3 +25,21 @@ onSelected | Function |  | TS 类型：`(selected: ActionSheetItem \| string, in
 cancel | `(context: { e: MouseEvent })` | 点击取消按钮时触发
 close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-action-sheet-border-color | @gray-color-1 | - 
+--td-action-sheet-border-radius | @radius-extra-large | - 
+--td-action-sheet-cancel-height | 48px | - 
+--td-action-sheet-color | @font-gray-1 | - 
+--td-action-sheet-description-color | @font-gray-3 | - 
+--td-action-sheet-dot-active-color | @brand-color | - 
+--td-action-sheet-dot-color | @font-gray-4 | - 
+--td-action-sheet-dot-size | 8px | - 
+--td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
+--td-action-sheet-list-item-height | 56px | - 
+--td-action-sheet-text-align | center | - 
+--td-action-sheet-text-weight | 400 | - 
diff --git a/src/avatar/avatar.en-US.md b/src/avatar/avatar.en-US.md
index 7544056f..1235d74b 100644
--- a/src/avatar/avatar.en-US.md
+++ b/src/avatar/avatar.en-US.md
@@ -29,3 +29,30 @@ cascading | String | 'right-up' | multiple images cascading。options：left-up/
 collapseAvatar | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 max | Number | - | \- | N
 size | String | medium | size | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-avatar-group-margin-left-large | -8px | - 
+--td-avatar-group-margin-left-medium | -6px | - 
+--td-avatar-group-margin-left-small | -4px | - 
+--td-avatar-bg-color | @brand-color-light-active | - 
+--td-avatar-border-color | #fff | - 
+--td-avatar-border-width-large | 4px | - 
+--td-avatar-border-width-medium | 3px | - 
+--td-avatar-border-width-small | 2px | - 
+--td-avatar-circle-border-radius | @radius-circle | - 
+--td-avatar-content-color | @brand-color | - 
+--td-avatar-icon-large-font-size | 32px | - 
+--td-avatar-icon-medium-font-size | 24px | - 
+--td-avatar-icon-small-font-size | 20px | - 
+--td-avatar-large-width | 64px | - 
+--td-avatar-margin-left | 0 | - 
+--td-avatar-medium-width | 48px | - 
+--td-avatar-round-border-radius | @radius-default | - 
+--td-avatar-small-width | 40px | - 
+--td-avatar-text-large-font-size | 16px | - 
+--td-avatar-text-medium-font-size | @font-size-base | - 
+--td-avatar-text-small-font-size | @font-size-s | - 
diff --git a/src/avatar/avatar.md b/src/avatar/avatar.md
index e03270a0..d4183055 100644
--- a/src/avatar/avatar.md
+++ b/src/avatar/avatar.md
@@ -29,3 +29,30 @@ cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左
 collapseAvatar | String / Slot / Function | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 max | Number | - | 能够同时显示的最多头像数量 | N
 size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-avatar-group-margin-left-large | -8px | - 
+--td-avatar-group-margin-left-medium | -6px | - 
+--td-avatar-group-margin-left-small | -4px | - 
+--td-avatar-bg-color | @brand-color-light-active | - 
+--td-avatar-border-color | #fff | - 
+--td-avatar-border-width-large | 4px | - 
+--td-avatar-border-width-medium | 3px | - 
+--td-avatar-border-width-small | 2px | - 
+--td-avatar-circle-border-radius | @radius-circle | - 
+--td-avatar-content-color | @brand-color | - 
+--td-avatar-icon-large-font-size | 32px | - 
+--td-avatar-icon-medium-font-size | 24px | - 
+--td-avatar-icon-small-font-size | 20px | - 
+--td-avatar-large-width | 64px | - 
+--td-avatar-margin-left | 0 | - 
+--td-avatar-medium-width | 48px | - 
+--td-avatar-round-border-radius | @radius-default | - 
+--td-avatar-small-width | 40px | - 
+--td-avatar-text-large-font-size | 16px | - 
+--td-avatar-text-medium-font-size | @font-size-base | - 
+--td-avatar-text-small-font-size | @font-size-s | - 
diff --git a/src/back-top/back-top.en-US.md b/src/back-top/back-top.en-US.md
index 98a9c262..bececb01 100644
--- a/src/back-top/back-top.en-US.md
+++ b/src/back-top/back-top.en-US.md
@@ -17,3 +17,17 @@ onToTop | Function |  | Typescript：`() => void`<br/> | N
 name | params | description
 -- | -- | --
 to-top | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-back-top-half-round-border-radius | @radius-round | - 
+--td-back-top-round-bg-color | @font-white-1 | - 
+--td-back-top-round-border-color | @component-border | - 
+--td-back-top-round-border-color | @gray-color-9 | - 
+--td-back-top-round-border-radius | @radius-circle | - 
+--td-back-top-round-color | @font-gray-1 | - 
+--td-back-top-round-dark-bg-color | @gray-color-14 | - 
+--td-back-top-round-dark-color | @font-white-1 | - 
diff --git a/src/back-top/back-top.md b/src/back-top/back-top.md
index 8cc6f408..673d59fe 100644
--- a/src/back-top/back-top.md
+++ b/src/back-top/back-top.md
@@ -17,3 +17,17 @@ onToTop | Function |  | TS 类型：`() => void`<br/>点击触发 | N
 名称 | 参数 | 描述
 -- | -- | --
 to-top | \- | 点击触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-back-top-half-round-border-radius | @radius-round | - 
+--td-back-top-round-bg-color | @font-white-1 | - 
+--td-back-top-round-border-color | @component-border | - 
+--td-back-top-round-border-color | @gray-color-9 | - 
+--td-back-top-round-border-radius | @radius-circle | - 
+--td-back-top-round-color | @font-gray-1 | - 
+--td-back-top-round-dark-bg-color | @gray-color-14 | - 
+--td-back-top-round-dark-color | @font-white-1 | - 
diff --git a/src/badge/badge.en-US.md b/src/badge/badge.en-US.md
index 835a00b1..ac11cd70 100644
--- a/src/badge/badge.en-US.md
+++ b/src/badge/badge.en-US.md
@@ -14,3 +14,22 @@ offset | Array | - | Typescript：`Array<string \| number>` | N
 shape | String | circle | options：circle/square/bubble/ribbon | N
 showZero | Boolean | false | \- | N
 size | String | medium | options：medium/large | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-badge-basic-height | 16px | - 
+--td-badge-basic-padding | 4px | - 
+--td-badge-basic-width | 16px | - 
+--td-badge-bg-color | @error-color | - 
+--td-badge-border-radius | 2px | - 
+--td-badge-bubble-border-radius | 10px 10px 10px 1px | - 
+--td-badge-dot-size | 8px | - 
+--td-badge-font-size | @font-size-xs | - 
+--td-badge-font-weight | 600 | - 
+--td-badge-large-font-size | @font-size-s | - 
+--td-badge-large-height | 20px | - 
+--td-badge-large-padding | 5px | - 
+--td-badge-text-color | @font-white-1 | - 
diff --git a/src/badge/badge.md b/src/badge/badge.md
index 925da33c..6d605433 100644
--- a/src/badge/badge.md
+++ b/src/badge/badge.md
@@ -14,3 +14,22 @@ offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['1
 shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
 showZero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
 size | String | medium | 尺寸。可选项：medium/large | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-badge-basic-height | 16px | - 
+--td-badge-basic-padding | 4px | - 
+--td-badge-basic-width | 16px | - 
+--td-badge-bg-color | @error-color | - 
+--td-badge-border-radius | 2px | - 
+--td-badge-bubble-border-radius | 10px 10px 10px 1px | - 
+--td-badge-dot-size | 8px | - 
+--td-badge-font-size | @font-size-xs | - 
+--td-badge-font-weight | 600 | - 
+--td-badge-large-font-size | @font-size-s | - 
+--td-badge-large-height | 20px | - 
+--td-badge-large-padding | 5px | - 
+--td-badge-text-color | @font-white-1 | - 
diff --git a/src/button/button.en-US.md b/src/button/button.en-US.md
index 3b073a90..00adaf2d 100644
--- a/src/button/button.en-US.md
+++ b/src/button/button.en-US.md
@@ -25,3 +25,108 @@ onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on cl
 name | params | description
 -- | -- | --
 click | `(e: MouseEvent)` | trigger on click
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-button-border-radius | @radius-default | - 
+--td-button-border-width | 2px | - 
+--td-button-danger-active-bg-color | @error-color-7 | - 
+--td-button-danger-active-border-color | @error-color-7 | - 
+--td-button-danger-bg-color | @error-color | - 
+--td-button-danger-border-color | @error-color | - 
+--td-button-danger-color | @font-white-1 | - 
+--td-button-danger-dashed-border-color | @button-danger-dashed-color | - 
+--td-button-danger-dashed-color | @error-color | - 
+--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - 
+--td-button-danger-disabled-bg | @error-color-3 | - 
+--td-button-danger-disabled-border-color | @error-color-3 | - 
+--td-button-danger-disabled-color | @font-white-1 | - 
+--td-button-danger-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-danger-outline-active-border-color | @error-color-7 | - 
+--td-button-danger-outline-border-color | @button-danger-outline-color | - 
+--td-button-danger-outline-color | @error-color | - 
+--td-button-danger-outline-disabled-color | @error-color-3 | - 
+--td-button-danger-text-active-bg-color | @bg-color-container-active | - 
+--td-button-danger-text-color | @error-color | - 
+--td-button-danger-text-disabled-color | @button-danger-disabled-color | - 
+--td-button-default-active-bg-color | @bg-color-component-active | - 
+--td-button-default-active-border-color | @bg-color-component-active | - 
+--td-button-default-bg-color | @bg-color-component | - 
+--td-button-default-border-color | @bg-color-component | - 
+--td-button-default-color | @font-gray-1 | - 
+--td-button-default-disabled-bg | @bg-color-component-disabled | - 
+--td-button-default-disabled-border-color | @bg-color-component-disabled | - 
+--td-button-default-disabled-color | @font-gray-4 | - 
+--td-button-default-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-default-outline-active-border-color | @component-border | - 
+--td-button-default-outline-border-color | @component-border | - 
+--td-button-default-outline-color | @font-gray-1 | - 
+--td-button-default-outline-disabled-color | @component-border | - 
+--td-button-default-text-active-bg-color | @bg-color-container-active | - 
+--td-button-extra-small-font-size | @font-size-base | - 
+--td-button-extra-small-height | 28px | - 
+--td-button-extra-small-icon-font-size | 18px | - 
+--td-button-extra-small-padding-horizontal | 8px | - 
+--td-button-font-weight | 600 | - 
+--td-button-ghost-border-color | @button-ghost-color | - 
+--td-button-ghost-color | @bg-color-container | - 
+--td-button-ghost-danger-border-color | @error-color | - 
+--td-button-ghost-danger-color | @error-color | - 
+--td-button-ghost-danger-hover-color | @error-color-active | - 
+--td-button-ghost-disabled-color | rgba(255, 255, 255, .35) | - 
+--td-button-ghost-hover-color | @font-white-2 | - 
+--td-button-ghost-primary-border-color | @brand-color | - 
+--td-button-ghost-primary-color | @brand-color | - 
+--td-button-ghost-primary-hover-color | @brand-color-active | - 
+--td-button-icon-border-radius | 4px | - 
+--td-button-icon-spacer | @spacer | - 
+--td-button-large-font-size | @font-size-m | - 
+--td-button-large-height | 48px | - 
+--td-button-large-icon-font-size | 24px | - 
+--td-button-large-padding-horizontal | 20px | - 
+--td-button-light-active-bg-color | @brand-color-light-active | - 
+--td-button-light-active-border-color | @brand-color-light-active | - 
+--td-button-light-bg-color | @brand-color-light | - 
+--td-button-light-border-color | @brand-color-light | - 
+--td-button-light-color | @brand-color | - 
+--td-button-light-disabled-bg | @brand-color-light | - 
+--td-button-light-disabled-border-color | @brand-color-light | - 
+--td-button-light-disabled-color | @brand-color-disabled | - 
+--td-button-light-outline-active-bg-color | @brand-color-light-active | - 
+--td-button-light-outline-active-border-color | @brand-color-active | - 
+--td-button-light-outline-bg-color | @brand-color-light | - 
+--td-button-light-outline-border-color | @button-light-outline-color | - 
+--td-button-light-outline-color | @brand-color | - 
+--td-button-light-outline-disabled-color | @brand-color-disabled | - 
+--td-button-light-text-active-bg-color | @bg-color-container-active | - 
+--td-button-light-text-color | @brand-color | - 
+--td-button-medium-font-size | @font-size-m | - 
+--td-button-medium-height | 40px | - 
+--td-button-medium-icon-font-size | 20px | - 
+--td-button-medium-padding-horizontal | 16px | - 
+--td-button-primary-active-bg-color | @brand-color-active | - 
+--td-button-primary-active-border-color | @brand-color-active | - 
+--td-button-primary-bg-color | @brand-color | - 
+--td-button-primary-border-color | @brand-color | - 
+--td-button-primary-color | @font-white-1 | - 
+--td-button-primary-dashed-border-color | @button-primary-dashed-color | - 
+--td-button-primary-dashed-color | @brand-color | - 
+--td-button-primary-dashed-disabled-color | @brand-color-disabled | - 
+--td-button-primary-disabled-bg | @brand-color-disabled | - 
+--td-button-primary-disabled-border-color | @brand-color-disabled | - 
+--td-button-primary-disabled-color | @font-white-1 | - 
+--td-button-primary-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-primary-outline-active-border-color | @brand-color-active | - 
+--td-button-primary-outline-border-color | @button-primary-outline-color | - 
+--td-button-primary-outline-color | @brand-color | - 
+--td-button-primary-outline-disabled-color | @brand-color-disabled | - 
+--td-button-primary-text-active-bg-color | @bg-color-container-active | - 
+--td-button-primary-text-color | @brand-color | - 
+--td-button-primary-text-disabled-color | @brand-color-disabled | - 
+--td-button-small-font-size | @font-size-base | - 
+--td-button-small-height | 32px | - 
+--td-button-small-icon-font-size | 18px | - 
+--td-button-small-padding-horizontal | 12px | - 
diff --git a/src/button/button.md b/src/button/button.md
index 11ba63c9..28081cd9 100644
--- a/src/button/button.md
+++ b/src/button/button.md
@@ -25,3 +25,108 @@ onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触
 名称 | 参数 | 描述
 -- | -- | --
 click | `(e: MouseEvent)` | 点击时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-button-border-radius | @radius-default | - 
+--td-button-border-width | 2px | - 
+--td-button-danger-active-bg-color | @error-color-7 | - 
+--td-button-danger-active-border-color | @error-color-7 | - 
+--td-button-danger-bg-color | @error-color | - 
+--td-button-danger-border-color | @error-color | - 
+--td-button-danger-color | @font-white-1 | - 
+--td-button-danger-dashed-border-color | @button-danger-dashed-color | - 
+--td-button-danger-dashed-color | @error-color | - 
+--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - 
+--td-button-danger-disabled-bg | @error-color-3 | - 
+--td-button-danger-disabled-border-color | @error-color-3 | - 
+--td-button-danger-disabled-color | @font-white-1 | - 
+--td-button-danger-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-danger-outline-active-border-color | @error-color-7 | - 
+--td-button-danger-outline-border-color | @button-danger-outline-color | - 
+--td-button-danger-outline-color | @error-color | - 
+--td-button-danger-outline-disabled-color | @error-color-3 | - 
+--td-button-danger-text-active-bg-color | @bg-color-container-active | - 
+--td-button-danger-text-color | @error-color | - 
+--td-button-danger-text-disabled-color | @button-danger-disabled-color | - 
+--td-button-default-active-bg-color | @bg-color-component-active | - 
+--td-button-default-active-border-color | @bg-color-component-active | - 
+--td-button-default-bg-color | @bg-color-component | - 
+--td-button-default-border-color | @bg-color-component | - 
+--td-button-default-color | @font-gray-1 | - 
+--td-button-default-disabled-bg | @bg-color-component-disabled | - 
+--td-button-default-disabled-border-color | @bg-color-component-disabled | - 
+--td-button-default-disabled-color | @font-gray-4 | - 
+--td-button-default-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-default-outline-active-border-color | @component-border | - 
+--td-button-default-outline-border-color | @component-border | - 
+--td-button-default-outline-color | @font-gray-1 | - 
+--td-button-default-outline-disabled-color | @component-border | - 
+--td-button-default-text-active-bg-color | @bg-color-container-active | - 
+--td-button-extra-small-font-size | @font-size-base | - 
+--td-button-extra-small-height | 28px | - 
+--td-button-extra-small-icon-font-size | 18px | - 
+--td-button-extra-small-padding-horizontal | 8px | - 
+--td-button-font-weight | 600 | - 
+--td-button-ghost-border-color | @button-ghost-color | - 
+--td-button-ghost-color | @bg-color-container | - 
+--td-button-ghost-danger-border-color | @error-color | - 
+--td-button-ghost-danger-color | @error-color | - 
+--td-button-ghost-danger-hover-color | @error-color-active | - 
+--td-button-ghost-disabled-color | rgba(255, 255, 255, .35) | - 
+--td-button-ghost-hover-color | @font-white-2 | - 
+--td-button-ghost-primary-border-color | @brand-color | - 
+--td-button-ghost-primary-color | @brand-color | - 
+--td-button-ghost-primary-hover-color | @brand-color-active | - 
+--td-button-icon-border-radius | 4px | - 
+--td-button-icon-spacer | @spacer | - 
+--td-button-large-font-size | @font-size-m | - 
+--td-button-large-height | 48px | - 
+--td-button-large-icon-font-size | 24px | - 
+--td-button-large-padding-horizontal | 20px | - 
+--td-button-light-active-bg-color | @brand-color-light-active | - 
+--td-button-light-active-border-color | @brand-color-light-active | - 
+--td-button-light-bg-color | @brand-color-light | - 
+--td-button-light-border-color | @brand-color-light | - 
+--td-button-light-color | @brand-color | - 
+--td-button-light-disabled-bg | @brand-color-light | - 
+--td-button-light-disabled-border-color | @brand-color-light | - 
+--td-button-light-disabled-color | @brand-color-disabled | - 
+--td-button-light-outline-active-bg-color | @brand-color-light-active | - 
+--td-button-light-outline-active-border-color | @brand-color-active | - 
+--td-button-light-outline-bg-color | @brand-color-light | - 
+--td-button-light-outline-border-color | @button-light-outline-color | - 
+--td-button-light-outline-color | @brand-color | - 
+--td-button-light-outline-disabled-color | @brand-color-disabled | - 
+--td-button-light-text-active-bg-color | @bg-color-container-active | - 
+--td-button-light-text-color | @brand-color | - 
+--td-button-medium-font-size | @font-size-m | - 
+--td-button-medium-height | 40px | - 
+--td-button-medium-icon-font-size | 20px | - 
+--td-button-medium-padding-horizontal | 16px | - 
+--td-button-primary-active-bg-color | @brand-color-active | - 
+--td-button-primary-active-border-color | @brand-color-active | - 
+--td-button-primary-bg-color | @brand-color | - 
+--td-button-primary-border-color | @brand-color | - 
+--td-button-primary-color | @font-white-1 | - 
+--td-button-primary-dashed-border-color | @button-primary-dashed-color | - 
+--td-button-primary-dashed-color | @brand-color | - 
+--td-button-primary-dashed-disabled-color | @brand-color-disabled | - 
+--td-button-primary-disabled-bg | @brand-color-disabled | - 
+--td-button-primary-disabled-border-color | @brand-color-disabled | - 
+--td-button-primary-disabled-color | @font-white-1 | - 
+--td-button-primary-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-primary-outline-active-border-color | @brand-color-active | - 
+--td-button-primary-outline-border-color | @button-primary-outline-color | - 
+--td-button-primary-outline-color | @brand-color | - 
+--td-button-primary-outline-disabled-color | @brand-color-disabled | - 
+--td-button-primary-text-active-bg-color | @bg-color-container-active | - 
+--td-button-primary-text-color | @brand-color | - 
+--td-button-primary-text-disabled-color | @brand-color-disabled | - 
+--td-button-small-font-size | @font-size-base | - 
+--td-button-small-height | 32px | - 
+--td-button-small-icon-font-size | 18px | - 
+--td-button-small-padding-horizontal | 12px | - 
diff --git a/src/calendar/calendar.en-US.md b/src/calendar/calendar.en-US.md
index 14df283f..5daed0d3 100644
--- a/src/calendar/calendar.en-US.md
+++ b/src/calendar/calendar.en-US.md
@@ -29,3 +29,19 @@ change | `(value: Date)` | \-
 close | `(trigger: CalendarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
 confirm | `(value: Date)` | \-
 select | `(value: Date)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-calendar-active-color | @brand-color | - 
+--td-calendar-bg-color | @bg-color-container | - 
+--td-calendar-days-color | @font-gray-2 | - 
+--td-calendar-item-centre-color | @brand-color-light | - 
+--td-calendar-item-disabled-color | @font-gray-4 | - 
+--td-calendar-item-suffix-color | @font-gray-3 | - 
+--td-calendar-radius | 12px | - 
+--td-calendar-selected-color | @font-white-1 | - 
+--td-calendar-title-color | @font-gray-1 | - 
+--td-calendar-title-font-size | 18px | - 
diff --git a/src/calendar/calendar.md b/src/calendar/calendar.md
index 00a919f8..0e21d110 100644
--- a/src/calendar/calendar.md
+++ b/src/calendar/calendar.md
@@ -30,3 +30,19 @@ change | `(value: Date)` | 不显示 confirm-btn 时，完成选择时触发（
 close | `(trigger: CalendarTrigger)` | 关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
 confirm | `(value: Date)` | 点击确认按钮时触发
 select | `(value: Date)` | 点击日期时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-calendar-active-color | @brand-color | - 
+--td-calendar-bg-color | @bg-color-container | - 
+--td-calendar-days-color | @font-gray-2 | - 
+--td-calendar-item-centre-color | @brand-color-light | - 
+--td-calendar-item-disabled-color | @font-gray-4 | - 
+--td-calendar-item-suffix-color | @font-gray-3 | - 
+--td-calendar-radius | 12px | - 
+--td-calendar-selected-color | @font-white-1 | - 
+--td-calendar-title-color | @font-gray-1 | - 
+--td-calendar-title-font-size | 18px | - 
diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md
index 7d81af80..a0cc98c9 100644
--- a/src/cascader/cascader.en-US.md
+++ b/src/cascader/cascader.en-US.md
@@ -26,3 +26,19 @@ name | params | description
 change | `(value: string \| number, selectedOptions: string[])` | \-
 close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
 pick | `(context: { level: number, value: string \| number, index: number })` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-cascader-active-color | @brand-color | - 
+--td-cascader-border-color | @border-color | - 
+--td-cascader-disabled-color | @font-gray-4 | - 
+--td-cascader-options-height | 320px | - 
+--td-cascader-options-title-color | @font-gray-3 | - 
+--td-cascader-step-arrow-color | @font-gray-3 | - 
+--td-cascader-step-dot-size | 8px | - 
+--td-cascader-step-height | 44px | - 
+--td-cascader-title-color | @font-gray-1 | - 
+--td-cascder-title-font-size | 18px | - 
diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md
index 77bc522c..d1d8ef68 100644
--- a/src/cascader/cascader.md
+++ b/src/cascader/cascader.md
@@ -25,3 +25,19 @@ onPick | Function |  | TS 类型：`(context: { level: number, value: string \|
 change | `(value: string \| number, selectedOptions: string[])` | 值发生变更时触发
 close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
 pick | `(context: { level: number, value: string \| number, index: number })` | 选择后触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-cascader-active-color | @brand-color | - 
+--td-cascader-border-color | @border-color | - 
+--td-cascader-disabled-color | @font-gray-4 | - 
+--td-cascader-options-height | 320px | - 
+--td-cascader-options-title-color | @font-gray-3 | - 
+--td-cascader-step-arrow-color | @font-gray-3 | - 
+--td-cascader-step-dot-size | 8px | - 
+--td-cascader-step-height | 44px | - 
+--td-cascader-title-color | @font-gray-1 | - 
+--td-cascder-title-font-size | 18px | - 
diff --git a/src/cell/cell.en-US.md b/src/cell/cell.en-US.md
index 0d8fe7f3..ef91b8aa 100644
--- a/src/cell/cell.en-US.md
+++ b/src/cell/cell.en-US.md
@@ -31,3 +31,39 @@ name | type | default | description | required
 bordered | Boolean | - | \- | N
 theme | String | default | `0.15.0`。options：default/card | N
 title | String | - | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-cell-bg-color | @bg-color-container | - 
+--td-cell-border-color | @component-stroke | - 
+--td-cell-border-left-space | @cell-horizontal-padding | - 
+--td-cell-border-right-space | 0 | - 
+--td-cell-description-color | @font-gray-2 | - 
+--td-cell-description-font-size | @font-size-base | - 
+--td-cell-description-line-height | 22px | - - 
+--td-cell-height | auto | - 
+--td-cell-horizontal-padding | 16px | - 
+--td-cell-hover-color | @bg-color-secondarycontainer | - 
+--td-cell-image-height | 48px | - 
+--td-cell-image-width | 48px | - 
+--td-cell-left-icon-color | @brand-color | - 
+--td-cell-left-icon-font-size | 24px | - 
+--td-cell-line-height | 24px | - 
+--td-cell-note-color | @font-gray-3 | - 
+--td-cell-note-font-size | @font-size-m | - 
+--td-cell-required-color | @error-color-6 | - 
+--td-cell-required-font-size | @font-size-m | - 
+--td-cell-right-icon-color | @font-gray-3 | - 
+--td-cell-right-icon-font-size | 24px | - 
+--td-cell-title-color | @font-gray-1 | - 
+--td-cell-title-font-size | @font-size-m | - 
+--td-cell-vertical-padding | 16px | - 
+--td-cell-group-border-color | @border-color | - 
+--td-cell-group-title-bg-color | @bg-color-secondarycontainer | - 
+--td-cell-group-title-color | @font-gray-3 | - 
+--td-cell-group-title-font-size | 14px | - 
+--td-cell-group-title-line-height | 45px | - 
+--td-cell-group-title-padding-left | 16px | - 
diff --git a/src/cell/cell.md b/src/cell/cell.md
index 5693ed1c..abaaaeb8 100644
--- a/src/cell/cell.md
+++ b/src/cell/cell.md
@@ -31,3 +31,39 @@ click | `(context: { e: MouseEvent })` | 右侧内容。TS 类型：`string \| T
 bordered | Boolean | - | 是否显示组边框 | N
 theme | String | default | `0.15.0`。单元格组风格。可选项：default/card | N
 title | String | - | 单元格组标题 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-cell-bg-color | @bg-color-container | - 
+--td-cell-border-color | @component-stroke | - 
+--td-cell-border-left-space | @cell-horizontal-padding | - 
+--td-cell-border-right-space | 0 | - 
+--td-cell-description-color | @font-gray-2 | - 
+--td-cell-description-font-size | @font-size-base | - 
+--td-cell-description-line-height | 22px | - 
+--td-cell-height | auto | - 
+--td-cell-horizontal-padding | 16px | - 
+--td-cell-hover-color | @bg-color-secondarycontainer | - 
+--td-cell-image-height | 48px | - 
+--td-cell-image-width | 48px | - 
+--td-cell-left-icon-color | @brand-color | - 
+--td-cell-left-icon-font-size | 24px | - 
+--td-cell-line-height | 24px | - 
+--td-cell-note-color | @font-gray-3 | - 
+--td-cell-note-font-size | @font-size-m | - 
+--td-cell-required-color | @error-color-6 | - 
+--td-cell-required-font-size | @font-size-m | - 
+--td-cell-right-icon-color | @font-gray-3 | - 
+--td-cell-right-icon-font-size | 24px | - 
+--td-cell-title-color | @font-gray-1 | - 
+--td-cell-title-font-size | @font-size-m | - 
+--td-cell-vertical-padding | 16px | - 
+--td-cell-group-border-color | @border-color | - 
+--td-cell-group-title-bg-color | @bg-color-secondarycontainer | - 
+--td-cell-group-title-color | @font-gray-3 | - 
+--td-cell-group-title-font-size | 14px | - 
+--td-cell-group-title-line-height | 45px | - 
+--td-cell-group-title-padding-left | 16px | - 
diff --git a/src/checkbox/checkbox.en-US.md b/src/checkbox/checkbox.en-US.md
index b045c2ad..2c3f10d0 100644
--- a/src/checkbox/checkbox.en-US.md
+++ b/src/checkbox/checkbox.en-US.md
@@ -47,3 +47,26 @@ onChange | Function |  | Typescript：`(value: T, context: CheckboxGroupChangeCo
 name | params | description
 -- | -- | --
 change | `(value: T, context: CheckboxGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-checkbox-bg-color | @bg-color-container | - 
+--td-checkbox-border-color | @component-stroke | - 
+--td-checkbox-description-color | @font-gray-2 | - 
+--td-checkbox-description-disabled-color | @font-gray-4 | - 
+--td-checkbox-description-line-height | 22px | - 
+--td-checkbox-font-size | 16px | - 
+--td-checkbox-icon-checked-color | @brand-color | - 
+--td-checkbox-icon-color | @gray-color-4 | - 
+--td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | - 
+--td-checkbox-icon-disabled-color | @brand-color-disabled | - 
+--td-checkbox-icon-size | 24px | - 
+--td-checkbox-tag-active-bg-color | @brand-color-light | - 
+--td-checkbox-tag-active-color | @brand-color | - 
+--td-checkbox-title-color | @font-gray-1 | - 
+--td-checkbox-title-disabled-color | @font-gray-4 | - 
+--td-checkbox-title-line-height | 24px | - 
+--td-checkbox-vertical-padding | 16px | - 
diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md
index 2f498594..4f5ea225 100644
--- a/src/checkbox/checkbox.md
+++ b/src/checkbox/checkbox.md
@@ -47,3 +47,26 @@ onChange | Function |  | TS 类型：`(value: T, context: CheckboxGroupChangeCon
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: T, context: CheckboxGroupChangeContext)` | 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-checkbox-bg-color | @bg-color-container | - 
+--td-checkbox-border-color | @component-stroke | - 
+--td-checkbox-description-color | @font-gray-2 | - 
+--td-checkbox-description-disabled-color | @font-gray-4 | - 
+--td-checkbox-description-line-height | 22px | - 
+--td-checkbox-font-size | 16px | - 
+--td-checkbox-icon-checked-color | @brand-color | - 
+--td-checkbox-icon-color | @gray-color-4 | - 
+--td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | - 
+--td-checkbox-icon-disabled-color | @brand-color-disabled | - 
+--td-checkbox-icon-size | 24px | - 
+--td-checkbox-tag-active-bg-color | @brand-color-light | - 
+--td-checkbox-tag-active-color | @brand-color | - 
+--td-checkbox-title-color | @font-gray-1 | - 
+--td-checkbox-title-disabled-color | @font-gray-4 | - 
+--td-checkbox-title-line-height | 24px | - 
+--td-checkbox-vertical-padding | 16px | - 
diff --git a/src/collapse/collapse.en-US.md b/src/collapse/collapse.en-US.md
index 370beb39..754e6890 100644
--- a/src/collapse/collapse.en-US.md
+++ b/src/collapse/collapse.en-US.md
@@ -34,3 +34,19 @@ header | String / Slot / Function | - | Typescript：`string \| TNode`。[see mo
 headerRightContent | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 placement | String | bottom | options：bottom/top | N
 value | String / Number | - | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-collapse-border-color | @border-color | - 
+--td-collapse-content-font-size | @font-size-base | - 
+--td-collapse-content-line-height | 1.5 | - 
+--td-collapse-content-padding | 16px | - 
+--td-collapse-content-text-color | @font-gray-1 | - 
+--td-collapse-extra-font-size | @font-size-m | - 
+--td-collapse-header-text-color | @font-gray-1 | - 
+--td-collapse-header-text-disabled-color | @font-gray-4 | - 
+--td-collapse-panel-bg-color | @bg-color-container | - 
+--td-collapse-title-font-size | @font-size-m | - 
diff --git a/src/collapse/collapse.md b/src/collapse/collapse.md
index 4d594015..6247a4b2 100644
--- a/src/collapse/collapse.md
+++ b/src/collapse/collapse.md
@@ -33,3 +33,19 @@ header | String / Slot / Function | - | 面板头内容。TS 类型：`string \|
 headerRightContent | String / Slot / Function | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 placement | String | bottom | 选项卡内容的位置。可选项：bottom/top | N
 value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-collapse-border-color | @border-color | - 
+--td-collapse-content-font-size | @font-size-base | - 
+--td-collapse-content-line-height | 1.5 | - 
+--td-collapse-content-padding | 16px | - 
+--td-collapse-content-text-color | @font-gray-1 | - 
+--td-collapse-extra-font-size | @font-size-m | - 
+--td-collapse-header-text-color | @font-gray-1 | - 
+--td-collapse-header-text-disabled-color | @font-gray-4 | - 
+--td-collapse-panel-bg-color | @bg-color-container | - 
+--td-collapse-title-font-size | @font-size-m | - 
diff --git a/src/count-down/count-down.en-US.md b/src/count-down/count-down.en-US.md
index 341b605a..e0c122e0 100644
--- a/src/count-down/count-down.en-US.md
+++ b/src/count-down/count-down.en-US.md
@@ -23,3 +23,14 @@ name | params | description
 -- | -- | --
 change | `(time: TimeData)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
 finish | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-countdown-bg-color | @error-color-6 | - 
+--td-countdown-default-color | @font-gray-1 | - 
+--td-countdown-round-border-radius | @radius-circle | - 
+--td-countdown-round-color | @font-white-1 | - 
+--td-countdown-square-border-radius | @radius-small | - 
diff --git a/src/count-down/count-down.md b/src/count-down/count-down.md
index a50f27d4..a87b2a3f 100644
--- a/src/count-down/count-down.md
+++ b/src/count-down/count-down.md
@@ -22,3 +22,14 @@ onFinish | Function |  | TS 类型：`() => void`<br/>倒计时结束时触发 |
 -- | -- | --
 change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
 finish | \- | 倒计时结束时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-countdown-bg-color | @error-color-6 | - 
+--td-countdown-default-color | @font-gray-1 | - 
+--td-countdown-round-border-radius | @radius-circle | - 
+--td-countdown-round-color | @font-white-1 | - 
+--td-countdown-square-border-radius | @radius-small | - 
diff --git a/src/date-time-picker/date-time-picker.en-US.md b/src/date-time-picker/date-time-picker.en-US.md
index 1bc2362a..f4dfa016 100644
--- a/src/date-time-picker/date-time-picker.en-US.md
+++ b/src/date-time-picker/date-time-picker.en-US.md
@@ -30,3 +30,10 @@ cancel | `(context: { e: MouseEvent })` | \-
 change | `(value: DateValue)` | \-
 confirm | `(value: DateValue)` | \-
 pick | `(value: DateValue)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-data-time-picker-year-width | 64px | - 
diff --git a/src/date-time-picker/date-time-picker.md b/src/date-time-picker/date-time-picker.md
index 0cdafe8f..937fe0f2 100644
--- a/src/date-time-picker/date-time-picker.md
+++ b/src/date-time-picker/date-time-picker.md
@@ -29,3 +29,10 @@ cancel | `(context: { e: MouseEvent })` | 取消按钮点击时触发
 change | `(value: DateValue)` | value改变时触发
 confirm | `(value: DateValue)` | 确认按钮点击时触发
 pick | `(value: DateValue)` | 选中值发生变化时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-data-time-picker-year-width | 64px | - 
diff --git a/src/dialog/dialog.en-US.md b/src/dialog/dialog.en-US.md
index 1d83f7af..4748ac3e 100644
--- a/src/dialog/dialog.en-US.md
+++ b/src/dialog/dialog.en-US.md
@@ -80,3 +80,20 @@ name | params | default | description
 options | Object | - | Typescript：`Omit<DialogOptions, 'cancelBtn'>`
 
 插件返回值：`DialogInstance`
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-border-radius | @radius-extra-large | - 
+--td-dialog-body-max-height | 456px | - 
+--td-dialog-close-color | @font-gray-3 | - 
+--td-dialog-close-font-size | 22px | - 
+--td-dialog-content-color | @font-gray-2 | - 
+--td-dialog-content-font-size | 16px | - 
+--td-dialog-content-line-height | 24px | - 
+--td-dialog-title-color | @font-gray-1 | - 
+--td-dialog-title-font-size | 18px | - 
+--td-dialog-title-line-height | 26px | - 
+--td-dialog-width | 311px | - 
diff --git a/src/dialog/dialog.md b/src/dialog/dialog.md
index 94f2f468..2e563b7a 100644
--- a/src/dialog/dialog.md
+++ b/src/dialog/dialog.md
@@ -80,3 +80,20 @@ options | \- | - | TS 类型：`DialogOptions`
 options | Object | - | TS 类型：`Omit<DialogOptions, 'cancelBtn'>`
 
 插件返回值：`DialogInstance`
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-border-radius | @radius-extra-large | - 
+--td-dialog-body-max-height | 456px | - 
+--td-dialog-close-color | @font-gray-3 | - 
+--td-dialog-close-font-size | 22px | - 
+--td-dialog-content-color | @font-gray-2 | - 
+--td-dialog-content-font-size | 16px | - 
+--td-dialog-content-line-height | 24px | - 
+--td-dialog-title-color | @font-gray-1 | - 
+--td-dialog-title-font-size | 18px | - 
+--td-dialog-title-line-height | 26px | - 
+--td-dialog-width | 311px | - 
diff --git a/src/divider/divider.en-US.md b/src/divider/divider.en-US.md
index c6165b78..d5b366c9 100644
--- a/src/divider/divider.en-US.md
+++ b/src/divider/divider.en-US.md
@@ -11,3 +11,14 @@ content | String / Slot / Function | - | Typescript：`string \| TNode`。[see m
 dashed | Boolean | false | \- | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | horizontal | options：horizontal/vertical | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-divider-color | @bg-color-component | - 
+--td-divider-content-color | @font-gray-3 | - 
+--td-divider-content-font-size | 12px | - 
+--td-divider-content-line-height | 20px | - 
+--td-divider-content-line-style | solid | - 
diff --git a/src/divider/divider.md b/src/divider/divider.md
index f86cd75a..3ee073a0 100644
--- a/src/divider/divider.md
+++ b/src/divider/divider.md
@@ -10,3 +10,14 @@ content | String / Slot / Function | - | 子元素。TS 类型：`string \| TNod
 dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
 default | String / Slot / Function | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-divider-color | @bg-color-component | - 
+--td-divider-content-color | @font-gray-3 | - 
+--td-divider-content-font-size | 12px | - 
+--td-divider-content-line-height | 20px | - 
+--td-divider-content-line-style | solid | - 
diff --git a/src/drawer/drawer.en-US.md b/src/drawer/drawer.en-US.md
index fa2eb94c..850a7f71 100644
--- a/src/drawer/drawer.en-US.md
+++ b/src/drawer/drawer.en-US.md
@@ -51,3 +51,22 @@ update | `(props: DrawerOptions)` | \- | \-
 name | params | default | description
 -- | -- | -- | --
 options | \- | - | Typescript：`DrawerOptions`
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-drawer-bg-color | @bg-color-container | - 
+--td-drawer-border-color | @border-color | - 
+--td-drawer-footer-padding-bottom | 20px | - 
+--td-drawer-hover-color | @bg-color-secondarycontainer | - 
+--td-drawer-item-height | 24px | - 
+--td-drawer-item-icon-size | 24px | - 
+--td-drawer-item-padding | 16px | - 
+--td-drawer-sidebar-height | 70vh | - 
+--td-drawer-title-color | @drawer-title-color | - 
+--td-drawer-title-color | @font-gray-1 | - 
+--td-drawer-title-font-size | 18px | - 
+--td-drawer-title-padding | 24px 16px 8px | - 
+--td-drawer-width | 280px | - 
diff --git a/src/drawer/drawer.md b/src/drawer/drawer.md
index 9699019a..e5ca9d68 100644
--- a/src/drawer/drawer.md
+++ b/src/drawer/drawer.md
@@ -51,3 +51,22 @@ update | `(props: DrawerOptions)` | \- | 更新抽屉内容
 参数名称 | 参数类型 | 参数默认值 | 参数说明
 -- | -- | -- | --
 options | \- | - | TS 类型：`DrawerOptions`
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-drawer-bg-color | @bg-color-container | - 
+--td-drawer-border-color | @border-color | - 
+--td-drawer-footer-padding-bottom | 20px | - 
+--td-drawer-hover-color | @bg-color-secondarycontainer | - 
+--td-drawer-item-height | 24px | - 
+--td-drawer-item-icon-size | 24px | - 
+--td-drawer-item-padding | 16px | - 
+--td-drawer-sidebar-height | 70vh | - 
+--td-drawer-title-color | @drawer-title-color | - 
+--td-drawer-title-color | @font-gray-1 | - 
+--td-drawer-title-font-size | 18px | - 
+--td-drawer-title-padding | 24px 16px 8px | - 
+--td-drawer-width | 280px | - 
diff --git a/src/dropdown-menu/dropdown-menu.en-US.md b/src/dropdown-menu/dropdown-menu.en-US.md
index b250f6c3..b720a88d 100644
--- a/src/dropdown-menu/dropdown-menu.en-US.md
+++ b/src/dropdown-menu/dropdown-menu.en-US.md
@@ -34,3 +34,17 @@ name | params | description
 change | `(value: DropdownValue)` | \-
 confirm | `(value: DropdownValue)` | \-
 reset | `(value: DropdownValue)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-dropdown-body-max-height | 280px | - 
+--td-dropdown-menu-bg-color | @bg-color-container | - 
+--td-dropdown-menu-active-colorm | @brand-color | - 
+--td-dropdown-menu-bg-colorm | @bg-color-container | - 
+--td-dropdown-menu-colorm | @font-gray-1 | - 
+--td-dropdown-menu-disabled-colorm | @font-gray-4 | - 
+--td-dropdown-menu-font-sizem | 14px | - 
+--td-dropdown-menu-icon-sizem | 24px | - 
diff --git a/src/dropdown-menu/dropdown-menu.md b/src/dropdown-menu/dropdown-menu.md
index 0919d6db..934d0507 100644
--- a/src/dropdown-menu/dropdown-menu.md
+++ b/src/dropdown-menu/dropdown-menu.md
@@ -34,3 +34,17 @@ onReset | Function |  | TS 类型：`(value: DropdownValue) => void`<br/>点击
 change | `(value: DropdownValue)` | 值改变时触发
 confirm | `(value: DropdownValue)` | 点击确认时触发
 reset | `(value: DropdownValue)` | 点击重置时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-dropdown-body-max-height | 280px | - 
+--td-dropdown-menu-bg-color | @bg-color-container | - 
+--td-dropdown-menu-active-colorm | @brand-color | - 
+--td-dropdown-menu-bg-colorm | @bg-color-container | - 
+--td-dropdown-menu-colorm | @font-gray-1 | - 
+--td-dropdown-menu-disabled-colorm | @font-gray-4 | - 
+--td-dropdown-menu-font-sizem | 14px | - 
+--td-dropdown-menu-icon-sizem | 24px | - 
diff --git a/src/empty/empty.en-US.md b/src/empty/empty.en-US.md
index e212d803..bc75bfb4 100644
--- a/src/empty/empty.en-US.md
+++ b/src/empty/empty.en-US.md
@@ -10,3 +10,15 @@ action | Slot / Function | - | Typescript：`TNode`。[see more ts definition](h
 description | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 icon | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 image | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-empty-action-margin-top | @spacer-4 | - 
+--td-empty-description-color | @font-gray-3 | - 
+--td-empty-description-font-size | @font-size-base | - 
+--td-empty-description-line-height | 44rpx | - 
+--td-empty-description-margin-top | @spacer-2 | - 
+--td-empty-icon-color | @font-gray-3 | - 
diff --git a/src/empty/empty.md b/src/empty/empty.md
index e21d5c85..7bac7809 100644
--- a/src/empty/empty.md
+++ b/src/empty/empty.md
@@ -10,3 +10,15 @@ action | Slot / Function | - | 操作按钮。TS 类型：`TNode`。[通用类
 description | String / Slot / Function | - | 描述文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 icon | String / Slot / Function | - | 图标。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 image | String / Slot / Function | - | 图片地址。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-empty-action-margin-top | @spacer-4 | - 
+--td-empty-description-color | @font-gray-3 | - 
+--td-empty-description-font-size | @font-size-base | - 
+--td-empty-description-line-height | 44rpx | - 
+--td-empty-description-margin-top | @spacer-2 | - 
+--td-empty-icon-color | @font-gray-3 | - 
diff --git a/src/fab/fab.en-US.md b/src/fab/fab.en-US.md
index e14f70d4..1c65d96d 100644
--- a/src/fab/fab.en-US.md
+++ b/src/fab/fab.en-US.md
@@ -17,3 +17,10 @@ onClick | Function |  | Typescript：`(context: {e: MouseEvent}) => void`<br/> |
 name | params | description
 -- | -- | --
 click | `(context: {e: MouseEvent})` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-fab-shadow | @shadow-2 | - 
diff --git a/src/fab/fab.md b/src/fab/fab.md
index 0bf299ae..1f7b0dfe 100644
--- a/src/fab/fab.md
+++ b/src/fab/fab.md
@@ -16,3 +16,10 @@ onClick | Function |  | TS 类型：`(context: {e: MouseEvent}) => void`<br/>悬
 名称 | 参数 | 描述
 -- | -- | --
 click | `(context: {e: MouseEvent})` | 悬浮按钮点击事件
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-fab-shadow | @shadow-2 | - 
diff --git a/src/footer/footer.en-US.md b/src/footer/footer.en-US.md
index 1ce60f20..ff16d19a 100644
--- a/src/footer/footer.en-US.md
+++ b/src/footer/footer.en-US.md
@@ -8,3 +8,24 @@ name | type | default | description | required
 links | Array | [] | Typescript：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; target?: string}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/footer/type.ts) | N
 logo | Object | - | Typescript：`FooterLogo` `interface FooterLogo { icon: string; title?: string; url?: string; target: string }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/footer/type.ts) | N
 text | String | '' | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-footer-link-color | @brand-color | - 
+--td-footer-link-dividing-line-color | @font-gray-3 | - 
+--td-footer-link-dividing-line-padding | @spacer-1 | - 
+--td-footer-link-font-size | @font-size-s | - 
+--td-footer-link-line-height | 20px | - 
+--td-footer-logo-icon-height | 24px | - 
+--td-footer-logo-icon-margin-right | @spacer | - 
+--td-footer-logo-icon-width | 24px | - 
+--td-footer-logo-title-font-size | @font-size-m | - 
+--td-footer-logo-title-line-height | 24px | - 
+--td-footer-logo-title-url-width | 128px | - 
+--td-footer-text-color | @font-gray-3 | - 
+--td-footer-text-font-size | @font-size-s | - 
+--td-footer-text-line-height | 20px | - 
+--td-footer-text-margin-top | 4px | - 
diff --git a/src/footer/footer.md b/src/footer/footer.md
index 5206ab94..bb3ee804 100644
--- a/src/footer/footer.md
+++ b/src/footer/footer.md
@@ -8,3 +8,24 @@
 links | Array | [] | 链接列表。name 表示链接名称， url 表示跳转链接，target 表示跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同。TS 类型：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; target?: string}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/footer/type.ts) | N
 logo | Object | - | 图标配置。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接跳转地址，`logo.target` 表示跳转方式。TS 类型：`FooterLogo` `interface FooterLogo { icon: string; title?: string; url?: string; target: string }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/footer/type.ts) | N
 text | String | '' | 版权信息 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-footer-link-color | @brand-color | - 
+--td-footer-link-dividing-line-color | @font-gray-3 | - 
+--td-footer-link-dividing-line-padding | @spacer-1 | - 
+--td-footer-link-font-size | @font-size-s | - 
+--td-footer-link-line-height | 20px | - 
+--td-footer-logo-icon-height | 24px | - 
+--td-footer-logo-icon-margin-right | @spacer | - 
+--td-footer-logo-icon-width | 24px | - 
+--td-footer-logo-title-font-size | @font-size-m | - 
+--td-footer-logo-title-line-height | 24px | - 
+--td-footer-logo-title-url-width | 128px | - 
+--td-footer-text-color | @font-gray-3 | - 
+--td-footer-text-font-size | @font-size-s | - 
+--td-footer-text-line-height | 20px | - 
+--td-footer-text-margin-top | 4px | - 
diff --git a/src/grid/grid.en-US.md b/src/grid/grid.en-US.md
index 99bee63a..6db0d20b 100644
--- a/src/grid/grid.en-US.md
+++ b/src/grid/grid.en-US.md
@@ -20,3 +20,31 @@ description | String / Slot / Function | - | Typescript：`string \| TNode`。[s
 image | String / Object / Slot / Function | - | Typescript：`string \| object \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | vertical | options：vertical/horizontal | N
 text | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-grid-bg-color | @bg-color-container | - 
+--td-grid-card-radius | @radius-large | - 
+--td-grid-item-bg-color | @bg-color-container | - 
+--td-grid-item-border-color | @component-stroke | - 
+--td-grid-item-description-color | @font-gray-3 | - 
+--td-grid-item-description-font-size | 12px | - 
+--td-grid-item-description-line-height | 20px | - 
+--td-grid-item-description-padding-top | 4px | - 
+--td-grid-item-horizontal-padding | 16px 0 | - 
+--td-grid-item-horizontal-text-description-top | 2px | - 
+--td-grid-item-horizontal-text-padding-left | 12px | - 
+--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | - 
+--td-grid-item-image-bg-color | @bg-color-secondarycontainer | - 
+--td-grid-item-image-border-radius | @radius-default | - 
+--td-grid-item-image-middle-width | 40px | - 
+--td-grid-item-image-small-width | 32px | - 
+--td-grid-item-image-width | 48px | - 
+--td-grid-item-text-color | @font-gray-1 | - 
+--td-grid-item-text-font-size | 14px | - 
+--td-grid-item-text-line-height | 22px | - 
+--td-grid-item-text-padding-top | 8px | - 
+--td-grid-item-vertical-padding | 16px 0 12px | - 
diff --git a/src/grid/grid.md b/src/grid/grid.md
index b84ab00c..f848c353 100644
--- a/src/grid/grid.md
+++ b/src/grid/grid.md
@@ -20,3 +20,31 @@ description | String / Slot / Function | - | 文本以外的更多描述，辅
 image | String / Object / Slot / Function | - | 图片，可以是图片地址，也可以自定义图片节点，如果传入对象则透传至 image 组件。TS 类型：`string \| object \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
 text | String / Slot / Function | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-grid-bg-color | @bg-color-container | - 
+--td-grid-card-radius | @radius-large | - 
+--td-grid-item-bg-color | @bg-color-container | - 
+--td-grid-item-border-color | @component-stroke | - 
+--td-grid-item-description-color | @font-gray-3 | - 
+--td-grid-item-description-font-size | 12px | - 
+--td-grid-item-description-line-height | 20px | - 
+--td-grid-item-description-padding-top | 4px | - 
+--td-grid-item-horizontal-padding | 16px 0 | - 
+--td-grid-item-horizontal-text-description-top | 2px | - 
+--td-grid-item-horizontal-text-padding-left | 12px | - 
+--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | - 
+--td-grid-item-image-bg-color | @bg-color-secondarycontainer | - 
+--td-grid-item-image-border-radius | @radius-default | - 
+--td-grid-item-image-middle-width | 40px | - 
+--td-grid-item-image-small-width | 32px | - 
+--td-grid-item-image-width | 48px | - 
+--td-grid-item-text-color | @font-gray-1 | - 
+--td-grid-item-text-font-size | 14px | - 
+--td-grid-item-text-line-height | 22px | - 
+--td-grid-item-text-padding-top | 8px | - 
+--td-grid-item-vertical-padding | 16px 0 12px | - 
diff --git a/src/image-viewer/image-viewer.en-US.md b/src/image-viewer/image-viewer.en-US.md
index 03fc1260..414d71c9 100644
--- a/src/image-viewer/image-viewer.en-US.md
+++ b/src/image-viewer/image-viewer.en-US.md
@@ -24,3 +24,16 @@ name | params | description
 close | `(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number })` | \-
 delete | `(index: Number)` | \-
 index-change | `(index: number, context: { trigger: 'prev' \| 'next' })` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-image-viewer-close-margin-left | @spacer-1 | - 
+--td-image-viewer-delete-margin-right | @spacer-1 | - 
+--td-image-viewer-mask-bg-color | #000 | - 
+--td-image-viewer-nav-bg-color | @font-gray-3 | - 
+--td-image-viewer-nav-color | @font-white-1 | - 
+--td-image-viewer-nav-height | 48px | - 
+--td-image-viewer-nav-index-font-size | @font-size-base | - 
diff --git a/src/image-viewer/image-viewer.md b/src/image-viewer/image-viewer.md
index 56dda94c..a8ea6efc 100644
--- a/src/image-viewer/image-viewer.md
+++ b/src/image-viewer/image-viewer.md
@@ -24,3 +24,16 @@ onIndexChange | Function |  | TS 类型：`(index: number, context: { trigger: '
 close | `(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number })` | 关闭时触发
 delete | `(index: Number)` | 点击删除操作按钮时触发
 index-change | `(index: number, context: { trigger: 'prev' \| 'next' })` | 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-image-viewer-close-margin-left | @spacer-1 | - 
+--td-image-viewer-delete-margin-right | @spacer-1 | - 
+--td-image-viewer-mask-bg-color | #000 | - 
+--td-image-viewer-nav-bg-color | @font-gray-3 | - 
+--td-image-viewer-nav-color | @font-white-1 | - 
+--td-image-viewer-nav-height | 48px | - 
+--td-image-viewer-nav-index-font-size | @font-size-base | - 
diff --git a/src/image/image.en-US.md b/src/image/image.en-US.md
index 64ad65e4..ed116611 100644
--- a/src/image/image.en-US.md
+++ b/src/image/image.en-US.md
@@ -24,3 +24,13 @@ name | params | description
 -- | -- | --
 error | `(context: { e: ImageEvent })` | trigger on image load failed
 load | `(context: { e: ImageEvent })` | trigger on image loaded
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-image-color | @font-gray-3 | - 
+--td-image-loading-bg-color | @bg-color-secondarycontainer | - 
+--td-image-loading-color | @font-gray-3 | - 
+--td-image-round-radius | @radius-default | - 
diff --git a/src/image/image.md b/src/image/image.md
index a65b1613..f0684c05 100644
--- a/src/image/image.md
+++ b/src/image/image.md
@@ -23,3 +23,13 @@ onLoad | Function |  | TS 类型：`(context: { e: ImageEvent }) => void`<br/>
 -- | -- | --
 error | `(context: { e: ImageEvent })` | 图片加载失败时触发
 load | `(context: { e: ImageEvent })` | 图片加载完成时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-image-color | @font-gray-3 | - 
+--td-image-loading-bg-color | @bg-color-secondarycontainer | - 
+--td-image-loading-color | @font-gray-3 | - 
+--td-image-round-radius | @radius-default | - 
diff --git a/src/indexes/indexes.en-US.md b/src/indexes/indexes.en-US.md
index eb80979b..4eec154b 100644
--- a/src/indexes/indexes.en-US.md
+++ b/src/indexes/indexes.en-US.md
@@ -24,3 +24,28 @@ select | `(index: string \| number)` | \-
 name | type | default | description | required
 -- | -- | -- | -- | --
 index | String / Number | - | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-indexes-sidebar-active-bg-color | @brand-color | - 
+--td-indexes-sidebar-active-color | @font-white-1 | - 
+--td-indexes-sidebar-color | @font-gray-1 | - 
+--td-indexes-sidebar-font-size | 12px | - 
+--td-indexes-sidebar-item-size | 20px | - 
+--td-indexes-sidebar-line-height | 20px | - 
+--td-indexes-sidebar-right | 8px | - 
+--td-indexes-sidebar-tips-bg-color | @brand-color-light | - 
+--td-indexes-sidebar-tips-color | @brand-color | - 
+--td-indexes-sidebar-tips-font-size | 20px | - 
+--td-indexes-sidebar-tips-right | 38px | - 
+--td-indexes-sidebar-tips-size | 48px | - 
+--td-indexes-anchor-active-bg-color | @bg-color-container | - 
+--td-indexes-anchor-active-color | @brand-color | - 
+--td-indexes-anchor-active-font-weight | 600 | - 
+--td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - 
+--td-indexes-anchor-color | @font-gray-1 | - 
+--td-indexes-anchor-font-size | 14px | - 
+--td-indexes-anchor-line-height | 22px | - 
diff --git a/src/indexes/indexes.md b/src/indexes/indexes.md
index d8571e41..7a138781 100644
--- a/src/indexes/indexes.md
+++ b/src/indexes/indexes.md
@@ -23,3 +23,28 @@ select | `(index: string \| number)` | 点击侧边栏时触发事件
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 index | String / Number | - | 索引字符 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-indexes-sidebar-active-bg-color | @brand-color | - 
+--td-indexes-sidebar-active-color | @font-white-1 | - 
+--td-indexes-sidebar-color | @font-gray-1 | - 
+--td-indexes-sidebar-font-size | 12px | - 
+--td-indexes-sidebar-item-size | 20px | - 
+--td-indexes-sidebar-line-height | 20px | - 
+--td-indexes-sidebar-right | 8px | - 
+--td-indexes-sidebar-tips-bg-color | @brand-color-light | - 
+--td-indexes-sidebar-tips-color | @brand-color | - 
+--td-indexes-sidebar-tips-font-size | 20px | - 
+--td-indexes-sidebar-tips-right | 38px | - 
+--td-indexes-sidebar-tips-size | 48px | - 
+--td-indexes-anchor-active-bg-color | @bg-color-container | - 
+--td-indexes-anchor-active-color | @brand-color | - 
+--td-indexes-anchor-active-font-weight | 600 | - 
+--td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - 
+--td-indexes-anchor-color | @font-gray-1 | - 
+--td-indexes-anchor-font-size | 14px | - 
+--td-indexes-anchor-line-height | 22px | - 
diff --git a/src/input/input.en-US.md b/src/input/input.en-US.md
index 20b6fdac..16e1b5a8 100644
--- a/src/input/input.en-US.md
+++ b/src/input/input.en-US.md
@@ -45,3 +45,29 @@ change | `(value: InputValue, context?: { e?: InputEvent \| MouseEvent \| Compos
 clear | `(context: { e: MouseEvent })` | \-
 focus | `(value: InputValue, context: { e: FocusEvent })` | \-
 validate | `(context: { error?: 'exceed-maximum' \| 'below-minimum' })` | trigger on text length being over max length or max character
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-input-bg-color | @bg-color-container | - 
+--td-input-border-color | @component-stroke | - 
+--td-input-border-left-space | 16px | - 
+--td-input-border-radius | @radius-default | - 
+--td-input-border-right-space | 0 | - 
+--td-input-default-text-color | @font-gray-1 | - 
+--td-input-default-tips-color | @font-gray-3 | - 
+--td-input-disabled-text-color | @text-color-disabled | - 
+--td-input-error-text-color | @error-color | - 
+--td-input-error-tips-color | @error-color | - 
+--td-input-label-text-color | @font-gray-1 | - 
+--td-input-placeholder-text-color | @text-color-placeholder | - 
+--td-input-prefix-icon-color | @font-gray-1 | - 
+--td-input-success-text-color | @success-color | - 
+--td-input-success-tips-color | @success-color | - 
+--td-input-suffix-icon-color | @font-gray-3 | - 
+--td-input-suffix-text-color | @font-gray-1 | - 
+--td-input-vertical-padding | 16px | - 
+--td-input-warning-text-color | @warning-color | - 
+--td-input-warning-tips-color | @warning-color | - 
diff --git a/src/input/input.md b/src/input/input.md
index d977e022..7a4f04c6 100644
--- a/src/input/input.md
+++ b/src/input/input.md
@@ -44,3 +44,29 @@ change | `(value: InputValue, context?: { e?: InputEvent \| MouseEvent \| Compos
 clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发
 focus | `(value: InputValue, context: { e: FocusEvent })` | 获得焦点时触发
 validate | `(context: { error?: 'exceed-maximum' \| 'below-minimum' })` | 字数超出限制时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-input-bg-color | @bg-color-container | - 
+--td-input-border-color | @component-stroke | - 
+--td-input-border-left-space | 16px | - 
+--td-input-border-radius | @radius-default | - 
+--td-input-border-right-space | 0 | - 
+--td-input-default-text-color | @font-gray-1 | - 
+--td-input-default-tips-color | @font-gray-3 | - 
+--td-input-disabled-text-color | @text-color-disabled | - 
+--td-input-error-text-color | @error-color | - 
+--td-input-error-tips-color | @error-color | - 
+--td-input-label-text-color | @font-gray-1 | - 
+--td-input-placeholder-text-color | @text-color-placeholder | - 
+--td-input-prefix-icon-color | @font-gray-1 | - 
+--td-input-success-text-color | @success-color | - 
+--td-input-success-tips-color | @success-color | - 
+--td-input-suffix-icon-color | @font-gray-3 | - 
+--td-input-suffix-text-color | @font-gray-1 | - 
+--td-input-vertical-padding | 16px | - 
+--td-input-warning-text-color | @warning-color | - 
+--td-input-warning-tips-color | @warning-color | - 
diff --git a/src/link/link.en-US.md b/src/link/link.en-US.md
index 708078c0..2894a9ff 100644
--- a/src/link/link.en-US.md
+++ b/src/link/link.en-US.md
@@ -23,3 +23,24 @@ onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>click event,
 name | params | description
 -- | -- | --
 click | `(e: MouseEvent)` | click event, it won't trigger when it's disabled
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-link-danger-active-color | @error-color-active | - 
+--td-link-danger-color | @error-color | - 
+--td-link-danger-disabled-color | @error-color-disabled | - 
+--td-link-default-active-color | @brand-color-active | - 
+--td-link-default-color | @font-gray-1 | - 
+--td-link-default-disabled-color | @text-color-disabled | - 
+--td-link-primary-active-color | @brand-color-active | - 
+--td-link-primary-color | @brand-color | - 
+--td-link-primary-disabled-color | @brand-color-disabled | - 
+--td-link-success-active-color | @success-color-active | - 
+--td-link-success-color | @success-color | - 
+--td-link-success-disabled-color | @success-color-disabled | - 
+--td-link-warning-active-color | @warning-color-active | - 
+--td-link-warning-color | @warning-color | - 
+--td-link-warning-disabled-color | @warning-color-disabled | - 
diff --git a/src/link/link.md b/src/link/link.md
index 4e0576ef..5681f222 100644
--- a/src/link/link.md
+++ b/src/link/link.md
@@ -23,3 +23,24 @@ onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击事件
 名称 | 参数 | 描述
 -- | -- | --
 click | `(e: MouseEvent)` | 点击事件，禁用状态不会触发点击事件
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-link-danger-active-color | @error-color-active | - 
+--td-link-danger-color | @error-color | - 
+--td-link-danger-disabled-color | @error-color-disabled | - 
+--td-link-default-active-color | @brand-color-active | - 
+--td-link-default-color | @font-gray-1 | - 
+--td-link-default-disabled-color | @text-color-disabled | - 
+--td-link-primary-active-color | @brand-color-active | - 
+--td-link-primary-color | @brand-color | - 
+--td-link-primary-disabled-color | @brand-color-disabled | - 
+--td-link-success-active-color | @success-color-active | - 
+--td-link-success-color | @success-color | - 
+--td-link-success-disabled-color | @success-color-disabled | - 
+--td-link-warning-active-color | @warning-color-active | - 
+--td-link-warning-color | @warning-color | - 
+--td-link-warning-disabled-color | @warning-color-disabled | - 
diff --git a/src/loading/loading.en-US.md b/src/loading/loading.en-US.md
index 69a322ac..b9a63b5b 100644
--- a/src/loading/loading.en-US.md
+++ b/src/loading/loading.en-US.md
@@ -18,3 +18,12 @@ reverse | Boolean | - | \- | N
 size | String | '20px' | \- | N
 text | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | circular | options：circular/spinner/dots | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-loading-color | @brand-color | - 
+--td-loading-text-font-size | 12px | - 
+--td-loading-text-line-height | 20px | - 
diff --git a/src/loading/loading.md b/src/loading/loading.md
index bca6974e..a93463e3 100644
--- a/src/loading/loading.md
+++ b/src/loading/loading.md
@@ -18,3 +18,12 @@ reverse | Boolean | - | 加载动画是否反向 | N
 size | String | '20px' | 尺寸，示例：20px | N
 text | String / Slot / Function | - | 加载提示文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | circular | 加载组件类型。可选项：circular/spinner/dots | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-loading-color | @brand-color | - 
+--td-loading-text-font-size | 12px | - 
+--td-loading-text-line-height | 20px | - 
diff --git a/src/message/message.en-US.md b/src/message/message.en-US.md
index efcee543..552582dd 100644
--- a/src/message/message.en-US.md
+++ b/src/message/message.en-US.md
@@ -28,3 +28,18 @@ name | params | description
 close-btn-click | `(context: { e: MouseEvent })` | \-
 duration-end | \- | \-
 link-click | `(context: { e: MouseEvent })` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-message-bg-color | @bg-color-container | - 
+--td-message-border-radius | @radius-default | - 
+--td-message-box-shadow | @shadow-4 | - 
+--td-message-close-icon-color | @font-gray-3 | - 
+--td-message-content-font-color | @font-gray-1 | - 
+--td-message-error-color | @error-color | - 
+--td-message-info-color | @brand-color | - 
+--td-message-success-color | @success-color | - 
+--td-message-warning-color | @warning-color | - 
diff --git a/src/message/message.md b/src/message/message.md
index f4206113..33184e1c 100644
--- a/src/message/message.md
+++ b/src/message/message.md
@@ -28,3 +28,18 @@ onLinkClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<b
 close-btn-click | `(context: { e: MouseEvent })` | 当关闭按钮存在时，用户点击关闭按钮触发
 duration-end | \- | 计时结束后触发
 link-click | `(context: { e: MouseEvent })` | 当link链接存在时，点击链接文本时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-message-bg-color | @bg-color-container | - 
+--td-message-border-radius | @radius-default | - 
+--td-message-box-shadow | @shadow-4 | - 
+--td-message-close-icon-color | @font-gray-3 | - 
+--td-message-content-font-color | @font-gray-1 | - 
+--td-message-error-color | @error-color | - 
+--td-message-info-color | @brand-color | - 
+--td-message-success-color | @success-color | - 
+--td-message-warning-color | @warning-color | - 
diff --git a/src/navbar/navbar.en-US.md b/src/navbar/navbar.en-US.md
index d14347f4..082f593f 100644
--- a/src/navbar/navbar.en-US.md
+++ b/src/navbar/navbar.en-US.md
@@ -23,3 +23,21 @@ name | params | description
 -- | -- | --
 left-click | \- | \-
 right-click | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-navbar-bg-color | @bg-color-container | - 
+--td-navbar-capsule-border-color | #e3e6ea | - 
+--td-navbar-capsule-border-radius | 16px | - 
+--td-navbar-capsule-height | 32px | - 
+--td-navbar-capsule-width | 88px | - 
+--td-navbar-color | @font-gray-1 | - 
+--td-navbar-height | 48px | - 
+--td-navbar-left-arrow-size | 24px | - 
+--td-navbar-padding-top | 0 | - 
+--td-navbar-right | 95px | - 
+--td-navbar-title-font-size | 18px | - 
+--td-navbar-title-font-weight | 600 | - 
diff --git a/src/navbar/navbar.md b/src/navbar/navbar.md
index 5e0bf140..4c74b817 100644
--- a/src/navbar/navbar.md
+++ b/src/navbar/navbar.md
@@ -23,3 +23,21 @@ onRightClick | Function |  | TS 类型：`() => void`<br/>点击右侧图标时
 -- | -- | --
 left-click | \- | 点击左侧按钮时触发
 right-click | \- | 点击右侧图标时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-navbar-bg-color | @bg-color-container | - 
+--td-navbar-capsule-border-color | #e3e6ea | - 
+--td-navbar-capsule-border-radius | 16px | - 
+--td-navbar-capsule-height | 32px | - 
+--td-navbar-capsule-width | 88px | - 
+--td-navbar-color | @font-gray-1 | - 
+--td-navbar-height | 48px | - 
+--td-navbar-left-arrow-size | 24px | - 
+--td-navbar-padding-top | 0 | - 
+--td-navbar-right | 95px | - 
+--td-navbar-title-font-size | 18px | - 
+--td-navbar-title-font-weight | 600 | - 
diff --git a/src/notice-bar/notice-bar.en-US.md b/src/notice-bar/notice-bar.en-US.md
index e1c06782..343a782a 100644
--- a/src/notice-bar/notice-bar.en-US.md
+++ b/src/notice-bar/notice-bar.en-US.md
@@ -21,3 +21,20 @@ onClick | Function |  | Typescript：`(trigger: NoticeBarTrigger) => void`<br/>[
 name | params | description
 -- | -- | --
 click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-notice-bar-error-bg-color | @error-color-1 | - 
+--td-notice-bar-error-color | @error-color-6 | - 
+--td-notice-bar-font-color | @font-gray-1 | - 
+--td-notice-bar-info-bg-color | @brand-color-light | - 
+--td-notice-bar-info-color | @brand-color | - 
+--td-notice-bar-operation-font-color | @brand-color | - 
+--td-notice-bar-success-bg-color | @success-color-1 | - 
+--td-notice-bar-success-color | @success-color | - 
+--td-notice-bar-suffix-icon-color | @font-gray-3 | - 
+--td-notice-bar-warning-bg-color | @warning-color-1 | - 
+--td-notice-bar-warning-color | @warning-color | - 
diff --git a/src/notice-bar/notice-bar.md b/src/notice-bar/notice-bar.md
index e38030f0..71927172 100644
--- a/src/notice-bar/notice-bar.md
+++ b/src/notice-bar/notice-bar.md
@@ -21,3 +21,20 @@ onClick | Function |  | TS 类型：`(trigger: NoticeBarTrigger) => void`<br/>
 名称 | 参数 | 描述
 -- | -- | --
 click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-notice-bar-error-bg-color | @error-color-1 | - 
+--td-notice-bar-error-color | @error-color-6 | - 
+--td-notice-bar-font-color | @font-gray-1 | - 
+--td-notice-bar-info-bg-color | @brand-color-light | - 
+--td-notice-bar-info-color | @brand-color | - 
+--td-notice-bar-operation-font-color | @brand-color | - 
+--td-notice-bar-success-bg-color | @success-color-1 | - 
+--td-notice-bar-success-color | @success-color | - 
+--td-notice-bar-suffix-icon-color | @font-gray-3 | - 
+--td-notice-bar-warning-bg-color | @warning-color-1 | - 
+--td-notice-bar-warning-color | @warning-color | - 
diff --git a/src/overlay/overlay.en-US.md b/src/overlay/overlay.en-US.md
index 39f5e33f..f7525bd2 100644
--- a/src/overlay/overlay.en-US.md
+++ b/src/overlay/overlay.en-US.md
@@ -18,3 +18,12 @@ onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>
 name | params | description
 -- | -- | --
 click | `(context: { e: MouseEvent })` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-overlay-bg-color | @font-gray-1 | - 
+--td-overlay-transition-duration | 300ms | - 
+--td-overlay-zindex | 1000 | - 
diff --git a/src/overlay/overlay.md b/src/overlay/overlay.md
index d56eefd8..29f2523e 100644
--- a/src/overlay/overlay.md
+++ b/src/overlay/overlay.md
@@ -18,3 +18,12 @@ onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 名称 | 参数 | 描述
 -- | -- | --
 click | `(context: { e: MouseEvent })` | 遮罩层的点击事件
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-overlay-bg-color | @font-gray-1 | - 
+--td-overlay-transition-duration | 300ms | - 
+--td-overlay-zindex | 1000 | - 
diff --git a/src/picker/picker.en-US.md b/src/picker/picker.en-US.md
index 63eba73a..38dc450f 100644
--- a/src/picker/picker.en-US.md
+++ b/src/picker/picker.en-US.md
@@ -27,3 +27,28 @@ cancel | `(context: { e: MouseEvent })` | \-
 change | `(value: Array<PickerValue>, context: { columns: Array<PickerContext>, e: MouseEvent }) ` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`interface PickerContext{ column: number,index: number }`<br/>
 confirm | `(value: Array<PickerValue>, context: { index: number[], e: MouseEvent, label: string[] })` | \-
 pick | `(value: Array<PickerValue>,context: PickerContext)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-picker-bg-color | @bg-color-container | - 
+--td-picker-border-radius | 12px | - 
+--td-picker-button-font-size | 16px | - 
+--td-picker-cancel-color | @font-gray-2 | - 
+--td-picker-confirm-color | @brand-color | - 
+--td-picker-group-height | 200px | - 
+--td-picker-indicator-bg-color | @bg-color-secondarycontainer | - 
+--td-picker-indicator-border-radius | 6px | - 
+--td-picker-item-active-color | @font-gray-1 | - 
+--td-picker-item-color | @font-gray-2 | - 
+--td-picker-item-height | 40px | - 
+--td-picker-item-height | 40px | - 
+--td-picker-mask-color-bottom | hsla(0, 0%, 100%, .4) | - 
+--td-picker-mask-color-top | hsla(0, 0%, 100%, .92) | - 
+--td-picker-title-color | @font-gray-1 | - 
+--td-picker-title-font-size | 18px | - 
+--td-picker-title-font-weight | 600 | - 
+--td-picker-title-line-height | 26px | - 
+--td-picker-toolbar-height | 58px | - 
diff --git a/src/picker/picker.md b/src/picker/picker.md
index 04650ea9..9c153ba5 100644
--- a/src/picker/picker.md
+++ b/src/picker/picker.md
@@ -28,3 +28,28 @@ cancel | `(context: { e: MouseEvent })` | 点击取消按钮时触发
 change | `(value: Array<PickerValue>, context: { columns: Array<PickerContext>, e: MouseEvent }) ` | 选中变化时候触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`interface PickerContext{ column: number,index: number }`<br/>
 confirm | `(value: Array<PickerValue>, context: { index: number[], e: MouseEvent, label: string[] })` | 点击确认按钮时触发
 pick | `(value: Array<PickerValue>,context: PickerContext)` | 任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-picker-bg-color | @bg-color-container | - 
+--td-picker-border-radius | 12px | - 
+--td-picker-button-font-size | 16px | - 
+--td-picker-cancel-color | @font-gray-2 | - 
+--td-picker-confirm-color | @brand-color | - 
+--td-picker-group-height | 200px | - 
+--td-picker-indicator-bg-color | @bg-color-secondarycontainer | - 
+--td-picker-indicator-border-radius | 6px | - 
+--td-picker-item-active-color | @font-gray-1 | - 
+--td-picker-item-color | @font-gray-2 | - 
+--td-picker-item-height | 40px | - 
+--td-picker-item-height | 40px | - 
+--td-picker-mask-color-bottom | hsla(0, 0%, 100%, .4) | - 
+--td-picker-mask-color-top | hsla(0, 0%, 100%, .92) | - 
+--td-picker-title-color | @font-gray-1 | - 
+--td-picker-title-font-size | 18px | - 
+--td-picker-title-font-weight | 600 | - 
+--td-picker-title-line-height | 26px | - 
+--td-picker-toolbar-height | 58px | - 
diff --git a/src/popover/popover.en-US.md b/src/popover/popover.en-US.md
index 720891ac..3844e8b0 100644
--- a/src/popover/popover.en-US.md
+++ b/src/popover/popover.en-US.md
@@ -20,3 +20,10 @@ onVisibleChange | Function |  | Typescript：`(visible: boolean) => void`<br/> |
 name | params | description
 -- | -- | --
 visible-change | `(visible: boolean)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-popover-padding | 12px | - 
diff --git a/src/popover/popover.md b/src/popover/popover.md
index 90ce8da2..dc2465d6 100644
--- a/src/popover/popover.md
+++ b/src/popover/popover.md
@@ -20,3 +20,10 @@ onVisibleChange | Function |  | TS 类型：`(visible: boolean) => void`<br/>确
 名称 | 参数 | 描述
 -- | -- | --
 visible-change | `(visible: boolean)` | 确认框显示或隐藏时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-popover-padding | 12px | - 
diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md
index b450984e..38352216 100644
--- a/src/popup/popup.en-US.md
+++ b/src/popup/popup.en-US.md
@@ -32,3 +32,11 @@ closed | \- | \-
 open | \- | \-
 opened | \- | \-
 visible-change | `(visible: boolean, trigger: PopupSource) ` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/>
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-popup-bg-color | @bg-color-container | - 
+--td-popup-border-radius | @radius-default | - 
diff --git a/src/popup/popup.md b/src/popup/popup.md
index b3973965..388fb87d 100644
--- a/src/popup/popup.md
+++ b/src/popup/popup.md
@@ -32,3 +32,11 @@ closed | \- | 组件关闭且动画结束后执行
 open | \- | 组件准备展示时触发
 opened | \- | 组件展示且动画结束后执行
 visible-change | `(visible: boolean, trigger: PopupSource) ` | 当浮层隐藏或显示时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/>
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-popup-bg-color | @bg-color-container | - 
+--td-popup-border-radius | @radius-default | - 
diff --git a/src/popup/popup.vue b/src/popup/popup.vue
index b4298fb4..972c9416 100644
--- a/src/popup/popup.vue
+++ b/src/popup/popup.vue
@@ -26,7 +26,7 @@ import { getAttach } from '../shared/dom';
 const { prefix } = config;
 
 const name = `${prefix}-popup`;
-const bodyLockClass = `${prefix}-overflow-hidden`;
+const bodyLockClass = `${name}-overflow-hidden`;
 
 export default defineComponent({
   name,
diff --git a/src/progress/progress.en-US.md b/src/progress/progress.en-US.md
index 2e41e466..fafbc069 100644
--- a/src/progress/progress.en-US.md
+++ b/src/progress/progress.en-US.md
@@ -13,3 +13,12 @@ status | String | - | options：success/error/warning/active。Typescript：`Sta
 strokeWidth | String / Number | - | \- | N
 theme | String | line | options：line/plump/circle。Typescript：`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/progress/type.ts) | N
 trackColor | String | '' | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-progress-circle-inner-bg-color | @font-white-1 | - 
+--td-progress-inner-bg-color | @brand-color | - 
+--td-progress-track-bg-color | @bg-color-component | - 
diff --git a/src/progress/progress.md b/src/progress/progress.md
index 6f95c5f9..6103c6da 100644
--- a/src/progress/progress.md
+++ b/src/progress/progress.md
@@ -12,3 +12,12 @@ status | String | - | 进度条状态。可选项：success/error/warning/active
 strokeWidth | String / Number | - | 进度条线宽。宽度数值不能超过 size 的一半，否则不能输出环形进度 | N
 theme | String | line | 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间。可选项：line/plump/circle。TS 类型：`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/progress/type.ts) | N
 trackColor | String | '' | 进度条未完成部分颜色 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-progress-circle-inner-bg-color | @font-white-1 | - 
+--td-progress-inner-bg-color | @brand-color | - 
+--td-progress-track-bg-color | @bg-color-component | - 
diff --git a/src/pull-down-refresh/pull-down-refresh.en-US.md b/src/pull-down-refresh/pull-down-refresh.en-US.md
index 4cb9dc7f..1d02da5e 100644
--- a/src/pull-down-refresh/pull-down-refresh.en-US.md
+++ b/src/pull-down-refresh/pull-down-refresh.en-US.md
@@ -26,3 +26,10 @@ change | `(value: boolean)` | \-
 refresh | \- | \-
 scrolltolower | \- | \-
 timeout | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-pull-down-refresh-color | @font-gray-3 | - 
diff --git a/src/pull-down-refresh/pull-down-refresh.md b/src/pull-down-refresh/pull-down-refresh.md
index 1dfdd651..a860062b 100644
--- a/src/pull-down-refresh/pull-down-refresh.md
+++ b/src/pull-down-refresh/pull-down-refresh.md
@@ -25,3 +25,10 @@ change | `(value: boolean)` | 下拉或收起时触发，用户手势往下滑
 refresh | \- | 结束下拉时触发
 scrolltolower | \- | 滚动到页面底部时触发
 timeout | \- | 刷新超时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-pull-down-refresh-color | @font-gray-3 | - 
diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md
index 3595bf87..7bad980c 100644
--- a/src/radio/radio.en-US.md
+++ b/src/radio/radio.en-US.md
@@ -50,3 +50,24 @@ onChange | Function |  | Typescript：`(value: T, context: { e: Event }) => void
 name | params | description
 -- | -- | --
 change | `(value: T, context: { e: Event })` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-radio-bg-color | @bg-color-container | - 
+--td-radio-border-color | @component-stroke | - 
+--td-radio-content-color | @font-gray-2 | - 
+--td-radio-content-disabled-color | @text-color-disabled | - 
+--td-radio-content-line-height | 22px | - 
+--td-radio-font-size | 16px | - 
+--td-radio-icon-checked-color | @brand-color | - 
+--td-radio-icon-color | @component-border | - 
+--td-radio-icon-disabled-bg-color | @bg-color-component-disabled | - 
+--td-radio-icon-disabled-color | @brand-color-disabled | - 
+--td-radio-icon-size | 24px | - 
+--td-radio-label-color | @font-gray-1 | - 
+--td-radio-label-disabled-color | @text-color-disabled | - 
+--td-radio-label-line-height | 24px | - 
+--td-radio-vertical-padding | 16px | - 
diff --git a/src/radio/radio.md b/src/radio/radio.md
index 9e38714f..1098dc5c 100644
--- a/src/radio/radio.md
+++ b/src/radio/radio.md
@@ -50,3 +50,24 @@ onChange | Function |  | TS 类型：`(value: T, context: { e: Event }) => void`
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: T, context: { e: Event })` | 选中值发生变化时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-radio-bg-color | @bg-color-container | - 
+--td-radio-border-color | @component-stroke | - 
+--td-radio-content-color | @font-gray-2 | - 
+--td-radio-content-disabled-color | @text-color-disabled | - 
+--td-radio-content-line-height | 22px | - 
+--td-radio-font-size | 16px | - 
+--td-radio-icon-checked-color | @brand-color | - 
+--td-radio-icon-color | @component-border | - 
+--td-radio-icon-disabled-bg-color | @bg-color-component-disabled | - 
+--td-radio-icon-disabled-color | @brand-color-disabled | - 
+--td-radio-icon-size | 24px | - 
+--td-radio-label-color | @font-gray-1 | - 
+--td-radio-label-disabled-color | @text-color-disabled | - 
+--td-radio-label-line-height | 24px | - 
+--td-radio-vertical-padding | 16px | - 
diff --git a/src/rate/rate.en-US.md b/src/rate/rate.en-US.md
index e01094f1..ed6e3d2b 100644
--- a/src/rate/rate.en-US.md
+++ b/src/rate/rate.en-US.md
@@ -24,3 +24,18 @@ onChange | Function |  | Typescript：`(value: number) => void`<br/> | N
 name | params | description
 -- | -- | --
 change | `(value: number)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-rate-disabled-selected-color | @warning-color-3 | - 
+--td-rate-disabled-unselected-color | @gray-color-2 | - 
+--td-rate-icon-scale | 1.33 | - 
+--td-rate-selected-color | @warning-color | - 
+--td-rate-text-active-color | @font-gray-1 | - 
+--td-rate-text-active-font-weight | 600 | - 
+--td-rate-text-color | @font-gray-4 | - 
+--td-rate-text-font-size | @font-size-m | - 
+--td-rate-unselected-color | @bg-color-secondarycomponent | - 
diff --git a/src/rate/rate.md b/src/rate/rate.md
index 3e16bf39..9c0ddfc9 100644
--- a/src/rate/rate.md
+++ b/src/rate/rate.md
@@ -24,3 +24,18 @@ onChange | Function |  | TS 类型：`(value: number) => void`<br/>评分数改
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: number)` | 评分数改变时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-rate-disabled-selected-color | @warning-color-3 | - 
+--td-rate-disabled-unselected-color | @gray-color-2 | - 
+--td-rate-icon-scale | 1.33 | - 
+--td-rate-selected-color | @warning-color | - 
+--td-rate-text-active-color | @font-gray-1 | - 
+--td-rate-text-active-font-weight | 600 | - 
+--td-rate-text-color | @font-gray-4 | - 
+--td-rate-text-font-size | @font-size-m | - 
+--td-rate-unselected-color | @bg-color-secondarycomponent | - 
diff --git a/src/result/result.en-US.md b/src/result/result.en-US.md
index 346fcc1d..41fa6199 100644
--- a/src/result/result.en-US.md
+++ b/src/result/result.en-US.md
@@ -10,3 +10,21 @@ icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](htt
 image | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | default | options：default/success/warning/error | N
 title | String / Slot / Function | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-result-description-color | @font-gray-2 | - 
+--td-result-description-font-size | @font-size-base | - 
+--td-result-description-line-height | 22px | - 
+--td-result-description-margin-top | @spacer | - 
+--td-result-icon-default-color | @brand-color | - 
+--td-result-icon-error-color | @error-color | - 
+--td-result-icon-success-color | @success-color | - 
+--td-result-icon-warning-color | @warning-color | - 
+--td-result-title-color | @font-gray-1 | - 
+--td-result-title-font-size | @font-size-l | - 
+--td-result-title-line-height | 28px | - 
+--td-result-title-margin-top | @spacer-1 | - 
diff --git a/src/result/result.md b/src/result/result.md
index d2339208..8bde4c49 100644
--- a/src/result/result.md
+++ b/src/result/result.md
@@ -10,3 +10,21 @@ icon | Slot / Function | - | 图标名称。TS 类型：`TNode`。[通用类型
 image | String / Slot / Function | - | 图片地址。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | default | 内置主题。。可选项：default/success/warning/error | N
 title | String / Slot / Function | '' | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-result-description-color | @font-gray-2 | - 
+--td-result-description-font-size | @font-size-base | - 
+--td-result-description-line-height | 22px | - 
+--td-result-description-margin-top | @spacer | - 
+--td-result-icon-default-color | @brand-color | - 
+--td-result-icon-error-color | @error-color | - 
+--td-result-icon-success-color | @success-color | - 
+--td-result-icon-warning-color | @warning-color | - 
+--td-result-title-color | @font-gray-1 | - 
+--td-result-title-font-size | @font-size-l | - 
+--td-result-title-line-height | 28px | - 
+--td-result-title-margin-top | @spacer-1 | - 
diff --git a/src/search/search.en-US.md b/src/search/search.en-US.md
index d84cd663..f02c7dac 100644
--- a/src/search/search.en-US.md
+++ b/src/search/search.en-US.md
@@ -36,3 +36,20 @@ clear | `(context: { e: MouseEvent })` | \-
 focus | `(context: { value: string; e: FocusEvent })` | \-
 search | `(context?: { value: string; trigger: 'submit' \| 'option-click' \| 'clear'; e?: InputEvent \| MouseEvent })` | \-
 submit | `(context: { value: string; e: KeyboardEvent })` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--search-label-color | @font-gray-1 | - 
+--td-search-action-color | @brand-color | - 
+--td-search-bg-color | @bg-color-secondarycontainer | - 
+--td-search-clear-icon-color | @font-gray-3 | - 
+--td-search-font-size | @font-size-m | - 
+--td-search-height | 40px | - 
+--td-search-icon-color | @font-gray-3 | - 
+--td-search-padding | 8px 12px | - 
+--td-search-placeholder-color | @font-gray-3 | - 
+--td-search-square-radius | @radius-default | - 
+--td-search-text-color | @font-gray-1 | - 
diff --git a/src/search/search.md b/src/search/search.md
index 0d6ab991..51015863 100644
--- a/src/search/search.md
+++ b/src/search/search.md
@@ -36,3 +36,20 @@ clear | `(context: { e: MouseEvent })` | 点击清除时触发
 focus | `(context: { value: string; e: FocusEvent })` | 获得焦点时触发
 search | `(context?: { value: string; trigger: 'submit' \| 'option-click' \| 'clear'; e?: InputEvent \| MouseEvent })` | 【讨论中】搜索触发，包含：手机键盘提交健、联想关键词点击、清空按钮点击等
 submit | `(context: { value: string; e: KeyboardEvent })` | 提交时触发，如：手机键盘提交按钮点击
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--search-label-color | @font-gray-1 | - 
+--td-search-action-color | @brand-color | - 
+--td-search-bg-color | @bg-color-secondarycontainer | - 
+--td-search-clear-icon-color | @font-gray-3 | - 
+--td-search-font-size | @font-size-m | - 
+--td-search-height | 40px | - 
+--td-search-icon-color | @font-gray-3 | - 
+--td-search-padding | 8px 12px | - 
+--td-search-placeholder-color | @font-gray-3 | - 
+--td-search-square-radius | @radius-default | - 
+--td-search-text-color | @font-gray-1 | - 
diff --git a/src/side-bar/side-bar.en-US.md b/src/side-bar/side-bar.en-US.md
index 1c524055..4170614f 100644
--- a/src/side-bar/side-bar.en-US.md
+++ b/src/side-bar/side-bar.en-US.md
@@ -26,3 +26,21 @@ disabled | Boolean | false | \- | N
 icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 label | String | - | \- | N
 value | String / Number | - | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-side-bar-active-color | @brand-color | - 
+--td-side-bar-bg-color | @bg-color-secondarycontainer | - 
+--td-side-bar-bg-color | @bg-color-secondarycontainer | - 
+--td-side-bar-border-radius | 9px | - 
+--td-side-bar-color | @font-gray-1 | - 
+--td-side-bar-disabled-color | @font-gray-4 | - 
+--td-side-bar-font-size | 16px | - 
+--td-side-bar-height | 100% | - 
+--td-side-bar-icon-size | 20px | - 
+--td-side-bar-item-height | 56px | - 
+--td-side-bar-item-line-height | 24px | - 
+--td-side-bar-width | 103px | - 
diff --git a/src/side-bar/side-bar.md b/src/side-bar/side-bar.md
index 005fc7ce..cb3ffa39 100644
--- a/src/side-bar/side-bar.md
+++ b/src/side-bar/side-bar.md
@@ -26,3 +26,21 @@ disabled | Boolean | false | 是否禁用 | N
 icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 label | String | - | 展示的标签 | N
 value | String / Number | - | 当前选项的值 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-side-bar-active-color | @brand-color | - 
+--td-side-bar-bg-color | @bg-color-secondarycontainer | - 
+--td-side-bar-bg-color | @bg-color-secondarycontainer | - 
+--td-side-bar-border-radius | 9px | - 
+--td-side-bar-color | @font-gray-1 | - 
+--td-side-bar-disabled-color | @font-gray-4 | - 
+--td-side-bar-font-size | 16px | - 
+--td-side-bar-height | 100% | - 
+--td-side-bar-icon-size | 20px | - 
+--td-side-bar-item-height | 56px | - 
+--td-side-bar-item-line-height | 24px | - 
+--td-side-bar-width | 103px | - 
diff --git a/src/skeleton/skeleton.en-US.md b/src/skeleton/skeleton.en-US.md
index 21602f5b..a1a0cd3d 100644
--- a/src/skeleton/skeleton.en-US.md
+++ b/src/skeleton/skeleton.en-US.md
@@ -11,3 +11,19 @@ delay | Number | 0 | \- | N
 loading | Boolean | true | \- | N
 rowCol | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
 theme | String | text | options：avatar/image/text/paragraph | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-skeleton-animation-flashed | rgba(90%, 90%, 90%, .3) | - 
+--td-skeleton-animation-gradient | rgba(0, 0, 0, 4%) | - 
+--td-skeleton-bg-color | @bg-color-page | - 
+--td-skeleton-circle-border-radius | @radius-circle | - 
+--td-skeleton-circle-height | 48px | - 
+--td-skeleton-rect-border-radius | @radius-default | - 
+--td-skeleton-rect-height | 16px | - 
+--td-skeleton-row-spacing | @spacer-2 | - 
+--td-skeleton-text-border-radius | @radius-small | - 
+--td-skeleton-text-height | 16px | - 
diff --git a/src/skeleton/skeleton.md b/src/skeleton/skeleton.md
index 2544d7fb..bbfad9bd 100644
--- a/src/skeleton/skeleton.md
+++ b/src/skeleton/skeleton.md
@@ -10,3 +10,19 @@ delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速
 loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
 rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
 theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：avatar/image/text/paragraph | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-skeleton-animation-flashed | rgba(90%, 90%, 90%, .3) | - 
+--td-skeleton-animation-gradient | rgba(0, 0, 0, 4%) | - 
+--td-skeleton-bg-color | @bg-color-page | - 
+--td-skeleton-circle-border-radius | @radius-circle | - 
+--td-skeleton-circle-height | 48px | - 
+--td-skeleton-rect-border-radius | @radius-default | - 
+--td-skeleton-rect-height | 16px | - 
+--td-skeleton-row-spacing | @spacer-2 | - 
+--td-skeleton-text-border-radius | @radius-small | - 
+--td-skeleton-text-height | 16px | - 
diff --git a/src/slider/slider.en-US.md b/src/slider/slider.en-US.md
index 0a7e7469..f69ee6b7 100644
--- a/src/slider/slider.en-US.md
+++ b/src/slider/slider.en-US.md
@@ -27,3 +27,21 @@ name | params | description
 change | `(value: SliderValue)` | \-
 dragend | \- | \-
 dragstart | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-slider-active-color | @brand-color | - 
+--td-slider-bar-height | 4px | - 
+--td-slider-capsule-bar-color | @bg-color-component | - 
+--td-slider-capsule-bar-heihgt | 24px | - 
+--td-slider-capsule-line-heihgt | 18px | - 
+--td-slider-default-color | @bg-color-component-disabled | - 
+--td-slider-default-color | @bg-color-secondarycomponent | - 
+--td-slider-disabled-color | @brand-color-disabled | - 
+--td-slider-disabled-text-color | @font-gray-4 | - 
+--td-slider-dot-bg-color | @bg-color-container | - 
+--td-slider-dot-color | @bg-color-secondarycontainer | - 
+--td-slider-dot-size | 20px | - 
diff --git a/src/slider/slider.md b/src/slider/slider.md
index 829069fb..9ecaf125 100644
--- a/src/slider/slider.md
+++ b/src/slider/slider.md
@@ -23,3 +23,21 @@ onChange | Function |  | TS 类型：`(value: SliderValue) => void`<br/>滑块
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: SliderValue)` | 滑块值变化时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-slider-active-color | @brand-color | - 
+--td-slider-bar-height | 4px | - 
+--td-slider-capsule-bar-color | @bg-color-component | - 
+--td-slider-capsule-bar-heihgt | 24px | - 
+--td-slider-capsule-line-heihgt | 18px | - 
+--td-slider-default-color | @bg-color-component-disabled | - 
+--td-slider-default-color | @bg-color-secondarycomponent | - 
+--td-slider-disabled-color | @brand-color-disabled | - 
+--td-slider-disabled-text-color | @font-gray-4 | - 
+--td-slider-dot-bg-color | @bg-color-container | - 
+--td-slider-dot-color | @bg-color-secondarycontainer | - 
+--td-slider-dot-size | 20px | - 
diff --git a/src/stepper/stepper.en-US.md b/src/stepper/stepper.en-US.md
index 20fd3427..15a1f179 100644
--- a/src/stepper/stepper.en-US.md
+++ b/src/stepper/stepper.en-US.md
@@ -28,3 +28,14 @@ blur | `(value: string \| number)` | \-
 change | `(value: string \| number)` | \-
 focus | `(value: string \| number)` | \-
 overlimit | `(type: 'minus' \| 'plus')` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-stepper-border-color | @component-border | - 
+--td-stepper-border-radius | @radius-small | - 
+--td-stepper-input-color | @font-gray-1 | - 
+--td-stepper-input-disabled-bg | @bg-color-component-disabled | - 
+--td-stepper-input-disabled-color | @font-gray-4 | - 
diff --git a/src/stepper/stepper.md b/src/stepper/stepper.md
index 9f9163c9..76de4e68 100644
--- a/src/stepper/stepper.md
+++ b/src/stepper/stepper.md
@@ -28,3 +28,14 @@ blur | `(value: string \| number)` | 输入框失去焦点时触发
 change | `(value: string \| number)` | 数值发生变更时触发
 focus | `(value: string \| number)` | 输入框聚焦时触发
 overlimit | `(type: 'minus' \| 'plus')` | 数值超出限制时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-stepper-border-color | @component-border | - 
+--td-stepper-border-radius | @radius-small | - 
+--td-stepper-input-color | @font-gray-1 | - 
+--td-stepper-input-disabled-bg | @bg-color-component-disabled | - 
+--td-stepper-input-disabled-color | @font-gray-4 | - 
diff --git a/src/steps/steps.en-US.md b/src/steps/steps.en-US.md
index d7d9967d..9053bbcf 100644
--- a/src/steps/steps.en-US.md
+++ b/src/steps/steps.en-US.md
@@ -29,3 +29,35 @@ icon | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see
 status | String | default | options：default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/steps/type.ts) | N
 title | String / Slot / Function | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 titleRight | String / Slot / Function | '' |`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-step-item-circle-font-size | 14px | - 
+--td-step-item-circle-size | 22px | - 
+--td-step-item-default-circle-bg | @bg-color-secondarycontainer | - 
+--td-step-item-default-circle-color | @font-gray-3 | - 
+--td-step-item-default-dot-border-color | @component-border | - 
+--td-step-item-default-icon-color | @font-gray-3 | - 
+--td-step-item-default-title-color | @font-gray-3 | - 
+--td-step-item-description-color | @font-gray-3 | - 
+--td-step-item-dot-size | 8px | - 
+--td-step-item-error-circle-bg | @error-color-1 | - 
+--td-step-item-error-circle-color | @error-color | - 
+--td-step-item-error-dot-border-color | @error-color | - 
+--td-step-item-error-icon-color | @error-color | - 
+--td-step-item-error-title-color | @error-color | - 
+--td-step-item-finish-circle-bg | @brand-color-light | - 
+--td-step-item-finish-circle-color | @brand-color | - 
+--td-step-item-finish-dot-border-color | @brand-color | - 
+--td-step-item-finish-icon-color | @brand-color | - 
+--td-step-item-finish-line-color | @brand-color | - 
+--td-step-item-finish-title-color | @font-gray-1 | - 
+--td-step-item-line-color | @component-border | - 
+--td-step-item-process-circle-bg | @brand-color | - 
+--td-step-item-process-circle-color | @font-white-1 | - 
+--td-step-item-process-dot-border-color | @brand-color | - 
+--td-step-item-process-icon-color | @brand-color | - 
+--td-step-item-process-title-color | @brand-color | - 
diff --git a/src/steps/steps.md b/src/steps/steps.md
index 8002d059..1c955cd9 100644
--- a/src/steps/steps.md
+++ b/src/steps/steps.md
@@ -3,30 +3,62 @@
 ## API
 ### Steps Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-current | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。支持语法糖 `v-model` 或 `v-model:current` | N
-defaultCurrent | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N
-currentStatus | String | process | 用于控制 current 指向的步骤条的状态。可选项：default/process/finish/error | N
-layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
-readonly | Boolean | false | 只读状态 | N
-theme | String | default | 步骤条风格。可选项：default/dot | N
-sequence | String | positive | 步骤条顺序。可选项：positive/reverse | N
-onChange | Function |  | TS 类型：`(current: string \| number, previous: string \| number, context?: { e?: MouseEvent }) => void`<br/>当前步骤发生变化时触发 | N
+| 名称           | 类型            | 默认值     | 说明                                                                                                                                                                                                                                                                                                                              | 必传 |
+| -------------- | --------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| current        | String / Number | -          | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。支持语法糖 `v-model` 或 `v-model:current` | N    |
+| defaultCurrent | String / Number | -          | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性                                | N    |
+| currentStatus  | String          | process    | 用于控制 current 指向的步骤条的状态。可选项：default/process/finish/error                                                                                                                                                                                                                                                         | N    |
+| layout         | String          | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical                                                                                                                                                                                                                                                                       | N    |
+| readonly       | Boolean         | false      | 只读状态                                                                                                                                                                                                                                                                                                                          | N    |
+| theme          | String          | default    | 步骤条风格。可选项：default/dot                                                                                                                                                                                                                                                                                                   | N    |
+| sequence       | String          | positive   | 步骤条顺序。可选项：positive/reverse                                                                                                                                                                                                                                                                                              | N    |
+| onChange       | Function        |            | TS 类型：`(current: string \| number, previous: string \| number, context?: { e?: MouseEvent }) => void`<br/>当前步骤发生变化时触发                                                                                                                                                                                               | N    |
 
 ### Steps Events
 
-名称 | 参数 | 描述
--- | -- | --
-change | `(current: string \| number, previous: string \| number, context?: { e?: MouseEvent })` | 当前步骤发生变化时触发
+| 名称   | 参数                                                                                    | 描述                   |
+| ------ | --------------------------------------------------------------------------------------- | ---------------------- |
+| change | `(current: string \| number, previous: string \| number, context?: { e?: MouseEvent })` | 当前步骤发生变化时触发 |
 
 ### StepItem Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-content | String / Slot / Function | '' | 步骤描述。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-icon | Boolean / Slot / Function | true | 图标，默认显示内置图标，也可以自定义图标，值为 false 则不显示图标。优先级大于 `status` 定义的图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-status | String | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/steps/type.ts) | N
-title | String / Slot / Function | '' | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-titleRight | String / Slot / Function | '' | 标题右侧数据 仅支持 layout  = 'vertical' 时。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+| 名称       | 类型                      | 默认值  | 说明                                                                                                                                                                                                                                                                                            | 必传 |
+| ---------- | ------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| content    | String / Slot / Function  | ''      | 步骤描述。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)                                                                                                                                                                  | N    |
+| icon       | Boolean / Slot / Function | true    | 图标，默认显示内置图标，也可以自定义图标，值为 false 则不显示图标。优先级大于 `status` 定义的图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)                                                                        | N    |
+| status     | String                    | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/steps/type.ts) | N    |
+| title      | String / Slot / Function  | ''      | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)                                                                                                                                                                      | N    |
+| titleRight | String / Slot / Function  | ''      | 标题右侧数据 仅支持 layout  = 'vertical' 时。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)                                                                                                                               | N    |
 
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称                                    | 默认值                       | 描述 |
+| --------------------------------------- | ---------------------------- | ---- |
+| --td-step-item-circle-font-size         | 14px                         | -    |
+| --td-step-item-circle-size              | 22px                         | -    |
+| --td-step-item-default-circle-bg        | @bg-color-secondarycontainer | -    |
+| --td-step-item-default-circle-color     | @font-gray-3                 | -    |
+| --td-step-item-default-dot-border-color | @component-border            | -    |
+| --td-step-item-default-icon-color       | @font-gray-3                 | -    |
+| --td-step-item-default-title-color      | @font-gray-3                 | -    |
+| --td-step-item-description-color        | @font-gray-3                 | -    |
+| --td-step-item-dot-size                 | 8px                          | -    |
+| --td-step-item-error-circle-bg          | @error-color-1               | -    |
+| --td-step-item-error-circle-color       | @error-color                 | -    |
+| --td-step-item-error-dot-border-color   | @error-color                 | -    |
+| --td-step-item-error-icon-color         | @error-color                 | -    |
+| --td-step-item-error-title-color        | @error-color                 | -    |
+| --td-step-item-finish-circle-bg         | @brand-color-light           | -    |
+| --td-step-item-finish-circle-color      | @brand-color                 | -    |
+| --td-step-item-finish-dot-border-color  | @brand-color                 | -    |
+| --td-step-item-finish-icon-color        | @brand-color                 | -    |
+| --td-step-item-finish-line-color        | @brand-color                 | -    |
+| --td-step-item-finish-title-color       | @font-gray-1                 | -    |
+| --td-step-item-line-color               | @component-border            | -    |
+| --td-step-item-process-circle-bg        | @brand-color                 | -    |
+| --td-step-item-process-circle-color     | @font-white-1                | -    |
+| --td-step-item-process-dot-border-color | @brand-color                 | -    |
+| --td-step-item-process-icon-color       | @brand-color                 | -    |
+| --td-step-item-process-title-color      | @brand-color                 | -    |
diff --git a/src/swiper/swiper.en-US.md b/src/swiper/swiper.en-US.md
index 1cddabc4..8b62fa02 100644
--- a/src/swiper/swiper.en-US.md
+++ b/src/swiper/swiper.en-US.md
@@ -36,3 +36,21 @@ paginationPosition | String | bottom | options：top-left/top/top-right/bottom-l
 placement | String | inside | options：inside/outside | N
 showControls | Boolean | false | \- | N
 type | String | dots | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts) | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-swiper-nav-btn-bg-color | @font-gray-3 | - 
+--td-swiper-nav-btn-color | @font-white-1 | - 
+--td-swiper-nav-btn-size | 24px | - 
+--td-swiper-nav-dot-active-color | @font-white-1 | - 
+--td-swiper-nav-dot-color | @font-white-2 | - 
+--td-swiper-nav-dot-size | 6px | - 
+--td-swiper-nav-dots-bar-active-width | 20px | - 
+--td-swiper-nav-fraction-bg-color | @font-gray-3 | - 
+--td-swiper-nav-fraction-color | @font-white-1 | - 
+--td-swiper-nav-fraction-font-size | 12px | - 
+--td-swiper-nav-fraction-height | 24px | - 
+--td-swiper-border-radius | 8px | - 
diff --git a/src/swiper/swiper.md b/src/swiper/swiper.md
index 6b789b96..93fb0bc9 100644
--- a/src/swiper/swiper.md
+++ b/src/swiper/swiper.md
@@ -35,3 +35,21 @@ paginationPosition | String | bottom | 页码信息展示位置。可选项：to
 placement | String | inside | 导航器位置，位于主体的内侧或是外侧。可选项：inside/outside | N
 showControls | Boolean | false | 是否显示两侧的控制按钮 | N
 type | String | dots | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts) | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-swiper-nav-btn-bg-color | @font-gray-3 | - 
+--td-swiper-nav-btn-color | @font-white-1 | - 
+--td-swiper-nav-btn-size | 24px | - 
+--td-swiper-nav-dot-active-color | @font-white-1 | - 
+--td-swiper-nav-dot-color | @font-white-2 | - 
+--td-swiper-nav-dot-size | 6px | - 
+--td-swiper-nav-dots-bar-active-width | 20px | - 
+--td-swiper-nav-fraction-bg-color | @font-gray-3 | - 
+--td-swiper-nav-fraction-color | @font-white-1 | - 
+--td-swiper-nav-fraction-font-size | 12px | - 
+--td-swiper-nav-fraction-height | 24px | - 
+--td-swiper-border-radius | 8px | - 
diff --git a/src/switch/switch.en-US.md b/src/switch/switch.en-US.md
index ca94f820..4db5206a 100644
--- a/src/switch/switch.en-US.md
+++ b/src/switch/switch.en-US.md
@@ -20,3 +20,40 @@ onChange | Function |  | Typescript：`(value: T, context: { e: MouseEvent }) =>
 name | params | description
 -- | -- | --
 change | `(value: T, context: { e: MouseEvent })` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-switch-checked-color | @brand-color | - 
+--td-switch-checked-disabled-color | @brand-color-disabled | - 
+--td-switch-dot-border-color | @bg-color-secondarycontainer | - 
+--td-switch-dot-horizontal-margin | 3px | - 
+--td-switch-dot-large-size | 26px | - 
+--td-switch-dot-plain-horizontal-margin | 5px | - 
+--td-switch-dot-plain-large-size | 22px | - 
+--td-switch-dot-plain-size | 18px | - 
+--td-switch-dot-plain-small-size | 14px | - 
+--td-switch-dot-shadow | @shadow-1 | - 
+--td-switch-dot-size | 22px | - 
+--td-switch-dot-small-size | 18px | - 
+--td-switch-height | 28px | - 
+--td-switch-icon-large-size | 24px | - 
+--td-switch-icon-size | 20px | - 
+--td-switch-icon-small-size | 16px | - 
+--td-switch-label-checked-color | @switch-checked-color | - 
+--td-switch-label-color | @font-gray-4 | - 
+--td-switch-large-height | 32px | - 
+--td-switch-large-radius | calc(@switch-large-height / 2) | - 
+--td-switch-large-width | 52px | - 
+--td-switch-radius | calc(@switch-height / 2) | - 
+--td-switch-small-height | 24px | - 
+--td-switch-small-radius | calc(@switch-small-height / 2) | - 
+--td-switch-small-width | 39px | - 
+--td-switch-unchecked-color | @font-gray-4 | - 
+--td-switch-unchecked-disabled-color | @bg-color-component-disabled | - 
+--td-switch-width | 45px | - 
+--td-switch-label-font-size | 12px | - 
+--td-switch-label-font-size | 14px | - 
+--td-switch-label-font-size | 16px | - 
diff --git a/src/switch/switch.md b/src/switch/switch.md
index 099315cf..b4f88511 100644
--- a/src/switch/switch.md
+++ b/src/switch/switch.md
@@ -20,3 +20,40 @@ onChange | Function |  | TS 类型：`(value: T, context: { e: MouseEvent }) =>
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: T, context: { e: MouseEvent })` | 数据发生变化时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-switch-checked-color | @brand-color | - 
+--td-switch-checked-disabled-color | @brand-color-disabled | - 
+--td-switch-dot-border-color | @bg-color-secondarycontainer | - 
+--td-switch-dot-horizontal-margin | 3px | - 
+--td-switch-dot-large-size | 26px | - 
+--td-switch-dot-plain-horizontal-margin | 5px | - 
+--td-switch-dot-plain-large-size | 22px | - 
+--td-switch-dot-plain-size | 18px | - 
+--td-switch-dot-plain-small-size | 14px | - 
+--td-switch-dot-shadow | @shadow-1 | - 
+--td-switch-dot-size | 22px | - 
+--td-switch-dot-small-size | 18px | - 
+--td-switch-height | 28px | - 
+--td-switch-icon-large-size | 24px | - 
+--td-switch-icon-size | 20px | - 
+--td-switch-icon-small-size | 16px | - 
+--td-switch-label-checked-color | @switch-checked-color | - 
+--td-switch-label-color | @font-gray-4 | - 
+--td-switch-large-height | 32px | - 
+--td-switch-large-radius | calc(@switch-large-height / 2) | - 
+--td-switch-large-width | 52px | - 
+--td-switch-radius | calc(@switch-height / 2) | - 
+--td-switch-small-height | 24px | - 
+--td-switch-small-radius | calc(@switch-small-height / 2) | - 
+--td-switch-small-width | 39px | - 
+--td-switch-unchecked-color | @font-gray-4 | - 
+--td-switch-unchecked-disabled-color | @bg-color-component-disabled | - 
+--td-switch-width | 45px | - 
+--td-switch-label-font-size | 12px | - 
+--td-switch-label-font-size | 14px | - 
+--td-switch-label-font-size | 16px | - 
diff --git a/src/tab-bar/tab-bar.en-US.md b/src/tab-bar/tab-bar.en-US.md
index 2a8d8806..2f52d83f 100644
--- a/src/tab-bar/tab-bar.en-US.md
+++ b/src/tab-bar/tab-bar.en-US.md
@@ -29,3 +29,20 @@ badgeProps | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./ba
 icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 subTabBar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tab-bar/type.ts) | N
 value | String / Number | - | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tab-bar-active-bg | @brand-color-light | - 
+--td-tab-bar-active-color | @brand-color | - 
+--td-tab-bar-bg-color | @bg-color-container | - 
+--td-tab-bar-border-color | @border-color | - 
+--td-tab-bar-color | @font-gray-1 | - 
+--td-tab-bar-height | 40px | - 
+--td-tab-bar-hover-bg-color | rgba(0, 0, 0, .05) | - 
+--td-tab-bar-spread-border-color | @border-color | - 
+--td-tab-bar-spread-shadow | @shadow-3 | - 
+--td-tab-bar-border-color | @border-color | - 
+--td-tab-bar-round-shadow | @shadow-3 | - 
diff --git a/src/tab-bar/tab-bar.md b/src/tab-bar/tab-bar.md
index fa89012a..f96c064f 100644
--- a/src/tab-bar/tab-bar.md
+++ b/src/tab-bar/tab-bar.md
@@ -29,3 +29,20 @@ badgeProps | Object | - | 图标右上角提示信息。TS 类型：`BadgeProps`
 icon | Slot / Function | - | 图标名称。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 subTabBar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tab-bar/type.ts) | N
 value | String / Number | - | 标识符 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-tab-bar-active-bg | @brand-color-light | - 
+--td-tab-bar-active-color | @brand-color | - 
+--td-tab-bar-bg-color | @bg-color-container | - 
+--td-tab-bar-border-color | @border-color | - 
+--td-tab-bar-color | @font-gray-1 | - 
+--td-tab-bar-height | 40px | - 
+--td-tab-bar-hover-bg-color | rgba(0, 0, 0, .05) | - 
+--td-tab-bar-spread-border-color | @border-color | - 
+--td-tab-bar-spread-shadow | @shadow-3 | - 
+--td-tab-bar-border-color | @border-color | - 
+--td-tab-bar-round-shadow | @shadow-3 | - 
diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md
index 0427cf9b..850eb971 100644
--- a/src/tabs/tabs.en-US.md
+++ b/src/tabs/tabs.en-US.md
@@ -38,3 +38,26 @@ disabled | Boolean | false | \- | N
 label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 panel | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 value | String / Number | - | Typescript：`TabValue` | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tab-border-color | @component-stroke | - 
+--td-tab-font-size | 14px | - 
+--td-tab-icon-size | 16px | - 
+--td-tab-track-color | @brand-color | - 
+--td-tab-track-radius | 4px | - 
+--td-tab-track-thickness | 3px | - 
+--td-tab-track-width | 16px | - 
+--td-tab-nav-bg-color | @bg-color-container | - 
+--td-tab-item-active-color | @brand-color | - 
+--td-tab-item-color | @font-gray-1 | - 
+--td-tab-item-disabled-color | @font-gray-4 | - 
+--td-tab-item-height | 48px | - 
+--td-tab-item-tag-active-bg | @brand-color-light | - 
+--td-tab-item-tag-bg | @bg-color-secondarycontainer | - 
+--td-tab-item-tag-height | 32px | - 
+--td-tab-item-vertical-height | 54px | - 
+--td-tab-item-vertical-width | 104px | - 
diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md
index 1a4cc9da..398ab9bf 100644
--- a/src/tabs/tabs.md
+++ b/src/tabs/tabs.md
@@ -38,3 +38,26 @@ disabled | Boolean | false | 是否禁用当前选项卡 | N
 label | String / Slot / Function | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 panel | String / Slot / Function | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-tab-border-color | @component-stroke | - 
+--td-tab-font-size | 14px | - 
+--td-tab-icon-size | 16px | - 
+--td-tab-track-color | @brand-color | - 
+--td-tab-track-radius | 4px | - 
+--td-tab-track-thickness | 3px | - 
+--td-tab-track-width | 16px | - 
+--td-tab-nav-bg-color | @bg-color-container | - 
+--td-tab-item-active-color | @brand-color | - 
+--td-tab-item-color | @font-gray-1 | - 
+--td-tab-item-disabled-color | @font-gray-4 | - 
+--td-tab-item-height | 48px | - 
+--td-tab-item-tag-active-bg | @brand-color-light | - 
+--td-tab-item-tag-bg | @bg-color-secondarycontainer | - 
+--td-tab-item-tag-height | 32px | - 
+--td-tab-item-vertical-height | 54px | - 
+--td-tab-item-vertical-width | 104px | - 
\ No newline at end of file
diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md
index fc9b3c83..7b306717 100644
--- a/src/tag/tag.en-US.md
+++ b/src/tag/tag.en-US.md
@@ -48,3 +48,44 @@ name | params | description
 -- | -- | --
 change | `(checked: boolean)` | \-
 click | `(context: { e: MouseEvent })` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tag-danger-color | @error-color | - 
+--td-tag-danger-light-color | @error-color-1 | - 
+--td-tag-default-color | @bg-color-component | - 
+--td-tag-default-font-color | @font-gray-1 | - 
+--td-tag-default-light-color | @bg-color-secondarycontainer | - 
+--td-tag-disabled-background-color | @bg-color-component-disabled | - 
+--td-tag-disabled-border-color | @component-border | - 
+--td-tag-disabled-color | @font-gray-4 | - 
+--td-tag-extra-large-font-size | @font-size-base | - 
+--td-tag-extra-large-height | 40px | - 
+--td-tag-extra-large-icon-size | 16px | - 
+--td-tag-extra-large-padding | 16px - 1px | - 
+--td-tag-large-font-size | @font-size-base | - 
+--td-tag-large-height | 28px | - 
+--td-tag-large-icon-size | 16px | - 
+--td-tag-large-padding | 8px - 1px | - 
+--td-tag-medium-font-size | @font-size-s | - 
+--td-tag-medium-height | 24px | - 
+--td-tag-medium-icon-size | 14px | - 
+--td-tag-medium-padding | 8px - 1px | - 
+--td-tag-outline-bg-color | @bg-color-container | - 
+--td-tag-primary-color | @brand-color | - 
+--td-tag-primary-light-color | @brand-color-light | - 
+--td-tag-small-font-size | @font-size | - 
+--td-tag-small-height | 20px | - 
+--td-tag-small-icon-size | 12px | - 
+--td-tag-small-padding | 6px - 1px | - 
+--td-tag-square-border-radius | 4px | - 
+--td-tag-success-color | @success-color | - 
+--td-tag-success-light-color | @success-color-1 | - 
+--td-tag-warning-color | @warning-color | - 
+--td-tag-warning-light-color | @warning-color-1 | - 
+--td-tag-close-icon-color | @font-gray-3 | - 
+--td-tag-mark-border-radius | @tag-round-border-radius | - 
+--td-tag-round-border-radius | 999px | - 
\ No newline at end of file
diff --git a/src/tag/tag.md b/src/tag/tag.md
index 06534af6..36f934cd 100644
--- a/src/tag/tag.md
+++ b/src/tag/tag.md
@@ -48,3 +48,44 @@ onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 -- | -- | --
 change | `(checked: boolean)` | 状态切换时触发
 click | `(context: { e: MouseEvent })` | 点击标签时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-tag-danger-color | @error-color | - 
+--td-tag-danger-light-color | @error-color-1 | - 
+--td-tag-default-color | @bg-color-component | - 
+--td-tag-default-font-color | @font-gray-1 | - 
+--td-tag-default-light-color | @bg-color-secondarycontainer | - 
+--td-tag-disabled-background-color | @bg-color-component-disabled | - 
+--td-tag-disabled-border-color | @component-border | - 
+--td-tag-disabled-color | @font-gray-4 | - 
+--td-tag-extra-large-font-size | @font-size-base | - 
+--td-tag-extra-large-height | 40px | - 
+--td-tag-extra-large-icon-size | 16px | - 
+--td-tag-extra-large-padding | 16px - 1px | - 
+--td-tag-large-font-size | @font-size-base | - 
+--td-tag-large-height | 28px | - 
+--td-tag-large-icon-size | 16px | - 
+--td-tag-large-padding | 8px - 1px | - 
+--td-tag-medium-font-size | @font-size-s | - 
+--td-tag-medium-height | 24px | - 
+--td-tag-medium-icon-size | 14px | - 
+--td-tag-medium-padding | 8px - 1px | - 
+--td-tag-outline-bg-color | @bg-color-container | - 
+--td-tag-primary-color | @brand-color | - 
+--td-tag-primary-light-color | @brand-color-light | - 
+--td-tag-small-font-size | @font-size | - 
+--td-tag-small-height | 20px | - 
+--td-tag-small-icon-size | 12px | - 
+--td-tag-small-padding | 6px - 1px | - 
+--td-tag-square-border-radius | 4px | - 
+--td-tag-success-color | @success-color | - 
+--td-tag-success-light-color | @success-color-1 | - 
+--td-tag-warning-color | @warning-color | - 
+--td-tag-warning-light-color | @warning-color-1 | - 
+--td-tag-close-icon-color | @font-gray-3 | - 
+--td-tag-mark-border-radius | @tag-round-border-radius | - 
+--td-tag-round-border-radius | 999px | - 
\ No newline at end of file
diff --git a/src/textarea/textarea.en-US.md b/src/textarea/textarea.en-US.md
index e5a72112..3d466963 100644
--- a/src/textarea/textarea.en-US.md
+++ b/src/textarea/textarea.en-US.md
@@ -30,3 +30,19 @@ name | params | description
 blur | `(value: TextareaValue, context: { e: FocusEvent })` | \-
 change | `(value: TextareaValue, context?: { e?: InputEvent })` | \-
 focus | `(value: TextareaValue, context : { e: FocusEvent })` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-textarea-background-color | @bg-color-container | - 
+--td-textarea-border-color | rgba(220, 220, 220, 1) | - 
+--td-textarea-border-radius | @radius-default | - 
+--td-textarea-disabled-text-color | @font-gray-4 | - 
+--td-textarea-indicator-text-color | @font-gray-3 | - 
+--td-textarea-label-color | @font-gray-1 | - 
+--td-textarea-label-width | 64px | - 
+--td-textarea-padding | @textarea-vertical-padding @textarea-horizontal-padding | - 
+--td-textarea-placeholder-color | @font-gray-3 | - 
+--td-textarea-text-color | @font-gray-1 | - 
diff --git a/src/textarea/textarea.md b/src/textarea/textarea.md
index 4b6ab8fc..2de39024 100644
--- a/src/textarea/textarea.md
+++ b/src/textarea/textarea.md
@@ -30,3 +30,19 @@ onFocus | Function |  | TS 类型：`(value: TextareaValue, context : { e: Focus
 blur | `(value: TextareaValue, context: { e: FocusEvent })` | 失去焦点时触发
 change | `(value: TextareaValue, context?: { e?: InputEvent })` | 输入内容变化时触发
 focus | `(value: TextareaValue, context : { e: FocusEvent })` | 获得焦点时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-textarea-background-color | @bg-color-container | - 
+--td-textarea-border-color | rgba(220, 220, 220, 1) | - 
+--td-textarea-border-radius | @radius-default | - 
+--td-textarea-disabled-text-color | @font-gray-4 | - 
+--td-textarea-indicator-text-color | @font-gray-3 | - 
+--td-textarea-label-color | @font-gray-1 | - 
+--td-textarea-label-width | 64px | - 
+--td-textarea-padding | @textarea-vertical-padding @textarea-horizontal-padding | - 
+--td-textarea-placeholder-color | @font-gray-3 | - 
+--td-textarea-text-color | @font-gray-1 | - 
diff --git a/src/toast/toast.en-US.md b/src/toast/toast.en-US.md
index 77faaec7..368af612 100644
--- a/src/toast/toast.en-US.md
+++ b/src/toast/toast.en-US.md
@@ -22,3 +22,15 @@ name | params | description
 -- | -- | --
 close | \- | \-
 Destroy | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-toast-bg-color | @font-gray-1 | - 
+--td-toast-color | @font-white-1 | - 
+--td-toast-column-icon-size | 32px | - 
+--td-toast-max-width | 187px | - 
+--td-toast-radius | 4px | - 
+--td-toast-row-icon-size | 24px | - 
diff --git a/src/toast/toast.md b/src/toast/toast.md
index 3d07c945..1303c4b7 100644
--- a/src/toast/toast.md
+++ b/src/toast/toast.md
@@ -23,3 +23,15 @@ onDestroy | Function |  | TS 类型：`() => void`<br/>轻提示销毁的时候
 -- | -- | --
 close | \- | 轻提示隐藏的时候触发
 destroy | \- | 轻提示销毁的时候触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-toast-bg-color | @font-gray-1 | - 
+--td-toast-color | @font-white-1 | - 
+--td-toast-column-icon-size | 32px | - 
+--td-toast-max-width | 187px | - 
+--td-toast-radius | 4px | - 
+--td-toast-row-icon-size | 24px | - 
diff --git a/src/toast/toast.vue b/src/toast/toast.vue
index 1c54ca80..8dfb91c4 100644
--- a/src/toast/toast.vue
+++ b/src/toast/toast.vue
@@ -22,7 +22,7 @@ import config from '../config';
 
 const { prefix } = config;
 const name = `${prefix}-toast`;
-const bodyLockClass = `${prefix}-overflow-hidden`;
+const bodyLockClass = `${name}-overflow-hidden`;
 
 export default defineComponent({
   name,
diff --git a/src/upload/upload.en-US.md b/src/upload/upload.en-US.md
index 18de307f..11034f3f 100644
--- a/src/upload/upload.en-US.md
+++ b/src/upload/upload.en-US.md
@@ -65,3 +65,17 @@ type | String | - | \- | N
 uploadTime | String | - | upload time | N
 url | String | - | \- | N
 `PlainObject` | \- | - | `PlainObject` is not an attribute of UploadFile，it means you can add and attributes to UploadFile, `type PlainObject = {[key: string]: any}`' | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-upload-add-color | @font-gray-3 | - 
+--td-upload-add-icon-font-size | 28px | - 
+--td-upload-background | @upload-add-bg-color | - 
+--td-upload-delete-icon-color | @font-white-1 | - 
+--td-upload-grid-columns | 4 | - 
+--td-upload-height | 80px | - 
+--td-upload-radius | @radius-default | - 
+--td-upload-width | 80px | - 
diff --git a/src/upload/upload.md b/src/upload/upload.md
index 38af621e..3359f889 100644
--- a/src/upload/upload.md
+++ b/src/upload/upload.md
@@ -65,3 +65,17 @@ type | String | - | 文件类型 | N
 uploadTime | String | - | 上传时间 | N
 url | String | - | 文件上传成功后的下载/访问地址 | N
 `PlainObject` | \- | - | `PlainObject` 不是 UploadFile 中的属性，而表示 UploadFile 本身支持添加任意属性，`type PlainObject = {[key: string]: any}`' | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-upload-add-color | @font-gray-3 | - 
+--td-upload-add-icon-font-size | 28px | - 
+--td-upload-background | @upload-add-bg-color | - 
+--td-upload-delete-icon-color | @font-white-1 | - 
+--td-upload-grid-columns | 4 | - 
+--td-upload-height | 80px | - 
+--td-upload-radius | @radius-default | - 
+--td-upload-width | 80px | - 


Test patch:
diff --git a/scripts/test/generate-css-vars.js b/scripts/test/generate-css-vars.js
new file mode 100644
index 00000000..92aecc7e
--- /dev/null
+++ b/scripts/test/generate-css-vars.js
@@ -0,0 +1,77 @@
+const fs = require('fs');
+const path = require('path');
+
+const combine = {
+  avatar: ['avatar-group', 'avatar'],
+  cell: ['cell-group', 'cell'],
+  collapse: ['collapse', 'collapse-panel'],
+  'dropdown-menu': ['dropdown-menu', 'dropdown-item'],
+  tag: ['tag', 'check-tag'],
+  checkbox: ['checkbox-group', 'checkbox'],
+  indexes: ['indexes', 'indexes-anchor'],
+  picker: ['picker', 'picker-item'],
+  radio: ['radio-group', 'radio'],
+  'side-bar': ['side-bar', 'side-bar-item'],
+  steps: ['steps', 'step-item'],
+  swiper: ['swiper', 'swiper-nav'],
+  tabs: ['tabs', 'tab-panel'],
+  'tab-bar': ['tab-bar', 'tab-bar-item'],
+  grid: ['grid', 'grid-item'],
+};
+
+function resolveCwd(...args) {
+  args.unshift(process.cwd());
+  return path.join(...args);
+}
+
+const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面
+
+const matchReg = /(?<=var).*?(?=\;)/g;
+
+function findFilePath(componentName) {
+  const path = resolveCwd(`src/_common/style/mobile/components/${componentName}/v2/_var.less`);
+  if (fs.existsSync(path)) {
+    return path;
+  }
+
+  return resolveCwd(`src/_common/style/mobile/components/${componentName}/_var.less`);
+}
+
+// 使用 v2 文件夹下 _var.less 文件
+const lessPath = [];
+if (combine[COMPONENT_NAME]) {
+  combine[COMPONENT_NAME].forEach((item) => {
+    lessPath.push(findFilePath(item));
+  });
+} else {
+  lessPath.push(findFilePath(COMPONENT_NAME));
+}
+
+// 追加到文件
+const cssVariableHeadContent = `\n\n### CSS 变量\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`;
+const cssVariableHeadContentEn = `\n\n### CSS Variables\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`;
+
+fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.md`), cssVariableHeadContent);
+fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.en-US.md`), cssVariableHeadContentEn);
+
+// 读取 less 文件内容
+lessPath.forEach((item) => {
+  if (fs.existsSync(item)) {
+    fs.readFile(item, 'utf8', (err, file) => {
+      if (err) {
+        console.log('please execute npm run update:css first!', err);
+        return;
+      }
+      const list = file.match(matchReg)?.sort();
+      let cssVariableBodyContent = '';
+      list?.forEach((item) => {
+        cssVariableBodyContent += `${item.slice(1, item.indexOf(','))} | ${item.slice(
+          item.indexOf(',') + 2,
+          item.length - 1,
+        )} | - \n`;
+      });
+      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.md`), cssVariableBodyContent);
+      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.en-US.md`), cssVariableBodyContent);
+    });
+  }
+});
diff --git a/src/toast/__test__/index.test.jsx b/src/toast/__test__/index.test.jsx
index d4e9f15b..707651bb 100644
--- a/src/toast/__test__/index.test.jsx
+++ b/src/toast/__test__/index.test.jsx
@@ -6,7 +6,7 @@ import { LoadingIcon } from 'tdesign-icons-vue-next';
 
 import config from '../../config';
 const { prefix } = config;
-const bodyLockClass = `${prefix}-overflow-hidden`;
+const bodyLockClass = `${prefix}-toast-overflow-hidden`;
 
 describe('Toast', () => {
   describe('props', () => {