139606: Match the old navbar spacing & use custom color variables for the user menu

Author: alexandrevryghem

src/styles/_bootstrap_variables.scss

@@ -93,6 +93,10 @@ $ds-expandable-navbar-bg: #fff !default;
 $ds-navbar-link-color: $link-color !default;
 $ds-navbar-link-color-hover: #{darken($ds-navbar-link-color, 15%)} !default;
 
+$ds-user-menu-bg: #fff !default;
+$ds-user-menu-link-color: $link-color !default;
+$ds-user-menu-link-color-hover: #{darken($ds-user-menu-link-color, 15%)} !default;
+
 $ds-slider-color: darken(#94BA65, 17%) !default;
 $ds-slider-handle-color: darken(#2B4E72, 17%) !default;
 

src/styles/_custom_variables.scss

@@ -26,7 +26,7 @@
   --ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
 
   --ds-navbar-bg: #{$ds-navbar-bg};
-  --ds-navbar-item-padding: 0.25rem 0;
+  --ds-navbar-item-padding: 0.5rem 0.25rem;
   --ds-navbar-link-color: #{$ds-navbar-link-color};
   --ds-navbar-link-bg: var(--ds-navbar-bg);
   --ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
@@ -44,7 +44,7 @@
   --ds-expandable-navbar-item-padding: 0.25rem 0.5rem;
   @include media-breakpoint-up(md) {
     --ds-expandable-navbar-padding: 0.5rem 0;
-    --ds-expandable-navbar-item-padding: 0.25rem 0.75rem;
+    --ds-expandable-navbar-item-padding: 0.5rem 0.75rem;
   }
 
   --ds-user-menu-bg: var(--ds-expandable-navbar-bg);
@@ -57,11 +57,12 @@
   --ds-user-menu-dropdown-link-color-hover: var(--ds-navbar-link-color-hover);
   --ds-user-menu-dropdown-link-bg-hover: var(--ds-navbar-link-bg-hover);
   @include media-breakpoint-up(md) {
+    --ds-user-menu-bg: #{$ds-user-menu-bg};
     --ds-user-menu-item-padding: 0.25rem 1rem;
-    --ds-user-menu-dropdown-link-color: var(--ds-expandable-navbar-link-color);
-    --ds-user-menu-dropdown-link-bg: var(--ds-expandable-navbar-link-bg);
-    --ds-user-menu-dropdown-link-color-hover: var(--ds-expandable-navbar-link-color-hover);
-    --ds-user-menu-dropdown-link-bg-hover: var(--ds-expandable-navbar-link-bg-hover);
+    --ds-user-menu-dropdown-link-color: #{$ds-user-menu-link-color};
+    --ds-user-menu-dropdown-link-bg: var(--ds-user-menu-bg);
+    --ds-user-menu-dropdown-link-color-hover: #{$ds-user-menu-link-color-hover};
+    --ds-user-menu-dropdown-link-bg-hover: var(--ds-user-menu-bg);
   }
 
   @include media-breakpoint-up(md) {