feat(theme)!: final re-brand (#2727)

Co-authored-by: Divyansh Singh <[email protected]>
Co-authored-by: Lehoczky Zoltán <[email protected]>

Author: 3 people

Diff for: docs/.vitepress/config.ts

@@ -20,7 +20,22 @@ export default defineConfig({
   },
 
   head: [
-    ['meta', { name: 'theme-color', content: '#3c8772' }],
+    ['link', { rel: 'icon', href: '/vitepress-logo-mini.svg' }],
+    ['meta', { name: 'theme-color', content: '#5f67ee' }],
+    ['meta', { name: 'og:type', content: 'website' }],
+    ['meta', { name: 'og:locale', content: 'en' }],
+    ['meta', { name: 'og:site_name', content: 'VitePress' }],
+    [
+      'meta',
+      { name: 'og:image', content: 'https://vitepress.dev/vitepress-og.jpg' }
+    ],
+    [
+      'meta',
+      {
+        name: 'twitter:image',
+        content: 'https://vitepress.dev/vitepress-og.jpg'
+      }
+    ],
     [
       'script',
       {
@@ -33,6 +48,8 @@ export default defineConfig({
   ],
 
   themeConfig: {
+    logo: { src: '/vitepress-logo-mini.svg', width: 24, height: 24 },
+
     nav: nav(),
 
     sidebar: {

Diff for: docs/index.md

@@ -15,6 +15,9 @@ hero:
     - theme: alt
       text: View on GitHub
       link: https://github.com/vuejs/vitepress
+  image:
+    src: /vitepress-logo-large.webp
+    alt: VitePress
 
 features:
   - icon: 📝
@@ -30,3 +33,24 @@ features:
     title: Ship Fast Sites
     details: Fast initial load with static HTML, fast post-load navigation with client-side routing.
 ---
+<style>
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+  --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}
+</style>

Diff for: docs/public/vitepress-logo-large.webp

@@ -16,26 +16,36 @@ defineProps<{
   display: inline-block;
   margin-left: 2px;
   border: 1px solid transparent;
-  border-radius: 10px;
-  padding: 0 8px;
-  line-height: 18px;
+  border-radius: 12px;
+  padding: 0 10px;
+  line-height: 22px;
   font-size: 12px;
   font-weight: 600;
   transform: translateY(-2px);
 }
 
-h1 .VPBadge,
-h2 .VPBadge,
-h3 .VPBadge,
-h4 .VPBadge,
-h5 .VPBadge,
-h6 .VPBadge {
-  vertical-align: text-top;
+.vp-doc h1 > .VPBadge {
+  margin-top: 4px;
+  vertical-align: top;
 }
 
-h2 .VPBadge {
-  border-radius: 11px;
+.vp-doc h2 > .VPBadge {
+  margin-top: 3px;
   line-height: 20px;
+  padding: 0 8px;
+  vertical-align: top;
+}
+
+.vp-doc h3 > .VPBadge {
+  line-height: 20px;
+  vertical-align: middle;
+}
+
+.vp-doc h4 > .VPBadge,
+.vp-doc h5 > .VPBadge,
+.vp-doc h6 > .VPBadge {
+  vertical-align: middle;
+  line-height: 18px;
 }
 
 .VPBadge.info {

Diff for: docs/public/vitepress-logo-mini.svg

@@ -36,19 +36,20 @@ onContentUpdated(() => {
 
 <style scoped>
 .VPDocOutlineDropdown {
-  margin-bottom: 42px;
+  margin-bottom: 48px;
 }
 
 .VPDocOutlineDropdown button {
   display: block;
   font-size: 14px;
   font-weight: 500;
   line-height: 24px;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
   border: 1px solid var(--vp-c-border);
   padding: 4px 12px;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-mute);
   border-radius: 8px;
+  transition: color 0.5s;
 }
 
 .VPDocOutlineDropdown button:hover {
@@ -63,22 +64,22 @@ onContentUpdated(() => {
 .icon {
   display: inline-block;
   vertical-align: middle;
-  margin-left: 2px;
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   fill: currentColor;
 }
 
 :deep(.outline-link) {
-  font-size: 13px;
+  font-size: 14px;
+  font-weight: 400;
 }
 
 .open > .icon {
   transform: rotate(90deg);
 }
 
 .items {
-  margin-top: 10px;
+  margin-top: 12px;
   border-left: 1px solid var(--vp-c-divider);
 }
 </style>

Diff for: docs/public/vitepress-og.jpg

@@ -31,7 +31,7 @@ function onClick({ target: el }: Event) {
 }
 
 .nested {
-  padding-left: 13px;
+  padding-left: 16px;
 }
 
 .outline-link {
@@ -42,7 +42,7 @@ function onClick({ target: el }: Event) {
   overflow: hidden;
   text-overflow: ellipsis;
   transition: color 0.5s;
-  font-weight: 500;
+  font-weight: 400;
 }
 
 .outline-link:hover,

Diff for: src/client/theme-default/components/VPBadge.vue

@@ -58,10 +58,14 @@ function scrollToTop() {
         class="items"
         @click="onItemClick"
       >
-        <a class="top-link" href="#" @click="scrollToTop">
-          {{ theme.returnToTopLabel || 'Return to top' }}
-        </a>
-        <VPDocOutlineItem :headers="headers" />
+        <div class="header">
+          <a class="top-link" href="#" @click="scrollToTop">
+            {{ theme.returnToTopLabel || 'Return to top' }}
+          </a>
+        </div>
+        <div class="outline">
+          <VPDocOutlineItem :headers="headers" />
+        </div>
       </div>
     </Transition>
   </div>
@@ -71,6 +75,7 @@ function scrollToTop() {
 .VPLocalNavOutlineDropdown {
   padding: 12px 20px 11px;
 }
+
 .VPLocalNavOutlineDropdown button {
   display: block;
   font-size: 12px;
@@ -110,26 +115,35 @@ function scrollToTop() {
 
 .items {
   position: absolute;
-  left: 20px;
-  right: 20px;
   top: 64px;
-  background-color: var(--vp-local-nav-bg-color);
-  padding: 4px 10px 16px;
-  border: 1px solid var(--vp-c-divider);
+  right: 16px;
+  left: 16px;
+  display: grid;
+  gap: 1px;
+  border: 1px solid var(--vp-c-border);
   border-radius: 8px;
+  background-color: var(--vp-c-gutter);
   max-height: calc(var(--vp-vh, 100vh) - 86px);
   overflow: hidden auto;
   box-shadow: var(--vp-shadow-3);
 }
 
+.header {
+  background-color: var(--vp-c-bg-soft);
+}
+
 .top-link {
   display: block;
-  color: var(--vp-c-brand);
-  font-size: 13px;
+  padding: 0 16px;
+  line-height: 48px;
+  font-size: 14px;
   font-weight: 500;
-  padding: 6px 0;
-  margin: 0 13px 10px;
-  border-bottom: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-brand);
+}
+
+.outline {
+  padding: 8px 0;
+  background-color: var(--vp-c-bg-soft);
 }
 
 .flyout-enter-active {

Diff for: src/client/theme-default/components/VPDocOutlineDropdown.vue

@@ -84,10 +84,13 @@
 .custom-block a {
   color: inherit;
   font-weight: 600;
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
 }
 
 .custom-block a:hover {
-  text-decoration: underline;
+  opacity: 0.75;
 }
 
 .custom-block code {

Diff for: src/client/theme-default/components/VPDocOutlineItem.vue

@@ -109,13 +109,11 @@
 .vp-doc a {
   font-weight: 500;
   color: var(--vp-c-brand);
-  text-decoration-style: dotted;
-  transition: color 0.25s;
 }
 
 .vp-doc a:hover {
-  /* color: var(--vp-c-brand-dark); */
-  text-decoration: underline;
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
 }
 
 .vp-doc strong {
@@ -219,10 +217,6 @@
   font-weight: 600;
 }
 
-.vp-doc .custom-block a:hover {
-  text-decoration: underline;
-}
-
 .vp-doc .custom-block code {
   font-size: var(--vp-custom-block-code-font-size);
   font-weight: 700;
@@ -271,11 +265,6 @@
 
 .vp-doc a > code {
   color: var(--vp-c-brand);
-  transition: color 0.25s;
-}
-
-.vp-doc a:hover > code {
-  color: var(--vp-c-brand-dark);
 }
 
 .vp-doc div[class*='language-'],