Change the color of ArcGISLayerList header background?

ColleenDixon

We are using an ArcGISLayerList widget which uses calcite-flow / calcite-flow-item under the hood with a calcite-panel in the calcite-flow-item.

I would like to change the header background to match our UI:

The problem I am running into is:

1. header is inside the shadowDom so I can't directly style this through CSS

2. The var used for the header background is the same var used for the entire background

I would like it to look like this:

Here is the header slot nested in several shadow-doms that I cannot penetrate with CSS: 

And setting the var --calcite-color-foreground-1 to green gives me this:

I am trying to come up with the least hacky solution possible to prevent incurring techical debt when classes and nesting changes, but I am open to any suggestion 🙂

 

 

Sage_Wall

@ColleenDixon I made a mistake.  That first solution will work next release at 4.32.  This is a less elegant solution that would work at 4.31

https://codepen.io/sagewall/pen/MYgKaqo