feat: ✨ 支持支付宝小程序并提供ConfigProvider的便利性优化

build/buildThemeVars.js

@@ -0,0 +1,80 @@
+const fs = require('fs')
+const path = require('path')
+
+const extractSCSSVariables = (scssFilePath) => {
+  const scssContent = fs.readFileSync(scssFilePath, 'utf8')
+  const variableRegex = /\/\*\s*([a-zA-Z0-9-]+)\s*\*\/([\s\S]*?)(?=\/\*\s*([a-zA-Z0-9-]+)\s*\*\/|$)/g
+
+  const variables = {}
+
+  let match
+  while ((match = variableRegex.exec(scssContent)) !== null) {
+    const keyComment = match[1].replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())
+    const value = match[2].trim()
+
+    variables[keyComment] = value
+  }
+  console.log(variables)
+  return variables
+}
+
+// const generateTSFileContent = (variables) => {
+//   let tsContent = ''
+
+//   for (const key in variables) {
+//     tsContent += `export type ${key}ThemeVars = {\n`
+//     tsContent += variables[key]
+//       .split('\n')
+//       .map((line) => {
+//         line = line.trim()
+//         if (line.split(':').length === 2) {
+//           const lines = line.split(':')
+//           lines[0] = lines[0].replace(/^\$-/, '').replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())
+//           line = `${lines[0]}?:string`
+//         }
+//         return `  ${line.trim()}\n`
+//       })
+//       .join('')
+//     tsContent += '};\n\n'
+//   }
+//   return tsContent
+// }
+
+const generateTSFileContent = (variables) => {
+  let tsContent = ''
+
+  for (const key in variables) {
+    tsContent += `export type ${key}ThemeVars = {\n`
+    tsContent += variables[key]
+      .split('\n')
+      .map((line) => {
+        line = line.trim()
+        if (line.split(':').length === 2) {
+          const lines = line.split(':')
+          lines[0] = lines[0].replace(/^\$-/, '').replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())
+          line = `${lines[0]}?:string`
+        }
+        return `  ${line.trim()}\n`
+      })
+      .join('')
+    tsContent += '};\n\n'
+  }
+
+  // Add logic to export all types as ConfigProviderThemeVars
+  const exportTypes = Object.keys(variables)
+    .map((key) => `${key}ThemeVars`)
+    .join(' & ')
+  tsContent += `export type ConfigProviderThemeVars = ${exportTypes};\n`
+
+  return tsContent
+}
+
+const tsFilePath = path.resolve(__dirname, '../src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts')
+const scssFilePath = path.resolve(__dirname, '../src/uni_modules/wot-design-uni/components/common/abstracts/test.scss')
+
+const variables = extractSCSSVariables(scssFilePath)
+const tsContent = generateTSFileContent(variables)
+
+fs.writeFileSync(tsFilePath, tsContent)
+
+console.log('TS file generated successfully!')

docs/component/config-provider.md

@@ -107,6 +107,17 @@ export default {
 }
 ```
 
+### 在 TypeScript 中使用
+在 TypeScript 中定义 `themeVars` 时，建议使用 __wot-design-uni__ 提供的 __ConfigProviderThemeVars__ 类型，可以提供完善的类型提示：
+
+```ts
+import type { ConfigProviderThemeVars } from 'wot-design-uni';
+
+const themeVars: ConfigProviderThemeVars = {
+  colorTheme: 'red'
+}
+```
+
 :::tip
 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。
 :::

docs/guide/common-problems.md

@@ -4,7 +4,7 @@
 
 ## 目前支持哪些平台？
 
-目前支持`APP-vue`、`微信小程序`和`h5`，在`1.0.0`版本之前都是支持这三个平台。当我们升级到`1.0.0`版本时会新增支持`支付宝小程序`和`钉钉小程序`，虽然当前目前基本也是支持这两个平台的，但是有部分组件存在样式差异，这一点因为时间问题还没有修复，所以这里也是不推荐在`支付宝小程序`和`钉钉小程序`中使用`Wot Design Uni`组件库。
+目前支持`APP-vue`、`微信小程序`、`支付宝小程序`和`h5`，计划支持的平台：钉钉小程序。
 
 
 ## 如何开启暗黑模式？
@@ -26,7 +26,9 @@
 }
 ```
 
-### 在自定义组件中使用 Wot Design Uni 组件时，需开启`styleIsolation: 'shared'`选项
+### 为什么在组件中无法覆盖组件库样式？
+
+在自定义组件中使用 Wot Design Uni 组件时，需开启`styleIsolation: 'shared'`选项
 
 ```vue
 <wd-button type="primary">主要按钮</wd-button>
@@ -118,13 +120,9 @@ export default {
 ```
 
 
-## 为何我修改了$-color-theme，有的组件颜色没有改变？
-目前 `Wot Design Uni` 部分组件使用了渐变，不会直接应用`$-color-theme`，所以目前使用`$-color-theme`修改主题色，只会改变部分组件的颜色，不会改变渐变组件的颜色。
-如果需要修改渐变组件的颜色，请将`variable.scss`中`$open-linear: true !default;`改为`$open-linear: false;`。
-
-::: tip 推荐方案
+## 如何定制主题？
 我们为每个组件提供了`css 变量`，可以参考[config-provider](../component/config-provider)组件的使用介绍来定制主题。
-:::
+
 
 
 ## 关于我们

src/components/page-wraper/page-wraper.vue

@@ -1,10 +1,13 @@
 <template>
-  <wd-config-provider :theme="theme">
+  <wd-config-provider :theme="theme" :theme-vars="isRed ? themeVars : {}">
     <wd-toast />
     <view class="page-wraper">
       <wd-cell title="切换暗黑" title-width="240px" center v-if="showDarkMode">
         <wd-switch v-model="isDark" />
       </wd-cell>
+      <wd-cell title="切换主题色" title-width="240px" center v-if="showDarkMode">
+        <wd-switch v-model="isRed" />
+      </wd-cell>
       <slot />
     </view>
     <wd-notify />
@@ -21,7 +24,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import { computed, ref, onMounted } from 'vue'
-import { setNotifyDefaultOptions } from '@/uni_modules/wot-design-uni'
+import { setNotifyDefaultOptions, type ConfigProviderThemeVars } from '@/uni_modules/wot-design-uni'
 import { useDark } from '../../store'
 
 interface Props {
@@ -34,6 +37,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const darkMode = useDark()
 const isDark = ref<boolean>(false)
+const isRed = ref<boolean>(false)
+
+const themeVars: ConfigProviderThemeVars = {
+  colorTheme: 'red'
+}
 
 const theme = computed(() => {
   return darkMode.isDark.value || isDark.value ? 'dark' : 'light'

src/uni_modules/wot-design-uni/components/common/abstracts/_function.scss

@@ -18,7 +18,9 @@ $default-theme: #4d80f0 !default; // 正常色
 
   @if str-index($selector, $modifierSeparator) {
     @return true;
-  } @else {
+  }
+
+  @else {
     @return false;
   }
 }
@@ -29,7 +31,9 @@ $default-theme: #4d80f0 !default; // 正常色
 
   @if str-index($selector, ':') {
     @return true;
-  } @else {
+  }
+
+  @else {
     @return false;
   }
 }
@@ -41,16 +45,22 @@ $default-theme: #4d80f0 !default; // 正常色
  * @params $type 变暗’dark‘ 变亮 'light'
  * @params $mix-color 自己设置的混色
  */
- @function themeColor($theme-color, $type: "", $mix-color: "") {
-  @if $default-theme != #4d80f0 {
-    @if $type == "dark" {
+@function themeColor($theme-color, $type: "", $mix-color: "") {
+  @if $default-theme !=#4d80f0 {
+    @if $type=="dark" {
       @return darken($theme-color, 10%);
-    } @else if $type == "light" {
+    }
+
+    @else if $type=="light" {
       @return lighten($theme-color, 10%);
-    } @else {
+    }
+
+    @else {
       @return $theme-color;
     }
-  } @else {
+  }
+
+  @else {
     @return $mix-color;
   }
 }
@@ -64,17 +74,16 @@ $default-theme: #4d80f0 !default; // 正常色
  * @params [Array] $color-list 渐变色顺序， $color-list 和 $per-list 数量相同
  * @params [Array] $per-list 渐变色比例
  */
-@function resultColor($open-linear, $deg, $theme-color, $set, $color-list, $per-list) {
+@function resultColor($deg, $theme-color, $set, $color-list, $per-list) {
   // 开启渐变
-  @if $open-linear {
-    $len: length($color-list);
-    $arg: $deg;
-    @for $i from 1 through $len {
-      $arg: $arg + "," + themeColor($theme-color, nth($set, $i), nth($color-list, $i)) + " " + nth($per-list, $i);
-    }
-    @return linear-gradient(unquote($arg));
-  } @else {
-    // 不开启渐变 直接使用色值
-    @return $theme-color;
+
+  $len: length($color-list);
+  $arg: $deg;
+
+  @for $i from 1 through $len {
+    $arg: $arg + ","+ themeColor($theme-color, nth($set, $i), nth($color-list, $i)) + " "+ nth($per-list, $i);
   }
-}
+
+  @return linear-gradient(unquote($arg));
+
+}

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss

@@ -1,12 +1,11 @@
 @import './function';
-$open-linear: true !default;
 
 /**
  * UI规范基础变量
  */
 /*----------------------------------------- Theme color. start ----------------------------------------*/
 /* 主题颜色 */
-$-color-theme: var(--wot-color-theme, $default-theme) !default; // 品牌色
+$-color-theme: var(--wot-color-theme, $default-theme) !default; // 主题色
 $-color-white: var(--wot-color-white, rgb(255, 255, 255)) !default; // 用于mix的白色
 $-color-black: var(--wot-color-black, rgb(0, 0, 0)) !default; // 用于mix的黑色
 
@@ -49,7 +48,6 @@ $-color-tip: var(--wot-color-tip, #bfbfbf) !default; // 失效、默认提示文
 $-color-border: var(--wot-color-border, #d9d9d9) !default; // 控件边框线 d9d9d9
 $-color-border-light: var(--wot-color-border-light, #e8e8e8) !default; // 分割线颜色 e8e8e8
 $-color-bg: var(--wot-color-bg, #f5f5f5) !default; // 背景色、禁用填充色 f5f5f5
-$-color-table-bg: var(--wot-color-table-bg, #fafafa) !default; // 表头填充 fafafa
 
 /* 暗黑模式 */
 $-dark-background: var(--wot-dark-background, #131313) !default;
@@ -65,26 +63,10 @@ $-dark-color3: var(--wot-dark-color3, rgba(232, 230, 227, 0.8)) !default;
 $-dark-color-gray: var(--wot-dark-color-gray, $-color-secondary) !default;
 $-dark-border-color: var(--wot-dark-border-color, #3a3a3c) !default;
 
-/* 文字颜色-深背景 */
-$-color-title-indark: var(--wot-color-title-indark, $-color-white) !default; // 模块标题/重要正文 fff
-$-color-text-indark: var(--wot-color-text-indark, #d9d9d9) !default; // 普通正文 d9d9d9
-$-color-secondary-indark: var(--wot-color-secondary-indark, #a6a6a6) !default; // 次要信息，注释/补充/正文 a6a6a6
-$-color-aid-indark: var(--wot-color-aid-indark, #737373) !default; // 次级按钮边框线 737373
-$-color-tip-indark: var(--wot-color-tip-indark, #404040) !default; // 失效、默认提示文字 404040
-$-color-border-indark: var(--wot-color-border-indark, #262626) !default; // 控件边框线 262626
-$-color-border-light-indark: var(--wot-color-border-light-indark, #171717) !default; // 分割线颜色 171717
-$-color-bg-indark: var(--wot-color-bg-indark, #0a0a0a) !default; // 背景色、禁用填充色 0a0a0a
-$-color-table-bg-indark: var(--wot-color-table-bg-indark, #fafafa) !default; // 表头填充 fafafa
-
-/* 透明度 */
-$-color-inlight-title-mask: var(--wot-color-inlight-title-mask, #000000) !default; // 模块标题/重要正文 000
 /* 图形颜色 */
 $-color-icon: var(--wot-color-icon, #d9d9d9) !default; // icon颜色
 $-color-icon-active: var(--wot-color-icon-active, #eee) !default; // icon颜色hover
 $-color-icon-disabled: var(--wot-color-icon-disabled, #a7a7a7) !default; // icon颜色disabled
-/* overlay */
-$-overlay-bg: var(--wot-overlay-bg, rgba(0, 0, 0, 0.65)) !default;
-$-overlay-bg-dark: var(--wot-overlay-bg-dark, rgba(0, 0, 0, 0.75)) !default;
 
 
 /*----------------------------------------- Theme color. end -------------------------------------------*/
@@ -422,7 +404,6 @@ $-notice-bar-prefix-size: var(--wot-notice-bar-prefix-size, 18px) !default; //
 $-notice-bar-close-bg: var(--wot-notice-bar-close-bg, rgba(0, 0, 0, 0.15)) !default; // 右侧关闭按钮背景颜色
 $-notice-bar-close-size: var(--wot-notice-bar-close-size, 18px) !default; // 右侧关闭按钮背景颜色
 $-notice-bar-close-color: var(--wot-notice-bar-close-color, $-color-white) !default; // 右侧关闭按钮颜色
-$-notice-bar-close-size: var(--wot-notice-bar-close-size, 10px) !default; // 关闭按钮大小
 $-notice-bar-wrap-padding: var(--wot-notice-bar-wrap-padding, 14px $-size-side-padding) !default; // 换行下的padding
 
 /* pagination */
@@ -488,6 +469,10 @@ $-col-picker-list-item-padding: var(--wot-col-picker-list-item-padding, 12px 15p
 $-col-picker-list-checked-icon-size: var(--wot-col-picker-list-checked-icon-size, 18px) !default; // 弹框列表选中箭头大小
 $-col-picker-list-color-checked: var(--wot-col-picker-list-color-checked, $-color-theme) !default; // 弹框列表选中选项颜色
 
+/* overlay */
+$-overlay-bg: var(--wot-overlay-bg, rgba(0, 0, 0, 0.65)) !default;
+$-overlay-bg-dark: var(--wot-overlay-bg-dark, rgba(0, 0, 0, 0.75)) !default;
+
 /* popup */
 $-popup-close-size: var(--wot-popup-close-size, 24px) !default; // 关闭按钮尺寸
 $-popup-close-color: var(--wot-popup-close-color, #666) !default; // 关闭按钮颜色
@@ -497,9 +482,9 @@ $-progress-padding: var(--wot-progress-padding, 9px 0 8px) !default; // 进度
 $-progress-bg: var(--wot-progress-bg, rgba(229, 229, 229, 1)) !default; // 进度条底色
 $-progress-danger-color: var(--wot-progress-danger-color, $-color-danger) !default; // 进度条danger颜色
 $-progress-success-color: var(--wot-progress-success-color, $-color-success) !default; // 进度条success进度条颜色
-$-progress-color: var(--wot-progress-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", #517CF0 #769EF5, 0% 100%)) !default; // 进度条渐变色
-$-progress-linear-success-color: var(--wot-progress-linear-success-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", #20B080 #2BD69D, 0% 100%)) !default; // success进度条渐变色
-$-progress-linear-danger-color: var(--wot-progress-linear-danger-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", #E04350 #FF5964, 0% 100%)) !default; // danger进度条渐变色
+$-progress-color: var(--wot-progress-color, resultColor(315deg, $-color-theme, "dark""light", #517CF0 #769EF5, 0% 100%)) !default; // 进度条渐变色
+$-progress-linear-success-color: var(--wot-progress-linear-success-color, resultColor(315deg, $-color-theme, "dark""light", #20B080 #2BD69D, 0% 100%)) !default; // success进度条渐变色
+$-progress-linear-danger-color: var(--wot-progress-linear-danger-color, resultColor(315deg, $-color-theme, "dark""light", #E04350 #FF5964, 0% 100%)) !default; // danger进度条渐变色
 $-progress-height: var(--wot-progress-height, 3px) !default; // 进度条高度
 $-progress-label-color: var(--wot-progress-label-color, #333) !default; // 文字颜色
 $-progress-label-fs: var(--wot-progress-label-fs, 14px) !default; // 文字字号
@@ -555,11 +540,11 @@ $-search-light-bg: var(--wot-search-light-bg, $-color-bg) !default; // light 类
 /* slider */
 $-slider-fs: var(--wot-slider-fs, $-fs-content) !default; // 字体大小
 $-slider-handle-radius: var(--wot-slider-handle-radius, 12px) !default; // 滑块半径
-$-slider-handle-bg: var(--wot-slider-handle-bg, resultColor($open-linear, 139deg, $-color-theme, "dark""light", #FFFFFF #F7F7F7, 0% 100%)) !default; // 滑块背景
+$-slider-handle-bg: var(--wot-slider-handle-bg, resultColor(139deg, $-color-theme, "dark""light", #FFFFFF #F7F7F7, 0% 100%)) !default; // 滑块背景
 $-slider-axie-height: var(--wot-slider-axie-height, 3px) !default; // 滑轴高度
 $-slider-color: var(--wot-slider-color, #333) !default; // 字体颜色
 $-slider-axie-bg: var(--wot-slider-axie-bg, #E5E5E5) !default; // 滑轴的默认背景色
-$-slider-line-color: var(--wot-slider-line-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", #517CF0 #769EF5, 0% 100%)) !default; // 进度条颜色
+$-slider-line-color: var(--wot-slider-line-color, resultColor(315deg, $-color-theme, "dark""light", #517CF0 #769EF5, 0% 100%)) !default; // 进度条颜色
 $-slider-disabled-color: var(--wot-slider-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用状态下字体颜色
 
 /* sort-button */
@@ -592,7 +577,7 @@ $-switch-circle-size: var(--wot-switch-circle-size, 1em) !default; // 圆点大
 $-switch-border-color: var(--wot-switch-border-color, #e5e5e5) !default; // 边框颜色选中状态背景颜色
 $-switch-active-color: var(--wot-switch-active-color, $-color-theme) !default; // 选中状态背景
 $-switch-active-shadow-color: var(--wot-switch-active-shadow-color, rgba(0, 83, 162, 0.5)) !default; // 选中状态shadow颜色
-$-switch-inactive-color: var(--wot-switch-inactive-color, resultColor($open-linear, 315deg, #dadada, "light""dark""dark", #f2f2f2 #dadada #668df8, 0% 100% 100%)) !default; // 非选中背景颜色
+$-switch-inactive-color: var(--wot-switch-inactive-color, #EAEAEA) !default; // 非选中背景颜色
 $-switch-inactive-shadow-color: var(--wot-switch-inactive-shadow-color, rgba(155, 155, 155, 0.5)) !default; // 非选中状态shadow颜色
 
 
@@ -625,7 +610,7 @@ $-tag-primary-color: var(--wot-tag-primary-color, $-color-theme) !default; //
 $-tag-danger-color: var(--wot-tag-danger-color, $-color-danger) !default; // danger 颜色
 $-tag-warning-color: var(--wot-tag-warning-color, $-color-warning) !default; // warning 颜色
 $-tag-success-color: var(--wot-tag-success-color, $-color-success) !default; // success 颜色
-$-tag-info-bg: var(--wot-tag-info-bg, resultColor($open-linear, 49deg, $-color-black, "dark""light", #808080 #999999, 0% 100%)) !default; // info 背景颜色
+$-tag-info-bg: var(--wot-tag-info-bg, resultColor(49deg, $-color-black, "dark""light", #808080 #999999, 0% 100%)) !default; // info 背景颜色
 $-tag-primary-bg: var(--wot-tag-primary-bg, $-color-theme) !default; // 主背景颜色
 $-tag-danger-bg: var(--wot-tag-danger-bg, $-color-danger) !default; // danger 背景颜色
 $-tag-warning-bg: var(--wot-tag-warning-bg, $-color-warning) !default; // warning 背景颜色
@@ -725,7 +710,7 @@ $-curtain-content-radius: var(--wot-curtain-content-radius, 24px) !default; //
 $-curtain-content-close-color: var(--wot-curtain-content-close-color, $-color-white) !default; // 关闭按钮颜色
 $-curtain-content-close-fs: var(--wot-curtain-content-close-fs, $-fs-big) !default; // 关闭按钮大小
 
-// Notify
+/* notify */
 $-notify-text-color: var(--wot-notify-text-color, $-color-white) !default;
 $-notify-padding: var(--wot-notify-padding, 8px 16px) !default;
 $-notify-font-size: var(--wot-notify-font-size, $-fs-content) !default;
@@ -735,7 +720,7 @@ $-notify-success-background: var(--wot-notify-success-background, $-color-succes
 $-notify-danger-background: var(--wot-notify-danger-background, $-color-danger) !default;
 $-notify-warning-background: var(--wot-notify-warning-background, $-color-warning) !default;
 
-// Skeleton
+/* skeleton */
 $-skeleton-background-color: var(--wot-skeleton-background-color, #eee) !default;
 $-skeleton-animation-gradient: var(--wot-skeleton-animation-gradient, rgba(0, 0, 0, 0.04)) !default;
 $-skeleton-animation-flashed: var(--wot-skeleton-animation-flashed, rgba(230, 230, 230, 0.3)) !default;
@@ -747,15 +732,15 @@ $-skeleton-border-radius-text: var(--wot-skeleton-border-radius-text, 2px) !defa
 $-skeleton-border-radius-rect: var(--wot-skeleton-border-radius-rect, 4px) !default;
 $-skeleton-border-radius-circle: var(--wot-skeleton-border-radius-circle, 50%) !default;
 
-// circle
+/* circle */
 $-circle-text-color: var(--wot-circle-text-color, $-color-content) !default; // circle文字颜色
 
-// swiper
+/* swiper */
 $-swiper-radius: var(--wot-swiper-radius, 8px);
 $-swiper-item-padding: var(--wot-swiper-item-padding, 0);
 
 
-// swiper-nav
+/* swiper-nav */
 // dot & dots-bar
 $-swiper-nav-dot-color: var(--wot-swiper-nav-dot-color, $-font-white-2) !default;
 $-swiper-nav-dot-active-color: var(--wot-swiper-nav-dot-active-color, $-font-white-1) !default;
@@ -771,26 +756,25 @@ $-swiper-nav-btn-color: var(--wot-swiper-nav-btn-color, $-font-white-1) !default
 $-swiper-nav-btn-bg-color: var(--wot-swiper-nav-btn-bg-color, $-font-gray-3) !default;
 $-swiper-nav-btn-size: var(--wot-swiper-nav-btn-size, 48rpx) !default;
 
-
-// segmented
+/* segmented */
 $-segmented-padding: var(--wot-segmented-padding, 4px) !default; // 分段器padding
 $-segmented-item-bg-color: var(--wot-segmented-item-bg-color, #eeeeee) !default;
 $-segmented-item-color: var(--wot-segmented-item-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色
 $-segmented-item-acitve-bg: var(--wot-segmented-item-acitve-bg, #FFFFFF) !default; // 标题文字颜色
 $-segmented-item-disabled-color: var(--wot-segmented-item-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 标题文字禁用颜色
 
-// tabbar
+/* tabbar */
 $-tabbar-height: var(--wot-tabbar-height, 50px) !default;
 $-tabbar-box-shadow: var(--wot-tabbar-box-shadow, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)) !default; // round类型tabbar阴影
 
-// tabbar-item
+/* tabbar-item */
 $-tabbar-item-title-font-size: var(--wot-tabbar-item-title-font-size, 10px) !default; // tabbar选项文字大小
 $-tabbar-item-title-line-height: var(--wot-tabbar-item-title-line-height, initial) !default; // tabbar选项标题文字行高
 $-tabbar-inactive-color: var(--wot-tabbar-inactive-color, $-color-title) !default; // 标题文字和图标颜色
 $-tabbar-active-color: var(--wot-tabbar-active-color, $-color-theme) !default; // 选中文字和图标颜色
 
 
-// navbar
+/* navbar */
 $-navbar-height: var(--wot-navbar-height, 44px) !default; // navbar高度
 $-navbar-color: var(--wot-navbar-color, $-font-gray-1) !default; // navbar字体颜色
 $-navbar-background: var(--wot-navbar-background, $-color-white) !default; // navbar背景颜色
@@ -802,25 +786,25 @@ $-navbar-title-font-weight: var(--wot-navbar-title-font-weight, 600); // navbar
 $-navbar-disabled-opacity: var(--wot-navbar-disabled-opacity, 0.6) !default; // navbar左右两侧字体禁用
 $-navbar-hover-color :var(--wot-navbar-hover-color, #eee) !default; // navbar hover样式
 
-// navbar capsule
+/* navbar-capsule */
 $-navbar-capsule-border-color: var(--wot-navbar-capsule-border-color, #e7e7e7) !default;
 $-navbar-capsule-border-radius: var(--wot-navbar-capsule-border-radius, 16px) !default;
 $-navbar-capsule-width: var(--wot-navbar-capsule-width, 88px) !default;
 $-navbar-capsule-height: var(--wot-navbar-capsule-height, 32px) !default;
 
-// table
+/* table */
 $-table-color: var(--wot-table-color, $-font-gray-1) !default; // 表格字体颜色
 $-table-bg: var(--wot-table-bg, #FFFFFF) !default; // 表格背景颜色
 $-table-stripe-bg: var(--wot-table-stripe-bg, #f3f3f3) !default; // 表格背景颜色
 $-table-border-color: var(--wot-table-border-color, #ececec) !default; // 表格边框颜色
 $-table-font-size: var(--wot-table-font-size, 13px) !default; // 表格字体大小
 
-// sidebar
+/* sidebar */
 $-sidebar-bg: var(--wot-sidebar-bg, $-color-gray-1) !default; // 侧边栏背景色
 $-sidebar-width: var(--wot-sidebar-width, 104px) !default; // 侧边栏宽度
 $-sidebar-height: var(--wot-sidebar-height, 100%) !default; // 侧边栏高度
 
-// sidebar-item
+/* sidebar-item */
 $-sidebar-color: var(--wd-sidebar-color, $-font-gray-1) !default;
 $-sidebar-item-height: var(--wd-sidebar-item-height, 56px) !default;
 $-sidebar-item-line-height: var(--wd-sidebar-item-line-height, 24px) !default;
@@ -834,7 +818,7 @@ $-sidebar-icon-size: var(--wd-sidebar-icon-size, 20px) !default;
 $-sidebar-active-border-width: var(--wd-sidebar-active-border-width, 4px) !default;
 $-sidebar-active-border-height: var(--wd-sidebar-active-border-height, 16px) !default;
 
-// fab
+/* fab */
 $-fab-trigger-height: var(--wd-fab-trigger-height, 56px) !default;
 $-fab-trigger-width: var(--wd-fab-trigger-width, 56px) !default;
 $-fab-actions-padding: var(--wd-actions-padding, 12px) !default;
@@ -844,12 +828,12 @@ $-fab-right: var(--wd-fab-right, 16px) !default;
 $-fab-bottom: var(--wd-fab-bottom, 16px) !default;
 
 
-// count-down
+/* count-down */
 $-count-down-text-color: var(--wd-count-down-text-color, $-color-gray-8) !default;
 $-count-down-font-size: var(--wd-count-down-font-size, $-fs-content) !default;
 $-count-down-line-height: var(--wd-count-down-line-height, 20px) !default;
 
-// keyboard
+/* number-keyboard */
 $-number-keyboard-key-height: var(--wd-number-keyboard-key-height, 48px) !default;
 $-number-keyboard-key-font-size: var(--wd-number-keyboard-key-font-size, 28px) !default;
 $-number-keyboard-key-background: var(--wd-number-keyboard-key-background, $-color-white) !default;
@@ -867,7 +851,7 @@ $-number-keyboard-close-padding: var(--wot-number-keyboard-title-font-size, 0 16
 $-number-keyboard-close-color: var(--wot-number-keyboard-close-color, $-color-theme) !default;
 $-number-keyboard-close-font-size: var(--wot-number-keyboard-close-font-size, 14px) !default;
 
-// passwod-input
+/* passwod-input */
 $-password-input-height: var(--wd-password-input-height, 50px);
 $-password-input-margin: var(--wd-password-input-margin, 16px);
 $-password-input-font-size: var(--wd-password-input-margin, 20px);
@@ -885,7 +869,7 @@ $-password-input-cursor-width: var(--wd-password-input-cursor-width, 1px);
 $-password-input-cursor-height: var(--wd-password-input-cursor-height, 40%);
 $-password-input-cursor-duration: var(--wd-password-input-cursor-duration, 1s);
 
-// form-item
+/* form-item */
 $-form-item-error-message-color: var(--wot-form-item-error-message-color, $-color-danger) !default;
 $-form-item-error-message-font-size: var(--wot-form-item-error-message-font-size, $-fs-secondary) !default;
 $-form-item-error-message-line-height: var(--wot-form-item-error-message-line-height, 24px) !default;

src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts

@@ -0,0 +1,951 @@
+export type baseThemeVars = {
+  colorTheme?: string // 主题色
+  colorWhite?: string // 用于mix的白色
+  colorBlack?: string // 用于mix的黑色
+  colorSuccess?: string // 成功色
+  colorWarning?: string // 警告色
+  colorDanger?: string // 危险出错色
+  colorPurple?: string // 紫色
+  colorYellow?: string // 黄色
+  colorBlue?: string // 蓝色
+  colorInfo?: string // 信息色
+  colorGray1?: string // 灰色1
+  colorGray2?: string // 灰色2
+  colorGray3?: string // 灰色3
+  colorGray4?: string // 灰色4
+  colorGray5?: string // 灰色5
+  colorGray6?: string // 灰色6
+  colorGray7?: string // 灰色7
+  colorGray8?: string // 灰色8
+  fontGray1?: string // 字体灰色1
+  fontGray2?: string // 字体灰色2
+  fontGray3?: string // 字体灰色3
+  fontGray4?: string // 字体灰色4
+  fontWhite1?: string // 字体白色1
+  fontWhite2?: string // 字体白色2
+  fontWhite3?: string // 字体白色3
+  fontWhite4?: string // 字体白色4
+  colorTitle?: string // 模块标题/重要正文
+  colorContent?: string // 普通正文
+  colorSecondary?: string // 次要信息，注释/补充/正文
+  colorAid?: string // 辅助文字字号，弱化信息，引导性/不可点文字
+  colorTip?: string // 失效、默认提示文字
+  colorBorder?: string // 控件边框线
+  colorBorderLight?: string // 分割线颜色
+  colorBg?: string // 背景色、禁用填充色
+  darkBackground?: string // 深色背景1
+  darkBackground2?: string // 深色背景2
+  darkBackground3?: string // 深色背景3
+  darkBackground4?: string // 深色背景4
+  darkBackground5?: string // 深色背景5
+  darkBackground6?: string // 深色背景6
+  darkBackground7?: string // 深色背景7
+  darkColor?: string // 深色字体1
+  darkColor2?: string // 深色字体2
+  darkColor3?: string // 深色字体3
+  darkColorGray?: string // 深色灰色
+  darkBorderColor?: string // 深色边框颜色
+  colorIcon?: string // icon颜色
+  colorIconActive?: string // icon颜色hover
+  colorIconDisabled?: string // icon颜色disabled
+  fsBig?: string // 大型标题字号
+  fsImportant?: string // 重要数据字号
+  fsTitle?: string // 标题字号/重要正文字号
+  fsContent?: string // 普通正文字号
+  fsSecondary?: string // 次要信息字号
+  fsAid?: string // 辅助文字字号
+  fwMedium?: string // 字重500
+  fwSemibold?: string // 字重600
+  sizeSidePadding?: string // 屏幕两边留白padding
+}
+
+export type actionSheetThemeVars = {
+  actionSheetWeight?: string
+  actionSheetRadius?: string
+  actionSheetActionHeight?: string
+  actionSheetColor?: string
+  actionSheetFs?: string
+  actionSheetActiveColor?: string
+  actionSheetSubnameFs?: string
+  actionSheetSubnameColor?: string
+  actionSheetDisabledColor?: string
+  actionSheetBg?: string
+  actionSheetTitleHeight?: string
+  actionSheetTitleFs?: string
+  actionSheetCloseFs?: string
+  actionSheetCloseColor?: string
+  actionSheetCloseTop?: string
+  actionSheetCloseRight?: string
+  actionSheetCancelColor?: string
+  actionSheetCancelHeight?: string
+  actionSheetCancelBg?: string
+  actionSheetCancelRadius?: string
+  actionSheetPanelPadding?: string
+  actionSheetPanelImgFs?: string
+  actionSheetPanelImgRadius?: string
+}
+
+export type badgeThemeVars = {
+  badgeBg?: string
+  badgeColor?: string
+  badgeFs?: string
+  badgePadding?: string
+  badgeHeight?: string
+  badgePrimary?: string
+  badgeSuccess?: string
+  badgeWarning?: string
+  badgeDanger?: string
+  badgeInfo?: string
+  badgeDotSize?: string
+  badgeBorder?: string
+}
+
+export type buttonThemeVars = {
+  buttonDisabledOpacity?: string
+
+  buttonSmallHeight?: string
+  buttonSmallPadding?: string
+  buttonSmallFs?: string
+  buttonSmallRadius?: string
+  buttonSmallLoading?: string
+
+  buttonMediumHeight?: string
+  buttonMediumPadding?: string
+  buttonMediumFs?: string
+  buttonMediumRadius?: string
+  buttonMediumLoading?: string
+  buttonMediumBoxShadowSize?: string
+
+  buttonLargeHeight?: string
+  buttonLargePadding?: string
+  buttonLargeFs?: string
+  buttonLargeRadius?: string
+  buttonLargeLoading?: string
+  buttonLargeBoxShadowSize?: string
+
+  buttonIconFs?: string
+  buttonIconSize?: string
+  buttonIconColor?: string
+  buttonIconDisabledColor?: string
+
+  buttonNormalColor?: string
+  buttonNormalDisabledColor?: string
+
+  buttonPlainBgColor?: string
+
+  buttonPrimaryColor?: string
+  buttonPrimaryBgColor?: string
+  buttonPrimaryBoxShadowColor?: string
+
+  buttonSuccessColor?: string
+  buttonSuccessBgColor?: string
+  buttonSuccessBoxShadowColor?: string
+
+  buttonInfoColor?: string
+  buttonInfoBgColor?: string
+  buttonInfoPlainBorderColor?: string
+  buttonInfoPlainNormalColor?: string
+
+  buttonWarningColor?: string
+  buttonWarningBgColor?: string
+  buttonWarningBoxShadowColor?: string
+
+  buttonErrorColor?: string
+  buttonErrorBgColor?: string
+  buttonErrorBoxShadowColor?: string
+
+  buttonTextHoverOpacity?: string
+}
+
+export type cellThemeVars = {
+  cellPadding?: string
+  cellLineHeight?: string
+
+  cellGroupTitleFs?: string
+  cellGroupPadding?: string
+  cellGroupTitleColor?: string
+  cellGroupValueFs?: string
+  cellGroupValueColor?: string
+
+  cellWrapperPadding?: string
+  cellWrapperPaddingLarge?: string
+
+  cellWrapperPaddingWithLabel?: string
+  cellIconRight?: string
+  cellIconSize?: string
+  cellTitleFs?: string
+  cellTitleColor?: string
+  cellLabelFs?: string
+  cellLabelColor?: string
+  cellValueFs?: string
+  cellValueColor?: string
+  cellArrowSize?: string
+  cellArrowColor?: string
+  cellTapBg?: string
+
+  cellTitleFsLarge?: string
+  cellLabelFsLarge?: string
+  cellIconSizeLarge?: string
+
+  cellRequiredColor?: string
+  cellRequiredSize?: string
+  cellVerticalTop?: string
+}
+
+export type calendarThemeVars = {
+  calendarFs?: string
+  calendarPanelPadding?: string
+  calendarPanelTitleFs?: string
+  calendarPanelTitleColor?: string
+  calendarWeekColor?: string
+  calendarWeekHeight?: string
+  calendarWeekFs?: string
+  calendarDayFs?: string
+  calendarDayColor?: string
+  calendarDayFw?: string
+  calendarDayHeight?: string
+  calendarMonthWidth?: string
+  calendarActiveColor?: string
+  calendarDisabledColor?: string
+  calendarRangeColor?: string
+  calendarActiveBorder?: string
+  calendarInfoFs?: string
+}
+
+export type checkboxThemeVars = {
+  checkboxMargin?: string
+  checkboxBg?: string
+  checkboxLabelMargin?: string
+  checkboxSize?: string
+  checkboxIconSize?: string
+  checkboxBorderColor?: string
+  checkboxCheckColor?: string
+  checkboxLabelFs?: string
+  checkboxLabelColor?: string
+  checkboxCheckedColor?: string
+
+  checkboxDisabledColor?: string
+  checkboxDisabledLabelColor?: string
+  checkboxDisabledCheckColor?: string
+  checkboxDisabledCheckBg?: string
+  checkboxSquareRadius?: string
+
+  checkboxLargeSize?: string
+  checkboxLargeLabelFs?: string
+
+  checkboxButtonHeight?: string
+  checkboxButtonMinWidth?: string
+  checkboxButtonRadius?: string
+  checkboxButtonBg?: string
+  checkboxButtonFontSize?: string
+  checkboxButtonBorder?: string
+  checkboxButtonDisabledBorder?: string
+}
+
+export type collapseThemeVars = {
+  collapseSidePadding?: string
+  collapseBodyPadding?: string
+  collapseHeaderPadding?: string
+  collapseTitleColor?: string
+  collapseTitleFs?: string
+  collapseArrowSize?: string
+  collapseArrowColor?: string
+  collapseBodyFs?: string
+  collapseBodyColor?: string
+  collapseDisabledColor?: string
+  collapseRetractFs?: string
+  collapseMoreColor?: string
+}
+
+export type dividerThemeVars = {
+  dividerPadding?: string
+  dividerColor?: string
+  dividerLineColor?: string
+  dividerFs?: string
+}
+
+export type dropMenuThemeVars = {
+  dropMenuHeight?: string
+  dropMenuColor?: string
+  dropMenuFs?: string
+  dropMenuSidePadding?: string
+  dropMenuDisabledColor?: string
+  dropMenuItemHeight?: string
+  dropMenuItemColor?: string
+  dropMenuItemFs?: string
+  dropMenuItemColorActive?: string
+  dropMenuItemColorTip?: string
+  dropMenuItemFsTip?: string
+  dropMenuOptionCheckSize?: string
+  dropMenuLineColor?: string
+  dropMenuLineHeight?: string
+}
+
+export type inputNumberThemeVars = {
+  inputNumberColor?: string
+  inputNumberBorderColor?: string
+  inputNumberDisabledColor?: string
+  inputNumberHeight?: string
+  inputNumberBtnWidth?: string
+  inputNumberInputWidth?: string
+  inputNumberRadius?: string
+  inputNumberFs?: string
+  inputNumberIconSize?: string
+  inputNumberIconColor?: string
+}
+
+export type inputThemeVars = {
+  inputPadding?: string
+  inputBorderColor?: string
+  inputNotEmptyBorderColor?: string
+  inputFs?: string
+  inputFsLarge?: string
+  inputIconMargin?: string
+  inputColor?: string
+  inputPlaceholderColor?: string
+  inputDisabledColor?: string
+  inputErrorColor?: string
+  inputIconColor?: string
+  inputClearColor?: string
+  inputCountColor?: string
+  inputCountCurrentColor?: string
+  inputBg?: string
+
+  inputCellBg?: string
+  inputCellBorderColor?: string
+  inputCellPadding?: string
+  inputCellPaddingLarge?: string
+  inputCellHeight?: string
+  inputCellLabelWidth?: string
+  inputInnerHeight?: string
+  inputInnerHeightNoBorder?: string
+  inputCountFs?: string
+  inputCountFsLarge?: string
+  inputIconSize?: string
+  inputIconSizeLarge?: string
+}
+
+export type textareaThemeVars = {
+  textareaPadding?: string
+  textareaBorderColor?: string
+  textareaNotEmptyBorderColor?: string
+  textareaFs?: string
+  textareaFsLarge?: string
+  textareaIconMargin?: string
+  textareaColor?: string
+  textareaIconColor?: string
+  textareaClearColor?: string
+  textareaCountColor?: string
+  textareaCountCurrentColor?: string
+  textareaBg?: string
+
+  textareaCellBorderColor?: string
+  textareaCellPadding?: string
+  textareaCellPaddingLarge?: string
+  textareaCellHeight?: string
+  textareaCountFs?: string
+  textareaCountFsLarge?: string
+  textareaIconSize?: string
+  textareaIconSizeLarge?: string
+}
+
+export type loadmoreThemeVars = {
+  loadmoreHeight?: string
+  loadmoreColor?: string
+  loadmoreFs?: string
+  loadmoreErrorColor?: string
+}
+
+export type messageBoxThemeVars = {
+  messageBoxWidth?: string
+  messageBoxBg?: string
+  messageBoxRadius?: string
+  messageBoxPadding?: string
+  messageBoxTitleFs?: string
+  messageBoxTitleColor?: string
+  messageBoxContentFs?: string
+  messageBoxContentColor?: string
+  messageBoxContentMaxHeight?: string
+  messageBoxContentScrollbarWidth?: string
+  messageBoxContentScrollbarColor?: string
+  messageBoxInputErrorColor?: string
+}
+
+export type noticeBarThemeVars = {
+  noticeBarFs?: string
+  noticeBarLineHeight?: string
+  noticeBarBorderRadius?: string
+  noticeBarPadding?: string
+  noticeBarWarningBg?: string
+  noticeBarInfoBg?: string
+  noticeBarDangerBg?: string
+  noticeBarWarningColor?: string
+  noticeBarInfoColor?: string
+  noticeBarDangerColor?: string
+  noticeBarPrefixSize?: string
+  noticeBarCloseBg?: string
+  noticeBarCloseSize?: string
+  noticeBarCloseColor?: string
+  noticeBarWrapPadding?: string
+}
+
+export type paginationThemeVars = {
+  paginationContentPadding?: string
+  paginationMessagePadding?: string
+  paginationMessageFs?: string
+  paginationMessageColor?: string
+  paginationNavBorder?: string
+  paginationNavBorderRadius?: string
+  paginationNavFs?: string
+  paginationNavWidth?: string
+  paginationNavColor?: string
+  paginationNavContentFs?: string
+  paginationNavSepatatorPadding?: string
+  paginationNavCurrentColor?: string
+}
+
+export type pickerThemeVars = {
+  pickerToolbarHeight?: string
+  pickerActionHeight?: string
+  pickerToolbarFinishColor?: string
+  pickerToolbarCancelColor?: string
+  pickerToolbarFs?: string
+  pickerToolbarTitleColor?: string
+  pickerColumnFs?: string
+  pickerBg?: string
+  pickerColumnActiveFs?: string
+  pickerColumnColor?: string
+  pickerColumnHeight?: string
+  pickerColumnItemHeight?: string
+  pickerColumnSelectBg?: string
+  pickerLoadingButtonColor?: string
+  pickerColumnPadding?: string
+
+  pickerColumnDisabledColor?: string
+  pickerMask?: string
+  pickerLoadingBg?: string
+  pickerRegionSeparatorColor?: string
+  pickerCellArrowSizeLarge?: string
+
+  pickerRegionColor?: string
+  pickerRegionBgActiveColor?: string
+
+  pickerRegionFs?: string
+}
+
+export type colPickerThemeVars = {
+  colPickerSelectedHeight?: string
+  colPickerSelectedPadding?: string
+  colPickerSelectedFs?: string
+  colPickerSelectedColor?: string
+  colPickerSelectedFw?: string
+  colPickerLineWidth?: string
+  colPickerLineHeight?: string
+  colPickerLineColor?: string
+  colPickerLineBoxShadow?: string
+  colPickerListHeight?: string
+  colPickerListPaddingBottom?: string
+  colPickerListColor?: string
+  colPickerListColorDisabled?: string
+  colPickerListColorTip?: string
+  colPickerListFs?: string
+  colPickerListFsTip?: string
+  colPickerListItemPadding?: string
+  colPickerListCheckedIconSize?: string
+  colPickerListColorChecked?: string
+}
+
+export type overlayThemeVars = {
+  overlayBg?: string
+  overlayBgDark?: string
+}
+
+export type popupThemeVars = {
+  popupCloseSize?: string
+  popupCloseColor?: string
+}
+
+export type progressThemeVars = {
+  progressPadding?: string
+  progressBg?: string
+  progressDangerColor?: string
+  progressSuccessColor?: string
+  progressColor?: string
+  progressLinearSuccessColor?: string
+  progressLinearDangerColor?: string
+  progressHeight?: string
+  progressLabelColor?: string
+  progressLabelFs?: string
+  progressIconFs?: string
+}
+
+export type radioThemeVars = {
+  radioMargin?: string
+  radioLabelMargin?: string
+  radioSize?: string
+  radioBg?: string
+  radioLabelFs?: string
+  radioLabelColor?: string
+  radioCheckedColor?: string
+  radioDisabledColor?: string
+  radioDisabledLabelColor?: string
+
+  radioLargeSize?: string
+  radioLargeLabelFs?: string
+
+  radioButtonHeight?: string
+  radioButtonMinWidth?: string
+  radioButtonMaxWidth?: string
+  radioButtonRadius?: string
+  radioButtonBg?: string
+  radioButtonFs?: string
+  radioButtonBorder?: string
+  radioButtonDisabledBorder?: string
+
+  radioDotSize?: string
+  radioDotLargeSize?: string
+  radioDotCheckedBg?: string
+  radioDotCheckedBorderColor?: string
+  radioDotBorderColor?: string
+  radioDotDisabledBorder?: string
+  radioDotDisabledBg?: string
+}
+
+export type searchThemeVars = {
+  searchSidePadding?: string
+  searchPadding?: string
+  searchInputRadius?: string
+  searchInputBg?: string
+  searchInputHeight?: string
+  searchInputPadding?: string
+  searchInputFs?: string
+  searchInputColor?: string
+  searchIconColor?: string
+  searchPlaceholderColor?: string
+  searchCancelPadding?: string
+  searchCancelFs?: string
+  searchCancelColor?: string
+  searchLightBg?: string
+}
+
+export type sliderThemeVars = {
+  sliderFs?: string
+  sliderHandleRadius?: string
+  sliderHandleBg?: string
+  sliderAxieHeight?: string
+  sliderColor?: string
+  sliderAxieBg?: string
+  sliderLineColor?: string
+  sliderDisabledColor?: string
+}
+
+export type sortButtonThemeVars = {
+  sortButtonFs?: string
+  sortButtonColor?: string
+  sortButtonHeight?: string
+  sortButtonLineHeight?: string
+  sortButtonLineColor?: string
+}
+
+export type stepsThemeVars = {
+  stepsIconSize?: string
+  stepsInactiveColor?: string
+  stepsFinishedColor?: string
+  stepsIconTextFs?: string
+  stepsErrorColor?: string
+  stepsTitleFs?: string
+  stepsTitleFw?: string
+  stepsLabelFs?: string
+  stepsDescriptionColor?: string
+  stepsIsIconWidth?: string
+  stepsLineColor?: string
+  stepsDotSize?: string
+  stepsDotActiveSize?: string
+}
+
+export type switchThemeVars = {
+  switchSize?: string
+  switchWidth?: string
+  switchHeight?: string
+  switchCircleSize?: string
+  switchBorderColor?: string
+  switchActiveColor?: string
+  switchActiveShadowColor?: string
+  switchInactiveColor?: string
+  switchInactiveShadowColor?: string
+}
+
+export type tabsThemeVars = {
+  tabsNavArrowFs?: string
+  tabsNavArrowOpenFs?: string
+  tabsNavWidth?: string
+  tabsNavHeight?: string
+  tabsNavFs?: string
+  tabsNavColor?: string
+  tabsNavBg?: string
+  tabsNavActiveColor?: string
+  tabsNavDisabledColor?: string
+  tabsNavLineHeight?: string
+  tabsNavLineBgColor?: string
+  tabsNavMapFs?: string
+  tabsNavMapColor?: string
+  tabsNavMapArrowColor?: string
+  tabsNavMapBtnBeforeBg?: string
+  tabsNavMapButtonBackColor?: string
+  tabsNavMapButtonRadius?: string
+  tabsNavMapModalBg?: string
+}
+
+export type tagThemeVars = {
+  tagFs?: string
+  tagColor?: string
+  tagSmallFs?: string
+  tagInfoColor?: string
+  tagPrimaryColor?: string
+  tagDangerColor?: string
+  tagWarningColor?: string
+  tagSuccessColor?: string
+  tagInfoBg?: string
+  tagPrimaryBg?: string
+  tagDangerBg?: string
+  tagWarningBg?: string
+  tagSuccessBg?: string
+  tagRoundColor?: string
+  tagRoundBorderColor?: string
+  tagRoundRadius?: string
+  tagMarkRadius?: string
+  tagCloseSize?: string
+  tagCloseColor?: string
+  tagCloseActiveColor?: string
+}
+
+export type toastThemeVars = {
+  toastPadding?: string
+  toastMaxWidth?: string
+  toastRadius?: string
+  toastBg?: string
+  toastFs?: string
+  toastWithIconMinWidth?: string
+  toastIconSize?: string
+  toastLoadingPadding?: string
+  toastBoxShadow?: string
+}
+
+export type tooltipThemeVars = {
+  tooltipBg?: string
+  tooltipColor?: string
+  tooltipRadius?: string
+  tooltipArrowSize?: string
+  tooltipFs?: string
+  tooltipBlur?: string
+  tooltipPadding?: string
+  tooltipCloseSize?: string
+  tooltipZIndex?: string
+  tooltipLineHeight?: string
+}
+
+export type popoverThemeVars = {
+  popoverBg?: string
+  popoverColor?: string
+  popoverBoxShadow?: string
+  popoverArrowBoxShadow?: string
+  popoverBorderColor?: string
+  popoverRadius?: string
+  popoverArrowSize?: string
+  popoverFs?: string
+  popoverPadding?: string
+  popoverLineHeight?: string
+  popoverZIndex?: string
+}
+
+export type gridItemThemeVars = {
+  gridItemFs?: string
+  gridItemBg?: string
+  gridItemPadding?: string
+  gridItemBorderColor?: string
+}
+
+export type statustipThemeVars = {
+  statustipFs?: string
+  statustipColor?: string
+  statustipLineHeight?: string
+  statustipPadding?: string
+}
+
+export type cardThemeVars = {
+  cardBg?: string
+  cardFs?: string
+  cardPadding?: string
+  cardFooterPadding?: string
+  cardShadowColor?: string
+  cardRadius?: string
+  cardLineHeight?: string
+  cardMargin?: string
+  cardTitleColor?: string
+  cardTitleFs?: string
+  cardContentBorderColor?: string
+  cardRectangleTitlePadding?: string
+  cardRectangleContentPadding?: string
+  cardRectangleFooterPadding?: string
+  cardContentColor?: string
+  cardContentLineHeight?: string
+  cardContentMargin?: string
+  cardContentRectangleMargin?: string
+}
+
+export type uploadThemeVars = {
+  uploadSize?: string
+  uploadEvokeIconSize?: string
+  uploadEvokeBg?: string
+  uploadEvokeColor?: string
+  uploadEvokeDisabledColor?: string
+  uploadCloseIconSize?: string
+  uploadCloseIconColor?: string
+  uploadProgressFs?: string
+  uploadPreviewNameFs?: string
+  uploadPreviewIconSize?: string
+  uploadPreviewNameBg?: string
+  uploadPreviewNameHeight?: string
+}
+
+export type curtainThemeVars = {
+  curtainContentRadius?: string
+  curtainContentCloseColor?: string
+  curtainContentCloseFs?: string
+}
+
+export type notifyThemeVars = {
+  notifyTextColor?: string
+  notifyPadding?: string
+  notifyFontSize?: string
+  notifyLineHeight?: string
+  notifyPrimaryBackground?: string
+  notifySuccessBackground?: string
+  notifyDangerBackground?: string
+  notifyWarningBackground?: string
+}
+
+export type skeletonThemeVars = {
+  skeletonBackgroundColor?: string
+  skeletonAnimationGradient?: string
+  skeletonAnimationFlashed?: string
+  skeletonTextHeightDefault?: string
+  skeletonRectHeightDefault?: string
+  skeletonCircleHeightDefault?: string
+  skeletonRowMarginBottom?: string
+  skeletonBorderRadiusText?: string
+  skeletonBorderRadiusRect?: string
+  skeletonBorderRadiusCircle?: string
+}
+
+export type circleThemeVars = {
+  circleTextColor?: string
+}
+
+export type swiperThemeVars = {
+  swiperRadius?: string
+  swiperItemPadding?: string
+}
+
+export type swiperNavThemeVars = {
+  // dot & dots-bar
+  swiperNavDotColor?: string
+  swiperNavDotActiveColor?: string
+  swiperNavDotSize?: string
+  swiperNavDotsBarActiveWidth?: string
+  // fraction
+  swiperNavFractionColor?: string
+  swiperNavFractionBgColor?: string
+  swiperNavFractionHeight?: string
+  swiperNavFractionFontSize?: string
+  // button
+  swiperNavBtnColor?: string
+  swiperNavBtnBgColor?: string
+  swiperNavBtnSize?: string
+}
+
+export type segmentedThemeVars = {
+  segmentedPadding?: string
+  segmentedItemBgColor?: string
+  segmentedItemColor?: string
+  segmentedItemAcitveBg?: string
+  segmentedItemDisabledColor?: string
+}
+
+export type tabbarThemeVars = {
+  tabbarHeight?: string
+  tabbarBoxShadow?: string
+}
+
+export type tabbarItemThemeVars = {
+  tabbarItemTitleFontSize?: string
+  tabbarItemTitleLineHeight?: string
+  tabbarInactiveColor?: string
+  tabbarActiveColor?: string
+}
+
+export type navbarThemeVars = {
+  navbarHeight?: string
+  navbarColor?: string
+  navbarBackground?: string
+  navbarArrowSize?: string
+  navbarDescFontSize?: string
+  navbarDescFontColor?: string
+  navbarTitleFontSize?: string
+  navbarTitleFontWeight?: string
+  navbarDisabledOpacity?: string
+  navbarHoverColor?: string
+}
+
+export type navbarCapsuleThemeVars = {
+  navbarCapsuleBorderColor?: string
+  navbarCapsuleBorderRadius?: string
+  navbarCapsuleWidth?: string
+  navbarCapsuleHeight?: string
+}
+
+export type tableThemeVars = {
+  tableColor?: string
+  tableBg?: string
+  tableStripeBg?: string
+  tableBorderColor?: string
+  tableFontSize?: string
+}
+
+export type sidebarThemeVars = {
+  sidebarBg?: string
+  sidebarWidth?: string
+  sidebarHeight?: string
+}
+
+export type sidebarItemThemeVars = {
+  sidebarColor?: string
+  sidebarItemHeight?: string
+  sidebarItemLineHeight?: string
+  sidebarDisabledColor?: string
+  sidebarActiveColor?: string
+  sidebarActiveBg?: string
+  sidebarHoverBg?: string
+  sidebarBorderRadius?: string
+  sidebarFontSize?: string
+  sidebarIconSize?: string
+  sidebarActiveBorderWidth?: string
+  sidebarActiveBorderHeight?: string
+}
+
+export type fabThemeVars = {
+  fabTriggerHeight?: string
+  fabTriggerWidth?: string
+  fabActionsPadding?: string
+  fabTop?: string
+  fabLeft?: string
+  fabRight?: string
+  fabBottom?: string
+}
+
+export type countDownThemeVars = {
+  countDownTextColor?: string
+  countDownFontSize?: string
+  countDownLineHeight?: string
+}
+
+export type numberKeyboardThemeVars = {
+  numberKeyboardKeyHeight?: string
+  numberKeyboardKeyFontSize?: string
+  numberKeyboardKeyBackground?: string
+  numberKeyboardKeyBorderRadius?: string
+  numberKeyboardDeleteFontSize?: string
+  numberKeyboardKeyActiveColor?: string
+  numberKeyboardButtonTextColor?: string
+  numberKeyboardButtonBackground?: string
+  numberKeyboardButtonActiveOpacity?: string
+  numberKeyboardBackground?: string
+  numberKeyboardTitleHeight?: string
+  numberKeyboardTitleColor?: string
+  numberKeyboardTitleFontSize?: string
+  numberKeyboardClosePadding?: string
+  numberKeyboardCloseColor?: string
+  numberKeyboardCloseFontSize?: string
+}
+
+export type passwodInputThemeVars = {
+  passwordInputHeight?: string
+  passwordInputMargin?: string
+  passwordInputFontSize?: string
+  passwordInputRadius?: string
+  passwordInputBackground?: string
+  passwordInputInfoColor?: string
+  passwordInputInfoFontSize?: string
+  passwordInputBorderColor?: string
+  passwordInputErrorInfoColor?: string
+  passwordInputDotSize?: string
+  passwordInputDotColor?: string
+  passwordInputTextColor?: string
+  passwordInputCursorColor?: string
+  passwordInputCursorWidth?: string
+  passwordInputCursorHeight?: string
+  passwordInputCursorDuration?: string
+}
+
+export type formItemThemeVars = {
+  formItemErrorMessageColor?: string
+  formItemErrorMessageFontSize?: string
+  formItemErrorMessageLineHeight?: string
+}
+
+export type ConfigProviderThemeVars = baseThemeVars &
+  actionSheetThemeVars &
+  badgeThemeVars &
+  buttonThemeVars &
+  cellThemeVars &
+  calendarThemeVars &
+  checkboxThemeVars &
+  collapseThemeVars &
+  dividerThemeVars &
+  dropMenuThemeVars &
+  inputNumberThemeVars &
+  inputThemeVars &
+  textareaThemeVars &
+  loadmoreThemeVars &
+  messageBoxThemeVars &
+  noticeBarThemeVars &
+  paginationThemeVars &
+  pickerThemeVars &
+  colPickerThemeVars &
+  overlayThemeVars &
+  popupThemeVars &
+  progressThemeVars &
+  radioThemeVars &
+  searchThemeVars &
+  sliderThemeVars &
+  sortButtonThemeVars &
+  stepsThemeVars &
+  switchThemeVars &
+  tabsThemeVars &
+  tagThemeVars &
+  toastThemeVars &
+  tooltipThemeVars &
+  popoverThemeVars &
+  gridItemThemeVars &
+  statustipThemeVars &
+  cardThemeVars &
+  uploadThemeVars &
+  curtainThemeVars &
+  notifyThemeVars &
+  skeletonThemeVars &
+  circleThemeVars &
+  swiperThemeVars &
+  swiperNavThemeVars &
+  segmentedThemeVars &
+  tabbarThemeVars &
+  tabbarItemThemeVars &
+  navbarThemeVars &
+  navbarCapsuleThemeVars &
+  tableThemeVars &
+  sidebarThemeVars &
+  sidebarItemThemeVars &
+  fabThemeVars &
+  countDownThemeVars &
+  numberKeyboardThemeVars &
+  passwodInputThemeVars &
+  formItemThemeVars

src/uni_modules/wot-design-uni/index.ts

@@ -26,3 +26,5 @@ export * as CommonUtil from './components/common/util'
 export * as clickOut from './components/common/clickoutside'
 
 export * from './locale'
+
+export type { ConfigProviderThemeVars } from './components/wd-config-provider/types'