barbican-reset 3.44.0 → 3.46.0

package/components/BrConfirmDone.vue

@@ -1,6 +1,6 @@
 <template>
   <br-card class="confirm-done">
-    <br-done-icon />
+    <br-done-icon class="margin-left-right-auto" />
     <br-card-title class="title">Done</br-card-title>
     <br-card-text v-if="$slots.default" class="margin-top-1">
       <slot />

package/components/BrConfirmEmail.vue

@@ -1,6 +1,6 @@
 <template>
   <br-card class="confirm-email">
-    <br-email-icon />
+    <br-email-icon class="margin-left-right-auto" />
     <br-card-title v-if="$slots.title" class="title">
       <slot name="title" />
     </br-card-title>

package/components/BrContainer.vue

@@ -18,6 +18,7 @@ const generateComponentClasses = computed(() => {
   let classnames = ['br-container']
 
   if (props.masthead) classnames.push('masthead')
+  if (props.noWrap) classnames.push('no-wrap')
 
   return classnames
 })
@@ -26,6 +27,7 @@ const generateOuterClasses = computed(() => {
   let classnames = ['br-container--outer']
 
   if (props.masthead) classnames.push('masthead')
+  if (props.noWrap) classnames.push('no-wrap')
 
   return classnames
 })
@@ -34,6 +36,7 @@ const generateInnerClasses = computed(() => {
   let classnames = ['br-container--inner']
 
   if (props.masthead) classnames.push('masthead')
+  if (props.noWrap) classnames.push('no-wrap')
   if (props.thin) classnames.push('thin')
   if (props.header) classnames.push('header')
   if (props.footer) classnames.push('footer')
@@ -42,21 +45,10 @@ const generateInnerClasses = computed(() => {
 })
 
 const props = defineProps({
-  masthead: {
-    type: Boolean,
-    default: false,
-  },
-  thin: {
-    type: Boolean,
-    default: false,
-  },
-  header: {
-    type: Boolean,
-    default: false,
-  },
-  footer: {
-    type: Boolean,
-    default: false,
-  },
+  masthead: Boolean,
+  thin: Boolean,
+  header: Boolean,
+  noWrap: Boolean,
+  footer: Boolean,
 })
 </script>

package/icons/B.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="br-icon b" width="23" height="32" viewBox="0 0 23 32" fill="white" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0H7.06279V11.6272C8.7444 10.1377 10.2819 9.56118 12.6361 9.56118C18.5939 9.56118 22.87 14.1736 22.87 20.5638C22.87 23.6868 21.7169 26.5695 19.795 28.5394C18.0654 30.3171 15.7111 31.182 12.8764 31.182C9.9936 31.182 8.31199 30.4613 6.77451 28.7316V30.4132H0V0ZM6.58232 20.3716C6.58232 23.3985 8.40808 25.4164 11.0987 25.4164C13.7892 25.4164 15.4709 23.5907 15.4709 20.5638C15.4709 17.4888 13.7892 15.567 11.0026 15.567C8.36003 15.615 6.58232 17.5368 6.58232 20.3716Z" />
+  </svg>
+</template>

package/icons/Barbican.vue

@@ -1,11 +1,14 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="br-icon wordmark"
-    viewBox="0 0 333 65"
-    height="31.23"
-    width="160">
-    <path
-      d="M0 0H14.7V24.2C18.2 21.1 21.4 19.9 26.3 19.9C38.7 19.9 47.6 29.5 47.6 42.8C47.6 49.3 45.2 55.3 41.2 59.4C37.6 63.1 32.7 64.9 26.8 64.9C20.8 64.9 17.3 63.4 14.1 59.8V63.3H0V0ZM13.7 42.4C13.7 48.7 17.5 52.9 23.1 52.9C28.7 52.9 32.2 49.1 32.2 42.8C32.2 36.4 28.7 32.4 22.9 32.4C17.4 32.5 13.7 36.5 13.7 42.4V42.4ZM83.1 60.5C79.3 64 76.6 65 70.8 65C64.2 65 59.4 63.2 55.7 59.3C51.7 55.1 49.6 49.3 49.6 42.6C49.6 29.4 58.3 20.2 70.6 20.2C76 20.2 79 21.4 83 25.2V21.6H97.1V63.6H83.1V60.5V60.5ZM64.9 43C64.9 49.3 68.4 53 74.2 53C79.8 53 83.5 48.9 83.5 42.6C83.5 36.6 79.9 32.5 74.4 32.5C68.9 32.5 64.9 36.9 64.9 43ZM101.2 21.5H115.3V26.8C118.4 22 121.5 20.3 126.6 20.3C127.6 20.3 128.2 20.4 131.7 20.8V34.1C130 33.6 129.1 33.6 127.9 33.6C120.1 33.6 116 37.8 116 45.8V63.5H101.3L101.2 21.5V21.5ZM134.2 0H148.9V24.2C152.4 21.1 155.6 19.9 160.5 19.9C172.9 19.9 181.8 29.5 181.8 42.8C181.8 49.3 179.4 55.3 175.4 59.4C171.8 63.1 167 64.9 161 64.9C155 64.9 151.5 63.4 148.3 59.8V63.3H134.2V0ZM147.9 42.4C147.9 48.7 151.7 52.9 157.3 52.9C162.9 52.9 166.4 49.1 166.4 42.8C166.4 36.4 162.9 32.4 157.1 32.4C151.6 32.5 147.9 36.5 147.9 42.4ZM200.2 9.3C200.2 13.8 196.6 17.5 192 17.5C187.5 17.5 183.9 13.9 183.9 9.3C183.9 4.8 187.5 1.2 192 1.2C196.6 1.2 200.2 4.8 200.2 9.3ZM184.7 21.5H199.4V63.5H184.7V21.5V21.5ZM236 61.6C229.9 64.6 227.7 65.1 222.6 65.1C216.8 65.1 212.2 63.6 209.1 60.4C204.9 56.4 202.6 50.1 202.6 43C202.6 29.2 211 19.7 223.3 19.7C228 19.7 231.2 20.6 236 23.5V38.2C232.5 34.1 230.4 32.8 226.8 32.8C221.4 32.8 218.2 36.4 218.2 42.3C218.2 48.1 221.5 51.7 226.7 51.7C230.1 51.7 232.5 50.4 236 47V61.6V61.6ZM271 60.5C267.2 64 264.5 65 258.7 65C252.1 65 247.3 63.2 243.6 59.3C239.6 55.1 237.5 49.3 237.5 42.6C237.5 29.4 246.2 20.2 258.5 20.2C263.9 20.2 266.9 21.4 270.9 25.2V21.6H285V63.6H270.9V60.5H271V60.5ZM252.8 43C252.8 49.3 256.3 53 262.1 53C267.7 53 271.4 48.9 271.4 42.6C271.4 36.6 267.8 32.5 262.3 32.5C256.8 32.5 252.8 36.9 252.8 43ZM289.1 21.5H303.6V26.3C307.3 21.5 310.6 19.9 316.6 19.9C323.1 19.9 328.6 22.5 331 26.9C332.3 29.2 332.9 31.8 332.9 35.1V63.4H318.2V40.3C318.2 34.7 316.1 32 311.7 32C307 32 303.8 35.3 303.8 40.3V63.4H289.1V21.5Z" />
+  <svg class="br-icon barbican" width="160" height="32" viewBox="0 0 160 32" fill="white" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0H7.06279V11.6272C8.7444 10.1377 10.2819 9.56118 12.6361 9.56118C18.5939 9.56118 22.87 14.1736 22.87 20.5638C22.87 23.6868 21.7169 26.5695 19.795 28.5394C18.0654 30.3171 15.7111 31.182 12.8764 31.182C9.9936 31.182 8.31199 30.4613 6.77451 28.7316V30.4132H0V0ZM6.58232 20.3716C6.58232 23.3985 8.40808 25.4164 11.0987 25.4164C13.7892 25.4164 15.4709 23.5907 15.4709 20.5638C15.4709 17.4888 13.7892 15.567 11.0026 15.567C8.36003 15.615 6.58232 17.5368 6.58232 20.3716Z" />
+    <path d="M39.9263 29.0679C38.1006 30.7495 36.8033 31.23 34.0167 31.23C30.8456 31.23 28.5394 30.3652 26.7617 28.4914C24.8398 26.4734 23.8309 23.6868 23.8309 20.4677C23.8309 14.1256 28.0109 9.70532 33.9206 9.70532C36.5151 9.70532 37.9564 10.2819 39.8783 12.1076V10.378H46.6528V30.5574H39.9263V29.0679ZM31.1819 20.6598C31.1819 23.6868 32.8635 25.4645 35.6502 25.4645C38.3408 25.4645 40.1185 23.4946 40.1185 20.4677C40.1185 17.5849 38.3889 15.615 35.7463 15.615C33.1038 15.615 31.1819 17.729 31.1819 20.6598Z" />
+    <path d="M48.6227 10.3299H55.3972V12.8764C56.8866 10.5702 58.3761 9.75337 60.8264 9.75337C61.3069 9.75337 61.5951 9.80142 63.2768 9.9936V16.3837C62.46 16.1435 62.0276 16.1435 61.451 16.1435C57.7034 16.1435 55.7335 18.1614 55.7335 22.0051V30.5093H48.6707L48.6227 10.3299Z" />
+    <path d="M64.478 0H71.5407V11.6272C73.2224 10.1377 74.7598 9.56118 77.1141 9.56118C83.0718 9.56118 87.3479 14.1736 87.3479 20.5638C87.3479 23.6868 86.1948 26.5695 84.273 28.5394C82.5433 30.3171 80.2371 31.182 77.3543 31.182C74.4716 31.182 72.7899 30.4613 71.2525 28.7316V30.4132H64.478V0ZM71.0603 20.3716C71.0603 23.3985 72.886 25.4164 75.5766 25.4164C78.2672 25.4164 79.9488 23.5907 79.9488 20.5638C79.9488 17.4888 78.2672 15.567 75.4805 15.567C72.838 15.615 71.0603 17.5368 71.0603 20.3716Z" />
+    <path d="M95.804 10.3299H88.7412V30.5093H95.804V10.3299Z" />
+    <path d="M92.2486 8.40808C94.4587 8.40808 96.1884 6.63037 96.1884 4.46829C96.1884 2.30621 94.4587 0.576553 92.2486 0.576553C90.0865 0.576553 88.3569 2.30621 88.3569 4.46829C88.3569 6.67841 90.0865 8.40808 92.2486 8.40808Z" />
+    <path d="M106.951 31.278C109.401 31.278 110.458 31.0378 113.389 29.5964V22.5817C111.707 24.2153 110.554 24.8399 108.921 24.8399C106.422 24.8399 104.837 23.1102 104.837 20.3235C104.837 17.4888 106.374 15.7591 108.969 15.7591C110.698 15.7591 111.707 16.3837 113.389 18.3536V11.2908C111.083 9.89751 109.545 9.46509 107.287 9.46509C101.377 9.46509 97.3415 14.0295 97.3415 20.6598C97.3415 24.0711 98.4466 27.098 100.464 29.0199C101.954 30.5574 104.164 31.278 106.951 31.278Z" />
+    <path d="M130.205 29.0679C128.379 30.7495 127.082 31.23 124.295 31.23C121.124 31.23 118.818 30.3652 117.04 28.4914C115.119 26.4734 114.11 23.6868 114.11 20.4677C114.11 14.1256 118.29 9.70532 124.199 9.70532C126.794 9.70532 128.235 10.2819 130.157 12.1076V10.378H136.932V30.5574H130.157V29.0679H130.205ZM121.461 20.6598C121.461 23.6868 123.142 25.4645 125.929 25.4645C128.62 25.4645 130.397 23.4946 130.397 20.4677C130.397 17.5849 128.668 15.615 126.025 15.615C123.383 15.615 121.461 17.729 121.461 20.6598Z" />
+    <path d="M145.868 10.3299H138.901V30.4613H145.964V19.3626C145.964 16.9603 147.502 15.3748 149.76 15.3748C151.874 15.3748 152.883 16.672 152.883 19.3626V30.4613H159.946V16.8642C159.946 15.2787 159.657 14.0295 159.033 12.9244C157.88 10.8104 155.237 9.56118 152.114 9.56118C149.231 9.56118 147.646 10.3299 145.868 12.6361V10.3299Z" />
   </svg>
 </template>
+

package/icons/Dots.vue

@@ -1,22 +1,8 @@
 <template>
-  <div ref="dots">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 14 14"
-      height="14"
-      width="14">
-      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z" />
-    </svg>
-
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 14 14"
-      height="14"
-      width="14">
-      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z" />
-    </svg>
-
+  <div ref="dots" class="dots" role="status" aria-label="Loading">
     <svg
+      v-for="n in 3"
+      :key="n"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 14 14"
       height="14"
@@ -28,12 +14,15 @@
 
 <script setup>
 import { gsap } from 'gsap'
-import { onMounted, useTemplateRef } from 'vue'
+import { onMounted, onUnmounted, useTemplateRef } from 'vue'
 
 const dots = useTemplateRef('dots')
 
+/** @type {gsap.core.Timeline | undefined} */
+let tl
+
 onMounted(() => {
-  const tl = gsap.timeline({ repeat: 9 })
+  if (!dots.value) return
 
   const duration = 0.3
 
@@ -42,9 +31,19 @@ onMounted(() => {
     { y: 0, duration },
   ]
 
+  tl = gsap.timeline({ repeat: -1 })
+
   tl.to(dots.value.children, {
     stagger: duration,
     keyframes,
   })
 })
+
+onUnmounted(() => tl?.kill())
 </script>
+
+<style scoped>
+  svg {
+    display: inline-block;
+  }
+</style>

package/icons/Menu.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="br-icon menu" width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 13V11.375H20V13H0ZM0 7.3125V5.6875H20V7.3125H0ZM0 1.625V0H20V1.625H0Z" />
+  </svg>
+</template>

package/icons.js

@@ -1,3 +1,4 @@
+export { default as BrBLogo } from './icons/B.vue'
 export { default as BrBackArrow } from './icons/BackArrow.vue'
 export { default as BrBarbicanLogo } from './icons/Barbican.vue'
 export { default as BrCartIcon } from './icons/Cart.vue'
@@ -14,3 +15,4 @@ export { default as BrAccountOrdersIcon } from './icons/AccountOrders.vue'
 export { default as BrAccountPaymentIcon } from './icons/AccountPayment.vue'
 export { default as BrAccountTicketIcon } from './icons/AccountTicket.vue'
 export { default as BrAccountPersonalIcon } from './icons/AccountPersonal.vue'
+export { default as BrMenuIcon } from './icons/Menu.vue'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "3.44.0",
+  "version": "3.46.0",
   "description": "Shared design system for Barbican projects, providing SCSS utilities, animations, icons, Vue components, and JS helpers for consistent styling and behaviour.",
   "main": "index.js",
   "exports": {

package/scss/_br-button.scss

@@ -114,6 +114,11 @@
   @include btn-exit-overlay-bg;
 }
 
+/// @group Buttons
+.btn.btn-mobile-menu {
+  @include btn-mobile-menu;
+}
+
 .btn {
   &.btn-video-login {
     @include btn-video-login;

package/scss/_br-container.scss

@@ -9,11 +9,16 @@
   padding-left: var(--padding-layout-sm);
 }
 
+.br-container--outer.no-wrap {
+  padding-right: var(--padding-lg);
+  padding-left: var(--padding-lg);
+}
+
 .br-container--outer.masthead {
   background-color: white;
 }
 
-.br-container--inner {
+.br-container--inner:not(.no-wrap) {  
   max-width: var(--width-layout-lg);
   margin: 0 auto;
 }

package/scss/_br-form-select.scss

@@ -47,6 +47,7 @@
 .br-form-select-link:hover {
   background-color: var(--background-color-form-select-link-focus);
   outline-offset: var(--outline-inset-lg);
+  outline-width: var(--border-width-sm);
   outline-color: inherit;
   outline-style: dashed;
 }

package/scss/_br-icon.scss

@@ -1,23 +1,19 @@
-.br-icon.wordmark {
-  display: block;
-}
+// .br-link.wordmark {
+//   display: block;
+//   fill: white;
+// }
 
-.br-link.wordmark {
-  display: block;
-  fill: white;
-}
+// .br-link.wordmark:focus,
+// .br-link.wordmark:hover {
+//   fill: var(--color-brand-generic);
+//   background-color: white;
+//   outline-color: white;
+//   outline-style: solid;
+//   outline-width: 4px;
 
-.br-link.wordmark:focus,
-.br-link.wordmark:hover {
-  fill: var(--color-brand-generic);
-  background-color: white;
-  outline-color: white;
-  outline-style: solid;
-  outline-width: 4px;
-
-  .br-icon.wordmark {
-    outline-color: white;
-    outline-style: solid;
-    outline-width: 1px;
-  }
-}
+//   .br-icon.wordmark {
+//     outline-color: white;
+//     outline-style: solid;
+//     outline-width: 1px;
+//   }
+// }

package/scss/atomic/_margins.scss

@@ -32,4 +32,9 @@ $iterations: (
     margin-right: #{$value}rem;
     margin-left: #{$value}rem;
   }
+}
+
+.margin-left-right-auto {
+  margin-right: auto;
+  margin-left: auto;
 }

package/scss/mixins/_br-form-radio.scss

@@ -103,12 +103,6 @@
 @mixin br-form-radio {
   display: inline-flex;
 
-  /// @TODO: block variant
-
-  // &:not(:last-child) {
-  //   margin-bottom: var(--margin-sm);
-  // } 
-
   .br-form-label {
     @include br-form-radio--label;
   }

package/scss/mixins/buttons/_custom.scss

@@ -1,6 +1,6 @@
-@use "../../mixins/focus" as *;
-@use "../../mixins/core" as *;
 @use "../../mixins/breakpoints" as *;
+@use "../../mixins/core" as *;
+@use "../../mixins/focus" as *;
 @use "../../functions" as *;
 
 @use "outline" as *;
@@ -22,86 +22,46 @@
 @forward "custom/invisible";
 @forward "custom/link";
 @forward "custom/manage-order";
-@forward "custom/select-form";
+@forward "custom/mobile-menu";
 @forward "custom/outline-alert-neutral";
 @forward "custom/outline-primary";
 @forward "custom/outline-secondary";
 @forward "custom/primary";
 @forward "custom/renew-membership";
 @forward "custom/secondary";
+@forward "custom/select-form";
 @forward "custom/summary";
 @forward "custom/voucher-amount";
 
-@mixin btn-returns {
-  @include btn-outline-primary($border-width: var(--border-width-lg));
-  @include btn-slim;
-
-  &:disabled {
-    @include btn-cancel-returns;
-  }
-}
-
-@mixin btn-cancel-returns {
-  @include btn-outline-secondary($border-width: var(--border-width-lg));
-  @include btn-slim;
-}
-
-@mixin btn-resale {
-  @include outline-button($padding: 0.625em, $font-size: var(--font-size-sm));
-}
-
-@mixin btn-outline-header {
-  @include outline-button($color: white, $background: var(--color-brand-generic), $border-width: var(--border-width-lg));
-}
-
-@mixin btn-cinema {
-  @include solid-button(var(--color-brand-cinema));
-}
-
-@mixin btn-info {
-  @include solid-button(var(--color-status-neutral));
-}
-
-@mixin btn-outline-info {
-  @include outline-button(var(--color-status-neutral));
+@mixin btn-add-membership-to-basket {
+  @include solid-button($background: var(--color-brand-membership));
 }
 
-@mixin btn-outline-cinema {
-  @include outline-button(var(--color-brand-cinema));
+@mixin btn-additional-information {
+  @include btn-outline-primary;
 }
 
-@mixin btn-remove-ticket {
-  @include small-down {
-    @include btn-secondary;
-    width: 100%;
-  }
-
-  @include small-up {
-    @include btn-link;
-  }
-}
+@mixin btn-basket {
+  @include solid-button($background: white,
+    $color: var(--color-brand-generic),
+    $padding: 0 var(--padding-md),
+    $margin: var(--margin-xs),
+    $line-height: var(--line-height-lg));
+  vertical-align: middle;
+  min-height: var(--min-height-button);
 
-@mixin btn-remove-gift {
-  @include x-large-down {
-    @include btn-secondary;
-    width: 100%;
+  @include focus {
+    @include btn-menu-focus;
   }
 
-  @include x-large-up {
-    @include btn-link;
+  @include data("clicked") {
+    @include btn-menu-focus;
   }
 }
 
-@mixin btn-video-login {
-  @include solid-button($background: white, $color: #0a0a0a);
-}
-
-@mixin btn-cta {
-  @include solid-button($background: var(--color-black-60-lighten));
-
-  & {
-    fill: white;
-  }
+@mixin btn-cancel-returns {
+  @include btn-outline-secondary($border-width: var(--border-width-lg));
+  @include btn-slim;
 }
 
 @mixin btn-carousel {
@@ -126,49 +86,15 @@
   }
 }
 
-@mixin btn-menu-focus($brand: var(--color-brand-generic)) {
-  background-color: white;
-  color: $brand;
-
-  path {
-    fill: currentColor;
-  }
-}
-
-@mixin btn-menu {
-  @include outline-button($color: white,
-    $background: var(--color-brand-generic),
-    $padding: 0 var(--padding-md),
-    $margin: var(--margin-xs),
-    $line-height: var(--line-height-lg));
-
-  vertical-align: middle;
-  min-height: var(--min-height-button);
-
-  @include focus {
-    @include btn-menu-focus;
-  }
-
-  @include data("clicked") {
-    @include btn-menu-focus;
-  }
+@mixin btn-cinema {
+  @include solid-button(var(--color-brand-cinema));
 }
 
-@mixin btn-basket {
-  @include solid-button($background: white,
-    $color: var(--color-brand-generic),
-    $padding: 0 var(--padding-md),
-    $margin: var(--margin-xs),
-    $line-height: var(--line-height-lg));
-  vertical-align: middle;
-  min-height: var(--min-height-button);
-
-  @include focus {
-    @include btn-menu-focus;
-  }
+@mixin btn-cta {
+  @include solid-button($background: var(--color-black-60-lighten));
 
-  @include data("clicked") {
-    @include btn-menu-focus;
+  & {
+    fill: white;
   }
 }
 
@@ -181,6 +107,25 @@
   }
 }
 
+@mixin btn-expand {
+  display: block;
+  width: 100%;
+}
+
+@mixin btn-expand--mobile {
+  @include small-down {
+    @include btn-expand;
+  }
+}
+
+@mixin btn-info {
+  @include solid-button(var(--color-status-neutral));
+}
+
+@mixin btn-login-to-book {
+  @include btn-primary;
+}
+
 @mixin btn-membership-pill {
   @include outline-button(var(--color-black-80-lighten), white);
 
@@ -205,30 +150,93 @@
   }
 }
 
-@mixin btn-priority-row {
-  @include btn-outline-primary;
+@mixin btn-menu {
+  @include outline-button($color: white,
+    $background: var(--color-brand-generic),
+    $padding: 0 var(--padding-md),
+    $margin: var(--margin-xs),
+    $line-height: var(--line-height-lg));
+
+  vertical-align: middle;
+  min-height: var(--min-height-button);
+
+  @include focus {
+    @include btn-menu-focus;
+  }
+
+  @include data("clicked") {
+    @include btn-menu-focus;
+  }
 }
 
-@mixin btn-login-to-book {
-  @include btn-primary;
+@mixin btn-menu-focus($brand: var(--color-brand-generic)) {
+  background-color: white;
+  color: $brand;
+
+  path {
+    fill: currentColor;
+  }
 }
 
-@mixin btn-sold-out {
-  @include btn-secondary;
-  pointer-events: none;
-  min-width: initial;
+@mixin btn-outline-cinema {
+  @include outline-button(var(--color-brand-cinema));
 }
 
-@mixin btn-add-membership-to-basket {
-  @include solid-button($background: var(--color-brand-membership));
+@mixin btn-outline-header {
+  @include outline-button($color: white, $background: var(--color-brand-generic), $border-width: var(--border-width-lg));
+}
+
+@mixin btn-outline-info {
+  @include outline-button(var(--color-status-neutral));
+}
+
+@mixin btn-priority-row {
+  @include btn-outline-primary;
+}
+
+@mixin btn-remove-gift {
+  @include x-large-down {
+    @include btn-secondary;
+    width: 100%;
+  }
+
+  @include x-large-up {
+    @include btn-link;
+  }
 }
 
 @mixin btn-remove-membership-from-basket {
   @include solid-button($background: var(--color-status-error));
 }
 
-@mixin btn-additional-information {
-  @include btn-outline-primary;
+@mixin btn-remove-ticket {
+  @include small-down {
+    @include btn-secondary;
+    width: 100%;
+  }
+
+  @include small-up {
+    @include btn-link;
+  }
+}
+
+@mixin btn-resale {
+  @include outline-button($padding: 0.625em, $font-size: var(--font-size-sm));
+}
+
+@mixin btn-returns {
+  @include btn-outline-primary($border-width: var(--border-width-lg));
+  @include btn-slim;
+
+  &:disabled {
+    @include btn-cancel-returns;
+  }
+}
+
+@mixin btn-sold-out {
+  @include btn-secondary;
+  pointer-events: none;
+  min-width: initial;
 }
 
 @mixin btn-toggle-password {
@@ -237,13 +245,6 @@
   padding: 0;
 }
 
-@mixin btn-expand {
-  display: block;
-  width: 100%;
+@mixin btn-video-login {
+  @include solid-button($background: white, $color: #0a0a0a);
 }
-
-@mixin btn-expand--mobile {
-  @include small-down {
-    @include btn-expand;
-  }
-}

package/scss/mixins/buttons/custom/_mobile-menu.scss

@@ -0,0 +1,13 @@
+@use "../../../mixins/buttons/custom/outline-secondary" as *;
+
+@mixin btn-mobile-menu {
+  @include btn-outline-secondary;
+
+  & {
+    justify-content: space-between;
+    border-color: white;
+    border-radius: 0;
+    color: black;
+    width: 100%;
+  }
+}

package/scss/mixins/card/_membership.scss

@@ -12,7 +12,6 @@
     color: var(--color-card-membership);
     border-radius: 0.75rem;
     border-style: solid;
-    margin-top: 1rem;
     width: 100%;
   }
 

package/scss/mixins/input/_text.scss

@@ -27,12 +27,13 @@
   background-color: var(--color-black-5-lighten);
   border-color: var(--color-black-25-lighten);
   border-radius: var(--border-radius-md);
+  border-width: var(--border-width-sm);
   color: var(--color-black-60-lighten);
   padding: var(--padding-lg);
-  border-width: var(--border-width-sm);
   font-family: inherit;
   border-style: solid;
   font-size: inherit;
+  min-width: 0;
 
   &:not(:disabled) {
     @include input-focus {

package/utils/datetimes.js

@@ -4,6 +4,7 @@ let stringFormats = {
   date: {
     sm: 'yyyy-LL-dd',
     md: 'ccc d LLL',
+    md_inc_year: 'ccc d LLL yyyy',
   },
   time: {
     sm: 'ha',
@@ -58,6 +59,12 @@ let formatSmReverseDate = (value, separator) => DateTime.fromISO(value).toFormat
  */
 let formatMdDate = (value) => DateTime.fromISO(value).toFormat(stringFormats.date.md)
 
+/**
+ * @param {string} value - ISO date string
+ * @returns {string} e.g. "Tue 24 Mar 2026"
+ */
+let formatMdIncYearDate = (value) => DateTime.fromISO(value).toFormat(stringFormats.date.md_inc_year)
+
 /**
  * @param {any} n - Day of month
  * @returns {string} e.g. "1st", "2nd", "3rd", "4th"
@@ -138,6 +145,7 @@ let formatDate = {
     }
   },
   md: (value) => formatMdDate(value),
+  md_inc_year: (value) => formatMdIncYearDate(value),
   lg: (value) => formatLgDate(value),
 }
 

package/scss/card/_membership-new.scss

@@ -1,32 +0,0 @@
-@use "../mixins/breakpoints" 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)),
-);
-
-@each $name, $value in $colors {
-  .br-card.membership-new.#{$name} {
-    background-color: #{$value};
-  }
-}
-
-@each $name, $value in $gradients {
-  .br-card.membership-new.#{$name} {
-    background-image: #{$value};
-  }
-}