refactor(gradient-text): new theme

src/gradient-text/src/GradientText.vue

@@ -2,13 +2,12 @@
   <span
     class="n-gradient-text"
     :class="{
-      [`n-gradient-text--${computedType}-type`]: true,
-      [`n-${mergedTheme}-theme`]: mergedTheme
+      [`n-gradient-text--${compatibleType}-type`]: true
     }"
     :style="{
-      ...mergedStyle,
       fontSize: styleFontSize,
-      backgroundImage: styleBackgroundImage
+      backgroundImage: styleBgImage,
+      ...cssVars
     }"
   >
     <slot />
@@ -16,15 +15,16 @@
 </template>
 
 <script>
-import { configurable, themeable, withCssr } from '../../_mixins'
-import { formatLength } from '../../_utils'
-import styles from './styles/index'
+import { defineComponent, computed, onBeforeMount } from 'vue'
+import { useTheme } from '../../_mixins'
+import { createKey, formatLength } from '../../_utils'
+import { gradientTextLight } from '../styles'
+import style from './styles/index.cssr.js'
 
 let houdiniRegistered = false
 
-export default {
+export default defineComponent({
   name: 'GradientText',
-  mixins: [configurable, themeable, withCssr(styles)],
   props: {
     size: {
       type: [String, Number],
@@ -47,18 +47,38 @@ export default {
       default: undefined
     }
   },
-  computed: {
-    computedType () {
-      if (this.type === 'danger') return 'error'
-      return this.type
-    },
-    styleFontSize () {
-      let fontSize = this.size || this.fontSize
+  setup (props) {
+    onBeforeMount(() => {
+      if (!houdiniRegistered) {
+        houdiniRegistered = true
+        if (window?.CSS?.registerProperty) {
+          CSS.registerProperty({
+            name: '--start-stop',
+            syntax: '<color>',
+            inherits: false,
+            initialValue: 'transparent'
+          })
+          CSS.registerProperty({
+            name: '--end-stop',
+            syntax: '<color>',
+            inherits: false,
+            initialValue: 'transparent'
+          })
+        }
+      }
+    })
+    const compatibleTypeRef = computed(() => {
+      const { type } = props
+      if (type === 'danger') return 'error'
+      return type
+    })
+    const styleFontSizeRef = computed(() => {
+      let fontSize = props.size || props.fontSize
       if (fontSize) fontSize = formatLength(fontSize)
       return fontSize || undefined
-    },
-    styleBackgroundImage () {
-      const gradient = this.color || this.gradient
+    })
+    const styleBgImageRef = computed(() => {
+      const gradient = props.color || props.gradient
       if (typeof gradient === 'string') {
         return gradient
       } else if (gradient) {
@@ -68,26 +88,38 @@ export default {
         return `linear-gradient(${deg}deg, ${from} 0%, ${to} 100%)`
       }
       return undefined
-    }
-  },
-  beforeMount () {
-    if (!houdiniRegistered) {
-      houdiniRegistered = true
-      if (window?.CSS?.registerProperty) {
-        CSS.registerProperty({
-          name: '--start-stop',
-          syntax: '<color>',
-          inherits: false,
-          initialValue: 'transparent'
-        })
-        CSS.registerProperty({
-          name: '--end-stop',
-          syntax: '<color>',
-          inherits: false,
-          initialValue: 'transparent'
-        })
-      }
+    })
+    const themeRef = useTheme(
+      'GradientText',
+      'GradientText',
+      style,
+      gradientTextLight,
+      props
+    )
+    return {
+      compatibleType: compatibleTypeRef,
+      styleFontSize: styleFontSizeRef,
+      styleBgImage: styleBgImageRef,
+      cssVars: computed(() => {
+        const { value: type } = compatibleTypeRef
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            rotate,
+            [createKey('colorStart', type)]: colorStart,
+            [createKey('colorEnd', type)]: colorEnd,
+            fontWeight
+          }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--rotate': rotate,
+          '--color-start': colorStart,
+          '--color-end': colorEnd,
+          '--font-weight': fontWeight
+        }
+      })
     }
   }
-}
+})
 </script>

src/gradient-text/src/styles/index.cssr.js

@@ -0,0 +1,20 @@
+import { cB } from '../../../_utils/cssr'
+
+// vars:
+// --font-weight
+// --rotate
+// --bezier
+// --color-start
+// --color-end
+export default cB('gradient-text', `
+  display: inline-block;
+  font-weight: var(--font-weight);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  white-space: nowrap;
+  background-image: linear-gradient(var(--rotate), var(--color-start) 0%, var(--color-end) 100%);
+  transition:
+    --color-start .3s var(--bezier),
+    --color-end .3s var(--bezier);
+`)

src/gradient-text/src/styles/index.js

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

src/gradient-text/src/styles/themed-base.cssr.js

@@ -1,70 +0,0 @@
-import { c, cTB, cM } from '../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      rotate,
-      colorStartPrimary,
-      colorEndPrimary,
-      colorStartInfo,
-      colorEndInfo,
-      colorStartWarning,
-      colorEndWarning,
-      colorStartError,
-      colorEndError,
-      colorStartSuccess,
-      colorEndSuccess,
-      fontWeight
-    } = props.$local
-    const {
-      cubicBezierEaseInOut
-    } = props.$global
-    return cTB('gradient-text', {
-      raw: `
-        display: inline-block;
-        font-weight: ${fontWeight};
-        font-size: inherit;
-        -webkit-background-clip: text;
-        background-clip: text;
-        color: transparent;
-        white-space: nowrap;
-        background-image: linear-gradient(${rotate}, var(--start-stop) 0%, var(--end-stop) 100%);
-        transition:
-          --start-stop .3s ${cubicBezierEaseInOut},
-          --end-stop .3s ${cubicBezierEaseInOut};
-      `
-    },
-    [
-      cM('default-type', {
-        raw: `
-          --start-stop: ${colorStartPrimary};
-          --end-stop: ${colorEndPrimary};
-        `
-      }),
-      cM('success-type', {
-        raw: `
-          --start-stop: ${colorStartSuccess};
-          --end-stop: ${colorEndSuccess};
-        `
-      }),
-      cM('warning-type', {
-        raw: `
-          --start-stop: ${colorStartWarning};
-          --end-stop: ${colorEndWarning};
-        `
-      }),
-      cM('error-type', {
-        raw: `
-          --start-stop: ${colorStartError};
-          --end-stop: ${colorEndError};
-        `
-      }),
-      cM('info-type', {
-        raw: `
-          --start-stop: ${colorStartInfo};
-          --end-stop: ${colorEndInfo};
-        `
-      })
-    ])
-  }
-])

src/gradient-text/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({
-  theme: 'dark',
+export default {
   name: 'GradientText',
-  peer: [baseDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  self (vars) {
     const {
       primaryColor,
       successColor,
@@ -33,4 +31,4 @@ export default create({
       colorEndSuccess: successColorSuppl
     }
   }
-})
+}

src/gradient-text/styles/light.js

@@ -1,12 +1,10 @@
-import create from '../../_styles/utils/create-component-base'
 import { changeColor } from 'seemly'
-import { baseLight } from '../../_styles/base'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
-  theme: 'light',
+export default {
   name: 'GradientText',
-  peer: [baseLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  self (vars) {
     const {
       primaryColor,
       successColor,
@@ -29,4 +27,4 @@ export default create({
       colorEndSuccess: successColor
     }
   }
-})
+}

src/styles.js

@@ -42,8 +42,8 @@ export { baseDark, baseLight } from './_styles/base'
 // export { dynamicTagsDark, dynamicTagsLight } from './dynamic-tags/styles'
 // export { elementDark, elementLight } from './element/styles'
 // export { emptyDark, emptyLight } from './empty/styles'
-export { formDark, formLight } from './form/styles'
-export { gradientTextDark, gradientTextLight } from './gradient-text/styles'
+// export { formDark, formLight } from './form/styles'
+// export { gradientTextDark, gradientTextLight } from './gradient-text/styles'
 export { gridDark, gridLight } from './grid/styles'
 export { iconDark, iconLight } from './icon/styles'
 export { inputDark, inputLight } from './input/styles'

src/styles.new.js

@@ -24,6 +24,8 @@ import { dynamicInputDark } from './dynamic-input/styles'
 import { dynamicTagsDark } from './dynamic-tags/styles'
 import { elementDark } from './element/styles'
 import { emptyDark } from './empty/styles'
+import { formDark } from './form/styles'
+import { gradientTextDark } from './gradient-text/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -51,5 +53,7 @@ export const darkTheme = {
   DynamicInput: dynamicInputDark,
   DynamicTags: dynamicTagsDark,
   Element: elementDark,
-  Empty: emptyDark
+  Empty: emptyDark,
+  Form: formDark,
+  GradientText: gradientTextDark
 }