@iamproperty/components 7.1.0--beta6 → 7.2.0

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

@@ -0,0 +1,1445 @@
+@use 'sass:map';
+
+@use 'functions' as *;
+@use 'variables' as *;
+
+@use 'mixins' as *;
+
+$layers: 'true' !default;
+
+$mobileOnly: 'false' !default;
+
+$new_utilities: ();
+
+$style_breakpoints: ();
+
+@each $bp, $value in $grid-breakpoints {
+  @if $bp != 'xs' {
+    $style_breakpoints: map.merge((#{$bp}: ''), $style_breakpoints);
+  } @else {
+    $style_breakpoints: map.merge((#{$bp}: -#{$bp}), $style_breakpoints);
+  }
+}
+
+// #region Clearfix
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'clearfix': 'Clear the floats from both sides',
+  )
+);
+
+@mixin clearfix() {
+  .clearfix {
+    &::after {
+      display: block;
+      clear: both;
+      content: '';
+    }
+  }
+}
+// #endregion
+
+// #region visually-hidden
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'visually-hidden': 'Hide an element from the standard user but not from screen readers',
+  )
+);
+
+@mixin visually-hidden() {
+  .visually-hidden,
+  .visually-hidden-focusable:not(:focus):not(:focus-within) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+}
+// #endregion
+
+// #region text-truncate
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'text-truncate': 'Keep the text onto one line and add an ellipsis if needed',
+  )
+);
+
+@mixin text-truncate() {
+  .text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+// #endregion
+
+// #region ratio
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'ratio': 'Use pre-defined aspect ratios to generate the sizing or elements',
+  )
+);
+
+@mixin ratio() {
+  .ratio {
+    position: relative;
+    width: 100%;
+
+    &::before {
+      display: block;
+      padding-top: var(--aspect-ratio);
+      content: '';
+    }
+
+    > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @each $key, $ratio in $aspect-ratios {
+    .ratio-#{$key} {
+      --aspect-ratio: #{$ratio};
+    }
+  }
+}
+// #endregion
+
+// #region fixed
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'fixed': 'Fix elements to either the top or bottom',
+  )
+);
+
+@mixin fixed() {
+  .fixed-top {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: $zindex-fixed;
+  }
+
+  .fixed-bottom {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $zindex-fixed;
+  }
+}
+// #endregion
+
+// #region sticky
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'sticky': 'Make elements stick to either the top or bottom',
+  )
+);
+
+@mixin sticky() {
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint, $mobileOnly) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      .sticky#{$infix}-top {
+        position: sticky;
+        top: 0;
+        z-index: $zindex-sticky;
+      }
+
+      .sticky#{$infix}-bottom {
+        position: sticky;
+        bottom: 0;
+        z-index: $zindex-sticky;
+      }
+    }
+  }
+}
+// #endregion
+
+// #region max-height
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'max-height':
+      'Set a pre-defined max height on an element, note this will create a scrollable area if the content is larger than the max height.',
+  )
+);
+
+@mixin max-height() {
+  :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
+    &:not(iam-table):not(.table__wrapper) {
+      padding-inline: var(--mh-padding-inline, 0);
+      margin-inline: calc(var(--mh-padding-inline, 0) * -1);
+    }
+
+    &::before {
+      top: calc(100% - 1.5rem);
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1.5rem;
+      position: sticky;
+      display: block;
+      background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+      z-index: 2;
+      margin-bottom: -1.5rem;
+    }
+  }
+
+  :is(.mh-sm, .mh-md, .mh-lg, .mh-fluid) {
+    overflow: auto;
+    overscroll-behavior: contain;
+
+    &::before {
+      content: '';
+    }
+  }
+
+  .mh-sm {
+    max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
+  }
+
+  .mh-md {
+    max-height: calc(#{rem(400)} - var(--mh-modifier, 0rem));
+  }
+
+  .mh-lg {
+    max-height: calc(#{rem(600)} - var(--mh-modifier, 0rem));
+  }
+
+  .mh-fluid {
+    max-height: 100%;
+  }
+
+  @include media-breakpoint-up(sm, $mobileOnly) {
+    :is(.mh-sm-sm, .mh-sm-md, .mh-sm-lg) {
+      overflow: auto;
+      overscroll-behavior: contain;
+
+      &::before {
+        content: '';
+      }
+    }
+
+    .mh-sm-sm {
+      max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
+    }
+
+    .mh-sm-md {
+      max-height: calc(#{rem(400)} - var(--mh-modifier, 0rem));
+    }
+
+    .mh-sm-lg {
+      max-height: calc(#{rem(600)} - var(--mh-modifier, 0rem));
+    }
+  }
+
+  @include media-breakpoint-up(md, $mobileOnly) {
+    :is(.mh-md-sm, .mh-md-md, .mh-md-lg) {
+      overflow: auto;
+      overscroll-behavior: contain;
+
+      &::before {
+        content: '';
+      }
+    }
+
+    .mh-md-sm {
+      max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
+    }
+
+    .mh-md-md {
+      max-height: calc(#{rem(400)} - var(--mh-modifier, 0rem));
+    }
+
+    .mh-md-lg {
+      max-height: calc(#{rem(600)} - var(--mh-modifier, 0rem));
+    }
+  }
+}
+// #endregion
+
+// #region js-display
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'js-display': 'Show and hide elements depending upon if javascript is running or not',
+  )
+);
+
+@mixin js-display() {
+  @media (scripting: enabled) {
+    .js-show {
+      display: none !important;
+    }
+  }
+
+  @media (scripting: none) {
+    .js-hide {
+      display: none !important;
+    }
+  }
+}
+// #endregion
+
+// #region Line clamp
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'line-clamp': 'Restricts a texts height to a number of lines (1-5)',
+  )
+);
+
+@mixin line-clamp() {
+  .line-clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    text-overflow: hidden;
+    overflow: hidden;
+  }
+
+  .line-clamp--2 {
+    -webkit-line-clamp: 2;
+  }
+
+  .line-clamp--3 {
+    -webkit-line-clamp: 3;
+  }
+
+  .line-clamp--4 {
+    -webkit-line-clamp: 4;
+  }
+
+  .line-clamp--5 {
+    -webkit-line-clamp: 5;
+  }
+}
+// #endregion
+
+// #region Wider colours
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'wider-colours': 'Apply the wider range of colours in our design system',
+  )
+);
+
+@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;
+    }
+  }
+}
+// #endregion
+
+// #region Align
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'align': 'Change the alignment of the text ',
+  )
+);
+
+@mixin align() {
+  .align-baseline {
+    vertical-align: baseline !important;
+  }
+
+  .align-top {
+    vertical-align: top !important;
+  }
+
+  .align-middle {
+    vertical-align: middle !important;
+  }
+
+  .align-bottom {
+    vertical-align: bottom !important;
+  }
+
+  .align-text-bottom {
+    vertical-align: text-bottom !important;
+  }
+
+  .align-text-top {
+    vertical-align: text-top !important;
+  }
+}
+// #endregion
+
+// #region Opacity
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'opacity': 'Apply the opacity of an element by intervals of 25%',
+  )
+);
+
+@mixin opacity() {
+  .opacity-0 {
+    opacity: 0 !important;
+  }
+
+  .opacity-25 {
+    opacity: 0.25 !important;
+  }
+
+  .opacity-50 {
+    opacity: 0.5 !important;
+  }
+
+  .opacity-75 {
+    opacity: 0.75 !important;
+  }
+
+  .opacity-100 {
+    opacity: 1 !important;
+  }
+}
+// #endregion
+
+// #region Overflow
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'overflow': 'Update the overflow of an element',
+  )
+);
+
+@mixin overflow() {
+  .overflow-auto {
+    overflow: auto !important;
+  }
+
+  .overflow-hidden {
+    overflow: hidden !important;
+  }
+
+  .overflow-visible {
+    overflow: visible !important;
+  }
+
+  .overflow-scroll {
+    overflow: scroll !important;
+  }
+}
+// #endregion
+
+// #region Display
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'display': 'Update the display of an element, can be applied at different breakpoints',
+  )
+);
+
+@mixin display() {
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint, $mobileOnly) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      .d#{$infix}-inline {
+        display: inline !important;
+      }
+
+      .d#{$infix}-inline-block {
+        display: inline-block !important;
+      }
+
+      .d#{$infix}-block {
+        display: block !important;
+      }
+
+      .d#{$infix}-grid {
+        display: grid !important;
+      }
+
+      .d#{$infix}-table {
+        display: table !important;
+      }
+
+      .d#{$infix}-table-row {
+        display: table-row !important;
+      }
+
+      .d#{$infix}-table-cell {
+        display: table-cell !important;
+      }
+
+      .d#{$infix}-flex {
+        display: flex !important;
+      }
+
+      .d#{$infix}-inline-flex {
+        display: inline-flex !important;
+      }
+
+      .d#{$infix}-none {
+        display: none !important;
+      }
+    }
+  }
+}
+// #endregion
+
+// #region Position
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'position': 'Update the position of an element, can be applied at different breakpoints',
+  )
+);
+
+@mixin position() {
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint, $mobileOnly) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+      .position#{$infix}-static {
+        position: static !important;
+      }
+
+      .position#{$infix}-relative {
+        position: relative !important;
+      }
+
+      .position#{$infix}-absolute {
+        position: absolute !important;
+      }
+
+      .position#{$infix}-fixed {
+        position: fixed !important;
+      }
+
+      .position#{$infix}-sticky {
+        position: sticky !important;
+      }
+
+      .top#{$infix}-0 {
+        top: 0 !important;
+      }
+
+      .top#{$infix}-50 {
+        top: 50% !important;
+      }
+
+      .top#{$infix}-100 {
+        top: 100% !important;
+      }
+
+      .bottom#{$infix}-0 {
+        bottom: 0 !important;
+      }
+
+      .bottom#{$infix}-50 {
+        bottom: 50% !important;
+      }
+
+      .bottom#{$infix}-100 {
+        bottom: 100% !important;
+      }
+
+      .start#{$infix}-0 {
+        left: 0 !important;
+      }
+
+      .start#{$infix}-50 {
+        left: 50% !important;
+      }
+
+      .start#{$infix}-100 {
+        left: 100% !important;
+      }
+
+      .end#{$infix}-0 {
+        right: 0 !important;
+      }
+
+      .end#{$infix}-50 {
+        right: 50% !important;
+      }
+
+      .end#{$infix}-100 {
+        right: 100% !important;
+      }
+
+      .translate#{$infix}-middle {
+        transform: translate(-50%, -50%) !important;
+      }
+
+      .translate#{$infix}-middle-x {
+        transform: translateX(-50%) !important;
+      }
+
+      .translate#{$infix}-middle-y {
+        transform: translateY(-50%) !important;
+      }
+    }
+  }
+}
+// #endregion
+
+// #region Border
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'border': 'Apply a border and adjust its settings',
+  )
+);
+
+@mixin border() {
+  .border {
+    border: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .border-0 {
+    border: 0 !important;
+  }
+
+  .border-top {
+    border-top: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .border-top-0 {
+    border-top: 0 !important;
+  }
+
+  .border-end {
+    border-right: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .border-end-0 {
+    border-right: 0 !important;
+  }
+
+  .border-bottom {
+    border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .border-bottom-0 {
+    border-bottom: 0 !important;
+  }
+
+  .border-start {
+    border-left: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .border-start-0 {
+    border-left: 0 !important;
+  }
+
+  .border-1 {
+    --border-width: 1px;
+  }
+
+  .border-2 {
+    --border-width: 2px;
+  }
+
+  .border-3 {
+    --border-width: 3px;
+  }
+
+  .border-4 {
+    --border-width: 4px;
+  }
+
+  .border-5 {
+    --border-width: 5px;
+  }
+
+  .border-opacity-10 {
+    --border-opacity: 0.1;
+  }
+
+  .border-opacity-25 {
+    --border-opacity: 0.25;
+  }
+
+  .border-opacity-50 {
+    --border-opacity: 0.5;
+  }
+
+  .border-opacity-75 {
+    --border-opacity: 0.75;
+  }
+
+  .border-opacity-100 {
+    --border-opacity: 1;
+  }
+}
+// #endregion
+
+// #region Sizes
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'sizes': 'Apply sizing rules to an element',
+  )
+);
+
+@mixin sizes() {
+  .w-25 {
+    width: 25% !important;
+  }
+
+  .w-50 {
+    width: 50% !important;
+  }
+
+  .w-75 {
+    width: 75% !important;
+  }
+
+  .w-100 {
+    width: 100% !important;
+  }
+
+  .w-auto {
+    width: auto !important;
+  }
+
+  .mw-100 {
+    max-width: 100% !important;
+  }
+
+  .mw-fit-content {
+    max-width: fit-content !important;
+  }
+
+  .mw-content {
+    max-width: var(--content-max-width) !important;
+  }
+
+  .vw-100 {
+    width: 100vw !important;
+  }
+
+  .min-vw-100 {
+    min-width: 100vw !important;
+  }
+
+  .h-25 {
+    height: 25% !important;
+  }
+
+  .h-50 {
+    height: 50% !important;
+  }
+
+  .h-75 {
+    height: 75% !important;
+  }
+
+  .h-100 {
+    height: 100% !important;
+  }
+
+  .h-auto {
+    height: auto !important;
+  }
+
+  .mh-100 {
+    max-height: 100% !important;
+  }
+
+  .vh-100 {
+    height: 100vh !important;
+  }
+
+  .min-vh-100 {
+    min-height: 100vh !important;
+  }
+
+  .min-100 {
+    min-width: 100% !important;
+  }
+
+  .min-fit-content {
+    min-width: fit-content !important;
+  }
+
+  .object-cover {
+    object-fit: cover !important;
+  }
+
+  .object-contain {
+    object-fit: contain !important;
+  }
+}
+// #endregion
+
+// #region Flex
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'flex': 'Update the flex rules of an element, can be applied at different breakpoints',
+  )
+);
+
+@mixin flex() {
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint, $mobileOnly) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      .flex#{$infix}-fill {
+        flex: 1 1 auto !important;
+      }
+
+      .flex#{$infix}-row {
+        flex-direction: row !important;
+      }
+
+      .flex#{$infix}-column {
+        flex-direction: column !important;
+      }
+
+      .flex#{$infix}-row-reverse {
+        flex-direction: row-reverse !important;
+      }
+
+      .flex#{$infix}-column-reverse {
+        flex-direction: column-reverse !important;
+      }
+
+      .flex#{$infix}-grow-0 {
+        flex-grow: 0 !important;
+      }
+
+      .flex#{$infix}-grow-1 {
+        flex-grow: 1 !important;
+      }
+
+      .flex#{$infix}-shrink-0 {
+        flex-shrink: 0 !important;
+      }
+
+      .flex#{$infix}-shrink-1 {
+        flex-shrink: 1 !important;
+      }
+
+      .flex#{$infix}-wrap {
+        flex-wrap: wrap !important;
+      }
+
+      .flex#{$infix}-nowrap {
+        flex-wrap: nowrap !important;
+      }
+
+      .flex#{$infix}-wrap-reverse {
+        flex-wrap: wrap-reverse !important;
+      }
+
+      .justify-content#{$infix}-start {
+        justify-content: flex-start !important;
+      }
+
+      .justify-content#{$infix}-end {
+        justify-content: flex-end !important;
+      }
+
+      .justify-content#{$infix}-center {
+        justify-content: center !important;
+      }
+
+      .justify-content#{$infix}-between {
+        justify-content: space-between !important;
+      }
+
+      .justify-content#{$infix}-around {
+        justify-content: space-around !important;
+      }
+
+      .justify-content#{$infix}-evenly {
+        justify-content: space-evenly !important;
+      }
+
+      .align-items#{$infix}-start {
+        align-items: flex-start !important;
+      }
+
+      .align-items#{$infix}-end {
+        align-items: flex-end !important;
+      }
+
+      .align-items#{$infix}-center {
+        align-items: center !important;
+      }
+
+      .align-items#{$infix}-baseline {
+        align-items: baseline !important;
+      }
+
+      .align-items#{$infix}-stretch {
+        align-items: stretch !important;
+      }
+
+      .align-content#{$infix}-start {
+        align-content: flex-start !important;
+      }
+
+      .align-content#{$infix}-end {
+        align-content: flex-end !important;
+      }
+
+      .align-content#{$infix}-center {
+        align-content: center !important;
+      }
+
+      .align-content#{$infix}-between {
+        align-content: space-between !important;
+      }
+
+      .align-content#{$infix}-around {
+        align-content: space-around !important;
+      }
+
+      .align-content#{$infix}-stretch {
+        align-content: stretch !important;
+      }
+
+      .align-self#{$infix}-auto {
+        align-self: auto !important;
+      }
+
+      .align-self#{$infix}-start {
+        align-self: flex-start !important;
+      }
+
+      .align-self#{$infix}-end {
+        align-self: flex-end !important;
+      }
+
+      .align-self#{$infix}-center {
+        align-self: center !important;
+      }
+
+      .align-self#{$infix}-baseline {
+        align-self: baseline !important;
+      }
+
+      .align-self#{$infix}-stretch {
+        align-self: stretch !important;
+      }
+    }
+  }
+}
+// #endregion
+
+// #region Order
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'order': 'Update the order of an element, can be applied at different breakpoints',
+  )
+);
+
+@mixin order() {
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint, $mobileOnly) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      .order#{$infix}-first {
+        order: -1 !important;
+      }
+
+      .order#{$infix}-0 {
+        order: 0 !important;
+      }
+
+      .order#{$infix}-1 {
+        order: 1 !important;
+      }
+
+      .order#{$infix}-2 {
+        order: 2 !important;
+      }
+
+      .order#{$infix}-3 {
+        order: 3 !important;
+      }
+
+      .order#{$infix}-4 {
+        order: 4 !important;
+      }
+
+      .order#{$infix}-5 {
+        order: 5 !important;
+      }
+
+      .order#{$infix}-last {
+        order: 6 !important;
+      }
+    }
+  }
+}
+// #endregion
+
+// #region Margins
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'margins': 'Adjust the margins of an element',
+  )
+);
+
+@mixin margins() {
+  @each $key, $value in $spacers {
+    .m-#{$key} {
+      margin: #{$value} !important;
+    }
+
+    .mx-#{$key} {
+      margin-left: #{$value} !important;
+      margin-right: #{$value} !important;
+    }
+
+    .my-#{$key} {
+      margin-top: #{$value} !important;
+      margin-bottom: #{$value} !important;
+    }
+
+    .mt-#{$key} {
+      margin-top: #{$value} !important;
+    }
+
+    .me-#{$key} {
+      margin-right: #{$value} !important;
+    }
+
+    .mb-#{$key} {
+      margin-bottom: #{$value} !important;
+    }
+
+    .ms-#{$key} {
+      margin-left: #{$value} !important;
+    }
+  }
+
+  .m-auto {
+    margin: auto !important;
+  }
+
+  .mx-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-auto {
+    margin-top: auto !important;
+  }
+
+  .me-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-auto {
+    margin-left: auto !important;
+  }
+}
+// #endregion
+
+// #region Paddings
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'paddings': 'Adjust the paddings of an element',
+  )
+);
+
+@mixin paddings() {
+  @each $key, $value in $spacers {
+    .p-#{$key} {
+      padding: #{$value} !important;
+    }
+
+    .px-#{$key} {
+      padding-left: #{$value} !important;
+      padding-right: #{$value} !important;
+    }
+
+    .py-#{$key} {
+      padding-top: #{$value} !important;
+      padding-bottom: #{$value} !important;
+    }
+
+    .pt-#{$key} {
+      padding-top: #{$value} !important;
+    }
+
+    .pe-#{$key} {
+      padding-right: #{$value} !important;
+    }
+
+    .pb-#{$key} {
+      padding-bottom: #{$value} !important;
+    }
+
+    .ps-#{$key} {
+      padding-left: #{$value} !important;
+    }
+  }
+}
+// #endregion
+
+// #region Gap
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'gap': 'Update the gap sizing of an element with the display flex',
+  )
+);
+
+@mixin gap() {
+  @each $key, $value in $spacers {
+    .gap-#{$key} {
+      gap: #{$value} !important;
+    }
+  }
+}
+// #endregion
+
+// #region Text
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'text': 'Apply the text settings',
+  )
+);
+
+@mixin text() {
+  .font-monospace {
+    font-family: var(--font-monospace) !important;
+  }
+
+  .font-body {
+    font-family: var(--font-body) !important;
+  }
+
+  .fs-1 {
+    font-size: rfs-fluid-value(2.5rem) !important;
+  }
+
+  .fs-2 {
+    font-size: rfs-fluid-value(2rem) !important;
+  }
+
+  .fs-3 {
+    font-size: rfs-fluid-value(1.75rem) !important;
+  }
+
+  .fs-4 {
+    font-size: rfs-fluid-value(1.5rem) !important;
+  }
+
+  .fs-5 {
+    font-size: rfs-fluid-value(1.25rem) !important;
+  }
+
+  .fs-6 {
+    font-size: rfs-fluid-value(1rem) !important;
+  }
+
+  .fst-italic {
+    font-style: italic !important;
+  }
+
+  .fst-normal {
+    font-style: normal !important;
+  }
+
+  .fw-light {
+    font-weight: 300 !important;
+  }
+
+  .fw-lighter {
+    font-weight: lighter !important;
+  }
+
+  .fw-normal {
+    font-weight: 400 !important;
+  }
+
+  .fw-bold {
+    font-weight: 700 !important;
+  }
+
+  .fw-semibold {
+    font-weight: 600 !important;
+  }
+
+  .fw-bolder {
+    font-weight: bolder !important;
+  }
+
+  .lh-0 {
+    line-height: 0 !important;
+  }
+
+  .lh-1 {
+    line-height: 1 !important;
+  }
+
+  .text-start {
+    text-align: left !important;
+  }
+
+  .text-end {
+    text-align: right !important;
+  }
+
+  .text-center {
+    text-align: center !important;
+  }
+
+  .text-decoration-none {
+    text-decoration: none !important;
+  }
+
+  .text-decoration-underline {
+    text-decoration: underline !important;
+  }
+
+  .text-decoration-line-through {
+    text-decoration: line-through !important;
+  }
+
+  .text-lowercase {
+    text-transform: lowercase !important;
+  }
+
+  .text-uppercase {
+    text-transform: uppercase !important;
+  }
+
+  .text-capitalize {
+    text-transform: capitalize !important;
+  }
+
+  .text-wrap {
+    white-space: normal !important;
+  }
+
+  .text-nowrap {
+    white-space: nowrap !important;
+  }
+
+  .text-break {
+    word-wrap: break-word !important;
+    word-break: break-word !important;
+  }
+}
+// #endregion
+
+// #region Colours
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'colours': 'Applu our design system colours by either text colour or background',
+  )
+);
+
+@mixin colours() {
+  @each $color, $value in $theme-colors {
+    .text-#{$color} {
+      --text-opacity: 1;
+      color: var(--colour-#{$color}) !important;
+    }
+
+    .bg-#{$color} {
+      --bg-opacity: 1;
+      --bg-colour: var(--colour-#{$color}) !important;
+      background-color: var(--colour-#{$color}) !important;
+    }
+
+    .colour-#{$color} {
+      --colour: var(--colour-#{$color}) !important;
+    }
+  }
+}
+// #endregion
+
+// #region gradients
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'gradients': 'Add gradients to backgrounds',
+  )
+);
+
+@mixin gradients() {
+  .bg-gradient {
+    background-image: var(--gradient) !important;
+  }
+
+  .gradient-success {
+    --gradient-direction: 180deg;
+    background-image: linear-gradient(
+      var(--gradient-direction),
+      var(--colour-success-theme) 0,
+      transparent 100%
+    ) !important;
+  }
+
+  .gradient-primary {
+    --gradient-direction: 180deg;
+    background-image: linear-gradient(
+      var(--gradient-direction),
+      var(--colour-primary-theme) 0,
+      transparent 100%
+    ) !important;
+  }
+
+  .gradient-info {
+    --gradient-direction: 180deg;
+    background-image: linear-gradient(
+      var(--gradient-direction),
+      var(--colour-info-theme) 0,
+      transparent 100%
+    ) !important;
+  }
+
+  .gradient-direction-left {
+    --gradient-direction: 90deg;
+  }
+
+  .gradient-direction-angle {
+    --gradient-direction: 135deg;
+  }
+}
+// #endregion
+
+// #region Pointer-events
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'pointer-events': 'Disable or enable point events',
+  )
+);
+
+@mixin pointer-events() {
+  .pe-none {
+    pointer-events: none !important;
+  }
+
+  .pe-auto {
+    pointer-events: auto !important;
+  }
+}
+// #endregion
+
+// #region Rounded
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'rounded': 'Add rounded corners',
+  )
+);
+
+@mixin rounded() {
+  .rounded {
+    border-radius: var(--border-radius) !important;
+  }
+
+  .rounded-0 {
+    border-radius: 0 !important;
+  }
+
+  .rounded-1 {
+    border-radius: var(--border-radius-sm) !important;
+  }
+
+  .rounded-2 {
+    border-radius: var(--border-radius) !important;
+  }
+
+  .rounded-3 {
+    border-radius: var(--border-radius-lg) !important;
+  }
+
+  .rounded-4 {
+    border-radius: var(--border-radius-xl) !important;
+  }
+
+  .rounded-5 {
+    border-radius: var(--border-radius-2xl) !important;
+  }
+
+  .rounded-circle {
+    border-radius: 50% !important;
+  }
+
+  .rounded-pill {
+    border-radius: var(--border-radius-pill) !important;
+  }
+
+  .rounded-top {
+    border-top-left-radius: var(--border-radius) !important;
+    border-top-right-radius: var(--border-radius) !important;
+  }
+
+  .rounded-end {
+    border-top-right-radius: var(--border-radius) !important;
+    border-bottom-right-radius: var(--border-radius) !important;
+  }
+
+  .rounded-bottom {
+    border-bottom-right-radius: var(--border-radius) !important;
+    border-bottom-left-radius: var(--border-radius) !important;
+  }
+
+  .rounded-start {
+    border-bottom-left-radius: var(--border-radius) !important;
+    border-top-left-radius: var(--border-radius) !important;
+  }
+}
+// #endregion
+
+// #region Visible
+$new_utilities: map.merge(
+  $new_utilities,
+  (
+    'visible': 'Change the visibility of elements',
+  )
+);
+
+@mixin visible() {
+  .visible {
+    visibility: visible !important;
+  }
+
+  .invisible {
+    visibility: hidden !important;
+  }
+}
+// #endregion