picker text color changes to black in dark theme on mouse hover

[cdprashanth]

Description

Steps to reproduce

1.https://dev-main.illustrator.adobe.com/
2. Change color theme to dark by going to file menu and settings screen
3. now do mouse hover on color theme picker . it will be white initially before hover but on hover it changes to black

I see that ' #button:hover color ' is causing this issue of text color change on hover in picker.
#button:hover {
background-color: var( --highcontrast-picker-background-color-default,var( --mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover) ) );
border-color: var( --highcontrast-picker-border-color-default,var( --mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover) ) );
color: var( --highcontrast-picker-font-color-default,var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover)) );
}
when i uncheck #button:hover color in devtools, i dont see issue.
to do this unchecking programmatically (as hack fix )
i tried below code but it does not work :
pickerElement.setAccessibilityIdentifier(pickerId);
console.log("pdhotreprint setAccessibilityIdForColorTheme()");
//document.head.insertAdjacentHTML('beforeend', '<style>#button:hover{color:'';}</style>');

        let button2 = pickerElement.shadowRoot?.querySelector('button');
        if (button2) {
            console.log("pdhotreprint setAccessibilityIdForColorTheme() : if (button2) {");


             button2.onmouseover = function () {
                console.log("pdhotreprint setAccessibilityIdForColorTheme()  button2.onmouseover = function () {");

                this.style.color= 'var(var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover)) )';
                button2.style.color = 'var(var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover)) )';
                //this.style.color='--spectrum-picker-font-color-default';
               // button2.style.color='--spectrum-picker-font-color-default';
                //button2.style.color=null
            }
           button2.onmouseout = function () {
                console.log("pdhotreprint setAccessibilityIdForColorTheme() button2.onmouseout = function () {");
  
                this.style.color= 'var(var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover)) )';
                button2.style.color = 'var(var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover)) )';
            }

           
           button2.onmouseenter = function () {
            console.log("pdhotreprint setAccessibilityIdForColorTheme() button2.onmouseenter = function () {");
            this.style.color= 'var(var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover)) )';
            button2.style.color = 'var(var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover)) )';
        }

       button2.onmouseleave = function () {
        console.log("pdhotreprint setAccessibilityIdForColorTheme() button2.onmouseleave = function () {");
        this.style.color= 'var(var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover)) )';
        button2.style.color = 'var(var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover)) )';
        //color: 'var( --highcontrast-picker-font-color-default,var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover)) )'
    }

Expected behavior

Screenshots

Environment

• Spectrum CSS version:
• Browser(s) and OS(s):

Additional context

[cdprashanth]

@wesjohns
and me did joint debugging and found that the "var" string is missing before (--spectrum-picker-font-color-hover) . when we added that issues was resoled.
correct value should be:

#button:hover {
    background-color: var( --highcontrast-picker-background-color-default,var( --mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover) ) );
    border-color: var( --highcontrast-picker-border-color-default,var( --mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover) ) );
    color: var( --highcontrast-picker-font-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)) );

[cdprashanth]

spectrum-picker.css line 451:

    color: var(

        --highcontrast-picker-font-color-default,

        var(--mod-picker-font-color-hover, (--spectrum-picker-font-color-hover))

    );

[cdprashanth]

also, there seems to be no other places with such issues other than this :

 
pdhotre@Prashantkumrs-MacBook-Pro @spectrum-web-components % pwd
/Users/pdhotre/src/venus/uec_bugs/ProteusWeb/source/Proteus/Resources/web/node_modules/@spectrum-web-components
pdhotre@Prashantkumrs-MacBook-Pro @spectrum-web-components % find . -name "*.css.dev.js" -print | xargs grep -rnsI ",("  
./picker/src/spectrum-picker.css.dev.js:178:--highcontrast-picker-font-color-default,var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover))
./picker/src/picker.css.dev.js:178:--highcontrast-picker-font-color-default,var(--mod-picker-font-color-hover,(--spectrum-picker-font-color-hover))
pdhotre@Prashantkumrs-MacBook-Pro @spectrum-web-components %