barbican-reset 2.28.0 → 2.29.0

package/helpers/mixins/_buttons.scss

@@ -287,19 +287,22 @@
   }
 }
 
-// Access Overlay Work -- Start
-
 @mixin btn-membership-pill {
-  $colors: black, white;
+  @include outline-button($c-grey-l11, white);
 
-  @include outline-button($colors...);
+  $border: 1px solid $c-grey-l11;
 
-  @include focus {
-    @include outline-button-focus($colors...);
+  &:hover {
+    @include outline-button-focus($c-grey-l87, $c-grey-l11, $border);
+  }
+
+  @include focus-visible {
+    @include outline-button-focus($c-grey-l87, $c-grey-l11, $border);
+    outline: $border;
   }
 
   &[data-status="active"] {
-    @include outline-button-focus($colors...);
+    @include outline-button-focus($c-grey-l11, white, $border);
   }
 }
 
@@ -342,8 +345,6 @@
   @include flex-button($gap: 0.5rem);
 }
 
-// Access Overlay Work -- End
-
 @mixin btn-expand {
   display: block;
 }

package/helpers/mixins/buttons/_outline.scss

@@ -30,15 +30,15 @@
   }
 
   @include focus {
-    @include outline-button-focus($color, $background, $border)
+    @include outline-button-focus($color, $background, 1px solid $border)
   }
 }
 
-@mixin outline-button-focus($color: $c-brand-generic, $background: white, $border: 1px) {
-  border: $border solid $color;
+@mixin outline-button-focus($color: $c-brand-generic, $background: white, $border: 1px solid $c-brand-generic) {
   background-color: $color;
   color: $background;
   box-shadow: none;
+  border: $border;
   outline: none;
 
   path {

package/helpers/mixins/buttons/_spektrix.scss

@@ -26,7 +26,7 @@
   @include btn-outline-secondary;
 
   &:focus {
-    @include outline-button-focus($c-grey-l21);
+    @include outline-button-focus($c-grey-l21, white, 1px solid $c-grey-l21);
   }
 }
 

package/package.json

@@ -103,5 +103,5 @@
     "watch:patterns": "cd patterns && gulp watch"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.28.0"
+  "version": "2.29.0"
 }