From 471f00a68d1e3d8d925ab996f462adaf4f1261a0 Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Tue, 17 Jan 2023 22:05:18 +0900
Subject: [PATCH] feat(theme): refine overall styles (#1049) (#1790)

close #1049
---
 .../theme-default/components/VPBackdrop.vue   |   2 +-
 .../theme-default/components/VPButton.vue     |   2 +-
 .../theme-default/components/VPCarbonAds.vue  |  23 +-
 src/client/theme-default/components/VPDoc.vue |   6 +-
 .../components/VPDocAsideOutline.vue          |   2 +-
 .../theme-default/components/VPDocFooter.vue  |   8 +-
 .../theme-default/components/VPFeature.vue    |  17 +-
 .../theme-default/components/VPFlyout.vue     |  24 +-
 .../theme-default/components/VPFooter.vue     |   2 +-
 .../components/VPHomeSponsors.vue             |   2 +-
 .../theme-default/components/VPLocalNav.vue   |   6 +-
 .../theme-default/components/VPMenu.vue       |  20 +-
 .../theme-default/components/VPMenuGroup.vue  |   4 +-
 .../theme-default/components/VPMenuLink.vue   |   8 +-
 src/client/theme-default/components/VPNav.vue |  37 +-
 .../theme-default/components/VPNavBar.vue     | 118 ++++--
 .../components/VPNavBarMenuLink.vue           |   8 +-
 .../components/VPNavBarSearch.vue             |   4 +-
 .../components/VPNavBarTitle.vue              |  19 +-
 .../theme-default/components/VPNavScreen.vue  |   4 +-
 .../components/VPNavScreenAppearance.vue      |   2 -
 .../components/VPNavScreenMenuGroup.vue       |   2 +-
 .../components/VPNavScreenMenuGroupLink.vue   |   4 +-
 .../components/VPNavScreenMenuLink.vue        |   4 +-
 .../theme-default/components/VPSidebar.vue    |   8 +-
 .../theme-default/components/VPSwitch.vue     |  12 +-
 .../components/VPTeamMembersItem.vue          |   6 +-
 .../components/VPTeamPageSection.vue          |   2 +-
 .../styles/components/custom-block.css        |   2 +-
 .../styles/components/vp-doc.css              |  20 +-
 .../styles/components/vp-sponsor.css          |   6 +-
 src/client/theme-default/styles/vars.css      | 369 ++++++++----------
 32 files changed, 358 insertions(+), 395 deletions(-)

diff --git a/src/client/theme-default/components/VPBackdrop.vue b/src/client/theme-default/components/VPBackdrop.vue
index 1f72a8583cdd..4516996bdd40 100644
--- a/src/client/theme-default/components/VPBackdrop.vue
+++ b/src/client/theme-default/components/VPBackdrop.vue
@@ -18,7 +18,7 @@ defineProps<{
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-backdrop);
-  background: var(--vp-c-bg-backdrop);
+  background: var(--vp-backdrop-bg-color);
   transition: opacity 0.5s;
 }
 
diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
index 4a1750ccb949..57872a8b15e3 100644
--- a/src/client/theme-default/components/VPButton.vue
+++ b/src/client/theme-default/components/VPButton.vue
@@ -45,7 +45,7 @@ const component = computed(() => {
   display: inline-block;
   border: 1px solid transparent;
   text-align: center;
-  font-weight: 500;
+  font-weight: 600;
   white-space: nowrap;
   transition: color 0.25s, border-color 0.25s, background-color 0.25s;
 }
diff --git a/src/client/theme-default/components/VPCarbonAds.vue b/src/client/theme-default/components/VPCarbonAds.vue
index b82b9e7fce06..8b0805e83755 100644
--- a/src/client/theme-default/components/VPCarbonAds.vue
+++ b/src/client/theme-default/components/VPCarbonAds.vue
@@ -47,7 +47,7 @@ if (carbonOptions) {
   <div class="VPCarbonAds" ref="container" />
 </template>
 
-<style>
+<style scoped>
 .VPCarbonAds {
   display: flex;
   justify-content: center;
@@ -59,38 +59,37 @@ if (carbonOptions) {
   line-height: 18px;
   font-size: 12px;
   font-weight: 500;
-  background-color: var(--vp-c-bg-soft);
-  transition: color 0.5s, background-color 0.5s;
+  background-color: var(--vp-carbon-ads-bg-color);
 }
 
-.VPCarbonAds img {
+.VPCarbonAds :deep(img) {
   margin: 0 auto;
   border-radius: 6px;
 }
 
-.VPCarbonAds .carbon-text {
+.VPCarbonAds :deep(.carbon-text) {
   display: block;
   margin: 0 auto;
   padding-top: 12px;
-  color: var(--vp-c-text-1);
+  color: var(--vp-carbon-ads-text-color);
   transition: color 0.25s;
 }
 
-.VPCarbonAds .carbon-text:hover {
-  color: var(--vp-c-brand);
+.VPCarbonAds :deep(.carbon-text:hover) {
+  color: var(--vp-carbon-ads-hover-text-color);
 }
 
-.VPCarbonAds .carbon-poweredby {
+.VPCarbonAds :deep(.carbon-poweredby) {
   display: block;
   padding-top: 6px;
   font-size: 11px;
   font-weight: 500;
-  color: var(--vp-c-text-2);
+  color: var(--vp-carbon-ads-poweredby-color);
   text-transform: uppercase;
   transition: color 0.25s;
 }
 
-.VPCarbonAds .carbon-poweredby:hover {
-  color: var(--vp-c-text-1);
+.VPCarbonAds :deep(.carbon-poweredby:hover) {
+  color: var(--vp-carbon-ads-hover-poweredby-color);
 }
 </style>
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index 89d189127266..bcec9e6a81e3 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -120,8 +120,8 @@ provide('onContentUpdated', onContentUpdated)
 .aside-container {
   position: sticky;
   top: 0;
-  margin-top: calc((var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px)) * -1 - 32px);
-  padding-top: calc(var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px);
+  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1 - 32px);
+  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px);
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -144,7 +144,7 @@ provide('onContentUpdated', onContentUpdated)
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px));
+  min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px));
   padding-bottom: 32px;
 }
 
diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue
index c8160cca43d7..430c73bfc0ed 100644
--- a/src/client/theme-default/components/VPDocAsideOutline.vue
+++ b/src/client/theme-default/components/VPDocAsideOutline.vue
@@ -67,7 +67,7 @@ function handleClick({ target: el }: Event) {
 
 .content {
   position: relative;
-  border-left: 1px solid var(--vp-c-divider-light);
+  border-left: 1px solid var(--vp-c-divider);
   padding-left: 16px;
   font-size: 13px;
   font-weight: 500;
diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index 848ab1439007..d441a171ff56 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -97,7 +97,7 @@ const showFooter = computed(() => {
 }
 
 .prev-next {
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: 1px solid var(--vp-c-divider);
   padding-top: 24px;
 }
 
@@ -127,7 +127,7 @@ const showFooter = computed(() => {
 
 .pager-link {
   display: block;
-  border: 1px solid var(--vp-c-divider-light);
+  border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   padding: 11px 16px 13px;
   width: 100%;
@@ -139,10 +139,6 @@ const showFooter = computed(() => {
   border-color: var(--vp-c-brand);
 }
 
-.pager-link:hover .title {
-  color: var(--vp-c-brand-dark);
-}
-
 .pager-link.next {
   margin-left: auto;
   text-align: right;
diff --git a/src/client/theme-default/components/VPFeature.vue b/src/client/theme-default/components/VPFeature.vue
index 39ef5e90b5a7..41e9c7199231 100644
--- a/src/client/theme-default/components/VPFeature.vue
+++ b/src/client/theme-default/components/VPFeature.vue
@@ -48,11 +48,7 @@ defineProps<{
 
 .VPFeature.link:hover {
   border-color: var(--vp-c-brand);
-  background-color: var(--vp-c-bg);
-}
-
-.dark .VPFeature.link:hover {
-  background-color: var(--vp-c-bg-mute);
+  background-color: var(--vp-c-bg-soft-up);
 }
 
 .box {
@@ -73,17 +69,13 @@ defineProps<{
   align-items: center;
   margin-bottom: 20px;
   border-radius: 6px;
-  background-color: var(--vp-c-gray-light-4);
+  background-color: var(--vp-c-bg-soft-down);
   width: 48px;
   height: 48px;
   font-size: 24px;
   transition: background-color 0.25s;
 }
 
-.dark .icon {
-  background-color: var(--vp-c-gray-dark-5);
-}
-
 .title {
   line-height: 24px;
   font-size: 16px;
@@ -109,11 +101,6 @@ defineProps<{
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-brand);
-  transition: color 0.25s;
-}
-
-.VPFeature.link:hover .link-text-value {
-  color: var(--vp-c-brand-dark);
 }
 
 .link-text-icon {
diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index cf36c8f26990..b13256897192 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -91,33 +91,21 @@ function onBlur() {
   display: flex;
   align-items: center;
   padding: 0 12px;
-  height: var(--vp-nav-height-mobile);
+  height: var(--vp-nav-height);
   color: var(--vp-c-text-1);
   transition: color 0.5s;
 }
 
-@media (min-width: 960px) {
-  .button {
-    height: var(--vp-nav-height-desktop);
-  }
-}
-
 .text {
   display: flex;
   align-items: center;
-  line-height: var(--vp-nav-height-mobile);
+  line-height: var(--vp-nav-height);
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
 }
 
-@media (min-width: 960px) {
-  .text {
-    line-height: var(--vp-nav-height-desktop);
-  }
-}
-
 .option-icon {
   margin-right: 0px;
   width: 16px;
@@ -141,16 +129,10 @@ function onBlur() {
 
 .menu {
   position: absolute;
-  top: calc(var(--vp-nav-height-mobile) / 2 + 20px);
+  top: calc(var(--vp-nav-height) / 2 + 20px);
   right: 0;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
 }
-
-@media (min-width: 960px) {
-  .menu {
-    top: calc(var(--vp-nav-height-desktop) / 2 + 20px);
-  }
-}
 </style>
diff --git a/src/client/theme-default/components/VPFooter.vue b/src/client/theme-default/components/VPFooter.vue
index 381b82e89c35..4e831ce5c2a4 100644
--- a/src/client/theme-default/components/VPFooter.vue
+++ b/src/client/theme-default/components/VPFooter.vue
@@ -19,7 +19,7 @@ const { hasSidebar } = useSidebar()
 .VPFooter {
   position: relative;
   z-index: var(--vp-z-index-footer);
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: 1px solid var(--vp-c-gutter);
   padding: 32px 24px;
   background-color: var(--vp-c-bg);
 }
diff --git a/src/client/theme-default/components/VPHomeSponsors.vue b/src/client/theme-default/components/VPHomeSponsors.vue
index 88249522d283..72eefca81442 100644
--- a/src/client/theme-default/components/VPHomeSponsors.vue
+++ b/src/client/theme-default/components/VPHomeSponsors.vue
@@ -48,7 +48,7 @@ defineProps<{
 
 <style scoped>
 .VPHomeSponsors {
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: 1px solid var(--vp-c-gutter);
   padding: 88px 24px 96px;
   background-color: var(--vp-c-bg);
 }
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index a0a3a56e72c5..c77046a3ea06 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -44,11 +44,11 @@ function scrollToTop() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid var(--vp-c-divider-light);
+  border-bottom: 1px solid var(--vp-c-gutter);
+  padding-top: var(--vp-layout-top-height, 0px);
   width: 100%;
-  background-color: var(--vp-c-bg);
+  background-color: var(--vp-local-nav-bg-color);
   transition: border-color 0.5s, background-color 0.5s;
-  padding-top: var(--vp-layout-top-height, 0px);
 }
 
 @media (min-width: 960px) {
diff --git a/src/client/theme-default/components/VPMenu.vue b/src/client/theme-default/components/VPMenu.vue
index 15249aca44f6..ebe66623c539 100644
--- a/src/client/theme-default/components/VPMenu.vue
+++ b/src/client/theme-default/components/VPMenu.vue
@@ -25,31 +25,21 @@ defineProps<{
   border-radius: 12px;
   padding: 12px;
   min-width: 128px;
-  border: 1px solid var(--vp-c-divider-light);
-  background-color: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  background-color: var(--vp-c-bg-elv);
   box-shadow: var(--vp-shadow-3);
   transition: background-color 0.5s;
-  max-height: calc(100vh - var(--vp-nav-height-mobile));
+  max-height: calc(100vh - var(--vp-nav-height));
   overflow-y: auto;
 }
 
-@media (min-width: 960px) {
-  .VPMenu {
-    max-height: calc(100vh - var(--vp-nav-height-desktop));
-  }
-}
-
-.dark .VPMenu {
-  box-shadow: var(--vp-shadow-2);
-}
-
 .VPMenu :deep(.group) {
   margin: 0 -12px;
   padding: 0 12px 12px;
 }
 
 .VPMenu :deep(.group + .group) {
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: 1px solid var(--vp-c-divider);
   padding: 11px 12px 12px;
 }
 
@@ -58,7 +48,7 @@ defineProps<{
 }
 
 .VPMenu :deep(.group + .item) {
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: 1px solid var(--vp-c-divider);
   padding: 11px 16px 0;
 }
 
diff --git a/src/client/theme-default/components/VPMenuGroup.vue b/src/client/theme-default/components/VPMenuGroup.vue
index 167874bec037..3b44ed9faf27 100644
--- a/src/client/theme-default/components/VPMenuGroup.vue
+++ b/src/client/theme-default/components/VPMenuGroup.vue
@@ -20,7 +20,7 @@ defineProps<{
 <style scoped>
 .VPMenuGroup {
   margin: 12px -12px 0;
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: 1px solid var(--vp-c-divider);
   padding: 12px 12px 0;
 }
 
@@ -32,7 +32,7 @@ defineProps<{
 
 .VPMenuGroup + .VPMenuGroup {
   margin-top: 12px;
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: 1px solid var(--vp-c-divider);
 }
 
 .title {
diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
index 63903c8b71f4..695267d9935e 100644
--- a/src/client/theme-default/components/VPMenuLink.vue
+++ b/src/client/theme-default/components/VPMenuLink.vue
@@ -24,7 +24,7 @@ const { page } = useData()
 <style scoped>
 .VPMenuGroup + .VPMenuLink {
   margin: 12px -12px 0;
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: 1px solid var(--vp-c-divider);
   padding: 12px 12px 0;
 }
 
@@ -42,11 +42,7 @@ const { page } = useData()
 
 .link:hover {
   color: var(--vp-c-brand);
-  background-color: var(--vp-c-bg-mute);
-}
-
-.dark .link:hover {
-  background-color: var(--vp-c-bg-soft);
+  background-color: var(--vp-c-bg-elv-mute);
 }
 
 .link.active {
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index a1a5c70d31ca..0780599dac36 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -1,18 +1,26 @@
 <script setup lang="ts">
-import { provide } from 'vue'
+import { computed, provide } from 'vue'
+import { useWindowScroll } from '@vueuse/core'
 import { useNav } from '../composables/nav.js'
 import { useSidebar } from '../composables/sidebar.js'
 import VPNavBar from './VPNavBar.vue'
 import VPNavScreen from './VPNavScreen.vue'
 
+const { y } = useWindowScroll()
+
 const { isScreenOpen, closeScreen, toggleScreen } = useNav()
 const { hasSidebar } = useSidebar()
 
 provide('close-screen', closeScreen)
+
+const classes = computed(() => ({
+  'no-sidebar': !hasSidebar.value,
+  'fill-bg': y.value > 0
+}))
 </script>
 
 <template>
-  <header class="VPNav" :class="{ 'no-sidebar' : !hasSidebar }">
+  <header class="VPNav" :class="classes">
     <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
@@ -33,27 +41,22 @@ provide('close-screen', closeScreen)
   left: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;
+  background-color: var(--vp-nav-bg-color);
   pointer-events: none;
+  transition: background-color 0.5s;
+}
+
+.VPNav.no-sidebar {
+  background-color: transparent;
+}
+
+.VPNav.fill-bg {
+  background-color: var(--vp-nav-bg-color);
 }
 
 @media (min-width: 960px) {
   .VPNav {
     position: fixed;
   }
-
-  .VPNav.no-sidebar {
-    background: var(--vp-c-bg-alpha-without-backdrop);
-  }
-
-  @supports (
-    (backdrop-filter: saturate(50%) blur(8px)) or
-      (-webkit-backdrop-filter: saturate(50%) blur(8px))
-  ) {
-    .VPNav.no-sidebar {
-      -webkit-backdrop-filter: saturate(50%) blur(8px);
-      backdrop-filter: saturate(50%) blur(8px);
-      background: var(--vp-c-bg-alpha-with-backdrop);
-    }
-  }
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 176d4490bc02..bf8c653fdc58 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -23,12 +23,15 @@ const { hasSidebar } = useSidebar()
 <template>
   <div class="VPNavBar" :class="{ 'has-sidebar' : hasSidebar }">
     <div class="container">
-      <VPNavBarTitle>
-        <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
-        <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
-      </VPNavBarTitle>
+      <div class="title">
+        <VPNavBarTitle>
+          <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
+          <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
+        </VPNavBarTitle>
+      </div>
 
       <div class="content">
+        <div class="curtain" />
         <slot name="nav-bar-content-before" />
         <VPNavBarSearch class="search" />
         <VPNavBarMenu class="menu" />
@@ -37,11 +40,7 @@ const { hasSidebar } = useSidebar()
         <VPNavBarSocialLinks class="social-links" />
         <VPNavBarExtra class="extra" />
         <slot name="nav-bar-content-after" />
-        <VPNavBarHamburger
-          class="hamburger"
-          :active="isScreenOpen"
-          @click="$emit('toggle-screen')"
-        />
+        <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
       </div>
     </div>
   </div>
@@ -50,9 +49,9 @@ const { hasSidebar } = useSidebar()
 <style scoped>
 .VPNavBar {
   position: relative;
-  border-bottom: 1px solid var(--vp-c-divider-light);
+  border-bottom: 1px solid var(--vp-c-gutter);
   padding: 0 8px 0 24px;
-  height: var(--vp-nav-height-mobile);
+  height: var(--vp-nav-height);
   transition: border-color 0.5s, background-color 0.5s;
   pointer-events: none;
 }
@@ -64,26 +63,9 @@ const { hasSidebar } = useSidebar()
 }
 
 @media (min-width: 960px) {
-  .VPNavBar {
-    height: var(--vp-nav-height-desktop);
-    border-bottom: 0;
-  }
-
-  .VPNavBar.has-sidebar .content {
-    margin-right: -100vw;
-    padding-right: 100vw;
-    background: var(--vp-c-bg-alpha-without-backdrop);
-  }
-
-  @supports (
-    (backdrop-filter: saturate(50%) blur(8px)) or
-      (-webkit-backdrop-filter: saturate(50%) blur(8px))
-  ) {
-    .VPNavBar.has-sidebar .content {
-      -webkit-backdrop-filter: saturate(50%) blur(8px);
-      backdrop-filter: saturate(50%) blur(8px);
-      background: var(--vp-c-bg-alpha-with-backdrop);
-    }
+  .VPNavBar.has-sidebar {
+    border-bottom-color: transparent;
+    padding: 0;
   }
 }
 
@@ -92,9 +74,40 @@ const { hasSidebar } = useSidebar()
   justify-content: space-between;
   margin: 0 auto;
   max-width: calc(var(--vp-layout-max-width) - 64px);
+  height: var(--vp-nav-height);
   pointer-events: none;
 }
 
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .container {
+    max-width: 100%;
+  }
+}
+
+.title {
+  flex-shrink: 0;
+}
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    padding: 0 32px;
+    width: var(--vp-sidebar-width);
+    height: var(--vp-nav-height);
+    background-color: var(--vp-c-bg-alt);
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPNavBar.has-sidebar .title {
+    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
+    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+  }
+}
+
 .container :deep(*) {
   pointer-events: auto;
 }
@@ -106,6 +119,22 @@ const { hasSidebar } = useSidebar()
   flex-grow: 1;
 }
 
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .content {
+    position: relative;
+    z-index: 1;
+    padding-right: 32px;
+    padding-left: var(--vp-sidebar-width);
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPNavBar.has-sidebar .content {
+    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+  }
+}
+
 .menu + .translations::before,
 .menu + .appearance::before,
 .menu + .social-links::before,
@@ -115,7 +144,7 @@ const { hasSidebar } = useSidebar()
   margin-left: 8px;
   width: 1px;
   height: 24px;
-  background-color: var(--vp-c-divider-light);
+  background-color: var(--vp-c-divider);
   content: "";
 }
 
@@ -131,4 +160,29 @@ const { hasSidebar } = useSidebar()
 .social-links {
   margin-right: -8px;
 }
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .curtain {
+    position: absolute;
+    right: 0;
+    bottom: -32px;
+    padding-left: var(--vp-sidebar-width);
+    width: 100%;
+    height: 32px;
+  }
+
+  .VPNavBar.has-sidebar .curtain::before {
+    display: block;
+    width: 100%;
+    height: 32px;
+    background: linear-gradient(var(--vp-c-bg), transparent 70%);
+    content: "";
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPNavBar.has-sidebar .curtain {
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+  }
+}
 </style>
diff --git a/src/client/theme-default/components/VPNavBarMenuLink.vue b/src/client/theme-default/components/VPNavBarMenuLink.vue
index f2a15e01b22c..8d8115477260 100644
--- a/src/client/theme-default/components/VPNavBarMenuLink.vue
+++ b/src/client/theme-default/components/VPNavBarMenuLink.vue
@@ -33,7 +33,7 @@ const { page } = useData()
   display: flex;
   align-items: center;
   padding: 0 12px;
-  line-height: var(--vp-nav-height-mobile);
+  line-height: var(--vp-nav-height);
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
@@ -47,10 +47,4 @@ const { page } = useData()
 .VPNavBarMenuLink:hover {
   color: var(--vp-c-brand);
 }
-
-@media (min-width: 1280px) {
-  .VPNavBarMenuLink {
-    line-height: var(--vp-nav-height-desktop);
-  }
-}
 </style>
diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue
index af4913acd705..d3dc1a657c15 100644
--- a/src/client/theme-default/components/VPNavBarSearch.vue
+++ b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -123,7 +123,7 @@ function load() {
   --docsearch-modal-shadow: none;
   --docsearch-footer-shadow: none;
   --docsearch-logo-color: var(--vp-c-text-2);
-  --docsearch-hit-background: var(--vp-c-bg-mute);
+  --docsearch-hit-background: var(--vp-c-bg-soft-mute);
   --docsearch-hit-color: var(--vp-c-text-2);
   --docsearch-hit-shadow: none;
 }
@@ -282,6 +282,6 @@ function load() {
 }
 
 .dark .DocSearch-Form {
-  background-color: var(--vp-c-bg-mute);
+  background-color: var(--vp-c-bg-soft-mute);
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBarTitle.vue b/src/client/theme-default/components/VPNavBarTitle.vue
index 4e8ea1f6b621..b8857f3053de 100644
--- a/src/client/theme-default/components/VPNavBarTitle.vue
+++ b/src/client/theme-default/components/VPNavBarTitle.vue
@@ -20,23 +20,10 @@ const { hasSidebar } = useSidebar()
 </template>
 
 <style scoped>
-.VPNavBarTitle {
-  flex-shrink: 0;
-  border-bottom: 1px solid transparent;
-}
-
-@media (min-width: 960px) {
-  .VPNavBarTitle.has-sidebar {
-    margin-right: 32px;
-    width: calc(var(--vp-sidebar-width) - 64px);
-    border-bottom-color: var(--vp-c-divider-light);
-    background-color: var(--vp-c-bg-alt);
-  }
-}
-
 .title {
   display: flex;
   align-items: center;
+  border-bottom: 1px solid transparent;
   width: 100%;
   height: var(--vp-nav-height);
   font-size: 16px;
@@ -53,6 +40,10 @@ const { hasSidebar } = useSidebar()
   .title {
     flex-shrink: 0;
   }
+
+  .VPNavBarTitle.has-sidebar .title {
+    border-bottom-color: var(--vp-c-divider);
+  }
 }
 
 :deep(.logo) {
diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
index 1d4d58baa4c6..18d712b6f939 100644
--- a/src/client/theme-default/components/VPNavScreen.vue
+++ b/src/client/theme-default/components/VPNavScreen.vue
@@ -43,13 +43,13 @@ function unlockBodyScroll() {
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: calc(var(--vp-nav-height-mobile) + var(--vp-layout-top-height, 0px));
+  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);
   right: 0;
   bottom: 0;
   left: 0;
   padding: 0 32px;
   width: 100%;
-  background-color: var(--vp-c-bg);
+  background-color: var(--vp-nav-screen-bg-color);
   overflow-y: auto;
   transition: background-color 0.5s;
   pointer-events: auto;
diff --git a/src/client/theme-default/components/VPNavScreenAppearance.vue b/src/client/theme-default/components/VPNavScreenAppearance.vue
index 3a804195cabd..8ad46c7d537b 100644
--- a/src/client/theme-default/components/VPNavScreenAppearance.vue
+++ b/src/client/theme-default/components/VPNavScreenAppearance.vue
@@ -20,7 +20,6 @@ const { site } = useData()
   border-radius: 8px;
   padding: 12px 14px 12px 16px;
   background-color: var(--vp-c-bg-soft);
-  transition: background-color 0.5s;
 }
 
 .text {
@@ -28,6 +27,5 @@ const { site } = useData()
   font-size: 12px;
   font-weight: 500;
   color: var(--vp-c-text-2);
-  transition: color 0.5s;
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
index d66e02c9aca3..25f70c76f43a 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
@@ -54,7 +54,7 @@ function toggle() {
 
 <style scoped>
 .VPNavScreenMenuGroup {
-  border-bottom: 1px solid var(--vp-c-divider-light);
+  border-bottom: 1px solid var(--vp-c-divider);
   height: 48px;
   overflow: hidden;
   transition: border-color 0.5s;
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
index 61f5bd8383ac..7a64eead01d1 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
@@ -19,12 +19,12 @@ const closeScreen = inject('close-screen') as () => void
 <style scoped>
 .VPNavScreenMenuGroupLink {
   display: block;
+  margin-left: 12px;
   line-height: 32px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 400;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
-  margin-left: 12px;
 }
 
 .VPNavScreenMenuGroupLink:hover {
diff --git a/src/client/theme-default/components/VPNavScreenMenuLink.vue b/src/client/theme-default/components/VPNavScreenMenuLink.vue
index f7ae9800b6fc..7c03b39fc704 100644
--- a/src/client/theme-default/components/VPNavScreenMenuLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuLink.vue
@@ -19,13 +19,13 @@ const closeScreen = inject('close-screen') as () => void
 <style scoped>
 .VPNavScreenMenuLink {
   display: block;
-  border-bottom: 1px solid var(--vp-c-divider-light);
+  border-bottom: 1px solid var(--vp-c-divider);
   padding: 12px 0 11px;
   line-height: 24px;
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
-  transition: border-color 0.5s, color 0.25s;
+  transition: border-color 0.25s, color 0.25s;
 }
 
 .VPNavScreenMenuLink:hover {
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 2dec1c7d266d..bad3382948b4 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -70,7 +70,7 @@ watchPostEffect(async () => {
   padding: 32px 32px 96px;
   width: calc(100vw - 64px);
   max-width: 320px;
-  background-color: var(--vp-c-bg);
+  background-color: var(--vp-sidebar-bg-color);
   opacity: 0;
   box-shadow: var(--vp-c-shadow-3);
   overflow-x: hidden;
@@ -94,11 +94,11 @@ watchPostEffect(async () => {
 @media (min-width: 960px) {
   .VPSidebar {
     z-index: 1;
-    padding-top: var(--vp-nav-height-desktop);
+    padding-top: var(--vp-nav-height);
     padding-bottom: 128px;
     width: var(--vp-sidebar-width);
     max-width: 100%;
-    background-color: var(--vp-c-bg-alt);
+    background-color: var(--vp-sidebar-bg-color);
     opacity: 1;
     visibility: visible;
     box-shadow: none;
@@ -119,7 +119,7 @@ watchPostEffect(async () => {
 
 .group + .group {
   margin-top: 32px;
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: 1px solid var(--vp-c-divider);
   padding-top: 10px;
 }
 
diff --git a/src/client/theme-default/components/VPSwitch.vue b/src/client/theme-default/components/VPSwitch.vue
index a9a5988f7bcb..8eacd8cfe04c 100644
--- a/src/client/theme-default/components/VPSwitch.vue
+++ b/src/client/theme-default/components/VPSwitch.vue
@@ -16,13 +16,13 @@
   width: 40px;
   height: 22px;
   flex-shrink: 0;
-  border: 1px solid var(--vp-c-divider);
-  background-color: var(--vp-c-bg-mute);
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
   transition: border-color 0.25s;
 }
 
 .VPSwitch:hover {
-  border-color: var(--vp-c-gray);
+  border-color: var(--vp-input-hover-border-color);
 }
 
 .check {
@@ -32,15 +32,11 @@
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background-color: var(--vp-c-white);
+  background-color: var(--vp-c-neutral-inverse);
   box-shadow: var(--vp-shadow-1);
   transition: transform 0.25s;
 }
 
-.dark .check {
-  background-color: var(--vp-c-black);
-}
-
 .icon {
   position: relative;
   display: block;
diff --git a/src/client/theme-default/components/VPTeamMembersItem.vue b/src/client/theme-default/components/VPTeamMembersItem.vue
index 6a4ba0f87058..193312a7d675 100644
--- a/src/client/theme-default/components/VPTeamMembersItem.vue
+++ b/src/client/theme-default/components/VPTeamMembersItem.vue
@@ -199,10 +199,10 @@ defineProps<{
   transition: color 0.25s, background-color 0.25s;
 }
 
-.sp-link:hover,
-.sp-link:focus {
+.sp .sp-link.link:hover,
+.sp .sp-link.link:focus {
   outline: none;
-  color: var(--vp-c-text-dark-1);
+  color: var(--vp-c-white);
   background-color: var(--vp-c-sponsor);
 }
 
diff --git a/src/client/theme-default/components/VPTeamPageSection.vue b/src/client/theme-default/components/VPTeamPageSection.vue
index d31501400965..2bb52ab9aefe 100644
--- a/src/client/theme-default/components/VPTeamPageSection.vue
+++ b/src/client/theme-default/components/VPTeamPageSection.vue
@@ -46,7 +46,7 @@
   left: 0;
   width: 100%;
   height: 1px;
-  background-color: var(--vp-c-divider-light);
+  background-color: var(--vp-c-divider);
 }
 
 .title-text {
diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css
index 16f0564fd928..5a2c90b93643 100644
--- a/src/client/theme-default/styles/components/custom-block.css
+++ b/src/client/theme-default/styles/components/custom-block.css
@@ -3,7 +3,7 @@
   border-radius: 8px;
   padding: 16px 16px 8px;
   line-height: 24px;
-  font-size: 14px;
+  font-size: var(--vp-custom-block-font-size);
   color: var(--vp-c-text-2);
 }
 
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 89b7ec7bd412..8ff5004d98f8 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -21,7 +21,7 @@
 
 .vp-doc h2 {
   margin: 48px 0 16px;
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: 1px solid var(--vp-c-divider);
   padding-top: 24px;
   letter-spacing: -0.02em;
   line-height: 32px;
@@ -160,17 +160,19 @@
 .vp-doc th,
 .vp-doc td {
   border: 1px solid var(--vp-c-divider);
-  padding: 12px 16px;
+  padding: 8px 16px;
 }
 
 .vp-doc th {
-  font-size: 16px;
+  text-align: left;
+  font-size: 14px;
   font-weight: 600;
-  background-color: var(--vp-c-white-soft);
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-bg-soft);
 }
 
-.dark .vp-doc th {
-  background-color: var(--vp-c-black);
+.vp-doc td {
+  font-size: 14px;
 }
 
 /**
@@ -180,7 +182,7 @@
 .vp-doc hr {
   margin: 16px 0;
   border: none;
-  border-top: 1px solid var(--vp-c-divider-light);
+  border-top: 1px solid var(--vp-c-divider);
 }
 
 /**
@@ -239,7 +241,7 @@
   border-radius: 4px;
   padding: 3px 6px;
   color: var(--vp-c-text-code);
-  background-color: var(--vp-c-bg-mute);
+  background-color: var(--vp-c-mute);
   transition: color 0.5s, background-color 0.5s;
 }
 
@@ -396,7 +398,7 @@
   bottom: 0;
   left: 0;
   z-index: 3;
-  border-right: 1px solid var(--vp-c-divider-dark-2);
+  border-right: 1px solid var(--vp-code-block-divider-color);
   padding-top: 16px;
   width: 32px;
   text-align: center;
diff --git a/src/client/theme-default/styles/components/vp-sponsor.css b/src/client/theme-default/styles/components/vp-sponsor.css
index 32da1de9580d..da2160bb0345 100644
--- a/src/client/theme-default/styles/components/vp-sponsor.css
+++ b/src/client/theme-default/styles/components/vp-sponsor.css
@@ -114,7 +114,7 @@
 }
 
 .vp-sponsor-grid-item:hover {
-  background-color: var(--vp-c-bg-mute);
+  background-color: var(--vp-c-bg-soft-down);
 }
 
 .vp-sponsor-grid-item:hover .vp-sponsor-grid-image {
@@ -126,11 +126,11 @@
 }
 
 .dark .vp-sponsor-grid-item:hover {
-  background-color: var(--vp-c-white-soft);
+  background-color: var(--vp-c-white);
 }
 
 .dark .vp-sponsor-grid-item.empty:hover {
-  background-color: var(--vp-c-black-mute);
+  background-color: var(--vp-c-bg-soft);
 }
 
 .vp-sponsor-grid-link {
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index f2fb5633c054..aee40e11a0ba 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -8,74 +8,46 @@
 
 :root {
   --vp-c-white: #ffffff;
-  --vp-c-white-soft: #f9f9f9;
-  --vp-c-white-mute: #f1f1f1;
-
-  --vp-c-black: #1a1a1a;
-  --vp-c-black-pure: #000000;
-  --vp-c-black-soft: #242424;
-  --vp-c-black-mute: #2f2f2f;
-
-  --vp-c-gray: #8e8e8e;
-  --vp-c-gray-light-1: #aeaeae;
-  --vp-c-gray-light-2: #c7c7c7;
-  --vp-c-gray-light-3: #d1d1d1;
-  --vp-c-gray-light-4: #e5e5e5;
-  --vp-c-gray-light-5: #f2f2f2;
-  --vp-c-gray-dark-1: #636363;
-  --vp-c-gray-dark-2: #484848;
-  --vp-c-gray-dark-3: #3a3a3a;
-  --vp-c-gray-dark-4: #282828;
-  --vp-c-gray-dark-5: #202020;
-
-  --vp-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vp-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vp-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vp-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vp-c-text-light-1: var(--vp-c-indigo);
-  --vp-c-text-light-2: rgba(60, 60, 60, 0.7);
-  --vp-c-text-light-3: rgba(60, 60, 60, 0.33);
-  --vp-c-text-light-4: rgba(60, 60, 60, 0.18);
-
-  --vp-c-text-dark-1: rgba(255, 255, 255, 0.87);
-  --vp-c-text-dark-2: rgba(235, 235, 235, 0.6);
-  --vp-c-text-dark-3: rgba(235, 235, 235, 0.38);
-  --vp-c-text-dark-4: rgba(235, 235, 235, 0.18);
-
-  --vp-c-indigo: #213547;
-  --vp-c-indigo-soft: #476582;
-  --vp-c-indigo-light: #aac8e4;
-  --vp-c-indigo-lighter: #c9def1;
-  --vp-c-indigo-dark: #1d2f3f;
-  --vp-c-indigo-darker: #14212e;
-
-  --vp-c-green: #42b883;
-  --vp-c-green-light: #42d392;
-  --vp-c-green-lighter: #35eb9a;
-  --vp-c-green-dark: #33a06f;
-  --vp-c-green-darker: #155f3e;
-  --vp-c-green-dimm-1: rgba(66, 184, 131, 0.5);
-  --vp-c-green-dimm-2: rgba(66, 184, 131, 0.25);
-  --vp-c-green-dimm-3: rgba(66, 184, 131, 0.05);
-
-  --vp-c-yellow: #ffc517;
-  --vp-c-yellow-light: #fcd253;
-  --vp-c-yellow-lighter: #fcfc7c;
-  --vp-c-yellow-dark: #e0ad15;
-  --vp-c-yellow-darker: #ad850e;
-  --vp-c-yellow-dimm-1: rgba(255, 197, 23, 0.5);
-  --vp-c-yellow-dimm-2: rgba(255, 197, 23, 0.25);
-  --vp-c-yellow-dimm-3: rgba(255, 197, 23, 0.05);
-
-  --vp-c-red: #ed3c50;
-  --vp-c-red-light: #f54e82;
-  --vp-c-red-lighter: #fd1d7c;
-  --vp-c-red-dark: #cd2d3f;
-  --vp-c-red-darker: #ab2131;
-  --vp-c-red-dimm-1: rgba(237, 60, 80, 0.5);
-  --vp-c-red-dimm-2: rgba(237, 60, 80, 0.25);
-  --vp-c-red-dimm-3: rgba(237, 60, 80, 0.05);
+  --vp-c-black: #000000;
+
+  --vp-c-gray: #8e8e93;
+
+  --vp-c-text-light-1: rgba(60, 60, 67, 0.92);
+  --vp-c-text-light-2: rgba(60, 60, 67, 0.7);
+  --vp-c-text-light-3: rgba(60, 60, 67, 0.33);
+
+  --vp-c-text-dark-1: rgba(255, 255, 245, 0.86);
+  --vp-c-text-dark-2: rgba(235, 235, 245, 0.6);
+  --vp-c-text-dark-3: rgba(235, 235, 245, 0.38);
+
+  --vp-c-green: #10b981;
+  --vp-c-green-light: #34d399;
+  --vp-c-green-lighter: #6ee7b7;
+  --vp-c-green-dark: #059669;
+  --vp-c-green-darker: #047857;
+  --vp-c-green-dimm-1: rgba(16, 185, 129, 0.05);
+  --vp-c-green-dimm-2: rgba(16, 185, 129, 0.2);
+  --vp-c-green-dimm-3: rgba(16, 185, 129, 0.5);
+
+  --vp-c-yellow: #eab308;
+  --vp-c-yellow-light: #facc15;
+  --vp-c-yellow-lighter: #fde047;
+  --vp-c-yellow-dark: #ca8a04;
+  --vp-c-yellow-darker: #a16207;
+  --vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.05);
+  --vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
+  --vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.5);
+
+  --vp-c-red: #f43f5e;
+  --vp-c-red-light: #fb7185;
+  --vp-c-red-lighter: #fda4af;
+  --vp-c-red-dark: #e11d48;
+  --vp-c-red-darker: #be123c;
+  --vp-c-red-dimm-1: rgba(244, 63, 94, 0.05);
+  --vp-c-red-dimm-2: rgba(244, 63, 94, 0.2);
+  --vp-c-red-dimm-3: rgba(244, 63, 94, 0.5);
+
+  --vp-c-sponsor: #db2777;
 }
 
 /**
@@ -83,33 +55,36 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-c-bg: var(--vp-c-white);
-  --vp-c-bg-soft: var(--vp-c-white-soft);
-  --vp-c-bg-mute: var(--vp-c-white-mute);
-  --vp-c-bg-alt: var(--vp-c-white-soft);
+  --vp-c-bg: #ffffff;
 
-  --vp-c-bg-alpha-with-backdrop: rgba(255, 255, 255, 0.7);
-  --vp-c-bg-alpha-without-backdrop: rgba(255, 255, 255, 0.95);
+  --vp-c-bg-elv: #ffffff;
+  --vp-c-bg-elv-up: #ffffff;
+  --vp-c-bg-elv-down: #f6f6f7;
+  --vp-c-bg-elv-mute: #f6f6f7;
 
-  --vp-c-bg-backdrop: rgba(0, 0, 0, 0.6);
+  --vp-c-bg-soft: #f6f6f7;
+  --vp-c-bg-soft-up: #ffffff;
+  --vp-c-bg-soft-down: #e3e3e5;
+  --vp-c-bg-soft-mute: #e3e3e5;
 
-  --vp-c-divider: var(--vp-c-divider-light-1);
-  --vp-c-divider-light: var(--vp-c-divider-light-2);
+  --vp-c-bg-alt: #f6f6f7;
 
-  --vp-c-divider-inverse: var(--vp-c-divider-dark-1);
-  --vp-c-divider-inverse-light: var(--vp-c-divider-dark-2);
+  --vp-c-border: rgba(60, 60, 67, 0.29);
+  --vp-c-divider: rgba(60, 60, 67, 0.12);
+  --vp-c-gutter: rgba(60, 60, 67, 0.12);
+
+  --vp-c-neutral: var(--vp-c-black);
+  --vp-c-neutral-inverse: var(--vp-c-white);
 
   --vp-c-text-1: var(--vp-c-text-light-1);
   --vp-c-text-2: var(--vp-c-text-light-2);
   --vp-c-text-3: var(--vp-c-text-light-3);
-  --vp-c-text-4: var(--vp-c-text-light-4);
 
   --vp-c-text-inverse-1: var(--vp-c-text-dark-1);
   --vp-c-text-inverse-2: var(--vp-c-text-dark-2);
   --vp-c-text-inverse-3: var(--vp-c-text-dark-3);
-  --vp-c-text-inverse-4: var(--vp-c-text-dark-4);
 
-  --vp-c-text-code: var(--vp-c-indigo-soft);
+  --vp-c-text-code: #476582;
 
   --vp-c-brand: var(--vp-c-green);
   --vp-c-brand-light: var(--vp-c-green-light);
@@ -117,35 +92,50 @@
   --vp-c-brand-dark: var(--vp-c-green-dark);
   --vp-c-brand-darker: var(--vp-c-green-darker);
 
-  --vp-c-sponsor: #fd1d7c;
+  --vp-c-mute: #f6f6f7;
+  --vp-c-mute-light: #f9f9fc;
+  --vp-c-mute-lighter: #ffffff;
+  --vp-c-mute-dark: #e3e3e5;
+  --vp-c-mute-darker: #d7d7d9;
 }
 
 .dark {
-  --vp-c-bg: var(--vp-c-black-soft);
-  --vp-c-bg-soft: var(--vp-c-black-mute);
-  --vp-c-bg-mute: var(--vp-c-gray-dark-3);
-  --vp-c-bg-alt: var(--vp-c-black);
+  --vp-c-bg: #1e1e20;
+
+  --vp-c-bg-elv: #252529;
+  --vp-c-bg-elv-up: #313136;
+  --vp-c-bg-elv-down: #1e1e20;
+  --vp-c-bg-elv-mute: #313136;
+
+  --vp-c-bg-soft: #252529;
+  --vp-c-bg-soft-up: #313136;
+  --vp-c-bg-soft-down: #1e1e20;
+  --vp-c-bg-soft-mute: #313136;
 
-  --vp-c-bg-alpha-with-backdrop: rgba(36, 36, 36, 0.7);
-  --vp-c-bg-alpha-without-backdrop: rgba(36, 36, 36, 0.95);
+  --vp-c-bg-alt: #161618;
 
-  --vp-c-divider: var(--vp-c-divider-dark-1);
-  --vp-c-divider-light: var(--vp-c-divider-dark-2);
+  --vp-c-border: rgba(82, 82, 89, 0.68);
+  --vp-c-divider: rgba(82, 82, 89, 0.32);
+  --vp-c-gutter: #000000;
 
-  --vp-c-divider-inverse: var(--vp-c-divider-light-1);
-  --vp-c-divider-inverse-light: var(--vp-c-divider-light-2);
+  --vp-c-neutral: var(--vp-c-white);
+  --vp-c-neutral-inverse: var(--vp-c-black);
 
   --vp-c-text-1: var(--vp-c-text-dark-1);
   --vp-c-text-2: var(--vp-c-text-dark-2);
   --vp-c-text-3: var(--vp-c-text-dark-3);
-  --vp-c-text-4: var(--vp-c-text-dark-4);
 
   --vp-c-text-inverse-1: var(--vp-c-text-light-1);
   --vp-c-text-inverse-2: var(--vp-c-text-light-2);
   --vp-c-text-inverse-3: var(--vp-c-text-light-3);
-  --vp-c-text-inverse-4: var(--vp-c-text-light-4);
 
-  --vp-c-text-code: var(--vp-c-indigo-lighter);
+  --vp-c-text-code: #c9def1;
+
+  --vp-c-mute: #313136;
+  --vp-c-mute-light: #3a3a3c;
+  --vp-c-mute-lighter: #505053;
+  --vp-c-mute-dark: #2c2c30;
+  --vp-c-mute-darker: #252529;
 }
 
 /**
@@ -212,36 +202,34 @@
   --vp-code-font-size: 0.875em;
 
   --vp-code-block-color: var(--vp-c-text-dark-1);
-  --vp-code-block-bg: #292d3e;
+  --vp-code-block-bg: #292b30;
+  --vp-code-block-divider-color: #000000;
 
   --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
   --vp-code-line-number-color: var(--vp-c-text-dark-3);
 
-  --vp-code-line-diff-add-color: rgba(125, 191, 123, 0.1);
-  --vp-code-line-diff-add-symbol-color: rgba(125, 191, 123, 0.5);
+  --vp-code-line-diff-add-color: var(--vp-c-green-dimm-2);
+  --vp-code-line-diff-add-symbol-color: var(--vp-c-green);
 
-  --vp-code-line-diff-remove-color: rgba(255, 128, 128, 0.05);
-  --vp-code-line-diff-remove-symbol-color: rgba(255, 128, 128, 0.5);
+  --vp-code-line-diff-remove-color: var(--vp-c-red-dimm-2);
+  --vp-code-line-diff-remove-symbol-color: var(--vp-c-red);
 
-  --vp-code-line-error-color: var(--vp-c-red-dimm-2);
   --vp-code-line-warning-color: var(--vp-c-yellow-dimm-2);
+  --vp-code-line-error-color: var(--vp-c-red-dimm-2);
 
   --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
   --vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
 
+  --vp-code-tab-divider: var(--vp-code-block-divider-color);
   --vp-code-tab-text-color: var(--vp-c-text-dark-2);
   --vp-code-tab-bg: var(--vp-code-block-bg);
-  --vp-code-tab-divider: var(--vp-c-divider-dark-2);
   --vp-code-tab-hover-text-color: var(--vp-c-text-dark-1);
   --vp-code-tab-active-text-color: var(--vp-c-text-dark-1);
   --vp-code-tab-active-bar-color: var(--vp-c-brand);
 }
 
 .dark {
-  --vp-code-block-bg: var(--vp-c-black);
-
-  /*  --vp-code-tab: var(--vp-c-black-mute);*/
-  /*  --vp-code-tab-hover: var(--vp-c-gray-dark-4);*/
+  --vp-code-block-bg: #161618;
 }
 
 /**
@@ -249,25 +237,25 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-button-brand-border: var(--vp-c-brand-light);
-  --vp-button-brand-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-text: var(--vp-c-white);
   --vp-button-brand-bg: var(--vp-c-brand);
-  --vp-button-brand-hover-border: var(--vp-c-brand-light);
-  --vp-button-brand-hover-text: var(--vp-c-text-dark-1);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
-  --vp-button-brand-active-border: var(--vp-c-brand-light);
-  --vp-button-brand-active-text: var(--vp-c-text-dark-1);
-  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
-
-  --vp-button-alt-border: var(--vp-c-gray-light-3);
-  --vp-button-alt-text: var(--vp-c-text-light-1);
-  --vp-button-alt-bg: var(--vp-c-gray-light-5);
-  --vp-button-alt-hover-border: var(--vp-c-gray-light-3);
-  --vp-button-alt-hover-text: var(--vp-c-text-light-1);
-  --vp-button-alt-hover-bg: var(--vp-c-gray-light-4);
-  --vp-button-alt-active-border: var(--vp-c-gray-light-3);
-  --vp-button-alt-active-text: var(--vp-c-text-light-1);
-  --vp-button-alt-active-bg: var(--vp-c-gray-light-3);
+  --vp-button-brand-hover-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-dark);
+  --vp-button-brand-active-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-darker);
+
+  --vp-button-alt-border: var(--vp-c-border);
+  --vp-button-alt-text: var(--vp-c-neutral);
+  --vp-button-alt-bg: var(--vp-c-mute);
+  --vp-button-alt-hover-border: var(--vp-c-border);
+  --vp-button-alt-hover-text: var(--vp-c-neutral);
+  --vp-button-alt-hover-bg: var(--vp-c-mute-dark);
+  --vp-button-alt-active-border: var(--vp-c-border);
+  --vp-button-alt-active-text: var(--vp-c-neutral);
+  --vp-button-alt-active-bg: var(--vp-c-mute-darker);
 
   --vp-button-sponsor-border: var(--vp-c-gray-light-3);
   --vp-button-sponsor-text: var(--vp-c-text-light-2);
@@ -281,26 +269,6 @@
 }
 
 .dark {
-  --vp-button-brand-border: var(--vp-c-brand-light);
-  --vp-button-brand-text: var(--vp-c-text-dark-1);
-  --vp-button-brand-bg: var(--vp-c-brand-dark);
-  --vp-button-brand-hover-border: var(--vp-c-brand-lighter);
-  --vp-button-brand-hover-text: var(--vp-c-text-dark-1);
-  --vp-button-brand-hover-bg: var(--vp-c-brand);
-  --vp-button-brand-active-border: var(--vp-c-brand-lighter);
-  --vp-button-brand-active-text: var(--vp-c-text-dark-1);
-  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
-
-  --vp-button-alt-border: var(--vp-c-gray-dark-2);
-  --vp-button-alt-text: var(--vp-c-text-dark-1);
-  --vp-button-alt-bg: var(--vp-c-bg-mute);
-  --vp-button-alt-hover-border: var(--vp-c-gray-dark-2);
-  --vp-button-alt-hover-text: var(--vp-c-text-dark-1);
-  --vp-button-alt-hover-bg: var(--vp-c-gray-dark-2);
-  --vp-button-alt-active-border: var(--vp-c-gray-dark-2);
-  --vp-button-alt-active-text: var(--vp-c-text-dark-1);
-  --vp-button-alt-active-bg: var(--vp-button-alt-bg);
-
   --vp-button-sponsor-border: var(--vp-c-gray-dark-1);
   --vp-button-sponsor-text: var(--vp-c-text-dark-2);
 }
@@ -310,26 +278,27 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  --vp-custom-block-font-size: 14px;
   --vp-custom-block-code-font-size: 13px;
 
-  --vp-custom-block-info-border: var(--vp-c-divider-light);
+  --vp-custom-block-info-border: var(--vp-c-border);
   --vp-custom-block-info-text: var(--vp-c-text-2);
-  --vp-custom-block-info-bg: var(--vp-c-white-soft);
-  --vp-custom-block-info-code-bg: var(--vp-c-gray-light-4);
+  --vp-custom-block-info-bg: var(--vp-c-bg-soft);
+  --vp-custom-block-info-code-bg: var(--vp-c-mute);
 
-  --vp-custom-block-tip-border: var(--vp-c-green-dimm-1);
-  --vp-custom-block-tip-text: var(--vp-c-green-darker);
-  --vp-custom-block-tip-bg: var(--vp-c-green-dimm-3);
+  --vp-custom-block-tip-border: var(--vp-c-green-dimm-3);
+  --vp-custom-block-tip-text: var(--vp-c-green);
+  --vp-custom-block-tip-bg: var(--vp-c-green-dimm-1);
   --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg);
 
-  --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-1);
-  --vp-custom-block-warning-text: var(--vp-c-yellow-darker);
-  --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-3);
+  --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-3);
+  --vp-custom-block-warning-text: var(--vp-c-yellow);
+  --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-1);
   --vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg);
 
-  --vp-custom-block-danger-border: var(--vp-c-red-dimm-1);
-  --vp-custom-block-danger-text: var(--vp-c-red-darker);
-  --vp-custom-block-danger-bg: var(--vp-c-red-dimm-3);
+  --vp-custom-block-danger-border: var(--vp-c-red-dimm-3);
+  --vp-custom-block-danger-text: var(--vp-c-red);
+  --vp-custom-block-danger-bg: var(--vp-c-red-dimm-1);
   --vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg);
 
   --vp-custom-block-details-border: var(--vp-custom-block-info-border);
@@ -338,19 +307,16 @@
   --vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg);
 }
 
-.dark {
-  --vp-custom-block-info-border: var(--vp-c-divider-light);
-  --vp-custom-block-info-bg: var(--vp-c-black-mute);
-  --vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4);
-
-  --vp-custom-block-tip-border: var(--vp-c-green-dimm-2);
-  --vp-custom-block-tip-text: var(--vp-c-green-light);
+/**
+ * Component: Input
+ * -------------------------------------------------------------------------- */
 
-  --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-2);
-  --vp-custom-block-warning-text: var(--vp-c-yellow-light);
+:root {
+  --vp-input-border-color: var(--vp-c-border);
+  --vp-input-bg-color: var(--vp-c-bg-alt);
+  --vp-input-hover-border-color: var(--vp-c-gray);
 
-  --vp-custom-block-danger-border: var(--vp-c-red-dimm-2);
-  --vp-custom-block-danger-text: var(--vp-c-red-light);
+  --vp-input-switch-bg-color: var(--vp-c-mute);
 }
 
 /**
@@ -358,15 +324,17 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-nav-height: var(--vp-nav-height-mobile);
-  --vp-nav-height-mobile: 56px;
-  --vp-nav-height-desktop: 72px;
+  --vp-nav-height: 64px;
+  --vp-nav-bg-color: var(--vp-c-bg);
+  --vp-nav-screen-bg-color: var(--vp-c-bg);
 }
 
-@media (min-width: 960px) {
-  :root {
-    --vp-nav-height: var(--vp-nav-height-desktop);
-  }
+/**
+ * Component: Local Nav
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-local-nav-bg-color: var(--vp-c-bg);
 }
 
 /**
@@ -375,6 +343,15 @@
 
 :root {
   --vp-sidebar-width: 272px;
+  --vp-sidebar-bg-color: var(--vp-c-bg-alt);
+}
+
+/**
+ * Colors Backdrop
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
 }
 
 /**
@@ -394,33 +371,31 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-badge-info-border: var(--vp-c-divider-light);
+  --vp-badge-info-border: var(--vp-c-border);
   --vp-badge-info-text: var(--vp-c-text-2);
-  --vp-badge-info-bg: var(--vp-c-white-soft);
+  --vp-badge-info-bg: var(--vp-c-bg-soft);
 
-  --vp-badge-tip-border: var(--vp-c-green-dimm-1);
-  --vp-badge-tip-text: var(--vp-c-green-darker);
-  --vp-badge-tip-bg: var(--vp-c-green-dimm-3);
+  --vp-badge-tip-border: var(--vp-c-green-dark);
+  --vp-badge-tip-text: var(--vp-c-green);
+  --vp-badge-tip-bg: var(--vp-c-green-dimm-1);
 
-  --vp-badge-warning-border: var(--vp-c-yellow-dimm-1);
-  --vp-badge-warning-text: var(--vp-c-yellow-darker);
-  --vp-badge-warning-bg: var(--vp-c-yellow-dimm-3);
+  --vp-badge-warning-border: var(--vp-c-yellow-dark);
+  --vp-badge-warning-text: var(--vp-c-yellow);
+  --vp-badge-warning-bg: var(--vp-c-yellow-dimm-1);
 
-  --vp-badge-danger-border: var(--vp-c-red-dimm-1);
-  --vp-badge-danger-text: var(--vp-c-red-darker);
-  --vp-badge-danger-bg: var(--vp-c-red-dimm-3);
+  --vp-badge-danger-border: var(--vp-c-red-dark);
+  --vp-badge-danger-text: var(--vp-c-red);
+  --vp-badge-danger-bg: var(--vp-c-red-dimm-1);
 }
 
-.dark {
-  --vp-badge-info-border: var(--vp-c-divider-light);
-  --vp-badge-info-bg: var(--vp-c-black-mute);
-
-  --vp-badge-tip-border: var(--vp-c-green-dimm-2);
-  --vp-badge-tip-text: var(--vp-c-green-light);
-
-  --vp-badge-warning-border: var(--vp-c-yellow-dimm-2);
-  --vp-badge-warning-text: var(--vp-c-yellow-light);
+/**
+ * Component: CarbonAds
+ * -------------------------------------------------------------------------- */
 
-  --vp-badge-danger-border: var(--vp-c-red-dimm-2);
-  --vp-badge-danger-text: var(--vp-c-red-light);
+:root {
+  --vp-carbon-ads-text-color: var(--vp-c-text-1);
+  --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
+  --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
+  --vp-carbon-ads-hover-text-color: var(--vp-c-brand);
+  --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
 }