WIP: use @use

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

@@ -0,0 +1,93 @@
+@use '~/styles/variables' as var;
+@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 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/styles/_layout.scss

@@ -1,3 +1,5 @@
+@use 'variables';
+
 body {
   overflow-y: scroll !important;
   overscroll-behavior-y: none;
@@ -15,18 +17,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,7 +29,7 @@ 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) {
     padding-bottom: unset;

packages/app/src/styles/_mixins.scss

@@ -1,16 +1,19 @@
+@use '~bootstrap/scss/variables' as *;
+@use '~bootstrap/scss/mixins' as bsMixins;
+
 @mixin variable-font-size($basesize) {
   font-size: $basesize * 0.6;
 
-  @include media-breakpoint-only(sm) {
+  @include bsMixins.media-breakpoint-only(sm) {
     font-size: #{$basesize * 0.7};
   }
-  @include media-breakpoint-only(md) {
+  @include bsMixins.media-breakpoint-only(md) {
     font-size: #{$basesize * 0.8};
   }
-  @include media-breakpoint-only(lg) {
+  @include bsMixins.media-breakpoint-only(lg) {
     font-size: #{$basesize * 0.9};
   }
-  @include media-breakpoint-up(xl) {
+  @include bsMixins.media-breakpoint-up(xl) {
     font-size: $basesize;
   }
 }

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-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/_override-bootstrap.scss

@@ -1,6 +1,8 @@
+@use 'override-bootstrap-variables' as obv;
+
 // increase specificity with ':root' for GROWI theming
 :root {
-  font-size: $font-size-root;
+  font-size: obv.$font-size-root;
   > body {
     font-family: $font-family-sans-serif;
   }

packages/app/src/styles/_vendor.scss

@@ -14,19 +14,19 @@
 }
 
 // import react-bootstrap-typeahead
-@import '~react-bootstrap-typeahead/css/Typeahead';
+// @import '~react-bootstrap-typeahead/css/Typeahead';
 
 // import CodeMirror styles
-@import '~codemirror/lib/codemirror.css';
-@import '~codemirror/addon/hint/show-hint.css';
-@import '~codemirror/theme/elegant.css';
-@import '~codemirror/theme/eclipse.css';
+// @import '~codemirror/lib/codemirror.css';
+// @import '~codemirror/addon/hint/show-hint.css';
+// @import '~codemirror/theme/elegant.css';
+// @import '~codemirror/theme/eclipse.css';
 
 // import Handsontable styles
-@import '~handsontable/dist/handsontable.full.css';
+// @import '~handsontable/dist/handsontable.full.css';
 
 // import SimpleBar styles
-@import '~simplebar/dist/simplebar.min.css';
+// @import '~simplebar/dist/simplebar.min.css';
 
 // Emoji-mart style
-@import '~emoji-mart/css/emoji-mart.css';
+// @import '~emoji-mart/css/emoji-mart.css';

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

@@ -1,8 +1,4 @@
-// import variables
-@import 'variables';
-
-@import 'mixins';
-@import 'override-bootstrap-variables';
+// @import 'mixins';
 
 // vendor
 @import 'vendor';
@@ -50,7 +46,7 @@
 // @import 'me';
 // @import 'mirror_mode';
 // @import 'modal';
-@import 'navbar';
+// @import 'navbar';
 // @import 'old-ios';
 // @import 'on-edit';
 // @import 'page-duplicate-modal';