Skip to content

Commit e4f5c51

Browse files
kiakingbrc-dd
kiaking
and
brc-dd
authoredAug 19, 2023
feat(theme): improve color system (#2797)
close #2100 --------- Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
·
v2.0.0-alpha.4v1.0.0-rc.5
1 parent 1f8c58a commit e4f5c51

29 files changed

+467
-395
lines changed
 

‎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

‎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

‎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 {

‎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>

‎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

‎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 {

‎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>

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

‎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 {

‎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,

‎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 {

‎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 {

‎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>

‎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>

‎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 {

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

‎src/client/theme-default/components/VPNavScreenMenuGroup.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ function toggle() {
7272
7373
.VPNavScreenMenuGroup.open .button {
7474
padding-bottom: 6px;
75-
color: var(--vp-c-brand);
75+
color: var(--vp-c-brand-1);
7676
}
7777
7878
.VPNavScreenMenuGroup.open .button-icon {
@@ -94,7 +94,7 @@ function toggle() {
9494
}
9595
9696
.button:hover {
97-
color: var(--vp-c-brand);
97+
color: var(--vp-c-brand-1);
9898
}
9999
100100
.button-icon {

‎src/client/theme-default/components/VPNavScreenMenuGroupLink.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,6 @@ const closeScreen = inject('close-screen') as () => void
3434
}
3535
3636
.VPNavScreenMenuGroupLink:hover {
37-
color: var(--vp-c-brand);
37+
color: var(--vp-c-brand-1);
3838
}
3939
</style>

‎src/client/theme-default/components/VPNavScreenMenuLink.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,6 @@ const closeScreen = inject('close-screen') as () => void
3535
}
3636
3737
.VPNavScreenMenuLink:hover {
38-
color: var(--vp-c-brand);
38+
color: var(--vp-c-brand-1);
3939
}
4040
</style>

‎src/client/theme-default/components/VPSidebarItem.vue

+5-4
Original file line numberDiff line numberDiff line change
@@ -117,15 +117,16 @@ function onCaretClick() {
117117
top: 6px;
118118
bottom: 6px;
119119
left: -17px;
120-
width: 1px;
120+
width: 2px;
121+
border-radius: 2px;
121122
transition: background-color 0.25s;
122123
}
123124
124125
.VPSidebarItem.level-2.is-active > .item > .indicator,
125126
.VPSidebarItem.level-3.is-active > .item > .indicator,
126127
.VPSidebarItem.level-4.is-active > .item > .indicator,
127128
.VPSidebarItem.level-5.is-active > .item > .indicator {
128-
background-color: var(--vp-c-brand);
129+
background-color: var(--vp-c-brand-1);
129130
}
130131
131132
.link {
@@ -162,7 +163,7 @@ function onCaretClick() {
162163
.VPSidebarItem.level-3.is-link > .item > .link:hover .text,
163164
.VPSidebarItem.level-4.is-link > .item > .link:hover .text,
164165
.VPSidebarItem.level-5.is-link > .item > .link:hover .text {
165-
color: var(--vp-c-brand);
166+
color: var(--vp-c-brand-1);
166167
}
167168
168169
.VPSidebarItem.level-0.has-active > .item > .text,
@@ -186,7 +187,7 @@ function onCaretClick() {
186187
.VPSidebarItem.level-3.is-active > .item .link > .text,
187188
.VPSidebarItem.level-4.is-active > .item .link > .text,
188189
.VPSidebarItem.level-5.is-active > .item .link > .text {
189-
color: var(--vp-c-brand);
190+
color: var(--vp-c-brand-1);
190191
}
191192
192193
.caret {

‎src/client/theme-default/components/VPSkipLink.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ function focusOnTargetAnchor({ target }: Event) {
4747
font-size: 12px;
4848
font-weight: bold;
4949
text-decoration: none;
50-
color: var(--vp-c-brand);
50+
color: var(--vp-c-brand-1);
5151
box-shadow: var(--vp-shadow-3);
5252
background-color: var(--vp-c-bg);
5353
}

‎src/client/theme-default/components/VPSwitch.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
}
2323
2424
.VPSwitch:hover {
25-
border-color: var(--vp-input-hover-border-color);
25+
border-color: var(--vp-c-brand-1);
2626
}
2727
2828
.check {

‎src/client/theme-default/components/VPTeamMembersItem.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ defineProps<{
171171
}
172172
173173
.org.link:hover {
174-
color: var(--vp-c-brand);
174+
color: var(--vp-c-brand-1);
175175
}
176176
177177
.desc {
@@ -180,7 +180,7 @@ defineProps<{
180180
181181
.desc :deep(a) {
182182
font-weight: 500;
183-
color: var(--vp-c-brand);
183+
color: var(--vp-c-brand-1);
184184
text-decoration-style: dotted;
185185
transition: color 0.25s;
186186
}

‎src/client/theme-default/styles/components/custom-block.css

+29-5
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@
1313
background-color: var(--vp-custom-block-info-bg);
1414
}
1515

16-
.custom-block.custom-block th,
17-
.custom-block.custom-block blockquote > p {
18-
font-size: var(--vp-custom-block-font-size);
19-
color: inherit;
16+
.custom-block.info a,
17+
.custom-block.info code {
18+
color: var(--vp-c-brand-1);
2019
}
2120

2221
.custom-block.info code {
@@ -29,6 +28,11 @@
2928
background-color: var(--vp-custom-block-tip-bg);
3029
}
3130

31+
.custom-block.tip a,
32+
.custom-block.tip code {
33+
color: var(--vp-c-brand-1);
34+
}
35+
3236
.custom-block.tip code {
3337
background-color: var(--vp-custom-block-tip-code-bg);
3438
}
@@ -39,6 +43,11 @@
3943
background-color: var(--vp-custom-block-warning-bg);
4044
}
4145

46+
.custom-block.warning a,
47+
.custom-block.warning code {
48+
color: var(--vp-c-warning-1);
49+
}
50+
4251
.custom-block.warning code {
4352
background-color: var(--vp-custom-block-warning-code-bg);
4453
}
@@ -49,6 +58,11 @@
4958
background-color: var(--vp-custom-block-danger-bg);
5059
}
5160

61+
.custom-block.danger a,
62+
.custom-block.danger code {
63+
color: var(--vp-c-danger-1);
64+
}
65+
5266
.custom-block.danger code {
5367
background-color: var(--vp-custom-block-danger-code-bg);
5468
}
@@ -59,6 +73,10 @@
5973
background-color: var(--vp-custom-block-details-bg);
6074
}
6175

76+
.custom-block.details a {
77+
color: var(--vp-c-brand-1);
78+
}
79+
6280
.custom-block.details code {
6381
background-color: var(--vp-custom-block-details-code-bg);
6482
}
@@ -84,7 +102,7 @@
84102
.custom-block a {
85103
color: inherit;
86104
font-weight: 600;
87-
text-decoration: underline dotted;
105+
text-decoration: underline;
88106
text-underline-offset: 2px;
89107
transition: opacity 0.25s;
90108
}
@@ -96,3 +114,9 @@
96114
.custom-block code {
97115
font-size: var(--vp-custom-block-code-font-size);
98116
}
117+
118+
.custom-block.custom-block th,
119+
.custom-block.custom-block blockquote > p {
120+
font-size: var(--vp-custom-block-font-size);
121+
color: inherit;
122+
}

‎src/client/theme-default/styles/components/vp-code-group.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@
4848
bottom: -1px;
4949
left: 8px;
5050
z-index: 1;
51-
height: 1px;
51+
height: 2px;
52+
border-radius: 2px;
5253
content: '';
5354
background-color: transparent;
5455
transition: background-color 0.25s;

‎src/client/theme-default/styles/components/vp-doc.css

+20-22
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
font-weight: 500;
4444
user-select: none;
4545
opacity: 0;
46+
text-decoration: none;
4647
transition:
4748
color 0.25s,
4849
opacity 0.25s;
@@ -108,12 +109,16 @@
108109

109110
.vp-doc a {
110111
font-weight: 500;
111-
color: var(--vp-c-brand);
112+
color: var(--vp-c-brand-1);
113+
text-decoration: underline;
114+
text-underline-offset: 2px;
115+
transition:
116+
color 0.25s,
117+
opacity 0.25s;
112118
}
113119

114120
.vp-doc a:hover {
115-
text-decoration: underline dotted;
116-
text-underline-offset: 2px;
121+
color: var(--vp-c-brand-2);
117122
}
118123

119124
.vp-doc strong {
@@ -212,17 +217,6 @@
212217
margin: 0;
213218
}
214219

215-
.vp-doc .custom-block a {
216-
color: inherit;
217-
font-weight: 600;
218-
}
219-
220-
.vp-doc .custom-block code {
221-
font-size: var(--vp-custom-block-code-font-size);
222-
font-weight: 700;
223-
color: inherit;
224-
}
225-
226220
.vp-doc .custom-block div[class*='language-'] {
227221
margin: 8px 0;
228222
border-radius: 8px;
@@ -245,28 +239,32 @@
245239
/* inline code */
246240
.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
247241
font-size: var(--vp-code-font-size);
242+
color: var(--vp-code-color);
248243
}
249244

250245
.vp-doc :not(pre) > code {
251246
border-radius: 4px;
252247
padding: 3px 6px;
253-
color: var(--vp-c-text-code);
254-
background-color: var(--vp-c-mute);
248+
background-color: var(--vp-code-bg);
255249
transition:
256-
color 0.5s,
250+
color 0.25s,
257251
background-color 0.5s;
258252
}
259253

254+
.vp-doc a > code {
255+
color: var(--vp-code-link-color);
256+
}
257+
258+
.vp-doc a:hover > code {
259+
color: var(--vp-code-link-hover-color);
260+
}
261+
260262
.vp-doc h1 > code,
261263
.vp-doc h2 > code,
262264
.vp-doc h3 > code {
263265
font-size: 0.9em;
264266
}
265267

266-
.vp-doc a > code {
267-
color: var(--vp-c-brand);
268-
}
269-
270268
.vp-doc div[class*='language-'],
271269
.vp-block {
272270
position: relative;
@@ -506,7 +504,7 @@
506504
z-index: 2;
507505
font-size: 12px;
508506
font-weight: 500;
509-
color: var(--vp-c-code-dimm);
507+
color: var(--vp-code-lang-color);
510508
transition:
511509
color 0.4s,
512510
opacity 0.4s;

‎src/client/theme-default/styles/components/vp-sponsor.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
}
115115

116116
.vp-sponsor-grid-item:hover {
117-
background-color: var(--vp-c-bg-soft-down);
117+
background-color: var(--vp-c-default-soft);
118118
}
119119

120120
.vp-sponsor-grid-item:hover .vp-sponsor-grid-image {

‎src/client/theme-default/styles/vars.css

+269-259
Large diffs are not rendered by default.

‎template/.vitepress/theme/style.css

+71-23
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,85 @@
55

66
/**
77
* Colors
8+
*
9+
* Each colors have exact same color scale system with 3 levels of solid
10+
* colors with different brightness, and 1 soft color.
11+
*
12+
* - `XXX-1`: The most solid color used mainly for colored text. It must
13+
* satisfy the contrast ratio against when used on top of `XXX-soft`.
14+
*
15+
* - `XXX-2`: The color used mainly for hover state of the button.
16+
*
17+
* - `XXX-3`: The color for solid background, such as bg color of the button.
18+
* It must satisfy the contrast ratio with pure white (#ffffff) text on
19+
* top of it.
20+
*
21+
* - `XXX-soft`: The color used for subtle background such as custom container
22+
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
23+
* on top of it.
24+
*
25+
* The soft color must be semi transparent alpha channel. This is crucial
26+
* because it allows adding multiple "soft" colors on top of each other
27+
* to create a accent, such as when having inline code block inside
28+
* custom containers.
29+
*
30+
* - `default`: The color used purely for subtle indication without any
31+
* special meanings attched to it such as bg color for menu hover state.
32+
*
33+
* - `brand`: Used for primary brand colors, such as link text, button with
34+
* brand theme, etc.
35+
*
36+
* - `tip`: Used to indicate useful information. The default theme uses the
37+
* brand color for this by default.
38+
*
39+
* - `warning`: Used to indicate warning to the users. Used in custom
40+
* container, badges, etc.
41+
*
42+
* - `danger`: Used to show error, or dangerous message to the users. Used
43+
* in custom container, badges, etc.
844
* -------------------------------------------------------------------------- */
945

1046
:root {
11-
--vp-c-brand: #646cff;
12-
--vp-c-brand-light: #747bff;
13-
--vp-c-brand-lighter: #9499ff;
14-
--vp-c-brand-lightest: #bcc0ff;
15-
--vp-c-brand-dark: #535bf2;
16-
--vp-c-brand-darker: #454ce1;
17-
--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
47+
--vp-c-default-1: var(--vp-c-gray-1);
48+
--vp-c-default-2: var(--vp-c-gray-2);
49+
--vp-c-default-3: var(--vp-c-gray-3);
50+
--vp-c-default-soft: var(--vp-c-gray-soft);
51+
52+
--vp-c-brand-1: var(--vp-c-indigo-1);
53+
--vp-c-brand-2: var(--vp-c-indigo-2);
54+
--vp-c-brand-3: var(--vp-c-indigo-3);
55+
--vp-c-brand-soft: var(--vp-c-indigo-soft);
56+
57+
--vp-c-tip-1: var(--vp-c-brand-1);
58+
--vp-c-tip-2: var(--vp-c-brand-2);
59+
--vp-c-tip-3: var(--vp-c-brand-3);
60+
--vp-c-tip-soft: var(--vp-c-brand-soft);
61+
62+
--vp-c-warning-1: var(--vp-c-yellow-1);
63+
--vp-c-warning-2: var(--vp-c-yellow-2);
64+
--vp-c-warning-3: var(--vp-c-yellow-3);
65+
--vp-c-warning-soft: var(--vp-c-yellow-soft);
66+
67+
--vp-c-danger-1: var(--vp-c-red-1);
68+
--vp-c-danger-2: var(--vp-c-red-2);
69+
--vp-c-danger-3: var(--vp-c-red-3);
70+
--vp-c-danger-soft: var(--vp-c-red-soft);
1871
}
1972

2073
/**
2174
* Component: Button
2275
* -------------------------------------------------------------------------- */
2376

2477
:root {
25-
--vp-button-brand-border: var(--vp-c-brand-light);
78+
--vp-button-brand-border: transparent;
2679
--vp-button-brand-text: var(--vp-c-white);
27-
--vp-button-brand-bg: var(--vp-c-brand);
28-
--vp-button-brand-hover-border: var(--vp-c-brand-light);
80+
--vp-button-brand-bg: var(--vp-c-brand-3);
81+
--vp-button-brand-hover-border: transparent;
2982
--vp-button-brand-hover-text: var(--vp-c-white);
30-
--vp-button-brand-hover-bg: var(--vp-c-brand-light);
31-
--vp-button-brand-active-border: var(--vp-c-brand-light);
83+
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
84+
--vp-button-brand-active-border: transparent;
3285
--vp-button-brand-active-text: var(--vp-c-white);
33-
--vp-button-brand-active-bg: var(--vp-button-brand-bg);
86+
--vp-button-brand-active-bg: var(--vp-c-brand-1);
3487
}
3588

3689
/**
@@ -70,23 +123,18 @@
70123
* -------------------------------------------------------------------------- */
71124

72125
:root {
73-
--vp-custom-block-tip-border: var(--vp-c-brand);
74-
--vp-custom-block-tip-text: var(--vp-c-brand-darker);
75-
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
76-
}
77-
78-
.dark {
79-
--vp-custom-block-tip-border: var(--vp-c-brand);
80-
--vp-custom-block-tip-text: var(--vp-c-brand-lightest);
81-
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
126+
--vp-custom-block-tip-border: transparent;
127+
--vp-custom-block-tip-text: var(--vp-c-text-1);
128+
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
129+
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
82130
}
83131

84132
/**
85133
* Component: Algolia
86134
* -------------------------------------------------------------------------- */
87135

88136
.DocSearch {
89-
--docsearch-primary-color: var(--vp-c-brand) !important;
137+
--docsearch-primary-color: var(--vp-c-brand-1) !important;
90138
}
91139
<% } else { %>
92140
html {

0 commit comments

Comments
 (0)
Please sign in to comment.