[improvement] update color variables (#2010)

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;

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;
       }

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;

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%
     );

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 {

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;

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;

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 {

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 {

packages/vant-css/src/stepper.css

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

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 {

packages/vant-css/src/switch.css

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

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;