refactor(spin): new theme

src/spin/src/Spin.vue

@@ -1,11 +1,5 @@
 <template>
-  <div
-    v-if="$slots.default"
-    class="n-spin-container"
-    :class="{
-      [`n-${mergedTheme}-theme`]: mergedTheme
-    }"
-  >
+  <div v-if="$slots.default" class="n-spin-container" :style="cssVars">
     <div
       :class="{
         'n-spin-content--spinning': compitableShow
@@ -17,36 +11,31 @@
     <transition name="n-fade-in-transition">
       <n-base-loading
         v-if="compitableShow"
-        :class="{
-          [`n-spin--${size}-size`]: true,
-          [`n-${mergedTheme}-theme`]: mergedTheme
-        }"
         :stroke="stroke"
         :stroke-width="mergedStrokeWidth"
-        :theme="mergedTheme"
+        :theme="'light'"
         class="n-spin"
       />
     </transition>
   </div>
   <n-base-loading
     v-else
-    :class="{
-      [`n-spin--${size}-size`]: size
-    }"
+    :style="cssVars"
     :stroke="stroke"
     :stroke-width="mergedStrokeWidth"
-    :theme="mergedTheme"
+    :theme="'light'"
     class="n-spin"
   />
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useCompitable } from 'vooks'
 import { NBaseLoading } from '../../_base'
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles'
-import { warn } from '../../_utils'
+import { useTheme } from '../../_mixins'
+import { createKey, warn } from '../../_utils'
+import { spinLight } from '../styles'
+import style from './styles/index.cssr.js'
 
 const STROKE_WIDTH = {
   small: 22,
@@ -54,12 +43,11 @@ const STROKE_WIDTH = {
   large: 18
 }
 
-export default {
+export default defineComponent({
   name: 'Spin',
   components: {
     NBaseLoading
   },
-  mixins: [configurable, themeable, withCssr(styles)],
   props: {
     stroke: {
       type: String,
@@ -86,6 +74,7 @@ export default {
     }
   },
   setup (props) {
+    const themeRef = useTheme('Spin', 'Spin', style, spinLight, props)
     return {
       compitableShow: useCompitable(props, ['spinning', 'show']),
       mergedStrokeWidth: computed(() => {
@@ -93,8 +82,21 @@ export default {
         if (strokeWidth !== undefined) return strokeWidth
         const { size } = props
         return STROKE_WIDTH[size]
+      }),
+      cssVars: computed(() => {
+        const { size: spinSize } = props
+        const {
+          common: { cubicBezierEaseInOut },
+          self: { opacitySpinning, color, [createKey('size', spinSize)]: size }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--opacity-spinning': opacitySpinning,
+          '--size': size,
+          '--color': color
+        }
       })
     }
   }
-}
+})
 </script>

src/spin/src/styles/index.cssr.js

@@ -0,0 +1,39 @@
+import { c, cM, cB } from '../../../_utils/cssr'
+import fadeInTransition from '../../../_styles/transitions/fade-in'
+
+// vars:
+// --bezier
+// --opacity-spinning
+// --size
+// --color
+export default c([
+  cB('spin-container', {
+    position: 'relative'
+  }, [
+    cB('spin', `
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    `, [
+      fadeInTransition()
+    ]),
+    cB('spin-content', `
+      opacity: 1;
+      transition: opacity .3s var(--bezier);
+      pointer-events: all;
+    `, [
+      cM('spinning', {
+        pointerEvents: 'none',
+        opacity: 'var(--opacity-spinning)'
+      })
+    ])
+  ]),
+  cB('spin', `
+    display: inline-block;
+    height: var(--size);
+    width: var(--size);
+    font-size: var(--size);
+    color: var(--color);
+  `)
+])

src/spin/src/styles/index.js

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

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

@@ -1,50 +0,0 @@
-import { c, cM, cTB, cB, createKey } from '../../../_utils/cssr'
-import fadeInTransition from '../../../_styles/transitions/fade-in'
-
-export default c([
-  ({ props }) => {
-    const {
-      cubicBezierEaseInOut
-    } = props.$global
-    const {
-      opacitySpinning
-    } = props.$local
-    return [
-      cTB('spin-container', {
-        position: 'relative'
-      }, [
-        cB('spin', {
-          raw: `
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-          `
-        }, [
-          fadeInTransition()
-        ]),
-        cB('spin-content', {
-          raw: `
-            opacity: 1;
-            transition: opacity .3s ${cubicBezierEaseInOut};
-            pointer-events: all;
-          `
-        }, [
-          cM('spinning', {
-            pointerEvents: 'none',
-            opacity: opacitySpinning
-          })
-        ])
-      ]),
-      cTB('spin', {
-        display: 'inline-block'
-      }, ['small', 'medium', 'large'].map(size => {
-        const height = props.$local[createKey('height', size)]
-        return cM(`${size}-size`, {
-          height,
-          width: height
-        })
-      }))
-    ]
-  }
-])

src/spin/styles/dark.js

@@ -1,27 +1,30 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
 import { baseLoadingDark } from '../../_base/loading/styles'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Spin',
-  theme: 'dark',
-  peer: [baseDark, baseLoadingDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  peers: {
+    BaseLoading: baseLoadingDark
+  },
+  self (vars) {
     const {
       opacityDisabled,
       heightTiny,
       heightSmall,
       heightMedium,
       heightLarge,
-      heightHuge
+      heightHuge,
+      primaryColor
     } = vars
     return {
-      heightTiny,
-      heightSmall,
-      heightMedium,
-      heightLarge,
-      heightHuge,
+      sizeTiny: heightTiny,
+      sizeSmall: heightSmall,
+      sizeMedium: heightMedium,
+      sizeLarge: heightLarge,
+      sizeHuge: heightHuge,
+      color: primaryColor,
       opacitySpinning: opacityDisabled
     }
   }
-})
+}

src/spin/styles/light.js

@@ -1,27 +1,30 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
 import { baseLoadingLight } from '../../_base/loading/styles'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Spin',
-  theme: 'light',
-  peer: [baseLight, baseLoadingLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  peers: {
+    BaseLoading: baseLoadingLight
+  },
+  self (vars) {
     const {
       opacityDisabled,
       heightTiny,
       heightSmall,
       heightMedium,
       heightLarge,
-      heightHuge
+      heightHuge,
+      primaryColor
     } = vars
     return {
-      heightTiny,
-      heightSmall,
-      heightMedium,
-      heightLarge,
-      heightHuge,
+      sizeTiny: heightTiny,
+      sizeSmall: heightSmall,
+      sizeMedium: heightMedium,
+      sizeLarge: heightLarge,
+      sizeHuge: heightHuge,
+      color: primaryColor,
       opacitySpinning: opacityDisabled
     }
   }
-})
+}

src/styles.js

@@ -68,7 +68,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { selectDark, selectLight } from './select/styles'
 // export { sliderDark, sliderLight } from './slider/styles'
 // export { spaceDark, spaceLight } from './space/styles'
-export { spinDark, spinLight } from './spin/styles'
+// export { spinDark, spinLight } from './spin/styles'
 export { statisticDark, statisticLight } from './statistic/styles'
 export { stepsDark, stepsLight } from './steps/styles'
 export { switchDark, switchLight } from './switch/styles'

src/styles.new.js

@@ -49,6 +49,7 @@ import { resultDark } from './result/styles'
 import { scrollbarDark } from './scrollbar/styles'
 import { sliderDark } from './slider/styles'
 import { spaceDark } from './space/styles'
+import { spinDark } from './spin/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -101,5 +102,6 @@ export const darkTheme = {
   Result: resultDark,
   Scrollbar: scrollbarDark,
   Slider: sliderDark,
-  Space: spaceDark
+  Space: spaceDark,
+  Spin: spinDark
 }