[improvement] Tab: add less vars

packages/tabs/index.less

@@ -6,8 +6,8 @@
   box-sizing: border-box;
   min-width: 0; // hack for flex ellipsis
   padding: 0 5px;
-  color: @gray-darker;
-  font-size: 14px;
+  color: @tab-text-color;
+  font-size: @tab-font-size;
   line-height: @tabs-line-height;
   text-align: center;
   cursor: pointer;
@@ -17,12 +17,12 @@
   }
 
   &--active {
-    color: @text-color;
+    color: @tab-active-text-color;
     font-weight: 500;
   }
 
   &--disabled {
-    color: @gray;
+    color: @tab-disabled-text-color;
   }
 }
 
@@ -70,7 +70,7 @@
   &__nav {
     position: relative;
     display: flex;
-    background-color: @white;
+    background-color: @tabs-nav-background-color;
     user-select: none;
 
     &--line {
@@ -83,13 +83,13 @@
       box-sizing: border-box;
       height: @tabs-card-height;
       margin: 0 15px;
-      border: 1px solid @red;
+      border: 1px solid @tabs-default-color;
       border-radius: 2px;
 
       .van-tab {
-        color: @red;
+        color: @tabs-default-color;
         line-height: @tabs-card-height - 2px;
-        border-right: 1px solid @red;
+        border-right: 1px solid @tabs-default-color;
 
         &:last-child {
           border-right: none;
@@ -97,11 +97,11 @@
 
         &.van-tab--active {
           color: @white;
-          background-color: @red;
+          background-color: @tabs-default-color;
         }
 
         &--disabled {
-          color: @gray;
+          color: @tab-disabled-text-color;
         }
       }
     }
@@ -112,9 +112,9 @@
     bottom: 15px;
     left: 0;
     z-index: 1;
-    height: 3px;
-    background-color: @red;
-    border-radius: 3px;
+    height: @tabs-bottom-bar-height;
+    background-color: @tabs-bottom-bar-color;
+    border-radius: @tabs-bottom-bar-height;
   }
 
   &__track {