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/components/selection-controls.html
+59
View File
@@ -0,0 +1,59 @@
<!-- @dsCard group="Components" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selection controls</title>
<link rel="stylesheet" href="../components.css">
<style>
.ds { padding: 0 var(--container-padding) var(--container-padding); }
.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); padding: 0 var(--gap-xs); }
.ds-cell { display: flex; flex-direction: column; gap: var(--gap-md); }
.ds-cell > .caption { margin-bottom: calc(var(--gap-xs) - var(--gap-md)); }
.ds-pair { display: inline-flex; align-items: center; gap: var(--gap-sm); }
.ds-rules { margin: 0; padding: 0 var(--gap-xs) 0 var(--gap-xl); display: flex; flex-direction: column; gap: var(--gap-xxs); }
</style>
</head>
<body>
<main class="ds">
<div class="sub-heading">
<div class="title">Selection controls</div>
<div class="subtitle">On or off. Checkbox or Switch, one per surface.</div>
</div>
<div class="ds-grid">
<div class="ds-cell">
<div class="caption">Checkbox</div>
<label class="ds-pair"><span class="checkbox" role="checkbox" aria-checked="false"></span>Snap to grid</label>
<label class="ds-pair"><span class="checkbox checked" role="checkbox" aria-checked="true"></span>Show labels</label>
</div>
<div class="ds-cell">
<div class="caption">Switch</div>
<label class="ds-pair"><span class="switch" role="switch" aria-checked="false"></span>Email receipts</label>
<label class="ds-pair"><span class="switch on" role="switch" aria-checked="true"></span>Active</label>
<label class="ds-pair muted"><span class="switch disabled" role="switch" aria-checked="false" aria-disabled="true"></span>Managed by your organisation</label>
</div>
</div>
<div class="sub-heading">
<div class="title">Use it for</div>
</div>
<ul class="ds-rules">
<li>Checkbox in dense editor panels. Arcs and Angles uses it throughout.</li>
<li>Switch in rows on a product page. The hub uses it in settings rows.</li>
</ul>
<div class="sub-heading">
<div class="title">Dont</div>
</div>
<ul class="ds-rules">
<li>Mix checkboxes and switches on one surface.</li>
<li>Recolour the track, thumb or tick. The accent is primary.</li>
</ul>
</main>
</body>
</html>