WIP: migration

apps/app/src/components/Layout/Admin.module.scss

@@ -264,7 +264,7 @@ $slack-work-space-name-card-border: #efc1f6;
 
     // style
     .theme-option-container a {
-      background-color: $gray-50;
+      background-color: $gray-100;
       border: 1px solid $border-color;
     }
     .theme-option-name, .theme-option-badge {

apps/app/src/styles/atoms/mixins/_buttons.scss

@@ -5,7 +5,7 @@
     fill: color-yiq($background);
   }
 
-  @include bs.hover() {
+  &:hover {
     svg {
       fill: color-yiq($hover-background);
     }
@@ -39,7 +39,7 @@
   svg {
     fill: $value;
   }
-  @include bs.hover() {
+  &:hover {
     svg {
       fill: $color-hover;
     }

apps/app/src/styles/theme/_apply-colors-dark.scss

@@ -34,7 +34,7 @@
   $body-color: var(--color-global);
 
   // override bootstrap variables
-  $text-muted: $gray-550;
+  // $text-muted: $gray-550;
   $table-dark-color: $color-table;
   $table-dark-bg: $bgcolor-table;
   $table-dark-border-color: $border-color-table;
@@ -50,613 +50,613 @@
   $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
   @import './mixins/list-group';
-  @import './reboot-bootstrap-text';
-  @import './reboot-bootstrap-border-colors';
-  @import './reboot-bootstrap-tables';
-  @import './reboot-bootstrap-theme-colors';
-  @import 'hsl-reboot-bootstrap-theme-colors';
-  @import './reboot-bootstrap-dropdown';
-
-  // List Group
-  @include override-list-group-item(
-    $color-list,
-    $bgcolor-sidebar-list-group,
-    $color-list-hover,
-    $bgcolor-list-hover,
-    $color-list-active,
-    $bgcolor-list-active
-  );
-  /*
-    * Form
-    */
-  input.form-control,
-  select.form-control,
-  select.custom-select,
-  textarea.form-control {
-    color: var(--color-global);
-    background-color: hsl.darken(var(--bgcolor-global), 5%);
-    border-color: $border-color-global;
-    &:focus {
-      background-color: var(--bgcolor-global);
-    }
-    // FIXME: accent color
-    // border: 1px solid darken($border, 30%);
-  }
-
-  .form-control[disabled],
-  .form-control[readonly] {
-    color: hsl.lighten(var(--color-global),10%);
-    background-color: hsl.lighten(var(--bgcolor-global),5%);
-  }
-
-  .input-group > .input-group-prepend > .input-group-text {
-    color: theme-color('light');
-    background-color: theme-color('secondary');
-    border: 1px solid theme-color('secondary');
-    border-right: none;
-    &.text-muted {
-      color: theme-color('light') !important;
-    }
-  }
-
-  .input-group input {
-    border-color: $border-color-global;
-  }
-
-  label.custom-control-label::before {
-    background-color: hsl.darken(var(--bgcolor-global),5%);
-  }
-
-  .rbt-input-multi .rbt-input-main {
-    color: black;
-  }
-  /*
-  * Table
-  */
-  .table {
-    @extend .table-dark;
-    thead th {
-      vertical-align: bottom;
-      border-bottom: 2px solid #d6dadf;
-    }
-  }
-
-  /*
-  * Card
-  */
-  .card:not([class*='bg-']):not(.well):not(.card-disabled) {
-    @extend .bg-dark;
-  }
-
-  // [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
-  .card.well {
-    border-color: var(--secondary);
-  }
-
-  .card.card-disabled {
-    background-color: lighten($dark, 10%);
-    border-color: var(--secondary);
-  }
-
-  /*
-  * Pagination
-  */
-  ul.pagination {
-    li.page-item.disabled {
-      button.page-link {
-        color: $gray-400;
-      }
-    }
-    li.page-item.active {
-      button.page-link {
-        color: hsl.contrast(var(--primary));
-        background-color: var(--primary);
-        &:hover,
-        &:focus {
-          color: hsl.contrast(var(--primary));
-          background-color: var(--primary);
-        }
-      }
-    }
-    li.page-item {
-      button.page-link {
-        @extend .btn-dark;
-        color: var(--primary);
-      }
-    }
-  }
-
-  /*
-  * GROWI Login form
-  */
-  .nologin {
-    // background color
-    $color-gradient: #3c465c;
-    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-      linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
-      linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
-      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
-
-    .nologin-header {
-      background-color: rgba(black, 0.5);
-
-      .logo {
-        background-color: rgba(white, 0);
-        fill: rgba(white, 0.5);
-      }
-
-      h1 {
-        color: rgba(white, 0.5);
-      }
-    }
-
-    .nologin-dialog {
-      background-color: rgba(black, 0.5);
-      .link-switch {
-        color: #7b9bd5;
-        @include hover() {
-          color: lighten(#7b9bd5,10%);
-        }
-      }
-    }
-
-    .input-group {
-      .input-group-text {
-        color: darken(white, 30%);
-        background-color: rgba($gray-700, 0.7);
-      }
-
-      .form-control {
-        color: white;
-        background-color: rgba(#505050, 0.7);
-        box-shadow: unset;
-
-        &::placeholder {
-          color: darken(white, 30%);
-        }
-      }
-    }
-
-    .btn-fill {
-      .btn-label {
-        color: $gray-300;
-      }
-      .btn-label-text {
-        color: $gray-400;
-      }
-    }
-
-    .grw-external-auth-form {
-      border-color: gray !important;
-    }
-
-    .btn-external-auth-tab {
-      @extend .btn-dark;
-    }
-
-    // footer link text
-    .link-growi-org {
-      color: rgba(white, 0.4);
-
-      &:hover,
-      &.focus {
-        color: rgba(white, 0.7);
-
-        .growi {
-          color: darken(var.$growi-green, 5%);
-        }
-
-        .org {
-          color: darken(var.$growi-blue, 5%);
-        }
-      }
-    }
-  }
-
-  /*
-  * GROWI subnavigation
-  */
-  .grw-drawer-toggler {
-    @include button-variant($dark, $dark);
-    @include mixins-buttons.button-svg-icon-variant($dark, $dark);
-    color: $gray-400;
-    box-shadow: none !important;
-  }
-
-  /**
-   * GROWI PagePathHierarchicalLink
-   */
-  .grw-page-path-text-muted-container .grw-page-path-hierarchical-link a {
-    color: $gray-400;
-  }
-
-  /*
-  * GROWI page list
-  */
-  .page-list {
-    .page-list-ul {
-      > li {
-        > span.page-list-meta {
-          color: hsl.darken(var(--color-global),10%);
-        }
-      }
-    }
-
-    // List group
-    .list-group-item {
-      &.active {
-        background-color: hsl.lighten(var(--bgcolor-global),10%) !important;
-      }
-      &.list-group-item-action:hover {
-        background-color: hsl.lighten(var(--bgcolor-global),10%) !important;
-      }
-      .page-list-snippet {
-        color: hsl.darken(var(--color-global),10%);
-      }
-    }
-  }
-
-  /*
-  * GROWI ToC
-  */
-  .revision-toc-content {
-    ::marker {
-      color: hsl.lighten(var(--color-global),30%);
-    }
-  }
-
-  /*
-  * GROWI subnavigation
-  */
-  .grw-subnav {
-    background-color: var(--bgcolor-subnav);
-  }
-
-  .grw-subnav-fixed-container .grw-subnav {
-    background-color: hsl.alpha(var(--bgcolor-subnav),85%);
-  }
-
-  .grw-page-editor-mode-manager {
-    .btn-outline-primary {
-      &:hover {
-        color: var(--primary);
-        background-color: $gray-700;
-      }
-    }
-  }
-
-  // Search drop down
-  #search-typeahead-asynctypeahead {
-    background-color: var(--bgcolor-global);
-    .table {
-      background-color: transparent;
-    }
-  }
-
-  /*
-  * GROWI Sidebar
-  */
-  .grw-sidebar {
-    --gray-500: hsl(var(--gray-500-hs),var(--gray-500-l));
-    --gray-500-hs: 210,13%;
-    --gray-500-l: 61%;
-    // List
-    @include override-list-group-item(
-      $color-list,
-      $bgcolor-sidebar-list-group,
-      $color-list-hover,
-      $bgcolor-list-hover,
-      $color-list-active,
-      $bgcolor-list-active
-    );
-    // Pagetree
-    .grw-pagetree, .grw-foldertree {
-      @include override-list-group-item-for-pagetree(
-        var(--color-sidebar-context),
-        hsl.lighten(var(--bgcolor-sidebar-context),8%),
-        hsl.lighten(var(--bgcolor-sidebar-context),15%),
-        hsl.darken(var(--color-sidebar-context),15%),
-        hsl.darken(var(--color-sidebar-context),10%),
-        hsl.lighten(var(--bgcolor-sidebar-context),18%),
-        hsl.lighten(var(--bgcolor-sidebar-context),24%)
-      );
-      .grw-pagetree-triangle-btn, .grw-foldertree-triangle-btn {
-        @include mixins-buttons.button-outline-svg-icon-variant(var(--secondary), $gray-200);
-      }
-      .btn-page-item-control {
-        @include hsl-button.button-outline-variant(var(--gray-500), var(--gray-500), var(--secondary), transparent);
-        @include hover() {
-          background-color: hsl.lighten(var(--bgcolor-sidebar-context),20%);
-        }
-        &:not(:disabled):not(.disabled):active,
-        &:not(:disabled):not(.disabled).active {
-          background-color: hsl.lighten(var(--bgcolor-sidebar-context),34%);
-        }
-        box-shadow: none !important;
-      }
-    }
-
-    // bookmarks
-    .grw-folder-tree-container {
-      .grw-drop-item-area , .grw-foldertree-item-container {
-        .grw-accept-drop-item {
-          border-color: hsl.lighten(var(--bgcolor-sidebar-context), 30%) !important;
-        }
-      }
-    }
-    .private-legacy-pages-link {
-      &:hover {
-        background: var(--bgcolor-list-hover);
-      }
-    }
-  }
-
-  .btn.btn-page-item-control {
-    @include hsl-button.button-outline-variant(var(--gray-500), var(--gray-500), var(--secondary), transparent);
-    @include hover() {
-      background-color: $gray-700;
-    }
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active {
-      color: $gray-200;
-      background-color: $gray-600;
-    }
-    box-shadow: none !important;
-  }
-
-  // Bookmark item on user page
-  .grw-user-page-list-m {
-    @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
-    .grw-foldertree {
-      @include override-list-group-item-for-pagetree(
-        $body-color,
-        hsl.lighten($body-bg, 8%),
-        hsl.lighten($body-bg, 15%),
-        hsl.darken($body-color, 15%),
-        hsl.darken($body-color, 10%),
-        hsl.lighten($body-bg, 18%),
-        hsl.lighten($body-bg, 24%)
-      );
-      .grw-foldertree-triangle-btn {
-        @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
-      }
-    }
-    .grw-folder-tree-container {
-      .grw-drop-item-area , .grw-foldertree-item-container {
-        .grw-accept-drop-item {
-          border-color: hsl.lighten(var($body-bg), 30%) !important;
-        }
-      }
-    }
-  }
-
-  // Bookmark dropdown menu
-  .grw-bookmark-folder-dropdown  {
-    .grw-bookmark-folder-menu {
-      .form-control{
-        &:focus {
-          color: $body-color
-        }
-      }
-      .grw-bookmark-folder-menu-item  {
-        @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
-        .grw-bookmark-folder-menu-item-title {
-          color: $body-color
-        }
-      }
-    }
-  }
-
-  /*
-  * Popover
-  */
-  .popover {
-    background-color: var(--bgcolor-global);
-    border-color: var(--secondary);
-    .popover-header {
-      color: white;
-      background-color: var(--secondary);
-      border-color: var(--secondary);
-    }
-    .popover-body {
-      color: inherit;
-    }
-
-    &.bs-popover-top .arrow {
-      &::before {
-        border-top-color: var(--secondary);
-      }
-
-      &::after {
-        border-top-color: var(--bgcolor-global);
-      }
-    }
-    &.bs-popover-bottom .arrow {
-      &::before {
-        border-bottom-color: var(--secondary);
-      }
-
-      &::after {
-        border-bottom-color: var(--bgcolor-global);
-      }
-    }
-    &.bs-popover-right .arrow {
-      &::before {
-        border-right-color: var(--secondary);
-      }
-
-      &::after {
-        border-right-color: var(--bgcolor-global);
-      }
-    }
-    &.bs-popover-left .arrow {
-      &::before {
-        border-left-color: var(--secondary);
-      }
-
-      &::after {
-        border-left-color: var(--bgcolor-global);
-      }
-    }
-  }
-
-  /*
-  * GROWI Grid Edit Modal
-  */
-  .grw-grid-edit-preview {
-    background: $gray-900;
-  }
-
-  /*
-  * Slack
-  */
-  .grw-slack-notification {
-    background-color: transparent;
-    $color-slack: #4b144c;
-
-    .form-control {
-      background: var(--bgcolor-global);
-    }
-
-    .custom-control-label {
-      &::before {
-        background-color: var(--secondary);
-        border-color: transparent;
-      }
-      &::after {
-        background-color: darken($color-slack, 5%);
-        background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
-      }
-    }
-
-    .custom-control-input:checked ~ .custom-control-label {
-      &::before {
-        background-color: lighten($color-slack, 10%);
-      }
-      &::after {
-        background-color: darken($color-slack, 5%);
-        background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
-      }
-    }
-    .grw-slack-logo svg {
-      fill: #dd80de;
-    }
-
-    .grw-btn-slack {
-      background-color: black;
-      &:focus,
-      &:hover {
-        background-color: black;
-      }
-    }
-
-    .grw-btn-slack-triangle {
-      color: var(--secondary);
-    }
-  }
-
-  /*
-  * GROWI HandsontableModal
-  */
-
-  .handsontable td {
-    color: black;
-  }
-
-  .grw-hot-modal-navbar {
-    background-color: var(--dark);
-  }
-
-  .wiki {
-    h1 {
-      border-color: hsl.lighten(var(--border-color-theme),10%);
-    }
-    h2 {
-      border-color: var(--border-color-theme);
-    }
-  }
-
-  /*
-  * GROWI comment form
-  */
-  .comment-form {
-    #slack-mark-black {
-      display: none;
-    }
-  }
-
-  .page-comment-form .comment-form-main {
-    &:before {
-      border-right-color: var(--bgcolor-global);
-    }
-  }
-
-  /*
-  * GROWI tags
-  */
-  .grw-tag-labels {
-    .grw-tag-label {
-      color: $color-tags;
-      background-color: $bgcolor-tags;
-    }
-  }
-
-  mark.rbt-highlight-text {
-    color: var(--color-global);
-  }
-
-  /*
-  * GROWI popular tags
-  */
-  .grw-popular-tag-labels {
-    .grw-tag-label {
-      color: $color-tags;
-      background-color: $bgcolor-tags;
-    }
-  }
-
-  /*
-  * admin settings
-  */
-  .admin-setting-header {
-    border-color: $border-color-global;
-  }
-
-  /*
-  * grw-side-contents
-  */
-  .grw-side-contents-sticky-container {
-    .grw-count-badge {
-      @include count-badge.count-badge($gray-400, $gray-700);
-    }
-
-    .grw-border-vr {
-      border-color: $border-color-toc;
-    }
-
-    .revision-toc {
-      border-color: $border-color-toc;
-    }
-  }
-
-  /*
-  * drawio
-  */
-  .drawio-viewer {
-    border-color: $border-color-global;
-  }
-
-  /*
-  * modal
-  */
-  .grw-modal-head {
-    border-color: $border-color-global;
-  }
-
-  /*
-  * skeleton
-  */
-  .grw-skeleton {
-    background-color: hsl.lighten(var(--bgcolor-subnav),10%);
-  }
+  // @import './reboot-bootstrap-text';
+  // @import './reboot-bootstrap-border-colors';
+  // @import './reboot-bootstrap-tables';
+  // @import './reboot-bootstrap-theme-colors';
+  // @import 'hsl-reboot-bootstrap-theme-colors';
+  // @import './reboot-bootstrap-dropdown';
+
+  //   // List Group
+  //   @include override-list-group-item(
+  //     $color-list,
+  //     $bgcolor-sidebar-list-group,
+  //     $color-list-hover,
+  //     $bgcolor-list-hover,
+  //     $color-list-active,
+  //     $bgcolor-list-active
+  //   );
+  //   /*
+  //     * Form
+  //     */
+  //   input.form-control,
+  //   select.form-control,
+  //   select.custom-select,
+  //   textarea.form-control {
+  //     color: var(--color-global);
+  //     background-color: hsl.darken(var(--bgcolor-global), 5%);
+  //     border-color: $border-color-global;
+  //     &:focus {
+  //       background-color: var(--bgcolor-global);
+  //     }
+  //     // FIXME: accent color
+  //     // border: 1px solid darken($border, 30%);
+  //   }
+
+  //   .form-control[disabled],
+  //   .form-control[readonly] {
+  //     color: hsl.lighten(var(--color-global),10%);
+  //     background-color: hsl.lighten(var(--bgcolor-global),5%);
+  //   }
+
+  //   .input-group > .input-group-prepend > .input-group-text {
+  //     color: theme-color('light');
+  //     background-color: theme-color('secondary');
+  //     border: 1px solid theme-color('secondary');
+  //     border-right: none;
+  //     &.text-muted {
+  //       color: theme-color('light') !important;
+  //     }
+  //   }
+
+  //   .input-group input {
+  //     border-color: $border-color-global;
+  //   }
+
+  //   label.custom-control-label::before {
+  //     background-color: hsl.darken(var(--bgcolor-global),5%);
+  //   }
+
+  //   .rbt-input-multi .rbt-input-main {
+  //     color: black;
+  //   }
+  //   /*
+  //   * Table
+  //   */
+  //   .table {
+  //     @extend .table-dark !optional;
+  //     thead th {
+  //       vertical-align: bottom;
+  //       border-bottom: 2px solid #d6dadf;
+  //     }
+  //   }
+
+  //   /*
+  //   * Card
+  //   */
+  //   .card:not([class*='bg-']):not(.well):not(.card-disabled) {
+  //     @extend .bg-dark;
+  //   }
+
+  //   [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
+  //   .card.well {
+  //     border-color: var(--secondary);
+  //   }
+
+  //   .card.card-disabled {
+  //     background-color: lighten($dark, 10%);
+  //     border-color: var(--secondary);
+  //   }
+
+  //   /*
+  //   * Pagination
+  //   */
+  //   ul.pagination {
+  //     li.page-item.disabled {
+  //       button.page-link {
+  //         color: $gray-400;
+  //       }
+  //     }
+  //     li.page-item.active {
+  //       button.page-link {
+  //         color: hsl.contrast(var(--primary));
+  //         background-color: var(--primary);
+  //         &:hover,
+  //         &:focus {
+  //           color: hsl.contrast(var(--primary));
+  //           background-color: var(--primary);
+  //         }
+  //       }
+  //     }
+  //     li.page-item {
+  //       button.page-link {
+  //         @extend .btn-dark;
+  //         color: var(--primary);
+  //       }
+  //     }
+  //   }
+
+  //   /*
+  //   * GROWI Login form
+  //   */
+  //   .nologin {
+  //     // background color
+  //     $color-gradient: #3c465c;
+  //     background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
+  //       linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
+  //       linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
+  //       linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+
+  //     .nologin-header {
+  //       background-color: rgba(black, 0.5);
+
+  //       .logo {
+  //         background-color: rgba(white, 0);
+  //         fill: rgba(white, 0.5);
+  //       }
+
+  //       h1 {
+  //         color: rgba(white, 0.5);
+  //       }
+  //     }
+
+  //     .nologin-dialog {
+  //       background-color: rgba(black, 0.5);
+  //       .link-switch {
+  //         color: #7b9bd5;
+  //         &:hover {
+  //           color: lighten(#7b9bd5,10%);
+  //         }
+  //       }
+  //     }
+
+  //     .input-group {
+  //       .input-group-text {
+  //         color: darken(white, 30%);
+  //         background-color: rgba($gray-700, 0.7);
+  //       }
+
+  //       .form-control {
+  //         color: white;
+  //         background-color: rgba(#505050, 0.7);
+  //         box-shadow: unset;
+
+  //         &::placeholder {
+  //           color: darken(white, 30%);
+  //         }
+  //       }
+  //     }
+
+  //     .btn-fill {
+  //       .btn-label {
+  //         color: $gray-300;
+  //       }
+  //       .btn-label-text {
+  //         color: $gray-400;
+  //       }
+  //     }
+
+  //     .grw-external-auth-form {
+  //       border-color: gray !important;
+  //     }
+
+  //     .btn-external-auth-tab {
+  //       @extend .btn-dark;
+  //     }
+
+  //     // footer link text
+  //     .link-growi-org {
+  //       color: rgba(white, 0.4);
+
+  //       &:hover,
+  //       &.focus {
+  //         color: rgba(white, 0.7);
+
+  //         .growi {
+  //           color: darken(var.$growi-green, 5%);
+  //         }
+
+  //         .org {
+  //           color: darken(var.$growi-blue, 5%);
+  //         }
+  //       }
+  //     }
+  //   }
+
+  //   /*
+  //   * GROWI subnavigation
+  //   */
+  //   .grw-drawer-toggler {
+  //     @include button-variant($dark, $dark);
+  //     @include mixins-buttons.button-svg-icon-variant($dark, $dark);
+  //     color: $gray-400;
+  //     box-shadow: none !important;
+  //   }
+
+  //   /**
+  //    * GROWI PagePathHierarchicalLink
+  //    */
+  //   .grw-page-path-text-muted-container .grw-page-path-hierarchical-link a {
+  //     color: $gray-400;
+  //   }
+
+  //   /*
+  //   * GROWI page list
+  //   */
+  //   .page-list {
+  //     .page-list-ul {
+  //       > li {
+  //         > span.page-list-meta {
+  //           color: hsl.darken(var(--color-global),10%);
+  //         }
+  //       }
+  //     }
+
+  //     // List group
+  //     .list-group-item {
+  //       &.active {
+  //         background-color: hsl.lighten(var(--bgcolor-global),10%) !important;
+  //       }
+  //       &.list-group-item-action:hover {
+  //         background-color: hsl.lighten(var(--bgcolor-global),10%) !important;
+  //       }
+  //       .page-list-snippet {
+  //         color: hsl.darken(var(--color-global),10%);
+  //       }
+  //     }
+  //   }
+
+  //   /*
+  //   * GROWI ToC
+  //   */
+  //   .revision-toc-content {
+  //     ::marker {
+  //       color: hsl.lighten(var(--color-global),30%);
+  //     }
+  //   }
+
+  //   /*
+  //   * GROWI subnavigation
+  //   */
+  //   .grw-subnav {
+  //     background-color: var(--bgcolor-subnav);
+  //   }
+
+  //   .grw-subnav-fixed-container .grw-subnav {
+  //     background-color: hsl.alpha(var(--bgcolor-subnav),85%);
+  //   }
+
+  //   .grw-page-editor-mode-manager {
+  //     .btn-outline-primary {
+  //       &:hover {
+  //         color: var(--primary);
+  //         background-color: $gray-700;
+  //       }
+  //     }
+  //   }
+
+  //   // Search drop down
+  //   #search-typeahead-asynctypeahead {
+  //     background-color: var(--bgcolor-global);
+  //     .table {
+  //       background-color: transparent;
+  //     }
+  //   }
+
+  //   /*
+  //   * GROWI Sidebar
+  //   */
+  //   .grw-sidebar {
+  //     --gray-500: hsl(var(--gray-500-hs),var(--gray-500-l));
+  //     --gray-500-hs: 210,13%;
+  //     --gray-500-l: 61%;
+  //     // List
+  //     @include override-list-group-item(
+  //       $color-list,
+  //       $bgcolor-sidebar-list-group,
+  //       $color-list-hover,
+  //       $bgcolor-list-hover,
+  //       $color-list-active,
+  //       $bgcolor-list-active
+  //     );
+  //     // Pagetree
+  //     .grw-pagetree, .grw-foldertree {
+  //       @include override-list-group-item-for-pagetree(
+  //         var(--color-sidebar-context),
+  //         hsl.lighten(var(--bgcolor-sidebar-context),8%),
+  //         hsl.lighten(var(--bgcolor-sidebar-context),15%),
+  //         hsl.darken(var(--color-sidebar-context),15%),
+  //         hsl.darken(var(--color-sidebar-context),10%),
+  //         hsl.lighten(var(--bgcolor-sidebar-context),18%),
+  //         hsl.lighten(var(--bgcolor-sidebar-context),24%)
+  //       );
+  //       .grw-pagetree-triangle-btn, .grw-foldertree-triangle-btn {
+  //         @include mixins-buttons.button-outline-svg-icon-variant(var(--secondary), $gray-200);
+  //       }
+  //       .btn-page-item-control {
+  //         @include hsl-button.button-outline-variant(var(--gray-500), var(--gray-500), var(--secondary), transparent);
+  //         &:hover {
+  //           background-color: hsl.lighten(var(--bgcolor-sidebar-context),20%);
+  //         }
+  //         &:not(:disabled):not(.disabled):active,
+  //         &:not(:disabled):not(.disabled).active {
+  //           background-color: hsl.lighten(var(--bgcolor-sidebar-context),34%);
+  //         }
+  //         box-shadow: none !important;
+  //       }
+  //     }
+
+  //     // bookmarks
+  //     .grw-folder-tree-container {
+  //       .grw-drop-item-area , .grw-foldertree-item-container {
+  //         .grw-accept-drop-item {
+  //           border-color: hsl.lighten(var(--bgcolor-sidebar-context), 30%) !important;
+  //         }
+  //       }
+  //     }
+  //     .private-legacy-pages-link {
+  //       &:hover {
+  //         background: var(--bgcolor-list-hover);
+  //       }
+  //     }
+  //   }
+
+  //   .btn.btn-page-item-control {
+  //     @include hsl-button.button-outline-variant(var(--gray-500), var(--gray-500), var(--secondary), transparent);
+  //     &:hover {
+  //       background-color: $gray-700;
+  //     }
+  //     &:not(:disabled):not(.disabled):active,
+  //     &:not(:disabled):not(.disabled).active {
+  //       color: $gray-200;
+  //       background-color: $gray-600;
+  //     }
+  //     box-shadow: none !important;
+  //   }
+
+  //   // Bookmark item on user page
+  //   .grw-user-page-list-m {
+  //     @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
+  //     .grw-foldertree {
+  //       @include override-list-group-item-for-pagetree(
+  //         $body-color,
+  //         hsl.lighten($body-bg, 8%),
+  //         hsl.lighten($body-bg, 15%),
+  //         hsl.darken($body-color, 15%),
+  //         hsl.darken($body-color, 10%),
+  //         hsl.lighten($body-bg, 18%),
+  //         hsl.lighten($body-bg, 24%)
+  //       );
+  //       .grw-foldertree-triangle-btn {
+  //         @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
+  //       }
+  //     }
+  //     .grw-folder-tree-container {
+  //       .grw-drop-item-area , .grw-foldertree-item-container {
+  //         .grw-accept-drop-item {
+  //           border-color: hsl.lighten(var($body-bg), 30%) !important;
+  //         }
+  //       }
+  //     }
+  //   }
+
+  //   // Bookmark dropdown menu
+  //   .grw-bookmark-folder-dropdown  {
+  //     .grw-bookmark-folder-menu {
+  //       .form-control{
+  //         &:focus {
+  //           color: $body-color
+  //         }
+  //       }
+  //       .grw-bookmark-folder-menu-item  {
+  //         @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
+  //         .grw-bookmark-folder-menu-item-title {
+  //           color: $body-color
+  //         }
+  //       }
+  //     }
+  //   }
+
+  //   /*
+  //   * Popover
+  //   */
+  //   .popover {
+  //     background-color: var(--bgcolor-global);
+  //     border-color: var(--secondary);
+  //     .popover-header {
+  //       color: white;
+  //       background-color: var(--secondary);
+  //       border-color: var(--secondary);
+  //     }
+  //     .popover-body {
+  //       color: inherit;
+  //     }
+
+  //     &.bs-popover-top .arrow {
+  //       &::before {
+  //         border-top-color: var(--secondary);
+  //       }
+
+  //       &::after {
+  //         border-top-color: var(--bgcolor-global);
+  //       }
+  //     }
+  //     &.bs-popover-bottom .arrow {
+  //       &::before {
+  //         border-bottom-color: var(--secondary);
+  //       }
+
+  //       &::after {
+  //         border-bottom-color: var(--bgcolor-global);
+  //       }
+  //     }
+  //     &.bs-popover-right .arrow {
+  //       &::before {
+  //         border-right-color: var(--secondary);
+  //       }
+
+  //       &::after {
+  //         border-right-color: var(--bgcolor-global);
+  //       }
+  //     }
+  //     &.bs-popover-left .arrow {
+  //       &::before {
+  //         border-left-color: var(--secondary);
+  //       }
+
+  //       &::after {
+  //         border-left-color: var(--bgcolor-global);
+  //       }
+  //     }
+  //   }
+
+  //   /*
+  //   * GROWI Grid Edit Modal
+  //   */
+  //   .grw-grid-edit-preview {
+  //     background: $gray-900;
+  //   }
+
+  //   /*
+  //   * Slack
+  //   */
+  //   .grw-slack-notification {
+  //     background-color: transparent;
+  //     $color-slack: #4b144c;
+
+  //     .form-control {
+  //       background: var(--bgcolor-global);
+  //     }
+
+  //     .custom-control-label {
+  //       &::before {
+  //         background-color: var(--secondary);
+  //         border-color: transparent;
+  //       }
+  //       &::after {
+  //         background-color: darken($color-slack, 5%);
+  //         background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
+  //       }
+  //     }
+
+  //     .custom-control-input:checked ~ .custom-control-label {
+  //       &::before {
+  //         background-color: lighten($color-slack, 10%);
+  //       }
+  //       &::after {
+  //         background-color: darken($color-slack, 5%);
+  //         background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
+  //       }
+  //     }
+  //     .grw-slack-logo svg {
+  //       fill: #dd80de;
+  //     }
+
+  //     .grw-btn-slack {
+  //       background-color: black;
+  //       &:focus,
+  //       &:hover {
+  //         background-color: black;
+  //       }
+  //     }
+
+  //     .grw-btn-slack-triangle {
+  //       color: var(--secondary);
+  //     }
+  //   }
+
+  //   /*
+  //   * GROWI HandsontableModal
+  //   */
+
+  //   .handsontable td {
+  //     color: black;
+  //   }
+
+  //   .grw-hot-modal-navbar {
+  //     background-color: var(--dark);
+  //   }
+
+  //   .wiki {
+  //     h1 {
+  //       border-color: hsl.lighten(var(--border-color-theme),10%);
+  //     }
+  //     h2 {
+  //       border-color: var(--border-color-theme);
+  //     }
+  //   }
+
+  //   /*
+  //   * GROWI comment form
+  //   */
+  //   .comment-form {
+  //     #slack-mark-black {
+  //       display: none;
+  //     }
+  //   }
+
+  //   .page-comment-form .comment-form-main {
+  //     &:before {
+  //       border-right-color: var(--bgcolor-global);
+  //     }
+  //   }
+
+  //   /*
+  //   * GROWI tags
+  //   */
+  //   .grw-tag-labels {
+  //     .grw-tag-label {
+  //       color: $color-tags;
+  //       background-color: $bgcolor-tags;
+  //     }
+  //   }
+
+  //   mark.rbt-highlight-text {
+  //     color: var(--color-global);
+  //   }
+
+  //   /*
+  //   * GROWI popular tags
+  //   */
+  //   .grw-popular-tag-labels {
+  //     .grw-tag-label {
+  //       color: $color-tags;
+  //       background-color: $bgcolor-tags;
+  //     }
+  //   }
+
+  //   /*
+  //   * admin settings
+  //   */
+  //   .admin-setting-header {
+  //     border-color: $border-color-global;
+  //   }
+
+  //   /*
+  //   * grw-side-contents
+  //   */
+  //   .grw-side-contents-sticky-container {
+  //     .grw-count-badge {
+  //       @include count-badge.count-badge($gray-400, $gray-700);
+  //     }
+
+  //     .grw-border-vr {
+  //       border-color: $border-color-toc;
+  //     }
+
+  //     .revision-toc {
+  //       border-color: $border-color-toc;
+  //     }
+  //   }
+
+  //   /*
+  //   * drawio
+  //   */
+  //   .drawio-viewer {
+  //     border-color: $border-color-global;
+  //   }
+
+  //   /*
+  //   * modal
+  //   */
+  //   .grw-modal-head {
+  //     border-color: $border-color-global;
+  //   }
+
+  //   /*
+  //   * skeleton
+  //   */
+  //   .grw-skeleton {
+  //     background-color: hsl.lighten(var(--bgcolor-subnav),10%);
+  //   }
 }

apps/app/src/styles/theme/_apply-colors-light.scss

@@ -49,12 +49,12 @@
   $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
   @import './mixins/list-group';
-  @import './reboot-bootstrap-text';
-  @import './reboot-bootstrap-border-colors';
-  @import './reboot-bootstrap-tables';
-  @import './reboot-bootstrap-theme-colors';
-  @import 'hsl-reboot-bootstrap-theme-colors';
-  @import './reboot-bootstrap-dropdown';
+  // @import './reboot-bootstrap-text';
+  // @import './reboot-bootstrap-border-colors';
+  // @import './reboot-bootstrap-tables';
+  // @import './reboot-bootstrap-theme-colors';
+  // @import 'hsl-reboot-bootstrap-theme-colors';
+  // @import './reboot-bootstrap-dropdown';
 
   // List Group
   @include override-list-group-item(
@@ -117,7 +117,7 @@
       background-color: rgba(white, 0.5);
       .link-switch {
         color: #1939b8;
-        @include hover() {
+        &:hover {
           color: lighten(#1939b8,20%);
         }
       }
@@ -264,7 +264,7 @@
     --gray-500-hs: 210,13%;
     --gray-500-l: 61%;
     @include hsl-button.button-outline-variant(var(--gray-500), var(--primary), #{hsl.lighten(var(--primary), 52%)}, transparent);
-    @include hover() {
+    &:hover {
       background-color: hsl.lighten(var(--primary), 58%);
     }
     &:not(:disabled):not(.disabled):active,
@@ -356,7 +356,7 @@
   * GROWI Editor
   */
   .grw-editor-navbar-bottom {
-    background-color: $gray-50;
+    background-color: $gray-100;
 
     #slack-mark-white {
       display: none;

apps/app/src/styles/theme/_reboot-bootstrap-buttons.scss

@@ -4,7 +4,7 @@
     fill: var(--color-link);
   }
 
-  @include hover() {
+  &:hover {
     color: var(--color-link-hover);
     svg {
       fill: var(--color-link-hover);

apps/app/src/styles/theme/_reboot-bootstrap-colors.scss

@@ -34,7 +34,7 @@ a {
     fill: var(--color-link);
   }
 
-  @include hover() {
+  &:hover {
     color: var(--color-link-hover);
     text-decoration: $link-hover-decoration;
 
@@ -53,7 +53,7 @@ a {
 //   color: inherit;
 //   text-decoration: none;
 
-//   @include hover() {
+//   &:hover {
 //     color: inherit;
 //     text-decoration: none;
 //   }

apps/app/src/styles/theme/_reboot-bootstrap-tables.scss

@@ -36,7 +36,7 @@
 
 .table-hover {
   tbody tr {
-    @include hover() {
+    &:hover {
       color: $color-table-hover;
       background-color: $bgcolor-table-hover;
     }
@@ -65,7 +65,7 @@
 
   &.table-hover {
     tbody tr {
-      @include hover() {
+      &:hover {
         color: $table-dark-hover-color;
         background-color: $table-dark-hover-bg;
       }

apps/app/src/styles/theme/apply-colors.scss

@@ -41,12 +41,12 @@ $nav-tabs-link-active-bg: var(--bgcolor-global);
 $nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
 $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 
-@import 'reboot-bootstrap-buttons';
-@import 'reboot-bootstrap-colors';
-@import 'reboot-bootstrap-theme-colors';
-@import 'hsl-reboot-bootstrap-theme-colors';
-@import 'reboot-bootstrap-nav';
-@import 'reboot-toastr-colors';
+// @import 'reboot-bootstrap-buttons';
+// @import 'reboot-bootstrap-colors';
+// @import 'reboot-bootstrap-theme-colors';
+// @import 'hsl-reboot-bootstrap-theme-colors';
+// @import 'reboot-bootstrap-nav';
+// @import 'reboot-toastr-colors';
 
 // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
 $color-modal-header: var(--color-modal-header,#{hsl.contrast(var(--primary))});
@@ -64,14 +64,14 @@ code:not([class^='language-']) {
 //
 
 // Alert link
-@each $color, $value in $theme-colors {
-  .alert.alert-#{$color} {
-    a,
-    a:hover {
-      color: theme-color-level($color, $alert-color-level - 2);
-    }
-  }
-}
+// @each $color, $value in $theme-colors {
+//   .alert.alert-#{$color} {
+//     a,
+//     a:hover {
+//       color: theme-color-level($color, $alert-color-level - 2);
+//     }
+//   }
+// }
 
 // Dropdown
 .grw-apperance-mode-dropdown {
@@ -87,9 +87,9 @@ code:not([class^='language-']) {
 }
 
 // Form
-.form-control {
-  @include form-control-focus();
-}
+// .form-control {
+//   @include form-control-focus();
+// }
 
 // Tabs
 .nav.nav-tabs .nav-link.active {
@@ -481,7 +481,7 @@ ul.pagination {
           fill: var(--color-global);
         }
 
-        @include hover() {
+        &:hover {
           svg {
             fill: var(--color-global);
           }

apps/app/src/styles/theme/mixins/_hsl-button.scss

@@ -11,7 +11,7 @@
   border-color: $border;
   // @include box-shadow($btn-box-shadow);
 
-  @include bs.hover() {
+  &:hover {
     color: hsl.contrast($background);
     @include bs.gradient-bg($hover-background);
     border-color: $hover-border;
@@ -70,7 +70,7 @@
   color: $color;
   border-color: $color;
 
-  @include bs.hover() {
+  &:hover {
     color: $color-hover;
     background-color: $active-background;
     border-color: $active-border;
@@ -111,7 +111,7 @@
     fill: hsl.contrast($background);
   }
 
-  @include bs.hover() {
+  &:hover {
     svg {
       fill: hsl.contrast($background);
     }

apps/app/src/styles/theme/mixins/_list-group.scss

@@ -38,7 +38,7 @@
     .btn.btn-page-item-control {
       color: $btn-color;
       background-color: transparent;
-      @include bs.hover() {
+      &:hover {
         color: $btn-color-hover;
         background-color: $btn-bgcolor-hover;
       }

packages/preset-themes/src/styles/atoms/mixins/_buttons.scss

@@ -5,7 +5,7 @@
     fill: color-yiq($background);
   }
 
-  @include bs.hover() {
+  &:hover {
     svg {
       fill: color-yiq($hover-background);
     }
@@ -39,7 +39,7 @@
   svg {
     fill: $value;
   }
-  @include bs.hover() {
+  &:hover {
     svg {
       fill: $color-hover;
     }

packages/preset-themes/src/styles/theme/mixins/_hsl-button.scss

@@ -11,7 +11,7 @@
   border-color: $border;
   // @include box-shadow($btn-box-shadow);
 
-  @include bs.hover() {
+  &:hover {
     color: hsl.contrast($background);
     @include bs.gradient-bg($hover-background);
     border-color: $hover-border;
@@ -70,7 +70,7 @@
   color: $color;
   border-color: $color;
 
-  @include bs.hover() {
+  &:hover {
     color: $color-hover;
     background-color: $active-background;
     border-color: $active-border;
@@ -111,7 +111,7 @@
     fill: hsl.contrast($background);
   }
 
-  @include bs.hover() {
+  &:hover {
     svg {
       fill: hsl.contrast($background);
     }