brut: new theme

Gruntfile.js

@@ -6,6 +6,7 @@ const autoprefixer = require('autoprefixer');
 const pkg = require('./package.json');
 
 const SWATCHES = [
+  'brut',
   'cerulean',
   'cosmo',
   'cyborg',

dist/brut/_bootswatch.scss

@@ -0,0 +1,334 @@
+// Brut 5.3.3
+// Bootswatch
+
+
+// Variables
+
+:root {
+  --#{$prefix}border-width: 2px;
+  --#{$prefix}border-color: #000;
+}
+
+[data-bs-theme=light],
+[data-bs-theme=dark] {
+  --#{$prefix}border-color: #000;
+}
+
+// $text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
+
+// Mixins
+
+@mixin btn-shadow(){
+  box-shadow: 3px 3px 0 0 var(--#{$prefix}border-color);
+}
+
+.table {
+  border: 2px solid $black;
+}
+
+// Typography
+
+a {
+  font-weight: $headings-font-weight;
+}
+
+// Navbar
+
+.navbar {
+  $navbar-border-width: 2px;
+  font-size: $font-size-lg;
+  font-weight: $headings-font-weight;
+
+  border: $navbar-border-width solid $black;
+
+  &.fixed-top {
+    border-width: 0 0 $navbar-border-width 0;
+  }
+
+  &.fixed-bottom {
+    border-width: $navbar-border-width 0 0 0;
+  }
+
+  .dropdown-toggle::after {
+    margin-left: 0.15em;
+    vertical-align: 0.15em;
+  }
+
+  &-toggler {
+    --bs-border-width: 2px;
+  }
+}
+
+// .navbar {
+//   @each $color, $value in $theme-colors {
+//     &.bg-#{$color} {
+//       @include btn-shadow($value);
+//     }
+//   }
+// }
+
+// .navbar-brand,
+// .nav-link {
+//   text-shadow: $text-shadow;
+// }
+
+// Buttons
+
+.btn {
+  border-color: $black;
+  margin: 3px 0 0 3px;
+  @include btn-shadow();
+  transform: translate(-3px, -3px);
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: $black;
+    box-shadow: none;
+    transform: translate(0, 0);
+  }
+
+  &.disabled {
+    border-color: $black;
+  }
+
+  &-link,
+  &-link:hover {
+    color: $black;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    background-color: #{$value};
+    box-shadow: none;
+    transform: translate(0, 0);
+    color: $black;
+
+    &:hover {
+      @include btn-shadow();
+      transform: translate(-3px, -3px);
+    }
+  }
+
+  .btn-check + .btn-#{$color},
+  .btn-check + .btn-outline-#{$color} {
+    &:hover {
+      background-color: #{$value};
+    }
+  }
+}
+
+.btn-outline-dark {
+  color: $white;
+}
+
+.btn-group,
+.btn-group-vertical {
+  .btn {
+    &:hover,
+    &:focus {
+      z-index: 0;
+    }
+  }
+
+  > .btn-check:checked + .btn {
+    z-index: 0;
+  }
+}
+
+.btn-check + .btn {
+  border-color: $black;
+  @include btn-shadow();
+  transform: translate(-3px, -3px);
+}
+
+.btn-check + .btn:hover {
+  border-color: $black;
+  color: $black;
+}
+
+.btn-check:checked + .btn,
+:not(.btn-check) + .btn:active,
+.btn:first-child:active, .btn.active, .btn.show {
+  border-color: $black;
+  box-shadow: none;
+  transform: translate(0, 0);
+}
+
+// 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;
+//   }
+// }
+
+// Forms
+
+.form-range {
+
+  &:not([disabled])::-moz-range-progress {
+    height: 0.6rem;
+    background-color: $primary;
+    border-radius: 6px 0 0 6px;
+  }
+
+  &:not([disabled])::-ms-fill-lower {
+    height: 0.6rem;
+    background-color: $primary;
+    border-radius: 6px 0 0 6px;
+  }
+
+  &::-webkit-slider-runnable-track {
+    border: 2px solid $black;
+  }
+
+  &::-moz-range-track {
+    border: 2px solid $black;
+  }
+
+  &::-webkit-slider-thumb {
+    margin-top: -0.4rem;
+  }
+
+  &::-moz-range-thumb {
+    margin-top: -0.4rem;
+  }
+
+  &:focus::-webkit-slider-thumb {
+    box-shadow: none;
+  }
+
+  &:focus::-moz-range-thumb {
+    box-shadow: none;
+  }
+}
+
+// Navs
+
+.nav-tabs {
+  gap: 4px;
+  padding: 0.4rem 0.4rem calc(0.4rem + 2px);
+  border: 2px solid $black;
+  border-radius: $border-radius-lg;
+
+  font-weight: $headings-font-weight;
+
+  .nav-link {
+    border-width: 2px;
+    border-radius: $border-radius;
+
+    &.active,
+    &:hover {
+      border: 2px solid $black;
+    }
+
+  }
+}
+
+.tab-content {
+  margin-top: 1rem;
+  padding: 1rem;
+  border: 2px solid $black;
+  border-radius: $border-radius-lg;
+}
+
+.nav-pills {
+  gap: 4px;
+  font-weight: $headings-font-weight;
+
+  .nav-link {
+    border: 2px solid $black;
+  }
+}
+
+.breadcrumb {
+  border: 2px solid $black;
+  font-weight: $headings-font-weight;
+
+  a {
+    color: $black;
+  }
+}
+
+.dropdown-menu {
+  @include btn-shadow();
+  border-radius: $border-radius;
+}
+
+.dropdown-header {
+  font-weight: 700;
+}
+
+
+
+@each $color, $value in $theme-colors {
+  .list-group-item-#{$color} {
+    background-color: #{$value};
+    border-color: $black;
+    color: $black;
+  }
+}
+
+.list-group-item-dark {
+  color: $white;
+}
+
+
+// Indicators
+
+.alert {
+  border: 2px solid $black;
+  @include btn-shadow();
+  color: $black;
+}
+
+.alert-link {
+  color: $black;
+}
+
+.alert-dark {
+  color: $white;
+}
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    background-color: #{$value};
+  }
+}
+
+.badge {
+  border: 2px solid $black;
+
+  &.bg-dark {
+    color: $white;
+  }
+}
+
+.progress {
+  border: 2px solid $black;
+
+  &-bar {
+    border-right: 2px solid $black;
+  }
+}
+
+.modal {
+  &-content {
+    @include btn-shadow();
+  }
+}