Fix header_background template variables

header_background_padding is now learned from the slide padding so that left and right margins match

R/css.R

@@ -55,3 +55,17 @@ css_get_root <- function(file) {
   }
   values
 }
+
+css_get_padding <- function(x) {
+  stopifnot(length(x) == 1)
+  x <- trimws(x)
+  x <- as.list(strsplit(x, " ")[[1]])
+  stopifnot(length(x) %in% c(1, 2, 4))
+  names(x) <- c("top", "right", "bottom", "left")[seq_along(x)]
+  list(
+    top = x$top,
+    right = x$right %||% x$top,
+    bottom = x$bottom %||% x$top,
+    left = x$left %||% x$right %||% x$top
+  )
+}

R/style_duo.R

@@ -40,7 +40,7 @@
 #' @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`. 
 #' @param header_background_color Background Color for h1 Header with Background. Defaults to `header_color`. Modifies the `.remark-slide-content h1` class.
 #' @param header_background_text_color Text Color for h1 Header with Background. Defaults to `background_color`. Modifies the `.remark-slide-content h1` class.
-#' @param header_background_padding Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the `.remark-slide-content h1` class.
+#' @param header_background_padding Padding for h1 Header with Background. Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
 #' @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.
 #' @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.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to 0.9rem. Modifies the `.remark-slide-number` class.
@@ -114,7 +114,7 @@ style_duo <- function(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c('normal', 'inverse', 'title', 'middle', 'bottom'),
   text_slide_number_font_size = "0.9rem",

R/style_duo_accent.R

@@ -42,7 +42,7 @@
 #' @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`. 
 #' @param header_background_color Background Color for h1 Header with Background. Defaults to `header_color`. Modifies the `.remark-slide-content h1` class.
 #' @param header_background_text_color Text Color for h1 Header with Background. Defaults to `background_color`. Modifies the `.remark-slide-content h1` class.
-#' @param header_background_padding Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the `.remark-slide-content h1` class.
+#' @param header_background_padding Padding for h1 Header with Background. Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
 #' @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.
 #' @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.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to 0.9rem. Modifies the `.remark-slide-number` class.
@@ -118,7 +118,7 @@ style_duo_accent <- function(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c('normal', 'inverse', 'title', 'middle', 'bottom'),
   text_slide_number_font_size = "0.9rem",

R/style_duo_accent_inverse.R

@@ -42,7 +42,7 @@
 #' @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`. 
 #' @param header_background_color Background Color for h1 Header with Background. Defaults to `header_color`. Modifies the `.remark-slide-content h1` class.
 #' @param header_background_text_color Text Color for h1 Header with Background. Defaults to `background_color`. Modifies the `.remark-slide-content h1` class.
-#' @param header_background_padding Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the `.remark-slide-content h1` class.
+#' @param header_background_padding Padding for h1 Header with Background. Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
 #' @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.
 #' @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.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to 0.9rem. Modifies the `.remark-slide-number` class.
@@ -118,7 +118,7 @@ style_duo_accent_inverse <- function(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c('normal', 'inverse', 'title', 'middle', 'bottom'),
   text_slide_number_font_size = "0.9rem",

R/style_mono_accent.R

@@ -41,7 +41,7 @@
 #' @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`. 
 #' @param header_background_color Background Color for h1 Header with Background. Defaults to `header_color`. Modifies the `.remark-slide-content h1` class.
 #' @param header_background_text_color Text Color for h1 Header with Background. Defaults to `background_color`. Modifies the `.remark-slide-content h1` class.
-#' @param header_background_padding Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the `.remark-slide-content h1` class.
+#' @param header_background_padding Padding for h1 Header with Background. Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
 #' @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.
 #' @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.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to 0.9rem. Modifies the `.remark-slide-number` class.
@@ -116,7 +116,7 @@ style_mono_accent <- function(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c('normal', 'inverse', 'title', 'middle', 'bottom'),
   text_slide_number_font_size = "0.9rem",

R/style_mono_accent_inverse.R

@@ -41,7 +41,7 @@
 #' @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`. 
 #' @param header_background_color Background Color for h1 Header with Background. Defaults to `header_color`. Modifies the `.remark-slide-content h1` class.
 #' @param header_background_text_color Text Color for h1 Header with Background. Defaults to `background_color`. Modifies the `.remark-slide-content h1` class.
-#' @param header_background_padding Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the `.remark-slide-content h1` class.
+#' @param header_background_padding Padding for h1 Header with Background. Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
 #' @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.
 #' @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.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to 0.9rem. Modifies the `.remark-slide-number` class.
@@ -116,7 +116,7 @@ style_mono_accent_inverse <- function(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c('normal', 'inverse', 'title', 'middle', 'bottom'),
   text_slide_number_font_size = "0.9rem",

R/style_mono_dark.R

@@ -41,7 +41,7 @@
 #' @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`. 
 #' @param header_background_color Background Color for h1 Header with Background. Defaults to `header_color`. Modifies the `.remark-slide-content h1` class.
 #' @param header_background_text_color Text Color for h1 Header with Background. Defaults to `background_color`. Modifies the `.remark-slide-content h1` class.
-#' @param header_background_padding Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the `.remark-slide-content h1` class.
+#' @param header_background_padding Padding for h1 Header with Background. Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
 #' @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.
 #' @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.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to 0.9rem. Modifies the `.remark-slide-number` class.
@@ -116,7 +116,7 @@ style_mono_dark <- function(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c('normal', 'inverse', 'title', 'middle', 'bottom'),
   text_slide_number_font_size = "0.9rem",

R/style_mono_light.R

@@ -41,7 +41,7 @@
 #' @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`. 
 #' @param header_background_color Background Color for h1 Header with Background. Defaults to `header_color`. Modifies the `.remark-slide-content h1` class.
 #' @param header_background_text_color Text Color for h1 Header with Background. Defaults to `background_color`. Modifies the `.remark-slide-content h1` class.
-#' @param header_background_padding Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the `.remark-slide-content h1` class.
+#' @param header_background_padding Padding for h1 Header with Background. Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
 #' @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.
 #' @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.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to 0.9rem. Modifies the `.remark-slide-number` class.
@@ -116,7 +116,7 @@ style_mono_light <- function(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c('normal', 'inverse', 'title', 'middle', 'bottom'),
   text_slide_number_font_size = "0.9rem",

R/style_solarized_dark.R

@@ -38,7 +38,7 @@
 #' @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`. 
 #' @param header_background_color Background Color for h1 Header with Background. Defaults to `header_color`. Modifies the `.remark-slide-content h1` class.
 #' @param header_background_text_color Text Color for h1 Header with Background. Defaults to `background_color`. Modifies the `.remark-slide-content h1` class.
-#' @param header_background_padding Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the `.remark-slide-content h1` class.
+#' @param header_background_padding Padding for h1 Header with Background. Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
 #' @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.
 #' @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.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to 0.9rem. Modifies the `.remark-slide-number` class.
@@ -110,7 +110,7 @@ style_solarized_dark <- function(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c('normal', 'inverse', 'title', 'middle', 'bottom'),
   text_slide_number_font_size = "0.9rem",

R/style_solarized_light.R

@@ -38,7 +38,7 @@
 #' @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`. 
 #' @param header_background_color Background Color for h1 Header with Background. Defaults to `header_color`. Modifies the `.remark-slide-content h1` class.
 #' @param header_background_text_color Text Color for h1 Header with Background. Defaults to `background_color`. Modifies the `.remark-slide-content h1` class.
-#' @param header_background_padding Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the `.remark-slide-content h1` class.
+#' @param header_background_padding Padding for h1 Header with Background. Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
 #' @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.
 #' @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.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to 0.9rem. Modifies the `.remark-slide-number` class.
@@ -110,7 +110,7 @@ style_solarized_light <- function(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c('normal', 'inverse', 'title', 'middle', 'bottom'),
   text_slide_number_font_size = "0.9rem",

R/style_xaringan.R

@@ -38,7 +38,7 @@
 #' @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`. 
 #' @param header_background_color Background Color for h1 Header with Background. Defaults to `header_color`. Modifies the `.remark-slide-content h1` class.
 #' @param header_background_text_color Text Color for h1 Header with Background. Defaults to `background_color`. Modifies the `.remark-slide-content h1` class.
-#' @param header_background_padding Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the `.remark-slide-content h1` class.
+#' @param header_background_padding Padding for h1 Header with Background. Defaults to `NULL`. Modifies the `.remark-slide-content h1` class.
 #' @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.
 #' @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.
 #' @param text_slide_number_font_size Slide Number Text Font Size. Defaults to 0.9rem. Modifies the `.remark-slide-number` class.
@@ -109,7 +109,7 @@ style_xaringan <- function(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c('normal', 'inverse', 'title', 'middle', 'bottom'),
   text_slide_number_font_size = "0.9rem",
@@ -212,6 +212,12 @@ style_xaringan <- function(
     header_background_ignore_classes,
     ~ list(class = .)
   )
+  if (is.null(header_background_padding)) {
+    slide_padding <- css_get_padding(padding)
+    header_background_padding <- paste(
+      "2rem", slide_padding$right, "1.5rem", slide_padding$left
+    )
+  }
   header_background <- list(
     auto = header_background_auto,
     background_color = header_background_color,

R/theme_settings.R

@@ -41,7 +41,7 @@ template_variables <- tibble::tribble(
   , "header_background_auto", "{FALSE}", "", "Add background under slide title automatically for h1 header elements. If not enabled, use `class: header_background` to enable"
   , "header_background_color", "{header_color}", ".remark-slide-content h1", "Background Color for h1 Header with Background"
   , "header_background_text_color", "{background_color}", ".remark-slide-content h1", "Text Color for h1 Header with Background"
-  , "header_background_padding", "2rem 4rem 1.5rem 4rem", ".remark-slide-content h1", "Padding for h1 Header with Background"
+  , "header_background_padding", NULL, ".remark-slide-content h1", "Padding for h1 Header with Background"
   , "header_background_content_padding_top", "7rem", ".remark-slide-content", "Top Padding for Content in Slide with Header with Background"
   , "header_background_ignore_classes", "{c('normal', 'inverse', 'title', 'middle', 'bottom')}", ".remark-slide-content", "Slide Classes Where Header with Background will not be Applied"
   , "text_slide_number_font_size", "0.9rem", ".remark-slide-number", "Slide Number Text Font Size"

inst/resources/template.css

@@ -54,7 +54,9 @@
   --inverse-background-color: {{inverse_background_color}};
   --inverse-header-color: {{inverse_header_color}};
   --title-slide-background-color: {{title_slide_background_color}};
-  --title-slide-text-color: {{title_slide_text_color}};{{#colors}}
+  --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}}
 
@@ -223,8 +225,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
   padding: {{padding}};
   margin-top: 0;
   box-sizing: border-box;

inst/scripts/style_xaringan_body.R

@@ -76,6 +76,12 @@ header_background_ignore_classes <- purrr::map(
   header_background_ignore_classes,
   ~ list(class = .)
 )
+if (is.null(header_background_padding)) {
+  slide_padding <- css_get_padding(padding)
+  header_background_padding <- paste(
+    "2rem", slide_padding$right, "1.5rem", slide_padding$left
+  )
+}
 header_background <- list(
   auto = header_background_auto,
   background_color = header_background_color,

man/style_duo.Rd

@@ -48,7 +48,7 @@ style_duo(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c("normal", "inverse", "title", "middle", "bottom"),
   text_slide_number_font_size = "0.9rem",
@@ -160,7 +160,7 @@ style_duo(
 
 \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.}
 
-\item{header_background_padding}{Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the \verb{.remark-slide-content h1} class.}
+\item{header_background_padding}{Padding for h1 Header with Background. Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
 
 \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.}
 

man/style_duo_accent.Rd

@@ -51,7 +51,7 @@ style_duo_accent(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c("normal", "inverse", "title", "middle", "bottom"),
   text_slide_number_font_size = "0.9rem",
@@ -167,7 +167,7 @@ style_duo_accent(
 
 \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.}
 
-\item{header_background_padding}{Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the \verb{.remark-slide-content h1} class.}
+\item{header_background_padding}{Padding for h1 Header with Background. Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
 
 \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.}
 

man/style_duo_accent_inverse.Rd

@@ -52,7 +52,7 @@ style_duo_accent_inverse(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c("normal", "inverse", "title", "middle", "bottom"),
   text_slide_number_font_size = "0.9rem",
@@ -168,7 +168,7 @@ style_duo_accent_inverse(
 
 \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.}
 
-\item{header_background_padding}{Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the \verb{.remark-slide-content h1} class.}
+\item{header_background_padding}{Padding for h1 Header with Background. Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
 
 \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.}
 

man/style_mono_accent.Rd

@@ -48,7 +48,7 @@ style_mono_accent(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c("normal", "inverse", "title", "middle", "bottom"),
   text_slide_number_font_size = "0.9rem",
@@ -162,7 +162,7 @@ style_mono_accent(
 
 \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.}
 
-\item{header_background_padding}{Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the \verb{.remark-slide-content h1} class.}
+\item{header_background_padding}{Padding for h1 Header with Background. Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
 
 \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.}
 

man/style_mono_accent_inverse.Rd

@@ -48,7 +48,7 @@ style_mono_accent_inverse(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c("normal", "inverse", "title", "middle", "bottom"),
   text_slide_number_font_size = "0.9rem",
@@ -162,7 +162,7 @@ style_mono_accent_inverse(
 
 \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.}
 
-\item{header_background_padding}{Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the \verb{.remark-slide-content h1} class.}
+\item{header_background_padding}{Padding for h1 Header with Background. Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
 
 \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.}
 

man/style_mono_dark.Rd

@@ -48,7 +48,7 @@ style_mono_dark(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c("normal", "inverse", "title", "middle", "bottom"),
   text_slide_number_font_size = "0.9rem",
@@ -162,7 +162,7 @@ style_mono_dark(
 
 \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.}
 
-\item{header_background_padding}{Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the \verb{.remark-slide-content h1} class.}
+\item{header_background_padding}{Padding for h1 Header with Background. Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
 
 \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.}
 

man/style_mono_light.Rd

@@ -48,7 +48,7 @@ style_mono_light(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c("normal", "inverse", "title", "middle", "bottom"),
   text_slide_number_font_size = "0.9rem",
@@ -162,7 +162,7 @@ style_mono_light(
 
 \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.}
 
-\item{header_background_padding}{Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the \verb{.remark-slide-content h1} class.}
+\item{header_background_padding}{Padding for h1 Header with Background. Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
 
 \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.}
 

man/style_solarized_dark.Rd

@@ -45,7 +45,7 @@ style_solarized_dark(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c("normal", "inverse", "title", "middle", "bottom"),
   text_slide_number_font_size = "0.9rem",
@@ -153,7 +153,7 @@ style_solarized_dark(
 
 \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.}
 
-\item{header_background_padding}{Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the \verb{.remark-slide-content h1} class.}
+\item{header_background_padding}{Padding for h1 Header with Background. Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
 
 \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.}
 

man/style_solarized_light.Rd

@@ -45,7 +45,7 @@ style_solarized_light(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c("normal", "inverse", "title", "middle", "bottom"),
   text_slide_number_font_size = "0.9rem",
@@ -153,7 +153,7 @@ style_solarized_light(
 
 \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.}
 
-\item{header_background_padding}{Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the \verb{.remark-slide-content h1} class.}
+\item{header_background_padding}{Padding for h1 Header with Background. Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
 
 \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.}
 

man/style_xaringan.Rd

@@ -45,7 +45,7 @@ style_xaringan(
   header_background_auto = FALSE,
   header_background_color = header_color,
   header_background_text_color = background_color,
-  header_background_padding = "2rem 4rem 1.5rem 4rem",
+  header_background_padding = NULL,
   header_background_content_padding_top = "7rem",
   header_background_ignore_classes = c("normal", "inverse", "title", "middle", "bottom"),
   text_slide_number_font_size = "0.9rem",
@@ -153,7 +153,7 @@ style_xaringan(
 
 \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.}
 
-\item{header_background_padding}{Padding for h1 Header with Background. Defaults to 2rem 4rem 1.5rem 4rem. Modifies the \verb{.remark-slide-content h1} class.}
+\item{header_background_padding}{Padding for h1 Header with Background. Defaults to \code{NULL}. Modifies the \verb{.remark-slide-content h1} class.}
 
 \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.}
 

tests/testthat/css/duo-header_bg.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #FEFDFD;
@@ -52,10 +53,12 @@
   --inverse-header-color: #1F4257;
   --title-slide-background-color: #1F4257;
   --title-slide-text-color: #F97B64;
+  --header-background-color: #F97B64;
+  --header-background-text-color: #1F4257;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #FEFDFD;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -204,9 +208,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/duo.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #FEFDFD;
@@ -52,10 +53,12 @@
   --inverse-header-color: #1F4257;
   --title-slide-background-color: #1F4257;
   --title-slide-text-color: #F97B64;
+  --header-background-color: #F97B64;
+  --header-background-text-color: #1F4257;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #FEFDFD;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -203,9 +207,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/duo_accent.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #000000;
@@ -52,10 +53,12 @@
   --inverse-header-color: #000000;
   --title-slide-background-color: #006747;
   --title-slide-text-color: #FFFFFF;
+  --header-background-color: #006747;
+  --header-background-text-color: #FFFFFF;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #006747;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -203,9 +207,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/duo_accent_inverse.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #FFFFFF;
@@ -52,10 +53,12 @@
   --inverse-header-color: #000000;
   --title-slide-background-color: #006747;
   --title-slide-text-color: #FFFFFF;
+  --header-background-color: #006747;
+  --header-background-text-color: #000000;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #006747;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -203,9 +207,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/mono_accent.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #272822;
@@ -52,10 +53,12 @@
   --inverse-header-color: #FFFFFF;
   --title-slide-background-color: #43418A;
   --title-slide-text-color: #FFFFFF;
+  --header-background-color: #43418A;
+  --header-background-text-color: #FFFFFF;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #43418A;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -203,9 +207,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/mono_accent_inverse.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #FFFFFF;
@@ -52,10 +53,12 @@
   --inverse-header-color: #050F0F;
   --title-slide-background-color: #3C989E;
   --title-slide-text-color: #050F0F;
+  --header-background-color: #3C989E;
+  --header-background-text-color: #050F0F;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #3C989E;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -203,9 +207,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/mono_dark.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #F4FDFB;
@@ -52,10 +53,12 @@
   --inverse-header-color: #1E2523;
   --title-slide-background-color: #cbf7ed;
   --title-slide-text-color: #1E2523;
+  --header-background-color: #cbf7ed;
+  --header-background-text-color: #1E2523;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #cbf7ed;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -203,9 +207,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/mono_light-header_bg.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #18273F;
@@ -52,10 +53,12 @@
   --inverse-header-color: #E9EBEE;
   --title-slide-background-color: #23395b;
   --title-slide-text-color: #E9EBEE;
+  --header-background-color: #23395b;
+  --header-background-text-color: #E9EBEE;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #23395b;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -204,9 +208,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/mono_light.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #18273F;
@@ -52,10 +53,12 @@
   --inverse-header-color: #E9EBEE;
   --title-slide-background-color: #23395b;
   --title-slide-text-color: #E9EBEE;
+  --header-background-color: #23395b;
+  --header-background-text-color: #E9EBEE;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #23395b;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -203,9 +207,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/solarized_dark-header_bg.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #839496;
@@ -52,10 +53,12 @@
   --inverse-header-color: #002b36;
   --title-slide-background-color: #fdf6e3;
   --title-slide-text-color: #002b36;
+  --header-background-color: #dc322f;
+  --header-background-text-color: #002b36;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #586e75;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -204,9 +208,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/solarized_dark.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #839496;
@@ -52,10 +53,12 @@
   --inverse-header-color: #002b36;
   --title-slide-background-color: #fdf6e3;
   --title-slide-text-color: #002b36;
+  --header-background-color: #dc322f;
+  --header-background-text-color: #002b36;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #586e75;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -203,9 +207,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/solarized_light.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #657b83;
@@ -52,10 +53,12 @@
   --inverse-header-color: #fdf6e3;
   --title-slide-background-color: #002b36;
   --title-slide-text-color: #fdf6e3;
+  --header-background-color: #dc322f;
+  --header-background-text-color: #fdf6e3;
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -70,7 +73,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -94,7 +98,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #93a1a1;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 strong { color: var(--text-bold-color); }
 a, a > code {
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -203,9 +207,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/css/xaringan.css

@@ -33,12 +33,13 @@
   --header-font-is-google: 0;
   --code-font-family: 'Source Code Pro';
   --code-font-is-google: 0;
-  --text-font-size: 20px;
-  --code-font-size: 0.9em;
-  --code-inline-font-size: 1em;
-  --header-h1-font-size: 55px;
-  --header-h2-font-size: 45px;
-  --header-h3-font-size: 35px;
+  --base-font-size: 20px;
+  --text-font-size: 1rem;
+  --code-font-size: 0.9rem;
+  --code-inline-font-size: 1rem;
+  --header-h1-font-size: 2.75rem;
+  --header-h2-font-size: 2.25rem;
+  --header-h3-font-size: 1.75rem;
 
   /* Colors */
   --text-color: #000;
@@ -51,12 +52,14 @@
   --inverse-header-color: #f3f3f3;
   --title-slide-background-color: #272822;
   --title-slide-text-color: #d6d6d6;
+  --header-background-color: #000;
+  --header-background-text-color: #FFF;
   --light-blue: #bad4ed;
 
 }
 
 html {
-  font-size: var(--text-font-size);
+  font-size: var(--base-font-size);
 }
 
 body {
@@ -71,7 +74,8 @@ h1, h2, h3 {
 }
 .remark-slide-content {
   background-color: var(--background-color);
-  padding: 1rem 4rem 1rem 4rem;
+  font-size: 1rem;
+  padding: 16px 64px 16px 64px;
 }
 .remark-slide-content h1 {
   font-size: var(--header-h1-font-size);
@@ -95,7 +99,7 @@ h1, h2, h3 {
 .remark-slide-number {
   color: #272822;
   opacity: 1;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 a, a > code {
   color: var(--link-color);
@@ -103,9 +107,9 @@ a, a > code {
 }
 .footnote {
   position: absolute;
-  bottom: 3em;
+  bottom: 60px;
   padding-right: 4em;
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 .remark-code-line-highlighted {
   background-color: var(--code-highlight-color);
@@ -203,9 +207,9 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: var(--background-color);
-  color: var(--text-color);
-  padding: 2rem 4rem 1.5rem 4rem;
+  background: var(--header-background-color);
+  color: var(--header-background-text-color);
+  padding: 2rem 64px 1.5rem 64px;
   margin-top: 0;
   box-sizing: border-box;
 }

tests/testthat/test-css.R

@@ -7,12 +7,15 @@ test_that("read theme settings from css variables", {
     inverse_background_color = "#23395b",
     inverse_text_color = "#E9EBEE",
     inverse_header_color = "#E9EBEE",
-    text_font_size = "20px",
-    header_h3_font_size = "35px",
+    base_font_size = "20px",
+    text_font_size = "1rem",
+    header_h3_font_size = "1.75rem",
     text_font_family = "'Noto Serif'",
     text_font_is_google = TRUE,
     header_font_family = "'Yanone Kaffeesatz'",
     header_font_is_google = FALSE,
+    header_background_color = "#23395b",
+    header_background_text_color = "#E9EBEE",
     code_font_family = "'Source Code Pro'",
     code_font_is_google = FALSE
   )
@@ -90,3 +93,34 @@ test_that("css_get_root() returns null if no :root exists", {
   expect_null(css_get_root(tmpfile))
   unlink(tmpfile)
 })
+
+describe("css_get_padding()", {
+  it("processes 1 element padding", {
+    p <- css_get_padding("1em")
+    expect_equal(p$top,    "1em")
+    expect_equal(p$right,  "1em")
+    expect_equal(p$bottom, "1em")
+    expect_equal(p$left,   "1em")
+  })
+  it("processes 2 element padding", {
+    p <- css_get_padding("1em 2em")
+    expect_equal(p$top,    "1em")
+    expect_equal(p$right,  "2em")
+    expect_equal(p$bottom, "1em")
+    expect_equal(p$left,   "2em")
+  })
+  it("processes 4 element padding", {
+    p <- css_get_padding("1em 2em 3em 4em")
+    expect_equal(p$top,    "1em")
+    expect_equal(p$right,  "2em")
+    expect_equal(p$bottom, "3em")
+    expect_equal(p$left,   "4em")
+  })
+  it("throws an error if padding is a vector", {
+    expect_error(css_get_padding(c("1em", "2em")))
+  })
+  it("throws an error if result is not 1, 2, 4 element", {
+    expect_error(css_get_padding("1em 2em 3em"))
+    expect_error(css_get_padding("1em 2em 3em 4em 5em"))
+  })
+})