Popup button focus color

[Jeff-Reinhart]

How do I get the popup buttons to have the same outline color on focus using CSS only? Using version 4.28.

I was able to get the Dock button and the Zoom To button to a custom color on focus using:

calcite-action {
  --calcite-ui-focus-color: red;
}

However, the Collapse and Close buttons are not affected.

Please see this codepen for example. When you click the map, the popup will appear and the title will be highlighted. Press the tab key to get to the Dock, Collapse, Close, and Zoom To. Dock and Zoom To will be red, Collapse and Close will be the stock blue.

I have tried multiple different selectors to style these buttons on focus but have been unsuccessful. I noticed that Dock and Zoom To are not in a shadow DOM (at least their calcite-action parents are not) while Collapse and Close are buried under two shadow roots each. I suspect this is the reason for the difficulty.

I have read @JoelBennett's post here and while that is some excellent work, it seems ridiculous to need JavaScript to get this simple styling done.

[ReneRubalcava · Accepted solution]

Try updating it from the :root of your css

:root {
    --calcite-ui-focus-color: red;
}

 That should do it, but it's global for everywhere that token is used, so keep that in mind.

[Jeff-Reinhart]

That works for my example. I have a little more digging to do for the actual Angular implementation, but we can call this resolved. Thanks!