barbican-reset 1.7.9 → 1.8.2

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');
 }

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/_programme.scss

@@ -0,0 +1,5 @@
+
+$c-brand-programme: $c-grey-night;
+$c-brand-programme-medium: hsl(0, 0%, 40%);
+$c-brand-programme-lite: hsl(0, 0%, 70%);
+$c-brand-programme-x-lite: hsl(0, 0%, 98%);

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,13 @@
+
+@import "generic";
+@import "art";
+@import "cinema";
+@import "classical";
+@import "contemporary";
+@import "membership";
+@import "programme";
+@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.9",
+  "version": "1.8.2",
   "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/_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/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;