Add a design system for Claude Design, generated from garage_ui
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
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
572c09039f
commit
b5e5ed5b75
@@ -0,0 +1,135 @@
|
||||
<!-- @dsCard group="Patterns" -->
|
||||
<!doctype html>
|
||||
<html lang="en" data-scheme="carbon" data-density="product">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Hub form</title>
|
||||
<link rel="stylesheet" href="../components.css">
|
||||
<style>
|
||||
/* scaffolding only - the mock screen and the hub's Measure (railWidth = fontSize*18,
|
||||
contentMax = fontSize*56, pageGutter = fontSize*3). every value is a token */
|
||||
html, body { background: var(--chrome); }
|
||||
.screen { width: 1100px; height: 720px; }
|
||||
.shell { height: 100%; align-items: stretch; }
|
||||
|
||||
.rail { width: calc(var(--font-size) * 18); flex: none; display: flex; flex-direction: column; }
|
||||
.rail .wordmark { height: calc(var(--font-size) * 9); display: flex; align-items: center; justify-content: center; }
|
||||
.rail .groups { flex: 1; min-height: 0; overflow: hidden; }
|
||||
.rail .foot { padding: var(--gap-md) var(--gap-md) var(--gap-lg); }
|
||||
|
||||
.workspace { flex: 1; min-width: 0; }
|
||||
/* contentMax plus a pageGutter either side, centred in the pane */
|
||||
.column { width: 100%; max-width: calc(var(--font-size) * (56 + 6)); margin: 0 auto; align-self: center;
|
||||
padding: var(--gap-xxl) calc(var(--font-size) * 3); }
|
||||
.workspace { display: flex; flex-direction: column; }
|
||||
.pane-back { padding: var(--gap-sm) var(--gap-sm) 0; }
|
||||
.column { padding-top: var(--gap-lg); }
|
||||
.column > .page-heading { margin-bottom: var(--gap-md); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="screen">
|
||||
<div class="shell">
|
||||
|
||||
<!-- nav rail: a sunken Panel -->
|
||||
<nav class="panel sunken rail">
|
||||
<div class="wordmark"><span class="text-lg semibold">Garage</span></div>
|
||||
<hr class="divider">
|
||||
<div class="groups">
|
||||
<div class="nav-group">
|
||||
<div class="caption">Settings</div>
|
||||
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /> <circle cx="12" cy="7" r="4" /></svg>Account</button>
|
||||
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /> <path d="m9 12 2 2 4-4" /></svg>Security</button>
|
||||
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 17V7" /> <path d="M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8" /> <path d="M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z" /></svg>Payments</button>
|
||||
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2" /> <rect x="14" y="2" width="8" height="8" rx="1" /></svg>Authorised apps</button>
|
||||
</div>
|
||||
<hr class="divider">
|
||||
<div class="nav-group">
|
||||
<div class="caption">Developer</div>
|
||||
<button class="btn secondary stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z" /> <path d="M8 10v4" /> <path d="M12 10v2" /> <path d="M16 10v6" /></svg>Projects</button>
|
||||
</div>
|
||||
<hr class="divider">
|
||||
<div class="nav-group">
|
||||
<div class="caption">Garage Platform</div>
|
||||
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" /> <path d="M20 2v4" /> <path d="M22 4h-4" /> <circle cx="4" cy="20" r="2" /></svg>Assistant</button>
|
||||
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 15H6a4 4 0 0 0-4 4v2" /> <path d="m14.305 16.53.923-.382" /> <path d="m15.228 13.852-.923-.383" /> <path d="m16.852 12.228-.383-.923" /> <path d="m16.852 17.772-.383.924" /> <path d="m19.148 12.228.383-.923" /> <path d="m19.53 18.696-.382-.924" /> <path d="m20.772 13.852.924-.383" /> <path d="m20.772 16.148.924.383" /> <circle cx="18" cy="15" r="3" /> <circle cx="9" cy="7" r="4" /></svg>Users</button>
|
||||
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" /> <circle cx="16.5" cy="7.5" r=".5" fill="currentColor" /></svg>Roles</button>
|
||||
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 12h-5" /> <path d="M15 8h-5" /> <path d="M19 17V5a2 2 0 0 0-2-2H4" /> <path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3" /></svg>Audit log</button>
|
||||
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" /></svg>Status</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="divider">
|
||||
<div class="foot">
|
||||
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m16 17 5-5-5-5" /> <path d="M21 12H9" /> <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /></svg>Sign out</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- workspace: a routed detail, so the pane carries the way back and the page wears its own heading -->
|
||||
<main class="panel workspace">
|
||||
<div class="pane-back"><button class="btn ghost"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 19-7-7 7-7" /> <path d="M19 12H5" /></svg>Back to project</button></div>
|
||||
<div class="column">
|
||||
<div class="page-heading">
|
||||
<div class="title">Pro licence</div>
|
||||
<div class="subtitle">Something you sell, and what it goes for.</div>
|
||||
<div class="trailing">
|
||||
<button class="btn ghost-destructive"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 11v6" /> <path d="M14 11v6" /> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /> <path d="M3 6h18" /> <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>Delete</button>
|
||||
<button class="btn ghost"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 3h6v6" /> <path d="M10 14 21 3" /> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>Preview checkout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub-heading">
|
||||
<div class="title">Details</div>
|
||||
<div class="subtitle">What it is and how its sold</div>
|
||||
</div>
|
||||
<div class="settings-list">
|
||||
<div class="settings-row">
|
||||
<div class="label">Name<span class="tag">Required</span><span class="subtitle">What a buyer sees</span></div>
|
||||
<div class="field-slot"><div class="field"><input value="Pro licence"></div></div>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<div class="label">SKU<span class="subtitle">How an app asks for it. Fixed once created</span></div>
|
||||
<div class="field-slot"><div class="field readonly mono"><input value="pro_licence" disabled></div></div>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<div class="label">Use case<span class="subtitle">What's being sold, which sets the tax</span></div>
|
||||
<div class="field-slot"><div class="select ghost"><span>Downloadable software</span><svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg></div></div>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<div class="label">Checkout<span class="subtitle">Who takes the card details</span></div>
|
||||
<div class="field-slot"><div class="select ghost"><span>Stripe Checkout</span><svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg></div></div>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<div class="label">Key lifetime<span class="subtitle">Seconds. Empty inherits the project's</span></div>
|
||||
<div class="field-slot"><div class="field error"><input value="a day"></div></div>
|
||||
<div class="error">Has to be a whole number of seconds</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub-heading">
|
||||
<div class="title">Pricing</div>
|
||||
<div class="subtitle">What it costs, and how often</div>
|
||||
<div class="action"><button class="btn ghost"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14" /> <path d="M12 5v14" /></svg>Add price</button></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>Default price</div><span class="subtitle">What it goes on sale at</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="property-row">
|
||||
<div class="label">Price</div>
|
||||
<div class="value"><div class="field secondary"><input value="12.00"><span class="unit">GBP</span></div></div>
|
||||
</div>
|
||||
<div class="property-row">
|
||||
<div class="label">Billing</div>
|
||||
<div class="value"><div class="select secondary"><span>Monthly</span><svg class="icon chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user