bootstrap 4.5 & Bootswatch Themes

dev/scss/wvc-theme/bootstrap-orj/_bootswatch.scss

@@ -0,0 +1,23 @@
+
+// Bootstrap original
+
+
+
+// Navbar ======================================================================
+
+
+// Buttons =====================================================================
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+// Forms =======================================================================
+
+// Navs ========================================================================
+
+// Indicators ==================================================================
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================

dev/scss/wvc-theme/bootstrap-orj/_variables.scss

@@ -0,0 +1,2 @@
+// Bootstrap original
+

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

@@ -0,0 +1,103 @@
+// Cerulean 4.5.0
+// Bootswatch
+
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
+}
+
+$text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) !default;
+
+// Navbar ======================================================================
+
+.bg-primary {
+  @include btn-shadow($primary);
+}
+
+.bg-dark {
+  @include btn-shadow($blue);
+}
+
+.bg-light {
+  @include gradient-y-three-colors(lighten($gray-200, 8%), $gray-200, 60%, darken($gray-200, 2%));
+}
+
+.navbar-brand,
+.nav-link {
+  text-shadow: $text-shadow
+}
+
+// Buttons =====================================================================
+
+.btn {
+  text-shadow: $text-shadow
+}
+
+.btn-primary {
+  @include btn-shadow($primary);
+}
+
+.btn-secondary {
+  @include btn-shadow($secondary);
+  color: $gray-700;
+}
+
+.btn-success {
+  @include btn-shadow($success);
+}
+
+.btn-info {
+  @include btn-shadow($info);
+}
+
+.btn-warning {
+  @include btn-shadow($warning);
+}
+
+.btn-danger {
+  @include btn-shadow($danger);
+}
+
+.btn-light {
+  @include btn-shadow($light);
+}
+
+.btn-dark {
+  @include btn-shadow($dark);
+}
+
+
+// Typography ==================================================================
+
+.text-secondary {
+  color: $gray-500 !important;
+}
+
+.bg-primary,
+.bg-success,
+.bg-info,
+.bg-warning,
+.bg-danger,
+.bg-dark {
+  h1, h2, h3, h4, h5, h6 {
+    color: $white;
+  }
+}
+
+// Tables ======================================================================
+
+// Forms =======================================================================
+
+// Navs ========================================================================
+
+.dropdown-menu {
+  .dropdown-header {
+    color: $gray-600;
+  }
+}
+
+// Indicators ==================================================================
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================

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

@@ -0,0 +1,57 @@
+// Cerulean 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #033C73 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #C71C22 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #DD5600 !default;
+$green:   #73A839 !default;
+$teal:    #20c997 !default;
+$cyan:    #2FA4E7 !default;
+
+$primary:       $cyan !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $blue !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+// Body
+
+$body-color:    $gray-700 !default;
+
+// Fonts
+
+$headings-color:         $cyan !default;
+
+// Dropdowns
+
+$dropdown-link-color:            $body-color !default;
+$dropdown-link-hover-color:      $white !default;
+$dropdown-link-hover-bg:         $primary !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white,.8) !default;
+$navbar-dark-hover-color:           $white !default;

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

@@ -0,0 +1,39 @@
+// Cosmo 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+// Buttons =====================================================================
+
+// Typography ==================================================================
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+// Tables ======================================================================
+
+// Forms =======================================================================
+
+// Navs ========================================================================
+
+// Indicators ==================================================================
+
+// Progress bars ===============================================================
+
+.progress {
+  @include box-shadow(none);
+
+  .progress-bar {
+    font-size: 8px;
+    line-height: 8px;
+  }
+}
+
+// Containers ==================================================================

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

@@ -0,0 +1,68 @@
+// Cosmo 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #373a3c !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #2780E3 !default;
+$indigo:  #6610f2 !default;
+$purple:  #613d7c !default;
+$pink:    #e83e8c !default;
+$red:     #FF0039 !default;
+$orange:  #f0ad4e !default;
+$yellow:  #FF7518 !default;
+$green:   #3FB618 !default;
+$teal:    #20c997 !default;
+$cyan:    #9954BB !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-800 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+// Options
+
+$enable-rounded: false !default;
+
+// Body
+
+$body-color:    $gray-800 !default;
+
+// Fonts
+
+$font-family-sans-serif: "Segoe UI", "Source Sans Pro", Calibri, Candara, Arial, sans-serif !default;
+
+$font-size-base: 0.9375rem !default;
+
+$headings-font-weight:   300 !default;
+
+// Navbar
+
+$navbar-dark-hover-color:           rgba($white,1) !default;
+
+$navbar-light-hover-color:          rgba($black,.9) !default;
+
+// Alerts
+
+$alert-border-width:                0 !default;
+
+// Progress bars
+
+$progress-height:               0.5rem !default;

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

@@ -0,0 +1,295 @@
+// Cyborg 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+.navbar {
+
+  &.bg-primary {
+    border: 1px solid $gray-700;
+  }
+
+  &.bg-dark {
+    background-color: $body-bg !important;
+    border: 1px solid $gray-700;
+  }
+
+  &.bg-light {
+    background-color: $gray-500 !important;
+  }
+
+  &.fixed-top {
+    border-width: 0 0 1px 0;
+  }
+
+  &.fixed-bottom {
+    border-width: 1px 0 0 0;
+  }
+
+}
+
+// Buttons =====================================================================
+
+.btn {
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+table {
+  color: #fff;
+}
+
+.table {
+
+  &-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 =======================================================================
+
+legend {
+  color: #fff;
+}
+
+.form-control {
+  background-clip: border-box;
+
+  &:disabled,
+  &[readonly] {
+    border-color: transparent;
+  }
+}
+
+// Navs ========================================================================
+
+.nav-tabs,
+.nav-pills {
+  .nav-link {
+    color: #fff;
+
+    &:hover {
+      background-color: $gray-700;
+    }
+
+    &.disabled,
+    &.disabled:hover {
+      background-color: transparent;
+      color: $nav-link-disabled-color;
+    }
+
+    &.active {
+      background-color: $primary;
+    }
+  }
+}
+
+.breadcrumb {
+  a {
+    color: #fff;
+  }
+}
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+// Indicators ==================================================================
+
+.alert {
+  border: none;
+  color: $white;
+
+  a,
+  .alert-link {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
+
+.badge {
+  &-warning {
+    color: $white;
+  }
+}
+
+.close {
+  opacity: 0.6;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+.list-group-item {
+  &:hover {
+    background-color: $gray-700;
+    color: #fff;
+  }
+
+  &-action {
+    color: $gray-500;
+
+    .list-group-item-heading {
+      color: $gray-500;
+    }
+  }
+
+  &:hover .list-group-item-heading {
+    color: #fff;
+  }
+}
+
+.card,
+.list-group-item {
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+  }
+}
+
+.popover {
+  &-title {
+    border-bottom: none;
+  }
+}

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

@@ -0,0 +1,184 @@
+// Cyborg 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ADAFAE !default;
+$gray-500: #888 !default;
+$gray-600: #555 !default;
+$gray-700: #282828 !default;
+$gray-800: #222 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #2A9FD6 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #CC0000 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #FF8800 !default;
+$green:   #77B300 !default;
+$teal:    #20c997 !default;
+$cyan:    #9933CC !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-800 !default;
+$dark:          $gray-400 !default;
+
+$yiq-contrasted-threshold:  175 !default;
+
+
+// Body
+
+$body-bg:       #060606 !default;
+$body-color:    $gray-400 !default;
+
+// Fonts
+
+$font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+
+$font-size-base: .875rem !default;
+
+$h1-font-size: 4rem !default;
+$h2-font-size: 3rem !default;
+$h3-font-size: 2.5rem !default;
+$h4-font-size: 2rem !default;
+$h5-font-size: 1.5rem !default;
+
+$headings-color:         $white !default;
+
+// Tables
+
+$table-color:                   $white !default;
+$table-accent-bg:               rgba($white,.05) !default;
+$table-hover-bg:                rgba($white,.075) !default;
+
+$table-border-color:            $gray-700 !default;
+
+$table-dark-bg:               $gray-500 !default;
+$table-dark-border-color:     darken($gray-500, 7.5%) !default;
+
+// Buttons
+
+$input-btn-padding-x:       1rem !default;
+
+// Forms
+
+$input-disabled-bg:              $gray-400 !default;
+
+$input-border-color:             $white !default;
+
+$input-group-addon-color:           $white !default;
+$input-group-addon-bg:              $gray-700 !default;
+$input-group-addon-border-color:    transparent !default;
+
+$custom-file-color:                 $white !default;
+$custom-file-border-color:          $gray-700 !default;
+
+// Dropdowns
+
+$dropdown-bg:                    $gray-700 !default;
+$dropdown-divider-bg:            $gray-800 !default;
+
+$dropdown-link-color:            $white !default;
+$dropdown-link-hover-color:      $white !default;
+$dropdown-link-hover-bg:         $primary !default;
+
+// Navs
+
+$nav-tabs-border-color:                       $table-border-color !default;
+$nav-tabs-link-hover-border-color:            $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:                  $white !default;
+$nav-tabs-link-active-bg:                     $nav-tabs-border-color !default;
+$nav-tabs-link-active-border-color:           $nav-tabs-border-color !default;
+
+// Navbar
+
+$navbar-dark-hover-color:           $white !default;
+
+// Pagination
+
+$pagination-color:                     $white !default;
+$pagination-bg:                        $gray-700 !default;
+$pagination-border-color:              transparent !default;
+
+$pagination-hover-color:               $white !default;
+$pagination-hover-bg:                  $primary !default;
+$pagination-hover-border-color:        $pagination-border-color !default;
+
+$pagination-disabled-bg:               $pagination-bg !default;
+$pagination-disabled-border-color:     $pagination-border-color !default;
+
+
+// Jumbotron
+
+$jumbotron-bg:                   $gray-700 !default;
+
+// Cards
+
+$card-bg:                  $gray-700 !default;
+
+// Tooltips
+
+$tooltip-bg:                  $gray-700 !default;
+$tooltip-opacity:             1 !default;
+
+// Popovers
+
+$popover-bg:                          $gray-700 !default;
+
+// Toasts
+
+$toast-color:                       $white !default;
+$toast-background-color:            $gray-800 !default;
+$toast-border-color:                $gray-700 !default;
+
+$toast-header-color:                $body-color !default;
+$toast-header-background-color:     $toast-background-color !default;
+$toast-header-border-color:         $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg:               $gray-800 !default;
+
+$modal-header-border-color:   $gray-700 !default;
+
+// Progress bars
+
+$progress-bg:                   $gray-700 !default;
+
+// List group
+
+$list-group-bg:                  $gray-800 !default;
+$list-group-border-color:        $gray-700 !default;
+
+$list-group-hover-bg:                 $primary !default;
+
+$list-group-disabled-bg:         $gray-700 !default;
+
+$list-group-action-active-bg:         $primary !default;
+
+// Breadcrumbs
+
+$breadcrumb-bg:                 $gray-700 !default;
+
+// Close
+
+$close-color:                 $white !default;
+$close-text-shadow:           none !default;
+
+// Code
+
+$pre-color:                         inherit !default;

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

@@ -0,0 +1,220 @@
+// Darkly 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+// Buttons =====================================================================
+
+// Typography ==================================================================
+
+.blockquote {
+  &-footer {
+    color: $gray-600;
+  }
+}
+
+// Tables ======================================================================
+
+.table {
+
+  &-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 =======================================================================
+
+.input-group-addon {
+  color: #fff;
+}
+
+// Navs ========================================================================
+
+.nav-tabs,
+.nav-pills {
+
+  .nav-link,
+  .nav-link.active,
+  .nav-link.active:focus,
+  .nav-link.active:hover,
+  .nav-item.open .nav-link,
+  .nav-item.open .nav-link:focus,
+  .nav-item.open .nav-link:hover {
+    color: #fff;
+  }
+}
+
+.breadcrumb a {
+  color: #fff;
+}
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+// Indicators ==================================================================
+
+.close {
+  opacity: 0.4;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.alert {
+  border: none;
+  color: $white;
+
+  a,
+  .alert-link {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+
+.list-group-item-action {
+  color: #fff;
+
+  &:hover,
+  &:focus {
+    background-color: $gray-700;
+    color: #fff;
+  }
+
+  .list-group-item-heading {
+    color: #fff;
+  }
+}

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

@@ -0,0 +1,179 @@
+// Darkly 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ebebeb !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #888 !default;
+$gray-700: #444 !default;
+$gray-800: #303030 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #375a7f !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #E74C3C !default;
+$orange:  #fd7e14 !default;
+$yellow:  #F39C12 !default;
+$green:   #00bc8c !default;
+$teal:    #20c997 !default;
+$cyan:    #3498DB !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-700 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-500 !default;
+$dark:          $gray-800 !default;
+
+$yiq-contrasted-threshold:  175 !default;
+
+// Body
+
+$body-bg:                   $gray-900 !default;
+$body-color:                $white !default;
+
+// Links
+
+$link-color:                $success !default;
+
+// Fonts
+
+$font-family-sans-serif:      "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+$font-size-base:              0.9375rem !default;
+
+$h1-font-size:                3rem !default;
+$h2-font-size:                2.5rem !default;
+$h3-font-size:                2rem !default;
+
+$text-muted:                  $gray-600 !default;
+
+// Tables
+
+$table-accent-bg:             $gray-800 !default;
+
+$table-border-color:          $gray-700 !default;
+
+// Forms
+
+$input-border-color:                    $body-bg !default;
+
+$input-group-addon-color:               $gray-500 !default;
+$input-group-addon-bg:                  $gray-700 !default;
+
+$custom-file-color:                 $gray-500 !default;
+$custom-file-border-color:          $body-bg !default;
+
+// Dropdowns
+
+$dropdown-bg:                       $gray-900 !default;
+$dropdown-border-color:             $gray-700 !default;
+$dropdown-divider-bg:               $gray-700 !default;
+
+$dropdown-link-color:               $white !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-link-padding-x:                1.5rem !default;
+$nav-link-disabled-color:           $gray-500 !default;
+
+$nav-tabs-border-color:             $gray-700 !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color $nav-tabs-border-color transparent !default;
+$nav-tabs-link-active-color:        $white !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
+
+// Navbar
+
+$navbar-padding-y:                  .7rem !default;
+
+$navbar-dark-color:                rgba($white,.6) !default;
+$navbar-dark-hover-color:          $white !default;
+
+$navbar-light-color:                rgba($gray-900, .7) !default;
+$navbar-light-hover-color:          $gray-900 !default;
+$navbar-light-active-color:         $gray-900 !default;
+$navbar-light-toggler-border-color: rgba($gray-900, .1) !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $success !default;
+$pagination-border-width:           0 !default;
+$pagination-border-color:           transparent !default;
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               lighten($success, 10%) !default;
+$pagination-hover-border-color:     transparent !default;
+
+$pagination-active-bg:              $pagination-hover-bg !default;
+$pagination-active-border-color:    transparent !default;
+
+$pagination-disabled-color:         $white !default;
+$pagination-disabled-bg:            darken($success, 15%) !default;
+$pagination-disabled-border-color:  transparent !default;
+
+// Jumbotron
+
+$jumbotron-bg:                      $gray-800 !default;
+
+// Cards
+
+$card-cap-bg:                       $gray-700 !default;
+$card-bg:                           $gray-800 !default;
+
+// Popovers
+
+$popover-bg:                        $gray-800 !default;
+
+$popover-header-bg:                 $gray-700 !default;
+
+// Toasts
+
+$toast-background-color:            $gray-700 !default;
+
+$toast-header-background-color:     $gray-800 !default;
+
+// Modals
+
+$modal-content-bg:                  $gray-800 !default;
+$modal-content-border-color:        $gray-700 !default;
+
+$modal-header-border-color:         $gray-700 !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-700 !default;
+
+// List group
+
+$list-group-bg:                     $gray-800 !default;
+$list-group-border-color:           $gray-700 !default;
+
+$list-group-hover-bg:               $gray-700 !default;
+
+// Breadcrumbs
+
+$breadcrumb-bg:                     $gray-700 !default;
+
+// Close
+
+$close-color:                       $white !default;
+$close-text-shadow:                 none !default;
+
+// Code
+
+$pre-color:                         inherit !default;

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

@@ -0,0 +1,251 @@
+// Flatly 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar =======================================================================
+
+.bg-primary {
+  .navbar-nav .active > .nav-link {
+    color: $success !important;
+  }
+}
+
+.bg-dark {
+  &.navbar-dark .navbar-nav {
+    .nav-link:focus,
+    .nav-link:hover,
+    .active > .nav-link {
+      color: $primary !important;
+    }
+  }
+}
+
+// Buttons =====================================================================
+
+.btn {
+  &-secondary,
+  &-secondary:hover,
+  &-warning,
+  &-warning:hover {
+    color: #fff;
+  }
+}
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+.table {
+
+  &-primary,
+  &-secondary,
+  &-success,
+  &-info,
+  &-warning,
+  &-danger {
+    color: #fff;
+  }
+
+  &-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 =======================================================================
+
+// Navs ========================================================================
+
+.nav-tabs {
+  .nav-link.active,
+  .nav-link.active:focus,
+  .nav-link.active:hover,
+  .nav-item.open .nav-link,
+  .nav-item.open .nav-link:focus,
+  .nav-item.open .nav-link:hover {
+    color: $primary;
+  }
+}
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+// Indicators ==================================================================
+
+.close {
+  text-decoration: none;
+  opacity: 0.4;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.badge {
+  &-secondary,
+  &-warning {
+    color: #fff;
+  }
+}
+
+.alert {
+  border: none;
+  color: $white;
+
+  a,
+  .alert-link {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+
+  &-light {
+    &,
+    & a,
+    & .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+.modal,
+.toast {
+
+  .close {
+    color: $black;
+
+    &:not(:disabled):not(.disabled):hover,
+    &:not(:disabled):not(.disabled):focus {
+      color: $black;
+    }
+  }
+}

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

@@ -0,0 +1,108 @@
+// Flatly 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ecf0f1 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #b4bcc2 !default;
+$gray-600: #95a5a6 !default;
+$gray-700: #7b8a8b !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #2C3E50 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #E74C3C !default;
+$orange:  #fd7e14 !default;
+$yellow:  #F39C12 !default;
+$green:   #18BC9C !default;
+$teal:    #20c997 !default;
+$cyan:    #3498DB !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-700 !default;
+
+$yiq-contrasted-threshold:  175 !default;
+
+// Links
+
+$link-color:                $success !default;
+
+// Fonts
+
+$font-family-sans-serif:      "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+$font-size-base:              0.9375rem !default;
+
+$h1-font-size:                3rem !default;
+$h2-font-size:                2.5rem !default;
+$h3-font-size:                2rem !default;
+
+// Tables
+
+$table-accent-bg:             $gray-200 !default;
+
+// Dropdowns
+
+$dropdown-link-color:               $gray-700 !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-link-padding-y:                0.5rem !default !default;
+$nav-link-padding-x:                1.5rem !default;
+$nav-link-disabled-color:           $gray-600 !default !default;
+
+$nav-tabs-border-color:             $gray-200 !default;
+
+// Navbar
+
+$navbar-padding-y:                  .7rem !default;
+
+$navbar-dark-color:                 $white !default;
+$navbar-dark-hover-color:           $success !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $success !default;
+$pagination-border-width:           0 !default;
+$pagination-border-color:           transparent !default;
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               darken($success, 15%) !default;
+$pagination-hover-border-color:     transparent !default;
+
+$pagination-active-bg:              $pagination-hover-bg !default;
+$pagination-active-border-color:    transparent !default;
+
+$pagination-disabled-color:         $gray-200 !default;
+$pagination-disabled-bg:            lighten($success, 15%) !default;
+$pagination-disabled-border-color:  transparent !default;
+
+// List group
+
+$list-group-hover-bg:               $gray-200 !default;
+
+$list-group-disabled-bg:            $gray-200 !default;
+
+// Close
+
+$close-color:                       $white !default;
+$close-text-shadow:                 none !default;

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

@@ -0,0 +1,73 @@
+// Journal 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=News+Cycle:400,700&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+.bg-dark {
+  background-color: #000 !important;
+}
+
+.bg-light {
+  background-color: $white !important;
+  color: $black;
+  border: 1px solid $gray-200;
+
+  &.navbar-fixed-top {
+    border-width: 0 0 1px 0;
+  }
+
+  &.navbar-fixed-bottom {
+    border-width: 1px 0 0 0;
+  }
+}
+
+.navbar {
+  font-size: 18px;
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+}
+
+.navbar-brand {
+  padding-top: 0.5rem;
+  font-size: inherit;
+  font-weight: $headings-font-weight;
+  text-transform: uppercase;
+}
+
+// Buttons =====================================================================
+
+.btn {
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+
+  &-secondary,
+  &-warning {
+    color: $white;
+  }
+}
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+// Forms =======================================================================
+
+// Navs ========================================================================
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+// Indicators ==================================================================
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================

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

@@ -0,0 +1,60 @@
+// Journal 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #eee !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #aaa !default;
+$gray-600: #777 !default;
+$gray-700: #495057 !default;
+$gray-800: #333 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #EB6864 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #F57A00 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #F5E625 !default;
+$green:   #22B24C !default;
+$teal:    #20c997 !default;
+$cyan:    #369 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-500 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
+
+// Fonts
+
+$headings-font-family:   "News Cycle", "Arial Narrow Bold", sans-serif !default;
+$headings-font-weight:        700 !default;
+$headings-line-height:        1.1 !default;
+
+// Buttons
+
+$input-btn-padding-x:         1rem !default;
+
+// Navbar
+
+$navbar-light-color:                rgba($black,.7) !default;
+$navbar-light-hover-color:          $black !default;
+$navbar-light-active-color:         $black !default;
+
+// Pagination
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               $primary !default;
+$pagination-hover-border-color:     $primary !default;

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

@@ -0,0 +1,255 @@
+// Litera 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$font-family-serif:      Georgia, Cambria, "Times New Roman", Times, serif !default;
+
+// Navbar ======================================================================
+
+.navbar {
+  font-size: $font-size-sm;
+
+  &.bg-dark {
+    background-color: $success !important;
+  }
+
+  &.bg-light {
+    background-color: #fff !important;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+
+    &.navbar-fixed-top {
+      border-width: 0 0 1px 0;
+    }
+
+    &.navbar-fixed-bottom {
+      border-width: 1px 0 0 0;
+    }
+  }
+}
+
+// Buttons =====================================================================
+
+.btn {
+  border-radius: 1.078em;
+
+  &-lg {
+    border-radius: 2.688em;
+  }
+
+  &-sm {
+    border-radius: 0.844em;
+  }
+}
+
+// Typography ==================================================================
+
+p {
+  font-family: $font-family-serif;
+}
+
+blockquote {
+  font-style: italic;
+}
+
+footer {
+  font-size: $font-size-sm;
+}
+
+.lead {
+  color: $gray-600;
+  font-family: $font-family-sans-serif;
+}
+
+// Tables ======================================================================
+
+table,
+.table {
+  font-size: $font-size-sm;
+
+  &-primary,
+  &-secondary,
+  &-success,
+  &-info,
+  &-warning,
+  &-danger {
+    color: #fff;
+  }
+}
+
+.table {
+
+  &-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 =======================================================================
+
+// Navs ========================================================================
+
+.nav,
+.breadcrumb,
+.pagination {
+  font-size: $font-size-sm;
+}
+
+.dropdown-menu {
+  font-size: $font-size-sm;
+}
+
+// Indicators ==================================================================
+
+.alert {
+  color: $white;
+  font-size: $font-size-sm;
+
+  &, p {
+    font-family: $font-family-sans-serif;
+  }
+
+  a, .alert-link {
+    color: #fff;
+    font-weight: normal;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(0deg, mix($body-bg, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+
+  &-light {
+    &,
+    & a,
+    & .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  vertical-align: bottom;
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+.list-group {
+  font-size: $font-size-sm;
+}

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

@@ -0,0 +1,94 @@
+// Litera 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #ddd !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #4582EC !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #d9534f !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f0ad4e !default;
+$green:   #02B875 !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-500 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$yiq-contrasted-threshold:  190 !default;
+
+// Body
+
+$body-color:                $gray-800 !default;
+
+// Fonts
+
+$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+$font-size-base:              1.063rem !default;
+
+$headings-font-weight:        700 !default;
+
+// Tables
+
+$table-border-color:          rgba(0,0,0,0.1) !default;
+
+// Buttons
+
+$input-btn-padding-y:         0.5rem !default;
+$input-btn-padding-x:         1.1rem !default;
+
+$btn-font-family:             $font-family-sans-serif !default;
+$btn-font-size:               0.875rem !default;
+
+$btn-font-size-sm:            0.688rem !default;
+
+// Forms
+
+$input-border-color:                    rgba(0,0,0,.1) !default;
+
+$input-group-addon-bg:                  $gray-200 !default !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white,.6) !default;
+$navbar-dark-hover-color:           $white !default;
+
+$navbar-light-hover-color:          $body-color !default;
+$navbar-light-active-color:         $body-color !default;
+
+// Tooltips
+
+$tooltip-font-size:                 11px !default;
+
+// Badges
+
+$badge-font-weight:                 normal !default;
+$badge-padding-y:                   0.3em !default;
+$badge-padding-x:                   0.6em !default;
+
+// Alerts
+
+$alert-border-width:                0 !default;

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

@@ -0,0 +1,506 @@
+// Lumen 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic&display=swap" !default;
+@import url($web-font-path);
+
+@mixin shadow($width: 4px){
+  border-style: solid;
+  border-width: 0 1px $width 1px;
+}
+
+// Navbar ======================================================================
+
+.navbar {
+  @include shadow();
+}
+
+.bg-primary {
+  border-color: darken($primary, 5%);
+}
+
+.bg-dark {
+  border-color: darken($dark, 5%);
+}
+
+.bg-light {
+  background-color: #fff !important;
+  border-color: darken(#fff, 5%);
+}
+
+// Buttons =====================================================================
+
+.btn {
+  @include shadow();
+  text-transform: uppercase;
+
+  &:not(.disabled):hover {
+    margin-top: 1px;
+    border-bottom-width: 3px;
+  }
+
+  &:not(.disabled):active {
+    margin-top: 2px;
+    border-bottom-width: 2px;
+    @include box-shadow(none);
+  }
+}
+
+[class*="btn-outline"] {
+  border-top-width: 1px;
+}
+
+.btn {
+  &-primary {
+    border-color: darken($primary, 5%);
+  }
+
+  &-secondary {
+    border-color: darken($secondary, 5%);
+  }
+
+  &-success {
+    border-color: darken($success, 5%);
+  }
+
+  &-info {
+    border-color: darken($info, 5%);
+  }
+
+  &-danger {
+    border-color: darken($danger, 5%);
+  }
+
+  &-warning {
+    border-color: darken($warning, 5%);
+  }
+
+  &-light {
+    border-color: darken($light, 5%);
+  }
+
+  &-dark {
+    border-color: darken($dark, 5%);
+  }
+}
+
+.btn-group-vertical {
+  .btn + .btn {
+    &:hover {
+      margin-top: -1px;
+      border-top-width: 1px;
+    }
+
+    &:active {
+      margin-top: -1px;
+      border-top-width: 2px;
+    }
+  }
+}
+
+// Typography ==================================================================
+
+.text-secondary {
+  color: $gray-700 !important;
+}
+
+.blockquote-footer {
+  color: $gray-600;
+}
+
+// Tables ======================================================================
+
+.table {
+
+  &-primary,
+  &-success,
+  &-info,
+  &-warning,
+  &-danger {
+    color: #fff;
+  }
+
+  &-hover tbody {
+    .table-primary:hover,
+    .table-success:hover,
+    .table-info:hover,
+    .table-warning:hover,
+    .table-danger:hover,
+    .table-dark:hover {
+      color: #fff;
+    }
+  }
+
+  &-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 =======================================================================
+
+.form-control {
+  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.075);
+}
+
+.input-group-sm {
+  > .input-group-prepend,
+  > .input-group-append {
+    .btn {
+      font-size: $btn-font-size-sm;
+    }
+  }
+}
+
+// Navs ========================================================================
+
+.nav {
+  .open > a,
+  .open > a:hover,
+  .open > a:focus {
+    border-color: transparent;
+  }
+}
+
+.nav-tabs {
+
+  .nav-link {
+    color: $body-color;
+
+    &,
+    &.disabled,
+    &.disabled:hover,
+    &.disabled:focus {
+      margin-top: 6px;
+      border-color: $nav-tabs-border-color;
+      transition: all 0.2s ease-in-out;
+    }
+
+    &:not(.disabled):hover,
+    &:not(.disabled):focus,
+    &.active {
+      padding-bottom: calc(0.5em + 6px);
+      border-bottom-color: transparent;
+      margin-top: 0;
+    }
+  }
+
+  &.nav-justified > li {
+    vertical-align: bottom;
+  }
+}
+
+.dropdown-menu {
+  margin-top: 0;
+  @include shadow();
+  border-top-width: 1px;
+  @include box-shadow(none);
+}
+
+.breadcrumb {
+  border-color: darken($breadcrumb-bg, 5%);
+  @include shadow();
+}
+
+.pagination {
+
+  > li > a,
+  > li > span {
+    position: relative;
+    top: 0;
+    @include shadow();
+    color: $pagination-color;
+    font-size: 12px;
+    font-weight: bold;
+    text-transform: uppercase;
+
+    &:hover,
+    &:focus {
+      top: 1px;
+      border-bottom-width: 3px;
+      text-decoration: none;
+    }
+
+    &:active {
+      top: 2px;
+      border-bottom-width: 2px;
+    }
+  }
+
+  > .disabled > a,
+  > .disabled > span {
+
+    &:hover {
+      top: 0;
+      @include shadow();
+    }
+
+    &:active {
+      top: 0;
+      @include shadow();
+    }
+  }
+}
+
+.pager {
+
+  > li > a,
+  > li > span,
+  > .disabled > a,
+  > .disabled > span {
+
+    &,
+    &:hover,
+    &:active {
+      border-left-width: 2px;
+      border-right-width: 2px;
+    }
+  }
+}
+
+// Indicators ==================================================================
+
+.close {
+  text-decoration: none;
+  opacity: 0.4;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.alert {
+  color: $white;
+  @include shadow();
+
+  &-primary {
+    background-color: $primary;
+    border-color: darken($primary, 5%);
+  }
+
+  &-secondary {
+    background-color: $secondary;
+    border-color: darken($secondary, 5%);
+  }
+
+  &-success {
+    background-color: $success;
+    border-color: darken($success, 5%);
+  }
+
+  &-info {
+    background-color: $info;
+    border-color: darken($info, 5%);
+  }
+
+  &-danger {
+    background-color: $danger;
+    border-color: darken($danger, 5%);
+  }
+
+  &-warning {
+    background-color: $warning;
+    border-color: darken($warning, 5%);
+  }
+
+  &-dark {
+    background-color: $dark;
+    border-color: darken($dark, 5%);
+  }
+
+  &-light {
+    background-color: $light;
+    border-color: darken($light, 5%);
+  }
+
+  .alert-link {
+    font-weight: normal;
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  &-secondary,
+  &-light {
+    &,
+    & a,
+    & .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  &-warning,
+  &-info {
+    color: $white;
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+a.list-group-item {
+
+  &-success {
+    &.active {
+      background-color: $success;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: darken($success, 5%);
+    }
+  }
+
+  &-warning {
+    &.active {
+      background-color: $warning;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: darken($warning, 5%);
+    }
+  }
+
+  &-danger {
+    &.active {
+      background-color: $danger;
+    }
+
+    &.active:hover,
+    &.active:focus {
+      background-color: darken($danger, 5%);
+    }
+  }
+}
+
+.jumbotron {
+  border: 1px solid $gray-200;
+  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.modal,
+.toast {
+
+  .close {
+    color: $black;
+
+    &:not(:disabled):not(.disabled):hover,
+    &:not(:disabled):not(.disabled):focus {
+      color: $black;
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+// Lumen 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f6f6f6 !default;
+$gray-200: #f0f0f0 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #999 !default;
+$gray-700: #555 !default;
+$gray-800: #333 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #158CBA !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #FF4136 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #FF851B !default;
+$green:   #28B62C !default;
+$teal:    #20c997 !default;
+$cyan:    #75CAEB !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-700 !default;
+
+$yiq-contrasted-threshold: 200 !default;
+
+// Fonts
+
+$font-family-sans-serif:      "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+$font-size-base:              0.875rem !default;
+
+// Buttons
+
+$btn-font-size:               0.75rem !default;
+
+$btn-font-size-sm:            0.625rem !default;
+
+$btn-font-weight:             bold !default;
+
+// Dropdowns
+
+$dropdown-link-color:               rgba(0,0,0,.5) !default;
+
+// Navs
+
+$nav-tabs-border-color:             $gray-200 !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $gray-900 !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+// Pagination
+
+$pagination-color:                  $gray-700 !default;
+$pagination-bg:                     $gray-200 !default;
+
+$pagination-hover-color:            $pagination-color !default;
+$pagination-hover-bg:               $pagination-bg !default;
+
+$pagination-active-border-color:    darken($primary, 5%) !default;
+
+$pagination-disabled-color:         $gray-600 !default;
+$pagination-disabled-bg:            $pagination-bg !default;
+
+// Jumbotron
+
+$jumbotron-bg:                      #fafafa !default;
+
+// Modals
+
+$modal-content-border-color:        rgba($black,.1) !default;
+
+// Close
+
+$close-color:                       $white !default;

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

@@ -0,0 +1,178 @@
+// Lux 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Nunito+Sans:400,600&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+.navbar {
+  font-size: $font-size-sm;
+  text-transform: uppercase;
+  font-weight: 600;
+
+  &-nav {
+    .nav-link {
+      padding-top: .715rem;
+      padding-bottom: .715rem;
+    }
+  }
+
+  &-brand {
+    margin-right: 1rem;
+  }
+}
+
+.bg-primary {
+  background-color: theme-color("primary") !important;
+}
+
+.bg-light {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+
+  &.navbar-fixed-top {
+    border-width: 0 0 1px 0;
+  }
+
+  &.navbar-bottom-top {
+    border-width: 1px 0 0 0;
+  }
+}
+
+.nav-item {
+  margin-right: 1rem;
+}
+
+// Buttons =====================================================================
+
+.btn {
+  font-size: $font-size-sm;
+  text-transform: uppercase;
+
+  &-sm {
+    font-size: 10px;
+  }
+
+  &-warning {
+    &,
+    &:hover,
+    &:not([disabled]):not(.disabled):active,
+    &:focus {
+      color: $white;
+    }
+  }
+}
+
+.btn-outline-secondary {
+  border-color: $gray-600;
+  color: $gray-600;
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active {
+    background-color: $gray-400;
+    border-color: $gray-400;
+    color: $white;
+  }
+
+  &:not([disabled]):not(.disabled):focus {
+    box-shadow: 0 0 0 0.2rem rgba($gray-400, 0.5);
+  }
+}
+
+[class*="btn-outline-"] {
+  border-width: 2px;
+}
+
+.border-secondary {
+  border: 1px solid $gray-400 !important;
+}
+
+// Typography ==================================================================
+
+body {
+  font-weight: 200;
+  letter-spacing: 1px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-transform: uppercase;
+  letter-spacing: 3px;
+}
+
+.text-secondary {
+  color: $body-color !important;
+}
+
+// Tables ======================================================================
+
+th {
+  font-size: $font-size-sm;
+  text-transform: uppercase;
+}
+
+.table {
+  th, td {
+    padding: 1.5rem;
+  }
+
+  &-sm {
+    th, td {
+      padding: 0.75rem;
+    }
+  }
+}
+
+// Forms =======================================================================
+
+
+.custom-switch {
+
+  .custom-control-label {
+    &::after {
+      top: calc(0.15625rem + 2px);
+      left: calc(-2.25rem + 2px);
+      width: calc(1rem - 4px);
+      height: calc(1rem - 4px);
+    }
+  }
+}
+
+// Navs ========================================================================
+
+.dropdown-menu {
+  font-size: $font-size-sm;
+  text-transform: none;
+}
+
+// Indicators ==================================================================
+
+.badge {
+  padding-top: 0.28rem;
+
+  &-pill {
+    border-radius: 10rem;
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+.list-group-item {
+  h1, h2, h3, h4, h5, h6,
+  .h1, .h2, .h3, .h4, .h5, .h6 {
+    color: inherit;
+  }
+}
+
+.card {
+
+  &-title,
+  &-header {
+    color: inherit;
+  }
+}

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

@@ -0,0 +1,124 @@
+// Lux 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #f7f7f9 !default;
+$gray-300: #eceeef !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #919aa1 !default;
+$gray-700: #55595c !default;
+$gray-800: #343a40 !default;
+$gray-900: #1a1a1a !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #d9534f !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f0ad4e !default;
+$green:   #4BBF73 !default;
+$teal:    #20c997 !default;
+$cyan:    #1F9BCF !default;
+
+$primary:       $gray-900 !default;
+$secondary:     $white !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $white !default;
+$dark:          $gray-800 !default;
+
+$yiq-contrasted-threshold:  185 !default;
+
+// Options
+
+$enable-rounded:                              false !default;
+
+// Body
+
+$body-color:                $gray-700 !default;
+
+// Components
+
+// $border-radius:               0 !default;
+// $border-radius-lg:            0 !default;
+// $border-radius-sm:            0 !default;
+
+// Fonts
+
+$font-family-sans-serif:      "Nunito 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:              0.875rem !default;
+
+$h1-font-size:                2rem !default;
+$h2-font-size:                1.75rem !default;
+$h3-font-size:                1.5rem !default;
+$h4-font-size:                1.25rem !default;
+$h5-font-size:                1rem !default;
+$h6-font-size:                0.75rem !default;
+
+$headings-font-weight:        600 !default;
+$headings-color:              $gray-900 !default;
+
+// Tables
+
+$table-border-color:          rgba(0, 0, 0, 0.05) !default;
+
+// Buttons + Forms
+
+$input-btn-border-width:      0px !default;
+
+// Buttons
+
+$btn-line-height:             1.5rem !default;
+
+$input-btn-padding-y:         0.6rem !default;
+$input-btn-padding-x:         1.2rem !default;
+
+$input-btn-padding-y-sm:      .4rem !default;
+$input-btn-padding-x-sm:      .8rem !default;
+
+$input-btn-padding-y-lg:      2rem !default;
+$input-btn-padding-x-lg:      2rem !default;
+
+$btn-font-weight:             600 !default;
+
+// Forms
+
+$input-line-height:                     1.5 !default;
+
+$input-bg:                              $gray-200 !default;
+$input-disabled-bg:                     $gray-300 !default;
+
+$input-group-addon-bg:                  $gray-300 !default;
+
+// Navbar
+
+$navbar-padding-y:                  .7rem !default;
+
+$navbar-dark-hover-color:           $white !default;
+
+$navbar-light-color:                rgba($black,.3) !default;
+$navbar-light-hover-color:          $gray-900 !default;
+$navbar-light-active-color:         $gray-900 !default;
+
+// Pagination
+
+$pagination-border-color:           transparent !default;
+
+$pagination-hover-border-color:     $pagination-border-color !default;
+
+$pagination-disabled-border-color:  $pagination-border-color !default;
+
+// Breadcrumbs
+
+$breadcrumb-bg:                     transparent !default;

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

@@ -0,0 +1,735 @@
+// Materia 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" !default;
+@import url($web-font-path);
+
+// Effects =====================================================================
+
+@mixin ripple($color){
+  position: relative;
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    margin-left: 0;
+    @include gradient-radial($color 10%, transparent 10.01%);
+    background-size: 1000% 1000%;
+    background-position: 50%;
+    border: none;
+    opacity: 0;
+    pointer-events: none;
+    transition: background .5s, opacity 1s;
+  }
+
+  &:active:after {
+    background-size: 0 0;
+    opacity: .2;
+    transition: 0s;
+  }
+
+  &.disabled,
+  &[disabled] {
+    &:after {
+      display: none;
+    }
+  }
+}
+
+// Navbar ======================================================================
+
+.navbar {
+  border: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,.3);
+
+  &-brand {
+    font-size: 24px;
+  }
+
+  &-nav .nav-link {
+    padding-top: 0.9rem;
+    padding-bottom: 0.9rem;
+  }
+
+  &.bg-dark,
+  &.bg-primary {
+
+    input[type=text],
+    input[type=password],
+    input[type=email],
+    input[type=number],
+    input[type=tel] {
+      color: #fff;
+      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5);
+
+      &:focus {
+        box-shadow: inset 0 -2px 0 #fff;
+      }
+
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+}
+
+// Buttons =====================================================================
+
+@mixin btn($class,$bg,$color){
+  .btn-#{$class} {
+    &:focus {
+      background-color: $bg;
+      box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
+    }
+
+    &:hover,
+    &:active:hover {
+      background-color: darken($bg, 6%);
+    }
+
+    &:active {
+      box-shadow: 2px 2px 4px rgba(0,0,0,.4);
+    }
+
+    @include ripple($color);
+  }
+
+  .btn-outline-#{$class} {
+    @include ripple($color);
+  }
+}
+
+@include btn(primary,$primary,$white);
+@include btn(secondary,$secondary,$gray-500);
+@include btn(success,$success,$white);
+@include btn(info,$info,$white);
+@include btn(warning,$warning,$white);
+@include btn(danger,$danger,$white);
+@include btn(dark,$dark,$white);
+@include btn(light,$light,$white);
+
+.btn {
+  text-transform: uppercase;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0,0,0,.4);
+  transition: all 0.4s;
+
+  &-link {
+    box-shadow: none;
+    color: $link-color;
+
+    &:hover,
+    &:focus {
+      box-shadow: none;
+      color: $link-hover-color;
+      text-decoration: $link-hover-decoration;
+    }
+
+    &.disabled, // Although btn-link is intended for buttons, which want to look like link, I include here a.disable for the sake of consistency
+    &[disabled],
+    fieldset[disabled] & {
+      &:hover,
+      &:active:hover {
+        color: $btn-link-disabled-color;
+        text-decoration: none;
+      }
+    }
+  }
+
+  &-secondary {
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+      background-color: rgba(0, 0, 0, 0.1);
+      color: rgba(0, 0, 0, 0.4);
+      opacity: 1;
+
+      &:hover,
+      &:focus {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+
+  &-outline-secondary {
+    border-color: $gray-200;
+    color: $gray-300;
+  }
+
+  &-warning {
+    color: $white;
+  }
+
+  &.dropdown-toggle::before {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: 0.3em;
+    vertical-align: middle;
+    content: "";
+    border-top: 0.3em solid;
+    border-right: 0.3em solid transparent;
+    border-left: 0.3em solid transparent;
+  }
+}
+
+.btn-group {
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: 0;
+  }
+
+  &-vertical {
+    > .btn + .btn,
+    > .btn + .btn-group,
+    > .btn-group + .btn,
+    > .btn-group + .btn-group {
+      margin-top: 0;
+    }
+  }
+
+  .btn + .btn,
+  .btn + .btn-group > .dropdown-toggle {
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.border-secondary {
+  border: 1px solid #dfdfdf !important;
+}
+
+// Typography ==================================================================
+
+body,
+input,
+button {
+  -webkit-font-smoothing: antialiased;
+  letter-spacing: .1px;
+}
+
+p {
+  margin: 0 0 1em;
+}
+
+.text-secondary {
+  color: $gray-500 !important;
+}
+
+// Tables ======================================================================
+
+.table-hover {
+  > tbody > tr,
+  > tbody > tr > th,
+  > tbody > tr > td {
+    transition: all 0.2s;
+  }
+}
+
+.thead-inverse th {
+  background-color: $primary;
+  color: $white;
+}
+
+// Forms =======================================================================
+
+.col-form-label {
+  font-size: 16px;
+
+  &-sm {
+    font-size: $font-size-sm;
+  }
+
+  &-lg {
+    font-size: $font-size-lg;
+  }
+}
+
+textarea,
+textarea.form-control,
+input.form-control,
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=number],
+[type=text].form-control,
+[type=password].form-control,
+[type=email].form-control,
+[type=tel].form-control,
+[contenteditable].form-control {
+  box-shadow: inset 0 -1px 0 #ddd;
+  transition: box-shadow 0.2s;
+
+  &:focus {
+    box-shadow: inset 0 -2px 0 $primary;
+  }
+
+  &[disabled],
+  &[readonly] {
+    box-shadow: none;
+    border-bottom: 1px dotted #ddd;
+  }
+
+  &[disabled],
+  &[disabled]::placeholder {
+    color: #ddd;
+  }
+
+  &::-ms-clear {
+    display: none;
+  }
+}
+
+select,
+select.form-control {
+  appearance: none;
+  padding: 0.5rem 0;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEVmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaP/QSjAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
+  background-size: 13px;
+  background-repeat: no-repeat;
+  background-position: right center;
+  box-shadow: inset 0 -1px 0 #ddd;
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  &.input {
+    &-sm {
+      font-size: $font-size-sm;
+    }
+
+    &-lg {
+      font-size: $font-size-lg;
+    }
+  }
+
+  &:focus {
+    box-shadow: inset 0 -2px 0 $primary;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEUhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISF8S9ewAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
+  }
+
+  &[multiple] {
+    background: none;
+  }
+}
+
+.custom-control {
+  min-height: 1.5rem;
+}
+
+.custom-control-label {
+  &::before {
+    top: 0;
+    border: 2px solid $gray-400;
+  }
+  &::after {
+    top: 0;
+  }
+
+  .custom-control-input:checked ~ &::before {
+    border-color: $primary;
+  }
+}
+
+.custom-checkbox .custom-control-input:checked {
+  ~ .custom-control-label::after {
+    transform: scale(1.5);
+  }
+}
+
+.custom-radio .custom-control-input {
+  &:checked {
+    ~ .custom-control-label::before {
+      background: $white;
+    }
+    ~ .custom-control-label::after {
+      transform: scale(1.125);
+      transition: 240ms;
+    }
+  }
+  & {
+    ~ .custom-control-label::after {
+      transform: scale(.75);
+    }
+  }
+}
+
+.custom-switch {
+
+  .custom-control-label::before {
+    top: 0.125rem;
+    height: 0.875rem;
+    background: $gray-500;
+    border: none;
+  }
+
+  .custom-control-input:disabled  ~ .custom-control-label {
+    opacity: 0.7;
+  }
+
+  .custom-control-input:disabled ~ .custom-control-label::before {
+    background: $gray-500;
+  }
+
+  .custom-control-label::after {
+    background-color: #fff;
+    box-shadow: 0 1px 4px rgba(0,0,0,.3);
+  }
+
+  .custom-control-input:checked ~ .custom-control-label::before {
+    opacity: 0.38;
+  }
+
+  .custom-control-input:checked ~ .custom-control-label::after {
+    background-color: $primary;
+  }
+
+  .custom-control-input:hover:not(:disabled) ~ .custom-control-label::after {
+    box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 0 9px rgba(0,0,0,0.05);
+  }
+
+  .custom-control-input:focus:not(:disabled) ~ .custom-control-label::after {
+    box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 0 9px rgba(0,0,0,0.09);
+  }
+
+  .custom-control-input:active:not(:disabled) ~ .custom-control-label::after {
+    box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 0 9px rgba(0,0,0,0.16);
+  }
+
+  .custom-control-input:hover:checked:not(:disabled) ~ .custom-control-label::after {
+    box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 0 9px rgba(33,150,243,0.05);
+  }
+
+  .custom-control-input:focus:checked:not(:disabled) ~ .custom-control-label::after {
+    box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 0 9px rgba(33,150,243,0.09);
+  }
+
+  .custom-control-input:active:checked:not(:disabled) ~ .custom-control-label::after {
+    box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 0 9px rgba(33,150,243,0.16);
+  }
+
+  .custom-control-input:active:not(:checked) ~ .custom-control-label::before {
+    background-color: $gray-500;
+  }
+
+  .custom-control-input:active:not(:checked) ~ .custom-control-label::before {
+    background-color: $gray-500;
+  }
+}
+
+.has-warning {
+  input:not([type=checkbox]),
+  .form-control,
+  input.form-control[readonly],
+  input[type=text][readonly],
+  [type=text].form-control[readonly],
+  input:not([type=checkbox]):focus,
+  .form-control:focus {
+    border-bottom: none;
+    box-shadow: inset 0 -2px 0 $warning;
+  }
+}
+
+.has-danger {
+  input:not([type=checkbox]),
+  .form-control,
+  input.form-control[readonly],
+  input[type=text][readonly],
+  [type=text].form-control[readonly],
+  input:not([type=checkbox]):focus,
+  .form-control:focus {
+    border-bottom: none;
+    box-shadow: inset 0 -2px 0 $danger;
+  }
+}
+
+.has-success {
+  input:not([type=checkbox]),
+  .form-control,
+  input.form-control[readonly],
+  input[type=text][readonly],
+  [type=text].form-control[readonly],
+  input:not([type=checkbox]):focus,
+  .form-control:focus {
+    border-bottom: none;
+    box-shadow: inset 0 -2px 0 $success;
+  }
+}
+
+// Remove the Bootstrap feedback styles for input addons
+.input-group-addon {
+  .has-warning &, .has-danger &, .has-success & {
+    color: $input-color;
+    border-color: $input-group-addon-border-color;
+    background-color: $input-group-addon-bg;
+  }
+}
+
+.input-group {
+
+  > .input-group-prepend > .input-group-text {
+    padding-right: 0.25rem;
+  }
+
+  > .input-group-append > .input-group-text {
+    padding-left: 0.25rem;
+  }
+
+  .form-control {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+}
+
+.input-group-sm {
+
+  > .input-group-prepend > .btn,
+  > .input-group-append > .btn {
+    padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
+  }
+
+  > .input-group-prepend > .input-group-text {
+    padding: $input-btn-padding-y-sm $input-btn-padding-x-sm $input-btn-padding-y-sm 0;
+  }
+
+  > .input-group-append > .input-group-text {
+    padding: $input-btn-padding-y-sm 0 $input-btn-padding-y-sm $input-btn-padding-x-sm;
+  }
+
+  > .input-group-prepend > .btn {
+    border-top-left-radius: $btn-border-radius-sm;
+    border-bottom-left-radius: $btn-border-radius-sm;
+  }
+
+  > .input-group-append > .btn {
+    border-top-right-radius: $btn-border-radius-sm;
+    border-bottom-right-radius: $btn-border-radius-sm;
+  }
+}
+
+.input-group-lg {
+
+  > .input-group-prepend > .btn,
+  > .input-group-append > .btn {
+    padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
+  }
+
+  > .input-group-prepend > .input-group-text {
+    padding: $input-btn-padding-y-lg $input-btn-padding-x-lg $input-btn-padding-y-lg 0;
+  }
+
+  > .input-group-append > .input-group-text {
+    padding: $input-btn-padding-y-lg 0 $input-btn-padding-y-lg $input-btn-padding-x-lg;
+  }
+
+  > .input-group-prepend > .btn {
+    border-top-left-radius: $btn-border-radius-lg;
+    border-bottom-left-radius: $btn-border-radius-lg;
+  }
+
+  > .input-group-append > .btn {
+    border-top-right-radius: $btn-border-radius-lg;
+    border-bottom-right-radius: $btn-border-radius-lg;
+  }
+}
+
+
+.form-group-lg {
+  select,
+  select.form-control {
+    line-height: 1.5;
+  }
+}
+
+// Navs ========================================================================
+
+.nav-tabs {
+  .nav-item + .nav-item {
+    margin-left: 0;
+  }
+
+  .nav-link,
+  .nav-link:focus {
+    margin-right: 0;
+    background-color: transparent;
+    border: none;
+    color: $body-color;
+    box-shadow: inset 0 -1px 0 #ddd;
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: transparent;
+      box-shadow: inset 0 -2px 0 $primary;
+      color: $primary;
+    }
+  }
+
+  .nav-link.active,
+  .nav-link.active:focus {
+    border: none;
+    box-shadow: inset 0 -2px 0 $primary;
+    color: $primary;
+
+    &:hover {
+      border: none;
+      color: $primary;
+    }
+  }
+
+  .nav-link.disabled {
+    box-shadow: inset 0 -1px 0 #ddd;
+  }
+
+  &.nav-justified {
+
+    .nav-link,
+    .nav-link:hover,
+    .nav-link:focus,
+    .nav-link.active,
+    .nav-link.active:hover,
+    .nav-link.active:focus {
+      border: none;
+    }
+  }
+
+  .dropdown-menu {
+    margin-top: 0;
+  }
+}
+
+.dropdown-menu {
+  margin-top: 0;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0,0,0,.3);
+}
+
+// Indicators ==================================================================
+
+.alert {
+  padding-right: 2.5rem;
+  border: none;
+
+  &, h1, h2, h3, h4, h5, h6 {
+    color: #fff;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+
+  a:not(.btn),
+  .alert-link {
+    color: #fff;
+    font-weight: bold;
+  }
+
+  .close {
+    color: #fff;
+  }
+
+  &-secondary,
+  &-light {
+    &,
+    & a:not(.btn),
+    & .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+
+  &-secondary {
+    background-color: $gray-500;
+    color: $white;
+  }
+
+  &-light {
+    background-color: $gray-200;
+  }
+
+  &-warning {
+    color: $white;
+  }
+}
+
+.tag {
+  padding: 4px 6px 4px;
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+.close {
+  line-height: 0.5;
+  opacity: 0.6;
+  transition: all 0.2s;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.card {
+  box-shadow: 0 1px 4px rgba(0,0,0,.4);
+
+  &.border-primary,
+  &.border-secondary,
+  &.border-success,
+  &.border-info,
+  &.border-warning,
+  &.border-danger,
+  &.border-light,
+  &.border-dark {
+    border-width: 1px;
+  }
+}
+
+.alert-dismissible {
+  .close {
+    padding: 0.5rem 0.75rem;
+  }
+}
+
+.list-group {
+  &-item-action.active {
+    h1, h2, h3, h4, h5, h6 {
+      color: $white;
+    }
+  }
+}
+
+.modal-content {
+  border-radius: 0.2rem;
+  box-shadow: 0 6px 36px rgba(0,0,0,.3);
+}
+
+.popover {
+  border: none;
+  box-shadow: 0 1px 4px rgba(0,0,0,.3);
+}
+
+.carousel {
+  &-caption {
+    h1, h2, h3, h4, h5, h6 {
+      color: inherit;
+    }
+  }
+}

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

@@ -0,0 +1,136 @@
+// Materia 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #eee !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #bbb !default;
+$gray-600: #666 !default;
+$gray-700: #444 !default;
+$gray-800: #222 !default;
+$gray-900: #212121 !default;
+$black:    #000 !default;
+
+$blue:    #2196F3 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #e51c23 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ff9800 !default;
+$green:   #4CAF50 !default;
+$teal:    #20c997 !default;
+$cyan:    #9C27B0 !default;
+
+$primary:       $blue !default;
+$secondary:     $white !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $white !default;
+$dark:          $gray-800 !default;
+
+$yiq-contrasted-threshold:  170 !default;
+
+$enable-gradients: true;
+
+// Body
+
+$body-color:    $gray-700 !default;
+
+// Fonts
+
+$font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+
+$font-size-base: 0.8125rem !default;
+
+$font-weight-base: 400 !default;
+
+// Buttons
+
+$input-btn-padding-y:       0.8rem !default;
+$input-btn-padding-x:       1rem !default;
+
+// Forms
+
+$input-padding-y:                1rem !default;
+$input-padding-x:                0 !default;
+
+$input-padding-y-sm:             0 !default;
+$input-padding-x-sm:             0 !default;
+
+$input-padding-y-lg:             ($font-size-base * 1.25) !default;
+$input-padding-x-lg:             0 !default;
+
+$input-bg:                       transparent !default;
+$input-disabled-bg:              transparent !default;
+
+$input-color:                    $gray-600 !default;
+$input-border-color:             transparent !default;
+$input-border-width:             0rem !default;
+
+$input-border-radius:            0 !default;
+$input-border-radius-lg:         0 !default;
+$input-border-radius-sm:         0 !default;
+
+$input-placeholder-color:        rgba(0,0,0,0.4) !default;
+
+$input-group-addon-bg:           transparent !default;
+
+$custom-control-gutter:          1.75rem !default;
+
+$custom-control-indicator-focus-box-shadow: 0 !default;
+
+$custom-control-indicator-size:  1.25rem !default;
+$custom-control-indicator-bg:    $white;
+$custom-checkbox-indicator-border-radius: 2px !default;
+
+$custom-control-indicator-disabled-bg: $gray-100 !default;
+
+$custom-radio-indicator-icon-checked: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='4' fill='%232196F3'/%3E%3C/svg%3E") !default;
+
+$custom-select-border-radius:       0 !default;
+$custom-select-box-shadow:          none !default;
+
+// Navs
+
+$nav-link-disabled-color:       $gray-500 !default;
+
+$nav-tabs-border-color:         transparent !default;
+
+// Navbar
+
+$navbar-padding-y:                  0.7rem !default;
+
+$navbar-dark-color:                 rgba($white,.75) !default;
+$navbar-dark-hover-color:           $white !default;
+
+// Cards
+
+$card-border-width:                 0;
+$card-border-color:                 transparent;
+
+// Tooltips
+
+$tooltip-bg:                        $gray-700 !default;
+
+// Modals
+
+$modal-content-border-color:        transparent !default;
+
+// Progress bars
+
+$progress-height:               0.375rem !default;
+$progress-border-radius:        0 !default;
+
+// Close
+
+$close-font-size:             2.125rem !default;
+$close-font-weight:           300 !default;

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

@@ -0,0 +1,325 @@
+// Minty 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Montserrat&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+.navbar {
+  font-family: $headings-font-family;
+}
+
+.bg-dark {
+  background-color: $secondary !important;
+}
+
+.border-dark {
+  border-color: $secondary !important;
+}
+
+// Buttons =====================================================================
+
+.btn {
+  font-family: $headings-font-family;
+
+  &,
+  &:hover {
+    color: $white;
+  }
+
+  &-light,
+  &-light:hover {
+    color: $gray-700;
+  }
+
+  &-link,
+  &-link:hover {
+    color: $primary;
+  }
+
+  &-link.disabled:hover {
+    color: $gray-600;
+  }
+
+  &-outline-primary {
+    color: $primary;
+  }
+
+  &-outline-secondary {
+    color: $secondary;
+  }
+
+  &-outline-success {
+    color: $success;
+  }
+
+  &-outline-info {
+    color: $info;
+  }
+
+  &-outline-warning {
+    color: $warning;
+  }
+
+  &-outline-danger {
+    color: $danger;
+  }
+
+  &-outline-dark {
+    color: $dark;
+  }
+
+  &-outline-light {
+    color: $light;
+  }
+}
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+.table {
+
+  &-primary,
+  &-secondary,
+  &-success,
+  &-info,
+  &-warning,
+  &-danger {
+    color: #fff;
+  }
+
+  &-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;
+      }
+    }
+  }
+
+  .thead-dark th {
+    background-color: $primary;
+    border-color: $table-border-color;
+    font-family: $headings-font-family;
+  }
+}
+
+// Forms =======================================================================
+
+legend {
+  font-family: $headings-font-family;
+}
+
+// Navs ========================================================================
+
+.dropdown-menu {
+  font-family: $font-family-sans-serif;
+}
+
+.breadcrumb {
+  a {
+    color: $navbar-dark-color;
+  }
+
+  a:hover {
+    color: $white;
+    text-decoration: none;
+  }
+}
+
+// Indicators ==================================================================
+
+.alert {
+  color: $white;
+
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+  }
+
+  a,
+  .alert-link {
+    color: $white;
+  }
+
+  &-primary {
+    &, > th, > td {
+      background-color: $primary;
+    }
+  }
+
+  &-secondary {
+    &, > th, > td {
+      background-color: $secondary;
+    }
+  }
+
+  &-success {
+    &, > th, > td {
+      background-color: $success;
+    }
+  }
+
+  &-info {
+    &, > th, > td {
+      background-color: $info;
+    }
+  }
+
+  &-danger {
+    &, > th, > td {
+      background-color: $danger;
+    }
+  }
+
+  &-warning {
+    &, > th, > td {
+      background-color: $warning;
+    }
+  }
+
+  &-dark {
+    &, > th, > td {
+      background-color: $dark;
+    }
+  }
+
+  &-light {
+    &, > th, > td {
+      background-color: $light;
+    }
+  }
+
+  &-light {
+    &,
+    & a:not(.btn),
+    & .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  color: $white;
+
+  &-light {
+    color: $gray-700;
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+.card,
+.list-group-item {
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+  }
+}

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

@@ -0,0 +1,97 @@
+// Minty 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #f7f7f9 !default;
+$gray-300: #eceeef !default;
+$gray-400: #ced4da !default;
+$gray-500: #aaa !default;
+$gray-600: #888 !default;
+$gray-700: #5a5a5a !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #FF7851 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #FFCE67 !default;
+$green:   #56CC9D !default;
+$teal:    #20c997 !default;
+$cyan:    #6CC3D5 !default;
+
+$primary:       #78C2AD !default;
+$secondary:     #F3969A !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$yiq-contrasted-threshold: 250 !default;
+
+// Body
+
+$body-color:                $gray-600 !default;
+
+// Components
+
+$border-radius:               .4rem !default;
+$border-radius-lg:            .6rem !default;
+$border-radius-sm:            .3rem !default;
+
+// Fonts
+
+$headings-font-family:        "Montserrat", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$headings-color:              $gray-700 !default;
+
+// Tables
+
+$table-border-color:          rgba(0,0,0,0.05) !default;
+
+// Dropdowns
+
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $secondary !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white,.6) !default;
+$navbar-dark-hover-color:           $white !default;
+
+$navbar-light-color:                rgba($black,.3) !default;
+$navbar-light-hover-color:          $gray-700 !default;
+$navbar-light-active-color:         $gray-700 !default;
+$navbar-light-disabled-color:       rgba($black,.1) !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $primary !default;
+$pagination-border-color:           $primary !default;
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               $secondary !default;
+$pagination-hover-border-color:     $pagination-hover-bg !default;
+
+$pagination-active-bg:              $secondary !default;
+$pagination-active-border-color:    $pagination-active-bg !default;
+
+$pagination-disabled-color:         $white !default;
+$pagination-disabled-bg:            #CCE8E0 !default;
+$pagination-disabled-border-color:  $pagination-disabled-bg !default;
+
+// Breadcrumbs
+
+$breadcrumb-bg:                     $primary !default;
+$breadcrumb-divider-color:          $white !default;
+$breadcrumb-active-color:           $breadcrumb-divider-color !default;

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

@@ -0,0 +1,154 @@
+// Pulse 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+// Buttons =====================================================================
+
+.btn {
+
+  &:focus,
+  &:active,
+  &:active:focus,
+  &.active:focus {
+    outline: none;
+  }
+
+  &-secondary {
+    background-color: $white;
+    border-color: #ccc;
+    color: $gray-900;
+
+    &:hover {
+      background-color: $gray-300;
+      border-color: $gray-500;
+      color: $gray-900;
+    }
+
+    &.disabled {
+      background-color: $white;
+      border-color: lighten(#ccc, 5%);
+      color: lighten($gray-900, 5%);
+    }
+  }
+
+  &-warning {
+    color: $white;
+  }
+
+  &-primary:focus {
+    box-shadow: 0 0 5px lighten($primary, 10%);
+  }
+
+  &-secondary:focus {
+    box-shadow: 0 0 5px $gray-400;
+  }
+
+  &-success:focus {
+    box-shadow: 0 0 5px lighten($success, 10%);
+  }
+
+  &-info:focus {
+    box-shadow: 0 0 5px lighten($info, 10%);
+  }
+
+  &-warning:focus {
+    box-shadow: 0 0 5px lighten($warning, 10%);
+  }
+
+  &-danger:focus {
+    box-shadow: 0 0 5px lighten($danger, 10%);
+  }
+
+  &.disabled:focus {
+    box-shadow: none;
+  }
+
+}
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+.table .thead-dark th {
+  background-color: $secondary;
+  border-color: $table-border-color;
+}
+
+// Forms =======================================================================
+
+.form-control:focus {
+  box-shadow: 0 0 5px rgba(100,65,164,.4);
+}
+
+// Navs ========================================================================
+
+.nav-tabs {
+
+  .nav-link,
+  .nav-link.active, {
+    border-width: 0 0 1px 0;
+  }
+
+  .nav-link:hover,
+  .nav-link.active,
+  .nav-link.active:hover,
+  .nav-link.active:focus {
+    border-bottom: 1px solid $primary;
+  }
+
+  .nav-item + .nav-item {
+    margin-left: 0;
+  }
+}
+
+.breadcrumb {
+  &-item.active {
+    color: $gray-700;
+  }
+}
+
+// Indicators ==================================================================
+
+.badge {
+  padding-bottom: 0.4em;
+
+  &-secondary,
+  &-warning {
+    color: $white;
+  }
+}
+
+// Progress bars ===============================================================
+
+.progress {
+  height: 8px;
+}
+
+// Containers ==================================================================
+
+.list-group {
+
+  &-item {
+    color: rgba(255, 255, 255, 0.8);
+
+    &.active,
+    &:hover,
+    &:focus {
+      color: #fff;
+    }
+
+    &.active {
+      font-weight: bold;
+
+      &:hover {
+        background-color: $list-group-hover-bg;
+      }
+    }
+
+    &.disabled:hover {
+      color: $list-group-disabled-color;
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+// Pulse 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #fafafa !default;
+$gray-200: #F9F8FC !default;
+$gray-300: #EDEDED !default;
+$gray-400: #cbc8d0 !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #444 !default;
+$gray-800: #343a40 !default;
+$gray-900: #17141F !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #593196 !default;
+$pink:    #e83e8c !default;
+$red:     #FC3939 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #EFA31D !default;
+$green:   #13B955 !default;
+$teal:    #20c997 !default;
+$cyan:    #009CDC !default;
+
+$primary:       $purple !default;
+$secondary:     #A991D4 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-900 !default;
+
+// Options
+
+$enable-rounded: false !default;
+
+// Body
+
+$body-color:                $gray-700 !default;
+
+// Links
+
+$link-hover-color:          $primary !default;
+
+// Fonts
+
+$font-size-base:              0.875rem !default;
+
+// Tables
+
+$table-border-color:          rgba(0, 0, 0, 0.05) !default;
+
+// Forms
+
+$input-focus-border-color:              $primary !default;
+
+// Dropdowns
+
+$dropdown-link-color:               $gray-700 !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-tabs-border-color:             $gray-300 !default;
+$nav-tabs-link-hover-border-color:  $primary !default;
+
+// Navbar
+
+$navbar-padding-y:                  .7rem !default;
+
+$navbar-dark-hover-color:           rgba($white,.9) !default;
+$navbar-dark-active-color:          rgba($white,.9) !default;
+
+$navbar-light-color:                rgba($black,.4) !default;
+$navbar-light-active-color:         rgba($black,.7) !default;
+$navbar-light-disabled-color:       rgba($black,.2) !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-300 !default;
+$progress-bar-bg:                   $primary !default;
+
+// List group
+
+$list-group-bg:                     $gray-900 !default;
+$list-group-border-color:           transparent !default;
+
+$list-group-hover-bg:               lighten($list-group-bg, 10%) !default;
+$list-group-active-color:           $white !default;
+$list-group-active-bg:              $list-group-bg !default;
+
+$list-group-disabled-color:         lighten($list-group-bg, 30%) !default;

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

@@ -0,0 +1,235 @@
+// Sandstone 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+.bg-primary {
+  background-color: $dark !important;
+}
+
+.bg-dark {
+  background-color: $secondary !important;
+}
+
+.bg-light {
+  background-color: $gray-200 !important;
+}
+
+.sandstone {
+  font-size: 11px;
+  line-height: 22px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.navbar {
+  .nav-link {
+    @extend .sandstone;
+  }
+
+  &-form input,
+  &-form .form-control {
+    border: none;
+  }
+}
+
+// Buttons =====================================================================
+
+.btn {
+  @extend .sandstone;
+
+  &:hover {
+    border-color: transparent;
+  }
+
+  &-success,
+  &-warning {
+    color: $white;
+  }
+}
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+.table {
+  .thead-dark th {
+    background-color: $dark;
+  }
+}
+
+// Forms =======================================================================
+
+input,
+.form-control {
+  @include box-shadow(none);
+
+  &:focus {
+    @include box-shadow(none);
+  }
+}
+
+// Navs ========================================================================
+
+.nav-tabs {
+  .nav-link {
+    @extend .sandstone;
+    background-color: $gray-200;
+    border-color: $gray-300;
+  }
+
+  .nav-link,
+  .nav-link:hover,
+  .nav-link:focus {
+    color: $gray-600;
+  }
+
+  .nav-link.disabled,
+  .nav-link.disabled:hover,
+  .nav-link.disabled:focus {
+    background-color: $gray-200;
+    border-color: $gray-300;
+    color: $nav-link-disabled-color;
+  }
+}
+
+.nav-pills {
+  .nav-link {
+    @extend .sandstone;
+    border: 1px solid transparent;
+    color: $gray-600;
+  }
+
+  .nav-link.active,
+  .nav-link:hover,
+  .nav-link:focus {
+    background-color: $gray-200;
+    border-color: $gray-300;
+  }
+
+  .nav-link.disabled,
+  .nav-link.disabled:hover {
+    background-color: transparent;
+    border-color: transparent;
+    color: $gray-300;
+  }
+}
+
+
+.breadcrumb {
+  @extend .sandstone;
+  border: 1px solid $gray-300;
+}
+
+.pagination {
+  @extend .sandstone;
+
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+.dropdown-menu {
+  .dropdown-item {
+    @extend .sandstone;
+  }
+}
+
+// Indicators ==================================================================
+
+.alert {
+  color: #fff;
+
+  a,
+  .alert-link {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  &-primary {
+    &, > th, > td {
+      background-color: $primary;
+    }
+  }
+
+  &-secondary {
+    &, > th, > td {
+      background-color: $secondary;
+    }
+  }
+
+  &-success {
+    &, > th, > td {
+      background-color: $success;
+    }
+  }
+
+  &-info {
+    &, > th, > td {
+      background-color: $info;
+    }
+  }
+
+  &-danger {
+    &, > th, > td {
+      background-color: $danger;
+    }
+  }
+
+  &-warning {
+    &, > th, > td {
+      background-color: $warning;
+    }
+  }
+
+  &-dark {
+    &, > th, > td {
+      background-color: $dark;
+    }
+  }
+
+  &-light {
+    &, > th, > td {
+      background-color: $light;
+    }
+  }
+
+  &-light {
+    &,
+    & a:not(.btn),
+    & .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+
+  &-success,
+  &-warning {
+    color: $white;
+  }
+}
+
+.tooltip {
+  @extend .sandstone;
+}
+
+.close {
+  color: $gray-300;
+  opacity: 1;
+
+  &:hover {
+    color: darken($gray-300, 20%);
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================

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

@@ -0,0 +1,143 @@
+// Sandstone 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #F8F5F0 !default;
+$gray-300: #DFD7CA !default;
+$gray-400: #ced4da !default;
+$gray-500: #98978B !default;
+$gray-600: #8E8C84 !default;
+$gray-700: #495057 !default;
+$gray-800: #3E3F3A !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #325D88 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #d9534f !default;
+$orange:  #F47C3C !default;
+$yellow:  #ffc107 !default;
+$green:   #93C54B !default;
+$teal:    #20c997 !default;
+$cyan:    #29ABE0 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $orange !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-800 !default;
+
+$yiq-contrasted-threshold:  170 !default;
+
+// Body
+
+$body-color:                $gray-800 !default;
+
+// Links
+
+$link-color:                $success !default;
+
+// Fonts
+
+$font-family-sans-serif:      "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+$font-size-base:              0.875rem !default;
+
+$headings-font-weight:        400 !default;
+
+// Dropdowns
+
+$dropdown-link-color:               $gray-600 !default;
+$dropdown-link-hover-color:         $dropdown-link-color !default;
+$dropdown-link-hover-bg:            $gray-200 !default;
+
+$dropdown-link-active-color:        $dropdown-link-color !default;
+$dropdown-link-active-bg:           $dropdown-link-hover-bg !default;
+
+// Navs
+
+$nav-link-padding-x:                1rem !default;
+$nav-link-disabled-color:           $gray-300 !default;
+
+$nav-tabs-border-color:             $gray-300 !default;
+$nav-tabs-link-hover-border-color:  $gray-300 !default;
+$nav-tabs-link-active-bg:           $white !default;
+
+$nav-pills-link-active-color:       $gray-600 !default;
+$nav-pills-link-active-bg:          $gray-200 !default;
+
+// Navbar
+
+$navbar-dark-hover-color:           $white !default;
+
+$navbar-light-hover-color:          $black !default;
+$navbar-light-active-color:         $black !default;
+
+// Pagination
+
+$pagination-color:                  $gray-600 !default;
+$pagination-bg:                     $gray-200 !default;
+$pagination-border-color:           $gray-300 !default;
+
+$pagination-hover-color:            $pagination-color !default;
+
+$pagination-active-color:           $pagination-color !default;
+$pagination-active-bg:              $gray-300 !default;
+$pagination-active-border-color:    $gray-300 !default;
+
+$pagination-disabled-color:         $gray-300 !default;
+$pagination-disabled-bg:            $gray-200 !default;
+$pagination-disabled-border-color:  $pagination-border-color !default;
+
+// Cards
+
+$card-border-color:                 rgba($gray-300, .75) !default;
+$card-cap-bg:                       rgba($gray-200, .25) !default;
+
+// Popovers
+
+$popover-header-bg:                 $gray-200 !default;
+
+// Modals
+
+$modal-content-border-color:        $gray-300 !default;
+
+$modal-header-border-color:         $modal-content-border-color !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-300 !default;
+$progress-border-radius:            10px !default;
+$progress-bar-color:                $primary !default;
+
+// List group
+
+$list-group-border-color:           $gray-300 !default;
+
+$list-group-hover-bg:               $gray-200 !default;
+$list-group-active-color:           $body-color !default;
+$list-group-active-bg:              $gray-200 !default;
+$list-group-active-border-color:    $gray-300 !default;
+
+$list-group-disabled-color:         $gray-500 !default;
+$list-group-disabled-bg:            $white !default;
+
+$list-group-action-color:           $list-group-active-color !default;
+
+$list-group-action-active-color:    $list-group-active-color !default;
+$list-group-action-active-bg:       $gray-300 !default;
+
+// Close
+
+$close-text-shadow:                 none !default;
+

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

@@ -0,0 +1,134 @@
+// Simplex 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" !default;
+@import url($web-font-path);
+
+@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%);
+}
+
+// Navbar ======================================================================
+
+.navbar {
+  border-width: 1px;
+  border-style: solid;
+
+  &-fixed-top {
+    border-width: 0 0 1px 0;
+  }
+
+  &-fixed-bottom {
+    border-top-width: 1px 0 0 0;
+    border-style: solid;
+  }
+}
+
+.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(#fff, 6.5%);
+}
+
+// Buttons =====================================================================
+
+.btn-primary,
+.btn-primary:hover {
+  @include btn-shadow($primary);
+}
+
+.btn-secondary,
+.btn-secondary:hover {
+  @include btn-shadow($secondary);
+}
+
+.btn-secondary:focus,
+.btn-secondary:not([disabled]):not(.disabled):active,
+.btn-secondary:not([disabled]):not(.disabled).active {
+  box-shadow: 0 0 0 0.2rem rgba($gray-200, 0.5);
+}
+
+.btn-success,
+.btn-success:hover {
+  @include btn-shadow($success);
+}
+
+.btn-info,
+.btn-info:hover {
+  @include btn-shadow($info);
+}
+
+.btn-warning,
+.btn-warning:hover {
+  @include btn-shadow($warning);
+}
+
+.btn-danger,
+.btn-danger:hover {
+  @include btn-shadow($danger);
+}
+
+.btn-dark,
+.btn-dark:hover {
+  @include btn-shadow($dark);
+}
+
+.btn-light,
+.btn-light:hover {
+  @include btn-shadow($light);
+}
+
+.btn-outline-secondary {
+  border-color: $gray-400;
+  color: $gray-400;
+
+  &:hover {
+    background-color: $gray-400;
+    color: $white;
+  }
+}
+
+// Typography ==================================================================
+
+.text-secondary {
+  color: $gray-700 !important;
+}
+
+// Tables ======================================================================
+
+// Forms =======================================================================
+
+legend,
+label {
+  color: $headings-color;
+}
+
+// Navs =======================================================================
+
+.breadcrumb {
+  border: 1px solid darken(#fff, 6.5%);
+}
+
+.pagination {
+  .page-link:hover {
+    text-decoration: none;
+  }
+}
+
+// Indicators ==================================================================
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================

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

@@ -0,0 +1,108 @@
+// Simplex 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ddd !default;
+$gray-300: #ccc !default;
+$gray-400: #bbb !default;
+$gray-500: #adb5bd !default;
+$gray-600: #777 !default;
+$gray-700: #444 !default;
+$gray-800: #373a3c !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #9B479F !default;
+$pink:    #e83e8c !default;
+$red:     #D9230F !default;
+$orange:  #D9831F !default;
+$yellow:  #ffc107 !default;
+$green:   #469408 !default;
+$teal:    #20c997 !default;
+$cyan:    #029ACF !default;
+
+$primary:       $red !default;
+$secondary:     $white !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $purple !default;
+$danger:        $orange !default;
+$light:         $white !default;
+$dark:          $gray-800 !default;
+
+// Body
+
+$body-bg:                   #FCFCFC !default;
+
+// Fonts
+
+$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:              0.8125rem !default;
+
+// Dropdowns
+
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-link-padding-y:                .9rem !default;
+$nav-link-disabled-color:           $gray-400 !default;
+
+$nav-tabs-border-color:             darken(#fff, 6.5%) !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white,.75) !default;
+$navbar-dark-hover-color:           $white !default;
+
+// Pagination
+
+$pagination-border-color:           $nav-tabs-border-color !default;
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               $primary !default;
+$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;
+
+// Popovers
+
+$popover-border-color:              $nav-tabs-border-color !default;
+
+// Modals
+
+$modal-content-border-color:        $nav-tabs-border-color !default;
+
+$modal-header-border-color:         $nav-tabs-border-color !default;
+
+// Progress bars
+
+$progress-bar-color:                $primary !default;
+
+// List group
+
+$list-group-border-color:           $nav-tabs-border-color !default;
+
+$list-group-disabled-bg:            $nav-tabs-border-color !default;
+
+// Breadcrumbs
+
+$breadcrumb-bg:                     $white !default;

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

@@ -0,0 +1,492 @@
+// Sketchy 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Neucha|Cabin+Sketch&display=swap" !default;
+@import url($web-font-path);
+
+$border-radius-sketchy: 255px 25px 225px 25px/25px 225px 25px 255px;
+$border-radius-lg-sketchy: 555px 25px 15px 25px/25px 5px 35px 555px;
+$border-radius-sm-sketchy: 255px 25px 225px 25px/25px 225px 25px 255px;
+
+// Navbar ======================================================================
+
+.navbar {
+  border-width: 2px;
+  border-style: solid;
+  border-radius: 25px 25px 55px 5px/5px 55px 25px 25px;
+
+  &.bg-light {
+    border-color: $gray-800;
+  }
+
+  &.fixed-top {
+    border-radius: 0 25px 225px 0/25px 0 25px 255px;
+    border-width: 0 0 2px 0;
+  }
+
+  &.fixed-bottom {
+    border-radius: 255px 25px 0 25px/25px 225px 25px 0;
+    border-width: 2px 0 0 0;
+  }
+
+  &-brand {
+    font-family: $headings-font-family;
+    font-weight: normal;
+    text-decoration: none;
+  }
+}
+
+// Buttons =====================================================================
+
+.btn {
+  border-radius: $border-radius-sketchy;
+  text-decoration: none;
+
+  &-lg {
+    border-radius: $border-radius-lg-sketchy;
+  }
+
+  &-sm {
+    border-radius: $border-radius-sm-sketchy;
+  }
+}
+
+// Typography ==================================================================
+
+button, input, optgroup, select, textarea {
+  font-family: $font-family-sans-serif;
+}
+
+blockquote {
+  border-radius: 15px 27px 25px 25px/25px 25px 305px 635px;
+}
+
+// Tables ======================================================================
+
+table {
+  th,
+  td {
+    background-color: #fff;
+  }
+}
+
+.table-bordered {
+  background-color: $gray-800;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: 5px 25px 5px 25px/25px 5px 25px 5px;
+  overflow: hidden;
+
+  th,
+  td {
+    border-radius: 5px 5px 25px 4px/5px 4px 3px 5px;
+  }
+
+  .table-success,
+  .table-success:hover {
+    td, th {
+      background-color: $success;
+      color: $white;
+    }
+  }
+
+  .table-info,
+  .table-info:hover {
+    td, th {
+      background-color: $info;
+      color: $white;
+    }
+  }
+
+  .table-warning,
+  .table-warning:hover {
+    td, th {
+      background-color: $warning;
+      color: $white;
+    }
+  }
+
+  .table-danger,
+  .table-danger:hover {
+    td, th {
+      background-color: $danger;
+      color: $white;
+    }
+  }
+}
+
+.table-dark {
+  th,
+  td,
+  &.table-hover .table-active:hover > th,
+  &.table-hover .table-active:hover > td {
+    background-color: $gray-800;
+  }
+
+}
+
+
+// Forms =======================================================================
+
+input,
+.form-control,
+.input-group-text,
+.custom-file-label {
+  border-radius: $border-radius-sketchy;
+}
+
+textarea,
+textarea.form-control,
+select,
+select.form-control {
+  border-radius: $border-radius-lg-sketchy !important;
+}
+
+[type="checkbox"] {
+  position: relative;
+  appearance: none;
+  width: 0;
+  height: 0;
+  border: none;
+  cursor: pointer;
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: -1.2em;
+    top: -0.9em;
+    display: inline-block;
+    width: 15px;
+    height: 16px;
+    border: 2px solid $gray-800;
+    border-radius: 2px 8px 2px 4px / 5px 3px 5px 3px;
+  }
+
+  &:checked:after {
+    content: "x";
+    position: absolute;
+    left: -0.64em;
+    top: -0.48em;
+    font-size: 1.5rem;
+    line-height: 0.5;
+    color: $gray-800;
+  }
+
+  &:disabled {
+    &:before {
+      border: 2px solid $gray-500;
+    }
+  }
+}
+
+[type="radio"] {
+  position: relative;
+  appearance: none;
+  width: 0;
+  height: 0;
+  border: none;
+  cursor: pointer;
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: -1.2em;
+    top: -0.9em;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid $gray-800;
+    border-radius: 50% 45% 40% 50% / 40% 50% 50% 45%;
+  }
+
+  &:checked:before {
+    background-color: $gray-800;
+  }
+
+  &:disabled {
+    &:before {
+      border: 2px solid $gray-500;
+    }
+  }
+}
+
+.form-check-label {
+  padding-left: 2.5rem;
+}
+
+.form-check-inline {
+  [type="checkbox"] {
+    &:before {
+      left: 0;
+      top: 0;
+    }
+
+    &:after {
+      left: 0.14em;
+      top: 0.12em;
+    }
+  }
+
+  [type="radio"] {
+    &:before {
+      left: 0;
+      top: 0;
+    }
+  }
+
+  .form-check-label {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+// Navs ========================================================================
+
+.dropdown-menu {
+  border-radius: 555px 25px 25px 25px/25px 25px 25px 555px;
+  overflow: hidden;
+}
+
+.dropdown-divider {
+  border-top-width: 2px;
+}
+
+.list-group {
+  background-color: $gray-800;
+  border: 2px solid $gray-800;
+  border-radius: 45px 15px 35px 5px/15px 5px 15px 65px;
+  overflow: hidden;
+
+  &-item {
+    border-left: none;
+    border-right: none;
+    border-top: 2px solid $gray-800;
+    border-radius: 255px 5px 225px 5px/25px 225px 25px 255px;
+
+    &:first-child {
+      border-top: none;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+.nav-pills .nav-link, {
+  border-radius: $border-radius-sketchy;
+}
+
+.nav-link,
+.page-link,
+.list-group-item,
+.dropdown-item {
+  text-decoration: none;
+}
+
+.nav-tabs {
+  .nav-link {
+    border-radius: 45px 15px 225px 5px/25px 225px 25px 255px;
+  }
+}
+
+.breadcrumb {
+  border: 2px solid $gray-800;
+  border-radius: $border-radius-sketchy;
+}
+
+.pagination {
+  .page-link {
+    border-radius: 425px 255px 25px 25px/25px 25px 5px 25px;
+  }
+}
+
+// Indicators ==================================================================
+
+.progress {
+  border: 2px solid $gray-800;
+}
+
+.badge {
+  border-radius: $border-radius-sm-sketchy;
+
+  &-pill {
+    border-radius: 7rem 8rem 8rem 8rem / 4rem 5rem 6rem 6rem;
+  }
+
+  &-warning {
+    color: $white;
+  }
+}
+
+.alert {
+  border-radius: $border-radius-sketchy;
+
+  &-dismissible {
+    .close {
+      color: transparent;
+
+      &:before {
+        right: 1rem;
+        top: 0.8rem;
+      }
+    }
+
+    &.alert-success {
+      border-color: $success;
+
+      &,
+      .alert-link,
+      .close:before {
+        color: $success;
+      }
+    }
+
+    &.alert-info {
+      border-color: $info;
+
+      &,
+      .alert-link,
+      .close:before {
+        color: $info;
+      }
+    }
+
+    &.alert-warning {
+      border-color: $warning;
+
+      &,
+      .alert-link,
+      .close:before {
+        color: $warning;
+      }
+    }
+
+    &.alert-danger {
+      border-color: $danger;
+
+      &,
+      .alert-link,
+      .close:before {
+        color: $danger;
+      }
+    }
+  }
+}
+
+// Progress bars ===============================================================
+
+.progress {
+  border-radius: $border-radius-sm-sketchy;
+}
+
+// Containers ==================================================================
+
+.card {
+  border-radius: 5px 5px 5px 5px/25px 25px 25px 5px;
+
+  &-outline {
+    &-primary,
+    &-success,
+    &-info,
+    &-warning,
+    &-danger {
+      border-width: 2px;
+    }
+  }
+
+  &-header {
+    border-bottom-width: 2px;
+    border-color: inherit;
+
+    &:first-child {
+      border-radius: 3px 3px 0 0/23px 23px 0 0;
+    }
+  }
+
+  &-footer {
+    border-top-width: 2px;
+  }
+}
+
+.jumbotron {
+  border: 2px solid $gray-800;
+  border-radius: $border-radius-lg-sketchy;
+}
+
+.toast {
+  border-radius: 10px 10px 15px 5px/5px 15px 5px 15px;
+
+  &-header {
+    font-family: $headings-font-family;
+  }
+}
+
+.modal {
+  &-content {
+    border-radius: 15px 5px 5px 25px/5px 25px 25px 5px;
+  }
+}
+
+.popover {
+  padding: 0;
+  border-radius: 45px 85px 15px 25px/15px 10px 35px 555px;
+
+  &-title {
+    border-bottom: 2px solid $gray-800;
+  }
+
+  &.popover-left::before,
+  &.bs-tether-element-attached-right::before {
+    right: -13px;
+  }
+
+  &.popover-top::before,
+  &.bs-tether-element-attached-bottom::before {
+    bottom: -13px;
+  }
+
+  &.popover-bottom::before,
+  &.bs-tether-element-attached-top::before {
+    top: -13px;
+  }
+
+  &.popover-right::before,
+  &.bs-tether-element-attached-left::before {
+    left: -13px;
+  }
+}
+
+.tooltip {
+
+  &-inner {
+    border-radius: $border-radius-sm-sketchy;
+  }
+}
+
+pre {
+  border: 2px solid $gray-800;
+  border-radius: 15px 5px 5px 25px/5px 25px 25px 5px;
+}
+
+.close,
+.close:hover,
+.close:focus,
+.close:active {
+  opacity: 1;
+
+  &:before {
+    position: absolute;
+    content: "X";
+    color: $gray-800;
+  }
+}
+
+.img {
+  &-thumbnail {
+    border-radius: $border-radius-sketchy;
+  }
+}

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

@@ -0,0 +1,172 @@
+// Sketchy 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #f7f7f9 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ccc !default;
+$gray-500: #aaa !default;
+$gray-600: #868e96 !default;
+$gray-700: #555 !default;
+$gray-800: #333 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #28a745 !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$primary:       $gray-800 !default;
+$secondary:     $gray-700 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $white !default;
+$dark:          $gray-700 !default;
+
+$yiq-contrasted-threshold: 200 !default;
+
+// Links
+
+$link-decoration:           underline !default;
+
+// Components
+
+$border-width:                2px !default;
+
+$border-radius:          25px !default;
+$border-radius-lg:       35px !default;
+$border-radius-sm:       15px !default;
+
+// Fonts
+
+$font-family-sans-serif:      'Neucha', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+
+$font-weight-base:            700 !default;
+
+$headings-font-family:   'Cabin Sketch', cursive !default;
+
+$blockquote-small-color:      $gray-800 !default;
+
+// Tables
+
+$table-accent-bg:             $gray-400 !default;
+$table-hover-bg:              $white !default;
+
+$table-border-width:          2px !default;
+$table-border-color:          $gray-800 !default;
+
+// Forms
+
+$input-border-color:                    $gray-800 !default;
+
+$input-focus-border-color:              $input-border-color !default;
+
+// Dropdowns
+
+$dropdown-border-color:             $gray-800 !default;
+$dropdown-divider-bg:               $gray-800 !default;
+
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $gray-800 !default;
+
+// Navs
+
+$nav-tabs-border-color:             $gray-800 !default;
+$nav-tabs-link-hover-border-color:  $gray-800 !default;
+$nav-tabs-link-active-color:        $gray-800 !default;
+$nav-tabs-link-active-border-color: $gray-800 !default;
+
+// Navbar
+
+$navbar-dark-color:                 $white !default;
+$navbar-dark-hover-color:           $white !default;
+$navbar-dark-toggler-border-color:  $white !default;
+
+$navbar-light-color:                $gray-800 !default;
+$navbar-light-hover-color:          $gray-800 !default;
+$navbar-light-active-color:         $gray-800 !default;
+$navbar-light-toggler-border-color: $gray-800 !default;
+
+// Pagination
+
+$pagination-border-color:           $gray-800 !default;
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               $gray-800 !default;
+$pagination-hover-border-color:     $gray-800 !default;
+
+$pagination-disabled-color:         $gray-400 !default;
+$pagination-disabled-border-color:  $gray-800 !default;
+
+
+// Jumbotron
+
+$jumbotron-bg:                      transparent !default;
+
+// Cards
+
+$card-border-width:                 2px !default;
+$card-border-color:                 $gray-800 !default;
+
+// Popovers
+
+$popover-border-color:              $gray-800 !default;
+
+// Badges
+
+$badge-padding-y:                   0.5em !default;
+$badge-padding-x:                   1.2em !default;
+
+// Toasts
+
+$toast-border-width:                2px !default;
+$toast-border-color:                $gray-800 !default;
+
+$toast-header-color:                $gray-800 !default;
+$toast-header-border-color:         $toast-border-color !default;
+
+// Modals
+
+$modal-content-border-color:        $gray-800 !default;
+
+$modal-header-border-color:         $gray-800 !default;
+
+// Progress bars
+
+$progress-bg:                       $white !default;
+$progress-bar-bg:                   $gray-400 !default;
+
+// List group
+
+$list-group-border-color:           $gray-800 !default;
+
+$list-group-hover-bg:               $gray-300 !default;
+$list-group-active-color:           $white !default;
+$list-group-active-bg:              $gray-800 !default;
+
+$list-group-action-color:           $gray-800 !default;
+
+// Breadcrumbs
+
+$breadcrumb-bg:                     $white !default;
+$breadcrumb-divider-color:          $gray-800 !default;
+$breadcrumb-active-color:           $gray-800 !default;
+
+// Close
+
+$close-color:                       $white !default;
+$close-text-shadow:                 none !default;

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

@@ -0,0 +1,503 @@
+// Slate 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(lighten($color, 6%), $color, 60%, darken($color, 4%));
+  filter: none;
+}
+
+@mixin btn-shadow-inverse($color){
+  @include gradient-y-three-colors(darken($color, 18%), darken($color, 15%), 40%, darken($color, 13%));
+  filter: none;
+}
+
+// Navbar ======================================================================
+
+.navbar {
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+
+  .container {
+    padding: 0;
+  }
+
+  .navbar-toggler {
+    border-color: rgba(0, 0, 0, 0.6);
+  }
+
+  &-fixed-top {
+    border-width: 0 0 1px 0;
+  }
+
+  &-fixed-bottom {
+    border-width: 1px 0 0 0;
+  }
+
+  .nav-link {
+    padding: 1rem;
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+
+    &:hover,
+    &:focus {
+      @include btn-shadow-inverse($gray-800);
+      border-left: 1px solid rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  &-brand {
+    padding: 0.75rem 1rem calc(54px - 0.75rem - 30px);
+    margin-right: 0;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+  }
+
+  .nav-item.active .nav-link {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-left: 1px solid rgba(0, 0, 0, 0.2);
+  }
+
+  &-nav .nav-item + .nav-item {
+    margin-left: 0;
+  }
+
+  &.bg-light {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+
+    .nav-link {
+      &:hover,
+      &:focus {
+        @include btn-shadow-inverse($gray-600);
+        border-left: 1px solid rgba(0, 0, 0, 0.2);
+      }
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .navbar-expand-sm {
+    .navbar-brand,
+    .nav-link {
+      border: none !important;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-expand-md {
+    .navbar-brand,
+    .nav-link {
+      border: none !important;
+    }
+  }
+}
+
+@media (max-width: 992px) {
+  .navbar-expand-lg {
+    .navbar-brand,
+    .nav-link {
+      border: none !important;
+    }
+  }
+}
+
+// Buttons =====================================================================
+
+.btn {
+  border-color: rgba(0, 0, 0, 0.6);
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+
+  &:not([disabled]):not(.disabled).active,
+  &.disabled {
+    border-color: rgba(0, 0, 0, 0.6);
+    box-shadow: none;
+  }
+
+  &:hover,
+  &:focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled):active:hover,
+  &:not([disabled]):not(.disabled).active:hover {
+    border-color: rgba(0, 0, 0, 0.6);
+  }
+}
+
+.btn-primary {
+  @include btn-shadow($primary);
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active:hover,
+  &:not([disabled]):not(.disabled).active:hover {
+    @include btn-shadow-inverse($primary);
+  }
+}
+
+.btn-secondary {
+  @include btn-shadow($secondary);
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($secondary);
+  }
+}
+
+.btn-success {
+  @include btn-shadow($success);
+  color: $white;
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($success);
+  }
+}
+
+.btn-info {
+  @include btn-shadow($info);
+  color: $white;
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($info);
+  }
+}
+
+.btn-warning {
+  @include btn-shadow($warning);
+  color: $white;
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($warning);
+  }
+}
+
+.btn-danger {
+  @include btn-shadow($danger);
+
+  &:not([disabled]):not(.disabled):hover,
+  &:not([disabled]):not(.disabled):focus,
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    @include btn-shadow-inverse($danger);
+  }
+}
+
+.btn-outline {
+  &-primary {
+    color: #fff;
+  }
+}
+
+.btn-link,
+.btn-link:hover {
+  border-color: transparent;
+}
+
+.btn-group,
+.btn-group-vertical {
+
+  .btn.active {
+    border-color: rgba(0, 0, 0, 0.6);
+  }
+}
+
+// Typography ==================================================================
+
+h1, h2, h3, h4, h5, h6 {
+  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+}
+
+// Tables ======================================================================
+
+.table {
+
+  &-primary,
+  &-secondary,
+  &-success,
+  &-info,
+  &-warning,
+  &-danger {
+    color: #fff;
+  }
+
+  &-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 =======================================================================
+
+legend {
+  color: #fff;
+}
+
+.input-group-addon {
+  @include btn-shadow($secondary);
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+  color: $white;
+}
+
+// Navs ========================================================================
+
+.nav-tabs {
+
+  .nav-link {
+    @include btn-shadow-inverse($gray-800);
+    border: 1px solid rgba(0, 0, 0, 0.6);
+
+    &:not([disabled]):not(.disabled):hover,
+    &:not([disabled]):not(.disabled):focus,
+    &:not([disabled]):not(.disabled):active,
+    &:not([disabled]):not(.disabled).active {
+      @include btn-shadow($gray-800);
+    }
+
+    &.disabled {
+      border: 1px solid rgba(0, 0, 0, 0.6);
+    }
+  }
+
+  .nav-link,
+  .nav-link:hover {
+    color: #fff;
+  }
+}
+
+.nav-pills {
+
+  .nav-link {
+    @include btn-shadow($gray-800);
+    border: 1px solid rgba(0, 0, 0, 0.6);
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+    color: #fff;
+
+    &:hover {
+      @include btn-shadow-inverse($gray-800);
+      border: 1px solid rgba(0, 0, 0, 0.6);
+    }
+  }
+
+  .nav-link.active,
+  .nav-link:hover {
+    background-color: transparent;
+    @include btn-shadow-inverse($gray-800);
+    border: 1px solid rgba(0, 0, 0, 0.6);
+  }
+
+  .nav-link.disabled,
+  .nav-link.disabled:hover {
+    @include btn-shadow($gray-800);
+    color: $nav-link-disabled-color;
+  }
+}
+
+.pagination {
+
+  .page-link {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+    @include btn-shadow($gray-800);
+
+    &:hover {
+      @include btn-shadow-inverse($gray-800);
+      text-decoration: none;
+    }
+  }
+
+  .page-item.active .page-link {
+    @include btn-shadow-inverse($gray-800);
+  }
+
+  .page-item.disabled .page-link {
+    @include btn-shadow($gray-800);
+  }
+}
+
+.breadcrumb {
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+  background-color: transparent;
+  @include btn-shadow($gray-800);
+
+  a,
+  a:hover {
+    color: #fff;
+  }
+}
+
+// Indicators ==================================================================
+
+.alert {
+
+  .close {
+    color: $close-color;
+    text-decoration: none;
+  }
+}
+
+.alert {
+  border: none;
+  color: $white;
+
+  a,
+  .alert-link {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: $value;
+    }
+  }
+
+  &-light {
+    &,
+    & a:not(.btn),
+    & .alert-link {
+      color: $body-bg;
+    }
+  }
+}
+
+.badge {
+
+  &-success,
+  &-warning,
+  &-info {
+    color: $white;
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+.jumbotron {
+  border: 1px solid rgba(0, 0, 0, 0.6);
+}
+
+.list-group {
+
+  &-item:hover {
+    background-color: darken($gray-900, 5%);
+  }
+}

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

@@ -0,0 +1,176 @@
+// Slate 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #999 !default;
+$gray-600: #7A8288 !default;
+$gray-700: #52575C !default;
+$gray-800: #3A3F44 !default;
+$gray-900: #272B30 !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #ee5f5b !default;
+$orange:  #fd7e14 !default;
+$yellow:  #f89406 !default;
+$green:   #62c462 !default;
+$teal:    #20c997 !default;
+$cyan:    #5bc0de !default;
+
+$primary:       $gray-800 !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-900 !default;
+
+$yiq-contrasted-threshold:  170 !default;
+
+// Body
+
+$body-bg:                   $gray-900 !default;
+$body-color:                #aaa !default;
+
+// Links
+
+$link-color:                $white !default;
+
+// Fonts
+
+$font-size-base:              0.9375rem !default;
+
+// Tables
+
+$table-color:                 $white !default;
+$table-accent-bg:             rgba($white,.05) !default;
+$table-hover-bg:              rgba($white,.075) !default;
+
+$table-border-color:          rgba($black,.6) !default;
+
+$table-dark-border-color:     $table-border-color !default;
+$table-dark-color:            $white !default;
+
+// Buttons
+
+$input-btn-padding-y:         .25rem !default;
+$input-btn-padding-x:         1rem !default;
+
+// Forms
+
+$input-disabled-bg:                     #ccc !default;
+
+// Dropdowns
+
+$dropdown-bg:                       $gray-800 !default;
+$dropdown-border-color:             rgba($black, .6) !default;
+$dropdown-divider-bg:               rgba($black,.15) !default;
+
+$dropdown-link-color:               $body-color !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $body-bg !default;
+
+$dropdown-link-active-color:        $dropdown-link-hover-color !default;
+$dropdown-link-active-bg:           $dropdown-link-hover-bg !default;
+
+// Navs
+
+$nav-tabs-border-color:             rgba($black, 0.6) !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $white !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+// Navbar
+
+$navbar-padding-y:                  0 !default;
+
+$navbar-dark-hover-color:           $white !default;
+
+$navbar-light-hover-color:          $gray-800 !default;
+$navbar-light-active-color:         $gray-800 !default;
+
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     transparent !default;
+$pagination-border-color:           rgba($black, 0.6) !default;
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               transparent !default;
+$pagination-hover-border-color:     rgba($black, 0.6) !default;
+
+$pagination-active-bg:              transparent !default;
+$pagination-active-border-color:    rgba($black, 0.6) !default;
+
+$pagination-disabled-bg:            transparent !default;
+$pagination-disabled-border-color:  rgba($black, 0.6) !default;
+
+
+// Jumbotron
+
+$jumbotron-bg:                      darken($gray-900, 5%) !default;
+
+// Cards
+
+$card-border-color:                 rgba($black, 0.6) !default;
+$card-cap-bg:                       lighten($gray-800, 10%) !default;
+$card-bg:                           lighten($body-bg, 5%) !default;
+
+// Popovers
+
+$popover-bg:                        lighten($body-bg, 5%) !default;
+
+// Toasts
+
+$toast-background-color:            lighten($body-bg, 5%) !default;
+$toast-border-color:                rgba(0,0,0,.2) !default;
+
+$toast-header-color:                $body-color !default;
+$toast-header-background-color:     $toast-background-color !default;
+$toast-header-border-color:         $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg:                  lighten($body-bg, 5%) !default;
+
+$modal-header-border-color:         rgba(0,0,0,.2) !default;
+
+// Progress bars
+
+$progress-bg:                       darken($gray-900, 5%) !default;
+$progress-bar-color:                $gray-600 !default;
+
+// List group
+
+$list-group-bg:                     lighten($body-bg, 5%) !default;
+$list-group-border-color:           rgba($black, 0.6) !default;
+
+$list-group-hover-bg:               lighten($body-bg, 10%) !default;
+$list-group-active-color:           $white !default;
+$list-group-active-bg:              $list-group-hover-bg !default;
+$list-group-active-border-color:    $list-group-border-color !default;
+
+$list-group-disabled-color:         $gray-700 !default;
+
+$list-group-action-color:           $white !default;
+
+// Breadcrumbs
+
+$breadcrumb-active-color:           $gray-500 !default;
+
+// Code
+
+$pre-color:                         inherit !default;

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

@@ -0,0 +1,215 @@
+// Solar 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+// Buttons =====================================================================
+
+.btn {
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+.table {
+
+  &-primary,
+  &-secondary,
+  &-dark,
+  &-success,
+  &-info,
+  &-warning,
+  &-danger {
+    color: #fff;
+  }
+
+  &-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 =======================================================================
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  background: $primary;
+}
+
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: $primary;
+}
+
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+  background: $primary;
+  border-color: $primary;
+}
+
+.custom-switch {
+  .custom-control-label::after {
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  .custom-control-input:checked ~ .custom-control-label::after {
+    background-color: rgba(255, 255, 255, 0.75);
+  }
+}
+
+// Navs ========================================================================
+
+// Indicators ==================================================================
+
+.alert {
+  border: none;
+  color: $white;
+
+  a,
+  .alert-link {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+
+  &-light {
+    &,
+    & a:not(.btn),
+    & .alert-link {
+      color: $body-bg;
+    }
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================

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

@@ -0,0 +1,186 @@
+// Solar 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+// stylelint-disable
+$white:    #fff !default;
+$gray-100: #FDF6E3 !default;
+$gray-200: #EEE8D5 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #839496 !default;
+$gray-700: #495057 !default;
+$gray-800: #073642 !default;
+$gray-900: #002B36 !default;
+$black:    #000 !default;
+
+$blue:    #B58900 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #D33682 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #CB4B16 !default;
+$green:   #2AA198 !default;
+$teal:    #20c997 !default;
+$cyan:    #268BD2 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$enable-gradients: true;
+
+// Body
+
+$body-bg:                   $gray-900 !default;
+$body-color:                $gray-600 !default;
+
+// Links
+
+$link-color:                $success !default;
+$link-hover-color:          $link-color !default;
+
+// Components
+
+$component-active-color:      rgba(255,255,255,.75) !default;
+$component-active-bg:         $gray-800 !default;
+
+// Fonts
+
+$font-family-sans-serif:      'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default !default;
+
+// Tables
+
+$table-accent-bg:             rgba($white,.05) !default;
+$table-hover-bg:              rgba($white,.075) !default;
+
+$table-border-color:          $component-active-bg !default;
+
+$table-dark-bg:               $gray-500 !default;
+$table-dark-border-color:     darken($gray-500, 3%) !default;
+$table-dark-color:            $body-bg !default;
+
+// Forms
+
+$input-bg:                              #A9BDBD !default;
+$input-disabled-bg:                     #657B83 !default;
+
+$input-border-color:                    rgba($black,.15) !default;
+
+$input-placeholder-color:               #657B83 !default;
+
+$input-group-addon-color:               $gray-600 !default;
+$input-group-addon-bg:                  $gray-800 !default;
+
+// Dropdowns
+
+$dropdown-bg:                       $gray-800 !default;
+$dropdown-divider-bg:               $body-bg !default;
+
+$dropdown-link-color:               $body-color !default;
+$dropdown-link-hover-color:         rgba(255,255,255,.75) !default;
+$dropdown-link-hover-bg:            $body-bg !default;
+
+// Navs
+
+$nav-tabs-border-color:             $gray-800 !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $component-active-color !default;
+$nav-tabs-link-active-bg:           $body-bg !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+// Navbars
+
+$navbar-light-color:                rgba($black,.4) !default !default;
+$navbar-light-active-color:         rgba($black,.7) !default !default;
+
+// Pagination
+
+$pagination-bg:                     transparent !default;
+$pagination-border-color:           $gray-800 !default;
+
+$pagination-hover-bg:               $gray-800 !default;
+$pagination-hover-border-color:     $gray-800 !default;
+
+$pagination-active-color:           rgba(255,255,255,.75) !default;
+$pagination-active-bg:              $gray-800 !default;
+$pagination-active-border-color:    $gray-800 !default;
+
+$pagination-disabled-color:         $gray-800 !default;
+$pagination-disabled-bg:            transparent !default;
+$pagination-disabled-border-color:  $gray-800 !default;
+
+// Jumbotron
+
+$jumbotron-bg:                      $gray-800 !default;
+
+// Cards
+
+$card-border-color:                 rgba($gray-900, .95) !default;
+$card-cap-bg:                       rgba($gray-800, .25) !default;
+$card-bg:                           rgba($gray-200, .125) !default;
+
+// Popovers
+
+$popover-bg:                        $gray-800 !default;
+$popover-border-color:              $body-bg !default;
+
+$popover-header-bg:                 $gray-800 !default;
+
+// Toasts
+
+$toast-background-color:            lighten($body-bg, 5%) !default;
+$toast-border-color:                rgba(0,0,0,.2) !default;
+
+$toast-header-color:                $body-color !default;
+$toast-header-background-color:     $toast-background-color !default;
+$toast-header-border-color:         $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg:                  $gray-800 !default;
+$modal-content-border-color:        $body-bg !default;
+
+$modal-header-border-color:         $body-bg !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-800 !default;
+$progress-bar-color:                $primary !default;
+
+// List group
+
+$list-group-bg:                     transparent !default;
+$list-group-border-color:           $gray-800 !default;
+
+$list-group-hover-bg:               $gray-800 !default;
+$list-group-active-color:           rgba(255,255,255,.75) !default;
+
+$list-group-disabled-color:         $component-active-bg !default;
+$list-group-disabled-bg:            transparent !default;
+
+$list-group-action-color:           $body-color !default;
+$list-group-action-hover-color:     $component-active-color !default;
+
+// Breadcrumbs
+
+$breadcrumb-bg:                     $component-active-bg !default;
+
+// Close
+
+$close-color:                       $body-color !default;
+$close-text-shadow:                 none !default;
+
+// Code
+
+$pre-color:                         inherit !default;

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

@@ -0,0 +1,102 @@
+// Spacelab 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&display=swap" !default;
+@import url($web-font-path);
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(lighten($color, 15%), $color, 50%, darken($color, 4%));
+  filter: none;
+  border: 1px solid darken($color, 10%);
+}
+
+// Navbar ======================================================================
+
+.navbar {
+
+  .nav-link,
+  .navbar-brand {
+    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
+    transition: color ease-in-out .2s;
+  }
+
+  &.bg-primary {
+    @include btn-shadow(map-get($theme-colors, "primary"));
+  }
+
+  &.bg-dark {
+    @include btn-shadow(map-get($theme-colors, "secondary"));
+  }
+
+  &.bg-light {
+    @include btn-shadow(map-get($theme-colors, "light"));
+
+    .nav-link,
+    .navbar-brand {
+      text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
+    }
+
+    .navbar-brand {
+      color: $navbar-light-color;
+
+      &:hover {
+        color: $info;
+      }
+    }
+  }
+}
+
+// Buttons =====================================================================
+
+.btn {
+  text-shadow: -1px -1px 0 rgba(0, 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(darken($value, 4%));
+  }
+}
+
+[class*="btn-outline-"] {
+  text-shadow: none;
+}
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+// Forms =======================================================================
+
+// Navs ========================================================================
+
+// Indicators ==================================================================
+
+.badge {
+
+  &-secondary {
+    color: $white;
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+
+.card,
+.list-group-item {
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+  }
+}

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

@@ -0,0 +1,63 @@
+// Spacelab 4.5.0
+// Bootswatch
+
+//
+// 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;
+
+$yiq-contrasted-threshold: 200 !default;
+
+// Body
+
+$body-color:                $gray-600 !default;
+
+// Links
+
+$link-color:                $info !default;
+
+// Fonts
+
+$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;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white,.75) !default;
+$navbar-dark-hover-color:           $white !default;
+
+$navbar-light-color:                rgba($black,.4) !default;
+$navbar-light-hover-color:          $info !default;
+$navbar-light-active-color:         $info !default;

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

@@ -0,0 +1,270 @@
+// Superhero 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+.navbar {
+  font-size: $font-size-sm;
+}
+
+// Buttons =====================================================================
+
+.btn {
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
+
+// Typography ==================================================================
+
+.dropdown-menu {
+
+  font-size: $font-size-sm;
+}
+
+.dropdown-header {
+  font-size: $font-size-sm;
+}
+
+.blockquote-footer {
+  color: $body-color;
+}
+
+// Tables ======================================================================
+
+.table {
+  font-size: $font-size-sm;
+
+  .thead-dark th {
+    color: $white;
+  }
+
+  a:not(.btn) {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  .dropdown-menu a {
+    text-decoration: none;
+  }
+
+  .text-muted {
+    color: $text-muted;
+  }
+
+  &-dark {
+    color: #fff;
+  }
+
+  &-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 =======================================================================
+
+label,
+.radio label,
+.checkbox label,
+.help-block {
+  font-size: $font-size-sm;
+}
+
+// Navs ========================================================================
+
+.nav-tabs,
+.nav-pills {
+  .nav-link,
+  .nav-link:hover {
+    color: $body-color;
+  }
+
+  .nav-link.disabled {
+    color: $nav-link-disabled-color;
+  }
+}
+
+.page-link:hover,
+.page-link:focus {
+  color: #fff;
+  text-decoration: none;
+}
+
+// Indicators ==================================================================
+
+.alert {
+  border: none;
+  color: $white;
+
+  a,
+  .alert-link {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($white, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+}
+
+.badge {
+  &-warning,
+  &-info {
+    color: $white;
+  }
+}
+
+.close {
+  color: #fff;
+  text-shadow: none;
+  opacity: 0.5;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+// Progress bars ===============================================================
+
+// Popovers      ===============================================================
+
+.popover-header {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+// Containers ==================================================================
+
+.modal {
+  &-header,
+  &-footer {
+    background-color: $table-hover-bg;
+  }
+}

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

@@ -0,0 +1,166 @@
+// Superhero 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #EBEBEB !default;
+$gray-200: #4E5D6C !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #DF691A !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #d9534f !default;
+$orange:  #f0ad4e !default;
+$yellow:  #f0ad4e !default;
+$green:   #5cb85c !default;
+$teal:    #20c997 !default;
+$cyan:    #5bc0de !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         lighten($gray-200, 35%) !default;
+$dark:          $gray-200 !default;
+
+$yiq-contrasted-threshold:  185 !default;
+
+// Body
+
+$body-bg:                   #2B3E50 !default;
+$body-color:                $gray-100 !default;
+
+// Components
+
+$border-radius:               0px !default;
+$border-radius-lg:            0px !default;
+$border-radius-sm:            0px !default;
+
+// Fonts
+$font-family-sans-serif:      "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+$text-muted:                  rgba(255,255,255,.4) !default;
+
+// Tables
+
+$table-accent-bg:             rgba($white,.05) !default;
+$table-hover-bg:              rgba($white,.075) !default;
+
+$table-border-color:          rgba($black,.15) !default;
+
+$table-head-bg:               $light !default;
+
+$table-dark-bg:               $light !default;
+$table-dark-border-color:     $gray-200 !default;
+$table-dark-color:            $body-bg !default;
+
+// Forms
+
+$input-disabled-bg:                 $gray-100 !default;
+
+$input-border-color:                transparent !default;
+
+$input-group-addon-color:           $body-color !default;
+
+$custom-file-button-color:          $white !default;
+$custom-file-border-color:          $gray-200 !default;
+
+// Dropdowns
+
+$dropdown-bg:                       $gray-200 !default;
+$dropdown-divider-bg:               rgba($black,.15) !default;
+
+$dropdown-link-color:               $body-color !default;
+$dropdown-link-hover-color:         $dropdown-link-color !default;
+$dropdown-link-hover-bg:            $table-hover-bg !default;
+
+// Navs
+
+$nav-link-disabled-color:           rgba(255,255,255,.4) !default;
+
+$nav-tabs-border-color:             $gray-200 !default;
+$nav-tabs-link-active-color:        $body-color !default;
+$nav-tabs-link-active-border-color: $gray-200 !default;
+
+// Navbar
+
+$navbar-padding-y:                  0.7rem !default;
+
+$navbar-dark-color:                 rgba($white,.75) !default;
+$navbar-dark-hover-color:           $white !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $gray-200 !default;
+$pagination-border-color:           transparent !default;
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               $nav-link-disabled-color !default;
+$pagination-hover-border-color:     $pagination-border-color !default;
+
+$pagination-disabled-color:         $nav-link-disabled-color !default;
+$pagination-disabled-bg:            $pagination-bg !default;
+$pagination-disabled-border-color:  $pagination-border-color !default;
+
+// Cards
+
+$card-cap-bg:                       $table-hover-bg !default;
+$card-bg:                           $gray-200 !default;
+$card-inner-border-radius:          0px !default;
+
+// Popovers
+
+$popover-bg:                        $gray-200 !default;
+
+$popover-header-bg:                 $table-hover-bg !default;
+
+// Toasts
+
+$toast-background-color:            $gray-200 !default;
+$toast-border-color:                rgba(0,0,0,.2) !default;
+
+$toast-header-color:                $body-color !default;
+$toast-header-background-color:     $toast-background-color !default;
+$toast-header-border-color:         $toast-border-color !default;
+
+// Modals
+
+$modal-content-bg:                  $gray-200 !default;
+
+$modal-header-border-color:         rgba(0,0,0,.2) !default;
+
+// List group
+
+$list-group-bg:                     $gray-200 !default;
+$list-group-border-color:           transparent !default;
+
+$list-group-hover-bg:               $nav-link-disabled-color !default;
+
+$list-group-disabled-color:         $nav-link-disabled-color !default;
+
+$list-group-action-color:           $white !default;
+$list-group-action-hover-color:     $white !default;
+
+// Breadcrumbs
+
+$breadcrumb-divider-color:          $body-color !default;
+$breadcrumb-active-color:           $body-color !default;
+
+// Code
+
+$pre-color:                         inherit !default;

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

@@ -0,0 +1,26 @@
+// United 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+// Buttons =====================================================================
+
+// Typography ==================================================================
+
+// Tables ======================================================================
+
+// Forms =======================================================================
+
+// Navs ========================================================================
+
+// Indicators ==================================================================
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================

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

@@ -0,0 +1,53 @@
+// United 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #AEA79F !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #333 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #772953 !default;
+$pink:    #e83e8c !default;
+$red:     #DF382C !default;
+$orange:  #E95420 !default;
+$yellow:  #EFB73E !default;
+$green:   #38B44A !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$primary:       $orange !default;
+$secondary:     $gray-500 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $purple !default;
+
+$yiq-contrasted-threshold: 200 !default;
+
+// Body
+
+$body-color:                $gray-800 !default;
+
+// Fonts
+
+$font-family-sans-serif:      "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+// Tables
+
+$table-dark-bg:               $dark !default;
+$table-dark-border-color:     darken($dark, 5%) !default;

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

@@ -0,0 +1,542 @@
+// Yeti 4.5.0
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700&display=swap" !default;
+@import url($web-font-path);
+
+// Navbar ======================================================================
+
+.navbar {
+  font-size: $font-size-sm;
+  font-weight: $headings-font-weight;
+}
+
+.bg-primary {
+
+  .dropdown-menu {
+    background-color: $primary;
+
+    .dropdown-item,
+    .dropdown-item:focus {
+      color: $navbar-dark-color;
+    }
+
+    .dropdown-item.active,
+    .dropdown-item:hover,
+    .dropdown-item:focus {
+      background-color: darken($primary, 5%);
+      color: #fff;
+    }
+  }
+}
+
+.bg-dark {
+  background-color: $gray-800 !important;
+
+  .dropdown-menu {
+    background-color: $gray-800;
+
+    .dropdown-item,
+    .dropdown-item:focus {
+      color: $navbar-dark-color;
+    }
+
+    .dropdown-item.active,
+    .dropdown-item:hover,
+    .dropdown-item:focus  {
+      background-color: darken($gray-800, 5%);
+      color: #fff;
+    }
+  }
+}
+
+.bg-light {
+
+  .dropdown-menu {
+    background-color: $gray-200;
+
+    .dropdown-item,
+    .dropdown-item:focus {
+      color: $navbar-light-color;
+    }
+
+    .dropdown-item.active,
+    .dropdown-item:hover,
+    .dropdown-item:focus  {
+      background-color: lighten($gray-200, 5%);
+      color: $navbar-light-hover-color;
+    }
+  }
+}
+
+// Buttons =====================================================================
+
+.btn {
+  &-primary {
+    border-color: darken($primary, 5%);
+  }
+
+  &-secondary {
+    border-color: darken($secondary, 5%);
+  }
+
+  &-success {
+    border-color: darken($success, 5%);
+  }
+
+  &-info {
+    border-color: darken($info, 5%);
+    color: $white;
+  }
+
+  &-danger {
+    border-color: darken($danger, 5%);
+  }
+
+  &-warning {
+    border-color: darken($warning, 5%);
+    color: $white;
+  }
+
+  &-light {
+    border-color: darken($light, 5%);
+  }
+
+  &-dark {
+    border-color: darken($dark, 5%);
+  }
+}
+
+.btn-group {
+
+  .dropdown-menu {
+    border-top-width: 0;
+  }
+
+  .dropdown-toggle {
+
+    &.btn-primary ~ .dropdown-menu {
+      background-color: $primary;
+      border-color: darken($primary, 5%);
+
+      .dropdown-item {
+        color: $white;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: darken($primary, 8%);
+      }
+    }
+
+    &.btn-secondary ~ .dropdown-menu {
+      background-color: $secondary;
+      border-color: darken($secondary, 5%);
+
+      .dropdown-item {
+        color: $white;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: darken($secondary, 8%);
+      }
+    }
+
+    &.btn-success ~ .dropdown-menu {
+      background-color: $success;
+      border-color: darken($success, 5%);
+
+      .dropdown-item {
+        color: $white;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: darken($success, 8%);
+      }
+    }
+
+    &.btn-info ~ .dropdown-menu {
+      background-color: $info;
+      border-color: darken($info, 5%);
+
+      .dropdown-item {
+        color: $white;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: darken($info, 8%);
+      }
+    }
+
+    &.btn-warning ~ .dropdown-menu {
+      background-color: $warning;
+      border-color: darken($warning, 5%);
+
+      .dropdown-item {
+        color: $white;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: darken($warning, 8%);
+      }
+    }
+
+    &.btn-danger ~ .dropdown-menu {
+      background-color: $danger;
+      border-color: darken($primary, 5%);
+
+      .dropdown-item {
+        color: $white;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item:focus {
+        background-color: darken($danger, 8%);
+      }
+    }
+  }
+}
+
+// Typography ==================================================================
+
+.text-secondary {
+  color: $gray-700 !important;
+}
+
+.blockquote-footer {
+  color: $gray-600;
+}
+
+// Tables ======================================================================
+
+table {
+  font-size: $font-size-sm;
+}
+
+.table {
+
+  &-primary,
+  &-success,
+  &-info,
+  &-warning,
+  &-danger {
+    color: #fff;
+  }
+
+  &-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 =======================================================================
+
+label,
+.control-label,
+.help-block,
+.checkbox,
+.radio,
+.form-control-feedback {
+  font-size: $font-size-sm;
+}
+
+// Navs ========================================================================
+
+.dropdown-item {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-size: $font-size-sm;
+  font-weight: 300;
+}
+
+.nav-tabs {
+  .nav-link,
+  .nav-link.disabled,
+  .nav-link.disabled:hover,
+  .nav-link.disabled:focus {
+    border-color: $nav-tabs-border-color;
+    background-color: $gray-200;
+  }
+
+  .nav-link:hover,
+  .nav-link:focus {
+    background-color: lighten($gray-200, 5%);
+  }
+}
+
+.nav-pills {
+  .active {
+    border: 1px solid darken($primary, 5%);
+  }
+}
+
+.breadcrumb {
+  border: 1px solid $dropdown-border-color;
+  border-radius: 3px;
+  font-size: $font-size-sm;
+  font-weight: 300;
+  text-transform: uppercase;
+}
+
+.pagination {
+  font-weight: 300;
+
+  .page-link {
+    border-color: transparent;
+    border-radius: 3px;
+    margin-left: 0.1em;
+    margin-right: 0.1em;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  .page-item.disabled {
+    .page-link {
+      border-color: transparent;
+    }
+  }
+}
+
+.pagination,
+.pagination-lg,
+.pagination-sm {
+  .page-item:first-child,
+  .page-item:last-child {
+    .page-link {
+      border-radius: 3px;
+    }
+  }
+}
+
+.list-group {
+  font-size: $font-size-sm;
+  font-weight: 300;
+}
+
+// Indicators ==================================================================
+
+.close {
+  opacity: 0.6;
+  text-shadow: none;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.alert {
+  font-size: $font-size-sm;
+  font-weight: 300;
+  color: $white;
+
+  &-primary {
+    &, > th, > td {
+      background-color: $primary;
+    }
+  }
+
+  &-secondary {
+    &, > th, > td {
+      background-color: $secondary;
+    }
+  }
+
+  &-success {
+    &, > th, > td {
+      background-color: $success;
+    }
+  }
+
+  &-info {
+    &, > th, > td {
+      background-color: $info;
+    }
+  }
+
+  &-danger {
+    &, > th, > td {
+      background-color: $danger;
+    }
+  }
+
+  &-warning {
+    &, > th, > td {
+      background-color: $warning;
+    }
+  }
+
+  &-dark {
+    &, > th, > td {
+      background-color: $dark;
+    }
+  }
+
+  &-light {
+    &, > th, > td {
+      background-color: $light;
+    }
+  }
+
+  .alert-link {
+    font-weight: normal;
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  &-secondary,
+  &-light {
+    &,
+    & a:not(.btn),
+    & .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+.badge {
+  padding-bottom: .3em;
+
+  &-warning,
+  &-info {
+    color: $white;
+  }
+}
+
+// Progress bars ===============================================================
+
+.progress[value] {
+  height: 22px;
+  padding: 2px;
+  background-color: #f6f6f6;
+  border: 1px solid #ccc;
+  @include box-shadow(none);
+}
+
+
+// Popovers      ===============================================================
+
+.popover-header {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+// Containers ==================================================================
+

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

@@ -0,0 +1,114 @@
+// Yeti 4.5.0
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #eee !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ccc !default;
+$gray-500: #adb5bd !default;
+$gray-600: #888 !default;
+$gray-700: #495057 !default;
+$gray-800: #333 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #008cba !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #F04124 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #E99002 !default;
+$green:   #43ac6a !default;
+$teal:    #20c997 !default;
+$cyan:    #5bc0de !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-900 !default;
+
+$yiq-contrasted-threshold: 200 !default;
+
+// Components
+
+$border-radius:               0px !default;
+$border-radius-lg:            0px !default;
+$border-radius-sm:            0px !default;
+
+// Fonts
+
+$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:              0.9375rem !default;
+
+$headings-font-weight:        300 !default;
+
+// Buttons
+
+$input-btn-padding-x:         0.5rem !default;
+
+$btn-font-weight:             300 !default;
+
+// Dropdowns
+
+$dropdown-border-color:             rgba($black,.1) !default;
+$dropdown-divider-bg:               rgba($black,.1) !default;
+
+// Navs
+
+$nav-link-disabled-color:           $gray-400 !default;
+
+$nav-tabs-border-color:             $dropdown-border-color !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white,.7) !default;
+$navbar-dark-hover-color:           $white !default;
+
+// Pagination
+
+$pagination-color:                  $gray-600 !default;
+$pagination-border-color:           $nav-tabs-border-color !default;
+
+$pagination-active-border-color:    darken($primary, 5%) !default;
+
+$pagination-disabled-color:         $gray-200 !default;
+
+// Jumbotron
+
+$jumbotron-padding:                 4rem !default;
+
+// Cards
+
+$card-inner-border-radius:          0px !default;
+
+// Badges
+
+$badge-font-weight:                 300 !default;
+$badge-padding-x:                   1rem !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-400 !default;
+$progress-bar-color:                $white !default;
+
+// List group
+
+$list-group-disabled-bg:            $gray-200 !default;
+
+// Close
+
+$close-color:                       $gray-600 !default;
+$close-text-shadow:                 none !default;