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>
64 lines
3.1 KiB
XML
64 lines
3.1 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="Modal anatomy">
|
||
<title>Modal anatomy</title>
|
||
<desc>Labeled diagram of a KDC modal: scrim, container, header, body, footer actions, close button.</desc>
|
||
|
||
<!-- scrim -->
|
||
<rect width="760" height="440" fill="#111827" fill-opacity="0.55"/>
|
||
|
||
<!-- modal container -->
|
||
<rect x="180" y="60" width="400" height="320" rx="16" fill="#FFFFFF"/>
|
||
|
||
<!-- header -->
|
||
<text x="204" y="100" fill="#111827" font-size="20" font-weight="700">Delete project</text>
|
||
<text x="204" y="118" fill="#6B7280" font-size="12">This action cannot be undone.</text>
|
||
|
||
<!-- close icon -->
|
||
<g transform="translate(540 80)" stroke="#6B7280" stroke-width="1.8" stroke-linecap="round" fill="none">
|
||
<path d="m4 4 12 12M16 4 4 16"/>
|
||
</g>
|
||
|
||
<!-- divider -->
|
||
<line x1="204" y1="138" x2="556" y2="138" stroke="#EDEFF3"/>
|
||
|
||
<!-- body -->
|
||
<text x="204" y="170" fill="#374151" font-size="14">Are you sure you want to delete</text>
|
||
<text x="204" y="190" fill="#374151" font-size="14">"Marketing Q3"? All associated data</text>
|
||
<text x="204" y="210" fill="#374151" font-size="14">will be permanently removed.</text>
|
||
|
||
<!-- footer divider -->
|
||
<line x1="204" y1="316" x2="556" y2="316" stroke="#EDEFF3"/>
|
||
|
||
<!-- footer actions -->
|
||
<rect x="396" y="332" width="68" height="32" rx="6" fill="#F7F8FA" stroke="#D9DCE3"/>
|
||
<text x="430" y="352" text-anchor="middle" fill="#111827" font-size="12" font-weight="600">Cancel</text>
|
||
<rect x="476" y="332" width="80" height="32" rx="6" fill="#DC2626"/>
|
||
<text x="516" y="352" text-anchor="middle" fill="#FFFFFF" font-size="12" font-weight="600">Delete</text>
|
||
|
||
<!-- annotations -->
|
||
<g stroke="#FFFFFF" stroke-width="1" fill="none">
|
||
<line x1="100" y1="40" x2="180" y2="40"/>
|
||
<line x1="180" y1="60" x2="100" y2="100"/>
|
||
<line x1="380" y1="100" x2="660" y2="60"/>
|
||
<line x1="544" y1="86" x2="660" y2="120"/>
|
||
<line x1="380" y1="200" x2="660" y2="200"/>
|
||
<line x1="380" y1="346" x2="660" y2="346"/>
|
||
</g>
|
||
|
||
<g fill="#FFFFFF" font-size="13" font-weight="600">
|
||
<text x="100" y="34">1 · Scrim — neutral.900 @ 55%</text>
|
||
<text x="100" y="116">2 · Container — surface.background, rounded.xl, elevation.3</text>
|
||
<text x="660" y="54">3 · Header — title + optional subtitle</text>
|
||
<text x="660" y="114">4 · Close — top-right, 20×20</text>
|
||
<text x="660" y="194">5 · Body — typography.bodyM, scrolls if tall</text>
|
||
<text x="660" y="340">6 · Footer — actions right-aligned, primary last</text>
|
||
</g>
|
||
|
||
<!-- token legend -->
|
||
<g transform="translate(40 400)">
|
||
<text x="0" y="0" font-size="12" font-weight="700" fill="#FFFFFF">Tokens</text>
|
||
<text x="0" y="16" font-size="12" fill="#EDEFF3">container.bg → surface.background · radius → rounded.xl (16px)</text>
|
||
<text x="420" y="16" font-size="12" fill="#EDEFF3">width → 480px (default modal)</text>
|
||
<text x="0" y="32" font-size="12" fill="#EDEFF3">scrim → neutral.900 @ 55% · elevation → elevation.3</text>
|
||
</g>
|
||
</svg>
|