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

@@ -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;
 }
 ```
 

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);
 }
 ```
 

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 {

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>

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;
 }
 

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 {

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>

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;
 }

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 {

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,

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 {

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 {

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>

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>

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 {

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);
   }
 }