From bb18310f1b1088bfa5a57f12a3c416e49f472483 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Mon, 30 Nov 2020 22:39:37 +0800
Subject: [PATCH] docs: uniform color

---
 src/calendar/README.md                               |  2 +-
 src/calendar/README.zh-CN.md                         |  2 +-
 src/calendar/demo/index.vue                          |  4 ++--
 src/checkbox/README.md                               |  2 +-
 src/checkbox/README.zh-CN.md                         |  2 +-
 src/checkbox/demo/index.vue                          |  2 +-
 src/checkbox/test/__snapshots__/demo.spec.js.snap    |  2 +-
 src/goods-action/README.md                           |  2 +-
 src/goods-action/README.zh-CN.md                     |  6 +++---
 src/goods-action/demo/index.vue                      |  2 +-
 .../test/__snapshots__/demo.spec.js.snap             |  2 +-
 src/icon/README.md                                   |  4 ++--
 src/icon/README.zh-CN.md                             |  4 ++--
 src/icon/demo/index.vue                              | 10 +++++-----
 src/radio/README.md                                  |  4 ++--
 src/radio/README.zh-CN.md                            |  4 ++--
 src/radio/demo/index.vue                             | 12 ++++--------
 src/radio/test/__snapshots__/demo.spec.js.snap       |  4 ++--
 src/switch/README.md                                 |  2 +-
 src/switch/README.zh-CN.md                           |  2 +-
 src/switch/demo/index.vue                            |  4 ++--
 src/switch/test/__snapshots__/demo.spec.js.snap      |  2 +-
 src/tabbar/README.md                                 |  2 +-
 src/tabbar/README.zh-CN.md                           |  2 +-
 src/tabbar/demo/index.vue                            |  2 +-
 src/tabbar/test/__snapshots__/demo.spec.js.snap      |  2 +-
 src/utils/constant.ts                                |  1 -
 27 files changed, 42 insertions(+), 47 deletions(-)

diff --git a/src/calendar/README.md b/src/calendar/README.md
index c401bd61b..b15546804 100644
--- a/src/calendar/README.md
+++ b/src/calendar/README.md
@@ -111,7 +111,7 @@ Set `show-confirm` to `false` to hide the confirm button. In this case, the `con
 Use `color` prop to custom calendar color.
 
 ```html
-<van-calendar v-model="show" color="#07c160" />
+<van-calendar v-model="show" color="#1989fa" />
 ```
 
 ### Custom Date Range
diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index e02e25010..466ea73b1 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -113,7 +113,7 @@ export default {
 通过 `color` 属性可以自定义日历的颜色，对选中日期和底部按钮生效。
 
 ```html
-<van-calendar v-model="show" color="#07c160" />
+<van-calendar v-model="show" color="#1989fa" />
 ```
 
 ### 自定义日期范围
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index 5b2c7a767..c075efb88 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -121,7 +121,7 @@
 </template>
 
 <script>
-import { GREEN } from '../../utils/constant';
+import { BLUE } from '../../utils/constant';
 
 export default {
   i18n: {
@@ -235,7 +235,7 @@ export default {
           this.showConfirm = false;
           break;
         case 'customColor':
-          this.color = GREEN;
+          this.color = BLUE;
           break;
         case 'customConfirm':
           this.confirmText = this.t('confirmText');
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index 485c53f70..c9d9edadb 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -43,7 +43,7 @@ export default {
 ### Custom Color
 
 ```html
-<van-checkbox v-model="checked" checked-color="#07c160">Checkbox</van-checkbox>
+<van-checkbox v-model="checked" checked-color="#ee0a24">Checkbox</van-checkbox>
 ```
 
 ### Custom Icon Size
diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md
index 09dcb6650..c97bee200 100644
--- a/src/checkbox/README.zh-CN.md
+++ b/src/checkbox/README.zh-CN.md
@@ -55,7 +55,7 @@ export default {
 通过 `checked-color` 属性设置选中状态的图标颜色。
 
 ```html
-<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
+<van-checkbox v-model="checked" checked-color="#ee0a24">复选框</van-checkbox>
 ```
 
 ### 自定义大小
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index aee4d571b..47a4d8362 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -20,7 +20,7 @@
     </demo-block>
 
     <demo-block :title="t('customColor')">
-      <van-checkbox v-model="checkbox2" checked-color="#07c160">
+      <van-checkbox v-model="checkbox2" checked-color="#ee0a24">
         {{ t('customColor') }}
       </van-checkbox>
     </demo-block>
diff --git a/src/checkbox/test/__snapshots__/demo.spec.js.snap b/src/checkbox/test/__snapshots__/demo.spec.js.snap
index d0eee0534..bb886e42e 100644
--- a/src/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/src/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
-      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
           <!----></i></div><span class="van-checkbox__label">
       自定义颜色
     </span>
diff --git a/src/goods-action/README.md b/src/goods-action/README.md
index 47c986977..9e41edaae 100644
--- a/src/goods-action/README.md
+++ b/src/goods-action/README.md
@@ -57,7 +57,7 @@ Use `badge` prop to show badge in icon.
 
 ```html
 <van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="Icon1" color="#07c160" />
+  <van-goods-action-icon icon="chat-o" text="Icon1" color="#ee0a24" />
   <van-goods-action-icon icon="cart-o" text="Icon2" />
   <van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
   <van-goods-action-button type="warning" text="Button" />
diff --git a/src/goods-action/README.zh-CN.md b/src/goods-action/README.zh-CN.md
index fe5833b7f..ac0a4c23b 100644
--- a/src/goods-action/README.zh-CN.md
+++ b/src/goods-action/README.zh-CN.md
@@ -45,7 +45,7 @@ export default {
 
 ### 徽标提示
 
-在 GoodsActionIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标。
+在 GoodsActionIcon 组件上设置 `dot` 属性后，会在图标右上角展示一个小红点。设置 `badge` 属性后，会在图标右上角展示相应的徽标。
 
 ```html
 <van-goods-action>
@@ -59,11 +59,11 @@ export default {
 
 ### 自定义图标颜色
 
-通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色。
+通过 GoodsActionIcon 的 `color` 属性可以自定义图标的颜色。
 
 ```html
 <van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
+  <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
   <van-goods-action-icon icon="cart-o" text="购物车" />
   <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
   <van-goods-action-button type="warning" text="加入购物车" />
diff --git a/src/goods-action/demo/index.vue b/src/goods-action/demo/index.vue
index 85ff7f0cc..ff9017cd5 100644
--- a/src/goods-action/demo/index.vue
+++ b/src/goods-action/demo/index.vue
@@ -40,7 +40,7 @@
         <van-goods-action-icon
           icon="chat-o"
           :text="t('icon1')"
-          color="#07c160"
+          color="#ee0a24"
         />
         <van-goods-action-icon icon="cart-o" :text="t('icon2')" />
         <van-goods-action-icon
diff --git a/src/goods-action/test/__snapshots__/demo.spec.js.snap b/src/goods-action/test/__snapshots__/demo.spec.js.snap
index e8414e63f..c916dffe8 100644
--- a/src/goods-action/test/__snapshots__/demo.spec.js.snap
+++ b/src/goods-action/test/__snapshots__/demo.spec.js.snap
@@ -49,7 +49,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-goods-action">
       <div role="button" tabindex="0" class="van-goods-action-icon">
-        <div class="van-icon van-icon-chat-o van-goods-action-icon__icon" style="color: rgb(7, 193, 96);">
+        <div class="van-icon van-icon-chat-o van-goods-action-icon__icon" style="color: rgb(238, 10, 36);">
           <!---->
         </div>客服
       </div>
diff --git a/src/icon/README.md b/src/icon/README.md
index 795874810..12ad1999a 100644
--- a/src/icon/README.md
+++ b/src/icon/README.md
@@ -37,8 +37,8 @@ Use `badge` prop, the badge will be displayed in the upper right corner of the i
 Use `color` prop to set icon color.
 
 ```html
-<van-icon name="chat-o" color="#1989fa" />
-<van-icon name="chat-o" color="#07c160" />
+<van-icon name="cart-o" color="#1989fa" />
+<van-icon name="fire-o" color="#ee0a24" />
 ```
 
 ### Icon Size
diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md
index aa14214a1..a1d9b0c65 100644
--- a/src/icon/README.zh-CN.md
+++ b/src/icon/README.zh-CN.md
@@ -39,8 +39,8 @@ Vue.use(Icon);
 `Icon` 的 `color` 属性用来设置图标的颜色。
 
 ```html
-<van-icon name="chat-o" color="#1989fa" />
-<van-icon name="chat-o" color="#07c160" />
+<van-icon name="cart-o" color="#1989fa" />
+<van-icon name="fire-o" color="#ee0a24" />
 ```
 
 ### 图标大小
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index 248dbfea5..64363eef2 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -25,10 +25,10 @@
 
         <demo-block :title="t('color')">
           <van-col span="6" @click="copy(demoIcon, { color: BLUE })">
-            <van-icon :name="demoIcon" :color="BLUE" />
+            <van-icon name="cart-o" :color="BLUE" />
           </van-col>
-          <van-col span="6" @click="copy(demoIcon, { color: GREEN })">
-            <van-icon :name="demoIcon" :color="GREEN" />
+          <van-col span="6" @click="copy(demoIcon, { color: RED })">
+            <van-icon name="fire-o" :color="RED" />
           </van-col>
         </demo-block>
 
@@ -83,7 +83,7 @@
 
 <script>
 import icons from '@vant/icons';
-import { BLUE, GREEN } from '../../utils/constant';
+import { RED, BLUE } from '../../utils/constant';
 
 // from https://30secondsofcode.org
 function copyToClipboard(str) {
@@ -136,8 +136,8 @@ export default {
   },
 
   data() {
+    this.RED = RED;
     this.BLUE = BLUE;
-    this.GREEN = GREEN;
     this.icons = icons;
     return {
       tab: 0,
diff --git a/src/radio/README.md b/src/radio/README.md
index 4da798c25..7503e3009 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -64,8 +64,8 @@ export default {
 
 ```html
 <van-radio-group v-model="radio">
-  <van-radio name="1" checked-color="#07c160">Radio 1</van-radio>
-  <van-radio name="2" checked-color="#07c160">Radio 2</van-radio>
+  <van-radio name="1" checked-color="#ee0a24">Radio 1</van-radio>
+  <van-radio name="2" checked-color="#ee0a24">Radio 2</van-radio>
 </van-radio-group>
 ```
 
diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md
index 3fce26f41..2674bc33c 100644
--- a/src/radio/README.zh-CN.md
+++ b/src/radio/README.zh-CN.md
@@ -76,8 +76,8 @@ export default {
 
 ```html
 <van-radio-group v-model="radio">
-  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>
-  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
+  <van-radio name="1" checked-color="#ee0a24">单选框 1</van-radio>
+  <van-radio name="2" checked-color="#ee0a24">单选框 2</van-radio>
 </van-radio-group>
 ```
 
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index ec64036d4..a09606ee5 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -34,10 +34,10 @@
 
     <demo-block :title="t('customColor')">
       <van-radio-group v-model="radio3" class="demo-radio-group">
-        <van-radio name="1" checked-color="#07c160">
+        <van-radio name="1" checked-color="#ee0a24">
           {{ t('radio') }} 1
         </van-radio>
-        <van-radio name="2" checked-color="#07c160">
+        <van-radio name="2" checked-color="#ee0a24">
           {{ t('radio') }} 2
         </van-radio>
       </van-radio-group>
@@ -45,12 +45,8 @@
 
     <demo-block :title="t('customIconSize')">
       <van-radio-group v-model="radioIconSize" class="demo-radio-group">
-        <van-radio name="1" checked-color="#07c160" icon-size="24px">
-          {{ t('radio') }} 1
-        </van-radio>
-        <van-radio name="2" checked-color="#07c160" icon-size="24px">
-          {{ t('radio') }} 2
-        </van-radio>
+        <van-radio name="1" icon-size="24px"> {{ t('radio') }} 1 </van-radio>
+        <van-radio name="2" icon-size="24px"> {{ t('radio') }} 2 </van-radio>
       </van-radio-group>
     </demo-block>
 
diff --git a/src/radio/test/__snapshots__/demo.spec.js.snap b/src/radio/test/__snapshots__/demo.spec.js.snap
index 37780ae48..3feb1b06c 100644
--- a/src/radio/test/__snapshots__/demo.spec.js.snap
+++ b/src/radio/test/__snapshots__/demo.spec.js.snap
@@ -53,7 +53,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div role="radiogroup" class="demo-radio-group van-radio-group">
       <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
             <!----></i></div><span class="van-radio__label">
         单选框 1
       </span>
@@ -69,7 +69,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div role="radiogroup" class="demo-radio-group van-radio-group">
       <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success">
             <!----></i></div><span class="van-radio__label">
         单选框 1
       </span>
diff --git a/src/switch/README.md b/src/switch/README.md
index 3f3d1a8d1..a9f6a962c 100644
--- a/src/switch/README.md
+++ b/src/switch/README.md
@@ -48,7 +48,7 @@ export default {
 ### Custom Color
 
 ```html
-<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
+<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />
 ```
 
 ### Async Control
diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md
index c83f06e47..35347daa0 100644
--- a/src/switch/README.zh-CN.md
+++ b/src/switch/README.zh-CN.md
@@ -62,7 +62,7 @@ export default {
 `active-color` 属性表示打开时的背景色，`inactive-color` 表示关闭时的背景色。
 
 ```html
-<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
+<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />
 ```
 
 ### 异步控制
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index 2f44b1c55..af4e84c27 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -19,8 +19,8 @@
     <demo-block :title="t('customColor')">
       <van-switch
         v-model="checked3"
-        active-color="#07c160"
-        inactive-color="#ee0a24"
+        active-color="#ee0a24"
+        inactive-color="#dcdee0"
       />
     </demo-block>
 
diff --git a/src/switch/test/__snapshots__/demo.spec.js.snap b/src/switch/test/__snapshots__/demo.spec.js.snap
index c05490ce5..66fb144be 100644
--- a/src/switch/test/__snapshots__/demo.spec.js.snap
+++ b/src/switch/test/__snapshots__/demo.spec.js.snap
@@ -25,7 +25,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="background-color: rgb(7, 193, 96);">
+    <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="background-color: rgb(238, 10, 36);">
       <div class="van-switch__node"></div>
     </div>
   </div>
diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index af4de6846..98c67a9ef 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -99,7 +99,7 @@ export default {
 ### Custom Color
 
 ```html
-<van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
+<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
   <van-tabbar-item icon="home-o">Tab</van-tabbar-item>
   <van-tabbar-item icon="search">Tab</van-tabbar-item>
   <van-tabbar-item icon="friends-o">Tab</van-tabbar-item>
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index 6d32d495f..12dd04df9 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -105,7 +105,7 @@ export default {
 ### 自定义颜色
 
 ```html
-<van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
+<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
   <van-tabbar-item icon="home-o">标签</van-tabbar-item>
   <van-tabbar-item icon="search">标签</van-tabbar-item>
   <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index 47535eae6..8514b74a6 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -55,7 +55,7 @@
     <demo-block :title="t('customColor')">
       <van-tabbar
         v-model="active4"
-        active-color="#07c160"
+        active-color="#ee0a24"
         inactive-color="#000"
       >
         <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
diff --git a/src/tabbar/test/__snapshots__/demo.spec.js.snap b/src/tabbar/test/__snapshots__/demo.spec.js.snap
index 4edc5c2d9..7d3dafc5d 100644
--- a/src/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/src/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -136,7 +136,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
-      <div class="van-tabbar-item van-tabbar-item--active" style="color: rgb(7, 193, 96);">
+      <div class="van-tabbar-item van-tabbar-item--active" style="color: rgb(238, 10, 36);">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
             <!----></i>
           <!---->
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index eb6563daf..25628c550 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -1,7 +1,6 @@
 // color
 export const RED = '#ee0a24';
 export const BLUE = '#1989fa';
-export const GREEN = '#07c160';
 export const WHITE = '#fff';
 
 // border