refactor(tooltip): new theme

src/breadcrumb/styles/dark.js

@@ -4,14 +4,21 @@ import { commonDark } from '../../_styles/new-common'
 export default {
   common: commonDark,
   self (vars) {
+    const {
+      fontSize,
+      textColor3Overlay,
+      primaryColorHover,
+      primaryColorPressed,
+      textColor2Overlay
+    } = vars
     return {
       ...commonVariables,
-      fontSize: vars.fontSize,
-      itemTextColor: vars.textColor3Overlay,
-      itemTextColorHover: vars.primaryColorHover,
-      itemTextColorPressed: vars.primaryColorPressed,
-      itemTextColorActive: vars.textColor2Overlay,
-      separatorColor: vars.textColor3Overlay
+      fontSize: fontSize,
+      itemTextColor: textColor3Overlay,
+      itemTextColorHover: primaryColorHover,
+      itemTextColorPressed: primaryColorPressed,
+      itemTextColorActive: textColor2Overlay,
+      separatorColor: textColor3Overlay
     }
   }
 }

src/breadcrumb/styles/light.js

@@ -4,14 +4,21 @@ import { commonLight } from '../../_styles/new-common'
 export default {
   common: commonLight,
   self (vars) {
+    const {
+      fontSize,
+      textColor3,
+      primaryColorHover,
+      primaryColorPressed,
+      textColor2
+    } = vars
     return {
       ...commonVariables,
-      fontSize: vars.fontSize,
-      itemTextColor: vars.textColor3,
-      itemTextColorHover: vars.primaryColorHover,
-      itemTextColorPressed: vars.primaryColorPressed,
-      itemTextColorActive: vars.textColor2,
-      separatorColor: vars.textColor3
+      fontSize: fontSize,
+      itemTextColor: textColor3,
+      itemTextColorHover: primaryColorHover,
+      itemTextColorPressed: primaryColorPressed,
+      itemTextColorActive: textColor2,
+      separatorColor: textColor3
     }
   }
 }

src/gradient-text/styles/dark.js

@@ -14,10 +14,11 @@ export default {
       successColorSuppl,
       warningColorSuppl,
       errorColorSuppl,
-      infoColorSuppl
+      infoColorSuppl,
+      fontWeightStrong
     } = vars
     return {
-      fontWeight: vars.fontWeightStrong,
+      fontWeight: fontWeightStrong,
       rotate: '252deg',
       colorStartPrimary: primaryColor,
       colorEndPrimary: primaryColorSuppl,

src/gradient-text/styles/light.js

@@ -10,10 +10,11 @@ export default {
       successColor,
       warningColor,
       errorColor,
-      infoColor
+      infoColor,
+      fontWeightStrong
     } = vars
     return {
-      fontWeight: vars.fontWeightStrong,
+      fontWeight: fontWeightStrong,
       rotate: '252deg',
       colorStartPrimary: changeColor(primaryColor, { alpha: 0.6 }),
       colorEndPrimary: primaryColor,

src/popover/src/Popover.js

@@ -124,6 +124,7 @@ export default defineComponent({
       default: true
     },
     // events
+    // eslint-disable-next-line vue/prop-name-casing
     'onUpdate:show': {
       type: Function,
       default: undefined

src/popover/src/PopoverBody.js

@@ -6,7 +6,8 @@ import {
   ref,
   defineComponent,
   computed,
-  mergeProps
+  mergeProps,
+  inject
 } from 'vue'
 import { VFollower } from 'vueuc'
 import { clickoutside, mousemoveoutside } from 'vdirs'
@@ -17,11 +18,6 @@ import style from './styles/index.cssr.js'
 
 export default defineComponent({
   name: 'PopoverBody',
-  inject: {
-    NPopover: {
-      default: null
-    }
-  },
   inheritAttrs: false,
   props: {
     ...useTheme.props,
@@ -102,8 +98,10 @@ export default defineComponent({
   },
   setup (props) {
     const themeRef = useTheme('Popover', 'Popover', style, popoverLight, props)
+    const NPopover = inject('NPopover')
     return {
       ...useConfig(props),
+      NPopover,
       adjustedTo: useAdjustedTo(props),
       followerEnabled: ref(props.show),
       followerRef: ref(null),

src/popover/src/styles/index.cssr.js

@@ -50,11 +50,10 @@ export default c([
         opacity .15s var(--bezier-ease-in),
         transform .15s var(--bezier-ease-in);
     `),
-    cNotM('raw', [
-      cNotM('tooltip', `
-        background-color: var(--color);
-        border-radius: var(--border-radius);
-      `),
+    cNotM('raw', `
+      background-color: var(--color);
+      border-radius: var(--border-radius);
+    `, [
       cM('padded', {
         padding: 'var(--padding)'
       })

src/styles.js

@@ -79,7 +79,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { timeDark, timeLight } from './time/styles'
 // export { timePickerDark, timePickerLight } from './time-picker/styles'
 // export { timelineDark, timelineLight } from './timeline/styles'
-export { tooltipDark, tooltipLight } from './tooltip/styles'
+// export { tooltipDark, tooltipLight } from './tooltip/styles'
 // export { transferDark, transferLight } from './transfer/styles'
 // export { treeDark, treeLight } from './tree/styles'
 // export { typographyDark, typographyLight } from './typography/styles'

src/styles.new.js

@@ -64,6 +64,7 @@ import { transferDark } from './transfer/styles'
 import { typographyDark } from './typography/styles'
 import { treeDark } from './tree/styles'
 import { uploadDark } from './upload/styles'
+import { tooltipDark } from './tooltip/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -128,6 +129,7 @@ export const darkTheme = {
   Time: timeDark,
   TimePicker: timePickerDark,
   Timeline: timelineDark,
+  Tooltip: tooltipDark,
   Transfer: transferDark,
   Tree: treeDark,
   Typography: typographyDark,

src/tooltip/src/Tooltip.js

@@ -1,22 +1,30 @@
 // Tooltip: popover wearing waistcoat
+import { h, defineComponent, ref, computed } from 'vue'
 import { NPopover } from '../../popover'
-import { h } from 'vue'
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles'
+import { useTheme } from '../../_mixins'
+import { tooltipLight } from '../styles'
 
-export default {
+export default defineComponent({
   name: 'Tooltip',
-  mixins: [configurable, themeable, withCssr(styles)],
   props: {
+    ...useTheme.props,
     ...NPopover.props,
     showArrow: {
       type: Boolean,
       default: false
     }
   },
-  methods: {
-    syncPosition () {
-      this.$refs.popover.syncPosition()
+  setup (props) {
+    const themeRef = useTheme('Tooltip', 'Tooltip', null, tooltipLight, props)
+    const popoverRef = ref(null)
+    return {
+      popoverRef,
+      syncPosition () {
+        popoverRef.value.syncPosition()
+      },
+      popoverThemeOverrides: computed(() => {
+        return themeRef.value.self
+      })
     }
   },
   render () {
@@ -24,12 +32,11 @@ export default {
       NPopover,
       {
         ...this.$props,
+        builtinThemeOverrides: this.popoverThemeOverrides,
         class: 'n-tooltip n-popover--tooltip',
-        ref: 'popover'
+        ref: 'popoverRef'
       },
-      {
-        ...this.$slots
-      }
+      this.$slots
     )
   }
-}
+})

src/tooltip/src/styles/index.js

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

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

@@ -1,32 +0,0 @@
-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/dark.js

@@ -1,19 +1,21 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
+import { commonDark } from '../../_styles/new-common'
 import { popoverDark } from '../../popover/styles'
 import commonVars from './_common'
 
-export default create({
-  theme: 'dark',
+export default {
   name: 'Tooltip',
-  peer: [baseDark, popoverDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  peers: {
+    Popover: popoverDark
+  },
+  self (vars) {
+    const { borderRadius, boxShadow2, popoverColor, textColor2Overlay } = vars
     return {
       ...commonVars,
-      borderRadius: vars.borderRadius,
-      boxShadow: vars.boxShadow2,
-      color: vars.popoverColor,
-      textColor: vars.textColor2Overlay
+      borderRadius: borderRadius,
+      boxShadow: boxShadow2,
+      color: popoverColor,
+      textColor: textColor2Overlay
     }
   }
-})
+}

src/tooltip/styles/light.js

@@ -1,19 +1,21 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
+import { commonLight } from '../../_styles/new-common'
 import { popoverLight } from '../../popover/styles'
 import commonVars from './_common'
 
-export default create({
-  theme: 'light',
+export default {
   name: 'Tooltip',
-  peer: [baseLight, popoverLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  peers: {
+    Popover: popoverLight
+  },
+  self (vars) {
+    const { borderRadius, boxShadow2, baseColor } = vars
     return {
       ...commonVars,
-      borderRadius: vars.borderRadius,
-      boxShadow: vars.boxShadow2,
+      borderRadius: borderRadius,
+      boxShadow: boxShadow2,
       color: 'rgba(0, 0, 0, .85)',
-      textColor: vars.baseColor
+      textColor: baseColor
     }
   }
-})
+}

src/transfer/styles/light.js

@@ -47,7 +47,7 @@ export default {
       borderRadius: borderRadius,
       borderColor: borderColor,
       listColor: cardColor,
-      headerColor: composite(vars.cardColor, tableHeaderColorOverlay),
+      headerColor: composite(cardColor, tableHeaderColorOverlay),
       titleTextColor: textColor1,
       titleTextColorDisabled: textColorDisabled,
       headerExtraTextColor: textColor2,