feat: add --van-text-color-secondary css var (#9759)

* feat: add --van-text-color-secondary css var

* chore: upd
This commit is contained in:
neverland 2021-10-31 19:47:17 +08:00 committed by GitHub
parent 3400c33450
commit 85a636dfbc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
67 changed files with 144 additions and 142 deletions

View File

@ -243,7 +243,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-action-sheet-max-height | _80%_ | - |
| --van-action-sheet-header-height | _48px_ | - |
| --van-action-sheet-header-font-size | _var(--van-font-size-lg)_ | - |
| --van-action-sheet-description-color | _var(--van-gray-6)_ | - |
| --van-action-sheet-description-color | _var(--van-text-color-secondary)_ | - |
| --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - |
| --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - |
| --van-action-sheet-item-background | _var(--van-background-color-light)_ | - |
@ -251,7 +251,7 @@ The component provides the following CSS variables, which can be used to customi
| --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-subname-color | _var(--van-gray-6)_ | - |
| --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)_ | - |
| --van-action-sheet-close-icon-size | _22px_ | - |

View File

@ -255,7 +255,7 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
| --van-action-sheet-max-height | _80%_ | - |
| --van-action-sheet-header-height | _48px_ | - |
| --van-action-sheet-header-font-size | _var(--van-font-size-lg)_ | - |
| --van-action-sheet-description-color | _var(--van-gray-6)_ | - |
| --van-action-sheet-description-color | _var(--van-text-color-secondary)_ | - |
| --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - |
| --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - |
| --van-action-sheet-item-background | _var(--van-background-color-light)_ | - |
@ -263,7 +263,7 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
| --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-subname-color | _var(--van-gray-6)_ | - |
| --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)_ | - |
| --van-action-sheet-close-icon-size | _22px_ | - |

View File

@ -3,7 +3,7 @@
@action-sheet-max-height: 80%;
@action-sheet-header-height: 48px;
@action-sheet-header-font-size: var(--van-font-size-lg);
@action-sheet-description-color: var(--van-gray-6);
@action-sheet-description-color: var(--van-text-color-secondary);
@action-sheet-description-font-size: var(--van-font-size-md);
@action-sheet-description-line-height: var(--van-line-height-md);
@action-sheet-item-background: var(--van-background-color-light);
@ -11,7 +11,7 @@
@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-subname-color: var(--van-gray-6);
@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);
@action-sheet-close-icon-size: 22px;

View File

@ -138,7 +138,7 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-address-list-padding | _var(--van-padding-sm) var(--van-padding-sm) 80px_ | - |
| --van-address-list-disabled-text-color | _var(--van-gray-6)_ | - |
| --van-address-list-disabled-text-color | _var(--van-text-color-secondary)_ | - |
| --van-address-list-disabled-text-padding | _var(--van-padding-base) \* 5 0 var(--van-padding-md)_ | - |
| --van-address-list-disabled-text-font-size | _var(--van-font-size-md)_ | - |
| --van-address-list-disabled-text-line-height | _var(--van-line-height-md)_ | - |

View File

@ -138,7 +138,7 @@ import type { AddressListProps, AddressListAddress } from 'vant';
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-address-list-padding | _var(--van-padding-sm) var(--van-padding-sm) 80px_ | - |
| --van-address-list-disabled-text-color | _var(--van-gray-6)_ | - |
| --van-address-list-disabled-text-color | _var(--van-text-color-secondary)_ | - |
| --van-address-list-disabled-text-padding | _var(--van-padding-base) \* 5 0 var(--van-padding-md)_ | - |
| --van-address-list-disabled-text-font-size | _var(--van-font-size-md)_ | - |
| --van-address-list-disabled-text-line-height | _var(--van-line-height-md)_ | - |

View File

@ -1,7 +1,7 @@
@import '../style/var.less';
@address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
@address-list-disabled-text-color: var(--van-gray-6);
@address-list-disabled-text-color: var(--van-text-color-secondary);
@address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0
var(--van-padding-md);
@address-list-disabled-text-font-size: var(--van-font-size-md);

View File

@ -134,8 +134,8 @@ The component provides the following CSS variables, which can be used to customi
| --van-card-desc-color | _var(--van-gray-7)_ | - |
| --van-card-desc-line-height | _var(--van-line-height-md)_ | - |
| --van-card-price-color | _var(--van-gray-8)_ | - |
| --van-card-origin-price-color | _var(--van-gray-6)_ | - |
| --van-card-num-color | _var(--van-gray-6)_ | - |
| --van-card-origin-price-color | _var(--van-text-color-secondary)_ | - |
| --van-card-num-color | _var(--van-text-color-secondary)_ | - |
| --van-card-origin-price-font-size | _var(--van-font-size-xs)_ | - |
| --van-card-price-font-size | _var(--van-font-size-sm)_ | - |
| --van-card-price-integer-font-size | _var(--van-font-size-lg)_ | - |

View File

@ -136,8 +136,8 @@ import type { CardProps } from 'vant';
| --van-card-desc-color | _var(--van-gray-7)_ | - |
| --van-card-desc-line-height | _var(--van-line-height-md)_ | - |
| --van-card-price-color | _var(--van-gray-8)_ | - |
| --van-card-origin-price-color | _var(--van-gray-6)_ | - |
| --van-card-num-color | _var(--van-gray-6)_ | - |
| --van-card-origin-price-color | _var(--van-text-color-secondary)_ | - |
| --van-card-num-color | _var(--van-text-color-secondary)_ | - |
| --van-card-origin-price-font-size | _var(--van-font-size-xs)_ | - |
| --van-card-price-font-size | _var(--van-font-size-sm)_ | - |
| --van-card-price-integer-font-size | _var(--van-font-size-lg)_ | - |

View File

@ -10,8 +10,8 @@
@card-desc-color: var(--van-gray-7);
@card-desc-line-height: var(--van-line-height-md);
@card-price-color: var(--van-gray-8);
@card-origin-price-color: var(--van-gray-6);
@card-num-color: var(--van-gray-6);
@card-origin-price-color: var(--van-text-color-secondary);
@card-num-color: var(--van-text-color-secondary);
@card-origin-price-font-size: var(--van-font-size-xs);
@card-price-font-size: var(--van-font-size-sm);
@card-price-integer-font-size: var(--van-font-size-lg);

View File

@ -312,4 +312,4 @@ The component provides the following CSS variables, which can be used to customi
| --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-gray-6)_ | - |
| --van-cascader-unselected-tab-color | _var(--van-text-color-secondary)_ | - |

View File

@ -310,19 +310,19 @@ import type { CascaderProps, CascaderOption, CascaderFieldNames } from 'vant';
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| -------------------------------------- | ------------------------- | ---- |
| --van-cascader-header-height | _48px_ | - |
| --van-cascader-header-padding | _0 var(--van-padding-md)_ | - |
| --van-cascader-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-cascader-title-line-height | _20px_ | - |
| --van-cascader-close-icon-size | _22px_ | - |
| --van-cascader-close-icon-color | _var(--van-gray-5)_ | - |
| --van-cascader-close-icon-active-color | _var(--van-gray-6)_ | - |
| --van-cascader-selected-icon-size | _18px_ | - |
| --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-tab-color | _var(--van-text-color)_ | - |
| --van-cascader-unselected-tab-color | _var(--van-gray-6)_ | - |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-cascader-header-height | _48px_ | - |
| --van-cascader-header-padding | _0 var(--van-padding-md)_ | - |
| --van-cascader-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-cascader-title-line-height | _20px_ | - |
| --van-cascader-close-icon-size | _22px_ | - |
| --van-cascader-close-icon-color | _var(--van-gray-5)_ | - |
| --van-cascader-close-icon-active-color | _var(--van-gray-6)_ | - |
| --van-cascader-selected-icon-size | _18px_ | - |
| --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-tab-color | _var(--van-text-color)_ | - |
| --van-cascader-unselected-tab-color | _var(--van-text-color-secondary)_ | - |

View File

@ -13,4 +13,4 @@
@cascader-options-height: 384px;
@cascader-option-disabled-color: var(--van-gray-5);
@cascader-tab-color: var(--van-text-color);
@cascader-unselected-tab-color: var(--van-gray-6);
@cascader-unselected-tab-color: var(--van-text-color-secondary);

View File

@ -1,7 +1,7 @@
@import '../style/var.less';
@cell-group-background-color: var(--van-background-color-light);
@cell-group-title-color: var(--van-gray-6);
@cell-group-title-color: var(--van-text-color-secondary);
@cell-group-title-padding: var(--van-padding-md) var(--van-padding-md)
var(--van-padding-xs);
@cell-group-title-font-size: var(--van-font-size-md);

View File

@ -217,18 +217,18 @@ The component provides the following CSS variables, which can be used to customi
| --van-cell-border-color | _var(--van-border-color)_ | - |
| --van-cell-active-color | _var(--van-active-color)_ | - |
| --van-cell-required-color | _var(--van-danger-color)_ | - |
| --van-cell-label-color | _var(--van-gray-6)_ | - |
| --van-cell-label-color | _var(--van-text-color-secondary)_ | - |
| --van-cell-label-font-size | _var(--van-font-size-sm)_ | - |
| --van-cell-label-line-height | _var(--van-line-height-sm)_ | - |
| --van-cell-label-margin-top | _var(--van-padding-base)_ | - |
| --van-cell-value-color | _var(--van-gray-6)_ | - |
| --van-cell-value-color | _var(--van-text-color-secondary)_ | - |
| --van-cell-icon-size | _16px_ | - |
| --van-cell-right-icon-color | _var(--van-gray-6)_ | - |
| --van-cell-large-vertical-padding | _var(--van-padding-sm)_ | - |
| --van-cell-large-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-cell-large-label-font-size | _var(--van-font-size-md)_ | - |
| --van-cell-group-background-color | _var(--van-background-color-light)_ | - |
| --van-cell-group-title-color | _var(--van-gray-6)_ | - |
| --van-cell-group-title-color | _var(--van-text-color-secondary)_ | - |
| --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
| --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |
| --van-cell-group-title-line-height | _16px_ | - |

View File

@ -222,18 +222,18 @@ import type { CellProps, CellGroupProps, CellArrowDirection } from 'vant';
| --van-cell-border-color | _var(--van-border-color)_ | - |
| --van-cell-active-color | _var(--van-active-color)_ | - |
| --van-cell-required-color | _var(--van-danger-color)_ | - |
| --van-cell-label-color | _var(--van-gray-6)_ | - |
| --van-cell-label-color | _var(--van-text-color-secondary)_ | - |
| --van-cell-label-font-size | _var(--van-font-size-sm)_ | - |
| --van-cell-label-line-height | _var(--van-line-height-sm)_ | - |
| --van-cell-label-margin-top | _var(--van-padding-base)_ | - |
| --van-cell-value-color | _var(--van-gray-6)_ | - |
| --van-cell-value-color | _var(--van-text-color-secondary)_ | - |
| --van-cell-icon-size | _16px_ | - |
| --van-cell-right-icon-color | _var(--van-gray-6)_ | - |
| --van-cell-large-vertical-padding | _var(--van-padding-sm)_ | - |
| --van-cell-large-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-cell-large-label-font-size | _var(--van-font-size-md)_ | - |
| --van-cell-group-background-color | _var(--van-background-color-light)_ | - |
| --van-cell-group-title-color | _var(--van-gray-6)_ | - |
| --van-cell-group-title-color | _var(--van-text-color-secondary)_ | - |
| --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
| --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |
| --van-cell-group-title-line-height | _16px_ | - |

View File

@ -9,11 +9,11 @@
@cell-border-color: var(--van-border-color);
@cell-active-color: var(--van-active-color);
@cell-required-color: var(--van-danger-color);
@cell-label-color: var(--van-gray-6);
@cell-label-color: var(--van-text-color-secondary);
@cell-label-font-size: var(--van-font-size-sm);
@cell-label-line-height: var(--van-line-height-sm);
@cell-label-margin-top: var(--van-padding-base);
@cell-value-color: var(--van-gray-6);
@cell-value-color: var(--van-text-color-secondary);
@cell-icon-size: 16px;
@cell-right-icon-color: var(--van-gray-6);
@cell-large-vertical-padding: var(--van-padding-sm);

View File

@ -4,6 +4,6 @@
@collapse-item-content-padding: var(--van-padding-sm) var(--van-padding-md);
@collapse-item-content-font-size: var(--van-font-size-md);
@collapse-item-content-line-height: 1.5;
@collapse-item-content-text-color: var(--van-gray-6);
@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);

View File

@ -196,6 +196,6 @@ The component provides the following CSS variables, which can be used to customi
| --van-collapse-item-content-padding | _var(--van-padding-sm) var(--van-padding-md)_ | - |
| --van-collapse-item-content-font-size | _var(--van-font-size-md)_ | - |
| --van-collapse-item-content-line-height | _1.5_ | - |
| --van-collapse-item-content-text-color | _var(--van-gray-6)_ | - |
| --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)_ | - |

View File

@ -194,6 +194,6 @@ collapseItemRef.value?.toggle();
| --van-collapse-item-content-padding | _var(--van-padding-sm) var(--van-padding-md)_ | - |
| --van-collapse-item-content-font-size | _var(--van-font-size-md)_ | - |
| --van-collapse-item-content-line-height | _1.5_ | - |
| --van-collapse-item-content-text-color | _var(--van-gray-6)_ | - |
| --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)_ | - |

View File

@ -156,12 +156,13 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
--van-danger-color: var(--van-red);
--van-warning-color: var(--van-orange);
--van-text-color: var(--van-gray-8);
--van-text-color-secondary: var(--van-gray-6);
--van-text-link-color: #576b95;
--van-active-color: var(--van-gray-2);
--van-active-opacity: 0.7;
--van-disabled-opacity: 0.5;
--van-background-color: var(--van-gray-1);
--van-background-color-light: var(--van-white);
--van-text-link-color: #576b95;
// Padding
--van-padding-base: 4px;

View File

@ -158,12 +158,13 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
--van-danger-color: var(--van-red);
--van-warning-color: var(--van-orange);
--van-text-color: var(--van-gray-8);
--van-text-color-secondary: var(--van-gray-6);
--van-text-link-color: #576b95;
--van-active-color: var(--van-gray-2);
--van-active-opacity: 0.7;
--van-disabled-opacity: 0.5;
--van-background-color: var(--van-gray-1);
--van-background-color-light: var(--van-white);
--van-text-link-color: #576b95;
// Padding
--van-padding-base: 4px;

View File

@ -177,7 +177,7 @@ The component provides the following CSS variables, which can be used to customi
| --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-gray-6)_ | - |
| --van-coupon-disabled-text-color | _var(--van-text-color-secondary)_ | - |
| --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-danger-color)_ | - |
@ -186,7 +186,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-coupon-list-exchange-button-height | _32px_ | - |
| --van-coupon-list-close-button-height | _40px_ | - |
| --van-coupon-list-empty-image-size | _200px_ | - |
| --van-coupon-list-empty-tip-color | _var(--van-gray-6)_ | - |
| --van-coupon-list-empty-tip-color | _var(--van-text-color-secondary)_ | - |
| --van-coupon-list-empty-tip-font-size | _var(--van-font-size-md)_ | - |
| --van-coupon-list-empty-tip-line-height | _var(--van-line-height-md)_ | - |
| --van-coupon-cell-selected-text-color | _var(--van-text-color)_ | - |

View File

@ -179,7 +179,7 @@ import type { CouponCellProps, CouponListProps } from 'vant';
| --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-gray-6)_ | - |
| --van-coupon-disabled-text-color | _var(--van-text-color-secondary)_ | - |
| --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-danger-color)_ | - |
@ -188,7 +188,7 @@ import type { CouponCellProps, CouponListProps } from 'vant';
| --van-coupon-list-exchange-button-height | _32px_ | - |
| --van-coupon-list-close-button-height | _40px_ | - |
| --van-coupon-list-empty-image-size | _200px_ | - |
| --van-coupon-list-empty-tip-color | _var(--van-gray-6)_ | - |
| --van-coupon-list-empty-tip-color | _var(--van-text-color-secondary)_ | - |
| --van-coupon-list-empty-tip-font-size | _var(--van-font-size-md)_ | - |
| --van-coupon-list-empty-tip-line-height | _var(--van-line-height-md)_ | - |
| --van-coupon-cell-selected-text-color | _var(--van-text-color)_ | - |

View File

@ -5,6 +5,6 @@
@coupon-list-exchange-button-height: 32px;
@coupon-list-close-button-height: 40px;
@coupon-list-empty-image-size: 200px;
@coupon-list-empty-tip-color: var(--van-gray-6);
@coupon-list-empty-tip-color: var(--van-text-color-secondary);
@coupon-list-empty-tip-font-size: var(--van-font-size-md);
@coupon-list-empty-tip-line-height: var(--van-line-height-md);

View File

@ -12,7 +12,7 @@
@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-disabled-text-color: var(--van-text-color-secondary);
@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-danger-color);

View File

@ -83,13 +83,13 @@ import type { DividerProps, DividerContentPosition } from 'vant';
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-divider-margin | _var(--van-padding-md) 0_ | - |
| --van-divider-text-color | _var(--van-gray-6)_ | - |
| --van-divider-font-size | _var(--van-font-size-md)_ | - |
| --van-divider-line-height | _24px_ | - |
| --van-divider-border-color | _var(--van-border-color)_ | - |
| --van-divider-content-padding | _var(--van-padding-md)_ | - |
| --van-divider-content-left-width | _10%_ | - |
| --van-divider-content-right-width | _10%_ | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-divider-margin | _var(--van-padding-md) 0_ | - |
| --van-divider-text-color | _var(--van-text-color-secondary)_ | - |
| --van-divider-font-size | _var(--van-font-size-md)_ | - |
| --van-divider-line-height | _24px_ | - |
| --van-divider-border-color | _var(--van-border-color)_ | - |
| --van-divider-content-padding | _var(--van-padding-md)_ | - |
| --van-divider-content-left-width | _10%_ | - |
| --van-divider-content-right-width | _10%_ | - |

View File

@ -93,13 +93,13 @@ import type { DividerProps, DividerContentPosition } from 'vant';
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --------------------------------- | ------------------------- | ---- |
| --van-divider-margin | _var(--van-padding-md) 0_ | - |
| --van-divider-text-color | _var(--van-gray-6)_ | - |
| --van-divider-font-size | _var(--van-font-size-md)_ | - |
| --van-divider-line-height | _24px_ | - |
| --van-divider-border-color | _var(--van-border-color)_ | - |
| --van-divider-content-padding | _var(--van-padding-md)_ | - |
| --van-divider-content-left-width | _10%_ | - |
| --van-divider-content-right-width | _10%_ | - |
| 名称 | 默认值 | 描述 |
| --------------------------------- | --------------------------------- | ---- |
| --van-divider-margin | _var(--van-padding-md) 0_ | - |
| --van-divider-text-color | _var(--van-text-color-secondary)_ | - |
| --van-divider-font-size | _var(--van-font-size-md)_ | - |
| --van-divider-line-height | _24px_ | - |
| --van-divider-border-color | _var(--van-border-color)_ | - |
| --van-divider-content-padding | _var(--van-padding-md)_ | - |
| --van-divider-content-left-width | _10%_ | - |
| --van-divider-content-right-width | _10%_ | - |

View File

@ -1,7 +1,7 @@
@import '../style/var.less';
@divider-margin: var(--van-padding-md) 0;
@divider-text-color: var(--van-gray-6);
@divider-text-color: var(--van-text-color-secondary);
@divider-font-size: var(--van-font-size-md);
@divider-line-height: 24px;
@divider-border-color: var(--van-border-color);

View File

@ -238,7 +238,7 @@ The component provides the following CSS variables, which can be used to customi
| --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-danger-color)_ | - |
| --van-dropdown-menu-title-disabled-text-color | _var(--van-gray-6)_ | - |
| --van-dropdown-menu-title-disabled-text-color | _var(--van-text-color-secondary)_ | - |
| --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-danger-color)_ | - |

View File

@ -242,7 +242,7 @@ dropdownItemRef.value?.toggle();
| --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-danger-color)_ | - |
| --van-dropdown-menu-title-disabled-text-color | _var(--van-gray-6)_ | - |
| --van-dropdown-menu-title-disabled-text-color | _var(--van-text-color-secondary)_ | - |
| --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-danger-color)_ | - |

View File

@ -6,7 +6,7 @@
@dropdown-menu-title-font-size: 15px;
@dropdown-menu-title-text-color: var(--van-text-color);
@dropdown-menu-title-active-text-color: var(--van-danger-color);
@dropdown-menu-title-disabled-text-color: var(--van-gray-6);
@dropdown-menu-title-disabled-text-color: var(--van-text-color-secondary);
@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-danger-color);

View File

@ -106,7 +106,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-empty-image-size | _160px_ | - |
| --van-empty-description-margin-top | _var(--van-padding-md)_ | - |
| --van-empty-description-padding | _0 60px_ | - |
| --van-empty-description-color | _var(--van-gray-6)_ | - |
| --van-empty-description-color | _var(--van-text-color-secondary)_ | - |
| --van-empty-description-font-size | _var(--van-font-size-md)_ | - |
| --van-empty-description-line-height | _var(--van-line-height-md)_ | - |
| --van-empty-bottom-margin-top | _24px_ | - |

View File

@ -105,13 +105,13 @@ import type { EmptyProps } from 'vant';
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------------- | --------------------------- | ---- |
| --van-empty-padding | _var(--van-padding-xl) 0_ | - |
| --van-empty-image-size | _160px_ | - |
| --van-empty-description-margin-top | _var(--van-padding-md)_ | - |
| --van-empty-description-padding | _0 60px_ | - |
| --van-empty-description-color | _var(--van-gray-6)_ | - |
| --van-empty-description-font-size | _var(--van-font-size-md)_ | - |
| --van-empty-description-line-height | _var(--van-line-height-md)_ | - |
| --van-empty-bottom-margin-top | _24px_ | - |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-empty-padding | _var(--van-padding-xl) 0_ | - |
| --van-empty-image-size | _160px_ | - |
| --van-empty-description-margin-top | _var(--van-padding-md)_ | - |
| --van-empty-description-padding | _0 60px_ | - |
| --van-empty-description-color | _var(--van-text-color-secondary)_ | - |
| --van-empty-description-font-size | _var(--van-font-size-md)_ | - |
| --van-empty-description-line-height | _var(--van-line-height-md)_ | - |
| --van-empty-bottom-margin-top | _24px_ | - |

View File

@ -4,7 +4,7 @@
@empty-image-size: 160px;
@empty-description-margin-top: var(--van-padding-md);
@empty-description-padding: 0 60px;
@empty-description-color: var(--van-gray-6);
@empty-description-color: var(--van-text-color-secondary);
@empty-description-font-size: var(--van-font-size-md);
@empty-description-line-height: var(--van-line-height-md);
@empty-bottom-margin-top: 24px;

View File

@ -130,7 +130,7 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-image-placeholder-text-color | _var(--van-gray-6)_ | - |
| --van-image-placeholder-text-color | _var(--van-text-color-secondary)_ | - |
| --van-image-placeholder-font-size | _var(--van-font-size-md)_ | - |
| --van-image-placeholder-background-color | _var(--van-background-color)_ | - |
| --van-image-loading-icon-size | _32px_ | - |

View File

@ -158,7 +158,7 @@ import type { ImageFit, ImageProps } from 'vant';
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-image-placeholder-text-color | _var(--van-gray-6)_ | - |
| --van-image-placeholder-text-color | _var(--van-text-color-secondary)_ | - |
| --van-image-placeholder-font-size | _var(--van-font-size-md)_ | - |
| --van-image-placeholder-background-color | _var(--van-background-color)_ | - |
| --van-image-loading-icon-size | _32px_ | - |

View File

@ -1,6 +1,6 @@
@import '../style/var.less';
@image-placeholder-text-color: var(--van-gray-6);
@image-placeholder-text-color: var(--van-text-color-secondary);
@image-placeholder-font-size: var(--van-font-size-md);
@image-placeholder-background-color: var(--van-background-color);
@image-loading-icon-size: 32px;

View File

@ -225,9 +225,9 @@ listRef.value?.check();
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-list-text-color | _var(--van-gray-6)_ | - |
| --van-list-text-font-size | _var(--van-font-size-md)_ | - |
| --van-list-text-line-height | _50px_ | - |
| --van-list-loading-icon-size | _16px_ | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-list-text-color | _var(--van-text-color-secondary)_ | - |
| --van-list-text-font-size | _var(--van-font-size-md)_ | - |
| --van-list-text-line-height | _50px_ | - |
| --van-list-loading-icon-size | _16px_ | - |

View File

@ -240,12 +240,12 @@ listRef.value?.check();
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ---------------------------- | ------------------------- | ---- |
| --van-list-text-color | _var(--van-gray-6)_ | - |
| --van-list-text-font-size | _var(--van-font-size-md)_ | - |
| --van-list-text-line-height | _50px_ | - |
| --van-list-loading-icon-size | _16px_ | - |
| 名称 | 默认值 | 描述 |
| ---------------------------- | --------------------------------- | ---- |
| --van-list-text-color | _var(--van-text-color-secondary)_ | - |
| --van-list-text-font-size | _var(--van-font-size-md)_ | - |
| --van-list-text-line-height | _50px_ | - |
| --van-list-loading-icon-size | _16px_ | - |
## 常见问题

View File

@ -1,6 +1,6 @@
@import '../style/var.less';
@list-text-color: var(--van-gray-6);
@list-text-color: var(--van-text-color-secondary);
@list-text-font-size: var(--van-font-size-md);
@list-text-line-height: 50px;
@list-loading-icon-size: 16px;

View File

@ -101,7 +101,7 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-loading-text-color | _var(--van-gray-6)_ | - |
| --van-loading-text-color | _var(--van-text-color-secondary)_ | - |
| --van-loading-text-font-size | _var(--van-font-size-md)_ | - |
| --van-loading-spinner-color | _var(--van-gray-5)_ | - |
| --van-loading-spinner-size | _30px_ | - |

View File

@ -109,10 +109,10 @@ import type { LoadingType, LoadingProps } from 'vant';
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ---------------------------------------- | ------------------------- | ---- |
| --van-loading-text-color | _var(--van-gray-6)_ | - |
| --van-loading-text-font-size | _var(--van-font-size-md)_ | - |
| --van-loading-spinner-color | _var(--van-gray-5)_ | - |
| --van-loading-spinner-size | _30px_ | - |
| --van-loading-spinner-animation-duration | _0.8s_ | - |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-loading-text-color | _var(--van-text-color-secondary)_ | - |
| --van-loading-text-font-size | _var(--van-font-size-md)_ | - |
| --van-loading-spinner-color | _var(--van-gray-5)_ | - |
| --van-loading-spinner-size | _30px_ | - |
| --van-loading-spinner-animation-duration | _0.8s_ | - |

View File

@ -1,6 +1,6 @@
@import '../style/var.less';
@loading-text-color: var(--van-gray-6);
@loading-text-color: var(--van-text-color-secondary);
@loading-text-font-size: var(--van-font-size-md);
@loading-spinner-color: var(--van-gray-5);
@loading-spinner-size: 30px;

View File

@ -161,7 +161,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-password-input-font-size | _20px_ | - |
| --van-password-input-border-radius | _6px_ | - |
| --van-password-input-background-color | _var(--van-background-color-light)_ | - |
| --van-password-input-info-color | _var(--van-gray-6)_ | - |
| --van-password-input-info-color | _var(--van-text-color-secondary)_ | - |
| --van-password-input-info-font-size | _var(--van-font-size-md)_ | - |
| --van-password-input-error-info-color | _var(--van-danger-color)_ | - |
| --van-password-input-dot-size | _10px_ | - |

View File

@ -171,7 +171,7 @@ export default {
| --van-password-input-font-size | _20px_ | - |
| --van-password-input-border-radius | _6px_ | - |
| --van-password-input-background-color | _var(--van-background-color-light)_ | - |
| --van-password-input-info-color | _var(--van-gray-6)_ | - |
| --van-password-input-info-color | _var(--van-text-color-secondary)_ | - |
| --van-password-input-info-font-size | _var(--van-font-size-md)_ | - |
| --van-password-input-error-info-color | _var(--van-danger-color)_ | - |
| --van-password-input-dot-size | _10px_ | - |

View File

@ -5,7 +5,7 @@
@password-input-font-size: 20px;
@password-input-border-radius: 6px;
@password-input-background-color: var(--van-background-color-light);
@password-input-info-color: var(--van-gray-6);
@password-input-info-color: var(--van-text-color-secondary);
@password-input-info-font-size: var(--van-font-size-md);
@password-input-error-info-color: var(--van-danger-color);
@password-input-dot-size: 10px;

View File

@ -422,7 +422,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-picker-action-padding | _0 var(--van-padding-md)_ | - |
| --van-picker-action-font-size | _var(--van-font-size-md)_ | - |
| --van-picker-confirm-action-color | _var(--van-text-link-color)_ | - |
| --van-picker-cancel-action-color | _var(--van-gray-6)_ | - |
| --van-picker-cancel-action-color | _var(--van-text-color-secondary)_ | - |
| --van-picker-option-padding | _0 var(--van-padding-base)_ | - |
| --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |
| --van-picker-option-text-color | _var(--van-black)_ | - |

View File

@ -447,7 +447,7 @@ pickerRef.value?.confirm();
| --van-picker-action-padding | _0 var(--van-padding-md)_ | - |
| --van-picker-action-font-size | _var(--van-font-size-md)_ | - |
| --van-picker-confirm-action-color | _var(--van-text-link-color)_ | - |
| --van-picker-cancel-action-color | _var(--van-gray-6)_ | - |
| --van-picker-cancel-action-color | _var(--van-text-color-secondary)_ | - |
| --van-picker-option-padding | _0 var(--van-padding-base)_ | - |
| --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |
| --van-picker-option-text-color | _var(--van-black)_ | - |

View File

@ -7,7 +7,7 @@
@picker-action-padding: 0 var(--van-padding-md);
@picker-action-font-size: var(--van-font-size-md);
@picker-confirm-action-color: var(--van-text-link-color);
@picker-cancel-action-color: var(--van-gray-6);
@picker-cancel-action-color: var(--van-text-color-secondary);
@picker-option-padding: 0 var(--van-padding-base);
@picker-option-font-size: var(--van-font-size-lg);
@picker-option-text-color: var(--van-black);

View File

@ -289,4 +289,4 @@ The component provides the following CSS variables, which can be used to customi
| --van-popover-light-action-disabled-text-color | _var(--van-gray-5)_ | - |
| --van-popover-dark-text-color | _var(--van-white)_ | - |
| --van-popover-dark-background-color | _#4a4a4a_ | - |
| --van-popover-dark-action-disabled-text-color | _var(--van-gray-6)_ | - |
| --van-popover-dark-action-disabled-text-color | _var(--van-text-color-secondary)_ | - |

View File

@ -301,7 +301,7 @@ import type {
| --van-popover-light-action-disabled-text-color | _var(--van-gray-5)_ | - |
| --van-popover-dark-text-color | _var(--van-white)_ | - |
| --van-popover-dark-background-color | _#4a4a4a_ | - |
| --van-popover-dark-action-disabled-text-color | _var(--van-gray-6)_ | - |
| --van-popover-dark-action-disabled-text-color | _var(--van-text-color-secondary)_ | - |
## 常见问题

View File

@ -12,4 +12,4 @@
@popover-light-action-disabled-text-color: var(--van-gray-5);
@popover-dark-text-color: var(--van-white);
@popover-dark-background-color: #4a4a4a;
@popover-dark-action-disabled-text-color: var(--van-gray-6);
@popover-dark-action-disabled-text-color: var(--van-text-color-secondary);

View File

@ -153,5 +153,5 @@ The component provides the following CSS variables, which can be used to customi
| --- | --- | --- |
| --van-pull-refresh-head-height | _50px_ | - |
| --van-pull-refresh-head-font-size | _var(--van-font-size-md)_ | - |
| --van-pull-refresh-head-text-color | _var(--van-gray-6)_ | - |
| --van-pull-refresh-head-text-color | _var(--van-text-color-secondary)_ | - |
| --van-pull-refresh-loading-icon-size | _16px_ | - |

View File

@ -152,12 +152,12 @@ import type { PullRefreshProps } from 'vant';
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------------ | ------------------------- | ---- |
| --van-pull-refresh-head-height | _50px_ | - |
| --van-pull-refresh-head-font-size | _var(--van-font-size-md)_ | - |
| --van-pull-refresh-head-text-color | _var(--van-gray-6)_ | - |
| --van-pull-refresh-loading-icon-size | _16px_ | - |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-pull-refresh-head-height | _50px_ | - |
| --van-pull-refresh-head-font-size | _var(--van-font-size-md)_ | - |
| --van-pull-refresh-head-text-color | _var(--van-text-color-secondary)_ | - |
| --van-pull-refresh-loading-icon-size | _16px_ | - |
## 常见问题

View File

@ -2,5 +2,5 @@
@pull-refresh-head-height: 50px;
@pull-refresh-head-font-size: var(--van-font-size-md);
@pull-refresh-head-text-color: var(--van-gray-6);
@pull-refresh-head-text-color: var(--van-text-color-secondary);
@pull-refresh-loading-icon-size: 16px;

View File

@ -239,7 +239,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-share-sheet-title-color | _var(--van-text-color)_ | - |
| --van-share-sheet-title-font-size | _var(--van-font-size-md)_ | - |
| --van-share-sheet-title-line-height | _var(--van-line-height-md)_ | - |
| --van-share-sheet-description-color | _var(--van-gray-6)_ | - |
| --van-share-sheet-description-color | _var(--van-text-color-secondary)_ | - |
| --van-share-sheet-description-font-size | _var(--van-font-size-sm)_ | - |
| --van-share-sheet-description-line-height | _16px_ | - |
| --van-share-sheet-icon-size | _48px_ | - |

View File

@ -253,7 +253,7 @@ import type {
| --van-share-sheet-title-color | _var(--van-text-color)_ | - |
| --van-share-sheet-title-font-size | _var(--van-font-size-md)_ | - |
| --van-share-sheet-title-line-height | _var(--van-line-height-md)_ | - |
| --van-share-sheet-description-color | _var(--van-gray-6)_ | - |
| --van-share-sheet-description-color | _var(--van-text-color-secondary)_ | - |
| --van-share-sheet-description-font-size | _var(--van-font-size-sm)_ | - |
| --van-share-sheet-description-line-height | _16px_ | - |
| --van-share-sheet-icon-size | _48px_ | - |

View File

@ -5,7 +5,7 @@
@share-sheet-title-color: var(--van-text-color);
@share-sheet-title-font-size: var(--van-font-size-md);
@share-sheet-title-line-height: var(--van-line-height-md);
@share-sheet-description-color: var(--van-gray-6);
@share-sheet-description-color: var(--van-text-color-secondary);
@share-sheet-description-font-size: var(--van-font-size-sm);
@share-sheet-description-line-height: 16px;
@share-sheet-icon-size: 48px;

View File

@ -79,7 +79,7 @@ const onChange = (index: number) => Toast(`${t('title')} ${index + 1}`);
&-title {
margin-bottom: 16px;
color: var(--van-gray-6);
color: var(--van-text-color-secondary);
font-weight: normal;
font-size: 14px;
}

View File

@ -1,6 +1,6 @@
@import '../style/var.less';
@step-text-color: var(--van-gray-6);
@step-text-color: var(--van-text-color-secondary);
@step-active-color: var(--van-success-color);
@step-process-text-color: var(--van-text-color);
@step-font-size: var(--van-font-size-md);

View File

@ -117,7 +117,7 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-step-text-color | _var(--van-gray-6)_ | - |
| --van-step-text-color | _var(--van-text-color-secondary)_ | - |
| --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)_ | - |

View File

@ -123,7 +123,7 @@ import type { StepsProps, StepsDirection } from 'vant';
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-step-text-color | _var(--van-gray-6)_ | - |
| --van-step-text-color | _var(--van-text-color-secondary)_ | - |
| --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)_ | - |

View File

@ -26,6 +26,7 @@
@danger-color: var(--van-red);
@warning-color: var(--van-orange);
@text-color: var(--van-gray-8);
@text-color-secondary: var(--van-gray-6);
@active-color: var(--van-gray-2);
@active-opacity: 0.7;
@disabled-opacity: 0.5;

View File

@ -73,7 +73,6 @@ const onClickLink = () => Toast(t('clickLink'));
</van-submit-bar>
</demo-block>
</template>
Ï
<style lang="less">
.demo-submit-bar {

View File

@ -392,7 +392,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-uploader-size | _80px_ | - |
| --van-uploader-icon-size | _24px_ | - |
| --van-uploader-icon-color | _var(--van-gray-4)_ | - |
| --van-uploader-text-color | _var(--van-gray-6)_ | - |
| --van-uploader-text-color | _var(--van-text-color-secondary)_ | - |
| --van-uploader-text-font-size | _var(--van-font-size-sm)_ | - |
| --van-uploader-upload-background-color | _var(--van-gray-1)_ | - |
| --van-uploader-upload-active-color | _var(--van-active-color)_ | - |

View File

@ -417,7 +417,7 @@ uploaderRef.value?.chooseFile();
| --van-uploader-size | _80px_ | - |
| --van-uploader-icon-size | _24px_ | - |
| --van-uploader-icon-color | _var(--van-gray-4)_ | - |
| --van-uploader-text-color | _var(--van-gray-6)_ | - |
| --van-uploader-text-color | _var(--van-text-color-secondary)_ | - |
| --van-uploader-text-font-size | _var(--van-font-size-sm)_ | - |
| --van-uploader-upload-background-color | _var(--van-gray-1)_ | - |
| --van-uploader-upload-active-color | _var(--van-active-color)_ | - |

View File

@ -3,7 +3,7 @@
@uploader-size: 80px;
@uploader-icon-size: 24px;
@uploader-icon-color: var(--van-gray-4);
@uploader-text-color: var(--van-gray-6);
@uploader-text-color: var(--van-text-color-secondary);
@uploader-text-font-size: var(--van-font-size-sm);
@uploader-upload-background-color: var(--van-gray-1);
@uploader-upload-active-color: var(--van-active-color);