impl with mixin

src/client/styles/scss/_mixins.scss

@@ -108,3 +108,78 @@
     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, $border: 0) {
+  width: $size;
+  height: ($size * 0.577);
+  margin: ($size * 0.288) 0;
+  background-color: $color;
+  border-right: $border;
+  border-left: $border;
+
+  &:before,
+  &:after {
+    position: absolute;
+    content: '';
+
+    @if $border == 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.5774) rotate(-45deg);
+    }
+  }
+
+  &:before {
+    @if $border == 0 {
+      bottom: 100%;
+      border-bottom: ($size * 0.288) solid $color;
+    } @else {
+      top: -($size * 0.353);
+      border-top: $border;
+      border-right: $border;
+    }
+  }
+
+  &:after {
+    @if $border == 0 {
+      top: 100%;
+      width: 0;
+      border-top: ($size * 0.288) solid $color;
+    } @else {
+      bottom: -($size * 0.353);
+      border-bottom: $border;
+      border-left: $border;
+    }
+  }
+}
+
+@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;
+  }
+  svg path {
+    fill: $color;
+  }
+}

src/client/styles/scss/_sidebar.scss

@@ -1,7 +1,16 @@
 .grw-sidebar {
   .ak-navigation-resize-button {
-    @extend .btn-hexagon;
+    @include hexagonize(24px, white);
+
     top: calc(50vh - 20px);
+
+    // unset hover color
+    > div:hover {
+      background-color: unset;
+    }
+    > span {
+      margin-top: -5.5px;
+    }
   }
 
   // override @atlaskit/navigation-next styles

src/client/styles/scss/atoms/_buttons.scss

@@ -71,48 +71,3 @@
     }
   }
 }
-
-// generated by https://csshexagon.com/
-.btn-hexagon {
-  position: relative;
-
-  width: 300px;
-  height: 173.21px;
-
-  margin: 86.6px 0;
-  background-color: white;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
-
-  transform: rotate(30deg);
-
-  &:before,
-  &:after {
-    position: absolute;
-    left: 43.934px;
-    z-index: 1;
-    width: 212.13px;
-    height: 212.13px;
-    content: '';
-    background-color: inherit;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
-    transform: scaleY(0.5774) rotate(-45deg);
-  }
-  &:before {
-    top: -106.066px;
-  }
-  &:after {
-    bottom: -106.066px;
-  }
-
-  /*cover up extra shadows*/
-  > span {
-    position: absolute;
-    top: 0px;
-    left: 0;
-    z-index: 2;
-    display: block;
-    width: 300px;
-    height: 173.2051px;
-    background: inherit;
-  }
-}

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';
@@ -115,6 +116,19 @@ $input-focus-color: $color-global;
 }
 
 .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/default.scss

@@ -53,6 +53,11 @@ html[light] {
   $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;
@@ -121,6 +126,11 @@ html[dark] {
   $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;