Merge pull request #7217 from weseek/imprv/reboot-bootstrap-theme-colors-for-hsl

imprv:reboot bootstrap theme colors for hsl

packages/app/src/components/Admin/UserGroupDetail/UpdateParentConfirmModal.tsx

@@ -43,7 +43,7 @@ export const UpdateParentConfirmModal: FC = () => {
                 {t('admin:user_group_management.update_parent_confirm_modal.danger_message')}
               </div>
 
-              <div className="custom-control custom-checkbox custom-checkbox-primary pl-5">
+              <div className="custom-control custom-checkbox custom-checkbox-succsess pl-5">
                 <input
                   className="custom-control-input"
                   name="forceUpdateParents"

packages/app/src/components/PageRenameModal.tsx

@@ -304,7 +304,7 @@ const PageRenameModal = (): JSX.Element => {
             </label>
           </div>
 
-          <div className="custom-control custom-checkbox custom-checkbox-primary">
+          <div className="custom-control custom-checkbox custom-checkbox-success">
             <input
               className="custom-control-input"
               name="remain_metadata"

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -118,7 +118,7 @@ const SearchControl: FC <Props> = React.memo((props: Props) => {
             </div>
             <div className="d-none d-lg-flex align-items-center ml-auto search-control-include-options">
               <div className="border rounded px-2 py-1 mr-3">
-                <div className="custom-control custom-checkbox custom-checkbox-primary">
+                <div className="custom-control custom-checkbox custom-checkbox-succsess">
                   <input
                     className="custom-control-input mr-2"
                     type="checkbox"
@@ -132,7 +132,7 @@ const SearchControl: FC <Props> = React.memo((props: Props) => {
                 </div>
               </div>
               <div className="border rounded px-2 py-1">
-                <div className="custom-control custom-checkbox custom-checkbox-primary">
+                <div className="custom-control custom-checkbox custom-checkbox-succsess">
                   <input
                     className="custom-control-input mr-2"
                     type="checkbox"

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

@@ -52,6 +52,8 @@
   @import './reboot-bootstrap-text';
   @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
@@ -83,7 +85,7 @@
   .form-control[disabled],
   .form-control[readonly] {
     color: hsl.lighten(var(--color-global),10%);
-    background-color: hsl.lighten(var(--color-global),5%);
+    background-color: hsl.lighten(var(--bgcolor-global),5%);
   }
 
   .input-group > .input-group-prepend > .input-group-text {
@@ -114,14 +116,8 @@
   /*
   * Card
   */
-  .card:not([class*='bg-']):not(.well):not(.card-disabled) {
-    background-color: $dark !important;
-    a,
-    button{
-      @include hover-focus() {
-        background-color: darken($dark, 10%) !important;
-      }
-    }
+  .card:not([class*=‘bg-’]):not(.well):not(.card-disabled) {
+    @extend .bg-dark;
   }
 
   // [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
@@ -156,11 +152,8 @@
     }
     li.page-item {
       button.page-link {
-        @include button-variant($dark, $dark);
-        @include mixins-buttons.button-svg-icon-variant($dark, $dark);
+        @extend .btn-dark;
         color: var(--primary);
-        border-color: var(--secondary);
-        box-shadow: none !important;
       }
     }
   }
@@ -224,9 +217,7 @@
     }
 
     .btn-external-auth-tab {
-      @include button-variant($dark, $dark);
-      @include mixins-buttons.button-svg-icon-variant($dark, $dark);
-      box-shadow: none !important;
+      @extend .btn-dark;
     }
 
     // footer link text

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

@@ -10,15 +10,15 @@
   $color-list: var(--color-list,var(--color-global));
   $bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
   $color-list-hover: var(--color-list-hover,var(--color-global));
-  $bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
-  $bgcolor-list-active: var(--bgcolor-list-active,hsl.lighten(var(--primary),65%));
-  $color-list-active: var(--color-list-active,hsl(var(--primary-hs), clamp(10%, (100% - var(--primary-l)  + 65% - 51%) * 1000, 95%)));
+  $bgcolor-list-hover: var(--bgcolor-list-hover, var(--bgcolor-global));
+  $bgcolor-list-active: var(--bgcolor-list-active, hsl.lighten(var(--primary),65%));
+  $color-list-active: var(--color-list-active,hsl(var(--primary-hs), clamp(10%, (100% - var(--primary-l)  - 65% - 51%) * 1000, 95%)));
   $color-table: var(--color-table,var(--color-global));
   $bgcolor-table: var(--bgcolor-table,null);
   $border-color-table: var(--border-color-table,#{$gray-200});
   $color-table-hover: var(--color-table-hover,var(--color-table));
   $bgcolor-table-hover: var(--bgcolor-table-hover,rgba(black, 0.075));
-  $bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
+  $bgcolor-sidebar-list-group: var(bgcolor-sidebar-list-group,var(--bgcolor-list));
   $color-tags: var(--color-tags,var(--secondary));
   $bgcolor-tags: var(--bgcolor-tags,#{$gray-200});
   $border-color-global: var(--border-color-global,#{$gray-300});
@@ -28,7 +28,7 @@
   $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-dropdown-link-active,var(--color-reversal));
-  $bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,hsl.lighten(var(--bgcolor-global),15%));
+  $bgcolor-dropdown-link-hover: hsl.lighten(var(--bgcolor-global),15%);
   $bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
 
 
@@ -43,6 +43,7 @@
   $dropdown-color: $color-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;
 
@@ -50,6 +51,8 @@
   @import './reboot-bootstrap-text';
   @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
@@ -75,7 +78,7 @@
   .form-control[disabled],
   .form-control[readonly] {
     color: hsl.lighten(var(--color-global),10%);
-    background-color: hsl.darken(var(--color-global),5%);
+    background-color: hsl.darken(var(--bgcolor-global),5%);
   }
 
   /*

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

@@ -2,7 +2,6 @@
 @use '../bootstrap/init' as *;
 @use '../mixins';
 @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;
 
@@ -43,6 +42,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';
 
@@ -87,7 +87,6 @@ code:not([class^='language-']) {
 // Form
 .form-control {
   @include form-control-focus();
-  border: none;
 }
 
 // Tabs
@@ -122,7 +121,7 @@ ul.pagination {
   li.page-item {
     button.page-link {
       color: var(--primary);
-      border-color: var(--secondary);
+      border-color: var(--secondary) !important;
       &:hover,
       &:active,
       &:focus {
@@ -331,7 +330,8 @@ ul.pagination {
       color: $color-modal-header;
     }
     .close {
-      color: hsl.alpha(var(--primary),50%);
+      color: $color-modal-header;
+      opacity: 0.5;
 
       &:hover {
         opacity: 0.9;

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,112 @@
+@use '../bootstrap/init' as *;
+@use '../atoms/mixins/buttons' as mixins-buttons;
+@use './mixins/hsl-button';
+@use './mixins/hsl-badge';
+@use './hsl-functions' as hsl;
+
+$hsl-colors: (
+  'primary': var(--primary),
+  'secondary': var(--secondary)
+);
+
+@each $color, $value in $hsl-colors {
+  .bg-#{$color} {
+    background-color: $value !important;
+    a,
+    button {
+      @include hover-focus() {
+        background-color: hsl.darken($value, 10%) !important;
+      }
+    }
+  }
+}
+
+@each $color, $value in $hsl-colors {
+  .border-#{$color} {
+    border-color: $value !important;
+  }
+}
+
+@each $color, $value in $hsl-colors {
+  .text-#{$color} {
+    color: $value !important;
+    @if $emphasized-link-hover-darken-percentage != 0 {
+      a {
+        @include hover-focus() {
+          color: hsl.darken($value, $emphasized-link-hover-darken-percentage) !important;
+        }
+      }
+    }
+  }
+}
+
+@each $color, $value in $hsl-colors {
+  .btn-#{$color} {
+    @include hsl-button.button-variant($value, $value);
+    @include hsl-button.button-svg-icon-variant($value, $value);
+    box-shadow: none !important;
+  }
+}
+
+@each $color, $value in $hsl-colors {
+  .btn-outline-#{$color} {
+    @include hsl-button.button-outline-variant($value, $value, hsl.alpha($value, 10%), $value);
+    @include mixins-buttons.button-outline-svg-icon-variant($value, $value);
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: $value;
+      background-color: hsl.alpha($value, 10%);
+      border-color: $value;
+    }
+
+    box-shadow: none !important;
+  }
+
+  // separate style: https://github.com/weseek/growi/pull/6804
+  .show > .btn-outline-#{$color}.dropdown-toggle {
+    color: $value;
+    background-color: hsl.alpha($value, 10%);
+    border-color: $value;
+  }
+}
+
+@each $color, $value in $hsl-colors {
+  .alert-#{$color} {
+    $alert-color: hsl.contrast($value,0%,90%);
+    $alert-bg-color: hsl.darken($value, calc($alert-bg-level + 0.95) * $theme-color-interval);
+    $alert-border-color: hsl.darken($value, $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($value, calc($alert-border-level + 5) * $theme-color-interval);
+    }
+
+    .alert-link {
+      color: hsl.contrast($value);
+    }
+  }
+
+  // Alert link
+  :root, .wiki {
+    .alert.alert-primary {
+      a,
+      a:hover {
+        color: hsl.darken($value, calc($alert-bg-level - 7.7) * $theme-color-interval);
+      }
+    }
+  }
+}
+
+@each $color, $value in $hsl-colors {
+  .badge-#{$color} {
+    @include hsl-badge.badge-variant($value);
+  }
+
+  a.badge-#{$color}  {
+    @include hsl-badge.badge-variant($value);
+  }
+}

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

@@ -1,21 +0,0 @@
-@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 hsl.alpha($color, $degrees);
-}

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

@@ -0,0 +1,21 @@
+@use '../../bootstrap/init' as bs;
+@use '../hsl-functions' as hsl;
+
+// @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/app/src/styles/theme/mixins/_hsl-button.scss

@@ -104,3 +104,39 @@
   // }
   // }
 }
+
+// @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);
+    }
+  }
+}

packages/app/src/styles/theme/mixins/_tables.scss

@@ -1,34 +0,0 @@
-//== Table
-// $table-variants: (
-//   'light': $light,
-//   'dark': $dark,
-// );
-
-// remove when master version is released
-// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
-// @mixin table-variant($state, $background) {
-//   .table-#{$state} {
-//     $table-hover-bg-factor: 0.075 !default;
-//     $table-striped-bg-factor: 0.05 !default;
-//     $body-bg: $white !default;
-//     $table-active-bg-factor: 0.1 !default;
-//     $table-border-factor: 0.1 !default;
-
-//     $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
-//     $color: gray;
-//     $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
-//     $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
-//     $active-bg: mix($color, $background, percentage($table-active-bg-factor));
-
-//     --bs-table-bg: #{$background};
-//     --bs-table-striped-bg: #{$striped-bg};
-//     --bs-table-striped-color: #{color-contrast($striped-bg)};
-//     --bs-table-active-bg: #{$active-bg};
-//     --bs-table-active-color: #{color-contrast($active-bg)};
-//     --bs-table-hover-bg: #{$hover-bg};
-//     --bs-table-hover-color: #{color-contrast($hover-bg)};
-
-//     color: $color;
-//     border-color: mix($color, $background, percentage($table-border-factor));
-//   }
-// }

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

@@ -7,7 +7,6 @@
 //
 
 // colors for overriding bootstrap $theme-colors
-// --secondary: #;
 // --info: #;
 // --success: #;
 // --warning: #;
@@ -21,6 +20,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%;
@@ -51,14 +53,13 @@
   --color-link-nabvar: #{$gray-500};
   --color-inline-code: #{darken($red, 15%)}; // optional
 
-
   // List Group colors
   --color-list: var(--color-global); // optional
   --bgcolor-list: var(--bgcolor-global); // optional
   // --color-list-hover: var(--color-global); // optional
-  --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};// optional
+  --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-global),3%)};// optional
   // --color-list-active: white ; // optional
-  --bgcolor-list-active: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
+  // --bgcolor-list-active: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
   // --color-page-list-group-item-meta: #{$gray-500}; // optional
 
   // Table colors
@@ -106,7 +107,7 @@
   --bgcolor-sidebar-context-l: calc(var(--primary-l) + 77%);
 
   // Sidebar list group
-  --bgcolor-sidebar-list-group: #{$gray-50}; // optional
+  // --bgcolor-sidebar-list-group: #{$gray-50}; // optional
 
   // Subnavigation
   --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
@@ -150,6 +151,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%;
@@ -169,7 +173,7 @@
   --color-global-l: 74%;
   --color-reversal: #{$gray-900};
   // --color-header: desaturate($primary, 20%);
-  --color-link: hsl(var(----color-link-hs),var(--color-link-l));
+  --color-link: hsl(var(--color-link-hs),var(--color-link-l));
   --color-link-hs: 219.3,51.7%;
   --color-link-l: 65.9%;
   --color-link-hover: #{hsl.lighten(var(--color-link),10%)};
@@ -186,7 +190,7 @@
   // --color-list-hover: var(--color-global); // optional
   --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
   // --color-list-active: white ; // optional
-  --bgcolor-list-active: var(--primary); // optional
+  // --bgcolor-list-active: var(--primary); // optional
 
   // Table colors
   // --color-table: #; // optional
@@ -225,7 +229,7 @@
   --color-sidebar-context-hs: var(--color-global-hs);
   --color-sidebar-context-l: var(--color-global-l);
   // Sidebar list group
-  --bgcolor-sidebar-list-group: #1c2a3e; // optional
+  // --bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Subnavigation
   --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));

packages/preset-themes/src/styles/theme/mixins/_count-badge.scss

@@ -1,9 +0,0 @@
-@mixin count-badge($color, $bg-color, $min-width: initial) {
-  min-width: $min-width;
-  padding: 0.1rem 0.5rem;
-  font-family: var(--font-family-monospace);
-  font-size: 12px;
-  font-weight: 500;
-  color: $color;
-  background-color: $bg-color;
-}

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

@@ -1,104 +0,0 @@
-@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);
-    @include bs.gradient-bg($hover-background);
-    border-color: $hover-border;
-  }
-
-  &:focus,
-  &.focus {
-    color: hsl.contrast($background);
-    @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);
-  //     // }
-  //   }
-  // }
-}
-
-// @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
-@mixin button-outline-variant($color, $color-hover: hsl.contrast($color), $active-background: $color, $active-border: $color) {
-  color: $color;
-  border-color: $color;
-
-  @include bs.hover() {
-    color: $color-hover;
-    background-color: $active-background;
-    border-color: $active-border;
-  }
-
-  // &:focus,
-  // &.focus {
-  //   box-shadow: 0 0 0 bs.$btn-focus-width hsl.alpha($color,50%);
-  // }
-
-  &.disabled,
-  &:disabled {
-    color: $color;
-    background-color: transparent;
-  }
-
-  // &:not(:disabled):not(.disabled):active,
-  // &:not(:disabled):not(.disabled).active,
-  // .show > &.dropdown-toggle {
-  //   color: hsl.contrast($active-background);
-  //   background-color: $active-background;
-  //   border-color: $active-border;
-
-  // &:focus {
-  //   @if $enable-shadows and $btn-active-box-shadow != none {
-  //     @include bs.box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width hsl.alpha($color,50%));
-  //   } @else {
-  //     // Avoid using mixin so we can pass custom focus shadow properly
-  //     box-shadow: 0 0 0 $btn-focus-width hsl.alpha($color,50%);
-  //   }
-  // }
-  // }
-}

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

@@ -1,70 +0,0 @@
-@use '../../bootstrap/init' as bs;
-@use '../../mixins';
-@use './count-badge';
-
-@mixin override-list-group-item($color, $bgcolor, $color-hover: $color, $bgcolor-hover: $bgcolor, $color-active: $color, $bgcolor-active: $bgcolor) {
-  .list-group {
-    .list-group-item {
-      color: $color;
-      background-color: $bgcolor;
-      // border-color: $border-color-global;
-
-      &.list-group-item-action {
-        &:hover {
-          background-color: $bgcolor-hover;
-        }
-        &.active {
-          color: $color-active;
-          background-color: $bgcolor-active;
-        }
-      }
-    }
-  }
-}
-
-@mixin override-list-group-item-for-pagetree($color, $bgcolor-hover, $bgcolor-active, $btn-color, $btn-color-hover, $btn-bgcolor-hover, $btn-bgcolor-active) {
-  .grw-pagetree-is-over {
-    background: $bgcolor-hover;
-  }
-  .list-group-item {
-    color: $color;
-    background-color: transparent;
-    // border-color: $border-color-global;
-
-    .grw-count-badge {
-      @include count-badge.count-badge($btn-color, $bgcolor-hover, 28px);
-    }
-
-    .btn.btn-page-item-control {
-      color: $btn-color;
-      background-color: transparent;
-      @include bs.hover() {
-        color: $btn-color-hover;
-        background-color: $btn-bgcolor-hover;
-      }
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active {
-        color: $btn-color-hover;
-        background-color: $btn-bgcolor-active;
-      }
-    }
-
-    &.grw-pagetree-current-page-item {
-      background: $bgcolor-hover;
-    }
-
-    &.list-group-item-action {
-      &:hover {
-        background-color: $bgcolor-hover;
-      }
-      &:active {
-        background-color: $bgcolor-active;
-      }
-    }
-    .grw-pagetree-title-anchor {
-      .grw-sidebar-text-muted {
-        // color: rgba(desaturate($color, 50%), 0.6);
-      }
-    }
-  }
-}

packages/preset-themes/src/styles/theme/mixins/_tables.scss

@@ -1,34 +0,0 @@
-//== Table
-// $table-variants: (
-//   'light': $light,
-//   'dark': $dark,
-// );
-
-// remove when master version is released
-// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
-// @mixin table-variant($state, $background) {
-//   .table-#{$state} {
-//     $table-hover-bg-factor: 0.075 !default;
-//     $table-striped-bg-factor: 0.05 !default;
-//     $body-bg: $white !default;
-//     $table-active-bg-factor: 0.1 !default;
-//     $table-border-factor: 0.1 !default;
-
-//     $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
-//     $color: gray;
-//     $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
-//     $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
-//     $active-bg: mix($color, $background, percentage($table-active-bg-factor));
-
-//     --bs-table-bg: #{$background};
-//     --bs-table-striped-bg: #{$striped-bg};
-//     --bs-table-striped-color: #{color-contrast($striped-bg)};
-//     --bs-table-active-bg: #{$active-bg};
-//     --bs-table-active-color: #{color-contrast($active-bg)};
-//     --bs-table-hover-bg: #{$hover-bg};
-//     --bs-table-hover-color: #{color-contrast($hover-bg)};
-
-//     color: $color;
-//     border-color: mix($color, $background, percentage($table-border-factor));
-//   }
-// }