Create colors based on style starter colors

E.g. primary_color and secondary_color in style_duo() become --primary and --secondary

R/style_duo.R

@@ -1,9 +1,13 @@
 # Generated by inst/scripts/generate_theme_functions.R: do not edit by hand
 
 #' @param primary_color Duotone Primary Color. Defaults to #1F4257. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--primary)` in any argument of a
+#'   style function or in custom CSS.
 #' @param secondary_color Duotone Secondary Color. Defaults to #F97B64. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--secondary)` in any argument of
+#'   a style function or in custom CSS.
 #' @param text_color Text Color. Defaults to
 #'   `choose_dark_or_light(primary_color, darken_color(primary_color, 0.9), lighten_color(secondary_color, 0.99))`.
 #'   Modifies the `body` element. The value of this variable is also stored as
@@ -288,5 +292,6 @@ style_duo <- function(
   outfile = "xaringan-themer.css"
 ) {
   # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R
+  colors <- c(primary = primary_color, secondary = secondary_color, colors)
   eval(parse(text = call_style_xaringan()))
 }

R/style_duo_accent.R

@@ -1,13 +1,21 @@
 # Generated by inst/scripts/generate_theme_functions.R: do not edit by hand
 
 #' @param primary_color Duotone Primary Color. Defaults to #006747. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--primary)` in any argument of a
+#'   style function or in custom CSS.
 #' @param secondary_color Duotone Secondary Color. Defaults to #CFC493. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--secondary)` in any argument of
+#'   a style function or in custom CSS.
 #' @param white_color Brightest color used. Defaults to #FFFFFF. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--white)` in any argument of a
+#'   style function or in custom CSS.
 #' @param black_color Darkest color used. Defaults to #000000. Used in multiple
-#'   CSS rules.
+#'   CSS rules. The value of this variable is also stored as a CSS variable
+#'   that can be referenced with `var(--black)` in any argument of a style
+#'   function or in custom CSS.
 #' @param text_color Text Color. Defaults to `black_color`. 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
@@ -298,5 +306,6 @@ style_duo_accent <- function(
   outfile = "xaringan-themer.css"
 ) {
   # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R
+  colors <- c(primary = primary_color, secondary = secondary_color, white = white_color, black = black_color, colors)
   eval(parse(text = call_style_xaringan()))
 }

R/style_duo_accent_inverse.R

@@ -1,13 +1,21 @@
 # Generated by inst/scripts/generate_theme_functions.R: do not edit by hand
 
 #' @param primary_color Duotone Primary Color. Defaults to #006747. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--primary)` in any argument of a
+#'   style function or in custom CSS.
 #' @param secondary_color Duotone Secondary Color. Defaults to #CFC493. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--secondary)` in any argument of
+#'   a style function or in custom CSS.
 #' @param white_color Brightest color used. Defaults to #FFFFFF. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--white)` in any argument of a
+#'   style function or in custom CSS.
 #' @param black_color Darkest color used. Defaults to #000000. Used in multiple
-#'   CSS rules.
+#'   CSS rules. The value of this variable is also stored as a CSS variable
+#'   that can be referenced with `var(--black)` in any argument of a style
+#'   function or in custom CSS.
 #' @param text_color Text Color. Defaults to `white_color`. 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
@@ -299,5 +307,6 @@ style_duo_accent_inverse <- function(
   outfile = "xaringan-themer.css"
 ) {
   # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R
+  colors <- c(primary = primary_color, secondary = secondary_color, white = white_color, black = black_color, colors)
   eval(parse(text = call_style_xaringan()))
 }

R/style_mono_accent.R

@@ -1,11 +1,17 @@
 # Generated by inst/scripts/generate_theme_functions.R: do not edit by hand
 
 #' @param base_color Monotone Base Color, works best with a strong color.
-#'   Defaults to #43418A. Used in multiple CSS rules.
+#'   Defaults to #43418A. Used in multiple CSS rules. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--base)` in any argument of a style function or in custom CSS.
 #' @param white_color Brightest color used. Defaults to #FFFFFF. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--white)` in any argument of a
+#'   style function or in custom CSS.
 #' @param black_color Darkest color used. Defaults to #272822. Used in multiple
-#'   CSS rules.
+#'   CSS rules. The value of this variable is also stored as a CSS variable
+#'   that can be referenced with `var(--black)` in any argument of a style
+#'   function or in custom CSS.
 #' @param text_color Text Color. Defaults to `black_color`. 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
@@ -290,5 +296,6 @@ style_mono_accent <- function(
   outfile = "xaringan-themer.css"
 ) {
   # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R
+  colors <- c(base = base_color, white = white_color, black = black_color, colors)
   eval(parse(text = call_style_xaringan()))
 }

R/style_mono_accent_inverse.R

@@ -1,12 +1,18 @@
 # Generated by inst/scripts/generate_theme_functions.R: do not edit by hand
 
 #' @param base_color Monotone Base Color, works best with a light color.
-#'   Defaults to #3C989E. Used in multiple CSS rules.
+#'   Defaults to #3C989E. Used in multiple CSS rules. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--base)` in any argument of a style function or in custom CSS.
 #' @param white_color Brightest color used, default is a very light version of
-#'   `base_color`. Defaults to #FFFFFF. Used in multiple CSS rules.
+#'   `base_color`. Defaults to #FFFFFF. Used in multiple CSS rules. The value
+#'   of this variable is also stored as a CSS variable that can be referenced
+#'   with `var(--white)` in any argument of a style function or in custom CSS.
 #' @param black_color Darkest color used, default is a very dark, version of
 #'   `base_color`. Defaults to `darken_color(base_color, 0.9)`. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--black)` in any argument of a
+#'   style function or in custom CSS.
 #' @param text_color Text Color. Defaults to `white_color`. 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
@@ -291,5 +297,6 @@ style_mono_accent_inverse <- function(
   outfile = "xaringan-themer.css"
 ) {
   # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R
+  colors <- c(base = base_color, white = white_color, black = black_color, colors)
   eval(parse(text = call_style_xaringan()))
 }

R/style_mono_dark.R

@@ -1,13 +1,19 @@
 # Generated by inst/scripts/generate_theme_functions.R: do not edit by hand
 
 #' @param base_color Monotone Base Color, works best with a light color..
-#'   Defaults to #cbf7ed. Used in multiple CSS rules.
+#'   Defaults to #cbf7ed. Used in multiple CSS rules. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--base)` in any argument of a style function or in custom CSS.
 #' @param white_color Brightest color used, default is a very light version of
 #'   `base_color`. Defaults to `lighten_color(base_color, 0.8)`. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--white)` in any argument of a
+#'   style function or in custom CSS.
 #' @param black_color Darkest color used, default is a very dark, version of
 #'   `base_color`. Defaults to `darken_color(base_color, 0.85)`. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--black)` in any argument of a
+#'   style function or in custom CSS.
 #' @param text_color Text Color. Defaults to `white_color`. 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
@@ -292,5 +298,6 @@ style_mono_dark <- function(
   outfile = "xaringan-themer.css"
 ) {
   # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R
+  colors <- c(base = base_color, white = white_color, black = black_color, colors)
   eval(parse(text = call_style_xaringan()))
 }

R/style_mono_light.R

@@ -1,13 +1,19 @@
 # Generated by inst/scripts/generate_theme_functions.R: do not edit by hand
 
 #' @param base_color Monotone base color, works best with a strong color.
-#'   Defaults to #23395b. Used in multiple CSS rules.
+#'   Defaults to #23395b. Used in multiple CSS rules. The value of this
+#'   variable is also stored as a CSS variable that can be referenced with
+#'   `var(--base)` in any argument of a style function or in custom CSS.
 #' @param white_color Brightest color used, default is a very light version of
 #'   `base_color`. Defaults to `lighten_color(base_color, 0.9)`. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--white)` in any argument of a
+#'   style function or in custom CSS.
 #' @param black_color Darkest color used, default is a very dark, version of
 #'   `base_color`. Defaults to `darken_color(base_color, 0.3)`. Used in
-#'   multiple CSS rules.
+#'   multiple CSS rules. The value of this variable is also stored as a CSS
+#'   variable that can be referenced with `var(--black)` in any argument of a
+#'   style function or in custom CSS.
 #' @param text_color Text Color. Defaults to `black_color`. 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
@@ -292,5 +298,6 @@ style_mono_light <- function(
   outfile = "xaringan-themer.css"
 ) {
   # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R
+  colors <- c(base = base_color, white = white_color, black = black_color, colors)
   eval(parse(text = call_style_xaringan()))
 }

data-raw/theme_template_variables.R

@@ -71,10 +71,10 @@ set_default <- function(tv, ...) {
 }
 
 template_mono_light <- tibble::tribble(
-  ~ variable, ~ default, ~ element, ~ description
-  , "base_color", "#23395b", "multiple", "Monotone base color, works best with a strong color"
-  , "white_color", "{lighten_color(base_color, 0.9)}", "multiple", "Brightest color used, default is a very light version of `base_color`"
-  , "black_color", "{darken_color(base_color, 0.3)}", "multiple", "Darkest color used, default is a very dark, version of `base_color`"
+  ~ variable, ~ default, ~ element, ~ description, ~ css_variable
+  , "base_color", "#23395b", "multiple", "Monotone base color, works best with a strong color", "--base"
+  , "white_color", "{lighten_color(base_color, 0.9)}", "multiple", "Brightest color used, default is a very light version of `base_color`", "--white"
+  , "black_color", "{darken_color(base_color, 0.3)}", "multiple", "Darkest color used, default is a very dark, version of `base_color`", "--black"
 )
 template_mono_light <- dplyr::bind_rows(template_mono_light, template_variables)
 template_mono_light <- set_default(
@@ -95,10 +95,10 @@ template_mono_light <- set_default(
   table_row_even_background_color = "{lighten_color(base_color, 0.8)}")
 
 template_mono_dark <- tibble::tribble(
-  ~ variable, ~ default, ~ element, ~ description
-  , "base_color", "#cbf7ed", "multiple", "Monotone Base Color, works best with a light color."
-  , "white_color", "{lighten_color(base_color, 0.8)}", "multiple", "Brightest color used, default is a very light version of `base_color`"
-  , "black_color", "{darken_color(base_color, 0.85)}", "multiple", "Darkest color used, default is a very dark, version of `base_color`"
+  ~ variable, ~ default, ~ element, ~ description, ~ css_variable
+  , "base_color", "#cbf7ed", "multiple", "Monotone Base Color, works best with a light color.", "--base"
+  , "white_color", "{lighten_color(base_color, 0.8)}", "multiple", "Brightest color used, default is a very light version of `base_color`", "--white"
+  , "black_color", "{darken_color(base_color, 0.85)}", "multiple", "Darkest color used, default is a very dark, version of `base_color`", "--black"
 )
 template_mono_dark <- dplyr::bind_rows(template_mono_dark, template_variables)
 template_mono_dark <- set_default(
@@ -119,10 +119,10 @@ template_mono_dark <- set_default(
   table_row_even_background_color = "{darken_color(base_color, 0.7)}")
 
 template_mono_accent <- tibble::tribble(
-  ~ variable, ~ default, ~ element, ~ description
-  , "base_color", "#43418A", "multiple", "Monotone Base Color, works best with a strong color"
-  , "white_color", "#FFFFFF", "multiple", "Brightest color used"
-  , "black_color", "#272822", "multiple", "Darkest color used"
+  ~ variable, ~ default, ~ element, ~ description, ~ css_variable
+  , "base_color", "#43418A", "multiple", "Monotone Base Color, works best with a strong color", "--base"
+  , "white_color", "#FFFFFF", "multiple", "Brightest color used", "--white"
+  , "black_color", "#272822", "multiple", "Darkest color used", "--black"
 )
 template_mono_accent <- dplyr::bind_rows(template_mono_accent, template_variables)
 template_mono_accent <- set_default(
@@ -143,10 +143,10 @@ template_mono_accent <- set_default(
   table_row_even_background_color = "{lighten_color(base_color, 0.8)}")
 
 template_mono_accent_inverse <- tibble::tribble(
-  ~ variable, ~ default, ~ element, ~ description
-  , "base_color", "#3C989E", "multiple", "Monotone Base Color, works best with a light color"
-  , "white_color", "#FFFFFF", "multiple", "Brightest color used, default is a very light version of `base_color`"
-  , "black_color", "{darken_color(base_color, 0.9)}", "multiple", "Darkest color used, default is a very dark, version of `base_color`"
+  ~ variable, ~ default, ~ element, ~ description, ~ css_variable
+  , "base_color", "#3C989E", "multiple", "Monotone Base Color, works best with a light color", "--base"
+  , "white_color", "#FFFFFF", "multiple", "Brightest color used, default is a very light version of `base_color`", "--white"
+  , "black_color", "{darken_color(base_color, 0.9)}", "multiple", "Darkest color used, default is a very dark, version of `base_color`", "--black"
 )
 template_mono_accent_inverse <- dplyr::bind_rows(template_mono_accent_inverse, template_variables)
 template_mono_accent_inverse <- set_default(
@@ -167,11 +167,11 @@ template_mono_accent_inverse <- set_default(
   table_row_even_background_color = "{darken_color(base_color, 0.8)}")
 
 template_duo_light <- tibble::tribble(
-  ~ variable, ~ default, ~ element, ~ description
-  , "primary_color", "#1F4257", "multiple", "Duotone Secondary Color"
-  , "secondary_color", "#F97B64", "multiple", "Duotone Primary Color"
-  , "white_color", "{lighten_color(primary_color, 0.99)}", "multiple", "Brightest color used, default is a very light version of `primary_color`"
-  , "black_color", "{darken_color(secondary_color, 0.9)}", "multiple", "Darkest color used, default is a very dark version of `secondary_color`"
+  ~ variable, ~ default, ~ element, ~ description, ~ css_variable
+  , "primary_color", "#1F4257", "multiple", "Duotone Secondary Color", "--primary"
+  , "secondary_color", "#F97B64", "multiple", "Duotone Primary Color", "--secondary"
+  , "white_color", "{lighten_color(primary_color, 0.99)}", "multiple", "Brightest color used, default is a very light version of `primary_color`", "--white"
+  , "black_color", "{darken_color(secondary_color, 0.9)}", "multiple", "Darkest color used, default is a very dark version of `secondary_color`", "--black"
 )
 template_duo_light <- dplyr::bind_rows(template_duo_light, template_variables)
 template_duo_light <- set_default(
@@ -192,9 +192,9 @@ template_duo_light <- set_default(
   table_row_even_background_color = "{lighten_color(secondary_color, 0.9)}")
 
 template_duo <- tibble::tribble(
-  ~ variable, ~ default, ~ element, ~ description
-  , "primary_color", "#1F4257", "multiple", "Duotone Primary Color"
-  , "secondary_color", "#F97B64", "multiple", "Duotone Secondary Color"
+  ~ variable, ~ default, ~ element, ~ description, ~ css_variable
+  , "primary_color", "#1F4257", "multiple", "Duotone Primary Color", "--primary"
+  , "secondary_color", "#F97B64", "multiple", "Duotone Secondary Color", "--secondary"
 )
 template_duo <- dplyr::bind_rows(template_duo, template_variables)
 template_duo <- set_default(
@@ -217,11 +217,11 @@ template_duo <- set_default(
   table_row_even_background_color = "{lighten_color(primary_color, 0.9)}")
 
 template_duo_accent <- tibble::tribble(
-  ~ variable, ~ default, ~ element, ~ description
-  , "primary_color", "#006747", "multiple", "Duotone Primary Color"
-  , "secondary_color", "#CFC493", "multiple", "Duotone Secondary Color"
-  , "white_color", "#FFFFFF", "multiple", "Brightest color used"
-  , "black_color", "#000000", "multiple", "Darkest color used"
+  ~ variable, ~ default, ~ element, ~ description, ~ css_variable
+  , "primary_color", "#006747", "multiple", "Duotone Primary Color", "--primary"
+  , "secondary_color", "#CFC493", "multiple", "Duotone Secondary Color", "--secondary"
+  , "white_color", "#FFFFFF", "multiple", "Brightest color used", "--white"
+  , "black_color", "#000000", "multiple", "Darkest color used", "--black"
 )
 template_duo_accent <- dplyr::bind_rows(template_duo_accent, template_variables)
 template_duo_accent <- set_default(

inst/resources/template.css

@@ -41,9 +41,7 @@
   --header-h2-font-size: {{header_h2_font_size}};
   --header-h3-font-size: {{header_h3_font_size}};
 
-  /* Colors */{{#primary}}
-  --primary: {{primary}};{{/primary}}{{#secondary}}
-  --secondary: {{secondary}};{{/secondary}}
+  /* Colors */
   --text-color: {{text_color}};
   --header-color: {{header_color}};
   --background-color: {{background_color}};
@@ -57,9 +55,7 @@
   --title-slide-text-color: {{title_slide_text_color}};
   --header-background-color: {{header_background_color}};
   --header-background-text-color: {{header_background_text_color}};{{#colors}}
-  --{{color_name}}: {{value}};
-  {{/colors}}
-
+  --{{color_name}}: {{value}};{{/colors}}
 }
 
 html {

inst/scripts/generate_theme_functions.R

@@ -7,11 +7,14 @@ setup_theme_function <- function(
   template = template_variables,
   ...,
   file = "",
-  body = "  eval(parse(text = call_style_xaringan()))"
+  body = "  eval(parse(text = call_style_xaringan()))",
+  theme_colors = NULL
 ) {
   if (file == "clip" && !requireNamespace("clipr", quietly = TRUE)) file <- ""
+  f_body_theme_colors <- include_theme_colors(theme_colors)
   f_body <- c(
     "  # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R",
+    f_body_theme_colors,
     body
   )
   tv <- template
@@ -85,6 +88,13 @@ pack_inline_code <- function(x) {
   paste(x, collapse = "")
 }
 
+include_theme_colors <- function(theme_colors = NULL) {
+  if (is.null(theme_colors)) return(NULL)
+  x <- glue::glue('{names(theme_colors)} = {theme_colors}')
+  x <- paste(x, collapse = ", ")
+  glue::glue("  colors <- c({x}, colors)")
+}
+
 # ---- Write Xaringan Theme Function ----
 setup_theme_function(
   "style_xaringan",
@@ -102,7 +112,8 @@ setup_theme_function(
   "#' @template style_mono_light",
   "#' @family Monotone themes",
   "#' @export",
-  file = here::here("R/style_mono_light.R")
+  file = here::here("R/style_mono_light.R"),
+  theme_colors = c(base = "base_color", white = "white_color", black = "black_color")
 )
 
 # ---- Monotone Dark ----
@@ -112,7 +123,8 @@ setup_theme_function(
   "#' @template style_mono_dark",
   "#' @family Monotone themes",
   "#' @export",
-  file = here::here("R/style_mono_dark.R")
+  file = here::here("R/style_mono_dark.R"),
+  theme_colors = c(base = "base_color", white = "white_color", black = "black_color")
 )
 
 # ---- Monotone Accent ----
@@ -122,7 +134,8 @@ setup_theme_function(
   "#' @template style_mono_accent",
   "#' @family Monotone themes",
   "#' @export",
-  file = here::here("R/style_mono_accent.R")
+  file = here::here("R/style_mono_accent.R"),
+  theme_colors = c(base = "base_color", white = "white_color", black = "black_color")
 )
 
 # ---- Monotone Accent Inverse ----
@@ -132,7 +145,8 @@ setup_theme_function(
   "#' @template style_mono_accent_inverse",
   "#' @family Monotone themes",
   "#' @export",
-  file = here::here("R/style_mono_accent_inverse.R")
+  file = here::here("R/style_mono_accent_inverse.R"),
+  theme_colors = c(base = "base_color", white = "white_color", black = "black_color")
 )
 
 # ---- Duotone ----
@@ -142,7 +156,8 @@ setup_theme_function(
   "#' @template style_duo",
   "#' @family Duotone themes",
   "#' @export",
-  file = here::here("R/style_duo.R")
+  file = here::here("R/style_duo.R"),
+  theme_colors = c(primary = "primary_color", secondary = "secondary_color")
 )
 
 # ---- Duotone Accent ----
@@ -152,7 +167,9 @@ setup_theme_function(
   "#' @template style_duo_accent",
   "#' @family Duotone themes",
   "#' @export",
-  file = here::here("R/style_duo_accent.R")
+  file = here::here("R/style_duo_accent.R"),
+  theme_colors = c(primary = "primary_color", secondary = "secondary_color",
+                   white = "white_color", black = "black_color")
 )
 
 # ---- Duotone Accent Inverse ----
@@ -162,7 +179,9 @@ setup_theme_function(
   "#' @template style_duo_accent_inverse",
   "#' @family Duotone themes",
   "#' @export",
-  file = here::here("R/style_duo_accent_inverse.R")
+  file = here::here("R/style_duo_accent_inverse.R"),
+  theme_colors = c(primary = "primary_color", secondary = "secondary_color",
+                   white = "white_color", black = "black_color")
 )
 
 # ---- Solarized Light ----

man/style_duo.Rd

@@ -79,10 +79,14 @@ style_duo(
 }
 \arguments{
 \item{primary_color}{Duotone Primary Color. Defaults to #1F4257. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--primary)} in any argument of a
+style function or in custom CSS.}
 
 \item{secondary_color}{Duotone Secondary Color. Defaults to #F97B64. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--secondary)} in any argument of
+a style function or in custom CSS.}
 
 \item{text_color}{Text Color. Defaults to
 \code{choose_dark_or_light(primary_color, darken_color(primary_color, 0.9), lighten_color(secondary_color, 0.99))}.

man/style_duo_accent.Rd

@@ -82,16 +82,24 @@ style_duo_accent(
 }
 \arguments{
 \item{primary_color}{Duotone Primary Color. Defaults to #006747. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--primary)} in any argument of a
+style function or in custom CSS.}
 
 \item{secondary_color}{Duotone Secondary Color. Defaults to #CFC493. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--secondary)} in any argument of
+a style function or in custom CSS.}
 
 \item{white_color}{Brightest color used. Defaults to #FFFFFF. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--white)} in any argument of a
+style function or in custom CSS.}
 
 \item{black_color}{Darkest color used. Defaults to #000000. Used in multiple
-CSS rules.}
+CSS rules. The value of this variable is also stored as a CSS variable
+that can be referenced with \code{var(--black)} in any argument of a style
+function or in custom CSS.}
 
 \item{text_color}{Text Color. Defaults to \code{black_color}. Modifies the \code{body}
 element. The value of this variable is also stored as a CSS variable that

man/style_duo_accent_inverse.Rd

@@ -83,16 +83,24 @@ style_duo_accent_inverse(
 }
 \arguments{
 \item{primary_color}{Duotone Primary Color. Defaults to #006747. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--primary)} in any argument of a
+style function or in custom CSS.}
 
 \item{secondary_color}{Duotone Secondary Color. Defaults to #CFC493. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--secondary)} in any argument of
+a style function or in custom CSS.}
 
 \item{white_color}{Brightest color used. Defaults to #FFFFFF. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--white)} in any argument of a
+style function or in custom CSS.}
 
 \item{black_color}{Darkest color used. Defaults to #000000. Used in multiple
-CSS rules.}
+CSS rules. The value of this variable is also stored as a CSS variable
+that can be referenced with \code{var(--black)} in any argument of a style
+function or in custom CSS.}
 
 \item{text_color}{Text Color. Defaults to \code{white_color}. Modifies the \code{body}
 element. The value of this variable is also stored as a CSS variable that

man/style_mono_accent.Rd

@@ -79,13 +79,19 @@ style_mono_accent(
 }
 \arguments{
 \item{base_color}{Monotone Base Color, works best with a strong color.
-Defaults to #43418A. Used in multiple CSS rules.}
+Defaults to #43418A. Used in multiple CSS rules. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--base)} in any argument of a style function or in custom CSS.}
 
 \item{white_color}{Brightest color used. Defaults to #FFFFFF. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--white)} in any argument of a
+style function or in custom CSS.}
 
 \item{black_color}{Darkest color used. Defaults to #272822. Used in multiple
-CSS rules.}
+CSS rules. The value of this variable is also stored as a CSS variable
+that can be referenced with \code{var(--black)} in any argument of a style
+function or in custom CSS.}
 
 \item{text_color}{Text Color. Defaults to \code{black_color}. Modifies the \code{body}
 element. The value of this variable is also stored as a CSS variable that

man/style_mono_accent_inverse.Rd

@@ -79,14 +79,20 @@ style_mono_accent_inverse(
 }
 \arguments{
 \item{base_color}{Monotone Base Color, works best with a light color.
-Defaults to #3C989E. Used in multiple CSS rules.}
+Defaults to #3C989E. Used in multiple CSS rules. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--base)} in any argument of a style function or in custom CSS.}
 
 \item{white_color}{Brightest color used, default is a very light version of
-\code{base_color}. Defaults to #FFFFFF. Used in multiple CSS rules.}
+\code{base_color}. Defaults to #FFFFFF. Used in multiple CSS rules. The value
+of this variable is also stored as a CSS variable that can be referenced
+with \code{var(--white)} in any argument of a style function or in custom CSS.}
 
 \item{black_color}{Darkest color used, default is a very dark, version of
 \code{base_color}. Defaults to \code{darken_color(base_color, 0.9)}. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--black)} in any argument of a
+style function or in custom CSS.}
 
 \item{text_color}{Text Color. Defaults to \code{white_color}. Modifies the \code{body}
 element. The value of this variable is also stored as a CSS variable that

man/style_mono_dark.Rd

@@ -79,15 +79,21 @@ style_mono_dark(
 }
 \arguments{
 \item{base_color}{Monotone Base Color, works best with a light color..
-Defaults to #cbf7ed. Used in multiple CSS rules.}
+Defaults to #cbf7ed. Used in multiple CSS rules. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--base)} in any argument of a style function or in custom CSS.}
 
 \item{white_color}{Brightest color used, default is a very light version of
 \code{base_color}. Defaults to \code{lighten_color(base_color, 0.8)}. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--white)} in any argument of a
+style function or in custom CSS.}
 
 \item{black_color}{Darkest color used, default is a very dark, version of
 \code{base_color}. Defaults to \code{darken_color(base_color, 0.85)}. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--black)} in any argument of a
+style function or in custom CSS.}
 
 \item{text_color}{Text Color. Defaults to \code{white_color}. Modifies the \code{body}
 element. The value of this variable is also stored as a CSS variable that

man/style_mono_light.Rd

@@ -79,15 +79,21 @@ style_mono_light(
 }
 \arguments{
 \item{base_color}{Monotone base color, works best with a strong color.
-Defaults to #23395b. Used in multiple CSS rules.}
+Defaults to #23395b. Used in multiple CSS rules. The value of this
+variable is also stored as a CSS variable that can be referenced with
+\code{var(--base)} in any argument of a style function or in custom CSS.}
 
 \item{white_color}{Brightest color used, default is a very light version of
 \code{base_color}. Defaults to \code{lighten_color(base_color, 0.9)}. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--white)} in any argument of a
+style function or in custom CSS.}
 
 \item{black_color}{Darkest color used, default is a very dark, version of
 \code{base_color}. Defaults to \code{darken_color(base_color, 0.3)}. Used in
-multiple CSS rules.}
+multiple CSS rules. The value of this variable is also stored as a CSS
+variable that can be referenced with \code{var(--black)} in any argument of a
+style function or in custom CSS.}
 
 \item{text_color}{Text Color. Defaults to \code{black_color}. Modifies the \code{body}
 element. The value of this variable is also stored as a CSS variable that

man/xaringanthemer-package.Rd

@@ -4,12 +4,14 @@
 \name{xaringanthemer-package}
 \alias{xaringanthemer}
 \alias{xaringanthemer-package}
-\title{xaringanthemer: Xaringan CSS Theme Generator}
+\title{xaringanthemer: Custom 'Xaringan' CSS Themes}
 \description{
-Create and edit your xaringan CSS files from within
-    your R R Markdown slide source. More technically, this package
-    actually creates valid remarkjs CSS themes that are easily used by
-    xarangan.
+Create beautifully color-cordinated and customized
+    themes for your 'xaringan' slides, without writing any CSS. Complete
+    your slide theme with 'ggplot2' themes that match the font and colors
+    used in your slides.  Customized styles can be created directly in
+    your slides' 'R Markdown' source file or in a separate external
+    script.
 }
 \seealso{
 Useful links:
@@ -20,7 +22,7 @@ Useful links:
 
 }
 \author{
-\strong{Maintainer}: Garrick Aden-Buie \email{garrick@adenbuie.com}
+\strong{Maintainer}: Garrick Aden-Buie \email{garrick@adenbuie.com} (\href{https://orcid.org/0000-0002-7111-0077}{ORCID})
 
 }
 \keyword{internal}

tests/testthat/css/duo-header_bg.css

@@ -55,6 +55,8 @@
   --title-slide-text-color: #F97B64;
   --header-background-color: #F97B64;
   --header-background-text-color: #1F4257;
+  --primary: #1F4257;
+  --secondary: #F97B64;
 }
 
 html {
@@ -232,3 +234,15 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   }
 }
 
+.primary {
+  color: var(--primary);
+}
+.bg-primary {
+  background-color: var(--primary);
+}
+.secondary {
+  color: var(--secondary);
+}
+.bg-secondary {
+  background-color: var(--secondary);
+}

tests/testthat/css/duo.css

@@ -55,6 +55,8 @@
   --title-slide-text-color: #F97B64;
   --header-background-color: #F97B64;
   --header-background-text-color: #1F4257;
+  --primary: #1F4257;
+  --secondary: #F97B64;
 }
 
 html {
@@ -230,3 +232,15 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   }
 }
 
+.primary {
+  color: var(--primary);
+}
+.bg-primary {
+  background-color: var(--primary);
+}
+.secondary {
+  color: var(--secondary);
+}
+.bg-secondary {
+  background-color: var(--secondary);
+}

tests/testthat/css/duo_accent.css

@@ -55,6 +55,10 @@
   --title-slide-text-color: #FFFFFF;
   --header-background-color: #006747;
   --header-background-text-color: #FFFFFF;
+  --primary: #006747;
+  --secondary: #CFC493;
+  --white: #FFFFFF;
+  --black: #000000;
 }
 
 html {
@@ -230,3 +234,27 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   }
 }
 
+.primary {
+  color: var(--primary);
+}
+.bg-primary {
+  background-color: var(--primary);
+}
+.secondary {
+  color: var(--secondary);
+}
+.bg-secondary {
+  background-color: var(--secondary);
+}
+.white {
+  color: var(--white);
+}
+.bg-white {
+  background-color: var(--white);
+}
+.black {
+  color: var(--black);
+}
+.bg-black {
+  background-color: var(--black);
+}

tests/testthat/css/duo_accent_inverse.css

@@ -55,6 +55,10 @@
   --title-slide-text-color: #FFFFFF;
   --header-background-color: #006747;
   --header-background-text-color: #000000;
+  --primary: #006747;
+  --secondary: #CFC493;
+  --white: #FFFFFF;
+  --black: #000000;
 }
 
 html {
@@ -230,3 +234,27 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   }
 }
 
+.primary {
+  color: var(--primary);
+}
+.bg-primary {
+  background-color: var(--primary);
+}
+.secondary {
+  color: var(--secondary);
+}
+.bg-secondary {
+  background-color: var(--secondary);
+}
+.white {
+  color: var(--white);
+}
+.bg-white {
+  background-color: var(--white);
+}
+.black {
+  color: var(--black);
+}
+.bg-black {
+  background-color: var(--black);
+}

tests/testthat/css/mono_accent.css

@@ -55,6 +55,9 @@
   --title-slide-text-color: #FFFFFF;
   --header-background-color: #43418A;
   --header-background-text-color: #FFFFFF;
+  --base: #43418A;
+  --white: #FFFFFF;
+  --black: #272822;
 }
 
 html {
@@ -230,3 +233,21 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   }
 }
 
+.base {
+  color: var(--base);
+}
+.bg-base {
+  background-color: var(--base);
+}
+.white {
+  color: var(--white);
+}
+.bg-white {
+  background-color: var(--white);
+}
+.black {
+  color: var(--black);
+}
+.bg-black {
+  background-color: var(--black);
+}

tests/testthat/css/mono_accent_inverse.css

@@ -55,6 +55,9 @@
   --title-slide-text-color: #050F0F;
   --header-background-color: #3C989E;
   --header-background-text-color: #050F0F;
+  --base: #3C989E;
+  --white: #FFFFFF;
+  --black: #050F0F;
 }
 
 html {
@@ -230,3 +233,21 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   }
 }
 
+.base {
+  color: var(--base);
+}
+.bg-base {
+  background-color: var(--base);
+}
+.white {
+  color: var(--white);
+}
+.bg-white {
+  background-color: var(--white);
+}
+.black {
+  color: var(--black);
+}
+.bg-black {
+  background-color: var(--black);
+}

tests/testthat/css/mono_dark.css

@@ -55,6 +55,9 @@
   --title-slide-text-color: #1E2523;
   --header-background-color: #cbf7ed;
   --header-background-text-color: #1E2523;
+  --base: #cbf7ed;
+  --white: #F4FDFB;
+  --black: #1E2523;
 }
 
 html {
@@ -230,3 +233,21 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   }
 }
 
+.base {
+  color: var(--base);
+}
+.bg-base {
+  background-color: var(--base);
+}
+.white {
+  color: var(--white);
+}
+.bg-white {
+  background-color: var(--white);
+}
+.black {
+  color: var(--black);
+}
+.bg-black {
+  background-color: var(--black);
+}

tests/testthat/css/mono_light-header_bg.css

@@ -55,6 +55,9 @@
   --title-slide-text-color: #E9EBEE;
   --header-background-color: #23395b;
   --header-background-text-color: #E9EBEE;
+  --base: #23395b;
+  --white: #E9EBEE;
+  --black: #18273F;
 }
 
 html {
@@ -232,3 +235,21 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   }
 }
 
+.base {
+  color: var(--base);
+}
+.bg-base {
+  background-color: var(--base);
+}
+.white {
+  color: var(--white);
+}
+.bg-white {
+  background-color: var(--white);
+}
+.black {
+  color: var(--black);
+}
+.bg-black {
+  background-color: var(--black);
+}

tests/testthat/css/mono_light.css

@@ -55,6 +55,9 @@
   --title-slide-text-color: #E9EBEE;
   --header-background-color: #23395b;
   --header-background-text-color: #E9EBEE;
+  --base: #23395b;
+  --white: #E9EBEE;
+  --black: #18273F;
 }
 
 html {
@@ -230,3 +233,21 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   }
 }
 
+.base {
+  color: var(--base);
+}
+.bg-base {
+  background-color: var(--base);
+}
+.white {
+  color: var(--white);
+}
+.bg-white {
+  background-color: var(--white);
+}
+.black {
+  color: var(--black);
+}
+.bg-black {
+  background-color: var(--black);
+}

tests/testthat/css/xaringan.css

@@ -55,7 +55,6 @@
   --header-background-color: #000;
   --header-background-text-color: #FFF;
   --light-blue: #bad4ed;
-
 }
 
 html {