admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
xuqingkai 2024-02-26 16:59:11 +08:00
parent 3805882b8b
commit e1baca3ce5
8 changed files with 1119 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
build/buildThemeVars.js Normal file
View File

@ -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!')

11
docs/component/config-provider.md
View File

@ -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 :::tip
注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。
::: :::

14
docs/guide/common-problems.md
View File

@ -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 ```vue
<wd-button type="primary">主要按钮</wd-button> <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)组件的使用介绍来定制主题。 我们为每个组件提供了`css 变量`，可以参考[config-provider](../component/config-provider)组件的使用介绍来定制主题。
:::
## 关于我们 ## 关于我们

12
src/components/page-wraper/page-wraper.vue
View File

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

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

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

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

@ -1,12 +1,11 @@
@import './function'; @import './function';
$open-linear: true !default;
/** /**
* UI规范基础变量 * UI规范基础变量
*/ */
/*----------------------------------------- Theme color. start ----------------------------------------*/ /*----------------------------------------- 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-white: var(--wot-color-white, rgb(255, 255, 255)) !default; // 用于mix的白色
$-color-black: var(--wot-color-black, rgb(0, 0, 0)) !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: var(--wot-color-border, #d9d9d9) !default; // 控件边框线 d9d9d9
$-color-border-light: var(--wot-color-border-light, #e8e8e8) !default; // 分割线颜色 e8e8e8 $-color-border-light: var(--wot-color-border-light, #e8e8e8) !default; // 分割线颜色 e8e8e8
$-color-bg: var(--wot-color-bg, #f5f5f5) !default; // 背景色、禁用填充色 f5f5f5 $-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; $-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-color-gray: var(--wot-dark-color-gray, $-color-secondary) !default;
$-dark-border-color: var(--wot-dark-border-color, #3a3a3c) !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: var(--wot-color-icon, #d9d9d9) !default; // icon颜色
$-color-icon-active: var(--wot-color-icon-active, #eee) !default; // icon颜色hover $-color-icon-active: var(--wot-color-icon-active, #eee) !default; // icon颜色hover
$-color-icon-disabled: var(--wot-color-icon-disabled, #a7a7a7) !default; // icon颜色disabled $-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 -------------------------------------------*/ /*----------------------------------------- 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-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-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-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 $-notice-bar-wrap-padding: var(--wot-notice-bar-wrap-padding, 14px $-size-side-padding) !default; // 换行下的padding
/* pagination */ /* 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-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; // 弹框列表选中选项颜色 $-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 */
$-popup-close-size: var(--wot-popup-close-size, 24px) !default; // 关闭按钮尺寸 $-popup-close-size: var(--wot-popup-close-size, 24px) !default; // 关闭按钮尺寸
$-popup-close-color: var(--wot-popup-close-color, #666) !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-bg: var(--wot-progress-bg, rgba(229, 229, 229, 1)) !default; // 进度条底色
$-progress-danger-color: var(--wot-progress-danger-color, $-color-danger) !default; // 进度条danger颜色 $-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-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-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($open-linear, 315deg, $-color-theme, "dark""light", #20B080 #2BD69D, 0% 100%)) !default; // success进度条渐变色 $-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($open-linear, 315deg, $-color-theme, "dark""light", #E04350 #FF5964, 0% 100%)) !default; // danger进度条渐变色 $-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-height: var(--wot-progress-height, 3px) !default; // 进度条高度
$-progress-label-color: var(--wot-progress-label-color, #333) !default; // 文字颜色 $-progress-label-color: var(--wot-progress-label-color, #333) !default; // 文字颜色
$-progress-label-fs: var(--wot-progress-label-fs, 14px) !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 */
$-slider-fs: var(--wot-slider-fs, $-fs-content) !default; // 字体大小 $-slider-fs: var(--wot-slider-fs, $-fs-content) !default; // 字体大小
$-slider-handle-radius: var(--wot-slider-handle-radius, 12px) !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-axie-height: var(--wot-slider-axie-height, 3px) !default; // 滑轴高度
$-slider-color: var(--wot-slider-color, #333) !default; // 字体颜色 $-slider-color: var(--wot-slider-color, #333) !default; // 字体颜色
$-slider-axie-bg: var(--wot-slider-axie-bg, #E5E5E5) !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; // 禁用状态下字体颜色 $-slider-disabled-color: var(--wot-slider-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用状态下字体颜色
/* sort-button */ /* 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-border-color: var(--wot-switch-border-color, #e5e5e5) !default; // 边框颜色选中状态背景颜色
$-switch-active-color: var(--wot-switch-active-color, $-color-theme) !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-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颜色 $-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-danger-color: var(--wot-tag-danger-color, $-color-danger) !default; // danger 颜色
$-tag-warning-color: var(--wot-tag-warning-color, $-color-warning) !default; // warning 颜色 $-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-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-primary-bg: var(--wot-tag-primary-bg, $-color-theme) !default; // 主背景颜色
$-tag-danger-bg: var(--wot-tag-danger-bg, $-color-danger) !default; // danger 背景颜色 $-tag-danger-bg: var(--wot-tag-danger-bg, $-color-danger) !default; // danger 背景颜色
$-tag-warning-bg: var(--wot-tag-warning-bg, $-color-warning) !default; // warning 背景颜色 $-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-color: var(--wot-curtain-content-close-color, $-color-white) !default; // 关闭按钮颜色
$-curtain-content-close-fs: var(--wot-curtain-content-close-fs, $-fs-big) !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-text-color: var(--wot-notify-text-color, $-color-white) !default;
$-notify-padding: var(--wot-notify-padding, 8px 16px) !default; $-notify-padding: var(--wot-notify-padding, 8px 16px) !default;
$-notify-font-size: var(--wot-notify-font-size, $-fs-content) !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-danger-background: var(--wot-notify-danger-background, $-color-danger) !default;
$-notify-warning-background: var(--wot-notify-warning-background, $-color-warning) !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-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-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; $-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-rect: var(--wot-skeleton-border-radius-rect, 4px) !default;
$-skeleton-border-radius-circle: var(--wot-skeleton-border-radius-circle, 50%) !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文字颜色 $-circle-text-color: var(--wot-circle-text-color, $-color-content) !default; // circle文字颜色
// swiper /* swiper */
$-swiper-radius: var(--wot-swiper-radius, 8px); $-swiper-radius: var(--wot-swiper-radius, 8px);
$-swiper-item-padding: var(--wot-swiper-item-padding, 0); $-swiper-item-padding: var(--wot-swiper-item-padding, 0);
// swiper-nav /* swiper-nav */
// dot & dots-bar // dot & dots-bar
$-swiper-nav-dot-color: var(--wot-swiper-nav-dot-color, $-font-white-2) !default; $-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; $-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-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; $-swiper-nav-btn-size: var(--wot-swiper-nav-btn-size, 48rpx) !default;
/* segmented */
// segmented
$-segmented-padding: var(--wot-segmented-padding, 4px) !default; // 分段器padding $-segmented-padding: var(--wot-segmented-padding, 4px) !default; // 分段器padding
$-segmented-item-bg-color: var(--wot-segmented-item-bg-color, #eeeeee) !default; $-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-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-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; // 标题文字禁用颜色 $-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-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-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-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-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-inactive-color: var(--wot-tabbar-inactive-color, $-color-title) !default; // 标题文字和图标颜色
$-tabbar-active-color: var(--wot-tabbar-active-color, $-color-theme) !default; // 选中文字和图标颜色 $-tabbar-active-color: var(--wot-tabbar-active-color, $-color-theme) !default; // 选中文字和图标颜色
// navbar /* navbar */
$-navbar-height: var(--wot-navbar-height, 44px) !default; // navbar高度 $-navbar-height: var(--wot-navbar-height, 44px) !default; // navbar高度
$-navbar-color: var(--wot-navbar-color, $-font-gray-1) !default; // navbar字体颜色 $-navbar-color: var(--wot-navbar-color, $-font-gray-1) !default; // navbar字体颜色
$-navbar-background: var(--wot-navbar-background, $-color-white) !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-disabled-opacity: var(--wot-navbar-disabled-opacity, 0.6) !default; // navbar左右两侧字体禁用
$-navbar-hover-color :var(--wot-navbar-hover-color, #eee) !default; // navbar hover样式 $-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-color: var(--wot-navbar-capsule-border-color, #e7e7e7) !default;
$-navbar-capsule-border-radius: var(--wot-navbar-capsule-border-radius, 16px) !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-width: var(--wot-navbar-capsule-width, 88px) !default;
$-navbar-capsule-height: var(--wot-navbar-capsule-height, 32px) !default; $-navbar-capsule-height: var(--wot-navbar-capsule-height, 32px) !default;
// table /* table */
$-table-color: var(--wot-table-color, $-font-gray-1) !default; // 表格字体颜色 $-table-color: var(--wot-table-color, $-font-gray-1) !default; // 表格字体颜色
$-table-bg: var(--wot-table-bg, #FFFFFF) !default; // 表格背景颜色 $-table-bg: var(--wot-table-bg, #FFFFFF) !default; // 表格背景颜色
$-table-stripe-bg: var(--wot-table-stripe-bg, #f3f3f3) !default; // 表格背景颜色 $-table-stripe-bg: var(--wot-table-stripe-bg, #f3f3f3) !default; // 表格背景颜色
$-table-border-color: var(--wot-table-border-color, #ececec) !default; // 表格边框颜色 $-table-border-color: var(--wot-table-border-color, #ececec) !default; // 表格边框颜色
$-table-font-size: var(--wot-table-font-size, 13px) !default; // 表格字体大小 $-table-font-size: var(--wot-table-font-size, 13px) !default; // 表格字体大小
// sidebar /* sidebar */
$-sidebar-bg: var(--wot-sidebar-bg, $-color-gray-1) !default; // 侧边栏背景色 $-sidebar-bg: var(--wot-sidebar-bg, $-color-gray-1) !default; // 侧边栏背景色
$-sidebar-width: var(--wot-sidebar-width, 104px) !default; // 侧边栏宽度 $-sidebar-width: var(--wot-sidebar-width, 104px) !default; // 侧边栏宽度
$-sidebar-height: var(--wot-sidebar-height, 100%) !default; // 侧边栏高度 $-sidebar-height: var(--wot-sidebar-height, 100%) !default; // 侧边栏高度
// sidebar-item /* sidebar-item */
$-sidebar-color: var(--wd-sidebar-color, $-font-gray-1) !default; $-sidebar-color: var(--wd-sidebar-color, $-font-gray-1) !default;
$-sidebar-item-height: var(--wd-sidebar-item-height, 56px) !default; $-sidebar-item-height: var(--wd-sidebar-item-height, 56px) !default;
$-sidebar-item-line-height: var(--wd-sidebar-item-line-height, 24px) !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-width: var(--wd-sidebar-active-border-width, 4px) !default;
$-sidebar-active-border-height: var(--wd-sidebar-active-border-height, 16px) !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-height: var(--wd-fab-trigger-height, 56px) !default;
$-fab-trigger-width: var(--wd-fab-trigger-width, 56px) !default; $-fab-trigger-width: var(--wd-fab-trigger-width, 56px) !default;
$-fab-actions-padding: var(--wd-actions-padding, 12px) !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; $-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-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-font-size: var(--wd-count-down-font-size, $-fs-content) !default;
$-count-down-line-height: var(--wd-count-down-line-height, 20px) !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-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-font-size: var(--wd-number-keyboard-key-font-size, 28px) !default;
$-number-keyboard-key-background: var(--wd-number-keyboard-key-background, $-color-white) !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-color: var(--wot-number-keyboard-close-color, $-color-theme) !default;
$-number-keyboard-close-font-size: var(--wot-number-keyboard-close-font-size, 14px) !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-height: var(--wd-password-input-height, 50px);
$-password-input-margin: var(--wd-password-input-margin, 16px); $-password-input-margin: var(--wd-password-input-margin, 16px);
$-password-input-font-size: var(--wd-password-input-margin, 20px); $-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-height: var(--wd-password-input-cursor-height, 40%);
$-password-input-cursor-duration: var(--wd-password-input-cursor-duration, 1s); $-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-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-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; $-form-item-error-message-line-height: var(--wot-form-item-error-message-line-height, 24px) !default;

951
src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts Normal file
View File

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

2
src/uni_modules/wot-design-uni/index.ts
View File

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