Merge pull request #2068 from weseek/support/constantization-for-sidebar

Support/constantization for sidebar

src/client/styles/scss/theme/_apply-colors.scss

@@ -116,6 +116,17 @@ $link-hover-color: $color-link-hover;
       border-right-color: darken($bgcolor-global, 4%);
     }
   }
+  div[data-testid='GlobalNavigation'] {
+    div {
+      background-color: $bgcolor-sidebar;
+    }
+  }
+  div[data-testid='ContextualNavigation'] {
+    div {
+      color: $color-sidebar-context;
+      background-color: $bgcolor-sidebar-context;
+    }
+  }
 }
 
 /*

src/client/styles/scss/theme/antarctic.scss

@@ -91,6 +91,11 @@ html[light] {
   // badge
   $color-badge: $color-reversal;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   @import 'apply-colors';
   @import 'apply-colors-light';
 }
@@ -147,6 +152,11 @@ html[dark] {
   // badge
   $color-badge: $color-global;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+
   @import 'apply-colors';
   @import 'apply-colors-dark';
 }

src/client/styles/scss/theme/default.scss

@@ -62,6 +62,11 @@ html[light] {
   // badge
   $color-badge: $color-reversal;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: darken($bgcolor-global, 10%);
+
   @import 'apply-colors';
   @import 'apply-colors-light';
 }
@@ -118,6 +123,11 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+
   @import 'apply-colors';
   @import 'apply-colors-dark';
 }

src/client/styles/scss/theme/kibela.scss

@@ -59,6 +59,11 @@ html[light] {
   // badge
   $color-badge: $color-reversal;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-theme;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-theme, 10%);
+
   @import 'apply-colors';
   @import 'apply-colors-light';
   @import 'apply-colors-kibela';
@@ -117,6 +122,11 @@ html[dark] {
   // badge
   $color-badge: $color-global;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-theme;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-theme, 5%);
+
   @import 'apply-colors';
   @import 'apply-colors-light';
   @import 'apply-colors-kibela';