feat: add theme and style

components/style/motion/collapse.ts

@@ -0,0 +1,24 @@
+import type { AliasToken, GenerateStyle } from '../../theme/internal'
+import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'
+
+const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>> = token => ({
+  [token.componentCls]: {
+    // For common/openAnimation
+    [`${token.antCls}-motion-collapse-legacy`]: {
+      overflow: 'hidden',
+
+      '&-active': {
+        transition: `height ${token.motionDurationMid} ${token.motionEaseInOut},
+        opacity ${token.motionDurationMid} ${token.motionEaseInOut} !important`
+      }
+    },
+
+    [`${token.antCls}-motion-collapse`]: {
+      overflow: 'hidden',
+      transition: `height ${token.motionDurationMid} ${token.motionEaseInOut},
+        opacity ${token.motionDurationMid} ${token.motionEaseInOut} !important`
+    }
+  }
+})
+
+export default genCollapseMotion

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'
+      }
+    }
+  ]
+}

components/style/motion/index.ts

@@ -0,0 +1,44 @@
+import { fadeIn, fadeOut, initFadeMotion } from './fade'
+import { initMoveMotion, moveDownIn, moveDownOut, moveLeftIn, moveLeftOut, moveRightIn, moveRightOut, moveUpIn, moveUpOut } from './move'
+
+import { initSlideMotion, slideDownIn, slideDownOut, slideLeftIn, slideLeftOut, slideRightIn, slideRightOut, slideUpIn, slideUpOut } from './slide'
+import { initZoomMotion, zoomBigIn, zoomBigOut, zoomDownIn, zoomDownOut, zoomIn, zoomLeftIn, zoomLeftOut, zoomOut, zoomRightIn, zoomRightOut, zoomUpIn, zoomUpOut } from './zoom'
+import genCollapseMotion from './collapse'
+
+export {
+  initSlideMotion,
+  slideUpIn,
+  slideUpOut,
+  slideDownIn,
+  slideDownOut,
+  slideLeftIn,
+  slideLeftOut,
+  slideRightIn,
+  slideRightOut,
+  zoomOut,
+  zoomIn,
+  zoomBigIn,
+  zoomLeftOut,
+  zoomBigOut,
+  zoomLeftIn,
+  zoomRightIn,
+  zoomUpIn,
+  zoomRightOut,
+  zoomUpOut,
+  zoomDownIn,
+  zoomDownOut,
+  initZoomMotion,
+  fadeIn,
+  fadeOut,
+  initFadeMotion,
+  moveRightOut,
+  moveRightIn,
+  moveLeftOut,
+  moveLeftIn,
+  moveDownOut,
+  moveDownIn,
+  moveUpIn,
+  moveUpOut,
+  initMoveMotion,
+  genCollapseMotion
+}

components/style/motion/motion.ts

@@ -0,0 +1,46 @@
+/* eslint-disable import/prefer-default-export */
+import type { CSSObject, Keyframes } from '@antd-tiny-vue/cssinjs'
+
+const initMotionCommon = (duration: string): CSSObject => ({
+  animationDuration: duration,
+  animationFillMode: 'both'
+})
+
+// FIXME: origin less code seems same as initMotionCommon. Maybe we can safe remove
+const initMotionCommonLeave = (duration: string): CSSObject => ({
+  animationDuration: duration,
+  animationFillMode: 'both'
+})
+
+export const initMotion = (motionCls: string, inKeyframes: Keyframes, outKeyframes: Keyframes, duration: string, sameLevel = false): CSSObject => {
+  const sameLevelPrefix = sameLevel ? '&' : ''
+
+  return {
+    [`
+      ${sameLevelPrefix}${motionCls}-enter,
+      ${sameLevelPrefix}${motionCls}-appear
+    `]: {
+      ...initMotionCommon(duration),
+      animationPlayState: 'paused'
+    },
+
+    [`${sameLevelPrefix}${motionCls}-leave`]: {
+      ...initMotionCommonLeave(duration),
+      animationPlayState: 'paused'
+    },
+
+    [`
+      ${sameLevelPrefix}${motionCls}-enter${motionCls}-enter-active,
+      ${sameLevelPrefix}${motionCls}-appear${motionCls}-appear-active
+    `]: {
+      animationName: inKeyframes,
+      animationPlayState: 'running'
+    },
+
+    [`${sameLevelPrefix}${motionCls}-leave${motionCls}-leave-active`]: {
+      animationName: outKeyframes,
+      animationPlayState: 'running',
+      pointerEvents: 'none'
+    }
+  }
+}

components/style/motion/move.ts

@@ -0,0 +1,160 @@
+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 moveDownIn = new Keyframes('antMoveDownIn', {
+  '0%': {
+    transform: 'translate3d(0, 100%, 0)',
+    transformOrigin: '0 0',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'translate3d(0, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 1
+  }
+})
+
+export const moveDownOut = new Keyframes('antMoveDownOut', {
+  '0%': {
+    transform: 'translate3d(0, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 1
+  },
+
+  '100%': {
+    transform: 'translate3d(0, 100%, 0)',
+    transformOrigin: '0 0',
+    opacity: 0
+  }
+})
+
+export const moveLeftIn = new Keyframes('antMoveLeftIn', {
+  '0%': {
+    transform: 'translate3d(-100%, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'translate3d(0, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 1
+  }
+})
+
+export const moveLeftOut = new Keyframes('antMoveLeftOut', {
+  '0%': {
+    transform: 'translate3d(0, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 1
+  },
+
+  '100%': {
+    transform: 'translate3d(-100%, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 0
+  }
+})
+
+export const moveRightIn = new Keyframes('antMoveRightIn', {
+  '0%': {
+    transform: 'translate3d(100%, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'translate3d(0, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 1
+  }
+})
+
+export const moveRightOut = new Keyframes('antMoveRightOut', {
+  '0%': {
+    transform: 'translate3d(0, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 1
+  },
+
+  '100%': {
+    transform: 'translate3d(100%, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 0
+  }
+})
+
+export const moveUpIn = new Keyframes('antMoveUpIn', {
+  '0%': {
+    transform: 'translate3d(0, -100%, 0)',
+    transformOrigin: '0 0',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'translate3d(0, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 1
+  }
+})
+
+export const moveUpOut = new Keyframes('antMoveUpOut', {
+  '0%': {
+    transform: 'translate3d(0, 0, 0)',
+    transformOrigin: '0 0',
+    opacity: 1
+  },
+
+  '100%': {
+    transform: 'translate3d(0, -100%, 0)',
+    transformOrigin: '0 0',
+    opacity: 0
+  }
+})
+
+type MoveMotionTypes = 'move-up' | 'move-down' | 'move-left' | 'move-right'
+const moveMotion: Record<MoveMotionTypes, { inKeyframes: Keyframes; outKeyframes: Keyframes }> = {
+  'move-up': {
+    inKeyframes: moveUpIn,
+    outKeyframes: moveUpOut
+  },
+  'move-down': {
+    inKeyframes: moveDownIn,
+    outKeyframes: moveDownOut
+  },
+  'move-left': {
+    inKeyframes: moveLeftIn,
+    outKeyframes: moveLeftOut
+  },
+  'move-right': {
+    inKeyframes: moveRightIn,
+    outKeyframes: moveRightOut
+  }
+}
+
+export const initMoveMotion = (token: TokenWithCommonCls<AliasToken>, motionName: MoveMotionTypes): CSSInterpolation => {
+  const { antCls } = token
+  const motionCls = `${antCls}-${motionName}`
+  const { inKeyframes, outKeyframes } = moveMotion[motionName]
+
+  return [
+    initMotion(motionCls, inKeyframes, outKeyframes, token.motionDurationMid),
+    {
+      [`
+        ${motionCls}-enter,
+        ${motionCls}-appear
+      `]: {
+        opacity: 0,
+        animationTimingFunction: token.motionEaseOutCirc
+      },
+
+      [`${motionCls}-leave`]: {
+        animationTimingFunction: token.motionEaseInOutCirc
+      }
+    }
+  ]
+}

components/style/motion/slide.ts

@@ -0,0 +1,163 @@
+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 slideUpIn = new Keyframes('antSlideUpIn', {
+  '0%': {
+    transform: 'scaleY(0.8)',
+    transformOrigin: '0% 0%',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'scaleY(1)',
+    transformOrigin: '0% 0%',
+    opacity: 1
+  }
+})
+
+export const slideUpOut = new Keyframes('antSlideUpOut', {
+  '0%': {
+    transform: 'scaleY(1)',
+    transformOrigin: '0% 0%',
+    opacity: 1
+  },
+
+  '100%': {
+    transform: 'scaleY(0.8)',
+    transformOrigin: '0% 0%',
+    opacity: 0
+  }
+})
+
+export const slideDownIn = new Keyframes('antSlideDownIn', {
+  '0%': {
+    transform: 'scaleY(0.8)',
+    transformOrigin: '100% 100%',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'scaleY(1)',
+    transformOrigin: '100% 100%',
+    opacity: 1
+  }
+})
+
+export const slideDownOut = new Keyframes('antSlideDownOut', {
+  '0%': {
+    transform: 'scaleY(1)',
+    transformOrigin: '100% 100%',
+    opacity: 1
+  },
+
+  '100%': {
+    transform: 'scaleY(0.8)',
+    transformOrigin: '100% 100%',
+    opacity: 0
+  }
+})
+
+export const slideLeftIn = new Keyframes('antSlideLeftIn', {
+  '0%': {
+    transform: 'scaleX(0.8)',
+    transformOrigin: '0% 0%',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'scaleX(1)',
+    transformOrigin: '0% 0%',
+    opacity: 1
+  }
+})
+
+export const slideLeftOut = new Keyframes('antSlideLeftOut', {
+  '0%': {
+    transform: 'scaleX(1)',
+    transformOrigin: '0% 0%',
+    opacity: 1
+  },
+
+  '100%': {
+    transform: 'scaleX(0.8)',
+    transformOrigin: '0% 0%',
+    opacity: 0
+  }
+})
+
+export const slideRightIn = new Keyframes('antSlideRightIn', {
+  '0%': {
+    transform: 'scaleX(0.8)',
+    transformOrigin: '100% 0%',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'scaleX(1)',
+    transformOrigin: '100% 0%',
+    opacity: 1
+  }
+})
+
+export const slideRightOut = new Keyframes('antSlideRightOut', {
+  '0%': {
+    transform: 'scaleX(1)',
+    transformOrigin: '100% 0%',
+    opacity: 1
+  },
+
+  '100%': {
+    transform: 'scaleX(0.8)',
+    transformOrigin: '100% 0%',
+    opacity: 0
+  }
+})
+
+type SlideMotionTypes = 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right'
+const slideMotion: Record<SlideMotionTypes, { inKeyframes: Keyframes; outKeyframes: Keyframes }> = {
+  'slide-up': {
+    inKeyframes: slideUpIn,
+    outKeyframes: slideUpOut
+  },
+  'slide-down': {
+    inKeyframes: slideDownIn,
+    outKeyframes: slideDownOut
+  },
+  'slide-left': {
+    inKeyframes: slideLeftIn,
+    outKeyframes: slideLeftOut
+  },
+  'slide-right': {
+    inKeyframes: slideRightIn,
+    outKeyframes: slideRightOut
+  }
+}
+
+export const initSlideMotion = (token: TokenWithCommonCls<AliasToken>, motionName: SlideMotionTypes): CSSInterpolation => {
+  const { antCls } = token
+  const motionCls = `${antCls}-${motionName}`
+  const { inKeyframes, outKeyframes } = slideMotion[motionName]
+
+  return [
+    initMotion(motionCls, inKeyframes, outKeyframes, token.motionDurationMid),
+
+    {
+      [`
+      ${motionCls}-enter,
+      ${motionCls}-appear
+    `]: {
+        transform: 'scale(0)',
+        transformOrigin: '0% 0%',
+        opacity: 0,
+        animationTimingFunction: token.motionEaseOutQuint
+      },
+
+      [`${motionCls}-leave`]: {
+        animationTimingFunction: token.motionEaseInQuint
+      }
+    }
+  ]
+}

components/style/motion/zoom.ts

@@ -0,0 +1,215 @@
+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 zoomIn = new Keyframes('antZoomIn', {
+  '0%': {
+    transform: 'scale(0.2)',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    opacity: 1
+  }
+})
+
+export const zoomOut = new Keyframes('antZoomOut', {
+  '0%': {
+    transform: 'scale(1)'
+  },
+
+  '100%': {
+    transform: 'scale(0.2)',
+    opacity: 0
+  }
+})
+
+export const zoomBigIn = new Keyframes('antZoomBigIn', {
+  '0%': {
+    transform: 'scale(0.8)',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    opacity: 1
+  }
+})
+
+export const zoomBigOut = new Keyframes('antZoomBigOut', {
+  '0%': {
+    transform: 'scale(1)'
+  },
+
+  '100%': {
+    transform: 'scale(0.8)',
+    opacity: 0
+  }
+})
+
+export const zoomUpIn = new Keyframes('antZoomUpIn', {
+  '0%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '50% 0%',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    transformOrigin: '50% 0%'
+  }
+})
+
+export const zoomUpOut = new Keyframes('antZoomUpOut', {
+  '0%': {
+    transform: 'scale(1)',
+    transformOrigin: '50% 0%'
+  },
+
+  '100%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '50% 0%',
+    opacity: 0
+  }
+})
+
+export const zoomLeftIn = new Keyframes('antZoomLeftIn', {
+  '0%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '0% 50%',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    transformOrigin: '0% 50%'
+  }
+})
+
+export const zoomLeftOut = new Keyframes('antZoomLeftOut', {
+  '0%': {
+    transform: 'scale(1)',
+    transformOrigin: '0% 50%'
+  },
+
+  '100%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '0% 50%',
+    opacity: 0
+  }
+})
+
+export const zoomRightIn = new Keyframes('antZoomRightIn', {
+  '0%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '100% 50%',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    transformOrigin: '100% 50%'
+  }
+})
+
+export const zoomRightOut = new Keyframes('antZoomRightOut', {
+  '0%': {
+    transform: 'scale(1)',
+    transformOrigin: '100% 50%'
+  },
+
+  '100%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '100% 50%',
+    opacity: 0
+  }
+})
+
+export const zoomDownIn = new Keyframes('antZoomDownIn', {
+  '0%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '50% 100%',
+    opacity: 0
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    transformOrigin: '50% 100%'
+  }
+})
+
+export const zoomDownOut = new Keyframes('antZoomDownOut', {
+  '0%': {
+    transform: 'scale(1)',
+    transformOrigin: '50% 100%'
+  },
+
+  '100%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '50% 100%',
+    opacity: 0
+  }
+})
+
+type ZoomMotionTypes = 'zoom' | 'zoom-big' | 'zoom-big-fast' | 'zoom-left' | 'zoom-right' | 'zoom-up' | 'zoom-down'
+const zoomMotion: Record<ZoomMotionTypes, { inKeyframes: Keyframes; outKeyframes: Keyframes }> = {
+  zoom: {
+    inKeyframes: zoomIn,
+    outKeyframes: zoomOut
+  },
+  'zoom-big': {
+    inKeyframes: zoomBigIn,
+    outKeyframes: zoomBigOut
+  },
+  'zoom-big-fast': {
+    inKeyframes: zoomBigIn,
+    outKeyframes: zoomBigOut
+  },
+  'zoom-left': {
+    inKeyframes: zoomLeftIn,
+    outKeyframes: zoomLeftOut
+  },
+  'zoom-right': {
+    inKeyframes: zoomRightIn,
+    outKeyframes: zoomRightOut
+  },
+  'zoom-up': {
+    inKeyframes: zoomUpIn,
+    outKeyframes: zoomUpOut
+  },
+  'zoom-down': {
+    inKeyframes: zoomDownIn,
+    outKeyframes: zoomDownOut
+  }
+}
+
+export const initZoomMotion = (token: TokenWithCommonCls<AliasToken>, motionName: ZoomMotionTypes): CSSInterpolation => {
+  const { antCls } = token
+  const motionCls = `${antCls}-${motionName}`
+  const { inKeyframes, outKeyframes } = zoomMotion[motionName]
+
+  return [
+    initMotion(motionCls, inKeyframes, outKeyframes, motionName === 'zoom-big-fast' ? token.motionDurationFast : token.motionDurationMid),
+    {
+      [`
+        ${motionCls}-enter,
+        ${motionCls}-appear
+      `]: {
+        transform: 'scale(0)',
+        opacity: 0,
+        animationTimingFunction: token.motionEaseOutCirc,
+
+        '&-prepare': {
+          transform: 'none'
+        }
+      },
+
+      [`${motionCls}-leave`]: {
+        animationTimingFunction: token.motionEaseInOutCirc
+      }
+    }
+  ]
+}