feat(element): expose css variables

src/element/src/Element.js

@@ -1,16 +1,19 @@
 import { h } from 'vue'
 import {
   configurable,
-  themeable
+  themeable,
+  withCssr
 } from '../../_mixins'
 import styleScheme from '../../_deprecated/style-scheme'
+import style from './styles'
 import { warn } from '../../_utils/naive/warn'
 
 export default {
   name: 'Element',
   mixins: [
     configurable,
-    themeable
+    themeable,
+    withCssr(style)
   ],
   props: {
     tag: {
@@ -49,6 +52,7 @@ export default {
     } = this
     return h(as || tag, {
       class: {
+        'n-element': true,
         [`n-${mergedTheme}-theme`]: mergedTheme
       }
     }, ($slots.default && $slots.default({

src/element/src/styles/index.js

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

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

@@ -0,0 +1,14 @@
+import { kebabCase } from 'lodash-es'
+import { c, cTB } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const { $local } = props
+    return cTB('element',
+      Object.keys($local).reduce((vars, key) => {
+        vars[`--${kebabCase(key)}`] = $local[key]
+        return vars
+      }, {})
+    )
+  }
+])

src/element/styles/dark.js

@@ -0,0 +1,12 @@
+import create from '../../_styles/utils/create-component-base'
+
+export default create({
+  theme: 'dark',
+  name: 'Element',
+  getDerivedVariables ({ base, derived }) {
+    return {
+      ...base,
+      ...derived
+    }
+  }
+})

src/element/styles/index.js

@@ -0,0 +1,2 @@
+export { default as elementDark } from './dark'
+export { default as elementLight } from './light'

src/element/styles/light.js

@@ -0,0 +1,12 @@
+import create from '../../_styles/utils/create-component-base'
+
+export default create({
+  theme: 'light',
+  name: 'Element',
+  getDerivedVariables ({ base, derived }) {
+    return {
+      ...base,
+      ...derived
+    }
+  }
+})

src/styles.js

@@ -52,6 +52,10 @@ export {
   tabsDark,
   tabsLight
 } from './tabs/styles'
+export {
+  elementDark,
+  elementLight
+} from './element/styles'
 export {
   treeDark,
   treeLight