refactor(Sidebar): improve SCSS variables

Author: mrholek

scss/_variables.scss

@@ -1898,7 +1898,7 @@ $sidebar-nav-link-icon-bullet-border-width:   1px !default;
 $sidebar-nav-link-icon-bullet-border-color:   var(--#{$prefix}tertiary-color) !default;
 $sidebar-nav-link-icon-bullet-border-radius:  50rem !default;
 
-$sidebar-nav-link-hover-color:                        var(--#{$prefix}emphasis-color) !default;
+$sidebar-nav-link-hover-color:                        rgba(255, 255, 255, 1) !default;
 $sidebar-nav-link-hover-bg:                           var(--#{$prefix}tertiary-bg) !default;
 $sidebar-nav-link-hover-icon-color:                   var(--#{$prefix}body-color) !default;
 $sidebar-nav-link-hover-icon-bullet-bg:               transparent !default;
@@ -1938,8 +1938,9 @@ $sidebar-toggler-width:             .5rem !default;
 $sidebar-toggler-height:            .5rem !default;
 $sidebar-toggler-padding-x:         .25rem !default;
 $sidebar-toggler-padding-y:         .25rem !default;
+$sidebar-toggler-bg:                transparent !default;
 $sidebar-toggler-color:             var(--#{$prefix}tertiary-color) !default;
-$sidebar-toggler-bg:                url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(-1 0 0 -1 512 512)'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E") !default;
+$sidebar-toggler-icon:              url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(-1 0 0 -1 512 512)'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E") !default;
 $sidebar-toggler-focus-shadow:      $focus-ring-box-shadow !default;
 $sidebar-toggler-hover-color:       var(--#{$prefix}secondary-color) !default;
 $sidebar-toggler-focus-color:       var(--#{$prefix}secondary-color) !default;

scss/sidebar/_sidebar-nav.scss

@@ -51,9 +51,9 @@
   --#{$prefix}sidebar-nav-group-border-color: #{$sidebar-nav-group-border-color};
   --#{$prefix}sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y};
   --#{$prefix}sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x};
-  --#{$prefix}sidebar-nav-group-indicator-color: #{escape-svg($sidebar-nav-group-indicator-color)};
+  --#{$prefix}sidebar-nav-group-indicator-color: #{$sidebar-nav-group-indicator-color};
   --#{$prefix}sidebar-nav-group-indicator-icon: #{escape-svg($sidebar-nav-group-indicator-icon)};
-  --#{$prefix}sidebar-nav-group-indicator-hover-color: #{escape-svg($sidebar-nav-group-indicator-hover-color)};
+  --#{$prefix}sidebar-nav-group-indicator-hover-color: #{$sidebar-nav-group-indicator-hover-color};
   --#{$prefix}sidebar-nav-group-indicator-hover-icon: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};
   --#{$prefix}sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};
   // scss-docs-end sidebar-nav-css-vars

scss/sidebar/_sidebar.scss

@@ -213,8 +213,9 @@
   // scss-docs-start sidebar-toggler-css-vars
   --#{$prefix}sidebar-toggler-width: #{$sidebar-toggler-width};
   --#{$prefix}sidebar-toggler-height: #{$sidebar-toggler-height};
+  --#{$prefix}sidebar-toggler-bg: #{$sidebar-toggler-bg};
   --#{$prefix}sidebar-toggler-color: #{$sidebar-toggler-color};
-  --#{$prefix}sidebar-toggler-bg: #{escape-svg($sidebar-toggler-bg)};
+  --#{$prefix}sidebar-toggler-icon: #{escape-svg($sidebar-toggler-icon)};
   --#{$prefix}sidebar-toggler-hover-color: #{$sidebar-toggler-hover-color};
   --#{$prefix}sidebar-toggler-focus-shadow: #{$sidebar-toggler-focus-shadow};
   --#{$prefix}sidebar-toggler-focus-color: #{$sidebar-toggler-focus-color};
@@ -226,7 +227,7 @@
   width: var(--#{$prefix}sidebar-toggler-width);
   height: var(--#{$prefix}sidebar-toggler-height);
   padding: $sidebar-toggler-padding-y $sidebar-toggler-padding-x;
-  background-color: transparent;
+  background-color: var(--#{$prefix}sidebar-toggler-bg);
   border: 0;
   @include border-radius();
 
@@ -238,7 +239,7 @@
     height: 100%;
     content: "";
     background-color: var(--#{$prefix}sidebar-toggler-color);
-    mask: var(--#{$prefix}sidebar-toggler-bg) no-repeat center;
+    mask: var(--#{$prefix}sidebar-toggler-icon) no-repeat center;
     @include transition(var(--#{$prefix}sidebar-toggler-transition));
     @include rtl() {
       transform: rotate(-180deg);