Change CSS framework from PicoCSS to Bootstrap 5.3

assets/bs/spacelab/_bootswatch.scss

@@ -0,0 +1,107 @@
+// Spacelab 5.3.8
+// Bootswatch
+
+
+// Variables
+
+$web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" !default;
+@if $web-font-path {
+  @import url("#{$web-font-path}");
+}
+
+// Mixins
+
+@mixin btn-shadow($color) {
+  @include gradient-y-three-colors(tint-color($color, 24%), $color, 50%, shade-color($color, 8%));
+  filter: none;
+  border: 1px solid shade-color($color, 20%);
+}
+
+// Navbar
+
+.navbar {
+  .nav-link,
+  .navbar-brand {
+    text-shadow: -1px -1px 0 rgba(0, 0, 0, .05);
+    transition: color ease-in-out .2s;
+  }
+
+  @each $color, $value in $theme-colors {
+    &.bg-#{$color} {
+      @include btn-shadow($value);
+    }
+  }
+
+  &.bg-light {
+    .nav-link,
+    .navbar-brand {
+      text-shadow: 1px 1px 0 rgba(255, 255, 255, .1);
+    }
+
+    .navbar-brand {
+      color: $navbar-light-color;
+
+      &:hover {
+        color: $info;
+      }
+    }
+  }
+}
+
+// Buttons
+
+.btn {
+  text-shadow: -1px -1px 0 rgba(0, 0, 0, .1);
+
+  &-link {
+    text-shadow: none;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include btn-shadow($value);
+  }
+
+  .btn-#{$color}:not(.disabled):hover {
+    @include btn-shadow(shade-color($value, 8%));
+  }
+}
+
+[class*="btn-outline-"] {
+  text-shadow: none;
+}
+
+// Indicators
+
+.badge {
+  &.bg-light {
+    color: $dark;
+  }
+}
+
+// Containers
+
+.card,
+.list-group-item {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: inherit;
+  }
+}
+
+// Tables
+
+.table-primary,
+.table-secondary,
+.table-success,
+.table-warning,
+.table-danger,
+.table-info,
+.table-light {
+  --#{$prefix}table-color: #{$body-color};
+}

assets/bs/spacelab/_variables.scss

@@ -0,0 +1,65 @@
+// Spacelab 5.3.8
+// Bootswatch
+
+$theme: "spacelab" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #eee !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #999 !default;
+$gray-600: #777 !default;
+$gray-700: #495057 !default;
+$gray-800: #333 !default;
+$gray-900: #2d2d2d !default;
+$black:    #000 !default;
+
+$blue:    #446e9b !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #cd0200 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #d47500 !default;
+$green:   #3cb521 !default;
+$teal:    #20c997 !default;
+$cyan:    #3399f3 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-500 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   2.65 !default;
+
+// Body
+
+$body-color:                $gray-600 !default;
+
+// Links
+
+$link-color:                $info !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$headings-color:              $gray-900 !default;
+
+// Tables
+
+$table-color:                 initial !default;
+
+// Navbar
+
+$navbar-light-hover-color:          $info !default;
+$navbar-light-active-color:         $info !default;