From 26446891628908bf570c1c46a3cc3a2bb5c48208 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Thu, 16 May 2019 21:08:04 +0800
Subject: [PATCH] [improvement] Tab: add less vars

---
 packages/pagination/index.less | 10 +++++-----
 packages/style/var.less        | 22 +++++++++++++++++-----
 packages/tabs/index.less       | 26 +++++++++++++-------------
 3 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/packages/pagination/index.less b/packages/pagination/index.less
index d11080fd5..4149c271f 100644
--- a/packages/pagination/index.less
+++ b/packages/pagination/index.less
@@ -11,13 +11,13 @@
     box-sizing: border-box;
     min-width: @pagination-item-width;
     height: @pagination-height;
-    color: @pagination-item-theme-color;
+    color: @pagination-item-default-color;
     background-color: @pagination-background-color;
     user-select: none;
 
     &:active {
       color: @white;
-      background-color: @pagination-item-theme-color;
+      background-color: @pagination-item-default-color;
     }
 
     &::after {
@@ -30,14 +30,14 @@
 
     &--disabled,
     &--disabled:active {
-      color: @gray-darker;
-      background-color: @background-color;
+      color: @pagination-item-disabled-color;
+      background-color: @pagination-item-disabled-background-color;
       opacity: @pagination-disabled-opacity;
     }
 
     &--active {
       color: @white;
-      background-color: @pagination-item-theme-color;
+      background-color: @pagination-item-default-color;
     }
   }
 
diff --git a/packages/style/var.less b/packages/style/var.less
index 29266cd4b..ba12f22a3 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -324,7 +324,9 @@
 @pagination-height: 40px;
 @pagination-font-size: 14px;
 @pagination-item-width: 36px;
-@pagination-item-theme-color: @blue;
+@pagination-item-default-color: @blue;
+@pagination-item-disabled-color: @gray-darker;
+@pagination-item-disabled-background-color: @background-color;
 @pagination-background-color: @white;
 @pagination-desc-color: @gray-darker;
 @pagination-disabled-opacity: 0.6;
@@ -500,10 +502,6 @@
 @switch-cell-large-padding-top: @cell-large-vertical-padding - 1px;
 @switch-cell-large-padding-bottom: @cell-large-vertical-padding - 1px;
 
-// Tab
-@tabs-line-height: 44px;
-@tabs-card-height: 30px;
-
 // Tabbar
 @tabbar-height: 50px;
 @tabbar-background-color: @white;
@@ -516,6 +514,20 @@
 @tabbar-item-icon-size: 18px;
 @tabbar-item-margin-bottom: 5px;
 
+// Tab
+@tab-text-color: @gray-darker;
+@tab-active-text-color: @text-color;
+@tab-disabled-text-color: @gray;
+@tab-font-size: 14px;
+
+// Tabs
+@tabs-default-color: @red;
+@tabs-line-height: 44px;
+@tabs-card-height: 30px;
+@tabs-nav-background-color: @white;
+@tabs-bottom-bar-height: 3px;
+@tabs-bottom-bar-color: @tabs-default-color;
+
 // Tag
 @tag-padding: .2em .5em;
 @tag-font-size: 10px;
diff --git a/packages/tabs/index.less b/packages/tabs/index.less
index 75de46cad..67cc1f35b 100644
--- a/packages/tabs/index.less
+++ b/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 {