Merge branch 'v4' into v4

jd/generate-nutui-taro-vue.cjs

@@ -31,7 +31,7 @@ let installFunction = `function install(app: any) {
 let fileStrBuild = `${importStr}
 ${installFunction}
 const version = '${packageConfig.version}';
-export { install, version, Locale };
+export { install, version, Locale, ${packages.join(',')} };
 export default { install, version, Locale};`;
 
 fs.outputFile(path.resolve(__dirname, '../src/packages/nutui.taro.vue.build.ts'), fileStrBuild, 'utf8', (error) => {

jd/generate-style-deps.cjs

@@ -13,7 +13,7 @@ config.nav.forEach((item) => {
   });
 });
 styleMap.forEach((value) => {
-  if (value.chilren?.length !== 0) {
+  if (value.children && value.children.length > 0) {
     value.children.forEach((item, index) => {
       value.children[index] = styleMap.get(item);
     });

jd/generate-types-taro.cjs

@@ -6,6 +6,10 @@ const sourceDir = path.resolve(__dirname, './../tsc/type/src/packages') // 拷
 
 const toDir = path.resolve(__dirname, './../dist/types'); // ./../dist
 
+if(fs.existsSync(toDir)) {
+  fs.rmdirSync(toDir); //先删除文件夹
+}
+
 const basePath = path.join(toDir, '__VUE');
 
 const fileList = [];

jd/generate-types.cjs

@@ -6,6 +6,10 @@ const sourceDir = path.resolve(__dirname, './../tsc/type/src/packages'); // 拷
 
 const toDir = path.resolve(__dirname, './../dist/types'); // ./../dist
 
+if(fs.existsSync(toDir)) {
+  fs.rmdirSync(toDir); //先删除文件夹
+}
+
 const basePath = path.join(toDir, '__VUE');
 
 const fileList = [];

package.json

@@ -41,16 +41,16 @@
   "scripts": {
     "checked": "npm run generate:file && tsc",
     "checked:taro:vue": "npm run generate:file:taro:vue",
-    "dev": "npm run checked && vite --open --force",
-    "dev:taro:weapp": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:weapp",
-    "dev:taro:alipay": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:alipay",
-    "dev:taro:jd": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:jd",
-    "dev:taro:h5": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:h5",
+    "dev": "npm run checked && npm run dts && vite --open --force",
+    "dev:taro:weapp": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:weapp",
+    "dev:taro:alipay": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:alipay",
+    "dev:taro:jd": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:jd",
+    "dev:taro:h5": "npm run createTaroConfig && npm run checked:taro:vue && npm run dts && cd src/sites/mobile-taro/vue/ && npm run dev:h5",
     "build:site": "npm run checked && vite build",
     "build:site-jdt": "npm run checked && vite build --config vite.config.jdt.ts ",
     "build:site:oss": "npm run checked && vite build --base=/nutui/4x/",
-    "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts && npm run attrs",
-    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts:taro && npm run attrs",
+    "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts && npm run attrs && npm run generate:style:deps",
+    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:themes && vite build --config vite.config.build.css.ts && vite build --config vite.config.build.locale.ts && npm run dts:taro && npm run attrs&& npm run generate:style:deps",
     "serve": "vite preview",
     "upload": "yarn build:site:oss && node ./jd/upload.js",
     "add": "node jd/createComponentMode.js",
@@ -61,6 +61,7 @@
     "generate:types": "node jd/generate-types.cjs",
     "generate:types:taro": "node jd/generate-types-taro.cjs",
     "generate:themes": "node jd/generate-themes.cjs",
+    "generate:style:deps": "node jd/generate-style-deps.cjs",
     "prepare": "husky install",
     "test": "jest",
     "release": "standard-version -a",

src/config.json

@@ -341,7 +341,7 @@
           "exportEmptyTaro": true,
           "desc": "标签栏子组件",
           "author": "Drjingfubo",
-          "styleDeps": []
+          "styleDeps": ["Badge"]
         },
         {
           "version": "3.0.0",
@@ -1202,7 +1202,8 @@
           "show": true,
           "tarodoc": false,
           "type": "component",
-          "author": "yangxiaolu"
+          "author": "yangxiaolu",
+          "styleDeps": ["Popover"]
         }
       ]
     },
@@ -1364,7 +1365,7 @@
           "tarodoc": false,
           "type": "component",
           "author": "yangxiaolu",
-          "styleDeps": []
+          "styleDeps": ["Rate"]
         },
         {
           "version": "3.0.0",

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/address/index.taro.vue

@@ -10,12 +10,9 @@
     <view class="nut-address">
       <view class="nut-address__header">
         <view class="nut-address__header-back" @click="switchModule">
-          <nut-icon
-            v-bind="$attrs"
-            :name="backBtnIcon"
-            color="#cccccc"
-            v-show="type == 'exist' && privateType == 'custom' && backBtnIcon"
-          ></nut-icon>
+          <slot name="backIcon">
+            <Left v-show="type == 'exist' && privateType == 'custom'"></Left>
+          </slot>
         </view>
 
         <view class="nut-address__header__title">
@@ -27,7 +24,9 @@
         </view>
 
         <view class="nut-address__header-close" @click="handClose('cross')">
-          <nut-icon v-bind="$attrs" v-if="closeBtnIcon" :name="closeBtnIcon" color="#cccccc" size="18px"></nut-icon>
+          <slot name="closeIcon">
+            <Close color="#cccccc" size="18px"></Close>
+          </slot>
         </view>
       </view>
 
@@ -58,14 +57,8 @@
               @click="nextAreaList(item)"
             >
               <div>
-                <nut-icon
-                  class="region-item-icon"
-                  type="self"
-                  v-bind="$attrs"
-                  :name="selectedIcon"
-                  size="13px"
-                  v-if="selectedRegion[tabIndex]?.id == item.id"
-                ></nut-icon
+                <slot name="icon" v-if="selectedRegion[tabIndex]?.id == item.id">
+                  <Check class="nut-address-select-icon" width="13px"></Check> </slot
                 >{{ item.name }}
               </div>
             </li>
@@ -92,13 +85,14 @@
               :key="index"
               @click="selectedExist(item)"
             >
-              <nut-icon
-                class="exist-item-icon"
-                type="self"
-                v-bind="$attrs"
-                :name="item.selectedAddress ? selectedIcon : defaultIcon"
-                size="13px"
-              ></nut-icon>
+              <slot name="unselectedIcon" v-if="!item.selectedAddress">
+                <Location2 class="nut-address-select-icon" width="13px"></Location2>
+              </slot>
+
+              <slot name="icon" v-if="item.selectedAddress">
+                <Check class="nut-address-select-icon" width="13px"></Check>
+              </slot>
+
               <div class="nut-address__exist-item-info">
                 <div class="nut-address__exist-item-info-top" v-if="item.name && item.phone">
                   <div class="nut-address__exist-item-info-name">{{ item.name }}</div>
@@ -133,11 +127,17 @@ import { createComponent } from '@/packages/utils/create';
 import Popup from '../popup/index.taro.vue';
 import Elevator from '../elevator/index.taro.vue';
 const { create, componentName, translate } = createComponent('address');
+import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue-taro';
 
 export default create({
   components: {
     [Popup.name]: Popup,
-    [Elevator.name]: Elevator
+    [Elevator.name]: Elevator,
+    Location,
+    Location2,
+    Check,
+    Close,
+    Left
   },
   inheritAttrs: false,
   props: {
@@ -190,26 +190,6 @@ export default create({
       type: String,
       default: ''
     },
-    defaultIcon: {
-      // 地址选择列表前 - 默认的图标
-      type: String,
-      default: 'location2'
-    },
-    selectedIcon: {
-      // 地址选择列表前 - 选中的图标
-      type: String,
-      default: 'Check'
-    },
-    closeBtnIcon: {
-      // 关闭弹框按钮 icon
-      type: String,
-      default: 'circle-close'
-    },
-    backBtnIcon: {
-      // 选择其他地址左上角返回 icon
-      type: String,
-      default: 'left'
-    },
     height: {
       type: [String, Number],
       default: '200px'
@@ -239,9 +219,6 @@ export default create({
     const privateType = ref(props.type);
     const tabIndex = ref(0);
     const tabName = ref(['province', 'city', 'country', 'town']);
-    const tabNameDefault = ref(['']);
-
-    const isCustom2 = computed(() => props.type === 'custom2');
 
     const regionList = computed(() => {
       switch (tabIndex.value) {
@@ -338,8 +315,6 @@ export default create({
 
     // 手动关闭 点击叉号(cross)，或者蒙层(mask)
     const handClose = (type = 'self') => {
-      if (!props.closeBtnIcon) return;
-
       closeWay.value = type == 'cross' ? 'cross' : 'self';
 
       showPopup.value = false;

src/packages/__VUE/address/index.vue

@@ -123,11 +123,21 @@ import { reactive, ref, toRefs, watch, nextTick, computed, Ref, h, PropType } fr
 import { createComponent } from '@/packages/utils/create';
 import { RegionData, CustomRegionData, existRegionData } from './type';
 import { popupProps } from '../popup/props';
+import Popup from '../popup/index.vue';
+import Elevator from '../elevator/index.vue';
 const { componentName, create, translate } = createComponent('address');
 import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue';
 
 export default create({
-  components: { Location, Location2, Check, Close, Left },
+  components: {
+    Location,
+    Location2,
+    Check,
+    Close,
+    Left,
+    [Popup.name]: Popup,
+    [Elevator.name]: Elevator
+  },
   inheritAttrs: false,
   props: {
     ...popupProps,

src/packages/__VUE/addresslist/components/ItemContents.vue

@@ -12,8 +12,8 @@
       </div>
       <div class="nut-address-list-item__info-handle">
         <slot name="contentIcon">
-          <nut-icon name="del" class="nut-address-list-item__info-handle-del" @click="delClick"></nut-icon>
-          <nut-icon name="edit" class="nut-address-list-item__info-handle-edit" @click="editClick"></nut-icon>
+          <Del name="del" class="nut-address-list-item__info-handle-del" @click="delClick"></Del>
+          <Edit name="edit" class="nut-address-list-item__info-handle-edit" @click="editClick"></Edit>
         </slot>
       </div>
     </div>
@@ -28,8 +28,9 @@
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('addresslist-item');
 const { translate } = createComponent('addresslist');
-
+import { Del, Edit } from '@nutui/icons-vue';
 export default create({
+  components: { Del, Edit },
   props: {
     item: {
       type: Object,

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

@@ -8,11 +8,10 @@ It is mainly used to display and operate the address list. Dependent components:
 
 ```javascript
 import { createApp } from "vue";
-import { AddressList, Icon, Swipe, Button } from "@nutui/nutui";
+import { AddressList, Swipe, Button } from "@nutui/nutui";
 
 const app = createApp();
 app.use(AddressList);
-app.use(Icon);
 app.use(Swipe);
 app.use(Button);
 ```
@@ -292,3 +291,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

@@ -8,11 +8,10 @@
 
 ```javascript
 import { createApp } from "vue";
-import { AddressList, Icon, Swipe, Button } from "@nutui/nutui";
+import { AddressList, Swipe, Button } from "@nutui/nutui";
 
 const app = createApp();
 app.use(AddressList);
-app.use(Icon);
 app.use(Swipe);
 app.use(Button);
 ```
@@ -296,3 +295,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

@@ -8,11 +8,10 @@
 
 ```javascript
 import { createApp } from "vue";
-import { AddressList, Icon, Swipe, Button } from "@nutui/nutui";
+import { AddressList, Swipe, Button } from "@nutui/nutui";
 
 const app = createApp();
 app.use(AddressList);
-app.use(Icon);
 app.use(Swipe);
 app.use(Button);
 ```
@@ -296,3 +295,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/animate/index.taro.vue

@@ -8,15 +8,16 @@
 <script lang="ts">
 import { reactive, toRefs, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { AnimateType, AnimateAction } from './type';
 const { componentName, create } = createComponent('animate');
 export default create({
   props: {
     type: {
-      type: String as PropType<import('./type').AnimateType>,
+      type: String as PropType<AnimateType>,
       default: ''
     },
     action: {
-      type: String as PropType<import('./type').AnimateAction>,
+      type: String as PropType<AnimateAction>,
       default: 'initial'
     },
     loop: {

src/packages/__VUE/animate/index.vue

@@ -8,15 +8,16 @@
 <script lang="ts">
 import { reactive, toRefs, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { AnimateType, AnimateAction } from './type';
 const { componentName, create } = createComponent('animate');
 export default create({
   props: {
     type: {
-      type: String as PropType<import('./type').AnimateType>,
+      type: String as PropType<AnimateType>,
       default: ''
     },
     action: {
-      type: String as PropType<import('./type').AnimateAction>,
+      type: String as PropType<AnimateAction>,
       default: 'initial'
     },
     loop: {

src/packages/__VUE/audio/index.vue

@@ -63,6 +63,7 @@
 import { toRefs, ref, onMounted, reactive, watch, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Service } from '@nutui/icons-vue';
+import Range from '../range/index.vue';
 const { componentName, create } = createComponent('audio');
 
 export default create({
@@ -106,7 +107,8 @@ export default create({
     }
   },
   components: {
-    Service
+    Service,
+    [Range.name]: Range
   },
   emits: ['fastBack', 'play', 'forward', 'ended', 'changeProgress', 'mute', 'can-play'],
 

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

@@ -119,8 +119,17 @@ Set the button shape through the `shape` property, support circle and square but
 
 ```html
 <template>
-  <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
-  <nut-button shape="square" type="primary" icon="star">Star</nut-button>
+  <nut-button shape="square" plain type="primary">
+    <template #icon>
+      <StarFill />
+    </template>
+  </nut-button>
+  <nut-button shape="square" type="primary">
+    <template #icon>
+      <Star />
+    </template>
+    Star
+  </nut-button>
 </template>
 ```
 
@@ -205,3 +214,53 @@ 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

@@ -119,8 +119,17 @@ app.use(Button);
 
 ```html
 <template>
-  <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
-  <nut-button shape="square" type="primary" icon="star">收藏</nut-button>
+  <nut-button shape="square" plain type="primary">
+    <template #icon>
+      <StarFill />
+    </template>
+  </nut-button>
+  <nut-button shape="square" type="primary">
+    <template #icon>
+      <Star />
+    </template>
+    收藏
+  </nut-button>
 </template>
 ```
 
@@ -211,3 +220,55 @@ 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

@@ -119,8 +119,17 @@ app.use(Button);
 
 ```html
 <template>
-  <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
-  <nut-button shape="square" type="primary" icon="star">收藏</nut-button>
+  <nut-button shape="square" plain type="primary">
+    <template #icon>
+      <StarFill />
+    </template>
+  </nut-button>
+  <nut-button shape="square" type="primary">
+    <template #icon>
+      <Star />
+    </template>
+    收藏
+  </nut-button>
 </template>
 ```
 
@@ -205,3 +214,53 @@ 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/index.taro.vue

@@ -14,13 +14,14 @@
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Loading } from '@nutui/icons-vue-taro';
+import { ButtonShape, ButtonType, ButtonSize } from './type';
 const { componentName, create } = createComponent('button');
 export default create({
   components: { Loading },
   props: {
     color: String,
     shape: {
-      type: String as PropType<import('./type').ButtonShape>,
+      type: String as PropType<ButtonShape>,
       default: 'round'
     },
     plain: {
@@ -36,11 +37,11 @@ export default create({
       default: false
     },
     type: {
-      type: String as PropType<import('./type').ButtonType>,
+      type: String as PropType<ButtonType>,
       default: 'default'
     },
     size: {
-      type: String as PropType<import('./type').ButtonSize>,
+      type: String as PropType<ButtonSize>,
       default: 'normal'
     },
     block: {

src/packages/__VUE/button/index.vue

@@ -13,6 +13,7 @@
 <script lang="ts">
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { ButtonShape, ButtonType, ButtonSize } from './type';
 import { Loading } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('button');
 export default create({
@@ -20,7 +21,7 @@ export default create({
   props: {
     color: String,
     shape: {
-      type: String as PropType<import('./type').ButtonShape>,
+      type: String as PropType<ButtonShape>,
       default: 'round'
     },
     plain: {
@@ -36,11 +37,11 @@ export default create({
       default: false
     },
     type: {
-      type: String as PropType<import('./type').ButtonType>,
+      type: String as PropType<ButtonType>,
       default: 'default'
     },
     size: {
-      type: String as PropType<import('./type').ButtonSize>,
+      type: String as PropType<ButtonSize>,
       default: 'normal'
     },
     block: {

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/calendaritem/index.taro.vue

@@ -77,7 +77,7 @@ import Taro from '@tarojs/taro';
 import Utils from '@/packages/utils/date';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import requestAniFrame from '@/packages/utils/raf';
-import { MonthInfo, Day } from './type';
+import { MonthInfo, Day, CalendarTaroState } from './type';
 import NutScrollView from '../scrollView/index.taro.vue';
 import { isArray } from '@/packages/utils/util';
 const TARO_ENV = Taro.getEnv();
@@ -170,7 +170,7 @@ export default create({
       return slots.bottomInfo;
     });
     // state
-    const state: import('./type').CalendarTaroState = reactive({
+    const state: CalendarTaroState = reactive({
       yearMonthTitle: '',
       defaultRange: [0, 1],
       compConthsDatas: [],

src/packages/__VUE/calendaritem/index.vue

@@ -72,7 +72,7 @@ import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('calendar-item');
 import Utils from '@/packages/utils/date';
 import requestAniFrame from '@/packages/utils/raf';
-import { MonthInfo, Day } from './type';
+import { MonthInfo, Day, CalendarState } from './type';
 import { useExpose } from '@/packages/utils/useExpose/index';
 
 type StringArr = string[];
@@ -170,7 +170,7 @@ export default create({
       return slots.bottomInfo;
     });
 
-    const state: import('./type').CalendarState = reactive({
+    const state: CalendarState = reactive({
       yearMonthTitle: '',
       defaultRange: [],
       currDate: '',

src/packages/__VUE/calendaritem/type.ts

@@ -17,7 +17,7 @@ export interface CalendarState {
   propEndDate: string;
   currentIndex: number;
   unLoadPrev: boolean;
-  touchParams: import('./type').TouchParam;
+  touchParams: TouchParam;
   transformY: number;
   translateY: number;
   scrollDistance: number;

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/__tests__/checkbox.spec.ts

@@ -83,56 +83,8 @@ test('checkbox icon-size test', () => {
   });
 
   const items = wrapper.findAll('.nut-checkbox');
-  expect((items[0].findAll('i') as any)[0].element.style.fontSize).toEqual('25px');
-  expect((items[1].findAll('i') as any)[0].element.style.fontSize).toEqual('10px');
-});
-
-test('checkbox icon-name test', () => {
-  const wrapper = mount({
-    components: {
-      'nut-checkbox': Checkbox
-    },
-    template: `
-      <template>
-        <nut-checkbox v-model="checkbox5"  icon-name="checklist" icon-active-name="checklist">自定义图标</nut-checkbox>
-        <nut-checkbox v-model="checkbox6">auxiliary</nut-checkbox>
-      </template>
-    `,
-    setup() {
-      const state = reactive({
-        checkbox5: true,
-        checkbox6: true
-      });
-      return { ...toRefs(state) };
-    }
-  });
-
-  const items = wrapper.findAll('.nut-checkbox');
-  expect((items[0].findAll('i') as any)[0].classes()).toContain('nut-icon-checklist');
-});
-
-test('checkbox label test', () => {
-  const wrapper = mount({
-    components: {
-      'nut-checkbox': Checkbox
-    },
-    template: `
-      <template>
-        <nut-checkbox v-model="checkbox5" label="testlabel"></nut-checkbox>
-        <nut-checkbox v-model="checkbox6">auxiliary</nut-checkbox>
-      </template>
-    `,
-    setup() {
-      const state = reactive({
-        checkbox5: true,
-        checkbox6: true
-      });
-      return { ...toRefs(state) };
-    }
-  });
-
-  const items = wrapper.findAll('.nut-checkbox');
-  expect((items[0].findAll('i') as any)[0].find('testlabel')).toBeTruthy();
+  expect((items[0].findAll('svg') as any)[0].element.style.width).toEqual('25px');
+  expect((items[1].findAll('svg') as any)[0].element.style.height).toEqual('10px');
 });
 
 test('should emit "update:modelValue" event when checkbox is clicked', async () => {

src/packages/__VUE/checkbox/common.ts

@@ -1,10 +1,9 @@
-import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch } from 'vue';
+import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, Component } from 'vue';
+import { pxCheck } from '@/packages/utils/pxCheck';
 
-export const component = (componentName: string, nutIcon: object) => {
+export const component = (componentName: string, components: Record<string, Component>): any => {
   return {
-    components: {
-      nutIcon
-    },
+    components: components,
     props: {
       modelValue: {
         type: Boolean,
@@ -22,30 +21,10 @@ export const component = (componentName: string, nutIcon: object) => {
         type: [String, Number],
         default: ''
       },
-      iconName: {
-        type: String,
-        default: 'check-normal'
-      },
-      iconActiveName: {
-        type: String,
-        default: 'checked'
-      },
-      iconIndeterminateName: {
-        type: String,
-        default: 'check-disabled'
-      },
       label: {
         type: String,
         default: ''
       },
-      iconClassPrefix: {
-        type: String,
-        default: 'nut-icon'
-      },
-      iconFontClassName: {
-        type: String,
-        default: 'nutui-iconfont'
-      },
       indeterminate: {
         type: Boolean,
         default: false
@@ -104,13 +83,23 @@ export const component = (componentName: string, nutIcon: object) => {
       );
 
       const renderIcon = () => {
-        const { iconName, iconSize, iconActiveName, iconClassPrefix, iconFontClassName, iconIndeterminateName } = props;
-        return h(nutIcon, {
-          name: !pValue.value ? iconName : state.partialSelect ? iconIndeterminateName : iconActiveName,
-          size: iconSize,
-          class: color.value,
-          classPrefix: iconClassPrefix,
-          fontClassName: iconFontClassName
+        const { iconSize } = props;
+        const iconNodeMap = {
+          CheckNormal: slots.icon ? slots.icon : components.CheckNormal,
+          Checked: slots.checkedIcon ? slots.checkedIcon : components.Checked,
+          CheckDisabled: slots.indeterminate ? slots.indeterminate : components.CheckDisabled
+        };
+        const iconNode = !pValue.value
+          ? iconNodeMap.CheckNormal
+          : state.partialSelect
+          ? iconNodeMap.CheckDisabled
+          : iconNodeMap.Checked;
+        const size = pxCheck(iconSize);
+        return h(iconNode, {
+          width: size,
+          height: size,
+          size: size,
+          class: color.value
         });
       };
 
@@ -133,9 +122,9 @@ export const component = (componentName: string, nutIcon: object) => {
         }
         emitChange(!checked.value, slots.default?.()[0].children as string);
         if (hasParent.value) {
-          let value = parent.value.value;
-          let max = parent.max.value;
-          let { label } = props;
+          const value = parent.value.value;
+          const max = parent.max.value;
+          const { label } = props;
           const index = value.indexOf(label);
           if (index > -1) {
             value.splice(index, 1);

src/packages/__VUE/checkbox/demo.vue

@@ -2,14 +2,14 @@
   <div class="demo">
     <nut-cell-group :title="translate('basic')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox1" :label="translate('checkbox')" @change="changeBox1">{{
-          translate('checkbox')
-        }}</nut-checkbox>
+        <nut-checkbox v-model="checkbox1" :label="translate('checkbox')" @change="changeBox1">
+          {{ translate('checkbox') }}
+        </nut-checkbox>
       </nut-cell>
       <nut-cell>
-        <nut-checkbox v-model="checkbox1" text-position="left" @change="changeBox1">{{
-          translate('checkbox')
-        }}</nut-checkbox>
+        <nut-checkbox v-model="checkbox1" text-position="left" @change="changeBox1">
+          {{ translate('checkbox') }}
+        </nut-checkbox>
       </nut-cell>
       <nut-cell>
         <div class="demo-check">{{ translate('selected') }}</div>
@@ -18,9 +18,9 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('semi')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox9" :indeterminate="true" :label="translate('checkbox')">{{
-          translate('checkbox')
-        }}</nut-checkbox>
+        <nut-checkbox v-model="checkbox9" :indeterminate="true" :label="translate('checkbox')">
+          {{ translate('checkbox') }}
+        </nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('disable')">
@@ -41,9 +41,11 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('icon')">
       <nut-cell>
-        <nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">{{
-          translate('icon')
-        }}</nut-checkbox>
+        <nut-checkbox v-model="checkbox7">
+          {{ translate('icon') }}
+          <template #icon> <Checklist /> </template>
+          <template #checkedIcon> <Checklist color="red" /> </template>
+        </nut-checkbox>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('change')">
@@ -78,18 +80,18 @@
     <nut-cell-group :title="translate('selectGroup')">
       <nut-cell>
         <nut-checkbox-group v-model="checkboxgroup3" ref="group" @change="changeBox4">
-          <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">{{
-            item.value
-          }}</nut-checkbox>
+          <nut-checkbox v-for="item in checkboxsource" :key="item.label" :label="item.label">
+            {{ item.value }}
+          </nut-checkbox>
         </nut-checkbox-group>
       </nut-cell>
       <nut-cell>
-        <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">{{
-          translate('selectAll')
-        }}</nut-button>
-        <nut-button type="info" @click="toggleAll(false)" style="margin: 0 20px 0 0">{{
-          translate('cancel')
-        }}</nut-button>
+        <nut-button type="primary" @click="toggleAll(true)" style="margin: 0 20px 0 0">
+          {{ translate('selectAll') }}
+        </nut-button>
+        <nut-button type="info" @click="toggleAll(false)" style="margin: 0 20px 0 0">
+          {{ translate('cancel') }}
+        </nut-button>
         <nut-button type="warning" @click="toggleReverse()">{{ translate('selectReverse') }}</nut-button>
       </nut-cell>
     </nut-cell-group>
@@ -114,18 +116,18 @@
         }}</nut-checkbox>
       </nut-cell>
       <nut-checkbox-group v-model="checkboxgroup5" ref="group2" @change="changeBox6">
+        <nut-cell>
+          <nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox>
+        </nut-cell>
         <nut-cell
-          ><nut-checkbox label="1" style="margin: 2px 20px 0 0">{{ translate('combine') }}</nut-checkbox></nut-cell
-        >
-        <nut-cell
-          ><nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox></nut-cell
-        >
+          ><nut-checkbox label="2">{{ translate('combine') }}</nut-checkbox>
+        </nut-cell>
         <nut-cell
-          ><nut-checkbox label="3">{{ translate('combine') }}</nut-checkbox></nut-cell
-        >
+          ><nut-checkbox label="3">{{ translate('combine') }}</nut-checkbox>
+        </nut-cell>
         <nut-cell
-          ><nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox></nut-cell
-        >
+          ><nut-checkbox label="4">{{ translate('combine') }}</nut-checkbox>
+        </nut-cell>
       </nut-checkbox-group>
     </nut-cell-group>
   </div>
@@ -136,6 +138,7 @@ import { createComponent } from '@/packages/utils/create';
 import { Toast } from '@/packages/nutui.vue';
 const { createDemo, translate } = createComponent('checkbox');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
+import { Checklist } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -184,6 +187,9 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: {
+    Checklist
+  },
   setup(props, context) {
     initTranslate();
     const group = ref(null) as Ref;

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

@@ -8,12 +8,12 @@ The multiple selection button is used to select.
 
 ``` ts
 import { createApp } from 'vue';
-import { Checkbox,CheckboxGroup,Icon } from '@nutui/nutui';
-
+import { Checkbox,CheckboxGroup } from '@nutui/nutui';
+import { Checklist } from '@nutui/icons-vue';
 const app = createApp();
 app.use(Checkbox);
 app.use(CheckboxGroup);
-app.use(Icon);
+app.use(Checklist);
 ```
 
 ### Basic Usage
@@ -130,14 +130,17 @@ app.use(Icon);
 :::
 
 ### Custom icon
-
-It is recommended to set the `icon-name` and `icon-active-name` attributes at the same time
+Customize the icon through the slot, it is recommended to set the `icon` and `checkedIcon` two slots at the same time
 
 :::demo
 
 ```html
 <template>
-  <nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">Custom icon</nut-checkbox>
+  <nut-checkbox v-model="checkbox7" >
+    Custom icon
+    <template #icon> <Checklist /> </template>
+    <template #checkedIcon> <Checklist color="red" /> </template>
+  </nut-checkbox>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
@@ -375,15 +378,15 @@ When the value changes, the `change` event will be triggered
 | disabled | Disable selection | Boolean | `false` 
 | text-position | The position of the text, optional value：`left`,`right` | String | `right` 
 | icon-size | [Icon Size](#/en-US/icon) | String、Number | `18` 
-| icon-name | [Icon Name](#/en-US/icon)，Before selection (it is suggested to modify it together with `icon-active-name`) | String | `'check-normal'` 
-| icon-active-name | [Icon Name](#/en-US/icon)，After selection (it is suggested to modify it together with `icon-name`) | String | `'checked'`
-| icon-indeterminate-name | [Icon Name](#/en-US/icon)，Semi selected state | String | `'check-disabled'` 
-| icon-class-prefix | Custom icon class name prefix, used to use custom icons        | String                  | `nut-icon` 
-| icon-font-class-name | Basic class name of custom icon font        | String                  | `nutui-iconfont` 
 | label | Text content of the check box | String | - 
 | indeterminate | Whether half selection status is currently supported. It is generally used in select all operation       | Boolean                  | `false` |
 
-
+### Checkbox Slots
+| Name | Description |
+|-|-|
+| icon | Icon when not selected |
+| checkedIcon | Icon when selected |
+| indeterminate | Icon when half selected |
 ### CheckboxGroup Props
 
 | Attribute | Description | Type   | Default 
@@ -412,3 +415,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

@@ -8,12 +8,12 @@
 
 ``` ts
 import { createApp } from 'vue';
-import { Checkbox,CheckboxGroup,Icon } from '@nutui/nutui';
-
+import { Checkbox,CheckboxGroup } from '@nutui/nutui';
+import { Checklist } from '@nutui/icons-vue';
 const app = createApp();
 app.use(Checkbox);
 app.use(CheckboxGroup);
-app.use(Icon);
+app.use(Checklist);
 ```
 
 ### 基础用法
@@ -131,13 +131,17 @@ app.use(Icon);
 
 ### 自定义图标
 
-这里建议同时设置 `icon-name` 和 `icon-active-name` 属性
+通过slot自定义图标，建议同时设置`icon`和`checkedIcon`两个插槽
 
 :::demo
 
 ```html
 <template>
-  <nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-checkbox>
+  <nut-checkbox v-model="checkbox7" >
+    自定义图标
+    <template #icon> <Checklist /> </template>
+    <template #checkedIcon> <Checklist color="red" /> </template>
+  </nut-checkbox>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
@@ -379,13 +383,14 @@ app.use(Icon);
 | disabled | 是否禁用选择 | Boolean | `false`
 | text-position | 文本所在的位置，可选值：`left`,`right` | String | `right`
 | icon-size | [图标尺寸](#/zh-CN/component/icon) | String、Number | `18`
-| icon-name | [图标名称](#/zh-CN/component/icon)，选中前(建议和`icon-active-name`一起修改) | String | `'check-normal'`
-| icon-active-name | [图标名称](#/zh-CN/component/icon)，选中后(建议和`icon-name`一起修改) | String | `'checked'`
-| icon-indeterminate-name | [图标名称](#/zh-CN/component/icon)，半选状态 | String | `'check-disabled'`
-| icon-class-prefix | 自定义 icon 类名前缀，用于使用自定义图标        | String                  | `nut-icon` |
-| icon-font-class-name | 自定义 icon 字体基础类名        | String                  | `nutui-iconfont` |
 | label | 复选框的文本内容 | String | -
 | indeterminate | 当前是否支持半选状态，一般用在全选操作中        | Boolean                  | `false` |
+### Checkbox Slots
+| 名称 | 说明 |
+|-|-|
+| icon | 未选中时的图标 |
+| checkedIcon | 选中时的图标 |
+| indeterminate | 半选时的图标 |
 ### CheckboxGroup Props
 
 | 字段 | 说明 | 类型 | 默认值
@@ -415,3 +420,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

@@ -8,12 +8,12 @@
 
 ``` ts
 import { createApp } from 'vue';
-import { Checkbox,CheckboxGroup,Icon } from '@nutui/nutui-taro';
-
+import { Checkbox,CheckboxGroup } from '@nutui/nutui-taro';
+import { Checklist } from '@nutui/icons-vue-taro';
 const app = createApp();
 app.use(Checkbox);
 app.use(CheckboxGroup);
-app.use(Icon);
+app.use(Checklist);
 ```
 
 ### 基础用法
@@ -131,13 +131,17 @@ app.use(Icon);
 
 ### 自定义图标
 
-这里建议同时设置 `icon-name` 和 `icon-active-name` 属性
+通过slot自定义图标，建议同时设置`icon`和`checkedIcon`两个插槽
 
 :::demo
 
 ```html
 <template>
-  <nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-checkbox>
+  <nut-checkbox v-model="checkbox7" >
+    自定义图标
+    <template #icon> <Checklist /> </template>
+    <template #checkedIcon> <Checklist color="red" /> </template>
+  </nut-checkbox>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';
@@ -382,10 +386,15 @@ app.use(Icon);
 | icon-name | [图标名称](#/zh-CN/component/icon)，选中前(建议和`icon-active-name`一起修改) | String | `'check-normal'`
 | icon-active-name | [图标名称](#/zh-CN/component/icon)，选中后(建议和`icon-name`一起修改) | String | `'checked'`
 | icon-indeterminate-name | [图标名称](#/zh-CN/component/icon)，半选状态 | String | `'check-disabled'`
-| icon-class-prefix | 自定义 icon 类名前缀，用于使用自定义图标        | String                  | `nut-icon` |
-| icon-font-class-name | 自定义 icon 字体基础类名        | String                  | `nutui-iconfont` |
 | label | 复选框的文本内容 | String | -
 | indeterminate | 当前是否支持半选状态，一般用在全选操作中        | Boolean                  | `false` |
+
+### Checkbox Slots
+| 名称 | 说明 |
+|-|-|
+| icon | 未选中时的图标 |
+| checkedIcon | 选中时的图标 |
+| indeterminate | 半选时的图标 |
 ### CheckboxGroup Props
 
 | 字段 | 说明 | 类型 | 默认值
@@ -415,3 +424,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/index.taro.vue

@@ -2,6 +2,7 @@
 import { createComponent } from '@/packages/utils/create';
 const { create, componentName } = createComponent('checkbox');
 import { component } from './common';
-import nutIcon from '../icon/index.taro.vue';
-export default create(component(componentName, nutIcon));
+import { CheckNormal, Checked, CheckDisabled } from '@nutui/icons-vue-taro';
+
+export default create(component(componentName, { CheckNormal, Checked, CheckDisabled }));
 </script>

src/packages/__VUE/checkbox/index.vue

@@ -2,6 +2,7 @@
 import { createComponent } from '@/packages/utils/create';
 const { create, componentName } = createComponent('checkbox');
 import { component } from './common';
-import nutIcon from '../icon/index.vue';
-export default create(component(componentName, nutIcon));
+import { CheckNormal, Checked, CheckDisabled } from '@nutui/icons-vue';
+
+export default create(component(componentName, { CheckNormal, Checked, CheckDisabled }));
 </script>

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/components/CmtHeader.vue

@@ -52,7 +52,6 @@ export default create({
       default: () => ''
     }
   },
-  components: {},
   emits: ['handleClick'],
 
   setup(props, { emit }) {

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/comment/index.taro.vue

@@ -19,13 +19,11 @@
     <comment-images :images="images" :videos="videos" :type="imagesRows" @clickImages="clickImages"></comment-images>
 
     <view class="nut-comment__follow" v-if="follow && follow.days > 0" @click="handleClick">
-      <view class="nut-comment__follow-title"
-        ><nut-icon size="14" name="joy-smile" />购买{{ follow.days }}天后追评</view
-      >
+      <view class="nut-comment__follow-title">购买{{ follow.days }}天后追评</view>
       <view class="nut-comment__follow-com">{{ follow.content }}</view>
       <view class="nut-comment__follow-img" v-if="follow.images && follow.images.length > 0"
-        >{{ follow.images.length }} 张追评图片 <nut-icon size="12" name="right"
-      /></view>
+        >{{ follow.images.length }} 张追评图片 <Right width="12px"></Right
+      ></view>
     </view>
 
     <comment-bottom
@@ -43,10 +41,12 @@
 import { ref, onMounted, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('comment');
+import { Right } from '@nutui/icons-vue-taro';
 
 import CommentHeader from './components/CmtHeader.vue';
 import CommentImages from './components/CmtImages.vue';
 import CommentBottom from './components/CmtBottom.vue';
+import { Rate } from '@/packages/nutui.vue';
 
 interface VideosType {
   id: number | string;
@@ -106,9 +106,11 @@ export default create({
     }
   },
   components: {
+    [Rate.name]: Rate,
     CommentHeader,
     CommentImages,
-    CommentBottom
+    CommentBottom,
+    Right
   },
   emits: ['click', 'clickImages', 'clickOperate'],
 

src/packages/__VUE/comment/index.vue

@@ -42,6 +42,7 @@ import { ref, onMounted, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('comment');
 import { JoySmile, Right } from '@nutui/icons-vue';
+import Rate from '../rate/index.vue';
 
 import CommentHeader from './components/CmtHeader.vue';
 import CommentImages from './components/CmtImages.vue';
@@ -105,6 +106,7 @@ export default create({
     }
   },
   components: {
+    [Rate.name]: Rate,
     CommentHeader,
     CommentImages,
     CommentBottom,

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/datepicker/index.taro.vue

@@ -23,8 +23,9 @@
 <script lang="ts">
 import { toRefs, watch, computed, reactive, onBeforeMount } from 'vue';
 import type { PropType } from 'vue';
-import nutPicker from '../picker/index.taro.vue';
+import Picker from '../picker/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
+import { Formatter, Filter } from './type';
 import { padZero, isDate as isDateU } from '@/packages/utils/util';
 const { componentName, create } = createComponent('date-picker');
 
@@ -45,7 +46,7 @@ const zhCNType: {
 };
 export default create({
   components: {
-    nutPicker
+    [Picker.name]: Picker
   },
   props: {
     modelValue: null,
@@ -84,7 +85,7 @@ export default create({
       validator: isDate
     },
     formatter: {
-      type: Function as PropType<import('./type').Formatter>,
+      type: Function as PropType<Formatter>,
       default: null
     },
     // 是否开启3D效果
@@ -97,7 +98,7 @@ export default create({
       type: [Number, String],
       default: 1000
     },
-    filter: Function as PropType<import('./type').Filter>,
+    filter: Function as PropType<Filter>,
     showToolbar: {
       type: Boolean,
       default: true

src/packages/__VUE/datepicker/index.vue

@@ -26,6 +26,7 @@ import type { PropType } from 'vue';
 import Picker from '../picker/index.vue';
 import { PickerOption } from '../picker/types';
 import { createComponent } from '@/packages/utils/create';
+import { Formatter, Filter } from './type';
 import { padZero, isDate as isDateU } from '@/packages/utils/util';
 const { componentName, create, translate } = createComponent('date-picker');
 
@@ -85,7 +86,7 @@ export default create({
       validator: isDate
     },
     formatter: {
-      type: Function as PropType<import('./type').Formatter>,
+      type: Function as PropType<Formatter>,
       default: null
     },
     // 是否开启3D效果
@@ -98,7 +99,7 @@ export default create({
       type: [Number, String],
       default: 1000
     },
-    filter: Function as PropType<import('./type').Filter>,
+    filter: Function as PropType<Filter>,
     showToolbar: {
       type: Boolean,
       default: true

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/__VUE/divider/doc.en-US.md

@@ -122,4 +122,23 @@ User can custom divider style with style attribute.
 | Name | Description           | 
 |--------|----------------|
 | default  | Default 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-divider-margin | _16px 0_ | -  |
+| --nut-divider-text-font-size | _var(--nut-font-size-2)_ | -  |
+| --nut-divider-text-color | _#909ca4_ | -  |
+| --nut-divider-line-height | _2px_ | -  |
+| --nut-divider-before-margin-right | _16px_ | -  |
+| --nut-divider-after-margin-left | _16px_ | -  |
+| --nut-divider-vertical-height | _12px_ | -  |
+| --nut-divider-vertical-top | _2px_ | -  |
+| --nut-divider-vertical-border-left | _rgba(0, 0, 0, 0.06)_ | -  |
+| --nut-divider-vertical-margin | _0 8px_ | -  |

src/packages/__VUE/divider/doc.md

@@ -122,4 +122,23 @@ app.use(Divider);
 | 名称 | 说明           | 
 |--------|----------------|
 | default  | 内容 | 
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-divider-margin | _16px 0_ | -  |
+| --nut-divider-text-font-size | _var(--nut-font-size-2)_ | -  |
+| --nut-divider-text-color | _#909ca4_ | -  |
+| --nut-divider-line-height | _2px_ | -  |
+| --nut-divider-before-margin-right | _16px_ | -  |
+| --nut-divider-after-margin-left | _16px_ | -  |
+| --nut-divider-vertical-height | _12px_ | -  |
+| --nut-divider-vertical-top | _2px_ | -  |
+| --nut-divider-vertical-border-left | _rgba(0, 0, 0, 0.06)_ | -  |
+| --nut-divider-vertical-margin | _0 8px_ | -  |
     

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

@@ -122,4 +122,23 @@ app.use(Divider);
 | 名称 | 说明           | 
 |--------|----------------|
 | default  | 内容 | 
-    
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-divider-margin | _16px 0_ | -  |
+| --nut-divider-text-font-size | _var(--nut-font-size-2)_ | -  |
+| --nut-divider-text-color | _#909ca4_ | -  |
+| --nut-divider-line-height | _2px_ | -  |
+| --nut-divider-before-margin-right | _16px_ | -  |
+| --nut-divider-after-margin-left | _16px_ | -  |
+| --nut-divider-vertical-height | _12px_ | -  |
+| --nut-divider-vertical-top | _2px_ | -  |
+| --nut-divider-vertical-border-left | _rgba(0, 0, 0, 0.06)_ | -  |
+| --nut-divider-vertical-margin | _0 8px_ | -  |

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

@@ -98,3 +98,14 @@ app.use(InputNumber);
 | change  | Trigger event when Ecard is clicker | value |
 | input-change  | Triggered when the value changes |value |
 | change-step  | Triggered when the steps value changes | value，modelValue |
+
+## 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-ecard-bg-color                    | _#f0f2f5_        | -    |
+

src/packages/__VUE/ecard/doc.md

@@ -98,3 +98,13 @@ app.use(InputNumber);
 | change  | 选中电子卡事件 | 点击的数据 |
 | input-change  | 更改input框触发事件 |输入的数据 |
 | change-step  | 更改数量时触发 | 当前数量，当前选中的卡面值 |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-ecard-bg-color                    | _#f0f2f5_        | -    |

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

@@ -98,3 +98,14 @@ app.use(InputNumber);
 | change  | 选中电子卡事件 | 点击的数据 |
 | input-change  | 更改input框触发事件 |输入的数据 |
 | change-step  | 更改数量时触发 | 当前数量，当前选中的卡面值 |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-ecard-bg-color                    | _#f0f2f5_        | -    |
+

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

@@ -488,4 +488,54 @@ app.use(Elevator);
 
 | Event           | Description                   | Arguments           |
 | ---------------- | ---------------------- | ------------ |
-| scrollTo         | Scroll to the location of the corresponding index       | index:number |
+| scrollTo         | Scroll to the location of the corresponding index       | index:number |
+
+## 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-elevator-list-item-highcolor| _var(--nut-primary-color)_  | -  |
+| --nut-elevator-list-item-font-size| _12px_  | -  |
+| --nut-elevator-list-item-font-color| _#333333_  | -  |
+| --nut-elevator-list-item-name-padding| _0 20px_  | -  |
+| --nut-elevator-list-item-name-height| _30px_  | -  |
+| --nut-elevator-list-item-name-line-height| _30px_  | -  |
+| --nut-elevator-list-item-code-font-size| _14px_  | -  |
+| --nut-elevator-list-item-code-font-color| _#1a1a1a_  | -  |
+| --nut-elevator-list-item-code-font-weight| _500_  | -  |
+| --nut-elevator-list-item-code-padding| _0 20px_  | -  |
+| --nut-elevator-list-item-code-height| _35px_  | -  |
+| --nut-elevator-list-item-code-line-height| _35px_  | -  |
+| --nut-elevator-list-item-code-after-width| _100%_  | -  |
+| --nut-elevator-list-item-code-after-height| _1px_  | -  |
+| --nut-elevator-list-item-code-after-bg-color| _#f5f5f5_  | -  |
+| --nut-elevator-list-item-code-current-box-shadow| _0 3px 3px 1px rgba(240, 240, 240, 1)_  | -  |
+| --nut-elevator-list-item-code-current-bg-color| _#fff_  | -  |
+| --nut-elevator-list-item-code-current-border-radius| _50%_  | -  |
+| --nut-elevator-list-item-code-current-width| _45px_  | -  |
+| --nut-elevator-list-item-code-current-height| _45px_  | -  |
+| --nut-elevator-list-item-code-current-line-height| _45px_  | -  |
+| --nut-elevator-list-item-code-current-position| _absolute_  | -  |
+| --nut-elevator-list-item-code-current-right| _60px_  | -  |
+| --nut-elevator-list-item-code-current-top| _50%_  | -  |
+| --nut-elevator-list-item-code-current-transform| _translateY(-50%)_  | -  |
+| --nut-elevator-list-item-code-current-text-align| _center_  | -  |
+| --nut-elevator-list-item-bars-position| _absolute_  | -  |
+| --nut-elevator-list-item-bars-right| _8px_  | -  |
+| --nut-elevator-list-item-bars-top| _50%_  | -  |
+| --nut-elevator-list-item-bars-transform| _translateY(-50%)_  | -  |
+| --nut-elevator-list-item-bars-padding| _15px 0_  | -  |
+| --nut-elevator-list-item-bars-background-color| _#eeeff2_  | -  |
+| --nut-elevator-list-item-bars-border-radius| _6px_  | -  |
+| --nut-elevator-list-item-bars-text-align| _center_  | -  |
+| --nut-elevator-list-item-bars-z-index| _1_  | -  |
+| --nut-elevator-list-item-bars-inner-item-padding| _3px_  | -  |
+| --nut-elevator-list-item-bars-inner-item-font-size| _10px_  | -  |
+| --nut-elevator-list-fixed-color| _var(--nut-primary-color)_  | -  |
+| --nut-elevator-list-fixed-bg-color| _var(--nut-white)_  | -  |
+| --nut-elevator-list-fixed-box-shadow| _0 0 10px #eee_  | -  |
+| --nut-elevator-list-item-bars-inner-item-active-color| _var(--nut-primary-color)_  | -  |

src/packages/__VUE/elevator/doc.md

@@ -489,4 +489,55 @@ app.use(Elevator);
 
 | 事件名           | 说明                   | 参数           |
 | ---------------- | ---------------------- | ------------ |
-| scrollTo         | 滚动到对应索引的位置       | index:number |
+| scrollTo         | 滚动到对应索引的位置       | index:number |
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-elevator-list-item-highcolor| _var(--nut-primary-color)_  | -  |
+| --nut-elevator-list-item-font-size| _12px_  | -  |
+| --nut-elevator-list-item-font-color| _#333333_  | -  |
+| --nut-elevator-list-item-name-padding| _0 20px_  | -  |
+| --nut-elevator-list-item-name-height| _30px_  | -  |
+| --nut-elevator-list-item-name-line-height| _30px_  | -  |
+| --nut-elevator-list-item-code-font-size| _14px_  | -  |
+| --nut-elevator-list-item-code-font-color| _#1a1a1a_  | -  |
+| --nut-elevator-list-item-code-font-weight| _500_  | -  |
+| --nut-elevator-list-item-code-padding| _0 20px_  | -  |
+| --nut-elevator-list-item-code-height| _35px_  | -  |
+| --nut-elevator-list-item-code-line-height| _35px_  | -  |
+| --nut-elevator-list-item-code-after-width| _100%_  | -  |
+| --nut-elevator-list-item-code-after-height| _1px_  | -  |
+| --nut-elevator-list-item-code-after-bg-color| _#f5f5f5_  | -  |
+| --nut-elevator-list-item-code-current-box-shadow| _0 3px 3px 1px rgba(240, 240, 240, 1)_  | -  |
+| --nut-elevator-list-item-code-current-bg-color| _#fff_  | -  |
+| --nut-elevator-list-item-code-current-border-radius| _50%_  | -  |
+| --nut-elevator-list-item-code-current-width| _45px_  | -  |
+| --nut-elevator-list-item-code-current-height| _45px_  | -  |
+| --nut-elevator-list-item-code-current-line-height| _45px_  | -  |
+| --nut-elevator-list-item-code-current-position| _absolute_  | -  |
+| --nut-elevator-list-item-code-current-right| _60px_  | -  |
+| --nut-elevator-list-item-code-current-top| _50%_  | -  |
+| --nut-elevator-list-item-code-current-transform| _translateY(-50%)_  | -  |
+| --nut-elevator-list-item-code-current-text-align| _center_  | -  |
+| --nut-elevator-list-item-bars-position| _absolute_  | -  |
+| --nut-elevator-list-item-bars-right| _8px_  | -  |
+| --nut-elevator-list-item-bars-top| _50%_  | -  |
+| --nut-elevator-list-item-bars-transform| _translateY(-50%)_  | -  |
+| --nut-elevator-list-item-bars-padding| _15px 0_  | -  |
+| --nut-elevator-list-item-bars-background-color| _#eeeff2_  | -  |
+| --nut-elevator-list-item-bars-border-radius| _6px_  | -  |
+| --nut-elevator-list-item-bars-text-align| _center_  | -  |
+| --nut-elevator-list-item-bars-z-index| _1_  | -  |
+| --nut-elevator-list-item-bars-inner-item-padding| _3px_  | -  |
+| --nut-elevator-list-item-bars-inner-item-font-size| _10px_  | -  |
+| --nut-elevator-list-fixed-color| _var(--nut-primary-color)_  | -  |
+| --nut-elevator-list-fixed-bg-color| _var(--nut-white)_  | -  |
+| --nut-elevator-list-fixed-box-shadow| _0 0 10px #eee_  | -  |
+| --nut-elevator-list-item-bars-inner-item-active-color| _var(--nut-primary-color)_  | -  |

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

@@ -489,4 +489,54 @@ app.use(Elevator);
 
 | 事件名           | 说明                   | 参数           |
 | ---------------- | ---------------------- | ------------ |
-| scrollTo         | 滚动到对应索引的位置       | index:number |
+| scrollTo         | 滚动到对应索引的位置       | index:number |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-elevator-list-item-highcolor| _var(--nut-primary-color)_  | -  |
+| --nut-elevator-list-item-font-size| _12px_  | -  |
+| --nut-elevator-list-item-font-color| _#333333_  | -  |
+| --nut-elevator-list-item-name-padding| _0 20px_  | -  |
+| --nut-elevator-list-item-name-height| _30px_  | -  |
+| --nut-elevator-list-item-name-line-height| _30px_  | -  |
+| --nut-elevator-list-item-code-font-size| _14px_  | -  |
+| --nut-elevator-list-item-code-font-color| _#1a1a1a_  | -  |
+| --nut-elevator-list-item-code-font-weight| _500_  | -  |
+| --nut-elevator-list-item-code-padding| _0 20px_  | -  |
+| --nut-elevator-list-item-code-height| _35px_  | -  |
+| --nut-elevator-list-item-code-line-height| _35px_  | -  |
+| --nut-elevator-list-item-code-after-width| _100%_  | -  |
+| --nut-elevator-list-item-code-after-height| _1px_  | -  |
+| --nut-elevator-list-item-code-after-bg-color| _#f5f5f5_  | -  |
+| --nut-elevator-list-item-code-current-box-shadow| _0 3px 3px 1px rgba(240, 240, 240, 1)_  | -  |
+| --nut-elevator-list-item-code-current-bg-color| _#fff_  | -  |
+| --nut-elevator-list-item-code-current-border-radius| _50%_  | -  |
+| --nut-elevator-list-item-code-current-width| _45px_  | -  |
+| --nut-elevator-list-item-code-current-height| _45px_  | -  |
+| --nut-elevator-list-item-code-current-line-height| _45px_  | -  |
+| --nut-elevator-list-item-code-current-position| _absolute_  | -  |
+| --nut-elevator-list-item-code-current-right| _60px_  | -  |
+| --nut-elevator-list-item-code-current-top| _50%_  | -  |
+| --nut-elevator-list-item-code-current-transform| _translateY(-50%)_  | -  |
+| --nut-elevator-list-item-code-current-text-align| _center_  | -  |
+| --nut-elevator-list-item-bars-position| _absolute_  | -  |
+| --nut-elevator-list-item-bars-right| _8px_  | -  |
+| --nut-elevator-list-item-bars-top| _50%_  | -  |
+| --nut-elevator-list-item-bars-transform| _translateY(-50%)_  | -  |
+| --nut-elevator-list-item-bars-padding| _15px 0_  | -  |
+| --nut-elevator-list-item-bars-background-color| _#eeeff2_  | -  |
+| --nut-elevator-list-item-bars-border-radius| _6px_  | -  |
+| --nut-elevator-list-item-bars-text-align| _center_  | -  |
+| --nut-elevator-list-item-bars-z-index| _1_  | -  |
+| --nut-elevator-list-item-bars-inner-item-padding| _3px_  | -  |
+| --nut-elevator-list-item-bars-inner-item-font-size| _10px_  | -  |
+| --nut-elevator-list-fixed-color| _var(--nut-primary-color)_  | -  |
+| --nut-elevator-list-fixed-bg-color| _var(--nut-white)_  | -  |
+| --nut-elevator-list-fixed-box-shadow| _0 0 10px #eee_  | -  |
+| --nut-elevator-list-item-bars-inner-item-active-color| _var(--nut-primary-color)_  | -  |

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

@@ -98,3 +98,13 @@ app.use(Ellipsis);
 |--------|----------------|--------------|
 | click  | Emitted when the content is clicked | -- |
 | change  | Emitted when expand or collapse is clicked | -- |
+
+## 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-ellipsis-expand-collapse-color       | _#3460fa_        | -    |

src/packages/__VUE/ellipsis/doc.md

@@ -98,3 +98,13 @@ app.use(Ellipsis);
 |--------|----------------|--------------|
 | click  | 文本点击是触发 | -- |
 | change  | 点击展开收起时触发 | -- |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+|  --nut-ellipsis-expand-collapse-color       | _#3460fa_        | -    |

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

@@ -98,3 +98,13 @@ app.use(Ellipsis);
 |--------|----------------|--------------|
 | click  | 文本点击是触发 | -- |
 | change  | 点击展开收起时触发 | -- |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+|  --nut-ellipsis-expand-collapse-color       | _#3460fa_        | -    |

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

@@ -75,4 +75,20 @@ app.use(Empty);
 | default  | 		Custom bottom content | 
 | image  | 	Custom image | 
 | description  | 	Custom description | 
+
+## 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-empty-padding| _32px 0_ | -  |
+| --nut-empty-image-size| _170px_ | -  |
+| --nut-empty-description-margin-top| _4px_ | -  |
+| --nut-empty-description-color| _#666666_ | -  |
+| --nut-empty-description-font-size| _14px_ | -  |
+| --nut-empty-description-line-height| _20px_ | -  |
+| --nut-empty-description-padding| _0 40px_ | -  |
     

src/packages/__VUE/empty/doc.md

@@ -75,4 +75,20 @@ app.use(Empty);
 | default  | 	自定义底部内容 | 
 | image  | 自定义图片 | 
 | description  | 自定义描述文字 | 
-    
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-empty-padding| _32px 0_ | -  |
+| --nut-empty-image-size| _170px_ | -  |
+| --nut-empty-description-margin-top| _4px_ | -  |
+| --nut-empty-description-color| _#666666_ | -  |
+| --nut-empty-description-font-size| _14px_ | -  |
+| --nut-empty-description-line-height| _20px_ | -  |
+| --nut-empty-description-padding| _0 40px_ | -  |

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

@@ -75,4 +75,20 @@ app.use(Empty);
 | default  | 	自定义底部内容 | 
 | image  | 自定义图片 | 
 | description  | 自定义描述文字 | 
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-empty-padding| _32px 0_ | -  |
+| --nut-empty-image-size| _170px_ | -  |
+| --nut-empty-description-margin-top| _4px_ | -  |
+| --nut-empty-description-color| _#666666_ | -  |
+| --nut-empty-description-font-size| _14px_ | -  |
+| --nut-empty-description-line-height| _20px_ | -  |
+| --nut-empty-description-padding| _0 40px_ | -  |
     

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

@@ -162,4 +162,18 @@ const navList = reactive([
 | btn  | slot custom button                |
 | list | slot custom expanded list 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-fixednav-bg-color| _var(--nut-white)_  | -  |
+| --nut-fixednav-font-color| _var(--nut-black)_  | -  |
+| --nut-fixednav-index| _201_  | -  |
+| --nut-fixednav-btn-bg| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  | -  |
+| --nut-fixednav-item-active-color| _var(--nut-primary-color)_  | -  |
+
     

src/packages/__VUE/fixednav/doc.md

@@ -163,4 +163,18 @@ const navList = reactive([
 | btn  | 自定义按钮         |
 | list | 自定义展开列表内容 |
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-fixednav-bg-color| _var(--nut-white)_  | -  |
+| --nut-fixednav-font-color| _var(--nut-black)_  | -  |
+| --nut-fixednav-index| _201_  | -  |
+| --nut-fixednav-btn-bg| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  | -  |
+| --nut-fixednav-item-active-color| _var(--nut-primary-color)_  | -  |
+
     

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

@@ -167,4 +167,19 @@ return {
 | btn  | 自定义按钮         |
 | list | 自定义展开列表内容 |
 
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-fixednav-bg-color| _var(--nut-white)_  | -  |
+| --nut-fixednav-font-color| _var(--nut-black)_  | -  |
+| --nut-fixednav-index| _201_  | -  |
+| --nut-fixednav-btn-bg| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  | -  |
+| --nut-fixednav-item-active-color| _var(--nut-primary-color)_  | -  |
+