barbican-reset 1.8.2 → 1.8.5

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

@@ -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

@@ -1,5 +1,6 @@
 
-$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%);
+$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,6 +1,8 @@
 
-$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-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,7 +1,9 @@
 
-$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-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,5 +1,6 @@
 
-$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%);
+$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,10 +1,9 @@
 
-$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%);
+
+$c-brand-generic-tint-98: tint($c-brand-generic, 98%); // faint
+$c-brand-generic-tint-82-dsat-25: desaturate(tint($c-brand-generic, 82%), 25%); // light or shade
+$c-brand-generic-tint-70: tint($c-brand-generic, 70%);
+$c-brand-generic-tint-40: tint($c-brand-generic, 40%);
+$c-brand-generic-shade-7: shade($c-brand-generic, 7%); // dark
+$c-brand-generic-shade-64: shade($c-brand-generic, 64%); // x-dark

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

@@ -1,8 +1,10 @@
 
-$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-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%);
 
 // ------------------------------

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

@@ -1,5 +1,6 @@
 
 $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%);
+
+$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/_talks.scss

@@ -1,5 +1,6 @@
 
 $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
+
+$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,5 +1,6 @@
 
 $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
+
+$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/library/gulpfile.js

@@ -0,0 +1,16 @@
+
+const gulp = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+const tilde = require('node-sass-tilde-importer');
+
+gulp.task('build:css', done => {
+  gulp.src('scss/styles.scss')
+  .pipe(sass({ importer : tilde }).on('error', sass.logError))
+  .pipe(gulp.dest('static'));
+  done();
+});
+
+gulp.task('watch', done => {
+  gulp.watch('scss/**/*.scss', gulp.series(['build:css']));
+  done();
+});

package/library/index.js

@@ -0,0 +1,13 @@
+const express = require('express')
+const app = express()
+const port = 3000
+
+// To run server: node index
+
+app.set('view engine', 'pug')
+
+app.use(express.static(__dirname + '/static'));
+
+app.get('/', (req, res) => res.render('index', { title: 'Hey', message: 'Hello there' }))
+
+app.listen(port, () => console.log(`Example app listening on port ${port}`))

package/library/scss/colors/generic.scss

@@ -0,0 +1,11 @@
+
+> li {
+  background-color: $c-brand-generic;
+
+  &.tint-98 { background-color: $c-brand-generic-tint-98; }
+  &.tint-82-dsat-25 { background-color: $c-brand-generic-tint-82-dsat-25; }
+  &.tint-70 { background-color: $c-brand-generic-tint-70; }
+  &.tint-40 { background-color: $c-brand-generic-tint-40; }
+  &.shade-7 { background-color: $c-brand-generic-shade-7; }
+  &.shade-64 { background-color: $c-brand-generic-shade-64; }
+}

package/library/scss/styles.scss

@@ -0,0 +1,30 @@
+@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-night;
+}
+
+.br-color--palette {
+  list-style: none;
+  display: flex;
+  gap: 0.125rem;
+  padding: 0;
+  margin: 0;
+
+  &.generic { @import "scss/colors/generic"; }
+}
+
+.br-color--sample {
+  background: grey;
+  height: 6.25rem;
+  width: 6.25rem; 
+} 
+

package/library/static/styles.css

@@ -0,0 +1,106 @@
+@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: #353535;
+}
+
+.br-color--palette {
+  list-style: none;
+  display: flex;
+  gap: 0.125rem;
+  padding: 0;
+  margin: 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-82-dsat-25 {
+  background-color: #f0e0d8;
+}
+.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.shade-7 {
+  background-color: #c24400;
+}
+.br-color--palette.generic > li.shade-64 {
+  background-color: #4b1a00;
+}
+
+.br-color--sample {
+  background: grey;
+  height: 6.25rem;
+  width: 6.25rem;
+}

package/library/views/index.pug

@@ -0,0 +1,16 @@
+extends layout
+block content 
+  h1 Color Palettes
+  h2 Brand
+  h3 Generic
+  ul.br-color--palette.generic
+    li.br-color--sample
+    li.br-color--sample.tint-98
+    li.br-color--sample.tint-82-dsat-25
+    li.br-color--sample.tint-70
+    li.br-color--sample.tint-40
+    li.br-color--sample.shade-7
+    li.br-color--sample.shade-64
+
+  //- include mixins/test
+  //- +test()

package/library/views/layout.pug

@@ -0,0 +1,8 @@
+html
+  head
+    title Pattern Library | Barbican Reset
+    link(rel="stylesheet" href="/styles.css")
+  body
+    .br-container--outer
+      .br-container--inner
+        block content

package/library/views/mixins/test.pug

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.8.2",
+  "version": "1.8.5",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {
@@ -13,21 +13,23 @@
     "url": "https://bitbucket.org/barbicandev/barbican-reset/"
   },
   "files": [
-    "fonts/*.{woff,woff2}",
-    "focus-visible.min.js",
     "animations/**/*",
     "components/**/*",
+    "dist/**/*",
+    "fonts/*.{woff,woff2}",
     "helpers/**/*",
     "icons/**/*",
-    "dist/**/*",
+    "library/**/*",
+    "logos/*",
     "scss/**/*",
-    "logos/*"
+    "focus-visible.min.js"
   ],
   "author": "Paul Heading",
   "license": "MIT",
   "dependencies": {
     "bootstrap": "^5.1.3",
     "bootstrap-vue": "^2.21.2",
+    "express": "^4.18.1",
     "focus-visible": "^5.2.0",
     "gsap": "^3.7.1",
     "gulp": "^4.0.2",
@@ -38,6 +40,7 @@
     "gulp-uglify": "^3.0.2",
     "node-sass-tilde-importer": "^1.0.2",
     "placeholder-loading": "^0.4.0",
+    "pug": "^3.0.2",
     "sass": "^1.41.0",
     "vue-moment": "^4.1.0",
     "vue-slick-carousel": "^1.0.6"

package/scss/_br-container.scss

@@ -0,0 +1,49 @@
+.br-container--outer {
+  padding-right: 5%;
+  padding-left: 5%;
+
+  &.splash {
+    padding-right: 10%;
+    padding-left: 10%;
+  }
+
+  &.masthead {
+    box-shadow: 0 0.375rem 0.375rem rgba(black, 0.1);
+    background-color: white;
+  }
+}
+
+.br-container--inner {
+  max-width: $layout-width-lg;
+  margin: 0 auto;
+
+  &:not(.footer) {
+    padding-bottom: 1.5rem;
+    padding-top: 1.5rem;
+
+    @include media-breakpoint-up(sm) {
+      padding-bottom: 2.5rem;
+      padding-top: 2.5rem;
+    }
+  }
+
+  &.header {
+    padding-bottom: 1.875rem;
+    padding-top: 1.875rem;
+  }
+  
+  &.thin {
+    max-width: $layout-width-sm;  
+  }
+
+  &.masthead {
+    @include media-breakpoint-up(sm) {
+      padding-bottom: 3rem;
+      padding-top: 3rem;
+    }
+
+    h1 {
+      margin: 0;
+    }
+  }
+}

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

@@ -15,6 +15,7 @@
 @import "promo";
 
 @import "br-alert";
+@import "br-container";
 @import "br-form-row";
 @import "br-loader";
 @import "br-wrap";