link are no more underlined by default

[cderv]

I think this is a regression Quarto 1.6 compared to Quarto 1.5 due to this

• forward link variables to SCSS #11281

to support brand feature regarding typography on link

• Implement brand.typography.link for HTML formats #11254

The default has been changed to inherit

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

Line 272 in 88819d5

$link-decoration: inherit !default;

which overwrite previous rule set by bootstrap

quarto-cli/src/resources/formats/html/bootstrap/dist/scss/_variables.scss

Line 462 in 88819d5

$link-decoration: underline !default;

Originally posted by @cderv in #11496 (comment)

---
title: Test
format: html
---

Link to [quarto.org](https://quarto.org)

Quarto 1.6

Quarto 1.5

[cderv]

@cscheid is that intended change on our HTML default for brand to match other format ?

[gadenbuie]

I think it's very likely that instead of

$link-decoration: inherit !default;

you'd want to use

$link-decoration: null !default;

That's especially true if we were previously not setting a { text-decoration: $link-decoration; }.

[cderv]

This rule is set by bootstrap in _reboot.scss so it was set previously

quarto-cli/src/resources/formats/html/bootstrap/dist/scss/_reboot.scss

Line 256 in 88819d5

text-decoration: $link-decoration;

And it was used with own bootstrap defined default value

quarto-cli/src/resources/formats/html/bootstrap/dist/scss/_variables.scss

Line 462 in 88819d5

$link-decoration: underline !default;

But now the rule is set by us too
https://github.com/quarto-dev/quarto-cli/blob/88819d5b9f092381d5d20a146ac3121dc2435acc/src/resources/formats/html/bootstrap/_bootstrap-rules.scss#L2173-L2179

and the variable apply before bootstrap one

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

Line 272 in 88819d5

$link-decoration: inherit !default;

$link-decoration: null !default;

What does null do ? Will it still get the bootstrap default one ? 🤔

[gadenbuie]

IIUC the goal of defining $link-decoration in _bootstrap-variables.scss is to make sure it is defined before it's used, in particular because _bootstrap-variables.scss are used in revealjs without the rest of the Bootstrap stylesheets.

If I'm right about that, then $link-decoration: null !default is the right move here. It defines the variable without interfering with default order. I.e. it's at least defined but a !default before or after will take precedence.

// Bootstrap: _variables.scss
$def: bootstrap !default;

// Quarto _bootstrap-variables.scss
$def: null !default;

a {
  text-decoration: #{$def}
}

It's something like the above snippet, if Bootstrap's _variables.scss are included, the rule has Bootstrap's default. If not (comment out the bootstrap line), then text-decoration isn't set and there aren't Sass compilation errors. If you didn't define $def at all, then the sheet fails to compile. (Try it here

[cscheid]

This is not an intentional change! (Ah, to have good visual testing 🫠)

It's just a matter of replacing inherit with null in that line, right? Let's just do it.

[cderv]

in particular because _bootstrap-variables.scss are used in revealjs without the rest of the Bootstrap stylesheets.

@gadenbuie _bootstrap-variables.scss is not used in reveals format. No bootstrap related file should be used. Only quarto one could be common, and otherwise, this is some reveal only them file.

This is the case here where it has been added in

quarto-cli/src/resources/formats/revealjs/quarto.scss

Line 24 in 88819d5

$link-decoration: inherit !default;

And in revealjs, links are not underlined by default so this is not a visible change; Revealjs sets it to none in its common theme

quarto-cli/src/resources/formats/revealjs/reveal/css/theme/template/theme.scss

Lines 268 to 272 in 88819d5

	.reveal a {
	color: var(--r-link-color);
	text-decoration: none;
	transition: color .15s ease;
	}

The new rules will make the element inherit from parent element and so it could be underline or not. 🤷

Also Regarding your example, I believe the layering that happens in quarto is this one

// Quarto _bootstrap-variables.scss
$def: null !default;

// Bootstrap: _variables.scss
$def: bootstrap !default;

a {
  text-decoration: #{$def}
}

it seems to also work.

though it seems to me that as $link-decoration is already bootstrap variable

• we don't need to define a new rule for brand when in a bootstrap document
• we need to do it for revealjs, and maybe default to revealjs own default ?

Revealjs theme doesn't use a variable for this but we could also start patching completely the revealjs themes so that it behaves closer to boostrap on all the pieces we need for brand.