Add bs- prefixes to custom properties (#30591)

scss/_reboot.scss

@@ -283,7 +283,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: var(--font-family-monospace);
+  font-family: var(--bs-font-monospace);
   @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
 }
 

scss/_root.scss

@@ -1,15 +1,15 @@
 :root {
   // Custom variable values only support SassScript inside `#{}`.
   @each $color, $value in $colors {
-    --#{$color}: #{$value};
+    --bs-#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-colors {
-    --#{$color}: #{$value};
+    --bs-#{$color}: #{$value};
   }
 
   // Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
-  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
+  --bs-font-sans-serif: #{inspect($font-family-sans-serif)};
-  --font-family-monospace: #{inspect($font-family-monospace)};
+  --bs-font-monospace: #{inspect($font-family-monospace)};
 }

scss/_utilities.scss

@@ -441,7 +441,7 @@ $utilities: map-merge(
     "font-family": (
       property: font-family,
       class: font,
-      values: (monospace: var(--font-family-monospace))
+      values: (monospace: var(--bs-font-monospace))
     ),
     "user-select": (
       property: user-select,

scss/_variables.scss

@@ -376,7 +376,7 @@ $embed-responsive-aspect-ratios: (
 // stylelint-disable value-keyword-case
 $font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-$font-family-base:            var(--font-family-sans-serif) !default;
+$font-family-base:            var(--bs-font-sans-serif) !default;
 // stylelint-enable value-keyword-case
 
 // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins

scss/mixins/_grid.scss

@@ -3,13 +3,13 @@
 // Generate semantic grid columns with these mixins.
 
 @mixin make-row($gutter: $grid-gutter-width) {
-  --grid-gutter-x: #{$gutter};
+  --bs-gutter-x: #{$gutter};
-  --grid-gutter-y: 0;
+  --bs-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
-  margin-top: calc(var(--grid-gutter-y) * -1); // stylelint-disable-line function-blacklist
+  margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-blacklist
-  margin-right: calc(var(--grid-gutter-x) / -2); // stylelint-disable-line function-blacklist
+  margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
-  margin-left: calc(var(--grid-gutter-x) / -2); // stylelint-disable-line function-blacklist
+  margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -21,9 +21,9 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--grid-gutter-x) / 2); // stylelint-disable-line function-blacklist
+  padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist
-  padding-left: calc(var(--grid-gutter-x) / 2); // stylelint-disable-line function-blacklist
+  padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist
-  margin-top: var(--grid-gutter-y);
+  margin-top: var(--bs-gutter-y);
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
@@ -104,12 +104,12 @@
       @each $key, $value in $gutters {
         .g#{$infix}-#{$key},
         .gx#{$infix}-#{$key} {
-          --grid-gutter-x: #{$value};
+          --bs-gutter-x: #{$value};
         }
 
         .g#{$infix}-#{$key},
         .gy#{$infix}-#{$key} {
-          --grid-gutter-y: #{$value};
+          --bs-gutter-y: #{$value};
         }
       }
     }

site/content/docs/4.3/getting-started/theming.md

@@ -399,7 +399,7 @@ Should you need to modify your `$grid-breakpoints`, your changes will apply to a
 
 ## CSS variables
 
-Bootstrap 4 includes around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's Inspector, a code sandbox, or general prototyping.
+Bootstrap 4 includes around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS. These provide easy access to commonly used values like our theme colors and primary font stacks when working in your browser's Inspector, a code sandbox, or general prototyping. All our custom properties are prefixed with `bs-` to avoid conflicts with third party CSS.
 
 ### Available variables
 
@@ -425,9 +425,9 @@ CSS variables offer similar flexibility to Sass's variables, but without the nee
 
 {{< highlight css >}}
 body {
-  font: 1rem/1.5 var(--font-family-sans-serif);
+  font: 1rem/1.5 var(--bs-font-sans-serif);
 }
 a {
-  color: var(--blue);
+  color: var(--bs-blue);
 }
 {{< /highlight >}}