fix reboot-bootstrap buttons scss

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

@@ -10,7 +10,7 @@
 }
 
 .dropdown-item {
-  --bgcolor-dropdown-link-hover: hsl(from var(--bgcolor-global) h s calc(l + 15%));
+  --bgcolor-dropdown-link-hover: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 15%));
   color: $dropdown-link-color;
   svg {
     fill: $dropdown-link-color;

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

@@ -17,11 +17,19 @@
 //== Light Mode
 //
 :root[data-theme='light'] {
-  --primary: #122c55;
+  --primary: hsl(var(--primary-hs),var(--primary-l));
+  --primary-hs: 216.7,65%;
+  --primary-l: 20.2%;
+  --accent: #209fd8;
+  --accent-hs: 216.7,65%;
+  --accent-l: 20.2%;
   $accent: #209fd8;
 
+
   // Background colors
-  --bgcolor-global: white;
+  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
+  --bgcolor-global-hs: 0,0%;
+  --bgcolor-global-l: 100%;
   --body-bg: var(--bgcolor-global);
   $bgcolor-inline-code: $gray-100; //optional
   --bgcolor-card: #{$gray-50};
@@ -29,16 +37,22 @@
   //$bgcolor-keyword-highlighted: $grw-marker-yellow;
 
   // Font colors
-  --color-global: #112744;
+  --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: #1938ba;
+  --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-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-wiki-hs: var(--color-link-hs);
+  --color-link-wiki-l: var(--color-link-l);
+  --color-link-wiki-hover: hsl(var(--color-link-wiki-hs),calc(var(--color-link-wiki-l) + 20%));
   --color-link-nabvar: #{$gray-500};
   $color-inline-code: darken($red, 15%); // optional
 
@@ -46,7 +60,7 @@
   --color-list: var(--color-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(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 3%));// optional
   // --color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
 
@@ -59,16 +73,20 @@
 
   // Navbar
   --bgcolor-navbar: #{$gray-900};
+  --bgcolor-navbar-h:0;
+  --bgcolor-navbar-s:0%;
+  --bgcolor-navbar-l:12.94%;
   $bgcolor-search-top-dropdown: $accent;
   $border-image-navbar: linear-gradient(to right, #36c9ff 0%, #36c9ff 33%, #7926ff 66%, #ff2eff 100%);
 
   // Logo colors
   --bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark:hsl(from var(--bgcolor-navbar) h s calc(l + 15%));
-
+  --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 20%),calc(var(--bgcolor-navbar-l) + 15%));
   // Sidebar
   --bgcolor-sidebar: var(--primary);
   $bgcolor-sidebar: #122c55;
+  --bgcolor-sidebar-hs: var(--primary-hs);
+  --bgcolor-sidebar-l: var(--primary-l);
   --bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
@@ -78,13 +96,13 @@
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
   // Sidebar contents
   --color-sidebar-context: var(--color-global);
-
+  --color-sidebar-context-hs: var(--color-global-hs);
+  --color-sidebar-context-l: var(--color-global-l);
   // Sidebar list group
   --bgcolor-sidebar-list-group: #{$gray-50}; // optional
 
   // Subnavigation
-  --bgcolor-subnav: hsl(from var(--bgcolor-global) h s calc(l - 3%));
-
+  --bgcolor-subnav: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 3%));
   // Tabs
   // $color-nav-tabs-link-active: #; //optional
   // $bordercolor-nav-tabs-hover: # # $bordercolor-nav-tabs; // optional
@@ -109,6 +127,7 @@
 
   @import './theme/apply-colors';
   @import './theme/apply-colors-light';
+  // @import '/packages/app/src/styles/theme/apply-colors-light-new';
 
   // Button
   .btn-group.grw-page-editor-mode-manager {
@@ -122,24 +141,36 @@
 //
 :root[data-theme='dark'] {
   --primary: #115cd3;
+  --primary-hs: 216.8,85.1%;
+  --prymary-l: 44.7;
   $accent: #db00c2;
 
   // Background colors
   --bgcolor-global: #131418;
+  --bgcolor-global-hs: 228,11.6%;
+  --bgcolor-global-l: 9.4%;
+  --body-bg: var(--bgcolor-global);
   $bgcolor-inline-code: #1f1f22; //optional
-  --bgcolor-card: hsl(from var(--bgcolor-global) h s calc(l - 5%));
+  --bgcolor-card: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 5%));
   $bgcolor-blinked-section: rgba($primary, 0.4);
   $bgcolor-keyword-highlighted: darken($grw-marker-red, 30%);
 
   // Font colors
   --color-global: #{$gray-400};
-  $color-global: var(--color-global);
+  --color-global-hs: 0,0%;
+  --color-global-l: 74%;
   $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%));
+  --link-color: var(--color-link);
+  --color-link-hs: 219.3,51.7%;
+  --color-link-l: 65.9%;
+  --color-link-hover: hsl(var(--color-link-hs), calc(var(--color-link-l) + 10%));
+  --link-hover-color: var(--color-link-hover);
   --color-link-wiki: var(--color-link);
-  --color-link-wiki-hover: hsl(from var(--color-link-wiki) h s calc(l + 10%));
+  --color-link-wiki-hs: var(--color-link-hs);
+  --color-link-wiki-l: var(--color-link-l);
+  --color-link-wiki-hover: hsl(var(--color-link-wiki-hs), calc(var(--color-link-wiki-l) + 10%));
   --color-link-nabvar: #a7a7a7;
   --color-inline-code: #c7254e; // optional
 
@@ -147,7 +178,7 @@
   --color-list: var(--color-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(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 3%)); // optional
   // --color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
 
@@ -168,8 +199,10 @@
   --fillcolor-logo-mark: #{$gray-700};
 
   // Sidebar
-  --bgcolor-sidebar: #122c55;
+  --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(---gcolor-sidebar-l));
   $bgcolor-sidebar: #122c55;
+  --bgcolor-sidebar-hs: 216.7,65%;
+  --bgcolor-sidebar-l: 33.3%;
   --bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
@@ -179,12 +212,13 @@
   $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
   // Sidebar contents
   --color-sidebar-context: var(--color-global);
-
+  --color-sidebar-context-hs: var(--color-global-hs);
+  --color-sidebar-context-l: var(--color-global-l);
   // Sidebar list group
   --bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Subnavigation
-  --bgcolor-subnav: hsl(from var(--bgcolor-global) h s calc(l - 3%)); // optional
+  --bgcolor-subnav: --bgcolor-list-hover: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 3%));  // optional
 
   // Tabs
   $bordercolor-nav-tabs: $gray-700; // optional
@@ -209,6 +243,8 @@
   @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-dark.scss

@@ -4,7 +4,13 @@
 @use './mixins/count-badge';
 
 // determine optional variables
+$color-list: var(--color-list,var(--color-global));
+$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);
+$color-table: var(--color-table,white);
 $bgcolor-table: #343a40 !default;
 $border-color-table: lighten($bgcolor-table, 7.5%) !default;
 $color-table-hover: rgba(white, 0.075) !default;
@@ -14,16 +20,29 @@ $color-tags: #949494 !default;
 $bgcolor-tags: $dark !default;
 $border-color-global: $gray-500 !default;
 $border-color-toc: $border-color-global !default;
+$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);
 $color-dropdown-link-active: $light !default;
+$bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
 
 // override bootstrap variables
 $text-muted: $gray-550;
+$table-dark-color: var(--color-table);
 $table-dark-bg: $bgcolor-table;
 $table-dark-border-color: $border-color-table;
+$table-dark-hover-color: var(--color-table-hover);
 $table-dark-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
+$dropdown-color: var(--color-dropdown);
+$dropdown-bg: var(--bgcolor-dropdown);
+$dropdown-link-color: var(--color-dropdown-link);
+$dropdown-link-hover-color: var(--color-dropdown-link-hover);
+$dropdown-link-hover-bg: var(--bgcolor-dropdown-link-hover);
+$dropdown-link-active-color: var(--color-dropdown-link-active);
+$dropdown-link-active-bg: bar(--bgcolor-dropdown-link-active);
 
 @import './mixins/list-group';
 @import './reboot-bootstrap-text';
@@ -31,6 +50,37 @@ $border-color: $border-color-global;
 @import './reboot-bootstrap-tables';
 @import './reboot-bootstrap-dropdown';
 
+// List Group
+@include override-list-group-item(
+  var(--color-list),
+  var(--bgcolor-sidebar-list-group),
+  var(--color-list-hover),
+  var(--bgcolor-list-hover),
+  var(--color-list-active),
+  var(--bgcolor-list-active)
+);
+/*
+  * Form
+  */
+input.form-control,
+select.form-control,
+select.custom-select,
+textarea.form-control {
+  color: var(--color-global);
+  background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 5%));
+  border-color: $border-color-global;
+  &:focus {
+    background-color: var(--bgcolor-global);
+  }
+  // FIXME: accent color
+  // border: 1px solid darken($border, 30%);
+}
+
+.form-control[disabled],
+.form-control[readonly] {
+  color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 10%));
+  background-color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 5%));
+}
 
 .input-group > .input-group-prepend > .input-group-text {
   color: theme-color('light');
@@ -46,6 +96,10 @@ $border-color: $border-color-global;
   border-color: $border-color-global;
 }
 
+label.custom-control-label::before {
+  background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 5%));
+}
+
 /*
  * Table
  */
@@ -173,37 +227,113 @@ ul.pagination {
 /*
  * GROWI page list
  */
+.page-list {
+  .page-list-ul {
+    > li {
+      > span.page-list-meta {
+        color: hsl(var(--color-global-hs),calc(var(--color-global-l) - 10%));
+      }
+    }
+  }
+
+  // List group
+  .list-group-item {
+    &.active {
+      background-color: hsl(var(--color-global-hs),calc(var(--color-global-l) - 10%));
+    }
+    .list-group-item-action:hover {
+      background-color: var(--bgcolor-list-hover);
+    }
+    .page-list-snippet {
+      color: hsl(var(--color-global-hs),calc(var(--color-global-l) - 10%));
+    }
+  }
+}
 
 /*
  * GROWI ToC
  */
+.revision-toc-content {
+  ::marker {
+    color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 30%));
+  }
+}
 
 /*
  * GROWI subnavigation
  */
+.grw-subnav {
+  background-color: var(--bgcolor-subnav);
+}
 
+.grw-subnav-fixed-container .grw-subnav {
+  background-color: var(--bgcolor-subnav); opacity:0.85;
+}
+
+.grw-page-editor-mode-manager {
+  .btn-outline-primary {
+    &:hover {
+      color: var(--primary);
+      background-color: $gray-700;
+    }
+  }
+}
 
 // Search drop down
+#search-typeahead-asynctypeahead {
+  background-color: var(--bgcolor-global);
+  .table {
+    background-color: transparent;
+  }
+}
 
 /*
  * GROWI Sidebar
  */
 .grw-sidebar {
   // List
-
+  @include override-list-group-item(
+    var(--color-list),
+    var(--bgcolor-sidebar-list-group),
+    var(--color-list-hover),
+    var(--bgcolor-list-hover),
+    var(--color-list-active),
+    var(--bgcolor-list-active)
+  );
   // Pagetree
   .grw-pagetree {
+    --bgcolor-sidebar-context: hsl(var(--primary-hs),calc(var(--primary-l) + 77%));
+    --bgcolor-sidebar-context-hs: var(--primary-hs);
+    --bgcolor-sidebar-context-l: calc(var(--primary-l) + 77%);
+    @include override-list-group-item-for-pagetree(
+      var(--color-sidebar-context),
+      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 8%)),
+      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 15%)),
+      hsl(var(--color-sidebar-context-hs),calc(var(--color-sidebar-context-l) - 15%)),
+      hsl(var(--color-sidebar-context-hs),calc(var(--color-sidebar-context-l) - 10%)),
+      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 18%)),
+      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 24%))
+    );
     .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() {
+        background-color: var(--bgcolor-sidebar-context-lighten20);
+      }
       &:not(:disabled):not(.disabled):active,
       &:not(:disabled):not(.disabled).active {
+        background-color: var(--bgcolor-sidebar-context-lighten34);
       }
       box-shadow: none !important;
     }
   }
+  .private-legacy-pages-link {
+    &:hover {
+      background: var(--bgcolor-list-hover);
+    }
+  }
 }
 
 .btn.btn-page-item-control {
@@ -223,6 +353,7 @@ ul.pagination {
  * Popover
  */
 .popover {
+  background-color: var(--bgcolor-global);
   border-color: $secondary;
   .popover-header {
     color: $white;
@@ -237,22 +368,37 @@ ul.pagination {
     &::before {
       border-top-color: $secondary;
     }
+
+    &::after {
+      border-top-color: var(--bgcolor-global);
+    }
   }
   &.bs-popover-bottom .arrow {
     &::before {
       border-bottom-color: $secondary;
     }
 
+    &::after {
+      border-bottom-color: var(--bgcolor-global);
+    }
   }
   &.bs-popover-right .arrow {
     &::before {
       border-right-color: $secondary;
     }
+
+    &::after {
+      border-right-color: var(--bgcolor-global);
+    }
   }
   &.bs-popover-left .arrow {
     &::before {
       border-left-color: $secondary;
     }
+
+    &::after {
+      border-left-color: var(--bgcolor-global);
+    }
   }
 }
 
@@ -270,6 +416,10 @@ ul.pagination {
   background-color: transparent;
   $color-slack: #4b144c;
 
+  .form-control {
+    background: var(--bgcolor-global);
+  }
+
   .custom-control-label {
     &::before {
       background-color: $secondary;

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

@@ -4,23 +4,42 @@
 @use './mixins/count-badge';
 
 // determine optional variables
+$color-list: var(--color-list,var(--color-global));
+$bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
+$color-list-hover: var(--color-list-hover,var(--color-global));
 $bgcolor-list-active: lighten($primary, 65%) !default;
 $color-list-active: color-yiq($bgcolor-list-active) !default;
+$color-table: var(--color-table,var(--color-global));
 $bgcolor-table: null !default;
 $border-color-table: $gray-200 !default;
+$color-table-hover: var(--color-table-hover,var(--color-table));
 $bgcolor-table-hover: rgba(black, 0.075) !default;
+$bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
 $color-tags: $secondary !default;
 $bgcolor-tags: $gray-200 !default;
 $border-color-global: $gray-300 !default;
 $border-color-toc: $border-color-global !default;
+$color-dropdown: var(--color-dropdown,var(--color-global));
+$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
 $text-muted: $gray-500;
+$table-color: var(--color-table);
 $table-bg: $bgcolor-table;
 $table-border-color: $border-color-table;
+$table-hover-color: var(--color-table-hover);
 $table-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
+$dropdown-color: var(--color-dropdown);
+$dropdown-link-color: var(--color-dropdown-link);
+$dropdown-link-hover-color: var(--color-dropdown-link-hover);
+$dropdown-link-active-color: var(--color-dropdown-link-active);
+$dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
 
 @import './mixins/list-group';
 @import './reboot-bootstrap-text';
@@ -29,14 +48,38 @@ $border-color: $border-color-global;
 @import './reboot-bootstrap-dropdown';
 
 // List Group
+@include override-list-group-item(
+  var(--color-list),
+  var(--bgcolor-sidebar-list-group),
+  var(--color-list-hover),
+  var(--bgcolor-list-hover),
+  var(--color-list-active),
+  var(--bgcolor-list-active)
+);
 /*
  * Form
  */
+.form-control {
+  background-color: var(--bgcolor-global);
+}
+
+.form-control::placeholder {
+  color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 20%));
+}
 
+.form-control[disabled],
+.form-control[readonly] {
+  color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 10%));
+  background-color: hsl(var(--color-global-hs),calc(var(--color-global-l) - 5%));
+}
 
 /*
  * card
  */
+.card.card-disabled {
+  background-color: var(--background-color);
+  border-color: $gray-200;
+}
 
 /*
  * GROWI Login form
@@ -120,6 +163,13 @@ $border-color: $border-color-global;
 /*
  * GROWI subnavigation
  */
+.grw-subnav {
+  background-color: var(--bgcolor-subnav);
+}
+
+.grw-subnav-fixed-container .grw-subnav {
+  background-color: var(--bgcolor-subnav); opacity:0.85;
+}
 
 .grw-page-editor-mode-manager {
   .btn-outline-primary {
@@ -139,6 +189,18 @@ $border-color: $border-color-global;
  * GROWI Sidebar
  */
 .grw-sidebar {
+  --bgcolor-sidebar-context: hsl(var(--primary-hs),calc(var(--primary-l) + 77%));
+  --bgcolor-sidebar-context-hs: var(--primary-hs);
+  --bgcolor-sidebar-context-l: calc(var(--primary-l) + 77%);
+  // List
+  @include override-list-group-item(
+    var(--color-list),
+    var(--bgcolor-sidebar-list-group),
+    var(--color-list-hover),
+    var(--bgcolor-list-hover),
+    var(--color-list-active),
+    var(--bgcolor-list-active)
+  );
   // sidebar-centent-bg
   .grw-navigation-wrap {
     // Drop a shadow on the light theme. The dark theme makes '$ bgcolor-sidebar-context' brighter than the body.
@@ -146,10 +208,24 @@ $border-color: $border-color-global;
   }
   // Pagetree
   .grw-pagetree {
+    @include override-list-group-item-for-pagetree(
+      var(--color-sidebar-context),
+      hsl(var(--bgcolor-sidebar-contexths),calc(var(--bgcolor-sidebar-context-l) - 5%)),
+      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) - 12%)),
+      hsl(var(--color-sidebar-context-hs),calc(var(--color-sidebar-context-l) + 10%)),
+      hsl(var(--color-sidebar-context-hs),calc(var(--color-sidebar-context-l) + 8%)),
+      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) - 15%)),
+      hsl(var(--bgcolor-sidebar-context-h-s),calc(var(--bgcolor-sidebar-context-l) - 24%))
+    );
     .grw-pagetree-triangle-btn {
       @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
     }
   }
+  .private-legacy-pages-link {
+    &:hover {
+      background: var(--bgcolor-list-hover);
+    }
+  }
 }
 
 .btn.btn-page-item-control {
@@ -167,10 +243,30 @@ $border-color: $border-color-global;
 /*
  * GROWI page list
  */
+.page-list {
+  .page-list-ul {
+    > li {
+      > span.page-list-meta {
+        color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 10%));
+      }
+    }
+  }
+  // List group
+  .list-group-item {
+    .page-list-snippet {
+      color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 10%));
+    }
+  }
+}
 
 /*
  * GROWI ToC
  */
+.revision-toc-content {
+  ::marker {
+    color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 20%));
+  }
+}
 
 /*
  * GROWI Editor
@@ -282,6 +378,10 @@ $border-color: $border-color-global;
   }
 }
 
+.page-comments-row {
+  background: var(--bgcolor-subnav);
+}
+
 /*
  * GROWI tags
  */
@@ -342,4 +442,7 @@ $border-color: $border-color-global;
 /*
  * skeleton
  */
+.grw-skeleton {
+  background-color: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 20%),calc(var(--bgcolor-navbar-l) + 10%));
+}
 

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

@@ -491,9 +491,8 @@ 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);
+          background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 76%));
           border-left-color: $primary;
         }
       }
@@ -505,9 +504,8 @@ 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);
+    background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 2%));
 
     .page-editor-editor-container {
       border-right-color: $border-color-theme;
@@ -588,11 +586,10 @@ 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 var(--border-bottom-color);
-        border-bottom-color: var(--border-bottom-color);
+        border-bottom: solid 1px hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 4%));
+        border-bottom-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 4%));
       }
     }
   }
@@ -627,8 +624,7 @@ 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);
+  background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 2%));
   border-top-color: $border-color-theme;
 }
 

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

@@ -10,7 +10,7 @@
 }
 
 .dropdown-item {
-  --bgcolor-dropdown-link-hover: hsl(from var(--bgcolor-global) h s calc(l + 15%));
+  --bgcolor-dropdown-link-hover: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 15%));
   color: $dropdown-link-color;
   svg {
     fill: $dropdown-link-color;