Make (it possible to set) color of Caution yellow

[tats-u]

Is your feature request related to a problem? Please describe.

I believe manuals of many (physical) products treat Caution as less serious than Warning:

From: https://www.muirgraphics.com/2016/08/difference-life-death-choosing-right-safety-signal-words/

From: http://www.overheadlifting.org/understanding-safety-signs-and-overhead-lifting-equipment-hazards/

From: http://www.ishiimark.co.jp/s-label-top.html

However, VitePress (and GitHub) sets Caution's color as red, which gives the reader the mistaken impression that it is more serious than Warning.

https://vitepress.dev/guide/markdown#github-flavored-alerts

I believe that it is GitHub's fault and mistake that the color of Caution is set to red.

Describe the solution you'd like

Make the color of Caution red to make it look less serious than Warning.
It can be opt-in or opt-out to keep compatibility with GitHub.

You can newly append Danger to represent a red alert.

Describe alternatives you've considered

Use:

• Astro with Starlight
• Docusaurus (Caution is Deprecated though)

Additional context

Rspress does not accept Caution but adopts Danger as the red color.
Docusaurus also supports Danger.

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

It's already customizable. You can set this in CSS (https://vitepress.dev/guide/extending-default-theme#customizing-css):

:root {
  --vp-c-caution-1: var(--vp-c-yellow-1);
  --vp-c-caution-2: var(--vp-c-yellow-2);
  --vp-c-caution-3: var(--vp-c-yellow-3);
  --vp-c-caution-soft: var(--vp-c-yellow-soft);
}

You can newly append Danger to represent a red alert.

That is already supported.

https://stackblitz.com/edit/vite-jklazamx?file=docs/.vitepress/theme/index.ts,docs/.vitepress/theme/styles.css

[tats-u]

It's already customizable.

Thank you for the information. I wish they could be much more easily applied or be default. Vite 2 is still alpha phase, so I think we can afford to consider the change.
FYI I love the colors of Caution or Warning there. It is fine to treat Caution as just the alias of Warning (yellow) like Danger for the current Caution (red).

That is already supported.

The remaining task is to add it to the docs.

[brc-dd]

I wish they could be much more easily applied or be default.

I think the current solution is fine. Like if you don't want to separate out caution and warning, then it's like 10 lines, or even 4 lines if you choose default theme + customization during init (which most of the people end up doing eventually because they want to tweak brand colors).

I don't want it to be default because, well, github choose the order like that 🫠.

Also, btw title customization isn't mentioned in the docs either (for containers it is). It's not supported by gfm, but in vp you can do if you want to do it for one-off scenarios:

> [!WARNING] CAUTION
> Something

[tats-u]

I don't want it to be default because, well, github choose the order like that 🫠.

If you support GitHub's unreasonable order, then I have nothing else to say about this matter. Then only docs should be revised.

btw title customization isn't mentioned in the docs either

I see. That looks similar to Docusaurus.

[tats-u]

In GitLab, Caution is yellow.

https://docs.gitlab.com/user/markdown/#alerts

[tats-u]

Redmine 6.1.1 (not released yet):

From: https://x.com/g_maeda/status/1987026213769257006 (Japanese)