reorganize sidebar contents styles

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

@@ -2,17 +2,9 @@
 
 // TODO: relocate following styles into PageTreeItem.mdoule.scss after refactoring
 // https://redmine.weseek.co.jp/issues/127544
-.pagetree-item :global {
-  .list-group-item {
-    --bs-list-group-bg: transparent;
-  }
-}
 @include bs.color-mode(light) {
   .pagetree-item :global {
     .list-group-item-action {
-      --bs-list-group-action-hover-bg: var(--grw-highlight-200);
-      --bs-list-group-action-active-bg: var(--grw-highlight-400);
-
       .btn-page-item-control {
         --bs-btn-bg: transparent;
         --bs-btn-hover-bg: var(--grw-highlight-400);
@@ -24,9 +16,6 @@
 @include bs.color-mode(dark) {
   .pagetree-item :global {
     .list-group-item-action {
-      --bs-list-group-action-hover-bg: var(--grw-highlight-800);
-      --bs-list-group-action-active-bg: var(--grw-highlight-800);
-
       .btn-page-item-control {
         --bs-btn-bg: transparent;
         --bs-btn-hover-bg: var(--grw-highlight-700);

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

@@ -218,11 +218,6 @@
 
 .grw-sidebar :global {
   .grw-contextual-navigation {
-    --bs-heading-color: var(--bs-tertiary-color);
-    --bs-body-color: var(--bs-secondary-color);
-    --bs-link-color-rgb: var(--bs-secondary-color-rgb);
-    --bs-link-opacity: .75;
-
     backdrop-filter: blur(20px);
   }
 }

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

@@ -0,0 +1,14 @@
+@use '@growi/core/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);
+  --bs-link-opacity: .75;
+
+  .list-group-item {
+    --bs-list-group-bg: transparent;
+  }
+
+}

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

@@ -9,6 +9,9 @@ import { PageTree } from './PageTree';
 import { RecentChanges } from './RecentChanges';
 import Tag from './Tag';
 
+import styles from './SidebarContents.module.scss';
+
+
 export const SidebarContents = memo(() => {
   const { data: currentSidebarContents } = useCurrentSidebarContents();
 
@@ -31,7 +34,9 @@ export const SidebarContents = memo(() => {
   }
 
   return (
-    <Contents />
+    <div className={`grw-sidebar-contents ${styles['grw-sidebar-contents']}`}>
+      <Contents />
+    </div>
   );
 });
 SidebarContents.displayName = 'SidebarContents';

apps/app/src/styles/molecules/_list-group-item.scss

@@ -0,0 +1,14 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@include bs.color-mode(light) {
+  .list-group-item-action {
+    --bs-list-group-action-hover-bg: var(--grw-highlight-200);
+    --bs-list-group-action-active-bg: var(--grw-highlight-400);
+  }
+}
+@include bs.color-mode(dark) {
+  .list-group-item-action {
+    --bs-list-group-action-hover-bg: var(--grw-highlight-800);
+    --bs-list-group-action-active-bg: var(--grw-highlight-800);
+  }
+}

apps/app/src/styles/style-app.scss

@@ -10,6 +10,7 @@
 
 // molecules
 @import 'molecules/toastr';
+@import 'molecules/list-group-item';
 // @import 'molecules/slack-notification';
 // @import 'molecules/duplicated-paths-table.scss';