From e9f7a1d826a9bae2d791345d0519b0c1a5c796f0 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Tue, 9 Jun 2020 10:20:53 +0200
Subject: [PATCH] Fix undefined custom properties in reboot (#30981)

---
 scss/_reboot.scss          | 2 +-
 scss/_variables.scss       | 3 ++-
 scss/bootstrap-reboot.scss | 3 +++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 882ee573ea..85306b9429 100644
--- 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 eeece96c02..2af7461a00 100644
--- 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 96948be63d..3779e36dc5 100644
--- 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";