Merge pull request #7074 from weseek/fix/_reboot-bootstrap-colors.scss

fix:reboot bootstrap colors.scss

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

@@ -4,46 +4,45 @@
 @use './mixins/count-badge';
 
 // determine optional variables
-$color-list: $color-global !default;
-$bgcolor-list: $bgcolor-global !default;
-$color-list-hover: $color-global !default;
-$bgcolor-list-hover: lighten($bgcolor-global, 8%) !default;
+$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: $primary !default;
-$bgcolor-subnav: lighten($bgcolor-global, 3%) !default;
-$color-table: white !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%)));
+$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;
 $border-color-toc: $border-color-global !default;
-$color-dropdown: $color-global !default;
-$bgcolor-dropdown: $bgcolor-global !default;
-$color-dropdown-link: $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: lighten($bgcolor-global, 15%) !default;
+$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;
-$table-dark-color: $color-table;
+$table-dark-color: var(--color-table);
 $table-dark-bg: $bgcolor-table;
 $table-dark-border-color: $border-color-table;
-$table-dark-hover-color: $color-table-hover;
+$table-dark-hover-color: var(--color-table-hover);
 $table-dark-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
-$dropdown-color: $color-dropdown;
-$dropdown-bg: $bgcolor-dropdown;
-$dropdown-link-color: $color-dropdown-link;
-$dropdown-link-hover-color: $color-dropdown-link-hover;
-$dropdown-link-hover-bg: $bgcolor-dropdown-link-hover;
-$dropdown-link-active-color: $color-dropdown-link-active;
-$dropdown-link-active-bg: $bgcolor-dropdown-link-active;
+$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';
@@ -52,8 +51,14 @@ $dropdown-link-active-bg: $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
   */
@@ -61,11 +66,11 @@ input.form-control,
 select.form-control,
 select.custom-select,
 textarea.form-control {
-  color: $color-global;
-  background-color: darken($bgcolor-global, 5%);
+  color: var(--color-global);
+  background-color: hsl(from var(--bgcolor-global) h s calc(l - 5%));
   border-color: $border-color-global;
   &:focus {
-    background-color: $bgcolor-global;
+    background-color: var(--bgcolor-global);
   }
   // FIXME: accent color
   // border: 1px solid darken($border, 30%);
@@ -73,8 +78,8 @@ textarea.form-control {
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: lighten($color-global, 10%);
-  background-color: lighten($bgcolor-global, 5%);
+  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: darken($bgcolor-global, 5%);
+  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: darken($color-global, 10%);
+        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: lighten($bgcolor-global, 9%) !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: darken($body-color, 10%);
+      color: hsl(from var(--color-global) h s calc(l - 10%));
     }
   }
 }
@@ -250,7 +255,7 @@ ul.pagination {
  */
 .revision-toc-content {
   ::marker {
-    color: lighten($bgcolor-global, 30%);
+    color: hsl(from var(--bgcolor-global) h s calc(l 30%));;
   }
 }
 
@@ -258,17 +263,17 @@ ul.pagination {
  * GROWI subnavigation
  */
 .grw-subnav {
-  background-color: $bgcolor-subnav;
+  background-color: var(--bgcolor-subnav);
 }
 
 .grw-subnav-fixed-container .grw-subnav {
-  background-color: rgba($bgcolor-subnav, 0.85);
+  background-color: var(--bgcolor-subnav); opacity:0.85;
 }
 
 .grw-page-editor-mode-manager {
   .btn-outline-primary {
     &:hover {
-      color: $primary;
+      color: var(--primary);
       background-color: $gray-700;
     }
   }
@@ -276,7 +281,7 @@ ul.pagination {
 
 // Search drop down
 #search-typeahead-asynctypeahead {
-  background-color: $bgcolor-global;
+  background-color: var(--bgcolor-global);
   .table {
     background-color: transparent;
   }
@@ -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);
@@ -306,18 +323,18 @@ ul.pagination {
     .btn-page-item-control {
       @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
       @include hover() {
-        background-color: lighten($bgcolor-sidebar-context, 20%);
+        background-color: var(--bgcolor-sidebar-context-lighten20);
       }
       &:not(:disabled):not(.disabled):active,
       &:not(:disabled):not(.disabled).active {
-        background-color: lighten($bgcolor-sidebar-context, 34%);
+        background-color: var(--bgcolor-sidebar-context-lighten34);
       }
       box-shadow: none !important;
     }
   }
   .private-legacy-pages-link {
     &:hover {
-      background: $bgcolor-list-hover;
+      background: var(--bgcolor-list-hover);
     }
   }
 }
@@ -339,7 +356,7 @@ ul.pagination {
  * Popover
  */
 .popover {
-  background-color: $bgcolor-global;
+  background-color: var(--bgcolor-global);
   border-color: $secondary;
   .popover-header {
     color: $white;
@@ -356,7 +373,7 @@ ul.pagination {
     }
 
     &::after {
-      border-top-color: $bgcolor-global;
+      border-top-color: var(--bgcolor-global);
     }
   }
   &.bs-popover-bottom .arrow {
@@ -365,7 +382,7 @@ ul.pagination {
     }
 
     &::after {
-      border-bottom-color: $bgcolor-global;
+      border-bottom-color: var(--bgcolor-global);
     }
   }
   &.bs-popover-right .arrow {
@@ -374,7 +391,7 @@ ul.pagination {
     }
 
     &::after {
-      border-right-color: $bgcolor-global;
+      border-right-color: var(--bgcolor-global);
     }
   }
   &.bs-popover-left .arrow {
@@ -383,7 +400,7 @@ ul.pagination {
     }
 
     &::after {
-      border-left-color: $bgcolor-global;
+      border-left-color: var(--bgcolor-global);
     }
   }
 }
@@ -403,7 +420,7 @@ ul.pagination {
   $color-slack: #4b144c;
 
   .form-control {
-    background: $bgcolor-global;
+    background: var(--bgcolor-global);
   }
 
   .custom-control-label {
@@ -413,7 +430,7 @@ ul.pagination {
     }
     &::after {
       background-color: darken($color-slack, 5%);
-      background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
+      // background-image: url(/images/icons/slack/slack-logo-dark-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
     }
   }
 
@@ -423,7 +440,7 @@ ul.pagination {
     }
     &::after {
       background-color: darken($color-slack, 5%);
-      background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
+      // background-image: url(/images/icons/slack/slack-logo-dark-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
     }
   }
   .grw-slack-logo svg {
@@ -469,7 +486,7 @@ ul.pagination {
 }
 
 .page-comments-row {
-  background: $bgcolor-subnav;
+  background: var(--bgcolor-subnav);
 }
 
 /*
@@ -534,5 +551,4 @@ ul.pagination {
  * skeleton
  */
 .grw-skeleton {
-  background-color: lighten($bgcolor-subnav, 15%);
 }

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

@@ -4,41 +4,41 @@
 @use './mixins/count-badge';
 
 // determine optional variables
-$color-list: $color-global !default;
-$bgcolor-list: $bgcolor-global !default;
-$color-list-hover: $color-global !default;
-$bgcolor-list-hover: lighten($primary, 72%) !default;
+$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: $color-global !default;
+$color-table: var(--color-table,var(--color-global));
 $bgcolor-table: null !default;
 $border-color-table: $gray-200 !default;
-$color-table-hover: $color-table !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;
 $border-color-toc: $border-color-global !default;
-$color-dropdown: $color-global !default;
-$color-dropdown-link: $color-global !default;
-$color-dropdown-link-hover: $color-global !default;
-$color-dropdown-link-active: $color-reversal !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;
 
+
 // override bootstrap variables
 $text-muted: $gray-500;
-$table-color: $color-table;
+$table-color: var(--color-table);
 $table-bg: $bgcolor-table;
 $table-border-color: $border-color-table;
-$table-hover-color: $color-table-hover;
+$table-hover-color: var(--color-table-hover);
 $table-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
-$dropdown-color: $color-dropdown;
-$dropdown-link-color: $color-dropdown-link;
-$dropdown-link-hover-color: $color-dropdown-link-hover;
-$dropdown-link-active-color: $color-dropdown-link-active;
-$dropdown-link-active-bg: $bgcolor-dropdown-link-active;
+$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';
@@ -47,30 +47,36 @@ $dropdown-link-active-bg: $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
  */
 .form-control {
-  background-color: $bgcolor-global;
+  background-color: var(--bgcolor-global);
 }
 
 .form-control::placeholder {
-  color: darken($bgcolor-global, 20%);
+  color: hsl(from var(--bgcolor-global) h s calc(l - 20%));
 }
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: lighten($color-global, 10%);
-  background-color: darken($bgcolor-global, 5%);
+  color: hsl(from var(--color-global) h s calc(l 10%));
+  background-color: hsl(from var(--bgcolor-global) h s calc(l - 5%));
 }
 
 /*
  * card
  */
 .card.card-disabled {
-  background-color: darken($bgcolor-card, 5%);
+  background-color: var(--background-color);
   border-color: $gray-200;
 }
 
@@ -157,11 +163,11 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  * GROWI subnavigation
  */
 .grw-subnav {
-  background-color: $bgcolor-subnav;
+  background-color: var(--bgcolor-subnav);
 }
 
 .grw-subnav-fixed-container .grw-subnav {
-  background-color: rgba($bgcolor-subnav, 0.85);
+  background-color: var(--bgcolor-subnav); opacity:0.85;
 }
 
 .grw-page-editor-mode-manager {
@@ -182,8 +188,16 @@ $dropdown-link-active-bg: $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: $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: $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: $bgcolor-dropdown-link-active;
   .page-list-ul {
     > li {
       > span.page-list-meta {
-        color: lighten($color-global, 10%);
+        color: hsl(from var(--color-global) h s calc(l 10%));
       }
     }
   }
   // List group
   .list-group-item {
     .page-list-snippet {
-      color: lighten($body-color, 10%);
+      color: hsl(from var(--color-global) h s calc(l 10%));
     }
   }
 }
@@ -247,7 +267,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  */
 .revision-toc-content {
   ::marker {
-    color: darken($bgcolor-global, 20%);
+    color: hsl(from var(--bgcolor-global) h s calc(l - 20%));
   }
 }
 
@@ -307,7 +327,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
     }
     &::after {
       background-color: white;
-      background-image: url(/images/icons/slack/slack-logo-off.svg);
+      // background-image: url(/images/icons/slack/slack-logo-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
     }
   }
   .custom-control-input:checked ~ .custom-control-label {
@@ -315,7 +335,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
       background-color: lighten($color-slack, 60%);
     }
     &::after {
-      background-image: url(/images/icons/slack/slack-logo-on.svg);
+      // background-image: url(/images/icons/slack/slack-logo-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
     }
   }
   .grw-slack-logo svg {
@@ -362,7 +382,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 }
 
 .page-comments-row {
-  background: $bgcolor-subnav;
+  background: var(--bgcolor-subnav);
 }
 
 /*
@@ -426,5 +446,5 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  * skeleton
  */
 .grw-skeleton {
-  background-color: darken($bgcolor-subnav, 10%);
+  background-color: hsl(from var(--bgcolor-subnav) h s calc(l 10%));
 }

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

@@ -12,32 +12,31 @@
 $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: 1px 1px 2px $primary !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: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !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: lighten($primary, 76%) !default;
-$color-page-list-group-item-meta: $gray-500 !default;
-$color-search-page-list-title: $color-global !default;
-$bgcolor-subnav: darken($bgcolor-global, 3%) !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));
 
 // override bootstrap variables
-$body-bg: $bgcolor-global;
-$body-color: $color-global;
-$link-color: $color-link;
-$link-hover-color: $color-link-hover;
-$input-focus-color: $color-global;
+$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: $bgcolor-global;
-$nav-tabs-link-active-border-color: $bordercolor-nav-tabs-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';
@@ -45,7 +44,6 @@ $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-bootstrap-nav';
 @import 'reboot-toastr-colors';
-@import '~emoji-mart/css/emoji-mart'; // Emoji-mart style
 
 // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
 $color-modal-header: color-yiq($primary) !default;
@@ -78,7 +76,7 @@ code:not([class^='language-']) {
     fill: $secondary;
   }
   .grw-color-mode-icon svg {
-    fill: $color-global;
+    fill: var(--color-global);
   }
   .grw-color-mode-icon-muted svg {
     fill: $secondary;
@@ -92,12 +90,12 @@ code:not([class^='language-']) {
 
 // Tabs
 .nav.nav-tabs .nav-link.active {
-  color: $color-link !important;
+  color: var(--color-link);
   background: transparent;
 
   &:hover,
   &:focus {
-    color: $color-link-hover !important;
+    color: var(--color-link-hover);
   }
 }
 
@@ -150,7 +148,7 @@ ul.pagination {
   }
 
   svg {
-    fill: $fillcolor-logo-mark;
+    fill: var(--fillcolor-logo-mark);
   }
 
   &:hover {
@@ -167,16 +165,16 @@ ul.pagination {
 }
 
 .grw-navbar {
-  background: $bgcolor-navbar;
+  background: var(--bgcolor-navbar);
   .nav-item .nav-link {
-    color: $color-link-nabvar;
+    color: var(--color-link-nabvar);
   }
 
   border-image: $border-image-navbar;
   border-image-slice: 1;
 
   .grw-app-title {
-    color: $fillcolor-logo-mark;
+    color: var(--fillcolor-logo-mark);
   }
 }
 
@@ -187,13 +185,13 @@ ul.pagination {
 
   // for https://youtrack.weseek.co.jp/issue/GW-2603
   .search-typeahead {
-    background-color: rgba($bgcolor-global, 0.9);
+    background-color: var(--bgcolor-global); opacity:0.9;
   }
 }
 
 .grw-sidebar {
   .grw-navigation-resize-button {
-    $color-resize-button: $color-global !default;
+    $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;
@@ -217,13 +215,13 @@ ul.pagination {
   }
   div.grw-global-navigation {
     > div {
-      background-color: $bgcolor-sidebar;
+      background-color: var(--bgcolor-sidebar);
     }
   }
   div.grw-contextual-navigation {
     > div {
-      color: $color-sidebar-context;
-      background-color: $bgcolor-sidebar-context;
+      color: var(--color-sidebar-context);
+      background-color: var(--bgcolor-sidebar-context);
     }
   }
 
@@ -242,11 +240,12 @@ ul.pagination {
   .grw-sidebar-nav-primary-container {
     .btn.active {
       i {
-        text-shadow: $text-shadow-sidebar-nav-item-active;
+        text-shadow: var(--text-shadow-sidebar-nav-item-active);
       }
       // fukidashi
       &:after {
-        border-right-color: $bgcolor-sidebar-context;
+        border-right-color: var(--bgcolor-sidebar-context)
+        ;
       }
     }
   }
@@ -262,20 +261,20 @@ ul.pagination {
       }
 
       .custom-control-label::after {
-        background-color: $bgcolor-global;
+        background-color: var(--bgcolor-global);
       }
 
       .custom-control-input:not(:checked) + .custom-control-label::before {
-        color: $bgcolor-global;
+        color: var(--bgcolor-global);
       }
 
       .custom-control-input:checked + .custom-control-label::before {
-        color: $bgcolor-global;
+        color: var(--bgcolor-global);
         background-color: $primary;
         // border-color: $primary !important;
       }
       .custom-control-input:checked + .custom-control-label::after {
-        color: $bgcolor-global;
+        color: var(--bgcolor-global);
       }
     }
   }
@@ -299,7 +298,7 @@ ul.pagination {
         background-color: transparent;
 
         .icon-lock {
-          color: $color-link;
+          color: var(--color-link);
         }
 
         .grw-recent-changes-item-lower {
@@ -318,7 +317,7 @@ ul.pagination {
  * Icon
  */
 .editor-container .navbar-editor svg {
-  fill: $color-editor-icons;
+  fill: var(--color-editor-icons);
 }
 
 // page preview button in link form
@@ -345,7 +344,7 @@ ul.pagination {
   }
 
   .modal-content {
-    background-color: $bgcolor-global;
+    background-color: var(--bgcolor-global);
   }
 
   .modal-footer {
@@ -357,13 +356,13 @@ ul.pagination {
   .nav-item {
     &:hover,
     &:focus {
-      background-color: rgba($color-link, 0.08);
+      background-color: var(--color-link); opacity:0.9;
     }
     .nav-link {
       -webkit-appearance: none;
-      color: $color-link;
+      color: var(--color-link);
       svg {
-        fill: $color-link;
+        fill: var(--color-link);
       }
 
       // Disabled state lightens text
@@ -377,7 +376,7 @@ ul.pagination {
   }
 
   .grw-nav-slide-hr {
-    border-color: $color-link;
+    border-color: var(--color-link);
   }
 }
 
@@ -393,8 +392,8 @@ ul.pagination {
  * cards
  */
 .card.well {
-  color: $color-global;
-  background-color: $bgcolor-card;
+  color: var(--color-global);
+  background-color: var(--bgcolor-card);
   border-color: $light;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
@@ -447,21 +446,21 @@ ul.pagination {
   }
 
   a {
-    color: $color-link-wiki;
+    color: var(--color-link-wiki);
 
     &:hover {
-      color: $color-link-wiki-hover;
+      color: var(--color-link-wiki-hover);
     }
   }
 
   // table with handsontable modal button
   .editable-with-handsontable {
     button {
-      color: $color-link-wiki;
+      color: var(--color-link-wiki);
     }
 
     button:hover {
-      color: $color-link-wiki-hover;
+      color: var(--color-link-wiki-hover);
     }
   }
 }
@@ -475,26 +474,26 @@ ul.pagination {
     .list-group-item {
       a {
         svg {
-          fill: $color-global;
+          fill: var(--color-global);
         }
 
         @include hover() {
           svg {
-            fill: $color-global;
+            fill: var(--color-global);
           }
         }
       }
 
       .page-list-meta {
-        color: $color-page-list-group-item-meta;
+        color: var(--color-page-list-group-item-meta);
         svg {
-          fill: $color-page-list-group-item-meta;
+          fill: var(--color-page-list-group-item-meta);
         }
       }
 
       &.list-group-item-action {
         &.active {
-          background-color: $bgcolor-page-list-group-item-active;
+          background-color: var(--bgcolor-page-list-group-item-active);
           border-left-color: $primary;
         }
       }
@@ -507,19 +506,19 @@ ul.pagination {
  */
 .layout-root.editing {
   .main {
-    background-color: darken($bgcolor-global, 2%);
+    background-color: hsl(from var(--bgcolor-global) h s calc(l - 2%));
 
     .page-editor-editor-container {
       border-right-color: $border-color-theme;
 
       .navbar-editor {
-        background-color: $bgcolor-global; // same color with active tab
+        background-color: var(--bgcolor-global); // same color with active tab
         border-bottom-color: $border-color-theme;
       }
     }
 
     .page-editor-preview-container {
-      background-color: $bgcolor-global;
+      background-color: var(--bgcolor-global);
     }
   }
 }
@@ -529,8 +528,8 @@ ul.pagination {
  */
 body.editing-sidebar {
   .page-editor-preview-body {
-    color: $color-sidebar-context;
-    background-color: $bgcolor-sidebar-context;
+    color: var(--color-sidebar-context);
+    background-color: var(--bgcolor-sidebar-context);
   }
 }
 
@@ -541,10 +540,10 @@ body.editing-sidebar {
   .desktop-preview,
   .tablet-preview,
   .mobile-preview {
-    background: $bgcolor-global;
+    background: var(--bgcolor-global);
   }
   .grid-edit-border-for-each-cols {
-    border: 2px solid $bgcolor-global;
+    border: 2px solid var(--bgcolor-global);
   }
 }
 
@@ -568,10 +567,10 @@ body.editing-sidebar {
  * GROWI comment
  */
 .page-comment-meta .page-comment-revision svg {
-  fill: $color-link;
+  fill: var(--color-link);
 
   &:hover {
-    fill: $color-link-hover;
+    fill: var(--color-link-hover);
   }
 }
 
@@ -581,17 +580,17 @@ body.editing-sidebar {
 .page-comments {
   .page-comment .page-comment-main,
   .page-comment-form .comment-form-main {
-    background-color: $bgcolor-global;
+    background-color: var(--bgcolor-global);
 
     &:before {
-      border-right-color: $bgcolor-global;
+      border-right-color: var(--bgcolor-global);
     }
 
     .nav.nav-tabs {
       > li > a.active {
         background: transparent;
-        border-bottom: solid 1px darken($bgcolor-global, 4%);
-        border-bottom-color: darken($bgcolor-global, 4%);
+        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%));
       }
     }
   }
@@ -602,10 +601,10 @@ body.editing-sidebar {
  */
 .search-result-base {
   .grw-search-page-nav {
-    background-color: $bgcolor-subnav;
+    background-color: var(--bgcolor-subnav);
   }
   .search-control {
-    background-color: $bgcolor-global;
+    background-color: var(--bgcolor-global);
   }
   .page-list {
     .highlighted-keyword {
@@ -626,7 +625,7 @@ mark.rbt-highlight-text {
  * GROWI page content footer
  */
 .page-content-footer {
-  background-color: darken($bgcolor-global, 2%);
+  background-color: hsl(from var(--bgcolor-global) h s calc(l - 2%));
   border-top-color: $border-color-theme;
 }
 
@@ -645,7 +644,7 @@ mark.rbt-highlight-text {
   #themeOptions {
     .theme-option-container.active {
       .theme-option-name {
-        color: $color-global;
+        color: var(--color-global);
       }
       a {
         background-color: $color-theme-color-box;
@@ -659,7 +658,7 @@ mark.rbt-highlight-text {
  * HackMd
  */
 .bg-box {
-  background-color: $bgcolor-global;
+  background-color: var(--bgcolor-global);
 }
 
 .grw-fab {

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

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

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

@@ -15,31 +15,31 @@
 //    the `inherit` value on things like `<th>` elements.
 
 &, body {
-  color: $body-color;
-  background-color: $body-bg; // 2
+  color: var(--body-color);
+  background-color: var(--body-bg); // 2
 
   svg {
-    fill: $body-color;
+    fill: var(--body-color);
   }
 }
 
 // Links
 
 a {
-  color: $link-color;
+  color: var(--link-color);
   text-decoration: $link-decoration;
   background-color: transparent; // Remove the gray background on active links in IE 10.
 
   svg {
-    fill: $link-color;
+    fill: var(--link-color);
   }
 
   @include hover() {
-    color: $link-hover-color;
+    color: var(--link-hover-color);
     text-decoration: $link-hover-decoration;
 
     svg {
-      fill: $link-hover-color;
+      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

@@ -17,88 +17,92 @@
 //== Light Mode
 //
 :root[data-theme='light'] {
-  $primary: #122c55;
+  --primary: #122c55;
   $accent: #209fd8;
 
   // Background colors
-  $bgcolor-global: white;
+  --bgcolor-global: white;
+  --body-bg: var(--bgcolor-global);
   $bgcolor-inline-code: $gray-100; //optional
-  $bgcolor-card: $gray-50;
+  --bgcolor-card: #{$gray-50};
   $bgcolor-blinked-section: rgba($primary, 0.1);
   //$bgcolor-keyword-highlighted: $grw-marker-yellow;
 
   // Font colors
-  $color-global: #112744;
+  --color-global: #112744;
+  --body-color: var(--color-global);
   $color-reversal: $light;
   // $color-header: #2b2b2b;
-  $color-link: #1938ba;
-  $color-link-hover: lighten($color-link, 20%);
-  $color-link-wiki: $color-link;
-  $color-link-wiki-hover: lighten($color-link-wiki, 20%);
-  $color-link-nabvar: $gray-500;
+  --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-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-inline-code: darken($red, 15%); // optional
 
   // List Group colors
-  // $color-list: $color-global; // optional
-  // $bgcolor-list: $bgcolor-global; // optional
-  // $color-list-hover: $color-global; // optional
-  // $bgcolor-list-hover: darken($bgcolor-global, 3%); // optional
-  // $color-list-active: $color-reversal; // optional
+  --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
+  // --color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
 
   // Table colors
-  // $bgcolor-subnav: #; // optional
-  // $color-table: #; // optional
-  // $bgcolor-table: #; // optional
-  // $border-color-table: #; // optional
-  // $color-table-hover: #; // optional
-  // $bgcolor-table-hover: #; // optional
+  // --color-table: #; // optional
+  // --bgcolor-table: #; // optional
+  // --border-color-table: #; // optional
+  // --color-table-hover: #; // optional
+  // --bgcolor-table-hover: #; // optional
 
   // Navbar
-  $bgcolor-navbar: $gray-900;
+  --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: $bgcolor-navbar;
-  $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
+  --bgcolor-logo: var(--bgcolor-navbar);
+  --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
+  --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
   $color-resize-button: $color-reversal;
   $bgcolor-resize-button: $accent;
   $color-resize-button-hover: $color-reversal;
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
   // Sidebar contents
-  $color-sidebar-context: $color-global;
-  $bgcolor-sidebar-context: lighten($primary, 77%);
+  --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: #fafafa; // optional
 
   // 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: # # --bgcolor-global; // optional
 
   // Tags
   // $color-tags: #; //optional
   // $bgcolor-tags: #; //optional
 
   // Icon colors
-  $color-editor-icons: $color-global;
+  --color-editor-icons: var(--color-global);
 
   // Border colors
   $border-color-theme: $gray-400;
   $bordercolor-inline-code: $gray-400; // optional
 
   // Dropdown colors
-  $bgcolor-dropdown-link-active: $growi-blue;
+  --bgcolor-dropdown-link-active: $growi-blue;
 
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
@@ -109,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%));
     }
   }
 }
@@ -117,81 +121,83 @@
 //== Dark Mode
 //
 :root[data-theme='dark'] {
-  $primary: #115cd3;
+  --primary: #115cd3;
   $accent: #db00c2;
 
   // Background colors
-  $bgcolor-global: #131418;
+  --bgcolor-global: #131418;
   $bgcolor-inline-code: #1f1f22; //optional
-  $bgcolor-card: darken($bgcolor-global, 5%);
+  --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: $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-hover: lighten($color-link, 10%);
-  $color-link-wiki: $color-link;
-  $color-link-wiki-hover: lighten($color-link-wiki, 10%);
-  $color-link-nabvar: #a7a7a7;
-  $color-inline-code: #c7254e; // optional
+  --color-link: #7b9ad5;
+  --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-nabvar: #a7a7a7;
+  --color-inline-code: #c7254e; // optional
 
   // List Group colors
-  // $color-list: $color-global; // optional
-  // $bgcolor-list: $bgcolor-global; // optional
-  // $color-list-hover: $color-global; // optional
-  // $bgcolor-list-hover: lighten($bgcolor-global, 3%); // optional
-  // $color-list-active:white ; // optional
+  --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
+  // --color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
 
   // Table colors
-  // $color-table: #; // optional
-  // $bgcolor-table: #; // optional
-  // $border-color-table: #; // optional
-  // $color-table-hover: #; // optional
-  // $bgcolor-table-hover: #; // optional
+  // --color-table: #; // optional
+  // --bgcolor-table: #; // optional
+  // --border-color-table: #; // optional
+  // --color-table-hover: #; // optional
+  // --bgcolor-table-hover: #; // optional
 
   // Navbar
-  $bgcolor-navbar: #2a2929;
+  --bgcolor-navbar: #2a2929;
   $bgcolor-search-top-dropdown: $accent;
   $border-image-navbar: linear-gradient(to right, #44bfe3 0%, #b04aff 50%, #ff1794 100%);
 
   // Logo colors
-  $bgcolor-logo: $bgcolor-navbar;
-  $fillcolor-logo-mark: $gray-700;
+  $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
-  $text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // 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%);
   // Sidebar contents
-  $bgcolor-sidebar-context: lighten($bgcolor-global, 8%);
-  $color-sidebar-context: $color-global;
+  --color-sidebar-context: var(--color-global);
+
   // Sidebar list group
-  $bgcolor-sidebar-list-group: #1c2a3e; // optional
+  --bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Subnavigation
-  $bgcolor-subnav: lighten($bgcolor-global, 4%); // optional
+  --bgcolor-subnav: hsl(from var(--bgcolor-global) h s calc(l 4%)); // optional
 
   // Tabs
   $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: # # $bgcolor-global; // optional
+  // $bordercolor-nav-tabs-active: # # var(--bgcolor-global); // optional
 
   // Tags
   // $color-tags: #; //optional
   // $bgcolor-tags: #; //optional
 
   // Icon colors
-  $color-editor-icons: $color-global;
+  --color-editor-icons: var(--color-global);
 
   // Border colors
   $border-color-theme: $gray-400;

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

@@ -4,46 +4,26 @@
 @use './mixins/count-badge';
 
 // determine optional variables
-$color-list: $color-global !default;
-$bgcolor-list: $bgcolor-global !default;
-$color-list-hover: $color-global !default;
-$bgcolor-list-hover: lighten($bgcolor-global, 8%) !default;
 $color-list-active: $color-reversal !default;
 $bgcolor-list-active: $primary !default;
-$bgcolor-subnav: lighten($bgcolor-global, 3%) !default;
-$color-table: white !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: $bgcolor-list !default;
 $color-tags: #949494 !default;
 $bgcolor-tags: $dark !default;
 $border-color-global: $gray-500 !default;
 $border-color-toc: $border-color-global !default;
-$color-dropdown: $color-global !default;
-$bgcolor-dropdown: $bgcolor-global !default;
-$color-dropdown-link: $color-global !default;
 $color-dropdown-link-hover: $light !default;
-$bgcolor-dropdown-link-hover: lighten($bgcolor-global, 15%) !default;
 $color-dropdown-link-active: $light !default;
 $bgcolor-dropdown-link-active: $primary !default;
 
 // override bootstrap variables
 $text-muted: $gray-550;
-$table-dark-color: $color-table;
 $table-dark-bg: $bgcolor-table;
 $table-dark-border-color: $border-color-table;
-$table-dark-hover-color: $color-table-hover;
 $table-dark-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
-$dropdown-color: $color-dropdown;
-$dropdown-bg: $bgcolor-dropdown;
-$dropdown-link-color: $color-dropdown-link;
-$dropdown-link-hover-color: $color-dropdown-link-hover;
-$dropdown-link-hover-bg: $bgcolor-dropdown-link-hover;
-$dropdown-link-active-color: $color-dropdown-link-active;
-$dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
 @import './mixins/list-group';
 @import './reboot-bootstrap-text';
@@ -52,8 +32,6 @@ $dropdown-link-active-bg: $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);
-
 /*
   * Form
   */
@@ -61,11 +39,8 @@ input.form-control,
 select.form-control,
 select.custom-select,
 textarea.form-control {
-  color: $color-global;
-  background-color: darken($bgcolor-global, 5%);
   border-color: $border-color-global;
   &:focus {
-    background-color: $bgcolor-global;
   }
   // FIXME: accent color
   // border: 1px solid darken($border, 30%);
@@ -73,8 +48,6 @@ textarea.form-control {
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: lighten($color-global, 10%);
-  background-color: lighten($bgcolor-global, 5%);
 }
 
 .input-group > .input-group-prepend > .input-group-text {
@@ -92,7 +65,6 @@ textarea.form-control {
 }
 
 label.custom-control-label::before {
-  background-color: darken($bgcolor-global, 5%);
 }
 
 /*
@@ -226,7 +198,6 @@ ul.pagination {
   .page-list-ul {
     > li {
       > span.page-list-meta {
-        color: darken($color-global, 10%);
       }
     }
   }
@@ -234,13 +205,10 @@ ul.pagination {
   // List group
   .list-group-item {
     &.active {
-      background-color: lighten($bgcolor-global, 9%) !important;
     }
     .list-group-item-action:hover {
-      background-color: $bgcolor-list-hover;
     }
     .page-list-snippet {
-      color: darken($body-color, 10%);
     }
   }
 }
@@ -250,7 +218,6 @@ ul.pagination {
  */
 .revision-toc-content {
   ::marker {
-    color: lighten($bgcolor-global, 30%);
   }
 }
 
@@ -258,17 +225,14 @@ ul.pagination {
  * GROWI subnavigation
  */
 .grw-subnav {
-  background-color: $bgcolor-subnav;
 }
 
 .grw-subnav-fixed-container .grw-subnav {
-  background-color: rgba($bgcolor-subnav, 0.85);
 }
 
 .grw-page-editor-mode-manager {
   .btn-outline-primary {
     &:hover {
-      color: $primary;
       background-color: $gray-700;
     }
   }
@@ -276,7 +240,7 @@ ul.pagination {
 
 // Search drop down
 #search-typeahead-asynctypeahead {
-  background-color: $bgcolor-global;
+  background-color: var(--bgcolor-global);
   .table {
     background-color: transparent;
   }
@@ -286,39 +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() {
-        background-color: lighten($bgcolor-sidebar-context, 20%);
-      }
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active {
-        background-color: lighten($bgcolor-sidebar-context, 34%);
-      }
-      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;
   }
 }
 
@@ -339,7 +281,6 @@ ul.pagination {
  * Popover
  */
 .popover {
-  background-color: $bgcolor-global;
   border-color: $secondary;
   .popover-header {
     color: $white;
@@ -356,7 +297,6 @@ ul.pagination {
     }
 
     &::after {
-      border-top-color: $bgcolor-global;
     }
   }
   &.bs-popover-bottom .arrow {
@@ -365,7 +305,6 @@ ul.pagination {
     }
 
     &::after {
-      border-bottom-color: $bgcolor-global;
     }
   }
   &.bs-popover-right .arrow {
@@ -374,7 +313,6 @@ ul.pagination {
     }
 
     &::after {
-      border-right-color: $bgcolor-global;
     }
   }
   &.bs-popover-left .arrow {
@@ -383,7 +321,6 @@ ul.pagination {
     }
 
     &::after {
-      border-left-color: $bgcolor-global;
     }
   }
 }
@@ -403,7 +340,6 @@ ul.pagination {
   $color-slack: #4b144c;
 
   .form-control {
-    background: $bgcolor-global;
   }
 
   .custom-control-label {
@@ -469,7 +405,6 @@ ul.pagination {
 }
 
 .page-comments-row {
-  background: $bgcolor-subnav;
 }
 
 /*
@@ -534,5 +469,4 @@ ul.pagination {
  * skeleton
  */
 .grw-skeleton {
-  background-color: lighten($bgcolor-subnav, 15%);
 }

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

@@ -4,41 +4,24 @@
 @use './mixins/count-badge';
 
 // determine optional variables
-$color-list: $color-global !default;
-$bgcolor-list: $bgcolor-global !default;
-$color-list-hover: $color-global !default;
-$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: $color-global !default;
 $bgcolor-table: null !default;
 $border-color-table: $gray-200 !default;
-$color-table-hover: $color-table !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;
 $border-color-toc: $border-color-global !default;
-$color-dropdown: $color-global !default;
-$color-dropdown-link: $color-global !default;
-$color-dropdown-link-hover: $color-global !default;
 $color-dropdown-link-active: $color-reversal !default;
 $bgcolor-dropdown-link-active: $primary !default;
 
 // override bootstrap variables
 $text-muted: $gray-500;
-$table-color: $color-table;
 $table-bg: $bgcolor-table;
 $table-border-color: $border-color-table;
-$table-hover-color: $color-table-hover;
 $table-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
-$dropdown-color: $color-dropdown;
-$dropdown-link-color: $color-dropdown-link;
-$dropdown-link-hover-color: $color-dropdown-link-hover;
-$dropdown-link-active-color: $color-dropdown-link-active;
-$dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
 @import './mixins/list-group';
 @import './reboot-bootstrap-text';
@@ -47,30 +30,23 @@ $dropdown-link-active-bg: $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);
-
 /*
  * Form
  */
 .form-control {
-  background-color: $bgcolor-global;
 }
 
 .form-control::placeholder {
-  color: darken($bgcolor-global, 20%);
 }
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: lighten($color-global, 10%);
-  background-color: darken($bgcolor-global, 5%);
 }
 
 /*
  * card
  */
 .card.card-disabled {
-  background-color: darken($bgcolor-card, 5%);
   border-color: $gray-200;
 }
 
@@ -157,11 +133,9 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  * GROWI subnavigation
  */
 .grw-subnav {
-  background-color: $bgcolor-subnav;
 }
 
 .grw-subnav-fixed-container .grw-subnav {
-  background-color: rgba($bgcolor-subnav, 0.85);
 }
 
 .grw-page-editor-mode-manager {
@@ -183,7 +157,6 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  */
 .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.
@@ -191,22 +164,12 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   }
   // 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;
     }
   }
 }
@@ -230,14 +193,12 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   .page-list-ul {
     > li {
       > span.page-list-meta {
-        color: lighten($color-global, 10%);
       }
     }
   }
   // List group
   .list-group-item {
     .page-list-snippet {
-      color: lighten($body-color, 10%);
     }
   }
 }
@@ -247,7 +208,6 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  */
 .revision-toc-content {
   ::marker {
-    color: darken($bgcolor-global, 20%);
   }
 }
 
@@ -362,7 +322,6 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 }
 
 .page-comments-row {
-  background: $bgcolor-subnav;
 }
 
 /*
@@ -426,5 +385,4 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  * skeleton
  */
 .grw-skeleton {
-  background-color: darken($bgcolor-subnav, 10%);
 }

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

@@ -12,32 +12,19 @@
 $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: 1px 1px 2px $primary !default;
 $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: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !default;
 $color-btn-reload-in-sidebar: $gray-500;
 $bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
-$bgcolor-page-list-group-item-active: lighten($primary, 76%) !default;
-$color-page-list-group-item-meta: $gray-500 !default;
-$color-search-page-list-title: $color-global !default;
-$bgcolor-subnav: darken($bgcolor-global, 3%) !default;
 
 // override bootstrap variables
-$body-bg: $bgcolor-global;
-$body-color: $color-global;
-$link-color: $color-link;
-$link-hover-color: $color-link-hover;
-$input-focus-color: $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: $bgcolor-global;
-$nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
 $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 
 @import 'reboot-bootstrap-buttons';
@@ -77,7 +64,6 @@ code:not([class^='language-']) {
     fill: $secondary;
   }
   .grw-color-mode-icon svg {
-    fill: $color-global;
   }
   .grw-color-mode-icon-muted svg {
     fill: $secondary;
@@ -91,12 +77,10 @@ code:not([class^='language-']) {
 
 // Tabs
 .nav.nav-tabs .nav-link.active {
-  color: $color-link !important;
   background: transparent;
 
   &:hover,
   &:focus {
-    color: $color-link-hover !important;
   }
 }
 
@@ -148,10 +132,6 @@ ul.pagination {
     transition: fill 0.8s ease-out;
   }
 
-  svg {
-    fill: $fillcolor-logo-mark;
-  }
-
   &:hover {
     svg {
       .group1 {
@@ -166,16 +146,13 @@ ul.pagination {
 }
 
 .grw-navbar {
-  background: $bgcolor-navbar;
   .nav-item .nav-link {
-    color: $color-link-nabvar;
   }
 
   border-image: $border-image-navbar;
   border-image-slice: 1;
 
   .grw-app-title {
-    color: $fillcolor-logo-mark;
   }
 }
 
@@ -186,13 +163,11 @@ ul.pagination {
 
   // for https://youtrack.weseek.co.jp/issue/GW-2603
   .search-typeahead {
-    background-color: rgba($bgcolor-global, 0.9);
   }
 }
 
 .grw-sidebar {
   .grw-navigation-resize-button {
-    $color-resize-button: $color-global !default;
     $bgcolor-resize-button: white !default;
     $color-resize-button-hover: $color-reversal !default;
     $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%) !default;
@@ -216,13 +191,10 @@ ul.pagination {
   }
   div.grw-global-navigation {
     > div {
-      background-color: $bgcolor-sidebar;
     }
   }
   div.grw-contextual-navigation {
     > div {
-      color: $color-sidebar-context;
-      background-color: $bgcolor-sidebar-context;
     }
   }
 
@@ -241,11 +213,10 @@ ul.pagination {
   .grw-sidebar-nav-primary-container {
     .btn.active {
       i {
-        text-shadow: $text-shadow-sidebar-nav-item-active;
+        text-shadow: var(--text-shadow-sidebar-nav-item-active);
       }
       // fukidashi
       &:after {
-        border-right-color: $bgcolor-sidebar-context;
       }
     }
   }
@@ -261,20 +232,16 @@ ul.pagination {
       }
 
       .custom-control-label::after {
-        background-color: $bgcolor-global;
       }
 
       .custom-control-input:not(:checked) + .custom-control-label::before {
-        color: $bgcolor-global;
       }
 
       .custom-control-input:checked + .custom-control-label::before {
-        color: $bgcolor-global;
         background-color: $primary;
         // border-color: $primary !important;
       }
       .custom-control-input:checked + .custom-control-label::after {
-        color: $bgcolor-global;
       }
     }
   }
@@ -298,7 +265,7 @@ ul.pagination {
         background-color: transparent;
 
         .icon-lock {
-          color: $color-link;
+          color: var(--color-link);
         }
 
         .grw-recent-changes-item-lower {
@@ -317,7 +284,6 @@ ul.pagination {
  * Icon
  */
 .editor-container .navbar-editor svg {
-  fill: $color-editor-icons;
 }
 
 // page preview button in link form
@@ -344,7 +310,6 @@ ul.pagination {
   }
 
   .modal-content {
-    background-color: $bgcolor-global;
   }
 
   .modal-footer {
@@ -356,13 +321,10 @@ ul.pagination {
   .nav-item {
     &:hover,
     &:focus {
-      background-color: rgba($color-link, 0.08);
     }
     .nav-link {
       -webkit-appearance: none;
-      color: $color-link;
       svg {
-        fill: $color-link;
       }
 
       // Disabled state lightens text
@@ -376,7 +338,7 @@ ul.pagination {
   }
 
   .grw-nav-slide-hr {
-    border-color: $color-link;
+    border-color: var(--color-link);
   }
 }
 
@@ -392,8 +354,6 @@ ul.pagination {
  * cards
  */
 .card.well {
-  color: $color-global;
-  background-color: $bgcolor-card;
   border-color: $light;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
@@ -446,21 +406,17 @@ ul.pagination {
   }
 
   a {
-    color: $color-link-wiki;
 
     &:hover {
-      color: $color-link-wiki-hover;
     }
   }
 
   // table with handsontable modal button
   .editable-with-handsontable {
     button {
-      color: $color-link-wiki;
     }
 
     button:hover {
-      color: $color-link-wiki-hover;
     }
   }
 }
@@ -474,26 +430,19 @@ ul.pagination {
     .list-group-item {
       a {
         svg {
-          fill: $color-global;
         }
 
         @include hover() {
           svg {
-            fill: $color-global;
           }
         }
       }
 
       .page-list-meta {
-        color: $color-page-list-group-item-meta;
-        svg {
-          fill: $color-page-list-group-item-meta;
-        }
       }
 
       &.list-group-item-action {
         &.active {
-          background-color: $bgcolor-page-list-group-item-active;
           border-left-color: $primary;
         }
       }
@@ -506,19 +455,16 @@ ul.pagination {
  */
 .layout-root.editing {
   .main {
-    background-color: darken($bgcolor-global, 2%);
 
     .page-editor-editor-container {
       border-right-color: $border-color-theme;
 
       .navbar-editor {
-        background-color: $bgcolor-global; // same color with active tab
         border-bottom-color: $border-color-theme;
       }
     }
 
     .page-editor-preview-container {
-      background-color: $bgcolor-global;
     }
   }
 }
@@ -528,8 +474,6 @@ ul.pagination {
  */
 body.editing-sidebar {
   .page-editor-preview-body {
-    color: $color-sidebar-context;
-    background-color: $bgcolor-sidebar-context;
   }
 }
 
@@ -540,10 +484,8 @@ body.editing-sidebar {
   .desktop-preview,
   .tablet-preview,
   .mobile-preview {
-    background: $bgcolor-global;
   }
   .grid-edit-border-for-each-cols {
-    border: 2px solid $bgcolor-global;
   }
 }
 
@@ -559,10 +501,8 @@ body.editing-sidebar {
  * GROWI comment
  */
 .page-comment-meta .page-comment-revision svg {
-  fill: $color-link;
 
   &:hover {
-    fill: $color-link-hover;
   }
 }
 
@@ -572,17 +512,13 @@ body.editing-sidebar {
 .page-comments {
   .page-comment .page-comment-main,
   .page-comment-form .comment-form-main {
-    background-color: $bgcolor-global;
 
     &:before {
-      border-right-color: $bgcolor-global;
     }
 
     .nav.nav-tabs {
       > li > a.active {
         background: transparent;
-        border-bottom: solid 1px darken($bgcolor-global, 4%);
-        border-bottom-color: darken($bgcolor-global, 4%);
       }
     }
   }
@@ -593,10 +529,8 @@ body.editing-sidebar {
  */
 .search-result-base {
   .grw-search-page-nav {
-    background-color: $bgcolor-subnav;
   }
   .search-control {
-    background-color: $bgcolor-global;
   }
   .page-list {
     .highlighted-keyword {
@@ -617,7 +551,6 @@ mark.rbt-highlight-text {
  * GROWI page content footer
  */
 .page-content-footer {
-  background-color: darken($bgcolor-global, 2%);
   border-top-color: $border-color-theme;
 }
 
@@ -636,7 +569,6 @@ mark.rbt-highlight-text {
   #themeOptions {
     .theme-option-container.active {
       .theme-option-name {
-        color: $color-global;
       }
       a {
         background-color: $color-theme-color-box;
@@ -650,7 +582,6 @@ mark.rbt-highlight-text {
  * HackMd
  */
 .bg-box {
-  background-color: $bgcolor-global;
 }
 
 .grw-fab {

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

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

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: $body-color;
-  background-color: $body-bg; // 2
-
-  svg {
-    fill: $body-color;
-  }
-}
-
-// Links
-
-a {
-  color: $link-color;
-  text-decoration: $link-decoration;
-  background-color: transparent; // Remove the gray background on active links in IE 10.
-
-  svg {
-    fill: $link-color;
-  }
-
-  @include hover() {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
-
-    svg {
-      fill: $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/_reboot-bootstrap-theme-colors.scss

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

packages/preset-themes/src/styles/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);
       }
     }
   }