@iamproperty/components 7.6.1 → 7.6.2

package/assets/sass/foundations/reboot.scss

@@ -1,57 +1,7 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-
-@include layer('reset', $layers) {
-  // Code
-  pre,
-  code,
-  kbd,
-  samp {
-    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-    font-size: 1rem;
-  }
-
-  pre {
-    display: block;
-    margin-top: 0; // 1
-    margin-bottom: 1rem; // 2
-    overflow: auto; // 3
-    font-size: rem(14);
-    color: $pre-color;
-
-    // Account for some code outputs that place code tags in pre tags
-    code {
-      font-size: inherit;
-      color: inherit;
-      word-break: normal;
-    }
-  }
-
-  code {
-    font-size: rem(14);
-    color: #d63384;
-    word-wrap: break-word;
-
-    // Streamline the style when inside anchors to avoid broken underline and more
-    a > & {
-      color: inherit;
-    }
-  }
-
-  kbd {
-    padding: 0.1875rem 0.375rem;
-    font-size: rem(14);
-
-    kbd {
-      padding: 0;
-      font-size: 1rem;
-      font-weight: normal;
-    }
-  }
+@layer reset {
 
   *,
   *::before,
@@ -61,25 +11,26 @@ $darkMode: 'true' !default;
 
   /* Reset & Defaults */
   html {
+    --root-fs-px: 375;
     -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
     height: 100%;
     width: 100%;
     overflow-x: hidden;
     overflow-y: scroll;
-    font-size: vw($device-xs-width);
+    font-size: #{calc(calc(16 / var(--root-fs-px)) * 100vw)};
     scroll-padding-top: rem(100);
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      font-size: vw($device-sm-width);
+    @media screen and (min-width: 36em) {
+      --root-fs-px: 768;
     }
-    @include media-breakpoint-up(md, $mobileOnly) {
-      font-size: vw($device-md-width);
+    @media screen and (min-width: 62em) {
+      --root-fs-px: 1280;
     }
 
-    @if $mobileOnly != 'true' {
+    
       @media (min-width: #{em(1280)}) {
-        font-size: 100%;
-        font-size: vw(1280);
+        //font-size: 100%;
+        --root-fs-px: 1280;
 
         &:has(.nav--large) {
           font-size: 100%;
@@ -106,22 +57,23 @@ $darkMode: 'true' !default;
         // 1920
 
         &:has(.nav--large) {
-          font-size: vw(1920);
+          --root-fs-px: 1920;
+          font-size: #{calc(calc(16 / var(--root-fs-px)) * 100vw)};
         }
       }
-    }
+    
   }
 
   body {
     margin: 0; // 1
-    @include var(background, --colour-canvas);
-    @include var(font-family, --font-body);
+    background: var(--colour-canvas);
+    font-family: var(--font-body);
 
     width: 100%;
     line-height: 1.2;
     min-height: 100%;
     -webkit-text-size-adjust: 100%; // 3
-    -webkit-tap-highlight-color: rgba($black, 0); // 4
+    -webkit-tap-highlight-color: rgba(#000, 0); // 4
 
     color: var(--colour-body);
   }

package/assets/sass/foundations/root.scss

@@ -1,21 +1,10 @@
 @use 'sass:map';
-
 @use '../func' as *;
 
-$root: ':root' !default;
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-
 @layer legacy, reset, elements, components, templates, overrides, utilities;
 
-@include layer('reset', $layers) {
-  #{$root} {
-    // Print out the $vars array setup in the variables file so they can be used as CSS vars
-    // Custom variable values only support SassScript inside `#{}`.
-    @each $var, $value in $vars {
-      #{$var}: #{$value};
-    }
+@layer reset {
+  :root {
 
     color-scheme: light dark;
 
@@ -32,6 +21,9 @@ $darkMode: 'true' !default;
     --colour-success-theme: #b4e6a5;
     --colour-success: #b4e6a5;
 
+    --colour-complete: #0f9d58;
+    --colour-complete-theme: #0f9d58;
+
     --colour-info-theme: #1ebee6;
     --colour-info: light-dark(#1ebee6,#35c5e9);
 
@@ -47,7 +39,6 @@ $darkMode: 'true' !default;
     --colour-dark-theme: #46003c;
     --colour-dark: light-dark(#46003c,#b599b1);
     /* #endregion */
-
     /* #region functional colours */
     --colour-muted: #9d9d9d;
 
@@ -89,7 +80,6 @@ $darkMode: 'true' !default;
     --colour-notification-danger-bg: light-dark(#fcebec,var(--colour-canvas-2));
     --colour-notification-success-bg: light-dark(#f8fdf6,var(--colour-canvas-2));
     /* #endregion */
-
     /* #region Wider colours */
     --wider-colour-1: #EEEEEE;
     --wider-colour-2: #EBD7F6;
@@ -165,159 +155,181 @@ $darkMode: 'true' !default;
     --wider-colour-22-active: #E69E83;
     --wider-colour-23-active: #AFC6C3;
     /* #endregion */
+    /* #region chart colours */
+
+    --chart-colour-1: var(--wider-colour-3);
+    --chart-colour-2: var(--wider-colour-4);
+    --chart-colour-3: var(--wider-colour-5);
+    --chart-colour-4: var(--wider-colour-6);
+    --chart-colour-5: var(--wider-colour-7);
+    --chart-colour-6: var(--wider-colour-8);
+    --chart-colour-7: var(--wider-colour-9);
+    --chart-colour-8: var(--wider-colour-10);
+    --chart-colour-9: var(--wider-colour-11);
+    --chart-colour-10: var(--wider-colour-12);
+
+    --chart-colour-1-hover: var(--wider-colour-3-hover);
+    --chart-colour-2-hover: var(--wider-colour-4-hover);
+    --chart-colour-3-hover: var(--wider-colour-5-hover);
+    --chart-colour-4-hover: var(--wider-colour-6-hover);
+    --chart-colour-5-hover: var(--wider-colour-7-hover);
+    --chart-colour-6-hover: var(--wider-colour-8-hover);
+    --chart-colour-7-hover: var(--wider-colour-9-hover);
+    --chart-colour-8-hover: var(--wider-colour-10-hover);
+    --chart-colour-9-hover: var(--wider-colour-11-hover);
+    --chart-colour-10-hover: var(--wider-colour-12-hover);
+
+    --chart-colour-success: #d2f0c9 !important;
+    --chart-colour-success-hover: #8ad873 !important;
+    --chart-colour-danger: #f5c2c7 !important;
+    --chart-colour-danger-hover: #f5c2e7 !important;
+    --chart-colour-warning: #ffd280 !important;
+    --chart-colour-warning-hover: #ffb020 !important;
 
-
-    // Extra vars needed
-    --content-max-width: #{$content-max-width};
-
-    // Cards variables
+    /* #endregion */
+    /* #region Type vars */
+    --font-body: 'Qanelas', arial, sans-serif;
+    --font-heading: 'Qanelas', arial, sans-serif;
+    --heading-weight: bold;
+    --type-scale: 1.2;
+    --body-fs: 1rem;
+    /* #endregion */
+    // #region heading
+    --h1-fs: round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 6)), 0.25rem);
+    --h2-fs: round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 5)), 0.25rem);
+    --h3-fs: round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 3)), 0.25rem);
+    --h4-fs: round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 2)), 0.25rem);
+    --h1-lh: round(calc(1em * var(--type-scale)), 0.25rem);
+    --h1-pb: round(calc(1em * var(--type-scale)), 0.25rem);
+    --h2-lh: round(calc(1em * var(--type-scale)), 0.25rem);
+    --h2-pb: round(calc(1em * var(--type-scale)), 0.25rem);
+
+    --h3-lh: round(up, calc(1em * var(--type-scale)), 0.25rem);
+    --h3-pb: round(up, calc(1em * var(--type-scale)), 0.25rem);
+
+    --h4-lh: round(up, calc(1em * var(--type-scale)), 0.25rem);
+    --h4-pb: round(up, calc(1em * var(--type-scale)), 0.25rem);
+    // #endregion
+    // #region rounded borders
+    --border-radius-sm: 0.25rem;
+    --border-radius: 0.5rem;
+    --border-radius-lg: 1rem;
+    --border-radius-xl: 1.5rem;
+    --border-radius-2xl: 3rem;
+    // #endregion
+    // #region Z-index
+    --index-below: -1;
+    --index-base: 0;
+    --index-focus: 2;
+    --index-above: 10;
+    --index-floating: 100;
+    --index-menu: 200;
+    --index-overlay: 1000;
+    // #endregion
+    // #region Cards variables
     --card-top-padding: 2rem;
     --card-right-padding: #{rem(16+16+24)};
     --card-bottom-padding: 2rem;
     --card-left-padding: 1rem;
-    --card-border-radius: #{rem(8)};
+    --card-border-radius: 0.5rem;
     --card-box-shadow: #{rem(2)} #{rem(3)} #{rem(6)} rgba(0, 0, 0, 0.2);
     --nav-height: #{rem(96)};
     --code-color: #d63384;
-
-    // Default borders
+    // #endregion 
+    // #region Default borders
     --border-width: 1px;
     --border-style: solid;
     --border-color: var(--colour-border);
+    // #endregion
+    
+ 
+    // #region layout
+    --gap: 1rem;
+    --gutter: 1.5rem;
+    --max-width: #{rem(1280)};
+    --content-max-width: #{rem(800)};
+    --input-max-width: #{rem(800)};
+    --select-max-width: #{rem(800)};
 
     --container-max-width: #{rem(1280)};
+    --container-padding-top: 0;
+    --container-padding-bottom: 1rem;
     --padding-inline: 1.5rem;
-
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
-    }
+    --container-padding-x: 1.5rem;
+    --container-padding: var(--container-padding-top) var(--container-padding-x) var(--container-padding-bottom) var(--container-padding-x);
+    // #endregion
+
+    // #region icons
+    $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>");
+    $icon-new-tab: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M304 24c0 13.3 10.7 24 24 24H430.1L207 271c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l223-223V184c0 13.3 10.7 24 24 24s24-10.7 24-24V24c0-13.3-10.7-24-24-24H328c-13.3 0-24 10.7-24 24zM72 32C32.2 32 0 64.2 0 104V440c0 39.8 32.2 72 72 72H408c39.8 0 72-32.2 72-72V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V440c0 13.3-10.7 24-24 24H72c-13.3 0-24-10.7-24-24V104c0-13.3 10.7-24 24-24H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H72z'/></svg>");
+    $icon-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M296 552L296 496C296 482.7 306.7 472 320 472C333.3 472 344 482.7 344 496L344 552C344 565.3 333.3 576 320 576C306.7 576 296 565.3 296 552zM296 144L296 88C296 74.7 306.7 64 320 64C333.3 64 344 74.7 344 88L344 144C344 157.3 333.3 168 320 168C306.7 168 296 157.3 296 144zM139 139C148.4 129.6 163.6 129.6 172.9 139L212.5 178.6C221.9 188 221.9 203.2 212.5 212.5C203.1 221.8 187.9 221.9 178.6 212.5L139 172.9C129.6 163.5 129.6 148.3 139 139zM427.5 427.5C436.9 418.1 452.1 418.1 461.4 427.5L501 467.1C510.4 476.5 510.4 491.7 501 501C491.6 510.3 476.4 510.4 467.1 501L427.5 461.4C418.1 452 418.1 436.8 427.5 427.5zM64 320C64 306.7 74.7 296 88 296L144 296C157.3 296 168 306.7 168 320C168 333.3 157.3 344 144 344L88 344C74.7 344 64 333.3 64 320zM472 320C472 306.7 482.7 296 496 296L552 296C565.3 296 576 306.7 576 320C576 333.3 565.3 344 552 344L496 344C482.7 344 472 333.3 472 320zM139 501C129.6 491.6 129.6 476.4 139 467.1L178.6 427.5C188 418.1 203.2 418.1 212.5 427.5C221.8 436.9 221.9 452.1 212.5 461.4L172.9 501C163.5 510.4 148.3 510.4 139 501zM427.5 212.5C418.1 203.1 418.1 187.9 427.5 178.6L467.1 139C476.5 129.6 491.7 129.6 501 139C510.3 148.4 510.4 163.6 501 172.9L461.4 212.5C452 221.9 436.8 221.9 427.5 212.5zM384 320C384 284.7 355.3 256 320 256C284.7 256 256 284.7 256 320C256 355.3 284.7 384 320 384C355.3 384 384 355.3 384 320zM208 320C208 258.1 258.1 208 320 208C381.9 208 432 258.1 432 320C432 381.9 381.9 432 320 432C258.1 432 208 381.9 208 320z'/></svg>");
+    $icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><!--!Font Awesome Pro v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M503.8 153.8C504.8 157.4 508.2 160 512 160C515.8 160 519.1 157.5 520.2 153.8L531.2 115.2L569.8 104.2C573.4 103.2 576 99.8 576 96C576 92.2 573.5 88.9 569.8 87.8L531.2 76.8L520.2 38.2C519.2 34.6 515.8 32 512 32C508.2 32 504.9 34.5 503.8 38.2L492.8 76.8L454.2 87.8C450.6 88.8 448 92.2 448 96C448 99.8 450.5 103.1 454.2 104.2L492.8 115.2L503.8 153.8zM288 128C164.3 128 64 228.3 64 352C64 475.7 164.3 576 288 576C348.2 576 402.9 552.2 443.1 513.6C449.5 507.5 451.3 497.9 447.7 489.8C444.1 481.7 435.7 476.8 426.9 477.5C422.6 477.8 418.3 478 414 478C325.1 478 253 405.9 253 317C253 253.9 289.3 199.2 342.3 172.8C350.2 168.8 354.9 160.3 353.8 151.5C352.7 142.7 346.2 135.5 337.6 133.5C321.6 129.9 305 128 288 128zM419.2 332.8L435.8 390.8C437.4 396.3 442.4 400 448 400C453.6 400 458.7 396.2 460.2 390.8L476.8 332.8L534.8 316.2C540.3 314.6 544 309.6 544 304C544 298.4 540.2 293.3 534.8 291.8L476.8 275.2L460.2 217.2C458.6 211.7 453.6 208 448 208C442.4 208 437.3 211.8 435.8 217.2L419.2 275.2L361.2 291.8C355.7 293.4 352 298.4 352 304C352 309.6 355.8 314.7 361.2 316.2L419.2 332.8z'/></svg>");
+
+    $icon-select: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
+    $icon-sort: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-96-96c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L128 370.7 128 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 306.7 41.4-41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-96 96zm352-333.3c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L448 141.3 448 448c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-306.7-41.4 41.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l96-96c12.5-12.5 32.8-12.5 45.3 0l96 96z'/></svg>");
+    $icon-sort-asc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M209.4 39.4C204.8 34.7 198.6 32 192 32s-12.8 2.7-17.4 7.4l-168 176c-9.2 9.6-8.8 24.8 .8 33.9s24.8 8.8 33.9-.8L168 115.9 168 456c0 13.3 10.7 24 24 24s24-10.7 24-24l0-340.1L342.6 248.6c9.2 9.6 24.3 9.9 33.9 .8s9.9-24.3 .8-33.9l-168-176z'/></svg>");
+    $icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M174.6 472.6c4.5 4.7 10.8 7.4 17.4 7.4s12.8-2.7 17.4-7.4l168-176c9.2-9.6 8.8-24.8-.8-33.9s-24.8-8.8-33.9 .8L216 396.1 216 56c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 340.1L41.4 263.4c-9.2-9.6-24.3-9.9-33.9-.8s-9.9 24.3-.8 33.9l168 176z'/></svg>");
+    $icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");
+    $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
+        
+    --icon-arrow: #{escape-svg($icon-arrow)};
+    --icon-close: #{escape-svg($icon-close)};
+    --icon-new-tab: #{escape-svg($icon-new-tab)};
+    --icon-light: #{escape-svg($icon-light)};
+    --icon-dark: #{escape-svg($icon-dark)};
+    --icon-select: #{escape-svg($icon-select)};
+    --icon-sort: #{escape-svg($icon-sort)};
+    --icon-sort-asc: #{escape-svg($icon-sort-asc)};
+    --icon-sort-desc: #{escape-svg($icon-sort-desc)};
+    --icon-error: #{escape-svg($icon-error)};
+    --icon-tick: #{escape-svg($icon-tick)};
+
+    // #endregion
+
+    // #region spacing
+    --spacer: 1rem;
+    --spacer-0: 0;
+    --spacer-1: calc(var(--spacer) * 0.5);
+    --spacer-2: var(--spacer);
+    --spacer-3: calc(var(--spacer) * 1.5);
+    --spacer-4: calc(var(--spacer) * 2);
+    --spacer-5: calc(var(--spacer) * 3);
+    // #endregion
+
+    --max-height-sm: 12.5rem; /* 200px */
+    --max-height-md: 25rem; /* 400px */
+    --max-height-lg: 37.5rem; /* 600px */
 
     // Add in media query based updates to the global vars like updating the heading 1 font size
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      @each $var, $value in $varsSM {
-        #{$var}: #{$value};
-      }
-    }
-
-    @include media-breakpoint-up(md, $mobileOnly) {
-      @each $var, $value in $varsMD {
-        #{$var}: #{$value};
-      }
-    }
-
     @media screen and (min-width: 36em) {
-      @each $var, $value in map.get($vars-responsive, 'sm') {
-        #{'--'+$var}: #{$value};
-      }
+      --container-padding-x: 2.5rem;
+      --padding-inline: 2.5rem;
+      --gutter: 2.5rem;
+      --scale: 1.25;
     }
+    
     @media screen and (min-width: 62em) {
-      @each $var, $value in map.get($vars-responsive, 'md') {
-        #{'--'+$var}: #{$value};
-      }
-    }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      --padding-inline: 2.5rem;
-    }
-    @include media-breakpoint-up(md, $mobileOnly) {
+      --container-padding-x: #{rem(84)};
       --padding-inline: 5.25rem;
+      --gutter: 5.25rem;
+      --scale: 1.414;
 
       &:has(.nav--large) {
         --container-max-width: #{rem(1920)} !important;
         --max-width: #{rem(1920)} !important;
         --padding-inline: #{rem(56)} !important;
-        --container-padding-x-md: #{rem(56)} !important;
-        --container-padding-md: var(--container-padding-top) var(--container-padding-x-md)
-          var(--container-padding-bottom) var(--container-padding-x-md);
-        --container-padding: var(--container-padding-md);
+        --container-padding-x: #{rem(56)} !important;
+        --container-padding: var(--container-padding-top) var(--container-padding-x)
+          var(--container-padding-bottom) var(--container-padding-x);
         --gutter: 3.5rem;
       }
     }
-  }
-
-  .light-theme{
-    color-scheme: light;
-  }
-  .dark-theme{
-    color-scheme: dark;
-  }
-
 
-  // On any background colour we change the default text colour to our primary colour to stand out more
-  [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light):not(.invert-colours):not(iam-header):not(iam-notification):not(.bg-primary, .bg-danger, .bg-dark) {
-    
-    --colour-heading: var(--colour-primary-theme);
-    --colour-body: var(--colour-primary-theme);
-    color: var(--colour-primary-theme);
-    
-    > * {
-      
-      color-scheme: light;
-    }
-  }
-
-
-  :is(.bg-primary, .bg-danger, .bg-dark) {
-
-    --colour-heading: var(--colour-white);
-    --colour-body: var(--colour-white);
-    color: var(--colour-white);
-
-    > * {
-      
-      color-scheme: dark;
-    }
-  }
-
-  // #region When the theme is set to dark via the dark mode component
-  // OR when the dark mode is set via the browser or device when no component is present
-  .dark-theme :is(.bg-primary, .bg-danger, .bg-dark):not(iam-header) {
-
-    --colour-heading: var(--colour-primary-theme);
-    --colour-body: var(--colour-primary-theme);
-    color: var(--colour-primary-theme);
-
-    // Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten
-    > * {
-      color-scheme: light;
-    }
-  }
-
-  .dark-theme .bg-light {
-    color-scheme: light;
-  }
-  
-  @media (prefers-color-scheme: dark) {
-    html:not(.light-theme) :is(.bg-primary, .bg-danger, .bg-dark):not(iam-header) {
-
-      --colour-heading: var(--colour-primary-theme);
-      --colour-body: var(--colour-primary-theme);
-      color: var(--colour-primary-theme);
-
-      // Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten
-      > * {
-        color-scheme: light;
-      }
-    }
-
-    html:not(.light-theme) .bg-light {
-
-      color-scheme: light;
-    }
-  }
-  // #endregion
-
-  .invert-colours {
-    > * {
-      color-scheme: dark;
-      color: var(--colour-white);
-    }
-  }
-
-
-  @media (forced-colors: active) {
-    #{$root} {
-      --contrast-outline-width: 1px;
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
     }
   }
 }
+

package/assets/sass/main.scss

@@ -1,17 +1,7 @@
 @charset "UTF-8";
 
 @use '_fonts';
-@use '_corefiles' with (
-  $layers: 'true',
-  $mobileOnly: 'false',
-  $darkMode: 'true'
-);
-@use '_grid' with (
-  $mobileOnly: 'false',
-  $darkMode: 'true'
-);
-@use '_utility-mixins' with (
-  $mobileOnly: 'false',
-  $darkMode: 'true'
-);
+@use '_corefiles';
+@use '_grid';
+@use '_utilities';
 @use '_print';

package/assets/sass/templates/auth.scss

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('templates', $layers) {
+
+
+
+@layer templates {
   body:has(.template--auth) {
     display: flex;
     flex-direction: row;
@@ -13,7 +13,7 @@ $darkMode: 'true' !default;
   }
 
   .template--auth {
-    --padding-top: #{rem(24)};
+    --padding-top: 1.5rem;
     --brand-size: #{rem(36)};
 
     display: flex;
@@ -21,8 +21,8 @@ $darkMode: 'true' !default;
     max-width: rem(1280);
     margin-inline: auto;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
-      --padding-top: #{rem(40)};
+    @media screen and (min-width: 62em) {
+      --padding-top: 2.5rem;
       --brand-size: #{rem(64)};
     }
 
@@ -34,10 +34,10 @@ $darkMode: 'true' !default;
       padding-bottom: var(--padding-top);
       padding-inline: var(--container-padding-x);
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         flex: 0 0 auto;
         width: 43.75%;
-        padding-inline-end: calc(var(--container-padding-x) - rem(16));
+        padding-inline-end: calc(var(--container-padding-x) - 1rem);
       }
 
       .brand {
@@ -50,7 +50,7 @@ $darkMode: 'true' !default;
       display: none;
       background-color: var(--colour-primary-theme);
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         display: block;
         flex: 0 0 auto;
         width: 56.25%;
@@ -64,9 +64,9 @@ $darkMode: 'true' !default;
         position: relative;
         display: block;
         margin-top: calc(var(--padding-top) * -1);
-        margin-inline: calc(var(--container-padding-x-md) * -1);
-        min-width: calc(100% + var(--container-padding-x-md) + var(--container-padding-x-md));
-        margin-bottom: rem(40);
+        margin-inline: calc(var(--container-padding-x) * -1);
+        min-width: calc(100% + var(--container-padding-x) + var(--container-padding-x));
+        margin-bottom: 2.5rem;
         max-height: rem(400);
         clip-path: ellipse(70% 80% at 50% 20%);
         rotate: -5deg;
@@ -94,7 +94,7 @@ $darkMode: 'true' !default;
 
       img {
         margin-inline: rem(-24);
-        min-width: calc(100% + rem(24) + rem(24));
+        min-width: calc(100% + 1.5rem + 1.5rem);
         margin-top: rem(-12);
         max-height: rem(424);
         object-fit: cover;

package/assets/sass/templates/form.scss

@@ -3,11 +3,11 @@
 
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('templates', $layers) {
+
+
+
+@layer templates {
   body:has(.template--form) {
     background-color: #e9f9fd;
   }
@@ -34,9 +34,7 @@ $darkMode: 'true' !default;
 
     // Make H2's look like H3's
     :is(h2, .h2) {
-      font-size: map.get($heading-sizes, 'h3_fs');
-      line-height: map.get($heading-sizes, 'h3_lh');
-      padding-bottom: map.get($heading-sizes, 'h3_pb');
+      font-size: var(--h3-fs);
       max-width: var(--content-max-width);
     }
 
@@ -52,17 +50,17 @@ $darkMode: 'true' !default;
       outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
       width: 100%;
 
-      @include media-breakpoint-up(sm, $mobileOnly) {
+      @media screen and (min-width: 36em) {
         max-width: calc(100% - 5rem); // Guess
         margin-inline: auto;
       }
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         max-width: rem(924); // Guess
         border-radius: 0.5rem;
         padding-inline: rem(94);
-        padding-block: rem(40);
-        margin-bottom: rem(32);
+        padding-block: 2.5rem;
+        margin-bottom: 2rem;
       }
 
       > *:last-child {
@@ -70,7 +68,7 @@ $darkMode: 'true' !default;
       }
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       .container--form {
         padding-inline: 0;
         max-width: rem(924) !important;

package/assets/sass/utilities/align.scss

@@ -0,0 +1,25 @@
+@layer utilities {
+  .align-baseline {
+    vertical-align: baseline !important;
+  }
+
+  .align-top {
+    vertical-align: top !important;
+  }
+
+  .align-middle {
+    vertical-align: middle !important;
+  }
+
+  .align-bottom {
+    vertical-align: bottom !important;
+  }
+
+  .align-text-bottom {
+    vertical-align: text-bottom !important;
+  }
+
+  .align-text-top {
+    vertical-align: text-top !important;
+  }
+}