value_box() style adjustments (top-right and value font size)

[gadenbuie]

Two adjustments I've recently used in an app are:

1. Have the value of a showcase_layout = "top right" value box take up the entire value box width with

   .bslib-value-box.showcase-top-right .value-box-grid .value-box-area {
     grid-column: 1 / 3;
   }

2. Use the container query width to drive the value font-size, rather than the viewport width (it currently uses something like font-size: 1.325rem + .9vw).

   .bslib-value-box .value-box-value {
     font-size: calc(1rem + 3cqi);
   }

   With this rule, the width of the value box itself drives the font size of the value, so the value shrinks and grows proportional to the value box width.

[gadenbuie]

The font-size comes from applying Bootstraps h2 and h6 font and spacing styles. I think we should stick with that.

bslib/inst/components/scss/value_box.scss

Lines 84 to 98 in 00a7508

	.value-box-title {
	@include bootstrap-heading-font-and-spacing($h6-font-size);
	// add a non-breaking space to ensure it's not 0 height
	&:empty::after {
	content: '\00a0 '
	}
	}
	.value-box-value {
	@include bootstrap-heading-font-and-spacing($h2-font-size);
	// add a non-breaking space to ensure it's not 0 height
	&:empty::after {
	content: '\00a0 '
	}
	}

[gadenbuie]

Oh and actually, a better way to approach the width of the top-right showcase is to adjust the showcase width, e.g. showcase = showcase_top_right(width = 0.3).