ImBenjiandClaude Opus 5.5
b5e5ed5b75
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
60 lines
2.2 KiB
HTML
60 lines
2.2 KiB
HTML
<!-- @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>
|