Add hover state to Hierarchy toggle background and hover + refactor

[marinaaisa]

Bug/issue #135891984, if applicable:

Summary

Add hover state to Hierarchy toggle background and border.

Color specs for the toggle in hover state:

• Background: same background color as the Navigator's item hover
• Border: figure-blue

Also, I realised that we still had color styles for the nav bar in dark mode that was no longer used since we moved the breadcrumbs into the Hero at #772, so I deleted those styles in a second commit.

Dependencies

NA

Testing

Steps:

1. Go to any documentation page with many nested paths
2. Assert that you see the toggle to open the nested routes
3. Assert that the specs described above are correct

Checklist

Make sure you check off the following items. If they cannot be completed, provide a reason.

• Added tests
• Ran npm test, and it succeeded
• Updated documentation if necessary

[hqhhuang]

It seems like the hover state color persists when the list is expanded but the mouse is off of the toggle. I would expect the hover background color to only be there when the mouse is actually hovering on the icon.
What do you think?

[marinaaisa]

It seems like the hover state color persists when the list is expanded but the mouse is off of the toggle. I would expect the hover background color to only be there when the mouse is actually hovering on the icon. What do you think?

Yes, this is because I added the styles to the active state too. I modified it and now it only applies to hover states. Thanks for catching this up!

[hqhhuang]

LGTM

[mportiz08]

It looks like this only adds the hover state to the actual toggle and none of the links within the expanded menu when you hover over them after using that toggle. Should we also add something for that?