Popover: add chalk theme (#7003)

* Popover: add chalk theme

* Popover: add chalk theme

packages/popover/src/main.vue

@@ -3,7 +3,7 @@
     <transition :name="transition" @after-leave="doDestroy">
       <div
         class="el-popover"
-        :class="[popperClass]"
+        :class="[popperClass, content && 'el-popover--plain']"
         ref="popper"
         v-show="!disabled && showPopper"
         :style="{ width: width + 'px' }">

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

@@ -13,30 +13,30 @@ $--color-white: #fff;
 $--color-black: #000;
 
 $--color-primary: #1989fa;
-$--color-primary-light-1: mix($--color-white, $--color-primary, 10%);
-$--color-primary-light-2: mix($--color-white, $--color-primary, 20%);
-$--color-primary-light-3: mix($--color-white, $--color-primary, 30%);
-$--color-primary-light-4: mix($--color-white, $--color-primary, 40%);
-$--color-primary-light-5: mix($--color-white, $--color-primary, 50%);
-$--color-primary-light-6: mix($--color-white, $--color-primary, 60%);
-$--color-primary-light-7: mix($--color-white, $--color-primary, 70%);
-$--color-primary-light-8: mix($--color-white, $--color-primary, 80%);
-$--color-primary-light-9: mix($--color-white, $--color-primary, 90%);
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); // #3095fb#
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); // #47a1fb#
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); // #5eadfc#
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); // #75b8fc#
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); // #8cc4fd#
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); // #a3d0fd#
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); // #badcfe#
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); // #d1e7fe#
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); // #e8f3ff#
 
 $--color-success: #67c23a;
 $--color-warning: #eb9e05;
 $--color-danger: #fa5555;
 $--color-info: #878d99;
 
-$--color-success-light: mix($--color-white, $--color-success, 80%);
-$--color-warning-light: mix($--color-white, $--color-warning, 80%);
-$--color-danger-light: mix($--color-white, $--color-danger, 80%);
-$--color-info-light: mix($--color-white, $--color-info, 80%);
+$--color-success-light: mix($--color-white, $--color-success, 80%); // #e1f3d8#
+$--color-warning-light: mix($--color-white, $--color-warning, 80%); // #fbeccd#
+$--color-danger-light: mix($--color-white, $--color-danger, 80%); // #fedddd#
+$--color-info-light: mix($--color-white, $--color-info, 80%); // #e7e8eb#
 
-$--color-success-lighter: mix($--color-white, $--color-success, 90%);
-$--color-warning-lighter: mix($--color-white, $--color-warning, 90%);
-$--color-danger-lighter: mix($--color-white, $--color-danger, 90%);
-$--color-info-lighter: mix($--color-white, $--color-info, 90%);
+$--color-success-lighter: mix($--color-white, $--color-success, 90%); // #f0f9ec#
+$--color-warning-lighter: mix($--color-white, $--color-warning, 90%); // #fdf5e6#
+$--color-danger-lighter: mix($--color-white, $--color-danger, 90%); // #ffeeee#
+$--color-info-lighter: mix($--color-white, $--color-info, 90%); // #f3f4f5#
 
 $--color-text-primary: #2d2f33;
 $--color-text-regular: #5a5e66;
@@ -70,7 +70,7 @@ $--border-radius-circle: 100%;
 -------------------------- */
 $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
 $--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
-
+$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
 /* Fill
 -------------------------- */
 $--fill-base: $--color-white;
@@ -78,6 +78,7 @@ $--fill-base: $--color-white;
 /* Font
 -------------------------- */
 $--font-size-base: 14px;
+$--font-size-small: 13px;
 $--font-color-base: #5a5e66;
 $--font-color-disabled-base: #bbb;
 $--font-weight-primary: 500;
@@ -101,6 +102,7 @@ $--disabled-border-base: $--border-color-lighter;
 /* Icon
 -------------------------- */
 $--icon-color: #666;
+$--icon-color-base: $--color-info;
 
 /* Checkbox
 -------------------------- */
@@ -460,8 +462,11 @@ $--dialog-font-size: 14px;
 
 /* Table
 -------------------------- */
-$--table-border-color: $--border-color-base;
+$--table-border-color: $--border-color-lighter;
 $--table-text-color: $--color-text-regular;
+$--table-header-color: $--color-text-secondary;
+$--table-row-hover-background: $--background-color-base;
+$--table-current-row-background: $--background-color-base;
 $--table-header-background: $--color-text-secondary;
 $--table-footer-background: $--color-text-placeholder;
 
@@ -482,11 +487,12 @@ $--pagination-hover-color: $--color-white;
 /* Popover
 -------------------------- */
 $--popover-fill: $--color-white;
-$--popover-font-size: 12px;
-$--popover-border-color: $--disabled-border-base;
+$--popover-font-size: $--font-size-base;
+$--popover-border-color: $--border-color-lighter;
 $--popover-arrow-size: 6px;
 $--popover-padding: 10px;
-$--popover-title-font-size: 13px;
+$--popover-padding-large: 28px 34px;
+$--popover-title-font-size: 18px;
 $--popover-title-color: $--color-text-primary;
 
 /* Tooltip
@@ -529,7 +535,7 @@ $--tag-danger-color: $--color-danger;
 
 /* Dropdown
 -------------------------- */
-$--dropdown-menu-box-shadow: $--box-shadow-dark;
+$--dropdown-menu-box-shadow: $--box-shadow-light;
 $--dropdown-menuItem-hover-fill: $--color-text-secondary;
 $--dropdown-menuItem-hover-color: $--link-color;
 

packages/theme-chalk/src/mixins/mixins.scss

@@ -1,20 +1,6 @@
 @import "function";
 @import "../common/var";
 
-/* Transition
- -------------------------- */
-@mixin primary-transition {
-  transition: $t-primary;
-}
-
-@mixin specific-transition($attr) {
-  transition: $attr $t-primary;
-}
-
-@mixin specific-transition-with-time($attr, $time) {
-  transition: $attr $t-primary;
-}
-
 /* Flex
  -------------------------- */
 @mixin flex-center {
@@ -27,16 +13,47 @@
   align-items: center;
 }
 
+/* Scrollbar
+ -------------------------- */
+@mixin scroll-bar {
+  $--scrollbar-thumb-background: #b4bccc;
+  $--scrollbar-track-background: #edeff5;
+
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+    background: black;
+
+    &:horizontal {
+      height: 6px;
+    }
 
-/* placeholder
+    &-thumb {
+      border-radius: 5px;
+      background: $--scrollbar-thumb-background;
+    }
+
+    &-corner {
+      background: $--scrollbar-track-background;
+    }
+
+    &-track {
+      background: $--scrollbar-track-background;
+    }
+  }
+}
+
+/* Placeholder
  -------------------------- */
 @mixin placeholder {
   &::-webkit-input-placeholder {
     @content
   }
+
   &::-moz-placeholder {
     @content
   }
+
   &:-ms-input-placeholder {
     @content
   }

packages/theme-chalk/src/popover.scss

@@ -5,13 +5,20 @@
   position: absolute;
   background: $--popover-fill;
   min-width: 150px;
-  border-radius: 2px;
+  border-radius: 4px;
   border: 1px solid $--popover-border-color;
   padding: $--popover-padding;
   z-index: $--index-popper;
+  color: $--color-text-regular;
+  line-height: 1.7;
+  text-align: justify;
+  word-break: break-all;
   font-size: $--popover-font-size;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12),
-              0 0 6px 0 rgba(0, 0, 0, .04);
+  box-shadow: $--box-shadow-light;
+
+  @include m(plain) {
+    padding: $--popover-padding-large;
+  }
 
   .popper__arrow,
   .popper__arrow::after {
@@ -25,6 +32,7 @@
 
   .popper__arrow {
     border-width: $--popover-arrow-size;
+    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
   }
 
   .popper__arrow::after {
@@ -113,6 +121,6 @@
     color: $--popover-title-color;
     font-size: $--popover-title-font-size;
     line-height: 1;
-    margin-bottom: 9px;
+    margin-bottom: 15px;
   }
 }