activate codes for app

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

@@ -1,8 +1,9 @@
 @use '../variables' as var;
 @use '../bootstrap/init' as *;
 @use '../mixins';
-@use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
 @use '../atoms/mixins/code';
+@use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
+@use './mixins/hsl-button';
 
 //
 //== Apply to Bootstrap
@@ -13,9 +14,11 @@
 // $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: $gray-100 !default;
-// $color-inline-code: darken($red, 15%) !default;
-// $bordercolor-inline-code: $gray-400 !default;
+
+$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;
@@ -47,27 +50,18 @@
 // // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
 // $color-modal-header: color-yiq($primary) !default;
 
-// code:not([class^='language-']) {
-//   @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
-// }
+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;
-// }
+.code-highlighted {
+  border-color: $bordercolor-inline-code;
+}
 
-// //
-// //== Apply to Bootstrap Elements
-// //
+//
+//== 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 {
@@ -188,129 +182,125 @@
 //   }
 // }
 
-// .grw-sidebar {
-//   .grw-navigation-resize-button {
-//     $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;
-
-//     .hexagon-container svg {
-//       .background {
-//         fill: $bgcolor-resize-button;
-//       }
-//       .icon {
-//         fill: $color-resize-button;
-//       }
-//     }
-//     &:hover .hexagon-container svg {
-//       .background {
-//         fill: $bgcolor-resize-button-hover;
-//       }
-//       .icon {
-//         fill: $color-resize-button-hover;
-//       }
-//     }
-//   }
-//   div.grw-global-navigation {
-//     > div {
-//       background-color: var(--bgcolor-sidebar);
-//     }
-//   }
-//   div.grw-contextual-navigation {
-//     > div {
-//       color: var(--color-sidebar-context);
-//       background-color: var(--bgcolor-sidebar-context);
-//     }
-//   }
-
-//   .grw-sidebar-nav {
-//     .btn {
-//       @include button-variant(
-//         $bgcolor-sidebar,
-//         $bgcolor-sidebar,
-//         darken($bgcolor-sidebar, 7.5%),
-//         darken($bgcolor-sidebar, 10%),
-//         $bgcolor-sidebar-nav-item-active,
-//         $bgcolor-sidebar-nav-item-active
-//       );
-//     }
-//   }
-//   .grw-sidebar-nav-primary-container {
-//     .btn.active {
-//       i {
-//         text-shadow: var(--text-shadow-sidebar-nav-item-active);
-//       }
-//       // fukidashi
-//       &:after {
-//         border-right-color: var(--bgcolor-sidebar-context)
-//         ;
-//       }
-//     }
-//   }
-
-//   .grw-sidebar-content-header {
-//     .grw-btn-reload {
-//       color: $color-btn-reload-in-sidebar;
-//     }
-
-//     .grw-recent-changes-resize-button {
-//       .custom-control-label::before {
-//         background-color: $primary;
-//       }
-
-//       .custom-control-label::after {
-//         background-color: var(--bgcolor-global);
-//       }
-
-//       .custom-control-input:not(:checked) + .custom-control-label::before {
-//         color: var(--bgcolor-global);
-//       }
-
-//       .custom-control-input:checked + .custom-control-label::before {
-//         color: var(--bgcolor-global);
-//         background-color: $primary;
-//         // border-color: $primary !important;
-//       }
-//       .custom-control-input:checked + .custom-control-label::after {
-//         color: var(--bgcolor-global);
-//       }
-//     }
-//   }
-
-//   .grw-pagetree {
-//     .list-group-item {
-//       .grw-pagetree-title-anchor {
-//         color: inherit;
-//       }
-//     }
-//   }
-//   .grw-pagetree-footer {
-//     .h5.grw-private-legacy-pages-anchor {
-//       color: inherit;
-//     }
-//   }
-
-//   .grw-recent-changes {
-//     .list-group {
-//       .list-group-item {
-//         background-color: transparent;
-
-//         .icon-lock {
-//           color: var(--color-link);
-//         }
-
-//         .grw-recent-changes-item-lower {
-//           color: $gray-500;
-
-//           svg {
-//             fill: $gray-500;
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
+.grw-sidebar {
+  //   .grw-navigation-resize-button {
+  //     $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;
+
+  //     .hexagon-container svg {
+  //       .background {
+  //         fill: $bgcolor-resize-button;
+  //       }
+  //       .icon {
+  //         fill: $color-resize-button;
+  //       }
+  //     }
+  //     &:hover .hexagon-container svg {
+  //       .background {
+  //         fill: $bgcolor-resize-button-hover;
+  //       }
+  //       .icon {
+  //         fill: $color-resize-button-hover;
+  //       }
+  //     }
+  //   }
+  //   div.grw-global-navigation {
+  //     > div {
+  //       background-color: var(--bgcolor-sidebar);
+  //     }
+  //   }
+  //   div.grw-contextual-navigation {
+  //     > div {
+  //       color: var(--color-sidebar-context);
+  //       background-color: var(--bgcolor-sidebar-context);
+  //     }
+  //   }
+
+  .grw-sidebar-nav {
+    .btn {
+      @include hsl-button.button-variant(
+        var(--bgcolor-sidebar),
+        var(--bgcolor-sidebar),
+      );
+    }
+  }
+  //   .grw-sidebar-nav-primary-container {
+  //     .btn.active {
+  //       i {
+  //         text-shadow: var(--text-shadow-sidebar-nav-item-active);
+  //       }
+  //       // fukidashi
+  //       &:after {
+  //         border-right-color: var(--bgcolor-sidebar-context)
+  //         ;
+  //       }
+  //     }
+  //   }
+
+  //   .grw-sidebar-content-header {
+  //     .grw-btn-reload {
+  //       color: $color-btn-reload-in-sidebar;
+  //     }
+
+  //     .grw-recent-changes-resize-button {
+  //       .custom-control-label::before {
+  //         background-color: $primary;
+  //       }
+
+  //       .custom-control-label::after {
+  //         background-color: var(--bgcolor-global);
+  //       }
+
+  //       .custom-control-input:not(:checked) + .custom-control-label::before {
+  //         color: var(--bgcolor-global);
+  //       }
+
+  //       .custom-control-input:checked + .custom-control-label::before {
+  //         color: var(--bgcolor-global);
+  //         background-color: $primary;
+  //         // border-color: $primary !important;
+  //       }
+  //       .custom-control-input:checked + .custom-control-label::after {
+  //         color: var(--bgcolor-global);
+  //       }
+  //     }
+  //   }
+
+  //   .grw-pagetree {
+  //     .list-group-item {
+  //       .grw-pagetree-title-anchor {
+  //         color: inherit;
+  //       }
+  //     }
+  //   }
+  //   .grw-pagetree-footer {
+  //     .h5.grw-private-legacy-pages-anchor {
+  //       color: inherit;
+  //     }
+  //   }
+
+  //   .grw-recent-changes {
+  //     .list-group {
+  //       .list-group-item {
+  //         background-color: transparent;
+
+  //         .icon-lock {
+  //           color: var(--color-link);
+  //         }
+
+  //         .grw-recent-changes-item-lower {
+  //           color: $gray-500;
+
+  //           svg {
+  //             fill: $gray-500;
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+}
 
 // /*
 //  * Icon

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

@@ -1,3 +1,5 @@
+@use '~bootstrap/scss/functions' as bs;
+
 // @function getHS($color-hsl) {
 //   // remove "var(" and ")"
 //   $color: str-replace($color-hsl, 'var(');
@@ -29,24 +31,25 @@
 //   @return hsl($color-hs, calc($color-l - $degrees));
 // }
 
-@function contrast($color) {
-  $color: str-replace($color, 'var(');
-  $color: str-replace($color, ')');
+@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 - 51% ) * 1000), 95%));
+  @return hsl($color-hs, clamp(10%, calc((100% - $color-l - $darken-degrees - 51% ) * 1000), 95%));
 }
 
 @function lighten($color, $degrees) {
-  $color: str-replace($color, 'var(');
-  $color: str-replace($color, ')');
+  $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: str-replace($color, 'var(');
-  $color: str-replace($color, ')');
+  $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/app/src/styles/theme/_reboot-bootstrap-theme-colors.scss

@@ -80,6 +80,15 @@
       theme-color-level($color, $alert-color-level)
     );
   }
+  // Alert link
+  :root, .wiki {
+    .alert.alert-#{$color} {
+      a,
+      a:hover {
+        color: theme-color-level($color, $alert-color-level - 2);
+      }
+    }
+  }
 }
 
 @each $color, $value in $theme-colors {

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

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

@@ -11,11 +11,11 @@
 // 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;
+// $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: $gray-100 !default;
-$color-inline-code: darken($red, 15%) !default;
-$bordercolor-inline-code: $gray-400 !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;
@@ -43,27 +43,27 @@ $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
 $color-modal-header: color-yiq($primary) !default;
 
-code:not([class^='language-']) {
-  @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
-}
+// 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;
-}
+// .code-highlighted {
+//   border-color: $bordercolor-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);
-    }
-  }
-}
+// @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 {
@@ -220,18 +220,18 @@ ul.pagination {
     }
   }
 
-  .grw-sidebar-nav {
-    .btn {
-      @include button-variant(
-        $bgcolor-sidebar,
-        $bgcolor-sidebar,
-        darken($bgcolor-sidebar, 7.5%),
-        darken($bgcolor-sidebar, 10%),
-        $bgcolor-sidebar-nav-item-active,
-        $bgcolor-sidebar-nav-item-active
-      );
-    }
-  }
+  // .grw-sidebar-nav {
+  //   .btn {
+  //     @include button-variant(
+  //       $bgcolor-sidebar,
+  //       $bgcolor-sidebar,
+  //       darken($bgcolor-sidebar, 7.5%),
+  //       darken($bgcolor-sidebar, 10%),
+  //       $bgcolor-sidebar-nav-item-active,
+  //       $bgcolor-sidebar-nav-item-active
+  //     );
+  //   }
+  // }
   .grw-sidebar-nav-primary-container {
     .btn.active {
       i {