[BD-46] resolve bootstrap conflicts with design tokens (#1800)

* feat: resolve some Bootstrap conflicts with design tokens

Co-authored-by: Peter Kulko <[email protected]>

scss/core/_functions.scss

@@ -1,4 +1,4 @@
-@import "~bootstrap/scss/functions";
+@import "./bootstrap-override/functions";
 
 //
 // BOOTSTRAP FUNCTION OVERRIDE

scss/core/_grid.scss

@@ -1,21 +1,21 @@
 @import "~bootstrap/scss/grid";
 
 .container-mw-xs {
-  max-width: $max-width-xs + $grid-gutter-width !important;
+  max-width: calc(#{$max-width-xs} + #{$grid-gutter-width}) !important;
 }
 
 .container-mw-sm {
-  max-width: $max-width-sm + $grid-gutter-width !important;
+  max-width: calc(#{$max-width-sm} + #{$grid-gutter-width}) !important;
 }
 
 .container-mw-md {
-  max-width: $max-width-md + $grid-gutter-width !important;
+  max-width: calc(#{$max-width-md} + #{$grid-gutter-width}) !important;
 }
 
 .container-mw-lg {
-  max-width: $max-width-lg + $grid-gutter-width !important;
+  max-width: calc(#{$max-width-lg} + #{$grid-gutter-width}) !important;
 }
 
 .container-mw-xl {
-  max-width: $max-width-xl + $grid-gutter-width !important;
+  max-width: calc(#{$max-width-xl} + #{$grid-gutter-width}) !important;
 }

scss/core/bootstrap-override/_functions.scss

@@ -0,0 +1,104 @@
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    // stylelint-disable-next-line max-line-length
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape-svg($string) {
+  @if str-index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+      // Do not escape the url brackets
+      @if str-index($string, "url(") == 1 {
+        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      }
+
+      @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}
+
+// Retrieve color Sass maps
+@function color($key: "blue") {
+  @return map-get($colors, $key);
+}
+
+@function gray($key: "100") {
+  @return map-get($grays, $key);
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+
+  @if $dividend == 0 {
+    @return 0;
+  }
+
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+
+    $result: $result * 10 + $quotient;
+    $factor: $factor * .1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+
+  $result: $result * $factor * $sign;
+  $dividend-unit: unit($dividend);
+  $divisor-unit: unit($divisor);
+  $unit-map: (
+    "px": 1px,
+    "rem": 1rem,
+    "em": 1em,
+    "%": 1%
+  );
+
+  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+    $result: $result * map-get($unit-map, $dividend-unit);
+  }
+
+  @return $result;
+}

scss/core/bootstrap-override/_mixins.scss

@@ -0,0 +1,8 @@
+// Utilities
+@import "mixins/text-emphasis";
+
+// Skins
+@import "mixins/background-variant";
+
+// Components
+@import "mixins/list-group";

scss/core/bootstrap-override/bootstrap.scss

@@ -0,0 +1,2 @@
+@import "mixins";
+

scss/core/bootstrap-override/mixins/_background-variant.scss

@@ -0,0 +1,27 @@
+// stylelint-disable declaration-no-important
+
+// Contextual backgrounds
+
+@mixin bg-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background-color: $color !important;
+  }
+
+  a#{$parent},
+  button#{$parent} {
+    @include hover-focus() {
+      background-color: $color !important;
+      filter: brightness(10%);
+    }
+  }
+
+  @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
+}
+
+@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+  }
+
+  @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
+}

scss/core/bootstrap-override/mixins/_list-group.scss

@@ -0,0 +1,22 @@
+// List Groups
+// TODO: not used in Paragon.
+@mixin list-group-item-variant($state, $background, $color) {
+  .list-group-item-#{$state} {
+    color: $color;
+    background-color: $background;
+
+    &.list-group-item-action {
+      @include hover-focus() {
+        color: $color;
+        background-color: $background;
+        filter: opacity(.9);
+      }
+
+      &.active {
+        color: $white;
+        background-color: $color;
+        border-color: $color;
+      }
+    }
+  }
+}

scss/core/bootstrap-override/mixins/_text-emphasis.scss

@@ -0,0 +1,20 @@
+// stylelint-disable declaration-no-important
+
+// Typography
+
+@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    color: $color !important;
+  }
+
+  @if $emphasized-link-hover-darken-percentage != 0 {
+    a#{$parent} {
+      @include hover-focus() {
+        color: $color !important;
+        filter: brightness($emphasized-link-hover-darken-percentage);
+      }
+    }
+  }
+
+  @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
+}

scss/core/core.scss

@@ -2,6 +2,7 @@
 @import "functions";
 @import "variables";
 @import "~bootstrap/scss/mixins";
+@import "./bootstrap-override/mixins";
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
 @import "typography";