From 6a4033b6bc72c38ff103c16e039ecd73ccacd4df Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 3 Nov 2021 16:03:15 +0800 Subject: [PATCH 001/170] =?UTF-8?q?breaking=20change(Picker):=20remove=20d?= =?UTF-8?q?efault=20slot=E3=80=81value-key=20prop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/markdown/migrate-from-v3.zh-CN.md | 14 ++++++++++ packages/vant/src/picker/Picker.tsx | 26 +++---------------- 2 files changed, 18 insertions(+), 22 deletions(-) create mode 100644 packages/vant/docs/markdown/migrate-from-v3.zh-CN.md diff --git a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md new file mode 100644 index 000000000..8c5502805 --- /dev/null +++ b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md @@ -0,0 +1,14 @@ +# 从 v3 升级 + +### 介绍 + +本文档提供了从 Vant 3 到 Vant 4 的升级指南。 + +## 不兼容更新 + +### API 调整 + +#### Picker + +- `default` 插槽重命名为 `toolbar` +- 移除了 `value-key` 属性，使用 `columnsFieldNames` 属性代替 diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index b084dbc50..bcfd34851 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -56,9 +56,6 @@ export const pickerSharedProps = { const pickerProps = extend({}, pickerSharedProps, { columns: makeArrayProp(), - // @deprecated - // should be removed in next major version - valueKey: String, defaultIndex: makeNumericProp(0), toolbarPosition: makeStringProp('top'), columnsFieldNames: Object as PropType, @@ -74,19 +71,6 @@ export default defineComponent({ emits: ['confirm', 'cancel', 'change'], setup(props, { emit, slots }) { - if (process.env.NODE_ENV !== 'production') { - if (slots.default) { - console.warn( - '[Vant] Picker: "default" slot is deprecated, please use "toolbar" slot instead.' - ); - } - if (props.valueKey) { - console.warn( - '[Vant] Picker: "valueKey" prop is deprecated, please use "columnsFieldNames" prop instead.' - ); - } - } - const formattedColumns = ref([]); const { @@ -95,8 +79,7 @@ export default defineComponent({ children: childrenKey, } = extend( { - // compatible with valueKey prop - text: props.valueKey || 'text', + text: 'text', values: 'values', children: 'children', }, @@ -324,12 +307,11 @@ export default defineComponent({ const renderToolbar = () => { if (props.showToolbar) { - // default slot is deprecated - // should be removed in next major version - const slot = slots.toolbar || slots.default; return (
- {slot ? slot() : [renderCancel(), renderTitle(), renderConfirm()]} + {slots.toolbar + ? slots.toolbar() + : [renderCancel(), renderTitle(), renderConfirm()]}
); } From 099141f6c5b0e43c7e3ceeae98ee7e6e512212d6 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 3 Nov 2021 16:05:37 +0800 Subject: [PATCH 002/170] =?UTF-8?q?breaking=20change(Tabs):=20remove=20cli?= =?UTF-8?q?ck=E3=80=81disabled=20event?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/markdown/migrate-from-v3.zh-CN.md | 4 +++ packages/vant/src/tab/README.md | 2 -- packages/vant/src/tabs/Tabs.tsx | 35 ++----------------- 3 files changed, 6 insertions(+), 35 deletions(-) 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 8c5502805..ebff2c6e9 100644 --- a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md +++ b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md @@ -12,3 +12,7 @@ - `default` 插槽重命名为 `toolbar` - 移除了 `value-key` 属性，使用 `columnsFieldNames` 属性代替 + +### Tabs + +- 移除了 `click` 和 `disabled` 事件，使用 `click-tab` 事件代替 diff --git a/packages/vant/src/tab/README.md b/packages/vant/src/tab/README.md index d83979911..5a7e184e2 100644 --- a/packages/vant/src/tab/README.md +++ b/packages/vant/src/tab/README.md @@ -270,8 +270,6 @@ export default { | rendered | Emitted when content first rendered in lazy-render mode | _name: string \| number, title: string_ | | scroll | Emitted when tab scrolling in sticky mode | _{ scrollTop: number, isFixed: boolean }_ | -> Tips：click and disabled event is deprecated，place use click-tab event instead. - ### Tabs Methods Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs instance and call instance methods. diff --git a/packages/vant/src/tabs/Tabs.tsx b/packages/vant/src/tabs/Tabs.tsx index 7e059a984..fbf12f1fe 100644 --- a/packages/vant/src/tabs/Tabs.tsx +++ b/packages/vant/src/tabs/Tabs.tsx @@ -10,7 +10,6 @@ import { CSSProperties, defineComponent, ExtractPropTypes, - getCurrentInstance, ComponentPublicInstance, } from 'vue'; @@ -90,31 +89,9 @@ export default defineComponent({ props: tabsProps, - emits: [ - 'click', - 'change', - 'scroll', - 'disabled', - 'rendered', - 'click-tab', - 'update:active', - ], + emits: ['change', 'scroll', 'rendered', 'click-tab', 'update:active'], setup(props, { emit, slots }) { - if (process.env.NODE_ENV !== 'production') { - const props = getCurrentInstance()?.vnode?.props; - if (props && 'onClick' in props) { - console.warn( - '[Vant] Tabs: "click" event is deprecated, using "click-tab" instead.' - ); - } - if (props && 'onDisabled' in props) { - console.warn( - '[Vant] Tabs: "disabled" event is deprecated, using "click-tab" instead.' - ); - } - } - let tabHeight: number; let lockScroll: boolean; let stickyFixed: boolean; @@ -302,11 +279,7 @@ export default defineComponent({ disabled, }); - if (disabled) { - // @deprecated - // should be removed in next major version - emit('disabled', name, title); - } else { + if (!disabled) { callInterceptor(props.beforeChange, { args: [name], done: () => { @@ -315,10 +288,6 @@ export default defineComponent({ }, }); - // @deprecated - // should be removed in next major version - emit('click', name, title); - route(item as ComponentPublicInstance); } }; From ada5db011c676893a2917b9424be1aeafe54134b Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 3 Nov 2021 16:45:49 +0800 Subject: [PATCH 003/170] breaking change: no longer support less vars --- .../docs/markdown/migrate-from-v3.zh-CN.md | 4 + packages/vant/docs/markdown/theme.en-US.md | 215 ----------------- packages/vant/docs/markdown/theme.zh-CN.md | 225 ------------------ .../vant/src/action-bar-button/index.less | 8 +- packages/vant/src/action-bar-button/var.less | 5 - packages/vant/src/action-bar-icon/index.less | 18 +- packages/vant/src/action-bar-icon/var.less | 10 - packages/vant/src/action-bar/index.less | 6 +- packages/vant/src/action-bar/var.less | 4 - packages/vant/src/action-sheet/index.less | 43 ++-- packages/vant/src/action-sheet/var.less | 23 -- packages/vant/src/address-edit/index.less | 11 +- packages/vant/src/address-edit/var.less | 6 - packages/vant/src/address-list/index.less | 28 +-- packages/vant/src/address-list/var.less | 16 -- packages/vant/src/badge/index.less | 22 +- packages/vant/src/badge/var.less | 12 - packages/vant/src/button/index.less | 70 +++--- packages/vant/src/button/var.less | 36 --- packages/vant/src/calendar/index.less | 52 ++-- packages/vant/src/calendar/var.less | 27 --- packages/vant/src/card/index.less | 34 ++- packages/vant/src/card/var.less | 18 -- packages/vant/src/cascader/index.less | 28 +-- packages/vant/src/cascader/var.less | 15 -- packages/vant/src/cell-group/index.less | 19 +- packages/vant/src/cell-group/var.less | 12 - packages/vant/src/cell/index.less | 39 ++- packages/vant/src/cell/var.less | 21 -- packages/vant/src/checkbox/index.less | 20 +- packages/vant/src/checkbox/var.less | 11 - packages/vant/src/circle/index.less | 16 +- packages/vant/src/circle/var.less | 9 - packages/vant/src/collapse-item/index.less | 18 +- packages/vant/src/collapse-item/var.less | 9 - packages/vant/src/contact-card/index.less | 10 +- packages/vant/src/contact-card/var.less | 6 - packages/vant/src/contact-edit/index.less | 14 +- packages/vant/src/contact-edit/var.less | 8 - packages/vant/src/contact-list/index.less | 10 +- packages/vant/src/contact-list/var.less | 6 - packages/vant/src/count-down/index.less | 8 +- packages/vant/src/count-down/var.less | 5 - packages/vant/src/coupon-cell/index.less | 4 +- packages/vant/src/coupon-cell/var.less | 3 - packages/vant/src/coupon-list/index.less | 18 +- packages/vant/src/coupon-list/var.less | 10 - packages/vant/src/coupon/index.less | 35 ++- packages/vant/src/coupon/var.less | 19 -- packages/vant/src/dialog/index.less | 40 ++-- packages/vant/src/dialog/var.less | 21 -- packages/vant/src/divider/index.less | 18 +- packages/vant/src/divider/var.less | 10 - packages/vant/src/dropdown-item/index.less | 5 +- packages/vant/src/dropdown-item/var.less | 3 - packages/vant/src/dropdown-menu/index.less | 27 +-- packages/vant/src/dropdown-menu/var.less | 13 - packages/vant/src/empty/index.less | 18 +- packages/vant/src/empty/var.less | 10 - packages/vant/src/field/index.less | 41 ++-- packages/vant/src/field/var.less | 21 -- packages/vant/src/grid-item/index.less | 14 +- packages/vant/src/grid-item/var.less | 8 - packages/vant/src/image-preview/index.less | 20 +- packages/vant/src/image-preview/var.less | 11 - packages/vant/src/image/index.less | 16 +- packages/vant/src/image/var.less | 9 - packages/vant/src/index-anchor/index.less | 20 +- packages/vant/src/index-anchor/var.less | 11 - packages/vant/src/index-bar/index.less | 10 +- packages/vant/src/index-bar/var.less | 6 - packages/vant/src/list/index.less | 10 +- packages/vant/src/list/var.less | 6 - packages/vant/src/loading/index.less | 12 +- packages/vant/src/loading/var.less | 7 - packages/vant/src/nav-bar/index.less | 18 +- packages/vant/src/nav-bar/var.less | 10 - packages/vant/src/notice-bar/index.less | 20 +- packages/vant/src/notice-bar/var.less | 11 - packages/vant/src/notify/index.less | 18 +- packages/vant/src/notify/var.less | 10 - packages/vant/src/number-keyboard/index.less | 32 ++- packages/vant/src/number-keyboard/var.less | 17 -- packages/vant/src/overlay/index.less | 6 +- packages/vant/src/overlay/var.less | 4 - packages/vant/src/pagination/index.less | 20 +- packages/vant/src/pagination/var.less | 11 - packages/vant/src/password-input/index.less | 32 ++- packages/vant/src/password-input/var.less | 17 -- packages/vant/src/picker/index.less | 37 +-- packages/vant/src/picker/var.less | 22 -- packages/vant/src/popover/index.less | 32 +-- packages/vant/src/popover/var.less | 15 -- packages/vant/src/popup/index.less | 16 +- packages/vant/src/popup/var.less | 9 - packages/vant/src/progress/index.less | 20 +- packages/vant/src/progress/var.less | 11 - packages/vant/src/pull-refresh/index.less | 10 +- packages/vant/src/pull-refresh/var.less | 6 - packages/vant/src/radio/index.less | 20 +- packages/vant/src/radio/var.less | 11 - packages/vant/src/rate/index.less | 12 +- packages/vant/src/rate/var.less | 7 - packages/vant/src/search/index.less | 24 +- packages/vant/src/search/var.less | 13 - packages/vant/src/share-sheet/index.less | 31 ++- packages/vant/src/share-sheet/var.less | 18 -- packages/vant/src/sidebar-item/index.less | 28 +-- packages/vant/src/sidebar-item/var.less | 15 -- packages/vant/src/sidebar/index.less | 4 +- packages/vant/src/sidebar/var.less | 3 - packages/vant/src/skeleton/index.less | 16 +- packages/vant/src/skeleton/var.less | 9 - packages/vant/src/slider/index.less | 20 +- packages/vant/src/slider/var.less | 11 - packages/vant/src/step/index.less | 24 +- packages/vant/src/step/var.less | 13 - packages/vant/src/stepper/index.less | 28 +-- packages/vant/src/stepper/var.less | 15 -- packages/vant/src/steps/index.less | 4 +- packages/vant/src/steps/var.less | 3 - packages/vant/src/sticky/index.less | 4 +- packages/vant/src/sticky/var.less | 3 - packages/vant/src/style/animation.less | 2 - packages/vant/src/style/base.less | 13 +- packages/vant/src/style/css-variables.less | 119 +++++---- packages/vant/src/style/mixins/hairline.less | 2 - packages/vant/src/style/normalize.less | 4 +- packages/vant/src/style/var.less | 74 ------ packages/vant/src/submit-bar/index.less | 40 ++-- packages/vant/src/submit-bar/var.less | 22 -- packages/vant/src/swipe/index.less | 14 +- packages/vant/src/swipe/var.less | 8 - packages/vant/src/switch/index.less | 24 +- packages/vant/src/switch/var.less | 14 -- packages/vant/src/tabbar-item/index.less | 16 +- packages/vant/src/tabbar-item/var.less | 9 - packages/vant/src/tabbar/index.less | 8 +- packages/vant/src/tabbar/var.less | 5 - packages/vant/src/tabs/index.less | 26 +- packages/vant/src/tabs/var.less | 14 -- packages/vant/src/tag/index.less | 34 ++- packages/vant/src/tag/var.less | 18 -- packages/vant/src/toast/index.less | 32 ++- packages/vant/src/toast/var.less | 17 -- packages/vant/src/tree-select/index.less | 18 +- packages/vant/src/tree-select/var.less | 10 - packages/vant/src/uploader/index.less | 52 ++-- packages/vant/src/uploader/var.less | 27 --- packages/vant/vant.config.mjs | 18 -- 150 files changed, 770 insertions(+), 2263 deletions(-) delete mode 100644 packages/vant/docs/markdown/theme.en-US.md delete mode 100644 packages/vant/docs/markdown/theme.zh-CN.md delete mode 100644 packages/vant/src/action-bar-button/var.less delete mode 100644 packages/vant/src/action-bar-icon/var.less delete mode 100644 packages/vant/src/action-bar/var.less delete mode 100644 packages/vant/src/action-sheet/var.less delete mode 100644 packages/vant/src/address-edit/var.less delete mode 100644 packages/vant/src/address-list/var.less delete mode 100644 packages/vant/src/badge/var.less delete mode 100644 packages/vant/src/button/var.less delete mode 100644 packages/vant/src/calendar/var.less delete mode 100644 packages/vant/src/card/var.less delete mode 100644 packages/vant/src/cascader/var.less delete mode 100644 packages/vant/src/cell-group/var.less delete mode 100644 packages/vant/src/cell/var.less delete mode 100644 packages/vant/src/checkbox/var.less delete mode 100644 packages/vant/src/circle/var.less delete mode 100644 packages/vant/src/collapse-item/var.less delete mode 100644 packages/vant/src/contact-card/var.less delete mode 100644 packages/vant/src/contact-edit/var.less delete mode 100644 packages/vant/src/contact-list/var.less delete mode 100644 packages/vant/src/count-down/var.less delete mode 100644 packages/vant/src/coupon-cell/var.less delete mode 100644 packages/vant/src/coupon-list/var.less delete mode 100644 packages/vant/src/coupon/var.less delete mode 100644 packages/vant/src/dialog/var.less delete mode 100644 packages/vant/src/divider/var.less delete mode 100644 packages/vant/src/dropdown-item/var.less delete mode 100644 packages/vant/src/dropdown-menu/var.less delete mode 100644 packages/vant/src/empty/var.less delete mode 100644 packages/vant/src/field/var.less delete mode 100644 packages/vant/src/grid-item/var.less delete mode 100644 packages/vant/src/image-preview/var.less delete mode 100644 packages/vant/src/image/var.less delete mode 100644 packages/vant/src/index-anchor/var.less delete mode 100644 packages/vant/src/index-bar/var.less delete mode 100644 packages/vant/src/list/var.less delete mode 100644 packages/vant/src/loading/var.less delete mode 100644 packages/vant/src/nav-bar/var.less delete mode 100644 packages/vant/src/notice-bar/var.less delete mode 100644 packages/vant/src/notify/var.less delete mode 100644 packages/vant/src/number-keyboard/var.less delete mode 100644 packages/vant/src/overlay/var.less delete mode 100644 packages/vant/src/pagination/var.less delete mode 100644 packages/vant/src/password-input/var.less delete mode 100644 packages/vant/src/picker/var.less delete mode 100644 packages/vant/src/popover/var.less delete mode 100644 packages/vant/src/popup/var.less delete mode 100644 packages/vant/src/progress/var.less delete mode 100644 packages/vant/src/pull-refresh/var.less delete mode 100644 packages/vant/src/radio/var.less delete mode 100644 packages/vant/src/rate/var.less delete mode 100644 packages/vant/src/search/var.less delete mode 100644 packages/vant/src/share-sheet/var.less delete mode 100644 packages/vant/src/sidebar-item/var.less delete mode 100644 packages/vant/src/sidebar/var.less delete mode 100644 packages/vant/src/skeleton/var.less delete mode 100644 packages/vant/src/slider/var.less delete mode 100644 packages/vant/src/step/var.less delete mode 100644 packages/vant/src/stepper/var.less delete mode 100644 packages/vant/src/steps/var.less delete mode 100644 packages/vant/src/sticky/var.less delete mode 100644 packages/vant/src/style/var.less delete mode 100644 packages/vant/src/submit-bar/var.less delete mode 100644 packages/vant/src/swipe/var.less delete mode 100644 packages/vant/src/switch/var.less delete mode 100644 packages/vant/src/tabbar-item/var.less delete mode 100644 packages/vant/src/tabbar/var.less delete mode 100644 packages/vant/src/tabs/var.less delete mode 100644 packages/vant/src/tag/var.less delete mode 100644 packages/vant/src/toast/var.less delete mode 100644 packages/vant/src/tree-select/var.less delete mode 100644 packages/vant/src/uploader/var.less 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 ebff2c6e9..3d2ce7bfc 100644 --- a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md +++ b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md @@ -6,6 +6,10 @@ ## 不兼容更新 +### 主题定制方式调整 + +不再支持基于 Less 变量进行主题定制，请使用 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行主题配置。 + ### API 调整 #### Picker diff --git a/packages/vant/docs/markdown/theme.en-US.md b/packages/vant/docs/markdown/theme.en-US.md deleted file mode 100644 index 2ca693bcb..000000000 --- a/packages/vant/docs/markdown/theme.en-US.md +++ /dev/null @@ -1,215 +0,0 @@ -# Custom Theme - -### Deprecated - -This document is deprecated. Vant provides a more convenient [ConfigProvider](#/en-US/config-provider) component for theme configuration. Less variables **will be removed in the next major version**. - -### Intro - -Vant use [Less](http://lesscss.org/) as css preprocessor，you can override the default less variables to custom theme. - -### Less variables - -There are some [basic variables](<(https://github.com/youzan/vant/blob/dev/packages/vant/src/style/var.less)>) below, for component less variables, please refer to the documentation of each component, or view the `var.less` file in the component source directory. - -```less -// Color Palette -@black: #000; -@white: #fff; -@gray-1: #f7f8fa; -@gray-2: #f2f3f5; -@gray-3: #ebedf0; -@gray-4: #dcdee0; -@gray-5: #c8c9cc; -@gray-6: #969799; -@gray-7: #646566; -@gray-8: #323233; -@red: #ee0a24; -@blue: #1989fa; -@orange: #ff976a; -@orange-dark: #ed6a0c; -@orange-light: #fffbe8; -@green: #07c160; - -// Gradient Colors -@gradient-red: linear-gradient(to right, #ff6034, #ee0a24); -@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917); - -// Component Colors -@text-color: @gray-8; -@active-color: @gray-2; -@active-opacity: 0.7; -@disabled-opacity: 0.5; -@background-color: @gray-1; -@background-color-light: @white; -@text-link-color: #576b95; - -// Padding -@padding-base: 4px; -@padding-xs: @padding-base * 2; -@padding-sm: @padding-base * 3; -@padding-md: @padding-base * 4; -@padding-lg: @padding-base * 6; -@padding-xl: @padding-base * 8; - -// Font -@font-size-xs: 10px; -@font-size-sm: 12px; -@font-size-md: 14px; -@font-size-lg: 16px; -@font-weight-bold: 500; -@line-height-xs: 14px; -@line-height-sm: 18px; -@line-height-md: 20px; -@line-height-lg: 22px; -@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', - Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', - 'Microsoft Yahei', sans-serif; -@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, - sans-serif; - -// Animation -@animation-duration-base: 0.3s; -@animation-duration-fast: 0.2s; -@animation-timing-function-enter: ease-out; -@animation-timing-function-leave: ease-in; - -// Border -@border-color: @gray-3; -@border-width-base: 1px; -@border-radius-sm: 2px; -@border-radius-md: 4px; -@border-radius-lg: 8px; -@border-radius-max: 999px; -``` - -## How to custom theme - -### Step 1: import less file - -First you should import the less source file to your project. you can use babel-plugin-import to automatically import or just manually import less file. - -#### Automatically import style - -Configure babel plugin in babel.config.js, if you are using babel6, please manually import less file. - -```js -module.exports = { - plugins: [ - [ - 'import', - { - libraryName: 'vant', - libraryDirectory: 'es', - // specify less file path - style: (name) => `${name}/style/less`, - }, - 'vant', - ], - ], -}; -``` - -#### Manually import style - -```js -// import all styles -import 'vant/lib/index.less'; - -// import style of single component -import 'vant/lib/button/style/less'; -``` - -### Step 2: modify less variables - -Use [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) provided by less.js to modify less variables，webpack config for reference: - -```js -// webpack.config.js -module.exports = { - rules: [ - { - test: /\.less$/, - use: [ - // ...other loaders - { - loader: 'less-loader', - options: { - lessOptions: { - modifyVars: { - // override with less vars - 'text-color': '#111', - 'border-color': '#eee', - // or override with less file - hack: `true; @import "your-less-file-path.less";`, - }, - }, - }, - }, - ], - }, - ], -}; -``` - -If you build a project by vue-cli,it can be configured in `vue.config.js`: - -```js -// vue.config.js -module.exports = { - css: { - loaderOptions: { - less: { - lessOptions: { - modifyVars: { - // override with less vars - 'text-color': '#111', - 'border-color': '#eee', - // or override with less file - hack: `true; @import "your-less-file-path.less";`, - }, - }, - }, - }, - }, -}; -``` - -### Vite - -Add the following config in `vite.config.js`. - -```js -// vite.config.js -import vue from '@vitejs/plugin-vue'; -import styleImport from 'vite-plugin-style-import'; - -export default { - css: { - preprocessorOptions: { - less: { - javascriptEnabled: true, - modifyVars: { - 'text-color': '#111', - 'border-color': '#eee', - }, - }, - }, - }, - resolve: { - alias: [{ find: /^~/, replacement: '' }], - }, - plugins: [ - vue(), - styleImport({ - libs: [ - { - libraryName: 'vant', - esModule: true, - resolveStyle: (name) => `vant/es/${name}/style/less`, - }, - ], - }), - ], -}; -``` diff --git a/packages/vant/docs/markdown/theme.zh-CN.md b/packages/vant/docs/markdown/theme.zh-CN.md deleted file mode 100644 index f96f7559d..000000000 --- a/packages/vant/docs/markdown/theme.zh-CN.md +++ /dev/null @@ -1,225 +0,0 @@ -# 定制主题 - -### 废弃提示 - -本文档已废弃，Vant 提供了更方便的 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行主题配置。基于 Less 变量进行定制的方式**将在下个大版本废弃**。 - -### 介绍 - -Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。 - -### 示例工程 - -我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为 [Vant Demo](https://github.com/youzan/vant-demo)，其中包含了定制主题的基本配置，可以作为参考。 - -### 样式变量 - -Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。 - -下面是所有的[基础样式变量](https://github.com/youzan/vant/blob/dev/packages/vant/src/style/var.less)，组件的样式变量请参考各个组件的文档，或查看组件源码目录下的 `var.less` 文件。 - -```less -// Color Palette -@black: #000; -@white: #fff; -@gray-1: #f7f8fa; -@gray-2: #f2f3f5; -@gray-3: #ebedf0; -@gray-4: #dcdee0; -@gray-5: #c8c9cc; -@gray-6: #969799; -@gray-7: #646566; -@gray-8: #323233; -@red: #ee0a24; -@blue: #1989fa; -@orange: #ff976a; -@orange-dark: #ed6a0c; -@orange-light: #fffbe8; -@green: #07c160; - -// Gradient Colors -@gradient-red: linear-gradient(to right, #ff6034, #ee0a24); -@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917); - -// Component Colors -@text-color: @gray-8; -@active-color: @gray-2; -@active-opacity: 0.7; -@disabled-opacity: 0.5; -@background-color: @gray-1; -@background-color-light: @white; -@text-link-color: #576b95; - -// Padding -@padding-base: 4px; -@padding-xs: @padding-base * 2; -@padding-sm: @padding-base * 3; -@padding-md: @padding-base * 4; -@padding-lg: @padding-base * 6; -@padding-xl: @padding-base * 8; - -// Font -@font-size-xs: 10px; -@font-size-sm: 12px; -@font-size-md: 14px; -@font-size-lg: 16px; -@font-weight-bold: 500; -@line-height-xs: 14px; -@line-height-sm: 18px; -@line-height-md: 20px; -@line-height-lg: 22px; -@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', - Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', - 'Microsoft Yahei', sans-serif; -@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, - sans-serif; - -// Animation -@animation-duration-base: 0.3s; -@animation-duration-fast: 0.2s; -@animation-timing-function-enter: ease-out; -@animation-timing-function-leave: ease-in; - -// Border -@border-color: @gray-3; -@border-width-base: 1px; -@border-radius-sm: 2px; -@border-radius-md: 4px; -@border-radius-lg: 8px; -@border-radius-max: 999px; -``` - -## 定制方法 - -### 步骤一 引入样式源文件 - -定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。 - -#### 按需引入样式（推荐） - -在 babel.config.js 中配置按需引入样式源文件，注意 babel 6 不支持按需引入样式，请手动引入样式。 - -```js -module.exports = { - plugins: [ - [ - 'import', - { - libraryName: 'vant', - libraryDirectory: 'es', - // 指定样式路径 - style: (name) => `${name}/style/less`, - }, - 'vant', - ], - ], -}; -``` - -#### 手动引入样式 - -```js -// 引入全部样式 -import 'vant/lib/index.less'; - -// 引入单个组件样式 -import 'vant/lib/button/style/less'; -``` - -### 步骤二 修改样式变量 - -使用 Less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 即可对变量进行修改，下面是参考的 webpack 配置。 - -```js -// webpack.config.js -module.exports = { - rules: [ - { - test: /\.less$/, - use: [ - // ...其他 loader 配置 - { - loader: 'less-loader', - options: { - // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。 - lessOptions: { - modifyVars: { - // 直接覆盖变量 - 'text-color': '#111', - 'border-color': '#eee', - // 或者可以通过 less 文件覆盖（文件路径为绝对路径） - hack: `true; @import "your-less-file-path.less";`, - }, - }, - }, - }, - ], - }, - ], -}; -``` - -如果 vue-cli 搭建的项目，可以在 `vue.config.js` 中进行配置。 - -```js -// vue.config.js -module.exports = { - css: { - loaderOptions: { - less: { - // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。 - lessOptions: { - modifyVars: { - // 直接覆盖变量 - 'text-color': '#111', - 'border-color': '#eee', - // 或者可以通过 less 文件覆盖（文件路径为绝对路径） - hack: `true; @import "your-less-file-path.less";`, - }, - }, - }, - }, - }, -}; -``` - -### Vite 项目 - -如果是 vite 项目，可以跳过以上步骤，直接在 `vite.config.js` 中添加如下配置即可。 - -```js -// vite.config.js -import vue from '@vitejs/plugin-vue'; -import styleImport from 'vite-plugin-style-import'; - -export default { - css: { - preprocessorOptions: { - less: { - javascriptEnabled: true, - // 覆盖样式变量 - modifyVars: { - 'text-color': '#111', - 'border-color': '#eee', - }, - }, - }, - }, - resolve: { - alias: [{ find: /^~/, replacement: '' }], - }, - plugins: [ - vue(), - // 按需引入样式源文件 - styleImport({ - libs: [ - { - libraryName: 'vant', - esModule: true, - resolveStyle: (name) => `vant/es/${name}/style/less`, - }, - ], - }), - ], -}; -``` diff --git a/packages/vant/src/action-bar-button/index.less b/packages/vant/src/action-bar-button/index.less index cab607d6e..be6b9d4ce 100644 --- a/packages/vant/src/action-bar-button/index.less +++ b/packages/vant/src/action-bar-button/index.less @@ -1,9 +1,7 @@ -@import './var.less'; - :root { - --van-action-bar-button-height: @action-bar-button-height; - --van-action-bar-button-warning-color: @action-bar-button-warning-color; - --van-action-bar-button-danger-color: @action-bar-button-danger-color; + --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-button { diff --git a/packages/vant/src/action-bar-button/var.less b/packages/vant/src/action-bar-button/var.less deleted file mode 100644 index 0280d21a8..000000000 --- a/packages/vant/src/action-bar-button/var.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '../style/var.less'; - -@action-bar-button-height: 40px; -@action-bar-button-warning-color: var(--van-gradient-orange); -@action-bar-button-danger-color: var(--van-gradient-red); diff --git a/packages/vant/src/action-bar-icon/index.less b/packages/vant/src/action-bar-icon/index.less index 231c9ea8b..3bad268c1 100644 --- a/packages/vant/src/action-bar-icon/index.less +++ b/packages/vant/src/action-bar-icon/index.less @@ -1,14 +1,12 @@ -@import './var.less'; - :root { - --van-action-bar-icon-width: @action-bar-icon-width; - --van-action-bar-icon-height: @action-bar-icon-height; - --van-action-bar-icon-color: @action-bar-icon-color; - --van-action-bar-icon-size: @action-bar-icon-size; - --van-action-bar-icon-font-size: @action-bar-icon-font-size; - --van-action-bar-icon-active-color: @action-bar-icon-active-color; - --van-action-bar-icon-text-color: @action-bar-icon-text-color; - --van-action-bar-icon-background-color: @action-bar-icon-background-color; + --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-icon { diff --git a/packages/vant/src/action-bar-icon/var.less b/packages/vant/src/action-bar-icon/var.less deleted file mode 100644 index 14c0d8ce9..000000000 --- a/packages/vant/src/action-bar-icon/var.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '../style/var.less'; - -@action-bar-icon-width: 48px; -@action-bar-icon-height: 100%; -@action-bar-icon-color: var(--van-text-color); -@action-bar-icon-size: 18px; -@action-bar-icon-font-size: var(--van-font-size-xs); -@action-bar-icon-active-color: var(--van-active-color); -@action-bar-icon-text-color: var(--van-gray-7); -@action-bar-icon-background-color: var(--van-background-color-light); diff --git a/packages/vant/src/action-bar/index.less b/packages/vant/src/action-bar/index.less index fdb1632bc..a71f4440f 100644 --- a/packages/vant/src/action-bar/index.less +++ b/packages/vant/src/action-bar/index.less @@ -1,8 +1,6 @@ -@import './var.less'; - :root { - --van-action-bar-background-color: @action-bar-background-color; - --van-action-bar-height: @action-bar-height; + --van-action-bar-background-color: var(--van-background-color-light); + --van-action-bar-height: 50px; } .van-action-bar { diff --git a/packages/vant/src/action-bar/var.less b/packages/vant/src/action-bar/var.less deleted file mode 100644 index cc3f94832..000000000 --- a/packages/vant/src/action-bar/var.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../style/var.less'; - -@action-bar-background-color: var(--van-background-color-light); -@action-bar-height: 50px; diff --git a/packages/vant/src/action-sheet/index.less b/packages/vant/src/action-sheet/index.less index 21f852d85..6658b71ec 100644 --- a/packages/vant/src/action-sheet/index.less +++ b/packages/vant/src/action-sheet/index.less @@ -1,28 +1,27 @@ -@import './var.less'; @import '../style/mixins/hairline'; :root { - --van-action-sheet-max-height: @action-sheet-max-height; - --van-action-sheet-header-height: @action-sheet-header-height; - --van-action-sheet-header-font-size: @action-sheet-header-font-size; - --van-action-sheet-description-color: @action-sheet-description-color; - --van-action-sheet-description-font-size: @action-sheet-description-font-size; - --van-action-sheet-description-line-height: @action-sheet-description-line-height; - --van-action-sheet-item-background: @action-sheet-item-background; - --van-action-sheet-item-font-size: @action-sheet-item-font-size; - --van-action-sheet-item-line-height: @action-sheet-item-line-height; - --van-action-sheet-item-text-color: @action-sheet-item-text-color; - --van-action-sheet-item-disabled-text-color: @action-sheet-item-disabled-text-color; - --van-action-sheet-subname-color: @action-sheet-subname-color; - --van-action-sheet-subname-font-size: @action-sheet-subname-font-size; - --van-action-sheet-subname-line-height: @action-sheet-subname-line-height; - --van-action-sheet-close-icon-size: @action-sheet-close-icon-size; - --van-action-sheet-close-icon-color: @action-sheet-close-icon-color; - --van-action-sheet-close-icon-padding: @action-sheet-close-icon-padding; - --van-action-sheet-cancel-text-color: @action-sheet-cancel-text-color; - --van-action-sheet-cancel-padding-top: @action-sheet-cancel-padding-top; - --van-action-sheet-cancel-padding-color: @action-sheet-cancel-padding-color; - --van-action-sheet-loading-icon-size: @action-sheet-loading-icon-size; + --van-action-sheet-max-height: 80%; + --van-action-sheet-header-height: 48px; + --van-action-sheet-header-font-size: var(--van-font-size-lg); + --van-action-sheet-description-color: var(--van-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-font-size: var(--van-font-size-lg); + --van-action-sheet-item-line-height: var(--van-line-height-lg); + --van-action-sheet-item-text-color: var(--van-text-color); + --van-action-sheet-item-disabled-text-color: var(--van-text-color-tertiary); + --van-action-sheet-subname-color: var(--van-text-color-secondary); + --van-action-sheet-subname-font-size: var(--van-font-size-sm); + --van-action-sheet-subname-line-height: var(--van-line-height-sm); + --van-action-sheet-close-icon-size: 22px; + --van-action-sheet-close-icon-color: var(--van-gray-5); + --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-loading-icon-size: 22px; } .van-action-sheet { diff --git a/packages/vant/src/action-sheet/var.less b/packages/vant/src/action-sheet/var.less deleted file mode 100644 index 8dd9a0682..000000000 --- a/packages/vant/src/action-sheet/var.less +++ /dev/null @@ -1,23 +0,0 @@ -@import '../style/var.less'; - -@action-sheet-max-height: 80%; -@action-sheet-header-height: 48px; -@action-sheet-header-font-size: var(--van-font-size-lg); -@action-sheet-description-color: var(--van-text-color-secondary); -@action-sheet-description-font-size: var(--van-font-size-md); -@action-sheet-description-line-height: var(--van-line-height-md); -@action-sheet-item-background: var(--van-background-color-light); -@action-sheet-item-font-size: var(--van-font-size-lg); -@action-sheet-item-line-height: var(--van-line-height-lg); -@action-sheet-item-text-color: var(--van-text-color); -@action-sheet-item-disabled-text-color: var(--van-text-color-tertiary); -@action-sheet-subname-color: var(--van-text-color-secondary); -@action-sheet-subname-font-size: var(--van-font-size-sm); -@action-sheet-subname-line-height: var(--van-line-height-sm); -@action-sheet-close-icon-size: 22px; -@action-sheet-close-icon-color: var(--van-gray-5); -@action-sheet-close-icon-padding: 0 var(--van-padding-md); -@action-sheet-cancel-text-color: var(--van-gray-7); -@action-sheet-cancel-padding-top: var(--van-padding-xs); -@action-sheet-cancel-padding-color: var(--van-background-color); -@action-sheet-loading-icon-size: 22px; diff --git a/packages/vant/src/address-edit/index.less b/packages/vant/src/address-edit/index.less index 4b075b16b..f5be05099 100644 --- a/packages/vant/src/address-edit/index.less +++ b/packages/vant/src/address-edit/index.less @@ -1,10 +1,9 @@ -@import './var.less'; - :root { - --van-address-edit-padding: @address-edit-padding; - --van-address-edit-buttons-padding: @address-edit-buttons-padding; - --van-address-edit-button-margin-bottom: @address-edit-button-margin-bottom; - --van-address-edit-button-font-size: @address-edit-button-font-size; + --van-address-edit-padding: var(--van-padding-sm); + --van-address-edit-buttons-padding: var(--van-padding-xl) + var(--van-padding-base); + --van-address-edit-button-margin-bottom: var(--van-padding-sm); + --van-address-edit-button-font-size: var(--van-font-size-lg); } .van-address-edit { diff --git a/packages/vant/src/address-edit/var.less b/packages/vant/src/address-edit/var.less deleted file mode 100644 index 57d1d5417..000000000 --- a/packages/vant/src/address-edit/var.less +++ /dev/null @@ -1,6 +0,0 @@ -@import '../style/var.less'; - -@address-edit-padding: var(--van-padding-sm); -@address-edit-buttons-padding: var(--van-padding-xl) var(--van-padding-base); -@address-edit-button-margin-bottom: var(--van-padding-sm); -@address-edit-button-font-size: var(--van-font-size-lg); diff --git a/packages/vant/src/address-list/index.less b/packages/vant/src/address-list/index.less index 0e2331a2b..5dcb92eeb 100644 --- a/packages/vant/src/address-list/index.less +++ b/packages/vant/src/address-list/index.less @@ -1,19 +1,17 @@ -@import './var.less'; - :root { - --van-address-list-padding: @address-list-padding; - --van-address-list-disabled-text-color: @address-list-disabled-text-color; - --van-address-list-disabled-text-padding: @address-list-disabled-text-padding; - --van-address-list-disabled-text-font-size: @address-list-disabled-text-font-size; - --van-address-list-disabled-text-line-height: @address-list-disabled-text-line-height; - --van-address-list-add-button-z-index: @address-list-add-button-z-index; - --van-address-list-item-padding: @address-list-item-padding; - --van-address-list-item-text-color: @address-list-item-text-color; - --van-address-list-item-disabled-text-color: @address-list-item-disabled-text-color; - --van-address-list-item-font-size: @address-list-item-font-size; - --van-address-list-item-line-height: @address-list-item-line-height; - --van-address-list-item-radio-icon-color: @address-list-item-radio-icon-color; - --van-address-list-edit-icon-size: @address-list-edit-icon-size; + --van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px; + --van-address-list-disabled-text-color: var(--van-text-color-secondary); + --van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0; + --van-address-list-disabled-text-font-size: var(--van-font-size-md); + --van-address-list-disabled-text-line-height: var(--van-line-height-md); + --van-address-list-add-button-z-index: 999; + --van-address-list-item-padding: var(--van-padding-sm); + --van-address-list-item-text-color: var(--van-text-color); + --van-address-list-item-disabled-text-color: var(--van-text-color-tertiary); + --van-address-list-item-font-size: 13px; + --van-address-list-item-line-height: var(--van-line-height-sm); + --van-address-list-item-radio-icon-color: var(--van-danger-color); + --van-address-list-edit-icon-size: 20px; } .van-address-list { diff --git a/packages/vant/src/address-list/var.less b/packages/vant/src/address-list/var.less deleted file mode 100644 index 5ba5596b2..000000000 --- a/packages/vant/src/address-list/var.less +++ /dev/null @@ -1,16 +0,0 @@ -@import '../style/var.less'; - -@address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px; -@address-list-disabled-text-color: var(--van-text-color-secondary); -@address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0 - var(--van-padding-md); -@address-list-disabled-text-font-size: var(--van-font-size-md); -@address-list-disabled-text-line-height: var(--van-line-height-md); -@address-list-add-button-z-index: 999; -@address-list-item-padding: var(--van-padding-sm); -@address-list-item-text-color: var(--van-text-color); -@address-list-item-disabled-text-color: var(--van-text-color-tertiary); -@address-list-item-font-size: 13px; -@address-list-item-line-height: var(--van-line-height-sm); -@address-list-item-radio-icon-color: var(--van-danger-color); -@address-list-edit-icon-size: 20px; diff --git a/packages/vant/src/badge/index.less b/packages/vant/src/badge/index.less index db4431156..ca2f54831 100644 --- a/packages/vant/src/badge/index.less +++ b/packages/vant/src/badge/index.less @@ -1,16 +1,14 @@ -@import './var.less'; - :root { - --van-badge-size: @badge-size; - --van-badge-color: @badge-color; - --van-badge-padding: @badge-padding; - --van-badge-font-size: @badge-font-size; - --van-badge-font-weight: @badge-font-weight; - --van-badge-border-width: @badge-border-width; - --van-badge-background-color: @badge-background-color; - --van-badge-dot-color: @badge-dot-color; - --van-badge-dot-size: @badge-dot-size; - --van-badge-font-family: @badge-font-family; + --van-badge-size: 16px; + --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-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 { diff --git a/packages/vant/src/badge/var.less b/packages/vant/src/badge/var.less deleted file mode 100644 index 1e8cde4aa..000000000 --- a/packages/vant/src/badge/var.less +++ /dev/null @@ -1,12 +0,0 @@ -@import '../style/var.less'; - -@badge-size: 16px; -@badge-color: var(--van-white); -@badge-padding: 0 3px; -@badge-font-size: var(--van-font-size-sm); -@badge-font-weight: var(--van-font-weight-bold); -@badge-border-width: var(--van-border-width-base); -@badge-background-color: var(--van-danger-color); -@badge-dot-color: var(--van-danger-color); -@badge-dot-size: 8px; -@badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif; diff --git a/packages/vant/src/button/index.less b/packages/vant/src/button/index.less index 6133ac538..258639a52 100644 --- a/packages/vant/src/button/index.less +++ b/packages/vant/src/button/index.less @@ -1,40 +1,38 @@ -@import './var.less'; - :root { - --van-button-mini-height: @button-mini-height; - --van-button-mini-padding: @button-mini-padding; - --van-button-mini-font-size: @button-mini-font-size; - --van-button-small-height: @button-small-height; - --van-button-small-padding: @button-small-padding; - --van-button-small-font-size: @button-small-font-size; - --van-button-normal-padding: @button-normal-padding; - --van-button-normal-font-size: @button-normal-font-size; - --van-button-large-height: @button-large-height; - --van-button-default-height: @button-default-height; - --van-button-default-line-height: @button-default-line-height; - --van-button-default-font-size: @button-default-font-size; - --van-button-default-color: @button-default-color; - --van-button-default-background-color: @button-default-background-color; - --van-button-default-border-color: @button-default-border-color; - --van-button-primary-color: @button-primary-color; - --van-button-primary-background-color: @button-primary-background-color; - --van-button-primary-border-color: @button-primary-border-color; - --van-button-success-color: @button-success-color; - --van-button-success-background-color: @button-success-background-color; - --van-button-success-border-color: @button-success-border-color; - --van-button-danger-color: @button-danger-color; - --van-button-danger-background-color: @button-danger-background-color; - --van-button-danger-border-color: @button-danger-border-color; - --van-button-warning-color: @button-warning-color; - --van-button-warning-background-color: @button-warning-background-color; - --van-button-warning-border-color: @button-warning-border-color; - --van-button-border-width: @button-border-width; - --van-button-border-radius: @button-border-radius; - --van-button-round-border-radius: @button-round-border-radius; - --van-button-plain-background-color: @button-plain-background-color; - --van-button-disabled-opacity: @button-disabled-opacity; - --van-button-icon-size: @button-icon-size; - --van-button-loading-icon-size: @button-loading-icon-size; + --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-padding: 0 15px; + --van-button-normal-font-size: var(--van-font-size-md); + --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-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-disabled-opacity: var(--van-disabled-opacity); + --van-button-icon-size: 1.2em; + --van-button-loading-icon-size: 20px; } .van-button { diff --git a/packages/vant/src/button/var.less b/packages/vant/src/button/var.less deleted file mode 100644 index 3ae004ea5..000000000 --- a/packages/vant/src/button/var.less +++ /dev/null @@ -1,36 +0,0 @@ -@import '../style/var.less'; - -@button-mini-height: 24px; -@button-mini-padding: 0 var(--van-padding-base); -@button-mini-font-size: var(--van-font-size-xs); -@button-small-height: 32px; -@button-small-padding: 0 var(--van-padding-xs); -@button-small-font-size: var(--van-font-size-sm); -@button-normal-padding: 0 15px; -@button-normal-font-size: var(--van-font-size-md); -@button-large-height: 50px; -@button-default-height: 44px; -@button-default-line-height: 1.2; -@button-default-font-size: var(--van-font-size-lg); -@button-default-color: var(--van-text-color); -@button-default-background-color: var(--van-background-color-light); -@button-default-border-color: var(--van-border-color); -@button-primary-color: var(--van-white); -@button-primary-background-color: var(--van-primary-color); -@button-primary-border-color: var(--van-primary-color); -@button-success-color: var(--van-white); -@button-success-background-color: var(--van-success-color); -@button-success-border-color: var(--van-success-color); -@button-danger-color: var(--van-white); -@button-danger-background-color: var(--van-danger-color); -@button-danger-border-color: var(--van-danger-color); -@button-warning-color: var(--van-white); -@button-warning-background-color: var(--van-warning-color); -@button-warning-border-color: var(--van-warning-color); -@button-border-width: var(--van-border-width-base); -@button-border-radius: var(--van-border-radius-sm); -@button-round-border-radius: var(--van-border-radius-max); -@button-plain-background-color: var(--van-white); -@button-disabled-opacity: var(--van-disabled-opacity); -@button-icon-size: 1.2em; -@button-loading-icon-size: 20px; diff --git a/packages/vant/src/calendar/index.less b/packages/vant/src/calendar/index.less index da2af3449..15aa0f0fc 100644 --- a/packages/vant/src/calendar/index.less +++ b/packages/vant/src/calendar/index.less @@ -1,31 +1,29 @@ -@import './var.less'; - :root { - --van-calendar-background-color: @calendar-background-color; - --van-calendar-popup-height: @calendar-popup-height; - --van-calendar-header-box-shadow: @calendar-header-box-shadow; - --van-calendar-header-title-height: @calendar-header-title-height; - --van-calendar-header-title-font-size: @calendar-header-title-font-size; - --van-calendar-header-subtitle-font-size: @calendar-header-subtitle-font-size; - --van-calendar-weekdays-height: @calendar-weekdays-height; - --van-calendar-weekdays-font-size: @calendar-weekdays-font-size; - --van-calendar-month-title-font-size: @calendar-month-title-font-size; - --van-calendar-month-mark-color: @calendar-month-mark-color; - --van-calendar-month-mark-font-size: @calendar-month-mark-font-size; - --van-calendar-day-height: @calendar-day-height; - --van-calendar-day-font-size: @calendar-day-font-size; - --van-calendar-range-edge-color: @calendar-range-edge-color; - --van-calendar-range-edge-background-color: @calendar-range-edge-background-color; - --van-calendar-range-middle-color: @calendar-range-middle-color; - --van-calendar-range-middle-background-opacity: @calendar-range-middle-background-opacity; - --van-calendar-selected-day-size: @calendar-selected-day-size; - --van-calendar-selected-day-color: @calendar-selected-day-color; - --van-calendar-info-font-size: @calendar-info-font-size; - --van-calendar-info-line-height: @calendar-info-line-height; - --van-calendar-selected-day-background-color: @calendar-selected-day-background-color; - --van-calendar-day-disabled-color: @calendar-day-disabled-color; - --van-calendar-confirm-button-height: @calendar-confirm-button-height; - --van-calendar-confirm-button-margin: @calendar-confirm-button-margin; + --van-calendar-background-color: var(--van-background-color-light); + --van-calendar-popup-height: 80%; + --van-calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16); + --van-calendar-header-title-height: 44px; + --van-calendar-header-title-font-size: var(--van-font-size-lg); + --van-calendar-header-subtitle-font-size: var(--van-font-size-md); + --van-calendar-weekdays-height: 30px; + --van-calendar-weekdays-font-size: var(--van-font-size-sm); + --van-calendar-month-title-font-size: var(--van-font-size-md); + --van-calendar-month-mark-color: rgba(242, 243, 245, 0.8); + --van-calendar-month-mark-font-size: 160px; + --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-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-day-disabled-color: var(--van-text-color-tertiary); + --van-calendar-confirm-button-height: 36px; + --van-calendar-confirm-button-margin: 7px 0; } .van-calendar { diff --git a/packages/vant/src/calendar/var.less b/packages/vant/src/calendar/var.less deleted file mode 100644 index 6bbf24d55..000000000 --- a/packages/vant/src/calendar/var.less +++ /dev/null @@ -1,27 +0,0 @@ -@import '../style/var.less'; - -@calendar-background-color: var(--van-background-color-light); -@calendar-popup-height: 80%; -@calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16); -@calendar-header-title-height: 44px; -@calendar-header-title-font-size: var(--van-font-size-lg); -@calendar-header-subtitle-font-size: var(--van-font-size-md); -@calendar-weekdays-height: 30px; -@calendar-weekdays-font-size: var(--van-font-size-sm); -@calendar-month-title-font-size: var(--van-font-size-md); -@calendar-month-mark-color: rgba(242, 243, 245, 0.8); -@calendar-month-mark-font-size: 160px; -@calendar-day-height: 64px; -@calendar-day-font-size: var(--van-font-size-lg); -@calendar-range-edge-color: var(--van-white); -@calendar-range-edge-background-color: var(--van-danger-color); -@calendar-range-middle-color: var(--van-danger-color); -@calendar-range-middle-background-opacity: 0.1; -@calendar-selected-day-size: 54px; -@calendar-selected-day-color: var(--van-white); -@calendar-info-font-size: var(--van-font-size-xs); -@calendar-info-line-height: var(--van-line-height-xs); -@calendar-selected-day-background-color: var(--van-danger-color); -@calendar-day-disabled-color: var(--van-text-color-tertiary); -@calendar-confirm-button-height: 36px; -@calendar-confirm-button-margin: 7px 0; diff --git a/packages/vant/src/card/index.less b/packages/vant/src/card/index.less index 887d3fade..2a38aa2e7 100644 --- a/packages/vant/src/card/index.less +++ b/packages/vant/src/card/index.less @@ -1,22 +1,20 @@ -@import './var.less'; - :root { - --van-card-padding: @card-padding; - --van-card-font-size: @card-font-size; - --van-card-text-color: @card-text-color; - --van-card-background-color: @card-background-color; - --van-card-thumb-size: @card-thumb-size; - --van-card-thumb-border-radius: @card-thumb-border-radius; - --van-card-title-line-height: @card-title-line-height; - --van-card-desc-color: @card-desc-color; - --van-card-desc-line-height: @card-desc-line-height; - --van-card-price-color: @card-price-color; - --van-card-origin-price-color: @card-origin-price-color; - --van-card-num-color: @card-num-color; - --van-card-origin-price-font-size: @card-origin-price-font-size; - --van-card-price-font-size: @card-price-font-size; - --van-card-price-integer-font-size: @card-price-integer-font-size; - --van-card-price-font-family: @card-price-font-family; + --van-card-padding: var(--van-padding-xs) var(--van-padding-md); + --van-card-font-size: var(--van-font-size-sm); + --van-card-text-color: var(--van-text-color); + --van-card-background-color: var(--van-gray-1); + --van-card-thumb-size: 88px; + --van-card-thumb-border-radius: var(--van-border-radius-lg); + --van-card-title-line-height: 16px; + --van-card-desc-color: var(--van-gray-7); + --van-card-desc-line-height: var(--van-line-height-md); + --van-card-price-color: var(--van-gray-8); + --van-card-origin-price-color: var(--van-text-color-secondary); + --van-card-num-color: var(--van-text-color-secondary); + --van-card-origin-price-font-size: var(--van-font-size-xs); + --van-card-price-font-size: var(--van-font-size-sm); + --van-card-price-integer-font-size: var(--van-font-size-lg); + --van-card-price-font-family: var(--van-price-integer-font-family); } .van-card { diff --git a/packages/vant/src/card/var.less b/packages/vant/src/card/var.less deleted file mode 100644 index f698cfeee..000000000 --- a/packages/vant/src/card/var.less +++ /dev/null @@ -1,18 +0,0 @@ -@import '../style/var.less'; - -@card-padding: var(--van-padding-xs) var(--van-padding-md); -@card-font-size: var(--van-font-size-sm); -@card-text-color: var(--van-text-color); -@card-background-color: var(--van-gray-1); -@card-thumb-size: 88px; -@card-thumb-border-radius: var(--van-border-radius-lg); -@card-title-line-height: 16px; -@card-desc-color: var(--van-gray-7); -@card-desc-line-height: var(--van-line-height-md); -@card-price-color: var(--van-gray-8); -@card-origin-price-color: var(--van-text-color-secondary); -@card-num-color: var(--van-text-color-secondary); -@card-origin-price-font-size: var(--van-font-size-xs); -@card-price-font-size: var(--van-font-size-sm); -@card-price-integer-font-size: var(--van-font-size-lg); -@card-price-font-family: var(--van-price-integer-font-family); diff --git a/packages/vant/src/cascader/index.less b/packages/vant/src/cascader/index.less index 02f2b19d5..016f50a74 100644 --- a/packages/vant/src/cascader/index.less +++ b/packages/vant/src/cascader/index.less @@ -1,19 +1,17 @@ -@import './var.less'; - :root { - --van-cascader-header-height: @cascader-header-height; - --van-cascader-header-padding: @cascader-header-padding; - --van-cascader-title-font-size: @cascader-title-font-size; - --van-cascader-title-line-height: @cascader-title-line-height; - --van-cascader-close-icon-size: @cascader-close-icon-size; - --van-cascader-close-icon-color: @cascader-close-icon-color; - --van-cascader-selected-icon-size: @cascader-selected-icon-size; - --van-cascader-tabs-height: @cascader-tabs-height; - --van-cascader-active-color: @cascader-active-color; - --van-cascader-options-height: @cascader-options-height; - --van-cascader-option-disabled-color: @cascader-option-disabled-color; - --van-cascader-tab-color: @cascader-tab-color; - --van-cascader-unselected-tab-color: @cascader-unselected-tab-color; + --van-cascader-header-height: 48px; + --van-cascader-header-padding: 0 var(--van-padding-md); + --van-cascader-title-font-size: var(--van-font-size-lg); + --van-cascader-title-line-height: 20px; + --van-cascader-close-icon-size: 22px; + --van-cascader-close-icon-color: var(--van-gray-5); + --van-cascader-selected-icon-size: 18px; + --van-cascader-tabs-height: 48px; + --van-cascader-active-color: var(--van-danger-color); + --van-cascader-options-height: 384px; + --van-cascader-option-disabled-color: var(--van-text-color-tertiary); + --van-cascader-tab-color: var(--van-text-color); + --van-cascader-unselected-tab-color: var(--van-text-color-secondary); } .van-cascader { diff --git a/packages/vant/src/cascader/var.less b/packages/vant/src/cascader/var.less deleted file mode 100644 index ae325cd5a..000000000 --- a/packages/vant/src/cascader/var.less +++ /dev/null @@ -1,15 +0,0 @@ -@import '../style/var.less'; - -@cascader-header-height: 48px; -@cascader-header-padding: 0 var(--van-padding-md); -@cascader-title-font-size: var(--van-font-size-lg); -@cascader-title-line-height: 20px; -@cascader-close-icon-size: 22px; -@cascader-close-icon-color: var(--van-gray-5); -@cascader-selected-icon-size: 18px; -@cascader-tabs-height: 48px; -@cascader-active-color: var(--van-danger-color); -@cascader-options-height: 384px; -@cascader-option-disabled-color: var(--van-text-color-tertiary); -@cascader-tab-color: var(--van-text-color); -@cascader-unselected-tab-color: var(--van-text-color-secondary); diff --git a/packages/vant/src/cell-group/index.less b/packages/vant/src/cell-group/index.less index 26f0289e9..71bf252b5 100644 --- a/packages/vant/src/cell-group/index.less +++ b/packages/vant/src/cell-group/index.less @@ -1,14 +1,13 @@ -@import './var.less'; - :root { - --van-cell-group-background-color: @cell-group-background-color; - --van-cell-group-title-color: @cell-group-title-color; - --van-cell-group-title-padding: @cell-group-title-padding; - --van-cell-group-title-font-size: @cell-group-title-font-size; - --van-cell-group-title-line-height: @cell-group-title-line-height; - --van-cell-group-inset-padding: @cell-group-inset-padding; - --van-cell-group-inset-border-radius: @cell-group-inset-border-radius; - --van-cell-group-inset-title-padding: @cell-group-inset-title-padding; + --van-cell-group-background-color: var(--van-background-color-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-title-padding: var(--van-padding-md) + var(--van-padding-md); } .van-cell-group { diff --git a/packages/vant/src/cell-group/var.less b/packages/vant/src/cell-group/var.less deleted file mode 100644 index 74e0a3d62..000000000 --- a/packages/vant/src/cell-group/var.less +++ /dev/null @@ -1,12 +0,0 @@ -@import '../style/var.less'; - -@cell-group-background-color: var(--van-background-color-light); -@cell-group-title-color: var(--van-text-color-secondary); -@cell-group-title-padding: var(--van-padding-md) var(--van-padding-md) - var(--van-padding-xs); -@cell-group-title-font-size: var(--van-font-size-md); -@cell-group-title-line-height: 16px; -@cell-group-inset-padding: 0 var(--van-padding-md); -@cell-group-inset-border-radius: var(--van-border-radius-lg); -@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 e5b4aba94..99aa9ba4e 100644 --- a/packages/vant/src/cell/index.less +++ b/packages/vant/src/cell/index.less @@ -1,26 +1,25 @@ -@import './var.less'; @import '../style/mixins/hairline'; :root { - --van-cell-font-size: @cell-font-size; - --van-cell-line-height: @cell-line-height; - --van-cell-vertical-padding: @cell-vertical-padding; - --van-cell-horizontal-padding: @cell-horizontal-padding; - --van-cell-text-color: @cell-text-color; - --van-cell-background-color: @cell-background-color; - --van-cell-border-color: @cell-border-color; - --van-cell-active-color: @cell-active-color; - --van-cell-required-color: @cell-required-color; - --van-cell-label-color: @cell-label-color; - --van-cell-label-font-size: @cell-label-font-size; - --van-cell-label-line-height: @cell-label-line-height; - --van-cell-label-margin-top: @cell-label-margin-top; - --van-cell-value-color: @cell-value-color; - --van-cell-icon-size: @cell-icon-size; - --van-cell-right-icon-color: @cell-right-icon-color; - --van-cell-large-vertical-padding: @cell-large-vertical-padding; - --van-cell-large-title-font-size: @cell-large-title-font-size; - --van-cell-large-label-font-size: @cell-large-label-font-size; + --van-cell-font-size: var(--van-font-size-md); + --van-cell-line-height: 24px; + --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-border-color: var(--van-border-color); + --van-cell-active-color: var(--van-active-color); + --van-cell-required-color: var(--van-danger-color); + --van-cell-label-color: var(--van-text-color-secondary); + --van-cell-label-font-size: var(--van-font-size-sm); + --van-cell-label-line-height: var(--van-line-height-sm); + --van-cell-label-margin-top: var(--van-padding-base); + --van-cell-value-color: var(--van-text-color-secondary); + --van-cell-icon-size: 16px; + --van-cell-right-icon-color: var(--van-gray-6); + --van-cell-large-vertical-padding: var(--van-padding-sm); + --van-cell-large-title-font-size: var(--van-font-size-lg); + --van-cell-large-label-font-size: var(--van-font-size-md); } .van-cell { diff --git a/packages/vant/src/cell/var.less b/packages/vant/src/cell/var.less deleted file mode 100644 index 892146a51..000000000 --- a/packages/vant/src/cell/var.less +++ /dev/null @@ -1,21 +0,0 @@ -@import '../style/var.less'; - -@cell-font-size: var(--van-font-size-md); -@cell-line-height: 24px; -@cell-vertical-padding: 10px; -@cell-horizontal-padding: var(--van-padding-md); -@cell-text-color: var(--van-text-color); -@cell-background-color: var(--van-background-color-light); -@cell-border-color: var(--van-border-color); -@cell-active-color: var(--van-active-color); -@cell-required-color: var(--van-danger-color); -@cell-label-color: var(--van-text-color-secondary); -@cell-label-font-size: var(--van-font-size-sm); -@cell-label-line-height: var(--van-line-height-sm); -@cell-label-margin-top: var(--van-padding-base); -@cell-value-color: var(--van-text-color-secondary); -@cell-icon-size: 16px; -@cell-right-icon-color: var(--van-gray-6); -@cell-large-vertical-padding: var(--van-padding-sm); -@cell-large-title-font-size: var(--van-font-size-lg); -@cell-large-label-font-size: var(--van-font-size-md); diff --git a/packages/vant/src/checkbox/index.less b/packages/vant/src/checkbox/index.less index 912085b66..0e2d7063d 100644 --- a/packages/vant/src/checkbox/index.less +++ b/packages/vant/src/checkbox/index.less @@ -1,15 +1,13 @@ -@import './var.less'; - :root { - --van-checkbox-size: @checkbox-size; - --van-checkbox-border-color: @checkbox-border-color; - --van-checkbox-transition-duration: @checkbox-transition-duration; - --van-checkbox-label-margin: @checkbox-label-margin; - --van-checkbox-label-color: @checkbox-label-color; - --van-checkbox-checked-icon-color: @checkbox-checked-icon-color; - --van-checkbox-disabled-icon-color: @checkbox-disabled-icon-color; - --van-checkbox-disabled-label-color: @checkbox-disabled-label-color; - --van-checkbox-disabled-background-color: @checkbox-disabled-background-color; + --van-checkbox-size: 20px; + --van-checkbox-border-color: var(--van-gray-5); + --van-checkbox-transition-duration: var(--van-animation-duration-fast); + --van-checkbox-label-margin: var(--van-padding-xs); + --van-checkbox-label-color: var(--van-text-color); + --van-checkbox-checked-icon-color: var(--van-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 { diff --git a/packages/vant/src/checkbox/var.less b/packages/vant/src/checkbox/var.less deleted file mode 100644 index 6b51dad06..000000000 --- a/packages/vant/src/checkbox/var.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../style/var.less'; - -@checkbox-size: 20px; -@checkbox-border-color: var(--van-gray-5); -@checkbox-transition-duration: var(--van-animation-duration-fast); -@checkbox-label-margin: var(--van-padding-xs); -@checkbox-label-color: var(--van-text-color); -@checkbox-checked-icon-color: var(--van-primary-color); -@checkbox-disabled-icon-color: var(--van-gray-5); -@checkbox-disabled-label-color: var(--van-text-color-tertiary); -@checkbox-disabled-background-color: var(--van-border-color); diff --git a/packages/vant/src/circle/index.less b/packages/vant/src/circle/index.less index 4d9ee3640..2a80d1afb 100644 --- a/packages/vant/src/circle/index.less +++ b/packages/vant/src/circle/index.less @@ -1,13 +1,11 @@ -@import './var.less'; - :root { - --van-circle-size: @circle-size; - --van-circle-color: @circle-color; - --van-circle-layer-color: @circle-layer-color; - --van-circle-text-color: @circle-text-color; - --van-circle-text-font-weight: @circle-text-font-weight; - --van-circle-text-font-size: @circle-text-font-size; - --van-circle-text-line-height: @circle-text-line-height; + --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 { diff --git a/packages/vant/src/circle/var.less b/packages/vant/src/circle/var.less deleted file mode 100644 index ab0a9b42b..000000000 --- a/packages/vant/src/circle/var.less +++ /dev/null @@ -1,9 +0,0 @@ -@import '../style/var.less'; - -@circle-size: 100px; -@circle-color: var(--van-primary-color); -@circle-layer-color: var(--van-white); -@circle-text-color: var(--van-text-color); -@circle-text-font-weight: var(--van-font-weight-bold); -@circle-text-font-size: var(--van-font-size-md); -@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 58588d3ec..b6de65a57 100644 --- a/packages/vant/src/collapse-item/index.less +++ b/packages/vant/src/collapse-item/index.less @@ -1,14 +1,16 @@ -@import './var.less'; @import '../style/mixins/hairline'; :root { - --van-collapse-item-transition-duration: @collapse-item-transition-duration; - --van-collapse-item-content-padding: @collapse-item-content-padding; - --van-collapse-item-content-font-size: @collapse-item-content-font-size; - --van-collapse-item-content-line-height: @collapse-item-content-line-height; - --van-collapse-item-content-text-color: @collapse-item-content-text-color; - --van-collapse-item-content-background-color: @collapse-item-content-background-color; - --van-collapse-item-title-disabled-color: @collapse-item-title-disabled-color; + --van-collapse-item-transition-duration: var(--van-animation-duration-base); + --van-collapse-item-content-padding: var(--van-padding-sm) + var(--van-padding-md); + --van-collapse-item-content-font-size: var(--van-font-size-md); + --van-collapse-item-content-line-height: 1.5; + --van-collapse-item-content-text-color: var(--van-text-color-secondary); + --van-collapse-item-content-background-color: var( + --van-background-color-light + ); + --van-collapse-item-title-disabled-color: var(--van-text-color-tertiary); } .van-collapse-item { diff --git a/packages/vant/src/collapse-item/var.less b/packages/vant/src/collapse-item/var.less deleted file mode 100644 index 34987c562..000000000 --- a/packages/vant/src/collapse-item/var.less +++ /dev/null @@ -1,9 +0,0 @@ -@import '../style/var.less'; - -@collapse-item-transition-duration: var(--van-animation-duration-base); -@collapse-item-content-padding: var(--van-padding-sm) var(--van-padding-md); -@collapse-item-content-font-size: var(--van-font-size-md); -@collapse-item-content-line-height: 1.5; -@collapse-item-content-text-color: var(--van-text-color-secondary); -@collapse-item-content-background-color: var(--van-background-color-light); -@collapse-item-title-disabled-color: var(--van-text-color-tertiary); diff --git a/packages/vant/src/contact-card/index.less b/packages/vant/src/contact-card/index.less index 0af7e3344..acc7e7a2f 100644 --- a/packages/vant/src/contact-card/index.less +++ b/packages/vant/src/contact-card/index.less @@ -1,10 +1,8 @@ -@import './var.less'; - :root { - --van-contact-card-padding: @contact-card-padding; - --van-contact-card-add-icon-size: @contact-card-add-icon-size; - --van-contact-card-add-icon-color: @contact-card-add-icon-color; - --van-contact-card-value-line-height: @contact-card-value-line-height; + --van-contact-card-padding: var(--van-padding-md); + --van-contact-card-add-icon-size: 40px; + --van-contact-card-add-icon-color: var(--van-primary-color); + --van-contact-card-value-line-height: var(--van-line-height-md); } .van-contact-card { diff --git a/packages/vant/src/contact-card/var.less b/packages/vant/src/contact-card/var.less deleted file mode 100644 index 80e280c73..000000000 --- a/packages/vant/src/contact-card/var.less +++ /dev/null @@ -1,6 +0,0 @@ -@import '../style/var.less'; - -@contact-card-padding: var(--van-padding-md); -@contact-card-add-icon-size: 40px; -@contact-card-add-icon-color: var(--van-primary-color); -@contact-card-value-line-height: var(--van-line-height-md); diff --git a/packages/vant/src/contact-edit/index.less b/packages/vant/src/contact-edit/index.less index ce206c32d..6a83f9f4c 100644 --- a/packages/vant/src/contact-edit/index.less +++ b/packages/vant/src/contact-edit/index.less @@ -1,12 +1,10 @@ -@import './var.less'; - :root { - --van-contact-edit-padding: @contact-edit-padding; - --van-contact-edit-fields-radius: @contact-edit-fields-radius; - --van-contact-edit-buttons-padding: @contact-edit-buttons-padding; - --van-contact-edit-button-margin-bottom: @contact-edit-button-margin-bottom; - --van-contact-edit-button-font-size: @contact-edit-button-font-size; - --van-contact-edit-field-label-width: @contact-edit-field-label-width; + --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 { diff --git a/packages/vant/src/contact-edit/var.less b/packages/vant/src/contact-edit/var.less deleted file mode 100644 index 4fe65fda6..000000000 --- a/packages/vant/src/contact-edit/var.less +++ /dev/null @@ -1,8 +0,0 @@ -@import '../style/var.less'; - -@contact-edit-padding: var(--van-padding-md); -@contact-edit-fields-radius: var(--van-border-radius-md); -@contact-edit-buttons-padding: var(--van-padding-xl) 0; -@contact-edit-button-margin-bottom: var(--van-padding-sm); -@contact-edit-button-font-size: var(--van-font-size-lg); -@contact-edit-field-label-width: 4.1em; diff --git a/packages/vant/src/contact-list/index.less b/packages/vant/src/contact-list/index.less index 95d2af60b..d8ef8b939 100644 --- a/packages/vant/src/contact-list/index.less +++ b/packages/vant/src/contact-list/index.less @@ -1,10 +1,8 @@ -@import './var.less'; - :root { - --van-contact-list-edit-icon-size: @contact-list-edit-icon-size; - --van-contact-list-add-button-z-index: @contact-list-add-button-z-index; - --van-contact-list-item-padding: @contact-list-item-padding; - --van-contact-list-item-radio-icon-color: @contact-list-item-radio-icon-color; + --van-contact-list-edit-icon-size: 16px; + --van-contact-list-add-button-z-index: 999; + --van-contact-list-item-padding: var(--van-padding-md); + --van-contact-list-item-radio-icon-color: var(--van-danger-color); } .van-contact-list { diff --git a/packages/vant/src/contact-list/var.less b/packages/vant/src/contact-list/var.less deleted file mode 100644 index e0720ecf8..000000000 --- a/packages/vant/src/contact-list/var.less +++ /dev/null @@ -1,6 +0,0 @@ -@import '../style/var.less'; - -@contact-list-edit-icon-size: 16px; -@contact-list-add-button-z-index: 999; -@contact-list-item-padding: var(--van-padding-md); -@contact-list-item-radio-icon-color: var(--van-danger-color); diff --git a/packages/vant/src/count-down/index.less b/packages/vant/src/count-down/index.less index 95076e1d2..064c7b0a2 100644 --- a/packages/vant/src/count-down/index.less +++ b/packages/vant/src/count-down/index.less @@ -1,9 +1,7 @@ -@import './var.less'; - :root { - --van-count-down-text-color: @count-down-text-color; - --van-count-down-font-size: @count-down-font-size; - --van-count-down-line-height: @count-down-line-height; + --van-count-down-text-color: var(--van-text-color); + --van-count-down-font-size: var(--van-font-size-md); + --van-count-down-line-height: var(--van-line-height-md); } .van-count-down { diff --git a/packages/vant/src/count-down/var.less b/packages/vant/src/count-down/var.less deleted file mode 100644 index 0a5c3fe08..000000000 --- a/packages/vant/src/count-down/var.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '../style/var.less'; - -@count-down-text-color: var(--van-text-color); -@count-down-font-size: var(--van-font-size-md); -@count-down-line-height: var(--van-line-height-md); diff --git a/packages/vant/src/coupon-cell/index.less b/packages/vant/src/coupon-cell/index.less index 834325991..49c2a3d2b 100644 --- a/packages/vant/src/coupon-cell/index.less +++ b/packages/vant/src/coupon-cell/index.less @@ -1,7 +1,5 @@ -@import './var.less'; - :root { - --van-coupon-cell-selected-text-color: @coupon-cell-selected-text-color; + --van-coupon-cell-selected-text-color: var(--van-text-color); } .van-coupon-cell { diff --git a/packages/vant/src/coupon-cell/var.less b/packages/vant/src/coupon-cell/var.less deleted file mode 100644 index db0b5ea31..000000000 --- a/packages/vant/src/coupon-cell/var.less +++ /dev/null @@ -1,3 +0,0 @@ -@import '../style/var.less'; - -@coupon-cell-selected-text-color: var(--van-text-color); diff --git a/packages/vant/src/coupon-list/index.less b/packages/vant/src/coupon-list/index.less index 1c8e55ab0..c789a6678 100644 --- a/packages/vant/src/coupon-list/index.less +++ b/packages/vant/src/coupon-list/index.less @@ -1,14 +1,12 @@ -@import './var.less'; - :root { - --van-coupon-list-background-color: @coupon-list-background-color; - --van-coupon-list-field-padding: @coupon-list-field-padding; - --van-coupon-list-exchange-button-height: @coupon-list-exchange-button-height; - --van-coupon-list-close-button-height: @coupon-list-close-button-height; - --van-coupon-list-empty-image-size: @coupon-list-empty-image-size; - --van-coupon-list-empty-tip-color: @coupon-list-empty-tip-color; - --van-coupon-list-empty-tip-font-size: @coupon-list-empty-tip-font-size; - --van-coupon-list-empty-tip-line-height: @coupon-list-empty-tip-line-height; + --van-coupon-list-background-color: var(--van-background-color); + --van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md); + --van-coupon-list-exchange-button-height: 32px; + --van-coupon-list-close-button-height: 40px; + --van-coupon-list-empty-image-size: 200px; + --van-coupon-list-empty-tip-color: var(--van-text-color-secondary); + --van-coupon-list-empty-tip-font-size: var(--van-font-size-md); + --van-coupon-list-empty-tip-line-height: var(--van-line-height-md); } .van-coupon-list { diff --git a/packages/vant/src/coupon-list/var.less b/packages/vant/src/coupon-list/var.less deleted file mode 100644 index 5d38daccb..000000000 --- a/packages/vant/src/coupon-list/var.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '../style/var.less'; - -@coupon-list-background-color: var(--van-background-color); -@coupon-list-field-padding: 5px 0 5px var(--van-padding-md); -@coupon-list-exchange-button-height: 32px; -@coupon-list-close-button-height: 40px; -@coupon-list-empty-image-size: 200px; -@coupon-list-empty-tip-color: var(--van-text-color-secondary); -@coupon-list-empty-tip-font-size: var(--van-font-size-md); -@coupon-list-empty-tip-line-height: var(--van-line-height-md); diff --git a/packages/vant/src/coupon/index.less b/packages/vant/src/coupon/index.less index 9b0c9b1fe..b00f0aaca 100644 --- a/packages/vant/src/coupon/index.less +++ b/packages/vant/src/coupon/index.less @@ -1,24 +1,23 @@ -@import './var.less'; @import '../style/mixins/ellipsis'; :root { - --van-coupon-margin: @coupon-margin; - --van-coupon-content-height: @coupon-content-height; - --van-coupon-content-padding: @coupon-content-padding; - --van-coupon-content-text-color: @coupon-content-text-color; - --van-coupon-background-color: @coupon-background-color; - --van-coupon-active-background-color: @coupon-active-background-color; - --van-coupon-border-radius: @coupon-border-radius; - --van-coupon-box-shadow: @coupon-box-shadow; - --van-coupon-head-width: @coupon-head-width; - --van-coupon-amount-color: @coupon-amount-color; - --van-coupon-amount-font-size: @coupon-amount-font-size; - --van-coupon-currency-font-size: @coupon-currency-font-size; - --van-coupon-name-font-size: @coupon-name-font-size; - --van-coupon-disabled-text-color: @coupon-disabled-text-color; - --van-coupon-description-padding: @coupon-description-padding; - --van-coupon-description-border-color: @coupon-description-border-color; - --van-coupon-corner-checkbox-icon-color: @coupon-corner-checkbox-icon-color; + --van-coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm); + --van-coupon-content-height: 84px; + --van-coupon-content-padding: 14px 0; + --van-coupon-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-head-width: 96px; + --van-coupon-amount-color: var(--van-danger-color); + --van-coupon-amount-font-size: 30px; + --van-coupon-currency-font-size: 40%; + --van-coupon-name-font-size: var(--van-font-size-md); + --van-coupon-disabled-text-color: var(--van-text-color-secondary); + --van-coupon-description-padding: var(--van-padding-xs) var(--van-padding-md); + --van-coupon-description-border-color: var(--van-border-color); + --van-coupon-corner-checkbox-icon-color: var(--van-danger-color); } .van-coupon { diff --git a/packages/vant/src/coupon/var.less b/packages/vant/src/coupon/var.less deleted file mode 100644 index f15efb613..000000000 --- a/packages/vant/src/coupon/var.less +++ /dev/null @@ -1,19 +0,0 @@ -@import '../style/var.less'; - -@coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm); -@coupon-content-height: 84px; -@coupon-content-padding: 14px 0; -@coupon-content-text-color: var(--van-text-color); -@coupon-background-color: var(--van-background-color-light); -@coupon-active-background-color: var(--van-active-color); -@coupon-border-radius: var(--van-border-radius-lg); -@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); -@coupon-head-width: 96px; -@coupon-amount-color: var(--van-danger-color); -@coupon-amount-font-size: 30px; -@coupon-currency-font-size: 40%; -@coupon-name-font-size: var(--van-font-size-md); -@coupon-disabled-text-color: var(--van-text-color-secondary); -@coupon-description-padding: var(--van-padding-xs) var(--van-padding-md); -@coupon-description-border-color: var(--van-border-color); -@coupon-corner-checkbox-icon-color: var(--van-danger-color); diff --git a/packages/vant/src/dialog/index.less b/packages/vant/src/dialog/index.less index e8db2cb3c..dd85701c8 100644 --- a/packages/vant/src/dialog/index.less +++ b/packages/vant/src/dialog/index.less @@ -1,25 +1,23 @@ -@import './var.less'; - :root { - --van-dialog-width: @dialog-width; - --van-dialog-small-screen-width: @dialog-small-screen-width; - --van-dialog-font-size: @dialog-font-size; - --van-dialog-transition: @dialog-transition; - --van-dialog-border-radius: @dialog-border-radius; - --van-dialog-background-color: @dialog-background-color; - --van-dialog-header-font-weight: @dialog-header-font-weight; - --van-dialog-header-line-height: @dialog-header-line-height; - --van-dialog-header-padding-top: @dialog-header-padding-top; - --van-dialog-header-isolated-padding: @dialog-header-isolated-padding; - --van-dialog-message-padding: @dialog-message-padding; - --van-dialog-message-font-size: @dialog-message-font-size; - --van-dialog-message-line-height: @dialog-message-line-height; - --van-dialog-message-max-height: @dialog-message-max-height; - --van-dialog-has-title-message-text-color: @dialog-has-title-message-text-color; - --van-dialog-has-title-message-padding-top: @dialog-has-title-message-padding-top; - --van-dialog-button-height: @dialog-button-height; - --van-dialog-round-button-height: @dialog-round-button-height; - --van-dialog-confirm-button-text-color: @dialog-confirm-button-text-color; + --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-header-line-height: 24px; + --van-dialog-header-padding-top: 26px; + --van-dialog-header-isolated-padding: var(--van-padding-lg) 0; + --van-dialog-message-padding: var(--van-padding-lg); + --van-dialog-message-font-size: var(--van-font-size-md); + --van-dialog-message-line-height: var(--van-line-height-md); + --van-dialog-message-max-height: 60vh; + --van-dialog-has-title-message-text-color: var(--van-gray-7); + --van-dialog-has-title-message-padding-top: var(--van-padding-xs); + --van-dialog-button-height: 48px; + --van-dialog-round-button-height: 36px; + --van-dialog-confirm-button-text-color: var(--van-danger-color); } .van-dialog { diff --git a/packages/vant/src/dialog/var.less b/packages/vant/src/dialog/var.less deleted file mode 100644 index d0e26b92d..000000000 --- a/packages/vant/src/dialog/var.less +++ /dev/null @@ -1,21 +0,0 @@ -@import '../style/var.less'; - -@dialog-width: 320px; -@dialog-small-screen-width: 90%; -@dialog-font-size: var(--van-font-size-lg); -@dialog-transition: var(--van-animation-duration-base); -@dialog-border-radius: 16px; -@dialog-background-color: var(--van-background-color-light); -@dialog-header-font-weight: var(--van-font-weight-bold); -@dialog-header-line-height: 24px; -@dialog-header-padding-top: 26px; -@dialog-header-isolated-padding: var(--van-padding-lg) 0; -@dialog-message-padding: var(--van-padding-lg); -@dialog-message-font-size: var(--van-font-size-md); -@dialog-message-line-height: var(--van-line-height-md); -@dialog-message-max-height: 60vh; -@dialog-has-title-message-text-color: var(--van-gray-7); -@dialog-has-title-message-padding-top: var(--van-padding-xs); -@dialog-button-height: 48px; -@dialog-round-button-height: 36px; -@dialog-confirm-button-text-color: var(--van-danger-color); diff --git a/packages/vant/src/divider/index.less b/packages/vant/src/divider/index.less index 1753439da..9237d652e 100644 --- a/packages/vant/src/divider/index.less +++ b/packages/vant/src/divider/index.less @@ -1,14 +1,12 @@ -@import './var.less'; - :root { - --van-divider-margin: @divider-margin; - --van-divider-text-color: @divider-text-color; - --van-divider-font-size: @divider-font-size; - --van-divider-line-height: @divider-line-height; - --van-divider-border-color: @divider-border-color; - --van-divider-content-padding: @divider-content-padding; - --van-divider-content-left-width: @divider-content-left-width; - --van-divider-content-right-width: @divider-content-right-width; + --van-divider-margin: var(--van-padding-md) 0; + --van-divider-text-color: var(--van-text-color-secondary); + --van-divider-font-size: var(--van-font-size-md); + --van-divider-line-height: 24px; + --van-divider-border-color: var(--van-border-color); + --van-divider-content-padding: var(--van-padding-md); + --van-divider-content-left-width: 10%; + --van-divider-content-right-width: 10%; } .van-divider { diff --git a/packages/vant/src/divider/var.less b/packages/vant/src/divider/var.less deleted file mode 100644 index 3d839fcd6..000000000 --- a/packages/vant/src/divider/var.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '../style/var.less'; - -@divider-margin: var(--van-padding-md) 0; -@divider-text-color: var(--van-text-color-secondary); -@divider-font-size: var(--van-font-size-md); -@divider-line-height: 24px; -@divider-border-color: var(--van-border-color); -@divider-content-padding: var(--van-padding-md); -@divider-content-left-width: 10%; -@divider-content-right-width: 10%; diff --git a/packages/vant/src/dropdown-item/index.less b/packages/vant/src/dropdown-item/index.less index e5326a792..0c7a78dbc 100644 --- a/packages/vant/src/dropdown-item/index.less +++ b/packages/vant/src/dropdown-item/index.less @@ -1,8 +1,5 @@ -@import './var.less'; -@import '../dropdown-menu/var.less'; - :root { - --van-dropdown-item-z-index: @dropdown-item-z-index; + --van-dropdown-item-z-index: 10; } .van-dropdown-item { diff --git a/packages/vant/src/dropdown-item/var.less b/packages/vant/src/dropdown-item/var.less deleted file mode 100644 index 0003409d1..000000000 --- a/packages/vant/src/dropdown-item/var.less +++ /dev/null @@ -1,3 +0,0 @@ -@import '../style/var.less'; - -@dropdown-item-z-index: 10; diff --git a/packages/vant/src/dropdown-menu/index.less b/packages/vant/src/dropdown-menu/index.less index c5ac3aae7..7c270124b 100644 --- a/packages/vant/src/dropdown-menu/index.less +++ b/packages/vant/src/dropdown-menu/index.less @@ -1,18 +1,17 @@ -@import './var.less'; -@import '../dropdown-item/var.less'; - :root { - --van-dropdown-menu-height: @dropdown-menu-height; - --van-dropdown-menu-background-color: @dropdown-menu-background-color; - --van-dropdown-menu-box-shadow: @dropdown-menu-box-shadow; - --van-dropdown-menu-title-font-size: @dropdown-menu-title-font-size; - --van-dropdown-menu-title-text-color: @dropdown-menu-title-text-color; - --van-dropdown-menu-title-active-text-color: @dropdown-menu-title-active-text-color; - --van-dropdown-menu-title-disabled-text-color: @dropdown-menu-title-disabled-text-color; - --van-dropdown-menu-title-padding: @dropdown-menu-title-padding; - --van-dropdown-menu-title-line-height: @dropdown-menu-title-line-height; - --van-dropdown-menu-option-active-color: @dropdown-menu-option-active-color; - --van-dropdown-menu-content-max-height: @dropdown-menu-content-max-height; + --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-title-font-size: 15px; + --van-dropdown-menu-title-text-color: var(--van-text-color); + --van-dropdown-menu-title-active-text-color: var(--van-danger-color); + --van-dropdown-menu-title-disabled-text-color: var( + --van-text-color-secondary + ); + --van-dropdown-menu-title-padding: 0 var(--van-padding-xs); + --van-dropdown-menu-title-line-height: var(--van-line-height-lg); + --van-dropdown-menu-option-active-color: var(--van-danger-color); + --van-dropdown-menu-content-max-height: 80%; } .van-dropdown-menu { diff --git a/packages/vant/src/dropdown-menu/var.less b/packages/vant/src/dropdown-menu/var.less deleted file mode 100644 index 05c4f5678..000000000 --- a/packages/vant/src/dropdown-menu/var.less +++ /dev/null @@ -1,13 +0,0 @@ -@import '../style/var.less'; - -@dropdown-menu-height: 48px; -@dropdown-menu-background-color: var(--van-background-color-light); -@dropdown-menu-box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12); -@dropdown-menu-title-font-size: 15px; -@dropdown-menu-title-text-color: var(--van-text-color); -@dropdown-menu-title-active-text-color: var(--van-danger-color); -@dropdown-menu-title-disabled-text-color: var(--van-text-color-secondary); -@dropdown-menu-title-padding: 0 var(--van-padding-xs); -@dropdown-menu-title-line-height: var(--van-line-height-lg); -@dropdown-menu-option-active-color: var(--van-danger-color); -@dropdown-menu-content-max-height: 80%; diff --git a/packages/vant/src/empty/index.less b/packages/vant/src/empty/index.less index ef3111ede..7097a68ef 100644 --- a/packages/vant/src/empty/index.less +++ b/packages/vant/src/empty/index.less @@ -1,14 +1,12 @@ -@import './var.less'; - :root { - --van-empty-padding: @empty-padding; - --van-empty-image-size: @empty-image-size; - --van-empty-description-margin-top: @empty-description-margin-top; - --van-empty-description-padding: @empty-description-padding; - --van-empty-description-color: @empty-description-color; - --van-empty-description-font-size: @empty-description-font-size; - --van-empty-description-line-height: @empty-description-line-height; - --van-empty-bottom-margin-top: @empty-bottom-margin-top; + --van-empty-padding: var(--van-padding-xl) 0; + --van-empty-image-size: 160px; + --van-empty-description-margin-top: var(--van-padding-md); + --van-empty-description-padding: 0 60px; + --van-empty-description-color: var(--van-text-color-secondary); + --van-empty-description-font-size: var(--van-font-size-md); + --van-empty-description-line-height: var(--van-line-height-md); + --van-empty-bottom-margin-top: 24px; } .van-empty { diff --git a/packages/vant/src/empty/var.less b/packages/vant/src/empty/var.less deleted file mode 100644 index 3dc9a4e75..000000000 --- a/packages/vant/src/empty/var.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '../style/var.less'; - -@empty-padding: var(--van-padding-xl) 0; -@empty-image-size: 160px; -@empty-description-margin-top: var(--van-padding-md); -@empty-description-padding: 0 60px; -@empty-description-color: var(--van-text-color-secondary); -@empty-description-font-size: var(--van-font-size-md); -@empty-description-line-height: var(--van-line-height-md); -@empty-bottom-margin-top: 24px; diff --git a/packages/vant/src/field/index.less b/packages/vant/src/field/index.less index a0f0bfb97..0aab22ba9 100644 --- a/packages/vant/src/field/index.less +++ b/packages/vant/src/field/index.less @@ -1,26 +1,23 @@ -@import './var.less'; -@import '../cell/var.less'; - :root { - --van-field-label-width: @field-label-width; - --van-field-label-color: @field-label-color; - --van-field-label-margin-right: @field-label-margin-right; - --van-field-input-text-color: @field-input-text-color; - --van-field-input-error-text-color: @field-input-error-text-color; - --van-field-input-disabled-text-color: @field-input-disabled-text-color; - --van-field-placeholder-text-color: @field-placeholder-text-color; - --van-field-icon-size: @field-icon-size; - --van-field-clear-icon-size: @field-clear-icon-size; - --van-field-clear-icon-color: @field-clear-icon-color; - --van-field-right-icon-color: @field-right-icon-color; - --van-field-error-message-color: @field-error-message-color; - --van-field-error-message-font-size: @field-error-message-font-size; - --van-field-text-area-min-height: @field-text-area-min-height; - --van-field-word-limit-color: @field-word-limit-color; - --van-field-word-limit-font-size: @field-word-limit-font-size; - --van-field-word-limit-line-height: @field-word-limit-line-height; - --van-field-disabled-text-color: @field-disabled-text-color; - --van-field-required-mark-color: @field-required-mark-color; + --van-field-label-width: 6.2em; + --van-field-label-color: var(--van-gray-7); + --van-field-label-margin-right: var(--van-padding-sm); + --van-field-input-text-color: var(--van-text-color); + --van-field-input-error-text-color: var(--van-danger-color); + --van-field-input-disabled-text-color: var(--van-text-color-tertiary); + --van-field-placeholder-text-color: var(--van-text-color-tertiary); + --van-field-icon-size: 16px; + --van-field-clear-icon-size: 16px; + --van-field-clear-icon-color: var(--van-gray-5); + --van-field-right-icon-color: var(--van-gray-6); + --van-field-error-message-color: var(--van-danger-color); + --van-field-error-message-font-size: 12px; + --van-field-text-area-min-height: 60px; + --van-field-word-limit-color: var(--van-gray-7); + --van-field-word-limit-font-size: var(--van-font-size-sm); + --van-field-word-limit-line-height: 16px; + --van-field-disabled-text-color: var(--van-text-color-tertiary); + --van-field-required-mark-color: var(--van-red); } .van-field { diff --git a/packages/vant/src/field/var.less b/packages/vant/src/field/var.less deleted file mode 100644 index 13f581282..000000000 --- a/packages/vant/src/field/var.less +++ /dev/null @@ -1,21 +0,0 @@ -@import '../style/var.less'; - -@field-label-width: 6.2em; -@field-label-color: var(--van-gray-7); -@field-label-margin-right: var(--van-padding-sm); -@field-input-text-color: var(--van-text-color); -@field-input-error-text-color: var(--van-danger-color); -@field-input-disabled-text-color: var(--van-text-color-tertiary); -@field-placeholder-text-color: var(--van-text-color-tertiary); -@field-icon-size: 16px; -@field-clear-icon-size: 16px; -@field-clear-icon-color: var(--van-gray-5); -@field-right-icon-color: var(--van-gray-6); -@field-error-message-color: var(--van-danger-color); -@field-error-message-font-size: 12px; -@field-text-area-min-height: 60px; -@field-word-limit-color: var(--van-gray-7); -@field-word-limit-font-size: var(--van-font-size-sm); -@field-word-limit-line-height: 16px; -@field-disabled-text-color: var(--van-text-color-tertiary); -@field-required-mark-color: var(--van-red); diff --git a/packages/vant/src/grid-item/index.less b/packages/vant/src/grid-item/index.less index f90bc7150..a14593a7d 100644 --- a/packages/vant/src/grid-item/index.less +++ b/packages/vant/src/grid-item/index.less @@ -1,12 +1,10 @@ -@import './var.less'; - :root { - --van-grid-item-content-padding: @grid-item-content-padding; - --van-grid-item-content-background-color: @grid-item-content-background-color; - --van-grid-item-content-active-color: @grid-item-content-active-color; - --van-grid-item-icon-size: @grid-item-icon-size; - --van-grid-item-text-color: @grid-item-text-color; - --van-grid-item-text-font-size: @grid-item-text-font-size; + --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-active-color: var(--van-active-color); + --van-grid-item-icon-size: 28px; + --van-grid-item-text-color: var(--van-gray-7); + --van-grid-item-text-font-size: var(--van-font-size-sm); } .van-grid-item { diff --git a/packages/vant/src/grid-item/var.less b/packages/vant/src/grid-item/var.less deleted file mode 100644 index 9fcc77036..000000000 --- a/packages/vant/src/grid-item/var.less +++ /dev/null @@ -1,8 +0,0 @@ -@import '../style/var.less'; - -@grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs); -@grid-item-content-background-color: var(--van-background-color-light); -@grid-item-content-active-color: var(--van-active-color); -@grid-item-icon-size: 28px; -@grid-item-text-color: var(--van-gray-7); -@grid-item-text-font-size: var(--van-font-size-sm); diff --git a/packages/vant/src/image-preview/index.less b/packages/vant/src/image-preview/index.less index d91124545..71b4cfacd 100644 --- a/packages/vant/src/image-preview/index.less +++ b/packages/vant/src/image-preview/index.less @@ -1,15 +1,13 @@ -@import './var.less'; - :root { - --van-image-preview-index-text-color: @image-preview-index-text-color; - --van-image-preview-index-font-size: @image-preview-index-font-size; - --van-image-preview-index-line-height: @image-preview-index-line-height; - --van-image-preview-index-text-shadow: @image-preview-index-text-shadow; - --van-image-preview-overlay-background-color: @image-preview-overlay-background-color; - --van-image-preview-close-icon-size: @image-preview-close-icon-size; - --van-image-preview-close-icon-color: @image-preview-close-icon-color; - --van-image-preview-close-icon-margin: @image-preview-close-icon-margin; - --van-image-preview-close-icon-z-index: @image-preview-close-icon-z-index; + --van-image-preview-index-text-color: var(--van-white); + --van-image-preview-index-font-size: var(--van-font-size-md); + --van-image-preview-index-line-height: var(--van-line-height-md); + --van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8); + --van-image-preview-overlay-background-color: rgba(0, 0, 0, 0.9); + --van-image-preview-close-icon-size: 22px; + --van-image-preview-close-icon-color: var(--van-gray-5); + --van-image-preview-close-icon-margin: var(--van-padding-md); + --van-image-preview-close-icon-z-index: 1; } .van-image-preview { diff --git a/packages/vant/src/image-preview/var.less b/packages/vant/src/image-preview/var.less deleted file mode 100644 index 03434365c..000000000 --- a/packages/vant/src/image-preview/var.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../style/var.less'; - -@image-preview-index-text-color: var(--van-white); -@image-preview-index-font-size: var(--van-font-size-md); -@image-preview-index-line-height: var(--van-line-height-md); -@image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8); -@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9); -@image-preview-close-icon-size: 22px; -@image-preview-close-icon-color: var(--van-gray-5); -@image-preview-close-icon-margin: var(--van-padding-md); -@image-preview-close-icon-z-index: 1; diff --git a/packages/vant/src/image/index.less b/packages/vant/src/image/index.less index b0a41aaf2..29b6f9895 100644 --- a/packages/vant/src/image/index.less +++ b/packages/vant/src/image/index.less @@ -1,13 +1,11 @@ -@import './var.less'; - :root { - --van-image-placeholder-text-color: @image-placeholder-text-color; - --van-image-placeholder-font-size: @image-placeholder-font-size; - --van-image-placeholder-background-color: @image-placeholder-background-color; - --van-image-loading-icon-size: @image-loading-icon-size; - --van-image-loading-icon-color: @image-loading-icon-color; - --van-image-error-icon-size: @image-error-icon-size; - --van-image-error-icon-color: @image-error-icon-color; + --van-image-placeholder-text-color: var(--van-text-color-secondary); + --van-image-placeholder-font-size: var(--van-font-size-md); + --van-image-placeholder-background-color: var(--van-background-color); + --van-image-loading-icon-size: 32px; + --van-image-loading-icon-color: var(--van-gray-4); + --van-image-error-icon-size: 32px; + --van-image-error-icon-color: var(--van-gray-4); } .van-image { diff --git a/packages/vant/src/image/var.less b/packages/vant/src/image/var.less deleted file mode 100644 index 4a77c0ac8..000000000 --- a/packages/vant/src/image/var.less +++ /dev/null @@ -1,9 +0,0 @@ -@import '../style/var.less'; - -@image-placeholder-text-color: var(--van-text-color-secondary); -@image-placeholder-font-size: var(--van-font-size-md); -@image-placeholder-background-color: var(--van-background-color); -@image-loading-icon-size: 32px; -@image-loading-icon-color: var(--van-gray-4); -@image-error-icon-size: 32px; -@image-error-icon-color: var(--van-gray-4); diff --git a/packages/vant/src/index-anchor/index.less b/packages/vant/src/index-anchor/index.less index 9decdb254..ada176de8 100644 --- a/packages/vant/src/index-anchor/index.less +++ b/packages/vant/src/index-anchor/index.less @@ -1,15 +1,13 @@ -@import './var.less'; - :root { - --van-index-anchor-z-index: @index-anchor-z-index; - --van-index-anchor-padding: @index-anchor-padding; - --van-index-anchor-text-color: @index-anchor-text-color; - --van-index-anchor-font-weight: @index-anchor-font-weight; - --van-index-anchor-font-size: @index-anchor-font-size; - --van-index-anchor-line-height: @index-anchor-line-height; - --van-index-anchor-background-color: @index-anchor-background-color; - --van-index-anchor-sticky-text-color: @index-anchor-sticky-text-color; - --van-index-anchor-sticky-background-color: @index-anchor-sticky-background-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-anchor { diff --git a/packages/vant/src/index-anchor/var.less b/packages/vant/src/index-anchor/var.less deleted file mode 100644 index 78dea53d4..000000000 --- a/packages/vant/src/index-anchor/var.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../style/var.less'; - -@index-anchor-z-index: 1; -@index-anchor-padding: 0 var(--van-padding-md); -@index-anchor-text-color: var(--van-text-color); -@index-anchor-font-weight: var(--van-font-weight-bold); -@index-anchor-font-size: var(--van-font-size-md); -@index-anchor-line-height: 32px; -@index-anchor-background-color: transparent; -@index-anchor-sticky-text-color: var(--van-danger-color); -@index-anchor-sticky-background-color: var(--van-background-color-light); diff --git a/packages/vant/src/index-bar/index.less b/packages/vant/src/index-bar/index.less index ba7b17a0b..29ccda543 100644 --- a/packages/vant/src/index-bar/index.less +++ b/packages/vant/src/index-bar/index.less @@ -1,10 +1,8 @@ -@import './var.less'; - :root { - --van-index-bar-sidebar-z-index: @index-bar-sidebar-z-index; - --van-index-bar-index-font-size: @index-bar-index-font-size; - --van-index-bar-index-line-height: @index-bar-index-line-height; - --van-index-bar-index-active-color: @index-bar-index-active-color; + --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-bar { diff --git a/packages/vant/src/index-bar/var.less b/packages/vant/src/index-bar/var.less deleted file mode 100644 index f5fd76435..000000000 --- a/packages/vant/src/index-bar/var.less +++ /dev/null @@ -1,6 +0,0 @@ -@import '../style/var.less'; - -@index-bar-sidebar-z-index: 2; -@index-bar-index-font-size: var(--van-font-size-xs); -@index-bar-index-line-height: var(--van-line-height-xs); -@index-bar-index-active-color: var(--van-danger-color); diff --git a/packages/vant/src/list/index.less b/packages/vant/src/list/index.less index f9098cb32..ab6369426 100644 --- a/packages/vant/src/list/index.less +++ b/packages/vant/src/list/index.less @@ -1,10 +1,8 @@ -@import './var.less'; - :root { - --van-list-text-color: @list-text-color; - --van-list-text-font-size: @list-text-font-size; - --van-list-text-line-height: @list-text-line-height; - --van-list-loading-icon-size: @list-loading-icon-size; + --van-list-text-color: var(--van-text-color-secondary); + --van-list-text-font-size: var(--van-font-size-md); + --van-list-text-line-height: 50px; + --van-list-loading-icon-size: 16px; } .van-list { diff --git a/packages/vant/src/list/var.less b/packages/vant/src/list/var.less deleted file mode 100644 index c6a3c1819..000000000 --- a/packages/vant/src/list/var.less +++ /dev/null @@ -1,6 +0,0 @@ -@import '../style/var.less'; - -@list-text-color: var(--van-text-color-secondary); -@list-text-font-size: var(--van-font-size-md); -@list-text-line-height: 50px; -@list-loading-icon-size: 16px; diff --git a/packages/vant/src/loading/index.less b/packages/vant/src/loading/index.less index 98caaf764..07435b6f0 100644 --- a/packages/vant/src/loading/index.less +++ b/packages/vant/src/loading/index.less @@ -1,11 +1,9 @@ -@import './var.less'; - :root { - --van-loading-text-color: @loading-text-color; - --van-loading-text-font-size: @loading-text-font-size; - --van-loading-spinner-color: @loading-spinner-color; - --van-loading-spinner-size: @loading-spinner-size; - --van-loading-spinner-animation-duration: @loading-spinner-animation-duration; + --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 { diff --git a/packages/vant/src/loading/var.less b/packages/vant/src/loading/var.less deleted file mode 100644 index 98abf52f9..000000000 --- a/packages/vant/src/loading/var.less +++ /dev/null @@ -1,7 +0,0 @@ -@import '../style/var.less'; - -@loading-text-color: var(--van-text-color-secondary); -@loading-text-font-size: var(--van-font-size-md); -@loading-spinner-color: var(--van-gray-5); -@loading-spinner-size: 30px; -@loading-spinner-animation-duration: 0.8s; diff --git a/packages/vant/src/nav-bar/index.less b/packages/vant/src/nav-bar/index.less index 3a4e664fa..5699b3707 100644 --- a/packages/vant/src/nav-bar/index.less +++ b/packages/vant/src/nav-bar/index.less @@ -1,14 +1,12 @@ -@import './var.less'; - :root { - --van-nav-bar-height: @nav-bar-height; - --van-nav-bar-background-color: @nav-bar-background-color; - --van-nav-bar-arrow-size: @nav-bar-arrow-size; - --van-nav-bar-icon-color: @nav-bar-icon-color; - --van-nav-bar-text-color: @nav-bar-text-color; - --van-nav-bar-title-font-size: @nav-bar-title-font-size; - --van-nav-bar-title-text-color: @nav-bar-title-text-color; - --van-nav-bar-z-index: @nav-bar-z-index; + --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 { diff --git a/packages/vant/src/nav-bar/var.less b/packages/vant/src/nav-bar/var.less deleted file mode 100644 index 09bdcbd1d..000000000 --- a/packages/vant/src/nav-bar/var.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '../style/var.less'; - -@nav-bar-height: 46px; -@nav-bar-background-color: var(--van-background-color-light); -@nav-bar-arrow-size: 16px; -@nav-bar-icon-color: var(--van-primary-color); -@nav-bar-text-color: var(--van-primary-color); -@nav-bar-title-font-size: var(--van-font-size-lg); -@nav-bar-title-text-color: var(--van-text-color); -@nav-bar-z-index: 1; diff --git a/packages/vant/src/notice-bar/index.less b/packages/vant/src/notice-bar/index.less index 5c76770bf..a8011c3cd 100644 --- a/packages/vant/src/notice-bar/index.less +++ b/packages/vant/src/notice-bar/index.less @@ -1,15 +1,13 @@ -@import './var.less'; - :root { - --van-notice-bar-height: @notice-bar-height; - --van-notice-bar-padding: @notice-bar-padding; - --van-notice-bar-wrapable-padding: @notice-bar-wrapable-padding; - --van-notice-bar-text-color: @notice-bar-text-color; - --van-notice-bar-font-size: @notice-bar-font-size; - --van-notice-bar-line-height: @notice-bar-line-height; - --van-notice-bar-background-color: @notice-bar-background-color; - --van-notice-bar-icon-size: @notice-bar-icon-size; - --van-notice-bar-icon-min-width: @notice-bar-icon-min-width; + --van-notice-bar-height: 40px; + --van-notice-bar-padding: 0 var(--van-padding-md); + --van-notice-bar-wrapable-padding: var(--van-padding-xs) var(--van-padding-md); + --van-notice-bar-text-color: var(--van-orange-dark); + --van-notice-bar-font-size: var(--van-font-size-md); + --van-notice-bar-line-height: 24px; + --van-notice-bar-background-color: var(--van-orange-light); + --van-notice-bar-icon-size: 16px; + --van-notice-bar-icon-min-width: 24px; } .van-notice-bar { diff --git a/packages/vant/src/notice-bar/var.less b/packages/vant/src/notice-bar/var.less deleted file mode 100644 index 1a3896751..000000000 --- a/packages/vant/src/notice-bar/var.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../style/var.less'; - -@notice-bar-height: 40px; -@notice-bar-padding: 0 var(--van-padding-md); -@notice-bar-wrapable-padding: var(--van-padding-xs) var(--van-padding-md); -@notice-bar-text-color: var(--van-orange-dark); -@notice-bar-font-size: var(--van-font-size-md); -@notice-bar-line-height: 24px; -@notice-bar-background-color: var(--van-orange-light); -@notice-bar-icon-size: 16px; -@notice-bar-icon-min-width: 24px; diff --git a/packages/vant/src/notify/index.less b/packages/vant/src/notify/index.less index 3d781943c..d2f595fa6 100644 --- a/packages/vant/src/notify/index.less +++ b/packages/vant/src/notify/index.less @@ -1,14 +1,12 @@ -@import './var.less'; - :root { - --van-notify-text-color: @notify-text-color; - --van-notify-padding: @notify-padding; - --van-notify-font-size: @notify-font-size; - --van-notify-line-height: @notify-line-height; - --van-notify-primary-background-color: @notify-primary-background-color; - --van-notify-success-background-color: @notify-success-background-color; - --van-notify-danger-background-color: @notify-danger-background-color; - --van-notify-warning-background-color: @notify-warning-background-color; + --van-notify-text-color: var(--van-white); + --van-notify-padding: var(--van-padding-xs) var(--van-padding-md); + --van-notify-font-size: var(--van-font-size-md); + --van-notify-line-height: var(--van-line-height-md); + --van-notify-primary-background-color: var(--van-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 { diff --git a/packages/vant/src/notify/var.less b/packages/vant/src/notify/var.less deleted file mode 100644 index 87548e24b..000000000 --- a/packages/vant/src/notify/var.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '../style/var.less'; - -@notify-text-color: var(--van-white); -@notify-padding: var(--van-padding-xs) var(--van-padding-md); -@notify-font-size: var(--van-font-size-md); -@notify-line-height: var(--van-line-height-md); -@notify-primary-background-color: var(--van-primary-color); -@notify-success-background-color: var(--van-success-color); -@notify-danger-background-color: var(--van-danger-color); -@notify-warning-background-color: var(--van-warning-color); diff --git a/packages/vant/src/number-keyboard/index.less b/packages/vant/src/number-keyboard/index.less index b42d69e6f..1dca608a5 100644 --- a/packages/vant/src/number-keyboard/index.less +++ b/packages/vant/src/number-keyboard/index.less @@ -1,21 +1,19 @@ -@import './var.less'; - :root { - --van-number-keyboard-background-color: @number-keyboard-background-color; - --van-number-keyboard-key-height: @number-keyboard-key-height; - --van-number-keyboard-key-font-size: @number-keyboard-key-font-size; - --van-number-keyboard-key-active-color: @number-keyboard-key-active-color; - --van-number-keyboard-key-background-color: @number-keyboard-key-background-color; - --van-number-keyboard-delete-font-size: @number-keyboard-delete-font-size; - --van-number-keyboard-title-color: @number-keyboard-title-color; - --van-number-keyboard-title-height: @number-keyboard-title-height; - --van-number-keyboard-title-font-size: @number-keyboard-title-font-size; - --van-number-keyboard-close-padding: @number-keyboard-close-padding; - --van-number-keyboard-close-color: @number-keyboard-close-color; - --van-number-keyboard-close-font-size: @number-keyboard-close-font-size; - --van-number-keyboard-button-text-color: @number-keyboard-button-text-color; - --van-number-keyboard-button-background-color: @number-keyboard-button-background-color; - --van-number-keyboard-z-index: @number-keyboard-z-index; + --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-background-color-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-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 { diff --git a/packages/vant/src/number-keyboard/var.less b/packages/vant/src/number-keyboard/var.less deleted file mode 100644 index 398eff107..000000000 --- a/packages/vant/src/number-keyboard/var.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '../style/var.less'; - -@number-keyboard-background-color: var(--van-gray-2); -@number-keyboard-key-height: 48px; -@number-keyboard-key-font-size: 28px; -@number-keyboard-key-background-color: var(--van-background-color-light); -@number-keyboard-key-active-color: var(--van-gray-3); -@number-keyboard-delete-font-size: var(--van-font-size-lg); -@number-keyboard-title-color: var(--van-gray-7); -@number-keyboard-title-height: 34px; -@number-keyboard-title-font-size: var(--van-font-size-lg); -@number-keyboard-close-padding: 0 var(--van-padding-md); -@number-keyboard-close-color: var(--van-text-link-color); -@number-keyboard-close-font-size: var(--van-font-size-md); -@number-keyboard-button-text-color: var(--van-white); -@number-keyboard-button-background-color: var(--van-primary-color); -@number-keyboard-z-index: 100; diff --git a/packages/vant/src/overlay/index.less b/packages/vant/src/overlay/index.less index 3d5dccd42..1e9067b88 100644 --- a/packages/vant/src/overlay/index.less +++ b/packages/vant/src/overlay/index.less @@ -1,8 +1,6 @@ -@import './var.less'; - :root { - --van-overlay-z-index: @overlay-z-index; - --van-overlay-background-color: @overlay-background-color; + --van-overlay-z-index: 1; + --van-overlay-background-color: rgba(0, 0, 0, 0.7); } .van-overlay { diff --git a/packages/vant/src/overlay/var.less b/packages/vant/src/overlay/var.less deleted file mode 100644 index 25219409f..000000000 --- a/packages/vant/src/overlay/var.less +++ /dev/null @@ -1,4 +0,0 @@ -@import '../style/var.less'; - -@overlay-z-index: 1; -@overlay-background-color: rgba(0, 0, 0, 0.7); diff --git a/packages/vant/src/pagination/index.less b/packages/vant/src/pagination/index.less index 33f67be1c..65a0b3eaa 100644 --- a/packages/vant/src/pagination/index.less +++ b/packages/vant/src/pagination/index.less @@ -1,15 +1,13 @@ -@import './var.less'; - :root { - --van-pagination-height: @pagination-height; - --van-pagination-font-size: @pagination-font-size; - --van-pagination-item-width: @pagination-item-width; - --van-pagination-item-default-color: @pagination-item-default-color; - --van-pagination-item-disabled-color: @pagination-item-disabled-color; - --van-pagination-item-disabled-background-color: @pagination-item-disabled-background-color; - --van-pagination-background-color: @pagination-background-color; - --van-pagination-desc-color: @pagination-desc-color; - --van-pagination-disabled-opacity: @pagination-disabled-opacity; + --van-pagination-height: 40px; + --van-pagination-font-size: var(--van-font-size-md); + --van-pagination-item-width: 36px; + --van-pagination-item-default-color: var(--van-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-desc-color: var(--van-gray-7); + --van-pagination-disabled-opacity: var(--van-disabled-opacity); } .van-pagination { diff --git a/packages/vant/src/pagination/var.less b/packages/vant/src/pagination/var.less deleted file mode 100644 index 400fe8f64..000000000 --- a/packages/vant/src/pagination/var.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../style/var.less'; - -@pagination-height: 40px; -@pagination-font-size: var(--van-font-size-md); -@pagination-item-width: 36px; -@pagination-item-default-color: var(--van-primary-color); -@pagination-item-disabled-color: var(--van-gray-7); -@pagination-item-disabled-background-color: var(--van-background-color); -@pagination-background-color: var(--van-background-color-light); -@pagination-desc-color: var(--van-gray-7); -@pagination-disabled-opacity: var(--van-disabled-opacity); diff --git a/packages/vant/src/password-input/index.less b/packages/vant/src/password-input/index.less index 7ab0c1848..07779dae2 100644 --- a/packages/vant/src/password-input/index.less +++ b/packages/vant/src/password-input/index.less @@ -1,21 +1,19 @@ -@import './var.less'; - :root { - --van-password-input-height: @password-input-height; - --van-password-input-margin: @password-input-margin; - --van-password-input-font-size: @password-input-font-size; - --van-password-input-border-radius: @password-input-border-radius; - --van-password-input-background-color: @password-input-background-color; - --van-password-input-info-color: @password-input-info-color; - --van-password-input-info-font-size: @password-input-info-font-size; - --van-password-input-error-info-color: @password-input-error-info-color; - --van-password-input-dot-size: @password-input-dot-size; - --van-password-input-dot-color: @password-input-dot-color; - --van-password-input-text-color: @password-input-text-color; - --van-password-input-cursor-color: @password-input-cursor-color; - --van-password-input-cursor-width: @password-input-cursor-width; - --van-password-input-cursor-height: @password-input-cursor-height; - --van-password-input-cursor-animation-duration: @password-input-cursor-animation-duration; + --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-info-color: var(--van-text-color-secondary); + --van-password-input-info-font-size: var(--van-font-size-md); + --van-password-input-error-info-color: var(--van-danger-color); + --van-password-input-dot-size: 10px; + --van-password-input-dot-color: var(--van-text-color); + --van-password-input-text-color: var(--van-text-color); + --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 { diff --git a/packages/vant/src/password-input/var.less b/packages/vant/src/password-input/var.less deleted file mode 100644 index db0de6bb1..000000000 --- a/packages/vant/src/password-input/var.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '../style/var.less'; - -@password-input-height: 50px; -@password-input-margin: 0 var(--van-padding-md); -@password-input-font-size: 20px; -@password-input-border-radius: 6px; -@password-input-background-color: var(--van-background-color-light); -@password-input-info-color: var(--van-text-color-secondary); -@password-input-info-font-size: var(--van-font-size-md); -@password-input-error-info-color: var(--van-danger-color); -@password-input-dot-size: 10px; -@password-input-dot-color: var(--van-text-color); -@password-input-text-color: var(--van-text-color); -@password-input-cursor-color: var(--van-text-color); -@password-input-cursor-width: 1px; -@password-input-cursor-height: 40%; -@password-input-cursor-animation-duration: 1s; diff --git a/packages/vant/src/picker/index.less b/packages/vant/src/picker/index.less index 7ac7fcfd1..0c8113a68 100644 --- a/packages/vant/src/picker/index.less +++ b/packages/vant/src/picker/index.less @@ -1,21 +1,24 @@ -@import './var.less'; - :root { - --van-picker-background-color: @picker-background-color; - --van-picker-toolbar-height: @picker-toolbar-height; - --van-picker-title-font-size: @picker-title-font-size; - --van-picker-title-line-height: @picker-title-line-height; - --van-picker-action-padding: @picker-action-padding; - --van-picker-action-font-size: @picker-action-font-size; - --van-picker-confirm-action-color: @picker-confirm-action-color; - --van-picker-cancel-action-color: @picker-cancel-action-color; - --van-picker-option-font-size: @picker-option-font-size; - --van-picker-option-padding: @picker-option-padding; - --van-picker-option-text-color: @picker-option-text-color; - --van-picker-option-disabled-opacity: @picker-option-disabled-opacity; - --van-picker-loading-icon-color: @picker-loading-icon-color; - --van-picker-loading-mask-color: @picker-loading-mask-color; - --van-picker-mask-color: @picker-mask-color; + --van-picker-background-color: var(--van-background-color-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-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); + --van-picker-option-text-color: var(--van-text-color); + --van-picker-option-disabled-opacity: 0.3; + --van-picker-loading-icon-color: var(--van-primary-color); + --van-picker-loading-mask-color: rgba(255, 255, 255, 0.9); + --van-picker-mask-color: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.9), + rgba(255, 255, 255, 0.4) + ), + linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)); } .van-picker { diff --git a/packages/vant/src/picker/var.less b/packages/vant/src/picker/var.less deleted file mode 100644 index ccbb10e08..000000000 --- a/packages/vant/src/picker/var.less +++ /dev/null @@ -1,22 +0,0 @@ -@import '../style/var.less'; - -@picker-background-color: var(--van-background-color-light); -@picker-toolbar-height: 44px; -@picker-title-font-size: var(--van-font-size-lg); -@picker-title-line-height: var(--van-line-height-md); -@picker-action-padding: 0 var(--van-padding-md); -@picker-action-font-size: var(--van-font-size-md); -@picker-confirm-action-color: var(--van-text-link-color); -@picker-cancel-action-color: var(--van-text-color-secondary); -@picker-option-padding: 0 var(--van-padding-base); -@picker-option-font-size: var(--van-font-size-lg); -@picker-option-text-color: var(--van-text-color); -@picker-option-disabled-opacity: 0.3; -@picker-mask-color: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.9), - rgba(255, 255, 255, 0.4) - ), - linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)); -@picker-loading-icon-color: var(--van-primary-color); -@picker-loading-mask-color: rgba(255, 255, 255, 0.9); diff --git a/packages/vant/src/popover/index.less b/packages/vant/src/popover/index.less index 1648e0eed..8334a5688 100644 --- a/packages/vant/src/popover/index.less +++ b/packages/vant/src/popover/index.less @@ -1,19 +1,21 @@ -@import './var.less'; - :root { - --van-popover-arrow-size: @popover-arrow-size; - --van-popover-border-radius: @popover-border-radius; - --van-popover-action-width: @popover-action-width; - --van-popover-action-height: @popover-action-height; - --van-popover-action-font-size: @popover-action-font-size; - --van-popover-action-line-height: @popover-action-line-height; - --van-popover-action-icon-size: @popover-action-icon-size; - --van-popover-light-text-color: @popover-light-text-color; - --van-popover-light-background-color: @popover-light-background-color; - --van-popover-light-action-disabled-text-color: @popover-light-action-disabled-text-color; - --van-popover-dark-text-color: @popover-dark-text-color; - --van-popover-dark-background-color: @popover-dark-background-color; - --van-popover-dark-action-disabled-text-color: @popover-dark-action-disabled-text-color; + --van-popover-arrow-size: 6px; + --van-popover-border-radius: var(--van-border-radius-lg); + --van-popover-action-width: 128px; + --van-popover-action-height: 44px; + --van-popover-action-font-size: var(--van-font-size-md); + --van-popover-action-line-height: var(--van-line-height-md); + --van-popover-action-icon-size: 20px; + --van-popover-light-text-color: var(--van-text-color); + --van-popover-light-background-color: var(--van-background-color-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-action-disabled-text-color: var( + --van-text-color-secondary + ); } .van-popover { diff --git a/packages/vant/src/popover/var.less b/packages/vant/src/popover/var.less deleted file mode 100644 index 8b45280a1..000000000 --- a/packages/vant/src/popover/var.less +++ /dev/null @@ -1,15 +0,0 @@ -@import '../style/var.less'; - -@popover-arrow-size: 6px; -@popover-border-radius: var(--van-border-radius-lg); -@popover-action-width: 128px; -@popover-action-height: 44px; -@popover-action-font-size: var(--van-font-size-md); -@popover-action-line-height: var(--van-line-height-md); -@popover-action-icon-size: 20px; -@popover-light-text-color: var(--van-text-color); -@popover-light-background-color: var(--van-background-color-light); -@popover-light-action-disabled-text-color: var(--van-text-color-tertiary); -@popover-dark-text-color: var(--van-white); -@popover-dark-background-color: #4a4a4a; -@popover-dark-action-disabled-text-color: var(--van-text-color-secondary); diff --git a/packages/vant/src/popup/index.less b/packages/vant/src/popup/index.less index d5cfabec0..c70250300 100644 --- a/packages/vant/src/popup/index.less +++ b/packages/vant/src/popup/index.less @@ -1,13 +1,11 @@ -@import './var.less'; - :root { - --van-popup-background-color: @popup-background-color; - --van-popup-transition: @popup-transition; - --van-popup-round-border-radius: @popup-round-border-radius; - --van-popup-close-icon-size: @popup-close-icon-size; - --van-popup-close-icon-color: @popup-close-icon-color; - --van-popup-close-icon-margin: @popup-close-icon-margin; - --van-popup-close-icon-z-index: @popup-close-icon-z-index; + --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 { diff --git a/packages/vant/src/popup/var.less b/packages/vant/src/popup/var.less deleted file mode 100644 index 662bab2f0..000000000 --- a/packages/vant/src/popup/var.less +++ /dev/null @@ -1,9 +0,0 @@ -@import '../style/var.less'; - -@popup-background-color: var(--van-background-color-light); -@popup-transition: transform var(--van-animation-duration-base); -@popup-round-border-radius: 16px; -@popup-close-icon-size: 22px; -@popup-close-icon-color: var(--van-gray-5); -@popup-close-icon-margin: 16px; -@popup-close-icon-z-index: 1; diff --git a/packages/vant/src/progress/index.less b/packages/vant/src/progress/index.less index c42e556bf..bbb6e5a30 100644 --- a/packages/vant/src/progress/index.less +++ b/packages/vant/src/progress/index.less @@ -1,15 +1,13 @@ -@import './var.less'; - :root { - --van-progress-height: @progress-height; - --van-progress-color: @progress-color; - --van-progress-inactive-color: @progress-inactive-color; - --van-progress-background-color: @progress-background-color; - --van-progress-pivot-padding: @progress-pivot-padding; - --van-progress-pivot-text-color: @progress-pivot-text-color; - --van-progress-pivot-font-size: @progress-pivot-font-size; - --van-progress-pivot-line-height: @progress-pivot-line-height; - --van-progress-pivot-background-color: @progress-pivot-background-color; + --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 { diff --git a/packages/vant/src/progress/var.less b/packages/vant/src/progress/var.less deleted file mode 100644 index b36bf94d2..000000000 --- a/packages/vant/src/progress/var.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../style/var.less'; - -@progress-height: 4px; -@progress-color: var(--van-primary-color); -@progress-inactive-color: var(--van-gray-5); -@progress-background-color: var(--van-gray-3); -@progress-pivot-padding: 0 5px; -@progress-pivot-text-color: var(--van-white); -@progress-pivot-font-size: var(--van-font-size-xs); -@progress-pivot-line-height: 1.6; -@progress-pivot-background-color: var(--van-primary-color); diff --git a/packages/vant/src/pull-refresh/index.less b/packages/vant/src/pull-refresh/index.less index 5fb5bf87c..aa5e3dd4d 100644 --- a/packages/vant/src/pull-refresh/index.less +++ b/packages/vant/src/pull-refresh/index.less @@ -1,10 +1,8 @@ -@import './var.less'; - :root { - --van-pull-refresh-head-height: @pull-refresh-head-height; - --van-pull-refresh-head-font-size: @pull-refresh-head-font-size; - --van-pull-refresh-head-text-color: @pull-refresh-head-text-color; - --van-pull-refresh-loading-icon-size: @pull-refresh-loading-icon-size; + --van-pull-refresh-head-height: 50px; + --van-pull-refresh-head-font-size: var(--van-font-size-md); + --van-pull-refresh-head-text-color: var(--van-text-color-secondary); + --van-pull-refresh-loading-icon-size: 16px; } .van-pull-refresh { diff --git a/packages/vant/src/pull-refresh/var.less b/packages/vant/src/pull-refresh/var.less deleted file mode 100644 index a74204beb..000000000 --- a/packages/vant/src/pull-refresh/var.less +++ /dev/null @@ -1,6 +0,0 @@ -@import '../style/var.less'; - -@pull-refresh-head-height: 50px; -@pull-refresh-head-font-size: var(--van-font-size-md); -@pull-refresh-head-text-color: var(--van-text-color-secondary); -@pull-refresh-loading-icon-size: 16px; diff --git a/packages/vant/src/radio/index.less b/packages/vant/src/radio/index.less index 65be3bc34..53d56ff5d 100644 --- a/packages/vant/src/radio/index.less +++ b/packages/vant/src/radio/index.less @@ -1,15 +1,13 @@ -@import './var.less'; - :root { - --van-radio-size: @radio-size; - --van-radio-border-color: @radio-border-color; - --van-radio-transition-duration: @radio-transition-duration; - --van-radio-label-margin: @radio-label-margin; - --van-radio-label-color: @radio-label-color; - --van-radio-checked-icon-color: @radio-checked-icon-color; - --van-radio-disabled-icon-color: @radio-disabled-icon-color; - --van-radio-disabled-label-color: @radio-disabled-label-color; - --van-radio-disabled-background-color: @radio-disabled-background-color; + --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 { diff --git a/packages/vant/src/radio/var.less b/packages/vant/src/radio/var.less deleted file mode 100644 index 9a50c59aa..000000000 --- a/packages/vant/src/radio/var.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../style/var.less'; - -@radio-size: 20px; -@radio-border-color: var(--van-gray-5); -@radio-transition-duration: var(--van-animation-duration-fast); -@radio-label-margin: var(--van-padding-xs); -@radio-label-color: var(--van-text-color); -@radio-checked-icon-color: var(--van-primary-color); -@radio-disabled-icon-color: var(--van-gray-5); -@radio-disabled-label-color: var(--van-text-color-tertiary); -@radio-disabled-background-color: var(--van-border-color); diff --git a/packages/vant/src/rate/index.less b/packages/vant/src/rate/index.less index e1f34cd41..a576c28f4 100644 --- a/packages/vant/src/rate/index.less +++ b/packages/vant/src/rate/index.less @@ -1,11 +1,9 @@ -@import './var.less'; - :root { - --van-rate-icon-size: @rate-icon-size; - --van-rate-icon-gutter: @rate-icon-gutter; - --van-rate-icon-void-color: @rate-icon-void-color; - --van-rate-icon-full-color: @rate-icon-full-color; - --van-rate-icon-disabled-color: @rate-icon-disabled-color; + --van-rate-icon-size: 20px; + --van-rate-icon-gutter: var(--van-padding-base); + --van-rate-icon-void-color: var(--van-gray-5); + --van-rate-icon-full-color: var(--van-danger-color); + --van-rate-icon-disabled-color: var(--van-gray-5); } .van-rate { diff --git a/packages/vant/src/rate/var.less b/packages/vant/src/rate/var.less deleted file mode 100644 index 87240021b..000000000 --- a/packages/vant/src/rate/var.less +++ /dev/null @@ -1,7 +0,0 @@ -@import '../style/var.less'; - -@rate-icon-size: 20px; -@rate-icon-gutter: var(--van-padding-base); -@rate-icon-void-color: var(--van-gray-5); -@rate-icon-full-color: var(--van-danger-color); -@rate-icon-disabled-color: var(--van-gray-5); diff --git a/packages/vant/src/search/index.less b/packages/vant/src/search/index.less index c5189185c..7e19ed14d 100644 --- a/packages/vant/src/search/index.less +++ b/packages/vant/src/search/index.less @@ -1,17 +1,15 @@ -@import './var.less'; - :root { - --van-search-padding: @search-padding; - --van-search-background-color: @search-background-color; - --van-search-content-background-color: @search-content-background-color; - --van-search-input-height: @search-input-height; - --van-search-label-padding: @search-label-padding; - --van-search-label-color: @search-label-color; - --van-search-label-font-size: @search-label-font-size; - --van-search-left-icon-color: @search-left-icon-color; - --van-search-action-padding: @search-action-padding; - --van-search-action-text-color: @search-action-text-color; - --van-search-action-font-size: @search-action-font-size; + --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 { diff --git a/packages/vant/src/search/var.less b/packages/vant/src/search/var.less deleted file mode 100644 index dc90e962f..000000000 --- a/packages/vant/src/search/var.less +++ /dev/null @@ -1,13 +0,0 @@ -@import '../style/var.less'; - -@search-padding: 10px var(--van-padding-sm); -@search-background-color: var(--van-background-color-light); -@search-content-background-color: var(--van-gray-1); -@search-input-height: 34px; -@search-label-padding: 0 5px; -@search-label-color: var(--van-text-color); -@search-label-font-size: var(--van-font-size-md); -@search-left-icon-color: var(--van-gray-6); -@search-action-padding: 0 var(--van-padding-xs); -@search-action-text-color: var(--van-text-color); -@search-action-font-size: var(--van-font-size-md); diff --git a/packages/vant/src/share-sheet/index.less b/packages/vant/src/share-sheet/index.less index 26b45088d..94a85c45d 100644 --- a/packages/vant/src/share-sheet/index.less +++ b/packages/vant/src/share-sheet/index.less @@ -1,22 +1,21 @@ -@import './var.less'; @import '../style/mixins/hairline'; :root { - --van-share-sheet-header-padding: @share-sheet-header-padding; - --van-share-sheet-title-color: @share-sheet-title-color; - --van-share-sheet-title-font-size: @share-sheet-title-font-size; - --van-share-sheet-title-line-height: @share-sheet-title-line-height; - --van-share-sheet-description-color: @share-sheet-description-color; - --van-share-sheet-description-font-size: @share-sheet-description-font-size; - --van-share-sheet-description-line-height: @share-sheet-description-line-height; - --van-share-sheet-icon-size: @share-sheet-icon-size; - --van-share-sheet-option-name-color: @share-sheet-option-name-color; - --van-share-sheet-option-name-font-size: @share-sheet-option-name-font-size; - --van-share-sheet-option-description-color: @share-sheet-option-description-color; - --van-share-sheet-option-description-font-size: @share-sheet-option-description-font-size; - --van-share-sheet-cancel-button-font-size: @share-sheet-cancel-button-font-size; - --van-share-sheet-cancel-button-height: @share-sheet-cancel-button-height; - --van-share-sheet-cancel-button-background: @share-sheet-cancel-button-background; + --van-share-sheet-header-padding: var(--van-padding-sm) var(--van-padding-md); + --van-share-sheet-title-color: var(--van-text-color); + --van-share-sheet-title-font-size: var(--van-font-size-md); + --van-share-sheet-title-line-height: var(--van-line-height-md); + --van-share-sheet-description-color: var(--van-text-color-secondary); + --van-share-sheet-description-font-size: var(--van-font-size-sm); + --van-share-sheet-description-line-height: 16px; + --van-share-sheet-icon-size: 48px; + --van-share-sheet-option-name-color: var(--van-gray-7); + --van-share-sheet-option-name-font-size: var(--van-font-size-sm); + --van-share-sheet-option-description-color: var(--van-text-color-tertiary); + --van-share-sheet-option-description-font-size: var(--van-font-size-sm); + --van-share-sheet-cancel-button-font-size: var(--van-font-size-lg); + --van-share-sheet-cancel-button-height: 48px; + --van-share-sheet-cancel-button-background: var(--van-background-color-light); } .van-share-sheet { diff --git a/packages/vant/src/share-sheet/var.less b/packages/vant/src/share-sheet/var.less deleted file mode 100644 index d5750e246..000000000 --- a/packages/vant/src/share-sheet/var.less +++ /dev/null @@ -1,18 +0,0 @@ -@import '../style/var.less'; - -@share-sheet-header-padding: var(--van-padding-sm) var(--van-padding-md) - var(--van-padding-base); -@share-sheet-title-color: var(--van-text-color); -@share-sheet-title-font-size: var(--van-font-size-md); -@share-sheet-title-line-height: var(--van-line-height-md); -@share-sheet-description-color: var(--van-text-color-secondary); -@share-sheet-description-font-size: var(--van-font-size-sm); -@share-sheet-description-line-height: 16px; -@share-sheet-icon-size: 48px; -@share-sheet-option-name-color: var(--van-gray-7); -@share-sheet-option-name-font-size: var(--van-font-size-sm); -@share-sheet-option-description-color: var(--van-text-color-tertiary); -@share-sheet-option-description-font-size: var(--van-font-size-sm); -@share-sheet-cancel-button-font-size: var(--van-font-size-lg); -@share-sheet-cancel-button-height: 48px; -@share-sheet-cancel-button-background: var(--van-background-color-light); diff --git a/packages/vant/src/sidebar-item/index.less b/packages/vant/src/sidebar-item/index.less index de6cd6fc4..d68314a15 100644 --- a/packages/vant/src/sidebar-item/index.less +++ b/packages/vant/src/sidebar-item/index.less @@ -1,19 +1,17 @@ -@import './var.less'; - :root { - --van-sidebar-font-size: @sidebar-font-size; - --van-sidebar-line-height: @sidebar-line-height; - --van-sidebar-text-color: @sidebar-text-color; - --van-sidebar-disabled-text-color: @sidebar-disabled-text-color; - --van-sidebar-padding: @sidebar-padding; - --van-sidebar-active-color: @sidebar-active-color; - --van-sidebar-background-color: @sidebar-background-color; - --van-sidebar-selected-font-weight: @sidebar-selected-font-weight; - --van-sidebar-selected-text-color: @sidebar-selected-text-color; - --van-sidebar-selected-border-width: @sidebar-selected-border-width; - --van-sidebar-selected-border-height: @sidebar-selected-border-height; - --van-sidebar-selected-border-color: @sidebar-selected-border-color; - --van-sidebar-selected-background-color: @sidebar-selected-background-color; + --van-sidebar-font-size: var(--van-font-size-md); + --van-sidebar-line-height: var(--van-line-height-md); + --van-sidebar-text-color: var(--van-text-color); + --van-sidebar-disabled-text-color: var(--van-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-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-item { diff --git a/packages/vant/src/sidebar-item/var.less b/packages/vant/src/sidebar-item/var.less deleted file mode 100644 index 4dd4ae69d..000000000 --- a/packages/vant/src/sidebar-item/var.less +++ /dev/null @@ -1,15 +0,0 @@ -@import '../style/var.less'; - -@sidebar-font-size: var(--van-font-size-md); -@sidebar-line-height: var(--van-line-height-md); -@sidebar-text-color: var(--van-text-color); -@sidebar-disabled-text-color: var(--van-text-color-tertiary); -@sidebar-padding: 20px var(--van-padding-sm); -@sidebar-active-color: var(--van-active-color); -@sidebar-background-color: var(--van-background-color); -@sidebar-selected-font-weight: var(--van-font-weight-bold); -@sidebar-selected-text-color: var(--van-text-color); -@sidebar-selected-border-width: 4px; -@sidebar-selected-border-height: 16px; -@sidebar-selected-border-color: var(--van-danger-color); -@sidebar-selected-background-color: var(--van-background-color-light); diff --git a/packages/vant/src/sidebar/index.less b/packages/vant/src/sidebar/index.less index bda780593..faa02e900 100644 --- a/packages/vant/src/sidebar/index.less +++ b/packages/vant/src/sidebar/index.less @@ -1,7 +1,5 @@ -@import './var.less'; - :root { - --van-sidebar-width: @sidebar-width; + --van-sidebar-width: 80px; } .van-sidebar { diff --git a/packages/vant/src/sidebar/var.less b/packages/vant/src/sidebar/var.less deleted file mode 100644 index 773f0a7b7..000000000 --- a/packages/vant/src/sidebar/var.less +++ /dev/null @@ -1,3 +0,0 @@ -@import '../style/var.less'; - -@sidebar-width: 80px; diff --git a/packages/vant/src/skeleton/index.less b/packages/vant/src/skeleton/index.less index 39d0edcb4..87036e46e 100644 --- a/packages/vant/src/skeleton/index.less +++ b/packages/vant/src/skeleton/index.less @@ -1,13 +1,11 @@ -@import './var.less'; - :root { - --van-skeleton-row-height: @skeleton-row-height; - --van-skeleton-row-background-color: @skeleton-row-background-color; - --van-skeleton-row-margin-top: @skeleton-row-margin-top; - --van-skeleton-title-width: @skeleton-title-width; - --van-skeleton-avatar-size: @skeleton-avatar-size; - --van-skeleton-avatar-background-color: @skeleton-avatar-background-color; - --van-skeleton-animation-duration: @skeleton-animation-duration; + --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 { diff --git a/packages/vant/src/skeleton/var.less b/packages/vant/src/skeleton/var.less deleted file mode 100644 index 0de3b5093..000000000 --- a/packages/vant/src/skeleton/var.less +++ /dev/null @@ -1,9 +0,0 @@ -@import '../style/var.less'; - -@skeleton-row-height: 16px; -@skeleton-row-background-color: var(--van-active-color); -@skeleton-row-margin-top: var(--van-padding-sm); -@skeleton-title-width: 40%; -@skeleton-avatar-size: 32px; -@skeleton-avatar-background-color: var(--van-active-color); -@skeleton-animation-duration: 1.2s; diff --git a/packages/vant/src/slider/index.less b/packages/vant/src/slider/index.less index dbf85253c..5983ef92e 100644 --- a/packages/vant/src/slider/index.less +++ b/packages/vant/src/slider/index.less @@ -1,15 +1,13 @@ -@import './var.less'; - :root { - --van-slider-active-background-color: @slider-active-background-color; - --van-slider-inactive-background-color: @slider-inactive-background-color; - --van-slider-disabled-opacity: @slider-disabled-opacity; - --van-slider-bar-height: @slider-bar-height; - --van-slider-button-width: @slider-button-width; - --van-slider-button-height: @slider-button-height; - --van-slider-button-border-radius: @slider-button-border-radius; - --van-slider-button-background-color: @slider-button-background-color; - --van-slider-button-box-shadow: @slider-button-box-shadow; + --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 { diff --git a/packages/vant/src/slider/var.less b/packages/vant/src/slider/var.less deleted file mode 100644 index 5906e1929..000000000 --- a/packages/vant/src/slider/var.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../style/var.less'; - -@slider-active-background-color: var(--van-primary-color); -@slider-inactive-background-color: var(--van-gray-3); -@slider-disabled-opacity: var(--van-disabled-opacity); -@slider-bar-height: 2px; -@slider-button-width: 24px; -@slider-button-height: 24px; -@slider-button-border-radius: 50%; -@slider-button-background-color: var(--van-white); -@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); diff --git a/packages/vant/src/step/index.less b/packages/vant/src/step/index.less index 6579be5c3..5a60150c7 100644 --- a/packages/vant/src/step/index.less +++ b/packages/vant/src/step/index.less @@ -1,17 +1,15 @@ -@import './var.less'; - :root { - --van-step-text-color: @step-text-color; - --van-step-active-color: @step-active-color; - --van-step-process-text-color: @step-process-text-color; - --van-step-font-size: @step-font-size; - --van-step-line-color: @step-line-color; - --van-step-finish-line-color: @step-finish-line-color; - --van-step-finish-text-color: @step-finish-text-color; - --van-step-icon-size: @step-icon-size; - --van-step-circle-size: @step-circle-size; - --van-step-circle-color: @step-circle-color; - --van-step-horizontal-title-font-size: @step-horizontal-title-font-size; + --van-step-text-color: var(--van-text-color-secondary); + --van-step-active-color: var(--van-success-color); + --van-step-process-text-color: var(--van-text-color); + --van-step-font-size: var(--van-font-size-md); + --van-step-line-color: var(--van-border-color); + --van-step-finish-line-color: var(--van-success-color); + --van-step-finish-text-color: var(--van-text-color); + --van-step-icon-size: 12px; + --van-step-circle-size: 5px; + --van-step-circle-color: var(--van-gray-6); + --van-step-horizontal-title-font-size: var(--van-font-size-sm); } .van-step { diff --git a/packages/vant/src/step/var.less b/packages/vant/src/step/var.less deleted file mode 100644 index 2f7b55c18..000000000 --- a/packages/vant/src/step/var.less +++ /dev/null @@ -1,13 +0,0 @@ -@import '../style/var.less'; - -@step-text-color: var(--van-text-color-secondary); -@step-active-color: var(--van-success-color); -@step-process-text-color: var(--van-text-color); -@step-font-size: var(--van-font-size-md); -@step-line-color: var(--van-border-color); -@step-finish-line-color: var(--van-success-color); -@step-finish-text-color: var(--van-text-color); -@step-icon-size: 12px; -@step-circle-size: 5px; -@step-circle-color: var(--van-gray-6); -@step-horizontal-title-font-size: var(--van-font-size-sm); diff --git a/packages/vant/src/stepper/index.less b/packages/vant/src/stepper/index.less index 627a6afac..bd5cb924f 100644 --- a/packages/vant/src/stepper/index.less +++ b/packages/vant/src/stepper/index.less @@ -1,19 +1,17 @@ -@import './var.less'; - :root { - --van-stepper-background-color: @stepper-background-color; - --van-stepper-button-icon-color: @stepper-button-icon-color; - --van-stepper-button-disabled-color: @stepper-button-disabled-color; - --van-stepper-button-disabled-icon-color: @stepper-button-disabled-icon-color; - --van-stepper-button-round-theme-color: @stepper-button-round-theme-color; - --van-stepper-input-width: @stepper-input-width; - --van-stepper-input-height: @stepper-input-height; - --van-stepper-input-font-size: @stepper-input-font-size; - --van-stepper-input-line-height: @stepper-input-line-height; - --van-stepper-input-text-color: @stepper-input-text-color; - --van-stepper-input-disabled-text-color: @stepper-input-disabled-text-color; - --van-stepper-input-disabled-background-color: @stepper-input-disabled-background-color; - --van-stepper-border-radius: @stepper-border-radius; + --van-stepper-background-color: var(--van-active-color); + --van-stepper-button-icon-color: var(--van-text-color); + --van-stepper-button-disabled-color: var(--van-background-color); + --van-stepper-button-disabled-icon-color: var(--van-gray-5); + --van-stepper-button-round-theme-color: var(--van-danger-color); + --van-stepper-input-width: 32px; + --van-stepper-input-height: 28px; + --van-stepper-input-font-size: var(--van-font-size-md); + --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 { diff --git a/packages/vant/src/stepper/var.less b/packages/vant/src/stepper/var.less deleted file mode 100644 index 8024fa257..000000000 --- a/packages/vant/src/stepper/var.less +++ /dev/null @@ -1,15 +0,0 @@ -@import '../style/var.less'; - -@stepper-background-color: var(--van-active-color); -@stepper-button-icon-color: var(--van-text-color); -@stepper-button-disabled-color: var(--van-background-color); -@stepper-button-disabled-icon-color: var(--van-gray-5); -@stepper-button-round-theme-color: var(--van-danger-color); -@stepper-input-width: 32px; -@stepper-input-height: 28px; -@stepper-input-font-size: var(--van-font-size-md); -@stepper-input-line-height: normal; -@stepper-input-text-color: var(--van-text-color); -@stepper-input-disabled-text-color: var(--van-text-color-tertiary); -@stepper-input-disabled-background-color: var(--van-active-color); -@stepper-border-radius: var(--van-border-radius-md); diff --git a/packages/vant/src/steps/index.less b/packages/vant/src/steps/index.less index 96ff6907b..5cd4624a5 100644 --- a/packages/vant/src/steps/index.less +++ b/packages/vant/src/steps/index.less @@ -1,7 +1,5 @@ -@import './var.less'; - :root { - --van-steps-background-color: @steps-background-color; + --van-steps-background-color: var(--van-background-color-light); } .van-steps { diff --git a/packages/vant/src/steps/var.less b/packages/vant/src/steps/var.less deleted file mode 100644 index b882923ce..000000000 --- a/packages/vant/src/steps/var.less +++ /dev/null @@ -1,3 +0,0 @@ -@import '../style/var.less'; - -@steps-background-color: var(--van-background-color-light); diff --git a/packages/vant/src/sticky/index.less b/packages/vant/src/sticky/index.less index 5dbf6e8d2..4a0e8f727 100644 --- a/packages/vant/src/sticky/index.less +++ b/packages/vant/src/sticky/index.less @@ -1,7 +1,5 @@ -@import './var.less'; - :root { - --van-sticky-z-index: @sticky-z-index; + --van-sticky-z-index: 99; } .van-sticky { diff --git a/packages/vant/src/sticky/var.less b/packages/vant/src/sticky/var.less deleted file mode 100644 index 6ce7a2a5f..000000000 --- a/packages/vant/src/sticky/var.less +++ /dev/null @@ -1,3 +0,0 @@ -@import '../style/var.less'; - -@sticky-z-index: 99; diff --git a/packages/vant/src/style/animation.less b/packages/vant/src/style/animation.less index 0147d982a..4698e5cb5 100644 --- a/packages/vant/src/style/animation.less +++ b/packages/vant/src/style/animation.less @@ -1,5 +1,3 @@ -@import './var'; - @keyframes van-slide-up-enter { from { transform: translate3d(0, 100%, 0); diff --git a/packages/vant/src/style/base.less b/packages/vant/src/style/base.less index 3fd06565f..43c4f5537 100644 --- a/packages/vant/src/style/base.less +++ b/packages/vant/src/style/base.less @@ -2,7 +2,6 @@ * Entry of basic styles */ -@import './var.less'; @import './css-variables.less'; @import './normalize.less'; @import './animation.less'; @@ -53,29 +52,29 @@ } &--top::after { - border-top-width: @border-width-base; + border-top-width: var(--van-border-width-base); } &--left::after { - border-left-width: @border-width-base; + border-left-width: var(--van-border-width-base); } &--right::after { - border-right-width: @border-width-base; + border-right-width: var(--van-border-width-base); } &--bottom::after { - border-bottom-width: @border-width-base; + border-bottom-width: var(--van-border-width-base); } &, &-unset { &--top-bottom::after { - border-width: @border-width-base 0; + border-width: var(--van-border-width-base) 0; } } &--surround::after { - border-width: @border-width-base; + border-width: var(--van-border-width-base); } } diff --git a/packages/vant/src/style/css-variables.less b/packages/vant/src/style/css-variables.less index 96495f3f1..1c8026d5c 100644 --- a/packages/vant/src/style/css-variables.less +++ b/packages/vant/src/style/css-variables.less @@ -1,75 +1,74 @@ -@import './var.less'; - :root { // Color Palette - --van-black: @black; - --van-white: @white; - --van-gray-1: @gray-1; - --van-gray-2: @gray-2; - --van-gray-3: @gray-3; - --van-gray-4: @gray-4; - --van-gray-5: @gray-5; - --van-gray-6: @gray-6; - --van-gray-7: @gray-7; - --van-gray-8: @gray-8; - --van-red: @red; - --van-blue: @blue; - --van-orange: @orange; - --van-orange-dark: @orange-dark; - --van-orange-light: @orange-light; - --van-green: @green; + --van-black: #000; + --van-white: #fff; + --van-gray-1: #f7f8fa; + --van-gray-2: #f2f3f5; + --van-gray-3: #ebedf0; + --van-gray-4: #dcdee0; + --van-gray-5: #c8c9cc; + --van-gray-6: #969799; + --van-gray-7: #646566; + --van-gray-8: #323233; + --van-red: #ee0a24; + --van-blue: #1989fa; + --van-orange: #ff976a; + --van-orange-dark: #ed6a0c; + --van-orange-light: #fffbe8; + --van-green: #07c160; // Gradient Colors - --van-gradient-red: @gradient-red; - --van-gradient-orange: @gradient-orange; + --van-gradient-red: linear-gradient(to right, #ff6034, #ee0a24); + --van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917); // Component Colors - --van-primary-color: @primary-color; - --van-success-color: @success-color; - --van-danger-color: @danger-color; - --van-warning-color: @warning-color; - --van-text-color: @text-color; - --van-text-color-secondary: @text-color-secondary; - --van-text-color-tertiary: @text-color-tertiary; - --van-text-link-color: @text-link-color; - --van-active-color: @active-color; - --van-active-opacity: @active-opacity; - --van-disabled-opacity: @disabled-opacity; - --van-background-color: @background-color; - --van-background-color-light: @background-color-light; + --van-primary-color: var(--van-blue); + --van-success-color: var(--van-green); + --van-danger-color: var(--van-red); + --van-warning-color: var(--van-orange); + --van-text-color: var(--van-gray-8); + --van-text-color-secondary: var(--van-gray-6); + --van-text-color-tertiary: var(--van-gray-5); + --van-text-link-color: #576b95; + --van-active-color: var(--van-gray-2); + --van-active-opacity: 0.6; + --van-disabled-opacity: 0.5; + --van-background-color: var(--van-gray-1); + --van-background-color-light: var(--van-white); // Padding - --van-padding-base: @padding-base; - --van-padding-xs: @padding-xs; - --van-padding-sm: @padding-sm; - --van-padding-md: @padding-md; - --van-padding-lg: @padding-lg; - --van-padding-xl: @padding-xl; + --van-padding-base: 4px; + --van-padding-xs: 8px; + --van-padding-sm: 12px; + --van-padding-md: 16px; + --van-padding-lg: 24px; + --van-padding-xl: 32px; // Font - --van-font-size-xs: @font-size-xs; - --van-font-size-sm: @font-size-sm; - --van-font-size-md: @font-size-md; - --van-font-size-lg: @font-size-lg; - --van-font-weight-bold: @font-weight-bold; - --van-line-height-xs: @line-height-xs; - --van-line-height-sm: @line-height-sm; - --van-line-height-md: @line-height-md; - --van-line-height-lg: @line-height-lg; - --van-base-font-family: @base-font-family; - --van-price-integer-font-family: @price-integer-font-family; + --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; // Animation - --van-animation-duration-base: @animation-duration-base; - --van-animation-duration-fast: @animation-duration-fast; - --van-animation-timing-function-enter: @animation-timing-function-enter; - --van-animation-timing-function-leave: @animation-timing-function-leave; + --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; // Border - --van-border-color: @border-color; - --van-border-width-base: @border-width-base; - --van-border-radius-sm: @border-radius-sm; - --van-border-radius-md: @border-radius-md; - --van-border-radius-lg: @border-radius-lg; - --van-border-radius-max: @border-radius-max; + --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; } diff --git a/packages/vant/src/style/mixins/hairline.less b/packages/vant/src/style/mixins/hairline.less index 6bd32176e..2d1bd531b 100644 --- a/packages/vant/src/style/mixins/hairline.less +++ b/packages/vant/src/style/mixins/hairline.less @@ -1,5 +1,3 @@ -@import '../var'; - .hairline-common() { position: absolute; box-sizing: border-box; diff --git a/packages/vant/src/style/normalize.less b/packages/vant/src/style/normalize.less index baf31f706..4cf8d1a7a 100644 --- a/packages/vant/src/style/normalize.less +++ b/packages/vant/src/style/normalize.less @@ -1,12 +1,10 @@ -@import './var'; - html { -webkit-tap-highlight-color: transparent; } body { margin: 0; - font-family: @base-font-family; + font-family: var(--van-base-font-family); } a { diff --git a/packages/vant/src/style/var.less b/packages/vant/src/style/var.less deleted file mode 100644 index 5cdde6726..000000000 --- a/packages/vant/src/style/var.less +++ /dev/null @@ -1,74 +0,0 @@ -// Color Palette -@black: #000; -@white: #fff; -@gray-1: #f7f8fa; -@gray-2: #f2f3f5; -@gray-3: #ebedf0; -@gray-4: #dcdee0; -@gray-5: #c8c9cc; -@gray-6: #969799; -@gray-7: #646566; -@gray-8: #323233; -@red: #ee0a24; -@blue: #1989fa; -@orange: #ff976a; -@orange-dark: #ed6a0c; -@orange-light: #fffbe8; -@green: #07c160; - -// Gradient Colors -@gradient-red: linear-gradient(to right, #ff6034, #ee0a24); -@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917); - -// Component Colors -@primary-color: var(--van-blue); -@success-color: var(--van-green); -@danger-color: var(--van-red); -@warning-color: var(--van-orange); -@text-color: var(--van-gray-8); -@text-color-secondary: var(--van-gray-6); -@text-color-tertiary: var(--van-gray-5); -@text-link-color: #576b95; -@active-color: var(--van-gray-2); -@active-opacity: 0.6; -@disabled-opacity: 0.5; -@background-color: var(--van-gray-1); -@background-color-light: var(--van-white); - -// Padding -@padding-base: 4px; -@padding-xs: @padding-base * 2; -@padding-sm: @padding-base * 3; -@padding-md: @padding-base * 4; -@padding-lg: @padding-base * 6; -@padding-xl: @padding-base * 8; - -// Font -@font-size-xs: 10px; -@font-size-sm: 12px; -@font-size-md: 14px; -@font-size-lg: 16px; -@font-weight-bold: 500; -@line-height-xs: 14px; -@line-height-sm: 18px; -@line-height-md: 20px; -@line-height-lg: 22px; -@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', - Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', - 'Microsoft Yahei', sans-serif; -@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, - sans-serif; - -// Animation -@animation-duration-base: 0.3s; -@animation-duration-fast: 0.2s; -@animation-timing-function-enter: ease-out; -@animation-timing-function-leave: ease-in; - -// Border -@border-color: var(--van-gray-3); -@border-width-base: 1px; -@border-radius-sm: 2px; -@border-radius-md: 4px; -@border-radius-lg: 8px; -@border-radius-max: 999px; diff --git a/packages/vant/src/submit-bar/index.less b/packages/vant/src/submit-bar/index.less index 6cc1c6bba..e55a4f907 100644 --- a/packages/vant/src/submit-bar/index.less +++ b/packages/vant/src/submit-bar/index.less @@ -1,25 +1,23 @@ -@import './var.less'; - :root { - --van-submit-bar-height: @submit-bar-height; - --van-submit-bar-z-index: @submit-bar-z-index; - --van-submit-bar-background-color: @submit-bar-background-color; - --van-submit-bar-button-width: @submit-bar-button-width; - --van-submit-bar-price-color: @submit-bar-price-color; - --van-submit-bar-price-font-size: @submit-bar-price-font-size; - --van-submit-bar-price-integer-font-size: @submit-bar-price-integer-font-size; - --van-submit-bar-price-font-family: @submit-bar-price-font-family; - --van-submit-bar-currency-font-size: @submit-bar-currency-font-size; - --van-submit-bar-text-color: @submit-bar-text-color; - --van-submit-bar-text-font-size: @submit-bar-text-font-size; - --van-submit-bar-tip-padding: @submit-bar-tip-padding; - --van-submit-bar-tip-font-size: @submit-bar-tip-font-size; - --van-submit-bar-tip-line-height: @submit-bar-tip-line-height; - --van-submit-bar-tip-color: @submit-bar-tip-color; - --van-submit-bar-tip-background-color: @submit-bar-tip-background-color; - --van-submit-bar-tip-icon-size: @submit-bar-tip-icon-size; - --van-submit-bar-button-height: @submit-bar-button-height; - --van-submit-bar-padding: @submit-bar-padding; + --van-submit-bar-height: 50px; + --van-submit-bar-z-index: 100; + --van-submit-bar-background-color: var(--van-background-color-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-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); + --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-icon-size: 12px; + --van-submit-bar-button-height: 40px; + --van-submit-bar-padding: 0 var(--van-padding-md); } .van-submit-bar { diff --git a/packages/vant/src/submit-bar/var.less b/packages/vant/src/submit-bar/var.less deleted file mode 100644 index 7c5220261..000000000 --- a/packages/vant/src/submit-bar/var.less +++ /dev/null @@ -1,22 +0,0 @@ -@import '../style/var.less'; - -@submit-bar-height: 50px; -@submit-bar-z-index: 100; -@submit-bar-background-color: var(--van-background-color-light); -@submit-bar-button-width: 110px; -@submit-bar-price-color: var(--van-danger-color); -@submit-bar-price-font-size: var(--van-font-size-md); -@submit-bar-currency-font-size: var(--van-font-size-md); -@submit-bar-text-color: var(--van-text-color); -@submit-bar-text-font-size: var(--van-font-size-md); -@submit-bar-tip-padding: var(--van-padding-xs) var(--van-padding-sm); -@submit-bar-tip-font-size: var(--van-font-size-sm); -@submit-bar-tip-line-height: 1.5; -@submit-bar-tip-color: var(--van-orange-dark); -@submit-bar-tip-background-color: var(--van-orange-light); -@submit-bar-tip-icon-size: 12px; -@submit-bar-button-height: 40px; -@submit-bar-padding: 0 var(--van-padding-md); -@submit-bar-price-font-size: var(--van-font-size-sm); -@submit-bar-price-integer-font-size: 20px; -@submit-bar-price-font-family: var(--van-price-integer-font-family); diff --git a/packages/vant/src/swipe/index.less b/packages/vant/src/swipe/index.less index 6bb38358a..f866d3fbe 100644 --- a/packages/vant/src/swipe/index.less +++ b/packages/vant/src/swipe/index.less @@ -1,12 +1,10 @@ -@import './var.less'; - :root { - --van-swipe-indicator-size: @swipe-indicator-size; - --van-swipe-indicator-margin: @swipe-indicator-margin; - --van-swipe-indicator-active-opacity: @swipe-indicator-active-opacity; - --van-swipe-indicator-inactive-opacity: @swipe-indicator-inactive-opacity; - --van-swipe-indicator-active-background-color: @swipe-indicator-active-background-color; - --van-swipe-indicator-inactive-background-color: @swipe-indicator-inactive-background-color; + --van-swipe-indicator-size: 6px; + --van-swipe-indicator-margin: var(--van-padding-sm); + --van-swipe-indicator-active-opacity: 1; + --van-swipe-indicator-inactive-opacity: 0.3; + --van-swipe-indicator-active-background-color: var(--van-primary-color); + --van-swipe-indicator-inactive-background-color: var(--van-border-color); } .van-swipe { diff --git a/packages/vant/src/swipe/var.less b/packages/vant/src/swipe/var.less deleted file mode 100644 index a485139d5..000000000 --- a/packages/vant/src/swipe/var.less +++ /dev/null @@ -1,8 +0,0 @@ -@import '../style/var.less'; - -@swipe-indicator-size: 6px; -@swipe-indicator-margin: var(--van-padding-sm); -@swipe-indicator-active-opacity: 1; -@swipe-indicator-inactive-opacity: 0.3; -@swipe-indicator-active-background-color: var(--van-primary-color); -@swipe-indicator-inactive-background-color: var(--van-border-color); diff --git a/packages/vant/src/switch/index.less b/packages/vant/src/switch/index.less index 570f08bc2..2bcd3fe57 100644 --- a/packages/vant/src/switch/index.less +++ b/packages/vant/src/switch/index.less @@ -1,17 +1,15 @@ -@import './var.less'; - :root { - --van-switch-size: @switch-size; - --van-switch-width: @switch-width; - --van-switch-height: @switch-height; - --van-switch-node-size: @switch-node-size; - --van-switch-node-background-color: @switch-node-background-color; - --van-switch-node-box-shadow: @switch-node-box-shadow; - --van-switch-background-color: @switch-background-color; - --van-switch-on-background-color: @switch-on-background-color; - --van-switch-transition-duration: @switch-transition-duration; - --van-switch-disabled-opacity: @switch-disabled-opacity; - --van-switch-border: @switch-border; + --van-switch-size: 30px; + --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-disabled-opacity: var(--van-disabled-opacity); + --van-switch-border: var(--van-border-width-base) solid rgba(0, 0, 0, 0.1); } .van-switch { diff --git a/packages/vant/src/switch/var.less b/packages/vant/src/switch/var.less deleted file mode 100644 index 93906544e..000000000 --- a/packages/vant/src/switch/var.less +++ /dev/null @@ -1,14 +0,0 @@ -@import '../style/var.less'; - -@switch-size: 30px; -@switch-width: 2em; -@switch-height: 1em; -@switch-node-size: 1em; -@switch-node-background-color: var(--van-white); -@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), - 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); -@switch-background-color: var(--van-background-color-light); -@switch-on-background-color: var(--van-primary-color); -@switch-transition-duration: var(--van-animation-duration-base); -@switch-disabled-opacity: var(--van-disabled-opacity); -@switch-border: var(--van-border-width-base) solid rgba(0, 0, 0, 0.1); diff --git a/packages/vant/src/tabbar-item/index.less b/packages/vant/src/tabbar-item/index.less index 53ab3a67e..87cc2efa2 100644 --- a/packages/vant/src/tabbar-item/index.less +++ b/packages/vant/src/tabbar-item/index.less @@ -1,13 +1,11 @@ -@import './var.less'; - :root { - --van-tabbar-item-font-size: @tabbar-item-font-size; - --van-tabbar-item-text-color: @tabbar-item-text-color; - --van-tabbar-item-active-color: @tabbar-item-active-color; - --van-tabbar-item-active-background-color: @tabbar-item-active-background-color; - --van-tabbar-item-line-height: @tabbar-item-line-height; - --van-tabbar-item-icon-size: @tabbar-item-icon-size; - --van-tabbar-item-icon-margin-bottom: @tabbar-item-icon-margin-bottom; + --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-item { diff --git a/packages/vant/src/tabbar-item/var.less b/packages/vant/src/tabbar-item/var.less deleted file mode 100644 index 769a0de40..000000000 --- a/packages/vant/src/tabbar-item/var.less +++ /dev/null @@ -1,9 +0,0 @@ -@import '../style/var.less'; - -@tabbar-item-font-size: var(--van-font-size-sm); -@tabbar-item-text-color: var(--van-gray-7); -@tabbar-item-active-color: var(--van-primary-color); -@tabbar-item-active-background-color: var(--van-background-color-light); -@tabbar-item-line-height: 1; -@tabbar-item-icon-size: 22px; -@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 62f125ea1..fc005e871 100644 --- a/packages/vant/src/tabbar/index.less +++ b/packages/vant/src/tabbar/index.less @@ -1,9 +1,7 @@ -@import './var.less'; - :root { - --van-tabbar-height: @tabbar-height; - --van-tabbar-z-index: @tabbar-z-index; - --van-tabbar-background-color: @tabbar-background-color; + --van-tabbar-height: 50px; + --van-tabbar-z-index: 1; + --van-tabbar-background-color: var(--van-background-color-light); } .van-tabbar { diff --git a/packages/vant/src/tabbar/var.less b/packages/vant/src/tabbar/var.less deleted file mode 100644 index 658e09bd0..000000000 --- a/packages/vant/src/tabbar/var.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '../style/var.less'; - -@tabbar-height: 50px; -@tabbar-z-index: 1; -@tabbar-background-color: var(--van-background-color-light); diff --git a/packages/vant/src/tabs/index.less b/packages/vant/src/tabs/index.less index 8464c40f1..819155a58 100644 --- a/packages/vant/src/tabs/index.less +++ b/packages/vant/src/tabs/index.less @@ -1,18 +1,16 @@ -@import './var.less'; - :root { - --van-tab-text-color: @tab-text-color; - --van-tab-active-text-color: @tab-active-text-color; - --van-tab-disabled-text-color: @tab-disabled-text-color; - --van-tab-font-size: @tab-font-size; - --van-tab-line-height: @tab-line-height; - --van-tabs-default-color: @tabs-default-color; - --van-tabs-line-height: @tabs-line-height; - --van-tabs-card-height: @tabs-card-height; - --van-tabs-nav-background-color: @tabs-nav-background-color; - --van-tabs-bottom-bar-width: @tabs-bottom-bar-width; - --van-tabs-bottom-bar-height: @tabs-bottom-bar-height; - --van-tabs-bottom-bar-color: @tabs-bottom-bar-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-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 { diff --git a/packages/vant/src/tabs/var.less b/packages/vant/src/tabs/var.less deleted file mode 100644 index 90198f09f..000000000 --- a/packages/vant/src/tabs/var.less +++ /dev/null @@ -1,14 +0,0 @@ -@import '../style/var.less'; - -@tab-text-color: var(--van-gray-7); -@tab-active-text-color: var(--van-text-color); -@tab-disabled-text-color: var(--van-text-color-tertiary); -@tab-font-size: var(--van-font-size-md); -@tab-line-height: var(--van-line-height-md); -@tabs-default-color: var(--van-danger-color); -@tabs-line-height: 44px; -@tabs-card-height: 30px; -@tabs-nav-background-color: var(--van-background-color-light); -@tabs-bottom-bar-width: 40px; -@tabs-bottom-bar-height: 3px; -@tabs-bottom-bar-color: @tabs-default-color; diff --git a/packages/vant/src/tag/index.less b/packages/vant/src/tag/index.less index a0411cabb..daf3f2639 100644 --- a/packages/vant/src/tag/index.less +++ b/packages/vant/src/tag/index.less @@ -1,22 +1,20 @@ -@import './var.less'; - :root { - --van-tag-padding: @tag-padding; - --van-tag-text-color: @tag-text-color; - --van-tag-font-size: @tag-font-size; - --van-tag-border-radius: @tag-border-radius; - --van-tag-line-height: @tag-line-height; - --van-tag-medium-padding: @tag-medium-padding; - --van-tag-large-padding: @tag-large-padding; - --van-tag-large-border-radius: @tag-large-border-radius; - --van-tag-large-font-size: @tag-large-font-size; - --van-tag-round-border-radius: @tag-round-border-radius; - --van-tag-danger-color: @tag-danger-color; - --van-tag-primary-color: @tag-primary-color; - --van-tag-success-color: @tag-success-color; - --van-tag-warning-color: @tag-warning-color; - --van-tag-default-color: @tag-default-color; - --van-tag-plain-background-color: @tag-plain-background-color; + --van-tag-padding: 0 var(--van-padding-base); + --van-tag-text-color: var(--van-white); + --van-tag-font-size: var(--van-font-size-sm); + --van-tag-border-radius: 2px; + --van-tag-line-height: 16px; + --van-tag-medium-padding: 2px 6px; + --van-tag-large-padding: var(--van-padding-base) var(--van-padding-xs); + --van-tag-large-border-radius: var(--van-border-radius-md); + --van-tag-large-font-size: var(--van-font-size-md); + --van-tag-round-border-radius: var(--van-border-radius-max); + --van-tag-danger-color: var(--van-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 { diff --git a/packages/vant/src/tag/var.less b/packages/vant/src/tag/var.less deleted file mode 100644 index a8801c381..000000000 --- a/packages/vant/src/tag/var.less +++ /dev/null @@ -1,18 +0,0 @@ -@import '../style/var.less'; - -@tag-padding: 0 var(--van-padding-base); -@tag-text-color: var(--van-white); -@tag-font-size: var(--van-font-size-sm); -@tag-border-radius: 2px; -@tag-line-height: 16px; -@tag-medium-padding: 2px 6px; -@tag-large-padding: var(--van-padding-base) var(--van-padding-xs); -@tag-large-border-radius: var(--van-border-radius-md); -@tag-large-font-size: var(--van-font-size-md); -@tag-round-border-radius: var(--van-border-radius-max); -@tag-danger-color: var(--van-danger-color); -@tag-primary-color: var(--van-primary-color); -@tag-success-color: var(--van-success-color); -@tag-warning-color: var(--van-warning-color); -@tag-default-color: var(--van-gray-6); -@tag-plain-background-color: var(--van-background-color-light); diff --git a/packages/vant/src/toast/index.less b/packages/vant/src/toast/index.less index 9ae3a18ba..40d5f723b 100644 --- a/packages/vant/src/toast/index.less +++ b/packages/vant/src/toast/index.less @@ -1,21 +1,19 @@ -@import './var.less'; - :root { - --van-toast-max-width: @toast-max-width; - --van-toast-font-size: @toast-font-size; - --van-toast-text-color: @toast-text-color; - --van-toast-loading-icon-color: @toast-loading-icon-color; - --van-toast-line-height: @toast-line-height; - --van-toast-border-radius: @toast-border-radius; - --van-toast-background-color: @toast-background-color; - --van-toast-icon-size: @toast-icon-size; - --van-toast-text-min-width: @toast-text-min-width; - --van-toast-text-padding: @toast-text-padding; - --van-toast-default-padding: @toast-default-padding; - --van-toast-default-width: @toast-default-width; - --van-toast-default-min-height: @toast-default-min-height; - --van-toast-position-top-distance: @toast-position-top-distance; - --van-toast-position-bottom-distance: @toast-position-bottom-distance; + --van-toast-max-width: 70%; + --van-toast-font-size: var(--van-font-size-md); + --van-toast-text-color: var(--van-white); + --van-toast-loading-icon-color: var(--van-white); + --van-toast-line-height: var(--van-line-height-md); + --van-toast-border-radius: var(--van-border-radius-lg); + --van-toast-background-color: 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); + --van-toast-default-padding: var(--van-padding-md); + --van-toast-default-width: 88px; + --van-toast-default-min-height: 88px; + --van-toast-position-top-distance: 20%; + --van-toast-position-bottom-distance: 20%; } .van-toast { diff --git a/packages/vant/src/toast/var.less b/packages/vant/src/toast/var.less deleted file mode 100644 index f897043d2..000000000 --- a/packages/vant/src/toast/var.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '../style/var.less'; - -@toast-max-width: 70%; -@toast-font-size: var(--van-font-size-md); -@toast-text-color: var(--van-white); -@toast-loading-icon-color: var(--van-white); -@toast-line-height: var(--van-line-height-md); -@toast-border-radius: var(--van-border-radius-lg); -@toast-background-color: rgba(0, 0, 0, 0.7); -@toast-icon-size: 36px; -@toast-text-min-width: 96px; -@toast-text-padding: var(--van-padding-xs) var(--van-padding-sm); -@toast-default-padding: var(--van-padding-md); -@toast-default-width: 88px; -@toast-default-min-height: 88px; -@toast-position-top-distance: 20%; -@toast-position-bottom-distance: 20%; diff --git a/packages/vant/src/tree-select/index.less b/packages/vant/src/tree-select/index.less index 8bc9b2620..b2ba438bd 100644 --- a/packages/vant/src/tree-select/index.less +++ b/packages/vant/src/tree-select/index.less @@ -1,14 +1,12 @@ -@import './var.less'; - :root { - --van-tree-select-font-size: @tree-select-font-size; - --van-tree-select-nav-background-color: @tree-select-nav-background-color; - --van-tree-select-content-background-color: @tree-select-content-background-color; - --van-tree-select-nav-item-padding: @tree-select-nav-item-padding; - --van-tree-select-item-height: @tree-select-item-height; - --van-tree-select-item-active-color: @tree-select-item-active-color; - --van-tree-select-item-disabled-color: @tree-select-item-disabled-color; - --van-tree-select-item-selected-size: @tree-select-item-selected-size; + --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 { diff --git a/packages/vant/src/tree-select/var.less b/packages/vant/src/tree-select/var.less deleted file mode 100644 index 54dd825d3..000000000 --- a/packages/vant/src/tree-select/var.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '../style/var.less'; - -@tree-select-font-size: var(--van-font-size-md); -@tree-select-nav-background-color: var(--van-background-color); -@tree-select-content-background-color: var(--van-background-color-light); -@tree-select-nav-item-padding: 14px var(--van-padding-sm); -@tree-select-item-height: 48px; -@tree-select-item-active-color: var(--van-danger-color); -@tree-select-item-disabled-color: var(--van-gray-5); -@tree-select-item-selected-size: 16px; diff --git a/packages/vant/src/uploader/index.less b/packages/vant/src/uploader/index.less index 27a243b76..1113d1d9a 100644 --- a/packages/vant/src/uploader/index.less +++ b/packages/vant/src/uploader/index.less @@ -1,31 +1,29 @@ -@import './var.less'; - :root { - --van-uploader-size: @uploader-size; - --van-uploader-icon-size: @uploader-icon-size; - --van-uploader-icon-color: @uploader-icon-color; - --van-uploader-text-color: @uploader-text-color; - --van-uploader-text-font-size: @uploader-text-font-size; - --van-uploader-upload-background-color: @uploader-upload-background-color; - --van-uploader-upload-active-color: @uploader-upload-active-color; - --van-uploader-delete-color: @uploader-delete-color; - --van-uploader-delete-icon-size: @uploader-delete-icon-size; - --van-uploader-delete-background-color: @uploader-delete-background-color; - --van-uploader-file-background-color: @uploader-file-background-color; - --van-uploader-file-icon-size: @uploader-file-icon-size; - --van-uploader-file-icon-color: @uploader-file-icon-color; - --van-uploader-file-name-padding: @uploader-file-name-padding; - --van-uploader-file-name-margin-top: @uploader-file-name-margin-top; - --van-uploader-file-name-font-size: @uploader-file-name-font-size; - --van-uploader-file-name-text-color: @uploader-file-name-text-color; - --van-uploader-mask-text-color: @uploader-mask-text-color; - --van-uploader-mask-background-color: @uploader-mask-background-color; - --van-uploader-mask-icon-size: @uploader-mask-icon-size; - --van-uploader-mask-message-font-size: @uploader-mask-message-font-size; - --van-uploader-mask-message-line-height: @uploader-mask-message-line-height; - --van-uploader-loading-icon-size: @uploader-loading-icon-size; - --van-uploader-loading-icon-color: @uploader-loading-icon-color; - --van-uploader-disabled-opacity: @uploader-disabled-opacity; + --van-uploader-size: 80px; + --van-uploader-icon-size: 24px; + --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-active-color: var(--van-active-color); + --van-uploader-delete-color: var(--van-white); + --van-uploader-delete-icon-size: 14px; + --van-uploader-delete-background-color: rgba(0, 0, 0, 0.7); + --van-uploader-file-background-color: var(--van-background-color); + --van-uploader-file-icon-size: 20px; + --van-uploader-file-icon-color: var(--van-gray-7); + --van-uploader-file-name-padding: 0 var(--van-padding-base); + --van-uploader-file-name-margin-top: var(--van-padding-xs); + --van-uploader-file-name-font-size: var(--van-font-size-sm); + --van-uploader-file-name-text-color: var(--van-gray-7); + --van-uploader-mask-text-color: var(--van-white); + --van-uploader-mask-background-color: 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); + --van-uploader-loading-icon-size: 22px; + --van-uploader-loading-icon-color: var(--van-white); + --van-uploader-disabled-opacity: var(--van-disabled-opacity); } .van-uploader { diff --git a/packages/vant/src/uploader/var.less b/packages/vant/src/uploader/var.less deleted file mode 100644 index e6e04e2a5..000000000 --- a/packages/vant/src/uploader/var.less +++ /dev/null @@ -1,27 +0,0 @@ -@import '../style/var.less'; - -@uploader-size: 80px; -@uploader-icon-size: 24px; -@uploader-icon-color: var(--van-gray-4); -@uploader-text-color: var(--van-text-color-secondary); -@uploader-text-font-size: var(--van-font-size-sm); -@uploader-upload-background-color: var(--van-gray-1); -@uploader-upload-active-color: var(--van-active-color); -@uploader-delete-color: var(--van-white); -@uploader-delete-icon-size: 14px; -@uploader-delete-background-color: rgba(0, 0, 0, 0.7); -@uploader-file-background-color: var(--van-background-color); -@uploader-file-icon-size: 20px; -@uploader-file-icon-color: var(--van-gray-7); -@uploader-file-name-padding: 0 var(--van-padding-base); -@uploader-file-name-margin-top: var(--van-padding-xs); -@uploader-file-name-font-size: var(--van-font-size-sm); -@uploader-file-name-text-color: var(--van-gray-7); -@uploader-mask-text-color: var(--van-white); -@uploader-mask-background-color: rgba(50, 50, 51, 0.88); -@uploader-mask-icon-size: 22px; -@uploader-mask-message-font-size: var(--van-font-size-sm); -@uploader-mask-message-line-height: var(--van-line-height-xs); -@uploader-loading-icon-size: 22px; -@uploader-loading-icon-color: var(--van-white); -@uploader-disabled-opacity: var(--van-disabled-opacity); diff --git a/packages/vant/vant.config.mjs b/packages/vant/vant.config.mjs index 70e77c023..fbfb13d04 100644 --- a/packages/vant/vant.config.mjs +++ b/packages/vant/vant.config.mjs @@ -461,15 +461,6 @@ export default { }, ], }, - { - title: '废弃', - items: [ - { - path: 'theme', - title: '定制主题', - }, - ], - }, ], }, 'en-US': { @@ -875,15 +866,6 @@ export default { // }, ], }, - { - title: 'Deprecated', - items: [ - { - path: 'theme', - title: 'Custom Theme', - }, - ], - }, ], }, }, From 7d6916b946440fdd7fb3e0bd4c1117c989d74a93 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 3 Nov 2021 17:36:17 +0800 Subject: [PATCH 004/170] breaking change: shorter css var names --- .../vant/docs/markdown/changelog.en-US.md | 4 +- .../vant/docs/markdown/changelog.zh-CN.md | 6 +- .../docs/markdown/migrate-from-v3.zh-CN.md | 19 +++++ .../vant/src/action-bar-button/index.less | 10 +-- packages/vant/src/action-bar-icon/index.less | 4 +- packages/vant/src/action-bar/README.md | 4 +- packages/vant/src/action-bar/README.zh-CN.md | 30 ++++---- packages/vant/src/action-bar/index.less | 4 +- packages/vant/src/action-sheet/README.md | 4 +- .../vant/src/action-sheet/README.zh-CN.md | 4 +- packages/vant/src/action-sheet/index.less | 6 +- packages/vant/src/address-list/index.less | 6 +- packages/vant/src/badge/README.md | 8 +-- packages/vant/src/badge/README.zh-CN.md | 8 +-- packages/vant/src/badge/index.less | 16 ++--- packages/vant/src/button/README.md | 18 ++--- packages/vant/src/button/README.zh-CN.md | 72 +++++++++---------- packages/vant/src/button/index.less | 48 ++++++------- packages/vant/src/calendar/README.md | 8 +-- packages/vant/src/calendar/README.zh-CN.md | 8 +-- packages/vant/src/calendar/index.less | 26 +++---- packages/vant/src/card/README.md | 6 +- packages/vant/src/card/README.zh-CN.md | 6 +- packages/vant/src/card/index.less | 18 ++--- packages/vant/src/cascader/index.less | 6 +- packages/vant/src/cell-group/index.less | 8 +-- packages/vant/src/cell/README.md | 6 +- packages/vant/src/cell/README.zh-CN.md | 6 +- packages/vant/src/cell/index.less | 4 +- packages/vant/src/checkbox/README.md | 4 +- packages/vant/src/checkbox/README.zh-CN.md | 4 +- packages/vant/src/checkbox/index.less | 8 +-- packages/vant/src/circle/README.md | 18 ++--- packages/vant/src/circle/README.zh-CN.md | 18 ++--- packages/vant/src/circle/index.less | 2 +- packages/vant/src/collapse-item/index.less | 12 ++-- packages/vant/src/collapse/README.md | 4 +- packages/vant/src/collapse/README.zh-CN.md | 4 +- packages/vant/src/config-provider/README.md | 41 ++++++----- .../vant/src/config-provider/README.zh-CN.md | 41 ++++++----- packages/vant/src/contact-edit/README.md | 2 +- .../vant/src/contact-edit/README.zh-CN.md | 16 ++--- packages/vant/src/contact-edit/index.less | 2 +- packages/vant/src/contact-list/index.less | 2 +- packages/vant/src/coupon-list/README.md | 10 +-- packages/vant/src/coupon-list/README.zh-CN.md | 10 +-- packages/vant/src/coupon-list/index.less | 10 +-- packages/vant/src/coupon/index.less | 23 +++--- packages/vant/src/dialog/README.md | 8 +-- packages/vant/src/dialog/README.zh-CN.md | 8 +-- packages/vant/src/dialog/index.less | 12 ++-- packages/vant/src/divider/index.less | 2 +- packages/vant/src/dropdown-menu/README.md | 4 +- .../vant/src/dropdown-menu/README.zh-CN.md | 4 +- packages/vant/src/dropdown-menu/index.less | 8 +-- packages/vant/src/grid-item/index.less | 9 ++- packages/vant/src/grid/README.md | 2 +- packages/vant/src/grid/README.zh-CN.md | 2 +- packages/vant/src/image-preview/README.md | 2 +- .../vant/src/image-preview/README.zh-CN.md | 2 +- packages/vant/src/image-preview/index.less | 4 +- packages/vant/src/image/README.md | 2 +- packages/vant/src/image/README.zh-CN.md | 2 +- packages/vant/src/image/index.less | 6 +- packages/vant/src/index-anchor/index.less | 10 +-- packages/vant/src/index-bar/README.md | 6 +- packages/vant/src/index-bar/README.zh-CN.md | 30 ++++---- packages/vant/src/index-bar/index.less | 2 +- packages/vant/src/loading/README.md | 2 +- packages/vant/src/loading/README.zh-CN.md | 14 ++-- packages/vant/src/loading/index.less | 5 +- packages/vant/src/nav-bar/README.md | 20 +++--- packages/vant/src/nav-bar/README.zh-CN.md | 20 +++--- packages/vant/src/nav-bar/index.less | 6 +- packages/vant/src/notice-bar/README.md | 2 +- packages/vant/src/notice-bar/README.zh-CN.md | 2 +- packages/vant/src/notice-bar/index.less | 4 +- packages/vant/src/notify/README.md | 8 +-- packages/vant/src/notify/README.zh-CN.md | 8 +-- packages/vant/src/notify/index.less | 16 ++--- packages/vant/src/number-keyboard/README.md | 8 +-- .../vant/src/number-keyboard/README.zh-CN.md | 34 ++++----- packages/vant/src/number-keyboard/index.less | 16 ++--- packages/vant/src/overlay/README.md | 8 +-- packages/vant/src/overlay/README.zh-CN.md | 8 +-- packages/vant/src/overlay/index.less | 4 +- packages/vant/src/pagination/README.md | 4 +- packages/vant/src/pagination/README.zh-CN.md | 4 +- packages/vant/src/pagination/index.less | 16 ++--- packages/vant/src/password-input/README.md | 6 +- .../vant/src/password-input/README.zh-CN.md | 6 +- packages/vant/src/password-input/index.less | 14 ++-- packages/vant/src/picker/README.md | 4 +- packages/vant/src/picker/README.zh-CN.md | 4 +- packages/vant/src/picker/index.less | 8 +-- packages/vant/src/popover/README.md | 6 +- packages/vant/src/popover/README.zh-CN.md | 6 +- packages/vant/src/popover/index.less | 20 +++--- packages/vant/src/popup/README.md | 6 +- packages/vant/src/popup/README.zh-CN.md | 18 ++--- packages/vant/src/popup/index.less | 30 ++++---- packages/vant/src/progress/README.md | 22 +++--- packages/vant/src/progress/README.zh-CN.md | 22 +++--- packages/vant/src/progress/index.less | 14 ++-- packages/vant/src/radio/README.md | 4 +- packages/vant/src/radio/README.zh-CN.md | 22 +++--- packages/vant/src/radio/index.less | 8 +-- packages/vant/src/search/README.md | 4 +- packages/vant/src/search/README.zh-CN.md | 26 +++---- packages/vant/src/search/index.less | 12 ++-- packages/vant/src/share-sheet/README.md | 2 +- packages/vant/src/share-sheet/README.zh-CN.md | 2 +- packages/vant/src/share-sheet/index.less | 4 +- packages/vant/src/sidebar-item/index.less | 12 ++-- packages/vant/src/sidebar/README.md | 6 +- packages/vant/src/sidebar/README.zh-CN.md | 6 +- packages/vant/src/skeleton/README.md | 18 ++--- packages/vant/src/skeleton/README.zh-CN.md | 18 ++--- packages/vant/src/skeleton/index.less | 18 ++--- packages/vant/src/slider/README.md | 10 +-- packages/vant/src/slider/README.zh-CN.md | 22 +++--- packages/vant/src/slider/index.less | 24 +++---- packages/vant/src/step/index.less | 6 +- packages/vant/src/stepper/README.md | 8 +-- packages/vant/src/stepper/README.zh-CN.md | 8 +-- packages/vant/src/stepper/index.less | 22 +++--- packages/vant/src/steps/README.md | 2 +- packages/vant/src/steps/README.zh-CN.md | 2 +- packages/vant/src/steps/index.less | 4 +- packages/vant/src/style/animation.less | 38 +++++----- packages/vant/src/style/base.less | 12 ++-- packages/vant/src/style/css-variables.less | 34 ++++----- packages/vant/src/style/normalize.less | 2 +- packages/vant/src/submit-bar/README.md | 6 +- packages/vant/src/submit-bar/README.zh-CN.md | 6 +- packages/vant/src/submit-bar/index.less | 18 ++--- packages/vant/src/swipe/README.md | 4 +- packages/vant/src/swipe/README.zh-CN.md | 4 +- packages/vant/src/swipe/index.less | 12 ++-- packages/vant/src/switch/README.md | 12 ++-- packages/vant/src/switch/README.zh-CN.md | 12 ++-- packages/vant/src/switch/index.less | 26 +++---- packages/vant/src/tab/README.md | 2 +- packages/vant/src/tab/README.zh-CN.md | 28 ++++---- packages/vant/src/tabbar-item/index.less | 4 +- packages/vant/src/tabbar/README.md | 4 +- packages/vant/src/tabbar/README.zh-CN.md | 24 +++---- packages/vant/src/tabbar/index.less | 4 +- packages/vant/src/tabs/index.less | 12 ++-- packages/vant/src/tag/README.md | 8 +-- packages/vant/src/tag/README.zh-CN.md | 8 +-- packages/vant/src/tag/index.less | 19 +++-- packages/vant/src/toast/README.md | 4 +- packages/vant/src/toast/README.zh-CN.md | 4 +- packages/vant/src/toast/index.less | 10 +-- packages/vant/src/tree-select/README.md | 4 +- packages/vant/src/tree-select/README.zh-CN.md | 20 +++--- packages/vant/src/tree-select/index.less | 10 +-- packages/vant/src/uploader/README.md | 8 +-- packages/vant/src/uploader/README.zh-CN.md | 8 +-- packages/vant/src/uploader/index.less | 18 ++--- 161 files changed, 893 insertions(+), 886 deletions(-) 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); From 6c24fa728ee078419cbd7b8efcd35b3b70021208 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 4 Nov 2021 17:48:37 +0800 Subject: [PATCH 005/170] docs: update v4 migration guide --- .../docs/markdown/migrate-from-v3.zh-CN.md | 56 +++++++++++-------- packages/vant/vant.config.mjs | 6 +- 2 files changed, 39 insertions(+), 23 deletions(-) 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 ba15d5596..c4ad4af85 100644 --- a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md +++ b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md @@ -4,38 +4,50 @@ 本文档提供了从 Vant 3 到 Vant 4 的升级指南。 -## 不兼容更新 +### 为什么会有 Vant 4.0 ？ -### 主题定制方式调整 +为了支持 **暗色模式**，我们对 Vant 中的 **样式变量** 进行了一些不兼容更新，因此发布了新的大版本。 -不再支持基于 Less 变量进行主题定制，请使用 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行主题配置。 +如果你的项目没有使用主题定制，那样式变量的调整对你没有任何影响，只需要花几分钟去适配 API 调整，即可完成升级。 -### 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 调整 +4.0 版本对少量 API 进行了不兼容调整： + #### Picker - `default` 插槽重命名为 `toolbar` - 移除了 `value-key` 属性，使用 `columnsFieldNames` 属性代替 -### Tabs +#### Tabs - 移除了 `click` 和 `disabled` 事件，使用 `click-tab` 事件代替 + +## 样式变量调整 + +### 移除 Less 变量 + +目前 Vant 已经支持了基于 CSS 变量的主题定制能力，因此后续将不再提供 Less 变量。 + +如果你的项目正在使用 Less 变量进行主题定制，请使用 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行替换。 + +### 简化 CSS 变量名 + +考虑到 **代码体积** 和 **使用便捷性**，我们对部分 CSS 变量的名称进行了简化，在变量名中使用更简短的单词，涉及以下变更： + +```less +animation-duration -> duration +animation-timing-function-enter -> ease-out +animation-timing-function-leave -> ease-in +background-color -> background +border-radius -> radius +border-width-base -> border-width +box-shadow -> shadow +font-family -> font +font-weight-bold -> font-bold +price-integer-font -> price-font +text-link -> link +transition-duration -> duration +``` diff --git a/packages/vant/vant.config.mjs b/packages/vant/vant.config.mjs index fbfb13d04..cb72f98a3 100644 --- a/packages/vant/vant.config.mjs +++ b/packages/vant/vant.config.mjs @@ -86,7 +86,11 @@ export default { }, { path: 'migrate-from-v2', - title: '从 v2 升级', + title: '从 v2 升级到 v3', + }, + { + path: 'migrate-from-v3', + title: '从 v3 升级到 v4', }, { path: 'contribution', From 89b029aa42400b2570b7676b881f6311abe42352 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Tue, 18 Jan 2022 21:02:41 +0800 Subject: [PATCH 006/170] refactor(Picker): data driven --- packages/vant/src/picker/Picker.tsx | 279 ++++++++-------------- packages/vant/src/picker/PickerColumn.tsx | 105 +++----- packages/vant/src/picker/README.md | 43 ++-- packages/vant/src/picker/README.zh-CN.md | 50 ++-- packages/vant/src/picker/demo/data.ts | 114 +++++++-- packages/vant/src/picker/demo/index.vue | 50 ++-- packages/vant/src/picker/index.ts | 3 +- packages/vant/src/picker/types.ts | 37 ++- 8 files changed, 308 insertions(+), 373 deletions(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 922db050e..f864c9e7c 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -9,6 +9,7 @@ import { // Utils import { + isDef, extend, unitToPx, truthProp, @@ -32,12 +33,11 @@ import Column, { PICKER_KEY } from './PickerColumn'; // Types import type { PickerColumn, - PickerOption, PickerExpose, PickerFieldNames, - PickerObjectColumn, PickerToolbarPosition, } from './types'; +import { PickerOption } from '.'; const [name, bem, t] = createNamespace('picker'); @@ -55,7 +55,8 @@ export const pickerSharedProps = { }; const pickerProps = extend({}, pickerSharedProps, { - columns: makeArrayProp(), + columns: makeArrayProp(), + modelValue: makeArrayProp(), defaultIndex: makeNumericProp(0), toolbarPosition: makeStringProp('top'), columnsFieldNames: Object as PropType, @@ -68,20 +69,21 @@ export default defineComponent({ props: pickerProps, - emits: ['confirm', 'cancel', 'change'], + emits: ['confirm', 'cancel', 'change', 'update:modelValue'], setup(props, { emit, slots }) { const hasOptions = ref(false); - const formattedColumns = ref([]); + const selectedValues = ref(props.modelValue); + const currentColumns = ref([]); const { text: textKey, - values: valuesKey, + value: valueKey, children: childrenKey, } = extend( { text: 'text', - values: 'values', + value: 'value', children: 'children', }, props.columnsFieldNames @@ -95,186 +97,78 @@ export default defineComponent({ const dataType = computed(() => { const firstColumn = props.columns[0]; - if (typeof firstColumn === 'object') { - if (childrenKey in firstColumn) { - return 'cascade'; - } - if (valuesKey in firstColumn) { - return 'object'; - } + if (Array.isArray(firstColumn)) { + return 'multiple'; } - return 'plain'; + if (childrenKey in firstColumn) { + return 'cascade'; + } + return 'default'; }); + const findOption = (options: PickerOption[], value: number | string) => + options.find((option) => option[valueKey] === value); + const formatCascade = () => { - const formatted: PickerObjectColumn[] = []; + const formatted: PickerColumn[] = []; - let cursor: PickerObjectColumn = { + let cursor: PickerOption | undefined = { [childrenKey]: props.columns, }; + let columnIndex = 0; while (cursor && cursor[childrenKey]) { - const children = cursor[childrenKey]; - let defaultIndex = cursor.defaultIndex ?? +props.defaultIndex; + const options: PickerOption[] = cursor[childrenKey]; + const value = selectedValues.value[columnIndex]; - while (children[defaultIndex] && children[defaultIndex].disabled) { - if (defaultIndex < children.length - 1) { - defaultIndex++; - } else { - defaultIndex = 0; - break; - } + cursor = isDef(value) ? findOption(options, value) : undefined; + + if (!cursor && options.length) { + const firstValue = options[0][valueKey]; + selectedValues.value[columnIndex] = firstValue; + cursor = findOption(options, firstValue); } - formatted.push({ - [valuesKey]: cursor[childrenKey], - className: cursor.className, - defaultIndex, - }); - - cursor = children[defaultIndex]; - } - - formattedColumns.value = formatted; - }; - - const format = () => { - const { columns } = props; - - if (dataType.value === 'plain') { - formattedColumns.value = [{ [valuesKey]: columns }]; - } else if (dataType.value === 'cascade') { - formatCascade(); - } else { - formattedColumns.value = columns as PickerObjectColumn[]; - } - - hasOptions.value = formattedColumns.value.some( - (item) => item[valuesKey] && item[valuesKey].length !== 0 - ); - }; - - // get indexes of all columns - const getIndexes = () => children.map((child) => child.state.index); - - // set options of column by index - const setColumnValues = (index: number, options: PickerOption[]) => { - const column = children[index]; - if (column) { - column.setOptions(options); - hasOptions.value = true; - } - }; - - const onCascadeChange = (columnIndex: number) => { - let cursor: PickerObjectColumn = { - [childrenKey]: props.columns, - }; - const indexes = getIndexes(); - - for (let i = 0; i <= columnIndex; i++) { - cursor = cursor[childrenKey][indexes[i]]; - } - - while (cursor && cursor[childrenKey]) { columnIndex++; - setColumnValues(columnIndex, cursor[childrenKey]); - cursor = cursor[childrenKey][cursor.defaultIndex || 0]; + formatted.push(options); } + + return formatted; }; - // get column instance by index - const getChild = (index: number) => children[index]; + const selectedOptions = computed(() => + currentColumns.value.map((options, index) => + findOption(options, selectedValues.value[index]) + ) + ); - // get column value by index - const getColumnValue = (index: number) => { - const column = getChild(index); - if (column) { - return column.getValue(); - } - }; + const onChange = (value: number | string, columnIndex: number) => { + selectedValues.value[columnIndex] = value; - // set column value by index - const setColumnValue = (index: number, value: string) => { - const column = getChild(index); - if (column) { - column.setValue(value); - if (dataType.value === 'cascade') { - onCascadeChange(index); - } - } - }; - - // get column option index by column index - const getColumnIndex = (index: number) => { - const column = getChild(index); - if (column) { - return column.state.index; - } - }; - - // set column option index by column index - const setColumnIndex = (columnIndex: number, optionIndex: number) => { - const column = getChild(columnIndex); - if (column) { - column.setIndex(optionIndex); - if (dataType.value === 'cascade') { - onCascadeChange(columnIndex); - } - } - }; - - // get options of column by index - const getColumnValues = (index: number) => { - const column = getChild(index); - if (column) { - return column.state.options; - } - }; - - // get values of all columns - const getValues = () => children.map((child) => child.getValue()); - - // set values of all columns - const setValues = (values: string[]) => { - values.forEach((value, index) => { - setColumnValue(index, value); - }); - }; - - // set indexes of all columns - const setIndexes = (indexes: number[]) => { - indexes.forEach((optionIndex, columnIndex) => { - setColumnIndex(columnIndex, optionIndex); - }); - }; - - const emitAction = (event: 'confirm' | 'cancel') => { - if (dataType.value === 'plain') { - emit(event, getColumnValue(0), getColumnIndex(0)); - } else { - emit(event, getValues(), getIndexes()); - } - }; - - const onChange = (columnIndex: number) => { if (dataType.value === 'cascade') { - onCascadeChange(columnIndex); + currentColumns.value = formatCascade(); } - if (dataType.value === 'plain') { - emit('change', getColumnValue(0), getColumnIndex(0)); - } else { - emit('change', getValues(), columnIndex); - } + emit('change', { + columnIndex, + selectedValues: selectedValues.value, + selectedOptions: selectedOptions.value, + }); }; const confirm = () => { children.forEach((child) => child.stopMomentum()); - emitAction('confirm'); + emit('confirm', { + selectedValues: selectedValues.value, + selectedOptions: selectedOptions.value, + }); }; - const cancel = () => emitAction('cancel'); + const cancel = () => + emit('cancel', { + selectedValues: selectedValues.value, + selectedOptions: selectedOptions.value, + }); const renderTitle = () => { if (slots.title) { @@ -324,19 +218,19 @@ export default defineComponent({ }; const renderColumnItems = () => - formattedColumns.value.map((item, columnIndex) => ( + currentColumns.value.map((options, columnIndex) => ( onChange(columnIndex)} + onChange={(value: number | string) => onChange(value, columnIndex)} /> )); @@ -371,22 +265,51 @@ export default defineComponent({ ); }; - watch(() => props.columns, format, { immediate: true }); + watch( + () => props.columns, + () => { + const { columns } = props; - useExpose({ - confirm, - getValues, - setValues, - getIndexes, - setIndexes, - getColumnIndex, - setColumnIndex, - getColumnValue, - setColumnValue, - getColumnValues, - setColumnValues, + switch (dataType.value) { + case 'multiple': + currentColumns.value = columns; + break; + case 'cascade': + currentColumns.value = formatCascade(); + break; + default: + currentColumns.value = [columns]; + break; + } + + currentColumns.value.forEach((options, index) => { + if (selectedValues.value[index] === undefined && options.length) { + selectedValues.value[index] = options[0][valueKey]; + } + }); + + hasOptions.value = currentColumns.value.some( + (options) => !!options.length + ); + }, + { immediate: true } + ); + + watch( + () => props.modelValue, + (value) => { + selectedValues.value = value; + } + ); + + watch(selectedValues, () => { + if (selectedValues.value !== props.modelValue) { + emit('update:modelValue', selectedValues.value); + } }); + useExpose({ confirm }); + return () => (
{props.toolbarPosition === 'top' ? renderToolbar() : null} diff --git a/packages/vant/src/picker/PickerColumn.tsx b/packages/vant/src/picker/PickerColumn.tsx index 2768c8dd7..bed35b2f0 100644 --- a/packages/vant/src/picker/PickerColumn.tsx +++ b/packages/vant/src/picker/PickerColumn.tsx @@ -1,14 +1,10 @@ -import { ref, watch, reactive, defineComponent, type InjectionKey } from 'vue'; +import { ref, reactive, defineComponent, type InjectionKey, watch } from 'vue'; // Utils -import { deepClone } from '../utils/deep-clone'; import { clamp, - isObject, - unknownProp, numericProp, makeArrayProp, - makeNumberProp, preventDefault, createNamespace, makeRequiredProp, @@ -40,21 +36,18 @@ function getElementTranslateY(element: Element) { export const PICKER_KEY: InjectionKey = Symbol(name); -const isOptionDisabled = (option: PickerOption) => - isObject(option) && option.disabled; - export default defineComponent({ name, props: { + value: numericProp, textKey: makeRequiredProp(String), + options: makeArrayProp(), readonly: Boolean, + valueKey: makeRequiredProp(String), allowHtml: Boolean, - className: unknownProp, itemHeight: makeRequiredProp(Number), - defaultIndex: makeNumberProp(0), swipeDuration: makeRequiredProp(numericProp), - initialOptions: makeArrayProp(), visibleItemCount: makeRequiredProp(numericProp), }, @@ -70,15 +63,13 @@ export default defineComponent({ const wrapper = ref(); const state = reactive({ - index: props.defaultIndex, offset: 0, duration: 0, - options: deepClone(props.initialOptions), }); const touch = useTouch(); - const count = () => state.options.length; + const count = () => props.options.length; const baseOffset = () => (props.itemHeight * (+props.visibleItemCount - 1)) / 2; @@ -87,24 +78,22 @@ export default defineComponent({ index = clamp(index, 0, count()); for (let i = index; i < count(); i++) { - if (!isOptionDisabled(state.options[i])) return i; + if (!props.options[i].disabled) return i; } for (let i = index - 1; i >= 0; i--) { - if (!isOptionDisabled(state.options[i])) return i; + if (!props.options[i].disabled) return i; } + return 0; }; - const setIndex = (index: number, emitChange?: boolean) => { - index = adjustIndex(index) || 0; + const updateValueByIndex = (index: number) => { + index = adjustIndex(index); const offset = -index * props.itemHeight; const trigger = () => { - if (index !== state.index) { - state.index = index; - - if (emitChange) { - emit('change', index); - } + const { value } = props.options[index]; + if (value !== props.value) { + emit('change', value); } }; @@ -118,13 +107,6 @@ export default defineComponent({ state.offset = offset; }; - const setOptions = (options: PickerOption[]) => { - if (JSON.stringify(options) !== JSON.stringify(state.options)) { - state.options = deepClone(options); - setIndex(props.defaultIndex); - } - }; - const onClickItem = (index: number) => { if (moving || props.readonly) { return; @@ -132,14 +114,7 @@ export default defineComponent({ transitionEndTrigger = null; state.duration = DEFAULT_DURATION; - setIndex(index, true); - }; - - const getOptionText = (option: PickerOption) => { - if (isObject(option) && props.textKey in option) { - return option[props.textKey]; - } - return option; + updateValueByIndex(index); }; const getIndexByOffset = (offset: number) => @@ -153,7 +128,7 @@ export default defineComponent({ const index = getIndexByOffset(distance); state.duration = +props.swipeDuration; - setIndex(index, true); + updateValueByIndex(index); }; const stopMomentum = () => { @@ -230,10 +205,10 @@ export default defineComponent({ const index = getIndexByOffset(state.offset); state.duration = DEFAULT_DURATION; - setIndex(index, true); + updateValueByIndex(index); // compatible with desktop scenario - // use setTimeout to skip the click event Emitted after touchstart + // use setTimeout to skip the click event emitted after touchstart setTimeout(() => { moving = false; }, 0); @@ -244,17 +219,17 @@ export default defineComponent({ height: `${props.itemHeight}px`, }; - return state.options.map((option, index: number) => { - const text = getOptionText(option); - const disabled = isOptionDisabled(option); - + return props.options.map((option, index) => { + const text = option[props.textKey]; + const { disabled } = option; + const value: string | number = option[props.valueKey]; const data = { role: 'button', style: optionStyle, tabindex: disabled ? -1 : 0, class: bem('item', { disabled, - selected: index === state.index, + selected: value === props.value, }), onClick: () => onClickItem(index), }; @@ -272,39 +247,23 @@ export default defineComponent({ }); }; - const setValue = (value: string) => { - const { options } = state; - for (let i = 0; i < options.length; i++) { - if (getOptionText(options[i]) === value) { - return setIndex(i); - } - } - }; - - const getValue = (): PickerOption => state.options[state.index]; - - setIndex(state.index); - useParent(PICKER_KEY); - useExpose({ - state, - setIndex, - getValue, - setValue, - setOptions, - stopMomentum, - }); - - watch(() => props.initialOptions, setOptions); + useExpose({ stopMomentum }); watch( - () => props.defaultIndex, - (value) => setIndex(value) + () => props.value, + (value) => { + const index = props.options.findIndex( + (option) => option[props.valueKey] === value + ); + const offset = -adjustIndex(index) * props.itemHeight; + state.offset = offset; + } ); return () => (
{ - Toast(`Value: ${value}, Index: ${index}`); + const columns = [ + { text: 'Delaware', value: 'Delaware' }, + { text: 'Florida', value: 'Florida' }, + { text: 'Georqia', value: 'Georqia' }, + { text: 'Indiana', value: 'Indiana' }, + { text: 'Maine', value: 'Maine' }, + ]; + const onConfirm = (option, index) => { + Toast(`Value: ${option.value}, Index: ${index}`); }; - const onChange = (value, index) => { - Toast(`Value: ${value}, Index: ${index}`); + const onChange = (option, index) => { + Toast(`Value: ${option.value}, Index: ${index}`); }; const onCancel = () => Toast('Cancel'); @@ -55,12 +60,6 @@ export default { }; ``` -### Default Index - -```html - -``` - ### Multiple Columns ```html @@ -71,14 +70,18 @@ export default { export default { setup() { const columns = [ - { - values: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], - defaultIndex: 2, - }, - { - values: ['Morning', 'Afternoon', 'Evening'], - defaultIndex: 1, - }, + [ + { text: 'Monday', value: 'Monday' }, + { text: 'Tuesday', value: 'Tuesday' }, + { text: 'Wednesday', value: 'Wednesday' }, + { text: 'Thursday', value: 'Thursday' }, + { text: 'Friday', value: 'Friday' }, + ], + [ + { text: 'Morning', value: 'Morning' }, + { text: 'Afternoon', value: 'Afternoon' }, + { text: 'Evening', value: 'Evening' }, + ], ]; return { columns }; diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md index dca100c1e..5f59f2277 100644 --- a/packages/vant/src/picker/README.zh-CN.md +++ b/packages/vant/src/picker/README.zh-CN.md @@ -43,13 +43,21 @@ import { Toast } from 'vant'; export default { setup() { - const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华']; - - const onConfirm = (value, index) => { - Toast(`当前值: ${value}, 当前索引: ${index}`); + const columns = [ + { text: '杭州', value: 'Hangzhou' }, + { text: '宁波', value: 'Ningbo' }, + { text: '温州', value: 'Wenzhou' }, + { text: '绍兴', value: 'Shaoxing' }, + { text: '湖州', value: 'Huzhou' }, + { text: '嘉兴', value: 'Jiaxing' }, + { text: '金华', value: 'Jinhua' }, + { text: '衢州', value: 'Quzhou' }, + ]; + const onConfirm = (option, index) => { + Toast(`当前值: ${option.value}, 当前索引: ${index}`); }; - const onChange = (value, index) => { - Toast(`当前值: ${value}, 当前索引: ${index}`); + const onChange = (option, index) => { + Toast(`当前值: ${option.value}, 当前索引: ${index}`); }; const onCancel = () => Toast('取消'); @@ -63,17 +71,9 @@ export default { }; ``` -### 默认选中项 - -单列选择时，可以通过 `default-index` 属性设置初始选中项的索引。 - -```html - -``` - ### 多列选择 -`columns` 属性可以通过对象数组的形式配置多列选择，对象中可以配置选项数据、初始选中项等，详细格式见[下方表格](#/zh-CN/picker#column-shu-ju-jie-gou)。 +`columns` 属性可以通过二维数组的形式配置多列选择。 ```html @@ -84,15 +84,19 @@ export default { setup() { const columns = [ // 第一列 - { - values: ['周一', '周二', '周三', '周四', '周五'], - defaultIndex: 2, - }, + [ + { text: '周一', value: 'Monday' }, + { text: '周二', value: 'Tuesday' }, + { text: '周三', value: 'Wednesday' }, + { text: '周四', value: 'Thursday' }, + { text: '周五', value: 'Friday' }, + ], // 第二列 - { - values: ['上午', '下午', '晚上'], - defaultIndex: 1, - }, + [ + { text: '上午', value: 'Morning' }, + { text: '下午', value: 'Afternoon' }, + { text: '晚上', value: 'Evening' }, + ], ]; return { columns }; diff --git a/packages/vant/src/picker/demo/data.ts b/packages/vant/src/picker/demo/data.ts index cd9b0b803..1b2a57dc6 100644 --- a/packages/vant/src/picker/demo/data.ts +++ b/packages/vant/src/picker/demo/data.ts @@ -1,23 +1,51 @@ -export const dateColumns = { +export const basicColumns = { 'zh-CN': [ - { - values: ['周一', '周二', '周三', '周四', '周五'], - defaultIndex: 2, - }, - { - values: ['上午', '下午', '晚上'], - defaultIndex: 1, - }, + { text: '杭州', value: 'Hangzhou' }, + { text: '宁波', value: 'Ningbo' }, + { text: '温州', value: 'Wenzhou' }, + { text: '绍兴', value: 'Shaoxing' }, + { text: '湖州', value: 'Huzhou' }, + { text: '嘉兴', value: 'Jiaxing' }, + { text: '金华', value: 'Jinhua' }, + { text: '衢州', value: 'Quzhou' }, ], 'en-US': [ - { - values: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], - defaultIndex: 2, - }, - { - values: ['Morning', 'Afternoon', 'Evening'], - defaultIndex: 1, - }, + { text: 'Delaware', value: 'Delaware' }, + { text: 'Florida', value: 'Florida' }, + { text: 'Georqia', value: 'Georqia' }, + { text: 'Indiana', value: 'Indiana' }, + { text: 'Maine', value: 'Maine' }, + ], +}; + +export const dateColumns = { + 'zh-CN': [ + [ + { text: '周一', value: 'Monday' }, + { text: '周二', value: 'Tuesday' }, + { text: '周三', value: 'Wednesday' }, + { text: '周四', value: 'Thursday' }, + { text: '周五', value: 'Friday' }, + ], + [ + { text: '上午', value: 'Morning' }, + { text: '下午', value: 'Afternoon' }, + { text: '晚上', value: 'Evening' }, + ], + ], + 'en-US': [ + [ + { text: 'Monday', value: 'Monday' }, + { text: 'Tuesday', value: 'Tuesday' }, + { text: 'Wednesday', value: 'Wednesday' }, + { text: 'Thursday', value: 'Thursday' }, + { text: 'Friday', value: 'Friday' }, + ], + [ + { text: 'Morning', value: 'Morning' }, + { text: 'Afternoon', value: 'Afternoon' }, + { text: 'Evening', value: 'Evening' }, + ], ], }; @@ -25,27 +53,45 @@ export const cascadeColumns = { 'zh-CN': [ { text: '浙江', + value: 'Zhejiang', children: [ { text: '杭州', - children: [{ text: '西湖区' }, { text: '余杭区' }], + value: 'Hangzhou', + children: [ + { text: '西湖区', value: 'Xihu' }, + { text: '余杭区', value: 'Yuhang' }, + ], }, { text: '温州', - children: [{ text: '鹿城区' }, { text: '瓯海区' }], + value: 'Wenzhou', + children: [ + { text: '鹿城区', value: 'Lucheng' }, + { text: '瓯海区', value: 'Ouhai' }, + ], }, ], }, { text: '福建', + value: 'Fujian', children: [ { text: '福州', - children: [{ text: '鼓楼区' }, { text: '台江区' }], + value: 'Fuzhou', + children: [ + { text: '鼓楼区', value: 'Gulou' }, + { text: '台江区', value: 'Taijiang' }, + ], }, { text: '厦门', - children: [{ text: '思明区' }, { text: '海沧区' }], + value: 'Xiamen', + children: [ + { text: '思明区', value: 'Siming' }, + { text: '海沧区', value: 'Haicang' }, + ], }, ], }, @@ -53,27 +99,45 @@ export const cascadeColumns = { 'en-US': [ { text: 'Zhejiang', + value: 'Zhejiang', children: [ { text: 'Hangzhou', - children: [{ text: 'Xihu' }, { text: 'Yuhang' }], + value: 'Hangzhou', + children: [ + { text: 'Xihu', value: 'Xihu' }, + { text: 'Yuhang', value: 'Yuhang' }, + ], }, { text: 'Wenzhou', - children: [{ text: 'Lucheng' }, { text: 'Ouhai' }], + value: 'Wenzhou', + children: [ + { text: 'Lucheng', value: 'Lucheng' }, + { text: 'Ouhai', value: 'Ouhai' }, + ], }, ], }, { text: 'Fujian', + value: 'Fujian', children: [ { text: 'Fuzhou', - children: [{ text: 'Gulou' }, { text: 'Taijiang' }], + value: 'Fuzhou', + children: [ + { text: 'Gulou', value: 'Gulou' }, + { text: 'Taijiang', value: 'Taijiang' }, + ], }, { text: 'Xiamen', - children: [{ text: 'Siming' }, { text: 'Haicang' }], + value: 'Xiamen', + children: [ + { text: 'Siming', value: 'Siming' }, + { text: 'Haicang', value: 'Haicang' }, + ], }, ], }, diff --git a/packages/vant/src/picker/demo/index.vue b/packages/vant/src/picker/demo/index.vue index b90e41ee1..91a78e7ba 100644 --- a/packages/vant/src/picker/demo/index.vue +++ b/packages/vant/src/picker/demo/index.vue @@ -1,11 +1,17 @@ + + diff --git a/packages/vant/src/picker/demo/index.vue b/packages/vant/src/picker/demo/index.vue index 91a78e7ba..6215cefb1 100644 --- a/packages/vant/src/picker/demo/index.vue +++ b/packages/vant/src/picker/demo/index.vue @@ -1,123 +1,66 @@ From f436b5ae09af3f3ff8a5d21105ad0ff85cd48ff7 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 19 Jan 2022 14:09:39 +0800 Subject: [PATCH 010/170] docs: update migration guide --- .../docs/markdown/migrate-from-v3.zh-CN.md | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) 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 c4ad4af85..29f2a3963 100644 --- a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md +++ b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md @@ -4,22 +4,28 @@ 本文档提供了从 Vant 3 到 Vant 4 的升级指南。 -### 为什么会有 Vant 4.0 ？ +## API 调整 -为了支持 **暗色模式**，我们对 Vant 中的 **样式变量** 进行了一些不兼容更新，因此发布了新的大版本。 +### Picker 组件重构 -如果你的项目没有使用主题定制，那样式变量的调整对你没有任何影响，只需要花几分钟去适配 API 调整，即可完成升级。 +在之前的版本中，Picker 组件的 API 设计存在较大问题，比如： -如果你的项目使用了主题定制，请完整阅读此文档，并进行迁移。 +- columns 数据格式定义不合理，容易产生误解 +- 数据流不清晰，暴露了过多的实例方法来对数据进行操作 -### API 调整 +为了解决上述问题，我们在 v4 版本中对 Picker 组件进行了重构（同时也影响 Area 和 DatetimePicker 组件）。 -4.0 版本对少量 API 进行了不兼容调整： +#### 主要变更 -#### Picker +- 重新定义了 `columns` 属性的结构 +- 移除了所有操作内部数据的实例方法 +- 调整了 `confirm`、`cancel`、`change` 事件的参数 +- 重命名 `item-height` 属性为 `option-height` +- 重命名 `visible-item-count` 属性为 `visible-option-num` -- `default` 插槽重命名为 `toolbar` -- 移除了 `value-key` 属性，使用 `columnsFieldNames` 属性代替 +### 其他 API 调整 + +4.0 版本中，以下 API 进行了不兼容更新： #### Tabs From d16075f39efbd7aeed4feab08cd4587bc73eb54c Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 19 Jan 2022 14:21:39 +0800 Subject: [PATCH 011/170] fix(Picker): option.className not work --- packages/vant/src/picker/PickerColumn.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/vant/src/picker/PickerColumn.tsx b/packages/vant/src/picker/PickerColumn.tsx index ceafb27f0..bd4ad6a84 100644 --- a/packages/vant/src/picker/PickerColumn.tsx +++ b/packages/vant/src/picker/PickerColumn.tsx @@ -213,10 +213,13 @@ export default defineComponent({ role: 'button', style: optionStyle, tabindex: disabled ? -1 : 0, - class: bem('item', { - disabled, - selected: value === props.value, - }), + class: [ + bem('item', { + disabled, + selected: value === props.value, + }), + option.className, + ], onClick: () => onClickItem(index), }; From cc10eb1f2adddc5a6d34336669b85a8a571c1803 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 19 Jan 2022 14:26:57 +0800 Subject: [PATCH 012/170] docs(Picker): new document --- .../docs/markdown/migrate-from-v3.zh-CN.md | 1 + packages/vant/src/picker/Picker.tsx | 1 - packages/vant/src/picker/README.md | 242 ++++++++--------- packages/vant/src/picker/README.zh-CN.md | 251 ++++++++---------- packages/vant/src/picker/demo/data.ts | 3 - 5 files changed, 222 insertions(+), 276 deletions(-) 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 29f2a3963..e96736244 100644 --- a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md +++ b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md @@ -17,6 +17,7 @@ #### 主要变更 +- 支持通过 `v-model` 绑定当前选中的值，移除 `default-index` 属性 - 重新定义了 `columns` 属性的结构 - 移除了所有操作内部数据的实例方法 - 调整了 `confirm`、`cancel`、`change` 事件的参数 diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index a0e606114..7f7574260 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -61,7 +61,6 @@ export const pickerSharedProps = { const pickerProps = extend({}, pickerSharedProps, { columns: makeArrayProp(), modelValue: makeArrayProp(), - defaultIndex: makeNumericProp(0), toolbarPosition: makeStringProp('top'), columnsFieldNames: Object as PropType, }); diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md index c14a0da58..cff22077b 100644 --- a/packages/vant/src/picker/README.md +++ b/packages/vant/src/picker/README.md @@ -42,11 +42,11 @@ export default { { text: 'Indiana', value: 'Indiana' }, { text: 'Maine', value: 'Maine' }, ]; - const onConfirm = (option, index) => { - Toast(`Value: ${option.value}, Index: ${index}`); + const onConfirm = ({ selectedValues }) => { + Toast(`Value: ${selectedValues.join(',')}`); }; - const onChange = (option, index) => { - Toast(`Value: ${option.value}, Index: ${index}`); + const onChange = ({ selectedValues }) => { + Toast(`Value: ${selectedValues.join(',')}`); }; const onCancel = () => Toast('Cancel'); @@ -60,6 +60,57 @@ export default { }; ``` +### With Popup + +```html + + + + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const columns = [ + { text: 'Delaware', value: 'Delaware' }, + { text: 'Florida', value: 'Florida' }, + { text: 'Georqia', value: 'Georqia' }, + { text: 'Indiana', value: 'Indiana' }, + { text: 'Maine', value: 'Maine' }, + ]; + const result = ref(''); + const showPicker = ref(false); + + const onConfirm = ({ selectedOptions }) => { + showPicker.value = false; + fieldValue.value = selectedOptions[0].text; + }; + + return { + result, + columns, + onConfirm, + showPicker, + }; + }, +}; +``` + ### Multiple Columns ```html @@ -101,27 +152,45 @@ export default { const columns = [ { text: 'Zhejiang', + value: 'Zhejiang', children: [ { text: 'Hangzhou', - children: [{ text: 'Xihu' }, { text: 'Yuhang' }], + value: 'Hangzhou', + children: [ + { text: 'Xihu', value: 'Xihu' }, + { text: 'Yuhang', value: 'Yuhang' }, + ], }, { text: 'Wenzhou', - children: [{ text: 'Lucheng' }, { text: 'Ouhai' }], + value: 'Wenzhou', + children: [ + { text: 'Lucheng', value: 'Lucheng' }, + { text: 'Ouhai', value: 'Ouhai' }, + ], }, ], }, { text: 'Fujian', + value: 'Fujian', children: [ { text: 'Fuzhou', - children: [{ text: 'Gulou' }, { text: 'Taijiang' }], + value: 'Fuzhou', + children: [ + { text: 'Gulou', value: 'Gulou' }, + { text: 'Taijiang', value: 'Taijiang' }, + ], }, { text: 'Xiamen', - children: [{ text: 'Siming' }, { text: 'Haicang' }], + value: 'Xiamen', + children: [ + { text: 'Siming', value: 'Siming' }, + { text: 'Haicang', value: 'Haicang' }, + ], }, ], }, @@ -142,51 +211,15 @@ export default { export default { setup() { const columns = [ - { text: 'Delaware', disabled: true }, - { text: 'Florida' }, - { text: 'Georqia' }, + { text: 'Delaware', value: 'Delaware', disabled: true }, + { text: 'Florida', value: 'Florida' }, + { text: 'Georqia', value: 'Georqia' }, ]; - return { columns }; }, }; ``` -### Set Column Values - -```html - -``` - -```js -import { ref } from 'vue'; - -export default { - setup() { - const picker = ref(null); - - const states = { - Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], - Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'], - }; - const columns = [ - { values: Object.keys(states) }, - { values: states.Group1 }, - ]; - - const onChange = (values) => { - picker.value.setColumnValues(1, states[values[0]]); - }; - - return { - picker, - columns, - onChange, - }; - }, -}; -``` - ### Loading When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt. @@ -204,7 +237,7 @@ export default { const loading = ref(true); setTimeout(() => { - columns.value = ['Option']; + columns.value = [{ text: 'Option', value: 'option' }]; loading.value = false; }, 1000); @@ -213,51 +246,6 @@ export default { }; ``` -### With Popup - -```html - - - - -``` - -```js -import { ref } from 'vue'; - -export default { - setup() { - const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']; - const result = ref(''); - const showPicker = ref(false); - - const onConfirm = (value) => { - result.value = value; - showPicker.value = false; - }; - - return { - result, - columns, - onConfirm, - showPicker, - }; - }, -}; -``` - ### Custom Columns Field ```html @@ -302,6 +290,7 @@ export default { const customFieldName = { text: 'cityName', + value: 'cityName', children: 'cities', }; @@ -319,8 +308,8 @@ export default { | Attribute | Description | Type | Default | | --- | --- | --- | --- | -| columns | Columns data | _Column[]_ | `[]` | -| columns-field-names | custom columns field | _object_ | `{ text: 'text', values: 'values', children: 'children' }` | +| columns | Columns data | _PickerOption[] \| PickerOption[][]_ | `[]` | +| columns-field-names | custom columns field | _object_ | `{ text: 'text', value: 'value', children: 'children' }` | | title | Toolbar title | _string_ | - | | confirm-button-text | Text of confirm button | _string_ | `Confirm` | | cancel-button-text | Text of cancel button | _string_ | `Cancel` | @@ -328,59 +317,47 @@ export default { | loading | Whether to show loading prompt | _boolean_ | `false` | | show-toolbar | Whether to show toolbar | _boolean_ | `true` | | allow-html | Whether to allow HTML in option text | _boolean_ | `false` | -| default-index | Default value index of single column picker | _number \| string_ | `0` | | option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` | | visible-option-num | Count of visible columns | _number \| string_ | `6` | | swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` | ### Events -Picker events will pass different parameters according to the columns are single or multiple - | Event | Description | Arguments | | --- | --- | --- | -| confirm | Emitted when click confirm button | Single column：current value，current index
Multiple columns：current values，current indexes | -| cancel | Emitted when click cancel button | Single column：current value，current index
Multiple columns：current values，current indexes | -| change | Emitted when current option changed | Single column：Picker instance, current value，current index
Multiple columns：Picker instance, current values，column index | +| confirm | Emitted when click confirm button | _{ selectedValues, selectedOptions }_ | +| cancel | Emitted when click cancel button | _{ selectedValues, selectedOptions }_ | +| change | Emitted when current option changed | _{ selectedValues, selectedOptions, columnIndex }_ | ### Slots -| Name | Description | SlotProps | -| --------------- | ---------------------------- | -------------------------- | -| toolbar `3.1.2` | Custom toolbar content | - | -| title | Custom title | - | -| confirm | Custom confirm button text | - | -| cancel | Custom cancel button text | - | -| option | Custom option content | _option: string \| object_ | -| columns-top | Custom content above columns | - | -| columns-bottom | Custom content below columns | - | +| Name | Description | SlotProps | +| --------------- | ---------------------------- | ---------------------- | +| toolbar `3.1.2` | Custom toolbar content | - | +| title | Custom title | - | +| confirm | Custom confirm button text | - | +| cancel | Custom cancel button text | - | +| option | Custom option content | _option: PickerOption_ | +| columns-top | Custom content above columns | - | +| columns-bottom | Custom content below columns | - | -### Data Structure of Column +### Data Structure of PickerOption -| Key | Description | Type | -| ------------ | ------------------------- | --------------------------- | -| values | Value of column | _Array_ | -| defaultIndex | Default value index | _number_ | -| className | ClassName for this column | _string \| Array \| object_ | -| children | Cascade children | _Column_ | +| Key | Description | Type | +| --------- | ------------------------- | --------------------------- | +| text | Text | _string \| number_ | +| value | Value of option | _string \| number_ | +| disabled | Whether to disable option | _boolean_ | +| children | Cascade children options | _PickerOption[]_ | +| className | ClassName for this option | _string \| Array \| object_ | ### Methods Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Picker instance and call instance methods. -| Name | Description | Attribute | Return value | -| --- | --- | --- | --- | -| getValues | Get current values of all columns | - | values | -| setValues | Set current values of all columns | values | - | -| getIndexes | Get current indexes of all columns | - | indexes | -| setIndexes | Set current indexes of all columns | indexes | - | -| getColumnValue | Get current value of the column | columnIndex | value | -| setColumnValue | Set current value of the column | columnIndex, value | - | -| getColumnIndex | Get current index of the column | columnIndex | optionIndex | -| setColumnIndex | Set current index of the column | columnIndex, optionIndex | - | -| getColumnValues | Get columns data of the column | columnIndex | values | -| setColumnValues | Set columns data of the column | columnIndex, values | - | -| confirm | Stop scrolling and emit confirm event | - | - | +| Name | Description | Attribute | Return value | +| ------- | ------------------------------------- | --------- | ------------ | +| confirm | Stop scrolling and emit confirm event | - | - | ### Types @@ -393,9 +370,10 @@ import type { PickerOption, PickerInstance, PickerFieldNames, - PickerObjectColumn, - PickerObjectOption, PickerToolbarPosition, + PickerCancelEventParams, + PickerChangeEventParams, + PickerConfirmEventParams, } from 'vant'; ``` diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md index 187a7ab29..e38f16927 100644 --- a/packages/vant/src/picker/README.zh-CN.md +++ b/packages/vant/src/picker/README.zh-CN.md @@ -49,15 +49,12 @@ export default { { text: '温州', value: 'Wenzhou' }, { text: '绍兴', value: 'Shaoxing' }, { text: '湖州', value: 'Huzhou' }, - { text: '嘉兴', value: 'Jiaxing' }, - { text: '金华', value: 'Jinhua' }, - { text: '衢州', value: 'Quzhou' }, ]; - const onConfirm = (option, index) => { - Toast(`当前值: ${option.value}, 当前索引: ${index}`); + const onConfirm = ({ selectedValues }) => { + Toast(`当前值: ${selectedValues.join(',')}`); }; - const onChange = (option, index) => { - Toast(`当前值: ${option.value}, 当前索引: ${index}`); + const onChange = ({ selectedValues }) => { + Toast(`当前值: ${selectedValues.join(',')}`); }; const onCancel = () => Toast('取消'); @@ -71,6 +68,58 @@ export default { }; ``` +### 搭配弹出层使用 + +在实际场景中，Picker 通常作为用于辅助表单填写，可以搭配 Popup 和 Field 实现该效果。 + +```html + + + + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const columns = [ + { text: '杭州', value: 'Hangzhou' }, + { text: '宁波', value: 'Ningbo' }, + { text: '温州', value: 'Wenzhou' }, + { text: '绍兴', value: 'Shaoxing' }, + { text: '湖州', value: 'Huzhou' }, + ]; + const result = ref(''); + const showPicker = ref(false); + + const onConfirm = ({ selectedOptions }) => { + showPicker.value = false; + fieldValue.value = selectedOptions[0].text; + }; + + return { + result, + columns, + onConfirm, + showPicker, + }; + }, +}; +``` + ### 多列选择 `columns` 属性可以通过二维数组的形式配置多列选择。 @@ -118,27 +167,45 @@ export default { const columns = [ { text: '浙江', + value: 'Zhejiang', children: [ { text: '杭州', - children: [{ text: '西湖区' }, { text: '余杭区' }], + value: 'Hangzhou', + children: [ + { text: '西湖区', value: 'Xihu' }, + { text: '余杭区', value: 'Yuhang' }, + ], }, { text: '温州', - children: [{ text: '鹿城区' }, { text: '瓯海区' }], + value: 'Wenzhou', + children: [ + { text: '鹿城区', value: 'Lucheng' }, + { text: '瓯海区', value: 'Ouhai' }, + ], }, ], }, { text: '福建', + value: 'Fujian', children: [ { text: '福州', - children: [{ text: '鼓楼区' }, { text: '台江区' }], + value: 'Fuzhou', + children: [ + { text: '鼓楼区', value: 'Gulou' }, + { text: '台江区', value: 'Taijiang' }, + ], }, { text: '厦门', - children: [{ text: '思明区' }, { text: '海沧区' }], + value: 'Xiamen', + children: [ + { text: '思明区', value: 'Siming' }, + { text: '海沧区', value: 'Haicang' }, + ], }, ], }, @@ -163,53 +230,15 @@ export default { export default { setup() { const columns = [ - { text: '杭州', disabled: true }, - { text: '宁波' }, - { text: '温州' }, + { text: '杭州', value: 'Hangzhou', disabled: true }, + { text: '宁波', value: 'Ningbo' }, + { text: '温州', value: 'Wenzhou' }, ]; - return { columns }; }, }; ``` -### 动态设置选项 - -通过 Picker 上的实例方法可以更灵活地控制选择器，比如使用 `setColumnValues` 方法实现多列联动。 - -```html - -``` - -```js -import { ref } from 'vue'; - -export default { - setup() { - const picker = ref(null); - - const cities = { - 浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'], - 福建: ['福州', '厦门', '莆田', '三明', '泉州'], - }; - const columns = [ - { values: Object.keys(cities) }, - { values: cities['浙江'] }, - ]; - - const onChange = (values) => { - picker.value.setColumnValues(1, cities[values[0]]); - }; - - return { - picker, - columns, - onChange, - }; - }, -}; -``` - ### 加载状态 若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示。 @@ -227,7 +256,7 @@ export default { const loading = ref(true); setTimeout(() => { - columns.value = ['选项']; + columns.value = [{ text: '选项', value: 'option' }]; loading.value = false; }, 1000); @@ -236,52 +265,6 @@ export default { }; ``` -### 搭配弹出层使用 - -在实际场景中，Picker 通常作为用于辅助表单填写，可以搭配 Popup 和 Field 实现该效果。 - -```html - - - - -``` - -```js -import { ref } from 'vue'; - -export default { - setup() { - const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华']; - const result = ref(''); - const showPicker = ref(false); - - const onConfirm = (value) => { - result.value = value; - showPicker.value = false; - }; - - return { - result, - columns, - onConfirm, - showPicker, - }; - }, -}; -``` - ### 自定义 Columns 的结构 ```html @@ -326,6 +309,7 @@ export default { const customFieldName = { text: 'cityName', + value: 'cityName', children: 'cities', }; @@ -343,8 +327,8 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| columns | 对象数组，配置每一列显示的数据 | _Column[]_ | `[]` | -| columns-field-names | 自定义 `columns` 结构中的字段 | _object_ | `{ text: 'text', values: 'values', children: 'children' }` | +| columns | 对象数组，配置每一列显示的数据 | _PickerOption[] \| PickerOption[][]_ | `[]` | +| columns-field-names | 自定义 `columns` 结构中的字段 | _object_ | `{ text: 'text', value: 'value', children: 'children' }` | | title | 顶部栏标题 | _string_ | - | | confirm-button-text | 确认按钮文字 | _string_ | `确认` | | cancel-button-text | 取消按钮文字 | _string_ | `取消` | @@ -352,61 +336,47 @@ export default { | loading | 是否显示加载状态 | _boolean_ | `false` | | show-toolbar | 是否显示顶部栏 | _boolean_ | `true` | | allow-html | 是否允许选项内容中渲染 HTML | _boolean_ | `false` | -| default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` | | option-height | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` | | visible-option-num | 可见的选项个数 | _number \| string_ | `6` | | swipe-duration | 快速滑动时惯性滚动的时长，单位 `ms` | _number \| string_ | `1000` | ### Events -当选择器有多列时，事件回调参数会返回数组。 - | 事件名 | 说明 | 回调参数 | | --- | --- | --- | -| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引 | -| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引 | -| change | 选项改变时触发 | 单列：选中值，选中值对应的索引
多列：所有列选中值，当前列对应的索引 | +| confirm | 点击完成按钮时触发 | _{ selectedValues, selectedOptions }_ | +| cancel | 点击取消按钮时触发 | _{ selectedValues, selectedOptions }_ | +| change | 选项改变时触发 | _{ selectedValues, selectedOptions, columnIndex }_ | ### Slots -| 名称 | 说明 | 参数 | -| ---------------- | ---------------------- | -------------------------- | -| toolbar `v3.1.2` | 自定义整个顶部栏的内容 | - | -| title | 自定义标题内容 | - | -| confirm | 自定义确认按钮内容 | - | -| cancel | 自定义取消按钮内容 | - | -| option | 自定义选项内容 | _option: string \| object_ | -| columns-top | 自定义选项上方内容 | - | -| columns-bottom | 自定义选项下方内容 | - | +| 名称 | 说明 | 参数 | +| ---------------- | ---------------------- | ---------------------- | +| toolbar `v3.1.2` | 自定义整个顶部栏的内容 | - | +| title | 自定义标题内容 | - | +| confirm | 自定义确认按钮内容 | - | +| cancel | 自定义取消按钮内容 | - | +| option | 自定义选项内容 | _option: PickerOption_ | +| columns-top | 自定义选项上方内容 | - | +| columns-bottom | 自定义选项下方内容 | - | -### Column 数据结构 +### PickerOption 数据结构 -当传入多列数据时，`columns` 为一个对象数组，数组中的每一个对象配置每一列，每一列有以下 `key`: - -| 键名 | 说明 | 类型 | -| ------------ | -------------------------- | --------------------------- | -| values | 列中对应的备选值 | _Array_ | -| defaultIndex | 初始选中项的索引，默认为 0 | _number_ | -| className | 为对应列添加额外的类名 | _string \| Array \| object_ | -| children | 级联选项 | _Column_ | +| 键名 | 说明 | 类型 | +| --------- | ------------ | --------------------------- | +| text | 选项文字内容 | _string \| number_ | +| value | 选项对应的值 | _string \| number_ | +| disabled | 是否禁用选项 | _boolean_ | +| children | 级联选项 | _PickerOption[]_ | +| className | 选项额外类名 | _string \| Array \| object_ | ### 方法 通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 -| 方法名 | 说明 | 参数 | 返回值 | -| --- | --- | --- | --- | -| getValues | 获取所有列选中的值 | - | values | -| setValues | 设置所有列选中的值 | values | - | -| getIndexes | 获取所有列选中值对应的索引 | - | indexes | -| setIndexes | 设置所有列选中值对应的索引 | indexes | - | -| getColumnValue | 获取对应列选中的值 | columnIndex | value | -| setColumnValue | 设置对应列选中的值 | columnIndex, value | - | -| getColumnIndex | 获取对应列选中项的索引 | columnIndex | optionIndex | -| setColumnIndex | 设置对应列选中项的索引 | columnIndex, optionIndex | - | -| getColumnValues | 获取对应列中所有选项 | columnIndex | values | -| setColumnValues | 设置对应列中所有选项 | columnIndex, values | - | -| confirm | 停止惯性滚动并触发 confirm 事件 | - | - | +| 方法名 | 说明 | 参数 | 返回值 | +| ------- | --------------------------------- | ---- | ------ | +| confirm | 停止惯性滚动并触发 `confirm` 事件 | - | - | ### 类型定义 @@ -419,9 +389,10 @@ import type { PickerOption, PickerInstance, PickerFieldNames, - PickerObjectColumn, - PickerObjectOption, PickerToolbarPosition, + PickerCancelEventParams, + PickerChangeEventParams, + PickerConfirmEventParams, } from 'vant'; ``` diff --git a/packages/vant/src/picker/demo/data.ts b/packages/vant/src/picker/demo/data.ts index 24caf3de9..f89e1e72b 100644 --- a/packages/vant/src/picker/demo/data.ts +++ b/packages/vant/src/picker/demo/data.ts @@ -5,9 +5,6 @@ export const basicColumns = { { text: '温州', value: 'Wenzhou' }, { text: '绍兴', value: 'Shaoxing' }, { text: '湖州', value: 'Huzhou' }, - { text: '嘉兴', value: 'Jiaxing' }, - { text: '金华', value: 'Jinhua' }, - { text: '衢州', value: 'Quzhou' }, ], 'en-US': [ { text: 'Delaware', value: 'Delaware' }, From 4ee1a3d766b28036aa655cb86a0a468d91ead733 Mon Sep 17 00:00:00 2001 From: zoy-l <409626581@qq.com> Date: Wed, 19 Jan 2022 15:48:19 +0800 Subject: [PATCH 013/170] fix(vant-cli): pnpm compatibility (#10214) * fix(vant-cli): pnpm compatibility * chore: clean code, semantic naming --- packages/vant-cli/src/common/constant.ts | 6 +- .../vant-cli/src/compiler/compile-site.ts | 15 +---- .../src/compiler/gen-package-style.ts | 10 ++- .../src/compiler/gen-site-desktop-shared.ts | 4 +- .../src/compiler/gen-site-mobile-shared.ts | 7 +-- packages/vant-cli/src/config/vite.site.ts | 61 ++++++++++++++----- 6 files changed, 62 insertions(+), 41 deletions(-) diff --git a/packages/vant-cli/src/common/constant.ts b/packages/vant-cli/src/common/constant.ts index 229177a08..ff9f7ec8e 100644 --- a/packages/vant-cli/src/common/constant.ts +++ b/packages/vant-cli/src/common/constant.ts @@ -36,11 +36,7 @@ export const SITE_SRC_DIR = join(__dirname, '..', '..', 'site'); // Dist files export const PACKAGE_ENTRY_FILE = join(DIST_DIR, 'package-entry.js'); export const PACKAGE_STYLE_FILE = join(DIST_DIR, 'package-style.css'); -export const SITE_MOBILE_SHARED_FILE = join(DIST_DIR, 'site-mobile-shared.js'); -export const SITE_DESKTOP_SHARED_FILE = join( - DIST_DIR, - 'site-desktop-shared.js' -); + export const STYLE_DEPS_JSON_FILE = join(DIST_DIR, 'style-deps.json'); // Config files diff --git a/packages/vant-cli/src/compiler/compile-site.ts b/packages/vant-cli/src/compiler/compile-site.ts index 151d1827f..5e58c30da 100644 --- a/packages/vant-cli/src/compiler/compile-site.ts +++ b/packages/vant-cli/src/compiler/compile-site.ts @@ -5,27 +5,18 @@ import { getViteConfigForSiteDev, getViteConfigForSiteProd, } from '../config/vite.site.js'; -import { mergeCustomViteConfig, replaceExt } from '../common/index.js'; -import { CSS_LANG } from '../common/css.js'; +import { mergeCustomViteConfig } from '../common/index.js'; import { genPackageEntry } from './gen-package-entry.js'; -import { genPackageStyle } from './gen-package-style.js'; -import { genSiteMobileShared } from './gen-site-mobile-shared.js'; -import { genSiteDesktopShared } from './gen-site-desktop-shared.js'; import { genStyleDepsMap } from './gen-style-deps-map.js'; -import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant.js'; +import { PACKAGE_ENTRY_FILE } from '../common/constant.js'; -export async function genSiteEntry(): Promise { +export function genSiteEntry(): Promise { return new Promise((resolve, reject) => { genStyleDepsMap() .then(() => { genPackageEntry({ outputPath: PACKAGE_ENTRY_FILE, }); - genPackageStyle({ - outputPath: replaceExt(PACKAGE_STYLE_FILE, `.${CSS_LANG}`), - }); - genSiteMobileShared(); - genSiteDesktopShared(); resolve(); }) .catch((err) => { diff --git a/packages/vant-cli/src/compiler/gen-package-style.ts b/packages/vant-cli/src/compiler/gen-package-style.ts index 1f0b0426c..fdb62612e 100644 --- a/packages/vant-cli/src/compiler/gen-package-style.ts +++ b/packages/vant-cli/src/compiler/gen-package-style.ts @@ -6,11 +6,11 @@ import { CSS_LANG, getCssBaseFile } from '../common/css.js'; import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js'; type Options = { - outputPath: string; + outputPath?: string; pathResolver?: (path: string) => string; }; -export function genPackageStyle(options: Options) { +export function genPackageStyle(options: Options = {}) { const require = createRequire(import.meta.url); const styleDepsJson = require(STYLE_DEPS_JSON_FILE); const ext = '.' + CSS_LANG; @@ -43,5 +43,9 @@ export function genPackageStyle(options: Options) { .filter((item: string) => !!item) .join('\n'); - smartOutputFile(options.outputPath, content); + if (options.outputPath) { + smartOutputFile(options.outputPath, content); + } else { + return content; + } } diff --git a/packages/vant-cli/src/compiler/gen-site-desktop-shared.ts b/packages/vant-cli/src/compiler/gen-site-desktop-shared.ts index 11f1c370b..c37375639 100644 --- a/packages/vant-cli/src/compiler/gen-site-desktop-shared.ts +++ b/packages/vant-cli/src/compiler/gen-site-desktop-shared.ts @@ -5,7 +5,6 @@ import { isDev, pascalize, getVantConfig, - smartOutputFile, normalizePath, } from '../common/index.js'; import { @@ -13,7 +12,6 @@ import { DOCS_DIR, getPackageJson, VANT_CONFIG_FILE, - SITE_DESKTOP_SHARED_FILE, } from '../common/constant.js'; type DocumentItem = { @@ -122,5 +120,5 @@ ${genExportDocuments(documents)} ${genExportVersion()} `; - smartOutputFile(SITE_DESKTOP_SHARED_FILE, code); + return code; } diff --git a/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts b/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts index 9ab63362b..c6a9bf874 100644 --- a/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts +++ b/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts @@ -1,12 +1,11 @@ import { join } from 'path'; import { existsSync, readdirSync } from 'fs'; -import { SRC_DIR, SITE_MOBILE_SHARED_FILE } from '../common/constant.js'; +import { SRC_DIR } from '../common/constant.js'; import { pascalize, removeExt, decamelize, getVantConfig, - smartOutputFile, normalizePath, } from '../common/index.js'; import { CSS_LANG } from '../common/css.js'; @@ -68,7 +67,7 @@ function genCode(components: string[]) { })) .filter((item) => existsSync(item.path)); - return `import './package-style.${CSS_LANG}'; + return `import 'package-style.${CSS_LANG}'; ${genImports(demos)} ${genExports(demos)} @@ -80,5 +79,5 @@ export function genSiteMobileShared() { const dirs = readdirSync(SRC_DIR); const code = genCode(dirs); - smartOutputFile(SITE_MOBILE_SHARED_FILE, code); + return code; } diff --git a/packages/vant-cli/src/config/vite.site.ts b/packages/vant-cli/src/config/vite.site.ts index f883904ed..f3921ac4d 100644 --- a/packages/vant-cli/src/config/vite.site.ts +++ b/packages/vant-cli/src/config/vite.site.ts @@ -5,15 +5,14 @@ import vitePluginMd from 'vite-plugin-md'; import vitePluginVue from '@vitejs/plugin-vue'; import vitePluginJsx from '@vitejs/plugin-vue-jsx'; import { setBuildTarget, getVantConfig, isDev } from '../common/index.js'; -import { - SITE_DIST_DIR, - SITE_MOBILE_SHARED_FILE, - SITE_DESKTOP_SHARED_FILE, - SITE_SRC_DIR, -} from '../common/constant.js'; +import { SITE_DIST_DIR, SITE_SRC_DIR } from '../common/constant.js'; import { injectHtml } from 'vite-plugin-html'; -import type { InlineConfig } from 'vite'; +import type { InlineConfig, PluginOption } from 'vite'; import type MarkdownIt from 'markdown-it'; +import { genSiteMobileShared } from '../compiler/gen-site-mobile-shared.js'; +import { genSiteDesktopShared } from '../compiler/gen-site-desktop-shared.js'; +import { genPackageStyle } from '../compiler/gen-package-style.js'; +import { CSS_LANG } from '../common/css.js'; function markdownHighlight(str: string, lang: string) { if (lang && hljs.getLanguage(lang)) { @@ -92,6 +91,46 @@ function getHTMLMeta(vantConfig: any) { return ''; } +function vitePluginGenVantBaseCode(): PluginOption { + const virtualMobileModuleId = 'site-mobile-shared'; + const resolvedMobileVirtualModuleId = `vant-cli:${virtualMobileModuleId}`; + + const virtualDesktopModuleId = 'site-desktop-shared'; + const resolvedDesktopVirtualModuleId = `vant-cli:${virtualDesktopModuleId}`; + + const virtualPackageStyleModuleId = /package-style/; + const resolvedPackageStyleVirtualModuleId = `vant-cli${virtualPackageStyleModuleId}index.${CSS_LANG}`; + + return { + name: 'vite-plugin(vant-cli):gen-site-base-code', + resolveId(id) { + if (id === virtualMobileModuleId) { + return resolvedMobileVirtualModuleId; + } + + if (id === virtualDesktopModuleId) { + return resolvedDesktopVirtualModuleId; + } + + if (virtualPackageStyleModuleId.test(id)) { + return resolvedPackageStyleVirtualModuleId; + } + }, + load(id) { + switch (id) { + case resolvedMobileVirtualModuleId: + return genSiteMobileShared(); + case resolvedDesktopVirtualModuleId: + return genSiteDesktopShared(); + case resolvedPackageStyleVirtualModuleId: + return genPackageStyle(); + default: + break; + } + }, + }; +} + export function getViteConfigForSiteDev(): InlineConfig { setBuildTarget('site'); @@ -105,6 +144,7 @@ export function getViteConfigForSiteDev(): InlineConfig { root: SITE_SRC_DIR, plugins: [ + vitePluginGenVantBaseCode(), vitePluginVue({ include: [/\.vue$/, /\.md$/], }), @@ -145,13 +185,6 @@ export function getViteConfigForSiteDev(): InlineConfig { }), ], - resolve: { - alias: { - 'site-mobile-shared': SITE_MOBILE_SHARED_FILE, - 'site-desktop-shared': SITE_DESKTOP_SHARED_FILE, - }, - }, - server: { host: '0.0.0.0', }, From e93ae7b430afac7f431af23e334eaf0bf17a9e9d Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 19 Jan 2022 15:52:45 +0800 Subject: [PATCH 014/170] release: @vant/cli 4.0.0-rc.6 --- packages/vant-cli/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json index d96a8843f..8703581ff 100644 --- a/packages/vant-cli/package.json +++ b/packages/vant-cli/package.json @@ -1,6 +1,6 @@ { "name": "@vant/cli", - "version": "4.0.0-rc.5", + "version": "4.0.0-rc.6", "type": "module", "main": "lib/index.js", "typings": "lib/index.d.ts", From fda3f1be9403c68bcc734ae08c760af3d0df6fa1 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 19 Jan 2022 15:53:35 +0800 Subject: [PATCH 015/170] docs(@vant/cli): changelog 4.0.0-rc.6 --- packages/vant-cli/changelog.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/vant-cli/changelog.md b/packages/vant-cli/changelog.md index 590a1eed5..ff0f42a9f 100644 --- a/packages/vant-cli/changelog.md +++ b/packages/vant-cli/changelog.md @@ -1,5 +1,9 @@ # 更新日志 +## v4.0.0-rc.6 + +- 修复通过 pnpm 安装使用时报错的问题 + ## v4.0.0-rc.4 - 新增 CommonJS 格式的构建产物，分别为 `lib/[name].cjs.js` 和 `lib/[name].cjs.min.js` From 6c64bc33c1ba537b7951dcbc02d6deec3aaab093 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 19 Jan 2022 16:09:31 +0800 Subject: [PATCH 016/170] types(Picker): fix columns prop typing --- packages/vant/src/picker/Picker.tsx | 3 ++- packages/vant/src/picker/README.zh-CN.md | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 7f7574260..29eb63974 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -39,6 +39,7 @@ import Column, { PICKER_KEY } from './PickerColumn'; import type { PickerColumn, PickerExpose, + PickerOption, PickerFieldNames, PickerToolbarPosition, } from './types'; @@ -59,7 +60,7 @@ export const pickerSharedProps = { }; const pickerProps = extend({}, pickerSharedProps, { - columns: makeArrayProp(), + columns: makeArrayProp(), modelValue: makeArrayProp(), toolbarPosition: makeStringProp('top'), columnsFieldNames: Object as PropType, diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md index e38f16927..5bb84113d 100644 --- a/packages/vant/src/picker/README.zh-CN.md +++ b/packages/vant/src/picker/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -提供多个选项集合供用户选择，支持单列选择和多列级联，通常与[弹出层](#/zh-CN/popup)组件配合使用。 +提供多个选项集合供用户选择，支持单列选择、多列选择和级联选择，通常与[弹出层](#/zh-CN/popup)组件配合使用。 ### 引入 From ff69fdacc7dd9bcf6bd17c4a493902d027644d92 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 20 Jan 2022 15:53:25 +0800 Subject: [PATCH 017/170] fix(Picker): failed to update modelValue --- packages/vant/src/picker/Picker.tsx | 33 +++++++++++++++++++++-------- packages/vant/src/picker/README.md | 6 +++--- packages/vant/src/picker/utils.ts | 11 +++++++++- 3 files changed, 37 insertions(+), 13 deletions(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 29eb63974..a035ffd12 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -21,6 +21,7 @@ import { BORDER_UNSET_TOP_BOTTOM, } from '../utils'; import { + isValuesEqual, getColumnsType, findOptionByValue, formatCascadeColumns, @@ -115,6 +116,14 @@ export default defineComponent({ fields.value, selectedValues ); + + // reset values after cascading + selectedValues.value.forEach((value, index) => { + const options = currentColumns.value[index]; + if (!options.find((option) => option[fields.value.value] === value)) { + selectedValues.value[index] = options[0][fields.value.value]; + } + }); } emit('change', { @@ -265,16 +274,22 @@ export default defineComponent({ watch( () => props.modelValue, - (value) => { - selectedValues.value = value; - } + (newValues) => { + if (!isValuesEqual(newValues, selectedValues.value)) { + selectedValues.value = newValues; + } + }, + { deep: true } + ); + watch( + selectedValues, + (newValues) => { + if (!isValuesEqual(newValues, props.modelValue)) { + emit('update:modelValue', selectedValues.value); + } + }, + { deep: true } ); - - watch(selectedValues, () => { - if (selectedValues.value !== props.modelValue) { - emit('update:modelValue', selectedValues.value); - } - }); useExpose({ confirm }); diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md index cff22077b..7b896f471 100644 --- a/packages/vant/src/picker/README.md +++ b/packages/vant/src/picker/README.md @@ -325,9 +325,9 @@ export default { | Event | Description | Arguments | | --- | --- | --- | -| confirm | Emitted when click confirm button | _{ selectedValues, selectedOptions }_ | -| cancel | Emitted when click cancel button | _{ selectedValues, selectedOptions }_ | -| change | Emitted when current option changed | _{ selectedValues, selectedOptions, columnIndex }_ | +| confirm | Emitted when the confirm button is clicked | _{ selectedValues, selectedOptions }_ | +| cancel | Emitted when the cancel button is clicked | _{ selectedValues, selectedOptions }_ | +| change | Emitted when current option is changed | _{ selectedValues, selectedOptions, columnIndex }_ | ### Slots diff --git a/packages/vant/src/picker/utils.ts b/packages/vant/src/picker/utils.ts index 4702c2bb7..26a216405 100644 --- a/packages/vant/src/picker/utils.ts +++ b/packages/vant/src/picker/utils.ts @@ -70,7 +70,6 @@ export function formatCascadeColumns( if (!cursor && options.length) { const firstValue = getFirstEnabledOption(options)[fields.value]; - selectedValues.value[columnIndex] = firstValue; cursor = findOptionByValue(options, firstValue, fields); } @@ -86,3 +85,13 @@ export function getElementTranslateY(element: Element) { const translateY = transform.slice(7, transform.length - 1).split(', ')[5]; return Number(translateY); } + +export function isValuesEqual( + valuesA: Array, + valuesB: Array +) { + return ( + valuesA.length === valuesB.length && + valuesA.every((value, index) => value === valuesB[index]) + ); +} From 113e1b7a6239c3097956e8692cb512e8ccecccb8 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 20 Jan 2022 17:49:31 +0800 Subject: [PATCH 018/170] fix(Picker): currentColumns calculation --- packages/vant/src/picker/Picker.tsx | 47 +++++++++++------------------ 1 file changed, 18 insertions(+), 29 deletions(-) diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index a035ffd12..55bf7a92f 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -77,10 +77,7 @@ export default defineComponent({ emits: ['confirm', 'cancel', 'change', 'update:modelValue'], setup(props, { emit, slots }) { - const hasOptions = ref(false); const selectedValues = ref(props.modelValue); - const currentColumns = ref([]); - const { children, linkChildren } = useChildren(PICKER_KEY); linkChildren(); @@ -101,6 +98,22 @@ export default defineComponent({ getColumnsType(props.columns, fields.value) ); + const currentColumns = computed(() => { + const { columns } = props; + switch (columnsType.value) { + case 'multiple': + return columns as PickerColumn[]; + case 'cascade': + return formatCascadeColumns(columns, fields.value, selectedValues); + default: + return [columns]; + } + }); + + const hasOptions = computed(() => + currentColumns.value.some((options) => options.length) + ); + const selectedOptions = computed(() => currentColumns.value.map((options, index) => findOptionByValue(options, selectedValues.value[index], fields.value) @@ -111,12 +124,6 @@ export default defineComponent({ selectedValues.value[columnIndex] = value; if (columnsType.value === 'cascade') { - currentColumns.value = formatCascadeColumns( - props.columns, - fields.value, - selectedValues - ); - // reset values after cascading selectedValues.value.forEach((value, index) => { const options = currentColumns.value[index]; @@ -241,33 +248,15 @@ export default defineComponent({ ); }; - const formatColumns = ( - columns: PickerColumn | PickerColumn[] - ): PickerColumn[] => { - switch (columnsType.value) { - case 'multiple': - return columns as PickerColumn[]; - case 'cascade': - return formatCascadeColumns(columns, fields.value, selectedValues); - default: - return [columns]; - } - }; - watch( - () => props.columns, + currentColumns, (columns) => { - currentColumns.value = formatColumns(columns); - currentColumns.value.forEach((options, index) => { + columns.forEach((options, index) => { if (selectedValues.value[index] === undefined && options.length) { selectedValues.value[index] = getFirstEnabledOption(options)[fields.value.value]; } }); - - hasOptions.value = currentColumns.value.some( - (options) => !!options.length - ); }, { immediate: true } ); From cca428aac63da792e8de8f3f6f76d164cab46cb6 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Fri, 21 Jan 2022 10:49:08 +0800 Subject: [PATCH 019/170] refactor: Area component --- packages/vant/src/area/Area.tsx | 311 ++++---------------------- packages/vant/src/area/demo/index.vue | 2 +- packages/vant/src/area/index.ts | 2 +- packages/vant/src/area/types.ts | 21 +- packages/vant/src/area/utils.ts | 81 +++++++ 5 files changed, 133 insertions(+), 284 deletions(-) create mode 100644 packages/vant/src/area/utils.ts diff --git a/packages/vant/src/area/Area.tsx b/packages/vant/src/area/Area.tsx index 022d6c060..ef96f3a8e 100644 --- a/packages/vant/src/area/Area.tsx +++ b/packages/vant/src/area/Area.tsx @@ -2,16 +2,12 @@ import { ref, watch, computed, - reactive, - nextTick, - onMounted, defineComponent, type PropType, type ExtractPropTypes, } from 'vue'; // Utils -import { deepClone } from '../utils/deep-clone'; import { pick, extend, @@ -20,19 +16,16 @@ import { createNamespace, } from '../utils'; import { pickerSharedProps } from '../picker/Picker'; - -// Composables -import { useExpose } from '../composables/use-expose'; +import { formatDataForCascade } from './utils'; // Components -import { Picker, PickerInstance } from '../picker'; +import { Picker } from '../picker'; // Types -import type { AreaList, AreaColumnType, AreaColumnOption } from './types'; +import type { AreaList } from './types'; const [name, bem] = createNamespace('area'); -const EMPTY_CODE = '000000'; const INHERIT_SLOTS = [ 'title', 'cancel', @@ -52,20 +45,14 @@ const INHERIT_PROPS = [ 'confirmButtonText', ] as const; -const isOverseaCode = (code: string) => code[0] === '9'; - const areaProps = extend({}, pickerSharedProps, { - value: String, + modelValue: String, columnsNum: makeNumericProp(3), columnsPlaceholder: makeArrayProp(), areaList: { type: Object as PropType, default: () => ({}), }, - isOverseaCode: { - type: Function as PropType<(code: string) => boolean>, - default: isOverseaCode, - }, }); export type AreaProps = ExtractPropTypes; @@ -75,262 +62,62 @@ export default defineComponent({ props: areaProps, - emits: ['change', 'confirm', 'cancel'], + emits: ['change', 'confirm', 'cancel', 'update:modelValue'], setup(props, { emit, slots }) { - const pickerRef = ref(); + const codes = ref([]); - const state = reactive({ - code: props.value, - columns: [{ values: [] }, { values: [] }, { values: [] }], - }); - - const areaList = computed(() => { - const { areaList } = props; - return { - province: areaList.province_list || {}, - city: areaList.city_list || {}, - county: areaList.county_list || {}, - }; - }); - - const placeholderMap = computed(() => { - const { columnsPlaceholder } = props; - return { - province: columnsPlaceholder[0] || '', - city: columnsPlaceholder[1] || '', - county: columnsPlaceholder[2] || '', - }; - }); - - const getDefaultCode = () => { - if (props.columnsPlaceholder.length) { - return EMPTY_CODE; - } - - const { county, city } = areaList.value; - - const countyCodes = Object.keys(county); - if (countyCodes[0]) { - return countyCodes[0]; - } - - const cityCodes = Object.keys(city); - if (cityCodes[0]) { - return cityCodes[0]; - } - - return ''; - }; - - const getColumnValues = (type: AreaColumnType, code?: string) => { - let column: AreaColumnOption[] = []; - if (type !== 'province' && !code) { - return column; - } - - const list = areaList.value[type]; - column = Object.keys(list).map((listCode) => ({ - code: listCode, - name: list[listCode], - })); - - if (code) { - // oversea code - if (type === 'city' && props.isOverseaCode(code)) { - code = '9'; - } - column = column.filter((item) => item.code.indexOf(code!) === 0); - } - - if (placeholderMap.value[type] && column.length) { - // set columns placeholder - let codeFill = ''; - if (type === 'city') { - codeFill = EMPTY_CODE.slice(2, 4); - } else if (type === 'county') { - codeFill = EMPTY_CODE.slice(4, 6); - } - - column.unshift({ - code: code + codeFill, - name: placeholderMap.value[type], - }); - } - - return column; - }; - - // get index by code - const getIndex = (type: AreaColumnType, code: string) => { - let compareNum = code.length; - if (type === 'province') { - compareNum = props.isOverseaCode(code) ? 1 : 2; - } - if (type === 'city') { - compareNum = 4; - } - - code = code.slice(0, compareNum); - - const list = getColumnValues( - type, - compareNum > 2 ? code.slice(0, compareNum - 2) : '' - ); - - for (let i = 0; i < list.length; i++) { - if (list[i].code.slice(0, compareNum) === code) { - return i; - } - } - - return 0; - }; - - const setValues = () => { - const picker = pickerRef.value; - - if (!picker) { - return; - } - - let code = state.code || getDefaultCode(); - const province = getColumnValues('province'); - const city = getColumnValues('city', code.slice(0, 2)); - picker.setColumnValues(0, province); - picker.setColumnValues(1, city); - - if ( - city.length && - code.slice(2, 4) === '00' && - !props.isOverseaCode(code) - ) { - [{ code }] = city; - } - - picker.setColumnValues(2, getColumnValues('county', code.slice(0, 4))); - picker.setIndexes([ - getIndex('province', code), - getIndex('city', code), - getIndex('county', code), - ]); - }; - - // parse output columns data - const parseValues = (values: AreaColumnOption[]) => - values.map((value, index) => { - if (value) { - value = deepClone(value); - - if (!value.code || value.name === props.columnsPlaceholder[index]) { - value.code = ''; - value.name = ''; - } - } - - return value; - }); - - const getValues = () => { - if (pickerRef.value) { - const values = pickerRef.value - .getValues() - .filter(Boolean); - return parseValues(values); - } - return []; - }; - - const getArea = () => { - const values = getValues(); - const area = { - code: '', - country: '', - province: '', - city: '', - county: '', - }; - - if (!values.length) { - return area; - } - - const names = values.map((item) => item.name); - const validValues = values.filter((value) => value.code); - - area.code = validValues.length - ? validValues[validValues.length - 1].code - : ''; - - if (props.isOverseaCode(area.code)) { - area.country = names[1] || ''; - area.province = names[2] || ''; - } else { - area.province = names[0] || ''; - area.city = names[1] || ''; - area.county = names[2] || ''; - } - - return area; - }; - - const reset = (newCode = '') => { - state.code = newCode; - setValues(); - }; - - const onChange = (values: AreaColumnOption[], index: number) => { - state.code = values[index].code; - setValues(); - - if (pickerRef.value) { - const parsedValues = parseValues(pickerRef.value.getValues()); - emit('change', parsedValues, index); - } - }; - - const onConfirm = (values: AreaColumnOption[], index: number) => { - setValues(); - emit('confirm', parseValues(values), index); - }; + const columns = computed(() => + formatDataForCascade( + props.areaList, + props.columnsNum, + props.columnsPlaceholder + ) + ); + const onChange = (...args: unknown[]) => emit('change', ...args); const onCancel = (...args: unknown[]) => emit('cancel', ...args); - - onMounted(setValues); + const onConfirm = (...args: unknown[]) => emit('confirm', ...args); watch( - () => props.value, - (value) => { - state.code = value; - setValues(); - } + codes, + (newCodes) => { + const lastCode = newCodes.length ? newCodes[newCodes.length - 1] : ''; + if (lastCode && lastCode !== props.modelValue) { + emit('update:modelValue', lastCode); + } + }, + { deep: true } ); - watch(() => props.areaList, setValues, { deep: true }); - watch( - () => props.columnsNum, - () => nextTick(setValues) + () => props.modelValue, + (newCode) => { + const lastCode = codes.value.length + ? codes.value[codes.value.length - 1] + : ''; + if (newCode && newCode !== lastCode) { + codes.value = [ + `${newCode.slice(0, 2)}0000`, + `${newCode.slice(0, 4)}00`, + newCode, + ].slice(0, +props.columnsNum); + } + }, + { immediate: true } ); - useExpose({ reset, getArea, getValues }); - - return () => { - const columns = state.columns.slice(0, +props.columnsNum); - - return ( - - ); - }; + return () => ( + + ); }, }); diff --git a/packages/vant/src/area/demo/index.vue b/packages/vant/src/area/demo/index.vue index e63f7c2e6..e6ff04c57 100644 --- a/packages/vant/src/area/demo/index.vue +++ b/packages/vant/src/area/demo/index.vue @@ -27,7 +27,7 @@ const value = ref('330302');