barbican-reset 2.16.0 → 2.17.0

package/helpers/mixins/_br-alert.scss

@@ -5,13 +5,13 @@
   border-style: solid;
 }
 
-@mixin br-alert-wrap--colors($fade, $light, $base) {
+@mixin br-alert-wrap--colors($main, $fade, $light) {
   background-color: $fade;
   border-color: $light;
-  color: $base;
+  color: $main;
 
   svg {
-    fill: $base;
+    fill: $main;
   }
 }
 
@@ -26,30 +26,30 @@
   }
 }
 
-@mixin br-alert-link($base, $fade) {
+@mixin br-alert-link($main, $fade) {
   @include focus {
-    @include single-box($base);
-    background-color: $base;
+    @include single-box($main);
+    background-color: $main;
     color: $fade;
   }
 }
 
-@mixin br-alert-exit($base, $fade) {
+@mixin br-alert-exit($main, $fade) {
   path.cross {
-    fill: $base;
+    fill: $main;
   }
   path.tint {
     fill: $fade;
   }
 
   @include focus {
-    @include single-box($base, 0.1875rem);
+    outline-color: $main;
 
     path.cross {
       fill: $fade;
     }
     path.tint {
-      fill: $base;
+      fill: $main;
     }
   }
 }
@@ -84,4 +84,18 @@
   .flex {
     @include br-alert--flex;
   }
+
+  .btn.btn-exit {
+    &.error {
+      @include br-alert-exit($error_focus...);
+    }
+
+    &.success {
+      @include br-alert-exit($success_focus...);
+    }
+
+    &.neutral {
+      @include br-alert-exit($neutral_focus...);
+    }
+  }
 }

package/helpers/mixins/_buttons.scss

@@ -1,4 +1,5 @@
 @mixin disabled {
+
   &:disabled,
   &.disabled {
     @content;
@@ -11,15 +12,14 @@
 }
 
 @mixin setup-button {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  @include fontfamily-black;
   border-radius: $border-radius-lg;
   padding: $padding-button-lg;
   text-decoration: none;
-  display: inline-block;
+  font-size: 1.0625rem;
   text-align: center;
-  font-weight: 700;
   transition: none;
+  cursor: pointer;
   line-height: 1;
 
   &:focus {
@@ -42,23 +42,32 @@
   }
 }
 
-@mixin display-button($display: 'ib', $gap: 1) {
-  @if $display == 'ib' {
+@mixin display-button($display: "ib", $gap: 1) {
+  @if $display =="ib" {
     vertical-align: middle;
     display: inline-block;
 
-    > * {
+    >* {
       vertical-align: middle;
       display: inline-block;
     }
-  } @else if $display == 'flex' {
+  }
+
+  @else if $display =="flex" {
     display: inline-flex;
     align-items: center;
     gap: #{$gap}rem;
   }
 }
 
-@mixin solid-button($background: $c-brand-generic, $color: white, $border: 1px, $padding: false, $margin: false, $line-height: false, $display: false, $font-size: false) {
+@mixin solid-button($background: $c-brand-generic,
+  $color: white,
+  $border: 1px,
+  $padding: false,
+  $margin: false,
+  $line-height: false,
+  $display: false,
+  $font-size: false) {
   border: $border solid $background;
   background-color: $background;
   color: $color;
@@ -66,7 +75,9 @@
   @if $display {
     @if $padding {
       @include display-button($display, $padding * 0.625);
-    } @else {
+    }
+
+    @else {
       @include display-button($display, 0.625);
     }
   }
@@ -74,12 +85,15 @@
   @if $line-height {
     line-height: $line-height;
   }
+
   @if $font-size {
     font-size: $font-size;
   }
+
   @if $padding {
     padding: $padding;
   }
+
   @if $margin {
     margin: $margin;
   }
@@ -88,13 +102,11 @@
     fill: currentColor;
   }
 
-  &:not(:disabled) {
-    @include focus {
-      @include double-box($color, $background);
-      border: $border solid $background;
-      background-color: $background;
-      color: $color;
-    }
+  @include focus {
+    @include double-box($color, $background);
+    border: $border solid $background;
+    background-color: $background;
+    color: $color;
   }
 
   &.hide {
@@ -102,7 +114,14 @@
   }
 }
 
-@mixin outline-button($color: $c-brand-generic, $background: white, $border: 1px, $padding: false, $margin: false, $line-height: false, $display: false, $font-size: false) {
+@mixin outline-button($color: $c-brand-generic,
+  $background: white,
+  $border: 1px,
+  $padding: false,
+  $margin: false,
+  $line-height: false,
+  $display: false,
+  $font-size: false) {
   background-color: $background;
   border: $border solid $color;
   color: $color;
@@ -110,7 +129,9 @@
   @if $display {
     @if $padding {
       @include display-button($display, $padding * 0.625);
-    } @else {
+    }
+
+    @else {
       @include display-button($display, 0.625);
     }
   }
@@ -118,36 +139,40 @@
   @if $line-height {
     line-height: $line-height;
   }
+
   @if $font-size {
     font-size: $font-size;
   }
+
   @if $padding {
     padding: $padding;
   }
+
   @if $margin {
     margin: $margin;
   }
 
   path {
-    fill: currentColor;
+    fill: $color;
   }
 
-  &:not(:disabled) {
-    @include focus {
-      border: $border solid $color;
-      background-color: $color;
-      color: $background;
-      box-shadow: none;
-      outline: none;
-  
-      path {
-        fill: $background;
-      }
+  @include focus {
+    border: $border solid $color;
+    background-color: $color;
+    color: $background;
+    box-shadow: none;
+    outline: none;
+
+    path {
+      fill: $background;
     }
   }
 }
 
-@mixin link-button($color: inherit, $background: transparent, $padding: 0, $line-height: false) {
+@mixin link-button($color: inherit,
+  $background: transparent,
+  $padding: 0,
+  $line-height: false) {
   background-color: $background;
   text-decoration: underline;
   vertical-align: baseline;
@@ -173,7 +198,7 @@
   @include solid-button;
   min-width: 8rem;
 
-  @include disabled {
+  &[disabled="disabled"] {
     @include solid-button($c-grey-l21);
     cursor: not-allowed;
   }
@@ -209,7 +234,11 @@
 }
 
 @mixin btn-outline-header {
-  @include outline-button($color: white, $background: $c-brand-generic, $border: 0.125rem, $display: 'flex');
+  @include outline-button($color: white,
+    $background: $c-brand-generic,
+    $border: 0.125rem,
+    $display: "flex"
+  );
 }
 
 @mixin btn-input-edit {
@@ -238,11 +267,14 @@
 }
 
 @mixin btn-remove {
-  @include solid-button($background: $c-grey-l21, $padding: 0.625em, $line-height: 1.375);
+  @include solid-button($background: $c-grey-l21,
+    $padding: 0.625em,
+    $line-height: 1.375);
 }
 
 @mixin btn-link {
   @include link-button($line-height: 1.3);
+
   @include focus {
     @include focus-tabs;
   }
@@ -267,7 +299,8 @@
   }
 
   @include focus {
-    @include single-box($c-grey-l21, 0.1875rem); // @BUG: safari outline + border-radius
+    @include single-box($c-grey-l21,
+      0.1875rem); // @BUG: safari outline + border-radius
     border-radius: 50%;
 
     path.cross {
@@ -285,6 +318,7 @@
     @include btn-remove;
     width: 100%;
   }
+
   @include media-breakpoint-up(sm) {
     @include btn-link;
   }
@@ -295,6 +329,7 @@
     @include btn-remove;
     width: 100%;
   }
+
   @include media-breakpoint-up(xl) {
     @include btn-link;
   }
@@ -307,6 +342,7 @@
     &.member {
       color: $c-brand-membership;
     }
+
     &.member-plus {
       color: $c-brand-membership-dark;
     }
@@ -318,7 +354,7 @@
 }
 
 @mixin btn-cta {
-  @include solid-button($background: $c-grey-l21, $display: 'flex');
+  @include solid-button($background: $c-grey-l21, $display: "flex");
   fill: white;
 }
 
@@ -355,7 +391,11 @@
 
 @mixin btn-menu {
   @include display-button(flex, 0.75);
-  @include outline-button($color: white, $background: $c-brand-generic, $padding: 0 0.75rem, $margin: 0.25rem, $line-height: 2.375rem);
+  @include outline-button($color: white,
+    $background: $c-brand-generic,
+    $padding: 0 0.75rem,
+    $margin: 0.25rem,
+    $line-height: 2.375rem);
   vertical-align: middle;
   min-height: 2.5rem;
 
@@ -363,14 +403,18 @@
     @include btn-menu-focus;
   }
 
-  @include data('clicked') {
+  @include data("clicked") {
     @include btn-menu-focus;
   }
 }
 
 @mixin btn-basket {
   @include display-button(flex, 0.5);
-  @include solid-button($background: white, $color: $c-brand-generic, $padding: 0 0.75rem, $margin: 0.25rem, $line-height: 2.375rem);
+  @include solid-button($background: white,
+    $color: $c-brand-generic,
+    $padding: 0 0.75rem,
+    $margin: 0.25rem,
+    $line-height: 2.375rem);
   vertical-align: middle;
   min-height: 2.5rem;
 
@@ -378,7 +422,7 @@
     @include btn-menu-focus;
   }
 
-  @include data('clicked') {
+  @include data("clicked") {
     @include btn-menu-focus;
   }
 }
@@ -404,4 +448,4 @@
 
 @mixin btn-expand {
   display: block;
-}
+}

package/package.json

@@ -1,4 +1,53 @@
 {
+  "_args": [
+    [
+      "barbican-reset@2.7.0",
+      "/Users/pheading/Sites/eticketing-vue"
+    ]
+  ],
+  "_from": "barbican-reset@2.7.0",
+  "_id": "barbican-reset@2.7.0",
+  "_inBundle": false,
+  "_integrity": "sha512-9QMrzuoZ/NZfFlFagC6go3ofn5hBhU9rtSPEeGH0krwY5dBKOlfs8oGIvqUaEGFKI+jQ3spuDOQoeyYK5NRiQw==",
+  "_location": "/barbican-reset",
+  "_phantomChildren": {
+    "array-flatten": "1.1.1",
+    "content-type": "1.0.4",
+    "cookie-signature": "1.0.6",
+    "ee-first": "1.1.1",
+    "encodeurl": "1.0.2",
+    "escape-html": "1.0.3",
+    "etag": "1.8.1",
+    "fresh": "0.5.2",
+    "iconv-lite": "0.4.24",
+    "inherits": "2.0.4",
+    "merge-descriptors": "1.0.1",
+    "methods": "1.1.2",
+    "parseurl": "1.3.3",
+    "path-to-regexp": "0.1.7",
+    "range-parser": "1.2.1",
+    "side-channel": "1.0.4",
+    "type-is": "1.6.18",
+    "unpipe": "1.0.0",
+    "utils-merge": "1.0.1",
+    "vary": "1.1.2"
+  },
+  "_requested": {
+    "type": "version",
+    "registry": true,
+    "raw": "barbican-reset@2.7.0",
+    "name": "barbican-reset",
+    "escapedName": "barbican-reset",
+    "rawSpec": "2.7.0",
+    "saveSpec": null,
+    "fetchSpec": "2.7.0"
+  },
+  "_requiredBy": [
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.7.0.tgz",
+  "_spec": "2.7.0",
+  "_where": "/Users/pheading/Sites/eticketing-vue",
   "author": {
     "name": "Paul Heading"
   },
@@ -54,5 +103,5 @@
     "watch:patterns": "cd patterns && gulp watch"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.16.0"
+  "version": "2.17.0"
 }

package/patterns/scss/colors/_brand.scss

@@ -64,15 +64,15 @@ $brands: ();
   @return map-get(map-get($brands, $name), $variant);
 }
 
-$c-brand-cinema-dark: color(cinema, shade-20); // deprecated
-$c-brand-shop-light: color(shop, tint-85); // deprecated
-$c-brand-shop-dark: color(shop, shade-20); // deprecated
-$c-brand-generic-s60-l99: color(generic, tint-95); // faint deprecated
-$c-brand-generic-s100-l95: color(generic, tint-85); // light deprecated
-$c-brand-generic-s50-l90: color(generic, tint-70); // shade deprecated
-$c-brand-generic-s100-l38: color(generic, shade-10); // dark deprecated
-$c-brand-generic-s100-l15: color(generic, shade-65); // x-dark deprecated
+$c-brand-cinema-dark: brand(cinema, shade-20); // deprecated
+$c-brand-shop-light: brand(shop, tint-85); // deprecated
+$c-brand-shop-dark: brand(shop, shade-20); // deprecated
+$c-brand-generic-s60-l99: brand(generic, tint-95); // faint deprecated
+$c-brand-generic-s100-l95: brand(generic, tint-85); // light deprecated
+$c-brand-generic-s50-l90: brand(generic, tint-70); // shade deprecated
+$c-brand-generic-s100-l38: brand(generic, shade-10); // dark deprecated
+$c-brand-generic-s100-l15: brand(generic, shade-65); // x-dark deprecated
 
-$c-brand-classical-light: color(classical-music, tint-95); // deprecated
-$c-brand-classical-dark: color(classical-music, shade-20); // deprecated
+$c-brand-classical-light: brand(classical-music, tint-95); // deprecated
+$c-brand-classical-dark: brand(classical-music, shade-20); // deprecated
 $c-brand-membership-dark: hsl(223, 87%, 21%);

package/patterns/scss/colors/_status.scss

@@ -1,3 +1,4 @@
+
 $c-status-neutral-fade: hsl(205, 100%, 95%);
 $c-status-neutral-light: hsl(205, 100%, 75%);
 $c-status-neutral: hsl(205, 100%, 37%);
@@ -10,20 +11,20 @@ $c-status-success-fade: hsl(120, 30%, 95%);
 $c-status-success-light: hsl(120, 30%, 75%);
 $c-status-success: hsl(120, 30%, 37%);
 
-$statuses: (
-  neutral: (
-    base: $c-status-neutral,
-    fade: $c-status-neutral-fade,
-    light: $c-status-neutral-light,
+$statees : (
+  neutral : (
+    base : $c-status-neutral,
+    fade : $c-status-neutral-fade,
+    light : $c-status-neutral-light
   ),
-  success: (
-    base: $c-status-success,
-    fade: $c-status-success-fade,
-    light: $c-status-success-light,
+  success : (
+    base : $c-status-success,
+    fade : $c-status-success-fade,
+    light : $c-status-success-light
   ),
-  error: (
-    base: $c-status-error,
-    fade: $c-status-error-fade,
-    light: $c-status-error-light,
+  error : (
+    base : $c-status-error,
+    fade : $c-status-error-fade,
+    light : $c-status-error-light
   ),
-);
+);

package/patterns/scss/styles.scss

@@ -18,8 +18,8 @@ $tints: "40", "70", "85", "95";
 }
 
 body {
+  @include fontfamily-light;
   line-height: $line-height-md;
-  font-family: $font-family;
   color: $c-grey-l21;
 }
 
@@ -32,17 +32,17 @@ body {
 
   @include brand using($color, $variant) {
     .item.item-palette {
-      background-color: color($color);
+      background-color: brand($color);
 
       @each $shade in $shades {
         &.shade-#{$shade} {
-          background-color: color($color, shade-#{$shade});
+          background-color: brand($color, shade-#{$shade});
         }
       }
 
       @each $tint in $tints {
         &.tint-#{$tint} {
-          background-color: color($color, tint-#{$tint});
+          background-color: brand($color, tint-#{$tint});
         }
       }
     }
@@ -54,18 +54,23 @@ body {
     &.l11 {
       background-color: $c-grey-l11;
     }
+
     &.l21 {
       background-color: $c-grey-l21;
     }
+
     &.l44 {
       background-color: $c-grey-l44;
     }
+
     &.l65 {
       background-color: $c-grey-l65;
     }
+
     &.l87 {
       background-color: $c-grey-l87;
     }
+
     &.l96 {
       background-color: $c-grey-l96;
     }
@@ -96,4 +101,4 @@ h2 {
 
 h3 {
   margin: 0 0 0.5rem;
-}
+}

package/scss/_atomic.scss

@@ -83,7 +83,7 @@ $paddings05: 'padding-top', 'padding-bottom', 'padding-right', 'padding-left';
 }
 
 .background-color-alt {
-  background-color: color(generic, tint-95);
+  background-color: brand(generic, tint-95);
 }
 
 .min-width-3 {

package/scss/_br-alert.scss

@@ -1,3 +1,4 @@
+
 .br-alert {
   @include br-alert--setup;
 
@@ -5,14 +6,30 @@
     @include br-alert--center;
   }
 
-  .btn.btn-exit svg {
-    height: 1.5rem;
-    width: 1.5rem;
-  }
-
   .wrap {
+    @include br-alert-wrap--colors($neutral_wrap...);
     @include br-alert-wrap--setup;
 
+    .btn.btn-link, a {
+      @include br-alert-link($neutral_focus...);
+    }
+
+    &.error {
+      @include br-alert-wrap--colors($error_wrap...);
+
+      .btn.btn-link, a {
+        @include br-alert-link($error_focus...);
+      }
+    }
+
+    &.success {
+      @include br-alert-wrap--colors($success_wrap...);
+
+      .btn.btn-link, a {
+        @include br-alert-link($success_focus...);
+      }
+    }
+
     &.inline {
       @include inline-block;
     }
@@ -29,25 +46,4 @@
       }
     }
   }
-}
-
-.br-alert {
-  @each $status, $color in $statuses {
-    $fade: map-get($color, fade);
-    $light: map-get($color, light);
-    $base: map-get($color, base);
-
-    .btn.btn-exit.#{$status} {
-      @include br-alert-exit($base, $fade);
-    }
-
-    .wrap.#{$status} {
-      @include br-alert-wrap--colors($fade, $light, $base);
-
-      .btn.btn-link,
-      a {
-        @include br-alert-link($base, $fade);
-      }
-    }
-  }
-}
+}

package/scss/_btn.scss

@@ -1,10 +1,3 @@
-@mixin flex-button {
-  // @TODO: move this to core button functionality. once I have time.
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
 .btn {
   @include setup-button;
 
@@ -18,24 +11,6 @@
     @include btn-outline-primary;
   }
 
-  // branded buttons
-
-  @each $key, $value in $brands {
-    &.btn-#{$key} {
-      @include solid-button(color($key));
-      @include flex-button;
-    }
-  }
-
-  // branded outline buttons
-
-  @each $key, $value in $brands {
-    &.btn-outline-#{$key} {
-      @include outline-button(color($key));
-      @include flex-button;
-    }
-  }
-
   &.btn-outline-header {
     // orange outline, fill on focus
     @include btn-outline-header;

package/scss/_close-icon.scss

@@ -8,7 +8,7 @@
   }
 
   .fill {
-    fill: color(generic, tint-95);
+    fill: brand(generic, tint-95);
   }
 }
 

package/scss/_custom-checkbox.scss

@@ -33,7 +33,7 @@
   }
 }
 
-@each $status, $color in $statuses {
+@each $status, $color in $statees {
   @if $status != 'neutral' {
     [role='group'][#{$status}] input[type='checkbox'],
     input[type='checkbox'][#{$status}] {

package/scss/_custom-radio.scss

@@ -1,4 +1,4 @@
-[role='radiogroup'] {
+[role="radiogroup"] {
   margin: -0.25rem;
 }
 
@@ -6,10 +6,10 @@
   @include radio-input;
 }
 
-@each $status, $color in $statuses {
-  @if $status != 'neutral' {
-    [role='radiogroup'][#{$status}] input[type='radio'],
-    input[type='radio'][#{$status}] {
+@each $status, $color in $statees {
+  @if $status != "neutral" {
+    [role="radiogroup"][#{$status}] input[type="radio"],
+    input[type="radio"][#{$status}] {
       @include status-input($color);
     }
   }

package/scss/_fonts.scss

@@ -1,34 +1,42 @@
-
-$futura: "FuturaLTPro";
-$font-family: #{$futura}, "Helvetica", "Arial", sans-serif;
+$supreme: "SupremeLLWeb";
+$font-family: #{$supreme}, "Helvetica", "Arial", sans-serif;
 $font-file-path: "../fonts/";
 
 @font-face {
-  font-family: "#{$futura}";
-  src: url("#{$font-file-path}#{$futura}-Book.woff") format("woff"),
-       url("#{$font-file-path}#{$futura}-Book.woff2") format("woff2");
-  font-style: normal;
+  font-family: "Supreme-Light";
+  src: url("#{$font-file-path}#{$supreme}-Light.woff") format("woff"),
+    url("#{$font-file-path}#{$supreme}-Light.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: "#{$futura}";
-  src: url("#{$font-file-path}#{$futura}-BookOblique.woff") format("woff"),
-       url("#{$font-file-path}#{$futura}-BookOblique.woff2") format("woff2");
-  font-style: italic;
+  font-family: "Supreme-LightItalic";
+  src: url("#{$font-file-path}#{$supreme}-LightItalic.woff") format("woff"),
+    url("#{$font-file-path}#{$supreme}-LightItalic.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: "#{$futura}";
-  src: url("#{$font-file-path}#{$futura}-Bold.woff") format("woff"),
-       url("#{$font-file-path}#{$futura}-Bold.woff2") format("woff2");
-  font-style: normal;
-  font-weight: bold;
+  font-family: "Supreme-Black";
+  src: url("#{$font-file-path}#{$supreme}-Black.woff") format("woff"),
+    url("#{$font-file-path}#{$supreme}-Black.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: "#{$futura}";
-  src: url("#{$font-file-path}#{$futura}-BoldOblique.woff") format("woff"),
-       url("#{$font-file-path}#{$futura}-BoldOblique.woff2") format("woff2");
-  font-style: italic;
-  font-weight: bold;
-}
+  font-family: "Supreme-BlackItalic";
+  src: url("#{$font-file-path}#{$supreme}-BlackItalic.woff") format("woff"),
+    url("#{$font-file-path}#{$supreme}-BlackItalic.woff2") format("woff2");
+}
+
+$fontfamily-light: Supreme-Light, Arial, Helvetica, sans-serif;
+$fontfamily-light-italic: Supreme-LightItalic, Arial, Helvetica, sans-serif;
+$fontfamily-black: Supreme-Black, Arial, Helvetica, sans-serif;
+$fontfamily-black-italic: Supreme-BlackItalic, Arial, Helvetica, sans-serif;
+
+@mixin fontfamily-light {
+  font-family: $fontfamily-light;
+}
+
+@mixin fontfamily-black {
+  font-family: $fontfamily-black;
+}
+
+// letter-spacing: 0.03em;

package/scss/_header.scss

@@ -1,9 +1,11 @@
-
 .header {
   background-color: $c-brand-generic;
   color: white;
 
-  &.videoSplash, &.cinemaSplash, &.concertSplash, &.theatreSplash {
+  &.videoSplash,
+  &.cinemaSplash,
+  &.concertSplash,
+  &.theatreSplash {
     display: none;
   }
-}
+}

package/scss/index.scss

@@ -48,8 +48,10 @@ html {
 }
 
 body {
+  @include fontfamily-light;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   line-height: $line-height-md;
-  font-family: $font-family;
   color: $c-grey-l21;
 }
 
@@ -65,7 +67,7 @@ h2,
 .h2,
 h1,
 .h1 {
-  font-weight: 700;
+  @include fontfamily-black;
 }
 
 a,
@@ -77,6 +79,6 @@ p {
   margin-bottom: 0;
 }
 
-p + p {
+p+p {
   margin-top: 1rem;
-}
+}