Paul Roberts
16989d834c
Lint / lint (push) Has been cancelled
Initial repository scaffold: - design.md (google-labs-code/design.md format) as canonical token + guidelines source - brand assets, foundations, tokens (W3C-style JSON) - 12 component primitives, each with labeled anatomy.svg and spec README - light / dark / high-contrast themes, web/mobile/email/print/presentation templates - docs (getting started, principles, a11y, voice & tone, contributing) - runnable web example, token build script stub, CI placeholder Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
88 lines
4.6 KiB
XML
88 lines
4.6 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 440" width="760" height="440" font-family="Inter, Arial, sans-serif" role="img" aria-label="Dropdown anatomy">
|
||
<title>Dropdown / Menu anatomy</title>
|
||
<desc>Labeled diagram of a KDC dropdown menu: trigger, menu surface, item, leading icon, shortcut, divider, group label, destructive item, hover state.</desc>
|
||
|
||
<rect width="760" height="440" fill="#F7F8FA"/>
|
||
|
||
<!-- trigger -->
|
||
<rect x="200" y="60" width="160" height="36" rx="8" fill="#FFFFFF" stroke="#D9DCE3"/>
|
||
<text x="216" y="83" fill="#111827" font-size="13" font-weight="600">Actions</text>
|
||
<g transform="translate(332 76)" stroke="#6B7280" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="m0 0 6 6 6-6"/>
|
||
</g>
|
||
|
||
<!-- menu surface -->
|
||
<g>
|
||
<rect x="200" y="108" width="240" height="240" rx="12" fill="#FFFFFF"/>
|
||
<rect x="200" y="108" width="240" height="240" rx="12" fill="none" stroke="#EDEFF3"/>
|
||
|
||
<!-- group label -->
|
||
<text x="216" y="130" fill="#6B7280" font-size="11" font-weight="700">PROJECT</text>
|
||
|
||
<!-- item -->
|
||
<rect x="208" y="138" width="224" height="32" rx="6" fill="#FFFFFF"/>
|
||
<g transform="translate(220 148)" stroke="#374151" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4z"/>
|
||
</g>
|
||
<text x="248" y="160" fill="#111827" font-size="13">Rename</text>
|
||
<text x="416" y="160" text-anchor="end" fill="#6B7280" font-size="11">⌘R</text>
|
||
|
||
<!-- item (hover) -->
|
||
<rect x="208" y="174" width="224" height="32" rx="6" fill="#F7F8FA"/>
|
||
<g transform="translate(220 184)" stroke="#374151" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="0" y="2" width="14" height="18" rx="2"/>
|
||
<path d="M5 0h6v4H5z"/>
|
||
</g>
|
||
<text x="248" y="196" fill="#111827" font-size="13">Duplicate</text>
|
||
<text x="416" y="196" text-anchor="end" fill="#6B7280" font-size="11">⌘D</text>
|
||
|
||
<!-- divider -->
|
||
<line x1="216" y1="218" x2="424" y2="218" stroke="#EDEFF3"/>
|
||
|
||
<!-- group label 2 -->
|
||
<text x="216" y="236" fill="#6B7280" font-size="11" font-weight="700">DANGER</text>
|
||
|
||
<!-- destructive item -->
|
||
<rect x="208" y="244" width="224" height="32" rx="6" fill="#FFFFFF"/>
|
||
<g transform="translate(220 254)" stroke="#DC2626" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M3 6h18M8 6V3h8v3M6 6l1 14h10l1-14"/>
|
||
</g>
|
||
<text x="248" y="266" fill="#DC2626" font-size="13" font-weight="600">Delete</text>
|
||
<text x="416" y="266" text-anchor="end" fill="#DC2626" font-size="11">⌫</text>
|
||
|
||
<!-- disabled item -->
|
||
<rect x="208" y="282" width="224" height="32" rx="6" fill="#FFFFFF"/>
|
||
<g transform="translate(220 292)" stroke="#B8BDC9" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="11" cy="11" r="9"/><path d="m4 4 14 14"/>
|
||
</g>
|
||
<text x="248" y="304" fill="#B8BDC9" font-size="13">Archive (coming soon)</text>
|
||
</g>
|
||
|
||
<!-- annotations -->
|
||
<g stroke="#374151" stroke-width="1" fill="none">
|
||
<line x1="280" y1="78" x2="540" y2="80"/>
|
||
<line x1="200" y1="108" x2="60" y2="120"/>
|
||
<line x1="216" y1="130" x2="60" y2="180"/>
|
||
<line x1="232" y1="190" x2="60" y2="230"/>
|
||
<line x1="416" y1="160" x2="540" y2="140"/>
|
||
<line x1="248" y1="266" x2="540" y2="280"/>
|
||
<line x1="248" y1="304" x2="540" y2="320"/>
|
||
</g>
|
||
<g fill="#111827" font-size="13" font-weight="600">
|
||
<text x="540" y="74">1 · Trigger — disclosure caret indicates menu</text>
|
||
<text x="60" y="114">2 · Surface — surface.background, rounded.lg, elevation.2</text>
|
||
<text x="60" y="174">3 · Group label — typography.caption, uppercase, text.muted</text>
|
||
<text x="60" y="224">4 · Hover state — surface.subtle, full-width</text>
|
||
<text x="540" y="134">5 · Shortcut — typography.caption, right-aligned</text>
|
||
<text x="540" y="274">6 · Destructive item — semantic.danger text + icon</text>
|
||
<text x="540" y="314">7 · Disabled — text.muted, non-interactive, skipped by keyboard</text>
|
||
</g>
|
||
|
||
<!-- token legend -->
|
||
<g transform="translate(40 380)">
|
||
<text x="0" y="0" font-size="12" font-weight="700" fill="#111827">Tokens</text>
|
||
<text x="0" y="16" font-size="12" fill="#374151">surface.bg → surface.background · radius → rounded.lg · elevation → elevation.2</text>
|
||
<text x="0" y="32" font-size="12" fill="#374151">item.height → 32 · item.padding → 8 × 12 · divider → border.default</text>
|
||
</g>
|
||
</svg>
|
