Merge pull request #7126 from weseek/imprv/_apply-colors-apply-to-bootstrap

imprv:apply colors apply to bootstrap

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

@@ -4,42 +4,41 @@
 @use '../atoms/mixins/code';
 @use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
 @use './mixins/hsl-button';
+@use './hsl-functions' as hsl;
 
 //
 //== Apply to Bootstrap
 //
 
 // // determine optional variables
-// $border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
-// $bgcolor-search-top-dropdown: $secondary !default;
-// $bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
-// $text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
-
-$bgcolor-inline-code: var(--bgcolor-inline-code, $gray-100);
+$border-image-navbar: var(--border-image-navbar,linear-gradient(to right, $gray-300 0%, $gray-300 100%));
+$bgcolor-search-top-dropdown: var(--bgcolor-search-top-dropdown,$secondary);
+$bgcolor-sidebar-nav-item-active: var(--bgcolor-sidebar-nav-item-active,#{hsl.darken(var(--primary),10%)});
+$text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
+$bgcolor-inline-code: var(--bgcolor-inline-code, #{$gray-100});
 $color-inline-code: var(--color-inline-code, darken($red, 15%));
-$bordercolor-inline-code: var(--bordercolor-inline-code, $gray-400);
-
-// $bordercolor-nav-tabs: $gray-300 !default;
-// $bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
-// $color-nav-tabs-link-active: $gray-600 !default;
-// $bordercolor-nav-tabs-active: var(--ordercolor-nav-tabs-active,var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global));
-// $color-btn-reload-in-sidebar: $gray-500;
-// $bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
-// $color-page-list-group-item-meta: var(--color-page-list-group-item-meta,$gray-500);
-// $color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
+$bordercolor-inline-code: var(--bordercolor-inline-code, #{$gray-400});
+$bordercolor-nav-tabs: var(--bordercolor-nav-tabs, #{$gray-300});
+$bordercolor-nav-tabs-hover: var(--bordercolor-nav-tabs-hover,#{$gray-200} #{$gray-200} var(--bordercolor-nav-tabs));
+$border-nav-tabs-link-activec: var(--border-nav-tabs-link-active, #{$gray-600});
+$bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs-active,var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global));
+$color-btn-reload-in-sidebar: var(--color-btn-reload-in-sidebar,#{$gray-500});
+$bgcolor-keyword-highlighted: var(--bgcolor-keyword-highlighted,var.$grw-marker-yellow);
+$color-page-list-group-item-meta: var(--color-page-list-group-item-meta,#{$gray-500});
+$color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
 
 // // override bootstrap variables
-// $body-bg: var(--bgcolor-global);
-// $body-color: var(--color-global);
-// $link-color: var(--color-link);
-// $link-hover-color: var(--color-link-hover);
-// $input-focus-color: var(--color-global);
-// $nav-tabs-border-color: $bordercolor-nav-tabs;
-// $nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
-// $nav-tabs-link-active-color: $color-nav-tabs-link-active;
-// $nav-tabs-link-active-bg: var(--bgcolor-global);
-// $nav-tabs-link-active-border-color: var(--bordercolor-nav-tabs-active);
-// $theme-colors: map-merge($theme-colors, ( primary: $primary ));
+$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: var(--bordercolor-nav-tabs);
+$nav-tabs-link-hover-border-color: var(--bordercolor-nav-tabs-hover);
+$nav-tabs-link-active-color: var(--color-nav-tabs-link-active);
+$nav-tabs-link-active-bg: var(--bgcolor-global);
+$nav-tabs-link-active-border-color: var(--bordercolor-nav-tabs-active);
+$theme-colors: map-merge($theme-colors, ( primary: $primary ));
 
 @import 'reboot-bootstrap-buttons';
 @import 'reboot-bootstrap-colors';
@@ -48,31 +47,40 @@ $bordercolor-inline-code: var(--bordercolor-inline-code, $gray-400);
 @import 'reboot-toastr-colors';
 
 // // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
-// $color-modal-header: color-yiq($primary) !default;
+$color-modal-header: var(--color-modal-header,contrast(var(--primary)));
 
 code:not([class^='language-']) {
   @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
 }
 
 .code-highlighted {
-  border-color: $bordercolor-inline-code;
+  border-color: var(--ordercolor-inline-code);
 }
 
 //
 //== Apply to Bootstrap Elements
 //
 
+// Alert link
+// @each $color, $value in $theme-colors {
+//   .alert.alert-#{$color} {
+//     a,
+//     a:hover {
+//       color: theme-color-level($color, $alert-color-level - 2);
+//     }
+//   }
+// }
 
 // // Dropdown
 // .grw-apperance-mode-dropdown {
 //   .grw-sidebar-mode-icon svg {
-//     fill: $secondary;
+//     fill: var(--secondary);
 //   }
 //   .grw-color-mode-icon svg {
 //     fill: var(--color-global);
 //   }
 //   .grw-color-mode-icon-muted svg {
-//     fill: $secondary;
+//     fill: var(--secondary);
 //   }
 // }
 
@@ -314,84 +322,84 @@ code:not([class^='language-']) {
 //   fill: white;
 // }
 
-// /*
-//  * Modal
-//  */
-// .modal {
-//   .modal-header {
-//     border-bottom-color: $border-color-theme;
-//     .modal-title {
-//       color: $color-modal-header;
-//     }
-//     .close {
-//       color: $color-modal-header;
-//       opacity: 0.5;
-//       &:hover {
-//         opacity: 0.9;
-//       }
-//     }
-//   }
-
-//   .modal-content {
-//     background-color: var(--bgcolor-global);
-//   }
+/*
+ * Modal
+ */
+.modal {
+  .modal-header {
+    border-bottom-color: var(--border-color-theme);
+    .modal-title {
+      color: var(--color-modal-header);
+    }
+    .close {
+      color: var(--color-modal-header);
+      opacity: 0.5;
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+  }
 
-//   .modal-footer {
-//     border-top-color: $border-color-theme;
-//   }
-// }
+  .modal-content {
+    background-color: var(--bgcolor-global);
+  }
 
-// .grw-custom-nav-tab {
-//   .nav-item {
-//     &:hover,
-//     &:focus {
-//       background-color: var(--color-link); opacity:0.9;
-//     }
-//     .nav-link {
-//       -webkit-appearance: none;
-//       color: var(--color-link);
-//       svg {
-//         fill: var(--color-link);
-//       }
+  .modal-footer {
+    border-top-color: var(--border-color-theme);
+  }
+}
 
-//       // Disabled state lightens text
-//       &.disabled {
-//         color: $nav-link-disabled-color;
-//         svg {
-//           fill: $nav-link-disabled-color;
-//         }
-//       }
-//     }
-//   }
+.grw-custom-nav-tab {
+  .nav-item {
+    &:hover,
+    &:focus {
+      background-color: var(--color-link); opacity:0.9;
+    }
+    .nav-link {
+      -webkit-appearance: none;
+      color: var(--color-link);
+      svg {
+        fill: var(--color-link);
+      }
+
+      // Disabled state lightens text
+      &.disabled {
+        color: $nav-link-disabled-color;
+        svg {
+          fill: $nav-link-disabled-color;
+        }
+      }
+    }
+  }
 
-//   .grw-nav-slide-hr {
-//     border-color: var(--color-link);
-//   }
-// }
+  .grw-nav-slide-hr {
+    border-color: var(--color-link);
+  }
+}
 
-// .grw-page-accessories-modal {
-//   .modal-header {
-//     .close {
-//       color: $secondary;
-//     }
-//   }
-// }
+.grw-page-accessories-modal {
+  .modal-header {
+    .close {
+      color: $secondary;
+    }
+  }
+}
 
-// /*
-//  * cards
-//  */
-// .card.well {
-//   color: var(--color-global);
-//   background-color: var(--bgcolor-card);
-//   border-color: $light;
-//   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-// }
+/*
+ * cards
+ */
+.card.well {
+  color: var(--color-global);
+  background-color: var(--bgcolor-card);
+  border-color: $light;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
 
-// .admin-bot-card {
-//   .grw-botcard-title-active {
-//     color: $gray-200;
-//   }
-// }
+.admin-bot-card {
+  .grw-botcard-title-active {
+    color: $gray-200;
+  }
+}
 
 // /*
 //  * Form Slider
@@ -430,9 +438,9 @@ code:not([class^='language-']) {
 //     }
 //   }
 
-//   .highlighted-keyword {
-//     background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
-//   }
+.highlighted-keyword {
+  background: linear-gradient(transparent 60%, var(--bgcolor-keyword-highlighted) 60%);
+}
 
 //   a {
 //     color: var(--color-link-wiki);
@@ -481,9 +489,8 @@ code:not([class^='language-']) {
 //       }
 
 //       &.list-group-item-action {
-//         --bgcolor-page-list-group-item-active: hsl(from var(--bgcolor-global) h s calc(l + 76%));
 //         &.active {
-//           background-color: var(--bgcolor-page-list-group-item-active);
+//           background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 76%));
 //           border-left-color: $primary;
 //         }
 //       }
@@ -500,11 +507,11 @@ code:not([class^='language-']) {
 //     background-color: var(--bgcolor-global-darken2);
 
 //     .page-editor-editor-container {
-//       border-right-color: $border-color-theme;
+//       border-right-color: var(--border-color-theme);
 
 //       .navbar-editor {
 //         background-color: var(--bgcolor-global); // same color with active tab
-//         border-bottom-color: $border-color-theme;
+//         border-bottom-color: var(--border-color-theme);
 //       }
 //     }
 
@@ -598,11 +605,11 @@ code:not([class^='language-']) {
 //   .search-control {
 //     background-color: var(--bgcolor-global);
 //   }
-//   .page-list {
-//     .highlighted-keyword {
-//       background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
-//     }
-//   }
+.page-list {
+  .highlighted-keyword {
+    background: linear-gradient(transparent 60%, var(--bgcolor-keyword-highlighted) 60%);
+  }
+}
 // }
 
 // /*

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

@@ -1,6 +1,7 @@
 @use './variables' as *;
 @use './bootstrap/variables' as *;
 @use './theme/mixins/page-editor-mode-manager';
+@use './theme/hsl-functions' as hsl;
 
 // == Define Bootstrap theme colors
 //
@@ -20,7 +21,7 @@
   --primary: hsl(var(--primary-hs),var(--primary-l));
   --primary-hs: 216.7,65%;
   --primary-l: 20.2%;
-  --accent: #209fd8;
+  --accent: hsl(var(--accent-hs),var(--accent-l));
   --accent-hs: 216.7,65%;
   --accent-l: 20.2%;
   $accent: #209fd8;
@@ -30,7 +31,6 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 0,0%;
   --bgcolor-global-l: 100%;
-  --body-bg: var(--bgcolor-global);
   $bgcolor-inline-code: $gray-100; //optional
   --bgcolor-card: #{$gray-50};
   $bgcolor-blinked-section: rgba($primary, 0.1);
@@ -45,11 +45,11 @@
   --color-link: hsl(var(--color-link-hs),var(--color-link-l));
   --color-link-hs: 228.4,76.3%;
   --color-link-l: 41.4%;
-  --color-link-hover: hsl(var(--color-link-hs),calc(var(--color-link-l) + 20%));
+  --color-link-hover: #{hsl.lighten(var(--color-link),20%)};
   --color-link-wiki: var(--color-link);
   --color-link-wiki-hs: var(--color-link-hs);
   --color-link-wiki-l: var(--color-link-l);
-  --color-link-wiki-hover: hsl(var(--color-link-wiki-hs),calc(var(--color-link-wiki-l) + 20%));
+  --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),20%)};
   --color-link-nabvar: #{$gray-500};
   $color-inline-code: darken($red, 15%); // optional
 
@@ -57,7 +57,7 @@
   --color-list: var(--color-global); // optional
   --bgcolor-list: var(--bgcolor-global); // optional
   // --color-list-hover: va(--color-global); // optional
-  --bgcolor-list-hover: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 3%));// optional
+  --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};// optional
   // --color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
 
@@ -81,7 +81,6 @@
   --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 20%),calc(var(--bgcolor-navbar-l) + 15%));
   // Sidebar
   --bgcolor-sidebar: var(--primary);
-  $bgcolor-sidebar: #122c55;
   --bgcolor-sidebar-hs: var(--primary-hs);
   --bgcolor-sidebar-l: var(--primary-l);
   --bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
@@ -99,7 +98,7 @@
   --bgcolor-sidebar-list-group: #{$gray-50}; // optional
 
   // Subnavigation
-  --bgcolor-subnav: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 3%));
+  --bgcolor-subnav: #{hsl.darken(var(--bgcolor-global),3%)};
   // Tabs
   // $color-nav-tabs-link-active: #; //optional
   // $bordercolor-nav-tabs-hover: # # $bordercolor-nav-tabs; // optional
@@ -113,7 +112,7 @@
   --color-editor-icons: var(--color-global);
 
   // Border colors
-  $border-color-theme: $gray-400;
+  --border-color-theme: #{$gray-400};
   $bordercolor-inline-code: $gray-400; // optional
 
   // Dropdown colors
@@ -129,7 +128,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 (var(--primary),#{hsl.lighten(var(--primary),65%)}, #{hsl.lighten(var(--primary),70%)});
     }
   }
 }
@@ -146,9 +145,8 @@
   --bgcolor-global: #131418;
   --bgcolor-global-hs: 228,11.6%;
   --bgcolor-global-l: 9.4%;
-  --body-bg: var(--bgcolor-global);
   $bgcolor-inline-code: #1f1f22; //optional
-  --bgcolor-card: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 5%));
+  --bgcolor-card: #{hsl.darken(var(--bgcolor-global),5%)};
   $bgcolor-blinked-section: rgba($primary, 0.4);
   $bgcolor-keyword-highlighted: darken($grw-marker-red, 30%);
 
@@ -159,15 +157,13 @@
   $color-reversal: $gray-900;
   // $color-header: desaturate($primary, 20%);
   --color-link: #7b9ad5;
-  --link-color: var(--color-link);
   --color-link-hs: 219.3,51.7%;
   --color-link-l: 65.9%;
-  --color-link-hover: hsl(var(--color-link-hs), calc(var(--color-link-l) + 10%));
-  --link-hover-color: var(--color-link-hover);
+  --color-link-hover: #{hsl.lighten(var(--color-link),10%)};
   --color-link-wiki: var(--color-link);
   --color-link-wiki-hs: var(--color-link-hs);
   --color-link-wiki-l: var(--color-link-l);
-  --color-link-wiki-hover: hsl(var(--color-link-wiki-hs), calc(var(--color-link-wiki-l) + 10%));
+  --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),10%)};
   --color-link-nabvar: #a7a7a7;
   --color-inline-code: #c7254e; // optional
 
@@ -175,7 +171,7 @@
   --color-list: var(--color-global); // optional
   --bgcolor-list: var(--bgcolor-global); // optional
   // --color-list-hover: va(--color-global); // optional
-  --bgcolor-list-hover: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 3%)); // optional
+  --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
   // --color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
 
@@ -215,7 +211,7 @@
   --bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Subnavigation
-  --bgcolor-subnav: --bgcolor-list-hover: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 3%));  // optional
+  --bgcolor-subnav: --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};  // optional
 
   // Tabs
   $bordercolor-nav-tabs: $gray-700; // optional
@@ -231,7 +227,7 @@
   --color-editor-icons: var(--color-global);
 
   // Border colors
-  $border-color-theme: $gray-400;
+  --border-color-theme: #{$gray-400};
   $bordercolor-inline-code: $secondary; // optional
 
   // admin theme box

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

@@ -4,51 +4,54 @@
 @use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
 @use '../atoms/mixins/code';
 
+@use './hsl-functions' as hsl;
+
 //
 //== Apply to Bootstrap
 //
 
 // determine optional variables
-$border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
-$bgcolor-search-top-dropdown: $secondary !default;
+// $border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
+// $bgcolor-search-top-dropdown: $secondary !default;
 // $bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
-$text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
+// $text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
 // $bgcolor-inline-code: $gray-100 !default;
 // $color-inline-code: darken($red, 15%) !default;
 // $bordercolor-inline-code: $gray-400 !default;
-$bordercolor-nav-tabs: $gray-300 !default;
-$bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
-$color-nav-tabs-link-active: $gray-600 !default;
-$bordercolor-nav-tabs-active: var(--ordercolor-nav-tabs-active,var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global));
-$color-btn-reload-in-sidebar: $gray-500;
-$bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
-$color-page-list-group-item-meta: var(--color-page-list-group-item-meta,$gray-500);
-$color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
+// $bordercolor-nav-tabs: $gray-300 !default;
+// $bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
+// $color-nav-tabs-link-active: $gray-600 !default;
+// $bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs-active,var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global));
+// color-btn-reload-in-sidebar: $gray-500;
+// $bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
+// $color-page-list-group-item-meta: var(--color-page-list-group-item-meta,$gray-500);
+// $color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
+
 
 // override bootstrap variables
-$body-bg: var(--bgcolor-global);
-$body-color: var(--color-global);
-$link-color: var(--color-link);
-$link-hover-color: var(--color-link-hover);
-$input-focus-color: var(--color-global);
-$nav-tabs-border-color: $bordercolor-nav-tabs;
-$nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
-$nav-tabs-link-active-color: $color-nav-tabs-link-active;
-$nav-tabs-link-active-bg: var(--bgcolor-global);
-$nav-tabs-link-active-border-color: var(--bordercolor-nav-tabs-active);
-$theme-colors: map-merge($theme-colors, ( primary: $primary ));
+// $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: var(--bordercolor-nav-tabs);
+// $nav-tabs-link-hover-border-color: var(--bordercolor-nav-tabs-hover);
+// $nav-tabs-link-active-color: var(--color-nav-tabs-link-active);
+// $nav-tabs-link-active-bg: var(--bgcolor-global);
+// nav-tabs-link-active-border-color: var(--bordercolor-nav-tabs-active);
+// theme-colors: map-merge($theme-colors, ( primary: $primary ));
 
 @import 'reboot-bootstrap-nav';
 
 // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
-$color-modal-header: color-yiq($primary) !default;
+// $color-modal-header: var(--color-modal-header,contrast(var(--primary)));
 
 // code:not([class^='language-']) {
 //   @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
 // }
 
 // .code-highlighted {
-//   border-color: $bordercolor-inline-code;
+//   border-color: var(--bordercolor-inline-code);
 // }
 
 //
@@ -56,14 +59,14 @@ $color-modal-header: color-yiq($primary) !default;
 //
 
 // Alert link
-// @each $color, $value in $theme-colors {
-//   .alert.alert-#{$color} {
-//     a,
-//     a:hover {
-//       color: theme-color-level($color, $alert-color-level - 2);
-//     }
-//   }
-// }
+@each $color, $value in $theme-colors {
+  .alert.alert-#{$color} {
+    a,
+    a:hover {
+      color: theme-color-level($color, $alert-color-level - 2);
+    }
+  }
+}
 
 // Dropdown
 .grw-apperance-mode-dropdown {
@@ -247,7 +250,7 @@ ul.pagination {
 
   .grw-sidebar-content-header {
     .grw-btn-reload {
-      color: $color-btn-reload-in-sidebar;
+      color: var(--color-btn-reload-in-sidebar);
     }
 
     .grw-recent-changes-resize-button {
@@ -325,12 +328,12 @@ ul.pagination {
  */
 .modal {
   .modal-header {
-    border-bottom-color: $border-color-theme;
+    // border-bottom-color: $border-color-theme;
     .modal-title {
-      color: $color-modal-header;
+      // color: $color-modal-header;
     }
     .close {
-      color: $color-modal-header;
+      // color: $color-modal-header;
       opacity: 0.5;
       &:hover {
         opacity: 0.9;
@@ -343,7 +346,7 @@ ul.pagination {
   }
 
   .modal-footer {
-    border-top-color: $border-color-theme;
+    // border-top-color: $border-color-theme;
   }
 }
 
@@ -436,9 +439,9 @@ ul.pagination {
     }
   }
 
-  .highlighted-keyword {
-    background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
-  }
+  // .highlighted-keyword {
+  //   background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
+  // }
 
   a {
     color: var(--color-link-wiki);
@@ -488,7 +491,7 @@ ul.pagination {
 
       &.list-group-item-action {
         &.active {
-          background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 76%));
+          background-color: #{hsl.lighten(var(--bgcolor-global),76%)};
           border-left-color: $primary;
         }
       }
@@ -501,14 +504,14 @@ ul.pagination {
  */
 .layout-root.editing {
   .main {
-    background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 2%));
+    background-color: #{hsl.darken(var(--bgcolor-global),2%)};
 
     .page-editor-editor-container {
-      border-right-color: $border-color-theme;
+      // border-right-color: $border-color-theme;
 
       .navbar-editor {
         background-color: var(--bgcolor-global); // same color with active tab
-        border-bottom-color: $border-color-theme;
+        // border-bottom-color: $border-color-theme;
       }
     }
 
@@ -584,8 +587,8 @@ body.editing-sidebar {
     .nav.nav-tabs {
       > li > a.active {
         background: transparent;
-        border-bottom: solid 1px hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 4%));
-        border-bottom-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 4%));
+        border-bottom: solid 1px #{hsl.darken(var(--bgcolor-global),4%)};
+        border-bottom-color: #{hsl.darken(var(--bgcolor-global),4%)};
       }
     }
   }
@@ -601,11 +604,11 @@ body.editing-sidebar {
   .search-control {
     background-color: var(--bgcolor-global);
   }
-  .page-list {
-    .highlighted-keyword {
-      background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
-    }
-  }
+  // .page-list {
+  //   .highlighted-keyword {
+  //     background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
+  //   }
+  // }
 }
 
 /*
@@ -620,8 +623,8 @@ mark.rbt-highlight-text {
  * GROWI page content footer
  */
 .page-content-footer {
-  background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 2%));
-  border-top-color: $border-color-theme;
+  background-color: #{hsl.darken(var(--bgcolor-global),2%)};
+  // border-top-color: $border-color-theme;
 }
 
 /*

packages/preset-themes/src/styles/theme/_hsl-functions.scss

@@ -0,0 +1,56 @@
+@use 'bootstrap/scss/functions' as bs;
+
+// @function getHS($color-hsl) {
+//   // remove "var(" and ")"
+//   $color: str-replace($color-hsl, 'var(');
+//   $color: str-replace($color, ')');
+//   @return var(#{$color+'-hs'});
+// }
+// @function getL($color-hsl) {
+//   // remove "var(" and ")"
+//   // $color: str-replace(str-replace($color-hsl, 'var('), ')');
+//   $color: str-replace($color-hsl, 'var(');
+//   $color: str-replace($color, ')');
+//   @return var(#{$color+'-l'});
+// }
+
+// @function contrast($color-hsl) {
+//   $color-hs: getHS($color-hsl);
+//   $color-l: getL($color-hsl);
+//   @return hsl($color-hs, clamp(10%, calc((100% - $color-l - 51% ) * 1000), 95%));
+// }
+
+// @function lighten($color-hsl, $degrees) {
+//   $color-hs: getHS($color-hsl);
+//   $color-l: getL($color-hsl);
+//   @return hsl($color-hs, calc($color-l + $degrees));
+// }
+// @function darken($color-hsl, $degrees) {
+//   $color-hs: getHS($color-hsl);
+//   $color-l: getL($color-hsl);
+//   @return hsl($color-hs, calc($color-l - $degrees));
+// }
+
+@function contrast($color, $darken-degrees: 0%) {
+  $color: bs.str-replace($color, 'var(');
+  $color: bs.str-replace($color, ')');
+  $color-hs: var(#{$color+'-hs'});
+  $color-l: var(#{$color+'-l'});
+  // @return hsl($color-hs, clamp(10%, calc((100% - $color-l - 51% ) * 1000), 95%));
+  @return hsl($color-hs, clamp(10%, calc((100% - $color-l - $darken-degrees - 51% ) * 1000), 95%));
+}
+
+@function lighten($color, $degrees) {
+  $color: bs.str-replace($color, 'var(');
+  $color: bs.str-replace($color, ')');
+  $color-hs: var(#{$color+'-hs'});
+  $color-l: var(#{$color+'-l'});
+  @return hsl($color-hs, calc($color-l + $degrees));
+}
+@function darken($color, $degrees) {
+  $color: bs.str-replace($color, 'var(');
+  $color: bs.str-replace($color, ')');
+  $color-hs: var(#{$color+'-hs'});
+  $color-l: var(#{$color+'-l'});
+  @return hsl($color-hs, calc($color-l - $degrees));
+}

packages/preset-themes/src/styles/theme/_override-functions.scss

@@ -0,0 +1,21 @@
+@use './hsl-functions' as hsl;
+
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  @return hsl.contrast($color);
+}
+
+@function lighten($color, $degrees) {
+  @return hsl.lighten($color, $degrees);
+}
+
+@function darken($color, $degrees) {
+  @return hsl.darken($color, $degrees);
+}
+
+@function mix($color1, $color2, $degrees) {
+  @return $color1;
+}
+
+@function rgba($color, $degrees) {
+  @return $color;
+}

packages/preset-themes/src/styles/theme/mixins/_hsl-button.scss

@@ -0,0 +1,64 @@
+@use '../../bootstrap/init' as bs;
+@use '../hsl-functions' as hsl;
+
+// @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
+@mixin button-variant($background, $border, $hover-background-darken-degrees: 7.5%, $hover-border-darken-degrees: 10%, $active-background-darken-degrees: 10%, $active-border-darken-degrees: 12.5%) {
+  $hover-background: hsl.darken($background, $hover-background-darken-degrees);  // DO NOT ... twice
+  $hover-border: hsl.darken($border, $hover-border-darken-degrees);  // DO NOT ... twice
+
+  color: hsl.contrast($background);
+  @include bs.gradient-bg($background);
+  border-color: $border;
+  // @include box-shadow($btn-box-shadow);
+
+  @include bs.hover() {
+    color: hsl.contrast($background, $hover-background-darken-degrees);
+    @include bs.gradient-bg($hover-background);
+    border-color: $hover-border;
+  }
+
+  &:focus,
+  &.focus {
+    color: hsl.contrast($background, $hover-background-darken-degrees);
+    @include bs.gradient-bg($hover-background);
+    border-color: $hover-border;;
+    // @if $enable-shadows {
+    //   @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+    // } @else {
+    //   // Avoid using mixin so we can pass custom focus shadow properly
+    //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+    // }
+  }
+
+  // // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    color: hsl.contrast($background);
+    background-color: $background;
+    border-color: $border;
+    // Remove CSS gradients if they're enabled
+    @if bs.$enable-gradients {
+      background-image: none;
+    }
+  }
+
+  // &:not(:disabled):not(.disabled):active,
+  // &:not(:disabled):not(.disabled).active,
+  // .show > &.dropdown-toggle {
+  //   color: color-yiq($active-background);
+  //   background-color: $active-background;
+  //   @if $enable-gradients {
+  //     background-image: none; // Remove the gradient for the pressed/active state
+  //   }
+  //   border-color: $active-border;
+
+  //   &:focus {
+  //     // @if $enable-shadows and $btn-active-box-shadow != none {
+  //     //   @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+  //     // } @else {
+  //     //   // Avoid using mixin so we can pass custom focus shadow properly
+  //     //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+  //     // }
+  //   }
+  // }
+}