From af168d6abc97e0bda1f27b74d1a54273a2eebd0a Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 1 Nov 2018 16:16:26 +0800
Subject: [PATCH] [improvement] update color variables (#2010)
---
packages/card/demo/index.vue | 2 +-
packages/circle/en-US.md | 2 +-
packages/circle/index.vue | 3 ++-
packages/circle/test/__snapshots__/demo.spec.js.snap | 2 +-
packages/circle/zh-CN.md | 2 +-
packages/field/demo/index.vue | 6 ++++--
packages/number-keyboard/index.vue | 2 +-
.../test/__snapshots__/demo.spec.js.snap | 2 +-
packages/progress/en-US.md | 2 +-
packages/progress/index.vue | 3 ++-
.../progress/test/__snapshots__/demo.spec.js.snap | 2 +-
.../progress/test/__snapshots__/index.spec.js.snap | 4 ++--
packages/progress/zh-CN.md | 2 +-
packages/steps/demo/index.vue | 4 +++-
packages/steps/en-US.md | 2 +-
packages/steps/index.vue | 3 ++-
packages/steps/test/__snapshots__/demo.spec.js.snap | 8 ++++----
packages/steps/zh-CN.md | 2 +-
packages/submit-bar/demo/index.vue | 8 +++++---
.../submit-bar/test/__snapshots__/demo.spec.js.snap | 2 +-
packages/swipe-cell/demo/index.vue | 6 ++++--
packages/tag/demo/index.vue | 2 +-
packages/tag/en-US.md | 2 +-
packages/tag/index.vue | 7 ++++---
packages/tag/test/__snapshots__/demo.spec.js.snap | 12 ++++++------
packages/tag/zh-CN.md | 2 +-
packages/utils/color.js | 3 +++
packages/vant-css/src/card.css | 2 +-
packages/vant-css/src/checkbox.css | 4 ++--
packages/vant-css/src/common/var.css | 11 +++++++----
packages/vant-css/src/contact-card.css | 4 ++--
packages/vant-css/src/coupon-list.css | 2 +-
packages/vant-css/src/info.css | 2 +-
packages/vant-css/src/notice-bar.css | 4 ++--
packages/vant-css/src/number-keyboard.css | 10 +++++-----
packages/vant-css/src/pagination.css | 5 ++---
packages/vant-css/src/stepper.css | 2 +-
packages/vant-css/src/steps.css | 2 +-
packages/vant-css/src/switch.css | 2 +-
packages/vant-css/src/tabbar.css | 4 ++--
40 files changed, 84 insertions(+), 67 deletions(-)
create mode 100644 packages/utils/color.js
diff --git a/packages/card/demo/index.vue b/packages/card/demo/index.vue
index c8437997a..c2a56787b 100644
--- a/packages/card/demo/index.vue
+++ b/packages/card/demo/index.vue
@@ -1,5 +1,5 @@
<template>
- <demo-section background="#fff">
+ <demo-section background="white">
<demo-block :title="$t('basicUsage')">
<van-card
num="2"
diff --git a/packages/circle/en-US.md b/packages/circle/en-US.md
index 623fea5d0..c9ff43d8a 100644
--- a/packages/circle/en-US.md
+++ b/packages/circle/en-US.md
@@ -60,7 +60,7 @@ export default {
| v-model | Current rate | `Number` | - |
| rate | Target rate | `Number` | `100` |
| size | Circle size | `String` | `100px` |
-| color | Progress bar color | `String` | `#38f` |
+| color | Progress bar color | `String` | `#1989fa` |
| layer-color | Layer color | `String` | `#fff` |
| fill | Fill color | `String` | `none` |
| speed | Animate speed（rate/s）| `Number` | - |
diff --git a/packages/circle/index.vue b/packages/circle/index.vue
index b6ceeea05..f77022b1b 100644
--- a/packages/circle/index.vue
+++ b/packages/circle/index.vue
@@ -13,6 +13,7 @@
<script>
import create from '../utils/create';
import { raf, cancel } from '../utils/raf';
+import { BLUE } from '../utils/color';
export default create({
name: 'circle',
@@ -39,7 +40,7 @@ export default create({
},
color: {
type: String,
- default: '#38f'
+ default: BLUE
},
strokeWidth: {
type: Number,
diff --git a/packages/circle/test/__snapshots__/demo.spec.js.snap b/packages/circle/test/__snapshots__/demo.spec.js.snap
index c353c6153..306bf474a 100644
--- a/packages/circle/test/__snapshots__/demo.spec.js.snap
+++ b/packages/circle/test/__snapshots__/demo.spec.js.snap
@@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-circle" style="width:120px;height:120px;">
<svg viewBox="0 0 1060 1060">
<path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill:none;stroke:#fff;stroke-width:40px;"></path>
- <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke:#38f;stroke-dashoffset:3140px;stroke-width:41px;"></path>
+ <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke:#1989fa;stroke-dashoffset:3140px;stroke-width:41px;"></path>
</svg>
<div class="van-circle__text">0%</div>
</div>
diff --git a/packages/circle/zh-CN.md b/packages/circle/zh-CN.md
index 0adb05621..9ff30aee7 100644
--- a/packages/circle/zh-CN.md
+++ b/packages/circle/zh-CN.md
@@ -61,7 +61,7 @@ export default {
| v-model | 当前进度 | `Number` | - | - |
| rate | 目标进度 | `Number` | `100` | - |
| size | 圆环直径 | `String` | `100px` | - |
-| color | 进度条颜色 | `String` | `#38f` | - |
+| color | 进度条颜色 | `String` | `#1989fa` | - |
| layer-color | 轨道颜色 | `String` | `#fff` | - |
| fill | 填充颜色 | `String` | `none` | - |
| speed | 动画速度（单位为 rate/s）| `Number` | - | - |
diff --git a/packages/field/demo/index.vue b/packages/field/demo/index.vue
index c18cd0ee4..dda456e1b 100644
--- a/packages/field/demo/index.vue
+++ b/packages/field/demo/index.vue
@@ -137,11 +137,13 @@ export default {
</script>
<style lang="postcss">
+@import '../../vant-css/src/common/var.css';
+
.demo-field {
padding-bottom: 30px;
- .van-field__icon {
- color: #38f;
+ .van-field__icon .van-icon {
+ color: $blue;
}
}
</style>
diff --git a/packages/number-keyboard/index.vue b/packages/number-keyboard/index.vue
index d2a5a2f21..46834fdf2 100644
--- a/packages/number-keyboard/index.vue
+++ b/packages/number-keyboard/index.vue
@@ -28,7 +28,7 @@
</div>
<div v-if="theme === 'custom'" :class="b('sidebar')">
<key :text="'delete'" :type="['delete', 'big']" @press="onPressKey" />
- <key :text="closeButtonText" :type="['green', 'big']" @press="onPressKey" />
+ <key :text="closeButtonText" :type="['blue', 'big']" @press="onPressKey" />
</div>
</div>
</transition>
diff --git a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
index 2a70873db..0fe36c5ea 100644
--- a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
+++ b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
@@ -46,7 +46,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-number-keyboard__sidebar">
<i class="van-hairline van-key van-key van-key--delete van-key van-key--big">delete</i>
- <i class="van-hairline van-key van-key van-key--green van-key van-key--big">完成</i>
+ <i class="van-hairline van-key van-key van-key--blue van-key van-key--big">完成</i>
</div>
</div>
</div>
diff --git a/packages/progress/en-US.md b/packages/progress/en-US.md
index 3739635bc..5a2089c2e 100644
--- a/packages/progress/en-US.md
+++ b/packages/progress/en-US.md
@@ -55,7 +55,7 @@ Use `pivot-text` to custom text，use `color` to custom bar color
| inactive | Whether to be gray | `Boolean` | `false` |
| percentage | Percentage | `Number` | `false` |
| show-pivot | Whether to show text | `Boolean` | `true` |
-| color | Color | `String` | `#38f` |
+| color | Color | `String` | `#1989fa` |
| pivot-text | Text | `String` | percentage |
| pivot-color | Text background color | `String` | inherit progress color |
| text-color | Text color | `String` | `#fff` |
diff --git a/packages/progress/index.vue b/packages/progress/index.vue
index 70a3587b7..b8bfd337b 100644
--- a/packages/progress/index.vue
+++ b/packages/progress/index.vue
@@ -8,6 +8,7 @@
<script>
import create from '../utils/create';
+import { BLUE } from '../utils/color';
export default create({
name: 'progress',
@@ -27,7 +28,7 @@ export default create({
},
color: {
type: String,
- default: '#38f'
+ default: BLUE
},
textColor: {
type: String,
diff --git a/packages/progress/test/__snapshots__/demo.spec.js.snap b/packages/progress/test/__snapshots__/demo.spec.js.snap
index 2b774376b..475f7a0b3 100644
--- a/packages/progress/test/__snapshots__/demo.spec.js.snap
+++ b/packages/progress/test/__snapshots__/demo.spec.js.snap
@@ -3,7 +3,7 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
- <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#38f;"><span class="van-progress__pivot" style="color:#fff;background:#38f;">50%</span></span>
+ <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#1989fa;"><span class="van-progress__pivot" style="color:#fff;background:#1989fa;">50%</span></span>
</div>
</div>
<div>
diff --git a/packages/progress/test/__snapshots__/index.spec.js.snap b/packages/progress/test/__snapshots__/index.spec.js.snap
index df4bd5a17..a48a051c4 100644
--- a/packages/progress/test/__snapshots__/index.spec.js.snap
+++ b/packages/progress/test/__snapshots__/index.spec.js.snap
@@ -1,8 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px; background: rgb(51, 136, 255);"><!----></span></div>`;
+exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px; background: rgb(25, 137, 250);"><!----></span></div>`;
exports[`calc width 2`] = `
-<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px; background: rgb(51, 136, 255);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(51, 136, 255);">test</span></span>
+<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px; background: rgb(25, 137, 250);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">test</span></span>
</div>
`;
diff --git a/packages/progress/zh-CN.md b/packages/progress/zh-CN.md
index 20834779c..bd0206e4f 100644
--- a/packages/progress/zh-CN.md
+++ b/packages/progress/zh-CN.md
@@ -57,7 +57,7 @@ Vue.use(Progress);
| inactive | 是否置灰 | `Boolean` | `false` | - |
| percentage | 进度百分比 | `Number` | `false` | - |
| show-pivot | 是否显示进度文字 | `Boolean` | `true` | - |
-| color | 进度条颜色 | `String` | `#38f` | - |
+| color | 进度条颜色 | `String` | `#1989fa` | - |
| text-color | 进度条文字颜色 | `String` | `#fff` | - |
| pivot-text | 文字显示 | `String` | 百分比文字 | - |
| pivot-color | 文字背景色 | `String` | 与进度条颜色一致 | - |
diff --git a/packages/steps/demo/index.vue b/packages/steps/demo/index.vue
index 13ebce408..d7e1af776 100644
--- a/packages/steps/demo/index.vue
+++ b/packages/steps/demo/index.vue
@@ -89,10 +89,12 @@ export default {
</script>
<style lang="postcss">
+@import '../../vant-css/src/common/var.css';
+
.demo-steps {
.steps-success,
.van-icon-location {
- color: #06bf04;
+ color: $green;
}
.van-button {
diff --git a/packages/steps/en-US.md b/packages/steps/en-US.md
index e2dc51611..91471ea26 100644
--- a/packages/steps/en-US.md
+++ b/packages/steps/en-US.md
@@ -75,7 +75,7 @@ export default {
| title | Title | `String` | - |
| description | Description | `String` | - |
| direction | Can be set to `horizontal` `vertical` | `String` | `horizontal` |
-| active-color | Active step color | `String` | `#06bf04` |
+| active-color | Active step color | `String` | `#4b0` |
### Steps Slot
diff --git a/packages/steps/index.vue b/packages/steps/index.vue
index d117a171b..2c39dd102 100644
--- a/packages/steps/index.vue
+++ b/packages/steps/index.vue
@@ -20,6 +20,7 @@
<script>
import create from '../utils/create';
+import { GREEN } from '../utils/color';
export default create({
name: 'steps',
@@ -36,7 +37,7 @@ export default create({
},
activeColor: {
type: String,
- default: '#06bf04'
+ default: GREEN
}
},
diff --git a/packages/steps/test/__snapshots__/demo.spec.js.snap b/packages/steps/test/__snapshots__/demo.spec.js.snap
index 9f7c286c0..5318b3f86 100644
--- a/packages/steps/test/__snapshots__/demo.spec.js.snap
+++ b/packages/steps/test/__snapshots__/demo.spec.js.snap
@@ -14,9 +14,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal van-step--process">
- <div class="van-step__title" style="color:#06bf04;">商家接单</div>
+ <div class="van-step__title" style="color:#4b0;">商家接单</div>
<div class="van-step__circle-container">
- <i class="van-icon van-icon-checked" style="color:#06bf04;font-size:undefined;">
+ <i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;">
<!---->
</i>
</div>
@@ -62,9 +62,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal van-step--process">
- <div class="van-step__title" style="color:#06bf04;">商家接单</div>
+ <div class="van-step__title" style="color:#4b0;">商家接单</div>
<div class="van-step__circle-container">
- <i class="van-icon van-icon-checked" style="color:#06bf04;font-size:undefined;">
+ <i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;">
<!---->
</i>
</div>
diff --git a/packages/steps/zh-CN.md b/packages/steps/zh-CN.md
index b3d93413b..98415c212 100644
--- a/packages/steps/zh-CN.md
+++ b/packages/steps/zh-CN.md
@@ -78,7 +78,7 @@ export default {
| icon | 描述栏图标 | `String` | - | - |
| icon-class | 图标额外类名 | `String` | - | - |
| direction | 显示方向，可选值为 `vertical` | `String` | `horizontal` | - |
-| active-color | 激活状态颜色 | `String` | `#06bf04` | - |
+| active-color | 激活状态颜色 | `String` | `#4b0` | - |
### Steps Slot
diff --git a/packages/submit-bar/demo/index.vue b/packages/submit-bar/demo/index.vue
index 2126670f8..9921767a5 100644
--- a/packages/submit-bar/demo/index.vue
+++ b/packages/submit-bar/demo/index.vue
@@ -35,7 +35,7 @@
>
<van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
<span slot="tip">
- {{ $t('tip2') }}<span class="van-edit-address" @click="onClickLink">{{ $t('tip3') }}</span>
+ {{ $t('tip2') }}<span class="edit-address" @click="onClickLink">{{ $t('tip3') }}</span>
</span>
</van-submit-bar>
</demo-block>
@@ -83,13 +83,15 @@ export default {
</script>
<style lang="postcss">
+@import '../../vant-css/src/common/var.css';
+
.demo-submit-bar {
.van-submit-bar {
position: relative;
}
- .van-edit-address {
- color: #38f;
+ .edit-address {
+ color: $blue;
}
.van-checkbox {
diff --git a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
index 71e5db59f..e5523b14e 100644
--- a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
@@ -40,7 +40,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-submit-bar">
<div class="van-submit-bar__tip">
<span>
- 你的收货地址不支持同城送, <span class="van-edit-address">修改地址</span></span>
+ 你的收货地址不支持同城送, <span class="edit-address">修改地址</span></span>
</div>
<div class="van-submit-bar__bar">
<div class="van-checkbox">
diff --git a/packages/swipe-cell/demo/index.vue b/packages/swipe-cell/demo/index.vue
index e9c4d9bd4..d1f2698b2 100644
--- a/packages/swipe-cell/demo/index.vue
+++ b/packages/swipe-cell/demo/index.vue
@@ -68,20 +68,22 @@ export default {
</script>
<style lang="postcss">
+@import '../../vant-css/src/common/var.css';
+
.demo-swipe-cell {
user-select: none;
.van-swipe-cell {
&__left,
&__right {
- color: #FFFFFF;
+ color: $white;
font-size: 15px;
width: 65px;
height: 44px;
display: inline-block;
text-align: center;
line-height: 44px;
- background-color: #F44;
+ background-color: $red;
}
}
}
diff --git a/packages/tag/demo/index.vue b/packages/tag/demo/index.vue
index 59e3730ac..c166fb56a 100644
--- a/packages/tag/demo/index.vue
+++ b/packages/tag/demo/index.vue
@@ -3,8 +3,8 @@
<demo-block :title="$t('basicUsage')">
<van-tag>{{ $t('tag') }}</van-tag>
<van-tag type="danger">{{ $t('tag') }}</van-tag>
- <van-tag type="success">{{ $t('tag') }}</van-tag>
<van-tag type="primary">{{ $t('tag') }}</van-tag>
+ <van-tag type="success">{{ $t('tag') }}</van-tag>
</demo-block>
<demo-block :title="$t('plain')">
diff --git a/packages/tag/en-US.md b/packages/tag/en-US.md
index c13a6b0c3..2414a5c62 100644
--- a/packages/tag/en-US.md
+++ b/packages/tag/en-US.md
@@ -14,8 +14,8 @@ Vue.use(Tag);
```html
<van-tag>Tag</van-tag>
<van-tag type="danger">Tag</van-tag>
-<van-tag type="success">Tag</van-tag>
<van-tag type="primary">Tag</van-tag>
+<van-tag type="success">Tag</van-tag>
```
#### Plain style
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index ad16c8235..51ba2f71f 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -16,12 +16,13 @@
<script>
import create from '../utils/create';
+import { RED, BLUE, GREEN } from '../utils/color';
const DEFAULT_COLOR = '#999';
const COLOR_MAP = {
- danger: '#f44',
- primary: '#38f',
- success: '#06bf04'
+ danger: RED,
+ primary: BLUE,
+ success: GREEN
};
export default create({
diff --git a/packages/tag/test/__snapshots__/demo.spec.js.snap b/packages/tag/test/__snapshots__/demo.spec.js.snap
index b08179595..f89835d7c 100644
--- a/packages/tag/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tag/test/__snapshots__/demo.spec.js.snap
@@ -2,13 +2,13 @@
exports[`renders demo correctly 1`] = `
<div>
- <div><span class="van-tag" style="background-color:#999;">标签</span> <span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag" style="background-color:#06bf04;">标签</span> <span class="van-tag" style="background-color:#38f;">标签</span></div>
+ <div><span class="van-tag" style="background-color:#999;">标签</span> <span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag" style="background-color:#1989fa;">标签</span> <span class="van-tag" style="background-color:#4b0;">标签</span></div>
<div><span class="van-tag van-tag--plain van-hairline--surround" style="color:#999;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#f44;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround"
- style="color:#38f;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#06bf04;">标签</span></div>
- <div><span class="van-tag van-tag--round" style="background-color:#999;">标签</span> <span class="van-tag van-tag--round" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--round" style="background-color:#38f;">标签</span> <span class="van-tag van-tag--round"
- style="background-color:#06bf04;">标签</span></div>
- <div><span class="van-tag van-tag--mark" style="background-color:#999;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#38f;">标签</span> <span class="van-tag van-tag--mark"
- style="background-color:#06bf04;">标签</span></div>
+ style="color:#1989fa;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#4b0;">标签</span></div>
+ <div><span class="van-tag van-tag--round" style="background-color:#999;">标签</span> <span class="van-tag van-tag--round" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--round" style="background-color:#1989fa;">标签</span> <span class="van-tag van-tag--round"
+ style="background-color:#4b0;">标签</span></div>
+ <div><span class="van-tag van-tag--mark" style="background-color:#999;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#1989fa;">标签</span> <span class="van-tag van-tag--mark"
+ style="background-color:#4b0;">标签</span></div>
<div><span class="van-tag" style="background-color:#f2826a;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#f2826a;">标签</span> <span class="van-tag" style="background-color:#7232dd;">标签</span> <span class="van-tag van-tag--plain van-hairline--surround"
style="color:#7232dd;">标签</span></div>
<div><span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--medium" style="background-color:#f44;">标签</span> <span class="van-tag van-tag--large" style="background-color:#f44;">标签</span></div>
diff --git a/packages/tag/zh-CN.md b/packages/tag/zh-CN.md
index 271a89994..3595dec9b 100644
--- a/packages/tag/zh-CN.md
+++ b/packages/tag/zh-CN.md
@@ -15,8 +15,8 @@ Vue.use(Tag);
```html
<van-tag>标签</van-tag>
<van-tag type="danger">标签</van-tag>
-<van-tag type="success">标签</van-tag>
<van-tag type="primary">标签</van-tag>
+<van-tag type="success">标签</van-tag>
```
#### 空心样式
diff --git a/packages/utils/color.js b/packages/utils/color.js
new file mode 100644
index 000000000..0b03b2753
--- /dev/null
+++ b/packages/utils/color.js
@@ -0,0 +1,3 @@
+export const RED = '#f44';
+export const BLUE = '#1989fa';
+export const GREEN = '#4b0';
diff --git a/packages/vant-css/src/card.css b/packages/vant-css/src/card.css
index aec8af4f6..14e1bfde3 100644
--- a/packages/vant-css/src/card.css
+++ b/packages/vant-css/src/card.css
@@ -5,10 +5,10 @@
color: $text-color;
height: 100px;
font-size: 12px;
- background: #fafafa;
position: relative;
box-sizing: border-box;
padding: 5px 15px 5px 115px;
+ background-color: $background-color-light;
&:not(:first-child) {
margin-top: 10px;
diff --git a/packages/vant-css/src/checkbox.css b/packages/vant-css/src/checkbox.css
index d995ffb27..21eea9be6 100644
--- a/packages/vant-css/src/checkbox.css
+++ b/packages/vant-css/src/checkbox.css
@@ -19,7 +19,7 @@ $van-checkbox-size: 20px;
color: transparent;
text-align: center;
line-height: inherit;
- border: 1px solid #aaa;
+ border: 1px solid $gray-light;
width: $van-checkbox-size;
height: $van-checkbox-size;
box-sizing: border-box;
@@ -33,7 +33,7 @@ $van-checkbox-size: 20px;
&--checked {
.van-icon {
- color: #fff;
+ color: $white;
border-color: $green;
background-color: $green;
}
diff --git a/packages/vant-css/src/common/var.css b/packages/vant-css/src/common/var.css
index 323598418..55bb1e117 100644
--- a/packages/vant-css/src/common/var.css
+++ b/packages/vant-css/src/common/var.css
@@ -2,9 +2,11 @@
$black: #000;
$white: #fff;
$red: #f44;
-$blue: #38f;
+$blue: #1989fa;
$orange: #ff976a;
-$green: #06bf04;
+$orange-dark: #ed6a0c;
+$orange-light: #fffbe8;
+$green: #4b0;
$gray: #c9c9c9;
$gray-light: #e5e5e5;
$gray-darker: #666;
@@ -15,14 +17,15 @@ $text-color: #333;
$border-color: #eee;
$active-color: #e8e8e8;
$background-color: #f8f8f8;
+$background-color-light: #fafafa;
/* button */
$button-default-color: $text-color;
$button-default-background-color: $white;
$button-default-border-color: $border-color;
$button-primary-color: $white;
-$button-primary-background-color: #4b0;
-$button-primary-border-color: #4b0;
+$button-primary-background-color: $green;
+$button-primary-border-color: $green;
$button-danger-color: $white;
$button-danger-background-color: $red;
$button-danger-border-color: $red;
diff --git a/packages/vant-css/src/contact-card.css b/packages/vant-css/src/contact-card.css
index a7e9c49da..d81ac8dc1 100644
--- a/packages/vant-css/src/contact-card.css
+++ b/packages/vant-css/src/contact-card.css
@@ -34,8 +34,8 @@
#ff6c6c 20%,
transparent 0,
transparent 25%,
- #3283fa 0,
- #3283fa 45%,
+ $blue 0,
+ $blue 45%,
transparent 0,
transparent 50%
);
diff --git a/packages/vant-css/src/coupon-list.css b/packages/vant-css/src/coupon-list.css
index 7aeb3de15..f3da2a856 100644
--- a/packages/vant-css/src/coupon-list.css
+++ b/packages/vant-css/src/coupon-list.css
@@ -121,8 +121,8 @@
&__reason {
padding: 7px 15px;
- background-color: #fbfbfb;
border-top: 1px dashed $border-color;
+ background-color: $background-color-light;
}
&--disabled {
diff --git a/packages/vant-css/src/info.css b/packages/vant-css/src/info.css
index 52164ccfd..4aca2959b 100644
--- a/packages/vant-css/src/info.css
+++ b/packages/vant-css/src/info.css
@@ -1,9 +1,9 @@
@import './common/var.css';
.van-info {
- color: #fff;
left: 100%;
top: -.5em;
+ color: $white;
font-size: .6em;
font-weight: 500;
padding: 0 .25em;
diff --git a/packages/vant-css/src/notice-bar.css b/packages/vant-css/src/notice-bar.css
index 88d24c9f6..f7a0f53a3 100644
--- a/packages/vant-css/src/notice-bar.css
+++ b/packages/vant-css/src/notice-bar.css
@@ -2,14 +2,14 @@
.van-notice-bar {
display: flex;
- color: #ed6a0c;
height: 40px;
padding: 0 15px;
font-size: 14px;
line-height: 24px;
position: relative;
align-items: center;
- background-color: #fffbe8;
+ color: $orange-dark;
+ background-color: $orange-light;
&--withicon {
position: relative;
diff --git a/packages/vant-css/src/number-keyboard.css b/packages/vant-css/src/number-keyboard.css
index 781547eba..21d65fceb 100644
--- a/packages/vant-css/src/number-keyboard.css
+++ b/packages/vant-css/src/number-keyboard.css
@@ -75,17 +75,17 @@ $van-number-keyboard-key-height: 54px;
line-height: calc($van-number-keyboard-key-height * 2);
}
- &--green {
+ &--blue {
font-size: 20px;
color: $white;
- background-color: $green;
+ background-color: $blue;
&.van-key--active {
- background-color: #308305;
+ background-color: $blue;
}
&::after {
- border-color: $green;
+ border-color: $blue;
}
}
@@ -96,7 +96,7 @@ $van-number-keyboard-key-height: 54px;
}
&--gray {
- background-color: #f3f3f6;
+ background-color: $background-color;
}
&--active {
diff --git a/packages/vant-css/src/pagination.css b/packages/vant-css/src/pagination.css
index 2668b0f16..47f3283f0 100644
--- a/packages/vant-css/src/pagination.css
+++ b/packages/vant-css/src/pagination.css
@@ -8,17 +8,16 @@
&__item {
flex: 1;
+ color: $blue;
height: 40px;
min-width: 36px;
- color: $blue;
background-color: $white;
box-sizing: border-box;
user-select: none;
&:active {
- background-color: $blue;
color: $white;
- opacity: 0.8;
+ background-color: $blue;
}
&::after {
diff --git a/packages/vant-css/src/stepper.css b/packages/vant-css/src/stepper.css
index b53d29d2e..6441dec56 100644
--- a/packages/vant-css/src/stepper.css
+++ b/packages/vant-css/src/stepper.css
@@ -33,7 +33,7 @@
left: 0;
right: 0;
bottom: 0;
- background-color: #6c6c6c;
+ background-color: $gray-darker;
}
&:active {
diff --git a/packages/vant-css/src/steps.css b/packages/vant-css/src/steps.css
index 735e0b96d..bcfe9af5b 100644
--- a/packages/vant-css/src/steps.css
+++ b/packages/vant-css/src/steps.css
@@ -140,8 +140,8 @@
display: block;
width: 5px;
height: 5px;
- background-color: #888;
border-radius: 50%;
+ background-color: $gray-dark;
}
&--vertical {
diff --git a/packages/vant-css/src/switch.css b/packages/vant-css/src/switch.css
index 81267b21c..5afdf960f 100644
--- a/packages/vant-css/src/switch.css
+++ b/packages/vant-css/src/switch.css
@@ -31,7 +31,7 @@
}
&--on {
- background-color: #44db5e;
+ background-color: $blue;
.van-switch__node {
transform: translateX(.6em);
diff --git a/packages/vant-css/src/tabbar.css b/packages/vant-css/src/tabbar.css
index ec8194c7c..37eaaf70f 100644
--- a/packages/vant-css/src/tabbar.css
+++ b/packages/vant-css/src/tabbar.css
@@ -4,7 +4,7 @@
width: 100%;
height: 50px;
display: flex;
- background-color: #fff;
+ background-color: $white;
&--fixed {
left: 0;
@@ -14,10 +14,10 @@
&-item {
flex: 1;
- color: #666;
display: flex;
line-height: 1;
font-size: 12px;
+ color: $gray-darker;
align-items: center;
flex-direction: column;
justify-content: center;