Skip to content

Commit a0a83d5

Browse files
cpsievertcpsievert
authored
Merge pull request #3914 from rstudio/chore/shiny-sass-bs-3-4-5
2 parents be6f671 + 8fbc4ad commit a0a83d5

File tree

6 files changed

+107
-53
lines changed

6 files changed

+107
-53
lines changed

‎NEWS.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
* Shiny's CSS styling for things like `showNotification()`, `withProgress()`, `inputPanel()`, etc., now looks better with `{bslib}`'s upcoming CSS-only dark mode. (#3882)
88

9+
* Shiny's Sass variables are now set specifically for major versions of Bootstrap. Bootstrap versions 3 and 4 are unaffected by this change, and the Bootstrap 5 variables now target Bootstrap 5.3 to take advantage of Bootstrap's dark mode and client-side theming via CSS variables. (#3914)
10+
911
## Bug fixes
1012

1113
* `fileInput()` no longer has unwanted round corners applied to the `buttonLabel`. (#3879)

‎R/shinyui.R‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,11 @@ shinyDependencyCSS <- function(theme) {
133133
))
134134
}
135135

136+
bs_version <- bslib::theme_version(theme)
137+
bootstrap_scss <- paste0("shiny.bootstrap", bs_version, ".scss")
138+
136139
scss_home <- system_file("www/shared/shiny_scss", package = "shiny")
137-
scss_files <- file.path(scss_home, c("bootstrap.scss", "shiny.scss"))
140+
scss_files <- file.path(scss_home, c(bootstrap_scss, "shiny.scss"))
138141
scss_files <- lapply(scss_files, sass::sass_file)
139142

140143
bslib::bs_dependency(

‎inst/www/shared/shiny_scss/bootstrap.scss‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎inst/www/shared/shiny_scss/shiny.bootstrap3.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
$bg: $body-bg !default;
2+
$fg: $text-color !default; // BS3
3+
$theme-colors: ("primary": $brand-primary, "info": $brand-info, "warning": $brand-warning, "danger": $brand-danger) !default;
4+
5+
// No $border-width, $border-color, or $border-radius in BS3
6+
$border-width: 1px !default;
7+
$border-color: mix($bg, $fg, 70%) !default;
8+
$border-radius: $border-radius-base !default;
9+
10+
$shiny-disconnected-bg: mix($bg, $fg, 58%) !default;
11+
$shiny-table-na: mix($bg, $fg, 54%) !default;
12+
$shiny-error-validated-color: mix($bg, $fg, 50%) !default;
13+
$shiny-progress-text-bg-color: #eef8ff !default;
14+
$shiny-input-panel-bg: mix($bg, $fg, 96%) !default;
15+
$shiny-input-panel-border: $border-width solid $border-color !default;
16+
$shiny-input-panel-border-radius: $border-radius !default;
17+
$shiny-text-output-border-radius: $border-radius !default;
18+
$notification-bg-color: mix($bg, $fg, 90%) !default;
19+
$notification-color: $fg !default;
20+
$notification-border: $border-width solid $border-color !default;
21+
$notification-border-radius: $border-radius !default;
22+
$notification-message-bg: mix($bg, map-get($theme-colors, "info"), 90%) !default;
23+
$notification-message-color: mix($fg, map-get($theme-colors, "info"), 10%) !default;
24+
$notification-message-border: $border-width solid mix($bg, map-get($theme-colors, "info"), 53%) !default;
25+
$notification-warning-bg: mix($bg, map-get($theme-colors, "warning"), 90%) !default;
26+
$notification-warning-color: mix($fg, map-get($theme-colors, "warning"), 10%) !default;
27+
$notification-warning-border: $border-width solid mix($bg, map-get($theme-colors, "warning"), 71%) !default;
28+
$notification-error-bg: mix($bg, map-get($theme-colors, "danger"), 90%) !default;
29+
$notification-error-color: mix($fg, map-get($theme-colors, "danger"), 10%) !default;
30+
$notification-error-border: $border-width solid mix($bg, map-get($theme-colors, "danger"), 79%) !default;
31+
$notification-close-color: mix($bg, $fg, 20%) !default;
32+
$notification-close-hover-color: $fg !default;
33+
$notification-content-action-color: map-get($theme-colors, "primary") !default;
34+
$datepicker-disabled-color: $dropdown-link-disabled-color !default;

‎inst/www/shared/shiny_scss/shiny.bootstrap4.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
$bg: $body-bg !default;
2+
$fg: $body-color !default;
3+
4+
$shiny-disconnected-bg: mix($bg, $fg, 58%) !default;
5+
$shiny-table-na: mix($bg, $fg, 54%) !default;
6+
$shiny-error-validated-color: mix($bg, $fg, 50%) !default;
7+
$shiny-progress-text-bg-color: #eef8ff !default;
8+
$shiny-input-panel-bg: mix($bg, $fg, 96%) !default;
9+
$shiny-input-panel-border: $border-width solid $border-color !default;
10+
$shiny-input-panel-border-radius: $border-radius !default;
11+
$shiny-text-output-border-radius: $border-radius !default;
12+
$notification-bg-color: mix($bg, $fg, 90%) !default;
13+
$notification-color: $fg !default;
14+
$notification-border: $border-width solid $border-color !default;
15+
$notification-border-radius: $border-radius !default;
16+
$notification-message-bg: mix($bg, map-get($theme-colors, "info"), 90%) !default;
17+
$notification-message-color: mix($fg, map-get($theme-colors, "info"), 10%) !default;
18+
$notification-message-border: $border-width solid mix($bg, map-get($theme-colors, "info"), 53%) !default;
19+
$notification-warning-bg: mix($bg, map-get($theme-colors, "warning"), 90%) !default;
20+
$notification-warning-color: mix($fg, map-get($theme-colors, "warning"), 10%) !default;
21+
$notification-warning-border: $border-width solid mix($bg, map-get($theme-colors, "warning"), 71%) !default;
22+
$notification-error-bg: mix($bg, map-get($theme-colors, "danger"), 90%) !default;
23+
$notification-error-color: mix($fg, map-get($theme-colors, "danger"), 10%) !default;
24+
$notification-error-border: $border-width solid mix($bg, map-get($theme-colors, "danger"), 79%) !default;
25+
$notification-close-color: mix($bg, $fg, 20%) !default;
26+
$notification-close-hover-color: $fg !default;
27+
$notification-content-action-color: map-get($theme-colors, "primary") !default;
28+
$datepicker-disabled-color: $dropdown-link-disabled-color !default;
29+
30+
$shiny-file-active-shadow: $custom-file-focus-box-shadow !default;

‎inst/www/shared/shiny_scss/shiny.bootstrap5.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
$shiny-emphasis-color-rgb: var(--#{$prefix}emphasis-color-rgb, 0,0,0) !default;
2+
3+
$shiny-disconnected-bg: RGBA($shiny-emphasis-color-rgb, 0.42) !default;
4+
$shiny-table-na: RGBA($shiny-emphasis-color-rgb, 0.46) !default;
5+
$shiny-error-color: var(--#{$prefix}danger-text-emphasis) !default;
6+
$shiny-error-validated-color: RGBA($shiny-emphasis-color-rgb, 0.5) !default;
7+
$shiny-progress-text-bg-color: RGBA(var(--#{$prefix}primary-rgb, #{to-rgb($primary)}), 0.05) !default;
8+
9+
$shiny-input-panel-bg: RGBA($shiny-emphasis-color-rgb, 0.04) !default;
10+
$shiny-input-panel-border: $border-width solid var(--#{$prefix}border-color, #{$border-color}) !default;
11+
$shiny-input-panel-border-radius: $border-radius !default;
12+
$shiny-text-output-border-radius: $border-radius !default;
13+
14+
$notification-color: var(--#{$prefix}emphasis-color, #{$body-emphasis-color}) !default;
15+
$notification-bg-color: var(--#{$prefix}body-bg, #{$body-bg}) !default;
16+
$notification-border: $border-width solid var(--#{$prefix}border-color, #{$border-color}) !default;
17+
$notification-border-radius: $border-radius !default;
18+
19+
$notification-message-color: var(--#{$prefix}info-text-emphasis) !default;
20+
$notification-message-bg: var(--#{$prefix}info-bg-subtle) !default;
21+
$notification-message-border: $border-width solid var(--#{$prefix}info-border-subtle) !default;
22+
23+
$notification-warning-color: var(--#{$prefix}warning-text-emphasis) !default;
24+
$notification-warning-bg: var(--#{$prefix}warning-bg-subtle) !default;
25+
$notification-warning-border: $border-width solid var(--#{$prefix}warning-border-subtle) !default;
26+
27+
$notification-error-color: var(--#{$prefix}danger-text-emphasis) !default;
28+
$notification-error-bg: var(--#{$prefix}danger-bg-subtle) !default;
29+
$notification-error-border: $border-width solid var(--#{$prefix}danger-border-subtle) !default;
30+
31+
$notification-close-color: RGBA($shiny-emphasis-color-rgb, 0.8) !default;
32+
$notification-close-hover-color: RGB($shiny-emphasis-color-rgb) !default;
33+
$notification-content-action-color: RGB(var(--#{$prefix}primary-rgb, #{to-rgb($primary)})) !default;
34+
35+
$datepicker-disabled-color: $dropdown-link-disabled-color !default;
36+
37+
$shiny-file-active-shadow: $input-focus-box-shadow !default;

0 commit comments

Comments
 (0)