refactor(thing): new theme

src/styles.js

@@ -75,7 +75,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { tableDark, tableLight } from './table/styles'
 // export { tabsDark, tabsLight } from './tabs/styles'
 // export { tagDark, tagLight } from './tag/styles'
-export { thingDark, thingLight } from './thing/styles'
+// export { thingDark, thingLight } from './thing/styles'
 export { timeDark, timeLight } from './time/styles'
 export { timePickerDark, timePickerLight } from './time-picker/styles'
 export { timelineDark, timelineLight } from './timeline/styles'

src/styles.new.js

@@ -56,6 +56,7 @@ import { switchDark } from './switch/styles'
 import { tableDark } from './table/styles'
 import { tabsDark } from './tabs/styles'
 import { tagDark } from './tag/styles'
+import { thingDark } from './thing/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -115,5 +116,6 @@ export const darkTheme = {
   Switch: switchDark,
   Table: tableDark,
   Tabs: tabsDark,
-  Tag: tagDark
+  Tag: tagDark,
+  Thing: thingDark
 }

src/thing/src/Thing.vue

@@ -1,11 +1,5 @@
 <template>
-  <div
-    class="n-thing"
-    :class="{
-      [`n-${mergedTheme}-theme`]: mergedTheme
-    }"
-    :style="mergedStyle"
-  >
+  <div class="n-thing" :style="cssVars">
     <div v-if="$slots.avatar && contentIndented" class="n-thing-avatar">
       <slot name="avatar" />
     </div>
@@ -97,12 +91,13 @@
 </template>
 
 <script>
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles'
+import { defineComponent, computed } from 'vue'
+import { useTheme } from '../../_mixins'
+import { thingLight } from '../styles'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'Thing',
-  mixins: [configurable, themeable, withCssr(styles)],
   props: {
     title: {
       type: String,
@@ -124,6 +119,24 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  setup (props) {
+    const themeRef = useTheme('Thing', 'Thing', style, thingLight, props)
+    return {
+      cssVars: computed(() => {
+        const {
+          self: { titleTextColor, textColor, titleFontWeight, fontSize },
+          common: { cubicBezierEaseInOut }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--font-size': fontSize,
+          '--text-color': textColor,
+          '--title-font-weight': titleFontWeight,
+          '--title-text-color': titleTextColor
+        }
+      })
+    }
   }
-}
+})
 </script>

src/thing/src/styles/index.cssr.js

@@ -0,0 +1,64 @@
+import { c, cB, cE } from '../../../_utils/cssr'
+
+// vars:
+// --bezier
+// --font-size
+// --text-color
+// --title-font-weight
+// --title-text-color
+export default cB('thing', `
+  display: flex;
+  transition: color .3s var(--bezier);
+  font-size: var(--font-size);
+  color: var(--text-color);
+`, [
+  cB('thing-avatar', `
+    margin-right: 12px;
+    margin-top: 2px;
+  `),
+  cB('thing-avatar-header-wrapper', `
+    display: flex;
+    flex-wrap: nowrap;
+  `, [
+    cB('thing-header-wrapper', `
+      flex: 1;
+    `)
+  ]),
+  cB('thing-main', `
+    flex-grow: 1;
+  `, [
+    cB('thing-header', `
+      display: flex;
+      margin-bottom: 4px;
+      justify-content: space-between;
+      align-items: center;
+    `, [
+      cE('title', `
+        font-size: 16px;
+        font-weight: var(--title-font-weight);
+        transition: color .3s var(--bezier);
+        color: var(--title-text-color);
+      `)
+    ]),
+    cE('description', [
+      c('&:not(:last-child)', `
+        margin-bottom: 4px;
+      `)
+    ]),
+    cE('content', [
+      c('&:not(:first-child)', `
+        margin-top: 12px;
+      `)
+    ]),
+    cE('footer', [
+      c('&:not(:first-child)', `
+        margin-top: 12px;
+      `)
+    ]),
+    cE('action', [
+      c('&:not(:first-child)', `
+        margin-top: 12px;
+      `)
+    ])
+  ])
+])

src/thing/src/styles/index.js

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

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

@@ -1,95 +0,0 @@
-import { c, cTB, cB, cE } from '../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      $local: {
-        headerTextColor,
-        textColor,
-        headerFontWeight,
-        fontSize
-      },
-      $global: {
-        cubicBezierEaseInOut
-      }
-    } = props
-    return cTB('thing', {
-      raw: `
-        display: flex;
-        transition: color .3s ${cubicBezierEaseInOut};
-        font-size: ${fontSize};
-      `,
-      color: textColor
-    }, [
-      cB('thing-avatar', {
-        raw: `
-          margin-right: 12px;
-          margin-top: 2px;
-        `
-      }),
-      cB('thing-avatar-header-wrapper', {
-        raw: `
-          display: flex;
-          flex-wrap: nowrap;
-        `
-      }, [
-        cB('thing-header-wrapper', {
-          raw: `
-            flex: 1;
-          `
-        })
-      ]),
-      cB('thing-main', {
-        raw: `
-          flex-grow: 1;
-        `
-      }, [
-        cB('thing-header', {
-          raw: `
-            display: flex;
-            margin-bottom: 4px;
-            justify-content: space-between;
-            align-items: center;
-          `
-        }, [
-          cE('title', {
-            raw: `
-              font-size: 16px;
-              font-weight: ${headerFontWeight};
-              transition: color .3s ${cubicBezierEaseInOut};
-            `,
-            color: headerTextColor
-          })
-        ]),
-        cE('description', [
-          c('&:not(:last-child)', {
-            raw: `
-              margin-bottom: 4px;
-            `
-          })
-        ]),
-        cE('content', [
-          c('&:not(:first-child)', {
-            raw: `
-              margin-top: 12px;
-            `
-          })
-        ]),
-        cE('footer', [
-          c('&:not(:first-child)', {
-            raw: `
-              margin-top: 12px;
-            `
-          })
-        ]),
-        cE('action', [
-          c('&:not(:first-child)', {
-            raw: `
-              margin-top: 12px;
-            `
-          })
-        ])
-      ])
-    ])
-  }
-])

src/thing/styles/dark.js

@@ -1,11 +1,9 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Thing',
-  theme: 'dark',
-  peer: [baseDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  self (vars) {
     const {
       textColor1Overlay,
       textColor2Overlay,
@@ -14,9 +12,9 @@ export default create({
     } = vars
     return {
       fontSize,
-      headerTextColor: textColor1Overlay,
+      titleTextColor: textColor1Overlay,
       textColor: textColor2Overlay,
-      headerFontWeight: fontWeightStrong
+      titleFontWeight: fontWeightStrong
     }
   }
-})
+}

src/thing/styles/light.js

@@ -1,17 +1,15 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Thing',
-  theme: 'light',
-  peer: [baseLight],
+  common: commonLight,
   getLocalVars (vars) {
     const { textColor1, textColor2, fontWeightStrong, fontSize } = vars
     return {
       fontSize,
-      headerTextColor: textColor1,
+      titleTextColor: textColor1,
       textColor: textColor2,
-      headerFontWeight: fontWeightStrong
+      titleFontWeight: fontWeightStrong
     }
   }
-})
+}