From 8dd969d3f81a2b48814928fa8271e2993fb7598a Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 1 Nov 2021 20:34:42 +0800 Subject: [PATCH] feat: add --van-text-color-tertiary css var (#9776) --- packages/vant/src/action-sheet/README.md | 2 +- .../vant/src/action-sheet/README.zh-CN.md | 2 +- packages/vant/src/action-sheet/var.less | 2 +- packages/vant/src/address-list/README.md | 2 +- .../vant/src/address-list/README.zh-CN.md | 2 +- packages/vant/src/address-list/var.less | 2 +- packages/vant/src/calendar/README.md | 2 +- packages/vant/src/calendar/README.zh-CN.md | 2 +- packages/vant/src/calendar/var.less | 2 +- packages/vant/src/cascader/README.zh-CN.md | 2 +- packages/vant/src/cascader/var.less | 2 +- packages/vant/src/checkbox/README.md | 2 +- packages/vant/src/checkbox/README.zh-CN.md | 2 +- packages/vant/src/checkbox/var.less | 2 +- packages/vant/src/collapse-item/var.less | 2 +- packages/vant/src/collapse/README.md | 2 +- packages/vant/src/collapse/README.zh-CN.md | 2 +- packages/vant/src/config-provider/README.md | 1 + .../vant/src/config-provider/README.zh-CN.md | 1 + packages/vant/src/coupon-list/index.less | 2 +- packages/vant/src/field/README.md | 6 +-- packages/vant/src/field/README.zh-CN.md | 42 +++++++++---------- packages/vant/src/field/var.less | 6 +-- packages/vant/src/number-keyboard/README.md | 2 +- .../vant/src/number-keyboard/README.zh-CN.md | 2 +- packages/vant/src/popover/README.md | 2 +- packages/vant/src/popover/README.zh-CN.md | 2 +- packages/vant/src/popover/var.less | 2 +- packages/vant/src/radio/README.md | 2 +- packages/vant/src/radio/README.zh-CN.md | 2 +- packages/vant/src/radio/var.less | 2 +- packages/vant/src/share-sheet/README.md | 2 +- packages/vant/src/share-sheet/README.zh-CN.md | 2 +- packages/vant/src/share-sheet/var.less | 2 +- packages/vant/src/sidebar-item/var.less | 2 +- packages/vant/src/sidebar/README.md | 2 +- packages/vant/src/sidebar/README.zh-CN.md | 2 +- packages/vant/src/stepper/README.md | 2 +- packages/vant/src/stepper/README.zh-CN.md | 2 +- packages/vant/src/stepper/var.less | 2 +- packages/vant/src/style/css-variables.less | 4 +- packages/vant/src/style/var.less | 1 + packages/vant/src/tab/README.md | 2 +- packages/vant/src/tab/README.zh-CN.md | 2 +- packages/vant/src/tabs/var.less | 2 +- 45 files changed, 71 insertions(+), 66 deletions(-) diff --git a/packages/vant/src/action-sheet/README.md b/packages/vant/src/action-sheet/README.md index ee342726d..2b5010e0d 100644 --- a/packages/vant/src/action-sheet/README.md +++ b/packages/vant/src/action-sheet/README.md @@ -250,7 +250,7 @@ The component provides the following CSS variables, which can be used to customi | --van-action-sheet-item-font-size | _var(--van-font-size-lg)_ | - | | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - | | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - | -| --van-action-sheet-item-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-action-sheet-item-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-action-sheet-subname-color | _var(--van-text-color-secondary)_ | - | | --van-action-sheet-subname-font-size | _var(--van-font-size-sm)_ | - | | --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - | diff --git a/packages/vant/src/action-sheet/README.zh-CN.md b/packages/vant/src/action-sheet/README.zh-CN.md index 23996337f..7d4712154 100644 --- a/packages/vant/src/action-sheet/README.zh-CN.md +++ b/packages/vant/src/action-sheet/README.zh-CN.md @@ -262,7 +262,7 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant'; | --van-action-sheet-item-font-size | _var(--van-font-size-lg)_ | - | | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - | | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - | -| --van-action-sheet-item-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-action-sheet-item-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-action-sheet-subname-color | _var(--van-text-color-secondary)_ | - | | --van-action-sheet-subname-font-size | _var(--van-font-size-sm)_ | - | | --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - | diff --git a/packages/vant/src/action-sheet/var.less b/packages/vant/src/action-sheet/var.less index 81ae3fc51..8dd9a0682 100644 --- a/packages/vant/src/action-sheet/var.less +++ b/packages/vant/src/action-sheet/var.less @@ -10,7 +10,7 @@ @action-sheet-item-font-size: var(--van-font-size-lg); @action-sheet-item-line-height: var(--van-line-height-lg); @action-sheet-item-text-color: var(--van-text-color); -@action-sheet-item-disabled-text-color: var(--van-gray-5); +@action-sheet-item-disabled-text-color: var(--van-text-color-tertiary); @action-sheet-subname-color: var(--van-text-color-secondary); @action-sheet-subname-font-size: var(--van-font-size-sm); @action-sheet-subname-line-height: var(--van-line-height-sm); diff --git a/packages/vant/src/address-list/README.md b/packages/vant/src/address-list/README.md index c4822bffe..d1e3ee974 100644 --- a/packages/vant/src/address-list/README.md +++ b/packages/vant/src/address-list/README.md @@ -145,7 +145,7 @@ The component provides the following CSS variables, which can be used to customi | --van-address-list-add-button-z-index | _999_ | - | | --van-address-list-item-padding | _var(--van-padding-sm)_ | - | | --van-address-list-item-text-color | _var(--van-text-color)_ | - | -| --van-address-list-item-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-address-list-item-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --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-danger-color)_ | - | diff --git a/packages/vant/src/address-list/README.zh-CN.md b/packages/vant/src/address-list/README.zh-CN.md index 332a3c518..458f019b3 100644 --- a/packages/vant/src/address-list/README.zh-CN.md +++ b/packages/vant/src/address-list/README.zh-CN.md @@ -145,7 +145,7 @@ import type { AddressListProps, AddressListAddress } from 'vant'; | --van-address-list-add-button-z-index | _999_ | - | | --van-address-list-item-padding | _var(--van-padding-sm)_ | - | | --van-address-list-item-text-color | _var(--van-text-color)_ | - | -| --van-address-list-item-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-address-list-item-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --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-danger-color)_ | - | diff --git a/packages/vant/src/address-list/var.less b/packages/vant/src/address-list/var.less index b4cab4806..5ba5596b2 100644 --- a/packages/vant/src/address-list/var.less +++ b/packages/vant/src/address-list/var.less @@ -9,7 +9,7 @@ @address-list-add-button-z-index: 999; @address-list-item-padding: var(--van-padding-sm); @address-list-item-text-color: var(--van-text-color); -@address-list-item-disabled-text-color: var(--van-gray-5); +@address-list-item-disabled-text-color: var(--van-text-color-tertiary); @address-list-item-font-size: 13px; @address-list-item-line-height: var(--van-line-height-sm); @address-list-item-radio-icon-color: var(--van-danger-color); diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md index bde19ba96..0693c06d9 100644 --- a/packages/vant/src/calendar/README.md +++ b/packages/vant/src/calendar/README.md @@ -403,6 +403,6 @@ The component provides the following CSS variables, which can be used to customi | --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-danger-color)_ | - | -| --van-calendar-day-disabled-color | _var(--van-gray-5)_ | - | +| --van-calendar-day-disabled-color | _var(--van-text-color-tertiary)_ | - | | --van-calendar-confirm-button-height | _36px_ | - | | --van-calendar-confirm-button-margin | _7px 0_ | - | diff --git a/packages/vant/src/calendar/README.zh-CN.md b/packages/vant/src/calendar/README.zh-CN.md index 5611753b3..dd2a10e2a 100644 --- a/packages/vant/src/calendar/README.zh-CN.md +++ b/packages/vant/src/calendar/README.zh-CN.md @@ -409,7 +409,7 @@ calendarRef.value?.reset(); | --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-danger-color)_ | - | -| --van-calendar-day-disabled-color | _var(--van-gray-5)_ | - | +| --van-calendar-day-disabled-color | _var(--van-text-color-tertiary)_ | - | | --van-calendar-confirm-button-height | _36px_ | - | | --van-calendar-confirm-button-margin | _7px 0_ | - | diff --git a/packages/vant/src/calendar/var.less b/packages/vant/src/calendar/var.less index 1ab5ae283..6bbf24d55 100644 --- a/packages/vant/src/calendar/var.less +++ b/packages/vant/src/calendar/var.less @@ -22,6 +22,6 @@ @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-danger-color); -@calendar-day-disabled-color: var(--van-gray-5); +@calendar-day-disabled-color: var(--van-text-color-tertiary); @calendar-confirm-button-height: 36px; @calendar-confirm-button-margin: 7px 0; diff --git a/packages/vant/src/cascader/README.zh-CN.md b/packages/vant/src/cascader/README.zh-CN.md index e697f3e3d..196ee7d9d 100644 --- a/packages/vant/src/cascader/README.zh-CN.md +++ b/packages/vant/src/cascader/README.zh-CN.md @@ -322,6 +322,6 @@ import type { CascaderProps, CascaderOption, CascaderFieldNames } from 'vant'; | --van-cascader-tabs-height | _48px_ | - | | --van-cascader-active-color | _var(--van-danger-color)_ | - | | --van-cascader-options-height | _384px_ | - | -| --van-cascader-option-disabled-color | _van(--van-gray-5)_ | - | +| --van-cascader-option-disabled-color | _var(--van-text-color-tertiary)_ | - | | --van-cascader-tab-color | _var(--van-text-color)_ | - | | --van-cascader-unselected-tab-color | _var(--van-text-color-secondary)_ | - | diff --git a/packages/vant/src/cascader/var.less b/packages/vant/src/cascader/var.less index 5d631841b..ae325cd5a 100644 --- a/packages/vant/src/cascader/var.less +++ b/packages/vant/src/cascader/var.less @@ -10,6 +10,6 @@ @cascader-tabs-height: 48px; @cascader-active-color: var(--van-danger-color); @cascader-options-height: 384px; -@cascader-option-disabled-color: var(--van-gray-5); +@cascader-option-disabled-color: var(--van-text-color-tertiary); @cascader-tab-color: var(--van-text-color); @cascader-unselected-tab-color: var(--van-text-color-secondary); diff --git a/packages/vant/src/checkbox/README.md b/packages/vant/src/checkbox/README.md index 033962789..0bbc9faa5 100644 --- a/packages/vant/src/checkbox/README.md +++ b/packages/vant/src/checkbox/README.md @@ -372,5 +372,5 @@ The component provides the following CSS variables, which can be used to customi | --van-checkbox-label-color | _var(--van-text-color)_ | - | | --van-checkbox-checked-icon-color | _var(--van-primary-color)_ | - | | --van-checkbox-disabled-icon-color | _var(--van-gray-5)_ | - | -| --van-checkbox-disabled-label-color | _var(--van-gray-5)_ | - | +| --van-checkbox-disabled-label-color | _var(--van-text-color-tertiary)_ | - | | --van-checkbox-disabled-background-color | _var(--van-border-color)_ | - | diff --git a/packages/vant/src/checkbox/README.zh-CN.md b/packages/vant/src/checkbox/README.zh-CN.md index 1cbc3cbf1..60b7ca709 100644 --- a/packages/vant/src/checkbox/README.zh-CN.md +++ b/packages/vant/src/checkbox/README.zh-CN.md @@ -390,5 +390,5 @@ checkboxGroupRef.value?.toggleAll(); | --van-checkbox-label-color | _var(--van-text-color)_ | - | | --van-checkbox-checked-icon-color | _var(--van-primary-color)_ | - | | --van-checkbox-disabled-icon-color | _var(--van-gray-5)_ | - | -| --van-checkbox-disabled-label-color | _var(--van-gray-5)_ | - | +| --van-checkbox-disabled-label-color | _var(--van-text-color-tertiary)_ | - | | --van-checkbox-disabled-background-color | _var(--van-border-color)_ | - | diff --git a/packages/vant/src/checkbox/var.less b/packages/vant/src/checkbox/var.less index a58deda52..6b51dad06 100644 --- a/packages/vant/src/checkbox/var.less +++ b/packages/vant/src/checkbox/var.less @@ -7,5 +7,5 @@ @checkbox-label-color: var(--van-text-color); @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-label-color: var(--van-text-color-tertiary); @checkbox-disabled-background-color: var(--van-border-color); diff --git a/packages/vant/src/collapse-item/var.less b/packages/vant/src/collapse-item/var.less index 475e2ccc2..34987c562 100644 --- a/packages/vant/src/collapse-item/var.less +++ b/packages/vant/src/collapse-item/var.less @@ -6,4 +6,4 @@ @collapse-item-content-line-height: 1.5; @collapse-item-content-text-color: var(--van-text-color-secondary); @collapse-item-content-background-color: var(--van-background-color-light); -@collapse-item-title-disabled-color: var(--van-gray-5); +@collapse-item-title-disabled-color: var(--van-text-color-tertiary); diff --git a/packages/vant/src/collapse/README.md b/packages/vant/src/collapse/README.md index 3b79a4445..bab9fed02 100644 --- a/packages/vant/src/collapse/README.md +++ b/packages/vant/src/collapse/README.md @@ -198,4 +198,4 @@ The component provides the following CSS variables, which can be used to customi | --van-collapse-item-content-line-height | _1.5_ | - | | --van-collapse-item-content-text-color | _var(--van-text-color-secondary)_ | - | | --van-collapse-item-content-background-color | _var(--van-background-color-light)_ | - | -| --van-collapse-item-title-disabled-color | _var(--van-gray-5)_ | - | +| --van-collapse-item-title-disabled-color | _var(--van-text-color-tertiary)_ | - | diff --git a/packages/vant/src/collapse/README.zh-CN.md b/packages/vant/src/collapse/README.zh-CN.md index a5ecc5b4d..680d2d97b 100644 --- a/packages/vant/src/collapse/README.zh-CN.md +++ b/packages/vant/src/collapse/README.zh-CN.md @@ -196,4 +196,4 @@ collapseItemRef.value?.toggle(); | --van-collapse-item-content-line-height | _1.5_ | - | | --van-collapse-item-content-text-color | _var(--van-text-color-secondary)_ | - | | --van-collapse-item-content-background-color | _var(--van-background-color-light)_ | - | -| --van-collapse-item-title-disabled-color | _var(--van-gray-5)_ | - | +| --van-collapse-item-title-disabled-color | _var(--van-text-color-tertiary)_ | - | diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md index 7a584151a..a6a4bb053 100644 --- a/packages/vant/src/config-provider/README.md +++ b/packages/vant/src/config-provider/README.md @@ -157,6 +157,7 @@ There are all **Basic Variables** below, for component CSS Variables, please ref --van-warning-color: var(--van-orange); --van-text-color: var(--van-gray-8); --van-text-color-secondary: var(--van-gray-6); +--van-text-color-tertiary: var(--van-gray-5); --van-text-link-color: #576b95; --van-active-color: var(--van-gray-2); --van-active-opacity: 0.6; diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md index 72d2c4d7a..e72ed3d6e 100644 --- a/packages/vant/src/config-provider/README.zh-CN.md +++ b/packages/vant/src/config-provider/README.zh-CN.md @@ -159,6 +159,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变 --van-warning-color: var(--van-orange); --van-text-color: var(--van-gray-8); --van-text-color-secondary: var(--van-gray-6); +--van-text-color-tertiary: var(--van-gray-5); --van-text-link-color: #576b95; --van-active-color: var(--van-gray-2); --van-active-opacity: 0.6; diff --git a/packages/vant/src/coupon-list/index.less b/packages/vant/src/coupon-list/index.less index 9fa7f7fc5..1c8e55ab0 100644 --- a/packages/vant/src/coupon-list/index.less +++ b/packages/vant/src/coupon-list/index.less @@ -27,7 +27,7 @@ border-radius: 17px; &::placeholder { - color: var(--van-gray-5); + color: var(--van-text-color-tertiary); } } diff --git a/packages/vant/src/field/README.md b/packages/vant/src/field/README.md index b7cc4216a..626e7b442 100644 --- a/packages/vant/src/field/README.md +++ b/packages/vant/src/field/README.md @@ -362,8 +362,8 @@ The component provides the following CSS variables, which can be used to customi | --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-danger-color)_ | - | -| --van-field-input-disabled-text-color | _var(--van-gray-5)_ | - | -| --van-field-placeholder-text-color | _var(--van-gray-5)_ | - | +| --van-field-input-disabled-text-color | _var(--van-text-color-tertiary)_ | - | +| --van-field-placeholder-text-color | _var(--van-text-color-tertiary)_ | - | | --van-field-icon-size | _16px_ | - | | --van-field-clear-icon-size | _16px_ | - | | --van-field-clear-icon-color | _var(--van-gray-5)_ | - | @@ -374,5 +374,5 @@ The component provides the following CSS variables, which can be used to customi | --van-field-word-limit-color | _var(--van-gray-7)_ | - | | --van-field-word-limit-font-size | _var(--van-font-size-sm)_ | - | | --van-field-word-limit-line-height | _16px_ | - | -| --van-field-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-field-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-field-required-mark-color | _var(--van-red)_ | - | diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md index e0c303b4c..dffe9ba10 100644 --- a/packages/vant/src/field/README.zh-CN.md +++ b/packages/vant/src/field/README.zh-CN.md @@ -374,27 +374,27 @@ fieldRef.value?.focus(); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------- | ------------------------- | ---- | -| --van-field-label-width | _6.2em_ | - | -| --van-field-label-color | _var(--van-gray-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-danger-color)_ | - | -| --van-field-input-disabled-text-color | _var(--van-gray-5)_ | - | -| --van-field-placeholder-text-color | _var(--van-gray-5)_ | - | -| --van-field-icon-size | _16px_ | - | -| --van-field-clear-icon-size | _16px_ | - | -| --van-field-clear-icon-color | _var(--van-gray-5)_ | - | -| --van-field-right-icon-color | _var(--van-gray-6)_ | - | -| --van-field-error-message-color | _var(--van-danger-color)_ | - | -| --van-field-error-message-font-size | _12px_ | - | -| --van-field-text-area-min-height | _60px_ | - | -| --van-field-word-limit-color | _var(--van-gray-7)_ | - | -| --van-field-word-limit-font-size | _var(--van-font-size-sm)_ | - | -| --van-field-word-limit-line-height | _16px_ | - | -| --van-field-disabled-text-color | _var(--van-gray-5)_ | - | -| --van-field-required-mark-color | _var(--van-red)_ | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-field-label-width | _6.2em_ | - | +| --van-field-label-color | _var(--van-gray-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-danger-color)_ | - | +| --van-field-input-disabled-text-color | _var(--van-text-color-tertiary)_ | - | +| --van-field-placeholder-text-color | _var(--van-text-color-tertiary)_ | - | +| --van-field-icon-size | _16px_ | - | +| --van-field-clear-icon-size | _16px_ | - | +| --van-field-clear-icon-color | _var(--van-gray-5)_ | - | +| --van-field-right-icon-color | _var(--van-gray-6)_ | - | +| --van-field-error-message-color | _var(--van-danger-color)_ | - | +| --van-field-error-message-font-size | _12px_ | - | +| --van-field-text-area-min-height | _60px_ | - | +| --van-field-word-limit-color | _var(--van-gray-7)_ | - | +| --van-field-word-limit-font-size | _var(--van-font-size-sm)_ | - | +| --van-field-word-limit-line-height | _16px_ | - | +| --van-field-disabled-text-color | _var(--van-text-color-tertiary)_ | - | +| --van-field-required-mark-color | _var(--van-red)_ | - | ## 常见问题 diff --git a/packages/vant/src/field/var.less b/packages/vant/src/field/var.less index a3764c5b6..13f581282 100644 --- a/packages/vant/src/field/var.less +++ b/packages/vant/src/field/var.less @@ -5,8 +5,8 @@ @field-label-margin-right: var(--van-padding-sm); @field-input-text-color: var(--van-text-color); @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-input-disabled-text-color: var(--van-text-color-tertiary); +@field-placeholder-text-color: var(--van-text-color-tertiary); @field-icon-size: 16px; @field-clear-icon-size: 16px; @field-clear-icon-color: var(--van-gray-5); @@ -17,5 +17,5 @@ @field-word-limit-color: var(--van-gray-7); @field-word-limit-font-size: var(--van-font-size-sm); @field-word-limit-line-height: 16px; -@field-disabled-text-color: var(--van-gray-5); +@field-disabled-text-color: var(--van-text-color-tertiary); @field-required-mark-color: var(--van-red); diff --git a/packages/vant/src/number-keyboard/README.md b/packages/vant/src/number-keyboard/README.md index 387833d54..51ce01f7b 100644 --- a/packages/vant/src/number-keyboard/README.md +++ b/packages/vant/src/number-keyboard/README.md @@ -225,7 +225,7 @@ The component provides the following CSS variables, which can be used to customi | --van-number-keyboard-key-height | _48px_ | - | | --van-number-keyboard-key-font-size | _28px_ | - | | --van-number-keyboard-key-active-color | _var(--van-gray-3)_ | - | -| --van-number-keyboard-key-background-color | _van(--van-white)_ | - | +| --van-number-keyboard-key-background-color | _var(--van-white)_ | - | | --van-number-keyboard-delete-font-size | _var(--van-font-size-lg)_ | - | | --van-number-keyboard-title-color | _var(--van-gray-7)_ | - | | --van-number-keyboard-title-height | _34px_ | - | diff --git a/packages/vant/src/number-keyboard/README.zh-CN.md b/packages/vant/src/number-keyboard/README.zh-CN.md index c38c899ea..e16b9421c 100644 --- a/packages/vant/src/number-keyboard/README.zh-CN.md +++ b/packages/vant/src/number-keyboard/README.zh-CN.md @@ -232,7 +232,7 @@ import type { NumberKeyboardProps, NumberKeyboardTheme } from 'vant'; | --van-number-keyboard-key-height | _48px_ | - | | --van-number-keyboard-key-font-size | _28px_ | - | | --van-number-keyboard-key-active-color | _var(--van-gray-3)_ | - | -| --van-number-keyboard-key-background-color | _van(--van-white)_ | - | +| --van-number-keyboard-key-background-color | _var(--van-white)_ | - | | --van-number-keyboard-delete-font-size | _var(--van-font-size-lg)_ | - | | --van-number-keyboard-title-color | _var(--van-gray-7)_ | - | | --van-number-keyboard-title-height | _34px_ | - | diff --git a/packages/vant/src/popover/README.md b/packages/vant/src/popover/README.md index 0989259b8..7c9fb4cdd 100644 --- a/packages/vant/src/popover/README.md +++ b/packages/vant/src/popover/README.md @@ -286,7 +286,7 @@ The component provides the following CSS variables, which can be used to customi | --van-popover-action-icon-size | _20px_ | - | | --van-popover-light-text-color | _var(--van-text-color)_ | - | | --van-popover-light-background-color | _var(--van-background-color-light)_ | - | -| --van-popover-light-action-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-popover-light-action-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-popover-dark-text-color | _var(--van-white)_ | - | | --van-popover-dark-background-color | _#4a4a4a_ | - | | --van-popover-dark-action-disabled-text-color | _var(--van-text-color-secondary)_ | - | diff --git a/packages/vant/src/popover/README.zh-CN.md b/packages/vant/src/popover/README.zh-CN.md index ce825469b..27c883071 100644 --- a/packages/vant/src/popover/README.zh-CN.md +++ b/packages/vant/src/popover/README.zh-CN.md @@ -298,7 +298,7 @@ import type { | --van-popover-action-icon-size | _20px_ | - | | --van-popover-light-text-color | _var(--van-text-color)_ | - | | --van-popover-light-background-color | _var(--van-background-color-light)_ | - | -| --van-popover-light-action-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-popover-light-action-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-popover-dark-text-color | _var(--van-white)_ | - | | --van-popover-dark-background-color | _#4a4a4a_ | - | | --van-popover-dark-action-disabled-text-color | _var(--van-text-color-secondary)_ | - | diff --git a/packages/vant/src/popover/var.less b/packages/vant/src/popover/var.less index 1c1e03c17..8b45280a1 100644 --- a/packages/vant/src/popover/var.less +++ b/packages/vant/src/popover/var.less @@ -9,7 +9,7 @@ @popover-action-icon-size: 20px; @popover-light-text-color: var(--van-text-color); @popover-light-background-color: var(--van-background-color-light); -@popover-light-action-disabled-text-color: var(--van-gray-5); +@popover-light-action-disabled-text-color: var(--van-text-color-tertiary); @popover-dark-text-color: var(--van-white); @popover-dark-background-color: #4a4a4a; @popover-dark-action-disabled-text-color: var(--van-text-color-secondary); diff --git a/packages/vant/src/radio/README.md b/packages/vant/src/radio/README.md index 2ce13cff4..f99b06f74 100644 --- a/packages/vant/src/radio/README.md +++ b/packages/vant/src/radio/README.md @@ -228,5 +228,5 @@ The component provides the following CSS variables, which can be used to customi | --van-radio-label-color | _var(--van-text-color)_ | - | | --van-radio-checked-icon-color | _var(--van-primary-color)_ | - | | --van-radio-disabled-icon-color | _var(--van-gray-5)_ | - | -| --van-radio-disabled-label-color | _var(--van-gray-5)_ | - | +| --van-radio-disabled-label-color | _var(--van-text-color-tertiary)_ | - | | --van-radio-disabled-background-color | _var(--van-border-color)_ | - | diff --git a/packages/vant/src/radio/README.zh-CN.md b/packages/vant/src/radio/README.zh-CN.md index c78bc908b..bc5c33c34 100644 --- a/packages/vant/src/radio/README.zh-CN.md +++ b/packages/vant/src/radio/README.zh-CN.md @@ -242,5 +242,5 @@ import type { | --van-radio-label-color | _var(--van-text-color)_ | - | | --van-radio-checked-icon-color | _var(--van-primary-color)_ | - | | --van-radio-disabled-icon-color | _var(--van-gray-5)_ | - | -| --van-radio-disabled-label-color | _var(--van-gray-5)_ | - | +| --van-radio-disabled-label-color | _var(--van-text-color-tertiary)_ | - | | --van-radio-disabled-background-color | _var(--van-border-color)_ | - | diff --git a/packages/vant/src/radio/var.less b/packages/vant/src/radio/var.less index 80bc9e142..9a50c59aa 100644 --- a/packages/vant/src/radio/var.less +++ b/packages/vant/src/radio/var.less @@ -7,5 +7,5 @@ @radio-label-color: var(--van-text-color); @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-label-color: var(--van-text-color-tertiary); @radio-disabled-background-color: var(--van-border-color); diff --git a/packages/vant/src/share-sheet/README.md b/packages/vant/src/share-sheet/README.md index 241dca69e..a5abc6f86 100644 --- a/packages/vant/src/share-sheet/README.md +++ b/packages/vant/src/share-sheet/README.md @@ -245,7 +245,7 @@ The component provides the following CSS variables, which can be used to customi | --van-share-sheet-icon-size | _48px_ | - | | --van-share-sheet-option-name-color | _var(--van-gray-7)_ | - | | --van-share-sheet-option-name-font-size | _var(--van-font-size-sm)_ | - | -| --van-share-sheet-option-description-color | _var(--van-gray-5)_ | - | +| --van-share-sheet-option-description-color | _var(--van-text-color-tertiary)_ | - | | --van-share-sheet-option-description-font-size | _var(--van-font-size-sm)_ | - | | --van-share-sheet-cancel-button-font-size | _var(--van-font-size-lg)_ | - | | --van-share-sheet-cancel-button-height | _48px_ | - | diff --git a/packages/vant/src/share-sheet/README.zh-CN.md b/packages/vant/src/share-sheet/README.zh-CN.md index c8681c05d..a1e03dac9 100644 --- a/packages/vant/src/share-sheet/README.zh-CN.md +++ b/packages/vant/src/share-sheet/README.zh-CN.md @@ -259,7 +259,7 @@ import type { | --van-share-sheet-icon-size | _48px_ | - | | --van-share-sheet-option-name-color | _var(--van-gray-7)_ | - | | --van-share-sheet-option-name-font-size | _var(--van-font-size-sm)_ | - | -| --van-share-sheet-option-description-color | _var(--van-gray-5)_ | - | +| --van-share-sheet-option-description-color | _var(--van-text-color-tertiary)_ | - | | --van-share-sheet-option-description-font-size | _var(--van-font-size-sm)_ | - | | --van-share-sheet-cancel-button-font-size | _var(--van-font-size-lg)_ | - | | --van-share-sheet-cancel-button-height | _48px_ | - | diff --git a/packages/vant/src/share-sheet/var.less b/packages/vant/src/share-sheet/var.less index 4f25346c6..d5750e246 100644 --- a/packages/vant/src/share-sheet/var.less +++ b/packages/vant/src/share-sheet/var.less @@ -11,7 +11,7 @@ @share-sheet-icon-size: 48px; @share-sheet-option-name-color: var(--van-gray-7); @share-sheet-option-name-font-size: var(--van-font-size-sm); -@share-sheet-option-description-color: var(--van-gray-5); +@share-sheet-option-description-color: var(--van-text-color-tertiary); @share-sheet-option-description-font-size: var(--van-font-size-sm); @share-sheet-cancel-button-font-size: var(--van-font-size-lg); @share-sheet-cancel-button-height: 48px; diff --git a/packages/vant/src/sidebar-item/var.less b/packages/vant/src/sidebar-item/var.less index 1480cbfe6..4dd4ae69d 100644 --- a/packages/vant/src/sidebar-item/var.less +++ b/packages/vant/src/sidebar-item/var.less @@ -3,7 +3,7 @@ @sidebar-font-size: var(--van-font-size-md); @sidebar-line-height: var(--van-line-height-md); @sidebar-text-color: var(--van-text-color); -@sidebar-disabled-text-color: var(--van-gray-5); +@sidebar-disabled-text-color: var(--van-text-color-tertiary); @sidebar-padding: 20px var(--van-padding-sm); @sidebar-active-color: var(--van-active-color); @sidebar-background-color: var(--van-background-color); diff --git a/packages/vant/src/sidebar/README.md b/packages/vant/src/sidebar/README.md index abd7a6a64..7d74d0cc0 100644 --- a/packages/vant/src/sidebar/README.md +++ b/packages/vant/src/sidebar/README.md @@ -144,7 +144,7 @@ The component provides the following CSS variables, which can be used to customi | --van-sidebar-font-size | _var(--van-font-size-md)_ | - | | --van-sidebar-line-height | _var(--van-line-height-md)_ | - | | --van-sidebar-text-color | _var(--van-text-color)_ | - | -| --van-sidebar-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-sidebar-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-sidebar-padding | _20px var(--van-padding-sm)_ | - | | --van-sidebar-active-color | _var(--van-active-color)_ | - | | --van-sidebar-background-color | _var(--van-background-color)_ | - | diff --git a/packages/vant/src/sidebar/README.zh-CN.md b/packages/vant/src/sidebar/README.zh-CN.md index 20ab4b6de..6145560dc 100644 --- a/packages/vant/src/sidebar/README.zh-CN.md +++ b/packages/vant/src/sidebar/README.zh-CN.md @@ -152,7 +152,7 @@ import type { SidebarProps, SidebarItemProps } from 'vant'; | --van-sidebar-font-size | _var(--van-font-size-md)_ | - | | --van-sidebar-line-height | _var(--van-line-height-md)_ | - | | --van-sidebar-text-color | _var(--van-text-color)_ | - | -| --van-sidebar-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-sidebar-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-sidebar-padding | _20px var(--van-padding-sm)_ | - | | --van-sidebar-active-color | _var(--van-active-color)_ | - | | --van-sidebar-background-color | _var(--van-background-color)_ | - | diff --git a/packages/vant/src/stepper/README.md b/packages/vant/src/stepper/README.md index fa24ce7a7..1bed8f99b 100644 --- a/packages/vant/src/stepper/README.md +++ b/packages/vant/src/stepper/README.md @@ -184,6 +184,6 @@ The component provides the following CSS variables, which can be used to customi | --van-stepper-input-font-size | _var(--van-font-size-md)_ | - | | --van-stepper-input-line-height | _normal_ | - | | --van-stepper-input-text-color | _var(--van-text-color)_ | - | -| --van-stepper-input-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-stepper-input-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-stepper-input-disabled-background-color | _var(--van-active-color)_ | - | | --van-stepper-border-radius | _var(--van-border-radius-md)_ | - | diff --git a/packages/vant/src/stepper/README.zh-CN.md b/packages/vant/src/stepper/README.zh-CN.md index 6e9d5bde4..c56bfbc4f 100644 --- a/packages/vant/src/stepper/README.zh-CN.md +++ b/packages/vant/src/stepper/README.zh-CN.md @@ -204,7 +204,7 @@ import type { StepperTheme, StepperProps } from 'vant'; | --van-stepper-input-font-size | _var(--van-font-size-md)_ | - | | --van-stepper-input-line-height | _normal_ | - | | --van-stepper-input-text-color | _var(--van-text-color)_ | - | -| --van-stepper-input-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-stepper-input-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-stepper-input-disabled-background-color | _var(--van-active-color)_ | - | | --van-stepper-border-radius | _var(--van-border-radius-md)_ | - | diff --git a/packages/vant/src/stepper/var.less b/packages/vant/src/stepper/var.less index adaa98d88..79df7edb0 100644 --- a/packages/vant/src/stepper/var.less +++ b/packages/vant/src/stepper/var.less @@ -11,6 +11,6 @@ @stepper-input-font-size: var(--van-font-size-md); @stepper-input-line-height: normal; @stepper-input-text-color: var(--van-text-color); -@stepper-input-disabled-text-color: var(--van-gray-5); +@stepper-input-disabled-text-color: var(--van-text-color-tertiary); @stepper-input-disabled-background-color: var(--van-active-color); @stepper-border-radius: var(--van-border-radius-md); diff --git a/packages/vant/src/style/css-variables.less b/packages/vant/src/style/css-variables.less index f26480d2d..96495f3f1 100644 --- a/packages/vant/src/style/css-variables.less +++ b/packages/vant/src/style/css-variables.less @@ -29,12 +29,14 @@ --van-danger-color: @danger-color; --van-warning-color: @warning-color; --van-text-color: @text-color; + --van-text-color-secondary: @text-color-secondary; + --van-text-color-tertiary: @text-color-tertiary; + --van-text-link-color: @text-link-color; --van-active-color: @active-color; --van-active-opacity: @active-opacity; --van-disabled-opacity: @disabled-opacity; --van-background-color: @background-color; --van-background-color-light: @background-color-light; - --van-text-link-color: @text-link-color; // Padding --van-padding-base: @padding-base; diff --git a/packages/vant/src/style/var.less b/packages/vant/src/style/var.less index dfd1e11f2..5cdde6726 100644 --- a/packages/vant/src/style/var.less +++ b/packages/vant/src/style/var.less @@ -27,6 +27,7 @@ @warning-color: var(--van-orange); @text-color: var(--van-gray-8); @text-color-secondary: var(--van-gray-6); +@text-color-tertiary: var(--van-gray-5); @text-link-color: #576b95; @active-color: var(--van-gray-2); @active-opacity: 0.6; diff --git a/packages/vant/src/tab/README.md b/packages/vant/src/tab/README.md index 163c7a031..d83979911 100644 --- a/packages/vant/src/tab/README.md +++ b/packages/vant/src/tab/README.md @@ -325,7 +325,7 @@ The component provides the following CSS variables, which can be used to customi | --- | --- | --- | | --van-tab-text-color | _var(--van-gray-7)_ | - | | --van-tab-active-text-color | _var(--van-text-color)_ | - | -| --van-tab-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-tab-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-tab-font-size | _var(--van-font-size-md)_ | - | | --van-tab-line-height | _var(--van-line-height-md)_ | - | | --van-tabs-default-color | _var(--van-danger-color)_ | - | diff --git a/packages/vant/src/tab/README.zh-CN.md b/packages/vant/src/tab/README.zh-CN.md index ae9dd7d27..32dae46f7 100644 --- a/packages/vant/src/tab/README.zh-CN.md +++ b/packages/vant/src/tab/README.zh-CN.md @@ -338,7 +338,7 @@ tabsRef.value?.scrollTo(0); | ------------------------------- | ----------------------------------- | ---- | | --van-tab-text-color | _var(--van-gray-7)_ | - | | --van-tab-active-text-color | _var(--van-text-color)_ | - | -| --van-tab-disabled-text-color | _var(--van-gray-5)_ | - | +| --van-tab-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-tab-font-size | _var(--van-font-size-md)_ | - | | --van-tab-line-height | _var(--van-line-height-md)_ | - | | --van-tabs-default-color | _var(--van-danger-color)_ | - | diff --git a/packages/vant/src/tabs/var.less b/packages/vant/src/tabs/var.less index b15510b4d..90198f09f 100644 --- a/packages/vant/src/tabs/var.less +++ b/packages/vant/src/tabs/var.less @@ -2,7 +2,7 @@ @tab-text-color: var(--van-gray-7); @tab-active-text-color: var(--van-text-color); -@tab-disabled-text-color: var(--van-gray-5); +@tab-disabled-text-color: var(--van-text-color-tertiary); @tab-font-size: var(--van-font-size-md); @tab-line-height: var(--van-line-height-md); @tabs-default-color: var(--van-danger-color);