Skip to content

feat: Upgrade to Bootstrap and Bootswatch 5.3.8#1287

Draft
gadenbuie wants to merge 7 commits intomainfrom
feat/upgrade-bootstrap
Draft

feat: Upgrade to Bootstrap and Bootswatch 5.3.8#1287
gadenbuie wants to merge 7 commits intomainfrom
feat/upgrade-bootstrap

Conversation

@gadenbuie
Copy link
Member

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.scss auto-imports _variables-dark.scss (Bootstrap 5.3.3)

_variables.scss now automatically imports _variables-dark.scss at 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.scss by reordering mixin calls relative to CSS declarations.

Relevance: Context shifts in _reboot.scss affected patches 009 and 016.

Floating label SCSS overhaul (Bootstrap 5.3.4–5.3.5)

Floating labels received multiple fixes: max-width overflow, background-color issues, placeholder color changed from full opacity to opacity: 0.65, size alignment with form-select-sm and form-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-color from explicit values (e.g., $white) to initial, 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: initial value.

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-color to fix nav-underline active color display.

Relevance: This new variable appeared in _variables.scss for 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-color and $nav-link-hover-color variables and removed the .nav-item.open styling block from _bootswatch.scss. The disabled nav-link color changed from $gray-500 to $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-color and $navbar-dark-active-color from $primary to $success, and $navbar-dark-brand-hover-color from $navbar-dark-brand-color to $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
  • New CSS custom property: --bs-highlight-color

Shadow utilities use CSS custom properties (Bootstrap 5.3.2)

.shadow, .shadow-sm, .shadow-lg now 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 direct filter usage 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-border and .spinner-grow gained flex-shrink: 0 to prevent distortion in flex containers.

Card-group child combinators (Bootstrap 5.3.6)

.card-group selectors now use > child combinators instead of descendant selectors, fixing border-radius bugs with nested cards.

.visually-hidden overflow 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-color deprecated and CSS custom property --bs-accordion-btn-focus-border-color removed.

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-path string 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.

  • RTL CSS files and source maps added to Bootswatch distribution (Bootswatch 5.3.2)
  • ::-webkit-search-cancel-button gets cursor: pointer in _reboot.scss (Bootstrap 5.3.8)
  • Reordered calc() operands for postcss-values-parser compatibility (Bootstrap 5.3.4)
  • Dropdown focus return to trigger reverted — caused issues with modals opened from dropdowns (Bootstrap 5.3.8, reverting 5.3.6)
  • Fixed popover and tooltip behavior with trigger: "hover click" (Bootstrap 5.3.7)
  • Consolidated multiple 'none' values in box-shadow Sass mixin (Bootstrap 5.3.7)
  • Removed unneeded flexbug workaround (Bootstrap 5.3.4)
  • Pagination current page indicator moved to link element for better screen reader support (Bootstrap 5.3.6)
  • Fixed Dart Sass deprecation warning for passing percentage units to global abs() (Bootstrap 5.3.2)
  • <dl>, <dt>, and <dd> elements allowed in the HTML sanitizer (Bootstrap 5.3.3)

Bootswatch changes:

  • lux: Font weight loaded at 300, dark mode form colors, btn-outline fixes, modal/popover box-shadow improvements
  • sketchy: Dark mode breadcrumb/tab active color fixes, primary button/input dark mode colors
  • morph: Dark mode buttons/navs/dialogs styling, card text color in dark mode
  • superhero: Floating label input height, text-secondary contrast
  • cerulean: btn-check active background, dropdown color in dark theme
  • slate: List-item bg colors, accordion styling, pagination padding
  • cosmo: Range slider thumb border-radius Firefox fix
  • pulse: Dropdown link color in dark navbar
  • materia: Mixed units on form-control min-heights, radio switch fix
  • vapor: .vr visibility fix

New and Removed Bootswatch Themes

New themes

Theme Added in Description
brite 5.3.5 A bold "brutalist" theme with 2px solid black borders, heavy box-shadows, lime green primary color. Originally named "brut". Extensive dark mode support.
versa 5.3.8 A clean, minimal modern theme with system font stack, subtle shadows, pill-style nav, transparent alert backgrounds. Uses @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)

Patch Changes
006-bootswatch-cyborg-bs5.patch Updated context for $table-color: initial (was $white). Added $nav-underline-link-active-color: $contrast-bg (new upstream variable). Updated $input-border-width: 0px context to include stylelint disable comment added upstream.
006-bootswatch-darkly-bs5.patch Updated context for $table-color: initial (was $white). Added $nav-link-color: $body-color and $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.open block deleted upstream. Updated $nav-link-disabled-color context from $gray-500 to $gray-600.
006-bootswatch-lux-bs5.patch Simplified to single hunk removing only the // Buttons + Forms comment. The $input-btn-border-width removal was dropped because upstream already removed that variable.
006-bootswatch-minty-bs5.patch Updated $body-color context from $gray-600 to $gray-700 (upstream change). Adjusted line numbers for button color rule removal in _bootswatch.scss.
006-bootswatch-slate-bs5.patch Updated context for $table-color: initial (was $white). Added $nav-underline-link-active-color: $contrast-bg (new upstream variable).
006-bootswatch-superhero-bs5.patch Updated context for $table-color: initial (was $white). Added $nav-underline-link-active-color: $contrast-bg (new upstream variable). Added missing $nav-tabs-link-hover-border-color context line.

Bootstrap core patches (3 patches)

Patch Changes
009-code-styles-bs5.patch Updated line numbers in _variables.scss (code variables section shifted from ~line 1621 to ~line 1739 due to _variables-dark.scss auto-import and other additions). Updated line numbers in _reboot.scss (minor shifts). Adjusted final hunk line count to account for new trailing @import line.
022-bootswatch-flatly-navbar-bs5.patch Updated context lines for flatly _variables.scss where $navbar-dark-hover-color and $navbar-dark-active-color changed from $primary to $success. Updated hunk offset from line 74 to line 80.
023-shiny-forms-bs5.patch Updated _form-check.scss context for new .form-check-reverse block (added lines 17–27 upstream) which introduced flex-shrink: 0 and -webkit-flex-shrink: 0 properties. Adjusted line numbers for subsequent hunks.

Cross-theme and other patches (2 patches)

Patch Changes
028-bsw-leverage-navbar-light-dark-bg.patch Updated hunk offset from line 114 to line 122 for superhero _variables.scss, accounting for new $nav-tabs-link-hover-border-color and $nav-underline-link-active-color variables added upstream in the Navs section above the Navbar section.
031-colorpicker-popover.patch No content change. Path was temporarily incorrect (dist/js/ instead of js/) during development but was corrected before final verification. The colorpicker library itself (v3.4.0) is unchanged.

gadenbuie and others added 7 commits February 13, 2026 15:14
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant