barbican-reset 3.3.0 → 3.5.0

package/scss/helpers/mixins/table/_membership.scss

@@ -1,7 +1,10 @@
-@mixin membership-table {
+@use "../../variables/columns";
+@use "../../mixins/breakpoints" as *;
+
+@mixin table {
   tr {
     @include medium-up {
-      grid-template-columns: $columns-membership;
+      grid-template-columns: columns.$membership;
     }
   }
 }

package/scss/helpers/mixins/table/_orders.scss

@@ -1,4 +1,10 @@
-@mixin orders-table($columns) {
+@use "../../mixins/table/generic" as *;
+@use "../../mixins/focus" as *;
+@use "../../variables/colors" as *;
+@use "../../mixins/breakpoints" as *;
+@use "../../variables/layout" as *;
+
+@mixin table($columns) {
   thead {
     background-color: $c-grey-l96;
     margin-bottom: 1rem;

package/scss/helpers/mixins/table/_preferences.scss

@@ -1,4 +1,13 @@
-@mixin preferences-table {
+@use "../../variables/columns";
+@use "../../variables/colors" as *;
+@use "../../variables" as *;
+@use "../../variables/layout" as *;
+@use "../../mixins/breakpoints" as *;
+@use "../../mixins/table/generic" as *;
+@use "../../mixins/core" as *;
+@use "../../mixins/focus" as *;
+
+@mixin table {
   thead {
     background-color: $c-grey-l96;
     margin-bottom: 1rem;
@@ -19,7 +28,7 @@
     }
 
     @include medium-up {
-      grid-template-columns: $columns-preferences;
+      grid-template-columns: columns.$preferences;
     }
 
     @include medium-down {

package/scss/helpers/mixins/table/_resale.scss

@@ -1,4 +1,8 @@
-@mixin resale-table {
+@use "../../mixins/table/generic" as *;
+@use "../../variables/colors" as *;
+@use "../../mixins/breakpoints" as *;
+
+@mixin table {
   margin-right: auto;
   margin-left: auto;
   max-width: 11rem;

package/scss/helpers/mixins/table/_section.scss

@@ -1,5 +1,6 @@
+@use "../../mixins/basket" as *;
 
-@mixin section-table {
+@mixin table {
   padding-bottom: 0.75rem;
   padding-top: 0.75rem;
   display: block;

package/scss/helpers/mixins/table/_simple.scss

@@ -1,7 +1,10 @@
-@mixin simple-table {
+@use "../../variables/columns";
+@use "../../mixins/breakpoints" as *;
+
+@mixin table {
   tr {
     @include medium-up {
-      grid-template-columns: $columns-simple;
+      grid-template-columns: columns.$simple;
     }
   }
 }

package/scss/helpers/mixins/table/_tickets.scss

@@ -1,12 +1,19 @@
-@mixin tickets-table {
+@use "../../variables/columns";
+@use "../../variables/colors" as *;
+@use "../../variables/layout" as *;
+@use "../../mixins/breakpoints" as *;
+@use "../../mixins/table/generic";
+@use "../../mixins/core" as *;
+
+@mixin table {
   th {
     font-weight: bold;
   }
 
   tr {
     @include small-up {
-      @include table-row;
-      grid-template-columns: $columns-tickets;
+      @include generic.table-row;
+      grid-template-columns: columns.$tickets;
       display: grid;
       gap: 0.75rem;
 

package/scss/helpers/mixins/table/row/_disabled.scss

@@ -1,10 +1,11 @@
+@use "../../../variables/colors" as *;
 
-@mixin disabled-row {
+@mixin row {
   background-color: $c-grey-l96;
   pointer-events: none;
   color: $c-grey-l44;
   user-select: none;
-  
+
   strike {
     color: $c-grey-l44;
   }

package/scss/helpers/variables/_alerts.scss

@@ -1,3 +1,5 @@
+@use "colors/status" as *;
+
 $neutral_wrap: $c-status-neutral, $c-status-neutral-fade, $c-status-neutral-light;
 $success_wrap: $c-status-success, $c-status-success-fade, $c-status-success-light;
 $error_wrap: $c-status-error, $c-status-error-fade, $c-status-error-light;

package/scss/helpers/variables/_columns.scss

@@ -1,9 +1,9 @@
-$columns-simple: auto 8rem;
-$columns-details--header: auto 10rem 8rem;
-$columns-details--checkbox: 2.75rem auto 10rem 8rem;
-$columns-etickets: 8rem auto 8rem;
-$columns-gifts: 3fr 5fr 5fr 2fr 2fr;
-$columns-membership: auto 10rem 10rem 8rem;
-$columns-orders: 10rem 8rem auto 8rem;
-$columns-preferences: auto repeat(2, 5rem);
-$columns-tickets: 2fr 5fr 5fr 2fr;
+$simple: auto 8rem;
+$details--header: auto 10rem 8rem;
+$details--checkbox: 2.75rem auto 10rem 8rem;
+$etickets: 8rem auto 8rem;
+$gifts: 3fr 5fr 5fr 2fr 2fr;
+$membership: auto 10rem 10rem 8rem;
+$orders: 10rem 8rem auto 8rem;
+$preferences: auto repeat(2, 5rem);
+$tickets: 2fr 5fr 5fr 2fr;

package/scss/helpers/variables/_layout.scss

@@ -18,7 +18,7 @@ $gap-account: 2rem;
 
 $select-arrow: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e";
 
-$box-shadow-card: 0 0 0.5rem rgba($black, 0.1);
+$box-shadow-card: 0 0 0.5rem rgba(black, 0.1);
 
 $padding-button-xs: 0.625rem;
 $padding-button-slim: 0.75rem;

package/scss/helpers/variables/_typography.scss

@@ -1,3 +1,5 @@
+@use "../functions" as *;
+
 $body-font-size: toRem(17);
 
 $h1-font-size: toRem(42);

package/scss/helpers/variables/colors/_brand.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "../../functions" as *;
+@use "grey" as *;
+
 /// $c-brand-art
 $c-brand-art: hsl(329, 100%, 45%);
 /// $c-brand-cinema
@@ -18,7 +22,7 @@ $c-patron-light: hsl(0, 0%, 60%);
 $c-principle: $c-brand-classical;
 $c-principle-light: hsl(38, 53%, 53%);
 
-/// see map-merge for example usage. talks--workshops is deprecated, use talks--events instead.
+/// see map.merge for example usage. talks--workshops is deprecated, use talks--events instead.
 $setup: (
   contemporary-music: $c-brand-contemporary,
   membership--support: $c-brand-membership,
@@ -60,15 +64,15 @@ $brands: (
 @each $key, $value in $setup {
   $map: (
   );
-$map: map-merge($map, ($key: map-brands($value)));
-$brands: map-merge($brands, $map);
+$map: map.merge($map, ($key: map-brands($value)));
+$brands: map.merge($brands, $map);
 }
 
 /// utility function for referencing a color variant from the brands map
 /// @param {Map} $name - color reference from the $setup map 
 /// @param {String} $variant - shade reference from the map-brands function
 @function brandColor($name, $variant: base) {
-  @return map-get(map-get($brands, $name), $variant);
+  @return map.get(map.get($brands, $name), $variant);
 }
 
 $c-background-alt: brandColor(generic, tint-95);

package/scss/helpers/variables/colors/index.scss

@@ -1,6 +1,11 @@
-@import 'grey';
-@import 'brand';
-@import 'docs';
-@import 'status';
-@import 'wgp';
-@import 'llf';
+@forward 'grey';
+@forward 'brand';
+@forward 'docs';
+@forward 'status';
+@forward 'wgp';
+@forward 'llf';
+
+$br-gray-300: #dee2e6;
+$br-gray-400: #ced4da;
+$br-gray-500: #adb5bd;
+$br-blue: #0d6efd;

package/scss/helpers/variables/index.scss

@@ -1,14 +1,9 @@
-@import 'colors/index';
-@import 'typography';
-@import 'alerts';
-@import 'layout';
-@import 'columns';
+@forward 'colors';
+@forward 'typography';
+@forward 'alerts';
+@forward 'layout';
+@forward 'columns';
 
-$br-gray-300: #dee2e6;
-$br-gray-400: #ced4da;
-$br-gray-500: #adb5bd;
-$br-white: #ffffff; // deprecated
-$br-blue: #0d6efd;
 $br-input-border-color: #ced4da;
 
 $br-border-radius: 0.25rem;

package/scss/index.scss

@@ -1,38 +1,38 @@
-@import "helpers";
-
-@import "app";
-@import "city-of-london";
-@import "close-icon";
-@import "font";
-@import "footer";
-@import "header";
-@import "main";
-@import "table";
-
-@import "br-alert";
-@import "br-button";
-@import "br-checkbox";
-@import "br-container";
-@import "br-footer";
-@import "br-form-password";
-@import "br-form-row";
-@import "br-form-update";
-@import "br-loader";
-@import "br-promo";
-@import "br-radio";
-@import "br-select";
-@import "br-skiplink";
-@import "br-wrap";
+@use "helpers" as *;
+
+@use "app";
+@use "city-of-london";
+@use "close-icon";
+@use "font";
+@use "footer";
+@use "header";
+@use "main";
+@use "table";
+
+@use "br-alert";
+@use "br-button";
+@use "br-checkbox";
+@use "br-container";
+@use "br-footer";
+@use "br-form-password";
+@use "br-form-row";
+@use "br-form-update";
+@use "br-loader";
+@use "br-promo";
+@use "br-radio";
+@use "br-select";
+@use "br-skiplink";
+@use "br-wrap";
 
 // bootstrap component styles
-@import "card/index";
-@import "card-deck";
-@import "form";
-@import "list";
-@import "input";
+@use "card/index";
+@use "card-deck";
+@use "form";
+@use "list";
+@use "input";
 
 // atomic helper styles
-@import "atomic";
+@use "atomic";
 
 html {
   box-sizing: border-box;

package/scss/_btn.scss

@@ -1,163 +0,0 @@
-// .btn {
-//   @include setup-button;
-
-//   &.btn-primary {
-//     // solid orange
-//     @include btn-primary;
-//   }
-
-//   &.btn-outline-primary {
-//     // orange outline, fill on focus
-//     @include btn-outline-primary;
-//   }
-
-//   &.btn-outline-header {
-//     // orange outline, fill on focus
-//     @include btn-outline-header;
-//   }
-
-//   &.btn-info {
-//     // solid blue
-//     @include btn-info;
-//   }
-
-//   &.btn-outline-info {
-//     // blue outline, fill on focus
-//     @include btn-outline-info;
-//   }
-
-//   &.btn-secondary {
-//     // solid grey
-//     @include btn-secondary;
-//   }
-
-//   &.btn-outline-secondary {
-//     // grey outline, fill on focus
-//     @include btn-outline-secondary;
-//   }
-
-//   &.btn-input-edit {
-//     @include btn-input-edit;
-//   }
-
-//   &.btn-remove {
-//     // solid grey, slim
-//     @include btn-remove;
-//   }
-
-//   &.btn-link {
-//     @include btn-link;
-//   }
-
-//   &.btn-video-help {
-//     @include btn-video-help;
-//   }
-
-//   &.btn-exit {
-//     @include btn-exit;
-//   }
-
-//   &.btn-remove-ticket {
-//     @include btn-remove-ticket;
-//   }
-
-//   &.btn-remove-gift {
-//     @include btn-remove-gift;
-//   }
-
-//   &.btn-membership-card {
-//     @include btn-membership-card;
-//   }
-
-//   &.btn-video-login {
-//     @include btn-video-login;
-//   }
-
-//   &.btn-cta {
-//     @include btn-cta;
-//   }
-
-//   &.btn-carousel {
-//     @include btn-carousel;
-//   }
-
-//   &.btn-invisible {
-//     @include btn-invisible;
-//   }
-
-//   &.btn-returns {
-//     // solid orange
-//     @include btn-returns;
-//   }
-
-//   &.btn-cancel-returns {
-//     // solid orange
-//     @include btn-cancel-returns;
-//   }
-
-//   &.btn-resale {
-//     // orange outline, fill on focus
-//     @include btn-resale;
-//   }
-
-//   &.btn-radio {
-//     border: 1px solid hsl(0deg, 0%, 65%);
-//     padding: 0.75rem 0.75rem 0.625rem;
-//     font-weight: normal;
-//     margin: 0.25rem;
-
-//     @include focus {
-//       @include default-label-focus;
-//     }
-//   }
-
-//   &.btn-menu {
-//     @include btn-menu;
-//   }
-
-//   &.btn-basket {
-//     @include btn-basket;
-//   }
-
-//   &.btn-discover {
-//     @include btn-discover;
-//   }
-
-//   &.btn-membership-pill {
-//     @include btn-membership-pill;
-//   }
-
-//   &.btn-priority-row {
-//     @include btn-priority-row;
-//   }
-
-//   &.btn-login-to-book {
-//     @include btn-login-to-book;
-//   }
-
-//   &.btn-sold-out {
-//     @include btn-sold-out;
-//   }
-
-//   &.btn-add-membership-to-basket {
-//     @include btn-add-membership-to-basket;
-//   }
-
-//   &.btn-remove-membership-from-basket {
-//     @include btn-remove-membership-from-basket;
-//   }
-
-//   &.btn-additional-information {
-//     @include btn-additional-information;
-//   }
-
-//   &.btn-toggle-password {
-//     @include btn-toggle-password;
-//   }
-
-//   // modifyers
-
-//   &.expand {
-//     @include btn-expand;
-//   }
-// }