From 4ccd7c1cb55311d73aca8dab6d7584f82410b3d6 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 14 Jun 2021 15:21:05 +0800 Subject: [PATCH] feat: add more color variables (#8861) * style: add --van-warning-color * style: add --van-success-color * feat: add more color variables --- src/address-edit/README.md | 2 +- src/address-edit/README.zh-CN.md | 2 +- src/address-edit/index.less | 2 +- src/address-edit/var.less | 2 +- src/address-list/README.md | 2 +- src/address-list/README.zh-CN.md | 2 +- src/address-list/var.less | 2 +- src/badge/README.md | 4 ++-- src/badge/README.zh-CN.md | 4 ++-- src/badge/var.less | 4 ++-- src/button/README.md | 16 ++++++++-------- src/button/README.zh-CN.md | 12 ++++++------ src/button/var.less | 16 ++++++++-------- src/calendar/README.md | 6 +++--- src/calendar/README.zh-CN.md | 6 +++--- src/calendar/var.less | 6 +++--- src/cascader/README.md | 2 +- src/cascader/README.zh-CN.md | 2 +- src/cascader/var.less | 2 +- src/cell/README.md | 2 +- src/cell/README.zh-CN.md | 2 +- src/cell/var.less | 2 +- src/checkbox/README.md | 2 +- src/checkbox/README.zh-CN.md | 2 +- src/checkbox/var.less | 2 +- src/circle/README.md | 2 +- src/circle/README.zh-CN.md | 2 +- src/circle/var.less | 2 +- src/config-provider/README.md | 6 +++++- src/config-provider/README.zh-CN.md | 6 +++++- src/contact-card/README.md | 2 +- src/contact-card/README.zh-CN.md | 2 +- src/contact-card/index.less | 4 ++-- src/contact-card/var.less | 2 +- src/contact-list/README.md | 2 +- src/contact-list/README.zh-CN.md | 12 ++++++------ src/contact-list/var.less | 2 +- src/coupon-list/README.md | 4 ++-- src/coupon-list/README.zh-CN.md | 4 ++-- src/coupon/var.less | 4 ++-- src/dialog/README.md | 2 +- src/dialog/README.zh-CN.md | 2 +- src/dialog/var.less | 2 +- src/dropdown-menu/README.md | 4 ++-- src/dropdown-menu/README.zh-CN.md | 4 ++-- src/dropdown-menu/var.less | 4 ++-- src/field/README.md | 4 ++-- src/field/README.zh-CN.md | 4 ++-- src/field/var.less | 4 ++-- src/index-anchor/var.less | 2 +- src/index-bar/README.md | 4 ++-- src/index-bar/README.zh-CN.md | 4 ++-- src/index-bar/var.less | 2 +- src/nav-bar/README.md | 20 ++++++++++---------- src/nav-bar/README.zh-CN.md | 20 ++++++++++---------- src/nav-bar/var.less | 4 ++-- src/notify/README.md | 8 ++++---- src/notify/README.zh-CN.md | 8 ++++---- src/notify/var.less | 8 ++++---- src/number-keyboard/README.md | 2 +- src/number-keyboard/README.zh-CN.md | 2 +- src/number-keyboard/var.less | 2 +- src/pagination/README.md | 2 +- src/pagination/README.zh-CN.md | 2 +- src/pagination/var.less | 2 +- src/password-input/README.md | 2 +- src/password-input/README.zh-CN.md | 2 +- src/password-input/var.less | 2 +- src/picker/README.md | 2 +- src/picker/README.zh-CN.md | 2 +- src/picker/var.less | 2 +- src/progress/README.md | 4 ++-- src/progress/README.zh-CN.md | 20 ++++++++++---------- src/progress/var.less | 4 ++-- src/radio/README.md | 2 +- src/radio/README.zh-CN.md | 2 +- src/radio/var.less | 2 +- src/rate/README.md | 2 +- src/rate/README.zh-CN.md | 2 +- src/rate/var.less | 2 +- src/sidebar-item/var.less | 2 +- src/sidebar/README.md | 2 +- src/sidebar/README.zh-CN.md | 2 +- src/slider/README.md | 2 +- src/slider/README.zh-CN.md | 2 +- src/slider/var.less | 2 +- src/step/var.less | 4 ++-- src/stepper/README.md | 2 +- src/stepper/README.zh-CN.md | 2 +- src/stepper/var.less | 2 +- src/steps/README.md | 4 ++-- src/steps/README.zh-CN.md | 28 ++++++++++++++-------------- src/style/css-variables.less | 4 ++++ src/style/var.less | 4 ++++ src/submit-bar/README.md | 2 +- src/submit-bar/README.zh-CN.md | 2 +- src/submit-bar/var.less | 2 +- src/swipe/README.md | 2 +- src/swipe/README.zh-CN.md | 2 +- src/swipe/var.less | 2 +- src/switch/README.md | 2 +- src/switch/README.zh-CN.md | 2 +- src/switch/var.less | 2 +- src/tab/README.md | 4 ++-- src/tab/README.zh-CN.md | 4 ++-- src/tabbar-item/var.less | 2 +- src/tabbar/README.md | 2 +- src/tabbar/README.zh-CN.md | 24 ++++++++++++------------ src/tabs/var.less | 2 +- src/tag/README.md | 8 ++++---- src/tag/README.zh-CN.md | 8 ++++---- src/tag/var.less | 8 ++++---- src/tree-select/README.md | 2 +- src/tree-select/README.zh-CN.md | 2 +- src/tree-select/var.less | 2 +- 115 files changed, 250 insertions(+), 234 deletions(-) diff --git a/src/address-edit/README.md b/src/address-edit/README.md index cbce99c9b..cb6bf41c4 100644 --- a/src/address-edit/README.md +++ b/src/address-edit/README.md @@ -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)_ | - | diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md index 75d03cd77..457d0e66a 100644 --- a/src/address-edit/README.zh-CN.md +++ b/src/address-edit/README.zh-CN.md @@ -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)_ | - | diff --git a/src/address-edit/index.less b/src/address-edit/index.less index 9283566cf..27372dd3c 100644 --- a/src/address-edit/index.less +++ b/src/address-edit/index.less @@ -40,7 +40,7 @@ } &__keyword { - color: var(--van-red); + color: var(--van-danger-color); } &__finish { diff --git a/src/address-edit/var.less b/src/address-edit/var.less index b2e4ca4a8..c57fc2a8d 100644 --- a/src/address-edit/var.less +++ b/src/address-edit/var.less @@ -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); diff --git a/src/address-list/README.md b/src/address-list/README.md index 633afa8ea..86b1afd5c 100644 --- a/src/address-list/README.md +++ b/src/address-list/README.md @@ -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_ | - | diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md index aae40af88..f1a50b4e3 100644 --- a/src/address-list/README.zh-CN.md +++ b/src/address-list/README.zh-CN.md @@ -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_ | - | diff --git a/src/address-list/var.less b/src/address-list/var.less index 33920e306..f0fd691c7 100644 --- a/src/address-list/var.less +++ b/src/address-list/var.less @@ -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; diff --git a/src/badge/README.md b/src/badge/README.md index f2403aa81..5ce058082 100644 --- a/src/badge/README.md +++ b/src/badge/README.md @@ -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_ | - | diff --git a/src/badge/README.zh-CN.md b/src/badge/README.zh-CN.md index e17036a68..6069d735e 100644 --- a/src/badge/README.zh-CN.md +++ b/src/badge/README.zh-CN.md @@ -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_ | - | diff --git a/src/badge/var.less b/src/badge/var.less index fa4de9787..1e8cde4aa 100644 --- a/src/badge/var.less +++ b/src/badge/var.less @@ -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; diff --git a/src/button/README.md b/src/button/README.md index 802c88e71..b6cc9faed 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -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)_ | - | diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md index a9652ba79..7c6ef7e5c 100644 --- a/src/button/README.zh-CN.md +++ b/src/button/README.zh-CN.md @@ -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)_ | - | diff --git a/src/button/var.less b/src/button/var.less index 229bee315..bde17b441 100644 --- a/src/button/var.less +++ b/src/button/var.less @@ -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); diff --git a/src/calendar/README.md b/src/calendar/README.md index 3c749b685..94ba13705 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -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_ | - | diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index ffd983cdf..10d1f4856 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -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_ | - | diff --git a/src/calendar/var.less b/src/calendar/var.less index 6d27607cf..1dc9b3895 100644 --- a/src/calendar/var.less +++ b/src/calendar/var.less @@ -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; diff --git a/src/cascader/README.md b/src/cascader/README.md index e69fe0436..fca4c81d2 100644 --- a/src/cascader/README.md +++ b/src/cascader/README.md @@ -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)_ | - | diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md index f12dba1bf..fa4c4b08e 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -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)_ | - | diff --git a/src/cascader/var.less b/src/cascader/var.less index 75b7a0195..c4d02dac7 100644 --- a/src/cascader/var.less +++ b/src/cascader/var.less @@ -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); diff --git a/src/cell/README.md b/src/cell/README.md index 4a375aea0..30b9c62a6 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -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)_ | - | diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index 031086b1a..790ba62b5 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -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)_ | - | diff --git a/src/cell/var.less b/src/cell/var.less index 66b436b52..bf00509a8 100644 --- a/src/cell/var.less +++ b/src/cell/var.less @@ -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); diff --git a/src/checkbox/README.md b/src/checkbox/README.md index 6086939f1..d78f97e72 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -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)_ | - | diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index 3fc806241..71314a9f0 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -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)_ | - | diff --git a/src/checkbox/var.less b/src/checkbox/var.less index f8e077e46..a58deda52 100644 --- a/src/checkbox/var.less +++ b/src/checkbox/var.less @@ -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); diff --git a/src/circle/README.md b/src/circle/README.md index 2bc94e8f7..73a9a55ee 100644 --- a/src/circle/README.md +++ b/src/circle/README.md @@ -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)_ | - | diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md index b212feebc..3b35f88e7 100644 --- a/src/circle/README.zh-CN.md +++ b/src/circle/README.zh-CN.md @@ -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)_ | - | diff --git a/src/circle/var.less b/src/circle/var.less index 9ac4ea764..ab0a9b42b 100644 --- a/src/circle/var.less +++ b/src/circle/var.less @@ -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); diff --git a/src/config-provider/README.md b/src/config-provider/README.md index 9c770cbb9..36985dd8d 100644 --- a/src/config-provider/README.md +++ b/src/config-provider/README.md @@ -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; diff --git a/src/config-provider/README.zh-CN.md b/src/config-provider/README.zh-CN.md index c85c6beb1..ec61bf3de 100644 --- a/src/config-provider/README.zh-CN.md +++ b/src/config-provider/README.zh-CN.md @@ -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; diff --git a/src/contact-card/README.md b/src/contact-card/README.md index cd7d61fed..0982a3ac5 100644 --- a/src/contact-card/README.md +++ b/src/contact-card/README.md @@ -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)_ | - | diff --git a/src/contact-card/README.zh-CN.md b/src/contact-card/README.zh-CN.md index 0b1e9407a..b49f33544 100644 --- a/src/contact-card/README.zh-CN.md +++ b/src/contact-card/README.zh-CN.md @@ -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)_ | - | diff --git a/src/contact-card/index.less b/src/contact-card/index.less index 02fb81e19..da70f11b4 100644 --- a/src/contact-card/index.less +++ b/src/contact-card/index.less @@ -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% ); diff --git a/src/contact-card/var.less b/src/contact-card/var.less index ff91ec88e..80e280c73 100644 --- a/src/contact-card/var.less +++ b/src/contact-card/var.less @@ -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); diff --git a/src/contact-list/README.md b/src/contact-list/README.md index de3879f40..5a947f940 100644 --- a/src/contact-list/README.md +++ b/src/contact-list/README.md @@ -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)_ | - | diff --git a/src/contact-list/README.zh-CN.md b/src/contact-list/README.zh-CN.md index e73fba620..c278d7fcd 100644 --- a/src/contact-list/README.zh-CN.md +++ b/src/contact-list/README.zh-CN.md @@ -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)_ | - | diff --git a/src/contact-list/var.less b/src/contact-list/var.less index 3b6ef8008..e0720ecf8 100644 --- a/src/contact-list/var.less +++ b/src/contact-list/var.less @@ -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); diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md index 747c0c4dc..76ac52014 100644 --- a/src/coupon-list/README.md +++ b/src/coupon-list/README.md @@ -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_ | - | diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md index 6a5b6bb36..f247237aa 100644 --- a/src/coupon-list/README.zh-CN.md +++ b/src/coupon-list/README.zh-CN.md @@ -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_ | - | diff --git a/src/coupon/var.less b/src/coupon/var.less index 5e4e0fcdc..2af671de7 100644 --- a/src/coupon/var.less +++ b/src/coupon/var.less @@ -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); diff --git a/src/dialog/README.md b/src/dialog/README.md index d9b44f255..989c07b01 100644 --- a/src/dialog/README.md +++ b/src/dialog/README.md @@ -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)_ | - | diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md index 63b287e1b..5c33c91e0 100644 --- a/src/dialog/README.zh-CN.md +++ b/src/dialog/README.zh-CN.md @@ -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)_ | - | ## 常见问题 diff --git a/src/dialog/var.less b/src/dialog/var.less index bc4e01a3b..396f87b3a 100644 --- a/src/dialog/var.less +++ b/src/dialog/var.less @@ -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); diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md index 0520564ba..74c6ddef6 100644 --- a/src/dropdown-menu/README.md +++ b/src/dropdown-menu/README.md @@ -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_ | - | diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index 710c9b267..826875fa6 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -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_ | - | diff --git a/src/dropdown-menu/var.less b/src/dropdown-menu/var.less index db39ebc31..4e9f4eca3 100644 --- a/src/dropdown-menu/var.less +++ b/src/dropdown-menu/var.less @@ -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%; diff --git a/src/field/README.md b/src/field/README.md index 4854956f1..c55fe829c 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -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)_ | - | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index 8b086732e..73ffbfd71 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -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)_ | - | diff --git a/src/field/var.less b/src/field/var.less index 2819ff8eb..b60ca0c49 100644 --- a/src/field/var.less +++ b/src/field/var.less @@ -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); diff --git a/src/index-anchor/var.less b/src/index-anchor/var.less index 9ab40ddd7..6856f315d 100644 --- a/src/index-anchor/var.less +++ b/src/index-anchor/var.less @@ -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); diff --git a/src/index-bar/README.md b/src/index-bar/README.md index 5cc472914..e7f358f53 100644 --- a/src/index-bar/README.md +++ b/src/index-bar/README.md @@ -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)_ | - | diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md index e59e1fd04..3b988d4ed 100644 --- a/src/index-bar/README.zh-CN.md +++ b/src/index-bar/README.zh-CN.md @@ -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)_ | - | diff --git a/src/index-bar/var.less b/src/index-bar/var.less index d2ca963e1..f5fd76435 100644 --- a/src/index-bar/var.less +++ b/src/index-bar/var.less @@ -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); diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md index 4df02b8cd..f582420b5 100644 --- a/src/nav-bar/README.md +++ b/src/nav-bar/README.md @@ -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_ | - | diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md index 83b61b0c7..32a9a31a5 100644 --- a/src/nav-bar/README.zh-CN.md +++ b/src/nav-bar/README.zh-CN.md @@ -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_ | - | diff --git a/src/nav-bar/var.less b/src/nav-bar/var.less index 92d69e917..2bc8cff5f 100644 --- a/src/nav-bar/var.less +++ b/src/nav-bar/var.less @@ -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; diff --git a/src/notify/README.md b/src/notify/README.md index 1865abda8..780a6958b 100644 --- a/src/notify/README.md +++ b/src/notify/README.md @@ -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)_ | - | diff --git a/src/notify/README.zh-CN.md b/src/notify/README.zh-CN.md index ba54d2865..5b159be6e 100644 --- a/src/notify/README.zh-CN.md +++ b/src/notify/README.zh-CN.md @@ -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)_ | - | diff --git a/src/notify/var.less b/src/notify/var.less index ca3ea3eb6..87548e24b 100644 --- a/src/notify/var.less +++ b/src/notify/var.less @@ -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); diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index 3609ff167..62d033753 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -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_ | - | diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index fbd7d7929..d6c38185c 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -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_ | - | ## 常见问题 diff --git a/src/number-keyboard/var.less b/src/number-keyboard/var.less index 8ab4bde01..a42054cf8 100644 --- a/src/number-keyboard/var.less +++ b/src/number-keyboard/var.less @@ -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; diff --git a/src/pagination/README.md b/src/pagination/README.md index 06349c246..2ce551e83 100644 --- a/src/pagination/README.md +++ b/src/pagination/README.md @@ -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)_ | - | diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md index 736db146c..ef4747f4b 100644 --- a/src/pagination/README.zh-CN.md +++ b/src/pagination/README.zh-CN.md @@ -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)_ | - | diff --git a/src/pagination/var.less b/src/pagination/var.less index 229927a89..53ef1a88b 100644 --- a/src/pagination/var.less +++ b/src/pagination/var.less @@ -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); diff --git a/src/password-input/README.md b/src/password-input/README.md index a464466c6..8d6d6ca5d 100644 --- a/src/password-input/README.md +++ b/src/password-input/README.md @@ -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)_ | - | diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md index 2e92458e3..e1ce0bbca 100644 --- a/src/password-input/README.zh-CN.md +++ b/src/password-input/README.zh-CN.md @@ -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)_ | - | diff --git a/src/password-input/var.less b/src/password-input/var.less index a0e83c30d..5a88eea09 100644 --- a/src/password-input/var.less +++ b/src/password-input/var.less @@ -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); diff --git a/src/picker/README.md b/src/picker/README.md index 75ec35dc5..192c8b033 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -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)_ | - | diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index 5ed1f4ee8..b8d69a854 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -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)_ | - | ## 常见问题 diff --git a/src/picker/var.less b/src/picker/var.less index 7e0642d66..08eda0183 100644 --- a/src/picker/var.less +++ b/src/picker/var.less @@ -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); diff --git a/src/progress/README.md b/src/progress/README.md index 2b0614042..a1e3865c8 100644 --- a/src/progress/README.md +++ b/src/progress/README.md @@ -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)_ | - | diff --git a/src/progress/README.zh-CN.md b/src/progress/README.zh-CN.md index b06c9c390..3b091114d 100644 --- a/src/progress/README.zh-CN.md +++ b/src/progress/README.zh-CN.md @@ -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)_ | - | ## 常见问题 diff --git a/src/progress/var.less b/src/progress/var.less index 01bedb8b7..6aa504372 100644 --- a/src/progress/var.less +++ b/src/progress/var.less @@ -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); diff --git a/src/radio/README.md b/src/radio/README.md index dcd286820..abc588bdc 100644 --- a/src/radio/README.md +++ b/src/radio/README.md @@ -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)_ | - | diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md index acc79f231..d4407eb74 100644 --- a/src/radio/README.zh-CN.md +++ b/src/radio/README.zh-CN.md @@ -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)_ | - | diff --git a/src/radio/var.less b/src/radio/var.less index d6f109c5e..80bc9e142 100644 --- a/src/radio/var.less +++ b/src/radio/var.less @@ -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); diff --git a/src/rate/README.md b/src/rate/README.md index 85eb6657b..90972ffb9 100644 --- a/src/rate/README.md +++ b/src/rate/README.md @@ -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)_ | - | diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md index a33c25cce..d4b7e1bf2 100644 --- a/src/rate/README.zh-CN.md +++ b/src/rate/README.zh-CN.md @@ -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)_ | - | diff --git a/src/rate/var.less b/src/rate/var.less index f8cb10c26..87240021b 100644 --- a/src/rate/var.less +++ b/src/rate/var.less @@ -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); diff --git a/src/sidebar-item/var.less b/src/sidebar-item/var.less index 1741d9856..bec926520 100644 --- a/src/sidebar-item/var.less +++ b/src/sidebar-item/var.less @@ -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); diff --git a/src/sidebar/README.md b/src/sidebar/README.md index 34ac8d65c..0a2688946 100644 --- a/src/sidebar/README.md +++ b/src/sidebar/README.md @@ -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)_ | - | diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md index 29b954bbe..b96544336 100644 --- a/src/sidebar/README.zh-CN.md +++ b/src/sidebar/README.zh-CN.md @@ -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)_ | - | diff --git a/src/slider/README.md b/src/slider/README.md index fae86b5ea..883e21bad 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -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_ | - | diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md index d6e978fb6..9c940f410 100644 --- a/src/slider/README.zh-CN.md +++ b/src/slider/README.zh-CN.md @@ -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_ | - | diff --git a/src/slider/var.less b/src/slider/var.less index 137231ca9..5906e1929 100644 --- a/src/slider/var.less +++ b/src/slider/var.less @@ -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; diff --git a/src/step/var.less b/src/step/var.less index 5d1571032..2422b79e5 100644 --- a/src/step/var.less +++ b/src/step/var.less @@ -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; diff --git a/src/stepper/README.md b/src/stepper/README.md index 0be91a94c..6e9a55b37 100644 --- a/src/stepper/README.md +++ b/src/stepper/README.md @@ -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)_ | - | diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md index c40436077..13629192d 100644 --- a/src/stepper/README.zh-CN.md +++ b/src/stepper/README.zh-CN.md @@ -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)_ | - | diff --git a/src/stepper/var.less b/src/stepper/var.less index 44f8eb026..adaa98d88 100644 --- a/src/stepper/var.less +++ b/src/stepper/var.less @@ -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); diff --git a/src/steps/README.md b/src/steps/README.md index 2226c366f..b1f9e615c 100644 --- a/src/steps/README.md +++ b/src/steps/README.md @@ -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_ | - | diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md index 5acbb99c1..f669a77f2 100644 --- a/src/steps/README.zh-CN.md +++ b/src/steps/README.zh-CN.md @@ -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)_ | - | diff --git a/src/style/css-variables.less b/src/style/css-variables.less index a4042612a..f26480d2d 100644 --- a/src/style/css-variables.less +++ b/src/style/css-variables.less @@ -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; diff --git a/src/style/var.less b/src/style/var.less index 0b694398a..ca63499a0 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -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; diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md index 705d98772..b7501da2b 100644 --- a/src/submit-bar/README.md +++ b/src/submit-bar/README.md @@ -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)_ | - | diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md index 92c173cc3..f317d64fb 100644 --- a/src/submit-bar/README.zh-CN.md +++ b/src/submit-bar/README.zh-CN.md @@ -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)_ | - | diff --git a/src/submit-bar/var.less b/src/submit-bar/var.less index 958719ab0..951869b7a 100644 --- a/src/submit-bar/var.less +++ b/src/submit-bar/var.less @@ -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); diff --git a/src/swipe/README.md b/src/swipe/README.md index dfa092fe5..cb0374db8 100644 --- a/src/swipe/README.md +++ b/src/swipe/README.md @@ -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)_ | - | diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md index fb936bd1c..beab98d6c 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -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)_ | - | ## 常见问题 diff --git a/src/swipe/var.less b/src/swipe/var.less index 5c5b4ec86..a485139d5 100644 --- a/src/swipe/var.less +++ b/src/swipe/var.less @@ -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); diff --git a/src/switch/README.md b/src/switch/README.md index 1da3e4263..d21b3f534 100644 --- a/src/switch/README.md +++ b/src/switch/README.md @@ -134,7 +134,7 @@ The component provides the following CSS variables, which can be used to customi | --van-switch-node-background-color | _var(--van-white)_ | - | | --van-switch-node-box-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - | | --van-switch-background-color | _var(--van-white)_ | - | -| --van-switch-on-background-color | _var(--van-blue)_ | - | +| --van-switch-on-background-color | _var(--van-primary-color)_ | - | | --van-switch-transition-duration | _var(--van-animation-duration-base)_ | - | | --van-switch-disabled-opacity | _var(--van-disabled-opacity)_ | - | | --van-switch-border | _var(--van-border-width-base) solid rgba(0, 0, 0, 0.1)_ | - | diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md index 324c1b1b0..d2ca24abf 100644 --- a/src/switch/README.zh-CN.md +++ b/src/switch/README.zh-CN.md @@ -146,7 +146,7 @@ export default { | --van-switch-node-background-color | _var(--van-white)_ | - | | --van-switch-node-box-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - | | --van-switch-background-color | _var(--van-white)_ | - | -| --van-switch-on-background-color | _var(--van-blue)_ | - | +| --van-switch-on-background-color | _var(--van-primary-color)_ | - | | --van-switch-transition-duration | _var(--van-animation-duration-base)_ | - | | --van-switch-disabled-opacity | _var(--van-disabled-opacity)_ | - | | --van-switch-border | _var(--van-border-width-base) solid rgba(0, 0, 0, 0.1)_ | - | diff --git a/src/switch/var.less b/src/switch/var.less index 572d8a6c8..670f71bc5 100644 --- a/src/switch/var.less +++ b/src/switch/var.less @@ -8,7 +8,7 @@ @switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); @switch-background-color: var(--van-white); -@switch-on-background-color: var(--van-blue); +@switch-on-background-color: var(--van-primary-color); @switch-transition-duration: var(--van-animation-duration-base); @switch-disabled-opacity: var(--van-disabled-opacity); @switch-border: var(--van-border-width-base) solid rgba(0, 0, 0, 0.1); diff --git a/src/tab/README.md b/src/tab/README.md index 7495ffad2..a2e857123 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -313,10 +313,10 @@ The component provides the following CSS variables, which can be used to customi | --van-tab-disabled-text-color | _var(--van-gary-5)_ | - | | --van-tab-font-size | _var(--van-font-size-md)_ | - | | --van-tab-line-height | _var(--van-line-height-md)_ | - | -| --van-tabs-default-color | _var(--van-red)_ | - | +| --van-tabs-default-color | _var(--van-danger-color)_ | - | | --van-tabs-line-height | _44px_ | - | | --van-tabs-card-height | _30px_ | - | | --van-tabs-nav-background-color | _var(--van-white)_ | - | | --van-tabs-bottom-bar-width | _40px_ | - | | --van-tabs-bottom-bar-height | _3px_ | - | -| --van-tabs-bottom-bar-color | _var(--van-red)_ | - | +| --van-tabs-bottom-bar-color | _var(--van-danger-color)_ | - | diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index 100b6b73a..e4b7f62c9 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -320,13 +320,13 @@ export default { | --van-tab-disabled-text-color | _var(--van-gary-5)_ | - | | --van-tab-font-size | _var(--van-font-size-md)_ | - | | --van-tab-line-height | _var(--van-line-height-md)_ | - | -| --van-tabs-default-color | _var(--van-red)_ | - | +| --van-tabs-default-color | _var(--van-danger-color)_ | - | | --van-tabs-line-height | _44px_ | - | | --van-tabs-card-height | _30px_ | - | | --van-tabs-nav-background-color | _var(--van-white)_ | - | | --van-tabs-bottom-bar-width | _40px_ | - | | --van-tabs-bottom-bar-height | _3px_ | - | -| --van-tabs-bottom-bar-color | _var(--van-red)_ | - | +| --van-tabs-bottom-bar-color | _var(--van-danger-color)_ | - | ## 常见问题 diff --git a/src/tabbar-item/var.less b/src/tabbar-item/var.less index 45fb4503d..0e2387e3d 100644 --- a/src/tabbar-item/var.less +++ b/src/tabbar-item/var.less @@ -2,7 +2,7 @@ @tabbar-item-font-size: var(--van-font-size-sm); @tabbar-item-text-color: var(--van-gray-7); -@tabbar-item-active-color: var(--van-blue); +@tabbar-item-active-color: var(--van-primary-color); @tabbar-item-active-background-color: var(--van-white); @tabbar-item-line-height: 1; @tabbar-item-icon-size: 22px; diff --git a/src/tabbar/README.md b/src/tabbar/README.md index a39163079..2682fee13 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -211,7 +211,7 @@ The component provides the following CSS variables, which can be used to customi | --van-tabbar-background-color | _var(--van-white)_ | - | | --van-tabbar-item-font-size | _var(--van-font-size-sm)_ | - | | --van-tabbar-item-text-color | _var(--van-gary-7)_ | - | -| --van-tabbar-item-active-color | _var(--van-blue)_ | - | +| --van-tabbar-item-active-color | _var(--van-primary-color)_ | - | | --van-tabbar-item-active-background-color | _var(--van-white)_ | - | | --van-tabbar-item-line-height | _1_ | - | | --van-tabbar-item-icon-size | _22px_ | - | diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index 80d08b3b2..0b40bf6d3 100644 --- a/src/tabbar/README.zh-CN.md +++ b/src/tabbar/README.zh-CN.md @@ -216,15 +216,15 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ----------------------------------------- | ------------------------- | ---- | -| --van-tabbar-height | _50px_ | - | -| --van-tabbar-z-index | _1_ | - | -| --van-tabbar-background-color | _var(--van-white)_ | - | -| --van-tabbar-item-font-size | _var(--van-font-size-sm)_ | - | -| --van-tabbar-item-text-color | _var(--van-gary-7)_ | - | -| --van-tabbar-item-active-color | _var(--van-blue)_ | - | -| --van-tabbar-item-active-background-color | _var(--van-white)_ | - | -| --van-tabbar-item-line-height | _1_ | - | -| --van-tabbar-item-icon-size | _22px_ | - | -| --van-tabbar-item-margin-bottom | _4px_ | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-tabbar-height | _50px_ | - | +| --van-tabbar-z-index | _1_ | - | +| --van-tabbar-background-color | _var(--van-white)_ | - | +| --van-tabbar-item-font-size | _var(--van-font-size-sm)_ | - | +| --van-tabbar-item-text-color | _var(--van-gary-7)_ | - | +| --van-tabbar-item-active-color | _var(--van-primary-color)_ | - | +| --van-tabbar-item-active-background-color | _var(--van-white)_ | - | +| --van-tabbar-item-line-height | _1_ | - | +| --van-tabbar-item-icon-size | _22px_ | - | +| --van-tabbar-item-margin-bottom | _4px_ | - | diff --git a/src/tabs/var.less b/src/tabs/var.less index 2ecbd9efe..63e1ce98e 100644 --- a/src/tabs/var.less +++ b/src/tabs/var.less @@ -5,7 +5,7 @@ @tab-disabled-text-color: var(--van-gray-5); @tab-font-size: var(--van-font-size-md); @tab-line-height: var(--van-line-height-md); -@tabs-default-color: var(--van-red); +@tabs-default-color: var(--van-danger-color); @tabs-line-height: 44px; @tabs-card-height: 30px; @tabs-nav-background-color: var(--van-white); diff --git a/src/tag/README.md b/src/tag/README.md index e7e3a977b..de8f7295d 100644 --- a/src/tag/README.md +++ b/src/tag/README.md @@ -132,9 +132,9 @@ The component provides the following CSS variables, which can be used to customi | --van-tag-large-border-radius | _var(--van-border-radius-md)_ | - | | --van-tag-large-font-size | _var(--van-font-size-md)_ | - | | --van-tag-round-border-radius | _var(--van-border-radius-max)_ | - | -| --van-tag-danger-color | _var(--van-red)_ | - | -| --van-tag-primary-color | _var(--van-blue)_ | - | -| --van-tag-success-color | _var(--van-green)_ | - | -| --van-tag-warning-color | _var(--van-orange)_ | - | +| --van-tag-danger-color | _var(--van-danger-color)_ | - | +| --van-tag-primary-color | _var(--van-primary-color)_ | - | +| --van-tag-success-color | _var(--van-success-color)_ | - | +| --van-tag-warning-color | _var(--van-warning-color)_ | - | | --van-tag-default-color | _var(--van-gary-6)_ | - | | --van-tag-plain-background-color | _var(--van-white)_ | - | diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md index 93cf8bb83..20130863d 100644 --- a/src/tag/README.zh-CN.md +++ b/src/tag/README.zh-CN.md @@ -146,9 +146,9 @@ export default { | --van-tag-large-border-radius | _var(--van-border-radius-md)_ | - | | --van-tag-large-font-size | _var(--van-font-size-md)_ | - | | --van-tag-round-border-radius | _var(--van-border-radius-max)_ | - | -| --van-tag-danger-color | _var(--van-red)_ | - | -| --van-tag-primary-color | _var(--van-blue)_ | - | -| --van-tag-success-color | _var(--van-green)_ | - | -| --van-tag-warning-color | _var(--van-orange)_ | - | +| --van-tag-danger-color | _var(--van-danger-color)_ | - | +| --van-tag-primary-color | _var(--van-primary-color)_ | - | +| --van-tag-success-color | _var(--van-success-color)_ | - | +| --van-tag-warning-color | _var(--van-warning-color)_ | - | | --van-tag-default-color | _var(--van-gary-6)_ | - | | --van-tag-plain-background-color | _var(--van-white)_ | - | diff --git a/src/tag/var.less b/src/tag/var.less index 4d77fe25c..3b0680cb8 100644 --- a/src/tag/var.less +++ b/src/tag/var.less @@ -10,9 +10,9 @@ @tag-large-border-radius: var(--van-border-radius-md); @tag-large-font-size: var(--van-font-size-md); @tag-round-border-radius: var(--van-border-radius-max); -@tag-danger-color: var(--van-red); -@tag-primary-color: var(--van-blue); -@tag-success-color: var(--van-green); -@tag-warning-color: var(--van-orange); +@tag-danger-color: var(--van-danger-color); +@tag-primary-color: var(--van-primary-color); +@tag-success-color: var(--van-success-color); +@tag-warning-color: var(--van-warning-color); @tag-default-color: var(--van-gray-6); @tag-plain-background-color: var(--van-white); diff --git a/src/tree-select/README.md b/src/tree-select/README.md index dd71b1326..c6fed6b93 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -241,6 +241,6 @@ The component provides the following CSS variables, which can be used to customi | --van-tree-select-content-background-color | _var(--van-white)_ | - | | --van-tree-select-nav-item-padding | _14px var(--van-padding-sm)_ | - | | --van-tree-select-item-height | _48px_ | - | -| --van-tree-select-item-active-color | _var(--van-red)_ | - | +| --van-tree-select-item-active-color | _var(--van-danger-color)_ | - | | --van-tree-select-item-disabled-color | _var(--van-gary-5)_ | - | | --van-tree-select-item-selected-size | _16px_ | - | diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md index 9c24207f4..10576a70a 100644 --- a/src/tree-select/README.zh-CN.md +++ b/src/tree-select/README.zh-CN.md @@ -247,6 +247,6 @@ export default { | --van-tree-select-content-background-color | _var(--van-white)_ | - | | --van-tree-select-nav-item-padding | _14px var(--van-padding-sm)_ | - | | --van-tree-select-item-height | _48px_ | - | -| --van-tree-select-item-active-color | _var(--van-red)_ | - | +| --van-tree-select-item-active-color | _var(--van-danger-color)_ | - | | --van-tree-select-item-disabled-color | _var(--van-gary-5)_ | - | | --van-tree-select-item-selected-size | _16px_ | - | diff --git a/src/tree-select/var.less b/src/tree-select/var.less index bc9156868..72d75084e 100644 --- a/src/tree-select/var.less +++ b/src/tree-select/var.less @@ -5,6 +5,6 @@ @tree-select-content-background-color: var(--van-white); @tree-select-nav-item-padding: 14px var(--van-padding-sm); @tree-select-item-height: 48px; -@tree-select-item-active-color: var(--van-red); +@tree-select-item-active-color: var(--van-danger-color); @tree-select-item-disabled-color: var(--van-gray-5); @tree-select-item-selected-size: 16px;