@iamproperty/components 7.6.0 → 7.6.1

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

@@ -3,7 +3,95 @@
 
 $darkMode: 'true' !default;
 
-body:has(iam-nav.open:not(.nav--sticky):not(.nav--xs-sticky)) {
+// Default colour 
+iam-nav {
+
+  > :not([slot="logo"],[slot="secondary"]) {
+    color-scheme: light;
+  }
+
+  > [slot="secondary"] {
+    color-scheme: light;
+  }
+
+  > .nav--menu {
+    --colour-heading: var(--colour-primary-theme);
+    color-scheme: light;
+  }
+}
+
+iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+  > :not([slot="logo"],[slot="secondary"]) {
+    color-scheme: light;
+  }
+}
+
+.dark-theme iam-nav {
+
+  > :not([slot="logo"],[slot="secondary"]) {
+    color-scheme: dark;
+  }
+  
+  > .nav--menu {
+    --colour-heading: var(--colour-white);
+    color-scheme: dark;
+  }
+}
+
+.dark-theme iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+  --menu-btn-colour: var(--colour-white);
+}
+  
+  @media (prefers-color-scheme: dark) {
+    html:not(.light-theme) iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+      --menu-btn-colour: var(--colour-heading);
+    }
+  }
+
+
+@include media-breakpoint-up(md) {
+  iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+    > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
+      color-scheme: dark;
+    }
+
+    > details > div {
+      color-scheme: light;
+    }
+  }
+
+  .dark-theme iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+    > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
+      color-scheme: light;
+    }
+
+    
+    > details > div {
+      color-scheme: dark;
+    }
+
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html:not(.light-theme) iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+      > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
+        color-scheme: light;
+      }
+
+        
+      > details > div {
+        color-scheme: dark;
+      }
+    }
+  }
+
+}
+
+body:has(iam-nav.open:not(.nav--sticky,.demo-open):not(.nav--xs-sticky)) {
   max-height: 100vh;
   overflow: hidden;
 }
@@ -36,7 +124,7 @@ nav:has(iam-nav) {
   }
 }
 
-@include media-breakpoint-up(md, $mobileOnly) {
+@include media-breakpoint-up(md) {
   nav:has(iam-nav a[slot='secondary']) {
     min-height: #{rem(96 + 40)};
   }
@@ -57,7 +145,7 @@ nav:has(iam-nav.nav--sticky) {
 }
 
 @media screen and (max-width: 36em) {
-  body:has(iam-nav.open:not(.nav--xs-sticky)) {
+  body:has(iam-nav.open:not(.nav--xs-sticky,.demo-open)) {
     max-height: 100vh;
     overflow: hidden;
   }
@@ -80,7 +168,7 @@ nav:has(iam-nav.nav--sticky) {
   }
 }
 
-@include media-breakpoint-up(sm, $mobileOnly) {
+@include media-breakpoint-up(sm) {
   body:has(iam-nav.open:not(.nav--sticky)) {
     max-height: 100vh;
     overflow: hidden;
@@ -199,11 +287,6 @@ iam-nav details {
 // #region mobile and tablet mega menu
 
 @mixin mobDetails() {
-  background-color: var(--colour-canvas);
-
-  @include light-mode($darkMode) {
-    background-color: #eeeeee;
-  }
 
   margin-left: -1.5rem;
   margin-right: -1.5rem;
@@ -212,11 +295,13 @@ iam-nav details {
   position: relative;
 
   summary {
-    background-color: var(--colour-white);
+    background-color: var(--colour-canvas-2);
 
+    /*
     @container style(--theme: dark) {
       background-color: var(--colour-canvas-2);
     }
+      */
     display: block;
     border: none;
     color: var(--colour-link);
@@ -297,6 +382,11 @@ iam-nav details {
 }
 
 @media screen and (max-width: 62em) {
+
+  iam-nav details {
+
+    background-color: #eeeeee;
+  }
   iam-nav details {
     @include mobDetails();
 
@@ -318,6 +408,10 @@ iam-nav details {
         transform: none;
         font-weight: 400;
       }
+
+      > div {
+        color-scheme: light;
+      }
     }
 
     a + details > summary {
@@ -382,7 +476,7 @@ iam-nav details {
 // #endregion
 
 // #region Desktop mega menu
-@include media-breakpoint-up(md, $mobileOnly) {
+@include media-breakpoint-up(md) {
   iam-nav > details,
   iam-nav *:not(.nav--menu) > details {
     width: auto;
@@ -435,22 +529,11 @@ iam-nav details {
       ) !important;
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 
-      @container style(--theme: light) {
-        background: var(--colour-white);
-        @include reset-colours();
-      }
-      @container style(--theme: dark) {
-        @include invert-colours();
-      }
     }
 
     &[open] > div:has(details) {
       background: var(--colour-canvas-2);
 
-      @include light-mode($darkMode) {
-        background: #eeeeee;
-      }
-
       > a {
         display: inline-block !important;
         margin-right: 2rem !important;
@@ -485,10 +568,6 @@ iam-nav details {
     &[open] > div:not(:has(details)) {
       background: var(--colour-canvas);
 
-      @include light-mode($darkMode) {
-        background: var(--colour-white);
-        --colour-canvas-2: white;
-      }
 
       padding-top: rem(40 + 88);
       padding-bottom: rem(64);
@@ -626,7 +705,7 @@ iam-nav details {
 // #endregion
 
 // #region Search
-@include media-breakpoint-up(md, $mobileOnly) {
+@include media-breakpoint-up(md) {
   iam-nav {
     &.search-open {
       > *:not([slot='logo']):not([slot='secondary']):not([slot='search']) {
@@ -638,7 +717,7 @@ iam-nav details {
 // #endregion
 
 // #region Dual navbar in desktop
-@include media-breakpoint-up(md, $mobileOnly) {
+@include media-breakpoint-up(md) {
   iam-nav:has([slot='dual']) {
     .brand:has(~ [slot='dual']) {
       margin-right: rem(24) !important;
@@ -781,19 +860,6 @@ iam-nav .nav--menu {
     display: none !important;
   }
 }
-@layer overrides {
 
-  iam-nav.bg-primary .nav--menu{
 
-    --theme: light;
-
-    @each $color, $value in $theme-colors {
-      --colour-#{$color}: #{$value}!important;
-    }
-    @each $color, $value in $non-theme-colors {
-      --colour-#{$color}: #{$value}!important;
-    }
-        
-  }
-}
 // #endregion

package/assets/sass/components/notification.scss

@@ -12,13 +12,8 @@ $darkMode: 'true' !default;
   font-size: rem(15);
   border: rem(2) solid var(--colour, var(--colour-info));
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+  background: var(--colour-notification-bg);
 
-  @container style(--body-theme: light) {
-    background: #e9f9fd;
-  }
-      @container style(--body-theme: dark) {
-    background: var(--colour-canvas-2);
-    }
 
   ::slotted(i),
   i {
@@ -26,40 +21,33 @@ $darkMode: 'true' !default;
   }
 }
 
+:host(:not(.bg-danger)){
+  
+  color-scheme: light;
+  color: var(--colour-heading);
+}
+
 :host([data-type]),
 .iam-notification[data-type] {
   border: rem(2) solid transparent;
 }
 
 
-  :host(.colour-warning),
-  .iam-notification.colour-warning {
-    @container style(--body-theme: light) {
-      background: #fff6e6;
-    }
-    @container style(--body-theme: dark) {
-    background: var(--colour-canvas-2);
-    }
-  }
+:host(.colour-warning),
+.iam-notification.colour-warning {
+  background: var(--colour-notification-warning-bg);
+}
 
   :host(.colour-danger),
   .iam-notification.colour-danger {
-    @container style(--body-theme: light) {
-    background: #fcebec;
-    }
-    @container style(--body-theme: dark) {
-    background: var(--colour-canvas-2);
-    }
+    
+  background: var(--colour-notification-danger-bg);
   }
 
   :host(.colour-success),
   .iam-notification.colour-success {
-    @container style(--body-theme: light) {
-    background: #f8fdf6;
-    }
-    @container style(--body-theme: dark) {
-    background: var(--colour-canvas-2);
-    }
+    
+  background: var(--colour-notification-success-bg);
   }
 
 :host(.bg-white),
@@ -110,10 +98,7 @@ $darkMode: 'true' !default;
   margin-inline: auto;
   display: flex;
   flex-wrap: nowrap;
-
-  @include light-mode($darkMode) {
-    color: var(--colour-heading);
-  }
+  color: var(--colour-heading);
 
   .notification__icon {
     margin-inline-end: rem(16);

package/assets/sass/components/property-searchbar.scss

@@ -99,7 +99,7 @@
 
 // #region Heror searchbar
 .property-searchbar--hero .property-searchbar {
-  @include reset-colours();
+
 
   padding: 1rem;
   background-color: #fff;

package/assets/sass/components/table-basic.component.scss

@@ -11,10 +11,11 @@ $darkMode: 'true' !default;
 }
 
 .table__container {
+  
   --wrapper-padding: #{rem(32)};
   --bg-colour: #ffffff;
   display: block;
-  background: white;
+  background: var(--colour-canvas-2);
   padding: var(--wrapper-padding);
   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
   border-radius: rem(10);

package/assets/sass/components/table-basic.global.scss

@@ -37,7 +37,10 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       background: var(--row-bg);
     }
   }
-
+  
+  :is(td, th) {
+    color: var(--colour-body-default);
+  }
   /*
   &[data-expandable] [data-expand-button][aria-expanded] {
     background-color: transparent;
@@ -220,7 +223,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       width: var(--cta-width);
       min-height: calc(var(--row-height) - 2px);
       text-align: right;
-      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvs-2)) 1.25rem);
+      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvas-2)) 1.25rem);
       cursor: default;
       padding-bottom: 0;
 
@@ -233,7 +236,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     }
 
     tbody tr:hover > *:not(:first-child):last-child {
-      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvs-2)) 1.25rem);
+      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvas-2)) 1.25rem);
     }
   }
 }
@@ -396,10 +399,7 @@ table {
   margin: -2rem -2rem 2rem -2rem;
   box-shadow: none;
   border-radius: 0;
-
-  @include light-mode($darkMode) {
     background-color: #e6eaec;
-  }
 }
 
 // Actionbar
@@ -499,9 +499,8 @@ table {
 @container (width < 23.4375em) {
   :is(#{$selector}) {
     iam-actionbar {
-      @include light-mode($darkMode) {
         background-color: #e6eaec;
-      }
+      
     }
     .actionbar__sticky + * {
       margin-top: 0 !important;

package/assets/sass/elements/admin-panel.scss

@@ -186,10 +186,6 @@ $darkMode: 'true' !default;
       margin-inline: calc(var(--padding-x) * -1);
       margin-bottom: var(--padding-top);
 
-      @include light-mode($darkMode) {
-        background: #eeeeee;
-      }
-
       &:first-child {
         margin-top: calc(var(--padding-top) * -1);
       }

package/assets/sass/elements/buttons--compact.scss

@@ -117,21 +117,21 @@ $darkMode: 'true' !default;
     ):not(.bg-canvas-2):not(.prevent-invert),
   .invert-colours {
     .btn-compact.btn-secondary:not(:hover, :focus, .hover, :focus-within):not(.btn-collapse) {
-      background-color: var(--colour-inverted) !important;
-      border-color: var(--colour-inverted) !important;
-      color: var(--colour-primary-theme);
+      background-color: var(--colour-white) !important;
+      border-color: var(--colour-white) !important;
+      color: var(--colour-heading);
     }
 
     .btn-compact.btn-secondary:is(:hover, :focus, .hover, :focus-within):not([disabled]):not(.btn-collapse) {
       background-color: transparent;
-      border-color: var(--colour-inverted) !important;
-      color: var(--colour-inverted);
+      border-color: var(--colour-white) !important;
+      color: var(--colour-white);
     }
 
     .btn-compact.btn-secondary[disabled] {
-      background-color: var(--colour-inverted) !important;
-      border-color: var(--colour-inverted) !important;
-      color: var(--colour-primary-theme) !important;
+      background-color: var(--colour-white) !important;
+      border-color: var(--colour-white) !important;
+      color: var(--colour-heading) !important;
     }
   }
 

package/assets/sass/elements/forms.scss

@@ -587,8 +587,8 @@ $optionalText: 'true' !default;
       --tick-colour: var(--colour-muted);
 
       &:before {
-        background: var(--colour-check-bg, var(--colour-light));
-        outline: var(--outline-width) solid var(--colour-light);
+        background: var(--colour-check-bg, light-dark(var(--colour-light), #444444));
+        outline: var(--outline-width) solid light-dark(var(--colour-light), #444444);
       }
     }
     input:is([type='radio'], [type='checkbox']):is(:active, .active) + label,
@@ -696,7 +696,8 @@ $optionalText: 'true' !default;
       linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top /
         calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem))
         calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem))
-        no-repeat;
+        no-repeat,
+      linear-gradient(to right, var(--colour-canvas-2), var(--colour-canvas-2));
 
     padding-right: calc(
       var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-lh, 1.25rem)

package/assets/sass/foundations/reboot.scss

@@ -114,7 +114,6 @@ $darkMode: 'true' !default;
 
   body {
     margin: 0; // 1
-    color-scheme: light dark;
     @include var(background, --colour-canvas);
     @include var(font-family, --font-body);
 
@@ -124,12 +123,7 @@ $darkMode: 'true' !default;
     -webkit-text-size-adjust: 100%; // 3
     -webkit-tap-highlight-color: rgba($black, 0); // 4
 
-    @container style(--theme: dark) {
-      color: var(--colour-body);
-    }
-    @container style(--theme: light) {
-      color: var(--colour-body);
-    }
+    color: var(--colour-body);
   }
 
   // #region scrollbars