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/text-fields.html
+98
View File
@@ -0,0 +1,98 @@
<!-- @dsCard group="Components" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text fields</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 1fr; gap: var(--gap-lg) var(--gap-xl); padding: 0 var(--gap-xs); }
.ds-cell { display: flex; flex-direction: column; gap: var(--gap-xs); min-width: 0; }
.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">Text fields</div>
<div class="subtitle">Outline for free text, secondary for values.</div>
</div>
<div class="ds-grid">
<div class="ds-cell">
<div class="caption">Outline - the default</div>
<label class="field stretch"><input placeholder="Product name" aria-label="Product name"></label>
</div>
<div class="ds-cell">
<div class="caption">Outline, filled in</div>
<label class="field stretch"><input value="Pro plan" aria-label="Product name"></label>
</div>
<div class="ds-cell">
<div class="caption">With a leading icon</div>
<label class="field stretch">
<svg class="icon" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg>
<input placeholder="Search" aria-label="Search">
</label>
</div>
<div class="ds-cell">
<div class="caption">Secondary</div>
<label class="field secondary stretch"><input value="1280" aria-label="Width"></label>
</div>
<div class="ds-cell">
<div class="caption">Read only</div>
<label class="field secondary readonly stretch"><input value="prod_8f2k1c" readonly disabled aria-label="Product ID"></label>
</div>
<div class="ds-cell">
<div class="caption">Numeric, centred, with a unit</div>
<label class="field secondary center stretch">
<input value="24" aria-label="Stroke width">
<span class="unit">px</span>
</label>
</div>
<div class="ds-cell">
<div class="caption">Error - the outline reddens, never the fill</div>
<label class="field error stretch"><input value="pro plan!" aria-label="Slug"></label>
</div>
<div class="ds-cell">
<div class="caption">Outline, hovered</div>
<label class="field stretch is-hovered"><input value="Pro plan" aria-label="Product name"></label>
</div>
<div class="ds-cell">
<div class="caption">Read only, monospace - ids and skus</div>
<label class="field secondary readonly mono stretch"><input value="usr_8f2c41d9a7" readonly disabled aria-label="User ID"></label>
</div>
</div>
<div class="sub-heading">
<div class="title">Use it for</div>
</div>
<ul class="ds-rules">
<li>Outline for free text: names, search, a composer, a form.</li>
<li>Secondary for numeric property values and read-only values.</li>
<li>Inside a property row the field is forced to secondary. You dont pick.</li>
<li>A read-only value is a read-only, disabled field. Never bare text.</li>
</ul>
<div class="sub-heading">
<div class="title">Dont</div>
</div>
<ul class="ds-rules">
<li>Hand-roll a red line under a field. Use the row's error slot.</li>
<li>Put a secondary field in a settings list, or an outline one in a properties section.</li>
<li>Colour or size the icon. The field does it.</li>
</ul>
</main>
</body>
</html>