Upgrade to Bootstrap v5.3.1 (#749)

Co-authored-by: Garrick Aden-Buie <[email protected]>
Co-authored-by: cpsievert <[email protected]>

Author: cpsievert

R/bs-theme.R

@@ -277,7 +277,7 @@ bootstrap_bundle <- function(version) {
       # Don't name this "core" bundle so it can't easily be removed
       sass_layer(
         functions = bs5_sass_files("functions"),
-        defaults = bs5_sass_files("variables"),
+        defaults = list(bs5_sass_files("variables"), bs5_sass_files("variables-dark")),
         mixins = list(bs5_sass_files("maps"), bs5_sass_files("mixins")),
         rules = list(bs5_sass_files("mixins/banner"), "@include bsBanner('')")
       ),
@@ -352,15 +352,7 @@ bootstrap_bundle <- function(version) {
 
   sass_bundle(
     main_bundle,
-    # color-contrast() was introduced in Bootstrap 5.
-    # We include our own version for a few reasons:
-    # 1. Easily turn off warnings options(bslib.color_contrast_warnings=F)
-    # 2. Allow Bootstrap 3 & 4 to use color-contrast() in variable definitions
-    # 3. Allow Bootstrap 3 & 4 to use bs_get_contrast()
-    sass_layer(
-      functions = sass_file(path_inst("sass-utils/color-contrast.scss")),
-      rules = sass_file(path_inst("bslib-scss", "bslib.scss"))
-    )
+    bslib_bundle()
   )
 }
 
@@ -380,6 +372,16 @@ bootstrap_javascript <- function(version) {
   )
 }
 
+# -----------------------------------------------------------------
+# bslib specific Sass that gets bundled with Bootstrap
+# -----------------------------------------------------------------
+
+bslib_bundle <- function() {
+  sass_layer(
+    functions = sass_file(path_inst("bslib-scss", "functions.scss")),
+    rules = sass_file(path_inst("bslib-scss", "bslib.scss"))
+  )
+}
 
 # -----------------------------------------------------------------
 # BS3 compatibility bundle

R/sysdata.rda

@@ -1,6 +1,6 @@
 # DO NOT EDIT
 # This file is auto-generated by tools/yarn_install.R
-version_bs5 <- "5.2.2"
+version_bs5 <- "5.3.1"
 version_bs4 <- "4.6.0"
 version_bs3 <- "3.4.1"
 version_accessibility <- "1.0.6"

R/versions.R

@@ -1,4 +1,19 @@
 // Cards are white by default, but we want a smarter default for .well
 // that it appears gray by default
-$well-bg: $card-cap-bg !default;
+$well-bg: rgba($black, .03) !default;
 $well-color: $body-color !default;
+
+// Bootstrap 5.3.1 + selectize.js v0.12.4 (i.e., shiny v1.7.5) shim
+//
+// Starting with 5.3.x, Bootstrap started having Sass variables default to CSS
+// variables (e.g., $input-color: var(--bs-body-color)), which is problematic for
+// compuation that happens in Sass (e.g., `mix($color1, $color2)`). This bundle
+// fixes this problem for shiny::selectizeInput()'s Sass code (future versions of
+// selectizeInput() should hopefully address this problem, making this temporary
+// stopgap solution no longer required).
+$selectize-color-text: if(is-css-variable($input-color), $body-color, $input-color) !default;
+$selectize-color-item: rgba($selectize-color-text, 0.1) !default;
+$selectize-color-item-border: if(is-css-variable($input-border-color), $border-color, $input-border-color) !default;
+$selectize-color-dropdown: if(is-css-variable($dropdown-bg), $body-bg, $dropdown-bg) !default;
+$selectize-color-dropdown-border-top: rgba($input-border-color, 0.2) !default;
+$selectize-color-dropdown-item-create-text: rgba($selectize-color-text, 0.5) !default;

inst/bs3compat/_declarations.scss

@@ -1,2 +1,5 @@
 // BS3 had .navbar { margin-bottom: 20px; }
 $navbar-margin-bottom: 20px !default;
+
+// BS5+ variable used for prefixing CSS vars
+$prefix: bs- !default;

inst/bs3compat/_defaults.scss

@@ -38,11 +38,20 @@ ul.nav.navbar-nav {
   }
 }
 
-ul.nav.navbar-nav>li:not(.dropdown) {
-  @extend .nav-item;
-}
-ul.nav.navbar-nav>li>a {
-  @extend .nav-link;
+ul.nav.navbar-nav > li {
+  &:not(.dropdown) {
+    @extend .nav-item;
+  }
+
+  > a {
+    @extend .nav-link;
+  }
+  
+  &.active, &.show {
+    > a {
+      color: var(--#{$prefix}navbar-active-color);
+    }
+  }
 }
 
 // BS3 .navbar-default -> BS4 .navbar-light

inst/bs3compat/_navbar_compat.scss

@@ -0,0 +1,18 @@
+// color-contrast() was introduced in Bootstrap 5.
+// We include our own version for a few reasons:
+// 1. Easily turn off warnings options(bslib.color_contrast_warnings=F)
+// 2. Allow Bootstrap 3 & 4 to use color-contrast() in variable definitions
+// 3. Allow Bootstrap 3 & 4 to use bs_get_contrast()
+
+// Also note that color-contrast() lives in sass-utils since projects like Quarto
+// and flexdashboard currently assume it exists there....
+@import "../sass-utils/color-contrast.scss";
+
+
+@function is-css-variable($x) {
+  @if (type-of($x) != string) {
+    @return false;
+  } @else {
+    @return str-slice($x, 1, 6) == 'var(--';
+  }
+}

inst/bslib-scss/functions.scss

@@ -1,3 +1,9 @@
+// Accordions
+// These definitions can't go in _defaults.scss with a !default flag (because !default doesn't respect null)
+$accordion-button-active-bg: null;
+$accordion-button-active-color: null;
+$accordion-icon-active-color: null;
+
 // Shiny: selectInput() and selectizeInput()
 $selectize-color-dropdown-item-active: $component-active-bg !default;
 $selectize-color-dropdown-item-active-text: $component-active-color !default;