chore(ui): upgrade bootstrap

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.126
+
+### Changed
+
+- Upgraded [Bootstrap](https://getbootstrap.com/) to v5.3.8.
+
 ## v0.125
 
 ### Changed

ui/Makefile

@@ -24,7 +24,7 @@ $(NODE_PATH)/%: $(NODE_INSTALL)
 
 dist/index.html: $(NODE_INSTALL) $(NODE_PATH)/vite $(call rwildcard, public src, *)
 	@rm -fr node_modules/.cache/eslint-loader
-	cat node_modules/bootstrap/scss/_root.scss | sed s/':root {'/'* {'/ > src/Styles/BootstrapRoot.scss
+	sed -e '/:root,/d' -e 's/\[data-bs-theme="light"\] {/* {/' node_modules/bootstrap/scss/_root.scss | sed -n '1,/^}/p' > src/Styles/BootstrapRoot.scss
 	npm run build
 
 .PHONY: build

ui/package-lock.json

@@ -16,8 +16,8 @@
         "@fortawesome/react-fontawesome": "3.2.0",
         "@juggle/resize-observer": "3.4.0",
         "body-scroll-lock": "3.1.5",
-        "bootstrap": "5.2.3",
-        "bootswatch": "5.2.3",
+        "bootstrap": "5.3.8",
+        "bootswatch": "5.3.8",
         "bricks.js": "1.8.0",
         "copy-to-clipboard": "3.3.3",
         "csshake": "1.7.0",
@@ -5857,9 +5857,9 @@
       "license": "MIT"
     },
     "node_modules/bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "version": "5.3.8",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
+      "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
       "funding": [
         {
           "type": "github",
@@ -5872,13 +5872,13 @@
       ],
       "license": "MIT",
       "peerDependencies": {
-        "@popperjs/core": "^2.11.6"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/bootswatch": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-5.2.3.tgz",
-      "integrity": "sha512-tvnW15WoOY2sEp1uT1ITDQiJy2TekQa+K+Q28WDXibleIxsY0nAoC9IylbnUPD7Q5vkCIclOuBHLVBblJYYPSA==",
+      "version": "5.3.8",
+      "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-5.3.8.tgz",
+      "integrity": "sha512-88mnH9tv+x6DV+scBxYFOpM4YSDVhyfEgbhqaEfvkHNctKI9qRcACxIP9nmBZ5mSeLXtsgax1VsRkUs1eWjlAQ==",
       "license": "MIT"
     },
     "node_modules/brace-expansion": {

ui/package.json

@@ -12,8 +12,8 @@
     "@fortawesome/react-fontawesome": "3.2.0",
     "@juggle/resize-observer": "3.4.0",
     "body-scroll-lock": "3.1.5",
-    "bootstrap": "5.2.3",
-    "bootswatch": "5.2.3",
+    "bootstrap": "5.3.8",
+    "bootswatch": "5.3.8",
     "bricks.js": "1.8.0",
     "copy-to-clipboard": "3.3.3",
     "csshake": "1.7.0",

ui/src/Styles/BootstrapRoot.scss

@@ -21,10 +21,20 @@
     --#{$prefix}#{$color}-rgb: #{$value};
   }
 
+  @each $color, $value in $theme-colors-text {
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+
   --#{$prefix}white-rgb: #{to-rgb($white)};
   --#{$prefix}black-rgb: #{to-rgb($black)};
-  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
-  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
   // Fonts
 
@@ -39,17 +49,50 @@
   @if $font-size-root != null {
     --#{$prefix}root-font-size: #{$font-size-root};
   }
-  --#{$prefix}body-font-family: #{$font-family-base};
+  --#{$prefix}body-font-family: #{inspect($font-family-base)};
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
-  --#{$prefix}body-color: #{$body-color};
   @if $body-text-align != null {
     --#{$prefix}body-text-align: #{$body-text-align};
   }
+
+  --#{$prefix}body-color: #{$body-color};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
   --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
+
+  --#{$prefix}emphasis-color: #{$body-emphasis-color};
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+
+  --#{$prefix}secondary-color: #{$body-secondary-color};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
   // scss-docs-end root-body-variables
 
+  --#{$prefix}heading-color: #{$headings-color};
+
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+  --#{$prefix}link-decoration: #{$link-decoration};
+
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+  @if $link-hover-decoration != null {
+    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+  }
+
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-color: #{$mark-color};
+  --#{$prefix}highlight-bg: #{$mark-bg};
+
   // scss-docs-start root-border-var
   --#{$prefix}border-width: #{$border-width};
   --#{$prefix}border-style: #{$border-style};
@@ -60,14 +103,27 @@
   --#{$prefix}border-radius-sm: #{$border-radius-sm};
   --#{$prefix}border-radius-lg: #{$border-radius-lg};
   --#{$prefix}border-radius-xl: #{$border-radius-xl};
-  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
+  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
+  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-var
 
-  --#{$prefix}link-color: #{$link-color};
-  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}box-shadow: #{$box-shadow};
+  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
 
-  --#{$prefix}code-color: #{$code-color};
+  // Focus styles
+  // scss-docs-start root-focus-variables
+  --#{$prefix}focus-ring-width: #{$focus-ring-width};
+  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
+  --#{$prefix}focus-ring-color: #{$focus-ring-color};
+  // scss-docs-end root-focus-variables
 
-  --#{$prefix}highlight-bg: #{$mark-bg};
+  // scss-docs-start root-form-validation-variables
+  --#{$prefix}form-valid-color: #{$form-valid-color};
+  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+  --#{$prefix}form-invalid-color: #{$form-invalid-color};
+  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+  // scss-docs-end root-form-validation-variables
 }

ui/src/Styles/Components/_AlertGrid.scss

@@ -1,6 +1,8 @@
 .components-grid-swimlane {
   font-size: 1.4rem;
   background-color: $grid-swimlane-bg;
+  color: $white;
+  --bs-secondary-color: #{rgba($white, .75)};
   margin-left: 0.3rem;
   margin-right: 0.3rem;
 

ui/src/Styles/Components/_NavBar.scss

@@ -1,4 +1,6 @@
 .navbar {
+  --bs-secondary-color: #{rgba($white, .75)};
+
   @supports (backdrop-filter: blur(12px)) {
     background-color: rgba($primary, 0.85);
     backdrop-filter: saturate(50%) blur(12px);

ui/src/Styles/DarkTheme.scss

@@ -77,6 +77,8 @@ $card-cap-bg: inherit;
 $kbd-color: $white;
 $kbd-bg: $dark;
 
+$body-secondary-color: $gray-600;
+
 @import "./RebootlessBootstrap";
 @import "bootswatch/dist/darkly/bootswatch";
 

ui/src/Styles/LightTheme.scss

@@ -29,6 +29,7 @@ $navbar-dark-active-color: $gray-200;
 
 // fix active tab color, for some reason it ends up with $primary as bg color
 $nav-tabs-link-active-bg: #fff;
+$nav-tabs-link-active-color: $gray-700;
 
 // pagination tweaks
 $pagination-color: $white;
@@ -60,6 +61,11 @@ $card-cap-bg: inherit;
 $kbd-color: $white;
 $kbd-bg: $dark;
 
+// Bootstrap 5.3 changed text-muted from $gray-600 to var(--bs-secondary-color)
+// which defaults to rgba($body-color, .75) - nearly black in light theme.
+// Override to match the old text-muted color.
+$body-secondary-color: $gray-600;
+
 @import "./RebootlessBootstrap";
 @import "bootswatch/dist/flatly/bootswatch";
 

ui/src/Styles/RebootlessBootstrap.scss

@@ -1,6 +1,7 @@
 // Configuration
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/utilities";

ui/src/Styles/ResetCSS.scss

@@ -6,6 +6,7 @@ $body-bg: #455a64;
 @import "bootstrap/scss/functions";
 @import "bootswatch/dist/flatly/variables";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/root";