feat: add theme and style

components/style/motion/fade.ts

@@ -0,0 +1,46 @@
+import type { CSSInterpolation } from '@antd-tiny-vue/cssinjs'
+import { Keyframes } from '@antd-tiny-vue/cssinjs'
+import type { AliasToken } from '../../theme/internal'
+import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'
+import { initMotion } from './motion'
+
+export const fadeIn = new Keyframes('antFadeIn', {
+  '0%': {
+    opacity: 0
+  },
+  '100%': {
+    opacity: 1
+  }
+})
+
+export const fadeOut = new Keyframes('antFadeOut', {
+  '0%': {
+    opacity: 1
+  },
+  '100%': {
+    opacity: 0
+  }
+})
+
+export const initFadeMotion = (token: TokenWithCommonCls<AliasToken>, sameLevel = false): CSSInterpolation => {
+  const { antCls } = token
+  const motionCls = `${antCls}-fade`
+  const sameLevelPrefix = sameLevel ? '&' : ''
+
+  return [
+    initMotion(motionCls, fadeIn, fadeOut, token.motionDurationMid, sameLevel),
+    {
+      [`
+        ${sameLevelPrefix}${motionCls}-enter,
+        ${sameLevelPrefix}${motionCls}-appear
+      `]: {
+        opacity: 0,
+        animationTimingFunction: 'linear'
+      },
+
+      [`${sameLevelPrefix}${motionCls}-leave`]: {
+        animationTimingFunction: 'linear'
+      }
+    }
+  ]
+}