fix color variable

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

@@ -7,16 +7,15 @@
 $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-hover: var(--bgcolor-list-hover,var(--bgcolor-global-lighten8));
 $color-list-active: $color-reversal !default;
-$bgcolor-list-active: $primary !default;
-$bgcolor-subnav: var(--bgcolor-subnav,var(--bgcolor-global-lighten3));
+$bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
+$bgcolor-subnav: var(--bgcolor-subnav,hsl(from var(--bgcolor-global) h s calc(l 3%)));
 $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;
 $bgcolor-table-hover: lighten($bgcolor-table, 7.5%) !default;
-$bgcolor-sidebar-list-group: $bgcolor-list !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;
@@ -25,9 +24,9 @@ $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,var(--bgcolor-global-lighten15));
+$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,hsl(from var(--bgcolor-global) h s calc(l 15%)));
 $color-dropdown-link-active: $light !default;
-$bgcolor-dropdown-link-active: $primary !default;
+$bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
 
 // override bootstrap variables
 $text-muted: $gray-550;
@@ -52,8 +51,14 @@ $dropdown-link-active-bg: bar(--bgcolor-dropdown-link-active);
 @import './reboot-bootstrap-dropdown';
 
 // List Group
-@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
-
+@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
   */
@@ -62,7 +67,7 @@ select.form-control,
 select.custom-select,
 textarea.form-control {
   color: var(--color-global);
-  background-color: var(--bgcolor-global-darken5);
+  background-color: hsl(from var(--bgcolor-global) h s calc(l - 5%));
   border-color: $border-color-global;
   &:focus {
     background-color: var(--bgcolor-global);
@@ -73,8 +78,8 @@ textarea.form-control {
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: var(--color-global-lighten10);
-  background-color: var(--bgcolor-global-lighten5);
+  color: hsl(from var(--color-global) h s calc(l 10%));
+  background-color: hsl(from var(--bgcolor-global) h s calc(l 5%));
 }
 
 .input-group > .input-group-prepend > .input-group-text {
@@ -92,7 +97,7 @@ textarea.form-control {
 }
 
 label.custom-control-label::before {
-  background-color: var(--bgcolor-global-darken5);
+  background-color: hsl(from var(--bgcolor-global) h s calc(l - 5%));
 }
 
 /*
@@ -226,7 +231,7 @@ ul.pagination {
   .page-list-ul {
     > li {
       > span.page-list-meta {
-        color: var(--color-global-darken10);
+        color: hsl(from var(--color-global) h s calc(l - 10%));
       }
     }
   }
@@ -234,13 +239,13 @@ ul.pagination {
   // List group
   .list-group-item {
     &.active {
-      background-color: var(--bgcolor-global-lighten9) !important;
+      background-color: hsl(from var(--bgcolor-global) h s calc(l 9%));
     }
     .list-group-item-action:hover {
-      background-color: $bgcolor-list-hover;
+      background-color: var(--bgcolor-list-hover);
     }
     .page-list-snippet {
-      color: var(--color-global-darken10);
+      color: hsl(from var(--color-global) h s calc(l - 10%));
     }
   }
 }
@@ -250,7 +255,7 @@ ul.pagination {
  */
 .revision-toc-content {
   ::marker {
-    color: var(--bgcolor-global-lighten30);
+    color: hsl(from var(--bgcolor-global) h s calc(l 30%));;
   }
 }
 
@@ -268,7 +273,7 @@ ul.pagination {
 .grw-page-editor-mode-manager {
   .btn-outline-primary {
     &:hover {
-      color: $primary;
+      color: var(--primary);
       background-color: $gray-700;
     }
   }
@@ -287,18 +292,30 @@ ul.pagination {
  */
 .grw-sidebar {
   // List
-  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
-
+  @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-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%));
     @include override-list-group-item-for-pagetree(
-      $color-sidebar-context,
-      lighten($bgcolor-sidebar-context, 8%),
-      lighten($bgcolor-sidebar-context, 15%),
-      darken($color-sidebar-context, 15%),
-      darken($color-sidebar-context, 10%),
-      lighten($bgcolor-sidebar-context, 18%),
-      lighten($bgcolor-sidebar-context, 24%)
+      var(--color-sidebar-context),
+      var(--bgcolor-sidebar-context-lighten8),
+      var(--bgcolor-sidebar-context-lighten15),
+      var(--color-sidebar-context-darken15),
+      var(--color-sidebar-context-darken10),
+      var(--bgcolor-sidebar-context-lighten18),
+      var(--bgcolor-sidebar-context-lighten24)
     );
     .grw-pagetree-triangle-btn {
       @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
@@ -317,7 +334,7 @@ ul.pagination {
   }
   .private-legacy-pages-link {
     &:hover {
-      background: $bgcolor-list-hover;
+      background: var(--bgcolor-list-hover);
     }
   }
 }
@@ -534,5 +551,4 @@ ul.pagination {
  * skeleton
  */
 .grw-skeleton {
-  background-color: var(--bgcolor-subnav-lighten15);
 }

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

@@ -7,7 +7,6 @@
 $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-hover: lighten($primary, 72%) !default;
 $bgcolor-list-active: lighten($primary, 65%) !default;
 $color-list-active: color-yiq($bgcolor-list-active) !default;
 $color-table: var(--color-table,var(--color-global));
@@ -15,7 +14,7 @@ $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: $bgcolor-list !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;
@@ -26,6 +25,7 @@ $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;
 
+
 // override bootstrap variables
 $text-muted: $gray-500;
 $table-color: var(--color-table);
@@ -47,8 +47,14 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
 @import './reboot-bootstrap-dropdown';
 
 // List Group
-@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
-
+@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
  */
@@ -57,13 +63,13 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
 }
 
 .form-control::placeholder {
-  color: var(--bgcolor-global-darken20);
+  color: hsl(from var(--bgcolor-global) h s calc(l - 20%));
 }
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: var(--color-global-lighten10);
-  background-color: var(--bgcolor-global-darken5);
+  color: hsl(from var(--color-global) h s calc(l 10%));
+  background-color: hsl(from var(--bgcolor-global) h s calc(l - 5%));
 }
 
 /*
@@ -182,8 +188,16 @@ $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%));
   // List
-  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
+  @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.
@@ -191,14 +205,20 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
   }
   // Pagetree
   .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%));
+    --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(
-      $color-sidebar-context,
-      darken($bgcolor-sidebar-context, 5%),
-      darken($bgcolor-sidebar-context, 12%),
-      lighten($color-sidebar-context, 10%),
-      lighten($color-sidebar-context, 8%),
-      darken($bgcolor-sidebar-context, 15%),
-      darken($bgcolor-sidebar-context, 24%)
+      var(--color-sidebar-context),
+      var(--bgcolor-sidebar-context-darken5),
+      var(--bgcolor-sidebar-context-darken12),
+      var(--color-sidebar-context-lighten10),
+      var(--color-sidebar-context-lighten8),
+      var(--bgcolor-sidebar-context-darken15),
+      var(--bgcolor-sidebar-context-darken24)
     );
     .grw-pagetree-triangle-btn {
       @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
@@ -206,7 +226,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
   }
   .private-legacy-pages-link {
     &:hover {
-      background: $bgcolor-list-hover;
+      background: var(--bgcolor-list-hover);
     }
   }
 }
@@ -230,14 +250,14 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
   .page-list-ul {
     > li {
       > span.page-list-meta {
-        color: var(--color-global-lighten10);
+        color: hsl(from var(--color-global) h s calc(l 10%));
       }
     }
   }
   // List group
   .list-group-item {
     .page-list-snippet {
-      color: var(--color-global-lighten10);
+      color: hsl(from var(--color-global) h s calc(l 10%));
     }
   }
 }
@@ -247,7 +267,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  */
 .revision-toc-content {
   ::marker {
-    color: var(--bgcolor-global-darken20);
+    color: hsl(from var(--bgcolor-global) h s calc(l - 20%));
   }
 }
 
@@ -426,5 +446,5 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  * skeleton
  */
 .grw-skeleton {
-  background-color: var(--bgcolor-subnav-lighten10);
+  background-color: hsl(from var(--bgcolor-subnav) h s calc(l 10%));
 }

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

@@ -22,10 +22,9 @@ $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,var(--primary-lighten76));
-$color-page-list-group-item-meta: var(--color-page-list-group-item-meta,var(--gray-500));
+$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));
-$bgcolor-subnav: var(--bgcolor-subnav,var(--bgcolor-global-darken3));
 
 // override bootstrap variables
 $body-bg: var(--bgcolor-global);
@@ -149,7 +148,7 @@ ul.pagination {
   }
 
   svg {
-    fill: $fillcolor-logo-mark;
+    fill: var(--fillcolor-logo-mark);
   }
 
   &:hover {
@@ -166,7 +165,7 @@ ul.pagination {
 }
 
 .grw-navbar {
-  background: $bgcolor-navbar;
+  background: var(--bgcolor-navbar);
   .nav-item .nav-link {
     color: var(--color-link-nabvar);
   }
@@ -175,7 +174,7 @@ ul.pagination {
   border-image-slice: 1;
 
   .grw-app-title {
-    color: $fillcolor-logo-mark;
+    color: var(--fillcolor-logo-mark);
   }
 }
 
@@ -216,7 +215,7 @@ ul.pagination {
   }
   div.grw-global-navigation {
     > div {
-      background-color: $bgcolor-sidebar;
+      background-color: var(--bgcolor-sidebar);
     }
   }
   div.grw-contextual-navigation {
@@ -507,7 +506,7 @@ ul.pagination {
  */
 .layout-root.editing {
   .main {
-    background-color: var(--bgcolor-global-darken2);
+    background-color: hsl(from var(--bgcolor-global) h s calc(l - 2%));
 
     .page-editor-editor-container {
       border-right-color: $border-color-theme;
@@ -590,8 +589,8 @@ body.editing-sidebar {
     .nav.nav-tabs {
       > li > a.active {
         background: transparent;
-        border-bottom: solid 1px var(--bgcolor-global-darken4);
-        border-bottom-color: var(--bgcolor-global-darken4);
+        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%));
       }
     }
   }
@@ -626,7 +625,7 @@ mark.rbt-highlight-text {
  * GROWI page content footer
  */
 .page-content-footer {
-  background-color: var(--bgcolor-global-darken2);
+  background-color: hsl(from var(--bgcolor-global) h s calc(l - 2%));
   border-top-color: $border-color-theme;
 }
 

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

@@ -27,7 +27,7 @@
 
 a {
   color: var(--link-color);
-  text-decoration: var(--link-decoration);
+  text-decoration: $link-decoration;
   background-color: transparent; // Remove the gray background on active links in IE 10.
 
   svg {
@@ -36,7 +36,7 @@ a {
 
   @include hover() {
     color: var(--link-hover-color);
-    text-decoration: var(--link-hover-decoration);
+    text-decoration: $link-hover-decoration;
 
     svg {
       fill: var(--link-hover-color);

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

@@ -63,7 +63,7 @@
     }
     .grw-pagetree-title-anchor {
       .grw-sidebar-text-muted {
-        color: rgba(desaturate($color, 50%), 0.6);
+        // color: rgba(desaturate($color, 50%), 0.6);
       }
     }
   }

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

@@ -18,55 +18,36 @@
 //
 :root[data-theme='light'] {
   --primary: #122c55;
-  --primary-lighten77: hsl(from var(--bgcolor-global) h s calc(l 77%));
-  --primary-lighten76: hsl(from var(--bgcolor-global) h s calc(l 76%));
   $accent: #209fd8;
 
   // Background colors
   --bgcolor-global: white;
   --body-bg: var(--bgcolor-global);
-  --bgcolor-global-darken2: hsl(from var(--bgcolor-global) h s calc(l - 2%));
-  --bgcolor-global-darken3: hsl(from var(--bgcolor-global) h s calc(l - 3%));
-  --bgcolor-global-darken4: hsl(from var(--bgcolor-global) h s calc(l - 4%));
-  --bgcolor-global-darken5: hsl(from var(--bgcolor-global) h s calc(l - 5%));
-  --bgcolor-global-darken20: hsl(from var(--bgcolor-global) h s calc(l - 20%));
   $bgcolor-inline-code: $gray-100; //optional
-  --bgcolor-card: var(--gray-50);
-  --bgcolor-card-darken5: hsl(from var(--bgcolor-card) h s calc(l - 5%));
+  --bgcolor-card: #{$gray-50};
   $bgcolor-blinked-section: rgba($primary, 0.1);
   //$bgcolor-keyword-highlighted: $grw-marker-yellow;
 
   // Font colors
   --color-global: #112744;
   --body-color: var(--color-global);
-  $color-global: var(--color-global);
-  --color-global-lighten10: hsl(from var(--color-global) h s calc(l 10%));
-  --color-global-darken10: hsl(from var(--color-global) h s calc(l - 10%));
   $color-reversal: $light;
   // $color-header: #2b2b2b;
   --color-link: #1938ba;
   --link-color: var(--color-link);
-  --color-link-lighten20: hsl(from var(--color-link) h s calc(l 20%));
   --link-hover-color: var(--color-link-hover);
-  --color-link-hover: var(--link-color-lighten20);
+  --color-link-hover: hsl(from var(--color-link) h s calc(l 20%));
   --color-link-wiki: var(--color-link);
-  --color-link-wiki-lighten20: hsl(from var(--color-link-wiki) h s calc(l 20%));
-  --color-link-wiki-hover: var(--color-link-wiki-lighten20);
-  --color-link-nabvar: var(--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: black;
   --color-list: var(--color-global); // optional
-  $bgcolor-list-active: black;
   // --bgcolor-list: var(--bgcolor-global); // optional
-  $bgcolor-list: black;
   // --color-list-hover: va(--color-global); // optional
-  $color-list-hover: black;
-  // --bgcolor-list-hover: var(--bgcolor-global-lighten3); // optional
-  $bgcolor-list-hover: black;
+  --bgcolor-list-hover: hsl(from var(--bgcolor-global) h s calc(l 3%)); // optional
   // --color-list-active:white ; // optional
-  $color-list-active: black;
   // $bgcolor-list-active: $primary; // optional
 
   // Table colors
@@ -77,18 +58,17 @@
   // --bgcolor-table-hover: #; // optional
 
   // Navbar
-  --bgcolor-navbar: $gray-900;
-  --bgcolor-navbar-lighten:
+  --bgcolor-navbar: #{$gray-900};
   $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);
-  $bgcolor-navbar: black;
-  $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
+  --fillcolor-logo-mark: lighten(desaturate(var(--bgcolor-navbar), 10%), 15%);
 
   // Sidebar
-  $bgcolor-sidebar: $primary;
+  --bgcolor-sidebar: var(--primary);
+  $bgcolor-sidebar: #122c55;
   $bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
@@ -98,16 +78,12 @@
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
   // Sidebar contents
   --color-sidebar-context: var(--color-global);
-  --bgcolor-sidebar-context: var(--primary-lighten77);
-  $color-sidebar-context: black;
-  $bgcolor-sidebar-context: black;
 
   // Sidebar list group
-  $bgcolor-sidebar-list-group: $gray-50; // optional
+  --bgcolor-sidebar-list-group: #{gray-50}; // optional
 
   // Subnavigation
-  --bgcolor-subnav: #fafafa; // optional
-  --bgcolor-subnav-lighten10: hsl(from var(--bgcolor-subnav) h s calc(l 10%));
+  // --bgcolor-subnav: #fafafa; // optional
 
   // Tabs
   // $color-nav-tabs-link-active: #; //optional
@@ -137,7 +113,7 @@
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager($primary, lighten($primary, 65%), lighten($primary, 70%));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager(primary, lighten($primary, 65%), lighten($primary, 70%));
     }
   }
 }
@@ -145,52 +121,34 @@
 //== Dark Mode
 //
 :root[data-theme='dark'] {
-  $primary: #115cd3;
+  --primary: #115cd3;
   $accent: #db00c2;
 
   // Background colors
   --bgcolor-global: #131418;
-  --bgcolor-global-darken2: hsl(from var(--bgcolor-global) h s calc(l - 2%));
-  --bgcolor-global-darken4: hsl(from var(--bgcolor-global) h s calc(l - 4%));
-  --bgcolor-global-darken5: hsl(from var(--bgcolor-global) h s calc(l - 5%));
-  --bgcolor-global-lighten3: hsl(from var(--bgcolor-global) h s calc(l 3%));
-  --bgcolor-global-lighten4: hsl(from var(--bgcolor-global) h s calc(l 4%));
-  --bgcolor-global-lighten5: hsl(from var(--bgcolor-global) h s calc(l 5%));
-  --bgcolor-global-lighten8: hsl(from var(--bgcolor-global) h s calc(l 8%));
-  --bgcolor-global-lighten9: hsl(from var(--bgcolor-global) h s calc(l 9%));
-  --bgcolor-global-lighten15: hsl(from var(--bgcolor-global) h s calc(l 15%));
-  --bgcolor-global-lighten30: hsl(from var(--bgcolor-global) h s calc(l 30%));
   $bgcolor-inline-code: #1f1f22; //optional
-  --bgcolor-card: var(--bgcolor-global-darken5);
+  --bgcolor-card: hsl(from var(--bgcolor-global) h s calc(l - 5%));
   $bgcolor-blinked-section: rgba($primary, 0.4);
   $bgcolor-keyword-highlighted: darken($grw-marker-red, 30%);
 
   // Font colors
-  --color-global: var(--gray-400);
+  --color-global: #{$gray-400};
   $color-global: var(--color-global);
   $color-reversal: $gray-900;
   // $color-header: desaturate($primary, 20%);
   --color-link: #7b9ad5;
-  --color-link-lighten10: hsl(from var(--color-link) h s calc(l 10%));
-  --color-link-hover: var( --color-link-lighten10);
+  --color-link-hover: hsl(from var(--color-link) h s calc(l 10%));
   --color-link-wiki: var(--color-link);
-  --color-link--wiki-lighten10: hsl(from var(--color-link-wiki) h s calc(l 10%));
-  --color-link-wiki-hover: var(--color-link--wiki-lighten10);
+  --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: black;
   --color-list: var(--color-global); // optional
-  $bgcolor-list-active: black;
   // --bgcolor-list: var(--bgcolor-global); // optional
-  $bgcolor-list: black;
   // --color-list-hover: va(--color-global); // optional
-  $color-list-hover: black;
-  // --bgcolor-list-hover: var(--bgcolor-global-lighten3); // optional
-  $bgcolor-list-hover: black;
+  --bgcolor-list-hover: hsl(from var(--bgcolor-global) h s calc(l 3%)); // optional
   // --color-list-active:white ; // optional
-  $color-list-active: black;
   // $bgcolor-list-active: $primary; // optional
 
   // Table colors
@@ -207,9 +165,10 @@
 
   // Logo colors
   $bgcolor-logo: var(--bgcolor-navbar);
-  $fillcolor-logo-mark: $gray-700;
+  --fillcolor-logo-mark: #{$gray-700};
 
   // Sidebar
+  --bgcolor-sidebar: #122c55;
   $bgcolor-sidebar: #122c55;
   $bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
@@ -219,17 +178,13 @@
   $color-resize-button-hover: white;
   $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
   // Sidebar contents
-  --bgcolor-sidebar-context: var(--bgcolor-global-lighten8);
   --color-sidebar-context: var(--color-global);
-  $color-sidebar-context: black;
-  $bgcolor-sidebar-context: black;
+
   // Sidebar list group
-  $bgcolor-sidebar-list-group: #1c2a3e; // optional
+  --bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Subnavigation
-  --bgcolor-subnav: var(--bgcolor-global-lighten4); // optional
-  --bgcolor-subnav-lighten15: hsl(from var(--bgcolor-subnav) h s calc(l 15%));
-
+  --bgcolor-subnav: hsl(from var(--bgcolor-global) h s calc(l 4%)); // optional
 
   // Tabs
   $bordercolor-nav-tabs: $gray-700; // optional

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

@@ -10,7 +10,6 @@ $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: $bgcolor-list !default;
 $color-tags: #949494 !default;
 $bgcolor-tags: $dark !default;
 $border-color-global: $gray-500 !default;
@@ -33,8 +32,6 @@ $border-color: $border-color-global;
 @import './reboot-bootstrap-dropdown';
 
 // List Group
-@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
-
 /*
   * Form
   */
@@ -210,7 +207,6 @@ ul.pagination {
     &.active {
     }
     .list-group-item-action:hover {
-      background-color: $bgcolor-list-hover;
     }
     .page-list-snippet {
     }
@@ -237,7 +233,6 @@ ul.pagination {
 .grw-page-editor-mode-manager {
   .btn-outline-primary {
     &:hover {
-      color: $primary;
       background-color: $gray-700;
     }
   }
@@ -255,37 +250,17 @@ ul.pagination {
  * GROWI Sidebar
  */
 .grw-sidebar {
-  // List
-  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
-
-  // Pagetree
-  .grw-pagetree {
-    @include override-list-group-item-for-pagetree(
-      $color-sidebar-context,
-      lighten($bgcolor-sidebar-context, 8%),
-      lighten($bgcolor-sidebar-context, 15%),
-      darken($color-sidebar-context, 15%),
-      darken($color-sidebar-context, 10%),
-      lighten($bgcolor-sidebar-context, 18%),
-      lighten($bgcolor-sidebar-context, 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() {
-      }
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active {
-      }
-      box-shadow: none !important;
-    }
+  .grw-pagetree-triangle-btn {
+    @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
   }
-  .private-legacy-pages-link {
-    &:hover {
-      background: $bgcolor-list-hover;
+  .btn-page-item-control {
+    @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
+    @include hover() {
+    }
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
     }
+    box-shadow: none !important;
   }
 }
 

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

@@ -4,13 +4,11 @@
 @use './mixins/count-badge';
 
 // determine optional variables
-$bgcolor-list-hover: lighten($primary, 72%) !default;
 $bgcolor-list-active: lighten($primary, 65%) !default;
 $color-list-active: color-yiq($bgcolor-list-active) !default;
 $bgcolor-table: null !default;
 $border-color-table: $gray-200 !default;
 $bgcolor-table-hover: rgba(black, 0.075) !default;
-$bgcolor-sidebar-list-group: $bgcolor-list !default;
 $color-tags: $secondary !default;
 $bgcolor-tags: $gray-200 !default;
 $border-color-global: $gray-300 !default;
@@ -32,8 +30,6 @@ $border-color: $border-color-global;
 @import './reboot-bootstrap-dropdown';
 
 // List Group
-@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
-
 /*
  * Form
  */
@@ -161,7 +157,6 @@ $border-color: $border-color-global;
  */
 .grw-sidebar {
   // List
-  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $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.
@@ -169,22 +164,12 @@ $border-color: $border-color-global;
   }
   // Pagetree
   .grw-pagetree {
-    @include override-list-group-item-for-pagetree(
-      $color-sidebar-context,
-      darken($bgcolor-sidebar-context, 5%),
-      darken($bgcolor-sidebar-context, 12%),
-      lighten($color-sidebar-context, 10%),
-      lighten($color-sidebar-context, 8%),
-      darken($bgcolor-sidebar-context, 15%),
-      darken($bgcolor-sidebar-context, 24%)
-    );
     .grw-pagetree-triangle-btn {
       @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
     }
   }
   .private-legacy-pages-link {
     &:hover {
-      background: $bgcolor-list-hover;
     }
   }
 }

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

@@ -132,10 +132,6 @@ ul.pagination {
     transition: fill 0.8s ease-out;
   }
 
-  svg {
-    fill: $fillcolor-logo-mark;
-  }
-
   &:hover {
     svg {
       .group1 {
@@ -157,7 +153,6 @@ ul.pagination {
   border-image-slice: 1;
 
   .grw-app-title {
-    color: $fillcolor-logo-mark;
   }
 }
 
@@ -196,7 +191,6 @@ ul.pagination {
   }
   div.grw-global-navigation {
     > div {
-      background-color: $bgcolor-sidebar;
     }
   }
   div.grw-contextual-navigation {

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

@@ -1,60 +0,0 @@
-//
-//
-// Apply partially
-//   https://github.com/twbs/bootstrap/blob/v4.5.0/scss/_reboot.scss
-//
-//
-
-// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
-
-// Body
-//
-// 1. Remove the margin in all browsers.
-// 2. As a best practice, apply a default `background-color`.
-// 3. Set an explicit initial text-align value so that we can later use
-//    the `inherit` value on things like `<th>` elements.
-
-&, body {
-  color: var(--body-color);
-  background-color: var(--body-bg); // 2
-
-  svg {
-    fill: var(--body-color);
-  }
-}
-
-// Links
-
-a {
-  color: var(--link-color);
-  text-decoration: var(--link-decoration);
-  background-color: transparent; // Remove the gray background on active links in IE 10.
-
-  svg {
-    fill: var(--link-color);
-  }
-
-  @include hover() {
-    color: var(--link-hover-color);
-    text-decoration: var(--link-hover-decoration);
-
-    svg {
-      fill: var(--link-hover-color);
-    }
-  }
-}
-
-// And undo these styles for placeholder links/named anchors (without href).
-// It would be more straightforward to just use a[href] in previous block, but that
-// causes specificity issues in many other styles that are too complex to fix.
-// See https://github.com/twbs/bootstrap/issues/19402
-
-// a:not([href]) {
-//   color: inherit;
-//   text-decoration: none;
-
-//   @include hover() {
-//     color: inherit;
-//     text-decoration: none;
-//   }
-// }

packages/preset-themes/src/styles/theme/mixins/_list-group.scss

@@ -63,7 +63,7 @@
     }
     .grw-pagetree-title-anchor {
       .grw-sidebar-text-muted {
-        color: rgba(desaturate($color, 50%), 0.6);
+        // color: rgba(desaturate($color, 50%), 0.6);
       }
     }
   }