From f9052f47c61d5abc20480297cf24ee405c5d74a5 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Tue, 26 Aug 2025 21:34:58 -0700
Subject: [PATCH] v6: Don't disallow calc (#41681)

* Don't disallow calc()

* Remove disables that aren't needed

* Remove custom subtract and add functions

* Remove more disables

* keep it here
---
 .stylelintrc.json                      |  1 -
 scss/_accordion.scss                   |  2 +-
 scss/_button-group.scss                |  4 +--
 scss/_card.scss                        | 12 ++++----
 scss/_functions.scss                   | 41 --------------------------
 scss/_list-group.scss                  |  4 +--
 scss/_modal.scss                       |  2 --
 scss/_nav.scss                         |  4 +--
 scss/_offcanvas.scss                   |  2 --
 scss/_popover.scss                     | 18 +++++------
 scss/_tables.scss                      |  2 +-
 scss/_toasts.scss                      |  2 +-
 scss/_tooltip.scss                     | 16 +++++-----
 scss/_variables.scss                   | 16 +++++-----
 scss/forms/_input-group.scss           |  2 +-
 scss/mixins/_container.scss            |  4 +--
 scss/mixins/_grid.scss                 | 10 +++----
 site/src/scss/_component-examples.scss |  4 +--
 site/src/scss/_sidebar.scss            |  2 +-
 site/src/scss/_toc.scss                |  2 +-
 site/src/scss/_variables.scss          |  6 ++--
 21 files changed, 55 insertions(+), 101 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 589884aae7..045dbeff4e 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -13,7 +13,6 @@
           "outline": "none"
         },
         "function-disallowed-list": [
-          "calc",
           "lighten",
           "darken"
         ],
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index e9f267fba3..c2d3b800d1 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -46,7 +46,7 @@
   &:not(.collapsed) {
     color: var(--#{$prefix}accordion-active-color);
     background-color: var(--#{$prefix}accordion-active-bg);
-    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);
 
     &::after {
       background-image: var(--#{$prefix}accordion-btn-active-icon);
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 78e125224f..f0e3b88204 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -39,7 +39,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$btn-border-width});
   }
 
   // Reset rounded corners
@@ -126,7 +126,7 @@
 
   > .btn:not(:first-child),
   > .btn-group:not(:first-child) {
-    margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+    margin-top: calc(-1 * #{$btn-border-width});
   }
 
   // Reset rounded corners
diff --git a/scss/_card.scss b/scss/_card.scss
index dcebe6ac28..5bc84f99cc 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -80,7 +80,7 @@
 }
 
 .card-subtitle {
-  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
+  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y));
   margin-bottom: 0;
   color: var(--#{$prefix}card-subtitle-color);
 }
@@ -132,9 +132,9 @@
 //
 
 .card-header-tabs {
-  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-  margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+  margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
+  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
   border-bottom: 0;
 
   .nav-link.active {
@@ -144,8 +144,8 @@
 }
 
 .card-header-pills {
-  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
 }
 
 // Card image
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 59d431a15b..9ad74ef6d3 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -218,47 +218,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 }
 // scss-docs-end color-functions
 
-// Return valid calc
-@function add($value1, $value2, $return-calc: true) {
-  @if $value1 == null {
-    @return $value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-    @return $value1 + $value2;
-  }
-
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
-}
-
-@function subtract($value1, $value2, $return-calc: true) {
-  @if $value1 == null and $value2 == null {
-    @return null;
-  }
-
-  @if $value1 == null {
-    @return -$value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-    @return $value1 - $value2;
-  }
-
-  @if type-of($value2) != number {
-    $value2: unquote("(") + $value2 + unquote(")");
-  }
-
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
-}
-
 @function divide($dividend, $divisor, $precision: 10) {
   $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
   $dividend: abs($dividend);
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 3bdff679ad..f7c9ea54c2 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -84,7 +84,7 @@
     border-top-width: 0;
 
     &.active {
-      margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
+      margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
       border-top-width: var(--#{$prefix}list-group-border-width);
     }
   }
@@ -148,7 +148,7 @@
           border-left-width: 0;
 
           &.active {
-            margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
+            margin-left: calc(-1 * var(--#{$prefix}list-group-border-width));
             border-left-width: var(--#{$prefix}list-group-border-width);
           }
         }
diff --git a/scss/_modal.scss b/scss/_modal.scss
index a3492c1723..1e611e3dba 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -1,5 +1,3 @@
-// stylelint-disable function-disallowed-list
-
 // .modal-open      - body class for killing the scroll
 // .modal           - container to scroll within
 // .modal-dialog    - positioning shell for the actual modal
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 96fa528908..3c25f0b037 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -70,7 +70,7 @@
   border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
 
   .nav-link {
-    margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
+    margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
     border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
     @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
 
@@ -91,7 +91,7 @@
 
   .dropdown-menu {
     // Make dropdown border overlap tab border
-    margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
+    margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
     // Remove the top rounded corners here since there is a hard edge above the menu
     @include border-top-radius(0);
   }
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index b40b2cd9b7..241afb2e4d 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -1,5 +1,3 @@
-// stylelint-disable function-disallowed-list
-
 %offcanvas-css-vars {
   // scss-docs-start offcanvas-css-vars
   --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 7b69f62328..10833d4de9 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -56,11 +56,11 @@
 
 .bs-popover-top {
   > .popover-arrow {
-    bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
 
     &::before,
     &::after {
-      border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
     }
 
     &::before {
@@ -78,13 +78,13 @@
 /* rtl:begin:ignore */
 .bs-popover-end {
   > .popover-arrow {
-    left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
     width: var(--#{$prefix}popover-arrow-height);
     height: var(--#{$prefix}popover-arrow-width);
 
     &::before,
     &::after {
-      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
     }
 
     &::before {
@@ -103,11 +103,11 @@
 
 .bs-popover-bottom {
   > .popover-arrow {
-    top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
 
     &::before,
     &::after {
-      border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
     }
 
     &::before {
@@ -128,7 +128,7 @@
     left: 50%;
     display: block;
     width: var(--#{$prefix}popover-arrow-width);
-    margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width));
     content: "";
     border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
   }
@@ -137,13 +137,13 @@
 /* rtl:begin:ignore */
 .bs-popover-start {
   > .popover-arrow {
-    right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
     width: var(--#{$prefix}popover-arrow-height);
     height: var(--#{$prefix}popover-arrow-width);
 
     &::before,
     &::after {
-      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
     }
 
     &::before {
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 276521a387..fa71cd5271 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -49,7 +49,7 @@
 }
 
 .table-group-divider {
-  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
+  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
 }
 
 //
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 2ce378d5bc..c2a8a61981 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -62,7 +62,7 @@
   @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
 
   .btn-close {
-    margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
+    margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x));
     margin-left: var(--#{$prefix}toast-padding-x);
   }
 }
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 85de90f53d..b74e3fcfb8 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -44,24 +44,24 @@
 }
 
 .bs-tooltip-top .tooltip-arrow {
-  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
 
   &::before {
     top: -1px;
-    border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+    border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
     border-top-color: var(--#{$prefix}tooltip-bg);
   }
 }
 
 /* rtl:begin:ignore */
 .bs-tooltip-end .tooltip-arrow {
-  left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+  left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
 
   &::before {
     right: -1px;
-    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
     border-right-color: var(--#{$prefix}tooltip-bg);
   }
 }
@@ -69,24 +69,24 @@
 /* rtl:end:ignore */
 
 .bs-tooltip-bottom .tooltip-arrow {
-  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
 
   &::before {
     bottom: -1px;
-    border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+    border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
     border-bottom-color: var(--#{$prefix}tooltip-bg);
   }
 }
 
 /* rtl:begin:ignore */
 .bs-tooltip-start .tooltip-arrow {
-  right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+  right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
 
   &::before {
     left: -1px;
-    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
     border-left-color: var(--#{$prefix}tooltip-bg);
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 1ffa7e74bf..545c872789 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -586,7 +586,6 @@ $transition-collapse:         height .35s ease !default;
 $transition-collapse-width:   width .35s ease !default;
 // scss-docs-end collapse-transition
 
-// stylelint-disable function-disallowed-list
 // scss-docs-start aspect-ratios
 $aspect-ratios: (
   "1x1": 100%,
@@ -595,7 +594,6 @@ $aspect-ratios: (
   "21x9": calc(9 / 21 * 100%)
 ) !default;
 // scss-docs-end aspect-ratios
-// stylelint-enable function-disallowed-list
 
 // Typography
 //
@@ -920,7 +918,7 @@ $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 $input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
 $input-plaintext-color:                 var(--#{$prefix}body-color) !default;
 
-$input-height-border:                   calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
+$input-height-border:                   calc(#{$input-border-width} * 2) !default;
 
 $input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
 $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
@@ -1245,7 +1243,7 @@ $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
-$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
@@ -1302,7 +1300,7 @@ $pagination-color:                  var(--#{$prefix}link-color) !default;
 $pagination-bg:                     var(--#{$prefix}body-bg) !default;
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
-$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default;
 $pagination-border-color:           var(--#{$prefix}border-color) !default;
 
 $pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
@@ -1348,7 +1346,7 @@ $card-border-width:                 var(--#{$prefix}border-width) !default;
 $card-border-color:                 var(--#{$prefix}border-color-translucent) !default;
 $card-border-radius:                var(--#{$prefix}border-radius) !default;
 $card-box-shadow:                   null !default;
-$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
+$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
 $card-cap-padding-y:                $card-spacer-y * .5 !default;
 $card-cap-padding-x:                $card-spacer-x !default;
 $card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03) !default;
@@ -1370,7 +1368,7 @@ $accordion-bg:                            var(--#{$prefix}body-bg) !default;
 $accordion-border-width:                  var(--#{$prefix}border-width) !default;
 $accordion-border-color:                  var(--#{$prefix}border-color) !default;
 $accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
-$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;
+$accordion-inner-border-radius:           calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
 
 $accordion-body-padding-y:                $accordion-padding-y !default;
 $accordion-body-padding-x:                $accordion-padding-x !default;
@@ -1438,7 +1436,7 @@ $popover-max-width:                 276px !default;
 $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
-$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
 $popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
 
 $popover-header-font-size:          $font-size-base !default;
@@ -1512,7 +1510,7 @@ $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
-$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default;
 $modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm) !default;
 $modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow) !default;
 
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 8078ebb151..09a92c5105 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -121,7 +121,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$input-border-width});
     @include border-start-radius(0);
   }
 
diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss
index b9f33519e2..2a5286536f 100644
--- a/scss/mixins/_container.scss
+++ b/scss/mixins/_container.scss
@@ -4,8 +4,8 @@
   --#{$prefix}gutter-x: #{$gutter};
   --#{$prefix}gutter-y: 0;
   width: 100%;
-  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5);
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5);
   margin-right: auto;
   margin-left: auto;
 }
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index db77e07f89..a11b8b8027 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -8,9 +8,9 @@
   display: flex;
   flex-wrap: wrap;
   // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
-  margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-top: calc(-1 * var(--#{$prefix}gutter-y));
+  margin-right: calc(-.5 * var(--#{$prefix}gutter-x));
+  margin-left: calc(-.5 * var(--#{$prefix}gutter-x));
 }
 
 @mixin make-col-ready() {
@@ -22,8 +22,8 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5);
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5);
   margin-top: var(--#{$prefix}gutter-y);
 }
 
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index 177836fcd8..64ef3549f5 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -93,13 +93,13 @@
   .fixed-top,
   .sticky-top {
     position: static;
-    margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
+    margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding);
   }
 
   .fixed-bottom,
   .sticky-bottom {
     position: static;
-    margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)); // stylelint-disable-line function-disallowed-list
+    margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding));
 
   }
 
diff --git a/site/src/scss/_sidebar.scss b/site/src/scss/_sidebar.scss
index 598da3d5b2..fe44556534 100644
--- a/site/src/scss/_sidebar.scss
+++ b/site/src/scss/_sidebar.scss
@@ -5,7 +5,7 @@
     // Override collapse behaviors
     // stylelint-disable-next-line declaration-no-important
     display: block !important;
-    height: subtract(100vh, 6rem);
+    height: calc(100vh - 6rem);
     // Prevent focus styles to be cut off:
     padding-left: .25rem;
     margin-left: -.25rem;
diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 7b840ab743..f9bb8a3e40 100644
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -9,7 +9,7 @@
     top: 5rem;
     right: 0;
     z-index: 2;
-    height: subtract(100vh, 7rem);
+    height: calc(100vh - 7rem);
     overflow-y: auto;
   }
 
diff --git a/site/src/scss/_variables.scss b/site/src/scss/_variables.scss
index 5e8ab5d6c2..81ce120405 100644
--- a/site/src/scss/_variables.scss
+++ b/site/src/scss/_variables.scss
@@ -1,7 +1,9 @@
+// stylelint-disable function-disallowed-list
+
 // Local docs variables
 $bd-purple:        #4c0bce;
-$bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
-$bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
+$bd-violet:        lighten(saturate($bd-purple, 5%), 15%);
+$bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%);
 $bd-accent:        #ffe484;
 
 $bd-gutter-x: 3rem;