feat(html): --quarto-border-radius follows Bootstrap's $enable-rounded

[gadenbuie]

Updates Quarto's Sass rules to set --quarto-border-radius following Bootstrap's $enable-rounded option flag, i.e. not setting Quarto's CSS var if $enable-rounded is not true.

I was wanting hard edges for code blocks and noticed that div.sourceCode uses $border-radius instead of --quarto-border-radius, so I updated that rule as well.

[cscheid]

Do you think we can solve this by defining variables with !default instead? That's a little more amenable to static analysis and I hope to lean more into that for helping future users debug their SCSS.

[gadenbuie]

Do you think we can solve this by defining variables with !default instead?

Solve which part with variables? Quarto sets $border-radius here

quarto-cli/src/resources/formats/html/_quarto-variables.scss

Line 10 in b8093a9

$border-radius: 4px !default;

but the problem is that $enable-rounded is a Bootstrap Sass variable. We can pull that into Quarto's variables if you want.

Or maybe you mean that I replaced $border-radius with the CSS variable here?

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

Line 838 in b8093a9

border-radius: var(--quarto-border-radius);

If that file is only used in a Bootstrap context (seems like it is), we could also use $enable-rounded there to gate setting border-radius.

[cderv]

If that file is only used in a Bootstrap context (seems like it is)

Which file were you talking about ?

FWIW _quarto-rules.scss is used in non bootstrap context too

quarto-cli/src/format/html/format-html-shared.ts

Lines 177 to 181 in 2bc956a

	export const quartoRules = () =>
	Deno.readTextFileSync(formatResourcePath(
	"html",
	"_quarto-rules.scss",
	));

Used in non bootstrap layer

quarto-cli/src/format/html/format-html-shared.ts

Line 265 in 2bc956a

const rules: string[] = [quartoRules()];

and on bootstrap layers

quarto-cli/src/format/html/format-html-scss.ts

Lines 83 to 84 in 2bc956a

	const rules = [
	quartoRules(),

Se we just need to be sure we don't add anything bootstrap related.

[gadenbuie]

If that file is only used in a Bootstrap context (seems like it is)

Which file were you talking about ?

I was talking about src/resources/formats/html/bootstrap/_bootstrap-rules.scss, which from its name appears to be Bootstrap-only. But also it passed the smoke tests without throwing, which is a good sign, whereas before my use of $enable-rounded in _quarto-rules.scss caused smoke test failures.

[cscheid]

@gadenbuie Sorry, I should have been clearer in my original message.

I'd prefer to solve these kinds of conditional behavior without having to resort to @if statements and variable-exists checks. I say this because the tooling we are building to help people debug SCSS tracks dependencies of variable assignments, and that tracking is a lot simpler when the variables always exist and have a default value.

So, instead of those @if statements, would it be possible to have variable declarations that look like this, more or less?

$enable-rounded: true !default;
$border-radius: if($enable-rounded == true, <whatever-the-default-value>, 0) !default;

The idea is that if someone overrides $enable-rounded or $border-radius by setting new values, we can track and display it in our debugging tools.

[gadenbuie]

We could add $enable-rounded but you wouldn't want to overwrite $border-radius. Maybe you'd add a new $border-rounded variable that looks like your definition of $border-radius conditioned on $enable-rounded.

The reason that you wouldn't want to set $border-radius to 0 is because $border-radius is intended to be part of a set of border radius sizes. The way Bootstrap uses $enable-rounded is to gate border radius settings (e.g. with the border-radius mixin) but users still expect to have $border-radius as part of a set of border radius steps.

[cscheid]

Ok, thanks for the additional context and expertise. I retract my concerns.

[cderv]

I was talking about src/resources/formats/html/bootstrap/_bootstrap-rules.scss, which from its name appears to be Bootstrap-only.

@gadenbuie yes bootstrap only for this one. 👌