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
67 lines
2.3 KiB
HTML
67 lines
2.3 KiB
HTML
<!-- @dsCard group="Components" -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Dialogs</title>
|
|
<link rel="stylesheet" href="../components.css">
|
|
<style>
|
|
.ds { padding: 0 var(--container-padding) var(--container-padding); }
|
|
.ds-stage { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); padding: var(--gap-xxl) var(--container-padding); border-radius: var(--radius-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">Dialogs</div>
|
|
<div class="subtitle">A small confirm, over a dimmed page.</div>
|
|
</div>
|
|
|
|
<div class="modal-backdrop ds-stage">
|
|
<div class="dialog" role="alertdialog" aria-labelledby="d1-title">
|
|
<div class="body">
|
|
<div class="title" id="d1-title">Delete this product?</div>
|
|
<div class="content">People who already bought it keep their licence. It cant be sold again.</div>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="btn outline">Cancel</button>
|
|
<button class="btn destructive">Delete</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dialog" role="alertdialog" aria-labelledby="d2-title">
|
|
<div class="body">
|
|
<div class="title" id="d2-title">Publish changes?</div>
|
|
<div class="content">The new price goes live at checkout straight away.</div>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="btn outline">Cancel</button>
|
|
<button class="btn primary">Publish</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Use it for</div>
|
|
</div>
|
|
<ul class="ds-rules">
|
|
<li>showDialog with an AlertDialog: a title, a line of content and its actions.</li>
|
|
<li>Cancel is outline. Confirm is primary, or destructive when it removes something.</li>
|
|
<li>Bigger jobs, like settings or export, go in a pane overlay instead.</li>
|
|
</ul>
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Dont</div>
|
|
</div>
|
|
<ul class="ds-rules">
|
|
<li>Constrain the dialog's width. It caps itself at the dialog max width.</li>
|
|
<li>Build the action row by hand. The dialog draws its own band.</li>
|
|
</ul>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|