From 727bb988dd3b3827f5236c98d12c24330c2ac21f Mon Sep 17 00:00:00 2001
From: JiwenBai <jiwen.bai@tusimple.ai>
Date: Sun, 29 Sep 2019 08:41:49 +0800
Subject: [PATCH 01/13] feat(advance-table): add change sort by click title

---
 .../common/AdvanceTable/filterIcon/index.vue  |   5 +-
 .../common/AdvanceTable/popFilter/index.vue   |  29 --
 .../common/AdvanceTable/sortIcon/index.vue    |  30 ++-
 packages/common/AdvanceTable/src/main.vue     |  28 +-
 packages/common/Table/src/main.vue            |  14 +-
 styles/AdvancedTable.scss                     | 255 ++++++++++++------
 styles/Table.scss                             | 158 ++++++++---
 .../themes/dark/components/AdvanceTable.scss  |   4 +
 styles/themes/dark/components/Table.scss      |   9 +
 styles/themes/dark/index.scss                 |   5 +
 .../themes/light/components/AdvanceTable.scss |   4 +
 styles/themes/light/components/Table.scss     |   9 +
 styles/themes/light/index.scss                |   6 +
 13 files changed, 390 insertions(+), 166 deletions(-)
 create mode 100644 styles/themes/dark/components/AdvanceTable.scss
 create mode 100644 styles/themes/dark/components/Table.scss
 create mode 100644 styles/themes/light/components/AdvanceTable.scss
 create mode 100644 styles/themes/light/components/Table.scss

diff --git a/packages/common/AdvanceTable/filterIcon/index.vue b/packages/common/AdvanceTable/filterIcon/index.vue
index 30fbb3c7d..8e23566c1 100644
--- a/packages/common/AdvanceTable/filterIcon/index.vue
+++ b/packages/common/AdvanceTable/filterIcon/index.vue
@@ -2,9 +2,10 @@
   <span
     class="ts-funnel-container"
     :class="{'ts-funnel-container--active':status}"
+    @click.stop="()=>{}"
   >
     <n-icon
-      style="vertical-align: middle;color: #63e2b7;"
+      style="vertical-align: middle;"
       :class="{'ts-funnel-container--active':status}"
       type="ios-funnel"
       size="12"
@@ -48,7 +49,7 @@ export default {
   line-height: 16px;
 }
 .ts-funnel-container i {
-  opacity: 0.3;
+  opacity: 0.4;
 }
 .ts-funnel-container--active i{
   opacity: 1;
diff --git a/packages/common/AdvanceTable/popFilter/index.vue b/packages/common/AdvanceTable/popFilter/index.vue
index 6bb853922..110ca2141 100644
--- a/packages/common/AdvanceTable/popFilter/index.vue
+++ b/packages/common/AdvanceTable/popFilter/index.vue
@@ -12,35 +12,6 @@
       <template v-slot:activator>
         <filterIcon :status="filterStatus" />
       </template>
-    <!-- <n-popselect-option
-      v-if="loading"
-      disabled
-      label="Loading.."
-      value="loading.."
-    />
-    <p
-      v-if="error"
-      style="text-align:center;padding:5px;"
-    >
-      Error,refresh
-      <n-icon
-        style="cursor:pointer"
-        type="md-refresh"
-        color="#999"
-        size="18"
-        @click.stop="initItems"
-      />
-    </p> -->
-    <!-- <n-scrollbar
-      style="max-height:120px;"
-    > -->
-    <!-- <n-popselect-option
-        v-for="item in filterItems"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      /> -->
-    <!-- </n-scrollbar> -->
     </n-popselect>
     <n-popover
       v-else
diff --git a/packages/common/AdvanceTable/sortIcon/index.vue b/packages/common/AdvanceTable/sortIcon/index.vue
index 6a930584d..ea8a111e9 100644
--- a/packages/common/AdvanceTable/sortIcon/index.vue
+++ b/packages/common/AdvanceTable/sortIcon/index.vue
@@ -7,7 +7,7 @@
         opacity: opacitys.downOpacity,
         transform: 'scale(0.8)'
       }"
-      @click.native="changeDownSort()"
+      @click.stop="changeDownSort()"
     />
     <n-icon
       type="md-arrow-dropup"
@@ -16,7 +16,7 @@
         opacity: opacitys.upOpacity,
         transform: 'scale(0.8)'
       }"
-      @click.native="changeUpSort()"
+      @click.stop="changeUpSort()"
     />
   </span>
 </template>
@@ -26,20 +26,20 @@ const computeOpacity = (val) => {
   let self = {}
   switch (val) {
     case 0:
-      self.upOpacity = 0.3
-      self.downOpacity = 0.3
+      self.upOpacity = 0.4
+      self.downOpacity = 0.4
       break
     case 1:
       self.upOpacity = 1
-      self.downOpacity = 0.3
+      self.downOpacity = 0.4
       break
     case -1:
-      self.upOpacity = 0.3
+      self.upOpacity = 0.4
       self.downOpacity = 1
       break
     case null:
-      self.upOpacity = 0.3
-      self.downOpacity = 0.3
+      self.upOpacity = 0.4
+      self.downOpacity = 0.4
       break
   }
   return self
@@ -66,8 +66,8 @@ export default {
   },
   data () {
     return {
-      upOpacity: 0.3,
-      downOpacity: 0.3
+      upOpacity: 0.4,
+      downOpacity: 0.4
     }
   },
   computed: {
@@ -101,6 +101,15 @@ export default {
       }
       this.setSort(v)
     },
+    changeSort () {
+      if (this.value === 0 || this.value === null) {
+        this.setSort(1)
+      } else if (this.value === 1) {
+        this.setSort(-1)
+      } else {
+        this.setSort(0)
+      }
+    },
     setSort (val) {
       this.$emit('input', val)
       this.$emit('onSortTypeChange', {
@@ -133,7 +142,6 @@ export default {
   display: block;
   height: 19px;
   position: absolute;
-  color: #63e2b7 !important;
   transition: color 0.2s ease-in-out;
   font-size: 19px !important;
   font-weight: 400;
diff --git a/packages/common/AdvanceTable/src/main.vue b/packages/common/AdvanceTable/src/main.vue
index a7a338be9..78f99073e 100644
--- a/packages/common/AdvanceTable/src/main.vue
+++ b/packages/common/AdvanceTable/src/main.vue
@@ -2,6 +2,9 @@
   <div
     ref="tableWrapper"
     class="n-advance-table__wrapper n-advance-table"
+    :class="{
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+    }"
   >
     <div class="n-advance-table__operation">
       <div class="n-advance-table__operation--left">
@@ -30,8 +33,9 @@
     <div class="n-advance-table__tbody">
       <n-table
         ref="header"
-        style="padding:0;border-bottom-left-radius:0;border-bottom-right-radius:0;background-color: #2b3147;"
+        style="padding:0;border-bottom-left-radius:0;border-bottom-right-radius:0;"
         :style="colGroup"
+        class="n-advance-table__header"
       >
         <colgroup>
           <col
@@ -51,6 +55,10 @@
               ref="theads"
               :key="column.key"
               :style="computeAlign(column)"
+              :class="{
+                'n-advance-table__sortable-column': column.sortable
+              }"
+              @click.native="()=>sortByColumn(column)"
             >
               <!-- 当前页全选 -->
               <n-checkbox
@@ -64,6 +72,7 @@
                 v-if="column.sortable"
                 :ref="'sorter_' + (column.key || i)"
                 v-model="sortIndexs[column.key || i]"
+                class="n-advance-table__header-icon"
                 :column="column"
                 :index="i"
                 @onSortTypeChange="onSortTypeChange"
@@ -75,6 +84,7 @@
               <PopFilter
                 v-if="column.onFilter && (column.filterItems || column.asynsFilterItems)"
                 v-model="selectedFilter[column.key]"
+                class="n-advance-table__header-icon"
                 :column="column"
                 :items="column.filterItems || column.asynsFilterItems"
                 @on-filter="onFilter"
@@ -187,8 +197,9 @@ import row from '../row/index.js'
 import SortIcon from '../sortIcon'
 import PopFilter from '../popFilter'
 import searchInput from '../searchInput'
-import Loading from '../loading'
 import { noopFn } from '../../../utils/index'
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
 
 export default {
   name: 'NAdvanceTable',
@@ -196,9 +207,13 @@ export default {
     row,
     SortIcon,
     PopFilter,
-    searchInput,
-    Loading
+    searchInput
+
   },
+  mixins: [
+    withapp,
+    themeable
+  ],
   props: {
     search: {
       /**
@@ -486,6 +501,11 @@ export default {
         }
       })
     },
+    sortByColumn (column) {
+      if (!column.sortable || column.key === void 0) return
+      const ref = this.$refs['sorter_' + column.key][0]
+      ref.changeSort()
+    },
     computeAlign (column) {
       if (column.align) {
         return {
diff --git a/packages/common/Table/src/main.vue b/packages/common/Table/src/main.vue
index beb9564f8..e812b7d3d 100644
--- a/packages/common/Table/src/main.vue
+++ b/packages/common/Table/src/main.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="n-table">
+  <div
+    class="n-table"
+    :class="{
+
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+    }"
+  >
     <table>
       <slot>default table content</slot>
     </table>
@@ -7,8 +13,12 @@
 </template>
 
 <script>
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
+
 export default {
-  name: 'NTable'
+  name: 'NTable',
+  mixins: [withapp, themeable]
 }
 </script>
 
diff --git a/styles/AdvancedTable.scss b/styles/AdvancedTable.scss
index 67eb877ba..de77e255d 100644
--- a/styles/AdvancedTable.scss
+++ b/styles/AdvancedTable.scss
@@ -1,84 +1,189 @@
 @import "./mixins/mixins.scss";
 @import "./themes/vars.scss";
-@include b(advance-table){
-  @include e(wrapper){
-    width: 100%;
-  }
-  @include e(tbody){
-    overflow: hidden;
-    border-radius: 12px;
-    box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
-  }
-  @include e(td-text){
-    &-center{
-      text-align: center;
-    }
-    &-left{
-      text-align: left;
-    }
-    &-right{
-      text-align: right;
-    }
-    @include m(ellipsis){
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      &>*{
-        text-overflow: ellipsis;
+
+@include themes-mixin {
+  @include b(advance-table) {
+    @include once { 
+      @include e(wrapper){
+        width: 100%;
+      }
+      @include e(tbody){
         overflow: hidden;
-        white-space: nowrap;
+        border-radius: 12px;
+      }
+      @include e(td-text){
+        &-center{
+          text-align: center;
+        }
+        &-left{
+          text-align: left;
+        }
+        &-right{
+          text-align: right;
+        }
+        @include m(ellipsis){
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          &>*{
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
+        }
+      }
+      @include e(no-data-tip){
+        padding: 5px;
+        text-align: center;
+        width: 100%;
+        display: table-cell;
+      }
+      @include e(pagination){
+        margin-top: 27px;
+        display: flex;
+        justify-content: flex-end;
+      }
+      @include e(operation){
+        display: flex;
+        justify-content:space-between;
+        &--right,&--left{
+          display: flex;
+        }
+    
+      }
+      @include e(sortable-column) {
+        cursor: pointer;
+      }
+      @include b(table) {
+        table {
+          word-wrap: break-word;
+          word-break: break-all;
+          table-layout: fixed;
+        }
+        &::-webkit-scrollbar {
+          width: 5px;
+        }
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+          border-radius: 2.5px;
+        }
+        // &::-webkit-scrollbar-thumb:hover {
+        //   background: rgba(255, 255, 255, 0.3);
+        // }
+        &::-webkit-scrollbar-corner {
+          background: transparent;
+        }
+        &::-webkit-scrollbar:horizontal {
+          height: 5px;
+        }
+        table thead tr th:last-of-type {
+          padding-left: 32px;
+        }
       }
     }
-  }
-  @include e(no-data-tip){
-    padding: 5px;
-    text-align: center;
-    width: 100%;
-    display: table-cell;
-  }
-  @include e(pagination){
-    margin-top: 27px;
-    display: flex;
-    justify-content: flex-end;
-  }
-  @include e(operation){
-    display: flex;
-    justify-content:space-between;
-    &--right,&--left{
-      display: flex;
+    @include e(tbody){
+      box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
     }
+    @include b(table) {
+      &::-webkit-scrollbar-thumb {
+        border-radius: 2.5px;
+        background: $--table-scrollbar-color;
 
-  }
+      }
+    }
+    @include e(header){
+      background-color: $--table-header-background;
+      i {
+        color:$--table-header-icon-color;
+      }
+    }
+   
   
-  @include b(table) {
-    // background-color: #2b3147;
-    table {
-      word-wrap: break-word;
-      word-break: break-all;
-      table-layout: fixed;
-      // width: auto;
-    }
-    &::-webkit-scrollbar {
-      width: 5px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 2.5px;
-    }
-    &::-webkit-scrollbar-thumb:hover {
-      background: rgba(255, 255, 255, 0.3);
-    }
-    &::-webkit-scrollbar-corner {
-      background: transparent;
-    }
-    &::-webkit-scrollbar:horizontal {
-      height: 5px;
-    }
-    table thead tr th:last-of-type {
-      padding-left: 32px;
-    }
+    
   }
-}
\ No newline at end of file
+}
+
+// @include b(advance-table){
+//   @include e(wrapper){
+//     width: 100%;
+//   }
+//   @include e(tbody){
+//     overflow: hidden;
+//     border-radius: 12px;
+//     box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
+//   }
+//   @include e(td-text){
+//     &-center{
+//       text-align: center;
+//     }
+//     &-left{
+//       text-align: left;
+//     }
+//     &-right{
+//       text-align: right;
+//     }
+//     @include m(ellipsis){
+//       text-overflow: ellipsis;
+//       overflow: hidden;
+//       white-space: nowrap;
+//       &>*{
+//         text-overflow: ellipsis;
+//         overflow: hidden;
+//         white-space: nowrap;
+//       }
+//     }
+//   }
+//   @include e(no-data-tip){
+//     padding: 5px;
+//     text-align: center;
+//     width: 100%;
+//     display: table-cell;
+//   }
+//   @include e(pagination){
+//     margin-top: 27px;
+//     display: flex;
+//     justify-content: flex-end;
+//   }
+//   @include e(operation){
+//     display: flex;
+//     justify-content:space-between;
+//     &--right,&--left{
+//       display: flex;
+//     }
+
+//   }
+  
+//   @include b(table) {
+//     // background-color: #2b3147;
+//     table {
+//       word-wrap: break-word;
+//       word-break: break-all;
+//       table-layout: fixed;
+//       // width: auto;
+//     }
+//     &::-webkit-scrollbar {
+//       width: 5px;
+//     }
+//     &::-webkit-scrollbar-track {
+//       background: transparent;
+//     }
+//     &::-webkit-scrollbar-thumb {
+//       background: rgba(255, 255, 255, 0.2);
+//       border-radius: 2.5px;
+//     }
+//     &::-webkit-scrollbar-thumb:hover {
+//       background: rgba(255, 255, 255, 0.3);
+//     }
+//     &::-webkit-scrollbar-corner {
+//       background: transparent;
+//     }
+//     &::-webkit-scrollbar:horizontal {
+//       height: 5px;
+//     }
+//     table thead tr th:last-of-type {
+//       padding-left: 32px;
+//     }
+//   }
+// }
\ No newline at end of file
diff --git a/styles/Table.scss b/styles/Table.scss
index e3809bb66..b4ab351ea 100644
--- a/styles/Table.scss
+++ b/styles/Table.scss
@@ -1,55 +1,127 @@
 @import "./mixins/mixins.scss";
 @import "./themes/vars.scss";
 
-@include b(table) {
-  width: 100%;
-  border-radius: 12px;
-  font-size: $table-font-size;
-  overflow: hidden;
-  box-shadow: $table-box-shadow;
-  padding-bottom: 8px;
-  background-color: $table-body-background-color;
-  table {
-    border-collapse: collapse;
-    width: 100%;
-    thead {
-      background-color: $table-header-background-color;
-      color: $primary-text-color;
-      tr {
-        th {
-          padding: 16px 6px 16px 6px;
-          text-align: left;
-          border: none;
+
+@include themes-mixin {
+  @include b(table) {
+    @include once {
+      width: 100%;
+      border-radius: 12px;
+      font-size: $table-font-size;
+      overflow: hidden;
+      padding-bottom: 8px;
+      table {
+        border-collapse: collapse;
+        width: 100%;
+        thead {
+          tr {
+            th {
+              padding: 12px 6px 12px 6px;
+              text-align: left;
+              border: none;
+              font-weight: 400;
+            }
+            th:nth-child(1) {
+              padding-left: 32px;
+              border-radius: 12px 0 0 0;
+            }
+            th:nth-last-child(1) {
+              padding-left: 32px;
+              border-radius: 0 12px 0 0;
+            }
+          }
         }
-        th:nth-child(1) {
-          padding-left: 32px;
-          border-radius: 12px 0 0 0;
-        }
-        th:nth-last-child(1) {
-          padding-left: 32px;
-          border-radius: 0 12px 0 0;
+        tbody {
+          background-color: $--table-body-background;
+          color: $--table-body-color;
+          tr {
+            td {
+              padding: 16px 6px 12px 6px;
+              text-align: left;
+              border: none;
+            }
+            td:nth-child(1) {
+              padding-left: 32px;
+            }
+            td:nth-last-child(1) {
+              padding-left: 32px;
+            }
+          }
+          tr:hover {
+            background-color: $--table-row-hover;
+          }
         }
       }
     }
-    tbody {
-      background-color: $table-body-background-color;
-      color: $regular-text-color;
-      tr {
-        td {
-          padding: 16px 6px 12px 6px;
-          text-align: left;
-          border: none;
-        }
-        td:nth-child(1) {
-          padding-left: 32px;
-        }
-        td:nth-last-child(1) {
-          padding-left: 32px;
+    background-color: $--table-body-background;
+    box-shadow: $--table-box-shadow;
+    table {
+      thead {
+        background-color: $--table-header-background;
+        color: $--table-header-color;
+      }
+      tbody {
+        background-color: $--table-body-background;
+        color: $--table-body-color;
+        tr:hover {
+          background-color: $--table-row-hover;
         }
       }
-      tr:hover {
-        background-color: #2b3147;
-      }
+
     }
+    
   }
 }
+
+// @include b(table) {
+//   width: 100%;
+//   border-radius: 12px;
+//   font-size: $table-font-size;
+//   overflow: hidden;
+//   // box-shadow: $table-box-shadow;
+//   padding-bottom: 8px;
+//   // background-color: $table-body-background-color;
+//   table {
+//     border-collapse: collapse;
+//     width: 100%;
+//     thead {
+//       background-color: $table-header-background-color;
+//       color: $primary-text-color;
+//       tr {
+//         th {
+//           padding: 16px 6px 16px 6px;
+//           text-align: left;
+//           border: none;
+//         }
+//         th:nth-child(1) {
+//           padding-left: 32px;
+//           border-radius: 12px 0 0 0;
+//         }
+//         th:nth-last-child(1) {
+//           padding-left: 32px;
+//           border-radius: 0 12px 0 0;
+//         }
+//       }
+//     }
+//     tbody {
+//       background-color: $table-body-background-color;
+//       color: $regular-text-color;
+//       tr {
+//         td {
+//           padding: 16px 6px 12px 6px;
+//           text-align: left;
+//           border: none;
+//         }
+//         td:nth-child(1) {
+//           padding-left: 32px;
+//         }
+//         td:nth-last-child(1) {
+//           padding-left: 32px;
+//         }
+//       }
+//       tr:hover {
+//         background-color: #2b3147;
+//       }
+//     }
+//   }
+// }
diff --git a/styles/themes/dark/components/AdvanceTable.scss b/styles/themes/dark/components/AdvanceTable.scss
new file mode 100644
index 000000000..0d1edd1c2
--- /dev/null
+++ b/styles/themes/dark/components/AdvanceTable.scss
@@ -0,0 +1,4 @@
+@mixin setup-dark-advance-table {
+  $--table-header-icon-color: $primary-6 !global;
+  $--table-scrollbar-color: rgba(255, 255, 255, 0.2) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/components/Table.scss b/styles/themes/dark/components/Table.scss
new file mode 100644
index 000000000..2600c878b
--- /dev/null
+++ b/styles/themes/dark/components/Table.scss
@@ -0,0 +1,9 @@
+@mixin setup-dark-table {
+  $--table-header-background: #2b3147 !global;
+  $--table-body-background: #1f263e !global;
+  $--table-header-color: $neutral-3 !global;
+  $--table-body-color: $neutral-4 !global;
+  $--table-row-hover: $--table-header-background !global;
+  $--table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2) !global;
+  $--table-border: none;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index 5a7a8ea8e..455af3821 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -7,6 +7,9 @@
 @import "components/BasePicker.scss";
 @import "components/BaseCancelMark.scss";
 @import "components/Tag.scss";
+@import "components/Table.scss";
+@import 'components/AdvanceTable.scss';
+
 
 @mixin setup-dark-theme () {
   @include setup-dark-colors();
@@ -32,4 +35,6 @@
   @include setup-dark-base-picker;
   @include setup-dark-base-cancel-mark;
   @include setup-dark-tag;
+  @include setup-dark-table;
+  @include setup-dark-advance-table;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/AdvanceTable.scss b/styles/themes/light/components/AdvanceTable.scss
new file mode 100644
index 000000000..88dafb99a
--- /dev/null
+++ b/styles/themes/light/components/AdvanceTable.scss
@@ -0,0 +1,4 @@
+@mixin setup-light-advance-table {
+  $--table-header-icon-color: $primary-6 !global;
+  $--table-scrollbar-color: #ababab !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/components/Table.scss b/styles/themes/light/components/Table.scss
new file mode 100644
index 000000000..eaacfc2ad
--- /dev/null
+++ b/styles/themes/light/components/Table.scss
@@ -0,0 +1,9 @@
+@mixin setup-light-table {
+  $--table-header-background: #e8e8e8 !global;
+  $--table-body-background: #fff !global;
+  $--table-header-color: #262626 !global;
+  $--table-body-color: #595959 !global;
+  $--table-row-hover: rgba(0,0,0,0.03) !global;
+  $--table-box-shadow: none !global;
+  $--table-border:1px solid rgba(0,0,0,0.15) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index 909503493..c5248aa61 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -7,6 +7,10 @@
 @import "components/BasePicker.scss";
 @import "components/BaseCancelMark.scss";
 @import "components/Tag.scss";
+@import "components/Table.scss";
+@import "components/AdvanceTable.scss";
+
+
 
 @mixin setup-light-theme () {
   @include setup-light-colors();
@@ -34,4 +38,6 @@
   @include setup-light-base-picker;
   @include setup-light-base-cancel-mark;
   @include setup-light-tag;
+  @include setup-light-table;
+  @include setup-light-advance-table;
 }
\ No newline at end of file

From 6a02374cfd482077979b3c06d1cb25f89492bafc Mon Sep 17 00:00:00 2001
From: JiwenBai <jiwen.bai@tusimple.ai>
Date: Sun, 29 Sep 2019 13:56:27 +0800
Subject: [PATCH 02/13] feat(advance-table): add col border in light theme

---
 .../advanceTableDemos/basicUsage.demo.vue     |  2 +-
 packages/common/AdvanceTable/src/main.vue     | 18 ++++-
 packages/common/Table/src/main.vue            |  2 +-
 styles/AdvancedTable.scss                     | 66 +++++++++++--------
 styles/Table.scss                             | 31 ++++++---
 styles/themes/dark/components/Table.scss      |  2 +
 styles/themes/light/components/Table.scss     |  1 +
 7 files changed, 82 insertions(+), 40 deletions(-)

diff --git a/demo/documentation/components/advanceTableDemos/basicUsage.demo.vue b/demo/documentation/components/advanceTableDemos/basicUsage.demo.vue
index 1f130678f..399a8c3a9 100644
--- a/demo/documentation/components/advanceTableDemos/basicUsage.demo.vue
+++ b/demo/documentation/components/advanceTableDemos/basicUsage.demo.vue
@@ -79,7 +79,7 @@ const _columns3 = ($this) => {
       title: 'Name',
       key: 'name',
       sortable: true,
-      width: 400
+      width: 300
     },
     {
       title: 'Age',
diff --git a/packages/common/AdvanceTable/src/main.vue b/packages/common/AdvanceTable/src/main.vue
index 78f99073e..b3c10760a 100644
--- a/packages/common/AdvanceTable/src/main.vue
+++ b/packages/common/AdvanceTable/src/main.vue
@@ -3,7 +3,8 @@
     ref="tableWrapper"
     class="n-advance-table__wrapper n-advance-table"
     :class="{
-      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme,
+      'n-advance-table--col-border':colBorder
     }"
   >
     <div class="n-advance-table__operation">
@@ -279,6 +280,10 @@ export default {
     loading: {
       type: [Boolean],
       default: false
+    },
+    colBorder: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
@@ -426,6 +431,7 @@ export default {
       this.searchDataNoSort = null
       this.checkBoxes = []
       this.currentPageAllSelect = false
+      this.computeScollBar()
     },
     currentSearchColumn () {
       this.searchData = this.computeShowingData()
@@ -480,7 +486,7 @@ export default {
     this.wrapper = this.$refs.tableWrapper
     this.wrapperWidth = this.$refs.tableWrapper.offsetWidth
     this.tbodyWidth = this.relTable.offsetWidth
-    this.scrollBarWidth = this.wrapperWidth - this.tbodyWidth
+
     this.headerRealEl = this.$refs.header.$el.querySelector('thead')
 
     // console.log(this.wrapperWidth, this.tbodyWidth)
@@ -609,6 +615,13 @@ export default {
 
       event.stopPropagation()
     },
+    computeScollBar () {
+      this.$nextTick(() => {
+        this.tbodyWidth = this.relTable.offsetWidth
+        this.scrollBarWidth = this.wrapperWidth - this.tbodyWidth
+        console.log('TCL: mounted -> this.scrollBarWidth', this.wrapperWidth, this.tbodyWidth)
+      })
+    },
     computeCustomWidthStl (column) {
       if (column.width) {
         let width = column.width
@@ -645,6 +658,7 @@ export default {
     init () {
       this.$nextTick(() => {
         this.wrapperWidth = this.$refs.tableWrapper.offsetWidth
+        this.computeScollBar()
 
         // console.log(this.relTable.offsetWidth)
 
diff --git a/packages/common/Table/src/main.vue b/packages/common/Table/src/main.vue
index e812b7d3d..2f446da71 100644
--- a/packages/common/Table/src/main.vue
+++ b/packages/common/Table/src/main.vue
@@ -6,7 +6,7 @@
       [`n-${synthesizedTheme}-theme`]: synthesizedTheme
     }"
   >
-    <table>
+    <table cellspacing="0">
       <slot>default table content</slot>
     </table>
   </div>
diff --git a/styles/AdvancedTable.scss b/styles/AdvancedTable.scss
index de77e255d..918705180 100644
--- a/styles/AdvancedTable.scss
+++ b/styles/AdvancedTable.scss
@@ -2,54 +2,72 @@
 @import "./themes/vars.scss";
 
 @include themes-mixin {
+  @include b(advance-table--col-border) {
+    table {
+      thead {
+        tr {
+          th {
+            border-right: $--table-td-border-right;
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            border-right: $--table-td-border-right;
+          }
+        }
+      }
+    }
+  }
   @include b(advance-table) {
-    @include once { 
-      @include e(wrapper){
+    @include once {
+      @include e(wrapper) {
         width: 100%;
       }
-      @include e(tbody){
+      @include e(tbody) {
         overflow: hidden;
         border-radius: 12px;
       }
-      @include e(td-text){
-        &-center{
+      @include e(td-text) {
+        &-center {
           text-align: center;
         }
-        &-left{
+        &-left {
           text-align: left;
         }
-        &-right{
+        &-right {
           text-align: right;
         }
-        @include m(ellipsis){
+        @include m(ellipsis) {
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
-          &>*{
+          & > * {
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
           }
         }
       }
-      @include e(no-data-tip){
+      @include e(no-data-tip) {
         padding: 5px;
         text-align: center;
         width: 100%;
         display: table-cell;
       }
-      @include e(pagination){
+      @include e(pagination) {
         margin-top: 27px;
         display: flex;
         justify-content: flex-end;
       }
-      @include e(operation){
+      @include e(operation) {
         display: flex;
-        justify-content:space-between;
-        &--right,&--left{
+        justify-content: space-between;
+        &--right,
+        &--left {
           display: flex;
         }
-    
       }
       @include e(sortable-column) {
         cursor: pointer;
@@ -78,30 +96,24 @@
         &::-webkit-scrollbar:horizontal {
           height: 5px;
         }
-        table thead tr th:last-of-type {
-          padding-left: 32px;
-        }
       }
     }
-    @include e(tbody){
+
+    @include e(tbody) {
       box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
     }
     @include b(table) {
       &::-webkit-scrollbar-thumb {
         border-radius: 2.5px;
         background: $--table-scrollbar-color;
-
       }
     }
-    @include e(header){
+    @include e(header) {
       background-color: $--table-header-background;
       i {
-        color:$--table-header-icon-color;
+        color: $--table-header-icon-color;
       }
     }
-   
-  
-    
   }
 }
 
@@ -154,7 +166,7 @@
 //     }
 
 //   }
-  
+
 //   @include b(table) {
 //     // background-color: #2b3147;
 //     table {
@@ -186,4 +198,4 @@
 //       padding-left: 32px;
 //     }
 //   }
-// }
\ No newline at end of file
+// }
diff --git a/styles/Table.scss b/styles/Table.scss
index b4ab351ea..5294103ad 100644
--- a/styles/Table.scss
+++ b/styles/Table.scss
@@ -1,7 +1,6 @@
 @import "./mixins/mixins.scss";
 @import "./themes/vars.scss";
 
-
 @include themes-mixin {
   @include b(table) {
     @include once {
@@ -16,17 +15,17 @@
         thead {
           tr {
             th {
-              padding: 12px 6px 12px 6px;
+              padding: 12px 6px 12px 19px;
               text-align: left;
               border: none;
               font-weight: 400;
             }
             th:nth-child(1) {
-              padding-left: 32px;
+              padding-left: 21px;
               border-radius: 12px 0 0 0;
             }
             th:nth-last-child(1) {
-              padding-left: 32px;
+              padding-left: 21px;
               border-radius: 0 12px 0 0;
             }
           }
@@ -36,15 +35,15 @@
           color: $--table-body-color;
           tr {
             td {
-              padding: 16px 6px 12px 6px;
+              padding: 16px 6px 12px 19px;
               text-align: left;
               border: none;
             }
             td:nth-child(1) {
-              padding-left: 32px;
+              padding-left: 21px;
             }
             td:nth-last-child(1) {
-              padding-left: 32px;
+              padding-left: 21px;
             }
           }
           tr:hover {
@@ -55,10 +54,19 @@
     }
     background-color: $--table-body-background;
     box-shadow: $--table-box-shadow;
+
     table {
+      border-collapse: separate;
       thead {
         background-color: $--table-header-background;
         color: $--table-header-color;
+        tr {
+          th {
+            &:last-of-type {
+              border-right: 0;
+            }
+          }
+        }
       }
       tbody {
         background-color: $--table-body-background;
@@ -66,10 +74,15 @@
         tr:hover {
           background-color: $--table-row-hover;
         }
+        tr {
+          td {
+            &:last-of-type {
+              border-right: 0;
+            }
+          }
+        }
       }
-
     }
-    
   }
 }
 
diff --git a/styles/themes/dark/components/Table.scss b/styles/themes/dark/components/Table.scss
index 2600c878b..13fe4da2e 100644
--- a/styles/themes/dark/components/Table.scss
+++ b/styles/themes/dark/components/Table.scss
@@ -6,4 +6,6 @@
   $--table-row-hover: $--table-header-background !global;
   $--table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2) !global;
   $--table-border: none;
+  //TODO:ui设计深色color
+  $--table-td-border-right: none !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Table.scss b/styles/themes/light/components/Table.scss
index eaacfc2ad..9e330765e 100644
--- a/styles/themes/light/components/Table.scss
+++ b/styles/themes/light/components/Table.scss
@@ -6,4 +6,5 @@
   $--table-row-hover: rgba(0,0,0,0.03) !global;
   $--table-box-shadow: none !global;
   $--table-border:1px solid rgba(0,0,0,0.15) !global;
+  $--table-td-border-right: 1px solid $alpha-neutral-6 !global;
 }
\ No newline at end of file

From c1ec14218b37fb30b956816fb5ff1f9ed1a39082 Mon Sep 17 00:00:00 2001
From: JiwenBai <jiwen.bai@tusimple.ai>
Date: Sun, 29 Sep 2019 16:02:28 +0800
Subject: [PATCH 03/13] feat(checkbox): light ui

---
 packages/common/Checkbox/src/main.vue        |  10 +-
 styles/Checkbox.scss                         | 329 ++++++++++++++-----
 styles/themes/dark/components/CheckBox.scss  |   9 +
 styles/themes/dark/index.scss                |   2 +
 styles/themes/light/components/CheckBox.scss |   8 +
 styles/themes/light/index.scss               |   3 +
 6 files changed, 272 insertions(+), 89 deletions(-)
 create mode 100644 styles/themes/dark/components/CheckBox.scss
 create mode 100644 styles/themes/light/components/CheckBox.scss

diff --git a/packages/common/Checkbox/src/main.vue b/packages/common/Checkbox/src/main.vue
index 1c237f6b5..fae008108 100644
--- a/packages/common/Checkbox/src/main.vue
+++ b/packages/common/Checkbox/src/main.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     class="n-checkbox"
-    :class="{'n-checkbox--checked': value, 'n-checkbox--disabled': disabled, 'n-checkbox--indeterminate': indeterminate }"
+
+    :class="{'n-checkbox--checked': value, 'n-checkbox--disabled': disabled, 'n-checkbox--indeterminate': indeterminate,[`n-${synthesizedTheme}-theme`]: synthesizedTheme, }"
   >
     <div
       class="n-checkbox__checkbox"
@@ -18,8 +19,15 @@
 </template>
 
 <script>
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
+
 export default {
   name: 'NCheckbox',
+  mixins: [
+    withapp,
+    themeable
+  ],
   props: {
     label: {
       type: [Number, Boolean, String],
diff --git a/styles/Checkbox.scss b/styles/Checkbox.scss
index c3db585f2..6f5280ea2 100644
--- a/styles/Checkbox.scss
+++ b/styles/Checkbox.scss
@@ -1,104 +1,257 @@
-@import './mixins/mixins.scss';
-@import './themes/vars.scss';
+@import "./mixins/mixins.scss";
+@import "./themes/vars.scss";
 
-@include b(checkbox-group) {
-  .n-checkbox {
-    margin-right: 18px;
-  }
-}
-
-@include b(checkbox) {
-  & {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .n-checkbox__label {
-    user-select: none;
-    cursor: pointer;
-    font-size: 13px;
-    color: #fff;
-    margin-left: 8px;
-  }
-  .n-checkbox__checkbox {
-    cursor: pointer;
-    height: 14px;
-    width: 14px;
-    box-sizing: border-box;
-    box-shadow: inset 0 0 0 1px $checkbox-border-color;
-    background-color: transparent;
-    border-radius: 4px;
-    position: relative;
-    transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
-    &:hover {
-      box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
+@include themes-mixin {
+  @include once {
+    @include b(checkbox-group) {
+      .n-checkbox {
+        margin-right: 18px;
+      }
     }
-    &::before {
-      box-sizing: content-box;
-      content: "";
-      border-bottom: 2px solid #5C647B;
-      width: 8px;
-      left: 3px;
-      position: absolute;
-      top: 6px;
-      opacity: 0;
-      transform: scale(.5);
-      transform-origin: center;
-      transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
-    }
-    &::after {
-      box-sizing: content-box;
-      content: "";
-      border: 1.5px solid #5C647B;
-      border-left: 0;
-      border-top: 0;
-      height: 8px;
-      left: 5px;
-      position: absolute;
-      top: 1px;
-      opacity: 0;
-      transform: rotate(45deg) scale(.5);
-      width: 3px;
-      transform-origin: center;
-      transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
-    }
-  }
-  &.n-checkbox--checked {
-    .n-checkbox__checkbox {
-      background-color: $checkbox-background--active;
-      box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
-      &::after {
-        opacity: 1;
-        transform: rotate(45deg) scale(1);
+    @include b(checkbox) {
+      & {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .n-checkbox__label {
+        user-select: none;
+        cursor: pointer;
+        font-size: 13px;
+        // color: #fff;
+        margin-left: 8px;
+      }
+      .n-checkbox__checkbox {
+        cursor: pointer;
+        height: 14px;
+        width: 14px;
+        box-sizing: border-box;
+        // box-shadow: inset 0 0 0 1px $checkbox-border-color;
+        background-color: transparent;
+        border-radius: 4px;
+        position: relative;
+        transition: box-shadow 0.3s $default-cubic-bezier,
+          background-color 0.3s $default-cubic-bezier;
+        // &:hover {
+        //   box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
+        // }
+        &::before {
+          box-sizing: content-box;
+          content: "";
+          // border-bottom: 2px solid #5c637a;
+          width: 8px;
+          left: 3px;
+          position: absolute;
+          top: 6px;
+          opacity: 0;
+          transform: scale(0.5);
+          transform-origin: center;
+          transition: transform 0.3s $default-cubic-bezier,
+            opacity 0.3s $default-cubic-bezier,
+            border-color 0.3s $default-cubic-bezier;
+        }
+        &::after {
+          box-sizing: content-box;
+          content: "";
+          // border: 1.5px solid #5C647B;
+          border-left: 0;
+          border-top: 0;
+          height: 8px;
+          left: 5px;
+          position: absolute;
+          top: 1px;
+          opacity: 0;
+          transform: rotate(45deg) scale(0.5);
+          width: 3px;
+          transform-origin: center;
+          transition: transform 0.3s $default-cubic-bezier,
+            opacity 0.3s $default-cubic-bezier,
+            border-color 0.3s $default-cubic-bezier;
+        }
+      }
+      &.n-checkbox--checked {
+        .n-checkbox__checkbox {
+          // background-color: $checkbox-background--active;
+          // box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
+          &::after {
+            opacity: 1;
+            transform: rotate(45deg) scale(1);
+          }
+        }
+      }
+      &.n-checkbox--indeterminate {
+        .n-checkbox__checkbox {
+          // background-color: $checkbox-background--active;
+          // box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
+          &::after {
+            opacity: 0;
+          }
+          &::before {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+      }
+      &.n-checkbox--disabled {
+        .n-checkbox__checkbox {
+          cursor: not-allowed;
+          // background-color: rgba(255,255,255,.16);
+          // box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
+          &::after {
+            // border: 1.5px solid rgba(255,255,255,.16);
+            border-left: 0;
+            border-top: 0;
+          }
+          // &::before {
+          //   border-bottom: 1.5px solid rgba(255,255,255,.16);
+          // }
+        }
       }
     }
   }
-  &.n-checkbox--indeterminate {
+  @include b(checkbox) {
+    .n-checkbox__label {
+      color: $--checkbox-font-color;
+    }
     .n-checkbox__checkbox {
-      background-color: $checkbox-background--active;
-      box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
-      &::after {
-        opacity: 0;
+      box-shadow: inset 0 0 0 1px $--checkbox-border-color;
+      &:hover {
+        box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
       }
       &::before {
-        opacity: 1;
-        transform: scale(1);
+        border-bottom: 2px solid $--checkbox-indeterminate-color;
       }
-    }
-  }
-  &.n-checkbox--disabled {
-    .n-checkbox__checkbox {
-      cursor: not-allowed;
-      background-color: rgba(255,255,255,.16);
-      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
       &::after {
-        border: 1.5px solid rgba(255,255,255,.16);
+        border: 1.5px solid $--checkbox-indeterminate-color;
         border-left: 0;
         border-top: 0;
       }
-      &::before {
-        border-bottom: 1.5px solid rgba(255,255,255,.16);
+    }
+
+    &.n-checkbox--checked,
+    &.n-checkbox--indeterminate {
+      .n-checkbox__checkbox {
+        background-color: $--checkbox-border-color--active;
+        box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
+        border-left: 0;
+        border-top: 0;
+      }
+    }
+
+    &.n-checkbox--disabled {
+      .n-checkbox__checkbox {
+        background-color: $--checkbox-disabled-bg-color;
+        box-shadow: inset 0 0 0 1px $--checkbox-disabled;
+        &::after {
+          border: 1.5px solid $--checkbox-disabled;
+          border-left: 0;
+          border-top: 0;
+        }
+        &::before {
+          border-bottom: 2px solid $--checkbox-disabled;
+        }
       }
     }
   }
-}
\ No newline at end of file
+}
+// @include b(checkbox-group) {
+//   .n-checkbox {
+//     margin-right: 18px;
+//   }
+// }
+
+// @include b(checkbox) {
+//   & {
+//     display: inline-flex;
+//     align-items: center;
+//     justify-content: center;
+//   }
+//   .n-checkbox__label {
+//     user-select: none;
+//     cursor: pointer;
+//     font-size: 13px;
+//     color: #fff;
+//     margin-left: 8px;
+//   }
+//   .n-checkbox__checkbox {
+//     cursor: pointer;
+//     height: 14px;
+//     width: 14px;
+//     box-sizing: border-box;
+//     box-shadow: inset 0 0 0 1px $checkbox-border-color;
+//     background-color: transparent;
+//     border-radius: 4px;
+//     position: relative;
+//     transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
+//     &:hover {
+//       box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
+//     }
+//     &::before {
+//       box-sizing: content-box;
+//       content: "";
+//       border-bottom: 2px solid #5C647B;
+//       width: 8px;
+//       left: 3px;
+//       position: absolute;
+//       top: 6px;
+//       opacity: 0;
+//       transform: scale(.5);
+//       transform-origin: center;
+//       transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
+//     }
+//     &::after {
+//       box-sizing: content-box;
+//       content: "";
+//       border: 1.5px solid #5C647B;
+//       border-left: 0;
+//       border-top: 0;
+//       height: 8px;
+//       left: 5px;
+//       position: absolute;
+//       top: 1px;
+//       opacity: 0;
+//       transform: rotate(45deg) scale(.5);
+//       width: 3px;
+//       transform-origin: center;
+//       transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
+//     }
+//   }
+//   &.n-checkbox--checked {
+//     .n-checkbox__checkbox {
+//       background-color: $checkbox-background--active;
+//       box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
+//       &::after {
+//         opacity: 1;
+//         transform: rotate(45deg) scale(1);
+//       }
+//     }
+//   }
+//   &.n-checkbox--indeterminate {
+//     .n-checkbox__checkbox {
+//       background-color: $checkbox-background--active;
+//       box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
+//       &::after {
+//         opacity: 0;
+//       }
+//       &::before {
+//         opacity: 1;
+//         transform: scale(1);
+//       }
+//     }
+//   }
+//   &.n-checkbox--disabled {
+//     .n-checkbox__checkbox {
+//       cursor: not-allowed;
+//       background-color: rgba(255,255,255,.16);
+//       box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
+//       &::after {
+//         border: 1.5px solid rgba(255,255,255,.16);
+//         border-left: 0;
+//         border-top: 0;
+//       }
+//       &::before {
+//         border-bottom: 1.5px solid rgba(255,255,255,.16);
+//       }
+//     }
+//   }
+// }
diff --git a/styles/themes/dark/components/CheckBox.scss b/styles/themes/dark/components/CheckBox.scss
new file mode 100644
index 000000000..677ba1610
--- /dev/null
+++ b/styles/themes/dark/components/CheckBox.scss
@@ -0,0 +1,9 @@
+@mixin setup-dark-checkbox {
+  $border-color: rgba(255, 255, 255, 0.4);
+  $--checkbox-font-color: $neutral-3 !global;
+  $--checkbox-border-color: $border-color !global;
+  $--checkbox-border-color--active: $primary-6 !global;
+  $--checkbox-indeterminate-color: $neutral-10 !global;
+  $--checkbox-disabled: $border-color !global;
+  $--checkbox-disabled-bg-color: rgba(255, 255, 255, 0.16) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index 45d8e0f75..dbf35f99e 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -13,6 +13,7 @@
 @import "components/Popover.scss";
 @import "components/Tooltip.scss";
 @import "components/Confirm.scss";
+@import "components/CheckBox.scss";
 
 @mixin setup-dark-theme () {
   @include setup-dark-colors();
@@ -43,4 +44,5 @@
   @include setup-dark-popover;
   @include setup-dark-tooltip;
   @include setup-dark-confirm;
+  @include setup-dark-checkbox;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/CheckBox.scss b/styles/themes/light/components/CheckBox.scss
new file mode 100644
index 000000000..543ad5fb6
--- /dev/null
+++ b/styles/themes/light/components/CheckBox.scss
@@ -0,0 +1,8 @@
+@mixin setup-light-checkbox {
+  $--checkbox-font-color: $neutral-3 !global;
+  $--checkbox-border-color: $neutral-5 !global;
+  $--checkbox-border-color--active: $primary-6 !global;
+  $--checkbox-indeterminate-color: $neutral-10 !global;
+  $--checkbox-disabled: $neutral-5 !global;
+  $--checkbox-disabled-bg-color: $neutral-8 !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index 01badd01a..5c9adbb3c 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -14,6 +14,8 @@
 @import "components/Popover.scss";
 @import "components/Tooltip.scss";
 @import "components/Confirm.scss";
+@import "components/CheckBox.scss";
+
 
 @mixin setup-light-theme () {
   @include setup-light-colors();
@@ -46,4 +48,5 @@
   @include setup-light-popover;
   @include setup-light-tooltip;
   @include setup-light-confirm;
+  @include setup-light-checkbox;
 }
\ No newline at end of file

From 028fa850b432f57ccd777627bee08e94d192cbd9 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sat, 28 Sep 2019 21:16:19 +0800
Subject: [PATCH 04/13] fix(input): vertical align

---
 styles/Input.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/styles/Input.scss b/styles/Input.scss
index 5e570f76f..cdb502ba0 100644
--- a/styles/Input.scss
+++ b/styles/Input.scss
@@ -67,6 +67,8 @@
   @include m(small-size) {
     font-size: $small-input-font-size;
     $height: round($small-input-font-size * 1.5);
+    height: $small-height;
+    line-height: $small-height;
     @include e(input) {
       height: $small-height;
     }
@@ -80,6 +82,8 @@
   @include m(medium-size) {
     font-size: $medium-input-font-size;
     $height: round($medium-input-font-size * 1.5);
+    height: $medium-height;
+    line-height: $medium-height;
     @include e(input) {
       height: $medium-height;
     }
@@ -93,6 +97,8 @@
   @include m(large-size) {
     font-size: $large-input-font-size;
     $height: round($large-input-font-size * 1.5);
+    height: $large-height;
+    line-height: $large-height;
     @include e(input) {
       height: $large-height;
     }

From a33cdf7fa3e8865caf46f0982feb81395ee4e216 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 29 Sep 2019 00:13:01 +0800
Subject: [PATCH 05/13] refactor(modal): new api

---
 .../components/confirm/enUS/async.md          |   1 -
 .../components/confirm/enUS/basic.md          |   3 -
 .../components/confirmDemo/async.demo.vue     |  53 --------
 .../components/confirmDemo/index.vue          |  35 -----
 .../components/confirmDemo/type.demo.vue      |  75 -----------
 .../components/modal/enUS/basic.md            |  38 ++++++
 .../components/modal/enUS/index.md            |   5 +
 .../components/modal/enUS/maskClosable.md     |  32 +++++
 .../components/modal/index.entry              |   0
 .../components/modal/zhCN/index.md            |   0
 demo/init.js                                  |   4 +-
 packages/base/Protal/src/main.js              |   2 +-
 packages/common/Modal/src/DeprecatedModal.vue | 113 ++++++++++++++++
 packages/common/Modal/src/Modal.vue           | 123 ++++++++++++++++++
 packages/common/Modal/src/ModalContent.vue    |  59 ++++++---
 packages/common/Modal/src/Overlay.vue         |   2 +-
 packages/common/Modal/src/main.vue            | 121 +++--------------
 17 files changed, 375 insertions(+), 291 deletions(-)
 delete mode 100644 demo/documentation/components/confirmDemo/async.demo.vue
 delete mode 100644 demo/documentation/components/confirmDemo/index.vue
 delete mode 100644 demo/documentation/components/confirmDemo/type.demo.vue
 create mode 100644 demo/documentation/components/modal/enUS/basic.md
 create mode 100644 demo/documentation/components/modal/enUS/index.md
 create mode 100644 demo/documentation/components/modal/enUS/maskClosable.md
 create mode 100644 demo/documentation/components/modal/index.entry
 create mode 100644 demo/documentation/components/modal/zhCN/index.md
 create mode 100644 packages/common/Modal/src/DeprecatedModal.vue
 create mode 100644 packages/common/Modal/src/Modal.vue

diff --git a/demo/documentation/components/confirm/enUS/async.md b/demo/documentation/components/confirm/enUS/async.md
index 7402fc3d7..0135138c6 100644
--- a/demo/documentation/components/confirm/enUS/async.md
+++ b/demo/documentation/components/confirm/enUS/async.md
@@ -17,7 +17,6 @@ export default {
         title: "Success",
         content:
           "Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by the Ionic Framework team.",
-        event: e,
         onPositiveClick: (hide) => {
           this.$NMessage.success("count down 1 second");
           window.setTimeout(hide, 1000)
diff --git a/demo/documentation/components/confirm/enUS/basic.md b/demo/documentation/components/confirm/enUS/basic.md
index c7451af04..c98597aff 100644
--- a/demo/documentation/components/confirm/enUS/basic.md
+++ b/demo/documentation/components/confirm/enUS/basic.md
@@ -22,7 +22,6 @@ export default {
       const confirmInstance = this.$NModal.confirm({
         title: "Confirm",
         content: "Are u sure to ...?",
-        event: e,
         onPositiveClick: (hide) => {
           this.$NMessage.success("sure");
           hide()
@@ -38,7 +37,6 @@ export default {
         title: "Success",
         content:
           "Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by the Ionic Framework team.",
-        event: e,
         onPositiveClick: (hide) => {
           this.$NMessage.success("show tooltip");
           hide()
@@ -49,7 +47,6 @@ export default {
       const confirmInstance = this.$NModal.error({
         title: "Error",
         content: "这是一个测试？",
-        event: e,
         onPositiveClick: (hide) => {
           this.$NMessage.success("I know..");
           hide()
diff --git a/demo/documentation/components/confirmDemo/async.demo.vue b/demo/documentation/components/confirmDemo/async.demo.vue
deleted file mode 100644
index 8a79f70fc..000000000
--- a/demo/documentation/components/confirmDemo/async.demo.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Async
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="display: block;"
-    >
-      <!--EXAMPLE_START-->
-      <n-button @click="handleConfirm">
-        Async Confirm
-      </n-button>
-
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  },
-  methods: {
-    handleConfirm (e) {
-      const confirmInstance = this.$NModal.confirm({
-        title: 'Confirm',
-        content: 'Are u sure to ...?',
-        okText: 'Yes', // 自定义ok按钮文字 error和success也可以使用
-        cancelText: 'No', // 自定义取消按钮文字
-        activateEvent: e,
-        onOk: () => {
-          console.log('click on ok', confirmInstance)
-          this.$NMessage.info('will be ok in 3 seconds')
-          confirmInstance.setLoading(true)
-          setTimeout(() => {
-            this.$NMessage.success('sure')
-            confirmInstance.remove()
-          }, 3000)
-        },
-        onCancel: () => {
-          this.$NMessage.error('cancel')
-        }
-      })
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/confirmDemo/index.vue b/demo/documentation/components/confirmDemo/index.vue
deleted file mode 100644
index a89eec2dd..000000000
--- a/demo/documentation/components/confirmDemo/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Confirm / $NModal
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <type />
-      <asyncDemo />
-    </div>
-  </div>
-</template>
-
-<script>
-import type from './type.demo.vue'
-import asyncDemo from './async.demo.vue'
-
-export default {
-  components: {
-    type,
-    asyncDemo
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/confirmDemo/type.demo.vue b/demo/documentation/components/confirmDemo/type.demo.vue
deleted file mode 100644
index 5615d0e18..000000000
--- a/demo/documentation/components/confirmDemo/type.demo.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Type
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="display: block;"
-    >
-      <!--EXAMPLE_START-->
-      <n-button @click="handleConfirm">
-        Confirm
-      </n-button>
-      <n-button @click="handleSuccess">
-        Success
-      </n-button>
-      <n-button @click="handleError">
-        Error
-      </n-button>
-
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  },
-  methods: {
-    handleConfirm (e) {
-      const confirmInstance = this.$NModal.confirm({
-        title: 'Confirm',
-        content: '<b>Are u sure to ...?',
-        activateEvent: e,
-        onOk: () => {
-          console.log('click on ok', confirmInstance)
-          this.$NMessage.success('sure')
-        },
-        onCancel: () => {
-          this.$NMessage.error('cancel')
-        }
-      })
-    },
-    handleSuccess (e) {
-      const confirmInstance = this.$NModal.success({
-        title: 'Success',
-        content: 'Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by the Ionic Framework team.',
-        activateEvent: e,
-        onOk: () => {
-          console.log('click on ok', confirmInstance)
-
-          this.$NMessage.success('show tooltip')
-        }
-      })
-    },
-    handleError (e) {
-      const confirmInstance = this.$NModal.error({
-        title: 'Error',
-        content: '<b>这是一个测试？</b>hhahhaahahhahahsdiusah ashdusadu asdsadsadsadsadsa',
-        activateEvent: e,
-        onOk: () => {
-          console.log('click on ok', confirmInstance)
-          this.$NMessage.success('I know..')
-        }
-      })
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/modal/enUS/basic.md b/demo/documentation/components/modal/enUS/basic.md
new file mode 100644
index 000000000..b33e55db8
--- /dev/null
+++ b/demo/documentation/components/modal/enUS/basic.md
@@ -0,0 +1,38 @@
+# Basic
+```html
+<n-button
+  size="small"
+  @click="isActive = true"
+>
+  Start Me up
+</n-button>
+<n-modal v-model="isActive">
+  <div style="background: hsl(226, 21%, 33%); padding: 24px; border-radius: 8px; color: white;">
+    <div>If you start me up, If you start me up, I'll never stop.</div>
+    <n-input v-model="inputValue" />
+    inputValue: {{ inputValue }}<br>
+    <n-tooltip>
+      <template v-slot:activator>
+        <n-button
+          size="small"
+          @click="isActive = false"
+        >
+          Close it
+        </n-button>
+      </template>
+      Why do you want to close it?
+    </n-tooltip>
+    <section class="markdown footer-part"><h2 id="api">API</h2><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>type</td><td>Type of button.</td><td>string</td><td><code>'default'</code></td><td></td></tr></tbody></table></section>
+  </div>
+</n-modal>
+```
+```js
+export default {
+  data () {
+    return {
+      isActive: false,
+      inputValue: ''
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/modal/enUS/index.md b/demo/documentation/components/modal/enUS/index.md
new file mode 100644
index 000000000..5fe83f254
--- /dev/null
+++ b/demo/documentation/components/modal/enUS/index.md
@@ -0,0 +1,5 @@
+# Modal
+```demo
+basic
+maskClosable
+```
\ No newline at end of file
diff --git a/demo/documentation/components/modal/enUS/maskClosable.md b/demo/documentation/components/modal/enUS/maskClosable.md
new file mode 100644
index 000000000..f277eb21f
--- /dev/null
+++ b/demo/documentation/components/modal/enUS/maskClosable.md
@@ -0,0 +1,32 @@
+# Mask Closable
+```html
+<n-button
+  size="small"
+  @click="isActive = true"
+>
+  Start Me up
+</n-button>
+<n-modal v-model="isActive">
+  <div style="background: #5C657EFF; padding: 24px; border-radius: 8px;">
+    <div>If you start me up, If you start me up, I'll never stop.</div>
+    <n-input v-model="inputValue" />
+    inputValue: {{ inputValue }}<br>
+    <n-button
+      size="small"
+      @click="isActive = false"
+    >
+      Close it
+    </n-button>
+  </div>
+</n-modal>
+```
+```js
+export default {
+  data () {
+    return {
+      isActive: false,
+      inputValue: ''
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/modal/index.entry b/demo/documentation/components/modal/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/modal/zhCN/index.md b/demo/documentation/components/modal/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/init.js b/demo/init.js
index db5726305..abfe4e71c 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -21,7 +21,7 @@ import inputDemo from './documentation/components/inputDemo'
 import selectDemo from './documentation/components/selectDemo'
 import cascaderDemo from './documentation/components/cascaderDemo'
 import inputKeyValuePairsDemo from './documentation/components/inputKeyValuePairsDemo'
-import modalDemo from './documentation/components/modalDemo'
+import modal from './documentation/components/modal'
 import nimbusFormCardDemo from './documentation/components/nimbusFormCardDemo'
 import messageDemo from './documentation/components/messageDemo'
 import tooltip from './documentation/components/tooltip'
@@ -135,7 +135,7 @@ const routes = [
       { path: '/n-select', component: selectDemo },
       { path: '/n-cascader', component: cascaderDemo },
       { path: '/n-InputKeyValuePairs', component: inputKeyValuePairsDemo },
-      { path: '/n-modal', component: modalDemo },
+      { path: '/n-modal', component: modal },
       { path: '/n-nimbus-form-card', component: nimbusFormCardDemo },
       { path: '/n-message', component: messageDemo },
       { path: '/n-tooltip', component: tooltip },
diff --git a/packages/base/Protal/src/main.js b/packages/base/Protal/src/main.js
index 0c44f57b8..4480df0c8 100644
--- a/packages/base/Protal/src/main.js
+++ b/packages/base/Protal/src/main.js
@@ -25,7 +25,7 @@ export default {
     }
   },
   render () {
-    const defaultSlot = this.$slots.default
+    const defaultSlot = this.$scopedSlots.default ? this.$scopedSlots.default() : []
     const childrenCount = defaultSlot && defaultSlot.length
     if (defaultSlot && childrenCount) {
       if (childrenCount !== 1) {
diff --git a/packages/common/Modal/src/DeprecatedModal.vue b/packages/common/Modal/src/DeprecatedModal.vue
new file mode 100644
index 000000000..533093722
--- /dev/null
+++ b/packages/common/Modal/src/DeprecatedModal.vue
@@ -0,0 +1,113 @@
+<script>
+import NModalOverlay from './Overlay'
+import NModalContent from './ModalContent'
+
+import detachable from '../../../mixins/detachable'
+import zindexable from '../../../mixins/zindexable'
+
+export default {
+  name: 'NModal',
+  mixins: [
+    detachable,
+    zindexable
+  ],
+  props: {
+    activateEvent: {
+      validator (e) {
+        return e instanceof MouseEvent
+      },
+      default: null
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      mousedownTarget: null
+    }
+  },
+  computed: {
+    active () {
+      return this.value
+    }
+  },
+  methods: {
+    deactivate () {
+      this.$emit('input', false)
+    }
+  },
+  render (h) {
+    return h('div', {
+      staticClass: 'n-modal-activator',
+      ref: 'activator'
+    }, [
+      this.$scopedSlots.activator ? this.$scopedSlots.activator() : null,
+      h('div', {
+        staticClass: 'n-modal-container',
+        ref: 'contentContainer',
+        class: {
+          'n-modal-container--active': this.value,
+          [this.namespace]: this.namespace
+        }
+      },
+      [
+        h(NModalOverlay, {
+          props: { active: this.value }
+        }),
+        h(NModalContent,
+          {
+            ref: 'content',
+            props: { active: this.value, activateEvent: this.activateEvent },
+            on: {
+              'after-leave': () => {
+                this.$emit('after-hide')
+              },
+              beforeLeave: () => {
+                this.$emit('before-hide')
+              },
+              mousedown: (e) => {
+                this.mousedownTarget = e.target
+              },
+              mouseup: (e) => {
+                const slotDOM = this.$refs.content.slotDOM
+                const scollbars = this.$refs.content.$el.querySelectorAll('.n-scrollbar-rail__scrollbar')
+                const elsToAvoid = [...slotDOM, ...scollbars]
+                if (this.maskClosable) {
+                  if (
+                    !elsToAvoid.some(el => el.contains(e.target)) &&
+                    !elsToAvoid.some(el => el.contains(this.mousedownTarget))
+                  ) {
+                    this.deactivate()
+                  }
+                }
+              }
+            }
+          },
+          this.$scopedSlots.default()
+        )
+      ])
+    ])
+  }
+}
+</script>
+
+<style lang="scss">
+.n-modal-activator {
+  display: inline-block;
+}
+
+.n-modal-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 0;
+  width: 0;
+  display: flex;
+}
+</style>
diff --git a/packages/common/Modal/src/Modal.vue b/packages/common/Modal/src/Modal.vue
new file mode 100644
index 000000000..fb0bb4e52
--- /dev/null
+++ b/packages/common/Modal/src/Modal.vue
@@ -0,0 +1,123 @@
+<script>
+import NModalOverlay from './Overlay'
+import NModalContent from './ModalContent'
+import NBasePortal from '../../../base/Protal'
+import zindexable from '../../../mixins/zindexable'
+
+export default {
+  name: 'NModal',
+  mixins: [
+    zindexable
+  ],
+  props: {
+    activateEvent: {
+      validator (e) {
+        return e instanceof MouseEvent
+      },
+      default: null
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      mousedownTarget: null
+    }
+  },
+  computed: {
+    active () {
+      return this.value
+    }
+  },
+  watch: {
+    active (value) {
+      if (value) {
+        this.$refs.portal.transferElement()
+      }
+    }
+  },
+  mounted () {
+    if (this.active) {
+      this.$refs.portal.transferElement()
+    }
+  },
+  methods: {
+    deactivate () {
+      this.$emit('input', false)
+    }
+  },
+  render (h) {
+    return h(NBasePortal, {
+      ref: 'portal',
+      scopedSlots: {
+        default: () => h('div', {
+          staticClass: 'n-modal-container',
+          ref: 'contentContainer',
+          class: {
+            'n-modal-container--active': this.value,
+            [this.namespace]: this.namespace
+          }
+        },
+        [
+          h(NModalOverlay, {
+            props: { active: this.value }
+          }),
+          h(NModalContent,
+            {
+              ref: 'content',
+              props: { active: this.value, activateEvent: this.activateEvent },
+              on: {
+                'after-leave': () => {
+                  this.$emit('after-hide')
+                },
+                beforeLeave: () => {
+                  this.$emit('before-hide')
+                },
+                mousedown: (e) => {
+                  this.mousedownTarget = e.target
+                },
+                mouseup: (e) => {
+                  console.log('mouse up')
+                  const slotDOM = this.$refs.content.slotDOM
+                  const scollbars = this.$refs.content.$el.querySelectorAll('.n-scrollbar-rail__scrollbar')
+                  const elsToAvoid = [...slotDOM, ...scollbars]
+                  if (this.maskClosable) {
+                    if (
+                      !elsToAvoid.some(el => el.contains(e.target)) &&
+                  !elsToAvoid.some(el => el.contains(this.mousedownTarget))
+                    ) {
+                      this.deactivate()
+                    }
+                  }
+                }
+              }
+            },
+            this.$scopedSlots.default()
+          )
+        ])
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+.n-modal-activator {
+  display: inline-block;
+}
+
+.n-modal-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 0;
+  width: 0;
+  display: flex;
+}
+</style>
diff --git a/packages/common/Modal/src/ModalContent.vue b/packages/common/Modal/src/ModalContent.vue
index 9b0b78455..b5d207832 100644
--- a/packages/common/Modal/src/ModalContent.vue
+++ b/packages/common/Modal/src/ModalContent.vue
@@ -29,6 +29,18 @@
 <script>
 import NScrollbar from '../../Scrollbar'
 
+let mousePosition = null
+
+document.documentElement.addEventListener('click', (e) => {
+  mousePosition = {
+    x: e.clientX,
+    y: e.clientY
+  }
+  window.setTimeout(() => {
+    mousePosition = null
+  }, 32)
+}, true)
+
 export default {
   components: {
     NScrollbar
@@ -47,21 +59,29 @@ export default {
   },
   data () {
     return {
-      slotDOM: [],
       styleActive: false
     }
   },
+  computed: {
+    slotDOM: {
+      get () {
+        const els = this.$refs.contentInner.childNodes
+        return els
+      }
+    }
+  },
   created () {
     if (this.active) {
       this.styleActive = true
     }
   },
-  mounted () {
-    this.$nextTick().then(this.registerContent)
-  },
-  updated () {
-    this.$nextTick().then(this.registerContent)
-  },
+  // mounted () {
+  //   this.$nextTick().then(this.registerContent)
+  // },
+  // updated () {
+  //   console.log('updated')
+  //   this.$nextTick().then(this.registerContent)
+  // },
   beforeDestroy () {
     // window.clearTimeout(this.updateScrollbarTimerId)
   },
@@ -72,11 +92,6 @@ export default {
     handleMouseUp (e) {
       this.$emit('mouseup', e)
     },
-    registerContent () {
-      const slots = this.$slots.default
-      const els = slots.map(vNode => vNode.elm).filter(el => el)
-      this.slotDOM = els
-    },
     handleEnter () {
       this.styleActive = true
       this.$refs.scrollbar.enableScrollbar()
@@ -91,7 +106,8 @@ export default {
       if (
         (!this.$parent.$refs.activator ||
         !this.$parent.$refs.activator.childElementCount) &&
-        !this.activateEvent
+        !this.activateEvent &&
+        !mousePosition
       ) {
         return
       }
@@ -113,7 +129,9 @@ export default {
         const transformOriginX = -(offsetLeft - activatorLeft - activatorWidth / 2)
         const transformOriginY = -(offsetTop - activatorTop - scrollTop - activatorHeight / 2)
         this.$refs.contentInner.style.transformOrigin = `${transformOriginX}px ${transformOriginY}px`
-      } else {
+      } else if (
+        this.activateEvent
+      ) {
         const activatorTop = this.activateEvent.clientY
         const activatorLeft = this.activateEvent.clientX
         const activatorWidth = 0
@@ -121,10 +139,21 @@ export default {
         const transformOriginX = -(offsetLeft - activatorLeft - activatorWidth / 2)
         const transformOriginY = -(offsetTop - activatorTop - scrollTop - activatorHeight / 2)
         this.$refs.contentInner.style.transformOrigin = `${transformOriginX}px ${transformOriginY}px`
+      } else if (mousePosition) {
+        const activatorTop = mousePosition.y
+        const activatorLeft = mousePosition.x
+        const activatorWidth = 0
+        const activatorHeight = 0
+        const transformOriginX = -(offsetLeft - activatorLeft - activatorWidth / 2)
+        const transformOriginY = -(offsetTop - activatorTop - scrollTop - activatorHeight / 2)
+        this.$refs.contentInner.style.transformOrigin = `${transformOriginX}px ${transformOriginY}px`
       }
     },
     handleBeforeLeave () {
-      this.updateTransformOrigin()
+      if (this.$parent.$refs.activator &&
+        this.$parent.$refs.activator.childElementCount) {
+        this.updateTransformOrigin()
+      }
       this.$refs.scrollbar.disableScrollbar()
       this.$emit('before-leave')
     },
diff --git a/packages/common/Modal/src/Overlay.vue b/packages/common/Modal/src/Overlay.vue
index b40a84882..52347e8a9 100644
--- a/packages/common/Modal/src/Overlay.vue
+++ b/packages/common/Modal/src/Overlay.vue
@@ -26,7 +26,7 @@ export default {
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, .35);
+  background-color: rgba(0, 0, 0, .4);
 }
 
 .n-modal-content {
diff --git a/packages/common/Modal/src/main.vue b/packages/common/Modal/src/main.vue
index c88bc3a90..4a1e63e1a 100644
--- a/packages/common/Modal/src/main.vue
+++ b/packages/common/Modal/src/main.vue
@@ -1,113 +1,24 @@
 <script>
-import NModalOverlay from './Overlay'
-import NModalContent from './ModalContent'
-
-import detachable from '../../../mixins/detachable'
-import zindexable from '../../../mixins/zindexable'
+import DeprecatedModal from './DeprecatedModal'
+import Modal from './Modal'
 
 export default {
   name: 'NModal',
-  mixins: [
-    detachable,
-    zindexable
-  ],
-  props: {
-    activateEvent: {
-      validator (e) {
-        return e instanceof MouseEvent
-      },
-      default: null
-    },
-    value: {
-      type: Boolean,
-      default: false
-    },
-    maskClosable: {
-      type: Boolean,
-      default: true
+  functional: true,
+  render (h, context) {
+    if (context.scopedSlots.activator) {
+      return h(DeprecatedModal, {
+        props: context.props,
+        scopedSlots: context.scopedSlots,
+        on: context.listeners
+      })
+    } else {
+      return h(Modal, {
+        props: context.props,
+        scopedSlots: context.scopedSlots,
+        on: context.listeners
+      })
     }
-  },
-  data () {
-    return {
-      mousedownTarget: null
-    }
-  },
-  computed: {
-    active () {
-      return this.value
-    }
-  },
-  methods: {
-    deactivate () {
-      this.$emit('input', false)
-    }
-  },
-  render (h) {
-    return h('div', {
-      staticClass: 'n-modal-activator',
-      ref: 'activator'
-    }, [
-      this.$slots.activator,
-      h('div', {
-        staticClass: 'n-modal-container',
-        ref: 'contentContainer',
-        class: {
-          'n-modal-container--active': this.value,
-          [this.namespace]: this.namespace
-        }
-      },
-      [
-        h(NModalOverlay, {
-          props: { active: this.value }
-        }),
-        h(NModalContent,
-          {
-            ref: 'content',
-            props: { active: this.value, activateEvent: this.activateEvent },
-            on: {
-              'after-leave': () => {
-                this.$emit('after-hide')
-              },
-              beforeLeave: () => {
-                this.$emit('before-hide')
-              },
-              mousedown: (e) => {
-                this.mousedownTarget = e.target
-              },
-              mouseup: (e) => {
-                const slotDOM = this.$refs.content.slotDOM
-                const scollbars = this.$refs.content.$el.querySelectorAll('.n-scrollbar-rail__scrollbar')
-                const elsToAvoid = [...slotDOM, ...scollbars]
-                if (this.maskClosable) {
-                  if (
-                    !elsToAvoid.some(el => el.contains(e.target)) &&
-                    !elsToAvoid.some(el => el.contains(this.mousedownTarget))
-                  ) {
-                    this.deactivate()
-                  }
-                }
-              }
-            }
-          },
-          this.$slots.default
-        )
-      ])
-    ])
   }
 }
 </script>
-
-<style lang="scss">
-.n-modal-activator {
-  display: inline-block;
-}
-
-.n-modal-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 0;
-  width: 0;
-  display: flex;
-}
-</style>

From 8cca6ad67824459c27b038a74157dcd9982fb4e0 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 29 Sep 2019 00:13:17 +0800
Subject: [PATCH 06/13] style: some color adjustment

---
 styles/themes/dark/components/Confirm.scss  | 3 ++-
 styles/themes/dark/components/Popover.scss  | 2 +-
 styles/themes/dark/components/Tooltip.scss  | 2 +-
 styles/themes/dark/darkColors.scss          | 6 +++---
 styles/themes/light/components/Confirm.scss | 1 +
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/styles/themes/dark/components/Confirm.scss b/styles/themes/dark/components/Confirm.scss
index ee641ae44..4d52d928f 100644
--- a/styles/themes/dark/components/Confirm.scss
+++ b/styles/themes/dark/components/Confirm.scss
@@ -1,5 +1,6 @@
 @mixin setup-dark-confirm {
   $--confirm-title-color: $--n-text-color !global;
   $--confirm-color: $--n-secondary-text-color !global;
-  $--confirm-background-color: $neutral-7 !global;
+  $--confirm-background-color: $neutral-6 !global;
+  $--confirm-border-color: $--n-divider-color !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Popover.scss b/styles/themes/dark/components/Popover.scss
index c350fef07..85318526f 100644
--- a/styles/themes/dark/components/Popover.scss
+++ b/styles/themes/dark/components/Popover.scss
@@ -1,4 +1,4 @@
 @mixin setup-dark-popover {
-  $--popover-background-color: $neutral-5 !global;
+  $--popover-background-color: $neutral-6 !global;
   $--popover-color: $--n-secondary-text-color !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Tooltip.scss b/styles/themes/dark/components/Tooltip.scss
index 68a608c12..08c26fc6d 100644
--- a/styles/themes/dark/components/Tooltip.scss
+++ b/styles/themes/dark/components/Tooltip.scss
@@ -1,5 +1,5 @@
 @mixin setup-dark-tooltip {
-  $--tooltip-background-color: $neutral-5 !global;
+  $--tooltip-background-color: $neutral-6 !global;
   $--tooltip-color: $--n-text-color !global;
   $--tooltip-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.08) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/darkColors.scss b/styles/themes/dark/darkColors.scss
index dd2587a9f..73830d20d 100644
--- a/styles/themes/dark/darkColors.scss
+++ b/styles/themes/dark/darkColors.scss
@@ -43,9 +43,9 @@
   $warning-2: #ffead4 !global;
   $warning-3: #e0e090 !global;
   $warning-4: #ffba82 !global;
-  $warning-5: hsl(60, 68%, 78%) !global;
-  $warning-6: hsl(60, 70%, 70%) !global;
-  $warning-7: hsl(60, 64%, 64%) !global;
+  $warning-5: hsl(39, 82%, 78%) !global;
+  $warning-6: hsl(39, 82%, 72%) !global;
+  $warning-7: hsl(44, 73%, 64%) !global;
   $warning-8: #b34410 !global;
   $warning-9: #8c2c06 !global;
   $warning-10: #661c03 !global;
diff --git a/styles/themes/light/components/Confirm.scss b/styles/themes/light/components/Confirm.scss
index 7f1e5bcc7..847395451 100644
--- a/styles/themes/light/components/Confirm.scss
+++ b/styles/themes/light/components/Confirm.scss
@@ -2,4 +2,5 @@
   $--confirm-title-color: $--n-text-color !global;
   $--confirm-color: $--n-secondary-text-color !global;
   $--confirm-background-color: white !global;
+  $--confirm-border-color: white !global;
 }
\ No newline at end of file

From 57d54eee996b7d4c0c6ab4a5281ee0bc4d25a5a0 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 29 Sep 2019 13:29:39 +0800
Subject: [PATCH 07/13] fix(modal): click inside cause close after first open

---
 packages/common/Modal/src/DeprecatedModal.vue |  2 +-
 packages/common/Modal/src/Modal.vue           |  5 ++---
 packages/common/Modal/src/ModalContent.vue    | 12 ++++--------
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/common/Modal/src/DeprecatedModal.vue b/packages/common/Modal/src/DeprecatedModal.vue
index 533093722..f6e5ef4a2 100644
--- a/packages/common/Modal/src/DeprecatedModal.vue
+++ b/packages/common/Modal/src/DeprecatedModal.vue
@@ -75,7 +75,7 @@ export default {
                 this.mousedownTarget = e.target
               },
               mouseup: (e) => {
-                const slotDOM = this.$refs.content.slotDOM
+                const slotDOM = this.$refs.content.slotDOM()
                 const scollbars = this.$refs.content.$el.querySelectorAll('.n-scrollbar-rail__scrollbar')
                 const elsToAvoid = [...slotDOM, ...scollbars]
                 if (this.maskClosable) {
diff --git a/packages/common/Modal/src/Modal.vue b/packages/common/Modal/src/Modal.vue
index fb0bb4e52..028880cc3 100644
--- a/packages/common/Modal/src/Modal.vue
+++ b/packages/common/Modal/src/Modal.vue
@@ -83,14 +83,13 @@ export default {
                   this.mousedownTarget = e.target
                 },
                 mouseup: (e) => {
-                  console.log('mouse up')
-                  const slotDOM = this.$refs.content.slotDOM
+                  const slotDOM = this.$refs.content.slotDOM()
                   const scollbars = this.$refs.content.$el.querySelectorAll('.n-scrollbar-rail__scrollbar')
                   const elsToAvoid = [...slotDOM, ...scollbars]
                   if (this.maskClosable) {
                     if (
                       !elsToAvoid.some(el => el.contains(e.target)) &&
-                  !elsToAvoid.some(el => el.contains(this.mousedownTarget))
+                      !elsToAvoid.some(el => el.contains(this.mousedownTarget))
                     ) {
                       this.deactivate()
                     }
diff --git a/packages/common/Modal/src/ModalContent.vue b/packages/common/Modal/src/ModalContent.vue
index b5d207832..adab516dc 100644
--- a/packages/common/Modal/src/ModalContent.vue
+++ b/packages/common/Modal/src/ModalContent.vue
@@ -62,14 +62,6 @@ export default {
       styleActive: false
     }
   },
-  computed: {
-    slotDOM: {
-      get () {
-        const els = this.$refs.contentInner.childNodes
-        return els
-      }
-    }
-  },
   created () {
     if (this.active) {
       this.styleActive = true
@@ -86,6 +78,10 @@ export default {
     // window.clearTimeout(this.updateScrollbarTimerId)
   },
   methods: {
+    slotDOM () {
+      const els = this.$refs.contentInner.childNodes
+      return els
+    },
     handleMouseDown (e) {
       this.$emit('mousedown', e)
     },

From 9106eae808aa7759bbc654f8fe4edf509c1ffc75 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 29 Sep 2019 17:54:20 +0800
Subject: [PATCH 08/13] style: dark mode color

---
 .../components/modal/enUS/basic.md            |   2 +-
 demo/styles/ComponentDemo.scss                |   6 +-
 demo/styles/markdown.scss                     | 147 ++++++++++--------
 demo/utils/ComponentDemo.vue                  |  15 +-
 packages/common/TimePicker/src/main.vue       |  15 ++
 packages/nimbus/ServiceLayout/src/main.vue    |   5 +-
 styles/Input.scss                             |   3 -
 styles/NimbusServiceLayout.scss               |   2 +-
 styles/TimePicker.scss                        |   2 +-
 styles/mixins/color.scss                      |   0
 styles/themes/dark/components/BasePicker.scss |   4 +-
 .../dark/components/BaseSelectMenu.scss       |   2 +-
 styles/themes/dark/components/Confirm.scss    |   2 +-
 .../dark/components/NimbusServiceLayout.scss  |   8 +-
 styles/themes/dark/components/Popover.scss    |   2 +-
 styles/themes/dark/components/Tooltip.scss    |   4 +-
 styles/themes/dark/darkColors.hs.scss         |  20 +--
 styles/themes/dark/darkColors.ls.scss         |  20 +--
 styles/themes/dark/darkColors.scss            |  32 ++--
 styles/themes/dark/index.scss                 |  19 ++-
 styles/themes/light/index.scss                |   3 +
 21 files changed, 189 insertions(+), 124 deletions(-)
 create mode 100644 styles/mixins/color.scss

diff --git a/demo/documentation/components/modal/enUS/basic.md b/demo/documentation/components/modal/enUS/basic.md
index b33e55db8..e8eeb12b6 100644
--- a/demo/documentation/components/modal/enUS/basic.md
+++ b/demo/documentation/components/modal/enUS/basic.md
@@ -7,7 +7,7 @@
   Start Me up
 </n-button>
 <n-modal v-model="isActive">
-  <div style="background: hsl(226, 21%, 33%); padding: 24px; border-radius: 8px; color: white;">
+  <div style="background: rgb(46, 52, 68); padding: 24px; border-radius: 8px; color: white;">
     <div>If you start me up, If you start me up, I'll never stop.</div>
     <n-input v-model="inputValue" />
     inputValue: {{ inputValue }}<br>
diff --git a/demo/styles/ComponentDemo.scss b/demo/styles/ComponentDemo.scss
index 72c408d82..8fec60e4e 100644
--- a/demo/styles/ComponentDemo.scss
+++ b/demo/styles/ComponentDemo.scss
@@ -3,9 +3,9 @@
 
 @include themes-mixin {
   @include b(code-box) {
-    background-color: $service-layout-drawer-background-color;
-    border-color: $service-layout-border-color;
-    box-shadow: inset 0 0 0 1px $--n-divider-color;
+    background-color: $--n-card-color;
+    border: 1px solid $--n-divider-color;
+    background-clip: padding-box;
     @include e(code) {
       border-top: 1px solid $--n-divider-color;
       code {
diff --git a/demo/styles/markdown.scss b/demo/styles/markdown.scss
index 7c59bdb66..44362e8d9 100644
--- a/demo/styles/markdown.scss
+++ b/demo/styles/markdown.scss
@@ -1,72 +1,85 @@
-.n-app--light-theme .markdown {
-  code {
-    background-color: rgb(244, 244, 244);
-    border: 1px solid rgb(230, 230, 230);
-  }
-  table {
-    border: 1px solid rgba(34,36,38,.15);
-    th {
-      background: rgb(250, 250, 250);      
-    }
-    td {
-      background-color: white;
-    }
-  }
-}
+@import '../../styles/mixins/config.scss';
+@import '../../styles/mixins/mixins.scss';
 
-.markdown {
-  h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-  }
-  h1 {
-    font-size: 24px;
-    margin-bottom: 12px;
-  }
-  h2 {
-    font-size: 20px;
-    margin-top: 24px;
-    margin-bottom: 12px;
-  }
-  p {
-    margin: 0 0 16px 0;
-    font-size: 14px;
-    line-height: 2;
-  }
-  code {
-    box-sizing: border-box;
-    border-radius: 3px;
-    background-color: rgba(255, 255, 255, .09);
-    padding: .2em .4em;
-    font-size: 14px;
-    font-family: 'Lato';
-  }
-  table {
-    font-size: 14px;
-    width: 100%;
-    border: 1px solid #40465b;
-    border-radius: 6px;
-    text-align: left;
-    border-collapse: separate;
-    border-spacing: 0;
-    overflow: hidden;
-    th {
-      background-color: hsl(226, 27%, 25%);
-      text-align: inherit;
-      padding: 14px 12px;
-      vertical-align: inherit;
-      font-style: none;
-      font-weight: 400;
-      text-transform: none;
-      border-bottom: 1px solid rgba(34,36,38,.1);
-      border-left: none;
-      font-weight: bold;
+@include themes-mixin {
+  @if $theme == 'dark' {
+    .markdown {
+      h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+      }
+      h1 {
+        font-size: 24px;
+        margin-bottom: 12px;
+      }
+      h2 {
+        font-size: 20px;
+        margin-top: 24px;
+        margin-bottom: 12px;
+      }
+      p {
+        margin: 0 0 16px 0;
+        font-size: 14px;
+        line-height: 2;
+      }
+      code {
+        box-sizing: border-box;
+        border-radius: 3px;
+        background-color: $--n-alpha-table-header-color;
+        padding: .2em .4em;
+        font-size: 14px;
+        font-family: 'Lato';
+      }
+      table {
+        font-size: 14px;
+        width: 100%;
+        border: 1px solid $--n-alpha-divider-color;
+        border-radius: 6px;
+        text-align: left;
+        border-collapse: separate;
+        border-spacing: 0;
+        overflow: hidden;
+        // background-color: $--n-alpha-table-body-color;
+        th {
+          background-color: $--n-alpha-table-header-color;
+          background-clip: padding-box;
+          text-align: inherit;
+          padding: 14px 12px;
+          vertical-align: inherit;
+          font-style: none;
+          font-weight: 400;
+          text-transform: none;
+          border-left: none;
+          font-weight: bold;
+          border-bottom: 1px solid $--n-alpha-divider-color;
+          &:not(:last-child) {
+            border-right: 1px solid $--n-alpha-table-header-color;
+          }
+        }
+        td {
+          background-color: $--n-alpha-table-body-color;
+          background-clip: padding-box;
+          padding: 12px;
+        }
+      }
+      &.footer-part {
+        margin-top: 16px;
+      }
     }
-    td {
-      padding: 12px;
-      background-color: #1F263E;
+  } @else {
+    .n-app--light-theme .markdown {
+      code {
+        background-color: rgb(244, 244, 244);
+        border: 1px solid rgb(230, 230, 230);
+      }
+      table {
+        border: 1px solid rgba(34,36,38,.15);
+        th {
+          background: rgb(250, 250, 250);      
+        }
+        td {
+          background-color: white;
+        }
+      }
     }
   }
-  &.footer-part {
-    margin-top: 16px;
-  }
 }
\ No newline at end of file
diff --git a/demo/utils/ComponentDemo.vue b/demo/utils/ComponentDemo.vue
index 2602d403f..0ef2e36df 100644
--- a/demo/utils/ComponentDemo.vue
+++ b/demo/utils/ComponentDemo.vue
@@ -1,3 +1,16 @@
+<i18n>
+{
+  "zh-cn": {
+    "show": "显示代码",
+    "hide": "收起代码"
+  },
+  "en-us": {
+    "show": "Show Code",
+    "hide": "Hide Code"
+  }
+}
+</i18n>
+
 <template>
   <div
     class="n-code-box"
@@ -23,7 +36,7 @@
             @click="toggleCodeDisplay"
           />
         </template>
-        Show Code
+        {{ !showCode ? $t('show') : $t('hide') }}
       </n-tooltip>
     </div>
     <div class="n-code-box__content markdown">
diff --git a/packages/common/TimePicker/src/main.vue b/packages/common/TimePicker/src/main.vue
index 08dda5577..53422bb5a 100644
--- a/packages/common/TimePicker/src/main.vue
+++ b/packages/common/TimePicker/src/main.vue
@@ -45,6 +45,11 @@
                   >
                     {{ hour }}
                   </div>
+                  <div
+                    v-for="i in [1, 2, 3, 4, 5, 6]"
+                    :key="i"
+                    style="height: 35px;"
+                  />
                 </n-scrollbar>
               </div>
               <div
@@ -63,6 +68,11 @@
                   >
                     {{ minute }}
                   </div>
+                  <div
+                    v-for="i in [1, 2, 3, 4, 5, 6]"
+                    :key="i"
+                    style="height: 35px;"
+                  />
                 </n-scrollbar>
               </div>
               <div
@@ -84,6 +94,11 @@
                   >
                     {{ second }}
                   </div>
+                  <div
+                    v-for="i in [1, 2, 3, 4, 5, 6]"
+                    :key="i"
+                    style="height: 35px;"
+                  />
                 </n-scrollbar>
               </div>
             </div>
diff --git a/packages/nimbus/ServiceLayout/src/main.vue b/packages/nimbus/ServiceLayout/src/main.vue
index fee7828bf..453c1e35f 100644
--- a/packages/nimbus/ServiceLayout/src/main.vue
+++ b/packages/nimbus/ServiceLayout/src/main.vue
@@ -49,7 +49,10 @@
               {{ name }}
             </div>
           </div>
-          <div class="n-nimbus-service-layout-drawer-divider" />
+          <div
+            v-if="name"
+            class="n-nimbus-service-layout-drawer-divider"
+          />
           <div
             v-for="item in itemsWithCollapseStatus"
             :key="item.name"
diff --git a/styles/Input.scss b/styles/Input.scss
index cdb502ba0..5dc34168e 100644
--- a/styles/Input.scss
+++ b/styles/Input.scss
@@ -67,7 +67,6 @@
   @include m(small-size) {
     font-size: $small-input-font-size;
     $height: round($small-input-font-size * 1.5);
-    height: $small-height;
     line-height: $small-height;
     @include e(input) {
       height: $small-height;
@@ -82,7 +81,6 @@
   @include m(medium-size) {
     font-size: $medium-input-font-size;
     $height: round($medium-input-font-size * 1.5);
-    height: $medium-height;
     line-height: $medium-height;
     @include e(input) {
       height: $medium-height;
@@ -97,7 +95,6 @@
   @include m(large-size) {
     font-size: $large-input-font-size;
     $height: round($large-input-font-size * 1.5);
-    height: $large-height;
     line-height: $large-height;
     @include e(input) {
       height: $large-height;
diff --git a/styles/NimbusServiceLayout.scss b/styles/NimbusServiceLayout.scss
index 6f5cdb073..c40d489d0 100644
--- a/styles/NimbusServiceLayout.scss
+++ b/styles/NimbusServiceLayout.scss
@@ -18,7 +18,7 @@ $layout-nav-height: 64px;
       right: 0;
       top: 0;
       background-color: $service-layout-nav-background-color;
-      box-shadow: border-box;
+      box-sizing: border-box;
       border-bottom: 1px solid $service-layout-border-color;
       // box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.17);
       height: $layout-nav-height;
diff --git a/styles/TimePicker.scss b/styles/TimePicker.scss
index 1bc1cc1a3..a7b54b4f3 100644
--- a/styles/TimePicker.scss
+++ b/styles/TimePicker.scss
@@ -41,7 +41,7 @@
     // margin will boom! I don't know why
     padding: 10px 15px;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     .n-button {
       margin: 0;
     }
diff --git a/styles/mixins/color.scss b/styles/mixins/color.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/styles/themes/dark/components/BasePicker.scss b/styles/themes/dark/components/BasePicker.scss
index c4414a464..88de8b087 100644
--- a/styles/themes/dark/components/BasePicker.scss
+++ b/styles/themes/dark/components/BasePicker.scss
@@ -1,8 +1,8 @@
 @mixin setup-dark-base-picker {
   $--base-picker-color: $--n-secondary-text-color !global;
   $--base-picker-background-color: (
-    "default": rgba(255, 255, 255, .12),
-    "disabled": rgba(255, 255, 255, .08),
+    "default": rgba(255, 255, 255, .1),
+    "disabled": rgba(255, 255, 255, .06),
     "active": change-color($primary-6, $alpha: 0.1)
   ) !global;
   $--base-picker-placeholder-color: (
diff --git a/styles/themes/dark/components/BaseSelectMenu.scss b/styles/themes/dark/components/BaseSelectMenu.scss
index 7c2488d78..64c21b640 100644
--- a/styles/themes/dark/components/BaseSelectMenu.scss
+++ b/styles/themes/dark/components/BaseSelectMenu.scss
@@ -4,7 +4,7 @@
     "selected": $--n-primary-color,
     "disabled": $--n-disabled-text-color
   ) !global;
-  $--base-select-menu-background-color: $neutral-5 !global;
+  $--base-select-menu-background-color: $--n-popover-color !global;
   $--base-select-menu-box-shadow: none !global;
   $--base-select-menu-light-bar-background-color: change-color($primary-6, $alpha: .3) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Confirm.scss b/styles/themes/dark/components/Confirm.scss
index 4d52d928f..0b371df5f 100644
--- a/styles/themes/dark/components/Confirm.scss
+++ b/styles/themes/dark/components/Confirm.scss
@@ -1,6 +1,6 @@
 @mixin setup-dark-confirm {
   $--confirm-title-color: $--n-text-color !global;
   $--confirm-color: $--n-secondary-text-color !global;
-  $--confirm-background-color: $neutral-6 !global;
+  $--confirm-background-color: $--n-dialog-color !global;
   $--confirm-border-color: $--n-divider-color !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/NimbusServiceLayout.scss b/styles/themes/dark/components/NimbusServiceLayout.scss
index b7c956e57..769a72aa3 100644
--- a/styles/themes/dark/components/NimbusServiceLayout.scss
+++ b/styles/themes/dark/components/NimbusServiceLayout.scss
@@ -1,8 +1,8 @@
 @mixin setup-dark-nimbus-service-layout {
-  $service-layout-drawer-background-color: $neutral-8 !global;
-  $service-layout-body-background-color: $neutral-9 !global;
-  $service-layout-nav-background-color: $neutral-8 !global;
-  $service-layout-color: $--n-text-color !global;
+  $service-layout-drawer-background-color: $--n-card-color !global;
+  $service-layout-body-background-color: $--n-background-color !global;
+  $service-layout-nav-background-color: $--n-card-color !global;
+  $service-layout-color: $--n-secondary-text-color !global;
   $service-layout-border-color: $--n-divider-color !global;
   $service-layout-toggle-button-color: rgba(255, 255, 255, .3)!global;
   $service-layout-item-background-image: linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%) !global;
diff --git a/styles/themes/dark/components/Popover.scss b/styles/themes/dark/components/Popover.scss
index 85318526f..02c474d2a 100644
--- a/styles/themes/dark/components/Popover.scss
+++ b/styles/themes/dark/components/Popover.scss
@@ -1,4 +1,4 @@
 @mixin setup-dark-popover {
-  $--popover-background-color: $neutral-6 !global;
+  $--popover-background-color: $--n-popover-color !global;
   $--popover-color: $--n-secondary-text-color !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Tooltip.scss b/styles/themes/dark/components/Tooltip.scss
index 08c26fc6d..a673309e7 100644
--- a/styles/themes/dark/components/Tooltip.scss
+++ b/styles/themes/dark/components/Tooltip.scss
@@ -1,5 +1,5 @@
 @mixin setup-dark-tooltip {
-  $--tooltip-background-color: $neutral-6 !global;
-  $--tooltip-color: $--n-text-color !global;
+  $--tooltip-background-color: $--n-popover-color !global;
+  $--tooltip-color: $--n-secondary-text-color !global;
   $--tooltip-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.08) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/darkColors.hs.scss b/styles/themes/dark/darkColors.hs.scss
index fdea91224..64d5e5ff6 100644
--- a/styles/themes/dark/darkColors.hs.scss
+++ b/styles/themes/dark/darkColors.hs.scss
@@ -1,14 +1,14 @@
 @mixin setup-dark-colors {
-  $neutral-1: rgb(255, 255, 255) !global;
-  $neutral-2: rgba(255, 255, 255, .85) !global;
-  $neutral-3: rgba(255, 255, 255, .65) !global;
-  $neutral-4: rgba(255, 255, 255, .45) !global;
-  $neutral-5: #40465b !global;
-  $neutral-6: #272F46 !global;
-  $neutral-7: #1F263E !global;
-  $neutral-8: #171D33 !global;
-  $neutral-9: #10142C !global;
-  $neutral-10: rgb(0, 0, 0) !global;
+  $--neutral-1: rgb(255, 255, 255) !global;
+  $--neutral-2: rgba(255, 255, 255, .85) !global;
+  $--neutral-3: rgba(255, 255, 255, .65) !global;
+  $--neutral-4: rgba(255, 255, 255, .45) !global;
+  $--neutral-5: #40465b !global;
+  $--neutral-6: #272F46 !global;
+  $--neutral-7: #1F263E !global;
+  $--neutral-8: #171D33 !global;
+  $--neutral-9: #10142C !global;
+  $--neutral-10: rgb(0, 0, 0) !global;
   $primary-1: #e6ffee !global;
   $primary-2: #9bf2bb !global;
   $primary-3: #6ee69e !global;
diff --git a/styles/themes/dark/darkColors.ls.scss b/styles/themes/dark/darkColors.ls.scss
index 9e3ef4567..5c50e40cc 100644
--- a/styles/themes/dark/darkColors.ls.scss
+++ b/styles/themes/dark/darkColors.ls.scss
@@ -1,14 +1,14 @@
 @mixin setup-dark-colors {
-  $neutral-1: rgb(255, 255, 255) !global;
-  $neutral-2: rgba(255, 255, 255, .85) !global;
-  $neutral-3: rgba(255, 255, 255, .65) !global;
-  $neutral-4: rgba(255, 255, 255, .45) !global;
-  $neutral-5: #40465b !global;
-  $neutral-6: #272F46 !global;
-  $neutral-7: #1F263E !global;
-  $neutral-8: #171D33 !global;
-  $neutral-9: #10142C !global;
-  $neutral-10: rgb(0, 0, 0) !global;
+  $--neutral-1: rgb(255, 255, 255) !global;
+  $--neutral-2: rgba(255, 255, 255, .85) !global;
+  $--neutral-3: rgba(255, 255, 255, .65) !global;
+  $--neutral-4: rgba(255, 255, 255, .45) !global;
+  $--neutral-5: #40465b !global;
+  $--neutral-6: #272F46 !global;
+  $--neutral-7: #1F263E !global;
+  $--neutral-8: #171D33 !global;
+  $--neutral-9: #10142C !global;
+  $--neutral-10: rgb(0, 0, 0) !global;
   $primary-1: #e6ffee !global;
   $primary-2: #9bf2bb !global;
   $primary-3: #6ee69e !global;
diff --git a/styles/themes/dark/darkColors.scss b/styles/themes/dark/darkColors.scss
index 73830d20d..381d65694 100644
--- a/styles/themes/dark/darkColors.scss
+++ b/styles/themes/dark/darkColors.scss
@@ -1,14 +1,26 @@
 @mixin setup-dark-colors {
-  $neutral-1: rgb(255, 255, 255) !global;
-  $neutral-2: rgba(255, 255, 255, .90) !global;
-  $neutral-3: rgba(255, 255, 255, .80) !global;
-  $neutral-4: rgba(255, 255, 255, .70) !global;
-  $neutral-5: hsl(227, 15%, 42%) !global; // popover border
-  $neutral-6: hsl(226, 21%, 33%) !global; // modal divider
-  $neutral-7: hsl(226, 27%, 25%) !global;
-  $neutral-8: hsl(226, 33%, 18%) !global; // drawer & card & table header
-  $neutral-9: hsl(226, 39%, 12%) !global; // bg
-  $neutral-10: hsl(226, 46%, 7%) !global;
+  $--text-1: rgba(255, 255, 255, .9) !global;
+  $--text-2: rgba(255, 255, 255, .75) !global;
+  $--overlay-1: rgba(255, 255, 255, 0.3) !global; // popover
+  $--overlay-2: rgba(255, 255, 255, 0.26) !global; //
+  $--overlay-3: rgba(255, 255, 255, 0.22) !global; // dialog
+  $--overlay-4: rgba(255, 255, 255, 0.2) !global; //
+  $--overlay-5: rgba(255, 255, 255, 0.16) !global; //
+  $--overlay-6: rgba(255, 255, 255, 0.14) !global; // divider
+  $--overlay-7: rgba(255, 255, 255, 0.12) !global; // border
+  $--overlay-8: rgba(255, 255, 255, 0.09) !global; // table-header
+  $--overlay-9: rgba(255, 255, 255, 0.05) !global; // card & table-body
+  $--overlay-10: rgba(255, 255, 255, 0) !global; // background
+  $--neutral-1: rgb(89, 93, 119) !global; // popover
+  $--neutral-2: rgb(80, 84, 109) !global; //
+  $--neutral-3: rgb(70, 75, 99) !global; // dialog
+  $--neutral-4: rgb(65, 70, 94) !global; //
+  $--neutral-5: rgb(56, 61, 83) !global; //
+  $--neutral-6: rgb(51, 56, 78) !global; // divider
+  $--neutral-7: rgb(46, 52, 73) !global; // border
+  $--neutral-8: rgb(39, 45, 65) !global; // table-header
+  $--neutral-9: rgb(30, 36, 55) !global; // card & table-body
+  $--neutral-10: rgb(18, 24, 42) !global; // background
   $primary-1: #f0fcf8 !global;
   $primary-2: #d4f7eb !global;
   $primary-3: #b8f1de !global;
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index dbf35f99e..baa7e5bee 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -25,12 +25,21 @@
   $--n-warning-color: $warning-6 !global;
   $--n-error-color: $error-6 !global;
 
-  $--n-text-color: $neutral-2 !global;
-  $--n-divider-color: $neutral-7 !global;
-  $--n-border-color: $neutral-7 !global;
-  $--n-secondary-text-color: $neutral-2 !global;
-  $--n-table-header-color: mix($neutral-8, $neutral-9) !global;
+  $--n-text-color: $--text-1 !global;
+  $--n-popover-color: $--neutral-1 !global;
+  $--n-divider-color: $--neutral-6 !global;
+  $--n-alpha-divider-color: $--overlay-6 !global;
+  $--n-border-color: $--neutral-7 !global;
+  $--n-alpha-border-color: $--overlay-7 !global;
+  $--n-secondary-text-color: $--text-2 !global;
+  $--n-table-header-color: $--neutral-8 !global;
+  $--n-alpha-table-header-color: $--overlay-8 !global;
+  $--n-table-body-color: $--neutral-9 !global;
+  $--n-alpha-table-body-color: $--overlay-9 !global;
+  $--n-card-color: $--neutral-9 !global;
   $--n-disabled-text-color: rgba(255, 255, 255, .3) !global;
+  $--n-dialog-color: $--neutral-3 !global;
+  $--n-background-color: $--neutral-10 !global;
   @include setup-dark-nimbus-service-layout;
   @include setup-dark-divider;
   @include setup-dark-scrollbar;
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index 5c9adbb3c..67e2ebc71 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -34,6 +34,9 @@
   $--n-secondary-text-color: $neutral-3 !global;
   $--n-text-color: $neutral-2 !global;
   $--n-disabled-text-color: $neutral-5 !global;
+  $--n-card-color: $neutral-10 !global;
+  $--n-dialog-color: $neutral-10 !global;
+  $--n-background-color: $neutral-10 !global;
  
   @include setup-light-nimbus-service-layout;
   @include setup-light-divider;

From 9c18303bf7bcb1740156c38b114b406f54463c6a Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 29 Sep 2019 18:15:05 +0800
Subject: [PATCH 09/13] style(switch): funny animation

---
 styles/Switch.scss | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/styles/Switch.scss b/styles/Switch.scss
index b82df19fb..a3474158e 100644
--- a/styles/Switch.scss
+++ b/styles/Switch.scss
@@ -2,10 +2,9 @@
 @import './themes/vars.scss';
 
 @include b(switch) {
-  & {
-    display: inline-block;
-  }
-  .n-switch__rail {
+  display: inline-block;
+  @include e(rail) {
+    cursor: pointer;
     position: relative;
     height: 14px;
     width: 30px;
@@ -14,15 +13,27 @@
     margin: 3px;
     transition: background-color .2s $default-cubic-bezier;
     &::before, &::after {
+      cursor: inherit;
       content: "";
       position: absolute;
       height: 20px;
-      width: 20px;
+      width: 24px;
+      max-width: 20px;
       border-radius: 10px;
       top: -3px;
       left: -3px;
       box-shadow:0px 2px 4px 0px rgba(0,0,0,0.4);
-      transition: left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier;
+      transition: left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
+    }
+    @include not-m(disabled) {
+      &:active::before, &:active::after {
+        max-width: 24px;
+      }
+      @include m(active) {
+        &:active::before, &:active::after {
+          left: 9px;
+        }
+      }
     }
     &::before {
       background-image: linear-gradient(52deg,rgba(148,151,155,1) 0%,rgba(148,151,155,1) 100%);
@@ -32,7 +43,7 @@
       background-image: linear-gradient(52deg,rgba(120,205,104,1) 0%,rgba(20,166,165,1) 100%);
       opacity: 0;
     }
-    &.n-switch__rail--active {
+    @include m(active) {
       background-color: rgba(97, 196, 118, .27);
       &::before {
         left: 13px;
@@ -43,7 +54,7 @@
         opacity: 1;
       }
     }
-    &.n-switch__rail--disabled {
+   @include m(disabled) {
       cursor: not-allowed;
       opacity: .5;
     }

From 43e90f1b4f9f7167a748eddf3bb985ea21823717 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 29 Sep 2019 19:07:16 +0800
Subject: [PATCH 10/13] feat(switch): light theme

---
 .../components/switch/enUS/basic.md           |  19 +++
 .../components/switch/enUS/event.md           |  21 ++++
 .../components/switch/enUS/index.md           |   5 +
 .../components/switch/index.entry             |   0
 .../components/switch/zhCN/index.md           |   0
 .../components/switchDemo/basicUsage.demo.vue |  35 ------
 .../switchDemo/changeEvent.demo.vue           |  37 ------
 .../components/switchDemo/index.vue           |  35 ------
 demo/init.js                                  |   2 +-
 demo/utils/ComponentDemo.vue                  |   9 +-
 packages/common/Switch/src/main.vue           |   7 +-
 packages/common/Tooltip/src/main.vue          |   4 +
 styles/Switch.scss                            | 117 ++++++++++--------
 styles/themes/dark/components/Switch.scss     |  13 ++
 styles/themes/dark/index.scss                 |   2 +
 styles/themes/light/components/Switch.scss    |  13 ++
 styles/themes/light/index.scss                |   4 +-
 17 files changed, 161 insertions(+), 162 deletions(-)
 create mode 100644 demo/documentation/components/switch/enUS/basic.md
 create mode 100644 demo/documentation/components/switch/enUS/event.md
 create mode 100644 demo/documentation/components/switch/enUS/index.md
 create mode 100644 demo/documentation/components/switch/index.entry
 create mode 100644 demo/documentation/components/switch/zhCN/index.md
 delete mode 100644 demo/documentation/components/switchDemo/basicUsage.demo.vue
 delete mode 100644 demo/documentation/components/switchDemo/changeEvent.demo.vue
 delete mode 100644 demo/documentation/components/switchDemo/index.vue
 create mode 100644 styles/themes/dark/components/Switch.scss
 create mode 100644 styles/themes/light/components/Switch.scss

diff --git a/demo/documentation/components/switch/enUS/basic.md b/demo/documentation/components/switch/enUS/basic.md
new file mode 100644
index 000000000..1ae930152
--- /dev/null
+++ b/demo/documentation/components/switch/enUS/basic.md
@@ -0,0 +1,19 @@
+# Basic
+```html
+<n-switch
+  v-model="active"
+/>
+<n-switch
+  v-model="active"
+  disabled
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      active: false
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/switch/enUS/event.md b/demo/documentation/components/switch/enUS/event.md
new file mode 100644
index 000000000..7f71a5cc4
--- /dev/null
+++ b/demo/documentation/components/switch/enUS/event.md
@@ -0,0 +1,21 @@
+# Event
+```html
+<n-switch
+  v-model="active"
+  @change="handleChange"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      active: false
+    }
+  },
+  methods: {
+    handleChange (value) {
+      this.$NMessage.info(`Change Event: ${value}`)
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/switch/enUS/index.md b/demo/documentation/components/switch/enUS/index.md
new file mode 100644
index 000000000..f77e82252
--- /dev/null
+++ b/demo/documentation/components/switch/enUS/index.md
@@ -0,0 +1,5 @@
+# Switch
+```demo
+basic
+event
+```
\ No newline at end of file
diff --git a/demo/documentation/components/switch/index.entry b/demo/documentation/components/switch/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/switch/zhCN/index.md b/demo/documentation/components/switch/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/switchDemo/basicUsage.demo.vue b/demo/documentation/components/switchDemo/basicUsage.demo.vue
deleted file mode 100644
index 280e0d40d..000000000
--- a/demo/documentation/components/switchDemo/basicUsage.demo.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-switch
-        v-model="isActive"
-      />
-      <n-switch
-        v-model="isActive"
-        disabled
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">active: {{ isActive }}</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      isActive: false
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/switchDemo/changeEvent.demo.vue b/demo/documentation/components/switchDemo/changeEvent.demo.vue
deleted file mode 100644
index 6090db1e1..000000000
--- a/demo/documentation/components/switchDemo/changeEvent.demo.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Change Event
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-switch
-        v-model="isActive"
-        @change="handleChange"
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">active: {{ isActive }}</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      isActive: false
-    }
-  },
-  methods: {
-    handleChange (value) {
-      this.$NMessage.info(value)
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/switchDemo/index.vue b/demo/documentation/components/switchDemo/index.vue
deleted file mode 100644
index bfee58bbf..000000000
--- a/demo/documentation/components/switchDemo/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Switch / n-switch
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <basic-usage />
-      <change-event />
-    </div>
-  </div>
-</template>
-
-<script>
-import basicUsage from './basicUsage.demo.vue'
-import changeEvent from './changeEvent.demo.vue'
-
-export default {
-  components: {
-    basicUsage,
-    changeEvent
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/init.js b/demo/init.js
index abfe4e71c..3d487e0e2 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -15,7 +15,7 @@ import gradientTextDemo from './documentation/components/gradientTextDemo'
 import iconDemo from './documentation/components/iconDemo'
 import checkboxDemo from './documentation/components/checkboxDemo'
 import buttonDemo from './documentation/components/buttonDemo'
-import switchDemo from './documentation/components/switchDemo'
+import switchDemo from './documentation/components/switch'
 import tableDemo from './documentation/components/tableDemo'
 import inputDemo from './documentation/components/inputDemo'
 import selectDemo from './documentation/components/selectDemo'
diff --git a/demo/utils/ComponentDemo.vue b/demo/utils/ComponentDemo.vue
index 0ef2e36df..c245f2271 100644
--- a/demo/utils/ComponentDemo.vue
+++ b/demo/utils/ComponentDemo.vue
@@ -26,6 +26,7 @@
         :delay="300"
         :placement="'top'"
         :arrow="true"
+        :controller="controller"
       >
         <template v-slot:activator>
           <n-button
@@ -68,12 +69,18 @@ export default {
     return {
       showCode: false,
       lightThemeCSSRef: null,
-      defaultThemeCSSRef: null
+      defaultThemeCSSRef: null,
+      controller: {}
     }
   },
   watch: {
     synthesizedTheme (value) {
 
+    },
+    showCode () {
+      this.$nextTick().then(() => {
+        this.controller.updatePosition()
+      })
     }
   },
   mounted () {
diff --git a/packages/common/Switch/src/main.vue b/packages/common/Switch/src/main.vue
index 156457b37..d7cee77c8 100644
--- a/packages/common/Switch/src/main.vue
+++ b/packages/common/Switch/src/main.vue
@@ -1,6 +1,9 @@
 <template>
   <div
     class="n-switch"
+    :class="{
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+    }"
     @click="handleClick"
   >
     <div
@@ -12,10 +15,12 @@
 
 <script>
 import Emitter from '../../../mixins/emitter'
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
 
 export default {
   name: 'NSwitch',
-  mixins: [ Emitter ],
+  mixins: [ withapp, themeable, Emitter ],
   inject: {
     formItem: {
       default: null
diff --git a/packages/common/Tooltip/src/main.vue b/packages/common/Tooltip/src/main.vue
index c28c74153..43aa2a0a2 100644
--- a/packages/common/Tooltip/src/main.vue
+++ b/packages/common/Tooltip/src/main.vue
@@ -55,6 +55,10 @@ export default {
     maxWidth: {
       type: Number,
       default: null
+    },
+    controller: {
+      type: Object,
+      default: null
     }
   },
   render (h, context) {
diff --git a/styles/Switch.scss b/styles/Switch.scss
index a3474158e..1c3335c51 100644
--- a/styles/Switch.scss
+++ b/styles/Switch.scss
@@ -1,62 +1,79 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
-@include b(switch) {
-  display: inline-block;
-  @include e(rail) {
-    cursor: pointer;
-    position: relative;
-    height: 14px;
-    width: 30px;
-    border-radius: 7px;
-    background-color: rgba(148,151,155,0.4);
-    margin: 3px;
-    transition: background-color .2s $default-cubic-bezier;
-    &::before, &::after {
-      cursor: inherit;
-      content: "";
-      position: absolute;
-      height: 20px;
-      width: 24px;
-      max-width: 20px;
-      border-radius: 10px;
-      top: -3px;
-      left: -3px;
-      box-shadow:0px 2px 4px 0px rgba(0,0,0,0.4);
-      transition: left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
+@include themes-mixin{
+  @include b(switch) {
+    @include once {
+      display: inline-block;
     }
-    @include not-m(disabled) {
-      &:active::before, &:active::after {
-        max-width: 24px;
-      }
-      @include m(active) {
-        &:active::before, &:active::after {
-          left: 9px;
+    @include e(rail) {
+      @include once {
+        cursor: pointer;
+        position: relative;
+        height: 14px;
+        width: 30px;
+        border-radius: 7px;
+        margin: 3px;
+        transition: background-color .2s $default-cubic-bezier;
+        &::before, &::after {
+          box-sizing: border-box;
+          cursor: inherit;
+          content: "";
+          position: absolute;
+          height: 20px;
+          width: 24px;
+          max-width: 20px;
+          border-radius: 10px;
+          top: -3px;
+          left: -3px;
+          // transition: left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
+        }
+        &::before {
+          opacity: 1;
+        }
+        &::after {
+          opacity: 0;
+        }
+        @include not-m(disabled) {
+          &:active::before, &:active::after {
+            max-width: 24px;
+          }
+          @include m(active) {
+            &:active::before, &:active::after {
+              left: 9px;
+            }
+          }
+        }
+        @include m(active) {
+          &::before {
+            left: 13px;
+            opacity: 1;
+          }
+          &::after {
+            left: 13px;
+            opacity: 1;
+          }
         }
       }
-    }
-    &::before {
-      background-image: linear-gradient(52deg,rgba(148,151,155,1) 0%,rgba(148,151,155,1) 100%);
-      opacity: 1;
-    }
-    &::after {
-      background-image: linear-gradient(52deg,rgba(120,205,104,1) 0%,rgba(20,166,165,1) 100%);
-      opacity: 0;
-    }
-    @include m(active) {
-      background-color: rgba(97, 196, 118, .27);
+      &::before, &::after {
+        box-shadow: $--switch-switcher-box-shadow;
+        transition: $--switch-switcher-transition;
+        // border: $--switch-switcher-border;
+      }
+      background-color: map-get($map: $--switch-rail-background-color, $key: 'inactive');
       &::before {
-        left: 13px;
-        opacity: 0;
+        background-image: map-get($map: $--switch-switcher-color, $key: 'inactive');
       }
       &::after {
-        left: 13px;
-        opacity: 1;
+        background-image: map-get($map: $--switch-switcher-color, $key: 'active');
+      }
+      @include m(active) {
+        background-color: map-get($map: $--switch-rail-background-color, $key: 'active');
+      }
+      @include m(disabled) {
+        cursor: not-allowed;
+        opacity: .5;
       }
     }
-   @include m(disabled) {
-      cursor: not-allowed;
-      opacity: .5;
-    }
   }
-}
\ No newline at end of file
+}
diff --git a/styles/themes/dark/components/Switch.scss b/styles/themes/dark/components/Switch.scss
new file mode 100644
index 000000000..32188586e
--- /dev/null
+++ b/styles/themes/dark/components/Switch.scss
@@ -0,0 +1,13 @@
+@mixin setup-dark-switch {
+  $--switch-rail-background-color: (
+    "inactive": rgba(148,151,155,0.4),
+    "active": change-color($--n-primary-color, $alpha: .25)
+  )!global;
+  $--switch-switcher-color: (
+    "inactive": linear-gradient(52deg,rgba(148,151,155,1) 0%,rgba(148,151,155,1) 100%),
+    "active": linear-gradient(52deg,rgba(120,205,104,1) 0%,rgba(20,166,165,1) 100%)
+  ) !global;
+  $--switch-switcher-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4) !global;
+  $--switch-switcher-border: 1px solid transparent !global;
+  $--switch-switcher-transition: (left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index baa7e5bee..c00a291d3 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -14,6 +14,7 @@
 @import "components/Tooltip.scss";
 @import "components/Confirm.scss";
 @import "components/CheckBox.scss";
+@import "components/Switch.scss";
 
 @mixin setup-dark-theme () {
   @include setup-dark-colors();
@@ -54,4 +55,5 @@
   @include setup-dark-tooltip;
   @include setup-dark-confirm;
   @include setup-dark-checkbox;
+  @include setup-dark-switch;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Switch.scss b/styles/themes/light/components/Switch.scss
new file mode 100644
index 000000000..194295feb
--- /dev/null
+++ b/styles/themes/light/components/Switch.scss
@@ -0,0 +1,13 @@
+@mixin setup-light-switch {
+  $--switch-rail-background-color:(
+    "inactive":  $--n-divider-color,
+    "active": $--n-primary-color
+  ) !global;
+  $--switch-switcher-color: (
+    "inactive": linear-gradient(52deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%),
+    "active": linear-gradient(52deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%),
+  ) !global;
+  $--switch-switcher-box-shadow: (0px 1px 4px 0px rgba(0,0,0,0.35), inset 0px 0px 1px 0px rgba(0,0,0,0.05)) !global;
+  $--switch-switcher-border: 1px solid $--n-divider-color !global;
+  $--switch-switcher-transition: (left .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index 67e2ebc71..21af40af1 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -10,12 +10,11 @@
 @import "components/Table.scss";
 @import "components/AdvanceTable.scss";
 
-
 @import "components/Popover.scss";
 @import "components/Tooltip.scss";
 @import "components/Confirm.scss";
 @import "components/CheckBox.scss";
-
+@import "components/Switch.scss";
 
 @mixin setup-light-theme () {
   @include setup-light-colors();
@@ -52,4 +51,5 @@
   @include setup-light-tooltip;
   @include setup-light-confirm;
   @include setup-light-checkbox;
+  @include setup-light-switch;
 }
\ No newline at end of file

From c43a6a5b0ece164f0e4463a42f73931ca6b9d36d Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Tue, 8 Oct 2019 13:34:34 +0800
Subject: [PATCH 11/13] feat(message): light theme

---
 .../components/message/enUS/basic.md          |  45 ++++
 .../components/message/enUS/icon.md           |  26 +++
 .../components/message/enUS/index.md          |   6 +
 .../components/message/enUS/timing.md         |  22 ++
 .../components/message/index.entry            |   0
 .../components/message/zhCN/index.md          |   1 +
 .../messageDemo/basicUsage.demo.vue           |  52 -----
 .../messageDemo/customIcon.demo.vue           |  40 ----
 .../components/messageDemo/duration.demo.vue  |  34 ---
 .../components/messageDemo/index.vue          |  38 ----
 .../components/modalDemo/basicUsage.demo.vue  |  50 -----
 .../components/modalDemo/index.vue            |  35 ----
 .../modalDemo/maskClosable.demo.vue           |  53 -----
 demo/init.js                                  |   4 +-
 packages/common/Confirm/index.js              |  27 +--
 packages/common/LoadingBar/index.js           |   1 -
 packages/common/Message/index.js              |   4 +-
 .../src/{MessageCell.vue => Message.vue}      |   8 +-
 packages/common/Message/src/main.js           |  43 ++--
 packages/utils/installThemeableComponent.js   |  30 +++
 styles/Message.scss                           | 197 ++++++++++--------
 styles/themes/dark/components/Message.scss    |  16 ++
 styles/themes/dark/index.scss                 |   2 +
 styles/themes/light/components/Message.scss   |  16 ++
 styles/themes/light/index.scss                |   2 +
 25 files changed, 314 insertions(+), 438 deletions(-)
 create mode 100644 demo/documentation/components/message/enUS/basic.md
 create mode 100644 demo/documentation/components/message/enUS/icon.md
 create mode 100644 demo/documentation/components/message/enUS/index.md
 create mode 100644 demo/documentation/components/message/enUS/timing.md
 create mode 100644 demo/documentation/components/message/index.entry
 create mode 100644 demo/documentation/components/message/zhCN/index.md
 delete mode 100644 demo/documentation/components/messageDemo/basicUsage.demo.vue
 delete mode 100644 demo/documentation/components/messageDemo/customIcon.demo.vue
 delete mode 100644 demo/documentation/components/messageDemo/duration.demo.vue
 delete mode 100644 demo/documentation/components/messageDemo/index.vue
 delete mode 100644 demo/documentation/components/modalDemo/basicUsage.demo.vue
 delete mode 100644 demo/documentation/components/modalDemo/index.vue
 delete mode 100644 demo/documentation/components/modalDemo/maskClosable.demo.vue
 rename packages/common/Message/src/{MessageCell.vue => Message.vue} (86%)
 create mode 100644 packages/utils/installThemeableComponent.js
 create mode 100644 styles/themes/dark/components/Message.scss
 create mode 100644 styles/themes/light/components/Message.scss

diff --git a/demo/documentation/components/message/enUS/basic.md b/demo/documentation/components/message/enUS/basic.md
new file mode 100644
index 000000000..0b879a84e
--- /dev/null
+++ b/demo/documentation/components/message/enUS/basic.md
@@ -0,0 +1,45 @@
+# Basic
+```html
+<n-button @click="emitInfo">
+  Info
+</n-button>
+<n-button @click="emitError">
+  Error
+</n-button>
+<n-button @click="emitWarning">
+  Warning
+</n-button>
+<n-button @click="emitSuccess">
+  Success
+</n-button>
+```
+```js
+export default {
+  data() {
+    return {}
+  },
+  methods: {
+    emitInfo() {
+      this.$NMessage.info(
+        "I don't know why nobody told you how to unfold your love"
+      )
+    },
+    emitError() {
+      this.$NMessage.error("Once upon a time you dressed so fine")
+    },
+    emitWarning() {
+      this.$NMessage.warning("How many roads must a man walk down")
+    },
+    emitSuccess() {
+      this.$NMessage.success(
+        "'Cause you walked hand in hand With another man in my place"
+      )
+    }
+  }
+}
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/message/enUS/icon.md b/demo/documentation/components/message/enUS/icon.md
new file mode 100644
index 000000000..dbd841f9d
--- /dev/null
+++ b/demo/documentation/components/message/enUS/icon.md
@@ -0,0 +1,26 @@
+# Icon
+# Basic
+```html
+<n-button @click="emitMessage">
+  Hourglass Icon
+</n-button>
+```
+```js
+export default {
+  data() {
+    return {}
+  },
+  methods: {
+    emitMessage() {
+      this.$NMessage.warning("I never needed anybody's help in any way", {
+        icon: "md-hourglass"
+      })
+    }
+  }
+}
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/message/enUS/index.md b/demo/documentation/components/message/enUS/index.md
new file mode 100644
index 000000000..352e9f18d
--- /dev/null
+++ b/demo/documentation/components/message/enUS/index.md
@@ -0,0 +1,6 @@
+# Message
+```demo
+basic
+icon
+timing
+```
\ No newline at end of file
diff --git a/demo/documentation/components/message/enUS/timing.md b/demo/documentation/components/message/enUS/timing.md
new file mode 100644
index 000000000..8463a6c47
--- /dev/null
+++ b/demo/documentation/components/message/enUS/timing.md
@@ -0,0 +1,22 @@
+# Timing
+```html
+<n-button @click="emitInfo">
+  Last for 5 second
+</n-button>
+```
+
+```js
+export default {
+  data() {
+    return {}
+  },
+  methods: {
+    emitInfo() {
+      this.$NMessage.info(
+        "I don't know why nobody told you how to unfold your love",
+        { duration: 5000 }
+      )
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/message/index.entry b/demo/documentation/components/message/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/message/zhCN/index.md b/demo/documentation/components/message/zhCN/index.md
new file mode 100644
index 000000000..859e4780e
--- /dev/null
+++ b/demo/documentation/components/message/zhCN/index.md
@@ -0,0 +1 @@
+# Message
\ No newline at end of file
diff --git a/demo/documentation/components/messageDemo/basicUsage.demo.vue b/demo/documentation/components/messageDemo/basicUsage.demo.vue
deleted file mode 100644
index 3acc9ec8e..000000000
--- a/demo/documentation/components/messageDemo/basicUsage.demo.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-button @click="emitInfo">
-        Info
-      </n-button>
-      <n-button @click="emitError">
-        Error
-      </n-button>
-      <n-button @click="emitWarning">
-        Warning
-      </n-button>
-      <n-button @click="emitSuccess">
-        Success
-      </n-button>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  },
-  methods: {
-    emitInfo () {
-      this.$NMessage.info('I don\'t know why nobody told you how to unfold your love')
-    },
-    emitError () {
-      this.$NMessage.error('Once upon a time you dressed so fine')
-    },
-    emitWarning () {
-      this.$NMessage.warning('How many roads must a man walk down')
-    },
-    emitSuccess () {
-      this.$NMessage.success('\'Cause you walked hand in hand With another man in my place')
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/messageDemo/customIcon.demo.vue b/demo/documentation/components/messageDemo/customIcon.demo.vue
deleted file mode 100644
index a404f5f03..000000000
--- a/demo/documentation/components/messageDemo/customIcon.demo.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Scaffold
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-button @click="emitMessage">
-        Custom Icon
-      </n-button>
-      <!-- <n-button @click="emitMessageByRenderFunction">
-        Custom Icon(by render function)
-      </n-button> -->
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  },
-  methods: {
-    emitMessage () {
-      this.$NMessage.warning('I never needed anybody\'s help in any way', { icon: 'ios-hourglass' })
-    }
-    // emitMessageByRenderFunction () {
-    //   this.$NMessage.warning('I never needed anybody\'s help in any way', { icon: 'ios-hourglass' })
-    // }
-  }
-}
-</script>
diff --git a/demo/documentation/components/messageDemo/duration.demo.vue b/demo/documentation/components/messageDemo/duration.demo.vue
deleted file mode 100644
index f8bc3c63b..000000000
--- a/demo/documentation/components/messageDemo/duration.demo.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-button @click="emitInfo">
-        Last for 5 second
-      </n-button>
-      <!--EXAMPLE_END-->
-    </div>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  },
-  methods: {
-    emitInfo () {
-      this.$NMessage.info('I don\'t know why nobody told you how to unfold your love', { duration: 5000 })
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/messageDemo/index.vue b/demo/documentation/components/messageDemo/index.vue
deleted file mode 100644
index 1eafa6b99..000000000
--- a/demo/documentation/components/messageDemo/index.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Message / $NMessage
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <basic-usage />
-      <custom-icon />
-      <duration />
-    </div>
-  </div>
-</template>
-
-<script>
-import basicUsage from './basicUsage.demo.vue'
-import customIcon from './customIcon.demo.vue'
-import duration from './duration.demo.vue'
-
-export default {
-  components: {
-    basicUsage,
-    customIcon,
-    duration
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/modalDemo/basicUsage.demo.vue b/demo/documentation/components/modalDemo/basicUsage.demo.vue
deleted file mode 100644
index a72541fa6..000000000
--- a/demo/documentation/components/modalDemo/basicUsage.demo.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-modal v-model="isActive">
-        <template v-slot:activator>
-          <n-button
-            size="small"
-            @click="isActive = true"
-          >
-            Start Me up
-          </n-button>
-        </template>
-        <div style="background: #5C657EFF; padding: 24px; border-radius: 8px;">
-          <div>If you start me up, If you start me up, I'll never stop.</div>
-          <n-input v-model="inputValue" />
-          inputValue: {{ inputValue }}<br>
-          <n-button
-            size="small"
-            @click="isActive = false"
-          >
-            Close it
-          </n-button>
-        </div>
-      </n-modal>
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">Inspect some value here</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      isActive: false,
-      inputValue: ''
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/modalDemo/index.vue b/demo/documentation/components/modalDemo/index.vue
deleted file mode 100644
index 033c17b67..000000000
--- a/demo/documentation/components/modalDemo/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Modal / n-modal
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <basic-usage />
-      <mask-closable />
-    </div>
-  </div>
-</template>
-
-<script>
-import basicUsage from './basicUsage.demo.vue'
-import maskClosable from './maskClosable.demo.vue'
-
-export default {
-  components: {
-    basicUsage,
-    maskClosable
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/documentation/components/modalDemo/maskClosable.demo.vue b/demo/documentation/components/modalDemo/maskClosable.demo.vue
deleted file mode 100644
index 99380d1ab..000000000
--- a/demo/documentation/components/modalDemo/maskClosable.demo.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Mask Closable
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-modal
-        v-model="isActive"
-        :mask-closable="false"
-      >
-        <template v-slot:activator>
-          <n-button
-            size="small"
-            @click="isActive = true"
-          >
-            Start Me up
-          </n-button>
-        </template>
-        <div style="background: #5C657EFF; padding: 24px; border-radius: 8px;">
-          <div>If you start me up, If you start me up, I'll never stop.</div>
-          <n-input v-model="inputValue" />
-          inputValue: {{ inputValue }}<br>
-          <n-button
-            size="small"
-            @click="isActive = false"
-          >
-            Close it
-          </n-button>
-        </div>
-      </n-modal>
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">Inspect some value here</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      isActive: false,
-      inputValue: ''
-    }
-  }
-}
-</script>
diff --git a/demo/init.js b/demo/init.js
index 3d487e0e2..95b0be87d 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -23,7 +23,7 @@ import cascaderDemo from './documentation/components/cascaderDemo'
 import inputKeyValuePairsDemo from './documentation/components/inputKeyValuePairsDemo'
 import modal from './documentation/components/modal'
 import nimbusFormCardDemo from './documentation/components/nimbusFormCardDemo'
-import messageDemo from './documentation/components/messageDemo'
+import message from './documentation/components/message'
 import tooltip from './documentation/components/tooltip'
 import popover from './documentation/components/popover'
 import alertDemo from './documentation/components/alertDemo'
@@ -137,7 +137,7 @@ const routes = [
       { path: '/n-InputKeyValuePairs', component: inputKeyValuePairsDemo },
       { path: '/n-modal', component: modal },
       { path: '/n-nimbus-form-card', component: nimbusFormCardDemo },
-      { path: '/n-message', component: messageDemo },
+      { path: '/n-message', component: message },
       { path: '/n-tooltip', component: tooltip },
       { path: '/n-popover', component: popover },
       { path: '/n-notification', component: notificationDemo },
diff --git a/packages/common/Confirm/index.js b/packages/common/Confirm/index.js
index a32b6533b..5f08094bf 100644
--- a/packages/common/Confirm/index.js
+++ b/packages/common/Confirm/index.js
@@ -1,32 +1,9 @@
 import Confirm from './src/index.js'
-
-function getTheme (component) {
-  let cursor = component
-  while (cursor.$parent) {
-    const name = cursor.$options.name
-    if (cursor.synthesizedTheme) {
-      return cursor.synthesizedTheme
-    }
-    if (name === 'NApp') {
-      return cursor.theme || null
-    }
-    cursor = cursor.$parent
-  }
-  return null
-}
+import install from '../../utils/installThemeableComponent'
 
 Confirm.install = function (Vue) {
   Confirm.Vue = Vue
-  Object.defineProperty(Vue.prototype, '$NModal', {
-    get: new Proxy(function () {
-      return Confirm
-    }, {
-      apply (target, thisArg, argumentsList) {
-        Confirm.theme = getTheme(thisArg)
-        return target.bind(thisArg)(...argumentsList)
-      }
-    })
-  })
+  install(Vue, Confirm, '$NModal')
 }
 
 export default Confirm
diff --git a/packages/common/LoadingBar/index.js b/packages/common/LoadingBar/index.js
index 1c288cd1c..1564097cd 100644
--- a/packages/common/LoadingBar/index.js
+++ b/packages/common/LoadingBar/index.js
@@ -2,7 +2,6 @@
 import LoadingBar from './src/main.js'
 
 LoadingBar.install = function (Vue) {
-  // console.log('installLoadingBar')
   Vue.prototype.$NLoadingBar = LoadingBar
   LoadingBar.Vue = Vue
 }
diff --git a/packages/common/Message/index.js b/packages/common/Message/index.js
index 6c63859a3..0afcfe402 100644
--- a/packages/common/Message/index.js
+++ b/packages/common/Message/index.js
@@ -1,7 +1,9 @@
 import Message from './src/main.js'
+import install from '../../utils/installThemeableComponent'
 
 Message.install = function (Vue) {
-  Vue.prototype.$NMessage = Message
+  Message.Vue = Vue
+  install(Vue, Message, '$NMessage')
 }
 
 export default Message
diff --git a/packages/common/Message/src/MessageCell.vue b/packages/common/Message/src/Message.vue
similarity index 86%
rename from packages/common/Message/src/MessageCell.vue
rename to packages/common/Message/src/Message.vue
index a13078490..73517f21a 100644
--- a/packages/common/Message/src/MessageCell.vue
+++ b/packages/common/Message/src/Message.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="n-message__cell"
+    class="n-message"
     :class="{
-      [`n-message__cell--${type}`]: true
+      [`n-message--${type}`]: true
     }"
   >
-    <div class="n-message-cell__icon">
+    <div class="n-message__icon">
       <n-icon
         v-if="icon"
         size="20"
@@ -32,7 +32,7 @@
         type="md-alert"
       />
     </div>
-    <div class="n-message-cell__content">
+    <div class="n-message__content">
       {{ content }}
     </div>
   </div>
diff --git a/packages/common/Message/src/main.js b/packages/common/Message/src/main.js
index 9e94b3b15..a45930756 100644
--- a/packages/common/Message/src/main.js
+++ b/packages/common/Message/src/main.js
@@ -1,40 +1,35 @@
 
-import Vue from 'vue'
-import NMessageCell from './MessageCell'
+import Message from './Message'
+
+function setTheme (messageContainer) {
+  const themeClasses = Array.from(messageContainer.classList).filter(c => c.endsWith('-theme'))
+  themeClasses.forEach(c => messageContainer.classList.remove(c))
+  if (this.theme) messageContainer.classList.add(`n-${this.theme}-theme`)
+}
 
 function attachMessageContainer () {
-  let messageContainer = document.querySelector('.n-message.n-message__container')
+  let messageContainer = document.querySelector('.n-message-container')
   if (!messageContainer) {
     messageContainer = document.createElement('div')
-    messageContainer.classList.add('n-message', 'n-message__container')
-    messageContainer.style = `
-          z-index: 6000;
-          position: fixed;
-          left: 0;
-          right: 0;
-          top: 20px;
-          height: 0;
-          overflow: visible;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        `
+    messageContainer.classList.add('n-message-container')
+    messageContainer.style = `z-index: ${this.options.zIndex}; top: ${this.options.top}px;`
     document.body.appendChild(messageContainer)
   }
+  setTheme.call(this, messageContainer)
   return messageContainer
 }
 
 function registerMessageEl (container, el, option) {
-  el.classList.add('is-going-to-emerge')
+  el.classList.add('n-message--enter')
   container.appendChild(el)
   el.getBoundingClientRect()
-  el.classList.remove('is-going-to-emerge')
+  el.classList.remove('n-message--enter')
   setTimeout(function () {
     setTimeout(function () {
       setTimeout(function () {
         container.removeChild(el)
       }, option.vanishTransitionTimeout)
-      el.classList.add('is-vanishing')
+      el.classList.add('n-message--leave')
     }, option.duration)
   }, option.emergeTransitionTimeout)
 }
@@ -66,9 +61,15 @@ function mixinOption (option) {
 }
 
 const NMessage = {
+  Vue: null,
+  options: {
+    zIndex: 6000,
+    top: 20
+  },
+  attachMessageContainer,
   notice (content, option) {
-    const messageContainer = attachMessageContainer()
-    const messageCell = (new Vue({ ...NMessageCell, propsData: { option, content } })).$mount()
+    const messageContainer = this.attachMessageContainer()
+    const messageCell = (new this.Vue({ ...Message, propsData: { option, content } })).$mount()
     registerMessageEl(messageContainer, messageCell.$el, mixinOption(option))
   },
   info (content, option) {
diff --git a/packages/utils/installThemeableComponent.js b/packages/utils/installThemeableComponent.js
new file mode 100644
index 000000000..7bb63b3a3
--- /dev/null
+++ b/packages/utils/installThemeableComponent.js
@@ -0,0 +1,30 @@
+function getTheme (component) {
+  let cursor = component
+  while (cursor.$parent) {
+    const name = cursor.$options.name
+    if (cursor.synthesizedTheme) {
+      return cursor.synthesizedTheme
+    }
+    if (name === 'NApp') {
+      return cursor.theme || null
+    }
+    cursor = cursor.$parent
+  }
+  return null
+}
+
+function install (Vue, Component, name) {
+  const prototypeProxy = new Proxy(function () {
+    return Component
+  }, {
+    apply (target, thisArg, argumentsList) {
+      Component.theme = getTheme(thisArg)
+      return target.bind(thisArg)(...argumentsList)
+    }
+  })
+  Object.defineProperty(Vue.prototype, name, {
+    get: prototypeProxy
+  })
+}
+
+export default install
diff --git a/styles/Message.scss b/styles/Message.scss
index aea8a161f..166b8bed6 100644
--- a/styles/Message.scss
+++ b/styles/Message.scss
@@ -1,88 +1,121 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
-@include b(message) {
-  &.n-message__container {
-    .n-message__cell {
-      display: flex;
-      transition: opacity .3s $default-cubic-bezier, transform .3s $default-cubic-bezier,  max-height .3s $default-cubic-bezier, margin-bottom .3s $default-cubic-bezier;
-      max-height: 40px;
-      opacity: 1;
-      margin-bottom: 12px;
-      padding: 0 40px;
-      height: 40px;
-      border-radius: 20px;
-      background-color: red;
-      flex-shrink: 0;
-      font-weight: 700;
-      box-shadow:0px 2px 20px 0px rgba(255,255,255,0.22);
-      color: #ffffff;
-      overflow: hidden;
-      .n-message-cell__content {
-        display: inline-block;
-        height: 40px;
-        line-height: 40px;
-      }
-      .n-message-cell__icon {
-        margin-right: 10px;
-        display: inline-flex;
-        height: 40px;
-        line-height: 40px;
-        align-items: center;
-        i::before {
-          font-size: 20px;
-        }
-      }
-      &.n-message__cell--info {
-        background-color: rgba(56, 137, 197, 1);
-        box-shadow:0px 2px 20px 0px rgba(56, 137, 197, 0.5);
-        .n-message-cell__icon {
-          i::before {
-            color: rgba(129, 202, 255, 1);
-          }
-        }
-      }
-      &.n-message__cell--success {
-        background-color: rgb(42, 148, 125);
-        box-shadow:0px 2px 20px 0px rgba(42, 148, 125, .5);
-        .n-message-cell__icon {
-          i::before {
-            color: #63E2B7FF
-          }
-        }
-      }
-      &.n-message__cell--error {
-        background-color: rgb(208, 58, 82);
-        box-shadow:0px 2px 20px 0px rgba(208, 58, 82, 0.6);
-        .n-message-cell__icon {
-          i::before {
-            color: #FF92A4FF
-          }
-        }
-      }
-      &.n-message__cell--warning {
-        background-color: rgba(255, 138, 0, 1);
-        box-shadow:0px 2px 20px 0px rgba(255, 138, 0, 0.4);
-        .n-message-cell__icon {
-          i::before {
-            color: rgba(255, 255, 255, .65);
-          }
-        }
-      }
-      &.is-going-to-emerge {
-        opacity: 0;
-        transform: translateY(-12px) scale(.5);
-        transform-origin: top center;
-        max-height: 0px;
-        margin-bottom: 0;
-      }
-      &.is-vanishing {
-        opacity: 0;
-        transform-origin: top center;
-        transform: translateY(-12px) scale(.5);
-        max-height: 0px;
-        margin-bottom: 0;
+@mixin message-type-mixin ($type) {
+  @include m($type) {
+    background-color: map-get($map: $--message-background-color, $key: $type);
+    box-shadow: map-get($map: $--message-box-shadow, $key: $type);
+    @include e(icon) {
+      i::before {
+        color: $--message-icon-color;
       }
     }
   }
-}
\ No newline at end of file
+}
+
+@include themes-mixin {
+  @include b(message-container) {
+    @include once {
+      position: fixed;
+      left: 0;
+      right: 0;
+      height: 0;
+      overflow: visible;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    @include b(message) {
+      @include once {
+        display: flex;
+        transition: opacity .3s $default-cubic-bezier, transform .3s $default-cubic-bezier,  max-height .3s $default-cubic-bezier, margin-bottom .3s $default-cubic-bezier;
+        max-height: 40px;
+        opacity: 1;
+        margin-bottom: 12px;
+        padding: 0 40px;
+        height: 40px;
+        border-radius: 20px;
+        flex-shrink: 0;
+        font-weight: 700;
+        overflow: hidden;
+      }
+      // box-shadow:0px 2px 20px 0px rgba(255,255,255,0.22);
+      color: $--message-text-color;
+      @include once {
+        @include e(content) {
+          display: inline-block;
+          height: 40px;
+          line-height: 40px;
+        }
+        @include e(icon) {
+          margin-right: 10px;
+          display: inline-flex;
+          height: 40px;
+          line-height: 40px;
+          align-items: center;
+          i::before {
+            font-size: 20px;
+          }
+        }
+      }
+      
+     
+      // &.n-message--info {
+      //   background-color: rgba(56, 137, 197, 1);
+      //   box-shadow:0px 2px 20px 0px rgba(56, 137, 197, 0.5);
+      //   .n-message__icon {
+      //     i::before {
+      //       color: rgba(129, 202, 255, 1);
+      //     }
+      //   }
+      // }
+      // &.n-message--success {
+      //   background-color: rgb(42, 148, 125);
+      //   box-shadow:0px 2px 20px 0px rgba(42, 148, 125, .5);
+      //   .n-message__icon {
+      //     i::before {
+      //       color: #63E2B7FF
+      //     }
+      //   }
+      // }
+      // &.n-message--error {
+      //   background-color: rgb(208, 58, 82);
+      //   box-shadow:0px 2px 20px 0px rgba(208, 58, 82, 0.6);
+      //   .n-message__icon {
+      //     i::before {
+      //       color: #FF92A4FF
+      //     }
+      //   }
+      // }
+      // &.n-message--warning {
+      //   background-color: rgba(255, 138, 0, 1);
+      //   box-shadow:0px 2px 20px 0px rgba(255, 138, 0, 0.4);
+      //   .n-message__icon {
+      //     i::before {
+      //       color: rgba(255, 255, 255, .65);
+      //     }
+      //   }
+      // }
+      @include once {
+        @include m(enter) {
+          opacity: 0;
+          transform: translateY(-12px) scale(.5);
+          transform-origin: top center;
+          max-height: 0px;
+          margin-bottom: 0;
+        }
+        @include m(leave) {
+          opacity: 0;
+          transform-origin: top center;
+          transform: translateY(-12px) scale(.5);
+          max-height: 0px;
+          margin-bottom: 0;
+        }
+      }
+      @include message-type-mixin('info');
+      @include message-type-mixin('success');
+      @include message-type-mixin('error');
+      @include message-type-mixin('warning');
+    }
+  }
+}
diff --git a/styles/themes/dark/components/Message.scss b/styles/themes/dark/components/Message.scss
new file mode 100644
index 000000000..317971fba
--- /dev/null
+++ b/styles/themes/dark/components/Message.scss
@@ -0,0 +1,16 @@
+@mixin setup-dark-message {
+  $--message-text-color: white !global;
+  $--message-icon-color: rgba(255, 255, 255, .5) !global;
+  $--message-background-color: (
+    "info": rgb(56, 137, 197),
+    "success": rgb(42, 148, 125),
+    "error": rgb(208, 58, 82),
+    "warning": rgb(240, 138, 0)
+  ) !global;
+  $--message-box-shadow: (
+    "info": 0 2px 15px 0 rgba(56, 137, 197, .5),
+    "success": 0 2px 15px 0 rgba(42, 148, 125, .5),
+    "error": 0 2px 15px 0 rgba(208, 58, 82, .5),
+    "warning": 0 2px 15px 0 rgba(240, 138, 0, .5)
+  ) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index c00a291d3..efadff04f 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -15,6 +15,7 @@
 @import "components/Confirm.scss";
 @import "components/CheckBox.scss";
 @import "components/Switch.scss";
+@import "components/Message.scss";
 
 @mixin setup-dark-theme () {
   @include setup-dark-colors();
@@ -56,4 +57,5 @@
   @include setup-dark-confirm;
   @include setup-dark-checkbox;
   @include setup-dark-switch;
+  @include setup-dark-message;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Message.scss b/styles/themes/light/components/Message.scss
new file mode 100644
index 000000000..707f19bfa
--- /dev/null
+++ b/styles/themes/light/components/Message.scss
@@ -0,0 +1,16 @@
+@mixin setup-light-message {
+  $--message-text-color: white !global;
+  $--message-icon-color: rgba(255, 255, 255, .45) !global;
+  $--message-background-color: (
+    "info": $info-6,
+    "success": $success-6,
+    "error": $error-6,
+    "warning": $warning-6
+  ) !global;
+  $--message-box-shadow: (
+    "info": 0px 2px 20px 0px rgba(0, 0, 0, .3),
+    "success": 0px 2px 20px 0px rgba(0, 0, 0, .3),
+    "error": 0px 2px 20px 0px rgba(0, 0, 0, .3),
+    "warning": 0px 2px 20px 0px rgba(0, 0, 0, .3)
+  ) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index 21af40af1..4691ef742 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -15,6 +15,7 @@
 @import "components/Confirm.scss";
 @import "components/CheckBox.scss";
 @import "components/Switch.scss";
+@import "components/Message.scss";
 
 @mixin setup-light-theme () {
   @include setup-light-colors();
@@ -52,4 +53,5 @@
   @include setup-light-confirm;
   @include setup-light-checkbox;
   @include setup-light-switch;
+  @include setup-light-message;
 }
\ No newline at end of file

From d379a50f142b0c053eb11c4c2187ae5b65a345c3 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Tue, 8 Oct 2019 14:14:30 +0800
Subject: [PATCH 12/13] feat(loading-bar): light theme

---
 .../components/loadingBar/enUS/basic.md       | 32 +++++++++++
 .../components/loadingBar/enUS/index.md       |  4 ++
 .../components/loadingBar/index.entry         |  0
 .../components/loadingBar/zhCN/index.md       |  0
 demo/init.js                                  |  5 +-
 packages/common/LoadingBar/index.js           |  3 +-
 packages/common/LoadingBar/src/LoadingBar.vue |  6 ++-
 packages/common/LoadingBar/src/main.js        | 29 +++++-----
 packages/utils/installThemeableComponent.js   |  4 +-
 styles/LoadingBar.scss                        | 53 ++++++++++---------
 styles/Message.scss                           | 40 --------------
 styles/themes/dark/components/LoadingBar.scss |  7 +++
 styles/themes/dark/index.scss                 |  2 +
 .../themes/light/components/LoadingBar.scss   |  7 +++
 styles/themes/light/index.scss                |  2 +
 15 files changed, 109 insertions(+), 85 deletions(-)
 create mode 100644 demo/documentation/components/loadingBar/enUS/basic.md
 create mode 100644 demo/documentation/components/loadingBar/enUS/index.md
 create mode 100644 demo/documentation/components/loadingBar/index.entry
 create mode 100644 demo/documentation/components/loadingBar/zhCN/index.md
 create mode 100644 styles/themes/dark/components/LoadingBar.scss
 create mode 100644 styles/themes/light/components/LoadingBar.scss

diff --git a/demo/documentation/components/loadingBar/enUS/basic.md b/demo/documentation/components/loadingBar/enUS/basic.md
new file mode 100644
index 000000000..f68e8067f
--- /dev/null
+++ b/demo/documentation/components/loadingBar/enUS/basic.md
@@ -0,0 +1,32 @@
+# Basic
+```html
+<n-button @click="handleStart">
+  start
+</n-button>
+<n-button @click="handleFinish">
+  finish
+</n-button>
+<n-button @click="handleError">
+  error
+</n-button>
+```
+```js
+export default {
+  methods: {
+    handleStart() {
+      this.$NLoadingBar.start();
+    },
+    handleFinish() {
+      this.$NLoadingBar.finish();
+    },
+    handleError() {
+      this.$NLoadingBar.error();
+    }
+  }
+};
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/loadingBar/enUS/index.md b/demo/documentation/components/loadingBar/enUS/index.md
new file mode 100644
index 000000000..c38a412c2
--- /dev/null
+++ b/demo/documentation/components/loadingBar/enUS/index.md
@@ -0,0 +1,4 @@
+# Loading Bar
+```demo
+basic
+```
\ No newline at end of file
diff --git a/demo/documentation/components/loadingBar/index.entry b/demo/documentation/components/loadingBar/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/loadingBar/zhCN/index.md b/demo/documentation/components/loadingBar/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/init.js b/demo/init.js
index 95b0be87d..314eacb5d 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -58,7 +58,7 @@ import advanceTableDemos from './documentation/components/advanceTableDemos'
 import transferDemo from './documentation/components/transferDemo'
 import spinDemo from './documentation/components/spinDemo'
 import drawerDemo from './documentation/components/drawerDemo'
-import loadingBarDemo from './documentation/components/loadingBarDemo'
+import loadingBar from './documentation/components/loadingBar'
 import timeDemo from './documentation/components/timeDemo'
 import sliderDemo from './documentation/components/sliderDemo'
 import treeDemo from './documentation/components/treeDemo'
@@ -174,7 +174,7 @@ const routes = [
       { path: '/n-transfer', component: transferDemo },
       { path: '/n-spin', component: spinDemo },
       { path: '/n-drawer', component: drawerDemo },
-      { path: '/n-loading-bar', component: loadingBarDemo },
+      { path: '/n-loading-bar', component: loadingBar },
       { path: '/n-time', component: timeDemo },
       { path: '/n-slider', component: sliderDemo },
       { path: '/n-tree', component: treeDemo },
@@ -192,6 +192,7 @@ const router = new VueRouter({
 })
 
 router.beforeEach(function (to, from, next) {
+  Vue.prototype.$NLoadingBar.theme = to.params.theme
   Vue.prototype.$NLoadingBar.start()
   next()
 })
diff --git a/packages/common/LoadingBar/index.js b/packages/common/LoadingBar/index.js
index 1564097cd..b72cb6f07 100644
--- a/packages/common/LoadingBar/index.js
+++ b/packages/common/LoadingBar/index.js
@@ -1,8 +1,9 @@
 /* istanbul ignore file */
 import LoadingBar from './src/main.js'
+import install from '../../utils/installThemeableComponent'
 
 LoadingBar.install = function (Vue) {
-  Vue.prototype.$NLoadingBar = LoadingBar
+  install(Vue, LoadingBar, '$NLoadingBar')
   LoadingBar.Vue = Vue
 }
 
diff --git a/packages/common/LoadingBar/src/LoadingBar.vue b/packages/common/LoadingBar/src/LoadingBar.vue
index d8d53cae1..70d2508f7 100644
--- a/packages/common/LoadingBar/src/LoadingBar.vue
+++ b/packages/common/LoadingBar/src/LoadingBar.vue
@@ -9,6 +9,9 @@
     <div
       v-show="!enter || status === 'starting'"
       class="n-loading-bar-container"
+      :class="{
+        [`n-${theme}-theme`]: theme
+      }"
     >
       <div
         ref="loadingBar"
@@ -33,7 +36,8 @@ export default {
       progress: 0,
       status: null,
       finishCallback: null,
-      enter: false
+      enter: false,
+      theme: null
     }
   },
   methods: {
diff --git a/packages/common/LoadingBar/src/main.js b/packages/common/LoadingBar/src/main.js
index bb19935b5..35c1a05eb 100644
--- a/packages/common/LoadingBar/src/main.js
+++ b/packages/common/LoadingBar/src/main.js
@@ -2,6 +2,7 @@ import NLoadingBar from './LoadingBar.vue'
 
 export default {
   Vue: null,
+  theme: null,
   loadingBarInstance: null,
   finishCallback () {
     if (this.loadingBarInstance) {
@@ -11,39 +12,35 @@ export default {
     }
   },
   start () {
-    if (this.loadingBarInstance) {
-      this.loadingBarInstance.start()
-    } else {
+    if (!this.loadingBarInstance) {
       this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
       document.body.appendChild(this.loadingBarInstance.$el)
-      this.loadingBarInstance.start()
     }
+    this.loadingBarInstance.theme = this.theme
+    this.loadingBarInstance.start()
   },
   error () {
-    if (this.loadingBarInstance) {
-      this.loadingBarInstance.error(this.finishCallback.bind(this))
-    } else {
+    if (!this.loadingBarInstance) {
       this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
       document.body.appendChild(this.loadingBarInstance.$el)
-      this.loadingBarInstance.error(this.finishCallback.bind(this))
     }
+    this.loadingBarInstance.theme = this.theme
+    this.loadingBarInstance.error(this.finishCallback.bind(this))
   },
   finish () {
-    if (this.loadingBarInstance) {
-      this.loadingBarInstance.finish(this.finishCallback.bind(this))
-    } else {
+    if (!this.loadingBarInstance) {
       this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
       document.body.appendChild(this.loadingBarInstance.$el)
-      this.loadingBarInstance.finish(this.finishCallback.bind(this))
     }
+    this.loadingBarInstance.theme = this.theme
+    this.loadingBarInstance.finish(this.finishCallback.bind(this))
   },
   update (percent) {
-    if (this.loadingBarInstance) {
-      this.loadingBarInstance.update(percent)
-    } else {
+    if (!this.loadingBarInstance) {
       this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
       document.body.appendChild(this.loadingBarInstance.$el)
-      this.loadingBarInstance.update(percent)
     }
+    this.loadingBarInstance.theme = this.theme
+    this.loadingBarInstance.update(percent)
   }
 }
diff --git a/packages/utils/installThemeableComponent.js b/packages/utils/installThemeableComponent.js
index 7bb63b3a3..bb1a6decf 100644
--- a/packages/utils/installThemeableComponent.js
+++ b/packages/utils/installThemeableComponent.js
@@ -18,7 +18,9 @@ function install (Vue, Component, name) {
     return Component
   }, {
     apply (target, thisArg, argumentsList) {
-      Component.theme = getTheme(thisArg)
+      if (thisArg instanceof Vue) {
+        Component.theme = getTheme(thisArg)
+      }
       return target.bind(thisArg)(...argumentsList)
     }
   })
diff --git a/styles/LoadingBar.scss b/styles/LoadingBar.scss
index 345d7d1db..80c263ba8 100644
--- a/styles/LoadingBar.scss
+++ b/styles/LoadingBar.scss
@@ -1,31 +1,36 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
-@include b(loading-bar-container) {
-  @include fade-in-transition(fade-in, .3s, .8s);
-  z-index: 5000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  @include b(loading-bar) {
-    background-color: $main-color;
-    width: 100%;
-    height: 2px;
-    transition: max-width 4s linear, background-color .2s linear;
-    max-width: 0;
-    @include m(starting) {
-      background-color: $main-color;
-      transition: max-width 4s linear, background-color .2s linear;
+@include themes-mixin {
+  @include b(loading-bar-container) {
+    @include once {
+      @include fade-in-transition(fade-in, .3s, .8s);
+      z-index: 5800;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
     }
-    @include m(finishing) {
-      background-color: $main-color;
-      transition: max-width .2s linear, background-color .2s linear;
-    }
-    @include m(error) {
-      background-color: red;
-      transition: max-width .2s linear, background-color .2s linear;
+    @include b(loading-bar) {
+      @include once {
+        width: 100%;
+        transition: max-width 4s linear, background-color .2s linear;
+        max-width: 0;
+      }
+      height: $--loading-bar-height;
+      @include m(starting) {
+        background-color: map-get($map: $--loading-bar-background-color, $key: 'loading');
+        transition: max-width 4s linear, background-color .2s linear;
+      }
+      @include m(finishing) {
+        background-color: map-get($map: $--loading-bar-background-color, $key: 'loading');
+        transition: max-width .2s linear, background-color .2s linear;
+      }
+      @include m(error) {
+        background-color: map-get($map: $--loading-bar-background-color, $key: 'error');
+        transition: max-width .2s linear, background-color .2s linear;
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/styles/Message.scss b/styles/Message.scss
index 166b8bed6..72c535c24 100644
--- a/styles/Message.scss
+++ b/styles/Message.scss
@@ -1,5 +1,4 @@
 @import './mixins/mixins.scss';
-@import './themes/vars.scss';
 
 @mixin message-type-mixin ($type) {
   @include m($type) {
@@ -39,7 +38,6 @@
         font-weight: 700;
         overflow: hidden;
       }
-      // box-shadow:0px 2px 20px 0px rgba(255,255,255,0.22);
       color: $--message-text-color;
       @include once {
         @include e(content) {
@@ -58,44 +56,6 @@
           }
         }
       }
-      
-     
-      // &.n-message--info {
-      //   background-color: rgba(56, 137, 197, 1);
-      //   box-shadow:0px 2px 20px 0px rgba(56, 137, 197, 0.5);
-      //   .n-message__icon {
-      //     i::before {
-      //       color: rgba(129, 202, 255, 1);
-      //     }
-      //   }
-      // }
-      // &.n-message--success {
-      //   background-color: rgb(42, 148, 125);
-      //   box-shadow:0px 2px 20px 0px rgba(42, 148, 125, .5);
-      //   .n-message__icon {
-      //     i::before {
-      //       color: #63E2B7FF
-      //     }
-      //   }
-      // }
-      // &.n-message--error {
-      //   background-color: rgb(208, 58, 82);
-      //   box-shadow:0px 2px 20px 0px rgba(208, 58, 82, 0.6);
-      //   .n-message__icon {
-      //     i::before {
-      //       color: #FF92A4FF
-      //     }
-      //   }
-      // }
-      // &.n-message--warning {
-      //   background-color: rgba(255, 138, 0, 1);
-      //   box-shadow:0px 2px 20px 0px rgba(255, 138, 0, 0.4);
-      //   .n-message__icon {
-      //     i::before {
-      //       color: rgba(255, 255, 255, .65);
-      //     }
-      //   }
-      // }
       @include once {
         @include m(enter) {
           opacity: 0;
diff --git a/styles/themes/dark/components/LoadingBar.scss b/styles/themes/dark/components/LoadingBar.scss
new file mode 100644
index 000000000..5b08e3eda
--- /dev/null
+++ b/styles/themes/dark/components/LoadingBar.scss
@@ -0,0 +1,7 @@
+@mixin setup-dark-loading-bar {
+  $--loading-bar-background-color: (
+    "error": red,
+    "loading": $success-6
+  ) !global;
+  $--loading-bar-height: 2px !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index efadff04f..6c5d24957 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -16,6 +16,7 @@
 @import "components/CheckBox.scss";
 @import "components/Switch.scss";
 @import "components/Message.scss";
+@import "components/LoadingBar.scss";
 
 @mixin setup-dark-theme () {
   @include setup-dark-colors();
@@ -58,4 +59,5 @@
   @include setup-dark-checkbox;
   @include setup-dark-switch;
   @include setup-dark-message;
+  @include setup-dark-loading-bar;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/LoadingBar.scss b/styles/themes/light/components/LoadingBar.scss
new file mode 100644
index 000000000..2e0974a2b
--- /dev/null
+++ b/styles/themes/light/components/LoadingBar.scss
@@ -0,0 +1,7 @@
+@mixin setup-light-loading-bar {
+  $--loading-bar-background-color: (
+    "error": $error-6,
+    "loading": $success-6
+  ) !global;
+  $--loading-bar-height: 2px !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index 4691ef742..43936e94e 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -16,6 +16,7 @@
 @import "components/CheckBox.scss";
 @import "components/Switch.scss";
 @import "components/Message.scss";
+@import "components/LoadingBar.scss";
 
 @mixin setup-light-theme () {
   @include setup-light-colors();
@@ -54,4 +55,5 @@
   @include setup-light-checkbox;
   @include setup-light-switch;
   @include setup-light-message;
+  @include setup-light-loading-bar;
 }
\ No newline at end of file

From c56a090584dbe39ba4fdeb42c7ec61d40cbc6032 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Tue, 8 Oct 2019 14:36:04 +0800
Subject: [PATCH 13/13] style(badge): refactor

---
 styles/Badge.scss | 39 ++++++++++++++++-----------------------
 1 file changed, 16 insertions(+), 23 deletions(-)

diff --git a/styles/Badge.scss b/styles/Badge.scss
index c9df6253a..f8db521a7 100644
--- a/styles/Badge.scss
+++ b/styles/Badge.scss
@@ -1,12 +1,20 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
+@mixin badge-type-mixin ($type) {
+  @include m($type + '-type') {
+    @include b(badge-sup) {
+      background-color: rgba(9, 133, 91, 1);
+    }
+  }
+}
+
 @include b(badge) {
   display: inline-block;
   position: relative;
   vertical-align: middle;
-  &.n-badge--dot {
-    .n-badge-sup {
+  @include m(dot) {
+    @include b(badge-sup) {
       height: 8px;
       width: 8px;
       padding: 0;
@@ -15,30 +23,15 @@
       bottom: calc(100% - 4px);
     }
   }
-  &.n-badge--success-type {
-    .n-badge-sup {
-      background-color: rgba(9, 133, 91, 1);
-    }
-  }
-  &.n-badge--info-type {
-    .n-badge-sup {
-      background-color: rgba(56, 137, 197, 1);
-    }
-  }
-  &.n-badge--warning-type {
-    .n-badge-sup {
-      background-color: rgba(205, 135, 20, 1);
-    }
-  }
-  &.n-badge--error-type {
-    .n-badge-sup {
-      background-color: rgba(255, 109, 147, 1);
-    }
-  }
+  @include badge-type-mixin('info');
+  @include badge-type-mixin('success');
+  @include badge-type-mixin('warning');
+  @include badge-type-mixin('error');
 }
 
 @include b(badge-sup) {
-  @include fade-in-scale-up-transition(badge);
+  @include fade-in-scale-up-transition(badge, left bottom);
+  color: white;
   user-select: none;
   position: absolute;
   height: 18px;