refactor(Sidebar): update styles

Author: mrholek

scss/_variables.scss

@@ -331,7 +331,7 @@ $theme-colors: (
 // scss-docs-end theme-colors-map
 
 // scss-docs-start theme-text-variables
-$primary-text-emphasis:    #1f1498 !default;
+$primary-text-emphasis:    #3634a3 !default;
 $secondary-text-emphasis:  #212233 !default;
 $success-text-emphasis:    #0f5722 !default;
 $info-text-emphasis:       #184c77 !default;
@@ -342,7 +342,7 @@ $dark-text-emphasis:       $gray-800 !default;
 // scss-docs-end theme-text-variables
 
 // scss-docs-start theme-bg-subtle-variables
-$primary-bg-subtle:    #ccc7f6 !default;
+$primary-bg-subtle:    #cfc7f3 !default;
 $secondary-bg-subtle:  #ced2d8 !default;
 $success-bg-subtle:    #cbedd6 !default;
 $info-bg-subtle:       #c0e6ff !default;
@@ -353,7 +353,7 @@ $dark-bg-subtle:       $gray-400 !default;
 // scss-docs-end theme-bg-subtle-variables
 
 // scss-docs-start theme-border-subtle-variables
-$primary-border-subtle:    #988fed !default;
+$primary-border-subtle:    #9d92e6 !default;
 $secondary-border-subtle:  #9da5b1 !default;
 $success-border-subtle:    #96dbad !default;
 $info-border-subtle:       #80c6ff !default;
@@ -1855,7 +1855,6 @@ $sidebar-nav-title-margin-top:                1rem !default;
 $sidebar-nav-title-color:                     var(--#{$prefix}tertiary-color) !default;
 $sidebar-nav-title-transition:                height .15s, margin .15s !default;
 
-$sidebar-nav-link-gap:                        .5rem !default;
 $sidebar-nav-link-padding-y:                  .75rem !default;
 $sidebar-nav-link-padding-x:                  1rem !default;
 $sidebar-nav-link-color:                      var(--#{$prefix}body-color) !default;
@@ -1868,6 +1867,7 @@ $sidebar-nav-link-transition:                 background .15s ease, color .15s e
 $sidebar-narrow-nav-link-padding-y:           .75rem !default;
 $sidebar-narrow-nav-link-padding-x:           .5rem !default;
 
+$sidebar-nav-link-icon-margin:                .75rem !default;
 $sidebar-nav-link-icon-color:                 var(--#{$prefix}tertiary-color) !default;
 $sidebar-nav-link-icon-width:                 1.25rem !default;
 $sidebar-nav-link-icon-height:                1.25rem !default;
@@ -1885,7 +1885,7 @@ $sidebar-nav-link-hover-icon-color:           var(--#{$prefix}body-color) !defau
 $sidebar-nav-link-hover-icon-bullet-bg:       transparent !default;
 $sidebar-nav-link-hover-icon-bullet-border-color:   var(--#{$prefix}body-color) !default;
 
-$sidebar-nav-link-active-color:               var(--#{$prefix}primary) !default;
+$sidebar-nav-link-active-color:               var(--#{$prefix}emphasis-color) !default;
 $sidebar-nav-link-active-bg:                  var(--#{$prefix}tertiary-bg) !default;
 $sidebar-nav-link-active-icon-color:          var(--#{$prefix}primary) !default;
 $sidebar-nav-link-active-icon-bullet-bg:      transparent !default;

scss/sidebar/_sidebar-nav.scss

@@ -10,7 +10,6 @@
   --#{$prefix}sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top};
   --#{$prefix}sidebar-nav-title-color: #{$sidebar-nav-title-color};
 
-  --#{$prefix}sidebar-nav-link-gap: #{$sidebar-nav-link-gap};
   --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-nav-link-padding-x};
   --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-nav-link-padding-y};
   --#{$prefix}sidebar-nav-link-color: #{$sidebar-nav-link-color};
@@ -25,6 +24,7 @@
   --#{$prefix}sidebar-nav-link-hover-color: #{$sidebar-nav-link-hover-color};
   --#{$prefix}sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg};
 
+  --#{$prefix}sidebar-nav-link-icon-margin: #{$sidebar-nav-link-icon-margin};
   --#{$prefix}sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color};
   --#{$prefix}sidebar-nav-link-icon-width: #{$sidebar-nav-link-icon-width};
   --#{$prefix}sidebar-nav-link-icon-height: #{$sidebar-nav-link-icon-height};
@@ -87,7 +87,6 @@
   .nav-link {
     display: flex;
     flex: 1;
-    gap: var(--#{$prefix}sidebar-nav-link-gap);
     align-items: center;
     padding: var(--#{$prefix}sidebar-nav-link-padding-y) var(--#{$prefix}sidebar-nav-link-padding-x);
     color: var(--#{$prefix}sidebar-nav-link-color);
@@ -175,6 +174,7 @@
     align-items: center;
     justify-content: center;
     height: var(--#{$prefix}sidebar-nav-link-icon-height);
+    @include ltr-rtl("margin-right", var(--#{$prefix}sidebar-nav-link-icon-margin));
     font-size: var(--#{$prefix}sidebar-nav-link-icon-font-size);
     color: var(--#{$prefix}sidebar-nav-link-icon-color);
     text-align: center;
@@ -250,11 +250,11 @@
     list-style: none;
 
     .nav-link {
-      @include ltr-rtl("padding-left", calc(var(--#{$prefix}sidebar-nav-link-padding-x) + var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-gap)));
+      @include ltr-rtl("padding-left", calc(var(--#{$prefix}sidebar-nav-link-padding-x) + var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)));
     }
 
     .nav-icon {
-      @include ltr-rtl("margin-left", calc((var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-gap)) * -1));
+      @include ltr-rtl("margin-left", calc((var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)) * -1));
     }
   }