docs: components add css var

src/packages/__VUE/actionsheet/doc.en-US.md

@@ -336,3 +336,19 @@ export default {
 | choose | Triggered after selection       | item, index |
 | cancel | Triggered when cancel copy is clicked | -                              |
 | close | Triggered when the mask layer is clicked | event: Event                              |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component]()。
+
+| Name                                    | Default Value                     | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-actionsheet-light-color           | _#f6f6f6_                  | -    |
+| --nut-actionsheet-item-border-bottom     | _none_                     | -    |
+|  --nut-actionsheet-item-font-size        | _var(--nut-font-size-2)_   | -    |
+|  --nut-actionsheet-item-subdesc-font-size| _var(--nut-font-size-1)_   | -    |
+|  --nut-actionsheet-item-cancel-border-top| _1px solid var(--nut-actionsheet-light-color)_ | -    |
+|  --nut-actionsheet-item-line-height      | _24px_                     | -    |
+|   --nut-actionsheet-item-font-color       | _var(--nut-title-color)_   | -    |

src/packages/__VUE/actionsheet/doc.md

@@ -340,3 +340,19 @@ export default {
 | choose | 选择之后触发       | 选中列表项item, 选中的索引值index |
 | cancel | 点击取消文案时触发 | 无                                |
 | close | 点击遮罩层时触发 | event: Event                              |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件]()。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-actionsheet-light-color           | _#f6f6f6_                  | -    |
+| --nut-actionsheet-item-border-bottom     | _none_                     | -    |
+|  --nut-actionsheet-item-font-size        | _var(--nut-font-size-2)_   | -    |
+|  --nut-actionsheet-item-subdesc-font-size| _var(--nut-font-size-1)_   | -    |
+|  --nut-actionsheet-item-cancel-border-top| _1px solid var(--nut-actionsheet-light-color)_ | -    |
+|  --nut-actionsheet-item-line-height      | _24px_                     | -    |
+|   --nut-actionsheet-item-font-color       | _var(--nut-title-color)_   | -    |

src/packages/__VUE/actionsheet/doc.taro.md

@@ -340,3 +340,20 @@ export default {
 | choose | 选择之后触发       | 选中列表项item, 选中的索引值index |
 | cancel | 点击取消文案时触发 | 无                                |
 | close | 点击遮罩层时触发 | event: Event                              |
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件]()。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-actionsheet-light-color           | _#f6f6f6_                  | -    |
+| --nut-actionsheet-item-border-bottom     | _none_                     | -    |
+|  --nut-actionsheet-item-font-size        | _var(--nut-font-size-2)_   | -    |
+|  --nut-actionsheet-item-subdesc-font-size| _var(--nut-font-size-1)_   | -    |
+|  --nut-actionsheet-item-cancel-border-top| _1px solid var(--nut-actionsheet-light-color)_ | -    |
+|  --nut-actionsheet-item-line-height      | _24px_                     | -    |
+|   --nut-actionsheet-item-font-color       | _var(--nut-title-color)_   | -    |

src/packages/__VUE/address/doc.en-US.md

@@ -585,4 +585,24 @@ If you want to select a province, you need to set the region ID in the order of
 | unselectedIcon | Unselected icon slot |  
 | closeIcon | Close icon slot |  
 | backIcon | Change icon slot |  
-    
+    
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| -    |
+|  --nut-address-icon-color| _var(--nut-primary-color)_     | -    |
+|  --nut-address-header-title-font-size   | _18px_          | -    |
+|  --nut-address-header-title-color| _#262626_    | -    |
+|  --nut-address-region-tab-font-size| _13px_  | -    |
+|  --nut-address-region-tab-color| _#1d1e1e_  | -    |
+|  --nut-address-region-tab-active-item-font-weight| _bold_    | -    |
+|  --nut-address-region-tab-line-border-radius| _0_   | -    |
+|  --nut-address-region-tab-line-opacity| _1_   | -    |
+|  --nut-address-region-item-color| _#333_    | -    |
+|  --nut-address-region-item-font-size| _var(--nut-font-size-1)_   | -    |
+|  --nut-address-item-margin-right| _9px_  | -    |

src/packages/__VUE/address/doc.md

@@ -607,4 +607,26 @@ app.use(Elevator);
 | icon | 自定义选中项的图标 |  
 | unselectedIcon | 未选中地址时的图标 |  
 | closeIcon | 关闭弹层的图标 |  
-| backIcon | 自定义地址与已有地址切换时返回的图标 |  
+| backIcon | 自定义地址与已有地址切换时返回的图标 | 
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| -    |
+|  --nut-address-icon-color| _var(--nut-primary-color)_     | -    |
+|  --nut-address-header-title-font-size   | _18px_          | -    |
+|  --nut-address-header-title-color| _#262626_    | -    |
+|  --nut-address-region-tab-font-size| _13px_  | -    |
+|  --nut-address-region-tab-color| _#1d1e1e_  | -    |
+|  --nut-address-region-tab-active-item-font-weight| _bold_    | -    |
+|  --nut-address-region-tab-line-border-radius| _0_   | -    |
+|  --nut-address-region-tab-line-opacity| _1_   | -    |
+|  --nut-address-region-item-color| _#333_    | -    |
+|  --nut-address-region-item-font-size| _var(--nut-font-size-1)_   | -    |
+|  --nut-address-item-margin-right| _9px_  | -    |

src/packages/__VUE/address/doc.taro.md

@@ -607,4 +607,24 @@ app.use(Elevator);
 | icon | 自定义选中项的图标 |  
 | unselectedIcon | 未选中地址时的图标 |  
 | closeIcon | 关闭弹层的图标 |  
-| backIcon | 自定义地址与已有地址切换时返回的图标 |  
+| backIcon | 自定义地址与已有地址切换时返回的图标 |  
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+|  --nut-address-region-tab-line| _linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%)_| -    |
+|  --nut-address-icon-color| _var(--nut-primary-color)_     | -    |
+|  --nut-address-header-title-font-size   | _18px_          | -    |
+|  --nut-address-header-title-color| _#262626_    | -    |
+|  --nut-address-region-tab-font-size| _13px_  | -    |
+|  --nut-address-region-tab-color| _#1d1e1e_  | -    |
+|  --nut-address-region-tab-active-item-font-weight| _bold_    | -    |
+|  --nut-address-region-tab-line-border-radius| _0_   | -    |
+|  --nut-address-region-tab-line-opacity| _1_   | -    |
+|  --nut-address-region-item-color| _#333_    | -    |
+|  --nut-address-region-item-font-size| _var(--nut-font-size-1)_   | -    |
+|  --nut-address-item-margin-right| _9px_  | -    |

src/packages/__VUE/addresslist/doc.en-US.md

@@ -292,3 +292,24 @@ const dataMapOptions = {
   addressName: "testaddressName",
 };
 ```
+
+## Theming
+
+### CSS Variables
+
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-addresslist-bg |  _#fff_   |-  |
+| --nut-addresslist-border |  _#f0f0f0_   |-  |
+| --nut-addresslist-font-color |  _#333333_   |-  |
+| --nut-addresslist-font-size |  _16px_   |-  |
+| --nut-addresslist-mask-bg |  _rgba(0, 0, 0, 0.4)_   |-  |
+| --nut-addresslist-addr-font-color |  _#666666_   |-  |
+| --nut-addresslist-addr-font-size |  _12px_   |-  |
+| --nut-addresslist-set-bg |  _#f5a623_   |-  |
+| --nut-addresslist-del-bg |  _#e1251b_   |-  |
+| --nut-addresslist-contnts-contact-default |  _var(--nut-primary-color)_   |-  |
+| --nut-addresslist-contnts-contact-color |  _var(--nut-white)_   |-  |

src/packages/__VUE/addresslist/doc.md

@@ -296,3 +296,24 @@ const dataMapOptions = {
   addressName: "testaddressName",
 };
 ```
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-addresslist-bg |  _#fff_   |-  |
+| --nut-addresslist-border |  _#f0f0f0_   |-  |
+| --nut-addresslist-font-color |  _#333333_   |-  |
+| --nut-addresslist-font-size |  _16px_   |-  |
+| --nut-addresslist-mask-bg |  _rgba(0, 0, 0, 0.4)_   |-  |
+| --nut-addresslist-addr-font-color |  _#666666_   |-  |
+| --nut-addresslist-addr-font-size |  _12px_   |-  |
+| --nut-addresslist-set-bg |  _#f5a623_   |-  |
+| --nut-addresslist-del-bg |  _#e1251b_   |-  |
+| --nut-addresslist-contnts-contact-default |  _var(--nut-primary-color)_   |-  |
+| --nut-addresslist-contnts-contact-color |  _var(--nut-white)_   |-  |

src/packages/__VUE/addresslist/doc.taro.md

@@ -296,3 +296,24 @@ const dataMapOptions = {
   addressName: "testaddressName",
 };
 ```
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-addresslist-bg |  _#fff_   |-  |
+| --nut-addresslist-border |  _#f0f0f0_   |-  |
+| --nut-addresslist-font-color |  _#333333_   |-  |
+| --nut-addresslist-font-size |  _16px_   |-  |
+| --nut-addresslist-mask-bg |  _rgba(0, 0, 0, 0.4)_   |-  |
+| --nut-addresslist-addr-font-color |  _#666666_   |-  |
+| --nut-addresslist-addr-font-size |  _12px_   |-  |
+| --nut-addresslist-set-bg |  _#f5a623_   |-  |
+| --nut-addresslist-del-bg |  _#e1251b_   |-  |
+| --nut-addresslist-contnts-contact-default |  _var(--nut-primary-color)_   |-  |
+| --nut-addresslist-contnts-contact-color |  _var(--nut-white)_   |-  |
+

src/packages/__VUE/avatar/doc.en-US.md

@@ -210,3 +210,20 @@ Icon and letter types can have custom colors and background colors
 | Name         | Description                   |
 | ------------- | ----------------------------- |
 | default | default slot for img, icon or text  |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-actionsheet-light-color           | _#f6f6f6_                  | -    |
+| --nut-avatar-square |  _5px_  |-  |
+| --nut-avatar-large-width |  _60px_  |-  |
+| --nut-avatar-large-height |  _60px_  |-  |
+| --nut-avatar-small-width |  _32px_  |-  |
+| --nut-avatar-small-height |  _32px_  |-  |
+| --nut-avatar-normal-width |  _40px_  |-  |
+| --nut-avatar-normal-height |  _40px_  |-  |

src/packages/__VUE/avatar/doc.md

@@ -208,4 +208,21 @@ Icon 和字符型可以自定义颜色及背景色
 
 |名称|描述|
 |--|--|
-|default|默认插槽，可放置图片、图标、文本等元素|
+|default|默认插槽，可放置图片、图标、文本等元素|
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件]()。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-actionsheet-light-color           | _#f6f6f6_                  | -    |
+| --nut-avatar-square |  _5px_  |-  |
+| --nut-avatar-large-width |  _60px_  |-  |
+| --nut-avatar-large-height |  _60px_  |-  |
+| --nut-avatar-small-width |  _32px_  |-  |
+| --nut-avatar-small-height |  _32px_  |-  |
+| --nut-avatar-normal-width |  _40px_  |-  |
+| --nut-avatar-normal-height |  _40px_  |-  |

src/packages/__VUE/avatar/doc.taro.md

@@ -208,4 +208,21 @@ Icon 和字符型可以自定义颜色及背景色
 
 |名称|描述|
 |--|--|
-|default|默认插槽，可放置图片、图标、文本等元素|
+|default|默认插槽，可放置图片、图标、文本等元素|
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件]()。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-actionsheet-light-color           | _#f6f6f6_                  | -    |
+| --nut-avatar-square |  _5px_  |-  |
+| --nut-avatar-large-width |  _60px_  |-  |
+| --nut-avatar-large-height |  _60px_  |-  |
+| --nut-avatar-small-width |  _32px_  |-  |
+| --nut-avatar-small-height |  _32px_  |-  |
+| --nut-avatar-normal-width |  _40px_  |-  |
+| --nut-avatar-normal-height |  _40px_  |-  |

src/packages/__VUE/backtop/doc.en-US.md

@@ -223,4 +223,13 @@ app.use(Backtop);
 
 | Name    | Description         |
 |---------|--------------|
-| default | 	The default slot is used to customize the content |
+| default | 	The default slot is used to customize the content |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-backtop-border-color       | _#e0e0e0_        | -    |

src/packages/__VUE/backtop/doc.md

@@ -227,4 +227,14 @@ app.use(Backtop);
 
 | 名称    | 说明         |
 |---------|--------------|
-| default | 	默认slot，用以自定义内容 |
+| default | 	默认slot，用以自定义内容 |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-backtop-border-color       | _#e0e0e0_        | -    |

src/packages/__VUE/backtop/doc.taro.md

@@ -216,4 +216,14 @@ export default {
 | 名称    | 说明         |
 |---------|--------------|
 | content | 	滚动容器中包含的内容 |
-| icon | 	返回到顶部，按钮内容 |
+| icon | 	返回到顶部，按钮内容 |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-backtop-border-color       | _#e0e0e0_        | -    |

src/packages/__VUE/badge/doc.en-US.md

@@ -230,3 +230,23 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 |---------|--------------|
 | default | Default slot |
 | icons | 	Icon slot |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-badge-background-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ | -    |
+| --nut-badge-color| _#fff_ | -    |
+| --nut-badge-font-size| _var(--nut-font-size-1)_ | -    |
+| --nut-badge-border-radius| _14px_ | -    |
+| --nut-badge-padding| _0 5px_ | -    |
+| --nut-badge-content-transform| _translate(50%, -50%)_ | -    |
+| --nut-badge-z-index| _1_ | -    |
+| --nut-badge-dot-width| _7px_ | -    |
+| --nut-badge-dot-height| _7px_ | -    |
+| --nut-badge-dot-border-radius| _7px_ | -    |
+| --nut-badge-dot-padding| _0px_ | -    |

src/packages/__VUE/badge/doc.md

@@ -230,3 +230,24 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 |---------|--------------|
 | default | 	徽标包裹的子元素 |
 | icons | 	徽标自定义 |
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-badge-background-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ | -    |
+| --nut-badge-color| _#fff_ | -    |
+| --nut-badge-font-size| _var(--nut-font-size-1)_ | -    |
+| --nut-badge-border-radius| _14px_ | -    |
+| --nut-badge-padding| _0 5px_ | -    |
+| --nut-badge-content-transform| _translate(50%, -50%)_ | -    |
+| --nut-badge-z-index| _1_ | -    |
+| --nut-badge-dot-width| _7px_ | -    |
+| --nut-badge-dot-height| _7px_ | -    |
+| --nut-badge-dot-border-radius| _7px_ | -    |
+| --nut-badge-dot-padding| _0px_ | -    |

src/packages/__VUE/badge/doc.taro.md

@@ -230,3 +230,23 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 |---------|--------------|
 | default | 	徽标包裹的子元素 |
 | icons | 	徽标自定义 |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-badge-background-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_ | -    |
+| --nut-badge-color| _#fff_ | -    |
+| --nut-badge-font-size| _var(--nut-font-size-1)_ | -    |
+| --nut-badge-border-radius| _14px_ | -    |
+| --nut-badge-padding| _0 5px_ | -    |
+| --nut-badge-content-transform| _translate(50%, -50%)_ | -    |
+| --nut-badge-z-index| _1_ | -    |
+| --nut-badge-dot-width| _7px_ | -    |
+| --nut-badge-dot-height| _7px_ | -    |
+| --nut-badge-dot-border-radius| _7px_ | -    |
+| --nut-badge-dot-padding| _0px_ | -    |

src/packages/__VUE/button/doc.en-US.md

@@ -205,3 +205,70 @@ The color of the button can be customized through the color property.
 | Event | Description           | Arguments          |
 | ------ | -------------- | ----------------- |
 | click  | Emitted when component is clicked | event: MouseEvent |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-button-border-radius| _25px_  | - |
+| --nut-button-border-width| _1px_  | - |
+| --nut-button-icon-width| _16px_  | - |
+| --nut-button-default-bg-color| _var(--nut-white)_  | - |
+| --nut-button-default-border-color| _rgba(204, 204, 204, 1)_  | - |
+| --nut-button-default-color| _rgba(102, 102, 102, 1)_  | - |
+| --nut-button-default-padding| _0 18px_  | - |
+| --nut-button-mini-padding| _0 12px_  | - |
+| --nut-button-small-padding| _0 12px_  | - |
+| --nut-button-small-height| _28px_  | - |
+| --nut-button-mini-height| _24px_  | - |
+| --nut-button-default-height| _38px_  | - |
+| --nut-button-large-height| _48px_  | - |
+| --nut-button-large-line-height| _46px_  | - |
+| --nut-button-small-line-height| _26px_  | - |
+| --nut-button-block-height| _48px_  | - |
+| --nut-button-default-line-height| _36px_  | - |
+| --nut-button-block-line-height| _46px_  | - |
+| --nut-button-default-font-size| _var(--nut-font-size-2)_  | - |
+| --nut-button-large-font-size| _var(--nut-button-default-font-size)_  | - |
+| --nut-button-small-font-size| _var(--nut-font-size-1)_  | - |
+| --nut-button-mini-font-size| _var(--nut-font-size-1)_  | - |
+| --nut-button-mini-line-height| _1.2_  | - |
+| --nut-button-disabled-opacity| _0.68_  | - |
+| --nut-button-primary-color| _var(--nut-white)_  | - |
+| --nut-button-primary-border-color| _var(--nut-primary-color)_  | - |
+| --nut-button-primary-background-color| _linear-gradient(
+    135deg,
+    var(--nut-primary-color) 0%,
+    var(--nut-primary-color-end) 100%
+  )_  | - |
+| --nut-button-info-color| _var(--nut-white)_  | - |
+| --nut-button-info-border-color| _rgba(73, 106, 242, 1)_  | - |
+| --nut-button-info-background-color| _linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%)_  | - |
+| --nut-button-success-color| _var(--nut-white)_  | - |
+| --nut-button-success-border-color| _rgba(38, 191, 38, 1)_  | - |
+| --nut-button-success-background-color| _linear-gradient(
+    135deg,
+    rgba(38, 191, 38, 1) 0%,
+    rgba(39, 197, 48, 1) 45%,
+    rgba(40, 207, 63, 1) 83%,
+    rgba(41, 212, 70, 1) 100%
+  )_  | - |
+
+| --nut-button-danger-color| _var(--nut-white)_  | - |
+| --nut-button-danger-border-color| _rgba(250, 44, 25, 1)_  | - |
+| --nut-button-danger-background-color| _rgba(250, 44, 25, 1)_  | - |
+| --nut-button-warning-color| _var(--nut-white)_  | - |
+| --nut-button-warning-border-color| _rgba(255, 158, 13, 1)_  | - |
+| --nut-button-warning-background-color| _linear-gradient(
+    135deg,
+    rgba(255, 158, 13, 1) 0%,
+    rgba(255, 167, 13, 1) 45%,
+    rgba(255, 182, 13, 1) 83%,
+    rgba(255, 190, 13, 1) 100%
+  )_  | - |
+| --nut-button-plain-background-color| _var(--nut-white)_  | - |
+| --nut-button-small-round-border-radius| _var(--nut-button-border-radius)_  | - |

src/packages/__VUE/button/doc.md

@@ -211,3 +211,72 @@ app.use(Button);
 | 事件名 | 说明           | 回调参数          |
 | ------ | -------------- | ----------------- |
 | click  | 点击按钮时触发 | event: MouseEvent |
+
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-button-border-radius| _25px_  | - |
+| --nut-button-border-width| _1px_  | - |
+| --nut-button-icon-width| _16px_  | - |
+| --nut-button-default-bg-color| _var(--nut-white)_  | - |
+| --nut-button-default-border-color| _rgba(204, 204, 204, 1)_  | - |
+| --nut-button-default-color| _rgba(102, 102, 102, 1)_  | - |
+| --nut-button-default-padding| _0 18px_  | - |
+| --nut-button-mini-padding| _0 12px_  | - |
+| --nut-button-small-padding| _0 12px_  | - |
+| --nut-button-small-height| _28px_  | - |
+| --nut-button-mini-height| _24px_  | - |
+| --nut-button-default-height| _38px_  | - |
+| --nut-button-large-height| _48px_  | - |
+| --nut-button-large-line-height| _46px_  | - |
+| --nut-button-small-line-height| _26px_  | - |
+| --nut-button-block-height| _48px_  | - |
+| --nut-button-default-line-height| _36px_  | - |
+| --nut-button-block-line-height| _46px_  | - |
+| --nut-button-default-font-size| _var(--nut-font-size-2)_  | - |
+| --nut-button-large-font-size| _var(--nut-button-default-font-size)_  | - |
+| --nut-button-small-font-size| _var(--nut-font-size-1)_  | - |
+| --nut-button-mini-font-size| _var(--nut-font-size-1)_  | - |
+| --nut-button-mini-line-height| _1.2_  | - |
+| --nut-button-disabled-opacity| _0.68_  | - |
+| --nut-button-primary-color| _var(--nut-white)_  | - |
+| --nut-button-primary-border-color| _var(--nut-primary-color)_  | - |
+| --nut-button-primary-background-color| _linear-gradient(
+    135deg,
+    var(--nut-primary-color) 0%,
+    var(--nut-primary-color-end) 100%
+  )_  | - |
+| --nut-button-info-color| _var(--nut-white)_  | - |
+| --nut-button-info-border-color| _rgba(73, 106, 242, 1)_  | - |
+| --nut-button-info-background-color| _linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%)_  | - |
+| --nut-button-success-color| _var(--nut-white)_  | - |
+| --nut-button-success-border-color| _rgba(38, 191, 38, 1)_  | - |
+| --nut-button-success-background-color| _linear-gradient(
+    135deg,
+    rgba(38, 191, 38, 1) 0%,
+    rgba(39, 197, 48, 1) 45%,
+    rgba(40, 207, 63, 1) 83%,
+    rgba(41, 212, 70, 1) 100%
+  )_  | - |
+
+| --nut-button-danger-color| _var(--nut-white)_  | - |
+| --nut-button-danger-border-color| _rgba(250, 44, 25, 1)_  | - |
+| --nut-button-danger-background-color| _rgba(250, 44, 25, 1)_  | - |
+| --nut-button-warning-color| _var(--nut-white)_  | - |
+| --nut-button-warning-border-color| _rgba(255, 158, 13, 1)_  | - |
+| --nut-button-warning-background-color| _linear-gradient(
+    135deg,
+    rgba(255, 158, 13, 1) 0%,
+    rgba(255, 167, 13, 1) 45%,
+    rgba(255, 182, 13, 1) 83%,
+    rgba(255, 190, 13, 1) 100%
+  )_  | - |
+| --nut-button-plain-background-color| _var(--nut-white)_  | - |
+| --nut-button-small-round-border-radius| _var(--nut-button-border-radius)_  | - |

src/packages/__VUE/button/doc.taro.md

@@ -205,3 +205,70 @@ app.use(Button);
 | 事件名 | 说明           | 回调参数          |
 | ------ | -------------- | ----------------- |
 | click  | 点击按钮时触发 | event: MouseEvent |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-button-border-radius| _25px_  | - |
+| --nut-button-border-width| _1px_  | - |
+| --nut-button-icon-width| _16px_  | - |
+| --nut-button-default-bg-color| _var(--nut-white)_  | - |
+| --nut-button-default-border-color| _rgba(204, 204, 204, 1)_  | - |
+| --nut-button-default-color| _rgba(102, 102, 102, 1)_  | - |
+| --nut-button-default-padding| _0 18px_  | - |
+| --nut-button-mini-padding| _0 12px_  | - |
+| --nut-button-small-padding| _0 12px_  | - |
+| --nut-button-small-height| _28px_  | - |
+| --nut-button-mini-height| _24px_  | - |
+| --nut-button-default-height| _38px_  | - |
+| --nut-button-large-height| _48px_  | - |
+| --nut-button-large-line-height| _46px_  | - |
+| --nut-button-small-line-height| _26px_  | - |
+| --nut-button-block-height| _48px_  | - |
+| --nut-button-default-line-height| _36px_  | - |
+| --nut-button-block-line-height| _46px_  | - |
+| --nut-button-default-font-size| _var(--nut-font-size-2)_  | - |
+| --nut-button-large-font-size| _var(--nut-button-default-font-size)_  | - |
+| --nut-button-small-font-size| _var(--nut-font-size-1)_  | - |
+| --nut-button-mini-font-size| _var(--nut-font-size-1)_  | - |
+| --nut-button-mini-line-height| _1.2_  | - |
+| --nut-button-disabled-opacity| _0.68_  | - |
+| --nut-button-primary-color| _var(--nut-white)_  | - |
+| --nut-button-primary-border-color| _var(--nut-primary-color)_  | - |
+| --nut-button-primary-background-color| _linear-gradient(
+    135deg,
+    var(--nut-primary-color) 0%,
+    var(--nut-primary-color-end) 100%
+  )_  | - |
+| --nut-button-info-color| _var(--nut-white)_  | - |
+| --nut-button-info-border-color| _rgba(73, 106, 242, 1)_  | - |
+| --nut-button-info-background-color| _linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%)_  | - |
+| --nut-button-success-color| _var(--nut-white)_  | - |
+| --nut-button-success-border-color| _rgba(38, 191, 38, 1)_  | - |
+| --nut-button-success-background-color| _linear-gradient(
+    135deg,
+    rgba(38, 191, 38, 1) 0%,
+    rgba(39, 197, 48, 1) 45%,
+    rgba(40, 207, 63, 1) 83%,
+    rgba(41, 212, 70, 1) 100%
+  )_  | - |
+
+| --nut-button-danger-color| _var(--nut-white)_  | - |
+| --nut-button-danger-border-color| _rgba(250, 44, 25, 1)_  | - |
+| --nut-button-danger-background-color| _rgba(250, 44, 25, 1)_  | - |
+| --nut-button-warning-color| _var(--nut-white)_  | - |
+| --nut-button-warning-border-color| _rgba(255, 158, 13, 1)_  | - |
+| --nut-button-warning-background-color| _linear-gradient(
+    135deg,
+    rgba(255, 158, 13, 1) 0%,
+    rgba(255, 167, 13, 1) 45%,
+    rgba(255, 182, 13, 1) 83%,
+    rgba(255, 190, 13, 1) 100%
+  )_  | - |
+| --nut-button-plain-background-color| _var(--nut-white)_  | - |
+| --nut-button-small-round-border-radius| _var(--nut-button-border-radius)_  | - |

src/packages/__VUE/calendar/doc.en-US.md

@@ -640,3 +640,30 @@ Through [ref](https://vuejs.org/guide/essentials/template-refs.html), you can ge
 | Name | Description             | Arguments          |
 |--------|------------------|---------------|
 | scrollToDate   | Scroll to the month of the specified date | string:'2021-12-30' |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-calendar-primary-color| _var(--nut-primary-color)_   | - |
+| --nut-calendar-choose-color| _var(--nut-active-color)_   | - |
+| --nut-calendar-choose-font-color| _var(--nut-primary-color)_   | - |
+| --nut-calendar-base-color| _#333333_   | - |
+| --nut-calendar-disable-color| _#d1d0d0_   | - |
+| --nut-calendar-base-font| _var(--nut-font-size-3)_   | - |
+| --nut-calendar-title-font| _var(--nut-font-size-4)_   | - |
+| --nut-calendar-title-font-weight| _500_   | - |
+| --nut-calendar-sub-title-font| _var(--nut-font-size-2)_   | - |
+| --nut-calendar-text-font| _var(--nut-font-size-1)_   | - |
+| --nut-calendar-day-font| _16px_   | - |
+| --nut-calendar-day-active-border-radius| _0px_   | - |
+| --nut-calendar-day-width| _14.28%_   | - |
+| --nut-calendar-day-height| _64px_   | - |
+| --nut-calendar-day-font-weight| _500_   | - |
+| --nut-calendar-day67-font-color| _var(--nut-primary-color)_   | - |
+| --nut-calendar-month-title-font-size| _inherit_   | - |
+

src/packages/__VUE/calendar/doc.md

@@ -633,3 +633,29 @@ export default {
 | 方法名 | 说明             | 参数          |
 |--------|------------------|---------------|
 | scrollToDate   | 滚动到指定日期所在月 | string:'2021-12-30' |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-calendar-primary-color| _var(--nut-primary-color)_   | - |
+| --nut-calendar-choose-color| _var(--nut-active-color)_   | - |
+| --nut-calendar-choose-font-color| _var(--nut-primary-color)_   | - |
+| --nut-calendar-base-color| _#333333_   | - |
+| --nut-calendar-disable-color| _#d1d0d0_   | - |
+| --nut-calendar-base-font| _var(--nut-font-size-3)_   | - |
+| --nut-calendar-title-font| _var(--nut-font-size-4)_   | - |
+| --nut-calendar-title-font-weight| _500_   | - |
+| --nut-calendar-sub-title-font| _var(--nut-font-size-2)_   | - |
+| --nut-calendar-text-font| _var(--nut-font-size-1)_   | - |
+| --nut-calendar-day-font| _16px_   | - |
+| --nut-calendar-day-active-border-radius| _0px_   | - |
+| --nut-calendar-day-width| _14.28%_   | - |
+| --nut-calendar-day-height| _64px_   | - |
+| --nut-calendar-day-font-weight| _500_   | - |
+| --nut-calendar-day67-font-color| _var(--nut-primary-color)_   | - |
+| --nut-calendar-month-title-font-size| _inherit_   | - |

src/packages/__VUE/calendar/doc.taro.md

@@ -633,3 +633,31 @@ export default {
 | 方法名 | 说明             | 参数          |
 |--------|------------------|---------------|
 | scrollToDate   | 滚动到指定日期所在月 | string:'2021-12-30' |
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-calendar-primary-color| _var(--nut-primary-color)_   | - |
+| --nut-calendar-choose-color| _var(--nut-active-color)_   | - |
+| --nut-calendar-choose-font-color| _var(--nut-primary-color)_   | - |
+| --nut-calendar-base-color| _#333333_   | - |
+| --nut-calendar-disable-color| _#d1d0d0_   | - |
+| --nut-calendar-base-font| _var(--nut-font-size-3)_   | - |
+| --nut-calendar-title-font| _var(--nut-font-size-4)_   | - |
+| --nut-calendar-title-font-weight| _500_   | - |
+| --nut-calendar-sub-title-font| _var(--nut-font-size-2)_   | - |
+| --nut-calendar-text-font| _var(--nut-font-size-1)_   | - |
+| --nut-calendar-day-font| _16px_   | - |
+| --nut-calendar-day-active-border-radius| _0px_   | - |
+| --nut-calendar-day-width| _14.28%_   | - |
+| --nut-calendar-day-height| _64px_   | - |
+| --nut-calendar-day-font-weight| _500_   | - |
+| --nut-calendar-day67-font-color| _var(--nut-primary-color)_   | - |
+| --nut-calendar-month-title-font-size| _inherit_   | - |
+

src/packages/__VUE/card/doc.en-US.md

@@ -173,3 +173,18 @@ app.use(Price);
 | origin | 	Custom content behind the price |
 | shop-tag | 	Custom shop introduction |
 | footer | 	Customize bottom right content |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-card-font-size-0| _var(--nut-font-size-0)_  | - |
+| --nut-card-font-size-1| _var(--nut-font-size-1)_  | - |
+| --nut-card-font-size-2| _var(--nut-font-size-2)_  | - |
+| --nut-card-font-size-3| _var(--nut-font-size-3)_  | - |
+| --nut-card-left-border-radius| _0_  | - |
+| --nut-card-left-background-color| _inherit_  | - |

src/packages/__VUE/card/doc.md

@@ -171,3 +171,19 @@ app.use(Price);
 | origin | 	价格后方自定义内容 |
 | shop-tag | 	店铺介绍自定义 |
 | footer | 	右下角内容自定义 |
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-card-font-size-0| _var(--nut-font-size-0)_  | - |
+| --nut-card-font-size-1| _var(--nut-font-size-1)_  | - |
+| --nut-card-font-size-2| _var(--nut-font-size-2)_  | - |
+| --nut-card-font-size-3| _var(--nut-font-size-3)_  | - |
+| --nut-card-left-border-radius| _0_  | - |
+| --nut-card-left-background-color| _inherit_  | - |

src/packages/__VUE/card/doc.taro.md

@@ -171,3 +171,19 @@ app.use(Price);
 | origin | 	价格后方自定义内容 |
 | shop-tag | 	店铺介绍自定义 |
 | footer | 	右下角内容自定义 |
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-card-font-size-0| _var(--nut-font-size-0)_  | - |
+| --nut-card-font-size-1| _var(--nut-font-size-1)_  | - |
+| --nut-card-font-size-2| _var(--nut-font-size-2)_  | - |
+| --nut-card-font-size-3| _var(--nut-font-size-3)_  | - |
+| --nut-card-left-border-radius| _0_  | - |
+| --nut-card-left-background-color| _inherit_  | - |

src/packages/__VUE/cascader/doc.en-US.md

@@ -440,3 +440,23 @@ export default {
 |------------|-------------------------------------------|--------------------|
 | change     | Triggered when the selected value changes | (value, pathNodes) |
 | path-change | Triggered when the selected item changes  | (pathNodes)        |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-cascader-font-size| _var(--nut-font-size-2)_  | -  |
+| --nut-cascader-line-height| _22px_  | -  |
+| --nut-cascader-tabs-item-padding| _0 10px_  | -  |
+| --nut-cascader-bar-padding| _24px 20px 17px_  | -  |
+| --nut-cascader-bar-font-size| _var(--nut-font-size-4)_  | -  |
+| --nut-cascader-bar-line-height| _20px_  | -  |
+| --nut-cascader-bar-color| _var(--nut-title-color)_  | -  |
+| --nut-cascader-item-padding| _10px 20px_  | -  |
+| --nut-cascader-item-color| _var(--nut-title-color)_  | -  |
+| --nut-cascader-item-font-size| _var(--nut-font-size-2)_  | -  |
+| --nut-cascader-item-active-color| _var(--nut-primary-color)_  | -  |

src/packages/__VUE/cascader/doc.md

@@ -440,3 +440,23 @@ export default {
 | ---------- | ---------------- | ------------------ |
 | change     | 选中值改变时触发 | (value, pathNodes) |
 | path-change | 选中项改变时触发 | (pathNodes)        |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-cascader-font-size| _var(--nut-font-size-2)_  | -  |
+| --nut-cascader-line-height| _22px_  | -  |
+| --nut-cascader-tabs-item-padding| _0 10px_  | -  |
+| --nut-cascader-bar-padding| _24px 20px 17px_  | -  |
+| --nut-cascader-bar-font-size| _var(--nut-font-size-4)_  | -  |
+| --nut-cascader-bar-line-height| _20px_  | -  |
+| --nut-cascader-bar-color| _var(--nut-title-color)_  | -  |
+| --nut-cascader-item-padding| _10px 20px_  | -  |
+| --nut-cascader-item-color| _var(--nut-title-color)_  | -  |
+| --nut-cascader-item-font-size| _var(--nut-font-size-2)_  | -  |
+| --nut-cascader-item-active-color| _var(--nut-primary-color)_  | -  |

src/packages/__VUE/cascader/doc.taro.md

@@ -440,3 +440,23 @@ export default {
 | ---------- | ---------------- | ------------------ |
 | change     | 选中值改变时触发 | (value, pathNodes) |
 | path-change | 选中项改变时触发 | (pathNodes)        |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-cascader-font-size| _var(--nut-font-size-2)_  | -  |
+| --nut-cascader-line-height| _22px_  | -  |
+| --nut-cascader-tabs-item-padding| _0 10px_  | -  |
+| --nut-cascader-bar-padding| _24px 20px 17px_  | -  |
+| --nut-cascader-bar-font-size| _var(--nut-font-size-4)_  | -  |
+| --nut-cascader-bar-line-height| _20px_  | -  |
+| --nut-cascader-bar-color| _var(--nut-title-color)_  | -  |
+| --nut-cascader-item-padding| _10px 20px_  | -  |
+| --nut-cascader-item-color| _var(--nut-title-color)_  | -  |
+| --nut-cascader-item-font-size| _var(--nut-font-size-2)_  | -  |
+| --nut-cascader-item-active-color| _var(--nut-primary-color)_  | -  |

src/packages/__VUE/category/doc.en-US.md

@@ -217,3 +217,19 @@ export default {
 | Name    | Description       |
 | ------- | ---------- |
 | default | Custom content |
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-category-bg-color|  _rgba(255, 255, 255, 1)_  | - |
+| --nut-category-list-left-bg-color|  _rgba(246, 247, 249, 1)_  | - |
+| --nut-category-list-item-color|  _var(--nut-title-color)_  | - |
+| --nut-category-list-item-checked-color|  _rgba(255, 255, 255, 1)_  | - |
+| --nut-category-list-item-checked-img-bg-color|  _var(--nut-primary-color)_  | - |
+| --nut-category-pane-gray-color|  _#666_  | - |
+| --nut-category-pane-border-color|  _rgb(153, 153, 153)_  | - |
+| --nut-category-pane-title-color|  _rgba(51, 51, 51, 1)_  | - |

src/packages/__VUE/category/doc.md

@@ -217,3 +217,20 @@ export default {
 | 名称    | 说明       |
 | ------- | ---------- |
 | default | 自定义内容 |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-category-bg-color|  _rgba(255, 255, 255, 1)_  | - |
+| --nut-category-list-left-bg-color|  _rgba(246, 247, 249, 1)_  | - |
+| --nut-category-list-item-color|  _var(--nut-title-color)_  | - |
+| --nut-category-list-item-checked-color|  _rgba(255, 255, 255, 1)_  | - |
+| --nut-category-list-item-checked-img-bg-color|  _var(--nut-primary-color)_  | - |
+| --nut-category-pane-gray-color|  _#666_  | - |
+| --nut-category-pane-border-color|  _rgb(153, 153, 153)_  | - |
+| --nut-category-pane-title-color|  _rgba(51, 51, 51, 1)_  | - |

src/packages/__VUE/category/doc.taro.md

@@ -217,3 +217,19 @@ export default {
 | 名称    | 说明       |
 | ------- | ---------- |
 | default | 自定义内容 |
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-category-bg-color|  _rgba(255, 255, 255, 1)_  | - |
+| --nut-category-list-left-bg-color|  _rgba(246, 247, 249, 1)_  | - |
+| --nut-category-list-item-color|  _var(--nut-title-color)_  | - |
+| --nut-category-list-item-checked-color|  _rgba(255, 255, 255, 1)_  | - |
+| --nut-category-list-item-checked-img-bg-color|  _var(--nut-primary-color)_  | - |
+| --nut-category-pane-gray-color|  _#666_  | - |
+| --nut-category-pane-border-color|  _rgb(153, 153, 153)_  | - |
+| --nut-category-pane-title-color|  _rgba(51, 51, 51, 1)_  | - |

src/packages/__VUE/cell/doc.en-US.md

@@ -250,3 +250,36 @@ You can center the left and right contents of the cell vertically through the 'c
 |-------|-------------------|
 | title | Custom`title`slot |
 | desc  | Custom`desc`slot  |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-cell-color| _var(--nut-title-color2)_   | -  |
+| --nut-cell-title-font| _var(--nut-font-size-2)_   | -  |
+| --nut-cell-title-desc-font| _var(--nut-font-size-1)_   | -  |
+| --nut-cell-desc-font| _var(--nut-font-size-2)_   | -  |
+| --nut-cell-desc-color| _var(--nut-disable-color)_   | -  |
+| --nut-cell-border-radius| _6px_   | -  |
+| --nut-cell-padding| _13px 16px_   | -  |
+| --nut-cell-line-height| _20px_   | -  |
+| --nut-cell-after-right| _16px_   | -  |
+| --nut-cell-after-border-bottom| _1px solid #f5f6f7_   | -  |
+| --nut-cell-default-icon-margin| _0 4px 0 0px_   | -  |
+| --nut-cell-large-title-font| _var(--nut-font-size-large)_   | -  |
+| --nut-cell-large-title-desc-font| _var(--nut-font-size-base)_   | -  |
+| --nut-cell-large-padding| _15px 16px_   | -  |
+| --nut-cell-background| _var(--nut-white)_   | -  |
+| --nut-cell-group-title-padding| _0 10px_   | -  |
+| --nut-cell-group-title-color| _#909ca4_   | -  |
+| --nut-cell-group-title-font-size| _var(--nut-font-size-2)_   | -  |
+| --nut-cell-group-title-line-height| _20px_   | -  |
+| --nut-cell-group-desc-padding| _0 10px_   | -  |
+| --nut-cell-group-desc-color| _#909ca4_   | -  |
+| --nut-cell-group-desc-font-size| _var(--nut-font-size-1)_   | -  |
+| --nut-cell-group-desc-line-height| _16px_   | -  |
+| --nut-cell-group-background-color| _var(--nut-white)_   | -  |

src/packages/__VUE/cell/doc.md

@@ -254,3 +254,37 @@ export default {
 |-------|-----------------------|
 | title | 自定义`title`标题区域 |
 | desc  | 自定义`desc`描述区域  |
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-cell-color| _var(--nut-title-color2)_   | -  |
+| --nut-cell-title-font| _var(--nut-font-size-2)_   | -  |
+| --nut-cell-title-desc-font| _var(--nut-font-size-1)_   | -  |
+| --nut-cell-desc-font| _var(--nut-font-size-2)_   | -  |
+| --nut-cell-desc-color| _var(--nut-disable-color)_   | -  |
+| --nut-cell-border-radius| _6px_   | -  |
+| --nut-cell-padding| _13px 16px_   | -  |
+| --nut-cell-line-height| _20px_   | -  |
+| --nut-cell-after-right| _16px_   | -  |
+| --nut-cell-after-border-bottom| _1px solid #f5f6f7_   | -  |
+| --nut-cell-default-icon-margin| _0 4px 0 0px_   | -  |
+| --nut-cell-large-title-font| _var(--nut-font-size-large)_   | -  |
+| --nut-cell-large-title-desc-font| _var(--nut-font-size-base)_   | -  |
+| --nut-cell-large-padding| _15px 16px_   | -  |
+| --nut-cell-background| _var(--nut-white)_   | -  |
+| --nut-cell-group-title-padding| _0 10px_   | -  |
+| --nut-cell-group-title-color| _#909ca4_   | -  |
+| --nut-cell-group-title-font-size| _var(--nut-font-size-2)_   | -  |
+| --nut-cell-group-title-line-height| _20px_   | -  |
+| --nut-cell-group-desc-padding| _0 10px_   | -  |
+| --nut-cell-group-desc-color| _#909ca4_   | -  |
+| --nut-cell-group-desc-font-size| _var(--nut-font-size-1)_   | -  |
+| --nut-cell-group-desc-line-height| _16px_   | -  |
+| --nut-cell-group-background-color| _var(--nut-white)_   | -  |

src/packages/__VUE/cell/doc.taro.md

@@ -237,3 +237,36 @@ app.use(CellGroup);
 |-------|-----------------------|
 | title | 自定义`title`标题区域 |
 | desc  | 自定义`desc`描述区域  |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-cell-color| _var(--nut-title-color2)_   | -  |
+| --nut-cell-title-font| _var(--nut-font-size-2)_   | -  |
+| --nut-cell-title-desc-font| _var(--nut-font-size-1)_   | -  |
+| --nut-cell-desc-font| _var(--nut-font-size-2)_   | -  |
+| --nut-cell-desc-color| _var(--nut-disable-color)_   | -  |
+| --nut-cell-border-radius| _6px_   | -  |
+| --nut-cell-padding| _13px 16px_   | -  |
+| --nut-cell-line-height| _20px_   | -  |
+| --nut-cell-after-right| _16px_   | -  |
+| --nut-cell-after-border-bottom| _1px solid #f5f6f7_   | -  |
+| --nut-cell-default-icon-margin| _0 4px 0 0px_   | -  |
+| --nut-cell-large-title-font| _var(--nut-font-size-large)_   | -  |
+| --nut-cell-large-title-desc-font| _var(--nut-font-size-base)_   | -  |
+| --nut-cell-large-padding| _15px 16px_   | -  |
+| --nut-cell-background| _var(--nut-white)_   | -  |
+| --nut-cell-group-title-padding| _0 10px_   | -  |
+| --nut-cell-group-title-color| _#909ca4_   | -  |
+| --nut-cell-group-title-font-size| _var(--nut-font-size-2)_   | -  |
+| --nut-cell-group-title-line-height| _20px_   | -  |
+| --nut-cell-group-desc-padding| _0 10px_   | -  |
+| --nut-cell-group-desc-color| _#909ca4_   | -  |
+| --nut-cell-group-desc-font-size| _var(--nut-font-size-1)_   | -  |
+| --nut-cell-group-desc-line-height| _16px_   | -  |
+| --nut-cell-group-background-color| _var(--nut-white)_   | -  |

src/packages/__VUE/checkbox/doc.en-US.md

@@ -412,3 +412,19 @@ When the value changes, the `change` event will be triggered
 |----- | ----- | ----- 
 | toggleAll | Select all / cancel | `f`,`true`,to select all，`false`,cancel the selection
 | toggleReverse | Reverse selection | -
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-checkbox-label-color| _#1d1e1e_ | -  |
+| --nut-checkbox-label-disable-color| _#999_ | -  |
+| --nut-checkbox-icon-disable-color| _#d6d6d6_ | -  |
+| --nut-checkbox-label-margin-left| _15px_ | -  |
+| --nut-checkbox-label-font-size| _14px_ | -  |
+| --nut-checkbox-icon-font-size| _18px_ | -  |
+| --nut-checkbox-icon-disable-color2| _var(--nut-help-color)_ | -  |

src/packages/__VUE/checkbox/doc.md

@@ -415,3 +415,19 @@ app.use(Icon);
 |----- | ----- | ----- 
 | toggleAll | 全选/取消 | `f`,传 `true`,表示全选，传 `false`,表示取消全选
 | toggleReverse | 反选 | -
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-checkbox-label-color| _#1d1e1e_ | -  |
+| --nut-checkbox-label-disable-color| _#999_ | -  |
+| --nut-checkbox-icon-disable-color| _#d6d6d6_ | -  |
+| --nut-checkbox-label-margin-left| _15px_ | -  |
+| --nut-checkbox-label-font-size| _14px_ | -  |
+| --nut-checkbox-icon-font-size| _18px_ | -  |
+| --nut-checkbox-icon-disable-color2| _var(--nut-help-color)_ | -  |

src/packages/__VUE/checkbox/doc.taro.md

@@ -415,3 +415,19 @@ app.use(Icon);
 |----- | ----- | ----- 
 | toggleAll | 全选/取消 | `f`,传 `true`,表示全选，传 `false`,表示取消全选
 | toggleReverse | 反选 | -
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-checkbox-label-color| _#1d1e1e_ | -  |
+| --nut-checkbox-label-disable-color| _#999_ | -  |
+| --nut-checkbox-icon-disable-color| _#d6d6d6_ | -  |
+| --nut-checkbox-label-margin-left| _15px_ | -  |
+| --nut-checkbox-label-font-size| _14px_ | -  |
+| --nut-checkbox-icon-font-size| _18px_ | -  |
+| --nut-checkbox-icon-disable-color2| _var(--nut-help-color)_ | -  |

src/packages/__VUE/circleprogress/doc.en-US.md

@@ -146,3 +146,16 @@ export default {
 |----- | ----- |
 | default | Custom Content| 
 
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-circleprogress-primary-color| _var(--nut-primary-color)_ | -  |
+| --nut-circleprogress-path-color| _#e5e9f2_ | -  |
+| --nut-circleprogress-text-color| _#000000_ | -  |
+| --nut-circleprogress-text-size| _var(--nut-font-size-3)_ | -  |
+

src/packages/__VUE/circleprogress/doc.md

@@ -146,3 +146,16 @@ export default {
 |----- | ----- |
 | default | 自定义文字内容| 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-circleprogress-primary-color| _var(--nut-primary-color)_ | -  |
+| --nut-circleprogress-path-color| _#e5e9f2_ | -  |
+| --nut-circleprogress-text-color| _#000000_ | -  |
+| --nut-circleprogress-text-size| _var(--nut-font-size-3)_ | -  |
+

src/packages/__VUE/collapse/doc.en-US.md

@@ -216,4 +216,26 @@ export default {
 
 |Event name | Description | Callback parameter|
 |------|------|------|
-|Change | Triggered when switching panels | The type is consistent with the value bound to the v-model|
+|Change | Triggered when switching panels | The type is consistent with the value bound to the v-model|
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-collapse-item-padding| _13px 36px 13px 26px_ | -  |
+| --nut-collapse-item-color| _#666666_ | -  |
+| --nut-collapse-item-disabled-color| _#c8c9cc_ | -  |
+| --nut-collapse-item-icon-color| _#666666_ | -  |
+| --nut-collapse-item-font-size| _var(--nut-font-size-2)_ | -  |
+| --nut-collapse-item-line-height| _24px_ | -  |
+| --nut-collapse-item-sub-title-color| _#666666_ | -  |
+| --nut-collapse-wrapper-content-padding| _12px 26px_ | -  |
+| --nut-collapse-wrapper-empty-content-padding| _0 26px_ | -  |
+| --nut-collapse-wrapper-content-color| _#666666_ | -  |
+| --nut-collapse-wrapper-content-font-size| _var(--nut-font-size-2)_ | -  |
+| --nut-collapse-wrapper-content-line-height| _1.5_ | -  |
+| --nut-collapse-wrapper-content-background-color| _var(--nut-white)_ | -  |

src/packages/__VUE/collapse/doc.md

@@ -212,4 +212,25 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |
+| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-collapse-item-padding| _13px 36px 13px 26px_ | -  |
+| --nut-collapse-item-color| _#666666_ | -  |
+| --nut-collapse-item-disabled-color| _#c8c9cc_ | -  |
+| --nut-collapse-item-icon-color| _#666666_ | -  |
+| --nut-collapse-item-font-size| _var(--nut-font-size-2)_ | -  |
+| --nut-collapse-item-line-height| _24px_ | -  |
+| --nut-collapse-item-sub-title-color| _#666666_ | -  |
+| --nut-collapse-wrapper-content-padding| _12px 26px_ | -  |
+| --nut-collapse-wrapper-empty-content-padding| _0 26px_ | -  |
+| --nut-collapse-wrapper-content-color| _#666666_ | -  |
+| --nut-collapse-wrapper-content-font-size| _var(--nut-font-size-2)_ | -  |
+| --nut-collapse-wrapper-content-line-height| _1.5_ | -  |
+| --nut-collapse-wrapper-content-background-color| _var(--nut-white)_ | -  |

src/packages/__VUE/collapse/doc.taro.md

@@ -212,4 +212,26 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |
+| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-collapse-item-padding| _13px 36px 13px 26px_ | -  |
+| --nut-collapse-item-color| _#666666_ | -  |
+| --nut-collapse-item-disabled-color| _#c8c9cc_ | -  |
+| --nut-collapse-item-icon-color| _#666666_ | -  |
+| --nut-collapse-item-font-size| _var(--nut-font-size-2)_ | -  |
+| --nut-collapse-item-line-height| _24px_ | -  |
+| --nut-collapse-item-sub-title-color| _#666666_ | -  |
+| --nut-collapse-wrapper-content-padding| _12px 26px_ | -  |
+| --nut-collapse-wrapper-empty-content-padding| _0 26px_ | -  |
+| --nut-collapse-wrapper-content-color| _#666666_ | -  |
+| --nut-collapse-wrapper-content-font-size| _var(--nut-font-size-2)_ | -  |
+| --nut-collapse-wrapper-content-line-height| _1.5_ | -  |
+| --nut-collapse-wrapper-content-background-color| _var(--nut-white)_ | -  |

src/packages/__VUE/comment/doc.en-US.md

@@ -240,3 +240,15 @@ const info = [{
   "like":1, // Number of likes for this comment
 }]
 ```
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-comment-header-user-name-color| _rgba(51, 51, 51, 1)_ | -  |
+| --nut-comment-header-time-color| _rgba(153, 153, 153, 1)_ | -  |
+| --nut-comment-bottom-label-color| _rgba(153, 153, 153, 1)_ | -  |
+| --nut-comment-shop-color| _var(--nut-primary-color)_ | -  |

src/packages/__VUE/comment/doc.md

@@ -244,3 +244,15 @@ const info = [{
   "like":1, // 此评论的点赞数
 }]
 ```
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-comment-header-user-name-color| _rgba(51, 51, 51, 1)_ | -  |
+| --nut-comment-header-time-color| _rgba(153, 153, 153, 1)_ | -  |
+| --nut-comment-bottom-label-color| _rgba(153, 153, 153, 1)_ | -  |
+| --nut-comment-shop-color| _var(--nut-primary-color)_ | -  |

src/packages/__VUE/comment/doc.taro.md

@@ -244,3 +244,16 @@ const info = [{
   "like":1, // 此评论的点赞数
 }]
 ```
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-comment-header-user-name-color| _rgba(51, 51, 51, 1)_ | -  |
+| --nut-comment-header-time-color| _rgba(153, 153, 153, 1)_ | -  |
+| --nut-comment-bottom-label-color| _rgba(153, 153, 153, 1)_ | -  |
+| --nut-comment-shop-color| _var(--nut-primary-color)_ | -  |

src/packages/__VUE/countdown/doc.en-US.md

@@ -341,4 +341,15 @@ Paused and restarted the countdown with the paused attribute
 | ----- | ----- | 
 | start | Count Down Start | 
 | pause | Count Down Pause | 
-| reset | Count Down Reset | 
+| reset | Count Down Reset | 
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-countdown-display| _flex_ | -  |
+| --nut-countdown-color| _inherit_ | -  |
+| --nut-countdown-font-size| _initial_ | -  |

src/packages/__VUE/countdown/doc.md

@@ -344,4 +344,16 @@ app.use(Countdown);
 | ----- | ----- | 
 | start | 开始倒计时 | 
 | pause | 暂停倒计时 | 
-| reset | 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 | 
+| reset | 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-countdown-display| _flex_ | -  |
+| --nut-countdown-color| _inherit_ | -  |
+| --nut-countdown-font-size| _initial_ | -  |

src/packages/__VUE/countdown/doc.taro.md

@@ -344,4 +344,16 @@ app.use(Countdown);
 | ----- | ----- | 
 | start | 开始倒计时 | 
 | pause | 暂停倒计时 | 
-| reset | 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 | 
+| reset | 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 | 
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-countdown-display| _flex_ | -  |
+| --nut-countdown-color| _inherit_ | -  |
+| --nut-countdown-font-size| _initial_ | -  |

src/packages/__VUE/dialog/doc.en-US.md

@@ -279,4 +279,17 @@ export default {
 |---------|----------------|
 | header  | Custom title   |
 | default | Custom default |
-| footer  | Custom footer  |
+| footer  | Custom footer  |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-dialog-width| _296px_  | -  |
+| --nut-dialog-header-font-weight| _normal_  | -  |
+| --nut-dialog-header-color| _rgba(38, 38, 38, 1)_  | -  |
+| --nut-dialog-footer-justify-content| _space-around_  | -  |

src/packages/__VUE/dialog/doc.md

@@ -280,4 +280,17 @@ export default {
 |---------|--------------------|
 | header  | 自定义标题区域     |
 | default | 自定义内容         |
-| footer  | 自定义底部按钮区域 |
+| footer  | 自定义底部按钮区域 |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-dialog-width| _296px_  | -  |
+| --nut-dialog-header-font-weight| _normal_  | -  |
+| --nut-dialog-header-color| _rgba(38, 38, 38, 1)_  | -  |
+| --nut-dialog-footer-justify-content| _space-around_  | -  |

src/packages/__VUE/dialog/doc.taro.md

@@ -157,4 +157,17 @@ export default {
 |---------|--------------------|
 | header  | 自定义标题区域     |
 | default | 自定义内容         |
-| footer  | 自定义底部按钮区域 |
+| footer  | 自定义底部按钮区域 |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-dialog-width| _296px_  | -  |
+| --nut-dialog-header-font-weight| _normal_  | -  |
+| --nut-dialog-header-color| _rgba(38, 38, 38, 1)_  | -  |
+| --nut-dialog-footer-justify-content| _space-around_  | -  |

src/packages/styles/css-variables.scss

@@ -32,7 +32,7 @@ page {
 
   --nut-font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif;
 
-  // --nut---nut- Animation --nut---nut-
+  //  Animation
   --nut-animation-duration: 0.25s;
   --nut-animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53);