@iamproperty/components 7.6.1 → 7.6.2

package/assets/sass/elements/progress.scss

@@ -1,13 +1,13 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   :is(label, .label):has(progress) {
     position: relative;
-    max-width: $input-max-width;
+    max-width: var(--input-max-width);
     margin-bottom: 2rem;
 
     padding-right: 3rem;
@@ -16,9 +16,9 @@ $darkMode: 'true' !default;
   progress {
     border-radius: rem(5);
     display: block;
-    margin-top: rem(8);
+    margin-top: 0.5rem;
     width: calc(100% + 3rem);
-    height: rem(8);
+    height: 0.5rem;
     margin-left: 0;
     border: none;
   }
@@ -35,7 +35,7 @@ $darkMode: 'true' !default;
     top: auto;
     left: auto;
     right: 0;
-    bottom: rem(16);
+    bottom: 1rem;
     color: var(--colour-heading);
     font-weight: bold;
   }
@@ -74,10 +74,10 @@ $darkMode: 'true' !default;
     --max-width: #{rem(200)};
     --pt: #{rem(90)};
     --pt-percent: 45%;
-    --bar-width: #{rem(20)};
-    --value-fs: #{rem(48)};
-    --value-pb: #{rem(32)};
-    --label-fs: #{rem(18)};
+    --bar-width: 1.25rem;
+    --value-fs: 3rem;
+    --value-pb: 2rem;
+    --label-fs: 1.125rem; /* 18/16 */
 
     position: relative;
     z-index: 1;
@@ -101,19 +101,19 @@ $darkMode: 'true' !default;
     --max-width: #{rem(170)};
     --pt: #{rem(76.5)};
     --pt-percent: 45%;
-    --bar-width: #{rem(20)};
-    --value-pb: #{rem(24)};
+    --bar-width: 1.25rem;
+    --value-pb: 1.5rem;
   }
 
   label:has(.progress--circular.progress--sm) {
     --max-width: #{rem(120)};
     --pt: #{rem(54)};
     --pt-percent: 45%;
-    --bar-width: #{rem(16)};
-    --value-fs: #{rem(24)};
+    --bar-width: 1rem;
+    --value-fs: 1.5rem;
 
-    --value-pb: #{rem(16)};
-    --label-fs: #{rem(12)};
+    --value-pb: 1rem;
+    --label-fs: 0.75rem;
   }
 
   // Responsive-ish settings
@@ -126,8 +126,8 @@ $darkMode: 'true' !default;
       --max-width: #{rem(170)};
       --pt: #{rem(76.5)};
       --pt-percent: 45%;
-      --bar-width: #{rem(20)};
-      --value-pb: #{rem(24)};
+      --bar-width: 1.25rem;
+      --value-pb: 1.5rem;
     }
   }
 
@@ -136,11 +136,11 @@ $darkMode: 'true' !default;
       --max-width: #{rem(120)};
       --pt: #{rem(54)};
       --pt-percent: 45%;
-      --bar-width: #{rem(16)};
-      --value-fs: #{rem(24)};
+      --bar-width: 1rem;
+      --value-fs: 1.5rem;
 
-      --value-pb: #{rem(16)};
-      --label-fs: #{rem(12)};
+      --value-pb: 1rem;
+      --label-fs: 0.75rem;
     }
   }
 

package/assets/sass/elements/table.element.scss

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   // #region reset
   table {
     caption-side: bottom;
@@ -12,9 +12,9 @@ $darkMode: 'true' !default;
   }
 
   caption {
-    padding-top: $table-cell-padding-y;
-    padding-bottom: $table-cell-padding-y;
-    color: $table-caption-color;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    color: gray;
     text-align: left;
   }
 
@@ -23,7 +23,7 @@ $darkMode: 'true' !default;
   // 3. Fix alignment for Safari
 
   th {
-    font-weight: $table-th-font-weight; // 1
+    font-weight: normal; // 1
     text-align: inherit; // 2
     text-align: -webkit-match-parent; // 3
   }
@@ -45,15 +45,15 @@ $darkMode: 'true' !default;
     --border-width: 2px;
     --inner-border-width: 2px;
     width: 100%;
-    font-size: rem(16);
+    font-size: 1rem;
     border: none;
-    margin-bottom: rem(32);
+    margin-bottom: 2rem;
     overflow: auto;
   }
 
   div:has(> table:first-child:last-child) {
     overflow: auto;
-    margin-bottom: rem(32);
+    margin-bottom: 2rem;
 
     table {
       margin-bottom: 0;
@@ -61,14 +61,14 @@ $darkMode: 'true' !default;
   }
 
   :is(td, th) {
-    padding: rem(12) rem(32) rem(12) 0;
+    padding: 0.75rem 2rem 0.75rem 0;
 
     font-weight: normal;
     text-align: left;
     vertical-align: top;
     border: none;
-    font-size: rem(16);
-    line-height: rem(20);
+    font-size: 1rem;
+    line-height: 1.25rem;
     color: var(--colour-body);
 
     &:last-child {
@@ -83,13 +83,13 @@ $darkMode: 'true' !default;
 
   th {
     font-weight: bold;
-    @include var(color, --colour-heading);
+    color: var(--colour-heading);
   }
 
   thead {
     tr {
       border-bottom: var(--border-width) solid currentColor;
-      @include var(border-color, --colour-primary);
+      border-color: var(--colour-primary);
     }
     th {
       padding-top: 0;
@@ -106,7 +106,7 @@ $darkMode: 'true' !default;
     display: block;
     color: var(--colour-heading);
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       max-width: rem(1048);
     }
   }
@@ -115,7 +115,7 @@ $darkMode: 'true' !default;
     thead {
       th:not(:empty) {
         white-space: nowrap;
-        min-width: #{$td-mw};
+        min-width: rem(120);
       }
       th.th--mw-md {
         min-width: rem(240);
@@ -128,7 +128,7 @@ $darkMode: 'true' !default;
 
   tbody tr {
     border-bottom: var(--border-width) solid currentColor;
-    @include var(border-color, --colour-border);
+    border-color: var(--colour-border);
   }
 
   .border-0 > table,

package/assets/sass/elements/toggle-button.scss

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   // #region toggle
   .toggle {
     --outline-width: 0.25rem !important;

package/assets/sass/elements/tooltips.scss

@@ -1,52 +1,6 @@
 @use '../_func' as *;
 
-@mixin tooltip() {
-  display: block;
-  z-index: var(--index-floating);
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  left: auto;
-  right: 0.85em;
-  width: #{rem(270)};
-  transform: translate(50%, 0);
-  background: var(--colour-primary);
-  color: var(--colour-white);
-  padding: rem(24);
-  border-radius: 0.5rem;
-  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
-
-  > strong:first-child {
-    display: block;
-    padding-bottom: 1rem;
-    color: inherit;
-  }
-
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    width: #{rem(335)};
-  }
-
-  @include media-breakpoint-up(md, $mobileOnly) {
-    width: #{rem(360)};
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    margin-left: -0.25rem;
-    border-width: 0.5rem;
-    border-style: solid;
-    border-color: transparent transparent var(--colour-primary) transparent;
-    margin-bottom: -1px;
-  }
-}
-
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-
-@include layer('elements', $layers) {
+@layer elements {
   abbr[title] {
     text-underline-offset: 0.2em;
   }
@@ -78,7 +32,45 @@ $darkMode: 'true' !default;
     &:is(:hover, .hover, :focus, :active) {
       > span {
         opacity: 1;
-        @include tooltip();
+        display: block;
+        z-index: var(--index-floating);
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        left: auto;
+        right: 0.85em;
+        width: #{rem(270)};
+        transform: translate(50%, 0);
+        background: var(--colour-primary);
+        color: var(--colour-white);
+        padding: 1.5rem;
+        border-radius: 0.5rem;
+        box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
+
+        > strong:first-child {
+          display: block;
+          padding-bottom: 1rem;
+          color: inherit;
+        }
+
+        @media screen and (min-width: 36em) {
+          width: #{rem(335)};
+        }
+
+        @media screen and (min-width: 62em) {
+          width: #{rem(360)};
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 100%;
+          left: 50%;
+          margin-left: -0.25rem;
+          border-width: 0.5rem;
+          border-style: solid;
+          border-color: transparent transparent var(--colour-primary) transparent;
+          margin-bottom: -1px;
+        }
       }
     }
 
@@ -112,7 +104,7 @@ $darkMode: 'true' !default;
       }
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       &:is(.shift--left, .shift--right) span {
         transform: translate(50%, 0);
 

package/assets/sass/elements/type.css

@@ -0,0 +1,158 @@
+@layer elements {
+
+  /* #region Headings */
+  :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4) {
+    margin-top: 0; 
+    margin-bottom: 0;
+    font-family: var(--font-heading);
+    font-style: normal;
+    font-weight: bold;
+
+    color: var(--colour-heading);
+    clear: both;
+    display: block;
+
+    & [class*='fa-'] {
+      margin-right: 0.5rem;
+    }
+  }
+
+  :is(.h1, h1) {
+    font-size: var(--h1-fs);
+    line-height: var(--h1-lh);
+    padding-bottom: var(--h1-pb);
+    font-weight: 900;
+  }
+
+  :is(h2, .h2) {
+    font-size: var(--h2-fs);
+    line-height: var(--h2-lh);
+    padding-bottom: var(--h2-pb);
+    font-weight: 900;
+  }
+
+  :is(h3, .h3) {
+    font-size: var(--h3-fs);
+    line-height: var(--h3-lh);
+    padding-bottom: var(--h3-pb);
+    max-width: var(--content-max-width);
+  }
+
+  :is(.h4, h4, .h5, h5, .h6, h6) {
+    font-size: var(--h4-fs);
+    line-height: var(--h4-lh);
+    padding-bottom: var(--h4-pb);
+    max-width: var(--content-max-width);
+  }
+  /* #endregion */
+
+  p {
+    margin-top: 0;
+    font-size: var(--body-fs);
+    line-height: 1.5rem;
+    padding-bottom: 3rem;
+    max-width: var(--content-max-width);
+    margin-bottom: 0;
+  }
+
+  p:has(+ p) {
+    padding-bottom: 1.5rem;
+  }
+
+  :is(.lead, .strapline) {
+    font-size: 1.125rem; /* 18/16 */
+    line-height: 1.75rem; /* 28/16 */
+   padding-bottom: 3rem;
+    max-width: var(--content-max-width);
+    font-weight: 700;
+  }
+
+  small,
+  .small {
+    font-size: 0.875rem; /* 14/16 */
+    line-height: 1.5rem;
+    padding-bottom: 3rem;
+    max-width: var(--content-max-width);
+    font-weight: normal;
+  }
+
+  sub,
+  sup {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+
+  abbr[title] {
+    text-decoration: underline dotted;
+    cursor: help;
+    text-decoration-skip-ink: none;
+  }
+
+  strong {
+    font-weight: bolder;
+    font-family: var(--font-heading);
+    color: var(--colour-heading);
+  }
+
+  address {
+    margin-bottom: 1rem;
+    font-style: normal;
+    line-height: inherit;
+  }
+
+  blockquote {
+    margin: 0;
+    quotes: '“' '”' '‘' '’';
+    padding-bottom: 3rem;
+    overflow: hidden;
+
+    & p {
+      font-size: 1.5rem;
+      line-height: 2rem;
+      padding-bottom: 0;
+    }
+
+    & p:first-child:before {
+      content: open-quote;
+    }
+    & p:last-of-type:after {
+      content: close-quote;
+    }
+
+    & cite {
+      font-size: 1.125rem; /* 18/16 */
+      line-height: 2rem;
+      padding-bottom: 0;
+      font-weight: bold;
+      font-style: normal;
+    }
+  }
+
+  mark {
+    padding: 0.1875em;
+    background-color: yellow;
+  }
+
+  .stat {
+    font-size: 4rem /* 64/16 */;
+    line-height: 4.5rem; /* 72/16 */
+    font-weight: bold;
+    color: var(--colour-heading);
+    display: block;
+
+    text-decoration: underline;
+    text-underline-offset: 0.75rem;
+    text-decoration-color: var(--colour-secondary);
+    text-decoration-thickness: 0.25rem;
+    margin-bottom: 4rem /* 64/16 */;
+  }
+}

package/assets/sass/email.scss

@@ -2,9 +2,10 @@
 
 // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
 
-@use '_func' as *;
-
-$mobileOnly: 'true';
+@use '_functions/bs_functions' as *;
+@use '_functions/bs_variables' as *;
+@use '_functions/bs_mixins' as *;
+@use '_functions/utility-mixins' as *;
 
 // Update the breakpoints to just one to remove some utility classes
 $grid-breakpoints: (
@@ -22,7 +23,7 @@ $default-curve-width: 600;
 @import '_corefiles';
 @import '_grid';
 @import '_bs_grid';
-@import '_utilities';
+@import '_bs_utilities';
 @import '_utility-mixins';
 
 :root {
@@ -42,8 +43,8 @@ html {
 
 .container:not(.container-fluid) {
   max-width: 600px;
-  padding-left: #{rem(48)};
-  padding-right: #{rem(48)};
+  padding-left: 3rem;
+  padding-right: 3rem;
 }
 
 .table--email,

package/assets/sass/error.scss

@@ -3,32 +3,25 @@
 @charset "UTF-8";
 
 // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
-@use '_func' as *;
+@use '_functions/bs_functions' as *;
+@use '_functions/bs_variables' as *;
+@use '_functions/bs_mixins' as *;
+
 
 @use '_corefiles';
 @use '_grid';
 @use '_bs_grid';
+@use '_bs_utilities';
 @use '_utilities';
-@use '_utility-mixins';
 
-@include layer('reset') {
+@layer reset {
   html {
     --font-body: arial, sans-serif !important;
     --font-heading: arial, sans-serif !important;
   }
 }
 
-@include layer('elements') {
-  .h1 {
-    --line-height: #{map.get($heading-sizes, 'h1_lh')};
-
-    font-size: map.get($heading-sizes, 'h1_fs');
-    padding-bottom: map.get($heading-sizes, 'h1_pb');
-    font-weight: 900;
-  }
-}
-
-@include layer('utilities') {
+@layer utilities {
   .gradient-primary {
     background-image: linear-gradient(
       var(--gradient-direction),

package/assets/sass/foundations/colours.scss

@@ -0,0 +1,91 @@
+@use 'sass:map';
+@use '../func' as *;
+
+@layer reset {
+  .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;
+    }
+  }
+}