FB対応しました。

すべてのoutlineボタンに対して、「最終的にはこうしたい」というのがあったので、

すべてのoutlineボタンに対して変更を加える形にしました。

src/client/styles/scss/_override-bootstrap.scss

@@ -124,6 +124,18 @@
     font-weight: 700;
   }
 
+  // button
+  @each $color, $value in $theme-colors {
+    .btn.btn-outline-#{$color} {
+      @include button-outline-variant($value, $color-hover: $value, $active-background: rgba($value, 0.1), $active-border: $value);
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      .show > &.dropdown-toggle {
+        color: $value;
+      }
+    }
+  }
+
   // disabled button (reproduction from bootstrap3.)
   // see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
   .btn.disabled,

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

@@ -235,23 +235,24 @@ ul.pagination {
  */
 body.on-edit {
   .grw-editor-navbar-bottom {
+    background-color: $bgcolor-global;
     #slack-mark-black {
       display: none;
     }
-    .btn.btn-outline-secondary {
-      color: $light !important;
-      background-color: $bgcolor-global !important;
-      border-color: $secondary !important;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: lighten($bgcolor-global, 10%) !important;
-      }
-    }
-    .show .btn.btn-outline-secondary {
-      background-color: lighten($bgcolor-global, 10%) !important;
-    }
+    // .btn.btn-outline-secondary {
+    //   color: $light !important;
+    //   background-color: $bgcolor-global !important;
+    //   border-color: $secondary !important;
+
+    //   &:active,
+    //   &:focus,
+    //   &:hover {
+    //     background-color: lighten($bgcolor-global, 10%) !important;
+    //   }
+    // }
+    // .show .btn.btn-outline-secondary {
+    //   background-color: lighten($bgcolor-global, 10%) !important;
+    // }
   }
 }
 

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

@@ -342,21 +342,10 @@ body.on-edit {
   }
 
   .grw-editor-navbar-bottom {
-    background-color: darken($bgcolor-global, 2%);
+    background-color: $gray-50;
 
     .btn.btn-outline-secondary {
-      color: $secondary !important;
-      background-color: darken($bgcolor-global, 2%) !important;
-      border-color: $border-color !important;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: lighten($secondary, 50%) !important;
-      }
-    }
-    .show .btn.btn-outline-secondary {
-      background-color: lighten($secondary, 50%) !important;
+      border-color: $border-color;
     }
   }
 }