From ada5db011c676893a2917b9424be1aeafe54134b Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 3 Nov 2021 16:45:49 +0800 Subject: [PATCH] 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', - }, - ], - }, ], }, },