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/feedback.html

@@ -0,0 +1,110 @@
+<!-- @dsCard group="Components" -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Feedback</title>
+<link rel="stylesheet" href="../components.css">
+<style>
+  .ds { padding: 0 var(--container-padding) var(--container-padding); }
+  .ds-row { display: flex; flex-wrap: wrap; gap: var(--gap-md); padding: 0 var(--gap-xs); align-items: flex-start; }
+  .ds-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-xl); padding: 0 var(--gap-xs); }
+  .ds-cell { display: flex; flex-direction: column; gap: var(--gap-xs); }
+  .ds-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-sm); padding: var(--gap-xxl) var(--gap-md); }
+  .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">Feedback</div>
+    <div class="subtitle">Toasts, and the three states a page can be in.</div>
+  </div>
+
+  <div class="ds-row">
+    <div class="toast" role="status">
+      <div class="body">
+        <div class="badge"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg></div>
+        <div class="text">
+          <div class="title">Link copied</div>
+          <div class="subtitle">Paste it anywhere a buyer can reach.</div>
+        </div>
+        <button class="btn outline icon-only" aria-label="Close"><svg class="icon" viewBox="0 0 24 24"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg></button>
+      </div>
+      <div class="drain"><span style="width: 80%"></span></div>
+    </div>
+    <div class="toast success" role="status">
+      <div class="body">
+        <div class="badge"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg></div>
+        <div class="text">
+          <div class="title">Saved</div>
+          <div class="subtitle">Your changes are live.</div>
+        </div>
+        <button class="btn outline icon-only" aria-label="Close"><svg class="icon" viewBox="0 0 24 24"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg></button>
+      </div>
+      <div class="drain"><span style="width: 45%"></span></div>
+    </div>
+    <div class="toast error" role="alert">
+      <div class="body">
+        <div class="badge"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" /></svg></div>
+        <div class="text">
+          <div class="title">Couldnt save</div>
+          <div class="subtitle">Check your connection and try again.</div>
+        </div>
+        <button class="btn outline icon-only" aria-label="Close"><svg class="icon" viewBox="0 0 24 24"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg></button>
+      </div>
+      <div class="drain"><span style="width: 20%"></span></div>
+    </div>
+  </div>
+
+  <div class="sub-heading">
+    <div class="title">Loading, empty, error</div>
+    <div class="subtitle">The plainest thing that works.</div>
+  </div>
+
+  <div class="ds-grid">
+    <div class="ds-cell">
+      <div class="caption">Loading</div>
+      <div class="ds-state outlined">
+        <div class="spinner" role="progressbar" aria-label="Loading"></div>
+      </div>
+    </div>
+
+    <div class="ds-cell">
+      <div class="caption">Empty</div>
+      <div class="ds-state outlined">
+        <div class="text-xs muted">No coupons yet.</div>
+      </div>
+    </div>
+
+    <div class="ds-cell">
+      <div class="caption">Error</div>
+      <div class="ds-state outlined">
+        <div class="text-xs muted">Couldnt load orders.</div>
+        <button class="btn outline">Retry</button>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="sub-heading">
+    <div class="title">Use it for</div>
+  </div>
+  <ul class="ds-rules">
+    <li>showAppToast with a title, a subtitle and a severity: info, success or error. The severity colours the drain bar, nothing else.</li>
+    <li>Loading is a spinner. Empty is one muted line. Error is the message muted and an outline Retry.</li>
+  </ul>
+
+  <div class="sub-heading">
+    <div class="title">Dont</div>
+  </div>
+  <ul class="ds-rules">
+    <li>Use skeletons or shimmer.</li>
+    <li>Hand-build a toast out of a card and some padding.</li>
+    <li>Hand-build a warning box. A page that wants more is asking for a new garage_ui component.</li>
+  </ul>
+
+</main>
+</body>
+</html>