Callouts within Cards don't style correctly?

[SupremeSimon]

Hi,

I've encounter what I think is a bug with Callouts not styling correctly when placed inside of a Card.

https://codepen.io/SupremeSimon/pen/MYgOXjB

Am I right in thinking this is a bug, or have I done something wrong.

[b-d-m-p]

It seems that the wa-card's --background-color overwrites the callout's variant background color. You can still set the nested callout's background color with style or classes though, like here https://codepen.io/b-d-m-p/pen/OPLOaor

Updated to use the style of the variant in the example:

<wa-callout style="background-color: var(--wa-color-brand-fill-quiet);">

[b-d-m-p]

In wa-card, the background color is set as...

  
  :host {
    --background-color: var(--wa-color-surface-default)
  }

which is inherited from the default light theme...

  :where(:root, :host), .wa-theme-default-light {
        --wa-color-surface-default: white;
  }

And, wa-callout sets the background color this way...

 :host {
   background-color: var(--background-color, var(--wa-color-fill-quiet);
 }

...which looks to the variants to set the --wa-color-fill-quiet...

  .wa-brand, :host([variant='brand']) {
      --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
  }

  .wa-success, :host([variant='success']) {
      --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
  }

But because the --background-color, is set by wa-card, wa-callout inherits the white background, so it seems as if this is intentional as a nested default, but maybe I am wrong. You can use the custom css properties to set the style as I showed in the previous example, but you can bypass the --background-color by adding the below.

  <style>
    wa-callout {
      background-color: var(--wa-color-fill-quiet);
     } 
  </style>

Here's an a codepen with the example. https://codepen.io/b-d-m-p/pen/GgKOPeJ

Hope it helps!

[claviska]

Thanks for helping out here. We don't intend that to be the correct behavior. I've opened an issue to look into this so we can get it updated, hopefully by the next release.

[SupremeSimon]

Thanks both!