103 lines
6.0 KiB
HTML
103 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<!-- @dsCard group="Brand" name="Form Inputs" subtitle="Text input, select, error, success — 6px radius" viewport="700x120" -->
|
|
<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; }
|
|
.field-group { width: 220px; }
|
|
label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-caption); margin-bottom: 4px; }
|
|
input, select, textarea {
|
|
width: 100%; background: var(--bg-shell); color: var(--fg-body);
|
|
border: 1px solid var(--border); border-radius: var(--radius-md);
|
|
padding: 7px 10px; font-family: var(--font-mono); font-size: 13px;
|
|
outline: none;
|
|
transition: border-color var(--transition-hover), box-shadow var(--transition-hover);
|
|
box-sizing: border-box;
|
|
}
|
|
/* Focus halo — grows OUTWARD, 3px wide. Per-state colors so meaning doesn't flip on focus.
|
|
Gold @ 35% (matches card hover). Red & Green @ 50% — stronger because the dim variants are
|
|
visually quieter than gold-dim, so they need more opacity to read at the same intensity. */
|
|
input:focus, select:focus, textarea:focus {
|
|
border-color: var(--gold-bright);
|
|
box-shadow: 0 0 0 3px rgba(215, 153, 33, 0.35); /* --gold-dim @ 35% */
|
|
outline: none;
|
|
}
|
|
input.error { border-color: var(--red-dim); }
|
|
input.error:focus {
|
|
border-color: var(--red-bright);
|
|
box-shadow: 0 0 0 3px rgba(204, 36, 29, 0.5); /* --red-dim @ 50% */
|
|
}
|
|
input.success { border-color: var(--green-dim); }
|
|
input.success:focus {
|
|
border-color: var(--green-bright);
|
|
box-shadow: 0 0 0 3px rgba(152, 151, 26, 0.5); /* --green-dim @ 50% */
|
|
}
|
|
.hint { font-size: 11px; color: var(--fg-caption); margin-top: 3px; font-family: var(--font-mono); }
|
|
.hint.err { color: var(--red-bright); }
|
|
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a89984'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; }
|
|
|
|
/* Spec block — documents the focus halo so the demo is self-describing. */
|
|
.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-sub { color: var(--fg-muted); margin-left: 122px; font-size: 10px; margin-bottom: 6px; }
|
|
.spec-note { color: var(--fg-muted); margin-top: 8px; font-style: italic; max-width: 640px; }
|
|
.spec-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="field-group">
|
|
<label>Target Host</label>
|
|
<input type="text" placeholder="192.168.1.1">
|
|
<div class="hint">IPv4 or hostname</div>
|
|
</div>
|
|
<div class="field-group">
|
|
<label>Protocol</label>
|
|
<select><option>SSH</option><option>HTTPS</option><option>TCP/IP</option></select>
|
|
</div>
|
|
<div class="field-group">
|
|
<label>API Key</label>
|
|
<input type="text" class="error" value="invalid-key-xx">
|
|
<div class="hint err">Key format invalid.</div>
|
|
</div>
|
|
<div class="field-group">
|
|
<label>Build Hash</label>
|
|
<input type="text" class="success" value="a3f9c12e">
|
|
<div class="hint" style="color:var(--green-bright)">Verified.</div>
|
|
</div>
|
|
|
|
<div class="spec">
|
|
<div class="spec-title">Focus state — outward halo, semantic color</div>
|
|
<div class="spec-row"><div class="spec-key">Width</div><div class="spec-val">3px, expands outward from field edge</div></div>
|
|
<div class="spec-row"><div class="spec-key">Outline</div><div class="spec-val">suppressed (<code>outline: none</code>) to prevent stacking with global <code>:focus-visible</code> ring</div></div>
|
|
<div class="spec-row"><div class="spec-key">Transition</div><div class="spec-val"><code>--transition-hover</code> (150ms ease-out) on border-color + box-shadow</div></div>
|
|
|
|
<div style="margin-top:14px">
|
|
<div class="spec-row"><div class="spec-key"><span class="spec-swatch" style="background:#fabd2f"></span>Default</div><div class="spec-val">border <code>--gold-bright</code> · halo <code>rgba(215, 153, 33, 0.35)</code></div></div>
|
|
<div class="spec-sub">35% opacity — matches card hover. Used for neutral fields with no semantic state.</div>
|
|
|
|
<div class="spec-row"><div class="spec-key"><span class="spec-swatch" style="background:#fb4934"></span>Invalid</div><div class="spec-val">border <code>--red-bright</code> · halo <code>rgba(204, 36, 29, 0.5)</code></div></div>
|
|
<div class="spec-sub">50% opacity — keeps the red signal on focus rather than overriding to gold.</div>
|
|
|
|
<div class="spec-row"><div class="spec-key"><span class="spec-swatch" style="background:#b8bb26"></span>Verified</div><div class="spec-val">border <code>--green-bright</code> · halo <code>rgba(152, 151, 26, 0.5)</code></div></div>
|
|
<div class="spec-sub">50% opacity — keeps the green signal on focus rather than overriding to gold.</div>
|
|
</div>
|
|
|
|
<div class="spec-note">Semantic states (invalid/verified) preserve their color through focus so meaning doesn't flip on interaction. Their dim variants read quieter than gold-dim at the same opacity, so they're bumped to 50% to match perceived intensity.</div>
|
|
</div>
|
|
</body>
|
|
</html>
|