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

[Dirk_Vandervoort]

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?

[ColleenDixon]

I can get hover by setting the calcite var inside the esri-widget class like below:

I am not 100% sure this color will not show up where you will randomly not expect it, depending on how it's used inside and outside the dom:

        /* Start Map Button Styling*/

        /* Overwrite the calcite color system for widgets */

        .esri-widget {

            --calcite-color-foreground-2: red;

        }

You SHOULD be able to set --calcite-color-foreground-3: green; in the same way, but I am seeing "--calcite-color-foreground-3 not defined" in the Developer Tools

ETA: Pretty sure this has to do with the dom changes that I've heard were introduced in 4.28 (we just recently started using 4 so didn't have 4.27).  Since this is inside the dom now, CSS won't permeate it, but the vars are pulled in by ESRI

[ColleenDixon]

Edit to above, maybe not the shadow-dom issue, but rather additional styling that is more specific than the styling you had. 

I was able to get the background color on the non-hover by targeting styling with more specifity:

        .esri-widget--button:is(calcite-button):not(:hover) {

            background-color: green !important;

        }

[Dirk_Vandervoort]

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

That's an odd combination. I wish I could get the button to go back to it's non-hover state.

I'm looking at the 4.28 update documentation to see if I can get a clue.

Thanks Colleen.

[ReneRubalcava]

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

[Dirk_Vandervoort]

Pardon my cynicism Rene, but 

--calcite-color-foreground-2

to change a hover background color? 

[ReneRubalcava]

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.