[Doc] update neutral color variables (#2130)

docs/markdown/theme.en-US.md

@@ -20,12 +20,12 @@ There are some basic variables below, all available variables could be found in
 @green: #4b0;
 @gray: #c9c9c9;
 @gray-light: #e5e5e5;
-@gray-darker: #666;
+@gray-darker: #7d7e80;
-@gray-dark: #999;
+@gray-dark: #969799;
 
 // default colors
-@text-color: #333;
+@text-color: #323233;
-@border-color: #eee;
+@border-color: #ebedf0;
 @active-color: #e8e8e8;
 @background-color: #f8f8f8;
 @background-color-light: #fafafa;

docs/markdown/theme.zh-CN.md

@@ -24,12 +24,12 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置
 @green: #4b0;
 @gray: #c9c9c9;
 @gray-light: #e5e5e5;
-@gray-darker: #666;
+@gray-darker: #7d7e80;
-@gray-dark: #999;
+@gray-dark: #969799;
 
 // default colors
-@text-color: #333;
+@text-color: #323233;
-@border-color: #eee;
+@border-color: #ebedf0;
 @active-color: #e8e8e8;
 @background-color: #f8f8f8;
 @background-color-light: #fafafa;

docs/src/WapApp.vue

@@ -43,9 +43,11 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../packages/style/var';
+
 body {
-  color: #333;
   line-height: 1;
+  color: @text-color;
   background-color: #fafafa;
   font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

docs/src/components/DemoList.vue

@@ -128,7 +128,7 @@ export default {
     display: inline-block;
 
     &.active {
-      color: #fff;
+      color: @white;
       background-color: @blue;
     }
   }

packages/badge/demo/index.vue

@@ -46,12 +46,14 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-badge {
   .van-badge-group {
     width: auto;
     margin: 0 15px;
     padding: 20px 0;
-    background-color: #fff;
+    background-color: @white;
 
     &::after {
       display: none;

packages/circle/demo/index.vue

@@ -14,7 +14,7 @@
         fill="#fff"
         :rate="rate"
         size="120px"
-        layer-color="#eee"
+        layer-color="#ebedf0"
         :speed="100"
         :stroke-width="60"
         :clockwise="false"

packages/circle/en-US.md

@@ -43,7 +43,7 @@ export default {
   color="#13ce66"
   fill="#fff"
   size="120px"
-  layer-color="#eee"
+  layer-color="#ebedf0"
   :text="text"
   :rate="rate"
   :speed="100"

packages/circle/test/__snapshots__/demo.spec.js.snap

@@ -12,7 +12,7 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div class="van-circle" style="width:120px;height:120px;">
       <svg viewBox="0 0 1060 1060">
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill:#fff;stroke:#eee;stroke-width:60px;"></path>
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill:#fff;stroke:#ebedf0;stroke-width:60px;"></path>
         <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke:#13ce66;stroke-dashoffset:3140px;stroke-width:61px;"></path>
       </svg>
       <div class="van-circle__text">0%</div>

packages/circle/zh-CN.md

@@ -44,7 +44,7 @@ export default {
   color="#13ce66"
   fill="#fff"
   size="120px"
-  layer-color="#eee"
+  layer-color="#ebedf0"
   :text="text"
   :rate="rate"
   :speed="100"

packages/col/demo/index.vue

@@ -97,6 +97,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-col {
   .van-doc-demo-block {
     padding: 0 15px;
@@ -107,7 +109,7 @@ export default {
   }
 
   .van-col {
-    color: #fff;
+    color: @white;
     font-size: 13px;
     line-height: 30px;
     text-align: center;

packages/collapse/demo/index.vue

@@ -78,7 +78,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../../packages/style/var";
+@import '../../style/var';
 
 .demo-collapse {
   .van-collapse-item__content {

packages/list/demo/index.vue

@@ -70,6 +70,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-list {
   .van-cell {
     text-align: center;
@@ -80,7 +82,7 @@ export default {
     line-height: 1.4;
     font-size: 14px;
     text-align: center;
-    color: #666;
+    color: @gray-darker;
   }
 }
 </style>

packages/popup/demo/index.vue

@@ -104,6 +104,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-popup {
   .van-button {
     margin: 10px 0 10px 15px;
@@ -129,11 +131,11 @@ export default {
     .van-tab__pane:not(:first-child) {
       padding: 10px;
       line-height: 1.4;
-      color: #666;
+      color: @gray-darker;
     }
 
     &--top {
-      color: #fff;
+      color: @white;
       width: 100%;
       border-radius: 0;
       line-height: 20px;

packages/style/demo/index.vue

@@ -65,6 +65,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-style {
   .van-ellipsis {
     font-size: 13px;
@@ -74,7 +76,7 @@ export default {
 
   .van-hairline--top {
     height: 30px;
-    background-color: #fff;
+    background-color: @white;
 
     &::after {
       top: 5px;
@@ -83,7 +85,7 @@ export default {
 
   .van-col {
     height: 50px;
-    color: #fff;
+    color: @white;
     font-size: 14px;
     border-radius: 3px;
     text-align: center;

packages/style/mixins/hairline.less

@@ -5,7 +5,7 @@
   box-sizing: border-box;
 }
 
-.hairline(@border-color: #eee) {
+.hairline(@border-color: #ebedf0) {
   .hairline-common();
 
   top: -50%;
@@ -16,7 +16,7 @@
   border: 0 solid @border-color;
 }
 
-.hairline-bottom(@border-color: #eee, @left: 0) {
+.hairline-bottom(@border-color: #ebedf0, @left: 0) {
   .hairline-common();
 
   left: @left;

packages/swipe/demo/index.vue

@@ -124,6 +124,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-swipe {
   padding-bottom: 30px;
 
@@ -131,7 +133,7 @@ export default {
     cursor: pointer;
 
     &-item {
-      color: #fff;
+      color: @white;
       font-size: 20px;
       text-align: center;
       line-height: 150px;
@@ -151,7 +153,7 @@ export default {
       display: block;
       padding: 30px 60px;
       box-sizing: border-box;
-      background-color: #fff;
+      background-color: @white;
       pointer-events: none;
     }
   }
@@ -170,7 +172,7 @@ export default {
     bottom: 5px;
     padding: 2px 5px;
     font-size: 12px;
-    color: #fff;
+    color: @white;
     background: rgba(0, 0, 0, .1);
   }
 }

packages/tab/demo/index.vue

@@ -176,6 +176,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-tab {
   margin-bottom: 300px;
 
@@ -185,7 +187,7 @@ export default {
   }
 
   .van-tab__pane {
-    background-color: #fff;
+    background-color: @white;
     padding: 20px;
   }
 

packages/tag/index.vue

@@ -16,9 +16,8 @@
 
 <script>
 import create from '../utils/create';
-import { RED, BLUE, GREEN } from '../utils/color';
+import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';
 
-const DEFAULT_COLOR = '#999';
 const COLOR_MAP = {
   danger: RED,
   primary: BLUE,
@@ -39,7 +38,7 @@ export default create({
 
   computed: {
     style() {
-      const color = this.color || COLOR_MAP[this.type] || DEFAULT_COLOR;
+      const color = this.color || COLOR_MAP[this.type] || GRAY_DARK;
       const key = this.plain ? 'color' : 'backgroundColor';
       return { [key]: color };
     }

packages/tag/test/__snapshots__/demo.spec.js.snap

@@ -2,22 +2,22 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><span class="van-tag" style="background-color:#999;">标签</span> <span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag" style="background-color:#1989fa;">标签</span> <span class="van-tag" style="background-color:#4b0;">标签</span></div>
+  <div><span class="van-tag" style="background-color:#969799;">标签</span> <span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag" style="background-color:#1989fa;">标签</span> <span class="van-tag" style="background-color:#4b0;">标签</span></div>
-  <div><span class="van-tag van-tag--plain van-hairline--surround" style="color:#999;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#f44;">
+  <div><span class="van-tag van-tag--plain van-hairline--surround" style="color:#969799;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#f44;">
       标签
     </span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#1989fa;">
       标签
     </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#4b0;">
       标签
     </span></div>
-  <div><span class="van-tag van-tag--round" style="background-color:#999;">标签</span> <span class="van-tag van-tag--round" style="background-color:#f44;">
+  <div><span class="van-tag van-tag--round" style="background-color:#969799;">标签</span> <span class="van-tag van-tag--round" style="background-color:#f44;">
       标签
     </span> <span class="van-tag van-tag--round" style="background-color:#1989fa;">
       标签
     </span> <span class="van-tag van-tag--round" style="background-color:#4b0;">
       标签
     </span></div>
-  <div><span class="van-tag van-tag--mark" style="background-color:#999;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#f44;">
+  <div><span class="van-tag van-tag--mark" style="background-color:#969799;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#f44;">
       标签
     </span> <span class="van-tag van-tag--mark" style="background-color:#1989fa;">
       标签

packages/utils/color.js

@@ -1,3 +1,4 @@
 export const RED = '#f44';
 export const BLUE = '#1989fa';
 export const GREEN = '#4b0';
+export const GRAY_DARK = '#969799';

packages/waterfall/demo/index.vue

@@ -55,17 +55,19 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-waterfall {
   ul {
     max-height: 360px;
     overflow: scroll;
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid @gray-light;
   }
 
   li {
     line-height: 50px;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid @gray-light;
-    background: #fff;
+    background: @white;
     text-align: center;
   }
 
@@ -74,7 +76,7 @@ export default {
     line-height: 1.4;
     font-size: 14px;
     text-align: center;
-    color: #666;
+    color: @gray-darker;
   }
 }
 </style>