Bootstrap5 (#17)

* Bootstrap5 migration

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

@@ -1,20 +1,20 @@
-// Slate 4.6.0
+// Slate 5.0.2
 // Bootswatch
 
 
-// Mixins ======================================================================
+// Mixins
 
 @mixin btn-shadow($color){
-  @include gradient-y-three-colors(lighten($color, 6%), $color, 60%, darken($color, 4%));
+  @include gradient-y-three-colors(tint-color($color, 12%), $color, 60%, shade-color($color, 8%));
   filter: none;
 }
 
 @mixin btn-shadow-inverse($color){
-  @include gradient-y-three-colors(darken($color, 18%), darken($color, 15%), 40%, darken($color, 13%));
+  @include gradient-y-three-colors(shade-color($color, 36%), shade-color($color, 30%), 40%, shade-color($color, 26%));
   filter: none;
 }
 
-// Navbar ======================================================================
+// Navbar
 
 .navbar {
   border: 1px solid rgba(0, 0, 0, .6);
@@ -103,7 +103,7 @@
   }
 }
 
-// Buttons =====================================================================
+// Buttons
 
 .btn {
   border-color: rgba(0, 0, 0, .6);
@@ -211,7 +211,7 @@
   }
 }
 
-// Typography ==================================================================
+// Typography
 
 h1,
 h2,
@@ -222,167 +222,7 @@ h6 {
   text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
 }
 
-// Tables ======================================================================
-
-.table {
-  &-primary,
-  &-secondary,
-  &-success,
-  &-info,
-  &-warning,
-  &-danger {
-    color: $white;
-  }
-
-  &-primary {
-    &,
-    > th,
-    > td {
-      background-color: $primary;
-    }
-  }
-
-  &-secondary {
-    &,
-    > th,
-    > td {
-      background-color: $secondary;
-    }
-  }
-
-  &-light {
-    &,
-    > th,
-    > td {
-      background-color: $light;
-    }
-  }
-
-  &-dark {
-    &,
-    > th,
-    > td {
-      background-color: $dark;
-    }
-  }
-
-  &-success {
-    &,
-    > th,
-    > td {
-      background-color: $success;
-    }
-  }
-
-  &-info {
-    &,
-    > th,
-    > td {
-      background-color: $info;
-    }
-  }
-
-  &-danger {
-    &,
-    > th,
-    > td {
-      background-color: $danger;
-    }
-  }
-
-  &-warning {
-    &,
-    > th,
-    > td {
-      background-color: $warning;
-    }
-  }
-
-  &-active {
-    &,
-    > th,
-    > td {
-      background-color: $table-active-bg;
-    }
-  }
-
-  &-hover {
-    .table-primary:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($primary, 5%);
-      }
-    }
-
-    .table-secondary:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($secondary, 5%);
-      }
-    }
-
-    .table-light:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($light, 5%);
-      }
-    }
-
-    .table-dark:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($dark, 5%);
-      }
-    }
-
-    .table-success:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($success, 5%);
-      }
-    }
-
-    .table-info:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($info, 5%);
-      }
-    }
-
-    .table-danger:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($danger, 5%);
-      }
-    }
-
-    .table-warning:hover {
-      &,
-      > th,
-      > td {
-        background-color: darken($warning, 5%);
-      }
-    }
-
-    .table-active:hover {
-      &,
-      > th,
-      > td {
-        background-color: $table-active-bg;
-      }
-    }
-
-  }
-}
-
-// Forms =======================================================================
+// Forms
 
 legend {
   color: $white;
@@ -394,7 +234,7 @@ legend {
   color: $white;
 }
 
-// Navs ========================================================================
+// Navs
 
 .nav-tabs {
   .nav-link {
@@ -472,13 +312,15 @@ legend {
   background-color: transparent;
   @include btn-shadow($gray-800);
 
-  a,
+  a {
+    text-decoration: none;
+  }
   a:hover {
     color: $white;
   }
 }
 
-// Indicators ==================================================================
+// Indicators
 
 .alert {
   border: none;
@@ -503,29 +345,18 @@ legend {
       color: $body-bg;
     }
   }
-
-  .close {
-    color: $close-color;
-    text-decoration: none;
-  }
 }
 
 .badge {
-  &-success,
-  &-warning,
-  &-info {
-    color: $white;
+  &.bg-light {
+    color: $dark;
   }
 }
 
-// Containers ==================================================================
-
-.jumbotron {
-  border: 1px solid rgba(0, 0, 0, .6);
-}
+// Containers
 
 .list-group {
   &-item-action:hover {
-    background-color: darken($gray-900, 5%);
+    background-color: shade-color($gray-900, 10%);
   }
 }

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

@@ -1,6 +1,8 @@
-// Slate 4.6.0
+// Slate 5.0.2
 // Bootswatch
 
+$theme: "slate" !default;
+
 //
 // Color system
 //
@@ -28,7 +30,7 @@ $green:   #62c462 !default;
 $teal:    #20c997 !default;
 $cyan:    #5bc0de !default;
 
-$primary:       $gray-800 !default;
+$primary:       $gray-700 !default;
 $secondary:     $gray-600 !default;
 $success:       $green !default;
 $info:          $cyan !default;
@@ -37,7 +39,7 @@ $danger:        $red !default;
 $light:         $gray-200 !default;
 $dark:          $gray-900 !default;
 
-$yiq-contrasted-threshold:  170 !default;
+$min-contrast-ratio:   2 !default;
 
 // Body
 
@@ -50,9 +52,6 @@ $link-color:                $white !default;
 
 // Fonts
 
-$font-size-base:              .9375rem !default;
-$font-size-sm:                $font-size-base * .88 !default;
-
 // Tables
 
 $table-color:                 $white !default;
@@ -62,14 +61,20 @@ $table-border-color:          rgba($black, .6) !default;
 $table-dark-border-color:     $table-border-color !default;
 $table-dark-color:            $white !default;
 
+$table-bg-scale:              0 !default;
+
 // Buttons
 
-$input-btn-padding-y:         .25rem !default;
+$input-btn-padding-y:         .5rem !default;
 $input-btn-padding-x:         1rem !default;
 
 // Forms
 
-$input-disabled-bg:                     #ccc !default;
+$input-disabled-bg:                 #ccc !default;
+
+$input-color:                       $gray-900 !default;
+
+$form-check-input-bg:               $white !default;
 
 // Dropdowns
 
@@ -110,11 +115,6 @@ $pagination-active-border-color:    rgba($black, .6) !default;
 $pagination-disabled-bg:            transparent !default;
 $pagination-disabled-border-color:  rgba($black, .6) !default;
 
-
-// Jumbotron
-
-$jumbotron-bg:                      darken($gray-900, 5%) !default;
-
 // Cards
 
 $card-border-color:                 rgba($black, .6) !default;
@@ -145,6 +145,7 @@ $progress-bar-color:                $gray-600 !default;
 
 // List group
 
+$list-group-color:                  $white !default;
 $list-group-bg:                     lighten($body-bg, 5%) !default;
 $list-group-border-color:           rgba($black, .6) !default;
 $list-group-hover-bg:               lighten($body-bg, 10%) !default;
@@ -156,8 +157,13 @@ $list-group-action-color:           $white !default;
 
 // Breadcrumbs
 
+$breadcrumb-padding-y:              .375rem !default;
+$breadcrumb-padding-x:              .75rem !default;
 $breadcrumb-active-color:           $gray-500 !default;
+$breadcrumb-border-radius:          .25rem !default;
 
 // Code
 
 $pre-color:                         inherit !default;
+
+$link-decoration:                   none !default;