Browse Source

docs: components change var

Drjingfubo 3 years ago
parent
commit
7b1c11548f

+ 18 - 0
src/packages/__VUE/tabbar/doc.en-US.md

@@ -367,5 +367,23 @@ Use icon slot to custom icon.
 |------------|--------------------|--------------------|
 |------------|--------------------|--------------------|
 | tab-switch | 	Emitted when changing active tab | item,index |
 | tab-switch | 	Emitted when changing active tab | item,index |
 
 
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-tabbar-active-color| _var(--nut-primary-color)_ | -  |
+| --nut-tabbar-unactive-color| _var(--nut-primary-color)_ | -  |
+| --nut-tabbar-border-top| _1px solid #eee_ | -  |
+| --nut-tabbar-border-bottom| _1px solid #eee_ | -  |
+| --nut-tabbar-box-shadow| _none_ | -  |
+| --nut-tabbar-item-text-font-size| _var(--nut-font-size-0)_ | -  |
+| --nut-tabbar-item-text-line-height| _initial_ | -  |
+| --nut-tabbar-height| _50px_ | -  |
+| --nut-tabbar-word-margin-top| _auto_ | -  |
+
 
 
 
 

+ 18 - 0
src/packages/__VUE/tabbar/doc.md

@@ -427,5 +427,23 @@ app.use(TabbarItem);
 |------------|--------------------|--------------------|
 |------------|--------------------|--------------------|
 | tab-switch | 切换页签时触发事件 | 点击的数据和索引值 |
 | tab-switch | 切换页签时触发事件 | 点击的数据和索引值 |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-tabbar-active-color| _var(--nut-primary-color)_ | -  |
+| --nut-tabbar-unactive-color| _var(--nut-primary-color)_ | -  |
+| --nut-tabbar-border-top| _1px solid #eee_ | -  |
+| --nut-tabbar-border-bottom| _1px solid #eee_ | -  |
+| --nut-tabbar-box-shadow| _none_ | -  |
+| --nut-tabbar-item-text-font-size| _var(--nut-font-size-0)_ | -  |
+| --nut-tabbar-item-text-line-height| _initial_ | -  |
+| --nut-tabbar-height| _50px_ | -  |
+| --nut-tabbar-word-margin-top| _auto_ | -  |
+
 
 
 
 

+ 18 - 0
src/packages/__VUE/tabbar/doc.taro.md

@@ -405,5 +405,23 @@ app.use(TabbarItem);
 |------------|--------------------|--------------------|
 |------------|--------------------|--------------------|
 | tab-switch | 切换页签时触发事件 | 点击的数据和索引值 |
 | tab-switch | 切换页签时触发事件 | 点击的数据和索引值 |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-tabbar-active-color| _var(--nut-primary-color)_ | -  |
+| --nut-tabbar-unactive-color| _var(--nut-primary-color)_ | -  |
+| --nut-tabbar-border-top| _1px solid #eee_ | -  |
+| --nut-tabbar-border-bottom| _1px solid #eee_ | -  |
+| --nut-tabbar-box-shadow| _none_ | -  |
+| --nut-tabbar-item-text-font-size| _var(--nut-font-size-0)_ | -  |
+| --nut-tabbar-item-text-line-height| _initial_ | -  |
+| --nut-tabbar-height| _50px_ | -  |
+| --nut-tabbar-word-margin-top| _auto_ | -  |
+
 
 
 
 

+ 14 - 0
src/packages/__VUE/table/doc.en-US.md

@@ -634,3 +634,17 @@ app.use(Table);
 | Event | Description             | Arguments                   |
 | Event | Description             | Arguments                   |
 | ------ | ---------------- | -------------------------- |
 | ------ | ---------------- | -------------------------- |
 | sorter | Click the sort button to trigger | item: Data of the currently clicked header |
 | sorter | Click the sort button to trigger | item: Data of the currently clicked header |
+
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-table-border-color| _#ececec_  | -  |
+| --nut-table-cols-padding| _10px_  | -  |
+| --nut-table-tr-even-bg-color| _#f3f3f3_  | -  |
+| --nut-table-tr-odd-bg-color| _var(--nut-white)_  | -  |

+ 13 - 0
src/packages/__VUE/table/doc.md

@@ -634,3 +634,16 @@ app.use(Table);
 | 事件名 | 说明             | 回调参数                   |
 | 事件名 | 说明             | 回调参数                   |
 | ------ | ---------------- | -------------------------- |
 | ------ | ---------------- | -------------------------- |
 | sorter | 点击排序按钮触发 | item: 当前点击的表头的数据 |
 | sorter | 点击排序按钮触发 | item: 当前点击的表头的数据 |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-table-border-color| _#ececec_  | -  |
+| --nut-table-cols-padding| _10px_  | -  |
+| --nut-table-tr-even-bg-color| _#f3f3f3_  | -  |
+| --nut-table-tr-odd-bg-color| _var(--nut-white)_  | -  |

+ 13 - 0
src/packages/__VUE/table/doc.taro.md

@@ -634,3 +634,16 @@ app.use(Table);
 | 事件名 | 说明             | 回调参数                   |
 | 事件名 | 说明             | 回调参数                   |
 | ------ | ---------------- | -------------------------- |
 | ------ | ---------------- | -------------------------- |
 | sorter | 点击排序按钮触发 | item: 当前点击的表头的数据 |
 | sorter | 点击排序按钮触发 | item: 当前点击的表头的数据 |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-table-border-color| _#ececec_  | -  |
+| --nut-table-cols-padding| _10px_  | -  |
+| --nut-table-tr-even-bg-color| _#f3f3f3_  | -  |
+| --nut-table-tr-odd-bg-color| _var(--nut-white)_  | -  |

+ 27 - 0
src/packages/__VUE/tabs/doc.en-US.md

@@ -376,3 +376,30 @@ export default {
 | click  | Triggered when the label is clicked         | {title,paneKey,disabled} |
 | click  | Triggered when the label is clicked         | {title,paneKey,disabled} |
 | change | Fired when the currently active tab changes | {title,paneKey,disabled} |
 | change | Fired when the currently active tab changes | {title,paneKey,disabled} |
 
 
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-tabs-tab-smile-color| _var(--nut-primary-color)_  |  -  |
+| --nut-tabs-titles-border-radius| _0_  |  -  |
+| --nut-tabs-titles-item-large-font-size| _var(--nut-font-size-3)_  |  -  |
+| --nut-tabs-titles-item-font-size| _var(--nut-font-size-2)_  |  -  |
+| --nut-tabs-titles-item-small-font-size| _var(--nut-font-size-1)_  |  -  |
+| --nut-tabs-titles-item-color| _var(--nut-title-color)_  |  -  |
+| --nut-tabs-titles-item-active-color| _var(--nut-title-color)_  |  -  |
+| --nut-tabs-titles-background-color| _var(--nut-help-color)_  |  -  |
+| --nut-tabs-horizontal-tab-line-color| _linear-gradient(90deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_  |  -  |
+| --nut-tabs-horizontal-titles-height| _46px_  |  -  |
+| --nut-tabs-horizontal-titles-item-min-width| _50px_  |  -  |
+| --nut-tabs-horizontal-titles-item-active-line-width| _40px_  |  -  |
+| --nut-tabs-vertical-tab-line-color| _linear-gradient(180deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_  |  -  |
+| --nut-tabs-vertical-titles-item-height| _40px_  |  -  |
+| --nut-tabs-vertical-titles-item-active-line-height| _14px_  |  -  |
+| --nut-tabs-vertical-titles-width| _100px_  |  -  |
+| --nut-tabs-titles-item-line-border-radius| _0_  |  -  |
+| --nut-tabs-titles-item-line-opacity| _1_  |  -  |
+

+ 27 - 0
src/packages/__VUE/tabs/doc.md

@@ -376,3 +376,30 @@ export default {
 | click  | 点击标签时触发           | {title,paneKey,disabled} |
 | click  | 点击标签时触发           | {title,paneKey,disabled} |
 | change | 当前激活的标签改变时触发 | {title,paneKey,disabled} |
 | change | 当前激活的标签改变时触发 | {title,paneKey,disabled} |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-tabs-tab-smile-color| _var(--nut-primary-color)_  |  -  |
+| --nut-tabs-titles-border-radius| _0_  |  -  |
+| --nut-tabs-titles-item-large-font-size| _var(--nut-font-size-3)_  |  -  |
+| --nut-tabs-titles-item-font-size| _var(--nut-font-size-2)_  |  -  |
+| --nut-tabs-titles-item-small-font-size| _var(--nut-font-size-1)_  |  -  |
+| --nut-tabs-titles-item-color| _var(--nut-title-color)_  |  -  |
+| --nut-tabs-titles-item-active-color| _var(--nut-title-color)_  |  -  |
+| --nut-tabs-titles-background-color| _var(--nut-help-color)_  |  -  |
+| --nut-tabs-horizontal-tab-line-color| _linear-gradient(90deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_  |  -  |
+| --nut-tabs-horizontal-titles-height| _46px_  |  -  |
+| --nut-tabs-horizontal-titles-item-min-width| _50px_  |  -  |
+| --nut-tabs-horizontal-titles-item-active-line-width| _40px_  |  -  |
+| --nut-tabs-vertical-tab-line-color| _linear-gradient(180deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_  |  -  |
+| --nut-tabs-vertical-titles-item-height| _40px_  |  -  |
+| --nut-tabs-vertical-titles-item-active-line-height| _14px_  |  -  |
+| --nut-tabs-vertical-titles-width| _100px_  |  -  |
+| --nut-tabs-titles-item-line-border-radius| _0_  |  -  |
+| --nut-tabs-titles-item-line-opacity| _1_  |  -  |
+

+ 27 - 0
src/packages/__VUE/tabs/doc.taro.md

@@ -374,3 +374,30 @@ export default {
 | click  | 点击标签时触发           | {title,paneKey,disabled} |
 | click  | 点击标签时触发           | {title,paneKey,disabled} |
 | change | 当前激活的标签改变时触发 | {title,paneKey,disabled} |
 | change | 当前激活的标签改变时触发 | {title,paneKey,disabled} |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-tabs-tab-smile-color| _var(--nut-primary-color)_  |  -  |
+| --nut-tabs-titles-border-radius| _0_  |  -  |
+| --nut-tabs-titles-item-large-font-size| _var(--nut-font-size-3)_  |  -  |
+| --nut-tabs-titles-item-font-size| _var(--nut-font-size-2)_  |  -  |
+| --nut-tabs-titles-item-small-font-size| _var(--nut-font-size-1)_  |  -  |
+| --nut-tabs-titles-item-color| _var(--nut-title-color)_  |  -  |
+| --nut-tabs-titles-item-active-color| _var(--nut-title-color)_  |  -  |
+| --nut-tabs-titles-background-color| _var(--nut-help-color)_  |  -  |
+| --nut-tabs-horizontal-tab-line-color| _linear-gradient(90deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_  |  -  |
+| --nut-tabs-horizontal-titles-height| _46px_  |  -  |
+| --nut-tabs-horizontal-titles-item-min-width| _50px_  |  -  |
+| --nut-tabs-horizontal-titles-item-active-line-width| _40px_  |  -  |
+| --nut-tabs-vertical-tab-line-color| _linear-gradient(180deg,var(--nut-primary-color) 0%,var(--nut-active-color) 100%)_  |  -  |
+| --nut-tabs-vertical-titles-item-height| _40px_  |  -  |
+| --nut-tabs-vertical-titles-item-active-line-height| _14px_  |  -  |
+| --nut-tabs-vertical-titles-width| _100px_  |  -  |
+| --nut-tabs-titles-item-line-border-radius| _0_  |  -  |
+| --nut-tabs-titles-item-line-opacity| _1_  |  -  |
+

+ 22 - 0
src/packages/__VUE/tag/doc.en-US.md

@@ -156,3 +156,25 @@ export default {
 |----------|----------|----------|
 |----------|----------|----------|
 | click    | click event | event    |
 | click    | click event | event    |
 | close    | close event | event    |
 | close    | close event | event    |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-tag-font-size| _12px_ | -  |
+| --nut-tag-default-border-radius| _4px_ | -  |
+| --nut-tag-round-border-radius| _8px_ | -  |
+| --nut-tag-default-background-color| _#000000_ | -  |
+| --nut-tag-primary-background-color| _#3460fa_ | -  |
+| --nut-tag-success-background-color| _#4fc08d_ | -  |
+| --nut-tag-danger-background-color| _linear-gradient(135deg,rgba(242, 20, 12, 1) 0%,rgba(232, 34, 14, 1) 69.83950099728881%,rgba(242, 77, 12, 1) 100%)_ | -  |
+| --nut-tag-danger-background-color-plain| _#df3526_ | -  |
+| --nut-tag-warning-background-color| _#f3812e_ | -  |
+| --nut-tag-default-color| _#ffffff_ | -  |
+| --nut-tag-border-width| _1px_ | -  |
+| --nut-tag-plain-background-color| _#fff_ | -  |
+| --nut-tag-height| _auto_ | -  |

+ 23 - 0
src/packages/__VUE/tag/doc.md

@@ -157,3 +157,26 @@ export default {
 |----------|----------|----------|
 |----------|----------|----------|
 | click    | 点击事件 | event    |
 | click    | 点击事件 | event    |
 | close    | 关闭事件 | event    |
 | close    | 关闭事件 | event    |
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-tag-font-size| _12px_ | -  |
+| --nut-tag-default-border-radius| _4px_ | -  |
+| --nut-tag-round-border-radius| _8px_ | -  |
+| --nut-tag-default-background-color| _#000000_ | -  |
+| --nut-tag-primary-background-color| _#3460fa_ | -  |
+| --nut-tag-success-background-color| _#4fc08d_ | -  |
+| --nut-tag-danger-background-color| _linear-gradient(135deg,rgba(242, 20, 12, 1) 0%,rgba(232, 34, 14, 1) 69.83950099728881%,rgba(242, 77, 12, 1) 100%)_ | -  |
+| --nut-tag-danger-background-color-plain| _#df3526_ | -  |
+| --nut-tag-warning-background-color| _#f3812e_ | -  |
+| --nut-tag-default-color| _#ffffff_ | -  |
+| --nut-tag-border-width| _1px_ | -  |
+| --nut-tag-plain-background-color| _#fff_ | -  |
+| --nut-tag-height| _auto_ | -  |

+ 22 - 0
src/packages/__VUE/tag/doc.taro.md

@@ -157,3 +157,25 @@ export default {
 |----------|----------|----------|
 |----------|----------|----------|
 | click    | 点击事件 | event    |
 | click    | 点击事件 | event    |
 | close    | 关闭事件 | event    |
 | close    | 关闭事件 | event    |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-tag-font-size| _12px_ | -  |
+| --nut-tag-default-border-radius| _4px_ | -  |
+| --nut-tag-round-border-radius| _8px_ | -  |
+| --nut-tag-default-background-color| _#000000_ | -  |
+| --nut-tag-primary-background-color| _#3460fa_ | -  |
+| --nut-tag-success-background-color| _#4fc08d_ | -  |
+| --nut-tag-danger-background-color| _linear-gradient(135deg,rgba(242, 20, 12, 1) 0%,rgba(232, 34, 14, 1) 69.83950099728881%,rgba(242, 77, 12, 1) 100%)_ | -  |
+| --nut-tag-danger-background-color-plain| _#df3526_ | -  |
+| --nut-tag-warning-background-color| _#f3812e_ | -  |
+| --nut-tag-default-color| _#ffffff_ | -  |
+| --nut-tag-border-width| _1px_ | -  |
+| --nut-tag-plain-background-color| _#fff_ | -  |
+| --nut-tag-height| _auto_ | -  |

+ 14 - 0
src/packages/__VUE/textarea/doc.en-US.md

@@ -91,6 +91,20 @@ export default {
 | focus  | Triggered when focusing     | event       |
 | focus  | Triggered when focusing     | event       |
 | blur   | Triggered when out of focus     | {value,event} |
 | blur   | Triggered when out of focus     | {value,event} |
 
 
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-textarea-font| _var(--nut-font-size-2)_  | -  |
+| --nut-textarea-height| _100px_  | -  |
+| --nut-textarea-limit-color| _var(--nut-text-color)_  | -  |
+| --nut-textarea-text-color| _var(--nut-title-color)_  | -  |
+| --nut-textarea-disabled-color| _var(--nut-disable-color)_  | -  |
+
 
 
 
 
 
 

+ 14 - 0
src/packages/__VUE/textarea/doc.md

@@ -91,6 +91,20 @@ export default {
 | focus  | 聚焦时触发     | event       |
 | focus  | 聚焦时触发     | event       |
 | blur   | 失焦时触发     | {value,event} |
 | blur   | 失焦时触发     | {value,event} |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-textarea-font| _var(--nut-font-size-2)_  | -  |
+| --nut-textarea-height| _100px_  | -  |
+| --nut-textarea-limit-color| _var(--nut-text-color)_  | -  |
+| --nut-textarea-text-color| _var(--nut-title-color)_  | -  |
+| --nut-textarea-disabled-color| _var(--nut-disable-color)_  | -  |
+
 
 
 
 
 
 

+ 14 - 0
src/packages/__VUE/textarea/doc.taro.md

@@ -91,6 +91,20 @@ export default {
 | focus  | 聚焦时触发     | event       |
 | focus  | 聚焦时触发     | event       |
 | blur   | 失焦时触发     | {value,event} |
 | blur   | 失焦时触发     | {value,event} |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-textarea-font| _var(--nut-font-size-2)_  | -  |
+| --nut-textarea-height| _100px_  | -  |
+| --nut-textarea-limit-color| _var(--nut-text-color)_  | -  |
+| --nut-textarea-text-color| _var(--nut-title-color)_  | -  |
+| --nut-textarea-disabled-color| _var(--nut-disable-color)_  | -  |
+
 
 
 
 
 
 

+ 34 - 0
src/packages/__VUE/timeselect/doc.en-US.md

@@ -366,4 +366,38 @@ app.use(Overlay);
 |-------|----------|-------------|
 |-------|----------|-------------|
 | select | Callback of click time | time: string |
 | select | Callback of click time | time: string |
 
 
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |  --nut-timeselect-title-font-size: var(--nut-font-size-2);
+| --nut-timeselect-title-color| _var(--nut-title-color)_ | - |
+| --nut-timeselect-title-width| _100%_ | - |
+| --nut-timeselect-title-height| _50px_ | - |
+| --nut-timeselect-title-line-height| _50px_ | - |
+| --nut-timeselect-pannel-bg-color| _#f6f7f9_ | - |
+| --nut-timeselect-timepannel-text-color| _var(--nut-title-color2)_ | - |
+| --nut-timeselect-timepannel-font-size| _var(--nut-font-size-2)_ | - |
+| --nut-timeselect-timepannel-cur-bg-color| _var(--nut-white)_ | - |
+| --nut-timeselect-timepannel-cur-text-color| _#333333_ | - |
+| --nut-timeselect-timepannel-width| _140px_ | - |
+| --nut-timeselect-timepannel-height| _40px_ | - |
+| --nut-timeselect-timepannel-padding| _15px_ | - |
+| --nut-timeselect-timedetail-padding| _0 5px 50px 13px_ | - |
+| --nut-timeselect-timedetail-item-width| _100px_ | - |
+| --nut-timeselect-timedetail-item-height| _50px_ | - |
+| --nut-timeselect-timedetail-item-line-height| _50px_ | - |
+| --nut-timeselect-timedetail-item-bg-color| _#f6f7f9_ | - |
+| --nut-timeselect-timedetail-item-border-radius| _5px_ | - |
+| --nut-timeselect-timedetail-item-text-color| _#333333_ | - |
+| --nut-timeselect-timedetail-item-text-font-size| _var(--nut-font-size-2)_ | - |
+| --nut-timeselect-timedetail-item-cur-bg-color| _var(--nut-active-color)_ | - |
+| --nut-timeselect-timedetail-item-cur-border| _var(--nut-primary-color)_ | - |
+| --nut-timeselect-timedetail-item-cur-text-color| _var(--nut-primary-color)_ | - |
+| --nut-timeselect-timedetail-time-text-color| _#999_ | - |
+| --nut-timeselect-timedetail-time-font-size| _var(--nut-font-size-1)_ | - |
+
 
 

+ 34 - 0
src/packages/__VUE/timeselect/doc.md

@@ -366,4 +366,38 @@ app.use(Overlay);
 |-------|----------|-------------|
 |-------|----------|-------------|
 | select | 点击时间的回调 | time: string |
 | select | 点击时间的回调 | time: string |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |  --nut-timeselect-title-font-size: var(--nut-font-size-2);
+| --nut-timeselect-title-color| _var(--nut-title-color)_ | - |
+| --nut-timeselect-title-width| _100%_ | - |
+| --nut-timeselect-title-height| _50px_ | - |
+| --nut-timeselect-title-line-height| _50px_ | - |
+| --nut-timeselect-pannel-bg-color| _#f6f7f9_ | - |
+| --nut-timeselect-timepannel-text-color| _var(--nut-title-color2)_ | - |
+| --nut-timeselect-timepannel-font-size| _var(--nut-font-size-2)_ | - |
+| --nut-timeselect-timepannel-cur-bg-color| _var(--nut-white)_ | - |
+| --nut-timeselect-timepannel-cur-text-color| _#333333_ | - |
+| --nut-timeselect-timepannel-width| _140px_ | - |
+| --nut-timeselect-timepannel-height| _40px_ | - |
+| --nut-timeselect-timepannel-padding| _15px_ | - |
+| --nut-timeselect-timedetail-padding| _0 5px 50px 13px_ | - |
+| --nut-timeselect-timedetail-item-width| _100px_ | - |
+| --nut-timeselect-timedetail-item-height| _50px_ | - |
+| --nut-timeselect-timedetail-item-line-height| _50px_ | - |
+| --nut-timeselect-timedetail-item-bg-color| _#f6f7f9_ | - |
+| --nut-timeselect-timedetail-item-border-radius| _5px_ | - |
+| --nut-timeselect-timedetail-item-text-color| _#333333_ | - |
+| --nut-timeselect-timedetail-item-text-font-size| _var(--nut-font-size-2)_ | - |
+| --nut-timeselect-timedetail-item-cur-bg-color| _var(--nut-active-color)_ | - |
+| --nut-timeselect-timedetail-item-cur-border| _var(--nut-primary-color)_ | - |
+| --nut-timeselect-timedetail-item-cur-text-color| _var(--nut-primary-color)_ | - |
+| --nut-timeselect-timedetail-time-text-color| _#999_ | - |
+| --nut-timeselect-timedetail-time-font-size| _var(--nut-font-size-1)_ | - |
+
 
 

+ 34 - 0
src/packages/__VUE/timeselect/doc.taro.md

@@ -366,4 +366,38 @@ app.use(Overlay);
 |-------|----------|-------------|
 |-------|----------|-------------|
 | select | 点击时间的回调 | time: string |
 | select | 点击时间的回调 | time: string |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |  --nut-timeselect-title-font-size: var(--nut-font-size-2);
+| --nut-timeselect-title-color| _var(--nut-title-color)_ | - |
+| --nut-timeselect-title-width| _100%_ | - |
+| --nut-timeselect-title-height| _50px_ | - |
+| --nut-timeselect-title-line-height| _50px_ | - |
+| --nut-timeselect-pannel-bg-color| _#f6f7f9_ | - |
+| --nut-timeselect-timepannel-text-color| _var(--nut-title-color2)_ | - |
+| --nut-timeselect-timepannel-font-size| _var(--nut-font-size-2)_ | - |
+| --nut-timeselect-timepannel-cur-bg-color| _var(--nut-white)_ | - |
+| --nut-timeselect-timepannel-cur-text-color| _#333333_ | - |
+| --nut-timeselect-timepannel-width| _140px_ | - |
+| --nut-timeselect-timepannel-height| _40px_ | - |
+| --nut-timeselect-timepannel-padding| _15px_ | - |
+| --nut-timeselect-timedetail-padding| _0 5px 50px 13px_ | - |
+| --nut-timeselect-timedetail-item-width| _100px_ | - |
+| --nut-timeselect-timedetail-item-height| _50px_ | - |
+| --nut-timeselect-timedetail-item-line-height| _50px_ | - |
+| --nut-timeselect-timedetail-item-bg-color| _#f6f7f9_ | - |
+| --nut-timeselect-timedetail-item-border-radius| _5px_ | - |
+| --nut-timeselect-timedetail-item-text-color| _#333333_ | - |
+| --nut-timeselect-timedetail-item-text-font-size| _var(--nut-font-size-2)_ | - |
+| --nut-timeselect-timedetail-item-cur-bg-color| _var(--nut-active-color)_ | - |
+| --nut-timeselect-timedetail-item-cur-border| _var(--nut-primary-color)_ | - |
+| --nut-timeselect-timedetail-item-cur-text-color| _var(--nut-primary-color)_ | - |
+| --nut-timeselect-timedetail-time-text-color| _#999_ | - |
+| --nut-timeselect-timedetail-time-font-size| _var(--nut-font-size-1)_ | - |
+
 
 

+ 16 - 0
src/packages/__VUE/toast/doc.en-US.md

@@ -287,3 +287,19 @@ toast.hide();
 | close-on-click-overlay | Whether to close when overlay is clicked                                                           | Boolean       | false              |
 | close-on-click-overlay | Whether to close when overlay is clicked                                                           | Boolean       | false              |
 | custom-class           | Custom Class                                                                                       | String        | -                  |
 | custom-class           | Custom Class                                                                                       | String        | -                  |
 
 
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-toast-title-font-size| _16px_  | -  |
+| --nut-toast-text-font-size| _14px_  | -  |
+| --nut-toast-font-color| _var(--nut-white)_  | -  |
+| --nut-toast-inner-padding| _24px 30px_  | -  |
+| --nut-toast-inner-bg-color| _rgba(0, 0, 0, 0.8)_  | -  |
+| --nut-toast-inner-border-radius| _12px_  | -  |
+| --nut-toast-cover-bg-color| _rgba(0, 0, 0, 0)_  | -  |
+

+ 16 - 0
src/packages/__VUE/toast/doc.md

@@ -287,3 +287,19 @@ toast.hide();
 | close-on-click-overlay | 是否在点击遮罩层后关闭提示                                     | Boolean       | false              |
 | close-on-click-overlay | 是否在点击遮罩层后关闭提示                                     | Boolean       | false              |
 | custom-class           | 提示框class                                                    | String        | -                  |
 | custom-class           | 提示框class                                                    | String        | -                  |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-toast-title-font-size| _16px_  | -  |
+| --nut-toast-text-font-size| _14px_  | -  |
+| --nut-toast-font-color| _var(--nut-white)_  | -  |
+| --nut-toast-inner-padding| _24px 30px_  | -  |
+| --nut-toast-inner-bg-color| _rgba(0, 0, 0, 0.8)_  | -  |
+| --nut-toast-inner-border-radius| _12px_  | -  |
+| --nut-toast-cover-bg-color| _rgba(0, 0, 0, 0)_  | -  |
+

+ 16 - 0
src/packages/__VUE/toast/doc.taro.md

@@ -88,3 +88,19 @@ export default {
 | toast-class            | 提示框class                                                             | String       | ""                            |
 | toast-class            | 提示框class                                                             | String       | ""                            |
 | type                   | 弹框类型 可选值(text、success、fail、warn、loading)                   | String       | ""                            |
 | type                   | 弹框类型 可选值(text、success、fail、warn、loading)                   | String       | ""                            |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-toast-title-font-size| _16px_  | -  |
+| --nut-toast-text-font-size| _14px_  | -  |
+| --nut-toast-font-color| _var(--nut-white)_  | -  |
+| --nut-toast-inner-padding| _24px 30px_  | -  |
+| --nut-toast-inner-bg-color| _rgba(0, 0, 0, 0.8)_  | -  |
+| --nut-toast-inner-border-radius| _12px_  | -  |
+| --nut-toast-cover-bg-color| _rgba(0, 0, 0, 0)_  | -  |
+

+ 12 - 0
src/packages/__VUE/trendarrow/doc.en-US.md

@@ -161,3 +161,15 @@ app.use(TrendArrow);
 |---------|--------------|
 |---------|--------------|
 | upIcon | custom up icon |
 | upIcon | custom up icon |
 | downIcon | custom down icon |
 | downIcon | custom down icon |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-trendarrow-font-size| _14px_  | -  |
+| --nut-trendarrow-before-icon-margin| _4px_  | -  |
+| --nut-trendarrow-icon-width| _12px_  | -  |

+ 12 - 0
src/packages/__VUE/trendarrow/doc.md

@@ -163,3 +163,15 @@ app.use(TrendArrow);
 |---------|--------------|
 |---------|--------------|
 | upIcon | 自定义向上箭头图标,默认使用 `TriangleUp` |
 | upIcon | 自定义向上箭头图标,默认使用 `TriangleUp` |
 | downIcon | 自定义向下箭头图标,默认使用 `TriangleDown` |
 | downIcon | 自定义向下箭头图标,默认使用 `TriangleDown` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-trendarrow-font-size| _14px_  | -  |
+| --nut-trendarrow-before-icon-margin| _4px_  | -  |
+| --nut-trendarrow-icon-width| _12px_  | -  |

+ 12 - 0
src/packages/__VUE/trendarrow/doc.taro.md

@@ -163,3 +163,15 @@ app.use(TrendArrow);
 |---------|--------------|
 |---------|--------------|
 | upIcon | 自定义向上箭头图标,默认使用 `TriangleUp` |
 | upIcon | 自定义向上箭头图标,默认使用 `TriangleUp` |
 | downIcon | 自定义向下箭头图标,默认使用 `TriangleDown` |
 | downIcon | 自定义向下箭头图标,默认使用 `TriangleDown` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-trendarrow-font-size| _14px_  | -  |
+| --nut-trendarrow-before-icon-margin| _4px_  | -  |
+| --nut-trendarrow-icon-width| _12px_  | -  |

+ 13 - 1
src/packages/__VUE/uploader/doc.en-US.md

@@ -430,4 +430,16 @@ Use [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) t
 | Name             | Description                                                                                 | Arguments | Return value |
 | Name             | Description                                                                                 | Arguments | Return value |
 |------------------|---------------------------------------------------------------------------------------------|-----------|--------------|
 |------------------|---------------------------------------------------------------------------------------------|-----------|--------------|
 | submit           | Manual upload mode, perform upload operation                                                | -         | -            |
 | submit           | Manual upload mode, perform upload operation                                                | -         | -            |
-| clearUploadQueue | Empty the selected file queue (this method is generally used when uploading in manual mode) | index     | -            |
+| clearUploadQueue | Empty the selected file queue (this method is generally used when uploading in manual mode) | index     | -            |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-uploader-picture-width| _100px_  | -  |
+| --nut-uploader-picture-height| _100px_  | -  |
+| --nut-uploader-background| _#f7f8fa_  | -  |

+ 14 - 1
src/packages/__VUE/uploader/doc.md

@@ -430,4 +430,17 @@ export default {
 | 方法名           | 说明                                                       | 参数  | 返回值 |
 | 方法名           | 说明                                                       | 参数  | 返回值 |
 |------------------|------------------------------------------------------------|-------|--------|
 |------------------|------------------------------------------------------------|-------|--------|
 | submit           | 手动上传模式,执行上传操作                                 | -     | -      |
 | submit           | 手动上传模式,执行上传操作                                 | -     | -      |
-| clearUploadQueue | 清空已选择的文件队列(该方法一般配合在手动模式上传时使用) | index | -      |
+| clearUploadQueue | 清空已选择的文件队列(该方法一般配合在手动模式上传时使用) | index | -      |
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-uploader-picture-width| _100px_  | -  |
+| --nut-uploader-picture-height| _100px_  | -  |
+| --nut-uploader-background| _#f7f8fa_  | -  |

+ 13 - 1
src/packages/__VUE/uploader/doc.taro.md

@@ -293,4 +293,16 @@ setup() {
 | 方法名           | 说明                                                       | 参数  | 返回值 |
 | 方法名           | 说明                                                       | 参数  | 返回值 |
 |------------------|------------------------------------------------------------|-------|--------|
 |------------------|------------------------------------------------------------|-------|--------|
 | submit           | 手动上传模式,执行上传操作                                 | -     | -      |
 | submit           | 手动上传模式,执行上传操作                                 | -     | -      |
-| clearUploadQueue | 清空已选择的文件队列(该方法一般配合在手动模式上传时使用) | index | -      |
+| clearUploadQueue | 清空已选择的文件队列(该方法一般配合在手动模式上传时使用) | index | -      |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-uploader-picture-width| _100px_  | -  |
+| --nut-uploader-picture-height| _100px_  | -  |
+| --nut-uploader-background| _#f7f8fa_  | -  |

+ 10 - 0
src/packages/__VUE/watermark/doc.en-US.md

@@ -120,3 +120,13 @@ app.use(Watermark);
 | gap-y        | Vertical spacing between watermarks                                   | `number`           | `48`                 |
 | gap-y        | Vertical spacing between watermarks                                   | `number`           | `48`                 |
 | full-page    | Overwrite entire page                                     | `boolean`          | `true`               |
 | full-page    | Overwrite entire page                                     | `boolean`          | `true`               |
 | font-family  | Watermark text font family                  | `boolean`          | `true`               |
 | font-family  | Watermark text font family                  | `boolean`          | `true`               |
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name | Default Value | Description |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-watermark-z-index        | _ 2000_        | -    |

+ 10 - 0
src/packages/__VUE/watermark/doc.md

@@ -126,4 +126,14 @@ app.use(Watermark);
 | full-page    | 是否覆盖整个页面                                     | `boolean`          | `true`               |
 | full-page    | 是否覆盖整个页面                                     | `boolean`          | `true`               |
 | font-family  | 水印文字字体                                     | `boolean`          | `true`               |
 | font-family  | 水印文字字体                                     | `boolean`          | `true`               |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-watermark-z-index        | _ 2000_        | -    |
+
 
 

+ 10 - 0
src/packages/__VUE/watermark/doc.taro.md

@@ -126,4 +126,14 @@ app.use(Watermark);
 | full-page    | 是否覆盖整个页面                                     | `boolean`          | `true`               |
 | full-page    | 是否覆盖整个页面                                     | `boolean`          | `true`               |
 | font-family  | 水印文字字体                                     | `boolean`          | `true`               |
 | font-family  | 水印文字字体                                     | `boolean`          | `true`               |
 
 
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| --nut-watermark-z-index        | _ 2000_        | -    |
+