docs: bump to VitePress v1.0.0-rc10 (#3068)

docs/.vitepress/theme/UnoCSSLayout.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { nextTick, provide } from 'vue'
+import HomePage from './components/HomePage.vue'
+
+const { isDark } = useData()
+
+function enableTransitions() {
+  return 'startViewTransition' in document
+      && window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+}
+
+provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
+  if (!enableTransitions()) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const clipPath = [
+    `circle(0px at ${x}px ${y}px)`,
+    `circle(${Math.hypot(
+        Math.max(x, innerWidth - x),
+        Math.max(y, innerHeight - y),
+    )}px at ${x}px ${y}px)`,
+  ]
+
+  await document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  }).ready
+
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    {
+      duration: 300,
+      easing: 'ease-in',
+      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
+    },
+  )
+})
+</script>
+
+<template>
+  <DefaultTheme.Layout>
+    <template #home-features-after>
+      <HomePage />
+    </template>
+  </DefaultTheme.Layout>
+</template>

docs/.vitepress/theme/index.ts

@@ -1,21 +1,19 @@
 // https://vitepress.dev/guide/custom-theme
 import { h, watch } from 'vue'
 import Theme from 'vitepress/theme'
+import UnoCSSLayout from './UnoCSSLayout.vue'
+
 import './rainbow.css'
 import './vars.css'
 import './overrides.css'
 import 'uno.css'
 
-import HomePage from './components/HomePage.vue'
-
 let homePageStyle: HTMLStyleElement | undefined
 
 export default {
   ...Theme,
   Layout: () => {
-    return h(Theme.Layout, null, {
-      'home-features-after': () => h(HomePage),
-    })
+    return h(UnoCSSLayout)
   },
   enhanceApp({ router }) {
     if (typeof window === 'undefined')

docs/.vitepress/theme/overrides.css

@@ -8,7 +8,7 @@ table {
 }
 
 .custom-block.tip .custom-block-title {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .VPHero .image-bg {
@@ -76,3 +76,20 @@ table {
 .VPLocalSearchBox .excerpt-wrapper {
   margin-top: 4px;
 }
+
+/* dark/light radial transition */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}

docs/.vitepress/theme/vars.css

@@ -19,7 +19,7 @@
   --vp-code-tab-hover-text-color: var(--vp-c-text-1);
   --vp-code-copy-code-active-text: var(--vp-c-text-2);
   --vp-c-text-dark-3: rgba(56, 56, 56, 0.8);
-  --vp-c-brand-lightest: var(--vp-c-brand);
+  --vp-c-brand-lightest: var(--vp-c-brand-1);
 
   --vp-c-highlight-bg: var(--vp-c-brand-light);
   --vp-c-highlight-text: var(--vp-c-bg);
@@ -28,11 +28,6 @@
 .dark {
   --vp-code-block-bg: rgba(0,0,0,0.2);
   --vp-c-text-code: #c0cec0;
-  --vp-code-tab-text-color: var(--vp-c-text-dark-2);
-  --vp-code-tab-active-text-color: var(--vp-c-text-dark-1);
-  --vp-code-tab-hover-text-color: var(--vp-c-text-dark-1);
-  --vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
-  --vp-c-text-dark-3: var(--vp-c-text-dark-2);
 }
 
 
@@ -43,7 +38,7 @@
 :root {
   --vp-button-brand-border: var(--vp-c-brand-light);
   --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-bg: var(--vp-c-brand);
+  --vp-button-brand-bg: var(--vp-c-brand-1);
   --vp-button-brand-hover-border: var(--vp-c-brand-light);
   --vp-button-brand-hover-text: var(--vp-c-white);
   --vp-button-brand-hover-bg: var(--vp-c-brand-light);
@@ -60,12 +55,12 @@
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(
     120deg,
-    var(--vp-c-brand) 30%,
+    var(--vp-c-brand-1) 30%,
     var(--vp-c-brand-next)
   );
   --vp-home-hero-image-background-image: linear-gradient(
     -45deg,
-    var(--vp-c-brand) 30%,
+    var(--vp-c-brand-1) 30%,
     var(--vp-c-brand-next)
   );
   --vp-home-hero-image-filter: blur(80px);
@@ -94,13 +89,13 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-custom-block-tip-border: var(--vp-c-brand);
+  --vp-custom-block-tip-border: var(--vp-c-brand-1);
   --vp-custom-block-tip-text: var(--vp-c-brand-darker);
   --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
 }
 
 .dark {
-  --vp-custom-block-tip-border: var(--vp-c-brand);
+  --vp-custom-block-tip-border: var(--vp-c-brand-1);
   --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
   --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
 }
@@ -110,5 +105,5 @@
  * -------------------------------------------------------------------------- */
 
 .DocSearch {
-  --docsearch-primary-color: var(--vp-c-brand) !important;
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }

docs/components.d.ts

@@ -9,8 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     ContentExamples: typeof import('./.vitepress/theme/components/ContentExamples.vue')['default']
     ContentIntegrations: typeof import('./.vitepress/theme/components/ContentIntegrations.vue')['default']
-    ContentPlaygrounds: typeof import('./.vitepress/theme/components/ContentPlaygrounds.vue')['default']
-    copy: typeof import('./.vitepress/theme/components/ContentIntegrations copy.vue')['default']
     HomePage: typeof import('./.vitepress/theme/components/HomePage.vue')['default']
     LinkGrid: typeof import('./.vitepress/theme/components/LinkGrid.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

docs/package.json

@@ -16,6 +16,6 @@
     "@iconify-json/vscode-icons": "^1.1.28",
     "ofetch": "^1.3.3",
     "unocss": "workspace:*",
-    "vitepress": "1.0.0-rc.4"
+    "vitepress": "1.0.0-rc.10"
   }
 }