add hsl-reboot-bootstrap-theme-colors

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

@@ -53,6 +53,7 @@
   @import './reboot-bootstrap-border-colors';
   @import './reboot-bootstrap-tables';
   @import './reboot-bootstrap-theme-colors';
+  @import 'hsl-reboot-bootstrap-theme-colors';
   @import './reboot-bootstrap-dropdown';
 
   // List Group

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

@@ -51,6 +51,7 @@
   @import './reboot-bootstrap-border-colors';
   @import './reboot-bootstrap-tables';
   @import './reboot-bootstrap-theme-colors';
+  @import 'hsl-reboot-bootstrap-theme-colors';
   @import './reboot-bootstrap-dropdown';
 
   // List Group

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

@@ -43,6 +43,7 @@ $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 @import 'reboot-bootstrap-buttons';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
+@import 'hsl-reboot-bootstrap-theme-colors';
 @import 'reboot-bootstrap-nav';
 @import 'reboot-toastr-colors';
 

packages/app/src/styles/theme/_hsl-functions.scss

@@ -1,12 +1,12 @@
 @use '~bootstrap/scss/functions' as bs;
 
-@function contrast($color, $darken-degrees: 0%) {
+@function contrast($color, $darken-degrees: 0%, $alpha-degrees: 100%) {
   $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%));
+  @return hsla($color-hs, clamp(10%, calc((100% - $color-l - $darken-degrees - 51% ) * 1000), 95%), $alpha-degrees);
 }
 
 @function lighten($color, $degrees) {
@@ -30,4 +30,3 @@
   $color-l: var(#{$color+'-l'});
   @return hsla($color-hs,$color-l,$degrees);
 }
-

packages/app/src/styles/theme/_hsl-reboot-bootstrap-theme-colors.scss

@@ -0,0 +1,242 @@
+@use '../bootstrap/init' as *;
+@use '../atoms/mixins/buttons' as mixins-buttons;
+@use './mixins/hsl-button';
+@use './hsl-functions' as hsl;
+
+.bg-primary {
+  background-color: var(--primary) !important;
+  a,
+  button {
+    @include hover-focus() {
+      background-color: hsl.darken(var(--primary), 10%) !important;
+    }
+  }
+}
+
+.bg-secondary  {
+  background-color: var(--secondary) !important;
+  a,
+  button {
+    @include hover-focus() {
+      background-color: hsl.darken(var(--secondary), 10%) !important;
+    }
+  }
+}
+
+.border-primary {
+  border-color: var(--primary) !important;
+}
+
+.border-secondary {
+  border-color: var(--secondary) !important;
+}
+
+.text-primary {
+  color: var(--primary) !important;
+  @if $emphasized-link-hover-darken-percentage != 0 {
+    a {
+      @include hover-focus() {
+        color: hsl.darken(var(--primary), $emphasized-link-hover-darken-percentage) !important;
+      }
+    }
+  }
+}
+
+.text-secondary {
+  color: var(--secondary) !important;
+  @if $emphasized-link-hover-darken-percentage != 0 {
+    a {
+      @include hover-focus() {
+        color: hsl.darken(var(--secondary), $emphasized-link-hover-darken-percentage) !important;
+      }
+    }
+  }
+}
+
+
+
+.btn-primary {
+  $color: var(--primary);
+  @include hsl-button.button-variant($color, $color);
+  @include hsl-button.button-svg-icon-variant($color, $color);
+  box-shadow: none !important;
+}
+
+.btn-secondary {
+  $color: var(--secondary);
+  @include hsl-button.button-variant($color, $color);
+  @include hsl-button.button-svg-icon-variant($color, $color);
+  box-shadow: none !important;
+}
+
+.btn-outline-primary {
+  $color: var(--primary);
+  @include hsl-button.button-outline-variant($color, $color, hsl.alpha($color, 90%), $color);
+  @include mixins-buttons.button-outline-svg-icon-variant($color, $color);
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: $color;
+    background-color: hsl.alpha($color, 90%);
+    border-color: $color;
+  }
+
+  box-shadow: none !important;
+}
+
+.btn-outline-secondary {
+  $color: var(--secondary);
+  @include hsl-button.button-outline-variant($color, $color, hsl.alpha($color, 90%), $color);
+  @include mixins-buttons.button-outline-svg-icon-variant($color, $color);
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: $color;
+    background-color: hsl.alpha($color, 90%);
+    border-color: $color;
+  }
+
+  box-shadow: none !important;
+}
+
+// separate style: https://github.com/weseek/growi/pull/6804
+.show > .btn-outline-primary.dropdown-toggle {
+  $color: var(--primary);
+  color: $color;
+  background-color: hsl.alpha($color, 90%);
+  border-color: $color;
+}
+
+.show > .btn-outline-secondary.dropdown-toggle {
+  $color: var(--secondary);
+  color: $color;
+  background-color: hsl.alpha($color, 90%);
+  border-color: $color;
+}
+
+.custom-checkbox-primary {
+  $color: var(--primary);
+  .custom-control-label::before {
+    border-color: $input-border-color;
+    transition: 0.3s ease-in-out;
+  }
+  .custom-control-input:checked + .custom-control-label::before {
+    background-color: $color;
+    border-color: $color;
+  }
+  .custom-control-input:checked + .custom-control-label::after {
+    color: var(--bgcolor-global);
+  }
+  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+    color: var(--bgcolor-global);
+    background-color: $color;
+    border-color: $color;
+  }
+  .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+    color: var(--bgcolor-global);
+    background-color: var(--bgcolor-global);
+    border-color: $input-focus-border-color;
+  }
+}
+
+.custom-checkbox-secondary {
+  $color: var(--secondary);
+  .custom-control-label::before {
+    border-color: $input-border-color;
+    transition: 0.3s ease-in-out;
+  }
+  .custom-control-input:checked + .custom-control-label::before {
+    background-color: $color;
+    border-color: $color;
+  }
+  .custom-control-input:checked + .custom-control-label::after {
+    color: var(--bgcolor-global);
+  }
+  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+    color: var(--bgcolor-global);
+    background-color: $color;
+    border-color: $color;
+  }
+  .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+    color: var(--bgcolor-global);
+    background-color: var(--bgcolor-global);
+    border-color: $input-focus-border-color;
+  }
+}
+
+.alert-primary {
+  $color: var(--primary);
+  $alert-color: hsl.contrast($color,0%,90%);
+  $alert-bg-color: hsl.darken($color, calc($alert-bg-level + 0.95) * $theme-color-interval);
+  $alert-border-color: hsl.darken($color, $alert-border-level * $theme-color-interval);
+
+  color: $alert-color;
+  @include gradient-bg($alert-bg-color);
+  border-color: $alert-border-color;
+
+  hr {
+    border-top-color: hsl.darken($color, calc($alert-border-level + 5) * $theme-color-interval);
+  }
+
+  .alert-link {
+    color: hsl.contrast($color);
+  }
+}
+
+// Alert link
+:root, .wiki {
+  .alert.alert-primary {
+    a,
+    a:hover {
+      color: hsl.darken(var(--primary), calc($alert-bg-level - 7.7) * $theme-color-interval);
+    }
+  }
+}
+
+.alert-secondary {
+  $color: var(--secondary);
+  $alert-color: hsl.contrast($color,0%,90%);
+  $alert-bg-color: hsl.darken($color, calc($alert-bg-level + 0.95) * $theme-color-interval);
+  $alert-border-color: hsl.darken($color, $alert-border-level * $theme-color-interval);
+
+  color: $alert-color;
+  @include gradient-bg($alert-bg-color);
+  border-color: $alert-border-color;
+
+  hr {
+    border-top-color: hsl.darken($color, calc($alert-border-level + 5) * $theme-color-interval);
+  }
+
+  .alert-link {
+    color: hsl.contrast($color);
+  }
+}
+
+// Alert link
+:root, .wiki {
+  .alert.alert-secondary {
+    a,
+    a:hover {
+      color: hsl.darken(var(--secondary), calc($alert-bg-level - 7.7) * $theme-color-interval);
+    }
+  }
+}
+
+
+
+
+.badge-primary {
+  @include hsl-button.badge-variant(var(--primary));
+}
+
+a.badge-primary  {
+  @include hsl-button.badge-variant(var(--primary));
+}
+
+.badge-secondary {
+  @include hsl-button.badge-variant(var(--secondary));
+}
+
+a.badge-secondary  {
+  @include hsl-button.badge-variant(var(--secondary));
+}

packages/app/src/styles/theme/mixins/_hsl-button.scss

@@ -104,3 +104,58 @@
   // }
   // }
 }
+
+// @mixin button-svg-icon-variant($background, $hover-background: darken($background, 7.5%), $active-background: darken($background, 10%)) {
+@mixin button-svg-icon-variant($background, $hover-background-darken-degrees: 7.5%, $active-background-darken-degrees: 10%) {
+  svg {
+    fill: hsl.contrast($background);
+  }
+
+  @include bs.hover() {
+    svg {
+      fill: hsl.contrast($background);
+    }
+  }
+
+  &:focus,
+  &.focus {
+    svg {
+      fill: hsl.contrast($background);
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    svg {
+      fill: hsl.contrast($background);
+    }
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    svg {
+      fill: hsl.contrast($background);
+    }
+  }
+}
+
+// @mixin badge-variant($bg) {
+@mixin badge-variant($bg) {
+  color: hsl.contrast($bg);
+  background-color: $bg;
+
+  @at-root a#{&} {
+    @include bs.hover-focus() {
+      color: hsl.contrast($bg);
+      background-color: hsl.darken($bg, 10%);
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      // box-shadow: 0 0 0 $badge-focus-width hsl.alpha($bg, 50%);
+    }
+  }
+}

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

@@ -21,6 +21,9 @@
   --primary: hsl(var(--primary-hs),var(--primary-l));
   --primary-hs: 216.7,65%;
   --primary-l: 20.2%;
+  --secondary: hsl(var(--secondary-hs),var(--secondary-l));
+  --secondary-hs: 208,7%;
+  --secondary-l: 46%;
   --accent: hsl(var(--accent-hs),var(--accent-l));
   --accent-hs: 198.6,74.2%;
   --accent-l: 48.6%;
@@ -150,6 +153,9 @@
   --primary: hsl(var(--primary-hs),var(--primary-l));
   --primary-hs: 216.8,85.1%;
   --primary-l: 44.7%;
+  --secondary: hsl(var(--secondary-hs),var(--secondary-l));
+  --secondary-hs: 208,7%;
+  --secondary-l: 46%;
   --accent: hsl(var(--accent-hs),var(--accent-l));
   --accent-hs: 307,100%;
   --accent-l: 43%;