BFPOWER/cybersteel
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrated from Claude Design

Browse Source
This commit is contained in:
Zachary Levy
2026-07-29 13:49:23 -07:00
parent be12d33fde
commit 96fc643cb7
37 changed files with 3888 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
preview/components-cards.html
+136
View File
@@ -0,0 +1,136 @@
<!DOCTYPE html>
<!-- @dsCard group="Brand" name="Cards" subtitle="Stat, deploy, alert cards — flat, 6px radius" viewport="700x150" -->
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css?v=2">
<style>
body { margin: 0; padding: 24px; background: var(--bg-page); font-family: var(--font-body); display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
/* Base card — a SURFACE. Static by default: no hover, no cursor, no halo. */
.card {
background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
padding: 14px 16px; width: 200px;
background-image: var(--gradient-card);
}
/* Clickable card — opts into the interactive treatment. Use .card.clickable, role="button", or wrap in <a>/<button>. */
.card.clickable,
a.card,
button.card {
cursor: pointer;
text-decoration: none; text-align: left;
transition: background var(--transition-hover), color var(--transition-hover), border-color var(--transition-hover), box-shadow var(--transition-hover);
}
.card.clickable:active,
a.card:active,
button.card:active {
transition: background var(--transition-press), color var(--transition-press), border-color var(--transition-press), box-shadow var(--transition-press);
}
/* Hover — outward gold halo, only on clickable cards. */
.card.clickable:hover,
a.card:hover,
button.card:hover {
border-color: var(--gold-dim);
box-shadow: 0 0 0 3px rgba(215, 153, 33, 0.35);
}
/* Active/Press — full gold-bright fill, white text. Mirrors .btn-secondary:active. */
.card.clickable:active,
a.card:active,
button.card:active {
background: var(--gold-bright);
border-color: var(--gold-bright);
color: #fff;
box-shadow: none;
}
.card.clickable:active *,
a.card:active *,
button.card:active * {
color: #fff !important;
}
.card-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-heading); margin-bottom: 4px; }
.card-meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-caption); letter-spacing: 0.06em; margin-bottom: 8px; }
.card-body { font-size: 13px; color: var(--fg-body); line-height: 1.5; }
.card-stat { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--gold-bright); }
.card-stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-caption); }
.card-status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.dot { width: 6px; height: 6px; border-radius: 50%; }
.group-label { flex-basis: 100%; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-caption); margin: 4px 0 -4px; }
/* Spec block */
.spec {
flex-basis: 100%; margin-top: 8px;
border-top: 1px solid var(--gold-dim);
padding-top: 14px;
font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--fg-secondary);
}
.spec-title { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 8px; }
.spec-row { display: flex; gap: 12px; margin-bottom: 4px; }
.spec-key { color: var(--fg-caption); width: 110px; flex-shrink: 0; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
.spec-val { color: var(--fg-heading); }
.spec-note { color: var(--fg-muted); margin-top: 8px; font-style: italic; max-width: 640px; }
.spec-section { margin-top: 14px; }
</style>
</head>
<body>
<div class="group-label">Static cards (display only)</div>
<div class="card">
<div class="card-title">Node Alpha</div>
<div class="card-meta">cluster-01 · us-east-1</div>
<div class="card-stat">99.97%</div>
<div class="card-stat-label">Uptime — 30d</div>
</div>
<div class="card">
<div class="card-title">Alert</div>
<div class="card-meta">node-07 · 09:41:02Z</div>
<div class="card-body">Connection timeout. Failover initiated.</div>
<div style="margin-top:8px" class="card-status"><div class="dot" style="background:var(--red-bright)"></div><span style="color:var(--red-bright)">Critical</span></div>
</div>
<div class="group-label">Clickable cards (hover + press)</div>
<a href="#" class="card">
<div class="card-title">Deploy #441</div>
<div class="card-meta">main · a3f9c12e · 14s ago</div>
<div class="card-body">Production build deployed. 0 errors.</div>
<div style="margin-top:8px" class="card-status"><div class="dot" style="background:var(--green-bright)"></div><span style="color:var(--green-bright)">Complete</span></div>
</a>
<div class="card clickable" role="button" tabindex="0">
<div class="card-title">Open Console</div>
<div class="card-meta">cluster-01 · 12 active sessions</div>
<div class="card-body">Launch terminal session in this cluster.</div>
</div>
<div class="spec">
<div class="spec-title">Card states</div>
<div class="spec-section">
<div class="spec-row"><div class="spec-key">Default</div><div class="spec-val">Static surface — no hover effect, no cursor change.</div></div>
<div class="spec-row"><div class="spec-key">Background</div><div class="spec-val"><code>--bg-surface</code> + <code>--gradient-card</code></div></div>
<div class="spec-row"><div class="spec-key">Border</div><div class="spec-val">1px solid <code>--border</code></div></div>
</div>
<div class="spec-section">
<div class="spec-row"><div class="spec-key">Clickable</div><div class="spec-val">Apply <code>.clickable</code>, <code>role="button"</code>, or use <code>&lt;a&gt;</code>/<code>&lt;button&gt;</code> — opts the card into hover + press.</div></div>
</div>
<div class="spec-section">
<div class="spec-row"><div class="spec-key">Hover</div><div class="spec-val">border <code>--gold-dim</code>&nbsp;·&nbsp;halo <code>0 0 0 3px rgba(215, 153, 33, 0.35)</code></div></div>
<div class="spec-row"><div class="spec-key">— width</div><div class="spec-val">3px, grows OUTWARD from card edge</div></div>
<div class="spec-row"><div class="spec-key">— opacity</div><div class="spec-val">35% — translucent so the halo reads as a soft accent, not a hard second ring</div></div>
<div class="spec-row"><div class="spec-key">— transition</div><div class="spec-val"><code>--transition-hover</code> (150ms ease-out)</div></div>
</div>
<div class="spec-section">
<div class="spec-row"><div class="spec-key">Press</div><div class="spec-val">background + border <code>--gold-bright</code>&nbsp;·&nbsp;text <code>#fff</code>&nbsp;·&nbsp;halo cleared</div></div>
<div class="spec-row"><div class="spec-key">— transition</div><div class="spec-val"><code>--transition-press</code> (55ms ease-out) on enter, <code>--transition-hover</code> on release</div></div>
<div class="spec-row"><div class="spec-key">— mirrors</div><div class="spec-val"><code>.btn-secondary:active</code> — same press treatment as ghost-style buttons</div></div>
</div>
<div class="spec-note">The hover halo only appears when a card is actually interactive. Surface cards (data display) get no hover effect at all — clickable cards opt in via class or semantic element. Press fills with gold-bright to match the secondary-button click pattern, so a clicked card reads consistently with the rest of the interactive system.</div>
</div>
</body>
</html>