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,79 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Badges & Status" subtitle="System (online/offline/degraded/error) · Process (running/complete/failed) · Labels" viewport="700x200" -->
+<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); display: flex; flex-direction: column; gap: 12px; }
+  .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+  .section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
+
+  .badge {
+    display: inline-flex; align-items: center; gap: 5px;
+    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
+    letter-spacing: 0.1em; text-transform: uppercase;
+    padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid transparent;
+    white-space: nowrap;
+  }
+  .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
+
+  /* System / connectivity status */
+  .b-online   { color: var(--green-bright);  border-color: var(--green-dim);  background: rgba(152,151,26,0.1); }
+  .b-offline  { color: var(--fg-muted);           border-color: var(--border);     background: var(--bg-surface); }
+  .b-degraded { color: var(--orange-bright); border-color: var(--orange-dim); background: rgba(214,93,14,0.1); }
+  .b-error    { color: var(--red-bright);    border-color: var(--red-dim);    background: rgba(204,36,29,0.1); }
+
+  /* Process / job status */
+  .b-running  { color: var(--gold-bright);   border-color: var(--gold-dim);   background: rgba(215,153,33,0.1); }
+  .b-complete { color: var(--green-bright);  border-color: var(--green-dim);  background: rgba(152,151,26,0.1); }
+  .b-failed   { color: var(--red-bright);    border-color: var(--red-dim);    background: rgba(204,36,29,0.1); }
+  .b-pending  { color: var(--fg-caption);           border-color: var(--border);     background: var(--bg-surface); }
+  .b-warning  { color: var(--orange-bright); border-color: var(--orange-dim); background: rgba(214,93,14,0.1); }
+
+  /* Labels / tags */
+  .b-info     { color: var(--blue-bright);   border-color: var(--blue-dim);   background: rgba(69,133,136,0.1); }
+  .b-version  { color: var(--gold-bright);   border-color: var(--gold-dim);   background: rgba(215,153,33,0.1); }
+  .b-neutral  { color: var(--fg-caption);           border-color: var(--border);     background: var(--bg-surface); }
+
+  .def { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); }
+</style>
+</head>
+<body>
+
+  <div>
+    <div class="section-label">System / connectivity</div>
+    <div class="row">
+      <div class="badge b-online"><div class="dot" style="background:var(--green-bright)"></div>Online</div>
+      <div class="badge b-offline"><div class="dot" style="background:var(--fg-muted)"></div>Offline</div>
+      <div class="badge b-degraded"><div class="dot" style="background:var(--orange-bright)"></div>Degraded</div>
+      <div class="badge b-error"><div class="dot" style="background:var(--red-bright)"></div>Error</div>
+    </div>
+    <div class="def" style="margin-top:5px">Online = reachable and responding · Offline = unreachable · Degraded = reachable but unhealthy · Error = fault condition</div>
+  </div>
+
+  <div>
+    <div class="section-label">Process / job</div>
+    <div class="row">
+      <div class="badge b-running">Running</div>
+      <div class="badge b-complete">✓ Complete</div>
+      <div class="badge b-failed">✕ Failed</div>
+      <div class="badge b-pending">Pending</div>
+      <div class="badge b-warning">Warning</div>
+    </div>
+    <div class="def" style="margin-top:5px">Running = in progress · Complete = finished successfully · Failed = finished with error · Pending = queued · Warning = finished with caveats</div>
+  </div>
+
+  <div>
+    <div class="section-label">Labels / tags</div>
+    <div class="row">
+      <div class="badge b-info">Info</div>
+      <div class="badge b-version">v2.4.1</div>
+      <div class="badge b-neutral">Staging</div>
+      <div class="badge b-neutral">Beta</div>
+      <div class="badge b-neutral">Read-only</div>
+    </div>
+  </div>
+
+</body>
+</html>