UI: Update sidebar hover color to be a refreshing transparent blue

[MichaelArestad]

What I did

In a discussion with @dom, we decided to update the sidebar item hover color to the same blue we used as a hover state in the Interactions addon. I updated theme.background.hoverable to use a transparent blue that place really nicely in both light and dark contexts.

How to test

1. Open up the Official Storybook linked below.
2. Navigate to UI > Sidebar > Sidebar > Simple
3. Try out the new hover color
4. Switch to the dark theme and make sure it works there

Other places to test:

• The Storybook search results
• The accessibility addon uses this color, but doesn't have stories for its own components.
• Addons > Interactions > Interaction
• Addons > Interactions > Subnav (the buttons)
• Jest > open a story > open the Tests panel

Before

After

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 5ed4eff. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[yannbf]

Nice work @MichaelArestad !!

Did you also take into account the color used when navigating the sidebar via keyboard?

Here's a comparison of the changes including the hover states and the highlight with keyboard navigation, also the difference in the jest/a11y addon:

[MichaelArestad]

@yannbf I did not. Good catch! I think they are different it enough it still works well. In the future I might align the colors and add an outline to keyboard focus states.

[shilman]

Looking great -- love the new look! 😍