From e4f5c51bbe25d42fd52a1cd47e83dda4254fdd7e Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Sun, 20 Aug 2023 02:25:54 +0900
Subject: [PATCH] feat(theme): improve color system (#2797)

close #2100

---------

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 docs/guide/extending-default-theme.md         |   4 +-
 docs/reference/default-theme-badge.md         |  38 +-
 docs/reference/default-theme-home-page.md     |   2 +-
 src/client/theme-default/NotFound.vue         |   8 +-
 .../theme-default/components/VPBadge.vue      |   4 +-
 .../components/VPDocAsideOutline.vue          |  25 +-
 .../theme-default/components/VPDocFooter.vue  |   8 +-
 .../components/VPDocOutlineDropdown.vue       |   2 +-
 .../theme-default/components/VPFeature.vue    |   7 +-
 .../theme-default/components/VPFlyout.vue     |   6 +-
 .../components/VPLocalNavOutlineDropdown.vue  |   2 +-
 .../components/VPLocalSearchBox.vue           |   8 +-
 .../theme-default/components/VPMenuLink.vue   |   6 +-
 .../components/VPNavBarMenuLink.vue           |   4 +-
 .../components/VPNavBarSearch.vue             |   4 +-
 .../components/VPNavBarSearchButton.vue       |   6 +-
 .../components/VPNavScreenMenuGroup.vue       |   4 +-
 .../components/VPNavScreenMenuGroupLink.vue   |   2 +-
 .../components/VPNavScreenMenuLink.vue        |   2 +-
 .../components/VPSidebarItem.vue              |   9 +-
 .../theme-default/components/VPSkipLink.vue   |   2 +-
 .../theme-default/components/VPSwitch.vue     |   2 +-
 .../components/VPTeamMembersItem.vue          |   4 +-
 .../styles/components/custom-block.css        |  34 +-
 .../styles/components/vp-code-group.css       |   3 +-
 .../styles/components/vp-doc.css              |  42 +-
 .../styles/components/vp-sponsor.css          |   2 +-
 src/client/theme-default/styles/vars.css      | 528 +++++++++---------
 template/.vitepress/theme/style.css           |  94 +++-
 29 files changed, 467 insertions(+), 395 deletions(-)

diff --git a/docs/guide/extending-default-theme.md b/docs/guide/extending-default-theme.md
index 332fa97159c5..cafda52ef8ce 100644
--- a/docs/guide/extending-default-theme.md
+++ b/docs/guide/extending-default-theme.md
@@ -29,8 +29,8 @@ export default DefaultTheme
 ```css
 /* .vitepress/theme/custom.css */
 :root {
-  --vp-c-brand: #646cff;
-  --vp-c-brand-light: #747bff;
+  --vp-c-brand-1: #646cff;
+  --vp-c-brand-2: #747bff;
 }
 ```
 
diff --git a/docs/reference/default-theme-badge.md b/docs/reference/default-theme-badge.md
index 404d0dd4097c..e23fde008c36 100644
--- a/docs/reference/default-theme-badge.md
+++ b/docs/reference/default-theme-badge.md
@@ -32,39 +32,25 @@ Code above renders like:
 
 ## Customize Type Color
 
-You can customize the `background-color` of badges by overriding css variables. The following are the default values:
+You can customize the style of badges by overriding css variables. The following are the default values:
 
 ```css
 :root {
-  --vp-badge-info-border: var(--vp-c-divider-light);
+  --vp-badge-info-border: transparent;
   --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-default-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: transparent;
+  --vp-badge-tip-text: var(--vp-c-brand-1);
+  --vp-badge-tip-bg: var(--vp-c-brand-soft);
 
-  --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: transparent;
+  --vp-badge-warning-text: var(--vp-c-warning-1);
+  --vp-badge-warning-bg: var(--vp-c-warning-soft);
 
-  --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);
-}
-
-.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);
-
-  --vp-badge-danger-border: var(--vp-c-red-dimm-2);
-  --vp-badge-danger-text: var(--vp-c-red-light);
+  --vp-badge-danger-border: transparent;
+  --vp-badge-danger-text: var(--vp-c-danger-1);
+  --vp-badge-danger-bg: var(--vp-c-danger-soft);
 }
 ```
 
diff --git a/docs/reference/default-theme-home-page.md b/docs/reference/default-theme-home-page.md
index 449602de7837..bbded8763bde 100644
--- a/docs/reference/default-theme-home-page.md
+++ b/docs/reference/default-theme-home-page.md
@@ -74,7 +74,7 @@ interface HeroAction {
 
 ### Customizing the name color
 
-VitePress uses the brand color (`--vp-c-brand`) for the `name`. However, you may customize this color by overriding `--vp-home-hero-name-color` variable.
+VitePress uses the brand color (`--vp-c-brand-1`) for the `name`. However, you may customize this color by overriding `--vp-home-hero-name-color` variable.
 
 ```css
 :root {
diff --git a/src/client/theme-default/NotFound.vue b/src/client/theme-default/NotFound.vue
index e909bbc90515..8861062fc031 100644
--- a/src/client/theme-default/NotFound.vue
+++ b/src/client/theme-default/NotFound.vue
@@ -91,19 +91,19 @@ onMounted(() => {
 
 .link {
   display: inline-block;
-  border: 1px solid var(--vp-c-brand);
+  border: 1px solid var(--vp-c-brand-1);
   border-radius: 16px;
   padding: 3px 16px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
   transition:
     border-color 0.25s,
     color 0.25s;
 }
 
 .link:hover {
-  border-color: var(--vp-c-brand-dark);
-  color: var(--vp-c-brand-dark);
+  border-color: var(--vp-c-brand-2);
+  color: var(--vp-c-brand-2);
 }
 </style>
diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue
index d87f463835c6..e2edb1b90f51 100644
--- a/src/client/theme-default/components/VPBadge.vue
+++ b/src/client/theme-default/components/VPBadge.vue
@@ -20,7 +20,7 @@ defineProps<{
   padding: 0 10px;
   line-height: 22px;
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   transform: translateY(-2px);
 }
 
@@ -31,13 +31,11 @@ defineProps<{
 
 .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;
 }
 
diff --git a/src/client/theme-default/components/VPDocAsideOutline.vue b/src/client/theme-default/components/VPDocAsideOutline.vue
index 7f055a1137cb..9a4aab9f91e0 100644
--- a/src/client/theme-default/components/VPDocAsideOutline.vue
+++ b/src/client/theme-default/components/VPDocAsideOutline.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onContentUpdated } from 'vitepress'
 import { ref, shallowRef } from 'vue'
 import { useData } from '../composables/data'
 import {
@@ -8,16 +9,13 @@ import {
   type MenuItem
 } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
-import { onContentUpdated } from 'vitepress'
 
 const { frontmatter, theme } = useData()
 
 const headers = shallowRef<MenuItem[]>([])
 
 onContentUpdated(() => {
-  headers.value = getHeaders(
-    frontmatter.value.outline ?? theme.value.outline
-  )
+  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
 })
 
 const container = ref()
@@ -27,11 +25,16 @@ useActiveAnchor(container, marker)
 </script>
 
 <template>
-  <div class="VPDocAsideOutline" :class="{ 'has-outline': headers.length > 0 }" ref="container">
+  <div
+    class="VPDocAsideOutline"
+    :class="{ 'has-outline': headers.length > 0 }"
+    ref="container"
+    role="navigation"
+  >
     <div class="content">
       <div class="outline-marker" ref="marker" />
 
-      <div class="outline-title">{{ resolveTitle(theme) }}</div>
+      <div class="outline-title" role="heading">{{ resolveTitle(theme) }}</div>
 
       <nav aria-labelledby="doc-outline-aria-label">
         <span class="visually-hidden" id="doc-outline-aria-label">
@@ -66,10 +69,14 @@ useActiveAnchor(container, marker)
   left: -1px;
   z-index: 0;
   opacity: 0;
-  width: 1px;
+  width: 2px;
+  border-radius: 2px;
   height: 18px;
-  background-color: var(--vp-c-brand);
-  transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;
+  background-color: var(--vp-c-brand-1);
+  transition:
+    top 0.25s cubic-bezier(0, 1, 0.5, 1),
+    background-color 0.5s,
+    opacity 0.25s;
 }
 
 .outline-title {
diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index be1dda930710..db56d5696d0e 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -83,12 +83,12 @@ const showFooter = computed(() => {
   line-height: 32px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
   transition: color 0.25s;
 }
 
 .edit-link-button:hover {
-  color: var(--vp-c-brand-dark);
+  color: var(--vp-c-brand-2);
 }
 
 .edit-link-icon {
@@ -123,7 +123,7 @@ const showFooter = computed(() => {
 }
 
 .pager-link:hover {
-  border-color: var(--vp-c-brand);
+  border-color: var(--vp-c-brand-1);
 }
 
 .pager-link.next {
@@ -144,7 +144,7 @@ const showFooter = computed(() => {
   line-height: 20px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
   transition: color 0.25s;
 }
 </style>
diff --git a/src/client/theme-default/components/VPDocOutlineDropdown.vue b/src/client/theme-default/components/VPDocOutlineDropdown.vue
index dc276055628f..e6009402554d 100644
--- a/src/client/theme-default/components/VPDocOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPDocOutlineDropdown.vue
@@ -47,7 +47,7 @@ onContentUpdated(() => {
   border: 1px solid var(--vp-c-border);
   padding: 4px 12px;
   color: var(--vp-c-text-2);
-  background-color: var(--vp-c-mute);
+  background-color: var(--vp-c-default-soft);
   border-radius: 8px;
   transition: color 0.5s;
 }
diff --git a/src/client/theme-default/components/VPFeature.vue b/src/client/theme-default/components/VPFeature.vue
index cb97c36bb246..233a9c2048e6 100644
--- a/src/client/theme-default/components/VPFeature.vue
+++ b/src/client/theme-default/components/VPFeature.vue
@@ -48,8 +48,7 @@ defineProps<{
 }
 
 .VPFeature.link:hover {
-  border-color: var(--vp-c-brand);
-  background-color: var(--vp-c-bg-soft-up);
+  border-color: var(--vp-c-brand-1);
 }
 
 .box {
@@ -69,7 +68,7 @@ defineProps<{
   align-items: center;
   margin-bottom: 20px;
   border-radius: 6px;
-  background-color: var(--vp-c-bg-soft-down);
+  background-color: var(--vp-c-default-soft);
   width: 48px;
   height: 48px;
   font-size: 24px;
@@ -100,7 +99,7 @@ defineProps<{
   align-items: center;
   font-size: 14px;
   font-weight: 500;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .link-text-icon {
diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index ede320d2a5b2..57118fe77821 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -60,7 +60,7 @@ function onBlur() {
 }
 
 .VPFlyout:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
   transition: color 0.25s;
 }
 
@@ -73,11 +73,11 @@ function onBlur() {
 }
 
 .VPFlyout.active .text {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .VPFlyout.active:hover .text {
-  color: var(--vp-c-brand-dark);
+  color: var(--vp-c-brand-2);
 }
 
 .VPFlyout:hover .menu,
diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
index 6012ff2de8a7..d31e9f3ffc02 100644
--- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
@@ -138,7 +138,7 @@ function scrollToTop() {
   line-height: 48px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .outline {
diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue
index fa25b898d675..eff3acfb4711 100644
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/src/client/theme-default/components/VPLocalSearchBox.vue
@@ -692,7 +692,7 @@ function formMarkRegex(terms: Set<string>) {
 }
 
 .search-bar:focus-within {
-  border-color: var(--vp-c-brand);
+  border-color: var(--vp-c-brand-1);
 }
 
 .search-icon {
@@ -740,7 +740,7 @@ function formMarkRegex(terms: Set<string>) {
 
 .search-actions button:not([disabled]):hover,
 .toggle-layout-button.detailed-list {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .search-actions button.clear-button:disabled {
@@ -834,7 +834,7 @@ function formMarkRegex(terms: Set<string>) {
 .title-icon {
   opacity: 0.5;
   font-weight: 500;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .title svg {
@@ -907,7 +907,7 @@ function formMarkRegex(terms: Set<string>) {
 
 .result.selected .titles,
 .result.selected .title-icon {
-  color: var(--vp-c-brand) !important;
+  color: var(--vp-c-brand-1) !important;
 }
 
 .no-results {
diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
index f4f209850fa6..52b4fac38ea0 100644
--- a/src/client/theme-default/components/VPMenuLink.vue
+++ b/src/client/theme-default/components/VPMenuLink.vue
@@ -44,11 +44,11 @@ const { page } = useData()
 }
 
 .link:hover {
-  color: var(--vp-c-brand);
-  background-color: var(--vp-c-bg-elv-mute);
+  color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-default-soft);
 }
 
 .link.active {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBarMenuLink.vue b/src/client/theme-default/components/VPNavBarMenuLink.vue
index 2f042f19a64b..a77636d41eee 100644
--- a/src/client/theme-default/components/VPNavBarMenuLink.vue
+++ b/src/client/theme-default/components/VPNavBarMenuLink.vue
@@ -43,10 +43,10 @@ const { page } = useData()
 }
 
 .VPNavBarMenuLink.active {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .VPNavBarMenuLink:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue
index 728d04c2abaa..32d78880009c 100644
--- a/src/client/theme-default/components/VPNavBarSearch.vue
+++ b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -204,12 +204,12 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
 }
 
 .DocSearch-Form {
-  border: 1px solid var(--vp-c-brand);
+  border: 1px solid var(--vp-c-brand-1);
   background-color: var(--vp-c-white);
 }
 
 .dark .DocSearch-Form {
-  background-color: var(--vp-c-bg-soft-mute);
+  background-color: var(--vp-c-default-soft);
 }
 
 .DocSearch-Screen-Icon > svg {
diff --git a/src/client/theme-default/components/VPNavBarSearchButton.vue b/src/client/theme-default/components/VPNavBarSearchButton.vue
index 204378d55241..ffc83c00045f 100644
--- a/src/client/theme-default/components/VPNavBarSearchButton.vue
+++ b/src/client/theme-default/components/VPNavBarSearchButton.vue
@@ -34,7 +34,7 @@ defineProps<{
 
 <style>
 [class*='DocSearch'] {
-  --docsearch-primary-color: var(--vp-c-brand);
+  --docsearch-primary-color: var(--vp-c-brand-1);
   --docsearch-highlight-color: var(--docsearch-primary-color);
   --docsearch-text-color: var(--vp-c-text-1);
   --docsearch-muted-color: var(--vp-c-text-2);
@@ -51,7 +51,7 @@ defineProps<{
   --docsearch-modal-shadow: none;
   --docsearch-footer-shadow: none;
   --docsearch-logo-color: var(--vp-c-text-2);
-  --docsearch-hit-background: var(--vp-c-bg-soft-mute);
+  --docsearch-hit-background: var(--vp-c-default-soft);
   --docsearch-hit-color: var(--vp-c-text-2);
   --docsearch-hit-shadow: none;
 }
@@ -93,7 +93,7 @@ defineProps<{
   }
 
   .DocSearch-Button:hover {
-    border-color: var(--vp-c-brand);
+    border-color: var(--vp-c-brand-1);
     background: var(--vp-c-bg-alt);
   }
 }
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
index a78ed734c76c..ea7ee8995dfb 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
@@ -72,7 +72,7 @@ function toggle() {
 
 .VPNavScreenMenuGroup.open .button {
   padding-bottom: 6px;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .VPNavScreenMenuGroup.open .button-icon {
@@ -94,7 +94,7 @@ function toggle() {
 }
 
 .button:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .button-icon {
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
index 550decb4fb0a..e84a977006cd 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
@@ -34,6 +34,6 @@ const closeScreen = inject('close-screen') as () => void
 }
 
 .VPNavScreenMenuGroupLink:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavScreenMenuLink.vue b/src/client/theme-default/components/VPNavScreenMenuLink.vue
index 85977bc136fb..e612361e4665 100644
--- a/src/client/theme-default/components/VPNavScreenMenuLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuLink.vue
@@ -35,6 +35,6 @@ const closeScreen = inject('close-screen') as () => void
 }
 
 .VPNavScreenMenuLink:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index 6b1c1b207f3a..e1de7edf93a3 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -117,7 +117,8 @@ function onCaretClick() {
   top: 6px;
   bottom: 6px;
   left: -17px;
-  width: 1px;
+  width: 2px;
+  border-radius: 2px;
   transition: background-color 0.25s;
 }
 
@@ -125,7 +126,7 @@ function onCaretClick() {
 .VPSidebarItem.level-3.is-active > .item > .indicator,
 .VPSidebarItem.level-4.is-active > .item > .indicator,
 .VPSidebarItem.level-5.is-active > .item > .indicator {
-  background-color: var(--vp-c-brand);
+  background-color: var(--vp-c-brand-1);
 }
 
 .link {
@@ -162,7 +163,7 @@ function onCaretClick() {
 .VPSidebarItem.level-3.is-link > .item > .link:hover .text,
 .VPSidebarItem.level-4.is-link > .item > .link:hover .text,
 .VPSidebarItem.level-5.is-link > .item > .link:hover .text {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .VPSidebarItem.level-0.has-active > .item > .text,
@@ -186,7 +187,7 @@ function onCaretClick() {
 .VPSidebarItem.level-3.is-active > .item .link > .text,
 .VPSidebarItem.level-4.is-active > .item .link > .text,
 .VPSidebarItem.level-5.is-active > .item .link > .text {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .caret {
diff --git a/src/client/theme-default/components/VPSkipLink.vue b/src/client/theme-default/components/VPSkipLink.vue
index b815bab56794..4159e64e9087 100644
--- a/src/client/theme-default/components/VPSkipLink.vue
+++ b/src/client/theme-default/components/VPSkipLink.vue
@@ -47,7 +47,7 @@ function focusOnTargetAnchor({ target }: Event) {
   font-size: 12px;
   font-weight: bold;
   text-decoration: none;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
   box-shadow: var(--vp-shadow-3);
   background-color: var(--vp-c-bg);
 }
diff --git a/src/client/theme-default/components/VPSwitch.vue b/src/client/theme-default/components/VPSwitch.vue
index db51312fb83b..6d89cf2e8a73 100644
--- a/src/client/theme-default/components/VPSwitch.vue
+++ b/src/client/theme-default/components/VPSwitch.vue
@@ -22,7 +22,7 @@
 }
 
 .VPSwitch:hover {
-  border-color: var(--vp-input-hover-border-color);
+  border-color: var(--vp-c-brand-1);
 }
 
 .check {
diff --git a/src/client/theme-default/components/VPTeamMembersItem.vue b/src/client/theme-default/components/VPTeamMembersItem.vue
index 01842558c6b0..b8ee73f58eef 100644
--- a/src/client/theme-default/components/VPTeamMembersItem.vue
+++ b/src/client/theme-default/components/VPTeamMembersItem.vue
@@ -171,7 +171,7 @@ defineProps<{
 }
 
 .org.link:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .desc {
@@ -180,7 +180,7 @@ defineProps<{
 
 .desc :deep(a) {
   font-weight: 500;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
   text-decoration-style: dotted;
   transition: color 0.25s;
 }
diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css
index 116214295d1c..5386b287238c 100644
--- a/src/client/theme-default/styles/components/custom-block.css
+++ b/src/client/theme-default/styles/components/custom-block.css
@@ -13,10 +13,9 @@
   background-color: var(--vp-custom-block-info-bg);
 }
 
-.custom-block.custom-block th,
-.custom-block.custom-block blockquote > p {
-  font-size: var(--vp-custom-block-font-size);
-  color: inherit;
+.custom-block.info a,
+.custom-block.info code {
+  color: var(--vp-c-brand-1);
 }
 
 .custom-block.info code {
@@ -29,6 +28,11 @@
   background-color: var(--vp-custom-block-tip-bg);
 }
 
+.custom-block.tip a,
+.custom-block.tip code {
+  color: var(--vp-c-brand-1);
+}
+
 .custom-block.tip code {
   background-color: var(--vp-custom-block-tip-code-bg);
 }
@@ -39,6 +43,11 @@
   background-color: var(--vp-custom-block-warning-bg);
 }
 
+.custom-block.warning a,
+.custom-block.warning code {
+  color: var(--vp-c-warning-1);
+}
+
 .custom-block.warning code {
   background-color: var(--vp-custom-block-warning-code-bg);
 }
@@ -49,6 +58,11 @@
   background-color: var(--vp-custom-block-danger-bg);
 }
 
+.custom-block.danger a,
+.custom-block.danger code {
+  color: var(--vp-c-danger-1);
+}
+
 .custom-block.danger code {
   background-color: var(--vp-custom-block-danger-code-bg);
 }
@@ -59,6 +73,10 @@
   background-color: var(--vp-custom-block-details-bg);
 }
 
+.custom-block.details a {
+  color: var(--vp-c-brand-1);
+}
+
 .custom-block.details code {
   background-color: var(--vp-custom-block-details-code-bg);
 }
@@ -84,7 +102,7 @@
 .custom-block a {
   color: inherit;
   font-weight: 600;
-  text-decoration: underline dotted;
+  text-decoration: underline;
   text-underline-offset: 2px;
   transition: opacity 0.25s;
 }
@@ -96,3 +114,9 @@
 .custom-block code {
   font-size: var(--vp-custom-block-code-font-size);
 }
+
+.custom-block.custom-block th,
+.custom-block.custom-block blockquote > p {
+  font-size: var(--vp-custom-block-font-size);
+  color: inherit;
+}
diff --git a/src/client/theme-default/styles/components/vp-code-group.css b/src/client/theme-default/styles/components/vp-code-group.css
index 44beaad88019..4f23a41692da 100644
--- a/src/client/theme-default/styles/components/vp-code-group.css
+++ b/src/client/theme-default/styles/components/vp-code-group.css
@@ -48,7 +48,8 @@
   bottom: -1px;
   left: 8px;
   z-index: 1;
-  height: 1px;
+  height: 2px;
+  border-radius: 2px;
   content: '';
   background-color: transparent;
   transition: background-color 0.25s;
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 12c5bf2d6a69..47cc4f3d1c05 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -43,6 +43,7 @@
   font-weight: 500;
   user-select: none;
   opacity: 0;
+  text-decoration: none;
   transition:
     color 0.25s,
     opacity 0.25s;
@@ -108,12 +109,16 @@
 
 .vp-doc a {
   font-weight: 500;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition:
+    color 0.25s,
+    opacity 0.25s;
 }
 
 .vp-doc a:hover {
-  text-decoration: underline dotted;
-  text-underline-offset: 2px;
+  color: var(--vp-c-brand-2);
 }
 
 .vp-doc strong {
@@ -212,17 +217,6 @@
   margin: 0;
 }
 
-.vp-doc .custom-block a {
-  color: inherit;
-  font-weight: 600;
-}
-
-.vp-doc .custom-block code {
-  font-size: var(--vp-custom-block-code-font-size);
-  font-weight: 700;
-  color: inherit;
-}
-
 .vp-doc .custom-block div[class*='language-'] {
   margin: 8px 0;
   border-radius: 8px;
@@ -245,28 +239,32 @@
 /* inline code */
 .vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
   font-size: var(--vp-code-font-size);
+  color: var(--vp-code-color);
 }
 
 .vp-doc :not(pre) > code {
   border-radius: 4px;
   padding: 3px 6px;
-  color: var(--vp-c-text-code);
-  background-color: var(--vp-c-mute);
+  background-color: var(--vp-code-bg);
   transition:
-    color 0.5s,
+    color 0.25s,
     background-color 0.5s;
 }
 
+.vp-doc a > code {
+  color: var(--vp-code-link-color);
+}
+
+.vp-doc a:hover > code {
+  color: var(--vp-code-link-hover-color);
+}
+
 .vp-doc h1 > code,
 .vp-doc h2 > code,
 .vp-doc h3 > code {
   font-size: 0.9em;
 }
 
-.vp-doc a > code {
-  color: var(--vp-c-brand);
-}
-
 .vp-doc div[class*='language-'],
 .vp-block {
   position: relative;
@@ -506,7 +504,7 @@
   z-index: 2;
   font-size: 12px;
   font-weight: 500;
-  color: var(--vp-c-code-dimm);
+  color: var(--vp-code-lang-color);
   transition:
     color 0.4s,
     opacity 0.4s;
diff --git a/src/client/theme-default/styles/components/vp-sponsor.css b/src/client/theme-default/styles/components/vp-sponsor.css
index da2160bb0345..9d7a2a5c5028 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-soft-down);
+  background-color: var(--vp-c-default-soft);
 }
 
 .vp-sponsor-grid-item:hover .vp-sponsor-grid-image {
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 138f5d4acd2d..21697111c30d 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -1,193 +1,229 @@
 /**
- * Colors Base
- *
- * These are the pure base color presets. Most of the time, you should not be
- * using these colors directly in the theme but rather use "Colors Theme"
- * instead because those are "Theme (light or dark)" dependant.
+ * Colors: Solid
  * -------------------------------------------------------------------------- */
 
 :root {
   --vp-c-white: #ffffff;
   --vp-c-black: #000000;
-  --vp-c-gray: #8e8e93;
 
-  --vp-c-text-light-1: rgba(60, 60, 67);
-  --vp-c-text-light-2: rgba(60, 60, 67, 0.75);
-  --vp-c-text-light-3: rgba(60, 60, 67, 0.33);
+  --vp-c-neutral: var(--vp-c-black);
+  --vp-c-neutral-inverse: var(--vp-c-white);
+}
+
+.dark {
+  --vp-c-neutral: var(--vp-c-white);
+  --vp-c-neutral-inverse: var(--vp-c-black);
+}
+
+/**
+ * Colors: Palette
+ *
+ * The primitive colors used for accent colors. These colors are referenced
+ * by functional colors such as "Text", "Background", or "Brand".
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *    It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *    top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *    or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *    on top of it.
+ *
+ *    The soft color must be semi transparent alpha channel. This is crucial
+ *    because it allows adding multiple "soft" colors on top of each other
+ *    to create a accent, such as when having inline code block inside
+ *    custom containers.
+ * -------------------------------------------------------------------------- */
 
-  --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);
+:root {
+  --vp-c-gray-1: #dddde3;
+  --vp-c-gray-2: #e4e4e9;
+  --vp-c-gray-3: #ebebef;
+  --vp-c-gray-soft: rgba(142, 150, 170, 0.14);
+
+  --vp-c-indigo-1: #3451b2;
+  --vp-c-indigo-2: #3a5ccc;
+  --vp-c-indigo-3: #5672cd;
+  --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
+
+  --vp-c-green-1: #18794e;
+  --vp-c-green-2: #299764;
+  --vp-c-green-3: #30a46c;
+  --vp-c-green-soft: rgba(16, 185, 129, 0.14);
+
+  --vp-c-yellow-1: #915930;
+  --vp-c-yellow-2: #946300;
+  --vp-c-yellow-3: #9f6a00;
+  --vp-c-yellow-soft: rgba(234, 79, 8, 0.14);
+
+  --vp-c-red-1: #b8272c;
+  --vp-c-red-2: #d5393e;
+  --vp-c-red-3: #e0575b;
+  --vp-c-red-soft: rgba(244, 63, 94, 0.14);
 
   --vp-c-sponsor: #db2777;
 }
 
+.dark {
+  --vp-c-gray-1: #515c67;
+  --vp-c-gray-2: #414853;
+  --vp-c-gray-3: #32363f;
+  --vp-c-gray-soft: rgba(101, 117, 133, 0.16);
+
+  --vp-c-indigo-1: #a8b1ff;
+  --vp-c-indigo-2: #5c73e7;
+  --vp-c-indigo-3: #3e63dd;
+  --vp-c-indigo-soft: rgba(100, 108, 255, 0.16);
+
+  --vp-c-green-1: #3dd68c;
+  --vp-c-green-2: #30a46c;
+  --vp-c-green-3: #298459;
+  --vp-c-green-soft: rgba(16, 185, 129, 0.16);
+
+  --vp-c-yellow-1: #f9b44e;
+  --vp-c-yellow-2: #da8b17;
+  --vp-c-yellow-3: #a46a0a;
+  --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
+
+  --vp-c-red-1: #f66f81;
+  --vp-c-red-2: #f14158;
+  --vp-c-red-3: #b62a3c;
+  --vp-c-red-soft: rgba(244, 63, 94, 0.16);
+}
+
 /**
- * Colors Theme
+ * Colors: Background
+ *
+ * - `bg`: The bg color used for main screen.
+ *
+ * - `bg-alt`: The alternative bg color used in places such as "sidebar",
+ *   or "code block".
+ *
+ * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
+ *   such as "dialog".
+ *
+ * - `bg-soft`: The bg color to slightly ditinguish some components from
+ *   the page. Used for things like "carbon ads" or "table".
  * -------------------------------------------------------------------------- */
 
 :root {
   --vp-c-bg: #ffffff;
-
+  --vp-c-bg-alt: #f6f6f7;
   --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-soft: #f6f6f7;
-  --vp-c-bg-soft-up: #f9f9fa;
-  --vp-c-bg-soft-down: #e3e3e5;
-  --vp-c-bg-soft-mute: #e3e3e5;
+}
 
-  --vp-c-bg-alt: #f6f6f7;
+.dark {
+  --vp-c-bg: #1b1b1f;
+  --vp-c-bg-alt: #161618;
+  --vp-c-bg-elv: #202127;
+  --vp-c-bg-soft: #202127;
+}
 
+/**
+ * Colors: Borders
+ *
+ * - `divider`: This is used for separators. This is used to divide sections
+ *   within the same components, such as having separator on "h2" heading.
+ *
+ * - `border`: This is designed for borders on interactive components.
+ *   For example this should be used for a button outline.
+ *
+ * - `gutter`: This is used to divide components in the page. For example
+ *   the header and the lest of the page.
+ * -------------------------------------------------------------------------- */
+
+:root {
   --vp-c-border: #c2c2c4;
   --vp-c-divider: #e2e2e3;
   --vp-c-gutter: #e2e2e3;
-
-  --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-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-code: #476582;
-
-  --vp-c-mute: #eeeef0;
-  --vp-c-mute-light: #f3f3f9;
-  --vp-c-mute-lighter: #f9f9fa;
-  --vp-c-mute-dark: #e3e3e5;
-  --vp-c-mute-darker: #d7d7d9;
-
-  --vp-c-brand: #4565d8;
-  --vp-c-brand-light: #708fff;
-  --vp-c-brand-lighter: #a4b2ff;
-  --vp-c-brand-lightest: #ecefff;
-  --vp-c-brand-dark: #4565d8;
-  --vp-c-brand-darker: #23459f;
-  --vp-c-brand-darkest: #132f59;
-  --vp-c-brand-dimm-1: rgba(112, 143, 255, 0.05);
-  --vp-c-brand-dimm-2: rgba(112, 143, 255, 0.2);
-  --vp-c-brand-dimm-3: rgba(112, 143, 255, 0.5);
-
-  --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: #d97706;
-  --vp-c-yellow-light: #f59e0b;
-  --vp-c-yellow-lighter: #fbbf24;
-  --vp-c-yellow-lightest: #fcd34d;
-  --vp-c-yellow-dark: #b45309;
-  --vp-c-yellow-darker: #92400e;
-  --vp-c-yellow-darkest: #6c3d08;
-  --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-lightest: #fdd6e0;
-  --vp-c-red-dark: #e11d48;
-  --vp-c-red-darker: #be123c;
-  --vp-c-red-darkest: #9f1239;
-  --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);
 }
 
 .dark {
-  --vp-c-bg: #1e1e20;
-
-  --vp-c-bg-elv: #252529;
-  --vp-c-bg-elv-up: #323238;
-  --vp-c-bg-elv-down: #1e1e20;
-  --vp-c-bg-elv-mute: #323238;
+  --vp-c-border: #3c3f44;
+  --vp-c-divider: #2e2e32;
+  --vp-c-gutter: #000000;
+}
 
-  --vp-c-bg-soft: #252529;
-  --vp-c-bg-soft-up: #323238;
-  --vp-c-bg-soft-down: #1e1e20;
-  --vp-c-bg-soft-mute: #323238;
+/**
+ * Colors: Text
+ *
+ * - `text-1`: Used for primary text.
+ *
+ * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
+ *
+ * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
+ * -------------------------------------------------------------------------- */
 
-  --vp-c-bg-alt: #161618;
+:root {
+  --vp-c-text-1: rgba(60, 60, 67);
+  --vp-c-text-2: rgba(60, 60, 67, 0.78);
+  --vp-c-text-3: rgba(60, 60, 67, 0.56);
+}
 
-  --vp-c-border: rgba(82, 82, 89, 0.68);
-  --vp-c-divider: rgba(82, 82, 89, 0.32);
-  --vp-c-gutter: #000000;
+.dark {
+  --vp-c-text-1: rgba(255, 255, 245, 0.86);
+  --vp-c-text-2: rgba(235, 235, 245, 0.6);
+  --vp-c-text-3: rgba(235, 235, 245, 0.38);
+}
 
-  --vp-c-neutral: var(--vp-c-white);
-  --vp-c-neutral-inverse: var(--vp-c-black);
+/**
+ * Colors: Function
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ *
+ * To understand the scaling system, refer to "Colors: Palette" section.
+ * -------------------------------------------------------------------------- */
 
-  --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-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-code: #c9def1;
-
-  --vp-c-mute: #323238;
-  --vp-c-mute-light: #3a3a3c;
-  --vp-c-mute-lighter: #505053;
-  --vp-c-mute-dark: #222226;
-  --vp-c-mute-darker: #505053;
-
-  --vp-c-brand: #708fff;
-  --vp-c-brand-light: #a4b2ff;
-  --vp-c-brand-lighter: #a4c8ff;
-  --vp-c-brand-lightest: #ecefff;
-  --vp-c-brand-dark: #4565d8;
-  --vp-c-brand-darker: #23459f;
-  --vp-c-brand-darkest: #132f59;
-  --vp-c-brand-dimm-1: rgba(112, 143, 255, 0.05);
-  --vp-c-brand-dimm-2: rgba(112, 143, 255, 0.2);
-  --vp-c-brand-dimm-3: rgba(112, 143, 255, 0.5);
-
-  --vp-c-green: #10b981;
-  --vp-c-green-light: #34d399;
-  --vp-c-green-lighter: #6ee7b7;
-  --vp-c-green-lightest: #a7f3d0;
-  --vp-c-green-dark: #059669;
-  --vp-c-green-darker: #047857;
-  --vp-c-green-darkest: #065f46;
-  --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: #d1a336;
-  --vp-c-yellow-light: #f8e3a1;
-  --vp-c-yellow-lighter: #fff0c0;
-  --vp-c-yellow-lightest: #fff7dc;
-  --vp-c-yellow-dark: #b45309;
-  --vp-c-yellow-darker: #92400e;
-  --vp-c-yellow-darkest: #6c3d08;
-  --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-lightest: #fdd6e0;
-  --vp-c-red-dark: #e11d48;
-  --vp-c-red-darker: #be123c;
-  --vp-c-red-darkest: #9f1239;
-  --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);
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  /* DEPRECATED: Use `--vp-c-brand-1` instead. */
+  --vp-c-brand: var(--vp-c-brand-1);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
 }
 
 /**
@@ -260,62 +296,41 @@
 :root {
   --vp-code-line-height: 1.7;
   --vp-code-font-size: 0.875em;
-  --vp-c-code-dimm: var(--vp-c-text-dark-3);
+  --vp-code-color: var(--vp-c-brand-1);
+  --vp-code-link-color: var(--vp-c-brand-1);
+  --vp-code-link-hover-color: var(--vp-c-brand-2);
+  --vp-code-bg: var(--vp-c-default-soft);
 
-  --vp-code-block-color: var(--vp-c-text-dark-1);
-  --vp-code-block-bg: #161618;
-  --vp-code-block-bg-light: #1e1e20;
-  --vp-code-block-divider-color: #000000;
+  --vp-code-block-color: var(--vp-c-text-2);
+  --vp-code-block-bg: var(--vp-c-bg-alt);
+  --vp-code-block-divider-color: var(--vp-c-gutter);
 
-  --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
-  --vp-code-line-number-color: var(--vp-c-code-dimm);
+  --vp-code-lang-color: var(--vp-c-text-3);
 
-  --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-highlight-color: var(--vp-c-default-soft);
+  --vp-code-line-number-color: var(--vp-c-text-3);
 
-  --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-diff-add-color: var(--vp-c-green-soft);
+  --vp-code-line-diff-add-symbol-color: var(--vp-c-green-1);
 
-  --vp-code-line-warning-color: var(--vp-c-yellow-dimm-2);
-  --vp-code-line-error-color: var(--vp-c-red-dimm-2);
+  --vp-code-line-diff-remove-color: var(--vp-c-red-soft);
+  --vp-code-line-diff-remove-symbol-color: var(--vp-c-red-1);
 
-  --vp-code-copy-code-border-color: transparent;
-  --vp-code-copy-code-bg: var(--vp-code-block-bg-light);
-  --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
-  --vp-code-copy-code-hover-bg: var(--vp-code-block-bg-light);
-  --vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
+  --vp-code-line-warning-color: var(--vp-c-yellow-soft);
+  --vp-code-line-error-color: var(--vp-c-red-soft);
 
-  --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-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: #161618;
-}
-
-:root:not(.dark) .vp-adaptive-theme {
-  --vp-c-code-dimm: var(--vp-c-text-2);
-
-  --vp-code-block-color: var(--vp-c-text-1);
-  --vp-code-block-bg: #f8f8f8;
-  --vp-code-block-divider-color: var(--vp-c-divider);
-
-  --vp-code-line-highlight-color: #ececec;
-  --vp-code-line-number-color: var(--vp-c-code-dimm);
-
-  --vp-code-copy-code-bg: #e2e2e2;
-  --vp-code-copy-code-hover-bg: #dcdcdc;
+  --vp-code-copy-code-border-color: var(--vp-c-divider);
+  --vp-code-copy-code-bg: var(--vp-c-bg-soft);
+  --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
+  --vp-code-copy-code-hover-bg: var(--vp-c-bg);
   --vp-code-copy-code-active-text: var(--vp-c-text-2);
 
-  --vp-code-tab-divider: var(--vp-c-divider);
+  --vp-code-tab-divider: var(--vp-code-block-divider-color);
   --vp-code-tab-text-color: var(--vp-c-text-2);
   --vp-code-tab-bg: var(--vp-code-block-bg);
   --vp-code-tab-hover-text-color: var(--vp-c-text-1);
   --vp-code-tab-active-text-color: var(--vp-c-text-1);
+  --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
 }
 
 /**
@@ -323,28 +338,28 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-button-brand-border: var(--vp-c-brand);
+  --vp-button-brand-border: transparent;
   --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-bg: var(--vp-c-brand-dark);
-  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
   --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-darker);
-  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
   --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-c-brand-darkest);
-
-  --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);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+
+  --vp-button-alt-border: transparent;
+  --vp-button-alt-text: var(--vp-c-text-1);
+  --vp-button-alt-bg: var(--vp-c-default-3);
+  --vp-button-alt-hover-border: transparent;
+  --vp-button-alt-hover-text: var(--vp-c-text-1);
+  --vp-button-alt-hover-bg: var(--vp-c-default-2);
+  --vp-button-alt-active-border: transparent;
+  --vp-button-alt-active-text: var(--vp-c-text-1);
+  --vp-button-alt-active-bg: var(--vp-c-default-1);
+
+  --vp-button-sponsor-border: var(--vp-c-text-2);
+  --vp-button-sponsor-text: var(--vp-c-text-2);
   --vp-button-sponsor-bg: transparent;
   --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
   --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
@@ -354,11 +369,6 @@
   --vp-button-sponsor-active-bg: transparent;
 }
 
-.dark {
-  --vp-button-sponsor-border: var(--vp-c-gray-dark-1);
-  --vp-button-sponsor-text: var(--vp-c-text-dark-2);
-}
-
 /**
  * Component: Custom Block
  * -------------------------------------------------------------------------- */
@@ -367,30 +377,30 @@
   --vp-custom-block-font-size: 14px;
   --vp-custom-block-code-font-size: 13px;
 
-  --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-bg-soft);
-  --vp-custom-block-info-code-bg: var(--vp-c-mute);
+  --vp-custom-block-info-border: transparent;
+  --vp-custom-block-info-text: var(--vp-c-text-1);
+  --vp-custom-block-info-bg: var(--vp-c-default-soft);
+  --vp-custom-block-info-code-bg: var(--vp-c-default-soft);
 
-  --vp-custom-block-tip-border: var(--vp-c-brand);
-  --vp-custom-block-tip-text: var(--vp-c-brand);
-  --vp-custom-block-tip-bg: var(--vp-c-bg-soft);
-  --vp-custom-block-tip-code-bg: var(--vp-c-mute);
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
 
-  --vp-custom-block-warning-border: var(--vp-c-yellow);
-  --vp-custom-block-warning-text: var(--vp-c-yellow);
-  --vp-custom-block-warning-bg: var(--vp-c-bg-soft);
-  --vp-custom-block-warning-code-bg: var(--vp-c-mute);
+  --vp-custom-block-warning-border: transparent;
+  --vp-custom-block-warning-text: var(--vp-c-text-1);
+  --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
+  --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
 
-  --vp-custom-block-danger-border: var(--vp-c-red);
-  --vp-custom-block-danger-text: var(--vp-c-red);
-  --vp-custom-block-danger-bg: var(--vp-c-bg-soft);
-  --vp-custom-block-danger-code-bg: var(--vp-c-mute);
+  --vp-custom-block-danger-border: transparent;
+  --vp-custom-block-danger-text: var(--vp-c-text-1);
+  --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
+  --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
 
   --vp-custom-block-details-border: var(--vp-custom-block-info-border);
   --vp-custom-block-details-text: var(--vp-custom-block-info-text);
   --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
-  --vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg);
+  --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
 }
 
 /**
@@ -400,9 +410,8 @@
 :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-input-switch-bg-color: var(--vp-c-mute);
+  --vp-input-switch-bg-color: var(--vp-c-gray-soft);
 }
 
 /**
@@ -446,7 +455,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-home-hero-name-color: var(--vp-c-brand);
+  --vp-home-hero-name-color: var(--vp-c-brand-1);
   --vp-home-hero-name-background: transparent;
 
   --vp-home-hero-image-background-image: none;
@@ -458,21 +467,21 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-badge-info-border: var(--vp-c-border);
+  --vp-badge-info-border: transparent;
   --vp-badge-info-text: var(--vp-c-text-2);
-  --vp-badge-info-bg: var(--vp-c-mute);
+  --vp-badge-info-bg: var(--vp-c-default-soft);
 
-  --vp-badge-tip-border: var(--vp-c-brand);
-  --vp-badge-tip-text: var(--vp-c-brand);
-  --vp-badge-tip-bg: var(--vp-c-brand-dimm-1);
+  --vp-badge-tip-border: transparent;
+  --vp-badge-tip-text: var(--vp-c-brand-1);
+  --vp-badge-tip-bg: var(--vp-c-brand-soft);
 
-  --vp-badge-warning-border: var(--vp-c-yellow);
-  --vp-badge-warning-text: var(--vp-c-yellow);
-  --vp-badge-warning-bg: var(--vp-c-yellow-dimm-1);
+  --vp-badge-warning-border: transparent;
+  --vp-badge-warning-text: var(--vp-c-warning-1);
+  --vp-badge-warning-bg: var(--vp-c-warning-soft);
 
-  --vp-badge-danger-border: var(--vp-c-red);
-  --vp-badge-danger-text: var(--vp-c-red);
-  --vp-badge-danger-bg: var(--vp-c-red-dimm-1);
+  --vp-badge-danger-border: transparent;
+  --vp-badge-danger-text: var(--vp-c-danger-1);
+  --vp-badge-danger-bg: var(--vp-c-danger-soft);
 }
 
 /**
@@ -483,19 +492,20 @@
   --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-text-color: var(--vp-c-brand-1);
   --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
 }
 
 /**
   * Component: Local Search
   * -------------------------------------------------------------------------- */
+
 :root {
   --vp-local-search-bg: var(--vp-c-bg);
   --vp-local-search-result-bg: var(--vp-c-bg);
   --vp-local-search-result-border: var(--vp-c-divider);
   --vp-local-search-result-selected-bg: var(--vp-c-bg);
-  --vp-local-search-result-selected-border: var(--vp-c-brand);
-  --vp-local-search-highlight-bg: var(--vp-c-green-lighter);
+  --vp-local-search-result-selected-border: var(--vp-c-brand-1);
+  --vp-local-search-highlight-bg: var(--vp-c-green-1);
   --vp-local-search-highlight-text: var(--vp-c-black);
 }
diff --git a/template/.vitepress/theme/style.css b/template/.vitepress/theme/style.css
index 84c26fa67c41..8fb88fcd0ae7 100644
--- a/template/.vitepress/theme/style.css
+++ b/template/.vitepress/theme/style.css
@@ -5,16 +5,69 @@
 
 /**
  * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
 
  :root {
-  --vp-c-brand: #646cff;
-  --vp-c-brand-light: #747bff;
-  --vp-c-brand-lighter: #9499ff;
-  --vp-c-brand-lightest: #bcc0ff;
-  --vp-c-brand-dark: #535bf2;
-  --vp-c-brand-darker: #454ce1;
-  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
 }
 
 /**
@@ -22,15 +75,15 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-border: transparent;
   --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-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
   --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
-  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
   --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
 }
 
 /**
@@ -70,15 +123,10 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-custom-block-tip-border: var(--vp-c-brand);
-  --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-text: var(--vp-c-brand-lightest);
-  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
 }
 
 /**
@@ -86,7 +134,7 @@
  * -------------------------------------------------------------------------- */
 
 .DocSearch {
-  --docsearch-primary-color: var(--vp-c-brand) !important;
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 <% } else { %>
 html {