@iamproperty/components 7.6.0 → 7.6.1

package/assets/sass/_functions/utility-mixins.scss

@@ -343,15 +343,17 @@ $new_utilities: map.merge(
 );
 
 @mixin wider-colours() {
-  @each $colour, $value in $wider-colours {
-    .wider-colour-#{$colour} {
-      --wider-colour: var(--wider-colour-#{$colour});
-      --wider-colour-hover: var(--wider-colour-#{$colour}-hover);
-      --wider-colour-active: var(--wider-colour-#{$colour}-active);
-      color: #262626 !important;
-    }
+  
+  @for $i from 1 through 23 {
+  .wider-colour-#{$i} {
+    --wider-colour: var(--wider-colour-#{$i} );
+    --wider-colour-hover: var(--wider-colour-#{$i}-hover);
+    --wider-colour-active: var(--wider-colour-#{$i}-active);
+    color: #262626 !important;
   }
 }
+
+}
 // #endregion
 
 // #region Align
@@ -1320,17 +1322,32 @@ $new_utilities: map.merge(
 );
 
 @mixin colours() {
-  @each $color, $value in $theme-colors {
+
+  .text-heading {
+    
+    color: var(--colour-heading) !important;
+  }
+
+  $new-theme-colors: (
+    'primary': var(--colour-primary),
+    'secondary': var(--colour-secondary),
+    'info': var(--colour-info),
+    'warning': var(--colour-warning),
+    'success': var(--colour-success),
+    'complete': var(--colour-complete),
+    'danger': var(--colour-danger),
+    'dark': var(--colour-dark),
+    'light': var(--colour-light),
+    'canvas': var(--colour-canvas),
+    'white': var(--colour-white),
+  );
+
+  @each $color, $value in $new-theme-colors {
     .text-#{$color} {
       --text-opacity: 1;
       color: var(--colour-#{$color}) !important;
     }
 
-    .text-heading {
-      
-      color: var(--colour-heading) !important;
-    }
-
     .bg-#{$color} {
       --bg-opacity: 1;
       --bg-colour: var(--colour-#{$color}) !important;

package/assets/sass/_functions/variables.scss

@@ -258,7 +258,6 @@ $grays: ();
 $theme-colors: ();
 $theme-colors: map.merge(
   (
-    'primary': $primary,
     'secondary': $secondary,
     'info': $info,
     'warning': $warning,
@@ -332,7 +331,6 @@ $non-theme-colors: map.merge(
 }
 
 $dark-mode-colors: (
-  'primary': #b3c1c5,
   'warning': #ffb733,
   'info': #35c5e9,
   'success': #b4e6a5,
@@ -365,84 +363,6 @@ $dark-mode-functional-colors: (
   'activeLinkBorder': #1dbde6,
 );
 
-$wider-colours: (
-  '1': '#EEEEEE',
-  '2': '#EBD7F6',
-  '3': '#BEE8F8',
-  '4': '#A6DCC7',
-  '5': '#FAD0DA',
-  '6': '#AFCCF2',
-  '7': '#FFD2B4',
-  '8': '#CDF0F2',
-  '9': '#FFABC2',
-  '10': '#DCEAF2',
-  '11': '#EEBCB3',
-  '12': '#F0BDFF',
-  '13': '#FFF8CF',
-  '14': '#92E3DF',
-  '15': '#FEEAE8',
-  '16': '#8BC3A6',
-  '17': '#FEF0A6',
-  '18': '#FFBDA0',
-  '19': '#CBEFE1',
-  '20': '#FFDD90',
-  '21': '#97DBF2',
-  '22': '#FFAF91',
-  '23': '#C2DCD9',
-);
-
-$wider-colours-hover: (
-  '1': '#E0E0E0',
-  '2': '#DFCCE8',
-  '3': '#B6DEED',
-  '4': '#98CBB7',
-  '5': '#EFC8D1',
-  '6': '#A6C1E5',
-  '7': '#F4CAAF',
-  '8': '#C2E3E5',
-  '9': '#F5A2B9',
-  '10': '#CFDCE3',
-  '11': '#E3B2A9',
-  '12': '#E3B2F2',
-  '13': '#F0E9C2',
-  '14': '#8AD9D6',
-  '15': '#F8E1DF',
-  '16': '#81B59A',
-  '17': '#F2E5A0',
-  '18': '#F2B69D',
-  '19': '#C2E3D7',
-  '20': '#F2D28A',
-  '21': '#8FD0E6',
-  '22': '#F0A68B',
-  '23': '#B9D1CE',
-);
-
-$wider-colours-active: (
-  '1': '#D6D6D6',
-  '2': '#D4C2DD',
-  '3': '#ABD1DF',
-  '4': '#95C6B3',
-  '5': '#E1BBC4',
-  '6': '#9EB8DA',
-  '7': '#E6BDA2',
-  '8': '#B9D8DA',
-  '9': '#E69AAF',
-  '10': '#C6D3DA',
-  '11': '#D6A9A1',
-  '12': '#D8AAE6',
-  '13': '#E6DFBA',
-  '14': '#83CCC9',
-  '15': '#F4E0DE',
-  '16': '#7DB095',
-  '17': '#FEF0A6',
-  '18': '#E6AA90',
-  '19': '#CBEFE1',
-  '20': '#E6C782',
-  '21': '#88C5DA',
-  '22': '#E69E83',
-  '23': '#AFC6C3',
-);
-
 // Kill bootstrap colors
 $colors: ();
 $theme-colors-rgb: ();
@@ -780,16 +700,16 @@ $ut-mh-lg-px: 600;
 $ut-mh-lg: #{rem($ut-mh-lg-px)};
 // #endregion
 
-$chart-colour-1: map.get($wider-colours, '3') !default;
-$chart-colour-2: map.get($wider-colours, '4') !default;
-$chart-colour-3: map.get($wider-colours, '5') !default;
-$chart-colour-4: map.get($wider-colours, '6') !default;
-$chart-colour-5: map.get($wider-colours, '7') !default;
-$chart-colour-6: map.get($wider-colours, '8') !default;
-$chart-colour-7: map.get($wider-colours, '9') !default;
-$chart-colour-8: map.get($wider-colours, '10') !default;
-$chart-colour-9: map.get($wider-colours, '11') !default;
-$chart-colour-10: map.get($wider-colours, '12') !default;
+$chart-colour-1: var(--wider-colour-3) !default;
+$chart-colour-2: var(--wider-colour-4) !default;
+$chart-colour-3: var(--wider-colour-5) !default;
+$chart-colour-4: var(--wider-colour-6) !default;
+$chart-colour-5: var(--wider-colour-7) !default;
+$chart-colour-6: var(--wider-colour-8) !default;
+$chart-colour-7: var(--wider-colour-9) !default;
+$chart-colour-8: var(--wider-colour-10) !default;
+$chart-colour-9: var(--wider-colour-11) !default;
+$chart-colour-10: var(--wider-colour-12) !default;
 
 $chart-colors: ();
 $chart-colors: map.merge(

package/assets/sass/components/actionbar.component.scss

@@ -93,10 +93,7 @@ slot[name='selectall'] {
   background-color: var(--colour-canvas);
   pointer-events: none;
   display: flex;
-
-  @include light-mode($darkMode) {
-    background-color: #e6eaec;
-  }
+  background-color: #e6eaec;
 
   @supports selector(:has(*)) {
     opacity: 0;
@@ -111,10 +108,7 @@ slot[name='selectall'] {
   position: relative;
   opacity: 0;
   pointer-events: none;
-
-  @include light-mode($darkMode) {
-    background-color: #e6eaec;
-  }
+  background-color: #e6eaec;
 }
 
 // Show selected bar

package/assets/sass/components/actionbar.global.scss

@@ -10,7 +10,7 @@ iam-actionbar {
   border-top-left-radius: rem(10);
   border-top-right-radius: rem(10);
 
-  @container style(--theme: dark) {
+  @media (prefers-color-scheme: dark) {
     background-color: var(--colour-canvas);
   }
 }
@@ -27,7 +27,7 @@ main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
     padding-top: 0;
   }
 
-  @include light-mode($darkMode) {
+  @media (prefers-color-scheme: light) {
     background-color: #e6eaec;
   }
 

package/assets/sass/components/address-lookup.preload.scss

@@ -79,3 +79,13 @@ iam-std-address-lookup.open-results iam-address-lookup::part(list-wrapper){
 iam-std-address-lookup.open-results iam-address-lookup [slot="preloadedList"]{
   display: block;
 }
+
+iam-address-lookup label[slot="actions"]:has([type="checkbox"]){
+  margin-bottom: 0;
+  padding-top: 0;
+
+  &:before,
+  &:after {
+    top: -0.2rem;
+  }
+}

package/assets/sass/components/charts.module.scss

@@ -2,16 +2,16 @@
 
 @use '../_func' as *;
 
-$chart-colour-1-hover: map.get($wider-colours-hover, '3') !default;
-$chart-colour-2-hover: map.get($wider-colours-hover, '4') !default;
-$chart-colour-3-hover: map.get($wider-colours-hover, '5') !default;
-$chart-colour-4-hover: map.get($wider-colours-hover, '6') !default;
-$chart-colour-5-hover: map.get($wider-colours-hover, '7') !default;
-$chart-colour-6-hover: map.get($wider-colours-hover, '8') !default;
-$chart-colour-7-hover: map.get($wider-colours-hover, '9') !default;
-$chart-colour-8-hover: map.get($wider-colours-hover, '10') !default;
-$chart-colour-9-hover: map.get($wider-colours-hover, '11') !default;
-$chart-colour-10-hover: map.get($wider-colours-hover, '12') !default;
+$chart-colour-1-hover: var(--widericolour-3) !default;
+$chart-colour-2-hover: var(--widericolour-4) !default;
+$chart-colour-3-hover: var(--widericolour-5) !default;
+$chart-colour-4-hover: var(--widericolour-6) !default;
+$chart-colour-5-hover: var(--widericolour-7) !default;
+$chart-colour-6-hover: var(--widericolour-8) !default;
+$chart-colour-7-hover: var(--widericolour-9) !default;
+$chart-colour-8-hover: var(--widericolour-10) !default;
+$chart-colour-9-hover: var(--widericolour-11) !default;
+$chart-colour-10-hover: var(--widericolour-12) !default;
 
 $chart-colors-hover: ();
 $chart-colors-hover: map.merge(

package/assets/sass/components/collapsible-side.scss

@@ -7,8 +7,7 @@ $darkMode: 'true' !default;
 
 // Host
 :host {
-  --colour-border: #e9e9e9;
-  --side-link-hover: var(--colour-canvas-2);
+  --side-link-hover: light-dark(#eeeeee,var(--colour-canvas-2));
   grid-column: full-width;
 
   display: block;
@@ -19,9 +18,6 @@ $darkMode: 'true' !default;
   overflow: hidden;
   position: relative;
 
-  @include light-mode($darkMode) {
-    --side-link-hover: #eeeeee;
-  }
 
   @include media-breakpoint-up(md, $mobileOnly) {
     max-height: calc(100vh - var(--nav-height));
@@ -102,7 +98,6 @@ $darkMode: 'true' !default;
     background-color: var(--colour-canvas-2);
     border: 2px solid var(--colour-border);
     z-index: 99;
-    color: var(--colour-primary-theme);
     transition: opacity 0.2s;
 
     &[aria-expanded] {

package/assets/sass/components/darkmode.component.scss

@@ -5,7 +5,7 @@ $icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 
 ::slotted(.toggle):after {
   --icon: #{escape-svg($icon-light)};
-  background: var(--colour-primary-theme);
+  background: red;
   mask-image: var(--icon);
   mask-size: 100%;
   mask-repeat: no-repeat;

package/assets/sass/components/filter-card.component.scss

@@ -40,7 +40,7 @@
   outline: none;
 
   :is(.card__body, .card__footer) {
-    background: #eeeeee;
+    background: light-dark(#eeeeee, var(--colour-canvas));
   }
 }
 

package/assets/sass/components/milestone.scss

@@ -206,10 +206,10 @@ iam-milestone {
 
   @media (prefers-color-scheme: dark) {
 
-    --theme: light;
+    color-scheme: light;
     
     > * {
-      color: var(--colour-heading);
+      color: var(--colour-primary-theme);
     }
     
   }

package/assets/sass/components/nav.component.scss

@@ -35,6 +35,21 @@ $darkMode: 'true' !default;
   align-items: center !important;
 }
 
+
+// #region Fix colours 
+
+:host(.bg-primary) .container {
+
+  //color-scheme: dark;
+
+  .menu {
+    
+    //color-scheme: light;
+  }
+}
+
+// #endregion
+
 .btn-menu {
   padding: 0;
   margin: 0 0 0 rem(32);
@@ -48,7 +63,7 @@ $darkMode: 'true' !default;
   border: none;
   width: rem(24);
   text-indent: -1000%;
-  color: var(--colour-brand);
+  color: var(--menu-btn-colour);
 
   i {
     font-size: rem(24);
@@ -117,10 +132,7 @@ $darkMode: 'true' !default;
     }
 
     .btn {
-      @include light-mode($darkMode) {
-        @include reset-colours();
-      }
-
+      
       margin: 0 !important;
       display: flex;
 
@@ -185,6 +197,7 @@ $darkMode: 'true' !default;
   }
 
   .menu {
+
     
     overscroll-behavior: contain;
     width: calc(#{rem(375)} - var(--scrollbar-width));
@@ -203,24 +216,15 @@ $darkMode: 'true' !default;
 
     > * {
       flex-shrink: 0;
+      
+      color-scheme: light;
     }
 
-    @container style(--body-theme: light) {
-
-      --theme: light;
-    }
-
-    @container style(--theme: dark) {
-
-      --colour-link: var(--colour-white);
-      //@include invert-colours();
-    }
 
     // The menu is always white unless in dark mode
-    @include light-mode($darkMode) {
-      background-color: var(--colour-white);
-      @include reset-colours();
-    }
+    
+      background-color: var(--colour-canvas-2);
+      
 
     @media (forced-colors: active) {
       outline: 1px solid white;
@@ -263,9 +267,6 @@ $darkMode: 'true' !default;
     flex-grow: 1;
     position: relative;
 
-    @include light-mode($darkMode) {
-      background-color: #eeeeee;
-    }
 
     .container {
       display: contents;
@@ -412,17 +413,6 @@ $darkMode: 'true' !default;
     left: 0;
     width: 100%;
 
-    @include light-mode($darkMode) {
-      
-      --theme: light;
-      background-color: #eeeeee;
-      @include reset-colours();
-
-    }
-
-    @container style(--theme: dark) {
-      //@include invert-colours();
-    }
 
     .container {
       margin-left: auto;
@@ -579,16 +569,9 @@ $darkMode: 'true' !default;
     flex-shrink: 0;
   }
 
-  @container style(--theme: dark) {
-    //--colour-link: var(--colour-white);
-    //@include invert-colours();
-  }
 
   // The menu is always white unless in dark mode
-  @include light-mode($darkMode) {
-    background-color: var(--colour-white);
-    @include reset-colours();
-  }
+
 
   @media (forced-colors: active) {
     outline: 1px solid white;
@@ -645,7 +628,8 @@ slot[name='menus'] {
 }
 
 ::slotted(.nav--menu.open) {
-  left: calc(100% - (#{rem(375)} - var(--scrollbar-width)));
+  width: calc(#{rem(375)} - var(--modifier));
+  left: calc(100% - (#{rem(375)} - var(--scrollbar-width) - var(--modifier)));
   -webkit-box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
   box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
   pointer-events: all;