feat: Upgrade to Bootstrap and Bootswatch 5.3.8#1287
Draft
Conversation
Update version pins in inst/package.json and fix 11 patches that failed against the new upstream sources. Bootswatch 5.3.8 changed $table-color from explicit values to `initial`, added $nav-underline-link-active-color across dark themes, and made various variable changes in darkly, flatly, lux, and minty. Bootstrap 5.3.8 shifted line numbers in _variables.scss (due to auto-importing _variables-dark.scss) and added flex-shrink to _form-check.scss.
Output of yarn_install.R applying bslib patches on top of the fresh Bootstrap 5.3.8 upstream. Includes upstream changes such as color-contrast() WCAG 2.1 fix, Sass 1.77.7 compatibility, floating label improvements, and spinner flex-shrink.
Output of yarn_install.R applying bslib patches on top of the fresh Bootswatch 5.3.8 upstream. Adds new 'brite' theme. Includes upstream changes such as table color inheritance fixes, nav-underline active color additions, and various dark mode improvements across themes.
Regenerated by tools/main.R: R/versions.R, R/sysdata.rda, precompiled CSS, man pages, and download_preset_fonts.R.
Pre-existing HTML whitespace formatting differences in toolbar button snapshots, unrelated to the Bootstrap upgrade.
Claude Code skill with instructions and reference files for upgrading Bootstrap and Bootswatch vendor dependencies in bslib.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR upgrades the version of Bootstrap and Bootswatch shipped with bslib from 5.3.1 to 5.3.8
Upstream Changelog
Changes from Bootstrap 5.3.2 through 5.3.8 and Bootswatch 5.3.2 through 5.3.8, categorized by likely impact to bslib and Shiny apps.
Critical
Changes that directly affect bslib's patched files, Sass variables used by bslib, or Shiny component rendering.
color-contrast()WCAG 2.1 fix (Bootstrap 5.3.8)The
color-contrast()function comparison operator changed from>(strict greater-than) to>=(greater-than-or-equal) when checking contrast ratios against$min-contrast-ratio. The WCAG 2.1 spec requires "at least 4.5:1", meaning>=. In practice, no integer RGB color produces exactly 4.5:1 with Bootstrap's luminance calculation, so this is a correctness/future-proofing change with no visible impact today.Relevance: bslib patches 011 and 012 use
color-contrast()extensively for component colors and background utilities._variables.scssauto-imports_variables-dark.scss(Bootstrap 5.3.3)_variables.scssnow automatically imports_variables-dark.scssat the end of the file. Previously, users importing Bootstrap files individually had to manually import_variables-dark.scss.Relevance: This added ~140 lines to the end of
_variables.scss, shifting line numbers for patches that target the end of the file. Multiple bslib patches (009, 011, 016, 021, 023, 025) required line number updates.Sass 1.77.7 declaration reordering (Bootstrap 5.3.4)
Fixed deprecated "declarations after nested rules" warnings in
_modal.scss,_reboot.scss, and_type.scssby reordering mixin calls relative to CSS declarations.Relevance: Context shifts in
_reboot.scssaffected patches 009 and 016.Floating label SCSS overhaul (Bootstrap 5.3.4–5.3.5)
Floating labels received multiple fixes:
max-widthoverflow,background-colorissues, placeholder color changed from full opacity toopacity: 0.65, size alignment withform-select-smandform-select-lg, and a Firefox rendering fix.Relevance: These changes affected the forms SCSS files touched by patch 023-shiny-forms-bs5.
Bootswatch table color inheritance (Bootswatch 5.3.3–5.3.5)
All Bootswatch themes changed
$table-colorfrom explicit values (e.g.,$white) toinitial, allowing tables to inherit the body's color. This was a cross-cutting change affecting every dark theme.Relevance: This was the primary cause of patch failures in 006-bootswatch-cyborg-bs5, 006-bootswatch-darkly-bs5, 006-bootswatch-slate-bs5, and 006-bootswatch-superhero-bs5. Each patch had to update context for the new
$table-color: initialvalue.Bootswatch nav-underline active color (Bootswatch 5.3.3–5.3.5)
Seven dark themes (cyborg, darkly, quartz, slate, solar, superhero, vapor) added
$nav-underline-link-active-colorto fix nav-underline active color display.Relevance: This new variable appeared in
_variables.scssfor multiple themes, requiring all affected 006-bootswatch patches to include the new line in their context/changes.Bootswatch darkly nav variable changes (Bootswatch 5.3.3–5.3.5)
Darkly added
$nav-link-colorand$nav-link-hover-colorvariables and removed the.nav-item.openstyling block from_bootswatch.scss. The disabled nav-link color changed from$gray-500to$gray-600.Relevance: Required restructuring of 006-bootswatch-darkly-bs5 patch.
Bootswatch flatly navbar color changes (Bootswatch 5.3.2)
Flatly changed
$navbar-dark-hover-colorand$navbar-dark-active-colorfrom$primaryto$success, and$navbar-dark-brand-hover-colorfrom$navbar-dark-brand-colorto$navbar-dark-hover-color.Relevance: Required context updates in 022-bootswatch-flatly-navbar-bs5 patch.
Notable
Changes that affect commonly used Bootstrap features in Shiny apps but don't directly conflict with bslib patches.
New Sass variables (Bootstrap 5.3.2)
$btn-link-focus-shadow-rgb-- customizes focus shadow color for.btn-link$mark-bg-dark,$mark-color,$mark-color-dark--<mark>element colors for light/dark modes--bs-highlight-colorShadow utilities use CSS custom properties (Bootstrap 5.3.2)
.shadow,.shadow-sm,.shadow-lgnow reference CSS custom properties (--bs-box-shadow, etc.) instead of hardcoded values, enabling overrides without Sass recompilation.Close button color mode fix (Bootstrap 5.3.4)
Close button (
.btn-close) replaced directfilterusage with CSS custom properties, fixing display issues when nesting color modes (e.g., light mode inside dark mode).Carousel color mode support (Bootstrap 5.3.4)
Three new CSS custom properties for carousel dark mode:
--bs-carousel-indicator-active-bg,--bs-carousel-caption-color,--bs-carousel-control-icon-filter.Spinner flex-shrink (Bootstrap 5.3.8)
.spinner-borderand.spinner-growgainedflex-shrink: 0to prevent distortion in flex containers.Card-group child combinators (Bootstrap 5.3.6)
.card-groupselectors now use>child combinators instead of descendant selectors, fixing border-radius bugs with nested cards..visually-hiddenoverflow fix (Bootstrap 5.3.6)Added overflow containment to prevent children of visually-hidden elements from becoming focusable via keyboard navigation.
Accordion child combinators (Bootstrap 5.3.3)
Accordion uses child combinators to avoid inheriting parent accordion flush styles when nesting.
Accordion focus border variable deprecated (Bootstrap 5.3.3)
$accordion-button-focus-border-colordeprecated and CSS custom property--bs-accordion-btn-focus-border-colorremoved.Form range contrast improvements (Bootstrap 5.3.2)
Form range track background made more contrasted in both light and dark modes.
Validation focus fix (Bootstrap 5.3.3)
Fixed focus box-shadow for validation-stated form controls and border-radius on radio-switch.
Bootswatch web font path fix (Bootswatch 5.3.2–5.3.3)
Changed
$web-font-pathstring interpolation across 20 themes to avoid literal path interpretation in some SCSS parsers.New Bootswatch themes: brite and versa
See New and Removed Bootswatch Themes section below.
Minor
Bug fixes, documentation changes, or changes to features rarely used in Shiny contexts.
::-webkit-search-cancel-buttongetscursor: pointerin_reboot.scss(Bootstrap 5.3.8)calc()operands for postcss-values-parser compatibility (Bootstrap 5.3.4)trigger: "hover click"(Bootstrap 5.3.7)'none'values in box-shadow Sass mixin (Bootstrap 5.3.7)abs()(Bootstrap 5.3.2)<dl>,<dt>, and<dd>elements allowed in the HTML sanitizer (Bootstrap 5.3.3)Bootswatch changes:
.vrvisibility fixNew and Removed Bootswatch Themes
New themes
@include color-mode(dark)mixin pattern.Both themes are automatically available via
bootswatch_themes()since that function dynamically reads directory names from the Bootswatch distribution. No code changes were needed.Removed themes
None. All 25 themes from 5.3.1 remain.
Total Bootswatch 5 themes: 27
cerulean, cosmo, cyborg, darkly, flatly, journal, litera, lumen, lux, materia, minty, morph, pulse, quartz, sandstone, simplex, sketchy, slate, solar, spacelab, superhero, united, vapor, yeti, zephyr, brite (new), versa (new)
Patch Redundancy Review
No patches were found to be redundant. All 34 patches applied cleanly to the fresh Bootstrap 5.3.8 upstream, confirming each still makes changes not present in the upstream source. If a patch's changes had been upstreamed, the patch would fail to apply because the "old" (pre-change) context lines would no longer match.
Patch Edits Required During Upgrade
11 of 34 patches required updates to apply cleanly against Bootstrap/Bootswatch 5.3.8. The remaining 23 patches applied without modification (some with minor offset adjustments handled automatically by
git apply).Bootswatch theme patches (6 patches)
006-bootswatch-cyborg-bs5.patch$table-color: initial(was$white). Added$nav-underline-link-active-color: $contrast-bg(new upstream variable). Updated$input-border-width: 0pxcontext to include stylelint disable comment added upstream.006-bootswatch-darkly-bs5.patch$table-color: initial(was$white). Added$nav-link-color: $body-colorand$nav-link-hover-color: $body-color(new upstream variables). Added$nav-underline-link-active-color: $body-color(new upstream variable). Removed hunk for.nav-item.openblock deleted upstream. Updated$nav-link-disabled-colorcontext from$gray-500to$gray-600.006-bootswatch-lux-bs5.patch// Buttons + Formscomment. The$input-btn-border-widthremoval was dropped because upstream already removed that variable.006-bootswatch-minty-bs5.patch$body-colorcontext from$gray-600to$gray-700(upstream change). Adjusted line numbers for button color rule removal in_bootswatch.scss.006-bootswatch-slate-bs5.patch$table-color: initial(was$white). Added$nav-underline-link-active-color: $contrast-bg(new upstream variable).006-bootswatch-superhero-bs5.patch$table-color: initial(was$white). Added$nav-underline-link-active-color: $contrast-bg(new upstream variable). Added missing$nav-tabs-link-hover-border-colorcontext line.Bootstrap core patches (3 patches)
009-code-styles-bs5.patch_variables.scss(code variables section shifted from ~line 1621 to ~line 1739 due to_variables-dark.scssauto-import and other additions). Updated line numbers in_reboot.scss(minor shifts). Adjusted final hunk line count to account for new trailing@importline.022-bootswatch-flatly-navbar-bs5.patch_variables.scsswhere$navbar-dark-hover-colorand$navbar-dark-active-colorchanged from$primaryto$success. Updated hunk offset from line 74 to line 80.023-shiny-forms-bs5.patch_form-check.scsscontext for new.form-check-reverseblock (added lines 17–27 upstream) which introducedflex-shrink: 0and-webkit-flex-shrink: 0properties. Adjusted line numbers for subsequent hunks.Cross-theme and other patches (2 patches)
028-bsw-leverage-navbar-light-dark-bg.patch_variables.scss, accounting for new$nav-tabs-link-hover-border-colorand$nav-underline-link-active-colorvariables added upstream in the Navs section above the Navbar section.031-colorpicker-popover.patchdist/js/instead ofjs/) during development but was corrected before final verification. The colorpicker library itself (v3.4.0) is unchanged.