barbican-reset 2.27.0 → 2.29.0

package/helpers/mixins/_buttons.scss

@@ -77,8 +77,8 @@
   @include outline-button($color: white,
     $background: $c-brand-generic,
     $border: 0.125rem,
-    $display: "flex"
   );
+  @include flex-button;
 }
 
 @mixin btn-input-edit {
@@ -194,7 +194,8 @@
 }
 
 @mixin btn-cta {
-  @include solid-button($background: $c-grey-l21, $display: "flex");
+  @include solid-button($background: $c-grey-l21);
+  @include flex-button;
   fill: white;
 }
 
@@ -230,12 +231,12 @@
 }
 
 @mixin btn-menu {
-  @include display-button(flex, 0.75);
   @include outline-button($color: white,
     $background: $c-brand-generic,
     $padding: 0 0.75rem,
     $margin: 0.25rem,
     $line-height: 2.375rem);
+  @include flex-button($gap: 0.75rem);
   vertical-align: middle;
   min-height: 2.5rem;
 
@@ -249,12 +250,12 @@
 }
 
 @mixin btn-basket {
-  @include display-button(flex, 0.5);
   @include solid-button($background: white,
     $color: $c-brand-generic,
     $padding: 0 0.75rem,
     $margin: 0.25rem,
     $line-height: 2.375rem);
+  @include flex-button($gap: 0.5rem);
   vertical-align: middle;
   min-height: 2.5rem;
 
@@ -268,8 +269,8 @@
 }
 
 @mixin btn-discover {
-  @include display-button(flex, 0.75);
   @include outline-button(white, $c-grey-l21);
+  @include flex-button($gap: 0.75rem);
 
   span {
     position: relative;
@@ -286,30 +287,33 @@
   }
 }
 
-// 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);
   }
 }
 
 @mixin btn-priority-row {
   @include btn-outline-primary;
-  @include display-button(flex, 0.5);
+  @include flex-button($gap: 0.5rem);
 }
 
 @mixin btn-login-to-book {
-  @include display-button(flex, 0.5);
   @include btn-primary;
+  @include flex-button($gap: 0.5rem);
   justify-content: center;
   min-width: initial;
 
@@ -320,23 +324,26 @@
 }
 
 @mixin btn-sold-out {
-  @include display-button(flex, 0.5);
   @include btn-secondary;
+  @include flex-button($gap: 0.5rem);
   pointer-events: none;
   min-width: initial;
 }
 
 @mixin btn-add-membership-to-basket {
   @include solid-button($background: $c-brand-membership);
-  @include display-button(flex, 0.5);
+  @include flex-button($gap: 0.5rem);
 }
 
 @mixin btn-remove-membership-from-basket {
   @include solid-button($background: $c-status-error);
-  @include display-button(flex, 0.5);
+  @include flex-button($gap: 0.5rem);
 }
 
-// Access Overlay Work -- End
+@mixin btn-additional-information {
+  @include btn-outline-primary;
+  @include flex-button($gap: 0.5rem);
+}
 
 @mixin btn-expand {
   display: block;

package/helpers/mixins/buttons/_outline.scss

@@ -4,22 +4,11 @@
   $padding: false,
   $margin: false,
   $line-height: false,
-  $display: false,
   $font-size: false) {
   background-color: $background;
   border: $border solid $color;
   color: $color;
 
-  @if $display {
-    @if $padding {
-      @include display-button($display, $padding * 0.625);
-    }
-
-    @else {
-      @include display-button($display, 0.625);
-    }
-  }
-
   @if $line-height {
     line-height: $line-height;
   }
@@ -41,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/_setup.scss

@@ -50,20 +50,20 @@
   }
 }
 
-@mixin display-button($display: "ib", $gap: 1) {
-  @if $display =="ib" {
-    vertical-align: middle;
-    display: inline-block;
+// deprecated: @mixin display-button
 
-    >* {
-      vertical-align: middle;
-      display: inline-block;
-    }
-  }
+@mixin flex-button($gap: 1rem) {
+  display: inline-flex;
+  align-items: center;
+  gap: $gap;
+}
 
-  @else if $display =="flex" {
-    display: inline-flex;
-    align-items: center;
-    gap: #{$gap}rem;
+@mixin inline-block-button() {
+  vertical-align: middle;
+  display: inline-block;
+
+  >* {
+    vertical-align: middle;
+    display: inline-block;
   }
 }

package/helpers/mixins/buttons/_solid.scss

@@ -4,22 +4,11 @@
   $padding: false,
   $margin: false,
   $line-height: false,
-  $display: false,
   $font-size: false) {
   border: $border solid $background;
   background-color: $background;
   color: $color;
 
-  @if $display {
-    @if $padding {
-      @include display-button($display, $padding * 0.625);
-    }
-
-    @else {
-      @include display-button($display, 0.625);
-    }
-  }
-
   @if $line-height {
     line-height: $line-height;
   }

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.27.0"
+  "version": "2.29.0"
 }

package/scss/_btn.scss

@@ -147,6 +147,10 @@
     @include btn-remove-membership-from-basket;
   }
 
+  &.btn-additional-information {
+    @include btn-additional-information;
+  }
+
   // modifyers
 
   &.expand {