barbican-reset 3.3.0 → 3.5.0

package/focus-visible.min.js

@@ -1,2 +1,146 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t():"function"==typeof define&&define.amd?define(t):t()}(0,function(){"use strict";function e(e){var t=!0,n=!1,o=null,d={text:!0,search:!0,url:!0,tel:!0,email:!0,password:!0,number:!0,date:!0,month:!0,week:!0,time:!0,datetime:!0,"datetime-local":!0};function i(e){return!!(e&&e!==document&&"HTML"!==e.nodeName&&"BODY"!==e.nodeName&&"classList"in e&&"contains"in e.classList)}function s(e){e.classList.contains("focus-visible")||(e.classList.add("focus-visible"),e.setAttribute("data-focus-visible-added",""))}function u(e){t=!1}function a(){document.addEventListener("mousemove",c),document.addEventListener("mousedown",c),document.addEventListener("mouseup",c),document.addEventListener("pointermove",c),document.addEventListener("pointerdown",c),document.addEventListener("pointerup",c),document.addEventListener("touchmove",c),document.addEventListener("touchstart",c),document.addEventListener("touchend",c)}function c(e){e.target.nodeName&&"html"===e.target.nodeName.toLowerCase()||(t=!1,document.removeEventListener("mousemove",c),document.removeEventListener("mousedown",c),document.removeEventListener("mouseup",c),document.removeEventListener("pointermove",c),document.removeEventListener("pointerdown",c),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",c),document.removeEventListener("touchstart",c),document.removeEventListener("touchend",c))}document.addEventListener("keydown",function(n){n.metaKey||n.altKey||n.ctrlKey||(i(e.activeElement)&&s(e.activeElement),t=!0)},!0),document.addEventListener("mousedown",u,!0),document.addEventListener("pointerdown",u,!0),document.addEventListener("touchstart",u,!0),document.addEventListener("visibilitychange",function(e){"hidden"===document.visibilityState&&(n&&(t=!0),a())},!0),a(),e.addEventListener("focus",function(e){var n,o,u;i(e.target)&&(t||(n=e.target,o=n.type,"INPUT"===(u=n.tagName)&&d[o]&&!n.readOnly||"TEXTAREA"===u&&!n.readOnly||n.isContentEditable))&&s(e.target)},!0),e.addEventListener("blur",function(e){var t;i(e.target)&&(e.target.classList.contains("focus-visible")||e.target.hasAttribute("data-focus-visible-added"))&&(n=!0,window.clearTimeout(o),o=window.setTimeout(function(){n=!1},100),(t=e.target).hasAttribute("data-focus-visible-added")&&(t.classList.remove("focus-visible"),t.removeAttribute("data-focus-visible-added")))},!0),e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&e.host?e.host.setAttribute("data-js-focus-visible",""):e.nodeType===Node.DOCUMENT_NODE&&(document.documentElement.classList.add("js-focus-visible"),document.documentElement.setAttribute("data-js-focus-visible",""))}if("undefined"!=typeof window&&"undefined"!=typeof document){var t;window.applyFocusVisiblePolyfill=e;try{t=new CustomEvent("focus-visible-polyfill-ready")}catch(e){(t=document.createEvent("CustomEvent")).initCustomEvent("focus-visible-polyfill-ready",!1,!1,{})}window.dispatchEvent(t)}"undefined"!=typeof document&&e(document)});
-//# sourceMappingURL=focus-visible.min.js.map
+!(function (e, t) {
+  "object" == typeof exports && "undefined" != typeof module
+    ? t()
+    : "function" == typeof define && define.amd
+    ? define(t)
+    : t();
+})(0, function () {
+  "use strict";
+  function e(e) {
+    var t = !0,
+      n = !1,
+      o = null,
+      d = {
+        text: !0,
+        search: !0,
+        url: !0,
+        tel: !0,
+        email: !0,
+        password: !0,
+        number: !0,
+        date: !0,
+        month: !0,
+        week: !0,
+        time: !0,
+        datetime: !0,
+        "datetime-local": !0,
+      };
+    function i(e) {
+      return !!(
+        e &&
+        e !== document &&
+        "HTML" !== e.nodeName &&
+        "BODY" !== e.nodeName &&
+        "classList" in e &&
+        "contains" in e.classList
+      );
+    }
+    function s(e) {
+      e.classList.contains("focus-visible") ||
+        (e.classList.add("focus-visible"),
+        e.setAttribute("data-focus-visible-added", ""));
+    }
+    function u(e) {
+      t = !1;
+    }
+    function a() {
+      document.addEventListener("mousemove", c),
+        document.addEventListener("mousedown", c),
+        document.addEventListener("mouseup", c),
+        document.addEventListener("pointermove", c),
+        document.addEventListener("pointerdown", c),
+        document.addEventListener("pointerup", c),
+        document.addEventListener("touchmove", c),
+        document.addEventListener("touchstart", c),
+        document.addEventListener("touchend", c);
+    }
+    function c(e) {
+      (e.target.nodeName && "html" === e.target.nodeName.toLowerCase()) ||
+        ((t = !1),
+        document.removeEventListener("mousemove", c),
+        document.removeEventListener("mousedown", c),
+        document.removeEventListener("mouseup", c),
+        document.removeEventListener("pointermove", c),
+        document.removeEventListener("pointerdown", c),
+        document.removeEventListener("pointerup", c),
+        document.removeEventListener("touchmove", c),
+        document.removeEventListener("touchstart", c),
+        document.removeEventListener("touchend", c));
+    }
+    document.addEventListener(
+      "keydown",
+      function (n) {
+        n.metaKey ||
+          n.altKey ||
+          n.ctrlKey ||
+          (i(e.activeElement) && s(e.activeElement), (t = !0));
+      },
+      !0
+    ),
+      document.addEventListener("mousedown", u, !0),
+      document.addEventListener("pointerdown", u, !0),
+      document.addEventListener("touchstart", u, !0),
+      document.addEventListener(
+        "visibilitychange",
+        function (e) {
+          "hidden" === document.visibilityState && (n && (t = !0), a());
+        },
+        !0
+      ),
+      a(),
+      e.addEventListener(
+        "focus",
+        function (e) {
+          var n, o, u;
+          i(e.target) &&
+            (t ||
+              ((n = e.target),
+              (o = n.type),
+              ("INPUT" === (u = n.tagName) && d[o] && !n.readOnly) ||
+                ("TEXTAREA" === u && !n.readOnly) ||
+                n.isContentEditable)) &&
+            s(e.target);
+        },
+        !0
+      ),
+      e.addEventListener(
+        "blur",
+        function (e) {
+          var t;
+          i(e.target) &&
+            (e.target.classList.contains("focus-visible") ||
+              e.target.hasAttribute("data-focus-visible-added")) &&
+            ((n = !0),
+            window.clearTimeout(o),
+            (o = window.setTimeout(function () {
+              n = !1;
+            }, 100)),
+            (t = e.target).hasAttribute("data-focus-visible-added") &&
+              (t.classList.remove("focus-visible"),
+              t.removeAttribute("data-focus-visible-added")));
+        },
+        !0
+      ),
+      e.nodeType === Node.DOCUMENT_FRAGMENT_NODE && e.host
+        ? e.host.setAttribute("data-js-focus-visible", "")
+        : e.nodeType === Node.DOCUMENT_NODE &&
+          (document.documentElement.classList.add("js-focus-visible"),
+          document.documentElement.setAttribute("data-js-focus-visible", ""));
+  }
+  if ("undefined" != typeof window && "undefined" != typeof document) {
+    var t;
+    window.applyFocusVisiblePolyfill = e;
+    try {
+      t = new CustomEvent("focus-visible-polyfill-ready");
+    } catch (e) {
+      (t = document.createEvent("CustomEvent")).initCustomEvent(
+        "focus-visible-polyfill-ready",
+        !1,
+        !1,
+        {}
+      );
+    }
+    window.dispatchEvent(t);
+  }
+  "undefined" != typeof document && e(document);
+});

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.3.0"
+  "version": "3.5.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,3 +1,5 @@
+@use "helpers/mixins/breakpoints" as *;
+
 #app {
   flex-direction: column;
   min-height: 100vh;

package/scss/_atomic.scss

@@ -1,8 +1,9 @@
-@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 *;
 
 .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

@@ -7,7 +7,7 @@ $path: "https://static.barbican.org.uk/systems-public/fonts";
   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,7 +1,11 @@
-footer {
-  color: white;
+@use "helpers/variables/colors" as *;
 
-  &:not(.splash) {
-    background-color: $c-grey-l11;
-  }
-}
+// use classname for this
+
+// footer {
+//   color: white;
+
+//   &:not(.splash) {
+//     background-color: $c-grey-l11;
+//   }
+// }

package/scss/_header.scss

@@ -1,3 +1,5 @@
+@use "helpers/variables/colors" as *;
+
 .header {
   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,4 @@
-@import "confirm";
-@import "login";
-@import "password";
-@import "account";
-@import "video-help";
-@import "related";
-@import "block";
-@import "membership";
-@import "slim";
+@use "../helpers" as *;
 
 .card {
   @include br-card;