add vars to theme Breadcrumb component (#9022)

components/breadcrumb/style/index.less

@@ -5,22 +5,23 @@
 
 .@{breadcrumb-prefix-cls} {
   .reset-component;
-  color: @text-color-secondary;
+  color: @breadcrumb-base-color;
+  font-size: @breadcrumb-font-size;
 
   .@{iconfont-css-prefix} {
-    font-size: @font-size-sm;
+    font-size: @breadcrumb-icon-font-size;
   }
 
   a {
-    color: @text-color-secondary;
+    color: @breadcrumb-link-color;
     transition: color .3s;
     &:hover {
-      color: @primary-5;
+      color: @breadcrumb-link-color-hover;
     }
   }
 
   & > span:last-child {
-    color: @text-color;
+    color: @breadcrumb-last-item-color;
   }
 
   & > span:last-child &-separator {
@@ -28,8 +29,8 @@
   }
 
   &-separator {
-    margin: 0 @padding-xs;
-    color: @text-color-secondary;
+    margin: @breadcrumb-separator-margin;
+    color: @breadcrumb-separator-color;
   }
 
   &-link {

components/style/themes/default.less

@@ -403,3 +403,14 @@
 // ---
 @pagination-item-size: 32px;
 @pagination-item-size-sm: 24px;
+
+// Breadcrumb
+// ---
+@breadcrumb-base-color:        @text-color-secondary;
+@breadcrumb-last-item-color:   @text-color;
+@breadcrumb-font-size:         @font-size-base;
+@breadcrumb-icon-font-size:    @font-size-sm;
+@breadcrumb-link-color:        @text-color-secondary;
+@breadcrumb-link-color-hover:  @primary-5;
+@breadcrumb-separator-color:   @text-color-secondary;
+@breadcrumb-separator-margin:  0 @padding-xs;