CSS modifications (#346)

* Use lighter color for internal table lines * Change colors and padding amounts * Use `gray20` as the default for dark text * Modify several testthat tests * Add `row.striping.background_color` option * Add options for font color (light/dark)
rstudio · Aug 8, 2019 · f620501 · f620501
1 parent f2dabf4
commit f620501
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 37 deletions.
diff --git a/R/gt_options_default.R b/R/gt_options_default.R
@@ -5,8 +5,10 @@ gt_options_default <- function() {
     "empty",                             FALSE,  "empty",            "value",   list(),
     "container_width",                   FALSE,  "container",        "px",      "auto",
     "container_height",                  FALSE,  "container",        "px",      "auto",
-    "container_overflow_x",              FALSE,  "container",        "overflow",  "auto",
-    "container_overflow_y",              FALSE,  "container",        "overflow",  "auto",
+    "container_overflow_x",              FALSE,  "container",        "overflow","auto",
+    "container_overflow_y",              FALSE,  "container",        "overflow","auto",
+    "font_color",                         TRUE,  "table",            "value",   "#333333",
+    "font_color_light",                   TRUE,  "table",            "value",   "#FFFFFF",
     "table_id",                          FALSE,  "table",            "value",   NA_character_,
     "table_width",                        TRUE,  "table",            "px",      "auto",
     "table_font_size",                    TRUE,  "table",            "px",      "16px",
@@ -24,33 +26,33 @@ gt_options_default <- function() {
     "heading_subtitle_font_size",         TRUE,  "heading",          "px",      "85%",
     "heading_border_bottom_style",        TRUE,  "heading",          "value",   "solid",
     "heading_border_bottom_width",        TRUE,  "heading",          "px",      "2px",
-    "heading_border_bottom_color",        TRUE,  "heading",          "value",   "#A8A8A8",
+    "heading_border_bottom_color",        TRUE,  "heading",          "value",   "#D3D3D3",
     "column_labels_background_color",     TRUE,  "columns",          "value",   NA_character_,
     "column_labels_font_size",            TRUE,  "columns",          "px",      "16px",
     "column_labels_font_weight",          TRUE,  "columns",          "value",   "initial",
     "column_labels_hidden",              FALSE,  "columns",          "logical", FALSE,
     "columns_border_top_style",           TRUE,  "columns",          "value",   "solid",
     "columns_border_top_width",           TRUE,  "columns",          "px",      "2px",
-    "columns_border_top_color",           TRUE,  "columns",          "value",   "#A8A8A8",
+    "columns_border_top_color",           TRUE,  "columns",          "value",   "#D3D3D3",
     "columns_border_bottom_style",        TRUE,  "columns",          "value",   "solid",
     "columns_border_bottom_width",        TRUE,  "columns",          "px",      "2px",
-    "columns_border_bottom_color",        TRUE,  "columns",          "value",   "#A8A8A8",
+    "columns_border_bottom_color",        TRUE,  "columns",          "value",   "#D3D3D3",
     "row_group_padding",                  TRUE,  "row_group",        "px",      "8px",
     "row_group_background_color",         TRUE,  "row_group",        "value",   NA_character_,
     "row_group_font_size",                TRUE,  "row_group",        "px",      "16px",
     "row_group_font_weight",              TRUE,  "row_group",        "value",   "initial",
     "row_group_border_top_style",         TRUE,  "row_group",        "value",   "solid",
     "row_group_border_top_width",         TRUE,  "row_group",        "px",      "2px",
-    "row_group_border_top_color",         TRUE,  "row_group",        "value",   "#A8A8A8",
+    "row_group_border_top_color",         TRUE,  "row_group",        "value",   "#D3D3D3",
     "row_group_border_bottom_style",      TRUE,  "row_group",        "value",   "solid",
     "row_group_border_bottom_width",      TRUE,  "row_group",        "px",      "2px",
-    "row_group_border_bottom_color",      TRUE,  "row_group",        "value",   "#A8A8A8",
+    "row_group_border_bottom_color",      TRUE,  "row_group",        "value",   "#D3D3D3",
     "table_body_border_top_style",        TRUE,  "table_body",       "value",   "solid",
     "table_body_border_top_width",        TRUE,  "table_body",       "px",      "2px",
-    "table_body_border_top_color",        TRUE,  "table_body",       "value",   "#A8A8A8",
+    "table_body_border_top_color",        TRUE,  "table_body",       "value",   "#D3D3D3",
     "table_body_border_bottom_style",     TRUE,  "table_body",       "value",   "solid",
     "table_body_border_bottom_width",     TRUE,  "table_body",       "px",      "2px",
-    "table_body_border_bottom_color",     TRUE,  "table_body",       "value",   "#A8A8A8",
+    "table_body_border_bottom_color",     TRUE,  "table_body",       "value",   "#D3D3D3",
     "row_padding",                        TRUE,  "row",              "px",      "8px",
     "summary_row_padding",                TRUE,  "summary_row",      "px",      "8px",
     "summary_row_background_color",       TRUE,  "summary_row",      "value",   NA_character_,
@@ -62,15 +64,16 @@ gt_options_default <- function() {
     "footnote_margin",                    TRUE,  "footnote",         "px",      "0px",
     "footnotes_border_top_style",         TRUE,  "footnote",         "value",   "solid",
     "footnotes_border_top_width",         TRUE,  "footnote",         "px",      "2px",
-    "footnotes_border_top_color",         TRUE,  "footnote",         "value",   "#A8A8A8",
+    "footnotes_border_top_color",         TRUE,  "footnote",         "value",   "#D3D3D3",
     "footnote_sep",                      FALSE,  "footnote",         "value",   "<br />",
     "footnote_marks" ,                   FALSE,  "footnote",         "values",  "numbers",
     "footnote_font_size",                 TRUE,  "footnote",         "px",      "90%",
     "sourcenote_padding",                 TRUE,  "sourcenote",       "px",      "4px",
     "sourcenote_font_size",               TRUE,  "sourcenote",       "px",      "90%",
     "sourcenotes_border_top_style",       TRUE,  "sourcenote",       "value",   "solid",
     "sourcenotes_border_top_width",       TRUE,  "sourcenote",       "px",      "2px",
-    "sourcenotes_border_top_color",       TRUE,  "sourcenote",       "value",   "#A8A8A8",
+    "sourcenotes_border_top_color",       TRUE,  "sourcenote",       "value",   "#D3D3D3",
+    "row_striping_background_color",      TRUE,  "row",              "value",   "#8080800D",
     "row_striping_include_stub",         FALSE,  "row",              "logical", FALSE,
     "row_striping_include_table_body",   FALSE,  "row",              "logical", TRUE,
     )[-1, ]

diff --git a/R/tab_options.R b/R/tab_options.R
@@ -42,6 +42,9 @@
 #'   the value is given in units of pixels. The [px()] and [pct()] helper
 #'   functions can also be used to pass in numeric values and obtain values as
 #'   pixel or percent units.
+#' @param font.color The table font color, for text used throughout the table.
+#' @param font.color.light The table font color when text is required to be
+#'   light, due to darker background colors.
 #' @param column_labels.font.weight,row_group.font.weight The font weight of
 #'   the `columns` and `row_group` text element.
 #' @param summary_row.text_transform,grand_summary_row.text_transform An option
@@ -79,6 +82,8 @@
 #'   symbols, making six.
 #' @param footnote.padding,sourcenote.padding The amount of padding to apply to
 #'   the footnote and source note sections.
+#' @param row.striping.background_color The background color for striped table
+#'   body rows.
 #' @param row.striping.include_stub An option for whether to include the stub
 #'   when striping rows.
 #' @param row.striping.include_table_body An option for whether to include the
@@ -184,6 +189,8 @@ tab_options <- function(data,
                         container.height = NULL,
                         container.overflow.x = NULL,
                         container.overflow.y = NULL,
+                        font.color = NULL,
+                        font.color.light = NULL,
                         table.width = NULL,
                         table.align = NULL,
                         table.margin.left = NULL,
@@ -232,6 +239,7 @@ tab_options <- function(data,
                         footnote.padding = NULL,
                         sourcenote.font.size = NULL,
                         sourcenote.padding = NULL,
+                        row.striping.background_color = NULL,
                         row.striping.include_stub = NULL,
                         row.striping.include_table_body = NULL) {
 

diff --git a/inst/css/gt_colors.scss b/inst/css/gt_colors.scss
@@ -8,6 +8,6 @@ $grand_summary_row_background_color: $table_background_color !default;
 @function font-color($color) {
   @return if(
     red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114 > 186,
-    #000000, #ffffff
+    $font_color, $font_color_light
   );
 }
diff --git a/inst/css/gt_styles_default.scss b/inst/css/gt_styles_default.scss
@@ -25,7 +25,7 @@
   .gt_title {
     color: font-color($heading_background_color);
     font-size: $heading_title_font_size; /* heading.title.font.size */
-    padding-top: 4px; /* heading.top.padding */
+    padding-top: 4px; /* heading.top.padding - not yet used */
     padding-bottom: 4px;
     border-bottom-color: $table_background_color;
     border-bottom-width: 0;
@@ -34,8 +34,8 @@
   .gt_subtitle {
     color: font-color($heading_background_color);
     font-size: $heading_subtitle_font_size; /* heading.subtitle.font.size */
-    padding-top: 2px;
-    padding-bottom: 2px; /* heading.bottom.padding */
+    padding-top: 0;
+    padding-bottom: 4px; /* heading.bottom.padding - not yet used */
     border-top-color: $table_background_color;
     border-top-width: 0;
   }
@@ -49,7 +49,7 @@
   .gt_column_spanner {
     border-bottom-style: solid;
     border-bottom-width: 2px;
-    border-bottom-color: #A8A8A8;
+    border-bottom-color: #D3D3D3;
     padding-top: 4px;
     padding-bottom: 4px;
   }
@@ -60,7 +60,7 @@
     font-size: $column_labels_font_size; /* column_labels.font.size */
     font-weight: $column_labels_font_weight; /* column_labels.font.weight */
     vertical-align: middle;
-    padding: 10px;
+    padding: 5px;
     margin: 10px;
     overflow-x: hidden;
   }
@@ -112,7 +112,7 @@
   }
 
   .gt_striped {
-     background-color: darken($table_background_color, 5%);
+     background-color: $row_striping_background_color;
   }
 
   .gt_from_md > :first-child {
@@ -126,14 +126,17 @@
   .gt_row {
     padding: $row_padding; /* row.padding */
     margin: 10px;
+    border-bottom-style: solid;
+    border-bottom-width: thin;
+    border-bottom-color: #D3D3D3;
     vertical-align: middle;
     overflow-x: hidden;
   }
 
   .gt_stub {
     border-right-style: solid;
     border-right-width: 2px;
-    border-right-color: #A8A8A8;
+    border-right-color: #D3D3D3;
     padding-left: 12px;
   }
 
@@ -154,13 +157,13 @@
   .gt_first_summary_row {
     border-top-style: solid;
     border-top-width: 2px;
-    border-top-color: #A8A8A8;
+    border-top-color: #D3D3D3;
   }
 
   .gt_first_grand_summary_row {
     border-top-style: double;
     border-top-width: 6px;
-    border-top-color: #A8A8A8;
+    border-top-color: #D3D3D3;
   }
 
   .gt_table_body {

diff --git a/man/tab_options.Rd b/man/tab_options.Rd
diff --git a/tests/testthat/test-tab_options.R b/tests/testthat/test-tab_options.R
@@ -292,7 +292,7 @@ test_that("the internal `opts_df` table can be correctly modified", {
   c(opts_df_1 %>% opts_df_get("heading_border_bottom_color"),
     attr(tbl_html, "opts_df", exact = TRUE) %>% opts_df_get("heading_border_bottom_color")
   ) %>%
-    expect_equal(c("#A8A8A8", "purple"))
+    expect_equal(c("#D3D3D3", "purple"))
 
   # Modify the `column_labels.font.size`
   tbl_html <- data %>% tab_options(column_labels.font.size = px(18))
@@ -400,7 +400,7 @@ test_that("the internal `opts_df` table can be correctly modified", {
   c(opts_df_1 %>% opts_df_get("row_group_border_top_color"),
     attr(tbl_html, "opts_df", exact = TRUE) %>% opts_df_get("row_group_border_top_color")
   ) %>%
-    expect_equal(c("#A8A8A8", "blue"))
+    expect_equal(c("#D3D3D3", "blue"))
 
   # Modify the `row_group.border.bottom.style`
   tbl_html <- data %>% tab_options(row_group.border.bottom.style = "dashed")
@@ -436,7 +436,7 @@ test_that("the internal `opts_df` table can be correctly modified", {
   c(opts_df_1 %>% opts_df_get("row_group_border_bottom_color"),
     attr(tbl_html, "opts_df", exact = TRUE) %>% opts_df_get("row_group_border_bottom_color")
   ) %>%
-    expect_equal(c("#A8A8A8", "orange"))
+    expect_equal(c("#D3D3D3", "orange"))
 
   # Modify the `table_body.border.top.style`
   tbl_html <- data %>% tab_options(table_body.border.top.style = "dotted")
@@ -472,7 +472,7 @@ test_that("the internal `opts_df` table can be correctly modified", {
   c(opts_df_1 %>% opts_df_get("table_body_border_top_color"),
     attr(tbl_html, "opts_df", exact = TRUE) %>% opts_df_get("table_body_border_top_color")
   ) %>%
-    expect_equal(c("#A8A8A8", "red"))
+    expect_equal(c("#D3D3D3", "red"))
 
   # Modify the `table_body.border.bottom.style`
   tbl_html <- data %>% tab_options(table_body.border.bottom.style = "dotted")
@@ -508,7 +508,7 @@ test_that("the internal `opts_df` table can be correctly modified", {
   c(opts_df_1 %>% opts_df_get("table_body_border_bottom_color"),
     attr(tbl_html, "opts_df", exact = TRUE) %>% opts_df_get("table_body_border_bottom_color")
   ) %>%
-    expect_equal(c("#A8A8A8", "red"))
+    expect_equal(c("#D3D3D3", "red"))
 
   # Modify the `row.padding`
   tbl_html <- data %>% tab_options(row.padding = px(8))

diff --git a/tests/testthat/test-util_functions.R b/tests/testthat/test-util_functions.R
@@ -360,7 +360,7 @@ test_that("the `get_css_tbl()` function works correctly", {
 
   css_tbl %>% expect_is(c("tbl_df", "tbl", "data.frame"))
 
-  css_tbl %>% dim() %>% expect_equal(c(128, 4))
+  css_tbl %>% dim() %>% expect_equal(c(131, 4))
 
   css_tbl %>%
     colnames() %>%
@@ -387,7 +387,7 @@ test_that("the `inline_html_styles()` function works correctly", {
         "style=\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', ",
         "Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', ",
         "'Droid Sans', Arial, sans-serif; display: table; border-collapse: ",
-        "collapse; margin-left: auto; margin-right: auto; color: #000000; ",
+        "collapse; margin-left: auto; margin-right: auto; color: #333333; ",
         "font-size: 16px; background-color: #FFFFFF; width: auto; ",
         "border-top-style: solid; border-top-width: 2px; border-top-color: ",
         "#A8A8A8; border-bottom-style: solid; border-bottom-width: 2px; ",
@@ -400,12 +400,12 @@ test_that("the `inline_html_styles()` function works correctly", {
   expect_true(
     grepl(
       paste0(
-        "style=\"color: #000000; background-color: #FFFFFF; font-size: ",
+        "style=\"color: #333333; background-color: #FFFFFF; font-size: ",
         "16px; font-weight: initial; vertical-align: middle; padding: ",
-        "10px; margin: 10px; overflow-x: hidden; border-top-style: solid; ",
-        "border-top-width: 2px; border-top-color: #A8A8A8; ",
+        "5px; margin: 10px; overflow-x: hidden; border-top-style: solid; ",
+        "border-top-width: 2px; border-top-color: #D3D3D3; ",
         "border-bottom-style: solid; border-bottom-width: 2px; ",
-        "border-bottom-color: #A8A8A8; text-align: center;\""
+        "border-bottom-color: #D3D3D3; text-align: center;\""
       ),
       inlined_html
     )
@@ -431,9 +431,10 @@ test_that("the `inline_html_styles()` function works correctly", {
   expect_true(
     grepl(
       paste0(
-        "style=\"padding: 8px; margin: 10px; vertical-align: middle; ",
-        "overflow-x: hidden; text-align: right; font-variant-numeric: ",
-        "tabular-nums; font-size: 10px;\""
+        "style=\"padding: 8px; margin: 10px; border-bottom-style: solid; ",
+        "border-bottom-width: thin; border-bottom-color: #D3D3D3; ",
+        "vertical-align: middle; overflow-x: hidden; text-align: right; ",
+        "font-variant-numeric: tabular-nums; font-size: 10px;\""
       ),
       inlined_html
     )