docs: update other coponents

scripts/test/generate-css-vars.js

@@ -23,14 +23,23 @@ const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在
 
 const matchReg = /(?<=var).*?(?=\;)/g;
 
-// 使用 v2 文件夹下变量文件
+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].map((item, index) => {
-    lessPath.push(resolveCwd(`src/_common/style/mobile/components/${item}/v2/_var.less`));
+    lessPath.push(findFilePath(item));
   });
 } else {
-  lessPath.push(resolveCwd(`src/_common/style/mobile/components/${COMPONENT_NAME}/v2/_var.less`));
+  lessPath.push(findFilePath(COMPONENT_NAME));
 }
 
 // 追加到文件
@@ -48,9 +57,9 @@ lessPath.map((item, index) => {
         console.log('please execute npm run update:css first!', err);
         return;
       }
-      const list = file.match(matchReg).sort();
+      const list = file.match(matchReg)?.sort();
       let cssVariableBodyContent = '';
-      list.map((item, index) => {
+      list?.map((item, index) => {
         cssVariableBodyContent += `${item.slice(1, item.indexOf(','))} | ${item.slice(
           item.indexOf(',') + 2,
           item.length - 1,

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 | - 

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 | - 

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-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-group-margin-left-large | -8px | - 
+--td-avatar-group-margin-left-medium | -6px | - 
+--td-avatar-group-margin-left-small | -4px | - 
+--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 | - 

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-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-group-margin-left-large | -8px | - 
+--td-avatar-group-margin-left-medium | -6px | - 
+--td-avatar-group-margin-left-small | -4px | - 
+--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 | - 

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 | - 

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 | - 

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 | - 

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 | - 

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 | - 

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 | - 

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 | - 

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 | - 

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 | - 

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 | -