auro-alert: ability to set background color

[erikalanghauser]

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

Currently, the auro-alerts all have transparent backgrounds. We would like the ability to set the background to white as we have some pages using a neutral background rather than background-lightest.

Describe the solution you'd like

Ability for engineers to change the background from transparent to white/background-lightest.

Describe alternatives you've considered

No response

Additional context

Here we see the alert with transparent background which takes on the page's neutral background. Ideally we want to set it to a white background.

[jordanjones243]

I have reviewed this issue and have determined that this is NOT a valid bug. By default, auro-alert has a transparent background with no specific styles being applied to it. The way to change the background of the alert is to access the shadowDOM specifically through cssParts. In this case, you need to access the part="alert" div within the shadowDOM.

If you have any questions on how to do so, please reach out to me via Teams.

The highlighted section in this photo is what needs to be targeted to change the background color.

[braven112]

We are also going to review this with the designers to see if we can provide a standard way to support auro-alert when used on any of our default backgrounds so CSS parts aren't required, but that is a good workaround for today.

[braven112]

The decision was made to change the default background from transparent to --ds-color-background-lightest or potentially a new token that works with dark mode themes.