Add colors for state hover in toggle background and border

Author: marinaaisa

src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue

@@ -101,7 +101,9 @@ $border-width: 1px;
 // of the nav area, so they are represented as clear overlays here
 $toggle-bg-color: var(--color-nav-hierarchy-collapse-background);
 $toggle-bg-color-dark: var(--color-nav-dark-hierarchy-collapse-background);
+$toggle-bg-color-hover: var(--color-nav-hierarchy-collapse-background-hover);
 $toggle-border-color: var(--color-nav-hierarchy-collapse-borders);
+$toggle-border-color-hover: var(--color-nav-hierarchy-collapse-borders-hover);
 $hierarchy-toggle-border-width: 0 !default;
 $toggle-height: rem(19px);
 $toggle-width: rem(36px);
@@ -158,8 +160,10 @@ $dropdown-vertical-offset: rem(7px);
   display: flex;
   align-items: center;
   justify-content: center;
-  @include nav-dark() {
-    background: $toggle-bg-color-dark;
+
+  &:hover {
+    background: $toggle-bg-color-hover;
+    border-color: $toggle-border-color-hover;
   }
 
   &:active,

src/styles/core/colors/_dark.scss

@@ -46,6 +46,8 @@
   --color-nav-expanded: var(--color-nav-dark-expanded);
   --color-nav-hierarchy-collapse-background: var(--color-nav-dark-hierarchy-collapse-background);
   --color-nav-hierarchy-collapse-borders: var(--color-nav-dark-hierarchy-collapse-borders);
+  --color-nav-hierarchy-collapse-background-hover: #{change-color(dark-color(fill-blue), $alpha: 0.5)};
+  --color-nav-hierarchy-collapse-borders-hover: #{dark-color(figure-blue)};
   --color-nav-hierarchy-item-borders: var(--color-nav-dark-hierarchy-item-borders);
   --color-nav-keyline: var(--color-nav-dark-keyline);
   --color-nav-link-color: var(--color-nav-dark-link-color);