barbican-reset 1.8.3 → 1.8.6

package/helpers/functions/index.scss

@@ -4,4 +4,8 @@
 
 @function shade($color, $percentage) {
   @return mix(black, $color, $percentage);
+}
+
+@function generic($s:100%, $l:41%) {
+  @return hsl(21, $s, $l);
 }

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

@@ -1,6 +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%);
+$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,7 +1,8 @@
 
 $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-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,8 +1,9 @@
 
 $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-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 +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%);
+$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,11 +1,14 @@
 
-$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%);
+$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,9 +1,10 @@
 
 $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-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,6 +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%);
+$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,6 +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%);
+$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 +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%);
+$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,13 @@
+
+> 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/styles.scss

@@ -0,0 +1,38 @@
+@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;
+  
+  &.test { 
+    text-transform: uppercase;
+    place-content: center;
+    font-weight: bold;
+    color: grey;
+    display: grid;
+  }
+} 
+

package/library/static/styles.css

@@ -0,0 +1,119 @@
+@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-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--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;
+}

package/library/views/index.pug

@@ -0,0 +1,18 @@
+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-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/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.3",
+  "version": "1.8.6",
   "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/_atomic.scss

@@ -76,5 +76,5 @@ $paddings05: "padding-top", "padding-bottom", "padding-right", "padding-left";
 }
 
 .background-color-alt {
-  background-color: $c-brand-generic-faint;
+  background-color: $c-brand-generic-tint-98;
 }

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/_close-icon.scss

@@ -8,7 +8,7 @@
   }
 
   .fill {
-    fill: $c-brand-generic-faint;
+    fill: $c-brand-generic-tint-98;
   }
 }
 

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";