Merge pull request #7190 from weseek/fix/delete-reboot-bootstrap-scss

fix:delete reboot bootstrap scss

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

@@ -114,9 +114,15 @@
   /*
   * Card
   */
-  // .card:not([class*='bg-']):not(.well):not(.card-disabled) {
-  //   @extend .bg-dark;
-  // }
+  .card:not([class*='bg-']):not(.well):not(.card-disabled) {
+    background-color: $dark !important;
+    a,
+    button{
+      @include hover-focus() {
+        background-color: darken($dark, 10%) !important;
+      }
+    }
+  }
 
   // [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
   .card.well {

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

@@ -1,36 +1,5 @@
 @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, ')');

packages/app/src/styles/theme/_reboot-bootstrap-border-colors.scss

@@ -25,5 +25,5 @@
 }
 
 .border-info {
-  border-color: ver(--info) !important;
+  border-color: $info !important;
 }

packages/app/src/styles/theme/_reboot-toastr-colors.scss

@@ -1,15 +1,15 @@
 .toast-success {
-  background-color: var(--success);
+  background-color: $success;
 }
 
 .toast-error {
-  background-color: var(--danger);
+  background-color: $danger;
 }
 
 .toast-info {
-  background-color: var(--info);
+  background-color: $info;
 }
 
 .toast-warning {
-  background-color: var(--warning);
+  background-color: $warning;
 }

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

@@ -136,9 +136,6 @@
   // admin theme box
   --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};
 
-  @import './theme/apply-colors';
-  @import './theme/apply-colors-light';
-
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
@@ -172,7 +169,7 @@
   --color-global-l: 74%;
   --color-reversal: #{$gray-900};
   // --color-header: desaturate($primary, 20%);
-  --color-link: #7b9ad5;
+  --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%)};
@@ -202,7 +199,7 @@
   --bgcolor-navbar: #2a2929;
   --bgcolor-search-top-dropdown: var(--accent);
   --bgcolor-search-top-dropdown-hs: var(--accent-hs);
-  --bgcolor-search-top-dropdown-l: (var(--accent-l));
+  --bgcolor-search-top-dropdown-l: var(--accent-l);
   --border-image-navbar: linear-gradient(to right, #44bfe3 0%, #b04aff 50%, #ff1794 100%);
 
   // Logo colors
@@ -257,9 +254,6 @@
   // admin theme box
   --color-theme-color-box: var(--primary);
 
-  @import './theme/apply-colors';
-  @import './theme/apply-colors-dark';
-
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {

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

@@ -1,558 +0,0 @@
-// @use '../variables' as var;
-// @use '../bootstrap/init' as *;
-// @use '../atoms/mixins/buttons' as mixins-buttons;
-// @use './mixins/count-badge';
-// @use './mixins/hsl-button';
-// @use './hsl-functions' as hsl;
-
-// // determine optional variables
-// $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));
-// $color-list-active: var(--color-list-active,var(--color-reversal));
-// $bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
-// $bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
-// $bgcolor-subnav: var(--bgcolor-subnav);
-// $color-table: var(--color-table,white);
-// $bgcolor-table: var(--bgcolor-table,#343a40);
-// $border-color-table: var(--border-color-table,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
-// $color-table-hover: var(--color-table-hover,rgba(white, 0.075));
-// $bgcolor-table-hover: var(--bgcolor-table-hover,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
-// $bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
-// $color-tags: var(--color-tags,#949494);
-// $bgcolor-tags: var(--bgcolor-tags,var(--dark));
-// $border-color-global: var(--border-color-global,#{$gray-500});
-// $border-color-toc: var(--border-color-toc,$border-color-global);
-// $color-dropdown: var(--color-dropdown,var(--color-global));
-// $bgcolor-dropdown: var(--bgcolor-dropdown,var(--bgcolor-global));
-// $color-dropdown-link: var(--color-dropdown-link,var(--color-global));
-// $color-dropdown-link-hover: var(--color-dropdown-link-hover,var(--light));
-// $bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,var(--primary));
-// $color-dropdown-link-active: var(--color-dropdown-link-active,var(--light));
-// $bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
-
-// // override bootstrap variables
-// $text-muted: $gray-550;
-// $table-dark-color: $color-table;
-// $table-dark-bg: $bgcolor-table;
-// $table-dark-border-color: $border-color-table;
-// $table-dark-hover-color: $color-table-hover;
-// $table-dark-hover-bg: $bgcolor-table-hover;
-// $border-color: $border-color-global;
-// $dropdown-color: $color-dropdown;
-// $dropdown-bg: $bgcolor-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;
-
-// @import './mixins/list-group';
-// @import './reboot-bootstrap-text';
-// @import './reboot-bootstrap-border-colors';
-// @import './reboot-bootstrap-tables';
-// @import './reboot-bootstrap-dropdown';
-
-// // List Group
-// @include override-list-group-item(
-//   $color-list,
-//   $bgcolor-sidebar-list-group,
-//   $color-list-hover,
-//   $bgcolor-list-hover,
-//   $color-list-active,
-//   $bgcolor-list-active
-// );
-// /*
-//   * Form
-//   */
-// input.form-control,
-// select.form-control,
-// select.custom-select,
-// textarea.form-control {
-//   color: var(--color-global);
-//   background-color: hsl.darken(var(--bgcolor-global), 5%);
-//   border-color: $border-color-global;
-//   &:focus {
-//     background-color: var(--bgcolor-global);
-//   }
-//   // FIXME: accent color
-//   // border: 1px solid darken($border, 30%);
-// }
-
-// .form-control[disabled],
-// .form-control[readonly] {
-//   color: hsl.lighten(var(--color-global),10%);
-//   background-color: hsl.lighten(var(--color-global),5%);
-// }
-
-// .input-group > .input-group-prepend > .input-group-text {
-//   color: theme-color('light');
-//   background-color: theme-color('secondary');
-//   border: 1px solid theme-color('secondary');
-//   border-right: none;
-//   &.text-muted {
-//     color: theme-color('light') !important;
-//   }
-// }
-
-// .input-group input {
-//   border-color: $border-color-global;
-// }
-
-// label.custom-control-label::before {
-//   background-color: hsl.darken(var(--bgcolor-global),5%);
-// }
-
-// /*
-//  * Table
-//  */
-// .table {
-//   @extend .table-dark;
-// }
-
-// /*
-//  * Card
-//  */
-// .card:not([class*='bg-']):not(.well):not(.card-disabled) {
-//   @include bg-variant('.bg-dark', $dark);
-// }
-
-// // [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
-// .card.well {
-//   border-color: var(--secondary);
-// }
-
-// .card.card-disabled {
-//   background-color: lighten($dark, 10%);
-//   border-color: var(--secondary);
-// }
-
-// /*
-//  * Pagination
-//  */
-// ul.pagination {
-//   li.page-item {
-//     button.page-link {
-//       @include button-variant($dark, $dark);
-//       @include mixins-buttons.button-svg-icon-variant($dark, $dark);
-//       box-shadow: none !important;
-//     }
-//   }
-// }
-
-// /*
-//  * GROWI Login form
-//  */
-// .nologin {
-//   // background color
-//   $color-gradient: #3c465c;
-//   background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-//     linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
-//     linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
-//     linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
-
-//   .noLogin-header {
-//     background-color: rgba(black, 0.5);
-
-//     .logo {
-//       background-color: rgba(white, 0);
-//       fill: rgba(white, 0.5);
-//     }
-
-//     h1 {
-//       color: rgba(white, 0.5);
-//     }
-//   }
-
-//   .noLogin-dialog {
-//     background-color: rgba(black, 0.5);
-//   }
-
-//   .input-group {
-//     .input-group-text {
-//       color: darken(white, 30%);
-//       background-color: rgba($gray-700, 0.7);
-//     }
-
-//     .form-control {
-//       color: white;
-//       background-color: rgba(#505050, 0.7);
-//       box-shadow: unset;
-
-//       &::placeholder {
-//         color: darken(white, 30%);
-//       }
-//     }
-//   }
-
-//   .btn-fill {
-//     .btn-label {
-//       color: $gray-300;
-//     }
-//     .btn-label-text {
-//       color: $gray-400;
-//     }
-//   }
-
-//   .grw-external-auth-form {
-//     border-color: gray !important;
-//   }
-
-//   .btn-external-auth-tab {
-//     @include button-variant($dark, $dark);
-//     @include mixins-buttons.button-svg-icon-variant($dark, $dark);
-//     box-shadow: none !important;
-//   }
-
-//   // footer link text
-//   .link-growi-org {
-//     color: rgba(white, 0.4);
-
-//     &:hover,
-//     &.focus {
-//       color: rgba(white, 0.7);
-
-//       .growi {
-//         color: darken(var.$growi-green, 5%);
-//       }
-
-//       .org {
-//         color: darken(var.$growi-blue, 5%);
-//       }
-//     }
-//   }
-// }
-
-// /*
-//  * GROWI subnavigation
-//  */
-// .grw-drawer-toggler {
-//   @include button-variant($dark, $dark);
-//   @include mixins-buttons.button-svg-icon-variant($dark, $dark);
-//   color: #{$gray-400};
-//   box-shadow: none !important;
-
-// }
-
-// /*
-//  * GROWI page list
-//  */
-// .page-list {
-//   .page-list-ul {
-//     > li {
-//       > span.page-list-meta {
-//         color: hsl.darken(var(--color-global),10%);
-//       }
-//     }
-//   }
-
-//   // List group
-//   .list-group-item {
-//     &.active {
-//       background-color: hsl.darken(var(--color-global),10%);
-//     }
-//     .list-group-item-action:hover {
-//       background-color: var(--bgcolor-list-hover);
-//     }
-//     .page-list-snippet {
-//       color: hsl.darken(var(--color-global),10%);
-//     }
-//   }
-// }
-
-// /*
-//  * GROWI ToC
-//  */
-// .revision-toc-content {
-//   ::marker {
-//     color: hsl.lighten(var(--color-global),30%);
-//   }
-// }
-
-// /*
-//  * GROWI subnavigation
-//  */
-// .grw-subnav {
-//   background-color: var(--bgcolor-subnav);
-// }
-
-// .grw-subnav-fixed-container .grw-subnav {
-//   background-color: hsl.alpha(var(--bgcolor-subnav),15%);
-// }
-
-// .grw-page-editor-mode-manager {
-//   .btn-outline-primary {
-//     &:hover {
-//       color: var(--primary);
-//       background-color: $gray-700;
-//     }
-//   }
-// }
-
-// // Search drop down
-// #search-typeahead-asynctypeahead {
-//   background-color: var(--bgcolor-global);
-//   .table {
-//     background-color: transparent;
-//   }
-// }
-
-// /*
-//  * GROWI Sidebar
-//  */
-// .grw-sidebar {
-//   // List
-//   @include override-list-group-item(
-//     $color-list,
-//     $bgcolor-sidebar-list-group,
-//     $color-list-hover,
-//     $bgcolor-list-hover,
-//     $color-list-active,
-//     $bgcolor-list-active
-//   );
-//   // Pagetree
-//   .grw-pagetree {
-//     @include override-list-group-item-for-pagetree(
-//       var(--color-sidebar-context),
-//       hsl.lighten(var(--bgcolor-sidebar-context),8%),
-//       hsl.lighten(var(--bgcolor-sidebar-context),15%),
-//       hsl.darken(var(--color-sidebar-context),15%),
-//       hsl.darken(var(--color-sidebar-context),10%),
-//       hsl.lighten(var(--bgcolor-sidebar-context),18%),
-//       hsl.lighten(var(--bgcolor-sidebar-context),24%)
-//     );
-//     .grw-pagetree-triangle-btn {
-//       @include mixins-buttons.button-outline-svg-icon-variant(var(--secondary), $gray-200);
-//     }
-//     .btn-page-item-control {
-//       @include hsl-button.button-outline-variant($gray-500, $gray-500, var(--secondary), transparent);
-//       @include hover() {
-//         background-color: hsl.lighten(var(--bgcolor-sidebar-context),20%);
-//       }
-//       &:not(:disabled):not(.disabled):active,
-//       &:not(:disabled):not(.disabled).active {
-//         background-color: hsl.lighten(var(--bgcolor-sidebar-context),34%);
-//       }
-//       box-shadow: none !important;
-//     }
-//   }
-//   .private-legacy-pages-link {
-//     &:hover {
-//       background: var(--bgcolor-list-hover);
-//     }
-//   }
-// }
-
-// .btn.btn-page-item-control {
-//   @include hsl-button.button-outline-variant($gray-500, $gray-500, var(--secondary), transparent);
-//   @include hover() {
-//     background-color: $gray-700;
-//   }
-//   &:not(:disabled):not(.disabled):active,
-//   &:not(:disabled):not(.disabled).active {
-//     color: $gray-200;
-//     background-color: $gray-600;
-//   }
-//   box-shadow: none !important;
-// }
-
-// /*
-//  * Popover
-//  */
-// .popover {
-//   background-color: var(--bgcolor-global);
-//   border-color: var(--secondary);
-//   .popover-header {
-//     color: white;
-//     background-color: var(--secondary);
-//     border-color: var(--secondary);
-//   }
-//   .popover-body {
-//     color: inherit;
-//   }
-
-//   &.bs-popover-top .arrow {
-//     &::before {
-//       border-top-color: var(--secondary);
-//     }
-
-//     &::after {
-//       border-top-color: var(--bgcolor-global);
-//     }
-//   }
-//   &.bs-popover-bottom .arrow {
-//     &::before {
-//       border-bottom-color: var(--secondary);
-//     }
-
-//     &::after {
-//       border-bottom-color: var(--bgcolor-global);
-//     }
-//   }
-//   &.bs-popover-right .arrow {
-//     &::before {
-//       border-right-color: var(--secondary);
-//     }
-
-//     &::after {
-//       border-right-color: var(--bgcolor-global);
-//     }
-//   }
-//   &.bs-popover-left .arrow {
-//     &::before {
-//       border-left-color: var(--secondary);
-//     }
-
-//     &::after {
-//       border-left-color: var(--bgcolor-global);
-//     }
-//   }
-// }
-
-// /*
-//  * GROWI Grid Edit Modal
-//  */
-// .grw-grid-edit-preview {
-//   background: $gray-900;
-// }
-
-// /*
-//  * Slack
-//  */
-// .grw-slack-notification {
-//   background-color: transparent;
-//   $color-slack: #4b144c;
-
-//   .form-control {
-//     background: var(--bgcolor-global);
-//   }
-
-//   .custom-control-label {
-//     &::before {
-//       background-color: var(--secondary);
-//       border-color: transparent;
-//     }
-//     &::after {
-//       background-color: darken($color-slack, 5%);
-//       // background-image: url(/images/icons/slack/slack-logo-dark-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
-//     }
-//   }
-
-//   .custom-control-input:checked ~ .custom-control-label {
-//     &::before {
-//       background-color: lighten($color-slack, 10%);
-//     }
-//     &::after {
-//       background-color: darken($color-slack, 5%);
-//       // background-image: url(/images/icons/slack/slack-logo-dark-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
-//     }
-//   }
-//   .grw-slack-logo svg {
-//     fill: #dd80de;
-//   }
-
-//   .grw-btn-slack {
-//     background-color: black;
-//     &:focus,
-//     &:hover {
-//       background-color: black;
-//     }
-//   }
-
-//   .grw-btn-slack-triangle {
-//     color: var(--secondary);
-//   }
-// }
-
-// /*
-//  * GROWI HandsontableModal
-//  */
-// .grw-hot-modal-navbar {
-//   background-color: var(--dark);
-// }
-
-// .wiki {
-//   h1 {
-//     border-color: hsl.lighten(var(--border-color-theme),10%);
-//   }
-//   h2 {
-//     border-color: var(--border-color-theme);
-//   }
-// }
-
-// /*
-//  * GROWI comment form
-//  */
-// .comment-form {
-//   #slack-mark-black {
-//     display: none;
-//   }
-// }
-
-// .page-comments-row {
-//   background: var(--bgcolor-subnav);
-// }
-
-// /*
-//  * GROWI tags
-//  */
-// .grw-tag-labels {
-//   .grw-tag-label {
-//     color: $color-tags;
-//     background-color: $bgcolor-tags;
-//   }
-// }
-
-// /*
-//  * GROWI popular tags
-//  */
-// .grw-popular-tag-labels {
-//   .grw-tag-label {
-//     color: $color-tags;
-//     background-color: $bgcolor-tags;
-//   }
-// }
-
-// /*
-//  * admin settings
-//  */
-// .admin-setting-header {
-//   border-color: $border-color-global;
-// }
-
-// /*
-// * grw-side-contents
-// */
-// .grw-side-contents-sticky-container {
-//   .grw-count-badge {
-//     @include count-badge.count-badge($gray-400, $gray-700);
-//   }
-
-//   .grw-border-vr {
-//     border-color: $border-color-toc;
-//   }
-
-//   .revision-toc {
-//     border-color: $border-color-toc;
-//   }
-// }
-
-// /*
-//  * drawio
-//  */
-// .drawio-viewer {
-//   border-color: $border-color-global;
-// }
-
-// /*
-//  * modal
-//  */
-// .grw-modal-head {
-//   border-color: $border-color-global;
-// }
-
-// /*
-//  * skeleton
-//  */
-// .grw-skeleton {
-// }

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

@@ -1,452 +0,0 @@
-// @use '../variables' as var;
-// @use '../bootstrap/init' as *;
-// @use '../atoms/mixins/buttons' as mixins-buttons;
-// @use './mixins/count-badge';
-// @use './mixins/hsl-button';
-// @use './hsl-functions' as hsl;
-
-
-// determine optional variables
-// $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-active: var(--bgcolor-list-active,var(--primary-65));
-// $color-list-active: var(--color-list-active,#{hsl.contrast(var(--primary-65))});
-// $bgcolor-subnav: var(--bgcolor-subnav,#{hsl.darken(var(--bgcolor-global),3%)});
-// $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));
-// $color-tags: var(--color-tags,var(--secondary));
-// $bgcolor-tags: var(--bgcolor-tags,#{$gray-200});
-// $border-color-global: var(--border-color-global,#{$gray-300});
-// $border-color-toc: var(--border-color-toc,var(--border-color-global));
-// $color-dropdown: var(--color-dropdown,var(--color-global));
-// $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-reversal);
-// $bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
-
-
-// override bootstrap variables
-// $text-muted: #{$gray-500};
-// $table-color: $color-table;
-// $table-bg: $bgcolor-table;
-// $table-border-color: $border-color-table;
-// $table-hover-color: $color-table-hover;
-// $table-hover-bg: $bgcolor-table-hover;
-// $border-color: $border-color-global;
-// $dropdown-color: $color-dropdown;
-// $dropdown-link-color: $color-dropdown-link;
-// $dropdown-link-hover-color: $color-dropdown-link-hover;
-// $dropdown-link-active-color: $color-dropdown-link-active;
-// $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
-
-// @import './mixins/list-group';
-// @import './reboot-bootstrap-text';
-// @import './reboot-bootstrap-border-colors';
-// @import './reboot-bootstrap-tables';
-// @import './reboot-bootstrap-dropdown';
-
-// // List Group
-// @include override-list-group-item(
-//   $color-list,
-//   $bgcolor-sidebar-list-group,
-//   $color-list-hover,
-//   $bgcolor-list-hover,
-//   $color-list-active,
-//   $bgcolor-list-active
-// );
-/*
- * Form
- */
-// .form-control {
-//   background-color: var(--bgcolor-global);
-// }
-
-// .form-control::placeholder {
-//   color: #{hsl.darken(var(--bgcolor-global), 20%)};
-// }
-
-// .form-control[disabled],
-// .form-control[readonly] {
-//   color: #{hsl.lighten(var(--color-global),10%)};
-//   background-color: #{hsl.darken(var(--color-global),5%)};
-// }
-
-/*
- * card
- */
-// .card.card-disabled {
-//   background-color: var(--background-color);
-//   border-color: #{$gray-200};
-// }
-
-/*
- * GROWI Login form
- */
-// .nologin {
-//   // background color
-//   --color-gradient: #3e4d6c;
-//   background: linear-gradient(45deg, #{hsl.darken(var(--color-gradient), 30%)} 0%, hsla(340, 100%, 55%, 0) 70%),
-//     linear-gradient(135deg, #{var.$growi-green} 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, #{var.$growi-blue} 10%, hsla(140, 90%, 50%, 0) 80%),
-//     linear-gradient(315deg, #{hsl.darken(var(--color-gradient), 25%)} 100%, hsla(35, 95%, 55%, 0) 70%);
-
-//   .noLogin-header {
-//     background-color: rgba(white, 0.5);
-
-//     .logo {
-//       background-color: rgba(black, 0);
-//       fill: rgba(black, 0.5);
-//     }
-
-//     h1 {
-//       color: rgba(black, 0.5);
-//     }
-//   }
-
-//   .noLogin-dialog {
-//     background-color: rgba(white, 0.5);
-//   }
-
-//   .dropdown-with-icon {
-//     .dropdown-toggle {
-//       color: white;
-//       background-color: rgba($gray-600, 0.7);
-//       box-shadow: unset;
-//       &:focus {
-//         color: white;
-//         background-color: rgba($gray-600, 0.7);
-//       }
-//     }
-//     i {
-//       color: darken(white, 30%);
-//       background-color: rgba($gray-700, 0.7);
-//     }
-//   }
-
-//   .input-group {
-//     .input-group-text {
-//       color: darken(white, 30%);
-//       background-color: rgba($gray-700, 0.7);
-//     }
-
-//     .form-control {
-//       color: white;
-//       background-color: rgba($gray-600, 0.7);
-//       box-shadow: unset;
-
-//       &::placeholder {
-//         color: darken(white, 30%);
-//       }
-//     }
-//   }
-
-//   // footer link text
-//   .link-growi-org {
-//     color: rgba(black, 0.4);
-
-//     &:hover,
-//     &.focus {
-//       color: black;
-
-//       .growi {
-//         color: darken(var.$growi-green, 20%);
-//       }
-
-//       .org {
-//         color: darken(var.$growi-blue, 15%);
-//       }
-//     }
-//   }
-// }
-
-/*
- * GROWI subnavigation
- */
-// .grw-subnav {
-//   background-color: var(--bgcolor-subnav);
-// }
-
-// .grw-subnav-fixed-container .grw-subnav {
-//   background-color: #{hsl.alpha(var(--bgcolor-subnav),85%)};
-// }
-
-// .grw-page-editor-mode-manager {
-//   .btn-outline-primary {
-//     &:hover {
-//       color: var(--primary);
-//       background-color: #{$gray-200};
-//     }
-//   }
-// }
-
-// .grw-drawer-toggler {
-//   @extend .btn-light;
-//   color: $gray-500;
-// }
-
-/*
- * GROWI Sidebar
- */
-// .grw-sidebar {
-//   // List
-//   @include override-list-group-item(
-//     $color-list,
-//     $bgcolor-sidebar-list-group,
-//     $color-list-hover,
-//     $bgcolor-list-hover,
-//     $color-list-active,
-//     $bgcolor-list-active
-//   );
-//   // sidebar-centent-bg
-//   .grw-navigation-wrap {
-//     // Drop a shadow on the light theme. The dark theme makes '$ bgcolor-sidebar-context' brighter than the body.
-//     box-shadow: 0px 0px 3px rgba(black, 0.24);
-//   }
-//   // Pagetree
-//   .grw-pagetree {
-//     @include override-list-group-item-for-pagetree(
-//       var(--color-sidebar-context),
-//       #{hsl.darken(var(--bgcolor-sidebar-context),5%)},
-//       #{hsl.darken(var(--bgcolor-sidebar-context),12%)},
-//       #{hsl.lighten(var(--color-sidebar-context),10%)},
-//       #{hsl.lighten(var(--color-sidebar-context),8%)},
-//       #{hsl.darken(var(--bgcolor-sidebar-context),15%)},
-//       #{hsl.darken(var(--bgcolor-sidebar-context),24%)}
-//     );
-
-//     .grw-pagetree-triangle-btn {
-//       @include mixins-buttons.button-outline-svg-icon-variant(#{gray-400}, var(--primary));
-//     }
-//   }
-//   .private-legacy-pages-link {
-//     &:hover {
-//       background: $bgcolor-list-hover;
-//     }
-//   }
-// }
-
-// .btn.btn-page-item-control {
-//   --gray-500: hsl(var(--gray-500-hs),var(--gray-500-l));
-//   --gray-500-hs: 210,13%;
-//   --gray-500-l: 61%;
-//   @include hsl-button.button-outline-variant(var(--gray-500), var(--primary), #{hsl.lighten(var(--primary), 52%)}, transparent);
-//   @include hover() {
-//     background-color: #{hsl.lighten(var(--primary), 58%)};
-//   }
-//   &:not(:disabled):not(.disabled):active,
-//   &:not(:disabled):not(.disabled).active {
-//     color: var(--primary);
-//   }
-//   box-shadow: none !important;
-// }
-
-/*
- * GROWI page list
- */
-// .page-list {
-//   .page-list-ul {
-//     > li {
-//       > span.page-list-meta {
-//         color: #{hsl.lighten(var(--color-global),10%)};
-//       }
-//     }
-//   }
-//   // List group
-//   .list-group-item {
-//     .page-list-snippet {
-//       color: #{hsl.lighten(var(--color-global),10%)};
-//     }
-//   }
-// }
-
-/*
- * GROWI ToC
- */
-// .revision-toc-content {
-//   ::marker {
-//     color: #{hsl.darken(var(--bgcolor-global),20%)};
-//   }
-// }
-
-/*
- * GROWI Editor
- */
-// .grw-editor-navbar-bottom {
-//   background-color: #{$gray-50};
-
-//   #slack-mark-white {
-//     display: none;
-//   }
-
-//   .input-group-text {
-//     margin-right: 1px;
-//     color: var(--secondary);
-//     border-color: var(--light);
-//   }
-
-//   .btn.btn-outline-secondary {
-//     border-color: $border-color;
-//   }
-// }
-
-/*
- * GROWI Link Edit Modal
- */
-// .link-edit-modal {
-//   span i {
-//     color: #{$gray-400};
-//   }
-// }
-
-/*
- * GROWI Grid Edit Modal
- */
-
-// .grw-grid-edit-preview {
-//   background: #{$gray-100};
-// }
-
-/*
- * Slack
- */
-// .grw-slack-notification {
-//   background-color: white;
-//   --color-slack: #4b144c;
-
-//   .form-control {
-//     background: white;
-//   }
-
-//   .custom-control-label {
-//     &::before {
-//       background-color: #{$gray-200};
-//       border-color: transparent;
-//     }
-//     &::after {
-//       background-color: white;
-//       // background-image: url(/images/icons/slack/slack-logo-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
-//     }
-//   }
-//   .custom-control-input:checked ~ .custom-control-label {
-//     &::before {
-//       background-color: #{hsl.lighten(var(--color-slack), 60%)};
-//     }
-//     &::after {
-//       // background-image: url(/images/icons/slack/slack-logo-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
-//     }
-//   }
-//   .grw-slack-logo svg {
-//     fill: #af30b0;
-//   }
-
-//   .grw-btn-slack {
-//     background-color: white;
-
-//     &:hover,
-//     &:focus {
-//       background-color: white;
-//     }
-//   }
-
-//   .grw-btn-slack-triangle {
-//     color: var(--secondary);
-//   }
-// }
-
-/*
- * GROWI HandsontableModal
- */
-// .grw-hot-modal-navbar {
-//   background-color: var(--light);
-// }
-
-// .wiki {
-//   h1 {
-// border-color: $border-color-theme;
-// }
-// h2 {
-// border-color: $border-color-theme;
-//   }
-// }
-
-/*
- * GROWI comment form
-//  */
-// .comment-form {
-//   #slack-mark-white {
-//     display: none;
-//   }
-// }
-
-// .page-comments-row {
-//   background: var(--bgcolor-subnav);
-// }
-
-/*
- * GROWI tags
- */
-// .grw-tag-labels {
-//   .grw-tag-label {
-// color: $color-tags;
-// background-color: $bgcolor-tags;
-//   }
-// }
-
-/*
- * GROWI popular tags
- */
-// .grw-popular-tag-labels {
-//   .grw-tag-label {
-// color: $color-tags;
-// background-color: $bgcolor-tags;
-//   }
-// }
-
-/*
-* grw-side-contents
-*/
-// .grw-side-contents-sticky-container {
-//   .grw-count-badge {
-//     @include count-badge.count-badge(#{$gray-600}, #{$gray-200});
-//   }
-
-//   .grw-border-vr {
-//     border-color: $border-color-toc;
-//   }
-//   .revision-toc {
-//     border-color: $border-color-toc;
-//   }
-// }
-
-/*
- * drawio
- */
-// .drawio-viewer {
-//   border-color: $border-color-global;
-// }
-
-/*
- * admin settings
- */
-// .admin-setting-header {
-//   border-color: $border-color;
-// }
-
-/*
- * modal
- */
-// .grw-modal-head {
-//   border-color: $border-color-global;
-// }
-
-/*
- * skeleton
- */
-// .grw-skeleton {
-//   background-color: #{hsl.lighten(var(--bgcolor-navbar),10%)};
-// }
-

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

@@ -1,688 +0,0 @@
-// @use '../variables' as var;
-// @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;
-
-// //
-// //== Apply to Bootstrap
-// //
-
-// // 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,var(--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: 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: 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: var(--color-modal-header,#{hsl.contrast(var(--primary))});
-
-// code:not([class^='language-']) {
-//   @include code.code-inline-color(var(--color-inline-code), var(--bgcolor-inline-code), var(--bordercolor-inline-code));
-// }
-
-// .code-highlighted {
-//   border-color: var(--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);
-//     }
-//   }
-// }
-
-// // Dropdown
-// .grw-apperance-mode-dropdown {
-//   .grw-sidebar-mode-icon svg {
-//     fill: var(--secondary);
-//   }
-//   .grw-color-mode-icon svg {
-//     fill: var(--color-global);
-//   }
-//   .grw-color-mode-icon-muted svg {
-//     fill: var(--secondary);
-//   }
-// }
-
-// // Form
-// .form-control {
-//   @include form-control-focus();
-// }
-
-// // Tabs
-// .nav.nav-tabs .nav-link.active {
-//   color: var(--color-link);
-//   background: transparent;
-
-//   &:hover,
-//   &:focus {
-//     color: var(--color-link-hover);
-//   }
-// }
-
-// // Pagination
-// ul.pagination {
-//   li.page-item.disabled {
-//     button.page-link {
-//       color: #{$gray-400};
-//     }
-//   }
-//   li.page-item.active {
-//     button.page-link {
-//       color: #{hsl.contrast(var(--primary))};
-//       background-color: var(--primary);
-//       &:hover,
-//       &:focus {
-//         color: #{hsl.contrast(var(--primary))};
-//         background-color: var(--primary);
-//       }
-//     }
-//   }
-//   li.page-item {
-//     button.page-link {
-//       color: var(--primary);
-//       border-color: var(--secondary);
-//       &:hover,
-//       &:active,
-//       &:focus {
-//         color: var(--primary);
-//       }
-//     }
-//   }
-// }
-
-// //
-// //== Apply to Handsontable
-// //
-// .handsontable {
-//   color: initial;
-// }
-
-// //
-// //== Apply to GROWI Elements
-// //
-
-// .grw-logo {
-//   set transition for fill
-//   svg * {
-//     transition: fill 0.8s ease-out;
-//   }
-
-//   svg {
-//     fill: var(--fillcolor-logo-mark);
-//   }
-
-//   &:hover {
-//     svg {
-//       .group1 {
-//         fill: #{var.$growi-green};
-//       }
-
-//       .group2 {
-//         fill: #{var.$growi-blue};
-//       }
-//     }
-//   }
-// }
-
-// .grw-navbar {
-//   background: var(--bgcolor-navbar);
-//   .nav-item .nav-link {
-//     color: var(--color-link-nabvar);
-//   }
-
-//   border-image: var(--border-image-navbar);
-//   border-image-slice: 1;
-
-//   .grw-app-title {
-//     color: var(--fillcolor-logo-mark);
-//   }
-// }
-
-// .grw-global-search {
-//   .btn-secondary.dropdown-toggle {
-//     @include hsl-button.button-variant(var(--bgcolor-search-top-dropdown), var(--bgcolor-search-top-dropdown));
-//   }
-
-//   // for https://youtrack.weseek.co.jp/issue/GW-2603
-//   .search-typeahead {
-//     background-color: hsla(var(--bgcolor-global-hs),var(--bgcolor-global-l),10%);
-//   }
-// }
-
-// .grw-sidebar {
-//   $color-resize-button: var(--color-resize-button--,var(--color-global));
-//   $bgcolor-resize-button: var(--bgcolor-resize-button,white);
-//   $color-resize-button-hover: var(--color-resize-button-hover,var(--color-reversal));
-//   $bgcolor-resize-button-hover: var(--bgcolor-resize-button-hover,#{hsl.lighten(var(--bgcolor-resize-button), 5%)});
-//   .grw-navigation-resize-button {
-//     .hexagon-container svg {
-//       .background {
-//         fill: var(--bgcolor-resize-button);
-//       }
-//       .icon {
-//         fill: var(--color-resize-button);
-//       }
-//     }
-//     &:hover .hexagon-container svg {
-//       .background {
-//         fill: var(--bgcolor-resize-button-hover);
-//       }
-//       .icon {
-//         fill: var(--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: var(--color-btn-reload-in-sidebar);
-//     }
-
-//     .grw-recent-changes-resize-button {
-//       .custom-control-label::before {
-//         background-color: var(--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: var(--primary);
-//         border-color: var(--primary);
-//       }
-//       .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
-//  */
-// .editor-container .navbar-editor svg {
-//   fill: var(--color-editor-icons);
-// }
-
-// // page preview button in link form
-// .btn-page-preview svg {
-//   fill: white;
-// }
-
-// /*
-//  * Modal
-//  */
-// .modal {
-//   .modal-header {
-//     border-bottom-color: var(--border-color-theme);
-//     .modal-title {
-//       color: var(--color-modal-header);
-//     }
-//     .close {
-//       color: hsla(var(--primary-hs),var(--primary-l),50%);
-
-//       &:hover {
-//         opacity: 0.9;
-//       }
-//     }
-//   }
-
-//   .modal-content {
-//     background-color: var(--bgcolor-global);
-//   }
-
-//   .modal-footer {
-//     border-top-color: var(--border-color-theme);
-//   }
-// }
-
-// .grw-custom-nav-tab {
-//   .nav-item {
-//     &:hover,
-//     &:focus {
-//       background-color: hsla(var(--color-link-hs),var(--color-link-l),10%);
-//     }
-//     .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-page-accessories-modal {
-//   .modal-header {
-//     .close {
-//       color: var(--secondary);
-//     }
-//   }
-// }
-
-// /*
-//  * cards
-//  */
-// .card.well {
-//   color: var(--color-global);
-//   background-color: var(--bgcolor-card);
-//   border-color: var(--light);
-//   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-// }
-
-// .admin-bot-card {
-//   .grw-botcard-title-active {
-//     color: #{$gray-200};
-//   }
-// }
-
-// /*
-//  * Form Slider
-//  */
-// .admin-page {
-//   span.slider {
-//     background-color: #{$gray-300};
-
-//     &:before {
-//       background-color: white;
-//     }
-//   }
-
-//   input:checked + .slider {
-//     background-color: #007bff;
-//   }
-
-//   input:focus + .slider {
-//     box-shadow: 0 0 1px #007bff;
-//   }
-// }
-
-// /*
-//  * GROWI wiki
-//  */
-// .wiki {
-//   h1,
-//   h2,
-//   h3,
-//   h4,
-//   h5,
-//   h6,
-//   h7 {
-//     &.blink {
-//       @include mixins.blink-bgcolor(var(--bgcolor-blinked-section));
-//     }
-//   }
-
-//   .highlighted-keyword {
-//     background: linear-gradient(transparent 60%, var(--bgcolor-keyword-highlighted) 60%);
-//   }
-
-//   a {
-//     color: var(--color-link-wiki);
-
-//     &:hover {
-//       color: var(--color-link-wiki-hover);
-//     }
-//   }
-
-//   // table with handsontable modal button
-//   .editable-with-handsontable {
-//     button {
-//       color: var(--color-link-wiki);
-//     }
-
-//     button:hover {
-//       color: var(--color-link-wiki-hover);
-//     }
-//   }
-// }
-
-// /*
-//  * GROWI page-list
-//  */
-// .page-list {
-//   // List group
-//   .list-group {
-//     .list-group-item {
-//       a {
-//         svg {
-//           fill: var(--color-global);
-//         }
-
-//         @include hover() {
-//           svg {
-//             fill: var(--color-global);
-//           }
-//         }
-//       }
-
-//       .page-list-meta {
-//         color: var(--color-page-list-group-item-meta);
-//         svg {
-//           fill: var(--color-page-list-group-item-meta);
-//         }
-//       }
-
-//       &.list-group-item-action {
-//         &.active {
-//           background-color: #{hsl.lighten(var(--bgcolor-global),76%)};
-//           border-left-color: var(--primary);
-//         }
-//       }
-//     }
-//   }
-// }
-
-// /*
-//  * GROWI Editor
-//  */
-// .layout-root.editing {
-//   .main {
-//     background-color: #{hsl.darken(var(--bgcolor-global),2%)};
-
-//     .page-editor-editor-container {
-//       border-right-color: var(--border-color-theme);
-
-//       .navbar-editor {
-//         background-color: var(--bgcolor-global); // same color with active tab
-//         border-bottom-color: var(--border-color-theme);
-//       }
-//     }
-
-//     .page-editor-preview-container {
-//       background-color: var(--bgcolor-global);
-//     }
-//   }
-// }
-
-// /*
-//  * Preview for editing /Sidebar
-//  */
-// body.editing-sidebar {
-//   .page-editor-preview-body {
-//     color: var(--color-sidebar-context);
-//     background-color: var(--bgcolor-sidebar-context);
-//   }
-// }
-
-// /*
-//  * GROWI Grid Edit Modal
-//  */
-// .grw-grid-edit-preview {
-//   .desktop-preview,
-//   .tablet-preview,
-//   .mobile-preview {
-//     background: var(--bgcolor-global);
-//   }
-//   .grid-edit-border-for-each-cols {
-//     border: 2px solid var(--bgcolor-global);
-//   }
-// }
-
-// .grid-preview-col-0 {
-//   background: #{var.$growi-blue};
-// }
-
-// .grid-preview-col-1 {
-//   background: var(--info);
-// }
-
-// .grid-preview-col-2 {
-//   background: var(--success);
-// }
-
-// .grid-preview-col-3 {
-//   background: #{var.$growi-green};
-// }
-
-// /*
-//  * GROWI comment
-//  */
-// .page-comment-meta .page-comment-revision svg {
-//   fill: var(--color-link);
-
-//   &:hover {
-//     fill: var(--color-link-hover);
-//   }
-// }
-
-// /*
-//  * GROWI comment form
-//  */
-// .page-comments {
-//   .page-comment .page-comment-main,
-//   .page-comment-form .comment-form-main {
-//     background-color: var(--bgcolor-global);
-
-//     &:before {
-//       border-right-color: var(--bgcolor-global);
-//     }
-
-//     .nav.nav-tabs {
-//       > li > a.active {
-//         background: transparent;
-//         border-bottom: solid 1px #{hsl.darken(var(--bgcolor-global),4%)};
-//         border-bottom-color: #{hsl.darken(var(--bgcolor-global),4%)};
-//       }
-//     }
-//   }
-// }
-
-// /*
-//  * GROWI search result
-//  */
-// .search-result-base {
-//   .grw-search-page-nav {
-//     background-color: var(--bgcolor-subnav);
-//   }
-//   .search-control {
-//     background-color: var(--bgcolor-global);
-//   }
-//   .page-list {
-//     .highlighted-keyword {
-//       background: linear-gradient(transparent 60%, var(--bgcolor-keyword-highlighted) 60%);
-//     }
-//   }
-// }
-
-// /*
-//  * react bootstrap typeahead
-//  */
-// mark.rbt-highlight-text {
-//   // Temporarily the highlight color is black
-//   color: black;
-// }
-
-// /*
-//  * GROWI page content footer
-//  */
-// .page-content-footer {
-//   background-color: #{hsl.darken(var(--bgcolor-global),2%)};
-//   border-top-color: var(--border-color-theme);
-// }
-
-// /*
-//  * GROWI admin page #layoutOptions #themeOptions
-//  */
-// .admin-page {
-//   #layoutOptions {
-//     .customize-layout-card {
-//       &.border-active {
-//         border-color: var(--color-theme-color-box);
-//       }
-//     }
-//   }
-
-//   #themeOptions {
-//     .theme-option-container.active {
-//       .theme-option-name {
-//         color: var(--color-global);
-//       }
-//       a {
-//         background-color: var(--color-theme-color-box);
-//         border-color: var(--color-theme-color-box);
-//       }
-//     }
-//   }
-// }
-
-// /*
-//  * HackMd
-//  */
-// .bg-box {
-//   background-color: var(--bgcolor-global);
-// }
-
-// .grw-fab {
-//   .btn-create-page {
-//     fill: #{hsl.contrast(var(--primary))};
-//   }
-
-//   .btn-scroll-to-top {
-//     fill: #{$gray-900};
-//   }
-// }
-
-// /*
-//   Slack Integration
-// */
-// .selecting-bot-type {
-//   .bot-type-disc {
-//     width: 20px;
-//   }
-// }
-
-// /*
-//   In App Notification
-// */
-// .grw-unopend-notification {
-//   width: 7px;
-//   height: 7px;
-//   background-color: var(--primary);
-// }
-
-// /*
-// Emoji picker modal
-// */
-// .emoji-picker-modal {
-//   background-color: transparent !important;
-// }

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

@@ -1,36 +1,5 @@
 @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, ')');

packages/preset-themes/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/preset-themes/src/styles/theme/_reboot-bootstrap-border-colors.scss

@@ -1,25 +0,0 @@
-@use '../bootstrap/init' as *;
-
-//
-// Border
-//
-
-.border {
-  border: $border-width solid $border-color !important;
-}
-
-.border-top {
-  border-top: $border-width solid $border-color !important;
-}
-
-.border-right {
-  border-right: $border-width solid $border-color !important;
-}
-
-.border-bottom {
-  border-bottom: $border-width solid $border-color !important;
-}
-
-.border-left {
-  border-left: $border-width solid $border-color !important;
-}

packages/preset-themes/src/styles/theme/_reboot-bootstrap-buttons.scss

@@ -1 +0,0 @@
-

packages/preset-themes/src/styles/theme/_reboot-bootstrap-dropdown.scss

@@ -1,37 +0,0 @@
-// @use '../bootstrap/init' as *;
-
-// .dropdown-menu {
-//   color: $color-dropdown;
-//   svg {
-//     fill: $color-dropdown;
-//   }
-
-//   background-color: $bgcolor-dropdown;
-// }
-
-// .dropdown-item {
-//   color: $color-dropdown-link;
-//   svg {
-//     fill: $color-dropdown-link;
-//   }
-
-//   @include hover-focus() {
-//     color: $color-dropdown-link;
-//     svg {
-//       fill: $color-dropdown-link-hover;
-//     }
-
-//     @include gradient-bg($bgcolor-dropdown-link-hover);
-//   }
-
-//   &:active,
-//   &.active,
-//   &:active:hover,
-//   &.active:hover {
-//     color: $color-dropdown-link-active;
-//     background-color:  $bgcolor-dropdown-link-active;
-//     svg {
-//       fill: $color-dropdown-link-active;
-//     }
-//   }
-// }

packages/preset-themes/src/styles/theme/_reboot-bootstrap-nav.scss

@@ -1,51 +0,0 @@
-//
-//
-// Apply partially
-//   https://github.com/twbs/bootstrap/blob/v4.5.0/scss/_nav.scss
-//
-//
-
-.nav-link {
-  // Disabled state lightens text
-  &.disabled {
-    color: $nav-link-disabled-color;
-    svg {
-      fill: $nav-link-disabled-color;
-    }
-  }
-}
-
-//
-// Tabs
-//
-
-.nav-tabs {
-  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
-
-  .nav-link {
-    border: $nav-tabs-border-width solid transparent;
-    @include border-top-radius($nav-tabs-border-radius);
-
-    @include hover-focus() {
-      border-color: $nav-tabs-link-hover-border-color;
-    }
-
-    &.disabled {
-      color: $nav-link-disabled-color;
-      background-color: transparent;
-      border-color: transparent;
-    }
-  }
-
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    color: $nav-tabs-link-active-color;
-    background-color: $nav-tabs-link-active-bg;
-    border-color: $nav-tabs-link-active-border-color;
-  }
-
-  .dropdown-menu {
-    // Remove the top rounded corners here since there is a hard edge above the menu
-    @include border-top-radius(0);
-  }
-}

packages/preset-themes/src/styles/theme/_reboot-bootstrap-tables.scss

@@ -1,74 +0,0 @@
-@use '../bootstrap/init' as *;
-
-//
-//
-// Apply partially
-//   https://github.com/twbs/bootstrap/blob/v4.5.0/scss/_tables.scss
-//
-//
-
-// .table {
-//   color: $color-table;
-//   background-color: $bgcolor-table; // Reset for nesting within parents with `background-color`.
-
-//   th,
-//   td {
-//     border-top-color: $border-color-table;
-//   }
-
-//   thead th {
-//     border-bottom-color: $border-color-table;
-//   }
-
-//   tbody + tbody {
-//     border-top-color: $border-color-table;
-//   }
-// }
-
-// .table-bordered {
-//   border-color: $border-color-table;
-
-//   th,
-//   td {
-//     border-color: $border-color-table;
-//   }
-// }
-
-// .table-hover {
-//   tbody tr {
-//     @include hover() {
-//       color: $color-table-hover;
-//       background-color: $bgcolor-table-hover;
-//     }
-//   }
-// }
-
-.table-dark {
-  color: $table-dark-color;
-  background-color: $table-dark-bg;
-
-  th,
-  td,
-  thead th {
-    border-color: $table-dark-border-color;
-  }
-
-  &.table-bordered {
-    border: 0;
-  }
-
-  &.table-striped {
-    tbody tr:nth-of-type(#{$table-striped-order}) {
-      background-color: $table-dark-accent-bg;
-    }
-  }
-
-  &.table-hover {
-    tbody tr {
-      @include hover() {
-        color: $table-dark-hover-color;
-        background-color: $table-dark-hover-bg;
-      }
-    }
-  }
-}

packages/preset-themes/src/styles/theme/_reboot-bootstrap-text.scss

@@ -1,3 +0,0 @@
-.text-muted {
-  color: $text-muted !important;
-}