@iamproperty/components 7.1.0--beta7 → 7.2.1--beta1

package/assets/sass/_elements.scss

@@ -1,23 +1,103 @@
-@import 'elements/brand.scss';
-@import 'elements/icons.scss';
-@import 'elements/media.scss';
-@import 'elements/type.scss';
+@use './func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+$optionalText: 'true' !default;
+
+@use 'elements/brand.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/icons.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/media.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/type.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
 // elements
-@import 'elements/lists.scss';
-@import 'elements/tooltips.scss';
-@import 'elements/container.scss';
-@import 'elements/table.element.scss';
+@use 'elements/lists.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/tooltips.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/container.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/table.element.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
 
-@import 'elements/links.scss';
-@import 'elements/buttons';
-@import 'elements/dialog.scss';
-@import 'elements/popover.scss';
-@import 'elements/modal.scss';
-@import 'elements/admin-panel.scss';
+@use 'elements/links.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/buttons' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/dialog.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/popover.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/modal.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/admin-panel.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
 
-@import 'elements/forms.scss';
+@use 'elements/forms.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly,
+  $optionalText: $optionalText
+);
 
-@import 'elements/badge-tag.scss';
-@import 'elements/details.scss';
+@use 'elements/badge-tag.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'elements/details.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
 
-@import 'elements/progress.scss';
+@use 'elements/progress.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);

package/assets/sass/_example.scss

@@ -0,0 +1,61 @@
+// Include and builtin sass modules
+@use 'sass:map';
+
+// Include any local files needed, the _func file will bring in all functions and variables
+@use '_func.scss' as *;
+
+// Sass variables declared
+$root: ':root' !default;
+$layers: 'true' !default;
+
+// Each file should be added to a layer: legacy, reset, elements, components, templates, overrides or utilities
+@include layer('elements') {
+  // Try to keep the selectors as basic and easy to read as apossible
+  .element {
+    --css-variable: 3rem;
+    --second-variable: 3rem;
+
+    // Rulesets
+    // - Always use relative values with the exception of borders, text-decoration and outlines
+    // - Use globally set CSS variables as much as possible especially for cases like: font sizes and colours
+    width: 1rem;
+    border: 2px solid var(--colour-border);
+
+    // Any expanded queries should be added after all of the root rulesets
+    &:has(> i) {
+      position: relative;
+    }
+
+    // Any media queries should be added after all of the root rulesets
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      min-height: rem(300);
+    }
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      min-height: rem(470);
+    }
+
+    @include dark-mode($darkMode) {
+      // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
+      [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light) {
+        color: var(--colour-body);
+      }
+    }
+
+    @media (forced-colors: active) {
+      #{$root} {
+        --contrast-outline-width: 1px;
+      }
+    }
+  }
+
+  // Extends should only be used inside of the same file and used very carefully
+  %heading {
+    font-weight: bold;
+    line-height: var(--line-height);
+  }
+
+  :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
+    @extend %heading;
+  }
+}

package/assets/sass/_func.scss

@@ -1,18 +1,10 @@
-$compatible: 'false' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-$layers: 'true' !default;
 $optionalText: 'true' !default;
 
 // Declare global vars variable
-$vars: () !default;
-$varsSM: () !default;
-$varsMD: () !default;
 
-$prefix: '';
+@forward '_functions/functions';
 
-@import '_functions/functions';
-@import '_functions/variables';
-@import '_functions/mixins';
-@import '_functions/bs_utilities';
-@import '_functions/utility-mixins';
+@forward '_functions/variables';
+
+@forward '_functions/mixins';
+@forward '_functions/utility-mixins';

package/assets/sass/_functions/bs_utilities.scss

@@ -1,7 +1,11 @@
+@use 'sass:map';
+
+@use 'variables_old' as *;
+
 // #region Bootstrap
 $utilities: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$utilities: map-merge(
+$utilities: map.merge(
   (
     // scss-docs-start utils-vertical-align
     'align': (
@@ -98,14 +102,14 @@ $utilities: map-merge(
     'border': (
         property: border,
         values: (
-          null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+          null: var(--border-width) var(--border-style) var(--border-color),
           0: 0,
         ),
       ),
     'border-top': (
       property: border-top,
       values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+        null: var(--border-width) var(--border-style) var(--border-color),
         0: 0,
       ),
     ),
@@ -113,14 +117,14 @@ $utilities: map-merge(
       property: border-right,
       class: border-end,
       values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+        null: var(--border-width) var(--border-style) var(--border-color),
         0: 0,
       ),
     ),
     'border-bottom': (
       property: border-bottom,
       values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+        null: var(--border-width) var(--border-style) var(--border-color),
         0: 0,
       ),
     ),
@@ -128,7 +132,7 @@ $utilities: map-merge(
       property: border-left,
       class: border-start,
       values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+        null: var(--border-width) var(--border-style) var(--border-color),
         0: 0,
       ),
     ),
@@ -332,7 +336,7 @@ $utilities: map-merge(
         responsive: true,
         property: margin,
         class: m,
-        values: map-merge(
+        values: map.merge(
             $spacers,
             (
               auto: auto,
@@ -343,7 +347,7 @@ $utilities: map-merge(
       responsive: true,
       property: margin-right margin-left,
       class: mx,
-      values: map-merge(
+      values: map.merge(
           $spacers,
           (
             auto: auto,
@@ -354,7 +358,7 @@ $utilities: map-merge(
       responsive: true,
       property: margin-top margin-bottom,
       class: my,
-      values: map-merge(
+      values: map.merge(
           $spacers,
           (
             auto: auto,
@@ -365,7 +369,7 @@ $utilities: map-merge(
       responsive: true,
       property: margin-top,
       class: mt,
-      values: map-merge(
+      values: map.merge(
           $spacers,
           (
             auto: auto,
@@ -376,7 +380,7 @@ $utilities: map-merge(
       responsive: true,
       property: margin-right,
       class: me,
-      values: map-merge(
+      values: map.merge(
           $spacers,
           (
             auto: auto,
@@ -387,7 +391,7 @@ $utilities: map-merge(
       responsive: true,
       property: margin-bottom,
       class: mb,
-      values: map-merge(
+      values: map.merge(
           $spacers,
           (
             auto: auto,
@@ -398,7 +402,7 @@ $utilities: map-merge(
       responsive: true,
       property: margin-left,
       class: ms,
-      values: map-merge(
+      values: map.merge(
           $spacers,
           (
             auto: auto,
@@ -505,7 +509,7 @@ $utilities: map-merge(
         property: font-family,
         class: font,
         values: (
-          monospace: var(--#{$prefix}font-monospace),
+          monospace: var(--font-monospace),
         ),
       ),
     'font-size': (
@@ -584,7 +588,7 @@ $utilities: map-merge(
         local-vars: (
           'text-opacity': 1,
         ),
-        values: map-merge(
+        values: map.merge(
             $utilities-text-colors,
             (
               'muted': $text-muted,
@@ -614,7 +618,7 @@ $utilities: map-merge(
         local-vars: (
           'bg-opacity': 1,
         ),
-        values: map-merge(
+        values: map.merge(
             $utilities-bg-colors,
             (
               'transparent': transparent,
@@ -637,7 +641,7 @@ $utilities: map-merge(
         property: background-image,
         class: bg,
         values: (
-          gradient: var(--#{$prefix}gradient),
+          gradient: var(--gradient),
         ),
       ),
     // scss-docs-start utils-interaction
@@ -656,43 +660,43 @@ $utilities: map-merge(
         property: border-radius,
         class: rounded,
         values: (
-          null: var(--#{$prefix}border-radius),
+          null: var(--border-radius),
           0: 0,
-          1: var(--#{$prefix}border-radius-sm),
-          2: var(--#{$prefix}border-radius),
-          3: var(--#{$prefix}border-radius-lg),
-          4: var(--#{$prefix}border-radius-xl),
-          5: var(--#{$prefix}border-radius-2xl),
+          1: var(--border-radius-sm),
+          2: var(--border-radius),
+          3: var(--border-radius-lg),
+          4: var(--border-radius-xl),
+          5: var(--border-radius-2xl),
           circle: 50%,
-          pill: var(--#{$prefix}border-radius-pill),
+          pill: var(--border-radius-pill),
         ),
       ),
     'rounded-top': (
       property: border-top-left-radius border-top-right-radius,
       class: rounded-top,
       values: (
-        null: var(--#{$prefix}border-radius),
+        null: var(--border-radius),
       ),
     ),
     'rounded-end': (
       property: border-top-right-radius border-bottom-right-radius,
       class: rounded-end,
       values: (
-        null: var(--#{$prefix}border-radius),
+        null: var(--border-radius),
       ),
     ),
     'rounded-bottom': (
       property: border-bottom-right-radius border-bottom-left-radius,
       class: rounded-bottom,
       values: (
-        null: var(--#{$prefix}border-radius),
+        null: var(--border-radius),
       ),
     ),
     'rounded-start': (
       property: border-bottom-left-radius border-top-left-radius,
       class: rounded-start,
       values: (
-        null: var(--#{$prefix}border-radius),
+        null: var(--border-radius),
       ),
     ),
     // scss-docs-end utils-border-radius
@@ -712,7 +716,7 @@ $utilities: map-merge(
 
 // #region Sizing
 /* Enhance the max width utility to include fit-content which can come in handy for flex-box based layouts. */
-$utilities: map-merge(
+$utilities: map.merge(
   $utilities,
   (
     'max-width': (
@@ -737,7 +741,7 @@ $utilities: map-merge(
   )
 );
 
-$utilities: map-merge(
+$utilities: map.merge(
   $utilities,
   (
     'object-fit': (
@@ -753,7 +757,7 @@ $utilities: map-merge(
 //  #endregion
 
 // #region Add to line height classes
-$utilities: map-merge(
+$utilities: map.merge(
   $utilities,
   (
     'line-height': (
@@ -775,7 +779,7 @@ $utilities: map-merge(
 // #endregion
 
 // #region Remove Border colour utitlity classes
-$utilities: map-merge(
+$utilities: map.merge(
   $utilities,
   (
     'border-color': null,
@@ -784,7 +788,7 @@ $utilities: map-merge(
 // #endregion
 
 // #region Remove floats - They are too unpredictable and it is preferred to use flex or grid
-$utilities: map-merge(
+$utilities: map.merge(
   $utilities,
   (
     'float': null,
@@ -793,7 +797,7 @@ $utilities: map-merge(
 // #endregion
 
 // #region Fonts
-$utilities: map-merge(
+$utilities: map.merge(
   $utilities,
   (
     'font-body': (
@@ -809,7 +813,7 @@ $utilities: map-merge(
 //  #endregion
 
 // #region Gradient colours
-$utilities: map-merge(
+$utilities: map.merge(
   $utilities,
   (
     'gradient-color': (
@@ -842,7 +846,7 @@ $utilities: map-merge(
     ),
   )
 );
-$utilities: map-merge(
+$utilities: map.merge(
   $utilities,
   (
     'gradient-direction': (
@@ -858,7 +862,7 @@ $utilities: map-merge(
 // #endregion
 
 // #region Tint helper classes
-$utilities: map-merge(
+$utilities: map.merge(
   $utilities,
   (
     'bg-opacity': (
@@ -879,7 +883,7 @@ $utilities: map-merge(
     ),
   )
 );
-$utilities: map-merge(
+$utilities: map.merge(
   $utilities,
   (
     'text-opacity': (
@@ -903,7 +907,7 @@ $utilities: map-merge(
 // #endregion
 
 // #region Max height classes
-$utilities: map-merge(
+$utilities: map.merge(
   $utilities,
   (
     'container': (