New default callout colours not reflected in documentation

[EllaKaye]

What would you like to do?

Report an issue on quarto.org

Description

Hello. It appears that the default colours for callouts have changed. The appearance of the callouts on https://quarto.org/docs/authoring/callouts.html don't reflect the new colours.

When I render the following (with v1.7.30) I get the corresponding image. The colours are different to the documentation page.

---
title: "Untitled"
format: html
---

:::{.callout-note}
A note
:::

:::{.callout-warning}
A warning
:::

:::{.callout-important}
Something important
:::

:::{.callout-tip}
This is a good idea
:::

:::{.callout-caution}
Be careful about doing this
:::

[cderv]

This is the color on the website which is using the theme: cosmo.

If I render your example with cosmo theme, I get this too.

Source

---
title: "Untitled"
format: 
  html:
    theme: cosmo
---

:::{.callout-note}
A note
:::

:::{.callout-warning}
A warning
:::

:::{.callout-important}
Something important
:::

:::{.callout-tip}
This is a good idea
:::

:::{.callout-caution}
Be careful about doing this
:::

The callouts on the website are not screenshot of the defaults, but are tweaked a little by the cosmo theme default 🤔

@cscheid @cwickham this is kind of related with question we had about how we should match the code we show, and the result.

Should we do a screenshot of the callouts default in https://quarto.org/docs/authoring/callouts.html instead of rendering them directly with the website which show theme: cosmo colors?

[EllaKaye]

Oh yes, I didn't think about the theme and it seems so obvious now you say it! I was confused in the moment, though, and others may be too. It might be a bit strange to have the callouts here look different to the callouts used elsewhere throughout the website. One option could be note in the documentation to say that the colours are affected by the theme and maybe also show the default colours (like you do at https://quarto.org/docs/presentations/revealjs/themes.html#callouts).