Bootstrap5 (#17)

* Bootstrap5 migration

dev/scss/wvc-theme/simplex/_bootswatch.scss

@@ -1,21 +1,23 @@
-// Simplex 4.6.0
+// Simplex 5.0.2
 // Bootswatch
 
 
-// Variables ===================================================================
+// Variables
 
 $web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" !default;
-@import url($web-font-path);
-
-// Mixins ======================================================================
-
-@mixin btn-shadow($color){
-  @include gradient-y-three-colors(lighten($color, 3%), $color, 6%, darken($color, 3%));
-  filter: none;
-  border: 1px solid darken($color, 6.5%);
+@if $web-font-path {
+  @import url($web-font-path);
 }
 
-// Navbar ======================================================================
+// Mixins
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(tint-color($color, 6%), $color, 6%, shade-color($color, 6%));
+  filter: none;
+  border: 1px solid shade-color($color, 13%);
+}
+
+// Navbar
 
 .navbar {
   border-width: 1px;
@@ -29,22 +31,22 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700
     border-top-width: 1px 0 0 0;
     border-style: solid;
   }
+
+  &.bg-primary {
+    background-color: $primary !important;
+    border-color: shade-color($primary, 13%) !important;
+  }
+
+  &.bg-dark {
+    border-color: shade-color($dark, 13%) !important;
+  }
+
+  &.bg-light {
+    border-color: shade-color($white, 13%);
+  }
 }
 
-.bg-primary {
-  background-color: $primary !important;
-  border-color: darken($primary, 6.5%) !important;
-}
-
-.bg-dark {
-  border-color: darken($dark, 6.5%) !important;
-}
-
-.bg-light {
-  border-color: darken($white, 6.5%);
-}
-
-// Buttons =====================================================================
+// Buttons
 
 .btn-primary,
 .btn-primary:hover {
@@ -102,23 +104,26 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700
   }
 }
 
-// Typography ==================================================================
+// Typography
 
 .text-secondary {
   color: $gray-600 !important;
 }
 
-// Forms =======================================================================
+// Forms
 
 legend,
 label {
   color: $headings-color;
 }
 
-// Navs =======================================================================
+// Navs
 
 .breadcrumb {
-  border: 1px solid darken($white, 6.5%);
+  border: 1px solid shade-color($white, 13%);
+  a {
+    text-decoration: none;
+  }
 }
 
 .pagination {
@@ -126,3 +131,12 @@ label {
     text-decoration: none;
   }
 }
+
+// Indicators
+
+.badge {
+  &.bg-secondary,
+  &.bg-light {
+    color: $dark;
+  }
+}

dev/scss/wvc-theme/simplex/_variables.scss

@@ -1,6 +1,8 @@
-// Simplex 4.6.0
+// Simplex 5.0.2
 // Bootswatch
 
+$theme: "simplex" !default;
+
 //
 // Color system
 //
@@ -37,6 +39,8 @@ $danger:        $purple !default;
 $light:         $white !default;
 $dark:          $gray-800 !default;
 
+$min-contrast-ratio:   2.8 !default;
+
 // Body
 
 $body-bg:                   #fcfcfc !default;
@@ -45,7 +49,6 @@ $body-bg:                   #fcfcfc !default;
 
 // 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;
-$font-size-base:              .8125rem !default;
 
 // Dropdowns
 
@@ -72,10 +75,6 @@ $pagination-hover-border-color:     $primary !default;
 $pagination-disabled-color:         $gray-400 !default;
 $pagination-disabled-border-color:  $pagination-border-color !default;
 
-// Jumbotron
-
-$jumbotron-bg:                      $nav-tabs-border-color !default;
-
 // Cards
 
 $card-border-color:                 $nav-tabs-border-color !default;
@@ -100,4 +99,8 @@ $list-group-disabled-bg:            $nav-tabs-border-color !default;
 
 // Breadcrumbs
 
-$breadcrumb-bg:                     $white !default;
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
+$breadcrumb-border-radius:          .25rem !default;
+
+$link-decoration:                   none !default;