barbican-reset 3.21.0 → 3.23.0

package/components/BrButton copy.vue

@@ -0,0 +1,112 @@
+<template>
+  <component
+    :class="generateComponentClasses"
+    :aria-busy="defineAriaBusy"
+    :aria-live="defineAriaLive"
+    @click="emit('click')"
+    :is="defineComponent"
+    :type="type"
+    :href="href"
+    :to="to">
+    <template v-if="state == 'default'">
+      <slot name="default">default</slot>
+    </template>
+    <template v-else-if="state == 'loading'">
+      <template v-if="$slots.loading">
+        <slot name="loading">loading</slot>
+      </template>
+      <dot-typing v-else />
+    </template>
+    <template v-else-if="state == 'loaded'">
+      <slot name="loaded">loaded</slot>
+    </template>
+    <template v-else-if="state == 'error'">
+      <slot name="error">error</slot>
+    </template>
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import DotTyping from '#components/BrButton/dot_typing.vue'
+
+const emit = defineEmits(['click'])
+
+const props = defineProps({
+  state: {
+    type: String,
+    default: 'default',
+  },
+  variant: {
+    type: String,
+    default: 'secondary',
+  },
+  type: {
+    type: [String, null],
+  },
+  to: {
+    type: [Object, null],
+  },
+  href: {
+    type: [String, null],
+  },
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+  slim: {
+    type: Boolean,
+    default: false,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const generateComponentClasses = computed(() => {
+  let classnames = ['btn', 'btn-' + props.variant]
+
+  if (props.inline) {
+    classnames.push('btn-inline')
+  }
+
+  if (props.slim) {
+    classnames.push('btn-slim')
+  }
+
+  if (props.active) {
+    classnames.push('btn-active')
+  }
+
+  return classnames
+})
+
+const defineComponent = computed(() => {
+  if (props.href) {
+    return 'a'
+  }
+
+  if (props.to) {
+    return 'router-link'
+  }
+
+  return 'button'
+})
+
+const defineAriaBusy = computed(() => {
+  if (props.to || props.href) {
+    return
+  }
+
+  return props.state == 'loading' ? 'true' : 'false'
+})
+
+const defineAriaLive = computed(() => {
+  if (props.to || props.href) {
+    return
+  }
+
+  return 'polite'
+})
+</script>

package/components/BrButton.vue

@@ -1,96 +1,115 @@
-<!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
-
 <template>
-  <button
-    :class="printClassNames"
-    @click="$emit('click')"
-    :aria-busy="loading"
-    aria-live="polite"
-    :type="type">
-    <remove-ticket v-if="variant === 'remove-ticket'" :state="state">
-      <template v-for="(index, name) in $slots" v-slot:[name]>
-        <slot :name="name" />
+  <component
+    :class="generateClassnames"
+    :aria-busy="defineAriaBusy"
+    :aria-live="defineAriaLive"
+    @click="emit('click')"
+    :is="defineComponent"
+    :type="type"
+    :to="to"
+    ref="button"
+    >
+    <template v-if="state == 'default'">
+      <slot name="default">default</slot>
+    </template>
+    <template v-else-if="state == 'loading'">
+      <template v-if="$slots.loading">
+        <slot name="loading">loading</slot>
       </template>
-    </remove-ticket>
+      <dot-typing v-else />
+    </template>
+    <template v-else-if="state == 'loaded'">
+      <slot name="loaded">loaded</slot>
+    </template>
+    <template v-else-if="state == 'error'">
+      <slot name="error">error</slot>
+    </template>
+  </component>
+</template>
 
-    <template v-else>
-      <template v-if="state === 'default'">
-        <template v-if="$slots.default">
-          <slot name="default" />
-        </template>
-        <template v-else>
-          {{ titleCase(state) }}
-        </template>
-      </template>
+<script setup>
+import { computed, useTemplateRef } from 'vue'
+import DotTyping from '#components/BrButton/dot_typing.vue'
+import BrLink from '#components/BrLink.vue'
 
-      <template v-else-if="state === 'loading'">
-        <template v-if="$slots.loading">
-          <slot name="loading" />
-        </template>
-        <dot-typing v-else />
-      </template>
+const emit = defineEmits(['click'])
 
-      <template v-else-if="state === 'loaded'">
-        <template v-if="$slots.loaded">
-          <slot name="loaded" />
-        </template>
-        <template v-else>
-          {{ titleCase(state) }}
-        </template>
-      </template>
+const button = useTemplateRef('button')
 
-      <template v-else-if="state === 'error'">
-        <template v-if="$slots.error">
-          <slot name="error" />
-        </template>
-        <template v-else>
-          {{ titleCase(state) }}
-        </template>
-      </template>
-    </template>
-  </button>
-</template>
+const defineComponent = computed(() => {
+  if (props.to && !props.disabled) return BrLink
+  return 'button'
+})
 
-<script>
-import RemoveTicket from '#components/BrButton/remove_ticket.vue'
-import DotTyping from '#components/BrButton/dot_typing.vue'
+const generateClassnames = computed(() => {
+  let classnames = ['btn', 'btn-' + props.variant]
+
+  if (props.inline) {
+    classnames.push('btn-inline')
+  }
 
-export default {
-  emits: ['click'],
-  props: {
-    state: {
-      type: String,
-      default: 'default',
-    },
-    variant: {
-      type: String,
-      default: 'secondary',
-    },
-    type: {
-      type: String,
-      default: 'button',
-    },
+  if (props.slim) {
+    classnames.push('btn-slim')
+  }
+
+  if (props.active) {
+    classnames.push('btn-active')
+  }
+
+  return classnames
+})
+
+const defineAriaBusy = computed(() => {
+  if (props.to) return
+  return props.state == 'loading' ? 'true' : 'false'
+})
+
+const defineAriaLive = computed(() => {
+  if (props.to) return
+  return 'polite'
+})
+
+const focusButton = () => {
+  if (defineComponent.value == 'button' && button) {
+    button.value.focus();
+  }
+}
+
+const props = defineProps({
+  state: {
+    type: String,
+    default: 'default',
   },
-  methods: {
-    titleCase(str) {
-      return str
-        .toLowerCase()
-        .split(' ')
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ')
-    },
+  variant: {
+    type: String,
+    default: 'secondary',
   },
-  computed: {
-    loading() {
-      return this.state === 'loading' ? 'true' : 'false'
-    },
-    printClassNames() {
-      return 'btn btn-' + this.variant
-    },
+  type: {
+    type: String,
   },
-  components: {
-    RemoveTicket,
-    DotTyping,
+  to: {
+    type: [Object, String],
   },
-}
-</script>
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+  slim: {
+    type: Boolean,
+    default: false,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+defineExpose({
+  focusButton
+})
+
+</script>

package/components/BrCard.vue

@@ -1,9 +1,5 @@
 <template>
-  <component
-    :class="generateClassnames"
-    :is="defineComponent"
-    :to="defineTo"
-    :href="defineHref">
+  <component :class="generateClassnames" :is="defineComponent" :to="defineTo">
     <div v-if="$slots.header" class="br-card-header">
       <slot name="header" />
     </div>
@@ -19,24 +15,46 @@
 </template>
 
 <script setup>
-import BrCardBody from '#components/BrCardBody.vue'
 import { computed } from 'vue'
+import BrCardBody from '#components/BrCardBody.vue'
+import BrLink from '#components/BrLink.vue'
+
+const defineComponent = computed(() => {
+  if (props.to && !props.disabled) return BrLink
+  return 'div'
+})
+
+const defineTo = computed(() => {
+  if (props.disabled) return
+  return props.to
+})
 
 const generateClassnames = computed(() => {
   let classnames = ['br-card']
 
   if (props.inline) classnames.push('inline')
   if (props.navcard) classnames.push('navcard')
-  if (props.navitem) classnames.push('navitem')
   if (props.navlink) classnames.push('navlink')
   if (props.ticket) classnames.push('ticket')
+  if (props.membership) classnames.push('membership')
+  if (props.qrcode) classnames.push('qrcode')
+
+  if (props.navitem) {
+    classnames.push('navitem')
+
+    if (props.disabled) {
+      classnames.push('disabled')
+    }
+  }
 
   if (
     !props.inline &&
     !props.navcard &&
     !props.navitem &&
     !props.navlink &&
-    !props.ticket
+    !props.ticket &&
+    !props.membership &&
+    !props.qrcode
   ) {
     classnames.push('default')
   }
@@ -44,34 +62,6 @@ const generateClassnames = computed(() => {
   return classnames
 })
 
-const defineComponent = computed(() => {
-  if (props.navcard || props.navitem || props.navlink) {
-    return props.to.startsWith('http') ? 'a' : 'router-link'
-  }
-
-  return 'div'
-})
-
-const defineTo = computed(() => {
-  if (props.navcard || props.navitem || props.navlink) {
-    if (!props.to.startsWith('http')) {
-      return { name: props.to }
-    }
-  }
-
-  return null
-})
-
-const defineHref = computed(() => {
-  if (props.navcard || props.navitem || props.navlink) {
-    if (props.to.startsWith('http')) {
-      return props.to
-    }
-  }
-
-  return null
-})
-
 const props = defineProps({
   inline: {
     type: Boolean,
@@ -93,6 +83,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  membership: {
+    type: Boolean,
+    default: false,
+  },
+  qrcode: {
+    type: Boolean,
+    default: false,
+  },
   center: {
     type: Boolean,
     default: false,
@@ -102,8 +100,11 @@ const props = defineProps({
     default: false,
   },
   to: {
-    type: String,
-    default: '',
+    type: [Object, String],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
   },
 })
 </script>

package/components/BrCardTearoff.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="br-card-tearoff">
+    <br-card-body>
+      <slot>Card tearoff</slot>
+    </br-card-body>
+  </div>
+</template>
+
+<script setup>
+import BrCardBody from '#components/BrCardBody.vue'
+</script>

package/components/BrDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="br-details">
-    <br-button variant="br-summary" @click="update">
+    <br-button variant="summary" @click="update">
       <div class="br-summary-content">
         <slot name="title">
           <br-card-title>Title goes here</br-card-title>
@@ -26,30 +26,14 @@ const props = defineProps({
   },
 })
 
-const update = () => emit('update', !props.open)
+const update = () => emit('update', { open: !props.open })
 </script>
 
 <style lang="scss" scoped>
 @use '#styles/helpers' as *;
 
-.btn-br-summary {
-  @include btn-invisible;
-
-  & {
-    justify-content: space-between;
-    align-items: center;
-    color: inherit;
-    width: 100%;
-  }
-}
-
-.btn-br-summary {
-  &:focus,
-  &:hover {
-    .br-summary-icon {
-      outline-style: dashed;
-    }
-  }
+.br-summary-content {
+  text-align: left;
 }
 
 .br-summary-icon {

package/components/BrLink.vue

@@ -0,0 +1,22 @@
+<template>
+  <a v-if="isExternal" :href="to">
+    <slot />
+  </a>
+  <router-link v-else :to="to">
+    <slot />
+  </router-link>
+</template>
+
+<script setup>
+// https://vueschool.io/lessons/extending-router-link-for-external-urls
+
+import { computed } from 'vue'
+
+const isExternal = computed(() => typeof props.to == 'string')
+
+const props = defineProps({
+  to: {
+    type: Object || String,
+  },
+})
+</script>

package/components/BrWrap.vue

@@ -10,9 +10,17 @@ import { computed } from 'vue'
 const generateComponentClasses = computed(() => {
   let classnames = ['br-wrap']
 
-  if (props.navcard) classnames.push('navcard')
+  if (props.navcard) {
+    classnames.push('navcard')
+  }
 
-  if (!props.navcard) classnames.push('default')
+  if (props.cluster) {
+    classnames.push('cluster')
+  }
+
+  if (!props.navcard && !props.cluster) {
+    classnames.push('default')
+  }
 
   return classnames
 })
@@ -22,5 +30,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  cluster: {
+    type: Boolean,
+    default: false,
+  },
 })
 </script>

package/icons/back_arrow.vue

@@ -1,3 +1,11 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16"><path d="M16,7H3.83L9.42,1.41l-1.42-1.41L0,8l8,8,1.41-1.41-5.58-5.59h12.17v-2Z" fill="currentColor" /></svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16">
+    <path
+      d="M16,7H3.83L9.42,1.41l-1.42-1.41L0,8l8,8,1.41-1.41-5.58-5.59h12.17v-2Z"
+      fill="currentColor" />
+  </svg>
 </template>

package/index.js

@@ -7,6 +7,7 @@ import BrCardBody from '#components/BrCardBody.vue'
 import BrCardText from '#components/BrCardText.vue'
 import BrCardTitle from '#components/BrCardTitle.vue'
 import BrCardSubtitle from '#components/BrCardSubtitle.vue'
+import BrCardTearoff from '#components/BrCardTearoff.vue'
 
 import BrCollapseButton from '#components/BrCollapse/Button.vue'
 import BrCollapseContent from '#components/BrCollapse/Content.vue'
@@ -54,6 +55,7 @@ export {
   BrCardSubtitle,
   BrCardText,
   BrCardTitle,
+  BrCardTearoff,
   BrCollapseButton,
   BrCollapseContent,
   BrConfirmDone,

package/package.json

@@ -137,5 +137,5 @@
     "style:patterns": "cd patterns && gulp build:css",
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
-  "version": "3.21.0"
+  "version": "3.23.0"
 }

package/scripts/helpers/formatKebabCase.js

@@ -7,5 +7,5 @@
 
 export default function (value = '') {
   value = String(value)
-  return value.toLowerCase().split(' ').join('-')
+  return value.replace("'", '').toLowerCase().split(' ').join('-')
 }

package/scss/_atomic.scss

@@ -1,8 +1,10 @@
+@use "mixins/breakpoints" as *;
 @use "mixins/core" as *;
 @use "atomic/colors";
 @use "atomic/font-sizes";
 @use "atomic/font-weights";
 @use "atomic/margins";
+@use "atomic/max-widths";
 @use "atomic/min-heights";
 @use "atomic/min-widths";
 @use "atomic/paddings";
@@ -26,7 +28,20 @@
   width: 100%;
 }
 
-/// Class for visually hiding markup, while still allowing screen readers to parse the content
 .sr-only {
   @include sr-only;
+}
+
+.white-space-nowrap {
+  white-space: nowrap;
+}
+
+.vertical-align-middle {
+  vertical-align: middle;
+}
+
+.medium-down {
+  @include large-up {
+    display: none;
+  }
 }

package/scss/_br-button.scss

@@ -1,6 +1,10 @@
 @use "mixins/focus" as *;
 @use "mixins/buttons" as *;
 
+button.btn:active {
+  transform: var(--scale-click);
+}
+
 /// Button component setup class. 
 /// Used in combination with a button style class
 /// @group Buttons
@@ -213,8 +217,28 @@
     @include btn-toggle-password;
   }
 
-  &.btn-see-tickets-info {
-    @include btn-see-tickets-info;
+  &.btn-manage-order {
+    @include btn-manage-order;
+  }
+
+  &.btn-add-to-wallet {
+    @include btn-add-to-wallet;
+  }
+
+  &.btn-outline-alert-neutral {
+    @include btn-outline-alert-neutral;
+  }
+
+  &.btn-navcard {
+    @include btn-navcard;
+  }
+
+  &.btn-summary {
+    @include btn-summary;
+  }
+
+  &.btn-slim {
+    @include btn-slim;
   }
 
   // modifyers

package/scss/{card/index.scss → _br-card.scss}

@@ -1,14 +1,4 @@
-@use "../mixins/br-card" as *;
-
-@use "block";
-@use "confirm";
-@use "login";
-@use "membership";
-@use "membership-new";
-@use "password";
-@use "related";
-@use "slim";
-@use "video-help";
+@use "mixins/br-card" as *;
 
 .br-card {
   @include br-card;
@@ -26,6 +16,10 @@
   @include br-card-subtitle;
 }
 
+.br-card-subtitle+.br-card-subtitle {
+  margin-top: var(--margin-xs);
+}
+
 .br-card-body {
   @include br-card-body;
 }
@@ -36,4 +30,12 @@
 
 .br-card-footer {
   @include br-card-footer;
+}
+
+.br-card-tearoff {
+  @include br-card-tearoff;
+}
+
+.br-card-text {
+  @include br-card-text;
 }

package/scss/_br-wrap.scss

@@ -14,4 +14,13 @@
     grid-template-columns: repeat(2, 1fr);
     gap: var(--gap-lg);
   }
+}
+
+.br-wrap.cluster {
+  margin: var(--margin-wrap-xs);
+}
+
+.br-wrap.cluster>* {
+  margin: var(--margin-xs);
+  vertical-align: middle;
 }

package/scss/_variables.scss

@@ -140,7 +140,7 @@
   --font-size-h1: 2.25rem;
   --font-size-h2: 2rem;
   --font-size-h3: 1.75rem;
-  --font-size-h4: 1.5rem;
+  --font-size-h4: 1.375rem;
   --font-size-h5: 1.25rem;
   --font-size-h6: 1rem;
   --font-size-sm: 0.875rem;
@@ -153,16 +153,16 @@
   --line-height-sm: 1.15;
   --line-height-md: 1.35;
   --line-height-button-menu: 2.375rem;
-  --margin-xs: 0.25rem;
+  --margin-xs: 0.3125rem;
   --margin-sm: 0.5rem;
   --margin-md: 0.75rem;
   --margin-lg: 1rem;
   --margin-xl: 1.5rem;
   --margin-xxl: 2rem;
   --margin-xxxl: 2.5rem;
-  --margin-wrap-sm: calc(var(--margin-xs) * -1);
-  --margin-wrap-md: calc(var(--margin-sm) * -1);
-  --margin-wrap-lg: calc(var(--margin-md) * -1);
+  --margin-wrap-xs: calc(var(--margin-xs) * -1);
+  --margin-wrap-sm: calc(var(--margin-sm) * -1);
+  --margin-wrap-md: calc(var(--margin-md) * -1);
   --min-height-button: 2.5rem;
   --min-height-iframe-sm: 27.5rem;
   --min-height-iframe-lg: 36.875rem;
@@ -189,7 +189,7 @@
   --width-layout-sm: 50rem;
   --width-layout-md: 60rem;
   --width-layout-lg: 75rem;
-  --width-qr: 6.25rem;
+  --width-qrcode: 9.5rem;
 }
 
 /// @deprecated $br-input-border-color => var(--color-black-25-lighten);

package/scss/atomic/_max-widths.scss

@@ -0,0 +1,29 @@
+$iterations: (
+  "0": 0,
+  "0-5": 0.5,
+  "1": 1,
+  "1-5": 1.5,
+  "2": 2,
+  "2-5": 2.5,
+  "3": 3,
+  "3-5": 3.5,
+  "4": 4,
+  "4-5": 4.5,
+  "5": 5,
+  "5-5": 5.5,
+  "6": 6,
+  "6-5": 6.5,
+  "7": 7,
+  "7-5": 7.5,
+  "8": 8,
+  "8-5": 8.5,
+  "9": 9,
+  "9-5": 9.5,
+  "10": 10,
+);
+
+@each $name, $value in $iterations {
+  .max-width-#{$name} {
+    max-width: #{$value}rem;
+  }
+}

package/scss/index.scss

@@ -3,6 +3,7 @@
 
 @use "br-alert";
 @use "br-button";
+@use "br-card";
 @use "br-container";
 @use "br-footer";
 @use "br-form-checkbox";
@@ -22,8 +23,6 @@
 @use "br-table-header";
 @use "br-wrap";
 
-@use "card";
-@use "card-deck";
 @use "city-of-london";
 @use "close-icon";
 @use "form";

package/scss/mixins/_br-card.scss

@@ -5,6 +5,8 @@
 @use "card/navlink" as *;
 @use "card/navitem" as *;
 @use "card/ticket" as *;
+@use "card/membership" as *;
+@use "card/qrcode" as *;
 
 @mixin br-card {
   border-color: var(--color-black-25-lighten);
@@ -38,6 +40,14 @@
     @include br-card--ticket;
   }
 
+  &.membership {
+    @include br-card--membership;
+  }
+
+  &.qrcode {
+    @include br-card--qrcode;
+  }
+
   iframe {
     min-height: var(--min-height-iframe-lg);
 
@@ -72,7 +82,11 @@
 }
 
 @mixin br-card-subtitle {
-  font-size: var(--font-size-h6);
+  font-size: var(--font-size-h5);
+
+  @include medium-up {
+    font-size: var(--font-size-h4);
+  }
 }
 
 @mixin br-card-body {
@@ -110,4 +124,15 @@
   .br-card-body {
     @include br-card-body;
   }
+}
+
+@mixin br-card-tearoff {
+  border-top-color: var(--color-black-25-lighten);
+  border-top-width: var(--border-width-sm);
+  border-top-style: dashed;
+}
+
+@mixin br-card-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
 }

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

@@ -35,7 +35,7 @@
   }
 
   .content.radios {
-    margin: var(--margin-wrap-sm);
+    margin: var(--margin-wrap-xs);
   }
 
   .content>fieldset {

package/scss/mixins/_buttons.scss

@@ -1,5 +1,6 @@
 @forward "buttons/setup";
 @forward "buttons/outline";
 @forward "buttons/solid";
+@forward "buttons/slim";
 @forward "buttons/custom";
 @forward "buttons/spektrix";

package/scss/mixins/_core.scss

@@ -8,7 +8,7 @@
     @include inline-block;
 
     & {
-      margin-right: var(--margin-wrap-sm);
+      margin-right: var(--margin-wrap-xs);
       height: 100%;
       content: "";
     }

package/scss/mixins/buttons/_custom.scss

@@ -1,22 +1,30 @@
 @use "../../mixins/focus" as *;
 @use "../../mixins/core" as *;
 @use "../../mixins/breakpoints" as *;
-@use "../../mixins/buttons/solid" as *;
-@use "../../mixins/buttons/outline" as *;
-@use "../../mixins/buttons/setup" as *;
 @use "../../functions" as *;
+
+@use "outline" as *;
+@use "setup" as *;
+@use "slim" as *;
+@use "solid" as *;
+
 @use "custom/outline-primary" as *;
 @use "custom/outline-secondary" as *;
 @use "custom/primary" as *;
 @use "custom/secondary" as *;
 
+@forward "custom/add-to-wallet";
 @forward "custom/exit-overlay";
+@forward "custom/invisible";
+@forward "custom/manage-order";
+@forward "custom/navcard";
+@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/see-tickets-info";
+@forward "custom/summary";
 
 @mixin link-button($color: inherit,
   $background: transparent,
@@ -41,7 +49,7 @@
   @include solid-button($padding: 0.75em);
   white-space: nowrap;
 
-  @include disabled {
+  &:disabled {
     @include btn-outline-secondary;
   }
 }
@@ -239,17 +247,6 @@
   }
 }
 
-@mixin btn-invisible {
-  background-color: transparent;
-  color: inherit;
-  border: none;
-  padding: 0;
-
-  @include focus {
-    box-shadow: none;
-  }
-}
-
 @mixin btn-membership-pill {
   @include outline-button(var(--color-black-80-lighten), white);
 

package/scss/mixins/buttons/_setup.scss

@@ -1,63 +1,25 @@
-@mixin disabled {
-
-  &:disabled,
-  &.disabled {
-    @content;
-  }
-}
-
-@mixin small-button {
-  padding: var(--padding-sm);
-  font-size: var(--font-size-sm);
-}
-
-@mixin setup-slim-button {
-  padding: var(--padding-md);
-}
-
-@mixin setup-large-button {
-  padding-bottom: var(--padding-lg);
-  padding-top: var(--padding-lg);
-  font-size: 1.125rem;
-}
-
 @mixin setup-button {
   border-radius: var(--border-radius-lg);
   line-height: var(--line-height-xs);
-  padding: var(--padding-lg);
   font-size: var(--font-size-body);
+  border-color: currentColor;
+  padding: var(--padding-lg);
+  justify-content: center;
+  vertical-align: middle;
   text-decoration: none;
   font-family: inherit;
+  display: inline-flex;
+  border-style: solid;
+  align-items: center;
   text-align: center;
+  gap: var(--gap-sm);
   font-weight: bold;
   transition: none;
   cursor: pointer;
-
-  justify-content: center;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--gap-sm);
+  color: inherit;
 
   &:focus {
     box-shadow: none;
     outline: none;
   }
-
-  &[slim] {
-    @include setup-slim-button;
-  }
-
-  &[large] {
-    @include setup-large-button;
-  }
-
-  @include disabled {
-    opacity: 1; // override bootstrap
-  }
-}
-
-// @mixin flex-button($gap: var(--gap-sm)) {
-//   display: inline-flex;
-//   align-items: center;
-//   gap: $gap;
-// }
+}

package/scss/mixins/buttons/_slim.scss

@@ -0,0 +1,3 @@
+@mixin btn-slim {
+  padding: var(--padding-md);
+}

package/scss/mixins/buttons/custom/_add-to-wallet.scss

@@ -0,0 +1,12 @@
+@mixin btn-add-to-wallet {
+  border-width: var(--border-width-sm);
+  color: var(--color-black-80-lighten);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-black-80-lighten);
+    border-color: var(--color-black-80-lighten);
+    color: white;
+  }
+}

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

@@ -0,0 +1,10 @@
+@mixin btn-invisible {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+
+  &:focus,
+  &:hover {
+    box-shadow: none;
+  }
+}

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

@@ -0,0 +1,11 @@
+@mixin btn-manage-order {
+  border-width: var(--border-width-sm);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-brand-generic-15-lighten);
+    border-color: var(--color-brand-generic-90-darken);
+    color: var(--color-brand-generic-90-darken);
+  }
+}

package/scss/mixins/buttons/custom/_navcard.scss

@@ -0,0 +1,32 @@
+@use "../slim" as *;
+
+@mixin btn-tint {
+  background-color: var(--color-brand-generic-15-lighten);
+  color: var(--color-brand-generic-90-darken);
+  border-color: currentColor;
+}
+
+@mixin btn-navcard {
+  @include btn-slim;
+
+  & {
+    border-width: var(--border-width-sm);
+    background-color: white;
+  }
+
+  &.btn-active {
+    @include btn-tint;
+  }
+
+  &.btn-active:hover,
+  &.btn-active:focus {
+    background-color: var(--color-brand-generic);
+    border-color: var(--color-brand-generic);
+    color: white;
+  }
+
+  &:not(.btn-active):hover,
+  &:not(.btn-active):focus {
+    @include btn-tint;
+  }
+}

package/scss/mixins/buttons/custom/_outline-alert-neutral.scss

@@ -0,0 +1,10 @@
+@mixin btn-outline-alert-neutral {
+  border-width: var(--border-width-sm);
+  color: var(--color-status-neutral);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-status-neutral-10-lighten);
+  }
+}

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

@@ -13,15 +13,14 @@ $iterations: (
 @mixin btn-renew-membership {
   @include outline-button($color: white, $background: transparent);
 
-  &:focus, &:hover {
+  &:focus,
+  &:hover {
+    color: var(--color-black-60-lighten);
+
     @each $name, $value in $iterations {
       &.#{$name} {
         color: #{$value};
       }
     }
   }
-
-  &:active {
-    transform: scale(0.98);
-  }
 }

package/scss/mixins/buttons/custom/_summary.scss

@@ -0,0 +1,19 @@
+@use "invisible" as *;
+
+@mixin btn-summary {
+  @include btn-invisible;
+
+  & {
+    justify-content: space-between;
+    font-weight: inherit;
+    align-items: center;
+    width: 100%;
+  }
+
+  &:hover,
+  &:focus {
+    .br-summary-icon {
+      outline-style: dashed;
+    }
+  }
+}

package/scss/mixins/card/_inline.scss

@@ -1,4 +1,3 @@
 @mixin br-card--inline {
-  margin: var(--margin-sm);
   display: inline-block;
 }

package/scss/{card → mixins/card}/_membership.scss

@@ -1,4 +1,5 @@
-@use "../mixins/breakpoints" as *;
+@use "../../mixins/breakpoints" as *;
+@use "inline" as *;
 
 $colors: (
   "member": var(--color-brand-membership),
@@ -19,34 +20,43 @@ $gradients: (
   "young-barbican": linear-gradient(120deg, var(--color-youngbarbican-1) 0%, var(--color-youngbarbican-2) 50%, var(--color-youngbarbican-3) 95%),
 );
 
-.br-card.membership {
-  background-color: var(--color-black-60-lighten);
-  min-height: 12.75rem;
-  border-width: 0;
-  color: white;
-
-  @include small-up {
+@mixin br-card--membership {
+  & {
+    background-color: var(--color-black-60-lighten);
     max-width: var(--width-layout-xs);
-    margin: var(--margin-xs);
-    display: inline-block;
+    min-height: 12.75rem;
+    border-width: 0;
+    color: white;
     width: 100%;
   }
-}
 
-.br-card.membership+.br-card.membership {
   @include small-up {
-    margin-top: 0;
+    @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 $colors {
-  .br-card.membership.#{$name} {
-    background-color: #{$value};
+  @each $name, $value in $gradients {
+    &.#{$name} {
+      background-image: #{$value};
+    }
   }
-}
 
-@each $name, $value in $gradients {
-  .br-card.membership.#{$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/_navitem.scss

@@ -13,7 +13,7 @@
     transform: scale(1);
   }
 
-  &.router-link-exact-active {
+  &.disabled {
     outline-offset: calc(var(--border-width-sm) * -1);
     background-color: var(--color-brand-generic);
     outline-color: var(--color-brand-generic);
@@ -24,7 +24,15 @@
     color: white;
   }
 
-  &:not(.router-link-active):hover {
+  &.router-link-active:not(.router-link-exact-active) {
+    background-color: var(--color-brand-generic-15-lighten);
+    color: var(--color-brand-generic-90-darken);
+    outline-color: var(--color-brand-generic);
+    text-decoration: underline;
+    border-color: currentColor;
+  }
+
+  &:not(.disabled):hover {
     color: var(--color-brand-generic-90-darken);
     outline-color: var(--color-brand-generic);
     text-decoration: underline;

package/scss/mixins/card/_qrcode.scss

@@ -0,0 +1,21 @@
+@use "../../mixins/breakpoints" as *;
+@use "inline" as *;
+
+@mixin br-card--qrcode {
+  @include br-card--inline;
+
+  & {
+    border-color: currentColor;
+  }
+
+  .br-card-text {
+    margin-top: var(--margin-md);
+    width: var(--width-qrcode);
+    word-wrap: break-word;
+    text-align: center;
+  }
+
+  p+p {
+    margin-top: var(--margin-xs);
+  }
+}

package/scss/_card-deck.scss

@@ -1,26 +0,0 @@
-@use "mixins/breakpoints";
-
-.card-deck {
-  justify-content: center;
-  display: grid;
-  gap: var(--gap-xl);
-
-  @include breakpoints.medium-up {
-    align-items: flex-start;
-    grid-auto-flow: column;
-  }
-
-  .br-card {
-    max-width: var(--width-title);
-    margin-top: 0;
-  }
-
-  .br-card-title {
-    font-size: var(--font-size-h3);
-  }
-
-  .br-card-img {
-    border-radius: var(--border-radius-lg);
-    margin-top: var(--margin-lg);
-  }
-}

package/scss/mixins/buttons/custom/_see-tickets-info.scss

@@ -1,18 +0,0 @@
-@use "outline-secondary" as *;
-
-@mixin btn-see-tickets-info {
-  @include btn-outline-secondary;
-
-  & {
-    margin-top: var(--margin-lg);
-    padding: var(--padding-md);
-    text-align: left;
-
-    &:hover,
-    &:focus {
-      background-color: var(--color-brand-generic-15-lighten);
-      border-color: var(--color-brand-generic-90-darken);
-      color: var(--color-brand-generic-90-darken);
-    }
-  }
-}