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;