Change color for primary Items icon of default theme

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

@@ -4,22 +4,25 @@
 
 // == Sizes
 .grw-primary-items :global {
-  .badge :global {
-    left: 26px;
-    font-size: 8px;
-  }
+
   .btn {
     @extend %btn-basis;
 
     width: 40px;
     height: 40px;
   }
+
+  .badge :global {
+    left: 26px;
+    font-size: 8px;
+  }
 }
 
 // == Colors
 .grw-primary-items :global {
   .btn.btn-primary {
     @extend %btn-primary-color-vars;
+    --bs-btn-active-color: var(--grw-primary-500);
   }
 }
 
@@ -27,7 +30,8 @@
   .grw-primary-items :global {
     .btn-primary {
       --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-600));
-      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-300));
+      --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));
     }
   }
 }
@@ -36,7 +40,8 @@
   .grw-primary-items :global {
     .btn-primary {
       --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-300));
-      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-700));
+      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-900));
+      --bs-btn-active-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-900));
     }
   }
 }

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

@@ -42,7 +42,7 @@ export const SidebarNav = memo((props: SidebarNavProps) => {
 
       {renderedPageCreateButton}
 
-      <div className="grw-sidebar-nav-primary-container text-center mt-2" data-vrt-blackout-sidebar-nav>
+      <div className="grw-sidebar-nav-primary-container text-center mt-1" data-vrt-blackout-sidebar-nav>
         <PrimaryItems onItemHover={onPrimaryItemHover} />
       </div>
 

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

@@ -27,7 +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);
+  --grw-sidebar-nav-btn-color: var(--grw-highlight-500);
+  --grw-sidebar-nav-btn-hover-color: var(--grw-highlight-700);
 }
 
 :root[data-bs-theme='dark'] {
@@ -57,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: rgba(var(--grw-highlight-400-rgb), 0.8);
-
+  --grw-sidebar-nav-btn-color: var(--grw-highlight-700-rgb);
+  --grw-sidebar-nav-btn-hover-color: var(--grw-highlight-500);
 }