Add a design system for Claude Design, generated from garage_ui

Tokens come out of garage_ui/tool/export_design_tokens_test.dart, the
components are CSS on top of them, and the cards cover foundations,
components and whole hub and Arcs & Angles screens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013F4NWNvYcdeSgqbWMT1VQ7

design_system/components/dialogs.html

@@ -0,0 +1,66 @@
+<!-- @dsCard group="Components" -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Dialogs</title>
+<link rel="stylesheet" href="../components.css">
+<style>
+  .ds { padding: 0 var(--container-padding) var(--container-padding); }
+  .ds-stage { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); padding: var(--gap-xxl) var(--container-padding); border-radius: var(--radius-xl); }
+  .ds-rules { margin: 0; padding: 0 var(--gap-xs) 0 var(--gap-xl); display: flex; flex-direction: column; gap: var(--gap-xxs); }
+</style>
+</head>
+<body>
+<main class="ds">
+
+  <div class="sub-heading">
+    <div class="title">Dialogs</div>
+    <div class="subtitle">A small confirm, over a dimmed page.</div>
+  </div>
+
+  <div class="modal-backdrop ds-stage">
+    <div class="dialog" role="alertdialog" aria-labelledby="d1-title">
+      <div class="body">
+        <div class="title" id="d1-title">Delete this product?</div>
+        <div class="content">People who already bought it keep their licence. It cant be sold again.</div>
+      </div>
+      <div class="actions">
+        <button class="btn outline">Cancel</button>
+        <button class="btn destructive">Delete</button>
+      </div>
+    </div>
+
+    <div class="dialog" role="alertdialog" aria-labelledby="d2-title">
+      <div class="body">
+        <div class="title" id="d2-title">Publish changes?</div>
+        <div class="content">The new price goes live at checkout straight away.</div>
+      </div>
+      <div class="actions">
+        <button class="btn outline">Cancel</button>
+        <button class="btn primary">Publish</button>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="sub-heading">
+    <div class="title">Use it for</div>
+  </div>
+  <ul class="ds-rules">
+    <li>showDialog with an AlertDialog: a title, a line of content and its actions.</li>
+    <li>Cancel is outline. Confirm is primary, or destructive when it removes something.</li>
+    <li>Bigger jobs, like settings or export, go in a pane overlay instead.</li>
+  </ul>
+
+  <div class="sub-heading">
+    <div class="title">Dont</div>
+  </div>
+  <ul class="ds-rules">
+    <li>Constrain the dialog's width. It caps itself at the dialog max width.</li>
+    <li>Build the action row by hand. The dialog draws its own band.</li>
+  </ul>
+
+</main>
+</body>
+</html>