chore: remove add and subtract from SCSS

.stylelintrc.json

@@ -13,7 +13,6 @@
           "outline": "none"
         },
         "function-disallowed-list": [
-          "calc",
           "lighten",
           "darken"
         ],

scss/_accordion.scss

@@ -81,8 +81,8 @@
   &:focus-visible {
     // OUDS mod
     z-index: $focus-visible-zindex; // Make sure the focused accordion button is displayed over its next sibling
-    outline-offset: add($focus-visible-outer-offset, var(--#{$prefix}accordion-border-width));
-    box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}color-border-focus-inset);
+    outline-offset: calc($focus-visible-outer-offset + var(--#{$prefix}accordion-border-width));
+    box-shadow: 0 0 0 calc(var(--#{$prefix}accordion-border-width) + $focus-visible-inner-width) var(--#{$prefix}color-border-focus-inset);
     // End mod
   }
 }

scss/_alert.scss

@@ -118,7 +118,7 @@
 .alert-icon {
   flex-shrink: 0;
   width: var(--#{$prefix}alert-icon-size);
-  margin: calc(-.5 * var(--#{$prefix}alert-icon-margin-y)) 0; // stylelint-disable-line function-disallowed-list
+  margin: calc(-.5 * var(--#{$prefix}alert-icon-margin-y)) 0;
 
   + * {
     margin: var(--#{$prefix}alert-icon-margin-y) 0 0;

scss/_badges.scss

@@ -35,7 +35,7 @@
     display: flex;
     flex: 1 0 0;
     aspect-ratio: 1/1;
-    font-size: calc(var(--#{$prefix}badge-size) - (2 * var(--#{$prefix}badge-count-padding-x))); // stylelint-disable-line function-disallowed-list
+    font-size: calc(var(--#{$prefix}badge-size) - (2 * var(--#{$prefix}badge-count-padding-x)));
   }
 
   .badge-status-icon {

scss/_bullet-list.scss

@@ -3,7 +3,7 @@
   --#{$prefix}bullet-list-padding-block: #{$ouds-bullet-list-space-padding-block-body-large};
   --#{$prefix}bullet-list-icon-container-width: var(--#{$prefix}icon-medium-with-body-large);
   --#{$prefix}bullet-list-icon-size: var(--#{$prefix}icon-small-with-body-large);
-  --#{$prefix}bullet-list-fixed-left-padding: calc(var(--#{$prefix}bullet-list-icon-container-width) + #{$ouds-bullet-list-space-column-gap-body-large}); // stylelint-disable-line function-disallowed-list
+  --#{$prefix}bullet-list-fixed-left-padding: calc(var(--#{$prefix}bullet-list-icon-container-width) + #{$ouds-bullet-list-space-column-gap-body-large});
   --#{$prefix}bullet-list-marker-left: #{$ouds-bullet-list-space-padding-inline-level-0};
 
   padding-left: 0;
@@ -17,7 +17,7 @@
     --#{$prefix}bullet-list-padding-block: #{$ouds-bullet-list-space-padding-block-body-medium};
     --#{$prefix}bullet-list-icon-container-width: var(--#{$prefix}icon-medium-with-body-medium);
     --#{$prefix}bullet-list-icon-size: var(--#{$prefix}icon-small-with-body-medium);
-    --#{$prefix}bullet-list-fixed-left-padding: calc(var(--#{$prefix}bullet-list-icon-container-width) + #{$ouds-bullet-list-space-column-gap-body-medium}); // stylelint-disable-line function-disallowed-list
+    --#{$prefix}bullet-list-fixed-left-padding: calc(var(--#{$prefix}bullet-list-icon-container-width) + #{$ouds-bullet-list-space-column-gap-body-medium});
     @include get-font-size("body-medium");
   }
 
@@ -30,7 +30,7 @@
   li {
     position: relative;
     padding: var(--#{$prefix}bullet-list-padding-block) 0;
-    padding-left: calc(var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-0}); // stylelint-disable-line function-disallowed-list
+    padding-left: calc(var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-0});
 
     &:has(ul, ol) {
       padding-bottom: 0; // remove duplicate padding when we have nested lists
@@ -54,12 +54,12 @@
     }
 
     li {
-      --#{$prefix}bullet-list-marker-left: calc(#{$ouds-bullet-list-space-padding-inline-level-1} - (var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-0})); // stylelint-disable-line function-disallowed-list
-      padding-left: calc($ouds-bullet-list-space-padding-inline-level-1 - $ouds-bullet-list-space-padding-inline-level-0); // stylelint-disable-line function-disallowed-list
+      --#{$prefix}bullet-list-marker-left: calc(#{$ouds-bullet-list-space-padding-inline-level-1} - (var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-0}));
+      padding-left: calc($ouds-bullet-list-space-padding-inline-level-1 - $ouds-bullet-list-space-padding-inline-level-0);
 
       li {
-        --#{$prefix}bullet-list-marker-left: calc(#{$ouds-bullet-list-space-padding-inline-level-2} - (var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-1})); // stylelint-disable-line function-disallowed-list
-        padding-left: calc($ouds-bullet-list-space-padding-inline-level-2 - $ouds-bullet-list-space-padding-inline-level-1); // stylelint-disable-line function-disallowed-list
+        --#{$prefix}bullet-list-marker-left: calc(#{$ouds-bullet-list-space-padding-inline-level-2} - (var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-1}));
+        padding-left: calc($ouds-bullet-list-space-padding-inline-level-2 - $ouds-bullet-list-space-padding-inline-level-1);
       }
     }
   }

scss/_button-group.scss

@@ -46,7 +46,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn:not(.btn-toggle),
   > .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});
   }
   // End mod
 
@@ -104,10 +104,9 @@
 //
 
 .dropdown-toggle-split {
-  // stylelint-disable-next-line function-disallowed-list
-  min-width: add($dropdown-padding-x * 2, calc(#{$caret-width} * 2)); // OUDS mod
-  padding-right: subtract($dropdown-padding-x, $btn-border-width); // OUDS mod
-  padding-left: subtract($dropdown-padding-x, $btn-border-width); // OUDS mod
+  min-width: calc($dropdown-padding-x * 2 + calc(#{$caret-width} * 2)); // OUDS mod
+  padding-right: calc($dropdown-padding-x - $btn-border-width); // OUDS mod
+  padding-left: calc($dropdown-padding-x - $btn-border-width); // OUDS mod
 
   // OUDS mod
   .btn-group:not(.dropstart) &,
@@ -117,9 +116,9 @@
 
       &::before {
         position: absolute;
-        top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
-        bottom: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
-        left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+        top: calc(-1 * #{$btn-border-width});
+        bottom: calc(-1 * #{$btn-border-width});
+        left: calc(-1 * #{$btn-border-width});
         width: $btn-border-width;
         color: inherit;
         content: "";
@@ -128,9 +127,9 @@
             transparent $btn-border-width,
             transparent map-get($spacers, 1),
             currentcolor map-get($spacers, 1),
-            currentcolor subtract(100%, map-get($spacers, 1)),
-            transparent subtract(100%, map-get($spacers, 1)),
-            transparent subtract(100%, $btn-border-width)
+            currentcolor calc(100% - map-get($spacers, 1)),
+            transparent calc(100% - map-get($spacers, 1)),
+            transparent calc(100% - $btn-border-width)
           );
       }
     }
@@ -190,7 +189,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

scss/_buttons.scss

@@ -63,7 +63,7 @@
   justify-content: center; // OUDS mod
   min-width: var(--#{$prefix}btn-min-width); // OUDS mod
   min-height: var(--#{$prefix}btn-min-height); // OUDS mod
-  padding: subtract(var(--#{$prefix}btn-padding-y), var(--#{$prefix}btn-border-width)) subtract(var(--#{$prefix}btn-padding-end), var(--#{$prefix}btn-border-width)) subtract(var(--#{$prefix}btn-padding-y), var(--#{$prefix}btn-border-width)) subtract(var(--#{$prefix}btn-padding-start), var(--#{$prefix}btn-border-width)); // OUDS mod: instead of `var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x)`
+  padding: calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-end) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-start) - var(--#{$prefix}btn-border-width)); // OUDS mod: instead of `var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x)`
   // OUDS mod: no font-family
   @include get-font-size("label-large"); // OUDS mod
   font-weight: var(--#{$prefix}btn-font-weight);
@@ -88,7 +88,7 @@
   &.loading-determinate,
   &:active,
   &.active {
-    padding: subtract(var(--#{$prefix}btn-padding-y), var(--#{$prefix}btn-interaction-border-width)) subtract(var(--#{$prefix}btn-padding-end), var(--#{$prefix}btn-interaction-border-width)) subtract(var(--#{$prefix}btn-padding-y), var(--#{$prefix}btn-interaction-border-width)) subtract(var(--#{$prefix}btn-padding-start), var(--#{$prefix}btn-interaction-border-width));
+    padding: calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-interaction-border-width)) calc(var(--#{$prefix}btn-padding-end) - var(--#{$prefix}btn-interaction-border-width)) calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-interaction-border-width)) calc(var(--#{$prefix}btn-padding-start) - var(--#{$prefix}btn-interaction-border-width));
     border-width: var(--#{$prefix}btn-interaction-border-width);
   }
   // End mod

scss/_card.scss

@@ -91,8 +91,8 @@
 
 .card-subtitle {
   @extend .h6; // OUDS mod
-  margin-top: 0; // OUDS mod
-  margin-bottom: var(--#{$prefix}card-title-spacer-y); // OUDS mod
+  margin-top: 0; // OUDS mod: instead of `calc(-.5 * var(--#{$prefix}card-title-spacer-y))`
+  margin-bottom: var(--#{$prefix}card-title-spacer-y); // OUDS mod: instead of 0
   color: var(--#{$prefix}card-subtitle-color);
 }
 
@@ -146,9 +146,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 {
@@ -158,8 +158,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

scss/_carousel.scss

@@ -152,7 +152,7 @@
   display: inline-block;
   background-color: var(--#{$prefix}control-bg); // OUDS mod
   @include border-radius(50%, 50%);
-  @include button-icon($carousel-control-icon-bg, $carousel-control-icon-width, $size: $carousel-control-icon-size, $position: subtract(50%, $spacer * .1) 50%); // OUDS mod
+  @include button-icon($carousel-control-icon-bg, $carousel-control-icon-width, $size: $carousel-control-icon-size, $position: calc(50% - $spacer * .1) 50%); // OUDS mod
 }
 
 // OUDS mod
@@ -240,7 +240,7 @@
       background-image: linear-gradient(to right, transparent 50%, color-contrast($carousel-indicator-active-bg) 0);
       // No need to feature test mask-*
       // See https://caniuse.com/mdn-css_properties_mask-image
-      mask-image: radial-gradient(circle at 50%, transparent 33%, $white add(33%, 1px));
+      mask-image: radial-gradient(circle at 50%, transparent 33%, $white calc(33% + 1px));
       transform: scale($carousel-indicator-hover-scale);
 
       &:hover,
@@ -261,7 +261,6 @@
         content: "";
         background-color: inherit;
         transform-origin: left;
-        // stylelint-disable-next-line function-disallowed-list
         animation: carousel-progress calc(#{$carousel-indicator-animation-interval} / 2) linear infinite, carousel-progress-half $carousel-indicator-animation-interval step-end infinite;
         @include border-radius(inspect($carousel-indicator-active-radius), $carousel-indicator-active-radius);
       }

scss/_chips.scss

@@ -40,7 +40,7 @@
   justify-content: center;
   min-width: $ouds-chip-size-min-width;
   min-height: $ouds-chip-size-min-height;
-  padding: subtract(var(--#{$prefix}chip-padding-block), var(--#{$prefix}chip-border-width)) subtract(var(--#{$prefix}chip-padding-end), var(--#{$prefix}chip-border-width)) subtract(var(--#{$prefix}chip-padding-block), var(--#{$prefix}chip-border-width)) subtract(var(--#{$prefix}chip-padding-start), var(--#{$prefix}chip-border-width));
+  padding: calc(var(--#{$prefix}chip-padding-block) - var(--#{$prefix}chip-border-width)) calc(var(--#{$prefix}chip-padding-end) - var(--#{$prefix}chip-border-width)) calc(var(--#{$prefix}chip-padding-block) - var(--#{$prefix}chip-border-width)) calc(var(--#{$prefix}chip-padding-start) - var(--#{$prefix}chip-border-width));
   @include get-font-size("label-medium");
   font-weight: 700;
   color: var(--#{$prefix}chip-color);

scss/_dropdown.scss

@@ -173,7 +173,7 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x) add(var(--#{$prefix}dropdown-item-padding-y), .125rem); // OUDS mod
+  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x) calc(var(--#{$prefix}dropdown-item-padding-y) + .125rem); // OUDS mod
   clear: both;
   font-weight: var(--#{$prefix}dropdown-item-font-weight); // OUDS mod
   color: var(--#{$prefix}dropdown-link-color);
@@ -210,7 +210,7 @@
   // OUDS mod: focus
   &:focus-visible {
     outline-offset: -$focus-visible-outer-width;
-    box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);
+    box-shadow: inset 0 0 0 calc($focus-visible-inner-width + $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);
   }
   // End mod
 }

scss/_footer.scss

@@ -106,7 +106,7 @@
 
   .footer-service {
     // scss-docs-start footer-service-css-vars
-    --#{$prefix}footer-padding-top: #{subtract($footer-service-padding-y, .0625rem)};
+    --#{$prefix}footer-padding-top: #{calc($footer-service-padding-y - .0625rem)};
     --#{$prefix}footer-padding-bottom: #{$footer-service-padding-y};
     // scss-docs-end footer-service-css-vars
 
@@ -178,7 +178,7 @@
 
     .footer-service {
       // scss-docs-start footer-service-md-css-vars
-      --#{$prefix}footer-padding-top: #{add($footer-service-padding-y-md, .0625rem)};
+      --#{$prefix}footer-padding-top: #{calc($footer-service-padding-y-md + .0625rem)};
       --#{$prefix}footer-padding-bottom: #{$footer-service-padding-y-md};
       // scss-docs-end footer-service-md-css-vars
     }

scss/_functions.scss

@@ -223,47 +223,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);

scss/_list-group.scss

@@ -106,16 +106,15 @@
     border-top-width: 0;
 
     &.active {
-      // stylelint-disable-next-line function-disallowed-list
       margin-top: calc(-1 * #{$list-group-divider-size}); // OUDS mod: instead of `calc(-1 * var(--#{$prefix}list-group-border-width))`
       border-top-width: $list-group-divider-size; // OUDS mod: instead of `var(--#{$prefix}list-group-border-width)`
     }
   }
 
   // OUDS mod: focus
   &:focus-visible {
-    outline-offset: subtract(-$focus-visible-outer-width, var(--#{$prefix}list-group-border-width));
-    box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);
+    outline-offset: calc(-1 * $focus-visible-outer-width - var(--#{$prefix}list-group-border-width));
+    box-shadow: inset 0 0 0 calc($focus-visible-inner-width + $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);
   }
   // End mod
 }
@@ -184,7 +183,6 @@
           border-left-width: 0;
 
           &.active {
-            // stylelint-disable-next-line function-disallowed-list
             margin-left: calc(-1 * #{$list-group-divider-size}); // OUDS mod: instead of `calc(-1 * var(--#{$prefix}list-group-border-width))`
             border-left-width: $list-group-divider-size; // OUDS mod: instead of `var(--#{$prefix}list-group-border-width)`
           }
@@ -236,11 +234,11 @@
     // OUDS mod: no `--#{$prefix}list-group-active-border-color`
 
     // OUDS mod
-    padding-right: calc(var(--#{$prefix}list-group-item-icon-margin-x) * 2 + var(--#{$prefix}list-group-item-icon-size)); // stylelint-disable-line function-disallowed-list
+    padding-right: calc(var(--#{$prefix}list-group-item-icon-margin-x) * 2 + var(--#{$prefix}list-group-item-icon-size));
 
     &::after {
       position: absolute;
-      top: add(var(--#{$prefix}list-group-item-padding-y), 1px);
+      top: calc(var(--#{$prefix}list-group-item-padding-y) + 1px);
       right: var(--#{$prefix}list-group-item-icon-margin-x);
       width: var(--#{$prefix}list-group-item-icon-size);
       height: var(--#{$prefix}list-group-item-icon-size);

scss/_local-navigation.scss

@@ -18,7 +18,7 @@
   .local-nav-button {
     display: block;
     width: 100%;
-    padding: subtract(var(--#{$prefix}local-nav-padding-y), var(--#{$prefix}local-nav-border-width)) 0 var(--#{$prefix}local-nav-padding-y);
+    padding: calc(var(--#{$prefix}local-nav-padding-y) - var(--#{$prefix}local-nav-border-width)) 0 var(--#{$prefix}local-nav-padding-y);
     font-weight: $font-weight-bold;
     color: var(--#{$prefix}local-nav-color);
     background-color: transparent;
@@ -89,7 +89,7 @@
       --#{$prefix}navbar-active-color: var(--#{$prefix}local-nav-color);
 
       &::before {
-        bottom: calc(-1 * var(--#{$prefix}local-nav-border-width)); // stylelint-disable-line function-disallowed-list
+        bottom: calc(-1 * var(--#{$prefix}local-nav-border-width));
         color: var(--#{$prefix}local-nav-active-color);
       }
 

scss/_maps.scss

@@ -58,7 +58,6 @@ $ouds-dimension-space-scaled: (
   "3xlarge": var(--#{$prefix}space-scaled-3xlarge)
 ) !default;
 
-// stylelint-disable function-disallowed-list
 $ouds-dimension-negative-space-scaled: (
   "n3xsmall": calc(-1 * var(--#{$prefix}space-scaled-3xsmall)),
   "n2xsmall": calc(-1 * var(--#{$prefix}space-scaled-2xsmall)),
@@ -70,7 +69,6 @@ $ouds-dimension-negative-space-scaled: (
   "n2xlarge": calc(-1 * var(--#{$prefix}space-scaled-2xlarge)),
   "n3xlarge": calc(-1 * var(--#{$prefix}space-scaled-3xlarge))
 ) !default;
-// stylelint-enable function-disallowed-list
 
 // scss-docs-start ouds-maps-dimension-fixed
 $ouds-dimension-space-fixed: (

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