Skip to content

Commit c0d838b

Browse files
kiakingbrc-ddLehoczky
authoredAug 8, 2023
feat(theme)!: final re-brand (#2727)
Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Co-authored-by: Lehoczky Zoltán <ifjlehoczkyzoltan@gmail.com>
·
v2.0.0-alpha.4v1.0.0-rc.1
1 parent 1d6254b commit c0d838b

13 files changed

+234
-123
lines changed
 

‎docs/.vitepress/config.ts

+18-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,22 @@ export default defineConfig({
2020
},
2121

2222
head: [
23-
['meta', { name: 'theme-color', content: '#3c8772' }],
23+
['link', { rel: 'icon', href: '/vitepress-logo-mini.svg' }],
24+
['meta', { name: 'theme-color', content: '#5f67ee' }],
25+
['meta', { name: 'og:type', content: 'website' }],
26+
['meta', { name: 'og:locale', content: 'en' }],
27+
['meta', { name: 'og:site_name', content: 'VitePress' }],
28+
[
29+
'meta',
30+
{ name: 'og:image', content: 'https://vitepress.dev/vitepress-og.jpg' }
31+
],
32+
[
33+
'meta',
34+
{
35+
name: 'twitter:image',
36+
content: 'https://vitepress.dev/vitepress-og.jpg'
37+
}
38+
],
2439
[
2540
'script',
2641
{
@@ -33,6 +48,8 @@ export default defineConfig({
3348
],
3449

3550
themeConfig: {
51+
logo: { src: '/vitepress-logo-mini.svg', width: 24, height: 24 },
52+
3653
nav: nav(),
3754

3855
sidebar: {

‎docs/index.md

+24
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ hero:
1515
- theme: alt
1616
text: View on GitHub
1717
link: https://github.com/vuejs/vitepress
18+
image:
19+
src: /vitepress-logo-large.webp
20+
alt: VitePress
1821

1922
features:
2023
- icon: 📝
@@ -30,3 +33,24 @@ features:
3033
title: Ship Fast Sites
3134
details: Fast initial load with static HTML, fast post-load navigation with client-side routing.
3235
---
36+
<style>
37+
:root {
38+
--vp-home-hero-name-color: transparent;
39+
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
40+
41+
--vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
42+
--vp-home-hero-image-filter: blur(40px);
43+
}
44+
45+
@media (min-width: 640px) {
46+
:root {
47+
--vp-home-hero-image-filter: blur(56px);
48+
}
49+
}
50+
51+
@media (min-width: 960px) {
52+
:root {
53+
--vp-home-hero-image-filter: blur(72px);
54+
}
55+
}
56+
</style>

‎docs/public/vitepress-logo-large.webp

33.2 KB
Binary file not shown.

‎docs/public/vitepress-logo-mini.svg

+1
Loading

‎docs/public/vitepress-og.jpg

250 KB
Loading

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

+22-12
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,36 @@ defineProps<{
1616
display: inline-block;
1717
margin-left: 2px;
1818
border: 1px solid transparent;
19-
border-radius: 10px;
20-
padding: 0 8px;
21-
line-height: 18px;
19+
border-radius: 12px;
20+
padding: 0 10px;
21+
line-height: 22px;
2222
font-size: 12px;
2323
font-weight: 600;
2424
transform: translateY(-2px);
2525
}
2626
27-
h1 .VPBadge,
28-
h2 .VPBadge,
29-
h3 .VPBadge,
30-
h4 .VPBadge,
31-
h5 .VPBadge,
32-
h6 .VPBadge {
33-
vertical-align: text-top;
27+
.vp-doc h1 > .VPBadge {
28+
margin-top: 4px;
29+
vertical-align: top;
3430
}
3531
36-
h2 .VPBadge {
37-
border-radius: 11px;
32+
.vp-doc h2 > .VPBadge {
33+
margin-top: 3px;
3834
line-height: 20px;
35+
padding: 0 8px;
36+
vertical-align: top;
37+
}
38+
39+
.vp-doc h3 > .VPBadge {
40+
line-height: 20px;
41+
vertical-align: middle;
42+
}
43+
44+
.vp-doc h4 > .VPBadge,
45+
.vp-doc h5 > .VPBadge,
46+
.vp-doc h6 > .VPBadge {
47+
vertical-align: middle;
48+
line-height: 18px;
3949
}
4050
4151
.VPBadge.info {

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

+9-8
Original file line numberDiff line numberDiff line change
@@ -36,19 +36,20 @@ onContentUpdated(() => {
3636

3737
<style scoped>
3838
.VPDocOutlineDropdown {
39-
margin-bottom: 42px;
39+
margin-bottom: 48px;
4040
}
4141
4242
.VPDocOutlineDropdown button {
4343
display: block;
4444
font-size: 14px;
4545
font-weight: 500;
4646
line-height: 24px;
47-
color: var(--vp-c-text-2);
48-
transition: color 0.5s;
4947
border: 1px solid var(--vp-c-border);
5048
padding: 4px 12px;
49+
color: var(--vp-c-text-2);
50+
background-color: var(--vp-c-mute);
5151
border-radius: 8px;
52+
transition: color 0.5s;
5253
}
5354
5455
.VPDocOutlineDropdown button:hover {
@@ -63,22 +64,22 @@ onContentUpdated(() => {
6364
.icon {
6465
display: inline-block;
6566
vertical-align: middle;
66-
margin-left: 2px;
67-
width: 14px;
68-
height: 14px;
67+
width: 16px;
68+
height: 16px;
6969
fill: currentColor;
7070
}
7171
7272
:deep(.outline-link) {
73-
font-size: 13px;
73+
font-size: 14px;
74+
font-weight: 400;
7475
}
7576
7677
.open > .icon {
7778
transform: rotate(90deg);
7879
}
7980
8081
.items {
81-
margin-top: 10px;
82+
margin-top: 12px;
8283
border-left: 1px solid var(--vp-c-divider);
8384
}
8485
</style>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function onClick({ target: el }: Event) {
3131
}
3232
3333
.nested {
34-
padding-left: 13px;
34+
padding-left: 16px;
3535
}
3636
3737
.outline-link {
@@ -42,7 +42,7 @@ function onClick({ target: el }: Event) {
4242
overflow: hidden;
4343
text-overflow: ellipsis;
4444
transition: color 0.5s;
45-
font-weight: 500;
45+
font-weight: 400;
4646
}
4747
4848
.outline-link:hover,

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

+28-14
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,14 @@ function scrollToTop() {
5858
class="items"
5959
@click="onItemClick"
6060
>
61-
<a class="top-link" href="#" @click="scrollToTop">
62-
{{ theme.returnToTopLabel || 'Return to top' }}
63-
</a>
64-
<VPDocOutlineItem :headers="headers" />
61+
<div class="header">
62+
<a class="top-link" href="#" @click="scrollToTop">
63+
{{ theme.returnToTopLabel || 'Return to top' }}
64+
</a>
65+
</div>
66+
<div class="outline">
67+
<VPDocOutlineItem :headers="headers" />
68+
</div>
6569
</div>
6670
</Transition>
6771
</div>
@@ -71,6 +75,7 @@ function scrollToTop() {
7175
.VPLocalNavOutlineDropdown {
7276
padding: 12px 20px 11px;
7377
}
78+
7479
.VPLocalNavOutlineDropdown button {
7580
display: block;
7681
font-size: 12px;
@@ -110,26 +115,35 @@ function scrollToTop() {
110115
111116
.items {
112117
position: absolute;
113-
left: 20px;
114-
right: 20px;
115118
top: 64px;
116-
background-color: var(--vp-local-nav-bg-color);
117-
padding: 4px 10px 16px;
118-
border: 1px solid var(--vp-c-divider);
119+
right: 16px;
120+
left: 16px;
121+
display: grid;
122+
gap: 1px;
123+
border: 1px solid var(--vp-c-border);
119124
border-radius: 8px;
125+
background-color: var(--vp-c-gutter);
120126
max-height: calc(var(--vp-vh, 100vh) - 86px);
121127
overflow: hidden auto;
122128
box-shadow: var(--vp-shadow-3);
123129
}
124130
131+
.header {
132+
background-color: var(--vp-c-bg-soft);
133+
}
134+
125135
.top-link {
126136
display: block;
127-
color: var(--vp-c-brand);
128-
font-size: 13px;
137+
padding: 0 16px;
138+
line-height: 48px;
139+
font-size: 14px;
129140
font-weight: 500;
130-
padding: 6px 0;
131-
margin: 0 13px 10px;
132-
border-bottom: 1px solid var(--vp-c-divider);
141+
color: var(--vp-c-brand);
142+
}
143+
144+
.outline {
145+
padding: 8px 0;
146+
background-color: var(--vp-c-bg-soft);
133147
}
134148
135149
.flyout-enter-active {

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,13 @@
8484
.custom-block a {
8585
color: inherit;
8686
font-weight: 600;
87+
text-decoration: underline dotted;
88+
text-underline-offset: 2px;
89+
transition: opacity 0.25s;
8790
}
8891

8992
.custom-block a:hover {
90-
text-decoration: underline;
93+
opacity: 0.75;
9194
}
9295

9396
.custom-block code {

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

+2-13
Original file line numberDiff line numberDiff line change
@@ -109,13 +109,11 @@
109109
.vp-doc a {
110110
font-weight: 500;
111111
color: var(--vp-c-brand);
112-
text-decoration-style: dotted;
113-
transition: color 0.25s;
114112
}
115113

116114
.vp-doc a:hover {
117-
/* color: var(--vp-c-brand-dark); */
118-
text-decoration: underline;
115+
text-decoration: underline dotted;
116+
text-underline-offset: 2px;
119117
}
120118

121119
.vp-doc strong {
@@ -219,10 +217,6 @@
219217
font-weight: 600;
220218
}
221219

222-
.vp-doc .custom-block a:hover {
223-
text-decoration: underline;
224-
}
225-
226220
.vp-doc .custom-block code {
227221
font-size: var(--vp-custom-block-code-font-size);
228222
font-weight: 700;
@@ -271,11 +265,6 @@
271265

272266
.vp-doc a > code {
273267
color: var(--vp-c-brand);
274-
transition: color 0.25s;
275-
}
276-
277-
.vp-doc a:hover > code {
278-
color: var(--vp-c-brand-dark);
279268
}
280269

281270
.vp-doc div[class*='language-'],

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

+122-70
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
:root {
1010
--vp-c-white: #ffffff;
1111
--vp-c-black: #000000;
12-
1312
--vp-c-gray: #8e8e93;
1413

1514
--vp-c-text-light-1: rgba(60, 60, 67);
@@ -20,33 +19,6 @@
2019
--vp-c-text-dark-2: rgba(235, 235, 245, 0.6);
2120
--vp-c-text-dark-3: rgba(235, 235, 245, 0.38);
2221

23-
--vp-c-green: #10b981;
24-
--vp-c-green-light: #34d399;
25-
--vp-c-green-lighter: #6ee7b7;
26-
--vp-c-green-dark: #059669;
27-
--vp-c-green-darker: #047857;
28-
--vp-c-green-dimm-1: rgba(16, 185, 129, 0.05);
29-
--vp-c-green-dimm-2: rgba(16, 185, 129, 0.2);
30-
--vp-c-green-dimm-3: rgba(16, 185, 129, 0.5);
31-
32-
--vp-c-yellow: #d97706;
33-
--vp-c-yellow-light: #f59e0b;
34-
--vp-c-yellow-lighter: #fbbf24;
35-
--vp-c-yellow-dark: #b45309;
36-
--vp-c-yellow-darker: #92400e;
37-
--vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.05);
38-
--vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
39-
--vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.5);
40-
41-
--vp-c-red: #f43f5e;
42-
--vp-c-red-light: #fb7185;
43-
--vp-c-red-lighter: #fda4af;
44-
--vp-c-red-dark: #e11d48;
45-
--vp-c-red-darker: #be123c;
46-
--vp-c-red-dimm-1: rgba(244, 63, 94, 0.05);
47-
--vp-c-red-dimm-2: rgba(244, 63, 94, 0.2);
48-
--vp-c-red-dimm-3: rgba(244, 63, 94, 0.5);
49-
5022
--vp-c-sponsor: #db2777;
5123
}
5224

@@ -69,9 +41,9 @@
6941

7042
--vp-c-bg-alt: #f6f6f7;
7143

72-
--vp-c-border: rgba(60, 60, 67, 0.29);
73-
--vp-c-divider: rgba(60, 60, 67, 0.12);
74-
--vp-c-gutter: rgba(60, 60, 67, 0.12);
44+
--vp-c-border: #c2c2c4;
45+
--vp-c-divider: #e2e2e3;
46+
--vp-c-gutter: #e2e2e3;
7547

7648
--vp-c-neutral: var(--vp-c-black);
7749
--vp-c-neutral-inverse: var(--vp-c-white);
@@ -86,31 +58,67 @@
8658

8759
--vp-c-text-code: #476582;
8860

89-
--vp-c-brand: var(--vp-c-green);
90-
--vp-c-brand-light: var(--vp-c-green-light);
91-
--vp-c-brand-lighter: var(--vp-c-green-lighter);
92-
--vp-c-brand-dark: var(--vp-c-green-dark);
93-
--vp-c-brand-darker: var(--vp-c-green-darker);
94-
95-
--vp-c-mute: #f6f6f7;
96-
--vp-c-mute-light: #f9f9fc;
97-
--vp-c-mute-lighter: #ffffff;
61+
--vp-c-mute: #eeeef0;
62+
--vp-c-mute-light: #f3f3f9;
63+
--vp-c-mute-lighter: #f9f9fa;
9864
--vp-c-mute-dark: #e3e3e5;
9965
--vp-c-mute-darker: #d7d7d9;
66+
67+
--vp-c-brand: #4565d8;
68+
--vp-c-brand-light: #708fff;
69+
--vp-c-brand-lighter: #a4b2ff;
70+
--vp-c-brand-lightest: #ecefff;
71+
--vp-c-brand-dark: #4565d8;
72+
--vp-c-brand-darker: #23459f;
73+
--vp-c-brand-darkest: #132f59;
74+
--vp-c-brand-dimm-1: rgba(112, 143, 255, 0.05);
75+
--vp-c-brand-dimm-2: rgba(112, 143, 255, 0.2);
76+
--vp-c-brand-dimm-3: rgba(112, 143, 255, 0.5);
77+
78+
--vp-c-green: #10b981;
79+
--vp-c-green-light: #34d399;
80+
--vp-c-green-lighter: #6ee7b7;
81+
--vp-c-green-dark: #059669;
82+
--vp-c-green-darker: #047857;
83+
--vp-c-green-dimm-1: rgba(16, 185, 129, 0.05);
84+
--vp-c-green-dimm-2: rgba(16, 185, 129, 0.2);
85+
--vp-c-green-dimm-3: rgba(16, 185, 129, 0.5);
86+
87+
--vp-c-yellow: #d97706;
88+
--vp-c-yellow-light: #f59e0b;
89+
--vp-c-yellow-lighter: #fbbf24;
90+
--vp-c-yellow-lightest: #fcd34d;
91+
--vp-c-yellow-dark: #b45309;
92+
--vp-c-yellow-darker: #92400e;
93+
--vp-c-yellow-darkest: #6c3d08;
94+
--vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.05);
95+
--vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
96+
--vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.5);
97+
98+
--vp-c-red: #f43f5e;
99+
--vp-c-red-light: #fb7185;
100+
--vp-c-red-lighter: #fda4af;
101+
--vp-c-red-lightest: #fdd6e0;
102+
--vp-c-red-dark: #e11d48;
103+
--vp-c-red-darker: #be123c;
104+
--vp-c-red-darkest: #9f1239;
105+
--vp-c-red-dimm-1: rgba(244, 63, 94, 0.05);
106+
--vp-c-red-dimm-2: rgba(244, 63, 94, 0.2);
107+
--vp-c-red-dimm-3: rgba(244, 63, 94, 0.5);
100108
}
101109

102110
.dark {
103111
--vp-c-bg: #1e1e20;
104112

105113
--vp-c-bg-elv: #252529;
106-
--vp-c-bg-elv-up: #313136;
114+
--vp-c-bg-elv-up: #323238;
107115
--vp-c-bg-elv-down: #1e1e20;
108-
--vp-c-bg-elv-mute: #313136;
116+
--vp-c-bg-elv-mute: #323238;
109117

110118
--vp-c-bg-soft: #252529;
111-
--vp-c-bg-soft-up: #313136;
119+
--vp-c-bg-soft-up: #323238;
112120
--vp-c-bg-soft-down: #1e1e20;
113-
--vp-c-bg-soft-mute: #313136;
121+
--vp-c-bg-soft-mute: #323238;
114122

115123
--vp-c-bg-alt: #161618;
116124

@@ -131,11 +139,55 @@
131139

132140
--vp-c-text-code: #c9def1;
133141

134-
--vp-c-mute: #313136;
142+
--vp-c-mute: #323238;
135143
--vp-c-mute-light: #3a3a3c;
136144
--vp-c-mute-lighter: #505053;
137-
--vp-c-mute-dark: #2c2c30;
138-
--vp-c-mute-darker: #252529;
145+
--vp-c-mute-dark: #222226;
146+
--vp-c-mute-darker: #505053;
147+
148+
--vp-c-brand: #708fff;
149+
--vp-c-brand-light: #a4b2ff;
150+
--vp-c-brand-lighter: #a4c8ff;
151+
--vp-c-brand-lightest: #ecefff;
152+
--vp-c-brand-dark: #4565d8;
153+
--vp-c-brand-darker: #23459f;
154+
--vp-c-brand-darkest: #132f59;
155+
--vp-c-brand-dimm-1: rgba(112, 143, 255, 0.05);
156+
--vp-c-brand-dimm-2: rgba(112, 143, 255, 0.2);
157+
--vp-c-brand-dimm-3: rgba(112, 143, 255, 0.5);
158+
159+
--vp-c-green: #10b981;
160+
--vp-c-green-light: #34d399;
161+
--vp-c-green-lighter: #6ee7b7;
162+
--vp-c-green-lightest: #a7f3d0;
163+
--vp-c-green-dark: #059669;
164+
--vp-c-green-darker: #047857;
165+
--vp-c-green-darkest: #065f46;
166+
--vp-c-green-dimm-1: rgba(16, 185, 129, 0.05);
167+
--vp-c-green-dimm-2: rgba(16, 185, 129, 0.2);
168+
--vp-c-green-dimm-3: rgba(16, 185, 129, 0.5);
169+
170+
--vp-c-yellow: #d1a336;
171+
--vp-c-yellow-light: #f8e3a1;
172+
--vp-c-yellow-lighter: #fff0c0;
173+
--vp-c-yellow-lightest: #fff7dc;
174+
--vp-c-yellow-dark: #b45309;
175+
--vp-c-yellow-darker: #92400e;
176+
--vp-c-yellow-darkest: #6c3d08;
177+
--vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.05);
178+
--vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
179+
--vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.5);
180+
181+
--vp-c-red: #f43f5e;
182+
--vp-c-red-light: #fb7185;
183+
--vp-c-red-lighter: #fda4af;
184+
--vp-c-red-lightest: #fdd6e0;
185+
--vp-c-red-dark: #e11d48;
186+
--vp-c-red-darker: #be123c;
187+
--vp-c-red-darkest: #9f1239;
188+
--vp-c-red-dimm-1: rgba(244, 63, 94, 0.05);
189+
--vp-c-red-dimm-2: rgba(244, 63, 94, 0.2);
190+
--vp-c-red-dimm-3: rgba(244, 63, 94, 0.5);
139191
}
140192

141193
/**
@@ -211,7 +263,7 @@
211263
--vp-c-code-dimm: var(--vp-c-text-dark-3);
212264

213265
--vp-code-block-color: var(--vp-c-text-dark-1);
214-
--vp-code-block-bg: #292b30;
266+
--vp-code-block-bg: #161618;
215267
--vp-code-block-bg-light: #1e1e20;
216268
--vp-code-block-divider-color: #000000;
217269

@@ -271,15 +323,15 @@
271323
* -------------------------------------------------------------------------- */
272324

273325
:root {
274-
--vp-button-brand-border: var(--vp-c-brand-lighter);
326+
--vp-button-brand-border: var(--vp-c-brand);
275327
--vp-button-brand-text: var(--vp-c-white);
276-
--vp-button-brand-bg: var(--vp-c-brand);
277-
--vp-button-brand-hover-border: var(--vp-c-brand-lighter);
328+
--vp-button-brand-bg: var(--vp-c-brand-dark);
329+
--vp-button-brand-hover-border: var(--vp-c-brand-light);
278330
--vp-button-brand-hover-text: var(--vp-c-white);
279-
--vp-button-brand-hover-bg: var(--vp-c-brand-dark);
280-
--vp-button-brand-active-border: var(--vp-c-brand-lighter);
331+
--vp-button-brand-hover-bg: var(--vp-c-brand-darker);
332+
--vp-button-brand-active-border: var(--vp-c-brand-light);
281333
--vp-button-brand-active-text: var(--vp-c-white);
282-
--vp-button-brand-active-bg: var(--vp-c-brand-darker);
334+
--vp-button-brand-active-bg: var(--vp-c-brand-darkest);
283335

284336
--vp-button-alt-border: var(--vp-c-border);
285337
--vp-button-alt-text: var(--vp-c-neutral);
@@ -317,23 +369,23 @@
317369

318370
--vp-custom-block-info-border: var(--vp-c-border);
319371
--vp-custom-block-info-text: var(--vp-c-text-2);
320-
--vp-custom-block-info-bg: var(--vp-c-bg-soft-up);
321-
--vp-custom-block-info-code-bg: var(--vp-c-bg-soft);
372+
--vp-custom-block-info-bg: var(--vp-c-bg-soft);
373+
--vp-custom-block-info-code-bg: var(--vp-c-mute);
322374

323-
--vp-custom-block-tip-border: var(--vp-c-green);
324-
--vp-custom-block-tip-text: var(--vp-c-green-dark);
325-
--vp-custom-block-tip-bg: var(--vp-c-bg-soft-up);
326-
--vp-custom-block-tip-code-bg: var(--vp-c-bg-soft);
375+
--vp-custom-block-tip-border: var(--vp-c-brand);
376+
--vp-custom-block-tip-text: var(--vp-c-brand);
377+
--vp-custom-block-tip-bg: var(--vp-c-bg-soft);
378+
--vp-custom-block-tip-code-bg: var(--vp-c-mute);
327379

328380
--vp-custom-block-warning-border: var(--vp-c-yellow);
329381
--vp-custom-block-warning-text: var(--vp-c-yellow);
330-
--vp-custom-block-warning-bg: var(--vp-c-bg-soft-up);
331-
--vp-custom-block-warning-code-bg: var(--vp-c-bg-soft);
382+
--vp-custom-block-warning-bg: var(--vp-c-bg-soft);
383+
--vp-custom-block-warning-code-bg: var(--vp-c-mute);
332384

333385
--vp-custom-block-danger-border: var(--vp-c-red);
334386
--vp-custom-block-danger-text: var(--vp-c-red);
335-
--vp-custom-block-danger-bg: var(--vp-c-bg-soft-up);
336-
--vp-custom-block-danger-code-bg: var(--vp-c-bg-soft);
387+
--vp-custom-block-danger-bg: var(--vp-c-bg-soft);
388+
--vp-custom-block-danger-code-bg: var(--vp-c-mute);
337389

338390
--vp-custom-block-details-border: var(--vp-custom-block-info-border);
339391
--vp-custom-block-details-text: var(--vp-custom-block-info-text);
@@ -408,17 +460,17 @@
408460
:root {
409461
--vp-badge-info-border: var(--vp-c-border);
410462
--vp-badge-info-text: var(--vp-c-text-2);
411-
--vp-badge-info-bg: var(--vp-c-bg-soft-up);
463+
--vp-badge-info-bg: var(--vp-c-mute);
412464

413-
--vp-badge-tip-border: var(--vp-c-green-dark);
414-
--vp-badge-tip-text: var(--vp-c-green);
415-
--vp-badge-tip-bg: var(--vp-c-green-dimm-1);
465+
--vp-badge-tip-border: var(--vp-c-brand);
466+
--vp-badge-tip-text: var(--vp-c-brand);
467+
--vp-badge-tip-bg: var(--vp-c-brand-dimm-1);
416468

417-
--vp-badge-warning-border: var(--vp-c-yellow-dark);
469+
--vp-badge-warning-border: var(--vp-c-yellow);
418470
--vp-badge-warning-text: var(--vp-c-yellow);
419471
--vp-badge-warning-bg: var(--vp-c-yellow-dimm-1);
420472

421-
--vp-badge-danger-border: var(--vp-c-red-dark);
473+
--vp-badge-danger-border: var(--vp-c-red);
422474
--vp-badge-danger-text: var(--vp-c-red);
423475
--vp-badge-danger-bg: var(--vp-c-red-dimm-1);
424476
}

‎types/default-theme.d.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -183,8 +183,8 @@ export namespace DefaultTheme {
183183

184184
export type ThemeableImage =
185185
| string
186-
| { src: string; alt?: string }
187-
| { light: string; dark: string; alt?: string }
186+
| { src: string; alt?: string; [prop: string]: any }
187+
| { light: string; dark: string; alt?: string; [prop: string]: any }
188188

189189
export type FeatureIcon =
190190
| string

0 commit comments

Comments
 (0)
Please sign in to comment.