add growi specific css vars

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

@@ -97,33 +97,44 @@
 }
 
 
+// == Colors
 .grw-sidebar-nav :global {
-  .btn-primary {
-    --bs-btn-bg: transparent !important;
-    --bs-btn-active-bg: transparent !important;
+  .btn.btn-primary {
+    --bs-btn-bg: transparent;
+    --bs-btn-active-bg: transparent;
+    --bs-btn-hover-color: var(
+      --grw-sidebar-nav-btn-hover-color,
+      var(
+        --grw-sidebar-nav-btn-color,
+        var(--bs-btn-color)
+      ),
+    );
+    --bs-btn-active-color: var(
+      --grw-sidebar-nav-btn-active-color,
+      var(
+        --grw-sidebar-nav-btn-color,
+        var(--bs-btn-color)
+      ),
+    );
   }
 }
 @include bs.color-mode(light) {
   .grw-sidebar-nav :global {
-    background-color: var(--grw-highlight-100);
+    background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-100));
 
     .btn-primary {
-      --bs-btn-color: var(--grw-primary-500);
-      --bs-btn-hover-color: var(--grw-primary-500);
-      --bs-btn-hover-bg: var(--grw-highlight-300);
-      --bs-btn-active-color: var(--grw-primary-500);
+      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-500));
+      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-300));
     }
   }
 }
 @include bs.color-mode(dark) {
   .grw-sidebar-nav :global {
-    background-color: var(--grw-highlight-900);
+    background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-900));
 
     .btn-primary {
-      --bs-btn-color: var(--grw-primary-400);
-      --bs-btn-hover-color: var(--grw-primary-400);
-      --bs-btn-hover-bg: var(--grw-highlight-700);
-      --bs-btn-active-color: var(--grw-primary-400);
+      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-400));
+      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-700));
     }
   }
 }

apps/app/src/styles/organisms/_wiki.scss

@@ -292,3 +292,21 @@
     }
   }
 }
+
+
+// == Colors
+.wiki {
+  a {
+    color: rgba(
+      var(--grw-wiki-link-color-rgb, var(--bs-link-color-rgb)),
+      var(--bs-link-opacity, 1)
+    );
+
+    &:hover {
+      color: rgba(
+        var(--grw-wiki-link-hover-color-rgb, var(--bs-link-hover-color-rgb)),
+        var(--bs-link-opacity, 1)
+      );
+    }
+  }
+}

packages/preset-themes/src/styles/mono-blue.scss

@@ -32,14 +32,8 @@
   @import '@growi/core/scss/bootstrap/theming/root-light';
   @import '@growi/core/scss/bootstrap/theming/apply';
 
-  .wiki {
-    a {
-      color: var(--grw-primary-500);
-      &:hover {
-        color: var(--grw-primary-700);
-      }
-    }
-  }
+  --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
+  --grw-wiki-link-hover-color-rgb: var(--grw-primary-700-rgb);
 }
 
 :root[data-bs-theme='dark'] {
@@ -76,14 +70,8 @@
   @import '@growi/core/scss/bootstrap/theming/root-dark';
   @import '@growi/core/scss/bootstrap/theming/apply';
 
-  .wiki {
-    a {
-      color: var(--grw-primary-500);
-      &:hover {
-        color: var(--grw-primary-300);
-      }
-    }
-  }
+  --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
+  --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb);
 }
 
 // @use '@growi/core/scss/bootstrap/init' as bs;