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
78 lines
3.6 KiB
HTML
78 lines
3.6 KiB
HTML
<!-- @dsCard group="Foundations" -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Shape</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); }
|
|
|
|
.radii { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-md); }
|
|
.radius { display: flex; flex-direction: column; gap: var(--gap-xs); }
|
|
.radius .box { height: calc(var(--control-height) * 1.6); background: var(--card); border: var(--control-border-width) solid var(--control-border); }
|
|
|
|
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }
|
|
.facts .card { display: flex; flex-direction: column; gap: var(--gap-xxs); padding: var(--gap-md) var(--gap-lg); }
|
|
|
|
.demo { border-radius: var(--radius-lg); overflow: hidden; border: var(--control-border-width) solid var(--panel-border); }
|
|
.demo .shell { height: calc(var(--control-height) * 5); }
|
|
.demo .rail { width: 30%; }
|
|
.demo .main { flex: 1; }
|
|
.demo .panel { display: flex; flex-direction: column; }
|
|
.demo .panel .body { flex: 1; padding: 0 var(--gap-md) var(--gap-md); }
|
|
.demo .foot { padding: var(--gap-sm) var(--gap-lg); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page-heading">
|
|
<div class="title">Shape</div>
|
|
<div class="subtitle">Small radii, flat surfaces. Borders and surface steps do the separating.</div>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<div class="caption">Radii</div>
|
|
<div class="radii">
|
|
<div class="radius"><div class="box" style="border-radius: var(--radius-xs)"></div><span class="mono">radius-xs</span><span class="mono muted">2</span></div>
|
|
<div class="radius"><div class="box" style="border-radius: var(--radius-sm)"></div><span class="mono">radius-sm</span><span class="mono muted">4</span></div>
|
|
<div class="radius"><div class="box" style="border-radius: var(--radius-md)"></div><span class="mono">radius-md</span><span class="mono muted">6 · controls</span></div>
|
|
<div class="radius"><div class="box" style="border-radius: var(--radius-lg)"></div><span class="mono">radius-lg</span><span class="mono muted">8</span></div>
|
|
<div class="radius"><div class="box" style="border-radius: var(--radius-xl)"></div><span class="mono">radius-xl</span><span class="mono muted">10 · cards</span></div>
|
|
<div class="radius"><div class="box" style="border-radius: var(--radius-xxl)"></div><span class="mono">radius-xxl</span><span class="mono muted">12 · dialogs</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="block">
|
|
<div class="caption">Panels</div>
|
|
<div class="facts">
|
|
<div class="card"><span class="mono">panel-radius</span><span class="mono muted">10</span></div>
|
|
<div class="card"><span class="mono">panel-gap</span><span class="mono muted">5</span></div>
|
|
<div class="card"><span class="mono">panel-border-width</span><span class="mono muted">1.15</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<div class="caption">Flat, no shadows</div>
|
|
<div class="demo">
|
|
<div class="chrome-bar"><span class="medium">Chrome</span></div>
|
|
<div class="shell">
|
|
<div class="panel sunken rail">
|
|
<div class="panel-header"><span class="title">Rail</span></div>
|
|
<div class="body muted">Sunken panel</div>
|
|
</div>
|
|
<div class="panel active main">
|
|
<div class="panel-header"><span class="title">Workspace</span></div>
|
|
<div class="body muted">The lit panel. Only one at a time.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="foot muted">Chrome ground, panels standing on it, panel-gap gutters between.</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|