CSS styling for callouts/notes within content-switcher blocks

Summary

The content-switcher currently applies its own background colors and borders to content blocks, which can conflict or interact unexpectedly with Quarto's callout styling (.callout-note, .callout-warning, etc.) when used together.

Current Behavior

The example.qmd demonstrates combining content-switcher with callout classes:

::: {.content-switcher version="v2026.01" .callout-note}
This is a 2026.01.0-specific note with custom styling.
:::

The current CSS in content-switcher.css applies:

• Background color: color-mix(in srgb, var(--content-switcher-tint) 25%, #FFFFFF 75%)
• Border: 1px solid color-mix(in srgb, var(--content-switcher-tint) 50%, #FFFFFF 50%)
• Border-radius: 16px
• Padding: .75rem 1rem

When combined with Quarto callouts, the styles may:

• Override or conflict with callout colors/borders
• Make callout icons or styling less visible
• Create visual confusion about whether something is a callout or content-switcher block

Potential Improvements

1. Callout-aware styling - Detect when .callout-* classes are present and adjust content-switcher styling accordingly

   • Remove or reduce background tint for callouts
   • Use callout's native border colors
   • Preserve callout icons and structure

2. Opt-in background styling - Make the background/border styling optional

   • Add a config option like selector: { style: "minimal" } or selector: { highlight: false }
   • Or use a .content-switcher-subtle variant class

3. Better color composition - Ensure content-switcher tint works well with:

   • .callout-note (blue)
   • .callout-warning (yellow)
   • .callout-important (red)
   • .callout-tip (green)
   • .callout-caution (orange)

4. CSS specificity improvements - Ensure callout styles take precedence when combined, or vice versa based on user intent

Use Cases

• Technical documentation often uses both version-specific content AND callouts for warnings/notes
• Users may want version-specific warnings or tips without visual style conflicts
• Some users may want subtle content-switcher styling that doesn't dominate other elements

Examples to Consider

<!-- Version-specific warning -->
::: {.content-switcher version="v2.0" .callout-warning}
This feature is deprecated in v2.0 and will be removed in v3.0.
:::

<!-- Version-specific tip -->
::: {.content-switcher version="v3.0" .callout-tip}
In v3.0, you can use the new async API for better performance.
:::

Questions

• Should content-switcher styling be more subtle by default?
• Should callout styles take precedence when both classes are present?
• Would users prefer a config option to disable background styling entirely?
• Are there other Quarto elements (besides callouts) that have similar conflicts?

Start with content-switcher.css and the combinations shown in example.qmd. Render the content-switcher with Quarto callout classes, compare the resulting backgrounds, borders, icons, and spacing, and review the listed styling alternatives. Done requires a clearly chosen precedence or configuration behavior and confirmation that the documented callout examples render without conflicting styles.