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
85 lines
3.0 KiB
HTML
85 lines
3.0 KiB
HTML
<!-- @dsCard group="Components" -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Select</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-xl); padding: 0 var(--gap-xs); align-items: start; }
|
|
.ds-cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-xs); min-width: 0; }
|
|
.ds-open { display: flex; flex-direction: column; gap: var(--gap-xs); align-items: flex-start; padding: var(--gap-lg) var(--gap-xs) 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">Select</div>
|
|
<div class="subtitle">One value from a list, in a popup.</div>
|
|
</div>
|
|
|
|
<div class="ds-grid">
|
|
<div class="ds-cell">
|
|
<div class="caption">Outline - the default</div>
|
|
<div class="select" role="button">
|
|
<span>Engineering</span>
|
|
<svg class="icon chevron" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ds-cell">
|
|
<div class="caption">Secondary - in a property row</div>
|
|
<div class="select secondary" role="button">
|
|
<span>Monthly</span>
|
|
<svg class="icon chevron" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ds-cell">
|
|
<div class="caption">Ghost - in a settings row</div>
|
|
<div class="select ghost" role="button">
|
|
<span>All regions</span>
|
|
<svg class="icon chevron" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ds-open">
|
|
<div class="caption">Open</div>
|
|
<div class="select" role="button">
|
|
<span>Engineering</span>
|
|
<svg class="icon chevron" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg>
|
|
</div>
|
|
<div class="select-popup" role="listbox">
|
|
<div class="option" role="option">Design</div>
|
|
<div class="option selected" role="option" aria-selected="true">Engineering<svg class="icon" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" /></svg></div>
|
|
<div class="option is-hovered" role="option">Finance</div>
|
|
<div class="option" role="option">Support</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Use it for</div>
|
|
</div>
|
|
<ul class="ds-rules">
|
|
<li>Outline by default, beside other outline fields.</li>
|
|
<li>Secondary in a property row. The row forces it anyway.</li>
|
|
<li>Ghost in a settings row, or where it reports a value rather than offering a control.</li>
|
|
</ul>
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Dont</div>
|
|
</div>
|
|
<ul class="ds-rules">
|
|
<li>Give a toolbar select a literal width.</li>
|
|
<li>Put a ghost select inside a properties section.</li>
|
|
</ul>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|