barbican-reset 3.36.0 → 3.40.0

package/scss/mixins/buttons/_outline.scss

@@ -1,19 +1,23 @@
 @use "../../mixins/focus" as *;
 
-@mixin outline-button($color: var(--color-brand-generic),
-  $background: white,
+@mixin outline-button($color: var(--color-button-outline),
+  $background: var(--background-color-button-outline),
   $border-width: var(--border-width-lg),
   $padding: false,
   $margin: false,
   $line-height: false,
   $font-size: false,
-  ) {
+) {
   background-color: $background;
   border-width: $border-width;
   border-color: $color;
   border-style: solid;
   color: $color;
 
+  svg {
+    fill: currentColor;
+  }
+
   @if $line-height {
     line-height: $line-height;
   }
@@ -30,12 +34,8 @@
     margin: $margin;
   }
 
-  path {
-    fill: $color;
-  }
-
   @include focus {
-    @include outline-button-focus($color, $background)
+    @include outline-button-focus($color, $background, $border-width)
   }
 }
 
@@ -47,8 +47,4 @@
   color: $background;
   box-shadow: none;
   outline: none;
-
-  path {
-    fill: $background;
-  }
 }

package/scss/mixins/buttons/_setup.scss

@@ -1,5 +1,5 @@
 @mixin setup-button {
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
   line-height: var(--line-height-xs);
   font-size: var(--font-size-body);
   border-color: currentColor;
@@ -12,14 +12,10 @@
   border-style: solid;
   align-items: center;
   text-align: center;
-  gap: var(--gap-sm);
+  fill: currentColor;
+  gap: var(--gap-xs);
   font-weight: bold;
   transition: none;
   cursor: pointer;
   color: inherit;
-
-  &:focus {
-    box-shadow: none;
-    outline: none;
-  }
 }

package/scss/mixins/buttons/custom/_edit-input.scss

@@ -0,0 +1,22 @@
+@use "../../../mixins/buttons/outline" as *;
+
+@mixin btn-edit-input {
+  @include outline-button;
+
+  & {
+    background-color: var(--color-black-10-lighten);
+    padding: var(--padding-sm) var(--padding-md);
+    border-color: var(--color-black-25-lighten);
+    border-width: var(--border-width-sm);
+    color: var(--color-black-50-lighten);
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--color-black-50-lighten);
+    border-color: var(--color-black-50-lighten);
+    border-width: var(--border-width-sm);
+  }
+}

package/scss/mixins/buttons/custom/_exit-overlay-bg.scss

@@ -0,0 +1,12 @@
+@use "../../../mixins/core" as *;
+@use "../../../mixins/buttons/custom/invisible" as *;
+
+@mixin btn-exit-overlay-bg {
+  @include btn-invisible;
+  @include inset;
+
+  & {
+    position: fixed;
+    z-index: 1;
+  }
+}

package/scss/mixins/buttons/custom/_exit-overlay.scss

@@ -4,29 +4,13 @@
 
 @mixin btn-exit-overlay {
   @include btn-invisible;
-  @include inset;
 
-  & {
-    position: fixed;
-    z-index: 1;
-  }
-
-  &:active {
-    transform: scale(1);
-  }
-
-  &:active .close-icon {
-    transform: var(--scale-click);
-  }
+  // &:active .close-icon {
+  //   transform: var(--scale-click);
+  // }
 
   &:hover .close-icon,
   &:focus .close-icon {
     @include close-icon-focus;
   }
-
-  .close-icon {
-    right: var(--padding-xxl);
-    top: var(--padding-xxl);
-    position: fixed;
-  }
 }

package/scss/mixins/buttons/custom/_exit.scss

@@ -0,0 +1,11 @@
+@use "../custom/link" as *;
+@use "../../focus" as *;
+
+@mixin btn-exit {
+  @include btn-link;
+
+  &:hover,
+  &:focus-visible {
+    @include close-icon-focus;
+  }
+}

package/scss/mixins/buttons/custom/_invisible.scss

@@ -3,8 +3,8 @@
   border: none;
   padding: 0;
 
-  &:focus,
+  &:focus-visible,
   &:hover {
-    box-shadow: none;
+    outline: transparent;
   }
 }

package/scss/mixins/buttons/custom/_link.scss

@@ -0,0 +1,19 @@
+@use "../../focus" as *;
+
+@mixin btn-link {
+  background-color: transparent;
+  text-decoration: underline;
+  vertical-align: baseline;
+  font-weight: normal;
+  fill: currentColor;
+  border-radius: 0;
+  text-align: left;
+  color: inherit;
+  border: none;
+  padding: 0;
+
+  &:focus-visible,
+  &:hover {
+    @include focus-tabs;
+  }
+}

package/scss/mixins/buttons/custom/_manage-order.scss

@@ -4,14 +4,14 @@
   @include btn-slim;
 
   & {
+    background-color: var(--background-color-button-manage-order);
     border-width: var(--border-width-sm);
-    background-color: transparent;
   }
 
   &:hover,
   &:focus-visible {
-    background-color: var(--color-brand-generic-15-lighten);
-    border-color: var(--color-brand-generic-90-darken);
-    color: var(--color-brand-generic-90-darken);
+    background-color: var(--background-color-button-manage-order-focus);
+    border-color: var(--border-color-button-manage-order-focus);
+    color: var(--color-button-manage-order-focus);
   }
 }

package/scss/mixins/buttons/custom/_outline-secondary.scss

@@ -2,9 +2,5 @@
 @use "../../../mixins/focus" as *;
 
 @mixin btn-outline-secondary($border-width: var(--border-width-sm)) {
-  @include outline-button($color: var(--color-black-60-lighten), $border-width: $border-width);
-
-  @include focus {
-    @include outline-button-focus($color: var(--color-black-60-lighten), $border-width: $border-width);
-  }
+  @include outline-button($color: var(--color-button-outline-secondary), $border-width: $border-width);
 }

package/scss/mixins/buttons/custom/_renew-membership.scss

@@ -6,9 +6,9 @@ $iterations: (
   "member-plus": var(--color-brand-membership-35-darken),
   "patron": var(--color-donor-patron),
   "premier-patron": var(--color-donor-patron),
-  "principal-patron": var(--color-donor-principle),
-  "directors-circle": var(--color-donor-principle),
-  "young-barbican": var(--color-youngbarbican-1),
+  "principal-patron": var(--color-donor-principal-patron),
+  "directors-circle": var(--color-donor-principal-patron),
+  "young-barbican": var(--color-brand-young-barbican-purple),
 );
 
 @mixin btn-renew-membership {

package/scss/mixins/buttons/custom/_select-form.scss

@@ -1,13 +1,24 @@
-@use "./manage-order" as *;
+@use "../slim" as *;
 
 @mixin btn-select-form {
-  @include btn-manage-order;
+  @include btn-slim;
 
   & {
-    justify-content: space-between;
+    background-color: var(--background-color-button-select-form);
+    color: var(--color-button-select-form);
+    border-width: var(--border-width-sm);
+    border-color: currentColor;
     width: 100%;
   }
 
+  &:hover,
+  &:focus-visible {
+    background-color: var(--background-color-button-select-form-focus);
+    border-color: var(--background-color-button-select-form-focus);
+    color: var(--color-button-select-form-focus);
+    outline-color: transparent;
+  }
+
   &[aria-expanded='true'] {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
@@ -17,8 +28,7 @@
     transform: scale(1);
   }
 
-  &:hover,
-  &:focus-visible {
+  svg {
     fill: currentColor;
   }
 }

package/scss/mixins/buttons/custom/_voucher-amount.scss

@@ -0,0 +1,18 @@
+@use "../../../mixins/buttons/outline" as *;
+@use "../custom/outline-primary" as *;
+
+@mixin btn-voucher-amount {
+  @include btn-outline-primary;
+
+  &:hover,
+  &:focus-visible {
+    outline-color: var(--color-brand-generic);
+    outline-offset: var(--outline-offset-lg);
+    outline-width: var(--border-width-sm);
+    outline-style: solid;
+  }
+
+  &.active {
+    @include outline-button-focus;
+  }
+}

package/scss/mixins/card/_membership.scss

@@ -1,61 +1,22 @@
 @use "../../mixins/breakpoints" as *;
 @use "inline" as *;
 
-$colors: (
-  "member": var(--color-brand-membership),
-  "member-plus": var(--color-brand-membership-35-darken),
-  "patron": var(--color-donor-patron),
-  "premier-patron": var(--color-donor-patron),
-  "principal-patron": var(--color-donor-principle),
-  "directors-circle": var(--color-donor-principle),
-  "young-barbican": var(--color-youngbarbican-1),
-);
-
-$gradients: (
-  "member-plus": linear-gradient(120deg, var(--color-brand-membership-35-darken) 20%, var(--color-brand-membership) 100%),
-  "patron": linear-gradient(120deg, var(--color-donor-patron) 60%, var(--color-donor-patron-light) 75%, var(--color-donor-patron) 90%),
-  "premier-patron": linear-gradient(120deg, var(--color-donor-patron) 60%, var(--color-donor-patron-light) 75%, var(--color-donor-patron) 90%),
-  "principal-patron": linear-gradient(120deg, var(--color-donor-principle) 60%, var(--color-donor-principle-light) 75%, var(--color-donor-principle) 90%),
-  "directors-circle": linear-gradient(120deg, var(--color-donor-principle) 60%, var(--color-donor-principle-light) 75%, var(--color-donor-principle) 90%),
-  "young-barbican": linear-gradient(120deg, var(--color-youngbarbican-1) 0%, var(--color-youngbarbican-2) 50%, var(--color-youngbarbican-3) 95%),
-);
-
 @mixin br-card--membership {
   & {
-    background-color: var(--color-black-60-lighten);
-    max-width: var(--width-title);
-    border-width: 0;
-    color: white;
+    background-image: var(--background-image-card-membership);
+    background-color: var(--background-color-card-membership);
+    border-color: var(--border-color-card-membership);
+    box-shadow: var(--box-shadow-card-membership);
+    max-width: var(--max-width-card-membership);
+    border-width: var(--border-width-sm);
+    color: var(--color-card-membership);
+    border-radius: 0.75rem;
+    border-style: solid;
+    margin-top: 1rem;
     width: 100%;
   }
 
   @include small-up {
     @include br-card--inline;
   }
-
-  @include small-down {
-    +.br-card.membership {
-      margin-top: var(--margin-md);
-    }
-  }
-
-  @each $name, $value in $colors {
-    &.#{$name} {
-      background-color: #{$value};
-    }
-  }
-
-  @each $name, $value in $gradients {
-    &.#{$name} {
-      background-image: #{$value};
-    }
-  }
-
-  .br-card-title {
-    font-size: var(--font-size-h4);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: bold;
-    overflow: hidden;
-  }
 }

package/scss/mixins/card/_qrcode.scss

@@ -1,20 +1,77 @@
 @use "../../mixins/breakpoints" as *;
 @use "inline" as *;
 
+$colors: (
+  "member": var(--color-brand-membership),
+  "member-plus": var(--color-donor-member-plus),
+  "patron": var(--color-donor-patron),
+  "premier-patron": var(--color-donor-patron),
+  "principal-patron": var(--color-donor-principal-patron),
+  "directors-circle": var(--color-donor-principal-patron),
+  "young-barbican": var(--color-brand-young-barbican),
+);
+
+$gradients: (
+  "member-plus": linear-gradient(var(--gradient-angle-membership), var(--gradient-member-plus)),
+  "patron": linear-gradient(var(--gradient-angle-membership), var(--gradient-patron)),
+  "premier-patron": linear-gradient(var(--gradient-angle-membership), var(--gradient-premier-patron)),
+  "principal-patron": linear-gradient(var(--gradient-angle-membership), var(--gradient-principal-patron)),
+  "directors-circle": linear-gradient(var(--gradient-angle-membership), var(--gradient-directors-circle)),
+  "young-barbican": linear-gradient(var(--gradient-angle-membership), var(--gradient-young-barbican)),
+);
+
 @mixin br-card--qrcode {
-  @include br-card--inline;
+  // @include br-card--inline;
+
+  @each $name, $value in $colors {
+    &.#{$name} {
+      background-color: #{$value};
+    }
+  }
+
+  @each $name, $value in $gradients {
+    &.#{$name} {
+      background-image: #{$value};
+    }
+  }
 
   & {
     border-color: currentColor;
   }
 
+  .br-card-body {
+    justify-content: center;
+    display: flex;
+  }
+
   .br-card-text {
-    margin-top: var(--margin-md);
-    width: var(--width-qrcode);
     word-wrap: break-word;
     text-align: center;
   }
 
+  .qrcode-title {
+    background-color: black;
+    border-radius: 1rem;
+    font-weight: bold;
+    padding: 4px 8px;
+    font-size: 14px;
+    color: white;
+  }
+
+  .qrcode-content {
+    border-radius: var(--border-radius-md);
+    background-color: white;
+    justify-content: center;
+    gap: var(--margin-md);
+    justify-self: center;
+    display: inline-grid;
+    padding: 1rem;
+
+    border-width: var(--border-width-sm);
+    border-color: currentColor;
+    border-style: solid;
+  }
+
   p+p {
     margin-top: var(--margin-xs);
   }

package/scss/mixins/input/_checkbox.scss

@@ -58,7 +58,7 @@
 
 @mixin br-form-checkbox--label {
   border-color: var(--color-black-25-lighten);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
   border-width: var(--border-width-sm);
   padding: var(--padding-md);
   background-color: white;

package/scss/mixins/input/_generic.scss

@@ -59,7 +59,7 @@
 
 @mixin generic-input-label($state: neutral) {
   border-color: var(--color-black-25-lighten);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
   border-width: var(--border-width-sm);
   padding-bottom: var(--padding-md);
   padding-left: var(--padding-xxxl);

package/scss/mixins/input/_select.scss

@@ -8,7 +8,7 @@
   border: var(--border-width-sm) solid var(--color-black-25-lighten);
   background-color: var(--color-black-5-lighten);
   background-position: right 0.75rem center;
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
   color: var(--color-black-60-lighten);
   background-size: 1rem 0.75rem;
   background-repeat: no-repeat;

package/scss/mixins/input/_text.scss

@@ -26,7 +26,7 @@
 @mixin text-input-defaults {
   background-color: var(--color-black-5-lighten);
   border-color: var(--color-black-25-lighten);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
   color: var(--color-black-60-lighten);
   padding: var(--padding-lg);
   border-width: var(--border-width-sm);

package/scss/mixins/table/_details.scss

@@ -27,7 +27,7 @@
     }
 
     @include medium-down {
-      border-radius: var(--border-radius-lg);
+      border-radius: var(--border-radius-md);
     }
   }
 

package/scss/mixins/table/_etickets.scss

@@ -31,7 +31,7 @@
     }
 
     @include medium-down {
-      border-radius: var(--border-radius-lg);
+      border-radius: var(--border-radius-md);
     }
   }
 

package/scss/mixins/table/_gifts.scss

@@ -27,7 +27,7 @@
 
     @include x-large-down {
       border-color: var(--color-black-25-lighten);
-      border-radius: var(--border-radius-lg);
+      border-radius: var(--border-radius-md);
       border-width: var(--border-width-sm);
       padding: var(--padding-lg);
       border-style: solid;

package/scss/mixins/table/_orders.scss

@@ -30,7 +30,7 @@
     }
 
     @include medium-down {
-      border-radius: var(--border-radius-lg);
+      border-radius: var(--border-radius-md);
     }
   }
 

package/scss/mixins/table/_preferences.scss

@@ -30,7 +30,7 @@
     }
 
     @include medium-down {
-      border-radius: var(--border-radius-lg);
+      border-radius: var(--border-radius-md);
     }
   }
 

package/scss/mixins/table/_tickets.scss

@@ -21,7 +21,7 @@
 
     @include small-down {
       border-color: var(--color-black-25-lighten);
-      border-radius: var(--border-radius-lg);
+      border-radius: var(--border-radius-md);
       border-width: var(--border-width-sm);
       padding: var(--padding-lg);
       border-style: solid;

package/scss/reset.scss

@@ -22,4 +22,8 @@ body {
   font-size: var(--font-size-body);
   color: var(--color-black-60-lighten);
   margin: 0;
+}
+
+svg {
+  display: block;
 }