Migrated from Claude Design
This commit is contained in:
Zachary Levy
@@ -0,0 +1,238 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Component States" subtitle="Flat 3-step states — locked in" viewport="800x380" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 24px 28px; background: var(--bg-page); font-family: var(--font-body); }
|
||||
|
||||
.section-label {
|
||||
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
|
||||
text-transform: uppercase; color: var(--fg-muted);
|
||||
margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.section { margin-bottom: 28px; }
|
||||
|
||||
/* ── BASE BUTTON ── */
|
||||
.btn {
|
||||
font-family: var(--font-body); font-size: 13px; font-weight: 700;
|
||||
letter-spacing: 0.07em; text-transform: uppercase;
|
||||
padding: 10px 22px; border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
|
||||
/* RELEASE transition — slightly slower, ease-out */
|
||||
transition:
|
||||
background 180ms ease-out,
|
||||
color 180ms ease-out,
|
||||
border-color 180ms ease-out,
|
||||
outline-color 180ms ease-out;
|
||||
-webkit-user-select: none; user-select: none;
|
||||
}
|
||||
|
||||
/* ── PRIMARY ── */
|
||||
.btn-primary {
|
||||
background: var(--gold-dim);
|
||||
color: var(--bg-shell);
|
||||
border-color: var(--gold-dim);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--gold-bright);
|
||||
border-color: var(--gold-bright);
|
||||
}
|
||||
.btn-primary:focus-visible {
|
||||
outline: 2px solid var(--gold-bright);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.btn-primary:active {
|
||||
/* PRESS transition — fast */
|
||||
transition:
|
||||
background 55ms ease-out,
|
||||
color 55ms ease-out,
|
||||
border-color 55ms ease-out;
|
||||
background: var(--fg-heading); /* nearly white-warm cream */
|
||||
color: var(--bg-shell); /* very dark — stays readable */
|
||||
border-color: var(--fg-heading);
|
||||
}
|
||||
|
||||
/* ── SECONDARY (ghost) ── */
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--fg-secondary);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(215,153,33,0.2); /* subtle gold tint */
|
||||
border-color: var(--gold-dim);
|
||||
color: var(--fg-body); /* text lightens — step 1 */
|
||||
}
|
||||
.btn-secondary:focus-visible {
|
||||
outline: 2px solid var(--gold-bright);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.btn-secondary:active {
|
||||
transition: background 55ms ease-out, color 55ms ease-out, border-color 55ms ease-out;
|
||||
background: var(--gold-bright); /* full bright fill */
|
||||
color: #ffffff; /* pure white */
|
||||
border-color: var(--gold-bright);
|
||||
}
|
||||
|
||||
/* ── DANGER ── */
|
||||
.btn-danger {
|
||||
background: transparent;
|
||||
color: var(--red-bright);
|
||||
border-color: var(--red-dim);
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: rgba(204,36,29,0.2); /* subtle red tint */
|
||||
border-color: var(--red-bright);
|
||||
color: var(--fg-body); /* text lightens — step 1 */
|
||||
}
|
||||
.btn-danger:focus-visible {
|
||||
outline: 2px solid var(--red-bright);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.btn-danger:active {
|
||||
transition: background 55ms ease-out, color 55ms ease-out, border-color 55ms ease-out;
|
||||
background: var(--red-bright); /* full bright fill */
|
||||
color: #ffffff; /* pure white */
|
||||
border-color: var(--red-bright);
|
||||
}
|
||||
|
||||
/* ── SUCCESS ── */
|
||||
.btn-success {
|
||||
background: transparent;
|
||||
color: var(--green-bright);
|
||||
border-color: var(--green-dim);
|
||||
}
|
||||
.btn-success:hover {
|
||||
background: rgba(152,151,26,0.2); /* subtle green tint */
|
||||
border-color: var(--green-bright);
|
||||
color: var(--fg-body); /* text lightens — step 1 */
|
||||
}
|
||||
.btn-success:focus-visible {
|
||||
outline: 2px solid var(--green-bright);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.btn-success:active {
|
||||
transition: background 55ms ease-out, color 55ms ease-out, border-color 55ms ease-out;
|
||||
background: var(--green-bright); /* full bright fill */
|
||||
color: #ffffff; /* pure white */
|
||||
border-color: var(--green-bright);
|
||||
}
|
||||
|
||||
/* ── DISABLED ── */
|
||||
.btn-disabled {
|
||||
background: var(--bg-active);
|
||||
color: var(--fg-muted);
|
||||
border-color: var(--border);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── LOADING ── */
|
||||
.btn-loading {
|
||||
background: var(--bg-active);
|
||||
color: var(--fg-muted);
|
||||
border-color: var(--border);
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.spinner {
|
||||
width: 9px; height: 9px;
|
||||
border: 1.5px solid var(--gold-dim);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.65s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── DEMO LAYOUT ── */
|
||||
.demo-row {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 14px 16px; background: var(--bg-surface);
|
||||
border: 1px solid var(--border); border-radius: var(--radius-md);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.demo-label {
|
||||
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
|
||||
text-transform: uppercase; color: var(--fg-muted); width: 90px; flex-shrink: 0;
|
||||
}
|
||||
.demo-note {
|
||||
font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
|
||||
margin-left: auto; text-align: right; line-height: 1.4;
|
||||
}
|
||||
|
||||
/* SIZE VARIANTS */
|
||||
.btn-sm { font-size: 11px; padding: 6px 14px; }
|
||||
.btn-lg { font-size: 14px; padding: 12px 28px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-label">Interactive states — press and hold any button to see lit state</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<div class="demo-label">Primary</div>
|
||||
<button class="btn btn-primary">Execute</button>
|
||||
<button class="btn btn-primary btn-sm">Run</button>
|
||||
<button class="btn btn-primary btn-lg">Initialize</button>
|
||||
<div class="demo-note">Press: --fg-heading fill (warm cream)<br>Text stays dark — readable</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<div class="demo-label">Secondary</div>
|
||||
<button class="btn btn-secondary">Configure</button>
|
||||
<button class="btn btn-secondary btn-sm">Edit</button>
|
||||
<button class="btn btn-secondary btn-lg">Open Settings</button>
|
||||
<div class="demo-note">Hover: gold tint + text brightens<br>Press: gold-bright fill + white text</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<div class="demo-label">Danger</div>
|
||||
<button class="btn btn-danger">Terminate</button>
|
||||
<button class="btn btn-danger btn-sm">Delete</button>
|
||||
<div class="demo-note">Hover: red tint + text brightens<br>Press: red-bright fill + white text</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<div class="demo-label">Success</div>
|
||||
<button class="btn btn-success">Deploy</button>
|
||||
<button class="btn btn-success btn-sm">Confirm</button>
|
||||
<div class="demo-note">Hover: green tint + text brightens<br>Press: green-bright fill + white text</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-row">
|
||||
<div class="demo-label">Disabled</div>
|
||||
<button class="btn btn-disabled" disabled>Execute</button>
|
||||
<div class="demo-note">Opacity 0.5<br>pointer-events: none</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-row" style="margin:0">
|
||||
<div class="demo-label">Loading</div>
|
||||
<button class="btn btn-loading"><span class="spinner"></span>Working</button>
|
||||
<div class="demo-note">Spinner + neutral<br>cursor: not-allowed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="margin:0">
|
||||
<div class="section-label">Timing — press: 55ms ease-out · release: 180ms ease-out</div>
|
||||
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
|
||||
<div style="font-family:var(--font-mono);font-size:10px;color:var(--fg-caption);padding:10px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)">
|
||||
<span style="color:var(--gold-dim)">:active</span> → transition: 55ms ease-out<br>
|
||||
<span style="color:var(--fg-muted)">release</span> → transition: 180ms ease-out<br>
|
||||
<span style="color:var(--fg-muted)">:hover </span> → transition: 150ms ease-out
|
||||
</div>
|
||||
<div style="font-family:var(--font-mono);font-size:10px;color:var(--fg-caption);padding:10px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)">
|
||||
<span style="color:var(--gold-dim)">Lit color</span> = --fg-heading (#fbf1c7)<br>
|
||||
<span style="color:var(--fg-muted)">Text </span> = --bg-shell (#1d2021)<br>
|
||||
<span style="color:var(--fg-muted)">Ratio </span> ≈ 12:1 — passes AAA
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user