18 lines
1.1 KiB
HTML
18 lines
1.1 KiB
HTML
<!-- @dsCard group="Colors" viewport="700x140" name="Text on dark" subtitle="Primary / muted / faint — the three text weights" -->
|
|
<!doctype html><html><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>
|
|
body{margin:0;background:var(--surface-app);font-family:var(--font-sans)}
|
|
.wrap{padding:22px 24px;display:flex;flex-direction:column;gap:14px}
|
|
.row{display:flex;align-items:baseline;gap:16px}
|
|
.lg{font:var(--weight-semibold) var(--text-xl)/1 var(--font-sans)}
|
|
.meta{font:var(--text-2xs)/1 var(--font-mono);color:var(--text-disabled);margin-left:auto}
|
|
</style></head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="row"><span class="lg" style="color:var(--text-primary)">Primary — channel names, values</span><span class="meta">#E6E9EF</span></div>
|
|
<div class="row"><span class="lg" style="color:var(--text-secondary)">Muted — labels, secondary meta</span><span class="meta">#9AA4B2</span></div>
|
|
<div class="row"><span class="lg" style="color:var(--text-disabled)">Faint — disabled, placeholder</span><span class="meta">#626B7A</span></div>
|
|
</div>
|
|
</body></html>
|