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/patterns/states.html
+68
View File
@@ -0,0 +1,68 @@
<!-- @dsCard group="Patterns" -->
<!doctype html>
<html lang="en" data-scheme="carbon" data-density="product">
<head>
<meta charset="utf-8">
<title>Page states</title>
<link rel="stylesheet" href="../components.css">
<style>
/* scaffolding - three workspace Panels on the chrome ground, one state each:
loading (a spinner), empty (one muted line), error (muted message + outline retry) */
html, body { background: var(--chrome); }
.screen { width: 1100px; height: 440px; }
.shell { height: 100%; align-items: stretch; }
.shell > .panel { flex: 1; min-width: 0; display: flex; flex-direction: column;
padding: var(--gap-xxl) var(--gap-xl); }
.shell > .panel > .page-heading { margin-bottom: var(--gap-xxl); }
.fill { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-md); }
.note { padding: var(--gap-md) var(--container-padding); display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-md); }
</style>
</head>
<body>
<div class="screen">
<div class="shell">
<!-- loading -->
<section class="panel">
<div class="page-heading">
<div class="title">Payments</div>
<div class="subtitle">What you've bought, and what you're still paying for.</div>
</div>
<div class="fill"><div class="spinner" role="status" aria-label="Loading"></div></div>
</section>
<!-- empty -->
<section class="panel">
<div class="page-heading">
<div class="title">Projects</div>
<div class="subtitle">Applications you build and sell on Garage.</div>
</div>
<div class="fill">
<div class="muted">No projects yet</div>
</div>
</section>
<!-- error: still a section, with nothing in it -->
<section class="panel">
<div class="page-heading">
<div class="title">Security</div>
<div class="subtitle">Your password, passkeys and signed-in devices.</div>
</div>
<section class="properties-section">
<div class="header">
<svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
<div><div>Passkeys</div><span class="subtitle">Sign in with your device instead of a password</span></div>
</div>
<div class="rows">
<div class="note">
<div class="muted">Couldn't load your passkeys.</div>
<button class="btn outline">Try again</button>
</div>
</div>
</section>
</section>
</div>
</div>
</body>
</html>