@background-color-base

components/cascader/style/index.less

@@ -156,7 +156,7 @@
     &-active:not(&-disabled) {
       &,
       &:hover {
-        background-color: #f7f7f7;
+        background-color: @background-color-base;
         font-weight: bold;
       }
     }

components/collapse/style/index.less

@@ -11,7 +11,7 @@
 }
 
 .@{collapse-prefix-cls} {
-  background-color: #f7f7f7;
+  background-color: @background-color-base;
   border-radius: 3px;
   border: 1px solid @border-color-base;
 

components/date-picker/style/RangePicker.less

@@ -44,7 +44,7 @@
     float: left;
     .@{calendar-prefix-cls} {
       &-time-picker-inner {
-        border-right: 1px solid #e9e9e9;
+        border-right: 1px solid @border-color-split;
       }
     }
   }
@@ -54,10 +54,7 @@
     .@{calendar-prefix-cls} {
       &-time-picker-inner {
         margin-left: 21px;
-        border-left: 1px solid #e9e9e9;
+        border-left: 1px solid @border-color-split;
-      }
-      &-time-picker-panel {
-        // padding-left: 22px;
       }
     }
   }
@@ -167,12 +164,11 @@
       border-bottom: 0;
     }
     &-body {
-      border-top: 1px solid #e9e9e9;
+      border-top: 1px solid @border-color-split;
     }
   }
 
   &.@{calendar-prefix-cls}-time {
-
     .@{timepicker-prefix-cls} {
       height: 207px;
       top: 68px;
@@ -191,7 +187,7 @@
       &-combobox {
         display: inline-block;
         background-color: white;
-        border-top: 1px solid #e9e9e9;
+        border-top: 1px solid @border-color-split;
       }
       &-select {
         width: 71px;

components/date-picker/style/TimePicker.less

@@ -137,7 +137,7 @@
     }
 
     li&-option-selected {
-      background: #f7f7f7;
+      background: @background-color-base;
       font-weight: bold;
     }
 

components/mention/style/index.less

@@ -80,7 +80,7 @@
       &-selected {
         &,
         &:hover {
-          background-color: #f7f7f7;
+          background-color: @background-color-base;
           font-weight: bold;
           color: #666;
         }

components/notification/style/index.less

@@ -17,7 +17,7 @@
     border-radius: @border-radius-base;
     box-shadow: @shadow-2;
     border: 1px solid @border-color-base;
-    background: @body-background;
+    background: #fff;
     line-height: 1.5;
     position: relative;
     margin-bottom: @notification-margin-bottom;

components/radio/style/index.less

@@ -213,14 +213,14 @@ span.@{radio-prefix-cls} + * {
 
   &-disabled {
     border-color: @border-color-base;
-    background-color: #f7f7f7;
+    background-color: @background-color-base;
     cursor: not-allowed;
     color: #ccc;
 
     &:first-child,
     &:hover {
       border-color: @border-color-base;
-      background-color: #f7f7f7;
+      background-color: @background-color-base;
       color: #ccc;
     }
     &:first-child {

components/select/style/index.less

@@ -104,7 +104,7 @@
   }
 
   &-disabled &-selection {
-    background: #f7f7f7;
+    background: @background-color-base;
     cursor: not-allowed;
     &:hover,
     &:focus,
@@ -450,7 +450,7 @@
       &-selected {
         &,
         &:hover {
-          background-color: #f7f7f7;
+          background-color: @background-color-base;
           font-weight: bold;
           color: #666;
         }

components/style/themes/default.less

@@ -7,7 +7,6 @@
 
 // ------ Base & Require ------
 @body-background        : #fff;
-
 @font-family            : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
 @code-family            : Consolas,Menlo,Courier,monospace;
 @text-color             : #666;
@@ -48,6 +47,9 @@
 @border-color-base      : #d9d9d9;        // base border outline a component
 @border-color-split     : #e9e9e9;        // split border inside a component
 
+// Background color
+@background-color-base  : #f7f7f7;        // basic gray background
+
 // Shadow
 @shadow-color           : rgba(100, 100, 100, .2);
 @box-shadow-base        : @shadow-1-down;
@@ -65,7 +67,7 @@
 @btn-group-border       : shade(@primary-color, 5%);
 
 @btn-default-color      : @text-color;
-@btn-default-bg         : #f7f7f7;
+@btn-default-bg         : @background-color-base;
 @btn-default-border     : @border-color-base;
 
 @btn-ghost-color        : @text-color;
@@ -73,7 +75,7 @@
 @btn-ghost-border       : @border-color-base;
 
 @btn-disable-color      : #ccc;
-@btn-disable-bg         : #f7f7f7;
+@btn-disable-bg         : @background-color-base;
 @btn-disable-border     : @border-color-base;
 
 @btn-padding-base       : 4px 15px;
@@ -154,6 +156,6 @@
 
 @input-hover-border-color    : @primary-color;
 @input-focus-border-color    : @primary-color;
-@input-disabled-bg           : #f7f7f7;
+@input-disabled-bg           : @background-color-base;
 
 @form-item-margin-bottom     : 24px;

components/table/style/index.less

@@ -2,7 +2,7 @@
 @import "../../style/mixins/index";
 
 @table-prefix-cls: ant-table;
-@table-head-background-color: #f7f7f7;
+@table-head-background-color: @background-color-base;
 
 .@{table-prefix-cls} {
   font-size: @font-size-base;

components/tag/style/index.less

@@ -10,7 +10,7 @@
   padding: 0 8px;
   border-radius: @border-radius-base;
   border: 1px solid @border-color-split;
-  background: #f7f7f7;
+  background: @background-color-base;
   font-size: @font-size-base;
   transition: all 0.3s @ease-in-out-circ;
   vertical-align: middle;

components/time-picker/style/index.less

@@ -137,7 +137,7 @@
     }
 
     li&-option-selected {
-      background: #f7f7f7;
+      background: @background-color-base;
       font-weight: bold;
     }