IMBENJI.NET/Garage-SDKs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a design system for Claude Design, generated from garage_ui

Browse Source 
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
This commit is contained in:
ImBenji
2026-09-23 23:19:02 +01:00
co-authored by Claude Opus 5.5
parent 572c09039f
commit b5e5ed5b75
25 changed files with 3381 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design_system/foundations/shape.html
+77
View File
@@ -0,0 +1,77 @@
<!-- @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>