msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

feat(theme)!: final re-brand (#2727)

Browse Source 
Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Co-authored-by: Lehoczky Zoltán <ifjlehoczkyzoltan@gmail.com>
pull/2753/head
Kia King Ishii 1 year ago committed by GitHub
parent 1d6254b615
commit c0d838bda0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 234 additions and 123 deletions
Show Stats Download Patch File Download Diff File

19
docs/.vitepress/config.ts
Unescape View File

@ -20,7 +20,22 @@ export default defineConfig({
}, },
head: [ head: [
['meta', { name: 'theme-color', content: '#3c8772' }], ['link', { rel: 'icon', href: '/vitepress-logo-mini.svg' }],
['meta', { name: 'theme-color', content: '#5f67ee' }],
['meta', { name: 'og:type', content: 'website' }],
['meta', { name: 'og:locale', content: 'en' }],
['meta', { name: 'og:site_name', content: 'VitePress' }],
[
'meta',
{ name: 'og:image', content: 'https://vitepress.dev/vitepress-og.jpg' }
],
[
'meta',
{
name: 'twitter:image',
content: 'https://vitepress.dev/vitepress-og.jpg'
}
],
[ [
'script', 'script',
{ {
@ -33,6 +48,8 @@ export default defineConfig({
], ],
themeConfig: { themeConfig: {
logo: { src: '/vitepress-logo-mini.svg', width: 24, height: 24 },
nav: nav(), nav: nav(),
sidebar: { sidebar: {

24
docs/index.md
Unescape View File

@ -15,6 +15,9 @@ hero:
- theme: alt - theme: alt
text: View on GitHub text: View on GitHub
link: https://github.com/vuejs/vitepress link: https://github.com/vuejs/vitepress
image:
src: /vitepress-logo-large.webp
alt: VitePress
features: features:
- icon: 📝 - icon: 📝
@ -30,3 +33,24 @@ features:
title: Ship Fast Sites title: Ship Fast Sites
details: Fast initial load with static HTML, fast post-load navigation with client-side routing. details: Fast initial load with static HTML, fast post-load navigation with client-side routing.
--- ---
<style>
:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
--vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
--vp-home-hero-image-filter: blur(40px);
}
@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(56px);
}
}
@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(72px);
}
}
</style>

BIN
docs/public/vitepress-logo-large.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

1
docs/public/vitepress-logo-mini.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48"><g clip-path="url(#a)"><path fill="#fff" d="M32.058.157 9.612 3.31c-3.1.436-5.262 3.283-4.83 6.36L9.48 43.09c.432 3.077 3.295 5.218 6.394 4.782L38.32 44.72c3.1-.436 5.261-3.283 4.83-6.36L38.451 4.94C38.02 1.861 35.157-.28 32.058.156Z"/><path stroke="url(#b)" stroke-width="2" d="m9.263 4.37 23.422-3.292c2.3-.323 4.39 1.246 4.7 3.46l4.85 34.5c.31 2.215-1.266 4.299-3.566 4.622l-23.422 3.292c-2.3.323-4.39-1.245-4.701-3.46l-4.849-34.5c-.31-2.215 1.266-4.299 3.566-4.622Z"/><mask id="c" width="27" height="26" x="11" y="11" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="m33.99 11.252-22.446 3.154 3.131 22.281 22.446-3.154-3.13-22.281Z"/></mask><g mask="url(#c)"><path fill="url(#d)" d="m33.885 14.614-7.523 19.562a.55.55 0 0 1-.953.138L12.585 17.609a.556.556 0 0 1 .457-.896l10.34.398a.546.546 0 0 0 .194-.027l9.618-3.2a.556.556 0 0 1 .69.73Z"/><path fill="url(#e)" d="m27.595 12.239-7.247 2.52a.278.278 0 0 0-.185.284l.638 7.867a.277.277 0 0 0 .374.238l2.008-.774a.277.277 0 0 1 .375.277l-.189 3.129a.277.277 0 0 0 .393.27l1.226-.573c.19-.088.406.06.393.271l-.308 4.916c-.02.307.398.414.526.135l.086-.186 4.358-13.066a.278.278 0 0 0-.352-.353l-2.078.716a.278.278 0 0 1-.363-.303l.71-5.065a.278.278 0 0 0-.365-.303Z"/></g></g><defs><linearGradient id="b" x1="3.167" x2="44.035" y1="3.484" y2="45.26" gradientUnits="userSpaceOnUse"><stop stop-color="#49C7FF"/><stop offset="1" stop-color="#BD36FF"/></linearGradient><linearGradient id="d" x1="12.129" x2="27.183" y1="16.18" y2="31.464" gradientUnits="userSpaceOnUse"><stop stop-color="#41D1FF"/><stop offset="1" stop-color="#BD34FE"/></linearGradient><linearGradient id="e" x1="22.269" x2="26.772" y1="13.395" y2="28.739" gradientUnits="userSpaceOnUse"><stop stop-color="#FFEA83"/><stop offset=".083" stop-color="#FFDD35"/><stop offset="1" stop-color="#FFA800"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h48v48H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
docs/public/vitepress-og.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 250 KiB

34
src/client/theme-default/components/VPBadge.vue
Unescape View File

@ -16,26 +16,36 @@ defineProps<{
display: inline-block; display: inline-block;
margin-left: 2px; margin-left: 2px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 10px; border-radius: 12px;
padding: 0 8px; padding: 0 10px;
line-height: 18px; line-height: 22px;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
transform: translateY(-2px); transform: translateY(-2px);
} }
h1 .VPBadge, .vp-doc h1 > .VPBadge {
h2 .VPBadge, margin-top: 4px;
h3 .VPBadge, vertical-align: top;
h4 .VPBadge,
h5 .VPBadge,
h6 .VPBadge {
vertical-align: text-top;
} }
h2 .VPBadge { .vp-doc h2 > .VPBadge {
border-radius: 11px; margin-top: 3px;
line-height: 20px; line-height: 20px;
padding: 0 8px;
vertical-align: top;
}
.vp-doc h3 > .VPBadge {
line-height: 20px;
vertical-align: middle;
}
.vp-doc h4 > .VPBadge,
.vp-doc h5 > .VPBadge,
.vp-doc h6 > .VPBadge {
vertical-align: middle;
line-height: 18px;
} }
.VPBadge.info { .VPBadge.info {

17
src/client/theme-default/components/VPDocOutlineDropdown.vue
Unescape View File

@ -36,7 +36,7 @@ onContentUpdated(() => {
<style scoped> <style scoped>
.VPDocOutlineDropdown { .VPDocOutlineDropdown {
margin-bottom: 42px; margin-bottom: 48px;
} }
.VPDocOutlineDropdown button { .VPDocOutlineDropdown button {
@ -44,11 +44,12 @@ onContentUpdated(() => {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
color: var(--vp-c-text-2);
transition: color 0.5s;
border: 1px solid var(--vp-c-border); border: 1px solid var(--vp-c-border);
padding: 4px 12px; padding: 4px 12px;
color: var(--vp-c-text-2);
background-color: var(--vp-c-mute);
border-radius: 8px; border-radius: 8px;
transition: color 0.5s;
} }
.VPDocOutlineDropdown button:hover { .VPDocOutlineDropdown button:hover {
@ -63,14 +64,14 @@ onContentUpdated(() => {
.icon { .icon {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: 2px; width: 16px;
width: 14px; height: 16px;
height: 14px;
fill: currentColor; fill: currentColor;
} }
:deep(.outline-link) { :deep(.outline-link) {
font-size: 13px; font-size: 14px;
font-weight: 400;
} }
.open > .icon { .open > .icon {
@ -78,7 +79,7 @@ onContentUpdated(() => {
} }
.items { .items {
margin-top: 10px; margin-top: 12px;
border-left: 1px solid var(--vp-c-divider); border-left: 1px solid var(--vp-c-divider);
} }
</style> </style>

4
src/client/theme-default/components/VPDocOutlineItem.vue
Unescape View File

@ -31,7 +31,7 @@ function onClick({ target: el }: Event) {
} }
.nested { .nested {
padding-left: 13px; padding-left: 16px;
} }
.outline-link { .outline-link {
@ -42,7 +42,7 @@ function onClick({ target: el }: Event) {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: color 0.5s; transition: color 0.5s;
font-weight: 500; font-weight: 400;
} }
.outline-link:hover, .outline-link:hover,

42
src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
Unescape View File

@ -58,10 +58,14 @@ function scrollToTop() {
class="items" class="items"
@click="onItemClick" @click="onItemClick"
> >
<a class="top-link" href="#" @click="scrollToTop"> <div class="header">
{{ theme.returnToTopLabel || 'Return to top' }} <a class="top-link" href="#" @click="scrollToTop">
</a> {{ theme.returnToTopLabel || 'Return to top' }}
<VPDocOutlineItem :headers="headers" /> </a>
</div>
<div class="outline">
<VPDocOutlineItem :headers="headers" />
</div>
</div> </div>
</Transition> </Transition>
</div> </div>
@ -71,6 +75,7 @@ function scrollToTop() {
.VPLocalNavOutlineDropdown { .VPLocalNavOutlineDropdown {
padding: 12px 20px 11px; padding: 12px 20px 11px;
} }
.VPLocalNavOutlineDropdown button { .VPLocalNavOutlineDropdown button {
display: block; display: block;
font-size: 12px; font-size: 12px;
@ -110,26 +115,35 @@ function scrollToTop() {
.items { .items {
position: absolute; position: absolute;
left: 20px;
right: 20px;
top: 64px; top: 64px;
background-color: var(--vp-local-nav-bg-color); right: 16px;
padding: 4px 10px 16px; left: 16px;
border: 1px solid var(--vp-c-divider); display: grid;
gap: 1px;
border: 1px solid var(--vp-c-border);
border-radius: 8px; border-radius: 8px;
background-color: var(--vp-c-gutter);
max-height: calc(var(--vp-vh, 100vh) - 86px); max-height: calc(var(--vp-vh, 100vh) - 86px);
overflow: hidden auto; overflow: hidden auto;
box-shadow: var(--vp-shadow-3); box-shadow: var(--vp-shadow-3);
} }
.header {
background-color: var(--vp-c-bg-soft);
}
.top-link { .top-link {
display: block; display: block;
color: var(--vp-c-brand); padding: 0 16px;
font-size: 13px; line-height: 48px;
font-size: 14px;
font-weight: 500; font-weight: 500;
padding: 6px 0; color: var(--vp-c-brand);
margin: 0 13px 10px; }
border-bottom: 1px solid var(--vp-c-divider);
.outline {
padding: 8px 0;
background-color: var(--vp-c-bg-soft);
} }
.flyout-enter-active { .flyout-enter-active {

5
src/client/theme-default/styles/components/custom-block.css
Unescape View File

@ -84,10 +84,13 @@
.custom-block a { .custom-block a {
color: inherit; color: inherit;
font-weight: 600; font-weight: 600;
text-decoration: underline dotted;
text-underline-offset: 2px;
transition: opacity 0.25s;
} }
.custom-block a:hover { .custom-block a:hover {
text-decoration: underline; opacity: 0.75;
} }
.custom-block code { .custom-block code {

15
src/client/theme-default/styles/components/vp-doc.css
Unescape View File

@ -109,13 +109,11 @@
.vp-doc a { .vp-doc a {
font-weight: 500; font-weight: 500;
color: var(--vp-c-brand); color: var(--vp-c-brand);
text-decoration-style: dotted;
transition: color 0.25s;
} }
.vp-doc a:hover { .vp-doc a:hover {
/* color: var(--vp-c-brand-dark); */ text-decoration: underline dotted;
text-decoration: underline; text-underline-offset: 2px;
} }
.vp-doc strong { .vp-doc strong {
@ -219,10 +217,6 @@
font-weight: 600; font-weight: 600;
} }
.vp-doc .custom-block a:hover {
text-decoration: underline;
}
.vp-doc .custom-block code { .vp-doc .custom-block code {
font-size: var(--vp-custom-block-code-font-size); font-size: var(--vp-custom-block-code-font-size);
font-weight: 700; font-weight: 700;
@ -271,11 +265,6 @@
.vp-doc a > code { .vp-doc a > code {
color: var(--vp-c-brand); color: var(--vp-c-brand);
transition: color 0.25s;
}
.vp-doc a:hover > code {
color: var(--vp-c-brand-dark);
} }
.vp-doc div[class*='language-'], .vp-doc div[class*='language-'],

192
src/client/theme-default/styles/vars.css
Unescape View File

@ -9,7 +9,6 @@
:root { :root {
--vp-c-white: #ffffff; --vp-c-white: #ffffff;
--vp-c-black: #000000; --vp-c-black: #000000;
--vp-c-gray: #8e8e93; --vp-c-gray: #8e8e93;
--vp-c-text-light-1: rgba(60, 60, 67); --vp-c-text-light-1: rgba(60, 60, 67);
@ -20,33 +19,6 @@
--vp-c-text-dark-2: rgba(235, 235, 245, 0.6); --vp-c-text-dark-2: rgba(235, 235, 245, 0.6);
--vp-c-text-dark-3: rgba(235, 235, 245, 0.38); --vp-c-text-dark-3: rgba(235, 235, 245, 0.38);
--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-dark: #b45309;
--vp-c-yellow-darker: #92400e;
--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-dark: #e11d48;
--vp-c-red-darker: #be123c;
--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);
--vp-c-sponsor: #db2777; --vp-c-sponsor: #db2777;
} }
@ -69,9 +41,9 @@
--vp-c-bg-alt: #f6f6f7; --vp-c-bg-alt: #f6f6f7;
--vp-c-border: rgba(60, 60, 67, 0.29); --vp-c-border: #c2c2c4;
--vp-c-divider: rgba(60, 60, 67, 0.12); --vp-c-divider: #e2e2e3;
--vp-c-gutter: rgba(60, 60, 67, 0.12); --vp-c-gutter: #e2e2e3;
--vp-c-neutral: var(--vp-c-black); --vp-c-neutral: var(--vp-c-black);
--vp-c-neutral-inverse: var(--vp-c-white); --vp-c-neutral-inverse: var(--vp-c-white);
@ -86,31 +58,67 @@
--vp-c-text-code: #476582; --vp-c-text-code: #476582;
--vp-c-brand: var(--vp-c-green); --vp-c-mute: #eeeef0;
--vp-c-brand-light: var(--vp-c-green-light); --vp-c-mute-light: #f3f3f9;
--vp-c-brand-lighter: var(--vp-c-green-lighter); --vp-c-mute-lighter: #f9f9fa;
--vp-c-brand-dark: var(--vp-c-green-dark);
--vp-c-brand-darker: var(--vp-c-green-darker);
--vp-c-mute: #f6f6f7;
--vp-c-mute-light: #f9f9fc;
--vp-c-mute-lighter: #ffffff;
--vp-c-mute-dark: #e3e3e5; --vp-c-mute-dark: #e3e3e5;
--vp-c-mute-darker: #d7d7d9; --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 { .dark {
--vp-c-bg: #1e1e20; --vp-c-bg: #1e1e20;
--vp-c-bg-elv: #252529; --vp-c-bg-elv: #252529;
--vp-c-bg-elv-up: #313136; --vp-c-bg-elv-up: #323238;
--vp-c-bg-elv-down: #1e1e20; --vp-c-bg-elv-down: #1e1e20;
--vp-c-bg-elv-mute: #313136; --vp-c-bg-elv-mute: #323238;
--vp-c-bg-soft: #252529; --vp-c-bg-soft: #252529;
--vp-c-bg-soft-up: #313136; --vp-c-bg-soft-up: #323238;
--vp-c-bg-soft-down: #1e1e20; --vp-c-bg-soft-down: #1e1e20;
--vp-c-bg-soft-mute: #313136; --vp-c-bg-soft-mute: #323238;
--vp-c-bg-alt: #161618; --vp-c-bg-alt: #161618;
@ -131,11 +139,55 @@
--vp-c-text-code: #c9def1; --vp-c-text-code: #c9def1;
--vp-c-mute: #313136; --vp-c-mute: #323238;
--vp-c-mute-light: #3a3a3c; --vp-c-mute-light: #3a3a3c;
--vp-c-mute-lighter: #505053; --vp-c-mute-lighter: #505053;
--vp-c-mute-dark: #2c2c30; --vp-c-mute-dark: #222226;
--vp-c-mute-darker: #252529; --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);
} }
/** /**
@ -211,7 +263,7 @@
--vp-c-code-dimm: var(--vp-c-text-dark-3); --vp-c-code-dimm: var(--vp-c-text-dark-3);
--vp-code-block-color: var(--vp-c-text-dark-1); --vp-code-block-color: var(--vp-c-text-dark-1);
--vp-code-block-bg: #292b30; --vp-code-block-bg: #161618;
--vp-code-block-bg-light: #1e1e20; --vp-code-block-bg-light: #1e1e20;
--vp-code-block-divider-color: #000000; --vp-code-block-divider-color: #000000;
@ -271,15 +323,15 @@
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
:root { :root {
--vp-button-brand-border: var(--vp-c-brand-lighter); --vp-button-brand-border: var(--vp-c-brand);
--vp-button-brand-text: var(--vp-c-white); --vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand); --vp-button-brand-bg: var(--vp-c-brand-dark);
--vp-button-brand-hover-border: var(--vp-c-brand-lighter); --vp-button-brand-hover-border: var(--vp-c-brand-light);
--vp-button-brand-hover-text: var(--vp-c-white); --vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-dark); --vp-button-brand-hover-bg: var(--vp-c-brand-darker);
--vp-button-brand-active-border: var(--vp-c-brand-lighter); --vp-button-brand-active-border: var(--vp-c-brand-light);
--vp-button-brand-active-text: var(--vp-c-white); --vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-c-brand-darker); --vp-button-brand-active-bg: var(--vp-c-brand-darkest);
--vp-button-alt-border: var(--vp-c-border); --vp-button-alt-border: var(--vp-c-border);
--vp-button-alt-text: var(--vp-c-neutral); --vp-button-alt-text: var(--vp-c-neutral);
@ -317,23 +369,23 @@
--vp-custom-block-info-border: var(--vp-c-border); --vp-custom-block-info-border: var(--vp-c-border);
--vp-custom-block-info-text: var(--vp-c-text-2); --vp-custom-block-info-text: var(--vp-c-text-2);
--vp-custom-block-info-bg: var(--vp-c-bg-soft-up); --vp-custom-block-info-bg: var(--vp-c-bg-soft);
--vp-custom-block-info-code-bg: var(--vp-c-bg-soft); --vp-custom-block-info-code-bg: var(--vp-c-mute);
--vp-custom-block-tip-border: var(--vp-c-green); --vp-custom-block-tip-border: var(--vp-c-brand);
--vp-custom-block-tip-text: var(--vp-c-green-dark); --vp-custom-block-tip-text: var(--vp-c-brand);
--vp-custom-block-tip-bg: var(--vp-c-bg-soft-up); --vp-custom-block-tip-bg: var(--vp-c-bg-soft);
--vp-custom-block-tip-code-bg: var(--vp-c-bg-soft); --vp-custom-block-tip-code-bg: var(--vp-c-mute);
--vp-custom-block-warning-border: var(--vp-c-yellow); --vp-custom-block-warning-border: var(--vp-c-yellow);
--vp-custom-block-warning-text: var(--vp-c-yellow); --vp-custom-block-warning-text: var(--vp-c-yellow);
--vp-custom-block-warning-bg: var(--vp-c-bg-soft-up); --vp-custom-block-warning-bg: var(--vp-c-bg-soft);
--vp-custom-block-warning-code-bg: var(--vp-c-bg-soft); --vp-custom-block-warning-code-bg: var(--vp-c-mute);
--vp-custom-block-danger-border: var(--vp-c-red); --vp-custom-block-danger-border: var(--vp-c-red);
--vp-custom-block-danger-text: var(--vp-c-red); --vp-custom-block-danger-text: var(--vp-c-red);
--vp-custom-block-danger-bg: var(--vp-c-bg-soft-up); --vp-custom-block-danger-bg: var(--vp-c-bg-soft);
--vp-custom-block-danger-code-bg: var(--vp-c-bg-soft); --vp-custom-block-danger-code-bg: var(--vp-c-mute);
--vp-custom-block-details-border: var(--vp-custom-block-info-border); --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-text: var(--vp-custom-block-info-text);
@ -408,17 +460,17 @@
:root { :root {
--vp-badge-info-border: var(--vp-c-border); --vp-badge-info-border: var(--vp-c-border);
--vp-badge-info-text: var(--vp-c-text-2); --vp-badge-info-text: var(--vp-c-text-2);
--vp-badge-info-bg: var(--vp-c-bg-soft-up); --vp-badge-info-bg: var(--vp-c-mute);
--vp-badge-tip-border: var(--vp-c-green-dark); --vp-badge-tip-border: var(--vp-c-brand);
--vp-badge-tip-text: var(--vp-c-green); --vp-badge-tip-text: var(--vp-c-brand);
--vp-badge-tip-bg: var(--vp-c-green-dimm-1); --vp-badge-tip-bg: var(--vp-c-brand-dimm-1);
--vp-badge-warning-border: var(--vp-c-yellow-dark); --vp-badge-warning-border: var(--vp-c-yellow);
--vp-badge-warning-text: 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-bg: var(--vp-c-yellow-dimm-1);
--vp-badge-danger-border: var(--vp-c-red-dark); --vp-badge-danger-border: var(--vp-c-red);
--vp-badge-danger-text: 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-bg: var(--vp-c-red-dimm-1);
} }

4
types/default-theme.d.ts vendored
Unescape View File

@ -183,8 +183,8 @@ export namespace DefaultTheme {
export type ThemeableImage = export type ThemeableImage =
| string | string
| { src: string; alt?: string } | { src: string; alt?: string; [prop: string]: any }
| { light: string; dark: string; alt?: string } | { light: string; dark: string; alt?: string; [prop: string]: any }
export type FeatureIcon = export type FeatureIcon =
| string | string

Write Preview
Loading…
Cancel
Save