From b0aeeda5295ec6a469ac4854bb9f4ea9dee87521 Mon Sep 17 00:00:00 2001
From: haibo tang <haibo.tang@tusimple.ai>
Date: Mon, 7 Sep 2020 21:23:51 +0800
Subject: [PATCH] feat(popover): css in js

---
 src/Popover/index.js                          |   7 -
 src/Tooltip/src/main.js                       |   2 +-
 src/_styles/Popover.scss                      | 526 +++++++++---------
 src/_styles/index.scss                        |   4 +-
 .../src/HeaderButton/FilterButton.vue         |   2 +-
 src/dropdown/src/Dropdown.vue                 |   2 +-
 src/index.js                                  |   6 +-
 src/menu/src/Submenu.vue                      |   2 +-
 src/popconfirm/src/Popconfirm.vue             |   2 +-
 src/popover/index.js                          |   7 +
 .../src/main.js => popover/src/Popover.js}    |   2 +-
 .../src/PopoverContent.js                     |  11 +-
 .../src/PopoverManager.js                     |   0
 .../src/activatorMixin.js                     |   0
 src/popover/src/styles/index.js               |   9 +
 src/popover/src/styles/themed-base.cssr.js    | 233 ++++++++
 src/popover/styles/_common.js                 |   3 +
 src/popover/styles/dark.js                    |  26 +
 src/popover/styles/light.js                   |  26 +
 src/popselect/src/Popselect.vue               |   2 +-
 20 files changed, 592 insertions(+), 280 deletions(-)
 delete mode 100644 src/Popover/index.js
 create mode 100644 src/popover/index.js
 rename src/{Popover/src/main.js => popover/src/Popover.js} (99%)
 rename src/{Popover => popover}/src/PopoverContent.js (97%)
 rename src/{Popover => popover}/src/PopoverManager.js (100%)
 rename src/{Popover => popover}/src/activatorMixin.js (100%)
 create mode 100644 src/popover/src/styles/index.js
 create mode 100644 src/popover/src/styles/themed-base.cssr.js
 create mode 100644 src/popover/styles/_common.js
 create mode 100644 src/popover/styles/dark.js
 create mode 100644 src/popover/styles/light.js

diff --git a/src/Popover/index.js b/src/Popover/index.js
deleted file mode 100644
index d62fb6e42..000000000
--- a/src/Popover/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import NPopover from './src/main'
-
-NPopover.install = function (Vue) {
-  Vue.component(NPopover.name, NPopover)
-}
-
-export default NPopover
diff --git a/src/Tooltip/src/main.js b/src/Tooltip/src/main.js
index 55e4d6166..6c6a95776 100644
--- a/src/Tooltip/src/main.js
+++ b/src/Tooltip/src/main.js
@@ -1,7 +1,7 @@
 /**
  * Tooltip: popover wearing waistcoat
  */
-import NPopover from '../../Popover'
+import NPopover from '../../popover'
 
 export default {
   name: 'NTooltip',
diff --git a/src/_styles/Popover.scss b/src/_styles/Popover.scss
index f11730c5d..de40b4764 100644
--- a/src/_styles/Popover.scss
+++ b/src/_styles/Popover.scss
@@ -1,265 +1,265 @@
-@import "./mixins/mixins.scss";
+// @import "./mixins/mixins.scss";
 
-@mixin popover-content-transition {
-  &#{&}-transition-enter-to, &#{&}-transition-leave {
-    transform: $--n-transform-debounce-scale;
-    opacity: 1;
-  }
-  &#{&}-transition-enter, &#{&}-transition-leave-to {
-    opacity: 0;
-    transform: scale(.85);
-  }
-  &#{&}-transition-enter-active {
-    transition: opacity .15s $--n-ease-out-cubic-bezier, transform .15s $--n-ease-out-cubic-bezier;
-  }
-  &#{&}-transition-leave-active {
-    transition: opacity .15s $--n-ease-in-cubic-bezier, transform .15s $--n-ease-in-cubic-bezier;
-  }
-}
+// @mixin popover-content-transition {
+//   &#{&}-transition-enter-to, &#{&}-transition-leave {
+//     transform: $--n-transform-debounce-scale;
+//     opacity: 1;
+//   }
+//   &#{&}-transition-enter, &#{&}-transition-leave-to {
+//     opacity: 0;
+//     transform: scale(.85);
+//   }
+//   &#{&}-transition-enter-active {
+//     transition: opacity .15s $--n-ease-out-cubic-bezier, transform .15s $--n-ease-out-cubic-bezier;
+//   }
+//   &#{&}-transition-leave-active {
+//     transition: opacity .15s $--n-ease-in-cubic-bezier, transform .15s $--n-ease-in-cubic-bezier;
+//   }
+// }
 
-@include themes-mixin {
-  @include b(popover-content) {
-    @include once {
-      @include popover-content-transition;
-      transition:
-        background-color .3s $--n-ease-in-out-cubic-bezier,
-        color .3s $--n-ease-in-out-cubic-bezier;
-      transform-origin: inherit;
-      transform: $--n-transform-debounce-scale;
-      position: relative;
-      font-size: 13px;
-      @include m(styled) {
-        border-radius: $--n-popover-border-radius;
-        padding: 8px 14px;
-      }
-      @include m(fix-width) {
-        white-space: normal;
-        width: max-content;
-        box-sizing: border-box;
-      }
-      @include b(popover-arrow-wrapper) {
-        position: absolute;
-        overflow: hidden;
-        pointer-events: none;
-        @include b(popover-arrow) {
-          transition: background-color .3s $--n-ease-in-out-cubic-bezier;
-          position: absolute;
-          display: block;
-          width: $--n-popover-arrow-width * 2;
-          height: $--n-popover-arrow-width * 2;
-          box-shadow: $--n-popover-arrow-box-shadow;
-          transform: rotate(45deg);
-        }
-      }
-      @include m(no-arrow) {
-        &[n-placement$="top-start"] {
-          margin-bottom: 6px;
-        }
-        &[n-placement$="top"] {
-          margin-bottom: 6px;
-        }
-        &[n-placement$="top-end"] {
-          margin-bottom: 6px;
-        }
-        &[n-placement$="bottom-start"] {
-          margin-top: 6px;
-        }
-        &[n-placement$="bottom"] {
-          margin-top: 6px;
-        }
-        &[n-placement$="bottom-end"] {
-          margin-top: 6px;
-        }
-        &[n-placement$="left-start"] {
-          margin-right: 6px;
-        }&[n-placement$="left"] {
-          margin-right: 6px;
-        }
-        &[n-placement$="left-end"] {
-          margin-right: 6px;
-        }
-        &[n-placement$="right-start"] {
-          margin-left: 6px;
-        }
-        &[n-placement$="right"] {
-          margin-left: 6px;
-        }
-        &[n-placement$="right-end"] {
-          margin-left: 6px;
-        }
-      } 
-      &[n-placement$="top-start"] {
-        margin-bottom: 10px;
-        @include b(popover-arrow-wrapper) {
-          right: 0;
-          left: 0;
-          top: 100%;
-          height: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            top: -$--n-popover-arrow-width;
-            left: 10px;
-          }
-        }
-      }
-      &[n-placement$="top"] {
-        margin-bottom: 10px;
-        @include b(popover-arrow-wrapper) {
-          right: 0;
-          left: 0;
-          top: 100%;
-          height: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            top: -$--n-popover-arrow-width;
-            transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ;
-            left: 50%;
-          }
-        }
-      }
-      &[n-placement$="top-end"] {
-        margin-bottom: 10px;
-        @include b(popover-arrow-wrapper) {
-          right: 0;
-          left: 0;
-          top: 100%;
-          height: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            top: -$--n-popover-arrow-width;
-            right: 10px;
-          }
-        }
-      }
-      &[n-placement$="bottom-start"] {
-        margin-top: 10px;
-        @include b(popover-arrow-wrapper) {
-          right: 0;
-          left: 0;
-          bottom: 100%;
-          height: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            bottom: -$--n-popover-arrow-width;
-            left: 10px;
-          }
-        }
-      }
-      &[n-placement$="bottom"] {
-        margin-top: 10px;
-        @include b(popover-arrow-wrapper) {
-          right: 0;
-          left: 0;
-          bottom: 100%;
-          height: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            bottom: -$--n-popover-arrow-width;
-            transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ;
-            left: 50%;
-          }
-        }
-      }
-      &[n-placement$="bottom-end"] {
-        margin-top: 10px;
-        @include b(popover-arrow-wrapper) {
-          right: 0;
-          left: 0;
-          bottom: 100%;
-          height: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            bottom: -$--n-popover-arrow-width;
-            right: 10px;
-          }
-        }
-      }
-      &[n-placement$="left-start"] {
-        margin-right: 10px;
-        @include b(popover-arrow-wrapper) {
-          top: 0;
-          bottom: 0;
-          left: 100%;
-          width: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            left: -$--n-popover-arrow-width;
-            top: 10px;
-          }
-        }
-      }
-      &[n-placement$="left"] {
-        margin-right: 10px;
-        @include b(popover-arrow-wrapper) {
-          top: 0;
-          bottom: 0;
-          left: 100%;
-          width: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            left: -$--n-popover-arrow-width;
-            transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ;
-            top: 50%;
-          }
-        }
-      }
-      &[n-placement$="left-end"] {
-        margin-right: 10px;
-        @include b(popover-arrow-wrapper) {
-          top: 0;
-          bottom: 0;
-          left: 100%;
-          width: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            left: -$--n-popover-arrow-width;
-            bottom: 10px;
-          }
-        }
-      }
-      &[n-placement$="right-start"] {
-        margin-left: 10px;
-        @include b(popover-arrow-wrapper) {
-          top: 0;
-          bottom: 0;
-          right: 100%;
-          width: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            right: -$--n-popover-arrow-width;
-            top: 10px;
-          }
-        }
-      }
-      &[n-placement$="right"] {
-        margin-left: 10px;
-        @include b(popover-arrow-wrapper) {
-          top: 0;
-          bottom: 0;
-          right: 100%;
-          width: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            right: -$--n-popover-arrow-width;
-            transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ;
-            top: 50%;
-          }
-        }
-      }
-      &[n-placement$="right-end"] {
-        margin-left: 10px;
-        @include b(popover-arrow-wrapper) {
-          top: 0;
-          bottom: 0;
-          right: 100%;
-          width: $--n-popover-arrow-width * 2;
-          @include b(popover-arrow) {
-            right: -$--n-popover-arrow-width;
-            bottom: 10px;
-          }
-        }
-      }
-    }
-    @include m(styled) {
-      background-color: $--popover-background-color;
-    }
-    color: $--popover-text-color;
-    @include b(popover-arrow-wrapper) {
-      @include b(popover-arrow) {
-        background-color: $--popover-background-color;
-      }
-    }
-    @include m(shadow) {
-      box-shadow: $--popover-box-shadow;
-    }
-  }
-}
+// @include themes-mixin {
+//   @include b(popover-content) {
+//     @include once {
+//       @include popover-content-transition;
+//       transition:
+//         background-color .3s $--n-ease-in-out-cubic-bezier,
+//         color .3s $--n-ease-in-out-cubic-bezier;
+//       transform-origin: inherit;
+//       transform: $--n-transform-debounce-scale;
+//       position: relative;
+//       font-size: 13px;
+//       @include m(styled) {
+//         border-radius: $--n-popover-border-radius;
+//         padding: 8px 14px;
+//       }
+//       @include m(fix-width) {
+//         white-space: normal;
+//         width: max-content;
+//         box-sizing: border-box;
+//       }
+//       @include b(popover-arrow-wrapper) {
+//         position: absolute;
+//         overflow: hidden;
+//         pointer-events: none;
+//         @include b(popover-arrow) {
+//           transition: background-color .3s $--n-ease-in-out-cubic-bezier;
+//           position: absolute;
+//           display: block;
+//           width: $--n-popover-arrow-width * 2;
+//           height: $--n-popover-arrow-width * 2;
+//           box-shadow: $--n-popover-arrow-box-shadow;
+//           transform: rotate(45deg);
+//         }
+//       }
+//       @include m(no-arrow) {
+//         &[n-placement$="top-start"] {
+//           margin-bottom: 6px;
+//         }
+//         &[n-placement$="top"] {
+//           margin-bottom: 6px;
+//         }
+//         &[n-placement$="top-end"] {
+//           margin-bottom: 6px;
+//         }
+//         &[n-placement$="bottom-start"] {
+//           margin-top: 6px;
+//         }
+//         &[n-placement$="bottom"] {
+//           margin-top: 6px;
+//         }
+//         &[n-placement$="bottom-end"] {
+//           margin-top: 6px;
+//         }
+//         &[n-placement$="left-start"] {
+//           margin-right: 6px;
+//         }&[n-placement$="left"] {
+//           margin-right: 6px;
+//         }
+//         &[n-placement$="left-end"] {
+//           margin-right: 6px;
+//         }
+//         &[n-placement$="right-start"] {
+//           margin-left: 6px;
+//         }
+//         &[n-placement$="right"] {
+//           margin-left: 6px;
+//         }
+//         &[n-placement$="right-end"] {
+//           margin-left: 6px;
+//         }
+//       } 
+//       &[n-placement$="top-start"] {
+//         margin-bottom: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           right: 0;
+//           left: 0;
+//           top: 100%;
+//           height: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             top: -$--n-popover-arrow-width;
+//             left: 10px;
+//           }
+//         }
+//       }
+//       &[n-placement$="top"] {
+//         margin-bottom: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           right: 0;
+//           left: 0;
+//           top: 100%;
+//           height: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             top: -$--n-popover-arrow-width;
+//             transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ;
+//             left: 50%;
+//           }
+//         }
+//       }
+//       &[n-placement$="top-end"] {
+//         margin-bottom: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           right: 0;
+//           left: 0;
+//           top: 100%;
+//           height: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             top: -$--n-popover-arrow-width;
+//             right: 10px;
+//           }
+//         }
+//       }
+//       &[n-placement$="bottom-start"] {
+//         margin-top: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           right: 0;
+//           left: 0;
+//           bottom: 100%;
+//           height: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             bottom: -$--n-popover-arrow-width;
+//             left: 10px;
+//           }
+//         }
+//       }
+//       &[n-placement$="bottom"] {
+//         margin-top: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           right: 0;
+//           left: 0;
+//           bottom: 100%;
+//           height: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             bottom: -$--n-popover-arrow-width;
+//             transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ;
+//             left: 50%;
+//           }
+//         }
+//       }
+//       &[n-placement$="bottom-end"] {
+//         margin-top: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           right: 0;
+//           left: 0;
+//           bottom: 100%;
+//           height: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             bottom: -$--n-popover-arrow-width;
+//             right: 10px;
+//           }
+//         }
+//       }
+//       &[n-placement$="left-start"] {
+//         margin-right: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           top: 0;
+//           bottom: 0;
+//           left: 100%;
+//           width: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             left: -$--n-popover-arrow-width;
+//             top: 10px;
+//           }
+//         }
+//       }
+//       &[n-placement$="left"] {
+//         margin-right: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           top: 0;
+//           bottom: 0;
+//           left: 100%;
+//           width: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             left: -$--n-popover-arrow-width;
+//             transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ;
+//             top: 50%;
+//           }
+//         }
+//       }
+//       &[n-placement$="left-end"] {
+//         margin-right: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           top: 0;
+//           bottom: 0;
+//           left: 100%;
+//           width: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             left: -$--n-popover-arrow-width;
+//             bottom: 10px;
+//           }
+//         }
+//       }
+//       &[n-placement$="right-start"] {
+//         margin-left: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           top: 0;
+//           bottom: 0;
+//           right: 100%;
+//           width: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             right: -$--n-popover-arrow-width;
+//             top: 10px;
+//           }
+//         }
+//       }
+//       &[n-placement$="right"] {
+//         margin-left: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           top: 0;
+//           bottom: 0;
+//           right: 100%;
+//           width: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             right: -$--n-popover-arrow-width;
+//             transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ;
+//             top: 50%;
+//           }
+//         }
+//       }
+//       &[n-placement$="right-end"] {
+//         margin-left: 10px;
+//         @include b(popover-arrow-wrapper) {
+//           top: 0;
+//           bottom: 0;
+//           right: 100%;
+//           width: $--n-popover-arrow-width * 2;
+//           @include b(popover-arrow) {
+//             right: -$--n-popover-arrow-width;
+//             bottom: 10px;
+//           }
+//         }
+//       }
+//     }
+//     @include m(styled) {
+//       background-color: $--popover-background-color;
+//     }
+//     color: $--popover-text-color;
+//     @include b(popover-arrow-wrapper) {
+//       @include b(popover-arrow) {
+//         background-color: $--popover-background-color;
+//       }
+//     }
+//     @include m(shadow) {
+//       box-shadow: $--popover-box-shadow;
+//     }
+//   }
+// }
diff --git a/src/_styles/index.scss b/src/_styles/index.scss
index 37abaafec..c3de3b6b8 100644
--- a/src/_styles/index.scss
+++ b/src/_styles/index.scss
@@ -5,6 +5,8 @@
 
 @import './Descriptions.scss';
 @import './Form.scss';
-@import './Popover.scss';
+// @import './Popover.scss';
+// @import './Tabs.scss';
+// @import './Table.scss';
 @import './Tooltip.scss';
 @import './Upload.scss';
\ No newline at end of file
diff --git a/src/data-table/src/HeaderButton/FilterButton.vue b/src/data-table/src/HeaderButton/FilterButton.vue
index d72911501..60d13a0bd 100644
--- a/src/data-table/src/HeaderButton/FilterButton.vue
+++ b/src/data-table/src/HeaderButton/FilterButton.vue
@@ -38,7 +38,7 @@
 <script>
 import NIcon from '../../../icon'
 import NDataTableFilterMenu from './FilterMenu'
-import NPopover from '../../../Popover'
+import NPopover from '../../../popover'
 import funnel from '../../../_icons/funnel'
 
 function createActiveFilters (allFilters, columnKey, syntheticFilterValue) {
diff --git a/src/dropdown/src/Dropdown.vue b/src/dropdown/src/Dropdown.vue
index 8a786a996..2b526acb4 100644
--- a/src/dropdown/src/Dropdown.vue
+++ b/src/dropdown/src/Dropdown.vue
@@ -1,5 +1,5 @@
 <script>
-import NPopover from '../../Popover'
+import NPopover from '../../popover'
 import NDropdownMenu from './DropdownMenu'
 import emptyFunction from '../../_utils/function/empty'
 
diff --git a/src/index.js b/src/index.js
index c0e143183..a86145ce9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -45,7 +45,7 @@ import Notification from './notification'
 import Pagination from './pagination'
 import Popconfirm from './popconfirm'
 import Popselect from './popselect'
-import Popup from './Popover'
+import Popup from './popover'
 import Progress from './progress'
 import Radio from './radio'
 import Result from './result'
@@ -190,6 +190,8 @@ import tabsLightStyle from './tabs/styles/light'
 import tabsDarkStyle from './tabs/styles/dark'
 import tableLightStyle from './table/styles/light'
 import tableDarkStyle from './table/styles/dark'
+import popoverLightStyle from './popover/styles/light'
+import popoverDarkStyle from './popover/styles/dark'
 
 // Can be remove after refactoring
 import baseSelectionLightStyle from './_base/selection/styles/light'
@@ -409,6 +411,8 @@ export default create({
     tabsDarkStyle,
     tableLightStyle,
     tableDarkStyle,
+    popoverLightStyle,
+    popoverDarkStyle,
     // Can be remove after refactoring
     baseSelectionLightStyle,
     baseSelectionDarkStyle
diff --git a/src/menu/src/Submenu.vue b/src/menu/src/Submenu.vue
index 6bdcba037..67da4296d 100644
--- a/src/menu/src/Submenu.vue
+++ b/src/menu/src/Submenu.vue
@@ -103,7 +103,7 @@
 
 <script>
 import FadeInHeightExpandTransition from '../../_transition/FadeInHeightExpandTransition'
-import NPopover from '../../Popover'
+import NPopover from '../../popover'
 import NMenuItemContent from './MenuItemContent'
 import NMenu from './Menu'
 import menuContentMixin from './menuContentMixin'
diff --git a/src/popconfirm/src/Popconfirm.vue b/src/popconfirm/src/Popconfirm.vue
index 2a7f09dc9..82d87f3ec 100644
--- a/src/popconfirm/src/Popconfirm.vue
+++ b/src/popconfirm/src/Popconfirm.vue
@@ -1,5 +1,5 @@
 <script>
-import NPopover from '../../Popover'
+import NPopover from '../../popover'
 import PopconfirmPanel from './PopconfirmPanel'
 
 export default {
diff --git a/src/popover/index.js b/src/popover/index.js
new file mode 100644
index 000000000..afb7ed559
--- /dev/null
+++ b/src/popover/index.js
@@ -0,0 +1,7 @@
+import NPopover from './src/Popover'
+
+NPopover.install = function (Vue, naive) {
+  Vue.component(naive.componentPrefix + NPopover.name, NPopover)
+}
+
+export default NPopover
diff --git a/src/Popover/src/main.js b/src/popover/src/Popover.js
similarity index 99%
rename from src/Popover/src/main.js
rename to src/popover/src/Popover.js
index efaf451ad..6c64b41e8 100644
--- a/src/Popover/src/main.js
+++ b/src/popover/src/Popover.js
@@ -19,7 +19,7 @@ function mixin (component, mixins) {
  * When using `manual` trigger, using default param of v-model(value prop, input event)
  */
 export default {
-  name: 'NPopover',
+  name: 'Popover',
   functional: true,
   props: {
     show: {
diff --git a/src/Popover/src/PopoverContent.js b/src/popover/src/PopoverContent.js
similarity index 97%
rename from src/Popover/src/PopoverContent.js
rename to src/popover/src/PopoverContent.js
index f0aa3a647..fbc6f1d59 100644
--- a/src/Popover/src/PopoverContent.js
+++ b/src/popover/src/PopoverContent.js
@@ -7,6 +7,8 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import formatLength from '../../_utils/css/formatLength'
 import getDefaultSlot from '../../_utils/vue/getDefaultSlot'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 export default {
   name: 'NPopoverContent',
@@ -84,7 +86,14 @@ export default {
       default: 'if'
     }
   },
-  mixins: [withapp, themeable, placeable, zindexable],
+  cssrName: 'Popover',
+  mixins: [
+    withapp,
+    themeable,
+    placeable,
+    zindexable,
+    usecssr(styles)
+  ],
   directives: {
     clickoutside,
     mousemoveoutside
diff --git a/src/Popover/src/PopoverManager.js b/src/popover/src/PopoverManager.js
similarity index 100%
rename from src/Popover/src/PopoverManager.js
rename to src/popover/src/PopoverManager.js
diff --git a/src/Popover/src/activatorMixin.js b/src/popover/src/activatorMixin.js
similarity index 100%
rename from src/Popover/src/activatorMixin.js
rename to src/popover/src/activatorMixin.js
diff --git a/src/popover/src/styles/index.js b/src/popover/src/styles/index.js
new file mode 100644
index 000000000..958d3000d
--- /dev/null
+++ b/src/popover/src/styles/index.js
@@ -0,0 +1,9 @@
+import baseStyle from './themed-base.cssr.js'
+
+export default [
+  {
+    key: 'syntheticTheme',
+    watch: ['syntheticTheme'],
+    CNode: baseStyle
+  }
+]
diff --git a/src/popover/src/styles/themed-base.cssr.js b/src/popover/src/styles/themed-base.cssr.js
new file mode 100644
index 000000000..8d6441a01
--- /dev/null
+++ b/src/popover/src/styles/themed-base.cssr.js
@@ -0,0 +1,233 @@
+import { c, cB, cM } from '../../../_utils/cssr'
+import depx from '../../../_utils/css/depx'
+import pxfy from '../../../_utils/css/pxfy'
+
+function popoverContentTransition (pallete, easeOutCubicBezier, easeInCubicBezier) {
+  return [
+    c('&&-transition-enter-to, &&-transition-leave', {
+      raw: `
+        transform: ${pallete.transformDebounceScale};
+        opacity: 1;
+      `
+    }),
+    c('&&-transition-enter, &&-transition-leave-to', {
+      raw: `
+        opacity: 0;
+        transform: scale(.85);
+      `
+    }),
+    c('&&-transition-enter-active', {
+      raw: `
+        transition: opacity .15s ${easeOutCubicBezier}, transform .15s ${easeOutCubicBezier};
+      `
+    }),
+    c('&&-transition-leave-active', {
+      raw: `
+        transition: opacity .15s ${easeInCubicBezier}, transform .15s ${easeInCubicBezier};
+      `
+    })
+  ]
+}
+function noArrowNPlaceMixin (direction) {
+  return c(`&[n-placement$="${direction}"]`, {
+    raw: `
+      margin-bottom: 6px;
+    `
+  })
+}
+const oppsiteDirection = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+}
+function nPlacementMixin (pallete, direction, popoverArrowContent) {
+  const finalDirection = direction.split('-')[0]
+  return c(`&[n-placement$="${direction}"]`, {
+    raw: `
+      margin-${oppsiteDirection[finalDirection]}: 10px;
+    `
+  }, [
+    cB('popover-arrow-wrapper', {
+      raw: `
+        right: 0;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        ${finalDirection}: 100%;
+        ${oppsiteDirection[finalDirection]}: auto;
+        height: ${pxfy(depx(pallete.arrowWidth) * 2)};
+      `
+    }, [
+      cB('popover-arrow', {
+        raw: `
+          ${popoverArrowContent}
+        `
+      })
+    ])
+  ])
+}
+
+export default c([
+  ({ props }) => {
+    const {
+      transformDebounceScale,
+      textColor,
+      color,
+      boxShadow,
+      borderRadius,
+      arrowWidth
+    } = props.$local
+
+    const {
+      easeInOutCubicBezier,
+      easeInCubicBezier,
+      easeOutCubicBezier
+    } = props.$base
+    const pallete = props.$local
+    return [
+      cB('popover-content', {
+        raw: `
+          transition:
+            background-color .3s ${easeInOutCubicBezier},
+            color .3s ${easeInOutCubicBezier};
+          transform-origin: inherit;
+          transform: ${transformDebounceScale};
+          position: relative;
+          font-size: 13px;
+          color: ${textColor};
+        `
+      }, [
+        popoverContentTransition(pallete, easeOutCubicBezier, easeInCubicBezier),
+        cM('styled', {
+          raw: `
+            border-radius: ${borderRadius};
+            padding: 8px 14px;
+          `
+        }),
+        cM('fix-width', {
+          raw: `
+            white-space: normal;
+            width: max-content;
+            box-sizing: border-box;
+          `
+        }),
+        cB('popover-arrow-wrapper', {
+          raw: `
+            position: absolute;
+            overflow: hidden;
+            pointer-events: none;
+          `
+        }, [
+          cB('popover-arrow', {
+            raw: `
+              transition: background-color .3s ${easeInOutCubicBezier};
+              position: absolute;
+              display: block;
+              width: ${pxfy(depx(arrowWidth) * 2)};
+              height: ${pxfy(depx(arrowWidth) * 2)};
+              box-shadow: ${boxShadow};
+              transform: rotate(45deg);
+            `
+          })
+        ]),
+        cM('no-arrow', [
+          [ 'top',
+            'top-start',
+            'top-end',
+            'bottom',
+            'bottom-start',
+            'bottom-end',
+            'left',
+            'left-start',
+            'left-end',
+            'right-start',
+            'right',
+            'right-end'
+          ].map(direction => noArrowNPlaceMixin(direction))
+        ]),
+        nPlacementMixin(pallete, 'top-start',
+          `
+          top: -${arrowWidth};
+          left: 10px;
+        `),
+        nPlacementMixin(pallete, 'top',
+          `
+          top: -${arrowWidth};
+          transform: translateX(-${arrowWidth}) rotate(45deg) ;
+          left: 50%;
+        `),
+        nPlacementMixin(pallete, 'top-end',
+          `
+          top: -${arrowWidth};
+          right: 10px;
+        `),
+        nPlacementMixin(pallete, 'bottom-start',
+          `
+          bottom: -${arrowWidth};
+          left: 10px;
+        `),
+        nPlacementMixin(pallete, 'bottom',
+          `
+          bottom: -${arrowWidth};
+          transform: translateX(-${arrowWidth}) rotate(45deg) ;
+          left: 50%;
+        `),
+        nPlacementMixin(pallete, 'bottom-end',
+          `
+          bottom: -${arrowWidth};
+          right: 10px;
+        `),
+        nPlacementMixin(pallete, 'left-start',
+          `
+          left: -${arrowWidth};
+          top: 10px;
+        `),
+        nPlacementMixin(pallete, 'left',
+          `
+          left: -${arrowWidth};
+          transform: translateY(-${arrowWidth}) rotate(45deg) ;
+          top: 50%;
+        `),
+        nPlacementMixin(pallete, 'left-end',
+          `
+          left: -${arrowWidth};
+          bottom: 10px;
+        `),
+        nPlacementMixin(pallete, 'right-start',
+          `
+          right: -${arrowWidth};
+          top: 10px;
+        `),
+        nPlacementMixin(pallete, 'right',
+          `
+          right: -${arrowWidth};
+          transform: translateY(-${arrowWidth}) rotate(45deg) ;
+          top: 50%;
+        `),
+        nPlacementMixin(pallete, 'right-end',
+          `
+          right: -${arrowWidth};
+          bottom: 10px;
+        `),
+        cM('styled', {
+          raw: `
+          background-color: ${color};
+          `
+        }),
+        cB('popover-arrow-wrapper', [
+          cB('popover-arrow', {
+            raw: `
+              background-color: ${color};
+            `
+          })
+        ]),
+        cM('shadow', {
+          raw: `
+            box-shadow: ${boxShadow};
+          `
+        })
+      ])
+    ]
+  }
+])
diff --git a/src/popover/styles/_common.js b/src/popover/styles/_common.js
new file mode 100644
index 000000000..ceef232e1
--- /dev/null
+++ b/src/popover/styles/_common.js
@@ -0,0 +1,3 @@
+export default {
+  arrowWidth: '4px'
+}
diff --git a/src/popover/styles/dark.js b/src/popover/styles/dark.js
new file mode 100644
index 000000000..82961a67e
--- /dev/null
+++ b/src/popover/styles/dark.js
@@ -0,0 +1,26 @@
+import create from '../../styles/_utils/create-component-base'
+import commonVariables from './_common'
+
+export default create({
+  name: 'Popover',
+  theme: 'dark',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      popoverBackgroundColor,
+      secondaryTextOverlayColor,
+      popoverBoxShadow
+    } = derived
+    const {
+      borderRadius,
+      transformDebounceScale
+    } = base
+    return {
+      ...commonVariables,
+      borderRadius,
+      color: popoverBackgroundColor,
+      textColor: secondaryTextOverlayColor,
+      boxShadow: popoverBoxShadow,
+      transformDebounceScale
+    }
+  }
+})
diff --git a/src/popover/styles/light.js b/src/popover/styles/light.js
new file mode 100644
index 000000000..fb0d1224d
--- /dev/null
+++ b/src/popover/styles/light.js
@@ -0,0 +1,26 @@
+import create from '../../styles/_utils/create-component-base'
+import commonVariables from './_common'
+
+export default create({
+  name: 'Popover',
+  theme: 'light',
+  getDerivedVariables ({ base, derived }) {
+    const {
+      popoverBackgroundColor,
+      secondaryTextColor,
+      popoverBoxShadow
+    } = derived
+    const {
+      borderRadius,
+      transformDebounceScale
+    } = base
+    return {
+      ...commonVariables,
+      borderRadius,
+      color: popoverBackgroundColor,
+      textColor: secondaryTextColor,
+      boxShadow: popoverBoxShadow,
+      transformDebounceScale
+    }
+  }
+})
diff --git a/src/popselect/src/Popselect.vue b/src/popselect/src/Popselect.vue
index e62cef3f6..aae068d83 100644
--- a/src/popselect/src/Popselect.vue
+++ b/src/popselect/src/Popselect.vue
@@ -1,5 +1,5 @@
 <script>
-import NPopover from '../../Popover'
+import NPopover from '../../popover'
 import NPopselectPanel from './PopselectPanel'
 import emptyFunction from '../../_utils/function/empty'