From e1bfb7b27df362bc4f9527630e570c6e2ceceeb5 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 12 Mar 2021 09:43:31 +0800
Subject: [PATCH] feat(Coupon): add @coupon-corner-checkbox-icon-color var
 (#8323)

---
 src/coupon-list/README.md                             | 1 +
 src/coupon-list/README.zh-CN.md                       | 1 +
 src/coupon-list/test/__snapshots__/index.spec.ts.snap | 4 +---
 src/coupon/Coupon.tsx                                 | 7 +------
 src/coupon/index.less                                 | 5 +++++
 src/dropdown-menu/demo/index.vue                      | 6 ++----
 src/icon/demo/index.vue                               | 6 ++----
 src/style/var.less                                    | 1 +
 src/utils/constant.ts                                 | 3 ---
 9 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md
index 96226f5f6..1b44f267c 100644
--- a/src/coupon-list/README.md
+++ b/src/coupon-list/README.md
@@ -157,6 +157,7 @@ How to use: [Custom Theme](#/en-US/theme).
 | @coupon-disabled-text-color | `@gray-6` | - |
 | @coupon-description-padding | `@padding-xs @padding-md` | - |
 | @coupon-description-border-color | `@border-color` | - |
+| @coupon-corner-checkbox-icon-color | `@red` | - |
 | @coupon-list-background-color | `@background-color` | - |
 | @coupon-list-field-padding | `5px 0 5px @padding-md` | - |
 | @coupon-list-exchange-button-height | `32px` | - |
diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md
index 2d23dfcfc..6298580f6 100644
--- a/src/coupon-list/README.zh-CN.md
+++ b/src/coupon-list/README.zh-CN.md
@@ -159,6 +159,7 @@ export default {
 | @coupon-disabled-text-color         | `@gray-6`                    | -    |
 | @coupon-description-padding         | `@padding-xs @padding-md`    | -    |
 | @coupon-description-border-color    | `@border-color`              | -    |
+| @coupon-corner-checkbox-icon-color  | `@red`                       | -    |
 | @coupon-list-background-color       | `@background-color`          | -    |
 | @coupon-list-field-padding          | `5px 0 5px @padding-md`      | -    |
 | @coupon-list-exchange-button-height | `32px`                       | -    |
diff --git a/src/coupon-list/test/__snapshots__/index.spec.ts.snap b/src/coupon-list/test/__snapshots__/index.spec.ts.snap
index 478acfd27..f36f70c18 100644
--- a/src/coupon-list/test/__snapshots__/index.spec.ts.snap
+++ b/src/coupon-list/test/__snapshots__/index.spec.ts.snap
@@ -115,9 +115,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
                      aria-checked="true"
                 >
                   <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
-                    <i class="van-badge__wrapper van-icon van-icon-success"
-                       style="border-color: #ee0a24; background-color: rgb(238, 10, 36);"
-                    >
+                    <i class="van-badge__wrapper van-icon van-icon-success">
                     </i>
                   </div>
                 </div>
diff --git a/src/coupon/Coupon.tsx b/src/coupon/Coupon.tsx
index 720ab59b0..1d68f8ad2 100644
--- a/src/coupon/Coupon.tsx
+++ b/src/coupon/Coupon.tsx
@@ -1,6 +1,5 @@
 import { computed, PropType, defineComponent } from 'vue';
 import { padZero, createNamespace } from '../utils';
-import { RED } from '../utils/constant';
 import { Checkbox } from '../checkbox';
 
 export type CouponInfo = {
@@ -101,11 +100,7 @@ export default defineComponent({
               <p class={bem('name')}>{coupon.name}</p>
               <p class={bem('valid')}>{validPeriod.value}</p>
               {!disabled && (
-                <Checkbox
-                  class={bem('corner')}
-                  modelValue={chosen}
-                  checkedColor={RED}
-                />
+                <Checkbox class={bem('corner')} modelValue={chosen} />
               )}
             </div>
           </div>
diff --git a/src/coupon/index.less b/src/coupon/index.less
index 22b071261..876553e0f 100644
--- a/src/coupon/index.less
+++ b/src/coupon/index.less
@@ -80,6 +80,11 @@
     top: 0;
     right: @padding-md;
     bottom: 0;
+
+    .van-checkbox__icon--checked .van-icon {
+      background-color: @coupon-corner-checkbox-icon-color;
+      border-color: @coupon-corner-checkbox-icon-color;
+    }
   }
 
   &__description {
diff --git a/src/dropdown-menu/demo/index.vue b/src/dropdown-menu/demo/index.vue
index fd82967d1..9b495214f 100644
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@@ -12,12 +12,12 @@
       <van-dropdown-item :title="t('itemTitle')" ref="item">
         <van-cell center :title="t('switchTitle1')">
           <template #right-icon>
-            <van-switch v-model="switch1" size="24" :active-color="RED" />
+            <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
           </template>
         </van-cell>
         <van-cell center :title="t('switchTitle2')">
           <template #right-icon>
-            <van-switch v-model="switch2" size="24" :active-color="RED" />
+            <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
           </template>
         </van-cell>
         <div style="padding: 5px 16px">
@@ -61,7 +61,6 @@
 import { computed, reactive, ref, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ComponentInstance } from '../../utils';
-import { RED } from '../../utils/constant';
 
 const i18n = {
   'zh-CN': {
@@ -126,7 +125,6 @@ export default {
     return {
       ...toRefs(state),
       t,
-      RED,
       item,
       option1,
       option2,
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index 96dcc324b..746d42734 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -31,8 +31,8 @@
           <van-col span="6" @click="copy(demoIcon, { color: '#1989fa' })">
             <van-icon name="cart-o" color="#1989fa" />
           </van-col>
-          <van-col span="6" @click="copy(demoIcon, { color: RED })">
-            <van-icon name="fire-o" :color="RED" />
+          <van-col span="6" @click="copy(demoIcon, { color: '#ee0a24' })">
+            <van-icon name="fire-o" color="#ee0a24" />
           </van-col>
         </van-row>
       </demo-block>
@@ -97,7 +97,6 @@
 import icons from '@vant/icons';
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import { RED } from '../../utils/constant';
 import { Notify } from '../../notify';
 
 // from https://30secondsofcode.org
@@ -185,7 +184,6 @@ export default {
     return {
       t,
       tab,
-      RED,
       copy,
       icons,
       demoIcon: 'chat-o',
diff --git a/src/style/var.less b/src/style/var.less
index 9aa9cc97c..c4e1c5c94 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -317,6 +317,7 @@
 @coupon-disabled-text-color: @gray-6;
 @coupon-description-padding: @padding-xs @padding-md;
 @coupon-description-border-color: @border-color;
+@coupon-corner-checkbox-icon-color: @red;
 
 // CouponCell
 @coupon-cell-selected-text-color: @text-color;
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index c8ec11e4f..8e95a3151 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -1,6 +1,3 @@
-// color
-export const RED = '#ee0a24';
-
 // border
 export const BORDER = 'van-hairline';
 export const BORDER_TOP = `${BORDER}--top`;