refactor(list): new theme

src/list/src/List.vue

@@ -3,9 +3,9 @@
     class="n-list"
     :class="{
       'n-list--bordered': bordered,
-      [`n-list--${size}-size`]: size,
+      [`n-list--${size}-size`]: size
-      [`n-${mergedTheme}-theme`]: mergedTheme
     }"
+    :style="cssVars"
   >
     <div v-if="$slots.header" class="n-list__header">
       <slot name="header" />
@@ -18,13 +18,15 @@
 </template>
 
 <script>
-import { configurable, themeable, withCssr } from '../../_mixins'
+import { computed, defineComponent } from 'vue'
-import styles from './styles'
+import { useTheme } from '../../_mixins'
+import { listLight } from '../styles'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'List',
-  mixins: [configurable, themeable, withCssr(styles)],
   props: {
+    ...useTheme.props,
     size: {
       type: String,
       default: 'medium'
@@ -33,6 +35,33 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  setup (props) {
+    const themeRef = useTheme('List', 'List', style, listLight, props)
+    return {
+      cssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            fontSize,
+            textColor,
+            color,
+            colorModal,
+            borderColor,
+            borderRadius
+          }
+        } = themeRef.value
+        return {
+          '--font-size': fontSize,
+          '--bezier': cubicBezierEaseInOut,
+          '--text-color': textColor,
+          '--color': color,
+          '--border-radius': borderRadius,
+          '--border-color': borderColor,
+          '--color-modal': colorModal
+        }
+      })
+    }
   }
-}
+})
 </script>

src/list/src/ListItem.vue

@@ -13,7 +13,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'ListItem'
-}
+})
 </script>

src/list/src/styles/index.cssr.js

@@ -0,0 +1,82 @@
+import { cB, c, cE, cM, insideModal } from '../../../_utils/cssr'
+
+// vars:
+// --font-size
+// --bezier
+// --text-color
+// --color
+// --border-radius
+// --border-color
+// --color-modal
+export default c([
+  cB('list', `
+    font-size: var(--font-size);
+    transition:
+      background-color .3s var(--bezier),
+      color .3s var(--bezier),
+      border-color .3s var(--bezier);
+    padding: 0;
+    list-style-type: none;
+    color: var(--text-color);
+  `, [
+    cM('bordered', `
+      background-color: var(--color);
+      border-radius: var(--border-radius);
+      border: 1px solid var(--border-color);
+    `, [
+      cB('list-item', `
+        padding: 12px 20px;
+      `, [
+        c('&:not(:last-child)', `
+          border-bottom: 1px solid var(--border-color);
+        `)
+      ]),
+      cE('header, footer', `
+        padding: 12px 20px;
+      `, [
+        c('&:not(:last-child)', `
+          border-bottom: 1px solid var(--border-color);
+        `)
+      ])
+    ]),
+    cE('header, footer', `
+      padding: 12px 0;
+      box-sizing: border-box;
+      transition: border-color .3s var(--bezier);
+    `, [
+      c('&:not(:last-child)', `
+        border-bottom: 1px solid var(--border-color);
+      `)
+    ]),
+    cB('list-item', `
+      padding: 12px 0;    
+      box-sizing: border-box;
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      transition: border-color .3s var(--bezier);
+    `, [
+      cE('prefix', `
+        margin-right: 20px;
+        flex: 0;
+      `),
+      cE('suffix', `
+          margin-left: 20px;
+          flex: 0;
+        `),
+      cE('main', `
+        flex: 1;
+      `),
+      c('&:not(:last-child)', `
+        border-bottom: 1px solid var(--border-color);
+      `)
+    ])
+  ]),
+  insideModal(
+    cB('list', [
+      cM('bordered', `
+        background-color: var(--color-modal);
+      `)
+    ])
+  )
+])

src/list/src/styles/index.js

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

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

@@ -1,120 +0,0 @@
-import { cTB, c, cB, cE, cM, insideModal } from '../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      $global: {
-        cubicBezierEaseInOut
-      },
-      $local
-    } = props
-    const {
-      fontSize,
-      textColor,
-      color,
-      colorModal,
-      borderColor,
-      borderRadius
-    } = $local
-    return [
-      cTB('list', {
-        raw: `
-          font-size: ${fontSize};
-          transition:
-            background-color .3s ${cubicBezierEaseInOut},
-            color .3s ${cubicBezierEaseInOut},
-            border-color .3s ${cubicBezierEaseInOut};
-          padding: 0;
-          list-style-type: none;
-          color: ${textColor};
-        `
-      }, [
-        cM('bordered', {
-          raw: `
-            background-color: ${color};
-            border-radius: ${borderRadius};
-            border: 1px solid ${borderColor};
-          `
-        }, [
-          cB('list-item', {
-            raw: `
-              padding: 12px 20px;
-            `
-          }, [
-            c('&:not(:last-child)', {
-              raw: `
-                border-bottom: 1px solid ${borderColor};
-              `
-            })
-          ]),
-          cE('header, footer', {
-            raw: `
-              padding: 12px 20px;
-            `
-          }, [
-            c('&:not(:last-child)', {
-              raw: `
-                border-bottom: 1px solid ${borderColor};
-              `
-            })
-          ])
-        ]),
-        cE('header, footer', {
-          raw: `
-            padding: 12px 0;
-            box-sizing: border-box;
-            transition: border-color .3s ${cubicBezierEaseInOut};
-          `
-        }, [
-          c('&:not(:last-child)', {
-            raw: `
-              border-bottom: 1px solid ${borderColor};
-            `
-          })
-        ]),
-        cB('list-item', {
-          raw: `
-            padding: 12px 0;    
-            box-sizing: border-box;
-            display: flex;
-            flex-wrap: nowrap;
-            align-items: center;
-            transition: border-color .3s ${cubicBezierEaseInOut};
-          `
-        }, [
-          cE('prefix', {
-            raw: `
-              margin-right: 20px;
-              flex: 0;
-            `
-          }),
-          cE('suffix', {
-            raw: `
-              margin-left: 20px;
-              flex: 0;
-            `
-          }),
-          cE('main', {
-            raw: `
-              flex: 1;
-            `
-          }),
-          c('&:not(:last-child)', {
-            raw: `
-              border-bottom: 1px solid ${borderColor};
-            `
-          })
-        ])
-      ]),
-      insideModal(
-        cTB('list', [
-          cM('bordered', {
-            raw: `
-              background-color: ${colorModal};
-            `
-          })
-        ])
-      )
-    ]
-  }
-])

src/list/styles/dark.js

@@ -1,11 +1,9 @@
-import create from '../../_styles/utils/create-component-base'
+import { commonDark } from '../../_styles/new-common'
-import { baseDark } from '../../_styles/base'
 
-export default create({
+export default {
   name: 'List',
-  theme: 'dark',
+  common: commonDark,
-  peer: [baseDark],
+  self (vars) {
-  getLocalVars (vars) {
     const {
       textColor2Overlay,
       cardColor,
@@ -23,4 +21,4 @@ export default create({
       fontSize
     }
   }
-})
+}

src/list/styles/light.js

@@ -1,11 +1,9 @@
-import create from '../../_styles/utils/create-component-base'
+import { commonLight } from '../../_styles/new-common'
-import { baseLight } from '../../_styles/base'
 
-export default create({
+export default {
   name: 'List',
-  theme: 'light',
+  common: commonLight,
-  peer: [baseLight],
+  self (vars) {
-  getLocalVars (vars) {
     const {
       textColor2,
       cardColor,
@@ -23,4 +21,4 @@ export default create({
       fontSize
     }
   }
-})
+}

src/styles.js

@@ -49,7 +49,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { inputDark, inputLight } from './input/styles'
 // export { inputNumberDark, inputNumberLight } from './input-number/styles'
 // export { layoutDark, layoutLight } from './layout/styles'
-export { listDark, listLight } from './list/styles'
+// export { listDark, listLight } from './list/styles'
 export { loadingBarDark, loadingBarLight } from './loading-bar/styles'
 export { logDark, logLight } from './log/styles'
 export { menuDark, menuLight } from './menu/styles'

src/styles.new.js

@@ -31,6 +31,7 @@ import { iconDark } from './icon/styles'
 import { inputDark } from './input/styles'
 import { inputNumberDark } from './input-number/styles'
 import { layoutDark } from './layout/styles'
+import { listDark } from './list/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -65,5 +66,6 @@ export const darkTheme = {
   Icon: iconDark,
   Input: inputDark,
   InputNumber: inputNumberDark,
-  Layout: layoutDark
+  Layout: layoutDark,
+  List: listDark
 }