Use custom properties for font-stacks (#30509)

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

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index a872c6bb9ac42ef0a44a643f1ff4d71ac37428ad..c02eec7b3e466dcc547d07250ddc9527b55deb2e 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -441,7 +441,7 @@ $utilities: map-merge(
     "font-family": (
       property: font-family,
       class: font,
-      values: (monospace: $font-family-monospace)
+      values: (monospace: var(--font-family-monospace))
     ),
     "user-select": (
       property: user-select,

diff --git a/scss/_variables.scss b/scss/_variables.scss
index ec1ba224dea1b663591bf3cf6c2f5229ecfeb400..6123f3ce1dd192e2d760a0ecd73bb16da14e73cf 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -369,7 +369,7 @@ $embed-responsive-aspect-ratios: (
 // stylelint-disable value-keyword-case
 $font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "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:            $font-family-sans-serif !default;
+$font-family-base:            var(--font-family-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