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
113 lines
6.4 KiB
HTML
113 lines
6.4 KiB
HTML
<!-- @dsCard group="Patterns" -->
|
|
<!doctype html>
|
|
<html lang="en" data-scheme="carbon" data-density="compact">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Settings pane</title>
|
|
<link rel="stylesheet" href="../components.css">
|
|
<style>
|
|
/* scaffolding - the editor's chrome at dialog size: 580 x 420 at compact, a 176 rail
|
|
and a content Panel on the chrome ground */
|
|
html, body { background: var(--background); }
|
|
.stage { width: 700px; height: 520px; display: flex; align-items: center; justify-content: center; }
|
|
.pane { width: 580px; height: 420px; border-radius: var(--panel-radius); overflow: hidden; }
|
|
.shell { height: 100%; align-items: stretch; }
|
|
|
|
.rail { width: 176px; flex: none; display: flex; flex-direction: column; }
|
|
.rail .search { padding: var(--gap-sm); }
|
|
/* the editor's rail is narrower than the hub's, so its categories inset gapSm not gapMd */
|
|
.rail .nav-group { padding-inline: var(--gap-sm); }
|
|
|
|
.content { flex: 1; min-width: 0; }
|
|
.content .scroll { padding: var(--gap-xl) var(--gap-sm) var(--gap-xxl); }
|
|
.content .page-heading { margin-bottom: var(--gap-lg); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="stage">
|
|
<div class="pane">
|
|
<div class="shell">
|
|
|
|
<nav class="panel sunken rail">
|
|
<div class="search"><label class="field stretch"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 21-4.34-4.34" /> <circle cx="11" cy="11" r="8" /></svg><input placeholder="Search"></label></div>
|
|
<hr class="divider">
|
|
<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"><rect width="20" height="14" x="2" y="5" rx="2" /> <line x1="2" x2="22" y1="10" y2="10" /> <path d="M6 14h2" /></svg>Billing</button>
|
|
<button class="btn secondary stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" /> <circle cx="13.5" cy="6.5" r=".5" fill="currentColor" /> <circle cx="17.5" cy="10.5" r=".5" fill="currentColor" /> <circle cx="6.5" cy="12.5" r=".5" fill="currentColor" /> <circle cx="8.5" cy="7.5" r=".5" fill="currentColor" /></svg>Appearance</button>
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22v-5" /> <path d="M15 8V2" /> <path d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z" /> <path d="M9 8V2" /></svg>Integrations</button>
|
|
</div>
|
|
<hr class="divider">
|
|
<div class="nav-group">
|
|
<div class="caption">Editor</div>
|
|
<button class="btn ghost stretch align-left"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 8h.01" /> <path d="M12 12h.01" /> <path d="M14 8h.01" /> <path d="M16 12h.01" /> <path d="M18 8h.01" /> <path d="M6 8h.01" /> <path d="M7 16h10" /> <path d="M8 12h.01" /> <rect width="20" height="16" x="2" y="4" rx="2" /></svg>Keymap</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="panel content">
|
|
<div class="scroll">
|
|
<div class="page-heading">
|
|
<div class="title">Appearance</div>
|
|
<div class="subtitle">How the editor and the map are drawn.</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>Editor</div><span class="subtitle">Colours the interface itself is drawn in</span></div>
|
|
</div>
|
|
<div class="rows">
|
|
<div class="property-row">
|
|
<div class="label">Colour scheme</div>
|
|
<div class="value"><div class="select secondary"><span>Carbon</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="property-row">
|
|
<div class="label">Accent</div>
|
|
<div class="value"><div class="select secondary"><span>Default</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="property-row">
|
|
<div class="label">Dark mode</div>
|
|
<div class="value"><span class="checkbox checked"></span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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>Interface</div><span class="subtitle">How much room a control takes up</span></div>
|
|
</div>
|
|
<div class="rows">
|
|
<div class="property-row">
|
|
<div class="label">Density</div>
|
|
<div class="value"><div class="select secondary"><span>Compact</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>
|
|
|
|
<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>Canvas</div><span class="subtitle">The map's own colours, separate from the editor's</span></div>
|
|
</div>
|
|
<div class="rows">
|
|
<div class="property-row">
|
|
<div class="label">Colour scheme</div>
|
|
<div class="value"><div class="select secondary"><span>Follow editor</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="property-row">
|
|
<div class="label">Dark mode</div>
|
|
<div class="value"><span class="checkbox checked"></span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|