barbican-reset 3.4.0 → 3.6.0

package/package.json

@@ -70,7 +70,8 @@
     "pug": "^3.0.2",
     "sass": "^1.41.0",
     "sassdoc": "^2.7.4",
-    "serve-favicon": "^2.5.0"
+    "serve-favicon": "^2.5.0",
+    "vue": "^3.5.18"
   },
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "files": [
@@ -101,6 +102,9 @@
     ],
     "#styles/*": [
       "./scss/*"
+    ],
+    "#helpers/*": [
+      "./scss/helpers/*"
     ]
   },
   "exports": {
@@ -124,10 +128,11 @@
     "url": "git+https://bitbucket.org/barbicandev/barbican-reset.git"
   },
   "scripts": {
+    "build:css": "gulp build:css",
     "serve:patterns": "cd patterns && node index",
     "watch:patterns": "cd patterns && gulp watch",
     "style:patterns": "cd patterns && gulp build:css",
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
-  "version": "3.4.0"
+  "version": "3.6.0"
 }

package/patterns/scss/styles.scss

@@ -1,8 +1,8 @@
-@import "../../scss/helpers";
+@use "../../scss/helpers";
 
-@import "../../scss/br-alert";
-@import "../../scss/br-button";
-@import "../../scss/br-container";
+@use "../../scss/br-alert";
+@use "../../scss/br-button";
+@use "../../scss/br-container";
 
 $shades: "65", "20", "10";
 $tints: "40", "70", "88", "95";

package/scss/_app.scss

@@ -1,28 +1,8 @@
+@use "helpers/mixins/breakpoints" as *;
+
 #app {
   flex-direction: column;
   min-height: 100vh;
   min-width: 100%;
   display: flex;
-}
-
-#app {
-
-  &.videoSplash,
-  &.cinemaSplash,
-  &.concertSplash,
-  &.theatreSplash {
-    // @TODO:
-    // This image/path is specific to the ticketing app, which means it may break
-    // when used in another project or if that path changes. These styles should be moved
-    // to the ticketing app as they're not relevant to other projects.
-    background-image: url("../public/img/videos/splash-bg.jpg");
-    // background-color: $c-splash-videos;
-    background-position: center -4rem;
-    background-repeat: no-repeat;
-    background-size: 72rem;
-
-    @include xx-large-up {
-      background-position: center top;
-    }
-  }
 }

package/scss/_atomic.scss

@@ -1,8 +1,15 @@
-@import "atomic/font-weights";
-@import "atomic/margins";
-@import "atomic/min-heights";
-@import "atomic/paddings";
-@import "atomic/text-aligns";
+@use "helpers/variables/layout" as *;
+@use "helpers/variables/colors" as *;
+@use "helpers/variables/typography" as *;
+@use "helpers/variables" as *;
+@use "helpers/mixins/core" as *;
+@use "helpers/functions" as *;
+
+@use "atomic/font-weights";
+@use "atomic/margins";
+@use "atomic/min-heights";
+@use "atomic/paddings";
+@use "atomic/text-aligns";
 
 .border-radius-lg {
   border-radius: $br-border-radius-lg;

package/scss/_br-alert.scss

@@ -1,3 +1,8 @@
+@use "helpers/mixins/br-alert" as *;
+@use "helpers/variables/alerts" as *;
+@use "helpers/mixins/core" as *;
+@use "helpers/mixins/buttons/custom" as *;
+
 /// @group Components
 /// BrAlert component class
 /// @example .br-alert.center .wrap.inline.error

package/scss/_br-button.scss

@@ -1,3 +1,6 @@
+@use "helpers/mixins/focus" as *;
+@use "helpers/mixins/buttons" as *;
+
 /// Button component setup class. 
 /// Used in combination with a button style class
 /// @group Buttons

package/scss/_br-checkbox.scss

@@ -1,3 +1,9 @@
+@use "helpers/mixins/breakpoints" as *;
+@use "helpers/mixins/core" as *;
+@use "helpers/mixins/input" as *;
+@use "helpers/mixins/focus" as *;
+@use "helpers/variables/colors" as *;
+
 // deprecate custom-checkbox class. br-checkbox is more descriptive
 
 .br-checkbox,

package/scss/_br-container.scss

@@ -1,3 +1,6 @@
+@use "helpers/mixins/breakpoints" as *;
+@use "helpers/variables/layout" as *;
+
 .br-container--outer {
   padding-right: 5%;
   padding-left: 5%;

package/scss/_br-footer.scss

@@ -1,3 +1,4 @@
+@use "helpers/mixins/br-footer" as *;
 
 .br-footer-upper {
   @include br-footer-upper;

package/scss/_br-form-password.scss

@@ -1,3 +1,5 @@
+@use "helpers/mixins/br-form-password" as *;
+
 .br-form-password {
   @include br-form-password;
-}
+}

package/scss/_br-form-row.scss

@@ -1,3 +1,6 @@
+@use "helpers/mixins/br-form-row" as *;
+@use "helpers/mixins/breakpoints" as *;
+
 .br-form-row {
   @include br-form-row;
 

package/scss/_br-form-update.scss

@@ -1,7 +1,9 @@
+@use "helpers/mixins/br-form-update" as *;
+
 .br-form-update {
   @include br-form-update;
 }
 
 .br-form-update--input {
   @include br-form-update--input;
-}
+}

package/scss/_br-loader.scss

@@ -1,3 +1,8 @@
+@use "helpers/functions" as *;
+@use "helpers/mixins/core" as *;
+@use "helpers/mixins/loading" as *;
+@use "helpers/variables/colors" as *;
+
 $offset: toRem(14);
 $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 

package/scss/_br-promo.scss

@@ -1,3 +1,5 @@
+@use "helpers/mixins/basket" as *;
+
 .br-promo-form {
   @include basket-row-grid;
   margin-top: 0.5rem;
@@ -12,4 +14,4 @@
   align-items: center;
   display: flex;
   gap: 1rem;
-}
+}

package/scss/_br-radio.scss

@@ -1,3 +1,6 @@
+@use "helpers/mixins/input" as *;
+@use "helpers/variables/colors" as *;
+
 [role="radiogroup"] {
   margin: -0.25rem;
 }

package/scss/_br-select.scss

@@ -1,3 +1,5 @@
+@use "helpers/mixins/input" as *;
+
 .custom-select {
   @include br-select;
 }

package/scss/_br-skiplink.scss

@@ -1,3 +1,5 @@
+@use "helpers/mixins/br-skiplink" as *;
+
 .br-skiplink {
   @include br-skiplink;
 }

package/scss/_br-wrap.scss

@@ -1,3 +1,5 @@
+@use "helpers/variables/layout" as *;
+
 .br-wrap {
   max-width: $layout-width-lg;
   margin-right: auto;

package/scss/_card-deck.scss

@@ -1,3 +1,7 @@
+@use "helpers/variables/layout" as *;
+@use "helpers/variables/typography" as *;
+@use "helpers/mixins/breakpoints" as *;
+
 .card-deck {
   justify-content: center;
   display: grid;

package/scss/_city-of-london.scss

@@ -1,3 +1,4 @@
+@use "helpers/mixins/city-of-london" as *;
 
 .city-of-london-lockup {
   @include city-of-london-lockup;

package/scss/_close-icon.scss

@@ -1,3 +1,7 @@
+@use "helpers/variables/colors/grey" as *;
+@use "helpers/mixins/focus" as *;
+@use "helpers/mixins/core" as *;
+
 .close-icon-svg {
   cursor: pointer;
   width: 1.875rem;

package/scss/_font.scss

@@ -1,13 +1,13 @@
 $name: "Supreme";
 $variant: "LLWeb";
-$path: "https://static.barbican.org.uk/systems-public/fonts";
+$path: "https://static.barbican.org.uk/systems-public/fonts/subset";
 
 @font-face {
   font-family: $name;
   src: url("#{$path}/#{$name}#{$variant}-Black.woff") format("woff"),
   url("#{$path}/#{$name}#{$variant}-Black.woff2") format("woff2");
   font-style: normal;
-  font-weight: bold;
+  font-weight: 800;
 }
 
 @font-face {
@@ -15,15 +15,14 @@ $path: "https://static.barbican.org.uk/systems-public/fonts";
   src: url("#{$path}/#{$name}#{$variant}-BlackItalic.woff") format("woff"),
   url("#{$path}/#{$name}#{$variant}-BlackItalic.woff2") format("woff2");
   font-style: italic;
-  font-weight: bold;
+  font-weight: 800;
 }
 
 @font-face {
   font-family: $name;
-  src: url("#{$path}/#{$name}#{$variant}-Regular.woff") format("woff"),
-  url("#{$path}/#{$name}#{$variant}-Regular.woff2") format("woff2");
+  src: url("#{$path}/#{$name}#{$variant}-Regular.woff2") format("woff2");
   font-style: normal;
-  font-weight: bolder;
+  font-weight: 600;
 }
 
 @font-face {
@@ -31,7 +30,7 @@ $path: "https://static.barbican.org.uk/systems-public/fonts";
   src: url("#{$path}/#{$name}#{$variant}-Italic.woff") format("woff"),
   url("#{$path}/#{$name}#{$variant}-Italic.woff2") format("woff2");
   font-style: italic;
-  font-weight: bolder;
+  font-weight: 600;
 }
 
 @font-face {
@@ -39,7 +38,7 @@ $path: "https://static.barbican.org.uk/systems-public/fonts";
   src: url("#{$path}/#{$name}#{$variant}-Light.woff") format("woff"),
   url("#{$path}/#{$name}#{$variant}-Light.woff2") format("woff2");
   font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
 }
 
 @font-face {
@@ -47,5 +46,5 @@ $path: "https://static.barbican.org.uk/systems-public/fonts";
   src: url("#{$path}/#{$name}#{$variant}-LightItalic.woff") format("woff"),
   url("#{$path}/#{$name}#{$variant}-LightItalic.woff2") format("woff2");
   font-style: italic;
-  font-weight: normal;
+  font-weight: 400;
 }

package/scss/_footer.scss

@@ -1,4 +1,6 @@
-footer {
+@use "helpers/variables/colors" as *;
+
+.footer--eticketing {
   color: white;
 
   &:not(.splash) {

package/scss/_header.scss

@@ -1,4 +1,6 @@
-.header {
+@use "helpers/variables/colors" as *;
+
+.header--eticketing {
   background-color: $c-brand-generic;
   color: white;
 
@@ -8,4 +10,4 @@
   &.theatreSplash {
     display: none;
   }
-}
+}

package/scss/_helpers.scss

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

package/scss/_input.scss

@@ -1,3 +1,8 @@
+@use "helpers/mixins/input" as *;
+@use "helpers/mixins/focus" as *;
+@use "helpers/variables/layout" as *;
+@use "helpers/variables/colors" as *;
+
 .form-control {
   @include focus {
     @include input-focus-defaults;

package/scss/_main.scss

@@ -1,3 +1,5 @@
+@use "helpers/mixins/breakpoints" as *;
+
 main {
 
   &.videoSplash,

package/scss/_table.scss

@@ -1,3 +1,18 @@
+@use "helpers/mixins/table/basket";
+@use "helpers/mixins/table/details";
+@use "helpers/mixins/table/gifts";
+@use "helpers/mixins/table/etickets";
+@use "helpers/mixins/table/membership";
+@use "helpers/mixins/table/simple";
+@use "helpers/mixins/table/preferences";
+@use "helpers/mixins/table/resale";
+@use "helpers/mixins/table/section";
+@use "helpers/mixins/table/tickets";
+@use "helpers/mixins/table/orders";
+@use "helpers/mixins/table/generic";
+@use "helpers/mixins/table/row/disabled";
+@use "helpers/variables/columns";
+
 table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -5,54 +20,54 @@ table {
   width: 100%;
 
   &.basket {
-    @include basket-table;
+    @include basket.table;
   }
 
   &.details {
-    @include details-table;
+    @include details.table;
   }
 
   &.gifts {
-    @include gifts-table;
+    @include gifts.table;
   }
 
   &.etickets {
-    @include etickets-table;
+    @include etickets.table;
   }
 
   &.details.membership {
-    @include membership-table;
+    @include membership.table;
   }
 
   &.details.simple {
-    @include simple-table;
+    @include simple.table;
   }
 
   &.preferences {
-    @include preferences-table;
+    @include preferences.table;
   }
 
   &.resale {
-    @include resale-table;
+    @include resale.table;
   }
 
   &.section {
-    @include section-table;
+    @include section.table;
   }
 
   &.tickets {
-    @include tickets-table;
+    @include tickets.table;
   }
 }
 
 table.orders {
-  @include orders-table($columns-orders);
-  @include default-table-style;
+  @include orders.table(columns.$orders);
+  @include generic.table-style;
 }
 
 tr {
   &[disabled=disabled] {
-    @include disabled-row;
+    @include disabled.row;
   }
 }
 

package/scss/card/_account.scss

@@ -1,3 +1,5 @@
+@use "../helpers" as *;
+
 .card[account] {
   margin-top: $gap-account;
   position: relative;

package/scss/card/_block.scss

@@ -1,3 +1,4 @@
+@use "../helpers" as *;
 
 .card[block] {
   box-shadow: $box-shadow-card;

package/scss/card/_confirm.scss

@@ -1,3 +1,5 @@
+@use "../helpers" as *;
+
 .card[confirm] {
   @include br-form-card;
   margin-right: auto;

package/scss/card/_login.scss

@@ -1,3 +1,5 @@
+@use "../helpers" as *;
+
 .card[login] {
 
   .card-header {

package/scss/card/_membership.scss

@@ -1,3 +1,5 @@
+@use "../helpers" as *;
+
 $angle: 120deg;
 $c-yb-membership-card-1: #8205FF;
 $c-yb-membership-card-2: #C030AC;

package/scss/card/_password.scss

@@ -1,3 +1,5 @@
+@use "../helpers" as *;
+
 .card[password] {
   @include br-form-card;
 

package/scss/card/_related.scss

@@ -1,9 +1,10 @@
+@use "../helpers" as *;
 
 .card[related] {
   border: 1px solid $c-grey-l87;
   overflow: hidden;
 
-  + .card {
+  +.card {
     margin-top: 0;
   }
 
@@ -25,7 +26,7 @@
     margin-bottom: 0.5rem;
   }
 
-  * + .card-text[date] {
+  *+.card-text[date] {
     margin-top: 0.75rem;
   }
 }

package/scss/card/_video-help.scss

@@ -1,3 +1,4 @@
+@use "../helpers" as *;
 
 $border: 1px solid $c-grey-l87;
 
@@ -16,7 +17,7 @@ $border: 1px solid $c-grey-l87;
     border-bottom: 0;
   }
 
-  + .card {
+  +.card {
     margin-top: 0;
   }
 

package/scss/card/index.scss

@@ -1,12 +1,14 @@
-@import "confirm";
-@import "login";
-@import "password";
-@import "account";
-@import "video-help";
-@import "related";
-@import "block";
-@import "membership";
-@import "slim";
+@use "../helpers" as *;
+
+@use "account";
+@use "block";
+@use "confirm";
+@use "login";
+@use "membership";
+@use "password";
+@use "related";
+@use "slim";
+@use "video-help";
 
 .card {
   @include br-card;

package/scss/helpers/functions/index.scss

@@ -1,9 +1,11 @@
+@use "sass:color";
+
 @function tint($color, $percentage) {
-  @return mix(white, $color, $percentage);
+  @return color.mix(white, $color, $percentage);
 }
 
 @function shade($color, $percentage) {
-  @return mix(black, $color, $percentage);
+  @return color.mix(black, $color, $percentage);
 }
 
 @function input-bg($value) {

package/scss/helpers/mixins/_basket.scss

@@ -1,3 +1,5 @@
+@use "../mixins/breakpoints" as *;
+
 @mixin summary-sm {
   @include medium-down {
     @content;

package/scss/helpers/mixins/_br-alert.scss

@@ -1,3 +1,10 @@
+@use "../mixins/focus" as *;
+@use "../mixins/breakpoints" as *;
+@use "../variables/layout" as *;
+@use "../variables/typography" as *;
+@use "../variables/alerts" as *;
+@use "../functions" as *;
+
 @mixin br-alert-wrap--setup {
   border-radius: $br-border-radius-lg;
   border-width: $border-width;

package/scss/helpers/mixins/_br-card.scss

@@ -1,3 +1,8 @@
+@use "../variables/colors" as *;
+@use "../variables/layout" as *;
+@use "../variables/typography" as *;
+@use "../mixins/breakpoints" as *;
+
 @mixin br-card {
   border: 1px solid $c-grey-l87;
   border-radius: $br-border-radius-lg;

package/scss/helpers/mixins/_br-footer.scss

@@ -1,3 +1,6 @@
+@use "../mixins/focus" as *;
+@use "../mixins/breakpoints" as *;
+
 @mixin br-footer-upper {
   padding-top: 4rem;
   display: grid;

package/scss/helpers/mixins/_br-form-row.scss

@@ -1,3 +1,6 @@
+@use "../mixins/breakpoints" as *;
+@use "../variables/layout" as *;
+
 @mixin br-form-row {
   &:not(:last-of-type) {
     margin-bottom: 1rem;

package/scss/helpers/mixins/_br-form-update.scss

@@ -1,3 +1,6 @@
+@use "../mixins/breakpoints" as *;
+@use "../mixins/input/text" as *;
+
 @mixin br-form-update {
   display: grid;
   gap: 1rem;

package/scss/helpers/mixins/_br-skiplink.scss

@@ -1,3 +1,6 @@
+@use "../mixins/focus" as *;
+@use "../variables/colors" as *;
+
 @mixin br-skiplink {
   border: 1px solid $c-grey-l21;
   background-color: white;