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

feat(theme): final re-brand

Browse Source
pull/2727/head
Kia King Ishii 3 years ago
parent f0d308288c
commit c0c38629e1
11 changed files with 241 additions and 112 deletions
Show Stats Download Patch File Download Diff File

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

@ -20,7 +20,7 @@ export default defineConfig({
}, },
head: [ head: [
['meta', { name: 'theme-color', content: '#3c8772' }], ['meta', { name: 'theme-color', content: '#5f67ee' }],
[ [
'script', 'script',
{ {
@ -33,6 +33,8 @@ export default defineConfig({
], ],
themeConfig: { themeConfig: {
logo: '/vitepress-logo-mini.svg',
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.png
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.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

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

@ -0,0 +1,31 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1221_64)">
<path d="M32.0576 0.156762L9.61152 3.31135C6.51236 3.74691 4.35049 6.59389 4.78285 9.67026L9.47994 43.0918C9.9123 46.1682 12.7752 48.309 15.8743 47.8734L38.3204 44.7188C41.4195 44.2833 43.5814 41.4363 43.1491 38.3599L38.452 4.93837C38.0196 1.862 35.1568 -0.278796 32.0576 0.156762Z" fill="white"/>
<path d="M9.26274 4.3702L32.6847 1.07845C34.9845 0.755234 37.0747 2.32365 37.3859 4.53849L42.2345 39.0382C42.5458 41.253 40.969 43.3368 38.6692 43.66L15.2472 46.9517C12.9474 47.2749 10.8572 45.7065 10.546 43.4917L5.69736 8.99203C5.38608 6.77719 6.96292 4.69342 9.26274 4.3702Z" stroke="url(#paint0_linear_1221_64)" stroke-width="2"/>
<mask id="mask0_1221_64" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="11" y="11" width="27" height="26">
<path d="M33.9901 11.2517L11.5441 14.4063L14.6755 36.6874L37.1215 33.5328L33.9901 11.2517Z" fill="white"/>
</mask>
<g mask="url(#mask0_1221_64)">
<path d="M33.8846 14.6143L26.3616 34.1758C26.2063 34.5796 25.6723 34.6569 25.4088 34.3138L12.5852 17.6094C12.2982 17.2355 12.5738 16.6949 13.0425 16.713L23.3817 17.1115C23.4476 17.1141 23.5135 17.1047 23.5761 17.0838L33.1945 13.8834C33.6382 13.7358 34.0534 14.1753 33.8846 14.6143Z" fill="url(#paint1_linear_1221_64)"/>
<path d="M27.5952 12.239L20.3475 14.7582C20.2284 14.7995 20.1524 14.917 20.1626 15.0435L20.8006 22.9097C20.8156 23.0951 21.0032 23.2141 21.1754 23.1478L23.183 22.3736C23.3708 22.3011 23.5705 22.4487 23.5583 22.6511L23.3691 25.7796C23.3565 25.9901 23.5719 26.1383 23.7617 26.0497L24.9885 25.4771C25.1786 25.3885 25.3942 25.5371 25.3811 25.748L25.0727 30.6636C25.0534 30.9711 25.4709 31.0785 25.5994 30.7992L25.6852 30.6126L30.0433 17.547C30.1163 17.3282 29.9081 17.1198 29.6913 17.1944L27.6134 17.9099C27.4181 17.9771 27.2208 17.8128 27.2496 17.607L27.9596 12.5417C27.9886 12.3355 27.7906 12.171 27.5952 12.239Z" fill="url(#paint2_linear_1221_64)"/>
</g>
</g>
<defs>
<linearGradient id="paint0_linear_1221_64" x1="3.16705" y1="3.48412" x2="44.0353" y2="45.2598" gradientUnits="userSpaceOnUse">
<stop stop-color="#49C7FF"/>
<stop offset="1" stop-color="#BD36FF"/>
</linearGradient>
<linearGradient id="paint1_linear_1221_64" x1="12.1285" y1="16.1801" x2="27.1835" y2="31.4643" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint2_linear_1221_64" x1="22.269" y1="13.3949" x2="26.7717" y2="28.7391" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
<clipPath id="clip0_1221_64">
<rect width="48" height="48" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 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;
transition: opacity 0.25s;
} }
.custom-block a:hover { .custom-block a:hover {
text-decoration: underline; text-decoration: underline dotted;
opacity: 0.75;
} }
.custom-block code { .custom-block code {

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

@ -109,13 +109,10 @@
.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;
} }
.vp-doc strong { .vp-doc strong {
@ -220,7 +217,7 @@
} }
.vp-doc .custom-block a:hover { .vp-doc .custom-block a:hover {
text-decoration: underline; text-decoration: underline dotted;
} }
.vp-doc .custom-block code { .vp-doc .custom-block code {
@ -271,11 +268,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-'],

180
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;
} }
@ -86,31 +58,67 @@
--vp-c-text-code: #476582; --vp-c-text-code: #476582;
--vp-c-brand: var(--vp-c-green);
--vp-c-brand-light: var(--vp-c-green-light);
--vp-c-brand-lighter: var(--vp-c-green-lighter);
--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: #f6f6f7;
--vp-c-mute-light: #f9f9fc; --vp-c-mute-light: #f9f9fc;
--vp-c-mute-lighter: #ffffff; --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);
} }

Write Preview
Loading…
Cancel
Save