Make ioslides_presentation() more themable via {bslib} and {sass}

[cpsievert]

This PR makes ioslides_presentation()'s CSS more aware of bslib::bs_theme()'s main colors & fonts. That is, you can now customize the main colors and fonts in the CSS behind ioslides_presentation() in a similar way to how we can now customize the Bootstrap CSS behind html_document() via {bslib}, for example:

---
title: "Hello themed IO Slides!"
output: 
  ioslides_presentation:
    theme:
      bg: "#101010"
      fg: "#FDF7F7"
      primary: "#ED79F9"
      base_font: !expr bslib::font_google("Prompt")
      code_font: !expr bslib::font_google("JetBrains Mono")
---

```{r setup, include=FALSE}
thematic::thematic_rmd()
```

## R Markdown

This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document.

Some inline `code`.

## Slide with Bullets

- Bullet 1
- Bullet 2
- Bullet 3

## Slide with R Output

```{r cars, echo = TRUE}
summary(cars)
```

## Slide with Plot

```{r pressure}
plot(pressure)
```

This also works with bslib+shiny's "real-time" theming capabilities:

---
title: "Hello themed IO Slides!"
output: 
 ioslides_presentation:
   theme: !expr bslib::bs_theme()
runtime: shiny
---

```{r setup, include=FALSE}
bslib::bs_themer()
thematic::thematic_shiny()
```

## R Markdown

This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document.

Some inline `code`.

## Slide with Bullets

- Bullet 1
- Bullet 2
- Bullet 3

## Slide with R Output

```{r cars, echo = TRUE}
summary(cars)
```

## Slide with Plot

```{r pressure}
renderPlot({
 plot(pressure)
})
```

[cpsievert]

@cderv @yihui this one should be ready to merge if you feel it's worth taking on (and happy to answer any questions!)

[apreshill]

Hi @cpsievert -

This works nicely for me- thank you! I'm confused about how to change the text color though. I have:

---
title: "Hello themed IO Slides!"
output: 
  ioslides_presentation:
    theme:
      bg: "#f3e0e1"
      fg: "#0144a3"
      primary: "#0144a3"
      base_font: !expr bslib::font_google("Lato")
      heading_font: !expr bslib::font_google("Petrona")
      code_font: !expr bslib::font_google("DM Mono")
---

But in my knitted slides, the text is:

.title-slide hgroup h1 {
    font-size: 65px;
    line-height: 1.4;
    letter-spacing: -3px;
    color: #5f81bb; <- not my color
}

I am new to bslib, but looking at the docs it seems that fg should be affecting the color.

[cderv]

@apreshill the CSS rule that will be processed by sass is this one:

.title-slide hgroup h1 {
  font-size: 65px;
  line-height: 1.4;
  letter-spacing: -3px;
  color: mix($body-bg, $body-color, 32%);
}

So color is a mix of bg and fg provided.

What was the color you expected ? Does the mix does not correspond ?

As a side note, I tried to test using this code, but it does not output the same color 😅 It must be more complexe than that with other variables in the mix.

> sass::sass(
+ list(list(`body-bg` = "#f3e0e1", `body-color` = "#0144a3"),
+ ".title-slide hgroup h1 {
+   font-size: 65px;
+   line-height: 1.4;
+   letter-spacing: -3px;
+   color: mix($body-bg, $body-color, 32%);
+ }"))
/* CSS */
.title-slide hgroup h1 {
  font-size: 65px;
  line-height: 1.4;
  letter-spacing: -3px;
  color: #4e76b7;
}

[cpsievert]

We don't really use bootstrap 4 here but only some of its variables that were integrated into the default.scss so that we can render a custom css. Is that right?

Yep, this PR is currently tying the ioslide's Sass variables to Bootstrap Sass variables, allowing us to compile the ioslide Sass with Bootstrap's variables. Thus, there is some implied risk that Bootstrap variables will change in a future version, but the variables we're listening to here ($body-bg, $body-color, etc) are so fundamental that I don't foresee that happening.

Would sass alone would have been enough to achieve the same?

No, but this is a direction worth thinking more seriously about, especially for Bootstrap-less HTML formats like ioslides, html_vignette, etc. Setting up a Sass-based color system that works without Bootstrap would be easy enough for this format, but you'd lose the font file importing that font_google()/font_link() provides. I've been thinking, though, that we should probably provide similar functions in the {sass} package itself.

But we use bs_dependency here, so does this mean that all bootstrap is available in ioslide document ?

Yea, that was the main thing I was torn about in this PR. That is, currently if you provide a theme, then you also get all of Bootstrap included, and there is currently no way to opt-out of that behavior. Seems like it'd be better to not include Bootstrap when theme is provided (for Bootstrap-less HTML formats like ioslides, html_vignette, etc), but have another argument to opt-in to including Bootstrap as well. Give me some time to think about this and we'll revisit this format as well as html_vignette in a future version of {rmarkdown}

When using thematic_shiny with your example, I have a bunch of warning in the R Markdown pane:

You're seeing https://github.com/rstudio/bslib/issues/242

[cderv]

Give me some time to think about this and we'll revisit this format as well as html_vignette in a future version of {rmarkdown}

No problem. We are not in a hurry for this, and I think we need to it right for those Bootstrap-less format to make it easy to use and easy to teach. Let's revisit later then and get some more feedback in the meantime.