Migrated from Claude Design
This commit is contained in:
Zachary Levy
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Semantic Colors" subtitle="Button matrix + semantic text colors: success, danger, warning, info, primary, disabled" viewport="800x560" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body { margin: 0; padding: 14px 16px; background: var(--bg-page); font-family: var(--font-mono); font-size: 10px; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th, td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
|
||||
th { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); background: var(--bg-shell); border-bottom: 1px solid var(--border); font-weight: 600; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
tr:nth-child(even) td { background: rgba(60,56,54,0.2); }
|
||||
|
||||
.variant-header td {
|
||||
font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
|
||||
color: var(--fg-muted); background: var(--bg-shell);
|
||||
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.dot {
|
||||
width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.token { color: var(--fg-secondary); }
|
||||
.hex { color: var(--fg-muted); font-size: 9px; margin-left: 2px; }
|
||||
|
||||
.state-col { color: var(--fg-caption); width: 70px; }
|
||||
.prop-col { color: var(--fg-muted); width: 60px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:70px">State</th>
|
||||
<th style="width:60px">Property</th>
|
||||
<th>Primary</th>
|
||||
<th>Secondary</th>
|
||||
<th>Danger</th>
|
||||
<th>Success</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- DEFAULT -->
|
||||
<tr class="variant-header"><td colspan="6">Default</td></tr>
|
||||
<tr>
|
||||
<td class="state-col" rowspan="3">Default</td>
|
||||
<td class="prop-col">BG</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#d79921"></div><span class="token">--gold-dim</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:transparent;border:1px solid #7c6f64"></div><span class="token">transparent</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:transparent;border:1px solid #7c6f64"></div><span class="token">transparent</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:transparent;border:1px solid #7c6f64"></div><span class="token">transparent</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Border</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#d79921"></div><span class="token">--gold-dim</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#7c6f64"></div><span class="token">--border</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#cc241d"></div><span class="token">--red-dim</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#98971a"></div><span class="token">--green-dim</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Text</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#1d2021;border:1px solid #504945"></div><span class="token">--bg-shell</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#d5c4a1"></div><span class="token">--fg-secondary</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
|
||||
</tr>
|
||||
|
||||
<!-- HOVER -->
|
||||
<tr class="variant-header"><td colspan="6">Hover</td></tr>
|
||||
<tr>
|
||||
<td class="state-col" rowspan="3">Hover</td>
|
||||
<td class="prop-col">BG</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:rgba(215,153,33,0.2)"></div><span class="token">gold 20% tint</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:rgba(204,36,29,0.2)"></div><span class="token">red 20% tint</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:rgba(152,151,26,0.2)"></div><span class="token">green 20% tint</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Border</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#d79921"></div><span class="token">--gold-dim</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Text</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#1d2021;border:1px solid #504945"></div><span class="token">--bg-shell</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ebdbb2"></div><span class="token">--fg-body</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ebdbb2"></div><span class="token">--fg-body</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ebdbb2"></div><span class="token">--fg-body</span></div></td>
|
||||
</tr>
|
||||
|
||||
<!-- PRESS -->
|
||||
<tr class="variant-header"><td colspan="6">Press</td></tr>
|
||||
<tr>
|
||||
<td class="state-col" rowspan="3">Press</td>
|
||||
<td class="prop-col">BG</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fbf1c7"></div><span class="token">--fg-heading</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Border</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fbf1c7"></div><span class="token">--fg-heading</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="prop-col">Text</td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#1d2021;border:1px solid #504945"></div><span class="token">--bg-shell</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ffffff;border:1px solid #504945"></div><span class="token">#ffffff</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ffffff;border:1px solid #504945"></div><span class="token">#ffffff</span></div></td>
|
||||
<td><div class="swatch"><div class="dot" style="background:#ffffff;border:1px solid #504945"></div><span class="token">#ffffff</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div style="margin-top:14px;padding-top:10px;border-top:1px solid var(--border)">
|
||||
<div style="font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:10px">Semantic text colors</div>
|
||||
<div style="display:flex;flex-direction:column;gap:5px">
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Success</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--green-bright)">● Online</span>
|
||||
<span style="color:var(--green-bright)">✓ Verified</span>
|
||||
<span style="color:var(--green-bright)">Build complete</span>
|
||||
<span style="color:var(--green-dim)">--green-bright</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Danger</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--red-bright)">● Error</span>
|
||||
<span style="color:var(--red-bright)">✕ Failed</span>
|
||||
<span style="color:var(--red-bright)">Connection timeout</span>
|
||||
<span style="color:var(--fg-muted)">--red-bright</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Warning</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--orange-bright)">● Degraded</span>
|
||||
<span style="color:var(--orange-bright)">Disk usage 84%</span>
|
||||
<span style="color:var(--orange-bright)">Threshold exceeded</span>
|
||||
<span style="color:var(--fg-muted)">--orange-bright</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Info</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--blue-bright)">● Running</span>
|
||||
<span style="color:var(--blue-bright)">Heartbeat OK</span>
|
||||
<span style="color:var(--blue-bright)">node-01</span>
|
||||
<span style="color:var(--fg-muted)">--blue-bright</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Primary</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--gold-bright)">● Active</span>
|
||||
<span style="color:var(--gold-bright)">Build #441</span>
|
||||
<span style="color:var(--gold-bright)">v2.4.1-stable</span>
|
||||
<span style="color:var(--fg-muted)">--gold-bright</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Disabled</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="color:var(--fg-muted)">● Offline</span>
|
||||
<span style="color:var(--fg-muted)">Unavailable</span>
|
||||
<span style="color:var(--fg-muted)">No data</span>
|
||||
<span style="color:var(--fg-muted)">--fg-muted</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user