Allow custom admonition styling for Caution GitHub Alerts

[cdwilson]

It looks like there is special handling for Caution GitHub Alerts that styles them as Danger and prevents styling them with custom CSS.

For example, I tried adding the following CSS to style Caution and Important GitHub Alerts:

:root {
  --md-admonition-icon--important: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M 1.75,1.5 A 0.25,0.25 0 0 0 1.5,1.75 v 9.5 c 0,0.138 0.1120001,0.25 0.25,0.25 h 2 a 0.75,0.75 0 0 1 0.75,0.75 v 2.189453 l 2.7207031,-2.71875 A 0.749,0.749 0 0 1 7.75,11.5 h 6.5 A 0.25,0.25 0 0 0 14.5,11.25 V 1.75 A 0.25,0.25 0 0 0 14.25,1.5 Z M 7.8339844,3.0195313 A 0.75,0.75 0 0 1 8.75,3.75 v 2.5 a 0.75,0.75 0 0 1 -1.5,0 V 3.75 A 0.75,0.75 0 0 1 7.8339844,3.0195313 Z M 8,8 A 1,1 0 0 1 9,9 1,1 0 0 1 7,9 1,1 0 0 1 8,8 Z"/></svg>');
  --md-admonition-icon--caution: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M 5.3105469,1.5 1.5,5.3105469 V 10.689453 L 5.3105469,14.5 H 10.689453 L 14.5,10.689453 V 5.3105469 L 10.689453,1.5 Z M 8,4 a 0.75,0.75 0 0 1 0.75,0.75 v 3.5 a 0.75,0.75 0 0 1 -1.5,0 V 4.75 A 0.75,0.75 0 0 1 8,4 Z m 0,6 a 1,1 0 0 1 0,2 1,1 0 0 1 0,-2 z"/></svg>');

}

.md-typeset .admonition.important,
.md-typeset details.important {
  border-color: #7c4dff;
}

.md-typeset .important>.admonition-title,
.md-typeset .important>summary {
  background-color: #7c4dff1a;
}

.md-typeset .important>.admonition-title::before,
.md-typeset .important>summary::before {
  background-color: #7c4dff;
  -webkit-mask-image: var(--md-admonition-icon--important);
  mask-image: var(--md-admonition-icon--important);
}

.md-typeset .admonition.caution,
.md-typeset details.caution {
  border-color: #ff1744;
}

.md-typeset .caution>.admonition-title,
.md-typeset .caution>summary {
  background-color: #ff17441a;
}

.md-typeset .caution>.admonition-title::before,
.md-typeset .caution>summary::before {
  background-color: #ff1744;
  -webkit-mask-image: var(--md-admonition-icon--caution);
  mask-image: var(--md-admonition-icon--caution);
}

Here is the result when - github-callouts is enabled (Important is styled with custom CSS, but Caution is not using custom CSS):

However, if I remove - github-callouts and use - markdown_gfm_admonition (from markdown-gfm-admonition extension) instead, both Important and Caution are styled using the custom CSS:

Would it be possible to have an option to disable the special handling of the Caution Alert so that it can be styled via custom CSS?

[oprypin]

Hi. Apologies for this complication. As a workaround, you could try styling for .danger despite it being spelled "CAUTION"

[cdwilson]

That works, but the downside is that it changes the styling for Danger admonitions too, i.e.

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

!!! Danger

    This is an actual danger admonition.

I'd like to add styling just for Caution but not change the Danger styling.