mix colors

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

@@ -28,6 +28,14 @@
   &:global {
     &.btn.btn-primary {
       @extend %btn-primary-color-vars;
+
+      --bs-btn-hover-color: color-mix(in srgb, var(
+        --grw-sidebar-nav-btn-hover-color,
+        var(
+          --grw-sidebar-nav-btn-color,
+          var(--bs-btn-color)
+        )) 90%,
+        transparent);
     }
   }
 }
@@ -35,7 +43,7 @@
   .btn-toggle-collapse {
     &:global {
       &.btn.btn-primary {
-        --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--bs-gray-500));
+        --bs-btn-color: color-mix(in srgb, var(--grw-sidebar-nav-btn-color, var(--bs-gray-500)) 50%, transparent);
         --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-300));
       }
     }
@@ -45,7 +53,7 @@
   .btn-toggle-collapse {
     &:global {
       &.btn.btn-primary {
-        --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--bs-gray-600));
+        --bs-btn-color: color-mix(in srgb, var(--grw-sidebar-nav-btn-color, var(--bs-gray-600)) 50%, transparent);
         --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-700));
       }
     }