Transparent scroll bar backgrounds (#76)

gadenbuie · Nov 12, 2021 · b93fc1f · b93fc1f
1 parent 0c29096
commit b93fc1f
Show file tree

Hide file tree

Showing 128 changed files with 1,515 additions and 446 deletions.
diff --git a/NEWS.md b/NEWS.md
@@ -23,6 +23,9 @@
 
 * New theme: Serendipity Dark and Light, based on the 
   [VS Code theme from wickedtemplates](https://wvsc.dev) (#73).
+
+* Backgrounds of scrollbars are now transparent and don't hide the code
+  underneath the scrollbar (thanks @dragosmg, #75).
 
 # rsthemes 0.2.0 (2020-12-07)
 

diff --git a/R/create.R b/R/create.R
@@ -46,7 +46,7 @@
 #' @param ui_rstudio_toolbar_background Default: `$ui_rstudio_tabs_active_background`
 #' @param ui_rstudio_toolbar_foreground Default: `$ui_foreground`
 #' @param ui_rstudio_search Default: `$ui_rstudio_toolbar_background`
-#' @param ui_rstudio_scrollbar_background Default: `$ui_background`
+#' @param ui_rstudio_scrollbar_background Default: `transparentize($ui_background, 0.5)`
 #' @param ui_rstudio_scrollbar_handle Default: `$rmd_chunk_background`
 #' @param ui_cursor Default: `#FF0000`
 #' @param ui_cursor_normal_mode Default: `$ui_cursor`
@@ -132,7 +132,7 @@ rstheme <- function(
   ui_rstudio_toolbar_background = "$ui_rstudio_tabs_active_background",
   ui_rstudio_toolbar_foreground = "$ui_foreground",
   ui_rstudio_search = "$ui_rstudio_toolbar_background",
-  ui_rstudio_scrollbar_background = "$ui_background",
+  ui_rstudio_scrollbar_background = "transparentize($ui_background, 0.5)",
   ui_rstudio_scrollbar_handle = "$rmd_chunk_background",
   ui_cursor = "#FF0000",
   ui_cursor_normal_mode = "$ui_cursor",

diff --git a/inst/templates/a11y-dark.scss b/inst/templates/a11y-dark.scss
@@ -36,7 +36,7 @@ $ui_rstudio_tabs_active_foreground: $ui_foreground;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $ui_foreground;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: transparentize($blue, 0.5);
 $ui_cursor_normal_mode: $ui_cursor;
@@ -88,7 +88,6 @@ $rmd_chunk_header_background: $code_function_background;
 $rmd_href: $blue-dark;
 $rmd_href_background: $code_reserved_background;
 @import "rstudio/_rstudio-dark.scss";
-@import "rstudio/_terminal.scss";
 
 [class="ace_keyword"] {
 	font-weight: 600;
@@ -109,6 +108,7 @@ $rmd_href_background: $code_reserved_background;
   border-color: #454545;
 }
 
+@import "rstudio/_terminal.scss";
 $ui_command_palette_background: $ui_background;
 $ui_command_palette_search_background: $ui_command_palette_background;
 $ui_command_palette_border: $ui_command_palette_background;

diff --git a/inst/templates/a11y-light.scss b/inst/templates/a11y-light.scss
@@ -35,7 +35,7 @@ $ui_rstudio_tabs_active_foreground: $ui_foreground;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $ui_foreground;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: transparentize($red, 0.5);
 $ui_cursor_normal_mode: $ui_cursor;
@@ -87,7 +87,6 @@ $rmd_chunk_header_background: $code_function_background;
 $rmd_href: $blue-dark;
 $rmd_href_background: $code_reserved_background;
 @import "rstudio/_rstudio-light.scss";
-@import "rstudio/_terminal.scss";
 
 [class="ace_keyword"] {
 	font-weight: 600;
@@ -96,6 +95,7 @@ $rmd_href_background: $code_reserved_background;
   font-weight: 600;
 }
 
+@import "rstudio/_terminal.scss";
 $ui_command_palette_background: $ui_background;
 $ui_command_palette_search_background: $ui_command_palette_background;
 $ui_command_palette_border: $ui_command_palette_background;

diff --git a/inst/templates/base16/base16-dark_template.scss b/inst/templates/base16/base16-dark_template.scss
@@ -38,7 +38,7 @@ $ui_rstudio_search              : $ui_rstudio_toolbar_background;
 $ui_completions_background      : $ui_background;
 $ui_completions_foreground           : $ui_foreground;
 $ui_completions_border          : $ui_bracket;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle    : $rmd_chunk_background;
 
 // R language colors

diff --git a/inst/templates/base16/base16-light_template.scss b/inst/templates/base16/base16-light_template.scss
@@ -38,7 +38,7 @@ $ui_rstudio_search              : $ui_rstudio_toolbar_background;
 $ui_completions_background      : $ui_background;
 $ui_completions_foreground           : $ui_foreground;
 $ui_completions_border          : $ui_bracket;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle    : $rmd_chunk_background;
 
 // R language colors

diff --git a/inst/templates/flat-white.scss b/inst/templates/flat-white.scss
@@ -45,7 +45,7 @@ $ui_rstudio_tabs_inactive_foreground: $base2;
 $ui_completions_background: $ui_background;
 $ui_completions_foreground: $ui_foreground;
 $ui_completions_border: $ui_bracket;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 
 // R language colors

diff --git a/inst/templates/github.scss b/inst/templates/github.scss
@@ -40,7 +40,7 @@ $ui_rstudio_search: $ui_rstudio_toolbar_background;
 $ui_completions_background: $ui_background;
 $ui_completions_foreground: $ui_foreground;
 $ui_completions_border: $ui_bracket;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 
 // R language colors

diff --git a/inst/templates/horizon-dark.scss b/inst/templates/horizon-dark.scss
@@ -36,7 +36,7 @@ $ui_rstudio_tabs_active_foreground: $base08;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $base05;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: #1eaeae;
 $ui_cursor_normal_mode: $ui_cursor;

diff --git a/inst/templates/make.R b/inst/templates/make.R
@@ -5,5 +5,7 @@ r_files <- r_files[!grepl("make[.]R", r_files)]
 
 purrr::walk(r_files, source)
 
-make_rsthemes()
-install_rsthemes()
+withr::with_dir(here::here(), {
+  make_rsthemes()
+  install_rsthemes()
+})
diff --git a/inst/templates/material-darker.scss b/inst/templates/material-darker.scss
@@ -35,7 +35,7 @@ $ui_rstudio_tabs_active_foreground: $base06;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $base03;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: $gold;
 $ui_cursor_normal_mode: $ui_cursor;

diff --git a/inst/templates/material-lighter.scss b/inst/templates/material-lighter.scss
@@ -36,7 +36,7 @@ $ui_rstudio_tabs_active_foreground: $base06;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $base03;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: $gold;
 $ui_cursor_normal_mode: $ui_cursor;

diff --git a/inst/templates/material-ocean.scss b/inst/templates/material-ocean.scss
@@ -35,7 +35,7 @@ $ui_rstudio_tabs_active_foreground: $base06;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $base03;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: $gold;
 $ui_cursor_normal_mode: $ui_cursor;

diff --git a/inst/templates/material-palenight.scss b/inst/templates/material-palenight.scss
@@ -35,7 +35,7 @@ $ui_rstudio_tabs_active_foreground: $base06;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $base03;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: $gold;
 $ui_cursor_normal_mode: $ui_cursor;

diff --git a/inst/templates/material.scss b/inst/templates/material.scss
@@ -35,7 +35,7 @@ $ui_rstudio_tabs_active_foreground: $base06;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $base03;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: $gold;
 $ui_cursor_normal_mode: $ui_cursor;

diff --git a/inst/templates/night-owl.scss b/inst/templates/night-owl.scss
@@ -46,7 +46,7 @@ $ui_rstudio_tabs_active_foreground: $ui_foreground;
 $ui_rstudio_toolbar_background: $dark2;
 $ui_rstudio_toolbar_foreground: $ui_foreground;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: transparentize($blue1, 0.5);
 $ui_cursor_normal_mode: $ui_cursor;

diff --git a/inst/templates/nord-polar-night-aurora.scss b/inst/templates/nord-polar-night-aurora.scss
@@ -40,7 +40,6 @@ $ui_rstudio_search              : $ui_rstudio_toolbar_background;
 $ui_completions_background      : $ui_background;
 $ui_completions_foreground           : $ui_foreground;
 $ui_completions_border          : $ui_bracket;
-$ui_rstudio_scrollbar_background: $ui_background;
 $ui_rstudio_scrollbar_handle    : $rmd_chunk_background;
 
 // R language colors
@@ -67,6 +66,7 @@ $ui_paren_4: $nord13; // yellow
 $ui_paren_5: $nord14; // green
 $ui_paren_6: $nord15; // purple
 
+@import "rstudio/_defaults";
 @import "rstudio/_rstudio-dark", "rstudio/_rstudio-dark-flatter";
 @import "rstudio/_components";
 
diff --git a/inst/templates/nord-snow-storm.scss b/inst/templates/nord-snow-storm.scss
@@ -39,7 +39,6 @@ $ui_rstudio_search              : $ui_rstudio_toolbar_background;
 $ui_completions_background      : $ui_background;
 $ui_completions_foreground           : $ui_foreground;
 $ui_completions_border          : $ui_bracket;
-$ui_rstudio_scrollbar_background: $ui_background;
 $ui_rstudio_scrollbar_handle    : $nord6;
 
 // R language colors
@@ -71,6 +70,7 @@ $ui_paren_4: $nord13; // yellow
 $ui_paren_5: $nord14; // green
 $ui_paren_6: $nord15; // purple
 
+@import "rstudio/_defaults";
 @import "rstudio/_rstudio-light", "rstudio/_rstudio-light-flatter";
 @import "rstudio/_components";
 
diff --git a/inst/templates/oceanic-plus.scss b/inst/templates/oceanic-plus.scss
@@ -39,7 +39,6 @@ $ui_rstudio_search              : $ui_rstudio_toolbar_background;
 $ui_completions_background      : $ui_background;
 $ui_completions_foreground           : $ui_foreground;
 $ui_completions_border          : $ui_bracket;
-$ui_rstudio_scrollbar_background: $ui_background;
 $ui_rstudio_scrollbar_handle    : $rmd_chunk_background;
 
 // R language colors
@@ -84,6 +83,7 @@ $terminal_color_cyan_bright: $base0C;
 $terminal_color_white: darken($ui_foreground, 5%);
 $terminal_color_white_bright: lighten($terminal_color_white, 10%);
 
+@import "rstudio/_defaults";
 @import "rstudio/_rstudio-dark", "rstudio/_rstudio-dark-flatter";
 @import "rstudio/_components";
 
diff --git a/inst/templates/one-dark.scss b/inst/templates/one-dark.scss
@@ -36,7 +36,6 @@ $ui_rstudio_tabs_active_foreground : $ui_foreground;
 $ui_completions_background      : $ui_background;
 $ui_completions_foreground           : $ui_foreground;
 $ui_completions_border          : $ui_bracket;
-$ui_rstudio_scrollbar_background: $ui_background;
 $ui_rstudio_scrollbar_handle    : $rmd_chunk_background;
 
 // R language colors
@@ -68,6 +67,7 @@ $ui_paren_4: $hue-1;
 $ui_paren_5: $hue-3;
 $ui_paren_6: $hue-2;
 
+@import "rstudio/_defaults";
 @import "rstudio/_rstudio-dark", "rstudio/_rstudio-dark-flatter";
 @import "rstudio/_components";
 

diff --git a/inst/templates/one-light.scss b/inst/templates/one-light.scss
@@ -33,7 +33,6 @@ $ui_rstudio_tabs_inactive_background       : $ui_background;
 $ui_completions_background      : $ui_background;
 $ui_completions_foreground           : $ui_foreground;
 $ui_completions_border          : $ui_bracket;
-$ui_rstudio_scrollbar_background: $ui_background;
 $ui_rstudio_scrollbar_handle    : $rmd_chunk_background;
 
 // R language colors
@@ -65,6 +64,7 @@ $rmd_heading_foreground: $hue-5-2;
 $rmd_chunk_header: $hue-1;
 $rmd_href: $hue-6-2;
 
+@import "rstudio/_defaults";
 @import "rstudio/_rstudio-light", "rstudio/_rstudio-light-flatter";
 @import "rstudio/_components";
 
diff --git a/inst/templates/rstudio/_defaults.scss b/inst/templates/rstudio/_defaults.scss
@@ -40,7 +40,7 @@ $ui_completions_foreground: $ui_foreground !default;
 $ui_completions_selected_foreground: $ui_completions_foreground !default;
 $ui_completions_selected_background: $ui_line_active_selection !default;
 $ui_completions_border: $ui_bracket !default;
-$ui_rstudio_scrollbar_background: transparent !default;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5) !default;
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background !default;
 $ui_rstudio_scrollbar_handle_border: $ui_background !default;
 

diff --git a/inst/templates/rstudio/_rstudio-dark.scss b/inst/templates/rstudio/_rstudio-dark.scss
@@ -379,6 +379,17 @@ table.rstheme_tabLayoutCenter,
 }
 
 /* scrollbars */
+/* reset scrollbar background color */
+.rstudio-themes-flat {
+  .rstudio-themes-dark.rstudio-themes-scrollbars ::-webkit-scrollbar,
+  .rstudio-themes-flat .rstudio-themes-dark.rstudio-themes-scrollbars::-webkit-scrollbar,
+  &.rstudio-themes-dark-menus .rstudio-themes-scrollbars ::-webkit-scrollbar {
+    background-color: unset;
+  }
+  .ace_scroller {
+    overflow: visible;
+  }
+}
 .rstudio-themes-flat, .rstudio-themes-flat .rstudio-themes-dark.rstudio-themes-scrollbars {
   /* Works on Firefox */
   scrollbar-width: auto;

diff --git a/inst/templates/rstudio/_rstudio-light.scss b/inst/templates/rstudio/_rstudio-light.scss
@@ -408,6 +408,15 @@ table.rstheme_tabLayoutCenter,
 }
 
 /* scrollbars */
+/* reset scrollbar background color */
+.rstudio-themes-flat {
+  .rstudio-themes-scrollbars ::-webkit-scrollbar {
+    background-color: unset;
+  }
+  .ace_scroller {
+    overflow: visible;
+  }
+}
 .rstudio-themes-flat, .rstudio-themes-flat .rstudio-themes-scrollbars {
   /* Works on Firefox */
   scrollbar-width: auto;

diff --git a/inst/templates/serendipity-dark.scss b/inst/templates/serendipity-dark.scss
@@ -34,7 +34,7 @@ $ui_rstudio_tabs_active_foreground: $foreground;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $ui_foreground;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: transparentize($green, 0.25);
 $ui_cursor_normal_mode: $ui_cursor;

diff --git a/inst/templates/serendipity-light.scss b/inst/templates/serendipity-light.scss
@@ -34,7 +34,7 @@ $ui_rstudio_tabs_active_foreground: #232834;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $ui_foreground;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: transparentize($pink, 0.5);
 $ui_cursor_normal_mode: $ui_cursor;

diff --git a/inst/templates/solarized-dark.scss b/inst/templates/solarized-dark.scss
@@ -39,7 +39,6 @@ $ui_rstudio_search              : $ui_rstudio_toolbar_background;
 $ui_completions_background      : $ui_background;
 $ui_completions_foreground           : $ui_foreground;
 $ui_completions_border          : $ui_bracket;
-$ui_rstudio_scrollbar_background: $ui_background;
 $ui_rstudio_scrollbar_handle    : $base02;
 
 // R language colors
@@ -61,5 +60,6 @@ $code_other: $code_variable;
   font-style: italic;
 }
 
+@import "rstudio/_defaults";
 @import "rstudio/_rstudio-dark", "rstudio/_terminal", "rstudio/_components";
 
diff --git a/inst/templates/solarized-light.scss b/inst/templates/solarized-light.scss
@@ -39,7 +39,6 @@ $ui_rstudio_search              : $ui_rstudio_toolbar_background;
 $ui_completions_background      : $ui_background;
 $ui_completions_foreground           : $ui_foreground;
 $ui_completions_border          : $ui_bracket;
-$ui_rstudio_scrollbar_background: $ui_background;
 $ui_rstudio_scrollbar_handle    : $rmd_chunk_background;
 
 // R language colors
@@ -61,5 +60,6 @@ $code_other: $code_variable;
   font-style: italic;
 }
 
+@import "rstudio/_defaults";
 @import "rstudio/_rstudio-dark", "rstudio/_terminal", "rstudio/_components";
 
diff --git a/inst/templates/yule-rstudio-reduced-motion.scss b/inst/templates/yule-rstudio-reduced-motion.scss
@@ -40,7 +40,7 @@ $ui_rstudio_tabs_active_foreground: $ivory;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $ui_foreground;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: $teal;
 $ui_cursor_normal_mode: transparentize($teal, 0.4);

diff --git a/inst/templates/yule-rstudio-rsthemes.scss b/inst/templates/yule-rstudio-rsthemes.scss
@@ -40,7 +40,7 @@ $ui_rstudio_tabs_active_foreground: $ivory;
 $ui_rstudio_toolbar_background: $ui_rstudio_tabs_active_background;
 $ui_rstudio_toolbar_foreground: $ui_foreground;
 $ui_rstudio_search: $ui_rstudio_toolbar_background;
-$ui_rstudio_scrollbar_background: $ui_background;
+$ui_rstudio_scrollbar_background: transparentize($ui_background, 0.5);
 $ui_rstudio_scrollbar_handle: $rmd_chunk_background;
 $ui_cursor: $teal;
 $ui_cursor_normal_mode: transparentize($teal, 0.4);