Merge pull request #3914 from rstudio/chore/shiny-sass-bs-3-4-5

rstudio · Oct 19, 2023 · a0a83d5 · a0a83d5
2 parents be6f671 + 8fbc4ad
commit a0a83d5
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 53 deletions.
diff --git a/NEWS.md b/NEWS.md
@@ -6,6 +6,8 @@
 
 * Shiny's CSS styling for things like `showNotification()`, `withProgress()`, `inputPanel()`, etc., now looks better with `{bslib}`'s upcoming CSS-only dark mode. (#3882)
 
+* 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)
+
 ## Bug fixes
 
 * `fileInput()` no longer has unwanted round corners applied to the `buttonLabel`. (#3879)

diff --git a/R/shinyui.R b/R/shinyui.R
@@ -133,8 +133,11 @@ shinyDependencyCSS <- function(theme) {
     ))
   }
 
+  bs_version <- bslib::theme_version(theme)
+  bootstrap_scss <- paste0("shiny.bootstrap", bs_version, ".scss")
+
   scss_home <- system_file("www/shared/shiny_scss", package = "shiny")
-  scss_files <- file.path(scss_home, c("bootstrap.scss", "shiny.scss"))
+  scss_files <- file.path(scss_home, c(bootstrap_scss, "shiny.scss"))
   scss_files <- lapply(scss_files, sass::sass_file)
 
   bslib::bs_dependency(

diff --git a/inst/www/shared/shiny_scss/bootstrap.scss b/inst/www/shared/shiny_scss/bootstrap.scss
diff --git a/inst/www/shared/shiny_scss/shiny.bootstrap3.scss b/inst/www/shared/shiny_scss/shiny.bootstrap3.scss
@@ -0,0 +1,34 @@
+$bg: $body-bg !default;
+$fg: $text-color !default; // BS3
+$theme-colors: ("primary": $brand-primary, "info": $brand-info, "warning": $brand-warning, "danger": $brand-danger) !default;
+
+// No $border-width, $border-color, or $border-radius in BS3
+$border-width: 1px !default;
+$border-color: mix($bg, $fg, 70%) !default;
+$border-radius: $border-radius-base !default;
+
+$shiny-disconnected-bg:             mix($bg, $fg, 58%) !default;
+$shiny-table-na:                    mix($bg, $fg, 54%) !default;
+$shiny-error-validated-color:       mix($bg, $fg, 50%) !default;
+$shiny-progress-text-bg-color:      #eef8ff !default;
+$shiny-input-panel-bg:              mix($bg, $fg, 96%) !default;
+$shiny-input-panel-border:          $border-width solid $border-color !default;
+$shiny-input-panel-border-radius:   $border-radius !default;
+$shiny-text-output-border-radius:   $border-radius !default;
+$notification-bg-color:             mix($bg, $fg, 90%) !default;
+$notification-color:                $fg !default;
+$notification-border:               $border-width solid $border-color !default;
+$notification-border-radius:        $border-radius !default;
+$notification-message-bg:           mix($bg, map-get($theme-colors, "info"), 90%) !default;
+$notification-message-color:        mix($fg, map-get($theme-colors, "info"), 10%) !default;
+$notification-message-border:       $border-width solid mix($bg, map-get($theme-colors, "info"), 53%) !default;
+$notification-warning-bg:           mix($bg, map-get($theme-colors, "warning"), 90%) !default;
+$notification-warning-color:        mix($fg, map-get($theme-colors, "warning"), 10%) !default;
+$notification-warning-border:       $border-width solid mix($bg, map-get($theme-colors, "warning"), 71%) !default;
+$notification-error-bg:             mix($bg, map-get($theme-colors, "danger"), 90%) !default;
+$notification-error-color:          mix($fg, map-get($theme-colors, "danger"), 10%) !default;
+$notification-error-border:         $border-width solid mix($bg, map-get($theme-colors, "danger"), 79%) !default;
+$notification-close-color:          mix($bg, $fg, 20%) !default;
+$notification-close-hover-color:    $fg !default;
+$notification-content-action-color: map-get($theme-colors, "primary") !default;
+$datepicker-disabled-color:         $dropdown-link-disabled-color !default;
diff --git a/inst/www/shared/shiny_scss/shiny.bootstrap4.scss b/inst/www/shared/shiny_scss/shiny.bootstrap4.scss
@@ -0,0 +1,30 @@
+$bg: $body-bg !default;
+$fg: $body-color !default;
+
+$shiny-disconnected-bg:             mix($bg, $fg, 58%) !default;
+$shiny-table-na:                    mix($bg, $fg, 54%) !default;
+$shiny-error-validated-color:       mix($bg, $fg, 50%) !default;
+$shiny-progress-text-bg-color:      #eef8ff !default;
+$shiny-input-panel-bg:              mix($bg, $fg, 96%) !default;
+$shiny-input-panel-border:          $border-width solid $border-color !default;
+$shiny-input-panel-border-radius:   $border-radius !default;
+$shiny-text-output-border-radius:   $border-radius !default;
+$notification-bg-color:             mix($bg, $fg, 90%) !default;
+$notification-color:                $fg !default;
+$notification-border:               $border-width solid $border-color !default;
+$notification-border-radius:        $border-radius !default;
+$notification-message-bg:           mix($bg, map-get($theme-colors, "info"), 90%) !default;
+$notification-message-color:        mix($fg, map-get($theme-colors, "info"), 10%) !default;
+$notification-message-border:       $border-width solid mix($bg, map-get($theme-colors, "info"), 53%) !default;
+$notification-warning-bg:           mix($bg, map-get($theme-colors, "warning"), 90%) !default;
+$notification-warning-color:        mix($fg, map-get($theme-colors, "warning"), 10%) !default;
+$notification-warning-border:       $border-width solid mix($bg, map-get($theme-colors, "warning"), 71%) !default;
+$notification-error-bg:             mix($bg, map-get($theme-colors, "danger"), 90%) !default;
+$notification-error-color:          mix($fg, map-get($theme-colors, "danger"), 10%) !default;
+$notification-error-border:         $border-width solid mix($bg, map-get($theme-colors, "danger"), 79%) !default;
+$notification-close-color:          mix($bg, $fg, 20%) !default;
+$notification-close-hover-color:    $fg !default;
+$notification-content-action-color: map-get($theme-colors, "primary") !default;
+$datepicker-disabled-color:         $dropdown-link-disabled-color !default;
+
+$shiny-file-active-shadow: $custom-file-focus-box-shadow !default;
diff --git a/inst/www/shared/shiny_scss/shiny.bootstrap5.scss b/inst/www/shared/shiny_scss/shiny.bootstrap5.scss
@@ -0,0 +1,37 @@
+$shiny-emphasis-color-rgb:          var(--#{$prefix}emphasis-color-rgb, 0,0,0) !default;
+
+$shiny-disconnected-bg:             RGBA($shiny-emphasis-color-rgb, 0.42) !default;
+$shiny-table-na:                    RGBA($shiny-emphasis-color-rgb, 0.46) !default;
+$shiny-error-color:                 var(--#{$prefix}danger-text-emphasis) !default;
+$shiny-error-validated-color:       RGBA($shiny-emphasis-color-rgb, 0.5) !default;
+$shiny-progress-text-bg-color:      RGBA(var(--#{$prefix}primary-rgb, #{to-rgb($primary)}), 0.05) !default;
+
+$shiny-input-panel-bg:              RGBA($shiny-emphasis-color-rgb, 0.04) !default;
+$shiny-input-panel-border:          $border-width solid var(--#{$prefix}border-color, #{$border-color}) !default;
+$shiny-input-panel-border-radius:   $border-radius !default;
+$shiny-text-output-border-radius:   $border-radius !default;
+
+$notification-color:                var(--#{$prefix}emphasis-color, #{$body-emphasis-color}) !default;
+$notification-bg-color:             var(--#{$prefix}body-bg, #{$body-bg}) !default;
+$notification-border:               $border-width solid var(--#{$prefix}border-color, #{$border-color}) !default;
+$notification-border-radius:        $border-radius !default;
+
+$notification-message-color:        var(--#{$prefix}info-text-emphasis) !default;
+$notification-message-bg:           var(--#{$prefix}info-bg-subtle) !default;
+$notification-message-border:       $border-width solid var(--#{$prefix}info-border-subtle) !default;
+
+$notification-warning-color:        var(--#{$prefix}warning-text-emphasis) !default;
+$notification-warning-bg:           var(--#{$prefix}warning-bg-subtle) !default;
+$notification-warning-border:       $border-width solid var(--#{$prefix}warning-border-subtle) !default;
+
+$notification-error-color:          var(--#{$prefix}danger-text-emphasis) !default;
+$notification-error-bg:             var(--#{$prefix}danger-bg-subtle) !default;
+$notification-error-border:         $border-width solid var(--#{$prefix}danger-border-subtle) !default;
+
+$notification-close-color:          RGBA($shiny-emphasis-color-rgb, 0.8) !default;
+$notification-close-hover-color:    RGB($shiny-emphasis-color-rgb) !default;
+$notification-content-action-color: RGB(var(--#{$prefix}primary-rgb, #{to-rgb($primary)})) !default;
+
+$datepicker-disabled-color:         $dropdown-link-disabled-color !default;
+
+$shiny-file-active-shadow:          $input-focus-box-shadow !default;