@iamproperty/components 7.1.0--beta7 → 7.2.0

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': (

package/assets/sass/_functions/functions.scss

@@ -1,19 +1,25 @@
 @use 'sass:math';
 @use 'sass:map';
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:meta';
+@use 'sass:string';
+
+$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
 
 // #region from Bootstrap
-// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+// Utility color.mix(ins and functions for evaluating source code across our variables, maps, and color.mix(ins.
 
 // Ascending
 // Used to evaluate Sass maps like our grid breakpoints.
-@mixin _assert-ascending($map, $map-name) {
+@mixin assert-ascending($map, $map-name) {
   $prev-key: null;
   $prev-num: null;
   @each $key, $num in $map {
-    @if $prev-num == null or unit($num) == '%' or unit($prev-num) == '%' {
+    @if $prev-num == null or math.unit($num) == '%' or math.unit($prev-num) == '%' {
       // Do nothing
-    } @else if not comparable($prev-num, $num) {
-      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if not math.compatible($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose math.unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
     } @else if $prev-num >= $num {
       @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
     }
@@ -24,10 +30,10 @@
 
 // Starts at zero
 // Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
-  @if length($map) > 0 {
-    $values: map-values($map);
-    $first-value: nth($values, 1);
+@mixin assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
+  @if list.length($map) > 0 {
+    $values: map.values($map);
+    $first-value: list.nth($values, 1);
     @if $first-value != 0 {
       @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
     }
@@ -36,18 +42,18 @@
 
 // Colors
 @function to-rgb($value) {
-  @return red($value), green($value), blue($value);
+  @return color.channel($value, 'red', rgb), color.channel($value, 'green', rgb), color.channel($value, 'blue', rgb);
 }
 
 // stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
   @if $identifier == 'body' and $target == 'bg' {
-    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+    @return rgba(var(--#{$identifier}-bg-rgb), var(--#{$target}-opacity));
   }
   @if $identifier == 'body' and $target == 'text' {
-    @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+    @return rgba(var(--#{$identifier}-color-rgb), var(--#{$target}-opacity));
   } @else {
-    @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+    @return rgba(var(--#{$identifier}-rgb), var(--#{$target}-opacity));
   }
 }
 
@@ -58,25 +64,33 @@
     // allow to pass the $key and $value of the map as an function argument
     $_args: ();
     @each $arg in $args {
-      $_args: append($_args, if($arg == '$key', $key, if($arg == '$value', $value, $arg)));
+      $_args: list.append($_args, if($arg == '$key', $key, if($arg == '$value', $value, $arg)));
     }
 
-    $_map: map-merge(
+    $_map: map.merge(
       $_map,
       (
-        $key: call(get-function($func), $_args...),
+        $key: meta.call(meta.get-function($func), $_args...),
       )
     );
   }
 
   @return $_map;
 }
+
+@function show-css-var($identifier) {
+  @return var(--colour-#{$identifier});
+}
+@function show-css-var-text($identifier) {
+  @return var(--colour-#{$identifier});
+}
+
 // stylelint-enable scss/dollar-variable-pattern
 
 @function varify($list) {
   $result: null;
   @each $entry in $list {
-    $result: append($result, var(--#{$prefix}#{$entry}), space);
+    $result: list.append($result, var(--#{$entry}), space);
   }
   @return $result;
 }
@@ -87,7 +101,7 @@
   $result: ();
   @each $key, $value in $map {
     @if $key != 0 {
-      $result: map-merge($result, ('n' + $key: (-$value)));
+      $result: map.merge($result, ('n' + $key: (-$value)));
     }
   }
   @return $result;
@@ -98,7 +112,7 @@
   $result: ();
   @each $key, $value in $map {
     @if (index($values, $key) != null) {
-      $result: map-merge(
+      $result: map.merge(
         $result,
         (
           $key: $value,
@@ -114,7 +128,7 @@
   $merged-maps: ();
 
   @each $map in $maps {
-    $merged-maps: map-merge($merged-maps, $map);
+    $merged-maps: map.merge($merged-maps, $map);
   }
   @return $merged-maps;
 }
@@ -128,11 +142,11 @@
 // @param {String} $replace ('') - New value
 // @return {String} - Updated string
 @function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+  $index: string.index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
-      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return string.slice($string, 1, $index - 1) + $replace +
+      str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
   }
 
   @return $string;
@@ -143,11 +157,11 @@
 // Requires the use of quotes around data URIs.
 
 @function escape-svg($string) {
-  @if str-index($string, 'data:image/svg+xml') {
+  @if string.index($string, 'data:image/svg+xml') {
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
-      @if str-index($string, 'url(') == 1 {
-        $string: url('#{str-replace(str-slice($string, 6, -3), $char, $encoded)}');
+      @if string.index($string, 'url(') == 1 {
+        $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
       } @else {
         $string: str-replace($string, $char, $encoded);
       }
@@ -223,7 +237,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 
   @each $name, $value in $rgb {
     $value: if(divide($value, 255) < 0.03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
-    $rgb: map-merge(
+    $rgb: map.merge(
       $rgb,
       (
         $name: $value,
@@ -237,18 +251,18 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 @function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
+  @return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
 }
 
 // scss-docs-start color-functions
-// Tint a color: mix a color with white
+// Tint a color: color.mix( a color with white
 @function tint-color($color, $weight) {
-  @return mix(white, $color, $weight);
+  @return color.mix(white, $color, $weight);
 }
 
-// Shade a color: mix a color with black
+// Shade a color: color.mix( a color with black
 @function shade-color($color, $weight) {
-  @return mix(black, $color, $weight);
+  @return color.mix(black, $color, $weight);
 }
 
 // Shade the color if the weight is positive, else tint it
@@ -267,11 +281,11 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
     @return $value1 + $value2;
   }
 
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(' + ') + $value2);
+  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(' + ') + $value2);
 }
 
 @function subtract($value1, $value2, $return-calc: true) {
@@ -287,15 +301,15 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
     @return $value1 - $value2;
   }
 
-  @if type-of($value2) != number {
-    $value2: unquote('(') + $value2 + unquote(')');
+  @if meta.type-of($value2) != number {
+    $value2: string.unquote('(') + $value2 + string.unquote(')');
   }
 
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(' - ') + $value2);
+  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(' - ') + $value2);
 }
 
 @function divide($dividend, $divisor, $precision: 10) {
@@ -326,8 +340,8 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
     }
   }
   $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
+  $dividend-unit: math.unit($dividend);
+  $divisor-unit: math.unit($divisor);
   $unit-map: (
     'px': 1px,
     'rem': 1rem,
@@ -389,7 +403,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 }
 
 @function strip-px($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
+  @if meta.type-of($number) == 'number' and not math.unitless($number) {
     @return math.div($number, ($number * 0 + 1));
   }
 
@@ -417,7 +431,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 }
 
 @function tint($colour, $percentage) {
-  @return mix(white, $colour, $percentage);
+  @return color.mix(white, $colour, $percentage);
 }
 @function shade($colour, $percent) {
   @return $colour;
@@ -430,8 +444,8 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 
 // Trims the start/left of the string:
 @function str-trimStart($str) {
-  @if (str-slice($str, 1, 1) == ' ') {
-    @return str-trimStart(str-slice($str, 2));
+  @if (string.slice($str, 1, 1) == ' ') {
+    @return str-trimStart(string.slice($str, 2));
   } @else {
     @return $str;
   }
@@ -439,8 +453,8 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 
 // Trims the end/right of the string:
 @function str-trimEnd($str) {
-  @if (str-slice($str, str-length($str), -1) == ' ') {
-    @return str-trimEnd(str-slice($str, 1, -2));
+  @if (string.slice($str, string.length($str), -1) == ' ') {
+    @return str-trimEnd(string.slice($str, 1, -2));
   } @else {
     @return $str;
   }
@@ -455,20 +469,20 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
   // empty array/list
   $split-arr: ();
   // first index of separator in string
-  $index: str-index($string, $separator);
+  $index: string.index($string, $separator);
   // loop through string
   @while $index != null {
     // get the substring from the first character to the separator
-    $item: str-slice($string, 1, $index - 1);
+    $item: string.slice($string, 1, $index - 1);
     // push item to array
-    $split-arr: append($split-arr, str-trim($item));
+    $split-arr: list.append($split-arr, str-trim($item));
     // remove item and separator from string
-    $string: str-slice($string, $index + 1);
+    $string: string.slice($string, $index + 1);
     // find new index of separator
-    $index: str-index($string, $separator);
+    $index: string.index($string, $separator);
   }
   // add the remaining string to list (the last item)
-  $split-arr: append($split-arr, str-trim($string));
+  $split-arr: list.append($split-arr, str-trim($string));
 
   @return $split-arr;
 }