Merge pull request #6173 from weseek/support/reorganize-scss

support: Reorganize scss

packages/app/src/components/Navbar/GrowiNavbar.scss

@@ -0,0 +1,94 @@
+@use '~/styles/variables' as var;
+@use '~/styles/bootstrap/init' as bs;
+@use '~/styles/mixins';
+
+.grw-logo {
+  svg {
+    width: var.$grw-logo-width;
+    height: var.$grw-navbar-height;
+    padding: (var.$grw-logo-width - var.$grw-logomark-width) / 2;
+  }
+}
+
+.confidential {
+  font-weight: bold;
+}
+
+.grw-navbar {
+  top: #{-1 * var.$grw-navbar-height} !important;
+
+  z-index: var.$grw-navbar-z-index !important;
+  max-height: var.$grw-navbar-height + var.$grw-navbar-border-width;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: var.$grw-navbar-border-width solid;
+  border-left: 0;
+
+  .grw-app-title {
+    @include mixins.variable-font-size(24px);
+  }
+
+  .grw-navbar-search {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0%);
+  }
+
+  .nav-link,
+  .nav-item.confidential {
+    display: flex;
+    align-items: center;
+    min-height: var.$grw-navbar-height;
+    padding: 0 1rem;
+  }
+
+  .nav-link {
+    &:hover {
+      background: rgba(0, 0, 0, 0.1);
+    }
+
+    &:focus {
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+  .nav-item.confidential {
+    :not(i) {
+      @include mixins.variable-font-size(14px);
+    }
+
+    @include bs.media-breakpoint-only(md) {
+      max-width: 100px;
+    }
+
+    max-width: 120px;
+    max-height: var.$grw-navbar-height;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  .grw-personal-dropdown {
+    .dropdown-menu {
+      min-width: 15rem;
+
+      .grw-email-sm {
+        font-size: 0.75em;
+      }
+      .grw-icon-container svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+
+  .grw-notification-dropdown {
+    .dropdown-menu {
+      max-width: 70vw;
+    }
+  }
+}
+
+.grw-notification-badge {
+  position: absolute;
+  top: 6px;
+  right: 3.5px;
+}

packages/app/src/components/Navbar/GrowiNavbar.tsx

@@ -16,6 +16,9 @@ import GrowiLogo from '../Icons/GrowiLogo';
 
 import PersonalDropdown from './PersonalDropdown';
 
+import './GrowiNavbar.scss';
+
+
 const ShowSkeltonInSSR = memo(({ children }: HasChildren): JSX.Element => {
   return isServer()
     ? <></>

packages/app/src/pages/_app.page.tsx

@@ -1,18 +1,15 @@
 import React from 'react';
 
-import { AppProps } from 'next/app';
 import { appWithTranslation } from 'next-i18next';
-
-import * as nextI18nConfig from '../next-i18next.config';
-
-// import { appWithTranslation } from '~/i18n';
+import { AppProps } from 'next/app';
 
 import '~/styles/style-next.scss';
 import '~/styles/theme/default.scss';
 // import InterceptorManager from '~/service/interceptor-manager';
 
-import { useGrowiVersion } from '../stores/context';
+import * as nextI18nConfig from '../next-i18next.config';
 import { useI18nextHMR } from '../services/i18next-hmr';
+import { useGrowiVersion } from '../stores/context';
 
 import { CommonProps } from './commons';
 // import { useInterceptorManager } from '~/stores/interceptor';

packages/app/src/styles/_layout.scss

@@ -1,3 +1,6 @@
+@use './variables';
+@use './bootstrap/init' as bs;
+
 body {
   overflow-y: scroll !important;
   overscroll-behavior-y: none;
@@ -15,18 +18,6 @@ body.growi-layout-fluid .grw-container-convertible {
   @extend .container-fluid;
 }
 
-.grw-logo {
-  svg {
-    width: $grw-logo-width;
-    height: $grw-navbar-height;
-    padding: ($grw-logo-width - $grw-logomark-width) / 2;
-  }
-}
-
-.confidential {
-  font-weight: bold;
-}
-
 .grw-modal-head {
   font-size: 1em;
   border-bottom: 1px solid transparent;
@@ -39,9 +30,9 @@ body.growi-layout-fluid .grw-container-convertible {
 
 // padding settings for GrowiNavbarBottom
 .page-wrapper {
-  padding-bottom: $grw-navbar-bottom-height;
+  padding-bottom: variables.$grw-navbar-bottom-height;
 
-  @include media-breakpoint-up(md) {
+  @include bs.media-breakpoint-up(md) {
     padding-bottom: unset;
   }
 }
@@ -49,7 +40,7 @@ body.growi-layout-fluid .grw-container-convertible {
 .main {
   margin-top: 1rem;
 
-  @include media-breakpoint-up(lg) {
+  @include bs.media-breakpoint-up(lg) {
     margin-top: 2rem;
   }
 }
@@ -57,7 +48,7 @@ body.growi-layout-fluid .grw-container-convertible {
 .grw-side-contents-container {
   margin-bottom: 1rem;
 
-  @include media-breakpoint-up(lg) {
+  @include bs.media-breakpoint-up(lg) {
     width: 250px;
     min-width: 250px;
     margin-left: 30px;
@@ -74,7 +65,7 @@ body.growi-layout-fluid .grw-container-convertible {
   position: fixed;
   right: 1.5rem;
   bottom: 3rem;
-  z-index: $zindex-fixed;
+  z-index: bs.$zindex-fixed;
 
   transition: all 200ms linear;
 
@@ -114,7 +105,7 @@ body.growi-layout-fluid .grw-container-convertible {
 
   .main {
     header {
-      border-bottom: solid 1px $secondary;
+      border-bottom: solid 1px bs.$secondary;
       h1 {
         font-size: 2em;
         color: black;
@@ -130,13 +121,13 @@ body.growi-layout-fluid .grw-container-convertible {
       max-width: 100%;
       margin-bottom: 20px;
       font-size: 0.9em;
-      border: solid 1px $gray-400;
+      border: solid 1px bs.$gray-400;
     }
 
     .meta {
       margin-top: 32px;
-      color: $secondary;
-      border-top: solid 1px $gray-300;
+      color: bs.$secondary;
+      border-top: solid 1px bs.$gray-300;
     }
   }
 }

packages/app/src/styles/_mixins.scss

@@ -1,16 +1,18 @@
+@use './bootstrap/init' as bs;
+
 @mixin variable-font-size($basesize) {
   font-size: $basesize * 0.6;
 
-  @include media-breakpoint-only(sm) {
+  @include bs.media-breakpoint-only(sm) {
     font-size: #{$basesize * 0.7};
   }
-  @include media-breakpoint-only(md) {
+  @include bs.media-breakpoint-only(md) {
     font-size: #{$basesize * 0.8};
   }
-  @include media-breakpoint-only(lg) {
+  @include bs.media-breakpoint-only(lg) {
     font-size: #{$basesize * 0.9};
   }
-  @include media-breakpoint-up(xl) {
+  @include bs.media-breakpoint-up(xl) {
     font-size: $basesize;
   }
 }
@@ -170,7 +172,7 @@
     fill: color-yiq($background);
   }
 
-  @include hover() {
+  @include bs.hover() {
     svg {
       fill: color-yiq($hover-background);
     }
@@ -204,7 +206,7 @@
   svg {
     fill: $value;
   }
-  @include hover() {
+  @include bs.hover() {
     svg {
       fill: $color-hover;
     }
@@ -223,13 +225,3 @@
     }
   }
 }
-
-@mixin count-badge($color, $bg-color, $min-width: initial) {
-  min-width: $min-width;
-  padding: 0.1rem 0.5rem;
-  font-family: $font-family-monospace;
-  font-size: 12px;
-  font-weight: 500;
-  color: $color;
-  background-color: $bg-color;
-}

packages/app/src/styles/_navbar.scss

@@ -1,76 +1,3 @@
-.grw-navbar {
-  top: -$grw-navbar-height !important;
-
-  z-index: $grw-navbar-z-index !important;
-  max-height: $grw-navbar-height + $grw-navbar-border-width;
-  border-top: 0;
-  border-right: 0;
-  border-bottom: $grw-navbar-border-width solid;
-  border-left: 0;
-
-  .grw-app-title {
-    @include variable-font-size(24px);
-  }
-
-  .grw-navbar-search {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 0%);
-  }
-
-  .nav-link,
-  .nav-item.confidential {
-    display: flex;
-    align-items: center;
-    min-height: $grw-navbar-height;
-    padding: 0 1rem;
-  }
-
-  .nav-link {
-    &:hover {
-      background: rgba(0, 0, 0, 0.1);
-    }
-
-    &:focus {
-      background: rgba(0, 0, 0, 0);
-    }
-  }
-  .nav-item.confidential {
-    :not(i) {
-      @include variable-font-size(14px);
-    }
-
-    @include media-breakpoint-only(md) {
-      max-width: 100px;
-    }
-
-    max-width: 120px;
-    max-height: $grw-navbar-height;
-    overflow: hidden;
-    background: rgba(0, 0, 0, 0.2);
-  }
-
-  .grw-personal-dropdown {
-    .dropdown-menu {
-      min-width: 15rem;
-
-      .grw-email-sm {
-        font-size: 0.75em;
-      }
-      .grw-icon-container svg {
-        width: 18px;
-        height: 18px;
-      }
-    }
-  }
-
-  .grw-notification-dropdown {
-    .dropdown-menu {
-      max-width: 70vw;
-    }
-  }
-}
-
 .grw-navbar-bottom {
   height: $grw-navbar-bottom-height;
 
@@ -108,9 +35,3 @@
     transition: 0.3s ease-in-out;
   }
 }
-
-.grw-notification-badge {
-  position: absolute;
-  top: 6px;
-  right: 3.5px;
-}

packages/app/src/styles/_override-bootstrap.scss

@@ -1,178 +0,0 @@
-// increase specificity with ':root' for GROWI theming
-:root {
-  font-size: $font-size-root;
-  > body {
-    font-family: $font-family-sans-serif;
-  }
-
-  * {
-    outline: none !important;
-  }
-
-  .container,
-  .container-sm,
-  .container-md,
-  .container-lg,
-  .container-xl,
-  .container-fluid {
-    // default: 15px
-    // padding-right: 15px;
-    // padding-left: 15px;
-    @include media-breakpoint-down(xs) {
-      padding-right: 10px;
-      padding-left: 10px;
-    }
-    @include media-breakpoint-up(md) {
-      padding-right: 30px;
-      padding-left: 30px;
-    }
-  }
-
-  h1 {
-    font-size: 36px;
-    line-height: 48px;
-  }
-
-  h2 {
-    font-size: 24px;
-    line-height: 36px;
-  }
-
-  h3 {
-    font-size: 21px;
-    line-height: 30px;
-  }
-
-  h4 {
-    font-size: 18px;
-    line-height: 22px;
-  }
-
-  h5 {
-    font-size: 16px;
-    line-height: 18px;
-  }
-
-  h6 {
-    font-size: 12px;
-    line-height: 14px;
-  }
-
-  // Navs
-  .nav-tabs {
-    .nav-item {
-      margin-right: 0.15rem;
-      a.active {
-        cursor: default;
-      }
-    }
-  }
-
-  // Custom Control
-  .custom-control {
-    .custom-control-input,
-    .custom-control-input + .custom-control-label {
-      cursor: pointer;
-    }
-  }
-
-  // card (substitute panel of bootstrap3)
-  .card {
-    margin-bottom: 20px;
-  }
-
-  .card-header {
-    font-weight: 700;
-    text-transform: none;
-  }
-
-  .card-header:first-child {
-  }
-
-  // Well (substitute Well of bootstrap3)
-  .card.well {
-    min-height: 20px;
-    padding: $card-spacer-y $card-spacer-x;
-  }
-
-  // Dropdowns
-  .dropdown-toggle {
-    &.btn.disabled {
-      pointer-events: auto;
-      cursor: not-allowed;
-    }
-
-    // hide caret
-    &.dropdown-toggle-no-caret::after {
-      content: none;
-    }
-  }
-
-  // Badges
-  .badge {
-    @extend .badge-pill;
-  }
-
-  //Modals
-  .modal-open {
-    width: 100%;
-    padding-right: 0 !important;
-  }
-
-  .modal-content {
-    box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);
-  }
-
-  .modal-header {
-    border-bottom: 1px solid #e5e5e5;
-  }
-
-  .modal-footer {
-    border-top: 1px solid #e5e5e5;
-  }
-
-  // When fading in the modal, animate it to slide down
-  .modal.fade .modal-dialog {
-    @include transition($modal-transition);
-    transform: $modal-fade-transform;
-  }
-  .modal.show .modal-dialog {
-    transform: $modal-show-transform;
-  }
-  // When trying to close, animate focus to scale
-  .modal.modal-static .modal-dialog {
-    transform: $modal-scale-transform;
-  }
-
-  // col-form-label (substitute for control-label of bootstrap3)
-  .col-form-label {
-    text-align: right;
-  }
-
-  // label
-  label {
-    // add with-no-font-weight class in case you do not want to apply font-weight 700 to label
-    :not(.with-no-font-weight) {
-      font-weight: 700;
-    }
-  }
-
-  // disabled button (reproduction from bootstrap3.)
-  // see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
-  .btn.disabled,
-  .btn[disabled],
-  fieldset[disabled] .btn {
-    cursor: not-allowed;
-  }
-
-  // progress bar
-  .progress {
-    margin-bottom: 18px;
-    overflow: hidden;
-  }
-
-  .text-break {
-    word-break: break-word;
-    overflow-wrap: break-word;
-  }
-}

packages/app/src/styles/bootstrap/_apply.scss

@@ -0,0 +1,12 @@
+@use 'init' as *;
+
+@import '~bootstrap/scss/utilities';
+@import '~bootstrap/scss/root';
+
+// increase specificity with ':root' for GROWI theming
+:root {
+  // import bootstrap
+  @import '~bootstrap/scss/bootstrap';
+  // override
+  @import './override';
+}

packages/app/src/styles/bootstrap/_init.scss

@@ -0,0 +1,5 @@
+@import './variables';
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';

packages/app/src/styles/bootstrap/_override.scss

@@ -0,0 +1,176 @@
+body {
+  font-family: $font-family-sans-serif;
+}
+
+* {
+  outline: none !important;
+}
+
+.container,
+.container-sm,
+.container-md,
+.container-lg,
+.container-xl,
+.container-fluid {
+  // default: 15px
+  // padding-right: 15px;
+  // padding-left: 15px;
+  @include media-breakpoint-down(xs) {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+  @include media-breakpoint-up(md) {
+    padding-right: 30px;
+    padding-left: 30px;
+  }
+}
+
+h1 {
+  font-size: 36px;
+  line-height: 48px;
+}
+
+h2 {
+  font-size: 24px;
+  line-height: 36px;
+}
+
+h3 {
+  font-size: 21px;
+  line-height: 30px;
+}
+
+h4 {
+  font-size: 18px;
+  line-height: 22px;
+}
+
+h5 {
+  font-size: 16px;
+  line-height: 18px;
+}
+
+h6 {
+  font-size: 12px;
+  line-height: 14px;
+}
+
+// Navs
+.nav-tabs {
+  .nav-item {
+    margin-right: 0.15rem;
+    a.active {
+      cursor: default;
+    }
+  }
+}
+
+// Custom Control
+.custom-control {
+  .custom-control-input,
+  .custom-control-input + .custom-control-label {
+    cursor: pointer;
+  }
+}
+
+// card (substitute panel of bootstrap3)
+.card {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  font-weight: 700;
+  text-transform: none;
+}
+
+.card-header:first-child {
+}
+
+// Well (substitute Well of bootstrap3)
+.card.well {
+  min-height: 20px;
+  padding: $card-spacer-y $card-spacer-x;
+}
+
+// Dropdowns
+.dropdown-toggle {
+  &.btn.disabled {
+    pointer-events: auto;
+    cursor: not-allowed;
+  }
+
+  // hide caret
+  &.dropdown-toggle-no-caret::after {
+    content: none;
+  }
+}
+
+// Badges
+.badge {
+  @extend .badge-pill;
+}
+
+//Modals
+.modal-open {
+  width: 100%;
+  padding-right: 0 !important;
+}
+
+.modal-content {
+  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);
+}
+
+.modal-header {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.modal-footer {
+  border-top: 1px solid #e5e5e5;
+}
+
+// When fading in the modal, animate it to slide down
+.modal.fade .modal-dialog {
+  @include transition($modal-transition);
+  transform: $modal-fade-transform;
+}
+
+.modal.show .modal-dialog {
+  transform: $modal-show-transform;
+}
+
+// When trying to close, animate focus to scale
+.modal.modal-static .modal-dialog {
+  transform: $modal-scale-transform;
+}
+
+// col-form-label (substitute for control-label of bootstrap3)
+.col-form-label {
+  text-align: right;
+}
+
+// label
+label {
+  // add with-no-font-weight class in case you do not want to apply font-weight 700 to label
+  :not(.with-no-font-weight) {
+    font-weight: 700;
+  }
+}
+
+// disabled button (reproduction from bootstrap3.)
+// see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
+.btn.disabled,
+.btn[disabled],
+fieldset[disabled] .btn {
+  cursor: not-allowed;
+}
+
+// progress bar
+.progress {
+  margin-bottom: 18px;
+  overflow: hidden;
+}
+
+.text-break {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}

packages/app/src/styles/_override-bootstrap-variables.scss → packages/app/src/styles/bootstrap/_variables.scss

@@ -1,10 +1,12 @@
+@use '../variables';
+
 //
 // Variables
 // --------------------------------------------------
 
 //== Colors
 //
-$primary: $growi-blue !default;
+$primary: variables.$growi-blue !default;
 $secondary: #6c757d !default;
 $info: #009fbb !default;
 $success: #00bb83 !default;

packages/app/src/styles/style-next.scss

@@ -1,14 +1,4 @@
-// import variables
-@import 'variables';
-
-@import 'mixins';
-@import 'override-bootstrap-variables';
-
-// vendor
-@import 'vendor';
-
-// override bootstrap
-@import 'override-bootstrap';
+@import './bootstrap/apply';
 
 // // override codemirror
 // @import 'override-codemirror';
@@ -50,7 +40,7 @@
 // @import 'me';
 // @import 'mirror_mode';
 // @import 'modal';
-@import 'navbar';
+// @import 'navbar';
 // @import 'old-ios';
 // @import 'on-edit';
 // @import 'page-duplicate-modal';

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

@@ -1,3 +1,8 @@
+@use '../variables' as var;
+@use '../bootstrap/init' as *;
+@use '../mixins';
+@use './mixins/count-badge';
+
 // determine optional variables
 $color-list: $color-global !default;
 $bgcolor-list: $bgcolor-global !default;
@@ -40,10 +45,11 @@ $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 'reboot-bootstrap-text';
-@import 'reboot-bootstrap-border-colors';
-@import 'reboot-bootstrap-tables';
-@import 'reboot-bootstrap-dropdown';
+@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-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
@@ -131,8 +137,8 @@ ul.pagination {
   // background color
   $color-gradient: #3c465c;
   background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-    linear-gradient(135deg, darken($growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
-    linear-gradient(225deg, darken($growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
+    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%);
 
   .login-header {
@@ -195,11 +201,11 @@ ul.pagination {
       color: rgba(white, 0.7);
 
       .growi {
-        color: darken($growi-green, 5%);
+        color: darken(var.$growi-green, 5%);
       }
 
       .org {
-        color: darken($growi-blue, 5%);
+        color: darken(var.$growi-blue, 5%);
       }
     }
   }
@@ -286,7 +292,7 @@ ul.pagination {
       lighten($bgcolor-sidebar-context, 24%)
     );
     .grw-pagetree-triangle-btn {
-      @include button-outline-svg-icon-variant($secondary, $gray-200);
+      @include mixins.button-outline-svg-icon-variant($secondary, $gray-200);
     }
     .btn-page-item-control {
       @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
@@ -489,7 +495,7 @@ ul.pagination {
 */
 .grw-side-contents-sticky-container {
   .grw-count-badge {
-    @include count-badge($gray-400, $gray-700);
+    @include count-badge.count-badge($gray-400, $gray-700);
   }
 
   .grw-border-vr {

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

@@ -1,3 +1,8 @@
+@use '../variables' as var;
+@use '../bootstrap/init' as *;
+@use '../mixins';
+@use './mixins/count-badge';
+
 // determine optional variables
 $color-list: $color-global !default;
 $bgcolor-list: $bgcolor-global !default;
@@ -35,10 +40,11 @@ $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 'reboot-bootstrap-text';
-@import 'reboot-bootstrap-border-colors';
-@import 'reboot-bootstrap-tables';
-@import 'reboot-bootstrap-dropdown';
+@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-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
@@ -75,7 +81,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   // background color
   $color-gradient: #3e4d6c;
   background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-    linear-gradient(135deg, $growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, $growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
+    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, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
   .login-header {
@@ -137,11 +143,11 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
       color: black;
 
       .growi {
-        color: darken($growi-green, 20%);
+        color: darken(var.$growi-green, 20%);
       }
 
       .org {
-        color: darken($growi-blue, 15%);
+        color: darken(var.$growi-blue, 15%);
       }
     }
   }
@@ -195,7 +201,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
       darken($bgcolor-sidebar-context, 24%)
     );
     .grw-pagetree-triangle-btn {
-      @include button-outline-svg-icon-variant($gray-400, $primary);
+      @include mixins.button-outline-svg-icon-variant($gray-400, $primary);
     }
   }
   .private-legacy-pages-link {
@@ -375,7 +381,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 */
 .grw-side-contents-sticky-container {
   .grw-count-badge {
-    @include count-badge($gray-600, $gray-200);
+    @include count-badge.count-badge($gray-600, $gray-200);
   }
 
   .grw-border-vr {

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

@@ -1,3 +1,8 @@
+@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
+
 //
 //== Apply to Bootstrap
 //
@@ -15,7 +20,7 @@ $bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
 $color-nav-tabs-link-active: $gray-600 !default;
 $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !default;
 $color-btn-reload-in-sidebar: $gray-500;
-$bgcolor-keyword-highlighted: $grw-marker-yellow !default;
+$bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
 $bgcolor-page-list-group-item-active: lighten($primary, 76%) !default;
 $color-page-list-group-item-meta: $gray-500 !default;
 $color-search-page-list-title: $color-global !default;
@@ -33,13 +38,6 @@ $nav-tabs-link-active-color: $color-nav-tabs-link-active;
 $nav-tabs-link-active-bg: $bgcolor-global;
 $nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
 
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins';
-@import '../mixins';
-@import 'mixins/list-group';
-@import 'mixins/page-editor-mode-manager';
-@import 'mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
 @import 'reboot-bootstrap-buttons';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
@@ -67,15 +65,15 @@ pre:not(.hljs):not(.CodeMirror-line) {
 //== 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);
-    }
-  }
-}
+// // 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-personal-dropdown {
@@ -161,11 +159,11 @@ ul.pagination {
   &:hover {
     svg {
       .group1 {
-        fill: $growi-green;
+        fill: var.$growi-green;
       }
 
       .group2 {
-        fill: $growi-blue;
+        fill: var.$growi-blue;
       }
     }
   }
@@ -443,7 +441,7 @@ ul.pagination {
   h6,
   h7 {
     &.blink {
-      @include blink-bgcolor($bgcolor-blinked-section);
+      @include mixins.blink-bgcolor($bgcolor-blinked-section);
     }
   }
 
@@ -558,7 +556,7 @@ body.editing-sidebar {
 }
 
 .grid-preview-col-0 {
-  background: $growi-blue;
+  background: var.$growi-blue;
 }
 
 .grid-preview-col-1 {
@@ -570,7 +568,7 @@ body.editing-sidebar {
 }
 
 .grid-preview-col-3 {
-  background: $growi-green;
+  background: var.$growi-green;
 }
 
 /*

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

@@ -1,3 +1,5 @@
+@use '../bootstrap/init' as *;
+
 //
 // Border
 //

packages/app/src/styles/theme/_reboot-bootstrap-dropdown.scss

@@ -1,3 +1,5 @@
+@use '../bootstrap/init' as *;
+
 .dropdown-menu {
   color: $dropdown-color;
   svg {

packages/app/src/styles/theme/_reboot-bootstrap-tables.scss

@@ -1,3 +1,5 @@
+@use '../bootstrap/init' as *;
+
 //
 //
 // Apply partially

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

@@ -1,3 +1,6 @@
+@use '../bootstrap/init' as *;
+@use '../mixins';
+
 $theme-colors: map-merge($theme-colors, $colors);
 
 @each $color, $value in $theme-colors {
@@ -17,7 +20,7 @@ $theme-colors: map-merge($theme-colors, $colors);
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
     @include button-variant($value, $value);
-    @include button-svg-icon-variant($value, $value);
+    @include mixins.button-svg-icon-variant($value, $value);
     box-shadow: none !important;
   }
 }
@@ -25,7 +28,7 @@ $theme-colors: map-merge($theme-colors, $colors);
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
     @include button-outline-variant($value, $color-hover: $value, $active-background: rgba($value, 0.1), $active-border: $value);
-    @include button-outline-svg-icon-variant($value, $color-hover: $value);
+    @include mixins.button-outline-svg-icon-variant($value, $color-hover: $value);
     &:not(:disabled):not(.disabled):active,
     &:not(:disabled):not(.disabled).active,
     .show > &.dropdown-toggle {
@@ -61,15 +64,15 @@ $theme-colors: map-merge($theme-colors, $colors);
   }
 }
 
-@each $color, $value in $theme-colors {
-  .alert-#{$color} {
-    @include alert-variant(
-      theme-color-level($color, $alert-bg-level),
-      theme-color-level($color, $alert-border-level),
-      theme-color-level($color, $alert-color-level)
-    );
-  }
-}
+// @each $color, $value in $theme-colors {
+//   .alert-#{$color} {
+//     @include alert-variant(
+//       theme-color-level($color, $alert-bg-level),
+//       theme-color-level($color, $alert-border-level),
+//       theme-color-level($color, $alert-color-level)
+//     );
+//   }
+// }
 
 @each $color, $value in $theme-colors {
   .badge-#{$color} {

packages/app/src/styles/theme/default.scss

@@ -1,5 +1,7 @@
-@import '../variables';
-@import '../override-bootstrap-variables';
+@use '../variables' as *;
+@use '../bootstrap/variables' as *;
+@use './mixins/page-editor-mode-manager';
+
 // == Define Bootstrap theme colors
 //
 
@@ -107,7 +109,7 @@ html[light] {
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include btn-page-editor-mode-manager($primary, lighten($primary, 65%), lighten($primary, 70%));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
   }
 }
@@ -204,7 +206,7 @@ html[dark] {
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include btn-page-editor-mode-manager(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
     }
   }
 }

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

@@ -0,0 +1,11 @@
+@use '../../bootstrap/init' as bs;
+
+@mixin count-badge($color, $bg-color, $min-width: initial) {
+  min-width: $min-width;
+  padding: 0.1rem 0.5rem;
+  font-family: bs.$font-family-monospace;
+  font-size: 12px;
+  font-weight: 500;
+  color: $color;
+  background-color: $bg-color;
+}

packages/app/src/styles/theme/mixins/_list-group.scss

@@ -1,3 +1,7 @@
+@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 {
@@ -28,13 +32,13 @@
     border-color: $border-color-global;
 
     .grw-count-badge {
-      @include count-badge($btn-color, $bgcolor-hover, 28px);
+      @include count-badge.count-badge($btn-color, $bgcolor-hover, 28px);
     }
 
     .btn.btn-page-item-control {
       color: $btn-color;
       background-color: transparent;
-      @include hover() {
+      @include bs.hover() {
         color: $btn-color-hover;
         background-color: $btn-bgcolor-hover;
       }