Better color constrasting in sliderInput()

Closes rstudio/bslib#228
rstudio · Jun 14, 2021 · 9d149c1 · 9d149c1
1 parent 2cdafed
commit 9d149c1
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 56 deletions.
diff --git a/R/input-slider.R b/R/input-slider.R
@@ -228,26 +228,10 @@ ionRangeSliderDependencyCSS <- function(theme) {
     ))
   }
 
-  # Remap some variable names for ionRangeSlider's scss
-  sass_input <- list(
-    list(
-      # The bootswatch materia theme sets $input-bg: transparent;
-      # which is an issue for the slider's handle(s) (#3130)
-      bg = "if(alpha($input-bg)==0, $body-bg, $input-bg)",
-      fg = sprintf(
-        "if(alpha($input-color)==0, $%s, $input-color)",
-        if ("3" %in% bslib::theme_version(theme)) "text-color" else "body-color"
-      ),
-      accent = "$component-active-bg",
-      `font-family` = "$font-family-base"
-    ),
-    sass::sass_file(
-      system.file(package = "shiny", "www/shared/ionrangeslider/scss/shiny.scss")
-    )
-  )
-
   bslib::bs_dependency(
-    input = sass_input,
+    input = sass::sass_file(
+      system.file(package = "shiny", "www/shared/ionrangeslider/scss/shiny.scss")
+    ),
     theme = theme,
     name = "ionRangeSlider",
     version = version_ion_range_slider,

diff --git a/inst/www/shared/ionrangeslider/css/ion.rangeSlider.css b/inst/www/shared/ionrangeslider/css/ion.rangeSlider.css
@@ -153,7 +153,7 @@
 }
 
 .irs {
-  font-family: Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .irs--shiny {
@@ -167,7 +167,7 @@
 .irs--shiny .irs-line {
   top: 25px;
   height: 8px;
-  background: linear-gradient(to bottom, #dedede -50%, white 150%);
+  background: linear-gradient(to bottom, #dedede -50%, #fff 150%);
   background-color: #ededed;
   border: 1px solid #cccccc;
   border-radius: 8px;
@@ -176,9 +176,9 @@
 .irs--shiny .irs-bar {
   top: 25px;
   height: 8px;
-  border-top: 1px solid #428bca;
-  border-bottom: 1px solid #428bca;
-  background: #428bca;
+  border-top: 1px solid #337ab7;
+  border-bottom: 1px solid #337ab7;
+  background: #337ab7;
 }
 
 .irs--shiny .irs-bar--single {
@@ -207,14 +207,13 @@
 }
 
 .irs--shiny .irs-handle.state_hover, .irs--shiny .irs-handle:hover {
-  background: white;
+  background: #fff;
 }
 
 .irs--shiny .irs-min,
 .irs--shiny .irs-max {
   top: 0;
   padding: 1px 3px;
-  color: #333333;
   text-shadow: none;
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 3px;
@@ -233,7 +232,7 @@
   color: #fff;
   text-shadow: none;
   padding: 1px 3px;
-  background-color: #428bca;
+  background-color: #337ab7;
   border-radius: 3px;
   font-size: 11px;
   line-height: 1.333;
@@ -250,12 +249,11 @@
 }
 
 .irs--shiny .irs-grid-pol {
-  background-color: black;
+  background-color: #000;
 }
 
 .irs--shiny .irs-grid-text {
   bottom: 5px;
-  color: #1a1a1a;
 }
 
 .irs--shiny .irs-grid-pol.small {

diff --git a/inst/www/shared/ionrangeslider/scss/_base.scss b/inst/www/shared/ionrangeslider/scss/_base.scss
@@ -4,8 +4,6 @@
     @include pos-r();
     -webkit-touch-callout: none;
     @include no-click();
-    font-size: 12px;
-    font-family: Arial, sans-serif;
 
     &-line {
         @include pos-r();
@@ -83,7 +81,6 @@
             left: 0;
             width: 1px;
             height: 8px;
-            background: #000;
 
             &.small {
                 height: 4px;
@@ -99,7 +96,6 @@
             font-size: 9px;
             line-height: 9px;
             padding: 0 3px;
-            color: #000;
         }
     }
 

diff --git a/inst/www/shared/ionrangeslider/scss/shiny.scss b/inst/www/shared/ionrangeslider/scss/shiny.scss
@@ -19,8 +19,7 @@
 
 ////////////////////////////////////////////////////////////////////////////
 
-// Re-define font-family on .irs to make it configurable
-$font-family: Arial, sans-serif !default;
+$font-family: $font-family-base !default;
 .irs {
   font-family: $font-family;
 }
@@ -36,9 +35,9 @@ $font-family: Arial, sans-serif !default;
   $custom_radius: 3px !default;
 
   // "High-level" coloring
-  $bg:     white !default;
-  $fg:     black !default;
-  $accent: #428bca !default;
+  $bg:     $body-bg !default;
+  $fg:     color-contrast($body-bg) !default;
+  $accent: $component-active-bg !default;
 
   // "Low-level" coloring, borders, and fonts
   $line_bg:            linear-gradient(to bottom, mix($bg, $fg, 87%) -50%, $bg 150%) !default;
@@ -52,7 +51,7 @@ $font-family: Arial, sans-serif !default;
   $handle_border:      1px solid mix($bg, $fg, 67%) !default;
   $handle_box_shadow:  1px 1px 3px rgba($bg, 0.3) !default;
 
-  $minmax_text_color:  mix($bg, $fg, 20%) !default;
+  $minmax_text_color:  null !default;
   $minmax_bg_color:    rgba($fg, 0.1) !default;
   $minmax_font_size:   10px !default;
   $minmax_line_height: 1.333 !default;
@@ -64,7 +63,7 @@ $font-family: Arial, sans-serif !default;
 
   $grid_major_color:  $fg !default;
   $grid_minor_color:  mix($bg, $fg, 60%) !default;
-  $grid_text_color:   mix($bg, $fg, 10%) !default;
+  $grid_text_color:   null !default;
 
 
   height: 40px;

diff --git a/tools/ion.rangeSlider-patches/0001-Add-skin-customized-for-Shiny.patch b/tools/ion.rangeSlider-patches/0001-Add-skin-customized-for-Shiny.patch
@@ -1,9 +1,9 @@
 diff --git a/inst/www/shared/ionrangeslider/scss/shiny.scss b/inst/www/shared/ionrangeslider/scss/shiny.scss
 new file mode 100644
-index 00000000..4a0fccc1
+index 00000000..ba052f8b
 --- /dev/null
 +++ b/inst/www/shared/ionrangeslider/scss/shiny.scss
-@@ -0,0 +1,174 @@
+@@ -0,0 +1,173 @@
 +/* 'shiny' skin for Ion.RangeSlider, largely based on the 'big' skin, but with smaller dimensions, grayscale grid text, and without gradients
 +© RStudio, Inc, 2014
 +© Denis Ineshin, 2014  https://github.com/IonDen
@@ -25,8 +25,7 @@ index 00000000..4a0fccc1
 +
 +////////////////////////////////////////////////////////////////////////////
 +
-+// Re-define font-family on .irs to make it configurable
-+$font-family: Arial, sans-serif !default;
++$font-family: $font-family-base !default;
 +.irs {
 +  font-family: $font-family;
 +}
@@ -42,9 +41,9 @@ index 00000000..4a0fccc1
 +  $custom_radius: 3px !default;
 +
 +  // "High-level" coloring
-+  $bg:     white !default;
-+  $fg:     black !default;
-+  $accent: #428bca !default;
++  $bg:     $body-bg !default;
++  $fg:     color-contrast($body-bg) !default;
++  $accent: $component-active-bg !default;
 +
 +  // "Low-level" coloring, borders, and fonts
 +  $line_bg:            linear-gradient(to bottom, mix($bg, $fg, 87%) -50%, $bg 150%) !default;
@@ -58,7 +57,7 @@ index 00000000..4a0fccc1
 +  $handle_border:      1px solid mix($bg, $fg, 67%) !default;
 +  $handle_box_shadow:  1px 1px 3px rgba($bg, 0.3) !default;
 +
-+  $minmax_text_color:  mix($bg, $fg, 20%) !default;
++  $minmax_text_color:  null !default;
 +  $minmax_bg_color:    rgba($fg, 0.1) !default;
 +  $minmax_font_size:   10px !default;
 +  $minmax_line_height: 1.333 !default;
@@ -70,7 +69,7 @@ index 00000000..4a0fccc1
 +
 +  $grid_major_color:  $fg !default;
 +  $grid_minor_color:  mix($bg, $fg, 60%) !default;
-+  $grid_text_color:   mix($bg, $fg, 10%) !default;
++  $grid_text_color:   null !default;
 +
 +
 +  height: 40px;

diff --git a/tools/ion.rangeSlider-patches/0005-remove-unnecessary-styles.patch b/tools/ion.rangeSlider-patches/0005-remove-unnecessary-styles.patch
@@ -0,0 +1,29 @@
+diff --git a/inst/www/shared/ionrangeslider/scss/_base.scss b/inst/www/shared/ionrangeslider/scss/_base.scss
+index f167f8cc..fec67457 100644
+--- a/inst/www/shared/ionrangeslider/scss/_base.scss
++++ b/inst/www/shared/ionrangeslider/scss/_base.scss
+@@ -4,8 +4,6 @@
+     @include pos-r();
+     -webkit-touch-callout: none;
+     @include no-click();
+-    font-size: 12px;
+-    font-family: Arial, sans-serif;
+
+     &-line {
+         @include pos-r();
+@@ -83,7 +81,6 @@
+             left: 0;
+             width: 1px;
+             height: 8px;
+-            background: #000;
+
+             &.small {
+                 height: 4px;
+@@ -99,7 +96,6 @@
+             font-size: 9px;
+             line-height: 9px;
+             padding: 0 3px;
+-            color: #000;
+         }
+     }
+
diff --git a/tools/updateIonRangeSlider.R b/tools/updateIonRangeSlider.R
@@ -55,13 +55,15 @@ for (patch in list.files(patch_dir, full.names = TRUE)) {
 # can serve them up without compilation (The distributed CSS includes all
 # the skins in the same CSS file, but we want them split up)
 library(sass)
-dir.create(file.path(target, "css"))
-sass(
-  list(
-    sass::sass_file(system.file("sass-utils/color-contrast.scss", package = "bslib")),
-    sass_file(file.path(target, "scss", "shiny.scss"))
-  ),
-  output = file.path(target, "css", "ion.rangeSlider.css")
+withr::with_dir(
+  target, {
+    dir.create("css")
+    sass_partial(
+      sass_file("scss/shiny.scss"),
+      bslib::bs_theme(version = 3),
+      output = "css/ion.rangeSlider.css"
+    )
+  }
 )