diff --git a/docs/presentations/revealjs/themes.qmd b/docs/presentations/revealjs/themes.qmd index 6b82b4862..f5bae7322 100644 --- a/docs/presentations/revealjs/themes.qmd +++ b/docs/presentations/revealjs/themes.qmd @@ -99,13 +99,10 @@ Here is the source code for all of the built-in themes for inspiration and examp Here's a list of all Sass variables (and their default values) used by Reveal themes. Note that some variables are defined using other variables, and several of the color variables use the `lighten()` Sass function to create a lighter variant of another color. +### Colors + | Variable | Default | |----------------------------------------|------------------------------------------| -| `$font-family-sans-serif` | "Source Sans Pro", Helvetica, sans-serif | -| `$font-family-monospace` | monospace | -| `$presentation-font-size-root` | 40px | -| `$presentation-font-smaller` | 0.7 | -| `$presentation-line-height` | 1.3 | | `$body-bg` | #fff | | `$body-color` | #222 | | `$text-muted` | lighten(\$body-color, 50%) | @@ -113,36 +110,71 @@ Here's a list of all Sass variables (and their default values) used by Reveal th | `$link-color-hover` | lighten(\$link-color, 15%) | | `$selection-bg` | lighten(\$link-color, 25%) | | `$selection-color` | \$body-bg | -| `$border-color` | lighten(\$body-color, 30%) | -| `$border-width` | 1px | -| `$border-radius` | 3px | +| `$light-bg-text-color` | #222 | +| `$light-bg-link-color` | #2a76dd | +| `$light-bg-code-color` | #4758ab | +| `$dark-bg-text-color` | #fff | +| `$dark-bg-link-color` | #42affa | +| `$dark-bg-code-color` | #ffa07a | + +### Fonts + +| Variable | Default | +|----------------------------------------|------------------------------------------| +| `$font-family-sans-serif` | "Source Sans Pro", Helvetica, sans-serif | +| `$font-family-monospace` | monospace | +| `$presentation-font-size-root` | 40px | +| `$presentation-font-smaller` | 0.7 | +| `$presentation-line-height` | 1.3 | + +### Headings + +| Variable | Default | +|----------------------------------------|------------------------------------------| +| `$presentation-h1-font-size` | 2.5em | +| `$presentation-h2-font-size` | 1.6em | +| `$presentation-h3-font-size` | 1.3em | +| `$presentation-h4-font-size` | 1em | | `$presentation-heading-font` | \$font-family-sans-serif | | `$presentation-heading-color` | \$body-color | | `$presentation-heading-line-height` | 1.2 | | `$presentation-heading-letter-spacing` | normal | | `$presentation-heading-text-transform` | none | | `$presentation-heading-text-shadow` | none | -| `$presentation-h1-text-shadow` | none | | `$presentation-heading-font-weight` | 600 | -| `$presentation-h1-font-size` | 2.5em | -| `$presentation-h2-font-size` | 1.6em | -| `$presentation-h3-font-size` | 1.3em | -| `$presentation-h4-font-size` | 1em | -| `$presentation-block-margin` | 12px | -| `$presentation-slide-text-align` | left | -| `$presentation-title-slide-text-align` | center | +| `$presentation-h1-text-shadow` | none | + +### Code Blocks + +| Variable | Default | +|----------------------------------------|------------------------------------------| | `$code-block-bg` | \$body-bg | | `$code-block-border-color` | lighten(\$body-color, 60%) | | `$code-block-font-size` | 0.55em | + +### Inline Code + +| Variable | Default | +|----------------------------------------|------------------------------------------| | `$code-color` | var(--quarto-hl-fu-color) | | `$code-bg` | transparent | + +### Tabsets + +| Variable | Default | +|----------------------------------------|------------------------------------------| | `$tabset-border-color` | \$code-block-border-color | -| `$light-bg-text-color` | #222 | -| `$light-bg-link-color` | #2a76dd | -| `$light-bg-code-color` | #4758ab | -| `$dark-bg-text-color` | #fff | -| `$dark-bg-link-color` | #42affa | -| `$dark-bg-code-color` | #ffa07a | + +### Layout + +| Variable | Default | +|----------------------------------------|------------------------------------------| +| `$border-color` | lighten(\$body-color, 30%) | +| `$border-width` | 1px | +| `$border-radius` | 3px | +| `$presentation-block-margin` | 12px | +| `$presentation-slide-text-align` | left | +| `$presentation-title-slide-text-align` | center | You'll notice that some of the Sass variables use a `presentation-` prefix and some do not. The `presentation-` prefixed variables are specific to presentations, whereas the other variables are the same as ones used for standard Quarto [HTML Themes](../../output-formats/html-themes.qmd).