feat: Bootstrap 5

package.json

@@ -106,7 +106,6 @@
     "@types/toastify-js": "^1.11.1",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
-    "bootstrap-v4": "npm:bootstrap@^4.6.2",
     "eslint": "^8.40.0",
     "eslint-plugin-inferno": "^7.32.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",

src/assets/css/main.css

@@ -36,7 +36,7 @@
   margin-top: -10px;
 }
 
-.custom-select {
+.form-select {
   -moz-appearance: none;
 }
 
@@ -266,6 +266,14 @@ hr {
   -ms-transform: scale(1.2);
 }
 
+/**
+ * TODO: Fix this in markup rather than this overly specific selector:
+ * https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons
+ */
+.btn.d-block + .btn.d-block {
+  margin-top: 0.5rem;
+}
+
 .mini-overlay {
   position: absolute;
   top: 0;

src/assets/css/themes/_variables.darkly-red.scss

@@ -4,10 +4,4 @@ $primary: $blue;
 $secondary: #444;
 $light: $gray-800;
 
-$theme-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "light": $light,
-);
-
 $link-color: $red;

src/assets/css/themes/_variables.darkly.scss

@@ -1,3 +1,5 @@
+@import "./variables";
+
 // Colors
 $white: #fff;
 $gray-200: #ebebeb;
@@ -8,48 +10,21 @@ $gray-700: #444;
 $gray-800: #303030;
 $gray-900: #222;
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$grays: (
-  "gray-200": $gray-200,
-  "gray-600": $gray-600,
-  "gray-700": $gray-700,
-  "gray-800": $gray-800,
-  "gray-900": $gray-900,
-);
-
 $blue: #375a7f;
 $red: #e74c3c;
 $yellow: #f39c12;
 $green: #00bc8c;
 $cyan: #3498db;
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$colors: (
-  "blue": $blue,
-  "red": $red,
-  "yellow": $yellow,
-  "green": $green,
-  "cyan": $cyan,
-);
-
 $primary: $green;
 $secondary: $gray-700;
 $success: $green;
 $dark: $gray-300;
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$theme-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "dark": $dark,
-);
-
 $body-color: $gray-300;
 $body-bg: $gray-900;
 $link-color: $success;
+$border-color: rgba($body-color, 0.25);
 $mark-bg: #333;
 $text-muted: $gray-600;
 $yiq-contrasted-threshold: 175;
@@ -94,7 +69,6 @@ $input-group-addon-bg: $gray-700;
 
 $hr-border-color: rgba($body-color, 0.25);
 
-$table-accent-bg: $gray-800;
 $table-border-color: $gray-700;
 
 $custom-file-color: $gray-500;

src/assets/css/themes/_variables.litely-red.scss

@@ -2,8 +2,3 @@
 
 $secondary: #c80000;
 $danger: darken($primary, 24%);
-
-$theme-colors: (
-  "secondary": $secondary,
-  "danger": $danger,
-);

src/assets/css/themes/_variables.litely.scss

@@ -1,58 +1,30 @@
+@import "./variables";
+
 // Colors
 $gray-100: #f8f9fa;
-$gray-200: #e9ecef;
 $gray-600: #6c757d;
 $gray-700: #495057;
 $gray-800: #343a40;
 $gray-900: #212529;
 $black: #222;
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$grays: (
-  "gray-200": $gray-200,
-  "gray-600": $gray-600,
-  "gray-700": $gray-700,
-  "gray-800": $gray-800,
-  "gray-900": $gray-900,
-);
-
 $blue: #007bff;
 $indigo: #6610f2;
 $red: #d8486a;
 $orange: #f1641e;
-$green: #00c853;
+$green: #00a846;
 $cyan: #02bdc2;
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$colors: (
-  "red": $red,
-  "orange": $orange,
-  "cyan": $cyan,
-  "green": $green,
-);
-
 $primary: $orange;
 $secondary: $green;
 $success: $indigo;
 $info: $blue;
 $danger: darken($primary, 25%);
 
-// Writing these maps is necessary for Bootstrap theming:
-// https://getbootstrap.com/docs/4.6/getting-started/introduction/
-$theme-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "success": $success,
-  "info": $info,
-  "danger": $danger,
-);
-
 $body-color: $gray-700;
 $body-bg: #fff;
 $link-color: $primary;
-$border-color: $gray-700;
+$border-color: rgba($body-color, 0.25);
 $mark-bg: rgb(255, 252, 239);
 $headings-color: $gray-700;
 

src/assets/css/themes/_variables.scss

@@ -0,0 +1,6 @@
+$link-decoration: none;
+$min-contrast-ratio: 3;
+
+$container-max-widths: (
+  lg: 1140px,
+);