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

@@ -0,0 +1,73 @@
+<!-- @dsCard group="Components" -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Menus and tooltips</title>
+<link rel="stylesheet" href="../components.css">
+<style>
+  .ds { padding: 0 var(--container-padding) var(--container-padding); }
+  .ds-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-xl); padding: 0 var(--gap-xs); align-items: start; }
+  .ds-cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-xs); }
+  .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">Menus and tooltips</div>
+    <div class="subtitle">Floating surfaces. Flat, no shadow.</div>
+  </div>
+
+  <div class="ds-grid">
+    <div class="ds-cell">
+      <div class="caption">Menu</div>
+      <div class="popover" role="menu">
+        <div class="menu-label">Edit</div>
+        <div class="menu-item" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3" /><path d="M8.12 8.12 12 12" /><path d="M20 4 8.12 15.88" /><circle cx="6" cy="18" r="3" /><path d="M14.8 14.8 20 20" /></svg>Cut<span class="shortcut">⌘ + X</span></div>
+        <div class="menu-item is-hovered" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>Copy<span class="shortcut">⌘ + C</span></div>
+        <div class="menu-item" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><path d="M11 14h10" /><path d="M16 4h2a2 2 0 0 1 2 2v1.344" /><path d="m17 18 4-4-4-4" /><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113" /><rect x="8" y="2" width="8" height="4" rx="1" /></svg>Paste<span class="shortcut">⌘ + V</span></div>
+        <div class="menu-divider"></div>
+        <div class="menu-item" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><path d="M10 11v6" /><path d="M14 11v6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>Delete</div>
+      </div>
+    </div>
+
+    <div class="ds-cell">
+      <div class="caption">Context menu</div>
+      <div class="popover" role="menu">
+        <div class="menu-item" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /></svg>Reset to Default</div>
+        <div class="menu-item" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>Copy</div>
+        <div class="menu-item disabled" aria-disabled="true" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><path d="M11 14h10" /><path d="M16 4h2a2 2 0 0 1 2 2v1.344" /><path d="m17 18 4-4-4-4" /><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113" /><rect x="8" y="2" width="8" height="4" rx="1" /></svg>Paste</div>
+      </div>
+    </div>
+
+    <div class="ds-cell">
+      <div class="caption">Tooltip</div>
+      <button class="btn ghost icon-only" aria-label="Copy"><svg class="icon" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg></button>
+      <span class="tooltip" role="tooltip">Copy client ID</span>
+    </div>
+  </div>
+
+
+  <div class="sub-heading">
+    <div class="title">Use it for</div>
+  </div>
+  <ul class="ds-rules">
+    <li>MenuButton rows, with MenuLabel and MenuDivider to group them.</li>
+    <li>showContextMenu for right-click. Property rows get Reset, Copy and Paste, greyed when theres nothing to do.</li>
+    <li>A tooltip on every icon-only button, with plain text in it.</li>
+  </ul>
+
+  <div class="sub-heading">
+    <div class="title">Dont</div>
+  </div>
+  <ul class="ds-rules">
+    <li>Hand-build a popover out of a container with a fill, border and radius.</li>
+    <li>Colour tooltip text, or pad the tooltip yourself.</li>
+    <li>Add a shadow to a menu. Surfaces are separated by their border and fill.</li>
+  </ul>
+
+</main>
+</body>
+</html>