barbican-reset 2.2.0 → 2.2.2

package/helpers/functions/index.scss

@@ -6,10 +6,6 @@
   @return mix(black, $color, $percentage);
 }
 
-@function generic($s:100%, $l:41%) {
-  @return hsl(21, $s, $l);
-}
-
 @function input-bg($value) {
   @return rgba($value,0.08);
 }

package/helpers/mixins/_buttons.scss

@@ -336,7 +336,7 @@
 }
 
 @mixin btn-video-login {
-  @include button-solid($background: $white, $color: $c-splash-videos);
+  // @include button-solid($background: $white, $color: $c-splash-videos);
 }
 
 @mixin btn-cta {

package/helpers/variables/index.scss

@@ -1,7 +1,6 @@
-// paths more explicit for gulp-sass
-@import "colors/index";
-@import "alerts";
-@import "layout";
-@import "breakpoints";
-@import "typography";
-@import "columns";
+@import '../../patterns/scss/colors/index';
+@import 'alerts';
+@import 'layout';
+@import 'breakpoints';
+@import 'typography';
+@import 'columns';

package/package.json

@@ -1,12 +1,12 @@
 {
   "_args": [
     [
-      "barbican-reset@2.2.0",
+      "barbican-reset@2.2.2",
       "/Users/pheading/Sites/eticketing-vue"
     ]
   ],
-  "_from": "barbican-reset@2.2.0",
-  "_id": "barbican-reset@2.2.0",
+  "_from": "barbican-reset@2.2.2",
+  "_id": "barbican-reset@2.2.2",
   "_inBundle": false,
   "_integrity": "sha512-9QMrzuoZ/NZfFlFagC6go3ofn5hBhU9rtSPEeGH0krwY5dBKOlfs8oGIvqUaEGFKI+jQ3spuDOQoeyYK5NRiQw==",
   "_location": "/barbican-reset",
@@ -35,24 +35,23 @@
   "_requested": {
     "type": "version",
     "registry": true,
-    "raw": "barbican-reset@2.2.0",
+    "raw": "barbican-reset@2.2.2",
     "name": "barbican-reset",
     "escapedName": "barbican-reset",
-    "rawSpec": "2.2.0",
+    "rawSpec": "2.2.2",
     "saveSpec": null,
-    "fetchSpec": "2.2.0"
+    "fetchSpec": "2.2.2"
   },
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.0.tgz",
-  "_spec": "2.2.0",
+  "_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.2.tgz",
+  "_spec": "2.2.2",
   "_where": "/Users/pheading/Sites/eticketing-vue",
   "author": {
     "name": "Paul Heading"
   },
   "dependencies": {
-    "bootstrap": "^5.1.3",
     "bootstrap-vue": "^2.21.2",
     "express": "^4.18.1",
     "focus-visible": "^5.2.0",
@@ -70,6 +69,9 @@
     "vue-moment": "^4.1.0",
     "vue-slick-carousel": "^1.0.6"
   },
+  "devDependencies": {
+    "bootstrap": "^5.1.3"
+  },
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "files": [
     "animations/**/*",
@@ -78,7 +80,7 @@
     "fonts/*.{woff,woff2}",
     "helpers/**/*",
     "icons/**/*",
-    "library/**/*",
+    "patterns/**/*",
     "logos/*",
     "scss/**/*",
     "focus-visible.min.js"
@@ -93,8 +95,10 @@
   },
   "sass": "scss/index.scss",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve:patterns": "cd patterns && node index",
+    "watch:patterns": "cd patterns && gulp watch"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.2.0"
+  "version": "2.2.2"
 }

package/patterns/scss/colors/_brand.scss

@@ -0,0 +1,70 @@
+$c-brand-art: hsl(329, 100%, 45%);
+$c-brand-cinema: hsl(126, 62%, 33%);
+$c-brand-classical: hsl(38, 53%, 38%);
+$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%);
+
+$setup : (
+  contemporary-music : $c-brand-contemporary,
+  membership--support : $c-brand-membership,
+  tours--public-spaces : $c-brand-generic,
+  classical-music : $c-brand-classical,
+  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: ();
+
+@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%),
+  );
+  @return $map;
+}
+
+@each $key, $value in $setup {
+  $map: ();
+  $map: map-merge($map,($key: map-brands($value)));
+  $brands: map-merge($brands, $map);
+}
+
+@function brand($color, $variant: base) {
+  @return map-get(map-get($brands, $color), $variant);
+}
+
+$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: hsl(38, 53%, 95%);
+$c-brand-classical-dark: hsl(38, 53%, 30%);
+$c-brand-membership-dark: hsl(223, 87%, 21%);

package/patterns/scss/colors/_grey.scss

@@ -0,0 +1,6 @@
+$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

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

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

package/patterns/scss/styles.scss

@@ -0,0 +1,99 @@
+@import '../../node_modules/bootstrap/scss/functions';
+@import '../../node_modules/bootstrap/scss/variables';
+@import '../../node_modules/bootstrap/scss/mixins';
+@import '../../helpers/index';
+
+@import '../../scss/fonts';
+@import '../../scss/br-container';
+
+$shades: '65', '20', '10';
+$tints: '40', '70', '85', '95';
+
+@mixin brand {
+  @each $color, $variant in $brands {
+    &.brand-#{$color} {
+      @content ($color, $variant);
+    }
+  }
+}
+
+body {
+  line-height: $line-height-md;
+  font-family: $font-family;
+  color: $c-grey-l21;
+}
+
+.list.list-palette {
+  list-style: none;
+  margin: 0 0 2rem;
+  display: flex;
+  gap: 0.125rem;
+  padding: 0;
+
+  @include brand using($color, $variant) {
+    .item.item-palette {
+      background-color: brand($color);
+
+      @each $shade in $shades {
+        &.shade-#{$shade} {
+          background-color: brand($color, shade-#{$shade});
+        }
+      }
+
+      @each $tint in $tints {
+        &.tint-#{$tint} {
+          background-color: brand($color, tint-#{$tint});
+        }
+      }      
+    }
+  }
+}
+
+.list.list-palette.grey {
+  .item.item-palette {
+    &.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;
+    }
+  }
+}
+
+.list.list-palette.sample {
+  .item.item-palette {
+    background-color: $c-brand-generic-s100-l15;
+  }
+}
+
+.item.item-palette {
+  background: grey;
+  height: 6.25rem;
+  width: 6.25rem;
+}
+
+h1 {
+  border-bottom: 1px solid grey;
+  padding-bottom: 0.25rem;
+  margin: 0 0 2rem;
+}
+
+h2 {
+  margin: 0 0 1rem;
+}
+
+h3 {
+  margin: 0 0 0.5rem;
+}

package/patterns/static/styles.css

@@ -0,0 +1,434 @@
+@font-face {
+  font-family: "FuturaLTPro";
+  src: url("../fonts/FuturaLTPro-Book.woff") format("woff"), url("../fonts/FuturaLTPro-Book.woff2") format("woff2");
+  font-style: normal;
+}
+@font-face {
+  font-family: "FuturaLTPro";
+  src: url("../fonts/FuturaLTPro-BookOblique.woff") format("woff"), url("../fonts/FuturaLTPro-BookOblique.woff2") format("woff2");
+  font-style: italic;
+}
+@font-face {
+  font-family: "FuturaLTPro";
+  src: url("../fonts/FuturaLTPro-Bold.woff") format("woff"), url("../fonts/FuturaLTPro-Bold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: bold;
+}
+@font-face {
+  font-family: "FuturaLTPro";
+  src: url("../fonts/FuturaLTPro-BoldOblique.woff") format("woff"), url("../fonts/FuturaLTPro-BoldOblique.woff2") format("woff2");
+  font-style: italic;
+  font-weight: bold;
+}
+.br-container--outer {
+  padding-right: 5%;
+  padding-left: 5%;
+}
+.br-container--outer.splash {
+  padding-right: 10%;
+  padding-left: 10%;
+}
+.br-container--outer.masthead {
+  box-shadow: 0 0.375rem 0.375rem rgba(0, 0, 0, 0.1);
+  background-color: white;
+}
+
+.br-container--inner {
+  max-width: 75rem;
+  margin: 0 auto;
+}
+.br-container--inner:not(.footer) {
+  padding-bottom: 1.5rem;
+  padding-top: 1.5rem;
+}
+@media (min-width: 32.5em) {
+  .br-container--inner:not(.footer) {
+    padding-bottom: 2.5rem;
+    padding-top: 2.5rem;
+  }
+}
+.br-container--inner.header {
+  padding-bottom: 1.875rem;
+  padding-top: 1.875rem;
+}
+.br-container--inner.thin {
+  max-width: 50rem;
+}
+@media (min-width: 32.5em) {
+  .br-container--inner.masthead {
+    padding-bottom: 3rem;
+    padding-top: 3rem;
+  }
+}
+.br-container--inner.masthead h1 {
+  margin: 0;
+}
+
+body {
+  line-height: 1.4;
+  font-family: FuturaLTPro, "Helvetica", "Arial", sans-serif;
+  color: hsl(0deg, 0%, 20%);
+}
+
+.list.list-palette {
+  list-style: none;
+  margin: 0 0 2rem;
+  display: flex;
+  gap: 0.125rem;
+  padding: 0;
+}
+.list.list-palette.brand-contemporary-music .item.item-palette {
+  background-color: hsl(254deg, 44%, 33%);
+}
+.list.list-palette.brand-contemporary-music .item.item-palette.shade-65 {
+  background-color: #16102a;
+}
+.list.list-palette.brand-contemporary-music .item.item-palette.shade-20 {
+  background-color: #332661;
+}
+.list.list-palette.brand-contemporary-music .item.item-palette.shade-10 {
+  background-color: #3a2a6d;
+}
+.list.list-palette.brand-contemporary-music .item.item-palette.tint-40 {
+  background-color: #8c82af;
+}
+.list.list-palette.brand-contemporary-music .item.item-palette.tint-70 {
+  background-color: #c6c1d7;
+}
+.list.list-palette.brand-contemporary-music .item.item-palette.tint-85 {
+  background-color: #e2e0eb;
+}
+.list.list-palette.brand-contemporary-music .item.item-palette.tint-95 {
+  background-color: #f5f5f8;
+}
+.list.list-palette.brand-membership--support .item.item-palette {
+  background-color: hsl(217deg, 72%, 53%);
+}
+.list.list-palette.brand-membership--support .item.item-palette.shade-65 {
+  background-color: #11284d;
+}
+.list.list-palette.brand-membership--support .item.item-palette.shade-20 {
+  background-color: #275cb1;
+}
+.list.list-palette.brand-membership--support .item.item-palette.shade-10 {
+  background-color: #2c68c7;
+}
+.list.list-palette.brand-membership--support .item.item-palette.tint-40 {
+  background-color: #83abeb;
+}
+.list.list-palette.brand-membership--support .item.item-palette.tint-70 {
+  background-color: #c1d5f5;
+}
+.list.list-palette.brand-membership--support .item.item-palette.tint-85 {
+  background-color: #e0eafa;
+}
+.list.list-palette.brand-membership--support .item.item-palette.tint-95 {
+  background-color: #f5f8fd;
+}
+.list.list-palette.brand-tours--public-spaces .item.item-palette {
+  background-color: hsl(21deg, 100%, 41%);
+}
+.list.list-palette.brand-tours--public-spaces .item.item-palette.shade-65 {
+  background-color: #491a00;
+}
+.list.list-palette.brand-tours--public-spaces .item.item-palette.shade-20 {
+  background-color: #a73a00;
+}
+.list.list-palette.brand-tours--public-spaces .item.item-palette.shade-10 {
+  background-color: #bc4200;
+}
+.list.list-palette.brand-tours--public-spaces .item.item-palette.tint-40 {
+  background-color: #e39266;
+}
+.list.list-palette.brand-tours--public-spaces .item.item-palette.tint-70 {
+  background-color: #f1c8b3;
+}
+.list.list-palette.brand-tours--public-spaces .item.item-palette.tint-85 {
+  background-color: #f8e4d9;
+}
+.list.list-palette.brand-tours--public-spaces .item.item-palette.tint-95 {
+  background-color: #fdf6f2;
+}
+.list.list-palette.brand-classical-music .item.item-palette {
+  background-color: hsl(38deg, 53%, 38%);
+}
+.list.list-palette.brand-classical-music .item.item-palette.shade-65 {
+  background-color: #342710;
+}
+.list.list-palette.brand-classical-music .item.item-palette.shade-20 {
+  background-color: #765925;
+}
+.list.list-palette.brand-classical-music .item.item-palette.shade-10 {
+  background-color: #856429;
+}
+.list.list-palette.brand-classical-music .item.item-palette.tint-40 {
+  background-color: #bfa982;
+}
+.list.list-palette.brand-classical-music .item.item-palette.tint-70 {
+  background-color: #dfd4c0;
+}
+.list.list-palette.brand-classical-music .item.item-palette.tint-85 {
+  background-color: #efe9e0;
+}
+.list.list-palette.brand-classical-music .item.item-palette.tint-95 {
+  background-color: #faf8f5;
+}
+.list.list-palette.brand-theatre--dance .item.item-palette {
+  background-color: hsl(192deg, 99%, 31%);
+}
+.list.list-palette.brand-theatre--dance .item.item-palette.shade-65 {
+  background-color: #002c37;
+}
+.list.list-palette.brand-theatre--dance .item.item-palette.shade-20 {
+  background-color: #01657e;
+}
+.list.list-palette.brand-theatre--dance .item.item-palette.shade-10 {
+  background-color: #01718d;
+}
+.list.list-palette.brand-theatre--dance .item.item-palette.tint-40 {
+  background-color: #67b2c4;
+}
+.list.list-palette.brand-theatre--dance .item.item-palette.tint-70 {
+  background-color: #b3d8e2;
+}
+.list.list-palette.brand-theatre--dance .item.item-palette.tint-85 {
+  background-color: #d9ecf0;
+}
+.list.list-palette.brand-theatre--dance .item.item-palette.tint-95 {
+  background-color: #f2f9fa;
+}
+.list.list-palette.brand-talks--events .item.item-palette {
+  background-color: hsl(214deg, 30%, 49%);
+}
+.list.list-palette.brand-talks--events .item.item-palette.shade-65 {
+  background-color: #1e2a39;
+}
+.list.list-palette.brand-talks--events .item.item-palette.shade-20 {
+  background-color: #466082;
+}
+.list.list-palette.brand-talks--events .item.item-palette.shade-10 {
+  background-color: #4e6c92;
+}
+.list.list-palette.brand-talks--events .item.item-palette.tint-40 {
+  background-color: #9aaec7;
+}
+.list.list-palette.brand-talks--events .item.item-palette.tint-70 {
+  background-color: #cdd7e3;
+}
+.list.list-palette.brand-talks--events .item.item-palette.tint-85 {
+  background-color: #e6ebf1;
+}
+.list.list-palette.brand-talks--events .item.item-palette.tint-95 {
+  background-color: #f7f8fa;
+}
+.list.list-palette.brand-art--design .item.item-palette {
+  background-color: hsl(329deg, 100%, 45%);
+}
+.list.list-palette.brand-art--design .item.item-palette.shade-65 {
+  background-color: #51002a;
+}
+.list.list-palette.brand-art--design .item.item-palette.shade-20 {
+  background-color: #b8005f;
+}
+.list.list-palette.brand-art--design .item.item-palette.shade-10 {
+  background-color: #cf006b;
+}
+.list.list-palette.brand-art--design .item.item-palette.tint-40 {
+  background-color: #f066ad;
+}
+.list.list-palette.brand-art--design .item.item-palette.tint-70 {
+  background-color: #f8b3d6;
+}
+.list.list-palette.brand-art--design .item.item-palette.tint-85 {
+  background-color: #fbd9eb;
+}
+.list.list-palette.brand-art--design .item.item-palette.tint-95 {
+  background-color: #fef2f8;
+}
+.list.list-palette.brand-generic .item.item-palette {
+  background-color: hsl(21deg, 100%, 41%);
+}
+.list.list-palette.brand-generic .item.item-palette.shade-65 {
+  background-color: #491a00;
+}
+.list.list-palette.brand-generic .item.item-palette.shade-20 {
+  background-color: #a73a00;
+}
+.list.list-palette.brand-generic .item.item-palette.shade-10 {
+  background-color: #bc4200;
+}
+.list.list-palette.brand-generic .item.item-palette.tint-40 {
+  background-color: #e39266;
+}
+.list.list-palette.brand-generic .item.item-palette.tint-70 {
+  background-color: #f1c8b3;
+}
+.list.list-palette.brand-generic .item.item-palette.tint-85 {
+  background-color: #f8e4d9;
+}
+.list.list-palette.brand-generic .item.item-palette.tint-95 {
+  background-color: #fdf6f2;
+}
+.list.list-palette.brand-library .item.item-palette {
+  background-color: hsl(21deg, 100%, 41%);
+}
+.list.list-palette.brand-library .item.item-palette.shade-65 {
+  background-color: #491a00;
+}
+.list.list-palette.brand-library .item.item-palette.shade-20 {
+  background-color: #a73a00;
+}
+.list.list-palette.brand-library .item.item-palette.shade-10 {
+  background-color: #bc4200;
+}
+.list.list-palette.brand-library .item.item-palette.tint-40 {
+  background-color: #e39266;
+}
+.list.list-palette.brand-library .item.item-palette.tint-70 {
+  background-color: #f1c8b3;
+}
+.list.list-palette.brand-library .item.item-palette.tint-85 {
+  background-color: #f8e4d9;
+}
+.list.list-palette.brand-library .item.item-palette.tint-95 {
+  background-color: #fdf6f2;
+}
+.list.list-palette.brand-cinema .item.item-palette {
+  background-color: hsl(126deg, 62%, 33%);
+}
+.list.list-palette.brand-cinema .item.item-palette.shade-65 {
+  background-color: #0b300f;
+}
+.list.list-palette.brand-cinema .item.item-palette.shade-20 {
+  background-color: #1a6d22;
+}
+.list.list-palette.brand-cinema .item.item-palette.shade-10 {
+  background-color: #1d7a26;
+}
+.list.list-palette.brand-cinema .item.item-palette.tint-40 {
+  background-color: #79b87f;
+}
+.list.list-palette.brand-cinema .item.item-palette.tint-70 {
+  background-color: #bcdbbf;
+}
+.list.list-palette.brand-cinema .item.item-palette.tint-85 {
+  background-color: #deeddf;
+}
+.list.list-palette.brand-cinema .item.item-palette.tint-95 {
+  background-color: #f4f9f4;
+}
+.list.list-palette.brand-hire .item.item-palette {
+  background-color: hsl(21deg, 100%, 41%);
+}
+.list.list-palette.brand-hire .item.item-palette.shade-65 {
+  background-color: #491a00;
+}
+.list.list-palette.brand-hire .item.item-palette.shade-20 {
+  background-color: #a73a00;
+}
+.list.list-palette.brand-hire .item.item-palette.shade-10 {
+  background-color: #bc4200;
+}
+.list.list-palette.brand-hire .item.item-palette.tint-40 {
+  background-color: #e39266;
+}
+.list.list-palette.brand-hire .item.item-palette.tint-70 {
+  background-color: #f1c8b3;
+}
+.list.list-palette.brand-hire .item.item-palette.tint-85 {
+  background-color: #f8e4d9;
+}
+.list.list-palette.brand-hire .item.item-palette.tint-95 {
+  background-color: #fdf6f2;
+}
+.list.list-palette.brand-programme .item.item-palette {
+  background-color: hsl(0deg, 0%, 20%);
+}
+.list.list-palette.brand-programme .item.item-palette.shade-65 {
+  background-color: #121212;
+}
+.list.list-palette.brand-programme .item.item-palette.shade-20 {
+  background-color: #292929;
+}
+.list.list-palette.brand-programme .item.item-palette.shade-10 {
+  background-color: #2e2e2e;
+}
+.list.list-palette.brand-programme .item.item-palette.tint-40 {
+  background-color: #858585;
+}
+.list.list-palette.brand-programme .item.item-palette.tint-70 {
+  background-color: #c2c2c2;
+}
+.list.list-palette.brand-programme .item.item-palette.tint-85 {
+  background-color: #e0e0e0;
+}
+.list.list-palette.brand-programme .item.item-palette.tint-95 {
+  background-color: whitesmoke;
+}
+.list.list-palette.brand-shop .item.item-palette {
+  background-color: hsl(168deg, 75%, 30%);
+}
+.list.list-palette.brand-shop .item.item-palette.shade-65 {
+  background-color: #072f27;
+}
+.list.list-palette.brand-shop .item.item-palette.shade-20 {
+  background-color: #0f6b59;
+}
+.list.list-palette.brand-shop .item.item-palette.shade-10 {
+  background-color: #117964;
+}
+.list.list-palette.brand-shop .item.item-palette.tint-40 {
+  background-color: #71b6a9;
+}
+.list.list-palette.brand-shop .item.item-palette.tint-70 {
+  background-color: #b8dbd4;
+}
+.list.list-palette.brand-shop .item.item-palette.tint-85 {
+  background-color: #dcede9;
+}
+.list.list-palette.brand-shop .item.item-palette.tint-95 {
+  background-color: #f3f9f8;
+}
+
+.list.list-palette.grey .item.item-palette.l11 {
+  background-color: hsl(0deg, 0%, 10%);
+}
+.list.list-palette.grey .item.item-palette.l21 {
+  background-color: hsl(0deg, 0%, 20%);
+}
+.list.list-palette.grey .item.item-palette.l44 {
+  background-color: hsl(0deg, 0%, 35%);
+}
+.list.list-palette.grey .item.item-palette.l65 {
+  background-color: hsl(0deg, 0%, 65%);
+}
+.list.list-palette.grey .item.item-palette.l87 {
+  background-color: hsl(0deg, 0%, 85%);
+}
+.list.list-palette.grey .item.item-palette.l96 {
+  background-color: hsl(0deg, 0%, 95%);
+}
+
+.list.list-palette.sample .item.item-palette {
+  background-color: #491a00;
+}
+
+.item.item-palette {
+  background: grey;
+  height: 6.25rem;
+  width: 6.25rem;
+}
+
+h1 {
+  border-bottom: 1px solid grey;
+  padding-bottom: 0.25rem;
+  margin: 0 0 2rem;
+}
+
+h2 {
+  margin: 0 0 1rem;
+}
+
+h3 {
+  margin: 0 0 0.5rem;
+}

package/patterns/views/index.pug

@@ -0,0 +1,30 @@
+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
+
+  h2 Brand
+
+  +Samples('Contemporary','contemporary-music')
+  +Samples('Membership','membership--support')
+  +Samples('Classical','classical-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')
+
+  h2 Sample
+  ul.list.list-palette.sample
+    li.item.item-palette

package/patterns/views/mixins.pug

@@ -0,0 +1,11 @@
+mixin Samples(title, className)
+  h3.title.title-palette= title
+  ul(class='list list-palette brand-' + className)
+    li.item.item-palette.shade-65
+    li.item.item-palette.shade-20
+    li.item.item-palette.shade-10
+    li.item.item-palette
+    li.item.item-palette.tint-40
+    li.item.item-palette.tint-70
+    li.item.item-palette.tint-85
+    li.item.item-palette.tint-95

package/scss/_app.scss

@@ -26,7 +26,7 @@
   &.concertSplash,
   &.theatreSplash {
     background-image: url("/img/videos/splash-bg.jpg");
-    background-color: $c-splash-videos;
+    // background-color: $c-splash-videos;
     background-position: center -4rem;
     background-repeat: no-repeat;
     background-size: 72rem;

package/scss/_atomic.scss

@@ -1,5 +1,4 @@
-$gaps: 'margin-top', 'margin-bottom', 'min-height', 'padding-left',
-  'padding-right';
+$gaps: 'margin-top', 'margin-bottom', 'min-height', 'padding-left', 'padding-right';
 $text-aligns: 'left', 'center', 'right';
 $font-weights: '700', '400';
 $margins05: 'margin-top', 'margin-bottom', 'margin-right', 'margin-left';
@@ -80,7 +79,7 @@ $paddings05: 'padding-top', 'padding-bottom', 'padding-right', 'padding-left';
 }
 
 .background-color-alt {
-  background-color: $c-brand-generic-tint-98;
+  background-color: color(generic, tint-95);
 }
 
 .min-width-3 {

package/scss/_close-icon.scss

@@ -1,14 +1,14 @@
-
 .close-icon-svg {
   cursor: pointer;
   width: 1.875rem;
 
-  .outline, .cross {
+  .outline,
+  .cross {
     fill: $c-grey-l21;
   }
 
   .fill {
-    fill: $c-brand-generic-tint-98;
+    fill: color(generic, tint-95);
   }
 }
 
@@ -26,10 +26,11 @@
     background-color: $white;
     border-radius: 50%;
 
-    .outline, .cross {
+    .outline,
+    .cross {
       fill: $white;
     }
-  
+
     .fill {
       fill: $c-grey-l21;
     }

package/helpers/variables/colors/_grey.scss

@@ -1,7 +0,0 @@
-
-$c-grey-l11: hsl(0, 0%, 11%); // midnight
-$c-grey-l21: hsl(0, 0%, 21%); // night
-$c-grey-l44: hsl(0, 0%, 44%); // steel
-$c-grey-l65:hsl(0, 0%, 65%); // concrete
-$c-grey-l87: hsl(0, 0%, 87%); // pearl
-$c-grey-l96: hsl(0, 0%, 96%); // alpine

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

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

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

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

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

@@ -1,9 +0,0 @@
-
-$c-brand-classical: hsl(38, 53%, 38%);
-
-$c-brand-classical-tint-98: tint($c-brand-classical, 98%);
-$c-brand-classical-tint-70: tint($c-brand-classical, 70%);
-$c-brand-classical-tint-40: 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

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

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

@@ -1,14 +0,0 @@
-
-$c-brand-generic: generic(100%, 41%);
-
-$c-brand-generic-tint-98: tint($c-brand-generic, 98%);
-$c-brand-generic-tint-70: tint($c-brand-generic, 70%);
-$c-brand-generic-tint-40: tint($c-brand-generic, 40%);
-
-$c-brand-generic-s60-l99: generic(60%, 99%); // faint
-$c-brand-generic-s100-l95: generic(100%, 95%); // light
-$c-brand-generic-s50-l90: generic(50%, 90%); // shade
-$c-brand-generic-s100-l38: generic(100%, 38%); // dark
-$c-brand-generic-s100-l15: generic(100%, 15%); // x-dark
-
-$c-brand-generic-test: hsl(21, 100%, 98%);

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

@@ -1,16 +0,0 @@
-
-$c-brand-membership: hsl(217, 72%, 53%);
-
-$c-brand-membership-tint-98: tint($c-brand-membership, 98%);
-$c-brand-membership-tint-70: tint($c-brand-membership, 70%);
-$c-brand-membership-tint-40: tint($c-brand-membership, 40%);
-
-$c-brand-membership-dark: hsl(223, 87%, 21%);
-
-// ------------------------------
-
-$c-patron: $c-grey-l44;
-$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

@@ -1,6 +0,0 @@
-
-$c-brand-programme: $c-grey-l21;
-
-$c-brand-programme-tint-98: tint($c-brand-programme, 98%);
-$c-brand-programme-tint-70: tint($c-brand-programme, 70%);
-$c-brand-programme-tint-40: tint($c-brand-programme, 40%);

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

@@ -1,4 +0,0 @@
-
-$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

@@ -1,6 +0,0 @@
-
-$c-brand-talks: hsl(214, 30%, 49%);
-
-$c-brand-talks-tint-98: tint($c-brand-talks, 98%);
-$c-brand-talks-tint-70: tint($c-brand-talks, 70%);
-$c-brand-talks-tint-40: tint($c-brand-talks, 40%);

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

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

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

@@ -1,13 +0,0 @@
-
-@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/library/scss/colors/generic.scss

@@ -1,13 +0,0 @@
-
-> li {
-  background-color: $c-brand-generic; 
-
-  &.tint-98 { background-color: $c-brand-generic-tint-98; }
-  &.tint-70 { background-color: $c-brand-generic-tint-70; }
-  &.tint-40 { background-color: $c-brand-generic-tint-40; }
-  &.s60-l99 { background-color: $c-brand-generic-s60-l99; }
-  &.s100-l95 { background-color: $c-brand-generic-s100-l95; }
-  &.s50-l90 { background-color: $c-brand-generic-s50-l90; }
-  &.s100-l38 { background-color: $c-brand-generic-s100-l38; }
-  &.s100-l15 { background-color: $c-brand-generic-s100-l15; }
-}

package/library/scss/colors/grey.scss

@@ -1,9 +0,0 @@
-
-> li {
-  &.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; }
-}

package/library/scss/styles.scss

@@ -1,53 +0,0 @@
-@import "../../node_modules/bootstrap/scss/functions";
-@import "../../node_modules/bootstrap/scss/variables";
-@import "../../node_modules/bootstrap/scss/mixins";
-@import "../../helpers/index";
-
-@import "../../scss/fonts";
-@import "../../scss/br-container"; 
-
-body {
-  line-height: $line-height-md; 
-  font-family: $font-family;
-  color: $c-grey-l21;
-} 
-
-.br-color--palette {
-  list-style: none;
-  margin: 0 0 2rem;
-  display: flex;
-  gap: 0.125rem;
-  padding: 0;
-
-  &.generic { @import "scss/colors/generic"; }
-  &.grey { @import "scss/colors/grey"; }
-}
-
-.br-color--sample {
-  background: grey;
-  height: 6.25rem;
-  width: 6.25rem;
-  
-  &.test { 
-    text-transform: uppercase;
-    place-content: center;
-    font-weight: bold;
-    color: grey;
-    display: grid;
-  }
-} 
-
-h1 {
-  border-bottom: 1px solid grey;
-  padding-bottom: 0.25rem;
-  margin: 0 0 2rem;
-}
-
-h2 {
-  margin: 0 0 1rem;
-}
-
-h3 {
-  margin: 0 0 0.5rem;
-}
-

package/library/static/styles.css

@@ -1,151 +0,0 @@
-@font-face {
-  font-family: "FuturaLTPro";
-  src: url("../fonts/FuturaLTPro-Book.woff") format("woff"), url("../fonts/FuturaLTPro-Book.woff2") format("woff2");
-  font-style: normal;
-}
-@font-face {
-  font-family: "FuturaLTPro";
-  src: url("../fonts/FuturaLTPro-BookOblique.woff") format("woff"), url("../fonts/FuturaLTPro-BookOblique.woff2") format("woff2");
-  font-style: italic;
-}
-@font-face {
-  font-family: "FuturaLTPro";
-  src: url("../fonts/FuturaLTPro-Bold.woff") format("woff"), url("../fonts/FuturaLTPro-Bold.woff2") format("woff2");
-  font-style: normal;
-  font-weight: bold;
-}
-@font-face {
-  font-family: "FuturaLTPro";
-  src: url("../fonts/FuturaLTPro-BoldOblique.woff") format("woff"), url("../fonts/FuturaLTPro-BoldOblique.woff2") format("woff2");
-  font-style: italic;
-  font-weight: bold;
-}
-.br-container--outer {
-  padding-right: 5%;
-  padding-left: 5%;
-}
-.br-container--outer.splash {
-  padding-right: 10%;
-  padding-left: 10%;
-}
-.br-container--outer.masthead {
-  box-shadow: 0 0.375rem 0.375rem rgba(0, 0, 0, 0.1);
-  background-color: white;
-}
-
-.br-container--inner {
-  max-width: 75rem;
-  margin: 0 auto;
-}
-.br-container--inner:not(.footer) {
-  padding-bottom: 1.5rem;
-  padding-top: 1.5rem;
-}
-@media (min-width: 32.5em) {
-  .br-container--inner:not(.footer) {
-    padding-bottom: 2.5rem;
-    padding-top: 2.5rem;
-  }
-}
-.br-container--inner.header {
-  padding-bottom: 1.875rem;
-  padding-top: 1.875rem;
-}
-.br-container--inner.thin {
-  max-width: 50rem;
-}
-@media (min-width: 32.5em) {
-  .br-container--inner.masthead {
-    padding-bottom: 3rem;
-    padding-top: 3rem;
-  }
-}
-.br-container--inner.masthead h1 {
-  margin: 0;
-}
-
-body {
-  line-height: 1.4;
-  font-family: FuturaLTPro, "Helvetica", "Arial", sans-serif;
-  color: hsl(0deg, 0%, 21%);
-}
-
-.br-color--palette {
-  list-style: none;
-  margin: 0 0 2rem;
-  display: flex;
-  gap: 0.125rem;
-  padding: 0;
-}
-.br-color--palette.generic > li {
-  background-color: hsl(21deg, 100%, 41%);
-}
-.br-color--palette.generic > li.tint-98 {
-  background-color: #fefbfa;
-}
-.br-color--palette.generic > li.tint-70 {
-  background-color: #f1c8b3;
-}
-.br-color--palette.generic > li.tint-40 {
-  background-color: #e39266;
-}
-.br-color--palette.generic > li.s60-l99 {
-  background-color: hsl(21deg, 60%, 99%);
-}
-.br-color--palette.generic > li.s100-l95 {
-  background-color: hsl(21deg, 100%, 95%);
-}
-.br-color--palette.generic > li.s50-l90 {
-  background-color: hsl(21deg, 50%, 90%);
-}
-.br-color--palette.generic > li.s100-l38 {
-  background-color: hsl(21deg, 100%, 38%);
-}
-.br-color--palette.generic > li.s100-l15 {
-  background-color: hsl(21deg, 100%, 15%);
-}
-.br-color--palette.grey > li.l11 {
-  background-color: hsl(0deg, 0%, 11%);
-}
-.br-color--palette.grey > li.l21 {
-  background-color: hsl(0deg, 0%, 21%);
-}
-.br-color--palette.grey > li.l44 {
-  background-color: hsl(0deg, 0%, 44%);
-}
-.br-color--palette.grey > li.l65 {
-  background-color: hsl(0deg, 0%, 65%);
-}
-.br-color--palette.grey > li.l87 {
-  background-color: hsl(0deg, 0%, 87%);
-}
-.br-color--palette.grey > li.l96 {
-  background-color: hsl(0deg, 0%, 96%);
-}
-
-.br-color--sample {
-  background: grey;
-  height: 6.25rem;
-  width: 6.25rem;
-}
-.br-color--sample.test {
-  text-transform: uppercase;
-  place-content: center;
-  font-weight: bold;
-  color: grey;
-  display: grid;
-}
-
-h1 {
-  border-bottom: 1px solid grey;
-  padding-bottom: 0.25rem;
-  margin: 0 0 2rem;
-}
-
-h2 {
-  margin: 0 0 1rem;
-}
-
-h3 {
-  margin: 0 0 0.5rem;
-}

package/library/views/index.pug

@@ -1,29 +0,0 @@
-extends layout
-block content 
-  h1 Color Palettes
-  
-  h2 Grey
-  ul.br-color--palette.grey
-    li.br-color--sample.l11
-    li.br-color--sample.l21
-    li.br-color--sample.l44
-    li.br-color--sample.l65
-    li.br-color--sample.l87
-    li.br-color--sample.l96
-
-  h2 Brand
-
-  h3 Generic
-  ul.br-color--palette.generic
-    li.br-color--sample
-    li.br-color--sample.tint-98
-    li.br-color--sample.tint-70
-    li.br-color--sample.tint-40
-    li.br-color--sample.s60-l99
-    li.br-color--sample.s100-l95
-    li.br-color--sample.s50-l90
-    li.br-color--sample.s100-l38
-    li.br-color--sample.s100-l15
-
-  //- include mixins/test
-  //- +test()

package/library/views/mixins/test.pug

@@ -1,2 +0,0 @@
-mixin test()
-  div test worked