refactor(timeline): new theme

src/styles.new.js

@@ -58,6 +58,8 @@ import { tabsDark } from './tabs/styles'
 import { tagDark } from './tag/styles'
 import { thingDark } from './thing/styles'
 import { timeDark } from './time/styles'
+import { timePickerDark } from './time-picker/styles'
+import { timelineDark } from './timeline/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -119,5 +121,7 @@ export const darkTheme = {
   Tabs: tabsDark,
   Tag: tagDark,
   Thing: thingDark,
-  Time: timeDark
+  Time: timeDark,
+  TimePicker: timePickerDark,
+  Timeline: timelineDark
 }

src/timeline/src/Timeline.vue

@@ -2,7 +2,6 @@
   <div
     class="n-timeline"
     :class="{
-      [`n-${mergedTheme}-theme`]: mergedTheme,
       [`n-timeline--${size}-size`]: true,
       [`n-timeline--${itemPlacement}-placement`]: true
     }"
@@ -12,12 +11,10 @@
 </template>
 
 <script>
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   name: 'Timeline',
-  mixins: [configurable, themeable, withCssr(styles)],
   provide () {
     return {
       NTimeline: this
@@ -37,5 +34,5 @@ export default {
       default: 'medium'
     }
   }
-}
+})
 </script>

src/timeline/src/TimelineItem.vue

@@ -1,9 +1,8 @@
 <template>
   <div
     class="n-timeline-item"
-    :class="{
-      [`n-timeline-item--${type}-type`]: true
-    }"
+    :class="`n-timeline-item--${type}-type`"
+    :style="cssVars"
   >
     <div class="n-timeline-item-timeline">
       <div class="n-timeline-item-timeline__line" />
@@ -30,13 +29,14 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed, inject } from 'vue'
+import { useTheme } from '../../_mixins'
+import { createKey } from '../../_utils'
+import { timelineLight } from '../styles'
+import style from './styles/index.cssr.js'
+
+export default defineComponent({
   name: 'TimelineItem',
-  inject: {
-    NTimeline: {
-      default: null
-    }
-  },
   props: {
     time: {
       type: [String, Number],
@@ -57,13 +57,47 @@ export default {
       default: 'default'
     }
   },
-  computed: {
-    mergedTheme () {
-      if (this.NTimeline) {
-        return this.NTimeline.mergedTheme
-      }
-      return null
+  setup (props) {
+    const NTimeline = inject('NTimeline')
+    const themeRef = useTheme(
+      'Timeline',
+      'Timeline',
+      style,
+      timelineLight,
+      props
+    )
+    return {
+      cssVars: computed(() => {
+        const { size } = NTimeline
+        const { type } = props
+        const {
+          self: {
+            titleTextColor,
+            contentTextColor,
+            metaTextColor,
+            lineColor,
+            titleFontWeight,
+            contentFontSize,
+            [createKey('titleMargin', size)]: titleMargin,
+            [createKey('titleFontSize', size)]: titleFontSize,
+            [createKey('circleBorder', type)]: circleBorder
+          },
+          common: { cubicBezierEaseInOut }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--circle-border': circleBorder,
+          '--content-font-size': contentFontSize,
+          '--content-text-color': contentTextColor,
+          '--line-color': lineColor,
+          '--meta-text-color': metaTextColor,
+          '--title-font-size': titleFontSize,
+          '--title-font-weight': titleFontWeight,
+          '--title-margin': titleMargin,
+          '--title-text-color': titleTextColor
+        }
+      })
     }
   }
-}
+})
 </script>

src/timeline/src/styles/index.cssr.js

@@ -0,0 +1,108 @@
+import { c, cB, cE, cM } from '../../../_utils/cssr'
+
+// vars:
+// --bezier
+// --circle-border
+// --content-font-size
+// --content-text-color
+// --line-color
+// --meta-text-color
+// --title-font-size
+// --title-font-weight
+// --title-margin
+// --title-text-color
+export default cB('timeline', `
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  line-height: 1.25;
+`, [
+  cM('right-placement', [
+    cB('timeline-item', [
+      cB('timeline-item-content', `
+        text-align: right;
+        margin-right: 26px;
+      `),
+      cB('timeline-item-timeline', `
+        width: 14px;
+        right: 0;
+      `)
+    ])
+  ]),
+  cM('left-placement', [
+    cB('timeline-item', [
+      cB('timeline-item-content', `
+        margin-left: 26px;
+      `),
+      cB('timeline-item-timeline', `
+        left: 0;
+      `)
+    ])
+  ]),
+  cB('timeline-item', `
+    position: relative;
+  `, [
+    c('&:last-child', [
+      cB('timeline-item-timeline', [
+        cE('line', `
+          display: none;
+        `)
+      ]),
+      cB('timeline-item-content', [
+        cE('meta', `
+          margin-bottom: 0;
+        `)
+      ])
+    ]),
+    cB('timeline-item-content', [
+      cE('title', `
+        margin: var(--title-margin);
+        font-size: var(--title-font-size);
+        transition: color .3s var(--bezier);
+        font-weight: var(--title-font-weight);
+        margin-bottom: 6px;
+        color: var(--title-text-color);
+      `),
+      cE('content', `
+        transition: color .3s var(--bezier);
+        font-size: var(--content-font-size);
+        color: var(--content-text-color);
+      `),
+      cE('meta', `
+        transition: color .3s var(--bezier);
+        font-size: 12px;
+        margin-top: 6px;
+        margin-bottom: 20px;
+        color: var(--meta-text-color);
+      `)
+    ]),
+    cB('timeline-item-timeline', `
+      width: 26px;
+      position: absolute;
+      top: 2px;
+      bottom: 0;
+      height: 100%;
+    `, [
+      cE('circle', `
+        border: var(--circle-border);
+        transition:
+          background-color .3s var(--bezier),
+          border-color .3s var(--bezier);
+        width: 14px;
+        height: 14px;
+        border-radius: 7px;
+        box-sizing: border-box;
+      `),
+      cE('line', `
+        transition: background-color .3s var(--bezier);
+        position: absolute;
+        top: 14px;
+        left: 6px;
+        bottom: 0px;
+        width: 2px;
+        background-color: var(--line-color);
+      `)
+    ])
+  ])
+])

src/timeline/src/styles/index.js

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

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

@@ -1,164 +0,0 @@
-import { c, cTB, cB, cE, cM, createKey } from '../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      $local: {
-        headerTextColor,
-        contentTextColor,
-        metaTextColor,
-        lineColor,
-        headerFontWeight,
-        fontSize
-      },
-      $global: {
-        cubicBezierEaseInOut
-      }
-    } = props
-    return cTB('timeline', {
-      raw: `
-        position: relative;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-      `
-    }, [
-      ['medium', 'large'].map(size => sizeStyle(size, props.$local)),
-      cM('right-placement', [
-        cB('timeline-item', [
-          cB('timeline-item-content', {
-            raw: `
-              text-align: right;
-              margin-right: 26px;
-            `
-          }),
-          cB('timeline-item-timeline', {
-            raw: `
-              width: 14px;
-              right: 0;
-            `
-          })
-        ])
-      ]),
-      cM('left-placement', [
-        cB('timeline-item', [
-          cB('timeline-item-content', {
-            raw: `
-              margin-left: 26px;
-            `
-          }),
-          cB('timeline-item-timeline', {
-            raw: `
-              left: 0;
-            `
-          })
-        ])
-      ]),
-      cB('timeline-item', {
-        raw: `
-          position: relative;
-        `
-      }, [
-        ['default', 'success', 'info', 'warning', 'error']
-          .map(type => itemTypeStyle(type, props.$local)),
-        c('&:last-child', [
-          cB('timeline-item-timeline', [
-            cE('line', {
-              raw: `
-                display: none;
-              `
-            })
-          ])
-        ]),
-        cB('timeline-item-content', [
-          cE('title', {
-            raw: `
-              transition: color .3s ${cubicBezierEaseInOut};
-              line-height: 1.25;
-              font-weight: ${headerFontWeight};
-              margin-bottom: 6px;
-              color: ${headerTextColor};
-            `
-          }),
-          cE('content', {
-            raw: `
-              transition: color .3s ${cubicBezierEaseInOut};
-              font-size: ${fontSize};
-              color: ${contentTextColor};
-            `
-          }),
-          cE('meta', {
-            raw: `
-              transition: color .3s ${cubicBezierEaseInOut};
-              font-size: 12px;
-              margin-top: 6px;
-              margin-bottom: 20px;
-              color: ${metaTextColor};
-            `
-          })
-        ]),
-        cB('timeline-item-timeline', {
-          raw: `
-            width: 26px;
-            position: absolute;
-            top: 2px;
-            bottom: 0;
-            height: 100%;
-          `
-        }, [
-          cE('circle', {
-            raw: `
-              transition:
-                background-color .3s ${cubicBezierEaseInOut},
-                border-color .3s ${cubicBezierEaseInOut};
-              width: 14px;
-              height: 14px;
-              border-radius: 7px;
-              box-sizing: border-box;
-              border-style: solid;
-              border-width: 2px;
-            `
-          }),
-          cE('line', {
-            raw: `
-              transition: background-color .3s ${cubicBezierEaseInOut};
-              position: absolute;
-              top: 14px;
-              left: 6px;
-              bottom: 0px;
-              width: 2px;
-              background-color: ${lineColor};
-            `
-          })
-        ])
-      ])
-    ])
-  }
-])
-
-function itemTypeStyle (type, palette) {
-  return cM(`${type}-type`, [
-    cB('timeline-item-timeline', [
-      cE('circle', {
-        raw: `
-          border-color: ${palette[createKey('circleBorderColor', type)]}
-        `
-      })
-    ])
-  ])
-}
-
-function sizeStyle (size, props) {
-  return cM(`${size}-size`, [
-    cB('timeline-item', [
-      cB('timeline-item-content', [
-        cE('title', {
-          raw: `
-            margin-top: ${props[createKey('headerMarginTop', size)]};
-            font-size: ${props[createKey('headerFontSize', size)]}
-          `
-        })
-      ])
-    ])
-  ])
-}

src/timeline/styles/_common.js

@@ -1,6 +1,6 @@
 export default {
-  headerMarginTopMedium: 0,
-  headerMarginTopLarge: '-1px',
-  headerFontSizeMedium: '14px',
-  headerFontSizeLarge: '16px'
+  titleMarginMedium: 0,
+  titleMarginLarge: '-2px 0 0 0',
+  titleFontSizeMedium: '14px',
+  titleFontSizeLarge: '16px'
 }

src/timeline/styles/dark.js

@@ -1,12 +1,10 @@
-import create from '../../_styles/utils/create-component-base'
 import sizeVariables from './_common'
-import { baseDark } from '../../_styles/base'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Timeline',
-  theme: 'dark',
-  peer: [baseDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  self (vars) {
     const {
       textColor3Overlay,
       infoColorSuppl,
@@ -21,17 +19,17 @@ export default create({
     } = vars
     return {
       ...sizeVariables,
-      fontSize,
-      headerFontWeight: fontWeightStrong,
-      circleBorderColor: textColor3Overlay,
-      circleBorderColorInfo: infoColorSuppl,
-      circleBorderColorError: errorColorSuppl,
-      circleBorderColorSuccess: successColorSuppl,
-      circleBorderColorWarning: warningColorSuppl,
-      headerTextColor: textColor1Overlay,
+      contentFontSize: fontSize,
+      titleFontWeight: fontWeightStrong,
+      circleBorder: `2px solid ${textColor3Overlay}`,
+      circleBorderInfo: `2px solid ${infoColorSuppl}`,
+      circleBorderError: `2px solid ${errorColorSuppl}`,
+      circleBorderSuccess: `2px solid ${successColorSuppl}`,
+      circleBorderWarning: `2px solid ${warningColorSuppl}`,
+      titleTextColor: textColor1Overlay,
       contentTextColor: textColor2Overlay,
       metaTextColor: textColor3Overlay,
       lineColor: railColorOverlay
     }
   }
-})
+}

src/timeline/styles/light.js

@@ -1,12 +1,10 @@
-import create from '../../_styles/utils/create-component-base'
 import sizeVariables from './_common'
-import { baseLight } from '../../_styles/base'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Timeline',
-  theme: 'light',
-  peer: [baseLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  self (vars) {
     const {
       textColor3,
       infoColor,
@@ -21,17 +19,17 @@ export default create({
     } = vars
     return {
       ...sizeVariables,
-      fontSize,
-      headerFontWeight: fontWeightStrong,
-      circleBorderColor: textColor3,
-      circleBorderColorInfo: infoColor,
-      circleBorderColorError: errorColor,
-      circleBorderColorSuccess: successColor,
-      circleBorderColorWarning: warningColor,
-      headerTextColor: textColor1,
+      contentFontSize: fontSize,
+      titleFontWeight: fontWeightStrong,
+      circleBorder: `2px solid ${textColor3}`,
+      circleBorderInfo: `2px solid ${infoColor}`,
+      circleBorderError: `2px solid ${errorColor}`,
+      circleBorderSuccess: `2px solid ${successColor}`,
+      circleBorderWarning: `2px solid ${warningColor}`,
+      titleTextColor: textColor1,
       contentTextColor: textColor2,
       metaTextColor: textColor3,
       lineColor: railColorOverlay
     }
   }
-})
+}