feat(IndexBar): add @index-bar-index-active-color less var

src/index-anchor/index.less

@@ -15,6 +15,7 @@
     top: 0;
     right: 0;
     left: 0;
+    color: @index-anchor-sticky-text-color;
     background-color: @index-anchor-sticky-background-color;
   }
 }

src/index-bar/index.js

@@ -1,6 +1,5 @@
 // Utils
 import { createNamespace, isDef } from '../utils';
-import { GREEN } from '../utils/constant';
 import { isHidden } from '../utils/dom/style';
 import { preventDefault } from '../utils/dom/event';
 import {
@@ -44,14 +43,11 @@ export default createComponent({
 
   props: {
     zIndex: Number,
+    highlightColor: String,
     sticky: {
       type: Boolean,
       default: true,
     },
-    highlightColor: {
-      type: String,
-      default: GREEN,
-    },
     stickyOffsetTop: {
       type: Number,
       default: 0,

src/index-bar/index.less

@@ -19,5 +19,9 @@
     font-weight: @font-weight-bold;
     font-size: @index-bar-index-font-size;
     line-height: @index-bar-index-line-height;
+
+    &--active {
+      color: @index-bar-index-active-color;
+    }
   }
 }

src/index-bar/test/__snapshots__/index.spec.js.snap

@@ -14,7 +14,7 @@ exports[`custom anchor text 1`] = `
 
 exports[`scroll and update active anchor 1`] = `
 <div class="van-index-bar">
-  <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
+  <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index van-index-bar__index--active">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
   <div data-index="0">
     <div class="van-index-anchor">1</div>
   </div>
@@ -32,12 +32,12 @@ exports[`scroll and update active anchor 1`] = `
 
 exports[`scroll and update active anchor 2`] = `
 <div class="van-index-bar">
-  <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index" style="">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
+  <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
   <div data-index="0" style="height: 10px;">
-    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: undefined; transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96);">1</div>
+    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: undefined; transform: translate3d(0, 0px, 0);">1</div>
   </div>
   <div data-index="1" style="height: 10px;">
-    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: undefined; transform: translate3d(0, 10px, 0); color: rgb(7, 193, 96);">2</div>
+    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: undefined; transform: translate3d(0, 10px, 0);">2</div>
   </div>
   <div data-index="2">
     <div class="van-index-anchor">3</div>

src/style/var.less

@@ -376,12 +376,14 @@
 @index-anchor-font-size: @font-size-md;
 @index-anchor-line-height: 32px;
 @index-anchor-background-color: transparent;
+@index-anchor-sticky-text-color: @green;
 @index-anchor-sticky-background-color: @white;
 
 // IndexBar
 @index-bar-sidebar-z-index: 2;
 @index-bar-index-font-size: @font-size-xs;
 @index-bar-index-line-height: 14px;
+@index-bar-index-active-color: @green;
 
 // Info
 @info-size: 16px;