Adjust color

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

@@ -22,14 +22,14 @@
 .grw-primary-items :global {
   .btn.btn-primary {
     @extend %btn-primary-color-vars;
-    --bs-btn-active-color: var(--grw-primary-500);
+    --bs-btn-active-color: var(--grw-sidebar-nav-btn-active-color, var(--grw-primary-500));
   }
 }
 
 @include bs.color-mode(light) {
   .grw-primary-items :global {
     .btn-primary {
-      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-highlight-500));
+      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-highlight-600));
       --bs-btn-color-hover: var(--grw-sidebar-nav-btn-hover-color, var(--grw-highlight-700));
       --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-200));
       --bs-btn-active-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-200));

packages/preset-themes/src/styles/default.scss

@@ -27,8 +27,8 @@
 
   --grw-wiki-link-color-rgb: var(--grw-highlight-700-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-highlight-600-rgb);
-  --grw-sidebar-nav-btn-color: var(--grw-highlight-600-rgb);
-  --grw-sidebar-nav-btn-hover-color: var(--grw-highlight-700);
+  --grw-sidebar-nav-btn-color: var(--grw-highlight-500);
+  --grw-sidebar-nav-btn-hover-color: var(--grw-highlight-800);
 }
 
 :root[data-bs-theme='dark'] {
@@ -58,6 +58,6 @@
 
   --grw-wiki-link-color-rgb: var(--grw-highlight-600-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-highlight-400-rgb);
-  --grw-sidebar-nav-btn-color: var(--grw-highlight-700-rgb);
+  --grw-sidebar-nav-btn-color: var(--grw-highlight-700);
   --grw-sidebar-nav-btn-hover-color: var(--grw-highlight-500);
 }

packages/preset-themes/src/styles/halloween.scss

@@ -38,6 +38,7 @@
 
   --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb);
+  --grw-sidebar-nav-btn-color: var(--grw-highlight-400);
 
   // change marker color
   --grw-marker-bg: var(--grw-marker-bg-red);

packages/preset-themes/src/styles/hufflepuff.scss

@@ -27,6 +27,7 @@
 
   --grw-wiki-link-color-rgb: var(--grw-primary-600-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-800-rgb);
+  --grw-sidebar-nav-btn-active-color: var(--grw-primary-800);
 
   // change marker color
   --grw-marker-bg: var(--grw-marker-bg-cyan);
@@ -67,6 +68,7 @@
 
   --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-primary-400-rgb);
+  --grw-sidebar-nav-btn-color: var(--grw-highlight-600);
 
   // change marker color
   --grw-marker-bg: var(--grw-marker-bg-cyan);