fix(ui): ensure all css variables are set

Bootstrap 5.1 uses more css variables which breaks current theming

ui/src/Styles/BootstrapRoot.scss

@@ -0,0 +1,53 @@
+* {
+  // Note: Custom variable values only support SassScript inside `#{}`.
+
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
+  @each $color, $value in $colors {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $grays {
+    --#{$variable-prefix}gray-#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-rgb {
+    --#{$variable-prefix}#{$color}-rgb: #{$value};
+  }
+
+  --#{$variable-prefix}white-rgb: #{to-rgb($white)};
+  --#{$variable-prefix}black-rgb: #{to-rgb($black)};
+  --#{$variable-prefix}body-rgb: #{to-rgb($body-color)};
+
+  // Fonts
+
+  // Note: Use `inspect` for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$variable-prefix}gradient: #{$gradient};
+
+  // Root and body
+  // stylelint-disable custom-property-empty-line-before
+  // scss-docs-start root-body-variables
+  @if $font-size-root != null {
+    --#{$variable-prefix}root-font-size: #{$font-size-root};
+  }
+  --#{$variable-prefix}body-font-family: #{$font-family-base};
+  --#{$variable-prefix}body-font-size: #{$font-size-base};
+  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
+  --#{$variable-prefix}body-line-height: #{$line-height-base};
+  --#{$variable-prefix}body-color: #{$body-color};
+  @if $body-text-align != null {
+    --#{$variable-prefix}body-text-align: #{$body-text-align};
+  }
+  --#{$variable-prefix}body-bg: #{$body-bg};
+  // scss-docs-end root-body-variables
+  // stylelint-enable custom-property-empty-line-before
+}

ui/src/Styles/DarkTheme.scss

@@ -99,6 +99,7 @@ $input-range-thumb-font-color: $white;
 
 $color-default: #708090;
 
+@import "./BootstrapRoot.scss";
 @import "./Components";
 
 .badge,

ui/src/Styles/LightTheme.scss

@@ -80,6 +80,7 @@ $input-range-thumb-font-color: $white;
 
 $color-default: #708090;
 
+@import "./BootstrapRoot.scss";
 @import "./Components";
 
 a {

ui/src/Styles/RebootlessBootstrap.scss

@@ -1,11 +1,14 @@
+// Configuration
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
+
+// Layout & components
 //@import "bootstrap/scss/root";
 //@import "bootstrap/scss/reboot";
 //@import "bootstrap/scss/type";
-//@import "bootstrap/scss/images";
+@import "bootstrap/scss/images";
 @import "bootstrap/scss/containers";
 @import "bootstrap/scss/grid";
 @import "bootstrap/scss/tables";
@@ -18,19 +21,24 @@
 @import "bootstrap/scss/navbar";
 @import "bootstrap/scss/card";
 @import "bootstrap/scss/accordion";
-//@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/pagination";
 @import "bootstrap/scss/badge";
 @import "bootstrap/scss/alert";
 @import "bootstrap/scss/progress";
 @import "bootstrap/scss/list-group";
 @import "bootstrap/scss/close";
-//@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/toasts";
 @import "bootstrap/scss/modal";
 @import "bootstrap/scss/tooltip";
-//@import "bootstrap/scss/popover";
-//@import "bootstrap/scss/carousel";
-//@import "bootstrap/scss/spinners";
-//@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+
+// Helpers
 @import "bootstrap/scss/helpers";
+
+// Utilities
 @import "bootstrap/scss/utilities/api";

ui/src/Styles/ResetCSS.scss

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