feat(Coupon): add @coupon-corner-checkbox-icon-color var (#8323)

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` | - |

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`                       | -    |

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>

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>

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 {

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,

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',

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;

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`;