feat: update box styles to improve hover and focus effects with background color adjustments

Author: nicosammito

src/styles/_box.scss

@@ -24,11 +24,8 @@
   $color: variables.$secondary,
   $borderColor: variables.$secondary
 ) {
-  $mixedBorderWhite: color.mix($borderColor, variables.$white, 25%);
-  $mixedBorderBlack: color.mix($borderColor, variables.$black, 25%);
-
   &:hover {
-    border-color: rgba($mixedBorderWhite, .25);
+    background: helpers.backgroundColor($background, 1.5);
   }
 }
 
@@ -37,10 +34,7 @@
   $color: variables.$secondary,
   $borderColor: variables.$secondary
 ) {
-  $mixedBorderWhite: color.mix($borderColor, variables.$white, 25%);
-  $mixedBorderBlack: color.mix($borderColor, variables.$black, 25%);
-
-  border-color: rgba($mixedBorderWhite, .1);
+  background: helpers.backgroundColor($background, 2);
   outline: none;
 }
 
@@ -50,7 +44,7 @@
   $borderColor: variables.$secondary
 ) {
 
-  &:active, &:focus {
+  &:active, &:focus, &[aria-selected=true] {
     @include boxActiveStyle($background, $color, $borderColor);
   }
 }

src/styles/_helpers.scss

@@ -35,6 +35,12 @@
 }
 
 @function backgroundColor($color: variables.$secondary, $level: 1) {
+  @if($color == variables.$primary) {
+    @if($level == 1) {
+      @return variables.$primary
+    }
+    @return rgba(variables.$secondary, 10% * $level);
+  }
   @return color.mix($color, variables.$primary, 10% * $level);
 }