barbican-reset 2.2.1 → 2.2.3

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.1",
+      "barbican-reset@2.2.3",
       "/Users/pheading/Sites/eticketing-vue"
     ]
   ],
-  "_from": "barbican-reset@2.2.1",
-  "_id": "barbican-reset@2.2.1",
+  "_from": "barbican-reset@2.2.3",
+  "_id": "barbican-reset@2.2.3",
   "_inBundle": false,
   "_integrity": "sha512-9QMrzuoZ/NZfFlFagC6go3ofn5hBhU9rtSPEeGH0krwY5dBKOlfs8oGIvqUaEGFKI+jQ3spuDOQoeyYK5NRiQw==",
   "_location": "/barbican-reset",
@@ -35,18 +35,18 @@
   "_requested": {
     "type": "version",
     "registry": true,
-    "raw": "barbican-reset@2.2.1",
+    "raw": "barbican-reset@2.2.3",
     "name": "barbican-reset",
     "escapedName": "barbican-reset",
-    "rawSpec": "2.2.1",
+    "rawSpec": "2.2.3",
     "saveSpec": null,
-    "fetchSpec": "2.2.1"
+    "fetchSpec": "2.2.3"
   },
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.1.tgz",
-  "_spec": "2.2.1",
+  "_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.3.tgz",
+  "_spec": "2.2.3",
   "_where": "/Users/pheading/Sites/eticketing-vue",
   "author": {
     "name": "Paul Heading"
@@ -80,7 +80,7 @@
     "fonts/*.{woff,woff2}",
     "helpers/**/*",
     "icons/**/*",
-    "library/**/*",
+    "patterns/**/*",
     "logos/*",
     "scss/**/*",
     "focus-visible.min.js"
@@ -95,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.1"
+  "version": "2.2.3"
 }

package/patterns/scss/colors/_brand.scss

@@ -0,0 +1,72 @@
+$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,
+  talks--workshops : $c-brand-talks, // deprecated
+  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%),
+    tint-98: tint($color, 98%),
+  );
+  @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: 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/_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-membership-dark;
+  }
+}
+
+.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;
+}