WIP: cascade-order + bslib PR #1308 vendor on top of #2246

scripts/_functions_sass.R

@@ -35,15 +35,21 @@ bslib_bs_theme <- function(version, preset = "shiny") {
 bs_full_theme <- function(theme, path_sass_markers) {
   bs_version <- bslib::theme_version(theme)
 
-  bs_bundle(
-    theme,
-    bslib = bslib_component_sass(),
-    shiny = shiny_sass(bs_version),
-    selectize = shiny_sass_selectize(bs_version),
-    ionrangeslider = shiny_sass_ionrangeslider(),
-    daterange = shiny_sass_daterange_picker(),
-    # The next layer must come last so that its text appears where a user layer would
-    marker = sass_layer_file(path_sass_markers),
+  # `shiny` before `theme` so bslib's bs3compat (baked into `theme`) wins cascade
+  # ties against R-shiny's shiny.scss. bs_bundle() requires theme-first, so call
+  # sass::sass_bundle() directly and reapply the bs_theme class.
+  structure(
+    sass::sass_bundle(
+      shiny = shiny_sass(bs_version),
+      theme,
+      bslib = bslib_component_sass(),
+      selectize = shiny_sass_selectize(bs_version),
+      ionrangeslider = shiny_sass_ionrangeslider(),
+      daterange = shiny_sass_daterange_picker(),
+      # The next layer must come last so that its text appears where a user layer would
+      marker = sass_layer_file(path_sass_markers),
+    ),
+    class = class(theme)
   )
 }
 
@@ -140,6 +146,7 @@ theme_files_used <- function(theme_sass_lines) {
   }
 
   imports <- trimws(imports)
+  imports <- sub("\\s*//.*$", "", imports)
   imports <- gsub("^@import \"([^\"]+?)\";", "\\1", imports)
   imports <- gsub("^@import '([^']+?)';", "\\1", imports)
 

scripts/_pkg-sources.R

@@ -1,5 +1,5 @@
 list(
-  bslib = "rstudio/bslib@main",
+  bslib = "rstudio/bslib@fix/bs5-radio-button-spacing",
   shiny = "rstudio/shiny@main",
   sass = "sass",
   htmltools = "rstudio/htmltools@main"

shiny/_versions.py

@@ -1,7 +1,7 @@
 shiny_html_deps = "1.13.0.9000"
 bslib = "0.10.0.9000"
 htmltools = "0.5.9.9000"
-bootstrap = "5.3.1"
+bootstrap = "5.3.8"
 requirejs = "2.3.6"
 
 __all__ = (

shiny/ui/_theme_presets.py

@@ -7,6 +7,7 @@
 ShinyThemePreset = Literal[
     "bootstrap",
     "shiny",
+    "brite",
     "cerulean",
     "cosmo",
     "cyborg",
@@ -37,6 +38,7 @@
 shiny_theme_presets: tuple[ShinyThemePreset, ...] = (
     "bootstrap",
     "shiny",
+    "brite",
     "cerulean",
     "cosmo",
     "cyborg",
@@ -70,6 +72,7 @@
 )
 
 shiny_theme_presets_bootswatch: tuple[ShinyThemePreset, ...] = (
+    "brite",
     "cerulean",
     "cosmo",
     "cyborg",

shiny/www/shared/_version.json

@@ -1,5 +1,5 @@
 {
   "note!": "Generated by scripts/htmlDependencies.R: do not edit by hand",
   "package": "shiny",
-  "version": "1.13.0.9000 (rstudio/shiny@13c073a14b3ce585faedfa648b7111312b25ec17)"
+  "version": "1.13.0.9000 (rstudio/shiny@603ac2375b4b359c9a48f95a42d3427281d86fca)"
 }

shiny/www/shared/bootstrap/_version.json

@@ -1,7 +1,7 @@
 {
   "note!": "Generated by scripts/htmlDependencies.R: do not edit by hand",
-  "shiny_version": "1.13.0.9000 (rstudio/shiny@13c073a14b3ce585faedfa648b7111312b25ec17)",
-  "bslib_version": "0.10.0.9000 (rstudio/bslib@65b50da1c71494a8f764e41ab07309a2c467c39f)",
+  "shiny_version": "1.13.0.9000 (rstudio/shiny@603ac2375b4b359c9a48f95a42d3427281d86fca)",
+  "bslib_version": "0.10.0.9000 (rstudio/bslib@40e324dfbafa8df55005448428b1d8b5fb75c565)",
   "htmltools_version": "0.5.9.9000 (rstudio/htmltools@94c450e2798fcb7e5460dd997691a7185b6d7e74)",
-  "bootstrap_version": "5.3.1"
+  "bootstrap_version": "5.3.8"
 }

shiny/www/shared/bslib/_version.json

@@ -1,5 +1,5 @@
 {
   "note!": "Generated by scripts/htmlDependencies.R: do not edit by hand",
   "package": "bslib",
-  "version": "0.10.0.9000 (rstudio/bslib@65b50da1c71494a8f764e41ab07309a2c467c39f)"
+  "version": "0.10.0.9000 (rstudio/bslib@40e324dfbafa8df55005448428b1d8b5fb75c565)"
 }

shiny/www/shared/prism-code-editor/_version.json

@@ -1,5 +1,5 @@
 {
   "note!": "Generated by scripts/htmlDependencies.R: do not edit by hand",
   "package": "bslib",
-  "version": "0.10.0.9000 (rstudio/bslib@65b50da1c71494a8f764e41ab07309a2c467c39f)"
+  "version": "0.10.0.9000 (rstudio/bslib@40e324dfbafa8df55005448428b1d8b5fb75c565)"
 }

shiny/www/shared/sass/bslib/bs3compat/_shiny_input.scss

@@ -56,8 +56,8 @@ $form-group-margin-bottom: 1rem !default;
 // labels, see https://github.com/rstudio/shiny/blob/6fc06281/inst/www/shared/shiny_scss/shiny.scss#L344-L356
 // TODO: Consider removing if we add `input_checkbox()` and `input_radio()`
 @if $bootstrap-version == 5 {
-  .shiny-input-checkboxgroup,
-  .shiny-input-radiogroup {
+  .shiny-input-container.shiny-input-checkboxgroup,
+  .shiny-input-container.shiny-input-radiogroup {
     label ~ .shiny-options-group {
       margin-top: calc(#{-($line-height-base - $form-check-input-width) * .5} - #{$input-btn-border-width});
     }

shiny/www/shared/sass/bslib/lib/bs5/scss/_accordion.scss

@@ -20,7 +20,6 @@
   --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
   --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
   --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
-  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
   --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
   --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
   --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
@@ -77,7 +76,6 @@
 
   &:focus {
     z-index: 3;
-    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
     outline: 0;
     box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
   }
@@ -95,7 +93,7 @@
   &:first-of-type {
     @include border-top-radius(var(--#{$prefix}accordion-border-radius));
 
-    .accordion-button {
+    > .accordion-header .accordion-button {
       @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
     }
   }
@@ -108,13 +106,13 @@
   &:last-of-type {
     @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
 
-    .accordion-button {
+    > .accordion-header .accordion-button {
       &.collapsed {
         @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
       }
     }
 
-    .accordion-collapse {
+    > .accordion-collapse {
       @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
     }
   }
@@ -130,24 +128,21 @@
 // Remove borders and border-radius to keep accordion items edge-to-edge.
 
 .accordion-flush {
-  .accordion-collapse {
-    border-width: 0;
-  }
-
-  .accordion-item {
+  > .accordion-item {
     border-right: 0;
     border-left: 0;
     @include border-radius(0);
 
     &:first-child { border-top: 0; }
     &:last-child { border-bottom: 0; }
 
-    .accordion-button {
-      &,
-      &.collapsed {
-        @include border-radius(0);
-      }
+    // stylelint-disable selector-max-class
+    > .accordion-collapse,
+    > .accordion-header .accordion-button,
+    > .accordion-header .accordion-button.collapsed {
+      @include border-radius(0);
     }
+    // stylelint-enable selector-max-class
   }
 }
 

shiny/www/shared/sass/bslib/lib/bs5/scss/_button-group.scss

@@ -43,7 +43,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -133,7 +133,7 @@
 
   > .btn:not(:first-child),
   > .btn-group:not(:first-child) {
-    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -142,7 +142,12 @@
     @include border-bottom-radius(0);
   }
 
-  > .btn ~ .btn,
+  // The top radius should be 0 if the button is:
+  // - the "third or more" child
+  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+  // - part of a btn-group which isn't the first child
+  > .btn:nth-child(n + 3),
+  > :not(.btn-check) + .btn,
   > .btn-group:not(:first-child) > .btn {
     @include border-top-radius(0);
   }

shiny/www/shared/sass/bslib/lib/bs5/scss/_buttons.scss

@@ -112,6 +112,15 @@
     }
   }
 
+  .btn-check:checked:focus-visible + & {
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+  }
+
   &:disabled,
   &.disabled,
   fieldset:disabled & {
@@ -182,7 +191,7 @@
   --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
   --#{$prefix}btn-disabled-border-color: transparent;
   --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
+  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
 
   text-decoration: $link-decoration;
   -webkit-text-decoration: $link-decoration;

shiny/www/shared/sass/bslib/lib/bs5/scss/_card.scss

@@ -202,9 +202,8 @@
     // The child selector allows nested `.card` within `.card-group`
     // to display properly.
     > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      -webkit-flex: 1 0 0%;
+      flex: 1 0 0;
+      -webkit-flex: 1 0 0;
       margin-bottom: 0;
 
       + .card {
@@ -217,13 +216,13 @@
         &:not(:last-child) {
           @include border-end-radius(0);
 
-          .card-img-top,
-          .card-header {
+          > .card-img-top,
+          > .card-header {
             // stylelint-disable-next-line property-disallowed-list
             border-top-right-radius: 0;
           }
-          .card-img-bottom,
-          .card-footer {
+          > .card-img-bottom,
+          > .card-footer {
             // stylelint-disable-next-line property-disallowed-list
             border-bottom-right-radius: 0;
           }
@@ -232,13 +231,13 @@
         &:not(:first-child) {
           @include border-start-radius(0);
 
-          .card-img-top,
-          .card-header {
+          > .card-img-top,
+          > .card-header {
             // stylelint-disable-next-line property-disallowed-list
             border-top-left-radius: 0;
           }
-          .card-img-bottom,
-          .card-footer {
+          > .card-img-bottom,
+          > .card-footer {
             // stylelint-disable-next-line property-disallowed-list
             border-bottom-left-radius: 0;
           }

shiny/www/shared/sass/bslib/lib/bs5/scss/_carousel.scss

@@ -110,6 +110,7 @@
   color: $carousel-control-color;
   text-align: center;
   background: none;
+  filter: var(--#{$prefix}carousel-control-icon-filter);
   border: 0;
   opacity: $carousel-control-opacity;
   @include transition($carousel-control-transition);
@@ -143,19 +144,11 @@
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: escape-svg($carousel-control-prev-icon-bg);
+  background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
 }
 .carousel-control-next-icon {
-  background-image: escape-svg($carousel-control-next-icon-bg);
+  background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
 }
 
 // Optional indicator pips/controls
@@ -190,7 +183,7 @@
     margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
-    background-color: $carousel-indicator-active-bg;
+    background-color: var(--#{$prefix}carousel-indicator-active-bg);
     background-clip: padding-box;
     border: 0;
     // Use transparent borders to increase the hit area by 10px on top and bottom.
@@ -217,42 +210,31 @@
   left: (100% - $carousel-caption-width) * .5;
   padding-top: $carousel-caption-padding-y;
   padding-bottom: $carousel-caption-padding-y;
-  color: $carousel-caption-color;
+  color: var(--#{$prefix}carousel-caption-color);
   text-align: center;
 }
 
 // Dark mode carousel
 
 @mixin carousel-dark() {
-  .carousel-control-prev-icon,
-  .carousel-control-next-icon {
-    filter: $carousel-dark-control-icon-filter;
-  }
-
-  .carousel-indicators [data-bs-target] {
-    background-color: $carousel-dark-indicator-active-bg;
-  }
-
-  .carousel-caption {
-    color: $carousel-dark-caption-color;
-  }
+  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
+  --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
+  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
 }
 
 .carousel-dark {
   @include carousel-dark();
 }
 
+:root,
+[data-bs-theme="light"] {
+  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
+  --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
+  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
+}
+
 @if $enable-dark-mode {
-  @include color-mode(dark) {
-    @if $color-mode-type == "media-query" {
-      .carousel {
-        @include carousel-dark();
-      }
-    } @else {
-      .carousel,
-      &.carousel {
-        @include carousel-dark();
-      }
-    }
+  @include color-mode(dark, true) {
+    @include carousel-dark();
   }
 }