32 lines
2.8 KiB
HTML
32 lines
2.8 KiB
HTML
|
<!doctype html>
|
|||
|
|
<!-- @dsCard group="Colors" name="Colors · Functional Status" subtitle="Error / warn / success / info — borders & dots only" viewport="700x280" -->
|
|||
|
|
<html><head>
|
|||
|
|
<meta charset="utf-8"><title>Functional Status Colours</title>
|
|||
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|||
|
|
<style>
|
|||
|
|
body { padding: 24px 32px; background: var(--paper); }
|
|||
|
|
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
|
|||
|
|
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
|
|||
|
|
.sw { padding: 12px 12px 14px; min-height: 92px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); border-left: 2px solid; position: relative; }
|
|||
|
|
.sw .dot { width: 10px; height: 10px; border-radius: 999px; position: absolute; right: 12px; top: 12px; }
|
|||
|
|
.sw .name { font: 500 13px var(--ff-sans); color: var(--fg-1); }
|
|||
|
|
.sw .tok { font: 400 11px var(--ff-mono); color: var(--fg-3); }
|
|||
|
|
.sw .hex { font: 400 11px var(--ff-mono); color: var(--fg-3); margin-top: auto; }
|
|||
|
|
.e { border-color: var(--status-error); } .e .dot { background: var(--status-error); }
|
|||
|
|
.w { border-color: var(--status-warn); background: var(--status-warn-bg); }
|
|||
|
|
.w .dot { background: var(--status-warn); }
|
|||
|
|
.s { border-color: var(--status-success); } .s .dot { background: var(--status-success); }
|
|||
|
|
.i { border-color: var(--status-info); } .i .dot { background: var(--status-info); }
|
|||
|
|
.caveat { font: 400 11px/1.45 var(--ff-mono); color: var(--fg-3); margin-top: 4px; max-width: 64ch; }
|
|||
|
|
</style></head>
|
|||
|
|
<body>
|
|||
|
|
<div class="row-label">Functional status — borders + dots only, never fills</div>
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="sw e"><span class="dot"></span><span class="name">Error</span><span class="tok">--status-error</span><span class="hex">#B33A2E · brick red</span></div>
|
|||
|
|
<div class="sw w"><span class="dot"></span><span class="name">Warning</span><span class="tok">--status-warn</span><span class="hex">#C28000 · deep mustard</span></div>
|
|||
|
|
<div class="sw s"><span class="dot"></span><span class="name">Success</span><span class="tok">--status-success</span><span class="hex">#2F6B3A · muted forest</span></div>
|
|||
|
|
<div class="sw i"><span class="dot"></span><span class="name">Info</span><span class="tok">--status-info</span><span class="hex">#2E5C8A · muted ink-blue</span></div>
|
|||
|
|
</div>
|
|||
|
|
<p class="caveat">Distinct from S0–S4 signal strength. Use sparingly: a 2px left-border on banners, a small dot next to status text, or as <code class="mono">currentColor</code> on an icon. If even this feels too colourful for a context, fall back to ink and the existing yellow accent — the system still parses without these.</p>
|
|||
|
|
</body></html>
|