feat: add secondary hover background style to theme utilities

Author: AbhishekA1509

src/css/colorPalette.scss

@@ -104,6 +104,7 @@ $black: 0, 0, 0;
     --bg-shimmer-loader: linear-gradient(90deg, var(--N200) 0%, var(--N50) 50%, var(--N200) 80%);
     --bg-hover: rgba(64, 96, 128, 0.05);
     --bg-hover-opaque: rgb(245, 247, 249);
+    --bg-hover-secondary-opaque: rgb(238, 242, 246);
     --bg-body: linear-gradient(90deg, var(--B500) 0%, var(--B500) 10%, rgb(0, 82, 165) 25%, rgb(0, 47, 94) 50%, rgb(0, 33, 65) 100%);
     --bg-segmented-control: rgba(#{$black}, 0.03);
 
@@ -208,6 +209,7 @@ $black: 0, 0, 0;
     --bg-shimmer-loader: linear-gradient(90deg, var(--N50) 0%, var(--N200) 50%, var(--N50) 80%);
     --bg-hover: rgba(229, 242, 255, 0.05);
     --bg-hover-opaque: rgb(41, 42, 51);
+    --bg-hover-secondary-opaque: rgb(36, 38, 46);
     --bg-body: var(--bg-tertiary);
     --bg-segmented-control: rgba(#{$black}, 0.30);
 

src/css/themeUtils.scss

@@ -71,6 +71,12 @@
         &--opaque:hover {
             background: var(--bg-hover-opaque);
         }
+
+        &-secondary {
+            &--opaque:hover {
+                background: var(--bg-hover-secondary-opaque);
+            }
+        }
     }
 
     &__white {
@@ -155,4 +161,4 @@
     @include divider("primary-translucent", "--divider-primary-translucent");
     @include divider("secondary", "--divider-secondary");
     @include divider("secondary-translucent", "--divider-secondary-translucent");
-}
+}