Merge branch 'dev/4.0.x' into support/apply-bootstrap4

src/client/js/components/Sidebar.jsx

@@ -7,7 +7,7 @@ import {
   withNavigationUIController,
   LayoutManager,
   NavigationProvider,
-  ThemeProvider, modeGenerator,
+  ThemeProvider,
 } from '@atlaskit/navigation-next';
 
 import { createSubscribedElement } from './UnstatedUtils';
@@ -124,9 +124,6 @@ class Sidebar extends React.Component {
             theme={theme => ({
               ...theme,
               context: 'product',
-              mode: modeGenerator({
-                product: { text: '#ffffff', background: '#334455' },
-              }),
             })}
           >
             <LayoutManager

src/client/styles/scss/_layout.scss

@@ -35,14 +35,6 @@
     height: $grw-navbar-height;
     padding: ($grw-logo-width - $grw-logomark-width) / 2;
   }
-  /*
-  .logo-text {
-    svg {
-      width: 156px;
-      height: $grw-navbar-height;
-    }
-  }
-  */
 }
 
 .confidential {
@@ -51,7 +43,7 @@
 
 #page-wrapper {
   min-width: 0;
-  margin-top: $grw-navbar-height;
+  margin-top: $grw-navbar-height + $grw-navbar-border-width;
 }
 
 .grw-modal-head {

src/client/styles/scss/_layout_kibela.scss

@@ -3,7 +3,7 @@ $navbar-height-adjustment: 10px;
 body.kibela {
   /* navbar for kibela */
   #page-wrapper {
-    margin-top: 60px;
+    margin-top: $grw-navbar-height + $grw-navbar-border-width;
   }
 
   /* Logo */

src/client/styles/scss/_mixins.scss

@@ -18,8 +18,8 @@
 }
 
 @mixin expand-editor($editor-header-plus-footer, $navbar-height-adjustment: 0px) {
-  $grw-navbar-height: $grw-navbar-height + $navbar-height-adjustment;
-  $header-plus-footer: $grw-navbar-height + $editor-header-plus-footer + 2px; // add .main padding-top
+  $navbar-height: $grw-navbar-height + $grw-navbar-border-width + $navbar-height-adjustment;
+  $header-plus-footer: $navbar-height + $editor-header-plus-footer + 2px; // add .main padding-top
 
   $editor-margin: $header-plus-footer //
     + 25px //   add .btn-open-dropzone height
@@ -27,7 +27,7 @@
 
   .main {
     width: 100%;
-    height: calc(100vh - #{$grw-navbar-height});
+    height: calc(100vh - #{$navbar-height});
     padding-top: 2px;
     margin-top: 0px !important;
 
@@ -108,3 +108,115 @@
     height: calc(100% - #{$margin});
   }
 }
+
+/*
+ * see: https://gist.github.com/bjmiller121/902745cbb38d88178882
+ *
+ * Makes a CSS hexagon! based off of http://csshexagon.com/
+ * Demo: http://sassmeister.com/gist/98fcf3ce163a97d2ef7e
+ */
+@mixin hexagonize($size, $color, $box-shadow: 0, $border: 0) {
+  width: $size;
+  height: ($size * 0.577);
+  margin: ($size * 0.288) 0;
+  background-color: $color;
+  border-right: $border;
+  border-left: $border;
+
+  @if $box-shadow != 0 {
+    box-shadow: $box-shadow;
+  }
+
+  &:before,
+  &:after {
+    position: absolute;
+    content: '';
+
+    @if $border == 0 and $box-shadow == 0 {
+      left: 0;
+      width: 0;
+      border-right: ($size/2) solid transparent;
+      border-left: ($size/2) solid transparent;
+    } @else {
+      left: ($size * 0.129);
+      z-index: 1;
+      width: ($size * 0.707);
+      height: ($size * 0.707);
+      background-color: inherit;
+      transform: scaleY(0.6) rotate(-45deg);
+    }
+
+    @if $box-shadow != 0 {
+      box-shadow: $box-shadow;
+    }
+  }
+
+  &:before {
+    @if $border == 0 and $box-shadow == 0 {
+      bottom: 99%;
+      border-bottom: ($size * 0.288) solid $color;
+    } @else {
+      top: -($size * 0.353);
+    }
+
+    @if $border != 0 {
+      border-top: $border;
+      border-right: $border;
+    }
+  }
+
+  &:after {
+    @if $border == 0 and $box-shadow == 0 {
+      top: 99%;
+      width: 0;
+      border-top: ($size * 0.288) solid $color;
+    } @else {
+      bottom: -($size * 0.353);
+    }
+
+    @if $border != 0 {
+      border-bottom: $border;
+      border-left: $border;
+    }
+  }
+
+  @if $box-shadow != 0 {
+    > span {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+
+      &:after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: $size;
+        height: $size * 0.577;
+        content: '';
+        background-color: $color;
+      }
+    }
+  }
+}
+
+@mixin override-hexagon-color($color, $bgcolor) {
+  background-color: $bgcolor;
+  transition: background-color 200ms linear, color 100ms linear, opacity 300ms cubic-bezier(0.2, 0, 0, 1), transform 300ms cubic-bezier(0.2, 0, 0, 1);
+
+  &:before {
+    border-bottom-color: $bgcolor;
+    transition: border-bottom-color 200ms linear;
+  }
+  &:after {
+    border-top-color: $bgcolor;
+    transition: border-top-color 200ms linear;
+  }
+  > span:after {
+    background-color: $bgcolor;
+    transition: background-color 200ms linear;
+  }
+  svg path {
+    fill: $color;
+  }
+}

src/client/styles/scss/_navbar.scss

@@ -1,4 +1,6 @@
 .grw-navbar {
+  border-bottom: $grw-navbar-border-width solid;
+
   .grw-navbar-toggler {
     padding: 0.5rem;
     font-size: 1.5em;

src/client/styles/scss/_sidebar.scss

@@ -1,12 +1,35 @@
 .grw-sidebar {
   .ak-navigation-resize-button {
+    // locate to the center of screen
     top: calc(50vh - 20px);
+
+    /*
+     * styles
+     */
+    // unset originalhover color
+    > div:hover {
+      background-color: unset;
+    }
+
+    $box-shadow: 0 1px 1px rgba(96, 96, 96, 0.75);
+    @include hexagonize(24px, white, $box-shadow);
+
+    // rotate 30deg
+    transform: translate(-50%) rotate(30deg);
+    > div,
+    > span svg {
+      transform: rotate(-30deg);
+    }
+
+    // centering icon
+    > span svg {
+      position: relative;
+      z-index: 1;
+      margin-top: -5.5px;
+    }
   }
 
   // override @atlaskit/navigation-next styles
-  div[data-testid='GlobalNavigation'] {
-    width: $grw-sidebar-nav-width;
-  }
   div[class$='-NavigationContainer'] {
     // Adjust to be on top of the growi subnavigation
     z-index: $zindex-sticky + 5;

src/client/styles/scss/_subnav.scss

@@ -9,12 +9,12 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
  * layout for sticky
  */
 header.grw-header {
-  top: $grw-navbar-height;
+  top: $grw-navbar-height + $grw-navbar-border-width;
 
   // Adjust to be on top of the growi subnavigation
   z-index: $zindex-sticky;
 
-  height: 80px;
+  height: 110px;
   pointer-events: none; // disable pointer events for sticky
 
   .grw-subnav {

src/client/styles/scss/_variables.scss

@@ -6,13 +6,14 @@ $font-family-for-staff-credit: Lato, -apple-system, BlinkMacSystemFont, 'Hiragin
 $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
 
 //== Layout
-$grw-navbar-height: 50px;
+$grw-navbar-height: 52px;
+$grw-navbar-border-width: 3px;
 
-$grw-sidebar-nav-width: 64px;
+$grw-sidebar-nav-width: 64px; // !!DO NOT CHANGE!! 'margin-left' for '.css-teprsg' is hardcoded
 $grw-sidebar-content-min-width: 240px;
 
 $grw-logo-width: $grw-sidebar-nav-width;
-$grw-logomark-width: 40px;
+$grw-logomark-width: 36px;
 
 // fix tab width to 95 pixels
 // see also '_on-edit.scss'

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

@@ -12,6 +12,7 @@ $input-focus-color: $color-global;
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
+@import '../mixins';
 @import 'mixins-for-tables';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
@@ -82,8 +83,6 @@ $input-focus-color: $color-global;
 //
 
 .grw-logo {
-  background-color: darken($bgcolor-logo, 10%);
-
   // set transition for fill
   svg * {
     transition: fill 0.8s ease-out;
@@ -111,9 +110,25 @@ $input-focus-color: $color-global;
   .nav-item > .nav-link {
     color: $color-link-nabvar;
   }
+
+  border-image: linear-gradient(to right, #545fff 0%, #00a6e5 100%);
+  border-image-slice: 1;
 }
 
 .grw-sidebar {
+  .ak-navigation-resize-button {
+    $color-resize-button: $color-global !default;
+    $bgcolor-resize-button: white !default;
+    $color-resize-button-hover: $color-reversal !default;
+    $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%) !default;
+
+    @include override-hexagon-color($color-resize-button, $bgcolor-resize-button);
+
+    &:hover {
+      @include override-hexagon-color($color-resize-button-hover, $bgcolor-resize-button-hover);
+    }
+  }
+
   .grw-global-item-container.active {
     button:after {
       // fukidashi color

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

@@ -49,7 +49,6 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-navbar: $themecolor;
   $bgcolor-inline-code: #f9f2f4;
   $bgcolor-card: #f5f5f5;
 
@@ -71,10 +70,20 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: $themecolor;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -95,11 +104,6 @@ html[dark] {
   // 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';
 

src/client/styles/scss/theme/christmas.scss

@@ -16,7 +16,6 @@ $themecolor: #b3000c;
 $themelight: white;
 
 $subthemecolor: #017e20;
-$bgcolor-navbar: $themecolor;
 $bgcolor-global: $themelight;
 $linktext: lighten(#0d5901, 5%);
 $linktext-hover: lighten($linktext, 12%);
@@ -60,9 +59,19 @@ html[dark] {
   $bgcolor-list-active: $themecolor;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: $themecolor;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $themecolor;
 
+  // Sidebar
+  $bgcolor-sidebar: $themecolor;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($themecolor, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -83,11 +92,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $themecolor;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($themecolor, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 

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

@@ -19,7 +19,6 @@ html[light] {
 
   // Background colors
   $bgcolor-global: white;
-  $bgcolor-navbar: #334455;
   $bgcolor-inline-code: #f9f2f4;
   $bgcolor-card: #f5f5f5;
 
@@ -41,10 +40,25 @@ html[light] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: #2a2929;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: #122c55;
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: #f4f6fc;
+  // Sidebar resize button
+  $color-resize-button: $color-reversal;
+  $bgcolor-resize-button: #5587ec;
+  $color-resize-button-hover: $color-reversal;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -65,11 +79,6 @@ 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';
 }
@@ -83,7 +92,6 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: $basecolor;
-  $bgcolor-navbar: #151515;
   $bgcolor-inline-code: darken($basecolor, 5%);
   $bgcolor-card: darken($basecolor, 5%);
 
@@ -105,10 +113,25 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: #2a2929;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+  // Sidebar resize button
+  $color-resize-button: $color-global;
+  $bgcolor-resize-button: #5587ec;
+  $color-resize-button-hover: $color-global;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -129,11 +152,6 @@ 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/future.scss

@@ -12,7 +12,6 @@ html[light],
 html[dark] {
   // Background colors
   $bgcolor-global: $themecolor;
-  $bgcolor-navbar: #011414;
   $bgcolor-inline-code: darken($themecolor, 5%);
   $bgcolor-card: darken($themecolor, 5%);
 
@@ -35,10 +34,20 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: #011414;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: darken($themecolor, 10%);
   $fillcolor-logo-mark: lighten($accentcolor, 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -59,11 +68,6 @@ html[dark] {
   // 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-dark';
 

src/client/styles/scss/theme/halloween.scss

@@ -36,7 +36,6 @@ html[light],
 html[dark] {
   // Background colors
   $bgcolor-global: #050000;
-  $bgcolor-navbar: #334455;
   $bgcolor-inline-code: #f9f2f4;
   $bgcolor-card: #f5f5f5;
 
@@ -58,10 +57,20 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $themecolor;
 
+  // Navbar
+  $bgcolor-navbar: #223344;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: darken($themecolor, 10%);
   $fillcolor-logo-mark: lighten($accentcolor, 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -82,11 +91,6 @@ html[dark] {
   // 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-dark';
 

src/client/styles/scss/theme/island.scss

@@ -19,7 +19,6 @@ html[dark] {
   // Background colors
   $bgcolor-card: #f5f5f5;
   $bgcolor-global: lighten($color-themelight, 10%);
-  $bgcolor-navbar: $color-navbar;
 
   // Font colors
   $color-reversal: #eeeeee;
@@ -34,10 +33,20 @@ html[dark] {
   $bgcolor-list-active: $color-primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: #0c2a44;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $color-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $color-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($color-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -58,11 +67,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $color-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($color-navbar, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 

src/client/styles/scss/theme/nature.scss

@@ -57,7 +57,6 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-navbar: $themecolor;
   $bgcolor-inline-code: #f9f2f4;
   $bgcolor-card: #f5f5f5;
 
@@ -78,10 +77,20 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: $themecolor;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -102,11 +111,6 @@ html[dark] {
   // 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';
 

src/client/styles/scss/theme/spring.scss

@@ -51,7 +51,6 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: white;
-  $bgcolor-navbar: $themecolor;
   $bgcolor-inline-code: #f9f2f4;
   $bgcolor-card: #f5f5f5;
 
@@ -73,10 +72,20 @@ html[dark] {
   $bgcolor-list-active: $accentcolor;
   $color-list-hover: lighten($accentcolor, 20%);
 
+  // Navbar
+  $bgcolor-navbar: $themecolor;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Icon colors
   $color-editor-icons: $color-global;
 
@@ -97,11 +106,6 @@ html[dark] {
   // 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';
 

src/client/styles/scss/theme/wood.scss

@@ -43,7 +43,6 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-navbar: $themecolor;
   $bgcolor-inline-code: darken($themecolor, 20%);
   $bgcolor-card: #f5f5f5;
 
@@ -65,11 +64,21 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: $themecolor;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: darken($themecolor, 10%);
   $fillcolor-logo-mark: lighten(desaturate($themecolor, 50%), 50%); // Icon colors
   $color-editor-icons: $color-global;
 
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
 
@@ -87,11 +96,6 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
-
   // portal
   $info: lighten($themecolor, 10%);