Skip to content

Commit

Permalink
Merge pull request #833 from EmilHvitfeldt/revealjs-sass-split-table
Browse files Browse the repository at this point in the history 
split up revealjs sass variables table into multiple
  • Loading branch information
@jjallaire
jjallaire authored Sep 21, 2023
2 parents 2096647 + dee78fb commit 1d8e820
Showing 1 changed file with 54 additions and 22 deletions.
76 changes: 54 additions & 22 deletions docs/presentations/revealjs/themes.qmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,50 +99,82 @@ 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%) |
| `$link-color` | #2a76dd |
| `$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).

Expand Down

0 comments on commit 1d8e820

Please sign in to comment.