barbican-reset 1.8.0 → 1.8.3

package/helpers/functions/index.scss

@@ -0,0 +1,7 @@
+@function tint($color, $percentage) {
+  @return mix(white, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+  @return mix(black, $color, $percentage);
+}

package/helpers/index.scss

@@ -1,3 +1,4 @@
 // paths more explicit for gulp-sass
+@import "functions/index";
 @import "variables/index";
 @import "mixins/index";

package/helpers/mixins/_buttons.scss

@@ -39,7 +39,7 @@
 }
 
 @mixin button-solid(
-  $background: $c-brand-orange, 
+  $background: $c-brand-generic, 
   $color: $white, 
   $border: 1px,
   $padding: false,
@@ -76,7 +76,7 @@
 }
 
 @mixin button-outline(
-  $color: $c-brand-orange,
+  $color: $c-brand-generic,
   $background: $white, 
   $border: 1px,
   $padding: false,
@@ -167,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');
 }
@@ -279,10 +279,10 @@
 
   @include focus {
     &.member {
-      color: $c-member;
+      color: $c-brand-membership;
     }
     &.member-plus {
-      color: $c-member-dark;
+      color: $c-brand-membership-dark;
     }
   }
 }

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

@@ -0,0 +1,6 @@
+
+$c-brand-art: hsl(329, 100%, 45%);
+
+$c-brand-art-x-lite: tint($c-brand-art, 98%);
+$c-brand-art-lite: tint($c-brand-art, 70%);
+$c-brand-art-medium: tint($c-brand-art, 40%);

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

@@ -0,0 +1,7 @@
+
+$c-brand-cinema: hsl(126, 62%, 33%);
+
+$c-brand-cinema-x-lite: tint($c-brand-cinema, 98%);
+$c-brand-cinema-lite: tint($c-brand-cinema, 70%);
+$c-brand-cinema-medium: tint($c-brand-cinema, 40%);
+$c-brand-cinema-dark: darken($c-brand-cinema, 7%);

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

@@ -0,0 +1,8 @@
+
+$c-brand-classical: hsl(38, 53%, 38%);
+
+$c-brand-classical-x-lite: tint($c-brand-classical, 98%);
+$c-brand-classical-lite: tint($c-brand-classical, 70%);
+$c-brand-classical-medium: tint($c-brand-classical, 40%);
+$c-brand-classical-light: hsl(38, 53%, 95%);
+$c-brand-classical-dark: hsl(38, 53%, 30%);

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

@@ -0,0 +1,6 @@
+
+$c-brand-contemporary: hsl(254, 44%, 33%);
+
+$c-brand-contemporary-x-lite: tint($c-brand-contemporary, 98%);
+$c-brand-contemporary-lite: tint($c-brand-contemporary, 70%);
+$c-brand-contemporary-medium: tint($c-brand-contemporary, 40%);

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

@@ -0,0 +1,11 @@
+
+$c-brand-generic: hsl(21, 100%, 41%);
+
+$c-brand-generic-x-lite: tint($c-brand-generic, 98%);
+$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: tint($c-brand-generic, 70%);
+$c-brand-generic-medium: tint($c-brand-generic, 40%);
+$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,15 @@
+
+$c-brand-membership: hsl(217, 72%, 53%);
+
+$c-brand-membership-x-lite: tint($c-brand-membership, 98%);
+$c-brand-membership-lite: tint($c-brand-membership, 70%);
+$c-brand-membership-medium: tint($c-brand-membership, 40%);
+$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,6 @@
+
+$c-brand-programme: $c-grey-night;
+
+$c-brand-programme-x-lite: tint($c-brand-programme, 98%);
+$c-brand-programme-lite: tint($c-brand-programme, 70%);
+$c-brand-programme-medium: tint($c-brand-programme, 40%);

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,6 @@
+
+$c-brand-talks: hsl(214, 30%, 49%);
+
+$c-brand-talks-x-lite: tint($c-brand-talks, 98%);
+$c-brand-talks-lite: tint($c-brand-talks, 70%);
+$c-brand-talks-medium: tint($c-brand-talks, 40%);

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

@@ -0,0 +1,6 @@
+
+$c-brand-theatre: hsl(192, 99%, 31%);
+
+$c-brand-theatre-x-lite: tint($c-brand-theatre, 98%);
+$c-brand-theatre-lite: tint($c-brand-theatre, 70%);
+$c-brand-theatre-medium: tint($c-brand-theatre, 40%);

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.8.0",
+  "version": "1.8.3",
   "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/scss/card/_membership.scss

@@ -25,12 +25,12 @@ $angle: 120deg;
   }
 
   &.member {
-    background-color: $c-member;
+    background-color: $c-brand-membership;
   }
 
   &.member-plus {
-    background-color: $c-member-dark;
-    background-image: linear-gradient($angle, $c-member-dark 20%, $c-member 100%);
+    background-color: $c-brand-membership-dark;
+    background-image: linear-gradient($angle, $c-brand-membership-dark 20%, $c-brand-membership 100%);
   }
   
   &.patron, &.premier-patron {

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;