Fix undefined custom properties in reboot (#30981)

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 882ee573ead05880da98f9a035bfd1830802dbd7..85306b9429b90759aeee8be2ab89bb9a6fcd7fe6 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -283,7 +283,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: var(--bs-font-monospace);
+  font-family: $font-family-code;
   @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index eeece96c024113b629fb8af7d95059def7b6c822..2af7461a0048c17a61d216e15bb8fef539cc0d6e 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -385,8 +385,9 @@ $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(--bs-font-sans-serif) !default;
 // stylelint-enable value-keyword-case
+$font-family-base:            var(--bs-font-sans-serif) !default;
+$font-family-code:            var(--bs-font-monospace) !default;
 
 // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
 // $font-size-base effects the font size of the body text

diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss
index 96948be63d21cc787d8a4d8b8ddcc2a8e07534e4..3779e36dc51c666c8282533ad4efc282eb5466bd 100644 (file)
--- a/scss/bootstrap-reboot.scss
+++ b/scss/bootstrap-reboot.scss
@@ -8,5 +8,8 @@
 
 @import "functions";
 @import "variables";
+// Prevent the usage of custom properties since we don't add them to `:root` in reboot
+$font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default
+$font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default
 @import "mixins";
 @import "reboot";