Skip to content

Commit e4f5c51

Browse files
kiakingbrc-dd
kiaking
and
brc-dd
authored
feat(theme): improve color system (#2797)
close #2100 --------- Co-authored-by: Divyansh Singh <[email protected]>
1 parent 1f8c58a commit e4f5c51

29 files changed

+467
-395
lines changed

Diff for: ‎docs/guide/extending-default-theme.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ export default DefaultTheme
2929
```css
3030
/* .vitepress/theme/custom.css */
3131
:root {
32-
--vp-c-brand: #646cff;
33-
--vp-c-brand-light: #747bff;
32+
--vp-c-brand-1: #646cff;
33+
--vp-c-brand-2: #747bff;
3434
}
3535
```
3636

Diff for: ‎docs/reference/default-theme-badge.md

+12-26
Original file line numberDiff line numberDiff line change
@@ -32,39 +32,25 @@ Code above renders like:
3232

3333
## Customize Type Color
3434

35-
You can customize the `background-color` of badges by overriding css variables. The following are the default values:
35+
You can customize the style of badges by overriding css variables. The following are the default values:
3636

3737
```css
3838
:root {
39-
--vp-badge-info-border: var(--vp-c-divider-light);
39+
--vp-badge-info-border: transparent;
4040
--vp-badge-info-text: var(--vp-c-text-2);
41-
--vp-badge-info-bg: var(--vp-c-white-soft);
41+
--vp-badge-info-bg: var(--vp-c-default-soft);
4242

43-
--vp-badge-tip-border: var(--vp-c-green-dimm-1);
44-
--vp-badge-tip-text: var(--vp-c-green-darker);
45-
--vp-badge-tip-bg: var(--vp-c-green-dimm-3);
43+
--vp-badge-tip-border: transparent;
44+
--vp-badge-tip-text: var(--vp-c-brand-1);
45+
--vp-badge-tip-bg: var(--vp-c-brand-soft);
4646

47-
--vp-badge-warning-border: var(--vp-c-yellow-dimm-1);
48-
--vp-badge-warning-text: var(--vp-c-yellow-darker);
49-
--vp-badge-warning-bg: var(--vp-c-yellow-dimm-3);
47+
--vp-badge-warning-border: transparent;
48+
--vp-badge-warning-text: var(--vp-c-warning-1);
49+
--vp-badge-warning-bg: var(--vp-c-warning-soft);
5050

51-
--vp-badge-danger-border: var(--vp-c-red-dimm-1);
52-
--vp-badge-danger-text: var(--vp-c-red-darker);
53-
--vp-badge-danger-bg: var(--vp-c-red-dimm-3);
54-
}
55-
56-
.dark {
57-
--vp-badge-info-border: var(--vp-c-divider-light);
58-
--vp-badge-info-bg: var(--vp-c-black-mute);
59-
60-
--vp-badge-tip-border: var(--vp-c-green-dimm-2);
61-
--vp-badge-tip-text: var(--vp-c-green-light);
62-
63-
--vp-badge-warning-border: var(--vp-c-yellow-dimm-2);
64-
--vp-badge-warning-text: var(--vp-c-yellow-light);
65-
66-
--vp-badge-danger-border: var(--vp-c-red-dimm-2);
67-
--vp-badge-danger-text: var(--vp-c-red-light);
51+
--vp-badge-danger-border: transparent;
52+
--vp-badge-danger-text: var(--vp-c-danger-1);
53+
--vp-badge-danger-bg: var(--vp-c-danger-soft);
6854
}
6955
```
7056

Diff for: ‎docs/reference/default-theme-home-page.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ interface HeroAction {
7474

7575
### Customizing the name color
7676

77-
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.
77+
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.
7878

7979
```css
8080
:root {

Diff for: ‎src/client/theme-default/NotFound.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -91,19 +91,19 @@ onMounted(() => {
9191
9292
.link {
9393
display: inline-block;
94-
border: 1px solid var(--vp-c-brand);
94+
border: 1px solid var(--vp-c-brand-1);
9595
border-radius: 16px;
9696
padding: 3px 16px;
9797
font-size: 14px;
9898
font-weight: 500;
99-
color: var(--vp-c-brand);
99+
color: var(--vp-c-brand-1);
100100
transition:
101101
border-color 0.25s,
102102
color 0.25s;
103103
}
104104
105105
.link:hover {
106-
border-color: var(--vp-c-brand-dark);
107-
color: var(--vp-c-brand-dark);
106+
border-color: var(--vp-c-brand-2);
107+
color: var(--vp-c-brand-2);
108108
}
109109
</style>

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

+1-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ defineProps<{
2020
padding: 0 10px;
2121
line-height: 22px;
2222
font-size: 12px;
23-
font-weight: 600;
23+
font-weight: 500;
2424
transform: translateY(-2px);
2525
}
2626
@@ -31,13 +31,11 @@ defineProps<{
3131
3232
.vp-doc h2 > .VPBadge {
3333
margin-top: 3px;
34-
line-height: 20px;
3534
padding: 0 8px;
3635
vertical-align: top;
3736
}
3837
3938
.vp-doc h3 > .VPBadge {
40-
line-height: 20px;
4139
vertical-align: middle;
4240
}
4341

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

+16-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import { onContentUpdated } from 'vitepress'
23
import { ref, shallowRef } from 'vue'
34
import { useData } from '../composables/data'
45
import {
@@ -8,16 +9,13 @@ import {
89
type MenuItem
910
} from '../composables/outline'
1011
import VPDocOutlineItem from './VPDocOutlineItem.vue'
11-
import { onContentUpdated } from 'vitepress'
1212
1313
const { frontmatter, theme } = useData()
1414
1515
const headers = shallowRef<MenuItem[]>([])
1616
1717
onContentUpdated(() => {
18-
headers.value = getHeaders(
19-
frontmatter.value.outline ?? theme.value.outline
20-
)
18+
headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
2119
})
2220
2321
const container = ref()
@@ -27,11 +25,16 @@ useActiveAnchor(container, marker)
2725
</script>
2826

2927
<template>
30-
<div class="VPDocAsideOutline" :class="{ 'has-outline': headers.length > 0 }" ref="container">
28+
<div
29+
class="VPDocAsideOutline"
30+
:class="{ 'has-outline': headers.length > 0 }"
31+
ref="container"
32+
role="navigation"
33+
>
3134
<div class="content">
3235
<div class="outline-marker" ref="marker" />
3336

34-
<div class="outline-title">{{ resolveTitle(theme) }}</div>
37+
<div class="outline-title" role="heading">{{ resolveTitle(theme) }}</div>
3538

3639
<nav aria-labelledby="doc-outline-aria-label">
3740
<span class="visually-hidden" id="doc-outline-aria-label">
@@ -66,10 +69,14 @@ useActiveAnchor(container, marker)
6669
left: -1px;
6770
z-index: 0;
6871
opacity: 0;
69-
width: 1px;
72+
width: 2px;
73+
border-radius: 2px;
7074
height: 18px;
71-
background-color: var(--vp-c-brand);
72-
transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;
75+
background-color: var(--vp-c-brand-1);
76+
transition:
77+
top 0.25s cubic-bezier(0, 1, 0.5, 1),
78+
background-color 0.5s,
79+
opacity 0.25s;
7380
}
7481
7582
.outline-title {

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,12 @@ const showFooter = computed(() => {
8383
line-height: 32px;
8484
font-size: 14px;
8585
font-weight: 500;
86-
color: var(--vp-c-brand);
86+
color: var(--vp-c-brand-1);
8787
transition: color 0.25s;
8888
}
8989
9090
.edit-link-button:hover {
91-
color: var(--vp-c-brand-dark);
91+
color: var(--vp-c-brand-2);
9292
}
9393
9494
.edit-link-icon {
@@ -123,7 +123,7 @@ const showFooter = computed(() => {
123123
}
124124
125125
.pager-link:hover {
126-
border-color: var(--vp-c-brand);
126+
border-color: var(--vp-c-brand-1);
127127
}
128128
129129
.pager-link.next {
@@ -144,7 +144,7 @@ const showFooter = computed(() => {
144144
line-height: 20px;
145145
font-size: 14px;
146146
font-weight: 500;
147-
color: var(--vp-c-brand);
147+
color: var(--vp-c-brand-1);
148148
transition: color 0.25s;
149149
}
150150
</style>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ onContentUpdated(() => {
4747
border: 1px solid var(--vp-c-border);
4848
padding: 4px 12px;
4949
color: var(--vp-c-text-2);
50-
background-color: var(--vp-c-mute);
50+
background-color: var(--vp-c-default-soft);
5151
border-radius: 8px;
5252
transition: color 0.5s;
5353
}

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,7 @@ defineProps<{
4848
}
4949
5050
.VPFeature.link:hover {
51-
border-color: var(--vp-c-brand);
52-
background-color: var(--vp-c-bg-soft-up);
51+
border-color: var(--vp-c-brand-1);
5352
}
5453
5554
.box {
@@ -69,7 +68,7 @@ defineProps<{
6968
align-items: center;
7069
margin-bottom: 20px;
7170
border-radius: 6px;
72-
background-color: var(--vp-c-bg-soft-down);
71+
background-color: var(--vp-c-default-soft);
7372
width: 48px;
7473
height: 48px;
7574
font-size: 24px;
@@ -100,7 +99,7 @@ defineProps<{
10099
align-items: center;
101100
font-size: 14px;
102101
font-weight: 500;
103-
color: var(--vp-c-brand);
102+
color: var(--vp-c-brand-1);
104103
}
105104
106105
.link-text-icon {

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function onBlur() {
6060
}
6161
6262
.VPFlyout:hover {
63-
color: var(--vp-c-brand);
63+
color: var(--vp-c-brand-1);
6464
transition: color 0.25s;
6565
}
6666
@@ -73,11 +73,11 @@ function onBlur() {
7373
}
7474
7575
.VPFlyout.active .text {
76-
color: var(--vp-c-brand);
76+
color: var(--vp-c-brand-1);
7777
}
7878
7979
.VPFlyout.active:hover .text {
80-
color: var(--vp-c-brand-dark);
80+
color: var(--vp-c-brand-2);
8181
}
8282
8383
.VPFlyout:hover .menu,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ function scrollToTop() {
138138
line-height: 48px;
139139
font-size: 14px;
140140
font-weight: 500;
141-
color: var(--vp-c-brand);
141+
color: var(--vp-c-brand-1);
142142
}
143143
144144
.outline {

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -692,7 +692,7 @@ function formMarkRegex(terms: Set<string>) {
692692
}
693693
694694
.search-bar:focus-within {
695-
border-color: var(--vp-c-brand);
695+
border-color: var(--vp-c-brand-1);
696696
}
697697
698698
.search-icon {
@@ -740,7 +740,7 @@ function formMarkRegex(terms: Set<string>) {
740740
741741
.search-actions button:not([disabled]):hover,
742742
.toggle-layout-button.detailed-list {
743-
color: var(--vp-c-brand);
743+
color: var(--vp-c-brand-1);
744744
}
745745
746746
.search-actions button.clear-button:disabled {
@@ -834,7 +834,7 @@ function formMarkRegex(terms: Set<string>) {
834834
.title-icon {
835835
opacity: 0.5;
836836
font-weight: 500;
837-
color: var(--vp-c-brand);
837+
color: var(--vp-c-brand-1);
838838
}
839839
840840
.title svg {
@@ -907,7 +907,7 @@ function formMarkRegex(terms: Set<string>) {
907907
908908
.result.selected .titles,
909909
.result.selected .title-icon {
910-
color: var(--vp-c-brand) !important;
910+
color: var(--vp-c-brand-1) !important;
911911
}
912912
913913
.no-results {

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ const { page } = useData()
4444
}
4545
4646
.link:hover {
47-
color: var(--vp-c-brand);
48-
background-color: var(--vp-c-bg-elv-mute);
47+
color: var(--vp-c-brand-1);
48+
background-color: var(--vp-c-default-soft);
4949
}
5050
5151
.link.active {
52-
color: var(--vp-c-brand);
52+
color: var(--vp-c-brand-1);
5353
}
5454
</style>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ const { page } = useData()
4343
}
4444
4545
.VPNavBarMenuLink.active {
46-
color: var(--vp-c-brand);
46+
color: var(--vp-c-brand-1);
4747
}
4848
4949
.VPNavBarMenuLink:hover {
50-
color: var(--vp-c-brand);
50+
color: var(--vp-c-brand-1);
5151
}
5252
</style>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -204,12 +204,12 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
204204
}
205205
206206
.DocSearch-Form {
207-
border: 1px solid var(--vp-c-brand);
207+
border: 1px solid var(--vp-c-brand-1);
208208
background-color: var(--vp-c-white);
209209
}
210210
211211
.dark .DocSearch-Form {
212-
background-color: var(--vp-c-bg-soft-mute);
212+
background-color: var(--vp-c-default-soft);
213213
}
214214
215215
.DocSearch-Screen-Icon > svg {

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ defineProps<{
3434

3535
<style>
3636
[class*='DocSearch'] {
37-
--docsearch-primary-color: var(--vp-c-brand);
37+
--docsearch-primary-color: var(--vp-c-brand-1);
3838
--docsearch-highlight-color: var(--docsearch-primary-color);
3939
--docsearch-text-color: var(--vp-c-text-1);
4040
--docsearch-muted-color: var(--vp-c-text-2);
@@ -51,7 +51,7 @@ defineProps<{
5151
--docsearch-modal-shadow: none;
5252
--docsearch-footer-shadow: none;
5353
--docsearch-logo-color: var(--vp-c-text-2);
54-
--docsearch-hit-background: var(--vp-c-bg-soft-mute);
54+
--docsearch-hit-background: var(--vp-c-default-soft);
5555
--docsearch-hit-color: var(--vp-c-text-2);
5656
--docsearch-hit-shadow: none;
5757
}
@@ -93,7 +93,7 @@ defineProps<{
9393
}
9494
9595
.DocSearch-Button:hover {
96-
border-color: var(--vp-c-brand);
96+
border-color: var(--vp-c-brand-1);
9797
background: var(--vp-c-bg-alt);
9898
}
9999
}

0 commit comments

Comments
 (0)