Change header-panel-bg-hover to use var(--cpd-color-bg-action-secondary-hovered) for better custom theming (#31457)

* Update header-panel-bg-hover in dark theme

* Update header-panel-bg-hover in light custom theme

* Update header-panel-bg-hover in light theme

* Fix syntax error

---------

Co-authored-by: Michael Telatynski <[email protected]>

Author: th0mcat

res/themes/dark/css/_dark.pcss

@@ -54,7 +54,7 @@ $accent-1400: var(--cpd-color-green-1400);
 /* ******************** */
 $inverted-bg-color: var(--cpd-color-bg-action-primary-rest);
 $header-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
-$header-panel-bg-hover: var(--cpd-color-gray-200);
+$header-panel-bg-hover: var(--cpd-color-bg-action-secondary-hovered);
 /* ******************** */
 
 /* Theme specific colors */

res/themes/light-custom/css/_custom.pcss

@@ -46,7 +46,7 @@ $dialog-backdrop-color: var(--sidebar-color-50pct);
 
 /* --roomlist-background-color */
 $header-panel-bg-color: var(--roomlist-background-color);
-$header-panel-bg-hover: var(--cpd-color-gray-200);
+$header-panel-bg-hover: var(--cpd-color-bg-action-secondary-hovered);
 $panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color);
 /* these were #f2f5f8 instead of #f3f8fd, but close enough */
 $dark-panel-bg-color: var(--roomlist-background-color);

res/themes/light/css/_light.pcss

@@ -78,7 +78,7 @@ $accent-1400: var(--cpd-color-green-1400);
 /* ******************** */
 $inverted-bg-color: var(--cpd-color-bg-action-primary-rest);
 $header-panel-bg-color: var(--cpd-color-bg-subtle-primary);
-$header-panel-bg-hover: var(--cpd-color-gray-200);
+$header-panel-bg-hover: var(--cpd-color-bg-action-secondary-hovered);
 /* ******************** */
 
 /* Theme specific colors */