From 65a5ed85537b7a406655bd39f7e4f5332d780a82 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Mon, 30 Nov 2020 22:51:34 +0800
Subject: [PATCH] style(Circle): add @circle-layer-color less var

---
 src/button/index.tsx                          |  4 +--
 .../test/__snapshots__/demo.spec.js.snap      |  4 +--
 .../test/__snapshots__/index.spec.js.snap     |  4 +--
 src/circle/README.md                          |  1 +
 src/circle/README.zh-CN.md                    |  1 +
 src/circle/index.js                           | 28 ++++++++-----------
 src/circle/index.less                         |  4 +++
 .../test/__snapshots__/demo.spec.js.snap      | 24 ++++++++--------
 .../test/__snapshots__/index.spec.js.snap     | 12 ++++----
 .../test/__snapshots__/demo.spec.js.snap      |  4 +--
 src/style/var.less                            |  1 +
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 src/utils/constant.ts                         |  1 -
 13 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/src/button/index.tsx b/src/button/index.tsx
index dbcfc06ad..5048333e2 100644
--- a/src/button/index.tsx
+++ b/src/button/index.tsx
@@ -1,7 +1,7 @@
 // Utils
 import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
-import { BORDER_SURROUND, WHITE } from '../utils/constant';
+import { BORDER_SURROUND } from '../utils/constant';
 import { routeProps, RouteProps, functionalRoute } from '../utils/router';
 
 // Components
@@ -70,7 +70,7 @@ function Button(
   const style: Record<string, string | number> = {};
 
   if (color) {
-    style.color = plain ? color : WHITE;
+    style.color = plain ? color : 'white';
 
     if (!plain) {
       // Use background instead of backgroundColor to make linear-gradient work
diff --git a/src/button/test/__snapshots__/demo.spec.js.snap b/src/button/test/__snapshots__/demo.spec.js.snap
index 466a4c918..6f531106b 100644
--- a/src/button/test/__snapshots__/demo.spec.js.snap
+++ b/src/button/test/__snapshots__/demo.spec.js.snap
@@ -75,11 +75,11 @@ exports[`renders demo correctly 1`] = `
     </button> <button class="van-button van-button--primary van-button--normal">
       <div class="van-button__content"><span class="van-button__text">路由跳转</span></div>
     </button></div>
-  <div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
+  <div><button class="van-button van-button--default van-button--normal" style="color: white; background: rgb(114, 50, 221); border-color: #7232dd;">
       <div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
     </button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;">
       <div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
-    </button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;">
+    </button> <button class="van-button van-button--default van-button--normal" style="color: white; border: 0px;">
       <div class="van-button__content"><span class="van-button__text">渐变色按钮</span></div>
     </button></div>
 </div>
diff --git a/src/calendar/test/__snapshots__/index.spec.js.snap b/src/calendar/test/__snapshots__/index.spec.js.snap
index a45e76732..36899eec8 100644
--- a/src/calendar/test/__snapshots__/index.spec.js.snap
+++ b/src/calendar/test/__snapshots__/index.spec.js.snap
@@ -47,7 +47,7 @@ exports[`color prop when type is range 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: white; background: blue; border-color: blue;">
       <div class="van-button__content"><span class="van-button__text">确定</span></div>
     </button></div>
 </div>
@@ -100,7 +100,7 @@ exports[`color prop when type is single 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: white; background: blue; border-color: blue;">
       <div class="van-button__content"><span class="van-button__text">确定</span></div>
     </button></div>
 </div>
diff --git a/src/circle/README.md b/src/circle/README.md
index c84a8590c..6ea277773 100644
--- a/src/circle/README.md
+++ b/src/circle/README.md
@@ -132,6 +132,7 @@ How to use: [Custom Theme](#/en-US/theme).
 | Name                     | Default Value       | Description |
 | ------------------------ | ------------------- | ----------- |
 | @circle-color            | `@blue`             | -           |
+| @circle-layer-color      | `@white`            | -           |
 | @circle-text-color       | `@text-color`       | -           |
 | @circle-text-font-weight | `@font-weight-bold` | -           |
 | @circle-text-font-size   | `@font-size-md`     | -           |
diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md
index d2247be9a..a56b88eb7 100644
--- a/src/circle/README.zh-CN.md
+++ b/src/circle/README.zh-CN.md
@@ -143,6 +143,7 @@ export default {
 | 名称                     | 默认值              | 描述 |
 | ------------------------ | ------------------- | ---- |
 | @circle-color            | `@blue`             | -    |
+| @circle-layer-color      | `@white`            | -    |
 | @circle-text-color       | `@text-color`       | -    |
 | @circle-text-font-weight | `@font-weight-bold` | -    |
 | @circle-text-font-size   | `@font-size-md`     | -    |
diff --git a/src/circle/index.js b/src/circle/index.js
index 81a842909..d77c7af95 100644
--- a/src/circle/index.js
+++ b/src/circle/index.js
@@ -1,6 +1,5 @@
 import { createNamespace, isObject, addUnit } from '../utils';
 import { raf, cancelRaf } from '../utils/dom/raf';
-import { WHITE } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('circle');
 
@@ -23,6 +22,7 @@ export default createComponent({
   props: {
     text: String,
     color: [String, Object],
+    layerColor: String,
     strokeLinecap: String,
     value: {
       type: Number,
@@ -44,10 +44,6 @@ export default createComponent({
       type: [Number, String],
       default: 100,
     },
-    layerColor: {
-      type: String,
-      default: WHITE,
-    },
     strokeWidth: {
       type: [Number, String],
       default: 40,
@@ -80,6 +76,14 @@ export default createComponent({
     },
 
     layerStyle() {
+      return {
+        fill: `${this.fill}`,
+        stroke: `${this.layerColor}`,
+        strokeWidth: `${this.strokeWidth}px`,
+      };
+    },
+
+    hoverStyle() {
       const offset = (PERIMETER * this.value) / 100;
 
       return {
@@ -90,14 +94,6 @@ export default createComponent({
       };
     },
 
-    hoverStyle() {
-      return {
-        fill: `${this.fill}`,
-        stroke: `${this.layerColor}`,
-        strokeWidth: `${this.strokeWidth}px`,
-      };
-    },
-
     gradient() {
       return isObject(this.color);
     },
@@ -164,11 +160,11 @@ export default createComponent({
       <div class={bem()} style={this.style}>
         <svg viewBox={`0 0 ${this.viewBoxSize} ${this.viewBoxSize}`}>
           {this.LinearGradient}
-          <path class={bem('hover')} style={this.hoverStyle} d={this.path} />
+          <path class={bem('layer')} style={this.layerStyle} d={this.path} />
           <path
             d={this.path}
-            class={bem('layer')}
-            style={this.layerStyle}
+            class={bem('hover')}
+            style={this.hoverStyle}
             stroke={this.gradient ? `url(#${this.uid})` : this.color}
           />
         </svg>
diff --git a/src/circle/index.less b/src/circle/index.less
index 978ac220b..40f51e015 100644
--- a/src/circle/index.less
+++ b/src/circle/index.less
@@ -14,6 +14,10 @@
   }
 
   &__layer {
+    stroke: @circle-layer-color;
+  }
+
+  &__hover {
     fill: none;
     stroke: @circle-color;
     stroke-linecap: round;
diff --git a/src/circle/test/__snapshots__/demo.spec.js.snap b/src/circle/test/__snapshots__/demo.spec.js.snap
index 46643df77..2512dab4e 100644
--- a/src/circle/test/__snapshots__/demo.spec.js.snap
+++ b/src/circle/test/__snapshots__/demo.spec.js.snap
@@ -4,22 +4,22 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">70%</div>
     </div>
   </div>
   <div>
     <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 60px;"></path>
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
+        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 60px;"></path>
+        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">宽度定制</div>
     </div>
     <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__layer" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__hover" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">颜色定制</div>
     </div>
@@ -30,20 +30,20 @@ exports[`renders demo correctly 1`] = `
             <stop offset="100%" stop-color="#6149f6"></stop>
           </linearGradient>
         </defs>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="url(#van-circle-gradient-3)" class="van-circle__layer" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="url(#van-circle-gradient-3)" class="van-circle__hover" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">渐变色</div>
     </div>
     <div class="van-circle" style="width: 100px; height: 100px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__layer" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__hover" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">逆时针</div>
     </div>
     <div class="van-circle" style="width: 120px; height: 120px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#7232dd" class="van-circle__layer" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#7232dd" class="van-circle__hover" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">大小定制</div>
     </div>
diff --git a/src/circle/test/__snapshots__/index.spec.js.snap b/src/circle/test/__snapshots__/index.spec.js.snap
index f9d78db40..3680a6ce3 100644
--- a/src/circle/test/__snapshots__/index.spec.js.snap
+++ b/src/circle/test/__snapshots__/index.spec.js.snap
@@ -2,21 +2,21 @@
 
 exports[`size prop 1`] = `
 <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
   </svg></div>
 `;
 
 exports[`speed is 0 1`] = `
 <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
   </svg></div>
 `;
 
 exports[`stroke-linecap prop 1`] = `
 <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
   </svg></div>
 `;
diff --git a/src/goods-action/test/__snapshots__/demo.spec.js.snap b/src/goods-action/test/__snapshots__/demo.spec.js.snap
index c916dffe8..efac4d1b1 100644
--- a/src/goods-action/test/__snapshots__/demo.spec.js.snap
+++ b/src/goods-action/test/__snapshots__/demo.spec.js.snap
@@ -80,9 +80,9 @@ exports[`renders demo correctly 1`] = `
         <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
           <!---->
         </div>购物车
-      </div> <button class="van-button van-button--warning van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
+      </div> <button class="van-button van-button--warning van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--warning" style="color: white; background: rgb(190, 153, 255); border-color: #be99ff;">
         <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
-      </button> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
+      </button> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger" style="color: white; background: rgb(114, 50, 221); border-color: #7232dd;">
         <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
       </button>
     </div>
diff --git a/src/style/var.less b/src/style/var.less
index 647862b8b..d9ba3ed8d 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -242,6 +242,7 @@
 
 // Circle
 @circle-color: @blue;
+@circle-layer-color: @white;
 @circle-text-color: @text-color;
 @circle-text-font-weight: @font-weight-bold;
 @circle-text-font-size: @font-size-md;
diff --git a/src/submit-bar/test/__snapshots__/index.spec.js.snap b/src/submit-bar/test/__snapshots__/index.spec.js.snap
index ef4265298..00935bbf9 100644
--- a/src/submit-bar/test/__snapshots__/index.spec.js.snap
+++ b/src/submit-bar/test/__snapshots__/index.spec.js.snap
@@ -8,7 +8,7 @@ exports[`button slot 1`] = `
 
 exports[`button-color prop 1`] = `
 <div class="van-submit-bar">
-  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger" style="color: rgb(255, 255, 255); background: red; border-color: red;">
+  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger" style="color: white; background: red; border-color: red;">
       <div class="van-button__content"></div>
     </button></div>
 </div>
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index d9c41d913..c8ec11e4f 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -1,6 +1,5 @@
 // color
 export const RED = '#ee0a24';
-export const WHITE = '#fff';
 
 // border
 export const BORDER = 'van-hairline';