Document CSS variables

NEWS.md

@@ -23,6 +23,13 @@
   
 * The underlying template now uses the `whisker` package.
 
+* xaringanthemer styles now use CSS variables throughout. Most of the settings 
+  used in defining a style are stored in CSS variables. The variable names are
+  documented in their corresponding arguments. For example, the color selected
+  for `background_color` is stored in the variable `--background-color`. These
+  variables can be used in custom CSS rules or in other arguments in any style
+  functions, for example as `var(--background-color)`.
+
 * xaringanthemer now uses a different set of default fonts for heading and body
   fonts. The new defaults use [Cabin](https://fonts.google.com/specimen/Cabin)
   for headings and [Noto Sans](https://fonts.google.com/specimen/Noto+Sans) for

R/style_solarized_dark.R

@@ -1,148 +1,286 @@
 # Generated by inst/scripts/generate_theme_functions.R: do not edit by hand
 
 #' @param text_color Text Color. Defaults to #839496. Modifies the `body`
-#'   element.
+#'   element. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(--text_color)` in any argument of a style
+#'   function or in custom CSS.
 #' @param header_color Header Color. Defaults to #dc322f. Modifies the
-#'   `h1, h2, h3` elements.
+#'   `h1, h2, h3` elements. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--header-color)` in any argument
+#'   of a style function or in custom CSS.
 #' @param background_color Slide Background Color. Defaults to #002b36.
-#'   Modifies the `.remark-slide-content` class.
+#'   Modifies the `.remark-slide-content` class. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with
+#'   `var(--background-color)` in any argument of a style function or in custom
+#'   CSS.
 #' @param link_color Link Color. Defaults to #b58900. Modifies the
-#'   `a, a > code` elements.
+#'   `a, a > code` elements. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--link-color)` in any argument
+#'   of a style function or in custom CSS.
 #' @param text_bold_color Bold Text Color. Defaults to #d33682. Modifies the
-#'   `strong` element.
+#'   `strong` element. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--text-bold-color)` in any
+#'   argument of a style function or in custom CSS.
 #' @param text_slide_number_color Slide Number Color. Defaults to #586e75.
-#'   Modifies the `.remark-slide-number` class.
+#'   Modifies the `.remark-slide-number` class. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param padding Slide Padding in `top right [bottom left]` format. Defaults
-#'   to 16px 64px 16px 64px. Modifies the `.remark-slide-content` class.
+#'   to 16px 64px 16px 64px. Modifies the `.remark-slide-content` class. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param background_image Background image applied to each *and every* slide.
 #'   Set `title_slide_background_image = "none"` to remove the background image
 #'   from the title slide. Defaults to `NULL`. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param background_size Background image size, requires `background_image` to
 #'   be set. If `background_image` is set, `background_size` will default to
 #'   `cover` so the backround fills the screen. If both `background_image` and
 #'   `background_position` are set, will default to 100 percent. Defaults to
-#'   `NULL`. Modifies the `.remark-slide-content` class.
+#'   `NULL`. Modifies the `.remark-slide-content` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param background_position Background image position, requires
 #'   `background_image` to be set, and it is recommended to adjust
 #'   `background_size`. Defaults to `NULL`. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param code_highlight_color Code Line Highlight. Defaults to #268bd240.
-#'   Modifies the `.remark-code-line-highlighted` class.
+#'   Modifies the `.remark-code-line-highlighted` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--code-highlight-color)` in any argument of a style function or in
+#'   custom CSS.
 #' @param code_inline_color Inline Code Color. Defaults to #6c71c4. Modifies
-#'   the `.remark-inline-code` class.
+#'   the `.remark-inline-code` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param code_inline_background_color Inline Code Background Color. Defaults
-#'   to `NULL`. Modifies the `.remark-inline-code` class.
+#'   to `NULL`. Modifies the `.remark-inline-code` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param code_inline_font_size Inline Code Text Font Size. Defaults to 1em.
-#'   Modifies the `.remark-inline-code` class.
+#'   Modifies the `.remark-inline-code` class. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with
+#'   `var(--code-inline-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param inverse_background_color Inverse Background Color. Defaults to
-#'   #fdf6e3. Modifies the `.inverse` class.
+#'   #fdf6e3. Modifies the `.inverse` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--inverse-background-color)` in any argument of a style function or
+#'   in custom CSS.
 #' @param inverse_text_color Inverse Text Color. Defaults to #002b36. Modifies
-#'   the `.inverse` class.
+#'   the `.inverse` class. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--inverse-text-color)` in any
+#'   argument of a style function or in custom CSS.
 #' @param inverse_text_shadow Enables Shadow on text of inverse slides.
-#'   Defaults to `FALSE`. Modifies the `.inverse` class.
+#'   Defaults to `FALSE`. Modifies the `.inverse` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param inverse_header_color Inverse Header Color. Defaults to
 #'   `inverse_text_color`. Modifies the `.inverse h1, .inverse h2, .inverse h3`
-#'   classes.
+#'   classes. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(--inverse-header-color)` in any argument of a
+#'   style function or in custom CSS.
 #' @param title_slide_text_color Title Slide Text Color. Defaults to
-#'   `inverse_text_color`. Modifies the `.title-slide` class.
+#'   `inverse_text_color`. Modifies the `.title-slide` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--title-slide-text-color)` in any argument of a style function or in
+#'   custom CSS.
 #' @param title_slide_background_color Title Slide Background Color. Defaults
-#'   to `inverse_background_color`. Modifies the `.title-slide` class.
+#'   to `inverse_background_color`. Modifies the `.title-slide` class. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(--title-slide-background-color)` in any argument of a
+#'   style function or in custom CSS.
 #' @param title_slide_background_image Title Slide Background Image URL.
-#'   Defaults to `NULL`. Modifies the `.title-slide` class.
+#'   Defaults to `NULL`. Modifies the `.title-slide` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param title_slide_background_size Title Slide Background Image Size,
 #'   defaults to "cover" if background image is set. Defaults to `NULL`.
-#'   Modifies the `.title-slide` class.
+#'   Modifies the `.title-slide` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param title_slide_background_position Title Slide Background Image
-#'   Position. Defaults to `NULL`. Modifies the `.title-slide` class.
+#'   Position. Defaults to `NULL`. Modifies the `.title-slide` class. The value
+#'   of this variable is also stored as a CSS variable that can be referenced
+#'   with `var(NA)` in any argument of a style function or in custom CSS.
 #' @param footnote_color Footnote text color (if `NA`, then it will be the same
 #'   color as `text_color`). Defaults to `NULL`. Modifies the `.footnote`
-#'   class.
+#'   class. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(NA)` in any argument of a style function or in
+#'   custom CSS.
 #' @param footnote_font_size Footnote font size. Defaults to 0.9em. Modifies
-#'   the `.footnote` class.
+#'   the `.footnote` class. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(NA)` in any argument of a style
+#'   function or in custom CSS.
 #' @param footnote_position_bottom Footnote location from bottom of screen.
-#'   Defaults to 60px. Modifies the `.footnote` class.
+#'   Defaults to 60px. Modifies the `.footnote` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param left_column_subtle_color Left Column Text (not last). Defaults to
-#'   #586e75. Modifies the `.left-column h2, .left-column h3` classes.
+#'   #586e75. Modifies the `.left-column h2, .left-column h3` classes. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param left_column_selected_color Left Column Current Selection. Defaults to
 #'   #93a1a1. Modifies the
-#'   `.left-column h2:last-of-type, .left-column h3:last-child` classes.
+#'   `.left-column h2:last-of-type, .left-column h3:last-child` classes. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param blockquote_left_border_color Blockquote Left Border Color. Defaults
-#'   to #cb4b16. Modifies the `blockquote` element.
+#'   to #cb4b16. Modifies the `blockquote` element. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with `var(NA)` in
+#'   any argument of a style function or in custom CSS.
 #' @param table_border_color Table top/bottom border. Defaults to #657b83.
-#'   Modifies the `table: border-top, border-bottom` elements.
+#'   Modifies the `table: border-top, border-bottom` elements. The value of
+#'   this variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param table_row_border_color Table row inner bottom border. Defaults to
-#'   #657b83. Modifies the `table thead th: border-bottom` elements.
+#'   #657b83. Modifies the `table thead th: border-bottom` elements. The value
+#'   of this variable is also stored as a CSS variable that can be referenced
+#'   with `var(NA)` in any argument of a style function or in custom CSS.
 #' @param table_row_even_background_color Table Even Row Background Color.
 #'   Defaults to #073642. Modifies the `thead, tfoot, tr:nth-child(even)`
-#'   elements.
+#'   elements. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(NA)` in any argument of a style function or in
+#'   custom CSS.
 #' @param base_font_size Base Font Size for All Slide Elements (must be `px`).
-#'   Defaults to 20px. Modifies the `html` element.
+#'   Defaults to 20px. Modifies the `html` element. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--base-font-size)` in any argument of a style function or in custom
+#'   CSS.
 #' @param text_font_size Slide Body Text Font Size. Defaults to 1rem. Modifies
-#'   the `.remark-slide-content` class.
+#'   the `.remark-slide-content` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--text-font-size)` in any argument of a style function or in custom
+#'   CSS.
 #' @param header_h1_font_size h1 Header Text Font Size. Defaults to 2.75rem.
-#'   Modifies the `.remark-slide-content h1` class.
+#'   Modifies the `.remark-slide-content h1` class. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--header-h1-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_h2_font_size h2 Header Text Font Size. Defaults to 2.25rem.
-#'   Modifies the `.remark-slide-content h2` class.
+#'   Modifies the `.remark-slide-content h2` class. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--header-h2-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_h3_font_size h3 Header Text Font Size. Defaults to 1.75rem.
-#'   Modifies the `.remark-slide-content h3` class.
+#'   Modifies the `.remark-slide-content h3` class. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--header-h3-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_background_auto Add background under slide title automatically
 #'   for h1 header elements. If not enabled, use `class: header_background` to
-#'   enable. Defaults to `FALSE`.
+#'   enable. Defaults to `FALSE`.  The value of this variable is also stored as
+#'   a CSS variable that can be referenced with `var(NA)` in any argument of a
+#'   style function or in custom CSS.
 #' @param header_background_color Background Color for h1 Header with
 #'   Background. Defaults to `header_color`. Modifies the
-#'   `.remark-slide-content h1` class.
+#'   `.remark-slide-content h1` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--header-background-color)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_background_text_color Text Color for h1 Header with
 #'   Background. Defaults to `background_color`. Modifies the
-#'   `.remark-slide-content h1` class.
+#'   `.remark-slide-content h1` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--header-background-text-color)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_background_padding Padding for h1 Header with Background.
-#'   Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
+#'   Defaults to `NULL`. Modifies the `.remark-slide-content h1` class. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param header_background_content_padding_top Top Padding for Content in
 #'   Slide with Header with Background. Defaults to 7rem. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param header_background_ignore_classes Slide Classes Where Header with
 #'   Background will not be Applied. Defaults to
 #'   `c('normal', 'inverse', 'title', 'middle', 'bottom')`. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to
-#'   0.9em. Modifies the `.remark-slide-number` class.
+#'   0.9em. Modifies the `.remark-slide-number` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param text_font_google Use `google_font()` to specify body font. Defaults
-#'   to `NULL`. Modifies the `body` element.
+#'   to `NULL`. Modifies the `body` element. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param text_font_family Body Text Font Family (xaringan default is
-#'   `'Droid Serif'`). Defaults to Noto Sans. Modifies the `body` element.
+#'   `'Droid Serif'`). Defaults to Noto Sans. Modifies the `body` element. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(--text-font-family)` in any argument of a style
+#'   function or in custom CSS.
 #' @param text_font_weight Body Text Font Weight. Defaults to normal. Modifies
-#'   the `body` element.
+#'   the `body` element. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(NA)` in any argument of a style
+#'   function or in custom CSS.
 #' @param text_font_url Body Text Font URL(s). Defaults to
 #'   https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap.
-#'   Modifies the `@import url()` elements.
+#'   Modifies the `@import url()` elements. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param text_font_family_fallback Body Text Font Fallbacks. Defaults to
 #'   -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
 #'   helvetica, Ubuntu, roboto, noto, segoe ui, arial. Modifies the `body`
-#'   element.
+#'   element. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(--text-font-family-fallback)` in any argument
+#'   of a style function or in custom CSS.
 #' @param text_font_base Body Text Base Font (Total Failure Fallback). Defaults
-#'   to sans-serif. Modifies the `body` element.
+#'   to sans-serif. Modifies the `body` element. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with
+#'   `var(--text-font-base)` in any argument of a style function or in custom
+#'   CSS.
 #' @param header_font_google Use `google_font()` to specify header font.
-#'   Defaults to `NULL`. Modifies the `body` element.
+#'   Defaults to `NULL`. Modifies the `body` element. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param header_font_family Header Font Family (xaringan default is
 #'   `'Yanone Kaffeesatz'`). Defaults to Cabin. Modifies the `h1, h2, h3`
-#'   elements.
+#'   elements. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(--header-font-family)` in any argument of a
+#'   style function or in custom CSS.
 #' @param header_font_weight Header Font Weight. Defaults to 600. Modifies the
-#'   `h1, h2, h3` elements.
+#'   `h1, h2, h3` elements. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(NA)` in any argument of a style
+#'   function or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap.
-#'   Modifies the `@import url` elements.
+#'   Modifies the `@import url` elements. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_google Use `google_font()` to specify code font. Defaults
-#'   to `NULL`. Modifies the `body` element.
+#'   to `NULL`. Modifies the `body` element. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_family Code Font Family. Defaults to Source Code Pro.
-#'   Modifies the `.remark-code, .remark-inline-code` classes.
+#'   Modifies the `.remark-code, .remark-inline-code` classes. The value of
+#'   this variable is also stored as a CSS variable that can be referenced with
+#'   `var(--code-font-family)` in any argument of a style function or in custom
+#'   CSS.
 #' @param code_font_size Code Text Font Size. Defaults to 0.9rem. Modifies the
-#'   `.remark-inline` class.
+#'   `.remark-inline` class. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--code-font-size)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_url Code Font URL. Defaults to
 #'   https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap.
-#'   Modifies the `@import url` elements.
+#'   Modifies the `@import url` elements. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_family_fallback Code Font Fallback. Defaults to Menlo,
 #'   Consolas, Monaco, Liberation Mono, Lucida Console. Modifies the
-#'   `.remark-code, .remark-inline-code` classes.
+#'   `.remark-code, .remark-inline-code` classes. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @template theme_params
 #' @template style_solarized_dark
 #' @family Solarized themes

R/style_solarized_light.R

@@ -1,148 +1,286 @@
 # Generated by inst/scripts/generate_theme_functions.R: do not edit by hand
 
 #' @param text_color Text Color. Defaults to #657b83. Modifies the `body`
-#'   element.
+#'   element. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(--text_color)` in any argument of a style
+#'   function or in custom CSS.
 #' @param header_color Header Color. Defaults to #dc322f. Modifies the
-#'   `h1, h2, h3` elements.
+#'   `h1, h2, h3` elements. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--header-color)` in any argument
+#'   of a style function or in custom CSS.
 #' @param background_color Slide Background Color. Defaults to #fdf6e3.
-#'   Modifies the `.remark-slide-content` class.
+#'   Modifies the `.remark-slide-content` class. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with
+#'   `var(--background-color)` in any argument of a style function or in custom
+#'   CSS.
 #' @param link_color Link Color. Defaults to #b58900. Modifies the
-#'   `a, a > code` elements.
+#'   `a, a > code` elements. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--link-color)` in any argument
+#'   of a style function or in custom CSS.
 #' @param text_bold_color Bold Text Color. Defaults to #d33682. Modifies the
-#'   `strong` element.
+#'   `strong` element. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--text-bold-color)` in any
+#'   argument of a style function or in custom CSS.
 #' @param text_slide_number_color Slide Number Color. Defaults to #93a1a1.
-#'   Modifies the `.remark-slide-number` class.
+#'   Modifies the `.remark-slide-number` class. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param padding Slide Padding in `top right [bottom left]` format. Defaults
-#'   to 16px 64px 16px 64px. Modifies the `.remark-slide-content` class.
+#'   to 16px 64px 16px 64px. Modifies the `.remark-slide-content` class. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param background_image Background image applied to each *and every* slide.
 #'   Set `title_slide_background_image = "none"` to remove the background image
 #'   from the title slide. Defaults to `NULL`. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param background_size Background image size, requires `background_image` to
 #'   be set. If `background_image` is set, `background_size` will default to
 #'   `cover` so the backround fills the screen. If both `background_image` and
 #'   `background_position` are set, will default to 100 percent. Defaults to
-#'   `NULL`. Modifies the `.remark-slide-content` class.
+#'   `NULL`. Modifies the `.remark-slide-content` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param background_position Background image position, requires
 #'   `background_image` to be set, and it is recommended to adjust
 #'   `background_size`. Defaults to `NULL`. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param code_highlight_color Code Line Highlight. Defaults to #268bd240.
-#'   Modifies the `.remark-code-line-highlighted` class.
+#'   Modifies the `.remark-code-line-highlighted` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--code-highlight-color)` in any argument of a style function or in
+#'   custom CSS.
 #' @param code_inline_color Inline Code Color. Defaults to #6c71c4. Modifies
-#'   the `.remark-inline-code` class.
+#'   the `.remark-inline-code` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param code_inline_background_color Inline Code Background Color. Defaults
-#'   to `NULL`. Modifies the `.remark-inline-code` class.
+#'   to `NULL`. Modifies the `.remark-inline-code` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param code_inline_font_size Inline Code Text Font Size. Defaults to 1em.
-#'   Modifies the `.remark-inline-code` class.
+#'   Modifies the `.remark-inline-code` class. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with
+#'   `var(--code-inline-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param inverse_background_color Inverse Background Color. Defaults to
-#'   #002b36. Modifies the `.inverse` class.
+#'   #002b36. Modifies the `.inverse` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--inverse-background-color)` in any argument of a style function or
+#'   in custom CSS.
 #' @param inverse_text_color Inverse Text Color. Defaults to #fdf6e3. Modifies
-#'   the `.inverse` class.
+#'   the `.inverse` class. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--inverse-text-color)` in any
+#'   argument of a style function or in custom CSS.
 #' @param inverse_text_shadow Enables Shadow on text of inverse slides.
-#'   Defaults to `FALSE`. Modifies the `.inverse` class.
+#'   Defaults to `FALSE`. Modifies the `.inverse` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param inverse_header_color Inverse Header Color. Defaults to
 #'   `inverse_text_color`. Modifies the `.inverse h1, .inverse h2, .inverse h3`
-#'   classes.
+#'   classes. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(--inverse-header-color)` in any argument of a
+#'   style function or in custom CSS.
 #' @param title_slide_text_color Title Slide Text Color. Defaults to
-#'   `inverse_text_color`. Modifies the `.title-slide` class.
+#'   `inverse_text_color`. Modifies the `.title-slide` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--title-slide-text-color)` in any argument of a style function or in
+#'   custom CSS.
 #' @param title_slide_background_color Title Slide Background Color. Defaults
-#'   to `inverse_background_color`. Modifies the `.title-slide` class.
+#'   to `inverse_background_color`. Modifies the `.title-slide` class. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(--title-slide-background-color)` in any argument of a
+#'   style function or in custom CSS.
 #' @param title_slide_background_image Title Slide Background Image URL.
-#'   Defaults to `NULL`. Modifies the `.title-slide` class.
+#'   Defaults to `NULL`. Modifies the `.title-slide` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param title_slide_background_size Title Slide Background Image Size,
 #'   defaults to "cover" if background image is set. Defaults to `NULL`.
-#'   Modifies the `.title-slide` class.
+#'   Modifies the `.title-slide` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param title_slide_background_position Title Slide Background Image
-#'   Position. Defaults to `NULL`. Modifies the `.title-slide` class.
+#'   Position. Defaults to `NULL`. Modifies the `.title-slide` class. The value
+#'   of this variable is also stored as a CSS variable that can be referenced
+#'   with `var(NA)` in any argument of a style function or in custom CSS.
 #' @param footnote_color Footnote text color (if `NA`, then it will be the same
 #'   color as `text_color`). Defaults to `NULL`. Modifies the `.footnote`
-#'   class.
+#'   class. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(NA)` in any argument of a style function or in
+#'   custom CSS.
 #' @param footnote_font_size Footnote font size. Defaults to 0.9em. Modifies
-#'   the `.footnote` class.
+#'   the `.footnote` class. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(NA)` in any argument of a style
+#'   function or in custom CSS.
 #' @param footnote_position_bottom Footnote location from bottom of screen.
-#'   Defaults to 60px. Modifies the `.footnote` class.
+#'   Defaults to 60px. Modifies the `.footnote` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param left_column_subtle_color Left Column Text (not last). Defaults to
-#'   #93a1a1. Modifies the `.left-column h2, .left-column h3` classes.
+#'   #93a1a1. Modifies the `.left-column h2, .left-column h3` classes. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param left_column_selected_color Left Column Current Selection. Defaults to
 #'   #586e75. Modifies the
-#'   `.left-column h2:last-of-type, .left-column h3:last-child` classes.
+#'   `.left-column h2:last-of-type, .left-column h3:last-child` classes. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param blockquote_left_border_color Blockquote Left Border Color. Defaults
-#'   to #cb4b16. Modifies the `blockquote` element.
+#'   to #cb4b16. Modifies the `blockquote` element. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with `var(NA)` in
+#'   any argument of a style function or in custom CSS.
 #' @param table_border_color Table top/bottom border. Defaults to #839496.
-#'   Modifies the `table: border-top, border-bottom` elements.
+#'   Modifies the `table: border-top, border-bottom` elements. The value of
+#'   this variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param table_row_border_color Table row inner bottom border. Defaults to
-#'   #839496. Modifies the `table thead th: border-bottom` elements.
+#'   #839496. Modifies the `table thead th: border-bottom` elements. The value
+#'   of this variable is also stored as a CSS variable that can be referenced
+#'   with `var(NA)` in any argument of a style function or in custom CSS.
 #' @param table_row_even_background_color Table Even Row Background Color.
 #'   Defaults to #eee8d5. Modifies the `thead, tfoot, tr:nth-child(even)`
-#'   elements.
+#'   elements. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(NA)` in any argument of a style function or in
+#'   custom CSS.
 #' @param base_font_size Base Font Size for All Slide Elements (must be `px`).
-#'   Defaults to 20px. Modifies the `html` element.
+#'   Defaults to 20px. Modifies the `html` element. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--base-font-size)` in any argument of a style function or in custom
+#'   CSS.
 #' @param text_font_size Slide Body Text Font Size. Defaults to 1rem. Modifies
-#'   the `.remark-slide-content` class.
+#'   the `.remark-slide-content` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--text-font-size)` in any argument of a style function or in custom
+#'   CSS.
 #' @param header_h1_font_size h1 Header Text Font Size. Defaults to 2.75rem.
-#'   Modifies the `.remark-slide-content h1` class.
+#'   Modifies the `.remark-slide-content h1` class. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--header-h1-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_h2_font_size h2 Header Text Font Size. Defaults to 2.25rem.
-#'   Modifies the `.remark-slide-content h2` class.
+#'   Modifies the `.remark-slide-content h2` class. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--header-h2-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_h3_font_size h3 Header Text Font Size. Defaults to 1.75rem.
-#'   Modifies the `.remark-slide-content h3` class.
+#'   Modifies the `.remark-slide-content h3` class. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--header-h3-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_background_auto Add background under slide title automatically
 #'   for h1 header elements. If not enabled, use `class: header_background` to
-#'   enable. Defaults to `FALSE`.
+#'   enable. Defaults to `FALSE`.  The value of this variable is also stored as
+#'   a CSS variable that can be referenced with `var(NA)` in any argument of a
+#'   style function or in custom CSS.
 #' @param header_background_color Background Color for h1 Header with
 #'   Background. Defaults to `header_color`. Modifies the
-#'   `.remark-slide-content h1` class.
+#'   `.remark-slide-content h1` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--header-background-color)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_background_text_color Text Color for h1 Header with
 #'   Background. Defaults to `background_color`. Modifies the
-#'   `.remark-slide-content h1` class.
+#'   `.remark-slide-content h1` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--header-background-text-color)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_background_padding Padding for h1 Header with Background.
-#'   Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
+#'   Defaults to `NULL`. Modifies the `.remark-slide-content h1` class. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param header_background_content_padding_top Top Padding for Content in
 #'   Slide with Header with Background. Defaults to 7rem. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param header_background_ignore_classes Slide Classes Where Header with
 #'   Background will not be Applied. Defaults to
 #'   `c('normal', 'inverse', 'title', 'middle', 'bottom')`. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to
-#'   0.9em. Modifies the `.remark-slide-number` class.
+#'   0.9em. Modifies the `.remark-slide-number` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param text_font_google Use `google_font()` to specify body font. Defaults
-#'   to `NULL`. Modifies the `body` element.
+#'   to `NULL`. Modifies the `body` element. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param text_font_family Body Text Font Family (xaringan default is
-#'   `'Droid Serif'`). Defaults to Noto Sans. Modifies the `body` element.
+#'   `'Droid Serif'`). Defaults to Noto Sans. Modifies the `body` element. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(--text-font-family)` in any argument of a style
+#'   function or in custom CSS.
 #' @param text_font_weight Body Text Font Weight. Defaults to normal. Modifies
-#'   the `body` element.
+#'   the `body` element. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(NA)` in any argument of a style
+#'   function or in custom CSS.
 #' @param text_font_url Body Text Font URL(s). Defaults to
 #'   https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap.
-#'   Modifies the `@import url()` elements.
+#'   Modifies the `@import url()` elements. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param text_font_family_fallback Body Text Font Fallbacks. Defaults to
 #'   -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
 #'   helvetica, Ubuntu, roboto, noto, segoe ui, arial. Modifies the `body`
-#'   element.
+#'   element. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(--text-font-family-fallback)` in any argument
+#'   of a style function or in custom CSS.
 #' @param text_font_base Body Text Base Font (Total Failure Fallback). Defaults
-#'   to sans-serif. Modifies the `body` element.
+#'   to sans-serif. Modifies the `body` element. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with
+#'   `var(--text-font-base)` in any argument of a style function or in custom
+#'   CSS.
 #' @param header_font_google Use `google_font()` to specify header font.
-#'   Defaults to `NULL`. Modifies the `body` element.
+#'   Defaults to `NULL`. Modifies the `body` element. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param header_font_family Header Font Family (xaringan default is
 #'   `'Yanone Kaffeesatz'`). Defaults to Cabin. Modifies the `h1, h2, h3`
-#'   elements.
+#'   elements. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(--header-font-family)` in any argument of a
+#'   style function or in custom CSS.
 #' @param header_font_weight Header Font Weight. Defaults to 600. Modifies the
-#'   `h1, h2, h3` elements.
+#'   `h1, h2, h3` elements. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(NA)` in any argument of a style
+#'   function or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap.
-#'   Modifies the `@import url` elements.
+#'   Modifies the `@import url` elements. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_google Use `google_font()` to specify code font. Defaults
-#'   to `NULL`. Modifies the `body` element.
+#'   to `NULL`. Modifies the `body` element. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_family Code Font Family. Defaults to Source Code Pro.
-#'   Modifies the `.remark-code, .remark-inline-code` classes.
+#'   Modifies the `.remark-code, .remark-inline-code` classes. The value of
+#'   this variable is also stored as a CSS variable that can be referenced with
+#'   `var(--code-font-family)` in any argument of a style function or in custom
+#'   CSS.
 #' @param code_font_size Code Text Font Size. Defaults to 0.9rem. Modifies the
-#'   `.remark-inline` class.
+#'   `.remark-inline` class. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--code-font-size)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_url Code Font URL. Defaults to
 #'   https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap.
-#'   Modifies the `@import url` elements.
+#'   Modifies the `@import url` elements. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_family_fallback Code Font Fallback. Defaults to Menlo,
 #'   Consolas, Monaco, Liberation Mono, Lucida Console. Modifies the
-#'   `.remark-code, .remark-inline-code` classes.
+#'   `.remark-code, .remark-inline-code` classes. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @template theme_params
 #' @template style_solarized_light
 #' @family Solarized themes

R/style_xaringan.R

@@ -1,146 +1,286 @@
 # Generated by inst/scripts/generate_theme_functions.R: do not edit by hand
 
 #' @param text_color Text Color. Defaults to #000. Modifies the `body` element.
+#'   The value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(--text_color)` in any argument of a style function or
+#'   in custom CSS.
 #' @param header_color Header Color. Defaults to #000. Modifies the
-#'   `h1, h2, h3` elements.
+#'   `h1, h2, h3` elements. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--header-color)` in any argument
+#'   of a style function or in custom CSS.
 #' @param background_color Slide Background Color. Defaults to #FFF. Modifies
-#'   the `.remark-slide-content` class.
+#'   the `.remark-slide-content` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--background-color)` in any argument of a style function or in custom
+#'   CSS.
 #' @param link_color Link Color. Defaults to rgb(249, 38, 114). Modifies the
-#'   `a, a > code` elements.
+#'   `a, a > code` elements. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--link-color)` in any argument
+#'   of a style function or in custom CSS.
 #' @param text_bold_color Bold Text Color. Defaults to `NULL`. Modifies the
-#'   `strong` element.
+#'   `strong` element. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--text-bold-color)` in any
+#'   argument of a style function or in custom CSS.
 #' @param text_slide_number_color Slide Number Color. Defaults to
-#'   `inverse_background_color`. Modifies the `.remark-slide-number` class.
+#'   `inverse_background_color`. Modifies the `.remark-slide-number` class. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param padding Slide Padding in `top right [bottom left]` format. Defaults
-#'   to 16px 64px 16px 64px. Modifies the `.remark-slide-content` class.
+#'   to 16px 64px 16px 64px. Modifies the `.remark-slide-content` class. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param background_image Background image applied to each *and every* slide.
 #'   Set `title_slide_background_image = "none"` to remove the background image
 #'   from the title slide. Defaults to `NULL`. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param background_size Background image size, requires `background_image` to
 #'   be set. If `background_image` is set, `background_size` will default to
 #'   `cover` so the backround fills the screen. If both `background_image` and
 #'   `background_position` are set, will default to 100 percent. Defaults to
-#'   `NULL`. Modifies the `.remark-slide-content` class.
+#'   `NULL`. Modifies the `.remark-slide-content` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param background_position Background image position, requires
 #'   `background_image` to be set, and it is recommended to adjust
 #'   `background_size`. Defaults to `NULL`. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param code_highlight_color Code Line Highlight. Defaults to
 #'   rgba(255,255,0,0.5). Modifies the `.remark-code-line-highlighted` class.
+#'   The value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(--code-highlight-color)` in any argument of a style
+#'   function or in custom CSS.
 #' @param code_inline_color Inline Code Color. Defaults to #000. Modifies the
-#'   `.remark-inline-code` class.
+#'   `.remark-inline-code` class. The value of this variable is also stored as
+#'   a CSS variable that can be referenced with `var(NA)` in any argument of a
+#'   style function or in custom CSS.
 #' @param code_inline_background_color Inline Code Background Color. Defaults
-#'   to `NULL`. Modifies the `.remark-inline-code` class.
+#'   to `NULL`. Modifies the `.remark-inline-code` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param code_inline_font_size Inline Code Text Font Size. Defaults to 1em.
-#'   Modifies the `.remark-inline-code` class.
+#'   Modifies the `.remark-inline-code` class. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with
+#'   `var(--code-inline-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param inverse_background_color Inverse Background Color. Defaults to
-#'   #272822. Modifies the `.inverse` class.
+#'   #272822. Modifies the `.inverse` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--inverse-background-color)` in any argument of a style function or
+#'   in custom CSS.
 #' @param inverse_text_color Inverse Text Color. Defaults to #d6d6d6. Modifies
-#'   the `.inverse` class.
+#'   the `.inverse` class. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--inverse-text-color)` in any
+#'   argument of a style function or in custom CSS.
 #' @param inverse_text_shadow Enables Shadow on text of inverse slides.
-#'   Defaults to `FALSE`. Modifies the `.inverse` class.
+#'   Defaults to `FALSE`. Modifies the `.inverse` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param inverse_header_color Inverse Header Color. Defaults to #f3f3f3.
-#'   Modifies the `.inverse h1, .inverse h2, .inverse h3` classes.
+#'   Modifies the `.inverse h1, .inverse h2, .inverse h3` classes. The value of
+#'   this variable is also stored as a CSS variable that can be referenced with
+#'   `var(--inverse-header-color)` in any argument of a style function or in
+#'   custom CSS.
 #' @param title_slide_text_color Title Slide Text Color. Defaults to
-#'   `inverse_text_color`. Modifies the `.title-slide` class.
+#'   `inverse_text_color`. Modifies the `.title-slide` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--title-slide-text-color)` in any argument of a style function or in
+#'   custom CSS.
 #' @param title_slide_background_color Title Slide Background Color. Defaults
-#'   to `inverse_background_color`. Modifies the `.title-slide` class.
+#'   to `inverse_background_color`. Modifies the `.title-slide` class. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(--title-slide-background-color)` in any argument of a
+#'   style function or in custom CSS.
 #' @param title_slide_background_image Title Slide Background Image URL.
-#'   Defaults to `NULL`. Modifies the `.title-slide` class.
+#'   Defaults to `NULL`. Modifies the `.title-slide` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param title_slide_background_size Title Slide Background Image Size,
 #'   defaults to "cover" if background image is set. Defaults to `NULL`.
-#'   Modifies the `.title-slide` class.
+#'   Modifies the `.title-slide` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param title_slide_background_position Title Slide Background Image
-#'   Position. Defaults to `NULL`. Modifies the `.title-slide` class.
+#'   Position. Defaults to `NULL`. Modifies the `.title-slide` class. The value
+#'   of this variable is also stored as a CSS variable that can be referenced
+#'   with `var(NA)` in any argument of a style function or in custom CSS.
 #' @param footnote_color Footnote text color (if `NA`, then it will be the same
 #'   color as `text_color`). Defaults to `NULL`. Modifies the `.footnote`
-#'   class.
+#'   class. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(NA)` in any argument of a style function or in
+#'   custom CSS.
 #' @param footnote_font_size Footnote font size. Defaults to 0.9em. Modifies
-#'   the `.footnote` class.
+#'   the `.footnote` class. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(NA)` in any argument of a style
+#'   function or in custom CSS.
 #' @param footnote_position_bottom Footnote location from bottom of screen.
-#'   Defaults to 60px. Modifies the `.footnote` class.
+#'   Defaults to 60px. Modifies the `.footnote` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param left_column_subtle_color Left Column Text (not last). Defaults to
-#'   #777. Modifies the `.left-column h2, .left-column h3` classes.
+#'   #777. Modifies the `.left-column h2, .left-column h3` classes. The value
+#'   of this variable is also stored as a CSS variable that can be referenced
+#'   with `var(NA)` in any argument of a style function or in custom CSS.
 #' @param left_column_selected_color Left Column Current Selection. Defaults to
 #'   #000. Modifies the
-#'   `.left-column h2:last-of-type, .left-column h3:last-child` classes.
+#'   `.left-column h2:last-of-type, .left-column h3:last-child` classes. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param blockquote_left_border_color Blockquote Left Border Color. Defaults
-#'   to lightgray. Modifies the `blockquote` element.
+#'   to lightgray. Modifies the `blockquote` element. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param table_border_color Table top/bottom border. Defaults to #666.
-#'   Modifies the `table: border-top, border-bottom` elements.
+#'   Modifies the `table: border-top, border-bottom` elements. The value of
+#'   this variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param table_row_border_color Table row inner bottom border. Defaults to
-#'   #ddd. Modifies the `table thead th: border-bottom` elements.
+#'   #ddd. Modifies the `table thead th: border-bottom` elements. The value of
+#'   this variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param table_row_even_background_color Table Even Row Background Color.
 #'   Defaults to #eee. Modifies the `thead, tfoot, tr:nth-child(even)`
-#'   elements.
+#'   elements. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(NA)` in any argument of a style function or in
+#'   custom CSS.
 #' @param base_font_size Base Font Size for All Slide Elements (must be `px`).
-#'   Defaults to 20px. Modifies the `html` element.
+#'   Defaults to 20px. Modifies the `html` element. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--base-font-size)` in any argument of a style function or in custom
+#'   CSS.
 #' @param text_font_size Slide Body Text Font Size. Defaults to 1rem. Modifies
-#'   the `.remark-slide-content` class.
+#'   the `.remark-slide-content` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--text-font-size)` in any argument of a style function or in custom
+#'   CSS.
 #' @param header_h1_font_size h1 Header Text Font Size. Defaults to 2.75rem.
-#'   Modifies the `.remark-slide-content h1` class.
+#'   Modifies the `.remark-slide-content h1` class. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--header-h1-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_h2_font_size h2 Header Text Font Size. Defaults to 2.25rem.
-#'   Modifies the `.remark-slide-content h2` class.
+#'   Modifies the `.remark-slide-content h2` class. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--header-h2-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_h3_font_size h3 Header Text Font Size. Defaults to 1.75rem.
-#'   Modifies the `.remark-slide-content h3` class.
+#'   Modifies the `.remark-slide-content h3` class. The value of this variable
+#'   is also stored as a CSS variable that can be referenced with
+#'   `var(--header-h3-font-size)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_background_auto Add background under slide title automatically
 #'   for h1 header elements. If not enabled, use `class: header_background` to
-#'   enable. Defaults to `FALSE`.
+#'   enable. Defaults to `FALSE`.  The value of this variable is also stored as
+#'   a CSS variable that can be referenced with `var(NA)` in any argument of a
+#'   style function or in custom CSS.
 #' @param header_background_color Background Color for h1 Header with
 #'   Background. Defaults to `header_color`. Modifies the
-#'   `.remark-slide-content h1` class.
+#'   `.remark-slide-content h1` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--header-background-color)` in any argument of a style function or in
+#'   custom CSS.
 #' @param header_background_text_color Text Color for h1 Header with
 #'   Background. Defaults to `background_color`. Modifies the
-#'   `.remark-slide-content h1` class.
+#'   `.remark-slide-content h1` class. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with
+#'   `var(--header-background-text-color)` in any argument of a style function
+#'   or in custom CSS.
 #' @param header_background_padding Padding for h1 Header with Background.
-#'   Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
+#'   Defaults to `NULL`. Modifies the `.remark-slide-content h1` class. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(NA)` in any argument of a style function or in custom
+#'   CSS.
 #' @param header_background_content_padding_top Top Padding for Content in
 #'   Slide with Header with Background. Defaults to 7rem. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param header_background_ignore_classes Slide Classes Where Header with
 #'   Background will not be Applied. Defaults to
 #'   `c('normal', 'inverse', 'title', 'middle', 'bottom')`. Modifies the
-#'   `.remark-slide-content` class.
+#'   `.remark-slide-content` class. The value of this variable is also stored
+#'   as a CSS variable that can be referenced with `var(NA)` in any argument of
+#'   a style function or in custom CSS.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to
-#'   0.9em. Modifies the `.remark-slide-number` class.
+#'   0.9em. Modifies the `.remark-slide-number` class. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param text_font_google Use `google_font()` to specify body font. Defaults
-#'   to `NULL`. Modifies the `body` element.
+#'   to `NULL`. Modifies the `body` element. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param text_font_family Body Text Font Family (xaringan default is
-#'   `'Droid Serif'`). Defaults to Noto Sans. Modifies the `body` element.
+#'   `'Droid Serif'`). Defaults to Noto Sans. Modifies the `body` element. The
+#'   value of this variable is also stored as a CSS variable that can be
+#'   referenced with `var(--text-font-family)` in any argument of a style
+#'   function or in custom CSS.
 #' @param text_font_weight Body Text Font Weight. Defaults to normal. Modifies
-#'   the `body` element.
+#'   the `body` element. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(NA)` in any argument of a style
+#'   function or in custom CSS.
 #' @param text_font_url Body Text Font URL(s). Defaults to
 #'   https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap.
-#'   Modifies the `@import url()` elements.
+#'   Modifies the `@import url()` elements. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param text_font_family_fallback Body Text Font Fallbacks. Defaults to
 #'   -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
 #'   helvetica, Ubuntu, roboto, noto, segoe ui, arial. Modifies the `body`
-#'   element.
+#'   element. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(--text-font-family-fallback)` in any argument
+#'   of a style function or in custom CSS.
 #' @param text_font_base Body Text Base Font (Total Failure Fallback). Defaults
-#'   to sans-serif. Modifies the `body` element.
+#'   to sans-serif. Modifies the `body` element. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with
+#'   `var(--text-font-base)` in any argument of a style function or in custom
+#'   CSS.
 #' @param header_font_google Use `google_font()` to specify header font.
-#'   Defaults to `NULL`. Modifies the `body` element.
+#'   Defaults to `NULL`. Modifies the `body` element. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(NA)` in any argument of a style function or in custom CSS.
 #' @param header_font_family Header Font Family (xaringan default is
 #'   `'Yanone Kaffeesatz'`). Defaults to Cabin. Modifies the `h1, h2, h3`
-#'   elements.
+#'   elements. The value of this variable is also stored as a CSS variable that
+#'   can be referenced with `var(--header-font-family)` in any argument of a
+#'   style function or in custom CSS.
 #' @param header_font_weight Header Font Weight. Defaults to 600. Modifies the
-#'   `h1, h2, h3` elements.
+#'   `h1, h2, h3` elements. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(NA)` in any argument of a style
+#'   function or in custom CSS.
 #' @param header_font_url Header Font URL. Defaults to
 #'   https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap.
-#'   Modifies the `@import url` elements.
+#'   Modifies the `@import url` elements. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_google Use `google_font()` to specify code font. Defaults
-#'   to `NULL`. Modifies the `body` element.
+#'   to `NULL`. Modifies the `body` element. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_family Code Font Family. Defaults to Source Code Pro.
-#'   Modifies the `.remark-code, .remark-inline-code` classes.
+#'   Modifies the `.remark-code, .remark-inline-code` classes. The value of
+#'   this variable is also stored as a CSS variable that can be referenced with
+#'   `var(--code-font-family)` in any argument of a style function or in custom
+#'   CSS.
 #' @param code_font_size Code Text Font Size. Defaults to 0.9rem. Modifies the
-#'   `.remark-inline` class.
+#'   `.remark-inline` class. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--code-font-size)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_url Code Font URL. Defaults to
 #'   https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap.
-#'   Modifies the `@import url` elements.
+#'   Modifies the `@import url` elements. The value of this variable is also
+#'   stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @param code_font_family_fallback Code Font Fallback. Defaults to Menlo,
 #'   Consolas, Monaco, Liberation Mono, Lucida Console. Modifies the
-#'   `.remark-code, .remark-inline-code` classes.
+#'   `.remark-code, .remark-inline-code` classes. The value of this variable is
+#'   also stored as a CSS variable that can be referenced with `var(NA)` in any
+#'   argument of a style function or in custom CSS.
 #' @template theme_params
 #' @template style_xaringan
 #' @export

data-raw/theme_template_variables.R

@@ -1,7 +1,7 @@
 #nocov start
 template_variables <- tibble::tribble(
   ~ variable, ~ default, ~ element, ~ description, ~ css_variable
-  , "text_color", "#000", "body", "Text Color", "--primary"
+  , "text_color", "#000", "body", "Text Color", "--text_color"
   , "header_color", "#000", "h1, h2, h3", "Header Color", "--header-color"
   , "background_color", "#FFF", ".remark-slide-content", "Slide Background Color", "--background-color"
   , "link_color", "rgb(249, 38, 114)", "a, a > code", "Link Color", "--link-color"
@@ -339,5 +339,6 @@ usethis::use_data(
   template_duo_accent_inverse,
   template_solarized_light,
   template_solarized_dark,
-  internal = TRUE
+  internal = TRUE,
+  overwrite = TRUE
 )

inst/scripts/generate_theme_functions.R

@@ -24,7 +24,8 @@ setup_theme_function <- function(
         tv,
         "#' @param {variable} {description}. ",
         "Defaults to {gsub('[{{}}]', '`', default)}. ",
-        "{element_description(element)}"
+        "{element_description(element)}",
+        "{describe_css_variable(css_variable)}"
       )
     ),
     "#' @template theme_params",

man/style_solarized_dark.Rd

@@ -76,206 +76,344 @@ style_solarized_dark(
 }
 \arguments{
 \item{text_color}{Text Color. Defaults to #839496. Modifies the \code{body}
-element.}
+element. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(--text_color)} in any argument of a style
+function or in custom CSS.}
 
 \item{header_color}{Header Color. Defaults to #dc322f. Modifies the
-\verb{h1, h2, h3} elements.}
+\verb{h1, h2, h3} elements. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--header-color)} in any argument
+of a style function or in custom CSS.}
 
 \item{background_color}{Slide Background Color. Defaults to #002b36.
-Modifies the \code{.remark-slide-content} class.}
+Modifies the \code{.remark-slide-content} class. The value of this variable is
+also stored as a CSS variable that can be referenced with
+\code{var(--background-color)} in any argument of a style function or in custom
+CSS.}
 
 \item{link_color}{Link Color. Defaults to #b58900. Modifies the
-\verb{a, a > code} elements.}
+\verb{a, a > code} elements. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--link-color)} in any argument
+of a style function or in custom CSS.}
 
 \item{text_bold_color}{Bold Text Color. Defaults to #d33682. Modifies the
-\code{strong} element.}
+\code{strong} element. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--text-bold-color)} in any
+argument of a style function or in custom CSS.}
 
 \item{text_slide_number_color}{Slide Number Color. Defaults to #586e75.
-Modifies the \code{.remark-slide-number} class.}
+Modifies the \code{.remark-slide-number} class. The value of this variable is
+also stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{padding}{Slide Padding in \verb{top right [bottom left]} format. Defaults
-to 16px 64px 16px 64px. Modifies the \code{.remark-slide-content} class.}
+to 16px 64px 16px 64px. Modifies the \code{.remark-slide-content} class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{background_image}{Background image applied to each \emph{and every} slide.
 Set \code{title_slide_background_image = "none"} to remove the background image
 from the title slide. Defaults to \code{NULL}. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{background_size}{Background image size, requires \code{background_image} to
 be set. If \code{background_image} is set, \code{background_size} will default to
 \code{cover} so the backround fills the screen. If both \code{background_image} and
 \code{background_position} are set, will default to 100 percent. Defaults to
-\code{NULL}. Modifies the \code{.remark-slide-content} class.}
+\code{NULL}. Modifies the \code{.remark-slide-content} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{background_position}{Background image position, requires
 \code{background_image} to be set, and it is recommended to adjust
 \code{background_size}. Defaults to \code{NULL}. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{code_highlight_color}{Code Line Highlight. Defaults to #268bd240.
-Modifies the \code{.remark-code-line-highlighted} class.}
+Modifies the \code{.remark-code-line-highlighted} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--code-highlight-color)} in any argument of a style function or in
+custom CSS.}
 
 \item{code_inline_color}{Inline Code Color. Defaults to #6c71c4. Modifies
-the \code{.remark-inline-code} class.}
+the \code{.remark-inline-code} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{code_inline_background_color}{Inline Code Background Color. Defaults
-to \code{NULL}. Modifies the \code{.remark-inline-code} class.}
+to \code{NULL}. Modifies the \code{.remark-inline-code} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{code_inline_font_size}{Inline Code Text Font Size. Defaults to 1em.
-Modifies the \code{.remark-inline-code} class.}
+Modifies the \code{.remark-inline-code} class. The value of this variable is
+also stored as a CSS variable that can be referenced with
+\code{var(--code-inline-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{inverse_background_color}{Inverse Background Color. Defaults to
-#fdf6e3. Modifies the \code{.inverse} class.}
+#fdf6e3. Modifies the \code{.inverse} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--inverse-background-color)} in any argument of a style function or
+in custom CSS.}
 
 \item{inverse_text_color}{Inverse Text Color. Defaults to #002b36. Modifies
-the \code{.inverse} class.}
+the \code{.inverse} class. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--inverse-text-color)} in any
+argument of a style function or in custom CSS.}
 
 \item{inverse_text_shadow}{Enables Shadow on text of inverse slides.
-Defaults to \code{FALSE}. Modifies the \code{.inverse} class.}
+Defaults to \code{FALSE}. Modifies the \code{.inverse} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{inverse_header_color}{Inverse Header Color. Defaults to
 \code{inverse_text_color}. Modifies the \verb{.inverse h1, .inverse h2, .inverse h3}
-classes.}
+classes. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(--inverse-header-color)} in any argument of a
+style function or in custom CSS.}
 
 \item{title_slide_text_color}{Title Slide Text Color. Defaults to
-\code{inverse_text_color}. Modifies the \code{.title-slide} class.}
+\code{inverse_text_color}. Modifies the \code{.title-slide} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--title-slide-text-color)} in any argument of a style function or in
+custom CSS.}
 
 \item{title_slide_background_color}{Title Slide Background Color. Defaults
-to \code{inverse_background_color}. Modifies the \code{.title-slide} class.}
+to \code{inverse_background_color}. Modifies the \code{.title-slide} class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(--title-slide-background-color)} in any argument of a
+style function or in custom CSS.}
 
 \item{title_slide_background_image}{Title Slide Background Image URL.
-Defaults to \code{NULL}. Modifies the \code{.title-slide} class.}
+Defaults to \code{NULL}. Modifies the \code{.title-slide} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{title_slide_background_size}{Title Slide Background Image Size,
 defaults to "cover" if background image is set. Defaults to \code{NULL}.
-Modifies the \code{.title-slide} class.}
+Modifies the \code{.title-slide} class. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{title_slide_background_position}{Title Slide Background Image
-Position. Defaults to \code{NULL}. Modifies the \code{.title-slide} class.}
+Position. Defaults to \code{NULL}. Modifies the \code{.title-slide} class. The value
+of this variable is also stored as a CSS variable that can be referenced
+with \code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{footnote_color}{Footnote text color (if \code{NA}, then it will be the same
 color as \code{text_color}). Defaults to \code{NULL}. Modifies the \code{.footnote}
-class.}
+class. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(NA)} in any argument of a style function or in
+custom CSS.}
 
 \item{footnote_font_size}{Footnote font size. Defaults to 0.9em. Modifies
-the \code{.footnote} class.}
+the \code{.footnote} class. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(NA)} in any argument of a style
+function or in custom CSS.}
 
 \item{footnote_position_bottom}{Footnote location from bottom of screen.
-Defaults to 60px. Modifies the \code{.footnote} class.}
+Defaults to 60px. Modifies the \code{.footnote} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{left_column_subtle_color}{Left Column Text (not last). Defaults to
-#586e75. Modifies the \verb{.left-column h2, .left-column h3} classes.}
+#586e75. Modifies the \verb{.left-column h2, .left-column h3} classes. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{left_column_selected_color}{Left Column Current Selection. Defaults to
 #93a1a1. Modifies the
-\verb{.left-column h2:last-of-type, .left-column h3:last-child} classes.}
+\verb{.left-column h2:last-of-type, .left-column h3:last-child} classes. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{blockquote_left_border_color}{Blockquote Left Border Color. Defaults
-to #cb4b16. Modifies the \code{blockquote} element.}
+to #cb4b16. Modifies the \code{blockquote} element. The value of this variable
+is also stored as a CSS variable that can be referenced with \code{var(NA)} in
+any argument of a style function or in custom CSS.}
 
 \item{table_border_color}{Table top/bottom border. Defaults to #657b83.
-Modifies the \verb{table: border-top, border-bottom} elements.}
+Modifies the \verb{table: border-top, border-bottom} elements. The value of
+this variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{table_row_border_color}{Table row inner bottom border. Defaults to
-#657b83. Modifies the \verb{table thead th: border-bottom} elements.}
+#657b83. Modifies the \verb{table thead th: border-bottom} elements. The value
+of this variable is also stored as a CSS variable that can be referenced
+with \code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{table_row_even_background_color}{Table Even Row Background Color.
 Defaults to #073642. Modifies the \verb{thead, tfoot, tr:nth-child(even)}
-elements.}
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(NA)} in any argument of a style function or in
+custom CSS.}
 
 \item{base_font_size}{Base Font Size for All Slide Elements (must be \code{px}).
-Defaults to 20px. Modifies the \code{html} element.}
+Defaults to 20px. Modifies the \code{html} element. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--base-font-size)} in any argument of a style function or in custom
+CSS.}
 
 \item{text_font_size}{Slide Body Text Font Size. Defaults to 1rem. Modifies
-the \code{.remark-slide-content} class.}
+the \code{.remark-slide-content} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--text-font-size)} in any argument of a style function or in custom
+CSS.}
 
 \item{header_h1_font_size}{h1 Header Text Font Size. Defaults to 2.75rem.
-Modifies the \verb{.remark-slide-content h1} class.}
+Modifies the \verb{.remark-slide-content h1} class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--header-h1-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_h2_font_size}{h2 Header Text Font Size. Defaults to 2.25rem.
-Modifies the \verb{.remark-slide-content h2} class.}
+Modifies the \verb{.remark-slide-content h2} class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--header-h2-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_h3_font_size}{h3 Header Text Font Size. Defaults to 1.75rem.
-Modifies the \verb{.remark-slide-content h3} class.}
+Modifies the \verb{.remark-slide-content h3} class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--header-h3-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_background_auto}{Add background under slide title automatically
 for h1 header elements. If not enabled, use \code{class: header_background} to
-enable. Defaults to \code{FALSE}.}
+enable. Defaults to \code{FALSE}.  The value of this variable is also stored as
+a CSS variable that can be referenced with \code{var(NA)} in any argument of a
+style function or in custom CSS.}
 
 \item{header_background_color}{Background Color for h1 Header with
 Background. Defaults to \code{header_color}. Modifies the
-\verb{.remark-slide-content h1} class.}
+\verb{.remark-slide-content h1} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--header-background-color)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_background_text_color}{Text Color for h1 Header with
 Background. Defaults to \code{background_color}. Modifies the
-\verb{.remark-slide-content h1} class.}
+\verb{.remark-slide-content h1} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--header-background-text-color)} in any argument of a style function
+or in custom CSS.}
 
 \item{header_background_padding}{Padding for h1 Header with Background.
-Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
+Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{header_background_content_padding_top}{Top Padding for Content in
 Slide with Header with Background. Defaults to 7rem. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{header_background_ignore_classes}{Slide Classes Where Header with
 Background will not be Applied. Defaults to
 \code{c('normal', 'inverse', 'title', 'middle', 'bottom')}. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{text_slide_number_font_size}{Slide Number Text Font Size. Defaults to
-0.9em. Modifies the \code{.remark-slide-number} class.}
+0.9em. Modifies the \code{.remark-slide-number} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{text_font_google}{Use \code{google_font()} to specify body font. Defaults
-to \code{NULL}. Modifies the \code{body} element.}
+to \code{NULL}. Modifies the \code{body} element. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{text_font_family}{Body Text Font Family (xaringan default is
-\code{'Droid Serif'}). Defaults to Noto Sans. Modifies the \code{body} element.}
+\code{'Droid Serif'}). Defaults to Noto Sans. Modifies the \code{body} element. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(--text-font-family)} in any argument of a style
+function or in custom CSS.}
 
 \item{text_font_weight}{Body Text Font Weight. Defaults to normal. Modifies
-the \code{body} element.}
+the \code{body} element. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(NA)} in any argument of a style
+function or in custom CSS.}
 
 \item{text_font_url}{Body Text Font URL(s). Defaults to
 https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap.
-Modifies the \verb{@import url()} elements.}
+Modifies the \verb{@import url()} elements. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{text_font_family_fallback}{Body Text Font Fallbacks. Defaults to
 -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
 helvetica, Ubuntu, roboto, noto, segoe ui, arial. Modifies the \code{body}
-element.}
+element. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(--text-font-family-fallback)} in any argument
+of a style function or in custom CSS.}
 
 \item{text_font_base}{Body Text Base Font (Total Failure Fallback). Defaults
-to sans-serif. Modifies the \code{body} element.}
+to sans-serif. Modifies the \code{body} element. The value of this variable is
+also stored as a CSS variable that can be referenced with
+\code{var(--text-font-base)} in any argument of a style function or in custom
+CSS.}
 
 \item{header_font_google}{Use \code{google_font()} to specify header font.
-Defaults to \code{NULL}. Modifies the \code{body} element.}
+Defaults to \code{NULL}. Modifies the \code{body} element. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{header_font_family}{Header Font Family (xaringan default is
 \code{'Yanone Kaffeesatz'}). Defaults to Cabin. Modifies the \verb{h1, h2, h3}
-elements.}
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(--header-font-family)} in any argument of a
+style function or in custom CSS.}
 
 \item{header_font_weight}{Header Font Weight. Defaults to 600. Modifies the
-\verb{h1, h2, h3} elements.}
+\verb{h1, h2, h3} elements. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(NA)} in any argument of a style
+function or in custom CSS.}
 
 \item{header_font_url}{Header Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap.
-Modifies the \verb{@import url} elements.}
+Modifies the \verb{@import url} elements. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_google}{Use \code{google_font()} to specify code font. Defaults
-to \code{NULL}. Modifies the \code{body} element.}
+to \code{NULL}. Modifies the \code{body} element. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_family}{Code Font Family. Defaults to Source Code Pro.
-Modifies the \verb{.remark-code, .remark-inline-code} classes.}
+Modifies the \verb{.remark-code, .remark-inline-code} classes. The value of
+this variable is also stored as a CSS variable that can be referenced with
+\code{var(--code-font-family)} in any argument of a style function or in custom
+CSS.}
 
 \item{code_font_size}{Code Text Font Size. Defaults to 0.9rem. Modifies the
-\code{.remark-inline} class.}
+\code{.remark-inline} class. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--code-font-size)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_url}{Code Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap.
-Modifies the \verb{@import url} elements.}
+Modifies the \verb{@import url} elements. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_family_fallback}{Code Font Fallback. Defaults to Menlo,
 Consolas, Monaco, Liberation Mono, Lucida Console. Modifies the
-\verb{.remark-code, .remark-inline-code} classes.}
+\verb{.remark-code, .remark-inline-code} classes. The value of this variable is
+also stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{colors}{A named vector of custom colors. The names of the colors
 become CSS variables and classes that can be used within your slides.

man/style_solarized_light.Rd

@@ -76,206 +76,344 @@ style_solarized_light(
 }
 \arguments{
 \item{text_color}{Text Color. Defaults to #657b83. Modifies the \code{body}
-element.}
+element. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(--text_color)} in any argument of a style
+function or in custom CSS.}
 
 \item{header_color}{Header Color. Defaults to #dc322f. Modifies the
-\verb{h1, h2, h3} elements.}
+\verb{h1, h2, h3} elements. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--header-color)} in any argument
+of a style function or in custom CSS.}
 
 \item{background_color}{Slide Background Color. Defaults to #fdf6e3.
-Modifies the \code{.remark-slide-content} class.}
+Modifies the \code{.remark-slide-content} class. The value of this variable is
+also stored as a CSS variable that can be referenced with
+\code{var(--background-color)} in any argument of a style function or in custom
+CSS.}
 
 \item{link_color}{Link Color. Defaults to #b58900. Modifies the
-\verb{a, a > code} elements.}
+\verb{a, a > code} elements. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--link-color)} in any argument
+of a style function or in custom CSS.}
 
 \item{text_bold_color}{Bold Text Color. Defaults to #d33682. Modifies the
-\code{strong} element.}
+\code{strong} element. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--text-bold-color)} in any
+argument of a style function or in custom CSS.}
 
 \item{text_slide_number_color}{Slide Number Color. Defaults to #93a1a1.
-Modifies the \code{.remark-slide-number} class.}
+Modifies the \code{.remark-slide-number} class. The value of this variable is
+also stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{padding}{Slide Padding in \verb{top right [bottom left]} format. Defaults
-to 16px 64px 16px 64px. Modifies the \code{.remark-slide-content} class.}
+to 16px 64px 16px 64px. Modifies the \code{.remark-slide-content} class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{background_image}{Background image applied to each \emph{and every} slide.
 Set \code{title_slide_background_image = "none"} to remove the background image
 from the title slide. Defaults to \code{NULL}. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{background_size}{Background image size, requires \code{background_image} to
 be set. If \code{background_image} is set, \code{background_size} will default to
 \code{cover} so the backround fills the screen. If both \code{background_image} and
 \code{background_position} are set, will default to 100 percent. Defaults to
-\code{NULL}. Modifies the \code{.remark-slide-content} class.}
+\code{NULL}. Modifies the \code{.remark-slide-content} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{background_position}{Background image position, requires
 \code{background_image} to be set, and it is recommended to adjust
 \code{background_size}. Defaults to \code{NULL}. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{code_highlight_color}{Code Line Highlight. Defaults to #268bd240.
-Modifies the \code{.remark-code-line-highlighted} class.}
+Modifies the \code{.remark-code-line-highlighted} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--code-highlight-color)} in any argument of a style function or in
+custom CSS.}
 
 \item{code_inline_color}{Inline Code Color. Defaults to #6c71c4. Modifies
-the \code{.remark-inline-code} class.}
+the \code{.remark-inline-code} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{code_inline_background_color}{Inline Code Background Color. Defaults
-to \code{NULL}. Modifies the \code{.remark-inline-code} class.}
+to \code{NULL}. Modifies the \code{.remark-inline-code} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{code_inline_font_size}{Inline Code Text Font Size. Defaults to 1em.
-Modifies the \code{.remark-inline-code} class.}
+Modifies the \code{.remark-inline-code} class. The value of this variable is
+also stored as a CSS variable that can be referenced with
+\code{var(--code-inline-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{inverse_background_color}{Inverse Background Color. Defaults to
-#002b36. Modifies the \code{.inverse} class.}
+#002b36. Modifies the \code{.inverse} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--inverse-background-color)} in any argument of a style function or
+in custom CSS.}
 
 \item{inverse_text_color}{Inverse Text Color. Defaults to #fdf6e3. Modifies
-the \code{.inverse} class.}
+the \code{.inverse} class. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--inverse-text-color)} in any
+argument of a style function or in custom CSS.}
 
 \item{inverse_text_shadow}{Enables Shadow on text of inverse slides.
-Defaults to \code{FALSE}. Modifies the \code{.inverse} class.}
+Defaults to \code{FALSE}. Modifies the \code{.inverse} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{inverse_header_color}{Inverse Header Color. Defaults to
 \code{inverse_text_color}. Modifies the \verb{.inverse h1, .inverse h2, .inverse h3}
-classes.}
+classes. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(--inverse-header-color)} in any argument of a
+style function or in custom CSS.}
 
 \item{title_slide_text_color}{Title Slide Text Color. Defaults to
-\code{inverse_text_color}. Modifies the \code{.title-slide} class.}
+\code{inverse_text_color}. Modifies the \code{.title-slide} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--title-slide-text-color)} in any argument of a style function or in
+custom CSS.}
 
 \item{title_slide_background_color}{Title Slide Background Color. Defaults
-to \code{inverse_background_color}. Modifies the \code{.title-slide} class.}
+to \code{inverse_background_color}. Modifies the \code{.title-slide} class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(--title-slide-background-color)} in any argument of a
+style function or in custom CSS.}
 
 \item{title_slide_background_image}{Title Slide Background Image URL.
-Defaults to \code{NULL}. Modifies the \code{.title-slide} class.}
+Defaults to \code{NULL}. Modifies the \code{.title-slide} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{title_slide_background_size}{Title Slide Background Image Size,
 defaults to "cover" if background image is set. Defaults to \code{NULL}.
-Modifies the \code{.title-slide} class.}
+Modifies the \code{.title-slide} class. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{title_slide_background_position}{Title Slide Background Image
-Position. Defaults to \code{NULL}. Modifies the \code{.title-slide} class.}
+Position. Defaults to \code{NULL}. Modifies the \code{.title-slide} class. The value
+of this variable is also stored as a CSS variable that can be referenced
+with \code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{footnote_color}{Footnote text color (if \code{NA}, then it will be the same
 color as \code{text_color}). Defaults to \code{NULL}. Modifies the \code{.footnote}
-class.}
+class. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(NA)} in any argument of a style function or in
+custom CSS.}
 
 \item{footnote_font_size}{Footnote font size. Defaults to 0.9em. Modifies
-the \code{.footnote} class.}
+the \code{.footnote} class. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(NA)} in any argument of a style
+function or in custom CSS.}
 
 \item{footnote_position_bottom}{Footnote location from bottom of screen.
-Defaults to 60px. Modifies the \code{.footnote} class.}
+Defaults to 60px. Modifies the \code{.footnote} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{left_column_subtle_color}{Left Column Text (not last). Defaults to
-#93a1a1. Modifies the \verb{.left-column h2, .left-column h3} classes.}
+#93a1a1. Modifies the \verb{.left-column h2, .left-column h3} classes. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{left_column_selected_color}{Left Column Current Selection. Defaults to
 #586e75. Modifies the
-\verb{.left-column h2:last-of-type, .left-column h3:last-child} classes.}
+\verb{.left-column h2:last-of-type, .left-column h3:last-child} classes. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{blockquote_left_border_color}{Blockquote Left Border Color. Defaults
-to #cb4b16. Modifies the \code{blockquote} element.}
+to #cb4b16. Modifies the \code{blockquote} element. The value of this variable
+is also stored as a CSS variable that can be referenced with \code{var(NA)} in
+any argument of a style function or in custom CSS.}
 
 \item{table_border_color}{Table top/bottom border. Defaults to #839496.
-Modifies the \verb{table: border-top, border-bottom} elements.}
+Modifies the \verb{table: border-top, border-bottom} elements. The value of
+this variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{table_row_border_color}{Table row inner bottom border. Defaults to
-#839496. Modifies the \verb{table thead th: border-bottom} elements.}
+#839496. Modifies the \verb{table thead th: border-bottom} elements. The value
+of this variable is also stored as a CSS variable that can be referenced
+with \code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{table_row_even_background_color}{Table Even Row Background Color.
 Defaults to #eee8d5. Modifies the \verb{thead, tfoot, tr:nth-child(even)}
-elements.}
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(NA)} in any argument of a style function or in
+custom CSS.}
 
 \item{base_font_size}{Base Font Size for All Slide Elements (must be \code{px}).
-Defaults to 20px. Modifies the \code{html} element.}
+Defaults to 20px. Modifies the \code{html} element. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--base-font-size)} in any argument of a style function or in custom
+CSS.}
 
 \item{text_font_size}{Slide Body Text Font Size. Defaults to 1rem. Modifies
-the \code{.remark-slide-content} class.}
+the \code{.remark-slide-content} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--text-font-size)} in any argument of a style function or in custom
+CSS.}
 
 \item{header_h1_font_size}{h1 Header Text Font Size. Defaults to 2.75rem.
-Modifies the \verb{.remark-slide-content h1} class.}
+Modifies the \verb{.remark-slide-content h1} class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--header-h1-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_h2_font_size}{h2 Header Text Font Size. Defaults to 2.25rem.
-Modifies the \verb{.remark-slide-content h2} class.}
+Modifies the \verb{.remark-slide-content h2} class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--header-h2-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_h3_font_size}{h3 Header Text Font Size. Defaults to 1.75rem.
-Modifies the \verb{.remark-slide-content h3} class.}
+Modifies the \verb{.remark-slide-content h3} class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--header-h3-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_background_auto}{Add background under slide title automatically
 for h1 header elements. If not enabled, use \code{class: header_background} to
-enable. Defaults to \code{FALSE}.}
+enable. Defaults to \code{FALSE}.  The value of this variable is also stored as
+a CSS variable that can be referenced with \code{var(NA)} in any argument of a
+style function or in custom CSS.}
 
 \item{header_background_color}{Background Color for h1 Header with
 Background. Defaults to \code{header_color}. Modifies the
-\verb{.remark-slide-content h1} class.}
+\verb{.remark-slide-content h1} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--header-background-color)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_background_text_color}{Text Color for h1 Header with
 Background. Defaults to \code{background_color}. Modifies the
-\verb{.remark-slide-content h1} class.}
+\verb{.remark-slide-content h1} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--header-background-text-color)} in any argument of a style function
+or in custom CSS.}
 
 \item{header_background_padding}{Padding for h1 Header with Background.
-Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
+Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{header_background_content_padding_top}{Top Padding for Content in
 Slide with Header with Background. Defaults to 7rem. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{header_background_ignore_classes}{Slide Classes Where Header with
 Background will not be Applied. Defaults to
 \code{c('normal', 'inverse', 'title', 'middle', 'bottom')}. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{text_slide_number_font_size}{Slide Number Text Font Size. Defaults to
-0.9em. Modifies the \code{.remark-slide-number} class.}
+0.9em. Modifies the \code{.remark-slide-number} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{text_font_google}{Use \code{google_font()} to specify body font. Defaults
-to \code{NULL}. Modifies the \code{body} element.}
+to \code{NULL}. Modifies the \code{body} element. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{text_font_family}{Body Text Font Family (xaringan default is
-\code{'Droid Serif'}). Defaults to Noto Sans. Modifies the \code{body} element.}
+\code{'Droid Serif'}). Defaults to Noto Sans. Modifies the \code{body} element. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(--text-font-family)} in any argument of a style
+function or in custom CSS.}
 
 \item{text_font_weight}{Body Text Font Weight. Defaults to normal. Modifies
-the \code{body} element.}
+the \code{body} element. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(NA)} in any argument of a style
+function or in custom CSS.}
 
 \item{text_font_url}{Body Text Font URL(s). Defaults to
 https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap.
-Modifies the \verb{@import url()} elements.}
+Modifies the \verb{@import url()} elements. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{text_font_family_fallback}{Body Text Font Fallbacks. Defaults to
 -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
 helvetica, Ubuntu, roboto, noto, segoe ui, arial. Modifies the \code{body}
-element.}
+element. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(--text-font-family-fallback)} in any argument
+of a style function or in custom CSS.}
 
 \item{text_font_base}{Body Text Base Font (Total Failure Fallback). Defaults
-to sans-serif. Modifies the \code{body} element.}
+to sans-serif. Modifies the \code{body} element. The value of this variable is
+also stored as a CSS variable that can be referenced with
+\code{var(--text-font-base)} in any argument of a style function or in custom
+CSS.}
 
 \item{header_font_google}{Use \code{google_font()} to specify header font.
-Defaults to \code{NULL}. Modifies the \code{body} element.}
+Defaults to \code{NULL}. Modifies the \code{body} element. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{header_font_family}{Header Font Family (xaringan default is
 \code{'Yanone Kaffeesatz'}). Defaults to Cabin. Modifies the \verb{h1, h2, h3}
-elements.}
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(--header-font-family)} in any argument of a
+style function or in custom CSS.}
 
 \item{header_font_weight}{Header Font Weight. Defaults to 600. Modifies the
-\verb{h1, h2, h3} elements.}
+\verb{h1, h2, h3} elements. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(NA)} in any argument of a style
+function or in custom CSS.}
 
 \item{header_font_url}{Header Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap.
-Modifies the \verb{@import url} elements.}
+Modifies the \verb{@import url} elements. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_google}{Use \code{google_font()} to specify code font. Defaults
-to \code{NULL}. Modifies the \code{body} element.}
+to \code{NULL}. Modifies the \code{body} element. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_family}{Code Font Family. Defaults to Source Code Pro.
-Modifies the \verb{.remark-code, .remark-inline-code} classes.}
+Modifies the \verb{.remark-code, .remark-inline-code} classes. The value of
+this variable is also stored as a CSS variable that can be referenced with
+\code{var(--code-font-family)} in any argument of a style function or in custom
+CSS.}
 
 \item{code_font_size}{Code Text Font Size. Defaults to 0.9rem. Modifies the
-\code{.remark-inline} class.}
+\code{.remark-inline} class. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--code-font-size)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_url}{Code Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap.
-Modifies the \verb{@import url} elements.}
+Modifies the \verb{@import url} elements. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_family_fallback}{Code Font Fallback. Defaults to Menlo,
 Consolas, Monaco, Liberation Mono, Lucida Console. Modifies the
-\verb{.remark-code, .remark-inline-code} classes.}
+\verb{.remark-code, .remark-inline-code} classes. The value of this variable is
+also stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{colors}{A named vector of custom colors. The names of the colors
 become CSS variables and classes that can be used within your slides.

man/style_xaringan.Rd

@@ -75,205 +75,345 @@ style_xaringan(
 )
 }
 \arguments{
-\item{text_color}{Text Color. Defaults to #000. Modifies the \code{body} element.}
+\item{text_color}{Text Color. Defaults to #000. Modifies the \code{body} element.
+The value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(--text_color)} in any argument of a style function or
+in custom CSS.}
 
 \item{header_color}{Header Color. Defaults to #000. Modifies the
-\verb{h1, h2, h3} elements.}
+\verb{h1, h2, h3} elements. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--header-color)} in any argument
+of a style function or in custom CSS.}
 
 \item{background_color}{Slide Background Color. Defaults to #FFF. Modifies
-the \code{.remark-slide-content} class.}
+the \code{.remark-slide-content} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--background-color)} in any argument of a style function or in custom
+CSS.}
 
 \item{link_color}{Link Color. Defaults to rgb(249, 38, 114). Modifies the
-\verb{a, a > code} elements.}
+\verb{a, a > code} elements. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--link-color)} in any argument
+of a style function or in custom CSS.}
 
 \item{text_bold_color}{Bold Text Color. Defaults to \code{NULL}. Modifies the
-\code{strong} element.}
+\code{strong} element. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--text-bold-color)} in any
+argument of a style function or in custom CSS.}
 
 \item{text_slide_number_color}{Slide Number Color. Defaults to
-\code{inverse_background_color}. Modifies the \code{.remark-slide-number} class.}
+\code{inverse_background_color}. Modifies the \code{.remark-slide-number} class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{padding}{Slide Padding in \verb{top right [bottom left]} format. Defaults
-to 16px 64px 16px 64px. Modifies the \code{.remark-slide-content} class.}
+to 16px 64px 16px 64px. Modifies the \code{.remark-slide-content} class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{background_image}{Background image applied to each \emph{and every} slide.
 Set \code{title_slide_background_image = "none"} to remove the background image
 from the title slide. Defaults to \code{NULL}. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{background_size}{Background image size, requires \code{background_image} to
 be set. If \code{background_image} is set, \code{background_size} will default to
 \code{cover} so the backround fills the screen. If both \code{background_image} and
 \code{background_position} are set, will default to 100 percent. Defaults to
-\code{NULL}. Modifies the \code{.remark-slide-content} class.}
+\code{NULL}. Modifies the \code{.remark-slide-content} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{background_position}{Background image position, requires
 \code{background_image} to be set, and it is recommended to adjust
 \code{background_size}. Defaults to \code{NULL}. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{code_highlight_color}{Code Line Highlight. Defaults to
-rgba(255,255,0,0.5). Modifies the \code{.remark-code-line-highlighted} class.}
+rgba(255,255,0,0.5). Modifies the \code{.remark-code-line-highlighted} class.
+The value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(--code-highlight-color)} in any argument of a style
+function or in custom CSS.}
 
 \item{code_inline_color}{Inline Code Color. Defaults to #000. Modifies the
-\code{.remark-inline-code} class.}
+\code{.remark-inline-code} class. The value of this variable is also stored as
+a CSS variable that can be referenced with \code{var(NA)} in any argument of a
+style function or in custom CSS.}
 
 \item{code_inline_background_color}{Inline Code Background Color. Defaults
-to \code{NULL}. Modifies the \code{.remark-inline-code} class.}
+to \code{NULL}. Modifies the \code{.remark-inline-code} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{code_inline_font_size}{Inline Code Text Font Size. Defaults to 1em.
-Modifies the \code{.remark-inline-code} class.}
+Modifies the \code{.remark-inline-code} class. The value of this variable is
+also stored as a CSS variable that can be referenced with
+\code{var(--code-inline-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{inverse_background_color}{Inverse Background Color. Defaults to
-#272822. Modifies the \code{.inverse} class.}
+#272822. Modifies the \code{.inverse} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--inverse-background-color)} in any argument of a style function or
+in custom CSS.}
 
 \item{inverse_text_color}{Inverse Text Color. Defaults to #d6d6d6. Modifies
-the \code{.inverse} class.}
+the \code{.inverse} class. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--inverse-text-color)} in any
+argument of a style function or in custom CSS.}
 
 \item{inverse_text_shadow}{Enables Shadow on text of inverse slides.
-Defaults to \code{FALSE}. Modifies the \code{.inverse} class.}
+Defaults to \code{FALSE}. Modifies the \code{.inverse} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{inverse_header_color}{Inverse Header Color. Defaults to #f3f3f3.
-Modifies the \verb{.inverse h1, .inverse h2, .inverse h3} classes.}
+Modifies the \verb{.inverse h1, .inverse h2, .inverse h3} classes. The value of
+this variable is also stored as a CSS variable that can be referenced with
+\code{var(--inverse-header-color)} in any argument of a style function or in
+custom CSS.}
 
 \item{title_slide_text_color}{Title Slide Text Color. Defaults to
-\code{inverse_text_color}. Modifies the \code{.title-slide} class.}
+\code{inverse_text_color}. Modifies the \code{.title-slide} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--title-slide-text-color)} in any argument of a style function or in
+custom CSS.}
 
 \item{title_slide_background_color}{Title Slide Background Color. Defaults
-to \code{inverse_background_color}. Modifies the \code{.title-slide} class.}
+to \code{inverse_background_color}. Modifies the \code{.title-slide} class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(--title-slide-background-color)} in any argument of a
+style function or in custom CSS.}
 
 \item{title_slide_background_image}{Title Slide Background Image URL.
-Defaults to \code{NULL}. Modifies the \code{.title-slide} class.}
+Defaults to \code{NULL}. Modifies the \code{.title-slide} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{title_slide_background_size}{Title Slide Background Image Size,
 defaults to "cover" if background image is set. Defaults to \code{NULL}.
-Modifies the \code{.title-slide} class.}
+Modifies the \code{.title-slide} class. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{title_slide_background_position}{Title Slide Background Image
-Position. Defaults to \code{NULL}. Modifies the \code{.title-slide} class.}
+Position. Defaults to \code{NULL}. Modifies the \code{.title-slide} class. The value
+of this variable is also stored as a CSS variable that can be referenced
+with \code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{footnote_color}{Footnote text color (if \code{NA}, then it will be the same
 color as \code{text_color}). Defaults to \code{NULL}. Modifies the \code{.footnote}
-class.}
+class. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(NA)} in any argument of a style function or in
+custom CSS.}
 
 \item{footnote_font_size}{Footnote font size. Defaults to 0.9em. Modifies
-the \code{.footnote} class.}
+the \code{.footnote} class. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(NA)} in any argument of a style
+function or in custom CSS.}
 
 \item{footnote_position_bottom}{Footnote location from bottom of screen.
-Defaults to 60px. Modifies the \code{.footnote} class.}
+Defaults to 60px. Modifies the \code{.footnote} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{left_column_subtle_color}{Left Column Text (not last). Defaults to
-#777. Modifies the \verb{.left-column h2, .left-column h3} classes.}
+#777. Modifies the \verb{.left-column h2, .left-column h3} classes. The value
+of this variable is also stored as a CSS variable that can be referenced
+with \code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{left_column_selected_color}{Left Column Current Selection. Defaults to
 #000. Modifies the
-\verb{.left-column h2:last-of-type, .left-column h3:last-child} classes.}
+\verb{.left-column h2:last-of-type, .left-column h3:last-child} classes. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{blockquote_left_border_color}{Blockquote Left Border Color. Defaults
-to lightgray. Modifies the \code{blockquote} element.}
+to lightgray. Modifies the \code{blockquote} element. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{table_border_color}{Table top/bottom border. Defaults to #666.
-Modifies the \verb{table: border-top, border-bottom} elements.}
+Modifies the \verb{table: border-top, border-bottom} elements. The value of
+this variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{table_row_border_color}{Table row inner bottom border. Defaults to
-#ddd. Modifies the \verb{table thead th: border-bottom} elements.}
+#ddd. Modifies the \verb{table thead th: border-bottom} elements. The value of
+this variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{table_row_even_background_color}{Table Even Row Background Color.
 Defaults to #eee. Modifies the \verb{thead, tfoot, tr:nth-child(even)}
-elements.}
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(NA)} in any argument of a style function or in
+custom CSS.}
 
 \item{base_font_size}{Base Font Size for All Slide Elements (must be \code{px}).
-Defaults to 20px. Modifies the \code{html} element.}
+Defaults to 20px. Modifies the \code{html} element. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--base-font-size)} in any argument of a style function or in custom
+CSS.}
 
 \item{text_font_size}{Slide Body Text Font Size. Defaults to 1rem. Modifies
-the \code{.remark-slide-content} class.}
+the \code{.remark-slide-content} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--text-font-size)} in any argument of a style function or in custom
+CSS.}
 
 \item{header_h1_font_size}{h1 Header Text Font Size. Defaults to 2.75rem.
-Modifies the \verb{.remark-slide-content h1} class.}
+Modifies the \verb{.remark-slide-content h1} class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--header-h1-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_h2_font_size}{h2 Header Text Font Size. Defaults to 2.25rem.
-Modifies the \verb{.remark-slide-content h2} class.}
+Modifies the \verb{.remark-slide-content h2} class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--header-h2-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_h3_font_size}{h3 Header Text Font Size. Defaults to 1.75rem.
-Modifies the \verb{.remark-slide-content h3} class.}
+Modifies the \verb{.remark-slide-content h3} class. The value of this variable
+is also stored as a CSS variable that can be referenced with
+\code{var(--header-h3-font-size)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_background_auto}{Add background under slide title automatically
 for h1 header elements. If not enabled, use \code{class: header_background} to
-enable. Defaults to \code{FALSE}.}
+enable. Defaults to \code{FALSE}.  The value of this variable is also stored as
+a CSS variable that can be referenced with \code{var(NA)} in any argument of a
+style function or in custom CSS.}
 
 \item{header_background_color}{Background Color for h1 Header with
 Background. Defaults to \code{header_color}. Modifies the
-\verb{.remark-slide-content h1} class.}
+\verb{.remark-slide-content h1} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--header-background-color)} in any argument of a style function or in
+custom CSS.}
 
 \item{header_background_text_color}{Text Color for h1 Header with
 Background. Defaults to \code{background_color}. Modifies the
-\verb{.remark-slide-content h1} class.}
+\verb{.remark-slide-content h1} class. The value of this variable is also
+stored as a CSS variable that can be referenced with
+\code{var(--header-background-text-color)} in any argument of a style function
+or in custom CSS.}
 
 \item{header_background_padding}{Padding for h1 Header with Background.
-Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
+Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(NA)} in any argument of a style function or in custom
+CSS.}
 
 \item{header_background_content_padding_top}{Top Padding for Content in
 Slide with Header with Background. Defaults to 7rem. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{header_background_ignore_classes}{Slide Classes Where Header with
 Background will not be Applied. Defaults to
 \code{c('normal', 'inverse', 'title', 'middle', 'bottom')}. Modifies the
-\code{.remark-slide-content} class.}
+\code{.remark-slide-content} class. The value of this variable is also stored
+as a CSS variable that can be referenced with \code{var(NA)} in any argument of
+a style function or in custom CSS.}
 
 \item{text_slide_number_font_size}{Slide Number Text Font Size. Defaults to
-0.9em. Modifies the \code{.remark-slide-number} class.}
+0.9em. Modifies the \code{.remark-slide-number} class. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{text_font_google}{Use \code{google_font()} to specify body font. Defaults
-to \code{NULL}. Modifies the \code{body} element.}
+to \code{NULL}. Modifies the \code{body} element. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{text_font_family}{Body Text Font Family (xaringan default is
-\code{'Droid Serif'}). Defaults to Noto Sans. Modifies the \code{body} element.}
+\code{'Droid Serif'}). Defaults to Noto Sans. Modifies the \code{body} element. The
+value of this variable is also stored as a CSS variable that can be
+referenced with \code{var(--text-font-family)} in any argument of a style
+function or in custom CSS.}
 
 \item{text_font_weight}{Body Text Font Weight. Defaults to normal. Modifies
-the \code{body} element.}
+the \code{body} element. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(NA)} in any argument of a style
+function or in custom CSS.}
 
 \item{text_font_url}{Body Text Font URL(s). Defaults to
 https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap.
-Modifies the \verb{@import url()} elements.}
+Modifies the \verb{@import url()} elements. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{text_font_family_fallback}{Body Text Font Fallbacks. Defaults to
 -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue,
 helvetica, Ubuntu, roboto, noto, segoe ui, arial. Modifies the \code{body}
-element.}
+element. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(--text-font-family-fallback)} in any argument
+of a style function or in custom CSS.}
 
 \item{text_font_base}{Body Text Base Font (Total Failure Fallback). Defaults
-to sans-serif. Modifies the \code{body} element.}
+to sans-serif. Modifies the \code{body} element. The value of this variable is
+also stored as a CSS variable that can be referenced with
+\code{var(--text-font-base)} in any argument of a style function or in custom
+CSS.}
 
 \item{header_font_google}{Use \code{google_font()} to specify header font.
-Defaults to \code{NULL}. Modifies the \code{body} element.}
+Defaults to \code{NULL}. Modifies the \code{body} element. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(NA)} in any argument of a style function or in custom CSS.}
 
 \item{header_font_family}{Header Font Family (xaringan default is
 \code{'Yanone Kaffeesatz'}). Defaults to Cabin. Modifies the \verb{h1, h2, h3}
-elements.}
+elements. The value of this variable is also stored as a CSS variable that
+can be referenced with \code{var(--header-font-family)} in any argument of a
+style function or in custom CSS.}
 
 \item{header_font_weight}{Header Font Weight. Defaults to 600. Modifies the
-\verb{h1, h2, h3} elements.}
+\verb{h1, h2, h3} elements. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(NA)} in any argument of a style
+function or in custom CSS.}
 
 \item{header_font_url}{Header Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap.
-Modifies the \verb{@import url} elements.}
+Modifies the \verb{@import url} elements. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_google}{Use \code{google_font()} to specify code font. Defaults
-to \code{NULL}. Modifies the \code{body} element.}
+to \code{NULL}. Modifies the \code{body} element. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_family}{Code Font Family. Defaults to Source Code Pro.
-Modifies the \verb{.remark-code, .remark-inline-code} classes.}
+Modifies the \verb{.remark-code, .remark-inline-code} classes. The value of
+this variable is also stored as a CSS variable that can be referenced with
+\code{var(--code-font-family)} in any argument of a style function or in custom
+CSS.}
 
 \item{code_font_size}{Code Text Font Size. Defaults to 0.9rem. Modifies the
-\code{.remark-inline} class.}
+\code{.remark-inline} class. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--code-font-size)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_url}{Code Font URL. Defaults to
 https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap.
-Modifies the \verb{@import url} elements.}
+Modifies the \verb{@import url} elements. The value of this variable is also
+stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{code_font_family_fallback}{Code Font Fallback. Defaults to Menlo,
 Consolas, Monaco, Liberation Mono, Lucida Console. Modifies the
-\verb{.remark-code, .remark-inline-code} classes.}
+\verb{.remark-code, .remark-inline-code} classes. The value of this variable is
+also stored as a CSS variable that can be referenced with \code{var(NA)} in any
+argument of a style function or in custom CSS.}
 
 \item{colors}{A named vector of custom colors. The names of the colors
 become CSS variables and classes that can be used within your slides.

vignettes/template-variables.Rmd

@@ -48,8 +48,11 @@ template_variables <- xaringanthemer:::template_variables
 template_variables$variable <- glue::glue_data(template_variables, "`{variable}`")
 template_variables$default <- gsub("[{}]", "", template_variables$default)
 template_variables <- template_variables[, c(
-  "variable", "description", "element", "default"
+  "variable", "description", "element", "default", "css_variable"
 )]
-knitr::kable(template_variables)
+knitr::kable(
+  template_variables,
+  col.names = c("Variable", "Description", "Element", "Default", "CSS Variable")
+)
 ```