barbican-reset 2.20.0 → 2.22.0

package/helpers/mixins/index.scss

@@ -17,6 +17,7 @@
 }
 
 @import "br-alert";
+@import "br-card";
 @import "br-form-row";
 @import "br-form-update";
 @import "br-form-password";
@@ -24,7 +25,6 @@
 @import "account/orders";
 @import "basket";
 @import "buttons";
-@import "card";
 @import "content";
 @import "city-of-london";
 @import "core";
@@ -32,6 +32,7 @@
 @import "festival";
 @import "focus";
 @import "font";
+@import "headings";
 @import "loading";
 @import "input";
-@import "table";
+@import "table";

package/helpers/mixins/input/_checkbox.scss

@@ -1,6 +1,12 @@
-@mixin checkbox-input(
-  $state: neutral,
-  $type: checkbox) {
-  @include generic-input($state,$type);
+@mixin br-checkbox($state: neutral) {
+  @include generic-input($state, checkbox);
   display: block;
+}
+
+@mixin br-spx-checkbox($state: neutral) {
+  @include br-checkbox($state);
+
+  input:focus {
+    @include generic-input-target-focus;
+  }
 }

package/helpers/mixins/input/_generic.scss

@@ -4,7 +4,7 @@
 }
 
 @mixin generic-input-target($state: neutral) {
-  $size: 0.875rem;
+  $size: toRem(14);
   position: absolute;
   height: $size;
   margin: auto;
@@ -13,10 +13,10 @@
   left: 1rem;
   top: 1rem;
 
-  @if $state == disabled {
+  @if $state ==disabled {
     display: none;
 
-    ~ label {
+    ~label {
       padding: 0.75rem 0.75rem 0.625rem;
       border-color: $c-grey-l44;
       cursor: not-allowed;
@@ -28,28 +28,32 @@
     }
   }
 
-  @if $state != disabled {
+  @if $state !=disabled {
     cursor: pointer;
 
     @include focus {
-      outline: none;
+      @include generic-input-target-focus;
 
-      ~ label {
-        @include default-label-focus;
-      }
-
-      &:checked ~ label {
+      &:checked~label {
         @include neutral-status-colors;
         @include single-box($c-status-neutral, 0.0625rem);
       }
     }
 
-    &:checked ~ label {
+    &:checked~label {
       @include neutral-status-colors;
     }
   }
 }
 
+@mixin generic-input-target-focus {
+  outline: none;
+
+  ~label {
+    @include default-label-focus;
+  }
+}
+
 @mixin generic-input-label($state: neutral) {
   padding: 0.75rem 0.75rem 0.625rem 2.75rem;
   border-radius: $border-radius-lg;
@@ -58,12 +62,12 @@
   font-weight: 400;
   display: block;
 
-  @if $state != disabled {
+  @if $state !=disabled {
     color: $c-grey-l21;
     cursor: pointer;
   }
 
-  @if $state == disabled {
+  @if $state ==disabled {
     color: $c-grey-l44;
     cursor: not-allowed;
 
@@ -88,4 +92,4 @@
   label {
     @include generic-input-label($state);
   }
-}
+}

package/helpers/mixins/input/_radio.scss

@@ -1,5 +1,21 @@
-@mixin radio-input($state: neutral, $type: radio) {
-  @include generic-input($state, $type);
+// formerly radio-input
+
+@mixin br-radio($state: neutral) {
+  @include generic-input($state, radio);
   display: inline-block;
   margin: 0.25rem;
 }
+
+@mixin br-spx-radio($state: neutral) {
+  @include br-radio($state);
+  margin: 0;
+
+  input:focus {
+    @include generic-input-target-focus;
+  }
+
+  label {
+    @include fontfamily-light;
+    display: inline-block;
+  }
+}

package/helpers/mixins/input/{_dropdown.scss → _select.scss}

@@ -1,4 +1,6 @@
-@mixin custom-select {
+// formerly custom-select
+
+@mixin br-select {
   padding: 0.8125rem 2.5rem 0.8125rem 0.8125rem;
   background-position: right 0.75rem center;
   background-image: url($select-arrow);
@@ -9,10 +11,10 @@
   background-repeat: no-repeat;
   line-height: 1.375rem;
   color: $c-grey-l21;
-  font-size: inherit;
   font-weight: 400;
   transition: none;
   appearance: none;
+  font-size: 85%;
   display: block;
   width: 100%;
 
@@ -20,3 +22,11 @@
     @include input-focus-defaults;
   }
 }
+
+@mixin br-spx-select {
+  @include br-select;
+
+  &:focus {
+    @include input-focus-defaults;
+  }
+}

package/helpers/mixins/input/_text.scss

@@ -1,4 +1,5 @@
 @mixin all-text-inputs {
+
   [type='color'],
   [type='date'],
   [type='datetime'],
@@ -21,15 +22,20 @@
 
 @mixin text-input-defaults {
   border: solid $border-width $c-grey-l65;
-  padding: 0.875rem 0.875rem 0.75rem;
+  padding: toRem(14) toRem(14) 0.75rem;
   background-color: $c-grey-l96;
   border-radius: $border-radius-lg;
   line-height: 1.375rem;
   color: $c-grey-l21;
+  font-size: 85%;
+
+  @include input-focus {
+    @include input-focus-defaults;
+  }
 
   &:disabled,
   &[readonly] {
     background-color: $c-grey-l96;
     color: $c-grey-l44;
   }
-}
+}

package/helpers/variables/_layout.scss

@@ -21,6 +21,6 @@ $select-arrow: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' vie
 $box-shadow-card: 0 0 0.5rem rgba($black, 0.1);
 
 $padding-button-xs: 0.625rem;
-$padding-button-sm: 0.75rem;
+$padding-button-slim: 0.75rem;
 $padding-button-md: 0.9375rem;
-$padding-button-lg: 1rem;
+$padding-button-lg: 1rem;

package/helpers/variables/_typography.scss

@@ -1,10 +1,10 @@
-$fontfamily-light: Supreme-Light, Arial, Helvetica, sans-serif;
+$fontfamily-light: font-family(Supreme-Light);
 
-$fontfamily-light-italic: Supreme-LightItalic, Arial, Helvetica, sans-serif;
+$fontfamily-light-italic: font-family(Supreme-LightItalic);
 
-$fontfamily-black: Supreme-Black, Arial, Helvetica, sans-serif;
+$fontfamily-black: font-family(Supreme-Black);
 
-$fontfamily-black-italic: Supreme-BlackItalic, Arial, Helvetica, sans-serif;
+$fontfamily-black-italic: font-family(Supreme-BlackItalic);
 
 // adjusting bootstrap variables for supreme
 
@@ -14,8 +14,12 @@ $h1-font-size: toRem(42);
 
 $h2-font-size: toRem(34);
 
+$h3-font-size: toRem(28);
+
 $h4-font-size: toRem(24);
 
+$h5-font-size: toRem(20);
+
 $line-height-xs: 1.1;
 
 $line-height-sm: 1.2;

package/package.json

@@ -103,5 +103,5 @@
     "watch:patterns": "cd patterns && gulp watch"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.20.0"
+  "version": "2.22.0"
 }

package/patterns/scss/colors/_brand.scss

@@ -32,7 +32,8 @@ $setup: (
   shop: $c-brand-shop,
 );
 
-$brands: ();
+$brands: (
+);
 
 @function map-brands($color) {
   $map: (
@@ -46,24 +47,24 @@ $brands: ();
     tint-95: tint($color, 95%),
     tint-98: tint($color, 98%),
   );
-  @return $map;
+@return $map;
 }
 
 @each $key, $value in $setup {
-  $map: ();
-  $map: map-merge(
-    $map,
-    (
-      $key: map-brands($value),
-    )
+  $map: (
   );
-  $brands: map-merge($brands, $map);
+$map: map-merge($map,
+    ($key: map-brands($value),
+    ));
+$brands: map-merge($brands, $map);
 }
 
 @function brandColor($name, $variant: base) {
   @return map-get(map-get($brands, $name), $variant);
 }
 
+$c-background-alt: brandColor(generic, tint-95);
+
 $c-brand-cinema-dark: brandColor(cinema, shade-20); // deprecated
 $c-brand-shop-light: brandColor(shop, tint-85); // deprecated
 $c-brand-shop-dark: brandColor(shop, shade-20); // deprecated
@@ -75,4 +76,4 @@ $c-brand-generic-s100-l15: brandColor(generic, shade-65); // x-dark deprecated
 
 $c-brand-classical-light: brandColor(classical-music, tint-95); // deprecated
 $c-brand-classical-dark: brandColor(classical-music, shade-20); // deprecated
-$c-brand-membership-dark: hsl(223, 87%, 21%);
+$c-brand-membership-dark: hsl(223, 87%, 21%);

package/scss/{_custom-checkbox.scss → _br-checkbox.scss}

@@ -1,5 +1,8 @@
+// deprecate custom-checkbox class. br-checkbox is more descriptive
+
+.br-checkbox,
 .custom-checkbox {
-  @include checkbox-input;
+  @include br-checkbox; // formerly checkbox-input
 
   input[table][type='checkbox'] {
     @include inset;
@@ -12,12 +15,12 @@
       margin-top: 0.625rem;
     }
 
-    ~ label {
+    ~label {
       @include sr-only;
     }
 
     @include focus {
-      ~ label {
+      ~label {
         @include hover-label-table;
       }
     }
@@ -34,10 +37,11 @@
 }
 
 @each $status, $color in $statees {
-  @if $status != 'neutral' {
+  @if $status !='neutral' {
+
     [role='group'][#{$status}] input[type='checkbox'],
     input[type='checkbox'][#{$status}] {
       @include status-input($color);
     }
   }
-}
+}

package/scss/_br-loader.scss

@@ -1,4 +1,4 @@
-$offset: 0.875rem;
+$offset: toRem(14);
 $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 
 .card.br-loader {
@@ -25,7 +25,7 @@ $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   position: relative;
 
   &:not(:last-child) {
-    margin-right: $offset * 1.75;
+    margin-right: toRem(24);
   }
 
   &:before {
@@ -42,6 +42,7 @@ $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 
   @for $i from 1 through 10 {
     &:nth-child(#{$i}) {
+
       &:before,
       &:after {
         animation-delay: #{$i * 0.2}s;
@@ -55,18 +56,22 @@ $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     top: -$offset;
     z-index: 2;
   }
+
   25% {
     transform: scale(1.25);
     z-index: 2;
   }
+
   50% {
     top: $offset;
     z-index: 1;
   }
+
   75% {
     transform: scale(0.75);
     z-index: 1;
   }
+
   100% {
     top: -$offset;
     z-index: 2;
@@ -78,21 +83,25 @@ $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     top: $offset;
     z-index: 1;
   }
+
   25% {
     background-color: $gray-300;
     transform: scale(0.75);
     z-index: 1;
   }
+
   50% {
     top: -$offset;
     z-index: 2;
   }
+
   75% {
     transform: scale(1.25);
     z-index: 2;
   }
+
   100% {
     top: $offset;
     z-index: 2;
   }
-}
+}

package/scss/{_custom-radio.scss → _br-radio.scss}

@@ -3,14 +3,15 @@
 }
 
 .custom-radio {
-  @include radio-input;
+  @include br-radio;
 }
 
 @each $status, $color in $statees {
-  @if $status != "neutral" {
+  @if $status !="neutral" {
+
     [role="radiogroup"][#{$status}] input[type="radio"],
     input[type="radio"][#{$status}] {
       @include status-input($color);
     }
   }
-}
+}

package/scss/_br-select.scss

@@ -0,0 +1,3 @@
+.custom-select {
+  @include br-select;
+}

package/scss/_btn.scss

@@ -123,6 +123,26 @@
     @include btn-discover;
   }
 
+  &.btn-membership-pill {
+    @include btn-membership-pill;
+  }
+
+  &.btn-priority-row {
+    @include btn-priority-row;
+  }
+
+  &.btn-login-to-book {
+    @include btn-login-to-book;
+  }
+
+  &.btn-sold-out {
+    @include btn-sold-out;
+  }
+
+  &.btn-add-membership-to-basket {
+    @include btn-add-membership-to-basket;
+  }
+
   // modifyers
 
   &.expand {

package/scss/_input.scss

@@ -36,7 +36,4 @@ input[type='file'] {
 
 @include all-text-inputs {
   @include text-input-defaults;
-  @include focus {
-    @include input-focus-defaults;
-  }
-}
+}

package/scss/_klaro.scss

@@ -36,11 +36,11 @@
   width: 100%;
   bottom: 0;
 
-  @if $pos == right {
+  @if $pos ==right {
     right: 0;
   }
 
-  @if $pos == left {
+  @if $pos ==left {
     left: 0;
   }
 
@@ -50,11 +50,11 @@
     max-width: 28rem;
     bottom: 1.25rem;
 
-    @if $pos == right {
+    @if $pos ==right {
       right: 1.25rem;
     }
 
-    @if $pos == left {
+    @if $pos ==left {
       left: 1.25rem;
     }
   }
@@ -103,11 +103,11 @@
     left: 0;
     top: 0;
 
-    &:focus + .cm-list-label .slider {
+    &:focus+.cm-list-label .slider {
       @include double-box($c-grey-l21, $white);
     }
 
-    &:checked + .cm-list-label .slider {
+    &:checked+.cm-list-label .slider {
       background-color: $c-status-neutral;
 
       &::before {
@@ -421,11 +421,11 @@
 
         .cn-learn-more {
           @include fontfamily-black;
-          background: $c-grey-l44;
           border-radius: $border-radius;
+          font-size: $font-size-sm;
+          background: $c-grey-l44;
           text-decoration: none;
           display: inline-block;
-          font-size: 0.875rem;
           padding: 0.5rem;
           color: $white;
 
@@ -470,4 +470,4 @@
   padding: 1rem;
   color: $white;
   opacity: 0;
-}
+}

package/scss/_list.scss

@@ -1,8 +1,12 @@
-menu, ol, ul {
+dl,
+menu,
+ol,
+ul {
   padding: 0 0 0 1.25rem;
+  margin: 0;
 }
 
-nav > ul {
+nav>ul {
   list-style: none;
   padding: 0;
 }

package/scss/card/_confirm.scss

@@ -1,10 +1,9 @@
-
 .card[confirm] {
-  @include form-card;
+  @include br-form-card;
   margin-right: auto;
   text-align: center;
   margin-left: auto;
-  max-width: 20rem;  
+  max-width: 20rem;
 
   $gap: 0.625rem;
 

package/scss/card/_login.scss

@@ -1,6 +1,5 @@
-
 .card[login] {
-  @include form-card;
+  @include br-form-card;
 
   .card-header {
     justify-content: space-between;
@@ -9,6 +8,6 @@
   }
 
   .card-title {
-    @include form-card-title;
+    @include br-form-card-title;
   }
 }

package/scss/card/_password.scss

@@ -1,6 +1,5 @@
-
 .card[password] {
-  @include form-card;
+  @include br-form-card;
 
   .card-title {
     font-size: $h2-font-size;

package/scss/card/index.scss

@@ -1,4 +1,3 @@
-
 @import "confirm";
 @import "login";
 @import "password";
@@ -10,25 +9,25 @@
 @import "slim";
 
 .card {
-  @include card;
+  @include br-card;
 }
 
 .card-header {
-  @include card-header;
+  @include br-card-header;
 }
 
 .card-subtitle {
-  @include card-subtitle;
+  @include br-card-subtitle;
 }
 
 .card-body {
-  @include card-body;  
+  @include br-card-body;
 }
 
 .card-img {
-  @include card-img;
+  @include br-card-img;
 }
 
 .card-footer {
-  @include card-footer;
+  @include br-card-footer;
 }