fix hsl.darken lighten

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

@@ -13,7 +13,7 @@
 // // determine optional variables
 $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(var(--primary-hs),calc(var(--primary-l) - 10%)));
+$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%));
@@ -74,13 +74,13 @@ code:not([class^='language-']) {
 // // 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);
 //   }
 // }
 

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

@@ -3,6 +3,7 @@
 @use '../mixins';
 @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;
 
 //
@@ -490,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;
         }
       }
@@ -503,7 +504,7 @@ 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;
@@ -586,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%)};
       }
     }
   }
@@ -622,7 +623,7 @@ mark.rbt-highlight-text {
  * GROWI page content footer
  */
 .page-content-footer {
-  background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 2%));
+  background-color: #{hsl.darken(var(--bgcolor-global),2%)};
   // border-top-color: $border-color-theme;
 }
 

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);
+  //     // }
+  //   }
+  // }
+}