Merge pull request #7146 from weseek/imprv/_apply-colors-Emoji-picker-modal

imprv:apply colors emoji picker modal

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

@@ -43,7 +43,7 @@ $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)
@@ -191,12 +191,11 @@ ul.pagination {
 }
 
 .grw-sidebar {
+  $color-resize-button: var(--color-resize-button--,var(--color-global));
+  $bgcolor-resize-button: var(--bgcolor-resize-button,white);
+  $color-resize-button-hover: var(--color-resize-button-hover,var(--color-reversal));
+  $bgcolor-resize-button-hover: var(--bgcolor-resize-button-hover,#{hsl.lighten(var(--bgcolor-resize-button), 5%)});
   .grw-navigation-resize-button {
-    $color-resize-button: var(--color-resize-button--,var(--color-global));
-    $bgcolor-resize-button: var(--bgcolor-resize-button,white);
-    $color-resize-button-hover: var(--color-resize-button-hover,var(--color-reversal));
-    $bgcolor-resize-button-hover: var(--bgcolor-resize-button-hover,#{hsl.lighten(var(--bgcolor-resize-button), 5%)});
-
     .hexagon-container svg {
       .background {
         fill: var(--bgcolor-resize-button);
@@ -241,8 +240,7 @@ ul.pagination {
       }
       // fukidashi
       &:after {
-        border-right-color: var(--bgcolor-sidebar-context)
-        ;
+        border-right-color: var(--bgcolor-sidebar-context);
       }
     }
   }
@@ -268,7 +266,7 @@ ul.pagination {
       .custom-control-input:checked + .custom-control-label::before {
         color: var(--bgcolor-global);
         background-color: var(--primary);
-        // border-color: $primary !important;
+        border-color: var(--primary);
       }
       .custom-control-input:checked + .custom-control-label::after {
         color: var(--bgcolor-global);
@@ -373,7 +371,7 @@ ul.pagination {
   }
 
   .grw-nav-slide-hr {
-    border-color: var(--color-link);
+    border-color: var(--color-link) !important;
   }
 }
 
@@ -391,7 +389,7 @@ ul.pagination {
 .card.well {
   color: var(--color-global);
   background-color: var(--bgcolor-card);
-  border-color: $light;
+  border-color: var(--light);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 
@@ -401,297 +399,294 @@ ul.pagination {
   }
 }
 
-// /*
-//  * 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%, var(--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 {
-//         &.active {
-//           background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 76%));
-//           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: var(--border-color-theme);
-
-//       .navbar-editor {
-//         background-color: var(--bgcolor-global); // same color with active tab
-//         border-bottom-color: var(--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 {
+/*
+ * 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(var(--bgcolor-blinked-section));
+    }
+  }
+
   .highlighted-keyword {
     background: linear-gradient(transparent 60%, var(--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 {
+        &.active {
+          background-color: #{hsl.lighten(var(--bgcolor-global),76%)};
+          border-left-color: var(--primary);
+        }
+      }
+    }
+  }
+}
+
+/*
+ * GROWI Editor
+ */
+.layout-root.editing {
+  .main {
+    background-color: #{hsl.darken(var(--bgcolor-global),2%)};
+
+    .page-editor-editor-container {
+      border-right-color: var(--border-color-theme);
+
+      .navbar-editor {
+        background-color: var(--bgcolor-global); // same color with active tab
+        border-bottom-color: var(--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 {
+      > li > a.active {
+        background: transparent;
+        border-bottom: solid 1px #{hsl.darken(var(--bgcolor-global),4%)};
+        border-bottom-color: #{hsl.darken(var(--bgcolor-global),4%)};
+      }
+    }
+  }
+}
+
+/*
+ * 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%, var(--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 {
+  background-color: #{hsl.darken(var(--bgcolor-global),2%)};
+  border-top-color: var(--border-color-theme);
+}
+
+/*
+ * GROWI admin page #layoutOptions #themeOptions
+ */
+.admin-page {
+  #layoutOptions {
+    .customize-layout-card {
+      &.border-active {
+        border-color: var(--color-theme-color-box);
+      }
+    }
+  }
+
+  #themeOptions {
+    .theme-option-container.active {
+      .theme-option-name {
+        color: var(--color-global);
+      }
+      a {
+        background-color: var(--color-theme-color-box);
+        border-color: var(--color-theme-color-box);
+      }
+    }
+  }
+}
+
+/*
+ * HackMd
+ */
+.bg-box {
+  background-color: var(--bgcolor-global);
+}
+
+.grw-fab {
+  .btn-create-page {
+    fill: #{hsl.contrast(var(--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: var(--primary);
+}
+
+/*
+Emoji picker modal
+*/
+.emoji-picker-modal {
+  background-color: transparent !important;
 }
-// }
-
-// /*
-//  * 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/preset-themes/src/styles/default.scss

@@ -7,13 +7,13 @@
 //
 
 // colors for overriding bootstrap $theme-colors
-// $secondary: #;
+// --secondary: #;
 // --info: #;
 // --success: #;
 // --warning: #;
 // --danger: #;
-// $light: #;
-// $dark: #;
+// --light: #;
+// --dark: #;
 
 //== Light Mode
 //
@@ -24,8 +24,6 @@
   --accent: hsl(var(--accent-hs),var(--accent-l));
   --accent-hs: 198.6,74.2%;
   --accent-l: 48.6%;
-  $accent: #209fd8;
-
 
   // Background colors
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
@@ -33,8 +31,8 @@
   --bgcolor-global-l: 100%;
   --bgcolor-inline-code: #{$gray-100}; //optional
   --bgcolor-card: #{$gray-50};
-  $bgcolor-blinked-section: rgba($primary, 0.1);
-  //$bgcolor-keyword-highlighted: $grw-marker-yellow;
+  --bgcolor-blinked-section: hsla(var(--primary-hs),var(--primary-l),90%);
+  --bgcolor-keyword-highlighted: #{$grw-marker-yellow};
 
   // Font colors
   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
@@ -52,7 +50,8 @@
   --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),20%)};
   --color-link-nabvar: #{$gray-500};
   --color-inline-code: #{darken($red, 15%)}; // optional
-  --color-modal-header: #{hsl.contrast(var(--primary))};
+  --color-modal-header: white;
+
 
   // List Group colors
   --color-list: var(--color-global); // optional
@@ -61,6 +60,7 @@
   --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};// optional
   // --color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
+  --color-page-list-group-item-meta: #{$gray-500};
 
   // Table colors
   // --color-table: #; // optional
@@ -107,7 +107,7 @@
   // Tabs
   // $color-nav-tabs-link-active: #; //optional
   // $bordercolor-nav-tabs-hover: # # $bordercolor-nav-tabs; // optional
-  // $bordercolor-nav-tabs-active: # # --bgcolor-global; // optional
+  --bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global); // optional
 
   // Tags
   // $color-tags: #; //optional
@@ -124,7 +124,7 @@
   --bgcolor-dropdown-link-active: $growi-blue;
 
   // admin theme box
-  $color-theme-color-box: lighten($primary, 20%);
+  --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};
 
   @import './theme/apply-colors';
   // @import './theme/apply-colors-light';
@@ -152,7 +152,7 @@
   --bgcolor-inline-code: #1f1f22; //optional
   --bgcolor-card: #{hsl.darken(var(--bgcolor-global),5%)};
   $bgcolor-blinked-section: rgba($primary, 0.4);
-  $bgcolor-keyword-highlighted: darken($grw-marker-red, 30%);
+  --bgcolor-keyword-highlighted: #{darken($grw-marker-red, 30%)};
 
   // Font colors
   --color-global: #{$gray-400};
@@ -170,6 +170,7 @@
   --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),10%)};
   --color-link-nabvar: #a7a7a7;
   --color-inline-code: #c7254e; // optional
+  --color-modal-header: black;
 
   // List Group colors
   --color-list: var(--color-global); // optional
@@ -177,7 +178,8 @@
   // --color-list-hover: va(--color-global); // optional
   --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
   // --color-list-active:white ; // optional
-  // $bgcolor-list-active: $primary; // optional
+  // --bgcolor-list-active: var(--primary); // optional
+  --color-page-list-group-item-meta: #{$gray-500};
 
   // Table colors
   // --color-table: #; // optional
@@ -205,10 +207,10 @@
   --bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
-  $color-resize-button: white;
-  $bgcolor-resize-button: $accent;
-  $color-resize-button-hover: white;
-  $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
+  --color-resize-button: white;
+  --bgcolor-resize-button: var(--accent);
+  --color-resize-button-hover: white;
+  --bgcolor-resize-button-hover: #{hsl.darken(var(--accent), 5%)};
   // Sidebar contents
   --color-sidebar-context: var(--color-global);
   --color-sidebar-context-hs: var(--color-global-hs);
@@ -220,10 +222,10 @@
   --bgcolor-subnav: --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};  // optional
 
   // Tabs
-  $bordercolor-nav-tabs: $gray-700; // optional
+  --bordercolor-nav-tabs: #{$gray-700}; // optional
   // $color-nav-tabs-link-active: #; //optional
-  $bordercolor-nav-tabs-hover: #666 #666 $bordercolor-nav-tabs; // optional
-  // $bordercolor-nav-tabs-active: # # var(--bgcolor-global); // optional
+  --bordercolor-nav-tabs-hover: #666 #666 var(--bordercolor-nav-tabs); // optional
+  --bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global); // optional
 
   // Tags
   // $color-tags: #; //optional
@@ -237,13 +239,11 @@
   --bordercolor-inline-code: var(--secondary); // optional
 
   // admin theme box
-  $color-theme-color-box: $primary;
+  --color-theme-color-box: var(--primary);
 
   @import './theme/apply-colors';
   // @import './theme/apply-colors-dark';
 
-  // @import '/packages/app/src/styles/theme/apply-colors-dark-new';
-
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {

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

@@ -1,34 +1,33 @@
-@use '../variables' as var;
-@use '../bootstrap/init' as *;
-@use '../mixins';
-@use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
-@use '../atoms/mixins/code';
-@use './mixins/hsl-button';
-@use './hsl-functions' as hsl;
-
-//
-//== 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;
+// @use '../variables' as var;
+// @use '../bootstrap/init' as *;
+// @use '../mixins';
+// @use '../atoms/mixins/code';
+// @use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
+// @use './mixins/hsl-button';
+// @use './hsl-functions' as hsl;
+
+// //
+// //== Apply to Bootstrap
+// //
+
+// // determine optional variables
+// $border-image-navbar: var(--border-image-navbar,#{linear-gradient(to right, $gray-300 0%, $gray-300 100%)});
+// $bgcolor-search-top-dropdown: var(--bgcolor-search-top-dropdown,var(--secondary));
+// $bgcolor-sidebar-nav-item-active: var(--bgcolor-sidebar-nav-item-active,#{hsl.darken(var(--primary),10%)});
 // $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;
+// $bgcolor-inline-code: var(--bgcolor-inline-code, #{$gray-100});
+// $color-inline-code: var(--color-inline-code, #{darken($red, 15%)});
+// $bordercolor-inline-code: var(--bordercolor-inline-code, #{$gray-400});
+// $bordercolor-nav-tabs: var(--bordercolor-nav-tabs, #{$gray-300});
+// $bordercolor-nav-tabs-hover: var(--bordercolor-nav-tabs-hover,#{$gray-200} #{$gray-200} var(--bordercolor-nav-tabs));
+// $border-nav-tabs-link-activec: var(--border-nav-tabs-link-active, #{$gray-600});
 // $bordercolor-nav-tabs-active: var(--bordercolor-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-btn-reload-in-sidebar: var(--color-btn-reload-in-sidebar,#{$gray-500});
+// $bgcolor-keyword-highlighted: var(--bgcolor-keyword-highlighted,#{var.$grw-marker-yellow});
+// $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
+// // override bootstrap variables
 // $body-bg: var(--bgcolor-global);
 // $body-color: var(--color-global);
 // $link-color: var(--color-link);
@@ -38,27 +37,27 @@
 // $nav-tabs-link-hover-border-color: var(--bordercolor-nav-tabs-hover);
 // $nav-tabs-link-active-color: var(--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 ));
+// $nav-tabs-link-active-border-color: var(--bordercolor-nav-tabs-active);
+// $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 
-// @import 'reboot-bootstrap-nav';
+// // @import 'reboot-bootstrap-nav';
 
-// determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
-// $color-modal-header: var(--color-modal-header,contrast(var(--primary)));
+// // 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))});
 
 // code:not([class^='language-']) {
-//   @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
+//   @include code.code-inline-color(var(--color-inline-code), var(--bgcolor-inline-code), var(--bordercolor-inline-code));
 // }
 
 // .code-highlighted {
 //   border-color: var(--bordercolor-inline-code);
 // }
 
-//
-//== Apply to Bootstrap Elements
-//
+// //
+// //== Apply to Bootstrap Elements
+// //
 
-// Alert link
+// // Alert link
 // @each $color, $value in $theme-colors {
 //   .alert.alert-#{$color} {
 //     a,
@@ -68,7 +67,7 @@
 //   }
 // }
 
-// Dropdown
+// // Dropdown
 // .grw-apperance-mode-dropdown {
 //   .grw-sidebar-mode-icon svg {
 //     fill: var(--secondary);
@@ -81,12 +80,12 @@
 //   }
 // }
 
-// Form
+// // Form
 // .form-control {
 //   @include form-control-focus();
 // }
 
-// Tabs
+// // Tabs
 // .nav.nav-tabs .nav-link.active {
 //   color: var(--color-link);
 //   background: transparent;
@@ -97,7 +96,7 @@
 //   }
 // }
 
-// Pagination
+// // Pagination
 // ul.pagination {
 //   li.page-item.disabled {
 //     button.page-link {
@@ -128,16 +127,16 @@
 //   }
 // }
 
-//
-//== Apply to Handsontable
-//
+// //
+// //== Apply to Handsontable
+// //
 // .handsontable {
 //   color: initial;
 // }
 
-//
-//== Apply to GROWI Elements
-//
+// //
+// //== Apply to GROWI Elements
+// //
 
 // .grw-logo {
 //   set transition for fill
@@ -178,22 +177,21 @@
 
 // .grw-global-search {
 //   .btn-secondary.dropdown-toggle {
-//     @include button-variant($bgcolor-search-top-dropdown, $bgcolor-search-top-dropdown);
+//     @include hsl-button.button-variant(var(--bgcolor-search-top-dropdown), var(--bgcolor-search-top-dropdown));
 //   }
 
 //   // for https://youtrack.weseek.co.jp/issue/GW-2603
 //   .search-typeahead {
-//     background-color: var(--bgcolor-global); opacity:0.9;
+//     background-color: hsla(var(--bgcolor-global-hs),var(--bgcolor-global-l),10%);
 //   }
 // }
 
 // .grw-sidebar {
+//   $color-resize-button: var(--color-resize-button--,var(--color-global));
+//   $bgcolor-resize-button: var(--bgcolor-resize-button,white);
+//   $color-resize-button-hover: var(--color-resize-button-hover,var(--color-reversal));
+//   $bgcolor-resize-button-hover: var(--bgcolor-resize-button-hover,#{hsl.lighten(var(--bgcolor-resize-button), 5%)});
 //   .grw-navigation-resize-button {
-//     $color-resize-button: var(--color-resize-button--,var(--color-global));
-//     $bgcolor-resize-button: var(--bgcolor-resize-button,white);
-//     $color-resize-button-hover: var(--color-resize-button-hover,var(--color-reversal));
-//     $bgcolor-resize-button-hover: var(--bgcolor-resize-button-hover,#{hsl.lighten(var(--bgcolor-resize-button), 5%)});
-
 //     .hexagon-container svg {
 //       .background {
 //         fill: var(--bgcolor-resize-button);
@@ -225,13 +223,9 @@
 
 //   .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
+//       @include hsl-button.button-variant(
+//         var(--bgcolor-sidebar),
+//         var(--bgcolor-sidebar),
 //       );
 //     }
 //   }
@@ -242,8 +236,7 @@
 //       }
 //       // fukidashi
 //       &:after {
-//         border-right-color: var(--bgcolor-sidebar-context)
-//         ;
+//         border-right-color: var(--bgcolor-sidebar-context);
 //       }
 //     }
 //   }
@@ -269,7 +262,7 @@
 //       .custom-control-input:checked + .custom-control-label::before {
 //         color: var(--bgcolor-global);
 //         background-color: var(--primary);
-//         // border-color: $primary !important;
+//         border-color: var(--primary);
 //       }
 //       .custom-control-input:checked + .custom-control-label::after {
 //         color: var(--bgcolor-global);
@@ -300,10 +293,10 @@
 //         }
 
 //         .grw-recent-changes-item-lower {
-//           color: $gray-500;
+//           color: #{$gray-500};
 
 //           svg {
-//             fill: $gray-500;
+//             fill: #{$gray-500};
 //           }
 //         }
 //       }
@@ -311,9 +304,9 @@
 //   }
 // }
 
-/*
- * Icon
- */
+// /*
+//  * Icon
+//  */
 // .editor-container .navbar-editor svg {
 //   fill: var(--color-editor-icons);
 // }
@@ -333,8 +326,8 @@
 //       color: var(--color-modal-header);
 //     }
 //     .close {
-//       color: var(--color-modal-header);
-//       opacity: 0.5;
+//       color: hsla(var(--primary-hs),var(--primary-l),50%);
+
 //       &:hover {
 //         opacity: 0.9;
 //       }
@@ -386,9 +379,9 @@
 //   }
 // }
 
-/*
- * cards
- */
+// /*
+//  * cards
+//  */
 // .card.well {
 //   color: var(--color-global);
 //   background-color: var(--bgcolor-card);
@@ -402,294 +395,294 @@
 //   }
 // }
 
-/*
- * 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 {
-        &.active {
-          background-color: #{hsl.lighten(var(--bgcolor-global),76%)};
-          border-left-color: $primary;
-        }
-      }
-    }
-  }
-}
-
-/*
- * GROWI Editor
- */
-.layout-root.editing {
-  .main {
-    background-color: #{hsl.darken(var(--bgcolor-global),2%)};
-
-    .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 {
-      > li > a.active {
-        background: transparent;
-        border-bottom: solid 1px #{hsl.darken(var(--bgcolor-global),4%)};
-        border-bottom-color: #{hsl.darken(var(--bgcolor-global),4%)};
-      }
-    }
-  }
-}
-
-/*
- * 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 {
-  background-color: #{hsl.darken(var(--bgcolor-global),2%)};
-  // 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;
-}
+// /*
+//  * 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(var(--bgcolor-blinked-section));
+//     }
+//   }
+
+//   .highlighted-keyword {
+//     background: linear-gradient(transparent 60%, var(--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 {
+//         &.active {
+//           background-color: #{hsl.lighten(var(--bgcolor-global),76%)};
+//           border-left-color: var(--primary);
+//         }
+//       }
+//     }
+//   }
+// }
+
+// /*
+//  * GROWI Editor
+//  */
+// .layout-root.editing {
+//   .main {
+//     background-color: #{hsl.darken(var(--bgcolor-global),2%)};
+
+//     .page-editor-editor-container {
+//       border-right-color: var(--border-color-theme);
+
+//       .navbar-editor {
+//         background-color: var(--bgcolor-global); // same color with active tab
+//         border-bottom-color: var(--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 {
+//       > li > a.active {
+//         background: transparent;
+//         border-bottom: solid 1px #{hsl.darken(var(--bgcolor-global),4%)};
+//         border-bottom-color: #{hsl.darken(var(--bgcolor-global),4%)};
+//       }
+//     }
+//   }
+// }
+
+// /*
+//  * 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%, var(--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 {
+//   background-color: #{hsl.darken(var(--bgcolor-global),2%)};
+//   border-top-color: var(--border-color-theme);
+// }
+
+// /*
+//  * GROWI admin page #layoutOptions #themeOptions
+//  */
+// .admin-page {
+//   #layoutOptions {
+//     .customize-layout-card {
+//       &.border-active {
+//         border-color: var(--color-theme-color-box);
+//       }
+//     }
+//   }
+
+//   #themeOptions {
+//     .theme-option-container.active {
+//       .theme-option-name {
+//         color: var(--color-global);
+//       }
+//       a {
+//         background-color: var(--color-theme-color-box);
+//         border-color: var(--color-theme-color-box);
+//       }
+//     }
+//   }
+// }
+
+// /*
+//  * HackMd
+//  */
+// .bg-box {
+//   background-color: var(--bgcolor-global);
+// }
+
+// .grw-fab {
+//   .btn-create-page {
+//     fill: #{hsl.contrast(var(--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: var(--primary);
+// }
+
+// /*
+// Emoji picker modal
+// */
+// .emoji-picker-modal {
+//   background-color: transparent !important;
+// }