281 lines
14 KiB
HTML
281 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<!-- @dsCard group="Brand" name="Spacing Tokens" subtitle="8px base grid — space-1 through space-24" viewport="700x200" -->
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<link rel="stylesheet" href="../styles.css?v=2">
|
||
<style>
|
||
body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-mono); color: var(--fg-body); }
|
||
|
||
.section-label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; }
|
||
|
||
/* Token rows */
|
||
.token-row {
|
||
display: grid;
|
||
grid-template-columns: 160px 40px 1fr 220px;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 7px 0;
|
||
border-bottom: 1px solid var(--bg-surface);
|
||
}
|
||
.token-row:last-child { border-bottom: none; }
|
||
.token-name { font-size: 10px; color: var(--fg-body); letter-spacing: 0.04em; }
|
||
.token-val { font-size: 10px; color: var(--fg-muted); text-align: right; }
|
||
.bar-track { height: 6px; background: var(--bg-surface); border-radius: 1px; position: relative; }
|
||
.bar-fill { height: 100%; background: var(--gold-dim); border-radius: 1px; }
|
||
.use-cases { font-size: 8px; color: var(--fg-muted); line-height: 1.5; letter-spacing: 0.02em; }
|
||
|
||
/* Demo area */
|
||
.demo-section { margin-top: 16px; border-top: 1px solid var(--bg-surface); padding-top: 14px; }
|
||
.demo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
|
||
.demo-card {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--bg-active);
|
||
border-radius: 4px;
|
||
padding: 10px 12px;
|
||
}
|
||
.demo-label { font-size: 8px; color: var(--gold-dim); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
|
||
|
||
/* Chip demo */
|
||
.chip { display: inline-flex; align-items: center; gap: var(--space-chip); background: var(--bg-active); border-radius: 3px; padding: 2px var(--space-element); font-size: 9px; color: var(--fg-body); }
|
||
.chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright); flex-shrink: 0; }
|
||
|
||
/* Button demo */
|
||
.btn { display: inline-flex; align-items: center; gap: var(--space-element); border: 1px solid var(--gold-dim); border-radius: 3px; padding: var(--space-component) var(--space-group); font-size: 10px; font-family: var(--font-mono); color: var(--fg-body); background: transparent; cursor: pointer; }
|
||
|
||
/* Form field demo */
|
||
.field { display: flex; flex-direction: column; gap: var(--space-component); }
|
||
.field-label { font-size: 8px; color: var(--fg-muted); letter-spacing: 0.1em; text-transform: uppercase; }
|
||
.field-input { background: var(--bg-shell); border: 1px solid var(--bg-border); border-radius: 3px; padding: var(--space-component) var(--space-group); font-size: 10px; font-family: var(--font-mono); color: var(--fg-body); }
|
||
|
||
/* Card demo */
|
||
.demo-card-inner { background: var(--bg-shell); border: 1px solid var(--bg-active); border-radius: 4px; padding: var(--space-group); display: flex; flex-direction: column; gap: var(--space-component); }
|
||
.card-title { font-size: 11px; font-weight: 600; color: var(--fg-heading); }
|
||
.card-sub { font-size: 9px; color: var(--fg-muted); }
|
||
|
||
/* Panel demo */
|
||
.demo-panel { background: var(--bg-shell); border-left: 2px solid var(--gold-dim); padding: var(--space-panel); display: flex; flex-direction: column; gap: var(--space-element); border-radius: 0 3px 3px 0; }
|
||
.panel-header { font-size: 10px; font-weight: 600; color: var(--fg-heading); letter-spacing: 0.08em; text-transform: uppercase; }
|
||
.panel-row { display: flex; justify-content: space-between; font-size: 9px; color: var(--fg-secondary); }
|
||
|
||
/* Section demo */
|
||
.demo-sections { display: flex; flex-direction: column; gap: var(--space-section); }
|
||
.section-block { background: var(--bg-shell); border-radius: 3px; padding: var(--space-group); border: 1px solid var(--bg-active); }
|
||
.section-title { font-size: 10px; font-weight: 600; color: var(--fg-secondary); letter-spacing: 0.08em; }
|
||
|
||
/* Spacing indicator overlay */
|
||
.space-indicator {
|
||
display: inline-block;
|
||
background: rgba(250,189,47,0.15);
|
||
border: 1px dashed rgba(250,189,47,0.4);
|
||
vertical-align: middle;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="section-label">Spacing tokens</div>
|
||
|
||
<!-- TOKEN TABLE -->
|
||
<div style="margin-bottom: 16px;">
|
||
<!-- MICRO -->
|
||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:2px;">Micro — component internals</div>
|
||
|
||
<div class="token-row">
|
||
<div class="token-name">--space-chip</div>
|
||
<div class="token-val">4px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:4%"></div></div>
|
||
<div class="use-cases">badge padding · icon–label gap · border offsets · micro nudges</div>
|
||
</div>
|
||
<div class="token-row">
|
||
<div class="token-name">--space-element</div>
|
||
<div class="token-val">8px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:8%"></div></div>
|
||
<div class="use-cases">chip/pill padding · inline gaps · icon inset · tight row spacing</div>
|
||
</div>
|
||
<div class="token-row">
|
||
<div class="token-name">--space-component</div>
|
||
<div class="token-val">12px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:12%"></div></div>
|
||
<div class="use-cases">button vertical padding · input inset · list row gap · label-to-field</div>
|
||
</div>
|
||
|
||
<!-- COMPONENT -->
|
||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:10px;">Component — internal layout</div>
|
||
|
||
<div class="token-row">
|
||
<div class="token-name">--space-group</div>
|
||
<div class="token-val">16px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:16%"></div></div>
|
||
<div class="use-cases">card inset · input horizontal padding · form field gap · default gap</div>
|
||
</div>
|
||
<div class="token-row">
|
||
<div class="token-name">--space-cluster</div>
|
||
<div class="token-val">20px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:20%"></div></div>
|
||
<div class="use-cases">grouped nav items · related form sections · compact panel inset</div>
|
||
</div>
|
||
<div class="token-row">
|
||
<div class="token-name">--space-panel</div>
|
||
<div class="token-val">24px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:24%"></div></div>
|
||
<div class="use-cases">sidebar/panel inset · modal body · drawer padding · section subheader gap</div>
|
||
</div>
|
||
|
||
<!-- LAYOUT -->
|
||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:10px;">Layout — between components & sections</div>
|
||
|
||
<div class="token-row">
|
||
<div class="token-name">--space-block</div>
|
||
<div class="token-val">32px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:32%"></div></div>
|
||
<div class="use-cases">content block gaps · card grid gutter · toolbar height</div>
|
||
</div>
|
||
<div class="token-row">
|
||
<div class="token-name">--space-content</div>
|
||
<div class="token-val">40px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:40%"></div></div>
|
||
<div class="use-cases">major content group spacing · dialog padding · sub-section gap</div>
|
||
</div>
|
||
<div class="token-row">
|
||
<div class="token-name">--space-section</div>
|
||
<div class="token-val">48px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:48%"></div></div>
|
||
<div class="use-cases">page section breaks · feature group dividers · hero subheading gap</div>
|
||
</div>
|
||
|
||
<!-- PAGE -->
|
||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:10px;">Page — large layout & full-bleed</div>
|
||
|
||
<div class="token-row">
|
||
<div class="token-name">--space-region</div>
|
||
<div class="token-val">64px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:64%; background:var(--bg-active)"></div></div>
|
||
<div class="use-cases">hero vertical padding · layout area spacing · large feature gaps</div>
|
||
</div>
|
||
<div class="token-row">
|
||
<div class="token-name">--space-zone</div>
|
||
<div class="token-val">80px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:80%; background:var(--bg-active)"></div></div>
|
||
<div class="use-cases">page-scale layout spacing · full-width section vertical rhythm</div>
|
||
</div>
|
||
<div class="token-row">
|
||
<div class="token-name">--space-canvas</div>
|
||
<div class="token-val">96px</div>
|
||
<div class="bar-track"><div class="bar-fill" style="width:96%; background:var(--bg-active)"></div></div>
|
||
<div class="use-cases">page margins · full-bleed hero top padding · maximum layout gutter</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LIVE DEMOS -->
|
||
<div class="demo-section">
|
||
<div class="section-label">In use</div>
|
||
<div class="demo-grid">
|
||
|
||
<!-- Chip + button using micro spacing -->
|
||
<div class="demo-card">
|
||
<div class="demo-label">chip · space-chip + space-element</div>
|
||
<div style="display:flex;flex-direction:column;gap:var(--space-element);">
|
||
|
||
<!-- space-chip annotated -->
|
||
<div style="display:flex;align-items:center;font-size:8px;color:var(--fg-muted);gap:0;">
|
||
<span style="white-space:nowrap">space-chip</span>
|
||
<span style="margin:0 3px;color:var(--fg-muted)">→</span>
|
||
<div class="chip-dot" style="width:5px;height:5px;border-radius:50%;background:var(--gold-bright);flex-shrink:0"></div>
|
||
<div class="space-indicator" style="width:var(--space-chip);height:10px;"></div>
|
||
<span style="font-size:9px;color:var(--fg-body)">ONLINE</span>
|
||
</div>
|
||
|
||
<!-- space-element annotated -->
|
||
<div style="display:flex;align-items:center;font-size:8px;color:var(--fg-muted);gap:0;">
|
||
<span style="white-space:nowrap">space-element</span>
|
||
<span style="margin:0 3px;color:var(--fg-muted)">→</span>
|
||
<div class="chip" style="gap:0;padding:0 var(--space-element);">▶</div>
|
||
<div class="space-indicator" style="width:var(--space-element);height:10px;"></div>
|
||
<span style="font-size:9px;color:var(--fg-body)">Deploy</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Form field using component spacing -->
|
||
<div class="demo-card">
|
||
<div class="demo-label">input · space-component label→field</div>
|
||
<div style="display:flex;flex-direction:column;align-items:flex-start;gap:0;">
|
||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.1em;text-transform:uppercase;background:var(--bg-active);padding:2px 6px;border-radius:2px;">Target node</div>
|
||
<div style="display:flex;align-items:center;gap:6px;padding:0 4px;">
|
||
<div class="space-indicator" style="width:8px;height:var(--space-component);"></div>
|
||
<span style="font-size:8px;color:var(--fg-muted);">← space-component (12px)</span>
|
||
</div>
|
||
<div class="field-input" style="width:100%;box-sizing:border-box;">cluster-01 · us-east-1</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card vs Panel inset comparison -->
|
||
<div class="demo-card" style="grid-column: span 2">
|
||
<div class="demo-label">inset comparison · space-group (16px) vs space-panel (24px)</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||
|
||
<!-- space-group -->
|
||
<div>
|
||
<div style="font-size:8px;color:var(--fg-muted);margin-bottom:4px;">space-group · compact card</div>
|
||
<div style="position:relative;background:var(--bg-shell);border:1px solid var(--bg-active);border-radius:4px;display:flex;">
|
||
<div class="space-indicator" style="width:var(--space-group);align-self:stretch;"></div>
|
||
<div style="padding:var(--space-group) var(--space-group) var(--space-group) 0;flex:1;display:flex;flex-direction:column;gap:0;">
|
||
<div class="space-indicator" style="height:var(--space-group);width:100%;margin-bottom:0;"></div>
|
||
<div style="padding-bottom:var(--space-group);">
|
||
<div class="card-title">Node Alpha — 07</div>
|
||
<div class="card-sub" style="margin-top:var(--space-component);">CPU 34% · MEM 61%</div>
|
||
</div>
|
||
<div class="space-indicator" style="height:var(--space-group);width:100%;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:8px;color:var(--fg-muted);margin-top:4px;">← 16px on all sides</div>
|
||
</div>
|
||
|
||
<!-- space-panel -->
|
||
<div>
|
||
<div style="font-size:8px;color:var(--fg-muted);margin-bottom:4px;">space-panel · open panel</div>
|
||
<div style="position:relative;background:var(--bg-shell);border-left:2px solid var(--gold-dim);border-radius:0 4px 4px 0;display:flex;">
|
||
<div class="space-indicator" style="width:var(--space-panel);align-self:stretch;"></div>
|
||
<div style="padding:0 var(--space-panel) 0 0;flex:1;display:flex;flex-direction:column;gap:0;">
|
||
<div class="space-indicator" style="height:var(--space-panel);width:100%;"></div>
|
||
<div style="padding-bottom:var(--space-panel);">
|
||
<div class="panel-header">System status</div>
|
||
<div class="panel-row" style="margin-top:var(--space-element);"><span>Pipeline</span><span style="color:var(--gold-bright)">READY</span></div>
|
||
<div class="panel-row"><span>Node 07</span><span style="color:var(--red-bright)">OFFLINE</span></div>
|
||
</div>
|
||
<div class="space-indicator" style="height:var(--space-panel);width:100%;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:8px;color:var(--fg-muted);margin-top:4px;">← 24px on all sides</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Two sections separated by space-section -->
|
||
<div class="demo-card" style="grid-column: span 2">
|
||
<div class="demo-label">page sections · space-section (48px between blocks)</div>
|
||
<div style="display:flex;flex-direction:column;gap:0;">
|
||
<div class="section-block">
|
||
<div class="section-title">Overview</div>
|
||
<div style="font-size:9px;color:var(--fg-muted);margin-top:4px">Cluster health · 12 nodes active</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px;padding:0 8px;">
|
||
<div class="space-indicator" style="width:8px;height:var(--space-section);"></div>
|
||
<div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.08em;">space-section · 48px</div>
|
||
</div>
|
||
<div class="section-block">
|
||
<div class="section-title">Deploy log</div>
|
||
<div style="font-size:9px;color:var(--fg-muted);margin-top:4px">Last deploy 14 min ago · pipeline v2.4.1</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|