From d24404f3b7032db8c28b7e60528c769cc6801c79 Mon Sep 17 00:00:00 2001
From: vvpvvp <alias8516@sina.com.cn>
Date: Thu, 6 Jun 2019 14:39:27 +0800
Subject: [PATCH] fix(Color): optimize color

---
 doc/components/component/basic/color.vue    | 152 +++++++++++---------
 doc/components/demos/basic/color.vue        |  11 ++
 doc/components/demos/demos.js               |   1 +
 doc/components/guide/themes.vue             |   1 -
 doc/components_en/component/basic/color.vue | 113 ++++++++-------
 doc/components_en/guide/themes.vue          |   1 -
 doc/css/doc.less                            |  19 ++-
 doc/css/var.less                            |  26 +---
 themes/components/auto-complete.less        |   4 +-
 themes/components/carousel.less             |   1 -
 themes/components/date-picker.less          |   2 +-
 themes/components/extend.less               |   2 +
 themes/components/select.less               |   4 +-
 themes/var.less                             |   7 +-
 14 files changed, 180 insertions(+), 164 deletions(-)
 create mode 100644 doc/components/demos/basic/color.vue

diff --git a/doc/components/component/basic/color.vue b/doc/components/component/basic/color.vue
index e251458e7..7cb81b4ec 100755
--- a/doc/components/component/basic/color.vue
+++ b/doc/components/component/basic/color.vue
@@ -1,101 +1,117 @@
 <style lang="less" scoped>
-.color-spans>div>div {
-  min-height: 80px;
+.color-spans > div > div {
   border-radius: 3px;
-  padding: 10px;
+  padding: 25px 20px;
 }
 </style>
 <template>
   <div class="doc">
     <h2>Color 色彩</h2>
-    <p>HeyUI目前提供一个<code>primary</code>的颜色，并提供基本的颜色模板，以方便在系统开发中统一调用。</p>
-    <p>我们将提供统一的var.less调用，关于调用方式请参照<router-link to="/component/themes">更换主题</router-link></p>
+    <p>
+      HeyUI目前提供一个
+      <code>primary</code>的颜色，并提供基本的颜色模板，以方便在系统开发中统一调用。
+    </p>
+    <p>
+      我们将提供统一的var.less调用，关于调用方式请参照
+      <router-link to="/component/themes">更换主题</router-link>
+    </p>
     <h3>Primary</h3>
-    <Row :space='20' class="color-spans">
-      <Cell :width='8'>
-      <div v-bg-color:primary  v-color:white>
-        <p>@primary-color</p>
-      </div>
+    <Row :space="20" class="color-spans">
+      <Cell :width="6">
+        <div class="bg-primary-color white-color">
+          <p>Primary</p>
+        </div>
       </Cell>
     </Row>
 
     <h3>主色</h3>
-    <Row :space='20' class="color-spans">
-      <Cell :width='6'>
-      <div v-bg-color:blue  v-color:white>
-        <p>@blue-color</p>
-      </div>
+    <Row :space="20" class="color-spans">
+      <Cell :width="6">
+        <div class="bg-blue-color white-color">
+          <p>Blue</p>
+        </div>
       </Cell>
-      <Cell :width='6'>
-      <div v-bg-color:green  v-color:white>
-        <p>@green-color</p>
-      </div>
+      <Cell :width="6">
+        <div class="bg-green-color white-color">
+          <p>Green</p>
+        </div>
       </Cell>
-      <Cell :width='6'>
-      <div v-bg-color:yellow  v-color:white>
-        <p>@yellow-color</p>
-      </div>
+      <Cell :width="6">
+        <div class="bg-yellow-color white-color">
+          <p>Yellow</p>
+        </div>
       </Cell>
-      <Cell :width='6'>
-      <div v-bg-color:red  v-color:white>
-        <p>@red-color</p>
-      </div>
+      <Cell :width="6">
+        <div class="bg-red-color white-color">
+          <p>Red</p>
+        </div>
       </Cell>
     </Row>
 
-    <h3>灰色</h3>
-    <Row :space='20' class="color-spans">
-      <Cell :width='12'>
-      <div v-bg-color:dark  v-color:white>
-        <p>@dark-color</p>
-      </div>
+    <h3>文本</h3>
+    <Row :space="20" class="color-spans">
+      <Cell :width="6">
+        <div class="bg-dark-color white-color">
+          <p>Dark</p>
+        </div>
+      </Cell>
+      <Cell :width="18"><div><p>&nbsp;</p></div></Cell>
+      <Cell :width="6">
+        <div class="bg-dark1-color white-color">
+          <p>Dark1</p>
+        </div>
       </Cell>
-      <Cell :width='12'>
-      <div v-bg-color:dark1  v-color:white>
-        <p>@dark1-color</p>
-      </div>
+      <Cell :width="6">
+        <div class="bg-dark2-color white-color">
+          <p>Dark2</p>
+        </div>
       </Cell>
-      <Cell :width='12'>
-      <div v-bg-color:dark2  v-color:white>
-        <p>@dark2-color</p>
-      </div>
+      <Cell :width="6">
+        <div class="bg-dark3-color white-color">
+          <p>Dark3</p>
+        </div>
       </Cell>
-      <Cell :width='12'>
-      <div v-bg-color:gray  v-color:white>
-        <p>@gray-color</p>
-      </div>
+      <Cell :width="6">
+        <div class="bg-dark4-color white-color">
+          <p>Dark4</p>
+        </div>
       </Cell>
-      <Cell :width='6'>
-      <div v-bg-color:gray1  v-color:dark>
-        <p>@gray1-color</p>
-      </div>
+    </Row>
+
+    <h3>背景色</h3>
+    <Row :space="20" class="color-spans">
+      <Cell :width="6">
+        <div class="bg-gray-color">
+          <p>Gray</p>
+        </div>
       </Cell>
-      <Cell :width='6'>
-      <div v-bg-color:gray2  v-color:dark>
-        <p>@gray2-color</p>
-      </div>
+      <Cell :width="18"><div><p>&nbsp;</p></div></Cell>
+      <Cell :width="6">
+        <div class="bg-gray1-color">
+          <p>Gray1</p>
+        </div>
       </Cell>
-      <Cell :width='6'>
-      <div v-bg-color:gray3  v-color:dark>
-        <p>@gray3-color</p>
-      </div>
+      <Cell :width="6">
+        <div class="bg-gray2-color">
+          <p>Gray2</p>
+        </div>
       </Cell>
-      <Cell :width='6'>
-      <div v-bg-color:gray4  v-color:dark>
-        <p>@gray4-color</p>
-      </div>
+      <Cell :width="6">
+        <div class="bg-gray3-color">
+          <p>Gray3</p>
+        </div>
+      </Cell>
+      <Cell :width="6">
+        <div class="bg-gray4-color">
+          <p>Gray4</p>
+        </div>
       </Cell>
     </Row>
 
-    <h3>文本</h3>
+    <h3>应用</h3>
     <div>
-      <p v-color:dark v-font='18'>标题@dark-color</p>
-      <p v-color:gray>副标题@gray-color</p>
-      <p v-color:gray1>描述@gray1-color</p>
-      <p><a href="javascript:;">这是一个链接，复用@primary-color</a></p>
-      <p><span v-color:red>这是一个错误@red-color</span></p>
+      <example demo="basic/color"></example>
     </div>
-
   </div>
 </template>
 <script>
diff --git a/doc/components/demos/basic/color.vue b/doc/components/demos/basic/color.vue
new file mode 100644
index 000000000..1e53b8467
--- /dev/null
+++ b/doc/components/demos/basic/color.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <p class="dark-color">Title</p>
+    <p class="dark2-color">SubTitle</p>
+    <p class="dark3-color">Description</p>
+    <section>
+      <p><a href="/">This is a link.</a></p>
+      <p>We have <span class="blue-color">blue</span>, <span class="red-color">red</span>, <span class="yellow-color">yellow</span>, <span class="green-color">green</span>.</p>
+    </section>
+  </div>
+</template>
diff --git a/doc/components/demos/demos.js b/doc/components/demos/demos.js
index efcc86f3e..6afc19753 100644
--- a/doc/components/demos/demos.js
+++ b/doc/components/demos/demos.js
@@ -11,6 +11,7 @@ export default {
   'basicLayout4': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/layout4.vue')); }, 'basic'); },
   'basicLayout5': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/layout5.vue')); }, 'basic'); },
   'basicIcon': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/icon.vue')); }, 'basic'); },
+  'basicColor': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/color.vue')); }, 'basic'); },
   'basicDemo': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/demo.vue')); }, 'basic'); },
   'basicDemo2': function (resolve) { require.ensure([], function (require) { resolve(require('./basic/demo2.vue')); }, 'basic'); },
   'basicExtend1': resolve => require.ensure([], require => require('./basic/extend1.vue'), 'basic'),
diff --git a/doc/components/guide/themes.vue b/doc/components/guide/themes.vue
index 1240ab474..7f5aed8b7 100755
--- a/doc/components/guide/themes.vue
+++ b/doc/components/guide/themes.vue
@@ -94,7 +94,6 @@ export default = {
 @gray1-color: #d3d3d3;
 @gray2-color: #eeeeee;
 @gray3-color: #f3f3f3;
-@gray4-color: #f9f9f9;
 
 //hover
 @hover-background-color: lighten(@primary-color, 37%);
diff --git a/doc/components_en/component/basic/color.vue b/doc/components_en/component/basic/color.vue
index 2ce64009c..4c3595918 100755
--- a/doc/components_en/component/basic/color.vue
+++ b/doc/components_en/component/basic/color.vue
@@ -14,89 +14,102 @@
     <p>We will provide global variables in var.less, please refer to the <router-link to="/en/component/themes">Themes</router-link>
     </p>
     <h3>Primary</h3>
-    <Row :space='20' class="color-spans">
-      <Cell :width='8'>
-        <div v-bg-color:primary v-color:white>
-          <p>@primary-color</p>
+    <Row :space="20" class="color-spans">
+      <Cell :width="6">
+        <div class="bg-primary-color white-color">
+          <p>Primary</p>
         </div>
       </Cell>
     </Row>
 
-    <h3>Main color</h3>
-    <Row :space='20' class="color-spans">
-      <Cell :width='6'>
-        <div v-bg-color:blue v-color:white>
-          <p>@blue-color</p>
+    <h3>Main Color</h3>
+
+    <Row :space="20" class="color-spans">
+      <Cell :width="6">
+        <div class="bg-blue-color white-color">
+          <p>Blue</p>
         </div>
       </Cell>
-      <Cell :width='6'>
-        <div v-bg-color:green v-color:white>
-          <p>@green-color</p>
+      <Cell :width="6">
+        <div class="bg-green-color white-color">
+          <p>Green</p>
         </div>
       </Cell>
-      <Cell :width='6'>
-        <div v-bg-color:yellow v-color:white>
-          <p>@yellow-color</p>
+      <Cell :width="6">
+        <div class="bg-yellow-color white-color">
+          <p>Yellow</p>
         </div>
       </Cell>
-      <Cell :width='6'>
-        <div v-bg-color:red v-color:white>
-          <p>@red-color</p>
+      <Cell :width="6">
+        <div class="bg-red-color white-color">
+          <p>Red</p>
         </div>
       </Cell>
     </Row>
 
-    <h3>Gray</h3>
-    <Row :space='20' class="color-spans">
-      <Cell :width='12'>
-        <div v-bg-color:dark v-color:white>
-          <p>@dark-color</p>
+    <h3>Text Color</h3>
+    <Row :space="20" class="color-spans">
+      <Cell :width="6">
+        <div class="bg-dark-color white-color">
+          <p>Dark</p>
+        </div>
+      </Cell>
+      <Cell :width="18"><div><p>&nbsp;</p></div></Cell>
+      <Cell :width="6">
+        <div class="bg-dark1-color white-color">
+          <p>Dark1</p>
         </div>
       </Cell>
-      <Cell :width='12'>
-        <div v-bg-color:dark1 v-color:white>
-          <p>@dark1-color</p>
+      <Cell :width="6">
+        <div class="bg-dark2-color white-color">
+          <p>Dark2</p>
         </div>
       </Cell>
-      <Cell :width='12'>
-        <div v-bg-color:dark2 v-color:white>
-          <p>@dark2-color</p>
+      <Cell :width="6">
+        <div class="bg-dark3-color white-color">
+          <p>Dark3</p>
         </div>
       </Cell>
-      <Cell :width='12'>
-        <div v-bg-color:gray v-color:white>
-          <p>@gray-color</p>
+      <Cell :width="6">
+        <div class="bg-dark4-color white-color">
+          <p>Dark4</p>
+        </div>
+      </Cell>
+    </Row>
+
+    <h3>Background Color</h3>
+    <Row :space="20" class="color-spans">
+      <Cell :width="6">
+        <div class="bg-gray-color">
+          <p>Gray</p>
         </div>
       </Cell>
-      <Cell :width='6'>
-        <div v-bg-color:gray1 v-color:dark>
-          <p>@gray1-color</p>
+      <Cell :width="18"><div><p>&nbsp;</p></div></Cell>
+      <Cell :width="6">
+        <div class="bg-gray1-color">
+          <p>Gray1</p>
         </div>
       </Cell>
-      <Cell :width='6'>
-        <div v-bg-color:gray2 v-color:dark>
-          <p>@gray2-color</p>
+      <Cell :width="6">
+        <div class="bg-gray2-color">
+          <p>Gray2</p>
         </div>
       </Cell>
-      <Cell :width='6'>
-        <div v-bg-color:gray3 v-color:dark>
-          <p>@gray3-color</p>
+      <Cell :width="6">
+        <div class="bg-gray3-color">
+          <p>Gray3</p>
         </div>
       </Cell>
-      <Cell :width='6'>
-        <div v-bg-color:gray4 v-color:dark>
-          <p>@gray4-color</p>
+      <Cell :width="6">
+        <div class="bg-gray4-color">
+          <p>Gray4</p>
         </div>
       </Cell>
     </Row>
 
-    <h3>Text</h3>
+    <h3>Demo</h3>
     <div>
-      <p v-color:dark v-font='18'>Title @dark-color</p>
-      <p v-color:gray>Subtitle @gray-color</p>
-      <p v-color:gray1>Description @gray1-color</p>
-      <p><a href="javascript:;">This is a link, reuse @primary-color</a></p>
-      <p><span v-color:red>This is an error @red-color</span></p>
+      <example demo="basic/color"></example>
     </div>
 
   </div>
diff --git a/doc/components_en/guide/themes.vue b/doc/components_en/guide/themes.vue
index f8c52bace..a68717ffc 100755
--- a/doc/components_en/guide/themes.vue
+++ b/doc/components_en/guide/themes.vue
@@ -93,7 +93,6 @@ export default = {
 @gray1-color: #d3d3d3;
 @gray2-color: #eeeeee;
 @gray3-color: #f3f3f3;
-@gray4-color: #f9f9f9;
 
 //hover
 @hover-background-color: lighten(@primary-color, 37%);
diff --git a/doc/css/doc.less b/doc/css/doc.less
index 085e1ce56..46d878c47 100644
--- a/doc/css/doc.less
+++ b/doc/css/doc.less
@@ -10,14 +10,12 @@ body {
   font-family: Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
   color: #34495e;
   margin: 0px;
-  font-size: 15px;
-  // overflow: hidden;
 }
 
 h2,
 h3,
 h4 {
-  font-weight: 600;
+  font-weight: normal;
   color: #2c3e50;
   letter-spacing: 1px;
 }
@@ -223,10 +221,9 @@ h2 {
     line-height: 2.5;
     >div>ul {
       >li.title {
-        font-size: 18px;
-        margin: 15px 0;
-        padding-left: 30px;
-        color: @primary-color;
+        margin: 10px 0;
+        padding-left: 40px;
+        color: #b1b1b1;
       }
       >ul {
         padding-left: 25px;
@@ -239,7 +236,7 @@ h2 {
           line-height: 1;
           a {
             padding: 12px 0;
-            padding-left: 20px;
+            padding-left: 10px;
             border-left: 5px solid transparent;
             display: block;
           }
@@ -249,7 +246,7 @@ h2 {
     a {
       line-height: 1;
       padding: 2px 4px;
-      color: #868fa4;
+      color: @dark3-color;
       &:hover{
         color: @primary-color;
       }
@@ -626,7 +623,7 @@ h2 {
   // font-size: 16px;
   h1, h2, h3 {
     margin: 40px 0 20px;
-    font-weight: 600;
+    font-weight: normal;
     color: #2c3e50;
     letter-spacing: 1px;
   }
@@ -849,6 +846,7 @@ h2 {
     font-size: 14px;
     padding: 5px 15px;
     line-height: 20px;
+    color: @dark2-color;
     word-break: break-all;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -856,7 +854,6 @@ h2 {
     cursor: pointer;
     &:hover{
       color: @primary-color;
-      background-color: @hover-background-color;
     }
   }
 }
\ No newline at end of file
diff --git a/doc/css/var.less b/doc/css/var.less
index 757371c3c..ef6d3e79e 100644
--- a/doc/css/var.less
+++ b/doc/css/var.less
@@ -1,25 +1 @@
-@import (less) "../../themes/var.less";
-
-
-// // Color
-// @primary-color : #727cf5;
-// @link-color : @primary-color;
-// @blue-color : #39afd1; //info
-// @green-color : #0acf97; //success
-// @yellow-color : #ffbc00; //warn
-// @red-color : #fa5c7c; //error
-// @white-color : #ffffff;
-
-// //Dark, Gray 1-4 more
-// @dark-color: #333333;
-// @dark1-color: #555555;
-// @dark2-color: #666666;
-// @gray-color: #6c757d;
-
-// @button-size-normal-padding: 12px 20px;
-// @button-size-l-padding: 14px 23px;
-// @button-size-m-padding: 10px 20px;
-// @button-size-s-padding: 6px 15px;
-// @button-size-xs-padding: 2px 15px;
-
-// @input-height: 34px;
\ No newline at end of file
+@import (less) "../../themes/var.less";
\ No newline at end of file
diff --git a/themes/components/auto-complete.less b/themes/components/auto-complete.less
index 64d3ec860..16dad02a6 100644
--- a/themes/components/auto-complete.less
+++ b/themes/components/auto-complete.less
@@ -11,7 +11,7 @@
       padding-right: 20px;
       // display: inline-block;
       .@{prefix}icon-loading{
-        color: @gray-color;
+        color: @dark4-color;
       }
       .@{prefix}icon-loading, >.@{prefix}icon-close{
         .h-func-input-right-icon();
@@ -56,7 +56,7 @@
     }
   }
   .@{autocompleteCls}-empty-content {
-    color: @gray-color;
+    color: @gray4-color;
     text-align: center;
   }
 }
\ No newline at end of file
diff --git a/themes/components/carousel.less b/themes/components/carousel.less
index 272178149..516ad4b41 100644
--- a/themes/components/carousel.less
+++ b/themes/components/carousel.less
@@ -18,7 +18,6 @@
     transition-property: transform;
     box-sizing: content-box;
     .@{carousel-prefix}-item {
-      // background-color: @gray-color;
       background-position: center;
       background-repeat: no-repeat;
       flex-shrink: 0;
diff --git a/themes/components/date-picker.less b/themes/components/date-picker.less
index 0cd003ab5..7233a64be 100755
--- a/themes/components/date-picker.less
+++ b/themes/components/date-picker.less
@@ -86,7 +86,7 @@
           &-year-left-picker,
           &-month-right-picker,
           &-year-right-picker {
-            color: @gray-color;
+            color: @dark4-color;
             font-size: 12px;
             margin: 0 3px;
           }
diff --git a/themes/components/extend.less b/themes/components/extend.less
index fe880f10f..36b24d398 100644
--- a/themes/components/extend.less
+++ b/themes/components/extend.less
@@ -31,6 +31,8 @@ ul, ol {
 .h-func-generate-color(dark);
 .h-func-generate-color(dark1);
 .h-func-generate-color(dark2);
+.h-func-generate-color(dark3);
+.h-func-generate-color(dark4);
 .h-func-generate-color(primary);
 
 .link{
diff --git a/themes/components/select.less b/themes/components/select.less
index 212284497..6ab51bbed 100755
--- a/themes/components/select.less
+++ b/themes/components/select.less
@@ -60,7 +60,7 @@
     position: relative;
 
     &-disabled {
-      color: @gray-color;
+      color: @disabled-color;
       cursor: not-allowed;
       &:hover{
         background: none;
@@ -115,7 +115,7 @@
     .h-func-list-style();
   }
   .h-select-ul-empty {
-    color: @gray-color;
+    color: @dark4-color;
     line-height: 24px;
     padding: 0 10px;
   }
diff --git a/themes/var.less b/themes/var.less
index 104fae092..c5ac3fa6c 100644
--- a/themes/var.less
+++ b/themes/var.less
@@ -12,7 +12,10 @@
 @dark-color: #333333;
 @dark1-color: #555555;
 @dark2-color: #666666;
-@gray-color: #999999;
+@dark3-color: #777777;
+@dark4-color: #888888;
+
+@gray-color: #c1c1c1;
 @gray1-color: #d3d3d3;
 @gray2-color: #eeeeee;
 @gray3-color: #f3f3f3;
@@ -53,7 +56,7 @@
 
 //disabled
 @disabled-cursor: not-allowed;
-@disabled-color: @gray-color;
+@disabled-color: @dark4-color;
 @disabled-border-color: @gray1-color;
 @disabled-background-color: @gray4-color;