fix(angular/sidebar): darker hover color for sidebar items in dark mo…

…de (#2103)

Use a darker color for sidebar items on hover than for menu items. This is necessary because the sidebar has a lighter background in dark mode than the menu.

src/angular/sidebar/sidebar/sidebar.scss

@@ -200,12 +200,16 @@
 
   &:is(:hover, :focus) {
     @include sbb.sbbMenuItemRedLean();
+    // Override the background color because the sidebar is lighter than the menu item in dark mode.
+    background-color: var(--sbb-sidebar-background-color-hover);
   }
 
   &.sbb-active {
     @include sbb.sbbMenuItemBlackLean();
     pointer-events: none;
     cursor: default;
+    // Override the background color because the sidebar is lighter than the menu item in dark mode.
+    background-color: var(--sbb-sidebar-background-color-active);
 
     &:focus-visible {
       @include sbb.sbbFocusOutline();

src/angular/styles/_typography.scss

@@ -418,6 +418,8 @@
   --sbb-sidebar-mobile-menu-bar-height: calc(2 * var(--sbb-icon-size-default));
   --sbb-icon-sidebar-item-dimension: calc(2 * var(--sbb-icon-size-default));
   --sbb-sidebar-background-color: var(--sbb-color-background);
+  --sbb-sidebar-background-color-hover: var(--sbb-menu-item-background-color-hover);
+  --sbb-sidebar-background-color-active: var(--sbb-menu-item-background-color-active);
   --sbb-sidebar-border-right-color: var(--sbb-color-cloud);
   --sbb-icon-sidebar-background-color: var(--sbb-color-milk);
   --sbb-icon-sidebar-background-color-active: var(--sbb-color-background);
@@ -969,6 +971,8 @@
       --sbb-icon-sidebar-background-color: var(--sbb-color-black);
       --sbb-sidebar-border-right-color: var(--sbb-color-iron);
       --sbb-icon-sidebar-background-color-active: var(--sbb-color-charcoal);
+      --sbb-sidebar-background-color-hover: var(--sbb-color-midnight);
+      --sbb-sidebar-background-color-active: var(--sbb-color-midnight);
 
       // Status
       --sbb-status-message-background-color: var(--sbb-color-iron);