diff --git a/packages/vant/docs/markdown/changelog.en-US.md b/packages/vant/docs/markdown/changelog.en-US.md index 79af09bb1..0f7953e84 100644 --- a/packages/vant/docs/markdown/changelog.en-US.md +++ b/packages/vant/docs/markdown/changelog.en-US.md @@ -142,7 +142,7 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/). - Circle: add start-position prop [#9305](https://github.com/youzan/vant/issues/9305) - Slider: add reverse prop [#9308](https://github.com/youzan/vant/issues/9308) -- NumberKeyboard: add van-number-keyboard-key-background-color css var [#9303](https://github.com/youzan/vant/issues/9303) +- NumberKeyboard: add van-number-keyboard-key-background css var [#9303](https://github.com/youzan/vant/issues/9303) - PasswordInput: add password-input-text-color css var [#9304](https://github.com/youzan/vant/issues/9304) **Bug Fixes** @@ -401,7 +401,7 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/). **Feature** -- ActionBar: add @action-bar-icon-background-color less var [#8474](https://github.com/youzan/vant/issues/8474) +- ActionBar: add @action-bar-icon-background less var [#8474](https://github.com/youzan/vant/issues/8474) - Popover: bump @popperjs/core@2.9.2 [0d1323](https://github.com/youzan/vant/commit/0d132337d5d263957a7993d60e47a18efec7313e) - perf: reduce bundle size [ba3e6d](https://github.com/youzan/vant/commit/ba3e6d56a0bc7ae3acc25b1380f054da3b9b020f) diff --git a/packages/vant/docs/markdown/changelog.zh-CN.md b/packages/vant/docs/markdown/changelog.zh-CN.md index d9fc3af71..21a5ca4e1 100644 --- a/packages/vant/docs/markdown/changelog.zh-CN.md +++ b/packages/vant/docs/markdown/changelog.zh-CN.md @@ -142,7 +142,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 - Circle: 新增 start-position 属性 [#9305](https://github.com/youzan/vant/issues/9305) - Slider: 新增 reverse 属性 [#9308](https://github.com/youzan/vant/issues/9308) -- NumberKeyboard: 新增 van-number-keyboard-key-background-color CSS 变量 [#9303](https://github.com/youzan/vant/issues/9303) +- NumberKeyboard: 新增 van-number-keyboard-key-background CSS 变量 [#9303](https://github.com/youzan/vant/issues/9303) - PasswordInput: add password-input-text-color CSS 变量 [#9304](https://github.com/youzan/vant/issues/9304) **Bug Fixes** @@ -402,7 +402,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 **Feature** -- ActionBar: 新增 @action-bar-icon-background-color 样式变量 [#8474](https://github.com/youzan/vant/issues/8474) +- ActionBar: 新增 @action-bar-icon-background 样式变量 [#8474](https://github.com/youzan/vant/issues/8474) - Popover: 升级依赖的 @popperjs/core 到 2.9.2 版本 [0d1323](https://github.com/youzan/vant/commit/0d132337d5d263957a7993d60e47a18efec7313e) - perf: 优化包体积 [ba3e6d](https://github.com/youzan/vant/commit/ba3e6d56a0bc7ae3acc25b1380f054da3b9b020f) @@ -965,7 +965,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 - Button: 新增 icon-position 属性 [#7174](https://github.com/youzan/vant/issues/7174) - slider: 新增 range 属性，支持范围选择 [#7175](https://github.com/youzan/vant/issues/7175) -- TabbarItem: 新增 @tabbar-item-active-background-color 变量 [#7162](https://github.com/youzan/vant/issues/7162) +- TabbarItem: 新增 @tabbar-item-active-background 变量 [#7162](https://github.com/youzan/vant/issues/7162) **Bug Fixes** diff --git a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md index 3d2ce7bfc..ba15d5596 100644 --- a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md +++ b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md @@ -10,6 +10,25 @@ 不再支持基于 Less 变量进行主题定制，请使用 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行主题配置。 +### CSS 变量名称简化 + +为了便于使用 CSS 变量，我们对部分 CSS 变量的名称进行了简化，使用更短的单词代替： + +``` +text-link -> link +box-shadow -> shadow +font-family -> font +border-radius -> radius +background-color -> background +font-weight-bold -> font-bold +border-width-base -> border-width +price-integer-font -> price-font +animation-duration -> duration +transition-duration -> duration +animation-timing-function-enter -> ease-out +animation-timing-function-leave -> ease-in +``` + ### API 调整 #### Picker diff --git a/packages/vant/src/action-bar-button/index.less b/packages/vant/src/action-bar-button/index.less index be6b9d4ce..8a519df7d 100644 --- a/packages/vant/src/action-bar-button/index.less +++ b/packages/vant/src/action-bar-button/index.less @@ -7,21 +7,21 @@ .van-action-bar-button { flex: 1; height: var(--van-action-bar-button-height); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); font-size: var(--van-font-size-md); border: none; border-radius: 0; &--first { margin-left: 5px; - border-top-left-radius: var(--van-border-radius-max); - border-bottom-left-radius: var(--van-border-radius-max); + border-top-left-radius: var(--van-radius-max); + border-bottom-left-radius: var(--van-radius-max); } &--last { margin-right: 5px; - border-top-right-radius: var(--van-border-radius-max); - border-bottom-right-radius: var(--van-border-radius-max); + border-top-right-radius: var(--van-radius-max); + border-bottom-right-radius: var(--van-radius-max); } &--warning { diff --git a/packages/vant/src/action-bar-icon/index.less b/packages/vant/src/action-bar-icon/index.less index 3bad268c1..b118e36a2 100644 --- a/packages/vant/src/action-bar-icon/index.less +++ b/packages/vant/src/action-bar-icon/index.less @@ -6,7 +6,7 @@ --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-gray-7); - --van-action-bar-icon-background-color: var(--van-background-color-light); + --van-action-bar-icon-background: var(--van-background-light); } .van-action-bar-icon { @@ -19,7 +19,7 @@ font-size: var(--van-action-bar-icon-font-size); line-height: 1; text-align: center; - background: var(--van-action-bar-icon-background-color); + background: var(--van-action-bar-icon-background); cursor: pointer; &:active { diff --git a/packages/vant/src/action-bar/README.md b/packages/vant/src/action-bar/README.md index 04925f120..e44f4e477 100644 --- a/packages/vant/src/action-bar/README.md +++ b/packages/vant/src/action-bar/README.md @@ -153,7 +153,7 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-action-bar-background-color | _var(--van-background-color-light)_ | - | +| --van-action-bar-background | _var(--van-background-light)_ | - | | --van-action-bar-height | _50px_ | - | | --van-action-bar-icon-width | _48px_ | - | | --van-action-bar-icon-height | _100%_ | - | @@ -162,7 +162,7 @@ The component provides the following CSS variables, which can be used to customi | --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-gray-7)_ | - | -| --van-action-bar-icon-background-color | _var(--van-background-color-light)_ | - | +| --van-action-bar-icon-background | _var(--van-background-light)_ | - | | --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/packages/vant/src/action-bar/README.zh-CN.md b/packages/vant/src/action-bar/README.zh-CN.md index da5ca90c6..8e3b9c348 100644 --- a/packages/vant/src/action-bar/README.zh-CN.md +++ b/packages/vant/src/action-bar/README.zh-CN.md @@ -155,18 +155,18 @@ import type { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --van-action-bar-background-color | _var(--van-background-color-light)_ | - | -| --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-gray-7)_ | - | -| --van-action-bar-icon-background-color | _var(--van-background-color-light)_ | - | -| --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)_ | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------- | ----------------------------- | ---- | +| --van-action-bar-background | _var(--van-background-light)_ | - | +| --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-gray-7)_ | - | +| --van-action-bar-icon-background | _var(--van-background-light)_ | - | +| --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/packages/vant/src/action-bar/index.less b/packages/vant/src/action-bar/index.less index a71f4440f..8457bd0c6 100644 --- a/packages/vant/src/action-bar/index.less +++ b/packages/vant/src/action-bar/index.less @@ -1,5 +1,5 @@ :root { - --van-action-bar-background-color: var(--van-background-color-light); + --van-action-bar-background: var(--van-background-light); --van-action-bar-height: 50px; } @@ -12,5 +12,5 @@ align-items: center; box-sizing: content-box; height: var(--van-action-bar-height); - background: var(--van-action-bar-background-color); + background: var(--van-action-bar-background); } diff --git a/packages/vant/src/action-sheet/README.md b/packages/vant/src/action-sheet/README.md index 2b5010e0d..7df26b655 100644 --- a/packages/vant/src/action-sheet/README.md +++ b/packages/vant/src/action-sheet/README.md @@ -246,7 +246,7 @@ The component provides the following CSS variables, which can be used to customi | --van-action-sheet-description-color | _var(--van-text-color-secondary)_ | - | | --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - | | --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - | -| --van-action-sheet-item-background | _var(--van-background-color-light)_ | - | +| --van-action-sheet-item-background | _var(--van-background-light)_ | - | | --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)_ | - | @@ -259,5 +259,5 @@ The component provides the following CSS variables, which can be used to customi | --van-action-sheet-close-icon-padding | _0 var(--van-padding-md)_ | - | | --van-action-sheet-cancel-text-color | _var(--van-gray-7)_ | - | | --van-action-sheet-cancel-padding-top | _var(--van-padding-xs)_ | - | -| --van-action-sheet-cancel-padding-color | _var(--van-background-color)_ | - | +| --van-action-sheet-cancel-padding-color | _var(--van-background)_ | - | | --van-action-sheet-loading-icon-size | _22px_ | - | diff --git a/packages/vant/src/action-sheet/README.zh-CN.md b/packages/vant/src/action-sheet/README.zh-CN.md index 7d4712154..a9df2caa0 100644 --- a/packages/vant/src/action-sheet/README.zh-CN.md +++ b/packages/vant/src/action-sheet/README.zh-CN.md @@ -258,7 +258,7 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant'; | --van-action-sheet-description-color | _var(--van-text-color-secondary)_ | - | | --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - | | --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - | -| --van-action-sheet-item-background | _var(--van-background-color-light)_ | - | +| --van-action-sheet-item-background | _var(--van-background-light)_ | - | | --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)_ | - | @@ -271,5 +271,5 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant'; | --van-action-sheet-close-icon-padding | _0 var(--van-padding-md)_ | - | | --van-action-sheet-cancel-text-color | _var(--van-gray-7)_ | - | | --van-action-sheet-cancel-padding-top | _var(--van-padding-xs)_ | - | -| --van-action-sheet-cancel-padding-color | _var(--van-background-color)_ | - | +| --van-action-sheet-cancel-padding-color | _var(--van-background)_ | - | | --van-action-sheet-loading-icon-size | _22px_ | - | diff --git a/packages/vant/src/action-sheet/index.less b/packages/vant/src/action-sheet/index.less index 6658b71ec..3a1ee8904 100644 --- a/packages/vant/src/action-sheet/index.less +++ b/packages/vant/src/action-sheet/index.less @@ -7,7 +7,7 @@ --van-action-sheet-description-color: var(--van-text-color-secondary); --van-action-sheet-description-font-size: var(--van-font-size-md); --van-action-sheet-description-line-height: var(--van-line-height-md); - --van-action-sheet-item-background: var(--van-background-color-light); + --van-action-sheet-item-background: var(--van-background-light); --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); @@ -20,7 +20,7 @@ --van-action-sheet-close-icon-padding: 0 var(--van-padding-md); --van-action-sheet-cancel-text-color: var(--van-gray-7); --van-action-sheet-cancel-padding-top: var(--van-padding-xs); - --van-action-sheet-cancel-padding-color: var(--van-background-color); + --van-action-sheet-cancel-padding-color: var(--van-background); --van-action-sheet-loading-icon-size: 22px; } @@ -94,7 +94,7 @@ &__header { flex-shrink: 0; - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); font-size: var(--van-action-sheet-header-font-size); line-height: var(--van-action-sheet-header-height); text-align: center; diff --git a/packages/vant/src/address-list/index.less b/packages/vant/src/address-list/index.less index 5dcb92eeb..3b0a8bd28 100644 --- a/packages/vant/src/address-list/index.less +++ b/packages/vant/src/address-list/index.less @@ -28,7 +28,7 @@ width: 100%; padding-left: var(--van-padding-md); padding-right: var(--van-padding-md); - background-color: var(--van-background-color-light); + background-color: var(--van-background-light); } &__add { @@ -46,8 +46,8 @@ .van-address-item { padding: var(--van-address-list-item-padding); - background-color: var(--van-background-color-light); - border-radius: var(--van-border-radius-lg); + background-color: var(--van-background-light); + border-radius: var(--van-radius-lg); &:not(:last-child) { margin-bottom: var(--van-padding-sm); diff --git a/packages/vant/src/badge/README.md b/packages/vant/src/badge/README.md index f6a5c19c0..9ef4d459d 100644 --- a/packages/vant/src/badge/README.md +++ b/packages/vant/src/badge/README.md @@ -153,9 +153,9 @@ The component provides the following CSS variables, which can be used to customi | --van-badge-color | _var(--van-white)_ | - | | --van-badge-padding | _0 3px_ | - | | --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-danger-color)_ | - | +| --van-badge-font-weight | _var(--van-font-bold)_ | - | +| --van-badge-border-width | _var(--van-border-width)_ | - | +| --van-badge-background | _var(--van-danger-color)_ | - | | --van-badge-dot-color | _var(--van-danger-color)_ | - | | --van-badge-dot-size | _8px_ | - | -| --van-badge-font-family | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - | +| --van-badge-font | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - | diff --git a/packages/vant/src/badge/README.zh-CN.md b/packages/vant/src/badge/README.zh-CN.md index 9b21a0069..b0097e54f 100644 --- a/packages/vant/src/badge/README.zh-CN.md +++ b/packages/vant/src/badge/README.zh-CN.md @@ -161,9 +161,9 @@ import type { BadgeProps } from 'vant'; | --van-badge-color | _var(--van-white)_ | - | | --van-badge-padding | _0 3px_ | - | | --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-danger-color)_ | - | +| --van-badge-font-weight | _var(--van-font-bold)_ | - | +| --van-badge-border-width | _var(--van-border-width)_ | - | +| --van-badge-background | _var(--van-danger-color)_ | - | | --van-badge-dot-color | _var(--van-danger-color)_ | - | | --van-badge-dot-size | _8px_ | - | -| --van-badge-font-family | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - | +| --van-badge-font | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - | diff --git a/packages/vant/src/badge/index.less b/packages/vant/src/badge/index.less index ca2f54831..3d1e0b466 100644 --- a/packages/vant/src/badge/index.less +++ b/packages/vant/src/badge/index.less @@ -3,12 +3,12 @@ --van-badge-color: var(--van-white); --van-badge-padding: 0 3px; --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-danger-color); + --van-badge-font-weight: var(--van-font-bold); + --van-badge-border-width: var(--van-border-width); + --van-badge-background: var(--van-danger-color); --van-badge-dot-color: var(--van-danger-color); --van-badge-dot-size: 8px; - --van-badge-font-family: -apple-system-font, helvetica neue, arial, sans-serif; + --van-badge-font: -apple-system-font, helvetica neue, arial, sans-serif; } .van-badge { @@ -19,12 +19,12 @@ color: var(--van-badge-color); font-weight: var(--van-badge-font-weight); font-size: var(--van-badge-font-size); - font-family: var(--van-badge-font-family); + font-family: var(--van-badge-font); line-height: 1.2; text-align: center; - background: var(--van-badge-background-color); - border: var(--van-badge-border-width) solid var(--van-background-color-light); - border-radius: var(--van-border-radius-max); + background: var(--van-badge-background); + border: var(--van-badge-border-width) solid var(--van-background-light); + border-radius: var(--van-radius-max); &--fixed { position: absolute; diff --git a/packages/vant/src/button/README.md b/packages/vant/src/button/README.md index 4d30b75c8..c9287aa0d 100644 --- a/packages/vant/src/button/README.md +++ b/packages/vant/src/button/README.md @@ -184,24 +184,24 @@ The component provides the following CSS variables, which can be used to customi | --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-background-color-light)_ | - | +| --van-button-default-background | _var(--van-background-light)_ | - | | --van-button-default-border-color | _var(--van-border-color)_ | - | | --van-button-primary-color | _var(--van-white)_ | - | -| --van-button-primary-background-color | _var(--van-primary-color)_ | - | +| --van-button-primary-background | _var(--van-primary-color)_ | - | | --van-button-primary-border-color | _var(--van-primary-color)_ | - | | --van-button-success-color | _var(--van-white)_ | - | -| --van-button-success-background-color | _var(--van-success-color)_ | - | +| --van-button-success-background | _var(--van-success-color)_ | - | | --van-button-success-border-color | _var(--van-success-color)_ | - | | --van-button-danger-color | _var(--van-white)_ | - | -| --van-button-danger-background-color | _var(--van-danger-color)_ | - | +| --van-button-danger-background | _var(--van-danger-color)_ | - | | --van-button-danger-border-color | _var(--van-danger-color)_ | - | | --van-button-warning-color | _var(--van-white)_ | - | -| --van-button-warning-background-color | _var(--van-warning-color)_ | - | +| --van-button-warning-background | _var(--van-warning-color)_ | - | | --van-button-warning-border-color | _var(--van-warning-color)_ | - | -| --van-button-border-width | _var(--van-border-width-base)_ | - | -| --van-button-border-radius | _var(--van-border-radius-sm)_ | - | -| --van-button-round-border-radius | _var(--van-border-radius-max)_ | - | -| --van-button-plain-background-color | _var(--van-white)_ | - | +| --van-button-border-width | _var(--van-border-width)_ | - | +| --van-button-radius | _var(--van-radius-sm)_ | - | +| --van-button-round-radius | _var(--van-radius-max)_ | - | +| --van-button-plain-background | _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/packages/vant/src/button/README.zh-CN.md b/packages/vant/src/button/README.zh-CN.md index 0e12abcda..b8d70bb21 100644 --- a/packages/vant/src/button/README.zh-CN.md +++ b/packages/vant/src/button/README.zh-CN.md @@ -192,39 +192,39 @@ import type { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --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-background-color-light)_ | - | -| --van-button-default-border-color | _var(--van-border-color)_ | - | -| --van-button-primary-color | _var(--van-white)_ | - | -| --van-button-primary-background-color | _var(--van-primary-color)_ | - | -| --van-button-primary-border-color | _var(--van-primary-color)_ | - | -| --van-button-success-color | _var(--van-white)_ | - | -| --van-button-success-background-color | _var(--van-success-color)_ | - | -| --van-button-success-border-color | _var(--van-success-color)_ | - | -| --van-button-danger-color | _var(--van-white)_ | - | -| --van-button-danger-background-color | _var(--van-danger-color)_ | - | -| --van-button-danger-border-color | _var(--van-danger-color)_ | - | -| --van-button-warning-color | _var(--van-white)_ | - | -| --van-button-warning-background-color | _var(--van-orange)_ | - | -| --van-button-warning-border-color | _var(--van-orange)_ | - | -| --van-button-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_ | - | +| 名称 | 默认值 | 描述 | +| --------------------------------- | ----------------------------- | ---- | +| --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 | _var(--van-background-light)_ | - | +| --van-button-default-border-color | _var(--van-border-color)_ | - | +| --van-button-primary-color | _var(--van-white)_ | - | +| --van-button-primary-background | _var(--van-primary-color)_ | - | +| --van-button-primary-border-color | _var(--van-primary-color)_ | - | +| --van-button-success-color | _var(--van-white)_ | - | +| --van-button-success-background | _var(--van-success-color)_ | - | +| --van-button-success-border-color | _var(--van-success-color)_ | - | +| --van-button-danger-color | _var(--van-white)_ | - | +| --van-button-danger-background | _var(--van-danger-color)_ | - | +| --van-button-danger-border-color | _var(--van-danger-color)_ | - | +| --van-button-warning-color | _var(--van-white)_ | - | +| --van-button-warning-background | _var(--van-orange)_ | - | +| --van-button-warning-border-color | _var(--van-orange)_ | - | +| --van-button-border-width | _var(--van-border-width)_ | - | +| --van-button-radius | _var(--van-radius-sm)_ | - | +| --van-button-round-radius | _var(--van-radius-max)_ | - | +| --van-button-plain-background | _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/packages/vant/src/button/index.less b/packages/vant/src/button/index.less index 258639a52..fb6603ae4 100644 --- a/packages/vant/src/button/index.less +++ b/packages/vant/src/button/index.less @@ -12,24 +12,24 @@ --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-background-color-light); + --van-button-default-background: var(--van-background-light); --van-button-default-border-color: var(--van-border-color); --van-button-primary-color: var(--van-white); - --van-button-primary-background-color: var(--van-primary-color); + --van-button-primary-background: var(--van-primary-color); --van-button-primary-border-color: var(--van-primary-color); --van-button-success-color: var(--van-white); - --van-button-success-background-color: var(--van-success-color); + --van-button-success-background: var(--van-success-color); --van-button-success-border-color: var(--van-success-color); --van-button-danger-color: var(--van-white); - --van-button-danger-background-color: var(--van-danger-color); + --van-button-danger-background: var(--van-danger-color); --van-button-danger-border-color: var(--van-danger-color); --van-button-warning-color: var(--van-white); - --van-button-warning-background-color: var(--van-warning-color); + --van-button-warning-background: var(--van-warning-color); --van-button-warning-border-color: var(--van-warning-color); - --van-button-border-width: var(--van-border-width-base); - --van-button-border-radius: var(--van-border-radius-sm); - --van-button-round-border-radius: var(--van-border-radius-max); - --van-button-plain-background-color: var(--van-white); + --van-button-border-width: var(--van-border-width); + --van-button-radius: var(--van-radius-sm); + --van-button-round-radius: var(--van-radius-max); + --van-button-plain-background: var(--van-white); --van-button-disabled-opacity: var(--van-disabled-opacity); --van-button-icon-size: 1.2em; --van-button-loading-icon-size: 20px; @@ -45,9 +45,9 @@ font-size: var(--van-button-default-font-size); line-height: var(--van-button-default-line-height); text-align: center; - border-radius: var(--van-button-border-radius); + border-radius: var(--van-button-radius); cursor: pointer; - transition: opacity var(--van-animation-duration-fast); + transition: opacity var(--van-duration-fast); -webkit-appearance: none; &::before { @@ -78,56 +78,56 @@ &--default { color: var(--van-button-default-color); - background: var(--van-button-default-background-color); + background: var(--van-button-default-background); border: var(--van-button-border-width) solid var(--van-button-default-border-color); } &--primary { color: var(--van-button-primary-color); - background: var(--van-button-primary-background-color); + background: var(--van-button-primary-background); border: var(--van-button-border-width) solid var(--van-button-primary-border-color); } &--success { color: var(--van-button-success-color); - background: var(--van-button-success-background-color); + background: var(--van-button-success-background); border: var(--van-button-border-width) solid var(--van-button-success-border-color); } &--danger { color: var(--van-button-danger-color); - background: var(--van-button-danger-background-color); + background: var(--van-button-danger-background); border: var(--van-button-border-width) solid var(--van-button-danger-border-color); } &--warning { color: var(--van-button-warning-color); - background: var(--van-button-warning-background-color); + background: var(--van-button-warning-background); border: var(--van-button-border-width) solid var(--van-button-warning-border-color); } &--plain { - background: var(--van-button-plain-background-color); + background: var(--van-button-plain-background); &.van-button--primary { - color: var(--van-button-primary-background-color); + color: var(--van-button-primary-background); } &.van-button--success { - color: var(--van-button-success-background-color); + color: var(--van-button-success-background); } &.van-button--danger { - color: var(--van-button-danger-background-color); + color: var(--van-button-danger-background); } &.van-button--warning { - color: var(--van-button-warning-background-color); + color: var(--van-button-warning-background); } } @@ -183,7 +183,7 @@ } &--round { - border-radius: var(--van-button-round-border-radius); + border-radius: var(--van-button-round-radius); } &--square { @@ -222,11 +222,11 @@ &::after { border-color: inherit; - border-radius: calc(var(--van-button-border-radius) * 2); + border-radius: calc(var(--van-button-radius) * 2); } &.van-button--round::after { - border-radius: var(--van-button-round-border-radius); + border-radius: var(--van-button-round-radius); } &.van-button--square::after { diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md index 0693c06d9..375dc5a16 100644 --- a/packages/vant/src/calendar/README.md +++ b/packages/vant/src/calendar/README.md @@ -381,9 +381,9 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-calendar-background-color | _var(--van-background-color-light)_ | - | +| --van-calendar-background | _var(--van-background-light)_ | - | | --van-calendar-popup-height | _80%_ | - | -| --van-calendar-header-box-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - | +| --van-calendar-header-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - | | --van-calendar-header-title-height | _44px_ | - | | --van-calendar-header-title-font-size | _var(--van-font-size-lg)_ | - | | --van-calendar-header-subtitle-font-size | _var(--van-font-size-md)_ | - | @@ -395,14 +395,14 @@ The component provides the following CSS variables, which can be used to customi | --van-calendar-day-height | _64px_ | - | | --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - | | --van-calendar-range-edge-color | _var(--van-white)_ | - | -| --van-calendar-range-edge-background-color | _var(--van-danger-color)_ | - | +| --van-calendar-range-edge-background | _var(--van-danger-color)_ | - | | --van-calendar-range-middle-color | _var(--van-danger-color)_ | - | | --van-calendar-range-middle-background-opacity | _0.1_ | - | | --van-calendar-selected-day-size | _54px_ | - | | --van-calendar-selected-day-color | _var(--van-white)_ | - | | --van-calendar-info-font-size | _var(--van-font-size-xs)_ | - | | --van-calendar-info-line-height | _var(--van-line-height-xs)_ | - | -| --van-calendar-selected-day-background-color | _var(--van-danger-color)_ | - | +| --van-calendar-selected-day-background | _var(--van-danger-color)_ | - | | --van-calendar-day-disabled-color | _var(--van-text-color-tertiary)_ | - | | --van-calendar-confirm-button-height | _36px_ | - | | --van-calendar-confirm-button-margin | _7px 0_ | - | diff --git a/packages/vant/src/calendar/README.zh-CN.md b/packages/vant/src/calendar/README.zh-CN.md index dd2a10e2a..51ea7f049 100644 --- a/packages/vant/src/calendar/README.zh-CN.md +++ b/packages/vant/src/calendar/README.zh-CN.md @@ -387,9 +387,9 @@ calendarRef.value?.reset(); | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-calendar-background-color | _var(--van-background-color-light)_ | - | +| --van-calendar-background | _var(--van-background-light)_ | - | | --van-calendar-popup-height | _80%_ | - | -| --van-calendar-header-box-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - | +| --van-calendar-header-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - | | --van-calendar-header-title-height | _44px_ | - | | --van-calendar-header-title-font-size | _var(--van-font-size-lg)_ | - | | --van-calendar-header-subtitle-font-size | _var(--van-font-size-md)_ | - | @@ -401,14 +401,14 @@ calendarRef.value?.reset(); | --van-calendar-day-height | _64px_ | - | | --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - | | --van-calendar-range-edge-color | _var(--van-white)_ | - | -| --van-calendar-range-edge-background-color | _var(--van-danger-color)_ | - | +| --van-calendar-range-edge-background | _var(--van-danger-color)_ | - | | --van-calendar-range-middle-color | _var(--van-danger-color)_ | - | | --van-calendar-range-middle-background-opacity | _0.1_ | - | | --van-calendar-selected-day-size | _54px_ | - | | --van-calendar-selected-day-color | _var(--van-white)_ | - | | --van-calendar-info-font-size | _var(--van-font-size-xs)_ | - | | --van-calendar-info-line-height | _var(--van-line-height-xs)_ | - | -| --van-calendar-selected-day-background-color | _var(--van-danger-color)_ | - | +| --van-calendar-selected-day-background | _var(--van-danger-color)_ | - | | --van-calendar-day-disabled-color | _var(--van-text-color-tertiary)_ | - | | --van-calendar-confirm-button-height | _36px_ | - | | --van-calendar-confirm-button-margin | _7px 0_ | - | diff --git a/packages/vant/src/calendar/index.less b/packages/vant/src/calendar/index.less index 15aa0f0fc..d28a9da75 100644 --- a/packages/vant/src/calendar/index.less +++ b/packages/vant/src/calendar/index.less @@ -1,7 +1,7 @@ :root { - --van-calendar-background-color: var(--van-background-color-light); + --van-calendar-background: var(--van-background-light); --van-calendar-popup-height: 80%; - --van-calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16); + --van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, 0.16); --van-calendar-header-title-height: 44px; --van-calendar-header-title-font-size: var(--van-font-size-lg); --van-calendar-header-subtitle-font-size: var(--van-font-size-md); @@ -13,14 +13,14 @@ --van-calendar-day-height: 64px; --van-calendar-day-font-size: var(--van-font-size-lg); --van-calendar-range-edge-color: var(--van-white); - --van-calendar-range-edge-background-color: var(--van-danger-color); + --van-calendar-range-edge-background: var(--van-danger-color); --van-calendar-range-middle-color: var(--van-danger-color); --van-calendar-range-middle-background-opacity: 0.1; --van-calendar-selected-day-size: 54px; --van-calendar-selected-day-color: var(--van-white); --van-calendar-info-font-size: var(--van-font-size-xs); --van-calendar-info-line-height: var(--van-line-height-xs); - --van-calendar-selected-day-background-color: var(--van-danger-color); + --van-calendar-selected-day-background: var(--van-danger-color); --van-calendar-day-disabled-color: var(--van-text-color-tertiary); --van-calendar-confirm-button-height: 36px; --van-calendar-confirm-button-margin: 7px 0; @@ -30,7 +30,7 @@ display: flex; flex-direction: column; height: 100%; - background: var(--van-calendar-background-color); + background: var(--van-calendar-background); &__popup { &.van-popup--top, @@ -50,14 +50,14 @@ &__header { flex-shrink: 0; - box-shadow: var(--van-calendar-header-box-shadow); + box-shadow: var(--van-calendar-header-shadow); } &__month-title, &__header-title, &__header-subtitle { height: var(--van-calendar-header-title-height); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); line-height: var(--van-calendar-header-title-height); text-align: center; } @@ -130,20 +130,20 @@ &--multiple-middle, &--multiple-selected { color: var(--van-calendar-range-edge-color); - background: var(--van-calendar-range-edge-background-color); + background: var(--van-calendar-range-edge-background); } &--start { - border-radius: var(--van-border-radius-md) 0 0 var(--van-border-radius-md); + border-radius: var(--van-radius-md) 0 0 var(--van-radius-md); } &--end { - border-radius: 0 var(--van-border-radius-md) var(--van-border-radius-md) 0; + border-radius: 0 var(--van-radius-md) var(--van-radius-md) 0; } &--start-end, &--multiple-selected { - border-radius: var(--van-border-radius-md); + border-radius: var(--van-radius-md); } &--middle { @@ -192,8 +192,8 @@ width: var(--van-calendar-selected-day-size); height: var(--van-calendar-selected-day-size); color: var(--van-calendar-selected-day-color); - background: var(--van-calendar-selected-day-background-color); - border-radius: var(--van-border-radius-md); + background: var(--van-calendar-selected-day-background); + border-radius: var(--van-radius-md); } &__footer { diff --git a/packages/vant/src/card/README.md b/packages/vant/src/card/README.md index 1fffd2611..551f7fd2e 100644 --- a/packages/vant/src/card/README.md +++ b/packages/vant/src/card/README.md @@ -127,9 +127,9 @@ The component provides the following CSS variables, which can be used to customi | --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-gray-1)_ | - | +| --van-card-background | _var(--van-gray-1)_ | - | | --van-card-thumb-size | _88px_ | - | -| --van-card-thumb-border-radius | _var(--van-border-radius-lg)_ | - | +| --van-card-thumb-radius | _var(--van-radius-lg)_ | - | | --van-card-title-line-height | _16px_ | - | | --van-card-desc-color | _var(--van-gray-7)_ | - | | --van-card-desc-line-height | _var(--van-line-height-md)_ | - | @@ -139,4 +139,4 @@ The component provides the following CSS variables, which can be used to customi | --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)_ | - | +| --van-card-price-font | _var(--van-price-font)_ | - | diff --git a/packages/vant/src/card/README.zh-CN.md b/packages/vant/src/card/README.zh-CN.md index 791a72102..d625eb522 100644 --- a/packages/vant/src/card/README.zh-CN.md +++ b/packages/vant/src/card/README.zh-CN.md @@ -129,9 +129,9 @@ import type { CardProps } from 'vant'; | --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-gray-1)_ | - | +| --van-card-background | _var(--van-gray-1)_ | - | | --van-card-thumb-size | _88px_ | - | -| --van-card-thumb-border-radius | _var(--van-border-radius-lg)_ | - | +| --van-card-thumb-radius | _var(--van-radius-lg)_ | - | | --van-card-title-line-height | _16px_ | - | | --van-card-desc-color | _var(--van-gray-7)_ | - | | --van-card-desc-line-height | _var(--van-line-height-md)_ | - | @@ -141,4 +141,4 @@ import type { CardProps } from 'vant'; | --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)_ | - | +| --van-card-price-font | _var(--van-price-font)_ | - | diff --git a/packages/vant/src/card/index.less b/packages/vant/src/card/index.less index 2a38aa2e7..8ac20f897 100644 --- a/packages/vant/src/card/index.less +++ b/packages/vant/src/card/index.less @@ -2,9 +2,9 @@ --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-gray-1); + --van-card-background: var(--van-gray-1); --van-card-thumb-size: 88px; - --van-card-thumb-border-radius: var(--van-border-radius-lg); + --van-card-thumb-radius: var(--van-radius-lg); --van-card-title-line-height: 16px; --van-card-desc-color: var(--van-gray-7); --van-card-desc-line-height: var(--van-line-height-md); @@ -14,7 +14,7 @@ --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); + --van-card-price-font: var(--van-price-font); } .van-card { @@ -23,7 +23,7 @@ padding: var(--van-card-padding); color: var(--van-card-text-color); font-size: var(--van-card-font-size); - background: var(--van-card-background-color); + background: var(--van-card-background); &:not(:first-child) { margin-top: var(--van-padding-xs); @@ -41,7 +41,7 @@ margin-right: var(--van-padding-xs); img { - border-radius: var(--van-card-thumb-border-radius); + border-radius: var(--van-card-thumb-radius); } } @@ -66,7 +66,7 @@ &__title { max-height: 32px; - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); line-height: var(--van-card-title-line-height); } @@ -83,17 +83,17 @@ &__price { display: inline-block; color: var(--van-card-price-color); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); font-size: var(--van-card-price-font-size); } &__price-integer { font-size: var(--van-card-price-integer-font-size); - font-family: var(--van-card-price-font-family); + font-family: var(--van-card-price-font); } &__price-decimal { - font-family: var(--van-card-price-font-family); + font-family: var(--van-card-price-font); } &__origin-price { diff --git a/packages/vant/src/cascader/index.less b/packages/vant/src/cascader/index.less index 016f50a74..3f9263ff3 100644 --- a/packages/vant/src/cascader/index.less +++ b/packages/vant/src/cascader/index.less @@ -24,7 +24,7 @@ } &__title { - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); font-size: var(--van-cascader-title-font-size); line-height: var(--van-cascader-title-line-height); } @@ -52,7 +52,7 @@ &__tab { color: var(--van-cascader-tab-color); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); &--unselected { color: var(--van-cascader-unselected-tab-color); @@ -75,7 +75,7 @@ &--selected { color: var(--van-cascader-active-color); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); } &--disabled { diff --git a/packages/vant/src/cell-group/index.less b/packages/vant/src/cell-group/index.less index 71bf252b5..4bb0f629c 100644 --- a/packages/vant/src/cell-group/index.less +++ b/packages/vant/src/cell-group/index.less @@ -1,21 +1,21 @@ :root { - --van-cell-group-background-color: var(--van-background-color-light); + --van-cell-group-background: var(--van-background-light); --van-cell-group-title-color: var(--van-text-color-secondary); --van-cell-group-title-padding: var(--van-padding-md) var(--van-padding-md); --van-cell-group-title-font-size: var(--van-font-size-md); --van-cell-group-title-line-height: 16px; --van-cell-group-inset-padding: 0 var(--van-padding-md); - --van-cell-group-inset-border-radius: var(--van-border-radius-lg); + --van-cell-group-inset-radius: var(--van-radius-lg); --van-cell-group-inset-title-padding: var(--van-padding-md) var(--van-padding-md); } .van-cell-group { - background: var(--van-cell-group-background-color); + background: var(--van-cell-group-background); &--inset { margin: var(--van-cell-group-inset-padding); - border-radius: var(--van-cell-group-inset-border-radius); + border-radius: var(--van-cell-group-inset-radius); overflow: hidden; } diff --git a/packages/vant/src/cell/README.md b/packages/vant/src/cell/README.md index 20dd4c7f3..b544acb9b 100644 --- a/packages/vant/src/cell/README.md +++ b/packages/vant/src/cell/README.md @@ -213,7 +213,7 @@ The component provides the following CSS variables, which can be used to customi | --van-cell-vertical-padding | _10px_ | - | | --van-cell-horizontal-padding | _var(--van-padding-md)_ | - | | --van-cell-text-color | _var(--van-text-color)_ | - | -| --van-cell-background-color | _var(--van-background-color-light)_ | - | +| --van-cell-background | _var(--van-background-light)_ | - | | --van-cell-border-color | _var(--van-border-color)_ | - | | --van-cell-active-color | _var(--van-active-color)_ | - | | --van-cell-required-color | _var(--van-danger-color)_ | - | @@ -227,11 +227,11 @@ The component provides the following CSS variables, which can be used to customi | --van-cell-large-vertical-padding | _var(--van-padding-sm)_ | - | | --van-cell-large-title-font-size | _var(--van-font-size-lg)_ | - | | --van-cell-large-label-font-size | _var(--van-font-size-md)_ | - | -| --van-cell-group-background-color | _var(--van-background-color-light)_ | - | +| --van-cell-group-background | _var(--van-background-light)_ | - | | --van-cell-group-title-color | _var(--van-text-color-secondary)_ | - | | --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - | | --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - | | --van-cell-group-title-line-height | _16px_ | - | | --van-cell-group-inset-padding | _0 var(--van-padding-md)_ | - | -| --van-cell-group-inset-border-radius | _var(--van-border-radius-lg)_ | - | +| --van-cell-group-inset-radius | _var(--van-radius-lg)_ | - | | --van-cell-group-inset-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)_ | - | diff --git a/packages/vant/src/cell/README.zh-CN.md b/packages/vant/src/cell/README.zh-CN.md index 0834c77ae..c3f07011a 100644 --- a/packages/vant/src/cell/README.zh-CN.md +++ b/packages/vant/src/cell/README.zh-CN.md @@ -218,7 +218,7 @@ import type { CellProps, CellGroupProps, CellArrowDirection } from 'vant'; | --van-cell-vertical-padding | _10px_ | - | | --van-cell-horizontal-padding | _var(--van-padding-md)_ | - | | --van-cell-text-color | _var(--van-text-color)_ | - | -| --van-cell-background-color | _var(--van-background-color-light)_ | - | +| --van-cell-background | _var(--van-background-light)_ | - | | --van-cell-border-color | _var(--van-border-color)_ | - | | --van-cell-active-color | _var(--van-active-color)_ | - | | --van-cell-required-color | _var(--van-danger-color)_ | - | @@ -232,11 +232,11 @@ import type { CellProps, CellGroupProps, CellArrowDirection } from 'vant'; | --van-cell-large-vertical-padding | _var(--van-padding-sm)_ | - | | --van-cell-large-title-font-size | _var(--van-font-size-lg)_ | - | | --van-cell-large-label-font-size | _var(--van-font-size-md)_ | - | -| --van-cell-group-background-color | _var(--van-background-color-light)_ | - | +| --van-cell-group-background | _var(--van-background-light)_ | - | | --van-cell-group-title-color | _var(--van-text-color-secondary)_ | - | | --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - | | --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - | | --van-cell-group-title-line-height | _16px_ | - | | --van-cell-group-inset-padding | _0 var(--van-padding-md)_ | - | -| --van-cell-group-inset-border-radius | _var(--van-border-radius-lg)_ | - | +| --van-cell-group-inset-radius | _var(--van-radius-lg)_ | - | | --van-cell-group-inset-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)_ | - | diff --git a/packages/vant/src/cell/index.less b/packages/vant/src/cell/index.less index 99aa9ba4e..fbc24f17d 100644 --- a/packages/vant/src/cell/index.less +++ b/packages/vant/src/cell/index.less @@ -6,7 +6,7 @@ --van-cell-vertical-padding: 10px; --van-cell-horizontal-padding: var(--van-padding-md); --van-cell-text-color: var(--van-text-color); - --van-cell-background-color: var(--van-background-color-light); + --van-cell-background: var(--van-background-light); --van-cell-border-color: var(--van-border-color); --van-cell-active-color: var(--van-active-color); --van-cell-required-color: var(--van-danger-color); @@ -32,7 +32,7 @@ color: var(--van-cell-text-color); font-size: var(--van-cell-font-size); line-height: var(--van-cell-line-height); - background: var(--van-cell-background-color); + background: var(--van-cell-background); &::after { .hairline-bottom(var(--van-cell-border-color), var(--van-padding-md), var(--van-padding-md)); diff --git a/packages/vant/src/checkbox/README.md b/packages/vant/src/checkbox/README.md index 103b954dd..3f1f79304 100644 --- a/packages/vant/src/checkbox/README.md +++ b/packages/vant/src/checkbox/README.md @@ -367,10 +367,10 @@ The component provides the following CSS variables, which can be used to customi | --- | --- | --- | | --van-checkbox-size | _20px_ | - | | --van-checkbox-border-color | _var(--van-gray-5)_ | - | -| --van-checkbox-transition-duration | _var(--van-animation-duration-fast)_ | - | +| --van-checkbox-duration | _var(--van-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-primary-color)_ | - | | --van-checkbox-disabled-icon-color | _var(--van-gray-5)_ | - | | --van-checkbox-disabled-label-color | _var(--van-text-color-tertiary)_ | - | -| --van-checkbox-disabled-background-color | _var(--van-border-color)_ | - | +| --van-checkbox-disabled-background | _var(--van-border-color)_ | - | diff --git a/packages/vant/src/checkbox/README.zh-CN.md b/packages/vant/src/checkbox/README.zh-CN.md index 6e4e0305e..1ed50cb21 100644 --- a/packages/vant/src/checkbox/README.zh-CN.md +++ b/packages/vant/src/checkbox/README.zh-CN.md @@ -385,10 +385,10 @@ checkboxGroupRef.value?.toggleAll(); | --- | --- | --- | | --van-checkbox-size | _20px_ | - | | --van-checkbox-border-color | _var(--van-gray-5)_ | - | -| --van-checkbox-transition-duration | _var(--van-animation-duration-fast)_ | - | +| --van-checkbox-duration | _var(--van-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-primary-color)_ | - | | --van-checkbox-disabled-icon-color | _var(--van-gray-5)_ | - | | --van-checkbox-disabled-label-color | _var(--van-text-color-tertiary)_ | - | -| --van-checkbox-disabled-background-color | _var(--van-border-color)_ | - | +| --van-checkbox-disabled-background | _var(--van-border-color)_ | - | diff --git a/packages/vant/src/checkbox/index.less b/packages/vant/src/checkbox/index.less index 0e2d7063d..f9ceecea1 100644 --- a/packages/vant/src/checkbox/index.less +++ b/packages/vant/src/checkbox/index.less @@ -1,13 +1,13 @@ :root { --van-checkbox-size: 20px; --van-checkbox-border-color: var(--van-gray-5); - --van-checkbox-transition-duration: var(--van-animation-duration-fast); + --van-checkbox-duration: var(--van-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-primary-color); --van-checkbox-disabled-icon-color: var(--van-gray-5); --van-checkbox-disabled-label-color: var(--van-text-color-tertiary); - --van-checkbox-disabled-background-color: var(--van-border-color); + --van-checkbox-disabled-background: var(--van-border-color); } .van-checkbox { @@ -46,7 +46,7 @@ line-height: 1.25; text-align: center; border: 1px solid var(--van-checkbox-border-color); - transition-duration: var(--van-checkbox-transition-duration); + transition-duration: var(--van-checkbox-duration); transition-property: color, border-color, background-color; } @@ -68,7 +68,7 @@ cursor: not-allowed; .van-icon { - background-color: var(--van-checkbox-disabled-background-color); + background-color: var(--van-checkbox-disabled-background); border-color: var(--van-checkbox-disabled-icon-color); } } diff --git a/packages/vant/src/circle/README.md b/packages/vant/src/circle/README.md index 85bb3bc79..d08292eef 100644 --- a/packages/vant/src/circle/README.md +++ b/packages/vant/src/circle/README.md @@ -181,12 +181,12 @@ import type { CircleProps, CircleStartPosition } from 'vant'; The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). -| Name | Default Value | Description | -| ----------------------------- | ----------------------------- | ----------- | -| --van-circle-size | _100px_ | - | -| --van-circle-color | _var(--van-primary-color)_ | - | -| --van-circle-layer-color | _var(--van-white)_ | - | -| --van-circle-text-color | _var(--van-text-color)_ | - | -| --van-circle-text-font-weight | _var(--van-font-weight-bold)_ | - | -| --van-circle-text-font-size | _var(--van-font-size-md)_ | - | -| --van-circle-text-line-height | _var(--van-line-height-md)_ | - | +| Name | Default Value | Description | +| ----------------------------- | --------------------------- | ----------- | +| --van-circle-size | _100px_ | - | +| --van-circle-color | _var(--van-primary-color)_ | - | +| --van-circle-layer-color | _var(--van-white)_ | - | +| --van-circle-text-color | _var(--van-text-color)_ | - | +| --van-circle-text-font-weight | _var(--van-font-bold)_ | - | +| --van-circle-text-font-size | _var(--van-font-size-md)_ | - | +| --van-circle-text-line-height | _var(--van-line-height-md)_ | - | diff --git a/packages/vant/src/circle/README.zh-CN.md b/packages/vant/src/circle/README.zh-CN.md index a47a344a2..ab955a55c 100644 --- a/packages/vant/src/circle/README.zh-CN.md +++ b/packages/vant/src/circle/README.zh-CN.md @@ -195,12 +195,12 @@ import type { CircleProps, CircleStartPosition } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ----------------------------- | ----------------------------- | ---- | -| --van-circle-size | _100px_ | - | -| --van-circle-color | _var(--van-primary-color)_ | - | -| --van-circle-layer-color | _var(--van-white)_ | - | -| --van-circle-text-color | _var(--van-text-color)_ | - | -| --van-circle-text-font-weight | _var(--van-font-weight-bold)_ | - | -| --van-circle-text-font-size | _var(--van-font-size-md)_ | - | -| --van-circle-text-line-height | _var(--van-line-height-md)_ | - | +| 名称 | 默认值 | 描述 | +| ----------------------------- | --------------------------- | ---- | +| --van-circle-size | _100px_ | - | +| --van-circle-color | _var(--van-primary-color)_ | - | +| --van-circle-layer-color | _var(--van-white)_ | - | +| --van-circle-text-color | _var(--van-text-color)_ | - | +| --van-circle-text-font-weight | _var(--van-font-bold)_ | - | +| --van-circle-text-font-size | _var(--van-font-size-md)_ | - | +| --van-circle-text-line-height | _var(--van-line-height-md)_ | - | diff --git a/packages/vant/src/circle/index.less b/packages/vant/src/circle/index.less index 2a80d1afb..503d5f484 100644 --- a/packages/vant/src/circle/index.less +++ b/packages/vant/src/circle/index.less @@ -3,7 +3,7 @@ --van-circle-color: var(--van-primary-color); --van-circle-layer-color: var(--van-white); --van-circle-text-color: var(--van-text-color); - --van-circle-text-font-weight: var(--van-font-weight-bold); + --van-circle-text-font-weight: var(--van-font-bold); --van-circle-text-font-size: var(--van-font-size-md); --van-circle-text-line-height: var(--van-line-height-md); } diff --git a/packages/vant/src/collapse-item/index.less b/packages/vant/src/collapse-item/index.less index b6de65a57..f0e5e96ab 100644 --- a/packages/vant/src/collapse-item/index.less +++ b/packages/vant/src/collapse-item/index.less @@ -1,15 +1,13 @@ @import '../style/mixins/hairline'; :root { - --van-collapse-item-transition-duration: var(--van-animation-duration-base); + --van-collapse-item-duration: var(--van-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: var(--van-text-color-secondary); - --van-collapse-item-content-background-color: var( - --van-background-color-light - ); + --van-collapse-item-content-background: var(--van-background-light); --van-collapse-item-title-disabled-color: var(--van-text-color-tertiary); } @@ -27,7 +25,7 @@ // using translateZ to fix safari rendering issues // see: https://github.com/youzan/vant/issues/8608 transform: rotate(90deg) translateZ(0); - transition: transform var(--van-collapse-item-transition-duration); + transition: transform var(--van-collapse-item-duration); } &::after { @@ -63,7 +61,7 @@ &__wrapper { overflow: hidden; - transition: height var(--van-collapse-item-transition-duration) ease-in-out; + transition: height var(--van-collapse-item-duration) ease-in-out; will-change: height; } @@ -72,6 +70,6 @@ color: var(--van-collapse-item-content-text-color); font-size: var(--van-collapse-item-content-font-size); line-height: var(--van-collapse-item-content-line-height); - background: var(--van-collapse-item-content-background-color); + background: var(--van-collapse-item-content-background); } } diff --git a/packages/vant/src/collapse/README.md b/packages/vant/src/collapse/README.md index bab9fed02..14e7fbbe5 100644 --- a/packages/vant/src/collapse/README.md +++ b/packages/vant/src/collapse/README.md @@ -192,10 +192,10 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-collapse-item-transition-duration | _var(--van-animation-duration-base)_ | - | +| --van-collapse-item-duration | _var(--van-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 | _var(--van-text-color-secondary)_ | - | -| --van-collapse-item-content-background-color | _var(--van-background-color-light)_ | - | +| --van-collapse-item-content-background | _var(--van-background-light)_ | - | | --van-collapse-item-title-disabled-color | _var(--van-text-color-tertiary)_ | - | diff --git a/packages/vant/src/collapse/README.zh-CN.md b/packages/vant/src/collapse/README.zh-CN.md index 680d2d97b..75fb07ddf 100644 --- a/packages/vant/src/collapse/README.zh-CN.md +++ b/packages/vant/src/collapse/README.zh-CN.md @@ -190,10 +190,10 @@ collapseItemRef.value?.toggle(); | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-collapse-item-transition-duration | _var(--van-animation-duration-base)_ | - | +| --van-collapse-item-duration | _var(--van-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 | _var(--van-text-color-secondary)_ | - | -| --van-collapse-item-content-background-color | _var(--van-background-color-light)_ | - | +| --van-collapse-item-content-background | _var(--van-background-light)_ | - | | --van-collapse-item-title-disabled-color | _var(--van-text-color-tertiary)_ | - | diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md index a6a4bb053..f56d2c487 100644 --- a/packages/vant/src/config-provider/README.md +++ b/packages/vant/src/config-provider/README.md @@ -29,7 +29,7 @@ Looking at the style of the Button component, you can see that the following var ```css .van-button--primary { color: var(--van-button-primary-color); - background-color: var(--van-button-primary-background-color); + background-color: var(--van-button-primary-background); } ``` @@ -40,7 +40,7 @@ The default values of these variables are defined on the `root` node: --van-white: #fff; --van-blue: #1989fa; --van-button-primary-color: var(--van-white); - --van-button-primary-background-color: var(--van-primary-color); + --van-button-primary-background: var(--van-primary-color); } ``` @@ -53,7 +53,7 @@ You can directly override these CSS variables in the code, and the style of the ```css /* the Primary Button will turn red */ :root { - --van-button-primary-background-color: red; + --van-button-primary-background: red; } ``` @@ -158,12 +158,12 @@ There are all **Basic Variables** below, for component CSS Variables, please ref --van-text-color: var(--van-gray-8); --van-text-color-secondary: var(--van-gray-6); --van-text-color-tertiary: var(--van-gray-5); ---van-text-link-color: #576b95; +--van-link-color: #576b95; --van-active-color: var(--van-gray-2); --van-active-opacity: 0.6; --van-disabled-opacity: 0.5; ---van-background-color: var(--van-gray-1); ---van-background-color-light: var(--van-white); +--van-background: var(--van-gray-1); +--van-background-light: var(--van-white); // Padding --van-padding-base: 4px; @@ -178,30 +178,29 @@ There are all **Basic Variables** below, for component CSS Variables, please ref --van-font-size-sm: 12px; --van-font-size-md: 14px; --van-font-size-lg: 16px; ---van-font-weight-bold: 500; +--van-font-bold: 500; --van-line-height-xs: 14px; --van-line-height-sm: 18px; --van-line-height-md: 20px; --van-line-height-lg: 22px; ---van-base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', - Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', - 'Microsoft Yahei', sans-serif; ---van-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, - Arial, sans-serif; +--van-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, + Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', + sans-serif; +--van-price-font: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif; // Animation ---van-animation-duration-base: 0.3s; ---van-animation-duration-fast: 0.2s; ---van-animation-timing-function-enter: ease-out; ---van-animation-timing-function-leave: ease-in; +--van-duration-base: 0.3s; +--van-duration-fast: 0.2s; +--van-ease-out: ease-out; +--van-ease-in: ease-in; // Border --van-border-color: var(--van-gray-3); ---van-border-width-base: 1px; ---van-border-radius-sm: 2px; ---van-border-radius-md: 4px; ---van-border-radius-lg: 8px; ---van-border-radius-max: 999px; +--van-border-width: 1px; +--van-radius-sm: 2px; +--van-radius-md: 4px; +--van-radius-lg: 8px; +--van-radius-max: 999px; ``` ## API diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md index e72ed3d6e..53df49760 100644 --- a/packages/vant/src/config-provider/README.zh-CN.md +++ b/packages/vant/src/config-provider/README.zh-CN.md @@ -29,7 +29,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs ```css .van-button--primary { color: var(--van-button-primary-color); - background-color: var(--van-button-primary-background-color); + background-color: var(--van-button-primary-background); } ``` @@ -40,7 +40,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs --van-white: #fff; --van-blue: #1989fa; --van-button-primary-color: var(--van-white); - --van-button-primary-background-color: var(--van-primary-color); + --van-button-primary-background: var(--van-primary-color); } ``` @@ -53,7 +53,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs ```css /* 添加这段样式后，Primary Button 会变成红色 */ :root { - --van-button-primary-background-color: red; + --van-button-primary-background: red; } ``` @@ -160,12 +160,12 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变 --van-text-color: var(--van-gray-8); --van-text-color-secondary: var(--van-gray-6); --van-text-color-tertiary: var(--van-gray-5); ---van-text-link-color: #576b95; +--van-link-color: #576b95; --van-active-color: var(--van-gray-2); --van-active-opacity: 0.6; --van-disabled-opacity: 0.5; ---van-background-color: var(--van-gray-1); ---van-background-color-light: var(--van-white); +--van-background: var(--van-gray-1); +--van-background-light: var(--van-white); // Padding --van-padding-base: 4px; @@ -180,30 +180,29 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变 --van-font-size-sm: 12px; --van-font-size-md: 14px; --van-font-size-lg: 16px; ---van-font-weight-bold: 500; +--van-font-bold: 500; --van-line-height-xs: 14px; --van-line-height-sm: 18px; --van-line-height-md: 20px; --van-line-height-lg: 22px; ---van-base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', - Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', - 'Microsoft Yahei', sans-serif; ---van-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, - Arial, sans-serif; +--van-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, + Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', + sans-serif; +--van-price-font: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif; // Animation ---van-animation-duration-base: 0.3s; ---van-animation-duration-fast: 0.2s; ---van-animation-timing-function-enter: ease-out; ---van-animation-timing-function-leave: ease-in; +--van-duration-base: 0.3s; +--van-duration-fast: 0.2s; +--van-ease-out: ease-out; +--van-ease-in: ease-in; // Border --van-border-color: var(--van-gray-3); ---van-border-width-base: 1px; ---van-border-radius-sm: 2px; ---van-border-radius-md: 4px; ---van-border-radius-lg: 8px; ---van-border-radius-max: 999px; +--van-border-width: 1px; +--van-radius-sm: 2px; +--van-radius-md: 4px; +--van-radius-lg: 8px; +--van-radius-max: 999px; ``` 你可以在各个组件文档底部的表格中查看组件变量。 diff --git a/packages/vant/src/contact-edit/README.md b/packages/vant/src/contact-edit/README.md index f0571c6d7..17a0c2f2f 100644 --- a/packages/vant/src/contact-edit/README.md +++ b/packages/vant/src/contact-edit/README.md @@ -94,7 +94,7 @@ The component provides the following CSS variables, which can be used to customi | 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-fields-radius | _var(--van-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 | _var(--van-font-size-lg)_ | - | diff --git a/packages/vant/src/contact-edit/README.zh-CN.md b/packages/vant/src/contact-edit/README.zh-CN.md index 6b19dcf7b..713e80750 100644 --- a/packages/vant/src/contact-edit/README.zh-CN.md +++ b/packages/vant/src/contact-edit/README.zh-CN.md @@ -91,11 +91,11 @@ import type { ContactEditInfo, ContactEditProps } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --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 | _var(--van-font-size-lg)_ | - | -| --van-contact-edit-field-label-width | _4.1em_ | - | +| 名称 | 默认值 | 描述 | +| --------------------------------------- | ------------------------- | ---- | +| --van-contact-edit-padding | _var(--van-padding-md)_ | - | +| --van-contact-edit-fields-radius | _var(--van-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 | _var(--van-font-size-lg)_ | - | +| --van-contact-edit-field-label-width | _4.1em_ | - | diff --git a/packages/vant/src/contact-edit/index.less b/packages/vant/src/contact-edit/index.less index 6a83f9f4c..fc384f9fe 100644 --- a/packages/vant/src/contact-edit/index.less +++ b/packages/vant/src/contact-edit/index.less @@ -1,6 +1,6 @@ :root { --van-contact-edit-padding: var(--van-padding-md); - --van-contact-edit-fields-radius: var(--van-border-radius-md); + --van-contact-edit-fields-radius: var(--van-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: var(--van-font-size-lg); diff --git a/packages/vant/src/contact-list/index.less b/packages/vant/src/contact-list/index.less index d8ef8b939..c6d567dc4 100644 --- a/packages/vant/src/contact-list/index.less +++ b/packages/vant/src/contact-list/index.less @@ -55,7 +55,7 @@ z-index: var(--van-contact-list-add-button-z-index); padding-left: var(--van-padding-md); padding-right: var(--van-padding-md); - background-color: var(--van-background-color-light); + background-color: var(--van-background-light); } &__add { diff --git a/packages/vant/src/coupon-list/README.md b/packages/vant/src/coupon-list/README.md index 092fd4685..7269a73ba 100644 --- a/packages/vant/src/coupon-list/README.md +++ b/packages/vant/src/coupon-list/README.md @@ -169,10 +169,10 @@ The component provides the following CSS variables, which can be used to customi | --van-coupon-content-height | _84px_ | - | | --van-coupon-content-padding | _14px 0_ | - | | --van-coupon-content-text-color | _var(--van-text-color)_ | - | -| --van-coupon-background-color | _var(--van-background-color-light)_ | - | -| --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-background | _var(--van-background-light)_ | - | +| --van-coupon-active-background | _var(--van-active-color)_ | - | +| --van-coupon-radius | _var(--van-radius-lg)_ | - | +| --van-coupon-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - | | --van-coupon-head-width | _96px_ | - | | --van-coupon-amount-color | _var(--van-danger-color)_ | - | | --van-coupon-amount-font-size | _30px_ | - | @@ -182,7 +182,7 @@ The component provides the following CSS variables, which can be used to customi | --van-coupon-description-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - | | --van-coupon-description-border-color | _var(--van-border-color)_ | - | | --van-coupon-corner-checkbox-icon-color | _var(--van-danger-color)_ | - | -| --van-coupon-list-background-color | _var(--van-background-color)_ | - | +| --van-coupon-list-background | _var(--van-background)_ | - | | --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_ | - | diff --git a/packages/vant/src/coupon-list/README.zh-CN.md b/packages/vant/src/coupon-list/README.zh-CN.md index ce256eeb9..e0de06222 100644 --- a/packages/vant/src/coupon-list/README.zh-CN.md +++ b/packages/vant/src/coupon-list/README.zh-CN.md @@ -171,10 +171,10 @@ import type { CouponCellProps, CouponListProps } from 'vant'; | --van-coupon-content-height | _84px_ | - | | --van-coupon-content-padding | _14px 0_ | - | | --van-coupon-content-text-color | _var(--van-text-color)_ | - | -| --van-coupon-background-color | _var(--van-background-color-light)_ | - | -| --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-background | _var(--van-background-light)_ | - | +| --van-coupon-active-background | _var(--van-active-color)_ | - | +| --van-coupon-radius | _var(--van-radius-lg)_ | - | +| --van-coupon-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - | | --van-coupon-head-width | _96px_ | - | | --van-coupon-amount-color | _var(--van-danger-color)_ | - | | --van-coupon-amount-font-size | _30px_ | - | @@ -184,7 +184,7 @@ import type { CouponCellProps, CouponListProps } from 'vant'; | --van-coupon-description-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - | | --van-coupon-description-border-color | _var(--van-border-color)_ | - | | --van-coupon-corner-checkbox-icon-color | _var(--van-danger-color)_ | - | -| --van-coupon-list-background-color | _var(--van-background-color)_ | - | +| --van-coupon-list-background | _var(--van-background)_ | - | | --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_ | - | diff --git a/packages/vant/src/coupon-list/index.less b/packages/vant/src/coupon-list/index.less index c789a6678..6d43b9717 100644 --- a/packages/vant/src/coupon-list/index.less +++ b/packages/vant/src/coupon-list/index.less @@ -1,5 +1,5 @@ :root { - --van-coupon-list-background-color: var(--van-background-color); + --van-coupon-list-background: var(--van-background); --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; @@ -12,7 +12,7 @@ .van-coupon-list { position: relative; height: 100%; - background: var(--van-coupon-list-background-color); + background: var(--van-coupon-list-background); &__field { padding: var(--van-coupon-list-field-padding); @@ -37,7 +37,7 @@ &__exchange-bar { display: flex; align-items: center; - background-color: var(--van-background-color-light); + background-color: var(--van-background-light); } &__exchange { @@ -76,8 +76,8 @@ box-sizing: border-box; width: 100%; padding: 5px var(--van-padding-md); - font-weight: var(--van-font-weight-bold); - background-color: var(--van-background-color-light); + font-weight: var(--van-font-bold); + background-color: var(--van-background-light); } &__close { diff --git a/packages/vant/src/coupon/index.less b/packages/vant/src/coupon/index.less index b00f0aaca..c3e7b3347 100644 --- a/packages/vant/src/coupon/index.less +++ b/packages/vant/src/coupon/index.less @@ -5,10 +5,10 @@ --van-coupon-content-height: 84px; --van-coupon-content-padding: 14px 0; --van-coupon-content-text-color: var(--van-text-color); - --van-coupon-background-color: var(--van-background-color-light); - --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-background: var(--van-background-light); + --van-coupon-active-background: var(--van-active-color); + --van-coupon-radius: var(--van-radius-lg); + --van-coupon-shadow: 0 0 4px rgba(0, 0, 0, 0.1); --van-coupon-head-width: 96px; --van-coupon-amount-color: var(--van-danger-color); --van-coupon-amount-font-size: 30px; @@ -23,12 +23,12 @@ .van-coupon { margin: var(--van-coupon-margin); overflow: hidden; - background: var(--van-coupon-background-color); - border-radius: var(--van-coupon-border-radius); - box-shadow: var(--van-coupon-box-shadow); + background: var(--van-coupon-background); + border-radius: var(--van-coupon-radius); + box-shadow: var(--van-coupon-shadow); &:active { - background-color: var(--van-coupon-active-background-color); + background-color: var(--van-coupon-active-background); } &__content { @@ -57,7 +57,7 @@ &__amount { margin-bottom: 6px; - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); font-size: var(--van-coupon-amount-font-size); .ellipsis(); @@ -80,8 +80,7 @@ &__body { position: relative; flex: 1; - border-radius: 0 var(--van-coupon-border-radius) - var(--van-coupon-border-radius) 0; + border-radius: 0 var(--van-coupon-radius) var(--van-coupon-radius) 0; } &__name { @@ -115,7 +114,7 @@ &--disabled { &:active { - background-color: var(--van-coupon-background-color); + background-color: var(--van-coupon-background); } .van-coupon-item__content { diff --git a/packages/vant/src/dialog/README.md b/packages/vant/src/dialog/README.md index 2caec7b5a..c5c7cec7d 100644 --- a/packages/vant/src/dialog/README.md +++ b/packages/vant/src/dialog/README.md @@ -239,10 +239,10 @@ 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 | _var(--van-font-size-lg)_ | - | -| --van-dialog-transition | _var(--van-animation-duration-base)_ | - | -| --van-dialog-border-radius | _16px_ | - | -| --van-dialog-background-color | _var(--van-background-color-light)_ | - | -| --van-dialog-header-font-weight | _var(--van-font-weight-bold)_ | - | +| --van-dialog-transition | _var(--van-duration-base)_ | - | +| --van-dialog-radius | _16px_ | - | +| --van-dialog-background | _var(--van-background-light)_ | - | +| --van-dialog-header-font-weight | _var(--van-font-bold)_ | - | | --van-dialog-header-line-height | _24px_ | - | | --van-dialog-header-padding-top | _26px_ | - | | --van-dialog-header-isolated-padding | _var(--van-padding-lg) 0_ | - | diff --git a/packages/vant/src/dialog/README.zh-CN.md b/packages/vant/src/dialog/README.zh-CN.md index 8cb80eadd..cc57a1e0f 100644 --- a/packages/vant/src/dialog/README.zh-CN.md +++ b/packages/vant/src/dialog/README.zh-CN.md @@ -289,10 +289,10 @@ import type { | --van-dialog-width | _320px_ | - | | --van-dialog-small-screen-width | _90%_ | - | | --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 | _var(--van-background-color-light)_ | - | -| --van-dialog-header-font-weight | _var(--van-font-weight-bold)_ | - | +| --van-dialog-transition | _var(--van-duration-base)_ | - | +| --van-dialog-radius | _16px_ | - | +| --van-dialog-background | _var(--van-background-light)_ | - | +| --van-dialog-header-font-weight | _var(--van-font-bold)_ | - | | --van-dialog-header-line-height | _24px_ | - | | --van-dialog-header-padding-top | _26px_ | - | | --van-dialog-header-isolated-padding | _var(--van-padding-lg) 0_ | - | diff --git a/packages/vant/src/dialog/index.less b/packages/vant/src/dialog/index.less index dd85701c8..1d00632a8 100644 --- a/packages/vant/src/dialog/index.less +++ b/packages/vant/src/dialog/index.less @@ -2,10 +2,10 @@ --van-dialog-width: 320px; --van-dialog-small-screen-width: 90%; --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: var(--van-background-color-light); - --van-dialog-header-font-weight: var(--van-font-weight-bold); + --van-dialog-transition: var(--van-duration-base); + --van-dialog-radius: 16px; + --van-dialog-background: var(--van-background-light); + --van-dialog-header-font-weight: var(--van-font-bold); --van-dialog-header-line-height: 24px; --van-dialog-header-padding-top: 26px; --van-dialog-header-isolated-padding: var(--van-padding-lg) 0; @@ -26,8 +26,8 @@ width: var(--van-dialog-width); overflow: hidden; font-size: var(--van-dialog-font-size); - background: var(--van-dialog-background-color); - border-radius: var(--van-dialog-border-radius); + background: var(--van-dialog-background); + border-radius: var(--van-dialog-radius); backface-visibility: hidden; // avoid blurry text after scale animation transition: var(--van-dialog-transition); transition-property: transform, opacity; diff --git a/packages/vant/src/divider/index.less b/packages/vant/src/divider/index.less index 9237d652e..219b7bd8c 100644 --- a/packages/vant/src/divider/index.less +++ b/packages/vant/src/divider/index.less @@ -28,7 +28,7 @@ height: 1px; border-color: inherit; border-style: inherit; - border-width: var(--van-border-width-base) 0 0; + border-width: var(--van-border-width) 0 0; } &::before { diff --git a/packages/vant/src/dropdown-menu/README.md b/packages/vant/src/dropdown-menu/README.md index 10d9e23dd..2029b7267 100644 --- a/packages/vant/src/dropdown-menu/README.md +++ b/packages/vant/src/dropdown-menu/README.md @@ -233,8 +233,8 @@ 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 | _var(--van-background-color-light)_ | - | -| --van-dropdown-menu-box-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - | +| --van-dropdown-menu-background | _var(--van-background-light)_ | - | +| --van-dropdown-menu-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - | | --van-dropdown-menu-title-font-size | _15px_ | - | | --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - | | --van-dropdown-menu-title-active-text-color | _var(--van-danger-color)_ | - | diff --git a/packages/vant/src/dropdown-menu/README.zh-CN.md b/packages/vant/src/dropdown-menu/README.zh-CN.md index d2c14a1c4..880cb670f 100644 --- a/packages/vant/src/dropdown-menu/README.zh-CN.md +++ b/packages/vant/src/dropdown-menu/README.zh-CN.md @@ -237,8 +237,8 @@ dropdownItemRef.value?.toggle(); | 名称 | 默认值 | 描述 | | --- | --- | --- | | --van-dropdown-menu-height | _48px_ | - | -| --van-dropdown-menu-background-color | _var(--van-background-color-light)_ | - | -| --van-dropdown-menu-box-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - | +| --van-dropdown-menu-background | _var(--van-background-light)_ | - | +| --van-dropdown-menu-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - | | --van-dropdown-menu-title-font-size | _15px_ | - | | --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - | | --van-dropdown-menu-title-active-text-color | _var(--van-danger-color)_ | - | diff --git a/packages/vant/src/dropdown-menu/index.less b/packages/vant/src/dropdown-menu/index.less index 7c270124b..b6ca0b3e3 100644 --- a/packages/vant/src/dropdown-menu/index.less +++ b/packages/vant/src/dropdown-menu/index.less @@ -1,7 +1,7 @@ :root { --van-dropdown-menu-height: 48px; - --van-dropdown-menu-background-color: var(--van-background-color-light); - --van-dropdown-menu-box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12); + --van-dropdown-menu-background: var(--van-background-light); + --van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12); --van-dropdown-menu-title-font-size: 15px; --van-dropdown-menu-title-text-color: var(--van-text-color); --van-dropdown-menu-title-active-text-color: var(--van-danger-color); @@ -21,8 +21,8 @@ position: relative; display: flex; height: var(--van-dropdown-menu-height); - background: var(--van-dropdown-menu-background-color); - box-shadow: var(--van-dropdown-menu-box-shadow); + background: var(--van-dropdown-menu-background); + box-shadow: var(--van-dropdown-menu-shadow); &--opened { z-index: calc(var(--van-dropdown-item-z-index) + 1); diff --git a/packages/vant/src/grid-item/index.less b/packages/vant/src/grid-item/index.less index a14593a7d..08727b405 100644 --- a/packages/vant/src/grid-item/index.less +++ b/packages/vant/src/grid-item/index.less @@ -1,6 +1,6 @@ :root { --van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs); - --van-grid-item-content-background-color: var(--van-background-color-light); + --van-grid-item-content-background: var(--van-background-light); --van-grid-item-content-active-color: var(--van-active-color); --van-grid-item-icon-size: 28px; --van-grid-item-text-color: var(--van-gray-7); @@ -37,12 +37,11 @@ box-sizing: border-box; height: 100%; padding: var(--van-grid-item-content-padding); - background: var(--van-grid-item-content-background-color); + background: var(--van-grid-item-content-background); &::after { z-index: 1; - border-width: 0 var(--van-border-width-base) var(--van-border-width-base) - 0; + border-width: 0 var(--van-border-width) var(--van-border-width) 0; } &--square { @@ -83,7 +82,7 @@ &--surround { &::after { - border-width: var(--van-border-width-base); + border-width: var(--van-border-width); } } diff --git a/packages/vant/src/grid/README.md b/packages/vant/src/grid/README.md index 7ae014218..616545ed0 100644 --- a/packages/vant/src/grid/README.md +++ b/packages/vant/src/grid/README.md @@ -159,7 +159,7 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-grid-item-content-padding | _var(--van-padding-md) var(--van-padding-xs)_ | - | -| --van-grid-item-content-background-color | _var(--van-background-color-light)_ | - | +| --van-grid-item-content-background | _var(--van-background-light)_ | - | | --van-grid-item-content-active-color | _var(--van-active-color)_ | - | | --van-grid-item-icon-size | _28px_ | - | | --van-grid-item-text-color | _var(--van-gray-7)_ | - | diff --git a/packages/vant/src/grid/README.zh-CN.md b/packages/vant/src/grid/README.zh-CN.md index 206e53140..2063cdfa5 100644 --- a/packages/vant/src/grid/README.zh-CN.md +++ b/packages/vant/src/grid/README.zh-CN.md @@ -175,7 +175,7 @@ import type { GridProps, GridDirection, GridItemProps } from 'vant'; | 名称 | 默认值 | 描述 | | --- | --- | --- | | --van-grid-item-content-padding | _var(--van-padding-md) var(--van-padding-xs)_ | - | -| --van-grid-item-content-background-color | _var(--van-background-color-light)_ | - | +| --van-grid-item-content-background | _var(--van-background-light)_ | - | | --van-grid-item-content-active-color | _var(--van-active-color)_ | - | | --van-grid-item-icon-size | _28px_ | - | | --van-grid-item-text-color | _var(--van-gray-7)_ | - | diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md index ea9519612..be0121439 100644 --- a/packages/vant/src/image-preview/README.md +++ b/packages/vant/src/image-preview/README.md @@ -242,7 +242,7 @@ The component provides the following CSS variables, which can be used to customi | --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 var(--van-gray-8)_ | - | -| --van-image-preview-overlay-background-color | _rgba(0, 0, 0, 0.9)_ | - | +| --van-image-preview-overlay-background | _rgba(0, 0, 0, 0.9)_ | - | | --van-image-preview-close-icon-size | _22px_ | - | | --van-image-preview-close-icon-color | _var(--van-gray-5)_ | - | | --van-image-preview-close-icon-margin | _var(--van-padding-md)_ | - | diff --git a/packages/vant/src/image-preview/README.zh-CN.md b/packages/vant/src/image-preview/README.zh-CN.md index 4036e471e..8bc1c6c2a 100644 --- a/packages/vant/src/image-preview/README.zh-CN.md +++ b/packages/vant/src/image-preview/README.zh-CN.md @@ -294,7 +294,7 @@ imagePreviewRef.value?.swipeTo(1); | --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 var(--van-gray-8)_ | - | -| --van-image-preview-overlay-background-color | _rgba(0, 0, 0, 0.9)_ | - | +| --van-image-preview-overlay-background | _rgba(0, 0, 0, 0.9)_ | - | | --van-image-preview-close-icon-size | _22px_ | - | | --van-image-preview-close-icon-color | _var(--van-gray-5)_ | - | | --van-image-preview-close-icon-margin | _var(--van-padding-md)_ | - | diff --git a/packages/vant/src/image-preview/index.less b/packages/vant/src/image-preview/index.less index 71b4cfacd..a5d3095e5 100644 --- a/packages/vant/src/image-preview/index.less +++ b/packages/vant/src/image-preview/index.less @@ -3,7 +3,7 @@ --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 var(--van-gray-8); - --van-image-preview-overlay-background-color: rgba(0, 0, 0, 0.9); + --van-image-preview-overlay-background: rgba(0, 0, 0, 0.9); --van-image-preview-close-icon-size: 22px; --van-image-preview-close-icon-color: var(--van-gray-5); --van-image-preview-close-icon-margin: var(--van-padding-md); @@ -78,7 +78,7 @@ } &__overlay { - background: var(--van-image-preview-overlay-background-color); + background: var(--van-image-preview-overlay-background); } &__close-icon { diff --git a/packages/vant/src/image/README.md b/packages/vant/src/image/README.md index fdab09b72..82bbc4103 100644 --- a/packages/vant/src/image/README.md +++ b/packages/vant/src/image/README.md @@ -132,7 +132,7 @@ The component provides the following CSS variables, which can be used to customi | --- | --- | --- | | --van-image-placeholder-text-color | _var(--van-text-color-secondary)_ | - | | --van-image-placeholder-font-size | _var(--van-font-size-md)_ | - | -| --van-image-placeholder-background-color | _var(--van-background-color)_ | - | +| --van-image-placeholder-background | _var(--van-background)_ | - | | --van-image-loading-icon-size | _32px_ | - | | --van-image-loading-icon-color | _var(--van-gray-4)_ | - | | --van-image-error-icon-size | _32px_ | - | diff --git a/packages/vant/src/image/README.zh-CN.md b/packages/vant/src/image/README.zh-CN.md index e5432cd97..db6084ea0 100644 --- a/packages/vant/src/image/README.zh-CN.md +++ b/packages/vant/src/image/README.zh-CN.md @@ -160,7 +160,7 @@ import type { ImageFit, ImageProps } from 'vant'; | --- | --- | --- | | --van-image-placeholder-text-color | _var(--van-text-color-secondary)_ | - | | --van-image-placeholder-font-size | _var(--van-font-size-md)_ | - | -| --van-image-placeholder-background-color | _var(--van-background-color)_ | - | +| --van-image-placeholder-background | _var(--van-background)_ | - | | --van-image-loading-icon-size | _32px_ | - | | --van-image-loading-icon-color | _var(--van-gray-4)_ | - | | --van-image-error-icon-size | _32px_ | - | diff --git a/packages/vant/src/image/index.less b/packages/vant/src/image/index.less index 29b6f9895..eb98e8962 100644 --- a/packages/vant/src/image/index.less +++ b/packages/vant/src/image/index.less @@ -1,7 +1,7 @@ :root { --van-image-placeholder-text-color: var(--van-text-color-secondary); --van-image-placeholder-font-size: var(--van-font-size-md); - --van-image-placeholder-background-color: var(--van-background-color); + --van-image-placeholder-background: var(--van-background); --van-image-loading-icon-size: 32px; --van-image-loading-icon-color: var(--van-gray-4); --van-image-error-icon-size: 32px; @@ -14,7 +14,7 @@ &--round { overflow: hidden; - border-radius: var(--van-border-radius-max); + border-radius: var(--van-radius-max); .van-image__img { border-radius: inherit; @@ -40,7 +40,7 @@ justify-content: center; color: var(--van-image-placeholder-text-color); font-size: var(--van-image-placeholder-font-size); - background: var(--van-image-placeholder-background-color); + background: var(--van-image-placeholder-background); } &__loading-icon { diff --git a/packages/vant/src/index-anchor/index.less b/packages/vant/src/index-anchor/index.less index ada176de8..0a41f3501 100644 --- a/packages/vant/src/index-anchor/index.less +++ b/packages/vant/src/index-anchor/index.less @@ -2,12 +2,12 @@ --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-weight: var(--van-font-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-background: transparent; --van-index-anchor-sticky-text-color: var(--van-danger-color); - --van-index-anchor-sticky-background-color: var(--van-background-color-light); + --van-index-anchor-sticky-background: var(--van-background-light); } .van-index-anchor { @@ -18,7 +18,7 @@ font-weight: var(--van-index-anchor-font-weight); font-size: var(--van-index-anchor-font-size); line-height: var(--van-index-anchor-line-height); - background: var(--van-index-anchor-background-color); + background: var(--van-index-anchor-background); &--sticky { position: fixed; @@ -26,6 +26,6 @@ right: 0; left: 0; color: var(--van-index-anchor-sticky-text-color); - background: var(--van-index-anchor-sticky-background-color); + background: var(--van-index-anchor-sticky-background); } } diff --git a/packages/vant/src/index-bar/README.md b/packages/vant/src/index-bar/README.md index ac080eafe..c209e5156 100644 --- a/packages/vant/src/index-bar/README.md +++ b/packages/vant/src/index-bar/README.md @@ -139,9 +139,9 @@ The component provides the following CSS variables, which can be used to customi | --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-weight | _var(--van-font-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-background | _transparent_ | - | | --van-index-anchor-sticky-text-color | _var(--van-danger-color)_ | - | -| --van-index-anchor-sticky-background-color | _var(--van-background-color-light)_ | - | +| --van-index-anchor-sticky-background | _var(--van-background-light)_ | - | diff --git a/packages/vant/src/index-bar/README.zh-CN.md b/packages/vant/src/index-bar/README.zh-CN.md index 1b3d66395..09d81ddf9 100644 --- a/packages/vant/src/index-bar/README.zh-CN.md +++ b/packages/vant/src/index-bar/README.zh-CN.md @@ -134,18 +134,18 @@ indexBarRef.value?.scrollTo('B'); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --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-danger-color)_ | - | -| --van-index-anchor-z-index | _1_ | - | -| --van-index-anchor-padding | _0 var(--van-padding-md)_ | - | -| --van-index-anchor-text-color | _var(--van-text-color)_ | - | -| --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-danger-color)_ | - | -| --van-index-anchor-sticky-background-color | _var(--van-background-color-light)_ | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------ | ----------------------------- | ---- | +| --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-danger-color)_ | - | +| --van-index-anchor-z-index | _1_ | - | +| --van-index-anchor-padding | _0 var(--van-padding-md)_ | - | +| --van-index-anchor-text-color | _var(--van-text-color)_ | - | +| --van-index-anchor-font-weight | _var(--van-font-bold)_ | - | +| --van-index-anchor-font-size | _var(--van-font-size-md)_ | - | +| --van-index-anchor-line-height | _32px_ | - | +| --van-index-anchor-background | _transparent_ | - | +| --van-index-anchor-sticky-text-color | _var(--van-danger-color)_ | - | +| --van-index-anchor-sticky-background | _var(--van-background-light)_ | - | diff --git a/packages/vant/src/index-bar/index.less b/packages/vant/src/index-bar/index.less index 29ccda543..c8172fa9a 100644 --- a/packages/vant/src/index-bar/index.less +++ b/packages/vant/src/index-bar/index.less @@ -21,7 +21,7 @@ &__index { padding: 0 var(--van-padding-xs) 0 var(--van-padding-md); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); font-size: var(--van-index-bar-index-font-size); line-height: var(--van-index-bar-index-line-height); diff --git a/packages/vant/src/loading/README.md b/packages/vant/src/loading/README.md index 9bac42b48..5158cd05c 100644 --- a/packages/vant/src/loading/README.md +++ b/packages/vant/src/loading/README.md @@ -105,4 +105,4 @@ The component provides the following CSS variables, which can be used to customi | --van-loading-text-font-size | _var(--van-font-size-md)_ | - | | --van-loading-spinner-color | _var(--van-gray-5)_ | - | | --van-loading-spinner-size | _30px_ | - | -| --van-loading-spinner-animation-duration | _0.8s_ | - | +| --van-loading-spinner-duration | _0.8s_ | - | diff --git a/packages/vant/src/loading/README.zh-CN.md b/packages/vant/src/loading/README.zh-CN.md index 7523577e4..ab2a90040 100644 --- a/packages/vant/src/loading/README.zh-CN.md +++ b/packages/vant/src/loading/README.zh-CN.md @@ -109,10 +109,10 @@ import type { LoadingType, LoadingProps } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --van-loading-text-color | _var(--van-text-color-secondary)_ | - | -| --van-loading-text-font-size | _var(--van-font-size-md)_ | - | -| --van-loading-spinner-color | _var(--van-gray-5)_ | - | -| --van-loading-spinner-size | _30px_ | - | -| --van-loading-spinner-animation-duration | _0.8s_ | - | +| 名称 | 默认值 | 描述 | +| ------------------------------ | --------------------------------- | ---- | +| --van-loading-text-color | _var(--van-text-color-secondary)_ | - | +| --van-loading-text-font-size | _var(--van-font-size-md)_ | - | +| --van-loading-spinner-color | _var(--van-gray-5)_ | - | +| --van-loading-spinner-size | _30px_ | - | +| --van-loading-spinner-duration | _0.8s_ | - | diff --git a/packages/vant/src/loading/index.less b/packages/vant/src/loading/index.less index 07435b6f0..d8b96c7e9 100644 --- a/packages/vant/src/loading/index.less +++ b/packages/vant/src/loading/index.less @@ -3,7 +3,7 @@ --van-loading-text-font-size: var(--van-font-size-md); --van-loading-spinner-color: var(--van-gray-5); --van-loading-spinner-size: 30px; - --van-loading-spinner-animation-duration: 0.8s; + --van-loading-spinner-duration: 0.8s; } .van-loading { @@ -21,8 +21,7 @@ height: var(--van-loading-spinner-size); max-height: 100%; vertical-align: middle; - animation: van-rotate var(--van-loading-spinner-animation-duration) linear - infinite; + animation: van-rotate var(--van-loading-spinner-duration) linear infinite; &--spinner { animation-timing-function: steps(12); diff --git a/packages/vant/src/nav-bar/README.md b/packages/vant/src/nav-bar/README.md index 95b71b071..06b0592f9 100644 --- a/packages/vant/src/nav-bar/README.md +++ b/packages/vant/src/nav-bar/README.md @@ -129,13 +129,13 @@ import type { NavbarProps } from 'vant'; The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). -| Name | Default Value | Description | -| --- | --- | --- | -| --van-nav-bar-height | _46px_ | - | -| --van-nav-bar-background-color | _var(--van-background-color-light)_ | - | -| --van-nav-bar-arrow-size | _16px_ | - | -| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - | -| --van-nav-bar-text-color | _var(--van-primary-color)_ | - | -| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - | -| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - | -| --van-nav-bar-z-index | _1_ | - | +| Name | Default Value | Description | +| ------------------------------ | ----------------------------- | ----------- | +| --van-nav-bar-height | _46px_ | - | +| --van-nav-bar-background | _var(--van-background-light)_ | - | +| --van-nav-bar-arrow-size | _16px_ | - | +| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - | +| --van-nav-bar-text-color | _var(--van-primary-color)_ | - | +| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - | +| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - | +| --van-nav-bar-z-index | _1_ | - | diff --git a/packages/vant/src/nav-bar/README.zh-CN.md b/packages/vant/src/nav-bar/README.zh-CN.md index 2f5c386f3..a7548457e 100644 --- a/packages/vant/src/nav-bar/README.zh-CN.md +++ b/packages/vant/src/nav-bar/README.zh-CN.md @@ -137,13 +137,13 @@ import type { NavbarProps } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------ | ----------------------------------- | ---- | -| --van-nav-bar-height | _46px_ | - | -| --van-nav-bar-background-color | _var(--van-background-color-light)_ | - | -| --van-nav-bar-arrow-size | _16px_ | - | -| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - | -| --van-nav-bar-text-color | _var(--van-primary-color)_ | - | -| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - | -| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - | -| --van-nav-bar-z-index | _1_ | - | +| 名称 | 默认值 | 描述 | +| ------------------------------ | ----------------------------- | ---- | +| --van-nav-bar-height | _46px_ | - | +| --van-nav-bar-background | _var(--van-background-light)_ | - | +| --van-nav-bar-arrow-size | _16px_ | - | +| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - | +| --van-nav-bar-text-color | _var(--van-primary-color)_ | - | +| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - | +| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - | +| --van-nav-bar-z-index | _1_ | - | diff --git a/packages/vant/src/nav-bar/index.less b/packages/vant/src/nav-bar/index.less index 5699b3707..4ecb436d7 100644 --- a/packages/vant/src/nav-bar/index.less +++ b/packages/vant/src/nav-bar/index.less @@ -1,6 +1,6 @@ :root { --van-nav-bar-height: 46px; - --van-nav-bar-background-color: var(--van-background-color-light); + --van-nav-bar-background: var(--van-background-light); --van-nav-bar-arrow-size: 16px; --van-nav-bar-icon-color: var(--van-primary-color); --van-nav-bar-text-color: var(--van-primary-color); @@ -14,7 +14,7 @@ z-index: var(--van-nav-bar-z-index); line-height: var(--van-line-height-lg); text-align: center; - background: var(--van-nav-bar-background-color); + background: var(--van-nav-bar-background); user-select: none; &--fixed { @@ -49,7 +49,7 @@ max-width: 60%; margin: 0 auto; color: var(--van-nav-bar-title-text-color); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); font-size: var(--van-nav-bar-title-font-size); } diff --git a/packages/vant/src/notice-bar/README.md b/packages/vant/src/notice-bar/README.md index 26a50f493..5a000efc4 100644 --- a/packages/vant/src/notice-bar/README.md +++ b/packages/vant/src/notice-bar/README.md @@ -156,6 +156,6 @@ The component provides the following CSS variables, which can be used to customi | --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-background | _var(--van-orange-light)_ | - | | --van-notice-bar-icon-size | _16px_ | - | | --van-notice-bar-icon-min-width | _24px_ | - | diff --git a/packages/vant/src/notice-bar/README.zh-CN.md b/packages/vant/src/notice-bar/README.zh-CN.md index e30da1852..c084a5146 100644 --- a/packages/vant/src/notice-bar/README.zh-CN.md +++ b/packages/vant/src/notice-bar/README.zh-CN.md @@ -177,6 +177,6 @@ noticeBarRef.value?.reset(); | --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-background | _var(--van-orange-light)_ | - | | --van-notice-bar-icon-size | _16px_ | - | | --van-notice-bar-icon-min-width | _24px_ | - | diff --git a/packages/vant/src/notice-bar/index.less b/packages/vant/src/notice-bar/index.less index a8011c3cd..1da435653 100644 --- a/packages/vant/src/notice-bar/index.less +++ b/packages/vant/src/notice-bar/index.less @@ -5,7 +5,7 @@ --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-background: var(--van-orange-light); --van-notice-bar-icon-size: 16px; --van-notice-bar-icon-min-width: 24px; } @@ -19,7 +19,7 @@ color: var(--van-notice-bar-text-color); font-size: var(--van-notice-bar-font-size); line-height: var(--van-notice-bar-line-height); - background: var(--van-notice-bar-background-color); + background: var(--van-notice-bar-background); &__left-icon, &__right-icon { diff --git a/packages/vant/src/notify/README.md b/packages/vant/src/notify/README.md index 37984e3f2..f789e87d8 100644 --- a/packages/vant/src/notify/README.md +++ b/packages/vant/src/notify/README.md @@ -138,7 +138,7 @@ The component provides the following CSS variables, which can be used to customi | --van-notify-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - | | --van-notify-font-size | _var(--van-font-size-md)_ | - | | --van-notify-line-height | _var(--van-line-height-md)_ | - | -| --van-notify-primary-background-color | _var(--van-primary-color)_ | - | -| --van-notify-success-background-color | _var(--van-success-color)_ | - | -| --van-notify-danger-background-color | _var(--van-danger-color)_ | - | -| --van-notify-warning-background-color | _var(--van-warning-color)_ | - | +| --van-notify-primary-background | _var(--van-primary-color)_ | - | +| --van-notify-success-background | _var(--van-success-color)_ | - | +| --van-notify-danger-background | _var(--van-danger-color)_ | - | +| --van-notify-warning-background | _var(--van-warning-color)_ | - | diff --git a/packages/vant/src/notify/README.zh-CN.md b/packages/vant/src/notify/README.zh-CN.md index 465348abe..fb15c2cdb 100644 --- a/packages/vant/src/notify/README.zh-CN.md +++ b/packages/vant/src/notify/README.zh-CN.md @@ -186,7 +186,7 @@ import type { NotifyType, NotifyProps, NotifyOptions } from 'vant'; | --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-primary-color)_ | - | -| --van-notify-success-background-color | _var(--van-success-color)_ | - | -| --van-notify-danger-background-color | _var(--van-danger-color)_ | - | -| --van-notify-warning-background-color | _var(--van-warning-color)_ | - | +| --van-notify-primary-background | _var(--van-primary-color)_ | - | +| --van-notify-success-background | _var(--van-success-color)_ | - | +| --van-notify-danger-background | _var(--van-danger-color)_ | - | +| --van-notify-warning-background | _var(--van-warning-color)_ | - | diff --git a/packages/vant/src/notify/index.less b/packages/vant/src/notify/index.less index d2f595fa6..20c0ec8bd 100644 --- a/packages/vant/src/notify/index.less +++ b/packages/vant/src/notify/index.less @@ -3,10 +3,10 @@ --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-primary-color); - --van-notify-success-background-color: var(--van-success-color); - --van-notify-danger-background-color: var(--van-danger-color); - --van-notify-warning-background-color: var(--van-warning-color); + --van-notify-primary-background: var(--van-primary-color); + --van-notify-success-background: var(--van-success-color); + --van-notify-danger-background: var(--van-danger-color); + --van-notify-warning-background: var(--van-warning-color); } .van-notify { @@ -25,18 +25,18 @@ word-wrap: break-word; &--primary { - background: var(--van-notify-primary-background-color); + background: var(--van-notify-primary-background); } &--success { - background: var(--van-notify-success-background-color); + background: var(--van-notify-success-background); } &--danger { - background: var(--van-notify-danger-background-color); + background: var(--van-notify-danger-background); } &--warning { - background: var(--van-notify-warning-background-color); + background: var(--van-notify-warning-background); } } diff --git a/packages/vant/src/number-keyboard/README.md b/packages/vant/src/number-keyboard/README.md index 51ce01f7b..19fe3a679 100644 --- a/packages/vant/src/number-keyboard/README.md +++ b/packages/vant/src/number-keyboard/README.md @@ -221,18 +221,18 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-number-keyboard-background-color | _var(--van-gray-2)_ | - | +| --van-number-keyboard-background | _var(--van-gray-2)_ | - | | --van-number-keyboard-key-height | _48px_ | - | | --van-number-keyboard-key-font-size | _28px_ | - | | --van-number-keyboard-key-active-color | _var(--van-gray-3)_ | - | -| --van-number-keyboard-key-background-color | _var(--van-white)_ | - | +| --van-number-keyboard-key-background | _var(--van-white)_ | - | | --van-number-keyboard-delete-font-size | _var(--van-font-size-lg)_ | - | | --van-number-keyboard-title-color | _var(--van-gray-7)_ | - | | --van-number-keyboard-title-height | _34px_ | - | | --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-color | _var(--van-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-primary-color)_ | - | +| --van-number-keyboard-button-background | _var(--van-primary-color)_ | - | | --van-number-keyboard-z-index | _100_ | - | diff --git a/packages/vant/src/number-keyboard/README.zh-CN.md b/packages/vant/src/number-keyboard/README.zh-CN.md index e16b9421c..a61536de9 100644 --- a/packages/vant/src/number-keyboard/README.zh-CN.md +++ b/packages/vant/src/number-keyboard/README.zh-CN.md @@ -226,23 +226,23 @@ import type { NumberKeyboardProps, NumberKeyboardTheme } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --van-number-keyboard-background-color | _var(--van-gray-2)_ | - | -| --van-number-keyboard-key-height | _48px_ | - | -| --van-number-keyboard-key-font-size | _28px_ | - | -| --van-number-keyboard-key-active-color | _var(--van-gray-3)_ | - | -| --van-number-keyboard-key-background-color | _var(--van-white)_ | - | -| --van-number-keyboard-delete-font-size | _var(--van-font-size-lg)_ | - | -| --van-number-keyboard-title-color | _var(--van-gray-7)_ | - | -| --van-number-keyboard-title-height | _34px_ | - | -| --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-primary-color)_ | - | -| --van-number-keyboard-z-index | _100_ | - | +| 名称 | 默认值 | 描述 | +| --------------------------------------- | -------------------------- | ---- | +| --van-number-keyboard-background | _var(--van-gray-2)_ | - | +| --van-number-keyboard-key-height | _48px_ | - | +| --van-number-keyboard-key-font-size | _28px_ | - | +| --van-number-keyboard-key-active-color | _var(--van-gray-3)_ | - | +| --van-number-keyboard-key-background | _var(--van-white)_ | - | +| --van-number-keyboard-delete-font-size | _var(--van-font-size-lg)_ | - | +| --van-number-keyboard-title-color | _var(--van-gray-7)_ | - | +| --van-number-keyboard-title-height | _34px_ | - | +| --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-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 | _var(--van-primary-color)_ | - | +| --van-number-keyboard-z-index | _100_ | - | ## 常见问题 diff --git a/packages/vant/src/number-keyboard/index.less b/packages/vant/src/number-keyboard/index.less index 1dca608a5..53c65dc8d 100644 --- a/packages/vant/src/number-keyboard/index.less +++ b/packages/vant/src/number-keyboard/index.less @@ -1,18 +1,18 @@ :root { - --van-number-keyboard-background-color: var(--van-gray-2); + --van-number-keyboard-background: var(--van-gray-2); --van-number-keyboard-key-height: 48px; --van-number-keyboard-key-font-size: 28px; --van-number-keyboard-key-active-color: var(--van-gray-3); - --van-number-keyboard-key-background-color: var(--van-background-color-light); + --van-number-keyboard-key-background: var(--van-background-light); --van-number-keyboard-delete-font-size: var(--van-font-size-lg); --van-number-keyboard-title-color: var(--van-gray-7); --van-number-keyboard-title-height: 34px; --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-color: var(--van-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-primary-color); + --van-number-keyboard-button-background: var(--van-primary-color); --van-number-keyboard-z-index: 100; } @@ -23,7 +23,7 @@ z-index: var(--van-number-keyboard-z-index); width: 100%; padding-bottom: 22px; - background: var(--van-number-keyboard-background-color); + background: var(--van-number-keyboard-background); user-select: none; &--with-title { @@ -93,8 +93,8 @@ height: var(--van-number-keyboard-key-height); font-size: var(--van-number-keyboard-key-font-size); line-height: 1.5; - background: var(--van-number-keyboard-key-background-color); - border-radius: var(--van-border-radius-lg); + background: var(--van-number-keyboard-key-background); + border-radius: var(--van-radius-lg); cursor: pointer; &--large { @@ -119,7 +119,7 @@ &--blue { color: var(--van-number-keyboard-button-text-color); - background: var(--van-number-keyboard-button-background-color); + background: var(--van-number-keyboard-button-background); &.van-key--active { opacity: var(--van-active-opacity); diff --git a/packages/vant/src/overlay/README.md b/packages/vant/src/overlay/README.md index a66dff557..dd6ed9d7a 100644 --- a/packages/vant/src/overlay/README.md +++ b/packages/vant/src/overlay/README.md @@ -100,7 +100,7 @@ import type { OverlayProps } from 'vant'; The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). -| Name | Default Value | Description | -| ------------------------------ | -------------------- | ----------- | -| --van-overlay-z-index | _1_ | - | -| --van-overlay-background-color | _rgba(0, 0, 0, 0.7)_ | - | +| Name | Default Value | Description | +| ------------------------ | -------------------- | ----------- | +| --van-overlay-z-index | _1_ | - | +| --van-overlay-background | _rgba(0, 0, 0, 0.7)_ | - | diff --git a/packages/vant/src/overlay/README.zh-CN.md b/packages/vant/src/overlay/README.zh-CN.md index 73bdd2c84..abd6cd6b3 100644 --- a/packages/vant/src/overlay/README.zh-CN.md +++ b/packages/vant/src/overlay/README.zh-CN.md @@ -102,7 +102,7 @@ import type { OverlayProps } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------ | -------------------- | ---- | -| --van-overlay-z-index | _1_ | - | -| --van-overlay-background-color | _rgba(0, 0, 0, 0.7)_ | - | +| 名称 | 默认值 | 描述 | +| ------------------------ | -------------------- | ---- | +| --van-overlay-z-index | _1_ | - | +| --van-overlay-background | _rgba(0, 0, 0, 0.7)_ | - | diff --git a/packages/vant/src/overlay/index.less b/packages/vant/src/overlay/index.less index 1e9067b88..22c0a35d7 100644 --- a/packages/vant/src/overlay/index.less +++ b/packages/vant/src/overlay/index.less @@ -1,6 +1,6 @@ :root { --van-overlay-z-index: 1; - --van-overlay-background-color: rgba(0, 0, 0, 0.7); + --van-overlay-background: rgba(0, 0, 0, 0.7); } .van-overlay { @@ -10,5 +10,5 @@ z-index: var(--van-overlay-z-index); width: 100%; height: 100%; - background: var(--van-overlay-background-color); + background: var(--van-overlay-background); } diff --git a/packages/vant/src/pagination/README.md b/packages/vant/src/pagination/README.md index 3a2b9b122..51dbd07ae 100644 --- a/packages/vant/src/pagination/README.md +++ b/packages/vant/src/pagination/README.md @@ -117,7 +117,7 @@ The component provides the following CSS variables, which can be used to customi | --van-pagination-item-width | _36px_ | - | | --van-pagination-item-default-color | _var(--van-primary-color)_ | - | | --van-pagination-item-disabled-color | _var(--van-gray-7)_ | - | -| --van-pagination-item-disabled-background-color | _var(--van-background-color)_ | - | -| --van-pagination-background-color | _var(--van-background-color-light)_ | - | +| --van-pagination-item-disabled-background | _var(--van-background)_ | - | +| --van-pagination-background | _var(--van-background-light)_ | - | | --van-pagination-desc-color | _var(--van-gray-7)_ | - | | --van-pagination-disabled-opacity | _var(--van-disabled-opacity)_ | - | diff --git a/packages/vant/src/pagination/README.zh-CN.md b/packages/vant/src/pagination/README.zh-CN.md index 9e583a5e9..f69ef556e 100644 --- a/packages/vant/src/pagination/README.zh-CN.md +++ b/packages/vant/src/pagination/README.zh-CN.md @@ -125,7 +125,7 @@ import type { PaginationMode, PaginationProps } from 'vant'; | --van-pagination-item-width | _36px_ | - | | --van-pagination-item-default-color | _var(--van-primary-color)_ | - | | --van-pagination-item-disabled-color | _var(--van-gray-7)_ | - | -| --van-pagination-item-disabled-background-color | _var(--van-background-color)_ | - | -| --van-pagination-background-color | _var(--van-background-color-light)_ | - | +| --van-pagination-item-disabled-background | _var(--van-background)_ | - | +| --van-pagination-background | _var(--van-background-light)_ | - | | --van-pagination-desc-color | _var(--van-gray-7)_ | - | | --van-pagination-disabled-opacity | _var(--van-disabled-opacity)_ | - | diff --git a/packages/vant/src/pagination/index.less b/packages/vant/src/pagination/index.less index 65a0b3eaa..cf8bfbf0d 100644 --- a/packages/vant/src/pagination/index.less +++ b/packages/vant/src/pagination/index.less @@ -4,8 +4,8 @@ --van-pagination-item-width: 36px; --van-pagination-item-default-color: var(--van-primary-color); --van-pagination-item-disabled-color: var(--van-gray-7); - --van-pagination-item-disabled-background-color: var(--van-background-color); - --van-pagination-background-color: var(--van-background-color-light); + --van-pagination-item-disabled-background: var(--van-background); + --van-pagination-background: var(--van-background-light); --van-pagination-desc-color: var(--van-gray-7); --van-pagination-disabled-opacity: var(--van-disabled-opacity); } @@ -27,7 +27,7 @@ min-width: var(--van-pagination-item-width); height: var(--van-pagination-height); color: var(--van-pagination-item-default-color); - background: var(--van-pagination-background-color); + background: var(--van-pagination-background); cursor: pointer; user-select: none; @@ -37,12 +37,12 @@ } &::after { - border-width: var(--van-border-width-base) 0 var(--van-border-width-base) - var(--van-border-width-base); + border-width: var(--van-border-width) 0 var(--van-border-width) + var(--van-border-width); } &:last-child::after { - border-right-width: var(--van-border-width-base); + border-right-width: var(--van-border-width); } &--active { @@ -61,7 +61,7 @@ &, &:active { color: var(--van-pagination-item-disabled-color); - background-color: var(--van-pagination-item-disabled-background-color); + background-color: var(--van-pagination-item-disabled-background); cursor: not-allowed; opacity: var(--van-pagination-disabled-opacity); } @@ -81,7 +81,7 @@ .van-pagination__prev, .van-pagination__next { &::after { - border-width: var(--van-border-width-base); + border-width: var(--van-border-width); } } } diff --git a/packages/vant/src/password-input/README.md b/packages/vant/src/password-input/README.md index 2ed8fc525..5146716c6 100644 --- a/packages/vant/src/password-input/README.md +++ b/packages/vant/src/password-input/README.md @@ -159,8 +159,8 @@ The component provides the following CSS variables, which can be used to customi | --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-background-color-light)_ | - | +| --van-password-input-radius | _6px_ | - | +| --van-password-input-background | _var(--van-background-light)_ | - | | --van-password-input-info-color | _var(--van-text-color-secondary)_ | - | | --van-password-input-info-font-size | _var(--van-font-size-md)_ | - | | --van-password-input-error-info-color | _var(--van-danger-color)_ | - | @@ -170,4 +170,4 @@ The component provides the following CSS variables, which can be used to customi | --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_ | - | +| --van-password-input-cursor-duration | _1s_ | - | diff --git a/packages/vant/src/password-input/README.zh-CN.md b/packages/vant/src/password-input/README.zh-CN.md index 3b93c843f..fb8ac93b7 100644 --- a/packages/vant/src/password-input/README.zh-CN.md +++ b/packages/vant/src/password-input/README.zh-CN.md @@ -169,8 +169,8 @@ export default { | --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-background-color-light)_ | - | +| --van-password-input-radius | _6px_ | - | +| --van-password-input-background | _var(--van-background-light)_ | - | | --van-password-input-info-color | _var(--van-text-color-secondary)_ | - | | --van-password-input-info-font-size | _var(--van-font-size-md)_ | - | | --van-password-input-error-info-color | _var(--van-danger-color)_ | - | @@ -180,4 +180,4 @@ export default { | --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_ | - | +| --van-password-input-cursor-duration | _1s_ | - | diff --git a/packages/vant/src/password-input/index.less b/packages/vant/src/password-input/index.less index 07779dae2..47f41ea5f 100644 --- a/packages/vant/src/password-input/index.less +++ b/packages/vant/src/password-input/index.less @@ -2,8 +2,8 @@ --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-background-color-light); + --van-password-input-radius: 6px; + --van-password-input-background: var(--van-background-light); --van-password-input-info-color: var(--van-text-color-secondary); --van-password-input-info-font-size: var(--van-font-size-md); --van-password-input-error-info-color: var(--van-danger-color); @@ -13,7 +13,7 @@ --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; + --van-password-input-cursor-duration: 1s; } .van-password-input { @@ -43,7 +43,7 @@ cursor: pointer; &::after { - border-radius: var(--van-password-input-border-radius); + border-radius: var(--van-password-input-radius); } li { @@ -56,7 +56,7 @@ color: var(--van-password-input-text-color); font-size: var(--van-password-input-font-size); line-height: 1.2; - background: var(--van-password-input-background-color); + background: var(--van-password-input-background); } i { @@ -80,8 +80,8 @@ height: var(--van-password-input-cursor-height); background: var(--van-password-input-cursor-color); transform: translate(-50%, -50%); - animation: var(--van-password-input-cursor-animation-duration) - van-cursor-flicker infinite; + animation: var(--van-password-input-cursor-duration) van-cursor-flicker + infinite; } } diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md index 32e2de5e2..d263de000 100644 --- a/packages/vant/src/picker/README.md +++ b/packages/vant/src/picker/README.md @@ -415,13 +415,13 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-picker-background-color | _var(--van-background-color-light)_ | - | +| --van-picker-background | _var(--van-background-light)_ | - | | --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-confirm-action-color | _var(--van-link-color)_ | - | | --van-picker-cancel-action-color | _var(--van-text-color-secondary)_ | - | | --van-picker-option-padding | _0 var(--van-padding-base)_ | - | | --van-picker-option-font-size | _var(--van-font-size-lg)_ | - | diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md index e80adc8ba..ac332355b 100644 --- a/packages/vant/src/picker/README.zh-CN.md +++ b/packages/vant/src/picker/README.zh-CN.md @@ -440,13 +440,13 @@ pickerRef.value?.confirm(); | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-picker-background-color | _var(--van-background-color-light)_ | - | +| --van-picker-background | _var(--van-background-light)_ | - | | --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-confirm-action-color | _var(--van-link-color)_ | - | | --van-picker-cancel-action-color | _var(--van-text-color-secondary)_ | - | | --van-picker-option-padding | _0 var(--van-padding-base)_ | - | | --van-picker-option-font-size | _var(--van-font-size-lg)_ | - | diff --git a/packages/vant/src/picker/index.less b/packages/vant/src/picker/index.less index 0c8113a68..680ad4983 100644 --- a/packages/vant/src/picker/index.less +++ b/packages/vant/src/picker/index.less @@ -1,11 +1,11 @@ :root { - --van-picker-background-color: var(--van-background-color-light); + --van-picker-background: var(--van-background-light); --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-confirm-action-color: var(--van-link-color); --van-picker-cancel-action-color: var(--van-text-color-secondary); --van-picker-option-font-size: var(--van-font-size-lg); --van-picker-option-padding: 0 var(--van-padding-base); @@ -23,7 +23,7 @@ .van-picker { position: relative; - background: var(--van-picker-background-color); + background: var(--van-picker-background); user-select: none; &__toolbar { @@ -53,7 +53,7 @@ &__title { max-width: 50%; - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); font-size: var(--van-picker-title-font-size); line-height: var(--van-picker-title-line-height); text-align: center; diff --git a/packages/vant/src/popover/README.md b/packages/vant/src/popover/README.md index 7c9fb4cdd..d6f9c819f 100644 --- a/packages/vant/src/popover/README.md +++ b/packages/vant/src/popover/README.md @@ -278,15 +278,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 | _var(--van-border-radius-lg)_ | - | +| --van-popover-radius | _var(--van-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-background-color-light)_ | - | +| --van-popover-light-background | _var(--van-background-light)_ | - | | --van-popover-light-action-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-popover-dark-text-color | _var(--van-white)_ | - | -| --van-popover-dark-background-color | _#4a4a4a_ | - | +| --van-popover-dark-background | _#4a4a4a_ | - | | --van-popover-dark-action-disabled-text-color | _var(--van-text-color-secondary)_ | - | diff --git a/packages/vant/src/popover/README.zh-CN.md b/packages/vant/src/popover/README.zh-CN.md index 27c883071..163e60c31 100644 --- a/packages/vant/src/popover/README.zh-CN.md +++ b/packages/vant/src/popover/README.zh-CN.md @@ -290,17 +290,17 @@ import type { | 名称 | 默认值 | 描述 | | --- | --- | --- | | --van-popover-arrow-size | _6px_ | - | -| --van-popover-border-radius | _var(--van-border-radius-lg)_ | - | +| --van-popover-radius | _var(--van-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-background-color-light)_ | - | +| --van-popover-light-background | _var(--van-background-light)_ | - | | --van-popover-light-action-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-popover-dark-text-color | _var(--van-white)_ | - | -| --van-popover-dark-background-color | _#4a4a4a_ | - | +| --van-popover-dark-background | _#4a4a4a_ | - | | --van-popover-dark-action-disabled-text-color | _var(--van-text-color-secondary)_ | - | ## 常见问题 diff --git a/packages/vant/src/popover/index.less b/packages/vant/src/popover/index.less index 8334a5688..6e27b5ecc 100644 --- a/packages/vant/src/popover/index.less +++ b/packages/vant/src/popover/index.less @@ -1,18 +1,18 @@ :root { --van-popover-arrow-size: 6px; - --van-popover-border-radius: var(--van-border-radius-lg); + --van-popover-radius: var(--van-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-background-color-light); + --van-popover-light-background: var(--van-background-light); --van-popover-light-action-disabled-text-color: var( --van-text-color-tertiary ); --van-popover-dark-text-color: var(--van-white); - --van-popover-dark-background-color: #4a4a4a; + --van-popover-dark-background: #4a4a4a; --van-popover-dark-action-disabled-text-color: var( --van-text-color-secondary ); @@ -39,7 +39,7 @@ &__content { overflow: hidden; - border-radius: var(--van-popover-border-radius); + border-radius: var(--van-popover-radius); } &__action { @@ -216,12 +216,12 @@ color: var(--van-popover-light-text-color); .van-popover__content { - background: var(--van-popover-light-background-color); + background: var(--van-popover-light-background); box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12); } .van-popover__arrow { - color: var(--van-popover-light-background-color); + color: var(--van-popover-light-background); } .van-popover__action { @@ -244,11 +244,11 @@ color: var(--van-popover-dark-text-color); .van-popover__content { - background: var(--van-popover-dark-background-color); + background: var(--van-popover-dark-background); } .van-popover__arrow { - color: var(--van-popover-dark-background-color); + color: var(--van-popover-dark-background); } .van-popover__action { @@ -279,10 +279,10 @@ } &-zoom-enter-active { - transition-timing-function: var(--van-animation-timing-function-enter); + transition-timing-function: var(--van-ease-out); } &-zoom-leave-active { - transition-timing-function: var(--van-animation-timing-function-leave); + transition-timing-function: var(--van-ease-in); } } diff --git a/packages/vant/src/popup/README.md b/packages/vant/src/popup/README.md index 361a4e6c8..7c0fc52d8 100644 --- a/packages/vant/src/popup/README.md +++ b/packages/vant/src/popup/README.md @@ -162,9 +162,9 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-popup-background-color | _var(--van-background-color-light)_ | - | -| --van-popup-transition | _transform var(--van-animation-duration-base)_ | - | -| --van-popup-round-border-radius | _16px_ | - | +| --van-popup-background | _var(--van-background-light)_ | - | +| --van-popup-transition | _transform var(--van-duration-base)_ | - | +| --van-popup-round-radius | _16px_ | - | | --van-popup-close-icon-size | _22px_ | - | | --van-popup-close-icon-color | _var(--van-gray-5)_ | - | | --van-popup-close-icon-margin | _16px_ | - | diff --git a/packages/vant/src/popup/README.zh-CN.md b/packages/vant/src/popup/README.zh-CN.md index 37a3cbba3..71495ac22 100644 --- a/packages/vant/src/popup/README.zh-CN.md +++ b/packages/vant/src/popup/README.zh-CN.md @@ -166,12 +166,12 @@ import type { PopupProps, PopupPosition, PopupCloseIconPosition } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --van-popup-background-color | _var(--van-background-color-light)_ | - | -| --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 | _var(--van-gray-5)_ | - | -| --van-popup-close-icon-margin | _16px_ | - | -| --van-popup-close-icon-z-index | _1_ | - | +| 名称 | 默认值 | 描述 | +| ------------------------------ | ------------------------------------ | ---- | +| --van-popup-background | _var(--van-background-light)_ | - | +| --van-popup-transition | _transform var(--van-duration-base)_ | - | +| --van-popup-round-radius | _16px_ | - | +| --van-popup-close-icon-size | _22px_ | - | +| --van-popup-close-icon-color | _var(--van-gray-5)_ | - | +| --van-popup-close-icon-margin | _16px_ | - | +| --van-popup-close-icon-z-index | _1_ | - | diff --git a/packages/vant/src/popup/index.less b/packages/vant/src/popup/index.less index c70250300..b91750e18 100644 --- a/packages/vant/src/popup/index.less +++ b/packages/vant/src/popup/index.less @@ -1,7 +1,7 @@ :root { - --van-popup-background-color: var(--van-background-color-light); - --van-popup-transition: transform var(--van-animation-duration-base); - --van-popup-round-border-radius: 16px; + --van-popup-background: var(--van-background-light); + --van-popup-transition: transform var(--van-duration-base); + --van-popup-round-radius: 16px; --van-popup-close-icon-size: 22px; --van-popup-close-icon-color: var(--van-gray-5); --van-popup-close-icon-margin: 16px; @@ -17,7 +17,7 @@ position: fixed; max-height: 100%; overflow-y: auto; - background: var(--van-popup-background-color); + background: var(--van-popup-background); transition: var(--van-popup-transition); -webkit-overflow-scrolling: touch; @@ -27,7 +27,7 @@ transform: translate3d(-50%, -50%, 0); &.van-popup--round { - border-radius: var(--van-popup-round-border-radius); + border-radius: var(--van-popup-round-radius); } } @@ -37,8 +37,8 @@ width: 100%; &.van-popup--round { - border-radius: 0 0 var(--van-popup-round-border-radius) - var(--van-popup-round-border-radius); + border-radius: 0 0 var(--van-popup-round-radius) + var(--van-popup-round-radius); } } @@ -48,8 +48,8 @@ transform: translate3d(0, -50%, 0); &.van-popup--round { - border-radius: var(--van-popup-round-border-radius) 0 0 - var(--van-popup-round-border-radius); + border-radius: var(--van-popup-round-radius) 0 0 + var(--van-popup-round-radius); } } @@ -59,8 +59,8 @@ width: 100%; &.van-popup--round { - border-radius: var(--van-popup-round-border-radius) - var(--van-popup-round-border-radius) 0 0; + border-radius: var(--van-popup-round-radius) + var(--van-popup-round-radius) 0 0; } } @@ -70,8 +70,8 @@ transform: translate3d(0, -50%, 0); &.van-popup--round { - border-radius: 0 var(--van-popup-round-border-radius) - var(--van-popup-round-border-radius) 0; + border-radius: 0 var(--van-popup-round-radius) + var(--van-popup-round-radius) 0; } } @@ -79,14 +79,14 @@ &-slide-left-enter-active, &-slide-right-enter-active, &-slide-bottom-enter-active { - transition-timing-function: var(--van-animation-timing-function-enter); + transition-timing-function: var(--van-ease-out); } &-slide-top-leave-active, &-slide-left-leave-active, &-slide-right-leave-active, &-slide-bottom-leave-active { - transition-timing-function: var(--van-animation-timing-function-leave); + transition-timing-function: var(--van-ease-in); } &-slide-top-enter-from, diff --git a/packages/vant/src/progress/README.md b/packages/vant/src/progress/README.md index 7096975d7..341ed6333 100644 --- a/packages/vant/src/progress/README.md +++ b/packages/vant/src/progress/README.md @@ -94,14 +94,14 @@ progressRef.value?.resize(); 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 | _var(--van-primary-color)_ | - | -| --van-progress-inactive-color | _var(--van-gray-5)_ | - | -| --van-progress-background-color | _var(--van-gray-3)_ | - | -| --van-progress-pivot-padding | _0 5px_ | - | -| --van-progress-pivot-text-color | _var(--van-white)_ | - | -| --van-progress-pivot-font-size | _var(--van-font-size-xs)_ | - | -| --van-progress-pivot-line-height | _1.6_ | - | -| --van-progress-pivot-background-color | _var(--van-primary-color)_ | - | +| Name | Default Value | Description | +| -------------------------------- | -------------------------- | ----------- | +| --van-progress-height | _4px_ | - | +| --van-progress-color | _var(--van-primary-color)_ | - | +| --van-progress-inactive-color | _var(--van-gray-5)_ | - | +| --van-progress-background | _var(--van-gray-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 | _var(--van-primary-color)_ | - | diff --git a/packages/vant/src/progress/README.zh-CN.md b/packages/vant/src/progress/README.zh-CN.md index 973093eca..86d8e0ea6 100644 --- a/packages/vant/src/progress/README.zh-CN.md +++ b/packages/vant/src/progress/README.zh-CN.md @@ -98,14 +98,14 @@ progressRef.value?.resize(); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------- | -------------------------- | ---- | -| --van-progress-height | _4px_ | - | -| --van-progress-color | _var(--van-primary-color)_ | - | -| --van-progress-inactive-color | _var(--van-gray-5)_ | - | -| --van-progress-background-color | _var(--van-gray-3)_ | - | -| --van-progress-pivot-padding | _0 5px_ | - | -| --van-progress-pivot-text-color | _var(--van-white)_ | - | -| --van-progress-pivot-font-size | _var(--van-font-size-xs)_ | - | -| --van-progress-pivot-line-height | _1.6_ | - | -| --van-progress-pivot-background-color | _var(--van-primary-color)_ | - | +| 名称 | 默认值 | 描述 | +| -------------------------------- | -------------------------- | ---- | +| --van-progress-height | _4px_ | - | +| --van-progress-color | _var(--van-primary-color)_ | - | +| --van-progress-inactive-color | _var(--van-gray-5)_ | - | +| --van-progress-background | _var(--van-gray-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 | _var(--van-primary-color)_ | - | diff --git a/packages/vant/src/progress/index.less b/packages/vant/src/progress/index.less index bbb6e5a30..b26bb233d 100644 --- a/packages/vant/src/progress/index.less +++ b/packages/vant/src/progress/index.less @@ -2,18 +2,18 @@ --van-progress-height: 4px; --van-progress-color: var(--van-primary-color); --van-progress-inactive-color: var(--van-gray-5); - --van-progress-background-color: var(--van-gray-3); + --van-progress-background: var(--van-gray-3); --van-progress-pivot-padding: 0 5px; --van-progress-pivot-text-color: var(--van-white); --van-progress-pivot-font-size: var(--van-font-size-xs); --van-progress-pivot-line-height: 1.6; - --van-progress-pivot-background-color: var(--van-primary-color); + --van-progress-pivot-background: var(--van-primary-color); } .van-progress { position: relative; height: var(--van-progress-height); - background: var(--van-progress-background-color); + background: var(--van-progress-background); border-radius: var(--van-progress-height); &__portion { @@ -24,8 +24,7 @@ background: var(--van-progress-color); border-radius: inherit; transform-origin: 0; - transition: all var(--van-animation-duration-base) - var(--van-animation-timing-function-enter); + transition: all var(--van-duration-base) var(--van-ease-out); &--inactive { background: var(--van-progress-inactive-color); @@ -43,10 +42,9 @@ line-height: var(--van-progress-pivot-line-height); text-align: center; word-break: keep-all; - background: var(--van-progress-pivot-background-color); + background: var(--van-progress-pivot-background); border-radius: 1em; - transition: all var(--van-animation-duration-base) - var(--van-animation-timing-function-enter); + transition: all var(--van-duration-base) var(--van-ease-out); &--inactive { background: var(--van-progress-inactive-color); diff --git a/packages/vant/src/radio/README.md b/packages/vant/src/radio/README.md index 5ec95eb7d..a68a1d6e6 100644 --- a/packages/vant/src/radio/README.md +++ b/packages/vant/src/radio/README.md @@ -223,10 +223,10 @@ The component provides the following CSS variables, which can be used to customi | --- | --- | --- | | --van-radio-size | _20px_ | - | | --van-radio-border-color | _var(--van-gray-5)_ | - | -| --van-radio-transition-duration | _var(--van-animation-duration-fast)_ | - | +| --van-radio-duration | _var(--van-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-primary-color)_ | - | | --van-radio-disabled-icon-color | _var(--van-gray-5)_ | - | | --van-radio-disabled-label-color | _var(--van-text-color-tertiary)_ | - | -| --van-radio-disabled-background-color | _var(--van-border-color)_ | - | +| --van-radio-disabled-background | _var(--van-border-color)_ | - | diff --git a/packages/vant/src/radio/README.zh-CN.md b/packages/vant/src/radio/README.zh-CN.md index cc1925b32..6e518362b 100644 --- a/packages/vant/src/radio/README.zh-CN.md +++ b/packages/vant/src/radio/README.zh-CN.md @@ -233,14 +233,14 @@ import type { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --van-radio-size | _20px_ | - | -| --van-radio-border-color | _var(--van-gray-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-primary-color)_ | - | -| --van-radio-disabled-icon-color | _var(--van-gray-5)_ | - | -| --van-radio-disabled-label-color | _var(--van-text-color-tertiary)_ | - | -| --van-radio-disabled-background-color | _var(--van-border-color)_ | - | +| 名称 | 默认值 | 描述 | +| -------------------------------- | -------------------------------- | ---- | +| --van-radio-size | _20px_ | - | +| --van-radio-border-color | _var(--van-gray-5)_ | - | +| --van-radio-duration | _var(--van-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-primary-color)_ | - | +| --van-radio-disabled-icon-color | _var(--van-gray-5)_ | - | +| --van-radio-disabled-label-color | _var(--van-text-color-tertiary)_ | - | +| --van-radio-disabled-background | _var(--van-border-color)_ | - | diff --git a/packages/vant/src/radio/index.less b/packages/vant/src/radio/index.less index 53d56ff5d..3f3a6b94c 100644 --- a/packages/vant/src/radio/index.less +++ b/packages/vant/src/radio/index.less @@ -1,13 +1,13 @@ :root { --van-radio-size: 20px; --van-radio-border-color: var(--van-gray-5); - --van-radio-transition-duration: var(--van-animation-duration-fast); + --van-radio-duration: var(--van-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-primary-color); --van-radio-disabled-icon-color: var(--van-gray-5); --van-radio-disabled-label-color: var(--van-text-color-tertiary); - --van-radio-disabled-background-color: var(--van-border-color); + --van-radio-disabled-background: var(--van-border-color); } .van-radio { @@ -46,7 +46,7 @@ line-height: 1.25; text-align: center; border: 1px solid var(--van-radio-border-color); - transition-duration: var(--van-radio-transition-duration); + transition-duration: var(--van-radio-duration); transition-property: color, border-color, background-color; } @@ -68,7 +68,7 @@ cursor: not-allowed; .van-icon { - background-color: var(--van-radio-disabled-background-color); + background-color: var(--van-radio-disabled-background); border-color: var(--van-radio-disabled-icon-color); } } diff --git a/packages/vant/src/search/README.md b/packages/vant/src/search/README.md index 9683b5b81..0ceb3234c 100644 --- a/packages/vant/src/search/README.md +++ b/packages/vant/src/search/README.md @@ -202,8 +202,8 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --van-search-padding | _10px var(--van-padding-sm)_ | - | -| --van-search-background-color | _var(--van-background-color-light)_ | - | -| --van-search-content-background-color | _var(--van-gray-1)_ | - | +| --van-search-background | _var(--van-background-light)_ | - | +| --van-search-content-background | _var(--van-gray-1)_ | - | | --van-search-input-height | _34px_ | - | | --van-search-label-padding | _0 5px_ | - | | --van-search-label-color | _var(--van-text-color)_ | - | diff --git a/packages/vant/src/search/README.zh-CN.md b/packages/vant/src/search/README.zh-CN.md index 824425b4b..aa1d1494b 100644 --- a/packages/vant/src/search/README.zh-CN.md +++ b/packages/vant/src/search/README.zh-CN.md @@ -211,19 +211,19 @@ searchRef.value?.focus(); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --van-search-padding | _10px var(--van-padding-sm)_ | - | -| --van-search-background-color | _var(--van-background-color-light)_ | - | -| --van-search-content-background-color | _var(--van-gray-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-gray-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)_ | - | +| 名称 | 默认值 | 描述 | +| ------------------------------- | ----------------------------- | ---- | +| --van-search-padding | _10px var(--van-padding-sm)_ | - | +| --van-search-background | _var(--van-background-light)_ | - | +| --van-search-content-background | _var(--van-gray-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-gray-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/packages/vant/src/search/index.less b/packages/vant/src/search/index.less index 7e19ed14d..80ae6fb34 100644 --- a/packages/vant/src/search/index.less +++ b/packages/vant/src/search/index.less @@ -1,7 +1,7 @@ :root { --van-search-padding: 10px var(--van-padding-sm); - --van-search-background-color: var(--van-background-color-light); - --van-search-content-background-color: var(--van-gray-1); + --van-search-background: var(--van-background-light); + --van-search-content-background: var(--van-gray-1); --van-search-input-height: 34px; --van-search-label-padding: 0 5px; --van-search-label-color: var(--van-text-color); @@ -17,17 +17,17 @@ align-items: center; box-sizing: border-box; padding: var(--van-search-padding); - background: var(--van-search-background-color); + background: var(--van-search-background); &__content { display: flex; flex: 1; padding-left: var(--van-padding-sm); - background: var(--van-search-content-background-color); - border-radius: var(--van-border-radius-sm); + background: var(--van-search-content-background); + border-radius: var(--van-radius-sm); &--round { - border-radius: var(--van-border-radius-max); + border-radius: var(--van-radius-max); } } diff --git a/packages/vant/src/share-sheet/README.md b/packages/vant/src/share-sheet/README.md index a5abc6f86..9b2c010da 100644 --- a/packages/vant/src/share-sheet/README.md +++ b/packages/vant/src/share-sheet/README.md @@ -249,4 +249,4 @@ The component provides the following CSS variables, which can be used to customi | --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 | _var(--van-background-color-light)_ | - | +| --van-share-sheet-cancel-button-background | _var(--van-background-light)_ | - | diff --git a/packages/vant/src/share-sheet/README.zh-CN.md b/packages/vant/src/share-sheet/README.zh-CN.md index a1e03dac9..fc43c2db2 100644 --- a/packages/vant/src/share-sheet/README.zh-CN.md +++ b/packages/vant/src/share-sheet/README.zh-CN.md @@ -263,7 +263,7 @@ import type { | --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 | _var(--van-background-color-light)_ | - | +| --van-share-sheet-cancel-button-background | _var(--van-background-light)_ | - | ## 常见问题 diff --git a/packages/vant/src/share-sheet/index.less b/packages/vant/src/share-sheet/index.less index 94a85c45d..5b066ef35 100644 --- a/packages/vant/src/share-sheet/index.less +++ b/packages/vant/src/share-sheet/index.less @@ -15,7 +15,7 @@ --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: var(--van-background-color-light); + --van-share-sheet-cancel-button-background: var(--van-background-light); } .van-share-sheet { @@ -98,7 +98,7 @@ &::before { display: block; height: var(--van-padding-xs); - background-color: var(--van-background-color); + background-color: var(--van-background); content: ' '; } diff --git a/packages/vant/src/sidebar-item/index.less b/packages/vant/src/sidebar-item/index.less index d68314a15..5c84bd10c 100644 --- a/packages/vant/src/sidebar-item/index.less +++ b/packages/vant/src/sidebar-item/index.less @@ -5,13 +5,13 @@ --van-sidebar-disabled-text-color: var(--van-text-color-tertiary); --van-sidebar-padding: 20px var(--van-padding-sm); --van-sidebar-active-color: var(--van-active-color); - --van-sidebar-background-color: var(--van-background-color); - --van-sidebar-selected-font-weight: var(--van-font-weight-bold); + --van-sidebar-background: var(--van-background); + --van-sidebar-selected-font-weight: var(--van-font-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-danger-color); - --van-sidebar-selected-background-color: var(--van-background-color-light); + --van-sidebar-selected-background: var(--van-background-light); } .van-sidebar-item { @@ -23,7 +23,7 @@ color: var(--van-sidebar-text-color); font-size: var(--van-sidebar-font-size); line-height: var(--van-sidebar-line-height); - background: var(--van-sidebar-background-color); + background: var(--van-sidebar-background); cursor: pointer; user-select: none; @@ -46,7 +46,7 @@ &, &:active { - background-color: var(--van-sidebar-selected-background-color); + background-color: var(--van-sidebar-selected-background); } &::before { @@ -66,7 +66,7 @@ cursor: not-allowed; &:active { - background-color: var(--van-sidebar-background-color); + background-color: var(--van-sidebar-background); } } } diff --git a/packages/vant/src/sidebar/README.md b/packages/vant/src/sidebar/README.md index 7d74d0cc0..1e084656f 100644 --- a/packages/vant/src/sidebar/README.md +++ b/packages/vant/src/sidebar/README.md @@ -147,10 +147,10 @@ The component provides the following CSS variables, which can be used to customi | --van-sidebar-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-sidebar-padding | _20px var(--van-padding-sm)_ | - | | --van-sidebar-active-color | _var(--van-active-color)_ | - | -| --van-sidebar-background-color | _var(--van-background-color)_ | - | -| --van-sidebar-selected-font-weight | _var(--van-font-weight-bold)_ | - | +| --van-sidebar-background | _var(--van-background)_ | - | +| --van-sidebar-selected-font-weight | _var(--van-font-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-danger-color)_ | - | -| --van-sidebar-selected-background-color | _var(--van-background-color-light)_ | - | +| --van-sidebar-selected-background | _var(--van-background-light)_ | - | diff --git a/packages/vant/src/sidebar/README.zh-CN.md b/packages/vant/src/sidebar/README.zh-CN.md index 6145560dc..d4a503069 100644 --- a/packages/vant/src/sidebar/README.zh-CN.md +++ b/packages/vant/src/sidebar/README.zh-CN.md @@ -155,10 +155,10 @@ import type { SidebarProps, SidebarItemProps } from 'vant'; | --van-sidebar-disabled-text-color | _var(--van-text-color-tertiary)_ | - | | --van-sidebar-padding | _20px var(--van-padding-sm)_ | - | | --van-sidebar-active-color | _var(--van-active-color)_ | - | -| --van-sidebar-background-color | _var(--van-background-color)_ | - | -| --van-sidebar-selected-font-weight | _var(--van-font-weight-bold)_ | - | +| --van-sidebar-background | _var(--van-background)_ | - | +| --van-sidebar-selected-font-weight | _var(--van-font-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-danger-color)_ | - | -| --van-sidebar-selected-background-color | _var(--van-background-color-light)_ | - | +| --van-sidebar-selected-background | _var(--van-background-light)_ | - | diff --git a/packages/vant/src/skeleton/README.md b/packages/vant/src/skeleton/README.md index 05c006f90..9e167cc23 100644 --- a/packages/vant/src/skeleton/README.md +++ b/packages/vant/src/skeleton/README.md @@ -87,12 +87,12 @@ import type { SkeletonProps, SkeletonAvatarShape } from 'vant'; The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). -| Name | Default Value | Description | -| --- | --- | --- | -| --van-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_ | - | +| Name | Default Value | Description | +| -------------------------------- | ------------------------- | ----------- | +| --van-skeleton-row-height | _16px_ | - | +| --van-skeleton-row-background | _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 | _var(--van-active-color)_ | - | +| --van-skeleton-duration | _1.2s_ | - | diff --git a/packages/vant/src/skeleton/README.zh-CN.md b/packages/vant/src/skeleton/README.zh-CN.md index 32267cdd1..4d0552dfa 100644 --- a/packages/vant/src/skeleton/README.zh-CN.md +++ b/packages/vant/src/skeleton/README.zh-CN.md @@ -93,12 +93,12 @@ import type { SkeletonProps, SkeletonAvatarShape } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| -------------------------------------- | ------------------------- | ---- | -| --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_ | - | +| 名称 | 默认值 | 描述 | +| -------------------------------- | ------------------------- | ---- | +| --van-skeleton-row-height | _16px_ | - | +| --van-skeleton-row-background | _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 | _var(--van-active-color)_ | - | +| --van-skeleton-duration | _1.2s_ | - | diff --git a/packages/vant/src/skeleton/index.less b/packages/vant/src/skeleton/index.less index 87036e46e..61ec79b9d 100644 --- a/packages/vant/src/skeleton/index.less +++ b/packages/vant/src/skeleton/index.less @@ -1,11 +1,11 @@ :root { --van-skeleton-row-height: 16px; - --van-skeleton-row-background-color: var(--van-active-color); + --van-skeleton-row-background: 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; + --van-skeleton-avatar-background: var(--van-active-color); + --van-skeleton-duration: 1.2s; } .van-skeleton { @@ -17,10 +17,10 @@ width: var(--van-skeleton-avatar-size); height: var(--van-skeleton-avatar-size); margin-right: var(--van-padding-md); - background: var(--van-skeleton-avatar-background-color); + background: var(--van-skeleton-avatar-background); &--round { - border-radius: var(--van-border-radius-max); + border-radius: var(--van-radius-max); } } @@ -35,7 +35,7 @@ &__row, &__title { height: var(--van-skeleton-row-height); - background: var(--van-skeleton-row-background-color); + background: var(--van-skeleton-row-background); } &__title { @@ -54,14 +54,14 @@ } &--animate { - animation: van-skeleton-blink var(--van-skeleton-animation-duration) - ease-in-out infinite; + animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out + infinite; } &--round { .van-skeleton__row, .van-skeleton__title { - border-radius: var(--van-border-radius-max); + border-radius: var(--van-radius-max); } } } diff --git a/packages/vant/src/slider/README.md b/packages/vant/src/slider/README.md index 6a8936ba8..c36b6ef3d 100644 --- a/packages/vant/src/slider/README.md +++ b/packages/vant/src/slider/README.md @@ -197,12 +197,12 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-slider-active-background-color | _var(--van-primary-color)_ | - | -| --van-slider-inactive-background-color | _var(--van-gray-3)_ | - | +| --van-slider-active-background | _var(--van-primary-color)_ | - | +| --van-slider-inactive-background | _var(--van-gray-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 | _var(--van-white)_ | - | -| --van-slider-button-box-shadow | _0 1px 2px rgba(0, 0, 0, 0.5)_ | - | +| --van-slider-button-radius | _50%_ | - | +| --van-slider-button-background | _var(--van-white)_ | - | +| --van-slider-button-shadow | _0 1px 2px rgba(0, 0, 0, 0.5)_ | - | diff --git a/packages/vant/src/slider/README.zh-CN.md b/packages/vant/src/slider/README.zh-CN.md index 560c91c45..c8f68229f 100644 --- a/packages/vant/src/slider/README.zh-CN.md +++ b/packages/vant/src/slider/README.zh-CN.md @@ -197,14 +197,14 @@ import type { SliderProps } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --van-slider-active-background-color | _var(--van-primary-color)_ | - | -| --van-slider-inactive-background-color | _var(--van-gray-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 | _var(--van-white)_ | - | -| --van-slider-button-box-shadow | _0 1px 2px rgba(0, 0, 0, 0.5)_ | - | +| 名称 | 默认值 | 描述 | +| -------------------------------- | ------------------------------ | ---- | +| --van-slider-active-background | _var(--van-primary-color)_ | - | +| --van-slider-inactive-background | _var(--van-gray-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-radius | _50%_ | - | +| --van-slider-button-background | _var(--van-white)_ | - | +| --van-slider-button-shadow | _0 1px 2px rgba(0, 0, 0, 0.5)_ | - | diff --git a/packages/vant/src/slider/index.less b/packages/vant/src/slider/index.less index 5983ef92e..0275d2d01 100644 --- a/packages/vant/src/slider/index.less +++ b/packages/vant/src/slider/index.less @@ -1,21 +1,21 @@ :root { - --van-slider-active-background-color: var(--van-primary-color); - --van-slider-inactive-background-color: var(--van-gray-3); + --van-slider-active-background: var(--van-primary-color); + --van-slider-inactive-background: var(--van-gray-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: var(--van-white); - --van-slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + --van-slider-button-radius: 50%; + --van-slider-button-background: var(--van-white); + --van-slider-button-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .van-slider { position: relative; width: 100%; height: var(--van-slider-bar-height); - background: var(--van-slider-inactive-background-color); - border-radius: var(--van-border-radius-max); + background: var(--van-slider-inactive-background); + border-radius: var(--van-radius-max); cursor: pointer; // use pseudo element to expand click area @@ -32,17 +32,17 @@ position: absolute; width: 100%; height: 100%; - background: var(--van-slider-active-background-color); + background: var(--van-slider-active-background); border-radius: inherit; - transition: all var(--van-animation-duration-fast); + transition: all var(--van-duration-fast); } &__button { width: var(--van-slider-button-width); height: var(--van-slider-button-height); - background: var(--van-slider-button-background-color); - border-radius: var(--van-slider-button-border-radius); - box-shadow: var(--van-slider-button-box-shadow); + background: var(--van-slider-button-background); + border-radius: var(--van-slider-button-radius); + box-shadow: var(--van-slider-button-shadow); &-wrapper { position: absolute; diff --git a/packages/vant/src/step/index.less b/packages/vant/src/step/index.less index 5a60150c7..e999f240f 100644 --- a/packages/vant/src/step/index.less +++ b/packages/vant/src/step/index.less @@ -29,7 +29,7 @@ &__line { position: absolute; background-color: var(--van-step-line-color); - transition: background-color var(--van-animation-duration-base); + transition: background-color var(--van-duration-base); } &--horizontal { @@ -64,7 +64,7 @@ left: calc(var(--van-padding-xs) * -1); z-index: 1; padding: 0 var(--van-padding-xs); - background-color: var(--van-background-color-light); + background-color: var(--van-background-light); transform: translateY(-50%); } @@ -137,7 +137,7 @@ &__icon, &__title { - transition: color var(--van-animation-duration-base); + transition: color var(--van-duration-base); &--active, &--finish { diff --git a/packages/vant/src/stepper/README.md b/packages/vant/src/stepper/README.md index c5e030247..06a3a9126 100644 --- a/packages/vant/src/stepper/README.md +++ b/packages/vant/src/stepper/README.md @@ -173,9 +173,9 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-stepper-background-color | _var(--van-active-color)_ | - | +| --van-stepper-background | _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-color | _var(--van-background)_ | - | | --van-stepper-button-disabled-icon-color | _var(--van-gray-5)_ | - | | --van-stepper-button-round-theme-color | _var(--van-danger-color)_ | - | | --van-stepper-input-width | _32px_ | - | @@ -184,5 +184,5 @@ The component provides the following CSS variables, which can be used to customi | --van-stepper-input-line-height | _normal_ | - | | --van-stepper-input-text-color | _var(--van-text-color)_ | - | | --van-stepper-input-disabled-text-color | _var(--van-text-color-tertiary)_ | - | -| --van-stepper-input-disabled-background-color | _var(--van-active-color)_ | - | -| --van-stepper-border-radius | _var(--van-border-radius-md)_ | - | +| --van-stepper-input-disabled-background | _var(--van-active-color)_ | - | +| --van-stepper-radius | _var(--van-radius-md)_ | - | diff --git a/packages/vant/src/stepper/README.zh-CN.md b/packages/vant/src/stepper/README.zh-CN.md index ac3b6fb09..190400cfb 100644 --- a/packages/vant/src/stepper/README.zh-CN.md +++ b/packages/vant/src/stepper/README.zh-CN.md @@ -193,9 +193,9 @@ import type { StepperTheme, StepperProps } from 'vant'; | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-stepper-background-color | _var(--van-active-color)_ | - | +| --van-stepper-background | _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-color | _var(--van-background)_ | - | | --van-stepper-button-disabled-icon-color | _var(--van-gray-5)_ | - | | --van-stepper-button-round-theme-color | _var(--van-danger-color)_ | - | | --van-stepper-input-width | _32px_ | - | @@ -204,8 +204,8 @@ import type { StepperTheme, StepperProps } from 'vant'; | --van-stepper-input-line-height | _normal_ | - | | --van-stepper-input-text-color | _var(--van-text-color)_ | - | | --van-stepper-input-disabled-text-color | _var(--van-text-color-tertiary)_ | - | -| --van-stepper-input-disabled-background-color | _var(--van-active-color)_ | - | -| --van-stepper-border-radius | _var(--van-border-radius-md)_ | - | +| --van-stepper-input-disabled-background | _var(--van-active-color)_ | - | +| --van-stepper-radius | _var(--van-radius-md)_ | - | ## 常见问题 diff --git a/packages/vant/src/stepper/index.less b/packages/vant/src/stepper/index.less index bd5cb924f..5e7530522 100644 --- a/packages/vant/src/stepper/index.less +++ b/packages/vant/src/stepper/index.less @@ -1,7 +1,7 @@ :root { - --van-stepper-background-color: var(--van-active-color); + --van-stepper-background: 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-color: var(--van-background); --van-stepper-button-disabled-icon-color: var(--van-gray-5); --van-stepper-button-round-theme-color: var(--van-danger-color); --van-stepper-input-width: 32px; @@ -10,8 +10,8 @@ --van-stepper-input-line-height: normal; --van-stepper-input-text-color: var(--van-text-color); --van-stepper-input-disabled-text-color: var(--van-text-color-tertiary); - --van-stepper-input-disabled-background-color: var(--van-active-color); - --van-stepper-border-radius: var(--van-border-radius-md); + --van-stepper-input-disabled-background: var(--van-active-color); + --van-stepper-radius: var(--van-radius-md); } .van-stepper { @@ -28,7 +28,7 @@ padding: 0; color: var(--van-stepper-button-icon-color); vertical-align: middle; - background: var(--van-stepper-background-color); + background: var(--van-stepper-background); border: 0; cursor: pointer; @@ -60,8 +60,7 @@ } &__minus { - border-radius: var(--van-stepper-border-radius) 0 0 - var(--van-stepper-border-radius); + border-radius: var(--van-stepper-radius) 0 0 var(--van-stepper-radius); &::after { display: none; @@ -69,8 +68,7 @@ } &__plus { - border-radius: 0 var(--van-stepper-border-radius) - var(--van-stepper-border-radius) 0; + border-radius: 0 var(--van-stepper-radius) var(--van-stepper-radius) 0; } &__input { @@ -84,7 +82,7 @@ line-height: var(--van-stepper-input-line-height); text-align: center; vertical-align: middle; - background: var(--van-stepper-background-color); + background: var(--van-stepper-background); border: 0; border-width: 1px 0; border-radius: 0; @@ -92,7 +90,7 @@ &:disabled { color: var(--van-stepper-input-disabled-text-color); - background-color: var(--van-stepper-input-disabled-background-color); + background-color: var(--van-stepper-input-disabled-background); // fix disabled color in iOS -webkit-text-fill-color: var(--van-stepper-input-disabled-text-color); opacity: 1; @@ -125,7 +123,7 @@ .van-stepper__minus { color: var(--van-stepper-button-round-theme-color); - background-color: var(--van-background-color-light); + background-color: var(--van-background-light); border: 1px solid var(--van-stepper-button-round-theme-color); } } diff --git a/packages/vant/src/steps/README.md b/packages/vant/src/steps/README.md index de1bc1b00..9bd9500cc 100644 --- a/packages/vant/src/steps/README.md +++ b/packages/vant/src/steps/README.md @@ -128,4 +128,4 @@ The component provides the following CSS variables, which can be used to customi | --van-step-circle-size | _5px_ | - | | --van-step-circle-color | _var(--van-gray-6)_ | - | | --van-step-horizontal-title-font-size | _var(--van-font-size-sm)_ | - | -| --van-steps-background-color | _var(--van-background-color-light)_ | - | +| --van-steps-background | _var(--van-background-light)_ | - | diff --git a/packages/vant/src/steps/README.zh-CN.md b/packages/vant/src/steps/README.zh-CN.md index 1fc3e5c57..ee058f3e5 100644 --- a/packages/vant/src/steps/README.zh-CN.md +++ b/packages/vant/src/steps/README.zh-CN.md @@ -134,4 +134,4 @@ import type { StepsProps, StepsDirection } from 'vant'; | --van-step-circle-size | _5px_ | - | | --van-step-circle-color | _var(--van-gray-6)_ | - | | --van-step-horizontal-title-font-size | _var(--van-font-size-sm)_ | - | -| --van-steps-background-color | _var(--van-background-color-light)_ | - | +| --van-steps-background | _var(--van-background-light)_ | - | diff --git a/packages/vant/src/steps/index.less b/packages/vant/src/steps/index.less index 5cd4624a5..74a624389 100644 --- a/packages/vant/src/steps/index.less +++ b/packages/vant/src/steps/index.less @@ -1,10 +1,10 @@ :root { - --van-steps-background-color: var(--van-background-color-light); + --van-steps-background: var(--van-background-light); } .van-steps { overflow: hidden; - background-color: var(--van-steps-background-color); + background-color: var(--van-steps-background); &--horizontal { padding: 10px 10px 0; diff --git a/packages/vant/src/style/animation.less b/packages/vant/src/style/animation.less index 4698e5cb5..a909bbe0d 100644 --- a/packages/vant/src/style/animation.less +++ b/packages/vant/src/style/animation.less @@ -78,60 +78,58 @@ .van-fade { &-enter-active { - animation: var(--van-animation-duration-base) van-fade-in both - var(--van-animation-timing-function-enter); + animation: var(--van-duration-base) van-fade-in both var(--van-ease-out); } &-leave-active { - animation: var(--van-animation-duration-base) van-fade-out both - var(--van-animation-timing-function-leave); + animation: var(--van-duration-base) van-fade-out both var(--van-ease-in); } } .van-slide-up { &-enter-active { - animation: van-slide-up-enter var(--van-animation-duration-base) both - var(--van-animation-timing-function-enter); + animation: van-slide-up-enter var(--van-duration-base) both + var(--van-ease-out); } &-leave-active { - animation: van-slide-up-leave var(--van-animation-duration-base) both - var(--van-animation-timing-function-leave); + animation: van-slide-up-leave var(--van-duration-base) both + var(--van-ease-in); } } .van-slide-down { &-enter-active { - animation: van-slide-down-enter var(--van-animation-duration-base) both - var(--van-animation-timing-function-enter); + animation: van-slide-down-enter var(--van-duration-base) both + var(--van-ease-out); } &-leave-active { - animation: van-slide-down-leave var(--van-animation-duration-base) both - var(--van-animation-timing-function-leave); + animation: van-slide-down-leave var(--van-duration-base) both + var(--van-ease-in); } } .van-slide-left { &-enter-active { - animation: van-slide-left-enter var(--van-animation-duration-base) both - var(--van-animation-timing-function-enter); + animation: van-slide-left-enter var(--van-duration-base) both + var(--van-ease-out); } &-leave-active { - animation: van-slide-left-leave var(--van-animation-duration-base) both - var(--van-animation-timing-function-leave); + animation: van-slide-left-leave var(--van-duration-base) both + var(--van-ease-in); } } .van-slide-right { &-enter-active { - animation: van-slide-right-enter var(--van-animation-duration-base) both - var(--van-animation-timing-function-enter); + animation: van-slide-right-enter var(--van-duration-base) both + var(--van-ease-out); } &-leave-active { - animation: van-slide-right-leave var(--van-animation-duration-base) both - var(--van-animation-timing-function-leave); + animation: van-slide-right-leave var(--van-duration-base) both + var(--van-ease-in); } } diff --git a/packages/vant/src/style/base.less b/packages/vant/src/style/base.less index 43c4f5537..135244874 100644 --- a/packages/vant/src/style/base.less +++ b/packages/vant/src/style/base.less @@ -52,29 +52,29 @@ } &--top::after { - border-top-width: var(--van-border-width-base); + border-top-width: var(--van-border-width); } &--left::after { - border-left-width: var(--van-border-width-base); + border-left-width: var(--van-border-width); } &--right::after { - border-right-width: var(--van-border-width-base); + border-right-width: var(--van-border-width); } &--bottom::after { - border-bottom-width: var(--van-border-width-base); + border-bottom-width: var(--van-border-width); } &, &-unset { &--top-bottom::after { - border-width: var(--van-border-width-base) 0; + border-width: var(--van-border-width) 0; } } &--surround::after { - border-width: var(--van-border-width-base); + border-width: var(--van-border-width); } } diff --git a/packages/vant/src/style/css-variables.less b/packages/vant/src/style/css-variables.less index 1c8026d5c..0583954e1 100644 --- a/packages/vant/src/style/css-variables.less +++ b/packages/vant/src/style/css-variables.less @@ -29,12 +29,12 @@ --van-text-color: var(--van-gray-8); --van-text-color-secondary: var(--van-gray-6); --van-text-color-tertiary: var(--van-gray-5); - --van-text-link-color: #576b95; + --van-link-color: #576b95; --van-active-color: var(--van-gray-2); --van-active-opacity: 0.6; --van-disabled-opacity: 0.5; - --van-background-color: var(--van-gray-1); - --van-background-color-light: var(--van-white); + --van-background: var(--van-gray-1); + --van-background-light: var(--van-white); // Padding --van-padding-base: 4px; @@ -45,30 +45,32 @@ --van-padding-xl: 32px; // Font + --van-font-bold: 500; --van-font-size-xs: 10px; --van-font-size-sm: 12px; --van-font-size-md: 14px; --van-font-size-lg: 16px; - --van-font-weight-bold: 500; --van-line-height-xs: 14px; --van-line-height-sm: 18px; --van-line-height-md: 20px; --van-line-height-lg: 22px; - --van-base-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue'; - --van-price-integer-font-family: avenir-heavy, pingfang sc, helvetica neue, - arial; + --van-base-font: -apple-system, blinkmacsystemfont, 'Helvetica Neue', + helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui', + 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; + --van-price-font: avenir-heavy, pingfang sc, helvetica neue, arial, + sans-serif; // Animation - --van-animation-duration-base: 0.3s; - --van-animation-duration-fast: 0.2s; - --van-animation-timing-function-enter: ease-out; - --van-animation-timing-function-leave: ease-in; + --van-duration-base: 0.3s; + --van-duration-fast: 0.2s; + --van-ease-out: ease-out; + --van-ease-in: ease-in; // Border --van-border-color: var(--van-gray-3); - --van-border-width-base: 1px; - --van-border-radius-sm: 2px; - --van-border-radius-md: 4px; - --van-border-radius-lg: 8px; - --van-border-radius-max: 999px; + --van-border-width: 1px; + --van-radius-sm: 2px; + --van-radius-md: 4px; + --van-radius-lg: 8px; + --van-radius-max: 999px; } diff --git a/packages/vant/src/style/normalize.less b/packages/vant/src/style/normalize.less index 4cf8d1a7a..fa066bc4b 100644 --- a/packages/vant/src/style/normalize.less +++ b/packages/vant/src/style/normalize.less @@ -4,7 +4,7 @@ html { body { margin: 0; - font-family: var(--van-base-font-family); + font-family: var(--van-base-font); } a { diff --git a/packages/vant/src/submit-bar/README.md b/packages/vant/src/submit-bar/README.md index 9bab937bf..4a8c35508 100644 --- a/packages/vant/src/submit-bar/README.md +++ b/packages/vant/src/submit-bar/README.md @@ -140,19 +140,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 | _var(--van-background-color-light)_ | - | +| --van-submit-bar-background | _var(--van-background-light)_ | - | | --van-submit-bar-button-width | _110px_ | - | | --van-submit-bar-price-color | _var(--van-danger-color)_ | - | | --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 | _var(--van-price-integer-font-family)_ | - | +| --van-submit-bar-price-font | _var(--van-price-font)_ | - | | --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 | _var(--van-orange-dark)_ | - | -| --van-submit-bar-tip-background-color | _var(--van-orange-light)_ | - | +| --van-submit-bar-tip-background | _var(--van-orange-light)_ | - | | --van-submit-bar-tip-icon-size | _12px_ | - | | --van-submit-bar-button-height | _40px_ | - | | --van-submit-bar-padding | _0 var(--van-padding-md)_ | - | diff --git a/packages/vant/src/submit-bar/README.zh-CN.md b/packages/vant/src/submit-bar/README.zh-CN.md index 6a7d6ad95..908159797 100644 --- a/packages/vant/src/submit-bar/README.zh-CN.md +++ b/packages/vant/src/submit-bar/README.zh-CN.md @@ -147,19 +147,19 @@ import type { SubmitBarProps } from 'vant'; | --- | --- | --- | | --van-submit-bar-height | _50px_ | - | | --van-submit-bar-z-index | _100_ | - | -| --van-submit-bar-background-color | _var(--van-background-color-light)_ | - | +| --van-submit-bar-background | _var(--van-background-light)_ | - | | --van-submit-bar-button-width | _110px_ | - | | --van-submit-bar-price-color | _var(--van-danger-color)_ | - | | --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 | _var(--van-price-integer-font-family)_ | - | +| --van-submit-bar-price-font | _var(--van-price-font)_ | - | | --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 | _var(--van-orange-dark)_ | - | -| --van-submit-bar-tip-background-color | _var(--van-orange-light)_ | - | +| --van-submit-bar-tip-background | _var(--van-orange-light)_ | - | | --van-submit-bar-tip-icon-size | _12px_ | - | | --van-submit-bar-button-height | _40px_ | - | | --van-submit-bar-padding | _0 var(--van-padding-md)_ | - | diff --git a/packages/vant/src/submit-bar/index.less b/packages/vant/src/submit-bar/index.less index e55a4f907..966cf3a36 100644 --- a/packages/vant/src/submit-bar/index.less +++ b/packages/vant/src/submit-bar/index.less @@ -1,12 +1,12 @@ :root { --van-submit-bar-height: 50px; --van-submit-bar-z-index: 100; - --van-submit-bar-background-color: var(--van-background-color-light); + --van-submit-bar-background: var(--van-background-light); --van-submit-bar-button-width: 110px; --van-submit-bar-price-color: var(--van-danger-color); --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: var(--van-price-integer-font-family); + --van-submit-bar-price-font: var(--van-price-font); --van-submit-bar-currency-font-size: var(--van-font-size-md); --van-submit-bar-text-color: var(--van-text-color); --van-submit-bar-text-font-size: var(--van-font-size-md); @@ -14,7 +14,7 @@ --van-submit-bar-tip-font-size: var(--van-font-size-sm); --van-submit-bar-tip-line-height: 1.5; --van-submit-bar-tip-color: var(--van-orange-dark); - --van-submit-bar-tip-background-color: var(--van-orange-light); + --van-submit-bar-tip-background: var(--van-orange-light); --van-submit-bar-tip-icon-size: 12px; --van-submit-bar-button-height: 40px; --van-submit-bar-padding: 0 var(--van-padding-md); @@ -26,7 +26,7 @@ left: 0; z-index: var(--van-submit-bar-z-index); width: 100%; - background: var(--van-submit-bar-background-color); + background: var(--van-submit-bar-background); user-select: none; &__tip { @@ -34,7 +34,7 @@ color: var(--van-submit-bar-tip-color); font-size: var(--van-submit-bar-tip-font-size); line-height: var(--van-submit-bar-tip-line-height); - background: var(--van-submit-bar-tip-background-color); + background: var(--van-submit-bar-tip-background); } &__tip-icon { @@ -69,24 +69,24 @@ &__suffix-label { margin-left: var(--van-padding-base); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); } &__price { color: var(--van-submit-bar-price-color); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); font-size: var(--van-submit-bar-price-font-size); &-integer { font-size: var(--van-submit-bar-price-integer-font-size); - font-family: var(--van-submit-bar-price-font-family); + font-family: var(--van-submit-bar-price-font); } } &__button { width: var(--van-submit-bar-button-width); height: var(--van-submit-bar-button-height); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); border: none; &--danger { diff --git a/packages/vant/src/swipe/README.md b/packages/vant/src/swipe/README.md index 4b93268af..c29db937a 100644 --- a/packages/vant/src/swipe/README.md +++ b/packages/vant/src/swipe/README.md @@ -223,5 +223,5 @@ The component provides the following CSS variables, which can be used to customi | --van-swipe-indicator-margin | _var(--van-padding-sm)_ | - | | --van-swipe-indicator-active-opacity | _1_ | - | | --van-swipe-indicator-inactive-opacity | _0.3_ | - | -| --van-swipe-indicator-active-background-color | _var(--van-primary-color)_ | - | -| --van-swipe-indicator-inactive-background-color | _var(--van-border-color)_ | - | +| --van-swipe-indicator-active-background | _var(--van-primary-color)_ | - | +| --van-swipe-indicator-inactive-background | _var(--van-border-color)_ | - | diff --git a/packages/vant/src/swipe/README.zh-CN.md b/packages/vant/src/swipe/README.zh-CN.md index 43abd9e4c..e1280f2f9 100644 --- a/packages/vant/src/swipe/README.zh-CN.md +++ b/packages/vant/src/swipe/README.zh-CN.md @@ -231,8 +231,8 @@ swipeRef.value?.next(); | --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-primary-color)_ | - | -| --van-swipe-indicator-inactive-background-color | _var(--van-border-color)_ | - | +| --van-swipe-indicator-active-background | _var(--van-primary-color)_ | - | +| --van-swipe-indicator-inactive-background | _var(--van-border-color)_ | - | ## 常见问题 diff --git a/packages/vant/src/swipe/index.less b/packages/vant/src/swipe/index.less index f866d3fbe..fb133d7a7 100644 --- a/packages/vant/src/swipe/index.less +++ b/packages/vant/src/swipe/index.less @@ -3,8 +3,8 @@ --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-primary-color); - --van-swipe-indicator-inactive-background-color: var(--van-border-color); + --van-swipe-indicator-active-background: var(--van-primary-color); + --van-swipe-indicator-inactive-background: var(--van-border-color); } .van-swipe { @@ -45,18 +45,18 @@ &__indicator { width: var(--van-swipe-indicator-size); height: var(--van-swipe-indicator-size); - background-color: var(--van-swipe-indicator-inactive-background-color); + background-color: var(--van-swipe-indicator-inactive-background); border-radius: 100%; opacity: var(--van-swipe-indicator-inactive-opacity); - transition: opacity var(--van-animation-duration-fast), - background-color var(--van-animation-duration-fast); + transition: opacity var(--van-duration-fast), + background-color var(--van-duration-fast); &:not(:last-child) { margin-right: var(--van-swipe-indicator-size); } &--active { - background-color: var(--van-swipe-indicator-active-background-color); + background-color: var(--van-swipe-indicator-active-background); opacity: var(--van-swipe-indicator-active-opacity); } } diff --git a/packages/vant/src/switch/README.md b/packages/vant/src/switch/README.md index 891f235f5..544ddf0ae 100644 --- a/packages/vant/src/switch/README.md +++ b/packages/vant/src/switch/README.md @@ -141,10 +141,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 | _var(--van-white)_ | - | -| --van-switch-node-box-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - | -| --van-switch-background-color | _var(--van-background-color-light)_ | - | -| --van-switch-on-background-color | _var(--van-primary-color)_ | - | -| --van-switch-transition-duration | _var(--van-animation-duration-base)_ | - | +| --van-switch-node-background | _var(--van-white)_ | - | +| --van-switch-node-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - | +| --van-switch-background | _var(--van-background-light)_ | - | +| --van-switch-on-background | _var(--van-primary-color)_ | - | +| --van-switch-duration | _var(--van-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)_ | - | +| --van-switch-border | _var(--van-border-width) solid rgba(0, 0, 0, 0.1)_ | - | diff --git a/packages/vant/src/switch/README.zh-CN.md b/packages/vant/src/switch/README.zh-CN.md index 1060bde00..2aa598f5b 100644 --- a/packages/vant/src/switch/README.zh-CN.md +++ b/packages/vant/src/switch/README.zh-CN.md @@ -153,10 +153,10 @@ import type { SwitchProps } from 'vant'; | --van-switch-width | _2em_ | - | | --van-switch-height | _1em_ | - | | --van-switch-node-size | _1em_ | - | -| --van-switch-node-background-color | _var(--van-white)_ | - | -| --van-switch-node-box-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - | -| --van-switch-background-color | _var(--van-background-color-light)_ | - | -| --van-switch-on-background-color | _var(--van-primary-color)_ | - | -| --van-switch-transition-duration | _var(--van-animation-duration-base)_ | - | +| --van-switch-node-background | _var(--van-white)_ | - | +| --van-switch-node-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - | +| --van-switch-background | _var(--van-background-light)_ | - | +| --van-switch-on-background | _var(--van-primary-color)_ | - | +| --van-switch-duration | _var(--van-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)_ | - | +| --van-switch-border | _var(--van-border-width) solid rgba(0, 0, 0, 0.1)_ | - | diff --git a/packages/vant/src/switch/index.less b/packages/vant/src/switch/index.less index 2bcd3fe57..980008bca 100644 --- a/packages/vant/src/switch/index.less +++ b/packages/vant/src/switch/index.less @@ -3,13 +3,13 @@ --van-switch-width: 2em; --van-switch-height: 1em; --van-switch-node-size: 1em; - --van-switch-node-background-color: var(--van-white); - --van-switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05); - --van-switch-background-color: var(--van-background-color-light); - --van-switch-on-background-color: var(--van-primary-color); - --van-switch-transition-duration: var(--van-animation-duration-base); + --van-switch-node-background: var(--van-white); + --van-switch-node-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05); + --van-switch-background: var(--van-background-light); + --van-switch-on-background: var(--van-primary-color); + --van-switch-duration: var(--van-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); + --van-switch-border: var(--van-border-width) solid rgba(0, 0, 0, 0.1); } .van-switch { @@ -19,11 +19,11 @@ width: var(--van-switch-width); height: var(--van-switch-height); font-size: var(--van-switch-size); - background: var(--van-switch-background-color); + background: var(--van-switch-background); border: var(--van-switch-border); border-radius: var(--van-switch-node-size); cursor: pointer; - transition: background-color var(--van-switch-transition-duration); + transition: background-color var(--van-switch-duration); &__node { position: absolute; @@ -31,10 +31,10 @@ left: 0; width: var(--van-switch-node-size); height: var(--van-switch-node-size); - background: var(--van-switch-node-background-color); + background: var(--van-switch-node-background); border-radius: 100%; - box-shadow: var(--van-switch-node-box-shadow); - transition: transform var(--van-switch-transition-duration) + box-shadow: var(--van-switch-node-shadow); + transition: transform var(--van-switch-duration) cubic-bezier(0.3, 1.05, 0.4, 1.05); } @@ -47,7 +47,7 @@ } &--on { - background: var(--van-switch-on-background-color); + background: var(--van-switch-on-background); .van-switch__node { transform: translateX( @@ -56,7 +56,7 @@ } .van-switch__loading { - color: var(--van-switch-on-background-color); + color: var(--van-switch-on-background); } } diff --git a/packages/vant/src/tab/README.md b/packages/vant/src/tab/README.md index 5a7e184e2..ffc90945e 100644 --- a/packages/vant/src/tab/README.md +++ b/packages/vant/src/tab/README.md @@ -329,7 +329,7 @@ The component provides the following CSS variables, which can be used to customi | --van-tabs-default-color | _var(--van-danger-color)_ | - | | --van-tabs-line-height | _44px_ | - | | --van-tabs-card-height | _30px_ | - | -| --van-tabs-nav-background-color | _var(--van-background-color-light)_ | - | +| --van-tabs-nav-background | _var(--van-background-light)_ | - | | --van-tabs-bottom-bar-width | _40px_ | - | | --van-tabs-bottom-bar-height | _3px_ | - | | --van-tabs-bottom-bar-color | _var(--van-danger-color)_ | - | diff --git a/packages/vant/src/tab/README.zh-CN.md b/packages/vant/src/tab/README.zh-CN.md index 32dae46f7..f92d5f210 100644 --- a/packages/vant/src/tab/README.zh-CN.md +++ b/packages/vant/src/tab/README.zh-CN.md @@ -334,20 +334,20 @@ tabsRef.value?.scrollTo(0); 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------- | ----------------------------------- | ---- | -| --van-tab-text-color | _var(--van-gray-7)_ | - | -| --van-tab-active-text-color | _var(--van-text-color)_ | - | -| --van-tab-disabled-text-color | _var(--van-text-color-tertiary)_ | - | -| --van-tab-font-size | _var(--van-font-size-md)_ | - | -| --van-tab-line-height | _var(--van-line-height-md)_ | - | -| --van-tabs-default-color | _var(--van-danger-color)_ | - | -| --van-tabs-line-height | _44px_ | - | -| --van-tabs-card-height | _30px_ | - | -| --van-tabs-nav-background-color | _var(--van-background-color-light)_ | - | -| --van-tabs-bottom-bar-width | _40px_ | - | -| --van-tabs-bottom-bar-height | _3px_ | - | -| --van-tabs-bottom-bar-color | _var(--van-danger-color)_ | - | +| 名称 | 默认值 | 描述 | +| ----------------------------- | -------------------------------- | ---- | +| --van-tab-text-color | _var(--van-gray-7)_ | - | +| --van-tab-active-text-color | _var(--van-text-color)_ | - | +| --van-tab-disabled-text-color | _var(--van-text-color-tertiary)_ | - | +| --van-tab-font-size | _var(--van-font-size-md)_ | - | +| --van-tab-line-height | _var(--van-line-height-md)_ | - | +| --van-tabs-default-color | _var(--van-danger-color)_ | - | +| --van-tabs-line-height | _44px_ | - | +| --van-tabs-card-height | _30px_ | - | +| --van-tabs-nav-background | _var(--van-background-light)_ | - | +| --van-tabs-bottom-bar-width | _40px_ | - | +| --van-tabs-bottom-bar-height | _3px_ | - | +| --van-tabs-bottom-bar-color | _var(--van-danger-color)_ | - | ## 常见问题 diff --git a/packages/vant/src/tabbar-item/index.less b/packages/vant/src/tabbar-item/index.less index 87cc2efa2..b25535cd9 100644 --- a/packages/vant/src/tabbar-item/index.less +++ b/packages/vant/src/tabbar-item/index.less @@ -2,7 +2,7 @@ --van-tabbar-item-font-size: var(--van-font-size-sm); --van-tabbar-item-text-color: var(--van-gray-7); --van-tabbar-item-active-color: var(--van-primary-color); - --van-tabbar-item-active-background-color: var(--van-background-color-light); + --van-tabbar-item-active-background: var(--van-background-light); --van-tabbar-item-line-height: 1; --van-tabbar-item-icon-size: 22px; --van-tabbar-item-icon-margin-bottom: var(--van-padding-base); @@ -39,6 +39,6 @@ &--active { color: var(--van-tabbar-item-active-color); - background-color: var(--van-tabbar-item-active-background-color); + background-color: var(--van-tabbar-item-active-background); } } diff --git a/packages/vant/src/tabbar/README.md b/packages/vant/src/tabbar/README.md index cdcc8e407..dfce7c097 100644 --- a/packages/vant/src/tabbar/README.md +++ b/packages/vant/src/tabbar/README.md @@ -218,11 +218,11 @@ The component provides the following CSS variables, which can be used to customi | --- | --- | --- | | --van-tabbar-height | _50px_ | - | | --van-tabbar-z-index | _1_ | - | -| --van-tabbar-background-color | _var(--van-background-color-light)_ | - | +| --van-tabbar-background | _var(--van-background-light)_ | - | | --van-tabbar-item-font-size | _var(--van-font-size-sm)_ | - | | --van-tabbar-item-text-color | _var(--van-gray-7)_ | - | | --van-tabbar-item-active-color | _var(--van-primary-color)_ | - | -| --van-tabbar-item-active-background-color | _var(--van-background-color-light)_ | - | +| --van-tabbar-item-active-background | _var(--van-background-light)_ | - | | --van-tabbar-item-line-height | _1_ | - | | --van-tabbar-item-icon-size | _22px_ | - | | --van-tabbar-item-icon-margin-bottom | _var(--van-padding-base)_ | - | diff --git a/packages/vant/src/tabbar/README.zh-CN.md b/packages/vant/src/tabbar/README.zh-CN.md index 404c115cb..943b0f103 100644 --- a/packages/vant/src/tabbar/README.zh-CN.md +++ b/packages/vant/src/tabbar/README.zh-CN.md @@ -226,15 +226,15 @@ import type { TabbarProps, TabbarItemProps } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --van-tabbar-height | _50px_ | - | -| --van-tabbar-z-index | _1_ | - | -| --van-tabbar-background-color | _var(--van-background-color-light)_ | - | -| --van-tabbar-item-font-size | _var(--van-font-size-sm)_ | - | -| --van-tabbar-item-text-color | _var(--van-gray-7)_ | - | -| --van-tabbar-item-active-color | _var(--van-primary-color)_ | - | -| --van-tabbar-item-active-background-color | _var(--van-background-color-light)_ | - | -| --van-tabbar-item-line-height | _1_ | - | -| --van-tabbar-item-icon-size | _22px_ | - | -| --van-tabbar-item-icon-margin-bottom | _var(--van-padding-base)_ | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------ | ----------------------------- | ---- | +| --van-tabbar-height | _50px_ | - | +| --van-tabbar-z-index | _1_ | - | +| --van-tabbar-background | _var(--van-background-light)_ | - | +| --van-tabbar-item-font-size | _var(--van-font-size-sm)_ | - | +| --van-tabbar-item-text-color | _var(--van-gray-7)_ | - | +| --van-tabbar-item-active-color | _var(--van-primary-color)_ | - | +| --van-tabbar-item-active-background | _var(--van-background-light)_ | - | +| --van-tabbar-item-line-height | _1_ | - | +| --van-tabbar-item-icon-size | _22px_ | - | +| --van-tabbar-item-icon-margin-bottom | _var(--van-padding-base)_ | - | diff --git a/packages/vant/src/tabbar/index.less b/packages/vant/src/tabbar/index.less index fc005e871..2a32c851b 100644 --- a/packages/vant/src/tabbar/index.less +++ b/packages/vant/src/tabbar/index.less @@ -1,7 +1,7 @@ :root { --van-tabbar-height: 50px; --van-tabbar-z-index: 1; - --van-tabbar-background-color: var(--van-background-color-light); + --van-tabbar-background: var(--van-background-light); } .van-tabbar { @@ -10,7 +10,7 @@ box-sizing: content-box; width: 100%; height: var(--van-tabbar-height); - background: var(--van-tabbar-background-color); + background: var(--van-tabbar-background); &--fixed { position: fixed; diff --git a/packages/vant/src/tabs/index.less b/packages/vant/src/tabs/index.less index 819155a58..4a47b28b4 100644 --- a/packages/vant/src/tabs/index.less +++ b/packages/vant/src/tabs/index.less @@ -7,7 +7,7 @@ --van-tabs-default-color: var(--van-danger-color); --van-tabs-line-height: 44px; --van-tabs-card-height: 30px; - --van-tabs-nav-background-color: var(--van-background-color-light); + --van-tabs-nav-background: var(--van-background-light); --van-tabs-bottom-bar-width: 40px; --van-tabs-bottom-bar-height: 3px; --van-tabs-bottom-bar-color: var(--van-danger-color); @@ -28,7 +28,7 @@ &--active { color: var(--van-tab-active-text-color); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); } &--disabled { @@ -82,7 +82,7 @@ &__nav { position: relative; display: flex; - background: var(--van-tabs-nav-background-color); + background: var(--van-tabs-nav-background); user-select: none; &--line { @@ -100,12 +100,12 @@ box-sizing: border-box; height: var(--van-tabs-card-height); margin: 0 var(--van-padding-md); - border: var(--van-border-width-base) solid var(--van-tabs-default-color); - border-radius: var(--van-border-radius-sm); + border: var(--van-border-width) solid var(--van-tabs-default-color); + border-radius: var(--van-radius-sm); .van-tab { color: var(--van-tabs-default-color); - border-right: var(--van-border-width-base) solid + border-right: var(--van-border-width) solid var(--van-tabs-default-color); &:last-child { diff --git a/packages/vant/src/tag/README.md b/packages/vant/src/tag/README.md index e10e0c9bd..084ac3449 100644 --- a/packages/vant/src/tag/README.md +++ b/packages/vant/src/tag/README.md @@ -135,16 +135,16 @@ The component provides the following CSS variables, which can be used to customi | --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-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-radius | _var(--van-radius-md)_ | - | | --van-tag-large-font-size | _var(--van-font-size-md)_ | - | -| --van-tag-round-border-radius | _var(--van-border-radius-max)_ | - | +| --van-tag-round-radius | _var(--van-radius-max)_ | - | | --van-tag-danger-color | _var(--van-danger-color)_ | - | | --van-tag-primary-color | _var(--van-primary-color)_ | - | | --van-tag-success-color | _var(--van-success-color)_ | - | | --van-tag-warning-color | _var(--van-warning-color)_ | - | | --van-tag-default-color | _var(--van-gray-6)_ | - | -| --van-tag-plain-background-color | _var(--van-background-color-light)_ | - | +| --van-tag-plain-background | _var(--van-background-light)_ | - | diff --git a/packages/vant/src/tag/README.zh-CN.md b/packages/vant/src/tag/README.zh-CN.md index 6e3c05fc3..7336f9f2a 100644 --- a/packages/vant/src/tag/README.zh-CN.md +++ b/packages/vant/src/tag/README.zh-CN.md @@ -149,16 +149,16 @@ import type { TagSize, TagType, TagProps } from 'vant'; | --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-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-radius | _var(--van-radius-md)_ | - | | --van-tag-large-font-size | _var(--van-font-size-md)_ | - | -| --van-tag-round-border-radius | _var(--van-border-radius-max)_ | - | +| --van-tag-round-radius | _var(--van-radius-max)_ | - | | --van-tag-danger-color | _var(--van-danger-color)_ | - | | --van-tag-primary-color | _var(--van-primary-color)_ | - | | --van-tag-success-color | _var(--van-success-color)_ | - | | --van-tag-warning-color | _var(--van-warning-color)_ | - | | --van-tag-default-color | _var(--van-gray-6)_ | - | -| --van-tag-plain-background-color | _var(--van-background-color-light)_ | - | +| --van-tag-plain-background | _var(--van-background-light)_ | - | diff --git a/packages/vant/src/tag/index.less b/packages/vant/src/tag/index.less index daf3f2639..5e450a56b 100644 --- a/packages/vant/src/tag/index.less +++ b/packages/vant/src/tag/index.less @@ -2,19 +2,19 @@ --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-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-radius: var(--van-radius-md); --van-tag-large-font-size: var(--van-font-size-md); - --van-tag-round-border-radius: var(--van-border-radius-max); + --van-tag-round-radius: var(--van-radius-max); --van-tag-danger-color: var(--van-danger-color); --van-tag-primary-color: var(--van-primary-color); --van-tag-success-color: var(--van-success-color); --van-tag-warning-color: var(--van-warning-color); --van-tag-default-color: var(--van-gray-6); - --van-tag-plain-background-color: var(--van-background-color-light); + --van-tag-plain-background: var(--van-background-light); } .van-tag { @@ -25,7 +25,7 @@ color: var(--van-tag-text-color); font-size: var(--van-tag-font-size); line-height: var(--van-tag-line-height); - border-radius: var(--van-tag-border-radius); + border-radius: var(--van-tag-radius); &--default { background: var(--van-tag-default-color); @@ -68,7 +68,7 @@ } &--plain { - background: var(--van-tag-plain-background-color); + background: var(--van-tag-plain-background); border-color: currentColor; &::before { @@ -92,12 +92,11 @@ &--large { padding: var(--van-tag-large-padding); font-size: var(--van-tag-large-font-size); - border-radius: var(--van-tag-large-border-radius); + border-radius: var(--van-tag-large-radius); } &--mark { - border-radius: 0 var(--van-tag-round-border-radius) - var(--van-tag-round-border-radius) 0; + border-radius: 0 var(--van-tag-round-radius) var(--van-tag-round-radius) 0; &::after { display: block; @@ -107,7 +106,7 @@ } &--round { - border-radius: var(--van-tag-round-border-radius); + border-radius: var(--van-tag-round-radius); } &__close { diff --git a/packages/vant/src/toast/README.md b/packages/vant/src/toast/README.md index c82952acc..49955bb2c 100644 --- a/packages/vant/src/toast/README.md +++ b/packages/vant/src/toast/README.md @@ -196,8 +196,8 @@ The component provides the following CSS variables, which can be used to customi | --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(var(--van-black), 70%)_ | - | +| --van-toast-radius | _var(--van-radius-lg)_ | - | +| --van-toast-background | _fade(var(--van-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)_ | - | diff --git a/packages/vant/src/toast/README.zh-CN.md b/packages/vant/src/toast/README.zh-CN.md index ad15df2bf..263d2e33d 100644 --- a/packages/vant/src/toast/README.zh-CN.md +++ b/packages/vant/src/toast/README.zh-CN.md @@ -207,8 +207,8 @@ import type { ToastType, ToastProps, ToastOptions, ToastPosition } from 'vant'; | --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(var(--van-black), 70%)_ | - | +| --van-toast-radius | _var(--van-radius-lg)_ | - | +| --van-toast-background | _fade(var(--van-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)_ | - | diff --git a/packages/vant/src/toast/index.less b/packages/vant/src/toast/index.less index 40d5f723b..18636fa84 100644 --- a/packages/vant/src/toast/index.less +++ b/packages/vant/src/toast/index.less @@ -4,8 +4,8 @@ --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: rgba(0, 0, 0, 0.7); + --van-toast-radius: var(--van-radius-lg); + --van-toast-background: rgba(0, 0, 0, 0.7); --van-toast-icon-size: 36px; --van-toast-text-min-width: 96px; --van-toast-text-padding: var(--van-padding-xs) var(--van-padding-sm); @@ -22,7 +22,7 @@ align-items: center; justify-content: center; box-sizing: content-box; - transition: all var(--van-animation-duration-fast); + transition: all var(--van-duration-fast); // hack for avoid max-width when use left & fixed width: var(--van-toast-default-width); @@ -38,8 +38,8 @@ text-align: center; // https://github.com/youzan/vant/issues/8959 word-break: break-all; - background: var(--van-toast-background-color); - border-radius: var(--van-toast-border-radius); + background: var(--van-toast-background); + border-radius: var(--van-toast-radius); &--unclickable { // lock scroll diff --git a/packages/vant/src/tree-select/README.md b/packages/vant/src/tree-select/README.md index 85f5c5d2b..428a55da4 100644 --- a/packages/vant/src/tree-select/README.md +++ b/packages/vant/src/tree-select/README.md @@ -245,8 +245,8 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | | --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-background-color-light)_ | - | +| --van-tree-select-nav-background | _var(--van-background)_ | - | +| --van-tree-select-content-background | _var(--van-background-light)_ | - | | --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-danger-color)_ | - | diff --git a/packages/vant/src/tree-select/README.zh-CN.md b/packages/vant/src/tree-select/README.zh-CN.md index b09817cb9..4d955ea6b 100644 --- a/packages/vant/src/tree-select/README.zh-CN.md +++ b/packages/vant/src/tree-select/README.zh-CN.md @@ -248,13 +248,13 @@ import type { TreeSelectItem, TreeSelectChild, TreeSelectProps } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --- | --- | --- | -| --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-background-color-light)_ | - | -| --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-danger-color)_ | - | -| --van-tree-select-item-disabled-color | _var(--van-gray-5)_ | - | -| --van-tree-select-item-selected-size | _16px_ | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------- | ----------------------------- | ---- | +| --van-tree-select-font-size | _var(--van-font-size-md)_ | - | +| --van-tree-select-nav-background | _var(--van-background)_ | - | +| --van-tree-select-content-background | _var(--van-background-light)_ | - | +| --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-danger-color)_ | - | +| --van-tree-select-item-disabled-color | _var(--van-gray-5)_ | - | +| --van-tree-select-item-selected-size | _16px_ | - | diff --git a/packages/vant/src/tree-select/index.less b/packages/vant/src/tree-select/index.less index b2ba438bd..755f7c4fe 100644 --- a/packages/vant/src/tree-select/index.less +++ b/packages/vant/src/tree-select/index.less @@ -1,7 +1,7 @@ :root { --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-background-color-light); + --van-tree-select-nav-background: var(--van-background); + --van-tree-select-content-background: var(--van-background-light); --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-danger-color); @@ -18,7 +18,7 @@ &__nav { flex: 1; overflow-y: auto; - background: var(--van-tree-select-nav-background-color); + background: var(--van-tree-select-nav-background); -webkit-overflow-scrolling: touch; &-item { @@ -29,14 +29,14 @@ &__content { flex: 2; overflow-y: auto; - background: var(--van-tree-select-content-background-color); + background: var(--van-tree-select-content-background); -webkit-overflow-scrolling: touch; } &__item { position: relative; padding: 0 32px 0 var(--van-padding-md); - font-weight: var(--van-font-weight-bold); + font-weight: var(--van-font-bold); line-height: var(--van-tree-select-item-height); cursor: pointer; diff --git a/packages/vant/src/uploader/README.md b/packages/vant/src/uploader/README.md index 88f3ef8b7..a707d87ab 100644 --- a/packages/vant/src/uploader/README.md +++ b/packages/vant/src/uploader/README.md @@ -394,12 +394,12 @@ The component provides the following CSS variables, which can be used to customi | --van-uploader-icon-color | _var(--van-gray-4)_ | - | | --van-uploader-text-color | _var(--van-text-color-secondary)_ | - | | --van-uploader-text-font-size | _var(--van-font-size-sm)_ | - | -| --van-uploader-upload-background-color | _var(--van-gray-1)_ | - | +| --van-uploader-upload-background | _var(--van-gray-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-delete-background | _rgba(0, 0, 0, 0.7)_ | - | +| --van-uploader-file-background | _var(--van-background)_ | - | | --van-uploader-file-icon-size | _20px_ | - | | --van-uploader-file-icon-color | _var(--van-gray-7)_ | - | | --van-uploader-file-name-padding | _0 var(--van-padding-base)_ | - | @@ -407,7 +407,7 @@ The component provides the following CSS variables, which can be used to customi | --van-uploader-file-name-font-size | _var(--van-font-size-sm)_ | - | | --van-uploader-file-name-text-color | _var(--van-gray-7)_ | - | | --van-uploader-mask-text-color | _var(--van-white)_ | - | -| --van-uploader-mask-background-color | _fade(var(--van-gray-8), 88%)_ | - | +| --van-uploader-mask-background | _fade(var(--van-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)_ | - | diff --git a/packages/vant/src/uploader/README.zh-CN.md b/packages/vant/src/uploader/README.zh-CN.md index 0914942a0..8400760fc 100644 --- a/packages/vant/src/uploader/README.zh-CN.md +++ b/packages/vant/src/uploader/README.zh-CN.md @@ -419,12 +419,12 @@ uploaderRef.value?.chooseFile(); | --van-uploader-icon-color | _var(--van-gray-4)_ | - | | --van-uploader-text-color | _var(--van-text-color-secondary)_ | - | | --van-uploader-text-font-size | _var(--van-font-size-sm)_ | - | -| --van-uploader-upload-background-color | _var(--van-gray-1)_ | - | +| --van-uploader-upload-background | _var(--van-gray-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-delete-background | _rgba(0, 0, 0, 0.7)_ | - | +| --van-uploader-file-background | _var(--van-background)_ | - | | --van-uploader-file-icon-size | _20px_ | - | | --van-uploader-file-icon-color | _var(--van-gray-7)_ | - | | --van-uploader-file-name-padding | _0 var(--van-padding-base)_ | - | @@ -432,7 +432,7 @@ uploaderRef.value?.chooseFile(); | --van-uploader-file-name-font-size | _var(--van-font-size-sm)_ | - | | --van-uploader-file-name-text-color | _var(--van-gray-7)_ | - | | --van-uploader-mask-text-color | _var(--van-white)_ | - | -| --van-uploader-mask-background-color | _fade(var(--van-gray-8), 88%)_ | - | +| --van-uploader-mask-background | _fade(var(--van-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)_ | - | diff --git a/packages/vant/src/uploader/index.less b/packages/vant/src/uploader/index.less index 1113d1d9a..fcf70a918 100644 --- a/packages/vant/src/uploader/index.less +++ b/packages/vant/src/uploader/index.less @@ -4,12 +4,12 @@ --van-uploader-icon-color: var(--van-gray-4); --van-uploader-text-color: var(--van-text-color-secondary); --van-uploader-text-font-size: var(--van-font-size-sm); - --van-uploader-upload-background-color: var(--van-gray-1); + --van-uploader-upload-background: var(--van-gray-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-delete-background: rgba(0, 0, 0, 0.7); + --van-uploader-file-background: var(--van-background); --van-uploader-file-icon-size: 20px; --van-uploader-file-icon-color: var(--van-gray-7); --van-uploader-file-name-padding: 0 var(--van-padding-base); @@ -17,7 +17,7 @@ --van-uploader-file-name-font-size: var(--van-font-size-sm); --van-uploader-file-name-text-color: var(--van-gray-7); --van-uploader-mask-text-color: var(--van-white); - --van-uploader-mask-background-color: rgba(50, 50, 51, 0.88); + --van-uploader-mask-background: rgba(50, 50, 51, 0.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); @@ -68,14 +68,14 @@ width: var(--van-uploader-size); height: var(--van-uploader-size); margin: 0 var(--van-padding-xs) var(--van-padding-xs) 0; - background: var(--van-uploader-upload-background-color); + background: var(--van-uploader-upload-background); &:active { background-color: var(--van-uploader-upload-active-color); } &--readonly:active { - background-color: var(--van-uploader-upload-background-color); + background-color: var(--van-uploader-upload-background); } &-icon { @@ -108,7 +108,7 @@ right: 0; width: var(--van-uploader-delete-icon-size); height: var(--van-uploader-delete-icon-size); - background: var(--van-uploader-delete-background-color); + background: var(--van-uploader-delete-background); border-radius: 0 0 0 12px; &-icon { @@ -141,7 +141,7 @@ align-items: center; justify-content: center; color: var(--van-uploader-mask-text-color); - background: var(--van-uploader-mask-background-color); + background: var(--van-uploader-mask-background); &-icon { font-size: var(--van-uploader-mask-icon-size); @@ -168,7 +168,7 @@ justify-content: center; width: var(--van-uploader-size); height: var(--van-uploader-size); - background: var(--van-uploader-file-background-color); + background: var(--van-uploader-file-background); &-icon { color: var(--van-uploader-file-icon-color);