[improvement] update color variables (#842)

example/pages/field/index.wxss

@@ -3,5 +3,5 @@
 }
 
 .icon {
-  color: #38f;
+  color: #1989fa;
 }

example/pages/nav-bar/index.wxss

@@ -1,3 +1,3 @@
 .icon {
-  color: #38f;
+  color: #1989fa;
 }

example/pages/notify/index.js

@@ -11,7 +11,7 @@ Page({
       duration: 1000,
       text: '通知内容',
       selector: '#custom-selector',
-      backgroundColor: '#38f'
+      backgroundColor: '#1989fa'
     });
   }
 });

example/pages/submit-bar/index.wxml

@@ -39,7 +39,7 @@
     <van-tag type="primary" custom-class="van-tag">标签</van-tag>
     <view slot="tip">
       您的收货地址不支持同城送
-      <text class="van-edit-address" bindtap="onClickLink">修改地址</text>
+      <text class="edit-address" bindtap="onClickLink">修改地址</text>
     </view>
   </van-submit-bar>
 </demo-block>

example/pages/submit-bar/index.wxss

@@ -2,8 +2,8 @@
   position: relative !important;
 }
 
-.van-edit-address {
+.edit-address {
-  color: #38f;
+  color: #1989fa;
 }
 
 .van-tag {

example/pages/tag/index.wxml

@@ -1,8 +1,8 @@
 <demo-block title="基础用法" padding>
   <van-tag class="demo-margin-right">标签</van-tag>
   <van-tag class="demo-margin-right" type="danger">标签</van-tag>
-  <van-tag class="demo-margin-right" type="success">标签</van-tag>
+  <van-tag class="demo-margin-right" type="primary">标签</van-tag>
-  <van-tag type="primary">标签</van-tag>
+  <van-tag type="success">标签</van-tag>
 </demo-block>
 
 <demo-block title="空心样式" padding>

example/pages/transition/index.wxss

@@ -5,5 +5,5 @@
   height: 100px;
   position: fixed;
   margin: -50px 0 0 -50px;
-  background-color: #38f;
+  background-color: #1989fa;
 }

packages/area/index.wxml

@@ -6,7 +6,7 @@
   </view>
 
   <view wx:if="{{ loading }}" class="van-picker__loading">
-    <van-loading color="#38f"/>
+    <van-loading color="#1989fa"/>
   </view>
 
   <picker-view

packages/card/index.less

@@ -4,10 +4,10 @@
   box-sizing: border-box;
   position: relative;
   height: 100px;
-  padding: 5px 15px 5px 115px;
-  background: #fafafa;
-  color: @text-color;
   font-size: 12px;
+  color: @text-color;
+  padding: 5px 15px 5px 115px;
+  background: @background-color-light;
 
   &--center {
     align-items: center;

packages/checkbox/index.less

@@ -18,7 +18,7 @@
     display: block;
     width: @van-checkbox-size;
     height: @van-checkbox-size;
-    border: 1px solid #aaa;
+    border: 1px solid @gray-light;
     color: transparent;
     font-size: 12px;
     text-align: center;
@@ -28,9 +28,9 @@
     }
 
     &--checked {
+      color: @white;
       border-color: @green;
       background-color: @green;
-      color: #fff;
     }
 
     &--disabled {

packages/common/color.ts

@@ -0,0 +1,3 @@
+export const RED = '#f44';
+export const BLUE = '#1989fa';
+export const GREEN = '#4b0';

packages/common/style/var.less

@@ -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 @@
 @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-background-color: @green;
-@button-primary-border-color: #4b0;
+@button-primary-border-color: @green;
 @button-danger-color: @white;
 @button-danger-background-color: @red;
 @button-danger-border-color: @red;

packages/icon/index.less

@@ -15,7 +15,7 @@
   text-rendering: auto;
 
   &__info {
-    color: #fff;
+    color: @white;
     left: 100%;
     top: -.5em;
     font-size: .6em;

packages/notify/README.md

@@ -31,7 +31,7 @@ Notify({
   text: '通知内容',
   duration: 1000,
   selector: '#custom-selector',
-  backgroundColor: '#38f'
+  backgroundColor: '#1989fa'
 });
 ```
 
@@ -47,7 +47,7 @@ Notify({
 | duration | 持续时间 | `Number` | `3000` |
 | selector | 自定义选择器 | `String` | `van-notify` |
 | color | 字体颜色 | `String` | `#fff` | |
-| backgroundColor | 背景色 | `String` | `#e64340` |
+| backgroundColor | 背景色 | `String` | `#f44` |
 
 ### 更新日志
 

packages/notify/index.less

@@ -10,5 +10,4 @@
   line-height: 2.3;
   font-size: 14px;
   text-align: center;
-  background-color: #E64340;
 }

packages/notify/index.ts

@@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { RED } from '../common/color';
 
 VantComponent({
   props: {
@@ -9,7 +10,7 @@ VantComponent({
     },
     backgroundColor: {
       type: String,
-      value: '#e64340'
+      value: RED
     },
     duration: {
       type: Number,

packages/progress/README.md

@@ -57,7 +57,7 @@
 | 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` | 与进度条颜色一致 |

packages/progress/index.ts

@@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { BLUE } from '../common/color';
 
 VantComponent({
   props: {
@@ -12,7 +13,7 @@ VantComponent({
     },
     color: {
       type: String,
-      value: '#38f'
+      value: BLUE
     },
     textColor: {
       type: String,

packages/stepper/index.less

@@ -39,7 +39,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: #6c6c6c;
+      background-color: @gray-darker;
     }
 
     &:active {

packages/steps/README.md

@@ -63,7 +63,7 @@ Page({
 |-----------|-----------|-----------|-------------|
 | active | 当前步骤 | `Number` | 0 |
 | direction | 显示方向，可选值为 `horizontal` `vertical` | `String` | `horizontal` |
-| active-color | 激活状态颜色 | `String` | `#06bf04` |
+| active-color | 激活状态颜色 | `String` | `#4b0` |
 
 ### 外部样式类
 

packages/steps/index.less

@@ -36,8 +36,8 @@
   &__circle {
     width: 5px;
     height: 5px;
-    background-color: #999;
     border-radius: 50%;
+    background-color: @gray-dark;
   }
 
   &--horizontal {

packages/steps/index.ts

@@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { GREEN } from '../common/color';
 
 VantComponent({
   props: {
@@ -11,7 +12,7 @@ VantComponent({
     },
     activeColor: {
       type: String,
-      value: '#06bf04'
+      value: GREEN
     }
   },
 

packages/switch/index.less

@@ -32,7 +32,7 @@
   }
 
   &--on {
-    background-color: #44db5e;
+    background-color: @blue;
 
     .van-switch__node {
       transform: translateX(.6em);

packages/tabbar-item/index.less

@@ -5,7 +5,7 @@
 }
 
 .van-tabbar-item {
-  color: #666;
+  color: @gray-darker;
   height: 100%;
   display: flex;
   line-height: 1;
@@ -23,7 +23,7 @@
       display: block;
 
       &__info {
-        color: #fff;
+        color: @white;
         left: 100%;
         top: -.5em;
         font-size: .6em;

packages/tag/README.md

@@ -17,8 +17,8 @@
 ```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>
 ```
 
 #### 空心样式

packages/tag/index.ts

@@ -1,10 +1,11 @@
 import { VantComponent } from '../common/component';
+import { RED, BLUE, GREEN } from '../common/color';
 
 const DEFAULT_COLOR = '#999';
 const COLOR_MAP = {
-  danger: '#f44',
+  danger: RED,
-  primary: '#38f',
+  primary: BLUE,
-  success: '#06bf04'
+  success: GREEN
 };
 
 VantComponent({

packages/tree-select/index.less

@@ -12,14 +12,14 @@
     top: 0;
     bottom: 0;
     overflow: scroll;
-    background-color: #fff;
+    background-color: @white;
     -webkit-overflow-scrolling: touch;
   }
 
   &__nitem {
     line-height: 44px;
     padding: 0 15px;
-    background-color: #fff;
+    background-color: @white;
 
     &:active,
     &--active {