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>
55 lines
2.6 KiB
XML
55 lines
2.6 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 360" width="760" height="360" font-family="Inter, Arial, sans-serif" role="img" aria-label="Tabs anatomy">
|
||
<title>Tabs anatomy</title>
|
||
<desc>Labeled diagram of a KDC tab list: tab list, individual tab, active indicator, hover, disabled, panel, optional badge.</desc>
|
||
|
||
<rect width="760" height="360" fill="#F7F8FA"/>
|
||
|
||
<!-- tab list bar -->
|
||
<line x1="60" y1="160" x2="700" y2="160" stroke="#EDEFF3"/>
|
||
|
||
<!-- tabs -->
|
||
<g font-size="14">
|
||
<text x="80" y="148" fill="#0B5FFF" font-weight="700">Overview</text>
|
||
<rect x="76" y="156" width="84" height="3" rx="1.5" fill="#0B5FFF"/>
|
||
|
||
<text x="184" y="148" fill="#374151">Activity</text>
|
||
<g transform="translate(244 134)">
|
||
<rect width="22" height="18" rx="9" fill="#EDEFF3"/>
|
||
<text x="11" y="13" text-anchor="middle" fill="#111827" font-size="11" font-weight="700">12</text>
|
||
</g>
|
||
|
||
<text x="296" y="148" fill="#374151">Members</text>
|
||
<text x="384" y="148" fill="#B8BDC9">Billing</text>
|
||
</g>
|
||
|
||
<!-- panel -->
|
||
<rect x="60" y="180" width="640" height="100" rx="8" fill="#FFFFFF" stroke="#EDEFF3"/>
|
||
<text x="80" y="216" fill="#111827" font-size="14" font-weight="600">Overview</text>
|
||
<text x="80" y="240" fill="#374151" font-size="13">Panel content for the active tab.</text>
|
||
|
||
<!-- annotations -->
|
||
<g stroke="#374151" stroke-width="1" fill="none">
|
||
<line x1="60" y1="160" x2="40" y2="100"/>
|
||
<line x1="118" y1="158" x2="60" y2="60"/>
|
||
<line x1="120" y1="148" x2="200" y2="60"/>
|
||
<line x1="266" y1="143" x2="340" y2="60"/>
|
||
<line x1="396" y1="148" x2="540" y2="60"/>
|
||
<line x1="60" y1="180" x2="40" y2="300"/>
|
||
</g>
|
||
<g fill="#111827" font-size="13" font-weight="600">
|
||
<text x="40" y="94">1 · Tab list — bottom border separates from panel</text>
|
||
<text x="60" y="54">2 · Active indicator — 3px bar, brand.primary</text>
|
||
<text x="200" y="54">3 · Active label — brand.primary, semibold</text>
|
||
<text x="340" y="54">4 · Optional count — pill, surface.muted</text>
|
||
<text x="540" y="54">5 · Disabled tab — text.muted @ 60%, no hover</text>
|
||
<text x="40" y="316">6 · Panel — labelled by active tab via aria-controls</text>
|
||
</g>
|
||
|
||
<!-- token legend -->
|
||
<g transform="translate(40 300)">
|
||
<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">tab.height → 40 · tab.padding → 8 × 16 · active.bar → 3px brand.primary</text>
|
||
<text x="0" y="32" font-size="12" fill="#374151">label → typography.bodyS · inactive → text.default · disabled → text.muted @ 60%</text>
|
||
</g>
|
||
</svg>
|