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

[th0mcat]

Apologies if my terminology is weird, I do not have any background in graphic design or UI/UX.

Right now, header-panel-bg-hover being set to var(--cpd-color-gray-200) messes with custom themes as any changes in the custom theme's JSON are overridden by the default value, and you get weird looking room headers on hover when colors are drastically different from the default. However, --cpd-color-gray-200's values (24,26,31 for the first-party Dark theme, and 248,249,250 for the Light theme) are exactly the same as var(--cpd-color-bg-action-secondary-hovered), so I figured that using an already existing variable that already has the correct values would keep the default themes as-is and allow more customization in custom themes. I did not change this value in the legacy themes because I did not know if those CSS files were applied or if that would break something else.

Checklist

• I have read through review guidelines and CONTRIBUTING.md.
• Tests written for new code (and old code if feasible).
• New or updated public/exported symbols have accurate TSDoc documentation.
• Linter and other CI checks pass.
• I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

[florianduros]

The --cpd-color-bg-action-secondary-hovered semantic is not correct for a header. There is no action. @gaelledel any idea which tokens should be used instead?

[t3chguy]

The --cpd-color-bg-action-secondary-hovered semantic is not correct for a header. There is no action. @gaelledel any idea which tokens should be used instead?

The room header is a giant button, how isn't that an action?

[florianduros]

Oh sorry, i though it was the header of the room list, not the room. The token seems correct indeed but we still design approval/update on figma design

[gaelledel]

Makes sense, Ok for using bg-action-secondary-hovered