github/shiny
1
1
Fork 0
mirror of https://github.com/rstudio/shiny.git synced 2026-01-09 15:08:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve color contrasting in date and slider input (#3167)

Browse Source 
* leverage bslib's color-contrast() in sliderInput()'s Sass and reduce number of git patches

* Use color-contrast() instead of color-yiq() in Bootstrap Datepicker
This commit is contained in:
Carson Sievert
2020-11-25 11:39:00 -06:00
committed by GitHub
parent 4c35d483bc
commit 11babd5567
12 changed files with 142 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
DESCRIPTION
View File

@@ -93,7 +93,7 @@ Imports:
withr,
commonmark (>= 1.7),
glue (>= 1.3.2),
bslib (>= 0.2.2.9001),
bslib (>= 0.2.2.9002),
cachem,
ellipsis
Suggests:

211
inst/www/shared/datepicker/css/bootstrap-datepicker3.css vendored
View File

@@ -109,7 +109,7 @@
}
.datepicker table tr td.day:hover, .datepicker table tr td.focused {
color: #212529;
color: #000;
background: #e9e9ea;
cursor: pointer;
}
@@ -121,40 +121,37 @@
}
.datepicker table tr td.highlighted {
color: #212529;
color: #000;
background-color: #d1ecf1;
border-color: #83ccd9;
border-radius: 0;
}
.datepicker table tr td.highlighted:focus, .datepicker table tr td.highlighted.focus {
color: #212529;
background-color: #bfd8dd;
border-color: #6aa2ad;
color: #000;
background-color: #bcd4d9;
border-color: #6299a3;
}
.datepicker table tr td.highlighted:hover {
color: #212529;
background-color: #79898d;
border-color: #77b8c4;
color: #000;
background-color: #697679;
border-color: #73b3bf;
}
.datepicker table tr td.highlighted:active, .datepicker table tr td.highlighted.active {
color: #212529;
background-color: #bfd8dd;
border-color: #77b8c4;
color: #000;
background-color: #bcd4d9;
border-color: #73b3bf;
}
.datepicker table tr td.highlighted:active:hover, .datepicker table tr td.highlighted:active:focus, .datepicker table tr td.highlighted:active.focus, .datepicker table tr td.highlighted.active:hover, .datepicker table tr td.highlighted.active:focus, .datepicker table tr td.highlighted.active.focus {
color: #212529;
background-color: #b3cacf;
border-color: #6aa2ad;
.datepicker table tr td.highlighted:active:hover, .datepicker table tr td.highlighted:active:focus, .datepicker table tr td.highlighted.focus:active, .datepicker table tr td.highlighted.active:hover, .datepicker table tr td.highlighted.active:focus, .datepicker table tr td.highlighted.active.focus {
color: #000;
background-color: #adc4c8;
border-color: #6299a3;
}
.datepicker table tr td.highlighted.disabled:hover, .datepicker table tr td.highlighted.disabled:focus, .datepicker table tr td.highlighted.disabled.focus, .datepicker table tr td.highlighted[disabled]:hover, .datepicker table tr td.highlighted[disabled]:focus, .datepicker table tr td.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.highlighted:hover,
fieldset[disabled] .datepicker table tr td.highlighted:focus,
fieldset[disabled] .datepicker table tr td.highlighted.focus {
.datepicker table tr td.highlighted.disabled:hover, .datepicker table tr td.highlighted.disabled:focus, .datepicker table tr td.highlighted.disabled.focus, .datepicker table tr td.highlighted[disabled]:hover, .datepicker table tr td.highlighted[disabled]:focus, .datepicker table tr td.highlighted.focus[disabled], fieldset[disabled] .datepicker table tr td.highlighted:hover, fieldset[disabled] .datepicker table tr td.highlighted:focus, fieldset[disabled] .datepicker table tr td.highlighted.focus {
background-color: #d1ecf1;
border-color: #83ccd9;
}
@@ -169,39 +166,36 @@ fieldset[disabled] .datepicker table tr td.highlighted.focus {
}
.datepicker table tr td.today {
color: #212529;
color: #000;
background-color: #ffdb99;
border-color: #ffb733;
}
.datepicker table tr td.today:focus, .datepicker table tr td.today.focus {
color: #212529;
background-color: #e9c98e;
border-color: #c89331;
color: #000;
background-color: #e6c58a;
border-color: #bf8926;
}
.datepicker table tr td.today:hover {
color: #212529;
background-color: #908061;
border-color: #e4a532;
color: #000;
background-color: #806e4d;
border-color: #e0a12d;
}
.datepicker table tr td.today:active, .datepicker table tr td.today.active {
color: #212529;
background-color: #e9c98e;
border-color: #e4a532;
color: #000;
background-color: #e6c58a;
border-color: #e0a12d;
}
.datepicker table tr td.today:active:hover, .datepicker table tr td.today:active:focus, .datepicker table tr td.today:active.focus, .datepicker table tr td.today.active:hover, .datepicker table tr td.today.active:focus, .datepicker table tr td.today.active.focus {
color: #212529;
background-color: #d9bc86;
border-color: #c89331;
.datepicker table tr td.today:active:hover, .datepicker table tr td.today:active:focus, .datepicker table tr td.today.focus:active, .datepicker table tr td.today.active:hover, .datepicker table tr td.today.active:focus, .datepicker table tr td.today.active.focus {
color: #000;
background-color: #d4b67f;
border-color: #bf8926;
}
.datepicker table tr td.today.disabled:hover, .datepicker table tr td.today.disabled:focus, .datepicker table tr td.today.disabled.focus, .datepicker table tr td.today[disabled]:hover, .datepicker table tr td.today[disabled]:focus, .datepicker table tr td.today[disabled].focus,
fieldset[disabled] .datepicker table tr td.today:hover,
fieldset[disabled] .datepicker table tr td.today:focus,
fieldset[disabled] .datepicker table tr td.today.focus {
.datepicker table tr td.today.disabled:hover, .datepicker table tr td.today.disabled:focus, .datepicker table tr td.today.disabled.focus, .datepicker table tr td.today[disabled]:hover, .datepicker table tr td.today[disabled]:focus, .datepicker table tr td.today.focus[disabled], fieldset[disabled] .datepicker table tr td.today:hover, fieldset[disabled] .datepicker table tr td.today:focus, fieldset[disabled] .datepicker table tr td.today.focus {
background-color: #ffdb99;
border-color: #ffb733;
}
@@ -216,40 +210,37 @@ fieldset[disabled] .datepicker table tr td.today.focus {
}
.datepicker table tr td.range {
color: #212529;
color: #000;
background-color: #e9e9ea;
border-color: #b5b5b8;
border-radius: 0;
}
.datepicker table tr td.range:focus, .datepicker table tr td.range.focus {
color: #212529;
background-color: #d5d5d7;
border-color: #909194;
color: #000;
background-color: #d2d2d3;
border-color: #88888a;
}
.datepicker table tr td.range:hover {
color: #212529;
background-color: #85878a;
border-color: #a3a4a7;
color: #000;
background-color: #757575;
border-color: #9f9fa2;
}
.datepicker table tr td.range:active, .datepicker table tr td.range.active {
color: #212529;
background-color: #d5d5d7;
border-color: #a3a4a7;
color: #000;
background-color: #d2d2d3;
border-color: #9f9fa2;
}
.datepicker table tr td.range:active:hover, .datepicker table tr td.range:active:focus, .datepicker table tr td.range:active.focus, .datepicker table tr td.range.active:hover, .datepicker table tr td.range.active:focus, .datepicker table tr td.range.active.focus {
color: #212529;
background-color: #c7c8c9;
border-color: #909194;
.datepicker table tr td.range:active:hover, .datepicker table tr td.range:active:focus, .datepicker table tr td.range.focus:active, .datepicker table tr td.range.active:hover, .datepicker table tr td.range.active:focus, .datepicker table tr td.range.active.focus {
color: #000;
background-color: #c1c1c2;
border-color: #88888a;
}
.datepicker table tr td.range.disabled:hover, .datepicker table tr td.range.disabled:focus, .datepicker table tr td.range.disabled.focus, .datepicker table tr td.range[disabled]:hover, .datepicker table tr td.range[disabled]:focus, .datepicker table tr td.range[disabled].focus,
fieldset[disabled] .datepicker table tr td.range:hover,
fieldset[disabled] .datepicker table tr td.range:focus,
fieldset[disabled] .datepicker table tr td.range.focus {
.datepicker table tr td.range.disabled:hover, .datepicker table tr td.range.disabled:focus, .datepicker table tr td.range.disabled.focus, .datepicker table tr td.range[disabled]:hover, .datepicker table tr td.range[disabled]:focus, .datepicker table tr td.range.focus[disabled], fieldset[disabled] .datepicker table tr td.range:hover, fieldset[disabled] .datepicker table tr td.range:focus, fieldset[disabled] .datepicker table tr td.range.focus {
background-color: #e9e9ea;
border-color: #b5b5b8;
}
@@ -264,39 +255,36 @@ fieldset[disabled] .datepicker table tr td.range.focus {
}
.datepicker table tr td.range.highlighted {
color: #212529;
color: #000;
background-color: #ddebee;
border-color: #99c3cc;
}
.datepicker table tr td.range.highlighted:focus, .datepicker table tr td.range.highlighted.focus {
color: #212529;
background-color: #cad7da;
border-color: #7b9ca3;
color: #000;
background-color: #c7d4d6;
border-color: #739299;
}
.datepicker table tr td.range.highlighted:hover {
color: #212529;
background-color: #7f888c;
border-color: #8bb0b8;
color: #000;
background-color: #6f7677;
border-color: #87acb4;
}
.datepicker table tr td.range.highlighted:active, .datepicker table tr td.range.highlighted.active {
color: #212529;
background-color: #cad7da;
border-color: #8bb0b8;
color: #000;
background-color: #c7d4d6;
border-color: #87acb4;
}
.datepicker table tr td.range.highlighted:active:hover, .datepicker table tr td.range.highlighted:active:focus, .datepicker table tr td.range.highlighted:active.focus, .datepicker table tr td.range.highlighted.active:hover, .datepicker table tr td.range.highlighted.active:focus, .datepicker table tr td.range.highlighted.active.focus {
color: #212529;
background-color: #bdc9cd;
border-color: #7b9ca3;
.datepicker table tr td.range.highlighted:active:hover, .datepicker table tr td.range.highlighted:active:focus, .datepicker table tr td.range.highlighted.focus:active, .datepicker table tr td.range.highlighted.active:hover, .datepicker table tr td.range.highlighted.active:focus, .datepicker table tr td.range.highlighted.active.focus {
color: #000;
background-color: #b7c3c6;
border-color: #739299;
}
.datepicker table tr td.range.highlighted.disabled:hover, .datepicker table tr td.range.highlighted.disabled:focus, .datepicker table tr td.range.highlighted.disabled.focus, .datepicker table tr td.range.highlighted[disabled]:hover, .datepicker table tr td.range.highlighted[disabled]:focus, .datepicker table tr td.range.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.highlighted:hover,
fieldset[disabled] .datepicker table tr td.range.highlighted:focus,
fieldset[disabled] .datepicker table tr td.range.highlighted.focus {
.datepicker table tr td.range.highlighted.disabled:hover, .datepicker table tr td.range.highlighted.disabled:focus, .datepicker table tr td.range.highlighted.disabled.focus, .datepicker table tr td.range.highlighted[disabled]:hover, .datepicker table tr td.range.highlighted[disabled]:focus, .datepicker table tr td.range.highlighted.focus[disabled], fieldset[disabled] .datepicker table tr td.range.highlighted:hover, fieldset[disabled] .datepicker table tr td.range.highlighted:focus, fieldset[disabled] .datepicker table tr td.range.highlighted.focus {
background-color: #ddebee;
border-color: #99c3cc;
}
@@ -311,39 +299,36 @@ fieldset[disabled] .datepicker table tr td.range.highlighted.focus {
}
.datepicker table tr td.range.today {
color: #212529;
color: #000;
background-color: #f4c775;
border-color: #eca117;
}
.datepicker table tr td.range.today:focus, .datepicker table tr td.range.today.focus {
color: #212529;
background-color: #dfb76d;
border-color: #ba821b;
color: #000;
background-color: #dcb369;
border-color: #b17811;
}
.datepicker table tr td.range.today:hover {
color: #212529;
background-color: #8b764f;
border-color: #d49219;
color: #000;
background-color: #7a643b;
border-color: #d08d14;
}
.datepicker table tr td.range.today:active, .datepicker table tr td.range.today.active {
color: #212529;
background-color: #dfb76d;
border-color: #d49219;
color: #000;
background-color: #dcb369;
border-color: #d08d14;
}
.datepicker table tr td.range.today:active:hover, .datepicker table tr td.range.today:active:focus, .datepicker table tr td.range.today:active.focus, .datepicker table tr td.range.today.active:hover, .datepicker table tr td.range.today.active:focus, .datepicker table tr td.range.today.active.focus {
color: #212529;
background-color: #d0ab68;
border-color: #ba821b;
.datepicker table tr td.range.today:active:hover, .datepicker table tr td.range.today:active:focus, .datepicker table tr td.range.today.focus:active, .datepicker table tr td.range.today.active:hover, .datepicker table tr td.range.today.active:focus, .datepicker table tr td.range.today.active.focus {
color: #000;
background-color: #cba561;
border-color: #b17811;
}
.datepicker table tr td.range.today.disabled:hover, .datepicker table tr td.range.today.disabled:focus, .datepicker table tr td.range.today.disabled.focus, .datepicker table tr td.range.today[disabled]:hover, .datepicker table tr td.range.today[disabled]:focus, .datepicker table tr td.range.today[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.today:hover,
fieldset[disabled] .datepicker table tr td.range.today:focus,
fieldset[disabled] .datepicker table tr td.range.today.focus {
.datepicker table tr td.range.today.disabled:hover, .datepicker table tr td.range.today.disabled:focus, .datepicker table tr td.range.today.disabled.focus, .datepicker table tr td.range.today[disabled]:hover, .datepicker table tr td.range.today[disabled]:focus, .datepicker table tr td.range.today.focus[disabled], fieldset[disabled] .datepicker table tr td.range.today:hover, fieldset[disabled] .datepicker table tr td.range.today:focus, fieldset[disabled] .datepicker table tr td.range.today.focus {
background-color: #f4c775;
border-color: #eca117;
}
@@ -378,19 +363,13 @@ fieldset[disabled] .datepicker table tr td.range.today.focus {
border-color: #7d7f82;
}
.datepicker table tr td.selected:active:hover, .datepicker table tr td.selected:active:focus, .datepicker table tr td.selected:active.focus, .datepicker table tr td.selected.active:hover, .datepicker table tr td.selected.active:focus, .datepicker table tr td.selected.active.focus, .datepicker table tr td.selected.highlighted:active:hover, .datepicker table tr td.selected.highlighted:active:focus, .datepicker table tr td.selected.highlighted:active.focus, .datepicker table tr td.selected.highlighted.active:hover, .datepicker table tr td.selected.highlighted.active:focus, .datepicker table tr td.selected.highlighted.active.focus {
.datepicker table tr td.selected:active:hover, .datepicker table tr td.selected:active:focus, .datepicker table tr td.selected.focus:active, .datepicker table tr td.selected.active:hover, .datepicker table tr td.selected.active:focus, .datepicker table tr td.selected.active.focus, .datepicker table tr td.selected.highlighted:active:hover, .datepicker table tr td.selected.highlighted:active:focus, .datepicker table tr td.selected.highlighted.focus:active, .datepicker table tr td.selected.highlighted.active:hover, .datepicker table tr td.selected.highlighted.active:focus, .datepicker table tr td.selected.highlighted.active.focus {
color: #fff;
background-color: #9d9fa0;
border-color: #909295;
}
.datepicker table tr td.selected.disabled:hover, .datepicker table tr td.selected.disabled:focus, .datepicker table tr td.selected.disabled.focus, .datepicker table tr td.selected[disabled]:hover, .datepicker table tr td.selected[disabled]:focus, .datepicker table tr td.selected[disabled].focus,
fieldset[disabled] .datepicker table tr td.selected:hover,
fieldset[disabled] .datepicker table tr td.selected:focus,
fieldset[disabled] .datepicker table tr td.selected.focus, .datepicker table tr td.selected.highlighted.disabled:hover, .datepicker table tr td.selected.highlighted.disabled:focus, .datepicker table tr td.selected.highlighted.disabled.focus, .datepicker table tr td.selected.highlighted[disabled]:hover, .datepicker table tr td.selected.highlighted[disabled]:focus, .datepicker table tr td.selected.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.selected.highlighted:hover,
fieldset[disabled] .datepicker table tr td.selected.highlighted:focus,
fieldset[disabled] .datepicker table tr td.selected.highlighted.focus {
.datepicker table tr td.selected.disabled:hover, .datepicker table tr td.selected.disabled:focus, .datepicker table tr td.selected.disabled.focus, .datepicker table tr td.selected[disabled]:hover, .datepicker table tr td.selected[disabled]:focus, .datepicker table tr td.selected.focus[disabled], fieldset[disabled] .datepicker table tr td.selected:hover, fieldset[disabled] .datepicker table tr td.selected:focus, fieldset[disabled] .datepicker table tr td.selected.focus, .datepicker table tr td.selected.highlighted.disabled:hover, .datepicker table tr td.selected.highlighted.disabled:focus, .datepicker table tr td.selected.highlighted.disabled.focus, .datepicker table tr td.selected.highlighted[disabled]:hover, .datepicker table tr td.selected.highlighted[disabled]:focus, .datepicker table tr td.selected.highlighted.focus[disabled], fieldset[disabled] .datepicker table tr td.selected.highlighted:hover, fieldset[disabled] .datepicker table tr td.selected.highlighted:focus, fieldset[disabled] .datepicker table tr td.selected.highlighted.focus {
background-color: #898b8d;
border-color: #6b6e71;
}
@@ -420,19 +399,13 @@ fieldset[disabled] .datepicker table tr td.selected.highlighted.focus {
border-color: #2087f5;
}
.datepicker table tr td.active:active:hover, .datepicker table tr td.active:active:focus, .datepicker table tr td.active:active.focus, .datepicker table tr td.active.active:hover, .datepicker table tr td.active.active:focus, .datepicker table tr td.active.active.focus, .datepicker table tr td.active.highlighted:active:hover, .datepicker table tr td.active.highlighted:active:focus, .datepicker table tr td.active.highlighted:active.focus, .datepicker table tr td.active.highlighted.active:hover, .datepicker table tr td.active.highlighted.active:focus, .datepicker table tr td.active.highlighted.active.focus {
.datepicker table tr td.active:active:hover, .datepicker table tr td.active:active:focus, .datepicker table tr td.active.focus:active, .datepicker table tr td.active.active:hover, .datepicker table tr td.active.active:focus, .datepicker table tr td.active.active.focus, .datepicker table tr td.active.highlighted:active:hover, .datepicker table tr td.active.highlighted:active:focus, .datepicker table tr td.active.highlighted.focus:active, .datepicker table tr td.active.highlighted.active:hover, .datepicker table tr td.active.highlighted.active:focus, .datepicker table tr td.active.highlighted.active.focus {
color: #fff;
background-color: #2b91ff;
border-color: #4199f7;
}
.datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled.focus, .datepicker table tr td.active[disabled]:hover, .datepicker table tr td.active[disabled]:focus, .datepicker table tr td.active[disabled].focus,
fieldset[disabled] .datepicker table tr td.active:hover,
fieldset[disabled] .datepicker table tr td.active:focus,
fieldset[disabled] .datepicker table tr td.active.focus, .datepicker table tr td.active.highlighted.disabled:hover, .datepicker table tr td.active.highlighted.disabled:focus, .datepicker table tr td.active.highlighted.disabled.focus, .datepicker table tr td.active.highlighted[disabled]:hover, .datepicker table tr td.active.highlighted[disabled]:focus, .datepicker table tr td.active.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.active.highlighted:hover,
fieldset[disabled] .datepicker table tr td.active.highlighted:focus,
fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
.datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled.focus, .datepicker table tr td.active[disabled]:hover, .datepicker table tr td.active[disabled]:focus, .datepicker table tr td.active.focus[disabled], fieldset[disabled] .datepicker table tr td.active:hover, fieldset[disabled] .datepicker table tr td.active:focus, fieldset[disabled] .datepicker table tr td.active.focus, .datepicker table tr td.active.highlighted.disabled:hover, .datepicker table tr td.active.highlighted.disabled:focus, .datepicker table tr td.active.highlighted.disabled.focus, .datepicker table tr td.active.highlighted[disabled]:hover, .datepicker table tr td.active.highlighted[disabled]:focus, .datepicker table tr td.active.highlighted.focus[disabled], fieldset[disabled] .datepicker table tr td.active.highlighted:hover, fieldset[disabled] .datepicker table tr td.active.highlighted:focus, fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
background-color: #007bff;
border-color: #0277f4;
}
@@ -449,7 +422,7 @@ fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
}
.datepicker table tr td span:hover, .datepicker table tr td span.focused {
color: #212529;
color: #000;
background: #e9e9ea;
}
@@ -466,7 +439,7 @@ fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.active:focus, .datepicker table tr td span.active.focus, .datepicker table tr td span.active:hover:focus, .datepicker table tr td span.active:hover.focus, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active.disabled.focus, .datepicker table tr td span.active.disabled:hover:focus, .datepicker table tr td span.active.disabled:hover.focus {
.datepicker table tr td span.active:focus, .datepicker table tr td span.active.focus, .datepicker table tr td span.active:hover:focus, .datepicker table tr td span.active.focus:hover, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active.disabled.focus, .datepicker table tr td span.active.disabled:hover:focus, .datepicker table tr td span.active.disabled.focus:hover {
color: #fff;
background-color: #1a88ff;
border-color: #4199f7;
@@ -478,31 +451,19 @@ fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
border-color: #2087f5;
}
.datepicker table tr td span.active:active, .datepicker table tr td span.active.active, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover.active {
.datepicker table tr td span.active:active, .datepicker table tr td span.active.active, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active.active:hover, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled.active:hover {
color: #fff;
background-color: #1a88ff;
border-color: #2087f5;
}
.datepicker table tr td span.active:active:hover, .datepicker table tr td span.active:active:focus, .datepicker table tr td span.active:active.focus, .datepicker table tr td span.active.active:hover, .datepicker table tr td span.active.active:focus, .datepicker table tr td span.active.active.focus, .datepicker table tr td span.active:hover:active:hover, .datepicker table tr td span.active:hover:active:focus, .datepicker table tr td span.active:hover:active.focus, .datepicker table tr td span.active:hover.active:hover, .datepicker table tr td span.active:hover.active:focus, .datepicker table tr td span.active:hover.active.focus, .datepicker table tr td span.active.disabled:active:hover, .datepicker table tr td span.active.disabled:active:focus, .datepicker table tr td span.active.disabled:active.focus, .datepicker table tr td span.active.disabled.active:hover, .datepicker table tr td span.active.disabled.active:focus, .datepicker table tr td span.active.disabled.active.focus, .datepicker table tr td span.active.disabled:hover:active:hover, .datepicker table tr td span.active.disabled:hover:active:focus, .datepicker table tr td span.active.disabled:hover:active.focus, .datepicker table tr td span.active.disabled:hover.active:hover, .datepicker table tr td span.active.disabled:hover.active:focus, .datepicker table tr td span.active.disabled:hover.active.focus {
.datepicker table tr td span.active:active:hover, .datepicker table tr td span.active:active:focus, .datepicker table tr td span.active.focus:active, .datepicker table tr td span.active.active:hover, .datepicker table tr td span.active.active:focus, .datepicker table tr td span.active.active.focus, .datepicker table tr td span.active:hover:active:hover, .datepicker table tr td span.active:hover:active:focus, .datepicker table tr td span.active.focus:hover:active, .datepicker table tr td span.active.active:hover:hover, .datepicker table tr td span.active.active:hover:focus, .datepicker table tr td span.active.active.focus:hover, .datepicker table tr td span.active.disabled:active:hover, .datepicker table tr td span.active.disabled:active:focus, .datepicker table tr td span.active.disabled.focus:active, .datepicker table tr td span.active.disabled.active:hover, .datepicker table tr td span.active.disabled.active:focus, .datepicker table tr td span.active.disabled.active.focus, .datepicker table tr td span.active.disabled:hover:active:hover, .datepicker table tr td span.active.disabled:hover:active:focus, .datepicker table tr td span.active.disabled.focus:hover:active, .datepicker table tr td span.active.disabled.active:hover:hover, .datepicker table tr td span.active.disabled.active:hover:focus, .datepicker table tr td span.active.disabled.active.focus:hover {
color: #fff;
background-color: #2b91ff;
border-color: #4199f7;
}
.datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active.disabled.focus, .datepicker table tr td span.active[disabled]:hover, .datepicker table tr td span.active[disabled]:focus, .datepicker table tr td span.active[disabled].focus,
fieldset[disabled] .datepicker table tr td span.active:hover,
fieldset[disabled] .datepicker table tr td span.active:focus,
fieldset[disabled] .datepicker table tr td span.active.focus, .datepicker table tr td span.active:hover.disabled:hover, .datepicker table tr td span.active:hover.disabled:focus, .datepicker table tr td span.active:hover.disabled.focus, .datepicker table tr td span.active:hover[disabled]:hover, .datepicker table tr td span.active:hover[disabled]:focus, .datepicker table tr td span.active:hover[disabled].focus,
fieldset[disabled] .datepicker table tr td span.active:hover:hover,
fieldset[disabled] .datepicker table tr td span.active:hover:focus,
fieldset[disabled] .datepicker table tr td span.active:hover.focus, .datepicker table tr td span.active.disabled.disabled:hover, .datepicker table tr td span.active.disabled.disabled:focus, .datepicker table tr td span.active.disabled.disabled.focus, .datepicker table tr td span.active.disabled[disabled]:hover, .datepicker table tr td span.active.disabled[disabled]:focus, .datepicker table tr td span.active.disabled[disabled].focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled.focus, .datepicker table tr td span.active.disabled:hover.disabled:hover, .datepicker table tr td span.active.disabled:hover.disabled:focus, .datepicker table tr td span.active.disabled:hover.disabled.focus, .datepicker table tr td span.active.disabled:hover[disabled]:hover, .datepicker table tr td span.active.disabled:hover[disabled]:focus, .datepicker table tr td span.active.disabled:hover[disabled].focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {
.datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active.disabled.focus, .datepicker table tr td span.active[disabled]:hover, .datepicker table tr td span.active[disabled]:focus, .datepicker table tr td span.active.focus[disabled], fieldset[disabled] .datepicker table tr td span.active:hover, fieldset[disabled] .datepicker table tr td span.active:focus, fieldset[disabled] .datepicker table tr td span.active.focus, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover:focus, .datepicker table tr td span.active.disabled.focus:hover, .datepicker table tr td span.active[disabled]:hover:hover, .datepicker table tr td span.active[disabled]:hover:focus, .datepicker table tr td span.active.focus[disabled]:hover, fieldset[disabled] .datepicker table tr td span.active:hover:hover, fieldset[disabled] .datepicker table tr td span.active:hover:focus, fieldset[disabled] .datepicker table tr td span.active.focus:hover, .datepicker table tr td span.active.disabled.disabled:hover, .datepicker table tr td span.active.disabled.disabled:focus, .datepicker table tr td span.active.disabled.disabled.focus, .datepicker table tr td span.active.disabled[disabled]:hover, .datepicker table tr td span.active.disabled[disabled]:focus, .datepicker table tr td span.active.disabled.focus[disabled], fieldset[disabled] .datepicker table tr td span.active.disabled:hover, fieldset[disabled] .datepicker table tr td span.active.disabled:focus, fieldset[disabled] .datepicker table tr td span.active.disabled.focus, .datepicker table tr td span.active.disabled.disabled:hover:hover, .datepicker table tr td span.active.disabled.disabled:hover:focus, .datepicker table tr td span.active.disabled.disabled.focus:hover, .datepicker table tr td span.active.disabled[disabled]:hover:hover, .datepicker table tr td span.active.disabled[disabled]:hover:focus, .datepicker table tr td span.active.disabled.focus[disabled]:hover, fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover, fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus, fieldset[disabled] .datepicker table tr td span.active.disabled.focus:hover {
background-color: #007bff;
border-color: #0277f4;
}
@@ -526,7 +487,7 @@ fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
color: #212529;
color: #000;
background: #e9e9ea;
}

2
inst/www/shared/datepicker/css/bootstrap-datepicker3.min.css vendored
View File

File diff suppressed because one or more lines are too long

17
inst/www/shared/datepicker/scss/build3.scss
View File

@@ -26,27 +26,12 @@ $dropdown-border: $dropdown-border-color !default;
//$btn-link-disabled-color: $gray-light;
//$dropdown-bg: #fff;
// Setup BS4 style color contrasting
$yiq-contrasted-threshold: 150 !default;
$yiq-text-dark: #212529 !default;
$yiq-text-light: #fff !default;
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= $yiq-contrasted-threshold) {
@return $dark;
} @else {
@return $light;
}
}
@mixin button-variant($background, $border) {
$color: color-yiq($background);
$color: color-contrast($background);
color: $color;
background-color: $background;

6
inst/www/shared/datepicker/scss/datepicker3.scss
View File

@@ -93,7 +93,7 @@
}
&.day:hover,
&.focused {
color: color-yiq($gray-lighter);
color: color-contrast($gray-lighter);
background: $gray-lighter;
cursor: pointer;
}
@@ -192,7 +192,7 @@
@include border-radius-shim(4px);
&:hover,
&.focused {
color: color-yiq($gray-lighter);
color: color-contrast($gray-lighter);
background: $gray-lighter;
}
&.disabled,
@@ -225,7 +225,7 @@
tfoot tr th {
cursor: pointer;
&:hover {
color: color-yiq($gray-lighter);
color: color-contrast($gray-lighter);
background: $gray-lighter;
}
}

23
inst/www/shared/ionrangeslider/scss/shiny.scss
View File

@@ -6,27 +6,6 @@
@import "_base";
////////////////////////////////////////////////////////////////////////////
// Setup BS4 style color contrasting
$yiq-contrasted-threshold: 150 !default;
$yiq-text-dark: #212529 !default;
$yiq-text-light: #fff !default;
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= $yiq-contrasted-threshold) {
@return $dark;
} @else {
@return $light;
}
}
// Both BS3 and BS4 define a border radius mixin, but just in case
// we're trying to compile this without bootstrapSass
@mixin border-radius-shim($radius) {
@@ -79,7 +58,7 @@ $font-family: Arial, sans-serif !default;
$minmax_line_height: 1.333 !default;
$fromto_bg_color: $accent !default;
$fromto_color: color-yiq($fromto_bg_color) !default;
$fromto_color: color-contrast($fromto_bg_color) !default;
$fromto_font_size: 11px !default;
$fromto_line_height: 1.333 !default;

53
tools/datepicker-patches/002-scss-improvements.patch
View File

@@ -2,10 +2,10 @@ diff --git a/inst/www/shared/datepicker/scss/build3.scss b/inst/www/shared/datep
index b5388654..0dac6a62 100644
--- a/inst/www/shared/datepicker/scss/build3.scss
+++ b/inst/www/shared/datepicker/scss/build3.scss
@@ -6,32 +6,48 @@
@@ -6,32 +6,33 @@
//
// Variables and mixins copied from Bootstrap 3.3.5
-// Variables
-$gray: lighten(#000, 33.5%); // #555
-$gray-light: lighten(#000, 46.7%); // #777
@@ -29,21 +29,13 @@ index b5388654..0dac6a62 100644
+//$line-height-base: 1.428571429;
+//$btn-link-disabled-color: $gray-light;
+//$dropdown-bg: #fff;
-$brand-primary: darken(#428bca, 6.5%); // #337ab7
+// Setup BS4 style color contrasting
+$yiq-contrasted-threshold: 150 !default;
+$yiq-text-dark: #212529 !default;
+$yiq-text-light: #fff !default;
-$btn-primary-color: #fff;
-$btn-primary-bg: $brand-primary;
-$btn-primary-border: darken($btn-primary-bg, 5%);
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+ $r: red($color);
+ $g: green($color);
+ $b: blue($color);
-$btn-link-disabled-color: $gray-light;
-
-$state-info-bg: #d9edf7;
@@ -53,19 +45,12 @@ index b5388654..0dac6a62 100644
-
-$dropdown-bg: #fff;
-$dropdown-border: rgba(0,0,0,.15);
+ $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+ @if ($yiq >= $yiq-contrasted-threshold) {
+ @return $dark;
+ } @else {
+ @return $light;
+ }
+}
-// Mixins
+@mixin button-variant($background, $border) {
+ $color: color-yiq($background);
+ $color: color-contrast($background);
-// Button variants
-@mixin button-variant($color, $background, $border) {
color: $color;
@@ -94,7 +79,7 @@ index b5388654..0dac6a62 100644
- border-color: darken($border, 12%);
+ background-color: mix($background, $color, 90%);
+ border-color: mix($border, $color, 88%);
&:hover,
&:focus,
&.focus {
@@ -114,7 +99,7 @@ index 3d1621e0..3e031b31 100644
}
&.day:hover,
&.focused {
+ color: color-yiq($gray-lighter);
+ color: color-contrast($gray-lighter);
background: $gray-lighter;
cursor: pointer;
}
@@ -125,7 +110,7 @@ index 3d1621e0..3e031b31 100644
- @include button-variant(#000, $highlighted-bg, darken($highlighted-bg, 20%));
+ @include button-variant($highlighted-bg, darken($highlighted-bg, 20%));
border-radius: 0;
&.focused {
@@ -109,7 +110,7 @@
}
@@ -133,7 +118,7 @@ index 3d1621e0..3e031b31 100644
$today-bg: lighten(orange, 30%);
- @include button-variant(#000, $today-bg, darken($today-bg, 20%));
+ @include button-variant($today-bg, darken($today-bg, 20%));
&.focused {
background: darken($today-bg, 10%);
@@ -123,7 +124,7 @@
@@ -143,7 +128,7 @@ index 3d1621e0..3e031b31 100644
- @include button-variant(#000, $range-bg, darken($range-bg, 20%));
+ @include button-variant($range-bg, darken($range-bg, 20%));
border-radius: 0;
&.focused {
@@ -138,7 +139,7 @@
}
@@ -151,7 +136,7 @@ index 3d1621e0..3e031b31 100644
$range-highlighted-bg: mix($state-info-bg, $gray-lighter, 50%);
- @include button-variant(#000, $range-highlighted-bg, darken($range-highlighted-bg, 20%));
+ @include button-variant($range-highlighted-bg, darken($range-highlighted-bg, 20%));
&.focused {
background: darken($range-highlighted-bg, 10%);
@@ -152,7 +153,7 @@
@@ -160,7 +145,7 @@ index 3d1621e0..3e031b31 100644
$range-today-bg: mix(orange, $gray-lighter, 50%);
- @include button-variant(#000, $range-today-bg, darken($range-today-bg, 20%));
+ @include button-variant($range-today-bg, darken($range-today-bg, 20%));
&.disabled,
&.disabled:active {
@@ -162,12 +163,12 @@
@@ -182,7 +167,7 @@ index 3d1621e0..3e031b31 100644
border-radius: 4px;
&:hover,
&.focused {
+ color: color-yiq($gray-lighter);
+ color: color-contrast($gray-lighter);
background: $gray-lighter;
}
&.disabled,
@@ -200,8 +185,8 @@ index 3d1621e0..3e031b31 100644
cursor: pointer;
&:hover {
- background: $gray-lighter;
+ color: color-yiq($gray-lighter);
+ color: color-contrast($gray-lighter);
+ background: $gray-lighter;
}
}

2
tools/datepicker-patches/003-border-radius-mixin.patch
View File

@@ -36,7 +36,7 @@ index 3e031b31..758f7301 100644
+ @include border-radius-shim(4px);
&:hover,
&.focused {
color: color-yiq($gray-lighter);
color: color-contrast($gray-lighter);
@@ -243,10 +253,10 @@
text-align: center;
}

42
tools/ion.rangeSlider-patches/0001-Add-skin-customized-for-Shiny.patch
View File

@@ -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..3356cb6d
index 00000000..4a0fccc1
--- /dev/null
+++ b/inst/www/shared/ionrangeslider/scss/shiny.scss
@@ -0,0 +1,182 @@
@@ -0,0 +1,174 @@
+/* '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
@@ -12,25 +12,17 @@ index 00000000..3356cb6d
+
+@import "_base";
+
+////////////////////////////////////////////////////////////////////////////
+// Setup BS4 style color contrasting
+$yiq-contrasted-threshold: 150 !default;
+$yiq-text-dark: #212529 !default;
+$yiq-text-light: #fff !default;
+
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+ $r: red($color);
+ $g: green($color);
+ $b: blue($color);
+
+ $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+ @if ($yiq >= $yiq-contrasted-threshold) {
+ @return $dark;
+// Both BS3 and BS4 define a border radius mixin, but just in case
+// we're trying to compile this without bootstrapSass
+@mixin border-radius-shim($radius) {
+ @if mixin-exists("border-radius") {
+ @include border-radius($radius);
+ } @else {
+ @return $light;
+ border-radius: $radius;
+ }
+}
+
+
+////////////////////////////////////////////////////////////////////////////
+
+// Re-define font-family on .irs to make it configurable
@@ -72,7 +64,7 @@ index 00000000..3356cb6d
+ $minmax_line_height: 1.333 !default;
+
+ $fromto_bg_color: $accent !default;
+ $fromto_color: color-yiq($fromto_bg_color) !default;
+ $fromto_color: color-contrast($fromto_bg_color) !default;
+ $fromto_font_size: 11px !default;
+ $fromto_line_height: 1.333 !default;
+
@@ -93,7 +85,7 @@ index 00000000..3356cb6d
+ background: $line_bg;
+ background-color: $line_bg_color;
+ border: $line_border;
+ border-radius: $line_height;
+ @include border-radius-shim($line_height);
+ }
+
+ .#{$name}-bar {
@@ -104,7 +96,7 @@ index 00000000..3356cb6d
+ background: $bar_color;
+
+ &--single {
+ border-radius: $line_height 0 0 $line_height;
+ @include border-radius-shim($line_height 0 0 $line_height);
+ }
+ }
+
@@ -113,7 +105,7 @@ index 00000000..3356cb6d
+ top: 38px;
+ height: 2px;
+ background: rgba($fg, 0.3);
+ border-radius: 5px;
+ @include border-radius-shim(5px);
+ }
+ .lt-ie9 .#{$name}-shadow {
+ filter: alpha(opacity=30);
@@ -128,7 +120,7 @@ index 00000000..3356cb6d
+ border: $handle_border;
+ background-color: $handle_color;
+ box-shadow: $handle_box_shadow;
+ border-radius: $handle_width;
+ @include border-radius-shim($handle_width);
+
+ &.state_hover,
+ &:hover {
@@ -143,7 +135,7 @@ index 00000000..3356cb6d
+ color: $minmax_text_color;
+ text-shadow: none;
+ background-color: $minmax_bg_color;
+ border-radius: $custom_radius;
+ @include border-radius-shim($custom_radius);
+ font-size: $minmax_font_size;
+ line-height: $minmax_line_height;
+ }
@@ -160,7 +152,7 @@ index 00000000..3356cb6d
+ text-shadow: none;
+ padding: 1px 3px;
+ background-color: $fromto_bg_color;
+ border-radius: $custom_radius;
+ @include border-radius-shim($custom_radius);
+ font-size: $fromto_font_size;
+ line-height: $fromto_line_height;
+ }

78
tools/ion.rangeSlider-patches/0005-border-radius-mixin.patch
View File

@@ -1,78 +0,0 @@
diff --git a/inst/www/shared/ionrangeslider/scss/shiny.scss b/inst/www/shared/ionrangeslider/scss/shiny.scss
index 6804293b..8c8ac372 100644
--- a/inst/www/shared/ionrangeslider/scss/shiny.scss
+++ b/inst/www/shared/ionrangeslider/scss/shiny.scss
@@ -25,6 +25,19 @@ $yiq-text-light: #fff !default;
@return $light;
}
}
+
+
+// Both BS3 and BS4 define a border radius mixin, but just in case
+// we're trying to compile this without bootstrapSass
+@mixin border-radius-shim($radius) {
+ @if mixin-exists("border-radius") {
+ @include border-radius($radius);
+ } @else {
+ border-radius: $radius;
+ }
+}
+
+
////////////////////////////////////////////////////////////////////////////
// Re-define font-family on .irs to make it configurable
@@ -87,7 +100,7 @@ $font-family: Arial, sans-serif !default;
background: $line_bg;
background-color: $line_bg_color;
border: $line_border;
- border-radius: $line_height;
+ @include border-radius-shim($line_height);
}
.#{$name}-bar {
@@ -98,7 +111,7 @@ $font-family: Arial, sans-serif !default;
background: $bar_color;
&--single {
- border-radius: $line_height 0 0 $line_height;
+ @include border-radius-shim($line_height 0 0 $line_height);
}
}
@@ -107,7 +120,7 @@ $font-family: Arial, sans-serif !default;
top: 38px;
height: 2px;
background: rgba($fg, 0.3);
- border-radius: 5px;
+ @include border-radius-shim(5px);
}
.lt-ie9 .#{$name}-shadow {
filter: alpha(opacity=30);
@@ -122,7 +135,7 @@ $font-family: Arial, sans-serif !default;
border: $handle_border;
background-color: $handle_color;
box-shadow: $handle_box_shadow;
- border-radius: $handle_width;
+ @include border-radius-shim($handle_width);
&.state_hover,
&:hover {
@@ -137,7 +150,7 @@ $font-family: Arial, sans-serif !default;
color: $minmax_text_color;
text-shadow: none;
background-color: $minmax_bg_color;
- border-radius: $custom_radius;
+ @include border-radius-shim($custom_radius);
font-size: $minmax_font_size;
line-height: $minmax_line_height;
}
@@ -154,7 +167,7 @@ $font-family: Arial, sans-serif !default;
text-shadow: none;
padding: 1px 3px;
background-color: $fromto_bg_color;
- border-radius: $custom_radius;
+ @include border-radius-shim($custom_radius);
font-size: $fromto_font_size;
line-height: $fromto_line_height;
}

14
tools/updateBootstrapDatepicker.R
View File

@@ -78,14 +78,16 @@ library(sass)
library(bslib)
css_dir <- file.path(dest_dir, "css")
dir.create(css_dir, recursive = TRUE)
bs_sass(
sass_partial(
sass_file(file.path(dest_dir, "scss", "build3.scss")),
theme = bs_theme(),
output = file.path(css_dir, "bootstrap-datepicker3.css")
bundle = bs_theme(),
output = file.path(css_dir, "bootstrap-datepicker3.css"),
write_attachments = FALSE
)
bs_sass(
sass_partial(
sass_file(file.path(dest_dir, "scss", "build3.scss")),
theme = bs_theme(),
bundle = bs_theme(),
output = file.path(css_dir, "bootstrap-datepicker3.min.css"),
options = sass_options(output_style = "compressed")
options = sass_options(output_style = "compressed"),
write_attachments = FALSE
)

5
tools/updateIonRangeSlider.R
View File

@@ -57,7 +57,10 @@ for (patch in list.files(patch_dir, full.names = TRUE)) {
library(sass)
dir.create(file.path(target, "css"))
sass(
sass_file(file.path(target, "scss", "shiny.scss")),
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")
)