Merge branch 'master' into feat/select-unrelated-group-inheritance-on-child-pge-create

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": ["@changesets/changelog-github", { "repo": "weseek/growi" }],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/workflows/release.yml

@@ -103,7 +103,7 @@ jobs:
           type=semver,value=${{ needs.create-github-release.outputs.RELEASED_VERSION }},pattern={{major}}.{{minor}}.{{patch}}
 
 
-  build-image:
+  build-app-image:
     needs: create-github-release
 
     uses: weseek/growi/.github/workflows/reusable-app-build-image.yml@master
@@ -115,8 +115,8 @@ jobs:
       AWS_ROLE_TO_ASSUME_FOR_OIDC: ${{ secrets.AWS_ROLE_TO_ASSUME_FOR_OIDC }}
 
 
-  publish-image:
-    needs: [determine-tags, build-image]
+  publish-app-image:
+    needs: [determine-tags, build-app-image]
 
     uses: weseek/growi/.github/workflows/reusable-app-create-manifests.yml@master
     with:
@@ -129,7 +129,7 @@ jobs:
 
 
   post-publish:
-    needs: [create-github-release, publish-image]
+    needs: [create-github-release, publish-app-image]
     runs-on: ubuntu-latest
 
     steps:
@@ -154,7 +154,7 @@ jobs:
 
 
   create-pr-for-next-rc:
-    needs: [create-github-release, publish-image]
+    needs: [create-github-release, publish-app-image]
     runs-on: ubuntu-latest
 
     steps:

.stylelintrc.json

@@ -1,16 +1,25 @@
 {
   "extends": [
+    "stylelint-config-recommended-scss",
     "stylelint-config-recess-order"
   ],
-  "customSyntax": "postcss-scss",
   "rules": {
-    "indentation": 2,
-    "string-quotes": "single",
+    "no-duplicate-selectors": null,
+    "scss/comment-no-empty": null,
+    "scss/at-extend-no-missing-placeholder": null,
     "rule-empty-line-before": [ "always-multi-line", {
       "except": ["after-single-line-comment", "first-nested"],
       "ignore": ["after-comment", "inside-block"]
     } ],
-    "selector-combinator-space-before": "always",
-    "selector-combinator-space-after": "always"
+    "color-function-notation": "legacy",
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": [
+          "global",
+          "local"
+        ]
+      }
+    ]
   }
 }

CHANGELOG.md

@@ -1,9 +1,38 @@
 # Changelog
 
-## [Unreleased](https://github.com/weseek/growi/compare/v7.0.4...HEAD)
+## [Unreleased](https://github.com/weseek/growi/compare/v7.0.6...HEAD)
 
 *Please do not manually update this file. We've automated the process.*
 
+## [v7.0.6](https://github.com/weseek/growi/compare/v7.0.5...v7.0.6) - 2024-05-20
+
+### 🐛 Bug Fixes
+
+* fix: S3 configurations are considered invalid wrongly (#8823) @yuki-takei
+
+### 🧰 Maintenance
+
+* support: Publish @growi/core-styles package (#8819) @yuki-takei
+
+## [v7.0.5](https://github.com/weseek/growi/compare/v7.0.4...v7.0.5) - 2024-05-20
+
+### 🚀 Improvement
+
+* imprv: Behavior of dropdown toggle for WIP in 'Page Tree' sidebar (#8796) @maeshinshin
+* imprv: Hide the page creation button for users without editing permissions (#8808) @miya
+* imprv: Add config to toggle ACL between public_read and private on PutObject when using S3 with FileUploader (#8778) @ToshihitoKon
+
+### 🐛 Bug Fixes
+
+* fix: BookmarkItem occures an error when the related page has been deleted 2 (#8818) @yuki-takei
+* fix: BookmarkItem occures an error when the related page has been deleted (#8817) @yuki-takei
+* fix: Display share page date (#8809) @TatsuyaIse
+* fix: Admin layout (#8806) @satof3
+
+### 🧰 Maintenance
+
+* support: Modify env var for S3 Object-ACL (#8805) @yuki-takei
+
 ## [v7.0.4](https://github.com/weseek/growi/compare/v7.0.3...v7.0.4) - 2024-05-13
 
 ### 💎 Features

apps/app/.stylelintrc.json

@@ -1,20 +1,6 @@
 {
-  "extends": [
-    "stylelint-config-recess-order"
-  ],
-  "customSyntax": "postcss-scss",
+  "extends": "../../.stylelintrc.json",
   "ignoreFiles": [
-    "src/styles/prebuilt/*.css",
-    "src/linter-checker/test.scss"
-  ],
-  "rules": {
-    "indentation": 2,
-    "string-quotes": "single",
-    "rule-empty-line-before": [ "always-multi-line", {
-      "except": ["after-single-line-comment", "first-nested"],
-      "ignore": ["after-comment", "inside-block"]
-    } ],
-    "selector-combinator-space-before": "always",
-    "selector-combinator-space-after": "always"
-  }
+    "src/styles/prebuilt/*.css"
+  ]
 }

apps/app/_obsolete/src/styles/theme/apply-colors.scss

@@ -1,710 +0,0 @@
-@use '@growi/core/scss/bootstrap/init' as *;
-
-@use '../variables' as var;
-@use '../mixins';
-@use '../atoms/mixins/code';
-@use './mixins/hsl-button';
-@use './hsl-functions' as hsl;
-
-@import 'apply-colors-dark';
-@import 'apply-colors-light';
-
-//
-//== Apply to Bootstrap
-//
-
-// determine optional variables
-$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} #{$bordercolor-nav-tabs});
-$border-nav-tabs-link-active: var(--border-nav-tabs-link-active, #{$gray-600});
-$bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs-active,$bordercolor-nav-tabs $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: $bordercolor-nav-tabs;
-$nav-tabs-link-hover-border-color: $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: $bordercolor-nav-tabs-active;
-$theme-colors: map-merge($theme-colors, ( primary: $primary ));
-
-// TODO: activate (https://redmine.weseek.co.jp/issues/128307)
-// @import 'reboot-bootstrap-buttons';
-// @import 'reboot-bootstrap-colors';
-// @import 'reboot-bootstrap-theme-colors';
-// @import 'hsl-reboot-bootstrap-theme-colors';
-// @import 'reboot-bootstrap-nav';
-// @import 'reboot-toastr-colors';
-
-// 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($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
-}
-
-.code-highlighted {
-  border-color: $bordercolor-inline-code;
-}
-
-//
-//== Apply to Bootstrap Elements
-//
-
-// TODO: activate (https://redmine.weseek.co.jp/issues/128307)
-// theme-color-level() dropped in bootstrap v5
-// 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);
-  }
-}
-
-// TODO: activate (https://redmine.weseek.co.jp/issues/128307)
-// form-control-focus() dropped in bootstrap v5
-// 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) !important;
-      &:hover,
-      &:active,
-      &:focus {
-        color: var(--primary);
-      }
-    }
-  }
-}
-
-//
-//== Apply to Handsontable
-//
-.handsontable {
-  color: initial;
-}
-
-//
-//== Apply to GROWI Elements
-//
-
-.grw-logo {
-  // set transition for fill
-  svg, 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) !important;
-  border-image-slice: 1 !important;
-
-  .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: hsl.alpha(var(--bgcolor-global),10%);
-  }
-  input.form-control {
-    border: none;
-  }
-}
-
-.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-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: $text-shadow-sidebar-nav-item-active;
-      }
-      // fukidashi
-      &:after {
-        border-right-color: var(--bgcolor-sidebar-context) !important;
-      }
-    }
-  }
-
-  .grw-sidebar-content-header {
-    .grw-btn-reload {
-      color: $color-btn-reload-in-sidebar;
-    }
-
-    .grw-recent-changes-resize-button {
-      .form-check-label::before {
-        background-color: var(--primary);
-      }
-
-      .form-check-label::after {
-        background-color: var(--bgcolor-global);
-      }
-
-      .form-check-input:not(:checked) + .form-check-label::before {
-        color: var(--bgcolor-global);
-      }
-
-      .form-check-input:checked + .form-check-label::before {
-        color: var(--bgcolor-global);
-        background-color: var(--primary);
-        border-color: var(--primary);
-      }
-      .form-check-input:checked + .form-check-label::after {
-        color: var(--bgcolor-global);
-      }
-    }
-  }
-
-  .grw-pagetree, .grw-foldertree {
-    .list-group-item {
-      .grw-pagetree-title-anchor, .grw-foldertree-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 !important;
-
-        .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: $color-modal-header;
-    }
-    .btn-close {
-      color: $color-modal-header;
-      opacity: 0.5;
-
-      &:hover {
-        opacity: 0.9;
-      }
-    }
-  }
-
-  .modal-content {
-    background-color: var(--bgcolor-global);
-  }
-
-  .modal-footer {
-    border-top-color: var(--border-color-theme);
-  }
-}
-
-.grw-page-accessories-modal,.grw-descendants-page-list-modal {
-  .modal-header {
-    .btn-close {
-      color: #{hsl.contrast(var(--bgcolor-global))};
-    }
-  }
-}
-
-.grw-custom-nav-tab {
-  .nav-item {
-    &:hover,
-    &:focus {
-      background-color: hsl.alpha(var(--color-link),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) !important;
-  }
-}
-
-/*
- * cards
- */
-.card.custom-card {
-  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);
-}
-
-/*
- * 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%, $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 {
-      background-color: var(--bgcolor-global) !important;
-      a {
-        svg {
-          fill: var(--color-global);
-        }
-
-        &:hover {
-          svg {
-            fill: var(--color-global);
-          }
-        }
-      }
-
-      .page-list-meta {
-        color: $color-page-list-group-item-meta;
-        svg {
-          fill: $color-page-list-group-item-meta;
-        }
-      }
-
-      &.list-group-item-action {
-        background-color: var(--bgcolor-list);
-        &.active {
-          border-left-color: var(--primary);
-        }
-      }
-    }
-  }
-}
-
-/*
- * GROWI Editor
- */
-.layout-root.editing {
-  background-color: hsl.darken(var(--bgcolor-global),2%);
-
-  &.builtin-editor {
-    .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
- */
-.page-editor-preview-body.preview-sidebar {
-  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 form
- */
-.page-comments-row {
-  background: var(--bgcolor-subnav);
-  .page-comment .page-comment-main,
-  .page-comment-form .comment-form-main {
-    background-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%, $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);
-}
-
-/*
-  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;
-}
-
-/*
-Expand / compress button bookmark list on users page
-*/
-.grw-user-page-list-m {
-  .grw-expand-compress-btn {
-    color: $body-color;
-    background-color: $body-bg;
-    &.active {
-      background-color: hsl.darken($body-bg, 12%),
-    }
-  }
-}
-
-/*
- * Questionnaire modal
- */
-.grw-questionnaire-btn-group {
-  .btn-outline-primary {
-    @include hsl-button.button-outline-variant(
-      #{hsl.lighten(var(--primary), 30%)} !important,
-      #{hsl.contrast(var(--primary))} !important,
-      var(--primary) !important,
-      #{hsl.lighten(var(--primary), 30%)} !important,
-    );
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active {
-      color: #{hsl.contrast(var(--primary))} !important;
-      background-color: var(--primary) !important;
-    }
-  }
-}
-
-/*
- * revision-history-diff
- */
-.revision-history-diff {
-  background-color: white;
-}

apps/app/docker/README.md

@@ -10,7 +10,7 @@ GROWI Official docker image
 Supported tags and respective Dockerfile links
 ------------------------------------------------
 
-* [`7.0.4`, `7.0`, `7`, `latest` (Dockerfile)](https://github.com/weseek/growi/blob/v7.0.4/apps/app/docker/Dockerfile)
+* [`7.0.6`, `7.0`, `7`, `latest` (Dockerfile)](https://github.com/weseek/growi/blob/v7.0.6/apps/app/docker/Dockerfile)
 * [`6.3.2`, `6.3`, `6` (Dockerfile)](https://github.com/weseek/growi/blob/v6.3.2/apps/app/docker/Dockerfile)
 * [`6.2.4`, `6.2` (Dockerfile)](https://github.com/weseek/growi/blob/v6.2.4/apps/app/docker/Dockerfile)
 * [`6.1.15`, `6.1` (Dockerfile)](https://github.com/weseek/growi/blob/v6.1.15/apps/app/docker/Dockerfile)

apps/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growi/app",
-  "version": "7.0.5-RC.0",
+  "version": "7.0.7-RC.0",
   "license": "MIT",
   "scripts": {
     "//// for production": "",
@@ -29,7 +29,7 @@
     "dev:ci": "yarn cross-env NODE_ENV=development yarn ts-node src/server/app.ts --ci",
     "lint:typecheck": "npx -y tsc",
     "lint:eslint": "yarn eslint --quiet \"**/*.{js,jsx,ts,tsx}\"",
-    "lint:styles": "stylelint src/**/*.scss",
+    "lint:styles": "stylelint \"src/**/*.scss\"",
     "lint:swagger2openapi": "node node_modules/.bin/oas-validate tmp/swagger.json",
     "lint": "run-p lint:*",
     "prelint:swagger2openapi": "yarn openapi:v3",
@@ -71,7 +71,6 @@
     "@godaddy/terminus": "^4.9.0",
     "@google-cloud/storage": "^5.8.5",
     "@growi/core": "link:../../packages/core",
-    "@growi/custom-icons": "link:../../packages/custom-icons",
     "@growi/pluginkit": "link:../../packages/pluginkit",
     "@growi/preset-templates": "link:../../packages/preset-templates",
     "@growi/preset-themes": "link:../../packages/preset-themes",
@@ -179,7 +178,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^9.1.3",
     "react-use-ripple": "^1.5.2",
-    "reactstrap": "^9.2.0",
+    "reactstrap": "^9.2.2",
     "reconnecting-websocket": "^4.4.0",
     "redis": "^3.0.2",
     "rehype-katex": "^6.0.2",
@@ -195,7 +194,7 @@
     "remark-toc": "^8.0.1",
     "remark-wiki-link": "^1.0.4",
     "sanitize-filename": "^1.6.3",
-    "socket.io": "^4.7.2",
+    "socket.io": "^4.7.5",
     "stream-to-promise": "^3.0.0",
     "string-width": "=4.2.2",
     "superjson": "^1.9.1",
@@ -211,20 +210,24 @@
     "validator": "^13.7.0",
     "ws": "^8.3.0",
     "xss": "^1.0.14",
-    "y-mongodb-provider": "^0.1.7",
-    "y-socket.io": "^1.1.0",
-    "yjs": "^13.6.12"
+    "y-mongodb-provider": "^0.1.10",
+    "y-socket.io": "^1.1.3",
+    "yjs": "^13.6.15"
   },
   "// comments for defDependencies": {
+    "bootstrap": "v5.3.3 has a bug. refs: https://github.com/twbs/bootstrap/issues/39798",
     "@handsontable/react": "v3 requires handsontable >= 7.0.0.",
     "handsontable": "v7.0.0 or above is no loger MIT lisence."
   },
   "devDependencies": {
+    "@growi/core-styles": "link:../../packages/core-styles",
+    "@growi/custom-icons": "link:../../packages/custom-icons",
     "@growi/editor": "link:../../packages/editor",
     "@growi/presentation": "link:../../packages/presentation",
     "@growi/ui": "link:../../packages/ui",
     "@handsontable/react": "=2.1.0",
     "@next/bundle-analyzer": "^14.1.3",
+    "@popperjs/core": "^2.11.8",
     "@swc-node/jest": "^1.6.2",
     "@swc/jest": "^0.2.24",
     "@testing-library/react": "^14.1.2",
@@ -239,9 +242,8 @@
     "@types/url-join": "^4.0.2",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^0.34.6",
-    "autoprefixer": "^9.0.0",
     "babel-loader": "^8.2.5",
-    "bootstrap": "^5.3.1",
+    "bootstrap": "=5.3.2",
     "connect-browser-sync": "^2.1.0",
     "cypress-real-events": "^1.12.0",
     "diff2html": "^3.4.47",
@@ -278,7 +280,7 @@
     "sass": "^1.53.0",
     "simple-load-script": "^1.0.2",
     "simplebar-react": "^2.3.6",
-    "socket.io-client": "^4.2.0",
+    "socket.io-client": "^4.7.5",
     "source-map-loader": "^4.0.1",
     "swagger2openapi": "^7.0.8",
     "tsc-alias": "^1.2.9"

apps/app/src/components/Admin/App/MaskedInput.module.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 .MaskedInput {
   position: relative;
   display: flex;
@@ -5,7 +7,7 @@
 
 .PasswordReveal {
   position: absolute;
-  top: 0rem;
+  top: 0;
   right: 0.5rem;
   left: auto;
   font-size: 1.4rem;

apps/app/src/components/Admin/Customize/CustomizeThemeOptions.tsx

@@ -30,7 +30,7 @@ const CustomizeThemeOptions = (props: Props): JSX.Element => {
       {/* Light and Dark Themes */}
       <div>
         <h3 className="mb-3">{t('customize_settings.theme_desc.light_and_dark')}</h3>
-        <div className="hstack gap-3">
+        <div className="hstack gap-3 flex-wrap">
           {lightNDarkThemes.map((theme) => {
             return (
               <ThemeColorBox
@@ -47,7 +47,7 @@ const CustomizeThemeOptions = (props: Props): JSX.Element => {
       {/* Only one mode Theme */}
       <div className="mt-3">
         <h3 className="mb-3">{t('customize_settings.theme_desc.unique')}</h3>
-        <div className="hstack gap-3">
+        <div className="hstack gap-3 align-items-start flex-wrap">
           {oneModeThemes.map((theme) => {
             return (
               <ThemeColorBox

apps/app/src/components/Admin/Customize/ThemeColorBox.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 // layout
 .theme-option-container :global {

apps/app/src/components/Admin/UserManagement.module.scss

@@ -1,9 +1,10 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 // styles for admin user search
 .search-typeahead :global {
   position: relative;
   width: 100%;
+
   // corner radius
   border-top-right-radius: bs.$border-radius;
   border-bottom-right-radius: bs.$border-radius;

apps/app/src/components/AuthorInfo/AuthorInfo.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 $author-font-size: 12px;
 $date-font-size: 11px;

apps/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -67,7 +67,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
     if (isOpen && bookmarkFolders != null) {
       bookmarkFolders.forEach((bookmarkFolder) => {
         bookmarkFolder.bookmarks.forEach((bookmark) => {
-          if (bookmark.page._id === pageId) {
+          if (bookmark.page?._id === pageId) {
             setSelectedItem(bookmarkFolder._id);
           }
         });

apps/app/src/components/Bookmarks/BookmarkFolderTree.tsx

@@ -121,9 +121,8 @@ export const BookmarkFolderTree: React.FC<Props> = (props: Props) => {
           );
         })}
         {userBookmarks?.map(userBookmark => (
-          <div key={userBookmark._id} className="grw-foldertree-item-container grw-root-bookmarks">
+          <div key={userBookmark?._id} className="grw-foldertree-item-container grw-root-bookmarks">
             <BookmarkItem
-              key={userBookmark._id}
               isReadOnlyUser={!!isReadOnlyUser}
               isOperable={props.isOperable}
               bookmarkedPage={userBookmark}

apps/app/src/components/Bookmarks/BookmarkItem.tsx

@@ -28,7 +28,7 @@ import { DragAndDropWrapper } from './DragAndDropWrapper';
 type Props = {
   isReadOnlyUser: boolean
   isOperable: boolean,
-  bookmarkedPage: IPageHasId,
+  bookmarkedPage: IPageHasId | null,
   level: number,
   parentFolder: BookmarkFolderItems | null,
   canMoveToRoot: boolean,
@@ -50,17 +50,17 @@ export const BookmarkItem = (props: Props): JSX.Element => {
   const { open: openPutBackPageModal } = usePutBackPageModal();
   const [isRenameInputShown, setRenameInputShown] = useState(false);
 
-  const { data: pageInfo, mutate: mutatePageInfo } = useSWRxPageInfo(bookmarkedPage._id);
+  const { data: pageInfo, mutate: mutatePageInfo } = useSWRxPageInfo(bookmarkedPage?._id);
   const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
-  const dPagePath = new DevidedPagePath(bookmarkedPage.path, false, true);
-  const { latter: pageTitle, former: formerPagePath } = dPagePath;
-  const bookmarkItemId = `bookmark-item-${bookmarkedPage._id}`;
+
   const paddingLeft = BASE_BOOKMARK_PADDING + (BASE_FOLDER_PADDING * (level));
   const dragItem: Partial<DragItemDataType> = {
     ...bookmarkedPage, parentFolder,
   };
 
   const onClickMoveToRootHandler = useCallback(async() => {
+    if (bookmarkedPage == null) return;
+
     try {
       await addBookmarkToFolder(bookmarkedPage._id, null);
       bookmarkFolderTreeMutation();
@@ -68,7 +68,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
     catch (err) {
       toastError(err);
     }
-  }, [bookmarkFolderTreeMutation, bookmarkedPage._id]);
+  }, [bookmarkFolderTreeMutation, bookmarkedPage]);
 
   const bookmarkMenuItemClickHandler = useCallback(async(pageId: string, shouldBookmark: boolean) => {
     if (shouldBookmark) {
@@ -90,6 +90,9 @@ export const BookmarkItem = (props: Props): JSX.Element => {
   }, []);
 
   const rename = useCallback(async(inputText: string) => {
+    if (bookmarkedPage == null) return;
+
+
     if (inputText.trim() === '') {
       return cancel();
     }
@@ -111,9 +114,11 @@ export const BookmarkItem = (props: Props): JSX.Element => {
       setRenameInputShown(true);
       toastError(err);
     }
-  }, [bookmarkedPage.path, bookmarkedPage._id, bookmarkedPage.revision, cancel, bookmarkFolderTreeMutation, mutatePageInfo]);
+  }, [bookmarkedPage, cancel, bookmarkFolderTreeMutation, mutatePageInfo]);
 
   const deleteMenuItemClickHandler = useCallback(async(_pageId: string, pageInfo: IPageInfoAll | undefined): Promise<void> => {
+    if (bookmarkedPage == null) return;
+
     if (bookmarkedPage._id == null || bookmarkedPage.path == null) {
       throw Error('_id and path must not be null.');
     }
@@ -128,9 +133,11 @@ export const BookmarkItem = (props: Props): JSX.Element => {
     };
 
     onClickDeleteMenuItemHandler(pageToDelete);
-  }, [bookmarkedPage._id, bookmarkedPage.path, bookmarkedPage.revision, onClickDeleteMenuItemHandler]);
+  }, [bookmarkedPage, onClickDeleteMenuItemHandler]);
 
   const putBackClickHandler = useCallback(() => {
+    if (bookmarkedPage == null) return;
+
     const { _id: pageId, path } = bookmarkedPage;
     const putBackedHandler = async() => {
       try {
@@ -148,6 +155,15 @@ export const BookmarkItem = (props: Props): JSX.Element => {
     openPutBackPageModal({ pageId, path }, { onPutBacked: putBackedHandler });
   }, [bookmarkedPage, openPutBackPageModal, bookmarkFolderTreeMutation, router, mutateCurrentPage, t]);
 
+  if (bookmarkedPage == null) {
+    return <></>;
+  }
+
+  const dPagePath = new DevidedPagePath(bookmarkedPage.path, false, true);
+  const { latter: pageTitle, former: formerPagePath } = dPagePath;
+
+  const bookmarkItemId = `bookmark-item-${bookmarkedPage._id}`;
+
   return (
     <DragAndDropWrapper
       item={dragItem}

apps/app/src/components/Common/CopyDropdown/CopyDropdown.module.scss

@@ -1,5 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
 
 .grw-copy-dropdown :global {

apps/app/src/components/Common/DrawerToggler/DrawerToggler.module.scss

@@ -1,5 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '~/styles/variables' as var;
 
 
@@ -7,7 +6,6 @@
   .btn {
     --bs-btn-color: rgba(var(--bs-tertiary-color-rgb), 0.5);
     --bs-btn-bg: transparent;
-
     --bs-btn-hover-color: rgba(var(--bs-tertiary-color-rgb), 0.7);
 
     width: var.$grw-sidebar-nav-width;

apps/app/src/components/Common/PagePathHierarchicalLink/CollapsedParentsDropdown.module.scss

@@ -1,5 +1,5 @@
 
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .collapsed-parents-dropdown-menu {
   --bs-dropdown-zindex: #{bs.$zindex-fixed};

apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss

@@ -1,5 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
 
 .grw-mx-02em {

apps/app/src/components/Common/PageViewLayout.module.scss

@@ -1,5 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '~/styles/mixins';
 @use '~/styles/variables' as var;
 
@@ -9,6 +8,7 @@ $page-view-layout-margin-top: 32px;
 
 .page-view-layout :global {
   $page-content-footer-min-heigh: 130px;
+
   min-height: calc(100vh - #{$subnavigation-height + $page-view-layout-margin-top + $page-content-footer-min-heigh});
 }
 
@@ -42,6 +42,7 @@ $page-view-layout-margin-top: 32px;
     position: sticky;
 
     $page-path-nav-height: 99px;
+
     top: calc($subnavigation-height + $page-view-layout-margin-top + $page-path-nav-height + 4px);
   }
 }

apps/app/src/components/CustomNavigation/CustomNav.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .grw-custom-nav-tab :global {
   .nav-title {
@@ -10,7 +10,7 @@
   }
 
   .grw-nav-slide-hr {
-    border-top: 0rem;
+    border-top: 0;
     border-bottom: 3px solid;
     transition: 0.3s ease-in-out;
   }

apps/app/src/components/DescendantsPageListModal.module.scss

@@ -1,7 +1,7 @@
 .grw-descendants-page-list-modal :global {
   .modal-header {
     button.btn-close {
-      margin: auto 0rem auto auto;
+      margin: auto 0 auto auto;
     }
   }
 
@@ -13,6 +13,6 @@
     max-height: calc(100vh - 100px);
   }
   ul.pagination {
-    margin-bottom: 0rem;
+    margin-bottom: 0;
   }
 }

apps/app/src/components/Icons/GrowiLogo.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/growi-official-colors';
+@use '@growi/core-styles/scss/variables/growi-official-colors';
 
 // == Colors
 .grw-logo :global {

apps/app/src/components/ItemsTree/ItemsTree.module.scss

@@ -0,0 +1,4 @@
+/* stylelint-disable-next-line block-no-empty */
+.items-tree :global {
+
+}

apps/app/src/components/ItemsTree/ItemsTreeContentSkeleton.module.scss

@@ -2,10 +2,12 @@
 
 .text-skeleton-level1 {
   @include mixins.grw-skeleton-text($font-size:16px, $line-height: 40px);
+
   padding-left: 12px;
 }
 
 .text-skeleton-level2 {
   @extend .text-skeleton-level1;
+
   padding-left: 12px + 10px * 2;
 }

apps/app/src/components/Layout/Admin.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as *;
+@use '@growi/core-styles/scss/bootstrap/init' as *;
 @use '~/styles/mixins';
 
 $slack-work-space-name-card-background: #fff5ff;
@@ -114,6 +114,7 @@ $slack-work-space-name-card-border: #efc1f6;
       border-width: 2px;
     }
   }
+
   // TODO: change to utility class on Bootstrap 5
   .slack-connection-log {
     .slack-connection-log-title {
@@ -173,6 +174,7 @@ $slack-work-space-name-card-border: #efc1f6;
       &.with-proxy {
         .hr-container {
           margin-top: 40px;
+
           @include media-breakpoint-up(lg) {
             margin-top: 65px;
           }
@@ -189,7 +191,7 @@ $slack-work-space-name-card-border: #efc1f6;
   //// TODO: migrate to Bootstrap 4
   //// omit all .btn-toggle and use Switches
   //// https://getbootstrap.com/docs/4.2/components/forms/#switches
-  //
+
   // Toggle Twitter Bootstrap button class when active
   // https://jsfiddle.net/ms040m01/3/
   // @mixin active-color($color, $bg-color, $border-color) {

apps/app/src/components/Layout/BasicLayout.module.scss

@@ -0,0 +1,28 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use '~/styles/mixins';
+
+
+// for react-toastify
+.grw-basic-layout :global {
+  .Toastify .Toastify__toast-container {
+    top: 2.5em;
+
+    @include bs.media-breakpoint-down(md) {
+      top: 6.5em;
+    }
+  }
+}
+
+.grw-basic-layout {
+  @include mixins.with-editing() {
+    .Toastify .Toastify__toast-container {
+      top: 5em;
+
+      @include bs.media-breakpoint-down(md) {
+        top: 7em;
+      }
+    }
+  }
+}
+
+

apps/app/src/components/Layout/BasicLayout.tsx

@@ -9,6 +9,12 @@ import { Sidebar } from '../Sidebar';
 
 import { RawLayout } from './RawLayout';
 
+
+import styles from './BasicLayout.module.scss';
+
+const moduleClass = styles['grw-basic-layout'] ?? '';
+
+
 const AlertSiteUrlUndefined = dynamic(() => import('../AlertSiteUrlUndefined').then(mod => mod.AlertSiteUrlUndefined), { ssr: false });
 const DeleteAttachmentModal = dynamic(() => import('../PageAttachment/DeleteAttachmentModal').then(mod => mod.DeleteAttachmentModal), { ssr: false });
 const HotkeysManager = dynamic(() => import('../Hotkeys/HotkeysManager'), { ssr: false });
@@ -35,7 +41,7 @@ type Props = {
 
 export const BasicLayout = ({ children, className }: Props): JSX.Element => {
   return (
-    <RawLayout className={`${className ?? ''}`}>
+    <RawLayout className={`${moduleClass} ${className ?? ''}`}>
       <DndProvider backend={HTML5Backend}>
 
         <div className="page-wrapper flex-row">

apps/app/src/components/Layout/NoLoginLayout.module.scss

@@ -1,10 +1,17 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-@use '@growi/core/scss/growi-official-colors' as var;
+/* stylelint-disable scss/no-global-function-names */
+
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/variables/growi-official-colors' as var;
 
 
 .nologin :global {
   height: 100vh;
 
+  .nologin-header,
+  .nologin-dialog {
+    max-width: 480px;
+  }
+
   // layout
   .main {
     width: 100vw;
@@ -54,11 +61,6 @@
     }
   }
 
-  .nologin-header,
-  .nologin-dialog {
-    max-width: 480px;
-  }
-
 }
 
 .link-switch {
@@ -80,9 +82,10 @@
   .nologin :global {
     // background color
     $color-gradient: #3c465c;
-    background: linear-gradient(45deg, darken($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, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+
+    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340deg, 100%, 55%, 0%) 70%),
+      linear-gradient(135deg, var.$growi-green 10%, hsla(225deg, 95%, 50%, 0%) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140deg, 90%, 50%, 0%) 80%),
+      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35deg, 95%, 55%, 0%) 70%);
 
     .nologin-header {
       background-color: rgba(white, 0.3);
@@ -134,9 +137,10 @@
   .nologin :global {
     // background color
     $color-gradient: #3c465c;
-    background: linear-gradient(45deg, darken($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, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+
+    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340deg, 100%, 55%, 0%) 70%),
+      linear-gradient(135deg, var.$growi-green 10%, hsla(225deg, 95%, 50%, 0%) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140deg, 90%, 50%, 0%) 80%),
+      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35deg, 95%, 55%, 0%) 70%);
 
     .nologin-header {
       background-color: rgba(black, 0.3);

apps/app/src/components/Layout/SearchResultLayout.module.scss

@@ -1,5 +1,5 @@
 @use '~/styles/variables' as var;
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .on-search :global {
   .page-wrapper {

apps/app/src/components/LoginForm/LoginForm.module.scss

@@ -1,5 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '~/styles/atoms/placeholders/buttons';
 
 .login-form :global {
@@ -24,8 +23,8 @@
   }
 
   .text-line {
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       flex-grow: 1;
       height: 1px;
       margin:0 1em;

apps/app/src/components/Me/ColorModeSettings.tsx

@@ -4,8 +4,6 @@ import { useTranslation } from 'react-i18next';
 
 import { Themes, useNextThemes } from '~/stores/use-next-themes';
 
-// import styles from './ColorModeSettings.module.scss';
-
 
 type ColorModeSettingsButtonProps = {
   isActive: boolean,

apps/app/src/components/Me/UISettings.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .grw-sidebar-mode-icon {
   display: flex;

apps/app/src/components/Navbar/GrowiContextualSubNavigation.module.scss

@@ -1,5 +1,5 @@
 @use '~/styles/mixins';
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .grw-contextual-sub-navigation {
   @include bs.media-breakpoint-down(md) {
@@ -9,7 +9,7 @@
   }
 }
 
-@include mixins.editing() {
+@include mixins.at-editing() {
   .grw-contextual-sub-navigation {
     position: fixed;
     right: 0;

apps/app/src/components/Navbar/GrowiNavbarBottom.module.scss

@@ -4,6 +4,7 @@
 .grw-navbar-bottom :global {
   // apply transition
   transition-property: bottom;
+
   @include mixins.apply-navigation-transition();
 
   .navbar {

apps/app/src/components/Navbar/PageEditorModeManager.module.scss

@@ -1,5 +1,5 @@
 // @mixin page-editor-mode-manager($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '~/styles/mixins';
 
 .grw-page-editor-mode-manager :global {
@@ -20,6 +20,7 @@
 .grw-page-editor-mode-manager-skeleton :global {
   width: 90px;
   height: 38px;
+
   @include bs.media-breakpoint-up(md) {
     width: 179px;
     height: 30px;
@@ -47,6 +48,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-page-editor-mode-manager :global {
     .btn {

apps/app/src/components/PageAccessoriesModal/PageAccessoriesModal.module.scss

@@ -1,7 +1,7 @@
 .grw-page-accessories-modal :global {
   .modal-header {
     button.btn-close {
-      margin: auto 0rem auto auto;
+      margin: auto 0 auto auto;
     }
   }
 
@@ -13,6 +13,6 @@
     max-height: calc(100vh - 100px);
   }
   ul.pagination {
-    margin-bottom: 0rem;
+    margin-bottom: 0;
   }
 }

apps/app/src/components/PageComment.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .page-comment-styles :global {
   .page-comments {

apps/app/src/components/PageComment/Comment.module.scss

@@ -1,14 +1,12 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '../../styles/variables' as var;
-@use './_comment-inheritance';
+@use './comment-inheritance';
 
 .comment-styles :global {
 
   .page-comment {
     position: relative;
     pointer-events: none;
-
     scroll-margin-top: var.$grw-scroll-margin-top-in-view;
 
     // background
@@ -49,8 +47,9 @@
     }
 
     // older comments
-    &.page-comment-older {
-    }
+    // &.page-comment-older {
+    // }
+
     // newer comments
     &.page-comment-newer {
       opacity: 0.7;
@@ -71,7 +70,6 @@
     .page-comment-meta {
       display: flex;
       justify-content: flex-end;
-
       font-size: 0.9em;
       color: bs.$gray-400;
     }
@@ -84,6 +82,7 @@
     height: 66px;
     padding: 1em;
     margin-left: 4.5em;
+
     @include bs.media-breakpoint-down(xs) {
       margin-left: 3.5em;
     }

apps/app/src/components/PageComment/CommentEditor.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use './comment-inheritance';
 @use '../PageEditor/page-editor-inheritance';
 
@@ -31,8 +31,7 @@
     min-height: comment-inheritance.$codemirror-default-height !important;
   }
   .comment-preview-container {
-    min-height: page-editor-inheritance.$navbar-editor-height
-      + comment-inheritance.$codemirror-default-height;
+    min-height: page-editor-inheritance.$navbar-editor-height + comment-inheritance.$codemirror-default-height;
     padding-top: 0.5em;
   }
 }

apps/app/src/components/PageComment/CommentPreview.module.scss

@@ -1,2 +1,3 @@
+/* stylelint-disable-next-line block-no-empty */
 .grw-comment-preview {
 }

apps/app/src/components/PageComment/DeleteCommentModal.module.scss

@@ -3,6 +3,7 @@
   .modal-content .modal-body {
     .comment-body {
       max-height: 13em;
+
       // scrollable
       overflow-y: auto;
     }

apps/app/src/components/PageComment/SwitchingButtonGroup.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 
 .btn-group-switching :global {
@@ -31,6 +31,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .btn-group-switching :global {
     .btn {

apps/app/src/components/PageComment/_comment-inheritance.scss

@@ -1,11 +1,11 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 %comment-section {
   position: relative;
   padding: 1em;
 
   // speech balloon
-  &:before {
+  &::before {
     position: absolute;
     top: 1.5em;
     left: -1em;
@@ -32,8 +32,8 @@ $codemirror-default-height: 300px;
 @include bs.color-mode(light) {
   %bg-comment {
     background-color: rgba( bs.$gray-200, 0.5 );
-    border: 1px solid bs.$gray-200;
     backdrop-filter: blur(10px);
+    border: 1px solid bs.$gray-200;
   }
 }
 
@@ -41,7 +41,7 @@ $codemirror-default-height: 300px;
 @include bs.color-mode(dark) {
   %bg-comment {
     background-color: rgba( bs.$gray-800, 0.3 );
-    border: 1px solid bs.$gray-700;
     backdrop-filter: blur(10px);
+    border: 1px solid bs.$gray-700;
   }
 }

apps/app/src/components/PageContentFooter.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .page-content-footer :global {
   border-top: solid 1px transparent;
@@ -6,6 +6,7 @@
     font-size: 0.95em;
   }
 }
+
 // TODO: Should Soft Coding see: https://github.com/weseek/growi/pull/6404
 .page-content-footer-skeleton :global {
   width: 300px;

apps/app/src/components/PageControls/BookmarkButtons.module.scss

@@ -1,7 +1,5 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-group-bookmark :global {
@@ -13,12 +11,14 @@
   }
   .total-counts {
     @extend %btn-total-counts-basis;
+
     padding-left: 5px;
   }
 }
 
 // == Colors
 .btn-group-bookmark :global {
+  /* stylelint-disable-next-line no-descending-specificity */
   .btn-bookmark {
     @include btn-muted.colorize(bs.$orange);
   }

apps/app/src/components/PageControls/LikeButtons.module.scss

@@ -1,7 +1,5 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-group-like :global {
@@ -13,6 +11,7 @@
   }
   .total-counts {
     @extend %btn-total-counts-basis;
+
     padding-left: 5px;
   }
 }

apps/app/src/components/PageControls/PageControls.module.scss

@@ -1,7 +1,5 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 // PageItemControl styles

apps/app/src/components/PageControls/SearchButton.module.scss

@@ -1,7 +1,5 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-search :global {

apps/app/src/components/PageControls/SeenUserInfo.module.scss

@@ -1,7 +1,5 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .grw-seen-user-info :global {

apps/app/src/components/PageControls/SubscribeButton.module.scss

@@ -1,7 +1,5 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-subscribe :global {

apps/app/src/components/PageControls/_button-styles.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 %btn-basis {
   --bs-btn-padding-x: 6px;

apps/app/src/components/PageCreateModal.module.scss

@@ -2,9 +2,6 @@
   .page-today-input1 {
     width: 60px;
   }
-  .page-today-input2 {
-  }
-
   .grw-btn-create-page {
     min-width: 90px;
   }

apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss

@@ -1,7 +1,8 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .editor-navbar :global {
   min-height: 72px;
+
   @include bs.media-breakpoint-down(sm) {
     min-height: 96px;
   }

apps/app/src/components/PageEditor/EditorNavbarBottom.module.scss

@@ -1,8 +1,8 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '~/styles/variables' as var;
 @use '~/styles/mixins';
 
-@include mixins.editing() {
+@include mixins.at-editing() {
   .grw-editor-navbar-bottom :global {
     .grw-grant-selector {
       max-width: 250px;

apps/app/src/components/PageEditor/GridEditModal.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .grw-grid-edit-modal :global {
   .desktop-preview,
@@ -6,13 +6,13 @@
   .mobile-preview {
     .row {
       height: 140px;
-      margin: 0px;
+      margin: 0;
     }
   }
   .desktop-preview {
     .row {
       div {
-        padding: 0px;
+        padding: 0;
       }
     }
   }
@@ -20,7 +20,7 @@
   .tablet-preview {
     .row {
       div {
-        padding: 0px;
+        padding: 0;
       }
     }
   }
@@ -29,13 +29,14 @@
     width: 75%;
     .row {
       div {
-        padding: 0px;
+        padding: 0;
       }
     }
   }
 
   .grid-division-menu {
     width: 60vw;
+
     @include bs.media-breakpoint-down(lg) {
       width: 80vw;
     }

apps/app/src/components/PageEditor/HandsontableModal.module.scss

@@ -35,7 +35,7 @@
       padding-right: 35px;
       padding-left: 10px;
 
-      i:before {
+      i::before {
         position: absolute;
         top: 6px;
         right: 8px;

apps/app/src/components/PageEditor/LinkEditPreview.module.scss

@@ -1,8 +1,8 @@
 .linkedit-preview {
   .page-editor-preview-body {
     max-height: 70vh;
-    padding-top: 0px;
-    margin: 0px -10px 0px -10px;
+    padding-top: 0;
+    margin: 0 -10px;
     .wiki {
       overflow-y: scroll;
       font-size: 0.5rem;

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -149,7 +149,10 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
     // set to ref
     initialValueRef.current = initialValue;
   }, [initialValue]);
-  const [markdownToPreview, setMarkdownToPreview] = useState<string>(initialValue);
+
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
+
+  const [markdownToPreview, setMarkdownToPreview] = useState<string>(codeMirrorEditor?.getDoc() ?? '');
   const setMarkdownPreviewWithDebounce = useMemo(() => debounce(100, throttle(150, (value: string) => {
     setMarkdownToPreview(value);
   })), []);
@@ -159,8 +162,6 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   }, [setMarkdownPreviewWithDebounce]);
 
 
-  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
-
   const { scrollEditorHandler, scrollPreviewHandler } = useScrollSync(GlobalCodeMirrorEditorKey.MAIN, previewRef);
 
   const scrollEditorHandlerThrottle = useMemo(() => throttle(25, scrollEditorHandler), [scrollEditorHandler]);

apps/app/src/components/PageEditor/Preview.module.scss

@@ -3,7 +3,7 @@
 .page-editor-preview-body :global {
   .wiki {
     max-width: 980px;
-    padding: 0px 15px;
+    padding: 0 15px;
     margin: 0 auto;
   }
 }

apps/app/src/components/PageHeader/PageHeader.module.scss

@@ -1,2 +1,3 @@
+/* stylelint-disable-next-line block-no-empty */
 .page-header :global {
 }

apps/app/src/components/PagePresentationModal.module.scss

@@ -1,7 +1,7 @@
-@use '~/styles/_modal';
+@use '~/styles/modal';
 
 .grw-presentation-modal :global {
-
+  /* stylelint-disable-next-line length-zero-no-unit */
   @include modal.expand-modal-fullscreen(false, false, 0px);
 
   .modal-content {

apps/app/src/components/PageSideContents/PageAccessoriesControl.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .btn-page-accessories :global {
   display: flex;
@@ -14,7 +14,7 @@
 
 @include bs.media-breakpoint-down(sm) {
   .btn-page-accessories :global {
-    box-shadow: 0px 3px 6px rgba(black, 0.15);
+    box-shadow: 0 3px 6px rgba(black, 0.15);
   }
 }
 

apps/app/src/components/PageSideContents/PageSideContents.module.scss

@@ -1,2 +1,3 @@
+/* stylelint-disable-next-line block-no-empty */
 .grw-page-accessories-controls :global {
 }

apps/app/src/components/PageStatusAlert.module.scss

@@ -1,10 +1,10 @@
 @use '~/styles/variables' as var;
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .grw-page-status-alert :global {
   $margin-bottom: var.$grw-navbar-bottom-height + 10px;
 
-  box-shadow: 0px 2px 4px #0000004d;
+  box-shadow: 0 2px 4px #0000004d;
   opacity: 0.9;
 
   @include bs.media-breakpoint-down(sm) {

apps/app/src/components/PageTags/TagLabels.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 $grw-tag-label-font-size: 12px;
 
@@ -35,7 +35,8 @@ $grw-tag-label-font-size: 12px;
 
 .grw-tag-icon-button {
   padding: 6px 8px;
+
   @include bs.media-breakpoint-down(sm) {
-    box-shadow: 0px 3px 6px rgba(black, 0.15);
+    box-shadow: 0 3px 6px rgba(black, 0.15);
   }
 }

apps/app/src/components/PageTimeline.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .card-timeline :global {
   margin-bottom: 3rem;

apps/app/src/components/ReactMarkdownComponents/CodeBlock.module.scss

@@ -1,5 +1,5 @@
 @use '~/styles/variables' as var;
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .code-highlighted-title {
   position: absolute;

apps/app/src/components/RevisionComparer/RevisionComparer.module.scss

@@ -1,5 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
 
 .revision-compare :global {

apps/app/src/components/SearchForm.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .grw-search-table {
   caption {

apps/app/src/components/SearchPage/SearchControl.module.scss

@@ -1,6 +1,5 @@
 
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
 
 // == Colors

apps/app/src/components/SearchPage/SearchResultContent.module.scss

@@ -1,5 +1,6 @@
 @use '~/styles/mixins';
 
+/* stylelint-disable-next-line block-no-empty */
 .search-result-content :global {
 }
 

apps/app/src/components/SearchTypeahead.module.scss

@@ -1,8 +1,9 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .search-typeahead :global {
   position: relative;
   width: 100%;
+
   // corner radius
   border-top-right-radius: bs.$border-radius;
   border-bottom-right-radius: bs.$border-radius;

apps/app/src/components/ShortcutsModal.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .shortcuts-modal :global {
   h3 {
@@ -25,20 +25,22 @@
 
   // see http://coliss.com/articles/build-websites/operation/css/css-apple-keyboard-style-by-nrjmadan.html
   .key {
-    /*Box Properties*/
+    /* Box Properties */
     display: inline-block;
     width: 36px;
     height: 36px;
-    margin: 0px 4px;
-    /*Text Properties*/
+    margin: 0 4px;
+
+    /* Text Properties */
     font: 18px/36px Helvetica, serif;
     color: bs.$secondary;
     text-align: center;
     text-transform: uppercase;
     background: white;
     border-radius: 4px;
-    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
-    /* SVG Properties*/
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 50%);
+
+    /* SVG Properties */
     polygon {
       fill: bs.$secondary;
     }
@@ -63,9 +65,11 @@
       display: flex;
       align-items: center;
       justify-content: flex-end;
+
       // width: 180px;
       height: 41px;
     }
+
     // dd {
     //   margin-left: 190px;
     // }

apps/app/src/components/Sidebar/AppTitle/AppTitle.module.scss

@@ -1,9 +1,6 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
-@use '@growi/core/scss/growi-official-colors';
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/variables/growi-official-colors';
 @use '~/styles/variables' as var;
-
 @use '../button-styles';
 
 // GROWI Logo
@@ -55,6 +52,7 @@
     $grw-page-editor-mode-manager-width: 140px;
     $gap: 24px;
     $grw-contextual-subnavigation-padding-right: 24px;
+
     width: calc(100vw - #{var.$grw-sidebar-nav-width + $grw-page-controls-width + $grw-page-editor-mode-manager-width + $grw-contextual-subnavigation-padding-right + $gap * 2});
   }
 }

apps/app/src/components/Sidebar/PageCreateButton/CreateButton.module.scss

@@ -1,5 +1,4 @@
 @use '~/styles/variables' as var;
-
 @use '../button-styles';
 
 .btn-create :global {

apps/app/src/components/Sidebar/PageCreateButton/DropendToggle.module.scss

@@ -1,5 +1,4 @@
 @use '~/styles/variables' as var;
-
 @use '../button-styles';
 
 .btn-toggle :global {
@@ -10,7 +9,7 @@
 
   .icon {
     top: 50%;
-    right: 0px;
+    right: 0;
     font-size: 22px;
     transform: translateY(-50%);
   }
@@ -29,10 +28,7 @@
 // hitarea
 .btn-toggle :global {
   .hitarea {
-    top: 0;
-    right: -10px;
-    bottom: 0;
-    left: 0;
+    inset: 0 -10px 0 0;
   }
 }
 

apps/app/src/components/Sidebar/PageCreateButton/PageCreateButton.module.scss

@@ -1,2 +0,0 @@
-.grw-page-create-button :global {
-}

apps/app/src/components/Sidebar/PageTree/PageTreeSubstance.tsx

@@ -3,9 +3,6 @@ import React, {
 } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import {
-  UncontrolledButtonDropdown, DropdownMenu, DropdownToggle, DropdownItem,
-} from 'reactstrap';
 import { debounce } from 'throttle-debounce';
 
 import { useTargetAndAncestors, useIsGuestUser, useIsReadOnlyUser } from '~/stores/context';
@@ -44,28 +41,33 @@ export const PageTreeHeader = memo(({ isWipPageShown, onWipPageShownChange }: He
     <>
       <SidebarHeaderReloadButton onClick={() => mutate()} />
 
-      <UncontrolledButtonDropdown className="me-1">
-        <DropdownToggle color="transparent" className="p-0 border-0">
+      <div className="me-1">
+        <button
+          color="transparent"
+          className="btn p-0 border-0"
+          type="button"
+          data-bs-toggle="dropdown"
+          data-bs-auto-close="outside"
+          aria-expanded="false"
+        >
           <span className="material-symbols-outlined">more_horiz</span>
-        </DropdownToggle>
+        </button>
 
-        <DropdownMenu container="body">
-          <DropdownItem onClick={onWipPageShownChange} className="">
+        <ul className="dropdown-menu">
+          <li className="dropdown-item" onClick={onWipPageShownChange}>
             <div className="form-check form-switch">
               <input
-                id="wipPageVisibility"
                 className="form-check-input"
                 type="checkbox"
                 checked={isWipPageShown}
-                onChange={() => {}}
               />
-              <label className="form-label form-check-label text-muted mb-0" htmlFor="wipPageVisibility">
+              <label className="form-label form-check-label text-muted mb-0">
                 {t('sidebar_header.show_wip_page')}
               </label>
             </div>
-          </DropdownItem>
-        </DropdownMenu>
-      </UncontrolledButtonDropdown>
+          </li>
+        </ul>
+      </div>
     </>
   );
 });

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 
 // fix height

apps/app/src/components/Sidebar/RecentChanges/RecentChangesSubstance.module.scss

@@ -10,16 +10,19 @@
 
   .grw-recent-changes-skeleton-small {
     @include grw-skeleton-text($font-size: 14px, $line-height: 16px);
+
     max-width: 120px;
   }
 
   .grw-recent-changes-skeleton-h5 {
     @include grw-skeleton-h5;
+
     max-width: 120px;
   }
 
   .grw-recent-changes-skeleton-date {
     @include grw-skeleton-text($font-size: 10px, $line-height: 12px);
+
     width: 80px;
   }
 

apps/app/src/components/Sidebar/ResizableArea/ResizableArea.module.scss

@@ -9,8 +9,8 @@
 
 .grw-navigation-draggable :global {
   position: absolute;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   left: 100%;
 
   .grw-navigation-draggable-hitarea {

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -1,5 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '~/styles/variables' as var;
 @use '~/styles/mixins';
 
@@ -60,6 +59,7 @@
 
       // apply transition
       transition-property: transform;
+
       @include mixins.apply-navigation-transition();
 
       &:not(.open) {
@@ -82,6 +82,7 @@
       background-color: color-mix(in srgb, var(--grw-highlight-100), var(--bs-body-bg));
     }
   }
+
   // frosted glass effect in collapsed mode
   .grw-sidebar {
     &:global {
@@ -104,6 +105,7 @@
       background-color: color-mix(in srgb, var(--grw-highlight-800), var(--bs-body-bg));
     }
   }
+
   // frosted glass effect in collapsed mode
   .grw-sidebar {
     &:global {

apps/app/src/components/Sidebar/SidebarContents.module.scss

@@ -1,7 +1,6 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .grw-sidebar-contents :global {
-
   --bs-heading-color: var(--bs-tertiary-color);
   --bs-body-color: var(--bs-secondary-color);
   --bs-link-color-rgb: var(--bs-secondary-color-rgb);

apps/app/src/components/Sidebar/SidebarHead/SidebarHead.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 
 // == Colors
@@ -13,6 +13,7 @@
     );
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-sidebar-head :global {
     background-color: var(

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.module.scss

@@ -1,14 +1,13 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '~/styles/variables' as var;
 @use '~/styles/mixins';
-
 @use '../button-styles';
 
 .btn-toggle-collapse :global {
   @extend %btn-basis;
 
   $height: var.$grw-sidebar-nav-width; // declare $height with the same value as the sidebar nav width
+
   height: $height;
 }
 
@@ -25,7 +24,7 @@
 }
 
 // Hide when editing
-@include mixins.editing() {
+@include mixins.at-editing() {
   .btn-toggle-collapse {
     visibility: hidden;
   }
@@ -48,6 +47,7 @@
     }
   }
 }
+
 @include bs.color-mode(light) {
   .btn-toggle-collapse {
     &:global {
@@ -58,6 +58,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .btn-toggle-collapse {
     &:global {

apps/app/src/components/Sidebar/SidebarNav/PersonalDropdown.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .btn-personal-dropdown :global {
   img {
@@ -25,6 +25,7 @@
 
   .personal-dropdown-item :global {
     --bs-link-color-rgb:var(--bs-gray-600);
+
     color: var(--bs-gray-600);
   }
 }
@@ -36,6 +37,7 @@
 
   .personal-dropdown-item :global {
     --bs-link-color-rgb:var(--bs-gray-500);
+
     color: var(--bs-gray-500);
   }
 }

apps/app/src/components/Sidebar/SidebarNav/PrimaryItems.module.scss

@@ -1,7 +1,5 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '../button-styles';
-
 @use '../variables' as sidebarVar;
 
 .grw-primary-items :global {
@@ -29,7 +27,7 @@
       position: relative;
 
       // indicator
-      &:after {
+      &::after {
         position: absolute;
         top: 0;
         left: 0;
@@ -55,6 +53,7 @@
     @extend %btn-primary-color-vars;
   }
 }
+
 @include bs.color-mode(light) {
   .grw-primary-items :global {
     .btn-primary {
@@ -63,6 +62,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-primary-items :global {
     .btn-primary {

apps/app/src/components/Sidebar/SidebarNav/SecondaryItems.module.scss

@@ -1,5 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '../button-styles';
 
 
@@ -22,6 +21,7 @@
     @extend %btn-primary-color-vars;
   }
 }
+
 @include bs.color-mode(light) {
   .grw-secondary-items :global {
     .btn-primary {
@@ -30,6 +30,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-secondary-items :global {
     .btn-primary {

apps/app/src/components/Sidebar/SidebarNav/SidebarNav.module.scss

@@ -1,10 +1,8 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '~/styles/variables' as var;
 
 .grw-sidebar-nav :global {
   width: var.$grw-sidebar-nav-width;
-
   border-right : 1px solid var(--bs-border-color);
 
   .grw-sidebar-nav-secondary-container {
@@ -15,13 +13,12 @@
 
 
 // == Colors
-.grw-sidebar-nav :global {
-}
 @include bs.color-mode(light) {
   .grw-sidebar-nav :global {
     background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-100));
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-sidebar-nav :global {
     background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-800));

apps/app/src/components/Sidebar/SidebarNav/SidebarNav.tsx

@@ -1,7 +1,9 @@
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import type { SidebarContentsType } from '~/interfaces/ui';
+import { useIsGuestUser, useIsReadOnlyUser } from '~/stores/context';
 
+import { NotAvailableForReadOnlyUser } from '../../NotAvailableForReadOnlyUser';
 import { PageCreateButton } from '../PageCreateButton';
 
 import { PrimaryItems } from './PrimaryItems';
@@ -16,9 +18,29 @@ export type SidebarNavProps = {
 export const SidebarNav = memo((props: SidebarNavProps) => {
   const { onPrimaryItemHover } = props;
 
+  const { data: isGuestUser } = useIsGuestUser();
+  const { data: isReadOnlyUser } = useIsReadOnlyUser();
+
+  const renderedPageCreateButton = useMemo(() => {
+    if (isGuestUser) {
+      return <></>;
+    }
+
+    if (isReadOnlyUser) {
+      return (
+        <NotAvailableForReadOnlyUser>
+          <PageCreateButton />
+        </NotAvailableForReadOnlyUser>
+      );
+    }
+
+    return <PageCreateButton />;
+  }, [isGuestUser, isReadOnlyUser]);
+
   return (
     <div className={`grw-sidebar-nav ${styles['grw-sidebar-nav']}`}>
-      <PageCreateButton />
+
+      {renderedPageCreateButton}
 
       <div className="grw-sidebar-nav-primary-container" data-vrt-blackout-sidebar-nav>
         <PrimaryItems onItemHover={onPrimaryItemHover} />

apps/app/src/components/Sidebar/SidebarNav/SkeletonItem.module.scss

@@ -1,5 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '../variables' as sidebarVar;
 
 .grw-skeleton-item :global {

apps/app/src/components/Sidebar/Skeleton/DefaultContentSkelton.module.scss

@@ -3,12 +3,14 @@
 .grw-default-content-skelton :global {
   .grw-skeleton-text {
     @include mixins.grw-skeleton-text($font-size:15px, $line-height:21.42px);
+
     max-width: 160px;
     margin: 15px 0;
   }
 
   .grw-skeleton-text-full {
     @extend .grw-skeleton-text;
+
     max-width: 100%;
   }
 }

apps/app/src/components/Sidebar/_button-styles.scss

@@ -1,5 +1,4 @@
 @use '~/styles/variables' as var;
-
 @use './variables' as sidebarVar;
 
 
@@ -9,7 +8,6 @@
 
   width: var.$grw-sidebar-nav-width;
   height: sidebarVar.$grw-sidebar-button-height;
-
   line-height: 1em;
   border: 0;
   border-radius: 0;

apps/app/src/components/Skeleton.module.scss

@@ -1,4 +1,5 @@
 .grw-skeleton {
   --bs-list-group-color: rgba(var(--bs-tertiary-color-rgb), 0.2);
+
   background-color: var(--bs-list-group-color);
 }

apps/app/src/components/SlackNotification.module.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 
 .grw-slack-switch :global {

apps/app/src/components/StaffCredit/StaffCredit.module.scss

@@ -3,19 +3,16 @@
   // attached !important for updating from .modal-dialog class style
   width: 80vw !important;
   max-width: unset !important;
-
   height: 80vh !important;
   max-height: unset !important;
-
   margin: 10vh 10vw !important;
 
   // see https://css-tricks.com/old-timey-terminal-styling/
   .credit-curtain {
     padding-top: 80vh;
-
     text-shadow: 0 0 10px #c8c8c8;
     background-color: black;
-    background-image: radial-gradient(rgba(50, 100, 100, 0.75), black 120%);
+    background-image: radial-gradient(rgba(50, 100, 100, 75%), black 120%);
   }
 
   .background {

apps/app/src/components/TableOfContents.module.scss

@@ -1,11 +1,10 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .revision-toc :global {
   // to get on the Attachment row
   z-index: 1;
   padding: 5px;
   font-size: 0.9em;
-
   border-bottom: 1px solid transparent;
 
   .revision-toc-content {