refactor(tooltip): use style seperately from popover

src/tooltip/src/main.js

@@ -1,11 +1,14 @@
-/**
- * Tooltip: popover wearing waistcoat
- */
+// Tooltip: popover wearing waistcoat
 import { NPopover } from '../../popover'
 import { h } from 'vue'
+import { withCssr } from '../../_mixins'
+import styles from './styles'
 
 export default {
   name: 'Tooltip',
+  mixins: [
+    withCssr(styles)
+  ],
   props: {
     ...NPopover.props,
     showArrow: {

src/tooltip/src/styles/index.js

@@ -0,0 +1,11 @@
+import themedBaseStyle from './themed-base.cssr.js'
+
+export default [
+  {
+    key: 'mergedTheme',
+    watch: [
+      'mergedTheme'
+    ],
+    CNode: themedBaseStyle
+  }
+]

src/tooltip/src/styles/themed-base.cssr.js

@@ -0,0 +1,32 @@
+import { c, cTB, cB, cM } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const {
+      $local: {
+        borderRadius,
+        boxShadow,
+        padding,
+        color,
+        textColor
+      }
+    } = props
+    return cTB('popover', [
+      cM('tooltip', {
+        raw: `
+          padding: ${padding};
+          border-radius: ${borderRadius};
+          box-shadow: ${boxShadow};
+          background-color: ${color};
+          color: ${textColor};
+        `
+      }, [
+        cB('popover-arrow-wrapper', [
+          cB('popover-arrow', {
+            backgroundColor: color
+          })
+        ])
+      ])
+    ])
+  }
+])

src/tooltip/styles/_common.js

@@ -0,0 +1,3 @@
+export default {
+  padding: '8px 14px'
+}

src/tooltip/styles/dark.js

@@ -1,6 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
 import { baseDark } from '../../_styles/base'
 import { popoverDark } from '../../popover/styles'
+import commonVars from './_common'
 
 export default create({
   theme: 'dark',
@@ -10,6 +11,12 @@ export default create({
     popoverDark
   ],
   getLocalVars (vars) {
-    return {}
+    return {
+      ...commonVars,
+      borderRadius: vars.borderRadius,
+      boxShadow: vars.boxShadow2,
+      color: vars.popoverColor,
+      textColor: vars.textColor2Overlay
+    }
   }
 })

src/tooltip/styles/light.js

@@ -1,6 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
 import { baseLight } from '../../_styles/base'
 import { popoverLight } from '../../popover/styles'
+import commonVars from './_common'
 
 export default create({
   theme: 'light',
@@ -10,6 +11,12 @@ export default create({
     popoverLight
   ],
   getLocalVars (vars) {
-    return {}
+    return {
+      ...commonVars,
+      borderRadius: vars.borderRadius,
+      boxShadow: vars.boxShadow2,
+      color: 'rgba(0, 0, 0, .85)',
+      textColor: vars.baseColor
+    }
   }
 })