barbican-reset 2.53.0 → 2.55.0

package/scss/helpers/mixins/_buttons.scss

@@ -11,7 +11,7 @@
   vertical-align: baseline;
   padding: $padding;
   border-radius: 0;
-  font-weight: 400;
+  font-weight: normal;
   text-align: left;
   color: $color;
   border: none;
@@ -122,7 +122,7 @@
 
 @mixin btn-video-help {
   @include link-button($padding: 1.25em, $background: $c-grey-l96);
-  @include fontfamily-black;
+  font-weight: bold;
   width: 100%;
 
   @include focus {
@@ -280,6 +280,7 @@
 
 @mixin btn-invisible {
   color: inherit;
+  border: none;
   padding: 0;
 
   @include focus {

package/scss/helpers/mixins/_headings.scss

@@ -1,7 +1,7 @@
 /// Generic margin/font weight reset for title headings
 /// @param {String} $margin [0] - pixel value 
 @mixin br-heading($margin: 0) {
-  @include fontfamily-black;
+  font-weight: bold;
   margin: $margin;
 }
 

package/scss/helpers/mixins/buttons/_setup.scss

@@ -1,5 +1,4 @@
 @mixin disabled {
-
   &:disabled,
   &.disabled {
     @content;
@@ -22,12 +21,14 @@
 }
 
 @mixin setup-button {
-  @include fontfamily-black;
   border-radius: $br-border-radius-lg;
   padding: $padding-button-lg;
   text-decoration: none;
+  font-family: inherit;
   font-size: 1.0625rem;
+  display: inline-grid;
   text-align: center;
+  font-weight: bold;
   transition: none;
   cursor: pointer;
   line-height: 1;
@@ -50,20 +51,8 @@
   }
 }
 
-// deprecated: @mixin display-button
-
 @mixin flex-button($gap: 1rem) {
   display: inline-flex;
   align-items: center;
   gap: $gap;
-}
-
-@mixin inline-block-button() {
-  vertical-align: middle;
-  display: inline-block;
-
-  >* {
-    vertical-align: middle;
-    display: inline-block;
-  }
 }

package/scss/helpers/mixins/index.scss

@@ -34,7 +34,6 @@
 @import "core";
 @import "festival";
 @import "focus";
-@import "font";
 @import "headings";
 @import "input";
 @import "loading";

package/scss/helpers/mixins/input/_generic.scss

@@ -59,7 +59,7 @@
   border-radius: $br-border-radius-lg;
   border: 1px solid $c-grey-l65;
   background-color: $br-white;
-  font-weight: 400;
+  font-weight: normal;
   display: block;
 
   @if $state !=disabled {

package/scss/helpers/mixins/input/_radio.scss

@@ -15,7 +15,7 @@
   }
 
   label {
-    @include fontfamily-light;
     display: inline-block;
+    font-weight: normal;
   }
 }

package/scss/helpers/mixins/input/_select.scss

@@ -12,7 +12,7 @@
   line-height: 1.375rem;
   color: $c-grey-l21;
   font-size: inherit;
-  font-weight: 400;
+  font-weight: normal;
   transition: none;
   appearance: none;
   display: block;

package/scss/helpers/mixins/table/_basket.scss

@@ -1,37 +1,36 @@
-
 @mixin basket-table {
   tr {
     @include table-row;
     justify-content: space-between;
-    display: flex;  
+    display: flex;
     gap: 0.75rem;
 
     &:last-child {
       padding-bottom: 0;
     }
-  
+
     &.promo {
       padding-bottom: 1rem;
     }
-  
+
     &.donation {
       @include basket-row-grid;
       padding-bottom: 1rem;
       padding-top: 1rem;
     }
-  
+
     &.total {
-      @include fontfamily-black;
       font-size: $h4-font-size;
       border-bottom: none;
+      font-weight: bold;
     }
-  
+
     &.continue {
       border-bottom: none;
-  
+
       td {
         width: 100%;
-      } 
+      }
     }
   }
 }

package/scss/helpers/mixins/table/_details.scss

@@ -1,8 +1,8 @@
 @mixin details-table {
   thead {
-    @include fontfamily-black;
     background-color: $c-grey-l96;
     margin-bottom: 1rem;
+    font-weight: bold;
     display: block;
 
     @include medium-down {

package/scss/helpers/mixins/table/_etickets.scss

@@ -1,8 +1,8 @@
 @mixin etickets-table {
   thead {
-    @include fontfamily-black;
     background-color: $c-grey-l96;
     margin-bottom: 1rem;
+    font-weight: bold;
     display: block;
 
     @include medium-down {

package/scss/helpers/mixins/table/_gifts.scss

@@ -6,7 +6,7 @@
   }
 
   th {
-    @include fontfamily-black;
+    font-weight: bold;
   }
 
   tr {

package/scss/helpers/mixins/table/_orders.scss

@@ -1,8 +1,8 @@
 @mixin orders-table($columns) {
   thead {
-    @include fontfamily-black;
     background-color: $c-grey-l96;
     margin-bottom: 1rem;
+    font-weight: bold;
     display: block;
 
     @include medium-down {

package/scss/helpers/mixins/table/_preferences.scss

@@ -1,8 +1,8 @@
 @mixin preferences-table {
   thead {
-    @include fontfamily-black;
     background-color: $c-grey-l96;
     margin-bottom: 1rem;
+    font-weight: bold;
     display: block;
 
     @include medium-down {

package/scss/helpers/mixins/table/_tickets.scss

@@ -1,6 +1,6 @@
 @mixin tickets-table {
   th {
-    @include fontfamily-black;
+    font-weight: bold;
   }
 
   tr {

package/scss/helpers/variables/_typography.scss

@@ -1,13 +1,3 @@
-$fontfamily-light: font-family(Supreme-Light);
-
-$fontfamily-light-italic: font-family(Supreme-LightItalic);
-
-$fontfamily-black: font-family(Supreme-Black);
-
-$fontfamily-black-italic: font-family(Supreme-BlackItalic);
-
-// adjusting bootstrap variables for supreme
-
 $body-font-size: toRem(17);
 
 $h1-font-size: toRem(42);

package/scss/index.scss

@@ -1,10 +1,9 @@
 @import "helpers/index";
 
-@include font-face;
-
 @import "app";
 @import "city-of-london";
 @import "close-icon";
+@import "font";
 @import "footer";
 @import "header";
 @import "klaro";
@@ -47,7 +46,7 @@ html {
 }
 
 body {
-  @include fontfamily-light;
+  font-family: Supreme, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: $line-height-md;
@@ -100,10 +99,4 @@ p {
 
 p+p {
   margin-top: 1rem;
-}
-
-/// b tag in use on iframes
-strong,
-b {
-  @include fontfamily-black;
 }

package/components/BrFormCheckbox/Demo.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <br-form-checkbox
-      @change="({ value }) => (newsletterOptIn = value)"
-      data-test="requires-companion-option"
-      :default="newsletterOptIn"
-      id="newsletter-signup"
-      :disabled="false"
-      :toggle="true"
-      :table="false"
-      :value="true"
-      success>
-      Keep me up to date with news, events and offers from the Barbican
-    </br-form-checkbox>
-    {{ newsletterOptIn }}
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      newsletterOptIn: false,
-    }
-  },
-}
-</script>

package/components/BrFormCheckboxGroup/Demo.vue

@@ -1,42 +0,0 @@
-<template>
-  <div style="padding: 100px">
-    <br-form-checkbox
-      @change="({ value }) => (boolean = value)"
-      data-test="checkbox-test-data"
-      id="checkbox-id"
-      :disabled="false"
-      :toggle="true"
-      :table="false"
-      :value="true"
-      success
-    >
-      Lorem ipsum dolor sit amet.
-    </br-form-checkbox>
-    <br-form-checkbox-group
-      @change="(value) => (model = value)"
-      data-test="checkbox-test-data"
-      class="checkbox-class"
-      name="checkbox-name"
-      id="checkbox-id"
-      :options="options"
-      :model="model"
-    />
-    {{ boolean }}
-    {{ model.length ? model : "nothing" }}
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      boolean: false,
-      model: [],
-      options: [
-        { text: "Orange text", value: "orange", checked: true },
-        { text: "Apple text", value: "apple", checked: false },
-      ],
-    };
-  },
-};
-</script>

package/components/BrFormInput/Demo.vue

@@ -1,64 +0,0 @@
-<template>
-  <div>
-    <br-form-row>
-      <br-form-radio
-        @change="({ value }) => (radio = value)"
-        name="radio"
-        value="true">
-        true
-      </br-form-radio>
-      <br-form-radio
-        @change="({ value }) => (radio = value)"
-        name="radio"
-        value="false">
-        false
-      </br-form-radio>
-    </br-form-row>
-    <br-form-row>
-      <br-form-input
-        @change="({ value }) => (gift.sendDate = value)"
-        :min="minimumSendDate"
-        :max="maximumSendDate"
-        data-test="send-date"
-        type="date" />
-      <br-form-input
-        @change="({ value }) => (email = value)"
-        data-test="login-form-email"
-        autocomplete="username"
-        value="disabled"
-        class="custom"
-        type="email"
-        name="email"
-        :disabled="false"
-        :required="true" />
-    </br-form-row>
-    <br-form-row>
-      {{ email }}
-      {{ radio }}
-    </br-form-row>
-  </div>
-</template>
-
-<script>
-import { DateTime } from 'luxon'
-
-export default {
-  computed: {
-    minimumSendDate() {
-      return DateTime.now().toISODate()
-    },
-    maximumSendDate() {
-      return DateTime.now().plus({ years: 1 }).toISODate()
-    },
-  },
-  data() {
-    return {
-      radio: 'radio',
-      email: 'email',
-      gift: {
-        sendDate: '',
-      },
-    }
-  },
-}
-</script>

package/components/BrFormRadio/Demo.vue

@@ -1,33 +0,0 @@
-<template>
-  <div v-for="(group, index) in radios" :key="index">
-    <div>{{ group.default }}</div>
-    <br-form-radio
-      v-for="(option, index) in group.options"
-      @change="({ value }) => (group.default = value)"
-      :default="group.default"
-      data-test="here it is"
-      :name="group.name"
-      :value="option"
-      :key="index">
-      {{ option }}
-    </br-form-radio>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      radios: [
-        { name: 'testA', default: true, options: [true, false] },
-        { name: 'testB', default: 16, options: [32, 46, 75] },
-        {
-          name: 'testC',
-          default: 'sentence',
-          options: ['paul', 'gareth', 'andrew'],
-        },
-      ],
-    }
-  },
-}
-</script>

package/components/BrFormRadioGroup/Demo.vue

@@ -1,22 +0,0 @@
-<template>
-  <br-form-radio-group
-    @change="({ value }) => (contactMeSelection = value)"
-    data-test="global-opt-in"
-    name="contact-me-options"
-    :options="yesNoOptions"
-    id="radio-slots" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      contactMeSelection: true,
-      yesNoOptions: [
-        { text: 'Yes', value: true, checked: true },
-        { text: 'No', value: false, checked: false },
-      ],
-    }
-  },
-}
-</script>

package/components/BrFormTextarea/Demo.vue

@@ -1,22 +0,0 @@
-<template>
-  <div style="padding: 100px">
-    <br-form-textarea
-      @change="({ value }) => (gift.message = value)"
-      placeholder="placeholder"
-      data-test="data-test"
-      rows="6" />
-    {{ gift.message }}
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      gift: {
-        message: '',
-      },
-    }
-  },
-}
-</script>

package/scss/helpers/mixins/_font.scss

@@ -1,49 +0,0 @@
-@mixin font-face($name: "SupremeLLWeb", $path: "https://static.barbican.org.uk/systems-public/fonts/") {
-  @font-face {
-    font-family: "Supreme-Light";
-    src: url("#{$path}#{$name}-Light.woff") format("woff"),
-    url("#{$path}#{$name}-Light.woff2") format("woff2");
-  }
-
-  @font-face {
-    font-family: "Supreme-LightItalic";
-    src: url("#{$path}#{$name}-LightItalic.woff") format("woff"),
-    url("#{$path}#{$name}-LightItalic.woff2") format("woff2");
-  }
-
-  @font-face {
-    font-family: "Supreme-Black";
-    src: url("#{$path}#{$name}-Black.woff") format("woff"),
-    url("#{$path}#{$name}-Black.woff2") format("woff2");
-  }
-
-  @font-face {
-    font-family: "Supreme-BlackItalic";
-    src: url("#{$path}#{$name}-BlackItalic.woff") format("woff"),
-    url("#{$path}#{$name}-BlackItalic.woff2") format("woff2");
-  }
-}
-
-@mixin fontfamily-light {
-  font-family: $fontfamily-light;
-  font-weight: 400;
-}
-
-@mixin fontfamily-black {
-  font-family: $fontfamily-black;
-  font-weight: 400;
-}
-
-// https://caniuse.com/#search=font-smoothing
-
-@mixin font-smoothing($value: on) {
-  @if $value ==on {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  @else {
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-osx-font-smoothing: auto;
-  }
-}