RFS incorrectly applied on body

Created by: AdrianRichardson

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

In Bootstrap 5.1.3, the use of @include font-size() to set a responsive font size to body in _reboot.scss (line 52) is not working.

The value being passed to font-size(), ie var(--#{$variable-prefix}body-font-size), is not something that the rfs() functions consider to be numeric. With the change in commit 4d7911a27bf9591c1f4dee53fe0b1f053646d0fd, when compiling you can no longer have a responsive value on body based on the $font-size-base SCSS variable, you now have to override the CSS custom property --bs-body-font-size.

I think moving the font-size()/rfs() function from _reboot.scss to _root.scss (line 44) should fix this, so instead of

:root {
  --#{$variable-prefix}body-font-size: #{$font-size-base};
}
body {
  @include font-size(var(--#{$variable-prefix}body-font-size));
}

you would have

:root {
  @include rfs($font-size-base, --#{$variable-prefix}body-font-size);
}
body {
  font-size: var(--#{$variable-prefix}body-font-size); 
}

Reduced test cases

CodePen showing how the existing approach for RFS on body compares with the proposed solution

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

v5.1.3