diff --git a/packages/vant-cli/site/desktop/components/Content.vue b/packages/vant-cli/site/desktop/components/Content.vue index 3c7957a2f..d1697cb82 100644 --- a/packages/vant-cli/site/desktop/components/Content.vue +++ b/packages/vant-cli/site/desktop/components/Content.vue @@ -78,7 +78,8 @@ export default { font-size: 15px; } - > p { + > p, + > blockquote p { color: @van-doc-text-color; font-size: 15px; line-height: 26px; diff --git a/src/action-bar/README.md b/src/action-bar/README.md index 9c3bfae0a..41aad3a87 100644 --- a/src/action-bar/README.md +++ b/src/action-bar/README.md @@ -137,18 +137,18 @@ Use `badge` prop to show badge in icon. 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-action-bar-background-color | `@white` | - | -| --van-action-bar-height | `50px` | - | -| --van-action-bar-icon-width | `48px` | - | -| --van-action-bar-icon-height | `100%` | - | -| --van-action-bar-icon-color | `@text-color` | - | -| --van-action-bar-icon-size | `18px` | - | -| --van-action-bar-icon-font-size | `@font-size-xs` | - | -| --van-action-bar-icon-active-color | `@active-color` | - | -| --van-action-bar-icon-text-color | `@gray-7` | - | -| --van-action-bar-icon-background-color | `@white` | - | -| --van-action-bar-button-height | `40px` | - | -| --van-action-bar-button-warning-color | `@gradient-orange` | - | -| --van-action-bar-button-danger-color | `@gradient-red` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-action-bar-background-color | `var(--van-white)` | - | +| --van-action-bar-height | `50px` | - | +| --van-action-bar-icon-width | `48px` | - | +| --van-action-bar-icon-height | `100%` | - | +| --van-action-bar-icon-color | `var(--van-text-color)` | - | +| --van-action-bar-icon-size | `18px` | - | +| --van-action-bar-icon-font-size | `var(--van-font-size-xs)` | - | +| --van-action-bar-icon-active-color | `var(--van-active-color)` | - | +| --van-action-bar-icon-text-color | `var(--van-gary-7)` | - | +| --van-action-bar-icon-background-color | `var(--van-white)` | - | +| --van-action-bar-button-height | `40px` | - | +| --van-action-bar-button-warning-color | `var(--van-gradient-orange)` | - | +| --van-action-bar-button-danger-color | `var(--van-gradient-red)` | - | diff --git a/src/action-bar/README.zh-CN.md b/src/action-bar/README.zh-CN.md index f20ac34ff..3179c81d5 100644 --- a/src/action-bar/README.zh-CN.md +++ b/src/action-bar/README.zh-CN.md @@ -141,18 +141,18 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| -------------------------------------- | ------------------ | ---- | -| --van-action-bar-background-color | `@white` | - | -| --van-action-bar-height | `50px` | - | -| --van-action-bar-icon-width | `48px` | - | -| --van-action-bar-icon-height | `100%` | - | -| --van-action-bar-icon-color | `@text-color` | - | -| --van-action-bar-icon-size | `18px` | - | -| --van-action-bar-icon-font-size | `@font-size-xs` | - | -| --van-action-bar-icon-active-color | `@active-color` | - | -| --van-action-bar-icon-text-color | `@gray-7` | - | -| --van-action-bar-icon-background-color | `@white` | - | -| --van-action-bar-button-height | `40px` | - | -| --van-action-bar-button-warning-color | `@gradient-orange` | - | -| --van-action-bar-button-danger-color | `@gradient-red` | - | +| 名称 | 默认值 | 描述 | +| -------------------------------------- | ---------------------------- | ---- | +| --van-action-bar-background-color | `var(--van-white)` | - | +| --van-action-bar-height | `50px` | - | +| --van-action-bar-icon-width | `48px` | - | +| --van-action-bar-icon-height | `100%` | - | +| --van-action-bar-icon-color | `var(--van-text-color)` | - | +| --van-action-bar-icon-size | `18px` | - | +| --van-action-bar-icon-font-size | `var(--van-font-size-xs)` | - | +| --van-action-bar-icon-active-color | `var(--van-active-color)` | - | +| --van-action-bar-icon-text-color | `var(--van-gary-7)` | - | +| --van-action-bar-icon-background-color | `var(--van-white)` | - | +| --van-action-bar-button-height | `40px` | - | +| --van-action-bar-button-warning-color | `var(--van-gradient-orange)` | - | +| --van-action-bar-button-danger-color | `var(--van-gradient-red)` | - | diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index cbf69327f..557c2be0e 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -231,23 +231,23 @@ 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 | `@font-size-lg` | - | -| --van-action-sheet-description-color | `@gray-6` | - | -| --van-action-sheet-description-font-size | `@font-size-md` | - | -| --van-action-sheet-description-line-height | `@line-height-md` | - | -| --van-action-sheet-item-background | `@white` | - | -| --van-action-sheet-item-font-size | `@font-size-lg` | - | -| --van-action-sheet-item-line-height | `@line-height-lg` | - | -| --van-action-sheet-item-text-color | `@text-color` | - | -| --van-action-sheet-item-disabled-text-color | `@gray-5` | - | -| --van-action-sheet-subname-color | `@gray-6` | - | -| --van-action-sheet-subname-font-size | `@font-size-sm` | - | -| --van-action-sheet-subname-line-height | `@line-height-sm` | - | +| --van-action-sheet-header-font-size | `var(--van-font-size-lg)` | - | +| --van-action-sheet-description-color | `var(--van-gary-6)` | - | +| --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-white)` | - | +| --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-gary-5)` | - | +| --van-action-sheet-subname-color | `var(--van-gary-6)` | - | +| --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` | - | -| --van-action-sheet-close-icon-color | `@gray-5` | - | -| --van-action-sheet-close-icon-active-color | `@gray-6` | - | -| --van-action-sheet-close-icon-padding | `0 @padding-md` | - | -| --van-action-sheet-cancel-text-color | `@gray-7` | - | -| --van-action-sheet-cancel-padding-top | `@padding-xs` | - | -| --van-action-sheet-cancel-padding-color | `@background-color` | - | +| --van-action-sheet-close-icon-color | `var(--van-gary-5)` | - | +| --van-action-sheet-close-icon-active-color | `var(--van-gary-6)` | - | +| --van-action-sheet-close-icon-padding | `0 var(--van-padding-md)` | - | +| --van-action-sheet-cancel-text-color | `var(--van-gary-7)` | - | +| --van-action-sheet-cancel-padding-top | `var(--van-padding-xs)` | - | +| --van-action-sheet-cancel-padding-color | `var(--van-background-color)` | - | | --van-action-sheet-loading-icon-size | `22px` | - | diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md index 2f0304e94..f032e4c5f 100644 --- a/src/action-sheet/README.zh-CN.md +++ b/src/action-sheet/README.zh-CN.md @@ -239,27 +239,27 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------------- | ------------------- | ---- | -| --van-action-sheet-max-height | `80%` | - | -| --van-action-sheet-header-height | `48px` | - | -| --van-action-sheet-header-font-size | `@font-size-lg` | - | -| --van-action-sheet-description-color | `@gray-6` | - | -| --van-action-sheet-description-font-size | `@font-size-md` | - | -| --van-action-sheet-description-line-height | `@line-height-md` | - | -| --van-action-sheet-item-background | `@white` | - | -| --van-action-sheet-item-font-size | `@font-size-lg` | - | -| --van-action-sheet-item-line-height | `@line-height-lg` | - | -| --van-action-sheet-item-text-color | `@text-color` | - | -| --van-action-sheet-item-disabled-text-color | `@gray-5` | - | -| --van-action-sheet-subname-color | `@gray-6` | - | -| --van-action-sheet-subname-font-size | `@font-size-sm` | - | -| --van-action-sheet-subname-line-height | `@line-height-sm` | - | -| --van-action-sheet-close-icon-size | `22px` | - | -| --van-action-sheet-close-icon-color | `@gray-5` | - | -| --van-action-sheet-close-icon-active-color | `@gray-6` | - | -| --van-action-sheet-close-icon-padding | `0 @padding-md` | - | -| --van-action-sheet-cancel-text-color | `@gray-7` | - | -| --van-action-sheet-cancel-padding-top | `@padding-xs` | - | -| --van-action-sheet-cancel-padding-color | `@background-color` | - | -| --van-action-sheet-loading-icon-size | `22px` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --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-gary-6)` | - | +| --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-white)` | - | +| --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-gary-5)` | - | +| --van-action-sheet-subname-color | `var(--van-gary-6)` | - | +| --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` | - | +| --van-action-sheet-close-icon-color | `var(--van-gary-5)` | - | +| --van-action-sheet-close-icon-active-color | `var(--van-gary-6)` | - | +| --van-action-sheet-close-icon-padding | `0 var(--van-padding-md)` | - | +| --van-action-sheet-cancel-text-color | `var(--van-gary-7)` | - | +| --van-action-sheet-cancel-padding-top | `var(--van-padding-xs)` | - | +| --van-action-sheet-cancel-padding-color | `var(--van-background-color)` | - | +| --van-action-sheet-loading-icon-size | `22px` | - | diff --git a/src/address-edit/README.md b/src/address-edit/README.md index 64e8d25af..32cefa4f4 100644 --- a/src/address-edit/README.md +++ b/src/address-edit/README.md @@ -157,8 +157,8 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-address-edit-padding | `@padding-sm` | - | -| --van-address-edit-buttons-padding | `@padding-xl @padding-base` | - | -| --van-address-edit-button-margin-bottom | `@padding-sm` | - | -| --van-address-edit-detail-finish-color | `@blue` | - | -| --van-address-edit-detail-finish-font-size | `@font-size-sm` | - | +| --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-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 e7213234c..d11153ce7 100644 --- a/src/address-edit/README.zh-CN.md +++ b/src/address-edit/README.zh-CN.md @@ -159,8 +159,8 @@ export default { | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-address-edit-padding | `@padding-sm` | - | -| --van-address-edit-buttons-padding | `@padding-xl @padding-base` | - | -| --van-address-edit-button-margin-bottom | `@padding-sm` | - | -| --van-address-edit-detail-finish-color | `@blue` | - | -| --van-address-edit-detail-finish-font-size | `@font-size-sm` | - | +| --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-font-size | `var(--van-font-size-sm)` | - | diff --git a/src/address-list/README.md b/src/address-list/README.md index f988d1297..84187adf6 100644 --- a/src/address-list/README.md +++ b/src/address-list/README.md @@ -127,16 +127,16 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-address-list-padding | `@padding-sm @padding-sm 80px` | - | -| --van-address-list-disabled-text-color | `@gray-6` | - | -| --van-address-list-disabled-text-padding | `@padding-base * 5 0 @padding-md` | - | -| --van-address-list-disabled-text-font-size | `@font-size-md` | - | -| --van-address-list-disabled-text-line-height | `@line-height-md` | - | +| --van-address-list-padding | `var(--van-padding-sm) var(--van-padding-sm) 80px` | - | +| --van-address-list-disabled-text-color | `var(--van-gary-6)` | - | +| --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)` | - | | --van-address-list-add-button-z-index | `999` | - | -| --van-address-list-item-padding | `@padding-sm` | - | -| --van-address-list-item-text-color | `@text-color` | - | -| --van-address-list-item-disabled-text-color | `@gray-5` | - | +| --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-gary-5)` | - | | --van-address-list-item-font-size | `13px` | - | -| --van-address-list-item-line-height | `@line-height-sm` | - | -| --van-address-list-item-radio-icon-color | `@red` | - | +| --van-address-list-item-line-height | `var(--van-line-height-sm)` | - | +| --van-address-list-item-radio-icon-color | `var(--van-red)` | - | | --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 e2a84476b..bf23969d8 100644 --- a/src/address-list/README.zh-CN.md +++ b/src/address-list/README.zh-CN.md @@ -127,16 +127,16 @@ export default { | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-address-list-padding | `@padding-sm @padding-sm 80px` | - | -| --van-address-list-disabled-text-color | `@gray-6` | - | -| --van-address-list-disabled-text-padding | `@padding-base * 5 0 @padding-md` | - | -| --van-address-list-disabled-text-font-size | `@font-size-md` | - | -| --van-address-list-disabled-text-line-height | `@line-height-md` | - | +| --van-address-list-padding | `var(--van-padding-sm) var(--van-padding-sm) 80px` | - | +| --van-address-list-disabled-text-color | `var(--van-gary-6)` | - | +| --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)` | - | | --van-address-list-add-button-z-index | `999` | - | -| --van-address-list-item-padding | `@padding-sm` | - | -| --van-address-list-item-text-color | `@text-color` | - | -| --van-address-list-item-disabled-text-color | `@gray-5` | - | +| --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-gary-5)` | - | | --van-address-list-item-font-size | `13px` | - | -| --van-address-list-item-line-height | `@line-height-sm` | - | -| --van-address-list-item-radio-icon-color | `@red` | - | +| --van-address-list-item-line-height | `var(--van-line-height-sm)` | - | +| --van-address-list-item-radio-icon-color | `var(--van-red)` | - | | --van-address-list-edit-icon-size | `20px` | - | diff --git a/src/badge/README.md b/src/badge/README.md index ccc0cc68a..84df59ce1 100644 --- a/src/badge/README.md +++ b/src/badge/README.md @@ -140,12 +140,12 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-badge-size | `16px` | - | -| --van-badge-color | `@white` | - | +| --van-badge-color | `var(--van-white)` | - | | --van-badge-padding | `0 3px` | - | -| --van-badge-font-size | `@font-size-sm` | - | -| --van-badge-font-weight | `@font-weight-bold` | - | -| --van-badge-border-width | `@border-width-base` | - | -| --van-badge-background-color | `@red` | - | -| --van-badge-dot-color | `@red` | - | +| --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-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 397453a2b..655f6f6d5 100644 --- a/src/badge/README.zh-CN.md +++ b/src/badge/README.zh-CN.md @@ -148,12 +148,12 @@ app.use(Badge); | 名称 | 默认值 | 描述 | | --- | --- | --- | | --van-badge-size | `16px` | - | -| --van-badge-color | `@white` | - | +| --van-badge-color | `var(--van-white)` | - | | --van-badge-padding | `0 3px` | - | -| --van-badge-font-size | `@font-size-sm` | - | -| --van-badge-font-weight | `@font-weight-bold` | - | -| --van-badge-border-width | `@border-width-base` | - | -| --van-badge-background-color | `@red` | - | -| --van-badge-dot-color | `@red` | - | +| --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-dot-size | `8px` | - | | --van-badge-font-family | `-apple-system-font, Helvetica Neue, Arial, sans-serif` | - | diff --git a/src/button/README.md b/src/button/README.md index 4ff31e7f4..ea13e53bf 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -153,39 +153,39 @@ app.use(Button); 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-button-mini-height | `24px` | - | -| --van-button-mini-padding | `0 @padding-base` | - | -| --van-button-mini-font-size | `@font-size-xs` | - | -| --van-button-small-height | `32px` | - | -| --van-button-small-padding | `0 @padding-xs` | - | -| --van-button-small-font-size | `@font-size-sm` | - | -| --van-button-normal-font-size | `@font-size-md` | - | -| --van-button-normal-padding | `0 15px` | - | -| --van-button-large-height | `50px` | - | -| --van-button-default-height | `44px` | - | -| --van-button-default-line-height | `1.2` | - | -| --van-button-default-font-size | `@font-size-lg` | - | -| --van-button-default-color | `@text-color` | - | -| --van-button-default-background-color | `@white` | - | -| --van-button-default-border-color | `@border-color` | - | -| --van-button-primary-color | `@white` | - | -| --van-button-primary-background-color | `@blue` | - | -| --van-button-primary-border-color | `@blue` | - | -| --van-button-success-color | `@white` | - | -| --van-button-success-background-color | `@green` | - | -| --van-button-success-border-color | `@green` | - | -| --van-button-danger-color | `@white` | - | -| --van-button-danger-background-color | `@red` | - | -| --van-button-danger-border-color | `@red` | - | -| --van-button-warning-color | `@white` | - | -| --van-button-warning-background-color | `@orange` | - | -| --van-button-warning-border-color | `@orange` | - | -| --van-button-border-width | `@border-width-base` | - | -| --van-button-border-radius | `@border-radius-sm` | - | -| --van-button-round-border-radius | `@border-radius-max` | - | -| --van-button-plain-background-color | `@white` | - | -| --van-button-disabled-opacity | `@disabled-opacity` | - | -| --van-button-icon-size | `1.2em` | - | -| --van-button-loading-icon-size | `20px` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-button-mini-height | `24px` | - | +| --van-button-mini-padding | `0 var(--van-padding-base)` | - | +| --van-button-mini-font-size | `var(--van-font-size-xs)` | - | +| --van-button-small-height | `32px` | - | +| --van-button-small-padding | `0 var(--van-padding-xs)` | - | +| --van-button-small-font-size | `var(--van-font-size-sm)` | - | +| --van-button-normal-font-size | `var(--van-font-size-md)` | - | +| --van-button-normal-padding | `0 15px` | - | +| --van-button-large-height | `50px` | - | +| --van-button-default-height | `44px` | - | +| --van-button-default-line-height | `1.2` | - | +| --van-button-default-font-size | `var(--van-font-size-lg)` | - | +| --van-button-default-color | `var(--van-text-color)` | - | +| --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-success-color | `var(--van-white)` | - | +| --van-button-success-background-color | `var(--van-green)` | - | +| --van-button-success-border-color | `var(--van-green)` | - | +| --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-warning-color | `var(--van-white)` | - | +| --van-button-warning-background-color | `var(--van-orange)` | - | +| --van-button-warning-border-color | `var(--van-orange)` | - | +| --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)` | - | +| --van-button-plain-background-color | `var(--van-white)` | - | +| --van-button-disabled-opacity | `var(--van-disabled-opacity)` | - | +| --van-button-icon-size | `1.2em` | - | +| --van-button-loading-icon-size | `20px` | - | diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md index 32a28f1f5..aa11a84fe 100644 --- a/src/button/README.zh-CN.md +++ b/src/button/README.zh-CN.md @@ -176,39 +176,39 @@ app.use(Button); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------- | -------------------- | ---- | -| --van-button-mini-height | `24px` | - | -| --van-button-mini-padding | `0 @padding-base` | - | -| --van-button-mini-font-size | `@font-size-xs` | - | -| --van-button-small-height | `32px` | - | -| --van-button-small-padding | `0 @padding-xs` | - | -| --van-button-small-font-size | `@font-size-sm` | - | -| --van-button-normal-font-size | `@font-size-md` | - | -| --van-button-normal-padding | `0 15px` | - | -| --van-button-large-height | `50px` | - | -| --van-button-default-height | `44px` | - | -| --van-button-default-line-height | `1.2` | - | -| --van-button-default-font-size | `@font-size-lg` | - | -| --van-button-default-color | `@text-color` | - | -| --van-button-default-background-color | `@white` | - | -| --van-button-default-border-color | `@border-color` | - | -| --van-button-primary-color | `@white` | - | -| --van-button-primary-background-color | `@blue` | - | -| --van-button-primary-border-color | `@blue` | - | -| --van-button-success-color | `@white` | - | -| --van-button-success-background-color | `@green` | - | -| --van-button-success-border-color | `@green` | - | -| --van-button-danger-color | `@white` | - | -| --van-button-danger-background-color | `@red` | - | -| --van-button-danger-border-color | `@red` | - | -| --van-button-warning-color | `@white` | - | -| --van-button-warning-background-color | `@orange` | - | -| --van-button-warning-border-color | `@orange` | - | -| --van-button-border-width | `@border-width-base` | - | -| --van-button-border-radius | `@border-radius-sm` | - | -| --van-button-round-border-radius | `@border-radius-max` | - | -| --van-button-plain-background-color | `@white` | - | -| --van-button-disabled-opacity | `@disabled-opacity` | - | -| --van-button-icon-size | `1.2em` | - | -| --van-button-loading-icon-size | `20px` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-button-mini-height | `24px` | - | +| --van-button-mini-padding | `0 var(--van-padding-base)` | - | +| --van-button-mini-font-size | `var(--van-font-size-xs)` | - | +| --van-button-small-height | `32px` | - | +| --van-button-small-padding | `0 var(--van-padding-xs)` | - | +| --van-button-small-font-size | `var(--van-font-size-sm)` | - | +| --van-button-normal-font-size | `var(--van-font-size-md)` | - | +| --van-button-normal-padding | `0 15px` | - | +| --van-button-large-height | `50px` | - | +| --van-button-default-height | `44px` | - | +| --van-button-default-line-height | `1.2` | - | +| --van-button-default-font-size | `var(--van-font-size-lg)` | - | +| --van-button-default-color | `var(--van-text-color)` | - | +| --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-success-color | `var(--van-white)` | - | +| --van-button-success-background-color | `var(--van-green)` | - | +| --van-button-success-border-color | `var(--van-green)` | - | +| --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-warning-color | `var(--van-white)` | - | +| --van-button-warning-background-color | `var(--van-organge)` | - | +| --van-button-warning-border-color | `var(--van-organge)` | - | +| --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)` | - | +| --van-button-plain-background-color | `var(--van-white)` | - | +| --van-button-disabled-opacity | `var(--van-disabled-opacity)` | - | +| --van-button-icon-size | `1.2em` | - | +| --van-button-loading-icon-size | `20px` | - | diff --git a/src/calendar/README.md b/src/calendar/README.md index a866f96d7..f9f2bc615 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -351,28 +351,28 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-calendar-background-color | `@white` | - | +| --van-calendar-background-color | `var(--van-white)` | - | | --van-calendar-popup-height | `80%` | - | | --van-calendar-header-box-shadow | `0 2px 10px rgba(125, 126, 128, 0.16)` | - | | --van-calendar-header-title-height | `44px` | - | -| --van-calendar-header-title-font-size | `@font-size-lg` | - | -| --van-calendar-header-subtitle-font-size | `@font-size-md` | - | +| --van-calendar-header-title-font-size | `var(--van-font-size-lg)` | - | +| --van-calendar-header-subtitle-font-size | `var(--van-font-size-md)` | - | | --van-calendar-weekdays-height | `30px` | - | -| --van-calendar-weekdays-font-size | `@font-size-sm` | - | -| --van-calendar-month-title-font-size | `@font-size-md` | - | +| --van-calendar-weekdays-font-size | `var(--van-font-size-sm)` | - | +| --van-calendar-month-title-font-size | `var(--van-font-size-md)` | - | | --van-calendar-month-mark-color | `fade(@gray-2, 80%)` | - | | --van-calendar-month-mark-font-size | `160px` | - | | --van-calendar-day-height | `64px` | - | -| --van-calendar-day-font-size | `@font-size-lg` | - | -| --van-calendar-range-edge-color | `@white` | - | -| --van-calendar-range-edge-background-color | `@red` | - | -| --van-calendar-range-middle-color | `@red` | - | +| --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-middle-background-opacity | `0.1` | - | | --van-calendar-selected-day-size | `54px` | - | -| --van-calendar-selected-day-color | `@white` | - | -| --van-calendar-info-font-size | `@font-size-xs` | - | -| --van-calendar-info-line-height | `@line-height-xs` | - | -| --van-calendar-selected-day-background-color | `@red` | - | -| --van-calendar-day-disabled-color | `@gray-5` | - | +| --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-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 33ae7ec18..5b228187b 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -357,29 +357,29 @@ export default { | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-calendar-background-color | `@white` | - | +| --van-calendar-background-color | `var(--van-white)` | - | | --van-calendar-popup-height | `80%` | - | | --van-calendar-header-box-shadow | `0 2px 10px rgba(125, 126, 128, 0.16)` | - | | --van-calendar-header-title-height | `44px` | - | -| --van-calendar-header-title-font-size | `@font-size-lg` | - | -| --van-calendar-header-subtitle-font-size | `@font-size-md` | - | +| --van-calendar-header-title-font-size | `var(--van-font-size-lg)` | - | +| --van-calendar-header-subtitle-font-size | `var(--van-font-size-md)` | - | | --van-calendar-weekdays-height | `30px` | - | -| --van-calendar-weekdays-font-size | `@font-size-sm` | - | -| --van-calendar-month-title-font-size | `@font-size-md` | - | +| --van-calendar-weekdays-font-size | `var(--van-font-size-sm)` | - | +| --van-calendar-month-title-font-size | `var(--van-font-size-md)` | - | | --van-calendar-month-mark-color | `fade(@gray-2, 80%)` | - | | --van-calendar-month-mark-font-size | `160px` | - | | --van-calendar-day-height | `64px` | - | -| --van-calendar-day-font-size | `@font-size-lg` | - | -| --van-calendar-range-edge-color | `@white` | - | -| --van-calendar-range-edge-background-color | `@red` | - | -| --van-calendar-range-middle-color | `@red` | - | +| --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-middle-background-opacity | `0.1` | - | | --van-calendar-selected-day-size | `54px` | - | -| --van-calendar-selected-day-color | `@white` | - | -| --van-calendar-info-font-size | `@font-size-xs` | - | -| --van-calendar-info-line-height | `@line-height-xs` | - | -| --van-calendar-selected-day-background-color | `@red` | - | -| --van-calendar-day-disabled-color | `@gray-5` | - | +| --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-day-disabled-color | `var(--van-gary-5)` | - | | --van-calendar-confirm-button-height | `36px` | - | | --van-calendar-confirm-button-margin | `7px 0` | - | diff --git a/src/card/README.md b/src/card/README.md index c36143ed9..15b7d59b6 100644 --- a/src/card/README.md +++ b/src/card/README.md @@ -114,19 +114,19 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-card-padding | `@padding-xs @padding-md` | - | -| --van-card-font-size | `@font-size-sm` | - | -| --van-card-text-color | `@text-color` | - | -| --van-card-background-color | `@background-color-light` | - | +| --van-card-padding | `var(--van-padding-xs) var(--van-padding-md)` | - | +| --van-card-font-size | `var(--van-font-size-sm)` | - | +| --van-card-text-color | `var(--van-text-color)` | - | +| --van-card-background-color | `var(--van-background-color-light)` | - | | --van-card-thumb-size | `88px` | - | -| --van-card-thumb-border-radius | `@border-radius-lg` | - | +| --van-card-thumb-border-radius | `var(--van-border-radius-lg)` | - | | --van-card-title-line-height | `16px` | - | -| --van-card-desc-color | `@gray-7` | - | -| --van-card-desc-line-height | `@line-height-md` | - | -| --van-card-price-color | `@gray-8` | - | -| --van-card-origin-price-color | `@gray-6` | - | -| --van-card-num-color | `@gray-6` | - | -| --van-card-origin-price-font-size | `@font-size-xs` | - | -| --van-card-price-font-size | `@font-size-sm` | - | -| --van-card-price-integer-font-size | `@font-size-lg` | - | -| --van-card-price-font-family | `@price-integer-font-family` | - | +| --van-card-desc-color | `var(--van-gary-7)` | - | +| --van-card-desc-line-height | `var(--van-line-height-md)` | - | +| --van-card-price-color | `var(--van-gary-8)` | - | +| --van-card-origin-price-color | `var(--van-gary-6)` | - | +| --van-card-num-color | `var(--van-gary-6)` | - | +| --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)` | - | +| --van-card-price-font-family | `var(--van-price-integer-font-family)` | - | diff --git a/src/card/README.zh-CN.md b/src/card/README.zh-CN.md index ad5f8e699..58a2a9600 100644 --- a/src/card/README.zh-CN.md +++ b/src/card/README.zh-CN.md @@ -114,21 +114,21 @@ app.use(Card); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ---------------------------------- | ---------------------------- | ---- | -| --van-card-padding | `@padding-xs @padding-md` | - | -| --van-card-font-size | `@font-size-sm` | - | -| --van-card-text-color | `@text-color` | - | -| --van-card-background-color | `@background-color-light` | - | -| --van-card-thumb-size | `88px` | - | -| --van-card-thumb-border-radius | `@border-radius-lg` | - | -| --van-card-title-line-height | `16px` | - | -| --van-card-desc-color | `@gray-7` | - | -| --van-card-desc-line-height | `@line-height-md` | - | -| --van-card-price-color | `@gray-8` | - | -| --van-card-origin-price-color | `@gray-6` | - | -| --van-card-num-color | `@gray-6` | - | -| --van-card-origin-price-font-size | `@font-size-xs` | - | -| --van-card-price-font-size | `@font-size-sm` | - | -| --van-card-price-integer-font-size | `@font-size-lg` | - | -| --van-card-price-font-family | `@price-integer-font-family` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-card-padding | `var(--van-padding-xs) var(--van-padding-md)` | - | +| --van-card-font-size | `var(--van-font-size-sm)` | - | +| --van-card-text-color | `var(--van-text-color)` | - | +| --van-card-background-color | `var(--van-background-color-light)` | - | +| --van-card-thumb-size | `88px` | - | +| --van-card-thumb-border-radius | `var(--van-border-radius-lg)` | - | +| --van-card-title-line-height | `16px` | - | +| --van-card-desc-color | `var(--van-gary-7)` | - | +| --van-card-desc-line-height | `var(--van-line-height-md)` | - | +| --van-card-price-color | `var(--van-gary-8)` | - | +| --van-card-origin-price-color | `var(--van-gary-6)` | - | +| --van-card-num-color | `var(--van-gary-6)` | - | +| --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)` | - | +| --van-card-price-font-family | `var(--van-price-integer-font-family)` | - | diff --git a/src/cascader/README.md b/src/cascader/README.md index e088e3197..9eeb65210 100644 --- a/src/cascader/README.md +++ b/src/cascader/README.md @@ -232,18 +232,18 @@ 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-cascader-header-height | `48px` | - | -| --van-cascader-header-padding | `0 @padding-md` | - | -| --van-cascader-title-font-size | `@font-size-lg` | - | -| --van-cascader-title-line-height | `20px` | - | -| --van-cascader-close-icon-size | `22px` | - | -| --van-cascader-close-icon-color | `@gray-5` | - | -| --van-cascader-close-icon-active-color | `@gray-6` | - | -| --van-cascader-selected-icon-size | `18px` | - | -| --van-cascader-tabs-height | `48px` | - | -| --van-cascader-active-color | `@red` | - | -| --van-cascader-options-height | `384px` | - | -| --van-cascader-tab-color | `@text-color` | - | -| --van-cascader-unselected-tab-color | `@gray-6` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --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-gary-5)` | - | +| --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-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 d86c72af8..8f906eee3 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -242,18 +242,18 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| -------------------------------------- | --------------- | ---- | -| --van-cascader-header-height | `48px` | - | -| --van-cascader-header-padding | `0 @padding-md` | - | -| --van-cascader-title-font-size | `@font-size-lg` | - | -| --van-cascader-title-line-height | `20px` | - | -| --van-cascader-close-icon-size | `22px` | - | -| --van-cascader-close-icon-color | `@gray-5` | - | -| --van-cascader-close-icon-active-color | `@gray-6` | - | -| --van-cascader-selected-icon-size | `18px` | - | -| --van-cascader-tabs-height | `48px` | - | -| --van-cascader-active-color | `@red` | - | -| --van-cascader-options-height | `384px` | - | -| --van-cascader-tab-color | `@text-color` | - | -| --van-cascader-unselected-tab-color | `@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-gary-5)` | - | +| --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-options-height | `384px` | - | +| --van-cascader-tab-color | `var(--van-text-color)` | - | +| --van-cascader-unselected-tab-color | `var(--van-gary-6)` | - | diff --git a/src/cell/README.md b/src/cell/README.md index 3cab1ffc6..d00e6ea63 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -188,27 +188,27 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-cell-font-size | `@font-size-md` | - | +| --van-cell-font-size | `var(--van-font-size-md)` | - | | --van-cell-line-height | `24px` | - | | --van-cell-vertical-padding | `10px` | - | -| --van-cell-horizontal-padding | `@padding-md` | - | -| --van-cell-text-color | `@text-color` | - | -| --van-cell-background-color | `@white` | - | -| --van-cell-border-color | `@border-color` | - | -| --van-cell-active-color | `@active-color` | - | -| --van-cell-required-color | `@red` | - | -| --van-cell-label-color | `@gray-6` | - | -| --van-cell-label-font-size | `@font-size-sm` | - | -| --van-cell-label-line-height | `@line-height-sm` | - | -| --van-cell-label-margin-top | `@padding-base` | - | -| --van-cell-value-color | `@gray-6` | - | +| --van-cell-horizontal-padding | `var(--van-padding-md)` | - | +| --van-cell-text-color | `var(--van-text-color)` | - | +| --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-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)` | - | +| --van-cell-label-margin-top | `var(--van-padding-base)` | - | +| --van-cell-value-color | `var(--van-gary-6)` | - | | --van-cell-icon-size | `16px` | - | -| --van-cell-right-icon-color | `@gray-6` | - | -| --van-cell-large-vertical-padding | `@padding-sm` | - | -| --van-cell-large-title-font-size | `@font-size-lg` | - | -| --van-cell-large-label-font-size | `@font-size-md` | - | -| --van-cell-group-background-color | `@white` | - | -| --van-cell-group-title-color | `@gray-6` | - | -| --van-cell-group-title-padding | `@padding-md @padding-md @padding-xs` | - | -| --van-cell-group-title-font-size | `@font-size-md` | - | +| --van-cell-right-icon-color | `var(--van-gary-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-white)` | - | +| --van-cell-group-title-color | `var(--van-gary-6)` | - | +| --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` | - | diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index 9e5f451a8..740f45921 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -191,27 +191,27 @@ app.use(CellGroup); | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-cell-font-size | `@font-size-md` | - | +| --van-cell-font-size | `var(--van-font-size-md)` | - | | --van-cell-line-height | `24px` | - | | --van-cell-vertical-padding | `10px` | - | -| --van-cell-horizontal-padding | `@padding-md` | - | -| --van-cell-text-color | `@text-color` | - | -| --van-cell-background-color | `@white` | - | -| --van-cell-border-color | `@border-color` | - | -| --van-cell-active-color | `@active-color` | - | -| --van-cell-required-color | `@red` | - | -| --van-cell-label-color | `@gray-6` | - | -| --van-cell-label-font-size | `@font-size-sm` | - | -| --van-cell-label-line-height | `@line-height-sm` | - | -| --van-cell-label-margin-top | `@padding-base` | - | -| --van-cell-value-color | `@gray-6` | - | +| --van-cell-horizontal-padding | `var(--van-padding-md)` | - | +| --van-cell-text-color | `var(--van-text-color)` | - | +| --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-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)` | - | +| --van-cell-label-margin-top | `var(--van-padding-base)` | - | +| --van-cell-value-color | `var(--van-gary-6)` | - | | --van-cell-icon-size | `16px` | - | -| --van-cell-right-icon-color | `@gray-6` | - | -| --van-cell-large-vertical-padding | `@padding-sm` | - | -| --van-cell-large-title-font-size | `@font-size-lg` | - | -| --van-cell-large-label-font-size | `@font-size-md` | - | -| --van-cell-group-background-color | `@white` | - | -| --van-cell-group-title-color | `@gray-6` | - | -| --van-cell-group-title-padding | `@padding-md @padding-md @padding-xs` | - | -| --van-cell-group-title-font-size | `@font-size-md` | - | +| --van-cell-right-icon-color | `var(--van-gary-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-white)` | - | +| --van-cell-group-title-color | `var(--van-gary-6)` | - | +| --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` | - | diff --git a/src/checkbox/README.md b/src/checkbox/README.md index b7befc8d4..22e7eeafb 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -334,11 +334,11 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-checkbox-size | `20px` | - | -| --van-checkbox-border-color | `@gray-5` | - | -| --van-checkbox-transition-duration | `@animation-duration-fast` | - | -| --van-checkbox-label-margin | `@padding-xs` | - | -| --van-checkbox-label-color | `@text-color` | - | -| --van-checkbox-checked-icon-color | `@blue` | - | -| --van-checkbox-disabled-icon-color | `@gray-5` | - | -| --van-checkbox-disabled-label-color | `@gray-5` | - | -| --van-checkbox-disabled-background-color | `@border-color` | - | +| --van-checkbox-border-color | `var(--van-gary-5)` | - | +| --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-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 6227fbb5d..8c78cf7f8 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -349,14 +349,14 @@ checkboxGroup.toggleAll({ 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ---------------------------------------- | -------------------------- | ---- | -| --van-checkbox-size | `20px` | - | -| --van-checkbox-border-color | `@gray-5` | - | -| --van-checkbox-transition-duration | `@animation-duration-fast` | - | -| --van-checkbox-label-margin | `@padding-xs` | - | -| --van-checkbox-label-color | `@text-color` | - | -| --van-checkbox-checked-icon-color | `@blue` | - | -| --van-checkbox-disabled-icon-color | `@gray-5` | - | -| --van-checkbox-disabled-label-color | `@gray-5` | - | -| --van-checkbox-disabled-background-color | `@border-color` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-checkbox-size | `20px` | - | +| --van-checkbox-border-color | `var(--van-gary-5)` | - | +| --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-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/circle/README.md b/src/circle/README.md index 7dfe8e0c8..78427de79 100644 --- a/src/circle/README.md +++ b/src/circle/README.md @@ -147,12 +147,12 @@ 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-circle-size | `100px` | - | -| --van-circle-color | `@blue` | - | -| --van-circle-layer-color | `@white` | - | -| --van-circle-text-color | `@text-color` | - | -| --van-circle-text-font-weight | `@font-weight-bold` | - | -| --van-circle-text-font-size | `@font-size-md` | - | -| --van-circle-text-line-height | `@line-height-md` | - | +| Name | Default Value | Description | +| ----------------------------- | ----------------------------- | ----------- | +| --van-circle-size | `100px` | - | +| --van-circle-color | `var(--van-blue)` | - | +| --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)` | - | +| --van-circle-text-font-size | `var(--van-font-size-md)` | - | +| --van-circle-text-line-height | `var(--van-line-height-md)` | - | diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md index f76f2f0c3..d5a0b39ec 100644 --- a/src/circle/README.zh-CN.md +++ b/src/circle/README.zh-CN.md @@ -159,12 +159,12 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ----------------------------- | ------------------- | ---- | -| --van-circle-size | `100px` | - | -| --van-circle-color | `@blue` | - | -| --van-circle-layer-color | `@white` | - | -| --van-circle-text-color | `@text-color` | - | -| --van-circle-text-font-weight | `@font-weight-bold` | - | -| --van-circle-text-font-size | `@font-size-md` | - | -| --van-circle-text-line-height | `@line-height-md` | - | +| 名称 | 默认值 | 描述 | +| ----------------------------- | ----------------------------- | ---- | +| --van-circle-size | `100px` | - | +| --van-circle-color | `var(--van-blue)` | - | +| --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)` | - | +| --van-circle-text-font-size | `var(--van-font-size-md)` | - | +| --van-circle-text-line-height | `var(--van-line-height-md)` | - | diff --git a/src/collapse/README.md b/src/collapse/README.md index 629048178..2b899ff67 100644 --- a/src/collapse/README.md +++ b/src/collapse/README.md @@ -166,10 +166,10 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-collapse-item-transition-duration | `@animation-duration-base` | - | -| --van-collapse-item-content-padding | `@padding-sm @padding-md` | - | -| --van-collapse-item-content-font-size | `@font-size-md` | - | +| --van-collapse-item-transition-duration | `var(--van-animation-duration-base)` | - | +| --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 | `@gray-6` | - | -| --van-collapse-item-content-background-color | `@white` | - | -| --van-collapse-item-title-disabled-color | `@gray-5` | - | +| --van-collapse-item-content-text-color | `var(--van-gary-6)` | - | +| --van-collapse-item-content-background-color | `var(--van-white)` | - | +| --van-collapse-item-title-disabled-color | `var(--van-gary-5)` | - | diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md index 7cae1c6d1..bc13c02c3 100644 --- a/src/collapse/README.zh-CN.md +++ b/src/collapse/README.zh-CN.md @@ -164,10 +164,10 @@ export default { | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-collapse-item-transition-duration | `@animation-duration-base` | - | -| --van-collapse-item-content-padding | `@padding-sm @padding-md` | - | -| --van-collapse-item-content-font-size | `@font-size-md` | - | +| --van-collapse-item-transition-duration | `var(--van-animation-duration-base)` | - | +| --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 | `@gray-6` | - | -| --van-collapse-item-content-background-color | `@white` | - | -| --van-collapse-item-title-disabled-color | `@gray-5` | - | +| --van-collapse-item-content-text-color | `var(--van-gary-6)` | - | +| --van-collapse-item-content-background-color | `var(--van-white)` | - | +| --van-collapse-item-title-disabled-color | `var(--van-gary-5)` | - | diff --git a/src/contact-card/README.md b/src/contact-card/README.md index 3a1916482..d65977a28 100644 --- a/src/contact-card/README.md +++ b/src/contact-card/README.md @@ -100,9 +100,9 @@ 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-contact-card-padding | `@padding-md` | - | -| --van-contact-card-add-icon-size | `40px` | - | -| --van-contact-card-add-icon-color | `@blue` | - | -| --van-contact-card-value-line-height | `@line-height-md` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --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-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 308a81798..492e80be6 100644 --- a/src/contact-card/README.zh-CN.md +++ b/src/contact-card/README.zh-CN.md @@ -95,9 +95,9 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------ | ----------------- | ---- | -| --van-contact-card-padding | `@padding-md` | - | -| --van-contact-card-add-icon-size | `40px` | - | -| --van-contact-card-add-icon-color | `@blue` | - | -| --van-contact-card-value-line-height | `@line-height-md` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------ | --------------------------- | ---- | +| --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-value-line-height | `var(--van-line-height-md)` | - | diff --git a/src/contact-edit/README.md b/src/contact-edit/README.md index a32fd7e2f..17d3c0176 100644 --- a/src/contact-edit/README.md +++ b/src/contact-edit/README.md @@ -81,11 +81,11 @@ 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-contact-edit-padding | `@padding-md` | - | -| --van-contact-edit-fields-radius | `@border-radius-md` | - | -| --van-contact-edit-buttons-padding | `@padding-xl 0` | - | -| --van-contact-edit-button-margin-bottom | `@padding-sm` | - | -| --van-contact-edit-button-font-size | `16px` | - | -| --van-contact-edit-field-label-width | `4.1em` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-contact-edit-padding | `var(--van-padding-md)` | - | +| --van-contact-edit-fields-radius | `var(--van-border-radius-md)` | - | +| --van-contact-edit-buttons-padding | `var(--van-padding-xl) 0` | - | +| --van-contact-edit-button-margin-bottom | `var(--van-padding-sm)` | - | +| --van-contact-edit-button-font-size | `16px` | - | +| --van-contact-edit-field-label-width | `4.1em` | - | diff --git a/src/contact-edit/README.zh-CN.md b/src/contact-edit/README.zh-CN.md index 70fbea45f..815353b6c 100644 --- a/src/contact-edit/README.zh-CN.md +++ b/src/contact-edit/README.zh-CN.md @@ -81,11 +81,11 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --------------------------------------- | ------------------- | ---- | -| --van-contact-edit-padding | `@padding-md` | - | -| --van-contact-edit-fields-radius | `@border-radius-md` | - | -| --van-contact-edit-buttons-padding | `@padding-xl 0` | - | -| --van-contact-edit-button-margin-bottom | `@padding-sm` | - | -| --van-contact-edit-button-font-size | `16px` | - | -| --van-contact-edit-field-label-width | `4.1em` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-contact-edit-padding | `var(--van-padding-md)` | - | +| --van-contact-edit-fields-radius | `var(--van-border-radius-md)` | - | +| --van-contact-edit-buttons-padding | `var(--van-padding-xl) 0` | - | +| --van-contact-edit-button-margin-bottom | `var(--van-padding-sm)` | - | +| --van-contact-edit-button-font-size | `16px` | - | +| --van-contact-edit-field-label-width | `4.1em` | - | diff --git a/src/contact-list/README.md b/src/contact-list/README.md index 0a23ae87b..7371c0316 100644 --- a/src/contact-list/README.md +++ b/src/contact-list/README.md @@ -100,9 +100,9 @@ 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-contact-list-edit-icon-size | `16px` | - | -| --van-contact-list-add-button-z-index | `999` | - | -| --van-contact-list-item-padding | `@padding-md` | - | -| --van-contact-list-item-radio-icon-color | `@red` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --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)` | - | diff --git a/src/contact-list/README.zh-CN.md b/src/contact-list/README.zh-CN.md index bcd347928..79e08f7f5 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 | `@padding-md` | - | -| --van-contact-list-item-radio-icon-color | `@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-red)` | - | diff --git a/src/count-down/README.md b/src/count-down/README.md index 9b599a726..27a87cadf 100644 --- a/src/count-down/README.md +++ b/src/count-down/README.md @@ -185,8 +185,8 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get CountD 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-count-down-text-color | `@text-color` | - | -| --van-count-down-font-size | `@font-size-md` | - | -| --van-count-down-line-height | `@line-height-md` | - | +| Name | Default Value | Description | +| ---------------------------- | --------------------------- | ----------- | +| --van-count-down-text-color | `var(--van-text-color)` | - | +| --van-count-down-font-size | `var(--van-font-size-md)` | - | +| --van-count-down-line-height | `var(--van-line-height-md)` | - | diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md index 9ae9a5ae0..a2e34d929 100644 --- a/src/count-down/README.zh-CN.md +++ b/src/count-down/README.zh-CN.md @@ -195,11 +195,11 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ---------------------------- | ----------------- | ---- | -| --van-count-down-text-color | `@text-color` | - | -| --van-count-down-font-size | `@font-size-md` | - | -| --van-count-down-line-height | `@line-height-md` | - | +| 名称 | 默认值 | 描述 | +| ---------------------------- | --------------------------- | ---- | +| --van-count-down-text-color | `var(--van-text-color)` | - | +| --van-count-down-font-size | `var(--van-font-size-md)` | - | +| --van-count-down-line-height | `var(--van-line-height-md)` | - | ## 常见问题 diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md index 499b8714a..a78b48518 100644 --- a/src/coupon-list/README.md +++ b/src/coupon-list/README.md @@ -155,28 +155,28 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-coupon-margin | `0 @padding-sm @padding-sm` | - | +| --van-coupon-margin | `0 var(--van-padding-sm) var(--van-padding-sm)` | - | | --van-coupon-content-height | `84px` | - | | --van-coupon-content-padding | `14px 0` | - | -| --van-coupon-background-color | `@white` | - | -| --van-coupon-active-background-color | `@active-color` | - | -| --van-coupon-border-radius | `@border-radius-lg` | - | +| --van-coupon-background-color | `var(--van-white)` | - | +| --van-coupon-active-background-color | `var(--van-active-color)` | - | +| --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 | `@red` | - | +| --van-coupon-amount-color | `var(--van-red)` | - | | --van-coupon-amount-font-size | `30px` | - | | --van-coupon-currency-font-size | `40%` | - | -| --van-coupon-name-font-size | `@font-size-md` | - | -| --van-coupon-disabled-text-color | `@gray-6` | - | -| --van-coupon-description-padding | `@padding-xs @padding-md` | - | -| --van-coupon-description-border-color | `@border-color` | - | -| --van-coupon-corner-checkbox-icon-color | `@red` | - | -| --van-coupon-list-background-color | `@background-color` | - | -| --van-coupon-list-field-padding | `5px 0 5px @padding-md` | - | +| --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-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` | - | | --van-coupon-list-close-button-height | `40px` | - | | --van-coupon-list-empty-image-size | `200px` | - | -| --van-coupon-list-empty-tip-color | `@gray-6` | - | -| --van-coupon-list-empty-tip-font-size | `@font-size-md` | - | -| --van-coupon-list-empty-tip-line-height | `@line-height-md` | - | -| --van-coupon-cell-selected-text-color | `@text-color` | - | +| --van-coupon-list-empty-tip-color | `var(--van-gary-6)` | - | +| --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)` | - | diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md index 362f5470b..0eef02f0b 100644 --- a/src/coupon-list/README.zh-CN.md +++ b/src/coupon-list/README.zh-CN.md @@ -157,28 +157,28 @@ export default { | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-coupon-margin | `0 @padding-sm @padding-sm` | - | +| --van-coupon-margin | `0 var(--van-padding-sm) var(--van-padding-sm)` | - | | --van-coupon-content-height | `84px` | - | | --van-coupon-content-padding | `14px 0` | - | -| --van-coupon-background-color | `@white` | - | -| --van-coupon-active-background-color | `@active-color` | - | -| --van-coupon-border-radius | `@border-radius-lg` | - | +| --van-coupon-background-color | `var(--van-white)` | - | +| --van-coupon-active-background-color | `var(--van-active-color)` | - | +| --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 | `@red` | - | +| --van-coupon-amount-color | `var(--van-red)` | - | | --van-coupon-amount-font-size | `30px` | - | | --van-coupon-currency-font-size | `40%` | - | -| --van-coupon-name-font-size | `@font-size-md` | - | -| --van-coupon-disabled-text-color | `@gray-6` | - | -| --van-coupon-description-padding | `@padding-xs @padding-md` | - | -| --van-coupon-description-border-color | `@border-color` | - | -| --van-coupon-corner-checkbox-icon-color | `@red` | - | -| --van-coupon-list-background-color | `@background-color` | - | -| --van-coupon-list-field-padding | `5px 0 5px @padding-md` | - | +| --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-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` | - | | --van-coupon-list-close-button-height | `40px` | - | | --van-coupon-list-empty-image-size | `200px` | - | -| --van-coupon-list-empty-tip-color | `@gray-6` | - | -| --van-coupon-list-empty-tip-font-size | `@font-size-md` | - | -| --van-coupon-list-empty-tip-line-height | `@line-height-md` | - | -| --van-coupon-cell-selected-text-color | `@text-color` | - | +| --van-coupon-list-empty-tip-color | `var(--van-gary-6)` | - | +| --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)` | - | diff --git a/src/dialog/README.md b/src/dialog/README.md index 3112fdcf0..b5af194ee 100644 --- a/src/dialog/README.md +++ b/src/dialog/README.md @@ -222,20 +222,20 @@ The component provides the following CSS variables, which can be used to customi | --- | --- | --- | | --van-dialog-width | `320px` | - | | --van-dialog-small-screen-width | `90%` | - | -| --van-dialog-font-size | `@font-size-lg` | - | -| --van-dialog-transition | `@animation-duration-base` | - | +| --van-dialog-font-size | `var(--van-font-size-lg)` | - | +| --van-dialog-transition | `var(--van-animation-duration-base)` | - | | --van-dialog-border-radius | `16px` | - | -| --van-dialog-background-color | `@white` | - | -| --van-dialog-header-font-weight | `@font-weight-bold` | - | +| --van-dialog-background-color | `var(--van-white)` | - | +| --van-dialog-header-font-weight | `var(--van-font-weight-bold)` | - | | --van-dialog-header-line-height | `24px` | - | | --van-dialog-header-padding-top | `26px` | - | -| --van-dialog-header-isolated-padding | `@padding-lg 0` | - | -| --van-dialog-message-padding | `@padding-lg` | - | -| --van-dialog-message-font-size | `@font-size-md` | - | -| --van-dialog-message-line-height | `@line-height-md` | - | +| --van-dialog-header-isolated-padding | `var(--van-padding-lg) 0` | - | +| --van-dialog-message-padding | `var(--van-padding-lg)` | - | +| --van-dialog-message-font-size | `var(--van-font-size-md)` | - | +| --van-dialog-message-line-height | `var(--van-line-height-md)` | - | | --van-dialog-message-max-height | `60vh` | - | -| --van-dialog-has-title-message-text-color | `@gray-7` | - | -| --van-dialog-has-title-message-padding-top | `@padding-xs` | - | +| --van-dialog-has-title-message-text-color | `var(--van-gary-7)` | - | +| --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 | `@red` | - | +| --van-dialog-confirm-button-text-color | `var(--van-red)` | - | diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md index b977ff06d..8e1626ef9 100644 --- a/src/dialog/README.zh-CN.md +++ b/src/dialog/README.zh-CN.md @@ -257,23 +257,23 @@ export default { | --- | --- | --- | | --van-dialog-width | `320px` | - | | --van-dialog-small-screen-width | `90%` | - | -| --van-dialog-font-size | `@font-size-lg` | - | -| --van-dialog-transition | `@animation-duration-base` | - | +| --van-dialog-font-size | `var(--van-font-size-lg)` | - | +| --van-dialog-transition | `var(--van-animation-duration-base)` | - | | --van-dialog-border-radius | `16px` | - | -| --van-dialog-background-color | `@white` | - | -| --van-dialog-header-font-weight | `@font-weight-bold` | - | +| --van-dialog-background-color | `var(--van-white)` | - | +| --van-dialog-header-font-weight | `var(--van-font-weight-bold)` | - | | --van-dialog-header-line-height | `24px` | - | | --van-dialog-header-padding-top | `26px` | - | -| --van-dialog-header-isolated-padding | `@padding-lg 0` | - | -| --van-dialog-message-padding | `@padding-lg` | - | -| --van-dialog-message-font-size | `@font-size-md` | - | -| --van-dialog-message-line-height | `@line-height-md` | - | +| --van-dialog-header-isolated-padding | `var(--van-padding-lg) 0` | - | +| --van-dialog-message-padding | `var(--van-padding-lg)` | - | +| --van-dialog-message-font-size | `var(--van-font-size-md)` | - | +| --van-dialog-message-line-height | `var(--van-line-height-md)` | - | | --van-dialog-message-max-height | `60vh` | - | -| --van-dialog-has-title-message-text-color | `@gray-7` | - | -| --van-dialog-has-title-message-padding-top | `@padding-xs` | - | +| --van-dialog-has-title-message-text-color | `var(--van-gary-7)` | - | +| --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 | `@red` | - | +| --van-dialog-confirm-button-text-color | `var(--van-red)` | - | ## 常见问题 diff --git a/src/divider/README.md b/src/divider/README.md index 5eeca20ba..2abc49d60 100644 --- a/src/divider/README.md +++ b/src/divider/README.md @@ -73,13 +73,13 @@ app.use(Divider); 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 | `@padding-md 0` | - | -| --van-divider-text-color | `@gray-6` | - | -| --van-divider-font-size | `@font-size-md` | - | -| --van-divider-line-height | `24px` | - | -| --van-divider-border-color | `@border-color` | - | -| --van-divider-content-padding | `@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-gary-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%` | - | diff --git a/src/divider/README.zh-CN.md b/src/divider/README.zh-CN.md index e6f0d4023..d94f3ae16 100644 --- a/src/divider/README.zh-CN.md +++ b/src/divider/README.zh-CN.md @@ -83,13 +83,13 @@ app.use(Divider); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --------------------------------- | --------------- | ---- | -| --van-divider-margin | `@padding-md 0` | - | -| --van-divider-text-color | `@gray-6` | - | -| --van-divider-font-size | `@font-size-md` | - | -| --van-divider-line-height | `24px` | - | -| --van-divider-border-color | `@border-color` | - | -| --van-divider-content-padding | `@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-gary-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%` | - | diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md index 5f89ca331..a5b9d6c44 100644 --- a/src/dropdown-menu/README.md +++ b/src/dropdown-menu/README.md @@ -207,14 +207,14 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-dropdown-menu-height | `48px` | - | -| --van-dropdown-menu-background-color | `@white` | - | +| --van-dropdown-menu-background-color | `var(--van-white)` | - | | --van-dropdown-menu-box-shadow | `0 2px 12px fade(@gray-7, 12)` | - | | --van-dropdown-menu-title-font-size | `15px` | - | -| --van-dropdown-menu-title-text-color | `@text-color` | - | -| --van-dropdown-menu-title-active-text-color | `@red` | - | -| --van-dropdown-menu-title-disabled-text-color | `@gray-6` | - | -| --van-dropdown-menu-title-padding | `0 @padding-xs` | - | -| --van-dropdown-menu-title-line-height | `@line-height-lg` | - | -| --van-dropdown-menu-option-active-color | `@red` | - | +| --van-dropdown-menu-title-text-color | `var(--van-text-color)` | - | +| --van-dropdown-menu-title-active-text-color | `var(--van-red)` | - | +| --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-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 8871c8665..17ddbd236 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -211,15 +211,15 @@ export default { | 名称 | 默认值 | 描述 | | --- | --- | --- | | --van-dropdown-menu-height | `48px` | - | -| --van-dropdown-menu-background-color | `@white` | - | +| --van-dropdown-menu-background-color | `var(--van-white)` | - | | --van-dropdown-menu-box-shadow | `0 2px 12px fade(@gray-7, 12)` | - | | --van-dropdown-menu-title-font-size | `15px` | - | -| --van-dropdown-menu-title-text-color | `@text-color` | - | -| --van-dropdown-menu-title-active-text-color | `@red` | - | -| --van-dropdown-menu-title-disabled-text-color | `@gray-6` | - | -| --van-dropdown-menu-title-padding | `0 @padding-xs` | - | -| --van-dropdown-menu-title-line-height | `@line-height-lg` | - | -| --van-dropdown-menu-option-active-color | `@red` | - | +| --van-dropdown-menu-title-text-color | `var(--van-text-color)` | - | +| --van-dropdown-menu-title-active-text-color | `var(--van-red)` | - | +| --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-content-max-height | `80%` | - | | --van-dropdown-item-z-index | `10` | - | diff --git a/src/empty/README.md b/src/empty/README.md index 4649997bb..32f8c2a1b 100644 --- a/src/empty/README.md +++ b/src/empty/README.md @@ -90,13 +90,13 @@ Use the image prop to display different placeholder images. 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-empty-padding | `@padding-xl 0` | - | -| --van-empty-image-size | `160px` | - | -| --van-empty-description-margin-top | `@padding-md` | - | -| --van-empty-description-padding | `0 60px` | - | -| --van-empty-description-color | `@gray-6` | - | -| --van-empty-description-font-size | `@font-size-md` | - | -| --van-empty-description-line-height | `@line-height-md` | - | -| --van-empty-bottom-margin-top | `24px` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --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-gary-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` | - | diff --git a/src/empty/README.zh-CN.md b/src/empty/README.zh-CN.md index 2255f2432..85a5e2b8b 100644 --- a/src/empty/README.zh-CN.md +++ b/src/empty/README.zh-CN.md @@ -95,13 +95,13 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ----------------------------------- | ----------------- | ---- | -| --van-empty-padding | `@padding-xl 0` | - | -| --van-empty-image-size | `160px` | - | -| --van-empty-description-margin-top | `@padding-md` | - | -| --van-empty-description-padding | `0 60px` | - | -| --van-empty-description-color | `@gray-6` | - | -| --van-empty-description-font-size | `@font-size-md` | - | -| --van-empty-description-line-height | `@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-gary-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` | - | diff --git a/src/field/README.md b/src/field/README.md index 0b432a348..263147bb0 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -313,23 +313,23 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Field 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-field-label-width | `6.2em` | - | -| --van-field-label-color | `@gray-7` | - | -| --van-field-label-margin-right | `@padding-sm` | - | -| --van-field-input-text-color | `@text-color` | - | -| --van-field-input-error-text-color | `@red` | - | -| --van-field-input-disabled-text-color | `@gray-5` | - | -| --van-field-placeholder-text-color | `@gray-5` | - | -| --van-field-icon-size | `16px` | - | -| --van-field-clear-icon-size | `16px` | - | -| --van-field-clear-icon-color | `@gray-5` | - | -| --van-field-right-icon-color | `@gray-6` | - | -| --van-field-error-message-color | `@red` | - | -| --van-field-error-message-text-color | `12px` | - | -| --van-field-text-area-min-height | `60px` | - | -| --van-field-word-limit-color | `@gray-7` | - | -| --van-field-word-limit-font-size | `@font-size-sm` | - | -| --van-field-word-limit-line-height | `16px` | - | -| --van-field-disabled-text-color | `@gray-5` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-field-label-width | `6.2em` | - | +| --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-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-text-color | `12px` | - | +| --van-field-text-area-min-height | `60px` | - | +| --van-field-word-limit-color | `var(--van-gary-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-gary-5)` | - | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index 2668a35bd..0865c7e67 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -330,26 +330,26 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------- | --------------- | ---- | -| --van-field-label-width | `6.2em` | - | -| --van-field-label-color | `@gray-7` | - | -| --van-field-label-margin-right | `@padding-sm` | - | -| --van-field-input-text-color | `@text-color` | - | -| --van-field-input-error-text-color | `@red` | - | -| --van-field-input-disabled-text-color | `@gray-5` | - | -| --van-field-placeholder-text-color | `@gray-5` | - | -| --van-field-icon-size | `16px` | - | -| --van-field-clear-icon-size | `16px` | - | -| --van-field-clear-icon-color | `@gray-5` | - | -| --van-field-right-icon-color | `@gray-6` | - | -| --van-field-error-message-color | `@red` | - | -| --van-field-error-message-text-color | `12px` | - | -| --van-field-text-area-min-height | `60px` | - | -| --van-field-word-limit-color | `@gray-7` | - | -| --van-field-word-limit-font-size | `@font-size-sm` | - | -| --van-field-word-limit-line-height | `16px` | - | -| --van-field-disabled-text-color | `@gray-5` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------- | ------------------------- | ---- | +| --van-field-label-width | `6.2em` | - | +| --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-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-text-color | `12px` | - | +| --van-field-text-area-min-height | `60px` | - | +| --van-field-word-limit-color | `var(--van-gary-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-gary-5)` | - | ## 常见问题 diff --git a/src/grid/README.md b/src/grid/README.md index cda6d33ec..3a7b1022d 100644 --- a/src/grid/README.md +++ b/src/grid/README.md @@ -147,9 +147,9 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-grid-item-content-padding | `@padding-md @padding-xs` | - | -| --van-grid-item-content-background-color | `@white` | - | -| --van-grid-item-content-active-color | `@active-color` | - | +| --van-grid-item-content-padding | `var(--van-padding-md) var(--van-padding-xs)` | - | +| --van-grid-item-content-background-color | `var(--van-white)` | - | +| --van-grid-item-content-active-color | `var(--van-active-color)` | - | | --van-grid-item-icon-size | `28px` | - | -| --van-grid-item-text-color | `@gray-7` | - | -| --van-grid-item-text-font-size | `@font-size-sm` | - | +| --van-grid-item-text-color | `var(--van-gary-7)` | - | +| --van-grid-item-text-font-size | `var(--van-font-size-sm)` | - | diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md index 693d4fc31..cb92b56a1 100644 --- a/src/grid/README.zh-CN.md +++ b/src/grid/README.zh-CN.md @@ -161,11 +161,11 @@ app.use(GridItem); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ---------------------------------------- | ------------------------- | ---- | -| --van-grid-item-content-padding | `@padding-md @padding-xs` | - | -| --van-grid-item-content-background-color | `@white` | - | -| --van-grid-item-content-active-color | `@active-color` | - | -| --van-grid-item-icon-size | `28px` | - | -| --van-grid-item-text-color | `@gray-7` | - | -| --van-grid-item-text-font-size | `@font-size-sm` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-grid-item-content-padding | `var(--van-padding-md) var(--van-padding-xs)` | - | +| --van-grid-item-content-background-color | `var(--van-white)` | - | +| --van-grid-item-content-active-color | `var(--van-active-color)` | - | +| --van-grid-item-icon-size | `28px` | - | +| --van-grid-item-text-color | `var(--van-gary-7)` | - | +| --van-grid-item-text-font-size | `var(--van-font-size-sm)` | - | diff --git a/src/image-preview/README.md b/src/image-preview/README.md index d38d74766..a083c392c 100644 --- a/src/image-preview/README.md +++ b/src/image-preview/README.md @@ -215,13 +215,13 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-image-preview-index-text-color | `@white` | - | -| --van-image-preview-index-font-size | `@font-size-md` | - | -| --van-image-preview-index-line-height | `@line-height-md` | - | +| --van-image-preview-index-text-color | `var(--van-white)` | - | +| --van-image-preview-index-font-size | `var(--van-font-size-md)` | - | +| --van-image-preview-index-line-height | `var(--van-line-height-md)` | - | | --van-image-preview-index-text-shadow | `0 1px 1px @gray-8` | - | | --van-image-preview-overlay-background-color | `rgba(0, 0, 0, 0.9)` | - | | --van-image-preview-close-icon-size | `22px` | - | -| --van-image-preview-close-icon-color | `@gray-5` | - | -| --van-image-preview-close-icon-active-color | `@gray-6` | - | -| --van-image-preview-close-icon-margin | `@padding-md` | - | +| --van-image-preview-close-icon-color | `var(--van-gary-5)` | - | +| --van-image-preview-close-icon-active-color | `var(--van-gary-6)` | - | +| --van-image-preview-close-icon-margin | `var(--van-padding-md)` | - | | --van-image-preview-close-icon-z-index | `1` | - | diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index 51d340365..e3c0f54e1 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -250,18 +250,18 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| -------------------------------------------- | -------------------- | ---- | -| --van-image-preview-index-text-color | `@white` | - | -| --van-image-preview-index-font-size | `@font-size-md` | - | -| --van-image-preview-index-line-height | `@line-height-md` | - | -| --van-image-preview-index-text-shadow | `0 1px 1px @gray-8` | - | -| --van-image-preview-overlay-background-color | `rgba(0, 0, 0, 0.9)` | - | -| --van-image-preview-close-icon-size | `22px` | - | -| --van-image-preview-close-icon-color | `@gray-5` | - | -| --van-image-preview-close-icon-active-color | `@gray-6` | - | -| --van-image-preview-close-icon-margin | `@padding-md` | - | -| --van-image-preview-close-icon-z-index | `1` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-image-preview-index-text-color | `var(--van-white)` | - | +| --van-image-preview-index-font-size | `var(--van-font-size-md)` | - | +| --van-image-preview-index-line-height | `var(--van-line-height-md)` | - | +| --van-image-preview-index-text-shadow | `0 1px 1px @gray-8` | - | +| --van-image-preview-overlay-background-color | `rgba(0, 0, 0, 0.9)` | - | +| --van-image-preview-close-icon-size | `22px` | - | +| --van-image-preview-close-icon-color | `var(--van-gary-5)` | - | +| --van-image-preview-close-icon-active-color | `var(--van-gary-6)` | - | +| --van-image-preview-close-icon-margin | `var(--van-padding-md)` | - | +| --van-image-preview-close-icon-z-index | `1` | - | ## 常见问题 diff --git a/src/image/README.md b/src/image/README.md index e9c0ec288..3cf9714ab 100644 --- a/src/image/README.md +++ b/src/image/README.md @@ -118,12 +118,12 @@ app.use(Lazyload); 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-image-placeholder-text-color | `@gray-6` | - | -| --van-image-placeholder-font-size | `@font-size-md` | - | -| --van-image-placeholder-background-color | `@background-color` | - | -| --van-image-loading-icon-size | `32px` | - | -| --van-image-loading-icon-color | `@gray-4` | - | -| --van-image-error-icon-size | `32px` | - | -| --van-image-error-icon-color | `@gray-4` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-image-placeholder-text-color | `var(--van-gary-6)` | - | +| --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` | - | +| --van-image-loading-icon-color | `var(--van-gary-4)` | - | +| --van-image-error-icon-size | `32px` | - | +| --van-image-error-icon-color | `var(--van-gary-4)` | - | diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md index 2feb11982..30bfbc608 100644 --- a/src/image/README.zh-CN.md +++ b/src/image/README.zh-CN.md @@ -146,15 +146,15 @@ app.use(Lazyload); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ---------------------------------------- | ------------------- | ---- | -| --van-image-placeholder-text-color | `@gray-6` | - | -| --van-image-placeholder-font-size | `@font-size-md` | - | -| --van-image-placeholder-background-color | `@background-color` | - | -| --van-image-loading-icon-size | `32px` | - | -| --van-image-loading-icon-color | `@gray-4` | - | -| --van-image-error-icon-size | `32px` | - | -| --van-image-error-icon-color | `@gray-4` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-image-placeholder-text-color | `var(--van-gary-6)` | - | +| --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` | - | +| --van-image-loading-icon-color | `var(--van-gary-4)` | - | +| --van-image-error-icon-size | `32px` | - | +| --van-image-error-icon-color | `var(--van-gary-4)` | - | ## 常见问题 diff --git a/src/index-bar/README.md b/src/index-bar/README.md index 167df360a..dbec6a1c5 100644 --- a/src/index-bar/README.md +++ b/src/index-bar/README.md @@ -112,15 +112,15 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-index-bar-sidebar-z-index | `2` | - | -| --van-index-bar-index-font-size | `@font-size-xs` | - | -| --van-index-bar-index-line-height | `@line-height-xs` | - | -| --van-index-bar-index-active-color | `@red` | - | +| --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-anchor-z-index | `1` | - | -| --van-index-anchor-padding | `0 @padding-md` | - | -| --van-index-anchor-text-color | `@text-color` | - | -| --van-index-anchor-font-weight | `@font-weight-bold` | - | -| --van-index-anchor-font-size | `@font-size-md` | - | +| --van-index-anchor-padding | `0 var(--van-padding-md)` | - | +| --van-index-anchor-text-color | `var(--van-text-color)` | - | +| --van-index-anchor-font-weight | `var(--van-font-weight-bold)` | - | +| --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 | `@red` | - | -| --van-index-anchor-sticky-background-color | `@white` | - | +| --van-index-anchor-sticky-text-color | `var(--van-red)` | - | +| --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 5e359aa46..7b873ea13 100644 --- a/src/index-bar/README.zh-CN.md +++ b/src/index-bar/README.zh-CN.md @@ -121,18 +121,18 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------------ | ------------------- | ---- | -| --van-index-bar-sidebar-z-index | `2` | - | -| --van-index-bar-index-font-size | `@font-size-xs` | - | -| --van-index-bar-index-line-height | `@line-height-xs` | - | -| --van-index-bar-index-active-color | `@red` | - | -| --van-index-anchor-z-index | `1` | - | -| --van-index-anchor-padding | `0 @padding-md` | - | -| --van-index-anchor-text-color | `@text-color` | - | -| --van-index-anchor-font-weight | `@font-weight-bold` | - | -| --van-index-anchor-font-size | `@font-size-md` | - | -| --van-index-anchor-line-height | `32px` | - | -| --van-index-anchor-background-color | `transparent` | - | -| --van-index-anchor-sticky-text-color | `@red` | - | -| --van-index-anchor-sticky-background-color | `@white` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --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-anchor-z-index | `1` | - | +| --van-index-anchor-padding | `0 var(--van-padding-md)` | - | +| --van-index-anchor-text-color | `var(--van-text-color)` | - | +| --van-index-anchor-font-weight | `var(--van-font-weight-bold)` | - | +| --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-background-color | `var(--van-white)` | - | diff --git a/src/list/README.md b/src/list/README.md index d35c13d78..b71401ee8 100644 --- a/src/list/README.md +++ b/src/list/README.md @@ -204,9 +204,9 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get List i 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 | `@gray-6` | - | -| --van-list-text-font-size | `@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-gary-6)` | - | +| --van-list-text-font-size | `var(--van-font-size-md)` | - | +| --van-list-text-line-height | `50px` | - | +| --van-list-loading-icon-size | `16px` | - | diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md index 5972beb22..20bad3993 100644 --- a/src/list/README.zh-CN.md +++ b/src/list/README.zh-CN.md @@ -219,12 +219,12 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ---------------------------- | --------------- | ---- | -| --van-list-text-color | `@gray-6` | - | -| --van-list-text-font-size | `@font-size-md` | - | -| --van-list-text-line-height | `50px` | - | -| --van-list-loading-icon-size | `16px` | - | +| 名称 | 默认值 | 描述 | +| ---------------------------- | ------------------------- | ---- | +| --van-list-text-color | `var(--van-gary-6)` | - | +| --van-list-text-font-size | `var(--van-font-size-md)` | - | +| --van-list-text-line-height | `50px` | - | +| --van-list-loading-icon-size | `16px` | - | ## 常见问题 diff --git a/src/loading/README.md b/src/loading/README.md index 455e58782..43f195593 100644 --- a/src/loading/README.md +++ b/src/loading/README.md @@ -89,10 +89,10 @@ use `color` or `text-color` to change text color. 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-loading-text-color | `@gray-6` | - | -| --van-loading-text-font-size | `@font-size-md` | - | -| --van-loading-spinner-color | `@gray-5` | - | -| --van-loading-spinner-size | `30px` | - | -| --van-loading-spinner-animation-duration | `0.8s` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-loading-text-color | `var(--van-gary-6)` | - | +| --van-loading-text-font-size | `var(--van-font-size-md)` | - | +| --van-loading-spinner-color | `var(--van-gary-5)` | - | +| --van-loading-spinner-size | `30px` | - | +| --van-loading-spinner-animation-duration | `0.8s` | - | diff --git a/src/loading/README.zh-CN.md b/src/loading/README.zh-CN.md index b5c983a3c..d56a4a650 100644 --- a/src/loading/README.zh-CN.md +++ b/src/loading/README.zh-CN.md @@ -99,10 +99,10 @@ app.use(Loading); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ---------------------------------------- | --------------- | ---- | -| --van-loading-text-color | `@gray-6` | - | -| --van-loading-text-font-size | `@font-size-md` | - | -| --van-loading-spinner-color | `@gray-5` | - | -| --van-loading-spinner-size | `30px` | - | -| --van-loading-spinner-animation-duration | `0.8s` | - | +| 名称 | 默认值 | 描述 | +| ---------------------------------------- | ------------------------- | ---- | +| --van-loading-text-color | `var(--van-gary-6)` | - | +| --van-loading-text-font-size | `var(--van-font-size-md)` | - | +| --van-loading-spinner-color | `var(--van-gary-5)` | - | +| --van-loading-spinner-size | `30px` | - | +| --van-loading-spinner-animation-duration | `0.8s` | - | diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md index a82a632df..5bbcfd1c6 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 | `@white` | - | -| --van-nav-bar-arrow-size | `16px` | - | -| --van-nav-bar-icon-color | `@blue` | - | -| --van-nav-bar-text-color | `@blue` | - | -| --van-nav-bar-title-font-size | `@font-size-lg` | - | -| --van-nav-bar-title-text-color | `@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-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` | - | diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md index 271d1449e..710585981 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 | `@white` | - | -| --van-nav-bar-arrow-size | `16px` | - | -| --van-nav-bar-icon-color | `@blue` | - | -| --van-nav-bar-text-color | `@blue` | - | -| --van-nav-bar-title-font-size | `@font-size-lg` | - | -| --van-nav-bar-title-text-color | `@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-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` | - | diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md index 7950f71a2..053d91736 100644 --- a/src/notice-bar/README.md +++ b/src/notice-bar/README.md @@ -119,14 +119,14 @@ app.use(NoticeBar); 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-notice-bar-height | `40px` | - | -| --van-notice-bar-padding | `0 @padding-md` | - | -| --van-notice-bar-wrapable-padding | `@padding-xs @padding-md` | - | -| --van-notice-bar-text-color | `@orange-dark` | - | -| --van-notice-bar-font-size | `@font-size-md` | - | -| --van-notice-bar-line-height | `24px` | - | -| --van-notice-bar-background-color | `@orange-light` | - | -| --van-notice-bar-icon-size | `16px` | - | -| --van-notice-bar-icon-min-width | `24px` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-notice-bar-height | `40px` | - | +| --van-notice-bar-padding | `0 var(--van-padding-md)` | - | +| --van-notice-bar-wrapable-padding | `var(--van-padding-xs) var(--van-padding-md)` | - | +| --van-notice-bar-text-color | `var(--van-orange-dark)` | - | +| --van-notice-bar-font-size | `var(--van-font-size-md)` | - | +| --van-notice-bar-line-height | `24px` | - | +| --van-notice-bar-background-color | `var(--van-orange-light)` | - | +| --van-notice-bar-icon-size | `16px` | - | +| --van-notice-bar-icon-min-width | `24px` | - | diff --git a/src/notice-bar/README.zh-CN.md b/src/notice-bar/README.zh-CN.md index b5c1ecdc3..e6d69ed1b 100644 --- a/src/notice-bar/README.zh-CN.md +++ b/src/notice-bar/README.zh-CN.md @@ -140,14 +140,14 @@ app.use(NoticeBar); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --------------------------------- | ------------------------- | ---- | -| --van-notice-bar-height | `40px` | - | -| --van-notice-bar-padding | `0 @padding-md` | - | -| --van-notice-bar-wrapable-padding | `@padding-xs @padding-md` | - | -| --van-notice-bar-text-color | `@orange-dark` | - | -| --van-notice-bar-font-size | `@font-size-md` | - | -| --van-notice-bar-line-height | `24px` | - | -| --van-notice-bar-background-color | `@orange-light` | - | -| --van-notice-bar-icon-size | `16px` | - | -| --van-notice-bar-icon-min-width | `24px` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-notice-bar-height | `40px` | - | +| --van-notice-bar-padding | `0 var(--van-padding-md)` | - | +| --van-notice-bar-wrapable-padding | `var(--van-padding-xs) var(--van-padding-md)` | - | +| --van-notice-bar-text-color | `var(--van-orange-dark)` | - | +| --van-notice-bar-font-size | `var(--van-font-size-md)` | - | +| --van-notice-bar-line-height | `24px` | - | +| --van-notice-bar-background-color | `var(--van-orange-light)` | - | +| --van-notice-bar-icon-size | `16px` | - | +| --van-notice-bar-icon-min-width | `24px` | - | diff --git a/src/notify/README.md b/src/notify/README.md index 404c56470..aeb3265aa 100644 --- a/src/notify/README.md +++ b/src/notify/README.md @@ -124,11 +124,11 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-notify-text-color | `@white` | - | -| --van-notify-padding | `@padding-xs @padding-md` | - | -| --van-notify-font-size | `@font-size-md` | - | -| --van-notify-line-height | `@line-height-md` | - | -| --van-notify-primary-background-color | `@blue` | - | -| --van-notify-success-background-color | `@green` | - | -| --van-notify-danger-background-color | `@red` | - | -| --van-notify-warning-background-color | `@orange` | - | +| --van-notify-text-color | `var(--van-white)` | - | +| --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)` | - | diff --git a/src/notify/README.zh-CN.md b/src/notify/README.zh-CN.md index 8efb3a40b..b12362b82 100644 --- a/src/notify/README.zh-CN.md +++ b/src/notify/README.zh-CN.md @@ -155,13 +155,13 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------- | ------------------------- | ---- | -| --van-notify-text-color | `@white` | - | -| --van-notify-padding | `@padding-xs @padding-md` | - | -| --van-notify-font-size | `@font-size-md` | - | -| --van-notify-line-height | `@line-height-md` | - | -| --van-notify-primary-background-color | `@blue` | - | -| --van-notify-success-background-color | `@green` | - | -| --van-notify-danger-background-color | `@red` | - | -| --van-notify-warning-background-color | `@orange` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-notify-text-color | `var(--van-white)` | - | +| --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)` | - | diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index b1296a98a..fd2e9a372 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -210,17 +210,17 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-number-keyboard-background-color | `@gray-2` | - | +| --van-number-keyboard-background-color | `var(--van-gary-2)` | - | | --van-number-keyboard-key-height | `48px` | - | | --van-number-keyboard-key-font-size | `28px` | - | -| --van-number-keyboard-key-active-color | `@gray-3` | - | -| --van-number-keyboard-delete-font-size | `@font-size-lg` | - | -| --van-number-keyboard-title-color | `@gray-7` | - | +| --van-number-keyboard-key-active-color | `var(--van-gary-3)` | - | +| --van-number-keyboard-delete-font-size | `var(--van-font-size-lg)` | - | +| --van-number-keyboard-title-color | `var(--van-gary-7)` | - | | --van-number-keyboard-title-height | `34px` | - | -| --van-number-keyboard-title-font-size | `@font-size-lg` | - | -| --van-number-keyboard-close-padding | `0 @padding-md` | - | -| --van-number-keyboard-close-color | `@text-link-color` | - | -| --van-number-keyboard-close-font-size | `@font-size-md` | - | -| --van-number-keyboard-button-text-color | `@white` | - | -| --van-number-keyboard-button-background-color | `@blue` | - | +| --van-number-keyboard-title-font-size | `var(--van-font-size-lg)` | - | +| --van-number-keyboard-close-padding | `0 var(--van-padding-md)` | - | +| --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-z-index | `100` | - | diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index 7c4e60837..2dab22626 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -215,22 +215,22 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --------------------------------------------- | ------------------ | ---- | -| --van-number-keyboard-background-color | `@gray-2` | - | -| --van-number-keyboard-key-height | `48px` | - | -| --van-number-keyboard-key-font-size | `28px` | - | -| --van-number-keyboard-key-active-color | `@gray-3` | - | -| --van-number-keyboard-delete-font-size | `@font-size-lg` | - | -| --van-number-keyboard-title-color | `@gray-7` | - | -| --van-number-keyboard-title-height | `34px` | - | -| --van-number-keyboard-title-font-size | `@font-size-lg` | - | -| --van-number-keyboard-close-padding | `0 @padding-md` | - | -| --van-number-keyboard-close-color | `@text-link-color` | - | -| --van-number-keyboard-close-font-size | `@font-size-md` | - | -| --van-number-keyboard-button-text-color | `@white` | - | -| --van-number-keyboard-button-background-color | `@blue` | - | -| --van-number-keyboard-z-index | `100` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-number-keyboard-background-color | `var(--van-gary-2)` | - | +| --van-number-keyboard-key-height | `48px` | - | +| --van-number-keyboard-key-font-size | `28px` | - | +| --van-number-keyboard-key-active-color | `var(--van-gary-3)` | - | +| --van-number-keyboard-delete-font-size | `var(--van-font-size-lg)` | - | +| --van-number-keyboard-title-color | `var(--van-gary-7)` | - | +| --van-number-keyboard-title-height | `34px` | - | +| --van-number-keyboard-title-font-size | `var(--van-font-size-lg)` | - | +| --van-number-keyboard-close-padding | `0 var(--van-padding-md)` | - | +| --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-z-index | `100` | - | ## 常见问题 diff --git a/src/pagination/README.md b/src/pagination/README.md index c4c54bcc6..949367767 100644 --- a/src/pagination/README.md +++ b/src/pagination/README.md @@ -103,11 +103,11 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-pagination-height | `40px` | - | -| --van-pagination-font-size | `@font-size-md` | - | +| --van-pagination-font-size | `var(--van-font-size-md)` | - | | --van-pagination-item-width | `36px` | - | -| --van-pagination-item-default-color | `@blue` | - | -| --van-pagination-item-disabled-color | `@gray-7` | - | -| --van-pagination-item-disabled-background-color | `@background-color` | - | -| --van-pagination-background-color | `@white` | - | -| --van-pagination-desc-color | `@gray-7` | - | -| --van-pagination-disabled-opacity | `@disabled-opacity` | - | +| --van-pagination-item-default-color | `var(--van-blue)` | - | +| --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)` | - | +| --van-pagination-desc-color | `var(--van-gary-7)` | - | +| --van-pagination-disabled-opacity | `var(--van-disabled-opacity)` | - | diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md index 34aa8ab50..aaf4c792d 100644 --- a/src/pagination/README.zh-CN.md +++ b/src/pagination/README.zh-CN.md @@ -108,14 +108,14 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ----------------------------------------------- | ------------------- | ---- | -| --van-pagination-height | `40px` | - | -| --van-pagination-font-size | `@font-size-md` | - | -| --van-pagination-item-width | `36px` | - | -| --van-pagination-item-default-color | `@blue` | - | -| --van-pagination-item-disabled-color | `@gray-7` | - | -| --van-pagination-item-disabled-background-color | `@background-color` | - | -| --van-pagination-background-color | `@white` | - | -| --van-pagination-desc-color | `@gray-7` | - | -| --van-pagination-disabled-opacity | `@disabled-opacity` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --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-disabled-color | `var(--van-gary-7)` | - | +| --van-pagination-item-disabled-background-color | `var(--van-background-color)` | - | +| --van-pagination-background-color | `var(--van-white)` | - | +| --van-pagination-desc-color | `var(--van-gary-7)` | - | +| --van-pagination-disabled-opacity | `var(--van-disabled-opacity)` | - | diff --git a/src/password-input/README.md b/src/password-input/README.md index 3531e3c45..2f55cf0dd 100644 --- a/src/password-input/README.md +++ b/src/password-input/README.md @@ -155,16 +155,16 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-password-input-height | `50px` | - | -| --van-password-input-margin | `0 @padding-md` | - | +| --van-password-input-margin | `0 var(--van-padding-md)` | - | | --van-password-input-font-size | `20px` | - | | --van-password-input-border-radius | `6px` | - | -| --van-password-input-background-color | `@white` | - | -| --van-password-input-info-color | `@gray-6` | - | -| --van-password-input-info-font-size | `@font-size-md` | - | -| --van-password-input-error-info-color | `@red` | - | +| --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-dot-size | `10px` | - | -| --van-password-input-dot-color | `@black` | - | -| --van-password-input-cursor-color | `@text-color` | - | +| --van-password-input-dot-color | `var(--van-black)` | - | +| --van-password-input-cursor-color | `var(--van-text-color)` | - | | --van-password-input-cursor-width | `1px` | - | | --van-password-input-cursor-height | `40%` | - | | --van-password-input-cursor-animation-duration | `1s` | - | diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md index b7fff020c..9c566a965 100644 --- a/src/password-input/README.zh-CN.md +++ b/src/password-input/README.zh-CN.md @@ -162,19 +162,19 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ---------------------------------------------- | --------------- | ---- | -| --van-password-input-height | `50px` | - | -| --van-password-input-margin | `0 @padding-md` | - | -| --van-password-input-font-size | `20px` | - | -| --van-password-input-border-radius | `6px` | - | -| --van-password-input-background-color | `@white` | - | -| --van-password-input-info-color | `@gray-6` | - | -| --van-password-input-info-font-size | `@font-size-md` | - | -| --van-password-input-error-info-color | `@red` | - | -| --van-password-input-dot-size | `10px` | - | -| --van-password-input-dot-color | `@black` | - | -| --van-password-input-cursor-color | `@text-color` | - | -| --van-password-input-cursor-width | `1px` | - | -| --van-password-input-cursor-height | `40%` | - | -| --van-password-input-cursor-animation-duration | `1s` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-password-input-height | `50px` | - | +| --van-password-input-margin | `0 var(--van-padding-md)` | - | +| --van-password-input-font-size | `20px` | - | +| --van-password-input-border-radius | `6px` | - | +| --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-dot-size | `10px` | - | +| --van-password-input-dot-color | `var(--van-black)` | - | +| --van-password-input-cursor-color | `var(--van-text-color)` | - | +| --van-password-input-cursor-width | `1px` | - | +| --van-password-input-cursor-height | `40%` | - | +| --van-password-input-cursor-animation-duration | `1s` | - | diff --git a/src/picker/README.md b/src/picker/README.md index 48b69b73f..1d7934620 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -389,16 +389,16 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-picker-background-color | `@white` | - | +| --van-picker-background-color | `var(--van-white)` | - | | --van-picker-toolbar-height | `44px` | - | -| --van-picker-title-font-size | `@font-size-lg` | - | -| --van-picker-title-line-height | `@line-height-md` | - | -| --van-picker-action-padding | `0 @padding-md` | - | -| --van-picker-action-font-size | `@font-size-md` | - | -| --van-picker-confirm-action-color | `@text-link-color` | - | -| --van-picker-cancel-action-color | `@gray-6` | - | -| --van-picker-option-font-size | `@font-size-lg` | - | -| --van-picker-option-text-color | `@black` | - | +| --van-picker-title-font-size | `var(--van-font-size-lg)` | - | +| --van-picker-title-line-height | `var(--van-line-height-md)` | - | +| --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-gary-6)` | - | +| --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 | `@blue` | - | +| --van-picker-loading-icon-color | `var(--van-blue)` | - | | --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 cab7001ab..511efe782 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -412,21 +412,21 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------ | -------------------------- | ---- | -| --van-picker-background-color | `@white` | - | -| --van-picker-toolbar-height | `44px` | - | -| --van-picker-title-font-size | `@font-size-lg` | - | -| --van-picker-title-line-height | `@line-height-md` | - | -| --van-picker-action-padding | `0 @padding-md` | - | -| --van-picker-action-font-size | `@font-size-md` | - | -| --van-picker-confirm-action-color | `@text-link-color` | - | -| --van-picker-cancel-action-color | `@gray-6` | - | -| --van-picker-option-font-size | `@font-size-lg` | - | -| --van-picker-option-text-color | `@black` | - | -| --van-picker-option-disabled-opacity | `0.3` | - | -| --van-picker-loading-icon-color | `@blue` | - | -| --van-picker-loading-mask-color | `rgba(255, 255, 255, 0.9)` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------ | ---------------------------- | ---- | +| --van-picker-background-color | `var(--van-white)` | - | +| --van-picker-toolbar-height | `44px` | - | +| --van-picker-title-font-size | `var(--van-font-size-lg)` | - | +| --van-picker-title-line-height | `var(--van-line-height-md)` | - | +| --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-gary-6)` | - | +| --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-mask-color | `rgba(255, 255, 255, 0.9)` | - | ## 常见问题 diff --git a/src/popover/README.md b/src/popover/README.md index 4911e281a..0a3af41af 100644 --- a/src/popover/README.md +++ b/src/popover/README.md @@ -261,15 +261,15 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-popover-arrow-size | `6px` | - | -| --van-popover-border-radius | `@border-radius-lg` | - | +| --van-popover-border-radius | `var(--van-border-radius-lg)` | - | | --van-popover-action-width | `128px` | - | | --van-popover-action-height | `44px` | - | -| --van-popover-action-font-size | `@font-size-md` | - | -| --van-popover-action-line-height | `@line-height-md` | - | +| --van-popover-action-font-size | `var(--van-font-size-md)` | - | +| --van-popover-action-line-height | `var(--van-line-height-md)` | - | | --van-popover-action-icon-size | `20px` | - | -| --van-popover-light-text-color | `@text-color` | - | -| --van-popover-light-background-color | `@white` | - | -| --van-popover-light-action-disabled-text-color | `@gray-5` | - | -| --van-popover-dark-text-color | `@white` | - | +| --van-popover-light-text-color | `var(--van-text-color)` | - | +| --van-popover-light-background-color | `var(--van-white)` | - | +| --van-popover-light-action-disabled-text-color | `var(--van-gary-5)` | - | +| --van-popover-dark-text-color | `var(--van-white)` | - | | --van-popover-dark-background-color | `#4a4a4a` | - | -| --van-popover-dark-action-disabled-text-color | `@gray-6` | - | +| --van-popover-dark-action-disabled-text-color | `var(--van-gary-6)` | - | diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md index ec3ddf807..14b9d74fc 100644 --- a/src/popover/README.zh-CN.md +++ b/src/popover/README.zh-CN.md @@ -270,21 +270,21 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ---------------------------------------------- | ------------------- | ---- | -| --van-popover-arrow-size | `6px` | - | -| --van-popover-border-radius | `@border-radius-lg` | - | -| --van-popover-action-width | `128px` | - | -| --van-popover-action-height | `44px` | - | -| --van-popover-action-font-size | `@font-size-md` | - | -| --van-popover-action-line-height | `@line-height-md` | - | -| --van-popover-action-icon-size | `20px` | - | -| --van-popover-light-text-color | `@text-color` | - | -| --van-popover-light-background-color | `@white` | - | -| --van-popover-light-action-disabled-text-color | `@gray-5` | - | -| --van-popover-dark-text-color | `@white` | - | -| --van-popover-dark-background-color | `#4a4a4a` | - | -| --van-popover-dark-action-disabled-text-color | `@gray-6` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-popover-arrow-size | `6px` | - | +| --van-popover-border-radius | `var(--van-border-radius-lg)` | - | +| --van-popover-action-width | `128px` | - | +| --van-popover-action-height | `44px` | - | +| --van-popover-action-font-size | `var(--van-font-size-md)` | - | +| --van-popover-action-line-height | `var(--van-line-height-md)` | - | +| --van-popover-action-icon-size | `20px` | - | +| --van-popover-light-text-color | `var(--van-text-color)` | - | +| --van-popover-light-background-color | `var(--van-white)` | - | +| --van-popover-light-action-disabled-text-color | `var(--van-gary-5)` | - | +| --van-popover-dark-text-color | `var(--van-white)` | - | +| --van-popover-dark-background-color | `#4a4a4a` | - | +| --van-popover-dark-action-disabled-text-color | `var(--van-gary-6)` | - | ## 常见问题 diff --git a/src/popup/README.md b/src/popup/README.md index dc24ac5c8..c187b1d5d 100644 --- a/src/popup/README.md +++ b/src/popup/README.md @@ -167,11 +167,11 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-popup-background-color | `@white` | - | -| --van-popup-transition | `transform @animation-duration-base` | - | +| --van-popup-background-color | `var(--van-white)` | - | +| --van-popup-transition | `transform var(--van-animation-duration-base)` | - | | --van-popup-round-border-radius | `16px` | - | | --van-popup-close-icon-size | `22px` | - | -| --van-popup-close-icon-color | `@gray-5` | - | -| --van-popup-close-icon-active-color | `@gray-6` | - | +| --van-popup-close-icon-color | `var(--van-gary-5)` | - | +| --van-popup-close-icon-active-color | `var(--van-gary-6)` | - | | --van-popup-close-icon-margin | `16px` | - | | --van-popup-close-icon-z-index | `1` | - | diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index 72356a86a..62dec41a9 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -171,11 +171,11 @@ export default { | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-popup-background-color | `@white` | - | -| --van-popup-transition | `transform @animation-duration-base` | - | +| --van-popup-background-color | `var(--van-white)` | - | +| --van-popup-transition | `transform var(--van-animation-duration-base)` | - | | --van-popup-round-border-radius | `16px` | - | | --van-popup-close-icon-size | `22px` | - | -| --van-popup-close-icon-color | `@gray-5` | - | -| --van-popup-close-icon-active-color | `@gray-6` | - | +| --van-popup-close-icon-color | `var(--van-gary-5)` | - | +| --van-popup-close-icon-active-color | `var(--van-gary-6)` | - | | --van-popup-close-icon-margin | `16px` | - | | --van-popup-close-icon-z-index | `1` | - | diff --git a/src/progress/README.md b/src/progress/README.md index 6a6daa090..6e3f0d1b5 100644 --- a/src/progress/README.md +++ b/src/progress/README.md @@ -81,13 +81,13 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Progress instance and call insta 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-progress-height | `4px` | - | -| --van-progress-color | `@blue` | - | -| --van-progress-background-color | `@gray-3` | - | -| --van-progress-pivot-padding | `0 5px` | - | -| --van-progress-pivot-text-color | `@white` | - | -| --van-progress-pivot-font-size | `@font-size-xs` | - | -| --van-progress-pivot-line-height | `1.6` | - | -| --van-progress-pivot-background-color | `@blue` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --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)` | - | diff --git a/src/progress/README.zh-CN.md b/src/progress/README.zh-CN.md index c8f05881d..b3ddac800 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 | `@blue` | - | -| --van-progress-background-color | `@gray-3` | - | -| --van-progress-pivot-padding | `0 5px` | - | -| --van-progress-pivot-text-color | `@white` | - | -| --van-progress-pivot-font-size | `@font-size-xs` | - | -| --van-progress-pivot-line-height | `1.6` | - | -| --van-progress-pivot-background-color | `@blue` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------- | ------------------------- | ---- | +| --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)` | - | ## 常见问题 diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md index d20d607b9..5c4334649 100644 --- a/src/pull-refresh/README.md +++ b/src/pull-refresh/README.md @@ -140,9 +140,9 @@ Use slots to custom tips. 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-pull-refresh-head-height | `50px` | - | -| --van-pull-refresh-head-font-size | `@font-size-md` | - | -| --van-pull-refresh-head-text-color | `@gray-6` | - | -| --van-pull-refresh-loading-icon-size | `16px` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --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-gary-6)` | - | +| --van-pull-refresh-loading-icon-size | `16px` | - | diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md index 9351f23fb..80d4fc805 100644 --- a/src/pull-refresh/README.zh-CN.md +++ b/src/pull-refresh/README.zh-CN.md @@ -143,12 +143,12 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------ | --------------- | ---- | -| --van-pull-refresh-head-height | `50px` | - | -| --van-pull-refresh-head-font-size | `@font-size-md` | - | -| --van-pull-refresh-head-text-color | `@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-gary-6)` | - | +| --van-pull-refresh-loading-icon-size | `16px` | - | ## 常见问题 diff --git a/src/radio/README.md b/src/radio/README.md index 72bbb027a..dc4268059 100644 --- a/src/radio/README.md +++ b/src/radio/README.md @@ -206,11 +206,11 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-radio-size | `20px` | - | -| --van-radio-border-color | `@gray-5` | - | -| --van-radio-transition-duration | `@animation-duration-fast` | - | -| --van-radio-label-margin | `@padding-xs` | - | -| --van-radio-label-color | `@text-color` | - | -| --van-radio-checked-icon-color | `@blue` | - | -| --van-radio-disabled-icon-color | `@gray-5` | - | -| --van-radio-disabled-label-color | `@gray-5` | - | -| --van-radio-disabled-background-color | `@border-color` | - | +| --van-radio-border-color | `var(--van-gary-5)` | - | +| --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-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 1a74beb82..d5528f546 100644 --- a/src/radio/README.zh-CN.md +++ b/src/radio/README.zh-CN.md @@ -217,14 +217,14 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------- | -------------------------- | ---- | -| --van-radio-size | `20px` | - | -| --van-radio-border-color | `@gray-5` | - | -| --van-radio-transition-duration | `@animation-duration-fast` | - | -| --van-radio-label-margin | `@padding-xs` | - | -| --van-radio-label-color | `@text-color` | - | -| --van-radio-checked-icon-color | `@blue` | - | -| --van-radio-disabled-icon-color | `@gray-5` | - | -| --van-radio-disabled-label-color | `@gray-5` | - | -| --van-radio-disabled-background-color | `@border-color` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-radio-size | `20px` | - | +| --van-radio-border-color | `var(--van-gary-5)` | - | +| --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-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/rate/README.md b/src/rate/README.md index 8d36e2020..e326fc37e 100644 --- a/src/rate/README.md +++ b/src/rate/README.md @@ -158,10 +158,10 @@ 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-rate-icon-size | `20px` | - | -| --van-rate-icon-gutter | `@padding-base` | - | -| --van-rate-icon-void-color | `@gray-5` | - | -| --van-rate-icon-full-color | `@red` | - | -| --van-rate-icon-disabled-color | `@gray-5` | - | +| Name | Default Value | Description | +| ------------------------------ | ------------------------- | ----------- | +| --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-disabled-color | `var(--van-gary-5)` | - | diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md index f8202acf2..362e5e110 100644 --- a/src/rate/README.zh-CN.md +++ b/src/rate/README.zh-CN.md @@ -176,10 +176,10 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------ | --------------- | ---- | -| --van-rate-icon-size | `20px` | - | -| --van-rate-icon-gutter | `@padding-base` | - | -| --van-rate-icon-void-color | `@gray-5` | - | -| --van-rate-icon-full-color | `@red` | - | -| --van-rate-icon-disabled-color | `@gray-5` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------ | ------------------------- | ---- | +| --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-disabled-color | `var(--van-gary-5)` | - | diff --git a/src/search/README.md b/src/search/README.md index 1d99dd227..00ceed04e 100644 --- a/src/search/README.md +++ b/src/search/README.md @@ -173,16 +173,16 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Search 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-search-padding | `10px @padding-sm` | - | -| --van-search-background-color | `@white` | - | -| --van-search-content-background-color | `@gray-1` | - | -| --van-search-input-height | `34px` | - | -| --van-search-label-padding | `0 5px` | - | -| --van-search-label-color | `@text-color` | - | -| --van-search-label-font-size | `@font-size-md` | - | -| --van-search-left-icon-color | `@gray-6` | - | -| --van-search-action-padding | `0 @padding-xs` | - | -| --van-search-action-text-color | `@text-color` | - | -| --van-search-action-font-size | `@font-size-md` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-search-padding | `10px var(--van-padding-sm)` | - | +| --van-search-background-color | `var(--van-white)` | - | +| --van-search-content-background-color | `var(--van-gary-1)` | - | +| --van-search-input-height | `34px` | - | +| --van-search-label-padding | `0 5px` | - | +| --van-search-label-color | `var(--van-text-color)` | - | +| --van-search-label-font-size | `var(--van-font-size-md)` | - | +| --van-search-left-icon-color | `var(--van-gary-6)` | - | +| --van-search-action-padding | `0 var(--van-padding-xs)` | - | +| --van-search-action-text-color | `var(--van-text-color)` | - | +| --van-search-action-font-size | `var(--van-font-size-md)` | - | diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md index ca965f3ff..a2b08cede 100644 --- a/src/search/README.zh-CN.md +++ b/src/search/README.zh-CN.md @@ -185,19 +185,19 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------- | ------------------ | ---- | -| --van-search-padding | `10px @padding-sm` | - | -| --van-search-background-color | `@white` | - | -| --van-search-content-background-color | `@gray-1` | - | -| --van-search-input-height | `34px` | - | -| --van-search-label-padding | `0 5px` | - | -| --van-search-label-color | `@text-color` | - | -| --van-search-label-font-size | `@font-size-md` | - | -| --van-search-left-icon-color | `@gray-6` | - | -| --van-search-action-padding | `0 @padding-xs` | - | -| --van-search-action-text-color | `@text-color` | - | -| --van-search-action-font-size | `@font-size-md` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------- | ---------------------------- | ---- | +| --van-search-padding | `10px var(--van-padding-sm)` | - | +| --van-search-background-color | `var(--van-white)` | - | +| --van-search-content-background-color | `var(--van-gary-1)` | - | +| --van-search-input-height | `34px` | - | +| --van-search-label-padding | `0 5px` | - | +| --van-search-label-color | `var(--van-text-color)` | - | +| --van-search-label-font-size | `var(--van-font-size-md)` | - | +| --van-search-left-icon-color | `var(--van-gary-6)` | - | +| --van-search-action-padding | `0 var(--van-padding-xs)` | - | +| --van-search-action-text-color | `var(--van-text-color)` | - | +| --van-search-action-font-size | `var(--van-font-size-md)` | - | ## 常见问题 diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md index abfed6159..a76c490f2 100644 --- a/src/share-sheet/README.md +++ b/src/share-sheet/README.md @@ -219,18 +219,18 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-share-sheet-header-padding | `@padding-sm @padding-md @padding-base` | - | -| --van-share-sheet-title-color | `@text-color` | - | -| --van-share-sheet-title-font-size | `@font-size-md` | - | -| --van-share-sheet-title-line-height | `@line-height-md` | - | -| --van-share-sheet-description-color | `@gray-6` | - | -| --van-share-sheet-description-font-size | `@font-size-sm` | - | +| --van-share-sheet-header-padding | `var(--van-padding-sm) var(--van-padding-md) var(--van-padding-base)` | - | +| --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-gary-6)` | - | +| --van-share-sheet-description-font-size | `var(--van-font-size-sm)` | - | | --van-share-sheet-description-line-height | `16px` | - | | --van-share-sheet-icon-size | `48px` | - | -| --van-share-sheet-option-name-color | `@gray-7` | - | -| --van-share-sheet-option-name-font-size | `@font-size-sm` | - | -| --van-share-sheet-option-description-color | `@gray-5` | - | -| --van-share-sheet-option-description-font-size | `@font-size-sm` | - | -| --van-share-sheet-cancel-button-font-size | `@font-size-lg` | - | +| --van-share-sheet-option-name-color | `var(--van-gary-7)` | - | +| --van-share-sheet-option-name-font-size | `var(--van-font-size-sm)` | - | +| --van-share-sheet-option-description-color | `var(--van-gary-5)` | - | +| --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` | - | -| --van-share-sheet-cancel-button-background | `@white` | - | +| --van-share-sheet-cancel-button-background | `var(--van-white)` | - | diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md index 3f4eb6114..d7273f846 100644 --- a/src/share-sheet/README.zh-CN.md +++ b/src/share-sheet/README.zh-CN.md @@ -233,21 +233,21 @@ export default { | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-share-sheet-header-padding | `@padding-sm @padding-md @padding-base` | - | -| --van-share-sheet-title-color | `@text-color` | - | -| --van-share-sheet-title-font-size | `@font-size-md` | - | -| --van-share-sheet-title-line-height | `@line-height-md` | - | -| --van-share-sheet-description-color | `@gray-6` | - | -| --van-share-sheet-description-font-size | `@font-size-sm` | - | +| --van-share-sheet-header-padding | `var(--van-padding-sm) var(--van-padding-md) var(--van-padding-base)` | - | +| --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-gary-6)` | - | +| --van-share-sheet-description-font-size | `var(--van-font-size-sm)` | - | | --van-share-sheet-description-line-height | `16px` | - | | --van-share-sheet-icon-size | `48px` | - | -| --van-share-sheet-option-name-color | `@gray-7` | - | -| --van-share-sheet-option-name-font-size | `@font-size-sm` | - | -| --van-share-sheet-option-description-color | `@gray-5` | - | -| --van-share-sheet-option-description-font-size | `@font-size-sm` | - | -| --van-share-sheet-cancel-button-font-size | `@font-size-lg` | - | +| --van-share-sheet-option-name-color | `var(--van-gary-7)` | - | +| --van-share-sheet-option-name-font-size | `var(--van-font-size-sm)` | - | +| --van-share-sheet-option-description-color | `var(--van-gary-5)` | - | +| --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` | - | -| --van-share-sheet-cancel-button-background | `@white` | - | +| --van-share-sheet-cancel-button-background | `var(--van-white)` | - | ## 常见问题 diff --git a/src/sidebar/README.md b/src/sidebar/README.md index 40d3e6a09..f91476d06 100644 --- a/src/sidebar/README.md +++ b/src/sidebar/README.md @@ -128,19 +128,19 @@ 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-sidebar-width | `80px` | - | -| --van-sidebar-font-size | `@font-size-md` | - | -| --van-sidebar-line-height | `@line-height-md` | - | -| --van-sidebar-text-color | `@text-color` | - | -| --van-sidebar-disabled-text-color | `@gray-5` | - | -| --van-sidebar-padding | `20px @padding-sm` | - | -| --van-sidebar-active-color | `@active-color` | - | -| --van-sidebar-background-color | `@background-color` | - | -| --van-sidebar-selected-font-weight | `@font-weight-bold` | - | -| --van-sidebar-selected-text-color | `@text-color` | - | -| --van-sidebar-selected-border-width | `4px` | - | -| --van-sidebar-selected-border-height | `16px` | - | -| --van-sidebar-selected-border-color | `@red` | - | -| --van-sidebar-selected-background-color | `@white` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-sidebar-width | `80px` | - | +| --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-gary-5)` | - | +| --van-sidebar-padding | `20px var(--van-padding-sm)` | - | +| --van-sidebar-active-color | `var(--van-active-color)` | - | +| --van-sidebar-background-color | `var(--van-background-color)` | - | +| --van-sidebar-selected-font-weight | `var(--van-font-weight-bold)` | - | +| --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-background-color | `var(--van-white)` | - | diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md index 7f1470aa0..c5e37e76a 100644 --- a/src/sidebar/README.zh-CN.md +++ b/src/sidebar/README.zh-CN.md @@ -136,19 +136,19 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --------------------------------------- | ------------------- | ---- | -| --van-sidebar-width | `80px` | - | -| --van-sidebar-font-size | `@font-size-md` | - | -| --van-sidebar-line-height | `@line-height-md` | - | -| --van-sidebar-text-color | `@text-color` | - | -| --van-sidebar-disabled-text-color | `@gray-5` | - | -| --van-sidebar-padding | `20px @padding-sm` | - | -| --van-sidebar-active-color | `@active-color` | - | -| --van-sidebar-background-color | `@background-color` | - | -| --van-sidebar-selected-font-weight | `@font-weight-bold` | - | -| --van-sidebar-selected-text-color | `@text-color` | - | -| --van-sidebar-selected-border-width | `4px` | - | -| --van-sidebar-selected-border-height | `16px` | - | -| --van-sidebar-selected-border-color | `@red` | - | -| --van-sidebar-selected-background-color | `@white` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-sidebar-width | `80px` | - | +| --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-gary-5)` | - | +| --van-sidebar-padding | `20px var(--van-padding-sm)` | - | +| --van-sidebar-active-color | `var(--van-active-color)` | - | +| --van-sidebar-background-color | `var(--van-background-color)` | - | +| --van-sidebar-selected-font-weight | `var(--van-font-weight-bold)` | - | +| --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-background-color | `var(--van-white)` | - | diff --git a/src/skeleton/README.md b/src/skeleton/README.md index 80618d593..d6bdb0d7c 100644 --- a/src/skeleton/README.md +++ b/src/skeleton/README.md @@ -77,12 +77,12 @@ 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-skeleton-row-height | `16px` | - | -| --van-skeleton-row-background-color | `@active-color` | - | -| --van-skeleton-row-margin-top | `@padding-sm` | - | -| --van-skeleton-title-width | `40%` | - | -| --van-skeleton-avatar-size | `32px` | - | -| --van-skeleton-avatar-background-color | `@active-color` | - | -| --van-skeleton-animation-duration | `1.2s` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-skeleton-row-height | `16px` | - | +| --van-skeleton-row-background-color | `var(--van-active-color)` | - | +| --van-skeleton-row-margin-top | `var(--van-padding-sm)` | - | +| --van-skeleton-title-width | `40%` | - | +| --van-skeleton-avatar-size | `32px` | - | +| --van-skeleton-avatar-background-color | `var(--van-active-color)` | - | +| --van-skeleton-animation-duration | `1.2s` | - | diff --git a/src/skeleton/README.zh-CN.md b/src/skeleton/README.zh-CN.md index d27af0ca7..3e28eb286 100644 --- a/src/skeleton/README.zh-CN.md +++ b/src/skeleton/README.zh-CN.md @@ -83,12 +83,12 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| -------------------------------------- | --------------- | ---- | -| --van-skeleton-row-height | `16px` | - | -| --van-skeleton-row-background-color | `@active-color` | - | -| --van-skeleton-row-margin-top | `@padding-sm` | - | -| --van-skeleton-title-width | `40%` | - | -| --van-skeleton-avatar-size | `32px` | - | -| --van-skeleton-avatar-background-color | `@active-color` | - | -| --van-skeleton-animation-duration | `1.2s` | - | +| 名称 | 默认值 | 描述 | +| -------------------------------------- | ------------------------- | ---- | +| --van-skeleton-row-height | `16px` | - | +| --van-skeleton-row-background-color | `var(--van-active-color)` | - | +| --van-skeleton-row-margin-top | `var(--van-padding-sm)` | - | +| --van-skeleton-title-width | `40%` | - | +| --van-skeleton-avatar-size | `32px` | - | +| --van-skeleton-avatar-background-color | `var(--van-active-color)` | - | +| --van-skeleton-animation-duration | `1.2s` | - | diff --git a/src/slider/README.md b/src/slider/README.md index 631bf9dc3..0e7575911 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -184,12 +184,12 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-slider-active-background-color | `@blue` | - | -| --van-slider-inactive-background-color | `@gray-3` | - | -| --van-slider-disabled-opacity | `@disabled-opacity` | - | +| --van-slider-active-background-color | `var(--van-blue)` | - | +| --van-slider-inactive-background-color | `var(--van-gary-3)` | - | +| --van-slider-disabled-opacity | `var(--van-disabled-opacity)` | - | | --van-slider-bar-height | `2px` | - | | --van-slider-button-width | `24px` | - | | --van-slider-button-height | `24px` | - | | --van-slider-button-border-radius | `50%` | - | -| --van-slider-button-background-color | `@white` | - | +| --van-slider-button-background-color | `var(--van-white)` | - | | --van-slider-button-box-shadow | `0 1px 2px rgba(0, 0, 0, 0.5)` | - | diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md index ec427995f..d25d756e9 100644 --- a/src/slider/README.zh-CN.md +++ b/src/slider/README.zh-CN.md @@ -186,12 +186,12 @@ export default { | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-slider-active-background-color | `@blue` | - | -| --van-slider-inactive-background-color | `@gray-3` | - | -| --van-slider-disabled-opacity | `@disabled-opacity` | - | +| --van-slider-active-background-color | `var(--van-blue)` | - | +| --van-slider-inactive-background-color | `var(--van-gary-3)` | - | +| --van-slider-disabled-opacity | `var(--van-disabled-opacity)` | - | | --van-slider-bar-height | `2px` | - | | --van-slider-button-width | `24px` | - | | --van-slider-button-height | `24px` | - | | --van-slider-button-border-radius | `50%` | - | -| --van-slider-button-background-color | `@white` | - | +| --van-slider-button-background-color | `var(--van-white)` | - | | --van-slider-button-box-shadow | `0 1px 2px rgba(0, 0, 0, 0.5)` | - | diff --git a/src/stepper/README.md b/src/stepper/README.md index 6dc6f618b..7ab8bda18 100644 --- a/src/stepper/README.md +++ b/src/stepper/README.md @@ -164,16 +164,16 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-stepper-active-color | `#e8e8e8` | - | -| --van-stepper-background-color | `@active-color` | - | -| --van-stepper-button-icon-color | `@text-color` | - | -| --van-stepper-button-disabled-color | `@background-color` | - | -| --van-stepper-button-disabled-icon-color | `@gray-5` | - | -| --van-stepper-button-round-theme-color | `@red` | - | +| --van-stepper-background-color | `var(--van-active-color)` | - | +| --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-input-width | `32px` | - | | --van-stepper-input-height | `28px` | - | -| --van-stepper-input-font-size | `@font-size-md` | - | +| --van-stepper-input-font-size | `var(--van-font-size-md)` | - | | --van-stepper-input-line-height | `normal` | - | -| --van-stepper-input-text-color | `@text-color` | - | -| --van-stepper-input-disabled-text-color | `@gray-5` | - | -| --van-stepper-input-disabled-background-color | `@active-color` | - | -| --van-stepper-border-radius | `@border-radius-md` | - | +| --van-stepper-input-text-color | `var(--van-text-color)` | - | +| --van-stepper-input-disabled-text-color | `var(--van-gary-5)` | - | +| --van-stepper-input-disabled-background-color | `var(--van-active-color)` | - | +| --van-stepper-border-radius | `var(--van-border-radius-md)` | - | diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md index 53596f1c3..dd4f455b5 100644 --- a/src/stepper/README.zh-CN.md +++ b/src/stepper/README.zh-CN.md @@ -181,22 +181,22 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --------------------------------------------- | ------------------- | ---- | -| --van-stepper-active-color | `#e8e8e8` | - | -| --van-stepper-background-color | `@active-color` | - | -| --van-stepper-button-icon-color | `@text-color` | - | -| --van-stepper-button-disabled-color | `@background-color` | - | -| --van-stepper-button-disabled-icon-color | `@gray-5` | - | -| --van-stepper-button-round-theme-color | `@red` | - | -| --van-stepper-input-width | `32px` | - | -| --van-stepper-input-height | `28px` | - | -| --van-stepper-input-font-size | `@font-size-md` | - | -| --van-stepper-input-line-height | `normal` | - | -| --van-stepper-input-text-color | `@text-color` | - | -| --van-stepper-input-disabled-text-color | `@gray-5` | - | -| --van-stepper-input-disabled-background-color | `@active-color` | - | -| --van-stepper-border-radius | `@border-radius-md` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-stepper-active-color | `#e8e8e8` | - | +| --van-stepper-background-color | `var(--van-active-color)` | - | +| --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-input-width | `32px` | - | +| --van-stepper-input-height | `28px` | - | +| --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-gary-5)` | - | +| --van-stepper-input-disabled-background-color | `var(--van-active-color)` | - | +| --van-stepper-border-radius | `var(--van-border-radius-md)` | - | ## 常见问题 diff --git a/src/steps/README.md b/src/steps/README.md index b0feac4df..0baf09967 100644 --- a/src/steps/README.md +++ b/src/steps/README.md @@ -104,17 +104,17 @@ 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-step-text-color | `@gray-6` | - | -| --van-step-active-color | `@green` | - | -| --van-step-process-text-color | `@text-color` | - | -| --van-step-font-size | `@font-size-md` | - | -| --van-step-line-color | `@border-color` | - | -| --van-step-finish-line-color | `@green` | - | -| --van-step-finish-text-color | `@text-color` | - | -| --van-step-icon-size | `12px` | - | -| --van-step-circle-size | `5px` | - | -| --van-step-circle-color | `@gray-6` | - | -| --van-step-horizontal-title-font-size | `@font-size-sm` | - | -| --van-steps-background-color | `@white` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --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)` | - | diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md index 0ba4a9869..0a995c0e8 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 | `@gray-6` | - | -| --van-step-active-color | `@green` | - | -| --van-step-process-text-color | `@text-color` | - | -| --van-step-font-size | `@font-size-md` | - | -| --van-step-line-color | `@border-color` | - | -| --van-step-finish-line-color | `@green` | - | -| --van-step-finish-text-color | `@text-color` | - | -| --van-step-icon-size | `12px` | - | -| --van-step-circle-size | `5px` | - | -| --van-step-circle-color | `@gray-6` | - | -| --van-step-horizontal-title-font-size | `@font-size-sm` | - | -| --van-steps-background-color | `@white` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------- | ------------------------- | ---- | +| --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)` | - | diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md index 659219cae..be7ade9b8 100644 --- a/src/submit-bar/README.md +++ b/src/submit-bar/README.md @@ -130,19 +130,19 @@ The component provides the following CSS variables, which can be used to customi | --- | --- | --- | | --van-submit-bar-height | `50px` | - | | --van-submit-bar-z-index | `100` | - | -| --van-submit-bar-background-color | `@white` | - | +| --van-submit-bar-background-color | `var(--van-white)` | - | | --van-submit-bar-button-width | `110px` | - | -| --van-submit-bar-price-color | `@red` | - | -| --van-submit-bar-text-color | `@text-color` | - | -| --van-submit-bar-text-font-size | `@font-size-md` | - | -| --van-submit-bar-tip-padding | `@padding-xs @padding-sm` | - | -| --van-submit-bar-tip-font-size | `@font-size-sm` | - | +| --van-submit-bar-price-color | `var(--van-red)` | - | +| --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)` | - | +| --van-submit-bar-tip-font-size | `var(--van-font-size-sm)` | - | | --van-submit-bar-tip-line-height | `1.5` | - | | --van-submit-bar-tip-color | `#f56723` | - | | --van-submit-bar-tip-background-color | `#fff7cc` | - | | --van-submit-bar-tip-icon-size | `12px` | - | | --van-submit-bar-button-height | `40px` | - | -| --van-submit-bar-padding | `0 @padding-md` | - | -| --van-submit-bar-price-font-size | `@font-size-sm` | - | +| --van-submit-bar-padding | `0 var(--van-padding-md)` | - | +| --van-submit-bar-price-font-size | `var(--van-font-size-sm)` | - | | --van-submit-bar-price-integer-font-size | `20px` | - | -| --van-submit-bar-price-font-family | `@price-integer-font-family` | - | +| --van-submit-bar-price-font-family | `var(--van-price-integer-font-family)` | - | diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md index 939222aa4..581d564bc 100644 --- a/src/submit-bar/README.zh-CN.md +++ b/src/submit-bar/README.zh-CN.md @@ -137,19 +137,19 @@ export default { | --- | --- | --- | | --van-submit-bar-height | `50px` | - | | --van-submit-bar-z-index | `100` | - | -| --van-submit-bar-background-color | `@white` | - | +| --van-submit-bar-background-color | `var(--van-white)` | - | | --van-submit-bar-button-width | `110px` | - | -| --van-submit-bar-price-color | `@red` | - | -| --van-submit-bar-text-color | `@text-color` | - | -| --van-submit-bar-text-font-size | `@font-size-md` | - | -| --van-submit-bar-tip-padding | `@padding-xs @padding-sm` | - | -| --van-submit-bar-tip-font-size | `@font-size-sm` | - | +| --van-submit-bar-price-color | `var(--van-red)` | - | +| --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)` | - | +| --van-submit-bar-tip-font-size | `var(--van-font-size-sm)` | - | | --van-submit-bar-tip-line-height | `1.5` | - | | --van-submit-bar-tip-color | `#f56723` | - | | --van-submit-bar-tip-background-color | `#fff7cc` | - | | --van-submit-bar-tip-icon-size | `12px` | - | | --van-submit-bar-button-height | `40px` | - | -| --van-submit-bar-padding | `0 @padding-md` | - | -| --van-submit-bar-price-font-size | `@font-size-sm` | - | +| --van-submit-bar-padding | `0 var(--van-padding-md)` | - | +| --van-submit-bar-price-font-size | `var(--van-font-size-sm)` | - | | --van-submit-bar-price-integer-font-size | `20px` | - | -| --van-submit-bar-price-font-family | `@price-integer-font-family` | - | +| --van-submit-bar-price-font-family | `var(--van-price-integer-font-family)` | - | diff --git a/src/swipe-cell/README.md b/src/swipe-cell/README.md index 6a8307343..6286a42ea 100644 --- a/src/swipe-cell/README.md +++ b/src/swipe-cell/README.md @@ -132,10 +132,10 @@ export default { ### beforeClose Params -| Attribute | Description | Type | -| --------- | ------------- | ------------------------------------------ | -| name | Name | _string \| number_ | -| position | Click positon | _'left' \| 'right' \| 'cell' \| 'outside'_ | +| Attribute | Description | Type | +| --------- | -------------- | ------------------------------------------ | +| name | Name | _string \| number_ | +| position | Click position | _'left' \| 'right' \| 'cell' \| 'outside'_ | ### Methods @@ -152,7 +152,7 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-switch-cell-padding-top | `@cell-vertical-padding - 1px` | - | -| --van-switch-cell-padding-bottom | `@cell-vertical-padding - 1px` | - | -| --van-switch-cell-large-padding-top | `@cell-large-vertical-padding - 1px` | - | -| --van-switch-cell-large-padding-bottom | `@cell-large-vertical-padding - 1px` | - | +| --van-switch-cell-padding-top | `var(--van-cell-vertical-padding) - 1px` | - | +| --van-switch-cell-padding-bottom | `var(--van-cell-vertical-padding) - 1px` | - | +| --van-switch-cell-large-padding-top | `var(--van-cell-large-vertical-padding) - 1px` | - | +| --van-switch-cell-large-padding-bottom | `var(--van-cell-large-vertical-padding) - 1px` | - | diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md index c388a452b..cbbb4a5fa 100644 --- a/src/swipe-cell/README.zh-CN.md +++ b/src/swipe-cell/README.zh-CN.md @@ -161,10 +161,10 @@ beforeClose 的第一个参数为对象，对象中包含以下属性： | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-switch-cell-padding-top | `@cell-vertical-padding - 1px` | - | -| --van-switch-cell-padding-bottom | `@cell-vertical-padding - 1px` | - | -| --van-switch-cell-large-padding-top | `@cell-large-vertical-padding - 1px` | - | -| --van-switch-cell-large-padding-bottom | `@cell-large-vertical-padding - 1px` | - | +| --van-switch-cell-padding-top | `var(--van-cell-vertical-padding) - 1px` | - | +| --van-switch-cell-padding-bottom | `var(--van-cell-vertical-padding) - 1px` | - | +| --van-switch-cell-large-padding-top | `var(--van-cell-large-vertical-padding) - 1px` | - | +| --van-switch-cell-large-padding-bottom | `var(--van-cell-large-vertical-padding) - 1px` | - | ## 常见问题 diff --git a/src/swipe/README.md b/src/swipe/README.md index 76b362fbb..505b599f1 100644 --- a/src/swipe/README.md +++ b/src/swipe/README.md @@ -199,8 +199,8 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-swipe-indicator-size | `6px` | - | -| --van-swipe-indicator-margin | `@padding-sm` | - | +| --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 | `@blue` | - | -| --van-swipe-indicator-inactive-background-color | `@border-color` | - | +| --van-swipe-indicator-active-background-color | `var(--van-blue)` | - | +| --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 81a1f72c7..25a218122 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -204,14 +204,14 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ----------------------------------------------- | --------------- | ---- | -| --van-swipe-indicator-size | `6px` | - | -| --van-swipe-indicator-margin | `@padding-sm` | - | -| --van-swipe-indicator-active-opacity | `1` | - | -| --van-swipe-indicator-inactive-opacity | `0.3` | - | -| --van-swipe-indicator-active-background-color | `@blue` | - | -| --van-swipe-indicator-inactive-background-color | `@border-color` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-swipe-indicator-size | `6px` | - | +| --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-inactive-background-color | `var(--van-border-color)` | - | ## 常见问题 diff --git a/src/switch/README.md b/src/switch/README.md index e793f9047..19649fc49 100644 --- a/src/switch/README.md +++ b/src/switch/README.md @@ -131,10 +131,10 @@ The component provides the following CSS variables, which can be used to customi | --van-switch-width | `2em` | - | | --van-switch-height | `1em` | - | | --van-switch-node-size | `1em` | - | -| --van-switch-node-background-color | `@white` | - | +| --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 | `@white` | - | -| --van-switch-on-background-color | `@blue` | - | -| --van-switch-transition-duration | `@animation-duration-base` | - | -| --van-switch-disabled-opacity | `@disabled-opacity` | - | -| --van-switch-border | `@border-width-base solid rgba(0, 0, 0, 0.1)` | - | +| --van-switch-background-color | `var(--van-white)` | - | +| --van-switch-on-background-color | `var(--van-blue)` | - | +| --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 bd50c0616..5e641093f 100644 --- a/src/switch/README.zh-CN.md +++ b/src/switch/README.zh-CN.md @@ -143,10 +143,10 @@ export default { | --van-switch-width | `2em` | - | | --van-switch-height | `1em` | - | | --van-switch-node-size | `1em` | - | -| --van-switch-node-background-color | `@white` | - | +| --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 | `@white` | - | -| --van-switch-on-background-color | `@blue` | - | -| --van-switch-transition-duration | `@animation-duration-base` | - | -| --van-switch-disabled-opacity | `@disabled-opacity` | - | -| --van-switch-border | `@border-width-base solid rgba(0, 0, 0, 0.1)` | - | +| --van-switch-background-color | `var(--van-white)` | - | +| --van-switch-on-background-color | `var(--van-blue)` | - | +| --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/tab/README.md b/src/tab/README.md index 053ee1a99..86063c374 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -306,17 +306,17 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs i 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-tab-text-color | `@gray-7` | - | -| --van-tab-active-text-color | `@text-color` | - | -| --van-tab-disabled-text-color | `@gray-5` | - | -| --van-tab-font-size | `@font-size-md` | - | -| --van-tab-line-height | `@line-height-md` | - | -| --van-tabs-default-color | `@red` | - | -| --van-tabs-line-height | `44px` | - | -| --van-tabs-card-height | `30px` | - | -| --van-tabs-nav-background-color | `@white` | - | -| --van-tabs-bottom-bar-width | `40px` | - | -| --van-tabs-bottom-bar-height | `3px` | - | -| --van-tabs-bottom-bar-color | `@tabs-default-color` | - | +| Name | Default Value | Description | +| ------------------------------- | --------------------------- | ----------- | +| --van-tab-text-color | `var(--van-gary-7)` | - | +| --van-tab-active-text-color | `var(--van-text-color)` | - | +| --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-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)` | - | diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index 4a9274c44..0b31def86 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -313,20 +313,20 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------- | --------------------- | ---- | -| --van-tab-text-color | `@gray-7` | - | -| --van-tab-active-text-color | `@text-color` | - | -| --van-tab-disabled-text-color | `@gray-5` | - | -| --van-tab-font-size | `@font-size-md` | - | -| --van-tab-line-height | `@line-height-md` | - | -| --van-tabs-default-color | `@red` | - | -| --van-tabs-line-height | `44px` | - | -| --van-tabs-card-height | `30px` | - | -| --van-tabs-nav-background-color | `@white` | - | -| --van-tabs-bottom-bar-width | `40px` | - | -| --van-tabs-bottom-bar-height | `3px` | - | -| --van-tabs-bottom-bar-color | `@tabs-default-color` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------- | --------------------------- | ---- | +| --van-tab-text-color | `var(--van-gary-7)` | - | +| --van-tab-active-text-color | `var(--van-text-color)` | - | +| --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-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)` | - | ## 常见问题 diff --git a/src/tabbar/README.md b/src/tabbar/README.md index 366173394..5f6959e30 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -204,15 +204,15 @@ 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-tabbar-height | `50px` | - | -| --van-tabbar-z-index | `1` | - | -| --van-tabbar-background-color | `@white` | - | -| --van-tabbar-item-font-size | `@font-size-sm` | - | -| --van-tabbar-item-text-color | `@gray-7` | - | -| --van-tabbar-item-active-color | `@blue` | - | -| --van-tabbar-item-active-background-color | `@white` | - | -| --van-tabbar-item-line-height | `1` | - | -| --van-tabbar-item-icon-size | `22px` | - | -| --van-tabbar-item-margin-bottom | `4px` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --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` | - | diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index 7eff9eabe..39753d490 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 | `@white` | - | -| --van-tabbar-item-font-size | `@font-size-sm` | - | -| --van-tabbar-item-text-color | `@gray-7` | - | -| --van-tabbar-item-active-color | `@blue` | - | -| --van-tabbar-item-active-background-color | `@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-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` | - | diff --git a/src/tag/README.md b/src/tag/README.md index 458aac377..e40f582b6 100644 --- a/src/tag/README.md +++ b/src/tag/README.md @@ -120,21 +120,21 @@ 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-tag-padding | `0 @padding-base` | - | -| --van-tag-text-color | `@white` | - | -| --van-tag-font-size | `@font-size-sm` | - | -| --van-tag-border-radius | `2px` | - | -| --van-tag-line-height | `16px` | - | -| --van-tag-medium-padding | `2px 6px` | - | -| --van-tag-large-padding | `@padding-base @padding-xs` | - | -| --van-tag-large-border-radius | `@border-radius-md` | - | -| --van-tag-large-font-size | `@font-size-md` | - | -| --van-tag-round-border-radius | `@border-radius-max` | - | -| --van-tag-danger-color | `@red` | - | -| --van-tag-primary-color | `@blue` | - | -| --van-tag-success-color | `@green` | - | -| --van-tag-warning-color | `@orange` | - | -| --van-tag-default-color | `@gray-6` | - | -| --van-tag-plain-background-color | `@white` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-tag-padding | `0 var(--van-padding-base)` | - | +| --van-tag-text-color | `var(--van-white)` | - | +| --van-tag-font-size | `var(--van-font-size-sm)` | - | +| --van-tag-border-radius | `2px` | - | +| --van-tag-line-height | `16px` | - | +| --van-tag-medium-padding | `2px 6px` | - | +| --van-tag-large-padding | `var(--van-padding-base) var(--van-padding-xs)` | - | +| --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-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 9cefbbc35..781554418 100644 --- a/src/tag/README.zh-CN.md +++ b/src/tag/README.zh-CN.md @@ -134,21 +134,21 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| -------------------------------- | --------------------------- | ---- | -| --van-tag-padding | `0 @padding-base` | - | -| --van-tag-text-color | `@white` | - | -| --van-tag-font-size | `@font-size-sm` | - | -| --van-tag-border-radius | `2px` | - | -| --van-tag-line-height | `16px` | - | -| --van-tag-medium-padding | `2px 6px` | - | -| --van-tag-large-padding | `@padding-base @padding-xs` | - | -| --van-tag-large-border-radius | `@border-radius-md` | - | -| --van-tag-large-font-size | `@font-size-md` | - | -| --van-tag-round-border-radius | `@border-radius-max` | - | -| --van-tag-danger-color | `@red` | - | -| --van-tag-primary-color | `@blue` | - | -| --van-tag-success-color | `@green` | - | -| --van-tag-warning-color | `@orange` | - | -| --van-tag-default-color | `@gray-6` | - | -| --van-tag-plain-background-color | `@white` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-tag-padding | `0 var(--van-padding-base)` | - | +| --van-tag-text-color | `var(--van-white)` | - | +| --van-tag-font-size | `var(--van-font-size-sm)` | - | +| --van-tag-border-radius | `2px` | - | +| --van-tag-line-height | `16px` | - | +| --van-tag-medium-padding | `2px 6px` | - | +| --van-tag-large-padding | `var(--van-padding-base) var(--van-padding-xs)` | - | +| --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-default-color | `var(--van-gary-6)` | - | +| --van-tag-plain-background-color | `var(--van-white)` | - | diff --git a/src/toast/README.md b/src/toast/README.md index db85fc8c6..653b2ac23 100644 --- a/src/toast/README.md +++ b/src/toast/README.md @@ -182,16 +182,16 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-toast-max-width | `70%` | - | -| --van-toast-font-size | `@font-size-md` | - | -| --van-toast-text-color | `@white` | - | -| --van-toast-loading-icon-color | `@white` | - | -| --van-toast-line-height | `@line-height-md` | - | -| --van-toast-border-radius | `@border-radius-lg` | - | +| --van-toast-font-size | `var(--van-font-size-md)` | - | +| --van-toast-text-color | `var(--van-white)` | - | +| --van-toast-loading-icon-color | `var(--van-white)` | - | +| --van-toast-line-height | `var(--van-line-height-md)` | - | +| --van-toast-border-radius | `var(--van-border-radius-lg)` | - | | --van-toast-background-color | `fade(@black, 70%)` | - | | --van-toast-icon-size | `36px` | - | | --van-toast-text-min-width | `96px` | - | -| --van-toast-text-padding | `@padding-xs @padding-sm` | - | -| --van-toast-default-padding | `@padding-md` | - | +| --van-toast-text-padding | `var(--van-padding-xs) var(--van-padding-sm)` | - | +| --van-toast-default-padding | `var(--van-padding-md)` | - | | --van-toast-default-width | `88px` | - | | --van-toast-default-min-height | `88px` | - | | --van-toast-position-top-distance | `20%` | - | diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md index 08cea802b..374e0ba09 100644 --- a/src/toast/README.zh-CN.md +++ b/src/toast/README.zh-CN.md @@ -190,20 +190,20 @@ Toast.resetDefaultOptions('loading'); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------ | ------------------------- | ---- | -| --van-toast-max-width | `70%` | - | -| --van-toast-font-size | `@font-size-md` | - | -| --van-toast-text-color | `@white` | - | -| --van-toast-loading-icon-color | `@white` | - | -| --van-toast-line-height | `@line-height-md` | - | -| --van-toast-border-radius | `@border-radius-lg` | - | -| --van-toast-background-color | `fade(@black, 70%)` | - | -| --van-toast-icon-size | `36px` | - | -| --van-toast-text-min-width | `96px` | - | -| --van-toast-text-padding | `@padding-xs @padding-sm` | - | -| --van-toast-default-padding | `@padding-md` | - | -| --van-toast-default-width | `88px` | - | -| --van-toast-default-min-height | `88px` | - | -| --van-toast-position-top-distance | `20%` | - | -| --van-toast-position-bottom-distance | `20%` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-toast-max-width | `70%` | - | +| --van-toast-font-size | `var(--van-font-size-md)` | - | +| --van-toast-text-color | `var(--van-white)` | - | +| --van-toast-loading-icon-color | `var(--van-white)` | - | +| --van-toast-line-height | `var(--van-line-height-md)` | - | +| --van-toast-border-radius | `var(--van-border-radius-lg)` | - | +| --van-toast-background-color | `fade(@black, 70%)` | - | +| --van-toast-icon-size | `36px` | - | +| --van-toast-text-min-width | `96px` | - | +| --van-toast-text-padding | `var(--van-padding-xs) var(--van-padding-sm)` | - | +| --van-toast-default-padding | `var(--van-padding-md)` | - | +| --van-toast-default-width | `88px` | - | +| --van-toast-default-min-height | `88px` | - | +| --van-toast-position-top-distance | `20%` | - | +| --van-toast-position-bottom-distance | `20%` | - | diff --git a/src/tree-select/README.md b/src/tree-select/README.md index 7a46d0b3f..8b3b61a4d 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -236,11 +236,11 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-tree-select-font-size | `@font-size-md` | - | -| --van-tree-select-nav-background-color | `@background-color` | - | -| --van-tree-select-content-background-color | `@white` | - | -| --van-tree-select-nav-item-padding | `14px @padding-sm` | - | +| --van-tree-select-font-size | `var(--van-font-size-md)` | - | +| --van-tree-select-nav-background-color | `var(--van-background-color)` | - | +| --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 | `@red` | - | -| --van-tree-select-item-disabled-color | `@gray-5` | - | +| --van-tree-select-item-active-color | `var(--van-red)` | - | +| --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 deb9181a5..cc8ba582a 100644 --- a/src/tree-select/README.zh-CN.md +++ b/src/tree-select/README.zh-CN.md @@ -240,13 +240,13 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------------ | ------------------- | ---- | -| --van-tree-select-font-size | `@font-size-md` | - | -| --van-tree-select-nav-background-color | `@background-color` | - | -| --van-tree-select-content-background-color | `@white` | - | -| --van-tree-select-nav-item-padding | `14px @padding-sm` | - | -| --van-tree-select-item-height | `48px` | - | -| --van-tree-select-item-active-color | `@red` | - | -| --van-tree-select-item-disabled-color | `@gray-5` | - | -| --van-tree-select-item-selected-size | `16px` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-tree-select-font-size | `var(--van-font-size-md)` | - | +| --van-tree-select-nav-background-color | `var(--van-background-color)` | - | +| --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-disabled-color | `var(--van-gary-5)` | - | +| --van-tree-select-item-selected-size | `16px` | - | diff --git a/src/uploader/README.md b/src/uploader/README.md index 2af794d8c..f25412ccd 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -360,30 +360,30 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Upload 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-uploader-size | `80px` | - | -| --van-uploader-icon-size | `24px` | - | -| --van-uploader-icon-color | `@gray-4` | - | -| --van-uploader-text-color | `@gray-6` | - | -| --van-uploader-text-font-size | `@font-size-sm` | - | -| --van-uploader-upload-background-color | `@gray-1` | - | -| --van-uploader-upload-active-color | `@active-color` | - | -| --van-uploader-delete-color | `@white` | - | -| --van-uploader-delete-icon-size | `14px` | - | -| --van-uploader-delete-background-color | `rgba(0, 0, 0, 0.7)` | - | -| --van-uploader-file-background-color | `@background-color` | - | -| --van-uploader-file-icon-size | `20px` | - | -| --van-uploader-file-icon-color | `@gray-7` | - | -| --van-uploader-file-name-padding | `0 @padding-base` | - | -| --van-uploader-file-name-margin-top | `@padding-xs` | - | -| --van-uploader-file-name-font-size | `@font-size-sm` | - | -| --van-uploader-file-name-text-color | `@gray-7` | - | -| --van-uploader-mask-text-color | `@white` | - | -| --van-uploader-mask-background-color | `fade(@gray-8, 88%)` | - | -| --van-uploader-mask-icon-size | `22px` | - | -| --van-uploader-mask-message-font-size | `@font-size-sm` | - | -| --van-uploader-mask-message-line-height | `@line-height-xs` | - | -| --van-uploader-loading-icon-size | `22px` | - | -| --van-uploader-loading-icon-color | `@white` | - | -| --van-uploader-disabled-opacity | `@disabled-opacity` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-uploader-size | `80px` | - | +| --van-uploader-icon-size | `24px` | - | +| --van-uploader-icon-color | `var(--van-gary-4)` | - | +| --van-uploader-text-color | `var(--van-gary-6)` | - | +| --van-uploader-text-font-size | `var(--van-font-size-sm)` | - | +| --van-uploader-upload-background-color | `var(--van-gary-1)` | - | +| --van-uploader-upload-active-color | `var(--van-active-color)` | - | +| --van-uploader-delete-color | `var(--van-white)` | - | +| --van-uploader-delete-icon-size | `14px` | - | +| --van-uploader-delete-background-color | `rgba(0, 0, 0, 0.7)` | - | +| --van-uploader-file-background-color | `var(--van-background-color)` | - | +| --van-uploader-file-icon-size | `20px` | - | +| --van-uploader-file-icon-color | `var(--van-gary-7)` | - | +| --van-uploader-file-name-padding | `0 var(--van-padding-base)` | - | +| --van-uploader-file-name-margin-top | `var(--van-padding-xs)` | - | +| --van-uploader-file-name-font-size | `var(--van-font-size-sm)` | - | +| --van-uploader-file-name-text-color | `var(--van-gary-7)` | - | +| --van-uploader-mask-text-color | `var(--van-white)` | - | +| --van-uploader-mask-background-color | `fade(@gray-8, 88%)` | - | +| --van-uploader-mask-icon-size | `22px` | - | +| --van-uploader-mask-message-font-size | `var(--van-font-size-sm)` | - | +| --van-uploader-mask-message-line-height | `var(--van-line-height-xs)` | - | +| --van-uploader-loading-icon-size | `22px` | - | +| --van-uploader-loading-icon-color | `var(--van-white)` | - | +| --van-uploader-disabled-opacity | `var(--van-disabled-opacity)` | - | diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 5a2d6db7b..e86665073 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -385,33 +385,33 @@ before-read、after-read、before-delete 执行时会传递以下回调参数： 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --------------------------------------- | -------------------- | ---- | -| --van-uploader-size | `80px` | - | -| --van-uploader-icon-size | `24px` | - | -| --van-uploader-icon-color | `@gray-4` | - | -| --van-uploader-text-color | `@gray-6` | - | -| --van-uploader-text-font-size | `@font-size-sm` | - | -| --van-uploader-upload-background-color | `@gray-1` | - | -| --van-uploader-upload-active-color | `@active-color` | - | -| --van-uploader-delete-color | `@white` | - | -| --van-uploader-delete-icon-size | `14px` | - | -| --van-uploader-delete-background-color | `rgba(0, 0, 0, 0.7)` | - | -| --van-uploader-file-background-color | `@background-color` | - | -| --van-uploader-file-icon-size | `20px` | - | -| --van-uploader-file-icon-color | `@gray-7` | - | -| --van-uploader-file-name-padding | `0 @padding-base` | - | -| --van-uploader-file-name-margin-top | `@padding-xs` | - | -| --van-uploader-file-name-font-size | `@font-size-sm` | - | -| --van-uploader-file-name-text-color | `@gray-7` | - | -| --van-uploader-mask-text-color | `@white` | - | -| --van-uploader-mask-background-color | `fade(@gray-8, 88%)` | - | -| --van-uploader-mask-icon-size | `22px` | - | -| --van-uploader-mask-message-font-size | `@font-size-sm` | - | -| --van-uploader-mask-message-line-height | `@line-height-xs` | - | -| --van-uploader-loading-icon-size | `22px` | - | -| --van-uploader-loading-icon-color | `@white` | - | -| --van-uploader-disabled-opacity | `@disabled-opacity` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-uploader-size | `80px` | - | +| --van-uploader-icon-size | `24px` | - | +| --van-uploader-icon-color | `var(--van-gary-4)` | - | +| --van-uploader-text-color | `var(--van-gary-6)` | - | +| --van-uploader-text-font-size | `var(--van-font-size-sm)` | - | +| --van-uploader-upload-background-color | `var(--van-gary-1)` | - | +| --van-uploader-upload-active-color | `var(--van-active-color)` | - | +| --van-uploader-delete-color | `var(--van-white)` | - | +| --van-uploader-delete-icon-size | `14px` | - | +| --van-uploader-delete-background-color | `rgba(0, 0, 0, 0.7)` | - | +| --van-uploader-file-background-color | `var(--van-background-color)` | - | +| --van-uploader-file-icon-size | `20px` | - | +| --van-uploader-file-icon-color | `var(--van-gary-7)` | - | +| --van-uploader-file-name-padding | `0 var(--van-padding-base)` | - | +| --van-uploader-file-name-margin-top | `var(--van-padding-xs)` | - | +| --van-uploader-file-name-font-size | `var(--van-font-size-sm)` | - | +| --van-uploader-file-name-text-color | `var(--van-gary-7)` | - | +| --van-uploader-mask-text-color | `var(--van-white)` | - | +| --van-uploader-mask-background-color | `fade(@gray-8, 88%)` | - | +| --van-uploader-mask-icon-size | `22px` | - | +| --van-uploader-mask-message-font-size | `var(--van-font-size-sm)` | - | +| --van-uploader-mask-message-line-height | `var(--van-line-height-xs)` | - | +| --van-uploader-loading-icon-size | `22px` | - | +| --van-uploader-loading-icon-color | `var(--van-white)` | - | +| --van-uploader-disabled-opacity | `var(--van-disabled-opacity)` | - | ## 常见问题