Skip to content

Commit 45cb85e

Browse files
brc-ddbrc-dd
authored
feat(theme): add opt-in severity-based colors for containers, alerts, and badges (#5373)
1 parent cb636b2 commit 45cb85e

7 files changed

Lines changed: 102 additions & 17 deletions

File tree

‎docs/en/guide/markdown.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -445,6 +445,8 @@ VitePress also supports [GitHub-flavored alerts](https://docs.github.com/en/get-
445445
> [!CAUTION]
446446
> Negative potential consequences of an action.
447447
448+
By default, alert colors match GitHub's, with caution and danger both rendering in red. Enable [`themeConfig.gradedContainers`](../reference/default-theme-config#gradedcontainers) to use a graded severity scale: danger (red), warning (orange), and caution (yellow). Note that `[!DANGER]` is a VitePress extension and will render as a regular blockquote on GitHub.
449+
448450
## Syntax Highlighting in Code Blocks
449451

450452
VitePress uses [Shiki](https://github.com/shikijs/shiki) to highlight language syntax in Markdown code blocks, using coloured text. Shiki supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:

‎docs/en/reference/default-theme-badge.md‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ You may use the `Badge` component which is globally available.
1414
### Title <Badge type="info" text="default" />
1515
### Title <Badge type="tip" text="^1.9.0" />
1616
### Title <Badge type="warning" text="beta" />
17-
### Title <Badge type="danger" text="caution" />
17+
### Title <Badge type="danger" text="deprecated" />
1818
```
1919

2020
Code above renders like:
2121

2222
### Title <Badge type="info" text="default" />
2323
### Title <Badge type="tip" text="^1.9.0" />
2424
### Title <Badge type="warning" text="beta" />
25-
### Title <Badge type="danger" text="caution" />
25+
### Title <Badge type="danger" text="deprecated" />
2626

2727
## Custom Children
2828

@@ -44,9 +44,21 @@ You can customize the style of badges by overriding css variables. The following
4444
--vp-badge-info-text: var(--vp-c-text-2);
4545
--vp-badge-info-bg: var(--vp-c-default-soft);
4646

47+
--vp-badge-note-border: transparent;
48+
--vp-badge-note-text: var(--vp-c-note-1);
49+
--vp-badge-note-bg: var(--vp-c-note-soft);
50+
4751
--vp-badge-tip-border: transparent;
48-
--vp-badge-tip-text: var(--vp-c-brand-1);
49-
--vp-badge-tip-bg: var(--vp-c-brand-soft);
52+
--vp-badge-tip-text: var(--vp-c-tip-1);
53+
--vp-badge-tip-bg: var(--vp-c-tip-soft);
54+
55+
--vp-badge-important-border: transparent;
56+
--vp-badge-important-text: var(--vp-c-important-1);
57+
--vp-badge-important-bg: var(--vp-c-important-soft);
58+
59+
--vp-badge-caution-border: transparent;
60+
--vp-badge-caution-text: var(--vp-c-caution-1);
61+
--vp-badge-caution-bg: var(--vp-c-caution-soft);
5062

5163
--vp-badge-warning-border: transparent;
5264
--vp-badge-warning-text: var(--vp-c-warning-1);
@@ -67,7 +79,7 @@ interface Props {
6779
// When `<slot>` is passed, this value gets ignored.
6880
text?: string
6981

70-
// Defaults to `tip`.
71-
type?: 'info' | 'tip' | 'warning' | 'danger'
82+
// Defaults to `tip`. Matches markdown containers/alerts colors.
83+
type?: 'info' | 'note' | 'tip' | 'important' | 'caution' | 'warning' | 'danger'
7284
}
7385
```

‎docs/en/reference/default-theme-config.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -484,6 +484,13 @@ Can be used to customize the label of the skip to content link. This link is sho
484484

485485
Whether to show an external link icon next to external links in markdown.
486486

487+
## gradedContainers
488+
489+
- Type: `boolean`
490+
- Default: `false`
491+
492+
Whether to color [custom containers](../guide/markdown#custom-containers), [GitHub-flavored alerts](../guide/markdown#github-flavored-alerts), and badges on a graded severity scale — danger red, warning orange, caution yellow. By default, colors match GitHub's alerts, where caution shares danger's red and warning is yellow.
493+
487494
## `useLayout` <Badge type="info" text="composable" />
488495

489496
Returns layout-related data. The returned object has the following type:

‎src/client/theme-default/Layout.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const {
1919
2020
registerWatchers({ closeSidebar })
2121
22-
const { frontmatter } = useData()
22+
const { frontmatter, theme } = useData()
2323
2424
const slots = useSlots()
2525
const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
@@ -31,7 +31,10 @@ provide(layoutInfoInjectionKey, { heroImageSlotExists })
3131
<div
3232
v-if="frontmatter.layout !== false"
3333
class="Layout"
34-
:class="frontmatter.pageClass"
34+
:class="[
35+
frontmatter.pageClass,
36+
theme.gradedContainers && 'vp-graded-containers'
37+
]"
3538
>
3639
<slot name="layout-top" />
3740
<VPSkipLink />

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

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<script setup lang="ts">
2-
interface Props {
2+
withDefaults(defineProps<{
33
text?: string
4-
type?: 'info' | 'tip' | 'warning' | 'danger'
5-
}
6-
withDefaults(defineProps<Props>(), {
4+
type?: 'info' | 'note' | 'tip' | 'important' | 'caution' | 'warning' | 'danger'
5+
}>(), {
76
type: 'tip'
87
})
98
</script>
@@ -66,12 +65,30 @@ withDefaults(defineProps<Props>(), {
6665
background-color: var(--vp-badge-info-bg);
6766
}
6867
68+
.VPBadge.note {
69+
border-color: var(--vp-badge-note-border);
70+
color: var(--vp-badge-note-text);
71+
background-color: var(--vp-badge-note-bg);
72+
}
73+
6974
.VPBadge.tip {
7075
border-color: var(--vp-badge-tip-border);
7176
color: var(--vp-badge-tip-text);
7277
background-color: var(--vp-badge-tip-bg);
7378
}
7479
80+
.VPBadge.important {
81+
border-color: var(--vp-badge-important-border);
82+
color: var(--vp-badge-important-text);
83+
background-color: var(--vp-badge-important-bg);
84+
}
85+
86+
.VPBadge.caution {
87+
border-color: var(--vp-badge-caution-border);
88+
color: var(--vp-badge-caution-text);
89+
background-color: var(--vp-badge-caution-bg);
90+
}
91+
7592
.VPBadge.warning {
7693
border-color: var(--vp-badge-warning-border);
7794
color: var(--vp-badge-warning-text);

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

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,11 @@
6969
--vp-c-yellow-3: #9f6a00;
7070
--vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
7171

72+
--vp-c-orange-1: #9a4224;
73+
--vp-c-orange-2: #b95a00;
74+
--vp-c-orange-3: #c16200;
75+
--vp-c-orange-soft: rgba(249, 115, 22, 0.14);
76+
7277
--vp-c-red-1: #b8272c;
7378
--vp-c-red-2: #d5393e;
7479
--vp-c-red-3: #e0575b;
@@ -103,6 +108,11 @@
103108
--vp-c-yellow-3: #a46a0a;
104109
--vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
105110

111+
--vp-c-orange-1: #fb8c00;
112+
--vp-c-orange-2: #e46a02;
113+
--vp-c-orange-3: #b45309;
114+
--vp-c-orange-soft: rgba(249, 115, 22, 0.16);
115+
106116
--vp-c-red-1: #f66f81;
107117
--vp-c-red-2: #f14158;
108118
--vp-c-red-3: #b62a3c;
@@ -256,6 +266,18 @@
256266
--vp-c-caution-soft: var(--vp-c-red-soft);
257267
}
258268

269+
:root:where(:has(.vp-graded-containers)) {
270+
--vp-c-warning-1: var(--vp-c-orange-1);
271+
--vp-c-warning-2: var(--vp-c-orange-2);
272+
--vp-c-warning-3: var(--vp-c-orange-3);
273+
--vp-c-warning-soft: var(--vp-c-orange-soft);
274+
275+
--vp-c-caution-1: var(--vp-c-yellow-1);
276+
--vp-c-caution-2: var(--vp-c-yellow-2);
277+
--vp-c-caution-3: var(--vp-c-yellow-3);
278+
--vp-c-caution-soft: var(--vp-c-yellow-soft);
279+
}
280+
259281
/**
260282
* Typography
261283
* -------------------------------------------------------------------------- */
@@ -438,6 +460,11 @@
438460
--vp-custom-block-important-bg: var(--vp-c-important-soft);
439461
--vp-custom-block-important-code-bg: var(--vp-c-important-soft);
440462

463+
--vp-custom-block-caution-border: transparent;
464+
--vp-custom-block-caution-text: var(--vp-c-text-1);
465+
--vp-custom-block-caution-bg: var(--vp-c-caution-soft);
466+
--vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);
467+
441468
--vp-custom-block-warning-border: transparent;
442469
--vp-custom-block-warning-text: var(--vp-c-text-1);
443470
--vp-custom-block-warning-bg: var(--vp-c-warning-soft);
@@ -448,11 +475,6 @@
448475
--vp-custom-block-danger-bg: var(--vp-c-danger-soft);
449476
--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
450477

451-
--vp-custom-block-caution-border: transparent;
452-
--vp-custom-block-caution-text: var(--vp-c-text-1);
453-
--vp-custom-block-caution-bg: var(--vp-c-caution-soft);
454-
--vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);
455-
456478
--vp-custom-block-details-border: var(--vp-custom-block-info-border);
457479
--vp-custom-block-details-text: var(--vp-custom-block-info-text);
458480
--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
@@ -535,10 +557,22 @@
535557
--vp-badge-info-text: var(--vp-c-text-2);
536558
--vp-badge-info-bg: var(--vp-c-default-soft);
537559

560+
--vp-badge-note-border: transparent;
561+
--vp-badge-note-text: var(--vp-c-note-1);
562+
--vp-badge-note-bg: var(--vp-c-note-soft);
563+
538564
--vp-badge-tip-border: transparent;
539565
--vp-badge-tip-text: var(--vp-c-tip-1);
540566
--vp-badge-tip-bg: var(--vp-c-tip-soft);
541567

568+
--vp-badge-important-border: transparent;
569+
--vp-badge-important-text: var(--vp-c-important-1);
570+
--vp-badge-important-bg: var(--vp-c-important-soft);
571+
572+
--vp-badge-caution-border: transparent;
573+
--vp-badge-caution-text: var(--vp-c-caution-1);
574+
--vp-badge-caution-bg: var(--vp-c-caution-soft);
575+
542576
--vp-badge-warning-border: transparent;
543577
--vp-badge-warning-text: var(--vp-c-warning-1);
544578
--vp-badge-warning-bg: var(--vp-c-warning-soft);

‎types/default-theme.d.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,16 @@ export namespace DefaultTheme {
135135
*/
136136
externalLinkIcon?: boolean
137137

138+
/**
139+
* Color custom containers, GitHub-flavored alerts, and badges on a
140+
* graded severity scale (danger red > warning orange > caution yellow)
141+
* instead of matching GitHub's alert colors, where caution is red and
142+
* warning is yellow.
143+
*
144+
* @default false
145+
*/
146+
gradedContainers?: boolean
147+
138148
/**
139149
* Customize text of 404 page.
140150
*/

0 commit comments

Comments
 (0)