Migrated from Claude Design

2026-07-29 13:49:23 -07:00
parent be12d33fde
commit 96fc643cb7
37 changed files with 3888 additions and 2 deletions
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Shadows & Elevation" subtitle="Flat — bg+border elevation, interactive card demo" viewport="700x220" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); }
+  .section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); }
+  .section { margin-bottom: 20px; }
+  .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
+
+  /* Elevation via bg + border only */
+  .surface {
+    border-radius: var(--radius-md); padding: 12px 14px;
+    font-family: var(--font-mono); font-size: 10px; width: 120px;
+    transition: background var(--transition-hover), border-color var(--transition-hover);
+  }
+  .surface-label { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
+  .surface-token { color: var(--fg-caption); }
+
+  .elev-page     { background: var(--bg-page);    border: none; }
+  .elev-card     { background: var(--bg-surface);    border: 1px solid var(--border); }
+  .elev-hover    { background: var(--bg-surface);    border: 1px solid var(--gold-dim); cursor: pointer; }
+  .elev-active   { background: var(--bg-active);    border: 1px solid var(--gold-dim); cursor: pointer; }
+  .elev-overlay  { background: var(--bg-shell);border: 1px solid var(--gold-dim); }
+
+  /* Interactive card demo */
+  .demo-card {
+    background: var(--bg-surface); border: 1px solid var(--border);
+    border-radius: var(--radius-md); padding: 14px 16px; width: 160px;
+    cursor: pointer;
+    transition: background var(--transition-hover), border-color var(--transition-hover);
+  }
+  .demo-card:hover  { border-color: var(--gold-dim); background: var(--bg-surface); }
+  .demo-card:active {
+    background: var(--bg-active); border-color: var(--gold-dim);
+    transition: background var(--transition-press), border-color var(--transition-press);
+  }
+  .demo-card-title { font-weight: 700; font-size: 13px; color: var(--fg-heading); margin-bottom: 3px; }
+  .demo-card-sub   { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); }
+</style>
+</head>
+<body>
+
+<div class="section">
+  <div class="section-label">Elevation — bg + border only · no drop shadows</div>
+  <div class="row">
+    <div>
+      <div class="surface elev-page"><div class="surface-label">Page</div><div class="surface-token">bg0 · no border</div></div>
+    </div>
+    <div>
+      <div class="surface elev-card"><div class="surface-label">Card / raised</div><div class="surface-token">bg1 · --border</div></div>
+    </div>
+    <div>
+      <div class="surface elev-hover"><div class="surface-label">Hover</div><div class="surface-token">bg1 · gold-dim</div></div>
+    </div>
+    <div>
+      <div class="surface elev-active"><div class="surface-label">Active / press</div><div class="surface-token">bg2 · gold-dim</div></div>
+    </div>
+    <div>
+      <div class="surface elev-overlay"><div class="surface-label">Overlay / modal</div><div class="surface-token">bg-hard · gold-dim</div></div>
+    </div>
+  </div>
+</div>
+
+<div class="section" style="margin:0">
+  <div class="section-label">Interactive card — hover and press to see state changes</div>
+  <div class="row">
+    <div class="demo-card">
+      <div class="demo-card-title">Node Alpha</div>
+      <div class="demo-card-sub">99.97% · us-east-1</div>
+    </div>
+    <div style="font-family:var(--font-mono);font-size:10px;color:var(--fg-muted);line-height:1.8;padding-top:4px">
+      Default: bg1 + --border<br>
+      Hover:&nbsp;&nbsp; bg1 + gold-dim border<br>
+      Press:&nbsp;&nbsp; bg2 + gold-dim border<br>
+      <br>
+      No shadow at any state.<br>
+      Focus: 2px gold outline.
+    </div>
+  </div>
+</div>
+
+</body>
+</html>