.accordion-flush does not remove background-color

[taesungh]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

The Bootstrap documentation for the Flush Accordion component claims

Add .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

However, looking at the actual source code for .accordion-flush (_accordion.scss:125:149), there are no styles which actually affect the background-color property.

Is this simply an oversight in the documentation, or should the Flush Accordion actually remove the default background color? This was also briefly mentioned in discussion #34339.

Reduced test cases

Basic demo with flush accordion used within an element with background color: https://codepen.io/taesungh/pen/VwBjmmY

If removing the background is desired, I think the simplest fix is using

.accordion-flush {
  --#{prefix}accordion-bg: transparent;
  --#{prefix}accordion-active-bg: transparent;
}

but this might interfere with #37508. Otherwise, I think the documentation should be updated accordingly.

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Safari

What version of Bootstrap are you using?

v5.2.3

[julien-deramond]

Thanks for reporting the issue @taesungh.
I've searched through the history. The change of background color (from transparent to body bg) has been done via #33149. I can't find any detailed explanation on why this change occurred.
Since this change, we now have a forced white background on light mode for all versions of the accordion.

As you said, depending on the answer me might change the description or simply set a transparent background to the flush accordion (don't think it can be transparent for the normal one).

@mdo, for the flush accordion, are we supposed to have a background that is forced to white on light mode (and dark gray on dark mode) or rather a transparent one?

[mdo]

We don't currently change the background-color for either the flush accordion or the flush list group. We only remove the outer borders and rounded corners. The background color in both situations is less than idea, because these elements don't need a declaration out of the box (we just add one for bulletproofing). So, I could go either way, but we should do it consistently across all flush components.