Helpers & utilities split (#28445)

28 files changed, 621 insertions, 396 deletions

diff --git a/scss/_functions.scss b/scss/_functions.scss
index e867b55211..096b15205f 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -30,6 +30,30 @@
   }
 }
 
+// Internal Bootstrap function to turn maps into its negative variant.
+// If prefixes the keys with `n` and makes the value negative.
+@function negativify-map($map) {
+  $result: ();
+  @each $key, $value in $map {
+    @if $key != 0 {
+      $result: map-merge($result, ("n" + $key: (-$value)));
+    }
+  }
+  @return $result;
+}
+
+// Get multiple keys from a sass map
+@function map-get-multiple($map, $values) {
+  $result: ();
+  @each $key, $value in $map {
+    @if (index($values, $key) != null) {
+      $result: map-merge($result, ($key: $value));
+    }
+  }
+  @return $map;
+}
+
+
 // Replace `$search` with `$replace` in `$string`
 // Used on our SVG icon backgrounds for custom forms.
 //
diff --git a/scss/_helpers.scss b/scss/_helpers.scss
new file mode 100644
index 0000000000..ca57c9babb
--- /dev/null
+++ b/scss/_helpers.scss
@@ -0,0 +1,7 @@
+@import "helpers/background";
+@import "helpers/clearfix";
+@import "helpers/embed";
+@import "helpers/position";
+@import "helpers/screenreaders";
+@import "helpers/stretched-link";
+@import "helpers/text";
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index a8be120638..ffee78ac2e 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -8,7 +8,7 @@
 // Deprecate
 @import "mixins/deprecate";
 
-// Utilities
+// Helpers
 @import "mixins/breakpoints";
 @import "mixins/image";
 @import "mixins/resize";
@@ -17,6 +17,9 @@
 @import "mixins/text-emphasis";
 @import "mixins/text-truncate";
 
+// Utilities
+@import "mixins/utilities";
+
 // Components
 @import "mixins/alert";
 @import "mixins/buttons";
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index a5de31ba6a..fec2051009 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1,17 +1,443 @@
-@import "utilities/align";
-@import "utilities/background";
-@import "utilities/borders";
-@import "utilities/clearfix";
-@import "utilities/display";
-@import "utilities/embed";
-@import "utilities/flex";
-@import "utilities/float";
-@import "utilities/overflow";
-@import "utilities/position";
-@import "utilities/screenreaders";
-@import "utilities/shadows";
-@import "utilities/sizing";
-@import "utilities/stretched-link";
-@import "utilities/spacing";
-@import "utilities/text";
-@import "utilities/visibility";
+// Utilities
+
+$utilities: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$utilities: map-merge(
+  (
+    "align": (
+      property: vertical-align,
+      class: align,
+      values: baseline top middle bottom text-bottom text-top
+    ),
+    "float": (
+      responsive: true,
+      property: float,
+      values: left right none
+    ),
+    "overflow": (
+      property: overflow,
+      values: auto hidden,
+    ),
+    "display": (
+      responsive: true,
+      print: true,
+      property: display,
+      class: d,
+      values: none inline inline-block block table table-row table-cell flex inline-flex
+    ),
+    "shadow": (
+      property: box-shadow,
+      class: shadow,
+      values: (
+        sm: $box-shadow-sm,
+        null: $box-shadow,
+        lg: $box-shadow-lg,
+        none: none,
+      )
+    ),
+    "position": (
+      property: position,
+      values: static relative absolute fixed sticky
+    ),
+    "border": (
+      property: border,
+      values: (
+        null: $border-width solid $border-color,
+        0: 0,
+      )
+    ),
+    "border-top": (
+      property: border-top,
+      values: (
+        null: $border-width solid $border-color,
+        0: 0,
+      )
+    ),
+    "border-right": (
+      property: border-right,
+      values: (
+        null: $border-width solid $border-color,
+        0: 0,
+      )
+    ),
+    "border-bottom": (
+      property: border-bottom,
+      values: (
+        null: $border-width solid $border-color,
+        0: 0,
+      )
+    ),
+    "border-left": (
+      property: border-left,
+      values: (
+        null: $border-width solid $border-color,
+        0: 0,
+      )
+    ),
+    "border-color": (
+      property: border-color,
+      class: border,
+      values: map-merge($theme-colors, (white: $white))
+    ),
+    // Sizing utilities
+    "width": (
+      property: width,
+      class: w,
+      values: (
+        25: 25%,
+        50: 50%,
+        75: 75%,
+        100: 100%,
+        auto: auto
+      )
+    ),
+    "height": (
+      property: height,
+      class: h,
+      values: (
+        25: 25%,
+        50: 50%,
+        75: 75%,
+        100: 100%,
+        auto: auto
+      )
+    ),
+    // Flex utilities
+    "flex": (
+      responsive: true,
+      property: flex,
+      values: (fill: 1 1 auto)
+    ),
+    "flex-direction": (
+      responsive: true,
+      property: flex-direction,
+      class: flex,
+      values: row column row-reverse column-reverse
+    ),
+    "flex-grow": (
+      responsive: true,
+      property: flex-grow,
+      class: flex,
+      values: (
+        grow-0: 0,
+        grow-1: 1,
+      )
+    ),
+    "flex-shrink": (
+      responsive: true,
+      property: flex-shrink,
+      class: flex,
+      values: (
+        shrink-0: 0,
+        shrink-1: 1,
+      )
+    ),
+    "flex-wrap": (
+      responsive: true,
+      property: flex-wrap,
+      class: flex,
+      values: wrap nowrap wrap-reverse
+    ),
+    "justify-content": (
+      responsive: true,
+      property: justify-content,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        between: space-between,
+        around: space-around,
+      )
+    ),
+    "align-items": (
+      responsive: true,
+      property: align-items,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        baseline: baseline,
+        stretch: stretch,
+      )
+    ),
+    "align-content": (
+      responsive: true,
+      property: align-content,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        between: space-between,
+        around: space-around,
+        stretch: stretch,
+      )
+    ),
+    "align-self": (
+      responsive: true,
+      property: align-self,
+      values: (
+        auto: auto,
+        start: flex-start,
+        end: flex-end,
+        center: center,
+        baseline: baseline,
+        stretch: stretch,
+      )
+    ),
+    "order": (
+      responsive: true,
+      property: order,
+      values: (
+        first: -1,
+        0: 0,
+        1: 1,
+        2: 2,
+        3: 3,
+        4: 4,
+        5: 5,
+        6: 6,
+        7: 7,
+        8: 8,
+        9: 9,
+        10: 10,
+        11: 11,
+        12: 12,
+        last: 13,
+      ),
+    ),
+    // Margin utilities
+    "margin": (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-x": (
+      responsive: true,
+      property: margin-right margin-left,
+      class: mx,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-y": (
+      responsive: true,
+      property: margin-top margin-bottom,
+      class: my,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-top": (
+      responsive: true,
+      property: margin-top,
+      class: mt,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-right": (
+      responsive: true,
+      property: margin-right,
+      class: mr,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-bottom": (
+      responsive: true,
+      property: margin-bottom,
+      class: mb,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    "margin-left": (
+      responsive: true,
+      property: margin-left,
+      class: ml,
+      values: map-merge($spacers, (auto: auto))
+    ),
+    // Negative margin utilities
+    "negative-margin": (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: $negative-spacers
+    ),
+    "negative-margin-x": (
+      responsive: true,
+      property: margin-right margin-left,
+      class: mx,
+      values: $negative-spacers
+    ),
+    "negative-margin-y": (
+      responsive: true,
+      property: margin-top margin-bottom,
+      class: my,
+      values: $negative-spacers
+    ),
+    "negative-margin-top": (
+      responsive: true,
+      property: margin-top,
+      class: mt,
+      values: $negative-spacers
+    ),
+    "negative-margin-right": (
+      responsive: true,
+      property: margin-right,
+      class: mr,
+      values: $negative-spacers
+    ),
+    "negative-margin-bottom": (
+      responsive: true,
+      property: margin-bottom,
+      class: mb,
+      values: $negative-spacers
+    ),
+    "negative-margin-left": (
+      responsive: true,
+      property: margin-left,
+      class: ml,
+      values: $negative-spacers
+    ),
+    // Padding utilities
+    "padding": (
+      responsive: true,
+      property: padding,
+      class: p,
+      values: $spacers
+    ),
+    "padding-x": (
+      responsive: true,
+      property: padding-right padding-left,
+      class: px,
+      values: $spacers
+    ),
+    "padding-y": (
+      responsive: true,
+      property: padding-top padding-bottom,
+      class: py,
+      values: $spacers
+    ),
+    "padding-top": (
+      responsive: true,
+      property: padding-top,
+      class: pt,
+      values: $spacers
+    ),
+    "padding-right": (
+      responsive: true,
+      property: padding-right,
+      class: pr,
+      values: $spacers
+    ),
+    "padding-bottom": (
+      responsive: true,
+      property: padding-bottom,
+      class: pb,
+      values: $spacers
+    ),
+    "padding-left": (
+      responsive: true,
+      property: padding-left,
+      class: pl,
+      values: $spacers
+    ),
+    // Text
+    "font-weight": (
+      property: font-weight,
+      values: (
+        light: $font-weight-light,
+        lighter: $font-weight-lighter,
+        normal: $font-weight-normal,
+        bold: $font-weight-bold,
+        bolder: $font-weight-bolder
+      )
+    ),
+    "text-transform": (
+      property: text-transform,
+      class: text,
+      values: lowercase uppercase capitalize
+    ),
+    "text-align": (
+      responsive: true,
+      property: text-align,
+      class: text,
+      values: left right center justify
+    ),
+    "color": (
+      property: color,
+      class: text,
+      values: (
+        white: $white,
+        body: $body-color,
+        muted: $text-muted,
+        black-50: rgba($black, .5),
+        white-50: rgba($white, .5),
+        reset: inherit,
+      )
+    ),
+    "background-color": (
+      property: background-color,
+      class: bg,
+      values: map-merge(
+        $theme-colors,
+        (
+          white: $white,
+          transparent: transparent
+        )
+      )
+    ),
+    "white-space": (
+      property: white-space,
+      class: text,
+      values: (
+        wrap: normal,
+        nowrap: nowrap,
+      )
+    ),
+    "text-decoration": (
+      property: text-decoration,
+      values: none
+    ),
+    "font-style": (
+      property: font-style,
+      class: font,
+      values: italic
+    ),
+    "overflow-wrap": (
+      property: overflow-wrap word-break, // word-break for IE & < Edge 18
+      class: text,
+      values: (break: break-word)
+    ),
+    "font-family": (
+      property: font-family,
+      class: text,
+      values: (monospace: $font-family-monospace)
+    ),
+    "rounded": (
+      property: border-radius,
+      class: rounded,
+      values: (
+        null: $border-radius,
+        sm: $border-radius-sm,
+        lg: $border-radius-lg,
+        circle: 50%,
+        pill: $rounded-pill,
+        0: 0,
+      )
+    ),
+    "rounded-top": (
+      property: border-top-left-radius border-top-right-radius,
+      class: rounded-top,
+      values: (null: $border-radius)
+    ),
+    "rounded-right": (
+      property: border-top-right-radius border-bottom-right-radius,
+      class: rounded-right,
+      values: (null: $border-radius)
+    ),
+    "rounded-bottom": (
+      property: border-bottom-right-radius border-bottom-left-radius,
+      class: rounded-bottom,
+      values: (null: $border-radius)
+    ),
+    "rounded-left": (
+      property: border-bottom-left-radius border-top-left-radius,
+      class: rounded-left,
+      values: (null: $border-radius)
+    ),
+  ),
+  $utilities
+);
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 45b1f1dcab..b3268c1e9e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -131,29 +131,16 @@ $spacers: () !default;
 $spacers: map-merge(
   (
     0: 0,
-    1: ($spacer * .25),
-    2: ($spacer * .5),
+    1: $spacer * .25,
+    2: $spacer * .5,
     3: $spacer,
-    4: ($spacer * 1.5),
-    5: ($spacer * 3)
+    4: $spacer * 1.5,
+    5: $spacer * 3,
   ),
   $spacers
 );
 
-// This variable affects the `.h-*` and `.w-*` classes.
-$sizes: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$sizes: map-merge(
-  (
-    25: 25%,
-    50: 50%,
-    75: 75%,
-    100: 100%,
-    auto: auto
-  ),
-  $sizes
-);
-
+$negative-spacers: negativify-map($spacers) !default;
 
 // Body
 //
@@ -1118,10 +1105,3 @@ $kbd-bg:                            $gray-900 !default;
 
 $pre-color:                         $gray-900 !default;
 $pre-scrollable-max-height:         340px !default;
-
-
-// Utilities
-
-$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
-$overflows: auto, hidden !default;
-$positions: static, relative, absolute, fixed, sticky !default;
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 7772e9f68e..619aa1e83e 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -21,8 +21,49 @@ html {
 @import "mixins/breakpoints";
 @import "mixins/grid-framework";
 @import "mixins/grid";
+@import "mixins/utilities";
 
 @import "grid";
-@import "utilities/display";
-@import "utilities/flex";
-@import "utilities/spacing";
+
+@import "utilities";
+// Only use the utilities we need
+// stylelint-disable-next-line scss/dollar-variable-default
+$utilities: map-get-multiple(
+  $utilities,
+  (
+    "display",
+    "order",
+    "flex",
+    "flex-direction",
+    "flex-grow",
+    "flex-shrink"
+    "flex-wrap",
+    "justify-content",
+    "align-items",
+    "align-content",
+    "align-self",
+    "margin",
+    "margin-x",
+    "margin-y",
+    "margin-top",
+    "margin-right",
+    "margin-bottom",
+    "margin-left",
+    "negative-margin",
+    "negative-margin-x",
+    "negative-margin-y",
+    "negative-margin-top",
+    "negative-margin-right",
+    "negative-margin-bottom",
+    "negative-margin-left",
+    "padding",
+    "padding-x",
+    "padding-y",
+    "padding-top",
+    "padding-right",
+    "padding-bottom",
+    "padding-left",
+  )
+);
+
+@import "utilities/api";
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 5ba0ac151b..5f100326b7 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -5,9 +5,16 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
+// Configuration
+
 @import "functions";
 @import "variables";
 @import "mixins";
+@import "utilities";
+
+
+// Layout & components
+
 @import "root";
 @import "reboot";
 @import "type";
@@ -39,4 +46,16 @@
 @import "popover";
 @import "carousel";
 @import "spinners";
-@import "utilities";
+
+
+// Helpers
+
+@import "helpers";
+
+
+// Utilities
+
+@import "utilities/api";
+@import "utilities/sizing";
+@import "utilities/text";
+@import "utilities/visibility";
diff --git a/scss/helpers/_background.scss b/scss/helpers/_background.scss
new file mode 100644
index 0000000000..1c0a32a239
--- /dev/null
+++ b/scss/helpers/_background.scss
@@ -0,0 +1,5 @@
+@if $enable-gradients {
+  @each $color, $value in $theme-colors {
+    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+  }
+}
diff --git a/scss/utilities/_clearfix.scss b/scss/helpers/_clearfix.scss
index e92522a94d..e92522a94d 100644
--- a/scss/utilities/_clearfix.scss
+++ b/scss/helpers/_clearfix.scss
diff --git a/scss/utilities/_embed.scss b/scss/helpers/_embed.scss
index 89d22aa6c4..89d22aa6c4 100644
--- a/scss/utilities/_embed.scss
+++ b/scss/helpers/_embed.scss
diff --git a/scss/utilities/_position.scss b/scss/helpers/_position.scss
index cdf6c115f3..e0c4c2c110 100644
--- a/scss/utilities/_position.scss
+++ b/scss/helpers/_position.scss
@@ -1,10 +1,5 @@
 // stylelint-disable declaration-no-important
 
-// Common values
-@each $position in $positions {
-  .position-#{$position} { position: $position !important; }
-}
-
 // Shorthand
 
 .fixed-top {
diff --git a/scss/utilities/_screenreaders.scss b/scss/helpers/_screenreaders.scss
index c8034d10ee..c8034d10ee 100644
--- a/scss/utilities/_screenreaders.scss
+++ b/scss/helpers/_screenreaders.scss
diff --git a/scss/utilities/_stretched-link.scss b/scss/helpers/_stretched-link.scss
index fb5066bf55..fb5066bf55 100644
--- a/scss/utilities/_stretched-link.scss
+++ b/scss/helpers/_stretched-link.scss
diff --git a/scss/helpers/_text.scss b/scss/helpers/_text.scss
new file mode 100644
index 0000000000..419703f1ce
--- /dev/null
+++ b/scss/helpers/_text.scss
@@ -0,0 +1,7 @@
+//
+// Text
+//
+
+.text-truncate {
+  @include text-truncate;
+}
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 649c28bf77..9aeafc06ea 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -45,14 +45,6 @@
         }
       }
 
-      .order#{$infix}-first { order: -1; }
-
-      .order#{$infix}-last { order: $columns + 1; }
-
-      @for $i from 0 through $columns {
-        .order#{$infix}-#{$i} { order: $i; }
-      }
-
       // `$columns - 1` because offsetting by the width of an entire row isn't possible
       @for $i from 0 through ($columns - 1) {
         @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
new file mode 100644
index 0000000000..fb0b2cf406
--- /dev/null
+++ b/scss/mixins/_utilities.scss
@@ -0,0 +1,33 @@
+// Utility generator
+// Used to generate utilities & print utilities
+@mixin generate-utility($utility, $infix) {
+  $values: map-get($utility, values);
+
+  // If the values are a list or string, convert it into a map
+  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+    $values: zip($values, $values);
+  }
+
+  @each $value in $values {
+    $properties: map-get($utility, property);
+
+    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+    @if type-of($properties) == "string" {
+      $properties: append((), $properties);
+    }
+
+    // Use custom class if present
+    $property-class: map-get($utility, class);
+    $property-class: if($property-class, $property-class, nth($properties, 1));
+
+    // Don't prefix if value key is null (eg. with shadow class)
+    $property-class-modifier: if(nth($value, 1), "-" + nth($value, 1), "");
+
+    .#{$property-class + $infix + $property-class-modifier} {
+      @each $property in $properties {
+        // stylelint-disable-next-line declaration-no-important
+        #{$property}: #{nth($value, 2)} !important;
+      }
+    }
+  }
+}
diff --git a/scss/utilities/_align.scss b/scss/utilities/_align.scss
deleted file mode 100644
index 8b7df9f76c..0000000000
--- a/scss/utilities/_align.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// stylelint-disable declaration-no-important
-
-.align-baseline    { vertical-align: baseline !important; } // Browser default
-.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; }
diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss
new file mode 100644
index 0000000000..5b9b6651cb
--- /dev/null
+++ b/scss/utilities/_api.scss
@@ -0,0 +1,29 @@
+// Loop over each breakpoint
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+  // Generate media query if needed
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    // Loop over each utility property
+    @each $key, $utility in $utilities {
+      // The utility can be disabled with `false`, thus check if the utility is a map first
+      // Only proceed if responsive media queries are enabled or if it's the base media query
+      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+        @include generate-utility($utility, $infix);
+      }
+    }
+  }
+}
+
+
+// Print utilities
+@media print {
+  @each $key, $utility in $utilities {
+    // The utility can be disabled with `false`, thus check if the utility is a map first
+    // Then check if the utility needs print styles
+    @if type-of($utility) == "map" and map-get($utility, print) == true {
+      @include generate-utility($utility, "-print");
+    }
+  }
+}
diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss
deleted file mode 100644
index f9fbb48b9d..0000000000
--- a/scss/utilities/_background.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// stylelint-disable declaration-no-important
-
-@each $color, $value in $theme-colors {
-  .bg-#{$color} {
-    background-color: $value !important;
-  }
-}
-
-@if $enable-gradients {
-  @each $color, $value in $theme-colors {
-    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
-  }
-}
-
-.bg-white {
-  background-color: $white !important;
-}
-
-.bg-transparent {
-  background-color: transparent !important;
-}
diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss
deleted file mode 100644
index 302f6bf849..0000000000
--- a/scss/utilities/_borders.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-// stylelint-disable property-blacklist, declaration-no-important
-
-//
-// Border
-//
-
-.border         { border: $border-width solid $border-color !important; }
-.border-top     { border-top: $border-width solid $border-color !important; }
-.border-right   { border-right: $border-width solid $border-color !important; }
-.border-bottom  { border-bottom: $border-width solid $border-color !important; }
-.border-left    { border-left: $border-width solid $border-color !important; }
-
-.border-0        { border: 0 !important; }
-.border-top-0    { border-top: 0 !important; }
-.border-right-0  { border-right: 0 !important; }
-.border-bottom-0 { border-bottom: 0 !important; }
-.border-left-0   { border-left: 0 !important; }
-
-@each $color, $value in $theme-colors {
-  .border-#{$color} {
-    border-color: $value !important;
-  }
-}
-
-.border-white {
-  border-color: $white !important;
-}
-
-//
-// Border-radius
-//
-
-.rounded-sm {
-  border-radius: $border-radius-sm !important;
-}
-
-.rounded {
-  border-radius: $border-radius !important;
-}
-
-.rounded-top {
-  border-top-left-radius: $border-radius !important;
-  border-top-right-radius: $border-radius !important;
-}
-
-.rounded-right {
-  border-top-right-radius: $border-radius !important;
-  border-bottom-right-radius: $border-radius !important;
-}
-
-.rounded-bottom {
-  border-bottom-right-radius: $border-radius !important;
-  border-bottom-left-radius: $border-radius !important;
-}
-
-.rounded-left {
-  border-top-left-radius: $border-radius !important;
-  border-bottom-left-radius: $border-radius !important;
-}
-
-.rounded-lg {
-  border-radius: $border-radius-lg !important;
-}
-
-.rounded-circle {
-  border-radius: 50% !important;
-}
-
-.rounded-pill {
-  border-radius: $rounded-pill !important;
-}
-
-.rounded-0 {
-  border-radius: 0 !important;
-}
diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
deleted file mode 100644
index 217672998b..0000000000
--- a/scss/utilities/_display.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// stylelint-disable declaration-no-important
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    @each $value in $displays {
-      .d#{$infix}-#{$value} { display: $value !important; }
-    }
-  }
-}
-
-@media print {
-  @each $value in $displays {
-    .d-print-#{$value} { display: $value !important; }
-  }
-}
diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
deleted file mode 100644
index 3d4266e0d0..0000000000
--- a/scss/utilities/_flex.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Flex variation
-//
-// Custom styles for additional flex alignment options.
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .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}-wrap         { flex-wrap: wrap !important; }
-    .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
-    .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
-    .flex#{$infix}-fill         { flex: 1 1 auto !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; }
-
-    .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; }
-
-    .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; }
-  }
-}
diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss
deleted file mode 100644
index 54250844ff..0000000000
--- a/scss/utilities/_float.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// stylelint-disable declaration-no-important
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .float#{$infix}-left  { float: left !important; }
-    .float#{$infix}-right { float: right !important; }
-    .float#{$infix}-none  { float: none !important; }
-  }
-}
diff --git a/scss/utilities/_overflow.scss b/scss/utilities/_overflow.scss
deleted file mode 100644
index 8326c30641..0000000000
--- a/scss/utilities/_overflow.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// stylelint-disable declaration-no-important
-
-@each $value in $overflows {
-  .overflow-#{$value} { overflow: $value !important; }
-}
diff --git a/scss/utilities/_shadows.scss b/scss/utilities/_shadows.scss
deleted file mode 100644
index f5d03fcd59..0000000000
--- a/scss/utilities/_shadows.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// stylelint-disable declaration-no-important
-
-.shadow-sm { box-shadow: $box-shadow-sm !important; }
-.shadow { box-shadow: $box-shadow !important; }
-.shadow-lg { box-shadow: $box-shadow-lg !important; }
-.shadow-none { box-shadow: none !important; }
diff --git a/scss/utilities/_sizing.scss b/scss/utilities/_sizing.scss
index f376488022..cc346215b2 100644
--- a/scss/utilities/_sizing.scss
+++ b/scss/utilities/_sizing.scss
@@ -1,13 +1,5 @@
 // stylelint-disable declaration-no-important
 
-// Width and height
-
-@each $prop, $abbrev in (width: w, height: h) {
-  @each $size, $length in $sizes {
-    .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
-  }
-}
-
 .mw-100 { max-width: 100% !important; }
 .mh-100 { max-height: 100% !important; }
 
diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
deleted file mode 100644
index 351136790a..0000000000
--- a/scss/utilities/_spacing.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Margin and Padding
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    @each $prop, $abbrev in (margin: m, padding: p) {
-      @each $size, $length in $spacers {
-        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
-        .#{$abbrev}t#{$infix}-#{$size},
-        .#{$abbrev}y#{$infix}-#{$size} {
-          #{$prop}-top: $length !important;
-        }
-        .#{$abbrev}r#{$infix}-#{$size},
-        .#{$abbrev}x#{$infix}-#{$size} {
-          #{$prop}-right: $length !important;
-        }
-        .#{$abbrev}b#{$infix}-#{$size},
-        .#{$abbrev}y#{$infix}-#{$size} {
-          #{$prop}-bottom: $length !important;
-        }
-        .#{$abbrev}l#{$infix}-#{$size},
-        .#{$abbrev}x#{$infix}-#{$size} {
-          #{$prop}-left: $length !important;
-        }
-      }
-    }
-
-    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
-    @each $size, $length in $spacers {
-      @if $size != 0 {
-        .m#{$infix}-n#{$size} { margin: -$length !important; }
-        .mt#{$infix}-n#{$size},
-        .my#{$infix}-n#{$size} {
-          margin-top: -$length !important;
-        }
-        .mr#{$infix}-n#{$size},
-        .mx#{$infix}-n#{$size} {
-          margin-right: -$length !important;
-        }
-        .mb#{$infix}-n#{$size},
-        .my#{$infix}-n#{$size} {
-          margin-bottom: -$length !important;
-        }
-        .ml#{$infix}-n#{$size},
-        .mx#{$infix}-n#{$size} {
-          margin-left: -$length !important;
-        }
-      }
-    }
-
-    // Some special margin utils
-    .m#{$infix}-auto { margin: auto !important; }
-    .mt#{$infix}-auto,
-    .my#{$infix}-auto {
-      margin-top: auto !important;
-    }
-    .mr#{$infix}-auto,
-    .mx#{$infix}-auto {
-      margin-right: auto !important;
-    }
-    .mb#{$infix}-auto,
-    .my#{$infix}-auto {
-      margin-bottom: auto !important;
-    }
-    .ml#{$infix}-auto,
-    .mx#{$infix}-auto {
-      margin-left: auto !important;
-    }
-  }
-}
diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index fbf707d01f..ba775ee8d8 100644
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -1,68 +1,7 @@
-// stylelint-disable declaration-no-important
-
 //
 // Text
 //
 
-.text-monospace { font-family: $font-family-monospace !important; }
-
-// Alignment
-
-.text-justify  { text-align: justify !important; }
-.text-wrap     { white-space: normal !important; }
-.text-nowrap   { white-space: nowrap !important; }
-.text-truncate { @include text-truncate; }
-
-// Responsive alignment
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .text#{$infix}-left   { text-align: left !important; }
-    .text#{$infix}-right  { text-align: right !important; }
-    .text#{$infix}-center { text-align: center !important; }
-  }
-}
-
-// Transformation
-
-.text-lowercase  { text-transform: lowercase !important; }
-.text-uppercase  { text-transform: uppercase !important; }
-.text-capitalize { text-transform: capitalize !important; }
-
-// Weight and italics
-
-.font-weight-light   { font-weight: $font-weight-light !important; }
-.font-weight-lighter { font-weight: $font-weight-lighter !important; }
-.font-weight-normal  { font-weight: $font-weight-normal !important; }
-.font-weight-bold    { font-weight: $font-weight-bold !important; }
-.font-weight-bolder  { font-weight: $font-weight-bolder !important; }
-.font-italic         { font-style: italic !important; }
-
-// Contextual colors
-
-.text-white { color: $white !important; }
-
 @each $color, $value in $theme-colors {
   @include text-emphasis-variant(".text-#{$color}", $value);
 }
-
-.text-body { color: $body-color !important; }
-.text-muted { color: $text-muted !important; }
-
-.text-black-50 { color: rgba($black, .5) !important; }
-.text-white-50 { color: rgba($white, .5) !important; }
-
-// Misc
-
-.text-decoration-none { text-decoration: none !important; }
-
-.text-break {
-  word-break: break-word !important; // IE & < Edge 18
-  overflow-wrap: break-word !important;
-}
-
-// Reset
-
-.text-reset { color: inherit !important; }