Set the hover background color of a widget (home, compass, zoom) post-4.28

Question

I want my widget buttons to be green by default, and turn red when a cursor hovers over the widget button.

You'd think the following css would do the trick. It did at 4.27:

.esri-widget--button:hover{
            background-color: red!important;
        }
      .esri-widget{
            background-color: green!important;
        }

Here is a codepen that illustrates the issue. Check out the flashing widget buttons. The map info bar is style because it's an esri-widget:

https://codepen.io/dirkvandervoort/pen/qEWbEBv

Change 4.31to 4.27 in the codepen and you will see what I mean.

Can you help me style my buttons?

ReneRubalcava · Answer

There's some work being done on calcite and core side for css variables like this, so at some point will be able to get conventions down as intended.

Dirk_Vandervoort · Answer

Pardon my cynicism Rene, but

--calcite-color-foreground-2

to change a hover background color?

ReneRubalcava · Answer

You can try adjusting some of the calcite css variables. It takes a little inspection to see what variables are used where. But this works.

.esri-widget--button {
      --calcite-icon-color: white;
      background-color: red;
    }

.esri-widget--button:hover {
      --calcite-icon-color: blue;
      --calcite-color-foreground-2: green;
    }

https://codepen.io/odoe/pen/JoPGYBB?editors=1000