barbican-reset 2.33.0 → 2.35.0

package/patterns/views/blocks.pug

@@ -0,0 +1,7 @@
+extends ../layouts/main
+
+block content
+
+  +Section("Alerts")
+
+  include ../pages/alerts

package/patterns/views/index.pug

@@ -1,30 +1,7 @@
-extends layout
-include mixins
-block content 
-  h1 Color Palettes
-  
-  h2 Grey
-  ul.list.list-palette.grey
-    li.item.item-palette.l11
-    li.item.item-palette.l21
-    li.item.item-palette.l44
-    li.item.item-palette.l65
-    li.item.item-palette.l87
-    li.item.item-palette.l96
+extends ../layouts/main
 
-  h2 Brand
+block content
 
-  +Samples('Contemporary','contemporary-music')
-  +Samples('Theatre','theatre--dance')
-  +Samples('Talks','talks--events')
-  +Samples('Art','art--design')
-  +Samples('Programme','programme')
-  +Samples('Cinema','cinema')
-  +Samples('Shop','shop')
-  +Samples('Generic / Library / Tours / Hire','generic')
-  +Samples('Classical','classical-music')
-  +Samples('Membership','membership--support')
-      
-  h2 Sample
-  ul.list.list-palette.sample
-    li.item.item-palette
+  +Section("Colors")
+
+  include ../pages/colors

package/patterns/views/layouts.pug

@@ -0,0 +1,4 @@
+extends ../layouts/main
+
+block content
+  div Layouts

package/scss/_atomic.scss

@@ -3,32 +3,57 @@ $text-aligns: 'left', 'center', 'right';
 $margins05: 'margin-top', 'margin-bottom', 'margin-right', 'margin-left';
 $paddings05: 'padding-top', 'padding-bottom', 'padding-right', 'padding-left';
 
-@each $gap in $gaps {
-  @for $i from 1 to 5 {
-    .#{$gap}-#{$i} {
-      #{$gap}: 1rem * $i;
+/// @group Atomic
+/// Generator for gap classes. Creates 5 variations
+/// @example .margin-top-1, .margin-top-2, .margin-top-3, .margin-top-4, .margin-top-5
+@mixin printGapClasses {
+  @each $gap in $gaps {
+    @for $i from 1 to 5 {
+      .#{$gap}-#{$i} {
+        #{$gap}: 1rem * $i;
+      }
     }
   }
 }
 
-@each $align in $text-aligns {
-  .text-align-#{$align} {
-    text-align: #{$align};
+/// @group Atomic
+/// Generator for text-align classes. Creates 3 variations
+/// @example .text-align-left, .text-align-center, .text-align-right
+@mixin printTextAlignClasses {
+  @each $align in $text-aligns {
+    .text-align-#{$align} {
+      text-align: #{$align};
+    }
   }
 }
 
-@each $margin in $margins05 {
-  .#{$margin}-05 {
-    #{$margin}: 0.5rem;
+/// @group Atomic
+/// Generator for margin half classes. Creates 4 variations
+/// @example .margin-top-05, .margin-bottom-05, .margin-right-05, .margin-left-05
+@mixin printMarginClasses {
+  @each $margin in $margins05 {
+    .#{$margin}-05 {
+      #{$margin}: 0.5rem;
+    }
   }
 }
 
-@each $padding in $paddings05 {
-  .#{$padding}-05 {
-    #{$padding}: 0.5rem;
+/// @group Atomic
+/// Generator for padding half classes. Creates 4 variations
+/// @example .padding-top-05, .padding-bottom-05, .padding-right-05, .padding-left-05
+@mixin printPaddingClasses {
+  @each $padding in $paddings05 {
+    .#{$padding}-05 {
+      #{$padding}: 0.5rem;
+    }
   }
 }
 
+@include printGapClasses;
+@include printTextAlignClasses;
+@include printMarginClasses;
+@include printPaddingClasses;
+
 .font-weight-700 {
   @include fontfamily-black;
 }
@@ -91,6 +116,7 @@ $paddings05: 'padding-top', 'padding-bottom', 'padding-right', 'padding-left';
   min-width: 3rem;
 }
 
+/// Class for visually hiding markup, while still allowing screen readers to parse the content
 .sr-only {
   @include sr-only;
-}
+}

package/scss/_br-alert.scss

@@ -1,4 +1,6 @@
-
+/// @group Components
+/// BrAlert component class
+/// @example .br-alert.center .wrap.inline.error
 .br-alert {
   @include br-alert--setup;
 
@@ -10,14 +12,16 @@
     @include br-alert-wrap--colors($neutral_wrap...);
     @include br-alert-wrap--setup;
 
-    .btn.btn-link, a {
+    .btn.btn-link,
+    a {
       @include br-alert-link($neutral_focus...);
     }
 
     &.error {
       @include br-alert-wrap--colors($error_wrap...);
 
-      .btn.btn-link, a {
+      .btn.btn-link,
+      a {
         @include br-alert-link($error_focus...);
       }
     }
@@ -25,7 +29,8 @@
     &.success {
       @include br-alert-wrap--colors($success_wrap...);
 
-      .btn.btn-link, a {
+      .btn.btn-link,
+      a {
         @include br-alert-link($success_focus...);
       }
     }
@@ -41,7 +46,7 @@
     p {
       margin-bottom: 0;
 
-      + p {
+      +p {
         margin-top: 1rem;
       }
     }

package/scss/_br-button.scss

@@ -0,0 +1,186 @@
+/// Button component setup class. 
+/// Used in combination with a button style class
+/// @group Buttons
+/// @example .btn.btn-primary
+.btn {
+  @include setup-button;
+}
+
+
+/// Primary button. 
+/// Defaults to solid orange. Borders orange on focus.
+/// @group Buttons
+.btn.btn-primary {
+  @include btn-primary;
+}
+
+
+/// Primary outline button. 
+/// Defaults to orange outline. Fills orange on focus
+/// @group Buttons
+.btn.btn-outline-primary {
+  @include btn-outline-primary;
+}
+
+
+/// Primary outline header button. 
+/// Defaults to white outline. Fills white on focus
+/// @group Buttons
+.btn.btn-outline-header {
+  @include btn-outline-header;
+}
+
+/// Info button. 
+/// Defaults to solid blue. Borders blue on focus.
+/// @group Buttons
+.btn.btn-info {
+  @include btn-info;
+}
+
+/// Primary outline info button. 
+/// Defaults to blue outline. Fills blue on focus
+/// @group Buttons
+.btn.btn-outline-info {
+  @include btn-outline-info;
+}
+
+/// Secondary button. 
+/// Defaults to solid grey. Borders grey on focus.
+/// @group Buttons
+.btn.btn-secondary {
+  @include btn-secondary;
+}
+
+/// Primary outline info button. 
+/// Defaults to grey outline. Fills grey on focus
+/// @group Buttons
+.btn.btn-outline-secondary {
+  @include btn-outline-secondary;
+}
+
+/// Input edit button. 
+/// Semi circular control for lockable input fields. 
+/// Defaults to grey outline. Fills grey on focus.
+/// @group Buttons
+.btn.btn-input-edit {
+  @include btn-input-edit;
+}
+
+.btn {
+  &.btn-remove {
+    // solid grey, slim
+    @include btn-remove;
+  }
+
+  &.btn-link {
+    @include btn-link;
+  }
+
+  &.btn-video-help {
+    @include btn-video-help;
+  }
+
+  &.btn-exit {
+    @include btn-exit;
+  }
+
+  &.btn-remove-ticket {
+    @include btn-remove-ticket;
+  }
+
+  &.btn-remove-gift {
+    @include btn-remove-gift;
+  }
+
+  &.btn-membership-card {
+    @include btn-membership-card;
+  }
+
+  &.btn-video-login {
+    @include btn-video-login;
+  }
+
+  &.btn-cta {
+    @include btn-cta;
+  }
+
+  &.btn-carousel {
+    @include btn-carousel;
+  }
+
+  &.btn-invisible {
+    @include btn-invisible;
+  }
+
+  &.btn-returns {
+    // solid orange
+    @include btn-returns;
+  }
+
+  &.btn-cancel-returns {
+    // solid orange
+    @include btn-cancel-returns;
+  }
+
+  &.btn-resale {
+    // orange outline, fill on focus
+    @include btn-resale;
+  }
+
+  &.btn-radio {
+    border: 1px solid hsl(0deg, 0%, 65%);
+    padding: 0.75rem 0.75rem 0.625rem;
+    font-weight: 400;
+    margin: 0.25rem;
+
+    @include focus {
+      @include default-label-focus;
+    }
+  }
+
+  &.btn-menu {
+    @include btn-menu;
+  }
+
+  &.btn-basket {
+    @include btn-basket;
+  }
+
+  &.btn-discover {
+    @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;
+  }
+
+  &.btn-remove-membership-from-basket {
+    @include btn-remove-membership-from-basket;
+  }
+
+  &.btn-additional-information {
+    @include btn-additional-information;
+  }
+
+  // modifyers
+
+  &.expand {
+    @include btn-expand;
+  }
+}

package/scss/_br-skiplink.scss

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

package/scss/helpers/mixins/_br-skiplink.scss

@@ -0,0 +1,16 @@
+@mixin br-skiplink {
+  border: 0.25rem solid $c-grey-l21;
+  border-radius: $border-radius-lg;
+  background-color: $white;
+  color: $c-grey-l21;
+  position: absolute;
+  padding: 0.5rem;
+  z-index: -1;
+  opacity: 0;
+
+  @include focus {
+    outline: none;
+    opacity: 1;
+    z-index: 2;
+  }
+}

package/{helpers → scss/helpers}/mixins/_buttons.scss

@@ -319,13 +319,6 @@
 @mixin btn-login-to-book {
   @include btn-primary;
   @include flex-button($gap: 0.5rem);
-  justify-content: center;
-  min-width: initial;
-
-  @include medium-down {
-    margin-top: 1rem;
-    width: 100%;
-  }
 }
 
 @mixin btn-sold-out {

package/{helpers → scss/helpers}/mixins/_focus.scss

@@ -39,14 +39,14 @@
 @mixin focus-tabs {
   @include single-box($c-grey-l21);
   background-color: $c-grey-l21;
-  border-radius: 0;
+  // border-radius: 0;
   color: $white;
 }
 
 @mixin focus-tabs-dark {
   @include single-box($white);
   background-color: $white;
-  border-radius: 0;
+  // border-radius: 0;
   color: $black;
 }
 

package/{helpers → scss/helpers}/mixins/_font.scss

@@ -1,4 +1,4 @@
-@mixin font-face($name: "SupremeLLWeb", $path: "/fonts/") {
+@mixin font-face($name: "SupremeLLWeb", $path: "https://www.barbican.org.uk/themes/barb22/fonts/") {
   @font-face {
     font-family: "Supreme-Light";
     src: url("#{$path}#{$name}-Light.woff") format("woff"),

package/{helpers → scss/helpers}/mixins/_headings.scss

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

package/{helpers → scss/helpers}/mixins/index.scss

@@ -16,24 +16,26 @@
   border: 0;
 }
 
+@import "account/orders";
+@import "drupal/index.scss";
+
+@import "basket";
 @import "br-alert";
 @import "br-card";
+@import "br-footer";
+@import "br-form-password";
 @import "br-form-row";
 @import "br-form-update";
-@import "br-form-password";
-@import "br-footer";
-@import "account/orders";
-@import "basket";
+@import "br-skiplink";
 @import "breakpoints";
 @import "buttons";
-@import "content";
 @import "city-of-london";
+@import "content";
 @import "core";
-@import "drupal/index.scss";
 @import "festival";
 @import "focus";
 @import "font";
 @import "headings";
-@import "loading";
 @import "input";
+@import "loading";
 @import "table";

package/{helpers → scss/helpers}/mixins/input/_generic.scss

@@ -55,7 +55,7 @@
 }
 
 @mixin generic-input-label($state: neutral) {
-  padding: 0.75rem 0.75rem 0.625rem 2.75rem;
+  padding: 0.75rem 0.75rem 0.625rem 2.5rem;
   border-radius: $border-radius-lg;
   border: 1px solid $c-grey-l65;
   background-color: $white;

package/{helpers → scss/helpers}/variables/_columns.scss

@@ -1,4 +1,3 @@
-
 $columns-simple: auto 8rem;
 $columns-details--header: auto 10rem 8rem;
 $columns-details--checkbox: 2.75rem auto 10rem 8rem;

package/{helpers → scss/helpers}/variables/_typography.scss

@@ -20,6 +20,8 @@ $h4-font-size: toRem(24);
 
 $h5-font-size: toRem(20);
 
+$font-size-sm: toRem(14); // small as it gets
+
 $line-height-xs: 1.1;
 
 $line-height-sm: 1.2;
@@ -32,4 +34,6 @@ $headings-line-height: $line-height-sm;
 
 $headings-letter-spacing: -0.015em;
 
-$link-decoration: underline;
+$link-decoration: underline;
+
+$border-width: toRem(1);

package/scss/helpers/variables/colors/_brand.scss

@@ -0,0 +1,96 @@
+/// $c-brand-art
+$c-brand-art: hsl(329, 100%, 45%);
+/// $c-brand-cinema
+$c-brand-cinema: hsl(126, 62%, 33%);
+/// $c-brand-classical
+$c-brand-classical: hsl(38, 53%, 38%);
+/// $c-brand-contemporary
+$c-brand-contemporary: hsl(254, 44%, 33%);
+$c-brand-generic: hsl(21, 100%, 41%);
+$c-brand-membership: hsl(217, 72%, 53%);
+$c-brand-programme: $c-grey-l21;
+$c-brand-shop: hsl(168, 75%, 30%);
+$c-brand-talks: hsl(214, 30%, 49%);
+$c-brand-theatre: hsl(192, 99%, 31%);
+
+$c-patron: $c-grey-l44;
+$c-patron-light: hsl(0, 0%, 60%);
+$c-principle: $c-brand-classical;
+$c-principle-light: hsl(38, 53%, 53%);
+
+/// see map-merge for example usage. talks--workshops is deprecated, use talks--events instead.
+$setup: (
+  contemporary-music: $c-brand-contemporary,
+  membership--support: $c-brand-membership,
+  tours--public-spaces: $c-brand-generic,
+  classical-music: $c-brand-classical,
+  talks--workshops: $c-brand-talks,
+  theatre--dance: $c-brand-theatre,
+  talks--events: $c-brand-talks,
+  art--design: $c-brand-art,
+  generic: $c-brand-generic,
+  library: $c-brand-generic,
+  cinema: $c-brand-cinema,
+  hire: $c-brand-generic,
+  programme: $c-brand-programme,
+  shop: $c-brand-shop,
+); 
+
+/// brands map will contain a shade map for each color variable
+$brands: ();
+
+/// map-brands automates the process of creating tints/shades for individual colors.
+@function map-brands($color) {
+  $map: (
+    shade-65: shade($color, 65%),
+    shade-20: shade($color, 20%),
+    shade-10: shade($color, 10%),
+    base: $color,
+    tint-40: tint($color, 40%),
+    tint-70: tint($color, 70%),
+    tint-85: tint($color, 85%),
+    tint-95: tint($color, 95%),
+    tint-98: tint($color, 98%),
+  );
+@return $map;
+}
+
+/// this process loops through the $setup map and creates a mappable value for each item, then merges the item into the $brands map
+@each $key, $value in $setup { 
+  $map: ();
+  $map: map-merge($map, ($key: map-brands($value)));
+  $brands: map-merge($brands, $map);
+}
+
+/// utility function for referencing a color variant from the brands map
+/// @param {Map} $name - color reference from the $setup map 
+/// @param {String} $variant - shade reference from the map-brands function
+@function brandColor($name, $variant: base) {
+  @return map-get(map-get($brands, $name), $variant); 
+}
+
+$c-background-alt: brandColor(generic, tint-95);
+
+/// @deprecated $c-brand-cinema-dark
+$c-brand-cinema-dark: brandColor(cinema, shade-20);
+/// @deprecated $c-brand-shop-light
+$c-brand-shop-light: brandColor(shop, tint-85);
+/// @deprecated $c-brand-shop-dark
+$c-brand-shop-dark: brandColor(shop, shade-20);
+
+/// @deprecated $c-brand-faint?
+$c-brand-generic-s60-l99: brandColor(generic, tint-95);
+/// @deprecated $c-brand-light?
+$c-brand-generic-s100-l95: brandColor(generic, tint-85);
+/// @deprecated $c-brand-shade?
+$c-brand-generic-s50-l90: brandColor(generic, tint-70);
+/// @deprecated $c-brand-dark?
+$c-brand-generic-s100-l38: brandColor(generic, shade-10);
+/// @deprecated $c-brand-x-dark?
+$c-brand-generic-s100-l15: brandColor(generic, shade-65);
+/// @deprecated $c-brand-classical-light
+$c-brand-classical-light: brandColor(classical-music, tint-95);
+/// @deprecated $c-brand-classical-dark
+$c-brand-classical-dark: brandColor(classical-music, shade-20);
+
+$c-brand-membership-dark: hsl(223, 87%, 21%);

package/{patterns/scss → scss/helpers/variables}/colors/_grey.scss

@@ -1,6 +1,8 @@
+$black: hsl(0, 0%, 0%); // deprecate this for $c-grey-l11
+
 $c-grey-l11: hsl(0, 0%, 10%); // midnight
 $c-grey-l21: hsl(0, 0%, 20%); // night
 $c-grey-l44: hsl(0, 0%, 35%); // steel
 $c-grey-l65: hsl(0, 0%, 65%); // concrete
 $c-grey-l87: hsl(0, 0%, 85%); // pearl
-$c-grey-l96: hsl(0, 0%, 95%); // alpine
+$c-grey-l96: hsl(0, 0%, 95%); // alpine

package/{patterns/scss → scss/helpers/variables}/colors/index.scss

@@ -3,4 +3,4 @@
 @import 'docs';
 @import 'status';
 @import 'wgp';
-@import 'llf';
+@import 'llf';

package/scss/helpers/variables/index.scss

@@ -0,0 +1,5 @@
+@import 'colors/index';
+@import 'typography';
+@import 'alerts';
+@import 'layout';
+@import 'columns';

package/scss/index.scss

@@ -1,7 +1,8 @@
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
-@import "../helpers/index";
+
+@import "helpers/index";
 
 @include font-face;
 
@@ -15,6 +16,7 @@
 @import "table";
 
 @import "br-alert";
+@import "br-button";
 @import "br-checkbox";
 @import "br-container";
 @import "br-footer";
@@ -25,10 +27,10 @@
 @import "br-promo";
 @import "br-radio";
 @import "br-select";
+@import "br-skiplink";
 @import "br-wrap";
 
 // bootstrap component styles
-@import "btn";
 @import "card/index";
 @import "card-deck";
 @import "form";
@@ -104,8 +106,8 @@ p+p {
   margin-top: 1rem;
 }
 
+/// b tag in use on iframes
 strong,
 b {
-  // b tag in use on iframes
   @include fontfamily-black;
 }