From 22c3097d79765d30badef74e724062d3761b1fb9 Mon Sep 17 00:00:00 2001
From: George Gray <george@ummodesign.com>
Date: Sun, 4 Feb 2018 08:42:13 +0000
Subject: [PATCH] Vars to theme Tabs (#9172)

---
 components/style/themes/default.less  | 11 +++++++++++
 components/tabs/style/card-style.less |  6 +++---
 components/tabs/style/index.less      | 20 +++++---------------
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index b3e4eab5d5..c126bddd40 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -384,7 +384,18 @@
 // ---
 @tabs-card-head-background: @background-color-light;
 @tabs-card-height: 40px;
+@tabs-card-active-color: @primary-color;
 @tabs-title-font-size: @font-size-base;
+@tabs-ink-bar-bg-color: @primary-color;
+@tab-bar-margin: 0 0 16px 0;
+@tab-horizontal-margin: 0 32px 0 0;
+@tab-vertical-margin: 0 0 16px 0;
+@tab-horizontal-padding: 12px 16px;
+@tab-vertical-padding: 8px 24px;
+@tab-scrolling-size: 32px;
+@tab-highlight-color: @primary-color;
+@tab-hover-color: @primary-5;
+@tab-active-color: @primary-7;
 
 // BackTop
 // ---
diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less
index 0f7b7d0299..13604cbb29 100644
--- a/components/tabs/style/card-style.less
+++ b/components/tabs/style/card-style.less
@@ -25,7 +25,7 @@
   &&-card > &-bar &-tab-active {
     background: @component-background;
     border-color: @border-color-split;
-    color: @primary-color;
+    color: @tabs-card-active-color;
     padding-bottom: 1px;
   }
   &&-card > &-bar &-tab-inactive {
@@ -77,8 +77,8 @@
       color: @text-color;
       transition: all .3s;
       &:hover {
-        color: @primary-color;
-        border-color: @primary-color;
+        color: @tabs-card-active-color;
+        border-color: @tabs-card-active-color;
       }
     }
   }
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index c3ae1e693c..93f23936e8 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -1,19 +1,9 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
-@tab-prefix-cls: ~"@{ant-prefix}-tabs";
 
 @import "./card-style";
 
-@tab-bar-margin: 0 0 16px 0;
-
-@tab-horizontal-margin: 0 32px 0 0;
-@tab-vertical-margin: 0 0 16px 0;
-
-@tab-horizontal-padding: 12px 16px;
-@tab-vertical-padding: 8px 24px;
-
-// The width (or height for vertical) of the scrolling arrow
-@tab-scrolling-size: 32px;
+@tab-prefix-cls: ~"@{ant-prefix}-tabs";
 
 .@{tab-prefix-cls} {
   .reset-component;
@@ -28,7 +18,7 @@
     bottom: 1px;
     box-sizing: border-box;
     height: 2px;
-    background-color: @primary-color;
+    background-color: @tabs-ink-bar-bg-color;
     transform-origin: 0 0;
   }
 
@@ -198,11 +188,11 @@
       text-decoration: none;
 
       &:hover {
-        color: @primary-5;
+        color: @tab-hover-color;
       }
 
       &:active {
-        color: @primary-7;
+        color: @tab-active-color;
       }
 
       .@{iconfont-css-prefix} {
@@ -211,7 +201,7 @@
     }
 
     .@{tab-prefix-cls}-tab-active {
-      color: @primary-color;
+      color: @tab-highlight-color;
       font-weight: 500;
     }
   }