barbican-reset 1.7.8 → 1.8.1

package/helpers/mixins/_buttons.scss

@@ -8,10 +8,16 @@
   font-weight: 700;
   transition: none;
   line-height: 1;
-  padding: 1em;
+  padding: 1rem;
 
   &[slim] {
-    padding: 0.75em;
+    padding: 0.75rem;
+  }
+
+  &[large] {
+    padding-bottom: 0.9375rem;
+    padding-top: 0.9375rem;
+    font-size: 1.125rem;
   }
 }
 
@@ -33,7 +39,7 @@
 }
 
 @mixin button-solid(
-  $background: $c-brand-orange, 
+  $background: $c-brand-generic, 
   $color: $white, 
   $border: 1px,
   $padding: false,
@@ -70,7 +76,7 @@
 }
 
 @mixin button-outline(
-  $color: $c-brand-orange,
+  $color: $c-brand-generic,
   $background: $white, 
   $border: 1px,
   $padding: false,
@@ -161,7 +167,7 @@
 @mixin btn-outline-header {
   @include button-outline(
     $color: $white, 
-    $background: $c-brand-orange,
+    $background: $c-brand-generic,
     $border: 0.125rem,
     $display: 'flex');
 }
@@ -313,7 +319,7 @@
   }
 
   label {
-    visibility: hidden;
+    @include sr-only;
   }
 }
 

package/helpers/mixins/_table.scss

@@ -11,6 +11,14 @@
   color: $white;
 }
 
+@mixin table-label($mq:md) {
+  font-size: $font-size-lg;
+
+  @include media-breakpoint-up($mq) {
+    @include sr-only;
+  }
+}
+
 @mixin default-table-style {
   th, td {
     @include media-breakpoint-up(md) {

package/helpers/mixins/index.scss

@@ -6,6 +6,17 @@
   top: $val;
 }
 
+@mixin sr-only {
+  clip: rect(0,0,0,0);
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  height: 1px;
+  padding: 0;
+  width: 1px;
+  border: 0;
+}
+
 @import "br-alert";
 @import "br-form-row";
 @import "br-form-update";
@@ -20,7 +31,6 @@
 @import "festival";
 @import "focus";
 @import "font";
-@import "hide";
 @import "loading";
 @import "input";
 @import "table";

package/helpers/mixins/table/_details.scss

@@ -52,10 +52,6 @@
   }
 
   label {
-    font-size: $font-size-lg;
-
-    @include media-breakpoint-up($mq) {
-      display: none;
-    }
+    @include table-label($mq);
   }
 }

package/helpers/mixins/table/_etickets.scss

@@ -45,11 +45,7 @@
   }
 
   label {
-    font-size: $font-size-lg;
-
-    @include media-breakpoint-up($mq) {
-      display: none;
-    }
+    @include table-label($mq);
   }
 
   a {

package/helpers/mixins/table/_gifts.scss

@@ -20,7 +20,7 @@
       gap: 0.75rem;
   
       label {
-        display: none;
+        @include sr-only;
       }
     }
 

package/helpers/mixins/table/_orders.scss

@@ -41,11 +41,7 @@
   }
 
   label {
-    font-size: $font-size-lg;
-
-    @include media-breakpoint-up($mq) {
-      display: none;
-    }
+    @include table-label($mq);
   }
 
   a {

package/helpers/mixins/table/_preferences.scss

@@ -53,11 +53,7 @@
   }
 
   label {
-    font-size: $font-size-lg;
-
-    @include media-breakpoint-up($mq) {
-      display: none;
-    }
+    @include table-label($mq);
   }
 
   .custom-radio {

package/helpers/mixins/table/_resale.scss

@@ -22,10 +22,6 @@
   }
 
   label {
-    font-size: $font-size-lg;
-
-    @include media-breakpoint-up($mq) {
-      display: none;
-    }
+    @include table-label($mq);
   }
 }

package/helpers/mixins/table/_tickets.scss

@@ -14,7 +14,7 @@
       gap: 0.75rem;
   
       label {
-        display: none;
+        @include sr-only;
       }
     }
 

package/helpers/variables/colors/_grey.scss

@@ -1,7 +1,7 @@
 
 $c-grey-midnight: #1d1d1d;
 $c-grey-night: #353535;
-$c-grey-steel: #757575;
+$c-grey-steel: #707070;
 $c-grey-concrete:#a5a5a5;
 $c-grey-pearl: #ddd;
 $c-grey-alpine: #f6f6f6;

package/helpers/variables/colors/brand/_art.scss

@@ -0,0 +1,5 @@
+
+$c-brand-art-x-lite: hsl(329, 100%, 99%); // 2% opacity
+$c-brand-art-lite: hsl(329, 81%, 83%); // 30% opacity
+$c-brand-art-medium: hsl(329, 82%, 67%); // 60% opacity
+$c-brand-art: hsl(329, 100%, 45%);

package/helpers/variables/colors/brand/_cinema.scss

@@ -0,0 +1,6 @@
+
+$c-brand-cinema-x-lite: hsl(126, 31%, 99%); // 2% opacity
+$c-brand-cinema-lite: hsl(126, 31%, 80%); // 30% opacity
+$c-brand-cinema-medium: hsl(126, 31%, 60%); // 60% opacity
+$c-brand-cinema: hsl(126, 62%, 33%);
+$c-brand-cinema-dark: darken($c-brand-cinema, 7%);

package/helpers/variables/colors/brand/_classical.scss

@@ -0,0 +1,7 @@
+
+$c-brand-classical-x-lite: hsl(38, 33%, 99%); // 2% opacity
+$c-brand-classical-lite: hsl(38, 33%, 81%); // 30% opacity
+$c-brand-classical-medium: hsl(38, 33%, 63%); // 60% opacity
+$c-brand-classical-light: hsl(38, 53%, 95%);
+$c-brand-classical: hsl(38, 53%, 38%);
+$c-brand-classical-dark: hsl(38, 53%, 30%);

package/helpers/variables/colors/brand/_contemporary.scss

@@ -0,0 +1,5 @@
+
+$c-brand-contemporary-x-lite: hsl(254, 14%, 99%); // 2% opacity
+$c-brand-contemporary-lite: hsl(254, 22%, 80%); // 30% opacity
+$c-brand-contemporary-medium: hsl(254, 22%, 60%); // 60% opacity
+$c-brand-contemporary: hsl(254, 44%, 33%);

package/helpers/variables/colors/brand/_generic.scss

@@ -0,0 +1,10 @@
+
+$c-brand-generic-x-lite: hsl(21, 67%, 99%); // 2% opacity
+$c-brand-generic-faint: hsl(21, 60%, 99%);
+$c-brand-generic-light: hsl(21, 100%, 95%);
+$c-brand-generic-shade: hsl(21, 50%, 90%);
+$c-brand-generic-lite: hsl(21, 69%, 82%); // 30% opacity
+$c-brand-generic-medium: hsl(21, 69%, 65%); // 60% opacity
+$c-brand-generic: hsl(21, 100%, 41%);
+$c-brand-generic-dark: hsl(21, 100%, 38%);
+$c-brand-generic-x-dark: hsl(21, 100%, 15%);

package/helpers/variables/colors/brand/_membership.scss

@@ -0,0 +1,14 @@
+
+$c-brand-membership-x-lite: hsl(217, 60%, 99%); // 2% opacity
+$c-brand-membership-lite: hsl(217, 72%, 86%); // 30% opacity
+$c-brand-membership-medium: hsl(217, 72%, 72%); // 60% opacity
+$c-brand-membership: hsl(217, 72%, 53%);
+$c-brand-membership-dark: hsl(223, 87%, 21%);
+
+// ------------------------------
+
+$c-patron: $c-grey-steel;
+$c-patron-light: hsl(0, 0%, 60%);
+
+$c-principle: $c-brand-classical;
+$c-principle-light: hsl(38, 53%, 53%);

package/helpers/variables/colors/brand/_shop.scss

@@ -0,0 +1,4 @@
+
+$c-brand-shop-light: hsl(168, 30%, 90%);
+$c-brand-shop: hsl(168, 75%, 30%);
+$c-brand-shop-dark: hsl(168, 75%, 26%);

package/helpers/variables/colors/brand/_talks.scss

@@ -0,0 +1,5 @@
+
+$c-brand-talks: hsl(214, 30%, 49%);
+$c-brand-talks-medium: hsl(214, 30%, 69%); // 60% opacity
+$c-brand-talks-lite: hsl(214, 30%, 85%); // 30% opacity
+$c-brand-talks-x-lite: hsl(214, 30%, 99%); // 2% opacity

package/helpers/variables/colors/brand/_theatre.scss

@@ -0,0 +1,5 @@
+
+$c-brand-theatre: hsl(192, 99%, 31%);
+$c-brand-theatre-medium: hsl(192, 44%, 59%); // 60% opacity
+$c-brand-theatre-lite: hsl(192, 44%, 79%); // 30% opacity
+$c-brand-theatre-x-lite: hsl(192, 44%, 99%); // 2% opacity

package/helpers/variables/colors/brand/index.scss

@@ -0,0 +1,12 @@
+
+@import "generic";
+@import "art";
+@import "cinema";
+@import "classical";
+@import "contemporary";
+@import "membership";
+@import "shop";
+@import "talks";
+@import "theatre";
+
+$c-splash-videos: hsl(0, 0%, 4%);

package/helpers/variables/colors/index.scss

@@ -1,5 +1,5 @@
 @import "grey";
-@import "brand";
+@import "brand/index";
 @import "docs";
 @import "status";
 @import "wgp";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.7.8",
+  "version": "1.8.1",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {

package/scss/_atomic.scss

@@ -42,7 +42,7 @@ $paddings05: "padding-top", "padding-bottom", "padding-right", "padding-left";
 }
 
 .color-orange {
-  color: $c-brand-orange;
+  color: $c-brand-generic;
 }
 
 .font-size-lg {
@@ -76,5 +76,5 @@ $paddings05: "padding-top", "padding-bottom", "padding-right", "padding-left";
 }
 
 .background-color-alt {
-  background-color: $c-brand-orange-faint;
+  background-color: $c-brand-generic-faint;
 }

package/scss/_close-icon.scss

@@ -8,7 +8,7 @@
   }
 
   .fill {
-    fill: $c-brand-orange-faint;
+    fill: $c-brand-generic-faint;
   }
 }
 

package/scss/_custom-checkbox.scss

@@ -9,7 +9,7 @@
     z-index: 1;
 
     + label {
-      display: none;
+      @include sr-only;
     }
   }
 

package/scss/_header.scss

@@ -1,5 +1,5 @@
 header {
-  background-color: $c-brand-orange;
+  background-color: $c-brand-generic;
 
   &.videoSplash, &.powerSplash, &.cinemaSplash, &.concertSplash, &.theatreSplash {
     display: none;

package/helpers/mixins/_hide.scss

@@ -1,27 +0,0 @@
-
-@mixin hide-visually($state:"hide") {
-  @if $state == "hide" {
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(100%);
-    position: absolute;
-    overflow: hidden;
-    height: 1px;
-    padding: 0;
-    width: 1px;
-    border: 0;
-  } 
-  @if $state == "unhide" {
-    overflow: visible;
-    position: static;
-    clip-path: none;
-    height: auto;
-    width: auto;
-    clip: auto;
-  }
-}
-
-@mixin hide-text {
-  white-space: nowrap;
-  text-indent: 101%;
-  overflow: hidden;
-}

package/helpers/variables/colors/_brand.scss

@@ -1,30 +0,0 @@
-
-$c-brand-orange-faint: hsl(21, 60%, 99%);
-$c-brand-orange-light: hsl(21, 100%, 95%);
-$c-brand-orange-shade: hsl(21, 50%, 90%);
-$c-brand-orange: hsl(21, 100%, 41%);
-$c-brand-orange-dark: hsl(21, 100%, 38%);
-
-$c-brand-cinema: hsl(126, 62%, 33%);
-$c-brand-cinema-dark: darken($c-brand-cinema, 7%);
-
-$c-brand-shop-light: hsl(168, 30%, 90%);
-$c-brand-shop: hsl(168, 75%, 30%);
-$c-brand-shop-dark: hsl(168, 75%, 26%);
-
-$c-brand-classical-light: hsl(38, 53%, 95%);
-$c-brand-classical: hsl(38, 53%, 38%);
-$c-brand-classical-dark: rgb(117, 89, 36);
-
-$c-splash-videos: #0a0a0a;
-
-// membership cards
-
-$c-member: #3173DD;
-$c-member-dark: #072162;
-
-$c-patron: $c-grey-steel;
-$c-patron-light: #999999;
-
-$c-principle: #906C2C;
-$c-principle-light: #C59540;