update color docs (#7256)

* update color docs

* fix button test

examples/app.vue

@@ -110,7 +110,7 @@
       margin-top: 20px;
 
       code {
-        background-color: rgba(#fff, .7);
+        background-color: rgba(255, 255, 255, .7);
         color: #445368;
       }
     }
@@ -143,7 +143,7 @@
       }
   
       code {
-        background-color: rgba(#fff, .7);
+        background-color: rgba(255, 255, 255, .7);
         color: #445368;
       }
     }

examples/docs/en-US/button.md

@@ -103,10 +103,10 @@ Use icons to add more meaning to Button. You can use icon alone to save some spa
 :::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
 
 ```html
-<el-button type="primary" icon="edit"></el-button>
-<el-button type="primary" icon="share"></el-button>
-<el-button type="primary" icon="delete"></el-button>
-<el-button type="primary" icon="search">Search</el-button>
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">Search</el-button>
 <el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
 ```
 :::
@@ -119,13 +119,13 @@ Displayed as a button group, can be used to group a series of similar operations
 
 ```html
 <el-button-group>
-  <el-button type="primary" icon="arrow-left">Previous Page</el-button>
+  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
   <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
 </el-button-group>
 <el-button-group>
-  <el-button type="primary" icon="edit"></el-button>
-  <el-button type="primary" icon="share"></el-button>
-  <el-button type="primary" icon="delete"></el-button>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
 </el-button-group>
 ```
 :::
@@ -172,6 +172,6 @@ Besides default size, Button component provides three additional sizes for you t
 | round     | determine whether it's a round button   | boolean    | — | false   |
 | loading   | determine whether it's loading   | boolean    | — | false   |
 | disabled  | disable the button    | boolean   | —   | false   |
-| icon  | button icon, accepts an icon name of Element icon component | string   |  —  |  —  |
+| icon  | icon class name | string   |  —  |  —  |
 | autofocus  | same as native button's `autofocus` | boolean   |  —  |  false  |
 | native-type | same as native button's `type` | string | button / submit / reset | button |

examples/docs/en-US/color.md

@@ -24,15 +24,8 @@
       border-radius: 0 0 4px 4px;
     }
   }
-  .bg-blue-light {
-    background-color: #58b7ff;
-  }
-  .bg-blue,
-  .bg-info {
-    background-color: #20a0ff;
-  }
-  .bg-blue-dark {
-    background-color: #1d8ce0;
+  .bg-blue {
+    background-color: #1989fa;
   }
 
   .bg-success {
@@ -44,43 +37,38 @@
   .bg-danger {
     background-color: #ff4949;
   }
-
-  .bg-black {
-    background-color: #1f2d3d;
-  }
-  .bg-black-light {
-    background-color: #324057;
-  }
-  .bg-black-lighter {
-    background-color: #475669;
+  .bg-info {
+    background-color: #878D99;
   }
 
-  .bg-silver {
-    background-color: #8492a6;
+  .bg-text-primary {
+    background-color: #2d2f33;
+  }
+  .bg-text-regular {
+    background-color: #5a5e66;
   }
-  .bg-silver-light {
-    background-color: #99a9bf;
+  .bg-text-secondary {
+    background-color: #878d99;
   }
-  .bg-silver-lighter {
-    background-color: #c0ccda;
+  .bg-text-placeholder {
+    background-color: #b4bccc;
   }
 
-  .bg-gray {
-    background-color: #d3dce6;
+  .bg-border-base {
+    background-color: #d8dce6;
   }
-  .bg-gray-light {
-    background-color: #e5e9f2;
+  .bg-border-light {
+    background-color: #dfe4ed;
   }
-  .bg-gray-lighter {
-    background-color: #eff2f7;
+  .bg-border-lighter {
+    background-color: #e6ebf5;
   }
-
-  .bg-white-dark {
-    background-color: #f9fafc;
+  .bg-border-extra-light {
+    background-color: #edf2fc;
   }
 
-  .color-gray {
-    color: #5e6d82;
+  [class*=" bg-border-"] {
+    color: #5a5e66;
   }
 </style>
 
@@ -92,14 +80,8 @@ Element uses a specific set of palettes to specify colors to provide a consisten
 The main color of Element is bright and friendly blue.
 
 <el-row :gutter="12">
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
+  <el-col :span="6">
+    <div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</div></div>
   </el-col>
 </el-row>
 
@@ -109,16 +91,16 @@ Besides the main color, you need to use different scene colors in different scen
 
 <el-row :gutter="12">
   <el-col :span="6">
-    <div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
+    <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
+    <div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
+    <div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
+    <div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
   </el-col>
 </el-row>
 
@@ -129,29 +111,18 @@ Neutral colors are for text, background and border colors. You can use different
 <el-row :gutter="12">
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
-      <div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
-      <div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
+      <div class="demo-color-box bg-text-primary">Primary Text<div class="value">#2D2F33</div></div>
+      <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#5A5E66</div></div>
+      <div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#878D99</div></div>
+      <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#B4BCCC</div></div>
     </div>
   </el-col>
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
-      <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
-      <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
-      <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
-      <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
-      <div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
-      <div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
+      <div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE6</div></div>
+      <div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
+      <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div>
     </div>
   </el-col>
 </el-row>

examples/docs/en-US/icon.md

@@ -22,7 +22,7 @@
     margin: 0 20px;
   }
 
-  .icon-list {
+  .page-component .content > ul.icon-list {
     overflow: hidden;
     list-style: none;
     padding: 0;

examples/docs/zh-CN/button.md

@@ -104,10 +104,10 @@
 :::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
 
 ```html
-<el-button type="primary" icon="edit"></el-button>
-<el-button type="primary" icon="share"></el-button>
-<el-button type="primary" icon="delete"></el-button>
-<el-button type="primary" icon="search">搜索</el-button>
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">搜索</el-button>
 <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
 ```
 :::
@@ -120,13 +120,13 @@
 
 ```html
 <el-button-group>
-  <el-button type="primary" icon="arrow-left">上一页</el-button>
+  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
   <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
 </el-button-group>
 <el-button-group>
-  <el-button type="primary" icon="edit"></el-button>
-  <el-button type="primary" icon="share"></el-button>
-  <el-button type="primary" icon="delete"></el-button>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
 </el-button-group>
 ```
 :::
@@ -173,6 +173,6 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
 | round     | 是否圆形按钮   | boolean    | — | false   |
 | loading     | 是否加载中状态   | boolean    | — | false   |
 | disabled  | 是否禁用状态    | boolean   | —   | false   |
-| icon  | 图标，已有的图标库中的图标名 | string   |  —  |  —  |
+| icon  | 图标类名 | string   |  —  |  —  |
 | autofocus  | 是否默认聚焦 | boolean   |  —  |  false  |
 | native-type | 原生 type 属性 | string | button / submit / reset | button |

examples/docs/zh-CN/color.md

@@ -24,63 +24,51 @@
       border-radius: 0 0 4px 4px;
     }
   }
-  .bg-blue-light {
-    background-color: #58b7ff;
-  }
-  .bg-blue,
-  .bg-info {
-    background-color: #20a0ff;
-  }
-  .bg-blue-dark {
-    background-color: #1d8ce0;
+  .bg-blue {
+    background-color: #1989fa;
   }
 
   .bg-success {
-    background-color: #13CE66;
+    background-color: #67C23A;
   }
   .bg-warning {
-    background-color: #f7ba2a;
+    background-color: #EB9E05;
   }
   .bg-danger {
-    background-color: #ff4949;
-  }
-
-  .bg-black {
-    background-color: #1f2d3d;
+    background-color: #FA5555;
   }
-  .bg-black-light {
-    background-color: #324057;
-  }
-  .bg-black-lighter {
-    background-color: #475669;
+  .bg-info {
+    background-color: #878D99;
   }
 
-  .bg-silver {
-    background-color: #8492a6;
+  .bg-text-primary {
+    background-color: #2d2f33;
+  }
+  .bg-text-regular {
+    background-color: #5a5e66;
   }
-  .bg-silver-light {
-    background-color: #99a9bf;
+  .bg-text-secondary {
+    background-color: #878d99;
   }
-  .bg-silver-lighter {
-    background-color: #c0ccda;
+  .bg-text-placeholder {
+    background-color: #b4bccc;
   }
 
-  .bg-gray {
-    background-color: #d3dce6;
+  .bg-border-base {
+    background-color: #d8dce6;
   }
-  .bg-gray-light {
-    background-color: #e5e9f2;
+  .bg-border-light {
+    background-color: #dfe4ed;
   }
-  .bg-gray-lighter {
-    background-color: #eff2f7;
+  .bg-border-lighter {
+    background-color: #e6ebf5;
   }
-
-  .bg-white-dark {
-    background-color: #f9fafc;
+  .bg-border-extra-light {
+    background-color: #edf2fc;
   }
 
-  .color-gray {
-    color: #5e6d82;
+  [class*=" bg-border-"] {
+    color: #5a5e66;
   }
 </style>
 
@@ -93,14 +81,8 @@ Element 为了避免视觉传达差异，使用一套特定的调色板来规定
 Element 主要品牌颜色是鲜艳、友好的蓝色。
 
 <el-row :gutter="12">
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
+  <el-col :span="6">
+    <div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</div></div>
   </el-col>
 </el-row>
 
@@ -110,16 +92,16 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 
 <el-row :gutter="12">
   <el-col :span="6">
-    <div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
+    <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
+    <div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
+    <div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
+    <div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
   </el-col>
 </el-row>
 
@@ -130,29 +112,18 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 <el-row :gutter="12">
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
-      <div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
-      <div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
+      <div class="demo-color-box bg-text-primary">主要文字<div class="value">#2D2F33</div></div>
+      <div class="demo-color-box bg-text-regular">常规文字<div class="value">#5A5E66</div></div>
+      <div class="demo-color-box bg-text-secondary">次要文字<div class="value">#878D99</div></div>
+      <div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#B4BCCC</div></div>
     </div>
   </el-col>
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
-      <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
-      <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
-      <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
-      <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
-      <div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
-      <div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
+      <div class="demo-color-box bg-border-base">一级边框<div class="value">#D8DCE6</div></div>
+      <div class="demo-color-box bg-border-light">二级边框<div class="value">#DFE4ED</div></div>
+      <div class="demo-color-box bg-border-lighter">三级边框<div class="value">#E6EBF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#EDF2FC</div></div>
     </div>
   </el-col>
 </el-row>

examples/docs/zh-CN/icon.md

@@ -21,7 +21,7 @@
     margin: 0 20px;
   }
 
-  .icon-list {
+  .page-component .content > ul.icon-list {
     overflow: hidden;
     list-style: none;
     padding: 0;

packages/button/src/button.vue

@@ -16,7 +16,7 @@
     ]"
   >
     <i class="el-icon-loading" v-if="loading" @click="handleInnerClick"></i>
-    <i :class="'el-icon-' + icon" v-if="icon && !loading" @click="handleInnerClick"></i>
+    <i :class="icon" v-if="icon && !loading" @click="handleInnerClick"></i>
     <span v-if="$slots.default" @click="handleInnerClick"><slot></slot></span>
   </button>
 </template>

test/unit/specs/button.spec.js

@@ -16,7 +16,7 @@ describe('Button', () => {
   });
   it('icon', () => {
     vm = createTest(Button, {
-      icon: 'search'
+      icon: 'el-icon-search'
     }, true);
     let buttonElm = vm.$el;
     expect(buttonElm.querySelector('.el-icon-search')).to.be.ok;