fix _reboot-bootstrap-buttons.scss

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

@@ -9,7 +9,7 @@ $bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
 $color-list-hover: var(--color-list-hover,var(--color-global));
 $color-list-active: $color-reversal !default;
 $bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
-$bgcolor-subnav: var(--bgcolor-subnav,hsl(from var(--bgcolor-global) h s calc(l 3%)));
+$bgcolor-subnav: var(--bgcolor-subnav);
 $color-table: var(--color-table,white);
 $bgcolor-table: #343a40 !default;
 $border-color-table: lighten($bgcolor-table, 7.5%) !default;
@@ -24,7 +24,7 @@ $color-dropdown: var(--color-dropdown,var(--color-global));
 $bgcolor-dropdown: var(--bgcolor-dropdown,var(--bgcolor-global));
 $color-dropdown-link: var(--color-dropdown-link,var(--color-global));
 $color-dropdown-link-hover: $light !default;
-$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,hsl(from var(--bgcolor-global) h s calc(l 15%)));
+$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover);
 $color-dropdown-link-active: $light !default;
 $bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
 
@@ -66,8 +66,9 @@ input.form-control,
 select.form-control,
 select.custom-select,
 textarea.form-control {
+  --bgcolor-global-darken5: hsl(from var(--bgcolor-global) h s calc(l - 5%));
   color: var(--color-global);
-  background-color: hsl(from var(--bgcolor-global) h s calc(l - 5%));
+  background-color: var(--bgcolor-global-darken5);
   border-color: $border-color-global;
   &:focus {
     background-color: var(--bgcolor-global);
@@ -78,8 +79,10 @@ textarea.form-control {
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: hsl(from var(--color-global) h s calc(l 10%));
-  background-color: hsl(from var(--bgcolor-global) h s calc(l 5%));
+  --color-global-light-10:hsl(from var(--color-global) h s calc(l + 10%));
+  --color-global-light-5:hsl(from var(--color-global) h s calc(l + 5%));
+  color: var(--color-global-light-10);
+  background-color: var(--color-global-light-5);
 }
 
 .input-group > .input-group-prepend > .input-group-text {
@@ -97,7 +100,8 @@ textarea.form-control {
 }
 
 label.custom-control-label::before {
-  background-color: hsl(from var(--bgcolor-global) h s calc(l - 5%));
+  --bgcolor-global-darken5: hsl(from var(--bgcolor-global) h s calc(l - 5%));
+  background-color: var(--bgcolor-global-darken5);
 }
 
 /*
@@ -228,10 +232,12 @@ ul.pagination {
  * GROWI page list
  */
 .page-list {
+  --color-global-darken10: hsl(from var(--color-global) h s calc(l - 10%));
+  --color-global-darken9: hsl(from var(--color-global) h s calc(l - 9%));
   .page-list-ul {
     > li {
       > span.page-list-meta {
-        color: hsl(from var(--color-global) h s calc(l - 10%));
+        color: var(--color-global-darken10);
       }
     }
   }
@@ -239,13 +245,13 @@ ul.pagination {
   // List group
   .list-group-item {
     &.active {
-      background-color: hsl(from var(--bgcolor-global) h s calc(l 9%));
+      background-color: var(--color-global-darken9);
     }
     .list-group-item-action:hover {
       background-color: var(--bgcolor-list-hover);
     }
     .page-list-snippet {
-      color: hsl(from var(--color-global) h s calc(l - 10%));
+      color: var(--color-global-darken10);
     }
   }
 }
@@ -254,8 +260,9 @@ ul.pagination {
  * GROWI ToC
  */
 .revision-toc-content {
+  --color-global-lighten30: hsl(from var(--color-global) h s calc(l + 30%));
   ::marker {
-    color: hsl(from var(--bgcolor-global) h s calc(l 30%));;
+    color: var(--color-global-lighten30);
   }
 }
 
@@ -302,12 +309,12 @@ ul.pagination {
   );
   // Pagetree
   .grw-pagetree {
-    --bgcolor-sidebar-context-lighten8: hsl(from var(--bgcolor-sidebar-context) h s calc(l 8%));
-    --bgcolor-sidebar-context-lighten15: hsl(from var(--bgcolor-sidebar-context) h s calc(l 15%));
+    --bgcolor-sidebar-context-lighten8: hsl(from var(--bgcolor-sidebar-context) h s calc(l + 8%));
+    --bgcolor-sidebar-context-lighten15: hsl(from var(--bgcolor-sidebar-context) h s calc(l + 15%));
     --color-sidebar-context-darken15: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 15%));
     --color-sidebar-context-darken10: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 10%));
-    --bgcolor-sidebar-context-lighten18: hsl(from var(--bgcolor-sidebar-context) h s calc(l 18%));
-    --bgcolor-sidebar-context-lighten24: hsl(from var(--bgcolor-sidebar-context) h s calc(l 24%));
+    --bgcolor-sidebar-context-lighten18: hsl(from var(--bgcolor-sidebar-context) h s calc(l + 18%));
+    --bgcolor-sidebar-context-lighten24: hsl(from var(--bgcolor-sidebar-context) h s calc(l + 24%));
     @include override-list-group-item-for-pagetree(
       var(--color-sidebar-context),
       var(--bgcolor-sidebar-context-lighten8),

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

@@ -24,6 +24,7 @@ $color-dropdown-link: var(--color-dropdown-link,var(--color-global));
 $color-dropdown-link-hover: var(--color-dropdown-link-hover,var(--color-global));
 $color-dropdown-link-active: var(--color-reversal);
 $bgcolor-dropdown-link-active: $primary !default;
+$bgcolor-navbar: var(--bgcolor-navbar,#{$gray-900});
 
 
 // override bootstrap variables
@@ -63,13 +64,16 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
 }
 
 .form-control::placeholder {
-  color: hsl(from var(--bgcolor-global) h s calc(l - 20%));
+  --bgcolor-global-darken20: hsl(from var(--bgcolor-global) h s calc(l - 20%));
+  color: var(--bgcolor-global-darken20);
 }
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: hsl(from var(--color-global) h s calc(l 10%));
-  background-color: hsl(from var(--bgcolor-global) h s calc(l - 5%));
+  --color-global-light-10:hsl(from var(--color-global) h s calc(l + 10%));
+  --color-global-darken-5:hsl(from var(--color-global) h s calc(l - 5%));
+  color: var(--color-global-light-10);
+  background-color: var(--color-global-darken-5);
 }
 
 /*
@@ -188,7 +192,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  * GROWI Sidebar
  */
 .grw-sidebar {
-  --bgcolor-sidebar-context: hsl(from var(--primary) h s calc(l 77%));
+  --bgcolor-sidebar-context: hsl(from var(--primary) h s calc(l + 77%));
   // List
   @include override-list-group-item(
     var(--color-list),
@@ -207,8 +211,8 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
   .grw-pagetree {
     --bgcolor-sidebar-context-darken5: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 5%));
     --bgcolor-sidebar-context-darken12: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 12%));
-    --color-sidebar-context-lighten10: hsl(from var(--color-sidebar-context) h s calc(l 10%));
-    --color-sidebar-context-lighten8: hsl(from var(--color-sidebar-context) h s calc(l 8%));
+    --color-sidebar-context-lighten10: hsl(from var(--color-sidebar-context) h s calc(l + 10%));
+    --color-sidebar-context-lighten8: hsl(from var(--color-sidebar-context) h s calc(l + 8%));
     --bgcolor-sidebar-context-darken12: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 15%));
     --bgcolor-sidebar-context-darken12: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 24%));
     @include override-list-group-item-for-pagetree(
@@ -247,17 +251,18 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  * GROWI page list
  */
 .page-list {
+  --color-global-lighten10:hsl(from var(--color-global) h s calc(l + 10%));
   .page-list-ul {
     > li {
       > span.page-list-meta {
-        color: hsl(from var(--color-global) h s calc(l 10%));
+        color: var(--color-global-lighten10);
       }
     }
   }
   // List group
   .list-group-item {
     .page-list-snippet {
-      color: hsl(from var(--color-global) h s calc(l 10%));
+      color: var(--color-global-lighten10);
     }
   }
 }
@@ -266,8 +271,9 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  * GROWI ToC
  */
 .revision-toc-content {
+  --bgcolor-global-darken20: hsl(from var(--bgcolor-global) h s calc(l - 20%));
   ::marker {
-    color: hsl(from var(--bgcolor-global) h s calc(l - 20%));
+    color: var(--bgcolor-global-darken20);
   }
 }
 
@@ -446,5 +452,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  * skeleton
  */
 .grw-skeleton {
-  background-color: hsl(from var(--bgcolor-subnav) h s calc(l 10%));
+  --bgcolor-subnav-lighten10 : hsl(from var(--bgcolor-subnav) h s calc(l + 10%));
+  background-color: var(--bgcolor-subnav-lighten10);
 }
+

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

@@ -22,7 +22,6 @@ $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;
-$bgcolor-page-list-group-item-active: var(--bgcolor-page-list-group-item-active,hsl(from var(--bgcolor-global) h s calc(l 76%)));
 $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));
 
@@ -492,6 +491,7 @@ ul.pagination {
       }
 
       &.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;
@@ -505,8 +505,9 @@ ul.pagination {
  * GROWI Editor
  */
 .layout-root.editing {
+  --bgcolor-global-darken2: hsl(from var(--bgcolor-global) h s calc(l - 2%));
   .main {
-    background-color: hsl(from var(--bgcolor-global) h s calc(l - 2%));
+    background-color: var(--bgcolor-global-darken2);
 
     .page-editor-editor-container {
       border-right-color: $border-color-theme;
@@ -587,10 +588,11 @@ body.editing-sidebar {
     }
 
     .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 hsl(from var(--bgcolor-global) h s calc(l - 4%));
-        border-bottom-color: hsl(from var(--bgcolor-global) h s calc(l - 4%));
+        border-bottom: solid 1px var(--border-bottom-color);
+        border-bottom-color: var(--border-bottom-color);
       }
     }
   }
@@ -625,7 +627,8 @@ mark.rbt-highlight-text {
  * GROWI page content footer
  */
 .page-content-footer {
-  background-color: hsl(from var(--bgcolor-global) h s calc(l - 2%));
+  --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;
 }
 

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

@@ -13,9 +13,11 @@
 
   &:disabled,
   &.disabled {
+    --btn-link-disabled-color: #{$btn-link-disabled-color};
     color: var(--btn-link-disabled-color);
     svg {
       fill: var(--btn-link-disabled-color);
     }
   }
 }
+

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

@@ -10,6 +10,7 @@
 }
 
 .dropdown-item {
+  --bgcolor-dropdown-link-hover: hsl(from var(--bgcolor-global) h s calc(l + 15%));
   color: $dropdown-link-color;
   svg {
     fill: $dropdown-link-color;
@@ -21,7 +22,7 @@
       fill: $dropdown-link-hover-color;
     }
 
-    @include gradient-bg($dropdown-link-hover-bg);
+    @include gradient-bg(var(--dropdown-link-hover-bg));
   }
 
   &:active,

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

@@ -36,17 +36,17 @@
   --color-link: #1938ba;
   --link-color: var(--color-link);
   --link-hover-color: var(--color-link-hover);
-  --color-link-hover: hsl(from var(--color-link) h s calc(l 20%));
+  --color-link-hover: hsl(from var(--color-link) h s calc(l + 20%));
   --color-link-wiki: var(--color-link);
-  --color-link-wiki-hover:  hsl(from var(--color-link-wiki) h s calc(l 20%));
-  --color-link-nabvar: #{gray-500};
+  --color-link-wiki-hover:  hsl(from var(--color-link-wiki) h s calc(l + 20%));
+  --color-link-nabvar: #{$gray-500};
   $color-inline-code: darken($red, 15%); // optional
 
   // List Group colors
   --color-list: var(--color-global); // optional
-  // --bgcolor-list: var(--bgcolor-global); // optional
+  --bgcolor-list: var(--bgcolor-global); // optional
   // --color-list-hover: va(--color-global); // optional
-  --bgcolor-list-hover: hsl(from var(--bgcolor-global) h s calc(l 3%)); // optional
+  --bgcolor-list-hover: hsl(from var(--bgcolor-global) h s calc(l + 3%)); // optional
   // --color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
 
@@ -64,12 +64,12 @@
 
   // Logo colors
   --bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark: lighten(desaturate(var(--bgcolor-navbar), 10%), 15%);
+  --fillcolor-logo-mark:hsl(from var(--bgcolor-navbar) h s calc(l + 15%));
 
   // Sidebar
   --bgcolor-sidebar: var(--primary);
   $bgcolor-sidebar: #122c55;
-  $bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
+  --bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
   $color-resize-button: $color-reversal;
@@ -80,10 +80,10 @@
   --color-sidebar-context: var(--color-global);
 
   // Sidebar list group
-  --bgcolor-sidebar-list-group: #{gray-50}; // optional
+  --bgcolor-sidebar-list-group: #{$gray-50}; // optional
 
   // Subnavigation
-  // --bgcolor-subnav: #fafafa; // optional
+  --bgcolor-subnav: hsl(from var(--bgcolor-global) h s calc(l - 3%));
 
   // Tabs
   // $color-nav-tabs-link-active: #; //optional
@@ -137,17 +137,17 @@
   $color-reversal: $gray-900;
   // $color-header: desaturate($primary, 20%);
   --color-link: #7b9ad5;
-  --color-link-hover: hsl(from var(--color-link) h s calc(l 10%));
+  --color-link-hover: hsl(from var(--color-link) h s calc(l + 10%));
   --color-link-wiki: var(--color-link);
-  --color-link-wiki-hover: hsl(from var(--color-link-wiki) h s calc(l 10%));
+  --color-link-wiki-hover: hsl(from var(--color-link-wiki) h s calc(l + 10%));
   --color-link-nabvar: #a7a7a7;
   --color-inline-code: #c7254e; // optional
 
   // List Group colors
   --color-list: var(--color-global); // optional
-  // --bgcolor-list: var(--bgcolor-global); // optional
+  --bgcolor-list: var(--bgcolor-global); // optional
   // --color-list-hover: va(--color-global); // optional
-  --bgcolor-list-hover: hsl(from var(--bgcolor-global) h s calc(l 3%)); // optional
+  --bgcolor-list-hover: hsl(from var(--bgcolor-global) h s calc(l + 3%)); // optional
   // --color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
 
@@ -164,13 +164,13 @@
   $border-image-navbar: linear-gradient(to right, #44bfe3 0%, #b04aff 50%, #ff1794 100%);
 
   // Logo colors
-  $bgcolor-logo: var(--bgcolor-navbar);
+  --bgcolor-logo: var(--bgcolor-navbar);
   --fillcolor-logo-mark: #{$gray-700};
 
   // Sidebar
   --bgcolor-sidebar: #122c55;
   $bgcolor-sidebar: #122c55;
-  $bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
+  --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;
@@ -184,7 +184,7 @@
   --bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Subnavigation
-  --bgcolor-subnav: hsl(from var(--bgcolor-global) h s calc(l 4%)); // optional
+  --bgcolor-subnav: hsl(from var(--bgcolor-global) h s calc(l - 3%)); // optional
 
   // Tabs
   $bordercolor-nav-tabs: $gray-700; // optional

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

@@ -5,18 +5,18 @@
 
 // determine optional variables
 $color-list-active: $color-reversal !default;
-$bgcolor-list-active: $primary !default;
 $bgcolor-table: #343a40 !default;
 $border-color-table: lighten($bgcolor-table, 7.5%) !default;
 $color-table-hover: rgba(white, 0.075) !default;
 $bgcolor-table-hover: lighten($bgcolor-table, 7.5%) !default;
+$bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
 $color-tags: #949494 !default;
 $bgcolor-tags: $dark !default;
 $border-color-global: $gray-500 !default;
 $border-color-toc: $border-color-global !default;
 $color-dropdown-link-hover: $light !default;
+$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover);
 $color-dropdown-link-active: $light !default;
-$bgcolor-dropdown-link-active: $primary !default;
 
 // override bootstrap variables
 $text-muted: $gray-550;
@@ -31,24 +31,6 @@ $border-color: $border-color-global;
 @import './reboot-bootstrap-tables';
 @import './reboot-bootstrap-dropdown';
 
-// List Group
-/*
-  * Form
-  */
-input.form-control,
-select.form-control,
-select.custom-select,
-textarea.form-control {
-  border-color: $border-color-global;
-  &:focus {
-  }
-  // FIXME: accent color
-  // border: 1px solid darken($border, 30%);
-}
-
-.form-control[disabled],
-.form-control[readonly] {
-}
 
 .input-group > .input-group-prepend > .input-group-text {
   color: theme-color('light');
@@ -64,9 +46,6 @@ textarea.form-control {
   border-color: $border-color-global;
 }
 
-label.custom-control-label::before {
-}
-
 /*
  * Table
  */
@@ -194,73 +173,36 @@ ul.pagination {
 /*
  * GROWI page list
  */
-.page-list {
-  .page-list-ul {
-    > li {
-      > span.page-list-meta {
-      }
-    }
-  }
-
-  // List group
-  .list-group-item {
-    &.active {
-    }
-    .list-group-item-action:hover {
-    }
-    .page-list-snippet {
-    }
-  }
-}
 
 /*
  * GROWI ToC
  */
-.revision-toc-content {
-  ::marker {
-  }
-}
 
 /*
  * GROWI subnavigation
  */
-.grw-subnav {
-}
-
-.grw-subnav-fixed-container .grw-subnav {
-}
 
-.grw-page-editor-mode-manager {
-  .btn-outline-primary {
-    &:hover {
-      background-color: $gray-700;
-    }
-  }
-}
 
 // Search drop down
-#search-typeahead-asynctypeahead {
-  background-color: var(--bgcolor-global);
-  .table {
-    background-color: transparent;
-  }
-}
 
 /*
  * GROWI Sidebar
  */
 .grw-sidebar {
-  .grw-pagetree-triangle-btn {
-    @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
-  }
-  .btn-page-item-control {
-    @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
-    @include hover() {
+  // List
+
+  // Pagetree
+  .grw-pagetree {
+    .grw-pagetree-triangle-btn {
+      @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
     }
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active {
+    .btn-page-item-control {
+      @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active {
+      }
+      box-shadow: none !important;
     }
-    box-shadow: none !important;
   }
 }
 
@@ -295,33 +237,22 @@ ul.pagination {
     &::before {
       border-top-color: $secondary;
     }
-
-    &::after {
-    }
   }
   &.bs-popover-bottom .arrow {
     &::before {
       border-bottom-color: $secondary;
     }
 
-    &::after {
-    }
   }
   &.bs-popover-right .arrow {
     &::before {
       border-right-color: $secondary;
     }
-
-    &::after {
-    }
   }
   &.bs-popover-left .arrow {
     &::before {
       border-left-color: $secondary;
     }
-
-    &::after {
-    }
   }
 }
 
@@ -339,9 +270,6 @@ ul.pagination {
   background-color: transparent;
   $color-slack: #4b144c;
 
-  .form-control {
-  }
-
   .custom-control-label {
     &::before {
       background-color: $secondary;
@@ -405,6 +333,7 @@ ul.pagination {
 }
 
 .page-comments-row {
+  background: var(--bgcolor-subnav);
 }
 
 /*

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

@@ -13,7 +13,6 @@ $color-tags: $secondary !default;
 $bgcolor-tags: $gray-200 !default;
 $border-color-global: $gray-300 !default;
 $border-color-toc: $border-color-global !default;
-$color-dropdown-link-active: $color-reversal !default;
 $bgcolor-dropdown-link-active: $primary !default;
 
 // override bootstrap variables
@@ -33,22 +32,11 @@ $border-color: $border-color-global;
 /*
  * Form
  */
-.form-control {
-}
-
-.form-control::placeholder {
-}
 
-.form-control[disabled],
-.form-control[readonly] {
-}
 
 /*
  * card
  */
-.card.card-disabled {
-  border-color: $gray-200;
-}
 
 /*
  * GROWI Login form
@@ -132,11 +120,6 @@ $border-color: $border-color-global;
 /*
  * GROWI subnavigation
  */
-.grw-subnav {
-}
-
-.grw-subnav-fixed-container .grw-subnav {
-}
 
 .grw-page-editor-mode-manager {
   .btn-outline-primary {
@@ -156,7 +139,6 @@ $border-color: $border-color-global;
  * GROWI Sidebar
  */
 .grw-sidebar {
-  // List
   // sidebar-centent-bg
   .grw-navigation-wrap {
     // Drop a shadow on the light theme. The dark theme makes '$ bgcolor-sidebar-context' brighter than the body.
@@ -168,10 +150,6 @@ $border-color: $border-color-global;
       @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
     }
   }
-  .private-legacy-pages-link {
-    &:hover {
-    }
-  }
 }
 
 .btn.btn-page-item-control {
@@ -189,27 +167,10 @@ $border-color: $border-color-global;
 /*
  * GROWI page list
  */
-.page-list {
-  .page-list-ul {
-    > li {
-      > span.page-list-meta {
-      }
-    }
-  }
-  // List group
-  .list-group-item {
-    .page-list-snippet {
-    }
-  }
-}
 
 /*
  * GROWI ToC
  */
-.revision-toc-content {
-  ::marker {
-  }
-}
 
 /*
  * GROWI Editor
@@ -321,9 +282,6 @@ $border-color: $border-color-global;
   }
 }
 
-.page-comments-row {
-}
-
 /*
  * GROWI tags
  */
@@ -384,5 +342,4 @@ $border-color: $border-color-global;
 /*
  * skeleton
  */
-.grw-skeleton {
-}
+

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

@@ -12,19 +12,30 @@
 $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';
@@ -64,6 +75,7 @@ code:not([class^='language-']) {
     fill: $secondary;
   }
   .grw-color-mode-icon svg {
+    fill: var(--color-global);
   }
   .grw-color-mode-icon-muted svg {
     fill: $secondary;
@@ -77,10 +89,12 @@ code:not([class^='language-']) {
 
 // Tabs
 .nav.nav-tabs .nav-link.active {
+  color: var(--color-link);
   background: transparent;
 
   &:hover,
   &:focus {
+    color: var(--color-link-hover);
   }
 }
 
@@ -132,6 +146,10 @@ ul.pagination {
     transition: fill 0.8s ease-out;
   }
 
+  svg {
+    fill: var(--fillcolor-logo-mark);
+  }
+
   &:hover {
     svg {
       .group1 {
@@ -146,13 +164,16 @@ ul.pagination {
 }
 
 .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);
   }
 }
 
@@ -163,11 +184,13 @@ ul.pagination {
 
   // 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;
@@ -191,10 +214,13 @@ ul.pagination {
   }
   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);
     }
   }
 
@@ -217,6 +243,8 @@ ul.pagination {
       }
       // fukidashi
       &:after {
+        border-right-color: var(--bgcolor-sidebar-context)
+        ;
       }
     }
   }
@@ -232,16 +260,20 @@ ul.pagination {
       }
 
       .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);
       }
     }
   }
@@ -284,6 +316,7 @@ ul.pagination {
  * Icon
  */
 .editor-container .navbar-editor svg {
+  fill: var(--color-editor-icons);
 }
 
 // page preview button in link form
@@ -310,6 +343,7 @@ ul.pagination {
   }
 
   .modal-content {
+    background-color: var(--bgcolor-global);
   }
 
   .modal-footer {
@@ -321,10 +355,13 @@ ul.pagination {
   .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
@@ -354,6 +391,8 @@ ul.pagination {
  * 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);
 }
@@ -406,17 +445,21 @@ ul.pagination {
   }
 
   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);
     }
   }
 }
@@ -430,19 +473,27 @@ ul.pagination {
     .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;
         }
       }
@@ -454,17 +505,21 @@ ul.pagination {
  * 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);
     }
   }
 }
@@ -474,6 +529,8 @@ ul.pagination {
  */
 body.editing-sidebar {
   .page-editor-preview-body {
+    color: var(--color-sidebar-context);
+    background-color: var(--bgcolor-sidebar-context);
   }
 }
 
@@ -484,8 +541,10 @@ body.editing-sidebar {
   .desktop-preview,
   .tablet-preview,
   .mobile-preview {
+    background: var(--bgcolor-global);
   }
   .grid-edit-border-for-each-cols {
+    border: 2px solid var(--bgcolor-global);
   }
 }
 
@@ -493,6 +552,14 @@ body.editing-sidebar {
   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;
 }
@@ -501,8 +568,10 @@ body.editing-sidebar {
  * GROWI comment
  */
 .page-comment-meta .page-comment-revision svg {
+  fill: var(--color-link);
 
   &:hover {
+    fill: var(--color-link-hover);
   }
 }
 
@@ -512,13 +581,18 @@ body.editing-sidebar {
 .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);
       }
     }
   }
@@ -529,8 +603,10 @@ body.editing-sidebar {
  */
 .search-result-base {
   .grw-search-page-nav {
+    background-color: var(--bgcolor-subnav);
   }
   .search-control {
+    background-color: var(--bgcolor-global);
   }
   .page-list {
     .highlighted-keyword {
@@ -551,6 +627,8 @@ mark.rbt-highlight-text {
  * 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;
 }
 
@@ -569,6 +647,7 @@ mark.rbt-highlight-text {
   #themeOptions {
     .theme-option-container.active {
       .theme-option-name {
+        color: var(--color-global);
       }
       a {
         background-color: $color-theme-color-box;
@@ -582,6 +661,7 @@ mark.rbt-highlight-text {
  * HackMd
  */
 .bg-box {
+  background-color: var(--bgcolor-global);
 }
 
 .grw-fab {

packages/preset-themes/src/styles/theme/_reboot-bootstrap-buttons.scss

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

packages/preset-themes/src/styles/theme/_reboot-bootstrap-dropdown.scss

@@ -10,6 +10,7 @@
 }
 
 .dropdown-item {
+  --bgcolor-dropdown-link-hover: hsl(from var(--bgcolor-global) h s calc(l + 15%));
   color: $dropdown-link-color;
   svg {
     fill: $dropdown-link-color;
@@ -21,7 +22,7 @@
       fill: $dropdown-link-hover-color;
     }
 
-    @include gradient-bg($dropdown-link-hover-bg);
+    @include gradient-bg(var(--dropdown-link-hover-bg));
   }
 
   &:active,