activate some reboot scss

packages/app/src/styles/bootstrap/_variables.scss

@@ -90,7 +90,6 @@ $border-radius-lg: 8px;
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
-$btn-link-disabled-color: $gray-500;
 $btn-focus-box-shadow: none;
 $btn-active-box-shadow: none;
 

packages/app/src/styles/theme/_apply-colors.scss

@@ -8,693 +8,693 @@
 //== Apply to Bootstrap
 //
 
-// determine optional variables
-$border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
-$bgcolor-search-top-dropdown: $secondary !default;
-$bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
-$text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
-$bgcolor-inline-code: $gray-100 !default;
-$color-inline-code: darken($red, 15%) !default;
-$bordercolor-inline-code: $gray-400 !default;
-$bordercolor-nav-tabs: $gray-300 !default;
-$bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
-$color-nav-tabs-link-active: $gray-600 !default;
-$bordercolor-nav-tabs-active: var(--ordercolor-nav-tabs-active,var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global));
-$color-btn-reload-in-sidebar: $gray-500;
-$bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
-$color-page-list-group-item-meta: var(--color-page-list-group-item-meta,$gray-500);
-$color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
-
-// override bootstrap variables
-$body-bg: var(--bgcolor-global);
-$body-color: var(--color-global);
-$link-color: var(--color-link);
-$link-hover-color: var(--color-link-hover);
-$input-focus-color: var(--color-global);
-$nav-tabs-border-color: $bordercolor-nav-tabs;
-$nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
-$nav-tabs-link-active-color: $color-nav-tabs-link-active;
-$nav-tabs-link-active-bg: var(--bgcolor-global);
-$nav-tabs-link-active-border-color: var(--bordercolor-nav-tabs-active);
-$theme-colors: map-merge($theme-colors, ( primary: $primary ));
+// // determine optional variables
+// $border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
+// $bgcolor-search-top-dropdown: $secondary !default;
+// $bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
+// $text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
+// $bgcolor-inline-code: $gray-100 !default;
+// $color-inline-code: darken($red, 15%) !default;
+// $bordercolor-inline-code: $gray-400 !default;
+// $bordercolor-nav-tabs: $gray-300 !default;
+// $bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
+// $color-nav-tabs-link-active: $gray-600 !default;
+// $bordercolor-nav-tabs-active: var(--ordercolor-nav-tabs-active,var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global));
+// $color-btn-reload-in-sidebar: $gray-500;
+// $bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
+// $color-page-list-group-item-meta: var(--color-page-list-group-item-meta,$gray-500);
+// $color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
+
+// // override bootstrap variables
+// $body-bg: var(--bgcolor-global);
+// $body-color: var(--color-global);
+// $link-color: var(--color-link);
+// $link-hover-color: var(--color-link-hover);
+// $input-focus-color: var(--color-global);
+// $nav-tabs-border-color: $bordercolor-nav-tabs;
+// $nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
+// $nav-tabs-link-active-color: $color-nav-tabs-link-active;
+// $nav-tabs-link-active-bg: var(--bgcolor-global);
+// $nav-tabs-link-active-border-color: var(--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 'reboot-bootstrap-nav';
+// @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: color-yiq($primary) !default;
-
-code:not([class^='language-']) {
-  @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
-}
-
-.code-highlighted {
-  border-color: $bordercolor-inline-code;
-}
-
-//
-//== Apply to Bootstrap Elements
-//
-
-// Alert link
-@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 {
-  .grw-sidebar-mode-icon svg {
-    fill: $secondary;
-  }
-  .grw-color-mode-icon svg {
-    fill: var(--color-global);
-  }
-  .grw-color-mode-icon-muted svg {
-    fill: $secondary;
-  }
-}
-
-// Form
-.form-control {
-  @include form-control-focus();
-}
-
-// Tabs
-.nav.nav-tabs .nav-link.active {
-  color: var(--color-link);
-  background: transparent;
-
-  &:hover,
-  &:focus {
-    color: var(--color-link-hover);
-  }
-}
-
-// Pagination
-ul.pagination {
-  li.page-item.disabled {
-    button.page-link {
-      color: $gray-400;
-    }
-  }
-  li.page-item.active {
-    button.page-link {
-      color: color-yiq($primary);
-      background-color: $primary;
-      &:hover,
-      &:focus {
-        color: color-yiq($primary);
-        background-color: $primary;
-      }
-    }
-  }
-  li.page-item {
-    button.page-link {
-      color: $primary;
-      border-color: $secondary;
-      &:hover,
-      &:active,
-      &:focus {
-        color: $primary;
-      }
-    }
-  }
-}
-
-//
-//== Apply to Handsontable
-//
-.handsontable {
-  color: initial;
-}
-
-//
-//== Apply to GROWI Elements
-//
-
-.grw-logo {
-  // set transition for fill
-  svg * {
-    transition: fill 0.8s ease-out;
-  }
-
-  svg {
-    fill: var(--fillcolor-logo-mark);
-  }
-
-  &:hover {
-    svg {
-      .group1 {
-        fill: var.$growi-green;
-      }
-
-      .group2 {
-        fill: var.$growi-blue;
-      }
-    }
-  }
-}
-
-.grw-navbar {
-  background: var(--bgcolor-navbar);
-  .nav-item .nav-link {
-    color: var(--color-link-nabvar);
-  }
-
-  border-image: $border-image-navbar;
-  border-image-slice: 1;
-
-  .grw-app-title {
-    color: var(--fillcolor-logo-mark);
-  }
-}
-
-.grw-global-search {
-  .btn-secondary.dropdown-toggle {
-    @include button-variant($bgcolor-search-top-dropdown, $bgcolor-search-top-dropdown);
-  }
-
-  // for https://youtrack.weseek.co.jp/issue/GW-2603
-  .search-typeahead {
-    background-color: var(--bgcolor-global); opacity:0.9;
-  }
-}
-
-.grw-sidebar {
-  .grw-navigation-resize-button {
-    $color-resize-button: var(--color-resize-button--,var(--color-global));
-    $bgcolor-resize-button: white !default;
-    $color-resize-button-hover: $color-reversal !default;
-    $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%) !default;
-
-    .hexagon-container svg {
-      .background {
-        fill: $bgcolor-resize-button;
-      }
-      .icon {
-        fill: $color-resize-button;
-      }
-    }
-    &:hover .hexagon-container svg {
-      .background {
-        fill: $bgcolor-resize-button-hover;
-      }
-      .icon {
-        fill: $color-resize-button-hover;
-      }
-    }
-  }
-  div.grw-global-navigation {
-    > div {
-      background-color: var(--bgcolor-sidebar);
-    }
-  }
-  div.grw-contextual-navigation {
-    > div {
-      color: var(--color-sidebar-context);
-      background-color: var(--bgcolor-sidebar-context);
-    }
-  }
-
-  .grw-sidebar-nav {
-    .btn {
-      @include button-variant(
-        $bgcolor-sidebar,
-        $bgcolor-sidebar,
-        darken($bgcolor-sidebar, 7.5%),
-        darken($bgcolor-sidebar, 10%),
-        $bgcolor-sidebar-nav-item-active,
-        $bgcolor-sidebar-nav-item-active
-      );
-    }
-  }
-  .grw-sidebar-nav-primary-container {
-    .btn.active {
-      i {
-        text-shadow: var(--text-shadow-sidebar-nav-item-active);
-      }
-      // fukidashi
-      &:after {
-        border-right-color: var(--bgcolor-sidebar-context)
-        ;
-      }
-    }
-  }
-
-  .grw-sidebar-content-header {
-    .grw-btn-reload {
-      color: $color-btn-reload-in-sidebar;
-    }
-
-    .grw-recent-changes-resize-button {
-      .custom-control-label::before {
-        background-color: $primary;
-      }
-
-      .custom-control-label::after {
-        background-color: var(--bgcolor-global);
-      }
-
-      .custom-control-input:not(:checked) + .custom-control-label::before {
-        color: var(--bgcolor-global);
-      }
-
-      .custom-control-input:checked + .custom-control-label::before {
-        color: var(--bgcolor-global);
-        background-color: $primary;
-        // border-color: $primary !important;
-      }
-      .custom-control-input:checked + .custom-control-label::after {
-        color: var(--bgcolor-global);
-      }
-    }
-  }
-
-  .grw-pagetree {
-    .list-group-item {
-      .grw-pagetree-title-anchor {
-        color: inherit;
-      }
-    }
-  }
-  .grw-pagetree-footer {
-    .h5.grw-private-legacy-pages-anchor {
-      color: inherit;
-    }
-  }
-
-  .grw-recent-changes {
-    .list-group {
-      .list-group-item {
-        background-color: transparent;
-
-        .icon-lock {
-          color: var(--color-link);
-        }
-
-        .grw-recent-changes-item-lower {
-          color: $gray-500;
-
-          svg {
-            fill: $gray-500;
-          }
-        }
-      }
-    }
-  }
-}
-
-/*
- * Icon
- */
-.editor-container .navbar-editor svg {
-  fill: var(--color-editor-icons);
-}
-
-// page preview button in link form
-.btn-page-preview svg {
-  fill: white;
-}
-
-/*
- * Modal
- */
-.modal {
-  .modal-header {
-    border-bottom-color: $border-color-theme;
-    .modal-title {
-      color: $color-modal-header;
-    }
-    .close {
-      color: $color-modal-header;
-      opacity: 0.5;
-      &:hover {
-        opacity: 0.9;
-      }
-    }
-  }
-
-  .modal-content {
-    background-color: var(--bgcolor-global);
-  }
-
-  .modal-footer {
-    border-top-color: $border-color-theme;
-  }
-}
-
-.grw-custom-nav-tab {
-  .nav-item {
-    &:hover,
-    &:focus {
-      background-color: var(--color-link); opacity:0.9;
-    }
-    .nav-link {
-      -webkit-appearance: none;
-      color: var(--color-link);
-      svg {
-        fill: var(--color-link);
-      }
-
-      // Disabled state lightens text
-      &.disabled {
-        color: $nav-link-disabled-color;
-        svg {
-          fill: $nav-link-disabled-color;
-        }
-      }
-    }
-  }
-
-  .grw-nav-slide-hr {
-    border-color: var(--color-link);
-  }
-}
-
-.grw-page-accessories-modal {
-  .modal-header {
-    .close {
-      color: $secondary;
-    }
-  }
-}
-
-/*
- * cards
- */
-.card.well {
-  color: var(--color-global);
-  background-color: var(--bgcolor-card);
-  border-color: $light;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-
-.admin-bot-card {
-  .grw-botcard-title-active {
-    color: $gray-200;
-  }
-}
-
-/*
- * Form Slider
- */
-.admin-page {
-  span.slider {
-    background-color: $gray-300;
-
-    &:before {
-      background-color: white;
-    }
-  }
-
-  input:checked + .slider {
-    background-color: #007bff;
-  }
-
-  input:focus + .slider {
-    box-shadow: 0 0 1px #007bff;
-  }
-}
-
-/*
- * GROWI wiki
- */
-.wiki {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  h7 {
-    &.blink {
-      @include mixins.blink-bgcolor($bgcolor-blinked-section);
-    }
-  }
-
-  .highlighted-keyword {
-    background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
-  }
-
-  a {
-    color: var(--color-link-wiki);
-
-    &:hover {
-      color: var(--color-link-wiki-hover);
-    }
-  }
-
-  // table with handsontable modal button
-  .editable-with-handsontable {
-    button {
-      color: var(--color-link-wiki);
-    }
-
-    button:hover {
-      color: var(--color-link-wiki-hover);
-    }
-  }
-}
-
-/*
- * GROWI page-list
- */
-.page-list {
-  // List group
-  .list-group {
-    .list-group-item {
-      a {
-        svg {
-          fill: var(--color-global);
-        }
-
-        @include hover() {
-          svg {
-            fill: var(--color-global);
-          }
-        }
-      }
-
-      .page-list-meta {
-        color: var(--color-page-list-group-item-meta);
-        svg {
-          fill: var(--color-page-list-group-item-meta);
-        }
-      }
-
-      &.list-group-item-action {
-        --bgcolor-page-list-group-item-active: hsl(from var(--bgcolor-global) h s calc(l + 76%));
-        &.active {
-          background-color: var(--bgcolor-page-list-group-item-active);
-          border-left-color: $primary;
-        }
-      }
-    }
-  }
-}
-
-/*
- * GROWI Editor
- */
-.layout-root.editing {
-  --bgcolor-global-darken2: hsl(from var(--bgcolor-global) h s calc(l - 2%));
-  .main {
-    background-color: var(--bgcolor-global-darken2);
-
-    .page-editor-editor-container {
-      border-right-color: $border-color-theme;
-
-      .navbar-editor {
-        background-color: var(--bgcolor-global); // same color with active tab
-        border-bottom-color: $border-color-theme;
-      }
-    }
-
-    .page-editor-preview-container {
-      background-color: var(--bgcolor-global);
-    }
-  }
-}
-
-/*
- * Preview for editing /Sidebar
- */
-body.editing-sidebar {
-  .page-editor-preview-body {
-    color: var(--color-sidebar-context);
-    background-color: var(--bgcolor-sidebar-context);
-  }
-}
-
-/*
- * GROWI Grid Edit Modal
- */
-.grw-grid-edit-preview {
-  .desktop-preview,
-  .tablet-preview,
-  .mobile-preview {
-    background: var(--bgcolor-global);
-  }
-  .grid-edit-border-for-each-cols {
-    border: 2px solid var(--bgcolor-global);
-  }
-}
-
-.grid-preview-col-0 {
-  background: var.$growi-blue;
-}
-
-.grid-preview-col-1 {
-  background: var(--info);
-}
-
-.grid-preview-col-2 {
-  background: var(--success);
-}
-
-.grid-preview-col-3 {
-  background: var.$growi-green;
-}
-
-/*
- * GROWI comment
- */
-.page-comment-meta .page-comment-revision svg {
-  fill: var(--color-link);
-
-  &:hover {
-    fill: var(--color-link-hover);
-  }
-}
-
-/*
- * GROWI comment form
- */
-.page-comments {
-  .page-comment .page-comment-main,
-  .page-comment-form .comment-form-main {
-    background-color: var(--bgcolor-global);
-
-    &:before {
-      border-right-color: var(--bgcolor-global);
-    }
-
-    .nav.nav-tabs {
-      --border-bottom-color: hsl(from var(--bgcolor-global) h s calc(l - 4%));
-      > li > a.active {
-        background: transparent;
-        border-bottom: solid 1px var(--border-bottom-color);
-        border-bottom-color: var(--border-bottom-color);
-      }
-    }
-  }
-}
-
-/*
- * GROWI search result
- */
-.search-result-base {
-  .grw-search-page-nav {
-    background-color: var(--bgcolor-subnav);
-  }
-  .search-control {
-    background-color: var(--bgcolor-global);
-  }
-  .page-list {
-    .highlighted-keyword {
-      background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
-    }
-  }
-}
-
-/*
- * react bootstrap typeahead
- */
-mark.rbt-highlight-text {
-  // Temporarily the highlight color is black
-  color: black;
-}
-
-/*
- * GROWI page content footer
- */
-.page-content-footer {
-  --bgcolor-global-darken2: hsl(from var(--bgcolor-global) h s calc(l - 2%));
-  background-color: var(--bgcolor-global-darken2);
-  border-top-color: $border-color-theme;
-}
-
-/*
- * GROWI admin page #layoutOptions #themeOptions
- */
-.admin-page {
-  #layoutOptions {
-    .customize-layout-card {
-      &.border-active {
-        border-color: $color-theme-color-box;
-      }
-    }
-  }
-
-  #themeOptions {
-    .theme-option-container.active {
-      .theme-option-name {
-        color: var(--color-global);
-      }
-      a {
-        background-color: $color-theme-color-box;
-        border-color: $color-theme-color-box;
-      }
-    }
-  }
-}
-
-/*
- * HackMd
- */
-.bg-box {
-  background-color: var(--bgcolor-global);
-}
-
-.grw-fab {
-  .btn-create-page {
-    fill: color-yiq($primary);
-  }
-
-  .btn-scroll-to-top {
-    fill: $gray-900;
-  }
-}
-
-/*
-  Slack Integration
-*/
-.selecting-bot-type {
-  .bot-type-disc {
-    width: 20px;
-  }
-}
-
-/*
-  In App Notification
-*/
-.grw-unopend-notification {
-  width: 7px;
-  height: 7px;
-  background-color: $primary;
-}
-
-/*
-Emoji picker modal
-*/
-.emoji-picker-modal {
-  background-color: transparent !important;
-}
+// // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
+// $color-modal-header: color-yiq($primary) !default;
+
+// code:not([class^='language-']) {
+//   @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
+// }
+
+// .code-highlighted {
+//   border-color: $bordercolor-inline-code;
+// }
+
+// //
+// //== Apply to Bootstrap Elements
+// //
+
+// // Alert link
+// @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 {
+//   .grw-sidebar-mode-icon svg {
+//     fill: $secondary;
+//   }
+//   .grw-color-mode-icon svg {
+//     fill: var(--color-global);
+//   }
+//   .grw-color-mode-icon-muted svg {
+//     fill: $secondary;
+//   }
+// }
+
+// // Form
+// .form-control {
+//   @include form-control-focus();
+// }
+
+// // Tabs
+// .nav.nav-tabs .nav-link.active {
+//   color: var(--color-link);
+//   background: transparent;
+
+//   &:hover,
+//   &:focus {
+//     color: var(--color-link-hover);
+//   }
+// }
+
+// // Pagination
+// ul.pagination {
+//   li.page-item.disabled {
+//     button.page-link {
+//       color: $gray-400;
+//     }
+//   }
+//   li.page-item.active {
+//     button.page-link {
+//       color: color-yiq($primary);
+//       background-color: $primary;
+//       &:hover,
+//       &:focus {
+//         color: color-yiq($primary);
+//         background-color: $primary;
+//       }
+//     }
+//   }
+//   li.page-item {
+//     button.page-link {
+//       color: $primary;
+//       border-color: $secondary;
+//       &:hover,
+//       &:active,
+//       &:focus {
+//         color: $primary;
+//       }
+//     }
+//   }
+// }
+
+// //
+// //== Apply to Handsontable
+// //
+// .handsontable {
+//   color: initial;
+// }
+
+// //
+// //== Apply to GROWI Elements
+// //
+
+// .grw-logo {
+//   // set transition for fill
+//   svg * {
+//     transition: fill 0.8s ease-out;
+//   }
+
+//   svg {
+//     fill: var(--fillcolor-logo-mark);
+//   }
+
+//   &:hover {
+//     svg {
+//       .group1 {
+//         fill: var.$growi-green;
+//       }
+
+//       .group2 {
+//         fill: var.$growi-blue;
+//       }
+//     }
+//   }
+// }
+
+// .grw-navbar {
+//   background: var(--bgcolor-navbar);
+//   .nav-item .nav-link {
+//     color: var(--color-link-nabvar);
+//   }
+
+//   border-image: $border-image-navbar;
+//   border-image-slice: 1;
+
+//   .grw-app-title {
+//     color: var(--fillcolor-logo-mark);
+//   }
+// }
+
+// .grw-global-search {
+//   .btn-secondary.dropdown-toggle {
+//     @include button-variant($bgcolor-search-top-dropdown, $bgcolor-search-top-dropdown);
+//   }
+
+//   // for https://youtrack.weseek.co.jp/issue/GW-2603
+//   .search-typeahead {
+//     background-color: var(--bgcolor-global); opacity:0.9;
+//   }
+// }
+
+// .grw-sidebar {
+//   .grw-navigation-resize-button {
+//     $color-resize-button: var(--color-resize-button--,var(--color-global));
+//     $bgcolor-resize-button: white !default;
+//     $color-resize-button-hover: $color-reversal !default;
+//     $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%) !default;
+
+//     .hexagon-container svg {
+//       .background {
+//         fill: $bgcolor-resize-button;
+//       }
+//       .icon {
+//         fill: $color-resize-button;
+//       }
+//     }
+//     &:hover .hexagon-container svg {
+//       .background {
+//         fill: $bgcolor-resize-button-hover;
+//       }
+//       .icon {
+//         fill: $color-resize-button-hover;
+//       }
+//     }
+//   }
+//   div.grw-global-navigation {
+//     > div {
+//       background-color: var(--bgcolor-sidebar);
+//     }
+//   }
+//   div.grw-contextual-navigation {
+//     > div {
+//       color: var(--color-sidebar-context);
+//       background-color: var(--bgcolor-sidebar-context);
+//     }
+//   }
+
+//   .grw-sidebar-nav {
+//     .btn {
+//       @include button-variant(
+//         $bgcolor-sidebar,
+//         $bgcolor-sidebar,
+//         darken($bgcolor-sidebar, 7.5%),
+//         darken($bgcolor-sidebar, 10%),
+//         $bgcolor-sidebar-nav-item-active,
+//         $bgcolor-sidebar-nav-item-active
+//       );
+//     }
+//   }
+//   .grw-sidebar-nav-primary-container {
+//     .btn.active {
+//       i {
+//         text-shadow: var(--text-shadow-sidebar-nav-item-active);
+//       }
+//       // fukidashi
+//       &:after {
+//         border-right-color: var(--bgcolor-sidebar-context)
+//         ;
+//       }
+//     }
+//   }
+
+//   .grw-sidebar-content-header {
+//     .grw-btn-reload {
+//       color: $color-btn-reload-in-sidebar;
+//     }
+
+//     .grw-recent-changes-resize-button {
+//       .custom-control-label::before {
+//         background-color: $primary;
+//       }
+
+//       .custom-control-label::after {
+//         background-color: var(--bgcolor-global);
+//       }
+
+//       .custom-control-input:not(:checked) + .custom-control-label::before {
+//         color: var(--bgcolor-global);
+//       }
+
+//       .custom-control-input:checked + .custom-control-label::before {
+//         color: var(--bgcolor-global);
+//         background-color: $primary;
+//         // border-color: $primary !important;
+//       }
+//       .custom-control-input:checked + .custom-control-label::after {
+//         color: var(--bgcolor-global);
+//       }
+//     }
+//   }
+
+//   .grw-pagetree {
+//     .list-group-item {
+//       .grw-pagetree-title-anchor {
+//         color: inherit;
+//       }
+//     }
+//   }
+//   .grw-pagetree-footer {
+//     .h5.grw-private-legacy-pages-anchor {
+//       color: inherit;
+//     }
+//   }
+
+//   .grw-recent-changes {
+//     .list-group {
+//       .list-group-item {
+//         background-color: transparent;
+
+//         .icon-lock {
+//           color: var(--color-link);
+//         }
+
+//         .grw-recent-changes-item-lower {
+//           color: $gray-500;
+
+//           svg {
+//             fill: $gray-500;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// /*
+//  * Icon
+//  */
+// .editor-container .navbar-editor svg {
+//   fill: var(--color-editor-icons);
+// }
+
+// // page preview button in link form
+// .btn-page-preview svg {
+//   fill: white;
+// }
+
+// /*
+//  * Modal
+//  */
+// .modal {
+//   .modal-header {
+//     border-bottom-color: $border-color-theme;
+//     .modal-title {
+//       color: $color-modal-header;
+//     }
+//     .close {
+//       color: $color-modal-header;
+//       opacity: 0.5;
+//       &:hover {
+//         opacity: 0.9;
+//       }
+//     }
+//   }
+
+//   .modal-content {
+//     background-color: var(--bgcolor-global);
+//   }
+
+//   .modal-footer {
+//     border-top-color: $border-color-theme;
+//   }
+// }
+
+// .grw-custom-nav-tab {
+//   .nav-item {
+//     &:hover,
+//     &:focus {
+//       background-color: var(--color-link); opacity:0.9;
+//     }
+//     .nav-link {
+//       -webkit-appearance: none;
+//       color: var(--color-link);
+//       svg {
+//         fill: var(--color-link);
+//       }
+
+//       // Disabled state lightens text
+//       &.disabled {
+//         color: $nav-link-disabled-color;
+//         svg {
+//           fill: $nav-link-disabled-color;
+//         }
+//       }
+//     }
+//   }
+
+//   .grw-nav-slide-hr {
+//     border-color: var(--color-link);
+//   }
+// }
+
+// .grw-page-accessories-modal {
+//   .modal-header {
+//     .close {
+//       color: $secondary;
+//     }
+//   }
+// }
+
+// /*
+//  * cards
+//  */
+// .card.well {
+//   color: var(--color-global);
+//   background-color: var(--bgcolor-card);
+//   border-color: $light;
+//   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+// }
+
+// .admin-bot-card {
+//   .grw-botcard-title-active {
+//     color: $gray-200;
+//   }
+// }
+
+// /*
+//  * Form Slider
+//  */
+// .admin-page {
+//   span.slider {
+//     background-color: $gray-300;
+
+//     &:before {
+//       background-color: white;
+//     }
+//   }
+
+//   input:checked + .slider {
+//     background-color: #007bff;
+//   }
+
+//   input:focus + .slider {
+//     box-shadow: 0 0 1px #007bff;
+//   }
+// }
+
+// /*
+//  * GROWI wiki
+//  */
+// .wiki {
+//   h1,
+//   h2,
+//   h3,
+//   h4,
+//   h5,
+//   h6,
+//   h7 {
+//     &.blink {
+//       @include mixins.blink-bgcolor($bgcolor-blinked-section);
+//     }
+//   }
+
+//   .highlighted-keyword {
+//     background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
+//   }
+
+//   a {
+//     color: var(--color-link-wiki);
+
+//     &:hover {
+//       color: var(--color-link-wiki-hover);
+//     }
+//   }
+
+//   // table with handsontable modal button
+//   .editable-with-handsontable {
+//     button {
+//       color: var(--color-link-wiki);
+//     }
+
+//     button:hover {
+//       color: var(--color-link-wiki-hover);
+//     }
+//   }
+// }
+
+// /*
+//  * GROWI page-list
+//  */
+// .page-list {
+//   // List group
+//   .list-group {
+//     .list-group-item {
+//       a {
+//         svg {
+//           fill: var(--color-global);
+//         }
+
+//         @include hover() {
+//           svg {
+//             fill: var(--color-global);
+//           }
+//         }
+//       }
+
+//       .page-list-meta {
+//         color: var(--color-page-list-group-item-meta);
+//         svg {
+//           fill: var(--color-page-list-group-item-meta);
+//         }
+//       }
+
+//       &.list-group-item-action {
+//         --bgcolor-page-list-group-item-active: hsl(from var(--bgcolor-global) h s calc(l + 76%));
+//         &.active {
+//           background-color: var(--bgcolor-page-list-group-item-active);
+//           border-left-color: $primary;
+//         }
+//       }
+//     }
+//   }
+// }
+
+// /*
+//  * GROWI Editor
+//  */
+// .layout-root.editing {
+//   --bgcolor-global-darken2: hsl(from var(--bgcolor-global) h s calc(l - 2%));
+//   .main {
+//     background-color: var(--bgcolor-global-darken2);
+
+//     .page-editor-editor-container {
+//       border-right-color: $border-color-theme;
+
+//       .navbar-editor {
+//         background-color: var(--bgcolor-global); // same color with active tab
+//         border-bottom-color: $border-color-theme;
+//       }
+//     }
+
+//     .page-editor-preview-container {
+//       background-color: var(--bgcolor-global);
+//     }
+//   }
+// }
+
+// /*
+//  * Preview for editing /Sidebar
+//  */
+// body.editing-sidebar {
+//   .page-editor-preview-body {
+//     color: var(--color-sidebar-context);
+//     background-color: var(--bgcolor-sidebar-context);
+//   }
+// }
+
+// /*
+//  * GROWI Grid Edit Modal
+//  */
+// .grw-grid-edit-preview {
+//   .desktop-preview,
+//   .tablet-preview,
+//   .mobile-preview {
+//     background: var(--bgcolor-global);
+//   }
+//   .grid-edit-border-for-each-cols {
+//     border: 2px solid var(--bgcolor-global);
+//   }
+// }
+
+// .grid-preview-col-0 {
+//   background: var.$growi-blue;
+// }
+
+// .grid-preview-col-1 {
+//   background: var(--info);
+// }
+
+// .grid-preview-col-2 {
+//   background: var(--success);
+// }
+
+// .grid-preview-col-3 {
+//   background: var.$growi-green;
+// }
+
+// /*
+//  * GROWI comment
+//  */
+// .page-comment-meta .page-comment-revision svg {
+//   fill: var(--color-link);
+
+//   &:hover {
+//     fill: var(--color-link-hover);
+//   }
+// }
+
+// /*
+//  * GROWI comment form
+//  */
+// .page-comments {
+//   .page-comment .page-comment-main,
+//   .page-comment-form .comment-form-main {
+//     background-color: var(--bgcolor-global);
+
+//     &:before {
+//       border-right-color: var(--bgcolor-global);
+//     }
+
+//     .nav.nav-tabs {
+//       --border-bottom-color: hsl(from var(--bgcolor-global) h s calc(l - 4%));
+//       > li > a.active {
+//         background: transparent;
+//         border-bottom: solid 1px var(--border-bottom-color);
+//         border-bottom-color: var(--border-bottom-color);
+//       }
+//     }
+//   }
+// }
+
+// /*
+//  * GROWI search result
+//  */
+// .search-result-base {
+//   .grw-search-page-nav {
+//     background-color: var(--bgcolor-subnav);
+//   }
+//   .search-control {
+//     background-color: var(--bgcolor-global);
+//   }
+//   .page-list {
+//     .highlighted-keyword {
+//       background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
+//     }
+//   }
+// }
+
+// /*
+//  * react bootstrap typeahead
+//  */
+// mark.rbt-highlight-text {
+//   // Temporarily the highlight color is black
+//   color: black;
+// }
+
+// /*
+//  * GROWI page content footer
+//  */
+// .page-content-footer {
+//   --bgcolor-global-darken2: hsl(from var(--bgcolor-global) h s calc(l - 2%));
+//   background-color: var(--bgcolor-global-darken2);
+//   border-top-color: $border-color-theme;
+// }
+
+// /*
+//  * GROWI admin page #layoutOptions #themeOptions
+//  */
+// .admin-page {
+//   #layoutOptions {
+//     .customize-layout-card {
+//       &.border-active {
+//         border-color: $color-theme-color-box;
+//       }
+//     }
+//   }
+
+//   #themeOptions {
+//     .theme-option-container.active {
+//       .theme-option-name {
+//         color: var(--color-global);
+//       }
+//       a {
+//         background-color: $color-theme-color-box;
+//         border-color: $color-theme-color-box;
+//       }
+//     }
+//   }
+// }
+
+// /*
+//  * HackMd
+//  */
+// .bg-box {
+//   background-color: var(--bgcolor-global);
+// }
+
+// .grw-fab {
+//   .btn-create-page {
+//     fill: color-yiq($primary);
+//   }
+
+//   .btn-scroll-to-top {
+//     fill: $gray-900;
+//   }
+// }
+
+// /*
+//   Slack Integration
+// */
+// .selecting-bot-type {
+//   .bot-type-disc {
+//     width: 20px;
+//   }
+// }
+
+// /*
+//   In App Notification
+// */
+// .grw-unopend-notification {
+//   width: 7px;
+//   height: 7px;
+//   background-color: $primary;
+// }
+
+// /*
+// Emoji picker modal
+// */
+// .emoji-picker-modal {
+//   background-color: transparent !important;
+// }

packages/app/src/styles/theme/_hsl-functions.scss

@@ -0,0 +1,53 @@
+// @function getHS($color-hsl) {
+//   // remove "var(" and ")"
+//   $color: str-replace($color-hsl, 'var(');
+//   $color: str-replace($color, ')');
+//   @return var(#{$color+'-hs'});
+// }
+// @function getL($color-hsl) {
+//   // remove "var(" and ")"
+//   // $color: str-replace(str-replace($color-hsl, 'var('), ')');
+//   $color: str-replace($color-hsl, 'var(');
+//   $color: str-replace($color, ')');
+//   @return var(#{$color+'-l'});
+// }
+
+// @function contrast($color-hsl) {
+//   $color-hs: getHS($color-hsl);
+//   $color-l: getL($color-hsl);
+//   @return hsl($color-hs, clamp(10%, calc((100% - $color-l - 51% ) * 1000), 95%));
+// }
+
+// @function lighten($color-hsl, $degrees) {
+//   $color-hs: getHS($color-hsl);
+//   $color-l: getL($color-hsl);
+//   @return hsl($color-hs, calc($color-l + $degrees));
+// }
+// @function darken($color-hsl, $degrees) {
+//   $color-hs: getHS($color-hsl);
+//   $color-l: getL($color-hsl);
+//   @return hsl($color-hs, calc($color-l - $degrees));
+// }
+
+@function contrast($color) {
+  $color: str-replace($color, 'var(');
+  $color: str-replace($color, ')');
+  $color-hs: var(#{$color+'-hs'});
+  $color-l: var(#{$color+'-l'});
+  @return hsl($color-hs, clamp(10%, calc((100% - $color-l - 51% ) * 1000), 95%));
+}
+
+@function lighten($color, $degrees) {
+  $color: str-replace($color, 'var(');
+  $color: str-replace($color, ')');
+  $color-hs: var(#{$color+'-hs'});
+  $color-l: var(#{$color+'-l'});
+  @return hsl($color-hs, calc($color-l + $degrees));
+}
+@function darken($color, $degrees) {
+  $color: str-replace($color, 'var(');
+  $color: str-replace($color, ')');
+  $color-hs: var(#{$color+'-hs'});
+  $color-l: var(#{$color+'-l'});
+  @return hsl($color-hs, calc($color-l - $degrees));
+}

packages/app/src/styles/theme/_override-functions.scss

@@ -0,0 +1,21 @@
+@use './hsl-functions' as hsl;
+
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  @return hsl.contrast($color);
+}
+
+@function lighten($color, $degrees) {
+  @return hsl.lighten($color, $degrees);
+}
+
+@function darken($color, $degrees) {
+  @return hsl.darken($color, $degrees);
+}
+
+@function mix($color1, $color2, $degrees) {
+  @return $color1;
+}
+
+@function rgba($color, $degrees) {
+  @return $color;
+}

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

@@ -1,22 +1,21 @@
 .btn-link {
-  color: var(--link-color);
+  color: var(--color-link);
   svg {
-    fill: var(--link-color);
+    fill: var(--color-link);
   }
 
   @include hover() {
-    color: var(--link-hover-color);
+    color: var(--color-link-hover);
     svg {
-      fill: var(--link-hover-color);
+      fill: var(--color-link-hover);
     }
   }
 
   &:disabled,
   &.disabled {
-    --btn-link-disabled-color: #{$btn-link-disabled-color};
-    color: var(--btn-link-disabled-color);
+    color: var(--color-link-disabled, $gray-500);
     svg {
-      fill: var(--btn-link-disabled-color);
+      fill: var(--color-link-disabled, $gray-500);
     }
   }
 }

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

@@ -14,32 +14,32 @@
 // 3. Set an explicit initial text-align value so that we can later use
 //    the `inherit` value on things like `<th>` elements.
 
-&, body {
-  color: var(--body-color);
-  background-color: var(--body-bg); // 2
+html, body {
+  color: var(--color-global);
+  background-color: var(--bgcolor-global); // 2
 
   svg {
-    fill: var(--body-color);
+    fill: var(--color-global);
   }
 }
 
 // Links
 
 a {
-  color: var(--link-color);
+  color: var(--color-link);
   text-decoration: $link-decoration;
   background-color: transparent; // Remove the gray background on active links in IE 10.
 
   svg {
-    fill: var(--link-color);
+    fill: var(--color-link);
   }
 
   @include hover() {
-    color: var(--link-hover-color);
+    color: var(--color-link-hover);
     text-decoration: $link-hover-decoration;
 
     svg {
-      fill: var(--link-hover-color);
+      fill: var(--color-link-hover);
     }
   }
 }

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

@@ -57,16 +57,16 @@
       border-color: $color;
     }
     .custom-control-input:checked + .custom-control-label::after {
-      color: $bgcolor-global;
+      color: var(--bgcolor-global);
     }
     .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-      color: $bgcolor-global;
+      color: var(--bgcolor-global);
       background-color: $color;
       border-color: $color;
     }
     .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
-      color: $bgcolor-global;
-      background-color: $bgcolor-global;
+      color: var(--bgcolor-global);
+      background-color: var(--bgcolor-global);
       border-color: $input-focus-border-color;
     }
   }

packages/preset-themes/src/styles/bootstrap/_variables.scss

@@ -90,7 +90,6 @@ $border-radius-lg: 8px;
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
-$btn-link-disabled-color: $gray-500;
 $btn-focus-box-shadow: none;
 $btn-active-box-shadow: none;
 

packages/preset-themes/src/styles/default.scss

@@ -40,15 +40,12 @@
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
   --color-global-hs: 214.1,60%;
   --color-global-l: 16.7%;
-  --body-color: var(--color-global);
   $color-reversal: $light;
   // $color-header: #2b2b2b;
   --color-link: hsl(var(--color-link-hs),var(--color-link-l));
   --color-link-hs: 228.4,76.3%;
   --color-link-l: 41.4%;
-  --link-color: var(--color-link);
   --color-link-hover: hsl(var(--color-link-hs),calc(var(--color-link-l) + 20%));
-  --link-hover-color: var(--color-link-hover);
   --color-link-wiki: var(--color-link);
   --color-link-wiki-hs: var(--color-link-hs);
   --color-link-wiki-l: var(--color-link-l);

packages/preset-themes/src/styles/theme/_apply-colors.scss

@@ -38,10 +38,7 @@ $nav-tabs-link-active-bg: var(--bgcolor-global);
 $nav-tabs-link-active-border-color: var(--bordercolor-nav-tabs-active);
 $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 
-@import 'reboot-bootstrap-buttons';
-@import 'reboot-bootstrap-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: color-yiq($primary) !default;