@iamproperty/components 2.6.3 → 2.7.2

package/assets/sass/_functions/mixins.scss

@@ -1,11 +1,20 @@
+@import "../../../node_modules/bootstrap/scss/mixins";
+
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  
   $min: breakpoint-min($name, $breakpoints);
   @if $min {
     @media screen and (min-width: $min) {
       @content;
     }
-  } @else {
+  }
+  @else if $name =='xs' {
+    @content;
+  } 
+  @else {
+    @if $mobileOnly != "true" {
     @content;
+    }
   }
 }
 
@@ -24,16 +33,11 @@
 // Used to make it possible to use css properties but still support IE11
 @mixin var($property, $varName, $important:"", $compatible:$compatible) {
 
-  @if $compatible == 'true' {
-    #{$property}: map-get($vars, $varName) #{$important};
-  }
-  @else if $compatible == 'fallback' {
-      
+  @if $compatible == "true" {
     #{$property}: map-get($vars, $varName) #{$important};
-    #{$property}: var(#{$varName}) #{$important};
   }
   @else {
-  #{$property}: var(#{$varName}) #{$important};
+    #{$property}: var(#{$varName}) #{$important};
   }
 }
 
@@ -43,19 +47,11 @@
   ol,
   dd,
   .body,
-  td {
+  table:not(.table--email) td {
     @content;
   }
 }
 
-@mixin invert-colours(){
-  [class*="bg-"].bg-dark:not(.prevent-invert) &,
-  [class*="bg-"].bg-danger:not(.prevent-invert) &,
-  [class*="bg-"].bg-primary:not(.prevent-invert) &,
-  .invert-colours & {
-    @content;
-  }
-}
 
 @mixin headers($includeClasses: 'false'){
   h1,
@@ -100,7 +96,7 @@
   
   $found: false;
 
-  @if $compatible == 'true' {
+  @if $compatible == "true" {
     font-size: $value;
   }
   @else {
@@ -116,4 +112,60 @@
     }
   }
 
+}
+
+@mixin is($selector, $before: '', $after: '' ,$compatible:$compatible){
+
+  @if $compatible == "true" {
+    $split-values: str-split($selector, ",");
+    @each $value in $split-values {
+
+      #{$before}#{$value}#{$after} {
+        @content;
+      }
+    }
+  }
+  @else {
+    #{$before}:is(#{$selector})#{$after} {
+      @content;
+    }
+  }
+}
+
+@mixin reset-colours($compatible:$compatible) {
+  
+  --colour-body: var(--colour-body-theme);
+  --colour-heading: var(--colour-primary);
+  --colour-link: var(--colour-link-theme);
+  --colour-hover: var(--colour-hover-theme);
+  --colour-active: var(--colour-active-theme);
+  //--colour-underline: var(--colour-underline);
+  --colour-border: var(--colour-border-theme);
+  --colour-brand: var(--colour-primary);
+
+  --btn-bg: var(--colour-warning);
+  --btn-text: var(--colour-primary);
+  --btn-hover-text: var(--colour-primary);
+  --btn-tertiary-bg: var(--colour-primary);
+  --btn-tertiary-hover-text: white;
+
+  .text-primary {
+    color: var(--colour-primary)!important;
+  }
+}
+
+@mixin invert-colours($compatible:$compatible) {
+  
+  --colour-body: white;
+  --colour-heading: white;
+  --colour-link: white;
+  --colour-hover: white;
+  --colour-border: white;
+  --colour-brand: white;
+
+  --btn-bg: white;
+  --btn-text: var(--colour-primary);
+  --btn-hover-text: var(--colour-heading);
+  --btn-tertiary-bg: white;
+  --btn-tertiary-hover-text: var(--colour-primary);
 }

package/assets/sass/_functions/utilities.scss

@@ -1,3 +1,7 @@
+@use "functions" as *;
+
+@import "../../../node_modules/bootstrap/scss/utilities";
+
 // #region Sizing
 /* Enhance the max width utility to include fit-content which can come in handy for flex-box based layouts. */
 $utilities: map-merge(
@@ -11,6 +15,15 @@ $utilities: map-merge(
         100: 100%,
         fit-content: fit-content
       )
+    ),
+    "min-width": (
+      responsive: true,
+      property: min-width,
+      class: min,
+      values: (
+        100: 100%,
+        fit-content: fit-content
+      )
     )
   )
 );

package/assets/sass/_functions/variables.scss

@@ -1,6 +1,4 @@
-// Declare global vars variable
-$vars: ();
-$varsMD: ();
+@import "../../../node_modules/bootstrap/scss/_variables.scss";
 
 // #region Grid Breakpoints, layouts
 $grid-breakpoints: (
@@ -79,49 +77,63 @@ $theme-colors: map-merge((
   "warning":    $warning,
   "danger":     $danger,
   "light":      $light,
-  "dark":       $dark
+  "dark":       $dark,
+  "admin":      #f0f0f0
 ), $theme-colors);
 
 
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
 
-@each $color, $value in $theme-colors-rgb {
 
-  $vars: map-merge((
-    --colour-#{$color}-rgb: #{$value}
-  ), $vars);
-}
 @each $color, $value in $theme-colors-rgb {
 
   $vars: map-merge((
-    --colour-#{$color}: rgba(var(--colour-#{$color}-rgb),var(--alpha,1))
-  ), $vars);
-}
-
-@each $color, $value in $theme-colors-rgb {
-
-  $vars: map-merge((
-    --colour-#{$color}-theme: rgba(var(--colour-#{$color}-rgb),var(--alpha,1))
+    --colour-#{$color}: rgba($value,var(--alpha, 1))
   ), $vars);
 }
 
 //  RGB Theme colours
 @function show-css-var($identifier) {
-  @return rgba(var(--colour-#{$identifier}-rgb),var(--bs-bg-opacity,1));
+
+  @if $compatible == "true" {
+    @return #{map-get($theme-colors, #{$identifier})};
+  }
+
+  @return var(--colour-#{$identifier});
 }
 @function show-css-var-text($identifier) {
-  @return rgba(var(--colour-#{$identifier}-rgb),var(--bs-text-opacity,1));
+
+  @if $compatible == "true" {
+    @return #{map-get($theme-colors, #{$identifier})};
+  }
+
+  @return var(--colour-#{$identifier});
 }
+
+$utilities-colors: $theme-colors-rgb;
+
+$utilities-colors: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-color)
+  )
+);
+
 $utilities-bg-colors: map-loop($utilities-colors, show-css-var, "$key");
-$utilities-text-colors: map-loop($utilities-colors, show-css-var-text, "$key");
+$utilities-text-colors: map-loop($utilities-text, show-css-var-text, "$key");
 
 
 
 // Colours that we want setting but not used for Bootstraps mixins, i.e. .text-primary, .bg-muted
 $non-theme-colors: ();
 $non-theme-colors: map-merge((
+  "black":      #000000,
+  "white":      #ffffff,
   "muted":      $colour-muted,
   "border":           $colour-border,
+  "border-light":     #eeeeee,
   "link":             $colour-link,
   "focus":            $colour-focus,
   "hover":            $colour-hover,
@@ -138,12 +150,12 @@ $non-theme-colors: map-merge((
 }
 
 $vars: map-merge((
-  "--colour-body-rgb": to-rgb($colour-body),
-  "--colour-white-rgb": to-rgb(#ffffff),
-  "--colour-black-rgb": to-rgb(#000000),
-  "--colour-body":  rgba(var(--colour-body-rgb),var(--alpha,1)),
-  "--colour-white": rgba(var(--colour-white-rgb),var(--alpha,1)),
-  "--colour-black": rgba(var(--colour-black-rgb),var(--alpha,1))
+  "--colour-body-theme":  rgba(to-rgb($colour-body),var(--alpha,1)),
+  "--colour-white-theme": rgba(to-rgb(#ffffff),var(--alpha,1)),
+  "--colour-black-theme": rgba(to-rgb(#000000),var(--alpha,1)),
+  "--colour-body":  rgba(to-rgb($colour-body),var(--alpha,1)),
+  "--colour-white": rgba(to-rgb(#ffffff),var(--alpha,1)),
+  "--colour-black": rgba(to-rgb(#000000),var(--alpha,1))
 ), $vars);
 
 $gradient: linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);
@@ -190,14 +202,6 @@ $type-scale-5: #{rem(28)};
 $type-scale-6: #{rem(16)};
 $type-scale-7: #{rem(14)};
 
-
-$h1-font-size: var(--fs-1);
-$h2-font-size: var(--fs-2);
-$h3-font-size: var(--fs-3);
-$h4-font-size: var(--fs-4);
-$h5-font-size: var(--fs-5);
-$h6-font-size: var(--fs-6);
-
 $font-sizes: (
   'display': $type-scale-3,
   1: $type-scale-3,
@@ -218,6 +222,14 @@ $font-sizes: (
   ), $vars);
 }
 
+
+$h1-font-size: var(--fs-1);
+$h2-font-size: var(--fs-2);
+$h3-font-size: var(--fs-3);
+$h4-font-size: var(--fs-4);
+$h5-font-size: var(--fs-5);
+$h6-font-size: var(--fs-6);
+
 $headings-margin-bottom: clamp(1rem,0.5em,0.5em);
 $headings-font-style: normal;
 $headings-line-height: clamp(1em,2.5rem,clamp(1.5em,1rem,1.2em));
@@ -361,35 +373,39 @@ $card-cap-bg: transparent;
 $icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='2px'></path></svg>");
 $icon-sort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none'%3E%3Cpath opacity='.3' d='M51 1l25 23 24 22H1l25-22zm0 100l25-23 24-22H1l25 22z'/%3E%3C/svg%3E");
 $icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.5,2l9,9-9,9' style='fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/></svg>");
-$icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+$icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM13.52 23.383l-7.362-7.363 2.828-2.828 4.533 4.535 9.617-9.617 2.828 2.828-12.444 12.445z'/></svg>");
+$icon-question: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'/></svg>");
 
 $vars: map-merge((
   --icon-blank: #{escape-svg($icon-blank)},
   --icon-sort: #{$icon-sort},
   --icon-arrow: #{escape-svg($icon-arrow)},
   --icon-close: #{escape-svg($icon-close)},
+  --icon-tick: #{escape-svg($icon-tick)},
+  --icon-question: #{escape-svg($icon-question)}
 ), $vars);
 // #endregion
 
 // #region pagination
 // Default
-$pagination-color: var(--colour-primary);
+$pagination-color: var(--colour-heading);
 $pagination-disabled-color: var(--colour-muted);
 $pagination-bg: transparent;
 $pagination-border-width: 1px;
 $pagination-border-color: var(--colour-border);
 
 // Hover and focus
-$pagination-hover-color: var(--colour-primary);
+$pagination-hover-color: var(--colour-heading);
 $pagination-hover-bg: var(--colour-muted);
 $pagination-hover-border-color: var(--colour-border);
-$pagination-focus-color: var(--colour-primary);
+$pagination-focus-color: var(--colour-hover);
 $pagination-focus-bg: var(--colour-muted);
 
 // Active
-$pagination-active-color: white;
-$pagination-active-bg: var(--colour-primary);
-$pagination-active-border-color: var(--colour-primary);
+$pagination-active-color: var(--bs-body-bg);
+$pagination-active-bg: var(--colour-heading);
+$pagination-active-border-color: var(--colour-heading);
 
 // Disabled
 $pagination-disabled-bg: $pagination-bg;
@@ -417,4 +433,29 @@ $accordion-bg: transparent;
 $accordion-body-padding-y: 1rem;
 $accordion-body-padding-x: var(--accordion-indent);
 
+// #endregion
+
+// #region Z-index
+
+
+$vars: map-merge((
+  "--index-below":  -1,
+  "--index-base":  0,
+  "--index-focus":  2,
+  "--index-above":  10,
+  "--index-floating":  100,
+  "--index-menu":  200,
+  "--index-overlay":  1000,
+), $vars);
+
+
+$zindex-dropdown:                   var(--index-above);
+$zindex-sticky:                     var(--index-floating);
+$zindex-fixed:                      var(--index-floating);
+$zindex-offcanvas-backdrop:         var(--index-menu);
+$zindex-offcanvas:                  var(--index-menu);
+$zindex-modal-backdrop:             var(--index-overlay);
+$zindex-modal:                      var(--index-overlay);
+$zindex-popover:                    var(--index-above);
+$zindex-tooltip:                    var(--index-above);
 // #endregion

package/assets/sass/_print.scss

@@ -1,3 +1,5 @@
+@use "_func" as *;
+
 $printMedia: print!default;
 @media #{$printMedia} {
   :root {

package/assets/sass/components/accordion.scss

@@ -1,3 +1,5 @@
+@use "../_func.scss" as *;
+
 // Accordion
 .accordion {
   --accordion-indent: 0.75rem;
@@ -18,7 +20,7 @@
 .accordion-button {
 
   padding: $accordion-button-padding-y var(--accordion-right-padding) $accordion-button-padding-y $accordion-button-padding-x;
-  color: $accordion-button-color;
+  color: var(--colour-heading);
   text-align: left; // Reset button style
   background-color: $accordion-button-bg;
   overflow-anchor: none;
@@ -81,18 +83,18 @@
   }
 
   &:hover {
-    z-index: 2;
+    z-index: var(--index-focus);
   }
 
   &:focus {
-    z-index: 3;
+    z-index: var(--index-focus);
     border-color: $accordion-button-focus-border-color;
     outline: 0;
     box-shadow: $accordion-button-focus-box-shadow;
   }
 
   [open] > summary > & {
-    color: $accordion-button-active-color;
+    color: var(--colour-heading);
     background-color: $accordion-button-active-bg;
     
     &::after {

package/assets/sass/components/alert.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .alert {
 
   &__inner {
@@ -24,7 +26,7 @@
   &--fixed {
     position: fixed;
     padding-top: 2rem;
-    z-index: 99999;
+    z-index: var(--index-floating);
     left: 50%;
     transform: translate(-50%,0);
     bottom: 0;
@@ -45,7 +47,7 @@
     width: 1rem;
     padding:0;
     border: none;
-    z-index: $stretched-link-z-index + 1;
+    z-index: var(--index-focus);
     background: currentColor;
     mask-image: var(--icon-close);
     mask-size: 100%;
@@ -56,7 +58,7 @@
 
 .alert__holder {
   position: fixed;
-  z-index: 999999;
+  z-index: var(--index-floating);
   bottom: 0;
   left: 0;
   width: 100%;

package/assets/sass/components/cardDeck.scss

@@ -1,3 +1,4 @@
+@use "../_func" as *;
 
 // #region Card Deck
 .card-deck.container:not([data-card-type="simple"]) {

package/assets/sass/components/carousel.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 // #region default carousel
 .carousel {
   padding-bottom: 3rem;
@@ -89,18 +91,6 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
   }
 }
 
-
-.carousel__controls {
-
-  @include invert-colours(){
-    
-    a:not(:hover):not(:focus):not(:active):not(.active){
-
-      opacity: 0.5;
-    }
-  }
-}
-
 .carousel .carousel__controls > a:nth-child(10) ~ a {
 
   display: none;
@@ -176,20 +166,10 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
 
   // Make sure that we dont just have one pip showing
   .carousel .carousel__controls.cols-sm-2 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-3 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-3 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-sm-4 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-4 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-sm-4 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-sm-5 > a:first-child:nth-last-child(5),
-  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(5),
-  .carousel .carousel__controls.cols-sm-6 > a:first-child:nth-last-child(6) {
+  .carousel .carousel__controls.cols-sm-3 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3)),
+  .carousel .carousel__controls.cols-sm-4 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3), a:first-child:nth-last-child(4)),
+  .carousel .carousel__controls.cols-sm-5 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),
+  .carousel .carousel__controls.cols-sm-6 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)) {
     display: none;
   }
 
@@ -235,20 +215,10 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
 
   // Make sure that we dont just have one pip showing
   .carousel .carousel__controls.cols-md-2 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-3 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-3 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-md-4 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-4 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-md-4 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-md-5 > a:first-child:nth-last-child(5),
-  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(3),
-  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(4),
-  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(5),
-  .carousel .carousel__controls.cols-md-6 > a:first-child:nth-last-child(6) {
+  .carousel .carousel__controls.cols-md-3 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3)),
+  .carousel .carousel__controls.cols-md-4 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3), a:first-child:nth-last-child(4)),
+  .carousel .carousel__controls.cols-md-5 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),
+  .carousel .carousel__controls.cols-md-6 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)) {
     display: none;
   }
 

package/assets/sass/components/charts.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 // #region Chart Colours
 $chart-colors: ();
 $chart-colors: map-merge((
@@ -13,12 +15,21 @@ $chart-colors: map-merge((
   10: --colour-warning,
 ), $chart-colors);
 
-html {
+:root {
   
   @each $index, $value in $chart-colors {
     --colour-chart-#{$index}: var(#{$value});
   }
 }
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --colour-chart-1: var(--colour-dark);
+    --colour-chart-5: var(--colour-light);
+    --colour-chart-6: var(--colour-dark);
+    --colour-chart-7: var(--colour-secondary);
+  }
+}
 // #endregion
 
 // #region Apply colours
@@ -114,7 +125,6 @@ html {
     margin-bottom: 2rem;
     display: flex;
     flex-direction: column-reverse;
-    z-index: 2;
     width: 0;
 
     .axis__point {
@@ -168,7 +178,7 @@ html {
     width: 100%;
     height: calc(100% - 2rem);
     margin-bottom: 2rem;
-    z-index: -1;
+    z-index: var(--index-below);
     display: flex;
     flex-direction: column-reverse;
 
@@ -303,12 +313,9 @@ html {
           }
         }
 
-        &:hover {
-          //z-index: 1;
-        }
         &:hover span {
           opacity: 1;
-          z-index: 99;
+          z-index: var(--index-above);
         }
       }
 
@@ -427,7 +434,7 @@ html {
           left: 50%;
           height: 100%;
           margin-left: -1px;
-          z-index: 0;
+          z-index: var(--index-below);
         }
       }
     }
@@ -442,7 +449,7 @@ html {
     width: 100%;
     height: calc(100% - 2rem);
     pointer-events: none;
-    z-index: -1;
+    z-index: var(--index-below)
   }
 
   .pie {
@@ -507,9 +514,9 @@ html {
   }
 
   .pie foreignObject {
-    background: white;
+    background: var(--bs-body-bg);
     border-radius: 50%;
-    z-index: 100;
+    z-index: var(--index-focus);
     pointer-events: none;
     display: none;
     padding: 1rem;

package/assets/sass/components/drawer.scss

@@ -1,10 +1,12 @@
+@use "../_func" as *;
+
 .drawer__btn {
 
   position: sticky;
   bottom: 1.5rem;
   left: 0;
   width: 100%;
-  z-index: 5;
+  z-index: var(--index-floating);
   margin-bottom: -6rem;
 
   .btn {
@@ -18,13 +20,13 @@
     display: none;
     margin-bottom: -2rem;
     position: relative;
-    z-index: 2;
+    z-index: var(--index-focus);
   }
 
   margin-top: 1rem;
   padding-top: 2rem;
   position: relative;
-  z-index: 15;
+  z-index: var(--index-menu);
   background: rgb(255,255,255);
   background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 1.5rem, rgba(255,255,255,1) 100%);
 }

package/assets/sass/components/header.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .header-banner {
   background: linear-gradient(180deg,var(--colour-secondary) 0, var(--colour-info) 100%);
   margin-bottom: rem(32);
@@ -13,11 +15,16 @@
   }
 
   &__inner {
+    
+    @include reset-colours();
+
+    color: var(--colour-body);
     background: white;
     padding: rem(32);
     margin: rem(30) 0;
     position: relative;
-    z-index: 2;
+    z-index: var(--index-above);
+    
     @include media-breakpoint-up(md) {
       max-width: rem(600);
       margin: rem(112) 0 rem(80) 0;