ImBenjiandClaude Opus 5.5
b5e5ed5b75
Tokens come out of garage_ui/tool/export_design_tokens_test.dart, the components are CSS on top of them, and the cards cover foundations, components and whole hub and Arcs & Angles screens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F4NWNvYcdeSgqbWMT1VQ7
90 lines
4.6 KiB
HTML
90 lines
4.6 KiB
HTML
<!-- @dsCard group="Foundations" -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Density</title>
|
|
<link rel="stylesheet" href="../components.css">
|
|
<style>
|
|
body { padding: var(--container-padding); }
|
|
.block { margin-top: var(--gap-xl); }
|
|
.block > .caption { margin-bottom: var(--gap-sm); padding: 0 var(--gap-xxs); }
|
|
|
|
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-md); align-items: start; }
|
|
.tier { border: var(--control-border-width) solid var(--panel-border); border-radius: var(--radius-lg); padding: var(--gap-md) 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-sm); }
|
|
.tier > .caption, .tier > .ctl { padding: 0 var(--gap-md); }
|
|
.tier > .ctl { display: flex; }
|
|
.tier > .ctl > .field, .tier > .ctl > .select { flex: 1; }
|
|
.tier .properties-section { margin-top: var(--gap-xxs); }
|
|
|
|
.rows { display: flex; flex-direction: column; }
|
|
.rows .r { display: grid; grid-template-columns: 1.1fr 0.9fr 0.9fr 0.9fr; gap: var(--gap-md); align-items: baseline; padding: var(--gap-sm) var(--gap-xs); }
|
|
.rows .r + .r { border-top: var(--control-border-width) solid var(--divider); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page-heading">
|
|
<div class="title">Density</div>
|
|
<div class="subtitle">Three tiers. Pick one for the app, don't tune it.</div>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<div class="caption">Same controls, three tiers</div>
|
|
<div class="tiers">
|
|
|
|
<div class="gu tier" data-density="compact">
|
|
<div class="caption">Compact</div>
|
|
<div class="ctl"><button class="btn primary">Save</button></div>
|
|
<div class="ctl"><label class="field"><input placeholder="Name"></label></div>
|
|
<div class="ctl"><div class="select"><span>Monthly</span><svg class="icon chevron" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg></div></div>
|
|
<div class="properties-section">
|
|
<div class="rows">
|
|
<div class="property-row"><span class="label">Width</span><div class="value"><label class="field secondary center"><input value="120"><span class="unit">px</span></label></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gu tier" data-density="normal">
|
|
<div class="caption">Normal</div>
|
|
<div class="ctl"><button class="btn primary">Save</button></div>
|
|
<div class="ctl"><label class="field"><input placeholder="Name"></label></div>
|
|
<div class="ctl"><div class="select"><span>Monthly</span><svg class="icon chevron" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg></div></div>
|
|
<div class="properties-section">
|
|
<div class="rows">
|
|
<div class="property-row"><span class="label">Width</span><div class="value"><label class="field secondary center"><input value="120"><span class="unit">px</span></label></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gu tier" data-density="product">
|
|
<div class="caption">Product</div>
|
|
<div class="ctl"><button class="btn primary">Save</button></div>
|
|
<div class="ctl"><label class="field"><input placeholder="Name"></label></div>
|
|
<div class="ctl"><div class="select"><span>Monthly</span><svg class="icon chevron" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg></div></div>
|
|
<div class="properties-section">
|
|
<div class="rows">
|
|
<div class="property-row"><span class="label">Width</span><div class="value"><label class="field secondary center"><input value="120"><span class="unit">px</span></label></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="block">
|
|
<div class="caption">The numbers</div>
|
|
<div class="rows">
|
|
<div class="r"><span></span><span class="medium">Compact</span><span class="medium">Normal</span><span class="medium">Product</span></div>
|
|
<div class="r"><span class="mono muted">font-size</span><span class="mono">10</span><span class="mono">10</span><span class="mono">12</span></div>
|
|
<div class="r"><span class="mono muted">control-height</span><span class="mono">23</span><span class="mono">27</span><span class="mono">33</span></div>
|
|
<div class="r"><span class="mono muted">chrome-bar-height</span><span class="mono">31</span><span class="mono">37</span><span class="mono">43</span></div>
|
|
<div class="r"><span class="muted">For</span><span>Dense desktop tools</span><span>The same, roomier</span><span>Web and product apps</span></div>
|
|
<div class="r"><span class="muted">Used by</span><span>Arcs & Angles</span><span>A&A "Comfortable"</span><span>The hub</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|