update primary color & add popper-class for ColorPicker

examples/components/header.vue

@@ -92,6 +92,7 @@
       position: relative;
       cursor: pointer;
     
+      &.lang-item,
       &:last-child {
         cursor: default;
         margin-left: 34px;
@@ -112,6 +113,7 @@
           &.active {
             font-weight: 700;
             opacity: 1;
+            color: #409EFF;
           }
         }
       }
@@ -181,7 +183,7 @@
         width: 14px;
         left: calc(50% - 7px);
         bottom: 15px;
-        background: #1989fa;
+        background: #409EFF;
       }
     }
   }
@@ -244,6 +246,7 @@
       .nav-item {
         margin-left: 6px;
 
+        &.lang-item,
         &:last-child {
           margin-left: 10px;
         }
@@ -361,7 +364,7 @@
           </li>
 
           <!-- lang -->
-          <li class="nav-item">
+          <li class="nav-item lang-item">
             <span
               class="nav-lang"
               :class="{ 'active': lang === 'zh-CN' }"
@@ -376,12 +379,18 @@
               En
             </span>
           </li>
+          
+          <!--theme picker-->
+          <li  class="nav-item" v-show="isComponentPage">
+            <theme-picker></theme-picker>
+          </li>
         </ul>
       </div>
     </header>
   </div>
 </template>
 <script>
+  import ThemePicker from './theme-picker.vue';
   import bus from '../bus';
   import compoLang from '../i18n/component.json';
   import { version } from 'main/index.js';
@@ -399,6 +408,9 @@
         isComponentPage: true
       };
     },
+
+    components: { ThemePicker },
+
     watch: {
       '$route.path': {
         immediate: true,

examples/components/theme-picker.vue

+<template>
+  <el-color-picker
+    class="theme-picker"
+    popper-class="theme-picker-dropdown"
+    v-model="theme"></el-color-picker>
+</template>
+
+<style>
+  .theme-picker {
+    height: 80px;
+    display: inline-block;
+    @utils-vertical-center;
+  }
+
+  .theme-picker .el-color-picker__trigger {
+    vertical-align: middle;
+  }
+  
+  .theme-picker-dropdown .el-color-dropdown__link-btn {
+    display: none;
+  }
+</style>
+
+<script>
+  import { version } from 'main/index.js';
+
+  const ORIGINAL_THEME = '#409EFF';
+  export default {
+    data() {
+      return {
+        chalk: '',
+        theme: ORIGINAL_THEME
+      };
+    },
+
+    watch: {
+      theme(val, oldVal) {
+        if (typeof val !== 'string') return;
+        const themeCluster = this.getThemeCluster(val.replace('#', ''));
+        const originalCluster = this.getThemeCluster(oldVal.replace('#', ''));
+        const handler = () => {
+          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''));
+          let newStyle = this.updateStyle(this.chalk, originalCluster, themeCluster);
+
+          let styleTag = document.getElementById('theme-style');
+          if (!styleTag) {
+            styleTag = document.createElement('style');
+            styleTag.setAttribute('id', 'theme-style');
+            document.head.appendChild(styleTag);
+          }
+          styleTag.innerText = newStyle;
+        };
+
+        if (!this.chalk) {
+          this.getChalkString(handler);
+        } else {
+          handler();
+        }
+
+        const styles = [].slice.call(document.querySelectorAll('style'))
+          .filter(style => {
+            const text = style.innerText;
+            return new RegExp(oldVal).test(text) && !/Chalk Variables/.test(text);
+          });
+        styles.forEach(style => {
+          const { innerText } = style;
+          if (typeof innerText !== 'string') return;
+          style.innerText = this.updateStyle(innerText, originalCluster, themeCluster);
+        });
+      }
+    },
+
+    methods: {
+      updateStyle(style, oldCluster, newCluster) {
+        let newStyle = style;
+        oldCluster.forEach((color, index) => {
+          newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]);
+        });
+        return newStyle;
+      },
+
+      getChalkString(callback) {
+        const xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            this.chalk = xhr.responseText.replace(/@font-face{[^}]+}/, '');
+            callback();
+          }
+        };
+        xhr.open('GET', `https://unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css`);
+        xhr.send();
+      },
+
+      getThemeCluster(theme) {
+        const tintColor = (color, tint) => {
+          let red = parseInt(color.slice(0, 2), 16);
+          let green = parseInt(color.slice(2, 4), 16);
+          let blue = parseInt(color.slice(4, 6), 16);
+
+          if (tint === 0) {
+            return [red, green, blue].join(',');
+          } else {
+            red += Math.round(tint * (255 - red));
+            green += Math.round(tint * (255 - green));
+            blue += Math.round(tint * (255 - blue));
+
+            red = red.toString(16);
+            green = green.toString(16);
+            blue = blue.toString(16);
+
+            return `#${ red }${ green }${ blue }`;
+          }
+        };
+
+        const clusters = [theme];
+        for (let i = 0; i <= 9; i++) {
+          clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
+        }
+        return clusters;
+      }
+    }
+  };
+</script>
\ No newline at end of file

examples/docs/en-US/color-picker.md

@@ -116,6 +116,7 @@ ColorPicker is a color selector supporting multiple color formats.
 | size | size of ColorPicker | string | — | medium / small / mini |
 | show-alpha | whether to display the alpha slider | boolean | — | false |
 | color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
+| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/en-US/loading.md

@@ -51,7 +51,7 @@ Displays animation in a container (such as a table) while loading data.
 ```html
 <template>
   <el-table
-    v-loading.body="loading"
+    v-loading="loading"
     :data="tableData"
     style="width: 100%">
     <el-table-column

examples/docs/zh-CN/color-picker.md

@@ -116,6 +116,7 @@
 | size | 尺寸 | string | — | medium / small / mini |
 | show-alpha | 是否支持透明度选择 | boolean | — | false |
 | color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） |
+| popper-class | ColorPicker 下拉框的类名 | string | — | — |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

examples/docs/zh-CN/loading.md

@@ -49,7 +49,7 @@
 ```html
 <template>
   <el-table
-    v-loading.body="loading"
+    v-loading="loading"
     :data="tableData"
     style="width: 100%">
     <el-table-column

packages/color-picker/src/main.vue

@@ -19,7 +19,7 @@
     </div>
     <picker-dropdown
        ref="dropdown"
-       class="el-color-picker__panel"
+       :class="['el-color-picker__panel', popperClass || '']"
        v-model="showPicker"
        @pick="confirmValue"
        @clear="clearValue"
@@ -42,7 +42,8 @@
       showAlpha: Boolean,
       colorFormat: String,
       disabled: Boolean,
-      size: String
+      size: String,
+      popperClass: String
     },
 
     directives: { Clickoutside },

packages/theme-chalk/src/common/var.scss

+/* Element Chalk Variables */
+
 /* Transition
 -------------------------- */
 $--all-transition: all .3s cubic-bezier(.645,.045,.355,1);
@@ -12,16 +14,16 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1);
 $--color-white: #fff;
 $--color-black: #000;
 
-$--color-primary: #69B3FF !default;
-$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 78bbff */
-$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 87c2ff */
-$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 96caff */
-$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* a5d1ff */
-$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* b4d9ff */
-$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* c3e1ff */
-$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* d2e8ff */
-$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* e1f0ff */
-$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* f0f7ff */
+$--color-primary: #409EFF !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */
 
 $--color-success: #67c23a !default;
 $--color-warning: #eb9e05 !default;