@iamproperty/components 3.4.7 → 3.6.0

package/assets/js/tests/table.spec.js

@@ -9,7 +9,7 @@ const basicTable = `<thead>
     <th>Heading 3</th>
   </tr>
 </thead>
-<tbody
+<tbody>
   <tr>
     <td>Cell 1</td>
     <td>Low</td>
@@ -131,8 +131,9 @@ describe('populateDataQueries', () => {
     const table = document.createElement('table');
     table.innerHTML = basicTable;
     const form = document.createElement('form');
-    form.innerHTML += `<div><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
+    form.innerHTML += `<div><input name="heading" value="Low" data-filter="Heading 2" /><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
     tableModule.addDataAttributes(table);
+    tableModule.filterTable(table, form, document.createElement('div'));
     tableModule.populateDataQueries(table, form);
     test('should populate elements with the data-query attribute with the result of the corresponding query', () => {
         expect(form.querySelector('[data-query="total"]').textContent).toEqual('4');

package/assets/sass/_corefiles.scss

@@ -14,28 +14,31 @@
 @use "components/tooltips.scss";
 @use "components/container.scss";
 @use "components/table.scss";
+@use "components/tabs.scss";
 @use "foundations/links.scss";
-@use "components/buttons";
-@use "components/panel.scss";
+@use "foundations/buttons";
+@use "components/admin-panel.scss";
 @use "components/dialog.scss";
 
 @use "components/pagination.scss";
 
 // Bootstrap elements
-@import "../../node_modules/bootstrap/scss/_transitions.scss";
-@import "../../node_modules/bootstrap/scss/_badge.scss";
+@import "../bootstrap/scss/_transitions.scss";
+@import "../bootstrap/scss/_badge.scss";
 
 // Helpers
-//@import "../../node_modules/bootstrap/scss/helpers";
-@import "../../node_modules/bootstrap/scss/helpers/clearfix";
-//@import "../../node_modules/bootstrap/scss/helpers/colored-links";
-@import "../../node_modules/bootstrap/scss/helpers/ratio";
-@import "../../node_modules/bootstrap/scss/helpers/position";
-@import "../../node_modules/bootstrap/scss/helpers/stacks";
-@import "../../node_modules/bootstrap/scss/helpers/visually-hidden";
-//@import "../../node_modules/bootstrap/scss/helpers/stretched-link";
-@import "../../node_modules/bootstrap/scss/helpers/text-truncation";
-//@import "../../node_modules/bootstrap/scss/helpers/vr";
+//@import "../bootstrap/scss/helpers";
+@import "../bootstrap/scss/helpers/clearfix";
+//@import "../bootstrap/scss/helpers/colored-links";
+@import "../bootstrap/scss/helpers/ratio";
+@import "../bootstrap/scss/helpers/position";
+@import "../bootstrap/scss/helpers/stacks";
+@import "../bootstrap/scss/helpers/visually-hidden";
+//@import "../bootstrap/scss/helpers/stretched-link";
+@import "../bootstrap/scss/helpers/text-truncation";
+//@import "../bootstrap/scss/helpers/vr";
+
+@import "helpers/max-height.scss";
 
 // Utilities
-@import "../../node_modules/bootstrap/scss/utilities/_api.scss";
+@import "../bootstrap/scss/utilities/_api.scss";

package/assets/sass/_forms.scss

@@ -1,10 +1,10 @@
 @use "_func" as *;
 
-@import "../../node_modules/bootstrap/scss/forms/labels";
-@import "../../node_modules/bootstrap/scss/forms/form-control";
-@import "../../node_modules/bootstrap/scss/forms/form-select";
-@import "../../node_modules/bootstrap/scss/forms/form-check";
-@import "../../node_modules/bootstrap/scss/forms/form-range";
-@import "../../node_modules/bootstrap/scss/forms/input-group";
-@import "../../node_modules/bootstrap/scss/forms/validation";
+@import "../bootstrap/scss/forms/_labels";
+@import "../bootstrap/scss/forms/_form-control";
+@import "../bootstrap/scss/forms/_form-select";
+@import "../bootstrap/scss/forms/_form-check";
+@import "../bootstrap/scss/forms/_form-range";
+@import "../bootstrap/scss/forms/_input-group";
+@import "../bootstrap/scss/forms/_validation";
 @import "components/forms.scss";

package/assets/sass/_functions/functions.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 @use "sass:map";
 
-@import "../../../node_modules/bootstrap/scss/_functions.scss";
+@import "../../bootstrap/scss/_functions";
 
 @function spacing($int){
   @return map.get($spacers, $int);
@@ -86,9 +86,8 @@
 	@return $colour;
 }
 
-@function tint($colour, $percent)
-{
-	@return $colour;
+@function tint($colour, $percentage) {
+  @return mix(white, $colour, $percentage);
 }
 @function shade($colour, $percent)
 {

package/assets/sass/_functions/mixins.scss

@@ -1,4 +1,4 @@
-@import "../../../node_modules/bootstrap/scss/mixins";
+@import "../../bootstrap/scss/_mixins";
 
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
   
@@ -134,20 +134,10 @@
 
 @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;
+  @each $color, $value in $non-theme-colors {
+
+    --colour-#{$color}: #{$value};
+  }
 
   .text-primary {
     color: var(--colour-primary)!important;
@@ -156,16 +146,8 @@
 
 @mixin invert-colours($compatible:$compatible) {
   
-  --colour-body: #{$colour-inverted};
-  --colour-heading: #{$colour-inverted};
-  --colour-link: #{$colour-inverted};
-  --colour-hover: #{$colour-inverted};
-  --colour-border: #{$colour-inverted};
-  --colour-brand: #{$colour-inverted};
-
-  --btn-bg: #{$colour-inverted};
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-heading);
-  --btn-tertiary-bg: #{$colour-inverted};
-  --btn-tertiary-hover-text: var(--colour-primary);
-}
+  @each $color, $value in $dark-mode-functional-colors {
+
+    --colour-#{$color}: #{$value};
+  }
+}

package/assets/sass/_functions/utilities.scss

@@ -1,6 +1,6 @@
 @use "functions" as *;
 
-@import "../../../node_modules/bootstrap/scss/utilities";
+@import "../../bootstrap/scss/_utilities";
 
 // #region Sizing
 /* Enhance the max width utility to include fit-content which can come in handy for flex-box based layouts. */
@@ -104,7 +104,6 @@ $utilities: map-merge(
 //  #endregion
 
 // #region Gradient colours 
-
 $utilities: map-merge(
   $utilities,
   (
@@ -116,9 +115,9 @@ $utilities: map-merge(
       ),
       values:
       (
-        "secondary": linear-gradient(var(--gradient-direction), var(--colour-secondary) 0, transparent 100%),
-        "primary": linear-gradient(var(--gradient-direction), var(--colour-primary) 0, transparent 100%),
-        "info": linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%)
+        "success": linear-gradient(var(--gradient-direction), var(--colour-success-theme) 0, transparent 100%),
+        "primary": linear-gradient(var(--gradient-direction), var(--colour-primary-theme) 0, transparent 100%),
+        "info": linear-gradient(var(--gradient-direction), var(--colour-info-theme) 0, transparent 100%)
       )
     ),
     "colour": (
@@ -141,20 +140,95 @@ $utilities: map-merge(
 );
 $utilities: map-merge(
   $utilities,
-  (
+  ( 
     "gradient-direction": (
       css-var: true,
       class: gradient-direction,
       values:
       (
         "left": 90deg,
-        "right": -90deg,
-        "up": 360deg
+        "angle": 135deg
       )
     )
   )
 );
+// #endregion
 
+// #region Tint helper classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "bg-opacity": (
+      css-var: true,
+      class: bg-opacity,
+      values:
+      (
+        "10": 0.1,
+        "20": 0.2,
+        "30": 0.3,
+        "40": 0.4,
+        "50": 0.5,
+        "60": 0.6,
+        "70": 0.7,
+        "80": 0.8,
+        "90": 0.9,
+        "100": 1
+      )
+    )
+  )
+);
+$utilities: map-merge(
+  $utilities,
+  (
+    "text-opacity": (
+      css-var: true,
+      class: text-opacity,
+      values:
+      (
+        "10": 0.1,
+        "20": 0.2,
+        "30": 0.3,
+        "40": 0.4,
+        "50": 0.5,
+        "60": 0.6,
+        "70": 0.7,
+        "80": 0.8,
+        "90": 0.9,
+        "100": 1
+      )
+    )
+  )
+);
+// #endregion
 
+// #region Max height classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "max-heights": (
+      property: max-height,
+      class: mh,
+      values: (
+        "sm": #{rem(200)},
+        "md": #{rem(400)},
+        "lg": #{rem(600)}
+      )
+    )
+  )
+);
+// #endregion
 
-// #endregion
+// #region Max height classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "container": (
+      property: container-type,
+      class: ct,
+      values: (
+        "inline": inline-size
+      )
+    )
+  )
+);
+// #endregion

package/assets/sass/_functions/variables.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
-@import "../../../node_modules/bootstrap/scss/_variables.scss";
-@import "../../../node_modules/bootstrap/scss/_maps.scss";
+@import "../../bootstrap/scss/_variables.scss";
+@import "../../bootstrap/scss/_maps.scss";
 
 // #region Grid Breakpoints, layouts
 $grid-breakpoints: (
@@ -82,8 +82,9 @@ $success:       #b4e6a5;
 $info:          #1ebee6;
 $warning:       #ffa500;
 $danger:        #dc3545;
-$light:         #ffd2d2;
+$light:         #EEEEEE;
 $dark:          #46003c;
+$canvas:        #FCFCFC;
 
 
 // Functional/state variables 
@@ -104,53 +105,45 @@ $grays: ();
 $theme-colors: ();
 $theme-colors: map-merge((
   "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
+  "secondary":    $secondary,
   "info":       $info,
   "warning":    $warning,
+  "success":    $success,
   "danger":     $danger,
-  "light":      $light,
   "dark":       $dark,
-  "admin":      #f0f0f0
+  "light":      $light,
+  "canvas":     $canvas,
+  "white":      #FCFCFC,
 ), $theme-colors);
 
-
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
-
-
-@each $color, $value in $theme-colors-rgb {
+@each $color, $value in $theme-colors {
 
   $vars: map-merge((
-    --colour-#{$color}: rgba($value,var(--alpha, 1))
+    --colour-#{$color}: $value,
+    --colour-#{$color}-theme: $value
   ), $vars);
 }
 
+
+
 //  RGB Theme colours
 @function show-css-var($identifier) {
 
-  @if $compatible == "true" {
-    @return #{map-get($theme-colors, #{$identifier})};
-  }
-
   @return var(--colour-#{$identifier});
 }
 @function show-css-var-text($identifier) {
 
-  @if $compatible == "true" {
-    @return #{map-get($theme-colors, #{$identifier})};
-  }
-
   @return var(--colour-#{$identifier});
 }
 
 $utilities-colors: $theme-colors-rgb;
 
-$utilities-colors: map-merge(
+$utilities-text: map-merge(
   $utilities-colors,
   (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-color)
+    "black": $black,
+    "muted": $colour-muted,
+    "body": $body-color
   )
 );
 
@@ -162,38 +155,76 @@ $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,
-  "active":           $colour-active,
-  "selected":         $colour-selected,
-  "body": $colour-body,
-  "inverted": $colour-inverted
+  "body":       $body-color,
+  "border":     $colour-border,
+  "link":       var(--colour-primary-theme),
+  "brand":      var(--colour-primary),
+  "underline":  var(--colour-secondary),
+  "heading":    var(--colour-primary),
+  "focus":      var(--colour-primary-theme),
+  "hover":      var(--colour-primary-theme),
+  "active":     var(--colour-primary-theme),
+  "selected":   var(--colour-info),
+  "inverted":   $canvas,
+  "btn": var(--colour-primary-theme),
+  "btn-bg": var(--colour-warning),
+  "btn-border": var(--colour-warning),
+  "btn-bg-hover": transparent,
+  "btn-hover": var(--colour-primary-theme),
+  "btn-secondary": var(--colour-primary-theme),
+  "btn-secondary-border": var(--colour-primary-theme),
+  "btn-secondary-bg": transparent,
+  "btn-secondary-bg-hover": var(--colour-primary-theme),
+  "btn-secondary-hover": var(--colour-inverted),
+  "canvas-2":     var(--colour-canvas)
 ), $non-theme-colors);
 
 @each $color, $value in $non-theme-colors {
 
   $vars: map-merge((
-    --colour-#{$color}-theme: #{$value},
-    --colour-#{$color}: #{'var(--colour-'+$color+'-theme)'}
+    --colour-#{$color}: #{$value}
   ), $vars);
 }
 
-$vars: map-merge((
-  "--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)),
-  "--colour-admin-theme":      #f0f0f0
-), $vars);
 
-$gradient: linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);
+$dark-mode-colors: (
+
+  "primary": #B3C1C5,
+  "warning": #ffb733,
+  "info": #35C5E9,
+  "success": #B4E6A5,
+  "danger": #E7727D,
+  "dark": #B599B1,
+  "light": $light,
+);
+
+$dark-mode-functional-colors: (
+
+  "canvas": #262626,
+  "canvas-2": #313131,
+  "body": #BFBFBF,
+  "heading": var(--colour-white),
+  "link": var(--colour-white),
+  "hover": var(--colour-white),
+  "active": var(--colour-white),
+  "border": var(--colour-white),
+  "brand": var(--colour-white),
+  "btn": #{$primary},
+  "btn-border": var(--colour-white),
+  "btn-bg": var(--colour-white),
+  "btn-hover": var(--colour-white),
+  "btn-secondary": var(--colour-white),
+  "btn-secondary-border": var(--colour-white),
+  "btn-secondary-bg": transparent,
+  "btn-secondary-bg-hover": var(--colour-white),
+  "btn-secondary-hover": var(--colour-primary-theme)
+);
+
+
+// Kill bootstrap colors
+$colors: ();
+$theme-colors-rgb: ();
 
 // #endregion
 
@@ -320,7 +351,7 @@ $btn-padding-x-md: $btn-padding-x;
 
 // #region Forms
 // label
-$form-label-font-size: $h5-font-size;
+$form-label-font-size: rem(18);
 $form-label-font-weight: bold;
 $form-label-color: var(--colour-heading);
 $form-label-margin-bottom: 0.25rem;
@@ -411,7 +442,21 @@ $icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' wid
 $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>");
-$icon-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M12 2c6.625 0 12 5.375 12 12s-5.375 12-12 12-12-5.375-12-12 5.375-12 12-12zM14 21.484v-2.969c0-0.281-0.219-0.516-0.484-0.516h-3c-0.281 0-0.516 0.234-0.516 0.516v2.969c0 0.281 0.234 0.516 0.516 0.516h3c0.266 0 0.484-0.234 0.484-0.516zM13.969 16.109l0.281-9.703c0-0.109-0.047-0.219-0.156-0.281-0.094-0.078-0.234-0.125-0.375-0.125h-3.437c-0.141 0-0.281 0.047-0.375 0.125-0.109 0.063-0.156 0.172-0.156 0.281l0.266 9.703c0 0.219 0.234 0.391 0.531 0.391h2.891c0.281 0 0.516-0.172 0.531-0.391z'></path></svg>");
+
+$icon-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/></svg>");
+
+$icon-filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'><path d='M0,28.5a.5.5,0,0,0,.5.5H2.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1H7.45a2.5,2.5,0,0,0-4.9,0H.5A.5.5,0,0,0,0,28.5Zm3.5,0A1.5,1.5,0,1,1,5,30,1.5,1.5,0,0,1,3.5,28.5Zm6-5A1.5,1.5,0,1,1,11,25a1.5,1.5,0,0,1-1.5-1.5ZM11,21a2.5,2.5,0,0,0-2.45,2H.5a.5.5,0,0,0,0,1H8.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1H13.45A2.5,2.5,0,0,0,11,21ZM6,20a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,6,20Zm2.45-2a2.5,2.5,0,0,0-4.9,0H.5a.5.5,0,0,0,0,1H3.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1Z' transform='translate(0 -16)'/></svg>");
+
+$icon-low: url("data:image/svg+xml,<svg viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'><path d='M20 12.1429H2C1.42857 12.1429 1 11.5714 1 11C1 10.4286 1.42857 9.85715 2.14286 9.85715H20C20.5714 9.85715 21 10.4286 21 11C21 11.5714 20.5714 12.1429 20 12.1429Z' /></svg>");
+
+$icon-medium: url("data:image/svg+xml,<svg viewBox='0 0 20 8' xmlns='http://www.w3.org/2000/svg'><path d='M19.0001 2.28572H1.14286C0.428573 2.28572 0 1.71429 0 1.14286C0 0.571431 0.428573 0 1.14286 0H19.0001C19.5715 0 20.0001 0.571431 20.0001 1.14286C20.0001 1.71429 19.5715 2.28572 19.0001 2.28572ZM20.0001 6.85716C20.0001 6.28573 19.5715 5.7143 18.8572 5.7143H1.14286C0.428573 5.7143 0 6.28573 0 6.85716C0 7.42859 0.428573 8.00002 1.14286 8.00002H19.0001C19.5715 8.00002 20.0001 7.42859 20.0001 6.85716Z'/></svg>");
+
+$icon-high: url("data:image/svg+xml,<svg viewBox='0 0 20 22' xmlns='http://www.w3.org/2000/svg'><path d='M17.4648 11.7747L10 4.30985L2.53522 11.7747C1.97184 12.338 0.985918 12.338 0.422536 11.7747C-0.140845 11.2113 -0.140845 10.3662 0.422536 9.80282L8.87326 1.3521C9.43664 0.78872 10.2817 0.78872 10.8451 1.3521L19.4367 9.94367C20 10.5071 20 11.3521 19.4367 11.9155C19.0141 12.338 18.0282 12.338 17.4648 11.7747Z' /><path d='M17.4649 20.6479L10 13.0422L2.53524 20.5071C1.97186 21.0704 1.12679 21.0704 0.563405 20.5071C2.37375e-05 19.9437 2.37375e-05 19.0986 0.563405 18.5352L9.01413 10.0845C9.57751 9.52111 10.4226 9.52111 10.986 10.0845L19.5775 18.6761C20.1409 19.2394 20.1409 20.0845 19.5775 20.6479C19.0142 21.2113 18.0282 21.2113 17.4649 20.6479Z' /></svg>");
+
+
+$icon-flag: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M15.578.242a1.287,1.287,0,0,0-1.3-.034,8.118,8.118,0,0,1-3.369.873A7.341,7.341,0,0,1,8.537.609,7.826,7.826,0,0,0,5.788.057,11.873,11.873,0,0,0,1,1.261V.548A.477.477,0,0,0,.5.076.477.477,0,0,0,0,.548v15a.5.5,0,0,0,1,0V12.269a11.324,11.324,0,0,1,4.65-1.217,11.982,11.982,0,0,1,3.1.5,12.171,12.171,0,0,0,3.1.5,9.326,9.326,0,0,0,3.472-.722,1,1,0,0,0,.637-.931L16,1.058A.943.943,0,0,0,15.578.242Zm-.587,10.149a8.588,8.588,0,0,1-3.134.653A11.219,11.219,0,0,1,9,10.579a12.948,12.948,0,0,0-3.35-.525,11.152,11.152,0,0,0-4.559,1.081L1,11.175V2.34l.875-.355a10.676,10.676,0,0,1,3.912-.928,7.465,7.465,0,0,1,2.444.476,8.261,8.261,0,0,0,2.678.519A9.943,9.943,0,0,0,15,1.048Z'/></svg>");
+
+
 
 $vars: map-merge((
   --icon-blank: #{escape-svg($icon-blank)},
@@ -420,7 +465,12 @@ $vars: map-merge((
   --icon-close: #{escape-svg($icon-close)},
   --icon-tick: #{escape-svg($icon-tick)},
   --icon-question: #{escape-svg($icon-question)},
-  --icon-warning: #{escape-svg($icon-warning)}
+  --icon-warning: #{escape-svg($icon-warning)},
+  --icon-filter: #{escape-svg($icon-filter)},
+  --icon-high: #{escape-svg($icon-high)},
+  --icon-medium: #{escape-svg($icon-medium)},
+  --icon-low: #{escape-svg($icon-low)},
+  --icon-flag: #{escape-svg($icon-flag)}
 ), $vars);
 // #endregion
 
@@ -501,10 +551,13 @@ $td-mw-px: 120;
 $td-mw: #{rem($td-mw-px)};
 $table-padding-px: 32;
 $table-padding: #{rem($table-padding-px)};
-$table-mh-sm-px: 200;
-$table-mh-sm: #{rem($table-mh-sm-px)};
-$table-mh-md-px: 400;
-$table-mh-md: #{rem($table-mh-md-px)};
-$table-mh-lg-px: 600;
-$table-mh-lg: #{rem($table-mh-lg-px)};
-// #endregion
+// #endregion
+
+// #region UT vars
+$ut-mh-sm-px: 200;
+$ut-mh-sm: #{rem($ut-mh-sm-px)};
+$ut-mh-md-px: 400;
+$ut-mh-md: #{rem($ut-mh-md-px)};
+$ut-mh-lg-px: 600;
+$ut-mh-lg: #{rem($ut-mh-lg-px)};
+// #endregion

package/assets/sass/_tests/colours.spec.scss

@@ -3,28 +3,14 @@
 
 $test_colors: ();
 $test_colors: map-merge((
-  "primary": rgba(0, 49, 60, var(--alpha, 1)),
-  "secondary": rgba(180, 230, 165, var(--alpha, 1)),
-  "success": rgba(180, 230, 165, var(--alpha, 1)),
-  "info": rgba(30, 190, 230, var(--alpha, 1)),
-  "warning":  rgba(255, 165, 0, var(--alpha, 1)),
-  "danger": rgba(220, 53, 69, var(--alpha, 1)),
-  "light": rgba(255, 210, 210, var(--alpha, 1)),
-  "dark": rgba(70, 0, 60, var(--alpha, 1)),
-  "muted-theme": #9d9d9d,
-  "muted": var(--colour-muted-theme),
-  "border-theme": #D8D8D8,
-  "border": var(--colour-border-theme),
-  "link-theme": #00313c,
-  "link": var(--colour-link-theme),
-  "focus-theme": #000000,
-  "focus": var(--colour-focus-theme),
-  "hover-theme": #000000,
-  "hover": var(--colour-hover-theme),
-  "active-theme": #b4e6a5,
-  "active": var(--colour-active-theme),
-  "selected-theme": #1ebee6,
-  "selected": var(--colour-selected-theme)
+  "primary":#00313c,
+  "secondary":#b4e6a5,
+  "success":#b4e6a5,
+  "info":#1ebee6,
+  "warning":#ffa500,
+  "danger":#dc3545,
+  "light":#EEEEEE,
+  "dark":#46003c
 ), $test_colors);
 
 

package/assets/sass/_tests/func.spec.scss

@@ -178,7 +178,7 @@
         color: tint(#ffffff, 50);
       }
       @include expect {
-        color: #ffffff;
+        color: white;
       }
     }
   }

package/assets/sass/components/accordion.scss

@@ -27,6 +27,9 @@
   @include transition($accordion-transition);
 
   --marker-bg: var(--colour-secondary);
+
+
+
   cursor: pointer;
   position: relative;
   max-width: 100%;
@@ -57,6 +60,8 @@
     overflow: hidden;
     background: var(--marker-bg);
     border-radius: 100%;
+
+
   }
 
   // Accordion icon
@@ -74,6 +79,14 @@
 
     @include transition($accordion-icon-transition);
     transform: rotate(90deg);
+
+
+    @media (forced-colors: active) {
+      content: "\25BA";
+      mask-image: none;
+      -webkit-mask-image: none;
+    }
+
   }
 
   &:hover,