feat(Step): add @step-active-color less var

src/step/index.js

@@ -17,16 +17,23 @@ export default createComponent({
         return 'process';
       }
     },
+    active() {
+      return this.status === 'process';
+    },
   },
 
   methods: {
     genCircle() {
       const { activeIcon, activeColor, inactiveIcon } = this.parent;
 
-      if (this.status === 'process') {
+      if (this.active) {
         return (
           this.slots('active-icon') || (
-            <Icon class={bem('icon')} name={activeIcon} color={activeColor} />
+            <Icon
+              class={bem('icon', 'active')}
+              name={activeIcon}
+              color={activeColor}
+            />
           )
         );
       }
@@ -44,13 +51,13 @@ export default createComponent({
   },
 
   render() {
-    const { status } = this;
+    const { status, active } = this;
     const { activeColor, direction } = this.parent;
-    const titleStyle = status === 'process' && { color: activeColor };
+    const titleStyle = active && { color: activeColor };
 
     return (
       <div class={[BORDER, bem([direction, { [status]: status }])]}>
-        <div class={bem('title')} style={titleStyle}>
+        <div class={bem('title', { active })} style={titleStyle}>
           {this.slots()}
         </div>
         <div class={bem('circle-container')}>{this.genCircle()}</div>

src/step/index.less

@@ -138,4 +138,11 @@
       background-color: @step-finish-line-color;
     }
   }
+
+  &__icon,
+  &__title {
+    &--active {
+      color: @step-active-color;
+    }
+  }
 }

src/steps/index.js

@@ -1,5 +1,4 @@
 import { createNamespace } from '../utils';
-import { GREEN } from '../utils/constant';
 import { ParentMixin } from '../mixins/relation';
 
 const [createComponent, bem] = createNamespace('steps');
@@ -8,6 +7,7 @@ export default createComponent({
   mixins: [ParentMixin('vanSteps')],
 
   props: {
+    activeColor: String,
     inactiveIcon: String,
     active: {
       type: Number,
@@ -17,10 +17,6 @@ export default createComponent({
       type: String,
       default: 'horizontal',
     },
-    activeColor: {
-      type: String,
-      default: GREEN,
-    },
     activeIcon: {
       type: String,
       default: 'checked',

src/steps/test/__snapshots__/demo.spec.js.snap

@@ -11,8 +11,8 @@ exports[`renders demo correctly 1`] = `
           <div class="van-step__line"></div>
         </div>
         <div class="van-hairline van-step van-step--horizontal van-step--process">
-          <div class="van-step__title" style="color: rgb(7, 193, 96);">商家接单</div>
+          <div class="van-step__title van-step__title--active">商家接单</div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon" style="color: rgb(7, 193, 96);">
+          <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon van-step__icon--active">
               <!----></i></div>
           <div class="van-step__line"></div>
         </div>
@@ -39,8 +39,8 @@ exports[`renders demo correctly 1`] = `
           <div class="van-step__line"></div>
         </div>
         <div class="van-hairline van-step van-step--horizontal van-step--process">
-          <div class="van-step__title" style="color: rgb(51, 136, 255);">商家接单</div>
+          <div class="van-step__title van-step__title--active" style="color: rgb(51, 136, 255);">商家接单</div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-success van-step__icon" style="color: rgb(51, 136, 255);">
+          <div class="van-step__circle-container"><i class="van-icon van-icon-success van-step__icon van-step__icon--active" style="color: rgb(51, 136, 255);">
               <!----></i></div>
           <div class="van-step__line"></div>
         </div>
@@ -63,11 +63,11 @@ exports[`renders demo correctly 1`] = `
     <div class="van-steps van-steps--vertical">
       <div class="van-steps__items">
         <div class="van-hairline van-step van-step--vertical van-step--process">
-          <div class="van-step__title" style="color: rgb(7, 193, 96);">
+          <div class="van-step__title van-step__title--active">
             <h3>【城市】物流状态1</h3>
             <p>2016-07-12 12:40</p>
           </div>
-          <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon" style="color: rgb(7, 193, 96);">
+          <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon van-step__icon--active">
               <!----></i></div>
           <div class="van-step__line"></div>
         </div>

src/steps/test/__snapshots__/index.spec.js.snap

@@ -11,7 +11,7 @@ exports[`icon slot 1`] = `
       <div class="van-step__line"></div>
     </div>
     <div class="van-hairline van-step van-step--horizontal van-step--process">
-      <div class="van-step__title" style="color: rgb(7, 193, 96);">
+      <div class="van-step__title van-step__title--active">
         B
       </div>
       <div class="van-step__circle-container">Custim Active Icon</div>

src/style/var.less

@@ -611,6 +611,7 @@
 
 // Step
 @step-text-color: @gray-6;
+@step-active-color: @green;
 @step-process-text-color: @text-color;
 @step-font-size: @font-size-md;
 @step-line-color: @border-color;