blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 05:42:44 +08:00
Code Issues Projects Releases Wiki Activity

feat: add more color variables (#8861)

Browse Source 
* style: add --van-warning-color

* style: add --van-success-color

* feat: add more color variables
This commit is contained in:
neverland 2021-06-14 15:21:05 +08:00 committed by GitHub
parent d4735bb084
commit 4ccd7c1cb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
115 changed files with 250 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/address-edit/README.md
View File

@ -160,5 +160,5 @@ The component provides the following CSS variables, which can be used to customi
| --van-address-edit-padding | _var(--van-padding-sm)_ | - |
| --van-address-edit-buttons-padding | _var(--van-padding-xl) var(--van-padding-base)_ | - |
| --van-address-edit-button-margin-bottom | _var(--van-padding-sm)_ | - |
| --van-address-edit-detail-finish-color | _var(--van-blue)_ | - |
| --van-address-edit-detail-finish-color | _var(--van-primary-color)_ | - |
| --van-address-edit-detail-finish-font-size | _var(--van-font-size-sm)_ | - |

2
src/address-edit/README.zh-CN.md
View File

@ -162,5 +162,5 @@ export default {
| --van-address-edit-padding | _var(--van-padding-sm)_ | - |
| --van-address-edit-buttons-padding | _var(--van-padding-xl) var(--van-padding-base)_ | - |
| --van-address-edit-button-margin-bottom | _var(--van-padding-sm)_ | - |
| --van-address-edit-detail-finish-color | _var(--van-blue)_ | - |
| --van-address-edit-detail-finish-color | _var(--van-primary-color)_ | - |
| --van-address-edit-detail-finish-font-size | _var(--van-font-size-sm)_ | - |

2
src/address-edit/index.less
View File

@ -40,7 +40,7 @@
}
&__keyword {
color: var(--van-red);
color: var(--van-danger-color);
}
&__finish {

2
src/address-edit/var.less
View File

@ -3,5 +3,5 @@
@address-edit-padding: var(--van-padding-sm);
@address-edit-buttons-padding: var(--van-padding-xl) var(--van-padding-base);
@address-edit-button-margin-bottom: var(--van-padding-sm);
@address-edit-detail-finish-color: var(--van-blue);
@address-edit-detail-finish-color: var(--van-primary-color);
@address-edit-detail-finish-font-size: var(--van-font-size-sm);

2
src/address-list/README.md
View File

@ -138,5 +138,5 @@ The component provides the following CSS variables, which can be used to customi
| --van-address-list-item-disabled-text-color | _var(--van-gary-5)_ | - |
| --van-address-list-item-font-size | _13px_ | - |
| --van-address-list-item-line-height | _var(--van-line-height-sm)_ | - |
| --van-address-list-item-radio-icon-color | _var(--van-red)_ | - |
| --van-address-list-item-radio-icon-color | _var(--van-danger-color)_ | - |
| --van-address-list-edit-icon-size | _20px_ | - |

2
src/address-list/README.zh-CN.md
View File

@ -138,5 +138,5 @@ export default {
| --van-address-list-item-disabled-text-color | _var(--van-gary-5)_ | - |
| --van-address-list-item-font-size | _13px_ | - |
| --van-address-list-item-line-height | _var(--van-line-height-sm)_ | - |
| --van-address-list-item-radio-icon-color | _var(--van-red)_ | - |
| --van-address-list-item-radio-icon-color | _var(--van-danger-color)_ | - |
| --van-address-list-edit-icon-size | _20px_ | - |

2
src/address-list/var.less
View File

@ -12,5 +12,5 @@
@address-list-item-disabled-text-color: var(--van-gray-5);
@address-list-item-font-size: 13px;
@address-list-item-line-height: var(--van-line-height-sm);
@address-list-item-radio-icon-color: var(--van-red);
@address-list-item-radio-icon-color: var(--van-danger-color);
@address-list-edit-icon-size: 20px;

4
src/badge/README.md
View File

@ -145,7 +145,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-badge-font-size | _var(--van-font-size-sm)_ | - |
| --van-badge-font-weight | _var(--van-font-weight-bold)_ | - |
| --van-badge-border-width | _var(--van-border-width-base)_ | - |
| --van-badge-background-color | _var(--van-red)_ | - |
| --van-badge-dot-color | _var(--van-red)_ | - |
| --van-badge-background-color | _var(--van-danger-color)_ | - |
| --van-badge-dot-color | _var(--van-danger-color)_ | - |
| --van-badge-dot-size | _8px_ | - |
| --van-badge-font-family | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - |

4
src/badge/README.zh-CN.md
View File

@ -153,7 +153,7 @@ app.use(Badge);
| --van-badge-font-size | _var(--van-font-size-sm)_ | - |
| --van-badge-font-weight | _var(--van-font-weight-bold)_ | - |
| --van-badge-border-width | _var(--van-border-width-base)_ | - |
| --van-badge-background-color | _var(--van-red)_ | - |
| --van-badge-dot-color | _var(--van-red)_ | - |
| --van-badge-background-color | _var(--van-danger-color)_ | - |
| --van-badge-dot-color | _var(--van-danger-color)_ | - |
| --van-badge-dot-size | _8px_ | - |
| --van-badge-font-family | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - |

4
src/badge/var.less
View File

@ -6,7 +6,7 @@
@badge-font-size: var(--van-font-size-sm);
@badge-font-weight: var(--van-font-weight-bold);
@badge-border-width: var(--van-border-width-base);
@badge-background-color: var(--van-red);
@badge-dot-color: var(--van-red);
@badge-background-color: var(--van-danger-color);
@badge-dot-color: var(--van-danger-color);
@badge-dot-size: 8px;
@badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;

16
src/button/README.md
View File

@ -171,17 +171,17 @@ The component provides the following CSS variables, which can be used to customi
| --van-button-default-background-color | _var(--van-white)_ | - |
| --van-button-default-border-color | _var(--van-border-color)_ | - |
| --van-button-primary-color | _var(--van-white)_ | - |
| --van-button-primary-background-color | _var(--van-blue)_ | - |
| --van-button-primary-border-color | _var(--van-blue)_ | - |
| --van-button-primary-background-color | _var(--van-primary-color)_ | - |
| --van-button-primary-border-color | _var(--van-primary-color)_ | - |
| --van-button-success-color | _var(--van-white)_ | - |
| --van-button-success-background-color | _var(--van-green)_ | - |
| --van-button-success-border-color | _var(--van-green)_ | - |
| --van-button-success-background-color | _var(--van-success-color)_ | - |
| --van-button-success-border-color | _var(--van-success-color)_ | - |
| --van-button-danger-color | _var(--van-white)_ | - |
| --van-button-danger-background-color | _var(--van-red)_ | - |
| --van-button-danger-border-color | _var(--van-red)_ | - |
| --van-button-danger-background-color | _var(--van-danger-color)_ | - |
| --van-button-danger-border-color | _var(--van-danger-color)_ | - |
| --van-button-warning-color | _var(--van-white)_ | - |
| --van-button-warning-background-color | _var(--van-orange)_ | - |
| --van-button-warning-border-color | _var(--van-orange)_ | - |
| --van-button-warning-background-color | _var(--van-warning-color)_ | - |
| --van-button-warning-border-color | _var(--van-warning-color)_ | - |
| --van-button-border-width | _var(--van-border-width-base)_ | - |
| --van-button-border-radius | _var(--van-border-radius-sm)_ | - |
| --van-button-round-border-radius | _var(--van-border-radius-max)_ | - |

12
src/button/README.zh-CN.md
View File

@ -194,14 +194,14 @@ app.use(Button);
| --van-button-default-background-color | _var(--van-white)_ | - |
| --van-button-default-border-color | _var(--van-border-color)_ | - |
| --van-button-primary-color | _var(--van-white)_ | - |
| --van-button-primary-background-color | _var(--van-blue)_ | - |
| --van-button-primary-border-color | _var(--van-blue)_ | - |
| --van-button-primary-background-color | _var(--van-primary-color)_ | - |
| --van-button-primary-border-color | _var(--van-primary-color)_ | - |
| --van-button-success-color | _var(--van-white)_ | - |
| --van-button-success-background-color | _var(--van-green)_ | - |
| --van-button-success-border-color | _var(--van-green)_ | - |
| --van-button-success-background-color | _var(--van-success-color)_ | - |
| --van-button-success-border-color | _var(--van-success-color)_ | - |
| --van-button-danger-color | _var(--van-white)_ | - |
| --van-button-danger-background-color | _var(--van-red)_ | - |
| --van-button-danger-border-color | _var(--van-red)_ | - |
| --van-button-danger-background-color | _var(--van-danger-color)_ | - |
| --van-button-danger-border-color | _var(--van-danger-color)_ | - |
| --van-button-warning-color | _var(--van-white)_ | - |
| --van-button-warning-background-color | _var(--van-organge)_ | - |
| --van-button-warning-border-color | _var(--van-organge)_ | - |

16
src/button/var.less
View File

@ -16,17 +16,17 @@
@button-default-background-color: var(--van-white);
@button-default-border-color: var(--van-border-color);
@button-primary-color: var(--van-white);
@button-primary-background-color: var(--van-blue);
@button-primary-border-color: var(--van-blue);
@button-primary-background-color: var(--van-primary-color);
@button-primary-border-color: var(--van-primary-color);
@button-success-color: var(--van-white);
@button-success-background-color: var(--van-green);
@button-success-border-color: var(--van-green);
@button-success-background-color: var(--van-success-color);
@button-success-border-color: var(--van-success-color);
@button-danger-color: var(--van-white);
@button-danger-background-color: var(--van-red);
@button-danger-border-color: var(--van-red);
@button-danger-background-color: var(--van-danger-color);
@button-danger-border-color: var(--van-danger-color);
@button-warning-color: var(--van-white);
@button-warning-background-color: var(--van-orange);
@button-warning-border-color: var(--van-orange);
@button-warning-background-color: var(--van-warning-color);
@button-warning-border-color: var(--van-warning-color);
@button-border-width: var(--van-border-width-base);
@button-border-radius: var(--van-border-radius-sm);
@button-round-border-radius: var(--van-border-radius-max);

6
src/calendar/README.md
View File

@ -365,14 +365,14 @@ The component provides the following CSS variables, which can be used to customi
| --van-calendar-day-height | _64px_ | - |
| --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
| --van-calendar-range-edge-color | _var(--van-white)_ | - |
| --van-calendar-range-edge-background-color | _var(--van-red)_ | - |
| --van-calendar-range-middle-color | _var(--van-red)_ | - |
| --van-calendar-range-edge-background-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-background-opacity | _0.1_ | - |
| --van-calendar-selected-day-size | _54px_ | - |
| --van-calendar-selected-day-color | _var(--van-white)_ | - |
| --van-calendar-info-font-size | _var(--van-font-size-xs)_ | - |
| --van-calendar-info-line-height | _var(--van-line-height-xs)_ | - |
| --van-calendar-selected-day-background-color | _var(--van-red)_ | - |
| --van-calendar-selected-day-background-color | _var(--van-danger-color)_ | - |
| --van-calendar-day-disabled-color | _var(--van-gary-5)_ | - |
| --van-calendar-confirm-button-height | _36px_ | - |
| --van-calendar-confirm-button-margin | _7px 0_ | - |

6
src/calendar/README.zh-CN.md
View File

@ -371,14 +371,14 @@ export default {
| --van-calendar-day-height | _64px_ | - |
| --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
| --van-calendar-range-edge-color | _var(--van-white)_ | - |
| --van-calendar-range-edge-background-color | _var(--van-red)_ | - |
| --van-calendar-range-middle-color | _var(--van-red)_ | - |
| --van-calendar-range-edge-background-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-background-opacity | _0.1_ | - |
| --van-calendar-selected-day-size | _54px_ | - |
| --van-calendar-selected-day-color | _var(--van-white)_ | - |
| --van-calendar-info-font-size | _var(--van-font-size-xs)_ | - |
| --van-calendar-info-line-height | _var(--van-line-height-xs)_ | - |
| --van-calendar-selected-day-background-color | _var(--van-red)_ | - |
| --van-calendar-selected-day-background-color | _var(--van-danger-color)_ | - |
| --van-calendar-day-disabled-color | _var(--van-gary-5)_ | - |
| --van-calendar-confirm-button-height | _36px_ | - |
| --van-calendar-confirm-button-margin | _7px 0_ | - |

6
src/calendar/var.less
View File

@ -14,14 +14,14 @@
@calendar-day-height: 64px;
@calendar-day-font-size: var(--van-font-size-lg);
@calendar-range-edge-color: var(--van-white);
@calendar-range-edge-background-color: var(--van-red);
@calendar-range-middle-color: var(--van-red);
@calendar-range-edge-background-color: var(--van-danger-color);
@calendar-range-middle-color: var(--van-danger-color);
@calendar-range-middle-background-opacity: 0.1;
@calendar-selected-day-size: 54px;
@calendar-selected-day-color: var(--van-white);
@calendar-info-font-size: var(--van-font-size-xs);
@calendar-info-line-height: var(--van-line-height-xs);
@calendar-selected-day-background-color: var(--van-red);
@calendar-selected-day-background-color: var(--van-danger-color);
@calendar-day-disabled-color: var(--van-gray-5);
@calendar-confirm-button-height: 36px;
@calendar-confirm-button-margin: 7px 0;

2
src/cascader/README.md
View File

@ -243,7 +243,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-cascader-close-icon-active-color | _var(--van-gary-6)_ | - |
| --van-cascader-selected-icon-size | _18px_ | - |
| --van-cascader-tabs-height | _48px_ | - |
| --van-cascader-active-color | _var(--van-red)_ | - |
| --van-cascader-active-color | _var(--van-danger-color)_ | - |
| --van-cascader-options-height | _384px_ | - |
| --van-cascader-tab-color | _var(--van-text-color)_ | - |
| --van-cascader-unselected-tab-color | _var(--van-gary-6)_ | - |

2
src/cascader/README.zh-CN.md
View File

@ -253,7 +253,7 @@ export default {
| --van-cascader-close-icon-active-color | _var(--van-gary-6)_ | - |
| --van-cascader-selected-icon-size | _18px_ | - |
| --van-cascader-tabs-height | _48px_ | - |
| --van-cascader-active-color | _var(--van-red)_ | - |
| --van-cascader-active-color | _var(--van-danger-color)_ | - |
| --van-cascader-options-height | _384px_ | - |
| --van-cascader-tab-color | _var(--van-text-color)_ | - |
| --van-cascader-unselected-tab-color | _var(--van-gary-6)_ | - |

2
src/cascader/var.less
View File

@ -9,7 +9,7 @@
@cascader-close-icon-active-color: var(--van-gray-6);
@cascader-selected-icon-size: 18px;
@cascader-tabs-height: 48px;
@cascader-active-color: var(--van-red);
@cascader-active-color: var(--van-danger-color);
@cascader-options-height: 384px;
@cascader-tab-color: var(--van-text-color);
@cascader-unselected-tab-color: var(--van-gray-6);

2
src/cell/README.md
View File

@ -196,7 +196,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-cell-background-color | _var(--van-white)_ | - |
| --van-cell-border-color | _var(--van-border-color)_ | - |
| --van-cell-active-color | _var(--van-active-color)_ | - |
| --van-cell-required-color | _var(--van-red)_ | - |
| --van-cell-required-color | _var(--van-danger-color)_ | - |
| --van-cell-label-color | _var(--van-gary-6)_ | - |
| --van-cell-label-font-size | _var(--van-font-size-sm)_ | - |
| --van-cell-label-line-height | _var(--van-line-height-sm)_ | - |

2
src/cell/README.zh-CN.md
View File

@ -199,7 +199,7 @@ app.use(CellGroup);
| --van-cell-background-color | _var(--van-white)_ | - |
| --van-cell-border-color | _var(--van-border-color)_ | - |
| --van-cell-active-color | _var(--van-active-color)_ | - |
| --van-cell-required-color | _var(--van-red)_ | - |
| --van-cell-required-color | _var(--van-danger-color)_ | - |
| --van-cell-label-color | _var(--van-gary-6)_ | - |
| --van-cell-label-font-size | _var(--van-font-size-sm)_ | - |
| --van-cell-label-line-height | _var(--van-line-height-sm)_ | - |

2
src/cell/var.less
View File

@ -8,7 +8,7 @@
@cell-background-color: var(--van-white);
@cell-border-color: var(--van-border-color);
@cell-active-color: var(--van-active-color);
@cell-required-color: var(--van-red);
@cell-required-color: var(--van-danger-color);
@cell-label-color: var(--van-gray-6);
@cell-label-font-size: var(--van-font-size-sm);
@cell-label-line-height: var(--van-line-height-sm);

2
src/checkbox/README.md
View File

@ -338,7 +338,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-checkbox-transition-duration | _var(--van-animation-duration-fast)_ | - |
| --van-checkbox-label-margin | _var(--van-padding-xs)_ | - |
| --van-checkbox-label-color | _var(--van-text-color)_ | - |
| --van-checkbox-checked-icon-color | _var(--van-blue)_ | - |
| --van-checkbox-checked-icon-color | _var(--van-primary-color)_ | - |
| --van-checkbox-disabled-icon-color | _var(--van-gary-5)_ | - |
| --van-checkbox-disabled-label-color | _var(--van-gary-5)_ | - |
| --van-checkbox-disabled-background-color | _var(--van-border-color)_ | - |

2
src/checkbox/README.zh-CN.md
View File

@ -356,7 +356,7 @@ checkboxGroup.toggleAll({
| --van-checkbox-transition-duration | _var(--van-animation-duration-fast)_ | - |
| --van-checkbox-label-margin | _var(--van-padding-xs)_ | - |
| --van-checkbox-label-color | _var(--van-text-color)_ | - |
| --van-checkbox-checked-icon-color | _var(--van-blue)_ | - |
| --van-checkbox-checked-icon-color | _var(--van-primary-color)_ | - |
| --van-checkbox-disabled-icon-color | _var(--van-gary-5)_ | - |
| --van-checkbox-disabled-label-color | _var(--van-gary-5)_ | - |
| --van-checkbox-disabled-background-color | _var(--van-border-color)_ | - |

2
src/checkbox/var.less
View File

@ -5,7 +5,7 @@
@checkbox-transition-duration: var(--van-animation-duration-fast);
@checkbox-label-margin: var(--van-padding-xs);
@checkbox-label-color: var(--van-text-color);
@checkbox-checked-icon-color: var(--van-blue);
@checkbox-checked-icon-color: var(--van-primary-color);
@checkbox-disabled-icon-color: var(--van-gray-5);
@checkbox-disabled-label-color: var(--van-gray-5);
@checkbox-disabled-background-color: var(--van-border-color);

2
src/circle/README.md
View File

@ -150,7 +150,7 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| ----------------------------- | ----------------------------- | ----------- |
| --van-circle-size | _100px_ | - |
| --van-circle-color | _var(--van-blue)_ | - |
| --van-circle-color | _var(--van-primary-color)_ | - |
| --van-circle-layer-color | _var(--van-white)_ | - |
| --van-circle-text-color | _var(--van-text-color)_ | - |
| --van-circle-text-font-weight | _var(--van-font-weight-bold)_ | - |

2
src/circle/README.zh-CN.md
View File

@ -162,7 +162,7 @@ export default {
| 名称 | 默认值 | 描述 |
| ----------------------------- | ----------------------------- | ---- |
| --van-circle-size | _100px_ | - |
| --van-circle-color | _var(--van-blue)_ | - |
| --van-circle-color | _var(--van-primary-color)_ | - |
| --van-circle-layer-color | _var(--van-white)_ | - |
| --van-circle-text-color | _var(--van-text-color)_ | - |
| --van-circle-text-font-weight | _var(--van-font-weight-bold)_ | - |

2
src/circle/var.less
View File

@ -1,7 +1,7 @@
@import '../style/var.less';
@circle-size: 100px;
@circle-color: var(--van-blue);
@circle-color: var(--van-primary-color);
@circle-layer-color: var(--van-white);
@circle-text-color: var(--van-text-color);
@circle-text-font-weight: var(--van-font-weight-bold);

6
src/config-provider/README.md
View File

@ -40,7 +40,7 @@ The default values of these variables are defined on the `root` node:
--van-white: #fff;
--van-blue: #1989fa;
--van-button-primary-color: var(--van-white);
--van-button-primary-background-color: var(--van-blue);
--van-button-primary-background-color: var(--van-primary-color);
}
```
@ -140,6 +140,10 @@ There are some **Basic Variables** below, for component CSS Variables, please re
--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
// Component Colors
--van-primary-color: var(--van-blue);
--van-success-color: var(--van-green);
--van-danger-color: var(--van-red);
--van-warning-color: var(--van-orange);
--van-text-color: var(--van-gray-8);
--van-active-color: var(--van-gray-2);
--van-active-opacity: 0.7;

6
src/config-provider/README.zh-CN.md
View File

@ -40,7 +40,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
--van-white: #fff;
--van-blue: #1989fa;
--van-button-primary-color: var(--van-white);
--van-button-primary-background-color: var(--van-blue);
--van-button-primary-background-color: var(--van-primary-color);
}
```
@ -140,6 +140,10 @@ export default {
--van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
// Component Colors
--van-primary-color: var(--van-blue);
--van-success-color: var(--van-green);
--van-danger-color: var(--van-red);
--van-warning-color: var(--van-orange);
--van-text-color: var(--van-gray-8);
--van-active-color: var(--van-gray-2);
--van-active-opacity: 0.7;

2
src/contact-card/README.md
View File

@ -104,5 +104,5 @@ The component provides the following CSS variables, which can be used to customi
| --- | --- | --- |
| --van-contact-card-padding | _var(--van-padding-md)_ | - |
| --van-contact-card-add-icon-size | _40px_ | - |
| --van-contact-card-add-icon-color | _var(--van-blue)_ | - |
| --van-contact-card-add-icon-color | _var(--van-primary-color)_ | - |
| --van-contact-card-value-line-height | _var(--van-line-height-md)_ | - |

2
src/contact-card/README.zh-CN.md
View File

@ -99,5 +99,5 @@ export default {
| ------------------------------------ | --------------------------- | ---- |
| --van-contact-card-padding | _var(--van-padding-md)_ | - |
| --van-contact-card-add-icon-size | _40px_ | - |
| --van-contact-card-add-icon-color | _var(--van-blue)_ | - |
| --van-contact-card-add-icon-color | _var(--van-primary-color)_ | - |
| --van-contact-card-value-line-height | _var(--van-line-height-md)_ | - |

4
src/contact-card/index.less
View File

@ -38,8 +38,8 @@
#ff6c6c 20%,
transparent 0,
transparent 25%,
var(--van-blue) 0,
var(--van-blue) 45%,
var(--van-primary-color) 0,
var(--van-primary-color) 45%,
transparent 0,
transparent 50%
);

2
src/contact-card/var.less
View File

@ -2,5 +2,5 @@
@contact-card-padding: var(--van-padding-md);
@contact-card-add-icon-size: 40px;
@contact-card-add-icon-color: var(--van-blue);
@contact-card-add-icon-color: var(--van-primary-color);
@contact-card-value-line-height: var(--van-line-height-md);

2
src/contact-list/README.md
View File

@ -105,4 +105,4 @@ The component provides the following CSS variables, which can be used to customi
| --van-contact-list-edit-icon-size | _16px_ | - |
| --van-contact-list-add-button-z-index | _999_ | - |
| --van-contact-list-item-padding | _var(--van-padding-md)_ | - |
| --van-contact-list-item-radio-icon-color | _var(--van-red)_ | - |
| --van-contact-list-item-radio-icon-color | _var(--van-danger-color)_ | - |

12
src/contact-list/README.zh-CN.md
View File

@ -100,9 +100,9 @@ export default {
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ---------------------------------------- | ----------------------- | ---- |
| --van-contact-list-edit-icon-size | _16px_ | - |
| --van-contact-list-add-button-z-index | _999_ | - |
| --van-contact-list-item-padding | _var(--van-padding-md)_ | - |
| --van-contact-list-item-radio-icon-color | _var(--van-red)_ | - |
| 名称 | 默认值 | 描述 |
| ---------------------------------------- | ------------------------- | ---- |
| --van-contact-list-edit-icon-size | _16px_ | - |
| --van-contact-list-add-button-z-index | _999_ | - |
| --van-contact-list-item-padding | _var(--van-padding-md)_ | - |
| --van-contact-list-item-radio-icon-color | _var(--van-danger-color)_ | - |

2
src/contact-list/var.less
View File

@ -3,4 +3,4 @@
@contact-list-edit-icon-size: 16px;
@contact-list-add-button-z-index: 999;
@contact-list-item-padding: var(--van-padding-md);
@contact-list-item-radio-icon-color: var(--van-red);
@contact-list-item-radio-icon-color: var(--van-danger-color);

4
src/coupon-list/README.md
View File

@ -163,14 +163,14 @@ The component provides the following CSS variables, which can be used to customi
| --van-coupon-border-radius | _var(--van-border-radius-lg)_ | - |
| --van-coupon-box-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - |
| --van-coupon-head-width | _96px_ | - |
| --van-coupon-amount-color | _var(--van-red)_ | - |
| --van-coupon-amount-color | _var(--van-danger-color)_ | - |
| --van-coupon-amount-font-size | _30px_ | - |
| --van-coupon-currency-font-size | _40%_ | - |
| --van-coupon-name-font-size | _var(--van-font-size-md)_ | - |
| --van-coupon-disabled-text-color | _var(--van-gary-6)_ | - |
| --van-coupon-description-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
| --van-coupon-description-border-color | _var(--van-border-color)_ | - |
| --van-coupon-corner-checkbox-icon-color | _var(--van-red)_ | - |
| --van-coupon-corner-checkbox-icon-color | _var(--van-danger-color)_ | - |
| --van-coupon-list-background-color | _var(--van-background-color)_ | - |
| --van-coupon-list-field-padding | _5px 0 5px var(--van-padding-md)_ | - |
| --van-coupon-list-exchange-button-height | _32px_ | - |

4
src/coupon-list/README.zh-CN.md
View File

@ -165,14 +165,14 @@ export default {
| --van-coupon-border-radius | _var(--van-border-radius-lg)_ | - |
| --van-coupon-box-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - |
| --van-coupon-head-width | _96px_ | - |
| --van-coupon-amount-color | _var(--van-red)_ | - |
| --van-coupon-amount-color | _var(--van-danger-color)_ | - |
| --van-coupon-amount-font-size | _30px_ | - |
| --van-coupon-currency-font-size | _40%_ | - |
| --van-coupon-name-font-size | _var(--van-font-size-md)_ | - |
| --van-coupon-disabled-text-color | _var(--van-gary-6)_ | - |
| --van-coupon-description-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
| --van-coupon-description-border-color | _var(--van-border-color)_ | - |
| --van-coupon-corner-checkbox-icon-color | _var(--van-red)_ | - |
| --van-coupon-corner-checkbox-icon-color | _var(--van-danger-color)_ | - |
| --van-coupon-list-background-color | _var(--van-background-color)_ | - |
| --van-coupon-list-field-padding | _5px 0 5px var(--van-padding-md)_ | - |
| --van-coupon-list-exchange-button-height | _32px_ | - |

4
src/coupon/var.less
View File

@ -8,11 +8,11 @@
@coupon-border-radius: var(--van-border-radius-lg);
@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
@coupon-head-width: 96px;
@coupon-amount-color: var(--van-red);
@coupon-amount-color: var(--van-danger-color);
@coupon-amount-font-size: 30px;
@coupon-currency-font-size: 40%;
@coupon-name-font-size: var(--van-font-size-md);
@coupon-disabled-text-color: var(--van-gray-6);
@coupon-description-padding: var(--van-padding-xs) var(--van-padding-md);
@coupon-description-border-color: var(--van-border-color);
@coupon-corner-checkbox-icon-color: var(--van-red);
@coupon-corner-checkbox-icon-color: var(--van-danger-color);

2
src/dialog/README.md
View File

@ -238,4 +238,4 @@ The component provides the following CSS variables, which can be used to customi
| --van-dialog-has-title-message-padding-top | _var(--van-padding-xs)_ | - |
| --van-dialog-button-height | _48px_ | - |
| --van-dialog-round-button-height | _36px_ | - |
| --van-dialog-confirm-button-text-color | _var(--van-red)_ | - |
| --van-dialog-confirm-button-text-color | _var(--van-danger-color)_ | - |

2
src/dialog/README.zh-CN.md
View File

@ -273,7 +273,7 @@ export default {
| --van-dialog-has-title-message-padding-top | _var(--van-padding-xs)_ | - |
| --van-dialog-button-height | _48px_ | - |
| --van-dialog-round-button-height | _36px_ | - |
| --van-dialog-confirm-button-text-color | _var(--van-red)_ | - |
| --van-dialog-confirm-button-text-color | _var(--van-danger-color)_ | - |
## 常见问题

2
src/dialog/var.less
View File

@ -18,4 +18,4 @@
@dialog-has-title-message-padding-top: var(--van-padding-xs);
@dialog-button-height: 48px;
@dialog-round-button-height: 36px;
@dialog-confirm-button-text-color: var(--van-red);
@dialog-confirm-button-text-color: var(--van-danger-color);

4
src/dropdown-menu/README.md
View File

@ -211,10 +211,10 @@ The component provides the following CSS variables, which can be used to customi
| --van-dropdown-menu-box-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
| --van-dropdown-menu-title-font-size | _15px_ | - |
| --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - |
| --van-dropdown-menu-title-active-text-color | _var(--van-red)_ | - |
| --van-dropdown-menu-title-active-text-color | _var(--van-danger-color)_ | - |
| --van-dropdown-menu-title-disabled-text-color | _var(--van-gary-6)_ | - |
| --van-dropdown-menu-title-padding | _0 var(--van-padding-xs)_ | - |
| --van-dropdown-menu-title-line-height | _var(--van-line-height-lg)_ | - |
| --van-dropdown-menu-option-active-color | _var(--van-red)_ | - |
| --van-dropdown-menu-option-active-color | _var(--van-danger-color)_ | - |
| --van-dropdown-menu-content-max-height | _80%_ | - |
| --van-dropdown-item-z-index | _10_ | - |

4
src/dropdown-menu/README.zh-CN.md
View File

@ -215,11 +215,11 @@ export default {
| --van-dropdown-menu-box-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
| --van-dropdown-menu-title-font-size | _15px_ | - |
| --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - |
| --van-dropdown-menu-title-active-text-color | _var(--van-red)_ | - |
| --van-dropdown-menu-title-active-text-color | _var(--van-danger-color)_ | - |
| --van-dropdown-menu-title-disabled-text-color | _var(--van-gary-6)_ | - |
| --van-dropdown-menu-title-padding | _0 var(--van-padding-xs)_ | - |
| --van-dropdown-menu-title-line-height | _var(--van-line-height-lg)_ | - |
| --van-dropdown-menu-option-active-color | _var(--van-red)_ | - |
| --van-dropdown-menu-option-active-color | _var(--van-danger-color)_ | - |
| --van-dropdown-menu-content-max-height | _80%_ | - |
| --van-dropdown-item-z-index | _10_ | - |

4
src/dropdown-menu/var.less
View File

@ -5,9 +5,9 @@
@dropdown-menu-box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
@dropdown-menu-title-font-size: 15px;
@dropdown-menu-title-text-color: var(--van-text-color);
@dropdown-menu-title-active-text-color: var(--van-red);
@dropdown-menu-title-active-text-color: var(--van-danger-color);
@dropdown-menu-title-disabled-text-color: var(--van-gray-6);
@dropdown-menu-title-padding: 0 var(--van-padding-xs);
@dropdown-menu-title-line-height: var(--van-line-height-lg);
@dropdown-menu-option-active-color: var(--van-red);
@dropdown-menu-option-active-color: var(--van-danger-color);
@dropdown-menu-content-max-height: 80%;

4
src/field/README.md
View File

@ -319,14 +319,14 @@ The component provides the following CSS variables, which can be used to customi
| --van-field-label-color | _var(--van-gary-7)_ | - |
| --van-field-label-margin-right | _var(--van-padding-sm)_ | - |
| --van-field-input-text-color | _var(--van-text-color)_ | - |
| --van-field-input-error-text-color | _var(--van-red)_ | - |
| --van-field-input-error-text-color | _var(--van-danger-color)_ | - |
| --van-field-input-disabled-text-color | _var(--van-gary-5)_ | - |
| --van-field-placeholder-text-color | _var(--van-gary-5)_ | - |
| --van-field-icon-size | _16px_ | - |
| --van-field-clear-icon-size | _16px_ | - |
| --van-field-clear-icon-color | _var(--van-gary-5)_ | - |
| --van-field-right-icon-color | _var(--van-gary-6)_ | - |
| --van-field-error-message-color | _var(--van-red)_ | - |
| --van-field-error-message-color | _var(--van-danger-color)_ | - |
| --van-field-error-message-text-color | _12px_ | - |
| --van-field-text-area-min-height | _60px_ | - |
| --van-field-word-limit-color | _var(--van-gary-7)_ | - |

4
src/field/README.zh-CN.md
View File

@ -336,14 +336,14 @@ export default {
| --van-field-label-color | _var(--van-gary-7)_ | - |
| --van-field-label-margin-right | _var(--van-padding-sm)_ | - |
| --van-field-input-text-color | _var(--van-text-color)_ | - |
| --van-field-input-error-text-color | _var(--van-red)_ | - |
| --van-field-input-error-text-color | _var(--van-danger-color)_ | - |
| --van-field-input-disabled-text-color | _var(--van-gary-5)_ | - |
| --van-field-placeholder-text-color | _var(--van-gary-5)_ | - |
| --van-field-icon-size | _16px_ | - |
| --van-field-clear-icon-size | _16px_ | - |
| --van-field-clear-icon-color | _var(--van-gary-5)_ | - |
| --van-field-right-icon-color | _var(--van-gary-6)_ | - |
| --van-field-error-message-color | _var(--van-red)_ | - |
| --van-field-error-message-color | _var(--van-danger-color)_ | - |
| --van-field-error-message-text-color | _12px_ | - |
| --van-field-text-area-min-height | _60px_ | - |
| --van-field-word-limit-color | _var(--van-gary-7)_ | - |

4
src/field/var.less
View File

@ -4,14 +4,14 @@
@field-label-color: var(--van-gray-7);
@field-label-margin-right: var(--van-padding-sm);
@field-input-text-color: var(--van-text-color);
@field-input-error-text-color: var(--van-red);
@field-input-error-text-color: var(--van-danger-color);
@field-input-disabled-text-color: var(--van-gray-5);
@field-placeholder-text-color: var(--van-gray-5);
@field-icon-size: 16px;
@field-clear-icon-size: 16px;
@field-clear-icon-color: var(--van-gray-5);
@field-right-icon-color: var(--van-gray-6);
@field-error-message-color: var(--van-red);
@field-error-message-color: var(--van-danger-color);
@field-error-message-text-color: 12px;
@field-text-area-min-height: 60px;
@field-word-limit-color: var(--van-gray-7);

2
src/index-anchor/var.less
View File

@ -7,5 +7,5 @@
@index-anchor-font-size: var(--van-font-size-md);
@index-anchor-line-height: 32px;
@index-anchor-background-color: transparent;
@index-anchor-sticky-text-color: var(--van-red);
@index-anchor-sticky-text-color: var(--van-danger-color);
@index-anchor-sticky-background-color: var(--van-white);

4
src/index-bar/README.md
View File

@ -114,7 +114,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-index-bar-sidebar-z-index | _2_ | - |
| --van-index-bar-index-font-size | _var(--van-font-size-xs)_ | - |
| --van-index-bar-index-line-height | _var(--van-line-height-xs)_ | - |
| --van-index-bar-index-active-color | _var(--van-red)_ | - |
| --van-index-bar-index-active-color | _var(--van-danger-color)_ | - |
| --van-index-anchor-z-index | _1_ | - |
| --van-index-anchor-padding | _0 var(--van-padding-md)_ | - |
| --van-index-anchor-text-color | _var(--van-text-color)_ | - |
@ -122,5 +122,5 @@ The component provides the following CSS variables, which can be used to customi
| --van-index-anchor-font-size | _var(--van-font-size-md)_ | - |
| --van-index-anchor-line-height | _32px_ | - |
| --van-index-anchor-background-color | _transparent_ | - |
| --van-index-anchor-sticky-text-color | _var(--van-red)_ | - |
| --van-index-anchor-sticky-text-color | _var(--van-danger-color)_ | - |
| --van-index-anchor-sticky-background-color | _var(--van-white)_ | - |

4
src/index-bar/README.zh-CN.md
View File

@ -126,7 +126,7 @@ export default {
| --van-index-bar-sidebar-z-index | _2_ | - |
| --van-index-bar-index-font-size | _var(--van-font-size-xs)_ | - |
| --van-index-bar-index-line-height | _var(--van-line-height-xs)_ | - |
| --van-index-bar-index-active-color | _var(--van-red)_ | - |
| --van-index-bar-index-active-color | _var(--van-danger-color)_ | - |
| --van-index-anchor-z-index | _1_ | - |
| --van-index-anchor-padding | _0 var(--van-padding-md)_ | - |
| --van-index-anchor-text-color | _var(--van-text-color)_ | - |
@ -134,5 +134,5 @@ export default {
| --van-index-anchor-font-size | _var(--van-font-size-md)_ | - |
| --van-index-anchor-line-height | _32px_ | - |
| --van-index-anchor-background-color | _transparent_ | - |
| --van-index-anchor-sticky-text-color | _var(--van-red)_ | - |
| --van-index-anchor-sticky-text-color | _var(--van-danger-color)_ | - |
| --van-index-anchor-sticky-background-color | _var(--van-white)_ | - |

2
src/index-bar/var.less
View File

@ -3,4 +3,4 @@
@index-bar-sidebar-z-index: 2;
@index-bar-index-font-size: var(--van-font-size-xs);
@index-bar-index-line-height: var(--van-line-height-xs);
@index-bar-index-active-color: var(--van-red);
@index-bar-index-active-color: var(--van-danger-color);

20
src/nav-bar/README.md
View File

@ -91,13 +91,13 @@ export default {
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 |
| ------------------------------ | ------------------------- | ----------- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background-color | _var(--van-white)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-blue)_ | - |
| --van-nav-bar-text-color | _var(--van-blue)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |
| Name | Default Value | Description |
| ------------------------------ | -------------------------- | ----------- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background-color | _var(--van-white)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-text-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |

20
src/nav-bar/README.zh-CN.md
View File

@ -93,13 +93,13 @@ export default {
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------ | ------------------------- | ---- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background-color | _var(--van-white)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-blue)_ | - |
| --van-nav-bar-text-color | _var(--van-blue)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------ | -------------------------- | ---- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background-color | _var(--van-white)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-text-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |

4
src/nav-bar/var.less
View File

@ -3,8 +3,8 @@
@nav-bar-height: 46px;
@nav-bar-background-color: var(--van-white);
@nav-bar-arrow-size: 16px;
@nav-bar-icon-color: var(--van-blue);
@nav-bar-text-color: var(--van-blue);
@nav-bar-icon-color: var(--van-primary-color);
@nav-bar-text-color: var(--van-primary-color);
@nav-bar-title-font-size: var(--van-font-size-lg);
@nav-bar-title-text-color: var(--van-text-color);
@nav-bar-z-index: 1;

8
src/notify/README.md
View File

@ -128,7 +128,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-notify-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
| --van-notify-font-size | _var(--van-font-size-md)_ | - |
| --van-notify-line-height | _var(--van-line-height-md)_ | - |
| --van-notify-primary-background-color | _var(--van-blue)_ | - |
| --van-notify-success-background-color | _var(--van-green)_ | - |
| --van-notify-danger-background-color | _var(--van-red)_ | - |
| --van-notify-warning-background-color | _var(--van-orange)_ | - |
| --van-notify-primary-background-color | _var(--van-primary-color)_ | - |
| --van-notify-success-background-color | _var(--van-success-color)_ | - |
| --van-notify-danger-background-color | _var(--van-danger-color)_ | - |
| --van-notify-warning-background-color | _var(--van-warning-color)_ | - |

8
src/notify/README.zh-CN.md
View File

@ -161,7 +161,7 @@ export default {
| --van-notify-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
| --van-notify-font-size | _var(--van-font-size-md)_ | - |
| --van-notify-line-height | _var(--van-line-height-md)_ | - |
| --van-notify-primary-background-color | _var(--van-blue)_ | - |
| --van-notify-success-background-color | _var(--van-green)_ | - |
| --van-notify-danger-background-color | _var(--van-red)_ | - |
| --van-notify-warning-background-color | _var(--van-orange)_ | - |
| --van-notify-primary-background-color | _var(--van-primary-color)_ | - |
| --van-notify-success-background-color | _var(--van-success-color)_ | - |
| --van-notify-danger-background-color | _var(--van-danger-color)_ | - |
| --van-notify-warning-background-color | _var(--van-warning-color)_ | - |

8
src/notify/var.less
View File

@ -4,7 +4,7 @@
@notify-padding: var(--van-padding-xs) var(--van-padding-md);
@notify-font-size: var(--van-font-size-md);
@notify-line-height: var(--van-line-height-md);
@notify-primary-background-color: var(--van-blue);
@notify-success-background-color: var(--van-green);
@notify-danger-background-color: var(--van-red);
@notify-warning-background-color: var(--van-orange);
@notify-primary-background-color: var(--van-primary-color);
@notify-success-background-color: var(--van-success-color);
@notify-danger-background-color: var(--van-danger-color);
@notify-warning-background-color: var(--van-warning-color);

2
src/number-keyboard/README.md
View File

@ -222,5 +222,5 @@ The component provides the following CSS variables, which can be used to customi
| --van-number-keyboard-close-color | _var(--van-text-link-color)_ | - |
| --van-number-keyboard-close-font-size | _var(--van-font-size-md)_ | - |
| --van-number-keyboard-button-text-color | _var(--van-white)_ | - |
| --van-number-keyboard-button-background-color | _var(--van-blue)_ | - |
| --van-number-keyboard-button-background-color | _var(--van-primary-color)_ | - |
| --van-number-keyboard-z-index | _100_ | - |

2
src/number-keyboard/README.zh-CN.md
View File

@ -229,7 +229,7 @@ export default {
| --van-number-keyboard-close-color | _var(--van-text-link-color)_ | - |
| --van-number-keyboard-close-font-size | _var(--van-font-size-md)_ | - |
| --van-number-keyboard-button-text-color | _var(--van-white)_ | - |
| --van-number-keyboard-button-background-color | _var(--van-blue)_ | - |
| --van-number-keyboard-button-background-color | _var(--van-primary-color)_ | - |
| --van-number-keyboard-z-index | _100_ | - |
## 常见问题

2
src/number-keyboard/var.less
View File

@ -12,5 +12,5 @@
@number-keyboard-close-color: var(--van-text-link-color);
@number-keyboard-close-font-size: var(--van-font-size-md);
@number-keyboard-button-text-color: var(--van-white);
@number-keyboard-button-background-color: var(--van-blue);
@number-keyboard-button-background-color: var(--van-primary-color);
@number-keyboard-z-index: 100;

2
src/pagination/README.md
View File

@ -105,7 +105,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-pagination-height | _40px_ | - |
| --van-pagination-font-size | _var(--van-font-size-md)_ | - |
| --van-pagination-item-width | _36px_ | - |
| --van-pagination-item-default-color | _var(--van-blue)_ | - |
| --van-pagination-item-default-color | _var(--van-primary-color)_ | - |
| --van-pagination-item-disabled-color | _var(--van-gary-7)_ | - |
| --van-pagination-item-disabled-background-color | _var(--van-background-color)_ | - |
| --van-pagination-background-color | _var(--van-white)_ | - |

2
src/pagination/README.zh-CN.md
View File

@ -113,7 +113,7 @@ export default {
| --van-pagination-height | _40px_ | - |
| --van-pagination-font-size | _var(--van-font-size-md)_ | - |
| --van-pagination-item-width | _36px_ | - |
| --van-pagination-item-default-color | _var(--van-blue)_ | - |
| --van-pagination-item-default-color | _var(--van-primary-color)_ | - |
| --van-pagination-item-disabled-color | _var(--van-gary-7)_ | - |
| --van-pagination-item-disabled-background-color | _var(--van-background-color)_ | - |
| --van-pagination-background-color | _var(--van-white)_ | - |

2
src/pagination/var.less
View File

@ -3,7 +3,7 @@
@pagination-height: 40px;
@pagination-font-size: var(--van-font-size-md);
@pagination-item-width: 36px;
@pagination-item-default-color: var(--van-blue);
@pagination-item-default-color: var(--van-primary-color);
@pagination-item-disabled-color: var(--van-gray-7);
@pagination-item-disabled-background-color: var(--van-background-color);
@pagination-background-color: var(--van-white);

2
src/password-input/README.md
View File

@ -161,7 +161,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-password-input-background-color | _var(--van-white)_ | - |
| --van-password-input-info-color | _var(--van-gary-6)_ | - |
| --van-password-input-info-font-size | _var(--van-font-size-md)_ | - |
| --van-password-input-error-info-color | _var(--van-red)_ | - |
| --van-password-input-error-info-color | _var(--van-danger-color)_ | - |
| --van-password-input-dot-size | _10px_ | - |
| --van-password-input-dot-color | _var(--van-black)_ | - |
| --van-password-input-cursor-color | _var(--van-text-color)_ | - |

2
src/password-input/README.zh-CN.md
View File

@ -171,7 +171,7 @@ export default {
| --van-password-input-background-color | _var(--van-white)_ | - |
| --van-password-input-info-color | _var(--van-gary-6)_ | - |
| --van-password-input-info-font-size | _var(--van-font-size-md)_ | - |
| --van-password-input-error-info-color | _var(--van-red)_ | - |
| --van-password-input-error-info-color | _var(--van-danger-color)_ | - |
| --van-password-input-dot-size | _10px_ | - |
| --van-password-input-dot-color | _var(--van-black)_ | - |
| --van-password-input-cursor-color | _var(--van-text-color)_ | - |

2
src/password-input/var.less
View File

@ -7,7 +7,7 @@
@password-input-background-color: var(--van-white);
@password-input-info-color: var(--van-gray-6);
@password-input-info-font-size: var(--van-font-size-md);
@password-input-error-info-color: var(--van-red);
@password-input-error-info-color: var(--van-danger-color);
@password-input-dot-size: 10px;
@password-input-dot-color: var(--van-black);
@password-input-cursor-color: var(--van-text-color);

2
src/picker/README.md
View File

@ -400,5 +400,5 @@ The component provides the following CSS variables, which can be used to customi
| --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |
| --van-picker-option-text-color | _var(--van-black)_ | - |
| --van-picker-option-disabled-opacity | _0.3_ | - |
| --van-picker-loading-icon-color | _var(--van-blue)_ | - |
| --van-picker-loading-icon-color | _var(--van-primary-color)_ | - |
| --van-picker-loading-mask-color | _rgba(255, 255, 255, 0.9)_ | - |

2
src/picker/README.zh-CN.md
View File

@ -425,7 +425,7 @@ export default {
| --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |
| --van-picker-option-text-color | _var(--van-black)_ | - |
| --van-picker-option-disabled-opacity | _0.3_ | - |
| --van-picker-loading-icon-color | _var(--van-blue)_ | - |
| --van-picker-loading-icon-color | _var(--van-primary-color)_ | - |
| --van-picker-loading-mask-color | _rgba(255, 255, 255, 0.9)_ | - |
## 常见问题

2
src/picker/var.less
View File

@ -11,5 +11,5 @@
@picker-option-font-size: var(--van-font-size-lg);
@picker-option-text-color: var(--van-black);
@picker-option-disabled-opacity: 0.3;
@picker-loading-icon-color: var(--van-blue);
@picker-loading-icon-color: var(--van-primary-color);
@picker-loading-mask-color: rgba(255, 255, 255, 0.9);

4
src/progress/README.md
View File

@ -84,10 +84,10 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-progress-height | _4px_ | - |
| --van-progress-color | _var(--van-blue)_ | - |
| --van-progress-color | _var(--van-primary-color)_ | - |
| --van-progress-background-color | _var(--van-gary-3)_ | - |
| --van-progress-pivot-padding | _0 5px_ | - |
| --van-progress-pivot-text-color | _var(--van-white)_ | - |
| --van-progress-pivot-font-size | _var(--van-font-size-xs)_ | - |
| --van-progress-pivot-line-height | _1.6_ | - |
| --van-progress-pivot-background-color | _var(--van-blue)_ | - |
| --van-progress-pivot-background-color | _var(--van-primary-color)_ | - |

20
src/progress/README.zh-CN.md
View File

@ -85,16 +85,16 @@ app.use(Progress);
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------------- | ------------------------- | ---- |
| --van-progress-height | _4px_ | - |
| --van-progress-color | _var(--van-blue)_ | - |
| --van-progress-background-color | _var(--van-gary-3)_ | - |
| --van-progress-pivot-padding | _0 5px_ | - |
| --van-progress-pivot-text-color | _var(--van-white)_ | - |
| --van-progress-pivot-font-size | _var(--van-font-size-xs)_ | - |
| --van-progress-pivot-line-height | _1.6_ | - |
| --van-progress-pivot-background-color | _var(--van-blue)_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | -------------------------- | ---- |
| --van-progress-height | _4px_ | - |
| --van-progress-color | _var(--van-primary-color)_ | - |
| --van-progress-background-color | _var(--van-gary-3)_ | - |
| --van-progress-pivot-padding | _0 5px_ | - |
| --van-progress-pivot-text-color | _var(--van-white)_ | - |
| --van-progress-pivot-font-size | _var(--van-font-size-xs)_ | - |
| --van-progress-pivot-line-height | _1.6_ | - |
| --van-progress-pivot-background-color | _var(--van-primary-color)_ | - |
## 常见问题

4
src/progress/var.less
View File

@ -1,10 +1,10 @@
@import '../style/var.less';
@progress-height: 4px;
@progress-color: var(--van-blue);
@progress-color: var(--van-primary-color);
@progress-background-color: var(--van-gray-3);
@progress-pivot-padding: 0 5px;
@progress-pivot-text-color: var(--van-white);
@progress-pivot-font-size: var(--van-font-size-xs);
@progress-pivot-line-height: 1.6;
@progress-pivot-background-color: var(--van-blue);
@progress-pivot-background-color: var(--van-primary-color);

2
src/radio/README.md
View File

@ -210,7 +210,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-radio-transition-duration | _var(--van-animation-duration-fast)_ | - |
| --van-radio-label-margin | _var(--van-padding-xs)_ | - |
| --van-radio-label-color | _var(--van-text-color)_ | - |
| --van-radio-checked-icon-color | _var(--van-blue)_ | - |
| --van-radio-checked-icon-color | _var(--van-primary-color)_ | - |
| --van-radio-disabled-icon-color | _var(--van-gary-5)_ | - |
| --van-radio-disabled-label-color | _var(--van-gary-5)_ | - |
| --van-radio-disabled-background-color | _var(--van-border-color)_ | - |

2
src/radio/README.zh-CN.md
View File

@ -224,7 +224,7 @@ export default {
| --van-radio-transition-duration | _var(--van-animation-duration-fast)_ | - |
| --van-radio-label-margin | _var(--van-padding-xs)_ | - |
| --van-radio-label-color | _var(--van-text-color)_ | - |
| --van-radio-checked-icon-color | _var(--van-blue)_ | - |
| --van-radio-checked-icon-color | _var(--van-primary-color)_ | - |
| --van-radio-disabled-icon-color | _var(--van-gary-5)_ | - |
| --van-radio-disabled-label-color | _var(--van-gary-5)_ | - |
| --van-radio-disabled-background-color | _var(--van-border-color)_ | - |

2
src/radio/var.less
View File

@ -5,7 +5,7 @@
@radio-transition-duration: var(--van-animation-duration-fast);
@radio-label-margin: var(--van-padding-xs);
@radio-label-color: var(--van-text-color);
@radio-checked-icon-color: var(--van-blue);
@radio-checked-icon-color: var(--van-primary-color);
@radio-disabled-icon-color: var(--van-gray-5);
@radio-disabled-label-color: var(--van-gray-5);
@radio-disabled-background-color: var(--van-border-color);

2
src/rate/README.md
View File

@ -163,5 +163,5 @@ The component provides the following CSS variables, which can be used to customi
| --van-rate-icon-size | _20px_ | - |
| --van-rate-icon-gutter | _var(--van-padding-base)_ | - |
| --van-rate-icon-void-color | _var(--van-gary-5)_ | - |
| --van-rate-icon-full-color | _var(--van-red)_ | - |
| --van-rate-icon-full-color | _var(--van-danger-color)_ | - |
| --van-rate-icon-disabled-color | _var(--van-gary-5)_ | - |

2
src/rate/README.zh-CN.md
View File

@ -181,5 +181,5 @@ export default {
| --van-rate-icon-size | _20px_ | - |
| --van-rate-icon-gutter | _var(--van-padding-base)_ | - |
| --van-rate-icon-void-color | _var(--van-gary-5)_ | - |
| --van-rate-icon-full-color | _var(--van-red)_ | - |
| --van-rate-icon-full-color | _var(--van-danger-color)_ | - |
| --van-rate-icon-disabled-color | _var(--van-gary-5)_ | - |

2
src/rate/var.less
View File

@ -3,5 +3,5 @@
@rate-icon-size: 20px;
@rate-icon-gutter: var(--van-padding-base);
@rate-icon-void-color: var(--van-gray-5);
@rate-icon-full-color: var(--van-red);
@rate-icon-full-color: var(--van-danger-color);
@rate-icon-disabled-color: var(--van-gray-5);

2
src/sidebar-item/var.less
View File

@ -11,5 +11,5 @@
@sidebar-selected-text-color: var(--van-text-color);
@sidebar-selected-border-width: 4px;
@sidebar-selected-border-height: 16px;
@sidebar-selected-border-color: var(--van-red);
@sidebar-selected-border-color: var(--van-danger-color);
@sidebar-selected-background-color: var(--van-white);

2
src/sidebar/README.md
View File

@ -142,5 +142,5 @@ The component provides the following CSS variables, which can be used to customi
| --van-sidebar-selected-text-color | _var(--van-text-color)_ | - |
| --van-sidebar-selected-border-width | _4px_ | - |
| --van-sidebar-selected-border-height | _16px_ | - |
| --van-sidebar-selected-border-color | _var(--van-red)_ | - |
| --van-sidebar-selected-border-color | _var(--van-danger-color)_ | - |
| --van-sidebar-selected-background-color | _var(--van-white)_ | - |

2
src/sidebar/README.zh-CN.md
View File

@ -150,5 +150,5 @@ export default {
| --van-sidebar-selected-text-color | _var(--van-text-color)_ | - |
| --van-sidebar-selected-border-width | _4px_ | - |
| --van-sidebar-selected-border-height | _16px_ | - |
| --van-sidebar-selected-border-color | _var(--van-red)_ | - |
| --van-sidebar-selected-border-color | _var(--van-danger-color)_ | - |
| --van-sidebar-selected-background-color | _var(--van-white)_ | - |

2
src/slider/README.md
View File

@ -184,7 +184,7 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-slider-active-background-color | _var(--van-blue)_ | - |
| --van-slider-active-background-color | _var(--van-primary-color)_ | - |
| --van-slider-inactive-background-color | _var(--van-gary-3)_ | - |
| --van-slider-disabled-opacity | _var(--van-disabled-opacity)_ | - |
| --van-slider-bar-height | _2px_ | - |

2
src/slider/README.zh-CN.md
View File

@ -186,7 +186,7 @@ export default {
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-slider-active-background-color | _var(--van-blue)_ | - |
| --van-slider-active-background-color | _var(--van-primary-color)_ | - |
| --van-slider-inactive-background-color | _var(--van-gary-3)_ | - |
| --van-slider-disabled-opacity | _var(--van-disabled-opacity)_ | - |
| --van-slider-bar-height | _2px_ | - |

2
src/slider/var.less
View File

@ -1,6 +1,6 @@
@import '../style/var.less';
@slider-active-background-color: var(--van-blue);
@slider-active-background-color: var(--van-primary-color);
@slider-inactive-background-color: var(--van-gray-3);
@slider-disabled-opacity: var(--van-disabled-opacity);
@slider-bar-height: 2px;

4
src/step/var.less
View File

@ -1,11 +1,11 @@
@import '../style/var.less';
@step-text-color: var(--van-gray-6);
@step-active-color: var(--van-green);
@step-active-color: var(--van-success-color);
@step-process-text-color: var(--van-text-color);
@step-font-size: var(--van-font-size-md);
@step-line-color: var(--van-border-color);
@step-finish-line-color: var(--van-green);
@step-finish-line-color: var(--van-success-color);
@step-finish-text-color: var(--van-text-color);
@step-icon-size: 12px;
@step-circle-size: 5px;

2
src/stepper/README.md
View File

@ -168,7 +168,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-stepper-button-icon-color | _var(--van-text-color)_ | - |
| --van-stepper-button-disabled-color | _var(--van-background-color)_ | - |
| --van-stepper-button-disabled-icon-color | _var(--van-gary-5)_ | - |
| --van-stepper-button-round-theme-color | _var(--van-red)_ | - |
| --van-stepper-button-round-theme-color | _var(--van-danger-color)_ | - |
| --van-stepper-input-width | _32px_ | - |
| --van-stepper-input-height | _28px_ | - |
| --van-stepper-input-font-size | _var(--van-font-size-md)_ | - |

2
src/stepper/README.zh-CN.md
View File

@ -188,7 +188,7 @@ export default {
| --van-stepper-button-icon-color | _var(--van-text-color)_ | - |
| --van-stepper-button-disabled-color | _var(--van-background-color)_ | - |
| --van-stepper-button-disabled-icon-color | _var(--van-gary-5)_ | - |
| --van-stepper-button-round-theme-color | _var(--van-red)_ | - |
| --van-stepper-button-round-theme-color | _var(--van-danger-color)_ | - |
| --van-stepper-input-width | _32px_ | - |
| --van-stepper-input-height | _28px_ | - |
| --van-stepper-input-font-size | _var(--van-font-size-md)_ | - |

2
src/stepper/var.less
View File

@ -5,7 +5,7 @@
@stepper-button-icon-color: var(--van-text-color);
@stepper-button-disabled-color: var(--van-background-color);
@stepper-button-disabled-icon-color: var(--van-gray-5);
@stepper-button-round-theme-color: var(--van-red);
@stepper-button-round-theme-color: var(--van-danger-color);
@stepper-input-width: 32px;
@stepper-input-height: 28px;
@stepper-input-font-size: var(--van-font-size-md);

4
src/steps/README.md
View File

@ -107,11 +107,11 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-step-text-color | _var(--van-gary-6)_ | - |
| --van-step-active-color | _var(--van-green)_ | - |
| --van-step-active-color | _var(--van-success-color)_ | - |
| --van-step-process-text-color | _var(--van-text-color)_ | - |
| --van-step-font-size | _var(--van-font-size-md)_ | - |
| --van-step-line-color | _var(--van-border-color)_ | - |
| --van-step-finish-line-color | _var(--van-green)_ | - |
| --van-step-finish-line-color | _var(--van-success-color)_ | - |
| --van-step-finish-text-color | _var(--van-text-color)_ | - |
| --van-step-icon-size | _12px_ | - |
| --van-step-circle-size | _5px_ | - |

28
src/steps/README.zh-CN.md
View File

@ -110,17 +110,17 @@ export default {
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------------- | ------------------------- | ---- |
| --van-step-text-color | _var(--van-gary-6)_ | - |
| --van-step-active-color | _var(--van-green)_ | - |
| --van-step-process-text-color | _var(--van-text-color)_ | - |
| --van-step-font-size | _var(--van-font-size-md)_ | - |
| --van-step-line-color | _var(--van-border-color)_ | - |
| --van-step-finish-line-color | _var(--van-green)_ | - |
| --van-step-finish-text-color | _var(--van-text-color)_ | - |
| --van-step-icon-size | _12px_ | - |
| --van-step-circle-size | _5px_ | - |
| --van-step-circle-color | _var(--van-gary-6)_ | - |
| --van-step-horizontal-title-font-size | _var(--van-font-size-sm)_ | - |
| --van-steps-background-color | _var(--van-white)_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | -------------------------- | ---- |
| --van-step-text-color | _var(--van-gary-6)_ | - |
| --van-step-active-color | _var(--van-success-color)_ | - |
| --van-step-process-text-color | _var(--van-text-color)_ | - |
| --van-step-font-size | _var(--van-font-size-md)_ | - |
| --van-step-line-color | _var(--van-border-color)_ | - |
| --van-step-finish-line-color | _var(--van-success-color)_ | - |
| --van-step-finish-text-color | _var(--van-text-color)_ | - |
| --van-step-icon-size | _12px_ | - |
| --van-step-circle-size | _5px_ | - |
| --van-step-circle-color | _var(--van-gary-6)_ | - |
| --van-step-horizontal-title-font-size | _var(--van-font-size-sm)_ | - |
| --van-steps-background-color | _var(--van-white)_ | - |

4
src/style/css-variables.less
View File

@ -24,6 +24,10 @@
--van-gradient-orange: @gradient-orange;
// Component Colors
--van-primary-color: @primary-color;
--van-success-color: @success-color;
--van-danger-color: @danger-color;
--van-warning-color: @warning-color;
--van-text-color: @text-color;
--van-active-color: @active-color;
--van-active-opacity: @active-opacity;

4
src/style/var.less
View File

@ -21,6 +21,10 @@
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
// Component Colors
@primary-color: var(--van-blue);
@success-color: var(--van-green);
@danger-color: var(--van-red);
@warning-color: var(--van-orange);
@text-color: var(--van-gray-8);
@active-color: var(--van-gray-2);
@active-opacity: 0.7;

2
src/submit-bar/README.md
View File

@ -132,7 +132,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-submit-bar-z-index | _100_ | - |
| --van-submit-bar-background-color | _var(--van-white)_ | - |
| --van-submit-bar-button-width | _110px_ | - |
| --van-submit-bar-price-color | _var(--van-red)_ | - |
| --van-submit-bar-price-color | _var(--van-danger-color)_ | - |
| --van-submit-bar-text-color | _var(--van-text-color)_ | - |
| --van-submit-bar-text-font-size | _var(--van-font-size-md)_ | - |
| --van-submit-bar-tip-padding | _var(--van-padding-xs) var(--van-padding-sm)_ | - |

2
src/submit-bar/README.zh-CN.md
View File

@ -139,7 +139,7 @@ export default {
| --van-submit-bar-z-index | _100_ | - |
| --van-submit-bar-background-color | _var(--van-white)_ | - |
| --van-submit-bar-button-width | _110px_ | - |
| --van-submit-bar-price-color | _var(--van-red)_ | - |
| --van-submit-bar-price-color | _var(--van-danger-color)_ | - |
| --van-submit-bar-text-color | _var(--van-text-color)_ | - |
| --van-submit-bar-text-font-size | _var(--van-font-size-md)_ | - |
| --van-submit-bar-tip-padding | _var(--van-padding-xs) var(--van-padding-sm)_ | - |

2
src/submit-bar/var.less
View File

@ -4,7 +4,7 @@
@submit-bar-z-index: 100;
@submit-bar-background-color: var(--van-white);
@submit-bar-button-width: 110px;
@submit-bar-price-color: var(--van-red);
@submit-bar-price-color: var(--van-danger-color);
@submit-bar-price-font-size: var(--van-font-size-md);
@submit-bar-currency-font-size: var(--van-font-size-md);
@submit-bar-text-color: var(--van-text-color);

2
src/swipe/README.md
View File

@ -202,5 +202,5 @@ The component provides the following CSS variables, which can be used to customi
| --van-swipe-indicator-margin | _var(--van-padding-sm)_ | - |
| --van-swipe-indicator-active-opacity | _1_ | - |
| --van-swipe-indicator-inactive-opacity | _0.3_ | - |
| --van-swipe-indicator-active-background-color | _var(--van-blue)_ | - |
| --van-swipe-indicator-active-background-color | _var(--van-primary-color)_ | - |
| --van-swipe-indicator-inactive-background-color | _var(--van-border-color)_ | - |

2
src/swipe/README.zh-CN.md
View File

@ -210,7 +210,7 @@ export default {
| --van-swipe-indicator-margin | _var(--van-padding-sm)_ | - |
| --van-swipe-indicator-active-opacity | _1_ | - |
| --van-swipe-indicator-inactive-opacity | _0.3_ | - |
| --van-swipe-indicator-active-background-color | _var(--van-blue)_ | - |
| --van-swipe-indicator-active-background-color | _var(--van-primary-color)_ | - |
| --van-swipe-indicator-inactive-background-color | _var(--van-border-color)_ | - |
## 常见问题

2
src/swipe/var.less
View File

@ -4,5 +4,5 @@
@swipe-indicator-margin: var(--van-padding-sm);
@swipe-indicator-active-opacity: 1;
@swipe-indicator-inactive-opacity: 0.3;
@swipe-indicator-active-background-color: var(--van-blue);
@swipe-indicator-active-background-color: var(--van-primary-color);
@swipe-indicator-inactive-background-color: var(--van-border-color);

Some files were not shown because too many files have changed in this diff Show More