si · si · Sep 2, 2025
diff --git a/src/_includes/delete-snapshot-confirmation.njk b/src/_includes/delete-snapshot-confirmation.njk
@@ -0,0 +1,35 @@
+{% comment %}
+  Delete Snapshot Confirmation Template
+  A UIKit-styled confirmation dialog for deleting snapshots
+{% endcomment %}
+
+<div class="delete-snapshot-confirmation" role="dialog" aria-labelledby="delete-snapshot-title" aria-describedby="delete-snapshot-message">
+  <div class="delete-snapshot-confirmation__content">
+    <div class="delete-snapshot-confirmation__header">
+      <div class="delete-snapshot-confirmation__icon">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.11 3.89 23 5 23H19C20.11 23 21 22.11 21 21V9ZM19 21H5V3H13V9H19V21Z" fill="currentColor"/>
+          <path d="M12 8C13.1 8 14 8.9 14 10C14 11.1 13.1 12 12 12C10.9 12 10 11.1 10 10C10 8.9 10.9 8 12 8ZM12 14C14.21 14 16 15.79 16 18V20H8V18C8 15.79 9.79 14 12 14Z" fill="currentColor"/>
+        </svg>
+      </div>
+      <h2 id="delete-snapshot-title" class="delete-snapshot-confirmation__title">
+        Delete Snapshot
+      </h2>
+    </div>
+
+    <div class="delete-snapshot-confirmation__body">
+      <p id="delete-snapshot-message" class="delete-snapshot-confirmation__message">
+        Are you sure you want to delete this snapshot? This action cannot be undone.
+      </p>
+    </div>
+
+    <div class="delete-snapshot-confirmation__actions">
+      <button type="button" class="tdbc-button tdbc-button-outlined delete-snapshot-confirmation__cancel" data-action="cancel">
+        Cancel
+      </button>
+      <button type="button" class="tdbc-button tdbc-button--danger delete-snapshot-confirmation__confirm" data-action="confirm">
+        Delete Snapshot
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/css/_delete-snapshot-confirmation.scss b/src/css/_delete-snapshot-confirmation.scss
@@ -0,0 +1,140 @@
+@use "theme" as *;
+@use "sass:math";
+
+.delete-snapshot-confirmation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 1rem;
+
+  &__content {
+    background-color: #fff;
+    border-radius: $tdbc-border-radius;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    max-width: 500px;
+    width: 100%;
+    overflow: hidden;
+    animation: slideIn 0.3s ease-out;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.5rem 1.5rem 1rem;
+    border-bottom: 1px solid scale-color(tdbc-color("light"), $lightness: -10%);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: scale-color(tdbc-color("warning"), $lightness: 90%);
+    color: tdbc-color("warning");
+    flex-shrink: 0;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: tdbc-color("dark");
+    line-height: 1.2;
+  }
+
+  &__body {
+    padding: 1.5rem;
+  }
+
+  &__message {
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: tdbc-color("dark");
+    margin-bottom: 0.5rem;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    padding: 1rem 1.5rem 1.5rem;
+    background-color: scale-color(tdbc-color("light"), $lightness: 50%);
+  }
+
+  &__cancel {
+    min-width: 100px;
+  }
+
+  &__confirm {
+    min-width: 140px;
+    background-color: tdbc-color("danger");
+    border-color: tdbc-color("danger");
+
+    &:hover,
+    &:focus {
+      background-color: scale-color(tdbc-color("danger"), $lightness: -10%);
+      border-color: scale-color(tdbc-color("danger"), $lightness: -10%);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 3px scale-color(tdbc-color("danger"), $lightness: -30%);
+    }
+  }
+}
+
+// Animation for modal entrance
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 600px) {
+  .delete-snapshot-confirmation {
+    padding: 0.5rem;
+
+    &__content {
+      max-width: none;
+    }
+
+    &__header {
+      padding: 1rem 1rem 0.75rem;
+    }
+
+    &__body {
+      padding: 1rem;
+    }
+
+    &__actions {
+      padding: 0.75rem 1rem 1rem;
+      flex-direction: column;
+
+      .tdbc-button {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  }
+}
diff --git a/src/css/_theme.scss b/src/css/_theme.scss
@@ -19,6 +19,8 @@ $tdbc-colors: map-merge(
     "light": #fff,
     "dark": rgba(0 0 0 / 87%),
     "gray": $tdbc-color-gray,
+    "danger": #dc3545,
+    "warning": #ffc107,
   )
 );
 
@@ -32,7 +34,7 @@ $tdbc-ink-colors: "primary", "secondary", "text", "gray", "light", "dark" !defau
 // Add/remove to selectively generate `background` (text color) classes
 $tdbc-background-colors: "primary", "secondary", "background", "gray", "light" !default;
 
-$tdbc-button-variants: "primary", "secondary", "light", "gray" !default;
+$tdbc-button-variants: "primary", "secondary", "light", "gray", "danger" !default;
 $tdbc-link-color: tdbc-color("primary") !default;
 $tdbc-border-radius: 8px !default;
 

diff --git a/src/css/style.scss b/src/css/style.scss
@@ -8,3 +8,4 @@
 @use "sticker";
 @use "prism";
 @use "utilities";
+@use "delete-snapshot-confirmation";
diff --git a/src/pages/delete-snapshot-demo.md b/src/pages/delete-snapshot-demo.md
@@ -0,0 +1,85 @@
+---
+title: "Delete Snapshot Confirmation Demo"
+description: "Demo page showing the UIKit-styled delete snapshot confirmation dialog"
+layout: page
+---
+
+# Delete Snapshot Confirmation Demo
+
+This page demonstrates the UIKit-styled delete snapshot confirmation dialog.
+
+## Usage
+
+To use the delete snapshot confirmation template, include it in your Nunjucks template:
+
+```njk
+{% include "delete-snapshot-confirmation.njk" %}
+```
+
+## Features
+
+- **UIKit Styling**: Modern, clean design with proper spacing and typography
+- **Warning Icon**: Prominent warning icon at the start of the message
+- **Primary Button**: Delete button styled as a primary action with danger styling
+- **Responsive Design**: Works well on mobile and desktop devices
+- **Accessibility**: Proper ARIA labels and semantic HTML
+- **Animation**: Smooth entrance animation for better UX
+
+## Example
+
+<button type="button" class="tdbc-button" onclick="showDeleteConfirmation()">
+  Show Delete Confirmation
+</button>
+
+<div id="delete-confirmation-demo" class="delete-snapshot-confirmation" style="display: none;">
+  <div class="delete-snapshot-confirmation__content">
+    <div class="delete-snapshot-confirmation__header">
+      <div class="delete-snapshot-confirmation__icon">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.11 3.89 23 5 23H19C20.11 23 21 22.11 21 21V9ZM19 21H5V3H13V9H19V21Z" fill="currentColor"/>
+          <path d="M12 8C13.1 8 14 8.9 14 10C14 11.1 13.1 12 12 12C10.9 12 10 11.1 10 10C10 8.9 10.9 8 12 8ZM12 14C14.21 14 16 15.79 16 18V20H8V18C8 15.79 9.79 14 12 14Z" fill="currentColor"/>
+        </svg>
+      </div>
+      <h2 id="delete-snapshot-title" class="delete-snapshot-confirmation__title">
+        Delete Snapshot
+      </h2>
+    </div>
+
+    <div class="delete-snapshot-confirmation__body">
+      <p id="delete-snapshot-message" class="delete-snapshot-confirmation__message">
+        Are you sure you want to delete this snapshot? This action cannot be undone.
+      </p>
+    </div>
+
+    <div class="delete-snapshot-confirmation__actions">
+      <button type="button" class="tdbc-button tdbc-button-outlined delete-snapshot-confirmation__cancel" onclick="hideDeleteConfirmation()">
+        Cancel
+      </button>
+      <button type="button" class="tdbc-button tdbc-button--danger delete-snapshot-confirmation__confirm" onclick="confirmDelete()">
+        Delete Snapshot
+      </button>
+    </div>
+  </div>
+</div>
+
+<script>
+function showDeleteConfirmation() {
+  document.getElementById('delete-confirmation-demo').style.display = 'flex';
+}
+
+function hideDeleteConfirmation() {
+  document.getElementById('delete-confirmation-demo').style.display = 'none';
+}
+
+function confirmDelete() {
+  alert('Snapshot deleted! (This is just a demo)');
+  hideDeleteConfirmation();
+}
+
+// Close modal when clicking outside
+document.getElementById('delete-confirmation-demo').addEventListener('click', function(e) {
+  if (e.target === this) {
+    hideDeleteConfirmation();
+  }
+});
+</script>