🎨 Toast Finished

public/bs-theme.css

@@ -74,14 +74,10 @@ DOC
   --base-dark: #5a595a;
   --bg-tone: #ced2d6;
 
-  --font-interaction: "Minecraft Ten", system-ui, -apple-system, "Segoe UI",
-    Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --bs-font-monospace: "Minecraft Ten", SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
-  --font-sans-serif: "Minecraft Five", system-ui, -apple-system, "Segoe UI",
+  --font-interaction: "Minecraft Five", system-ui, -apple-system, "Segoe UI",
     Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans-serif: var(--bs-font-sans-serif);
   --bs-font-monospace: "Minecraft Ten", SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
   --bs-border-radius: 0;
@@ -144,14 +140,20 @@ body {
   background-color: var(--bg-tone);
 }
 
+.toast-header {
+  font-family: var(--font-interaction);
+  color: var(--font)
+}
+
 .outline {
   outline: 4px solid var(--outline);
   border-bottom: 8px solid var(--base-dark);
 }
 
 .card,
 .alert,
-.dropdown-menu {
+.dropdown-menu,
+.toast {
   padding: 1rem;
   background-color: var(--base-tone);
   outline: 4px solid var(--outline);
@@ -161,6 +163,8 @@ body {
   color: var(--font);
   --bs-dropdown-border-color: none;
   --bs-dropdown-link-hover-bg: var(--base-light);
+  --bs-toast-border-color: none;
+  --bs-toast-header-bg: var(--base-light);
 }
 
 .modal-content {
@@ -395,4 +399,4 @@ body {
   border-block: 4px solid var(--white-light);
   border-radius: 0;
   color: var(--black-tone);
-}
+}

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Bootstrap from "../layouts/Bootstrap.astro";
 import Form from "../components/Form.astro";
+import bootstrap from "bootstrap";
 ---
 
 <Bootstrap title="Index" theme="dark">
@@ -218,7 +219,8 @@ import Form from "../components/Form.astro";
       </div>
     </div>
 
-    <div class="toast-container position-fixed top-0 end-0 p-3">
+    <div
+      class="toast-container position-fixed top-0 end-0 p-3">
       <div
         id="liveToast"
         class="toast"
@@ -294,7 +296,16 @@ import Form from "../components/Form.astro";
     <div class="card-body"><Form /></div>
   </div>
 
-  <script is:inline>
+  <script type="importmap">
+    {
+      "imports": {
+        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/esm/popper.min.js",
+        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
+      }
+    }
+  </script>
+
+  <script type="module">
     const toastTrigger = document.getElementById("liveToastBtn");
     const toastLiveExample = document.getElementById("liveToast");