Help Updating Header Color and Properties for Calcite Popover

[JasonBartling1]

I've been messing with the CSS on a test application for a while but can't quite seem to figure out how to update the color just for the header div portion of the calcite popover.  I see that there is a css variable for --calcite-popover-background-color, but that updates the complete popover and not just the header section.

In my searching I also came across the concept of configuring a custom theme, which sounds good, but I could not find any property there either to do exactly what I want.  I also tried using custom css for the header class of the popover, but it also appears to do nothing.  Does anyone know what CSS can be used to update the parts of a calcite popover like just the header background, border, and close button?

Here is a simple codepen https://codepen.io/windowslover/pen/KwVWBWW?editors=1100 that I have been working on in my testing.  Any help is appreciated! Thanks.

[TLombardi]

Hey @JasonBartling1 , I was just working on styling a popover myself. I think if you use something other than a <p> tag, it will work as expected.

<calcite-popover class="custom-example-theme" heading="About this data" label="About this data" reference-element="popover-button" closable>
<calcite-block description="This data was collected over a 24 hour period during which 27 volunteers surveyed the local area and collected and reported on sightings of non-native Blackberry."/>
</calcite-popover>

calcite-popover {
--calcite-popover-background-color: #63778c;
--calcite-popover-text-color: white;
}

Though my frustration is that the --calcite-popover-text-color doesn't adjust the "X" icon color when the component is set as "closable".

[KittyHurley]

@JasonBartling1 @TLombardi Since Popover (and other components) use Action for the close button, you can also set the close button's styling using Action's styles, like so:

#example-popover {
  --calcite-popover-background-color: var(--calcite-color-brand);
  --calcite-popover-corner-radius: 0.5rem;
  --calcite-popover-text-color: var(--calcite-color-text-inverse);
  --calcite-action-text-color: var(--calcite-color-text-inverse);
}

 Here's a CodePen showing the behavior: https://codepen.io/geospatialem/pen/MYKmJvo

[JasonBartling1]

Thanks! This is helpful!  It isn't quite granular enough to change just the header background color of the popover window, but still useful.

[JasonBartling1]

@TLombardi Do you mean to change the <p> tag under the calcite-popover to something else like a <div>?  I just tried that and it didn't seem to help.  The only way I was able to find, after a lot of searching, to change all the elements I wanted in the header was to modify the shadow dom with javascript.  This probably isn't a recommended approach, but it worked for me.  I updated the codepen above and this is the javascript I used:

function waitForShadowRoot(hostElement, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const startTime = Date.now();
    const interval = setInterval(() => {
      if (hostElement.shadowRoot) {
        clearInterval(interval);
        resolve(hostElement.shadowRoot);
      } else if (Date.now() - startTime > timeout) {
        clearInterval(interval);
        reject(new Error("Shadow Root not attached within timeout."));
      }
    }, 100); // Check every 100ms
  });
}

let style = document.createElement( 'style' );
let popoverHeader = document.querySelector('calcite-popover');
style.innerHTML = '.header { background-color: #008264; --calcite-color-border-3: #008264;} .heading { --calcite-color-text-1: white;} .close-button {--calcite-color-text-3: white;}';

waitForShadowRoot(popoverHeader)
  .then(shadowRoot => {
    console.log("Shadow Root attached:", shadowRoot);
    // Now you can work with the shadowRoot
    popoverHeader.shadowRoot.appendChild( style );
  });