chore: bump version

packages/theme-transition/README.md

@@ -0,0 +1,62 @@
+# theme-transition
+
+## Usage
+
+```bash
+pnpm add theme-transition
+```
+
+## Import Js
+
+```js
+import { useToggleDark } from 'theme-transition'
+
+const { toggleDark } = useToggleDark({
+  getDarkValue: () => {
+    return isDark.value
+  },
+  toggle: () => {
+    isDark.value = !isDark.value
+  },
+  // viewTransition: {
+  //   after: () => {
+  //     return nextTick()
+  //   },
+  // },
+})
+
+toggleDark(MouseEvent)
+```
+
+## Import Style
+
+### Scss
+
+```scss
+@use 'theme-transition/scss/mixins.scss' as M;
+// pass your theme css selector
+@include M.theme-transition('[data-theme="dark"]');
+```
+
+### Tailwindcss Plugin
+
+```ts
+import type { Config } from 'tailwindcss'
+import { themeTransitionPlugin } from 'theme-transition/tailwindcss'
+
+export default <Config> {
+  plugins: [themeTransitionPlugin()],
+}
+```
+
+### Css
+
+```css
+@import 'theme-transition/css';
+```
+
+```js
+import 'theme-transition/css'
+```
+
+> css only `.dark` selector, so use scss or tailwindcss plugin

packages/theme-transition/package.json

@@ -1,7 +1,7 @@
 {
   "name": "theme-transition",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "theme-transition css,scss and tailwindcss plugin",
   "author": "ice breaker <[email protected]>",
   "license": "MIT",
@@ -20,7 +20,7 @@
   "sideEffects": false,
   "exports": {
     ".": "./src/index.ts",
-    "./tailwindcss": "./src/tailwindcss",
+    "./tailwindcss": "./src/tailwindcss.ts",
     "./scss": "./scss/index.scss",
     "./scss/mixins": "./scss/mixins.scss",
     "./scss/*": "./scss/*",

packages/theme-transition/src/index.ts

@@ -18,14 +18,18 @@ export interface UseToggleDarkOptions {
     after?: () => any
     callback?: () => any
   }
+  duration?: number
+
+  easing?: string
+
 }
 
 export function useToggleDark(options: UseToggleDarkOptions) {
   const isAppearanceTransition = typeof document !== 'undefined'
     // @ts-expect-error: Transition API
     && document.startViewTransition
     && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
-  const { toggle, viewTransition, getDarkValue } = options
+  const { toggle, viewTransition, getDarkValue, duration = 400, easing = 'ease-in' } = Object.assign({}, options)
   async function toggleDark(event?: MouseEvent) {
     if (!isAppearanceTransition || !event) {
       await toggle?.()
@@ -34,6 +38,7 @@ export function useToggleDark(options: UseToggleDarkOptions) {
 
     const x = event.clientX
     const y = event.clientY
+
     const endRadius = Math.hypot(
       Math.max(x, innerWidth - x),
       Math.max(y, innerHeight - y),
@@ -52,15 +57,16 @@ export function useToggleDark(options: UseToggleDarkOptions) {
         `circle(${endRadius}px at ${x}px ${y}px)`,
       ]
       const isDark = getDarkValue?.()
+
       document.documentElement.animate(
         {
           clipPath: isDark
             ? [...clipPath].reverse()
             : clipPath,
         },
         {
-          duration: 400,
-          easing: 'ease-in',
+          duration,
+          easing,
           pseudoElement: isDark
             ? '::view-transition-old(root)'
             : '::view-transition-new(root)',

website/docs/quick-start/frameworks/native.md

@@ -1,8 +1,10 @@
 # 原生开发(打包方案)
 
-> 注意！这是原生开发(打包方案)，假如你需要纯原生方案，请查看 [快速开始(纯原生)](/docs/quick-start/native/install)
+:::warning
+注意！这是原生开发(**打包方案**)，假如你需要纯原生方案，请查看 [快速开始(纯原生)](/docs/quick-start/native/install)
+:::
 
-由于原生小程序没有 `webpack/vite/gulp` 工具链，所以我们要添加这一套机制，来整个前端社区接轨，以此来实现更强大的功能。
+> 由于原生小程序没有 `webpack/vite/gulp` 工具链暴露出来，所以我们要添加这一套机制，来整个前端社区接轨，以此来实现更强大的功能。
 
 :::tip
 给原生小程序加入编译时这块 `webpack/vite/gulp` 等等工具，思路都是一样的，然而实现起来比较复杂，损耗精力，在此不提及原理。

website/src/css/custom.scss

@@ -1,8 +1,9 @@
-@use 'theme-transition/scss/mixins.scss' as M;
+// @use 'theme-transition/scss/mixins.scss' as M;
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@include M.theme-transition('[data-theme="dark"]');
+
+// @include M.theme-transition('[data-theme="dark"]');
 
 @layer components {
   .btn {

website/src/pages/index.tsx

@@ -66,7 +66,7 @@ function HomepageHeader() {
 
         <div className="mt-8 flex flex-col justify-around space-y-8 md:flex-row md:space-y-0">
           <div className="text-center">
-            <h3>不仅仅是 webpack</h3>
+            <h3>不仅仅是 webpack/vite</h3>
             <img src={PluginsImg}></img>
             {/* <Plugins></Plugins> */}
           </div>

website/src/theme/_ColorModeToggle.tsx

@@ -0,0 +1,47 @@
+import type { Props } from '@theme/ColorModeToggle'
+import OriginalToggle from '@theme-original/ColorModeToggle'
+import { useToggleDark } from 'theme-transition'
+
+function Toggler(props: Props) {
+  const { toggleDark } = useToggleDark({
+    getDarkValue() {
+      return props.value === 'dark'
+    },
+    toggle() {
+      if (props.value === 'dark') {
+        props.onChange('light')
+      }
+      else {
+        props.onChange('dark')
+      }
+    },
+    viewTransition: {
+      after() {
+        return new Promise((r) => {
+          setTimeout(() => {
+            r(undefined)
+          }, 0)
+        })
+      },
+    },
+    duration: 4000,
+  })
+  return (
+    <div onClick={(e) => {
+      toggleDark(e as unknown as MouseEvent)
+    }}
+    >
+      <OriginalToggle
+        {...props}
+        onChange={() => {
+          // props.onChange(colorMode)
+          // toggleDark()
+        }}
+      >
+      </OriginalToggle>
+    </div>
+
+  )
+}
+
+export default Toggler

website/tailwind.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from 'tailwindcss'
+import { themeTransitionPlugin } from 'theme-transition/tailwindcss'
+
+export default <Config> {
+  content: ['./src/**/*.{js,jsx,ts,tsx}', './docusaurus.config.ts', 'docs/**/*.{md,mdx}'],
+  darkMode: ['selector', '[data-theme="dark"]'],
+  theme: {
+    extend: {},
+  },
+  plugins: [themeTransitionPlugin()],
+  corePlugins: {
+    preflight: false,
+  },
+}