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,94 @@
|
||||
<!-- @dsCard group="Components" -->
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Button groups</title>
|
||||
<link rel="stylesheet" href="../components.css">
|
||||
<style>
|
||||
.ds { padding: 0 var(--container-padding) var(--container-padding); }
|
||||
.ds-block { padding: 0 var(--gap-xs); }
|
||||
.ds-half + .ds-half { margin-top: var(--gap-lg); }
|
||||
.ds-block > .caption { padding-bottom: var(--gap-xs); }
|
||||
.ds-half { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); }
|
||||
.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">Button groups</div>
|
||||
<div class="subtitle">Controls joined into one. Only the outer corners round.</div>
|
||||
</div>
|
||||
|
||||
<div class="ds-half">
|
||||
<div class="ds-block">
|
||||
<div class="caption">Button welded to a field</div>
|
||||
<div class="btn-group span">
|
||||
<label class="field grow"><input value="gk_live_4f8a2c91" aria-label="Client ID"></label>
|
||||
<button class="btn secondary icon-only" aria-label="Copy"><svg class="icon" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ds-block">
|
||||
<div class="caption">Segmented choice</div>
|
||||
<div class="btn-group fill">
|
||||
<button class="btn secondary">Off</button>
|
||||
<button class="btn primary">Optional</button>
|
||||
<button class="btn secondary">Required</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ds-half">
|
||||
<div class="ds-block">
|
||||
<div class="caption">Vertical, with a group nested in it</div>
|
||||
<div class="btn-group vertical span">
|
||||
<label class="field"><input placeholder="Email" aria-label="Email"></label>
|
||||
<div class="btn-group span">
|
||||
<label class="field grow"><input placeholder="Password" type="password" aria-label="Password"></label>
|
||||
<button class="btn outline icon-only" aria-label="Show password"><svg class="icon" viewBox="0 0 24 24"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" /><circle cx="12" cy="12" r="3" /></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ds-block">
|
||||
<div class="caption">Toolbar toggles - primary on, outline off</div>
|
||||
<div class="chrome-bar">
|
||||
<button class="btn primary icon-only" aria-label="Bold"><svg class="icon" viewBox="0 0 24 24"><path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" /></svg></button>
|
||||
<button class="btn outline icon-only" aria-label="Italic"><svg class="icon" viewBox="0 0 24 24"><line x1="19" x2="10" y1="4" y2="4" /><line x1="14" x2="5" y1="20" y2="20" /><line x1="15" x2="9" y1="4" y2="20" /></svg></button>
|
||||
<button class="btn outline icon-only" aria-label="Underline"><svg class="icon" viewBox="0 0 24 24"><path d="M6 4v6a6 6 0 0 0 12 0V4" /><line x1="4" x2="20" y1="20" y2="20" /></svg></button>
|
||||
<span class="vr"></span>
|
||||
<div class="btn-group">
|
||||
<button class="btn primary icon-only" aria-label="Align left"><svg class="icon" viewBox="0 0 24 24"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg></button>
|
||||
<button class="btn outline icon-only" aria-label="Align centre"><svg class="icon" viewBox="0 0 24 24"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg></button>
|
||||
<button class="btn outline icon-only" aria-label="Align right"><svg class="icon" viewBox="0 0 24 24"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sub-heading">
|
||||
<div class="title">Use it for</div>
|
||||
</div>
|
||||
<ul class="ds-rules">
|
||||
<li>A field with its one action welded on: a spanning group, the field grows, then a secondary IconButton.</li>
|
||||
<li>Groups nest. A corner only rounds where both groups agree it's an outer one.</li>
|
||||
<li>A segmented choice: fill the group, chosen one primary, the rest secondary, labels centred.</li>
|
||||
<li>Editor toolbar toggles: primary when on, outline when off.</li>
|
||||
</ul>
|
||||
|
||||
<div class="sub-heading">
|
||||
<div class="title">Dont</div>
|
||||
</div>
|
||||
<ul class="ds-rules">
|
||||
<li>Leave a segmented control shrunk to its labels. It should span its field.</li>
|
||||
<li>Mix the primary-on toggle pattern and Toggle on the same surface.</li>
|
||||
<li>Use a secondary off state unless its a master switch whose off state matters.</li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user